Dashlet extraction

Add options with_run_button and with_book_button to FormBlockOql

application/dashboard.class.inc.php

@@ -5,6 +5,9 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
+use Combodo\iTop\Application\Dashboard\Layout\DashboardLayoutGrid;
+use Combodo\iTop\Application\Dashlet\DashletFactory;
+use Combodo\iTop\Application\Dashlet\Service\DashletService;
 use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\DataTable\DataTableSettings;
 use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
@@ -12,9 +15,12 @@ use Combodo\iTop\Application\UI\Base\Component\Toolbar\ToolbarUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Layout\Dashboard\DashboardLayout as DashboardLayoutUIBlock;
 use Combodo\iTop\Application\WebPage\iTopWebPage;
 use Combodo\iTop\Application\WebPage\WebPage;
+use Combodo\iTop\DesignDocument;
+use Combodo\iTop\DesignElement;
+use Combodo\iTop\PropertyType\PropertyTypeDesign;
+use Combodo\iTop\Service\DependencyInjection\ServiceLocator;
 
 require_once(APPROOT.'application/dashboardlayout.class.inc.php');
-require_once(APPROOT.'application/dashlet.class.inc.php');
 require_once(APPROOT.'core/modelreflection.class.inc.php');
 
 /**
@@ -24,7 +30,7 @@ require_once(APPROOT.'core/modelreflection.class.inc.php');
  */
 abstract class Dashboard
 {
-	/** @var string $sTitle*/
+	/** @var string $sTitle */
 	protected $sTitle;
 	/** @var bool $bAutoReload */
 	protected $bAutoReload;
@@ -34,7 +40,7 @@ abstract class Dashboard
 	protected $sLayoutClass;
 	/** @var array $aWidgetsData */
 	protected $aWidgetsData;
-	/** @var \DOMNode|null $oDOMNode */
+	/** @var DesignElement|null $oDOMNode */
 	protected $oDOMNode;
 	/** @var string $sId */
 	protected $sId;
@@ -43,6 +49,11 @@ abstract class Dashboard
 	/** @var \ModelReflection $oMetaModel */
 	protected $oMetaModel;
 
+	/** @var array Array of dashlets with position */
+	protected array $aGridDashlets = [];
+
+	protected $oDashletFactory;
+
 	/**
 	 * Dashboard constructor.
 	 *
@@ -57,6 +68,7 @@ abstract class Dashboard
 		$this->aCells = [];
 		$this->oDOMNode = null;
 		$this->sId = $sId;
+		$this->oDashletFactory = DashletFactory::GetInstance();
 	}
 
 	/**
@@ -68,7 +80,7 @@ abstract class Dashboard
 	{
 		$this->aCells = []; // reset the content of the dashboard
 		set_error_handler(['Dashboard', 'ErrorHandler']);
-		$oDoc = new DOMDocument();
+		$oDoc = new PropertyTypeDesign();
 		$oDoc->loadXML($sXml);
 		restore_error_handler();
 		$this->FromDOMDocument($oDoc);
@@ -77,10 +89,15 @@ abstract class Dashboard
 	/**
 	 * @param \DOMDocument $oDoc
 	 */
-	public function FromDOMDocument(DOMDocument $oDoc)
+	public function FromDOMDocument(DesignDocument $oDoc)
 	{
 		$this->oDOMNode = $oDoc->getElementsByTagName('dashboard')->item(0);
 
+		if ($this->oDOMNode->getElementsByTagName('cells')->count() === 0) {
+			$this->FromDOMDocumentV2($oDoc);
+			return;
+		}
+
 		if ($oLayoutNode = $this->oDOMNode->getElementsByTagName('layout')->item(0)) {
 			$this->sLayoutClass = $oLayoutNode->textContent;
 		} else {
@@ -121,7 +138,7 @@ abstract class Dashboard
 					$aDashletOrder = [];
 					/** @var \DOMElement $oDomNode */
 					foreach ($oDashletList as $oDomNode) {
-						$oRank =  $oDomNode->getElementsByTagName('rank')->item(0);
+						$oRank = $oDomNode->getElementsByTagName('rank')->item(0);
 						if ($oRank) {
 							$iRank = (float)$oRank->textContent;
 						}
@@ -147,7 +164,39 @@ abstract class Dashboard
 	}
 
 	/**
-	 * @param \DOMElement $oDomNode
+	 * @param \DOMDocument $oDoc
+	 */
+	public function FromDOMDocumentV2(DesignDocument $oDoc)
+	{
+		$this->oDOMNode = $oDoc->getElementsByTagName('dashboard')->item(0);
+
+		$this->sLayoutClass = DashboardLayoutGrid::class;
+		$this->sTitle = $this->oDOMNode->GetChildText('title', '');
+
+		$iRefresh = intval($this->oDOMNode->GetChildText('refresh', '0'));
+
+		$this->bAutoReload = $iRefresh > 0;
+		$this->iAutoReloadSec = $iRefresh;
+
+		$oDashletsNode = $this->oDOMNode->GetUniqueElement('pos_dashlets');
+		$oDashletList = $oDashletsNode->getElementsByTagName('pos_dashlet');
+		foreach ($oDashletList as $oPosDashletNode) {
+			$aGridDashlet = [];
+			$aGridDashlet['position_x'] = intval($oPosDashletNode->GetChildText('position_x', '0'));
+			$aGridDashlet['position_y'] = intval($oPosDashletNode->GetChildText('position_y', '0'));
+			$aGridDashlet['width'] = intval($oPosDashletNode->GetChildText('width', '2'));
+			$aGridDashlet['height'] = intval($oPosDashletNode->GetChildText('height', '1'));
+			$oDashletNode = $oPosDashletNode->GetUniqueElement('dashlet');
+			$sId = $oPosDashletNode->getAttribute('id');
+			$oDashlet = $this->InitDashletFromDOMNode($oDashletNode);
+			$oDashlet->SetID($sId);
+			$aGridDashlet['dashlet'] = $oDashlet;
+			$this->aGridDashlets[] = $aGridDashlet;
+		}
+	}
+
+	/**
+	 * @param DesignElement $oDomNode
 	 *
 	 * @return mixed
 	 */
@@ -160,7 +209,7 @@ abstract class Dashboard
 		// Test if dashlet can be instantiated, otherwise (uninstalled, broken, ...) we display a placeholder
 		$sClass = static::GetDashletClassFromType($sDashletType);
 		/** @var \Dashlet $oNewDashlet */
-		$oNewDashlet = new $sClass($this->oMetaModel, $sId);
+		$oNewDashlet = $this->oDashletFactory->CreateDashlet($sClass, $sId);
 		$oNewDashlet->SetDashletType($sDashletType);
 		$oNewDashlet->FromDOMNode($oDomNode);
 
@@ -204,20 +253,33 @@ abstract class Dashboard
 	 */
 	public function ToXml()
 	{
-		$oDoc = new DOMDocument();
-		$oDoc->formatOutput = true; // indent (must be loaded with option LIBXML_NOBLANKS)
-		$oDoc->preserveWhiteSpace = true; // otherwise the formatOutput option would have no effect
-
-		$oMainNode = $oDoc->createElement('dashboard');
-		$oMainNode->setAttribute('xmlns:xsi', "http://www.w3.org/2001/XMLSchema-instance");
-		$oDoc->appendChild($oMainNode);
+		$oMainNode = $this->CreateEmptyDashboard();
 
 		$this->ToDOMNode($oMainNode);
 
-		$sXml = $oDoc->saveXML();
+		$sXml = $oMainNode->ownerDocument->saveXML();
+
 		return $sXml;
 	}
 
+	/**
+	 * @return DesignElement
+	 * @throws \DOMException
+	 */
+	public function CreateEmptyDashboard(): DesignElement
+	{
+		$oDoc = new DesignDocument();
+		$oDoc->formatOutput = true; // indent (must be loaded with option LIBXML_NOBLANKS)
+		$oDoc->preserveWhiteSpace = true; // otherwise the formatOutput option would have no effect
+
+		/** @var DesignElement $oMainNode */
+		$oMainNode = $oDoc->createElement('dashboard');
+		$oMainNode->setAttribute('xmlns:xsi', 'http://www.w3.org/2001/XMLSchema-instance');
+		$oDoc->appendChild($oMainNode);
+
+		return $oMainNode;
+	}
+
 	/**
 	 * @param \DOMElement $oDefinition
 	 */
@@ -279,7 +341,7 @@ abstract class Dashboard
 		}
 		$this->sTitle = $aParams['title'];
 		$this->bAutoReload = $aParams['auto_reload'] == 'true';
-		$this->iAutoReloadSec = max(MetaModel::GetConfig()->Get('min_reload_interval'), (int) $aParams['auto_reload_sec']);
+		$this->iAutoReloadSec = max(MetaModel::GetConfig()->Get('min_reload_interval'), (int)$aParams['auto_reload_sec']);
 
 		foreach ($aParams['cells'] as $aCell) {
 			$aCellDashlets = [];
@@ -287,7 +349,7 @@ abstract class Dashboard
 				$sDashletClass = $aDashletParams['dashlet_class'];
 				$sId = $aDashletParams['dashlet_id'];
 				/** @var \Dashlet $oNewDashlet */
-				$oNewDashlet = new $sDashletClass($this->oMetaModel, $sId);
+				$oNewDashlet = $this->oDashletFactory->CreateDashlet($sDashletClass, $sId);
 				if (isset($aDashletParams['dashlet_type'])) {
 					$oNewDashlet->SetDashletType($aDashletParams['dashlet_type']);
 				}
@@ -305,7 +367,11 @@ abstract class Dashboard
 
 	public function Save()
 	{
+	}
 
+	public function PersistDashboard(string $sXml): bool
+	{
+		return true;
 	}
 
 	/**
@@ -503,7 +569,7 @@ EOF
 	{
 		$aExtraParams['dashboard_div_id'] = utils::Sanitize($aExtraParams['dashboard_div_id'] ?? null, $this->GetId(), utils::ENUM_SANITIZATION_FILTER_ELEMENT_IDENTIFIER);
 
-		/** @var \DashboardLayoutMultiCol $oLayout */
+		/** @var \DashboardLayout $oLayout */
 		$oLayout = new $this->sLayoutClass();
 
 		foreach ($this->aCells as $iCellIdx => $aDashlets) {
@@ -513,7 +579,13 @@ EOF
 			}
 		}
 
-		$oDashboard = $oLayout->Render($oPage, $this->aCells, $bEditMode, $aExtraParams);
+		if (count($this->aCells) > 0) {
+			$aDashlets = $this->aCells;
+		} else {
+			$aDashlets = $this->aGridDashlets;
+		}
+
+		$oDashboard = $oLayout->Render($oPage, $aDashlets, $bEditMode, $aExtraParams);
 		$oPage->AddUiBlock($oDashboard);
 
 		$bFromDasboardPage = isset($aExtraParams['from_dashboard_page']) ? isset($aExtraParams['from_dashboard_page']) : false;
@@ -603,29 +675,12 @@ JS
 	 * Return an array of dashlets available for selection.
 	 *
 	 * @return array
-	 * @throws \ReflectionException
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 * @throws \DOMFormatException
 	 */
-	protected function GetAvailableDashlets()
+	protected function GetAvailableDashlets(): array
 	{
-		$aDashlets = [];
-
-		foreach (get_declared_classes() as $sDashletClass) {
-			// DashletUnknown is not among the selection as it is just a fallback for dashlets that can't instantiated.
-			if (is_subclass_of($sDashletClass, 'Dashlet') && !in_array($sDashletClass, ['DashletUnknown', 'DashletProxy'])) {
-				$oReflection = new ReflectionClass($sDashletClass);
-				if (!$oReflection->isAbstract()) {
-					$aCallSpec = [$sDashletClass, 'IsVisible'];
-					$bVisible = call_user_func($aCallSpec);
-					if ($bVisible) {
-						$aCallSpec = [$sDashletClass, 'GetInfo'];
-						$aInfo = call_user_func($aCallSpec);
-						$aDashlets[$sDashletClass] = $aInfo;
-					}
-				}
-			}
-		}
-
-		return $aDashlets;
+		return DashletService::GetInstance()->GetAvailableDashlets();
 	}
 
 	/**
@@ -640,6 +695,7 @@ JS
 				$iNewId = max($iNewId, (int)$oDashlet->GetID());
 			}
 		}
+
 		return $iNewId + 1;
 	}
 
@@ -674,6 +730,7 @@ JS
 		if (is_subclass_of($sType, 'Dashlet')) {
 			return $sType;
 		}
+
 		return 'DashletUnknown';
 	}
 
@@ -726,6 +783,8 @@ class RuntimeDashboard extends Dashboard
 	{
 		parent::__construct($sId);
 		$this->oMetaModel = new ModelReflectionRuntime();
+		$this->oDashletFactory->SetModelReflectionRuntime($this->oMetaModel);
+		ServiceLocator::GetInstance()->RegisterService('ModelReflection', $this->oMetaModel);
 		$this->bCustomized = false;
 	}
 
@@ -740,6 +799,7 @@ class RuntimeDashboard extends Dashboard
 
 	/**
 	 * @param bool $bCustomized
+	 *
 	 * @since 2.7.0
 	 */
 	public function SetCustomFlag($bCustomized)
@@ -764,6 +824,26 @@ class RuntimeDashboard extends Dashboard
 	public function Save()
 	{
 		$sXml = $this->ToXml();
+
+		return $this->PersistDashboard($sXml);
+	}
+
+	/**
+	 * @param string $sXml
+	 *
+	 * @return bool
+	 * @throws \ArchivedObjectException
+	 * @throws \CoreCannotSaveObjectException
+	 * @throws \CoreException
+	 * @throws \CoreUnexpectedValue
+	 * @throws \CoreWarning
+	 * @throws \MissingQueryArgument
+	 * @throws \MySQLException
+	 * @throws \MySQLHasGoneAwayException
+	 * @throws \OQLException
+	 */
+	public function PersistDashboard(string $sXml): bool
+	{
 		$oUDSearch = new DBObjectSearch('UserDashboard');
 		$oUDSearch->AddCondition('user_id', UserRights::GetUserId(), '=');
 		$oUDSearch->AddCondition('menu_code', $this->sId, '=');
@@ -784,6 +864,7 @@ class RuntimeDashboard extends Dashboard
 		utils::PushArchiveMode(false);
 		$oUserDashboard->DBWrite();
 		utils::PopArchiveMode();
+
 		return $bIsNew;
 	}
 
@@ -1077,6 +1158,7 @@ JS
 		$sId = utils::Sanitize($this->GetId(), '', 'element_identifier');
 
 		$sMenuTogglerId = "ibo-dashboard-menu-toggler-{$sId}";
+		$sActionEditId = "ibo-dashboard-menu-edit-{$sId}";
 		$sPopoverMenuId = "ibo-dashboard-menu-popover-{$sId}";
 		$sName = 'UI:Dashboard:Actions';
 
@@ -1090,6 +1172,21 @@ JS
 		} else {
 			$oToolbar = $oDashboard->GetToolbar();
 		}
+
+		// TODO 3.3 Check if we need different action for custom dashboard creation / edition
+		$oActionEditButton = ButtonUIBlockFactory::MakeIconAction(
+			'fas fa-pen',
+			$this->HasCustomDashboard() ? Dict::S('UI:Dashboard:EditCustom') : Dict::S('UI:Dashboard:CreateCustom'),
+			$sActionEditId,
+			'',
+			false,
+			$sActionEditId
+		)
+			->AddCSSClass('ibo-top-bar--toolbar-dashboard-edit-button')
+			->AddCSSClass('ibo-action-button');
+
+		$oToolbar->AddSubBlock($oActionEditButton);
+
 		$oActionButton = ButtonUIBlockFactory::MakeIconAction('fas fa-ellipsis-v', Dict::S($sName), $sName, '', false, $sMenuTogglerId)
 			->AddCSSClass('ibo-top-bar--toolbar-dashboard-menu-toggler')
 			->AddCSSClass('ibo-action-button');
@@ -1099,8 +1196,8 @@ JS
 		$sFile = addslashes(utils::LocalPath($this->sDefinitionFile));
 		$sJSExtraParams = json_encode($aExtraParams);
 		if ($this->HasCustomDashboard()) {
-			$oEdit = new JSPopupMenuItem('UI:Dashboard:Edit', Dict::S('UI:Dashboard:EditCustom'), "return EditDashboard('{$this->sId}', '$sFile', $sJSExtraParams)");
-			$aActions[$oEdit->GetUID()] = $oEdit->GetMenuItem();
+			//			$oEdit = new JSPopupMenuItem('UI:Dashboard:Edit', Dict::S('UI:Dashboard:EditCustom'), "return EditDashboard('{$this->sId}', '$sFile', $sJSExtraParams)");
+			//			$aActions[$oEdit->GetUID()] = $oEdit->GetMenuItem();
 			$oRevert = new JSPopupMenuItem(
 				'UI:Dashboard:RevertConfirm',
 				Dict::S('UI:Dashboard:DeleteCustom'),
@@ -1108,8 +1205,8 @@ JS
 			);
 			$aActions[$oRevert->GetUID()] = $oRevert->GetMenuItem();
 		} else {
-			$oEdit = new JSPopupMenuItem('UI:Dashboard:Edit', Dict::S('UI:Dashboard:CreateCustom'), "return EditDashboard('{$this->sId}', '$sFile', $sJSExtraParams)");
-			$aActions[$oEdit->GetUID()] = $oEdit->GetMenuItem();
+			//			$oEdit = new JSPopupMenuItem('UI:Dashboard:Edit', Dict::S('UI:Dashboard:CreateCustom'), "return EditDashboard('{$this->sId}', '$sFile', $sJSExtraParams)");
+			//			$aActions[$oEdit->GetUID()] = $oEdit->GetMenuItem();
 		}
 
 		utils::GetPopupMenuItems($oPage, iPopupMenuExtension::MENU_DASHBOARD_ACTIONS, $this, $aActions);
@@ -1223,7 +1320,7 @@ EOF
 		$sId = json_encode($this->sId);
 		$sLayoutClass = json_encode($this->sLayoutClass);
 		$sAutoReload = $this->bAutoReload ? 'true' : 'false';
-		$sAutoReloadSec = (string) $this->iAutoReloadSec;
+		$sAutoReloadSec = (string)$this->iAutoReloadSec;
 		$sTitle = json_encode($this->sTitle);
 		$sFile = json_encode($this->GetDefinitionFile());
 		$sUrl = utils::GetAbsoluteUrlAppRoot().'pages/ajax.render.php';
@@ -1395,19 +1492,11 @@ JS
 
 		// Get the list of possible dashlets that support a creation from
 		// an OQL
+		$aAllDashlets = DashletService::GetInstance()->GetAvailableDashlets();
 		$aDashlets = [];
-		foreach (get_declared_classes() as $sDashletClass) {
-			if (is_subclass_of($sDashletClass, 'Dashlet')) {
-				$oReflection = new ReflectionClass($sDashletClass);
-				if (!$oReflection->isAbstract()) {
-					$aCallSpec = [$sDashletClass, 'CanCreateFromOQL'];
-					$bShorcutMode = call_user_func($aCallSpec);
-					if ($bShorcutMode) {
-						$aCallSpec = [$sDashletClass, 'GetInfo'];
-						$aInfo = call_user_func($aCallSpec);
-						$aDashlets[$sDashletClass] = ['label' => $aInfo['label'], 'class' => $sDashletClass, 'icon' => $aInfo['icon']];
-					}
-				}
+		foreach ($aAllDashlets as $sDashletClass => $aInfo) {
+			if ($aInfo['can_create_by_oql']) {
+				$aDashlets[$sDashletClass] = ['label' => $aInfo['label'], 'class' => $sDashletClass, 'icon' => $aInfo['icon']];
 			}
 		}
 
@@ -1417,7 +1506,7 @@ JS
 			$oSubForm = new DesignerForm();
 			$oMetaModel = new ModelReflectionRuntime();
 			/** @var \Dashlet $oDashlet */
-			$oDashlet = new $sDashletClass($oMetaModel, 0);
+			$oDashlet = DashletFactory::GetInstance()->CreateDashlet($sDashletClass, 0);
 			$oDashlet->GetPropertiesFieldsFromOQL($oSubForm, $sOQL);
 
 			$oSelectorField->AddSubForm($oSubForm, $aDashletInfo['label'], $aDashletInfo['class']);
@@ -1571,7 +1660,7 @@ JS
 	 */
 	private function UpdateDashletUserPrefs(Dashlet $oDashlet, $sDashletIdOrig, array $aExtraParams)
 	{
-		$bIsDashletWithListPref = ($oDashlet instanceof  DashletObjectList);
+		$bIsDashletWithListPref = ($oDashlet instanceof DashletObjectList);
 		if (!$bIsDashletWithListPref) {
 			return;
 		}
@@ -1619,6 +1708,7 @@ JS
 			//on error, return default value
 			return null;
 		}
+
 		return DataTableSettings::GetAppUserPreferenceKey($aClassAliases, $sDataTableId);
 	}
 }

application/dashboardlayout.class.inc.php

@@ -30,7 +30,7 @@ use Combodo\iTop\Application\WebPage\WebPage;
  */
 abstract class DashboardLayout
 {
-	abstract public function Render($oPage, $aDashlets, $bEditMode = false);
+	abstract public function Render($oPage, $aDashlets, $bEditMode = false, array $aExtraParams = []);
 
 	/**
 	 * @param int $iCellIdx
@@ -43,8 +43,8 @@ abstract class DashboardLayout
 	public static function GetInfo()
 	{
 		return [
-			'label' => '',
-			'icon' => '',
+			'label'       => '',
+			'icon'        => '',
 			'description' => '',
 		];
 	}
@@ -74,6 +74,7 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 			}
 			$idx++;
 		}
+
 		return $aDashlets;
 	}
 
@@ -94,6 +95,7 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 			}
 			$idx++;
 		}
+
 		return $aCells;
 
 	}
@@ -109,7 +111,8 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 		// Trim the list of cells to remove the invisible/empty ones at the end of the array
 		$aCells = $this->TrimCellsArray($aCells);
 
-		$oDashboardLayout = new DashboardLayoutUIBlock();
+		// TODO 3.3 Handle dashboard new format, convert old format if needed
+		$oDashboardLayout = new DashboardLayoutUIBlock($aExtraParams['dashboard_div_id']);
 		//$oPage->AddUiBlock($oDashboardLayout);
 
 		$iCellIdx = 0;
@@ -117,15 +120,16 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 
 		//Js given by each dashlet to reload
 		$sJSReload = "";
-
+		$oDashboardGrid = new \Combodo\iTop\Application\UI\Base\Layout\Dashboard\DashboardGrid();
+		$oDashboardLayout->SetGrid($oDashboardGrid);
 		for ($iRows = 0; $iRows < $iNbRows; $iRows++) {
 			$oDashboardRow = new DashboardRow();
-			$oDashboardLayout->AddDashboardRow($oDashboardRow);
+			//$oDashboardLayout->AddDashboardRow($oDashboardRow);
 
 			for ($iCols = 0; $iCols < $this->iNbCols; $iCols++) {
 				$oDashboardColumn = new DashboardColumn($bEditMode);
 				$oDashboardColumn->SetCellIndex($iCellIdx);
-				$oDashboardRow->AddDashboardColumn($oDashboardColumn);
+				//$oDashboardRow->AddDashboardColumn($oDashboardColumn);
 
 				if (array_key_exists($iCellIdx, $aCells)) {
 					$aDashlets = $aCells[$iCellIdx];
@@ -133,6 +137,18 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 						/** @var \Dashlet $oDashlet */
 						foreach ($aDashlets as $oDashlet) {
 							if ($oDashlet::IsVisible()) {
+								$sDashletId = $oDashlet->GetID();
+								$sDashletClass = get_class($oDashlet);
+								$aDashletDenormalizedProperties = $oDashlet->GetDenormalizedProperties();
+								//								$aDashletsInfo = $sDashletClass::GetInfo();
+								//
+								//								// TODO 3.3 Gather real position and height/width if any.
+								//								// Also set minimal height/width
+								//								$iPositionX = null;
+								//								$iPositionY = null;
+								//								$iWidth = array_key_exists('preferred_width', $aDashletsInfo) ? $aDashletsInfo['preferred_width'] : 1;
+								//								$iHeight = array_key_exists('preferred_height', $aDashletsInfo) ? $aDashletsInfo['preferred_height'] : 1;
+								//								$oDashboardGrid->AddDashlet($oDashlet->DoRender($oPage, $bEditMode, true /* bEnclosingDiv */, $aExtraParams), $sDashletId, $sDashletClass, $aDashletDenormalizedProperties, $iPositionX, $iPositionY, $iWidth, $iHeight);
 								$oDashboardColumn->AddUIBlock($oDashlet->DoRender($oPage, $bEditMode, true /* bEnclosingDiv */, $aExtraParams));
 							}
 						}
@@ -147,6 +163,7 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 			$sJSReload .= $oDashboardRow->GetJSRefreshCallback()." ";
 		}
 
+		// TODO 3.3 We can probably do better with the new dashboard
 		$oPage->add_script("function updateDashboard".$aExtraParams['dashboard_div_id']."(){".$sJSReload."}");
 
 		if ($bEditMode) { // Add one row for extensibility
@@ -168,8 +185,8 @@ abstract class DashboardLayoutMultiCol extends DashboardLayout
 	 */
 	public function GetDashletCoordinates($iCellIdx)
 	{
-		$iColNumber = (int) $iCellIdx % $this->iNbCols;
-		$iRowNumber = (int) floor($iCellIdx / $this->iNbCols);
+		$iColNumber = (int)$iCellIdx % $this->iNbCols;
+		$iRowNumber = (int)floor($iCellIdx / $this->iNbCols);
 
 		return [$iColNumber, $iRowNumber];
 	}
@@ -182,11 +199,12 @@ class DashboardLayoutOneCol extends DashboardLayoutMultiCol
 		parent::__construct();
 		$this->iNbCols = 1;
 	}
+
 	public static function GetInfo()
 	{
 		return [
-			'label' => 'One Column',
-			'icon' => 'images/layout_1col.png',
+			'label'       => 'One Column',
+			'icon'        => 'images/layout_1col.png',
 			'description' => '',
 		];
 	}
@@ -199,11 +217,12 @@ class DashboardLayoutTwoCols extends DashboardLayoutMultiCol
 		parent::__construct();
 		$this->iNbCols = 2;
 	}
+
 	public static function GetInfo()
 	{
 		return [
-			'label' => 'Two Columns',
-			'icon' =>  'images/layout_2col.png',
+			'label'       => 'Two Columns',
+			'icon'        => 'images/layout_2col.png',
 			'description' => '',
 		];
 	}
@@ -216,11 +235,12 @@ class DashboardLayoutThreeCols extends DashboardLayoutMultiCol
 		parent::__construct();
 		$this->iNbCols = 3;
 	}
+
 	public static function GetInfo()
 	{
 		return [
-			'label' => 'Two Columns',
-			'icon' =>  'images/layout_3col.png',
+			'label'       => 'Two Columns',
+			'icon'        => 'images/layout_3col.png',
 			'description' => '',
 		];
 	}

application/datamodel.application.xml

@@ -6,7 +6,7 @@
     <class id="AbstractResource" _delta="define">
       <parent>cmdbAbstractObject</parent>
       <properties>
-        <comment>/* Resource access control abstraction. Can be herited by abstract resource access control classes. Generally controlled using UR_ACTION_MODIFY access right. */</comment>
+        <comment>/* Resource access control abstraction. Can be inherited by abstract resource access control classes. Generally controlled using UR_ACTION_MODIFY access right. */</comment>
         <abstract>true</abstract>
       </properties>
       <presentation/>
@@ -851,9 +851,295 @@ Call $this->AddInitialAttributeFlags($sAttCode, $iFlags) for all the initial att
         </methods>
       </class>
     </classes>
+    <dashlets>
+      <dashlet id="DashletGroupByTable" _delta="define">
+        <label>UI:DashletGroupByTable:Label</label>
+        <icon>images/dashlets/icons8-transaction-list-48.png</icon>
+        <description>UI:DashletGroupByTable:Description</description>
+        <min_width>2</min_width>
+        <min_height>2</min_height>
+        <preferred_width>3</preferred_width>
+        <preferred_height>3</preferred_height>
+        <can_create_by_oql>true</can_create_by_oql>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletGroupByBars" _delta="define">
+        <label>UI:DashletGroupByBars:Label</label>
+        <icon>images/dashlets/icons8-bar-chart-48.png</icon>
+        <description>UI:DashletGroupByBars:Description</description>
+        <min_width>2</min_width>
+        <min_height>2</min_height>
+        <preferred_width>3</preferred_width>
+        <preferred_height>3</preferred_height>
+        <can_create_by_oql>true</can_create_by_oql>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletGroupByPie" _delta="define">
+        <label>UI:DashletGroupByPie:Label</label>
+        <icon>images/dashlets/icons8-pie-chart-48.png</icon>
+        <description>UI:DashletGroupByPie:Description</description>
+        <min_width>2</min_width>
+        <min_height>2</min_height>
+        <preferred_width>3</preferred_width>
+        <preferred_height>3</preferred_height>
+        <can_create_by_oql>true</can_create_by_oql>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletBadge" _delta="define">
+        <label>UI:DashletBadge:Label</label>
+        <icon>images/dashlets/icons8-badge-48.png</icon>
+        <description>UI:DashletBadge:Description</description>
+        <min_width>2</min_width>
+        <min_height>1</min_height>
+        <preferred_width>2</preferred_width>
+        <preferred_height>1</preferred_height>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletHeaderDynamic" _delta="define">
+        <label>UI:DashletHeaderDynamic:Label</label>
+        <icon>images/dashlets/icons8-header-altered-48.png</icon>
+        <description>UI:DashletHeaderDynamic:Description</description>
+        <min_width>2</min_width>
+        <min_height>1</min_height>
+        <preferred_width>4</preferred_width>
+        <preferred_height>3</preferred_height>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletHeaderStatic" _delta="define">
+        <label>UI:DashletHeaderStatic:Label</label>
+        <icon>images/dashlets/icons8-header-48.png</icon>
+        <description>UI:DashletHeaderStatic:Description</description>
+        <min_width>4</min_width>
+        <min_height>1</min_height>
+        <preferred_width>4</preferred_width>
+        <preferred_height>1</preferred_height>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletObjectList" _delta="define">
+        <label>UI:DashletObjectList:Label</label>
+        <icon>images/dashlets/icons8-list-48.png</icon>
+        <description>UI:DashletObjectList:Description</description>
+        <min_width>2</min_width>
+        <min_height>1</min_height>
+        <preferred_width>4</preferred_width>
+        <preferred_height>3</preferred_height>
+        <can_create_by_oql>true</can_create_by_oql>
+        <configuration/>
+      </dashlet>
+      <dashlet id="DashletPlainText" _delta="define">
+        <label>UI:DashletPlainText:Label</label>
+        <icon>images/dashlets/icons8-text-box-48.png</icon>
+        <description>UI:DashletPlainText:Description</description>
+        <min_width>2</min_width>
+        <min_height>1</min_height>
+        <preferred_width>2</preferred_width>
+        <preferred_height>1</preferred_height>
+        <configuration/>
+      </dashlet>
+    </dashlets>
     <property_types _delta="define">
+      <property_type id="Dashboard" xsi:type="Combodo-AbstractPropertyType"/>
+      <property_type id="DashboardGrid" xsi:type="Combodo-PropertyType">
+        <extends>Dashboard</extends>
+        <definition xsi:type="Combodo-ValueType-PropertyTree">
+          <label>Dashboard</label>
+          <nodes>
+            <node id="title" xsi:type="Combodo-ValueType-String">
+              <label>UI:DashboardEdit:DashboardTitle</label>
+            </node>
+            <node id="refresh" xsi:type="Combodo-ValueType-Choice"> <!-- Possible de le cacher, etc celui-ci nous met dedans -->
+              <label>UI:DashboardEdit:AutoReload</label>
+              <values>
+                <value id="0">
+                  <label>No auto-refresh</label>
+                </value>
+                <value id="30">
+                  <label>Every 30 seconds</label>
+                </value>
+                <value id="60">
+                  <label>Every 1 minute</label>
+                </value>
+                <value id="300">
+                  <label>Every 5 minutes</label>
+                </value>
+                <value id="600">
+                  <label>Every 10 minutes</label>
+                </value>
+                <value id="1800">
+                  <label>Every 30 minutes</label>
+                </value>
+                <value id="3600">
+                  <label>Every 1 hour</label>
+                </value>
+              </values>
+            </node>
+            <node id="pos_dashlets" xsi:type="Combodo-ValueType-Collection">
+              <label>Dashlet List</label>
+              <xml-format xsi:type="Combodo-XMLFormat-CollectionWithId">
+                <tag-name>pos_dashlet</tag-name>
+              </xml-format>
+              <prototype>
+                <node id="position_x" xsi:type="Combodo-ValueType-Integer">
+                  <label>X</label>
+                </node>
+                <node id="position_y" xsi:type="Combodo-ValueType-Integer">
+                  <label>Y</label>
+                </node>
+                <node id="width" xsi:type="Combodo-ValueType-Integer">
+                  <label>W</label>
+                </node>
+                <node id="height" xsi:type="Combodo-ValueType-Integer">
+                  <label>H</label>
+                </node>
+                <node id="dashlet" xsi:type="Combodo-ValueType-Polymorphic">
+                  <label>Dashlet</label>
+                  <allowed-types>
+                    <allowed-type>Dashlet</allowed-type>
+                  </allowed-types>
+                </node>
+              </prototype>
+            </node>
+          </nodes>
+        </definition>
+      </property_type>
       <property_type id="Dashlet" xsi:type="Combodo-AbstractPropertyType"/>
-      <property_type id="DashletGroupBy" xsi:type="Combodo-PropertyType">
+      <property_type id="DashletGroupByTable" xsi:type="Combodo-PropertyType">
+        <extends>Dashlet</extends>
+        <definition xsi:type="Combodo-ValueType-PropertyTree">
+          <label>UI:DashletGroupBy:Title</label>
+          <nodes>
+            <node id="title" xsi:type="Combodo-ValueType-Label">
+              <label>UI:DashletGroupBy:Prop-Title</label>
+            </node>
+            <node id="query" xsi:type="Combodo-ValueType-OQL">
+              <label>UI:DashletGroupBy:Prop-Query</label>
+            </node>
+            <node id="group_by" xsi:type="Combodo-ValueType-ClassAttributeGroupBy">
+              <label>UI:DashletGroupBy:Prop-GroupBy</label>
+              <class>{{query.selected_class}}</class>
+            </node>
+            <node id="style" xsi:type="Combodo-ValueType-Choice"> <!-- Possible de le cacher, etc celui-ci nous met dedans -->
+              <label>UI:DashletGroupBy:Prop-Style</label>
+              <values>
+                <value id="bars">
+                  <label>UI:DashletGroupByBars:Label</label>
+                </value>
+                <value id="pie">
+                  <label>UI:DashletGroupByPie:Label</label>
+                </value>
+                <value id="table">
+                  <label>UI:DashletGroupByTable:Label</label>
+                </value>
+              </values>
+            </node>
+            <node id="aggregation_function" xsi:type="Combodo-ValueType-AggregateFunction">
+              <label>UI:DashletGroupBy:Prop-Function</label>
+              <class>{{query.selected_class}}</class> <!-- pour savoir si il y a des attributs additionnables -->
+            </node>
+            <node id="aggregation_attribute" xsi:type="Combodo-ValueType-ClassAttribute">
+              <label>UI:DashletGroupBy:Prop-FunctionAttribute</label>
+              <relevance-condition>{{aggregation_function.value != 'count'}}</relevance-condition>
+              <class>{{query.selected_class}}</class>
+              <category>numeric</category>
+            </node>
+            <node id="order_by" xsi:type="Combodo-ValueType-ChoiceFromInput">
+              <label>UI:DashletGroupBy:Prop-OrderField</label>
+              <values>
+                <value id="attribute">
+                  <label>{{aggregation_attribute.label}}</label>
+                </value>
+                <value id="function">
+                  <label>{{aggregation_function.label}}</label>
+                </value>
+              </values>
+            </node>
+            <node id="limit" xsi:type="Combodo-ValueType-Integer">
+              <label>UI:DashletGroupBy:Prop-Limit</label>
+              <relevance-condition>{{order_by.value = 'function'}}</relevance-condition>
+            </node>
+            <node id="order_direction" xsi:type="Combodo-ValueType-Choice">
+              <label>UI:DashletGroupBy:Prop-OrderDirection</label>
+              <values>
+                <value id="asc">
+                  <label>UI:DashletGroupBy:Order:asc</label>
+                </value>
+                <value id="desc">
+                  <label>UI:DashletGroupBy:Order:desc</label>
+                </value>
+              </values>
+            </node>
+          </nodes>
+        </definition>
+      </property_type>
+      <property_type id="DashletGroupByBars" xsi:type="Combodo-PropertyType">
+        <extends>Dashlet</extends>
+        <definition xsi:type="Combodo-ValueType-PropertyTree">
+          <label>UI:DashletGroupBy:Title</label>
+          <nodes>
+            <node id="title" xsi:type="Combodo-ValueType-Label">
+              <label>UI:DashletGroupBy:Prop-Title</label>
+            </node>
+            <node id="query" xsi:type="Combodo-ValueType-OQL">
+              <label>UI:DashletGroupBy:Prop-Query</label>
+            </node>
+            <node id="group_by" xsi:type="Combodo-ValueType-ClassAttributeGroupBy">
+              <label>UI:DashletGroupBy:Prop-GroupBy</label>
+              <class>{{query.selected_class}}</class>
+            </node>
+            <node id="style" xsi:type="Combodo-ValueType-Choice"> <!-- Possible de le cacher, etc celui-ci nous met dedans -->
+              <label>UI:DashletGroupBy:Prop-Style</label>
+              <values>
+                <value id="bars">
+                  <label>UI:DashletGroupByBars:Label</label>
+                </value>
+                <value id="pie">
+                  <label>UI:DashletGroupByPie:Label</label>
+                </value>
+                <value id="table">
+                  <label>UI:DashletGroupByTable:Label</label>
+                </value>
+              </values>
+            </node>
+            <node id="aggregation_function" xsi:type="Combodo-ValueType-AggregateFunction">
+              <label>UI:DashletGroupBy:Prop-Function</label>
+              <class>{{query.selected_class}}</class> <!-- pour savoir si il y a des attributs additionnables -->
+            </node>
+            <node id="aggregation_attribute" xsi:type="Combodo-ValueType-ClassAttribute">
+              <label>UI:DashletGroupBy:Prop-FunctionAttribute</label>
+              <relevance-condition>{{aggregation_function.value != 'count'}}</relevance-condition>
+              <class>{{query.selected_class}}</class>
+              <category>numeric</category>
+            </node>
+            <node id="order_by" xsi:type="Combodo-ValueType-ChoiceFromInput">
+              <label>UI:DashletGroupBy:Prop-OrderField</label>
+              <values>
+                <value id="attribute">
+                  <label>{{aggregation_attribute.label}}</label>
+                </value>
+                <value id="function">
+                  <label>{{aggregation_function.label}}</label>
+                </value>
+              </values>
+            </node>
+            <node id="limit" xsi:type="Combodo-ValueType-Integer">
+              <label>UI:DashletGroupBy:Prop-Limit</label>
+              <relevance-condition>{{order_by.value = 'function'}}</relevance-condition>
+            </node>
+            <node id="order_direction" xsi:type="Combodo-ValueType-Choice">
+              <label>UI:DashletGroupBy:Prop-OrderDirection</label>
+              <values>
+                <value id="asc">
+                  <label>UI:DashletGroupBy:Order:asc</label>
+                </value>
+                <value id="desc">
+                  <label>UI:DashletGroupBy:Order:desc</label>
+                </value>
+              </values>
+            </node>
+          </nodes>
+        </definition>
+      </property_type>
+      <property_type id="DashletGroupByPie" xsi:type="Combodo-PropertyType">
         <extends>Dashlet</extends>
         <definition xsi:type="Combodo-ValueType-PropertyTree">
           <label>UI:DashletGroupBy:Title</label>

application/menunode.class.inc.php

@@ -6,6 +6,7 @@
  */
 
 use Combodo\iTop\Application\Helper\WebResourcesHelper;
+use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
 use Combodo\iTop\Application\WebPage\ErrorPage;
 use Combodo\iTop\Application\WebPage\iTopWebPage;
 use Combodo\iTop\Application\WebPage\WebPage;
@@ -1279,13 +1280,14 @@ class DashboardMenuNode extends MenuNode
 		if ($oDashboard != null) {
 			WebResourcesHelper::EnableC3JSToWebPage($oPage);
 
+			// TODO 3.3 this works for dashboard menu, what about other places ?
+			$oPageLayout = PageContentFactory::MakeForDashboard();
+			$oPage->SetContentLayout($oPageLayout, $oPage);
 			$sDivId = utils::Sanitize($this->sMenuId, '', 'element_identifier');
-			$oPage->add('<div id="'.$sDivId.'" class="ibo-dashboard" data-role="ibo-dashboard">');
 			$aExtraParams['dashboard_div_id'] = $sDivId;
 			$aExtraParams['from_dashboard_page'] = true;
 			$oDashboard->SetReloadURL($this->GetHyperlink($aExtraParams));
 			$oDashboard->Render($oPage, false, $aExtraParams);
-			$oPage->add('</div>');
 
 			$bEdit = utils::ReadParam('edit', false);
 			if ($bEdit) {

core/modelreflection.class.inc.php

@@ -89,9 +89,17 @@ abstract class ModelReflection
 	 * @param string $defaultValue
 	 *
 	 * @return \RunTimeIconSelectionField
+	 * @deprecated since 3.3.0 replaced by GetAvailableIcons
 	 */
 	abstract public function GetIconSelectionField($sCode, $sLabel = '', $defaultValue = '');
 
+	/**
+	 * Find available icons for the current context
+	 *
+	 * @return array of ['value', 'label', 'icon'] where 'value' is the relative path on disk, 'label' the name to display and 'icon' is the URL to get the image
+	 */
+	abstract public function GetAvailableIcons(): array;
+
 	abstract public function GetRootClass($sClass);
 	abstract public function EnumChildClasses($sClass, $iOption = ENUM_CHILD_CLASSES_EXCLUDETOP);
 }
@@ -109,6 +117,8 @@ abstract class QueryReflection
 
 class ModelReflectionRuntime extends ModelReflection
 {
+	private static array $aAllIcons = [];
+
 	public function __construct()
 	{
 	}
@@ -255,6 +265,52 @@ class ModelReflectionRuntime extends ModelReflection
 		return new RunTimeIconSelectionField($sCode, $sLabel, $defaultValue);
 	}
 
+	public function GetAvailableIcons(): array
+	{
+		$aFolderList = [
+			APPROOT.'env-'.utils::GetCurrentEnvironment() => utils::GetAbsoluteUrlModulesRoot(),
+			APPROOT.'images/icons' => utils::GetAbsoluteUrlAppRoot().'images/icons',
+		];
+		if (count(self::$aAllIcons) == 0) {
+			foreach ($aFolderList as $sFolderPath => $sUrlPrefix) {
+				$aIcons = self::FindIconsOnDisk($sFolderPath);
+				ksort($aIcons);
+
+				foreach ($aIcons as $sFilePath) {
+					self::$aAllIcons[] = ['value' => $sFilePath, 'label' => basename($sFilePath), 'icon' => $sUrlPrefix.$sFilePath];
+				}
+			}
+		}
+
+		return self::$aAllIcons;
+	}
+
+	private static function FindIconsOnDisk(string $sBaseDir, string $sDir = '', array &$aFilesSpecs = []): array
+	{
+		$aResult = [];
+		// Populate automatically the list of icon files
+		if ($hDir = @opendir($sBaseDir.'/'.$sDir)) {
+			while (($sFile = readdir($hDir)) !== false) {
+				$aMatches = [];
+				if (($sFile != '.') && ($sFile != '..') && ($sFile != 'lifecycle') && is_dir($sBaseDir.'/'.$sDir.'/'.$sFile)) {
+					$sDirSubPath = ($sDir == '') ? $sFile : $sDir.'/'.$sFile;
+					$aResult = array_merge($aResult, self::FindIconsOnDisk($sBaseDir, $sDirSubPath, $aFilesSpecs));
+				}
+				$sSize = filesize($sBaseDir.'/'.$sDir.'/'.$sFile);
+				if (isset($aFilesSpecs[$sFile]) && $aFilesSpecs[$sFile] == $sSize) {
+					continue;
+				}
+				if (preg_match('/\.(png|jpg|jpeg|gif|svg)$/i', $sFile, $aMatches)) { // png, jp(e)g, gif and svg are considered valid
+					$aResult[$sFile.'_'.$sDir] = $sDir.'/'.$sFile;
+					$aFilesSpecs[$sFile] = $sSize;
+				}
+			}
+			closedir($hDir);
+		}
+
+		return $aResult;
+	}
+
 	public function GetRootClass($sClass)
 	{
 		return MetaModel::GetRootClass($sClass);

css/backoffice/components/_form.scss

@@ -75,3 +75,26 @@ collection-entry-element {
   resize: vertical;
 }
 
+.ibo-form-compact{
+
+  .ibo-field{
+
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    label{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      width: 100%;
+      max-width: unset;
+      padding-right: 0;
+    }
+
+  }
+
+}
+

css/backoffice/components/dashlet/_dashlet.scss

@@ -19,7 +19,10 @@ $ibo-dashlet-blocker--height: 100% !default;
 .ibo-dashlet {
   position: relative;
   width: calc(#{$ibo-dashlet--width} - #{$ibo-dashlet--elements-spacing-x});
-  margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2);
+  //margin: calc(#{$ibo-dashlet--elements-spacing-y} / 2) calc(#{$ibo-dashlet--elements-spacing-x} / 2);
+
+  height: 100% !important;
+  width: 100% !important;
 
   &.dashlet-selected {
     position: relative;
@@ -38,4 +41,21 @@ $ibo-dashlet-blocker--height: 100% !default;
   width: $ibo-dashlet-blocker--width;
   height: $ibo-dashlet-blocker--height;
   cursor: not-allowed;
+}
+
+.ibo-dashlet--actions {
+  position: absolute;
+  z-index: 1000;
+  top: 0px;
+  right: 0px;
+  display: none;
+  padding: 4px;
+  border-radius: 4px;
+
+  background-color: $ibo-color-white-100;
+  @extend %ibo-elevation-100;
+}
+
+ibo-dashlet[data-edit-mode="edit"] {
+  z-index: 3;
 }

css/backoffice/components/input/_input-select-icon.scss

@@ -54,3 +54,31 @@ $ibo-input-select-icon--menu--icon--margin-right: 10px !default;
 		}
 	}
 }
+
+.ts-control > .ibo-input-select-icon--menu--item{
+
+  display: flex;
+  column-gap: 5px;
+  align-items: center;
+  padding: 5px 0;
+
+  > img{
+    width: 20px;
+  }
+
+  &:hover{
+    background: transparent;
+  }
+
+}
+
+.ts-dropdown > .ts-dropdown-content > .ibo-input-select-icon--menu--item{
+
+  display: flex;
+  column-gap: 5px;
+
+  > img{
+    width: 32px;
+  }
+
+}

css/backoffice/layout/_all.scss

@@ -15,3 +15,4 @@
 @import "wizard-container/wizard-container";
 @import "object/all";
 @import "activity-panel/all";
+@import "dashlet-panel/all";

css/backoffice/layout/dashboard/_dashboard.scss

@@ -175,3 +175,73 @@ input:checked + .ibo-dashboard--slider:before {
 input:checked + .ibo-dashboard--slider:after {
   content: $ibo-dashboard--slider--before--content;
 }
+
+// TODO 3.3 Cleanup variables
+// TODO 3.3 Move to vendor what's from gridstack
+
+
+.grid-stack {
+  display: block;
+}
+
+.ibo-dashboard[data-edit-mode="edit"] .grid-stack{
+  background-size: calc(100% / 12) var(--gs-cell-height);
+  background-color: $ibo-color-white-100;
+  background-image: linear-gradient(to right, $ibo-color-white-200 8px, transparent 8px), linear-gradient(to bottom, $ibo-color-white-200 8px, transparent 8px);
+  --gs-item-margin-top: 8px;
+  --gs-item-margin-bottom: 0;
+  --gs-item-margin-right: 0;
+  --gs-item-margin-left: 8px;
+}
+
+ibo-dashboard[data-edit-mode="view"] {
+  .ibo-dashboard--form {
+    display: none;
+  }
+}
+
+.ibo-dashboard--form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 55px;
+  background-color: $ibo-color-blue-200;
+  margin: -16px -36px 24px -36px;
+  padding: 0 36px;
+}
+
+.ibo-dashboard--form--inputs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+
+  @extend %common-font-ral-med-250;
+}
+
+.ibo-dashboard[data-edit-mode="edit"] ibo-dashlet:not([data-edit-mode="edit"]):hover .ibo-dashlet--actions {
+  display: block;
+}
+
+.ibo-dashboard[data-edit-mode="error"] .grid-stack{
+  background-image: url($approot-relative + '/images/alpha-fatal-error.gif');
+}
+
+// Our edit mode dashboard already has its own header, so we hide the standard one
+#ibo-page-header:has(+ ibo-dashboard[data-edit-mode="edit"]) {
+  display: none;
+}
+
+.ibo-dashboard[data-edit-mode="edit"] .ibo-dashboard--grid:has(ibo-dashboard-grid-slot > ibo-dashlet[data-edit-mode="edit"]) .ibo-dashboard--grid--backdrop {
+
+  position: absolute;
+  height: calc(100% + 24px);
+  // 36px is $ibo-page-container--elements-padding-x, handle variable resolution
+  width: calc(100% + 36px + 36px);
+  margin: -24px -#{36px} 0 -#{36px};
+  background-color: $ibo-color-grey-400;
+  z-index: 2;
+  opacity: 60%;
+}

css/backoffice/layout/dashlet-panel/_all.scss

@@ -0,0 +1,2 @@
+@import "dashlet-entry";
+@import "dashlet-panel";

css/backoffice/layout/dashlet-panel/_dashlet-entry.scss

@@ -0,0 +1,51 @@
+// TODO 3.3 Cleanup variables
+
+.ibo-dashlet-entry {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+
+  border: 1px solid $ibo-color-grey-300;
+  border-radius: 5px;
+  padding: 12px;
+  background-color: $ibo-color-grey-100;
+
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    background-color: $ibo-color-grey-200;
+    border-color: $ibo-color-grey-400;
+  }
+  &:active {
+    background-color: $ibo-color-grey-50;
+    border-color: $ibo-color-grey-500;
+  }
+}
+
+.ibo-dashlet-entry--icon {
+  flex-shrink: 0;
+  height: 36px;
+  width: 36px;
+}
+
+.ibo-dashlet-entry--content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-x: hidden;
+  gap: 4px;
+}
+
+.ibo-dashlet-entry--title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $ibo-color-grey-900;
+}
+
+.ibo-dashlet-entry--description {
+  font-size: 12px;
+  color: $ibo-color-grey-700;
+
+}

css/backoffice/layout/dashlet-panel/_dashlet-panel.scss

@@ -0,0 +1,66 @@
+// TODO 3.3 Cleanup variables
+
+.ibo-dashlet-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 326px;
+  background-color: $ibo-color-white-100;
+}
+
+.ibo-dashlet-panel--title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  height: 55px;
+  background-color: $ibo-color-white-200;
+  padding: 0 16px;
+  flex-grow: 0;
+  @extend %common-font-ral-med-300;
+}
+
+.ibo-dashlet-panel--entries, .ibo-dashlet-panel--form-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  padding: 16px;
+  gap: 12px;
+  &.ibo-is-hidden {
+    display: none;
+  }
+}
+
+.ibo-center-container:has(ibo-dashboard[data-edit-mode="view"]) .ibo-dashlet-panel{
+  display: none;
+}
+
+.ibo-dashlet-panel--form-container turbo-frame {
+ height: 100%;
+}
+.ibo-dashlet-panel--form-container .ibo-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  > .form {
+    overflow: auto;
+    margin-bottom: 16px;
+  }
+}
+
+.ibo-dashlet-panel--form-container--buttons {
+  display: flex;
+  flex-direction: row !important;
+  justify-content: end;
+  align-items: center;
+
+  margin: 0 -16px -16px -16px;
+  padding: 0 16px;
+  min-height: 60px;
+
+  background-color: $ibo-color-grey-50;
+  border-top: solid 1px $ibo-color-grey-400;
+}

git-split.md

@@ -0,0 +1,17 @@
+git copy of one file into two files without loosing history
+
+```
+git mv foo bar
+git commit
+
+SAVED=`git rev-parse HEAD`
+git reset --hard HEAD^
+git mv foo copy
+git commit
+
+git merge $SAVED     # This will generate conflicts
+git commit -a        # Trivially resolved like this
+
+git mv copy foo
+git commit
+```

js/forms/choices_element.js

@@ -1,3 +1,19 @@
+/**
+ * Image renderer plugin for TomSelect
+ */
+TomSelect.define('image_renderer', function(options) {
+	this.settings.render.option = function(data, escape) {
+		return `<div class="ibo-input-select-icon--menu--item">
+<img src="${options['images_resource_path']+escape(data.value)}" alt="${data.text}" />${escape(data.text)}
+</div>`;
+	};
+	this.settings.render.item = function(data, escape) {
+		return `<div class="ibo-input-select-icon--menu--item">
+<img src="${options['images_resource_path']+escape(data.value)}" alt="${data.text}"/>${escape(data.text)}
+</div>`;
+	};
+});
+
 class ChoicesElement extends HTMLSelectElement {
 
 	// register the custom element
@@ -16,6 +32,14 @@ class ChoicesElement extends HTMLSelectElement {
 			this.plugins.push('remove_button');
 		}
 
+		// plugins
+		if(this.hasAttribute('data-plugins')){
+			const aPlugins = JSON.parse(this.getAttribute('data-plugins'));
+			Array.from(aPlugins).values().forEach(plugin => {
+				this.plugins.push(plugin);
+			});
+		}
+
 		const options = {
 			plugins: this.plugins,
 			wrapperClass: 'ts-wrapper ibo-input-wrapper ibo-input-select-wrapper--with-buttons ibo-input-select-autocomplete-wrapper',
@@ -29,7 +53,7 @@ class ChoicesElement extends HTMLSelectElement {
 		};
 
 		if (this.getAttribute('data-tom-select-disable-auto-complete')) {
-			// options.controlInput = null;
+			options.controlInput = null;
 		}
 		if (this.getAttribute('data-tom-select-max-items-selected') && this.getAttribute('data-tom-select-max-items-selected') !== '') {
 			options.maxItems = parseInt(this.getAttribute('data-tom-select-max-items-selected'));
@@ -43,3 +67,4 @@ class ChoicesElement extends HTMLSelectElement {
 }
 
 
+

js/forms/turbo_stream_event_element.js

@@ -20,6 +20,8 @@ class TurboStreamEvent extends HTMLElement {
 			},
 		});
 
+		console.log(event);
+
 		document.dispatchEvent(event);
 	}
 

js/layouts/dashboard/dashboard-grid-slot.js

@@ -0,0 +1,83 @@
+class IboGridSlot extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+
+		/** @type {string} unique cell id */
+		this.id = '';
+
+		/** @type {number} */
+		this.iPosX = this.getAttribute('gs-x') ? parseInt(this.getAttribute('gs-x'), 10) : 0;
+
+		/** @type {number} */
+		this.iPostY = this.getAttribute('gs-y') ? parseInt(this.getAttribute('gs-y'), 10) : 0;
+
+		/** @type {number} */
+		this.iWidth = this.getAttribute('gs-w') ? parseInt(this.getAttribute('gs-w'), 10) : 1;
+
+		/** @type {number} */
+		this.iHeight = this.getAttribute('gs-h') ? parseInt(this.getAttribute('gs-h'), 10) : 1;
+
+		/** @type {IboDashlet|null} contained dashlet id */
+		this.sDashletId = null;
+		/** @type {IboDashlet|null} contained dashlet element */
+		this.oDashlet = this.querySelector('ibo-dashlet') || null;
+
+		/** @type {Object} freeform metadata */
+		this.meta = {};
+	}
+
+	static MakeNew(oDashletElem, aOptions = {}) {
+		const oSlot = document.createElement('ibo-dashboard-grid-slot');
+		oDashletElem.classList.add("grid-stack-item-content");
+
+		oSlot.appendChild(oDashletElem);
+		oSlot.classList.add("grid-stack-item");
+		oSlot.oDashlet = oDashletElem;
+
+		return oSlot;
+	}
+
+	Serialize(bIncludeHtml = false) {
+		const oDashlet = this.oDashlet;
+
+		const aSlotData = {
+			position_x: this.iPosX,
+			position_y: this.iPostY,
+			width: this.iWidth,
+			height: this.iHeight
+		};
+
+		const aDashletData = oDashlet ? oDashlet.Serialize(bIncludeHtml) : {};
+
+		return {
+			...aSlotData,
+			dashlet: {...aDashletData}
+		};
+	}
+
+	static observedAttributes = ['gs-x', 'gs-y', 'gs-w', 'gs-h'];
+
+
+
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		switch (name) {
+			case 'gs-x':
+				this.iPosX = parseInt(newValue, 10) || 0;
+				break;
+			case 'gs-y':
+				this.iPostY = parseInt(newValue, 10) || 0;
+				break;
+			case 'gs-w':
+				this.iWidth = parseInt(newValue, 10) || 1;
+				break;
+			case 'gs-h':
+				this.iHeight = parseInt(newValue, 10) || 1;
+				break;
+		}
+	}
+}
+
+customElements.define('ibo-dashboard-grid-slot', IboGridSlot);

js/layouts/dashboard/dashboard-grid.js

@@ -0,0 +1,161 @@
+class IboGrid extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+
+		/** @type {number} */
+		this.columnsCount = 12;
+		/** @type {boolean} unused yet*/
+		this.bEditable = false;
+		/** @type {GridStack|null} GridStack instance */
+		this.oGrid = null;
+		/** @type {Array<IboGridSlot>} */
+		this.aSlots = [];
+
+
+		this.SetupGrid();
+	}
+
+	SetupGrid() {
+		let aCandidateSlots = Array.from(this.querySelectorAll('ibo-dashboard-grid-slot'));
+		aCandidateSlots.forEach(oSlot => {
+			const aAttrs = ['gs-x', 'gs-y', 'gs-w', 'gs-h', 'id'];
+			aAttrs.forEach(sAttr => {
+				const sVal = oSlot.getAttribute(sAttr) || oSlot.getAttribute('data-'+sAttr);
+				if (sVal !== null) {
+					oSlot.setAttribute(sAttr, sVal);
+				}
+			});
+		});
+
+		this.oGrid = GridStack.init({
+			column: this.columnsCount,
+			marginTop: 8,
+			marginLeft: 8,
+			marginRight: 0,
+			marginBottom: 0,
+			resizable: {handles: 'all'},
+			disableDrag: true,
+			disableResize: true,
+			float: true
+		}, this);
+	}
+
+	getSlots() {
+		return this.oGrid.getGridItems();
+	}
+
+	SetEditable(bIsEditable) {
+		this.bEditable = bIsEditable;
+		if (this.oGrid !== null) {
+			this.oGrid.enableMove(bIsEditable);
+			this.oGrid.enableResize(bIsEditable);
+		}
+	}
+
+	GetDashletElement(sDashletId) {
+		const aSlots = this.getSlots();
+
+		for (let oSlot of aSlots) {
+
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === sDashletId) {
+				return oSlot.oDashlet;
+			}
+		}
+		return null;
+	}
+
+	AddDashlet(sDashlet, aOptions = {}) {
+		// Get the dashlet as an object
+		const oParser = new DOMParser();
+		const oDocument = oParser.parseFromString(sDashlet, 'text/html');
+		const oDashlet = oDocument.body.firstChild;
+
+		const oSlot = IboGridSlot.MakeNew(oDashlet);
+
+		this.append(oSlot);
+
+		let aDefaultOptions = {
+			autoPosition: !(aOptions.hasOwnProperty('x') || aOptions.hasOwnProperty('y')),
+		}
+		this.oGrid.makeWidget(oSlot, Object.assign(aDefaultOptions, aOptions));
+
+		return oDashlet.sDashletId;
+	}
+
+	RefreshDashlet (sDashlet, aOptions = {}) {
+		const oParser = new DOMParser();
+		const oDocument = oParser.parseFromString(sDashlet, 'text/html');
+		const oNewDashlet = oDocument.body.firstElementChild;
+
+		// Can't use oNewDashet.sDashletId as it's not in the DOM yet and connectedCallback hasn't been called yet
+		const oExistingDashlet = this.GetDashletElement(oNewDashlet.getAttribute('data-dashlet-id') );
+
+		// Copy attributes
+		for (const sAttr of oNewDashlet.attributes) {
+			oExistingDashlet.setAttribute(sAttr.name, sAttr.value);
+		}
+
+		// If we refresh a dashlet, its parent slot remains the same, we just need to update its content
+		let oSlotForExistingDashlet = null;
+		const aSlots = this.getSlots();
+		for (let oSlot of aSlots) {
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === oNewDashlet.getAttribute('data-dashlet-id')) {
+				oSlotForExistingDashlet = oSlot;
+				break;
+			}
+		}
+
+		// There must be a slot for the existing dashlet
+		if(oSlotForExistingDashlet !== null) {
+			this.oGrid.removeWidget(oSlotForExistingDashlet);
+			oSlotForExistingDashlet.innerHTML = oNewDashlet.outerHTML;
+			this.oGrid.makeWidget(oSlotForExistingDashlet);
+		}
+	}
+
+	CloneDashlet(sDashletId) {
+		const aSlots = this.getSlots();
+		for (let oSlot of aSlots) {
+
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === sDashletId) {
+				const sWidth = oSlot.iWidth;
+				const sHeight = oSlot.iHeight;
+
+				// Ask a new rendered dashlet to avoid duplicating IDs
+				// Still we'll copy width and height
+				this.closest('ibo-dashboard')?.AddNewDashlet(oSlot.oDashlet.sType, oSlot.oDashlet.formData, {
+					'w': sWidth,
+					'h': sHeight
+				});
+				break;
+			}
+		}
+	}
+	RemoveDashlet(sDashletId) {
+		const aSlots = this.getSlots();
+		for (let oSlot of aSlots) {
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === sDashletId) {
+				this.oGrid.removeWidget(oSlot);
+				break;
+			}
+		}
+	}
+
+	ClearGrid() {
+		this.oGrid.removeAll();
+	}
+
+	Serialize(bIncludeHtml = false) {
+		const aSlots = this.getSlots();
+
+		return aSlots.reduce((aAccumulator, oSlot) => {
+			aAccumulator[oSlot.oDashlet.sDashletId] = oSlot.Serialize(bIncludeHtml);
+			return aAccumulator;
+		}, {});
+	}
+}
+
+customElements.define('ibo-dashboard-grid', IboGrid);

js/layouts/dashboard/dashboard.js

@@ -0,0 +1,371 @@
+class IboDashboard extends HTMLElement {
+	constructor() {
+		super();
+
+		/** @type {string} */
+		this.sId = "";
+		/** @type {string} */
+		this.sTitle = "";
+		/** @type {boolean} unused yet */
+		this.isEditable = false;
+		/** @type {boolean} */
+		this.bEditMode = false;
+		/** @type {boolean}  unused yet */
+		this.bAutoRefresh = false;
+		/** @type {number} unused yet */
+		this.iRefreshRate = 0;
+		/** @type {IboGrid|null} */
+		this.oGrid = null;
+		/** @type {string|null} unused yet */
+		this.refreshUrl = null;
+		/** @type {string|null} unused yet */
+		this.csrfToken = null;
+		/** @type {number} Payload schema version */
+		this.schemaVersion = 2;
+
+		/** @type {object|null} Last saved state for cancel functionality, unused yet */
+		this.aLastSavedState = null;
+	}
+
+	connectedCallback() {
+		this.sId = this.getAttribute("id");
+		this.bEditMode = (this.getAttribute("data-edit-mode") === "edit");
+		this.SetupGrid();
+
+		this.BindEvents();
+	}
+
+	BindEvents() {
+		document.getElementById('ibo-dashboard-menu-edit-'+this.sId)?.addEventListener('click', (e) => {
+			e.preventDefault();
+			this.ToggleEditMode();
+			document.getElementById('ibo-dashboard-menu-edit-'+this.sId)?.classList.toggle('active', this.GetEditMode());
+		});
+
+		this.querySelector('[data-role="ibo-button"][name="save"]')?.addEventListener('click', (e) => {
+			e.preventDefault();
+			this.Save()
+		});
+
+		this.querySelector('[data-role="ibo-button"][name="cancel"]')?.addEventListener('click', (e) => {
+			e.preventDefault();
+			if (this.aLastSavedState) {
+				this.Load(this.aLastSavedState);
+			}
+			this.SetEditMode(false);
+		});
+
+		// TODO 3.3 Add event listener to dashboard toggler to get custom/default dashboard switching
+		// TODO 3.3 require load method that's not finished yet
+
+		// Bind IboDashboard object to these listener so we can access current instance
+		this._ListenToDashletFormSubmission = this._ListenToDashletFormSubmission.bind(this);
+		this._ListenToDashletFormCancellation = this._ListenToDashletFormCancellation.bind(this);
+	}
+	SetupGrid() {
+		if(this.oGrid !== null){
+			return;
+		}
+
+		this.oGrid = this.querySelector('ibo-dashboard-grid');
+	}
+
+
+	GetEditMode() {
+		return this.bEditMode;
+	}
+
+	ToggleEditMode(){
+		this.SetEditMode(!this.bEditMode);
+	}
+
+	SetEditMode(bEditMode) {
+		this.bEditMode = bEditMode;
+
+		this.oGrid.SetEditable(this.bEditMode);
+		if(this.bEditMode){
+			// TODO 3.3 If we are in default dashboard display, change to custom to allow editing
+			// TODO 3.3 Get the custom dashboard and load it, show a tooltip on the dashboard toggler to explain that we switched to custom mode
+			this.aLastSavedState = this.Serialize(true);
+			this.setAttribute("data-edit-mode", "edit");
+		}
+		else{
+			this.setAttribute("data-edit-mode", "view");
+		}
+	}
+
+	AddNewDashlet(sDashletClass, sDashletValues, aDashletOptions = {}) {
+		let sNewDashletUrl = GetAbsoluteUrlAppRoot() + '/pages/UI.php?route=dashboard.get_dashlet&dashlet_class='+encodeURIComponent(sDashletClass);
+
+		if(sDashletValues.length > 0) {
+			sNewDashletUrl += '&values=' + encodeURIComponent(sDashletValues);
+		}
+
+		fetch(sNewDashletUrl)
+			.then(async data => {
+
+				const sDashletId = this.oGrid.AddDashlet(await data.text(), aDashletOptions);
+
+				// TODO 3.3 Either open the dashlet form right away, or just enter edit mode
+				this.EditDashlet(sDashletId);
+			})
+
+	}
+
+	RefreshDashlet(oDashlet) {
+		let sGetDashletUrl = GetAbsoluteUrlAppRoot() + '/pages/UI.php?route=dashboard.get_dashlet&dashlet_class=' + encodeURIComponent(oDashlet.sType)
+			+'&dashlet_id=' + encodeURIComponent(oDashlet.sDashletId);
+
+		if(oDashlet.formData.length > 0) {
+			sGetDashletUrl += '&values=' + encodeURIComponent(oDashlet.formData);
+		}
+
+		return fetch(sGetDashletUrl)
+			.then(async data => {
+
+				this.oGrid.RefreshDashlet(await data.text());
+		});
+	}
+
+	HideDashletTogglers() {
+		const aTogglers = document.querySelector('.ibo-dashlet-panel--entries');
+		aTogglers.classList.add('ibo-is-hidden');
+	}
+
+	ShowDashletTogglers() {
+		const aTogglers = document.querySelector('.ibo-dashlet-panel--entries');
+		aTogglers.classList.remove('ibo-is-hidden');
+	}
+
+	SetDashletForm(sFormData) {
+		const oFormContainer = document.querySelector('.ibo-dashlet-panel--form-container');
+		oFormContainer.innerHTML = sFormData;
+		oFormContainer.classList.remove('ibo-is-hidden');
+	}
+
+	ClearDashletForm() {
+		const oFormContainer = document.querySelector('.ibo-dashlet-panel--form-container');
+		oFormContainer.innerHTML = '';
+		oFormContainer.classList.add('ibo-is-hidden');
+	}
+
+	DisableFormButtons() {
+		const aButtons = this.querySelectorAll('.ibo-dashboard--form--actions button');
+		aButtons.forEach( (oButton) => {
+			oButton.setAttribute('disabled', 'disabled');
+		});
+	}
+
+	EnableFormButtons() {
+		const aButtons = this.querySelectorAll('.ibo-dashboard--form--actions button');
+		aButtons.forEach( (oButton) => {
+			oButton.removeAttribute('disabled');
+		});
+	}
+
+	EditDashlet(sDashletId) {
+		const oDashlet = this.oGrid.GetDashletElement(sDashletId);
+		const me = this;
+
+		// Create backdrop to block interactions with other dashlets
+		if(this.oGrid.querySelector('.ibo-dashboard--grid--backdrop') === null) {
+			const oBackdrop = document.createElement("div");
+			oBackdrop.classList.add('ibo-dashboard--grid--backdrop');
+			this.oGrid.append(oBackdrop);
+		}
+
+		this.querySelector('ibo-dashlet[data-dashlet-id="'+sDashletId+'"]').setAttribute('data-edit-mode', 'edit');
+
+		// Disable dashboard buttons so we need to finish this edition first
+		this.DisableFormButtons();
+
+		// Fetch dashlet form from server
+		let sGetashletFormUrl = GetAbsoluteUrlAppRoot() + '/pages/UI.php?route=dashboard.get_dashlet_form&dashlet_class='+encodeURIComponent(oDashlet.sType);
+
+		if(oDashlet.formData.length > 0) {
+			sGetashletFormUrl += '&values=' + encodeURIComponent(oDashlet.formData);
+		}
+
+		fetch(sGetashletFormUrl)
+			.then(async formData => {
+				const sFormData = await formData.text();
+
+				this.HideDashletTogglers();
+				this.SetDashletForm(sFormData);
+
+				// Listen to form submission event and cancellation
+				document.addEventListener('itop:TurboStreamEvent', me._ListenToDashletFormSubmission);
+				document.querySelector('.ibo-dashlet-panel--form-container button[name="dashboard_cancel"]').addEventListener('click', me._ListenToDashletFormCancellation);
+			});
+	}
+
+	_ListenToDashletFormSubmission(event) {
+		const oDashlet = this.querySelector('ibo-dashlet[data-edit-mode="edit"]');
+		const sDashletId = oDashlet.GetDashletId();
+
+		if(event.detail.id === oDashlet.sType + '-turbo-stream-event' && event.detail.valid === "1") {
+			// Remove events
+			document.addEventListener('itop:TurboStreamEvent', this._ListenToDashletFormSubmission);
+			document.querySelector('.ibo-dashlet-panel--form-container button[name="dashboard_cancel"]').removeEventListener('click', this._ListenToDashletFormCancellation);
+
+			// Notify it all went well
+			CombodoToast.OpenToast('Dashlet created/updated', 'success');
+
+			// Clean edit mode
+			this.querySelector('ibo-dashlet[data-dashlet-id="'+sDashletId+'"]').setAttribute('data-edit-mode', 'view');
+			this.ShowDashletTogglers();
+			this.ClearDashletForm();
+
+			// Update local dashlet and refresh it
+			oDashlet.formData = event.detail.view_data;
+			this.RefreshDashlet(oDashlet);
+
+			// Re-enable dashboard buttons
+			this.EnableFormButtons();
+		}
+	}
+
+	_ListenToDashletFormCancellation(event) {
+		const oDashlet = this.querySelector('ibo-dashlet[data-edit-mode="edit"]');
+		const sDashletId = oDashlet.GetDashletId();
+		// Remove events
+		document.addEventListener('itop:TurboStreamEvent', this._ListenToDashletFormSubmission);
+		document.querySelector('.ibo-dashlet-panel--form-container button[name="dashboard_cancel"]').removeEventListener('click', this._ListenToDashletFormCancellation);
+
+		// Clean edit mode
+		this.querySelector('ibo-dashlet[data-dashlet-id="'+sDashletId+'"]').setAttribute('data-edit-mode', 'view');
+		this.ShowDashletTogglers();
+		this.ClearDashletForm();
+
+		// Re-enable dashboard buttons
+		this.EnableFormButtons();
+
+		// TODO 3.3 If this is an addition, remove the previewed dashlet
+		// TODO 3.3 If this is an edition, revert the dashlet to its initial state
+	}
+
+	CloneDashlet(sDashletId) {
+		this.oGrid.CloneDashlet(sDashletId);
+	}
+
+	RemoveDashlet(sDashletId) {
+		this.oGrid.RemoveDashlet(sDashletId);
+	}
+
+	RefreshFromBackend(bCustomDashboard = false) {
+		const sLoadDashboardUrl = GetAbsoluteUrlAppRoot() + `/pages/UI.php?route=dashboard.load&id=${this.sId}&custom=${bCustomDashboard ? 'true' : 'false'}`;
+		fetch(sLoadDashboardUrl)
+			.then(async oResponse => {
+				const oDashletData = await oResponse.json();
+				this.Load(oDashletData);
+			}
+		)
+	}
+
+	Serialize(bIncludeHtml = false) {
+		const sDashboardTitle = this.querySelector('.ibo-dashboard--form--inputs input[name="dashboard_title"]').value;
+		const sDashboardRefreshRate = this.querySelector('.ibo-dashboard--form--inputs select[name="refresh_interval"]').value;
+
+		const aSerializedGrid = this.oGrid.Serialize(bIncludeHtml);
+		return {
+			schema_version: this.schemaVersion,
+			id: this.sId,
+			title: sDashboardTitle,
+			refresh: sDashboardRefreshRate,
+			pos_dashlets: aSerializedGrid,
+			_token: ":)"
+		};
+	}
+
+	Save() {
+		// This payload shape is expected by the server
+		const aPayload = this.Serialize();
+
+		let sSaveUrl = GetAbsoluteUrlAppRoot() + '/pages/UI.php?route=dashboard.save&values='+encodeURIComponent(JSON.stringify(aPayload));
+		fetch(sSaveUrl)
+			.then(async data => {
+				const res = await data.json();
+				if(res.status === 'ok') {
+					CombodoToast.OpenToast(res.message, 'success');
+					this.aLastSavedState = this.Serialize(true);
+					this.SetEditMode(false);
+				} else {
+					CombodoToast.OpenToast(res.message, 'error');
+				}
+			})
+	}
+
+
+	Load(aSaveState) {
+		try {
+			// Validate schema version
+			if (aSaveState.schema_version !== this.schemaVersion) {
+				CombodoToast.OpenToast('Somehow, we got an incompatible dashboard schema version.', 'error');
+				return false;
+			}
+
+			// Update dashboard data
+			this.sId = aSaveState.id;
+			this.sTitle = aSaveState.title || "";
+			this.iRefreshRate = parseInt(aSaveState.refresh, 10) || 0;
+
+			// Update form inputs if they exist
+			const oTitleInput = this.querySelector('.ibo-dashboard--form--inputs input[name="dashboard_title"]');
+			if (oTitleInput) {
+				oTitleInput.value = this.sTitle;
+			}
+
+			const oRefreshSelect = this.querySelector('.ibo-dashboard--form--inputs select[name="refresh_interval"]');
+			if (oRefreshSelect) {
+				oRefreshSelect.value = aSaveState.refresh;
+			}
+
+			// Clear existing grid
+			this.ClearGrid();
+
+			// Load dashlets
+			const aDashletSlots = aSaveState.pos_dashlets || {};
+
+			for (const [sDashletId, aDashletData] of Object.entries(aDashletSlots)) {
+				const iPosX = aDashletData.position_x;
+				const iPosY = aDashletData.position_y;
+				const iWidth = aDashletData.width;
+				const iHeight = aDashletData.height;
+				const aDashlet = aDashletData.dashlet;
+
+				// We store the dashlet component in the HTML, not only the rendered dashlet
+				const sDashetHtml = aDashlet.html;
+
+				// Add dashlet to grid with its position and size
+				this.oGrid.AddDashlet(sDashetHtml, {
+					x: iPosX,
+					y: iPosY,
+					w: iWidth,
+					h: iHeight,
+					autoPosition: false
+				});
+			}
+
+			// Update last saved state
+			this.aLastSavedState = aSaveState;
+
+			return true;
+
+		} catch (error) {
+			console.error('Error loading dashboard state:', error);
+			CombodoToast.OpenToast('Error loading dashboard state', 'error');
+			return false;
+		}
+	}
+
+	ClearGrid() {
+		this.oGrid.ClearGrid();
+	}
+
+	DisplayError(sMessage, sSeverity = 'error') {
+		// TODO 3.3: Make this real
+		this.setAttribute("data-edit-mode", "error");
+	}
+}
+
+customElements.define('ibo-dashboard', IboDashboard);

js/layouts/dashboard/dashlet.js

@@ -0,0 +1,68 @@
+class IboDashlet extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		/** @type {string} */
+		this.sDashletId = this.GetDashletId();
+		/** @type {string} */
+		this.sType = this.GetDashletType();
+		/** @type {Object} */
+		this.formData = this.GetFormData();
+		/** @type {Object} unused yet */
+		this.meta = {};
+
+		this.BindEvents();
+	}
+	BindEvents() {
+		// Bind any dashlet-specific events here
+		this.querySelector('.ibo-dashlet--actions [data-role="ibo-dashlet-edit"]')?.addEventListener('click', (e) => {
+			this.closest('ibo-dashboard')?.EditDashlet(this.sDashletId);
+		});
+
+		this.querySelector('.ibo-dashlet--actions [data-role="ibo-dashlet-clone"]')?.addEventListener('click', (e) => {
+			this.closest('ibo-dashboard')?.CloneDashlet(this.sDashletId);
+		});
+
+		this.querySelector('.ibo-dashlet--actions [data-role="ibo-dashlet-remove"]')?.addEventListener('click', (e) => {
+			this.closest('ibo-dashboard')?.RemoveDashlet(this.sDashletId);
+		});
+	}
+
+	GetDashletId() {
+		return this.getAttribute('data-dashlet-id');
+	}
+
+	GetDashletType() {
+		return this.getAttribute("data-dashlet-type") || "";
+	}
+
+	GetFormData() {
+		return this.getAttribute("data-form-view-data") || "";
+	}
+
+	static MakeNew(sDashlet) {
+		const oDashlet = document.createElement('ibo-dashlet');
+		oDashlet.innerHTML = sDashlet;
+
+		return oDashlet;
+	}
+
+	Serialize(bIncludeHtml = false) {
+	// TODO 3.3 Should we use getters ?
+		let aDashletData = {
+			id: this.sDashletId,
+			type: this.sType,
+			properties: JSON.parse(this.formData),
+		};
+
+		if(bIncludeHtml) {
+			aDashletData.html = this.outerHTML;
+		}
+
+		return aDashletData;
+	}
+}
+
+customElements.define('ibo-dashlet', IboDashlet);

lib/composer/autoload_classmap.php

@@ -130,6 +130,27 @@ return array(
     'CheckableExpression' => $baseDir . '/core/oql/oqlquery.class.inc.php',
     'Collator' => $vendorDir . '/symfony/polyfill-intl-icu/Resources/stubs/Collator.php',
     'Combodo\\iTop\\Application\\Branding' => $baseDir . '/sources/Application/Branding.php',
+    'Combodo\\iTop\\Application\\Dashboard\\Controller\\DashboardController' => $baseDir . '/sources/Application/Dashboard/Controller/DashboardController.php',
+    'Combodo\\iTop\\Application\\Dashboard\\DashboardException' => $baseDir . '/sources/Application/Dashboard/DashboardException.php',
+    'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashboardFormBlock' => $baseDir . '/sources/Application/Dashboard/FormBlock/DashboardFormBlock.php',
+    'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashletFormBlock' => $baseDir . '/sources/Application/Dashboard/FormBlock/DashletFormBlock.php',
+    'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashletPropertiesFormBlock' => $baseDir . '/sources/Application/Dashboard/FormBlock/DashletPropertiesFormBlock.php',
+    'Combodo\\iTop\\Application\\Dashboard\\Layout\\DashboardLayoutGrid' => $baseDir . '/sources/Application/Dashboard/Layout/DashboardLayoutGrid.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletBadge' => $baseDir . '/sources/Application/Dashlet/Core/DashletBadge.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupBy' => $baseDir . '/sources/Application/Dashlet/Core/DashletGroupBy.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByBars' => $baseDir . '/sources/Application/Dashlet/Core/DashletGroupByBars.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByPie' => $baseDir . '/sources/Application/Dashlet/Core/DashletGroupByPie.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByTable' => $baseDir . '/sources/Application/Dashlet/Core/DashletGroupByTable.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletHeaderDynamic' => $baseDir . '/sources/Application/Dashlet/Core/DashletHeaderDynamic.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletHeaderStatic' => $baseDir . '/sources/Application/Dashlet/Core/DashletHeaderStatic.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletObjectList' => $baseDir . '/sources/Application/Dashlet/Core/DashletObjectList.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletPlainText' => $baseDir . '/sources/Application/Dashlet/Core/DashletPlainText.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletProxy' => $baseDir . '/sources/Application/Dashlet/Core/DashletProxy.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletUnknown' => $baseDir . '/sources/Application/Dashlet/Core/DashletUnknown.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Dashlet' => $baseDir . '/sources/Application/Dashlet/Dashlet.php',
+    'Combodo\\iTop\\Application\\Dashlet\\DashletException' => $baseDir . '/sources/Application/Dashlet/DashletException.php',
+    'Combodo\\iTop\\Application\\Dashlet\\DashletFactory' => $baseDir . '/sources/Application/Dashlet/DashletFactory.php',
+    'Combodo\\iTop\\Application\\Dashlet\\Service\\DashletService' => $baseDir . '/sources/Application/Dashlet/Service/DashletService.php',
     'Combodo\\iTop\\Application\\EventRegister\\ApplicationEvents' => $baseDir . '/sources/Application/EventRegister/ApplicationEvents.php',
     'Combodo\\iTop\\Application\\Helper\\CKEditorHelper' => $baseDir . '/sources/Application/Helper/CKEditorHelper.php',
     'Combodo\\iTop\\Application\\Helper\\ExportHelper' => $baseDir . '/sources/Application/Helper/ExportHelper.php',
@@ -170,6 +191,7 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletFactory' => $baseDir . '/sources/Application/UI/Base/Component/Dashlet/DashletFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletHeaderStatic' => $baseDir . '/sources/Application/UI/Base/Component/Dashlet/DashletHeaderStatic.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletPlainText' => $baseDir . '/sources/Application/UI/Base/Component/Dashlet/DashletPlainText.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletWrapper' => $baseDir . '/sources/Application/UI/Base/Component/Dashlet/DashletWrapper.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTable' => $baseDir . '/sources/Application/UI/Base/Component/DataTable/DataTable.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTableConfig\\DataTableConfig' => $baseDir . '/sources/Application/UI/Base/Component/DataTable/DataTableConfig/DataTableConfig.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTableSettings' => $baseDir . '/sources/Application/UI/Base/Component/DataTable/DataTableSettings.php',
@@ -270,8 +292,13 @@ return array(
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\CaseLogEntryForm\\CaseLogEntryForm' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\CaseLogEntryForm\\CaseLogEntryFormFactory' => $baseDir . '/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardGrid' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardGrid.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardGridSlot' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardGridSlot.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletEntry' => $baseDir . '/sources/Application/UI/Base/Layout/DashletPanel/DashletEntry.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletPanel' => $baseDir . '/sources/Application/UI/Base/Layout/DashletPanel/DashletPanel.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletPanelFactory' => $baseDir . '/sources/Application/UI/Base/Layout/DashletPanel/DashletPanelFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
     'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',
@@ -483,6 +510,7 @@ return array(
     'Combodo\\iTop\\Forms\\Block\\Base\\CheckboxFormBlock' => $baseDir . '/sources/Forms/Block/Base/CheckboxFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceFormBlock' => $baseDir . '/sources/Forms/Block/Base/ChoiceFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceFromInputsBlock' => $baseDir . '/sources/Forms/Block/Base/ChoiceFromInputsBlock.php',
+    'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceImageFormBlock' => $baseDir . '/sources/Forms/Block/Base/ChoiceImageFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\CollectionBlock' => $baseDir . '/sources/Forms/Block/Base/CollectionBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\DateFormBlock' => $baseDir . '/sources/Forms/Block/Base/DateFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\DateTimeFormBlock' => $baseDir . '/sources/Forms/Block/Base/DateTimeFormBlock.php',
@@ -490,6 +518,7 @@ return array(
     'Combodo\\iTop\\Forms\\Block\\Base\\HiddenFormBlock' => $baseDir . '/sources/Forms/Block/Base/HiddenFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\IntegerFormBlock' => $baseDir . '/sources/Forms/Block/Base/IntegerFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\NumberFormBlock' => $baseDir . '/sources/Forms/Block/Base/NumberFormBlock.php',
+    'Combodo\\iTop\\Forms\\Block\\Base\\PolymorphicFormBlock' => $baseDir . '/sources/Forms/Block/Base/PolymorphicFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\TextAreaFormBlock' => $baseDir . '/sources/Forms/Block/Base/TextAreaFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\Base\\TextFormBlock' => $baseDir . '/sources/Forms/Block/Base/TextFormBlock.php',
     'Combodo\\iTop\\Forms\\Block\\DataModel\\AttributeChoiceFormBlock' => $baseDir . '/sources/Forms/Block/DataModel/AttributeChoiceFormBlock.php',
@@ -557,15 +586,19 @@ return array(
     'Combodo\\iTop\\PropertyType\\PropertyTypeFactory' => $baseDir . '/sources/PropertyType/PropertyTypeFactory.php',
     'Combodo\\iTop\\PropertyType\\PropertyTypeService' => $baseDir . '/sources/PropertyType/PropertyTypeService.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\SerializerException' => $baseDir . '/sources/PropertyType/Serializer/SerializerException.php',
+    'Combodo\\iTop\\PropertyType\\Serializer\\XMLEncoder' => $baseDir . '/sources/PropertyType/Serializer/XMLEncoder.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\AbstractXMLFormat' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/AbstractXMLFormat.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatCSV' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatCSV.php',
+    'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatCollectionWithId' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatCollectionWithId.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatFactory' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatFactory.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatFlatArray' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatFlatArray.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatValueAsId' => $baseDir . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatValueAsId.php',
+    'Combodo\\iTop\\PropertyType\\Serializer\\XMLNormalizer' => $baseDir . '/sources/PropertyType/Serializer/XMLNormalizer.php',
     'Combodo\\iTop\\PropertyType\\Serializer\\XMLSerializer' => $baseDir . '/sources/PropertyType/Serializer/XMLSerializer.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\AbstractValueType' => $baseDir . '/sources/PropertyType/ValueType/AbstractValueType.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\AbstractBranchValueType' => $baseDir . '/sources/PropertyType/ValueType/Branch/AbstractBranchValueType.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypeCollection' => $baseDir . '/sources/PropertyType/ValueType/Branch/ValueTypeCollection.php',
+    'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypePolymorphic' => $baseDir . '/sources/PropertyType/ValueType/Branch/ValueTypePolymorphic.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypePropertyTree' => $baseDir . '/sources/PropertyType/ValueType/Branch/ValueTypePropertyTree.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\Leaf\\AbstractLeafValueType' => $baseDir . '/sources/PropertyType/ValueType/Leaf/AbstractLeafValueType.php',
     'Combodo\\iTop\\PropertyType\\ValueType\\Leaf\\ValueTypeAggregateFunction' => $baseDir . '/sources/PropertyType/ValueType/Leaf/ValueTypeAggregateFunction.php',
@@ -676,19 +709,6 @@ return array(
     'DashboardLayoutThreeCols' => $baseDir . '/application/dashboardlayout.class.inc.php',
     'DashboardLayoutTwoCols' => $baseDir . '/application/dashboardlayout.class.inc.php',
     'DashboardMenuNode' => $baseDir . '/application/menunode.class.inc.php',
-    'Dashlet' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletBadge' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletEmptyCell' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletGroupBy' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletGroupByBars' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletGroupByPie' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletGroupByTable' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletHeaderDynamic' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletHeaderStatic' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletObjectList' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletPlainText' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletProxy' => $baseDir . '/application/dashlet.class.inc.php',
-    'DashletUnknown' => $baseDir . '/application/dashlet.class.inc.php',
     'Datamatrix' => $vendorDir . '/tecnickcom/tcpdf/include/barcodes/datamatrix.php',
     'DateError' => $vendorDir . '/symfony/polyfill-php83/Resources/stubs/DateError.php',
     'DateException' => $vendorDir . '/symfony/polyfill-php83/Resources/stubs/DateException.php',

lib/composer/autoload_static.php

@@ -516,6 +516,27 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'CheckableExpression' => __DIR__ . '/../..' . '/core/oql/oqlquery.class.inc.php',
         'Collator' => __DIR__ . '/..' . '/symfony/polyfill-intl-icu/Resources/stubs/Collator.php',
         'Combodo\\iTop\\Application\\Branding' => __DIR__ . '/../..' . '/sources/Application/Branding.php',
+        'Combodo\\iTop\\Application\\Dashboard\\Controller\\DashboardController' => __DIR__ . '/../..' . '/sources/Application/Dashboard/Controller/DashboardController.php',
+        'Combodo\\iTop\\Application\\Dashboard\\DashboardException' => __DIR__ . '/../..' . '/sources/Application/Dashboard/DashboardException.php',
+        'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashboardFormBlock' => __DIR__ . '/../..' . '/sources/Application/Dashboard/FormBlock/DashboardFormBlock.php',
+        'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashletFormBlock' => __DIR__ . '/../..' . '/sources/Application/Dashboard/FormBlock/DashletFormBlock.php',
+        'Combodo\\iTop\\Application\\Dashboard\\FormBlock\\DashletPropertiesFormBlock' => __DIR__ . '/../..' . '/sources/Application/Dashboard/FormBlock/DashletPropertiesFormBlock.php',
+        'Combodo\\iTop\\Application\\Dashboard\\Layout\\DashboardLayoutGrid' => __DIR__ . '/../..' . '/sources/Application/Dashboard/Layout/DashboardLayoutGrid.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletBadge' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletBadge.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupBy' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletGroupBy.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByBars' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletGroupByBars.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByPie' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletGroupByPie.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletGroupByTable' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletGroupByTable.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletHeaderDynamic' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletHeaderDynamic.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletHeaderStatic' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletHeaderStatic.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletObjectList' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletObjectList.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletPlainText' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletPlainText.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletProxy' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletProxy.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Core\\DashletUnknown' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Core/DashletUnknown.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Dashlet' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Dashlet.php',
+        'Combodo\\iTop\\Application\\Dashlet\\DashletException' => __DIR__ . '/../..' . '/sources/Application/Dashlet/DashletException.php',
+        'Combodo\\iTop\\Application\\Dashlet\\DashletFactory' => __DIR__ . '/../..' . '/sources/Application/Dashlet/DashletFactory.php',
+        'Combodo\\iTop\\Application\\Dashlet\\Service\\DashletService' => __DIR__ . '/../..' . '/sources/Application/Dashlet/Service/DashletService.php',
         'Combodo\\iTop\\Application\\EventRegister\\ApplicationEvents' => __DIR__ . '/../..' . '/sources/Application/EventRegister/ApplicationEvents.php',
         'Combodo\\iTop\\Application\\Helper\\CKEditorHelper' => __DIR__ . '/../..' . '/sources/Application/Helper/CKEditorHelper.php',
         'Combodo\\iTop\\Application\\Helper\\ExportHelper' => __DIR__ . '/../..' . '/sources/Application/Helper/ExportHelper.php',
@@ -556,6 +577,7 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Dashlet/DashletFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletHeaderStatic' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Dashlet/DashletHeaderStatic.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletPlainText' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Dashlet/DashletPlainText.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletWrapper' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Dashlet/DashletWrapper.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTable' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/DataTable/DataTable.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTableConfig\\DataTableConfig' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/DataTable/DataTableConfig/DataTableConfig.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Component\\DataTable\\DataTableSettings' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/DataTable/DataTableSettings.php',
@@ -656,8 +678,13 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\CaseLogEntryForm\\CaseLogEntryForm' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryForm.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\ActivityPanel\\CaseLogEntryForm\\CaseLogEntryFormFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/ActivityPanel/CaseLogEntryForm/CaseLogEntryFormFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardGrid' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardGrid.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardGridSlot' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardGridSlot.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletEntry' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/DashletPanel/DashletEntry.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletPanel' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/DashletPanel/DashletPanel.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Layout\\DashletPanel\\DashletPanelFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/DashletPanel/DashletPanelFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
         'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',
@@ -869,6 +896,7 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Forms\\Block\\Base\\CheckboxFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/CheckboxFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/ChoiceFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceFromInputsBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/ChoiceFromInputsBlock.php',
+        'Combodo\\iTop\\Forms\\Block\\Base\\ChoiceImageFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/ChoiceImageFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\CollectionBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/CollectionBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\DateFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/DateFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\DateTimeFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/DateTimeFormBlock.php',
@@ -876,6 +904,7 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\Forms\\Block\\Base\\HiddenFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/HiddenFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\IntegerFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/IntegerFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\NumberFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/NumberFormBlock.php',
+        'Combodo\\iTop\\Forms\\Block\\Base\\PolymorphicFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/PolymorphicFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\TextAreaFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/TextAreaFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\Base\\TextFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/Base/TextFormBlock.php',
         'Combodo\\iTop\\Forms\\Block\\DataModel\\AttributeChoiceFormBlock' => __DIR__ . '/../..' . '/sources/Forms/Block/DataModel/AttributeChoiceFormBlock.php',
@@ -943,15 +972,19 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'Combodo\\iTop\\PropertyType\\PropertyTypeFactory' => __DIR__ . '/../..' . '/sources/PropertyType/PropertyTypeFactory.php',
         'Combodo\\iTop\\PropertyType\\PropertyTypeService' => __DIR__ . '/../..' . '/sources/PropertyType/PropertyTypeService.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\SerializerException' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/SerializerException.php',
+        'Combodo\\iTop\\PropertyType\\Serializer\\XMLEncoder' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLEncoder.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\AbstractXMLFormat' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/AbstractXMLFormat.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatCSV' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatCSV.php',
+        'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatCollectionWithId' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatCollectionWithId.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatFactory' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatFactory.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatFlatArray' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatFlatArray.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLFormat\\XMLFormatValueAsId' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLFormat/XMLFormatValueAsId.php',
+        'Combodo\\iTop\\PropertyType\\Serializer\\XMLNormalizer' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLNormalizer.php',
         'Combodo\\iTop\\PropertyType\\Serializer\\XMLSerializer' => __DIR__ . '/../..' . '/sources/PropertyType/Serializer/XMLSerializer.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\AbstractValueType' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/AbstractValueType.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\AbstractBranchValueType' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Branch/AbstractBranchValueType.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypeCollection' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Branch/ValueTypeCollection.php',
+        'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypePolymorphic' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Branch/ValueTypePolymorphic.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\Branch\\ValueTypePropertyTree' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Branch/ValueTypePropertyTree.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\Leaf\\AbstractLeafValueType' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Leaf/AbstractLeafValueType.php',
         'Combodo\\iTop\\PropertyType\\ValueType\\Leaf\\ValueTypeAggregateFunction' => __DIR__ . '/../..' . '/sources/PropertyType/ValueType/Leaf/ValueTypeAggregateFunction.php',
@@ -1062,19 +1095,6 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
         'DashboardLayoutThreeCols' => __DIR__ . '/../..' . '/application/dashboardlayout.class.inc.php',
         'DashboardLayoutTwoCols' => __DIR__ . '/../..' . '/application/dashboardlayout.class.inc.php',
         'DashboardMenuNode' => __DIR__ . '/../..' . '/application/menunode.class.inc.php',
-        'Dashlet' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletBadge' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletEmptyCell' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletGroupBy' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletGroupByBars' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletGroupByPie' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletGroupByTable' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletHeaderDynamic' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletHeaderStatic' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletObjectList' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletPlainText' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletProxy' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
-        'DashletUnknown' => __DIR__ . '/../..' . '/application/dashlet.class.inc.php',
         'Datamatrix' => __DIR__ . '/..' . '/tecnickcom/tcpdf/include/barcodes/datamatrix.php',
         'DateError' => __DIR__ . '/..' . '/symfony/polyfill-php83/Resources/stubs/DateError.php',
         'DateException' => __DIR__ . '/..' . '/symfony/polyfill-php83/Resources/stubs/DateException.php',

node_modules/.package-lock.json

@@ -186,6 +186,22 @@
         "delegate": "^3.1.2"
       }
     },
+    "node_modules/gridstack": {
+      "version": "12.4.2",
+      "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-12.4.2.tgz",
+      "integrity": "sha512-aXbJrQpi3LwpYXYOr4UriPM5uc/dPcjK01SdOE5PDpx2vi8tnLhU7yBg/1i4T59UhNkG/RBfabdFUObuN+gMnw==",
+      "funding": [
+        {
+          "type": "paypal",
+          "url": "https://www.paypal.me/alaind831"
+        },
+        {
+          "type": "venmo",
+          "url": "https://www.venmo.com/adumesny"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",

node_modules/gridstack/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2025 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/gridstack/README.md

@@ -0,0 +1,565 @@
+# gridstack.js
+
+[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
+[![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop)
+[![downloads](https://img.shields.io/npm/dm/gridstack.svg)](https://www.npmjs.com/package/gridstack)
+
+Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with [Angular](https://angular.io/) (included), [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others (see [frameworks](#specific-frameworks) section).
+
+Inspired by no-longer maintained gridster, built with love.
+
+Check http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/).
+
+If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind831) (use **“send to a friend”** to avoid 3% fee) or [Venmo](https://www.venmo.com/adumesny) (adumesny) and help support it!
+
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)
+[![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny)
+
+Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-3978nsff6-HDNE_N45DydP36NBSV9JFQ)
+
+<!-- [![Slack Status](https://gridstackjs.com/badge.svg)](https://gridstackjs.slack.com) -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
+
+- [Demo and API Documentation](#demo-and-api-documentation)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Include](#include)
+  - [Basic usage](#basic-usage)
+  - [Requirements](#requirements)
+  - [Specific frameworks](#specific-frameworks)
+  - [Extend Library](#extend-library)
+  - [Extend Engine](#extend-engine)
+  - [Change grid columns](#change-grid-columns)
+  - [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12)
+  - [Override resizable/draggable options](#override-resizabledraggable-options)
+  - [Touch devices support](#touch-devices-support)
+- [Migrating](#migrating)
+  - [Migrating to v0.6](#migrating-to-v06)
+  - [Migrating to v1](#migrating-to-v1)
+  - [Migrating to v2](#migrating-to-v2)
+  - [Migrating to v3](#migrating-to-v3)
+  - [Migrating to v4](#migrating-to-v4)
+  - [Migrating to v5](#migrating-to-v5)
+  - [Migrating to v6](#migrating-to-v6)
+  - [Migrating to v7](#migrating-to-v7)
+  - [Migrating to v8](#migrating-to-v8)
+  - [Migrating to v9](#migrating-to-v9)
+  - [Migrating to v10](#migrating-to-v10)
+  - [Migrating to v11](#migrating-to-v11)
+  - [Migrating to v12](#migrating-to-v12)
+- [jQuery Application](#jquery-application)
+- [Changes](#changes)
+- [Usage Trend](#usage-trend)
+- [The Team](#the-team)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+
+# Demo and API Documentation
+
+Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/), and complete [API documentation](https://gridstack.github.io/gridstack.js/doc/html/) ([markdown](https://github.com/gridstack/gridstack.js/tree/master/doc/API.md))
+
+# Usage
+
+## Install
+[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
+
+```js
+yarn add gridstack
+// or
+npm install --save gridstack
+```
+
+## Include
+
+ES6 or Typescript
+
+```js
+import 'gridstack/dist/gridstack.min.css';
+import { GridStack } from 'gridstack';
+```
+
+Alternatively (single combined file, notice the -all.js) in html
+
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
+```
+
+**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future) and DROPPED again in v12 (css variable needed).
+You can use the es5 files and polyfill (larger) for older browser instead. For example:
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
+<script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>
+```
+
+
+## Basic usage
+
+creating items dynamically...
+
+```js
+// ...in your HTML
+<div class="grid-stack"></div>
+
+// ...in your script
+var grid = GridStack.init();
+grid.addWidget({w: 2, content: 'item 1'});
+```
+
+... or creating from list
+
+```js
+// using serialize data instead of .addWidget()
+const serializedData = [
+  {x: 0, y: 0, w: 2, h: 2},
+  {x: 2, y: 3, w: 3, content: 'item 2'},
+  {x: 1, y: 3}
+];
+
+grid.load(serializedData);
+```
+
+... or DOM created items
+
+```js
+// ...in your HTML
+<div class="grid-stack">
+  <div class="grid-stack-item">
+    <div class="grid-stack-item-content">Item 1</div>
+  </div>
+  <div class="grid-stack-item" gs-w="2">
+    <div class="grid-stack-item-content">Item 2 wider</div>
+  </div>
+</div>
+
+// ...in your script
+GridStack.init();
+```
+
+...or see list of all [API and options](https://github.com/gridstack/gridstack.js/tree/master/doc) available.
+
+see [stackblitz sample](https://stackblitz.com/edit/gridstack-demo) as running example too.
+
+## Requirements
+
+GridStack no longer requires external dependencies as of v1 (lodash was removed in v0.5 and jquery API in v1). v3 is a complete HTML5 re-write removing need for jquery. v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
+
+## Specific frameworks
+
+search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
+
+- **Angular**: we ship out of the box an Angular wrapper - see <a href="https://github.com/gridstack/gridstack.js/tree/master/angular" target="_blank">Angular Component</a>.
+- **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. Code has **not been vented** at as I use components.
+- **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
+- **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
+- **knockout**: see [demo](https://gridstackjs.com/demo/knockout.html) using component, but check [custom bindings ticket](https://github.com/gridstack/gridstack.js/issues/465) which is likely better approach.
+- **Rails**: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
+- **React**: work in progress to have wrapper code: see <a href="https://github.com/gridstack/gridstack.js/tree/master/react" target="_blank">React Component</a>. But also see [demo](https://gridstackjs.com/demo/react.html) with [src](https://github.com/gridstack/gridstack.js/tree/master/demo/react.html), or  [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/tree/master/src/App.js), or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
+- **Vue**: see [demo](https://gridstackjs.com/demo/vue3js.html) with [v3 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue3js.html) or [v2 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue2js.html)
+- **Aurelia**: [aurelia-gridstack](https://github.com/aurelia-ui-toolkits/aurelia-gridstack), see [demo](https://aurelia-ui-toolkits.github.io/aurelia-gridstack/)
+
+## Extend Library
+
+You can easily extend or patch gridstack with code like this:
+
+```js
+// extend gridstack with our own custom method
+GridStack.prototype.printCount = function() {
+  console.log('grid has ' + this.engine.nodes.length + ' items');
+};
+
+let grid = GridStack.init();
+
+// you can now call
+grid.printCount();
+```
+
+## Extend Engine
+
+You can now (5.1+) easily create your own layout engine to further customize your usage. Here is a typescript example
+
+```ts
+import { GridStack, GridStackEngine, GridStackNode, GridStackMoveOpts } from 'gridstack';
+
+class CustomEngine extends GridStackEngine {
+
+  /** refined this to move the node to the given new location */
+  public override moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
+    // keep the same original X and Width and let base do it all...
+    o.x = node.x;
+    o.w = node.w;
+    return super.moveNode(node, o);
+  }
+}
+
+GridStack.registerEngine(CustomEngine); // globally set our custom class
+```
+
+## Change grid columns
+
+GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
+
+1) Change the `column` grid option when creating a grid to your number N
+```js
+GridStack.init( {column: N} );
+```
+
+NOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes
+
+2) also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<link href="node_modules/gridstack/dist/gridstack-extra.min.css" rel="stylesheet"/>
+
+<div class="grid-stack">...</div>
+```
+
+Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.min.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
+
+See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
+
+## Custom columns CSS (OLD, not needed with v12+)
+
+NOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes
+
+If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
+
+For instance for 4-column grid you need CSS to be:
+
+```css
+.gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
+.gs-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
+
+.gs-4 > .grid-stack-item { width: 25% }
+.gs-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
+.gs-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
+.gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
+```
+
+Better yet, here is a SCSS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
+
+```scss
+$columns: 20;
+@function fixed($float) {
+  @return round($float * 1000) / 1000; // total 2+3 digits being %
+}
+.gs-#{$columns} > .grid-stack-item {
+
+  width: fixed(100% / $columns);
+
+  @for $i from 1 through $columns - 1 {
+    &[gs-x='#{$i}'] { left: fixed((100% / $columns) * $i); }
+    &[gs-w='#{$i+1}'] { width: fixed((100% / $columns) * ($i+1)); }
+  }
+}
+```
+
+you can also use the SCSS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
+
+Sample gulp command for 30 columns:
+```js
+gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
+        .pipe(replace('$start: 2 !default;','$start: 30;'))
+        .pipe(replace('$end: 11 !default;','$end: 30;'))
+        .pipe(sass({outputStyle: 'compressed'}))
+        .pipe(rename({extname: '.min.css'}))
+        .pipe(gulp.dest('dist/css'))
+```
+
+## Override resizable/draggable options
+
+You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle
+you can init gridstack like:
+
+```js
+GridStack.init({
+  resizable: {
+    handles: 'e,se,s,sw,w'
+  }
+});
+```
+
+## Touch devices support
+
+gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.
+Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.
+
+This option is now the default:
+
+```js
+let options = {
+  alwaysShowResizeHandle: 'mobile' // true if we're on mobile devices
+};
+GridStack.init(options);
+```
+
+See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
+
+# Migrating
+## Migrating to v0.6
+
+starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/master/doc#events) if you didn't and relied on the old broken behavior.
+
+## Migrating to v1
+
+v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
+
+0. see previous step if not on v0.6 already
+
+1. your code only needs to `import GridStack from 'gridstack'` or include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) section.
+
+2. code change:
+
+**OLD** initializing code + adding a widget + adding an event:
+```js
+// initialization returned Jquery element, requiring second call to get GridStack var
+var grid = $('.grid-stack').gridstack(opts?).data('gridstack');
+
+// returned Jquery element
+grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);
+
+// jquery event handler
+$('.grid-stack').on('added', function(e, items) {/* items contains info */});
+
+// grid access after init
+var grid = $('.grid-stack').data('gridstack');
+```
+**NEW**
+```js
+// element identifier defaults to '.grid-stack', returns the grid
+// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
+var grid = GridStack.init(opts?, element?);
+
+// returns DOM element
+grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
+// Note: in 3.x it's ever simpler 
+// grid.addWidget({w:2, content: 'test'})
+
+// event handler
+grid.on('added', function(e, items) {/* items contains info */});
+
+// grid access after init
+var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
+```
+Other rename changes
+
+```js
+`GridStackUI` --> `GridStack`
+`GridStackUI.GridStackEngine` --> `GridStack.Engine`
+`grid.container` (jquery grid wrapper) --> `grid.el` // (grid DOM element)
+`grid.grid` (GridStackEngine) --> `grid.engine`
+`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` // to get value, old API still supported though
+```
+
+Recommend looking at the [many samples](./demo) for more code examples.
+
+## Migrating to v2
+
+make sure to read v1 migration first!
+
+v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
+
+1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).
+
+```js
+`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
+// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
+`float()` --> `getFloat()` // to get value
+`cellHeight()` --> `getCellHeight()` // to get value
+`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
+`verticalMargin()` --> `getMargin()` // to get value
+```
+
+2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.
+
+3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`.
+
+**Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
+
+## Migrating to v3
+
+make sure to read v2 migration first!
+
+v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version instead (188k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same is now `gridstack-jq.js`) - see [include info](#include).
+
+**NOTE**: HTML5 version is almost on parity with the old jquery-ui based drag&drop. the `containment` (prevent a child from being dragged outside it's parent) and `revert` (not clear what it is for yet) are not yet implemented in initial release of v3.0.0.<br>
+Also mobile devices don't support h5 `drag` events (will need to handle `touch`) whereas v3.2 jq version now now supports out of the box (see [v3.2 release](https://github.com/gridstack/gridstack.js/releases/tag/v3.2.0))
+
+Breaking changes:
+
+1. include (as mentioned) need to change
+
+2. `GridStack.update(el, opt)` now takes single `GridStackWidget` options instead of only supporting (x,y,w,h) BUT legacy call in JS will continue working the same for now. That method is a complete re-write and does the right constrain and updates now for all the available params.
+
+3. `locked()`, `move()`, `resize()`, `minWidth()`, `minHeight()`, `maxWidth()`, `maxHeight()` methods are hidden from Typescript (JS can still call for now) as they are just 1 liner wrapper around `update(el, opt)` anyway and will go away soon. (ex: `move(el, x, y)` => `update(el, {x, y})`)
+
+4. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require less typing and more efficient (2k saved in .js alone!).
+
+5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
+
+## Migrating to v4
+
+make sure to read v3 migration first!
+
+v4 is a complete re-write of the collision and drag in/out heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.
+
+**Unlikely** Breaking Changes (internal usage):
+
+1. `removeTimeout` was removed (feedback over trash will be immediate - actual removal still on mouse up)
+
+2. the following `GridStackEngine` methods changed (used internally, doesn't affect `GridStack` public API)
+
+```js
+// moved to 3 methods with new option params to support new code and pixel coverage check
+`collision()` -> `collide(), collideAll(), collideCoverage()`
+`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`
+`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`
+`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`
+```
+
+3. removed old obsolete (v0.6-v1 methods/attrs) `getGridHeight()`, `verticalMargin`, `data-gs-current-height`,
+`locked()`, `maxWidth()`, `minWidth()`, `maxHeight()`, `minHeight()`, `move()`, `resize()`
+
+
+## Migrating to v5
+
+make sure to read v4 migration first!
+
+v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:
+You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.
+
+## Migrating to v6
+
+the API did not really change from v5, but a complete re-write of Drag&Drop to use native `mouseevent` (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and `touchevent` (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).
+
+The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.
+
+## Migrating to v7
+
+New addition, no API breakage per say. See release notes about creating sub-grids on the fly.
+
+## Migrating to v8
+
+Possible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).
+* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was both types which is error prone)
+* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
+* removed `GridStackOptions.dragInOptions` since `GridStack.setupDragIn()` has it replaced since 4.0
+* remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
+* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.gs-12`, extra.css is less than 1/4th it original size!, `gs-min|max_w|h` attribute no longer written (but read)
+
+## Migrating to v9
+
+New addition - see release notes about `sizeToContent` feature.
+Possible break:
+* `GridStack.onParentResize()` is now called `onResize()` as grid now directly track size change, no longer involving parent per say to tell us anything. Note sure why it was public.
+
+## Migrating to v10
+
+we now support much richer responsive behavior with `GridStackOptions.columnOpts` including any breakpoint width:column pairs, or automatic column sizing.
+
+breaking change: 
+* `disableOneColumnMode`, `oneColumnSize` have been removed (thought we temporary convert if you have them). use `columnOpts: { breakpoints: [{w:768, c:1}] }` for the same behavior.
+* 1 column mode switch is no longer by default (`columnOpts` is not defined) as too many new users had issues. Instead set it explicitly (see above).
+* `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD
+
+## Migrating to v11
+
+* All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS.
+
+* Side panel drag&drop complete rewrite.
+
+* new lazy loading option
+
+**Breaking change:**
+
+* V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
+* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself as shown below, OR use `GridStack.createWidgetDivs()` to create parent divs, do the innerHtml, then call `makeWidget(el)` instead.
+* if your code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
+```ts
+// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
+  el.innerHTML = w.content;
+};
+
+// now you can create widgets like this again
+let gridWidget = grid.addWidget({x, y, w, h, content: '<div>My html content</div>'});
+```
+
+**Potential breaking change:**
+
+* BIG overall to how sidepanel helper drag&drop is done:
+1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so you can clone or set attr at the top.
+2. use any class/structure you want for side panel items (see two.html)
+3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!
+4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.
+5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.
+
+## Migrating to v12
+
+* column and cell height code has been re-writen to use browser CSS variables, and we no longer need a tons of custom CSS classes!
+this fixes a long standing issue where people forget to include the right CSS for non 12 columns layouts, and a big speedup in many cases (many columns, or small cellHeight values).
+
+**Potential breaking change:**
+* `gridstack-extra.min.css` no longer exist, nor is custom column CSS classes needed. API/options hasn't changed.
+* (v12.1) `ES5` folder content has been removed - was for IE support, which has been dropped.
+* (v12.1) nested grid events are now sent to the main grid. You might have to adjust your workaround of this missing feature. nested.html demo has been adjusted.
+
+# jQuery Application
+
+This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
+
+```js
+import 'gridstack/dist/gridstack.min.css';
+import { GridStack } from 'gridstack';
+import 'gridstack/dist/jq/gridstack-dd-jqueryui';
+```
+**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, 
+which means you can possibly bring your own version
+```js
+  alias: {
+    'jquery': 'gridstack/dist/jq/jquery.js',
+    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
+  },
+```
+Alternatively (single combined file) in html
+
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<!-- HTML5 drag&drop (70k) -->
+<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
+<!-- OR jquery-ui drag&drop (195k) -->
+<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
+<!-- OR static grid (40k) -->
+<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
+```
+
+We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. 
+
+**NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.
+
+**NOTE: in v1.x** IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
+
+As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
+
+# Changes
+
+View our change log [here](https://github.com/gridstack/gridstack.js/tree/master/doc/CHANGES.md).
+
+# Usage Trend
+
+[Usage Trend of gridstack](https://npm-compare.com/gridstack#timeRange=THREE_YEARS)
+  
+<a href="https://npm-compare.com/gridstack#timeRange=THREE_YEARS" target="_blank">
+  <img src="https://npm-compare.com/img/npm-trend/THREE_YEARS/gridstack.png" width="70%" alt="NPM Usage Trend of gridstack" />
+</a>
+
+# The Team
+
+gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny), before that [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.

node_modules/gridstack/dist/dd-base-impl.d.ts

@@ -0,0 +1,69 @@
+/**
+ * dd-base-impl.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+/**
+ * Type for event callback functions used in drag & drop operations.
+ * Can return boolean to indicate if the event should continue propagation.
+ */
+export type EventCallback = (event: Event) => boolean | void;
+/**
+ * Abstract base class for all drag & drop implementations.
+ * Provides common functionality for event handling, enable/disable state,
+ * and lifecycle management used by draggable, droppable, and resizable implementations.
+ */
+export declare abstract class DDBaseImplement {
+    /**
+     * Returns the current disabled state.
+     * Note: Use enable()/disable() methods to change state as other operations need to happen.
+     */
+    get disabled(): boolean;
+    /**
+     * Register an event callback for the specified event.
+     *
+     * @param event - Event name to listen for
+     * @param callback - Function to call when event occurs
+     */
+    on(event: string, callback: EventCallback): void;
+    /**
+     * Unregister an event callback for the specified event.
+     *
+     * @param event - Event name to stop listening for
+     */
+    off(event: string): void;
+    /**
+     * Enable this drag & drop implementation.
+     * Subclasses should override to perform additional setup.
+     */
+    enable(): void;
+    /**
+     * Disable this drag & drop implementation.
+     * Subclasses should override to perform additional cleanup.
+     */
+    disable(): void;
+    /**
+     * Destroy this drag & drop implementation and clean up resources.
+     * Removes all event handlers and clears internal state.
+     */
+    destroy(): void;
+    /**
+     * Trigger a registered event callback if one exists and the implementation is enabled.
+     *
+     * @param eventName - Name of the event to trigger
+     * @param event - DOM event object to pass to the callback
+     * @returns Result from the callback function, if any
+     */
+    triggerEvent(eventName: string, event: Event): boolean | void;
+}
+/**
+ * Interface for HTML elements extended with drag & drop options.
+ * Used to associate DD configuration with DOM elements.
+ */
+export interface HTMLElementExtendOpt<T> {
+    /** The HTML element being extended */
+    el: HTMLElement;
+    /** The drag & drop options/configuration */
+    option: T;
+    /** Method to update the options and return the DD implementation */
+    updateOption(T: any): DDBaseImplement;
+}

node_modules/gridstack/dist/dd-base-impl.js

@@ -0,0 +1,70 @@
+/**
+ * dd-base-impl.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+/**
+ * Abstract base class for all drag & drop implementations.
+ * Provides common functionality for event handling, enable/disable state,
+ * and lifecycle management used by draggable, droppable, and resizable implementations.
+ */
+export class DDBaseImplement {
+    constructor() {
+        /** @internal */
+        this._eventRegister = {};
+    }
+    /**
+     * Returns the current disabled state.
+     * Note: Use enable()/disable() methods to change state as other operations need to happen.
+     */
+    get disabled() { return this._disabled; }
+    /**
+     * Register an event callback for the specified event.
+     *
+     * @param event - Event name to listen for
+     * @param callback - Function to call when event occurs
+     */
+    on(event, callback) {
+        this._eventRegister[event] = callback;
+    }
+    /**
+     * Unregister an event callback for the specified event.
+     *
+     * @param event - Event name to stop listening for
+     */
+    off(event) {
+        delete this._eventRegister[event];
+    }
+    /**
+     * Enable this drag & drop implementation.
+     * Subclasses should override to perform additional setup.
+     */
+    enable() {
+        this._disabled = false;
+    }
+    /**
+     * Disable this drag & drop implementation.
+     * Subclasses should override to perform additional cleanup.
+     */
+    disable() {
+        this._disabled = true;
+    }
+    /**
+     * Destroy this drag & drop implementation and clean up resources.
+     * Removes all event handlers and clears internal state.
+     */
+    destroy() {
+        delete this._eventRegister;
+    }
+    /**
+     * Trigger a registered event callback if one exists and the implementation is enabled.
+     *
+     * @param eventName - Name of the event to trigger
+     * @param event - DOM event object to pass to the callback
+     * @returns Result from the callback function, if any
+     */
+    triggerEvent(eventName, event) {
+        if (!this.disabled && this._eventRegister && this._eventRegister[eventName])
+            return this._eventRegister[eventName](event);
+    }
+}
+//# sourceMappingURL=dd-base-impl.js.map

node_modules/gridstack/dist/dd-base-impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH;;;;GAIG;AACH,MAAM,OAAgB,eAAe;IAArC;QASE,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IAwDT,CAAC;IAnEC;;;OAGG;IACH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAS3D;;;;;OAKG;IACI,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACI,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["/**\n * dd-base-impl.ts 12.4.2\n * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license\n */\n\n/**\n * Type for event callback functions used in drag & drop operations.\n * Can return boolean to indicate if the event should continue propagation.\n */\nexport type EventCallback = (event: Event) => boolean|void;\n\n/**\n * Abstract base class for all drag & drop implementations.\n * Provides common functionality for event handling, enable/disable state,\n * and lifecycle management used by draggable, droppable, and resizable implementations.\n */\nexport abstract class DDBaseImplement {\n  /**\n   * Returns the current disabled state.\n   * Note: Use enable()/disable() methods to change state as other operations need to happen.\n   */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  /**\n   * Register an event callback for the specified event.\n   *\n   * @param event - Event name to listen for\n   * @param callback - Function to call when event occurs\n   */\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  /**\n   * Unregister an event callback for the specified event.\n   *\n   * @param event - Event name to stop listening for\n   */\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  /**\n   * Enable this drag & drop implementation.\n   * Subclasses should override to perform additional setup.\n   */\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  /**\n   * Disable this drag & drop implementation.\n   * Subclasses should override to perform additional cleanup.\n   */\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  /**\n   * Destroy this drag & drop implementation and clean up resources.\n   * Removes all event handlers and clears internal state.\n   */\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  /**\n   * Trigger a registered event callback if one exists and the implementation is enabled.\n   *\n   * @param eventName - Name of the event to trigger\n   * @param event - DOM event object to pass to the callback\n   * @returns Result from the callback function, if any\n   */\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\n/**\n * Interface for HTML elements extended with drag & drop options.\n * Used to associate DD configuration with DOM elements.\n */\nexport interface HTMLElementExtendOpt<T> {\n  /** The HTML element being extended */\n  el: HTMLElement;\n  /** The drag & drop options/configuration */\n  option: T;\n  /** Method to update the options and return the DD implementation */\n  updateOption(T): DDBaseImplement;\n}\n"]}

node_modules/gridstack/dist/dd-draggable.d.ts

@@ -0,0 +1,20 @@
+/**
+ * dd-draggable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
+import { GridItemHTMLElement, DDDragOpt } from './types';
+type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
+export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDragOpt> {
+    el: GridItemHTMLElement;
+    option: DDDragOpt;
+    helper: HTMLElement;
+    constructor(el: GridItemHTMLElement, option?: DDDragOpt);
+    on(event: DDDragEvent, callback: (event: DragEvent) => void): void;
+    off(event: DDDragEvent): void;
+    enable(): void;
+    disable(forDestroy?: boolean): void;
+    destroy(): void;
+    updateOption(opts: DDDragOpt): DDDraggable;
+}
+export {};

node_modules/gridstack/dist/dd-draggable.js

@@ -0,0 +1,367 @@
+/**
+ * dd-draggable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDManager } from './dd-manager';
+import { Utils } from './utils';
+import { DDBaseImplement } from './dd-base-impl';
+import { isTouch, touchend, touchmove, touchstart, pointerdown, DDTouch } from './dd-touch';
+// make sure we are not clicking on known object that handles mouseDown
+const skipMouseDown = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+// let count = 0; // TEST
+class DDDraggable extends DDBaseImplement {
+    constructor(el, option = {}) {
+        super();
+        this.el = el;
+        this.option = option;
+        /** @internal */
+        this.dragTransform = {
+            xScale: 1,
+            yScale: 1,
+            xOffset: 0,
+            yOffset: 0
+        };
+        // get the element that is actually supposed to be dragged by
+        const handleName = option?.handle?.substring(1);
+        const n = el.gridstackNode;
+        this.dragEls = !handleName || el.classList.contains(handleName) ? [el] : (n?.subGrid ? [el.querySelector(option.handle) || el] : Array.from(el.querySelectorAll(option.handle)));
+        if (this.dragEls.length === 0) {
+            this.dragEls = [el];
+        }
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        this._mouseDown = this._mouseDown.bind(this);
+        this._mouseMove = this._mouseMove.bind(this);
+        this._mouseUp = this._mouseUp.bind(this);
+        this._keyEvent = this._keyEvent.bind(this);
+        this.enable();
+    }
+    on(event, callback) {
+        super.on(event, callback);
+    }
+    off(event) {
+        super.off(event);
+    }
+    enable() {
+        if (this.disabled === false)
+            return;
+        super.enable();
+        this.dragEls.forEach(dragEl => {
+            dragEl.addEventListener('mousedown', this._mouseDown);
+            if (isTouch) {
+                dragEl.addEventListener('touchstart', touchstart);
+                dragEl.addEventListener('pointerdown', pointerdown);
+                // dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
+            }
+        });
+        this.el.classList.remove('ui-draggable-disabled');
+    }
+    disable(forDestroy = false) {
+        if (this.disabled === true)
+            return;
+        super.disable();
+        this.dragEls.forEach(dragEl => {
+            dragEl.removeEventListener('mousedown', this._mouseDown);
+            if (isTouch) {
+                dragEl.removeEventListener('touchstart', touchstart);
+                dragEl.removeEventListener('pointerdown', pointerdown);
+            }
+        });
+        if (!forDestroy)
+            this.el.classList.add('ui-draggable-disabled');
+    }
+    destroy() {
+        if (this.dragTimeout)
+            window.clearTimeout(this.dragTimeout);
+        delete this.dragTimeout;
+        if (this.mouseDownEvent)
+            this._mouseUp(this.mouseDownEvent);
+        this.disable(true);
+        delete this.el;
+        delete this.helper;
+        delete this.option;
+        super.destroy();
+    }
+    updateOption(opts) {
+        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
+        return this;
+    }
+    /** @internal call when mouse goes down before a dragstart happens */
+    _mouseDown(e) {
+        // if real brower event (trusted:true vs false for our simulated ones) and we didn't correctly clear the last touch event, clear things up
+        if (DDTouch.touchHandled && e.isTrusted)
+            DDTouch.touchHandled = false;
+        // don't let more than one widget handle mouseStart
+        if (DDManager.mouseHandled)
+            return;
+        if (e.button !== 0)
+            return true; // only left click
+        // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user
+        if (!this.dragEls.find(el => el === e.target) && e.target.closest(skipMouseDown))
+            return true;
+        if (this.option.cancel) {
+            if (e.target.closest(this.option.cancel))
+                return true;
+        }
+        this.mouseDownEvent = e;
+        delete this.dragging;
+        delete DDManager.dragElement;
+        delete DDManager.dropElement;
+        // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
+        document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble
+        document.addEventListener('mouseup', this._mouseUp, true);
+        if (isTouch) {
+            e.currentTarget.addEventListener('touchmove', touchmove);
+            e.currentTarget.addEventListener('touchend', touchend);
+        }
+        e.preventDefault();
+        // preventDefault() prevents blur event which occurs just after mousedown event.
+        // if an editable content has focus, then blur must be call
+        if (document.activeElement)
+            document.activeElement.blur();
+        DDManager.mouseHandled = true;
+        return true;
+    }
+    /** @internal method to call actual drag event */
+    _callDrag(e) {
+        if (!this.dragging)
+            return;
+        const ev = Utils.initEvent(e, { target: this.el, type: 'drag' });
+        if (this.option.drag) {
+            this.option.drag(ev, this.ui());
+        }
+        this.triggerEvent('drag', ev);
+    }
+    /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
+    _mouseMove(e) {
+        // console.log(`${count++} move ${e.x},${e.y}`)
+        const s = this.mouseDownEvent;
+        this.lastDrag = e;
+        if (this.dragging) {
+            this._dragFollow(e);
+            // delay actual grid handling drag until we pause for a while if set
+            if (DDManager.pauseDrag) {
+                const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag : 100;
+                if (this.dragTimeout)
+                    window.clearTimeout(this.dragTimeout);
+                this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);
+            }
+            else {
+                this._callDrag(e);
+            }
+        }
+        else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {
+            /**
+             * don't start unless we've moved at least 3 pixels
+             */
+            this.dragging = true;
+            DDManager.dragElement = this;
+            // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
+            const grid = this.el.gridstackNode?.grid;
+            if (grid) {
+                DDManager.dropElement = grid.el.ddElement.ddDroppable;
+            }
+            else {
+                delete DDManager.dropElement;
+            }
+            this.helper = this._createHelper();
+            this._setupHelperContainmentStyle();
+            this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);
+            this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
+            this._setupHelperStyle(e);
+            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });
+            if (this.option.start) {
+                this.option.start(ev, this.ui());
+            }
+            this.triggerEvent('dragstart', ev);
+            // now track keyboard events to cancel or rotate
+            document.addEventListener('keydown', this._keyEvent);
+        }
+        // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
+        return true;
+    }
+    /** @internal call when the mouse gets released to drop the item at current location */
+    _mouseUp(e) {
+        document.removeEventListener('mousemove', this._mouseMove, true);
+        document.removeEventListener('mouseup', this._mouseUp, true);
+        if (isTouch && e.currentTarget) { // destroy() during nested grid call us again wit fake _mouseUp
+            e.currentTarget.removeEventListener('touchmove', touchmove, true);
+            e.currentTarget.removeEventListener('touchend', touchend, true);
+        }
+        if (this.dragging) {
+            delete this.dragging;
+            delete this.el.gridstackNode?._origRotate;
+            document.removeEventListener('keydown', this._keyEvent);
+            // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
+            if (DDManager.dropElement?.el === this.el.parentElement) {
+                delete DDManager.dropElement;
+            }
+            this.helperContainment.style.position = this.parentOriginStylePosition || null;
+            if (this.helper !== this.el)
+                this.helper.remove(); // hide now
+            this._removeHelperStyle();
+            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstop' });
+            if (this.option.stop) {
+                this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!
+            }
+            this.triggerEvent('dragstop', ev);
+            // call the droppable method to receive the item
+            if (DDManager.dropElement) {
+                DDManager.dropElement.drop(e);
+            }
+        }
+        delete this.helper;
+        delete this.mouseDownEvent;
+        delete DDManager.dragElement;
+        delete DDManager.dropElement;
+        delete DDManager.mouseHandled;
+        e.preventDefault();
+    }
+    /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
+    _keyEvent(e) {
+        const n = this.el.gridstackNode;
+        const grid = n?.grid || DDManager.dropElement?.el?.gridstack;
+        if (e.key === 'Escape') {
+            if (n && n._origRotate) {
+                n._orig = n._origRotate;
+                delete n._origRotate;
+            }
+            grid?.cancelDrag();
+            this._mouseUp(this.mouseDownEvent);
+        }
+        else if (n && grid && (e.key === 'r' || e.key === 'R')) {
+            if (!Utils.canBeRotated(n))
+                return;
+            n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation
+            delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)
+            grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below
+                .rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })
+                .setAnimation();
+            n._moving = true;
+            this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);
+            this.helper.style.width = this.dragOffset.width + 'px';
+            this.helper.style.height = this.dragOffset.height + 'px';
+            Utils.swap(n._orig, 'w', 'h');
+            delete n._rect;
+            this._mouseMove(this.lastDrag);
+        }
+    }
+    /** @internal create a clone copy (or user defined method) of the original drag item if set */
+    _createHelper() {
+        let helper = this.el;
+        if (typeof this.option.helper === 'function') {
+            helper = this.option.helper(this.el);
+        }
+        else if (this.option.helper === 'clone') {
+            helper = Utils.cloneNode(this.el);
+        }
+        if (!helper.parentElement) {
+            Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);
+        }
+        this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);
+        return helper;
+    }
+    /** @internal set the fix position of the dragged item */
+    _setupHelperStyle(e) {
+        this.helper.classList.add('ui-draggable-dragging');
+        this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');
+        // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
+        const style = this.helper.style;
+        style.pointerEvents = 'none'; // needed for over items to get enter/leave
+        // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (no longer in CSS either as no-op)
+        style.width = this.dragOffset.width + 'px';
+        style.height = this.dragOffset.height + 'px';
+        style.willChange = 'left, top';
+        style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
+        this._dragFollow(e); // now position it
+        style.transition = 'none'; // show up instantly
+        setTimeout(() => {
+            if (this.helper) {
+                style.transition = null; // recover animation
+            }
+        }, 0);
+        return this;
+    }
+    /** @internal restore back the original style before dragging */
+    _removeHelperStyle() {
+        this.helper.classList.remove('ui-draggable-dragging');
+        this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');
+        const node = this.helper?.gridstackNode;
+        // don't bother restoring styles if we're gonna remove anyway...
+        if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
+            const helper = this.helper;
+            // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
+            // TODO: this also removes resizing animation which doesn't have this issue, but others.
+            // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,
+            // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'
+            // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)
+            const transition = this.dragElementOriginStyle['transition'] || null;
+            helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973
+            DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
+            setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
+        }
+        delete this.dragElementOriginStyle;
+        return this;
+    }
+    /** @internal updates the top/left position to follow the mouse */
+    _dragFollow(e) {
+        const containmentRect = { left: 0, top: 0 };
+        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
+        //   const { left, top } = this.helperContainment.getBoundingClientRect();
+        //   containmentRect = { left, top };
+        // }
+        const style = this.helper.style;
+        const offset = this.dragOffset;
+        style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';
+        style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';
+    }
+    /** @internal */
+    _setupHelperContainmentStyle() {
+        this.helperContainment = this.helper.parentElement;
+        if (this.helper.style.position !== 'fixed') {
+            this.parentOriginStylePosition = this.helperContainment.style.position;
+            if (getComputedStyle(this.helperContainment).position.match(/static/)) {
+                this.helperContainment.style.position = 'relative';
+            }
+        }
+        return this;
+    }
+    /** @internal */
+    _getDragOffset(event, el, parent) {
+        // in case ancestor has transform/perspective css properties that change the viewpoint
+        let xformOffsetX = 0;
+        let xformOffsetY = 0;
+        if (parent) {
+            xformOffsetX = this.dragTransform.xOffset;
+            xformOffsetY = this.dragTransform.yOffset;
+        }
+        const targetOffset = el.getBoundingClientRect();
+        return {
+            left: targetOffset.left,
+            top: targetOffset.top,
+            offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
+            offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
+            width: targetOffset.width * this.dragTransform.xScale,
+            height: targetOffset.height * this.dragTransform.yScale
+        };
+    }
+    /** @internal TODO: set to public as called by DDDroppable! */
+    ui() {
+        const containmentEl = this.el.parentElement;
+        const containmentRect = containmentEl.getBoundingClientRect();
+        const offset = this.helper.getBoundingClientRect();
+        return {
+            position: {
+                top: (offset.top - containmentRect.top) * this.dragTransform.yScale,
+                left: (offset.left - containmentRect.left) * this.dragTransform.xScale
+            }
+            /* not used by GridStack for now...
+            helper: [this.helper], //The object arr representing the helper that's being dragged.
+            offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
+            */
+        };
+    }
+}
+/** @internal properties we change during dragging, and restore back */
+DDDraggable.originStyleProp = ['width', 'height', 'transform', 'transform-origin', 'transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
+export { DDDraggable };
+//# sourceMappingURL=dd-draggable.js.map

node_modules/gridstack/dist/dd-droppable.d.ts

@@ -0,0 +1,26 @@
+/**
+ * dd-droppable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
+import { DDUIData } from './types';
+export interface DDDroppableOpt {
+    accept?: string | ((el: HTMLElement) => boolean);
+    drop?: (event: DragEvent, ui: DDUIData) => void;
+    over?: (event: DragEvent, ui: DDUIData) => void;
+    out?: (event: DragEvent, ui: DDUIData) => void;
+}
+export declare class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
+    el: HTMLElement;
+    option: DDDroppableOpt;
+    accept: (el: HTMLElement) => boolean;
+    constructor(el: HTMLElement, option?: DDDroppableOpt);
+    on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void;
+    off(event: 'drop' | 'dropover' | 'dropout'): void;
+    enable(): void;
+    disable(forDestroy?: boolean): void;
+    destroy(): void;
+    updateOption(opts: DDDroppableOpt): DDDroppable;
+    /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+    drop(e: MouseEvent): void;
+}

node_modules/gridstack/dist/dd-droppable.js

@@ -0,0 +1,153 @@
+/**
+ * dd-droppable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDManager } from './dd-manager';
+import { DDBaseImplement } from './dd-base-impl';
+import { Utils } from './utils';
+import { DDTouch, isTouch, pointerenter, pointerleave } from './dd-touch';
+// let count = 0; // TEST
+export class DDDroppable extends DDBaseImplement {
+    constructor(el, option = {}) {
+        super();
+        this.el = el;
+        this.option = option;
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        this._mouseEnter = this._mouseEnter.bind(this);
+        this._mouseLeave = this._mouseLeave.bind(this);
+        this.enable();
+        this._setupAccept();
+    }
+    on(event, callback) {
+        super.on(event, callback);
+    }
+    off(event) {
+        super.off(event);
+    }
+    enable() {
+        if (this.disabled === false)
+            return;
+        super.enable();
+        this.el.classList.add('ui-droppable');
+        this.el.classList.remove('ui-droppable-disabled');
+        this.el.addEventListener('mouseenter', this._mouseEnter);
+        this.el.addEventListener('mouseleave', this._mouseLeave);
+        if (isTouch) {
+            this.el.addEventListener('pointerenter', pointerenter);
+            this.el.addEventListener('pointerleave', pointerleave);
+        }
+    }
+    disable(forDestroy = false) {
+        if (this.disabled === true)
+            return;
+        super.disable();
+        this.el.classList.remove('ui-droppable');
+        if (!forDestroy)
+            this.el.classList.add('ui-droppable-disabled');
+        this.el.removeEventListener('mouseenter', this._mouseEnter);
+        this.el.removeEventListener('mouseleave', this._mouseLeave);
+        if (isTouch) {
+            this.el.removeEventListener('pointerenter', pointerenter);
+            this.el.removeEventListener('pointerleave', pointerleave);
+        }
+    }
+    destroy() {
+        this.disable(true);
+        this.el.classList.remove('ui-droppable');
+        this.el.classList.remove('ui-droppable-disabled');
+        super.destroy();
+    }
+    updateOption(opts) {
+        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
+        this._setupAccept();
+        return this;
+    }
+    /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
+    _mouseEnter(e) {
+        // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
+        if (!DDManager.dragElement)
+            return;
+        // During touch drag operations, ignore real browser-generated mouseenter events (isTrusted:true) vs our simulated ones (isTrusted:false).
+        // The browser can fire spurious mouseenter events when we dispatch simulated mousemove events.
+        if (DDTouch.touchHandled && e.isTrusted)
+            return;
+        if (!this._canDrop(DDManager.dragElement.el))
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
+        if (DDManager.dropElement && DDManager.dropElement !== this) {
+            DDManager.dropElement._mouseLeave(e, true); // calledByEnter = true
+        }
+        DDManager.dropElement = this;
+        const ev = Utils.initEvent(e, { target: this.el, type: 'dropover' });
+        if (this.option.over) {
+            this.option.over(ev, this._ui(DDManager.dragElement));
+        }
+        this.triggerEvent('dropover', ev);
+        this.el.classList.add('ui-droppable-over');
+        // console.log('tracking'); // TEST
+    }
+    /** @internal called when the item is leaving our area, stop tracking if we had moving item */
+    _mouseLeave(e, calledByEnter = false) {
+        // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
+        if (!DDManager.dragElement || DDManager.dropElement !== this)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const ev = Utils.initEvent(e, { target: this.el, type: 'dropout' });
+        if (this.option.out) {
+            this.option.out(ev, this._ui(DDManager.dragElement));
+        }
+        this.triggerEvent('dropout', ev);
+        if (DDManager.dropElement === this) {
+            delete DDManager.dropElement;
+            // console.log('not tracking'); // TEST
+            // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
+            if (!calledByEnter) {
+                let parentDrop;
+                let parent = this.el.parentElement;
+                while (!parentDrop && parent) {
+                    parentDrop = parent.ddElement?.ddDroppable;
+                    parent = parent.parentElement;
+                }
+                if (parentDrop) {
+                    parentDrop._mouseEnter(e);
+                }
+            }
+        }
+    }
+    /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+    drop(e) {
+        e.preventDefault();
+        const ev = Utils.initEvent(e, { target: this.el, type: 'drop' });
+        if (this.option.drop) {
+            this.option.drop(ev, this._ui(DDManager.dragElement));
+        }
+        this.triggerEvent('drop', ev);
+    }
+    /** @internal true if element matches the string/method accept option */
+    _canDrop(el) {
+        return el && (!this.accept || this.accept(el));
+    }
+    /** @internal */
+    _setupAccept() {
+        if (!this.option.accept)
+            return this;
+        if (typeof this.option.accept === 'string') {
+            this.accept = (el) => el.classList.contains(this.option.accept) || el.matches(this.option.accept);
+        }
+        else {
+            this.accept = this.option.accept;
+        }
+        return this;
+    }
+    /** @internal */
+    _ui(drag) {
+        return {
+            draggable: drag.el,
+            ...drag.ui()
+        };
+    }
+}
+//# sourceMappingURL=dd-droppable.js.map

node_modules/gridstack/dist/dd-element.d.ts

@@ -0,0 +1,27 @@
+/**
+ * dd-elements.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { DDResizable, DDResizableOpt } from './dd-resizable';
+import { DDDragOpt, GridItemHTMLElement } from './types';
+import { DDDraggable } from './dd-draggable';
+import { DDDroppable, DDDroppableOpt } from './dd-droppable';
+export interface DDElementHost extends GridItemHTMLElement {
+    ddElement?: DDElement;
+}
+export declare class DDElement {
+    el: DDElementHost;
+    static init(el: DDElementHost): DDElement;
+    ddDraggable?: DDDraggable;
+    ddDroppable?: DDDroppable;
+    ddResizable?: DDResizable;
+    constructor(el: DDElementHost);
+    on(eventName: string, callback: (event: MouseEvent) => void): DDElement;
+    off(eventName: string): DDElement;
+    setupDraggable(opts: DDDragOpt): DDElement;
+    cleanDraggable(): DDElement;
+    setupResizable(opts: DDResizableOpt): DDElement;
+    cleanResizable(): DDElement;
+    setupDroppable(opts: DDDroppableOpt): DDElement;
+    cleanDroppable(): DDElement;
+}

node_modules/gridstack/dist/dd-element.js

@@ -0,0 +1,91 @@
+/**
+ * dd-elements.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { DDResizable } from './dd-resizable';
+import { DDDraggable } from './dd-draggable';
+import { DDDroppable } from './dd-droppable';
+export class DDElement {
+    static init(el) {
+        if (!el.ddElement) {
+            el.ddElement = new DDElement(el);
+        }
+        return el.ddElement;
+    }
+    constructor(el) {
+        this.el = el;
+    }
+    on(eventName, callback) {
+        if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
+            this.ddDraggable.on(eventName, callback);
+        }
+        else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
+            this.ddDroppable.on(eventName, callback);
+        }
+        else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
+            this.ddResizable.on(eventName, callback);
+        }
+        return this;
+    }
+    off(eventName) {
+        if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
+            this.ddDraggable.off(eventName);
+        }
+        else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {
+            this.ddDroppable.off(eventName);
+        }
+        else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {
+            this.ddResizable.off(eventName);
+        }
+        return this;
+    }
+    setupDraggable(opts) {
+        if (!this.ddDraggable) {
+            this.ddDraggable = new DDDraggable(this.el, opts);
+        }
+        else {
+            this.ddDraggable.updateOption(opts);
+        }
+        return this;
+    }
+    cleanDraggable() {
+        if (this.ddDraggable) {
+            this.ddDraggable.destroy();
+            delete this.ddDraggable;
+        }
+        return this;
+    }
+    setupResizable(opts) {
+        if (!this.ddResizable) {
+            this.ddResizable = new DDResizable(this.el, opts);
+        }
+        else {
+            this.ddResizable.updateOption(opts);
+        }
+        return this;
+    }
+    cleanResizable() {
+        if (this.ddResizable) {
+            this.ddResizable.destroy();
+            delete this.ddResizable;
+        }
+        return this;
+    }
+    setupDroppable(opts) {
+        if (!this.ddDroppable) {
+            this.ddDroppable = new DDDroppable(this.el, opts);
+        }
+        else {
+            this.ddDroppable.updateOption(opts);
+        }
+        return this;
+    }
+    cleanDroppable() {
+        if (this.ddDroppable) {
+            this.ddDroppable.destroy();
+            delete this.ddDroppable;
+        }
+        return this;
+    }
+}
+//# sourceMappingURL=dd-element.js.map

node_modules/gridstack/dist/dd-gridstack.d.ts

@@ -0,0 +1,82 @@
+/**
+ * dd-gridstack.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { GridItemHTMLElement, GridStackElement, DDDragOpt } from './types';
+import { DDElementHost } from './dd-element';
+/**
+ * Drag & Drop options for drop targets.
+ * Configures which elements can be dropped onto a grid.
+ */
+export type DDDropOpt = {
+    /** Function to determine if an element can be dropped (see GridStackOptions.acceptWidgets) */
+    accept?: (el: GridItemHTMLElement) => boolean;
+};
+/**
+ * Drag & Drop operation types used throughout the DD system.
+ * Can be control commands or configuration objects.
+ */
+export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
+/**
+ * Keys for DD configuration options that can be set via the 'option' command.
+ */
+export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'maxHeightMoveUp' | 'maxWidthMoveLeft';
+/**
+ * Values for DD configuration options (numbers or strings with units).
+ */
+export type DDValue = number | string;
+/**
+ * Callback function type for drag & drop events.
+ *
+ * @param event - The DOM event that triggered the callback
+ * @param arg2 - The grid item element being dragged/dropped
+ * @param helper - Optional helper element used during drag operations
+ */
+export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+/**
+ * HTML Native Mouse and Touch Events Drag and Drop functionality.
+ *
+ * This class provides the main drag & drop implementation for GridStack,
+ * handling resizing, dragging, and dropping of grid items using native HTML5 events.
+ * It manages the interaction between different DD components and the grid system.
+ */
+export declare class DDGridStack {
+    /**
+     * Enable/disable/configure resizing for grid elements.
+     *
+     * @param el - Grid item element(s) to configure
+     * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)
+     * @param key - Option key when using 'option' command
+     * @param value - Option value when using 'option' command
+     * @returns this instance for chaining
+     *
+     * @example
+     * dd.resizable(element, 'enable');  // Enable resizing
+     * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width
+     */
+    resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
+    /**
+     * Enable/disable/configure dragging for grid elements.
+     *
+     * @param el - Grid item element(s) to configure
+     * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)
+     * @param key - Option key when using 'option' command
+     * @param value - Option value when using 'option' command
+     * @returns this instance for chaining
+     *
+     * @example
+     * dd.draggable(element, 'enable');  // Enable dragging
+     * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
+     */
+    draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
+    dragIn(el: GridStackElement, opts: DDDragOpt): DDGridStack;
+    droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): DDGridStack;
+    /** true if element is droppable */
+    isDroppable(el: DDElementHost): boolean;
+    /** true if element is draggable */
+    isDraggable(el: DDElementHost): boolean;
+    /** true if element is draggable */
+    isResizable(el: DDElementHost): boolean;
+    on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack;
+    off(el: GridItemHTMLElement, name: string): DDGridStack;
+}

node_modules/gridstack/dist/dd-gridstack.js

@@ -0,0 +1,165 @@
+/**
+ * dd-gridstack.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { Utils } from './utils';
+import { DDManager } from './dd-manager';
+import { DDElement } from './dd-element';
+// let count = 0; // TEST
+/**
+ * HTML Native Mouse and Touch Events Drag and Drop functionality.
+ *
+ * This class provides the main drag & drop implementation for GridStack,
+ * handling resizing, dragging, and dropping of grid items using native HTML5 events.
+ * It manages the interaction between different DD components and the grid system.
+ */
+export class DDGridStack {
+    /**
+     * Enable/disable/configure resizing for grid elements.
+     *
+     * @param el - Grid item element(s) to configure
+     * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)
+     * @param key - Option key when using 'option' command
+     * @param value - Option value when using 'option' command
+     * @returns this instance for chaining
+     *
+     * @example
+     * dd.resizable(element, 'enable');  // Enable resizing
+     * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width
+     */
+    resizable(el, opts, key, value) {
+        this._getDDElements(el, opts).forEach(dEl => {
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()
+            }
+            else if (opts === 'destroy') {
+                dEl.ddResizable && dEl.cleanResizable();
+            }
+            else if (opts === 'option') {
+                dEl.setupResizable({ [key]: value });
+            }
+            else {
+                const n = dEl.el.gridstackNode;
+                const grid = n.grid;
+                let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';
+                if (handles === 'all')
+                    handles = 'n,e,s,w,se,sw,ne,nw';
+                // NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead
+                // restrict vertical resize if height is done to match content anyway... odd to have it spring back
+                // if (Utils.shouldSizeToContent(n, true)) {
+                //   const doE = handles.indexOf('e') !== -1;
+                //   const doW = handles.indexOf('w') !== -1;
+                //   handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');
+                // }
+                const autoHide = !grid.opts.alwaysShowResizeHandle;
+                dEl.setupResizable({
+                    ...grid.opts.resizable,
+                    ...{ handles, autoHide },
+                    ...{
+                        start: opts.start,
+                        stop: opts.stop,
+                        resize: opts.resize
+                    }
+                });
+            }
+        });
+        return this;
+    }
+    /**
+     * Enable/disable/configure dragging for grid elements.
+     *
+     * @param el - Grid item element(s) to configure
+     * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)
+     * @param key - Option key when using 'option' command
+     * @param value - Option value when using 'option' command
+     * @returns this instance for chaining
+     *
+     * @example
+     * dd.draggable(element, 'enable');  // Enable dragging
+     * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
+     */
+    draggable(el, opts, key, value) {
+        this._getDDElements(el, opts).forEach(dEl => {
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()
+            }
+            else if (opts === 'destroy') {
+                dEl.ddDraggable && dEl.cleanDraggable();
+            }
+            else if (opts === 'option') {
+                dEl.setupDraggable({ [key]: value });
+            }
+            else {
+                const grid = dEl.el.gridstackNode.grid;
+                dEl.setupDraggable({
+                    ...grid.opts.draggable,
+                    ...{
+                        // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+                        start: opts.start,
+                        stop: opts.stop,
+                        drag: opts.drag
+                    }
+                });
+            }
+        });
+        return this;
+    }
+    dragIn(el, opts) {
+        this._getDDElements(el).forEach(dEl => dEl.setupDraggable(opts));
+        return this;
+    }
+    droppable(el, opts, key, value) {
+        if (typeof opts.accept === 'function' && !opts._accept) {
+            opts._accept = opts.accept;
+            opts.accept = (el) => opts._accept(el);
+        }
+        this._getDDElements(el, opts).forEach(dEl => {
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddDroppable && dEl.ddDroppable[opts]();
+            }
+            else if (opts === 'destroy') {
+                dEl.ddDroppable && dEl.cleanDroppable();
+            }
+            else if (opts === 'option') {
+                dEl.setupDroppable({ [key]: value });
+            }
+            else {
+                dEl.setupDroppable(opts);
+            }
+        });
+        return this;
+    }
+    /** true if element is droppable */
+    isDroppable(el) {
+        return !!(el?.ddElement?.ddDroppable && !el.ddElement.ddDroppable.disabled);
+    }
+    /** true if element is draggable */
+    isDraggable(el) {
+        return !!(el?.ddElement?.ddDraggable && !el.ddElement.ddDraggable.disabled);
+    }
+    /** true if element is draggable */
+    isResizable(el) {
+        return !!(el?.ddElement?.ddResizable && !el.ddElement.ddResizable.disabled);
+    }
+    on(el, name, callback) {
+        this._getDDElements(el).forEach(dEl => dEl.on(name, (event) => {
+            callback(event, DDManager.dragElement ? DDManager.dragElement.el : event.target, DDManager.dragElement ? DDManager.dragElement.helper : null);
+        }));
+        return this;
+    }
+    off(el, name) {
+        this._getDDElements(el).forEach(dEl => dEl.off(name));
+        return this;
+    }
+    /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */
+    _getDDElements(els, opts) {
+        // don't force create if we're going to destroy it, unless it's a grid which is used as drop target for it's children
+        const create = els.gridstack || opts !== 'destroy' && opts !== 'disable';
+        const hosts = Utils.getElements(els);
+        if (!hosts.length)
+            return [];
+        const list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null)).filter(d => d); // remove nulls
+        return list;
+    }
+}
+//# sourceMappingURL=dd-gridstack.js.map

node_modules/gridstack/dist/dd-manager.d.ts

@@ -0,0 +1,43 @@
+/**
+ * dd-manager.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { DDDraggable } from './dd-draggable';
+import { DDDroppable } from './dd-droppable';
+import { DDResizable } from './dd-resizable';
+/**
+ * Global state manager for all Drag & Drop instances.
+ *
+ * This class maintains shared state across all drag & drop operations,
+ * ensuring proper coordination between multiple grids and drag/drop elements.
+ * All properties are static to provide global access throughout the DD system.
+ */
+export declare class DDManager {
+    /**
+     * Controls drag operation pausing behavior.
+     * If set to true or a number (milliseconds), dragging placement and collision
+     * detection will only happen after the user pauses movement.
+     * This improves performance during rapid mouse movements.
+     */
+    static pauseDrag: boolean | number;
+    /**
+     * Flag indicating if a mouse down event was already handled.
+     * Prevents multiple handlers from processing the same mouse event.
+     */
+    static mouseHandled: boolean;
+    /**
+     * Reference to the element currently being dragged.
+     * Used to track the active drag operation across the system.
+     */
+    static dragElement: DDDraggable;
+    /**
+     * Reference to the drop target element currently under the cursor.
+     * Used to handle drop operations and hover effects.
+     */
+    static dropElement: DDDroppable;
+    /**
+     * Reference to the element currently being resized.
+     * Helps ignore nested grid resize handles during resize operations.
+     */
+    static overResizeElement: DDResizable;
+}

node_modules/gridstack/dist/dd-manager.js

@@ -0,0 +1,14 @@
+/**
+ * dd-manager.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+/**
+ * Global state manager for all Drag & Drop instances.
+ *
+ * This class maintains shared state across all drag & drop operations,
+ * ensuring proper coordination between multiple grids and drag/drop elements.
+ * All properties are static to provide global access throughout the DD system.
+ */
+export class DDManager {
+}
+//# sourceMappingURL=dd-manager.js.map

node_modules/gridstack/dist/dd-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-manager.js","sourceRoot":"","sources":["../src/dd-manager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH;;;;;;GAMG;AACH,MAAM,OAAO,SAAS;CAiCrB","sourcesContent":["/**\n * dd-manager.ts 12.4.2\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\n */\n\nimport { DDDraggable } from './dd-draggable';\nimport { DDDroppable } from './dd-droppable';\nimport { DDResizable } from './dd-resizable';\n\n/**\n * Global state manager for all Drag & Drop instances.\n *\n * This class maintains shared state across all drag & drop operations,\n * ensuring proper coordination between multiple grids and drag/drop elements.\n * All properties are static to provide global access throughout the DD system.\n */\nexport class DDManager {\n  /**\n   * Controls drag operation pausing behavior.\n   * If set to true or a number (milliseconds), dragging placement and collision\n   * detection will only happen after the user pauses movement.\n   * This improves performance during rapid mouse movements.\n   */\n  public static pauseDrag: boolean | number;\n\n  /**\n   * Flag indicating if a mouse down event was already handled.\n   * Prevents multiple handlers from processing the same mouse event.\n   */\n  public static mouseHandled: boolean;\n\n  /**\n   * Reference to the element currently being dragged.\n   * Used to track the active drag operation across the system.\n   */\n  public static dragElement: DDDraggable;\n\n  /**\n   * Reference to the drop target element currently under the cursor.\n   * Used to handle drop operations and hover effects.\n   */\n  public static dropElement: DDDroppable;\n\n  /**\n   * Reference to the element currently being resized.\n   * Helps ignore nested grid resize handles during resize operations.\n   */\n  public static overResizeElement: DDResizable;\n\n}\n"]}

node_modules/gridstack/dist/dd-resizable-handle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * dd-resizable-handle.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { GridItemHTMLElement } from './gridstack';
+export interface DDResizableHandleOpt {
+    element?: string | HTMLElement;
+    start?: (event: MouseEvent) => void;
+    move?: (event: MouseEvent) => void;
+    stop?: (event: MouseEvent) => void;
+}
+export declare class DDResizableHandle {
+    protected host: GridItemHTMLElement;
+    protected dir: string;
+    protected option: DDResizableHandleOpt;
+    constructor(host: GridItemHTMLElement, dir: string, option: DDResizableHandleOpt);
+    /** call this when resize handle needs to be removed and cleaned up */
+    destroy(): DDResizableHandle;
+}

node_modules/gridstack/dist/dd-resizable-handle.js

@@ -0,0 +1,128 @@
+/**
+ * dd-resizable-handle.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';
+class DDResizableHandle {
+    constructor(host, dir, option) {
+        this.host = host;
+        this.dir = dir;
+        this.option = option;
+        /** @internal true after we've moved enough pixels to start a resize */
+        this.moving = false;
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        this._mouseDown = this._mouseDown.bind(this);
+        this._mouseMove = this._mouseMove.bind(this);
+        this._mouseUp = this._mouseUp.bind(this);
+        this._keyEvent = this._keyEvent.bind(this);
+        this._init();
+    }
+    /** @internal */
+    _init() {
+        if (this.option.element) {
+            try {
+                this.el = this.option.element instanceof HTMLElement
+                    ? this.option.element
+                    : this.host.querySelector(this.option.element);
+            }
+            catch (error) {
+                this.option.element = undefined; // make sure destroy handles it correctly
+                console.error("Query for resizeable handle failed, falling back", error);
+            }
+        }
+        if (!this.el) {
+            this.el = document.createElement('div');
+            this.host.appendChild(this.el);
+        }
+        this.el.classList.add('ui-resizable-handle');
+        this.el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
+        this.el.style.zIndex = '100';
+        this.el.style.userSelect = 'none';
+        this.el.addEventListener('mousedown', this._mouseDown);
+        if (isTouch) {
+            this.el.addEventListener('touchstart', touchstart);
+            this.el.addEventListener('pointerdown', pointerdown);
+            // this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
+        }
+        return this;
+    }
+    /** call this when resize handle needs to be removed and cleaned up */
+    destroy() {
+        if (this.moving)
+            this._mouseUp(this.mouseDownEvent);
+        this.el.removeEventListener('mousedown', this._mouseDown);
+        if (isTouch) {
+            this.el.removeEventListener('touchstart', touchstart);
+            this.el.removeEventListener('pointerdown', pointerdown);
+        }
+        if (!this.option.element) {
+            this.host.removeChild(this.el);
+        }
+        delete this.el;
+        delete this.host;
+        return this;
+    }
+    /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
+    _mouseDown(e) {
+        this.mouseDownEvent = e;
+        document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // capture, not bubble
+        document.addEventListener('mouseup', this._mouseUp, true);
+        if (isTouch) {
+            this.el.addEventListener('touchmove', touchmove);
+            this.el.addEventListener('touchend', touchend);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    /** @internal */
+    _mouseMove(e) {
+        const s = this.mouseDownEvent;
+        if (this.moving) {
+            this._triggerEvent('move', e);
+        }
+        else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 2) {
+            // don't start unless we've moved at least 3 pixels
+            this.moving = true;
+            this._triggerEvent('start', this.mouseDownEvent);
+            this._triggerEvent('move', e);
+            // now track keyboard events to cancel
+            document.addEventListener('keydown', this._keyEvent);
+        }
+        e.stopPropagation();
+        // e.preventDefault(); passive = true
+    }
+    /** @internal */
+    _mouseUp(e) {
+        if (this.moving) {
+            this._triggerEvent('stop', e);
+            document.removeEventListener('keydown', this._keyEvent);
+        }
+        document.removeEventListener('mousemove', this._mouseMove, true);
+        document.removeEventListener('mouseup', this._mouseUp, true);
+        if (isTouch) {
+            this.el.removeEventListener('touchmove', touchmove);
+            this.el.removeEventListener('touchend', touchend);
+        }
+        delete this.moving;
+        delete this.mouseDownEvent;
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    /** @internal call when keys are being pressed - use Esc to cancel */
+    _keyEvent(e) {
+        if (e.key === 'Escape') {
+            this.host.gridstackNode?.grid?.engine.restoreInitial();
+            this._mouseUp(this.mouseDownEvent);
+        }
+    }
+    /** @internal */
+    _triggerEvent(name, event) {
+        if (this.option[name])
+            this.option[name](event);
+        return this;
+    }
+}
+/** @internal */
+DDResizableHandle.prefix = 'ui-resizable-';
+export { DDResizableHandle };
+//# sourceMappingURL=dd-resizable-handle.js.map

node_modules/gridstack/dist/dd-resizable.d.ts

@@ -0,0 +1,28 @@
+/**
+ * dd-resizable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
+import { DDResizeOpt, DDUIData, GridItemHTMLElement } from './types';
+export interface DDResizableOpt extends DDResizeOpt {
+    maxHeight?: number;
+    maxHeightMoveUp?: number;
+    maxWidth?: number;
+    maxWidthMoveLeft?: number;
+    minHeight?: number;
+    minWidth?: number;
+    start?: (event: Event, ui: DDUIData) => void;
+    stop?: (event: Event) => void;
+    resize?: (event: Event, ui: DDUIData) => void;
+}
+export declare class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
+    el: GridItemHTMLElement;
+    option: DDResizableOpt;
+    constructor(el: GridItemHTMLElement, option?: DDResizableOpt);
+    on(event: 'resizestart' | 'resize' | 'resizestop', callback: (event: DragEvent) => void): void;
+    off(event: 'resizestart' | 'resize' | 'resizestop'): void;
+    enable(): void;
+    disable(): void;
+    destroy(): void;
+    updateOption(opts: DDResizableOpt): DDResizable;
+}

node_modules/gridstack/dist/dd-resizable.js

@@ -0,0 +1,299 @@
+/**
+ * dd-resizable.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { DDResizableHandle } from './dd-resizable-handle';
+import { DDBaseImplement } from './dd-base-impl';
+import { Utils } from './utils';
+import { DDManager } from './dd-manager';
+class DDResizable extends DDBaseImplement {
+    // have to be public else complains for HTMLElementExtendOpt ?
+    constructor(el, option = {}) {
+        super();
+        this.el = el;
+        this.option = option;
+        /** @internal */
+        this.rectScale = { x: 1, y: 1 };
+        /** @internal */
+        this._ui = () => {
+            const containmentEl = this.el.parentElement;
+            const containmentRect = containmentEl.getBoundingClientRect();
+            const newRect = {
+                width: this.originalRect.width,
+                height: this.originalRect.height + this.scrolled,
+                left: this.originalRect.left,
+                top: this.originalRect.top - this.scrolled
+            };
+            const rect = this.temporalRect || newRect;
+            return {
+                position: {
+                    left: (rect.left - containmentRect.left) * this.rectScale.x,
+                    top: (rect.top - containmentRect.top) * this.rectScale.y
+                },
+                size: {
+                    width: rect.width * this.rectScale.x,
+                    height: rect.height * this.rectScale.y
+                }
+                /* Gridstack ONLY needs position set above... keep around in case.
+                element: [this.el], // The object representing the element to be resized
+                helper: [], // TODO: not support yet - The object representing the helper that's being resized
+                originalElement: [this.el],// we don't wrap here, so simplify as this.el //The object representing the original element before it is wrapped
+                originalPosition: { // The position represented as { left, top } before the resizable is resized
+                  left: this.originalRect.left - containmentRect.left,
+                  top: this.originalRect.top - containmentRect.top
+                },
+                originalSize: { // The size represented as { width, height } before the resizable is resized
+                  width: this.originalRect.width,
+                  height: this.originalRect.height
+                }
+                */
+            };
+        };
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        this._mouseOver = this._mouseOver.bind(this);
+        this._mouseOut = this._mouseOut.bind(this);
+        this.enable();
+        this._setupAutoHide(this.option.autoHide);
+        this._setupHandlers();
+    }
+    on(event, callback) {
+        super.on(event, callback);
+    }
+    off(event) {
+        super.off(event);
+    }
+    enable() {
+        super.enable();
+        this.el.classList.remove('ui-resizable-disabled');
+        this._setupAutoHide(this.option.autoHide);
+    }
+    disable() {
+        super.disable();
+        this.el.classList.add('ui-resizable-disabled');
+        this._setupAutoHide(false);
+    }
+    destroy() {
+        this._removeHandlers();
+        this._setupAutoHide(false);
+        delete this.el;
+        super.destroy();
+    }
+    updateOption(opts) {
+        const updateHandles = (opts.handles && opts.handles !== this.option.handles);
+        const updateAutoHide = (opts.autoHide && opts.autoHide !== this.option.autoHide);
+        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
+        if (updateHandles) {
+            this._removeHandlers();
+            this._setupHandlers();
+        }
+        if (updateAutoHide) {
+            this._setupAutoHide(this.option.autoHide);
+        }
+        return this;
+    }
+    /** @internal turns auto hide on/off */
+    _setupAutoHide(auto) {
+        if (auto) {
+            this.el.classList.add('ui-resizable-autohide');
+            // use mouseover and not mouseenter to get better performance and track for nested cases
+            this.el.addEventListener('mouseover', this._mouseOver);
+            this.el.addEventListener('mouseout', this._mouseOut);
+        }
+        else {
+            this.el.classList.remove('ui-resizable-autohide');
+            this.el.removeEventListener('mouseover', this._mouseOver);
+            this.el.removeEventListener('mouseout', this._mouseOut);
+            if (DDManager.overResizeElement === this) {
+                delete DDManager.overResizeElement;
+            }
+        }
+        return this;
+    }
+    /** @internal */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _mouseOver(e) {
+        // console.log(`${count++} pre-enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+        // already over a child, ignore. Ideally we just call e.stopPropagation() but see https://github.com/gridstack/gridstack.js/issues/2018
+        if (DDManager.overResizeElement || DDManager.dragElement)
+            return;
+        DDManager.overResizeElement = this;
+        // console.log(`${count++} enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+        this.el.classList.remove('ui-resizable-autohide');
+    }
+    /** @internal */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _mouseOut(e) {
+        // console.log(`${count++} pre-leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+        if (DDManager.overResizeElement !== this)
+            return;
+        delete DDManager.overResizeElement;
+        // console.log(`${count++} leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+        this.el.classList.add('ui-resizable-autohide');
+    }
+    /** @internal */
+    _setupHandlers() {
+        this.handlers = this.option.handles.split(',')
+            .map(dir => dir.trim())
+            .map(dir => new DDResizableHandle(this.el, dir, {
+            element: this.option.element,
+            start: (event) => this._resizeStart(event),
+            stop: (event) => this._resizeStop(event),
+            move: (event) => this._resizing(event, dir)
+        }));
+        return this;
+    }
+    /** @internal */
+    _resizeStart(event) {
+        this.sizeToContent = Utils.shouldSizeToContent(this.el.gridstackNode, true); // strick true only and not number
+        this.originalRect = this.el.getBoundingClientRect();
+        this.scrollEl = Utils.getScrollElement(this.el);
+        this.scrollY = this.scrollEl.scrollTop;
+        this.scrolled = 0;
+        this.startEvent = event;
+        this._setupHelper();
+        this._applyChange();
+        const ev = Utils.initEvent(event, { type: 'resizestart', target: this.el });
+        if (this.option.start) {
+            this.option.start(ev, this._ui());
+        }
+        this.el.classList.add('ui-resizable-resizing');
+        this.triggerEvent('resizestart', ev);
+        return this;
+    }
+    /** @internal */
+    _resizing(event, dir) {
+        this.scrolled = this.scrollEl.scrollTop - this.scrollY;
+        this.temporalRect = this._getChange(event, dir);
+        this._applyChange();
+        const ev = Utils.initEvent(event, { type: 'resize', target: this.el });
+        if (this.option.resize) {
+            this.option.resize(ev, this._ui());
+        }
+        this.triggerEvent('resize', ev);
+        return this;
+    }
+    /** @internal */
+    _resizeStop(event) {
+        const ev = Utils.initEvent(event, { type: 'resizestop', target: this.el });
+        // Remove style attr now, so the stop handler can rebuild style attrs
+        this._cleanHelper();
+        if (this.option.stop) {
+            this.option.stop(ev); // Note: ui() not used by gridstack so don't pass
+        }
+        this.el.classList.remove('ui-resizable-resizing');
+        this.triggerEvent('resizestop', ev);
+        delete this.startEvent;
+        delete this.originalRect;
+        delete this.temporalRect;
+        delete this.scrollY;
+        delete this.scrolled;
+        return this;
+    }
+    /** @internal */
+    _setupHelper() {
+        this.elOriginStyleVal = DDResizable._originStyleProp.map(prop => this.el.style[prop]);
+        this.parentOriginStylePosition = this.el.parentElement.style.position;
+        const parent = this.el.parentElement;
+        const dragTransform = Utils.getValuesFromTransformedElement(parent);
+        this.rectScale = {
+            x: dragTransform.xScale,
+            y: dragTransform.yScale
+        };
+        if (getComputedStyle(this.el.parentElement).position.match(/static/)) {
+            this.el.parentElement.style.position = 'relative';
+        }
+        this.el.style.position = 'absolute';
+        this.el.style.opacity = '0.8';
+        return this;
+    }
+    /** @internal */
+    _cleanHelper() {
+        DDResizable._originStyleProp.forEach((prop, i) => {
+            this.el.style[prop] = this.elOriginStyleVal[i] || null;
+        });
+        this.el.parentElement.style.position = this.parentOriginStylePosition || null;
+        return this;
+    }
+    /** @internal */
+    _getChange(event, dir) {
+        const oEvent = this.startEvent;
+        const newRect = {
+            width: this.originalRect.width,
+            height: this.originalRect.height + this.scrolled,
+            left: this.originalRect.left,
+            top: this.originalRect.top - this.scrolled
+        };
+        const offsetX = event.clientX - oEvent.clientX;
+        const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize
+        let moveLeft;
+        let moveUp;
+        if (dir.indexOf('e') > -1) {
+            newRect.width += offsetX;
+        }
+        else if (dir.indexOf('w') > -1) {
+            newRect.width -= offsetX;
+            newRect.left += offsetX;
+            moveLeft = true;
+        }
+        if (dir.indexOf('s') > -1) {
+            newRect.height += offsetY;
+        }
+        else if (dir.indexOf('n') > -1) {
+            newRect.height -= offsetY;
+            newRect.top += offsetY;
+            moveUp = true;
+        }
+        const constrain = this._constrainSize(newRect.width, newRect.height, moveLeft, moveUp);
+        if (Math.round(newRect.width) !== Math.round(constrain.width)) { // round to ignore slight round-off errors
+            if (dir.indexOf('w') > -1) {
+                newRect.left += newRect.width - constrain.width;
+            }
+            newRect.width = constrain.width;
+        }
+        if (Math.round(newRect.height) !== Math.round(constrain.height)) {
+            if (dir.indexOf('n') > -1) {
+                newRect.top += newRect.height - constrain.height;
+            }
+            newRect.height = constrain.height;
+        }
+        return newRect;
+    }
+    /** @internal constrain the size to the set min/max values */
+    _constrainSize(oWidth, oHeight, moveLeft, moveUp) {
+        const o = this.option;
+        const maxWidth = (moveLeft ? o.maxWidthMoveLeft : o.maxWidth) || Number.MAX_SAFE_INTEGER;
+        const minWidth = o.minWidth / this.rectScale.x || oWidth;
+        const maxHeight = (moveUp ? o.maxHeightMoveUp : o.maxHeight) || Number.MAX_SAFE_INTEGER;
+        const minHeight = o.minHeight / this.rectScale.y || oHeight;
+        const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
+        const height = Math.min(maxHeight, Math.max(minHeight, oHeight));
+        return { width, height };
+    }
+    /** @internal */
+    _applyChange() {
+        let containmentRect = { left: 0, top: 0, width: 0, height: 0 };
+        if (this.el.style.position === 'absolute') {
+            const containmentEl = this.el.parentElement;
+            const { left, top } = containmentEl.getBoundingClientRect();
+            containmentRect = { left, top, width: 0, height: 0 };
+        }
+        if (!this.temporalRect)
+            return this;
+        Object.keys(this.temporalRect).forEach(key => {
+            const value = this.temporalRect[key];
+            const scaleReciprocal = key === 'width' || key === 'left' ? this.rectScale.x : key === 'height' || key === 'top' ? this.rectScale.y : 1;
+            this.el.style[key] = (value - containmentRect[key]) * scaleReciprocal + 'px';
+        });
+        return this;
+    }
+    /** @internal */
+    _removeHandlers() {
+        this.handlers.forEach(handle => handle.destroy());
+        delete this.handlers;
+        return this;
+    }
+}
+/** @internal */
+DDResizable._originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
+export { DDResizable };
+//# sourceMappingURL=dd-resizable.js.map

node_modules/gridstack/dist/dd-touch.d.ts

@@ -0,0 +1,38 @@
+/**
+ * touch.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+/**
+ * Detect touch support - Windows Surface devices and other touch devices
+ * should we use this instead ? (what we had for always showing resize handles)
+ * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+ */
+export declare const isTouch: boolean;
+export declare class DDTouch {
+    /** set to true while we are handling touch dragging, to prevent accepting browser real mouse events (trusted:true) vs our simulated ones (trusted:false) */
+    static touchHandled: boolean;
+    static pointerLeaveTimeout: number;
+}
+/**
+ * Handle the touchstart events
+ * @param {Object} e The widget element's touchstart event
+ */
+export declare function touchstart(e: TouchEvent): void;
+/**
+ * Handle the touchmove events
+ * @param {Object} e The document's touchmove event
+ */
+export declare function touchmove(e: TouchEvent): void;
+/**
+ * Handle the touchend events
+ * @param {Object} e The document's touchend event
+ */
+export declare function touchend(e: TouchEvent): void;
+/**
+ * Note we don't get touchenter/touchleave (which are deprecated)
+ * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter
+ * so instead of PointerEvent to still get enter/leave and send the matching mouse event.
+ */
+export declare function pointerdown(e: PointerEvent): void;
+export declare function pointerenter(e: PointerEvent): void;
+export declare function pointerleave(e: PointerEvent): void;

node_modules/gridstack/dist/dd-touch.js

@@ -0,0 +1,145 @@
+/**
+ * touch.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { DDManager } from './dd-manager';
+import { Utils } from './utils';
+/**
+ * Detect touch support - Windows Surface devices and other touch devices
+ * should we use this instead ? (what we had for always showing resize handles)
+ * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+ */
+export const isTouch = typeof window !== 'undefined' && typeof document !== 'undefined' &&
+    ('ontouchstart' in document
+        || 'ontouchstart' in window
+        // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        || (window.DocumentTouch && document instanceof window.DocumentTouch)
+        || navigator.maxTouchPoints > 0
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        || navigator.msMaxTouchPoints > 0);
+// interface TouchCoord {x: number, y: number};
+export class DDTouch {
+}
+/**
+* Get the x,y position of a touch event
+*/
+// function getTouchCoords(e: TouchEvent): TouchCoord {
+//   return {
+//     x: e.changedTouches[0].pageX,
+//     y: e.changedTouches[0].pageY
+//   };
+// }
+/**
+ * Simulate a mouse event based on a corresponding touch event
+ * @param {Object} e A touch event
+ * @param {String} simulatedType The corresponding mouse event
+ */
+function simulateMouseEvent(e, simulatedType) {
+    // Ignore multi-touch events
+    if (e.touches.length > 1)
+        return;
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (e.cancelable)
+        e.preventDefault();
+    // Dispatch the simulated event to the target element
+    Utils.simulateMouseEvent(e.changedTouches[0], simulatedType);
+}
+/**
+ * Simulate a mouse event based on a corresponding Pointer event
+ * @param {Object} e A pointer event
+ * @param {String} simulatedType The corresponding mouse event
+ */
+function simulatePointerMouseEvent(e, simulatedType) {
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (e.cancelable)
+        e.preventDefault();
+    // Dispatch the simulated event to the target element
+    Utils.simulateMouseEvent(e, simulatedType);
+}
+/**
+ * Handle the touchstart events
+ * @param {Object} e The widget element's touchstart event
+ */
+export function touchstart(e) {
+    // Ignore the event if another widget is already being handled
+    if (DDTouch.touchHandled)
+        return;
+    DDTouch.touchHandled = true;
+    // Simulate the mouse events
+    // simulateMouseEvent(e, 'mouseover');
+    // simulateMouseEvent(e, 'mousemove');
+    simulateMouseEvent(e, 'mousedown');
+}
+/**
+ * Handle the touchmove events
+ * @param {Object} e The document's touchmove event
+ */
+export function touchmove(e) {
+    // Ignore event if not handled by us
+    if (!DDTouch.touchHandled)
+        return;
+    simulateMouseEvent(e, 'mousemove');
+}
+/**
+ * Handle the touchend events
+ * @param {Object} e The document's touchend event
+ */
+export function touchend(e) {
+    // Ignore event if not handled
+    if (!DDTouch.touchHandled)
+        return;
+    // cancel delayed leave event when we release on ourself which happens BEFORE we get this!
+    if (DDTouch.pointerLeaveTimeout) {
+        window.clearTimeout(DDTouch.pointerLeaveTimeout);
+        delete DDTouch.pointerLeaveTimeout;
+    }
+    const wasDragging = !!DDManager.dragElement;
+    // Simulate the mouseup event
+    simulateMouseEvent(e, 'mouseup');
+    // simulateMouseEvent(event, 'mouseout');
+    // If the touch interaction did not move, it should trigger a click
+    if (!wasDragging) {
+        simulateMouseEvent(e, 'click');
+    }
+    // Unset the flag to allow other widgets to inherit the touch event
+    DDTouch.touchHandled = false;
+}
+/**
+ * Note we don't get touchenter/touchleave (which are deprecated)
+ * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter
+ * so instead of PointerEvent to still get enter/leave and send the matching mouse event.
+ */
+export function pointerdown(e) {
+    // console.log("pointer down")
+    if (e.pointerType === 'mouse')
+        return;
+    e.target.releasePointerCapture(e.pointerId); // <- Important!
+}
+export function pointerenter(e) {
+    // ignore the initial one we get on pointerdown on ourself
+    if (!DDManager.dragElement) {
+        // console.log('pointerenter ignored');
+        return;
+    }
+    // console.log('pointerenter');
+    if (e.pointerType === 'mouse')
+        return;
+    simulatePointerMouseEvent(e, 'mouseenter');
+}
+export function pointerleave(e) {
+    // ignore the leave on ourself we get before releasing the mouse over ourself
+    // by delaying sending the event and having the up event cancel us
+    if (!DDManager.dragElement) {
+        // console.log('pointerleave ignored');
+        return;
+    }
+    if (e.pointerType === 'mouse')
+        return;
+    DDTouch.pointerLeaveTimeout = window.setTimeout(() => {
+        delete DDTouch.pointerLeaveTimeout;
+        // console.log('pointerleave delayed');
+        simulatePointerMouseEvent(e, 'mouseleave');
+    }, 10);
+}
+//# sourceMappingURL=dd-touch.js.map

node_modules/gridstack/dist/gridstack-all.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * GridStack 12.4.2
+ * https://gridstackjs.com/
+ *
+ * Copyright (c) 2021-2025  Alain Dumesny
+ * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
+ */

node_modules/gridstack/dist/gridstack-engine.d.ts

@@ -0,0 +1,321 @@
+/**
+ * gridstack-engine.ts 12.4.2
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+import { GridStackNode, GridStackPosition, GridStackMoveOpts, SaveFcn, CompactOptions } from './types';
+/** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */
+type OnChangeCB = (nodes: GridStackNode[]) => void;
+/** options used during creation - similar to GridStackOptions */
+export interface GridStackEngineOptions {
+    column?: number;
+    maxRow?: number;
+    float?: boolean;
+    nodes?: GridStackNode[];
+    onChange?: OnChangeCB;
+}
+/**
+ * Defines the GridStack engine that handles all grid layout calculations and node positioning.
+ * This is the core engine that performs grid manipulation without any DOM operations.
+ *
+ * The engine manages:
+ * - Node positioning and collision detection
+ * - Layout algorithms (compact, float, etc.)
+ * - Grid resizing and column changes
+ * - Widget movement and resizing logic
+ *
+ * NOTE: Values should not be modified directly - use the main GridStack API instead
+ * to ensure proper DOM updates and event triggers.
+ */
+export declare class GridStackEngine {
+    column: number;
+    maxRow: number;
+    nodes: GridStackNode[];
+    addedNodes: GridStackNode[];
+    removedNodes: GridStackNode[];
+    batchMode: boolean;
+    defaultColumn: number;
+    /** true when grid.load() already cached the layout and can skip out of bound caching info */
+    skipCacheUpdate?: boolean;
+    constructor(opts?: GridStackEngineOptions);
+    /**
+     * Enable/disable batch mode for multiple operations to optimize performance.
+     * When enabled, layout updates are deferred until batch mode is disabled.
+     *
+     * @param flag true to enable batch mode, false to disable and apply changes
+     * @param doPack if true (default), pack/compact nodes when disabling batch mode
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * // Start batch mode for multiple operations
+     * engine.batchUpdate(true);
+     * engine.addNode(node1);
+     * engine.addNode(node2);
+     * engine.batchUpdate(false); // Apply all changes at once
+     */
+    batchUpdate(flag?: boolean, doPack?: boolean): GridStackEngine;
+    protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition): boolean;
+    /**
+     * Return the first node that intercepts/collides with the given node or area.
+     * Used for collision detection during drag and drop operations.
+     *
+     * @param skip the node to skip in collision detection (usually the node being moved)
+     * @param area the area to check for collisions (defaults to skip node's area)
+     * @param skip2 optional second node to skip in collision detection
+     * @returns the first colliding node, or undefined if no collision
+     *
+     * @example
+     * const colliding = engine.collide(draggedNode, {x: 2, y: 1, w: 2, h: 1});
+     * if (colliding) {
+     *   console.log('Would collide with:', colliding.id);
+     * }
+     */
+    collide(skip: GridStackNode, area?: GridStackNode, skip2?: GridStackNode): GridStackNode | undefined;
+    /**
+     * Return all nodes that intercept/collide with the given node or area.
+     * Similar to collide() but returns all colliding nodes instead of just the first.
+     *
+     * @param skip the node to skip in collision detection
+     * @param area the area to check for collisions (defaults to skip node's area)
+     * @param skip2 optional second node to skip in collision detection
+     * @returns array of all colliding nodes
+     *
+     * @example
+     * const allCollisions = engine.collideAll(draggedNode);
+     * console.log('Colliding with', allCollisions.length, 'nodes');
+     */
+    collideAll(skip: GridStackNode, area?: GridStackNode, skip2?: GridStackNode): GridStackNode[];
+    /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */
+    protected directionCollideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode | undefined;
+    /**
+     * Attempt to swap the positions of two nodes if they meet swapping criteria.
+     * Nodes can swap if they are the same size or in the same column/row, not locked, and touching.
+     *
+     * @param a first node to swap
+     * @param b second node to swap
+     * @returns true if swap was successful, false if not possible, undefined if not applicable
+     *
+     * @example
+     * const swapped = engine.swap(nodeA, nodeB);
+     * if (swapped) {
+     *   console.log('Nodes swapped successfully');
+     * }
+     */
+    swap(a: GridStackNode, b: GridStackNode): boolean | undefined;
+    /**
+     * Check if the specified rectangular area is empty (no nodes occupy any part of it).
+     *
+     * @param x the x coordinate (column) of the area to check
+     * @param y the y coordinate (row) of the area to check
+     * @param w the width in columns of the area to check
+     * @param h the height in rows of the area to check
+     * @returns true if the area is completely empty, false if any node overlaps
+     *
+     * @example
+     * if (engine.isAreaEmpty(2, 1, 3, 2)) {
+     *   console.log('Area is available for placement');
+     * }
+     */
+    isAreaEmpty(x: number, y: number, w: number, h: number): boolean;
+    /**
+     * Re-layout grid items to reclaim any empty space.
+     * This optimizes the grid layout by moving items to fill gaps.
+     *
+     * @param layout layout algorithm to use:
+     *   - 'compact' (default): find truly empty spaces, may reorder items
+     *   - 'list': keep the sort order exactly the same, move items up sequentially
+     * @param doSort if true (default), sort nodes by position before compacting
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * // Compact to fill empty spaces
+     * engine.compact();
+     *
+     * // Compact preserving item order
+     * engine.compact('list');
+     */
+    compact(layout?: CompactOptions, doSort?: boolean): GridStackEngine;
+    /**
+     * Enable/disable floating widgets (default: `false`).
+     * When floating is enabled, widgets can move up to fill empty spaces.
+     * See [example](http://gridstackjs.com/demo/float.html)
+     *
+     * @param val true to enable floating, false to disable
+     *
+     * @example
+     * engine.float = true;  // Enable floating
+     * engine.float = false; // Disable floating (default)
+     */
+    set float(val: boolean);
+    /**
+     * Get the current floating mode setting.
+     *
+     * @returns true if floating is enabled, false otherwise
+     *
+     * @example
+     * const isFloating = engine.float;
+     * console.log('Floating enabled:', isFloating);
+     */
+    get float(): boolean;
+    /**
+     * Sort the nodes array from first to last, or reverse.
+     * This is called during collision/placement operations to enforce a specific order.
+     *
+     * @param dir sort direction: 1 for ascending (first to last), -1 for descending (last to first)
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * engine.sortNodes();    // Sort ascending (default)
+     * engine.sortNodes(-1);  // Sort descending
+     */
+    sortNodes(dir?: 1 | -1): GridStackEngine;
+    /**
+     * Prepare and validate a node's coordinates and values for the current grid.
+     * This ensures the node has valid position, size, and properties before being added to the grid.
+     *
+     * @param node the node to prepare and validate
+     * @param resizing if true, resize the node down if it's out of bounds; if false, move it to fit
+     * @returns the prepared node with valid coordinates
+     *
+     * @example
+     * const node = { w: 3, h: 2, content: 'Hello' };
+     * const prepared = engine.prepareNode(node);
+     * console.log('Node prepared at:', prepared.x, prepared.y);
+     */
+    prepareNode(node: GridStackNode, resizing?: boolean): GridStackNode;
+    /**
+     * Part 2 of preparing a node to fit inside the grid - validates and fixes coordinates and dimensions.
+     * This ensures the node fits within grid boundaries and respects min/max constraints.
+     *
+     * @param node the node to validate and fix
+     * @param resizing if true, resize the node to fit; if false, move the node to fit
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * // Fix a node that might be out of bounds
+     * engine.nodeBoundFix(node, true); // Resize to fit
+     * engine.nodeBoundFix(node, false); // Move to fit
+     */
+    nodeBoundFix(node: GridStackNode, resizing?: boolean): GridStackEngine;
+    /**
+     * Returns a list of nodes that have been modified from their original values.
+     * This is used to track which nodes need DOM updates.
+     *
+     * @param verify if true, performs additional verification by comparing current vs original positions
+     * @returns array of nodes that have been modified
+     *
+     * @example
+     * const changed = engine.getDirtyNodes();
+     * console.log('Modified nodes:', changed.length);
+     *
+     * // Get verified dirty nodes
+     * const verified = engine.getDirtyNodes(true);
+     */
+    getDirtyNodes(verify?: boolean): GridStackNode[];
+    /**
+     * Find the first available empty spot for the given node dimensions.
+     * Updates the node's x,y attributes with the found position.
+     *
+     * @param node the node to find a position for (w,h must be set)
+     * @param nodeList optional list of nodes to check against (defaults to engine nodes)
+     * @param column optional column count (defaults to engine column count)
+     * @param after optional node to start search after (maintains order)
+     * @returns true if an empty position was found and node was updated
+     *
+     * @example
+     * const node = { w: 2, h: 1 };
+     * if (engine.findEmptyPosition(node)) {
+     *   console.log('Found position at:', node.x, node.y);
+     * }
+     */
+    findEmptyPosition(node: GridStackNode, nodeList?: GridStackNode[], column?: number, after?: GridStackNode): boolean;
+    /**
+     * Add the given node to the grid, handling collision detection and re-packing.
+     * This is the main method for adding new widgets to the engine.
+     *
+     * @param node the node to add to the grid
+     * @param triggerAddEvent if true, adds node to addedNodes list for event triggering
+     * @param after optional node to place this node after (for ordering)
+     * @returns the added node (or existing node if duplicate)
+     *
+     * @example
+     * const node = { x: 0, y: 0, w: 2, h: 1, content: 'Hello' };
+     * const added = engine.addNode(node, true);
+     */
+    addNode(node: GridStackNode, triggerAddEvent?: boolean, after?: GridStackNode): GridStackNode;
+    /**
+     * Remove the given node from the grid.
+     *
+     * @param node the node to remove
+     * @param removeDOM if true (default), marks node for DOM removal
+     * @param triggerEvent if true, adds node to removedNodes list for event triggering
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * engine.removeNode(node, true, true);
+     */
+    removeNode(node: GridStackNode, removeDOM?: boolean, triggerEvent?: boolean): GridStackEngine;
+    /**
+     * Remove all nodes from the grid.
+     *
+     * @param removeDOM if true (default), marks all nodes for DOM removal
+     * @param triggerEvent if true (default), triggers removal events
+     * @returns the engine instance for chaining
+     *
+     * @example
+     * engine.removeAll(); // Remove all nodes
+     */
+    removeAll(removeDOM?: boolean, triggerEvent?: boolean): GridStackEngine;
+    /**
+     * Check if a node can be moved to a new position, considering layout constraints.
+     * This is a safer version of moveNode() that validates the move first.
+     *
+     * For complex cases (like maxRow constraints), it simulates the move in a clone first,
+     * then applies the changes only if they meet all specifications.
+     *
+     * @param node the node to move
+     * @param o move options including target position
+     * @returns true if the node was successfully moved
+     *
+     * @example
+     * const canMove = engine.moveNodeCheck(node, { x: 2, y: 1 });
+     * if (canMove) {
+     *   console.log('Node moved successfully');
+     * }
+     */
+    moveNodeCheck(node: GridStackNode, o: GridStackMoveOpts): boolean;
+    /** return true if can fit in grid height constrain only (always true if no maxRow) */
+    willItFit(node: GridStackNode): boolean;
+    /** true if x,y or w,h are different after clamping to min/max */
+    changedPosConstrain(node: GridStackNode, p: GridStackPosition): boolean;
+    /** return true if the passed in node was actually moved (checks for no-op and locked) */
+    moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean;
+    getRow(): number;
+    beginUpdate(node: GridStackNode): GridStackEngine;
+    endUpdate(): GridStackEngine;
+    /** saves a copy of the largest column layout (eg 12 even when rendering 1 column) so we don't loose orig layout, unless explicity column
+     * count to use is given. returning a list of widgets for serialization
+     * @param saveElement if true (default), the element will be saved to GridStackWidget.el field, else it will be removed.
+     * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
+     * @param column if provided, the grid will be saved for the given column count (IFF we have matching internal saved layout, or current layout).
+     * Note: nested grids will ALWAYS save the container w to match overall layouts (parent + child) to be consistent.
+    */
+    save(saveElement?: boolean, saveCB?: SaveFcn, column?: number): GridStackNode[];
+    /**
+     * call to cache the given layout internally to the given location so we can restore back when column changes size
+     * @param nodes list of nodes
+     * @param column corresponding column index to save it under
+     * @param clear if true, will force other caches to be removed (default false)
+     */
+    cacheLayout(nodes: GridStackNode[], column: number, clear?: boolean): GridStackEngine;
+    /**
+     * call to cache the given node layout internally to the given location so we can restore back when column changes size
+     * @param node single node to cache
+     * @param column corresponding column index to save it under
+     */
+    cacheOneLayout(n: GridStackNode, column: number): GridStackEngine;
+    protected findCacheLayout(n: GridStackNode, column: number): number | undefined;
+    removeNodeFromLayoutCache(n: GridStackNode): void;
+    /** called to remove all internal values but the _id */
+    cleanupNode(node: GridStackNode): GridStackEngine;
+}
+export {};

node_modules/gridstack/dist/gridstack.css

@@ -0,0 +1,174 @@
+/**
+ * gridstack SASS styles 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+.grid-stack {
+  position: relative;
+}
+
+.grid-stack-rtl {
+  direction: ltr;
+}
+.grid-stack-rtl > .grid-stack-item {
+  direction: rtl;
+}
+
+.grid-stack-placeholder > .placeholder-content {
+  background-color: rgba(0, 0, 0, 0.1);
+  margin: 0;
+  position: absolute;
+  width: auto;
+  z-index: 0 !important;
+}
+
+.grid-stack > .grid-stack-item {
+  position: absolute;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: var(--gs-column-width);
+  height: var(--gs-cell-height);
+}
+.grid-stack > .grid-stack-item > .grid-stack-item-content {
+  margin: 0;
+  position: absolute;
+  width: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
+  overflow-y: hidden;
+}
+
+.grid-stack > .grid-stack-item > .grid-stack-item-content,
+.grid-stack > .grid-stack-placeholder > .placeholder-content {
+  top: var(--gs-item-margin-top);
+  right: var(--gs-item-margin-right);
+  bottom: var(--gs-item-margin-bottom);
+  left: var(--gs-item-margin-left);
+}
+
+.grid-stack-item > .ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
+  display: none;
+}
+.grid-stack-item > .ui-resizable-ne,
+.grid-stack-item > .ui-resizable-nw,
+.grid-stack-item > .ui-resizable-se,
+.grid-stack-item > .ui-resizable-sw {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.grid-stack-item > .ui-resizable-ne {
+  transform: rotate(45deg);
+}
+.grid-stack-item > .ui-resizable-sw {
+  transform: rotate(45deg);
+}
+.grid-stack-item > .ui-resizable-nw {
+  transform: rotate(-45deg);
+}
+.grid-stack-item > .ui-resizable-se {
+  transform: rotate(-45deg);
+}
+.grid-stack-item > .ui-resizable-nw {
+  cursor: nw-resize;
+  width: 20px;
+  height: 20px;
+  top: var(--gs-item-margin-top);
+  left: var(--gs-item-margin-left);
+}
+.grid-stack-item > .ui-resizable-n {
+  cursor: n-resize;
+  height: 10px;
+  top: var(--gs-item-margin-top);
+  left: 25px;
+  right: 25px;
+}
+.grid-stack-item > .ui-resizable-ne {
+  cursor: ne-resize;
+  width: 20px;
+  height: 20px;
+  top: var(--gs-item-margin-top);
+  right: var(--gs-item-margin-right);
+}
+.grid-stack-item > .ui-resizable-e {
+  cursor: e-resize;
+  width: 10px;
+  top: 15px;
+  bottom: 15px;
+  right: var(--gs-item-margin-right);
+}
+.grid-stack-item > .ui-resizable-se {
+  cursor: se-resize;
+  width: 20px;
+  height: 20px;
+  bottom: var(--gs-item-margin-bottom);
+  right: var(--gs-item-margin-right);
+}
+.grid-stack-item > .ui-resizable-s {
+  cursor: s-resize;
+  height: 10px;
+  left: 25px;
+  bottom: var(--gs-item-margin-bottom);
+  right: 25px;
+}
+.grid-stack-item > .ui-resizable-sw {
+  cursor: sw-resize;
+  width: 20px;
+  height: 20px;
+  bottom: var(--gs-item-margin-bottom);
+  left: var(--gs-item-margin-left);
+}
+.grid-stack-item > .ui-resizable-w {
+  cursor: w-resize;
+  width: 10px;
+  top: 15px;
+  bottom: 15px;
+  left: var(--gs-item-margin-left);
+}
+.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
+  display: none !important;
+}
+.grid-stack-item.ui-draggable-dragging {
+  will-change: left, top;
+}
+.grid-stack-item.ui-resizable-resizing {
+  will-change: width, height;
+}
+
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 10000;
+}
+.ui-draggable-dragging > .grid-stack-item-content,
+.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+
+.grid-stack-animate,
+.grid-stack-animate .grid-stack-item {
+  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+}
+
+.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
+  transition: left 0s, top 0s, height 0s, width 0s;
+}
+
+.grid-stack > .grid-stack-item[gs-y="0"] {
+  top: 0px;
+}
+
+.grid-stack > .grid-stack-item[gs-x="0"] {
+  left: 0%;
+}

node_modules/gridstack/dist/gridstack.d.ts

@@ -0,0 +1,801 @@
+/*!
+ * GridStack 12.4.2
+ * https://gridstackjs.com/
+ *
+ * Copyright (c) 2021-2025  Alain Dumesny
+ * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
+ */
+import { GridStackEngine } from './gridstack-engine';
+import { Utils } from './utils';
+import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragOpt, GridStackOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler, Position, RenderFcn } from './types';
+import { DDGridStack } from './dd-gridstack';
+export * from './types';
+export * from './utils';
+export * from './gridstack-engine';
+export * from './dd-gridstack';
+export * from './dd-manager';
+export * from './dd-element';
+export * from './dd-draggable';
+export * from './dd-droppable';
+export * from './dd-resizable';
+export * from './dd-resizable-handle';
+export * from './dd-base-impl';
+export interface GridHTMLElement extends HTMLElement {
+    gridstack?: GridStack;
+}
+/** list of possible events, or space separated list of them */
+export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent';
+/** Defines the coordinates of an object */
+export interface MousePosition {
+    top: number;
+    left: number;
+}
+/** Defines the position of a cell inside the grid*/
+export interface CellPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
+ * Note: your grid elements MUST have the following classes for the CSS layout to work:
+ * @example
+ * <div class="grid-stack">
+ *   <div class="grid-stack-item">
+ *     <div class="grid-stack-item-content">Item 1</div>
+ *   </div>
+ * </div>
+ */
+export declare class GridStack {
+    el: GridHTMLElement;
+    opts: GridStackOptions;
+    /**
+     * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
+     * simply return the existing instance (ignore any passed options). There is also an initAll() version that support
+     * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
+     * @param options grid options (optional)
+     * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
+     *
+     * @example
+     * const grid = GridStack.init();
+     *
+     * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
+     * const grid = document.querySelector('.grid-stack').gridstack;
+     */
+    static init(options?: GridStackOptions, elOrString?: GridStackElement): GridStack;
+    /**
+     * Will initialize a list of elements (given a selector) and return an array of grids.
+     * @param options grid options (optional)
+     * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
+     *
+     * @example
+     * const grids = GridStack.initAll();
+     * grids.forEach(...)
+     */
+    static initAll(options?: GridStackOptions, selector?: string): GridStack[];
+    /**
+     * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
+     * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
+     * JSON serialized data, including options.
+     * @param parent HTML element parent to the grid
+     * @param opt grids options used to initialize the grid, and list of children
+     */
+    static addGrid(parent: HTMLElement, opt?: GridStackOptions): GridStack;
+    /** call this method to register your engine instead of the default one.
+     * See instead `GridStackOptions.engineClass` if you only need to
+     * replace just one instance.
+     */
+    static registerEngine(engineClass: typeof GridStackEngine): void;
+    /**
+     * callback method use when new items|grids needs to be created or deleted, instead of the default
+     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
+     * grid: <div class="grid-stack">grid content...</div>
+     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
+     * add = false: the item will be removed from DOM (if not already done)
+     * grid = true|false for grid vs grid-items
+     */
+    static addRemoveCB?: AddRemoveFcn;
+    /**
+     * callback during saving to application can inject extra data for each widget, on top of the grid layout properties
+     */
+    static saveCB?: SaveFcn;
+    /**
+     * callback to create the content of widgets so the app can control how to store and restore it
+     * By default this lib will do 'el.textContent = w.content' forcing text only support for avoiding potential XSS issues.
+     */
+    static renderCB?: RenderFcn;
+    /** called after a widget has been updated (eg: load() into an existing list of children) so application can do extra work */
+    static updateCB?: (w: GridStackNode) => void;
+    /** callback to use for resizeToContent instead of the built in one */
+    static resizeToContentCB?: ResizeToContentFcn;
+    /** parent class for sizing content. defaults to '.grid-stack-item-content' */
+    static resizeToContentParent: string;
+    /** scoping so users can call GridStack.Utils.sort() for example */
+    static Utils: typeof Utils;
+    /** scoping so users can call new GridStack.Engine(12) for example */
+    static Engine: typeof GridStackEngine;
+    /** engine used to implement non DOM grid functionality */
+    engine: GridStackEngine;
+    /** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */
+    parentGridNode?: GridStackNode;
+    /** time to wait for animation (if enabled) to be done so content sizing can happen */
+    animationDelay: number;
+    protected static engineClass: typeof GridStackEngine;
+    protected resizeObserver: ResizeObserver;
+    protected responseLayout: ColumnOptions;
+    private _skipInitialResize;
+    /**
+     * Construct a grid item from the given element and options
+     * @param el the HTML element tied to this grid after it's been initialized
+     * @param opts grid options - public for classes to access, but use methods to modify!
+     */
+    constructor(el: GridHTMLElement, opts?: GridStackOptions);
+    private _updateColumnVar;
+    /**
+     * add a new widget and returns it.
+     *
+     * Widget will be always placed even if result height is more than actual grid height.
+     * You need to use `willItFit()` before calling addWidget for additional check.
+     * See also `makeWidget(el)` for DOM element.
+     *
+     * @example
+     * const grid = GridStack.init();
+     * grid.addWidget({w: 3, content: 'hello'});
+     *
+     * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
+     */
+    addWidget(w: GridStackWidget): GridItemHTMLElement;
+    /**
+     * Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB().
+     *
+     * @param n GridStackNode definition containing widget configuration
+     * @returns the created HTML element with proper grid item structure
+     *
+     * @example
+     * const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
+     */
+    createWidgetDivs(n: GridStackNode): HTMLElement;
+    /**
+     * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+     * from the parent's subGrid options.
+     * @param el gridItem element to convert
+     * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
+     * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+     * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget
+     * @returns newly created grid
+     */
+    makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, nodeToAdd?: GridStackNode, saveContent?: boolean): GridStack;
+    /**
+     * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+     * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
+     */
+    removeAsSubGrid(nodeThatRemoved?: GridStackNode): void;
+    /**
+     * saves the current layout returning a list of widgets for serialization which might include any nested grids.
+     * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
+     * be removed.
+     * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
+     * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+     * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
+     * @param column if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout).
+     * Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts.
+     * NOTE: if you want to save to currently display layout, pass this.getColumn() as column.
+     * NOTE2: nested grids will ALWAYS save to the container size to be in sync with parent.
+     * @returns list of widgets or full grid option, including .children list of widgets
+     */
+    save(saveContent?: boolean, saveGridOpt?: boolean, saveCB?: SaveFcn, column?: number): GridStackWidget[] | GridStackOptions;
+    /**
+     * Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
+     * Used to restore a grid layout for a saved layout list (see `save()`).
+     *
+     * @param items list of widgets definition to update/create
+     * @param addRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
+     * the user control of insertion.
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Basic usage with saved layout
+     * const savedLayout = grid.save(); // Save current layout
+     * // ... later restore it
+     * grid.load(savedLayout);
+     *
+     * // Load with custom add/remove callback
+     * grid.load(layout, (items, grid, add) => {
+     *   if (add) {
+     *     // Custom logic for adding new widgets
+     *     items.forEach(item => {
+     *       const el = document.createElement('div');
+     *       el.innerHTML = item.content || '';
+     *       grid.addWidget(el, item);
+     *     });
+     *   } else {
+     *     // Custom logic for removing widgets
+     *     items.forEach(item => grid.removeWidget(item.el));
+     *   }
+     * });
+     *
+     * // Load without adding/removing missing widgets
+     * grid.load(layout, false);
+     *
+     * @see {@link http://gridstackjs.com/demo/serialization.html} for complete example
+     */
+    load(items: GridStackWidget[], addRemove?: boolean | AddRemoveFcn): GridStack;
+    /**
+     * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+     * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
+     */
+    batchUpdate(flag?: boolean): GridStack;
+    /**
+     * Gets the current cell height in pixels. This takes into account the unit type and converts to pixels if necessary.
+     *
+     * @param forcePixel if true, forces conversion to pixels even when cellHeight is specified in other units
+     * @returns the cell height in pixels
+     *
+     * @example
+     * const height = grid.getCellHeight();
+     * console.log('Cell height:', height, 'px');
+     *
+     * // Force pixel conversion
+     * const pixelHeight = grid.getCellHeight(true);
+     */
+    getCellHeight(forcePixel?: boolean): number;
+    /**
+     * Update current cell height - see `GridStackOptions.cellHeight` for format by updating eh Browser CSS variable.
+     *
+     * @param val the cell height. Options:
+     *   - `undefined`: cells content will be made square (match width minus margin)
+     *   - `0`: the CSS will be generated by the application instead
+     *   - number: height in pixels
+     *   - string: height with units (e.g., '70px', '5rem', '2em')
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * grid.cellHeight(100);     // 100px height
+     * grid.cellHeight('70px');  // explicit pixel height
+     * grid.cellHeight('5rem');  // relative to root font size
+     * grid.cellHeight(grid.cellWidth() * 1.2); // aspect ratio
+     * grid.cellHeight('auto');  // auto-size based on content
+     */
+    cellHeight(val?: numberOrString): GridStack;
+    /** Gets current cell width. */
+    /**
+     * Gets the current cell width in pixels. This is calculated based on the grid container width divided by the number of columns.
+     *
+     * @returns the cell width in pixels
+     *
+     * @example
+     * const width = grid.cellWidth();
+     * console.log('Cell width:', width, 'px');
+     *
+     * // Use cell width to calculate widget dimensions
+     * const widgetWidth = width * 3; // For a 3-column wide widget
+     */
+    cellWidth(): number;
+    /** return our expected width (or parent) , and optionally of window for dynamic column check */
+    protected _widthOrContainer(forBreakpoint?: boolean): number;
+    /** checks for dynamic column count for our current size, returning true if changed */
+    protected checkDynamicColumn(): boolean;
+    /**
+     * Re-layout grid items to reclaim any empty space. This is useful after removing widgets
+     * or when you want to optimize the layout.
+     *
+     * @param layout layout type. Options:
+     *   - 'compact' (default): might re-order items to fill any empty space
+     *   - 'list': keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit
+     * @param doSort re-sort items first based on x,y position. Set to false to do your own sorting ahead (default: true)
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Compact layout after removing widgets
+     * grid.removeWidget('.widget-to-remove');
+     * grid.compact();
+     *
+     * // Use list layout (preserve order)
+     * grid.compact('list');
+     *
+     * // Compact without sorting first
+     * grid.compact('compact', false);
+     */
+    compact(layout?: CompactOptions, doSort?: boolean): GridStack;
+    /**
+     * Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
+     * as well as cache the original layout so you can revert back to previous positions without loss.
+     *
+     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11] columns,
+     * else you will need to generate correct CSS.
+     * See: https://github.com/gridstack/gridstack.js#change-grid-columns
+     *
+     * @param column Integer > 0 (default 12)
+     * @param layout specify the type of re-layout that will happen. Options:
+     *   - 'moveScale' (default): scale widget positions and sizes
+     *   - 'move': keep widget sizes, only move positions
+     *   - 'scale': keep widget positions, only scale sizes
+     *   - 'none': don't change widget positions or sizes
+     *   Note: items will never be outside of the current column boundaries.
+     *   Ignored for `column=1` as we always want to vertically stack.
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Change to 6 columns with default scaling
+     * grid.column(6);
+     *
+     * // Change to 4 columns, only move positions
+     * grid.column(4, 'move');
+     *
+     * // Single column layout (vertical stack)
+     * grid.column(1);
+     */
+    column(column: number, layout?: ColumnOptions): GridStack;
+    /**
+     * Get the number of columns in the grid (default 12).
+     *
+     * @returns the current number of columns in the grid
+     *
+     * @example
+     * const columnCount = grid.getColumn(); // returns 12 by default
+     */
+    getColumn(): number;
+    /**
+     * Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
+     * This method excludes placeholder elements and returns only actual grid items.
+     *
+     * @returns array of GridItemHTMLElement instances representing all grid items
+     *
+     * @example
+     * const items = grid.getGridItems();
+     * items.forEach(item => {
+     *   console.log('Item ID:', item.gridstackNode.id);
+     * });
+     */
+    getGridItems(): GridItemHTMLElement[];
+    /**
+     * Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
+     * This is useful for callers who want to implement dirty flag functionality.
+     *
+     * @returns true if change callbacks are currently being ignored
+     *
+     * @example
+     * if (!grid.isIgnoreChangeCB()) {
+     *   // Process the change event
+     *   console.log('Grid layout changed');
+     * }
+     */
+    isIgnoreChangeCB(): boolean;
+    /**
+     * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
+     * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
+     */
+    destroy(removeDOM?: boolean): GridStack;
+    /**
+     * Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
+     * See [example](http://gridstackjs.com/demo/float.html)
+     *
+     * @param val true to enable floating, false to disable
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * grid.float(true);  // Enable floating
+     * grid.float(false); // Disable floating (default)
+     */
+    float(val: boolean): GridStack;
+    /**
+     * Get the current float mode setting.
+     *
+     * @returns true if floating is enabled, false otherwise
+     *
+     * @example
+     * const isFloating = grid.getFloat();
+     * console.log('Floating enabled:', isFloating);
+     */
+    getFloat(): boolean;
+    /**
+     * Get the position of the cell under a pixel on screen.
+     * @param position the position of the pixel to resolve in
+     * absolute coordinates, as an object with top and left properties
+     * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
+     * Useful when grid is within `position: relative` element
+     *
+     * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
+     */
+    getCellFromPixel(position: MousePosition, useDocRelative?: boolean): CellPosition;
+    /**
+     * Returns the current number of rows, which will be at least `minRow` if set.
+     * The row count is based on the highest positioned widget in the grid.
+     *
+     * @returns the current number of rows in the grid
+     *
+     * @example
+     * const rowCount = grid.getRow();
+     * console.log('Grid has', rowCount, 'rows');
+     */
+    getRow(): number;
+    /**
+     * Checks if the specified rectangular area is empty (no widgets occupy any part of it).
+     *
+     * @param x the x coordinate (column) of the area to check
+     * @param y the y coordinate (row) of the area to check
+     * @param w the width in columns of the area to check
+     * @param h the height in rows of the area to check
+     * @returns true if the area is completely empty, false if any widget overlaps
+     *
+     * @example
+     * // Check if a 2x2 area at position (1,1) is empty
+     * if (grid.isAreaEmpty(1, 1, 2, 2)) {
+     *   console.log('Area is available for placement');
+     * }
+     */
+    isAreaEmpty(x: number, y: number, w: number, h: number): boolean;
+    /**
+     * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
+     * If you want gridstack to add the elements for you, use `addWidget()` instead.
+     * Makes the given element a widget and returns it.
+     *
+     * @param els widget or single selector to convert.
+     * @param options widget definition to use instead of reading attributes or using default sizing values
+     * @returns the converted GridItemHTMLElement
+     *
+     * @example
+     * const grid = GridStack.init();
+     *
+     * // Create HTML content manually, possibly looking like:
+     * // <div id="item-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2"></div>
+     * grid.el.innerHTML = '<div id="item-1" gs-w="3"></div><div id="item-2"></div>';
+     *
+     * // Convert existing elements to widgets
+     * grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM
+     * grid.makeWidget('#item-2', {w: 2, h: 1, content: 'Hello World'});
+     *
+     * // Or pass DOM element directly
+     * const element = document.getElementById('item-3');
+     * grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
+     */
+    makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement;
+    /**
+     * Register event handler for grid events. You can call this on a single event name, or space separated list.
+     *
+     * Supported events:
+     * - `added`: Called when widgets are being added to a grid
+     * - `change`: Occurs when widgets change their position/size due to constraints or direct changes
+     * - `disable`: Called when grid becomes disabled
+     * - `dragstart`: Called when grid item starts being dragged
+     * - `drag`: Called while grid item is being dragged (for each new row/column value)
+     * - `dragstop`: Called after user is done moving the item, with updated DOM attributes
+     * - `dropped`: Called when an item has been dropped and accepted over a grid
+     * - `enable`: Called when grid becomes enabled
+     * - `removed`: Called when items are being removed from the grid
+     * - `resizestart`: Called before user starts resizing an item
+     * - `resize`: Called while grid item is being resized (for each new row/column value)
+     * - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
+     *
+     * @param name event name(s) to listen for (space separated for multiple)
+     * @param callback function to call when event occurs
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Listen to multiple events at once
+     * grid.on('added removed change', (event, items) => {
+     *   items.forEach(item => console.log('Item changed:', item));
+     * });
+     *
+     * // Listen to individual events
+     * grid.on('added', (event, items) => {
+     *   items.forEach(item => console.log('Added item:', item));
+     * });
+     */
+    on(name: 'dropped', callback: GridStackDroppedHandler): GridStack;
+    on(name: 'enable' | 'disable', callback: GridStackEventHandler): GridStack;
+    on(name: 'change' | 'added' | 'removed' | 'resizecontent', callback: GridStackNodesHandler): GridStack;
+    on(name: 'resizestart' | 'resize' | 'resizestop' | 'dragstart' | 'drag' | 'dragstop', callback: GridStackElementHandler): GridStack;
+    on(name: string, callback: GridStackEventHandlerCallback): GridStack;
+    /**
+     * unsubscribe from the 'on' event GridStackEvent
+     * @param name of the event (see possible values) or list of names space separated
+     */
+    off(name: GridStackEvent | string): GridStack;
+    /**
+     * Remove all event handlers from the grid. This is useful for cleanup when destroying a grid.
+     *
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * grid.offAll(); // Remove all event listeners
+     */
+    offAll(): GridStack;
+    /**
+     * Removes widget from the grid.
+     * @param el  widget or selector to modify
+     * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
+     * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+     */
+    removeWidget(els: GridStackElement, removeDOM?: boolean, triggerEvent?: boolean): GridStack;
+    /**
+     * Removes all widgets from the grid.
+     * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+     * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+     */
+    removeAll(removeDOM?: boolean, triggerEvent?: boolean): GridStack;
+    /**
+     * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
+     * @param doAnimate if true the grid will animate.
+     * @param delay if true setting will be set on next event loop.
+     */
+    setAnimation(doAnimate?: boolean, delay?: boolean): GridStack;
+    /**
+     * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+     * Also toggle the grid-stack-static class.
+     * @param val if true the grid become static.
+     * @param updateClass true (default) if css class gets updated
+     * @param recurse true (default) if sub-grids also get updated
+     */
+    setStatic(val: boolean, updateClass?: boolean, recurse?: boolean): GridStack;
+    /**
+     * Updates the passed in options on the grid (similar to update(widget) for for the grid options).
+     * @param options PARTIAL grid options to update - only items specified will be updated.
+     * NOTE: not all options updating are currently supported (lot of code, unlikely to change)
+     */
+    updateOptions(o: GridStackOptions): GridStack;
+    /**
+     * Updates widget position/size and other info. This is used to change widget properties after creation.
+     * Can update position, size, content, and other widget properties.
+     *
+     * Note: If you need to call this on all nodes, use load() instead which will update what changed.
+     * Setting the same x,y for multiple items will be indeterministic and likely unwanted.
+     *
+     * @param els widget element(s) or selector to modify
+     * @param opt new widget options (x,y,w,h, etc.). Only those set will be updated.
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Update widget size and position
+     * grid.update('.my-widget', { x: 2, y: 1, w: 3, h: 2 });
+     *
+     * // Update widget content
+     * grid.update(widget, { content: '<p>New content</p>' });
+     *
+     * // Update multiple properties
+     * grid.update('#my-widget', {
+     *   w: 4,
+     *   h: 3,
+     *   noResize: true,
+     *   locked: true
+     * });
+     */
+    update(els: GridStackElement, opt: GridStackWidget): GridStack;
+    private moveNode;
+    /**
+     * Updates widget height to match the content height to avoid vertical scrollbars or dead space.
+     * This automatically adjusts the widget height based on its content size.
+     *
+     * Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content'
+     * (sized to gridItem minus padding) that represents the entire content size.
+     *
+     * @param el the grid item element to resize
+     *
+     * @example
+     * // Resize a widget to fit its content
+     * const widget = document.querySelector('.grid-stack-item');
+     * grid.resizeToContent(widget);
+     *
+     * // This is commonly used with dynamic content:
+     * widget.querySelector('.content').innerHTML = 'New longer content...';
+     * grid.resizeToContent(widget);
+     */
+    resizeToContent(el: GridItemHTMLElement): void;
+    /** call the user resize (so they can do extra work) else our build in version */
+    private resizeToContentCBCheck;
+    /**
+     * Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
+     * The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly.
+     *
+     * @param els widget element(s) or selector to rotate
+     * @param relative optional pixel coordinate relative to upper/left corner to rotate around (keeps that cell under cursor)
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Rotate a specific widget
+     * grid.rotate('.my-widget');
+     *
+     * // Rotate with relative positioning during drag
+     * grid.rotate(widget, { left: 50, top: 30 });
+     */
+    rotate(els: GridStackElement, relative?: Position): GridStack;
+    /**
+     * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
+     * Supports CSS string format of 1, 2, or 4 values or a single number.
+     *
+     * @param value margin value - can be:
+     *   - Single number: `10` (applies to all sides)
+     *   - Two values: `'10px 20px'` (top/bottom, left/right)
+     *   - Four values: `'10px 20px 5px 15px'` (top, right, bottom, left)
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * grid.margin(10);           // 10px all sides
+     * grid.margin('10px 20px');  // 10px top/bottom, 20px left/right
+     * grid.margin('5px 10px 15px 20px'); // Different for each side
+     */
+    margin(value: numberOrString): GridStack;
+    /**
+     * Returns the current margin value as a number (undefined if the 4 sides don't match).
+     * This only returns a number if all sides have the same margin value.
+     *
+     * @returns the margin value in pixels, or undefined if sides have different values
+     *
+     * @example
+     * const margin = grid.getMargin();
+     * if (margin !== undefined) {
+     *   console.log('Uniform margin:', margin, 'px');
+     * } else {
+     *   console.log('Margins are different on different sides');
+     * }
+     */
+    getMargin(): number;
+    /**
+     * Returns true if the height of the grid will be less than the vertical
+     * constraint. Always returns true if grid doesn't have height constraint.
+     * @param node contains x,y,w,h,auto-position options
+     *
+     * @example
+     * if (grid.willItFit(newWidget)) {
+     *   grid.addWidget(newWidget);
+     * } else {
+     *   alert('Not enough free space to place the widget');
+     * }
+     */
+    willItFit(node: GridStackWidget): boolean;
+    /**
+     * called when we are being resized - check if the one Column Mode needs to be turned on/off
+     * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+     * or `sizeToContent` gridItem options.
+     */
+    onResize(clientWidth?: number): GridStack;
+    /** resizes content for given node (or all) if shouldSizeToContent() is true */
+    private resizeToContentCheck;
+    /** add or remove the grid element size event handler */
+    protected _updateResizeEvent(forceRemove?: boolean): GridStack;
+    /**
+     * Get the global drag & drop implementation instance.
+     * This provides access to the underlying drag & drop functionality.
+     *
+     * @returns the DDGridStack instance used for drag & drop operations
+     *
+     * @example
+     * const dd = GridStack.getDD();
+     * // Access drag & drop functionality
+     */
+    static getDD(): DDGridStack;
+    /**
+     * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+     * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+     * is dynamically create and needs to be set later.
+     * @param dragIn string selector (ex: '.sidebar-item') or list of dom elements
+     * @param dragInOptions options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
+     * @param widgets GridStackWidget def to assign to each element which defines what to create on drop
+     * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
+     */
+    static setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragOpt, widgets?: GridStackWidget[], root?: HTMLElement | Document): void;
+    /**
+     * Enables/Disables dragging by the user for specific grid elements.
+     * For all items and future items, use enableMove() instead. No-op for static grids.
+     *
+     * Note: If you want to prevent an item from moving due to being pushed around by another
+     * during collision, use the 'locked' property instead.
+     *
+     * @param els widget element(s) or selector to modify
+     * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Make specific widgets draggable
+     * grid.movable('.my-widget', true);
+     *
+     * // Disable dragging for specific widgets
+     * grid.movable('#fixed-widget', false);
+     */
+    movable(els: GridStackElement, val: boolean): GridStack;
+    /**
+     * Enables/Disables user resizing for specific grid elements.
+     * For all items and future items, use enableResize() instead. No-op for static grids.
+     *
+     * @param els widget element(s) or selector to modify
+     * @param val if true widget will be resizable, assuming the parent grid isn't noResize or static
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Make specific widgets resizable
+     * grid.resizable('.my-widget', true);
+     *
+     * // Disable resizing for specific widgets
+     * grid.resizable('#fixed-size-widget', false);
+     */
+    resizable(els: GridStackElement, val: boolean): GridStack;
+    /**
+     * Temporarily disables widgets moving/resizing.
+     * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
+     *
+     * Note: This is a no-op for static grids.
+     *
+     * This is a shortcut for:
+     * ```typescript
+     * grid.enableMove(false);
+     * grid.enableResize(false);
+     * ```
+     *
+     * @param recurse if true (default), sub-grids also get updated
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Disable all interactions
+     * grid.disable();
+     *
+     * // Disable only this grid, not sub-grids
+     * grid.disable(false);
+     */
+    disable(recurse?: boolean): GridStack;
+    /**
+     * Re-enables widgets moving/resizing - see disable().
+     * Note: This is a no-op for static grids.
+     *
+     * This is a shortcut for:
+     * ```typescript
+     * grid.enableMove(true);
+     * grid.enableResize(true);
+     * ```
+     *
+     * @param recurse if true (default), sub-grids also get updated
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Re-enable all interactions
+     * grid.enable();
+     *
+     * // Enable only this grid, not sub-grids
+     * grid.enable(false);
+     */
+    enable(recurse?: boolean): GridStack;
+    /**
+     * Enables/disables widget moving for all widgets. No-op for static grids.
+     * Note: locally defined items (with noMove property) still override this setting.
+     *
+     * @param doEnable if true widgets will be movable, if false moving is disabled
+     * @param recurse if true (default), sub-grids also get updated
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Enable moving for all widgets
+     * grid.enableMove(true);
+     *
+     * // Disable moving for all widgets
+     * grid.enableMove(false);
+     *
+     * // Enable only this grid, not sub-grids
+     * grid.enableMove(true, false);
+     */
+    enableMove(doEnable: boolean, recurse?: boolean): GridStack;
+    /**
+     * Enables/disables widget resizing for all widgets. No-op for static grids.
+     * Note: locally defined items (with noResize property) still override this setting.
+     *
+     * @param doEnable if true widgets will be resizable, if false resizing is disabled
+     * @param recurse if true (default), sub-grids also get updated
+     * @returns the grid instance for chaining
+     *
+     * @example
+     * // Enable resizing for all widgets
+     * grid.enableResize(true);
+     *
+     * // Disable resizing for all widgets
+     * grid.enableResize(false);
+     *
+     * // Enable only this grid, not sub-grids
+     * grid.enableResize(true, false);
+     */
+    enableResize(doEnable: boolean, recurse?: boolean): GridStack;
+    /**
+     * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
+     * @param el GridItemHTMLElement of the widget
+     * @param [force=false]
+     * */
+    prepareDragDrop(el: GridItemHTMLElement, force?: boolean): GridStack;
+    /** call given event callback on our main top-most grid (if we're nested) */
+    protected triggerEvent(event: Event, target: GridItemHTMLElement): void;
+}

node_modules/gridstack/dist/gridstack.min.css

@@ -0,0 +1 @@
+.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;left:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}

node_modules/gridstack/dist/types.d.ts

@@ -0,0 +1,432 @@
+/**
+ * types.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { GridStack } from './gridstack';
+import { GridStackEngine } from './gridstack-engine';
+/**
+ * Default values for grid options - used during initialization and when saving out grid configuration.
+ * These values are applied when options are not explicitly provided.
+ */
+export declare const gridDefaults: GridStackOptions;
+/**
+ * Different layout options when changing the number of columns.
+ *
+ * These options control how widgets are repositioned when the grid column count changes.
+ * Note: The new list may be partially filled if there's a cached layout for that size.
+ *
+ * Options:
+ * - `'list'`: Treat items as a sorted list, keeping them sequentially without resizing (unless too big)
+ * - `'compact'`: Similar to list, but uses compact() method to fill empty slots by reordering
+ * - `'moveScale'`: Scale and move items by the ratio of newColumnCount / oldColumnCount
+ * - `'move'`: Only move items, keep their sizes
+ * - `'scale'`: Only scale items, keep their positions
+ * - `'none'`: Leave items unchanged unless they don't fit in the new column count
+ * - Custom function: Provide your own layout logic
+ */
+export type ColumnOptions = 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
+/**
+ * Options for the compact() method to reclaim empty space.
+ * - `'list'`: Keep items in order, move them up sequentially
+ * - `'compact'`: Find truly empty spaces, may reorder items for optimal fit
+ */
+export type CompactOptions = 'list' | 'compact';
+/**
+ * Type representing values that can be either numbers or strings (e.g., dimensions with units).
+ * Used for properties like width, height, margins that accept both numeric and string values.
+ */
+export type numberOrString = number | string;
+/**
+ * Extended HTMLElement interface for grid items.
+ * All grid item DOM elements implement this interface to provide access to their grid data.
+ */
+export interface GridItemHTMLElement extends HTMLElement {
+    /** Pointer to the associated grid node instance containing position, size, and other widget data */
+    gridstackNode?: GridStackNode;
+}
+/**
+ * Type representing various ways to specify grid elements.
+ * Can be a CSS selector string, GridItemHTMLElement (HTML element with GS variables when loaded).
+ */
+export type GridStackElement = string | GridItemHTMLElement;
+/**
+ * Event handler function types for the .on() method.
+ * Different handlers receive different parameters based on the event type.
+ */
+/** General event handler that receives only the event */
+export type GridStackEventHandler = (event: Event) => void;
+/** Element-specific event handler that receives event and affected element */
+export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
+/** Node-based event handler that receives event and array of affected nodes */
+export type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
+/** Drop event handler that receives previous and new node states */
+export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
+/** Union type of all possible event handler types */
+export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
+/**
+ * Optional callback function called during load() operations.
+ * Allows custom handling of widget addition/removal for framework integration.
+ *
+ * @param parent - The parent HTML element
+ * @param w - The widget definition
+ * @param add - True if adding, false if removing
+ * @param grid - True if this is a grid operation
+ * @returns The created/modified HTML element, or undefined
+ */
+export type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
+/**
+ * Optional callback function called during save() operations.
+ * Allows adding custom data to the saved widget structure.
+ *
+ * @param node - The internal grid node
+ * @param w - The widget structure being saved (can be modified)
+ */
+export type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;
+/**
+ * Optional callback function for custom widget content rendering.
+ * Called during load()/addWidget() to create custom content beyond plain text.
+ *
+ * @param el - The widget's content container element
+ * @param w - The widget definition with content and other properties
+ */
+export type RenderFcn = (el: HTMLElement, w: GridStackWidget) => void;
+/**
+ * Optional callback function for custom resize-to-content behavior.
+ * Called when a widget needs to resize to fit its content.
+ *
+ * @param el - The grid item element to resize
+ */
+export type ResizeToContentFcn = (el: GridItemHTMLElement) => void;
+/**
+ * Configuration for responsive grid behavior.
+ *
+ * Defines how the grid responds to different screen sizes by changing column counts.
+ * NOTE: Make sure to include the appropriate CSS (gridstack-extra.css) to support responsive behavior.
+ */
+export interface Responsive {
+    /** wanted width to maintain (+-50%) to dynamically pick a column count. NOTE: make sure to have correct extra CSS to support this. */
+    columnWidth?: number;
+    /** maximum number of columns allowed (default: 12). NOTE: make sure to have correct extra CSS to support this. */
+    columnMax?: number;
+    /** explicit width:column breakpoints instead of automatic 'columnWidth'. NOTE: make sure to have correct extra CSS to support this. */
+    breakpoints?: Breakpoint[];
+    /** specify if breakpoints are for window size or grid size (default:false = grid) */
+    breakpointForWindow?: boolean;
+    /** global re-layout mode when changing columns */
+    layout?: ColumnOptions;
+}
+/**
+ * Defines a responsive breakpoint for automatic column count changes.
+ * Used with the responsive.breakpoints option.
+ */
+export interface Breakpoint {
+    /** Maximum width (in pixels) for this breakpoint to be active */
+    w?: number;
+    /** Number of columns to use when this breakpoint is active */
+    c: number;
+    /** Layout mode for this specific breakpoint (overrides global responsive.layout) */
+    layout?: ColumnOptions;
+}
+/**
+ * Defines the options for a Grid
+ */
+export interface GridStackOptions {
+    /**
+     * Accept widgets dragged from other grids or from outside (default: `false`). Can be:
+     * - `true`: will accept HTML elements having 'grid-stack-item' as class attribute
+     * - `false`: will not accept any external widgets
+     * - string: explicit class name to accept instead of default
+     * - function: callback called before an item will be accepted when entering a grid
+     *
+     * @example
+     * // Accept all grid items
+     * acceptWidgets: true
+     *
+     * // Accept only items with specific class
+     * acceptWidgets: 'my-draggable-item'
+     *
+     * // Custom validation function
+     * acceptWidgets: (el) => {
+     *   return el.getAttribute('data-accept') === 'true';
+     * }
+     *
+     * @see {@link http://gridstack.github.io/gridstack.js/demo/two.html} for complete example
+     */
+    acceptWidgets?: boolean | string | ((element: Element) => boolean);
+    /** possible values (default: `mobile`) - does not apply to non-resizable widgets
+      * `false` the resizing handles are only shown while hovering over a widget
+      * `true` the resizing handles are always shown
+      * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.
+      See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */
+    alwaysShowResizeHandle?: true | false | 'mobile';
+    /** turns animation on (default?: true) */
+    animate?: boolean;
+    /** if false gridstack will not initialize existing items (default?: true) */
+    auto?: boolean;
+    /**
+     * One cell height (default: 'auto'). Can be:
+     * - an integer (px): fixed pixel height
+     * - a string (ex: '100px', '10em', '10rem'): CSS length value
+     * - 0: library will not generate styles for rows (define your own CSS)
+     * - 'auto': height calculated for square cells (width / column) and updated live on window resize
+     * - 'initial': similar to 'auto' but stays fixed size during window resizing
+     *
+     * Note: % values don't work correctly - see demo/cell-height.html
+     *
+     * @example
+     * // Fixed 100px height
+     * cellHeight: 100
+     *
+     * // CSS units
+     * cellHeight: '5rem'
+     * cellHeight: '100px'
+     *
+     * // Auto-sizing for square cells
+     * cellHeight: 'auto'
+     *
+     * // No CSS generation (custom styles)
+     * cellHeight: 0
+     */
+    cellHeight?: numberOrString;
+    /** throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100).
+     * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!
+     * */
+    cellHeightThrottle?: number;
+    /** (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') */
+    cellHeightUnit?: string;
+    /** list of children item to create when calling load() or addGrid() */
+    children?: GridStackWidget[];
+    /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns.
+     * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside
+     * items always the same. flag is NOT supported for regular non-nested grids.
+     */
+    column?: number | 'auto';
+    /** responsive column layout for width:column behavior */
+    columnOpts?: Responsive;
+    /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.
+    Note: only used by addGrid(), else your element should have the needed class */
+    class?: string;
+    /** disallows dragging of widgets (default?: false) */
+    disableDrag?: boolean;
+    /** disallows resizing of widgets (default?: false). */
+    disableResize?: boolean;
+    /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) */
+    draggable?: DDDragOpt;
+    /** let user drag nested grid items out of a parent or not (default true - not supported yet) */
+    /** the type of engine to create (so you can subclass) default to GridStackEngine */
+    engineClass?: typeof GridStackEngine;
+    /** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */
+    float?: boolean;
+    /** draggable handle selector (default?: '.grid-stack-item-content') */
+    handle?: string;
+    /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
+    handleClass?: string;
+    /** additional widget class (default?: 'grid-stack-item') */
+    itemClass?: string;
+    /** re-layout mode when we're a subgrid and we are being resized. default to 'list' */
+    layout?: ColumnOptions;
+    /** true when widgets are only created when they scroll into view (visible) */
+    lazyLoad?: boolean;
+    /**
+     * gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below
+     *  an integer (px)
+     *  a string with possible units (ex: '2em', '20px', '2rem')
+     *  string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS).
+     * Note: all sides must have same units (last one wins, default px)
+     */
+    margin?: numberOrString;
+    /** OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side. */
+    marginTop?: numberOrString;
+    marginRight?: numberOrString;
+    marginBottom?: numberOrString;
+    marginLeft?: numberOrString;
+    /** (internal) unit for margin (default? 'px') set when `margin` is set as string with unit (ex: 2rem') */
+    marginUnit?: string;
+    /** maximum rows amount. Default? is 0 which means no maximum rows */
+    maxRow?: number;
+    /** minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`.
+     * When no set the `min-height` CSS attribute on the grid div (in pixels) can be used, which will round to the closest row.
+     */
+    minRow?: number;
+    /** If you are using a nonce-based Content Security Policy, pass your nonce here and
+     * GridStack will add it to the `<style>` elements it creates. */
+    nonce?: string;
+    /** class for placeholder (default?: 'grid-stack-placeholder') */
+    placeholderClass?: string;
+    /** placeholder default content (default?: '') */
+    placeholderText?: string;
+    /** allows to override UI resizable options. default is { handles: 'se', autoHide: true on desktop, false on mobile } */
+    resizable?: DDResizeOpt;
+    /**
+     * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: ".trash"),
+     * in this case widgets will be removed by dropping them there (default?: false)
+     * See example (http://gridstack.github.io/gridstack.js/demo/two.html)
+     */
+    removable?: boolean | string;
+    /** allows to override UI removable options. (default?: { accept: '.grid-stack-item' }) */
+    removableOptions?: DDRemoveOpt;
+    /** fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) */
+    row?: number;
+    /**
+     * if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')
+     * See [example](http://gridstack.github.io/gridstack.js/demo/right-to-left(rtl).html)
+     */
+    rtl?: boolean | 'auto';
+    /** set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars.
+     * Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight())
+     */
+    sizeToContent?: boolean;
+    /**
+     * makes grid static (default?: false). If `true` widgets are not movable/resizable.
+     * You don't even need draggable/resizable. A CSS class
+     * 'grid-stack-static' is also added to the element.
+     */
+    staticGrid?: boolean;
+    /**
+     * @deprecated Not used anymore, styles are now implemented with local CSS variables
+     */
+    styleInHead?: boolean;
+    /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */
+    subGridOpts?: GridStackOptions;
+    /** enable/disable the creation of sub-grids on the fly by dragging items completely
+     * over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */
+    subGridDynamic?: boolean;
+}
+/** options used during GridStackEngine.moveNode() */
+export interface GridStackMoveOpts extends GridStackPosition {
+    /** node to skip collision */
+    skip?: GridStackNode;
+    /** do we pack (default true) */
+    pack?: boolean;
+    /** true if we are calling this recursively to prevent simple swap or coverage collision - default false*/
+    nested?: boolean;
+    /** vars to calculate other cells coordinates */
+    cellWidth?: number;
+    cellHeight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    /** position in pixels of the currently dragged items (for overlap check) */
+    rect?: GridStackPosition;
+    /** true if we're live resizing */
+    resizing?: boolean;
+    /** best node (most coverage) we collied with */
+    collide?: GridStackNode;
+    /** for collision check even if we don't move */
+    forceCollide?: boolean;
+}
+export interface GridStackPosition {
+    /** widget position x (default?: 0) */
+    x?: number;
+    /** widget position y (default?: 0) */
+    y?: number;
+    /** widget dimension width (default?: 1) */
+    w?: number;
+    /** widget dimension height (default?: 1) */
+    h?: number;
+}
+/**
+ * GridStack Widget creation options
+ */
+export interface GridStackWidget extends GridStackPosition {
+    /** if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) */
+    autoPosition?: boolean;
+    /** minimum width allowed during resize/creation (default?: undefined = un-constrained) */
+    minW?: number;
+    /** maximum width allowed during resize/creation (default?: undefined = un-constrained) */
+    maxW?: number;
+    /** minimum height allowed during resize/creation (default?: undefined = un-constrained) */
+    minH?: number;
+    /** maximum height allowed during resize/creation (default?: undefined = un-constrained) */
+    maxH?: number;
+    /** prevent direct resizing by the user (default?: undefined = un-constrained) */
+    noResize?: boolean;
+    /** prevents direct moving by the user (default?: undefined = un-constrained) */
+    noMove?: boolean;
+    /** prevents being pushed by other widgets or api (default?: undefined = un-constrained), which is different from `noMove` (user action only) */
+    locked?: boolean;
+    /** value for `gs-id` stored on the widget (default?: undefined) */
+    id?: string;
+    /** html to append inside as content */
+    content?: string;
+    /** true when widgets are only created when they scroll into view (visible) */
+    lazyLoad?: boolean;
+    /** local (vs grid) override - see GridStackOptions.
+     * Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) */
+    sizeToContent?: boolean | number;
+    /** local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height */
+    resizeToContentParent?: string;
+    /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
+    subGridOpts?: GridStackOptions;
+}
+/** Drag&Drop resize options */
+export interface DDResizeOpt {
+    /** do resize handle hide by default until mouse over. default: true on desktop, false on mobile */
+    autoHide?: boolean;
+    /**
+     * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)
+     * Note: it is not recommended to resize from the top sides as weird side effect may occur.
+    */
+    handles?: string;
+    /**
+     * Custom element or query inside the widget node that is used instead of the
+     * generated resize handle.
+     */
+    element?: string | HTMLElement;
+}
+/** Drag&Drop remove options */
+export interface DDRemoveOpt {
+    /** class that can be removed (default?: opts.itemClass) */
+    accept?: string;
+    /** class that cannot be removed (default: 'grid-stack-non-removable') */
+    decline?: string;
+}
+/** Drag&Drop dragging options */
+export interface DDDragOpt {
+    /** class selector of items that can be dragged. default to '.grid-stack-item-content' */
+    handle?: string;
+    /** default to 'body' */
+    appendTo?: string;
+    /** if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global */
+    pause?: boolean | number;
+    /** default to `true` */
+    scroll?: boolean;
+    /** prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option' */
+    cancel?: string;
+    /** helper function when dropping: 'clone' or your own method */
+    helper?: 'clone' | ((el: HTMLElement) => HTMLElement);
+    /** callbacks */
+    start?: (event: Event, ui: DDUIData) => void;
+    stop?: (event: Event) => void;
+    drag?: (event: Event, ui: DDUIData) => void;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Position {
+    top: number;
+    left: number;
+}
+export interface Rect extends Size, Position {
+}
+/** data that is passed during drag and resizing callbacks */
+export interface DDUIData {
+    position?: Position;
+    size?: Size;
+    draggable?: HTMLElement;
+}
+/**
+ * internal runtime descriptions describing the widgets in the grid
+ */
+export interface GridStackNode extends GridStackWidget {
+    /** pointer back to HTML element */
+    el?: GridItemHTMLElement;
+    /** pointer back to parent Grid instance */
+    grid?: GridStack;
+    /** actual sub-grid instance */
+    subGrid?: GridStack;
+    /** allow delay creation when visible */
+    visibleObservable?: IntersectionObserver;
+}

node_modules/gridstack/dist/types.js

@@ -0,0 +1,38 @@
+/**
+ * types.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+/**
+ * Default values for grid options - used during initialization and when saving out grid configuration.
+ * These values are applied when options are not explicitly provided.
+ */
+export const gridDefaults = {
+    alwaysShowResizeHandle: 'mobile',
+    animate: true,
+    auto: true,
+    cellHeight: 'auto',
+    cellHeightThrottle: 100,
+    cellHeightUnit: 'px',
+    column: 12,
+    draggable: { handle: '.grid-stack-item-content', appendTo: 'body', scroll: true },
+    handle: '.grid-stack-item-content',
+    itemClass: 'grid-stack-item',
+    margin: 10,
+    marginUnit: 'px',
+    maxRow: 0,
+    minRow: 0,
+    placeholderClass: 'grid-stack-placeholder',
+    placeholderText: '',
+    removableOptions: { accept: 'grid-stack-item', decline: 'grid-stack-non-removable' },
+    resizable: { handles: 'se' },
+    rtl: 'auto',
+    // **** same as not being set ****
+    // disableDrag: false,
+    // disableResize: false,
+    // float: false,
+    // handleClass: null,
+    // removable: false,
+    // staticGrid: false,
+    //removable
+};
+//# sourceMappingURL=types.js.map

node_modules/gridstack/dist/utils.d.ts

@@ -0,0 +1,283 @@
+/**
+ * utils.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+import { GridStackElement, GridStackNode, numberOrString, GridStackPosition, GridStackWidget } from './types';
+export interface HeightData {
+    h: number;
+    unit: string;
+}
+export interface DragTransform {
+    xScale: number;
+    yScale: number;
+    xOffset: number;
+    yOffset: number;
+}
+/**
+ * Collection of utility methods used throughout GridStack.
+ * These are general-purpose helper functions for DOM manipulation,
+ * positioning calculations, object operations, and more.
+ */
+export declare class Utils {
+    /**
+     * Convert a potential selector into an actual list of HTML elements.
+     * Supports CSS selectors, element references, and special ID handling.
+     *
+     * @param els selector string, HTMLElement, or array of elements
+     * @param root optional root element to search within (defaults to document, useful for shadow DOM)
+     * @returns array of HTML elements matching the selector
+     *
+     * @example
+     * const elements = Utils.getElements('.grid-item');
+     * const byId = Utils.getElements('#myWidget');
+     * const fromShadow = Utils.getElements('.item', shadowRoot);
+     */
+    static getElements(els: GridStackElement, root?: HTMLElement | Document): HTMLElement[];
+    /**
+     * Convert a potential selector into a single HTML element.
+     * Similar to getElements() but returns only the first match.
+     *
+     * @param els selector string or HTMLElement
+     * @param root optional root element to search within (defaults to document)
+     * @returns the first HTML element matching the selector, or null if not found
+     *
+     * @example
+     * const element = Utils.getElement('#myWidget');
+     * const first = Utils.getElement('.grid-item');
+     */
+    static getElement(els: GridStackElement, root?: HTMLElement | Document): HTMLElement;
+    /**
+     * Check if a widget should be lazy loaded based on node or grid settings.
+     *
+     * @param n the grid node to check
+     * @returns true if the item should be lazy loaded
+     *
+     * @example
+     * if (Utils.lazyLoad(node)) {
+     *   // Set up intersection observer for lazy loading
+     * }
+     */
+    static lazyLoad(n: GridStackNode): boolean;
+    /**
+     * Create a div element with the specified CSS classes.
+     *
+     * @param classes array of CSS class names to add
+     * @param parent optional parent element to append the div to
+     * @returns the created div element
+     *
+     * @example
+     * const div = Utils.createDiv(['grid-item', 'draggable']);
+     * const nested = Utils.createDiv(['content'], parentDiv);
+     */
+    static createDiv(classes: string[], parent?: HTMLElement): HTMLElement;
+    /**
+     * Check if a widget should resize to fit its content.
+     *
+     * @param n the grid node to check (can be undefined)
+     * @param strict if true, only returns true for explicit sizeToContent:true (not numbers)
+     * @returns true if the widget should resize to content
+     *
+     * @example
+     * if (Utils.shouldSizeToContent(node)) {
+     *   // Trigger content-based resizing
+     * }
+     */
+    static shouldSizeToContent(n: GridStackNode | undefined, strict?: boolean): boolean;
+    /**
+     * Check if two grid positions overlap/intersect.
+     *
+     * @param a first position with x, y, w, h properties
+     * @param b second position with x, y, w, h properties
+     * @returns true if the positions overlap
+     *
+     * @example
+     * const overlaps = Utils.isIntercepted(
+     *   {x: 0, y: 0, w: 2, h: 1},
+     *   {x: 1, y: 0, w: 2, h: 1}
+     * ); // true - they overlap
+     */
+    static isIntercepted(a: GridStackPosition, b: GridStackPosition): boolean;
+    /**
+     * Check if two grid positions are touching (edges or corners).
+     *
+     * @param a first position
+     * @param b second position
+     * @returns true if the positions are touching
+     *
+     * @example
+     * const touching = Utils.isTouching(
+     *   {x: 0, y: 0, w: 2, h: 1},
+     *   {x: 2, y: 0, w: 1, h: 1}
+     * ); // true - they share an edge
+     */
+    static isTouching(a: GridStackPosition, b: GridStackPosition): boolean;
+    /**
+     * Calculate the overlapping area between two grid positions.
+     *
+     * @param a first position
+     * @param b second position
+     * @returns the area of overlap (0 if no overlap)
+     *
+     * @example
+     * const overlap = Utils.areaIntercept(
+     *   {x: 0, y: 0, w: 3, h: 2},
+     *   {x: 1, y: 0, w: 3, h: 2}
+     * ); // returns 4 (2x2 overlap)
+     */
+    static areaIntercept(a: GridStackPosition, b: GridStackPosition): number;
+    /**
+     * Calculate the total area of a grid position.
+     *
+     * @param a position with width and height
+     * @returns the total area (width * height)
+     *
+     * @example
+     * const area = Utils.area({x: 0, y: 0, w: 3, h: 2}); // returns 6
+     */
+    static area(a: GridStackPosition): number;
+    /**
+     * Sort an array of grid nodes by position (y first, then x).
+     *
+     * @param nodes array of nodes to sort
+     * @param dir sort direction: 1 for ascending (top-left first), -1 for descending
+     * @returns the sorted array (modifies original)
+     *
+     * @example
+     * const sorted = Utils.sort(nodes); // Sort top-left to bottom-right
+     * const reverse = Utils.sort(nodes, -1); // Sort bottom-right to top-left
+     */
+    static sort(nodes: GridStackNode[], dir?: 1 | -1): GridStackNode[];
+    /**
+     * Find a grid node by its ID.
+     *
+     * @param nodes array of nodes to search
+     * @param id the ID to search for
+     * @returns the node with matching ID, or undefined if not found
+     *
+     * @example
+     * const node = Utils.find(nodes, 'widget-1');
+     * if (node) console.log('Found node at:', node.x, node.y);
+     */
+    static find(nodes: GridStackNode[], id: string): GridStackNode | undefined;
+    /**
+     * Convert various value types to boolean.
+     * Handles strings like 'false', 'no', '0' as false.
+     *
+     * @param v value to convert
+     * @returns boolean representation
+     *
+     * @example
+     * Utils.toBool('true');  // true
+     * Utils.toBool('false'); // false
+     * Utils.toBool('no');    // false
+     * Utils.toBool('1');     // true
+     */
+    static toBool(v: unknown): boolean;
+    /**
+     * Convert a string value to a number, handling null and empty strings.
+     *
+     * @param value string or null value to convert
+     * @returns number value, or undefined for null/empty strings
+     *
+     * @example
+     * Utils.toNumber('42');  // 42
+     * Utils.toNumber('');    // undefined
+     * Utils.toNumber(null);  // undefined
+     */
+    static toNumber(value: null | string): number;
+    /**
+     * Parse a height value with units into numeric value and unit string.
+     * Supports px, em, rem, vh, vw, %, cm, mm units.
+     *
+     * @param val height value as number or string with units
+     * @returns object with h (height) and unit properties
+     *
+     * @example
+     * Utils.parseHeight('100px');  // {h: 100, unit: 'px'}
+     * Utils.parseHeight('2rem');   // {h: 2, unit: 'rem'}
+     * Utils.parseHeight(50);       // {h: 50, unit: 'px'}
+     */
+    static parseHeight(val: numberOrString): HeightData;
+    /**
+     * Copy unset fields from source objects to target object (shallow merge with defaults).
+     * Similar to Object.assign but only sets undefined/null fields.
+     *
+     * @param target the object to copy defaults into
+     * @param sources one or more source objects to copy defaults from
+     * @returns the modified target object
+     *
+     * @example
+     * const config = { width: 100 };
+     * Utils.defaults(config, { width: 200, height: 50 });
+     * // config is now { width: 100, height: 50 }
+     */
+    static defaults(target: any, ...sources: any[]): {};
+    /**
+     * Compare two objects for equality (shallow comparison).
+     * Checks if objects have the same fields and values at one level deep.
+     *
+     * @param a first object to compare
+     * @param b second object to compare
+     * @returns true if objects have the same values
+     *
+     * @example
+     * Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true
+     * Utils.same({x: 1}, {x: 1, y: 2}); // false
+     */
+    static same(a: unknown, b: unknown): boolean;
+    /**
+     * Copy position and size properties from one widget to another.
+     * Copies x, y, w, h and optionally min/max constraints.
+     *
+     * @param a target widget to copy to
+     * @param b source widget to copy from
+     * @param doMinMax if true, also copy min/max width/height constraints
+     * @returns the target widget (a)
+     *
+     * @example
+     * Utils.copyPos(widget1, widget2); // Copy position/size
+     * Utils.copyPos(widget1, widget2, true); // Also copy constraints
+     */
+    static copyPos(a: GridStackWidget, b: GridStackWidget, doMinMax?: boolean): GridStackWidget;
+    /** true if a and b has same size & position */
+    static samePos(a: GridStackPosition, b: GridStackPosition): boolean;
+    /** given a node, makes sure it's min/max are valid */
+    static sanitizeMinMax(node: GridStackNode): void;
+    /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+    static removeInternalAndSame(a: unknown, b: unknown): void;
+    /** removes internal fields '_' and default values for saving */
+    static removeInternalForSave(n: GridStackNode, removeEl?: boolean): void;
+    /** return the closest parent (or itself) matching the given class */
+    /** delay calling the given function for given delay, preventing new calls from happening while waiting */
+    static throttle(func: () => void, delay: number): () => void;
+    static removePositioningStyles(el: HTMLElement): void;
+    /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
+    static clone<T>(obj: T): T;
+    /**
+     * Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+     * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
+     */
+    static cloneDeep<T>(obj: T): T;
+    /** deep clone the given HTML node, removing teh unique id field */
+    static cloneNode(el: HTMLElement): HTMLElement;
+    static appendTo(el: HTMLElement, parent: string | HTMLElement): void;
+    static addElStyles(el: HTMLElement, styles: {
+        [prop: string]: string | string[];
+    }): void;
+    static initEvent<T>(e: DragEvent | MouseEvent, info: {
+        type: string;
+        target?: EventTarget;
+    }): T;
+    /** copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target */
+    static simulateMouseEvent(e: MouseEvent | Touch, simulatedType: string, target?: EventTarget): void;
+    /**
+     * defines an element that is used to get the offset and scale from grid transforms
+     * returns the scale and offsets from said element
+    */
+    static getValuesFromTransformedElement(parent: HTMLElement): DragTransform;
+    /** swap the given object 2 field values */
+    static swap(o: unknown, a: string, b: string): void;
+    /** returns true if event is inside the given element rectangle */
+    /** true if the item can be rotated (checking for prop, not space available) */
+    static canBeRotated(n: GridStackNode): boolean;
+}

node_modules/gridstack/dist/utils.js

@@ -0,0 +1,796 @@
+/**
+ * utils.ts 12.4.2
+ * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
+ */
+// /**
+//  * Checks for obsolete method names and provides deprecation warnings.
+//  * Creates a wrapper function that logs a deprecation warning when called.
+//  *
+//  * @param self the object context to apply the function to
+//  * @param f the new function to call
+//  * @param oldName the deprecated method name
+//  * @param newName the new method name to use instead
+//  * @param rev the version when the deprecation was introduced
+//  * @returns a wrapper function that warns about deprecation
+//  */
+// eslint-disable-next-line
+// export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
+//   const wrapper = (...args) => {
+//     console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
+//     'with `' + newName + '`. It will be **removed** in a future release');
+//     return f.apply(self, args);
+//   }
+//   wrapper.prototype = f.prototype;
+//   return wrapper;
+// }
+// /**
+//  * Checks for obsolete grid options and migrates them to new names.
+//  * Automatically copies old option values to new option names and shows deprecation warnings.
+//  *
+//  * @param opts the options object to check and migrate
+//  * @param oldName the deprecated option name
+//  * @param newName the new option name to use instead
+//  * @param rev the version when the deprecation was introduced
+//  */
+// export function obsoleteOpts(opts: GridStackOptions, oldName: string, newName: string, rev: string): void {
+//   if (opts[oldName] !== undefined) {
+//     opts[newName] = opts[oldName];
+//     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
+//       newName + '`. It will be **removed** in a future release');
+//   }
+// }
+// /**
+//  * Checks for obsolete grid options that have been completely removed.
+//  * Shows deprecation warnings for options that are no longer supported.
+//  *
+//  * @param opts the options object to check
+//  * @param oldName the removed option name
+//  * @param rev the version when the option was removed
+//  * @param info additional information about the removal
+//  */
+// export function obsoleteOptsDel(opts: GridStackOptions, oldName: string, rev: string, info: string): void {
+//   if (opts[oldName] !== undefined) {
+//     console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
+//   }
+// }
+// /**
+//  * Checks for obsolete HTML element attributes and migrates them.
+//  * Automatically copies old attribute values to new attribute names and shows deprecation warnings.
+//  *
+//  * @param el the HTML element to check and migrate
+//  * @param oldName the deprecated attribute name
+//  * @param newName the new attribute name to use instead
+//  * @param rev the version when the deprecation was introduced
+//  */
+// export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string): void {
+//   const oldAttr = el.getAttribute(oldName);
+//   if (oldAttr !== null) {
+//     el.setAttribute(newName, oldAttr);
+//     console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
+//       newName + '`. It will be **removed** in a future release');
+//   }
+// }
+/**
+ * Collection of utility methods used throughout GridStack.
+ * These are general-purpose helper functions for DOM manipulation,
+ * positioning calculations, object operations, and more.
+ */
+export class Utils {
+    /**
+     * Convert a potential selector into an actual list of HTML elements.
+     * Supports CSS selectors, element references, and special ID handling.
+     *
+     * @param els selector string, HTMLElement, or array of elements
+     * @param root optional root element to search within (defaults to document, useful for shadow DOM)
+     * @returns array of HTML elements matching the selector
+     *
+     * @example
+     * const elements = Utils.getElements('.grid-item');
+     * const byId = Utils.getElements('#myWidget');
+     * const fromShadow = Utils.getElements('.item', shadowRoot);
+     */
+    static getElements(els, root = document) {
+        if (typeof els === 'string') {
+            const doc = ('getElementById' in root) ? root : undefined;
+            // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
+            // so if we start with a number, assume it's an id and just return that one item...
+            // see https://github.com/gridstack/gridstack.js/issues/2234#issuecomment-1523796562
+            if (doc && !isNaN(+els[0])) { // start with digit
+                const el = doc.getElementById(els);
+                return el ? [el] : [];
+            }
+            let list = root.querySelectorAll(els);
+            if (!list.length && els[0] !== '.' && els[0] !== '#') {
+                // see if mean to be a class
+                list = root.querySelectorAll('.' + els);
+                // else if mean to be an id
+                if (!list.length)
+                    list = root.querySelectorAll('#' + els);
+                // else see if gs-id attribute
+                if (!list.length) {
+                    const el = root.querySelector(`[gs-id="${els}"]`);
+                    return el ? [el] : [];
+                }
+            }
+            return Array.from(list);
+        }
+        return [els];
+    }
+    /**
+     * Convert a potential selector into a single HTML element.
+     * Similar to getElements() but returns only the first match.
+     *
+     * @param els selector string or HTMLElement
+     * @param root optional root element to search within (defaults to document)
+     * @returns the first HTML element matching the selector, or null if not found
+     *
+     * @example
+     * const element = Utils.getElement('#myWidget');
+     * const first = Utils.getElement('.grid-item');
+     */
+    static getElement(els, root = document) {
+        if (typeof els === 'string') {
+            const doc = ('getElementById' in root) ? root : undefined;
+            if (!els.length)
+                return null;
+            if (doc && els[0] === '#') {
+                return doc.getElementById(els.substring(1));
+            }
+            if (els[0] === '#' || els[0] === '.' || els[0] === '[') {
+                return root.querySelector(els);
+            }
+            // if we start with a digit, assume it's an id (error calling querySelector('#1')) as class are not valid CSS
+            if (doc && !isNaN(+els[0])) { // start with digit
+                return doc.getElementById(els);
+            }
+            // finally try string, then id, then class
+            let el = root.querySelector(els);
+            if (doc && !el) {
+                el = doc.getElementById(els);
+            }
+            if (!el) {
+                el = root.querySelector('.' + els);
+            }
+            return el;
+        }
+        return els;
+    }
+    /**
+     * Check if a widget should be lazy loaded based on node or grid settings.
+     *
+     * @param n the grid node to check
+     * @returns true if the item should be lazy loaded
+     *
+     * @example
+     * if (Utils.lazyLoad(node)) {
+     *   // Set up intersection observer for lazy loading
+     * }
+     */
+    static lazyLoad(n) {
+        return n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
+    }
+    /**
+     * Create a div element with the specified CSS classes.
+     *
+     * @param classes array of CSS class names to add
+     * @param parent optional parent element to append the div to
+     * @returns the created div element
+     *
+     * @example
+     * const div = Utils.createDiv(['grid-item', 'draggable']);
+     * const nested = Utils.createDiv(['content'], parentDiv);
+     */
+    static createDiv(classes, parent) {
+        const el = document.createElement('div');
+        classes.forEach(c => { if (c)
+            el.classList.add(c); });
+        parent?.appendChild(el);
+        return el;
+    }
+    /**
+     * Check if a widget should resize to fit its content.
+     *
+     * @param n the grid node to check (can be undefined)
+     * @param strict if true, only returns true for explicit sizeToContent:true (not numbers)
+     * @returns true if the widget should resize to content
+     *
+     * @example
+     * if (Utils.shouldSizeToContent(node)) {
+     *   // Trigger content-based resizing
+     * }
+     */
+    static shouldSizeToContent(n, strict = false) {
+        return n?.grid && (strict ?
+            (n.sizeToContent === true || (n.grid.opts.sizeToContent === true && n.sizeToContent === undefined)) :
+            (!!n.sizeToContent || (n.grid.opts.sizeToContent && n.sizeToContent !== false)));
+    }
+    /**
+     * Check if two grid positions overlap/intersect.
+     *
+     * @param a first position with x, y, w, h properties
+     * @param b second position with x, y, w, h properties
+     * @returns true if the positions overlap
+     *
+     * @example
+     * const overlaps = Utils.isIntercepted(
+     *   {x: 0, y: 0, w: 2, h: 1},
+     *   {x: 1, y: 0, w: 2, h: 1}
+     * ); // true - they overlap
+     */
+    static isIntercepted(a, b) {
+        return !(a.y >= b.y + b.h || a.y + a.h <= b.y || a.x + a.w <= b.x || a.x >= b.x + b.w);
+    }
+    /**
+     * Check if two grid positions are touching (edges or corners).
+     *
+     * @param a first position
+     * @param b second position
+     * @returns true if the positions are touching
+     *
+     * @example
+     * const touching = Utils.isTouching(
+     *   {x: 0, y: 0, w: 2, h: 1},
+     *   {x: 2, y: 0, w: 1, h: 1}
+     * ); // true - they share an edge
+     */
+    static isTouching(a, b) {
+        return Utils.isIntercepted(a, { x: b.x - 0.5, y: b.y - 0.5, w: b.w + 1, h: b.h + 1 });
+    }
+    /**
+     * Calculate the overlapping area between two grid positions.
+     *
+     * @param a first position
+     * @param b second position
+     * @returns the area of overlap (0 if no overlap)
+     *
+     * @example
+     * const overlap = Utils.areaIntercept(
+     *   {x: 0, y: 0, w: 3, h: 2},
+     *   {x: 1, y: 0, w: 3, h: 2}
+     * ); // returns 4 (2x2 overlap)
+     */
+    static areaIntercept(a, b) {
+        const x0 = (a.x > b.x) ? a.x : b.x;
+        const x1 = (a.x + a.w < b.x + b.w) ? a.x + a.w : b.x + b.w;
+        if (x1 <= x0)
+            return 0; // no overlap
+        const y0 = (a.y > b.y) ? a.y : b.y;
+        const y1 = (a.y + a.h < b.y + b.h) ? a.y + a.h : b.y + b.h;
+        if (y1 <= y0)
+            return 0; // no overlap
+        return (x1 - x0) * (y1 - y0);
+    }
+    /**
+     * Calculate the total area of a grid position.
+     *
+     * @param a position with width and height
+     * @returns the total area (width * height)
+     *
+     * @example
+     * const area = Utils.area({x: 0, y: 0, w: 3, h: 2}); // returns 6
+     */
+    static area(a) {
+        return a.w * a.h;
+    }
+    /**
+     * Sort an array of grid nodes by position (y first, then x).
+     *
+     * @param nodes array of nodes to sort
+     * @param dir sort direction: 1 for ascending (top-left first), -1 for descending
+     * @returns the sorted array (modifies original)
+     *
+     * @example
+     * const sorted = Utils.sort(nodes); // Sort top-left to bottom-right
+     * const reverse = Utils.sort(nodes, -1); // Sort bottom-right to top-left
+     */
+    static sort(nodes, dir = 1) {
+        const und = 10000;
+        return nodes.sort((a, b) => {
+            const diffY = dir * ((a.y ?? und) - (b.y ?? und));
+            if (diffY === 0)
+                return dir * ((a.x ?? und) - (b.x ?? und));
+            return diffY;
+        });
+    }
+    /**
+     * Find a grid node by its ID.
+     *
+     * @param nodes array of nodes to search
+     * @param id the ID to search for
+     * @returns the node with matching ID, or undefined if not found
+     *
+     * @example
+     * const node = Utils.find(nodes, 'widget-1');
+     * if (node) console.log('Found node at:', node.x, node.y);
+     */
+    static find(nodes, id) {
+        return id ? nodes.find(n => n.id === id) : undefined;
+    }
+    /**
+     * Convert various value types to boolean.
+     * Handles strings like 'false', 'no', '0' as false.
+     *
+     * @param v value to convert
+     * @returns boolean representation
+     *
+     * @example
+     * Utils.toBool('true');  // true
+     * Utils.toBool('false'); // false
+     * Utils.toBool('no');    // false
+     * Utils.toBool('1');     // true
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static toBool(v) {
+        if (typeof v === 'boolean') {
+            return v;
+        }
+        if (typeof v === 'string') {
+            v = v.toLowerCase();
+            return !(v === '' || v === 'no' || v === 'false' || v === '0');
+        }
+        return Boolean(v);
+    }
+    /**
+     * Convert a string value to a number, handling null and empty strings.
+     *
+     * @param value string or null value to convert
+     * @returns number value, or undefined for null/empty strings
+     *
+     * @example
+     * Utils.toNumber('42');  // 42
+     * Utils.toNumber('');    // undefined
+     * Utils.toNumber(null);  // undefined
+     */
+    static toNumber(value) {
+        return (value === null || value.length === 0) ? undefined : Number(value);
+    }
+    /**
+     * Parse a height value with units into numeric value and unit string.
+     * Supports px, em, rem, vh, vw, %, cm, mm units.
+     *
+     * @param val height value as number or string with units
+     * @returns object with h (height) and unit properties
+     *
+     * @example
+     * Utils.parseHeight('100px');  // {h: 100, unit: 'px'}
+     * Utils.parseHeight('2rem');   // {h: 2, unit: 'rem'}
+     * Utils.parseHeight(50);       // {h: 50, unit: 'px'}
+     */
+    static parseHeight(val) {
+        let h;
+        let unit = 'px';
+        if (typeof val === 'string') {
+            if (val === 'auto' || val === '')
+                h = 0;
+            else {
+                const match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/);
+                if (!match) {
+                    throw new Error(`Invalid height val = ${val}`);
+                }
+                unit = match[2] || 'px';
+                h = parseFloat(match[1]);
+            }
+        }
+        else {
+            h = val;
+        }
+        return { h, unit };
+    }
+    /**
+     * Copy unset fields from source objects to target object (shallow merge with defaults).
+     * Similar to Object.assign but only sets undefined/null fields.
+     *
+     * @param target the object to copy defaults into
+     * @param sources one or more source objects to copy defaults from
+     * @returns the modified target object
+     *
+     * @example
+     * const config = { width: 100 };
+     * Utils.defaults(config, { width: 200, height: 50 });
+     * // config is now { width: 100, height: 50 }
+     */
+    // eslint-disable-next-line
+    static defaults(target, ...sources) {
+        sources.forEach(source => {
+            for (const key in source) {
+                if (!source.hasOwnProperty(key))
+                    return;
+                if (target[key] === null || target[key] === undefined) {
+                    target[key] = source[key];
+                }
+                else if (typeof source[key] === 'object' && typeof target[key] === 'object') {
+                    // property is an object, recursively add it's field over... #1373
+                    Utils.defaults(target[key], source[key]);
+                }
+            }
+        });
+        return target;
+    }
+    /**
+     * Compare two objects for equality (shallow comparison).
+     * Checks if objects have the same fields and values at one level deep.
+     *
+     * @param a first object to compare
+     * @param b second object to compare
+     * @returns true if objects have the same values
+     *
+     * @example
+     * Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true
+     * Utils.same({x: 1}, {x: 1, y: 2}); // false
+     */
+    static same(a, b) {
+        if (typeof a !== 'object')
+            return a == b;
+        if (typeof a !== typeof b)
+            return false;
+        // else we have object, check just 1 level deep for being same things...
+        if (Object.keys(a).length !== Object.keys(b).length)
+            return false;
+        for (const key in a) {
+            if (a[key] !== b[key])
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Copy position and size properties from one widget to another.
+     * Copies x, y, w, h and optionally min/max constraints.
+     *
+     * @param a target widget to copy to
+     * @param b source widget to copy from
+     * @param doMinMax if true, also copy min/max width/height constraints
+     * @returns the target widget (a)
+     *
+     * @example
+     * Utils.copyPos(widget1, widget2); // Copy position/size
+     * Utils.copyPos(widget1, widget2, true); // Also copy constraints
+     */
+    static copyPos(a, b, doMinMax = false) {
+        if (b.x !== undefined)
+            a.x = b.x;
+        if (b.y !== undefined)
+            a.y = b.y;
+        if (b.w !== undefined)
+            a.w = b.w;
+        if (b.h !== undefined)
+            a.h = b.h;
+        if (doMinMax) {
+            if (b.minW)
+                a.minW = b.minW;
+            if (b.minH)
+                a.minH = b.minH;
+            if (b.maxW)
+                a.maxW = b.maxW;
+            if (b.maxH)
+                a.maxH = b.maxH;
+        }
+        return a;
+    }
+    /** true if a and b has same size & position */
+    static samePos(a, b) {
+        return a && b && a.x === b.x && a.y === b.y && (a.w || 1) === (b.w || 1) && (a.h || 1) === (b.h || 1);
+    }
+    /** given a node, makes sure it's min/max are valid */
+    static sanitizeMinMax(node) {
+        // remove 0, undefine, null
+        if (!node.minW) {
+            delete node.minW;
+        }
+        if (!node.minH) {
+            delete node.minH;
+        }
+        if (!node.maxW) {
+            delete node.maxW;
+        }
+        if (!node.maxH) {
+            delete node.maxH;
+        }
+    }
+    /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+    static removeInternalAndSame(a, b) {
+        if (typeof a !== 'object' || typeof b !== 'object')
+            return;
+        // skip arrays as we don't know how to hydrate them (unlike object spread operator)
+        if (Array.isArray(a) || Array.isArray(b))
+            return;
+        for (let key in a) {
+            const aVal = a[key];
+            const bVal = b[key];
+            if (key[0] === '_' || aVal === bVal) {
+                delete a[key];
+            }
+            else if (aVal && typeof aVal === 'object' && bVal !== undefined) {
+                Utils.removeInternalAndSame(aVal, bVal);
+                if (!Object.keys(aVal).length) {
+                    delete a[key];
+                }
+            }
+        }
+    }
+    /** removes internal fields '_' and default values for saving */
+    static removeInternalForSave(n, removeEl = true) {
+        for (let key in n) {
+            if (key[0] === '_' || n[key] === null || n[key] === undefined)
+                delete n[key];
+        }
+        delete n.grid;
+        if (removeEl)
+            delete n.el;
+        // delete default values (will be re-created on read)
+        if (!n.autoPosition)
+            delete n.autoPosition;
+        if (!n.noResize)
+            delete n.noResize;
+        if (!n.noMove)
+            delete n.noMove;
+        if (!n.locked)
+            delete n.locked;
+        if (n.w === 1 || n.w === n.minW)
+            delete n.w;
+        if (n.h === 1 || n.h === n.minH)
+            delete n.h;
+    }
+    /** return the closest parent (or itself) matching the given class */
+    // static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
+    //   while (el) {
+    //     if (el.classList.contains(name)) return el;
+    //     el = el.parentElement
+    //   }
+    //   return null;
+    // }
+    /** delay calling the given function for given delay, preventing new calls from happening while waiting */
+    static throttle(func, delay) {
+        let isWaiting = false;
+        return (...args) => {
+            if (!isWaiting) {
+                isWaiting = true;
+                setTimeout(() => { func(...args); isWaiting = false; }, delay);
+            }
+        };
+    }
+    static removePositioningStyles(el) {
+        const style = el.style;
+        if (style.position) {
+            style.removeProperty('position');
+        }
+        if (style.left) {
+            style.removeProperty('left');
+        }
+        if (style.top) {
+            style.removeProperty('top');
+        }
+        if (style.width) {
+            style.removeProperty('width');
+        }
+        if (style.height) {
+            style.removeProperty('height');
+        }
+    }
+    /** @internal returns the passed element if scrollable, else the closest parent that will, up to the entire document scrolling element */
+    static getScrollElement(el) {
+        if (!el)
+            return document.scrollingElement || document.documentElement; // IE support
+        const style = getComputedStyle(el);
+        const overflowRegex = /(auto|scroll)/;
+        if (overflowRegex.test(style.overflow + style.overflowY)) {
+            return el;
+        }
+        else {
+            return Utils.getScrollElement(el.parentElement);
+        }
+    }
+    /** @internal */
+    static updateScrollPosition(el, position, distance) {
+        const scrollEl = Utils.getScrollElement(el);
+        if (!scrollEl)
+            return;
+        const elRect = el.getBoundingClientRect();
+        const scrollRect = scrollEl.getBoundingClientRect();
+        const innerHeightOrClientHeight = (window.innerHeight || document.documentElement.clientHeight);
+        const offsetDiffDown = elRect.bottom - Math.min(scrollRect.bottom, innerHeightOrClientHeight);
+        const offsetDiffUp = elRect.top - Math.max(scrollRect.top, 0);
+        const prevScroll = scrollEl.scrollTop;
+        if (offsetDiffUp < 0 && distance < 0) {
+            // scroll up
+            if (el.offsetHeight > scrollRect.height) {
+                scrollEl.scrollTop += distance;
+            }
+            else {
+                scrollEl.scrollTop += Math.abs(offsetDiffUp) > Math.abs(distance) ? distance : offsetDiffUp;
+            }
+        }
+        else if (offsetDiffDown > 0 && distance > 0) {
+            // scroll down
+            if (el.offsetHeight > scrollRect.height) {
+                scrollEl.scrollTop += distance;
+            }
+            else {
+                scrollEl.scrollTop += offsetDiffDown > distance ? distance : offsetDiffDown;
+            }
+        }
+        position.top += scrollEl.scrollTop - prevScroll;
+    }
+    /**
+     * @internal Function used to scroll the page.
+     *
+     * @param event `MouseEvent` that triggers the resize
+     * @param el `HTMLElement` that's being resized
+     * @param distance Distance from the V edges to start scrolling
+     */
+    static updateScrollResize(event, el, distance) {
+        const scrollEl = Utils.getScrollElement(el);
+        const height = scrollEl.clientHeight;
+        // #1727 event.clientY is relative to viewport, so must compare this against position of scrollEl getBoundingClientRect().top
+        // #1745 Special situation if scrollEl is document 'html': here browser spec states that
+        // clientHeight is height of viewport, but getBoundingClientRect() is rectangle of html element;
+        // this discrepancy arises because in reality scrollbar is attached to viewport, not html element itself.
+        const offsetTop = (scrollEl === Utils.getScrollElement()) ? 0 : scrollEl.getBoundingClientRect().top;
+        const pointerPosY = event.clientY - offsetTop;
+        const top = pointerPosY < distance;
+        const bottom = pointerPosY > height - distance;
+        if (top) {
+            // This also can be done with a timeout to keep scrolling while the mouse is
+            // in the scrolling zone. (will have smoother behavior)
+            scrollEl.scrollBy({ behavior: 'smooth', top: pointerPosY - distance });
+        }
+        else if (bottom) {
+            scrollEl.scrollBy({ behavior: 'smooth', top: distance - (height - pointerPosY) });
+        }
+    }
+    /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
+    static clone(obj) {
+        if (obj === null || obj === undefined || typeof (obj) !== 'object') {
+            return obj;
+        }
+        // return Object.assign({}, obj);
+        if (obj instanceof Array) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return [...obj];
+        }
+        return { ...obj };
+    }
+    /**
+     * Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+     * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
+     */
+    static cloneDeep(obj) {
+        // list of fields we will skip during cloneDeep (nested objects, other internal)
+        const skipFields = ['parentGrid', 'el', 'grid', 'subGrid', 'engine'];
+        // return JSON.parse(JSON.stringify(obj)); // doesn't work with date format ?
+        const ret = Utils.clone(obj);
+        for (const key in ret) {
+            // NOTE: we don't support function/circular dependencies so skip those properties for now...
+            if (ret.hasOwnProperty(key) && typeof (ret[key]) === 'object' && key.substring(0, 2) !== '__' && !skipFields.find(k => k === key)) {
+                ret[key] = Utils.cloneDeep(obj[key]);
+            }
+        }
+        return ret;
+    }
+    /** deep clone the given HTML node, removing teh unique id field */
+    static cloneNode(el) {
+        const node = el.cloneNode(true);
+        node.removeAttribute('id');
+        return node;
+    }
+    static appendTo(el, parent) {
+        let parentNode;
+        if (typeof parent === 'string') {
+            parentNode = Utils.getElement(parent);
+        }
+        else {
+            parentNode = parent;
+        }
+        if (parentNode) {
+            parentNode.appendChild(el);
+        }
+    }
+    // public static setPositionRelative(el: HTMLElement): void {
+    //   if (!(/^(?:r|a|f)/).test(getComputedStyle(el).position)) {
+    //     el.style.position = "relative";
+    //   }
+    // }
+    static addElStyles(el, styles) {
+        if (styles instanceof Object) {
+            for (const s in styles) {
+                if (styles.hasOwnProperty(s)) {
+                    if (Array.isArray(styles[s])) {
+                        // support fallback value
+                        styles[s].forEach(val => {
+                            el.style[s] = val;
+                        });
+                    }
+                    else {
+                        el.style[s] = styles[s];
+                    }
+                }
+            }
+        }
+    }
+    static initEvent(e, info) {
+        const evt = { type: info.type };
+        const obj = {
+            button: 0,
+            which: 0,
+            buttons: 1,
+            bubbles: true,
+            cancelable: true,
+            target: info.target ? info.target : e.target
+        };
+        ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].forEach(p => evt[p] = e[p]); // keys
+        ['pageX', 'pageY', 'clientX', 'clientY', 'screenX', 'screenY'].forEach(p => evt[p] = e[p]); // point info
+        return { ...evt, ...obj };
+    }
+    /** copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target */
+    static simulateMouseEvent(e, simulatedType, target) {
+        const me = e;
+        const simulatedEvent = new MouseEvent(simulatedType, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            view: window,
+            detail: 1,
+            screenX: e.screenX,
+            screenY: e.screenY,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            ctrlKey: me.ctrlKey ?? false,
+            altKey: me.altKey ?? false,
+            shiftKey: me.shiftKey ?? false,
+            metaKey: me.metaKey ?? false,
+            button: 0,
+            relatedTarget: e.target
+        });
+        (target || e.target).dispatchEvent(simulatedEvent);
+    }
+    /**
+     * defines an element that is used to get the offset and scale from grid transforms
+     * returns the scale and offsets from said element
+    */
+    static getValuesFromTransformedElement(parent) {
+        const transformReference = document.createElement('div');
+        Utils.addElStyles(transformReference, {
+            opacity: '0',
+            position: 'fixed',
+            top: 0 + 'px',
+            left: 0 + 'px',
+            width: '1px',
+            height: '1px',
+            zIndex: '-999999',
+        });
+        parent.appendChild(transformReference);
+        const transformValues = transformReference.getBoundingClientRect();
+        parent.removeChild(transformReference);
+        transformReference.remove();
+        return {
+            xScale: 1 / transformValues.width,
+            yScale: 1 / transformValues.height,
+            xOffset: transformValues.left,
+            yOffset: transformValues.top,
+        };
+    }
+    /** swap the given object 2 field values */
+    static swap(o, a, b) {
+        if (!o)
+            return;
+        const tmp = o[a];
+        o[a] = o[b];
+        o[b] = tmp;
+    }
+    /** returns true if event is inside the given element rectangle */
+    // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
+    //    Utils.el.contains(event.relatedTarget as HTMLElement)
+    // public static inside(e: MouseEvent, el: HTMLElement): boolean {
+    //   // srcElement, toElement, target: all set to placeholder when leaving simple grid, so we can't use that (Chrome)
+    //   const target: HTMLElement = e.relatedTarget || (e as any).fromElement;
+    //   if (!target) {
+    //     const { bottom, left, right, top } = el.getBoundingClientRect();
+    //     return (e.x < right && e.x > left && e.y < bottom && e.y > top);
+    //   }
+    //   return el.contains(target);
+    // }
+    /** true if the item can be rotated (checking for prop, not space available) */
+    static canBeRotated(n) {
+        return !(!n || n.w === n.h || n.locked || n.noResize || n.grid?.opts.disableResize || (n.minW && n.minW === n.maxW) || (n.minH && n.minH === n.maxH));
+    }
+}
+//# sourceMappingURL=utils.js.map

node_modules/gridstack/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "gridstack",
+  "version": "12.4.2",
+  "license": "MIT",
+  "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)",
+  "contributors": [
+    "Pavel Reznikov <pashka.reznikov@gmail.com>",
+    "Dylan Weiss <dylan.weiss@gmail.com> (https://dylandreams.com)"
+  ],
+  "description": "TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
+  "main": "./dist/gridstack.js",
+  "types": "./dist/gridstack.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gridstack/gridstack.js.git"
+  },
+  "funding": [
+    {
+      "type": "paypal",
+      "url": "https://www.paypal.me/alaind831"
+    },
+    {
+      "type": "venmo",
+      "url": "https://www.venmo.com/adumesny"
+    }
+  ],
+  "scripts": {
+    "build": "yarn build:ng && grunt && webpack && tsc --project tsconfig.build.json --stripInternal && yarn doc",
+    "build:ng": "cd angular && yarn build lib",
+    "w": "webpack",
+    "t": "rm -rf dist/* && grunt && tsc --project tsconfig.build.json --stripInternal",
+    "doc": "doctoc ./README.md && doctoc ./doc/CHANGES.md && node scripts/generate-docs.js",
+    "doc:main": "node scripts/generate-docs.js --main-only",
+    "doc:angular": "node scripts/generate-docs.js --angular-only",
+    "test": "yarn lint && vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:ui": "vitest --ui --coverage.enabled=true",
+    "test:coverage:detailed": "vitest run --config .vitestrc.coverage.ts",
+    "test:coverage:html": "vitest run --coverage && open coverage/index.html",
+    "test:coverage:lcov": "vitest run --coverage --coverage.reporter=lcov",
+    "test:ci": "vitest run --coverage --reporter=verbose --reporter=junit --outputFile.junit=./coverage/junit-report.xml",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "lint": "tsc --project tsconfig.build.json --noEmit && eslint src/*.ts angular/projects/lib/src/**/*.ts",
+    "reset": "rm -rf dist node_modules",
+    "prepublishOnly": "yarn build"
+  },
+  "keywords": [
+    "Typescript",
+    "gridstack.js",
+    "grid",
+    "gridster",
+    "layout",
+    "responsive",
+    "dashboard",
+    "resize",
+    "drag&drop",
+    "widgets",
+    "Angular",
+    "React",
+    "Vue",
+    "JavaScript"
+  ],
+  "bugs": {
+    "url": "https://github.com/gridstack/gridstack.js/issues"
+  },
+  "homepage": "http://gridstackjs.com/",
+  "dependencies": {},
+  "devDependencies": {
+    "@playwright/test": "^1.48.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/ui": "^2.0.5",
+    "connect": "^3.7.0",
+    "core-js": "^3.30.1",
+    "coveralls": "^3.1.1",
+    "doctoc": "^2.2.1",
+    "eslint": "^8.38.0",
+    "grunt": "^1.6.1",
+    "grunt-cli": "^1.3.2",
+    "grunt-contrib-connect": "^3.0.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^4.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-eslint": "^24.0.1",
+    "grunt-protractor-runner": "^5.0.0",
+    "grunt-protractor-webdriver": "^0.2.5",
+    "grunt-sass": "3.1.0",
+    "happy-dom": "^20.0.0",
+    "jsdom": "^25.0.0",
+    "protractor": "^7.0.0",
+    "sass": "^1.62.0",
+    "serve-static": "^1.15.0",
+    "ts-loader": "^9.4.2",
+    "typedoc": "^0.28.9",
+    "typedoc-plugin-markdown": "^4.8.0",
+    "typescript": "^5.0.4",
+    "vitest": "^2.0.5",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "files": [
+    "dist",
+    "doc/API.md"
+  ]
+}

package-lock.json

@@ -24,6 +24,7 @@
         "datatables.net-responsive": "^2.5.1",
         "datatables.net-scroller": "^2.4.1",
         "datatables.net-select": "^1.7.1",
+        "gridstack": "^12.4.2",
         "jquery": "^3.7.1",
         "jquery-contextmenu": "^2.9.2",
         "jquery-migrate": "^3.4.1",
@@ -223,6 +224,22 @@
         "delegate": "^3.1.2"
       }
     },
+    "node_modules/gridstack": {
+      "version": "12.4.2",
+      "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-12.4.2.tgz",
+      "integrity": "sha512-aXbJrQpi3LwpYXYOr4UriPM5uc/dPcjK01SdOE5PDpx2vi8tnLhU7yBg/1i4T59UhNkG/RBfabdFUObuN+gMnw==",
+      "funding": [
+        {
+          "type": "paypal",
+          "url": "https://www.paypal.me/alaind831"
+        },
+        {
+          "type": "venmo",
+          "url": "https://www.venmo.com/adumesny"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
@@ -516,6 +533,11 @@
         "delegate": "^3.1.2"
       }
     },
+    "gridstack": {
+      "version": "12.4.2",
+      "resolved": "https://registry.npmjs.org/gridstack/-/gridstack-12.4.2.tgz",
+      "integrity": "sha512-aXbJrQpi3LwpYXYOr4UriPM5uc/dPcjK01SdOE5PDpx2vi8tnLhU7yBg/1i4T59UhNkG/RBfabdFUObuN+gMnw=="
+    },
     "jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "datatables.net-responsive": "^2.5.1",
     "datatables.net-scroller": "^2.4.1",
     "datatables.net-select": "^1.7.1",
+    "gridstack": "^12.4.2",
     "jquery": "^3.7.1",
     "jquery-contextmenu": "^2.9.2",
     "jquery-migrate": "^3.4.1",

setup/compiler.class.inc.php

@@ -704,6 +704,9 @@ PHP;
 		$oPropertyTypesNode = $this->oFactory->GetNodes('/itop_design/meta/property_types')->item(0);
 		$this->CompilePropertyTypes($oPropertyTypesNode, $sTempTargetDir, $sFinalTargetDir);
 
+		$oDashletNode = $this->oFactory->GetNodes('/itop_design/meta/dashlets')->item(0);
+		$this->CompileDashlets($oDashletNode, $sTempTargetDir, $sFinalTargetDir);
+
 		// Compile the XML parameters
 		/** @var \MFElement $oParametersNode */
 		$oParametersNode = $this->oFactory->GetNodes('/itop_design/module_parameters')->item(0);
@@ -3592,6 +3595,16 @@ EOF;
 		}
 	}
 
+	protected function CompileDashlets(?DOMNode $oDashlets, string $sTempTargetDir, string $sFinalTargetDir): void
+	{
+		if ($oDashlets) {
+			$oDoc = new DesignDocument();
+			$oClone = $oDoc->importNode($oDashlets->cloneNode(true), true);
+			$oDoc->appendChild($oClone);
+			$oDoc->save($sTempTargetDir.'/core/dashlets.xml');
+		}
+	}
+
 	/**
 	 * @throws \DOMFormatException
 	 */

sources/Application/Dashboard/Controller/DashboardController.php

@@ -0,0 +1,136 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashboard\Controller;
+
+use Combodo\iTop\Application\Dashlet\DashletFactory;
+use Combodo\iTop\Application\TwigBase\Controller\Controller;
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletWrapper;
+use Combodo\iTop\Application\UI\Base\Component\TurboForm\TurboFormUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\iUIBlock;
+use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
+use Combodo\iTop\Application\WebPage\AjaxPage;
+use Combodo\iTop\Application\WebPage\JsonPage;
+use Combodo\iTop\Forms\Block\FormBlockService;
+use Combodo\iTop\PropertyType\Serializer\XMLSerializer;
+use Combodo\iTop\Service\DependencyInjection\ServiceLocator;
+use Exception;
+use IssueLog;
+use ModelReflectionRuntime;
+use RuntimeDashboard;
+use utils;
+
+class DashboardController extends Controller
+{
+	public const ROUTE_NAMESPACE = 'dashboard';
+
+	public function OperationGetDashlet()
+	{
+		// TODO 3.3 Do we want to use a readparam here or SF internal mechanism ?
+		$sDashletClass = utils::ReadParam('dashlet_class', '', false, utils::ENUM_SANITIZATION_FILTER_PHP_CLASS);
+		$sDashletId = utils::ReadParam('dashlet_id', '', false, utils::ENUM_SANITIZATION_FILTER_ELEMENT_IDENTIFIER);
+		// TODO 3.3 Check if raw data is the right call
+		$sValues = utils::ReadParam('values', '', false, utils::ENUM_SANITIZATION_FILTER_RAW_DATA);
+		$aValues = !empty($sValues) ? json_decode($sValues, true) : [];
+
+		$oPage = new AjaxPage('');
+
+		if (is_a($sDashletClass, 'Dashlet', true)) {
+			// TODO 3.3 Make a real unique id if none is provided
+			$sDashletId = !empty($sDashletId) ? $sDashletId : uniqid();
+
+			$oDashlet = DashletFactory::GetInstance()->CreateDashlet($sDashletClass, $sDashletId);
+
+			// TODO 3.3 This is not the place to register this service, do better please
+			ServiceLocator::GetInstance()->RegisterService('ModelReflection', new ModelReflectionRuntime());
+			if (!empty($aValues)) {
+				$oDashlet->FromDenormalizedParams($aValues);
+			} else {
+				$aValues = $oDashlet->GetDenormalizedProperties();
+			}
+
+			$oDashletBlock = $oDashlet->DoRender($oPage, true /* bEditMode */, false /* bEnclosingDiv */);
+
+			if ($oDashletBlock instanceof iUIBlock) {
+				// Wrap the dashlet
+				// TODO 3.3 Re-normalize Dashlet's values instead of using user input
+				$oDashletWrapper = new DashletWrapper($oDashletBlock, $sDashletClass, $oDashlet->GetID(), $aValues);
+				$oPage->AddUiBlock($oDashletWrapper);
+			}
+		}
+
+		return $oPage;
+	}
+
+	public function OperationGetDashletForm()
+	{
+		// TODO 3.3 Do we want to use a readparam here or SF internal mechanism ?
+		$sDashletClass = utils::ReadParam('dashlet_class', '', false, utils::ENUM_SANITIZATION_FILTER_PHP_CLASS);
+		$sValues = utils::ReadParam('values', '', false, utils::ENUM_SANITIZATION_FILTER_RAW_DATA);
+		$aValues = !empty($sValues) ? json_decode($sValues, true) : [];
+
+		$oPage = new AjaxPage('');
+
+		$oForm = TurboFormUIBlockFactory::MakeForDashletConfiguration($sDashletClass, $aValues);
+		$oButtonContainer = UIContentBlockUIBlockFactory::MakeStandard(null, ['ibo-dashlet-panel--form-container--buttons']);
+		$oButtonContainer->AddSubBlock(ButtonUIBlockFactory::MakeForSecondaryAction('Cancel', 'dashboard_cancel'));
+		$oButtonContainer->AddSubBlock(ButtonUIBlockFactory::MakeForPrimaryAction('Confirm', 'dashboard_submit', 'dashboard_submit', true));
+		$oForm->AddSubBlock($oButtonContainer);
+		$oPage->AddUiBlock($oForm);
+
+		return $oPage;
+	}
+
+	public function OperationSave()
+	{
+		$sValues = utils::ReadParam('values', '', false, utils::ENUM_SANITIZATION_FILTER_RAW_DATA);
+		$aValues = !empty($sValues) ? json_decode($sValues, true, 20) : [];
+		$sStatus = 'error';
+		$sMessage = 'Unknown error';
+
+		try {
+			// Get the form block from the service (and the compiler)
+			$oRequest = $this->getRequest();
+			$oFormBlock = FormBlockService::GetInstance()->GetFormBlockById('DashboardGrid', 'Dashboard');
+			$oBuilder = $this->GetFormBuilder($oFormBlock, $aValues);
+			$oForm = $oBuilder->getForm();
+			$oForm->handleRequest($oRequest);
+			// We are in the submit action, so we submit the form with the provided values
+			$oForm->submit($aValues);
+
+			// TODO 3.3 Validate the form, it requires CSRF + stripping extra fields
+			// See $oForm->getErrors(true) to get all errors
+			if ($oForm->isSubmitted() && (true || $oForm->isValid())) {
+				// Save XML
+				$oDashboard = new RuntimeDashboard($aValues['id']);
+				$oDomNode = $oDashboard->CreateEmptyDashboard();
+				XMLSerializer::GetInstance()->Serialize($aValues, $oDomNode, 'DashboardGrid', 'Dashboard');
+				$sXml = $oDomNode->ownerDocument->saveXML();
+				$oDashboard->PersistDashboard($sXml);
+				$sStatus = 'ok';
+				$sMessage = 'Dashboard saved';
+			} else {
+				$sStatus = 'error';
+				$aFormErrors = $oForm->getErrors(true, true);
+				$sMessage = $aFormErrors->__toString();
+			}
+		} catch (Exception $e) {
+			IssueLog::Exception($e->getMessage(), $e);
+			$sStatus = 'error';
+			$sMessage = $e->getMessage();
+		}
+
+		$oPage = new JsonPage();
+		$oPage->SetData([
+			'status' => $sStatus,
+			'message' => $sMessage,
+		]);
+		$oPage->SetOutputDataOnly(true);
+		return $oPage;
+	}
+}

sources/Application/Dashboard/DashboardException.php

@@ -0,0 +1,12 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashboard;
+
+class DashboardException extends \Exception
+{
+}

sources/Application/Dashboard/FormBlock/DashboardFormBlock.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace Combodo\iTop\Application\Dashboard\FormBlock;
+
+use Combodo\iTop\Forms\Block\Base\ChoiceFormBlock;
+use Combodo\iTop\Forms\Block\Base\CollectionBlock;
+use Combodo\iTop\Forms\Block\Base\FormBlock;
+use Combodo\iTop\Forms\Block\Base\TextFormBlock;
+
+class DashboardFormBlock extends FormBlock
+{
+	protected function BuildForm(): void
+	{
+		// Label
+		$this->Add('title', TextFormBlock::class, [
+			'label' => 'Title',
+		]);
+
+		// Refresh
+		$this->Add('refresh', ChoiceFormBlock::class, [
+			'label'   => 'Refresh',
+			'choices' => [
+				'Never'            => 0,
+				'Every 5 minutes'  => 5,
+				'Every 15 minutes' => 15,
+				'Every 30 minutes' => 30,
+				'Every hour'       => 60,
+			],
+		]);
+
+		$this->Add('dashlets_list', CollectionBlock::class, [
+			'label'               => 'Dashlets List',
+			'block_entry_type'    => DashletFormBlock::class,
+			'block_entry_options' => [],
+		]);
+
+	}
+
+}

sources/Application/Dashboard/FormBlock/DashletFormBlock.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace Combodo\iTop\Application\Dashboard\FormBlock;
+
+use Combodo\iTop\Forms\Block\Base\ChoiceFormBlock;
+use Combodo\iTop\Forms\Block\Base\FormBlock;
+use Combodo\iTop\Forms\Block\Base\IntegerFormBlock;
+use Combodo\iTop\PropertyType\PropertyTypeService;
+
+class DashletFormBlock extends FormBlock
+{
+	protected function BuildForm(): void
+	{
+		// type
+		$aPropertyTypes = PropertyTypeService::GetInstance()->ListPropertyTypesByType('Dashlet');
+		$this->Add('class', ChoiceFormBlock::class, [
+			'label'   => 'Class',
+			'choices' => array_combine($aPropertyTypes, $aPropertyTypes),
+		]);
+
+		// column
+		$this->Add('position_x', IntegerFormBlock::class, [
+			'label' => 'Position X',
+		]);
+
+		// row
+		$this->Add('position_y', IntegerFormBlock::class, [
+			'label' => 'Position Y',
+		]);
+
+		// column
+		$this->Add('height', IntegerFormBlock::class, [
+			'label' => 'Height',
+		]);
+
+		// row
+		$this->Add('width', IntegerFormBlock::class, [
+			'label' => 'Width',
+		]);
+
+		// dashlet
+		$this->Add('dashlet', DashletPropertiesFormBlock::class, [
+			'label' => 'Dashlet',
+		])
+			->InputDependsOn(DashletPropertiesFormBlock::INPUT_DASHLET_TYPE, 'class', ChoiceFormBlock::OUTPUT_VALUE);
+	}
+
+}

sources/Application/Dashboard/FormBlock/DashletPropertiesFormBlock.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Combodo\iTop\Application\Dashboard\FormBlock;
+
+use Combodo\iTop\Forms\Block\Base\FormBlock;
+use Combodo\iTop\Forms\IO\Format\StringIOFormat;
+use Combodo\iTop\Forms\Register\IORegister;
+use Combodo\iTop\PropertyType\PropertyTypeService;
+
+class DashletPropertiesFormBlock extends FormBlock
+{
+	// inputs
+	public const INPUT_DASHLET_TYPE = 'dashlet_type';
+
+	protected function RegisterIO(IORegister $oIORegister): void
+	{
+		parent::RegisterIO($oIORegister);
+		$oIORegister->AddInput(self::INPUT_DASHLET_TYPE, StringIOFormat::class);
+	}
+
+	public function GetFormType(): string
+	{
+		$sDashletType = strval($this->GetInputValue(self::INPUT_DASHLET_TYPE));
+		$oDashlet = PropertyTypeService::GetInstance()->GetFormBlockById($sDashletType, 'Dashlet');
+
+		return $oDashlet->GetFormType();
+	}
+
+	public function GetOptions(): array
+	{
+		$sDashletType = strval($this->GetInputValue(self::INPUT_DASHLET_TYPE));
+		$oDashlet = PropertyTypeService::GetInstance()->GetFormBlockById($sDashletType, 'Dashlet');
+
+		return $oDashlet->GetOptions();
+	}
+}

sources/Application/Dashboard/Layout/DashboardLayoutGrid.php

@@ -0,0 +1,53 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashboard\Layout;
+
+use Combodo\iTop\Application\Dashlet\Service\DashletService;
+use Combodo\iTop\Application\UI\Base\Layout\Dashboard\DashboardGrid;
+use Combodo\iTop\Application\UI\Base\Layout\Dashboard\DashboardLayout as DashboardLayoutUIBlock;
+
+class DashboardLayoutGrid extends \DashboardLayout
+{
+	public function Render($oPage, $aDashlets, $bEditMode = false, array $aExtraParams = [])
+	{
+		$oDashboardLayout = new DashboardLayoutUIBlock($aExtraParams['dashboard_div_id']);
+
+		$oDashboardGrid = new DashboardGrid();
+		$oDashboardLayout->SetGrid($oDashboardGrid);
+		foreach ($aDashlets as $aPosDashlet) {
+			/** @var \Dashlet $oDashlet */
+			$oDashlet = $aPosDashlet['dashlet'];
+			if ($oDashlet::IsVisible()) {
+				$sDashletId = $oDashlet->GetID();
+				$sDashletClass = $oDashlet->GetDashletType();
+				$aDashletDenormalizedProperties = $oDashlet->GetDenormalizedProperties();
+				$aDashletsInfo = DashletService::GetInstance()->GetDashletDefinition($sDashletClass);
+
+				// Also set minimal height/width
+				$iPositionX = $aPosDashlet['position_x'];
+				$iPositionY = $aPosDashlet['position_y'];
+				$iWidth = max($aPosDashlet['width'], array_key_exists('min_width', $aDashletsInfo) ? $aDashletsInfo['min_width'] : 1);
+				$iHeight = max($aPosDashlet['height'], array_key_exists('min_height', $aDashletsInfo) ? $aDashletsInfo['min_height'] : 1);
+				$oDashboardGrid->AddDashlet($oDashlet->DoRender($oPage, $bEditMode, true /* bEnclosingDiv */, $aExtraParams), $sDashletId, $sDashletClass, $aDashletDenormalizedProperties, $iPositionX, $iPositionY, $iWidth, $iHeight);
+			}
+		}
+
+		return $oDashboardLayout;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function GetDashletCoordinates($iCellIdx)
+	{
+		$iColNumber = $iCellIdx % 12;
+		$iRowNumber = (int)floor($iCellIdx / 12);
+
+		return [$iColNumber, $iRowNumber];
+	}
+}

sources/Application/Dashlet/Core/DashletBadge.php

@@ -0,0 +1,126 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use DBObjectSearch;
+use DesignerForm;
+use DesignerIconSelectionField;
+use Dict;
+use DisplayBlock;
+use utils;
+
+class DashletBadge extends Dashlet
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['class'] = 'Contact';
+		$this->aCSSClasses[] = 'ibo-dashlet--is-inline';
+		$this->aCSSClasses[] = 'ibo-dashlet-badge';
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer($this->sId, ['dashlet-content']);
+
+		$sClass = $this->aProperties['class'];
+		$oFilter = new DBObjectSearch($sClass);
+		$oBlock = new DisplayBlock($oFilter, 'actions');
+		$aExtraParams['context_filter'] = 1;
+		$aExtraParams['withJSRefreshCallBack'] = true;
+		$sBlockId = 'block_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occurring in the same DOM)
+		$oBlock->DisplayIntoContentBlock($oDashletContainer, $oPage, $sBlockId, $aExtraParams);
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer($this->sId, ['dashlet-content']);
+
+		$sClass = $this->aProperties['class'];
+		$sIconUrl = utils::HtmlEntities($this->oModelReflection->GetClassIcon($sClass, false));
+		$sClassLabel = $this->oModelReflection->GetName($sClass);
+		$sId = $this->sId;
+		$sClassCreate = Dict::Format('UI:ClickToCreateNew', $sClassLabel);
+
+		$sHtml = <<<HTML
+<div id="block_fake_$sId" class="display_block">
+   <div class="ibo-dashlet-badge--body" data-role="ibo-dashlet-badge--body" title="$sClassLabel">
+      <div class="ibo-dashlet-badge--icon-container"><img class="ibo-dashlet-badge--icon" src="$sIconUrl"></div>
+      <div class="ibo-dashlet-badge--actions"><a class="ibo-dashlet-badge--action-list" href="#" data-role="ibo-dashlet-badge--action-list"><span class="ibo-dashlet-badge--action-list-count">4</span><span class="ibo-dashlet-badge--action-list-label">$sClassLabel</span></a><a class="ibo-dashlet-badge--action-create" href="#"><span class="ibo-dashlet-badge--action-create-icon fas fa-plus"></span><span class="ibo-dashlet-badge--action-create-label"> $sClassCreate </span></a></div>
+   </div>
+</div>
+HTML;
+
+		$oDashletContainer->AddHtml($sHtml);
+
+		return $oDashletContainer;
+	}
+
+	protected static $aClassList = null;
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		if (is_null(self::$aClassList)) {
+			// Cache the ordered list of classes (ordered on the label)
+			// (has a significant impact when editing a page with lots of badges)
+			//
+			$aClasses = [];
+			foreach ($this->oModelReflection->GetClasses('bizmodel', true /*exclude links*/) as $sClass) {
+				$aClasses[$sClass] = $this->oModelReflection->GetName($sClass);
+			}
+			asort($aClasses);
+
+			self::$aClassList = [];
+			foreach ($aClasses as $sClass => $sLabel) {
+				$sIconUrl = $this->oModelReflection->GetClassIcon($sClass, false);
+				if ($sIconUrl == '') {
+					// The icon does not exist, let's use a transparent one of the same size.
+					$sIconUrl = utils::GetAbsoluteUrlAppRoot().'images/transparent_32_32.png';
+				}
+				self::$aClassList[] = ['value' => $sClass, 'label' => $sLabel, 'icon' => $sIconUrl];
+			}
+		}
+
+		$oField = new DesignerIconSelectionField('class', Dict::S('UI:DashletBadge:Prop-Class'), $this->aProperties['class']);
+		$oField->SetAllowedValues(self::$aClassList);
+
+		$oForm->AddField($oField);
+	}
+}

sources/Application/Dashlet/Core/DashletGroupBy.php

@@ -0,0 +1,590 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Combodo\iTop\Application\UI\Base\Component\Html\Html;
+use DBObjectSearch;
+use DesignerComboField;
+use DesignerForm;
+use DesignerFormSelectorField;
+use DesignerHiddenField;
+use DesignerIntegerField;
+use DesignerLongTextField;
+use DesignerTextField;
+use Dict;
+use DisplayBlock;
+use Exception;
+use MetaModel;
+use utils;
+
+abstract class DashletGroupBy extends Dashlet
+{
+	public function __construct($oModelReflection, $sId, string $sDashletType = null)
+	{
+		parent::__construct($oModelReflection, $sId, $sDashletType);
+		$this->aProperties['title'] = '';
+		$this->aProperties['query'] = 'SELECT Contact';
+		$this->aProperties['group_by'] = 'status';
+		$this->aProperties['style'] = 'table';
+		$this->aProperties['aggregation_function'] = 'count';
+		$this->aProperties['aggregation_attribute'] = '';
+		$this->aProperties['limit'] = '';
+		$this->aProperties['order_by'] = '';
+		$this->aProperties['order_direction'] = '';
+	}
+
+	protected $sGroupByLabel = null;
+	protected $sGroupByExpr = null;
+	protected $sGroupByAttCode = null;
+	protected $sFunction = null;
+	protected $sAggregationFunction = null;
+	protected $sAggregationAttribute = null;
+	protected $sLimit = null;
+	protected $sOrderBy = null;
+	protected $sOrderDirection = null;
+	protected $sClass = null;
+
+	/**
+	 * Compute Grouping
+	 *
+	 * @inheritdoc
+	 */
+	public function OnUpdate()
+	{
+		$this->sGroupByExpr = null;
+		$this->sGroupByLabel = null;
+		$this->sGroupByAttCode = null;
+		$this->sFunction = null;
+		$this->sClass = null;
+
+		$sQuery = $this->aProperties['query'];
+		$sGroupBy = $this->aProperties['group_by'];
+
+		$this->sAggregationFunction = $this->aProperties['aggregation_function'];
+		$this->sAggregationAttribute = $this->aProperties['aggregation_attribute'] ?? '';
+
+		$this->sLimit = $this->aProperties['limit'] ?? 0;
+		$this->sOrderBy = $this->aProperties['order_by'] ?? null;
+		if (empty($this->sOrderBy)) {
+			if ($this->aProperties['style'] == 'pie') {
+				$this->sOrderBy = 'function';
+			} else {
+				$this->sOrderBy = 'attribute';
+			}
+		}
+
+		// First perform the query - if the OQL is not ok, it will generate an exception : no need to go further
+		try {
+			$oQuery = $this->oModelReflection->GetQuery($sQuery);
+			$this->sClass = $oQuery->GetClass();
+			$sClassAlias = $oQuery->GetClassAlias();
+		} catch (Exception $e) {
+			// Invalid query, let the user edit the dashlet/dashboard anyhow
+			$this->sClass = null;
+			$sClassAlias = '';
+		}
+
+		// Check groupby... it can be wrong at this stage
+		if (preg_match('/^(.*):(.*)$/', $sGroupBy, $aMatches)) {
+			$this->sGroupByAttCode = $aMatches[1];
+			$this->sFunction = $aMatches[2];
+		} else {
+			$this->sGroupByAttCode = $sGroupBy;
+			$this->sFunction = null;
+		}
+
+		if ((!is_null($this->sClass)) && empty($this->aProperties['order_direction'])) {
+			$aAttributeTypes = $this->oModelReflection->ListAttributes($this->sClass);
+			if (isset($aAttributeTypes[$this->sGroupByAttCode])) {
+				$sAttributeType = $aAttributeTypes[$this->sGroupByAttCode];
+				if (is_subclass_of($sAttributeType, 'AttributeDateTime') || $sAttributeType == 'AttributeDateTime') {
+					$this->sOrderDirection = 'asc';
+				} else {
+					$this->sOrderDirection = 'desc';
+				}
+			}
+		} else {
+			$this->sOrderDirection = $this->aProperties['order_direction'];
+		}
+
+		if ((!is_null($this->sClass)) && $this->oModelReflection->IsValidAttCode($this->sClass, $this->sGroupByAttCode)) {
+			$sAttLabel = $this->oModelReflection->GetLabel($this->sClass, $this->sGroupByAttCode);
+			if (!is_null($this->sFunction)) {
+				switch ($this->sFunction) {
+					case 'hour':
+						$this->sGroupByLabel = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Hour', $sAttLabel);
+						$this->sGroupByExpr = "DATE_FORMAT($sClassAlias.{$this->sGroupByAttCode}, '%H')"; // 0 -> 23
+						break;
+
+					case 'month':
+						$this->sGroupByLabel = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Month', $sAttLabel);
+						$this->sGroupByExpr = "DATE_FORMAT($sClassAlias.{$this->sGroupByAttCode}, '%Y-%m')"; // yyyy-mm
+						break;
+
+					case 'day_of_week':
+						$this->sGroupByLabel = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:DayOfWeek', $sAttLabel);
+						$this->sGroupByExpr = "DATE_FORMAT($sClassAlias.{$this->sGroupByAttCode}, '%w')";
+						break;
+
+					case 'day_of_month':
+						$this->sGroupByLabel = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:DayOfMonth', $sAttLabel);
+						$this->sGroupByExpr = "DATE_FORMAT($sClassAlias.{$this->sGroupByAttCode}, '%Y-%m-%d')"; // mm-dd
+						break;
+
+					default:
+						$this->sGroupByLabel = 'Unknown group by function '.$this->sFunction;
+						$this->sGroupByExpr = $sClassAlias.'.'.$this->sGroupByAttCode;
+				}
+			} else {
+				$this->sGroupByExpr = $sClassAlias.'.'.$this->sGroupByAttCode;
+				$this->sGroupByLabel = $sAttLabel;
+			}
+		} else {
+			$this->sGroupByAttCode = null;
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \CoreException
+	 * @throws \ArchivedObjectException
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sTitle = $this->aProperties['title'];
+		$sQuery = $this->aProperties['query'];
+		$sStyle = $this->aProperties['style'];
+
+		// First perform the query - if the OQL is not ok, it will generate an exception : no need to go further
+		if (isset($aExtraParams['query_params'])) {
+			$aQueryParams = $aExtraParams['query_params'];
+		} elseif (isset($aExtraParams['this->class']) && isset($aExtraParams['this->id'])) {
+			$oObj = MetaModel::GetObject($aExtraParams['this->class'], $aExtraParams['this->id']);
+			$aQueryParams = $oObj->ToArgsForQuery();
+		} else {
+			$aQueryParams = [];
+		}
+		$oFilter = DBObjectSearch::FromOQL($sQuery, $aQueryParams);
+		$oFilter->SetShowObsoleteData(utils::ShowObsoleteData());
+
+		$sClass = $oFilter->GetClass();
+		if (!$this->oModelReflection->IsValidAttCode($sClass, $this->sGroupByAttCode)) {
+			return new Html('<p>'.Dict::S('UI:DashletGroupBy:MissingGroupBy').'</p>');
+		}
+
+		switch ($sStyle) {
+			case 'bars':
+				$sType = 'chart';
+				$aParams = [
+					'chart_type'            => 'bars',
+					'chart_title'           => $sTitle,
+					'group_by'              => $this->sGroupByExpr,
+					'group_by_label'        => $this->sGroupByLabel,
+					'aggregation_function'  => $this->sAggregationFunction,
+					'aggregation_attribute' => $this->sAggregationAttribute,
+					'limit'                 => $this->sLimit,
+					'order_direction'       => $this->sOrderDirection,
+					'order_by'              => $this->sOrderBy,
+				];
+				$sHtmlTitle = ''; // done in the itop block
+				break;
+
+			case 'pie':
+				$sType = 'chart';
+				$aParams = [
+					'chart_type'            => 'pie',
+					'chart_title'           => $sTitle,
+					'group_by'              => $this->sGroupByExpr,
+					'group_by_label'        => $this->sGroupByLabel,
+					'aggregation_function'  => $this->sAggregationFunction,
+					'aggregation_attribute' => $this->sAggregationAttribute,
+					'limit'                 => $this->sLimit,
+					'order_direction'       => $this->sOrderDirection,
+					'order_by'              => $this->sOrderBy,
+				];
+				$sHtmlTitle = ''; // done in the itop block
+				break;
+
+			case 'table':
+			default:
+				$sHtmlTitle = utils::HtmlEntities(Dict::S($sTitle)); // done in the itop block
+				$sType = 'count';
+				$aParams = [
+					'group_by'              => $this->sGroupByExpr,
+					'group_by_label'        => $this->sGroupByLabel,
+					'aggregation_function'  => $this->sAggregationFunction,
+					'aggregation_attribute' => $this->sAggregationAttribute,
+					'limit'                 => $this->sLimit,
+					'order_direction'       => $this->sOrderDirection,
+					'order_by'              => $this->sOrderBy,
+				];
+				break;
+		}
+
+		//$oPanel = \Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory::MakeStandard();
+		//PanelUIBlockFactory::MakeForClass($sClass, Dict::S($sTitle));
+
+		$sBlockId = 'block_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occurring in the same DOM)
+		$oBlock = new DisplayBlock($oFilter, $sType);
+		//$oBlock->DisplayIntoContentBlock($oPanel, $oPage, $sBlockId, array_merge($aExtraParams, $aParams));
+		$aExtraParams["surround_with_panel"] = true;
+		$aExtraParams["panel_title"] = Dict::S($sTitle);
+		$aExtraParams["panel_class"] = $sClass;
+		$oPanel = $oBlock->GetDisplay($oPage, $sBlockId, array_merge($aExtraParams, $aParams));
+		if ($bEditMode) {
+			$oPanel->AddHtml('<div class="ibo-dashlet-blocker dashlet-blocker"></div>');
+		}
+
+		return $oPanel;
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function MakeSimulatedData()
+	{
+		$sQuery = $this->aProperties['query'];
+
+		$oQuery = $this->oModelReflection->GetQuery($sQuery);
+		$sClass = $oQuery->GetClass();
+
+		$aDisplayValues = [];
+		if ($this->oModelReflection->IsValidAttCode($sClass, $this->sGroupByAttCode)) {
+			$aAttributeTypes = $this->oModelReflection->ListAttributes($sClass);
+			$sAttributeType = $aAttributeTypes[$this->sGroupByAttCode];
+			if (is_subclass_of($sAttributeType, 'AttributeDateTime') || $sAttributeType == 'AttributeDateTime') {
+				// Note: an alternative to this somewhat hardcoded way of doing things would be to implement...
+				//$oExpr = Expression::FromOQL($this->sGroupByExpr);
+				//$aTranslationData = array($oQuery->GetClassAlias() => array($this->sGroupByAttCode => new ScalarExpression(date('Y-m-d H:i:s', $iTime))));
+				//$sRawValue = CMDBSource::QueryToScalar('SELECT '.$oExpr->Translate($aTranslationData)->Render());
+				//$sValueLabel = $oExpr->MakeValueLabel(oFilter, $sRawValue, $sRawValue);
+				// Anyhow, this requires :
+				// - an update to the prototype of MakeValueLabel() so that it takes ModelReflection parameters
+				// - propose clever date/times samples
+
+				$aValues = [];
+				switch ($this->sFunction) {
+					case 'hour':
+						$aValues = [8, 9, 15, 18];
+						break;
+
+					case 'month':
+						$aValues = ['2013 '.Dict::S('Month-11'), '2013 '.Dict::S('Month-12'), '2014 '.Dict::S('Month-01'), '2014 '.Dict::S('Month-02'), '2014 '.Dict::S('Month-03')];
+						break;
+
+					case 'day_of_week':
+						$aValues = [Dict::S('DayOfWeek-Monday'), Dict::S('DayOfWeek-Wednesday'), Dict::S('DayOfWeek-Thursday'), Dict::S('DayOfWeek-Friday')];
+						break;
+
+					case 'day_of_month':
+						$aValues = [Dict::S('Month-03').' 30', Dict::S('Month-03').' 31', Dict::S('Month-04').' 01', Dict::S('Month-04').' 02', Dict::S('Month-04').' 03'];
+						break;
+				}
+				foreach ($aValues as $sValue) {
+					$aDisplayValues[] = ['label' => $sValue, 'value' => (int)rand(1, 15)];
+				}
+			} elseif (is_subclass_of($sAttributeType, 'AttributeEnum') || $sAttributeType == 'AttributeEnum') {
+				$aAllowed = $this->oModelReflection->GetAllowedValues_att($sClass, $this->sGroupByAttCode);
+				if ($aAllowed) { // null for non enums
+					foreach ($aAllowed as $sValue => $sValueLabel) {
+						$iCount = (int)rand(2, 100);
+						$aDisplayValues[] = [
+							'label' => $sValueLabel,
+							'value' => $iCount,
+						];
+					}
+				}
+			} else {
+				$aDisplayValues[] = ['label' => 'a', 'value' => 123];
+				$aDisplayValues[] = ['label' => 'b', 'value' => 321];
+				$aDisplayValues[] = ['label' => 'c', 'value' => 456];
+			}
+		}
+
+		return $aDisplayValues;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+		$oDashletContainer->AddHtml('error!');
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletGroupBy:Prop-Title'), $this->aProperties['title']);
+		$oForm->AddField($oField);
+
+		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $this->aProperties['query']);
+		$oField->SetMandatory();
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
+		$oForm->AddField($oField);
+
+		try {
+			// Group by field: build the list of possible values (attribute codes + ...)
+			$aGroupBy = $this->GetGroupByOptions($this->aProperties['query']);
+
+			$oField = new DesignerComboField('group_by', Dict::S('UI:DashletGroupBy:Prop-GroupBy'), $this->aProperties['group_by']);
+			$oField->SetMandatory();
+			$oField->SetAllowedValues($aGroupBy);
+		} catch (Exception $e) {
+			$oField = new DesignerTextField('group_by', Dict::S('UI:DashletGroupBy:Prop-GroupBy'), $this->aProperties['group_by']);
+			$oField->SetReadOnly();
+			$aGroupBy = [];
+		}
+		$oForm->AddField($oField);
+
+		$aStyles = [
+			'pie'   => Dict::S('UI:DashletGroupByPie:Label'),
+			'bars'  => Dict::S('UI:DashletGroupByBars:Label'),
+			'table' => Dict::S('UI:DashletGroupByTable:Label'),
+		];
+
+		$oField = new DesignerComboField('style', Dict::S('UI:DashletGroupBy:Prop-Style'), $this->aProperties['style']);
+		$oField->SetMandatory();
+		$oField->SetAllowedValues($aStyles);
+		$oForm->AddField($oField);
+
+		$aFunctionAttributes = $this->GetNumericAttributes($this->aProperties['query']);
+		$aFunctions = $this->GetAllowedFunctions($aFunctionAttributes);
+		$oSelectorField = new DesignerFormSelectorField('aggregation_function', Dict::S('UI:DashletGroupBy:Prop-Function'), $this->aProperties['aggregation_function']);
+		$oForm->AddField($oSelectorField);
+		$oSelectorField->SetMandatory();
+		// Count sub-menu
+		$oSubForm = new DesignerForm();
+		$oSelectorField->AddSubForm($oSubForm, Dict::S('UI:GroupBy:count'), 'count');
+		foreach ($aFunctions as $sFct => $sLabel) {
+			$oSubForm = new DesignerForm();
+			$oField = new DesignerComboField('aggregation_attribute', Dict::S('UI:DashletGroupBy:Prop-FunctionAttribute'), $this->aProperties['aggregation_attribute']);
+			$oField->SetMandatory();
+			$oField->SetAllowedValues($aFunctionAttributes);
+			$oSubForm->AddField($oField);
+			$oSelectorField->AddSubForm($oSubForm, $sLabel, $sFct);
+		}
+
+		$aOrderField = [];
+
+		if (isset($this->aProperties['group_by']) && isset($aGroupBy[$this->aProperties['group_by']])) {
+			$aOrderField['attribute'] = $aGroupBy[$this->aProperties['group_by']];
+		}
+
+		if ($this->aProperties['aggregation_function'] == 'count') {
+			$aOrderField['function'] = Dict::S('UI:GroupBy:count');
+		} else {
+			$aOrderField['function'] = $aFunctions[$this->aProperties['aggregation_function']];
+		}
+		$oSelectorField = new DesignerFormSelectorField('order_by', Dict::S('UI:DashletGroupBy:Prop-OrderField'), $this->aProperties['order_by']);
+		$oForm->AddField($oSelectorField);
+		$oSelectorField->SetMandatory();
+		foreach ($aOrderField as $sField => $sLabel) {
+			$oSubForm = new DesignerForm();
+			if ($sField == 'function') {
+				$oField = new DesignerIntegerField('limit', Dict::S('UI:DashletGroupBy:Prop-Limit'), $this->aProperties['limit']);
+				$oSubForm->AddField($oField);
+			}
+			$oSelectorField->AddSubForm($oSubForm, $sLabel, $sField);
+		}
+
+		$aOrderDirections = [
+			'asc'  => Dict::S('UI:DashletGroupBy:Order:asc'),
+			'desc' => Dict::S('UI:DashletGroupBy:Order:desc'),
+		];
+		$sOrderDirection = empty($this->aProperties['order_direction']) ? $this->sOrderDirection : $this->aProperties['order_direction'];
+		$oField = new DesignerComboField('order_direction', Dict::S('UI:DashletGroupBy:Prop-OrderDirection'), $sOrderDirection);
+		$oField->SetMandatory();
+		$oField->SetAllowedValues($aOrderDirections);
+		$oForm->AddField($oField);
+
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function GetOrderBy()
+	{
+		if (is_null($this->sClass)) {
+			return [];
+		}
+
+		return [
+			$this->aProperties['group_by']                          => $this->oModelReflection->GetLabel($this->sClass, $this->aProperties['group_by']),
+			'_itop_'.$this->aProperties['aggregation_function'].'_' => Dict::S('UI:GroupBy:'.$this->aProperties['aggregation_function']),
+		];
+	}
+
+	/**
+	 * @param array $aFunctionAttributes
+	 *
+	 * @return array
+	 */
+	protected function GetAllowedFunctions($aFunctionAttributes)
+	{
+		$aFunctions = [];
+
+		if (!empty($aFunctionAttributes) || is_null($this->sClass)) {
+			$aFunctions['sum'] = Dict::S('UI:GroupBy:sum');
+			$aFunctions['avg'] = Dict::S('UI:GroupBy:avg');
+			$aFunctions['min'] = Dict::S('UI:GroupBy:min');
+			$aFunctions['max'] = Dict::S('UI:GroupBy:max');
+		}
+
+		return $aFunctions;
+	}
+
+	/**
+	 * @param string $sOql
+	 *
+	 * @return array
+	 */
+	protected function GetNumericAttributes($sOql)
+	{
+		$aFunctionAttributes = [];
+		try {
+			$oQuery = $this->oModelReflection->GetQuery($sOql);
+			$sClass = $oQuery->GetClass();
+			if (is_null($sClass)) {
+				return $aFunctionAttributes;
+			}
+			foreach ($this->oModelReflection->ListAttributes($sClass) as $sAttCode => $sAttType) {
+				switch ($sAttType) {
+					case 'AttributeDecimal':
+					case 'AttributeDuration':
+					case 'AttributeInteger':
+					case 'AttributePercentage':
+					case 'AttributeSubItem': // TODO: Known limitation: no unit displayed (values in sec)
+						$sLabel = $this->oModelReflection->GetLabel($sClass, $sAttCode);
+						$aFunctionAttributes[$sAttCode] = $sLabel;
+						break;
+				}
+			}
+		} catch (Exception $e) {
+			// In case the OQL is bad
+		}
+
+		return $aFunctionAttributes;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function Update($aValues, $aUpdatedFields)
+	{
+		if (in_array('query', $aUpdatedFields)) {
+			try {
+				$sCurrQuery = $aValues['query'];
+				$oCurrSearch = $this->oModelReflection->GetQuery($sCurrQuery);
+				$sCurrClass = $oCurrSearch->GetClass();
+
+				$sPrevQuery = $this->aProperties['query'];
+				$oPrevSearch = $this->oModelReflection->GetQuery($sPrevQuery);
+				$sPrevClass = $oPrevSearch->GetClass();
+
+				if ($sCurrClass != $sPrevClass) {
+					$this->bFormRedrawNeeded = true;
+					// wrong but not necessary - unset($aUpdatedFields['group_by']);
+					$this->aProperties['group_by'] = '';
+				}
+			} catch (Exception $e) {
+				$this->bFormRedrawNeeded = true;
+			}
+		}
+		$oDashlet = parent::Update($aValues, $aUpdatedFields);
+
+		if (in_array('style', $aUpdatedFields)) {
+			switch ($aValues['style']) {
+				// Style changed, mutate to the specified type of chart
+				case 'pie':
+					$oDashlet = new DashletGroupByPie($this->oModelReflection, $this->sId);
+					break;
+
+				case 'bars':
+					$oDashlet = new DashletGroupByBars($this->oModelReflection, $this->sId);
+					break;
+
+				case 'table':
+					$oDashlet = new DashletGroupByTable($this->oModelReflection, $this->sId);
+					break;
+			}
+			$oDashlet->FromParams($aValues);
+			$oDashlet->bRedrawNeeded = true;
+			$oDashlet->bFormRedrawNeeded = true;
+		}
+		if (in_array('aggregation_attribute', $aUpdatedFields) || in_array('order_direction', $aUpdatedFields) || in_array('order_by', $aUpdatedFields) || in_array('limit', $aUpdatedFields)) {
+			$oDashlet->bRedrawNeeded = true;
+		}
+		if (in_array('group_by', $aUpdatedFields) || in_array('aggregation_function', $aUpdatedFields)) {
+			$oDashlet->bRedrawNeeded = true;
+			$oDashlet->bFormRedrawNeeded = true;
+		}
+
+		return $oDashlet;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public static function CanCreateFromOQL()
+	{
+		return true;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFieldsFromOQL(DesignerForm $oForm, $sOQL = null)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletGroupBy:Prop-Title'), '');
+		$oForm->AddField($oField);
+
+		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $sOQL);
+		$oField->SetMandatory();
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
+		$oForm->AddField($oField);
+
+		if (!is_null($sOQL)) {
+			$oField = new DesignerComboField('group_by', Dict::S('UI:DashletGroupBy:Prop-GroupBy'), null);
+			$aGroupBy = $this->GetGroupByOptions($sOQL);
+			$oField->SetAllowedValues($aGroupBy);
+		} else {
+			// Creating a form for reading parameters!
+			$oField = new DesignerTextField('group_by', Dict::S('UI:DashletGroupBy:Prop-GroupBy'), null);
+		}
+		$oField->SetMandatory();
+
+		$oForm->AddField($oField);
+
+		$oField = new DesignerHiddenField('style', '', $this->aProperties['style']);
+		$oField->SetMandatory();
+		$oForm->AddField($oField);
+	}
+}

sources/Application/Dashlet/Core/DashletGroupByBars.php

@@ -0,0 +1,112 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Dict;
+use utils;
+
+class DashletGroupByBars extends DashletGroupBy
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['style'] = 'bars';
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$sTitle = $this->aProperties['title'];
+
+		$sBlockId = 'block_fake_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occuring in the same DOM)
+
+		$HTMLsTitle = ($sTitle != '') ? '<h1 style="text-align:center">'.utils::HtmlEntities($sTitle).'</h1>' : '';
+		$oDashletContainer->AddHtml("<div style=\"background-color:#fff;padding:0.25em;\">$HTMLsTitle<div id=\"$sBlockId\" style=\"background-color:#fff;\"></div></div>");
+
+		$aDisplayValues = $this->MakeSimulatedData();
+
+		$aNames = [];
+		foreach ($aDisplayValues as $idx => $aValue) {
+			$aNames[$idx] = $aValue['label'];
+		}
+		$sJSNames = json_encode($aNames);
+
+		$sJson = json_encode($aDisplayValues);
+		$oPage->add_ready_script(
+			<<<EOF
+window.setTimeout(function() {
+	var chart = c3.generate({
+    bindto: '#{$sBlockId}',
+    data: {
+   	  json: $sJson,
+      keys: {
+      	x: 'label',
+      	value: ["value"]
+	  },
+	  selection: {
+		enabled: true
+	  },
+      type: 'bar'
+    },
+    axis: {
+        x: {
+			tick: {
+				culling: {max: 25}, // Maximum 24 labels on x axis (2 years).
+				centered: true,
+				rotate: 90,
+				multiline: false
+			},
+            type: 'category'   // this needed to load string x value
+        }
+    },
+	grid: {
+		y: {
+			show: true
+		}
+	},
+    legend: {
+      show: false,
+    },
+	tooltip: {
+	  grouped: false,
+	  format: {
+		title: function() { return '' },
+	    name: function (name, ratio, id, index) {
+			var aNames = $sJSNames;
+			return aNames[index];
+		}
+	  }
+	}
+});
+}, 100);
+EOF
+		);
+
+		return $oDashletContainer;
+	}
+}

sources/Application/Dashlet/Core/DashletGroupByPie.php

@@ -0,0 +1,109 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Helper\WebResourcesHelper;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Dict;
+use utils;
+
+class DashletGroupByPie extends DashletGroupBy
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['style'] = 'pie';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function GetJSFilesRelPaths(): array
+	{
+		return array_merge(
+			parent::GetJSFilesRelPaths(),
+			WebResourcesHelper::GetJSFilesRelPathsForC3JS()
+		);
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function GetCSSFilesRelPaths(): array
+	{
+		return array_merge(
+			parent::GetCSSFilesRelPaths(),
+			WebResourcesHelper::GetCSSFilesRelPathsForC3JS()
+		);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$sTitle = $this->aProperties['title'];
+
+		$sBlockId = 'block_fake_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occuring in the same DOM)
+
+		$HTMLsTitle = ($sTitle != '') ? '<h1 style="text-align:center">'.utils::HtmlEntities($sTitle).'</h1>' : '';
+		$oDashletContainer->AddHtml("<div style=\"background-color:#fff;padding:0.25em;\">$HTMLsTitle<div id=\"$sBlockId\" style=\"background-color:#fff;\"></div></div>");
+
+		$aDisplayValues = $this->MakeSimulatedData();
+
+		$aColumns = [];
+		$aNames = [];
+		foreach ($aDisplayValues as $idx => $aValue) {
+			$aColumns[] = ['series_'.$idx, (int)$aValue['value']];
+			$aNames['series_'.$idx] = $aValue['label'];
+		}
+		$sJSColumns = json_encode($aColumns);
+		$sJSNames = json_encode($aNames);
+		$oPage->add_ready_script(
+			<<<EOF
+window.setTimeout(function() {
+var chart = c3.generate({
+    bindto: '#{$sBlockId}',
+    data: {
+    	columns: $sJSColumns,
+      	type: 'pie',
+		names: $sJSNames,
+    },
+    legend: {
+      show: true,
+	  position: 'right',
+    },
+	tooltip: {
+	  format: {
+	    value: function (value, ratio, id) { return value; }
+	  }
+	}
+});}, 100);
+EOF
+		);
+
+		return $oDashletContainer;
+	}
+}

sources/Application/Dashlet/Core/DashletGroupByTable.php

@@ -0,0 +1,79 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Dict;
+
+class DashletGroupByTable extends DashletGroupBy
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['style'] = 'table';
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer();
+
+		$aDisplayValues = $this->MakeSimulatedData();
+		$iTotal = 0;
+		foreach ($aDisplayValues as $iRow => $aDisplayData) {
+			$iTotal += $aDisplayData['value'];
+		}
+
+		$sBlockId = 'block_fake_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occuring in the same DOM)
+
+		$sHtml = '';
+		$sHtml .= '<div id="'.$sBlockId.'" class="display_block">';
+		$sHtml .= '<div class="dashlet-content">';
+		$sHtml .= '<p>'.Dict::Format('UI:Pagination:HeaderNoSelection', $iTotal).'</p>';
+		$sHtml .= '<table class="listResults">';
+		$sHtml .= '<thead>';
+		$sHtml .= '<tr>';
+		$sHtml .= '<th class="header" title="">'.$this->sGroupByLabel.'</th>';
+		$sHtml .= '<th class="header" title="'.Dict::S('UI:GroupBy:Count+').'">'.Dict::S('UI:GroupBy:Count').'</th>';
+		$sHtml .= '</tr>';
+		$sHtml .= '</thead>';
+		$sHtml .= '<tbody>';
+		foreach ($aDisplayValues as $aDisplayData) {
+			$sHtml .= '<tr class="even">';
+			$sHtml .= '<td class=""><span title="Active">'.$aDisplayData['label'].'</span></td>';
+			$sHtml .= '<td class=""><a>'.$aDisplayData['value'].'</a></td>';
+			$sHtml .= '</tr>';
+		}
+		$sHtml .= '</tbody>';
+		$sHtml .= '</table>';
+		$sHtml .= '</div>';
+
+		$sHtml .= '</div>';
+
+		$oDashletContainer->AddHtml($sHtml);
+
+		return $oDashletContainer;
+	}
+}

sources/Application/Dashlet/Core/DashletHeaderDynamic.php

@@ -0,0 +1,326 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use ApplicationContext;
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
+use DBObjectSearch;
+use DBObjectSet;
+use DesignerComboField;
+use DesignerForm;
+use DesignerLongTextField;
+use DesignerTextField;
+use Dict;
+use DisplayBlock;
+use Exception;
+use MetaModel;
+use UnknownClassOqlException;
+use utils;
+
+class DashletHeaderDynamic extends Dashlet
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['title'] = Dict::S('UI:DashletHeaderDynamic:Prop-Title:Default');
+		$oIconSelect = $this->oModelReflection->GetIconSelectionField('icon');
+		$this->aProperties['icon'] = $oIconSelect->GetDefaultValue('Contact');
+		$this->aProperties['subtitle'] = Dict::S('UI:DashletHeaderDynamic:Prop-Subtitle:Default');
+		$this->aProperties['query'] = 'SELECT Contact';
+		$this->aProperties['group_by'] = 'status';
+		$this->aProperties['values'] = ['active', 'inactive'];
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function GetValues()
+	{
+		$sQuery = $this->aProperties['query'];
+		$sGroupBy = $this->aProperties['group_by'];
+		$aValues = $this->aProperties['values'];
+
+		if (empty($aValues)) {
+			$aValues = [];
+		}
+
+		$oQuery = $this->oModelReflection->GetQuery($sQuery);
+		$sClass = $oQuery->GetClass();
+
+		if ($this->oModelReflection->IsValidAttCode($sClass, $sGroupBy)) {
+			if (count($aValues) == 0) {
+				$aAllowed = $this->oModelReflection->GetAllowedValues_att($sClass, $sGroupBy);
+				if (is_array($aAllowed)) {
+					$aValues = array_keys($aAllowed);
+				}
+			}
+		}
+
+		return $aValues;
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \CoreException
+	 * @throws \ArchivedObjectException
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sTitle = utils::HtmlEntities($this->aProperties['title']);
+		$sIcon = $this->aProperties['icon'];
+		$sSubtitle = utils::HtmlEntities($this->aProperties['subtitle']);
+		$sQuery = $this->aProperties['query'];
+		$sGroupBy = $this->aProperties['group_by'];
+
+		$oIconSelect = $this->oModelReflection->GetIconSelectionField('icon');
+		$sIconPath = '';
+		if (Utils::IsNotNullOrEmptyString($sIcon)) {
+			$sIconPath = $oIconSelect->MakeFileUrl($sIcon);
+		}
+
+		$aValues = $this->GetValues();
+		if (count($aValues) > 0) {
+			// Stats grouped by <group_by>
+			$sCSV = implode(',', $aValues);
+			$aParams = [
+				'title[block]'        => $sTitle,
+				'label[block]'        => $sSubtitle,
+				'status[block]'       => $sGroupBy,
+				'status_codes[block]' => $sCSV,
+				'context_filter'      => 1,
+			];
+		} else {
+			// Simple stats
+			$aParams = [
+				'title[block]'   => $sTitle,
+				'label[block]'   => $sSubtitle,
+				'context_filter' => 1,
+			];
+		}
+
+		if (isset($aExtraParams['query_params'])) {
+			$aQueryParams = $aExtraParams['query_params'];
+		} elseif (isset($aExtraParams['this->class'])) {
+			$oObj = MetaModel::GetObject($aExtraParams['this->class'], $aExtraParams['this->id']);
+			$aQueryParams = $oObj->ToArgsForQuery();
+		} else {
+			$aQueryParams = [];
+		}
+		$oFilter = DBObjectSearch::FromOQL($sQuery, $aQueryParams);
+		$oFilter->SetShowObsoleteData(utils::ShowObsoleteData());
+		$sClass = $oFilter->GetClass();
+
+		$oPanel = PanelUIBlockFactory::MakeNeutral(Dict::S(str_replace('_', ':', $sTitle)))
+			->SetIcon($sIconPath)
+			->SetColorFromClass($sClass);
+		$oBlock = new DisplayBlock($oFilter, 'summary');
+		$sBlockId = 'block_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occuring in the same DOM)
+		$oBlock->DisplayIntoContentBlock($oPanel, $oPage, $sBlockId, array_merge($aExtraParams, $aParams));
+
+		$oSubTitle = $oPanel->GetSubTitleBlock();
+		$oSet = new DBObjectSet($oFilter);
+		$iCount = $oSet->Count();
+		$oAppContext = new ApplicationContext();
+		$sHyperlink = utils::GetAbsoluteUrlAppRoot().'pages/UI.php?operation=search'.$oAppContext->GetForLink(true).'&filter='.rawurlencode($oFilter->serialize());
+		$oSubTitle->AddHtml('<a class="summary" href="'.$sHyperlink.'">'.Dict::Format(str_replace('_', ':', $sSubtitle), $iCount).'</a>');
+
+		return $oPanel;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sTitle = utils::HtmlEntities($this->aProperties['title']);
+		$sIcon = $this->aProperties['icon'];
+		$sSubtitle = utils::HtmlEntities($this->aProperties['subtitle']);
+		$sQuery = $this->aProperties['query'];
+		$sGroupBy = $this->aProperties['group_by'];
+
+		$aValueLabels = [];
+		$aValues = [];
+		try {
+			$oQuery = $this->oModelReflection->GetQuery($sQuery);
+			$sClass = $oQuery->GetClass();
+			$aValues = $this->GetValues();
+			foreach ($aValues as $sValue) {
+				$aValueLabels[] = $this->oModelReflection->GetValueLabel($sClass, $sGroupBy, $sValue);
+			}
+		} catch (UnknownClassOqlException $e) {
+			$aValueLabels[] = $e->GetUserFriendlyDescription();
+			$aValues[] = 1;
+		}
+
+		$oIconSelect = $this->oModelReflection->GetIconSelectionField('icon');
+		$sIconPath = utils::HtmlEntities($oIconSelect->MakeFileUrl($sIcon));
+
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$sHtml = '';
+		$sHtml .= '<img src="'.$sIconPath.'">';
+
+		$sBlockId = 'block_fake_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occuring in the same DOM)
+
+		$iTotal = 0;
+
+		$sHtml .= '<div class="display_block" id="'.$sBlockId.'">';
+		$sHtml .= '<div class="summary-details">';
+		$sHtml .= '<table><tbody>';
+		$sHtml .= '<tr>';
+		foreach ($aValueLabels as $sValueLabel) {
+			$sHtml .= '	<th>'.$sValueLabel.'</th>';
+		}
+		$sHtml .= '</tr>';
+		$sHtml .= '<tr>';
+		foreach ($aValues as $sValue) {
+			$iCount = rand(2, 100);
+			$iTotal += $iCount;
+			$sHtml .= '	<td>'.$iCount.'</td>';
+		}
+		$sHtml .= '</tr>';
+		$sHtml .= '</tbody></table>';
+		$sHtml .= '</div>';
+
+		$sTitle = $this->oModelReflection->DictString($sTitle);
+		$sSubtitle = $this->oModelReflection->DictFormat($sSubtitle, $iTotal);
+
+		$sHtml .= '<h1>'.utils::HtmlEntities($sTitle).'</h1>';
+		$sHtml .= '<a class="summary">'.utils::HtmlEntities($sSubtitle).'</a>';
+		$sHtml .= '</div>';
+
+		$oDashletContainer->AddHtml($sHtml);
+
+		return $oDashletContainer;
+
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletHeaderDynamic:Prop-Title'), $this->aProperties['title']);
+		$oForm->AddField($oField);
+
+		$oField = $this->oModelReflection->GetIconSelectionField('icon', Dict::S('UI:DashletHeaderDynamic:Prop-Icon'), $this->aProperties['icon']);
+		$oField->AddAllowedValue(['value' => '', 'label' => Dict::S('UI:DashletIcon:None'), 'icon' => '']);
+		$oForm->AddField($oField);
+
+		$oField = new DesignerTextField('subtitle', Dict::S('UI:DashletHeaderDynamic:Prop-Subtitle'), $this->aProperties['subtitle']);
+		$oForm->AddField($oField);
+
+		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletHeaderDynamic:Prop-Query'), $this->aProperties['query']);
+		$oField->SetMandatory();
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
+		$oForm->AddField($oField);
+
+		try {
+			// Group by field: build the list of possible values (attribute codes + ...)
+			$oQuery = $this->oModelReflection->GetQuery($this->aProperties['query']);
+			$sClass = $oQuery->GetClass();
+			$aGroupBy = $this->GetGroupByOptions($this->aProperties['query']);
+			$oField = new DesignerComboField('group_by', Dict::S('UI:DashletHeaderDynamic:Prop-GroupBy'), $this->aProperties['group_by']);
+			$oField->SetMandatory();
+			$oField->SetAllowedValues($aGroupBy);
+		} catch (Exception $e) {
+			$oField = new DesignerTextField('group_by', Dict::S('UI:DashletHeaderDynamic:Prop-GroupBy'), $this->aProperties['group_by']);
+			$oField->SetReadOnly();
+		}
+		$oForm->AddField($oField);
+
+		$oField = new DesignerComboField('values', Dict::S('UI:DashletHeaderDynamic:Prop-Values'), $this->aProperties['values']);
+		$oField->MultipleSelection(true);
+		if (isset($sClass) && $this->oModelReflection->IsValidAttCode($sClass, $this->aProperties['group_by'])) {
+			$aValues = $this->oModelReflection->GetAllowedValues_att($sClass, $this->aProperties['group_by']);
+			$oField->SetAllowedValues($aValues);
+		} else {
+			$oField->SetReadOnly();
+		}
+		$oForm->AddField($oField);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function Update($aValues, $aUpdatedFields)
+	{
+		if (in_array('query', $aUpdatedFields)) {
+			try {
+				$sCurrQuery = $aValues['query'];
+				$oCurrSearch = $this->oModelReflection->GetQuery($sCurrQuery);
+				$sCurrClass = $oCurrSearch->GetClass();
+
+				$sPrevQuery = $this->aProperties['query'];
+				$oPrevSearch = $this->oModelReflection->GetQuery($sPrevQuery);
+				$sPrevClass = $oPrevSearch->GetClass();
+
+				if ($sCurrClass != $sPrevClass) {
+					$this->bFormRedrawNeeded = true;
+					// wrong but not necessary - unset($aUpdatedFields['group_by']);
+					$this->aProperties['group_by'] = '';
+					$this->aProperties['values'] = [];
+				}
+			} catch (Exception $e) {
+				$this->bFormRedrawNeeded = true;
+			}
+		}
+		if (in_array('group_by', $aUpdatedFields)) {
+			$this->bFormRedrawNeeded = true;
+			$this->aProperties['values'] = [];
+		}
+
+		return parent::Update($aValues, $aUpdatedFields);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyFromDOMNode($oDOMNode, $sProperty)
+	{
+		if ($sProperty == 'icon') {
+			$oIconField = $this->oModelReflection->GetIconSelectionField('icon');
+
+			return $oIconField->ValueFromDOMNode($oDOMNode);
+		} else {
+			return parent::PropertyFromDOMNode($oDOMNode, $sProperty);
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyToDOMNode($oDOMNode, $sProperty, $value)
+	{
+		if ($sProperty == 'icon') {
+			$oIconField = $this->oModelReflection->GetIconSelectionField('icon');
+			$oIconField->ValueToDOMNode($oDOMNode, $value);
+		} else {
+			parent::PropertyToDOMNode($oDOMNode, $sProperty, $value);
+		}
+	}
+}

sources/Application/Dashlet/Core/DashletHeaderStatic.php

@@ -0,0 +1,98 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletFactory;
+use DesignerForm;
+use DesignerTextField;
+use Dict;
+use utils;
+
+class DashletHeaderStatic extends Dashlet
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['title'] = Dict::S('UI:DashletHeaderStatic:Prop-Title:Default');
+		$oIconSelect = $this->oModelReflection->GetIconSelectionField('icon');
+		$this->aProperties['icon'] = $oIconSelect->GetDefaultValue('Contact');
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sTitle = $this->aProperties['title'];
+		$sIcon = $this->aProperties['icon'];
+
+		$oIconSelect = $this->oModelReflection->GetIconSelectionField('icon');
+		$sIconPath = '';
+		if (utils::IsNotNullOrEmptyString($sIcon)) {
+			$sIconPath = utils::HtmlEntities($oIconSelect->MakeFileUrl($sIcon));
+		}
+
+		return DashletFactory::MakeForDashletHeaderStatic($this->oModelReflection->DictString($sTitle), $sIconPath);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletHeaderStatic:Prop-Title'), $this->aProperties['title']);
+		$oForm->AddField($oField);
+
+		$oField = $this->oModelReflection->GetIconSelectionField('icon', Dict::S('UI:DashletHeaderStatic:Prop-Icon'), $this->aProperties['icon']);
+		$oField->AddAllowedValue(['value' => '', 'label' => Dict::S('UI:DashletIcon:None'), 'icon' => '']);
+		$oForm->AddField($oField);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyFromDOMNode($oDOMNode, $sProperty)
+	{
+		if ($sProperty == 'icon') {
+			$oIconField = $this->oModelReflection->GetIconSelectionField('icon');
+
+			return $oIconField->ValueFromDOMNode($oDOMNode);
+		} else {
+			return parent::PropertyFromDOMNode($oDOMNode, $sProperty);
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyToDOMNode($oDOMNode, $sProperty, $value)
+	{
+		if ($sProperty == 'icon') {
+			$oIconField = $this->oModelReflection->GetIconSelectionField('icon');
+			$oIconField->ValueToDOMNode($oDOMNode, $value);
+		} else {
+			parent::PropertyToDOMNode($oDOMNode, $sProperty, $value);
+		}
+	}
+}

sources/Application/Dashlet/Core/DashletObjectList.php

@@ -0,0 +1,176 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use DBObjectSearch;
+use DesignerBooleanField;
+use DesignerForm;
+use DesignerHiddenField;
+use DesignerLongTextField;
+use DesignerTextField;
+use Dict;
+use DisplayBlock;
+use MetaModel;
+use utils;
+
+class DashletObjectList extends Dashlet
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['title'] = '';
+		$this->aProperties['query'] = 'SELECT Contact';
+		$this->aProperties['menu'] = false;
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \OQLException
+	 * @throws \CoreException
+	 * @throws \ArchivedObjectException
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sTitle = $this->aProperties['title'];
+		$sShowMenu = $this->aProperties['menu'] ? '1' : '0';
+		$oFilter = $this->GetDBSearch($aExtraParams);
+		$sClass = $oFilter->GetClass();
+		//$oPanel = PanelUIBlockFactory::MakeForClass($sClass, Dict::S($sTitle))
+		//	->AddCSSClass('ibo-datatable-panel');
+
+		$oBlock = new DisplayBlock($oFilter, 'list');
+		$aParams = [
+			'menu'                => $sShowMenu,
+			'table_id'            => self::APPUSERPREFERENCES_PREFIX.$this->sId,
+			'surround_with_panel' => true,
+			'max_height'          => '500px',
+			"panel_title"         => Dict::S($sTitle),
+			"panel_class"         => $sClass,
+		];
+		$sBlockId = 'block_'.$this->sId.($bEditMode ? '_edit' : ''); // make a unique id (edition occurring in the same DOM)
+		//$oBlock->DisplayIntoContentBlock($oPanel, $oPage, $sBlockId, array_merge($aExtraParams, $aParams));
+
+		$oPanel = $oBlock->GetDisplay($oPage, $sBlockId, array_merge($aExtraParams, $aParams));
+
+		return $oPanel;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$oDashletContainer = new DashletContainer($this->sId, ['dashlet-content']);
+		$sTitle = $this->aProperties['title'];
+		$sQuery = $this->aProperties['query'];
+		$bShowMenu = $this->aProperties['menu'];
+		$sHtmlTitle = utils::HtmlEntities($this->oModelReflection->DictString($sTitle));
+		if ($sHtmlTitle != '') {
+			$sHtmlTitle = '<h1>'.$sHtmlTitle.'</h1>';
+		}
+		$oQuery = $this->oModelReflection->GetQuery($sQuery);
+		$sClass = $oQuery->GetClass();
+		$sId = $this->sId;
+		$sMessage = Dict::S('UI:NoObjectToDisplay');
+		$sMenu = '';
+		if ($bShowMenu) {
+			$sMenu = '<p><a>'.Dict::Format('UI:ClickToCreateNew', $this->oModelReflection->GetName($sClass)).'</a></p>';
+		}
+
+		$sHtml = <<<HTML
+<div class="dashlet-content">
+<h1>$sHtmlTitle</h1>
+<div id="block_fake_$sId" class="display_block">
+<p>$sMessage</p>
+$sMenu
+</div>
+</div>
+HTML;
+
+		$oDashletContainer->AddHtml($sHtml);
+
+		return $oDashletContainer;
+	}
+
+	public function GetDBSearch($aExtraParams = [])
+	{
+		$sQuery = $this->aProperties['query'];
+		if (isset($aExtraParams['query_params'])) {
+			$aQueryParams = $aExtraParams['query_params'];
+		} elseif (isset($aExtraParams['this->class']) && isset($aExtraParams['this->id'])) {
+			$oObj = MetaModel::GetObject($aExtraParams['this->class'], $aExtraParams['this->id']);
+			$aQueryParams = $oObj->ToArgsForQuery();
+		} else {
+			$aQueryParams = [];
+		}
+
+		return DBObjectSearch::FromOQL($sQuery, $aQueryParams);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletObjectList:Prop-Title'), $this->aProperties['title']);
+		$oForm->AddField($oField);
+
+		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $this->aProperties['query']);
+		$oField->SetMandatory();
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
+		$oForm->AddField($oField);
+
+		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
+		$oForm->AddField($oField);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public static function CanCreateFromOQL()
+	{
+		return true;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFieldsFromOQL(DesignerForm $oForm, $sOQL = null)
+	{
+		$oField = new DesignerTextField('title', Dict::S('UI:DashletObjectList:Prop-Title'), '');
+		$oForm->AddField($oField);
+
+		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $sOQL);
+		$oField->SetMandatory();
+		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
+		$oForm->AddField($oField);
+
+		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
+		$oForm->AddField($oField);
+	}
+}

sources/Application/Dashlet/Core/DashletPlainText.php

@@ -0,0 +1,63 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletFactory;
+use DesignerForm;
+use DesignerLongTextField;
+use Dict;
+use utils;
+
+class DashletPlainText extends Dashlet
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->aProperties['text'] = Dict::S('UI:DashletPlainText:Prop-Text:Default');
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sText = $this->aProperties['text'];
+		$sText = utils::EscapeHtml(Dict::S($sText));
+		$sText = str_replace(["\r\n", "\n", "\r"], "<br/>", $sText);
+
+		$sId = 'plaintext_'.($bEditMode ? 'edit_' : '').$this->sId;
+
+		return DashletFactory::MakeForDashletPlainText($sText, $sId);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerLongTextField('text', Dict::S('UI:DashletPlainText:Prop-Text'), $this->aProperties['text']);
+		$oField->SetMandatory();
+		$oForm->AddField($oField);
+	}
+}

sources/Application/Dashlet/Core/DashletProxy.php

@@ -0,0 +1,75 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Dict;
+use utils;
+
+class DashletProxy extends DashletUnknown
+{
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+
+		// Remove DashletUnknown class
+		if (($key = array_search('dashlet-unknown', $this->aCSSClasses)) !== false) {
+			unset($this->aCSSClasses[$key]);
+		}
+
+		$this->aCSSClasses[] = 'dashlet-proxy';
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		// This should never be called.
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+		$oDashletContainer->AddHtml('<div>This dashlet is not supposed to be rendered as it is just a proxy for third-party widgets.</div>');
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sIconUrl = utils::HtmlEntities(utils::GetAbsoluteUrlAppRoot().'images/dashlet-proxy.png');
+		$sExplainText = Dict::Format('UI:DashletProxy:RenderNoDataText:Edit', $this->GetDashletType());
+
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$sHtml = '';
+		$sHtml .= '<div class="dashlet-pxy-image"><img src="'.$sIconUrl.'" /></div>';
+		$sHtml .= '<div class="dashlet-pxy-text">'.$sExplainText.'</div>';
+
+		$oDashletContainer->AddHtml($sHtml);
+
+		return $oDashletContainer;
+	}
+}

sources/Application/Dashlet/Core/DashletUnknown.php

@@ -0,0 +1,227 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet\Core;
+
+use Combodo\iTop\Application\Dashlet\Dashlet;
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use DesignerForm;
+use DesignerXMLField;
+use Dict;
+use DOMDocument;
+use DOMElement;
+use DOMFormatException;
+use utils;
+
+/**
+ * Class DashletUnknown
+ *
+ * Used as a fallback in iTop for unknown dashlet classes.
+ *
+ * @since 2.5.0
+ */
+class DashletUnknown extends Dashlet
+{
+	protected static $aClassList = null;
+
+	protected $sOriginalDashletXML;
+
+	/**
+	 * @inheritdoc
+	 */
+	public function __construct($oModelReflection, $sId)
+	{
+		parent::__construct($oModelReflection, $sId);
+		$this->sOriginalDashletXML = '';
+		$this->aCSSClasses[] = 'dashlet-unknown';
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function FromDOMNode($oDOMNode)
+	{
+		// Parent won't do anything as there is no property declared
+		parent::FromDOMNode($oDOMNode);
+
+		// Build properties from XML
+		$this->sOriginalDashletXML = "";
+		foreach ($oDOMNode->childNodes as $oDOMChildNode) {
+			if ($oDOMChildNode instanceof DOMElement) {
+				$sProperty = $oDOMChildNode->tagName;
+
+				// For all properties but "rank" as it is handle by the dashboard.
+				if ($sProperty !== 'rank') {
+					// We need to initialize the property before setting it, otherwise it will guessed as NULL and not used.
+					$this->aProperties[$sProperty] = '';
+					$this->aProperties[$sProperty] = $this->PropertyFromDOMNode($oDOMChildNode, $sProperty);
+
+					// And build the original XML
+					$this->sOriginalDashletXML .= $oDOMChildNode->ownerDocument->saveXML($oDOMChildNode)."\n";
+				}
+			}
+		}
+
+		$this->OnUpdate();
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 * @throws \DOMFormatException
+	 */
+	public function ToDOMNode($oDOMNode)
+	{
+		$oDoc = new DOMDocument();
+		libxml_clear_errors();
+		$oDoc->loadXML('<root>'.$this->sOriginalDashletXML.'</root>');
+		$aErrors = libxml_get_errors();
+		if (count($aErrors) > 0) {
+			throw new DOMFormatException('Dashlet definition not correctly formatted!');
+		}
+		foreach ($oDoc->documentElement->childNodes as $oDOMChildNode) {
+			$oPropNode = $oDOMNode->ownerDocument->importNode($oDOMChildNode, true);
+			$oDOMNode->appendChild($oPropNode);
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \DOMException
+	 */
+	public function FromParams($aParams)
+	{
+		// For unknown dashlet, parameters are not parsed but passed as a raw xml
+		if (array_key_exists('xml', $aParams)) {
+			// A namespace must be present for the "xsi:type" attribute, otherwise a warning will be thrown.
+			$sXML = '<dashlet id="'.$aParams['dashlet_id'].'" xsi:type="'.$aParams['dashlet_type'].'" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'.$aParams['xml'].'</dashlet>';
+			$this->FromXml($sXML);
+		}
+		$this->OnUpdate();
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 */
+	public function Render($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sIconUrl = utils::HtmlEntities(utils::GetAbsoluteUrlAppRoot().'images/dashlet-unknown.png');
+		$sExplainText = ($bEditMode) ? Dict::Format('UI:DashletUnknown:RenderText:Edit', $this->GetDashletType()) : Dict::S('UI:DashletUnknown:RenderText:View');
+
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$oDashletContainer->AddHtml('<div class="dashlet-ukn-image"><img src="'.$sIconUrl.'" /></div><div class="dashlet-ukn-text">'.$sExplainText.'</div>');
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \Exception
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		$sIconUrl = utils::HtmlEntities(utils::GetAbsoluteUrlAppRoot().'images/dashlet-unknown.png');
+		$sExplainText = Dict::Format('UI:DashletUnknown:RenderNoDataText:Edit', $this->GetDashletType());
+
+		$oDashletContainer = new DashletContainer(null, ['dashlet-content']);
+
+		$oDashletContainer->AddHtml('<div class="dashlet-ukn-image"><img src="'.$sIconUrl.'" /></div><div class="dashlet-ukn-text">'.$sExplainText.'</div>');
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetForm($aInfo = [])
+	{
+		if (isset($aInfo['configuration']) && empty($this->sOriginalDashletXML)) {
+			$this->sOriginalDashletXML = $aInfo['configuration'];
+		}
+
+		return parent::GetForm($aInfo);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function GetPropertiesFields(DesignerForm $oForm)
+	{
+		$oField = new DesignerXMLField('xml', Dict::S('UI:DashletUnknown:Prop-XMLConfiguration'), $this->sOriginalDashletXML);
+		$oForm->AddField($oField);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyFromDOMNode($oDOMNode, $sProperty)
+	{
+		$bHasSubProperties = false;
+		foreach ($oDOMNode->childNodes as $oDOMChildNode) {
+			if ($oDOMChildNode->nodeType === XML_ELEMENT_NODE) {
+				$bHasSubProperties = true;
+				break;
+			}
+		}
+
+		if ($bHasSubProperties) {
+			$sTmp = $oDOMNode->ownerDocument->saveXML($oDOMNode, LIBXML_NOENT);
+			$sTmp = trim(preg_replace("/(<".$oDOMNode->tagName."[^>]*>|<\/".$oDOMNode->tagName.">)/", "", $sTmp));
+
+			return $sTmp;
+		} else {
+			return parent::PropertyFromDOMNode($oDOMNode, $sProperty);
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	protected function PropertyToDOMNode($oDOMNode, $sProperty, $value)
+	{
+		// Save subnodes
+		if (preg_match('/<(.*)>/', $value)) {
+			/** @var \DOMDocumentFragment $oDOMFragment */
+			$oDOMFragment = $oDOMNode->ownerDocument->createDocumentFragment();
+			$oDOMFragment->appendXML($value);
+			$oDOMNode->appendChild($oDOMFragment);
+		} else {
+			parent::PropertyToDOMNode($oDOMNode, $sProperty, $value);
+		}
+	}
+
+	/**
+	 * @inheritdoc
+	 *
+	 * @throws \DOMException
+	 */
+	public function Update($aValues, $aUpdatedFields)
+	{
+		$this->FromParams($aValues);
+
+		// OnUpdate() already done in FromParams()
+		return $this;
+	}
+}

sources/Application/Dashlet/Dashlet.php

@@ -0,0 +1,517 @@
+<?php
+
+// Copyright (C) 2012-2024 Combodo SAS
+//
+//   This file is part of iTop.
+//
+//   iTop is free software; you can redistribute it and/or modify
+//   it under the terms of the GNU Affero General Public License as published by
+//   the Free Software Foundation, either version 3 of the License, or
+//   (at your option) any later version.
+//
+//   iTop is distributed in the hope that it will be useful,
+//   but WITHOUT ANY WARRANTY; without even the implied warranty of
+//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//   GNU Affero General Public License for more details.
+//
+//   You should have received a copy of the GNU Affero General Public License
+//   along with iTop. If not, see <http://www.gnu.org/licenses/>
+
+namespace Combodo\iTop\Application\Dashlet;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletContainer;
+use Combodo\iTop\Application\UI\Base\iUIBlock;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use Combodo\iTop\Application\WebPage\WebPage;
+use Combodo\iTop\DesignDocument;
+use Combodo\iTop\DesignElement;
+use Combodo\iTop\PropertyType\Serializer\XMLNormalizer;
+use DesignerForm;
+use DesignerHiddenField;
+use Dict;
+use DOMException;
+use DOMNode;
+use Exception;
+use ModelReflection;
+use OQLException;
+use UnknownClassOqlException;
+use utils;
+
+/**
+ * Base class for all 'dashlets' (i.e. widgets to be inserted into a dashboard)
+ *
+ * @copyright   Copyright (C) 2010-2024 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+abstract class Dashlet
+{
+	/** @var string */
+	public const APPUSERPREFERENCES_PREFIX = 'Dashlet';
+
+	protected $oModelReflection;
+	protected $sId;
+	protected $bRedrawNeeded;
+	protected $bFormRedrawNeeded;
+	protected $aProperties; // array of {property => value}
+	protected $aCSSClasses;
+	protected $sDashletType;
+	protected array $aDefinition;
+
+	/**
+	 * Dashlet constructor.
+	 *
+	 * @param \ModelReflection $oModelReflection
+	 * @param string $sId
+	 * @param string|null $sDashletType
+	 */
+	public function __construct(ModelReflection $oModelReflection, $sId)
+	{
+		$this->oModelReflection = $oModelReflection;
+		$this->sId = $sId;
+		$this->bRedrawNeeded = true; // By default: redraw each time a property changes
+		$this->bFormRedrawNeeded = false; // By default: no need to redraw the form (independent fields)
+		$this->aProperties = []; // By default: there is no property
+		$this->aCSSClasses = ['ibo-dashlet'];
+		$this->sDashletType = get_class($this);
+	}
+
+	/**
+	 * Assuming that a property has the type of its default value, set in the constructor
+	 *
+	 * @param string $sProperty
+	 * @param string $sValue
+	 *
+	 * @return mixed
+	 */
+	public function Str2Prop($sProperty, $sValue)
+	{
+		$refValue = $this->aProperties[$sProperty];
+		$sRefType = gettype($refValue);
+
+		if (gettype($sValue) == $sRefType) {
+			// Do not change anything in that case!
+			$ret = $sValue;
+		} elseif ($sRefType == 'boolean') {
+			$ret = ($sValue == 'true');
+		} elseif ($sRefType == 'array') {
+			$ret = explode(',', $sValue);
+		} elseif (is_array($sValue)) {
+			$ret = $sValue;
+		} else {
+			$ret = $sValue;
+			settype($ret, $sRefType);
+		}
+
+		return $ret;
+	}
+
+	/**
+	 * @param mixed $value
+	 *
+	 * @return string
+	 */
+	public function Prop2Str($value)
+	{
+		$sType = gettype($value);
+		if ($sType == 'boolean') {
+			$sRet = $value ? 'true' : 'false';
+		} elseif ($sType == 'array') {
+			$sRet = implode(',', $value);
+		} else {
+			$sRet = (string)$value;
+		}
+
+		return $sRet;
+	}
+
+	protected function OnUpdate()
+	{
+	}
+
+	/**
+	 */
+	public function FromDOMNode(DesignElement $oDOMNode)
+	{
+		foreach ($this->aProperties as $sProperty => $value) {
+			$oPropNode = $oDOMNode->getElementsByTagName($sProperty)->item(0);
+			if ($oPropNode != null) {
+				$this->aProperties[$sProperty] = $this->PropertyFromDOMNode($oPropNode, $sProperty);
+			}
+		}
+		$this->OnUpdate();
+	}
+
+	/**
+	 * @param \DOMElement $oDOMNode
+	 */
+	public function ToDOMNode($oDOMNode)
+	{
+		foreach ($this->aProperties as $sProperty => $value) {
+			$oPropNode = $oDOMNode->ownerDocument->createElement($sProperty);
+			$oDOMNode->appendChild($oPropNode);
+			$this->PropertyToDOMNode($oPropNode, $sProperty, $value);
+		}
+	}
+
+	/**
+	 * @param \DOMElement $oDOMNode
+	 * @param string $sProperty
+	 *
+	 * @return mixed
+	 */
+	protected function PropertyFromDOMNode($oDOMNode, $sProperty)
+	{
+		$res = $this->Str2Prop($sProperty, $oDOMNode->textContent);
+
+		return $res;
+	}
+
+	/**
+	 * @param \DOMElement $oDOMNode
+	 * @param string $sProperty
+	 * @param mixed $value
+	 */
+	protected function PropertyToDOMNode($oDOMNode, $sProperty, $value)
+	{
+		$sXmlValue = $this->Prop2Str($value);
+		$oTextNode = $oDOMNode->ownerDocument->createTextNode($sXmlValue);
+		$oDOMNode->appendChild($oTextNode);
+	}
+
+	/**
+	 * @param string $sXml
+	 *
+	 * @throws \DOMException
+	 */
+	public function FromXml($sXml)
+	{
+		$oDomDoc = new DesignDocument('1.0', 'UTF-8');
+		libxml_clear_errors();
+		$oDomDoc->loadXml($sXml);
+		$aErrors = libxml_get_errors();
+		if (count($aErrors) > 0) {
+			throw new DOMException("Malformed XML");
+		}
+
+		/** @var DesignElement $oDOMNode */
+		$oDOMNode = $oDomDoc->firstChild;
+		$this->FromDOMNode($oDOMNode);
+	}
+
+	/**
+	 * @param array $aParams
+	 */
+	public function FromParams($aParams)
+	{
+		foreach ($this->aProperties as $sProperty => $value) {
+			if (array_key_exists($sProperty, $aParams)) {
+				$this->aProperties[$sProperty] = $aParams[$sProperty];
+			}
+		}
+		$this->OnUpdate();
+	}
+
+	public function FromDenormalizedParams(array $aDenormalizedParams)
+	{
+		$this->aProperties = XMLNormalizer::GetInstance()->Normalize($aDenormalizedParams, $this->sDashletType, 'Dashlet');
+		$this->OnUpdate();
+	}
+
+	/**
+	 * @return array Rel. path to the app. root of the JS files required by the dashlet
+	 * @since 3.0.0
+	 */
+	public function GetJSFilesRelPaths(): array
+	{
+		return [];
+	}
+
+	/**
+	 * @return array Rel. path to the app. root of the CSS files required by the dashlet
+	 * @since 3.0.0
+	 */
+	public function GetCSSFilesRelPaths(): array
+	{
+		return [];
+	}
+
+	/**
+	 * @param WebPage $oPage
+	 * @param bool $bEditMode
+	 * @param bool $bEnclosingDiv
+	 * @param array $aExtraParams
+	 */
+	public function DoRender($oPage, $bEditMode = false, $bEnclosingDiv = true, $aExtraParams = []): UIBlock
+	{
+		$sId = $this->GetID();
+
+		if ($bEnclosingDiv) {
+			if ($bEditMode) {
+				$oDashletContainer = new DashletContainer("dashlet_{$sId}");
+			} else {
+				$oDashletContainer = new DashletContainer();
+			}
+			$oDashletContainer->AddCSSClasses($this->aCSSClasses);
+		} else {
+			$oDashletContainer = new DashletContainer();
+			$oDashletContainer->AddCSSClasses($this->aCSSClasses);
+		}
+
+		$oDashletContainer->AddMultipleJsFilesRelPaths($this->GetJSFilesRelPaths());
+		$oDashletContainer->AddMultipleCssFilesRelPaths($this->GetCSSFilesRelPaths());
+
+		try {
+			if (get_class($this->oModelReflection) == 'ModelReflectionRuntime') {
+				$oBlock = $this->Render($oPage, $bEditMode, $aExtraParams);
+			} else {
+				$oBlock = $this->RenderNoData($oPage, $bEditMode, $aExtraParams);
+			}
+			$oDashletContainer->AddSubBlock($oBlock);
+		} catch (UnknownClassOqlException $e) {
+			// Maybe the class is part of a non-installed module, fail silently
+			// Except in Edit mode
+			if ($bEditMode) {
+				$oDashletContainer->AddCSSClass("dashlet-content");
+				$oDashletContainer->AddHtml('<h2>'.$e->GetUserFriendlyDescription().'</h2>');
+			}
+		} catch (OqlException $e) {
+			$oDashletContainer->AddCSSClass("dashlet-content");
+			$oDashletContainer->AddHtml('<p>'.utils::HtmlEntities($e->GetUserFriendlyDescription()).'</p>');
+		} catch (Exception $e) {
+			$oDashletContainer->AddCSSClass("dashlet-content");
+			$oDashletContainer->AddHtml('<p>'.$e->getMessage().'</p>');
+		}
+
+		if ($bEditMode) {
+			$sClass = $this->sDashletType;
+			$sType = $this->sDashletType;
+			$oPage->add_ready_script(
+				<<<EOF
+$('#dashlet_$sId').dashlet({dashlet_id: '$sId', dashlet_class: '$sClass', 'dashlet_type': '$sType'});
+EOF
+			);
+		}
+
+		return $oDashletContainer;
+	}
+
+	/**
+	 * @param string $sId
+	 */
+	public function SetID($sId)
+	{
+		$this->sId = $sId;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetID()
+	{
+		return $this->sId;
+	}
+
+	/**
+	 * @param WebPage $oPage
+	 * @param bool $bEditMode
+	 * @param array $aExtraParams
+	 *
+	 * @return iUIBlock
+	 */
+	abstract public function Render($oPage, $bEditMode = false, $aExtraParams = []);
+
+	/**
+	 * Rendering without the real data
+	 *
+	 * @param WebPage $oPage
+	 * @param bool $bEditMode
+	 * @param array $aExtraParams
+	 *
+	 * @return iUIBlock
+	 */
+	public function RenderNoData($oPage, $bEditMode = false, $aExtraParams = [])
+	{
+		return $this->Render($oPage, $bEditMode, $aExtraParams);
+	}
+
+	/**
+	 * @param \DesignerForm $oForm
+	 *
+	 * @return mixed
+	 */
+	abstract public function GetPropertiesFields(\DesignerForm $oForm);
+
+	/**
+	 * @param \DOMNode $oContainerNode
+	 */
+	public function ToXml(DOMNode $oContainerNode)
+	{
+
+	}
+
+	/**
+	 * @param array $aValues
+	 * @param array $aUpdatedFields
+	 *
+	 * @return Dashlet
+	 */
+	public function Update($aValues, $aUpdatedFields)
+	{
+		foreach ($aUpdatedFields as $sProp) {
+			if (array_key_exists($sProp, $this->aProperties)) {
+				$this->aProperties[$sProp] = $this->Str2Prop($sProp, $aValues[$sProp]);
+			}
+		}
+		$this->OnUpdate();
+
+		return $this;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public function IsRedrawNeeded()
+	{
+		return $this->bRedrawNeeded;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public function IsFormRedrawNeeded()
+	{
+		return $this->bFormRedrawNeeded;
+	}
+
+	/**
+	 * @param array $aInfo
+	 *
+	 * @return \DesignerForm
+	 */
+	public function GetForm($aInfo = [])
+	{
+		$oForm = new DesignerForm();
+		$sPrefix = "dashlet_".$this->GetID();
+		$oForm->SetPrefix($sPrefix);
+		$oForm->SetHierarchyPath($sPrefix);
+		$oForm->SetParamsContainer('params');
+
+		$this->GetPropertiesFields($oForm);
+
+		$oDashletClassField = new DesignerHiddenField('dashlet_class', '', get_class($this));
+		$oForm->AddField($oDashletClassField);
+
+		$oDashletTypeField = new DesignerHiddenField('dashlet_type', '', $this->sDashletType);
+		$oForm->AddField($oDashletTypeField);
+
+		$oDashletIdField = new DesignerHiddenField('dashlet_id', '', $this->GetID());
+		$oForm->AddField($oDashletIdField);
+
+		return $oForm;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public static function IsVisible()
+	{
+		return true;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public static function CanCreateFromOQL()
+	{
+		return false;
+	}
+
+	/**
+	 * @param \DesignerForm $oForm
+	 * @param string|null $sOQL
+	 */
+	public function GetPropertiesFieldsFromOQL(DesignerForm $oForm, $sOQL = null)
+	{
+		// Default: do nothing since it's not supported
+	}
+
+	/**
+	 * @param string $sOql
+	 *
+	 * @return array
+	 */
+	protected function GetGroupByOptions($sOql)
+	{
+		$aGroupBy = [];
+		try {
+			$oQuery = $this->oModelReflection->GetQuery($sOql);
+			$sClass = $oQuery->GetClass();
+			foreach ($this->oModelReflection->ListAttributes($sClass) as $sAttCode => $sAttType) {
+				// For external fields, find the real type of the target
+				$sExtFieldAttCode = $sAttCode;
+				$sTargetClass = $sClass;
+				while (is_a($sAttType, 'AttributeExternalField', true)) {
+					$sExtKeyAttCode = $this->oModelReflection->GetAttributeProperty($sTargetClass, $sExtFieldAttCode, 'extkey_attcode');
+					$sTargetAttCode = $this->oModelReflection->GetAttributeProperty($sTargetClass, $sExtFieldAttCode, 'target_attcode');
+					$sTargetClass = $this->oModelReflection->GetAttributeProperty($sTargetClass, $sExtKeyAttCode, 'targetclass');
+					$aTargetAttCodes = $this->oModelReflection->ListAttributes($sTargetClass);
+					$sAttType = $aTargetAttCodes[$sTargetAttCode];
+					$sExtFieldAttCode = $sTargetAttCode;
+				}
+
+				$aForbidenAttType = [
+					'AttributeLinkedSet',
+					'AttributeFriendlyName',
+
+					'iAttributeNoGroupBy', //we cannot only use iAttributeNoGroupBy since this method is also used by the designer who do not have access to the classes' PHP reflection API. So the known classes has to be listed altogether
+					'AttributeOneWayPassword',
+					'AttributeEncryptedString',
+					'AttributePassword',
+				];
+				foreach ($aForbidenAttType as $sForbidenAttType) {
+					if (is_a($sAttType, $sForbidenAttType, true)) {
+						continue 2;
+					}
+				}
+
+				$sLabel = $this->oModelReflection->GetLabel($sClass, $sAttCode);
+				if (!in_array($sLabel, $aGroupBy)) {
+					$aGroupBy[$sAttCode] = $sLabel;
+
+					if (is_a($sAttType, 'AttributeDateTime', true)) {
+						$aGroupBy[$sAttCode.':hour'] = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Select-Hour', $sLabel);
+						$aGroupBy[$sAttCode.':month'] = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Select-Month', $sLabel);
+						$aGroupBy[$sAttCode.':day_of_week'] = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Select-DayOfWeek', $sLabel);
+						$aGroupBy[$sAttCode.':day_of_month'] = Dict::Format('UI:DashletGroupBy:Prop-GroupBy:Select-DayOfMonth', $sLabel);
+					}
+				}
+			}
+			asort($aGroupBy);
+		} catch (Exception $e) {
+			// Fallback in case of OQL problem
+		}
+
+		return $aGroupBy;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetDashletType()
+	{
+		return $this->sDashletType;
+	}
+
+	/**
+	 * @param string $sDashletType
+	 */
+	public function SetDashletType($sDashletType)
+	{
+		$this->sDashletType = $sDashletType;
+	}
+
+	public function GetDenormalizedProperties(): ?array
+	{
+		return XMLNormalizer::GetInstance()->Denormalize($this->aProperties, $this->sDashletType, 'Dashlet');
+	}
+}

sources/Application/Dashlet/DashletException.php

@@ -0,0 +1,12 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashlet;
+
+class DashletException extends \Exception
+{
+}

sources/Application/Dashlet/DashletFactory.php

@@ -0,0 +1,49 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashlet;
+
+use Combodo\iTop\Application\Dashlet\Service\DashletService;
+use ModelReflectionRuntime;
+
+class DashletFactory
+{
+	private static DashletFactory $oInstance;
+	private $oModelReflectionRuntime;
+
+	protected function __construct()
+	{
+		$this->oModelReflectionRuntime = new ModelReflectionRuntime();
+	}
+
+	final public static function GetInstance(): DashletFactory
+	{
+		if (!isset(static::$oInstance)) {
+			static::$oInstance = new DashletFactory();
+		}
+
+		return static::$oInstance;
+	}
+
+	public function SetModelReflectionRuntime(ModelReflectionRuntime $oModelReflectionRuntime): void
+	{
+		$this->oModelReflectionRuntime = $oModelReflectionRuntime;
+	}
+
+	public function CreateDashlet(string $sClass, string $sId): Dashlet
+	{
+		if (!DashletService::GetInstance()->IsDashletAvailable($sClass)) {
+			throw new DashletException("Dashlet ".json_encode($sClass)." is not available");
+		}
+
+		/** @var Dashlet $oDashlet */
+		$oDashlet = new $sClass($this->oModelReflectionRuntime, $sId);
+		$oDashlet->SetDashletType($sClass);
+
+		return $oDashlet;
+	}
+}

sources/Application/Dashlet/Service/DashletService.php

@@ -0,0 +1,143 @@
+<?php
+
+/*
+ * @copyright   Copyright (C) 2010-2026 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\Dashlet\Service;
+
+use Combodo\iTop\Application\Dashlet\DashletException;
+use Combodo\iTop\DesignDocument;
+use Combodo\iTop\DesignElement;
+use Dict;
+use utils;
+
+class DashletService
+{
+	private static DashletService $oInstance;
+	private array $aDashlets = [];
+
+	protected function __construct()
+	{
+	}
+
+	final public static function GetInstance(): DashletService
+	{
+		if (!isset(static::$oInstance)) {
+			static::$oInstance = new DashletService();
+		}
+
+		return static::$oInstance;
+	}
+
+	/**
+	 * @return array
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 * @throws \DOMFormatException
+	 */
+	public function GetAvailableDashlets(): array
+	{
+		$this->InitDashletDefinitions();
+
+		return $this->aDashlets;
+	}
+
+	/**
+	 * @param string $sXMLContent
+	 *
+	 * @return \Combodo\iTop\DesignElement
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 */
+	private function GetDomNode(string $sXMLContent): DesignElement
+	{
+		$oDoc = new DesignDocument();
+		libxml_clear_errors();
+		$oDoc->loadXML($sXMLContent);
+		$aErrors = libxml_get_errors();
+		if (count($aErrors) > 0) {
+			throw new DashletException('Dashlets definition not correctly formatted!');
+		}
+
+		/** @var \Combodo\iTop\DesignElement $oRoot */
+		$oRoot = $oDoc->firstChild;
+
+		return $oRoot;
+	}
+
+	/**
+	 * @return string
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 */
+	private function GetXMLContent(): string
+	{
+		$sPath = utils::GetAbsoluteModulePath('core')."dashlets.xml";
+		if (!file_exists($sPath)) {
+			throw new DashletException("Dashlets definition not present");
+		}
+
+		return file_get_contents($sPath);
+	}
+
+	/**
+	 * @param string $sClass
+	 *
+	 * @return bool
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 * @throws \DOMFormatException
+	 */
+	public function IsDashletAvailable(string $sClass)
+	{
+		$this->InitDashletDefinitions();
+
+		return array_key_exists($sClass, $this->aDashlets);
+	}
+
+	/**
+	 * @param string $sClass
+	 *
+	 * @return array
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 */
+	public function GetDashletDefinition(string $sClass): array
+	{
+		if ($this->IsDashletAvailable($sClass)) {
+			return $this->aDashlets[$sClass];
+		}
+
+		throw new DashletException('Dashlets definition '.json_encode($sClass).' not present');
+	}
+
+	/**
+	 * @return void
+	 * @throws \Combodo\iTop\Application\Dashlet\DashletException
+	 * @throws \DOMFormatException
+	 */
+	private function InitDashletDefinitions(): void
+	{
+		if (count($this->aDashlets) === 0) {
+			$this->aDashlets = [];
+
+			$oDashletsNode = $this->GetDomNode($this->GetXMLContent());
+			/** @var DesignElement $oDashletNode */
+			foreach ($oDashletsNode->getElementsByTagName('dashlet') as $oDashletNode) {
+				$sType = $oDashletNode->getAttribute('id');
+				$aInfo = [
+					'label'             => Dict::S($oDashletNode->GetChildText('label')),
+					'icon'              => $oDashletNode->GetChildText('icon'),
+					'description'       => Dict::S($oDashletNode->GetChildText('description')),
+					'min_width'         => intval($oDashletNode->GetChildText('min_width', '2')),
+					'min_height'        => intval($oDashletNode->GetChildText('min_height', '1')),
+					'preferred_width'   => intval($oDashletNode->GetChildText('preferred_width', '2')),
+					'preferred_height'  => intval($oDashletNode->GetChildText('preferred_height', '1')),
+					'can_create_by_oql' => boolval($oDashletNode->GetChildText('can_create_by_oql', 'false')),
+				];
+				$this->aDashlets[$sType] = $aInfo;
+			}
+
+			uasort($this->aDashlets, function ($a, $b) {
+				return strcmp($a['label'], $b['label']);
+			});
+		}
+	}
+}

sources/Application/UI/Base/Component/Dashlet/DashletWrapper.php

@@ -0,0 +1,61 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Component\Dashlet;
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use Dashlet;
+
+class DashletWrapper extends UIBlock
+{
+	public const BLOCK_CODE                     = 'ibo-dashlet-wrapper';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-wrapper';
+
+	protected DashletContainer $oDashletContainer;
+	protected $sDashletClass;
+	protected $sDashletId;
+	private array $aFormViewData;
+
+	public function __construct($oDashlet, string $sDashletClass, ?string $sDashletId = null, array $aFormViewData = [])
+	{
+		parent::__construct(null);
+
+		$this->oDashletContainer = $oDashlet;
+		$this->sDashletId = $sDashletId;
+		$this->sDashletClass = $sDashletClass;
+		$this->aFormViewData = $aFormViewData;
+	}
+
+	public function GetDashlet()
+	{
+		return $this->oDashletContainer;
+	}
+
+	public function GetDashletId(): ?string
+	{
+		return $this->sDashletId;
+	}
+
+	public function SetDashletId(?string $sDashletId): DashletWrapper
+	{
+		$this->sDashletId = $sDashletId;
+
+		return $this;
+	}
+
+	public function GetDashletClass(): ?string
+	{
+		return $this->sDashletClass;
+	}
+
+	public function SetDashletClass(?string $sDashletClass)
+	{
+		$this->sDashletClass = $sDashletClass;
+
+		return $this;
+	}
+
+	public function GetFormViewData()
+	{
+		return $this->aFormViewData;
+	}
+}

sources/Application/UI/Base/Component/TurboForm/TurboFormUIBlockFactory.php

@@ -51,21 +51,21 @@ class TurboFormUIBlockFactory extends AbstractUIBlockFactory
 	 *
 	 * @api
 	 *
-	 * @param string $sDashletId
+	 * @param string $sDashletClass
 	 * @param string|null $sId
 	 *
 	 * @return \Combodo\iTop\Application\UI\Base\Component\TurboForm\TurboForm
 	 * @throws \Combodo\iTop\Forms\Block\FormBlockException
 	 */
-	public static function MakeForDashletConfiguration(string $sDashletId, array $aData = [], string $sId = null): TurboForm
+	public static function MakeForDashletConfiguration(string $sDashletClass, array $aData = [], string $sId = null): TurboForm
 	{
-		$oBlockForm = FormBlockService::GetInstance()->GetFormBlockById($sDashletId, 'Dashlet');
+		$oBlockForm = FormBlockService::GetInstance()->GetFormBlockById($sDashletClass, 'Dashlet');
 		$oController = new FormsController();
 		$oBuilder = $oController->GetFormBuilder($oBlockForm, $aData);
 		$oForm = $oBuilder->getForm();
 
 		$oTurboForm = new TurboForm($oForm->createView(), $sId);
-		$oTurboForm->SetAction(utils::GetAbsoluteUrlAppRoot().'pages/UI.php?route=forms.dashlet_configuration&dashlet_code='.urlencode($sDashletId));
+		$oTurboForm->SetAction(utils::GetAbsoluteUrlAppRoot().'pages/UI.php?route=forms.dashlet_configuration&dashlet_class='.urlencode($sDashletClass));
 
 		return $oTurboForm;
 	}

sources/Application/UI/Base/Layout/Dashboard/DashboardGrid.php

@@ -0,0 +1,64 @@
+<?php
+
+/**
+ * @copyright   Copyright (C) 2010-2025 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\Dashboard;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletWrapper;
+use Combodo\iTop\Application\UI\Base\tJSRefreshCallback;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+class DashboardGrid extends UIBlock
+{
+	use tJSRefreshCallback;
+
+	public const BLOCK_CODE                     = 'ibo-dashboard-grid';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashboard/grid/layout';
+
+	public const DEFAULT_JS_FILES_REL_PATH = [
+		'js/layouts/dashboard/dashboard-grid.js',
+	];
+
+	/** @var DashboardGridSlot[] */
+	protected $aSlots;
+
+	public function __construct(?string $sId = null)
+	{
+		parent::__construct($sId);
+		$this->aSlots = [];
+	}
+
+	/**
+	 * @return DashboardGridSlot[]
+	 */
+	public function GetSlots(): array
+	{
+		return $this->aSlots;
+	}
+
+	public function SetSlots(array $aSlots): DashboardGrid
+	{
+		$this->aSlots = $aSlots;
+
+		return $this;
+	}
+
+	public function AddSlot(DashboardGridSlot $oSlot): DashboardGrid
+	{
+		$this->aSlots[] = $oSlot;
+
+		return $this;
+	}
+
+	public function AddDashlet(UIBlock $oDashlet, string $sDashletId, string $sDashletClass, array $aFormViewData, ?int $iPositionX = null, ?int $iPositionY = null, ?int $iWidth = null, ?int $iHeight = null): DashboardGrid
+	{
+		$oWrapper = new DashletWrapper($oDashlet, $sDashletClass, $sDashletId, $aFormViewData);
+		$oSlot = new DashboardGridSlot(null, $oWrapper, $iPositionX, $iPositionY, $iWidth, $iHeight);
+		$this->AddSlot($oSlot);
+
+		return $this;
+	}
+}