mountain-ui 1.0.0

package/src/routes/+page.svelte

@@ -0,0 +1,196 @@
+<script>
+	import EntityButton from '$lib/registry/entityRegistry/components/EntityButton.svelte';
+	import EntityCard from '$lib/registry/entityRegistry/components/EntityCard.svelte';
+	import EntityForm from '$lib/registry/entityRegistry/components/EntityForm.svelte';
+	import FieldButton from '$lib/registry/entityRegistry/components/FieldButton.svelte';
+	import FieldCard from '$lib/registry/entityRegistry/components/FieldCard.svelte';
+	import FieldInput from '$lib/registry/entityRegistry/components/FieldInput.svelte';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import FieldTypeButton from '$lib/registry/fieldTypeRegistry/components/FieldTypeButton.svelte';
+	import FieldTypeCard from '$lib/registry/fieldTypeRegistry/components/FieldTypeCard.svelte';
+	import FieldTypeInput from '$lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte';
+	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
+	import { onMount } from 'svelte';
+
+	const entities = entityRegistry.getAll();
+
+	const fields = fieldTypeRegistry.getAll();
+
+	let values = $state({});
+
+	const testProps = {
+		'list-checkbox': {
+			choices: [
+				{
+					value: 'en analyse',
+					color: '--blue'
+				},
+				{
+					value: 'gagnée',
+					color: '--green'
+				}
+			]
+		},
+		'list-radio': {
+			choices: [
+				{
+					value: 'en analyse',
+					color: '--blue'
+				},
+				{
+					value: 'gagnée',
+					color: '--green'
+				}
+			]
+		},
+		link: {
+			linkId: 86,
+			multiple: false,
+			display: '{structure.symbol}{element.id} - {element.nom}, {element.prix}€'
+		},
+		lines: {
+			linkId: 2,
+			columns: [
+				{
+					columnIndex: 0,
+					rows: [
+						{
+							rowIndex: 0,
+							type: null,
+							fieldId: 205
+						},
+						{
+							rowIndex: 0,
+							type: null,
+							fieldId: 209
+						}
+					],
+					name: 'details'
+				},
+				{
+					columnIndex: 1,
+					rows: [
+						{
+							rowIndex: 0,
+							type: null,
+							fieldId: 206
+						}
+					],
+					name: 'qtt'
+				},
+				{
+					columnIndex: 2,
+					rows: [
+						{
+							rowIndex: 0,
+							type: null,
+							fieldId: 207
+						},
+						{
+							rowIndex: 0,
+							type: null,
+							fieldId: 232
+						}
+					],
+					name: 'tot'
+				}
+			]
+		}
+	};
+
+	onMount(() => {});
+</script>
+
+<h3>Entité</h3>
+{#each $entities as entity}
+	<div class="entity">
+		<h4>{entity.plural_name}</h4>
+		<EntityButton id={entity.id}></EntityButton>
+		<EntityCard variant="outline" id={entity.id}></EntityCard>
+		<h4>Champs</h4>
+		<div class="fields">
+			{#each entity.fields as field}
+				<div class="field">
+					<FieldButton id={field.id}></FieldButton>
+					<FieldCard id={field.id}></FieldCard>
+					<FieldInput id={field.id}></FieldInput>
+				</div>
+			{/each}
+		</div>
+		<EntityForm entityId={entity.id}></EntityForm>
+	</div>
+{/each}
+
+<h3>Type de champs</h3>
+{#each $fields as fieldType}
+	<div class="type">
+		<h3>{fieldType.label}</h3>
+		<h5>Bouton</h5>
+		<FieldTypeButton type={fieldType.type}></FieldTypeButton>
+		<h5>Carte</h5>
+		<FieldTypeCard type={fieldType.type}></FieldTypeCard>
+		<h5>Input</h5>
+		{#if fieldType.components.input === null}
+			<div class="alert">
+				<h4>Pas d'input</h4>
+			</div>
+		{:else}
+			{const getTestProps = () => {
+				if (testProps[fieldType.type]) {
+					return testProps[fieldType.type];
+				}
+				return {};
+			}}
+			<FieldTypeInput
+				label="mon label"
+				onChange={(val) => {
+					values[fieldType.type] = val;
+				}}
+				{...getTestProps()}
+				type={fieldType.type}
+			></FieldTypeInput>
+			{#if values[fieldType.type]}
+				<p>{values[fieldType.type]}</p>
+			{/if}
+		{/if}
+	</div>
+{/each}
+
+<style>
+	.type {
+		padding: var(--pad-m);
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	.alert {
+		padding: var(--pad-m);
+		border-radius: var(--radius-xl);
+		border: 1px solid var(--red);
+	}
+	.alert > h4 {
+		color: var(--red);
+	}
+
+	.entity {
+		padding: var(--pad-m);
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	.fields {
+		padding: var(--pad-m);
+		border-radius: var(--radius-m);
+		border: 1px solid var(--stroke);
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--pad-m);
+		padding: var(--pad-m) 0;
+		border-bottom: 1px solid var(--stroke);
+	}
+
+	.field:last-child {
+		border-bottom: 0px;
+	}
+</style>

package/src/routes/global.css

@@ -0,0 +1,197 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+
+/* variable */
+
+:root {
+    /* palet */
+    --green: #2fcc5c;
+    --green-b: #80f8a233;
+    --red: #cc3737;
+    --red-b: #e1737328;
+    --blue: #1459C1;
+    --blue-b: #1459c136;
+    --orange: #e0a21d;
+    --orange-b: #e0a21d3d;
+    --mauve: #7342FF;
+    --mauve-b: #7442ff31;
+    --yellow: #d8b816;
+    --yellow-b: #FFD60033;
+    --violet: #FA8DE2;
+    --violet-b: #fa8de22d;
+    --white: #F6F6F6;
+    --white-b: #ffffff4d;
+    --white-2: #d6dedf;
+    /* font color */
+    --font-1: #121212;
+    --font-2: #666666;
+    --font-3: #93939B;
+    /* background */
+    --bg-1: #F6F6F6;
+    --bg-2: #dddddd;
+    --bg-3: #bebebe;
+    --bg-blur: #b3b3b334;
+    /* stroke color */
+    --stroke: #C3CDD2;
+    /* default accent */
+    --accent: var(--blue);
+    --accent-b: var(--blue-b);
+    /* box-shadow */
+    --box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+    /* Valeur par défaut du curseur */
+    --default-cursor: initial;
+    /* radius */
+    --radius-xs: 3px;
+    --radius-s: 5px;
+    --radius-m: 8px;
+    --radius-l: 10px;
+    --radius-xl: 12px;
+    --radius-xxl: 16px;
+    /* padding */
+    --pad-xs: 3px;
+    --pad-s: 5px;
+    --pad-m: 7px;
+    --pad-l: 9px;
+    --pad-xl: 12px;
+    --pad-xxl: 16px;
+    /* gradient */
+    --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
+
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* font color */
+        --font-1: #ECEBFF;
+        --font-2: #899098;
+        --font-3: #454545;
+        /* background */
+        --bg-1: #161616;
+        --bg-2: #1F1F1F;
+        --bg-3: #292929;
+        --bg-blur: #03030334;
+        /* stroke color */
+        --stroke: #2A2C32;
+        /* box-shadow */
+        --box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;
+        /* gradient */
+        --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        color-scheme: dark;
+        background-color: var(--bg-1);
+    }
+}
+
+/* desable global style */
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+  background-color: unset;
+  appearance: none;
+  outline: none;
+  border: none;
+  text-decoration: none;
+  cursor: var(--default-cursor);
+}
+
+html {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  scroll-behavior: smooth;
+  background: var(--bg-1);
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+input, textarea {
+  all: unset;
+}
+
+
+.force-cursor * {
+  cursor: var(--default-cursor) !important;
+}
+
+/* font */
+
+:root {
+    /* text size */
+    --text-1: 70px;
+    --text-2: 24px;
+    --text-3: 20px;
+    --text-4: 16px;
+    --text-5: 14px;
+    --text-6: 12px;
+    --text-p: 16px;
+}
+
+.h1, h1 {
+    font-size: var(--text-1);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h2, h2 {
+    font-size: var(--text-2);
+    line-height: 2rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h3, h3 {
+    font-size: var(--text-3);
+    line-height: 1.75rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h4, h4 {
+    font-size: var(--text-4);
+    line-height: 1.5rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 500;
+    color: var(--font-2);
+}
+
+.h5, h5 {
+    font-size: var(--text-5);
+    line-height: 1.25rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 400;
+    color: var(--font-2);
+}
+
+.h6, h6 {
+    font-size: var(--text-6);
+    line-height: 1rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-1);
+}
+
+.p, p {
+    font-size: var(--text-p);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-2);
+}
+
+.mono {
+    font-family:"Geist Mono", 'Inter', sans-serif;
+}

package/src/routes/login/+page.svelte

@@ -0,0 +1,112 @@
+<script>
+	import { AlertCard, Button, Checkbox, Form, Input, Link, setCookie } from 'hamzus-ui';
+
+	let sending = false;
+
+	function handleAfterSubmit(result) {
+		if (result.statusType === 'error') {
+			return;
+		}
+	}
+</script>
+
+<main>
+    <div class="top-right">
+        
+    </div>
+	<div class="container">
+        <Button variant="outline" style="border-radius:50px;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 8V10.1C18.31 10.04 17.81 10.01 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.19 10.01 5.69 10.04 5.25 10.1V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8Z" fill="#292D32"/>
+<path opacity="0.4" d="M22 15V17C22 21 21 22 17 22H7C3 22 2 21 2 17V15C2 11.66 2.7 10.41 5.25 10.1C5.69 10.04 6.19 10.01 6.75 10H17.25C17.81 10.01 18.31 10.04 18.75 10.1C21.3 10.41 22 11.66 22 15Z" fill="#292D32"/>
+<path d="M8 17.0001C7.87 17.0001 7.74 16.9701 7.62 16.9201C7.49 16.8701 7.39001 16.8001 7.29001 16.7101C7.11001 16.5201 7 16.2601 7 16.0001C7 15.8701 7.02999 15.7401 7.07999 15.6201C7.12999 15.5001 7.20001 15.3901 7.29001 15.2901C7.39001 15.2001 7.49 15.1301 7.62 15.0801C7.99 14.9201 8.42999 15.0101 8.70999 15.2901C8.79999 15.3901 8.87001 15.5001 8.92001 15.6201C8.97001 15.7401 9 15.8701 9 16.0001C9 16.2601 8.88999 16.5201 8.70999 16.7101C8.51999 16.8901 8.26 17.0001 8 17.0001Z" fill="#292D32"/>
+<path d="M12 17C11.73 17 11.48 16.89 11.29 16.71C11.2 16.61 11.13 16.5 11.08 16.38C11.03 16.26 11 16.13 11 16C11 15.73 11.11 15.48 11.29 15.29C11.66 14.92 12.33 14.92 12.71 15.29C12.89 15.48 13 15.73 13 16C13 16.13 12.97 16.26 12.92 16.38C12.87 16.5 12.8 16.61 12.71 16.71C12.52 16.89 12.26 17 12 17Z" fill="#292D32"/>
+<path d="M16 17C15.74 17 15.48 16.89 15.29 16.71C15.11 16.52 15 16.27 15 16C15 15.73 15.11 15.48 15.29 15.29C15.67 14.92 16.34 14.92 16.71 15.29C16.75 15.34 16.79 15.39 16.83 15.45C16.87 15.5 16.9 15.56 16.92 15.62C16.95 15.68 16.97 15.74 16.98 15.8C16.99 15.87 17 15.94 17 16C17 16.26 16.89 16.52 16.71 16.71C16.52 16.89 16.26 17 16 17Z" fill="#292D32"/>
+</svg>
+
+
+            <h5>Beta fermée <span style="color: var(--accent);">v{import.meta.env.VITE_VERSION}</span></h5>
+        </Button>
+		<Form
+			afterSubmit={handleAfterSubmit}
+			bind:sending
+			path="/login"
+			style={`
+            width:100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--pad-l);
+            padding: var(--pad-l);`}
+		>
+			<Input name="email" fullWidth label="email" placeholder="votre email" />
+			<Input
+				name="password"
+				fullWidth
+				label="mot de passe"
+				type="password"
+				placeholder="votre mot de passe"
+			/>
+			<h5 style="width:100%;">
+				Mot de passe oublié ? <Link className="h5" href="/forgot-password">envoyé un code</Link>.
+			</h5>
+			<Button
+				style="width:100%;justify-content:center;padding:var(--pad-s);"
+				loading={sending}
+				type="submit"><h5>se connecter</h5></Button
+			>
+            <h5 slot="down-form">Pas encore de compte ? <Link className="h5" href="/create-acount" label="créée un compte"/></h5>
+		</Form>
+	</div>
+    <div class="bottom">
+        <h5>Mountain © 2026-2026</h5>
+    </div>
+</main>
+
+<style>
+	:global(body) {
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+	}
+	:global(body)::-webkit-scrollbar {
+		display: none; /* Chrome, Safari, Opera */
+	}
+	main {
+		display: flex;
+        flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: calc(100% + 1px);
+		flex-shrink: 0;
+	}
+
+    .top-right {
+        position: absolute;
+        top: var(--pad-m);
+        right: var(--pad-m);
+    }
+    .bottom {
+        padding: var(--pad-s);
+    }
+    .bottom :global(.link) {
+        color: var(--font-2) !important;
+    }
+    .bottom :global(.link:hover) {
+        text-decoration: underline !important;
+    }
+
+	.container {
+		width: min(100%, 300px);
+        height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+        justify-content: center;
+		row-gap: var(--pad-xxl);
+	}
+	.container > :global(svg) {
+		width: calc(100% - 24px);
+		height: auto;
+	}
+</style>

package/src/routes/registry/fieldRegistry.svelte.js

@@ -0,0 +1,37 @@
+class FieldRegistry {
+
+    types = $state({});
+
+    register(fieldType) {
+
+        this.types[fieldType.id] = fieldType;
+
+    }
+
+    unregister(id) {
+
+        delete this.types[id];
+
+    }
+
+    has(id) {
+
+        return id in this.types;
+
+    }
+
+    get(id) {
+
+        return this.types[id];
+
+    }
+
+    getAll() {
+
+        return Object.values(this.types);
+
+    }
+
+}
+
+export const fieldRegistry = new FieldRegistry();