y11n-spreadsheet 0.1.0 → 1.0.1

package/dist/index.js

@@ -1,37 +1,44 @@
-import { css as k, LitElement as V, html as _, nothing as x } from "lit";
-import { property as w, state as E, customElement as D, query as A } from "lit/decorators.js";
-import { repeat as N } from "lit/directives/repeat.js";
-function y(i, e) {
+import { css as M, LitElement as O, html as y, nothing as k } from "lit";
+import { property as m, state as E, customElement as T, query as I } from "lit/decorators.js";
+import { repeat as L } from "lit/directives/repeat.js";
+import { styleMap as U } from "lit/directives/style-map.js";
+function z(i, e) {
+  if (i === e) return !0;
+  if (!i || !e) return !1;
+  const t = Object.keys(i), r = Object.keys(e);
+  return t.length !== r.length ? !1 : t.every((s) => i[s] === e[s]);
+}
+function b(i, e) {
   return `${i}:${e}`;
 }
-function j(i) {
+function ot(i) {
   const [e, t] = i.split(":").map(Number);
   return { row: e, col: t };
 }
-function R(i) {
+function F(i) {
   let e = "", t = i;
   for (; t >= 0; )
     e = String.fromCharCode(t % 26 + 65) + e, t = Math.floor(t / 26) - 1;
   return e;
 }
-function M(i) {
+function P(i) {
   let e = 0;
   for (let t = 0; t < i.length; t++)
     e = e * 26 + (i.charCodeAt(t) - 64);
   return e - 1;
 }
-function S(i) {
-  const e = i.match(/^([A-Z]+)(\d+)$/i);
-  if (!e) throw new Error(`Invalid cell reference: ${i}`);
-  const t = M(e[1].toUpperCase());
-  return { row: parseInt(e[2], 10) - 1, col: t };
+function R(i) {
+  const t = i.replace(/\$/g, "").match(/^([A-Z]+)(\d+)$/i);
+  if (!t) throw new Error(`Invalid cell reference: ${i}`);
+  const r = P(t[1].toUpperCase());
+  return { row: parseInt(t[2], 10) - 1, col: r };
 }
-function O(i) {
-  return `${R(i.col)}${i.row + 1}`;
+function D(i) {
+  return `${F(i.col)}${i.row + 1}`;
 }
-class B {
-  constructor(e, t, s) {
-    this.anchor = { row: 0, col: 0 }, this.head = { row: 0, col: 0 }, this._isDragging = !1, this.host = e, this._maxRows = t, this._maxCols = s, e.addController(this);
+class j {
+  constructor(e, t, r) {
+    this.anchor = { row: 0, col: 0 }, this.head = { row: 0, col: 0 }, this._isDragging = !1, this.host = e, this._maxRows = t, this._maxCols = r, e.addController(this);
   }
   hostConnected() {
   }
@@ -61,8 +68,8 @@ class B {
   }
   /** Check if a cell is within the current selection */
   isCellSelected(e, t) {
-    const s = this.range;
-    return e >= s.start.row && e <= s.end.row && t >= s.start.col && t <= s.end.col;
+    const r = this.range;
+    return e >= r.start.row && e <= r.end.row && t >= r.start.col && t <= r.end.col;
   }
   /** Check if a cell is the active cell (head) */
   isCellActive(e, t) {
@@ -70,12 +77,12 @@ class B {
   }
   // ─── Mouse Interaction ──────────────────────────────
   /** Called on mousedown/pointerdown on a cell */
-  startSelection(e, t, s = !1) {
-    if (s)
+  startSelection(e, t, r = !1) {
+    if (r)
       this.head = this.clamp({ row: e, col: t });
     else {
-      const r = this.clamp({ row: e, col: t });
-      this.anchor = { ...r }, this.head = { ...r };
+      const s = this.clamp({ row: e, col: t });
+      this.anchor = { ...s }, this.head = { ...s };
     }
     this._isDragging = !0, this.host.requestUpdate();
   }
@@ -92,17 +99,17 @@ class B {
   }
   // ─── Keyboard Navigation ────────────────────────────
   /** Move the active cell by delta. If extend=true, extends selection. */
-  move(e, t, s = !1) {
-    const r = this.clamp({
+  move(e, t, r = !1) {
+    const s = this.clamp({
       row: this.head.row + e,
       col: this.head.col + t
     });
-    this.head = r, s || (this.anchor = { ...r }), this.host.requestUpdate();
+    this.head = s, r || (this.anchor = { ...s }), this.host.requestUpdate();
   }
   /** Move to a specific cell */
-  moveTo(e, t, s = !1) {
-    const r = this.clamp({ row: e, col: t });
-    this.head = r, s || (this.anchor = { ...r }), this.host.requestUpdate();
+  moveTo(e, t, r = !1) {
+    const s = this.clamp({ row: e, col: t });
+    this.head = s, r || (this.anchor = { ...s }), this.host.requestUpdate();
   }
   /** Select all cells */
   selectAll() {
@@ -120,18 +127,75 @@ class B {
     };
   }
 }
-const U = 64;
-class F {
+const W = 64, H = /* @__PURE__ */ new Set([
+  "SUM",
+  "AVERAGE",
+  "MIN",
+  "MAX",
+  "COUNT",
+  "COUNTA",
+  "CONCAT"
+]), q = /* @__PURE__ */ new Set(["NOW"]);
+class x {
+  constructor(e, t, r) {
+    this.values = e, this.rows = t, this.cols = r;
+  }
+  get(e, t) {
+    return this.values[e * this.cols + t];
+  }
+  getRow(e) {
+    const t = e * this.cols;
+    return this.values.slice(t, t + this.cols);
+  }
+  getCol(e) {
+    const t = [];
+    for (let r = 0; r < this.rows; r++)
+      t.push(this.values[r * this.cols + e]);
+    return t;
+  }
+}
+function V(i, e) {
+  let t = "=", r = e;
+  e.startsWith("<>") ? (t = "<>", r = e.substring(2)) : e.startsWith(">=") ? (t = ">=", r = e.substring(2)) : e.startsWith("<=") ? (t = "<=", r = e.substring(2)) : e.startsWith(">") ? (t = ">", r = e.substring(1)) : e.startsWith("<") ? (t = "<", r = e.substring(1)) : e.startsWith("=") && (t = "=", r = e.substring(1));
+  const s = Number(r), o = Number(i), n = !isNaN(s) && !isNaN(o) && r.trim() !== "" && String(i).trim() !== "", a = String(i).toLowerCase(), l = r.toLowerCase();
+  switch (t) {
+    case "=":
+      return n ? o === s : a === l;
+    case "<>":
+      return n ? o !== s : a !== l;
+    case ">":
+      return n ? o > s : a > l;
+    case "<":
+      return n ? o < s : a < l;
+    case ">=":
+      return n ? o >= s : a >= l;
+    case "<=":
+      return n ? o <= s : a <= l;
+    default:
+      return !1;
+  }
+}
+class K {
   constructor() {
-    this.functions = /* @__PURE__ */ new Map(), this.data = /* @__PURE__ */ new Map(), this.evaluating = /* @__PURE__ */ new Set(), this._evalDepth = 0, this._deps = /* @__PURE__ */ new Map(), this._reverseDeps = /* @__PURE__ */ new Map(), this._trackingCellKey = null, this.registerBuiltins();
+    this._functions = /* @__PURE__ */ new Map(), this._data = /* @__PURE__ */ new Map(), this._evaluating = /* @__PURE__ */ new Set(), this._evalDepth = 0, this._deps = /* @__PURE__ */ new Map(), this._reverseDeps = /* @__PURE__ */ new Map(), this._trackingCellKey = null, this._cache = /* @__PURE__ */ new Map(), this.registerBuiltins();
   }
   /** Register a user-defined function */
   registerFunction(e, t) {
-    this.functions.set(e.toUpperCase(), t);
+    this._functions.set(e.toUpperCase(), t);
   }
-  /** Update the data reference for evaluation */
+  /** Update the data reference for evaluation (full reset of dep graph and cache) */
   setData(e) {
-    this.data = e, this._deps.clear(), this._reverseDeps.clear();
+    this._data = e, this._deps.clear(), this._reverseDeps.clear(), this._cache.clear();
+  }
+  /**
+   * Update the data reference while preserving the dependency graph for
+   * unchanged cells. Only clears deps and cache for the specified changed keys,
+   * allowing recalculateAffected() to use the existing graph for BFS traversal.
+   */
+  updateData(e, t) {
+    this._data = e;
+    for (const r of t)
+      this._clearDepsFor(r);
   }
   /**
    * Evaluate a raw value. If it starts with '=', parse and execute the formula.
@@ -141,16 +205,22 @@ class F {
    */
   evaluate(e, t) {
     if (!e || e.trim() === "")
-      return t && this._clearDepsFor(t), { displayValue: "", type: "text" };
+      return t && (this._clearDepsFor(t), this._cache.delete(t)), { displayValue: "", type: "text" };
     if (!e.startsWith("="))
-      return t && this._clearDepsFor(t), this.coerceValue(e);
+      return t && (this._clearDepsFor(t), this._cache.delete(t)), this.coerceValue(e);
+    const r = e.substring(1).toUpperCase(), s = [...q].some((o) => r.includes(o + "("));
+    if (t && !s) {
+      const o = this._cache.get(t);
+      if (o)
+        return { displayValue: o.displayValue, type: o.type };
+    }
     try {
       t && (this._clearDepsFor(t), this._trackingCellKey = t);
-      const s = e.substring(1), r = this.parseExpression(s);
-      return this.coerceValue(String(r));
-    } catch (s) {
-      const r = s instanceof Error ? s.message : "";
-      return r.startsWith("#") ? { displayValue: r, type: "error" } : { displayValue: "#ERROR!", type: "error" };
+      const o = e.substring(1), n = this.parseExpression(o), a = this.coerceValue(String(n));
+      return t && !s && this._cache.set(t, { displayValue: a.displayValue, type: a.type }), a;
+    } catch (o) {
+      const n = o instanceof Error ? o.message : "", a = n.startsWith("#") ? { displayValue: n, type: "error" } : { displayValue: "#ERROR!", type: "error" };
+      return t && !s && this._cache.set(t, a), a;
     } finally {
       this._trackingCellKey = null;
     }
@@ -160,12 +230,12 @@ class F {
    * Rebuilds the dependency graph. Returns a set of cell keys that changed.
    */
   recalculate() {
-    this._deps.clear(), this._reverseDeps.clear();
+    this._deps.clear(), this._reverseDeps.clear(), this._cache.clear();
     const e = /* @__PURE__ */ new Set();
-    for (const [t, s] of this.data)
-      if (s.rawValue.startsWith("=")) {
-        const r = this.evaluate(s.rawValue, t);
-        (s.displayValue !== r.displayValue || s.type !== r.type) && (s.displayValue = r.displayValue, s.type = r.type, e.add(t));
+    for (const [t, r] of this._data)
+      if (r.rawValue.startsWith("=")) {
+        const s = this.evaluate(r.rawValue, t);
+        (r.displayValue !== s.displayValue || r.type !== s.type) && (r.displayValue = s.displayValue, r.type = s.type, e.add(t));
       }
     return e;
   }
@@ -174,141 +244,156 @@ class F {
    * Uses the dependency graph for targeted recalculation (BFS order).
    */
   recalculateAffected(e) {
-    if (this._reverseDeps.size === 0 && this.data.size > 0)
+    if (this._reverseDeps.size === 0 && this._data.size > 0)
       return this.recalculate();
-    const t = /* @__PURE__ */ new Set(), s = new Set(e);
-    for (const n of e) {
-      const l = this.data.get(n);
+    const t = /* @__PURE__ */ new Set(), r = new Set(e);
+    for (const a of e)
+      this._cache.delete(a);
+    for (const a of e) {
+      const l = this._data.get(a);
       if (l != null && l.rawValue.startsWith("=")) {
-        const c = this.evaluate(l.rawValue, n);
-        (l.displayValue !== c.displayValue || l.type !== c.type) && (l.displayValue = c.displayValue, l.type = c.type, t.add(n));
+        const c = this.evaluate(l.rawValue, a);
+        (l.displayValue !== c.displayValue || l.type !== c.type) && (l.displayValue = c.displayValue, l.type = c.type, t.add(a));
       }
     }
-    const r = [], a = /* @__PURE__ */ new Set(), o = [...e];
-    for (; o.length > 0; ) {
-      const n = o.shift(), l = this._reverseDeps.get(n);
+    const s = [], o = /* @__PURE__ */ new Set(), n = [...e];
+    for (; n.length > 0; ) {
+      const a = n.shift(), l = this._reverseDeps.get(a);
       if (l)
         for (const c of l)
-          !a.has(c) && !s.has(c) && (a.add(c), r.push(c), o.push(c));
+          !o.has(c) && !r.has(c) && (o.add(c), s.push(c), n.push(c));
     }
-    for (const n of r) {
-      const l = this.data.get(n);
+    for (const a of s)
+      this._cache.delete(a);
+    for (const a of s) {
+      const l = this._data.get(a);
       if (l != null && l.rawValue.startsWith("=")) {
-        const c = this.evaluate(l.rawValue, n);
-        (l.displayValue !== c.displayValue || l.type !== c.type) && (l.displayValue = c.displayValue, l.type = c.type, t.add(n));
+        const c = this.evaluate(l.rawValue, a);
+        (l.displayValue !== c.displayValue || l.type !== c.type) && (l.displayValue = c.displayValue, l.type = c.type, t.add(a));
       }
     }
     return t;
   }
   // ─── Dependency Tracking ─────────────────────────────
   _clearDepsFor(e) {
-    var s;
+    var r;
     const t = this._deps.get(e);
     if (t) {
-      for (const r of t)
-        (s = this._reverseDeps.get(r)) == null || s.delete(e);
+      for (const s of t)
+        (r = this._reverseDeps.get(s)) == null || r.delete(e);
       this._deps.delete(e);
     }
+    this._cache.delete(e);
   }
   _trackDep(e) {
     if (!this._trackingCellKey) return;
     let t = this._deps.get(this._trackingCellKey);
     t || (t = /* @__PURE__ */ new Set(), this._deps.set(this._trackingCellKey, t)), t.add(e);
-    let s = this._reverseDeps.get(e);
-    s || (s = /* @__PURE__ */ new Set(), this._reverseDeps.set(e, s)), s.add(this._trackingCellKey);
+    let r = this._reverseDeps.get(e);
+    r || (r = /* @__PURE__ */ new Set(), this._reverseDeps.set(e, r)), r.add(this._trackingCellKey);
   }
   // ─── Value Coercion ──────────────────────────────────
   coerceValue(e) {
-    if (e === "#ERROR!" || e === "#REF!" || e === "#DIV/0!" || e === "#NAME?" || e === "#CIRC!")
+    if (e === "#ERROR!" || e === "#REF!" || e === "#DIV/0!" || e === "#NAME?" || e === "#CIRC!" || e === "#VALUE!")
       return { displayValue: e, type: "error" };
     const t = e.toUpperCase();
     if (t === "TRUE" || t === "FALSE")
       return { displayValue: t, type: "boolean" };
-    const s = Number(e);
-    return e.trim() !== "" && !isNaN(s) ? { displayValue: String(s), type: "number" } : { displayValue: e, type: "text" };
+    const r = Number(e);
+    if (e.trim() !== "" && !isNaN(r)) {
+      const s = Number.isFinite(r) ? parseFloat(r.toPrecision(15)) : r;
+      return { displayValue: String(s), type: "number" };
+    }
+    return { displayValue: e, type: "text" };
   }
   // ─── Lexer ───────────────────────────────────────────
   tokenize(e) {
     const t = [];
-    let s = 0;
-    for (; s < e.length; ) {
-      const r = e[s];
-      if (/\s/.test(r)) {
-        s++;
+    let r = 0;
+    for (; r < e.length; ) {
+      const s = e[r];
+      if (/\s/.test(s)) {
+        r++;
         continue;
       }
-      if (r === '"') {
-        let a = "";
-        for (s++; s < e.length && e[s] !== '"'; )
-          a += e[s], s++;
-        s++, t.push({ type: "STRING", value: a });
+      if (s === '"') {
+        let o = "";
+        for (r++; r < e.length && e[r] !== '"'; )
+          o += e[r], r++;
+        r++, t.push({ type: "STRING", value: o });
         continue;
       }
-      if (/\d/.test(r) || r === "." && s + 1 < e.length && /\d/.test(e[s + 1])) {
-        let a = "";
-        for (; s < e.length && (/\d/.test(e[s]) || e[s] === "."); )
-          a += e[s], s++;
-        t.push({ type: "NUMBER", value: a });
+      if (/\d/.test(s) || s === "." && r + 1 < e.length && /\d/.test(e[r + 1])) {
+        let o = "";
+        for (; r < e.length && (/\d/.test(e[r]) || e[r] === "."); )
+          o += e[r], r++;
+        t.push({ type: "NUMBER", value: o });
         continue;
       }
-      if (r === "+" || r === "-" || r === "*" || r === "/" || r === "&") {
-        t.push({ type: "OPERATOR", value: r }), s++;
+      if (s === "+" || s === "-" || s === "*" || s === "/" || s === "&") {
+        t.push({ type: "OPERATOR", value: s }), r++;
         continue;
       }
-      if (r === "<" || r === ">") {
-        s + 1 < e.length && e[s + 1] === "=" ? (t.push({ type: "OPERATOR", value: r + "=" }), s += 2) : r === "<" && s + 1 < e.length && e[s + 1] === ">" ? (t.push({ type: "OPERATOR", value: "<>" }), s += 2) : (t.push({ type: "OPERATOR", value: r }), s++);
+      if (s === "<" || s === ">") {
+        r + 1 < e.length && e[r + 1] === "=" ? (t.push({ type: "OPERATOR", value: s + "=" }), r += 2) : s === "<" && r + 1 < e.length && e[r + 1] === ">" ? (t.push({ type: "OPERATOR", value: "<>" }), r += 2) : (t.push({ type: "OPERATOR", value: s }), r++);
         continue;
       }
-      if (r === "=") {
-        t.push({ type: "OPERATOR", value: "=" }), s++;
+      if (s === "=") {
+        t.push({ type: "OPERATOR", value: "=" }), r++;
         continue;
       }
-      if (r === "(") {
-        t.push({ type: "LPAREN", value: "(" }), s++;
+      if (s === "(") {
+        t.push({ type: "LPAREN", value: "(" }), r++;
         continue;
       }
-      if (r === ")") {
-        t.push({ type: "RPAREN", value: ")" }), s++;
+      if (s === ")") {
+        t.push({ type: "RPAREN", value: ")" }), r++;
         continue;
       }
-      if (r === ",") {
-        t.push({ type: "COMMA", value: "," }), s++;
+      if (s === ",") {
+        t.push({ type: "COMMA", value: "," }), r++;
         continue;
       }
-      if (/[A-Za-z_]/.test(r)) {
-        let a = "";
-        for (; s < e.length && /[A-Za-z0-9_]/.test(e[s]); )
-          a += e[s], s++;
-        const o = a.toUpperCase();
-        if (o === "TRUE" || o === "FALSE") {
-          t.push({ type: "BOOLEAN", value: o });
+      if (/[A-Za-z_$]/.test(s)) {
+        let o = "";
+        for (; r < e.length && /[A-Za-z0-9_$]/.test(e[r]); )
+          o += e[r], r++;
+        const n = o.replace(/\$/g, ""), a = n !== o, l = n.toUpperCase();
+        if (!a && (l === "TRUE" || l === "FALSE")) {
+          t.push({ type: "BOOLEAN", value: l });
           continue;
         }
-        if (s < e.length && e[s] === ":" && /^[A-Z]+\d+$/i.test(a)) {
-          s++;
-          let l = "";
-          for (; s < e.length && /[A-Za-z0-9]/.test(e[s]); )
-            l += e[s], s++;
-          if (/^[A-Z]+\d+$/i.test(l)) {
-            t.push({ type: "RANGE", value: `${a.toUpperCase()}:${l.toUpperCase()}` });
+        if (r < e.length && e[r] === ":" && /^[A-Z]+\d+$/i.test(n)) {
+          r++;
+          let c = "";
+          for (; r < e.length && /[A-Za-z0-9$]/.test(e[r]); )
+            c += e[r], r++;
+          const h = c.replace(/\$/g, "");
+          if (/^[A-Z]+\d+$/i.test(h)) {
+            t.push({ type: "RANGE", value: `${o.toUpperCase()}:${c.toUpperCase()}` });
+            continue;
+          }
+          throw new Error(`Invalid range: ${o}:${c}`);
+        }
+        if (!a) {
+          let c = r;
+          for (; c < e.length && /\s/.test(e[c]); ) c++;
+          if (c < e.length && e[c] === "(") {
+            t.push({ type: "FUNC", value: l });
             continue;
           }
-          throw new Error(`Invalid range: ${a}:${l}`);
         }
-        let n = s;
-        for (; n < e.length && /\s/.test(e[n]); ) n++;
-        if (n < e.length && e[n] === "(") {
-          t.push({ type: "FUNC", value: o });
+        if (/^[A-Z]+\d+$/i.test(n)) {
+          t.push({ type: "REF", value: o.toUpperCase() });
           continue;
         }
-        if (/^[A-Z]+\d+$/i.test(a)) {
-          t.push({ type: "REF", value: a.toUpperCase() });
+        if (!a) {
+          t.push({ type: "FUNC", value: l });
           continue;
         }
-        t.push({ type: "FUNC", value: o });
-        continue;
+        throw new Error(`Unexpected identifier: ${o}`);
       }
-      throw new Error(`Unexpected character: ${r}`);
+      throw new Error(`Unexpected character: ${s}`);
     }
     return t.push({ type: "EOF", value: "" }), t;
   }
@@ -321,13 +406,13 @@ class F {
     return e.tokens[e.pos];
   }
   _consume(e, t) {
-    const s = e.tokens[e.pos];
-    if (t && s.type !== t)
-      throw new Error(`Expected ${t} but got ${s.type} (${s.value})`);
-    return e.pos++, s;
+    const r = e.tokens[e.pos];
+    if (t && r.type !== t)
+      throw new Error(`Expected ${t} but got ${r.type} (${r.value})`);
+    return e.pos++, r;
   }
   parseExpression(e) {
-    if (++this._evalDepth > U)
+    if (++this._evalDepth > W)
       throw this._evalDepth--, new Error("#ERROR!");
     try {
       const t = { tokens: this.tokenize(e), pos: 0 };
@@ -339,8 +424,8 @@ class F {
   _parseComparison(e) {
     let t = this._parseConcatenation(e);
     for (; this._peek(e).type === "OPERATOR" && ["=", "<>", "<", ">", "<=", ">="].includes(this._peek(e).value); ) {
-      const s = this._consume(e).value, r = this._parseConcatenation(e);
-      t = this._compareValues(t, r, s);
+      const r = this._consume(e).value, s = this._parseConcatenation(e);
+      t = this._compareValues(t, s, r);
     }
     return t;
   }
@@ -348,28 +433,28 @@ class F {
     let t = this._parseAddSub(e);
     for (; this._peek(e).type === "OPERATOR" && this._peek(e).value === "&"; ) {
       this._consume(e);
-      const s = this._parseAddSub(e);
-      t = String(t) + String(s);
+      const r = this._parseAddSub(e);
+      t = String(t) + String(r);
     }
     return t;
   }
   _parseAddSub(e) {
     let t = this._parseMulDiv(e);
     for (; this._peek(e).type === "OPERATOR" && (this._peek(e).value === "+" || this._peek(e).value === "-"); ) {
-      const s = this._consume(e).value, r = this._parseMulDiv(e);
-      s === "+" ? t = Number(t) + Number(r) : t = Number(t) - Number(r);
+      const r = this._consume(e).value, s = this._parseMulDiv(e);
+      r === "+" ? t = Number(t) + Number(s) : t = Number(t) - Number(s);
     }
     return t;
   }
   _parseMulDiv(e) {
     let t = this._parseUnary(e);
     for (; this._peek(e).type === "OPERATOR" && (this._peek(e).value === "*" || this._peek(e).value === "/"); ) {
-      const s = this._consume(e).value, r = this._parseUnary(e);
-      if (s === "*") t = Number(t) * Number(r);
+      const r = this._consume(e).value, s = this._parseUnary(e);
+      if (r === "*") t = Number(t) * Number(s);
       else {
-        const a = Number(r);
-        if (a === 0) throw new Error("#DIV/0!");
-        t = Number(t) / a;
+        const o = Number(s);
+        if (o === 0) throw new Error("#DIV/0!");
+        t = Number(t) / o;
       }
     }
     return t;
@@ -394,8 +479,8 @@ class F {
         return this._parseFunction(e);
       case "LPAREN":
         this._consume(e);
-        const s = this._parseComparison(e);
-        return this._consume(e, "RPAREN"), s;
+        const r = this._parseComparison(e);
+        return this._consume(e, "RPAREN"), r;
       default:
         throw new Error(`Unexpected token: ${t.type} (${t.value})`);
     }
@@ -403,34 +488,65 @@ class F {
   _parseFunction(e) {
     const t = this._consume(e, "FUNC").value;
     this._consume(e, "LPAREN");
-    const s = [];
+    const r = [];
     if (this._peek(e).type !== "RPAREN")
-      for (s.push(this._parseComparison(e)); this._peek(e).type === "COMMA"; )
-        this._consume(e), s.push(this._parseComparison(e));
+      for (r.push(this._parseComparison(e)); this._peek(e).type === "COMMA"; )
+        this._consume(e), r.push(this._parseComparison(e));
     this._consume(e, "RPAREN");
-    const r = this.functions.get(t);
-    if (!r) throw new Error("#NAME?");
-    const a = this._createContext(), o = [];
-    for (const n of s)
-      Array.isArray(n) ? o.push(...n) : o.push(n);
-    return r(a, ...o);
+    const s = this._functions.get(t);
+    if (!s) throw new Error("#NAME?");
+    const o = this._createContext();
+    if (H.has(t)) {
+      const n = [];
+      for (const a of r)
+        if (a instanceof x)
+          for (const l of a.values)
+            l !== void 0 && n.push(l);
+        else Array.isArray(a) ? n.push(...a) : n.push(a);
+      return s(o, ...n);
+    }
+    return s(o, ...r);
   }
   // ─── Comparison helper ────────────────────────────────
-  _compareValues(e, t, s) {
-    const r = Number(e), a = Number(t), o = !isNaN(r) && !isNaN(a) && String(e).trim() !== "" && String(t).trim() !== "";
-    switch (s) {
+  _compareValues(e, t, r) {
+    const s = (l) => {
+      if (typeof l == "boolean" || typeof l == "number") return !0;
+      const c = String(l).trim();
+      return c !== "" && !isNaN(Number(c));
+    };
+    if (s(e) && s(t)) {
+      const l = Number(e), c = Number(t);
+      switch (r) {
+        case "=":
+          return l === c;
+        case "<>":
+          return l !== c;
+        case "<":
+          return l < c;
+        case ">":
+          return l > c;
+        case "<=":
+          return l <= c;
+        case ">=":
+          return l >= c;
+        default:
+          return !1;
+      }
+    }
+    const n = String(e ?? ""), a = String(t ?? "");
+    switch (r) {
       case "=":
-        return e === t || o && r === a;
+        return n === a;
       case "<>":
-        return e !== t && (!o || r !== a);
+        return n !== a;
       case "<":
-        return o ? r < a : String(e) < String(t);
+        return n < a;
       case ">":
-        return o ? r > a : String(e) > String(t);
+        return n > a;
       case "<=":
-        return o ? r <= a : String(e) <= String(t);
+        return n <= a;
       case ">=":
-        return o ? r >= a : String(e) >= String(t);
+        return n >= a;
       default:
         return !1;
     }
@@ -440,69 +556,74 @@ class F {
   // Each nested evaluation calls parseExpression which creates its
   // own ParserState, so no save/restore is needed.
   _resolveRef(e) {
-    const t = S(e), s = y(t.row, t.col);
-    if (this._trackDep(s), this.evaluating.has(s))
+    const t = R(e.replace(/\$/g, "")), r = b(t.row, t.col);
+    if (this._trackDep(r), this._evaluating.has(r))
       throw new Error("#CIRC!");
-    const r = this.data.get(s);
-    if (!r) return 0;
-    if (r.rawValue.startsWith("=")) {
-      const o = this._trackingCellKey;
-      this._trackingCellKey = null, this.evaluating.add(s);
+    const s = this._data.get(r);
+    if (!s) return 0;
+    if (s.rawValue.startsWith("=")) {
+      this._evaluating.add(r);
       try {
-        return this.parseExpression(r.rawValue.substring(1));
+        return this.parseExpression(s.rawValue.substring(1));
       } catch {
         throw new Error("#ERROR!");
       } finally {
-        this._trackingCellKey = o, this.evaluating.delete(s);
+        this._evaluating.delete(r);
       }
     }
-    const a = Number(r.rawValue);
-    return !isNaN(a) && r.rawValue.trim() !== "" ? a : r.rawValue.toUpperCase() === "TRUE" ? !0 : r.rawValue.toUpperCase() === "FALSE" ? !1 : r.rawValue;
+    const o = Number(s.rawValue);
+    return !isNaN(o) && s.rawValue.trim() !== "" ? o : s.rawValue.toUpperCase() === "TRUE" ? !0 : s.rawValue.toUpperCase() === "FALSE" ? !1 : s.rawValue;
   }
   _resolveRange(e) {
-    const [t, s] = e.split(":"), r = S(t), a = S(s), o = Math.min(r.row, a.row), n = Math.max(r.row, a.row), l = Math.min(r.col, a.col), c = Math.max(r.col, a.col), h = [];
-    for (let d = o; d <= n; d++)
+    const [t, r] = e.split(":"), s = R(t.replace(/\$/g, "")), o = R(r.replace(/\$/g, "")), n = Math.min(s.row, o.row), a = Math.max(s.row, o.row), l = Math.min(s.col, o.col), c = Math.max(s.col, o.col), h = a - n + 1, u = c - l + 1, p = [];
+    for (let f = n; f <= a; f++)
       for (let g = l; g <= c; g++) {
-        const m = y(d, g);
-        this._trackDep(m);
-        const p = this.data.get(m);
-        if (p)
-          if (p.rawValue.startsWith("=")) {
-            const C = this._trackingCellKey;
-            this._trackingCellKey = null, this.evaluating.add(m);
-            try {
-              h.push(this.parseExpression(p.rawValue.substring(1)));
-            } catch {
-              h.push(0);
-            } finally {
-              this._trackingCellKey = C, this.evaluating.delete(m);
+        const _ = b(f, g);
+        this._trackDep(_);
+        const d = this._data.get(_);
+        if (d)
+          if (d.rawValue.startsWith("="))
+            if (this._evaluating.has(_))
+              p.push("#CIRC!");
+            else {
+              this._evaluating.add(_);
+              try {
+                p.push(this.parseExpression(d.rawValue.substring(1)));
+              } catch ($) {
+                const B = $ instanceof Error ? $.message : "";
+                p.push(B.startsWith("#") ? B : "#ERROR!");
+              } finally {
+                this._evaluating.delete(_);
+              }
             }
-          } else {
-            const C = Number(p.rawValue);
-            !isNaN(C) && p.rawValue.trim() !== "" ? h.push(C) : p.rawValue.toUpperCase() === "TRUE" ? h.push(!0) : p.rawValue.toUpperCase() === "FALSE" ? h.push(!1) : h.push(p.rawValue);
+          else {
+            const $ = Number(d.rawValue);
+            !isNaN($) && d.rawValue.trim() !== "" ? p.push($) : d.rawValue.toUpperCase() === "TRUE" ? p.push(!0) : d.rawValue.toUpperCase() === "FALSE" ? p.push(!1) : p.push(d.rawValue);
           }
+        else
+          p.push(void 0);
       }
-    return h;
+    return new x(p, h, u);
   }
   _createContext() {
     return {
       getCellValue: (e) => {
         if (e.includes(":") && !/[A-Z]/i.test(e.charAt(0))) {
-          const t = this.data.get(e);
+          const t = this._data.get(e);
           if (!t) return 0;
-          const s = Number(t.rawValue);
-          return !isNaN(s) && t.rawValue.trim() !== "" ? s : t.rawValue;
+          const r = Number(t.rawValue);
+          return !isNaN(r) && t.rawValue.trim() !== "" ? r : t.rawValue;
         }
         return this._resolveRef(e);
       },
       getRangeValues: (e, t) => {
-        const s = S(e), r = S(t), a = Math.min(s.row, r.row), o = Math.max(s.row, r.row), n = Math.min(s.col, r.col), l = Math.max(s.col, r.col), c = [];
-        for (let h = a; h <= o; h++)
-          for (let d = n; d <= l; d++) {
-            const g = y(h, d), m = this.data.get(g);
-            if (m) {
-              const p = Number(m.rawValue);
-              c.push(!isNaN(p) && m.rawValue.trim() !== "" ? p : m.rawValue);
+        const r = R(e), s = R(t), o = Math.min(r.row, s.row), n = Math.max(r.row, s.row), a = Math.min(r.col, s.col), l = Math.max(r.col, s.col), c = [];
+        for (let h = o; h <= n; h++)
+          for (let u = a; u <= l; u++) {
+            const p = b(h, u), f = this._data.get(p);
+            if (f) {
+              const g = Number(f.rawValue);
+              c.push(!isNaN(g) && f.rawValue.trim() !== "" ? g : f.rawValue);
             }
           }
         return c;
@@ -511,31 +632,226 @@ class F {
   }
   // ─── Built-in Functions ─────────────────────────────
   registerBuiltins() {
-    this.registerFunction("SUM", (e, ...t) => t.reduce((s, r) => s + (Number(r) || 0), 0)), this.registerFunction("AVERAGE", (e, ...t) => {
-      const s = t.filter((a) => typeof a == "number" || !isNaN(Number(a)));
-      return s.length === 0 ? 0 : s.reduce((a, o) => a + Number(o), 0) / s.length;
+    this.registerFunction("SUM", (e, ...t) => t.reduce((r, s) => r + (Number(s) || 0), 0)), this.registerFunction("AVERAGE", (e, ...t) => {
+      const r = t.filter((o) => typeof o == "number" || !isNaN(Number(o)));
+      return r.length === 0 ? 0 : r.reduce((o, n) => o + Number(n), 0) / r.length;
     }), this.registerFunction("MIN", (e, ...t) => {
-      const s = t.map(Number).filter((r) => !isNaN(r));
-      return s.length ? Math.min(...s) : 0;
+      const r = t.map(Number).filter((s) => !isNaN(s));
+      return r.length ? Math.min(...r) : 0;
     }), this.registerFunction("MAX", (e, ...t) => {
-      const s = t.map(Number).filter((r) => !isNaN(r));
-      return s.length ? Math.max(...s) : 0;
-    }), this.registerFunction("COUNT", (e, ...t) => t.filter((s) => typeof s == "number" || !isNaN(Number(s)) && String(s).trim() !== "").length), this.registerFunction("COUNTA", (e, ...t) => t.filter((s) => s !== "" && s !== null && s !== void 0).length), this.registerFunction("IF", (e, t, s, r) => t ? s : r), this.registerFunction("CONCAT", (e, ...t) => t.map(String).join("")), this.registerFunction("ABS", (e, t) => Math.abs(Number(t))), this.registerFunction("ROUND", (e, t, s) => {
-      const r = Number(s) || 0, a = Math.pow(10, r);
-      return Math.round(Number(t) * a) / a;
-    }), this.registerFunction("UPPER", (e, t) => String(t).toUpperCase()), this.registerFunction("LOWER", (e, t) => String(t).toLowerCase()), this.registerFunction("LEN", (e, t) => String(t).length), this.registerFunction("TRIM", (e, t) => String(t).trim());
+      const r = t.map(Number).filter((s) => !isNaN(s));
+      return r.length ? Math.max(...r) : 0;
+    }), this.registerFunction("COUNT", (e, ...t) => t.filter((r) => typeof r == "number" || !isNaN(Number(r)) && String(r).trim() !== "").length), this.registerFunction("COUNTA", (e, ...t) => t.filter((r) => r !== "" && r !== null && r !== void 0).length), this.registerFunction("IF", (e, t, r, s) => t ? r : s), this.registerFunction("CONCAT", (e, ...t) => t.map(String).join("")), this.registerFunction("ABS", (e, t) => Math.abs(Number(t))), this.registerFunction("ROUND", (e, t, r) => {
+      const s = Number(r) || 0, o = Math.pow(10, s);
+      return Math.round(Number(t) * o) / o;
+    }), this.registerFunction("UPPER", (e, t) => String(t).toUpperCase()), this.registerFunction("LOWER", (e, t) => String(t).toLowerCase()), this.registerFunction("LEN", (e, t) => String(t).length), this.registerFunction("TRIM", (e, t) => String(t).trim()), this.registerFunction("IFERROR", (e, t, r) => {
+      const s = String(t);
+      return s === "#ERROR!" || s === "#REF!" || s === "#DIV/0!" || s === "#NAME?" || s === "#CIRC!" || s === "#VALUE!" ? r : t;
+    }), this.registerFunction("AND", (e, ...t) => {
+      for (const r of t)
+        if (r instanceof x) {
+          for (const s of r.values)
+            if (s !== void 0 && !s) return !1;
+        } else if (!r) return !1;
+      return !0;
+    }), this.registerFunction("OR", (e, ...t) => {
+      for (const r of t)
+        if (r instanceof x) {
+          for (const s of r.values)
+            if (s !== void 0 && s) return !0;
+        } else if (r) return !0;
+      return !1;
+    }), this.registerFunction("NOT", (e, t) => !t), this.registerFunction("SUMIF", (e, t, r, s) => {
+      const o = String(r), n = t instanceof x ? t.values : Array.isArray(t) ? t : [t], a = s instanceof x ? s.values : Array.isArray(s) ? s : void 0;
+      let l = 0;
+      for (let c = 0; c < n.length; c++) {
+        const h = n[c];
+        h !== void 0 && V(h, o) && (a ? l += Number(a[c]) || 0 : l += Number(h) || 0);
+      }
+      return l;
+    }), this.registerFunction("COUNTIF", (e, t, r) => {
+      const s = String(r), o = t instanceof x ? t.values : Array.isArray(t) ? t : [t];
+      let n = 0;
+      for (const a of o)
+        a !== void 0 && V(a, s) && n++;
+      return n;
+    }), this.registerFunction("AVERAGEIF", (e, t, r, s) => {
+      const o = String(r), n = t instanceof x ? t.values : Array.isArray(t) ? t : [t], a = s instanceof x ? s.values : Array.isArray(s) ? s : void 0;
+      let l = 0, c = 0;
+      for (let h = 0; h < n.length; h++) {
+        const u = n[h];
+        if (u !== void 0 && V(u, o)) {
+          const p = Number(a ? a[h] : u);
+          isNaN(p) || (l += p, c++);
+        }
+      }
+      if (c === 0) throw new Error("#DIV/0!");
+      return l / c;
+    }), this.registerFunction("VLOOKUP", (e, t, r, s, o) => {
+      if (!(r instanceof x))
+        throw new Error("#VALUE!");
+      const n = Number(s);
+      if (n < 1 || n > r.cols)
+        throw new Error("#REF!");
+      const a = o === !1 || o === 0, l = r.getCol(0);
+      for (let c = 0; c < l.length; c++)
+        if (a) {
+          const h = Number(t), u = Number(l[c]);
+          if (!isNaN(h) && !isNaN(u) && String(t).trim() !== "" && String(l[c]).trim() !== "" ? h === u : String(l[c]).toLowerCase() === String(t).toLowerCase())
+            return r.get(c, n - 1);
+        } else if (Number(l[c]) > Number(t)) {
+          if (c === 0) throw new Error("#N/A");
+          return r.get(c - 1, n - 1);
+        }
+      if (!a && l.length > 0)
+        return r.get(l.length - 1, n - 1);
+      throw new Error("#N/A");
+    }), this.registerFunction("HLOOKUP", (e, t, r, s, o) => {
+      if (!(r instanceof x))
+        throw new Error("#VALUE!");
+      const n = Number(s);
+      if (n < 1 || n > r.rows)
+        throw new Error("#REF!");
+      const a = o === !1 || o === 0, l = r.getRow(0);
+      for (let c = 0; c < l.length; c++)
+        if (a) {
+          const h = Number(t), u = Number(l[c]);
+          if (!isNaN(h) && !isNaN(u) && String(t).trim() !== "" && String(l[c]).trim() !== "" ? h === u : String(l[c]).toLowerCase() === String(t).toLowerCase())
+            return r.get(n - 1, c);
+        } else if (Number(l[c]) > Number(t)) {
+          if (c === 0) throw new Error("#N/A");
+          return r.get(n - 1, c - 1);
+        }
+      if (!a && l.length > 0)
+        return r.get(n - 1, l.length - 1);
+      throw new Error("#N/A");
+    }), this.registerFunction("INDEX", (e, t, r, s) => {
+      if (t instanceof x) {
+        const o = Number(r) - 1, n = s !== void 0 ? Number(s) - 1 : 0;
+        if (o < 0 || o >= t.rows || n < 0 || n >= t.cols)
+          throw new Error("#REF!");
+        const a = t.get(o, n);
+        return a !== void 0 ? a : 0;
+      }
+      throw new Error("#VALUE!");
+    }), this.registerFunction("MATCH", (e, t, r, s) => {
+      let o;
+      if (r instanceof x)
+        o = r.values;
+      else if (Array.isArray(r))
+        o = r;
+      else
+        throw new Error("#VALUE!");
+      const n = s !== void 0 ? Number(s) : 0;
+      if (n === 0) {
+        for (let a = 0; a < o.length; a++) {
+          const l = Number(t), c = Number(o[a]);
+          if (!isNaN(l) && !isNaN(c) && String(t).trim() !== "" && String(o[a]).trim() !== "" ? l === c : String(o[a]).toLowerCase() === String(t).toLowerCase())
+            return a + 1;
+        }
+        throw new Error("#N/A");
+      } else if (n === 1) {
+        let a = -1;
+        for (let l = 0; l < o.length; l++)
+          Number(o[l]) <= Number(t) && (a = l);
+        if (a === -1) throw new Error("#N/A");
+        return a + 1;
+      } else {
+        let a = -1;
+        for (let l = 0; l < o.length; l++)
+          Number(o[l]) >= Number(t) && (a = l);
+        if (a === -1) throw new Error("#N/A");
+        return a + 1;
+      }
+    }), this.registerFunction("MOD", (e, t, r) => {
+      const s = Number(r);
+      if (s === 0) throw new Error("#DIV/0!");
+      return Number(t) % s;
+    }), this.registerFunction("POWER", (e, t, r) => Math.pow(Number(t), Number(r))), this.registerFunction("CEILING", (e, t, r) => {
+      const s = Number(t), o = r !== void 0 ? Number(r) : 1;
+      return o === 0 ? 0 : Math.ceil(s / o) * o;
+    }), this.registerFunction("FLOOR", (e, t, r) => {
+      const s = Number(t), o = r !== void 0 ? Number(r) : 1;
+      return o === 0 ? 0 : Math.floor(s / o) * o;
+    }), this.registerFunction("LEFT", (e, t, r) => {
+      const s = r !== void 0 ? Number(r) : 1;
+      return String(t).substring(0, s);
+    }), this.registerFunction("RIGHT", (e, t, r) => {
+      const s = String(t), o = r !== void 0 ? Number(r) : 1;
+      return s.substring(s.length - o);
+    }), this.registerFunction("MID", (e, t, r, s) => {
+      const o = String(t), n = Number(r) - 1, a = Number(s);
+      return o.substring(n, n + a);
+    }), this.registerFunction("SUBSTITUTE", (e, t, r, s, o) => {
+      const n = String(t), a = String(r), l = String(s);
+      if (o !== void 0) {
+        const c = Number(o);
+        let h = 0, u = -1, p = 0;
+        for (; p < n.length && (u = n.indexOf(a, p), u !== -1); ) {
+          if (h++, h === c)
+            return n.substring(0, u) + l + n.substring(u + a.length);
+          p = u + 1;
+        }
+        return n;
+      }
+      return n.split(a).join(l);
+    }), this.registerFunction("FIND", (e, t, r, s) => {
+      const o = String(r), n = String(t), a = s !== void 0 ? Number(s) - 1 : 0, l = o.indexOf(n, a);
+      if (l === -1) throw new Error("#VALUE!");
+      return l + 1;
+    }), this.registerFunction("TEXT", (e, t, r) => {
+      const s = Number(t), o = String(r);
+      if (isNaN(s)) return String(t);
+      if (o === "0")
+        return Math.round(s).toString();
+      if (o === "0.00" || o === "0.0") {
+        const n = (o.split(".")[1] || "").length;
+        return s.toFixed(n);
+      }
+      if (o === "#,##0" || o === "#,##0.00") {
+        const n = o.includes(".") ? (o.split(".")[1] || "").length : 0;
+        return s.toLocaleString("en-US", {
+          minimumFractionDigits: n,
+          maximumFractionDigits: n
+        });
+      }
+      return s.toString();
+    }), this.registerFunction("VALUE", (e, t) => {
+      const r = Number(String(t));
+      if (isNaN(r)) throw new Error("#VALUE!");
+      return r;
+    }), this.registerFunction("DATE", (e, t, r, s) => {
+      const o = Number(t), n = Number(r), a = Number(s), l = new Date(o, n - 1, a), c = new Date(1899, 11, 30), h = l.getTime() - c.getTime();
+      return Math.round(h / (1e3 * 60 * 60 * 24));
+    }), this.registerFunction("NOW", () => {
+      const e = /* @__PURE__ */ new Date(), t = new Date(1899, 11, 30);
+      return (e.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24);
+    });
   }
 }
-class P {
+class G {
+  constructor() {
+    this._copySourceRange = null, this._copySourceData = null;
+  }
   /**
-   * Copy the selected range to the clipboard as TSV.
+   * Copy the selected range to the clipboard as both HTML table and TSV.
+   * Falls back to text-only if ClipboardItem API is unavailable.
    */
   async copy(e, t) {
-    const s = this.serializeRange(e, t);
+    this._copySourceRange = t, this._copySourceData = e;
+    const r = this.serializeRange(e, t), s = this._serializeRangeAsHTML(e, t);
     try {
-      await navigator.clipboard.writeText(s);
+      const o = new Blob([s], { type: "text/html" }), n = new Blob([r], { type: "text/plain" }), a = new ClipboardItem({
+        "text/html": o,
+        "text/plain": n
+      });
+      await navigator.clipboard.write([a]);
     } catch {
-      this.fallbackCopy(s);
+      try {
+        await navigator.clipboard.writeText(r);
+      } catch {
+        this.fallbackCopy(r);
+      }
     }
   }
   /**
@@ -543,56 +859,234 @@ class P {
    */
   async cut(e, t) {
     await this.copy(e, t);
-    const s = [];
-    for (let r = t.start.row; r <= t.end.row; r++)
-      for (let a = t.start.col; a <= t.end.col; a++)
-        s.push(y(r, a));
-    return s;
+    const r = [];
+    for (let s = t.start.row; s <= t.end.row; s++)
+      for (let o = t.start.col; o <= t.end.col; o++)
+        r.push(b(s, o));
+    return r;
   }
   /**
    * Parse clipboard content and return the updates to apply.
+   * If data was copied internally, uses raw values with reference adjustment.
+   * Otherwise tries HTML table format first, then falls back to TSV text.
    * The target is the top-left cell where paste begins.
    */
-  async paste(e, t, s, r) {
-    let a;
+  async paste(e, t, r, s) {
+    if (this._copySourceRange && this._copySourceData) {
+      const n = this._pasteInternal(e, t, r, s);
+      if (n) return n;
+    }
+    try {
+      const n = await navigator.clipboard.read();
+      for (const a of n)
+        if (a.types.includes("text/html")) {
+          const c = await (await a.getType("text/html")).text(), h = this.parseHTMLTableWithFormat(c);
+          if (h)
+            return this._applyParsedRowsWithFormat(h, e, t, r, s);
+        }
+    } catch {
+    }
+    let o;
     try {
-      a = await navigator.clipboard.readText();
+      o = await navigator.clipboard.readText();
     } catch {
       return null;
     }
-    return this.parseTSV(a, e, t, s, r);
+    return this.parseTSV(o, e, t, r, s);
+  }
+  /**
+   * Paste using internally stored copy data with formula reference adjustment.
+   * Returns null if no internal data is available.
+   */
+  _pasteInternal(e, t, r, s) {
+    const o = this._copySourceRange, n = this._copySourceData;
+    if (!o || !n) return null;
+    const a = e - o.start.row, l = t - o.start.col, c = [];
+    for (let h = o.start.row; h <= o.end.row; h++)
+      for (let u = o.start.col; u <= o.end.col; u++) {
+        const p = h + a, f = u + l;
+        if (p >= r || f >= s) continue;
+        const g = n.get(b(h, u));
+        let _ = (g == null ? void 0 : g.rawValue) ?? "";
+        _.startsWith("=") && (_ = this.adjustFormulaReferences(_, a, l));
+        const d = { id: b(p, f), value: _ };
+        g != null && g.format && (d.format = { ...g.format }), c.push(d);
+      }
+    return c;
+  }
+  /**
+   * Parse an HTML string and extract table data with format information.
+   * Prefers data-format (lossless) over inline styles (best-effort).
+   */
+  parseHTMLTableWithFormat(e) {
+    const s = new DOMParser().parseFromString(e, "text/html").querySelector("table");
+    if (!s) return null;
+    const o = [], n = s.querySelectorAll("tr");
+    for (const a of n) {
+      const l = [], c = a.querySelectorAll("td, th");
+      for (const h of c) {
+        const u = h, f = u.getAttribute("data-raw") ?? (h.textContent ?? "").trim();
+        let g;
+        const _ = u.getAttribute("data-format");
+        if (_)
+          try {
+            g = this._sanitizeFormat(JSON.parse(_));
+          } catch {
+          }
+        if (!g) {
+          const d = u.getAttribute("style");
+          d && (g = this._parseStyleToFormat(d));
+        }
+        l.push({ value: f, format: g });
+      }
+      l.length > 0 && o.push(l);
+    }
+    return o.length > 0 ? o : null;
+  }
+  /**
+   * Convert format-aware parsed rows into PasteUpdate array.
+   */
+  _applyParsedRowsWithFormat(e, t, r, s, o) {
+    const n = [];
+    for (let a = 0; a < e.length; a++)
+      for (let l = 0; l < e[a].length; l++) {
+        const c = t + a, h = r + l;
+        if (c < s && h < o) {
+          const { value: u, format: p } = e[a][l], f = { id: b(c, h), value: u };
+          p && (f.format = p), n.push(f);
+        }
+      }
+    return n;
   }
   /**
    * Parse a TSV string and generate cell updates.
+   * Handles RFC 4180-style quoting: fields containing tabs, newlines, or
+   * double-quotes are wrapped in double-quotes, with internal quotes escaped
+   * as "". This is the format Excel and Google Sheets use on the clipboard.
+   *
    * Exported for testability with paste events where text is already available.
    */
-  parseTSV(e, t, s, r, a) {
-    const o = e.split(/\r?\n/);
-    o.length > 0 && o[o.length - 1] === "" && o.pop();
-    const n = [];
-    for (let l = 0; l < o.length; l++) {
-      const c = o[l].split("	");
+  parseTSV(e, t, r, s, o) {
+    const n = this._parseTSVRows(e), a = [];
+    for (let l = 0; l < n.length; l++) {
+      const c = n[l];
       for (let h = 0; h < c.length; h++) {
-        const d = t + l, g = s + h;
-        d < r && g < a && n.push({ id: y(d, g), value: c[h] });
+        const u = t + l, p = r + h;
+        u < s && p < o && a.push({ id: b(u, p), value: c[h] });
       }
     }
-    return n;
+    return a;
+  }
+  /**
+   * Parse TSV text into a 2D array of strings, respecting quoted fields.
+   * Quoted fields may contain tabs, newlines, and escaped quotes ("").
+   */
+  _parseTSVRows(e) {
+    const t = [];
+    let r = [], s = "", o = !1, n = 0;
+    for (; n < e.length; ) {
+      const a = e[n];
+      o ? a === '"' ? n + 1 < e.length && e[n + 1] === '"' ? (s += '"', n += 2) : (o = !1, n++) : (s += a, n++) : a === '"' ? (o = !0, n++) : a === "	" ? (r.push(s), s = "", n++) : a === "\r" ? (r.push(s), s = "", n + 1 < e.length && e[n + 1] === `
+` ? n += 2 : n++, t.push(r), r = []) : a === `
+` ? (r.push(s), s = "", n++, t.push(r), r = []) : (s += a, n++);
+    }
+    return r.push(s), (r.length > 1 || r[0] !== "") && t.push(r), t;
+  }
+  // ─── Reference Adjustment ─────────────────────────
+  /**
+   * Adjust cell references in a formula by the given row/col offset.
+   * Absolute references ($A$1) are not adjusted.
+   * Mixed references ($A1, A$1) only adjust the non-absolute part.
+   */
+  adjustFormulaReferences(e, t, r) {
+    if (!e.startsWith("=")) return e;
+    const s = /(\$?)([A-Z]+)(\$?)(\d+)/gi;
+    return e.replace(s, (n, a, l, c, h) => {
+      const u = P(l.toUpperCase()), p = parseInt(h, 10) - 1, f = a === "$" ? u : u + r, g = c === "$" ? p : p + t;
+      return f < 0 || g < 0 ? "#REF!" : `${a}${F(f)}${c}${g + 1}`;
+    });
   }
   // ─── Serialization ──────────────────────────────────
   serializeRange(e, t) {
-    const s = [];
-    for (let r = t.start.row; r <= t.end.row; r++) {
-      const a = [];
-      for (let o = t.start.col; o <= t.end.col; o++) {
-        const n = e.get(y(r, o));
-        a.push((n == null ? void 0 : n.displayValue) ?? "");
+    const r = [];
+    for (let s = t.start.row; s <= t.end.row; s++) {
+      const o = [];
+      for (let n = t.start.col; n <= t.end.col; n++) {
+        const a = e.get(b(s, n)), l = (a == null ? void 0 : a.displayValue) ?? "";
+        o.push(this._quoteTSVField(l));
       }
-      s.push(a.join("	"));
+      r.push(o.join("	"));
     }
-    return s.join(`
+    return r.join(`
 `);
   }
+  /** Quote a TSV field if it contains tabs, newlines, or double-quotes */
+  _quoteTSVField(e) {
+    return e.includes("	") || e.includes(`
+`) || e.includes("\r") || e.includes('"') ? `"${e.replace(/"/g, '""')}"` : e;
+  }
+  /**
+   * Convert a selection range to an HTML table string.
+   * Includes inline styles for visual formatting and data-format for lossless round-trip.
+   */
+  _serializeRangeAsHTML(e, t) {
+    const r = [];
+    for (let s = t.start.row; s <= t.end.row; s++) {
+      const o = [];
+      for (let n = t.start.col; n <= t.end.col; n++) {
+        const a = e.get(b(s, n)), l = (a == null ? void 0 : a.displayValue) ?? "", c = (a == null ? void 0 : a.rawValue) ?? "", h = [];
+        if (c && c !== l && h.push(`data-raw="${this._escapeHTML(c)}"`), a != null && a.format) {
+          const p = this._formatToInlineStyle(a.format);
+          p && h.push(`style="${this._escapeHTML(p)}"`), h.push(`data-format="${this._escapeHTML(JSON.stringify(a.format))}"`);
+        }
+        const u = h.length > 0 ? " " + h.join(" ") : "";
+        o.push(`<td${u}>${this._escapeHTML(l)}</td>`);
+      }
+      r.push(`<tr>${o.join("")}</tr>`);
+    }
+    return `<table>${r.join("")}</table>`;
+  }
+  /** Convert CellFormat to a CSS inline style string */
+  _formatToInlineStyle(e) {
+    const t = [];
+    e.bold && t.push("font-weight: bold"), e.italic && t.push("font-style: italic");
+    const r = [];
+    return e.underline && r.push("underline"), e.strikethrough && r.push("line-through"), r.length > 0 && t.push(`text-decoration: ${r.join(" ")}`), e.textColor && t.push(`color: ${e.textColor}`), e.backgroundColor && t.push(`background-color: ${e.backgroundColor}`), e.textAlign && t.push(`text-align: ${e.textAlign}`), e.fontSize && t.push(`font-size: ${e.fontSize}px`), t.join("; ");
+  }
+  /** Parse a CSS inline style string into a CellFormat (best-effort for external sources) */
+  _parseStyleToFormat(e) {
+    if (!e) return;
+    const t = {}, r = this._extractStyleProp(e, "font-weight");
+    (r === "bold" || r && parseInt(r, 10) >= 600) && (t.bold = !0), this._extractStyleProp(e, "font-style") === "italic" && (t.italic = !0);
+    const o = this._extractStyleProp(e, "text-decoration");
+    o && (o.includes("underline") && (t.underline = !0), o.includes("line-through") && (t.strikethrough = !0));
+    const n = /^[a-zA-Z0-9#(),.\s%/-]+$/, a = this._extractStyleProp(e, "color");
+    a && a.length <= 100 && n.test(a) && (t.textColor = a);
+    const l = this._extractStyleProp(e, "background-color");
+    l && l.length <= 100 && n.test(l) && (t.backgroundColor = l);
+    const c = this._extractStyleProp(e, "text-align");
+    (c === "left" || c === "center" || c === "right") && (t.textAlign = c);
+    const h = this._extractStyleProp(e, "font-size");
+    if (h) {
+      const u = parseInt(h, 10);
+      !isNaN(u) && u > 0 && u <= 200 && (t.fontSize = u);
+    }
+    return Object.keys(t).length > 0 ? t : void 0;
+  }
+  /** Validate and sanitize a parsed CellFormat from an external source */
+  _sanitizeFormat(e) {
+    if (!e || typeof e != "object" || Array.isArray(e)) return;
+    const t = e, r = {}, s = /^[a-zA-Z0-9#(),.\s%/-]+$/, o = /* @__PURE__ */ new Set(["left", "center", "right"]);
+    return typeof t.bold == "boolean" && (r.bold = t.bold), typeof t.italic == "boolean" && (r.italic = t.italic), typeof t.underline == "boolean" && (r.underline = t.underline), typeof t.strikethrough == "boolean" && (r.strikethrough = t.strikethrough), typeof t.textColor == "string" && t.textColor.length <= 100 && s.test(t.textColor) && (r.textColor = t.textColor), typeof t.backgroundColor == "string" && t.backgroundColor.length <= 100 && s.test(t.backgroundColor) && (r.backgroundColor = t.backgroundColor), typeof t.textAlign == "string" && o.has(t.textAlign) && (r.textAlign = t.textAlign), typeof t.fontSize == "number" && t.fontSize > 0 && t.fontSize <= 200 && (r.fontSize = t.fontSize), Object.keys(r).length > 0 ? r : void 0;
+  }
+  _extractStyleProp(e, t) {
+    const r = new RegExp(`(?<![\\w-])${t}\\s*:\\s*([^;]+)`, "i"), s = e.match(r);
+    return s ? s[1].trim() : void 0;
+  }
+  /** Escape special HTML characters */
+  _escapeHTML(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
   // ─── Fallback ───────────────────────────────────────
   /** @deprecated Uses document.execCommand('copy') which is deprecated. Only used as a fallback when the Clipboard API is unavailable. */
   fallbackCopy(e) {
@@ -606,12 +1100,12 @@ class P {
     document.body.removeChild(t);
   }
 }
-var T = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (i, e, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? z(e, t) : e, a = i.length - 1, o; a >= 0; a--)
-    (o = i[a]) && (r = (s ? o(e, t, r) : o(r)) || r);
-  return s && r && T(e, t, r), r;
+var Z = Object.defineProperty, X = Object.getOwnPropertyDescriptor, N = (i, e, t, r) => {
+  for (var s = r > 1 ? void 0 : r ? X(e, t) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = (r ? n(e, t, s) : n(s)) || s);
+  return r && s && Z(e, t, s), s;
 };
-let v = class extends V {
+let A = class extends O {
   constructor() {
     super(...arguments), this.cellRef = "A1", this.rawValue = "", this.displayValue = "", this.mode = "raw", this.readOnly = !1, this._draft = "", this._suppressNextBlur = !1;
   }
@@ -653,7 +1147,7 @@ let v = class extends V {
     this._commit();
   }
   render() {
-    return _`
+    return y`
       <output class="cell-ref" aria-live="polite" aria-atomic="true">${this.cellRef}</output>
       <div class="mode-toggle" role="group" aria-label="Formula bar mode">
         <button
@@ -683,7 +1177,7 @@ let v = class extends V {
     `;
   }
 };
-v.styles = k`
+A.styles = M`
     :host {
       display: grid;
       grid-template-columns: minmax(48px, auto) auto minmax(0, 1fr);
@@ -755,44 +1249,46 @@ v.styles = k`
       cursor: not-allowed;
     }
   `;
-b([
-  w({ type: String, attribute: "cell-ref" })
-], v.prototype, "cellRef", 2);
-b([
-  w({ type: String, attribute: "raw-value" })
-], v.prototype, "rawValue", 2);
-b([
-  w({ type: String, attribute: "display-value" })
-], v.prototype, "displayValue", 2);
-b([
-  w({ type: String })
-], v.prototype, "mode", 2);
-b([
-  w({ type: Boolean, attribute: "read-only", reflect: !0 })
-], v.prototype, "readOnly", 2);
-b([
+N([
+  m({ type: String, attribute: "cell-ref" })
+], A.prototype, "cellRef", 2);
+N([
+  m({ type: String, attribute: "raw-value" })
+], A.prototype, "rawValue", 2);
+N([
+  m({ type: String, attribute: "display-value" })
+], A.prototype, "displayValue", 2);
+N([
+  m({ type: String })
+], A.prototype, "mode", 2);
+N([
+  m({ type: Boolean, attribute: "read-only", reflect: !0 })
+], A.prototype, "readOnly", 2);
+N([
   E()
-], v.prototype, "_draft", 2);
-v = b([
-  D("y11n-formula-bar")
-], v);
-var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, f = (i, e, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? L(e, t) : e, a = i.length - 1, o; a >= 0; a--)
-    (o = i[a]) && (r = (s ? o(e, t, r) : o(r)) || r);
-  return s && r && I(e, t, r), r;
+], A.prototype, "_draft", 2);
+A = N([
+  T("y11n-formula-bar")
+], A);
+var Y = Object.defineProperty, J = Object.getOwnPropertyDescriptor, v = (i, e, t, r) => {
+  for (var s = r > 1 ? void 0 : r ? J(e, t) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = (r ? n(e, t, s) : n(s)) || s);
+  return r && s && Y(e, t, s), s;
 };
-let u = class extends V {
+let w = class extends O {
   constructor() {
-    super(...arguments), this.rows = 100, this.cols = 26, this.data = /* @__PURE__ */ new Map(), this.readOnly = !1, this.functions = {}, this._isEditing = !1, this._editValue = "", this._formulaBarMode = "raw", this._scrollTop = 0, this._scrollLeft = 0, this._selection = new B(this, this.rows, this.cols), this._formulaEngine = new F(), this._clipboardManager = new P(), this._internalData = /* @__PURE__ */ new Map(), this._editingCellKey = null, this._undoStack = [], this._redoStack = [], this._maxHistory = 100;
+    super(...arguments), this.rows = 100, this.cols = 26, this.data = /* @__PURE__ */ new Map(), this.readOnly = !1, this.functions = {}, this._isEditing = !1, this._editValue = "", this._formulaBarMode = "raw", this._refMode = !1, this._modeAnnouncement = "", this._scrollTop = 0, this._scrollLeft = 0, this._selection = new j(this, this.rows, this.cols), this._formulaEngine = new K(), this._clipboardManager = new G(), this._internalData = /* @__PURE__ */ new Map(), this._editingCellKey = null, this._undoStack = [], this._redoStack = [], this._maxHistory = 100, this._refCursorRow = 0, this._refCursorCol = 0, this._refInsertStart = 0, this._refInsertEnd = 0;
   }
   // ─── Lifecycle ──────────────────────────────────────
   connectedCallback() {
     super.connectedCallback(), this._syncData();
   }
   willUpdate(i) {
-    if (i.has("data") && this._syncData(), (i.has("rows") || i.has("cols")) && (this.rows = Math.max(1, Math.round(this.rows)), this.cols = Math.max(1, Math.round(this.cols)), this._selection.setBounds(this.rows, this.cols)), i.has("functions"))
+    if (i.has("data") && this._syncData(), (i.has("rows") || i.has("cols")) && (this.rows = Math.max(1, Math.round(this.rows)), this.cols = Math.max(1, Math.round(this.cols)), this._selection.setBounds(this.rows, this.cols)), i.has("functions")) {
       for (const [e, t] of Object.entries(this.functions))
         this._formulaEngine.registerFunction(e, t);
+      this._recalcAll();
+    }
   }
   // ─── Public API Methods ─────────────────────────────
   /** Returns the current state of the grid data */
@@ -807,9 +1303,123 @@ let u = class extends V {
   registerFunction(i, e) {
     this._formulaEngine.registerFunction(i, e), this._recalcAll();
   }
+  // ─── Format API ──────────────────────────────────────
+  /** Returns the format for a cell, or undefined if unformatted */
+  getCellFormat(i) {
+    var e;
+    return (e = this._internalData.get(i)) == null ? void 0 : e.format;
+  }
+  /** Merges format into a cell (creates cell if needed). Pass undefined to unset a property. */
+  setCellFormat(i, e) {
+    this._applyFormat([i], e, "programmatic");
+  }
+  /** Applies format to all cells in a range (creates empty cells if needed) */
+  setRangeFormat(i, e) {
+    const t = [];
+    for (let r = i.start.row; r <= i.end.row; r++)
+      for (let s = i.start.col; s <= i.end.col; s++)
+        t.push(b(r, s));
+    this._applyFormat(t, e, "programmatic");
+  }
+  /** Removes all formatting from a cell */
+  clearCellFormat(i) {
+    this._clearFormat([i], "programmatic");
+  }
+  /** Removes all formatting from a range */
+  clearRangeFormat(i) {
+    const e = [];
+    for (let t = i.start.row; t <= i.end.row; t++)
+      for (let r = i.start.col; r <= i.end.col; r++)
+        e.push(b(t, r));
+    this._clearFormat(e, "programmatic");
+  }
+  /** Toggles a boolean format property on the current selection */
+  toggleFormat(i) {
+    var o;
+    if (this.readOnly) return;
+    const e = this._selection.range, t = [];
+    let r = !0;
+    for (let n = e.start.row; n <= e.end.row; n++)
+      for (let a = e.start.col; a <= e.end.col; a++) {
+        const l = b(n, a);
+        t.push(l);
+        const c = this._internalData.get(l);
+        (o = c == null ? void 0 : c.format) != null && o[i] || (r = !1);
+      }
+    const s = { [i]: !r };
+    this._applyFormat(t, s, "user");
+  }
+  // ─── Format Internals ────────────────────────────────
+  _applyFormat(i, e, t) {
+    const r = this._snapshotSelection(), s = this._buildFormatBatch(i, e, r);
+    s && (t === "user" ? this._executeUserBatch(s) : (this._applyBatch(s, t), this._pushHistory(s)), this._dispatchFormatChange({ cellIds: i, format: e, source: t }));
+  }
+  _clearFormat(i, e) {
+    const t = this._snapshotSelection(), r = [];
+    for (const o of i) {
+      const n = this._internalData.get(o);
+      n != null && n.format && r.push({
+        id: o,
+        before: n.rawValue,
+        after: n.rawValue,
+        formatBefore: { ...n.format },
+        formatAfter: void 0
+      });
+    }
+    if (r.length === 0) return;
+    const s = {
+      deltas: r,
+      selectionBefore: t,
+      selectionAfter: t,
+      operation: "format"
+    };
+    e === "user" ? this._executeUserBatch(s) : (this._applyBatch(s, e), this._pushHistory(s)), this._dispatchFormatChange({ cellIds: i, format: {}, source: e });
+  }
+  _buildFormatBatch(i, e, t) {
+    const r = [];
+    for (const s of i) {
+      const o = this._internalData.get(s), n = o == null ? void 0 : o.format, a = { ...n, ...e };
+      for (const c of Object.keys(a))
+        a[c] === void 0 && delete a[c];
+      !z(n, a) && r.push({
+        id: s,
+        before: (o == null ? void 0 : o.rawValue) ?? "",
+        after: (o == null ? void 0 : o.rawValue) ?? "",
+        formatBefore: n ? { ...n } : void 0,
+        formatAfter: Object.keys(a).length > 0 ? a : void 0
+      });
+    }
+    return r.length === 0 ? null : {
+      deltas: r,
+      selectionBefore: t,
+      selectionAfter: t,
+      operation: "format"
+    };
+  }
+  /** Convert CellFormat to inline styles for styleMap */
+  _getCellStyles(i, e) {
+    const t = this._getCell(i, e);
+    if (!(t != null && t.format)) return {};
+    const r = {}, s = t.format;
+    s.bold && (r["font-weight"] = "bold"), s.italic && (r["font-style"] = "italic");
+    const o = [];
+    if (s.underline && o.push("underline"), s.strikethrough && o.push("line-through"), o.length > 0 && (r["text-decoration"] = o.join(" ")), s.textColor && (r.color = s.textColor), s.backgroundColor && (r["background-color"] = s.backgroundColor), s.fontSize && (r["font-size"] = `${s.fontSize}px`), s.textAlign) {
+      r["text-align"] = s.textAlign;
+      const n = { left: "flex-start", center: "center", right: "flex-end" };
+      r["justify-content"] = n[s.textAlign];
+    }
+    return r;
+  }
   // ─── Data Sync ──────────────────────────────────────
   _syncData() {
-    this._internalData = new Map(this.data), this._undoStack = [], this._redoStack = [], this._formulaEngine.setData(this._internalData), this._recalcAll();
+    const i = this._internalData, e = new Map(this.data), t = [];
+    for (const [r, s] of e) {
+      const o = i.get(r);
+      (!o || o.rawValue !== s.rawValue) && t.push(r);
+    }
+    for (const r of i.keys())
+      e.has(r) || t.push(r);
+    this._internalData = e, this._undoStack = [], this._redoStack = [], t.length > 0 && i.size > 0 ? (this._formulaEngine.updateData(this._internalData, t), this._recalcAffected(t)) : (this._formulaEngine.setData(this._internalData), this._recalcAll());
   }
   _recalcAll() {
     this._formulaEngine.recalculate();
@@ -819,7 +1429,7 @@ let u = class extends V {
   }
   // ─── Cell Access ────────────────────────────────────
   _getCell(i, e) {
-    return this._internalData.get(y(i, e));
+    return this._internalData.get(b(i, e));
   }
   _getCellDisplay(i, e) {
     const t = this._getCell(i, e);
@@ -831,23 +1441,29 @@ let u = class extends V {
   }
   _getActiveCellKey() {
     const { row: i, col: e } = this._selection.activeCell;
-    return y(i, e);
+    return b(i, e);
   }
   _getActiveCellRef() {
-    return O(this._selection.activeCell);
+    return D(this._selection.activeCell);
   }
   _setCellRaw(i, e) {
-    const t = this._internalData.get(i), s = this._formulaEngine.evaluate(e, i);
+    const t = this._internalData.get(i), r = this._formulaEngine.evaluate(e, i);
     this._internalData.set(i, {
       rawValue: e,
-      displayValue: s.displayValue,
-      type: s.type,
-      style: t == null ? void 0 : t.style
+      displayValue: r.displayValue,
+      type: r.type,
+      format: t == null ? void 0 : t.format
     });
   }
   _applyRawValueByString(i, e) {
     if (e === "") {
-      this._internalData.delete(i);
+      const t = this._internalData.get(i);
+      t != null && t.format ? this._internalData.set(i, {
+        rawValue: "",
+        displayValue: "",
+        type: "text",
+        format: t.format
+      }) : this._internalData.delete(i);
       return;
     }
     this._setCellRaw(i, e);
@@ -861,17 +1477,17 @@ let u = class extends V {
   _restoreSelection(i) {
     this._selection.moveTo(i.anchor.row, i.anchor.col), this._selection.moveTo(i.head.row, i.head.col, !0), this._dispatchSelectionChange(), this.updateComplete.then(() => this._focusActiveCell());
   }
-  _buildCommandBatch(i, e, t, s) {
-    var a;
-    const r = [];
-    for (const o of i) {
-      const n = ((a = this._internalData.get(o.id)) == null ? void 0 : a.rawValue) ?? "", l = o.value;
-      n !== l && r.push({ id: o.id, before: n, after: l });
+  _buildCommandBatch(i, e, t, r) {
+    var o;
+    const s = [];
+    for (const n of i) {
+      const a = ((o = this._internalData.get(n.id)) == null ? void 0 : o.rawValue) ?? "", l = n.value;
+      a !== l && s.push({ id: n.id, before: a, after: l });
     }
-    return r.length === 0 ? null : {
-      deltas: r,
+    return s.length === 0 ? null : {
+      deltas: s,
       selectionBefore: t,
-      selectionAfter: s,
+      selectionAfter: r,
       operation: e
     };
   }
@@ -879,53 +1495,71 @@ let u = class extends V {
     this._undoStack.push(i), this._redoStack = [], this._undoStack.length > this._maxHistory && this._undoStack.shift();
   }
   _finalizeBatch(i, e, t) {
-    this._recalcAffected(i.deltas.map((r) => r.id)), (e !== "user" || i.operation !== "edit") && this._dispatchDataChange({
-      updates: i.deltas.map((r) => ({ id: r.id, value: r[t] })),
+    this._recalcAffected(i.deltas.map((s) => s.id)), (e !== "user" || i.operation !== "edit") && this._dispatchDataChange({
+      updates: i.deltas.map((s) => ({ id: s.id, value: s[t] })),
       source: e,
       operation: i.operation
     }), this.requestUpdate();
   }
   _applyBatch(i, e) {
     for (const t of i.deltas)
-      this._applyRawValueByString(t.id, t.after);
+      this._applyRawValueByString(t.id, t.after), "formatAfter" in t && this._applyCellFormat(t.id, t.formatAfter);
     this._restoreSelection(i.selectionAfter), this._finalizeBatch(i, e, "after");
   }
   _revertBatch(i) {
     for (const e of i.deltas)
-      this._applyRawValueByString(e.id, e.before);
+      this._applyRawValueByString(e.id, e.before), "formatBefore" in e && this._applyCellFormat(e.id, e.formatBefore);
     this._restoreSelection(i.selectionBefore), this._finalizeBatch(i, "undo", "before");
   }
+  /** Low-level: set or remove format on a cell */
+  _applyCellFormat(i, e) {
+    let t = this._internalData.get(i);
+    t || (t = { rawValue: "", displayValue: "", type: "text" }, this._internalData.set(i, t)), e && Object.keys(e).length > 0 ? t.format = e : (delete t.format, t.rawValue === "" && this._internalData.delete(i));
+  }
   _executeUserBatch(i) {
     this._applyBatch(i, "user"), this._pushHistory(i);
   }
   _commitRawValue(i, e) {
-    const t = this._internalData.get(i), s = (t == null ? void 0 : t.rawValue) ?? "";
-    if (e === s) return !1;
-    const r = this._snapshotSelection(), a = this._buildCommandBatch(
+    const t = this._internalData.get(i), r = (t == null ? void 0 : t.rawValue) ?? "";
+    if (e === r) return !1;
+    const s = this._snapshotSelection(), o = this._buildCommandBatch(
       [{ id: i, value: e }],
       "edit",
-      r,
-      r
+      s,
+      s
     );
-    return a ? (this._executeUserBatch(a), this._dispatchCellChange({ cellId: i, value: e, oldValue: s }), !0) : !1;
+    return o ? (this._executeUserBatch(o), this._dispatchCellChange({ cellId: i, value: e, oldValue: r }), !0) : !1;
   }
   _undo() {
     if (this.readOnly) return;
     const i = this._undoStack.pop();
-    i && (this._revertBatch(i), this._redoStack.push(i));
+    i && (this._revertBatch(i), this._redoStack.push(i), this._dispatchFormatChangeForBatch(i, "undo"));
   }
   _redo() {
     if (this.readOnly) return;
     const i = this._redoStack.pop();
-    i && (this._applyBatch(i, "redo"), this._undoStack.push(i), this._undoStack.length > this._maxHistory && this._undoStack.shift());
+    i && (this._applyBatch(i, "redo"), this._undoStack.push(i), this._undoStack.length > this._maxHistory && this._undoStack.shift(), this._dispatchFormatChangeForBatch(i, "redo"));
+  }
+  /** Dispatch format-change for any batch that contains format deltas.
+   *  NOTE: The event carries the format from the first delta only. For heterogeneous
+   *  batches (e.g., paste with varied per-cell formatting), this is an approximation —
+   *  the cellIds are accurate but the format may not represent every cell. Consumers
+   *  that need per-cell accuracy should read cell data directly. */
+  _dispatchFormatChangeForBatch(i, e) {
+    const t = i.deltas.filter(
+      (o) => o.formatBefore !== void 0 || o.formatAfter !== void 0
+    );
+    if (t.length === 0) return;
+    const r = t.map((o) => o.id), s = e === "undo" ? t[0].formatBefore ?? {} : t[0].formatAfter ?? {};
+    this._dispatchFormatChange({ cellIds: r, format: s, source: e });
   }
   // ─── Editing ────────────────────────────────────────
   _startEditing(i) {
     if (this.readOnly || this._isEditing) return;
-    const { row: e, col: t } = this._selection.activeCell, s = y(e, t);
-    this._editingCellKey = s;
-    const r = this._internalData.get(s);
-    this._editValue = i ?? (r == null ? void 0 : r.rawValue) ?? "", this._isEditing = !0;
+    const { row: e, col: t } = this._selection.activeCell, r = b(e, t);
+    this._editingCellKey = r;
+    const s = this._internalData.get(r);
+    this._editValue = i ?? (s == null ? void 0 : s.rawValue) ?? "", this._isEditing = !0;
   }
   _commitEdit() {
     if (!this._isEditing || !this._editingCellKey) return;
@@ -935,10 +1569,67 @@ let u = class extends V {
   _cancelEdit() {
     this._isEditing = !1, this._editingCellKey = null, this.updateComplete.then(() => this._focusActiveCell());
   }
+  // ─── Reference Selection ────────────────────────────
+  /**
+   * Check if the cursor is at a position in the formula where a cell reference
+   * can be inserted (after =, +, -, *, /, &, (, ,, or comparison operators).
+   */
+  _isRefPositionInFormula() {
+    var r;
+    if (!this._editValue.startsWith("=")) return !1;
+    const i = ((r = this._editor) == null ? void 0 : r.selectionStart) ?? this._editValue.length, e = this._editValue.substring(0, i).trimEnd();
+    if (e === "=") return !0;
+    const t = e[e.length - 1];
+    return ["+", "-", "*", "/", "&", "(", ",", "<", ">", "="].includes(t);
+  }
+  /**
+   * Handle an arrow key press during formula editing to insert or move
+   * a cell reference.
+   */
+  _handleRefArrow(i) {
+    var r;
+    const e = i === "ArrowDown" ? 1 : i === "ArrowUp" ? -1 : 0, t = i === "ArrowRight" ? 1 : i === "ArrowLeft" ? -1 : 0;
+    if (this._refMode) {
+      this._refCursorRow = Math.max(0, Math.min(this._refCursorRow + e, this.rows - 1)), this._refCursorCol = Math.max(0, Math.min(this._refCursorCol + t, this.cols - 1));
+      const s = D({ row: this._refCursorRow, col: this._refCursorCol });
+      this._modeAnnouncement = `Selecting ${s}`, this._editValue = this._editValue.substring(0, this._refInsertStart) + s + this._editValue.substring(this._refInsertEnd), this._refInsertEnd = this._refInsertStart + s.length;
+    } else {
+      const { row: s, col: o } = this._selection.activeCell;
+      this._refCursorRow = Math.max(0, Math.min(s + e, this.rows - 1)), this._refCursorCol = Math.max(0, Math.min(o + t, this.cols - 1)), this._refMode = !0, this._modeAnnouncement = `Reference selection mode. Selecting ${D({ row: this._refCursorRow, col: this._refCursorCol })}`;
+      const n = ((r = this._editor) == null ? void 0 : r.selectionStart) ?? this._editValue.length;
+      this._refInsertStart = n;
+      const a = D({ row: this._refCursorRow, col: this._refCursorCol });
+      this._editValue = this._editValue.substring(0, n) + a + this._editValue.substring(n), this._refInsertEnd = n + a.length;
+    }
+  }
+  _exitRefMode() {
+    this._refMode && (this._modeAnnouncement = "Reference selection ended"), this._refMode = !1;
+  }
+  /**
+   * Cycle the cell reference at/before the cursor through reference modes:
+   * A1 → $A$1 → A$1 → $A1 → A1
+   */
+  _cycleReferenceMode() {
+    var _;
+    const i = ((_ = this._editor) == null ? void 0 : _.selectionStart) ?? this._editValue.length, e = this._editValue, t = /(\$?)([A-Z]+)(\$?)(\d+)/gi;
+    let r, s = null;
+    for (; (r = t.exec(e)) !== null; ) {
+      const d = r.index, $ = d + r[0].length;
+      d <= i && $ >= i - 1 && (s = r);
+    }
+    if (!s) return;
+    const [o, n, a, l, c] = s, h = s.index, u = n === "$", p = l === "$";
+    let f;
+    !u && !p ? f = `$${a}$${c}` : u && p ? f = `${a}$${c}` : !u && p ? f = `$${a}${c}` : f = `${a}${c}`, this._editValue = e.substring(0, h) + f + e.substring(h + o.length);
+    const g = h + f.length;
+    this.updateComplete.then(() => {
+      this._editor && this._editor.setSelectionRange(g, g);
+    });
+  }
   // ─── Focus Management ───────────────────────────────
   _focusActiveCell() {
-    var s;
-    const { row: i, col: e } = this._selection.activeCell, t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+    var r;
+    const { row: i, col: e } = this._selection.activeCell, t = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
       `[data-row="${i}"][data-col="${e}"]`
     );
     t && t.focus();
@@ -988,6 +1679,15 @@ let u = class extends V {
       case "v":
         t && (i.preventDefault(), this._handlePaste());
         break;
+      case "b":
+        t && (i.preventDefault(), this.toggleFormat("bold"));
+        break;
+      case "i":
+        t && (i.preventDefault(), this.toggleFormat("italic"));
+        break;
+      case "u":
+        t && (i.preventDefault(), this.toggleFormat("underline"));
+        break;
       case "z":
       case "Z":
         t && (i.preventDefault(), e ? this._redo() : this._undo());
@@ -1000,13 +1700,22 @@ let u = class extends V {
   _handleEditorKeydown(i) {
     switch (i.stopPropagation(), i.key) {
       case "Enter":
-        i.preventDefault(), this._commitEdit(), this._selection.move(1, 0), this._dispatchSelectionChange(), this.updateComplete.then(() => this._focusActiveCell());
+        i.preventDefault(), this._exitRefMode(), this._commitEdit(), this._selection.move(1, 0), this._dispatchSelectionChange(), this.updateComplete.then(() => this._focusActiveCell());
         break;
       case "Tab":
-        i.preventDefault(), this._commitEdit(), i.shiftKey ? this._selection.move(0, -1) : this._selection.move(0, 1), this._dispatchSelectionChange(), this.updateComplete.then(() => this._focusActiveCell());
+        i.preventDefault(), this._exitRefMode(), this._commitEdit(), i.shiftKey ? this._selection.move(0, -1) : this._selection.move(0, 1), this._dispatchSelectionChange(), this.updateComplete.then(() => this._focusActiveCell());
         break;
       case "Escape":
-        i.preventDefault(), this._cancelEdit();
+        i.preventDefault(), this._exitRefMode(), this._cancelEdit();
+        break;
+      case "ArrowUp":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowRight":
+        (this._refMode || this._isRefPositionInFormula()) && (i.preventDefault(), this._handleRefArrow(i.key));
+        break;
+      case "F4":
+        this._editValue.startsWith("=") && (i.preventDefault(), this._cycleReferenceMode());
         break;
     }
   }
@@ -1014,26 +1723,26 @@ let u = class extends V {
   _handleCellPointerDown(i) {
     const t = i.target.closest("[data-row]");
     if (!t) return;
-    const s = parseInt(t.dataset.row, 10), r = parseInt(t.dataset.col, 10);
-    this._isEditing && this._commitEdit(), this._selection.startSelection(s, r, i.shiftKey), this._dispatchSelectionChange(), t.focus();
-    const a = new AbortController(), { signal: o } = a, n = () => a.abort(), l = (h) => {
-      var m, p;
-      const d = (m = this.shadowRoot) == null ? void 0 : m.elementFromPoint(h.clientX, h.clientY), g = (p = d == null ? void 0 : d.closest) == null ? void 0 : p.call(d, "[data-row]");
-      if (g) {
-        const C = parseInt(g.dataset.row, 10), $ = parseInt(g.dataset.col, 10);
-        this._selection.extendSelection(C, $), this._dispatchSelectionChange();
+    const r = parseInt(t.dataset.row, 10), s = parseInt(t.dataset.col, 10);
+    this._isEditing && this._commitEdit(), this._selection.startSelection(r, s, i.shiftKey), this._dispatchSelectionChange(), t.focus();
+    const o = new AbortController(), { signal: n } = o, a = () => o.abort(), l = (h) => {
+      var f, g;
+      const u = (f = this.shadowRoot) == null ? void 0 : f.elementFromPoint(h.clientX, h.clientY), p = (g = u == null ? void 0 : u.closest) == null ? void 0 : g.call(u, "[data-row]");
+      if (p) {
+        const _ = parseInt(p.dataset.row, 10), d = parseInt(p.dataset.col, 10);
+        this._selection.extendSelection(_, d), this._dispatchSelectionChange();
       }
     }, c = () => {
-      this._selection.endSelection(), n();
+      this._selection.endSelection(), a();
     };
-    document.addEventListener("pointermove", l, { signal: o }), document.addEventListener("pointerup", c, { signal: o }), document.addEventListener("pointercancel", c, { signal: o }), window.addEventListener("blur", c, { signal: o });
+    document.addEventListener("pointermove", l, { signal: n }), document.addEventListener("pointerup", c, { signal: n }), document.addEventListener("pointercancel", c, { signal: n }), window.addEventListener("blur", c, { signal: n });
   }
   _handleCellDblClick(i) {
     if (this.readOnly) return;
     const t = i.target.closest("[data-row]");
     if (!t) return;
-    const s = parseInt(t.dataset.row, 10), r = parseInt(t.dataset.col, 10);
-    this._selection.moveTo(s, r), this._startEditing();
+    const r = parseInt(t.dataset.row, 10), s = parseInt(t.dataset.col, 10);
+    this._selection.moveTo(r, s), this._startEditing();
   }
   // ─── Clipboard ──────────────────────────────────────
   async _handleCopy() {
@@ -1045,29 +1754,51 @@ let u = class extends V {
       this._internalData,
       this._selection.range
     ), e = [], t = this._snapshotSelection();
-    for (const r of i)
-      this._internalData.has(r) && e.push({ id: r, value: "" });
-    const s = this._buildCommandBatch(e, "cut", t, t);
-    s && this._executeUserBatch(s);
+    for (const s of i)
+      this._internalData.has(s) && e.push({ id: s, value: "" });
+    const r = this._buildCommandBatch(e, "cut", t, t);
+    r && this._executeUserBatch(r);
   }
   async _handlePaste() {
     if (this.readOnly) return;
     const { row: i, col: e } = this._selection.activeCell, t = await this._clipboardManager.paste(i, e, this.rows, this.cols);
     if (t && t.length > 0) {
-      const s = this._snapshotSelection(), r = this._buildCommandBatch(t, "paste", s, s);
-      r && this._executeUserBatch(r);
+      const r = this._snapshotSelection(), s = t.map((n) => ({ id: n.id, value: n.value })), o = this._buildCommandBatch(s, "paste", r, r);
+      if (o) {
+        const n = new Map(t.map((l) => [l.id, l]));
+        for (const l of o.deltas) {
+          const c = n.get(l.id);
+          if (c != null && c.format) {
+            const h = this._internalData.get(l.id);
+            l.formatBefore = h != null && h.format ? { ...h.format } : void 0, l.formatAfter = c.format;
+          }
+        }
+        const a = new Set(o.deltas.map((l) => l.id));
+        for (const l of t)
+          if (l.format && !a.has(l.id)) {
+            const c = this._internalData.get(l.id);
+            o.deltas.push({
+              id: l.id,
+              before: (c == null ? void 0 : c.rawValue) ?? "",
+              after: l.value,
+              formatBefore: c != null && c.format ? { ...c.format } : void 0,
+              formatAfter: l.format
+            });
+          }
+        this._executeUserBatch(o);
+      }
     }
   }
   // ─── Cell Clearing ──────────────────────────────────
   _clearSelectedCells() {
     const i = this._selection.range, e = [], t = this._snapshotSelection();
-    for (let r = i.start.row; r <= i.end.row; r++)
-      for (let a = i.start.col; a <= i.end.col; a++) {
-        const o = y(r, a);
-        this._internalData.has(o) && e.push({ id: o, value: "" });
+    for (let s = i.start.row; s <= i.end.row; s++)
+      for (let o = i.start.col; o <= i.end.col; o++) {
+        const n = b(s, o);
+        this._internalData.has(n) && e.push({ id: n, value: "" });
       }
-    const s = this._buildCommandBatch(e, "clear", t, t);
-    s && this._executeUserBatch(s);
+    const r = this._buildCommandBatch(e, "clear", t, t);
+    r && this._executeUserBatch(r);
   }
   // ─── Scroll Handling ────────────────────────────────
   _handleScroll(i) {
@@ -1076,7 +1807,7 @@ let u = class extends V {
   }
   // ─── Editor Input ───────────────────────────────────
   _handleEditorInput(i) {
-    this._editValue = i.target.value;
+    this._editValue = i.target.value, this._exitRefMode();
   }
   _handleEditorBlur() {
     this._isEditing && this._commitEdit();
@@ -1085,7 +1816,9 @@ let u = class extends V {
     this._formulaBarMode = i.detail.mode;
   }
   _handleFormulaBarCommit(i) {
-    this.readOnly || (this._isEditing && (this._isEditing = !1, this._editingCellKey = null), this._commitRawValue(this._getActiveCellKey(), i.detail.value));
+    if (this.readOnly) return;
+    const e = this._editingCellKey ?? this._getActiveCellKey();
+    this._isEditing && (this._isEditing = !1, this._editingCellKey = null), this._commitRawValue(e, i.detail.value);
   }
   // ─── Event Dispatching ──────────────────────────────
   _dispatchCellChange(i) {
@@ -1102,6 +1835,11 @@ let u = class extends V {
       new CustomEvent("data-change", { detail: i, bubbles: !0, composed: !0 })
     );
   }
+  _dispatchFormatChange(i) {
+    this.dispatchEvent(
+      new CustomEvent("format-change", { detail: i, bubbles: !0, composed: !0 })
+    );
+  }
   // ─── Virtual Rendering ──────────────────────────────
   /**
    * Compute which rows and columns are visible based on scroll position.
@@ -1111,39 +1849,43 @@ let u = class extends V {
     const i = this._grid;
     if (!i)
       return { startRow: 0, endRow: Math.min(this.rows, 40), startCol: 0, endCol: this.cols };
-    const e = this._getCSSVarPx("--ls-cell-height", 28), t = this._getCSSVarPx("--ls-cell-width", 100), s = i.clientHeight, r = i.clientWidth, a = 5, o = Math.max(0, Math.floor(this._scrollTop / e) - a), n = Math.min(this.rows, Math.ceil((this._scrollTop + s) / e) + a), l = Math.max(0, Math.floor(this._scrollLeft / t) - a), c = Math.min(this.cols, Math.ceil((this._scrollLeft + r) / t) + a);
-    return { startRow: o, endRow: n, startCol: l, endCol: c };
+    const e = this._getCSSVarPx("--ls-cell-height", 28), t = this._getCSSVarPx("--ls-cell-width", 100), r = i.clientHeight, s = i.clientWidth, o = 5;
+    let n = Math.max(0, Math.floor(this._scrollTop / e) - o), a = Math.min(this.rows, Math.ceil((this._scrollTop + r) / e) + o), l = Math.max(0, Math.floor(this._scrollLeft / t) - o), c = Math.min(this.cols, Math.ceil((this._scrollLeft + s) / t) + o);
+    const { row: h, col: u } = this._selection.activeCell;
+    return h < n && (n = h), h >= a && (a = h + 1), u < l && (l = u), u >= c && (c = u + 1), { startRow: n, endRow: a, startCol: l, endCol: c };
   }
   _getCSSVarPx(i, e) {
     const t = getComputedStyle(this).getPropertyValue(i);
     if (t) {
-      const s = parseInt(t, 10);
-      if (!isNaN(s)) return s;
+      const r = parseInt(t, 10);
+      if (!isNaN(r)) return r;
     }
     return e;
   }
   // ─── Editor Positioning ─────────────────────────────
   _getEditorStyle() {
-    if (!this._isEditing) return "display:none;";
-    const { row: i, col: e } = this._selection.activeCell, t = this._getCSSVarPx("--ls-cell-height", 28), s = this._getCSSVarPx("--ls-cell-width", 100), r = 50, a = (i + 1) * t, o = r + e * s;
-    return `
-      display: block;
-      position: absolute;
-      top: ${a}px;
-      left: ${o}px;
-      width: ${s}px;
-      height: ${t}px;
-      z-index: 10;
-    `;
+    if (!this._isEditing) return { display: "none" };
+    const { row: i, col: e } = this._selection.activeCell, t = this._getCSSVarPx("--ls-cell-height", 28), r = this._getCSSVarPx("--ls-cell-width", 100), s = 50, o = (i + 1) * t - this._scrollTop, n = s + e * r - this._scrollLeft, a = {
+      display: "block",
+      position: "absolute",
+      top: `${o}px`,
+      left: `${n}px`,
+      width: `${r}px`,
+      height: `${t}px`,
+      "z-index": "10"
+    }, l = this._getCellStyles(i, e);
+    for (const [c, h] of Object.entries(l))
+      c !== "justify-content" && c !== "background-color" && (a[c] = h);
+    return a;
   }
   render() {
-    const { startRow: i, endRow: e, startCol: t, endCol: s } = this._getVisibleRange(), r = this._selection.activeCell, a = this._getCellRaw(r.row, r.col), o = this._getCellDisplay(r.row, r.col);
-    return _`
+    const { startRow: i, endRow: e, startCol: t, endCol: r } = this._getVisibleRange(), s = this._selection.activeCell, o = this._getCellRaw(s.row, s.col), n = this._getCellDisplay(s.row, s.col);
+    return y`
       <div class="ls-wrapper">
         <y11n-formula-bar
           cell-ref="${this._getActiveCellRef()}"
-          raw-value="${a}"
-          display-value="${o}"
+          raw-value="${o}"
+          display-value="${n}"
           .mode="${this._formulaBarMode}"
           .readOnly="${this.readOnly}"
           @formula-bar-mode-change="${this._handleFormulaBarModeChange}"
@@ -1154,7 +1896,7 @@ let u = class extends V {
           <input
             id="editor"
             part="editor"
-            style="${this._getEditorStyle()}"
+            style=${U(this._getEditorStyle())}
             .value="${this._editValue}"
             @input="${this._handleEditorInput}"
             @keydown="${this._handleEditorKeydown}"
@@ -1173,13 +1915,16 @@ let u = class extends V {
             @keydown="${this._handleGridKeydown}"
             @scroll="${this._handleScroll}"
           >
-            ${this._renderHeaderRow(t, s)}
-            ${this._renderRows(i, e, t, s)}
+            ${this._renderHeaderRow(t, r)}
+            ${this._renderRows(i, e, t, r)}
           </div>
         </div>
 
         <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-          ${this._getAnnouncement(r)}
+          ${this._getAnnouncement(s)}
+        </div>
+        <div class="sr-only" role="log" aria-live="assertive" aria-atomic="true">
+          ${this._modeAnnouncement}
         </div>
       </div>
     `;
@@ -1187,14 +1932,13 @@ let u = class extends V {
   _renderHeaderRow(i, e) {
     const t = [];
     for (let r = i; r < e; r++)
-      t.push({ letter: R(r), index: r });
-    const s = this._getCSSVarPx("--ls-cell-width", 100);
-    return _`
+      t.push({ letter: F(r), index: r });
+    return y`
       <div class="ls-header-row" role="row" aria-rowindex="1">
         <div class="ls-corner-header" role="columnheader"></div>
-        ${i > 0 ? _`<div style="width: ${i * s}px;"></div>` : x}
+        ${i > 0 ? y`<div style="grid-column: span ${i};"></div>` : k}
         ${t.map(
-      (r) => _`
+      (r) => y`
             <div
               class="ls-col-header"
               role="columnheader"
@@ -1204,33 +1948,35 @@ let u = class extends V {
             </div>
           `
     )}
-        ${e < this.cols ? _`<div style="width: ${(this.cols - e) * s}px;"></div>` : x}
+        ${e < this.cols ? y`<div style="grid-column: span ${this.cols - e};"></div>` : k}
       </div>
     `;
   }
-  _renderRows(i, e, t, s) {
-    const r = this._getCSSVarPx("--ls-cell-height", 28), a = Array.from({ length: e - i }, (o, n) => i + n);
-    return _`
-      ${i > 0 ? _`<div style="grid-column: 1 / -1; height: ${i * r}px;"></div>` : x}
-      ${N(a, (o) => o, (o) => this._renderRow(o, t, s))}
-      ${e < this.rows ? _`<div style="grid-column: 1 / -1; height: ${(this.rows - e) * r}px;"></div>` : x}
+  _renderRows(i, e, t, r) {
+    const s = this._getCSSVarPx("--ls-cell-height", 28), o = Array.from({ length: e - i }, (n, a) => i + a);
+    return y`
+      ${i > 0 ? y`<div style="grid-column: 1 / -1; height: ${i * s}px;"></div>` : k}
+      ${L(o, (n) => n, (n) => this._renderRow(n, t, r))}
+      ${e < this.rows ? y`<div style="grid-column: 1 / -1; height: ${(this.rows - e) * s}px;"></div>` : k}
     `;
   }
   _renderRow(i, e, t) {
-    const s = this._getCSSVarPx("--ls-cell-width", 100), r = [];
-    for (let a = e; a < t; a++) {
-      const o = this._selection.isCellSelected(i, a), n = this._selection.isCellActive(i, a), l = this._getCellDisplay(i, a), c = y(i, a);
-      r.push(_`
+    const r = [];
+    for (let s = e; s < t; s++) {
+      const o = this._selection.isCellSelected(i, s), n = this._selection.isCellActive(i, s), a = this._refMode && i === this._refCursorRow && s === this._refCursorCol, l = this._getCellDisplay(i, s), c = b(i, s), h = this._getCellStyles(i, s);
+      r.push(y`
         <div
-          class="ls-cell ${n ? "active-cell" : ""}"
+          class="ls-cell ${n ? "active-cell" : ""} ${a ? "ref-highlight" : ""}"
           role="gridcell"
-          aria-colindex="${a + 2}"
+          aria-colindex="${s + 2}"
           aria-selected="${o}"
           aria-readonly="${this.readOnly}"
+          aria-current="${n ? "true" : "false"}"
           data-row="${i}"
-          data-col="${a}"
+          data-col="${s}"
           data-key="${c}"
           tabindex="${n ? 0 : -1}"
+          style=${U(h)}
           @pointerdown="${this._handleCellPointerDown}"
           @dblclick="${this._handleCellDblClick}"
         >
@@ -1238,29 +1984,27 @@ let u = class extends V {
         </div>
       `);
     }
-    return _`
+    return y`
       <div class="ls-row" role="row" aria-rowindex="${i + 2}">
         <div class="ls-row-header" role="rowheader">${i + 1}</div>
-        ${e > 0 ? _`<div style="width: ${e * s}px;"></div>` : x}
+        ${e > 0 ? y`<div style="grid-column: span ${e};"></div>` : k}
         ${r}
-        ${t < this.cols ? _`<div style="width: ${(this.cols - t) * s}px;"></div>` : x}
+        ${t < this.cols ? y`<div style="grid-column: span ${this.cols - t};"></div>` : k}
       </div>
     `;
   }
   _getAnnouncement(i) {
-    const e = `${R(i.col)}${i.row + 1}`, t = this._getCellDisplay(i.row, i.col);
+    const e = `${F(i.col)}${i.row + 1}`, t = this._getCellDisplay(i.row, i.col);
     return t ? `${e}: ${t}` : e;
   }
   updated() {
-    if (this._isEditing && this._editor) {
-      const i = this._editor, e = this._editValue.length;
-      i.focus(), i.setSelectionRange(e, e);
-    }
+    this._isEditing && this._editor && (this._editor.focus(), this._refMode ? this._editor.setSelectionRange(this._refInsertEnd, this._refInsertEnd) : this._editor.setSelectionRange(this._editValue.length, this._editValue.length));
   }
 };
-u.styles = k`
+w.styles = M`
     :host {
       display: block;
+      height: 100%;
       position: relative;
       font-family: var(--ls-font-family, system-ui, -apple-system, sans-serif);
       font-size: var(--ls-font-size, 13px);
@@ -1302,10 +2046,12 @@ u.styles = k`
     .ls-grid {
       display: grid;
       grid-template-columns: var(--_row-header-width) repeat(var(--cols), var(--_cell-width));
+      align-content: start;
       overflow: auto;
       position: relative;
       width: 100%;
-      height: 100%;
+      height: round(down, 100%, var(--_cell-height));
+      scroll-snap-type: y mandatory;
       outline: none;
     }
 
@@ -1337,6 +2083,7 @@ u.styles = k`
       position: sticky;
       left: 0;
       z-index: 4;
+      scroll-snap-align: start;
     }
 
     .ls-row-header {
@@ -1352,6 +2099,7 @@ u.styles = k`
       border-bottom: 1px solid var(--_border-color);
       font-weight: 600;
       user-select: none;
+      scroll-snap-align: start;
     }
 
     .ls-cell {
@@ -1385,6 +2133,13 @@ u.styles = k`
       z-index: 1;
     }
 
+    .ls-cell.ref-highlight {
+      outline: 2px dashed var(--ls-ref-highlight-border, #1a73e8);
+      outline-offset: -2px;
+      background: var(--ls-ref-highlight-bg, rgba(26, 115, 232, 0.15));
+      z-index: 1;
+    }
+
     .ls-cell .cell-text {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1416,55 +2171,450 @@ u.styles = k`
       border: 0;
     }
   `;
-f([
-  w({ type: Number })
-], u.prototype, "rows", 2);
-f([
-  w({ type: Number })
-], u.prototype, "cols", 2);
-f([
-  w({ attribute: !1 })
-], u.prototype, "data", 2);
-f([
-  w({ type: Boolean, attribute: "read-only", reflect: !0 })
-], u.prototype, "readOnly", 2);
-f([
-  w({ attribute: !1 })
-], u.prototype, "functions", 2);
-f([
+v([
+  m({ type: Number })
+], w.prototype, "rows", 2);
+v([
+  m({ type: Number })
+], w.prototype, "cols", 2);
+v([
+  m({ attribute: !1 })
+], w.prototype, "data", 2);
+v([
+  m({ type: Boolean, attribute: "read-only", reflect: !0 })
+], w.prototype, "readOnly", 2);
+v([
+  m({ attribute: !1 })
+], w.prototype, "functions", 2);
+v([
   E()
-], u.prototype, "_isEditing", 2);
-f([
+], w.prototype, "_isEditing", 2);
+v([
   E()
-], u.prototype, "_editValue", 2);
-f([
+], w.prototype, "_editValue", 2);
+v([
   E()
-], u.prototype, "_formulaBarMode", 2);
-f([
+], w.prototype, "_formulaBarMode", 2);
+v([
   E()
-], u.prototype, "_scrollTop", 2);
-f([
+], w.prototype, "_refMode", 2);
+v([
   E()
-], u.prototype, "_scrollLeft", 2);
-f([
-  A("#editor")
-], u.prototype, "_editor", 2);
-f([
-  A(".ls-grid")
-], u.prototype, "_grid", 2);
-u = f([
-  D("y11n-spreadsheet")
-], u);
+], w.prototype, "_modeAnnouncement", 2);
+v([
+  E()
+], w.prototype, "_scrollTop", 2);
+v([
+  E()
+], w.prototype, "_scrollLeft", 2);
+v([
+  I("#editor")
+], w.prototype, "_editor", 2);
+v([
+  I(".ls-grid")
+], w.prototype, "_grid", 2);
+w = v([
+  T("y11n-spreadsheet")
+], w);
+var Q = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, S = (i, e, t, r) => {
+  for (var s = r > 1 ? void 0 : r ? tt(e, t) : e, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = (r ? n(e, t, s) : n(s)) || s);
+  return r && s && Q(e, t, s), s;
+};
+let C = class extends O {
+  constructor() {
+    super(...arguments), this.bold = !1, this.italic = !1, this.underline = !1, this.strikethrough = !1, this.textColor = "#000000", this.backgroundColor = "#ffffff", this.textAlign = "left", this.fontSize = 13, this.readOnly = !1;
+  }
+  // ─── Event Dispatching ─────────────────────────────────
+  _dispatch(i, e) {
+    this.dispatchEvent(
+      new CustomEvent("format-action", {
+        detail: { action: i, value: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ─── Keyboard Navigation ───────────────────────────────
+  _handleToolbarKeydown(i) {
+    const e = i.currentTarget, t = Array.from(
+      e.querySelectorAll("button:not(:disabled), select:not(:disabled), .color-wrapper")
+    ), r = t.findIndex(
+      (o) => o === i.target || o.contains(i.target)
+    );
+    if (r === -1) return;
+    let s = -1;
+    if (i.key === "ArrowRight" ? s = (r + 1) % t.length : i.key === "ArrowLeft" ? s = (r - 1 + t.length) % t.length : i.key === "Home" ? s = 0 : i.key === "End" && (s = t.length - 1), s >= 0) {
+      i.preventDefault();
+      const o = t[s];
+      (o.querySelector("input, select, button") ?? o).focus();
+    }
+  }
+  // ─── Render ────────────────────────────────────────────
+  render() {
+    const i = this.readOnly;
+    return y`
+      <div
+        class="toolbar"
+        role="toolbar"
+        aria-label="Cell formatting"
+        @keydown=${this._handleToolbarKeydown}
+      >
+        <!-- Text style toggles -->
+        <button
+          class="bold-btn"
+          type="button"
+          aria-pressed="${this.bold}"
+          aria-label="Bold"
+          title="Bold (Ctrl+B)"
+          ?disabled=${i}
+          tabindex="0"
+          @click=${() => this._dispatch("bold", !this.bold)}
+        >B</button>
+        <button
+          class="italic-btn"
+          type="button"
+          aria-pressed="${this.italic}"
+          aria-label="Italic"
+          title="Italic (Ctrl+I)"
+          ?disabled=${i}
+          tabindex="-1"
+          @click=${() => this._dispatch("italic", !this.italic)}
+        >I</button>
+        <button
+          class="underline-btn"
+          type="button"
+          aria-pressed="${this.underline}"
+          aria-label="Underline"
+          title="Underline (Ctrl+U)"
+          ?disabled=${i}
+          tabindex="-1"
+          @click=${() => this._dispatch("underline", !this.underline)}
+        >U</button>
+        <button
+          class="strikethrough-btn"
+          type="button"
+          aria-pressed="${this.strikethrough}"
+          aria-label="Strikethrough"
+          title="Strikethrough"
+          ?disabled=${i}
+          tabindex="-1"
+          @click=${() => this._dispatch("strikethrough", !this.strikethrough)}
+        >S</button>
+
+        <div class="separator" role="separator"></div>
+
+        <!-- Text color -->
+        <div class="color-wrapper" tabindex="-1">
+          <div class="color-swatch" aria-hidden="true">
+            A<span class="indicator" style="background-color: ${this.textColor}"></span>
+          </div>
+          <input
+            type="color"
+            .value=${this.textColor}
+            ?disabled=${i}
+            aria-label="Text color"
+            title="Text color"
+            @input=${(e) => this._dispatch("textColor", e.target.value)}
+          />
+        </div>
+
+        <!-- Background color -->
+        <div class="color-wrapper" tabindex="-1">
+          <div class="color-swatch" aria-hidden="true">
+            <span class="indicator" style="background-color: ${this.backgroundColor}; width: 16px; height: 16px; border-radius: 2px; border: 1px solid #ccc;"></span>
+          </div>
+          <input
+            type="color"
+            .value=${this.backgroundColor}
+            ?disabled=${i}
+            aria-label="Background color"
+            title="Background color"
+            @input=${(e) => this._dispatch("backgroundColor", e.target.value)}
+          />
+        </div>
+
+        <div class="separator" role="separator"></div>
+
+        <!-- Alignment group -->
+        <div class="align-group" role="group" aria-label="Text alignment">
+          <button
+            type="button"
+            aria-pressed="${this.textAlign === "left"}"
+            aria-label="Align left"
+            title="Align left"
+            ?disabled=${i}
+            tabindex="-1"
+            @click=${() => this._dispatch("textAlign", "left")}
+          ><span class="align-icon align-left" aria-hidden="true"><span></span><span></span><span></span></span></button>
+          <button
+            type="button"
+            aria-pressed="${this.textAlign === "center"}"
+            aria-label="Align center"
+            title="Align center"
+            ?disabled=${i}
+            tabindex="-1"
+            @click=${() => this._dispatch("textAlign", "center")}
+          ><span class="align-icon align-center" aria-hidden="true"><span></span><span></span><span></span></span></button>
+          <button
+            type="button"
+            aria-pressed="${this.textAlign === "right"}"
+            aria-label="Align right"
+            title="Align right"
+            ?disabled=${i}
+            tabindex="-1"
+            @click=${() => this._dispatch("textAlign", "right")}
+          ><span class="align-icon align-right" aria-hidden="true"><span></span><span></span><span></span></span></button>
+        </div>
+
+        <div class="separator" role="separator"></div>
+
+        <!-- Font size -->
+        <select
+          class="font-size-select"
+          .value=${String(this.fontSize)}
+          ?disabled=${i}
+          aria-label="Font size"
+          title="Font size"
+          tabindex="-1"
+          @change=${(e) => this._dispatch("fontSize", Number(e.target.value))}
+        >
+          ${[8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36].map(
+      (e) => y`<option value=${e} ?selected=${this.fontSize === e}>${e}</option>`
+    )}
+        </select>
+
+        <div class="separator" role="separator"></div>
+
+        <!-- Clear formatting -->
+        <button
+          type="button"
+          aria-label="Clear formatting"
+          title="Clear formatting"
+          ?disabled=${i}
+          tabindex="-1"
+          @click=${() => this._dispatch("clearFormat")}
+        >${"✘"}</button>
+      </div>
+    `;
+  }
+};
+C.styles = M`
+    :host {
+      display: block;
+      font-family: var(--ls-font-family, system-ui, -apple-system, sans-serif);
+      font-size: var(--ls-font-size, 13px);
+      color: var(--ls-text-color, #333);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 8px;
+      border-bottom: 1px solid var(--ls-border-color, #e0e0e0);
+      background: var(--ls-toolbar-bg, #f8fafc);
+      flex-wrap: wrap;
+    }
+
+    .separator {
+      width: 1px;
+      height: 20px;
+      background: var(--ls-border-color, #e0e0e0);
+      margin: 0 4px;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+      height: 28px;
+      padding: 0 4px;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      background: transparent;
+      cursor: pointer;
+      font: inherit;
+      font-size: 13px;
+      color: inherit;
+    }
+
+    button:hover:not(:disabled) {
+      background: var(--ls-toolbar-hover-bg, #e8eaed);
+    }
+
+    button[aria-pressed='true'] {
+      background: var(--ls-toolbar-active-bg, #d3e3fd);
+      border-color: var(--ls-toolbar-active-border, #a8c7fa);
+    }
+
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    button.bold-btn {
+      font-weight: bold;
+    }
+
+    button.italic-btn {
+      font-style: italic;
+    }
+
+    button.underline-btn {
+      text-decoration: underline;
+    }
+
+    button.strikethrough-btn {
+      text-decoration: line-through;
+    }
+
+    .color-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .color-wrapper input[type='color'] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      border: none;
+    }
+
+    .color-wrapper input[type='color']:disabled {
+      cursor: not-allowed;
+    }
+
+    .color-swatch {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+      height: 28px;
+      padding: 0 4px;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      background: transparent;
+      font-size: 13px;
+      pointer-events: none;
+    }
+
+    .color-swatch .indicator {
+      display: block;
+      width: 14px;
+      height: 3px;
+      margin-top: 1px;
+      border-radius: 1px;
+    }
+
+    .align-group {
+      display: inline-flex;
+      gap: 0;
+    }
+
+    .align-icon {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      width: 14px;
+    }
+
+    .align-icon span {
+      display: block;
+      height: 2px;
+      background: currentColor;
+      border-radius: 1px;
+    }
+
+    .align-left span:nth-child(1) { width: 100%; }
+    .align-left span:nth-child(2) { width: 70%; }
+    .align-left span:nth-child(3) { width: 85%; }
+
+    .align-center span:nth-child(1) { width: 100%; margin: 0 auto; }
+    .align-center span:nth-child(2) { width: 70%; margin: 0 auto; }
+    .align-center span:nth-child(3) { width: 85%; margin: 0 auto; }
+
+    .align-right span:nth-child(1) { width: 100%; margin-left: auto; }
+    .align-right span:nth-child(2) { width: 70%; margin-left: auto; }
+    .align-right span:nth-child(3) { width: 85%; margin-left: auto; }
+
+    .font-size-select {
+      width: 52px;
+      height: 28px;
+      padding: 0 4px;
+      border: 1px solid var(--ls-border-color, #e0e0e0);
+      border-radius: 4px;
+      background: #fff;
+      font: inherit;
+      font-size: 12px;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .font-size-select:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  `;
+S([
+  m({ type: Boolean })
+], C.prototype, "bold", 2);
+S([
+  m({ type: Boolean })
+], C.prototype, "italic", 2);
+S([
+  m({ type: Boolean })
+], C.prototype, "underline", 2);
+S([
+  m({ type: Boolean })
+], C.prototype, "strikethrough", 2);
+S([
+  m({ type: String })
+], C.prototype, "textColor", 2);
+S([
+  m({ type: String })
+], C.prototype, "backgroundColor", 2);
+S([
+  m({ type: String })
+], C.prototype, "textAlign", 2);
+S([
+  m({ type: Number })
+], C.prototype, "fontSize", 2);
+S([
+  m({ type: Boolean, attribute: "read-only", reflect: !0 })
+], C.prototype, "readOnly", 2);
+C = S([
+  T("y11n-format-toolbar")
+], C);
+function nt(i, e) {
+  let t, r, s, o, n, a, l, c, h = !0;
+  for (let p = e.start.row; p <= e.end.row; p++)
+    for (let f = e.start.col; f <= e.end.col; f++) {
+      const g = `${p}:${f}`, _ = i(g), d = _ == null ? void 0 : _.format;
+      h ? (t = (d == null ? void 0 : d.bold) ?? !1, r = (d == null ? void 0 : d.italic) ?? !1, s = (d == null ? void 0 : d.underline) ?? !1, o = (d == null ? void 0 : d.strikethrough) ?? !1, n = d == null ? void 0 : d.textColor, a = d == null ? void 0 : d.backgroundColor, l = d == null ? void 0 : d.textAlign, c = d == null ? void 0 : d.fontSize, h = !1) : (t !== ((d == null ? void 0 : d.bold) ?? !1) && (t = void 0), r !== ((d == null ? void 0 : d.italic) ?? !1) && (r = void 0), s !== ((d == null ? void 0 : d.underline) ?? !1) && (s = void 0), o !== ((d == null ? void 0 : d.strikethrough) ?? !1) && (o = void 0), n !== (d == null ? void 0 : d.textColor) && (n = void 0), a !== (d == null ? void 0 : d.backgroundColor) && (a = void 0), l !== (d == null ? void 0 : d.textAlign) && (l = void 0), c !== (d == null ? void 0 : d.fontSize) && (c = void 0));
+    }
+  const u = {};
+  return t && (u.bold = !0), r && (u.italic = !0), s && (u.underline = !0), o && (u.strikethrough = !0), n !== void 0 && (u.textColor = n), a !== void 0 && (u.backgroundColor = a), l !== void 0 && (u.textAlign = l), c !== void 0 && (u.fontSize = c), u;
+}
 export {
-  P as ClipboardManager,
-  F as FormulaEngine,
-  B as SelectionManager,
-  v as Y11nFormulaBar,
-  u as Y11nSpreadsheet,
-  y as cellKey,
-  R as colToLetter,
-  O as coordToRef,
-  M as letterToCol,
-  j as parseKey,
-  S as refToCoord
+  G as ClipboardManager,
+  K as FormulaEngine,
+  x as RangeValue,
+  j as SelectionManager,
+  C as Y11nFormatToolbar,
+  A as Y11nFormulaBar,
+  w as Y11nSpreadsheet,
+  b as cellKey,
+  F as colToLetter,
+  nt as computeSelectionFormat,
+  D as coordToRef,
+  z as formatsEqual,
+  P as letterToCol,
+  ot as parseKey,
+  R as refToCoord
 };