mountain-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mountain Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,139 @@
+# Mountain UI
+
+A comprehensive UI component library for ERP systems built with Svelte. Features an extensive registry system for managing field types, entities, and custom UI components.
+
+## Features
+
+- 🎨 **Field Type Registry**: Manage and display different field types (text, numbers, dates, links, calculations, lists, etc.)
+- 📦 **Entity Registry**: Create and manage entity models with automatic form generation
+- 🔧 **Component System**: Pre-built components for forms, cards, buttons, and icons
+- 🎯 **Type-Safe**: Built with Svelte 5 and full runes support
+- 📝 **Form Context**: Advanced form state management with context system
+- 🔗 **Relationships**: Support for linked entities and relational data
+
+## Installation
+
+```bash
+npm install mountain-ui
+```
+
+## Quick Start
+
+### Basic Usage
+
+```javascript
+import { 
+  fieldTypeRegistry, 
+  entityRegistry,
+  registerDefaultFieldTypes,
+  EntityForm 
+} from 'mountain-ui';
+
+// Register default field types
+registerDefaultFieldTypes();
+
+// Use entity form component
+import EntityForm from 'mountain-ui/EntityForm.svelte';
+```
+
+## Components
+
+### Field Type Components
+- `FieldTypeIcon` - Icon for field types
+- `FieldTypeButton` - Button component for field types
+- `FieldTypeCard` - Card display for field types
+- `FieldTypeInput` - Input component for field types
+- `Label` - Label component
+- `Line` - Line separator component
+
+### Entity Components
+- `EntityButton` - Button for entity actions
+- `EntityCard` - Card display for entities
+- `EntityForm` - Complete form for entity data
+- `FieldButton` - Button for field actions
+- `FieldCard` - Card for field display
+- `FieldIcon` - Icon for fields
+- `FieldInput` - Input for field values
+- `FieldIsRequiredIcon` - Indicator for required fields
+- `FieldIsSecretIcon` - Indicator for secret fields
+- `FieldIsUniqueIcon` - Indicator for unique fields
+- `FormCtx` - Form context provider
+- `LinkIcon` - Icon for linked fields
+
+## Registries
+
+### Field Type Registry
+
+```javascript
+import { fieldTypeRegistry, createFieldType } from 'mountain-ui';
+
+// Create custom field type
+const customFieldType = createFieldType({
+  id: 'custom',
+  name: 'Custom Field',
+  icon: 'icon-path'
+});
+
+// Register it
+fieldTypeRegistry.register(customFieldType);
+```
+
+### Entity Registry
+
+```javascript
+import { entityRegistry, createEntity } from 'mountain-ui';
+
+// Create entity
+const entity = createEntity({
+  id: 'user',
+  name: 'User',
+  fields: [...]
+});
+
+// Register it
+entityRegistry.register(entity);
+```
+
+## Dependencies
+
+- Svelte ^5.56.1
+- hamzus-ui ^0.0.255
+
+## Requirements
+
+- Node.js >= 18.0.0
+
+## License
+
+MIT
+
+## Author
+
+Mountain Team
+
+## Repository
+
+[GitHub Repository](https://github.com/yourusername/mountain-ui)
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/index.js

@@ -0,0 +1,36 @@
+// ============================================
+// Field Type Registry
+// ============================================
+export { fieldTypeRegistry } from "./src/lib/registry/fieldTypeRegistry/registry.svelte.js"
+export { createFieldType } from "./src/lib/registry/fieldTypeRegistry/createFieldType.js"
+export { registerDefaultFieldTypes } from "./src/lib/registry/fieldTypeRegistry/registerDefaultFieldTypes.js"
+
+// Field Type Registry Components
+export { default as FieldTypeIcon } from "./src/lib/registry/fieldTypeRegistry/components/FieldTypeIcon.svelte"
+export { default as FieldTypeButton } from "./src/lib/registry/fieldTypeRegistry/components/FieldTypeButton.svelte"
+export { default as FieldTypeCard } from "./src/lib/registry/fieldTypeRegistry/components/FieldTypeCard.svelte"
+export { default as FieldTypeInput } from "./src/lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte"
+export { default as Label } from "./src/lib/registry/fieldTypeRegistry/components/Label.svelte"
+export { default as Line } from "./src/lib/registry/fieldTypeRegistry/components/Line.svelte"
+
+// ============================================
+// Entity Registry
+// ============================================
+export { entityRegistry } from "./src/lib/registry/entityRegistry/registry.svelte.js"
+export { createEntity } from "./src/lib/registry/entityRegistry/createEntity.js"
+
+// Entity Registry Components
+export { default as EntityButton } from "./src/lib/registry/entityRegistry/components/EntityButton.svelte"
+export { default as EntityCard } from "./src/lib/registry/entityRegistry/components/EntityCard.svelte"
+export { default as EntityForm } from "./src/lib/registry/entityRegistry/components/EntityForm.svelte"
+export { default as FieldButton } from "./src/lib/registry/entityRegistry/components/FieldButton.svelte"
+export { default as FieldCard } from "./src/lib/registry/entityRegistry/components/FieldCard.svelte"
+export { default as FieldIcon } from "./src/lib/registry/entityRegistry/components/FieldIcon.svelte"
+export { default as FieldInput } from "./src/lib/registry/entityRegistry/components/FieldInput.svelte"
+export { default as FieldIsRequiredIcon } from "./src/lib/registry/entityRegistry/components/FieldIsRequiredIcon.svelte"
+export { default as FieldIsSecretIcon } from "./src/lib/registry/entityRegistry/components/FieldIsSecretIcon.svelte"
+export { default as FieldIsUniqueIcon } from "./src/lib/registry/entityRegistry/components/FieldIsUniqueIcon.svelte"
+export { default as FormCtx } from "./src/lib/registry/entityRegistry/components/FormCtx.svelte"
+export { default as LinkIcon } from "./src/lib/registry/entityRegistry/components/LinkIcon.svelte"
+
+

package/package.json

@@ -0,0 +1,79 @@
+{
+	"name": "mountain-ui",
+	"private": false,
+	"version": "1.0.0",
+	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"src",
+		"index.js",
+		"README.md",
+		"LICENSE"
+	],
+	"keywords": [
+		"svelte",
+		"ui",
+		"components",
+		"erp",
+		"forms",
+		"fields",
+		"entities",
+		"registry"
+	],
+	"author": "Mountain Team",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/yourusername/mountain-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/yourusername/mountain-ui/issues"
+	},
+	"homepage": "https://github.com/yourusername/mountain-ui#readme",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"build:lib": "vite build --mode lib",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
+	},
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@types/node": "^24",
+		"@vitest/browser-playwright": "^4.1.8",
+		"eslint": "^10.4.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.19.0",
+		"globals": "^17.6.0",
+		"playwright": "^1.60.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"svelte": "^5.56.1",
+		"vite": "^8.0.16",
+		"vitest": "^4.1.8",
+		"vitest-browser-svelte": "^2.1.1"
+	},
+	"dependencies": {
+		"hamzus-ui": "^0.0.255"
+	},
+	"engines": {
+		"node": ">=18.0.0"
+	}
+}

package/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

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

@@ -0,0 +1,14 @@
+<script>
+	import { Button } from "hamzus-ui";
+	import { entityRegistry } from "../registry.svelte";
+
+    let {id, variant="ghost",...props} = $props()
+
+    const entity = entityRegistry.get(id)
+</script>
+
+{#if entity}
+    <Button {...props} {variant}>
+        <h5>{entity.plural_name}</h5>
+    </Button>
+{/if}

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

@@ -0,0 +1,64 @@
+<script>
+	import { Button } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldIcon from './FieldIcon.svelte';
+	import LinkIcon from './LinkIcon.svelte';
+
+	let { id, variant = 'ghost', ...props } = $props();
+
+	const entity = entityRegistry.get(id);
+</script>
+
+{#if entity}
+	<Button {...props} {variant} style="border-radius:var(--radius-xl);">
+		<div class="card">
+			<div class="top">
+				<h3>{entity.plural_name}</h3>
+				<div class="field">
+					<h5>{entity.fields.length}</h5>
+					<FieldIcon color="var(--font-2)" size="16px"></FieldIcon>
+				</div>
+                {#if entity.fields.find(f=>f.type ==="link")}
+                <div class="field">
+                    <h5>{entity.fields.filter(f=>f.type ==="link").length}</h5>
+                    <LinkIcon color="var(--font-2)" size="16px"></LinkIcon>
+                </div>
+                {/if}
+			</div>
+			<h6>/{entity.slug}</h6>
+		</div>
+	</Button>
+{/if}
+
+<style>
+	.card {
+		display: flex;
+		flex-direction: column;
+		align-items: baseline;
+		padding: var(--pad-m);
+	}
+
+	.card .top {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-xxl);
+	}
+
+    .card .field {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-xs);
+    }
+
+    .card h3 {
+        text-transform: capitalize;
+    }
+
+	.card h5 {
+		color: var(--font-1);
+	}
+
+	.card > h6 {
+		color: var(--font-2);
+	}
+</style>

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

@@ -0,0 +1,98 @@
+<script>
+	import { Button, Form } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldInput from './FieldInput.svelte';
+	import FormCtx from './FormCtx.svelte';
+
+	let { entityId, type = 'create' } = $props();
+
+	let ctx = $state({});
+	let detailsCtx = $state({});
+
+	const entity = entityRegistry.select(entityId);
+</script>
+
+{#if $entity}
+<Form style="width:100%">
+	<div class="form">
+			<FormCtx bind:ctx bind:detailsCtx>
+				{#each $entity.fields as field}
+					<FieldInput
+						{detailsCtx}
+						{ctx}
+						onChangeDetails={(value) => {
+							detailsCtx[field.id] = value;
+                            detailsCtx={...detailsCtx}
+						}}
+						onChange={(value) => {
+							ctx[field.id] = value;
+                            ctx={...ctx}
+						}}
+						id={field.id}
+						entityId={$entity.id}
+					></FieldInput>
+				{/each}
+				<div class="button">
+					<Button type="submit">
+						<h5>{type === 'create' ? 'créée' : 'éditer'}</h5>
+						{#if type === 'create'}
+							<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>
+						{:else}
+							<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>
+						{/if}
+					</Button>
+				</div>
+			</FormCtx>
+        </div>
+    </Form>
+{/if}
+
+<style>
+	.form {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.button {
+		width: min(100%, 900px);
+		display: flex;
+		align-items: center;
+		justify-content: end;
+		padding: var(--pad-m);
+	}
+</style>

package/src/lib/registry/entityRegistry/components/FieldButton copy.svelte

@@ -0,0 +1,41 @@
+<script>
+	import FieldTypeIcon from '$lib/registry/fieldTypeRegistry/components/FieldTypeIcon.svelte';
+	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
+	import { Button } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldIsSecretIcon from './FieldIsSecretIcon.svelte';
+	import FieldIsUniqueIcon from './FieldIsUniqueIcon.svelte';
+	import FieldIsRequiredIcon from './FieldIsRequiredIcon.svelte';
+
+	let { id, variant = 'ghost', entityId = null, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+</script>
+
+{#if $field}
+	<Button {variant} {...props}>
+        <FieldTypeIcon type={$field.type}></FieldTypeIcon>
+        <h4>{$field.name}</h4>
+		
+		<div class="icons">
+			{#if $field.is_secret}
+				<FieldIsSecretIcon></FieldIsSecretIcon>
+			{/if}
+			{#if $field.is_unique}
+				<FieldIsUniqueIcon></FieldIsUniqueIcon>
+			{/if}
+			{#if $field.is_required}
+				<FieldIsRequiredIcon></FieldIsRequiredIcon>
+			{/if}
+		</div>
+	</Button>
+{/if}
+
+<style>
+	.icons {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+        margin-left: auto;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+<script>
+	import FieldTypeIcon from '$lib/registry/fieldTypeRegistry/components/FieldTypeIcon.svelte';
+	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
+	import { Button } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldIsSecretIcon from './FieldIsSecretIcon.svelte';
+	import FieldIsUniqueIcon from './FieldIsUniqueIcon.svelte';
+	import FieldIsRequiredIcon from './FieldIsRequiredIcon.svelte';
+
+	let { id, variant = 'ghost', entityId = null, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+</script>
+
+{#if $field}
+	<Button {variant} {...props}>
+        <FieldTypeIcon type={$field.type}></FieldTypeIcon>
+        <h4>{$field.name}</h4>
+		
+		<div class="icons">
+			{#if $field.is_secret}
+				<FieldIsSecretIcon></FieldIsSecretIcon>
+			{/if}
+			{#if $field.is_unique}
+				<FieldIsUniqueIcon></FieldIsUniqueIcon>
+			{/if}
+			{#if $field.is_required}
+				<FieldIsRequiredIcon></FieldIsRequiredIcon>
+			{/if}
+		</div>
+	</Button>
+{/if}
+
+<style>
+	.icons {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+        margin-left: auto;
+	}
+</style>

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

@@ -0,0 +1,60 @@
+<script>
+	import FieldTypeIcon from '$lib/registry/fieldTypeRegistry/components/FieldTypeIcon.svelte';
+	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
+	import { Button } from 'hamzus-ui';
+	import { entityRegistry } from '../registry.svelte';
+	import FieldIsSecretIcon from './FieldIsSecretIcon.svelte';
+	import FieldIsUniqueIcon from './FieldIsUniqueIcon.svelte';
+	import FieldIsRequiredIcon from './FieldIsRequiredIcon.svelte';
+
+	let { id, variant = 'ghost', entityId = null, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+</script>
+
+{#if $field}
+	<Button {variant} {...props}>
+		<div class="card">
+			<div class="top">
+                <FieldTypeIcon type={$field.type}></FieldTypeIcon>
+			    <h4>{$field.name}</h4>
+            </div>
+			<div class="icons">
+				{#if $field.is_secret}
+					<FieldIsSecretIcon></FieldIsSecretIcon>
+                    <h5 style="color: var(--red);">secret</h5>
+				{/if}
+				{#if $field.is_unique}
+					<FieldIsUniqueIcon></FieldIsUniqueIcon>
+                    <h5 style="color: var(--green);">unique</h5>
+				{/if}
+				{#if $field.is_required}
+					<FieldIsRequiredIcon></FieldIsRequiredIcon>
+                    <h5 style="color: var(--red);">requis</h5>
+				{/if}
+			</div>
+		</div>
+	</Button>
+{/if}
+
+<style>
+
+
+	.card {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-xs);
+		padding: var(--pad-m) var(--pad-m) var(--pad-m) 0;
+	}
+
+    .icons,
+    .top {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+
+    .top :global(svg path) {
+        fill: var(--font-2);
+    }
+</style>

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

@@ -0,0 +1,21 @@
+<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="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>
+
+<style>
+    svg {
+        width: var(--size);
+        height: auto;
+        aspect-ratio: 1/1;
+    }
+    svg path {
+        fill: var(--color);
+    }
+</style>

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

@@ -0,0 +1,23 @@
+<script>
+	import FieldTypeInput from "$lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte";
+	import { entityRegistry } from "../registry.svelte";
+
+	let { id, entityId = null, onChange=()=>{}, onChangeDetails=()=>{}, ...props } = $props();
+
+	const field = entityRegistry.selectField(id, entityId);
+
+    let value = $state("")
+
+    function handleChange(newVal) {
+        value = newVal 
+        onChange(value)
+    }
+    function handleChangeDetails(newVal) {
+        onChangeDetails(newVal)
+    }
+</script>
+
+
+{#if $field}
+    <FieldTypeInput {...props} id={$field.id} entity_id={$field.entity_id} label={$field.name} {...$field.props} onChange={handleChange} onChangeDetails={handleChangeDetails} type={$field.type} required={$field.is_required} secret={$field.is_secret} unique={$field.is_unique}></FieldTypeInput>
+{/if}