mountain-ui 1.0.0

package/src/lib/registry/entityRegistry/components/FieldIsRequiredIcon.svelte

@@ -0,0 +1,22 @@
+<script>
+    let {size = "18px", color="var(--red)"} = $props()
+</script>
+<!-- style="--size:{size};--color:{color};" -->
+<svg style="--size:{size};--color:{color};" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.42 7.95012C18.86 10.3901 18.86 14.3501 16.42 16.7901C13.98 19.2301 10.02 19.2301 7.58 16.7901C5.14 14.3501 5.14 10.3901 7.58 7.95012C10.02 5.51012 13.98 5.51012 16.42 7.95012Z" fill="#FF383C"/>
+<path opacity="0.4" d="M8.24906 22.3899C8.15906 22.3899 8.05906 22.3699 7.96906 22.3399C5.71906 21.4399 3.89905 19.8499 2.67905 17.7499C1.49905 15.6999 1.02905 13.3799 1.33905 11.0199C1.38905 10.6099 1.77905 10.3199 2.17905 10.3699C2.58905 10.4199 2.87904 10.7999 2.82904 11.2099C2.56904 13.2299 2.96907 15.2299 3.97907 16.9899C5.01907 18.7899 6.58905 20.1599 8.51905 20.9299C8.89905 21.0899 9.08906 21.5198 8.93906 21.9098C8.82906 22.2098 8.53906 22.3899 8.24906 22.3899Z" fill="#FF383C"/>
+<path opacity="0.4" d="M5.84961 5.22986C5.62961 5.22986 5.40961 5.12988 5.25961 4.93988C4.99961 4.60988 5.05962 4.13989 5.38962 3.88989C7.29962 2.39989 9.57961 1.60986 11.9996 1.60986C14.3596 1.60986 16.6096 2.36988 18.4996 3.80988C18.8296 4.05988 18.8896 4.52986 18.6396 4.85986C18.3896 5.18986 17.9196 5.24988 17.5896 4.99988C15.9696 3.75988 14.0396 3.10986 11.9996 3.10986C9.91961 3.10986 7.9496 3.78989 6.3096 5.06989C6.1696 5.17989 6.00961 5.22986 5.84961 5.22986Z" fill="#FF383C"/>
+<path opacity="0.4" d="M15.7507 22.3901C15.4507 22.3901 15.1707 22.2101 15.0507 21.9201C14.9007 21.5401 15.0807 21.1001 15.4707 20.9401C17.4007 20.1601 18.9707 18.8001 20.0107 17.0001C21.0307 15.2401 21.4307 13.2401 21.1607 11.2201C21.1107 10.8101 21.4007 10.4301 21.8107 10.3801C22.2107 10.3301 22.6007 10.6201 22.6507 11.0301C22.9507 13.3801 22.4907 15.7101 21.3107 17.7601C20.1007 19.8601 18.2707 21.4401 16.0207 22.3501C15.9407 22.3701 15.8507 22.3901 15.7507 22.3901Z" fill="#FF383C"/>
+</svg>
+
+
+<style>
+    svg {
+        width: var(--size);
+        height: auto;
+        aspect-ratio: 1/1;
+    }
+    svg path {
+        fill: var(--color);
+    }
+</style>

package/src/lib/registry/entityRegistry/components/FieldIsSecretIcon.svelte

@@ -0,0 +1,19 @@
+<script>
+    let {size = "18px", color="var(--red)"} = $props()
+</script>
+<!-- style="--size:{size};--color:{color};" -->
+<svg style="--size:{size};--color:{color};" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#FF383C"/>
+<path d="M15.7491 10.73V10C15.7491 9.07 15.7491 6.25 11.9991 6.25C8.24915 6.25 8.24915 9.07 8.24915 10V10.73C7.02915 11 6.61914 11.79 6.61914 13.5V14.5C6.61914 16.7 7.29915 17.38 9.49915 17.38H14.4991C16.6991 17.38 17.3792 16.7 17.3792 14.5V13.5C17.3792 11.79 16.9691 11 15.7491 10.73ZM11.9991 15.1C11.3891 15.1 10.8992 14.61 10.8992 14C10.8992 13.39 11.3891 12.9 11.9991 12.9C12.6091 12.9 13.0991 13.39 13.0991 14C13.0991 14.61 12.6091 15.1 11.9991 15.1ZM14.2491 10.62H9.74915V10C9.74915 8.54 10.1091 7.75 11.9991 7.75C13.8891 7.75 14.2491 8.54 14.2491 10V10.62Z" fill="#FF383C"/>
+</svg>
+
+<style>
+    svg {
+        width: var(--size);
+        height: auto;
+        aspect-ratio: 1/1;
+    }
+    svg path {
+        fill: var(--color);
+    }
+</style>

package/src/lib/registry/entityRegistry/components/FieldIsUniqueIcon.svelte

@@ -0,0 +1,21 @@
+<script>
+    let {size = "18px", color="var(--green)"} = $props()
+</script>
+<!-- style="--size:{size};--color:{color};" -->
+<svg style="--size:{size};--color:{color};" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#34C759"/>
+<path d="M11.9996 9.87012C11.5096 9.87012 11.0996 10.2701 11.0996 10.7701V13.2401C11.0996 13.7401 11.4996 14.1401 11.9996 14.1401C12.4996 14.1401 12.8996 13.7401 12.8996 13.2401V10.7701C12.8996 10.2701 12.4896 9.87012 11.9996 9.87012Z" fill="#34C759"/>
+<path d="M12 17.5499C9.38 17.5499 7.25 15.4199 7.25 12.7999V11.2C7.25 8.57995 9.38 6.44995 12 6.44995C14.62 6.44995 16.75 8.57995 16.75 11.2V12.7999C16.75 15.4199 14.62 17.5499 12 17.5499ZM12 7.94995C10.21 7.94995 8.75 9.40995 8.75 11.2V12.7999C8.75 14.5899 10.21 16.0499 12 16.0499C13.79 16.0499 15.25 14.5899 15.25 12.7999V11.2C15.25 9.40995 13.79 7.94995 12 7.94995Z" fill="#34C759"/>
+</svg>
+
+
+<style>
+    svg {
+        width: var(--size);
+        height: auto;
+        aspect-ratio: 1/1;
+    }
+    svg path {
+        fill: var(--color);
+    }
+</style>

package/src/lib/registry/entityRegistry/components/FormCtx.svelte

@@ -0,0 +1,7 @@
+<script>
+
+    let { ctx = $bindable({}), detailsCtx = $bindable({})}  = $props()
+
+</script>
+
+<slot/>

package/src/lib/registry/entityRegistry/components/LinkIcon.svelte

@@ -0,0 +1,20 @@
+<script>
+    let {size = "24px", color="var(--font-1)"} = $props()
+</script>
+
+<svg style="--size:{size};--color:{color};" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1998 17.3799C11.4998 17.3799 10.7898 17.1099 10.2598 16.5799C9.73977 16.0599 9.44977 15.3699 9.44977 14.6399C9.44977 13.9099 9.73977 13.2099 10.2598 12.6999L11.6697 11.2899C11.9597 10.9999 12.4397 10.9999 12.7297 11.2899C13.0197 11.5799 13.0197 12.0599 12.7297 12.3499L11.3198 13.7599C11.0798 13.9999 10.9498 14.3099 10.9498 14.6399C10.9498 14.9699 11.0798 15.2899 11.3198 15.5199C11.8098 16.0099 12.5998 16.0099 13.0898 15.5199L15.3098 13.2999C16.5798 12.0299 16.5798 9.96994 15.3098 8.69994C14.0398 7.42994 11.9798 7.42994 10.7098 8.69994L8.28973 11.1199C7.77973 11.6299 7.49976 12.2999 7.49976 13.0099C7.49976 13.7199 7.77973 14.3999 8.28973 14.8999C8.57973 15.1899 8.57973 15.6699 8.28973 15.9599C7.99973 16.2499 7.51974 16.2499 7.22974 15.9599C6.43974 15.1699 6.00977 14.1199 6.00977 12.9999C6.00977 11.8799 6.43974 10.8299 7.22974 10.0399L9.64978 7.61992C11.4998 5.76992 14.5198 5.76992 16.3698 7.61992C18.2198 9.46992 18.2198 12.4899 16.3698 14.3399L14.1498 16.5599C13.6098 17.1099 12.9098 17.3799 12.1998 17.3799Z" fill="#292D32"/>
+<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="#292D32"/>
+</svg>
+
+
+<style>
+    svg {
+        width: var(--size);
+        height: auto;
+        aspect-ratio: 1/1;
+    }
+    svg path {
+        fill: var(--color);
+    }
+</style>

package/src/lib/registry/entityRegistry/createEntity.js

@@ -0,0 +1,40 @@
+
+export function createEntity(config = {}) {
+    const entity = {
+       "id": null,
+        "version": 1,
+        "plural_name": "",
+        "singular_name": "",
+        "normalized_name": "",
+        "slug": "",
+        "symbol": "#",
+        "can_be_created": true,
+        "can_be_edited": true,
+        "can_be_deleted": true,
+        "is_locked": false,
+        "updated_at": null,
+        "created_at": null,
+        "fields": [
+            {
+                "id": null,
+                "link_to_field_id": null,
+                "entity_id": null,
+                "type": "primary",
+                "name": "id",
+                "normalized_name": "id",
+                "is_locked": true,
+                "is_required": false,
+                "is_unique": true,
+                "is_secret": false,
+                "props": {}
+            }
+        ],
+    };
+
+    Object.assign(entity, config);
+
+    entity.getField = (id) =>
+        entity.fields.find(field => field.id === id);
+
+    return entity;
+}

package/src/lib/registry/entityRegistry/registry.svelte.js

@@ -0,0 +1,140 @@
+import { writable, derived, get } from "svelte/store";
+
+function createEntityRegistry() {
+
+    const store = writable({});
+
+    const all = derived(
+        store,
+        ($entities) => Object.values($entities)
+    );
+
+    return {
+
+        subscribe: store.subscribe,
+
+        register(entity) {
+
+            store.update(entities => ({
+                ...entities,
+                [entity.id]: entity
+            }));
+
+        },
+
+        unregister(id) {
+
+            store.update(entities => {
+
+                const copy = { ...entities };
+
+                delete copy[id];
+
+                return copy;
+
+            });
+
+        },
+
+        get(id) {
+
+            return get(store)[id];
+
+        },
+
+        select(id) {
+
+            return derived(
+                store,
+                ($entities) => $entities[id]
+            );
+
+        },
+
+        getLinkedField(entityId, linkId) {
+
+            const entities = get(store);
+
+            // Si l'entité est connue, on cherche directement dedans
+            if (!entityId) return null
+
+            const entity = entities[entityId];
+
+
+            return entity.fields?.find(field => field.props.linkId === linkId) ?? null;
+        },
+        getField(id, entityId = null) {
+
+            const entities = get(store);
+
+            // Si l'entité est connue, on cherche directement dedans
+            if (entityId) {
+
+                const entity = entities[entityId];
+
+                if (!entity) {
+                    return null;
+                }
+
+                return entity.fields?.find(field => field.id === id) ?? null;
+            }
+
+
+            // Sinon on parcourt toutes les entités
+            for (const entity of Object.values(entities)) {
+
+                const field = entity.fields?.find(field => field.id === id);
+
+                if (field) {
+                    return field;
+                }
+
+            }
+
+            return null;
+
+        },
+
+        selectField(id, entityId = null) {
+
+            return derived(
+                store,
+                ($entities) => {
+
+                    if (entityId) {
+
+                        const entity = $entities[entityId];
+
+                        return entity?.fields?.find(field => field.id === id) ?? null;
+
+                    }
+
+
+                    for (const entity of Object.values($entities)) {
+
+                        const field = entity.fields?.find(field => field.id === id);
+
+                        if (field) {
+                            return field;
+                        }
+
+                    }
+
+                    return null;
+
+                }
+            );
+
+        },
+
+        getAll() {
+
+            return all;
+
+        }
+
+    };
+
+}
+
+export const entityRegistry = createEntityRegistry();

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeButton.svelte

@@ -0,0 +1,12 @@
+<script>
+	import FieldButton from "../fieldTypes/FieldTypeButton.svelte";
+	import { fieldTypeRegistry } from "../registry.svelte";
+
+    let {type, variant="ghost", ...props} = $props()
+
+    const field = fieldTypeRegistry.select(type)
+</script>
+
+{#if $field}
+    <svelte:component {variant} {...props} this={$field.components.button} {...$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeCard.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { fieldTypeRegistry } from "../registry.svelte";
+
+    let {type, variant="ghost", ...props} = $props()
+
+    const field = fieldTypeRegistry.select(type)
+</script>
+
+{#if $field}
+    <svelte:component {variant} {...props} this={$field.components.card} {...$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeIcon.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { fieldTypeRegistry } from "../registry.svelte";
+
+    let {type, ...props} = $props()
+
+    const field = fieldTypeRegistry.select(type)
+</script>
+
+{#if $field && $field?.components?.icon}
+    <svelte:component {...props} this={$field.components.icon} field={$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { fieldTypeRegistry } from "../registry.svelte";
+
+    let {type, ...props} = $props()
+
+    const field = fieldTypeRegistry.select(type)
+</script>
+
+{#if $field}
+    <svelte:component {...props} this={$field.components.input} field={$field}></svelte:component>
+{/if}

package/src/lib/registry/fieldTypeRegistry/components/Label.svelte

@@ -0,0 +1,28 @@
+<script>
+	import FieldIsRequiredIcon from '$lib/registry/entityRegistry/components/FieldIsRequiredIcon.svelte';
+	import FieldIsSecretIcon from '$lib/registry/entityRegistry/components/FieldIsSecretIcon.svelte';
+	import FieldIsUniqueIcon from '$lib/registry/entityRegistry/components/FieldIsUniqueIcon.svelte';
+
+	let { label = '', required = false, unique = false, secret = false } = $props();
+</script>
+
+<h4>
+	{label}
+	<span class="icons">
+		{#if required}
+			<FieldIsRequiredIcon size="12px"></FieldIsRequiredIcon>
+		{/if}
+        {#if unique}
+            <FieldIsUniqueIcon size="12px"></FieldIsUniqueIcon>
+        {/if}
+        {#if secret}
+            <FieldIsSecretIcon size="12px"></FieldIsSecretIcon>
+        {/if}
+	</span>
+</h4>
+
+<style>
+	.icons {
+		vertical-align: super;
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/components/Line.svelte

@@ -0,0 +1,31 @@
+<script>
+	let { children, compact = false } = $props();
+</script>
+
+<div class="line" class:compact>
+	{@render children()}
+</div>
+
+<style>
+	.line {
+		display: grid;
+		grid-template-columns: 1fr 350px;
+		width: min(100%, 900px);
+		padding: var(--pad-s);
+		gap: var(--pad-s);
+	}
+
+	.line:not(:last-of-type) {
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	@media (max-width: 500px) {
+		.line {
+			grid-template-columns: 1fr;
+		}
+	}
+	.line.compact {
+		grid-template-columns: 1fr;
+        border-bottom:initial;
+	}
+</style>

package/src/lib/registry/fieldTypeRegistry/createFieldType.js

@@ -0,0 +1,34 @@
+export function createFieldType(config) {
+    return {
+        type:"",
+        
+        category_path:[],
+
+        label: "",
+        description: "",
+
+        is_hidden:true,
+
+        can_be_required:true,
+        can_be_unique:true,
+
+        defaultProps:{},
+
+        components: {
+            icon: null,
+            button: null,
+            card: null,
+            input: null,
+            cell: null,
+            filter: null,
+            properties: null
+        },
+
+        formatter: (value) => value,
+        parser: (value) => value,
+
+        validate: () => true,
+
+        ...config
+    };
+}

package/src/lib/registry/fieldTypeRegistry/fieldTypes/FieldTypeButton.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { Button } from 'hamzus-ui';
+
+	let { children, label, components, ...props } = $props();
+</script>
+
+<Button {...props}>
+	<svelte:component this={components.icon}></svelte:component>
+	<h5>{label}</h5>
+</Button>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/FieldTypeCard.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { Button } from 'hamzus-ui';
+
+	let { children, label, description, components, style, ...props } = $props();
+</script>
+
+<Button {...props}>
+	<div class="content">
+		<div class="left">
+			<svelte:component this={components.icon}></svelte:component>
+			<div class="text">
+				<h5>{label}</h5>
+				<p>{description}</p>
+			</div>
+		</div>
+		<slot name="endContent" />
+	</div>
+</Button>
+
+<style>
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+        padding: var(--pad-xl) var(--pad-xl) var(--pad-xl) 0;
+	}
+
+	.left {
+		display: flex;
+		column-gap: var(--pad-xl);
+	}
+
+    .left :global(svg path) {
+        fill: var(--font-2);
+    }
+
+    .text {
+        text-align: left;
+    }
+
+</style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Button.svelte

@@ -0,0 +1,10 @@
+<script>
+	import FieldTypeButton from "../FieldTypeButton.svelte";
+	import Icon from "./Icon.svelte";
+
+    let {...props} = $props()
+</script>
+
+<FieldTypeButton {...props}>
+   
+</FieldTypeButton>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Card.svelte

@@ -0,0 +1,6 @@
+<script>
+	import FieldCard from "../FieldTypeCard.svelte";
+    let {...props} = $props()
+</script>
+
+<FieldCard {...props}></FieldCard>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Icon.svelte

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 7.75H3C2.59 7.75 2.25 7.41 2.25 7C2.25 6.59 2.59 6.25 3 6.25H21C21.41 6.25 21.75 6.59 21.75 7C21.75 7.41 21.41 7.75 21 7.75Z" fill="#292D32"/>
+<path d="M21 12.75H3C2.59 12.75 2.25 12.41 2.25 12C2.25 11.59 2.59 11.25 3 11.25H21C21.41 11.25 21.75 11.59 21.75 12C21.75 12.41 21.41 12.75 21 12.75Z" fill="#292D32"/>
+<path d="M21 17.75H3C2.59 17.75 2.25 17.41 2.25 17C2.25 16.59 2.59 16.25 3 16.25H21C21.41 16.25 21.75 16.59 21.75 17C21.75 17.41 21.41 17.75 21 17.75Z" fill="#292D32"/>
+</svg>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Input.svelte

@@ -0,0 +1,150 @@
+<script>
+	import FieldInput from '$lib/registry/entityRegistry/components/FieldInput.svelte';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import { Button, IconButton, ResponsiveTable } from 'hamzus-ui';
+
+	let {
+		value = $bindable(null),
+		label = '',
+		required = false,
+		unique = false,
+		secret = false,
+		compact = false,
+		linkId = null,
+		columns = [],
+		onChange = () => {},
+		onChangeDetails = () => {},
+		...props
+	} = $props();
+
+	function createLine() {
+		return {
+			id: crypto.randomUUID(),
+			ctx: {},
+			detailsCtx: {}
+		};
+	}
+
+	let table = $state([createLine()]);
+
+	function handleAddLine() {
+		table = [...table, createLine()];
+	}
+
+	const entity = entityRegistry.select(linkId);
+
+	function handleDeleteLine(lineIndex) {
+		table = table.filter((_, i) => i !== lineIndex);
+		handleChangeDetailsCtx();
+		handleChange();
+	}
+	function handleChangeDetailsCtx() {
+		onChangeDetails(table);
+	}
+	function handleChange() {
+		const value = JSON.stringify(table.map((line) => line.ctx));
+
+		onChange(value);
+	}
+</script>
+
+<h4>{label}</h4>
+<ResponsiveTable.Root let:ctx>
+	<ResponsiveTable.Header>
+		{#if columns.length > 0}
+			{#each columns as column, columnIndex}
+				<ResponsiveTable.HeaderCell align="left" label={column.name ?? '-'} {ctx}>
+					<h6>{columns[columnIndex].name ?? ''}</h6>
+					<!-- {column.columnIndex} -->
+				</ResponsiveTable.HeaderCell>
+			{/each}
+		{/if}
+	</ResponsiveTable.Header>
+	<ResponsiveTable.Body>
+		{#if $entity}
+			{#each table as line, lineIndex (line.id)}
+				<ResponsiveTable.Line>
+					{#each columns as column, columnIndex}
+						<ResponsiveTable.Cell {ctx}>
+							{#each column.rows as row, rowIndex}
+								<FieldInput
+									compact
+									detailsCtx={table[lineIndex].detailsCtx}
+									ctx={table[lineIndex].ctx}
+									onChangeDetails={(value) => {
+										table[lineIndex].detailsCtx[row.fieldId] = value;
+										table = [...table];
+										handleChangeDetailsCtx();
+									}}
+									onChange={(value) => {
+										table[lineIndex].ctx[row.fieldId] = value;
+										table = [...table];
+										handleChange();
+									}}
+									id={row.fieldId}
+									value={table[lineIndex].ctx[row.fieldId]}
+								></FieldInput>
+							{/each}
+							{#if columnIndex + 1 === columns.length}
+								<div class="delete">
+									<IconButton
+										variant="destructive"
+										onClick={() => {
+											handleDeleteLine(lineIndex);
+										}}
+									>
+										<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>
+							{/if}
+						</ResponsiveTable.Cell>
+					{/each}
+				</ResponsiveTable.Line>
+			{/each}
+		{/if}
+	</ResponsiveTable.Body>
+</ResponsiveTable.Root>
+<Button label="ajouter une rangée" onClick={handleAddLine}></Button>
+
+<style>
+	:global(.table-container .line):has(.delete :global(.button):hover) {
+		background-color: var(--red-b);
+	}
+
+	:global(.table-container:not(:has(.line:nth-child(2)))) .delete {
+		display: none;
+	}
+
+	.delete {
+		display: flex;
+		justify-content: end;
+		padding: var(--pad-s);
+	}
+</style>