@nsshunt/stsui 1.11.46 → 1.11.48

package/dist/index.cjs

@@ -1,559 +1,495 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EventEmitter = require("node:events");
-const blessed = require("blessed");
-class MenuBar {
-  listb = null;
-  // options := { screen: <blessed screen>, top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <call back func> } ] }
-  constructor(screen, options) {
-    const compoptions = {
-      parent: screen,
-      left: 0,
-      right: 0,
-      height: 1,
-      width: "shrink",
-      mouse: true,
-      keys: true,
-      autoCommandKeys: true,
-      scrollable: true,
-      style: {
-        fg: "yellow",
-        bg: "blue",
-        item: {
-          hover: {
-            fg: "white",
-            bg: "green"
-          }
-        },
-        selected: {
-          fg: "black",
-          bg: "yellow"
-        }
-      }
-    };
-    if (options.top === true) {
-      compoptions.top = 0;
-    } else {
-      compoptions.bottom = 0;
-    }
-    compoptions.commands = {};
-    options.menuitems.forEach((menuItem) => {
-      if (compoptions.commands) {
-        compoptions.commands[menuItem.text] = {
-          keys: [menuItem.key],
-          callback: menuItem.cb
-        };
-      }
-    });
-    this.listb = blessed.listbar(compoptions);
-  }
-  get listbar() {
-    return this.listb;
-  }
-}
-class STSUIFrame extends EventEmitter {
-  //export class STSUIFrame {
-  uiBoxes = {};
-  // { box: <<blessed box>>, boxHeader: <<blessed box>> }
-  screen = null;
-  #cursor = 0;
-  // panel index with the complete model data.
-  #renderPanelFn = null;
-  screenHeaderText = "...";
-  minRows = 1;
-  minCols = 1;
-  minWidth = 40;
-  minHeight = 7;
-  #cursorInfo = null;
-  sortInfo = null;
-  // Current sort mode UI box control
-  screenHeader = null;
-  uidata;
-  /**
-   * 
-   * @param {*} data The screen layout data. Schema: { title: <str>,
-   *   grid: { rows: <int>, cols: <int> }, 
-   *   panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, 
-   *      template: <handlebars func>, widgets: { [ { <prop_name>: <blessed widget> } ] } } ] }
-   */
-  constructor(data, renderPanelFn = null) {
-    super();
-    this.uidata = data;
-    this.#renderPanelFn = renderPanelFn;
-    this.SetupUI();
-  }
-  get blessed() {
-    return blessed;
-  }
-  /**
-   * 
-   * @param {number} position The index (0 based) for the panel item to be calculated
-   * @returns object with top, left, width and height correctly set
-   */
-  #CalcBoxPos = (panel) => {
-    if (!this.screen) return null;
-    if (!panel.pos) return null;
-    let screenHeight = this.screen.height;
-    if (this.uidata.menu !== null) {
-      screenHeight -= this.uidata.menu.length;
-    }
-    const screenWidth = this.screen.width;
-    const rows = this.uidata.grid.rows;
-    const cols = this.uidata.grid.cols;
-    const pos = panel.pos;
-    const colWidth = Math.floor(screenWidth / cols);
-    const rowHeight = Math.floor(screenHeight / rows);
-    let topoffset = 0;
-    if (this.uidata.menu !== null) {
-      for (const [, value] of Object.entries(this.uidata.menu)) {
-        if (value.top === true) {
-          topoffset = 1;
-          break;
-        }
-      }
-    }
-    const boxPos = {
-      top: pos.row * rowHeight + topoffset,
-      left: pos.col * colWidth,
-      width: colWidth * pos.colSpan,
-      height: rowHeight * pos.rowSpan
-    };
-    if (pos.col + pos.colSpan === cols) {
-      boxPos.width = screenWidth - pos.col * colWidth;
-    }
-    if (pos.row + pos.rowSpan === rows) {
-      boxPos.height = screenHeight - pos.row * rowHeight;
-    }
-    return boxPos;
-  };
-  #UpdateUIBoxPos = (panel, uiBox) => {
-    const pos = this.#CalcBoxPos(panel);
-    if (!pos) {
-      return;
-    }
-    uiBox.box.top = pos.top;
-    uiBox.box.left = pos.left;
-    uiBox.box.width = pos.width;
-    uiBox.box.height = pos.height;
-    uiBox.boxHeader.top = pos.top;
-    uiBox.boxHeader.left = pos.left + 2;
-    if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
-      for (const [, value] of Object.entries(panel.widgets)) {
-        if (value.widget === "log") {
-          const widget = uiBox.box.get(value.widget);
-          if (widget.position.top >= uiBox.box.height - 4) {
-            widget.position.top = uiBox.box.height - 4;
-          } else {
-            if (value.options.top) {
-              widget.position.top = value.options.top;
-            }
-          }
-        }
-      }
-    }
-  };
-  /**
-   * ReSize the grid layout
-   */
-  #ReSize = () => {
-    for (const [, value] of Object.entries(this.uiBoxes)) {
-      this.#UpdateUIBoxPos(value.box.get("panel"), value);
-    }
-  };
-  #UpdatePanelPosition = (panel, row, col, uiBox) => {
-    panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
-    this.#UpdateUIBoxPos(panel, uiBox);
-    uiBox.boxHeader.setContent(panel.panelHeader);
-  };
-  /*
-  ClickEx(panel: any) {
-      //@@ override in sub-class
-  }
-  */
-  CreateWidget = (widgetName, widgetoptions) => {
-    const widget = blessed[widgetName].call(this, widgetoptions);
-    return widget;
-  };
-  CreateWidgetEx(widgetName, widgetoptions) {
-    const widget = blessed[widgetName].call(this, widgetoptions);
-    return widget;
-  }
-  SetupWidgets = (box, panel, parent, blessedWidgets) => {
-    for (const [blessedWidgetKey, blessedWidgetDetails] of Object.entries(blessedWidgets)) {
-      const widgetoptions = { ...blessedWidgetDetails.options };
-      if (box) {
-        if (widgetoptions.top && widgetoptions.top >= box.height - 3) {
-          widgetoptions.top = box.height - 4;
-        }
-      }
-      const widget = blessed[blessedWidgetDetails.widget].call(this, widgetoptions);
-      widget.set("id", blessedWidgetDetails.id);
-      parent.append(widget);
-      parent.set(blessedWidgetDetails.widget, widget);
-      parent.set(`__blessedWidgetKey__${blessedWidgetKey}`, widget);
-      if (blessedWidgetDetails.events) {
-        for (const [eventName, eventDetails] of Object.entries(blessedWidgetDetails.events)) {
-          widget.on(eventName, () => {
-            eventDetails.cb(panel, widget, parent);
-          });
-        }
-      }
-      this.emit("widgetsetup", box, panel, widget);
-      if (blessedWidgetDetails.children) {
-        this.SetupWidgets(null, panel, widget, blessedWidgetDetails.children);
-      }
-    }
-  };
-  /**
-   * 
-   * Setup all panels
-   */
-  #SetupPanels() {
-    if (!this.screen) {
-      return;
-    }
-    const panelKeys = Object.keys(this.uidata.panels);
-    const uiBoxIds = Object.keys(this.uiBoxes);
-    for (let i = 0; i < uiBoxIds.length; i++) {
-      if (typeof this.uidata.panels[uiBoxIds[i]] === "undefined") {
-        let uiBox = this.uiBoxes[uiBoxIds[i]];
-        if (typeof uiBox !== "undefined") {
-          this.emit("preremovebox", uiBox.box, uiBox.box.get("panel"));
-          this.screen.remove(uiBox.boxHeader);
-          this.screen.remove(uiBox.box);
-          uiBox = null;
-          delete this.uiBoxes[uiBoxIds[i]];
-        }
-      }
-    }
-    const touched = {};
-    for (let i = 0; i < this.uidata.grid.cols * this.uidata.grid.rows; i++) {
-      const gridPos = this.#cursor + i;
-      const col = i % this.uidata.grid.cols;
-      const row = Math.floor(i / this.uidata.grid.cols);
-      const panel = this.uidata.panels[panelKeys[gridPos]];
-      if (typeof panel !== "undefined") {
-        if (typeof this.uiBoxes[panel.id] === "undefined") {
-          panel.pos = { row, col, rowSpan: 1, colSpan: 1 };
-          const calculatedBoxPos = this.#CalcBoxPos(panel);
-          if (!calculatedBoxPos) {
-            return;
-          }
-          const { top, left, width, height } = this.#CalcBoxPos(panel);
-          const box = blessed.box({
-            parent: this.screen,
-            top,
-            left,
-            width,
-            height,
-            style: {
-              bg: "#101010",
-              fg: "white"
-            },
-            border: {
-              type: "line"
-            },
-            keys: false,
-            // Do not allow default key handling for this box
-            tags: true
-            // Allow style in-line tags such as bolt, italics, etc.
-          });
-          const boxHeader = blessed.box({
-            parent: this.screen,
-            top,
-            left: left + 2,
-            width: "shrink",
-            height: 1,
-            style: {
-              bg: "gray",
-              fg: "white"
-            },
-            keys: false,
-            // Do not allow default key handling for this box
-            mouse: false,
-            content: panel.panelHeader,
-            tags: true
-            // Allow style in-line tags such as bold, italics, etc.
-          });
-          this.uiBoxes[panel.id] = { box, boxHeader };
-          boxHeader.setIndex(-1);
-          box.on("click", () => {
-            this.emit("click", box.get("panel"));
-          });
-          box.on("destroy", () => {
-            this.emit("destroy", box, panel);
-          });
-          box.on("remove", () => {
-            this.emit("remove", box, panel);
-          });
-          box.on("detach", () => {
-            this.emit("detach", box, panel);
-          });
-          box.set("panel", panel);
-          this.uiBoxes[panel.id].box = box;
-          this.emit("boxsetup", box, panel);
-          if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
-            this.SetupWidgets(box, panel, box, panel.widgets);
-            this.emit("widgetsetupcomplete", box, panel, panel.widgets);
-          }
-          touched[panel.id] = true;
-        } else {
-          this.#UpdatePanelPosition(panel, row, col, this.uiBoxes[panel.id]);
-          touched[panel.id] = true;
-        }
-        if (this.#renderPanelFn) {
-          this.#renderPanelFn(this.uiBoxes[panel.id].box, panel);
-        }
-      }
-    }
-    for (const [key] of Object.entries(this.uiBoxes)) {
-      const box = this.uiBoxes[key].box;
-      const panel = box.get("panel");
-      if (typeof touched[key] === "undefined") {
-        box.hide();
-        this.uiBoxes[key].boxHeader.hide();
-        this.emit("boxhide", this.uiBoxes[key].box, panel, panel.widgets);
-      } else {
-        box.show();
-        this.uiBoxes[key].boxHeader.show();
-        this.emit("boxshow", this.uiBoxes[key].box, panel, panel.widgets);
-      }
-    }
-  }
-  get gridData() {
-    return this.uidata;
-  }
-  set gridData(gridData) {
-    this.uidata = gridData;
-    this.#SetupPanels();
-    this.UpdateCursorInfo();
-    this.Render();
-  }
-  get gridDataPanels() {
-    return this.uidata.panels;
-  }
-  set gridDataPanels(gridDataPanels) {
-    this.uidata.panels = gridDataPanels;
-    this.#SetupPanels();
-    this.UpdateCursorInfo();
-    this.Render();
-  }
-  /*
-      ExitEx() {
-          //@@ override in sub-class
-      }
-  
-      EscapeEx() {
-          //@@ override in sub-class
-      }
-      */
-  // https://www.npmjs.com/package/blessed
-  // data:= { title: <str>,
-  //      grid: { rows: <int>, cols: <int> }, 
-  //      menu: [ { top: <bool>, menuitems: [ { text: <string>, key: <string>, cb: <func> } ] } ]
-  //      panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, template: <str> } ] }
-  /**
-   * 
-   * @param {*} data UI Data
-   */
-  SetupUI = () => {
-    this.DestroyUI();
-    if (this.screen === null) {
-      this.screen = blessed.screen({
-        smartCSR: true
-      });
-    }
-    if (!this.screen) {
-      return;
-    }
-    const data = this.uidata;
-    this.screen.title = data.title;
-    this.screen.on("resize", () => {
-      this.#ReSize();
-      this.Render();
-    });
-    if (data.menu !== null) {
-      for (let i = 0; i < data.menu.length; i++) {
-        new MenuBar(this.screen, data.menu[i]);
-      }
-    }
-    this.screen.key(["C-c"], () => {
-      this.DestroyUI();
-      this.emit("exit");
-    });
-    this.screen.key(["escape"], () => {
-      this.emit("escape");
-    });
-    this.#SetupPanels();
-    this.#cursorInfo = blessed.box({
-      parent: this.screen,
-      bottom: 0,
-      right: 0,
-      width: "shrink",
-      height: 1,
-      style: {
-        bg: "gray",
-        fg: "white"
-      },
-      keys: false,
-      // Do not allow default key handling for this box
-      mouse: false,
-      content: "",
-      tags: true
-      // Allow style in-line tags such as bolt, italics, etc.
-    });
-    this.sortInfo = blessed.box({
-      parent: this.screen,
-      top: 0,
-      right: 0,
-      width: "shrink",
-      height: 1,
-      style: {
-        bg: "gray",
-        fg: "white"
-      },
-      keys: false,
-      // Do not allow default key handling for this box
-      mouse: false,
-      content: "",
-      tags: true
-      // Allow style in-line tags such as bolt, italics, etc.
-    });
-    this.screenHeader = blessed.box({
-      parent: this.screen,
-      top: 0,
-      left: "center",
-      width: "shrink",
-      height: 1,
-      style: {
-        bg: "gray",
-        fg: "white"
-      },
-      keys: false,
-      // Do not allow default key handling for this box
-      mouse: false,
-      content: `[ ... ]`,
-      tags: true
-      // Allow style in-line tags such as bolt, italics, etc.
-    });
-    this.UpdateCursorInfo();
-    this.UpdateSortInfo("Default");
-    this.UpdateScreenHeader(this.screenHeaderText);
-    this.Render();
-  };
-  UpdateCursorInfo = () => {
-    if (this.#cursorInfo) {
-      this.#cursorInfo.setContent(`Cursor: ${this.#cursor} / ${this.TotalPanelNumber}`);
-    }
-  };
-  UpdateSortInfo = (sortMode) => {
-    if (this.sortInfo) {
-      this.sortInfo.setContent(`Sort: ${sortMode}`);
-    }
-  };
-  UpdateScreenHeader = (screenHeaderText) => {
-    this.screenHeaderText = screenHeaderText;
-    if (this.screenHeader) {
-      this.screenHeader.setContent(`[ ${screenHeaderText} ]`);
-    }
-  };
-  get rows() {
-    return this.uidata.grid.rows;
-  }
-  get cols() {
-    return this.uidata.grid.cols;
-  }
-  IncRows = () => {
-    if (this.screen && this.screen.height / (this.uidata.grid.rows + 1) > this.minHeight) {
-      this.uidata.grid.rows++;
-      this.CheckCursor();
-      this.#UpdateUI();
-    }
-  };
-  DecRows = () => {
-    if (this.uidata.grid.rows > this.minRows) {
-      this.uidata.grid.rows--;
-      this.CheckCursor();
-      this.#UpdateUI();
-    }
-  };
-  IncCols = () => {
-    if (this.screen && this.screen.width / (this.uidata.grid.cols + 1) > this.minWidth) {
-      this.uidata.grid.cols++;
-      this.CheckCursor();
-      this.#UpdateUI();
-    }
-  };
-  DecCols = () => {
-    if (this.uidata.grid.cols > this.minCols) {
-      this.uidata.grid.cols--;
-      this.CheckCursor();
-      this.#UpdateUI();
-    }
-  };
-  get ScreenCells() {
-    return this.uidata.grid.cols * this.uidata.grid.rows;
-  }
-  get TotalPanelNumber() {
-    return Object.keys(this.uidata.panels).length;
-  }
-  CheckCursor = () => {
-    if (this.#cursor > this.TotalPanelNumber - this.ScreenCells) {
-      this.#cursor = this.TotalPanelNumber - this.ScreenCells;
-      if (this.#cursor < 0) {
-        this.#cursor = 0;
-      }
-    }
-    this.UpdateCursorInfo();
-  };
-  NextPage = () => {
-    const endpos = this.TotalPanelNumber - this.ScreenCells;
-    if (this.#cursor < endpos) {
-      this.#cursor += this.ScreenCells;
-      if (this.#cursor > endpos) {
-        this.#cursor = endpos;
-      }
-      this.#UpdateUI();
-    }
-  };
-  PrevPage = () => {
-    if (this.#cursor > 0) {
-      this.#cursor -= this.ScreenCells;
-      if (this.#cursor < 0) {
-        this.#cursor = 0;
-      }
-      this.#UpdateUI();
-    }
-  };
-  #UpdateUI() {
-    this.SetupUI();
-  }
-  Exit = () => {
-    this.DestroyUI();
-    this.emit("exit");
-  };
-  /**
-   * 
-   */
-  DestroyUI = () => {
-    if (this.screen !== null) {
-      this.uiBoxes = {};
-      this.screen.destroy();
-      this.screen = null;
-    }
-  };
-  /**
-   * Render the screen.
-   */
-  Render = () => {
-    if (this.screen) {
-      this.screen.render();
-    }
-  };
-  get mainScreen() {
-    return this.screen;
-  }
-}
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let node_events = require("node:events");
+node_events = __toESM(node_events);
+let blessed = require("blessed");
+blessed = __toESM(blessed);
+//#region src/menubar.ts
+var MenuBar = class {
+	listb = null;
+	constructor(screen, options) {
+		const compoptions = {
+			parent: screen,
+			left: 0,
+			right: 0,
+			height: 1,
+			width: "shrink",
+			mouse: true,
+			keys: true,
+			autoCommandKeys: true,
+			scrollable: true,
+			style: {
+				fg: "yellow",
+				bg: "blue",
+				item: { hover: {
+					fg: "white",
+					bg: "green"
+				} },
+				selected: {
+					fg: "black",
+					bg: "yellow"
+				}
+			}
+		};
+		if (options.top === true) compoptions.top = 0;
+		else compoptions.bottom = 0;
+		compoptions.commands = {};
+		options.menuitems.forEach((menuItem) => {
+			if (compoptions.commands) compoptions.commands[menuItem.text] = {
+				keys: [menuItem.key],
+				callback: menuItem.cb
+			};
+		});
+		this.listb = blessed.default.listbar(compoptions);
+	}
+	get listbar() {
+		return this.listb;
+	}
+};
+//#endregion
+//#region src/stsuiframe.ts
+var STSUIFrame = class extends node_events.default {
+	uiBoxes = {};
+	screen = null;
+	#cursor = 0;
+	#renderPanelFn = null;
+	screenHeaderText = "...";
+	minRows = 1;
+	minCols = 1;
+	minWidth = 40;
+	minHeight = 7;
+	#cursorInfo = null;
+	sortInfo = null;
+	screenHeader = null;
+	uidata;
+	/**
+	* 
+	* @param {*} data The screen layout data. Schema: { title: <str>,
+	*   grid: { rows: <int>, cols: <int> }, 
+	*   panels: [ { id: <str>, pos: { row: <int>, col: <int>, rowSpan: <int>, colSpan: <int> }, 
+	*      template: <handlebars func>, widgets: { [ { <prop_name>: <blessed widget> } ] } } ] }
+	*/
+	constructor(data, renderPanelFn = null) {
+		super();
+		this.uidata = data;
+		this.#renderPanelFn = renderPanelFn;
+		this.SetupUI();
+	}
+	get blessed() {
+		return blessed.default;
+	}
+	/**
+	* 
+	* @param {number} position The index (0 based) for the panel item to be calculated
+	* @returns object with top, left, width and height correctly set
+	*/
+	#CalcBoxPos = (panel) => {
+		if (!this.screen) return null;
+		if (!panel.pos) return null;
+		let screenHeight = this.screen.height;
+		if (this.uidata.menu !== null) screenHeight -= this.uidata.menu.length;
+		const screenWidth = this.screen.width;
+		const rows = this.uidata.grid.rows;
+		const cols = this.uidata.grid.cols;
+		const pos = panel.pos;
+		const colWidth = Math.floor(screenWidth / cols);
+		const rowHeight = Math.floor(screenHeight / rows);
+		let topoffset = 0;
+		if (this.uidata.menu !== null) {
+			for (const [, value] of Object.entries(this.uidata.menu)) if (value.top === true) {
+				topoffset = 1;
+				break;
+			}
+		}
+		const boxPos = {
+			top: pos.row * rowHeight + topoffset,
+			left: pos.col * colWidth,
+			width: colWidth * pos.colSpan,
+			height: rowHeight * pos.rowSpan
+		};
+		if (pos.col + pos.colSpan === cols) boxPos.width = screenWidth - pos.col * colWidth;
+		if (pos.row + pos.rowSpan === rows) boxPos.height = screenHeight - pos.row * rowHeight;
+		return boxPos;
+	};
+	#UpdateUIBoxPos = (panel, uiBox) => {
+		const pos = this.#CalcBoxPos(panel);
+		if (!pos) return;
+		uiBox.box.top = pos.top;
+		uiBox.box.left = pos.left;
+		uiBox.box.width = pos.width;
+		uiBox.box.height = pos.height;
+		uiBox.boxHeader.top = pos.top;
+		uiBox.boxHeader.left = pos.left + 2;
+		if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
+			for (const [, value] of Object.entries(panel.widgets)) if (value.widget === "log") {
+				const widget = uiBox.box.get(value.widget);
+				if (widget.position.top >= uiBox.box.height - 4) widget.position.top = uiBox.box.height - 4;
+				else if (value.options.top) widget.position.top = value.options.top;
+			}
+		}
+	};
+	/**
+	* ReSize the grid layout
+	*/
+	#ReSize = () => {
+		for (const [, value] of Object.entries(this.uiBoxes)) this.#UpdateUIBoxPos(value.box.get("panel"), value);
+	};
+	#UpdatePanelPosition = (panel, row, col, uiBox) => {
+		panel.pos = {
+			row,
+			col,
+			rowSpan: 1,
+			colSpan: 1
+		};
+		this.#UpdateUIBoxPos(panel, uiBox);
+		uiBox.boxHeader.setContent(panel.panelHeader);
+	};
+	CreateWidget = (widgetName, widgetoptions) => {
+		return blessed.default[widgetName].call(this, widgetoptions);
+	};
+	CreateWidgetEx(widgetName, widgetoptions) {
+		return blessed.default[widgetName].call(this, widgetoptions);
+	}
+	SetupWidgets = (box, panel, parent, blessedWidgets) => {
+		for (const [blessedWidgetKey, blessedWidgetDetails] of Object.entries(blessedWidgets)) {
+			const widgetoptions = { ...blessedWidgetDetails.options };
+			if (box) {
+				if (widgetoptions.top && widgetoptions.top >= box.height - 3) widgetoptions.top = box.height - 4;
+			}
+			const widget = blessed.default[blessedWidgetDetails.widget].call(this, widgetoptions);
+			widget.set("id", blessedWidgetDetails.id);
+			parent.append(widget);
+			parent.set(blessedWidgetDetails.widget, widget);
+			parent.set(`__blessedWidgetKey__${blessedWidgetKey}`, widget);
+			if (blessedWidgetDetails.events) for (const [eventName, eventDetails] of Object.entries(blessedWidgetDetails.events)) widget.on(eventName, () => {
+				eventDetails.cb(panel, widget, parent);
+			});
+			this.emit("widgetsetup", box, panel, widget);
+			if (blessedWidgetDetails.children) this.SetupWidgets(null, panel, widget, blessedWidgetDetails.children);
+		}
+	};
+	/**
+	* 
+	* Setup all panels
+	*/
+	#SetupPanels() {
+		if (!this.screen) return;
+		const panelKeys = Object.keys(this.uidata.panels);
+		const uiBoxIds = Object.keys(this.uiBoxes);
+		for (let i = 0; i < uiBoxIds.length; i++) if (typeof this.uidata.panels[uiBoxIds[i]] === "undefined") {
+			let uiBox = this.uiBoxes[uiBoxIds[i]];
+			if (typeof uiBox !== "undefined") {
+				this.emit("preremovebox", uiBox.box, uiBox.box.get("panel"));
+				this.screen.remove(uiBox.boxHeader);
+				this.screen.remove(uiBox.box);
+				uiBox = null;
+				delete this.uiBoxes[uiBoxIds[i]];
+			}
+		}
+		const touched = {};
+		for (let i = 0; i < this.uidata.grid.cols * this.uidata.grid.rows; i++) {
+			const gridPos = this.#cursor + i;
+			const col = i % this.uidata.grid.cols;
+			const row = Math.floor(i / this.uidata.grid.cols);
+			const panel = this.uidata.panels[panelKeys[gridPos]];
+			if (typeof panel !== "undefined") {
+				if (typeof this.uiBoxes[panel.id] === "undefined") {
+					panel.pos = {
+						row,
+						col,
+						rowSpan: 1,
+						colSpan: 1
+					};
+					if (!this.#CalcBoxPos(panel)) return;
+					const { top, left, width, height } = this.#CalcBoxPos(panel);
+					const box = blessed.default.box({
+						parent: this.screen,
+						top,
+						left,
+						width,
+						height,
+						style: {
+							bg: "#101010",
+							fg: "white"
+						},
+						border: { type: "line" },
+						keys: false,
+						tags: true
+					});
+					const boxHeader = blessed.default.box({
+						parent: this.screen,
+						top,
+						left: left + 2,
+						width: "shrink",
+						height: 1,
+						style: {
+							bg: "gray",
+							fg: "white"
+						},
+						keys: false,
+						mouse: false,
+						content: panel.panelHeader,
+						tags: true
+					});
+					this.uiBoxes[panel.id] = {
+						box,
+						boxHeader
+					};
+					boxHeader.setIndex(-1);
+					box.on("click", () => {
+						this.emit("click", box.get("panel"));
+					});
+					box.on("destroy", () => {
+						this.emit("destroy", box, panel);
+					});
+					box.on("remove", () => {
+						this.emit("remove", box, panel);
+					});
+					box.on("detach", () => {
+						this.emit("detach", box, panel);
+					});
+					box.set("panel", panel);
+					this.uiBoxes[panel.id].box = box;
+					this.emit("boxsetup", box, panel);
+					if (typeof panel.widgets !== "undefined" && panel.widgets !== null) {
+						this.SetupWidgets(box, panel, box, panel.widgets);
+						this.emit("widgetsetupcomplete", box, panel, panel.widgets);
+					}
+					touched[panel.id] = true;
+				} else {
+					this.#UpdatePanelPosition(panel, row, col, this.uiBoxes[panel.id]);
+					touched[panel.id] = true;
+				}
+				if (this.#renderPanelFn) this.#renderPanelFn(this.uiBoxes[panel.id].box, panel);
+			}
+		}
+		for (const [key] of Object.entries(this.uiBoxes)) {
+			const box = this.uiBoxes[key].box;
+			const panel = box.get("panel");
+			if (typeof touched[key] === "undefined") {
+				box.hide();
+				this.uiBoxes[key].boxHeader.hide();
+				this.emit("boxhide", this.uiBoxes[key].box, panel, panel.widgets);
+			} else {
+				box.show();
+				this.uiBoxes[key].boxHeader.show();
+				this.emit("boxshow", this.uiBoxes[key].box, panel, panel.widgets);
+			}
+		}
+	}
+	get gridData() {
+		return this.uidata;
+	}
+	set gridData(gridData) {
+		this.uidata = gridData;
+		this.#SetupPanels();
+		this.UpdateCursorInfo();
+		this.Render();
+	}
+	get gridDataPanels() {
+		return this.uidata.panels;
+	}
+	set gridDataPanels(gridDataPanels) {
+		this.uidata.panels = gridDataPanels;
+		this.#SetupPanels();
+		this.UpdateCursorInfo();
+		this.Render();
+	}
+	/**
+	* 
+	* @param {*} data UI Data
+	*/
+	SetupUI = () => {
+		this.DestroyUI();
+		if (this.screen === null) this.screen = blessed.default.screen({ smartCSR: true });
+		if (!this.screen) return;
+		const data = this.uidata;
+		this.screen.title = data.title;
+		this.screen.on("resize", () => {
+			this.#ReSize();
+			this.Render();
+		});
+		if (data.menu !== null) for (let i = 0; i < data.menu.length; i++) new MenuBar(this.screen, data.menu[i]);
+		this.screen.key(["C-c"], () => {
+			this.DestroyUI();
+			this.emit("exit");
+		});
+		this.screen.key(["escape"], () => {
+			this.emit("escape");
+		});
+		this.#SetupPanels();
+		this.#cursorInfo = blessed.default.box({
+			parent: this.screen,
+			bottom: 0,
+			right: 0,
+			width: "shrink",
+			height: 1,
+			style: {
+				bg: "gray",
+				fg: "white"
+			},
+			keys: false,
+			mouse: false,
+			content: "",
+			tags: true
+		});
+		this.sortInfo = blessed.default.box({
+			parent: this.screen,
+			top: 0,
+			right: 0,
+			width: "shrink",
+			height: 1,
+			style: {
+				bg: "gray",
+				fg: "white"
+			},
+			keys: false,
+			mouse: false,
+			content: "",
+			tags: true
+		});
+		this.screenHeader = blessed.default.box({
+			parent: this.screen,
+			top: 0,
+			left: "center",
+			width: "shrink",
+			height: 1,
+			style: {
+				bg: "gray",
+				fg: "white"
+			},
+			keys: false,
+			mouse: false,
+			content: `[ ... ]`,
+			tags: true
+		});
+		this.UpdateCursorInfo();
+		this.UpdateSortInfo("Default");
+		this.UpdateScreenHeader(this.screenHeaderText);
+		this.Render();
+	};
+	UpdateCursorInfo = () => {
+		if (this.#cursorInfo) this.#cursorInfo.setContent(`Cursor: ${this.#cursor} / ${this.TotalPanelNumber}`);
+	};
+	UpdateSortInfo = (sortMode) => {
+		if (this.sortInfo) this.sortInfo.setContent(`Sort: ${sortMode}`);
+	};
+	UpdateScreenHeader = (screenHeaderText) => {
+		this.screenHeaderText = screenHeaderText;
+		if (this.screenHeader) this.screenHeader.setContent(`[ ${screenHeaderText} ]`);
+	};
+	get rows() {
+		return this.uidata.grid.rows;
+	}
+	get cols() {
+		return this.uidata.grid.cols;
+	}
+	IncRows = () => {
+		if (this.screen && this.screen.height / (this.uidata.grid.rows + 1) > this.minHeight) {
+			this.uidata.grid.rows++;
+			this.CheckCursor();
+			this.#UpdateUI();
+		}
+	};
+	DecRows = () => {
+		if (this.uidata.grid.rows > this.minRows) {
+			this.uidata.grid.rows--;
+			this.CheckCursor();
+			this.#UpdateUI();
+		}
+	};
+	IncCols = () => {
+		if (this.screen && this.screen.width / (this.uidata.grid.cols + 1) > this.minWidth) {
+			this.uidata.grid.cols++;
+			this.CheckCursor();
+			this.#UpdateUI();
+		}
+	};
+	DecCols = () => {
+		if (this.uidata.grid.cols > this.minCols) {
+			this.uidata.grid.cols--;
+			this.CheckCursor();
+			this.#UpdateUI();
+		}
+	};
+	get ScreenCells() {
+		return this.uidata.grid.cols * this.uidata.grid.rows;
+	}
+	get TotalPanelNumber() {
+		return Object.keys(this.uidata.panels).length;
+	}
+	CheckCursor = () => {
+		if (this.#cursor > this.TotalPanelNumber - this.ScreenCells) {
+			this.#cursor = this.TotalPanelNumber - this.ScreenCells;
+			if (this.#cursor < 0) this.#cursor = 0;
+		}
+		this.UpdateCursorInfo();
+	};
+	NextPage = () => {
+		const endpos = this.TotalPanelNumber - this.ScreenCells;
+		if (this.#cursor < endpos) {
+			this.#cursor += this.ScreenCells;
+			if (this.#cursor > endpos) this.#cursor = endpos;
+			this.#UpdateUI();
+		}
+	};
+	PrevPage = () => {
+		if (this.#cursor > 0) {
+			this.#cursor -= this.ScreenCells;
+			if (this.#cursor < 0) this.#cursor = 0;
+			this.#UpdateUI();
+		}
+	};
+	#UpdateUI() {
+		this.SetupUI();
+	}
+	Exit = () => {
+		this.DestroyUI();
+		this.emit("exit");
+	};
+	/**
+	* 
+	*/
+	DestroyUI = () => {
+		if (this.screen !== null) {
+			this.uiBoxes = {};
+			this.screen.destroy();
+			this.screen = null;
+		}
+	};
+	/**
+	* Render the screen.
+	*/
+	Render = () => {
+		if (this.screen) this.screen.render();
+	};
+	get mainScreen() {
+		return this.screen;
+	}
+};
+//#endregion
 exports.MenuBar = MenuBar;
 exports.STSUIFrame = STSUIFrame;
-//# sourceMappingURL=index.cjs.map
+
+//# sourceMappingURL=index.cjs.map