config/nam.3bear.design.json

@@ -1,90 +0,0 @@
-[
-  {
-    "Header": {
-      "config": {
-        "sticky": true,
-        "variant": "ticker"
-      },
-      "children": [
-        {
-          "Banner": {
-            "config": {
-              "variant": "ticker",
-              "className": "h-12 bg-[#009b93] text-[#fff] gap-12",
-              "speed": 24,
-              "items": [
-                {
-                  "Link": {
-                    "config": {
-                      "label": "NEU: Overnight Oats – Sallys Nussecke 😍",
-                      "href": "/"
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Versandkostenfrei ab 45 € 💛",
-                      "href": "/"
-                    }
-                  }
-                },
-                {
-                  "Link": {
-                    "config": {
-                      "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
-                      "href": "/"
-                    }
-                  }
-                }
-              ]
-            }
-          }
-        },
-        {
-          "Nav": {
-            "config": {
-              "className": "h-12 bg-white text-[#003F31] gap-12",
-              "left": [
-                {
-                  "Image": {
-                    "config": {
-                      "src": "/3bear-logo.png",
-                      "alt": "MyShop",
-                      "className": "h-[150px] w-[180px]",
-                      "objectFit": "contain"
-                    }
-                  }
-                }
-              ]
-            }
-          }
-        }
-      ]
-    }
-  },
-  {
-    "CartMismatchBanner": {
-      "config": {
-        "show": true
-      }
-    }
-  },
-  {
-    "FreeShippingPriceNudge": {
-      "config": {
-        "variant": "popup"
-      }
-    }
-  },
-  {
-    "PropsChildren": {}
-  },
-  {
-    "Footer": {
-      "config": {
-        "copyrightText": "© 2025 MyShop"
-      }
-    }
-  }
-]

src/modules/layout/components/vt-linkbutton/index.tsx

@@ -2,13 +2,8 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 import { clx } from "@medusajs/ui"
  
-interface VtLinkProps {
-  className?: string
-  href?: string
-  label?: string
-}
 export const VtLink = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
-  const props = nodes.config as VtLinkProps ?? {}
+  const props = nodes.config ?? {}
   const className = clx("txt-compact-xlarge-plus hover:text-ui-fg-base", props.className)
   const href = props.href ?? "/"
   const label = props.label ?? "Medusa Store"

src/modules/layout/templates/vt-banner/banner-cta.tsx

@@ -12,15 +12,8 @@ interface BannerCTAProps {
   context: LayoutContext
 }
 
-interface BannerConfigProps {
-  text?: string
-  href?: string
-  iconLeft?: string
-  iconRight?: string
-  className?: string
-}
 export default function BannerCTA({ node, context }: BannerCTAProps) {
-  const props = node.config as BannerConfigProps ?? {}
+  const props = node.config ?? {}
   const text = props.text ?? ""
   const href = props.href ?? undefined
   const iconLeft = props.iconLeft

src/modules/layout/templates/vt-banner/banner-nav.tsx

@@ -1,13 +1,8 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 
-interface BannerNavProps {
+export default function BannerNav({ node: node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
-  left?: LayoutComponentDefinition[]
+  const props = node.config ?? {};
-  center?: LayoutComponentDefinition[]
-  right?: LayoutComponentDefinition[]
-}
-export default function BannerNav({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = node.config as BannerNavProps ?? {};
 
   return (
     <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">

src/modules/layout/templates/vt-banner/banner-ticker.module.css

@@ -1,10 +1,6 @@
 @keyframes bannerTicker {
-  0% {
+  0% { transform: translateX(100%); }
-    transform: translateX(100%);
+  100% { transform: translateX(-100%); }
-  }
-  100% {
-    transform: translateX(-100%);
-  }
 }
 
 .ticker {
@@ -12,6 +8,5 @@
   white-space: nowrap;
   align-items: center;
   animation: bannerTicker linear infinite;
-  height: 100%;
+    height: 100%;  
-  gap: 3rem
 }

src/modules/layout/templates/vt-banner/banner-ticker.tsx

@@ -2,21 +2,13 @@ import styles from "./banner-ticker.module.css"
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
 
-interface BannerTickerProps {
+export default function BannerTicker({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
-  node: LayoutComponentDefinition
+  const props = node.config ?? {}
-  context: LayoutContext
-}
-interface BannerConfigProps {
-  items?: LayoutComponentDefinition[]
-  speed?: number
-}
-export default function BannerTicker({ node, context }: BannerTickerProps) {
-  const props = node.config as BannerConfigProps ?? {}
   const speed = props.speed ?? 10;
   return (
     <div className="relative overflow-hidden w-full h-full">
       <div className={styles.ticker}   style={{ animationDuration: `${speed}s` }} >
-        <DynamicLayoutRenderer nodes={props.items ?? []} context={context} />
+        <DynamicLayoutRenderer nodes={props.items} context={context} />
       </div>
     </div>
   )

src/modules/layout/templates/vt-banner/index.tsx

@@ -1,42 +1,26 @@
-import {
+import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
-  LayoutComponentDefinition,
+import { clx } from "@medusajs/ui";
-  LayoutContext,
+import BannerNav from "./banner-nav";
-} from "vibentec/component-map"
+import BannerCTA from "./banner-cta";
-import { clx } from "@medusajs/ui"
+import BannerTicker from "./banner-ticker";
-import BannerNav from "./banner-nav"
-import BannerCTA from "./banner-cta"
-import BannerTicker from "./banner-ticker"
 
-interface BannerProps {
+export default async function Banner({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
-  variant: "nav" | "cta" | "ticker"
+  const props = nodes.config ?? {};
-  className?: string
+  const bannerClassName = clx("relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base", props.className);
-  speed?: number
+  const bannerVariant = props.variant as "nav" | "cta" | "ticker";
-}
+  if (!bannerVariant) return null;
-export default async function Banner({
-  nodes,
-  context,
-}: {
-  nodes: LayoutComponentDefinition
-  context: LayoutContext
-}) {
-  const props = (nodes.config as BannerProps) ?? {}
-  const bannerClassName = clx(
-    "relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base",
-    props.className
-  )
-  if (!props.variant) return null
 
   const variants = {
-    nav: BannerNav,
+    "nav": BannerNav,
-    cta: BannerCTA,
+    "cta": BannerCTA,
-    ticker: BannerTicker,
+    "ticker": BannerTicker,
-  }
+  };
 
-  const Component = variants[props.variant]
+  const Component = variants[bannerVariant];
 
   return (
     <div className={bannerClassName}>
-      <Component node={nodes} context={context} />
+      <Component node={nodes} context={context}/>
     </div>
-  )
+  );
 }

src/modules/layout/templates/vt-image/index.tsx

@@ -1,27 +0,0 @@
-import { clx } from "@medusajs/ui"
-import {
-  LayoutComponentDefinition,
-  LayoutContext,
-} from "@vibentec/component-map"
-import Image from "next/image"
-
-export interface VtImageConfig {
-  src: string
-  alt: string
-  className?: string,
-  objectFit?: string,
-}
-export default function VtImage({
-  nodes,
-  context,
-}: {
-  nodes: LayoutComponentDefinition
-  context: LayoutContext
-}) {
-  const props = (nodes.config as VtImageConfig) ?? {}
-  return (
-    <div className={clx("relative", props.className)}>
-      <Image src={props.src} alt={props.alt} fill objectFit={props.objectFit ?? "contain"} />
-    </div>
-  )
-}

src/modules/layout/templates/vt-nav/index.tsx

@@ -1,17 +1,11 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
 
-interface BannerNavProps {
-  className?: string;
-  left?: LayoutComponentDefinition[];
-  center?: LayoutComponentDefinition[];
-  right?: LayoutComponentDefinition[];
-}
 export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
-  const props = nodes.config as BannerNavProps ?? {}
+  const props = nodes.config ?? {}
 
   return (
-    <div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
+    <div className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
       <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
         <div className="flex items-center gap-x-4">
           {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}

src/vibentec/component-map.tsx

@@ -12,7 +12,6 @@ import Banner from "@modules/layout/templates/vt-banner"
 import VtMegaMenu from "@modules/layout/components/vt-mega-menu"
 import VtLink from "@modules/layout/components/vt-linkbutton"
 import VtSideMenu from "@modules/layout/components/vt-sidemenu"
-import VtImage from "@modules/layout/templates/vt-image"
 
 type ComponentConfig = Record<string, any>;
 
@@ -33,7 +32,7 @@ export type ComponentRenderer = {
 }
 
 // Utility methods
-const   configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
+const configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
   render: (entry) => <Component {...entry.config} />
 })
 
@@ -56,7 +55,6 @@ export const componentMap: Record<string, ComponentRenderer> = {
   AccountButton: nodesContextRenderer(AccountButton),
   VtCartButton: nodesContextRenderer(VtCartButton),
   Link: nodesContextRenderer(VtLink),
-  Image: nodesContextRenderer(VtImage),
   CartMismatchBanner: configOnly(CartMismatchBanner),
   FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
   PropsChildren: {

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames";
 
-const fileName = jsonFileNames.nam3Bear;
+const fileName = jsonFileNames.stePlayGround;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)

src/vibentec/devJsonFileNames.ts

@@ -1,5 +1,4 @@
 export const jsonFileNames = {
   steMedusaStarter: "ste.medusa-starter.design.json",
-  stePlayGround: "ste.playground.design.json",
+  stePlayGround: "ste.playground.design.json"
-  nam3Bear: "nam.3bear.design.json",
 };