socialcalc-ai 1.0.1 → 1.0.3

package/README.md

@@ -530,6 +530,22 @@ import {
 
 ---
 
+## 📦 Release Notes
+
+### v1.0.3
+- **Node.js ESM & Runtime Compatibility**: Enhanced UMD root resolution across all core modules to support `globalThis`, eliminating undefined root errors in Node.js ES module loaders.
+- **TypeScript Declarations**: Bundled official type declarations (`index.d.ts`) covering all core exports, plugin modules, and React/Ionic UI modal components.
+- **Packaging Refinements**: Added `.npmignore` to exclude test files, scratch scripts, and developer metadata from distributed tarballs.
+
+### v1.0.2
+- **Cell Edit Modal Fix**: Fixed cell click interceptor and mouse delegates so clicking any cell reliably triggers the `CellEditModal` bottom sheet.
+- **Scroll Distortion Fix**: Resolved table border collapse and column misalignment when scrolling past multi-row (`rowspan`) and multi-column (`colspan`) blocks.
+- **Formula Support**: Enhanced modal editing to support formula values (`=SUM(...)`) seamlessly alongside raw numbers, text, and HTML formatting.
+- **Strict Column Sizing**: Enforced CSS pixel widths and `box-sizing: border-box` containment across `<colgroup>` and sizing rows to preserve layout integrity.
+- **Safety Guards**: Added null guards and try/catch protection across SocialCalc workbook control callbacks.
+
+---
+
 ## 📜 License & Acknowledgments
 
 - **Original SocialCalc Engine**: Created by Dan Bricklin (co-creator of VisiCalc) and Socialtext.

package/core/constants.js

@@ -11,7 +11,7 @@
     } else {
         root.SocialCalcConstants = factory();
     }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
     // Initialize SocialCalc namespace if not exists
     var SocialCalc;

package/core/core.js

@@ -11,7 +11,7 @@
     } else {
         root.SocialCalcCore = factory();
     }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
     // Get SocialCalc namespace
     var SocialCalc;
@@ -5186,6 +5186,7 @@
         if (context.showRCHeaders) {
             newcol = document.createElement("col");
             newcol.width = context.rownamewidth;
+            newcol.style.width = context.rownamewidth + "px";
             result.appendChild(newcol);
         }
 
@@ -5197,12 +5198,16 @@
             ) {
                 newcol = document.createElement("col");
                 t = context.colwidth[colnum];
-                if (t) newcol.width = t;
+                if (t) {
+                    newcol.width = t;
+                    newcol.style.width = t + "px";
+                }
                 result.appendChild(newcol);
             }
             if (colpane < context.colpanes.length - 1) {
                 newcol = document.createElement("col");
                 newcol.width = context.defaultpanedividerwidth;
+                newcol.style.width = context.defaultpanedividerwidth + "px";
                 result.appendChild(newcol);
             }
         }
@@ -5218,6 +5223,8 @@
         if (context.showRCHeaders) {
             newcell = document.createElement("td");
             newcell.style.width = context.rownamewidth + "px";
+            newcell.style.minWidth = context.rownamewidth + "px";
+            newcell.style.maxWidth = context.rownamewidth + "px";
             newcell.height = "1";
             result.appendChild(newcell);
         }
@@ -5230,13 +5237,21 @@
             ) {
                 newcell = document.createElement("td");
                 t = context.colwidth[colnum];
-                if (t) newcell.width = t;
+                if (t) {
+                    newcell.width = t;
+                    newcell.style.width = t + "px";
+                    newcell.style.minWidth = t + "px";
+                    newcell.style.maxWidth = t + "px";
+                }
                 newcell.height = "1";
                 result.appendChild(newcell);
             }
             if (colpane < context.colpanes.length - 1) {
                 newcell = document.createElement("td");
                 newcell.width = context.defaultpanedividerwidth;
+                newcell.style.width = context.defaultpanedividerwidth + "px";
+                newcell.style.minWidth = context.defaultpanedividerwidth + "px";
+                newcell.style.maxWidth = context.defaultpanedividerwidth + "px";
                 newcell.height = "1";
                 result.appendChild(newcell);
             }
@@ -5289,8 +5304,8 @@
                 if (rownum === firstVisibleRow && colnum === firstVisibleCol) {
                     // This is the visible start of the scrolled spanned cell in this pane!
                     isSpanContinuation = true;
-                    spanColSpan = Math.min(spanEndCol, panecollimits ? panecollimits.last : spanEndCol) - firstVisibleCol + 1;
-                    spanRowSpan = Math.min(spanEndRow, panerowlimits ? panerowlimits.last : spanEndRow) - firstVisibleRow + 1;
+                    spanColSpan = Math.max(1, Math.min(spanEndCol, panecollimits ? panecollimits.last : spanEndCol) - firstVisibleCol + 1);
+                    spanRowSpan = Math.max(1, Math.min(spanEndRow, panerowlimits ? panerowlimits.last : spanEndRow) - firstVisibleRow + 1);
                     cell = originCell;
                 } else {
                     // Covered by the visible span in this pane -- skip
@@ -5416,6 +5431,9 @@
             } else stylestr += "text-align:left;";
         }
 
+        var activeColSpan = isSpanContinuation ? spanColSpan : (result.colSpan || cell.colspan || 1);
+        var activeRowSpan = isSpanContinuation ? spanRowSpan : (result.rowSpan || cell.rowspan || 1);
+
         num = cell.bt;
         if (num && (!isSpanContinuation || (originCR && rownum === originCR.row))) {
             stylestr += "border-top:" + sheetobj.borderstyles[num] + ";";
@@ -5428,12 +5446,12 @@
             if (
                 context.CellInPane(
                     rownum,
-                    colnum + (isSpanContinuation ? spanColSpan : (cell.colspan || 1)),
+                    colnum + activeColSpan,
                     rowpane,
                     colpane
                 )
             )
-                t = SocialCalc.crToCoord(colnum + (isSpanContinuation ? spanColSpan : (cell.colspan || 1)), rownum);
+                t = SocialCalc.crToCoord(colnum + activeColSpan, rownum);
             else t = "nomatch";
             if (context.cellskip[t]) t = context.cellskip[t];
             if (!sheetobj.cells[t] || !sheetobj.cells[t].bl)
@@ -5446,13 +5464,13 @@
         } else if (context.showGrid) {
             if (
                 context.CellInPane(
-                    rownum + (isSpanContinuation ? spanRowSpan : (cell.rowspan || 1)),
+                    rownum + activeRowSpan,
                     colnum,
                     rowpane,
                     colpane
                 )
             )
-                t = SocialCalc.crToCoord(colnum, rownum + (isSpanContinuation ? spanRowSpan : (cell.rowspan || 1)));
+                t = SocialCalc.crToCoord(colnum, rownum + activeRowSpan);
             else t = "nomatch";
             if (context.cellskip[t]) t = context.cellskip[t];
             if (!sheetobj.cells[t] || !sheetobj.cells[t].bt)
@@ -5483,6 +5501,8 @@
         }
 
         result.style.cssText = stylestr;
+        result.style.boxSizing = "border-box";
+        result.style.overflow = "hidden";
 
         //!!!!!!!!!
         // NOTE: csss and cssc are not supported yet.

package/core/format-number.js

@@ -11,7 +11,7 @@
     } else {
         root.SocialCalcFormatNumber = factory();
     }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
     // Get SocialCalc namespace
     var SocialCalc;

package/core/formula.js

@@ -11,7 +11,7 @@
     } else {
         root.SocialCalcFormula = factory();
     }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
     // Get SocialCalc namespace
     var SocialCalc;

package/core/spreadsheet-control.js

@@ -11,7 +11,7 @@
   } else {
     root.SocialCalcSpreadsheetControl = factory();
   }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
   // Get SocialCalc namespace
   var SocialCalc;
@@ -7014,8 +7014,13 @@ SocialCalc.SpreadsheetCmdTable = {
   // this is for checkmark toggling
   SocialCalc.Callbacks.ToggleCell = function (cellname) {
     var control = SocialCalc.GetCurrentWorkBookControl();
+    if (!control || !control.currentSheetButton || !control.workbook || !control.workbook.sheetArr) {
+      return;
+    }
     var sheetid = control.currentSheetButton.id;
+    if (!control.workbook.sheetArr[sheetid]) return;
     var sheetobj = control.workbook.sheetArr[sheetid].sheet;
+    if (!sheetobj || !sheetobj.cells) return;
     var cell = sheetobj.cells[cellname];
     var sheetname = sheetobj.sheetname;
 

package/core/table-editor.js

@@ -11,7 +11,7 @@
     } else {
         root.SocialCalcTableEditor = factory();
     }
-})(typeof self !== "undefined" ? self : this, function () {
+})(typeof globalThis !== "undefined" ? globalThis : (typeof self !== "undefined" ? self : this), function () {
 
     // Get SocialCalc namespace
     var SocialCalc;
@@ -1582,22 +1582,33 @@
             mouseinfo.registeredElements.push({ element: element, editor: editor });
         }
 
+        if (!SocialCalc.ProcessEditorMouseDownHandler) {
+            SocialCalc.ProcessEditorMouseDownHandler = function (e) {
+                return SocialCalc.ProcessEditorMouseDown(e);
+            };
+        }
+        if (!SocialCalc.ProcessEditorDblClickHandler) {
+            SocialCalc.ProcessEditorDblClickHandler = function (e) {
+                return SocialCalc.ProcessEditorDblClick(e);
+            };
+        }
+
         if (element.addEventListener) {
             // DOM Level 2 -- Firefox, et al
             element.addEventListener(
                 "mousedown",
-                SocialCalc.ProcessEditorMouseDown,
+                SocialCalc.ProcessEditorMouseDownHandler,
                 false
             );
             element.addEventListener(
                 "dblclick",
-                SocialCalc.ProcessEditorDblClick,
+                SocialCalc.ProcessEditorDblClickHandler,
                 false
             );
         } else if (element.attachEvent) {
             // IE 5+
-            element.attachEvent("onmousedown", SocialCalc.ProcessEditorMouseDown);
-            element.attachEvent("ondblclick", SocialCalc.ProcessEditorDblClick);
+            element.attachEvent("onmousedown", SocialCalc.ProcessEditorMouseDownHandler);
+            element.attachEvent("ondblclick", SocialCalc.ProcessEditorDblClickHandler);
         } else {
             // don't handle this
             throw "Browser not supported";
@@ -1629,21 +1640,21 @@
                 // DOM Level 2
                 oldelement.removeEventListener(
                     "mousedown",
-                    SocialCalc.ProcessEditorMouseDown,
+                    SocialCalc.ProcessEditorMouseDownHandler || SocialCalc.ProcessEditorMouseDown,
                     false
                 );
                 oldelement.removeEventListener(
                     "dblclick",
-                    SocialCalc.ProcessEditorDblClick,
+                    SocialCalc.ProcessEditorDblClickHandler || SocialCalc.ProcessEditorDblClick,
                     false
                 );
             } else if (oldelement.detachEvent) {
                 // IE
                 oldelement.detachEvent(
                     "onmousedown",
-                    SocialCalc.ProcessEditorMouseDown
+                    SocialCalc.ProcessEditorMouseDownHandler || SocialCalc.ProcessEditorMouseDown
                 );
-                oldelement.detachEvent("ondblclick", SocialCalc.ProcessEditorDblClick);
+                oldelement.detachEvent("ondblclick", SocialCalc.ProcessEditorDblClickHandler || SocialCalc.ProcessEditorDblClick);
             }
             mouseinfo.registeredElements.splice(i, 1);
         }
@@ -3772,20 +3783,23 @@
             return;
         }
 
-        if ((vamount == 1 || vamount == -1) && hamount == 0) {
-            // special case quick scrolls
-            if (vamount == 1) {
-                editor.ScrollTableUpOneRow();
-            } else {
-                editor.ScrollTableDownOneRow();
+        // Fast micro-DOM update for 1-4 row vertical scrolls (smooth touch & momentum)
+        if (hamount == 0 && Math.abs(vamount) >= 1 && Math.abs(vamount) <= 4) {
+            var stepDir = vamount > 0 ? 1 : -1;
+            var steps = Math.abs(vamount);
+            for (var s = 0; s < steps; s++) {
+                if (stepDir > 0) {
+                    editor.ScrollTableUpOneRow();
+                } else {
+                    editor.ScrollTableDownOneRow();
+                }
             }
             if (editor.ecell) editor.SetECellHeaders("selected");
             editor.SchedulePositionCalculations();
             return;
         }
 
-        // Do a gross move and render
-
+        // Do a gross move and render for large jumps or horizontal scrolls
         if (vamount != 0 || hamount != 0) {
             context.rowpanes[vplen - 1].first += vamount;
             context.rowpanes[vplen - 1].last += vamount;
@@ -3892,9 +3906,8 @@
         var sheetobj = context.sheetobj;
         var tableobj = editor.fullgrid;
 
-        var tbodyobj;
-
-        tbodyobj = tableobj.lastChild;
+        var tbodyobj = tableobj.lastChild;
+        if (!tbodyobj || !tbodyobj.childNodes) return editor.fullgrid;
 
         toprow = context.showRCHeaders ? 2 : 1;
         for (rowpane = 0; rowpane < context.rowpanes.length - 1; rowpane++) {
@@ -3902,18 +3915,20 @@
                 context.rowpanes[rowpane].last - context.rowpanes[rowpane].first + 2; // skip pane and spacing row
         }
 
+        if (toprow >= tbodyobj.childNodes.length) return editor.fullgrid;
         tbodyobj.removeChild(tbodyobj.childNodes[toprow]);
 
         context.rowpanes[rowpane].first++;
         context.rowpanes[rowpane].last++;
         editor.FitToEditTable();
-        context.CalculateColWidthData(); // Just in case, since normally done in RenderSheet
+        context.CalculateColWidthData();
 
         newbottomrow = context.RenderRow(context.rowpanes[rowpane].last, rowpane);
-        tbodyobj.appendChild(newbottomrow);
-
-        // if scrolled off a row with starting rowspans, replace rows for the largest rowspan
+        if (newbottomrow) {
+            tbodyobj.appendChild(newbottomrow);
+        }
 
+        // If scrolled off a row with starting rowspans OR continuation spans, refresh rows for largest span
         var maxrowspan = 1;
         oldrownum = context.rowpanes[rowpane].first - 1;
 
@@ -3924,7 +3939,17 @@
                 colnum++
             ) {
                 var coord = SocialCalc.crToCoord(colnum, oldrownum);
-                if (context.cellskip[coord]) continue;
+                if (context.cellskip && context.cellskip[coord]) {
+                    // Cell was covered by a span starting above oldrownum
+                    var originCoord = context.cellskip[coord];
+                    var originCell = sheetobj.cells[originCoord];
+                    var originCR = context.coordToCR ? context.coordToCR[originCoord] : null;
+                    if (originCell && originCR) {
+                        var remainingSpan = (originCR.row - 0 + originCell.rowspan) - oldrownum;
+                        if (remainingSpan > maxrowspan) maxrowspan = remainingSpan;
+                    }
+                    continue;
+                }
                 cell = sheetobj.cells[coord];
                 if (cell && cell.rowspan > maxrowspan) maxrowspan = cell.rowspan;
             }
@@ -3932,15 +3957,17 @@
 
         if (maxrowspan > 1) {
             for (rownum = 1; rownum < maxrowspan; rownum++) {
-                if (rownum + oldrownum >= context.rowpanes[rowpane].last) break;
-                newrow = context.RenderRow(rownum + oldrownum, rowpane);
+                var targetRow = rownum + oldrownum;
+                if (targetRow > context.rowpanes[rowpane].last) break;
+                newrow = context.RenderRow(targetRow, rowpane);
                 oldchild = tbodyobj.childNodes[toprow + rownum - 1];
-                tbodyobj.replaceChild(newrow, oldchild);
+                if (oldchild && newrow) {
+                    tbodyobj.replaceChild(newrow, oldchild);
+                }
             }
         }
 
-        // if added a row that includes rowspans from above, update the size of those to include new row
-
+        // If added bottom row includes rowspans from above, update the size of those to include new row
         bottomrownum = context.rowpanes[rowpane].last;
 
         for (colpane = 0; colpane < context.colpanes.length; colpane++) {
@@ -3949,26 +3976,31 @@
                 colnum <= context.colpanes[colpane].last;
                 colnum++
             ) {
+                if (!context.cellskip) continue;
                 coord = context.cellskip[SocialCalc.crToCoord(colnum, bottomrownum)];
-                if (!coord) continue; // only look at spanned cells
-                rownum = context.coordToCR[coord].row - 0;
+                if (!coord) continue;
+                rownum = context.coordToCR ? (context.coordToCR[coord].row - 0) : null;
                 if (
+                    rownum === null ||
                     rownum == context.rowpanes[rowpane].last ||
                     rownum < context.rowpanes[rowpane].first
-                )
-                    continue; // this row (colspan) or starts above pane
+                ) {
+                    continue;
+                }
                 cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true; // remember row num to update
+                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true;
             }
         }
 
         for (rownum in rowneedsrefresh) {
-            newrow = context.RenderRow(rownum, rowpane);
+            newrow = context.RenderRow(rownum - 0, rowpane);
             oldchild =
                 tbodyobj.childNodes[
                 toprow + (rownum - context.rowpanes[rowpane].first)
                 ];
-            tbodyobj.replaceChild(newrow, oldchild);
+            if (oldchild && newrow) {
+                tbodyobj.replaceChild(newrow, oldchild);
+            }
         }
 
         return tableobj;
@@ -3995,9 +4027,8 @@
         var sheetobj = context.sheetobj;
         var tableobj = editor.fullgrid;
 
-        var tbodyobj;
-
-        tbodyobj = tableobj.lastChild;
+        var tbodyobj = tableobj.lastChild;
+        if (!tbodyobj || !tbodyobj.childNodes) return editor.fullgrid;
 
         toprow = context.showRCHeaders ? 2 : 1;
         for (rowpane = 0; rowpane < context.rowpanes.length - 1; rowpane++) {
@@ -4005,23 +4036,24 @@
                 context.rowpanes[rowpane].last - context.rowpanes[rowpane].first + 2; // skip pane and spacing row
         }
 
-        tbodyobj.removeChild(
-            tbodyobj.childNodes[
-            toprow +
-            (context.rowpanes[rowpane].last - context.rowpanes[rowpane].first)
-            ]
-        );
+        var removeIdx = toprow + (context.rowpanes[rowpane].last - context.rowpanes[rowpane].first);
+        if (removeIdx < tbodyobj.childNodes.length) {
+            tbodyobj.removeChild(tbodyobj.childNodes[removeIdx]);
+        }
 
         context.rowpanes[rowpane].first--;
         context.rowpanes[rowpane].last--;
         editor.FitToEditTable();
-        context.CalculateColWidthData(); // Just in case, since normally done in RenderSheet
+        context.CalculateColWidthData();
 
         newrow = context.RenderRow(context.rowpanes[rowpane].first, rowpane);
-        tbodyobj.insertBefore(newrow, tbodyobj.childNodes[toprow]);
-
-        // if inserted a row with starting rowspans, replace rows for the largest rowspan
+        if (toprow < tbodyobj.childNodes.length) {
+            tbodyobj.insertBefore(newrow, tbodyobj.childNodes[toprow]);
+        } else {
+            tbodyobj.appendChild(newrow);
+        }
 
+        // If inserted a row with starting rowspans or continuation spans, refresh rows for largest span
         maxrowspan = 1;
         newrownum = context.rowpanes[rowpane].first;
 
@@ -4032,7 +4064,16 @@
                 colnum++
             ) {
                 coord = SocialCalc.crToCoord(colnum, newrownum);
-                if (context.cellskip[coord]) continue;
+                if (context.cellskip && context.cellskip[coord]) {
+                    var originCoord = context.cellskip[coord];
+                    var originCell = sheetobj.cells[originCoord];
+                    var originCR = context.coordToCR ? context.coordToCR[originCoord] : null;
+                    if (originCell && originCR) {
+                        var remaining = (originCR.row - 0 + originCell.rowspan) - newrownum;
+                        if (remaining > maxrowspan) maxrowspan = remaining;
+                    }
+                    continue;
+                }
                 cell = sheetobj.cells[coord];
                 if (cell && cell.rowspan > maxrowspan) maxrowspan = cell.rowspan;
             }
@@ -4040,15 +4081,17 @@
 
         if (maxrowspan > 1) {
             for (rownum = 1; rownum < maxrowspan; rownum++) {
-                if (rownum + newrownum > context.rowpanes[rowpane].last) break;
-                newrow = context.RenderRow(rownum + newrownum, rowpane);
+                var targetRow = rownum + newrownum;
+                if (targetRow > context.rowpanes[rowpane].last) break;
+                newrow = context.RenderRow(targetRow, rowpane);
                 oldchild = tbodyobj.childNodes[toprow + rownum];
-                tbodyobj.replaceChild(newrow, oldchild);
+                if (oldchild && newrow) {
+                    tbodyobj.replaceChild(newrow, oldchild);
+                }
             }
         }
 
-        // if last row now includes rowspans or rowspans from above, update the size of those to remove deleted row
-
+        // If last row now includes rowspans or rowspans from above, update the size of those to remove deleted row
         bottomrownum = context.rowpanes[rowpane].last;
 
         for (colpane = 0; colpane < context.colpanes.length; colpane++) {
@@ -4060,26 +4103,34 @@
                 coord = SocialCalc.crToCoord(colnum, bottomrownum);
                 cell = sheetobj.cells[coord];
                 if (cell && cell.rowspan > 1) {
-                    rowneedsrefresh[bottomrownum] = true; // need to update this row
+                    rowneedsrefresh[bottomrownum] = true;
                     continue;
                 }
+                if (!context.cellskip) continue;
                 coord = context.cellskip[SocialCalc.crToCoord(colnum, bottomrownum)];
-                if (!coord) continue; // only look at spanned cells
-                rownum = context.coordToCR[coord].row - 0;
-                if (rownum == bottomrownum || rownum < context.rowpanes[rowpane].first)
-                    continue; // this row (colspan) or starts above pane
+                if (!coord) continue;
+                rownum = context.coordToCR ? (context.coordToCR[coord].row - 0) : null;
+                if (
+                    rownum === null ||
+                    rownum == bottomrownum ||
+                    rownum < context.rowpanes[rowpane].first
+                ) {
+                    continue;
+                }
                 cell = sheetobj.cells[coord];
-                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true; // remember row num to update
+                if (cell && cell.rowspan > 1) rowneedsrefresh[rownum] = true;
             }
         }
 
         for (rownum in rowneedsrefresh) {
-            newrow = context.RenderRow(rownum, rowpane);
+            newrow = context.RenderRow(rownum - 0, rowpane);
             oldchild =
                 tbodyobj.childNodes[
                 toprow + (rownum - context.rowpanes[rowpane].first)
                 ];
-            tbodyobj.replaceChild(newrow, oldchild);
+            if (oldchild && newrow) {
+                tbodyobj.replaceChild(newrow, oldchild);
+            }
         }
 
         return tableobj;

package/modules/init.js

@@ -8,9 +8,10 @@ if (typeof window !== "undefined" && window.SocialCalc) {
   SocialCalc = global.SocialCalc;
 } else {
   console.error("SocialCalc not found in global scope");
-  SocialCalc = {}; // Fallback to prevent errors
 }
 
+import { setupMouseListener } from "./listeners.js";
+
 export function initializeApp(data) {
   /* Initializes the spreadsheet */
   // Try multiple candidate IDs so the renderer can namespace its elements
@@ -39,6 +40,7 @@ export function initializeApp(data) {
   }
 
   spreadsheet.InitializeSpreadsheetControl(tableeditor, 0, 0, 0);
+  SocialCalc._activeEditor = spreadsheet.editor;
   spreadsheet.ExecuteCommand("redisplay", "");
 
   // Determine which workbook control id exists (string passed to constructor)
@@ -91,4 +93,5 @@ export function initializeApp(data) {
   }
 
   spreadsheet.DoOnResize();
+  setupMouseListener();
 }

package/modules/listeners.js

@@ -30,6 +30,7 @@ export function enableCellEditModal() {
   if (typeof window !== "undefined" && window.SocialCalc) {
     window.SocialCalc.isCellEditModalEnabled = () => true;
   }
+  setupMouseListener();
 }
 
 /**
@@ -57,6 +58,9 @@ export function toggleCellEditModal(show) {
   if (typeof window !== "undefined" && window.SocialCalc) {
     window.SocialCalc.isCellEditModalEnabled = () => _cellEditModalEnabled;
   }
+  if (_cellEditModalEnabled) {
+    setupMouseListener();
+  }
   return _cellEditModalEnabled;
 }
 
@@ -167,7 +171,15 @@ export function setupMouseListener() {
   if (typeof window !== "undefined" && window.SocialCalc) {
     SocialCalc = window.SocialCalc;
   }
-  if (!SocialCalc || !SocialCalc.EditorMouseInfo) return;
+  if (!SocialCalc || !SocialCalc.EditorMouseInfo) {
+    if (typeof window !== "undefined") {
+      setTimeout(setupMouseListener, 50);
+    }
+    return;
+  }
+
+  if (SocialCalc._customMouseListenerInstalled) return;
+  SocialCalc._customMouseListenerInstalled = true;
 
   const originalDblClick = SocialCalc.ProcessEditorDblClick;
 
@@ -232,8 +244,15 @@ export function setupMouseListener() {
     while (headerTd && headerTd.tagName !== "TD" && headerTd.tagName !== "TH" && headerTd !== document.body) {
       headerTd = headerTd.parentNode;
     }
-    if (!isColHeader && headerTd && headerTd.className && typeof headerTd.className === "string" && headerTd.className.indexOf("colname") !== -1) {
-      isColHeader = true;
+    if (!isColHeader && headerTd) {
+      if (headerTd.className && typeof headerTd.className === "string" && headerTd.className.indexOf("colname") !== -1) {
+        isColHeader = true;
+      } else if (headerTd.tagName === "TD" || headerTd.tagName === "TH") {
+        var headerTxt = (headerTd.textContent || "").trim().toUpperCase();
+        if (/^[A-Z]{1,2}$/.test(headerTxt)) {
+          isColHeader = true;
+        }
+      }
     }
 
     if (isRowColHeadersEnabled() && isColHeader) {
@@ -292,7 +311,11 @@ export function setupMouseListener() {
 
     // Toggle Cell Callback
     if (SocialCalc.Callbacks && SocialCalc.Callbacks.ToggleCell) {
-      SocialCalc.Callbacks.ToggleCell(result.coord);
+      try {
+        SocialCalc.Callbacks.ToggleCell(result.coord);
+      } catch (err) {
+        // Ignore toggle cell errors in custom environments
+      }
     }
 
     // Move ECell (Updates Selection)
@@ -367,7 +390,7 @@ export function setupMouseListener() {
   const originalKeyPress = SocialCalc.ProcessKeyPress;
 
   SocialCalc.ProcessKeyDown = function (e) {
-    const isModalOpen = !!document.querySelector(".sc-cell-edit-backdrop");
+    const isModalOpen = !!document.querySelector(".sc-cell-modal-backdrop, .sc-cell-edit-backdrop, .sc-modal-container");
     const activeElement = document.activeElement;
     const isTypingInInput =
       activeElement &&
@@ -386,7 +409,7 @@ export function setupMouseListener() {
   };
 
   SocialCalc.ProcessKeyPress = function (e) {
-    const isModalOpen = !!document.querySelector(".sc-cell-edit-backdrop");
+    const isModalOpen = !!document.querySelector(".sc-cell-modal-backdrop, .sc-cell-edit-backdrop, .sc-modal-container");
     const activeElement = document.activeElement;
     const isTypingInInput =
       activeElement &&
@@ -416,8 +439,8 @@ function triggerCustomModal(editor) {
   if (!editor || !editor.ecell) return;
 
   const coord = editor.ecell.coord;
-  const sheet = editor.context.sheetobj;
-  const cell = sheet.GetAssuredCell(coord);
+  const sheet = editor.context ? editor.context.sheetobj : null;
+  const cell = sheet && sheet.GetAssuredCell ? sheet.GetAssuredCell(coord) : null;
 
   // Hide the native input box and cancel its timer
   if (editor.inputBox) {
@@ -442,25 +465,35 @@ function triggerCustomModal(editor) {
 
   // Determine initial text
   let initialText = "";
-  if (cell.datavalue !== undefined && cell.datavalue !== null) {
-    initialText = String(cell.datavalue);
-  } else if (cell.displaystring !== undefined && cell.displaystring !== null) {
-    initialText = String(cell.displaystring);
+  if (cell) {
+    if (cell.formula) {
+      initialText = "=" + cell.formula;
+    } else if (cell.datavalue !== undefined && cell.datavalue !== null) {
+      initialText = String(cell.datavalue);
+    } else if (cell.displaystring !== undefined && cell.displaystring !== null) {
+      initialText = String(cell.displaystring);
+    }
+  }
+  if (!initialText && SocialCalc && SocialCalc.GetCellContents && sheet) {
+    initialText = SocialCalc.GetCellContents(sheet, coord) || "";
   }
 
   // Callback when user confirms edit in Modal
   const handleOk = (newValue) => {
     let cmd = "";
-    const isNum = !isNaN(Number(newValue)) && newValue.trim() !== "";
-
-    if (isNum) {
-      cmd = `set ${coord} value n ${newValue}`;
+    if (typeof newValue === "string" && newValue.startsWith("=")) {
+      cmd = `set ${coord} formula ${newValue.slice(1)}`;
     } else {
-      const isHtml = /<[a-z][\s\S]*>/i.test(newValue);
-      if (isHtml) {
-        cmd = `set ${coord} text th ${newValue}\nset ${coord} textvalueformat text-html`;
+      const isNum = !isNaN(Number(newValue)) && newValue.trim() !== "";
+      if (isNum) {
+        cmd = `set ${coord} value n ${newValue}`;
       } else {
-        cmd = `set ${coord} text t ${newValue}`;
+        const isHtml = /<[a-z][\s\S]*>/i.test(newValue);
+        if (isHtml) {
+          cmd = `set ${coord} text th ${newValue}\nset ${coord} textvalueformat text-html`;
+        } else {
+          cmd = `set ${coord} text t ${newValue}`;
+        }
       }
     }
 
@@ -529,3 +562,8 @@ export function setupCellChangeListener(callback) {
   };
 }
 
+// Auto-initialize mouse listener if in browser environment
+if (typeof window !== "undefined") {
+  setupMouseListener();
+}
+

package/modules/plugin-manager.js

@@ -31,6 +31,9 @@ export function getActiveEditor() {
   if (typeof window !== "undefined" && window.SocialCalc) {
     SocialCalc = window.SocialCalc;
   }
+  if (SocialCalc && SocialCalc._activeEditor) {
+    return SocialCalc._activeEditor;
+  }
   if (SocialCalc && SocialCalc.GetCurrentWorkBookControl) {
     const ctrl = SocialCalc.GetCurrentWorkBookControl();
     if (ctrl && ctrl.workbook && ctrl.workbook.spreadsheet && ctrl.workbook.spreadsheet.editor) {

package/modules/row-col-headers.js

@@ -114,14 +114,17 @@ export function updateColumnResizeHandlePosition() {
 
   // 1. Try finding exact header cell from DOM for pixel-perfect coordinates
   if (editor.fullgrid) {
-    const cells = editor.fullgrid.querySelectorAll("td");
+    const cells = editor.fullgrid.querySelectorAll("td, th");
     for (let i = 0; i < cells.length; i++) {
       const c = cells[i];
-      if (c.textContent && c.textContent.trim() === colLetter && c.className && typeof c.className === "string" && c.className.indexOf("colname") !== -1) {
+      const txt = c.textContent ? c.textContent.trim() : "";
+      if (txt === colLetter) {
         const rect = c.getBoundingClientRect();
-        colRight = Math.round(rect.right);
-        headerBottom = Math.round(rect.bottom);
-        break;
+        if (rect.width > 0 && rect.height > 0) {
+          colRight = Math.round(rect.right);
+          headerBottom = Math.round(rect.bottom);
+          break;
+        }
       }
     }
   }
@@ -151,8 +154,24 @@ export function updateColumnResizeHandlePosition() {
     handle = document.createElement("div");
     handle.id = "sc-col-resize-corner-handle";
     handle.className = "sc-col-resize-corner-handle";
+    handle.style.position = "fixed";
+    handle.style.zIndex = "99999";
+    handle.style.width = "24px";
+    handle.style.height = "24px";
+    handle.style.backgroundColor = "#2563eb";
+    handle.style.color = "#ffffff";
+    handle.style.borderRadius = "50%";
+    handle.style.border = "2px solid #ffffff";
+    handle.style.boxShadow = "0 2px 8px rgba(0,0,0,0.35)";
+    handle.style.display = "flex";
+    handle.style.alignItems = "center";
+    handle.style.justifyContent = "center";
+    handle.style.cursor = "col-resize";
+    handle.style.touchAction = "none";
+    handle.style.transform = "translate(-50%, -50%)";
+    handle.style.pointerEvents = "auto";
     handle.innerHTML = `
-      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
         <polyline points="8 4 4 8 8 12"></polyline>
         <polyline points="16 4 20 8 16 12"></polyline>
         <line x1="4" y1="8" x2="20" y2="8"></line>
@@ -497,8 +516,16 @@ export function isRowColHeadersEnabled() {
 
 // Window scroll and resize listeners to reposition the handle
 if (typeof window !== "undefined") {
+  SocialCalc = window.SocialCalc = window.SocialCalc || {};
+  SocialCalc.selectColumn = selectColumn;
+  SocialCalc.selectRow = selectRow;
+  SocialCalc.showColumnResizeHandle = showColumnResizeHandle;
+  SocialCalc.hideColumnResizeHandle = hideColumnResizeHandle;
+  SocialCalc.updateColumnResizeHandlePosition = updateColumnResizeHandlePosition;
+
   window.addEventListener("resize", updateColumnResizeHandlePosition);
   window.addEventListener("socialcalc:horizontal-scroll", updateColumnResizeHandlePosition);
+  window.addEventListener("socialcalc:scroll", updateColumnResizeHandlePosition);
 }
 
 // Register as a plugin in the plugin manager

package/modules/touch-scroll.js

@@ -108,8 +108,8 @@ function getEditor() {
 
 function editorCanScroll(editor) {
     if (!editor) return false;
-    if (editor.busy) return false;
-    if (editor.state !== "start") return false;
+    // Do not block touch scrolling during micro-renders or position steps
+    if (editor.busy && editor.busy !== true && editor.busy !== "render") return false;
     return true;
 }
 
@@ -175,14 +175,16 @@ function doScroll(editor, rowDelta, colDelta) {
 // ─── Replacement Touch Handlers ──────────────────────────────────────────────
 
 function handleTouchStart(event) {
-    // Only handle single-finger touches
-    if (event.touches.length !== 1) return;
-
-    const touch = event.touches[0];
-
     // Cancel any running momentum
     cancelMomentum();
 
+    // Prevent default browser multi-touch behaviors (pinch-to-zoom, 2-finger page drag)
+    if (event.touches.length > 1) {
+        if (event.cancelable) event.preventDefault();
+    }
+
+    const touch = event.touches[0];
+
     _gesture.active = true;
     _gesture.isScrolling = false;
     _gesture.startX = touch.pageX;
@@ -193,41 +195,36 @@ function handleTouchStart(event) {
     _gesture.colDebt = 0;
     _gesture.velocitySamples = [];
     _gesture.startTime = performance.now();
-
-    // Do NOT call preventDefault here — we decide in touchmove whether this
-    // is a scroll or a tap. If it's a tap we want the event to flow normally.
+    _gesture.initialTouchCount = event.touches.length;
 }
 
 function handleTouchMove(event) {
-    if (!_gesture.active) return;
-    if (event.touches.length !== 1) return;
+    // CRITICAL: Always prevent default native browser scroll / container pan on the sheet
+    // so the entire outer sheet box is NEVER dragged or moved in any direction
+    if (event.cancelable) event.preventDefault();
+    event.stopPropagation();
+
+    if (!_gesture.active || !event.touches.length) return;
 
     const touch = event.touches[0];
-    const dx = _gesture.lastX - touch.pageX;   // positive = finger moved left  (scroll right)
     const dy = _gesture.lastY - touch.pageY;   // positive = finger moved up    (scroll down)
 
     // Check deadzone (only once per gesture)
     if (!_gesture.isScrolling) {
-        const totalDX = Math.abs(touch.pageX - _gesture.startX);
         const totalDY = Math.abs(touch.pageY - _gesture.startY);
-        if (totalDX < TOUCH_SCROLL_CONFIG.scrollDeadzone &&
-            totalDY < TOUCH_SCROLL_CONFIG.scrollDeadzone) {
+        if (totalDY < TOUCH_SCROLL_CONFIG.scrollDeadzone) {
             return; // still within deadzone — not scrolling yet
         }
         _gesture.isScrolling = true;
     }
 
-    // Prevent native scroll / browser actions once we own the gesture
-    if (event.cancelable) event.preventDefault();
-    event.stopPropagation();
-
-    // Track velocity (raw pixels)
+    // Track velocity (raw pixels, vertical only)
     addVelocitySample(0, dy);
 
-    // Accumulate fractional row debt (vertical only)
+    // Accumulate fractional row debt (strictly vertical)
     _gesture.rowDebt += dy / TOUCH_SCROLL_CONFIG.pixelsPerRow;
 
-    // Scroll integer rows (strictly vertical)
+    // Scroll integer rows (strictly vertical - colStep is always 0)
     const rowStep = Math.trunc(_gesture.rowDebt);
 
     if (rowStep !== 0) {
@@ -244,12 +241,21 @@ function handleTouchMove(event) {
 
 function handleTouchEnd(event) {
     if (!_gesture.active) return;
+
+    // If fingers still remain on screen, don't end gesture yet
+    if (event.touches && event.touches.length > 0) {
+        const touch = event.touches[0];
+        _gesture.lastX = touch.pageX;
+        _gesture.lastY = touch.pageY;
+        return;
+    }
+
     _gesture.active = false;
 
     const elapsed = performance.now() - _gesture.startTime;
 
-    // If we never crossed the deadzone, treat as a tap
-    if (!_gesture.isScrolling) {
+    // If we never crossed the deadzone and started with exactly 1 finger, treat as a tap
+    if (!_gesture.isScrolling && _gesture.initialTouchCount === 1) {
         handleTap(event, elapsed);
         return;
     }
@@ -308,6 +314,51 @@ function handleTouchCancel() {
 function handleTap(event, elapsed) {
     const now = performance.now();
     const touchinfo = SocialCalc.TouchInfo;
+    const touch = (event.changedTouches && event.changedTouches[0]) || (event.touches && event.touches[0]);
+
+    // Check if user tapped a column header, row header, or resize handle
+    if (touch && typeof document !== "undefined") {
+        const tappedEl = document.elementFromPoint(touch.clientX, touch.clientY);
+        if (tappedEl) {
+            // If tapped the resize handle itself, let drag handler take care of it
+            if (tappedEl.id === "sc-col-resize-corner-handle" || (tappedEl.closest && tappedEl.closest("#sc-col-resize-corner-handle"))) {
+                return;
+            }
+
+            // Check for Column or Row Header Cell
+            let headerTd = tappedEl;
+            while (headerTd && headerTd.tagName !== "TD" && headerTd.tagName !== "TH" && headerTd !== document.body) {
+                headerTd = headerTd.parentNode;
+            }
+            if (headerTd && (headerTd.tagName === "TD" || headerTd.tagName === "TH")) {
+                const txt = headerTd.textContent ? headerTd.textContent.trim().toUpperCase() : "";
+                if (/^[A-Z]{1,2}$/.test(txt)) {
+                    let colNum = 0;
+                    for (let i = 0; i < txt.length; i++) {
+                        colNum = colNum * 26 + (txt.charCodeAt(i) - 64);
+                    }
+                    if (colNum > 0 && SocialCalc.selectColumn) {
+                        SocialCalc.selectColumn(colNum);
+                        return;
+                    }
+                } else if (/^[0-9]+$/.test(txt)) {
+                    const rowNum = parseInt(txt, 10);
+                    if (rowNum > 0 && SocialCalc.selectRow) {
+                        SocialCalc.selectRow(rowNum);
+                        window.dispatchEvent(new CustomEvent("socialcalc:row-header-click", {
+                            detail: {
+                                rowNum: rowNum,
+                                clientX: touch.clientX,
+                                clientY: touch.clientY
+                            }
+                        }));
+                        return;
+                    }
+                }
+            }
+        }
+    }
+
     const wobj = SocialCalc.FindTouchElement
         ? SocialCalc.FindTouchElement(event)
         : null;
@@ -387,14 +438,26 @@ export function enableTouchScroll() {
             el.removeEventListener("touchstart", _origProcessTouchStart, true);
             el.removeEventListener("touchmove", _origProcessTouchMove, true);
 
-            // Add new listeners — touchmove must be non-passive so we can preventDefault
-            el.addEventListener("touchstart", handleTouchStart, { passive: true });
+            // Add new listeners — both touchstart and touchmove non-passive so we can preventDefault
+            el.addEventListener("touchstart", handleTouchStart, { passive: false });
             el.addEventListener("touchmove", handleTouchMove, { passive: false });
             el.addEventListener("touchend", handleTouchEnd, { passive: true });
             el.addEventListener("touchcancel", handleTouchCancel, { passive: true });
         }
     }
 
+    // Lock outer containers against native touch dragging / pan
+    const outerCandidates = ["container", "tableeditor", "te_griddiv"];
+    for (const cid of outerCandidates) {
+        const cel = document.getElementById(cid);
+        if (cel && !cel.__touchLocked) {
+            cel.__touchLocked = true;
+            cel.addEventListener("touchmove", (e) => {
+                if (e.cancelable) e.preventDefault();
+            }, { passive: false });
+        }
+    }
+
     _enabled = true;
     console.log("[TouchScroll] Smooth touch scrolling enabled");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "socialcalc-ai",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Modernized, modular spreadsheet calculation engine and React/Ionic UI suite with AI formula and template capabilities.",
   "type": "module",
   "main": "index.js",