First flow ui implementation

.storybook/global.scss

@@ -4,10 +4,7 @@ html {
 }
 
 .sb-show-main {
-  background: url(https://applescoop.org/image/wallpapers/mac/windows-10-stock-hd-cells-glowing-dark-22-09-2024-1727068449-hd-wallpaper.jpeg);
-  transition: background-color 0.3s;
-  background-position: center;
-  background-size: cover;
+  background: #030014 !important;
 }
 
 .sb-main-fullscreen {

package.json

@@ -21,15 +21,17 @@
     "@ariakit/react": "^0.4.17",
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-6c84ca6a692d3341e857f740343aead437ab4427",
+    "@dagrejs/dagre": "^1.1.5",
     "@mdx-js/react": "^3.1.0",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-one-time-password-field": "^0.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-one-time-password-field": "^0.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -51,6 +53,7 @@
     "@tabler/icons-react": "3.34.1",
     "@types/react": "^19.1.8",
     "@vitejs/plugin-react": "^4.6.0",
+    "@xyflow/react": "^12.8.2",
     "axe-playwright": "^2.1.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
@@ -85,13 +88,16 @@
   "types": "dist/index.d.ts",
   "peerDependencies": {
     "@ariakit/react": "^0.4.5",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-one-time-password-field": "^0.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-one-time-password-field": "^0.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tabler/icons-react": "^3.5.0",
+    "@xyflow/react": "^12.8.2",
     "js-md5": "^0.8.3",
     "merge-props": "^6.0.0",
     "overlap-area": "^1.1.0",

src/components/badge/Badge.style.scss

@@ -7,6 +7,7 @@
   display: inline-flex;
   font-size: variables.$xs;
   width: fit-content;
+  align-items: center;
 
   & {
     @include helpers.fontStyle();

src/components/button/Button.style.scss

@@ -25,6 +25,7 @@
       @include box.boxActive($color, variables.$white, variables.$white);
 
     &.button--outlined {
+      background: transparent;
       //@include helpers.glassBox($color, variables.$white, $color);
     }
 

src/components/button/Button.tsx

@@ -19,7 +19,7 @@ export interface ButtonProps extends Code0Component<HTMLButtonElement> {
 
 const Button: React.FC<ButtonProps> = React.forwardRef((props, ref) => {
 
-    const {children, variant = "outlined", color = "secondary", active = false, disabled = false, ...args} = props
+    const {children, variant = "normal", color = "secondary", active = false, disabled = false, ...args} = props
 
     return <button ref={ref} {...mergeCode0Props(`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, args)}
               aria-disabled={disabled ? "true" : "false"}>

src/components/card/Card.style.scss

@@ -3,7 +3,7 @@
 @use "../../styles/variables";
 @use "sass:math";
 
-$padding: variables.$md;
+$padding: variables.$xs;
 
 .card {
 
@@ -16,29 +16,31 @@ $padding: variables.$md;
     @include helpers.fontStyle();
   }
 
-  * {
-
-    &.card__section > img {
-      border-radius: math.div(variables.$borderRadius, 2);
-    }
+  > .card__section {
+    > img { border-radius: math.div(variables.$borderRadius, 2); }
 
-    &:first-child.card__section {
+    /* erste Section */
+    &:first-child {
       margin-top: 0;
-
-      &--border {
-        padding-top: 0;
-        border-top: none;
-      }
-
+    }
+    &--border:first-child {
+      padding-top: 0;
+      border-top: none;
     }
 
-    &:last-child.card__section {
+    /* letzte Section: kein weiteres .card__section folgt */
+    &:not(:has(~ .card__section)) {
       margin-bottom: 0;
+    }
+    &--border:not(:has(~ .card__section)) {
+      padding-bottom: 0;
+      border-bottom: none;
+    }
+  }
 
-      &--border {
-        padding-bottom: 0;
-        border-bottom: none;
-      }
+  * {
+    &.card__section > img {
+      border-radius: math.div(variables.$borderRadius, 2);
     }
   }
 
@@ -98,13 +100,13 @@ $padding: variables.$md;
   }
 
   .card--outline-#{$name} {
-    outline-offset: $padding;
-    margin: $padding;
+    outline-offset: $padding/2;
+    margin: $padding/2;
     outline: helpers.borderColor($color) solid 1px;
   }
 
   .card--border-#{$name} {
-    border-color: helpers.borderColor($color);
+    box-shadow: inset 0 0 0 1px helpers.borderColor($color);
   }
 
   .card--border--dashed {