@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/middleware.ts

@@ -0,0 +1,11 @@
+import createMiddleware from 'next-intl/middleware';
+import {routing} from './i18n/routing';
+
+// Next.js 16 renamed "middleware" to "proxy" but next-intl still uses the
+// middleware convention. The deprecation warning is cosmetic and doesn't
+// affect functionality.
+export default createMiddleware(routing);
+
+export const config = {
+    matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
+};

package/dist/assets/storefront/src/scenarios/b2b-wholesale/branding.ts

@@ -0,0 +1,180 @@
+import type { StorefrontBranding } from '@/config/branding';
+
+/* =============================================================
+   Color palettes — Construction Orange + Warm Stone
+   ============================================================= */
+
+const baseVars: Record<string, string> = {
+    '--radius': '0.375rem',
+};
+
+const heroColors: Record<string, string> = {
+    '--hero-gradient-from': '#1c1917',
+    '--hero-gradient-via': '#292524',
+    '--hero-gradient-to': '#1c1917',
+    '--hero-accent': '#fb923c',
+    '--hero-accent-bg': '#e07a00',
+    '--hero-accent-bg-hover': '#c96e00',
+    '--hero-accent-foreground': '#ffffff',
+    '--hero-text': '#f5f5f4',
+    '--hero-text-muted': '#d6d3d1',
+    '--hero-border': 'rgba(214, 211, 209, 0.25)',
+    '--hero-badge-bg': 'rgba(224, 122, 0, 0.18)',
+    '--hero-badge-border': 'rgba(251, 146, 60, 0.4)',
+    '--hero-bg-image': 'url(/scenarios/b2b-wholesale/hero/hero-bg.webp)',
+};
+
+const darkColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#1c1917',
+    '--foreground': '#f5f5f4',
+
+    '--card': '#292524',
+    '--card-foreground': '#f5f5f4',
+    '--popover': '#292524',
+    '--popover-foreground': '#f5f5f4',
+
+    '--primary': '#e07a00',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#292524',
+    '--secondary-foreground': '#f5f5f4',
+
+    '--muted': '#292524',
+    '--muted-foreground': '#a8a29e',
+
+    '--accent': '#292524',
+    '--accent-foreground': '#f5f5f4',
+
+    '--destructive': '#dc2626',
+
+    '--border': '#44403c',
+    '--input': '#292524',
+    '--ring': '#e07a00',
+
+    '--chart-1': '#e07a00',
+    '--chart-2': '#22c55e',
+    '--chart-3': '#eab308',
+    '--chart-4': '#f97316',
+    '--chart-5': '#dc2626',
+
+    '--sidebar': '#1c1917',
+    '--sidebar-foreground': '#f5f5f4',
+    '--sidebar-primary': '#e07a00',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#292524',
+    '--sidebar-accent-foreground': '#f5f5f4',
+    '--sidebar-border': '#44403c',
+    '--sidebar-ring': '#e07a00',
+
+    ...heroColors,
+};
+
+const lightColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#ffffff',
+    '--foreground': '#1c1917',
+
+    '--card': '#fafaf9',
+    '--card-foreground': '#1c1917',
+    '--popover': '#ffffff',
+    '--popover-foreground': '#1c1917',
+
+    '--primary': '#d97706',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#f5f5f4',
+    '--secondary-foreground': '#1c1917',
+
+    '--muted': '#f5f5f4',
+    '--muted-foreground': '#78716c',
+
+    '--accent': '#f5f5f4',
+    '--accent-foreground': '#1c1917',
+
+    '--destructive': '#dc2626',
+
+    '--border': '#e7e5e4',
+    '--input': '#e7e5e4',
+    '--ring': '#d97706',
+
+    '--chart-1': '#d97706',
+    '--chart-2': '#16a34a',
+    '--chart-3': '#ca8a04',
+    '--chart-4': '#ea580c',
+    '--chart-5': '#dc2626',
+
+    '--sidebar': '#fafaf9',
+    '--sidebar-foreground': '#1c1917',
+    '--sidebar-primary': '#d97706',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#f5f5f4',
+    '--sidebar-accent-foreground': '#1c1917',
+    '--sidebar-border': '#e7e5e4',
+    '--sidebar-ring': '#d97706',
+
+    ...heroColors,
+};
+
+export const branding: StorefrontBranding = {
+    siteName: 'BauDirekt',
+    siteDescription: 'Baustoffe. Direkt. Der Baustoffgroßhandel für DACH-Profis.',
+
+    logo: { src: '/scenarios/b2b-wholesale/logo.svg', alt: 'BauDirekt', width: 32, height: 32 },
+
+    colors: {
+        dark: darkColors,
+        light: lightColors,
+    },
+
+    demoAccounts: [
+        {
+            email: 'buyer@berger-bau.demo',
+            label: 'Einkäufer',
+            description: 'Berger Bau GmbH · Bestellt Baumaterial (Freigabe >€500)',
+        },
+        {
+            email: 'approver@berger-bau.demo',
+            label: 'Freigeber',
+            description: 'Berger Bau GmbH · Genehmigt Bestellungen',
+        },
+        {
+            email: 'admin@berger-bau.demo',
+            label: 'Firmenadmin',
+            description: 'Berger Bau GmbH · Verwaltet Nutzer & Adressen',
+        },
+        {
+            email: 'admin@klein-handwerk.demo',
+            label: 'Inhaber',
+            description: 'Klein Handwerk · Einzelunternehmer, kein Workflow',
+        },
+        {
+            email: 'buyer@huber-baustoffe.demo',
+            label: 'Einkaufsleitung',
+            description: 'Huber Baustoffe GmbH · Großabnehmer (DE)',
+        },
+        {
+            email: 'admin@huber-baustoffe.demo',
+            label: 'Firmenadmin',
+            description: 'Huber Baustoffe GmbH · Unternehmensverwaltung',
+        },
+    ],
+
+    footer: {
+        copyright: 'BauDirekt GmbH',
+        poweredByLinks: [
+            { label: 'Vendure Commerce', href: 'https://vendure.io' },
+        ],
+    },
+
+    metadata: {
+        themeColor: '#1c1917',
+        defaultDescription:
+            'Baustoffe, Werkzeuge & Arbeitsschutz zum Großhandelspreis. Für Baufirmen, Handwerker und Fachhändler im DACH-Raum.',
+        homepageTitle: 'Baustoffgroßhandel für DACH-Profis',
+        homepageDescription:
+            'Dämmstoffe, Befestigungstechnik, Werkzeuge & PSA zum Fachhandelspreis. Zuverlässig. Direkt. BauDirekt.',
+    },
+};

package/dist/assets/storefront/src/scenarios/b2b-wholesale/hero.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { Truck, Package, HardHat, Receipt } from 'lucide-react';
+
+/**
+ * BauDirekt hero — DACH building materials wholesale theme.
+ * Strings are bilingual (DE primary, EN fallback) via the `BauDirektHero`
+ * next-intl namespace. Uses --hero-* CSS custom properties from branding.ts.
+ */
+export function BauDirektHero() {
+    const t = useTranslations('BauDirektHero');
+    return (
+        <section
+            className="relative overflow-hidden bg-cover bg-center"
+            style={{
+                backgroundImage: `var(--hero-bg-image), linear-gradient(to bottom right, var(--hero-gradient-from), var(--hero-gradient-via), var(--hero-gradient-to))`,
+            }}
+        >
+            {/* Dark gradient overlay for legibility over the photo */}
+            <div
+                aria-hidden
+                className="absolute inset-0"
+                style={{
+                    background:
+                        'linear-gradient(to bottom, rgba(28,25,23,0.55) 0%, rgba(28,25,23,0.85) 100%)',
+                }}
+            />
+            {/* Subtle grid texture on top */}
+            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px]" />
+
+            <div className="container mx-auto px-4 pt-[calc(var(--page-top-offset)+3rem)] pb-12 md:pt-[calc(var(--page-top-offset)+4rem)] md:pb-16 relative">
+                <div className="max-w-4xl mx-auto text-center space-y-6">
+                    <div
+                        className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium"
+                        style={{
+                            backgroundColor: 'var(--hero-badge-bg)',
+                            borderWidth: '1px',
+                            borderColor: 'var(--hero-badge-border)',
+                            color: 'var(--hero-accent)',
+                        }}
+                    >
+                        <HardHat className="w-4 h-4" />
+                        {t('badge')}
+                    </div>
+
+                    <h1
+                        className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight"
+                        style={{ color: 'var(--hero-text)' }}
+                    >
+                        {t('titleLine1')}
+                        <span className="block" style={{ color: 'var(--hero-accent)' }}>
+                            {t('titleLine2')}
+                        </span>
+                    </h1>
+
+                    <p
+                        className="text-lg md:text-xl max-w-2xl mx-auto"
+                        style={{ color: 'var(--hero-text-muted)' }}
+                    >
+                        {t('subtitle')}
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
+                        <Button
+                            asChild
+                            size="lg"
+                            className="min-w-[200px] font-semibold"
+                            style={{
+                                backgroundColor: 'var(--hero-accent-bg)',
+                                color: 'var(--hero-accent-foreground)',
+                            }}
+                        >
+                            <Link href="/search" prefetch={false}>
+                                {t('catalogCta')}
+                            </Link>
+                        </Button>
+                        <Button
+                            asChild
+                            variant="outline"
+                            size="lg"
+                            className="min-w-[200px]"
+                            style={{
+                                borderColor: 'var(--hero-border)',
+                                color: 'var(--hero-text-muted)',
+                            }}
+                        >
+                            <Link href="/register" prefetch={false}>
+                                {t('accountCta')}
+                            </Link>
+                        </Button>
+                    </div>
+
+                    <div
+                        className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-12 mt-12"
+                        style={{ borderTopWidth: '1px', borderColor: 'var(--hero-border)' }}
+                    >
+                        {([
+                            { icon: Truck, label: t('trustFastDelivery') },
+                            { icon: Package, label: t('trustPallets') },
+                            { icon: HardHat, label: t('trustCertified') },
+                            { icon: Receipt, label: t('trustPaymentTerms') },
+                        ] as const).map(({ icon: Icon, label }) => (
+                            <div
+                                key={label}
+                                className="flex flex-col items-center gap-2"
+                                style={{ color: 'var(--hero-text-muted)' }}
+                            >
+                                <span style={{ color: 'var(--hero-accent)' }}>
+                                    <Icon className="w-6 h-6" />
+                                </span>
+                                <span className="text-sm">{label}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/scenarios/b2b-wholesale/index.ts

@@ -0,0 +1,21 @@
+import type { ScenarioConfig } from '@/config/scenario';
+import { branding } from './branding';
+import { BauDirektHero } from './hero';
+
+export const bauDirektScenario: ScenarioConfig = {
+    branding,
+    // Channel tokens must match the Vendure admin channel configuration.
+    // These are set by the b2b-wholesale scenario populator in scenario-b2b-wholesale.
+    channels: {
+        available: [
+            { token: 'baudirekt-at-token', label: 'Österreich', countryCode: 'AT' },
+            { token: 'baudirekt-de-token', label: 'Deutschland', countryCode: 'DE' },
+        ],
+        defaultToken: 'baudirekt-at-token',
+    },
+    overrides: {
+        home: {
+            Hero: BauDirektHero,
+        },
+    },
+};

package/dist/assets/storefront/src/scenarios/b2b-wholesale/meta.ts

@@ -0,0 +1,3 @@
+import type {ScenarioMeta} from '@/config/scenario-meta';
+
+export const bauDirektMeta: ScenarioMeta = {};

package/dist/assets/storefront/src/scenarios/default/branding.ts

@@ -0,0 +1,148 @@
+import type { StorefrontBranding } from '@/config/branding';
+
+/* =============================================================
+   Color palettes — Dark Charcoal + Cyan
+   ============================================================= */
+
+const baseVars: Record<string, string> = {
+    '--radius': '0.375rem',
+};
+
+const heroColors: Record<string, string> = {
+    '--hero-gradient-from': '#23272d',
+    '--hero-gradient-via': '#2b2f36',
+    '--hero-gradient-to': '#23272d',
+    '--hero-accent': '#22d3ee',
+    '--hero-accent-bg': '#17a2b8',
+    '--hero-accent-bg-hover': '#148a9e',
+    '--hero-accent-foreground': '#ffffff',
+    '--hero-text': '#f1f3f5',
+    '--hero-text-muted': '#9ca3af',
+    '--hero-border': '#444952',
+    '--hero-badge-bg': 'rgba(23, 162, 184, 0.1)',
+    '--hero-badge-border': 'rgba(23, 162, 184, 0.2)',
+};
+
+const darkColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#2b2f36',
+    '--foreground': '#f1f3f5',
+
+    '--card': '#353a42',
+    '--card-foreground': '#f1f3f5',
+    '--popover': '#353a42',
+    '--popover-foreground': '#f1f3f5',
+
+    '--primary': '#17a2b8',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#353a42',
+    '--secondary-foreground': '#f1f3f5',
+
+    '--muted': '#23272d',
+    '--muted-foreground': '#9ca3af',
+
+    '--accent': '#353a42',
+    '--accent-foreground': '#f1f3f5',
+
+    '--destructive': '#ef4444',
+
+    '--border': '#444952',
+    '--input': '#23272d',
+    '--ring': '#17a2b8',
+
+    '--chart-1': '#17a2b8',
+    '--chart-2': '#22c55e',
+    '--chart-3': '#eab308',
+    '--chart-4': '#f97316',
+    '--chart-5': '#ef4444',
+
+    '--sidebar': '#23272d',
+    '--sidebar-foreground': '#f1f3f5',
+    '--sidebar-primary': '#17a2b8',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#353a42',
+    '--sidebar-accent-foreground': '#f1f3f5',
+    '--sidebar-border': '#444952',
+    '--sidebar-ring': '#17a2b8',
+
+    ...heroColors,
+};
+
+const lightColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#ffffff',
+    '--foreground': '#111827',
+
+    '--card': '#f9fafb',
+    '--card-foreground': '#111827',
+    '--popover': '#ffffff',
+    '--popover-foreground': '#111827',
+
+    '--primary': '#17a2b8',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#f3f4f6',
+    '--secondary-foreground': '#111827',
+
+    '--muted': '#f3f4f6',
+    '--muted-foreground': '#6b7280',
+
+    '--accent': '#f3f4f6',
+    '--accent-foreground': '#111827',
+
+    '--destructive': '#dc2626',
+
+    '--border': '#e5e7eb',
+    '--input': '#e5e7eb',
+    '--ring': '#17a2b8',
+
+    '--chart-1': '#17a2b8',
+    '--chart-2': '#16a34a',
+    '--chart-3': '#ca8a04',
+    '--chart-4': '#ea580c',
+    '--chart-5': '#dc2626',
+
+    '--sidebar': '#f9fafb',
+    '--sidebar-foreground': '#111827',
+    '--sidebar-primary': '#17a2b8',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#f3f4f6',
+    '--sidebar-accent-foreground': '#111827',
+    '--sidebar-border': '#e5e7eb',
+    '--sidebar-ring': '#17a2b8',
+
+    ...heroColors,
+};
+
+export const branding: StorefrontBranding = {
+    siteName: 'Vendure Store',
+    siteDescription: 'Industrial supplies, tools & safety equipment at trade prices.',
+
+    logo: { src: '/scenarios/default/logo.svg', alt: 'Vendure Store', width: 32, height: 22 },
+
+    colors: {
+        dark: darkColors,
+        light: lightColors,
+    },
+
+    footer: {
+        copyright: 'Vendure Store',
+        poweredByLinks: [
+            { label: 'Vendure Commerce', href: 'https://vendure.io' },
+            { label: 'Next.js', href: 'https://nextjs.org' },
+            { label: 'Documentation', href: 'https://docs.vendure.io' },
+        ],
+    },
+
+    metadata: {
+        themeColor: '#2b2f36',
+        defaultDescription:
+            'Industrial supplies, tools & safety equipment at trade prices. Trusted by businesses worldwide.',
+        homepageTitle: 'Industrial Supplies for Trade Professionals',
+        homepageDescription:
+            'Quality tools, safety equipment & industrial supplies at trade prices. Trusted by businesses worldwide.',
+    },
+};

package/dist/assets/storefront/src/scenarios/default/hero.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import {Link} from '@/i18n/navigation';
+import { Building2, Truck, ShieldCheck, Users } from 'lucide-react';
+
+/**
+ * Default scenario hero — industrial supplies theme.
+ * Uses --hero-* CSS custom properties from the branding color palette.
+ */
+export function DefaultHero() {
+    const t = useTranslations('Hero');
+    return (
+        <section
+            className="relative overflow-hidden"
+            style={{
+                background: `linear-gradient(to bottom right, var(--hero-gradient-from), var(--hero-gradient-via), var(--hero-gradient-to))`,
+            }}
+        >
+            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px]" />
+
+            <div className="container mx-auto px-4 pt-[calc(var(--page-top-offset)+3rem)] pb-12 md:pt-[calc(var(--page-top-offset)+4rem)] md:pb-16 relative">
+                <div className="max-w-4xl mx-auto text-center space-y-6">
+                    <div
+                        className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium"
+                        style={{
+                            backgroundColor: 'var(--hero-badge-bg)',
+                            borderWidth: '1px',
+                            borderColor: 'var(--hero-badge-border)',
+                            color: 'var(--hero-accent)',
+                        }}
+                    >
+                        <Building2 className="w-4 h-4" />
+                        {t('badge')}
+                    </div>
+
+                    <h1
+                        className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight"
+                        style={{ color: 'var(--hero-text)' }}
+                    >
+                        {t('titleLine1')}
+                        <span className="block" style={{ color: 'var(--hero-accent)' }}>
+                            {t('titleLine2')}
+                        </span>
+                    </h1>
+
+                    <p
+                        className="text-lg md:text-xl max-w-2xl mx-auto"
+                        style={{ color: 'var(--hero-text-muted)' }}
+                    >
+                        {t('subtitle')}
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
+                        <Button
+                            asChild
+                            size="lg"
+                            className="min-w-[200px] font-semibold"
+                            style={{
+                                backgroundColor: 'var(--hero-accent-bg)',
+                                color: 'var(--hero-accent-foreground)',
+                            }}
+                        >
+                            <Link href="/search" prefetch={false}>
+                                {t('browseCatalogue')}
+                            </Link>
+                        </Button>
+                        <Button
+                            asChild
+                            variant="outline"
+                            size="lg"
+                            className="min-w-[200px]"
+                            style={{
+                                borderColor: 'var(--hero-border)',
+                                color: 'var(--hero-text-muted)',
+                            }}
+                        >
+                            <Link href="/register" prefetch={false}>
+                                {t('openTradeAccount')}
+                            </Link>
+                        </Button>
+                    </div>
+
+                    <div
+                        className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-12 mt-12"
+                        style={{ borderTopWidth: '1px', borderColor: 'var(--hero-border)' }}
+                    >
+                        {([
+                            { icon: Truck, label: t('nextDayDelivery') },
+                            { icon: ShieldCheck, label: t('qualityGuaranteed') },
+                            { icon: Users, label: t('dedicatedSupport') },
+                            { icon: Building2, label: t('net30Terms') },
+                        ] as const).map(({ icon: Icon, label }) => (
+                            <div key={label} className="flex flex-col items-center gap-2" style={{ color: 'var(--hero-text-muted)' }}>
+                                <span style={{ color: 'var(--hero-accent)' }}>
+                                    <Icon className="w-6 h-6" />
+                                </span>
+                                <span className="text-sm">{label}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/scenarios/default/index.ts

@@ -0,0 +1,12 @@
+import type { ScenarioConfig } from '@/config/scenario';
+import { branding } from './branding';
+import { DefaultHero } from './hero';
+
+export const defaultScenario: ScenarioConfig = {
+    branding,
+    overrides: {
+        home: {
+            Hero: DefaultHero,
+        },
+    },
+};

package/dist/assets/storefront/src/scenarios/default/meta.ts

@@ -0,0 +1,3 @@
+import type {ScenarioMeta} from '@/config/scenario-meta';
+
+export const defaultMeta: ScenarioMeta = {};

package/dist/assets/storefront/src/scenarios/kaminpro/auth-gate.tsx

@@ -0,0 +1,36 @@
+import { ReactElement, ReactNode } from 'react';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { LoginNotice } from './pdp/components/login-notice';
+
+/**
+ * KaminPro auth gate — verifies a valid session by fetching `activeCustomer`
+ * from the shop API. An expired / invalid auth cookie resolves to `null`
+ * and is treated as unauthenticated. The upstream call is deduped via
+ * `React.cache` in `getActiveCustomer`, so multiple gates on the same
+ * request don't multiply shop-api hits.
+ */
+export async function AuthGate({ children }: { children: ReactNode }) {
+    const customer = await getActiveCustomer();
+    if (!customer) return <LoginNotice />;
+    return <>{children}</>;
+}
+
+/**
+ * Helper for wrapping a scenario route component with the gate. Use at the
+ * `routes` registration point in `scenarios/kaminpro/index.ts` so the
+ * route definition itself declares whether it's gated. The return type
+ * matches `ServerComponent` from `@/config/scenario` so the registered
+ * entry stays type-compatible with the scenario routes map.
+ *
+ * The auth check runs *before* `Component` is invoked, so a guarded route's
+ * data fetching never executes for unauthenticated visitors.
+ */
+export function withAuthGate<P extends object>(
+    Component: (props: P) => ReactElement | Promise<ReactElement>,
+): (props: P) => Promise<ReactElement> {
+    return async function GatedRoute(props: P) {
+        const customer = await getActiveCustomer();
+        if (!customer) return <LoginNotice />;
+        return (await Component(props)) as ReactElement;
+    };
+}