fix: add field functionality, FOR REAL final final final

schema.json

@@ -7,6 +7,11 @@
     "description": "A kinda cool fancy password input",
     "icon": "Text",
     "settings": [
+      {
+        "type": "field/string",
+        "key": "field",
+        "label": "Field"
+      },
       {
         "type": "number",
         "key": "greenThreshold",

src/Component.svelte

@@ -1,17 +1,51 @@
 <script>
-    import {getContext} from "svelte"
+    import {getContext, onDestroy} from "svelte"
     import FancyPassword from "./components/FancyPassword.svelte";
 
+    let secret;
+
+    export let field;
+
     export let thiccness;
     export let greenThreshold;
     export let max;
     export let poorMessage = '💩';
     export let goodMessage = '✅';
-
+    
     const {styleable} = getContext("sdk")
     const component = getContext("component")
+    const formContext = getContext("form");
+    const formStepContext = getContext("form-step");
+
+    const formApi = formContext?.formApi;
+    $: formStep = formStepContext ? $formStepContext ?? 1 : 1;
+    $: formField = formApi?.registerField(field, "text", "", false, null, formStep);
+
+    let fieldApi;
+    let fieldState;
+
+    $: unsubscribe = formField?.subscribe((value) => {
+        fieldState = value?.fieldState;
+        fieldApi = value?.fieldApi;
+    });
+
+    onDestroy(() => {
+        fieldApi?.deregister();
+        unsubscribe?.();
+    });
+
+    $: {
+        fieldApi?.setValue(secret);
+    }
 </script>
 
 <div use:styleable={$component.styles}>
-  <FancyPassword {thiccness} {greenThreshold} {max} {poorMessage} {goodMessage} />
+  <FancyPassword
+      bind:secret={secret}
+      {thiccness}
+      {greenThreshold}
+      {max}
+      {poorMessage}
+      {goodMessage}
+  />
 </div>

src/components/FancyPassword.svelte

@@ -1,7 +1,7 @@
 <script>
     import ComplexityBar from "./ComplexityBar.svelte";
 
-    let secret = '';
+    export let secret = '';
 
     export let greenThreshold = 15;
     export let max = 30;