@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/styles.css

@@ -0,0 +1,104 @@
+/**
+ * KaminPro Configurator — local design tokens + utilities.
+ *
+ * Ported from the Claude Design handoff. Scoped under `.kp-pdp` so they
+ * only apply inside the configurator shell and don't leak into the rest
+ * of the storefront.
+ */
+
+.kp-pdp {
+    --bg:       #0f0e0d;
+    --panel:    #1c1917;
+    --panel-2:  #292524;
+    --panel-3:  #1f1c1a;
+    --line:     #3a3532;
+    --line-2:   #4a4441;
+    --ink:      #e7e5e4;
+    --ink-2:    #d6d3d1;
+    --muted:    #a8a29e;
+    --muted-2:  #78716c;
+    --fire:     #dc2626;
+    --fire-2:   #b91c1c;
+    --ok:       #65a30d;
+    --warn:     #d97706;
+    --paper:    #f5f4f2;
+
+    background: var(--bg);
+    color: var(--ink);
+    font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
+    font-feature-settings: 'ss01', 'cv11';
+    letter-spacing: -0.005em;
+}
+
+.kp-pdp .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+.kp-pdp .caps { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
+
+.kp-pdp .paper-bg {
+    background:
+        linear-gradient(135deg, rgba(245,244,242,0.02) 0 1px, transparent 1px 6px),
+        linear-gradient(45deg, rgba(245,244,242,0.02) 0 1px, transparent 1px 6px),
+        radial-gradient(ellipse at top left, rgba(247,246,244,0.05), transparent 60%),
+        var(--panel);
+    background-size: 8px 8px, 8px 8px, auto, auto;
+}
+
+.kp-pdp .stripe {
+    background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(168,162,158,0.08) 7px 8px);
+}
+
+.kp-pdp .scroll-slim::-webkit-scrollbar { width: 8px; height: 8px; }
+.kp-pdp .scroll-slim::-webkit-scrollbar-track { background: transparent; }
+.kp-pdp .scroll-slim::-webkit-scrollbar-thumb {
+    background: var(--line-2);
+    border-radius: 4px;
+    border: 2px solid var(--panel);
+}
+.kp-pdp .scroll-slim::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
+
+@keyframes kp-pulse-dot {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50%      { opacity: 0.5; transform: scale(1.4); }
+}
+.kp-pdp .pulse-dot { animation: kp-pulse-dot 1.5s ease-in-out infinite; }
+
+@keyframes kp-bom-in {
+    0%   { opacity: 0; transform: translateY(-4px); background: rgba(220, 38, 38, 0.14); }
+    50%  { opacity: 1; transform: translateY(0);    background: rgba(220, 38, 38, 0.14); }
+    100% { opacity: 1; transform: translateY(0);    background: transparent; }
+}
+.kp-pdp .bom-flash { animation: kp-bom-in 0.45s cubic-bezier(.2,.7,.2,1); }
+
+.kp-pdp kbd {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 10px;
+    padding: 1px 5px;
+    background: var(--panel-2);
+    border: 1px solid var(--line-2);
+    border-radius: 2px;
+    color: var(--muted);
+}
+
+.kp-pdp .field-row .schem-line { transition: all .35s cubic-bezier(.2,.7,.2,1); }
+
+/* Schematic "recently changed" highlight — draws a crisp 1.5 px red
+   outline around the updated SVG group for 1 s, then fades over the
+   following 600 ms. Uses four zero-blur drop-shadows offset ±1.5 px
+   on each axis to build a sharp outline (interpolating alpha only —
+   same 4 filters in both keyframes, so the transition is smooth). */
+@keyframes kp-schem-flash {
+    0%, 62%  {
+        filter:
+            drop-shadow( 1.5px 0 0 rgba(220, 38, 38, 0.5))
+            drop-shadow(-1.5px 0 0 rgba(220, 38, 38, 0.5))
+            drop-shadow(0  1.5px 0 rgba(220, 38, 38, 0.5))
+            drop-shadow(0 -1.5px 0 rgba(220, 38, 38, 0.5));
+    }
+    100%     {
+        filter:
+            drop-shadow( 1.5px 0 0 rgba(220, 38, 38, 0))
+            drop-shadow(-1.5px 0 0 rgba(220, 38, 38, 0))
+            drop-shadow(0  1.5px 0 rgba(220, 38, 38, 0))
+            drop-shadow(0 -1.5px 0 rgba(220, 38, 38, 0));
+    }
+}
+.kp-pdp .kp-schem-flash { animation: kp-schem-flash 1.6s ease-out; }

package/dist/assets/storefront/src/scenarios/kaminpro/shop-by-system.tsx

@@ -0,0 +1,97 @@
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import {client} from '@/lib/vendure/api';
+import {GetProductTileQuery} from '@/lib/vendure/queries';
+import {ArrowRight} from 'lucide-react';
+
+/**
+ * KaminPro-specific replacement for the default `ShopByCategory` tile row.
+ *
+ * The default row is generic — a flat grid of all top-level collections.
+ * For a configurator-first demo that only ships two configurable systems,
+ * that layout dilutes the call to action. This override renders a two-tile
+ * hero strip linking straight into each configurable product's PDP, using
+ * the populator-supplied installation photography as tile background.
+ *
+ * We intentionally ignore the `collections` prop passed in by the default
+ * homepage layout — this isn't a category browse, it's a system picker.
+ */
+
+const TILES: Array<{
+    slug: string;
+    title: string;
+    subtitle: string;
+    fuels: string;
+}> = [
+    {
+        slug: 'kp-stahlline-dw-system',
+        title: 'StahlLine DW',
+        subtitle: 'Doppelwandig · Edelstahl · T600',
+        fuels: 'Scheitholz · Hackschnitzel · Pellet · Gas · Öl',
+    },
+    {
+        slug: 'kp-polyflex-pp-system',
+        title: 'PolyFlex PP',
+        subtitle: 'Kunststoff · Kondensat · T120 / T160',
+        fuels: 'Gas- & Öl-Brennwertgeräte',
+    },
+];
+
+export async function KaminProShopBySystem() {
+    const entries = await Promise.all(
+        TILES.map(async tile => {
+            const [result, error] = await client.query(GetProductTileQuery, {slug: tile.slug});
+            if (error) {
+                console.warn(`[kaminpro] Failed to load tile product ${tile.slug}:`, error);
+                return {tile, product: null};
+            }
+            return {tile, product: result?.data?.product ?? null};
+        }),
+    );
+
+    return (
+        <section className="container mx-auto px-4 pt-12 pb-8">
+            <header className="mb-6 flex items-baseline justify-between">
+                <h2 className="caps text-[color:var(--muted-foreground)]">
+                    Konfigurierbare Systeme
+                </h2>
+                <span className="mono text-xs text-[color:var(--muted-foreground)]">
+                    2 Produktfamilien · Live-Konfigurator
+                </span>
+            </header>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {entries.map(({tile, product}) => (
+                    <Link
+                        key={tile.slug}
+                        href={`/product/${tile.slug}`}
+                        className="group relative block overflow-hidden rounded-sm border border-[color:var(--border)] hover:border-[color:var(--primary)]/60 transition-colors aspect-[16/10] bg-[color:var(--card)]"
+                    >
+                        {product?.featuredAsset?.preview ? (
+                            <Image
+                                src={product.featuredAsset.preview}
+                                alt={tile.title}
+                                fill
+                                sizes="(max-width: 768px) 100vw, 50vw"
+                                className="object-cover opacity-80 group-hover:opacity-95 group-hover:scale-[1.02] transition-all duration-500"
+                            />
+                        ) : null}
+                        {/* Gradient wash so title/meta remain readable */}
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-transparent" />
+                        <div className="absolute inset-0 flex flex-col justify-end p-6">
+                            <div className="mono text-[10.5px] uppercase tracking-[0.08em] text-white/60 mb-2">
+                                {tile.subtitle}
+                            </div>
+                            <div className="flex items-baseline gap-3">
+                                <h3 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
+                                    {tile.title}
+                                </h3>
+                                <ArrowRight className="h-5 w-5 text-white/70 group-hover:translate-x-1 transition-transform" />
+                            </div>
+                            <p className="mono text-xs text-white/70 mt-2">{tile.fuels}</p>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/system-finder/decision-tree.ts

@@ -0,0 +1,261 @@
+/**
+ * System Finder decision tree — pure mapping from wizard answers to
+ * recommended chimney system(s). No side effects, no React — testable
+ * in isolation.
+ *
+ * Drives the Results screen and the pre-filled query params handed to
+ * the configurator PDP (once PR #222 lands).
+ */
+
+export type Bauvorhaben = 'neubau' | 'sanierung';
+export type Betriebsart = 'festbrennstoff' | 'gas' | 'oel' | 'pellet';
+export type Druck = 'ueberdruck' | 'unterdruck';
+/**
+ * Abgastemperaturklasse — only `t120` / `t160` are user-selectable today
+ * (PP vs PVDF for Öl Brennwert). `t600` was reserved for a future
+ * StahlLine DW variant but is not wired into any branch yet.
+ */
+export type Temperaturklasse = 't120' | 't160';
+
+export interface WizardAnswers {
+    bauvorhaben?: Bauvorhaben;
+    betriebsart?: Betriebsart;
+    /** Only asked for `sanierung` — Neubau is pre-specified. */
+    druck?: Druck;
+    /** Only asked for `oel` + `gas` condensing. Defaults per fuel if not chosen. */
+    temperaturklasse?: Temperaturklasse;
+}
+
+export type SystemCode = 'stahlline-dw' | 'polyflex-pp' | 'polyflex-pvdf';
+
+export interface SystemRecommendation {
+    code: SystemCode;
+    /** Configurable product slug — handed to the configurator PDP. */
+    productSlug: string;
+    name: string;
+    /** One-line positioning — shown on the card subtitle. */
+    tagline: string;
+    /** Material descriptor for the chips. */
+    material: string;
+    /** Supported nominal-diameter range, e.g. "DN 130–250". */
+    diameterRange: string;
+    /** Max exhaust temperature class, e.g. "T600" or "≤120 °C". */
+    maxExhaustTemperature: string;
+    /** Wall thickness / insulation descriptor. */
+    wallSpec: string;
+    /** Reasons this system matches the wizard answers (shown as bullets). */
+    reasons: string[];
+}
+
+// ─────────────────────────────────────────────────────────────
+// System catalogue
+//
+// NOTE: the `productSlug` values below point at configurable products
+// that will be created by the configurator-populator (Phase 4 / PR
+// vendurehq/vendure-platform#222). Until that lands, "Zum Konfigurator" links
+// will 404 — this is deliberate. The wizard ships with the shape the
+// configurator will fill.
+// ─────────────────────────────────────────────────────────────
+
+const STAHLLINE_DW: SystemRecommendation = {
+    code: 'stahlline-dw',
+    productSlug: 'kp-stahlline-dw-system',
+    name: 'StahlLine DW-System',
+    tagline: 'Doppelwandig isoliert. Für Festbrennstoffe und traditionelle Anlagen.',
+    material: 'Edelstahl 1.4404',
+    diameterRange: 'DN 130–250',
+    maxExhaustTemperature: 'T600',
+    wallSpec: '25 mm Mineralwolle-Isolierung',
+    reasons: [],
+};
+
+const POLYFLEX_PP: SystemRecommendation = {
+    code: 'polyflex-pp',
+    productSlug: 'kp-polyflex-pp-system',
+    name: 'PolyFlex PP-System',
+    tagline: 'Kunststoff-Abgasführung für Brennwertgeräte bis 120 °C.',
+    material: 'Polypropylen',
+    diameterRange: 'DN 80–125',
+    maxExhaustTemperature: '≤ 120 °C (T120)',
+    wallSpec: 'Einwandig, säurebeständig',
+    reasons: [],
+};
+
+const POLYFLEX_PVDF: SystemRecommendation = {
+    code: 'polyflex-pvdf',
+    productSlug: 'kp-polyflex-pvdf-system',
+    name: 'PolyFlex PVDF-System',
+    tagline: 'Kunststoff-Abgasführung für höhere Temperaturen bis 160 °C.',
+    material: 'PVDF',
+    diameterRange: 'DN 100–125',
+    maxExhaustTemperature: '≤ 160 °C (T160)',
+    wallSpec: 'Einwandig, hitzebeständig',
+    reasons: [],
+};
+
+// ─────────────────────────────────────────────────────────────
+// Decision function
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * Maps wizard answers to one or more recommended systems.
+ * The first entry is the primary recommendation; subsequent entries are
+ * alternatives shown below the primary card.
+ */
+export function recommendSystems(answers: WizardAnswers): SystemRecommendation[] {
+    const { betriebsart, druck, temperaturklasse } = answers;
+
+    // Solid-fuel paths — always StahlLine DW. Overpressure is meaningless
+    // for Festbrennstoff, so we ignore `druck` even if set.
+    if (betriebsart === 'festbrennstoff' || betriebsart === 'pellet') {
+        const fuelLabel = betriebsart === 'pellet' ? 'Pelletheizung' : 'Festbrennstoff';
+        return [
+            {
+                ...STAHLLINE_DW,
+                reasons: [
+                    `Edelstahl ist für ${fuelLabel} zwingend vorgeschrieben`,
+                    'T600-Klassifikation deckt alle gängigen Holz- und Pelletanlagen ab',
+                    '25 mm Mineralwolle-Isolierung verhindert Kondensatbildung',
+                ],
+            },
+        ];
+    }
+
+    // Gas — typically PP for modern Brennwert; StahlLine DW as alternative
+    // for older Unterdruck-Heizkessel.
+    if (betriebsart === 'gas') {
+        if (druck === 'unterdruck') {
+            return [
+                {
+                    ...STAHLLINE_DW,
+                    reasons: [
+                        'Unterdruckbetrieb mit Gas-Niedertemperaturgeräten erfordert Edelstahl',
+                        'PolyFlex-Systeme sind ausschließlich für Überdruckbetrieb zugelassen',
+                    ],
+                },
+            ];
+        }
+        // Default: Gas-Brennwert → PP
+        return [
+            {
+                ...POLYFLEX_PP,
+                reasons: [
+                    'Gas-Brennwertgeräte arbeiten mit Überdruck und Abgastemperaturen unter 120 °C',
+                    'PP ist kostengünstiger als Edelstahl und säurebeständig',
+                    'Kondensatabfluss in der T-Stück-Baugruppe bereits integriert',
+                ],
+            },
+            {
+                ...STAHLLINE_DW,
+                reasons: ['Alternative für traditionelle Gas-Heizwert-Anlagen'],
+            },
+        ];
+    }
+
+    // Öl — PP or PVDF depending on Abgastemperatur
+    if (betriebsart === 'oel') {
+        if (druck === 'unterdruck') {
+            return [
+                {
+                    ...STAHLLINE_DW,
+                    reasons: [
+                        'Unterdruckbetrieb mit Öl-Niedertemperaturkessel erfordert Edelstahl',
+                        'Höhere Abgastemperaturen bei älteren Ölheizungen sind abgedeckt',
+                    ],
+                },
+            ];
+        }
+        if (temperaturklasse === 't160') {
+            return [
+                {
+                    ...POLYFLEX_PVDF,
+                    reasons: [
+                        'Öl-Brennwertgeräte mit erhöhter Abgastemperatur (bis 160 °C)',
+                        'PVDF widersteht höheren Temperaturen als Standard-PP',
+                        'Einwandig verlegbar — platzsparender als Edelstahl',
+                    ],
+                },
+                {
+                    ...POLYFLEX_PP,
+                    reasons: ['Alternative bei gesicherter Abgastemperatur unter 120 °C'],
+                },
+            ];
+        }
+        // Default Öl + Überdruck: PP
+        return [
+            {
+                ...POLYFLEX_PP,
+                reasons: [
+                    'Öl-Brennwertgeräte im Standardbetrieb bleiben unter 120 °C',
+                    'PP ist kostengünstiger als PVDF und säurebeständig',
+                ],
+            },
+            {
+                ...POLYFLEX_PVDF,
+                reasons: ['Alternative bei erhöhter Abgastemperatur (T160)'],
+            },
+        ];
+    }
+
+    // Fallback — shouldn't happen if wizard gates `Weiter` correctly.
+    return [STAHLLINE_DW, POLYFLEX_PP];
+}
+
+// ─────────────────────────────────────────────────────────────
+// Step relevance — which questions apply to a given answer path
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * Druck is only meaningful for Sanierung — Neubau is pre-specified so
+ * the pressure-regime answer is routed through engineering drawings,
+ * not the installer.
+ */
+export function isDruckRelevant(answers: WizardAnswers): boolean {
+    return answers.bauvorhaben === 'sanierung';
+}
+
+/**
+ * Temperaturklasse is only asked for Sanierung + Öl + Überdruck — the
+ * single path where we need to split PP vs PVDF. Neubau + Öl defaults
+ * to Überdruck-PP without asking (new builds are pre-specified), and
+ * Unterdruck-Öl always routes to StahlLine DW. Gas paths don't split
+ * PP / PVDF here (residential Brennwert stays PP; high-temp Gas PVDF
+ * is out of demo scope).
+ */
+export function isTemperaturklasseRelevant(answers: WizardAnswers): boolean {
+    return answers.betriebsart === 'oel' && answers.druck === 'ueberdruck';
+}
+
+// ─────────────────────────────────────────────────────────────
+// URL state encoding — base64(JSON) via standard btoa/atob
+// ─────────────────────────────────────────────────────────────
+
+/**
+ * Encode wizard state into a URL-safe base64 string. Used so that
+ * partners can share a direct link to a specific step or result.
+ *
+ * Opaque-by-design: discrete query params would be more grep-friendly
+ * for server-log analytics, but the demo narrative is "share a configured
+ * URL" so round-trip integrity beats readability. Revisit if analytics
+ * start caring about the shape.
+ */
+export function encodeAnswers(answers: WizardAnswers): string {
+    if (Object.keys(answers).length === 0) return '';
+    const json = JSON.stringify(answers);
+    const b64 = btoa(json);
+    // URL-safe: replace `+/=` with `-_.` so we don't need extra encoding.
+    return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+export function decodeAnswers(encoded: string | null | undefined): WizardAnswers {
+    if (!encoded) return {};
+    try {
+        const b64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+        const pad = b64.length % 4 === 0 ? '' : '='.repeat(4 - (b64.length % 4));
+        const json = atob(b64 + pad);
+        const parsed = JSON.parse(json) as WizardAnswers;
+        return parsed && typeof parsed === 'object' ? parsed : {};
+    } catch {
+        return {};
+    }
+}

package/dist/assets/storefront/src/scenarios/kaminpro/system-finder/page.tsx

@@ -0,0 +1,21 @@
+import { Suspense } from 'react';
+import { SystemFinderWizard } from './wizard';
+
+/**
+ * KaminPro System Finder — scenario-specific route component.
+ *
+ * Server component shell; the actual wizard is a client component to handle
+ * URL-synced state. Wrapped in <Suspense> because `useSearchParams` forces
+ * static prerender to bail otherwise.
+ */
+export function SystemFinderPage() {
+    // `--page-top-offset` accounts for the fixed navbar + optional banners
+    // (e.g. AwaitingApprovalBanner). See globals.css.
+    return (
+        <main className="container mx-auto px-4 pt-[calc(var(--page-top-offset)+2rem)] pb-8 md:pt-[calc(var(--page-top-offset)+3rem)] md:pb-12">
+            <Suspense fallback={null}>
+                <SystemFinderWizard />
+            </Suspense>
+        </main>
+    );
+}