@trops/dash-core 0.1.81 → 0.1.82

package/dist/index.js

@@ -11947,6 +11947,30 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
     } catch (e) {
     }
   }
+  function handleChangeRowSizing(gridContainerId, rowNumber, mode, multiplier) {
+    try {
+      var dashboard = new DashboardModel(currentWorkspace);
+      dashboard.changeRowMode(gridContainerId, rowNumber, mode);
+      if (multiplier !== undefined) {
+        dashboard.changeRowHeight(gridContainerId, rowNumber, multiplier);
+      }
+      var newWorkspace = dashboard.workspace();
+      setCurrentWorkspace(newWorkspace);
+    } catch (e) {
+    }
+  }
+  function handleChangeColMode(gridContainerId, colNumber, mode) {
+    try {
+      var dashboard = new DashboardModel(currentWorkspace);
+      var result = dashboard.changeColMode(gridContainerId, colNumber, mode);
+      if (result) {
+        var newWorkspace = dashboard.workspace();
+        setCurrentWorkspace(newWorkspace);
+      } else {
+      }
+    } catch (e) {
+    }
+  }
 
   /**
    * handle the click of a cell in a grid that does not contain a widget yet
@@ -12033,6 +12057,8 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
             onDeleteGridColumn: handleDeleteGridColumn,
             onChangeRowHeight: handleChangeRowHeight,
             onChangeRowMode: handleChangeRowMode,
+            onChangeRowSizing: handleChangeRowSizing,
+            onChangeColMode: handleChangeColMode,
             onMoveWidgetToCell: handleMoveWidgetToCell,
             onWidgetPopout: onWidgetPopout
           }, "layout-drag-".concat(dashboardId)), preview === false && editMode === "all" && /*#__PURE__*/jsxRuntime.jsx(LayoutDragBuilderEdit, {
@@ -12079,6 +12105,8 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
             onDeleteGridColumn: handleDeleteGridColumn,
             onChangeRowHeight: handleChangeRowHeight,
             onChangeRowMode: handleChangeRowMode,
+            onChangeRowSizing: handleChangeRowSizing,
+            onChangeColMode: handleChangeColMode,
             onMoveWidgetToCell: handleMoveWidgetToCell,
             onDropWidgetFromSidebar: handleDropWidgetFromSidebar
           }, "layout-drag-edit-".concat(dashboardId))]
@@ -12172,6 +12200,10 @@ var LayoutDragBuilder = function LayoutDragBuilder(_ref) {
     onChangeRowHeight = _ref$onChangeRowHeigh === void 0 ? null : _ref$onChangeRowHeigh,
     _ref$onChangeRowMode = _ref.onChangeRowMode,
     onChangeRowMode = _ref$onChangeRowMode === void 0 ? null : _ref$onChangeRowMode,
+    _ref$onChangeRowSizin = _ref.onChangeRowSizing,
+    onChangeRowSizing = _ref$onChangeRowSizin === void 0 ? null : _ref$onChangeRowSizin,
+    _ref$onChangeColMode = _ref.onChangeColMode,
+    onChangeColMode = _ref$onChangeColMode === void 0 ? null : _ref$onChangeColMode,
     _ref$onWidgetPopout = _ref.onWidgetPopout,
     onWidgetPopout = _ref$onWidgetPopout === void 0 ? null : _ref$onWidgetPopout;
   return isDraggable === true ? /*#__PURE__*/jsxRuntime.jsx(reactDnd.DndProvider, {
@@ -12205,6 +12237,8 @@ var LayoutDragBuilder = function LayoutDragBuilder(_ref) {
       onDeleteGridColumn: onDeleteGridColumn,
       onChangeRowHeight: onChangeRowHeight,
       onChangeRowMode: onChangeRowMode,
+      onChangeRowSizing: onChangeRowSizing,
+      onChangeColMode: onChangeColMode,
       onWidgetPopout: onWidgetPopout
     })
   }, "dnd-provider") : _renderLayout({
@@ -12236,6 +12270,7 @@ var LayoutDragBuilder = function LayoutDragBuilder(_ref) {
     onDeleteGridColumn: onDeleteGridColumn,
     onChangeRowHeight: onChangeRowHeight,
     onChangeRowMode: onChangeRowMode,
+    onChangeColMode: onChangeColMode,
     onWidgetPopout: onWidgetPopout
   });
 };
@@ -12286,6 +12321,10 @@ var LayoutDragBuilderEdit = function LayoutDragBuilderEdit(_ref) {
     onChangeRowHeight = _ref$onChangeRowHeigh === void 0 ? null : _ref$onChangeRowHeigh,
     _ref$onChangeRowMode = _ref.onChangeRowMode,
     onChangeRowMode = _ref$onChangeRowMode === void 0 ? null : _ref$onChangeRowMode,
+    _ref$onChangeRowSizin = _ref.onChangeRowSizing,
+    onChangeRowSizing = _ref$onChangeRowSizin === void 0 ? null : _ref$onChangeRowSizin,
+    _ref$onChangeColMode = _ref.onChangeColMode,
+    onChangeColMode = _ref$onChangeColMode === void 0 ? null : _ref$onChangeColMode,
     _ref$onMoveWidgetToCe = _ref.onMoveWidgetToCell,
     onMoveWidgetToCell = _ref$onMoveWidgetToCe === void 0 ? null : _ref$onMoveWidgetToCe,
     _ref$onDropWidgetFrom = _ref.onDropWidgetFromSidebar,
@@ -12325,6 +12364,8 @@ var LayoutDragBuilderEdit = function LayoutDragBuilderEdit(_ref) {
     onDeleteGridColumn: onDeleteGridColumn,
     onChangeRowHeight: onChangeRowHeight,
     onChangeRowMode: onChangeRowMode,
+    onChangeRowSizing: onChangeRowSizing,
+    onChangeColMode: onChangeColMode,
     onMoveWidgetToCell: onMoveWidgetToCell,
     onDropWidgetFromSidebar: onDropWidgetFromSidebar
   });
@@ -14552,11 +14593,13 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     _ref3$onAddGridColumn = _ref3.onAddGridColumn,
     onAddGridColumn = _ref3$onAddGridColumn === void 0 ? null : _ref3$onAddGridColumn,
     _ref3$onDeleteGridCol = _ref3.onDeleteGridColumn,
-    onDeleteGridColumn = _ref3$onDeleteGridCol === void 0 ? null : _ref3$onDeleteGridCol,
-    _ref3$onChangeRowHeig = _ref3.onChangeRowHeight,
-    onChangeRowHeight = _ref3$onChangeRowHeig === void 0 ? null : _ref3$onChangeRowHeig,
-    _ref3$onChangeRowMode = _ref3.onChangeRowMode,
-    onChangeRowMode = _ref3$onChangeRowMode === void 0 ? null : _ref3$onChangeRowMode,
+    onDeleteGridColumn = _ref3$onDeleteGridCol === void 0 ? null : _ref3$onDeleteGridCol;
+    _ref3.onChangeRowHeight;
+    _ref3.onChangeRowMode;
+    var _ref3$onChangeRowSizi = _ref3.onChangeRowSizing,
+    onChangeRowSizing = _ref3$onChangeRowSizi === void 0 ? null : _ref3$onChangeRowSizi,
+    _ref3$onChangeColMode = _ref3.onChangeColMode,
+    onChangeColMode = _ref3$onChangeColMode === void 0 ? null : _ref3$onChangeColMode,
     _ref3$onMoveWidgetToC = _ref3.onMoveWidgetToCell,
     onMoveWidgetToCell = _ref3$onMoveWidgetToC === void 0 ? null : _ref3$onMoveWidgetToC,
     _ref3$onDropWidgetFro = _ref3.onDropWidgetFromSidebar,
@@ -14636,26 +14679,6 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     return ((_item$grid$rowModes = item.grid.rowModes) === null || _item$grid$rowModes === void 0 ? void 0 : _item$grid$rowModes[String(row)]) || "fixed";
   }
 
-  // Unified cycle: shrink → grow → fixed 1x → fixed 2x → fixed 3x → shrink
-  function handleCycleRowSizing(row) {
-    var mode = getRowMode(row);
-    var mult = getRowMultiplier(row);
-    if (mode === "shrink") {
-      // shrink → grow
-      if (onChangeRowMode) onChangeRowMode(id, row, "grow");
-    } else if (mode === "grow") {
-      // grow → fixed 1x
-      if (onChangeRowMode) onChangeRowMode(id, row, "fixed");
-    } else {
-      // fixed: cycle 1x → 2x → 3x → shrink
-      if (mult >= 3) {
-        if (onChangeRowMode) onChangeRowMode(id, row, "shrink");
-      } else {
-        if (onChangeRowHeight) onChangeRowHeight(id, row, mult + 1);
-      }
-    }
-  }
-
   // Get display label and color for current row sizing
   function getRowSizingDisplay(row) {
     var mode = getRowMode(row);
@@ -14677,26 +14700,224 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     };
   }
 
-  // Modal state for grid operations
-  var _useState = React.useState(false),
+  // Compute column template tracks respecting colModes
+  function getColTemplate(grid) {
+    var modes = grid.colModes || {};
+    var tracks = [];
+    for (var c = 1; c <= grid.cols; c++) {
+      var mode = modes[String(c)] || "grow";
+      switch (mode) {
+        case "shrink":
+          tracks.push("auto");
+          break;
+        case "1/4":
+          tracks.push("25%");
+          break;
+        case "1/3":
+          tracks.push("33.333%");
+          break;
+        case "1/2":
+          tracks.push("50%");
+          break;
+        case "2/3":
+          tracks.push("66.667%");
+          break;
+        default:
+          tracks.push("minmax(0, 1fr)");
+          break;
+      }
+    }
+    return tracks.join(" ");
+  }
+  function hasExplicitColModes() {
+    if (!hasGrid) return false;
+    var modes = item.grid.colModes;
+    return modes && Object.keys(modes).length > 0;
+  }
+  function getColMode(col) {
+    var _item$grid$colModes;
+    if (!hasGrid) return "grow";
+    return ((_item$grid$colModes = item.grid.colModes) === null || _item$grid$colModes === void 0 ? void 0 : _item$grid$colModes[String(col)]) || "grow";
+  }
+  function getColSizingDisplay(col) {
+    var mode = getColMode(col);
+    if (mode === "shrink") return {
+      label: "S",
+      color: "text-amber-400",
+      hoverBg: "hover:bg-amber-400/10"
+    };
+    if (mode === "1/4") return {
+      label: "1/4",
+      color: "text-blue-400",
+      hoverBg: "hover:bg-blue-400/10"
+    };
+    if (mode === "1/3") return {
+      label: "1/3",
+      color: "text-blue-400",
+      hoverBg: "hover:bg-blue-400/10"
+    };
+    if (mode === "1/2") return {
+      label: "1/2",
+      color: "text-blue-400",
+      hoverBg: "hover:bg-blue-400/10"
+    };
+    if (mode === "2/3") return {
+      label: "2/3",
+      color: "text-blue-400",
+      hoverBg: "hover:bg-blue-400/10"
+    };
+    // default: grow
+    return {
+      label: "G",
+      color: "text-green-400",
+      hoverBg: "hover:bg-green-400/10"
+    };
+  }
+
+  // Sizing popover state
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    mergeModalOpen = _useState2[0],
-    setMergeModalOpen = _useState2[1];
-  var _useState3 = React.useState([]),
+    sizingPopover = _useState2[0],
+    setSizingPopover = _useState2[1]; // { type: "row"|"col", index: number }
+  var popoverRef = React.useRef(null);
+  var popoverTriggerRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!sizingPopover) return;
+    function handleClickOutside(e) {
+      if (popoverRef.current && !popoverRef.current.contains(e.target) && popoverTriggerRef.current && !popoverTriggerRef.current.contains(e.target)) {
+        setSizingPopover(null);
+      }
+    }
+    function handleEscape(e) {
+      if (e.key === "Escape") setSizingPopover(null);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [sizingPopover]);
+  var ROW_OPTIONS = [{
+    mode: "shrink",
+    label: "S"
+  }, {
+    mode: "grow",
+    label: "G"
+  }, {
+    mode: "fixed-1",
+    label: "1x"
+  }, {
+    mode: "fixed-2",
+    label: "2x"
+  }, {
+    mode: "fixed-3",
+    label: "3x"
+  }];
+  var COL_OPTIONS = [{
+    mode: "grow",
+    label: "G"
+  }, {
+    mode: "shrink",
+    label: "S"
+  }, {
+    mode: "1/4",
+    label: "1/4"
+  }, {
+    mode: "1/3",
+    label: "1/3"
+  }, {
+    mode: "1/2",
+    label: "1/2"
+  }, {
+    mode: "2/3",
+    label: "2/3"
+  }];
+  function getActiveRowOption(row) {
+    var mode = getRowMode(row);
+    var mult = getRowMultiplier(row);
+    if (mode === "shrink") return "shrink";
+    if (mode === "grow") return "grow";
+    return "fixed-".concat(mult);
+  }
+  function handleRowOptionSelect(row, optionMode) {
+    if (onChangeRowSizing) {
+      if (optionMode === "shrink" || optionMode === "grow") {
+        onChangeRowSizing(id, row, optionMode);
+      } else if (optionMode.startsWith("fixed-")) {
+        var mult = Number(optionMode.split("-")[1]);
+        onChangeRowSizing(id, row, "fixed", mult);
+      }
+    }
+  }
+  function handleColOptionSelect(col, optionMode) {
+    if (onChangeColMode) onChangeColMode(id, col, optionMode);
+  }
+  function getOptionColor(optionMode, type) {
+    if (type === "row") {
+      if (optionMode === "shrink") return "text-amber-400";
+      if (optionMode === "grow") return "text-green-400";
+      return "text-blue-400";
+    }
+    // col
+    if (optionMode === "grow") return "text-green-400";
+    if (optionMode === "shrink") return "text-amber-400";
+    return "text-blue-400";
+  }
+  function renderSizingPopover(type, index, triggerEl) {
+    if (!sizingPopover || sizingPopover.type !== type || sizingPopover.index !== index) return null;
+    var options = type === "row" ? ROW_OPTIONS : COL_OPTIONS;
+    var activeMode = type === "row" ? getActiveRowOption(index) : getColMode(index);
+    var isRow = type === "row";
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: popoverRef,
+      className: "absolute z-50 bg-gray-800 border border-gray-600 rounded-lg shadow-xl p-1 flex flex-row gap-0.5",
+      style: isRow ? {
+        left: "100%",
+        top: "50%",
+        transform: "translateY(-50%)",
+        marginLeft: 4
+      } : {
+        top: "100%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        marginTop: 4
+      },
+      children: options.map(function (opt) {
+        var isActive = opt.mode === activeMode;
+        var color = getOptionColor(opt.mode, type);
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          className: "px-1.5 py-0.5 rounded text-[10px] font-mono font-bold transition-all whitespace-nowrap ".concat(isActive ? "".concat(color, " bg-white/20") : "text-gray-400 hover:text-gray-200 hover:bg-white/10"),
+          onClick: function onClick() {
+            if (type === "row") handleRowOptionSelect(index, opt.mode);else handleColOptionSelect(index, opt.mode);
+          },
+          title: opt.label,
+          children: opt.label
+        }, opt.mode);
+      })
+    });
+  }
+
+  // Modal state for grid operations
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedCellsForMerge = _useState4[0],
-    setSelectedCellsForMerge = _useState4[1];
-  var _useState5 = React.useState(null),
+    mergeModalOpen = _useState4[0],
+    setMergeModalOpen = _useState4[1];
+  var _useState5 = React.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    contextMenuCell = _useState6[0],
-    setContextMenuCell = _useState6[1];
-  var _useState7 = React.useState({
+    selectedCellsForMerge = _useState6[0],
+    setSelectedCellsForMerge = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    contextMenuCell = _useState8[0],
+    setContextMenuCell = _useState8[1];
+  var _useState9 = React.useState({
       x: 0,
       y: 0
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    contextMenuPosition = _useState8[0],
-    setContextMenuPosition = _useState8[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    contextMenuPosition = _useState0[0],
+    setContextMenuPosition = _useState0[1];
 
   // Grid operation handlers
   function handleInstantSplit(cellNumber, direction) {
@@ -14982,16 +15203,20 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
               label = _getRowSizingDisplay.label,
               color = _getRowSizingDisplay.color,
               hoverBg = _getRowSizingDisplay.hoverBg;
-            var mode = getRowMode(row);
-            var mult = getRowMultiplier(row);
-            var titleParts = mode === "shrink" ? "Shrink (auto)" : mode === "grow" ? "Grow (1fr)" : "Fixed ".concat(mult, "x");
-            return /*#__PURE__*/jsxRuntime.jsx("button", {
-              className: "w-5 h-5 flex items-center justify-center rounded text-[10px] ".concat(color, " opacity-40 hover:opacity-100 ").concat(hoverBg, " transition-all font-mono font-bold select-none"),
-              onClick: function onClick() {
-                return handleCycleRowSizing(row);
-              },
-              title: "Row sizing: ".concat(titleParts, " (click to cycle)"),
-              children: label
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "relative",
+              children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                ref: (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "row" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === row ? popoverTriggerRef : undefined,
+                className: "w-5 h-5 flex items-center justify-center rounded text-[10px] ".concat(color, " ").concat((sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "row" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === row ? "opacity-100" : "opacity-40", " hover:opacity-100 ").concat(hoverBg, " transition-all font-mono font-bold select-none"),
+                onClick: function onClick() {
+                  return setSizingPopover((sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "row" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === row ? null : {
+                    type: "row",
+                    index: row
+                  });
+                },
+                title: "Row sizing (click to change)",
+                children: label
+              }), renderSizingPopover("row", row)]
             });
           }(), /*#__PURE__*/jsxRuntime.jsx("button", {
             className: "w-5 h-5 flex items-center justify-center rounded text-[10px] text-gray-600 opacity-40 hover:opacity-100 hover:text-green-400 hover:bg-green-400/10 transition-all",
@@ -15074,7 +15299,27 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
           }), /*#__PURE__*/jsxRuntime.jsxs("span", {
             className: "text-[11px] text-gray-400 group-hover:text-gray-200 select-none font-mono font-medium",
             children: ["C", col]
-          }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          }), function () {
+            var _getColSizingDisplay = getColSizingDisplay(col),
+              label = _getColSizingDisplay.label,
+              color = _getColSizingDisplay.color,
+              hoverBg = _getColSizingDisplay.hoverBg;
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "relative",
+              children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                ref: (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "col" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === col ? popoverTriggerRef : undefined,
+                className: "w-5 h-5 flex items-center justify-center rounded text-[10px] ".concat(color, " ").concat((sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "col" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === col ? "opacity-100" : "opacity-40", " hover:opacity-100 ").concat(hoverBg, " transition-all font-mono font-bold select-none"),
+                onClick: function onClick() {
+                  return setSizingPopover((sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.type) === "col" && (sizingPopover === null || sizingPopover === void 0 ? void 0 : sizingPopover.index) === col ? null : {
+                    type: "col",
+                    index: col
+                  });
+                },
+                title: "Column sizing (click to change)",
+                children: label
+              }), renderSizingPopover("col", col)]
+            });
+          }(), /*#__PURE__*/jsxRuntime.jsx("button", {
             className: "w-5 h-5 flex items-center justify-center rounded text-[10px] text-gray-600 opacity-40 hover:opacity-100 hover:text-green-400 hover:bg-green-400/10 transition-all",
             onClick: function onClick() {
               return handleAddColumn(col);
@@ -15112,7 +15357,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "grid flex-1",
         style: {
-          gridTemplateColumns: "repeat(".concat(cols, ", 1fr)"),
+          gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(cols, ", 1fr)"),
           gap: GRID_GAP
         },
         children: colItems
@@ -15455,7 +15700,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
             className: "grid flex-1 min-h-24 p-4 gap-5",
             style: {
               gridTemplateRows: getRowTemplate(item.grid),
-              gridTemplateColumns: "repeat(".concat(item.grid.cols, ", 1fr)")
+              gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)")
             },
             children: renderGridCells()
           })]
@@ -15469,7 +15714,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
             className: "grid flex-1 p-4 gap-5",
             style: {
               gridTemplateRows: hasExplicitRowModes() ? getRowTemplate(item.grid) : "repeat(".concat(item.grid.rows, ", minmax(0, 1fr))"),
-              gridTemplateColumns: "repeat(".concat(item.grid.cols, ", 1fr)"),
+              gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)"),
               overflow: "hidden"
             },
             children: renderGridCells()
@@ -15569,7 +15814,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
     className: "grid w-full min-h-24 p-3 ".concat(item.grid.gap || "gap-2"),
     style: {
       gridTemplateRows: getRowTemplate(item.grid),
-      gridTemplateColumns: "repeat(".concat(item.grid.cols, ", 1fr)"),
+      gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)"),
       overflow: "auto"
     },
     children: renderGridCells()
@@ -15580,7 +15825,7 @@ var LayoutGridContainer = /*#__PURE__*/React.memo(function (_ref3) {
       className: "absolute inset-0 grid p-3 ".concat(item.grid.gap || "gap-2"),
       style: {
         gridTemplateRows: hasExplicitRowModes() ? getRowTemplate(item.grid) : "repeat(".concat(item.grid.rows, ", minmax(0, 1fr))"),
-        gridTemplateColumns: "repeat(".concat(item.grid.cols, ", 1fr)"),
+        gridTemplateColumns: hasExplicitColModes() ? getColTemplate(item.grid) : "repeat(".concat(item.grid.cols, ", 1fr)"),
         overflow: "hidden"
       },
       children: renderGridCells()
@@ -15674,6 +15919,10 @@ var _renderLayout = function renderLayout(_ref) {
     onChangeRowHeight = _ref$onChangeRowHeigh === void 0 ? null : _ref$onChangeRowHeigh,
     _ref$onChangeRowMode = _ref.onChangeRowMode,
     onChangeRowMode = _ref$onChangeRowMode === void 0 ? null : _ref$onChangeRowMode,
+    _ref$onChangeRowSizin = _ref.onChangeRowSizing,
+    onChangeRowSizing = _ref$onChangeRowSizin === void 0 ? null : _ref$onChangeRowSizin,
+    _ref$onChangeColMode = _ref.onChangeColMode,
+    onChangeColMode = _ref$onChangeColMode === void 0 ? null : _ref$onChangeColMode,
     _ref$onMoveWidgetToCe = _ref.onMoveWidgetToCell,
     onMoveWidgetToCell = _ref$onMoveWidgetToCe === void 0 ? null : _ref$onMoveWidgetToCe,
     _ref$onDropWidgetFrom = _ref.onDropWidgetFromSidebar,
@@ -15744,6 +15993,8 @@ var _renderLayout = function renderLayout(_ref) {
         onDeleteGridColumn: onDeleteGridColumn,
         onChangeRowHeight: onChangeRowHeight,
         onChangeRowMode: onChangeRowMode,
+        onChangeRowSizing: onChangeRowSizing,
+        onChangeColMode: onChangeColMode,
         onMoveWidgetToCell: onMoveWidgetToCell,
         onDropWidgetFromSidebar: onDropWidgetFromSidebar,
         onWidgetPopout: onWidgetPopout,
@@ -15782,6 +16033,8 @@ var _renderLayout = function renderLayout(_ref) {
           onDeleteGridColumn: onDeleteGridColumn,
           onChangeRowHeight: onChangeRowHeight,
           onChangeRowMode: onChangeRowMode,
+          onChangeRowSizing: onChangeRowSizing,
+          onChangeColMode: onChangeColMode,
           onMoveWidgetToCell: onMoveWidgetToCell,
           onDropWidgetFromSidebar: onDropWidgetFromSidebar,
           onWidgetPopout: onWidgetPopout
@@ -19283,6 +19536,40 @@ var DashboardModel = /*#__PURE__*/function () {
       }
     }
 
+    /**
+     * Change the sizing mode for a column
+     * @param {String} itemId The id of the grid container
+     * @param {Number} colNumber The column number (1-indexed)
+     * @param {String} mode The sizing mode: "grow" (default), "shrink", "1/4", "1/3", "1/2", "2/3"
+     * @returns {Object} Updated grid or null on error
+     */
+  }, {
+    key: "changeColMode",
+    value: function changeColMode(itemId, colNumber, mode) {
+      try {
+        var gridContainer = this.getComponentById(itemId);
+        if (!gridContainer || !gridContainer.grid) {
+          return null;
+        }
+        var grid = gridContainer.grid;
+        grid.colModes = grid.colModes || {};
+        if (mode === "grow" || !mode) {
+          delete grid.colModes[String(colNumber)];
+        } else {
+          grid.colModes[String(colNumber)] = mode;
+        }
+
+        // Clean up empty object
+        if (Object.keys(grid.colModes).length === 0) {
+          delete grid.colModes;
+        }
+        this.updateLayoutItem(gridContainer);
+        return grid;
+      } catch (e) {
+        return null;
+      }
+    }
+
     /**
      * Add a new column to the grid
      * @param {Number} itemId The id of the grid container
@@ -19321,6 +19608,19 @@ var DashboardModel = /*#__PURE__*/function () {
             hide: false
           };
         }
+
+        // Shift colModes keys right (columns after insertion point move +1)
+        if (gridContainer.grid.colModes) {
+          var shifted = {};
+          for (var _i13 = 0, _Object$entries6 = Object.entries(gridContainer.grid.colModes); _i13 < _Object$entries6.length; _i13++) {
+            var _Object$entries6$_i = _slicedToArray(_Object$entries6[_i13], 2),
+              key = _Object$entries6$_i[0],
+              mode = _Object$entries6$_i[1];
+            var colNum = Number(key);
+            shifted[String(colNum >= newColNumber ? colNum + 1 : colNum)] = mode;
+          }
+          gridContainer.grid.colModes = Object.keys(shifted).length > 0 ? shifted : undefined;
+        }
         this._normalizeGrid(gridContainer.grid);
         this.updateLayoutItem(gridContainer);
         return gridContainer.grid;
@@ -19368,6 +19668,20 @@ var DashboardModel = /*#__PURE__*/function () {
           }
         }
         gridContainer.grid.cols -= 1;
+
+        // Shift colModes keys left and remove the deleted column's entry
+        if (gridContainer.grid.colModes) {
+          var shifted = {};
+          for (var _i14 = 0, _Object$entries7 = Object.entries(gridContainer.grid.colModes); _i14 < _Object$entries7.length; _i14++) {
+            var _Object$entries7$_i = _slicedToArray(_Object$entries7[_i14], 2),
+              key = _Object$entries7$_i[0],
+              mode = _Object$entries7$_i[1];
+            var colNum = Number(key);
+            if (colNum === colNumber) continue;
+            shifted[String(colNum > colNumber ? colNum - 1 : colNum)] = mode;
+          }
+          gridContainer.grid.colModes = Object.keys(shifted).length > 0 ? shifted : undefined;
+        }
         this._normalizeGrid(gridContainer.grid);
         this.updateLayoutItem(gridContainer);
         return gridContainer.grid;