@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/schematic.tsx

@@ -0,0 +1,674 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';
+import { getEvaluatedValue, getFieldDefinition, labelForOption } from '../lib/data';
+import type { ConfigurationEvaluation, ConfiguratorSystem } from '../lib/types';
+
+/**
+ * Returns a set of field refs that have changed since the previous
+ * evaluation. Refs stay in the set for `durationMs` before being cleared,
+ * so the caller can apply a fading highlight animation to whichever
+ * schematic element depends on that field.
+ *
+ * IMPORTANT: `refs` must be a stable reference across renders (module-level
+ * constant or `useMemo`). An inline array literal would re-run the effect
+ * every render, clearing and re-setting `changed` on each pass — producing
+ * a continuous flash. Don't change that without changing the effect deps.
+ *
+ * Null-evaluation behaviour is deliberately one-way: when `evaluation` goes
+ * null (e.g. transient network error), we preserve the last-known value
+ * map so that on reconnect, fields whose values haven't actually changed
+ * don't spuriously re-flash.
+ */
+function useRecentFieldChanges(
+    evaluation: ConfigurationEvaluation | null,
+    refs: readonly string[],
+    durationMs = 1600,
+): Set<string> {
+    const prev = useRef<Map<string, string>>(new Map());
+    const [changed, setChanged] = useState<Set<string>>(new Set());
+
+    useEffect(() => {
+        if (!evaluation) return;
+        const newChanged = new Set<string>();
+        for (const ref of refs) {
+            const value = evaluation.fields.find(f => f.fieldRef === ref)?.value ?? '';
+            const before = prev.current.get(ref);
+            if (before !== undefined && before !== value) {
+                newChanged.add(ref);
+            }
+            prev.current.set(ref, value);
+        }
+        if (newChanged.size === 0) return;
+        setChanged(newChanged);
+        const t = setTimeout(() => setChanged(new Set()), durationMs);
+        return () => clearTimeout(t);
+    }, [evaluation, refs, durationMs]);
+
+    return changed;
+}
+
+/**
+ * Technical axonometric schematic of the assembled chimney stack.
+ *
+ * This is the one place in the PDP that hard-couples to specific backend
+ * field refs because the SVG geometry branches on their values. If any of
+ * these refs are renamed or removed, the schematic degrades to a safe
+ * neutral default — the rest of the PDP keeps working.
+ *
+ * Read field refs:
+ *   - allgemein.brennstoff     (title strip annotation)
+ *   - allgemein.dn             (DN callout)
+ *   - allgemein.bauhoehe       (stack length + callout, mm from backend)
+ *   - allgemein.leistung       (kW badge on Kessel)
+ *   - montage.aussenmontage    ('true' / 'false' — wall vs roof geometry)
+ *   - tstueck.winkel           ('45' / '87' / '90' — T-piece shape)
+ *   - tstueck.reinigung        ('unten' / 'seitlich' — Fußteil at base)
+ *   - ueberdach.kaminabschluss ('regenhaube' / 'abstromkonus' / 'offen' — mouth)
+ *   - ueberdach.hoeheUeberBefestigung (above-roof section, mm from backend)
+ *   - dachdurchfuehrung.dachneigung  (roof pitch angle, degrees)
+ *   - zugbegrenzer.notwendig   (draft-regulator valve toggle)
+ */
+
+const REFS = {
+    brennstoff: 'allgemein.brennstoff',
+    dn: 'allgemein.dn',
+    bauhoehe: 'allgemein.bauhoehe',
+    leistung: 'allgemein.leistung',
+    aussenmontage: 'montage.aussenmontage',
+    tWinkel: 'tstueck.winkel',
+    reinigung: 'tstueck.reinigung',
+    kaminabschluss: 'ueberdach.kaminabschluss',
+    hoeheUeberBefestigung: 'ueberdach.hoeheUeberBefestigung',
+    dachneigung: 'dachdurchfuehrung.dachneigung',
+    zugbegrenzer: 'zugbegrenzer.notwendig',
+} as const;
+
+interface SchematicProps {
+    system: ConfiguratorSystem;
+    evaluation: ConfigurationEvaluation | null;
+}
+
+const WATCHED_REFS = Object.values(REFS);
+
+export function Schematic({ system, evaluation }: SchematicProps) {
+    const get = (ref: string, fallback = '') => getEvaluatedValue(evaluation, ref, fallback);
+    const recent = useRecentFieldChanges(evaluation, WATCHED_REFS);
+    // Returns the flash class name when the given ref (or any of the given
+    // refs) changed recently — applied to SVG groups so they pulse.
+    const flashClass = useCallback(
+        (...refs: string[]) => (refs.some(r => recent.has(r)) ? 'kp-schem-flash' : undefined),
+        [recent],
+    );
+
+    const brennstoffValue = get(REFS.brennstoff);
+    const brennstoffField = getFieldDefinition(system, REFS.brennstoff);
+    const brennstoffLabel = brennstoffValue ? labelForOption(brennstoffField, brennstoffValue) : '—';
+
+    // Drawing label: strip the scenario prefix from the system code.
+    // `kaminpro-stahlline-dw` → `STAHLLINE-DW`, `kaminpro-polyflex-pp` → `POLYFLEX-PP`.
+    const dwgLabel = system.code.replace(/^kaminpro-/, '').toUpperCase();
+
+    const dnValue = get(REFS.dn);
+
+    const montageAussen = get(REFS.aussenmontage) === 'true';
+    // Empty string = field cleared by a constrain rule — render a neutral
+    // placeholder rather than falling back to the default shape (which
+    // looks like a silent failure).
+    const kaminabschlussRaw = get(REFS.kaminabschluss, '');
+    const kaminabschluss = kaminabschlussRaw || 'pending';
+    const isAbstrom = kaminabschluss === 'abstromkonus';
+    const isPending = kaminabschluss === 'pending';
+    const tWinkel = get(REFS.tWinkel, '87');
+    const reinigung = get(REFS.reinigung, 'unten');
+
+    // Pressure regime derived from brennstoff (since druck is not a
+    // user-facing field any more). Gas/Öl = Überdruck (pushed gases),
+    // solid fuels = Unterdruck (natural draft).
+    const isUeberdruck = brennstoffValue === 'gas' || brennstoffValue === 'oel';
+
+    // kW rating for the appliance badge on the Kessel.
+    const leistungKw = Number(get(REFS.leistung)) || 0;
+    // Guy-wire bracing: required above 3 m height-above-last-fixing per
+    // EN 1856. Draw 3 anchor wires fanning out from the above-roof pipe.
+    const bracingNeeded = Number(get(REFS.hoeheUeberBefestigung)) > 2999;
+    // Zugbegrenzer opt-in shows a small valve icon on the lower pipe.
+    const zugbegrenzerActive = get(REFS.zugbegrenzer) === 'true';
+
+    // Bauhöhe (mm) → m for display; stackRun px mapped 3–25m into 120–340px.
+    const bauhoeheMm = Number(get(REFS.bauhoehe)) || 5000;
+    const h = Math.max(3, Math.min(25, bauhoeheMm / 1000));
+    const stackRun = 120 + (h - 3) * 10;
+
+    // Höhe über letzter Befestigung (mm) → m for display; udRun px mapped
+    // 0.4–3m into 30–87px.
+    const hoeheMm = Number(get(REFS.hoeheUeberBefestigung)) || 1000;
+    const ueberdach = Math.max(0.4, Math.min(3, hoeheMm / 1000));
+    const udRun = 30 + (ueberdach - 0.4) * 22;
+
+    // Dachneigung (°) clamped 0–55 for viewport fit. Don't use `|| 35` —
+    // `0` (Flachdach) is a valid input and shouldn't fall back.
+    const dachneigungParsed = Number(get(REFS.dachneigung, '35'));
+    const dachneigung = Math.max(
+        0,
+        Math.min(55, Number.isFinite(dachneigungParsed) ? dachneigungParsed : 35),
+    );
+
+    const stroke = '#d6d3d1';
+    const sub = '#78716c';
+    const accent = '#e7e5e4';
+
+    // Layout anchors — baseY grows with stack height so the schematic fills
+    // the container at any height instead of clumping at the bottom of a
+    // fixed-size canvas. `vbH` (viewBox height) tracks this so the SVG
+    // scales naturally.
+    const cx = 240;
+    // 120 px of head-room keeps the ABSCHLUSS callout clear of the title
+    // strip (which occupies y≤40).
+    const mouthY = 120;
+    const roofY = mouthY + udRun;
+    const baseY = roofY + stackRun;
+    const vbH = baseY + 80;
+
+    // Wall bracket count is read from the LIVE BOM so the drawing can
+    // never drift from the actual parts list. Falls back to a conservative
+    // estimate if the evaluation hasn't returned yet.
+    const wallBracketLine = evaluation?.lines.find(
+        l => l.productVariant.facetValues?.some(
+            fv => fv.facet?.code === 'classification' && fv.code === 'wallBracket',
+        ),
+    );
+    const konsolenCount = Math.max(
+        1,
+        wallBracketLine?.quantity ?? Math.ceil(h / 4) + 1,
+    );
+    const konsolenTopY = roofY + 10;
+    const konsolenSpan = stackRun - 90;
+
+    const calloutText: CSSProperties = { fontFamily: "'JetBrains Mono', monospace", fontSize: '9px', letterSpacing: '0.04em' };
+    const calloutVal: CSSProperties = { fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', fontWeight: 500 };
+
+    const abschlussLabel = isPending ? '—' : isAbstrom ? 'Abstromkonus' : 'Regenhaube';
+    const tWinkelLabel = tWinkel === '45-einlauf' ? '45° Einlauf' : `${tWinkel}°`;
+
+    return (
+        <svg
+            viewBox={`0 0 480 ${vbH}`}
+            preserveAspectRatio="xMidYMin meet"
+            className="w-full h-full"
+            style={{ fontFamily: "'JetBrains Mono', monospace" }}
+        >
+            <defs>
+                <pattern id="kp-hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
+                    <line x1="0" y1="0" x2="0" y2="6" stroke={sub} strokeWidth="0.7" />
+                </pattern>
+                <pattern id="kp-brick" patternUnits="userSpaceOnUse" width="16" height="8">
+                    <rect width="16" height="8" fill="none" />
+                    <path d="M0 4 H16 M8 0 V4 M0 8 V4 M16 8 V4" stroke={sub} strokeWidth="0.4" />
+                </pattern>
+            </defs>
+
+            {/* Title strip */}
+            <g>
+                <text x="18" y="24" fill={accent} fontSize="11" fontWeight="600">DWG · {dwgLabel} · AXO</text>
+                <text x="18" y="38" fill={sub} fontSize="9">REV 04 · 21.04.2026 · M 1:20</text>
+                <text x="462" y="24" fill={sub} fontSize="9" textAnchor="end">DN {dnValue || '—'}</text>
+                <text x="462" y="38" fill={sub} fontSize="9" textAnchor="end">{brennstoffLabel}</text>
+            </g>
+
+            {/* Corner tick marks */}
+            {([[12, 12], [468, 12], [12, vbH - 12], [468, vbH - 12]] as const).map(([x, y], i) => (
+                <g key={i} stroke={sub} strokeWidth="0.7" fill="none">
+                    <line x1={x - 6} y1={y} x2={x + 6} y2={y} />
+                    <line x1={x} y1={y - 6} x2={x} y2={y + 6} />
+                </g>
+            ))}
+
+            {/* Ground */}
+            <g>
+                <line x1="18" y1={baseY} x2="462" y2={baseY} stroke={stroke} strokeWidth="1" />
+                {Array.from({ length: 28 }).map((_, i) => (
+                    <line key={i} x1={20 + i * 16} y1={baseY} x2={12 + i * 16} y2={baseY + 10} stroke={sub} strokeWidth="0.7" />
+                ))}
+                <text x="22" y={baseY + 24} fill={sub} fontSize="8">OKFB ±0,000</text>
+            </g>
+
+            {/* Building envelope —
+                Interior: chimney rises through a narrow masonry shaft
+                inside the house, with a pitched roof (angle driven by
+                `dachdurchfuehrung.dachneigung`). Shaft pierces the roof
+                with a flashing collar.
+                Exterior: single facade wall to the left of the pipe, no
+                roof drawn (the pipe runs up the outside of the building). */}
+            {/* Building envelope — shaft walls, roof band, flashing collar,
+                exterior facade. No flash: the envelope is structural context,
+                not a driven response to a field change. */}
+            <g>
+            {!montageAussen ? (
+                (() => {
+                    const slope = Math.tan((dachneigung * Math.PI) / 180);
+                    // Roof extends 110 px each side of shaft center.
+                    const roofHalfW = 110;
+                    const roofLX = cx - roofHalfW;
+                    const roofRX = cx + roofHalfW;
+                    const rise = slope * roofHalfW;
+                    // Pitched up to the right (common convention); shaft
+                    // pierces the midpoint of the roof at y=roofY.
+                    const roofLY = roofY + rise;   // lower (far-left eave)
+                    const roofRY = roofY - rise;   // upper (far-right ridge direction)
+                    const roofThickness = 18;
+                    // Shaft walls: two brick rects hugging the chimney with
+                    // an ~15 px air gap each side. A masonry shaft terminates
+                    // at the roof — only the insulated steel pipe continues
+                    // above into the Über-Dach section. Top the walls a few
+                    // pixels into the roof band for a clean pierce.
+                    const shaftLX = cx - 35;
+                    const shaftRX = cx + 15;
+                    const shaftWallW = 20;
+                    const shaftTopY = roofY + 2;
+                    return (
+                        <g>
+                            {/* Left shaft wall */}
+                            <rect
+                                x={shaftLX} y={shaftTopY}
+                                width={shaftWallW} height={baseY - shaftTopY}
+                                fill="url(#kp-brick)" stroke={stroke} strokeWidth="0.8"
+                            />
+                            {/* Right shaft wall */}
+                            <rect
+                                x={shaftRX} y={shaftTopY}
+                                width={shaftWallW} height={baseY - shaftTopY}
+                                fill="url(#kp-brick)" stroke={stroke} strokeWidth="0.8"
+                            />
+                            {/* Pitched roof band */}
+                            <path
+                                d={`M ${roofLX} ${roofLY} L ${roofRX} ${roofRY} L ${roofRX} ${roofRY - roofThickness} L ${roofLX} ${roofLY - roofThickness} Z`}
+                                fill="url(#kp-hatch)" stroke={stroke} strokeWidth="0.9"
+                            />
+                            {/* Flashing collar at the shaft-roof intersection
+                                (over the roof band, under the pipe). A little
+                                trapezoid that sits perpendicular to the roof
+                                slope at the shaft. */}
+                            <rect
+                                x={cx - 22}
+                                y={roofY - 5}
+                                width={44}
+                                height={10}
+                                fill="#2a2522" stroke={stroke} strokeWidth="1"
+                                transform={`rotate(${-dachneigung} ${cx} ${roofY})`}
+                            />
+                        </g>
+                    );
+                })()
+            ) : (
+                <g>
+                    {/* External facade mount layout (left → right):
+                        - Interior building volume (Kessel sits inside, drawn
+                          by the stack group below)
+                        - Exterior wall — thin vertical band between Kessel
+                          and the pipe. The Kessel's short horizontal stub
+                          passes THROUGH this wall (it's the only pipe that
+                          crosses the building envelope).
+                        - Eave overhang sloping up-right from the wall top
+                          toward the pipe.
+                        - Chimney pipe runs up the OUTSIDE of the wall with
+                          brackets; terminates above the eave. */}
+                    <rect
+                        x={200}
+                        y={roofY}
+                        width={20}
+                        height={baseY - roofY}
+                        fill="url(#kp-brick)" stroke={stroke} strokeWidth="0.8"
+                    />
+                    {/* Eave overhang — slopes up-right at ~22°, stops before
+                        the pipe so the pipe visibly clears the eave. */}
+                    <path
+                        d={`M 220 ${roofY + 5} L 228 ${roofY - 11} L 228 ${roofY - 3} L 220 ${roofY + 13} Z`}
+                        fill="url(#kp-hatch)" stroke={stroke} strokeWidth="0.9"
+                    />
+                    {/* Dashed clearance line between eave tip and pipe. */}
+                    <line x1={228} y1={roofY - 5} x2={cx - 10} y2={roofY - 5} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                </g>
+            )}
+            </g>
+
+            {/* Annotation overlay — rendered as a sibling of the envelope so
+                layout order places it above the roof without affecting the
+                envelope's own grouping. Text never goes in a flash wrapper
+                (drop-shadow outlines look awful on glyphs). */}
+            {!montageAussen ? (
+                (() => {
+                    const slope = Math.tan((dachneigung * Math.PI) / 180);
+                    const roofHalfW = 110;
+                    const roofRX = cx + roofHalfW;
+                    const roofRY = roofY - slope * roofHalfW;
+                    return (
+                        <text x={roofRX + 4} y={roofRY - 22} fill={sub} fontSize="8">
+                            {dachneigung.toFixed(0)}°
+                        </text>
+                    );
+                })()
+            ) : (
+                <>
+                    <text x={100} y={roofY - 12} fill={sub} fontSize="9" style={{ letterSpacing: '0.08em' }}>INNEN</text>
+                    <text x={260} y={roofY - 12} fill={sub} fontSize="9" style={{ letterSpacing: '0.08em' }}>AUSSEN</text>
+                </>
+            )}
+
+            {/* Stack */}
+            <g>
+                {/* Mouth / termination — flashes when kaminabschluss changes.
+                    Text labels are rendered outside as non-flashing siblings. */}
+                <g className={flashClass(REFS.kaminabschluss)}>
+                {isPending ? (
+                    <g>
+                        {/* Dashed open-top placeholder — a constrain rule
+                            cleared the terminal and is waiting for the user
+                            to pick a new one. */}
+                        <line x1={cx - 10} y1={mouthY} x2={cx - 10} y2={mouthY - 14} stroke={sub} strokeWidth="0.9" strokeDasharray="3 2" />
+                        <line x1={cx + 10} y1={mouthY} x2={cx + 10} y2={mouthY - 14} stroke={sub} strokeWidth="0.9" strokeDasharray="3 2" />
+                    </g>
+                ) : isAbstrom ? (
+                    <g>
+                        <path
+                            d={`M ${cx - 14} ${mouthY} L ${cx + 14} ${mouthY} L ${cx + 6} ${mouthY - 18} L ${cx - 6} ${mouthY - 18} Z`}
+                            fill="#2a2522" stroke={stroke} strokeWidth="1"
+                        />
+                        <path d={`M ${cx - 6} ${mouthY - 18} L ${cx + 6} ${mouthY - 18}`} stroke={stroke} strokeWidth="1" />
+                    </g>
+                ) : (
+                    <g>
+                        <rect x={cx - 20} y={mouthY - 10} width="40" height="4" fill="#2a2522" stroke={stroke} strokeWidth="1" />
+                        <line x1={cx - 14} y1={mouthY - 6} x2={cx - 14} y2={mouthY} stroke={stroke} strokeWidth="1" />
+                        <line x1={cx + 14} y1={mouthY - 6} x2={cx + 14} y2={mouthY} stroke={stroke} strokeWidth="1" />
+                        <line x1={cx - 8} y1={mouthY - 6} x2={cx - 8} y2={mouthY} stroke={stroke} strokeWidth="0.8" />
+                        <line x1={cx + 8} y1={mouthY - 6} x2={cx + 8} y2={mouthY} stroke={stroke} strokeWidth="0.8" />
+                    </g>
+                )}
+
+                </g>
+
+                {/* ABSCHLUSS? placeholder text — non-flashing sibling, only
+                    rendered when the terminal is pending. */}
+                {isPending && (
+                    <text x={cx} y={mouthY - 22} fill={sub} fontSize="8" textAnchor="middle">ABSCHLUSS?</text>
+                )}
+
+                {/* Über-Dach section — flashes when hoeheUeberBefestigung changes. */}
+                <g className={flashClass(REFS.hoeheUeberBefestigung)}>
+                    <rect x={cx - 10} y={mouthY} width="20" height={roofY - mouthY} fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                    <line x1={cx - 6} y1={mouthY + 2} x2={cx - 6} y2={roofY} stroke={sub} strokeWidth="0.6" />
+                    <line x1={cx + 6} y1={mouthY + 2} x2={cx + 6} y2={roofY} stroke={sub} strokeWidth="0.6" />
+                </g>
+
+                {/* Main stack — flashes when bauhoehe changes. */}
+                <g className={flashClass(REFS.bauhoehe)}>
+                    <rect x={cx - 10} y={roofY} width="20" height={stackRun - 60} fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                    <line x1={cx - 6} y1={roofY + 2} x2={cx - 6} y2={roofY + stackRun - 60} stroke={sub} strokeWidth="0.6" />
+                    <line x1={cx + 6} y1={roofY + 2} x2={cx + 6} y2={roofY + stackRun - 60} stroke={sub} strokeWidth="0.6" />
+                </g>
+
+                {/* Wandkonsolen — ~ every 4 m. Attach from inner shaft
+                    wall (interior) or from the exterior facade (exterior)
+                    to the pipe left edge. Flashes when bauhoehe (count)
+                    or aussenmontage (attachment face) changes. */}
+                <g className={flashClass(REFS.bauhoehe, REFS.aussenmontage)}>
+                    {(() => {
+                        const bracketLeftX = montageAussen ? 220 : cx - 15;
+                        return Array.from({ length: konsolenCount }).map((_, i) => {
+                            const y = konsolenTopY + (i + 1) * (konsolenSpan / (konsolenCount + 1));
+                            return (
+                                <g key={i}>
+                                    <line x1={bracketLeftX} y1={y} x2={cx - 10} y2={y} stroke={stroke} strokeWidth="0.9" />
+                                    <circle cx={cx - 10} cy={y} r="2" fill={stroke} />
+                                    <circle cx={bracketLeftX} cy={y} r="1.5" fill={stroke} />
+                                </g>
+                            );
+                        });
+                    })()}
+                </g>
+
+                {/* T-Stück — geometry by angle. 45°-Einlauf = standard
+                    horizontal T-piece stub plus two 45° bends and a short
+                    diagonal run into a lower-offset Kessel. 87° = industry-
+                    standard nearly-horizontal inlet (slight upward slope).
+                    90° = pure horizontal. */}
+                {(() => {
+                    const tY = baseY - 60;
+                    if (tWinkel === '45-einlauf') {
+                        // Dog-leg at the same visual weight as the 87°/90°
+                        // stub+Kessel but with a 45° drop between the T-piece
+                        // and the Kessel. Mirrors when aussenmontage=true so
+                        // the Kessel sits INSIDE the building (left of pipe).
+                        const stubTop = tY + 8;
+                        const pipeW = 22;
+                        const stubDir = montageAussen ? -1 : 1;
+                        const pipeEdgeX = cx + stubDir * 10;         // vertical-pipe side wall
+                        const stubEndX = cx + stubDir * 18;          // end of horiz stub
+                        const jogEndX = stubEndX + stubDir * pipeW;  // after 45° drop
+                        const lowerPipeY = stubTop + pipeW;
+                        const kesselInnerX = cx + stubDir * 54;      // pipe-side face of Kessel
+                        const kesselOuterX = cx + stubDir * 90;      // far side (36 px box)
+                        const stubRectX = Math.min(pipeEdgeX, stubEndX);
+                        const stubRectW = Math.abs(stubEndX - pipeEdgeX);
+                        const lowerRectX = Math.min(jogEndX, kesselInnerX);
+                        const lowerRectW = Math.abs(kesselInnerX - jogEndX);
+                        const kesselRectX = Math.min(kesselInnerX, kesselOuterX);
+                        const kesselCenterX = (kesselInnerX + kesselOuterX) / 2;
+                        const labelAnchor = stubDir > 0 ? 'start' : 'end';
+                        return (
+                            <>
+                                <g className={flashClass(REFS.tWinkel, REFS.aussenmontage)}>
+                                    {/* Vertical T-piece shaft (continuous with main stack). */}
+                                    <rect x={cx - 10} y={tY} width="20" height="56" fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                                    <line x1={cx - 6} y1={tY + 2} x2={cx - 6} y2={tY + 54} stroke={sub} strokeWidth="0.6" />
+                                    <line x1={cx + 6} y1={tY + 2} x2={cx + 6} y2={tY + 54} stroke={sub} strokeWidth="0.6" />
+
+                                    {/* Horizontal stub out of T-piece (same thickness as 87°/90°) */}
+                                    <rect x={stubRectX} y={stubTop} width={stubRectW} height={pipeW} fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                                    <line x1={pipeEdgeX} y1={stubTop + 6} x2={stubEndX} y2={stubTop + 6} stroke={sub} strokeWidth="0.6" />
+                                    <line x1={pipeEdgeX} y1={stubTop + 16} x2={stubEndX} y2={stubTop + 16} stroke={sub} strokeWidth="0.6" />
+
+                                    {/* 45° diagonal pipe (parallelogram, drops by pipeW) */}
+                                    <path
+                                        d={`M ${stubEndX} ${stubTop} L ${jogEndX} ${stubTop + pipeW} L ${jogEndX} ${stubTop + pipeW * 2} L ${stubEndX} ${stubTop + pipeW} Z`}
+                                        fill="#1c1917" stroke={stroke} strokeWidth="1"
+                                    />
+
+                                    {/* Horizontal pipe into Kessel (at the lower jog level) */}
+                                    <rect x={lowerRectX} y={lowerPipeY} width={lowerRectW} height={pipeW} fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                                    <line x1={jogEndX} y1={lowerPipeY + 6} x2={kesselInnerX} y2={lowerPipeY + 6} stroke={sub} strokeWidth="0.6" />
+                                    <line x1={jogEndX} y1={lowerPipeY + 16} x2={kesselInnerX} y2={lowerPipeY + 16} stroke={sub} strokeWidth="0.6" />
+
+                                    {/* Kessel (same 36×30 hatched box as 87°/90°, just dropped by pipeW) */}
+                                    <rect x={kesselRectX} y={lowerPipeY - 4} width="36" height="30" fill="url(#kp-hatch)" stroke={stroke} strokeWidth="0.8" />
+                                </g>
+                                {/* Non-flashing text siblings. */}
+                                <text x={stubEndX + stubDir * 3} y={stubTop - 3} fill={sub} fontSize="8" textAnchor={labelAnchor}>45°</text>
+                                <text x={jogEndX + stubDir * 3} y={lowerPipeY + pipeW + 9} fill={sub} fontSize="8" textAnchor={labelAnchor}>45°</text>
+                                <text x={kesselCenterX} y={lowerPipeY + pipeW / 2} fill={sub} fontSize="8" textAnchor="middle">KESSEL</text>
+                                {leistungKw > 0 && (
+                                    <text x={kesselCenterX} y={lowerPipeY + pipeW / 2 + 12} fill={accent} fontSize="7" textAnchor="middle" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+                                        {leistungKw} kW
+                                    </text>
+                                )}
+                            </>
+                        );
+                    }
+                    // 87° slopes the inlet upward by 3 px (~3° offset from
+                    // 90°). Geometrically subtle but visually distinct.
+                    const slope = tWinkel === '87' ? 3 : 0;
+                    // Exterior mount: Kessel is inside the building (LEFT
+                    // of the wall), so the T-piece stub and Kessel box
+                    // mirror to the left of the pipe. The stub crosses the
+                    // exterior wall to reach the Kessel.
+                    const stubDir = montageAussen ? -1 : 1;
+                    const pipeEdgeX = cx + stubDir * 10;
+                    const kesselInnerX = cx + stubDir * 48; // pipe-side face of Kessel
+                    const kesselOuterX = cx + stubDir * 84; // far side of Kessel
+                    const kesselRectX = Math.min(kesselInnerX, kesselOuterX);
+                    const kesselCenterX = (kesselInnerX + kesselOuterX) / 2;
+                    return (
+                        <>
+                            <g className={flashClass(REFS.tWinkel, REFS.aussenmontage)}>
+                                <rect x={cx - 10} y={tY} width="20" height="56" fill="#1c1917" stroke={stroke} strokeWidth="1" />
+                                <path
+                                    d={`M ${pipeEdgeX} ${tY + 8} L ${kesselInnerX} ${tY + 8 - slope} L ${kesselInnerX} ${tY + 30 - slope} L ${pipeEdgeX} ${tY + 30}`}
+                                    fill="#1c1917" stroke={stroke} strokeWidth="1"
+                                />
+                                <line x1={pipeEdgeX} y1={tY + 14} x2={kesselInnerX} y2={tY + 14 - slope} stroke={sub} strokeWidth="0.6" />
+                                <line x1={pipeEdgeX} y1={tY + 24} x2={kesselInnerX} y2={tY + 24 - slope} stroke={sub} strokeWidth="0.6" />
+                                <rect x={kesselRectX} y={tY + 4 - slope} width="36" height="30" fill="url(#kp-hatch)" stroke={stroke} strokeWidth="0.8" />
+                            </g>
+                            {/* Non-flashing text siblings. */}
+                            <text x={kesselCenterX} y={tY + 18 - slope} fill={sub} fontSize="8" textAnchor="middle">KESSEL</text>
+                            {leistungKw > 0 && (
+                                <text x={kesselCenterX} y={tY + 30 - slope} fill={accent} fontSize="7" textAnchor="middle" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
+                                    {leistungKw} kW
+                                </text>
+                            )}
+                        </>
+                    );
+                })()}
+
+                {/* Fußteil — only if Reinigung unten. Cleaning door on
+                    the left face (the access hatch a sweep uses). */}
+                {reinigung === 'unten' && (
+                    <g className={flashClass(REFS.reinigung)}>
+                        <rect x={cx - 14} y={baseY - 10} width="28" height="12" fill="#2a2522" stroke={stroke} strokeWidth="1" />
+                        {/* Cleaning-door outline */}
+                        <rect x={cx - 12} y={baseY - 8} width="6" height="8" fill="#1c1917" stroke={stroke} strokeWidth="0.6" />
+                        {/* Door hinge marker on the left */}
+                        <line x1={cx - 12} y1={baseY - 6} x2={cx - 11} y2={baseY - 6} stroke={stroke} strokeWidth="0.4" />
+                        <line x1={cx - 12} y1={baseY - 3} x2={cx - 11} y2={baseY - 3} stroke={stroke} strokeWidth="0.4" />
+                        {/* Door handle dot on the right edge */}
+                        <circle cx={cx - 7} cy={baseY - 4} r="0.6" fill={stroke} />
+                        {/* Condensate drain spigot on the bottom */}
+                        <rect x={cx - 3} y={baseY + 2} width="6" height="3" fill="#1c1917" stroke={stroke} strokeWidth="0.5" />
+                    </g>
+                )}
+
+                {/* Flow-direction arrows along the stack. Solid triangles
+                    for Überdruck (pushed gases), hollow triangles for
+                    Unterdruck (natural draft). 3 arrows spaced evenly. */}
+                <g className={flashClass(REFS.brennstoff)}>
+                {(() => {
+                    const tStuckY = baseY - 60;
+                    const arrowSpacing = (tStuckY - roofY) / 4;
+                    return Array.from({ length: 3 }).map((_, i) => {
+                        const y = roofY + arrowSpacing * (i + 1);
+                        const x = cx + 18;
+                        const shape = `M ${x} ${y} L ${x - 3} ${y + 5} L ${x + 3} ${y + 5} Z`;
+                        return (
+                            <path
+                                key={`flow-${i}`}
+                                d={shape}
+                                fill={isUeberdruck ? stroke : 'none'}
+                                stroke={stroke}
+                                strokeWidth="0.7"
+                            />
+                        );
+                    });
+                })()}
+                </g>
+
+                {/* Guy-wire bracing — fans out from the above-roof pipe
+                    when hoeheUeberBefestigung > 3 m per EN 1856. Three
+                    wires anchored at the roof at 45°/90°/135° from the
+                    pipe top. */}
+                {bracingNeeded && (
+                    <>
+                        <g className={flashClass(REFS.hoeheUeberBefestigung)} stroke={stroke} strokeWidth="0.6" strokeDasharray="3 2">
+                            <line x1={cx} y1={mouthY + 20} x2={cx - 50} y2={roofY + 4} />
+                            <line x1={cx} y1={mouthY + 20} x2={cx + 50} y2={roofY + 4} />
+                            <line x1={cx} y1={mouthY + 20} x2={cx} y2={roofY + 4} />
+                            {/* Anchor collar at the bracing point */}
+                            <circle cx={cx} cy={mouthY + 20} r="2.5" fill="#2a2522" stroke={stroke} strokeWidth="0.6" />
+                        </g>
+                        {/* Non-flashing label sibling. */}
+                        <text x={cx + 58} y={(mouthY + roofY) / 2 + 4} fill={sub} fontSize="7">3-Punkt-Abspannung</text>
+                    </>
+                )}
+
+                {/* Zugbegrenzer — small valve icon on the lower pipe
+                    below the T-piece when the installer opts in. */}
+                {zugbegrenzerActive && (
+                    <>
+                        <g className={flashClass(REFS.zugbegrenzer)} transform={`translate(${cx + 16} ${baseY - 28})`}>
+                            <line x1={-6} y1={0} x2={0} y2={0} stroke={stroke} strokeWidth="0.8" />
+                            <circle r="5" fill="#2a2522" stroke={stroke} strokeWidth="0.9" />
+                            <line x1={-3.5} y1={0} x2={3.5} y2={0} stroke={stroke} strokeWidth="0.8" />
+                        </g>
+                        {/* Non-flashing label sibling — absolute-positioned equivalent
+                            of x=10, y=3 inside the translated group. */}
+                        <text x={cx + 26} y={baseY - 25} fill={sub} fontSize="7">Zugbegrenzer</text>
+                    </>
+                )}
+
+                {/* Sicherheitsabstand — dashed "safety clearance" box around
+                    the vertical stack, annotating the 100 mm clear-of-
+                    combustibles requirement per ÖNORM B 8200. */}
+                <g stroke={sub} strokeWidth="0.5" strokeDasharray="3 2" fill="none">
+                    <rect x={cx - 18} y={mouthY - 4} width="36" height={baseY - mouthY + 2} />
+                </g>
+                <text x={cx - 22} y={(mouthY + baseY) / 2 + 28} fill={sub} fontSize="7" textAnchor="end" style={{ letterSpacing: '0.04em' }}>
+                    100 mm Abstand zu
+                </text>
+                <text x={cx - 22} y={(mouthY + baseY) / 2 + 38} fill={sub} fontSize="7" textAnchor="end" style={{ letterSpacing: '0.04em' }}>
+                    brennbarem Material
+                </text>
+            </g>
+
+            {/* Callouts */}
+            <g fill={sub}>
+                {/* Mündung über First */}
+                <line x1={cx + 30} y1={mouthY - 4} x2={410} y2={mouthY - 4} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                <line x1={cx + 30} y1={roofY - 4} x2={410} y2={roofY - 4} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                <line x1={410} y1={mouthY - 4} x2={410} y2={roofY - 4} stroke={sub} strokeWidth="0.6" />
+                <text x="416" y={(mouthY + roofY) / 2 - 8} style={calloutText}>ÜBER DACH</text>
+                <text x="416" y={(mouthY + roofY) / 2 + 4} style={calloutVal} fill={accent}>{ueberdach.toFixed(1)} m</text>
+
+                {/* Bauhöhe gesamt */}
+                <line x1={cx - 20} y1={roofY + 10} x2={70} y2={roofY + 10} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                <line x1={cx - 20} y1={baseY - 10} x2={70} y2={baseY - 10} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                <line x1={70} y1={roofY + 10} x2={70} y2={baseY - 10} stroke={sub} strokeWidth="0.6" />
+                <text x="22" y={(roofY + baseY) / 2 - 4} style={calloutText}>BAUHÖHE</text>
+                <text x="22" y={(roofY + baseY) / 2 + 10} style={calloutVal} fill={accent}>{h.toFixed(1)} m</text>
+
+                {/* DN */}
+                <line x1={cx + 10} y1={roofY + 40} x2={cx + 78} y2={roofY + 40} stroke={sub} strokeWidth="0.5" strokeDasharray="2 2" />
+                <text x={cx + 82} y={roofY + 38} style={calloutText}>DN</text>
+                <text x={cx + 82} y={roofY + 50} style={calloutVal} fill={accent}>{dnValue ? `${dnValue} mm` : '—'}</text>
+
+                {/* T-Stück Winkel — right-anchored at the outer margin so
+                    the text stays inside the viewBox at every width. */}
+                <line
+                    x1={cx + 20}
+                    y1={baseY - 44}
+                    x2={414}
+                    y2={baseY - 44}
+                    stroke={sub}
+                    strokeWidth="0.5"
+                    strokeDasharray="2 2"
+                />
+                <text x={460} y={baseY - 46} style={calloutText} textAnchor="end">T-STÜCK</text>
+                <text x={460} y={baseY - 34} style={calloutVal} textAnchor="end" fill={accent}>{tWinkelLabel}</text>
+
+                {/* Montageart */}
+                <text x="22" y={baseY + 40} style={calloutText}>MONTAGE</text>
+                <text x="22" y={baseY + 54} style={calloutVal} fill={accent}>{montageAussen ? 'Außen' : 'Innen'}</text>
+
+                {/* Mündung type — hidden when pending (the dashed placeholder
+                    above the mouth already communicates what's missing). */}
+                {!isPending && (
+                    <>
+                        <text x={cx - 44} y={mouthY - 26} style={calloutText} textAnchor="end">ABSCHLUSS</text>
+                        <text x={cx - 44} y={mouthY - 14} style={calloutVal} textAnchor="end" fill={accent}>
+                            {abschlussLabel}
+                        </text>
+                    </>
+                )}
+            </g>
+        </svg>
+    );
+}