From 879e2e979b76b853aed7de5d2f0f705498c4ff19 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Wed, 31 Jan 2024 21:07:14 +0100
Subject: [PATCH] :sparkles: Type Changes

---
 src/lib/stores.ts                   |   2 +-
 src/lib/types.ts                    |  81 +++++++++------
 src/lib/utils.ts                    |   6 +-
 src/routes/builder/+page.svelte     |   4 +-
 src/routes/builder/EditModal.svelte |  90 +++++++----------
 src/routes/builder/Grid.svelte      | 150 +++++++++++++---------------
 src/routes/builder/Menu.svelte      | 130 ++++++++++++------------
 7 files changed, 226 insertions(+), 237 deletions(-)

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 41cad6d..6979d66 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -4,4 +4,4 @@ import type { Views } from './types';
 import { localStorageStore } from '@skeletonlabs/skeleton';
 
 export let gridController = writable<GridController>();
-export let views = localStorageStore<Views>('views', { views: [], current: 0 });
+export let views = localStorageStore<Views>('views', { pages: [], current: 0 });
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6827591..21ead61 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,56 +1,75 @@
+export type Option<T> = T | null;
+
 export enum GuiType {
-	Header = 'header',
-	BodyText = 'body-text',
-	Buttons = 'buttons',
-	Alert = 'alert'
+	Header = 0,
+	BodyText,
+	Buttons,
+	Alert
 }
 
-export enum GuiAlign {
-	Left = 'left',
-	Right = 'right',
-	Top = 'top',
-	Bottom = 'bottom',
-	Center = 'center'
+export enum Align {
+	Left = 0,
+	Right,
+	Top,
+	Bottom,
+	Center
 }
 
-export enum EventType {
-	View = 'view',
-	Function = 'function'
+export function alignToString(align: Align | string): string {
+	switch (align) {
+		case Align.Left:
+			return 'Left';
+		case Align.Right:
+			return 'Right';
+		case Align.Top:
+			return 'Top';
+		case Align.Bottom:
+			return 'Bottom';
+		case Align.Center:
+			return 'Center';
+		default:
+			throw new Error('Invalid Align value');
+	}
 }
 
-export type Option<T> = T | null;
-export type IdArray<T> = { rows: T[]; id: string }[];
-export type EventData<T extends EventType> = T extends EventType.View ? number : string;
+export type Event =
+	| {
+			View: number;
+	  }
+	| {
+			Function: string;
+	  };
 
 export interface Views {
-	views: IdArray<Item>;
+	pages: Page[];
 	current: number;
 }
 
-export interface Item {
+export interface Page {
+	id: string;
+	page: View[];
+}
+
+export interface View {
 	id: string;
-	type: GuiType;
 	name: string;
+	type: GuiType;
 	moveable: boolean;
 	x: number;
 	y: number;
 	w: number;
 	h: number;
-	data: { textValue: Option<string | AlignedText>; actions: Option<Option<Actions>[]> };
+	data: Data;
 }
 
-export interface AlignedText {
-	horizontal: GuiAlign;
-	vertical: GuiAlign;
-	text: string;
+export interface Data {
+	text_value: Option<String>;
+	horizontal: Option<Align>;
+	vertical: Option<Align>;
+	actions: Option<Option<Action>[]>;
 }
 
-export interface Actions {
-	textValue: string | undefined;
+export interface Action {
+	text_value: String;
 	event: Event;
 }
-
-export interface Event {
-	type: EventType;
-	data: EventData<EventType> | undefined;
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b078530..afc2ea1 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import type { Item } from './types';
+import type { View } from './types';
 
 export function keys<T extends object>(obj: T) {
 	return Object.keys(obj) as Array<keyof T>;
@@ -39,7 +39,7 @@ export function areObjectsEqual(obj1: any, obj2: any): boolean {
 	return true;
 }
 
-export function isItemColliding(item: Item, otherItem: Item) {
+export function isItemColliding(item: View, otherItem: View) {
 	return (
 		item.id !== otherItem.id &&
 		item.x <= otherItem.x + otherItem.w - 1 &&
@@ -49,7 +49,7 @@ export function isItemColliding(item: Item, otherItem: Item) {
 	);
 }
 
-export function areItemsColliding(item: Item, items: Item[]) {
+export function areItemsColliding(item: View, items: View[]) {
 	for (const item2 of items) {
 		if (isItemColliding(item, item2)) return true;
 	}
diff --git a/src/routes/builder/+page.svelte b/src/routes/builder/+page.svelte
index 482f8f4..55d061e 100644
--- a/src/routes/builder/+page.svelte
+++ b/src/routes/builder/+page.svelte
@@ -8,9 +8,9 @@
 	<meta name="description" content="Website's specific UI-Builder" />
 </svelte:head>
 
-<h2 class="h2 m-2">{$views.views.length != 0 ? `View ${$views.current + 1}` : 'No Views!'}</h2>
+<h2 class="h2 m-2">{$views.pages.length != 0 ? `View ${$views.current + 1}` : 'No Views!'}</h2>
 <div
-	class="card p-4 m-2 {$views.views.length != 0
+	class="card p-4 m-2 {$views.pages.length != 0
 		? 'variant-ghost-primary'
 		: 'variant-ghost'} overflow-hidden"
 >
diff --git a/src/routes/builder/EditModal.svelte b/src/routes/builder/EditModal.svelte
index 2720453..c9462da 100644
--- a/src/routes/builder/EditModal.svelte
+++ b/src/routes/builder/EditModal.svelte
@@ -3,7 +3,7 @@
 	// Stores
 	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import { views } from '$lib/stores';
-	import { EventType, GuiAlign, GuiType, type Item } from '$lib/types';
+	import { Align, alignToString, GuiType, type View, type Action } from '$lib/types';
 
 	// Props
 	/** Exposes parent props to this component. */
@@ -14,12 +14,15 @@
 	const cBase = 'card p-4 w-modal shadow-xl space-y-4';
 	const cHeader = 'text-2xl font-bold';
 
-	let item: Item = $modalStore[0]?.meta.toChange;
+	let view: View = $modalStore[0]?.meta.toChange;
 
 	// apply reactivity on close
 	modalStore.subscribe((modals: ModalSettings[]) => {
 		if (!modals.length) $views = $views;
 	});
+
+	// select shenanigans
+	let ev = new Array(view.data.actions?.length).fill('view');
 </script>
 
 <!-- @component This is an Edit Modal for the Items. -->
@@ -28,101 +31,86 @@
 	<div class={cBase}>
 		<header class={cHeader}>Edit</header>
 
-		{#if item.data.textValue != null}
-			{#if typeof item.data.textValue == 'string'}
+		{#if view.data.text_value != null}
+			{#if typeof view.data.text_value == 'string'}
 				<label class="label">
 					<span>Edit Text</span>
 					<input
 						class="input"
 						type="text"
 						placeholder="Text Value and/or Variable using {'{'}var_name{'}'}"
-						bind:value={item.data.textValue}
-						maxlength="70"
-					/>
-				</label>
-			{:else if typeof item.data.textValue == 'object'}
-				<label class="label">
-					<span>Edit Text</span>
-					<input
-						class="input"
-						type="text"
-						placeholder="Text Value and/or Variable using {'{'}var_name{'}'}"
-						bind:value={item.data.textValue.text}
+						bind:value={view.data.text_value}
 						maxlength="70"
 					/>
 				</label>
+			{/if}
+			{#if view.data.horizontal != null && view.data.vertical != null}
 				<label class="label">
 					<span>Horizontal Align</span>
-					<select class="select" bind:value={item.data.textValue.horizontal}>
-						{#each Object.values(GuiAlign).filter((value) => typeof value === 'string') as align}
-							<option value={align}>{align.charAt(0).toUpperCase() + align.slice(1)}</option>
+					<select class="select" bind:value={view.data.horizontal}>
+						{#each Object.values(Align).filter((value) => typeof value === 'number') as align}
+							<option value={align}>{alignToString(align)}</option>
 						{/each}
 					</select>
 				</label>
 				<label class="label">
 					<span>Vertical Align</span>
-					<select class="select" bind:value={item.data.textValue.vertical}>
-						{#each Object.values(GuiAlign).filter((value) => typeof value === 'string') as align}
-							<option value={align}>{align.charAt(0).toUpperCase() + align.slice(1)}</option>
+					<select class="select" bind:value={view.data.vertical}>
+						{#each Object.values(Align).filter((value) => typeof value === 'number') as align}
+							<option value={align}>{alignToString(align)}</option>
 						{/each}
 					</select>
 				</label>
-			{:else}
-				<aside class="alert variant-ghost">
-					<div class="alert-message">
-						<h3 class="h3">Critical Error!</h3>
-						<p>
-							Wrong provided Type found! Please re-add the item. If the issue persists, feel free to
-							open an issue on GitHub!
-						</p>
-					</div>
-				</aside>
 			{/if}
 		{/if}
 
-		{#if item.data.actions != null}
-			{#each item.data.actions as action, i}
+		{#if view.data.actions != null}
+			{#each view.data.actions as action, i}
 				{#if action != null}
 					<label class="label">
 						<span>Action {i + 1}</span>
 						<input
 							class="input"
 							type="text"
-							disabled={item.type == GuiType.Alert}
+							disabled={view.type == GuiType.Alert}
 							placeholder="Text Value and/or Variable using {'{'}var_name{'}'}"
-							bind:value={action.textValue}
+							bind:value={action.text_value}
 							maxlength="40"
 						/>
 						<div class="input-group input-group-divider grid-cols-[1fr_auto]">
-							{#if action?.event.type === EventType.View}
+							{#if 'View' in action.event}
 								<input
 									type="number"
 									placeholder="Number of View (leave blank for Closing the App)"
-									bind:value={action.event.data}
+									bind:value={action.event.View}
 									maxlength="10"
 								/>
 							{:else}
 								<input
 									type="text"
 									placeholder="Function Name with () for Params"
-									bind:value={action.event.data}
+									bind:value={action.event.Function}
 									maxlength="40"
 								/>
 							{/if}
 							<select
-								bind:value={action.event.type}
+								bind:value={ev[i]}
 								on:change={() => {
-									if (action) action.event.data = undefined;
+									if (ev[i] === 'view') {
+										if (action) action.event = { View: 1 };
+									} else if (ev[i] === 'function') {
+										if (action) action.event = { Function: '' };
+									}
 								}}
 							>
-								<option value={EventType.View}>View</option>
-								<option value={EventType.Function}>Function</option>
+								<option value={'view'}>View</option>
+								<option value={'function'}>Function</option>
 							</select>
 						</div>
 						<button
 							class="btn variant-filled"
 							on:click={() => (action = null)}
-							disabled={item.type == GuiType.Alert}
+							disabled={view.type == GuiType.Alert}
 							><i class="fa-solid fa-minus mr-2"></i>Remove Action</button
 						>
 					</label>
@@ -131,14 +119,12 @@
 						<div>Action {i + 1}</div>
 						<button
 							class="btn variant-filled"
-							on:click={() =>
-								(action = {
-									textValue: '(Edit Text)',
-									event: {
-										type: EventType.View,
-										data: ''
-									}
-								})}><i class="fa-solid fa-plus mr-2"></i> Add Action</button
+							on:click={() => {
+								action = {
+									text_value: '',
+									event: { View: 1 }
+								};
+							}}><i class="fa-solid fa-plus mr-2"></i> Add Action</button
 						>
 					</label>
 				{/if}
diff --git a/src/routes/builder/Grid.svelte b/src/routes/builder/Grid.svelte
index 63c2f41..7c0bbec 100644
--- a/src/routes/builder/Grid.svelte
+++ b/src/routes/builder/Grid.svelte
@@ -5,18 +5,18 @@
 	import { keys } from '$lib/utils';
 	import { Grid, GridItem } from 'svelte-grid-extended';
 	import { gridController, views } from '$lib/stores';
-	import { GuiAlign, GuiType, type Item } from '$lib/types';
+	import { Align, GuiType, type View } from '$lib/types';
 
 	const modalStore = getModalStore();
 
 	function deleteItem(id: string) {
-		$views.views[$views.current].rows = $views.views[$views.current].rows.filter(
-			(item: { id: string }) => item.id !== id
+		$views.pages[$views.current].page = $views.pages[$views.current].page.filter(
+			(view: { id: string }) => view.id !== id
 		);
 		$views = $views;
 	}
 
-	function editItem(toChange: Item) {
+	function editItem(toChange: View) {
 		const modal: ModalSettings = {
 			type: 'component',
 			component: 'editModal',
@@ -28,31 +28,31 @@
 		modalStore.trigger(modal);
 	}
 
-	$: verticalAlign = (align: GuiAlign) => {
+	$: verticalAlign = (align: Align) => {
 		switch (align) {
-			case GuiAlign.Left:
+			case Align.Left:
 				return '';
-			case GuiAlign.Right:
+			case Align.Right:
 				return '';
-			case GuiAlign.Top:
+			case Align.Top:
 				return 'items-start';
-			case GuiAlign.Bottom:
+			case Align.Bottom:
 				return 'items-end';
-			case GuiAlign.Center:
+			case Align.Center:
 				return 'items-center';
 		}
 	};
-	$: horizontalAlign = (align: GuiAlign) => {
+	$: horizontalAlign = (align: Align) => {
 		switch (align) {
-			case GuiAlign.Left:
+			case Align.Left:
 				return 'justify-start';
-			case GuiAlign.Right:
+			case Align.Right:
 				return 'justify-end';
-			case GuiAlign.Top:
+			case Align.Top:
 				return '';
-			case GuiAlign.Bottom:
+			case Align.Bottom:
 				return '';
-			case GuiAlign.Center:
+			case Align.Center:
 				return 'justify-center';
 		}
 	};
@@ -67,74 +67,62 @@
 	bind:controller={$gridController}
 	class="z-[1]"
 >
-	{#if $views.views[$views.current]}
-		{#each $views.views[$views.current].rows as item (item.id)}
+	{#if $views.pages[$views.current]}
+		{#each $views.pages[$views.current].page as view (view.id)}
 			<div transition:fade={{ duration: 300 }}>
 				<GridItem
 					previewClass="transition-all duration-200 variant-glass rounded-md"
 					activeClass="z-[2]"
-					id={item.id}
-					bind:x={item.x}
-					bind:y={item.y}
-					bind:w={item.w}
-					bind:h={item.h}
-					movable={item.moveable}
+					id={view.id}
+					bind:x={view.x}
+					bind:y={view.y}
+					bind:w={view.w}
+					bind:h={view.h}
+					movable={view.moveable}
 					resizable={false}
 					class="pt-2 pb-2 pr-5 pl-5 rounded-md variant-glass"
 				>
-					{#if item.type == GuiType.Header}
-						{#if typeof item.data.textValue == 'object'}
-							<div
-								class="flex {!item.data.textValue?.text ? 'opacity-30' : ''} {verticalAlign(
-									item.data.textValue?.vertical || GuiAlign.Top
-								)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
-							>
-								<h2 class="lg:h2 h3 truncate">
-									{#if item.data.textValue?.text}
-										{item.data.textValue.text}
-									{:else}
-										Unset
-									{/if}
-								</h2>
-							</div>
-						{:else}
-							<p class="truncate">
-								TypeError: Mismatched Type. Please delete this Element and put in a new one!
-							</p>
-						{/if}
-					{:else if item.type == GuiType.BodyText}
-						{#if typeof item.data.textValue == 'object'}
-							<div
-								class="flex {!item.data.textValue?.text ? 'opacity-30' : ''} {verticalAlign(
-									item.data.textValue?.vertical || GuiAlign.Top
-								)} {horizontalAlign(item.data.textValue?.horizontal || GuiAlign.Left)} h-full"
-							>
-								<p class="lg:text-base text-xs truncate">
-									{#if item.data.textValue?.text}
-										{item.data.textValue.text}
-									{:else}
-										Unset
-									{/if}
-								</p>
-							</div>
-						{:else}
-							<p class="truncate">
-								TypeError: Mismatched Type. Please delete this Element and put in a new one!
+					{#if view.type == GuiType.Header}
+						<div
+							class="flex {!view.data.text_value ? 'opacity-30' : ''} {verticalAlign(
+								view.data.vertical || Align.Top
+							)} {horizontalAlign(view.data.horizontal || Align.Left)} h-full"
+						>
+							<h2 class="lg:h2 h3 truncate">
+								{#if view.data.text_value}
+									{view.data.text_value}
+								{:else}
+									Unset
+								{/if}
+							</h2>
+						</div>
+					{:else if view.type == GuiType.BodyText}
+						<div
+							class="flex {!view.data.text_value ? 'opacity-30' : ''} {verticalAlign(
+								view.data.vertical || Align.Top
+							)} {horizontalAlign(view.data.horizontal || Align.Left)} h-full"
+						>
+							<p class="lg:text-base text-xs truncate">
+								{#if view.data.text_value}
+									{view.data.text_value}
+								{:else}
+									Unset
+								{/if}
 							</p>
-						{/if}
-					{:else if item.type == GuiType.Buttons}
-						{#if item.data.actions}
+						</div>
+					{:else if view.type == GuiType.Buttons}
+						{#if view.data.actions}
 							<div class="flex justify-between items-center h-full">
-								{#each item.data.actions as action}
+								{#each view.data.actions as action}
 									{#if action}
 										<span
 											class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit lg:text-base text-xs"
 										>
-											{action.textValue}
+											{action.text_value}
 											{#if action.event}
 												<span
 													class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
-													>{action.event.type}</span
+													>{Object.keys(action.event)[0]}</span
 												>
 											{/if}
 										</span>
@@ -147,22 +135,22 @@
 								{/each}
 							</div>
 						{/if}
-					{:else if item.type == GuiType.Alert}
-						{#if item.data.textValue}
-							<p class="truncate lg:text-base text-xs">{item.data.textValue}</p>
+					{:else if view.type == GuiType.Alert}
+						{#if view.data.text_value}
+							<p class="truncate lg:text-base text-xs">{view.data.text_value}</p>
 						{:else}
 							<p class="opacity-30 truncate lg:text-base text-xs">Unset</p>
 						{/if}
 						<div class="flex justify-center items-end h-full">
-							{#if item.data.actions && item.data.actions[0]}
+							{#if view.data.actions && view.data.actions[0]}
 								<span
 									class="rounded-sm pt-2 pb-2 pr-5 pl-5 variant-filled truncate h-fit mb-8 lg:text-base text-xs"
 								>
-									{item.data.actions[0].textValue}
-									{#if item.data.actions[0].event}
+									{view.data.actions[0].text_value}
+									{#if view.data.actions[0].event}
 										<span
 											class="ml-2 badge variant-filled-tertiary z-10 place-self-center truncate lg:text-base text-xs"
-											>{item.data.actions[0].event.type}</span
+											>{Object.keys(view.data.actions[0].event)[0]}</span
 										>
 									{/if}
 								</span>
@@ -174,22 +162,22 @@
 							{/if}
 						</div>
 					{:else}
-						{item.name},
-						{#each keys(item.data) as key (key)}
-							<span class="flex-auto truncate">{key}: {item.data[key]}, </span>
+						{view.name},
+						{#each keys(view.data) as key (key)}
+							<span class="flex-auto truncate">{key}: {view.data[key]}, </span>
 						{/each}
 					{/if}
-					<span class="badge variant-filled absolute -top-4 -left-4 z-[2]">{item.name}</span>
+					<span class="badge variant-filled absolute -top-4 -left-4 z-[2]">{view.name}</span>
 					<button
 						class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-primary absolute -top-4 right-8 z-[99]"
 						title="Edit"
-						on:click={() => editItem(item)}
+						on:click={() => editItem(view)}
 						on:pointerdown={(e) => e.stopPropagation()}><i class="fa-solid fa-pen"></i></button
 					>
 					<button
 						class="btn w-8 h-[24px] pt-1 pb-1 pr-2 pl-2 variant-filled-error absolute -top-4 -right-4 z-[99]"
 						title="Delete"
-						on:click={() => deleteItem(item.id)}
+						on:click={() => deleteItem(view.id)}
 						on:pointerdown={(e) => e.stopPropagation()}
 						><i class="fa-solid fa-delete-left"></i></button
 					>
diff --git a/src/routes/builder/Menu.svelte b/src/routes/builder/Menu.svelte
index c679ee9..0ab4353 100644
--- a/src/routes/builder/Menu.svelte
+++ b/src/routes/builder/Menu.svelte
@@ -1,106 +1,102 @@
 <script lang="ts">
 	import { gridController, views } from '$lib/stores';
 	import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
-	import {
-		GuiAlign,
-		type AlignedText,
-		GuiType,
-		type Actions,
-		type Option,
-		type Views,
-		EventType
-	} from './../../lib/types';
+	import { Align, GuiType, type Option, type Views, type Data, type View } from './../../lib/types';
 	import { areItemsColliding } from '$lib/utils';
 
 	const drawerStore = getDrawerStore();
 
 	let currentTile: number = 0;
 
-	function addNewItem(type: GuiType) {
-		const { name, w, h, x, y, moveable, actions, textValue } = matchTypes(type);
-		const newPosition =
-			x || y ? { x: x ?? w, y: y ?? h } : $gridController.getFirstAvailablePosition(w, h);
+	function addNewView(type: GuiType) {
+		let newView = matchTypes(type);
 
-		const newItem = {
-			id: crypto.randomUUID(),
-			x: newPosition?.x ?? 0,
-			y: newPosition?.y ?? 0,
-			w,
-			h,
-			type,
-			name,
-			moveable,
-			data: { textValue, actions }
-		};
+		const pos = $gridController.getFirstAvailablePosition(newView.w, newView.h);
+		if (newView.x == 0) newView.x = pos?.x || 0;
+		if (newView.y == 0) newView.y = pos?.y || 0;
 
-		if (!areItemsColliding(newItem, $views.views[$views.current].rows))
-			$views.views[$views.current].rows = newPosition
-				? [...$views.views[$views.current].rows, newItem]
-				: $views.views[$views.current].rows;
+		if (!areItemsColliding(newView, $views.pages[$views.current].page)) {
+			$views.pages[$views.current].page.push(newView);
+			$views.pages[$views.current] = $views.pages[$views.current];
+		}
 	}
 
-	function matchTypes(type: GuiType): {
-		name: string;
-		w: number;
-		h: number;
-		x: number | undefined;
-		y: number | undefined;
-		textValue: Option<string | AlignedText>;
-		actions: Option<Option<Actions>[]>;
-		moveable: boolean;
-	} {
+	function matchTypes(type: GuiType): View {
 		switch (type) {
 			case GuiType.Header:
 				return {
+					id: crypto.randomUUID(),
 					name: 'Header',
+					type: GuiType.Header,
 					w: 20,
 					h: 2,
-					x: undefined,
-					y: undefined,
+					x: 0,
+					y: 0,
 					moveable: true,
-					textValue: { text: '', horizontal: GuiAlign.Left, vertical: GuiAlign.Center },
-					actions: null
+					data: {
+						text_value: '',
+						horizontal: Align.Left,
+						vertical: Align.Center,
+						actions: null
+					}
 				};
 			case GuiType.BodyText:
 				return {
+					id: crypto.randomUUID(),
 					name: 'Body Text',
+					type: GuiType.BodyText,
 					w: 20,
 					h: 2,
-					x: undefined,
-					y: undefined,
+					x: 0,
+					y: 0,
 					moveable: true,
-					textValue: { text: '', horizontal: GuiAlign.Left, vertical: GuiAlign.Center },
-					actions: null
+					data: {
+						text_value: '',
+						horizontal: Align.Left,
+						vertical: Align.Center,
+						actions: null
+					}
 				};
 			case GuiType.Buttons:
 				return {
+					id: crypto.randomUUID(),
 					name: 'Buttons',
+					type: GuiType.Buttons,
 					w: 20,
 					h: 2,
 					x: 0,
 					y: 8,
 					moveable: false,
-					textValue: null,
-					actions: [null, null, null]
+					data: {
+						text_value: null,
+						horizontal: null,
+						vertical: null,
+						actions: [null, null, null]
+					}
 				};
 			case GuiType.Alert:
 				return {
+					id: crypto.randomUUID(),
 					name: 'Alert',
+					type: GuiType.Alert,
 					w: 20,
 					h: 10,
 					x: 0,
 					y: 0,
 					moveable: false,
-					textValue: '',
-					actions: [
-						{
-							textValue: 'Ok',
-							event: {
-								type: EventType.View,
-								data: undefined
+					data: {
+						text_value: null,
+						horizontal: null,
+						vertical: null,
+						actions: [
+							{
+								text_value: 'Ok',
+								event: {
+									View: 0
+								}
 							}
-						}
-					]
+						]
+					}
 				};
 		}
 	}
@@ -113,7 +109,7 @@
 		select: () => void;
 		del: (id: string) => void;
 	}[] {
-		return views.views.map((view, index) => ({
+		return views.pages.map((view, index) => ({
 			id: view.id,
 			label: index + 1,
 			badge: views.current == index ? 'current' : undefined,
@@ -123,8 +119,8 @@
 				$views = views;
 			},
 			del: (id: string) => {
-				if ($views.current != 0 && $views.views.length - 1 <= $views.current) $views.current -= 1;
-				$views.views = views.views.filter((item) => item.id !== id);
+				if ($views.current != 0 && $views.pages.length - 1 <= $views.current) $views.current -= 1;
+				$views.pages = views.pages.filter((item) => item.id !== id);
 			}
 		}));
 	}
@@ -142,8 +138,8 @@
 
 	$: disabled = (views: Views, type: GuiType | undefined) => {
 		return (
-			views.views.length == 0 ||
-			(views.views[views.current].rows.find((item) => item.type === type) != undefined ?? true)
+			views.pages.length == 0 ||
+			(views.pages[views.current].page.find((view) => view.type === type) != undefined ?? true)
 		);
 	};
 	$: submenu = [
@@ -156,7 +152,7 @@
 					label: 'Header',
 					badge: 'Moveable',
 					disabled: disabled($views, GuiType.Header),
-					select: () => addNewItem(GuiType.Header),
+					select: () => addNewView(GuiType.Header),
 					del: undefined
 				},
 				{
@@ -164,7 +160,7 @@
 					label: 'Body Text',
 					badge: 'Moveable',
 					disabled: disabled($views, GuiType.BodyText),
-					select: () => addNewItem(GuiType.BodyText),
+					select: () => addNewView(GuiType.BodyText),
 					del: undefined
 				},
 				{
@@ -172,7 +168,7 @@
 					label: 'Buttons',
 					badge: 'Fixed',
 					disabled: disabled($views, GuiType.Buttons),
-					select: () => addNewItem(GuiType.Buttons),
+					select: () => addNewView(GuiType.Buttons),
 					del: undefined
 				}
 			]
@@ -186,7 +182,7 @@
 					label: 'Alert',
 					badge: 'Fixed',
 					disabled: disabled($views, GuiType.Alert),
-					select: () => addNewItem(GuiType.Alert),
+					select: () => addNewView(GuiType.Alert),
 					del: undefined
 				},
 				{
@@ -238,7 +234,7 @@
 					badge: undefined,
 					disabled: undefined,
 					select: () => {
-						$views.views.push({ rows: [], id: crypto.randomUUID() });
+						$views.pages.push({ page: [], id: crypto.randomUUID() });
 						$views = $views;
 					},
 					del: undefined