cedro 0.1.28 → 0.1.30

package/README.md

@@ -14,6 +14,14 @@ Javascript library to build user interfece based on widgets.
 
 </div>
 
+## Cedro Demo
+
+We have created a live demo of **Cedro** on CodeSandbox for you to explore its capabilities. This template provides a hands-on experience, allowing you to see Cedro in action and experiment with it in real-time.
+
+[Check out the Cedro Demo on CodeSandbox](https://pyskv2-5173.csb.app)
+
+Feel free to [fork the template](https://codesandbox.io/p/github/hdrdevs/vite-cedro/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0gzwaud000620684w92xute%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0gzwaud000220684q50obd6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0gzwaud00042068wm2ct2dl%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0gzwaud00052068l97sq7ys%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0gzwaud000220684q50obd6%2522%253A%257B%2522id%2522%253A%2522cm0gzwaud000220684q50obd6%2522%252C%2522activeTabId%2522%253A%2522cm0h02bw900372068zcijoffp%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0gzwaud00012068qh732zgi%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522cm0h02bw900372068zcijoffp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522cm0gzwaud00052068l97sq7ys%2522%253A%257B%2522id%2522%253A%2522cm0gzwaud00052068l97sq7ys%2522%252C%2522activeTabId%2522%253A%2522cm0gzwce5000d2068swd73pqe%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522cm0gzwce5000d2068swd73pqe%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0gzwaud00042068wm2ct2dl%2522%253A%257B%2522id%2522%253A%2522cm0gzwaud00042068wm2ct2dl%2522%252C%2522activeTabId%2522%253A%2522cm0gzwf76000k2068v1hzvy3c%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0gzwaud00032068ac13dwl5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522NEW_TERMINAL%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cm0gzwf76000k2068v1hzvy3c%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) and customize it to suit your needs. This is a great way to start learning how to build complex user interfaces with Cedro.
+
 ## Documentation
 
 Visit [https://cedro.hdrdevs.com.ar](https://cedro.hdrdevs.com.ar) to view the full documentation.

package/package.json

@@ -16,7 +16,7 @@
         "ui-library",
         "widget-based"
     ],
-    "version": "0.1.28",
+    "version": "0.1.30",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",

package/src/core/application.core.tsx

@@ -6,7 +6,7 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import "@fontsource/roboto/900.css";
 import "material-icons/iconfont/material-icons.css";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
+import { Widget } from "../ui/widget.ui";
 import { Screen } from "./screeen.core";
 import { IApplication, IScreenSize } from "../interfaces/application.interface";
 import { IWidget, WUICallback, WUIEvent } from "../interfaces/widget.interface";
@@ -23,9 +23,16 @@ import {
 } from "./themes.core";
 import { Loading } from "../ui/loading.ui";
 import { OrientationTypes } from "../types/orientation.type";
+import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.types";
 
 declare global {
     var appConnections: Array<WUICallback>;
+
+    interface Window {
+        app: WApplication | undefined;
+    }
+
+    var app: WApplication | undefined;
 }
 
 class WApplication implements IApplication {

package/src/index.ts

@@ -1,8 +1,9 @@
 import Application from "./core/application.core";
 import { DOMcreateElement, DOMcreateFragment } from "./core/jsxsupport";
-import { Widget, WidgetTypes, WidgetAlignTypes } from "./ui/widget.ui";
+import { Widget } from "./ui/widget.ui";
 import { initWidgetCollection } from "./ui/widget.collection";
 import { createWidget } from "./ui/widget.builder";
+import { WidgetAlignTypes, WidgetTypes } from "./ui/widget.types";
 
 initWidgetCollection();
 

package/src/interfaces/widget.interface.ts

@@ -1,4 +1,4 @@
-import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
+import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.types";
 import { Vector2D } from "../types/vector2d.type";
 
 export type WUIEvent =

package/src/ui/Icon.ui.tsx

@@ -1,8 +1,9 @@
 import "./styles/icon.css";
 import { Colors } from "./colors.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 import { UID } from "../core/uid";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
 export type IconSizes = "small" | "medium" | "large" | "xlarge";

package/src/ui/IconButton.ui.tsx

@@ -1,16 +1,11 @@
 import "./styles/button.css";
-import {
-    Widget,
-    WidgetAlignTypes,
-    WidgetTypes,
-    connectWidgetCallback,
-    getOnlyEventProps,
-} from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { Button, wButtonProps } from "./button.ui";
 import { Icon } from "./Icon.ui";
 import { Label } from "./label.ui";
-import { normalizeWidget } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class IconButton extends Button {
     icon: Icon;

package/src/ui/Textbox.ui.tsx

@@ -1,7 +1,8 @@
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import "./styles/textbox.css";
-import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { UID } from "../core/uid";
+import { WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type InputTypes =
     | "text"

package/src/ui/accordion.ui.tsx

@@ -1,9 +1,11 @@
 import "./styles/accordion.css";
 import { IconButton } from "./IconButton.ui";
 import { Label } from "./label.ui";
-import { Widget, WidgetTypes } from "./widget.ui";
-import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget } from "./widget.ui";
+import { createWidget } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 const ACCORDION_HEADER_HEIGHT = 40;
 

package/src/ui/button.ui.tsx

@@ -2,9 +2,10 @@ import "./styles/button.css";
 import "./styles/stackbutton.css";
 import "./styles/vstackbutton.css";
 import { Colors } from "./colors.ui";
-import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { UID } from "../core/uid";
+import { WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type ButonVariants =
     | "contained"

package/src/ui/buttonColor.ui.tsx

@@ -1,8 +1,8 @@
 import "./styles/buttoncolor.css";
 import { Button, wButtonProps } from "./button.ui";
 import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
-import { normalizeWidget } from "./widget.builder";
 import { UID } from "../core/uid";
+import { normalizeWidget } from "./widget.normalize";
 
 export class ButtonColor extends Button {
     inputColor: Widget;

package/src/ui/buttonmenu.ui.tsx

@@ -2,7 +2,8 @@ import { UID } from "../core/uid";
 import { SelectItem } from "../types/select.item.type";
 import { Button, wButtonProps } from "./button.ui";
 import { Menu } from "./menu.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps } from "./widget.types";
 import { Widget } from "./widget.ui";
 
 export class ButtonMenu extends Button {

package/src/ui/buttonstack.ui.tsx

@@ -1,15 +1,10 @@
 import { OrientationTypes } from "../types/orientation.type";
 import { IconButton } from "./IconButton.ui";
-import { ButonVariants, Button } from "./button.ui";
-import {
-    connectWidgetCallback,
-    getOnlyEventProps,
-    Widget,
-    WidgetAlignTypes,
-    WidgetTypes,
-} from "./widget.ui";
-import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
+import { ButonVariants, Button, createButton } from "./button.ui";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 import { UID } from "../core/uid";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class ButtonStack extends Widget {
     orientation: OrientationTypes;
@@ -148,7 +143,7 @@ export function createButtonStack(
 
     content.childNodes.forEach((item: HTMLElement, _index: number) => {
         if (item.getAttribute("w-button") || item.getAttribute("w-icon-button")) {
-            const widget = createWidget(item) as Button;
+            const widget = createButton(item.id, item) as Button;
 
             if (widget !== null) {
                 newStack.addButton(widget);

package/src/ui/checkbox.ui.tsx

@@ -1,6 +1,7 @@
 import { UID } from "../core/uid";
 import { ToggleButton } from "./toggle.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps } from "./widget.types";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 export class Checkbox extends ToggleButton {

package/src/ui/container.ui.tsx

@@ -1,15 +1,11 @@
 import "./styles/container.css";
 import { OrientationTypes } from "../types/orientation.type";
-import {
-    connectWidgetCallback,
-    getOnlyEventProps,
-    Widget,
-    WidgetAlignTypes,
-    WidgetTypes,
-} from "./widget.ui";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 import { UID } from "../core/uid";
-import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { createWidget } from "./widget.builder";
 import { Scroll } from "./scroll.ui";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type ContainerVariants = "plain" | "contained" | "outlined";
 

package/src/ui/datagrid.ui.tsx

@@ -1,13 +1,14 @@
 import "./styles/datagrid.css";
 import { Label } from "./label.ui";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { Scroll } from "./scroll.ui";
-import { normalizeWidget, WidgetEventProps, WidgetProps } from "./widget.builder";
 import { UID } from "../core/uid";
 import { decode } from "../core/html.entities";
 import { Button } from "./button.ui";
 import { IconButton } from "./IconButton.ui";
 import { ProgressBar } from "./progressbar.ui";
+import { WidgetAlignTypes, WidgetEventProps, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 const DATA_GRID_HEADER_HEIGHT = 30;
 const DATA_GRID_FOOTER_HEIGHT = 40;

package/src/ui/dialog.tsx

@@ -4,8 +4,10 @@ import { Button } from "./button.ui";
 import { Spacer } from "./container.ui";
 import { Label } from "./label.ui";
 import "./styles/dialog.css";
-import { createWidget, normalizeWidget, WidgetProps } from "./widget.builder";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { createWidget } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { Widget } from "./widget.ui";
 
 const TITLE_BAR_HEIGHT = 40;
 const BUTTON_BAR_HEIGHT = 50;

package/src/ui/draggable.ui.ts

@@ -1,6 +1,7 @@
 import { OrientationTypes } from "../types/orientation.type";
 import "./styles/draggable.css";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { WidgetTypes } from "./widget.types";
+import { Widget } from "./widget.ui";
 
 export type DragOrientation = OrientationTypes | "both";
 

package/src/ui/hpanel.ui.tsx

@@ -1,14 +1,10 @@
 import { UID } from "../core/uid";
 import { Draggable } from "./draggable.ui";
 import "./styles/hpanel.css";
-import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
-import {
-    connectWidgetCallback,
-    getOnlyEventProps,
-    Widget,
-    WidgetAlignTypes,
-    WidgetTypes,
-} from "./widget.ui";
+import { createWidget } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 
 const HPANEL_HANDLER_SIZE = 4;
 

package/src/ui/iconButtonMenu.ui.tsx

@@ -1,11 +1,12 @@
 import { IconButton, wIconButtonProps } from "./IconButton.ui";
 import { Menu } from "./menu.ui";
 import { SelectItem } from "../types/select.item.type";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 import { UID } from "../core/uid";
 import { connectCustomWidget } from "./widget.collection";
 import { IWidget } from "../interfaces/widget.interface";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class IconButtonMenu extends IconButton {
     menu: Menu;

package/src/ui/image.ui.tsx

@@ -1,8 +1,9 @@
 import { UID } from "../core/uid";
 import "./styles/image.css";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
-import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { decode } from "../core/html.entities";
+import { WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class Image extends Widget {
     imageContainer: Widget;

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { Textbox, WTextbox } from "./Textbox.ui";
 import { Select, WSelect, WSelectItem } from "./select.ui";
 import { Accordion, WAccordion, WAccordionItem } from "./accordion.ui";
@@ -26,6 +26,7 @@ import { ValueBar, WValueBar } from "./valuebar.ui";
 import { VPanel, WVPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder";
 import { IconButtonMenu, WIconButtonMenu, WIconButtonMenuItem } from "./iconButtonMenu.ui";
+import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
 
 export type { ContainerParams };
 

package/src/ui/label.ui.tsx

@@ -1,8 +1,9 @@
 import "./styles/label.css";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { Colors } from "./colors.ui";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { UID } from "../core/uid";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
 

package/src/ui/menu.ui.ts

@@ -1,7 +1,8 @@
 import "./styles/menu.css";
 import { IWidget } from "../interfaces/widget.interface";
 import { IconButton } from "./IconButton.ui";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
+import { WidgetAlignTypes, WidgetTypes } from "./widget.types";
 
 const MENU_OPTION_HEIGHT = 40;
 

package/src/ui/progressbar.ui.tsx

@@ -1,8 +1,9 @@
 import { UID } from "../core/uid";
 import { Label } from "./label.ui";
 import "./styles/progressbar.css";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
-import { Widget, WidgetTypes, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps, WidgetTypes } from "./widget.types";
+import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 const PROGRESS_BAR_HEIGHT = 40;
 

package/src/ui/radiobutton.ui.tsx

@@ -1,6 +1,7 @@
 import { UID } from "../core/uid";
 import { ToggleButton } from "./toggle.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps } from "./widget.types";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 
 export class RadioButton extends ToggleButton {

package/src/ui/scroll.ui.ts

@@ -1,7 +1,8 @@
 import { OrientationTypes } from "../types/orientation.type";
 import "./styles/scroll.css";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { Draggable } from "./draggable.ui";
+import { WidgetTypes } from "./widget.types";
 
 const SCROLL_SIZE = 10;
 

package/src/ui/select.ui.tsx

@@ -3,8 +3,9 @@ import { IconButton } from "./IconButton.ui";
 import { Menu } from "./menu.ui";
 import { Widget } from "./widget.ui";
 import { SelectItem } from "../types/select.item.type";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class Select extends Widget {
     menu: Menu;

package/src/ui/switch.ui.tsx

@@ -1,6 +1,7 @@
 import { UID } from "../core/uid";
 import { ToggleButton } from "./toggle.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps } from "./widget.types";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 export class Switch extends ToggleButton {
     constructor(id: string, text: string = "", parent: Widget | null = null) {

package/src/ui/tabs.ui.tsx

@@ -1,13 +1,15 @@
 import "./styles/tabs.css";
 
 import { OrientationTypes } from "../types/orientation.type";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { Toolbar } from "./toolbar.ui";
 import { Label } from "./label.ui";
 import { Icon } from "./Icon.ui";
 import { Scroll } from "./scroll.ui";
-import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { createWidget } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 const TAB_HEADER_SIZE = 40;
 

package/src/ui/textarea.ui.tsx

@@ -1,6 +1,7 @@
 import { UID } from "../core/uid";
 import "./styles/textarea.css";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetProps } from "./widget.types";
 import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 
 export class TextArea extends Widget {

package/src/ui/toolbar.ui.tsx

@@ -1,10 +1,12 @@
 import "./styles/toolbar.css";
 import { IWidget } from "../interfaces/widget.interface";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { IconButton } from "./IconButton.ui";
 import { OrientationTypes } from "../types/orientation.type";
-import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
+import { createWidget } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export type ToolbarVariants = "contained" | "outlined";
 

package/src/ui/valuebar.ui.tsx

@@ -2,8 +2,9 @@ import "./styles/valuebar.css";
 import { OrientationTypes } from "../types/orientation.type";
 import { Widget, connectWidgetCallback, getOnlyEventProps } from "./widget.ui";
 import { Draggable } from "./draggable.ui";
-import { normalizeWidget, WidgetProps } from "./widget.builder";
 import { UID } from "../core/uid";
+import { WidgetProps } from "./widget.types";
+import { normalizeWidget } from "./widget.normalize";
 
 export class ValueBar extends Widget {
     orientation: OrientationTypes;

package/src/ui/vpanel.ui.tsx

@@ -1,13 +1,9 @@
 import { Draggable } from "./draggable.ui";
 import "./styles/vpanel.css";
-import { WidgetProps, createWidget, normalizeWidget } from "./widget.builder";
-import {
-    connectWidgetCallback,
-    getOnlyEventProps,
-    Widget,
-    WidgetAlignTypes,
-    WidgetTypes,
-} from "./widget.ui";
+import { createWidget } from "./widget.builder";
+import { normalizeWidget } from "./widget.normalize";
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
+import { connectWidgetCallback, getOnlyEventProps, Widget } from "./widget.ui";
 
 const VPANEL_HANDLER_SIZE = 4;
 

package/src/ui/widget.builder.ts

@@ -1,10 +1,9 @@
 import { UID } from "../core/uid";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Widget } from "./widget.ui";
 import { addNewWidget } from "./widget.collection";
 import { createTextbox } from "./Textbox.ui";
 import { createButton } from "./button.ui";
 import { createLabel } from "./label.ui";
-import { OrientationTypes } from "../types/orientation.type";
 import { createContainer } from "./container.ui";
 import { createIconButton } from "./IconButton.ui";
 import { createImage } from "./image.ui";
@@ -27,29 +26,7 @@ import { createTextarea } from "./textarea.ui";
 import { createSelect } from "./select.ui";
 import { createDialog, Dialog } from "./dialog";
 import { createDataGrid, DataGrid } from "./datagrid.ui";
-
-export type WidgetEventProps = {
-    onClick?: (args: any) => {} | void;
-    onResize?: (args: any) => {} | void;
-    onMouseDown?: (args: any) => {} | void;
-    onMouseUp?: (args: any) => {} | void;
-    onMouseMove?: (args: any) => {} | void;
-    onMouseOut?: (args: any) => {} | void;
-    onMouseLeave?: (args: any) => {} | void;
-    onWheel?: (args: any) => {} | void;
-    onDrag?: (args: any) => {} | void;
-    onRender?: (args: any) => {} | void;
-};
-
-export type WidgetProps = {
-    id?: string | null;
-    type?: WidgetTypes | null;
-    padding?: number | null;
-    classNames?: string | null;
-    fixedSize?: number | null;
-    orientation?: OrientationTypes | null;
-    hidden?: boolean | null;
-} & WidgetEventProps;
+import { WidgetAlignTypes, WidgetProps, WidgetTypes } from "./widget.types";
 
 export function createWidget(
     content: any,
@@ -213,31 +190,3 @@ export function createWidget(
 
     return null;
 }
-
-export function normalizeWidget(widget: any, props: WidgetProps) {
-    if (props.fixedSize !== undefined) {
-        widget.setAttribute("w-fixed-size", props.fixedSize);
-    }
-
-    if (props.padding !== undefined) {
-        widget.setAttribute("w-padding", props.padding);
-    }
-
-    if (props.type !== undefined) {
-        widget.setAttribute("w-type", props.type);
-    }
-
-    if (props.hidden !== undefined) {
-        widget.setAttribute("w-hidden", props.hidden);
-    }
-
-    if (props.classNames !== undefined) {
-        widget.setAttribute("w-classes", props.classNames);
-    }
-
-    if (props.orientation !== undefined) {
-        widget.setAttribute("w-orientation", props.orientation);
-    }
-
-    return widget;
-}

package/src/ui/widget.collection.ts

@@ -1,15 +1,15 @@
-import WApplication from "../core/application.core";
+//import WApplication from "../core/application.core";
 import { IWidget, WUICallback } from "../interfaces/widget.interface";
 
 declare global {
     interface Window {
-        app: WApplication | undefined;
+        //app: WApplication | undefined;
         w: Map<string, IWidget>;
         widgetConnections: Map<string, WUICallback>;
     }
 
     var w: Map<string, IWidget>;
-    var app: WApplication | undefined;
+    //var app: WApplication | undefined;
     var widgetConnections: Map<string, WUICallback>;
     var widgetCustomConnections: Map<string, WUICallback>;
 }

package/src/ui/widget.normalize.ts

@@ -0,0 +1,29 @@
+import { WidgetProps } from "./widget.types";
+
+export function normalizeWidget(widget: any, props: WidgetProps) {
+    if (props.fixedSize !== undefined) {
+        widget.setAttribute("w-fixed-size", props.fixedSize);
+    }
+
+    if (props.padding !== undefined) {
+        widget.setAttribute("w-padding", props.padding);
+    }
+
+    if (props.type !== undefined) {
+        widget.setAttribute("w-type", props.type);
+    }
+
+    if (props.hidden !== undefined) {
+        widget.setAttribute("w-hidden", props.hidden);
+    }
+
+    if (props.classNames !== undefined) {
+        widget.setAttribute("w-classes", props.classNames);
+    }
+
+    if (props.orientation !== undefined) {
+        widget.setAttribute("w-orientation", props.orientation);
+    }
+
+    return widget;
+}

package/src/ui/widget.types.ts

@@ -0,0 +1,35 @@
+import { OrientationTypes } from "../types/orientation.type";
+
+export enum WidgetTypes {
+    FILL = 1,
+    CUSTOM = 2,
+    FREE = 3,
+}
+
+export enum WidgetAlignTypes {
+    HORIZONTAL = 1,
+    VERTICAL = 2,
+}
+
+export type WidgetEventProps = {
+    onClick?: (args: any) => {} | void;
+    onResize?: (args: any) => {} | void;
+    onMouseDown?: (args: any) => {} | void;
+    onMouseUp?: (args: any) => {} | void;
+    onMouseMove?: (args: any) => {} | void;
+    onMouseOut?: (args: any) => {} | void;
+    onMouseLeave?: (args: any) => {} | void;
+    onWheel?: (args: any) => {} | void;
+    onDrag?: (args: any) => {} | void;
+    onRender?: (args: any) => {} | void;
+};
+
+export type WidgetProps = {
+    id?: string | null;
+    type?: WidgetTypes | null;
+    padding?: number | null;
+    classNames?: string | null;
+    fixedSize?: number | null;
+    orientation?: OrientationTypes | null;
+    hidden?: boolean | null;
+} & WidgetEventProps;

package/src/ui/widget.ui.ts

@@ -1,20 +1,9 @@
 import { UID } from "../core/uid";
 import { IWidget, WUIEvent, WUICallback } from "../interfaces/widget.interface";
 import { Vector2D } from "../types/vector2d.type";
-import { WidgetEventProps, WidgetProps } from "./widget.builder";
+import { WidgetEventProps, WidgetProps, WidgetAlignTypes, WidgetTypes } from "./widget.types";
 import { addNewWidget, connectWidget } from "./widget.collection";
 
-export enum WidgetTypes {
-    FILL = 1,
-    CUSTOM = 2,
-    FREE = 3,
-}
-
-export enum WidgetAlignTypes {
-    HORIZONTAL = 1,
-    VERTICAL = 2,
-}
-
 export class Widget implements IWidget {
     readonly id: string;