mountain-ui 1.0.109 → 1.0.111

package/index.d.ts

@@ -131,3 +131,32 @@ export { default as EntryActionCard } from './src/lib/registry/entryActionRegist
 export { default as EntryActionForm } from './src/lib/registry/entryActionRegistry/components/EntryActionForm.svelte';
 export { default as EntryActionButton } from './src/lib/registry/entryActionRegistry/components/EntryActionButton.svelte';
 export { default as EntryActionsButtons } from './src/lib/registry/entryActionRegistry/components/EntryActionsButtons.svelte';
+
+// ============================================
+// WidgetGroup Registry
+// ============================================
+
+export { widgetGroupRegistry } from './src/lib/registry/widgetGroupRegistry/registry.svelte.js';
+export { createWidget } from './src/lib/registry/widgetGroupRegistry/createWidget.js';
+export { createWidgetGroup } from './src/lib/registry/widgetGroupRegistry/createWidgetGroup.js';
+export { registerWidgetGroups } from './src/lib/registry/widgetGroupRegistry/registerWidgetGroups.js';
+
+export { default as EmptySlot } from './src/lib/registry/widgetGroupRegistry/components/EmptySlot.svelte';
+export { default as GroupPreview } from './src/lib/registry/widgetGroupRegistry/components/GroupPreview.svelte';
+export { default as NewWidgetGroup } from './src/lib/registry/widgetGroupRegistry/components/NewWidgetGroup.svelte';
+export { default as WidgetGroup } from './src/lib/registry/widgetGroupRegistry/components/WidgetGroup.svelte';
+
+// ============================================
+// WidgetType Registry
+// ============================================
+
+export { widgetTypeRegistry } from './src/lib/registry/widgetTypeRegistry/registry.svelte.js';
+export { createWidgetType } from './src/lib/registry/widgetTypeRegistry/createWidgetType.js';
+export { registerWidgetTypes } from './src/lib/registry/widgetTypeRegistry/registerWidgetTypes.js';
+
+export { default as CreateWidgetDialog } from './src/lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte';
+export { default as Widget } from './src/lib/registry/widgetTypeRegistry/components/Widget.svelte';
+export { default as WidgetConfig } from './src/lib/registry/widgetTypeRegistry/components/WidgetConfig.svelte';
+export { default as WidgetPreview } from './src/lib/registry/widgetTypeRegistry/components/WidgetPreview.svelte';
+export { default as WidgetTypeButton } from './src/lib/registry/widgetTypeRegistry/components/WidgetTypeButton.svelte';
+export { default as WidgetTypeSelector } from './src/lib/registry/widgetTypeRegistry/components/WidgetTypeSelector.svelte';

package/index.js

@@ -135,3 +135,32 @@ export { default as EntryActionCard } from './src/lib/registry/entryActionRegist
 export { default as EntryActionForm } from './src/lib/registry/entryActionRegistry/components/EntryActionForm.svelte';
 export { default as EntryActionButton } from './src/lib/registry/entryActionRegistry/components/EntryActionButton.svelte';
 export { default as EntryActionsButtons } from './src/lib/registry/entryActionRegistry/components/EntryActionsButtons.svelte';
+
+// ============================================
+// WidgetGroup Registry
+// ============================================
+
+export { widgetGroupRegistry } from './src/lib/registry/widgetGroupRegistry/registry.svelte.js';
+export { createWidget } from './src/lib/registry/widgetGroupRegistry/createWidget.js';
+export { createWidgetGroup } from './src/lib/registry/widgetGroupRegistry/createWidgetGroup.js';
+export { registerWidgetGroups } from './src/lib/registry/widgetGroupRegistry/registerWidgetGroups.js';
+
+export { default as EmptySlot } from './src/lib/registry/widgetGroupRegistry/components/EmptySlot.svelte';
+export { default as GroupPreview } from './src/lib/registry/widgetGroupRegistry/components/GroupPreview.svelte';
+export { default as NewWidgetGroup } from './src/lib/registry/widgetGroupRegistry/components/NewWidgetGroup.svelte';
+export { default as WidgetGroup } from './src/lib/registry/widgetGroupRegistry/components/WidgetGroup.svelte';
+
+// ============================================
+// WidgetType Registry
+// ============================================
+
+export { widgetTypeRegistry } from './src/lib/registry/widgetTypeRegistry/registry.svelte.js';
+export { createWidgetType } from './src/lib/registry/widgetTypeRegistry/createWidgetType.js';
+export { registerWidgetTypes } from './src/lib/registry/widgetTypeRegistry/registerWidgetTypes.js';
+
+export { default as CreateWidgetDialog } from './src/lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte';
+export { default as Widget } from './src/lib/registry/widgetTypeRegistry/components/Widget.svelte';
+export { default as WidgetConfig } from './src/lib/registry/widgetTypeRegistry/components/WidgetConfig.svelte';
+export { default as WidgetPreview } from './src/lib/registry/widgetTypeRegistry/components/WidgetPreview.svelte';
+export { default as WidgetTypeButton } from './src/lib/registry/widgetTypeRegistry/components/WidgetTypeButton.svelte';
+export { default as WidgetTypeSelector } from './src/lib/registry/widgetTypeRegistry/components/WidgetTypeSelector.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.109",
+	"version": "1.0.111",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",

package/src/lib/registry/navigationRegistry/components/NavigationGroupRow.svelte

@@ -3,13 +3,14 @@
 	import { navigationRegistry } from '../registry.svelte';
 	import { onMount } from 'svelte';
 	import NavbarIcon from './NavbarIcon.svelte';
+	import NewNavbarGroupDialog from './NewNavbarGroupDialog.svelte';
 
-	let { id, onOpen = (val)=>{}, isOpen = false, activeDrag = null, onRename, onDelete = null, onDrop } = $props();
+	let { id, onOpen = (val)=>{}, isOpen = false, activeDrag = null, onEdit, onDelete = null, onDrop } = $props();
 
 	const navigationGroup = $derived(navigationRegistry.select(id));
 	const navigationChildren = $derived(navigationRegistry.getAllFromGroup(id));
 
-	let renameIsOpen = $state(false);
+	let editIsOpen = $state(false);
 	let newName = $state('');
 	let isRenaming = $state(false);
 
@@ -19,14 +20,14 @@
 	let isHovered = $state(false);
 
 	async function handleRename() {
-		if (!onRename) return;
+		if (!onEdit) return;
 
 		isRenaming = true;
-		await onRename(id, newName);
+		await onEdit(id);
 		isRenaming = false;
 
 		newName = '';
-		renameIsOpen = false;
+		editIsOpen = false;
 	}
 	async function handleDelete() {
 		if (!onDelete) return;
@@ -37,6 +38,10 @@
 
 		deleteIsOpen = false;
 	}
+	async function handleEdit(icon, color, name) {
+		if (!onEdit) return;
+		await onEdit(id, icon, color, name);
+	}
 
 	function handleDragEnter(event) {
 		event.preventDefault();
@@ -77,7 +82,7 @@
 		</Button>
 	</div>
 </Dialog>
-<Dialog bind:isOpen={deleteIsOpen}>
+<Dialog bind:isOpen={editIsOpen}>
 	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
 		<h3>Renommer ce groupe ?</h3>
 		<Input bind:value={newName} label="nouveau nom" placeholder="mon groupe"></Input>
@@ -87,7 +92,8 @@
 	</div>
 </Dialog>
 {#if $navigationGroup}
-	<div
+    <NewNavbarGroupDialog reset={false} onCreate={handleEdit} bind:isOpen={editIsOpen} icon={$navigationGroup.icon} name={$navigationGroup.name} color={$navigationGroup.color}></NewNavbarGroupDialog>
+<div
 		class="group"
 		class:is-hovered={isHovered}
 		ondragenter={handleDragEnter}
@@ -102,37 +108,20 @@
 			<h4>{$navigationGroup.name}</h4>
 		</div>
 		<div class="right">
-			{#if onRename}
+			{#if onEdit}
 				<IconButton
 					onClick={() => {
-						renameIsOpen = true;
+						editIsOpen = true;
 					}}
 					size="26px"
 					variant="ghost"
-					><svg
-						width="24"
-						height="24"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
 					>
-						<path
-							d="M11.02 20.25H7.5C6.75 20.25 6.2 20.22 5.73 20.15C2.4 19.78 1.75 17.8 1.75 14.5V9.5C1.75 6.2 2.41 4.21 5.76 3.84C6.2 3.78 6.75 3.75 7.5 3.75H10.96C11.37 3.75 11.71 4.09 11.71 4.5C11.71 4.91 11.37 5.25 10.96 5.25H7.5C6.82 5.25 6.34 5.28 5.95 5.33C3.92 5.55 3.25 6.19 3.25 9.5V14.5C3.25 17.81 3.92 18.44 5.92 18.67C6.34 18.73 6.82 18.75 7.5 18.75H11.02C11.43 18.75 11.77 19.09 11.77 19.5C11.77 19.91 11.43 20.25 11.02 20.25Z"
-							fill="#292D32"
-						/>
-						<path
-							d="M16.4995 20.25H15.0195C14.6095 20.25 14.2695 19.91 14.2695 19.5C14.2695 19.09 14.6095 18.75 15.0195 18.75H16.4995C17.1795 18.75 17.6595 18.72 18.0495 18.67C20.0795 18.45 20.7495 17.81 20.7495 14.5V9.5C20.7495 6.19 20.0795 5.56 18.0795 5.33C17.6595 5.27 17.1795 5.25 16.4995 5.25H15.0195C14.6095 5.25 14.2695 4.91 14.2695 4.5C14.2695 4.09 14.6095 3.75 15.0195 3.75H16.4995C17.2495 3.75 17.7995 3.78 18.2695 3.85C21.5995 4.22 22.2495 6.2 22.2495 9.5V14.5C22.2495 17.8 21.5895 19.79 18.2395 20.16C17.7995 20.22 17.2495 20.25 16.4995 20.25Z"
-							fill="#292D32"
-						/>
-						<path
-							d="M15 22.75C14.59 22.75 14.25 22.41 14.25 22V2C14.25 1.59 14.59 1.25 15 1.25C15.41 1.25 15.75 1.59 15.75 2V22C15.75 22.41 15.41 22.75 15 22.75Z"
-							fill="#292D32"
-						/>
-						<path
-							d="M8 16.25C7.59 16.25 7.25 15.91 7.25 15.5V8.5C7.25 8.09 7.59 7.75 8 7.75C8.41 7.75 8.75 8.09 8.75 8.5V15.5C8.75 15.91 8.41 16.25 8 16.25Z"
-							fill="#292D32"
-						/>
-					</svg>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H11C11.41 1.25 11.75 1.59 11.75 2C11.75 2.41 11.41 2.75 11 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V13C21.25 12.59 21.59 12.25 22 12.25C22.41 12.25 22.75 12.59 22.75 13V15C22.75 20.43 20.43 22.75 15 22.75Z" fill="#292D32"/>
+<path d="M8.49935 17.6901C7.88935 17.6901 7.32935 17.4701 6.91935 17.0701C6.42935 16.5801 6.21935 15.8701 6.32935 15.1201L6.75935 12.1101C6.83935 11.5301 7.21935 10.7801 7.62935 10.3701L15.5093 2.49006C17.4993 0.500059 19.5193 0.500059 21.5093 2.49006C22.5993 3.58006 23.0893 4.69006 22.9893 5.80006C22.8993 6.70006 22.4193 7.58006 21.5093 8.48006L13.6293 16.3601C13.2193 16.7701 12.4693 17.1501 11.8893 17.2301L8.87935 17.6601C8.74935 17.6901 8.61935 17.6901 8.49935 17.6901ZM16.5693 3.55006L8.68935 11.4301C8.49935 11.6201 8.27935 12.0601 8.23935 12.3201L7.80935 15.3301C7.76935 15.6201 7.82935 15.8601 7.97935 16.0101C8.12935 16.1601 8.36935 16.2201 8.65935 16.1801L11.6693 15.7501C11.9293 15.7101 12.3793 15.4901 12.5593 15.3001L20.4393 7.42006C21.0893 6.77006 21.4293 6.19006 21.4793 5.65006C21.5393 5.00006 21.1993 4.31006 20.4393 3.54006C18.8393 1.94006 17.7393 2.39006 16.5693 3.55006Z" fill="#292D32"/>
+<path d="M19.8496 9.82978C19.7796 9.82978 19.7096 9.81978 19.6496 9.79978C17.0196 9.05978 14.9296 6.96978 14.1896 4.33978C14.0796 3.93978 14.3096 3.52978 14.7096 3.40978C15.1096 3.29978 15.5196 3.52978 15.6296 3.92978C16.2296 6.05978 17.9196 7.74978 20.0496 8.34978C20.4496 8.45978 20.6796 8.87978 20.5696 9.27978C20.4796 9.61978 20.1796 9.82978 19.8496 9.82978Z" fill="#292D32"/>
+</svg>
+
 				</IconButton>
 			{/if}
 			{#if onDelete}
@@ -172,6 +161,7 @@
 					</svg>
 				</IconButton>
 			{/if}
+            <span class="separator"></span>
 			<IconButton
 				onClick={() => {
 					isOpen = !isOpen;
@@ -247,4 +237,12 @@
 	.is-hovered :global( svg path) {
 		fill: var(--accent);
 	}
+
+    .separator {
+        display: flex;
+        width: 1px;
+        height: 20px;
+        background-color: var(--bg-2);
+        flex-shrink: 0;
+    }
 </style>

package/src/lib/registry/navigationRegistry/components/NewNavbarGroupDialog.svelte

@@ -4,22 +4,17 @@
 	import IconSelector from '../../../components/Icons/IconSelector.svelte';
 	import { Button, Dialog, IconButton, Input } from 'hamzus-ui';
 
-	let { isOpen = $bindable(false), onCreate = async (icon, color, name) => {} } = $props();
+	let {
+		name = $bindable(''),
+		color = $bindable('var(--font-2)'),
+		icon = $bindable('Files|folder'),
+		isOpen = $bindable(false),
+		onCreate = async (icon, color, name) => {},
+        reset = true
+	} = $props();
 
 	let isCreating = $state(false);
 
-	let name = $state('');
-	let color = $state('var(--font-2)');
-	let icon = $state('Files|folder');
-
-	$effect(() => {
-		if (isOpen) return;
-
-		name = '';
-		color = 'var(--font-2)';
-		icon = 'Files|folder';
-	});
-
 	function handleChangeIcon(newIcon) {
 		icon = newIcon;
 	}
@@ -27,6 +22,15 @@
 	async function handleCreate() {
 		isCreating = true;
 		await onCreate(icon, color, name);
+
+		if (reset) {
+			// reset des valeurs
+			name = '';
+			color = 'var(--font-2)';
+			icon = 'Files|folder';
+		}
+
+		// fermeture du dialog
 		isCreating = false;
 		isOpen = false;
 	}
@@ -36,23 +40,23 @@
 	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
 		<h3>Nouveau groupe</h3>
 		<div class="icon-data">
-            <h5>Icon</h5>
+			<h5>Icon</h5>
 			<div class="right">
-                <ColorSelector
-				value={color}
-				onChange={(value) => {
-					color = value;
-				}}
-			></ColorSelector>
-			<IconSelector onClick={handleChangeIcon}>
-				<div class="icon" style="--icon-color:{color};">
-					<Icon value={icon}></Icon>
-				</div>
-			</IconSelector>
-            </div>
+				<ColorSelector
+					value={color}
+					onChange={(value) => {
+						color = value;
+					}}
+				></ColorSelector>
+				<IconSelector onClick={handleChangeIcon}>
+					<div class="icon" style="--icon-color:{color};">
+						<Icon value={icon}></Icon>
+					</div>
+				</IconSelector>
+			</div>
 		</div>
 		<Input bind:value={name} placeholder="nom du groupe" />
-		<Button loading={isCreating} onClick={handleCreate}>créer</Button>
+		<Button loading={isCreating} onClick={handleCreate}>enregistrer</Button>
 	</div>
 </Dialog>
 
@@ -60,18 +64,18 @@
 	.icon-data {
 		display: flex;
 		align-items: center;
-        column-gap: var(--pad-m);
-        justify-content: space-between;
-        width: 100%;
-        padding: var(--pad-s) 0;
-        border-bottom: 1px solid var(--bg-2);
+		column-gap: var(--pad-m);
+		justify-content: space-between;
+		width: 100%;
+		padding: var(--pad-s) 0;
+		border-bottom: 1px solid var(--bg-2);
 	}
 
-    .right {
+	.right {
 		display: flex;
 		align-items: center;
-        column-gap: var(--pad-m);
-    }
+		column-gap: var(--pad-m);
+	}
 	.icon {
 		width: fit-content;
 		display: flex;
@@ -81,13 +85,13 @@
 		min-height: 35px;
 		background-color: var(--bg-blur);
 		border-radius: var(--radius-m);
-        cursor: pointer;
+		cursor: pointer;
 	}
 	.icon :global(svg path) {
 		fill: var(--icon-color);
 	}
 
-    .icon:hover {
-        background-color: var(--bg-2);
-    }
+	.icon:hover {
+		background-color: var(--bg-2);
+	}
 </style>

package/src/lib/registry/navigationRegistry/registerNavigation.js

@@ -34,7 +34,7 @@ export async function registerNavigation() {
             }
             
             navigationRegistry.register(createNavigation({
-                id: child.id,
+                id: "c_" + child.id,
                 type: "entity",
                 name: entity.plural_name,
                 parent_id: group.id,
@@ -60,7 +60,5 @@ export async function registerNavigation() {
             position: null,
         }))
     }
-
-    console.log(get(navigationRegistry.getAll()));
     
 }

package/src/lib/registry/projectRegistry/createProject.js

@@ -5,6 +5,7 @@ import { registerDefaultViewEntriesTypes } from "../viewEntriesTypeRegistry/regi
 import { projectRegistry } from "./registry.svelte";
 import { navigationRegistry } from "../navigationRegistry/registry.svelte";
 import { registerNavigation } from "../navigationRegistry/registerNavigation";
+import { registerWidgetTypes } from "../widgetTypeRegistry/registerWidgetTypes";
 
 export function createProject(config = {}) {
     const project = {
@@ -97,6 +98,7 @@ export function createProject(config = {}) {
         // charger les fieldType
         registerDefaultFieldTypes();
         registerDefaultViewEntriesTypes();
+        registerWidgetTypes()
         // charger les constant
 
         // charger les entité

package/src/lib/registry/widgetGroupRegistry/components/EmptySlot.svelte

@@ -0,0 +1,47 @@
+<script>
+	let { onClick = () => {} } = $props();
+</script>
+
+<div onclick={onClick} class="empty-slot">
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z"
+			fill="#292D32"
+		/>
+		<path
+			d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V6C11.25 5.59 11.59 5.25 12 5.25C12.41 5.25 12.75 5.59 12.75 6V18C12.75 18.41 12.41 18.75 12 18.75Z"
+			fill="#292D32"
+		/>
+	</svg>
+</div>
+
+<style>
+	.empty-slot {
+		width: 100%;
+		height: 1fr;
+		flex: 1;
+		background-color: var(--bg-blur);
+		border-radius: var(--radius-l);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+        transition: background-color .2s ease-out;
+	}
+	.empty-slot:hover {
+		background-color: var(--bg-2);
+	}
+
+	.empty-slot svg {
+		width: 35px;
+		height: auto;
+	}
+
+	.empty-slot svg path {
+		fill: var(--font-2);
+        transition: fill .2s ease-out;
+	}
+	.empty-slot:hover svg path {
+		fill: var(--font-1);
+	}
+</style>

package/src/lib/registry/widgetGroupRegistry/components/GroupPreview.svelte

@@ -0,0 +1,142 @@
+<script>
+	import { handlers } from 'svelte/legacy';
+	import EmptySlot from './EmptySlot.svelte';
+	import CreateWidgetDialog from '$lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte';
+	import { IconButton, sendRequest, toast } from 'hamzus-ui';
+	import { registerWidgetGroups } from '../registerWidgetGroups';
+	import { widgetGroupRegistry } from '../registry.svelte';
+	import WidgetPreview from '$lib/registry/widgetTypeRegistry/components/WidgetPreview.svelte';
+
+	let { id = null, numberOfColumn = 1, children = [] } = $props();
+
+	let targetPosition = $state(null);
+	let newWidgetIsOpen = $state(false);
+
+	const group = $derived(widgetGroupRegistry.get(id));
+
+	async function handleAdd(position) {
+		targetPosition = position;
+		newWidgetIsOpen = true;
+	}
+
+	async function handleSave(data) {
+        console.log(data);
+        
+		const request = await sendRequest({
+			path: '/create-widget',
+			data: {
+				type: data.type,
+				props: JSON.stringify({
+					...data,
+					group_id: id,
+					position: targetPosition
+				})
+			}
+		});
+
+		if (request.statusType === 'error') {
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+
+		registerWidgetGroups();
+	}
+
+	async function handleDelete(id) {
+		const request = await sendRequest({
+			path: '/delete-widget',
+			data: {
+				widgetId: id
+			}
+		});
+
+		if (request.statusType === 'error') {
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+		registerWidgetGroups();
+	}
+	async function handleDeleteGroup() {
+		const request = await sendRequest({
+			path: '/delete-widget-group',
+			data: {
+				groupId: id
+			}
+		});
+
+		if (request.statusType === 'error') {
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+		registerWidgetGroups();
+	}
+</script>
+
+<CreateWidgetDialog save={handleSave} bind:isOpen={newWidgetIsOpen}></CreateWidgetDialog>
+
+<div class="row">
+    <IconButton onClick={handleDeleteGroup} variant="secondary">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z" fill="#292D32"/>
+<path d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z" fill="#292D32"/>
+<path d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z" fill="#292D32"/>
+<path d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z" fill="#292D32"/>
+<path d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z" fill="#292D32"/>
+</svg>
+
+    </IconButton>
+	<div
+		class="group-container"
+		style="grid-template-columns:repeat({numberOfColumn}, minmax(0, 1fr));"
+	>
+		{#each Array.from({ length: numberOfColumn }) as column, index}
+			{const child = group.getChild(index + 1)}
+			{#if child}
+				<WidgetPreview
+					onDelete={() => {
+						handleDelete(child.id);
+					}}
+					type={child.type}
+					{...child.props}
+				></WidgetPreview>
+			{:else}
+				<EmptySlot
+					onClick={() => {
+						handleAdd(index + 1);
+					}}
+				></EmptySlot>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+	.row {
+		display: flex;
+		column-gap: var(--pad-s);
+        width: 100%;
+	}
+	.group-container {
+		width: 100%;
+		display: grid;
+		padding: var(--pad-xl);
+		column-gap: var(--pad-m);
+		min-height: 150px;
+		border: 1px solid var(--bg-2);
+		transition: border 0.2s ease-out;
+		border-radius: var(--radius-xxl);
+	}
+
+	.group-container:hover {
+		border: 1px solid var(--stroke);
+	}
+</style>