draggable-dashboard-lete-pro 1.5.4

package/dist/components/DraggableDashboard.js

@@ -0,0 +1,562 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["tiles", "setTiles", "dashboardId", "editMode", "theme", "fetchers"];
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { GRID_COLS, GRID_GAP, MIN_UNITS, MOBILE_BREAKPOINT } from '../constants';
+import { DashboardTile } from './DashboardTile';
+import { getPositions, setPositions } from '../services/dashboardTileDB';
+import { TileContent } from './TileContent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var DraggableDashboard = function DraggableDashboard(_ref) {
+  var tiles = _ref.tiles,
+    setTiles = _ref.setTiles,
+    dashboardId = _ref.dashboardId,
+    _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? true : _ref$editMode,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'light' : _ref$theme,
+    fetchers = _ref.fetchers,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMobile = _useState4[0],
+    setIsMobile = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragState = _useState6[0],
+    setDragState = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resizeState = _useState8[0],
+    setResizeState = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    activeTileId = _useState0[0],
+    setActiveTileId = _useState0[1];
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    maximizedTileId = _useState10[0],
+    setMaximizedTileId = _useState10[1];
+
+  // Delete confirmation state
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    tileToDeleteId = _useState12[0],
+    setTileToDeleteId = _useState12[1];
+
+  // Persistence management
+  useEffect(function () {
+    var initPositions = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var saved, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              _context.p = 0;
+              _context.n = 1;
+              return getPositions(dashboardId);
+            case 1:
+              saved = _context.v;
+              if (saved && Object.keys(saved).length > 0) {
+                setTiles(function (prev) {
+                  return prev.map(function (t) {
+                    return saved[t.id] ? _objectSpread(_objectSpread({}, t), saved[t.id]) : t;
+                  });
+                });
+              }
+              _context.n = 3;
+              break;
+            case 2:
+              _context.p = 2;
+              _t = _context.v;
+              console.warn('Could not load saved positions', _t);
+            case 3:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 2]]);
+      }));
+      return function initPositions() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initPositions();
+  }, [dashboardId, setTiles]);
+  var savePositions = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(currentTiles) {
+      var posMap, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            posMap = {};
+            currentTiles.forEach(function (t) {
+              posMap[t.id] = {
+                x: t.x,
+                y: t.y,
+                w: t.w,
+                h: t.h
+              };
+            });
+            _context2.p = 1;
+            _context2.n = 2;
+            return setPositions(dashboardId, posMap);
+          case 2:
+            _context2.n = 4;
+            break;
+          case 3:
+            _context2.p = 3;
+            _t2 = _context2.v;
+            console.warn('Could not save positions', _t2);
+          case 4:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[1, 3]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [dashboardId]);
+
+  // Responsive handling
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      if (containerRef.current) {
+        var width = containerRef.current.offsetWidth;
+        if (width > 0) {
+          setContainerWidth(width);
+        }
+        setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+      }
+    };
+    handleResize();
+    var observer = new ResizeObserver(handleResize);
+    if (containerRef.current) observer.observe(containerRef.current);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+      observer.disconnect();
+    };
+  }, []);
+  var cellSize = useMemo(function () {
+    if (isMobile) return 0;
+    var effectiveWidth = containerWidth || (typeof window !== 'undefined' ? window.innerWidth - 64 : 1100);
+    return Math.max(10, (effectiveWidth - (GRID_COLS - 1) * GRID_GAP) / GRID_COLS);
+  }, [containerWidth, isMobile]);
+
+  // Maximize Navigation
+  var navigateMaximized = function navigateMaximized(direction) {
+    if (!maximizedTileId || tiles.length === 0) return;
+    var currentIndex = tiles.findIndex(function (t) {
+      return t.id === maximizedTileId;
+    });
+    if (currentIndex === -1) return;
+    var nextIndex = direction === 'next' ? (currentIndex + 1) % tiles.length : (currentIndex - 1 + tiles.length) % tiles.length;
+    setMaximizedTileId(tiles[nextIndex].id);
+  };
+
+  // Collision & Placement Logic
+  var checkOverlap = function checkOverlap(a, b) {
+    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+  };
+  var findNearestAvailableSpot = function findNearestAvailableSpot(target, allTiles, excludeId) {
+    var others = allTiles.filter(function (t) {
+      return t.id !== excludeId;
+    });
+    if (!others.some(function (o) {
+      return checkOverlap(target, o);
+    })) return target;
+    for (var radius = 1; radius < 20; radius++) {
+      for (var dy = -radius; dy <= radius; dy++) {
+        var _loop = function _loop() {
+            if (Math.abs(dx) !== radius && Math.abs(dy) !== radius) return 0; // continue
+            var nx = target.x + dx;
+            var ny = target.y + dy;
+            if (nx >= 0 && nx <= GRID_COLS - target.w && ny >= 0) {
+              var potential = _objectSpread(_objectSpread({}, target), {}, {
+                x: nx,
+                y: ny
+              });
+              if (!others.some(function (o) {
+                return checkOverlap(potential, o);
+              })) return {
+                v: potential
+              };
+            }
+          },
+          _ret;
+        for (var dx = -radius; dx <= radius; dx++) {
+          _ret = _loop();
+          if (_ret === 0) continue;
+          if (_ret) return _ret.v;
+        }
+      }
+    }
+    return target;
+  };
+  var resolveCollisions = useCallback(function (movedTile, allTiles) {
+    var currentLayout = _toConsumableArray(allTiles);
+    var movedIdx = currentLayout.findIndex(function (t) {
+      return t.id === movedTile.id;
+    });
+    if (movedIdx === -1) return currentLayout;
+    currentLayout[movedIdx] = movedTile;
+    var hasOverlap = true;
+    var safetyCounter = 0;
+    while (hasOverlap && safetyCounter < 30) {
+      hasOverlap = false;
+      safetyCounter++;
+      for (var i = 0; i < currentLayout.length; i++) {
+        for (var j = 0; j < currentLayout.length; j++) {
+          if (i === j) continue;
+          if (checkOverlap(currentLayout[i], currentLayout[j])) {
+            hasOverlap = true;
+            var targetIdx = currentLayout[i].id === movedTile.id ? j : i;
+            currentLayout[targetIdx] = _objectSpread(_objectSpread({}, currentLayout[targetIdx]), findNearestAvailableSpot(currentLayout[targetIdx], currentLayout, currentLayout[targetIdx].id));
+          }
+        }
+      }
+    }
+    return currentLayout;
+  }, []);
+
+  // Event Handlers
+  var handleDragStart = function handleDragStart(e, tileId) {
+    if (!editMode) return;
+    var tile = tiles.find(function (t) {
+      return t.id === tileId;
+    });
+    if (!tile) return;
+    setActiveTileId(tileId);
+    setDragState({
+      tileId: tileId,
+      startX: e.clientX,
+      startY: e.clientY,
+      originalX: tile.x,
+      originalY: tile.y
+    });
+    e.target.setPointerCapture(e.pointerId);
+  };
+  var handleResizeStart = function handleResizeStart(e, tileId) {
+    if (!editMode) return;
+    var tile = tiles.find(function (t) {
+      return t.id === tileId;
+    });
+    if (!tile) return;
+    setActiveTileId(tileId);
+    setResizeState({
+      tileId: tileId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startWidth: tile.w,
+      startHeight: tile.h,
+      originalW: tile.w,
+      originalH: tile.h
+    });
+    e.target.setPointerCapture(e.pointerId);
+  };
+  var handlePointerMove = function handlePointerMove(e) {
+    if (!editMode || isMobile) return;
+    if (dragState) {
+      var gridDeltaX = Math.round((e.clientX - dragState.startX) / (cellSize + GRID_GAP));
+      var gridDeltaY = Math.round((e.clientY - dragState.startY) / (cellSize + GRID_GAP));
+      var tile = tiles.find(function (t) {
+        return t.id === dragState.tileId;
+      });
+      var newX = Math.max(0, Math.min(GRID_COLS - tile.w, dragState.originalX + gridDeltaX));
+      var newY = Math.max(0, dragState.originalY + gridDeltaY);
+      if (newX !== tile.x || newY !== tile.y) {
+        var movedTile = _objectSpread(_objectSpread({}, tile), {}, {
+          x: newX,
+          y: newY
+        });
+        var newLayout = resolveCollisions(movedTile, tiles);
+        setTiles(newLayout);
+      }
+    }
+    if (resizeState) {
+      var gridDeltaW = Math.round((e.clientX - resizeState.startX) / (cellSize + GRID_GAP));
+      var gridDeltaH = Math.round((e.clientY - resizeState.startY) / (cellSize + GRID_GAP));
+      var _tile = tiles.find(function (t) {
+        return t.id === resizeState.tileId;
+      });
+      var newW = Math.max(MIN_UNITS, Math.min(GRID_COLS - _tile.x, resizeState.originalW + gridDeltaW));
+      var newH = Math.max(MIN_UNITS, resizeState.originalH + gridDeltaH);
+      if (newW !== _tile.w || newH !== _tile.h) {
+        var resizedTile = _objectSpread(_objectSpread({}, _tile), {}, {
+          w: newW,
+          h: newH
+        });
+        var _newLayout = resolveCollisions(resizedTile, tiles);
+        setTiles(_newLayout);
+      }
+    }
+  };
+  var handlePointerUp = function handlePointerUp(e) {
+    if (dragState || resizeState) savePositions(tiles);
+    setDragState(null);
+    setResizeState(null);
+    setActiveTileId(null);
+  };
+  var confirmDelete = function confirmDelete() {
+    if (tileToDeleteId) {
+      var updated = tiles.filter(function (t) {
+        return t.id !== tileToDeleteId;
+      });
+      setTiles(updated);
+      savePositions(updated);
+      setTileToDeleteId(null);
+    }
+  };
+  var renderDeleteConfirmation = function renderDeleteConfirmation() {
+    if (!tileToDeleteId) return null;
+    var tile = tiles.find(function (t) {
+      return t.id === tileToDeleteId;
+    });
+    return /*#__PURE__*/_jsx("div", {
+      className: "fixed inset-0 z-[300] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-300",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "bg-white dark:bg-slate-900 w-full max-w-sm rounded-3xl shadow-2xl overflow-hidden p-8 flex flex-col items-center text-center space-y-6",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-2xl flex items-center justify-center text-red-500",
+          children: /*#__PURE__*/_jsx("svg", {
+            className: "w-8 h-8",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2.5,
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-4v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            })
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "space-y-2",
+          children: [/*#__PURE__*/_jsx("h3", {
+            className: "text-xl font-black text-slate-800 dark:text-white",
+            children: "Delete Widget?"
+          }), /*#__PURE__*/_jsxs("p", {
+            className: "text-sm text-slate-500 dark:text-slate-400",
+            children: ["Are you sure you want to remove \"", /*#__PURE__*/_jsx("span", {
+              className: "font-bold text-slate-700 dark:text-slate-200",
+              children: tile === null || tile === void 0 ? void 0 : tile.title
+            }), "\"? This action cannot be undone."]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "flex gap-3 w-full",
+          children: [/*#__PURE__*/_jsx("button", {
+            onClick: function onClick() {
+              return setTileToDeleteId(null);
+            },
+            className: "flex-1 px-4 py-3 text-xs font-black tracking-widest text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors uppercase",
+            children: "Cancel"
+          }), /*#__PURE__*/_jsx("button", {
+            onClick: confirmDelete,
+            className: "flex-1 px-4 py-3 text-xs font-black tracking-widest bg-red-500 text-white rounded-xl shadow-lg shadow-red-500/30 hover:bg-red-600 transition-all active:scale-95 uppercase",
+            children: "Delete"
+          })]
+        })]
+      })
+    });
+  };
+  var renderMaximizedView = function renderMaximizedView() {
+    if (!maximizedTileId) return null;
+    var tile = tiles.find(function (t) {
+      return t.id === maximizedTileId;
+    });
+    if (!tile) return null;
+    return /*#__PURE__*/_jsx("div", {
+      className: "fixed inset-0 z-[200] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-4 md:p-10 animate-in fade-in duration-300",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "bg-white dark:bg-slate-900 w-full max-w-6xl h-full max-h-[90vh] rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-300",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "px-8 h-20 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between shrink-0",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "flex items-center gap-6",
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: "flex items-center gap-2 bg-slate-100 dark:bg-slate-800 p-1.5 rounded-xl",
+              children: [/*#__PURE__*/_jsx("button", {
+                onClick: function onClick() {
+                  return navigateMaximized('prev');
+                },
+                className: "p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-all shadow-sm active:scale-90 text-slate-600 dark:text-slate-300",
+                children: /*#__PURE__*/_jsx("svg", {
+                  className: "w-5 h-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 2.5,
+                  children: /*#__PURE__*/_jsx("path", {
+                    d: "M15 19l-7-7 7-7"
+                  })
+                })
+              }), /*#__PURE__*/_jsx("button", {
+                onClick: function onClick() {
+                  return navigateMaximized('next');
+                },
+                className: "p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-all shadow-sm active:scale-90 text-slate-600 dark:text-slate-300",
+                children: /*#__PURE__*/_jsx("svg", {
+                  className: "w-5 h-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 2.5,
+                  children: /*#__PURE__*/_jsx("path", {
+                    d: "M9 5l7 7-7 7"
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "flex flex-col",
+              children: [/*#__PURE__*/_jsx("span", {
+                className: "text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none mb-1",
+                children: "MAXIMIZED VIEW"
+              }), /*#__PURE__*/_jsx("h3", {
+                className: "text-lg font-bold text-slate-800 dark:text-slate-100 leading-tight",
+                children: tile.title
+              })]
+            })]
+          }), /*#__PURE__*/_jsx("button", {
+            onClick: function onClick() {
+              return setMaximizedTileId(null);
+            },
+            className: "p-3 bg-slate-50 dark:bg-slate-800 hover:bg-red-50 dark:hover:bg-red-900/20 text-slate-400 hover:text-red-500 rounded-2xl transition-all",
+            children: /*#__PURE__*/_jsx("svg", {
+              className: "w-6 h-6",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              strokeWidth: 2.5,
+              children: /*#__PURE__*/_jsx("path", {
+                d: "M6 18L18 6M6 6l12 12"
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "flex-1 overflow-auto p-8 md:p-12 scrollbar-hide",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "max-w-4xl mx-auto h-full flex flex-col",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "flex-1 rounded-2xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm p-8 min-h-[400px]",
+              children: /*#__PURE__*/_jsx(TileContent, _objectSpread({
+                tile: tile,
+                setTiles: setTiles,
+                editMode: editMode,
+                fetchers: fetchers
+              }, rest))
+            })
+          })
+        })]
+      })
+    });
+  };
+  if (isMobile) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-6 p-6",
+      children: [renderMaximizedView(), renderDeleteConfirmation(), tiles.map(function (tile) {
+        return /*#__PURE__*/_jsxs("div", {
+          className: "bg-white dark:bg-slate-800 rounded-2xl shadow-md border border-slate-200 dark:border-slate-700 overflow-hidden flex flex-col min-h-[400px]",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "px-6 py-4 border-b border-slate-100 dark:border-slate-700/50 flex items-center justify-between bg-slate-50/50 dark:bg-slate-800/50",
+            children: [/*#__PURE__*/_jsx("h3", {
+              className: "text-sm font-bold text-slate-700 dark:text-slate-200",
+              children: tile.title
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/_jsx("button", {
+                onClick: function onClick() {
+                  return setMaximizedTileId(tile.id);
+                },
+                className: "p-2 text-indigo-600 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg",
+                children: /*#__PURE__*/_jsx("svg", {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 2.5,
+                  children: /*#__PURE__*/_jsx("path", {
+                    d: "M15 3h6m0 0v6m0-6L14 10M9 21H3m0 0v-6m0 6l7-7"
+                  })
+                })
+              }), editMode && /*#__PURE__*/_jsx("button", {
+                onClick: function onClick() {
+                  return setTileToDeleteId(tile.id);
+                },
+                className: "p-2 text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg",
+                children: /*#__PURE__*/_jsx("svg", {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  strokeWidth: 2.5,
+                  children: /*#__PURE__*/_jsx("path", {
+                    d: "M6 18L18 6M6 6l12 12"
+                  })
+                })
+              })]
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "flex-1 p-6",
+            children: /*#__PURE__*/_jsx(TileContent, _objectSpread({
+              tile: tile,
+              setTiles: setTiles,
+              editMode: editMode,
+              fetchers: fetchers
+            }, rest))
+          })]
+        }, tile.id);
+      })]
+    });
+  }
+  var gridHeight = Math.max.apply(Math, _toConsumableArray(tiles.map(function (t) {
+    return t.y + t.h;
+  })).concat([12])) * (cellSize + GRID_GAP) + 120;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: "relative w-full grid-bg select-none p-8 transition-all duration-500 ".concat(editMode ? 'grid-active' : '', " ").concat(theme === 'dark' ? 'dark' : ''),
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerLeave: handlePointerUp,
+    style: {
+      height: "".concat(gridHeight, "px"),
+      minHeight: '100vh'
+    },
+    children: [renderMaximizedView(), renderDeleteConfirmation(), tiles.map(function (tile) {
+      return /*#__PURE__*/_jsx(DashboardTile, _objectSpread({
+        tile: tile,
+        cellSize: cellSize,
+        editMode: editMode,
+        onDragStart: handleDragStart,
+        onResizeStart: handleResizeStart,
+        onDelete: setTileToDeleteId,
+        onMaximize: setMaximizedTileId,
+        isDragging: activeTileId === tile.id && !!dragState,
+        isResizing: activeTileId === tile.id && !!resizeState,
+        fetchers: fetchers,
+        setTiles: setTiles
+      }, rest), tile.id);
+    })]
+  });
+};