OOps, DiagramBox and Component need to be added as well.

packages/core-svelte/src/lib/components/DiagramBoxComponent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import RenderComponent from "$lib/components/RenderComponent.svelte";
+    import { Box, FreEditor } from "@freon4dsl/core";
+    import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+
+    type $$Props = NodeProps;
+    $$restProps;
+
+    export let data: { box: Box, editor: FreEditor };
+    const { box, editor } = data;
+
+    const onInput = (evt) => {
+        console.log("Color inout")
+    }
+    const onClick = (evt) => {
+        console.log("Color click")
+    }
+</script>
+
+<div class="box">
+    <Handle type="target" position={Position.Left} />
+    <RenderComponent box={box} editor={editor} />
+    <Handle type="source" position={Position.Right} />
+</div>

packages/core-svelte/src/lib/components/DiagramColorPicker.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+    import type { Writable } from 'svelte/store';
+
+    type $$Props = NodeProps;
+    $$restProps;
+
+    export let data: { color: Writable<string> };
+
+    const { color } = data;
+
+    const onInput = (evt) => {
+        console.log("Color inout")
+        data.color.set(evt.target?.value)
+    }
+    const onClick = (evt) => {
+        console.log("Color click")
+    }
+</script>
+
+<div class="color-picker" on:click={onClick}>
+    <Handle type="target" position={Position.Left} />
+    <div>
+        color: <strong>{$color}</strong>
+    </div>
+    <input
+        class="nodrag"
+        on:input={onInput}
+        value={$color}
+    />
+    <Handle type="source" position={Position.Right} />
+</div>