mountain-ui 1.0.110 → 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.110",
+	"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/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>

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

@@ -0,0 +1,122 @@
+<script>
+	import { IconButton } from 'hamzus-ui';
+
+    let {onCreate = (numberColumn) =>{}} = $props()
+</script>
+
+<div class="group">
+    <h4>Nouvelle rangée</h4>
+	<div class="btn">
+		<IconButton onClick={()=>{onCreate(1)}} size="48px" style="border-radius:var(--radius-l);" variant="outline">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M19.9 7.75H4.1C2.6 7.75 2 8.39 2 9.98V14.02C2 15.61 2.6 16.25 4.1 16.25H19.9C21.4 16.25 22 15.61 22 14.02V9.98C22 8.39 21.4 7.75 19.9 7.75Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(2)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					opacity="0.4"
+					d="M13.5 4.1V19.9C13.5 21.4 14.14 22 15.73 22H19.77C21.36 22 22 21.4 22 19.9V4.1C22 2.6 21.36 2 19.77 2H15.73C14.14 2 13.5 2.6 13.5 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M2 4.1V19.9C2 21.4 2.64 22 4.23 22H8.27C9.86 22 10.5 21.4 10.5 19.9V4.1C10.5 2.6 9.86 2 8.27 2H4.23C2.64 2 2 2.6 2 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(3)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M2 4.1V19.9C2 21.4 2.45147 22 3.57309 22H6.423C7.54462 22 7.99609 21.4 7.99609 19.9V4.1C7.99609 2.6 7.54462 2 6.423 2H3.57309C2.45147 2 2 2.6 2 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M9.00195 4.1V19.9C9.00195 21.4 9.45342 22 10.575 22H13.425C14.5466 22 14.998 21.4 14.998 19.9V4.1C14.998 2.6 14.5466 2 13.425 2H10.575C9.45342 2 9.00195 2.6 9.00195 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M16.0039 4.1V19.9C16.0039 21.4 16.4554 22 17.577 22H20.4269C21.5485 22 22 21.4 22 19.9V4.1C22 2.6 21.5485 2 20.4269 2H17.577C16.4554 2 16.0039 2.6 16.0039 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+		<IconButton onClick={()=>{onCreate(4)}} size="48px" style="border-radius:var(--radius-l);" variant="outline"
+			><svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M2.21875 4.1V19.9C2.21875 21.4 2.51366 22 3.24633 22H5.10795C5.84062 22 6.13553 21.4 6.13553 19.9V4.1C6.13553 2.6 5.84062 2 5.10795 2H3.24633C2.51366 2 2.21875 2.6 2.21875 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M7.43359 4.1V19.9C7.43359 21.4 7.7285 22 8.46117 22H10.3228C11.0555 22 11.3504 21.4 11.3504 19.9V4.1C11.3504 2.6 11.0555 2 10.3228 2H8.46117C7.7285 2 7.43359 2.6 7.43359 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M12.6484 4.1V19.9C12.6484 21.4 12.9433 22 13.676 22H15.5376C16.2703 22 16.5652 21.4 16.5652 19.9V4.1C16.5652 2.6 16.2703 2 15.5376 2H13.676C12.9433 2 12.6484 2.6 12.6484 4.1Z"
+					fill="#292D32"
+				/>
+				<path
+					opacity="0.4"
+					d="M17.8652 4.1V19.9C17.8652 21.4 18.1601 22 18.8928 22H20.7544C21.4871 22 21.782 21.4 21.782 19.9V4.1C21.782 2.6 21.4871 2 20.7544 2H18.8928C18.1601 2 17.8652 2.6 17.8652 4.1Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	</div>
+</div>
+
+<style>
+	.group {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: var(--pad-m);
+		padding: 50px var(--pad-xl);
+		border-radius: var(--radius-xl);
+        background-color: var(--bg-blur);
+        border: 5px solid var(--bg-1);
+		outline: 1px solid var(--bg-2);
+		transition: outline 0.2s ease-out;
+		width: 100%;
+	}
+
+	.group:hover {
+		outline: 1px solid var(--stroke);
+	}
+
+    .btn {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+</style>