mountain-ui 1.0.2 → 1.0.3

package/README.md

@@ -22,11 +22,11 @@ npm install mountain-ui
 ### Basic Usage
 
 ```javascript
-import { 
-  fieldTypeRegistry, 
-  entityRegistry,
-  registerDefaultFieldTypes,
-  EntityForm 
+import {
+	fieldTypeRegistry,
+	entityRegistry,
+	registerDefaultFieldTypes,
+	EntityForm
 } from 'mountain-ui';
 
 // Register default field types
@@ -39,6 +39,7 @@ 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
@@ -47,6 +48,7 @@ import EntityForm from 'mountain-ui/EntityForm.svelte';
 - `Line` - Line separator component
 
 ### Entity Components
+
 - `EntityButton` - Button for entity actions
 - `EntityCard` - Card display for entities
 - `EntityForm` - Complete form for entity data
@@ -69,9 +71,9 @@ import { fieldTypeRegistry, createFieldType } from 'mountain-ui';
 
 // Create custom field type
 const customFieldType = createFieldType({
-  id: 'custom',
-  name: 'Custom Field',
-  icon: 'icon-path'
+	id: 'custom',
+	name: 'Custom Field',
+	icon: 'icon-path'
 });
 
 // Register it

package/index.js

@@ -1,36 +1,34 @@
 // ============================================
 // 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"
+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"
+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"
+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"
-
-
+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

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "dist/index.js",
@@ -11,7 +11,9 @@
 	"exports": {
 		".": {
 			"import": "./dist/index.js",
-			"types": "./dist/index.d.ts"
+			"require": "./index.js",
+			"types": "./index.d.ts",
+			"svelte": "./index.js"
 		},
 		"./package.json": "./package.json"
 	},

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

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

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

@@ -18,12 +18,12 @@
 					<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}
+				{#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>
@@ -44,15 +44,15 @@
 		column-gap: var(--pad-xxl);
 	}
 
-    .card .field {
-        display: flex;
-        align-items: center;
-        column-gap: var(--pad-xs);
-    }
+	.card .field {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-xs);
+	}
 
-    .card h3 {
-        text-transform: capitalize;
-    }
+	.card h3 {
+		text-transform: capitalize;
+	}
 
 	.card h5 {
 		color: var(--font-1);

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

@@ -13,8 +13,8 @@
 </script>
 
 {#if $entity}
-<Form style="width:100%">
-	<div class="form">
+	<Form style="width:100%">
+		<div class="form">
 			<FormCtx bind:ctx bind:detailsCtx>
 				{#each $entity.fields as field}
 					<FieldInput
@@ -22,11 +22,11 @@
 						{ctx}
 						onChangeDetails={(value) => {
 							detailsCtx[field.id] = value;
-                            detailsCtx={...detailsCtx}
+							detailsCtx = { ...detailsCtx };
 						}}
 						onChange={(value) => {
 							ctx[field.id] = value;
-                            ctx={...ctx}
+							ctx = { ...ctx };
 						}}
 						id={field.id}
 						entityId={$entity.id}
@@ -77,8 +77,8 @@
 					</Button>
 				</div>
 			</FormCtx>
-        </div>
-    </Form>
+		</div>
+	</Form>
 {/if}
 
 <style>

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

@@ -14,9 +14,9 @@
 
 {#if $field}
 	<Button {variant} {...props}>
-        <FieldTypeIcon type={$field.type}></FieldTypeIcon>
-        <h4>{$field.name}</h4>
-		
+		<FieldTypeIcon type={$field.type}></FieldTypeIcon>
+		<h4>{$field.name}</h4>
+
 		<div class="icons">
 			{#if $field.is_secret}
 				<FieldIsSecretIcon></FieldIsSecretIcon>
@@ -36,6 +36,6 @@
 		display: flex;
 		align-items: center;
 		column-gap: var(--pad-m);
-        margin-left: auto;
+		margin-left: auto;
 	}
 </style>

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

@@ -14,9 +14,9 @@
 
 {#if $field}
 	<Button {variant} {...props}>
-        <FieldTypeIcon type={$field.type}></FieldTypeIcon>
-        <h4>{$field.name}</h4>
-		
+		<FieldTypeIcon type={$field.type}></FieldTypeIcon>
+		<h4>{$field.name}</h4>
+
 		<div class="icons">
 			{#if $field.is_secret}
 				<FieldIsSecretIcon></FieldIsSecretIcon>
@@ -36,6 +36,6 @@
 		display: flex;
 		align-items: center;
 		column-gap: var(--pad-m);
-        margin-left: auto;
+		margin-left: auto;
 	}
 </style>

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

@@ -16,21 +16,21 @@
 	<Button {variant} {...props}>
 		<div class="card">
 			<div class="top">
-                <FieldTypeIcon type={$field.type}></FieldTypeIcon>
-			    <h4>{$field.name}</h4>
-            </div>
+				<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>
+					<h5 style="color: var(--red);">secret</h5>
 				{/if}
 				{#if $field.is_unique}
 					<FieldIsUniqueIcon></FieldIsUniqueIcon>
-                    <h5 style="color: var(--green);">unique</h5>
+					<h5 style="color: var(--green);">unique</h5>
 				{/if}
 				{#if $field.is_required}
 					<FieldIsRequiredIcon></FieldIsRequiredIcon>
-                    <h5 style="color: var(--red);">requis</h5>
+					<h5 style="color: var(--red);">requis</h5>
 				{/if}
 			</div>
 		</div>
@@ -38,23 +38,21 @@
 {/if}
 
 <style>
-
-
 	.card {
-        display: flex;
-        flex-direction: column;
-        row-gap: var(--pad-xs);
+		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);
-    }
+	.icons,
+	.top {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
 
-    .top :global(svg path) {
-        fill: var(--font-2);
-    }
+	.top :global(svg path) {
+		fill: var(--font-2);
+	}
 </style>

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

@@ -1,21 +1,40 @@
 <script>
-    let {size = "24px", color="var(--font-1)"} = $props()
+	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="--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);
-    }
+	svg {
+		width: var(--size);
+		height: auto;
+		aspect-ratio: 1/1;
+	}
+	svg path {
+		fill: var(--color);
+	}
 </style>

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

@@ -1,23 +1,34 @@
 <script>
-	import FieldTypeInput from "$lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte";
-	import { entityRegistry } from "../registry.svelte";
+	import FieldTypeInput from '$lib/registry/fieldTypeRegistry/components/FieldTypeInput.svelte';
+	import { entityRegistry } from '../registry.svelte';
 
-	let { id, entityId = null, onChange=()=>{}, onChangeDetails=()=>{}, ...props } = $props();
+	let { id, entityId = null, onChange = () => {}, onChangeDetails = () => {}, ...props } = $props();
 
 	const field = entityRegistry.selectField(id, entityId);
 
-    let value = $state("")
+	let value = $state('');
 
-    function handleChange(newVal) {
-        value = newVal 
-        onChange(value)
-    }
-    function handleChangeDetails(newVal) {
-        onChangeDetails(newVal)
-    }
+	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>
+	<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}

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

@@ -1,22 +1,44 @@
 <script>
-    let {size = "18px", color="var(--red)"} = $props()
+	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="--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);
-    }
+	svg {
+		width: var(--size);
+		height: auto;
+		aspect-ratio: 1/1;
+	}
+	svg path {
+		fill: var(--color);
+	}
 </style>

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

@@ -1,19 +1,34 @@
 <script>
-    let {size = "18px", color="var(--red)"} = $props()
+	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="--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);
-    }
+	svg {
+		width: var(--size);
+		height: auto;
+		aspect-ratio: 1/1;
+	}
+	svg path {
+		fill: var(--color);
+	}
 </style>

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

@@ -1,21 +1,38 @@
 <script>
-    let {size = "18px", color="var(--green)"} = $props()
+	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="--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);
-    }
+	svg {
+		width: var(--size);
+		height: auto;
+		aspect-ratio: 1/1;
+	}
+	svg path {
+		fill: var(--color);
+	}
 </style>

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

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