@vendure-platform/create 0.1.0

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

@@ -0,0 +1,123 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { Flame, Wrench, ListChecks, ClipboardCheck } from 'lucide-react';
+
+/**
+ * KaminPro hero — chimney systems partner portal.
+ * German text hardcoded (KaminPro is a German-only AT scenario).
+ *
+ * CTA points to /system-finder (the guided wizard) rather than the catalog
+ * or a PDP — guided selling is the front door for this scenario.
+ */
+export function KaminProHero() {
+    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(12,10,9,0.55) 0%, rgba(12,10,9,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)',
+                        }}
+                    >
+                        <Flame className="w-4 h-4" />
+                        Partnerportal für Hafner, HVAC & Gewerbe
+                    </div>
+
+                    <h1
+                        className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight"
+                        style={{ color: 'var(--hero-text)' }}
+                    >
+                        Komplette Kaminsysteme.
+                        <span className="block" style={{ color: 'var(--hero-accent)' }}>
+                            In Minuten konfiguriert.
+                        </span>
+                    </h1>
+
+                    <p
+                        className="text-lg md:text-xl max-w-2xl mx-auto"
+                        style={{ color: 'var(--hero-text-muted)' }}
+                    >
+                        StahlLine DW (Edelstahl) und PolyFlex PP (Kondensat) — deterministische
+                        Stücklisten ab Eingabe der Bauhöhe. Keine falschen Teile auf der Baustelle.
+                    </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="/system-finder" prefetch={false}>
+                                System finden
+                            </Link>
+                        </Button>
+                        <Button
+                            asChild
+                            variant="outline"
+                            size="lg"
+                            className="min-w-[200px]"
+                            style={{
+                                borderColor: 'var(--hero-border)',
+                                color: 'var(--hero-text-muted)',
+                            }}
+                        >
+                            <Link href="/login" prefetch={false}>
+                                Partner-Login
+                            </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: Flame, label: 'Für alle Brennstoffe' },
+                            { icon: Wrench, label: 'Modular aufgebaut' },
+                            { icon: ListChecks, label: 'Deterministische BOM' },
+                            { icon: ClipboardCheck, label: 'Fachberatung auf Abruf' },
+                        ] 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/kaminpro/index.ts

@@ -0,0 +1,50 @@
+import type { ScenarioConfig } from '@/config/scenario';
+import { withAuthGate } from './auth-gate';
+import { branding } from './branding';
+import { KaminProCartItems } from './cart-items';
+import { KaminProHero } from './hero';
+import { KaminProConfiguratorPdp } from './pdp/configurator-pdp';
+import { KaminProShopBySystem } from './shop-by-system';
+import { SystemFinderPage } from './system-finder/page';
+
+/**
+ * KaminPro scenario — Product Configurator showcase.
+ *
+ * Single-market (AT) partner portal for chimney systems. No channel picker.
+ * The configurator PDP is the flagship capability: a specialized three-column
+ * layout (module accordion · technical schematic · live BOM basket) that
+ * replaces the default product page for configurable products. Auth-gated —
+ * unauthenticated visitors see a partner-portal LoginNotice. The System
+ * Finder wizard is the front door; the configurator PDP is where installers
+ * actually spec systems.
+ */
+export const kaminProScenario: ScenarioConfig = {
+    branding,
+    overrides: {
+        home: {
+            Hero: KaminProHero,
+            // Replace the generic top-collection tile grid with a two-tile
+            // system picker pointing straight into the configurable PDPs.
+            ShopByCategory: KaminProShopBySystem,
+        },
+        // Conditional full-page PDP override — engages only for configurable
+        // products (those carrying a `configuratorSystemCode` custom field).
+        // Any future non-configurable product (spare parts, accessories) falls
+        // through to the default PDP slot composition.
+        pdp: {
+            shouldApply: product => !!product.customFields?.configuratorSystemCode,
+            component: KaminProConfiguratorPdp,
+        },
+        // Groups configurator-generated BOM lines under a single card with
+        // the configuration name + system badge + aggregate total. Non-
+        // configured lines render normally.
+        cart: {
+            CartItems: KaminProCartItems,
+        },
+    },
+    routes: {
+        // Gated — same cookie-presence check as the configurator PDP. Scenario
+        // routes are partner-only; unauthenticated visitors see the LoginNotice.
+        '/system-finder': withAuthGate(SystemFinderPage),
+    },
+};

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

@@ -0,0 +1,9 @@
+import type {ScenarioMeta} from '@/config/scenario-meta';
+
+// KaminPro is Austrian-market, German-first. Visitors whose
+// Accept-Language doesn't prefer `de` would otherwise fall through to
+// the global `LOCALES[0]` fallback; this overrides that so ambiguous
+// visitors still land on `/de`.
+export const kaminProMeta: ScenarioMeta = {
+    defaultLocale: 'de',
+};

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

@@ -0,0 +1,21 @@
+'use client';
+
+export function WarnBanner({ count, onDismiss }: { count: number; onDismiss?: () => void }) {
+    return (
+        <div className="px-6 py-2 bg-[#2a1c0a] border-b border-[#4a3418] flex items-center gap-3">
+            <span className="mono text-[10px] px-1.5 py-0.5 rounded-sm bg-[#4a3418] text-[#fbbf24] uppercase tracking-wider">
+                Warnungen · {count}
+            </span>
+            <span className="text-[12px] text-[#fcd34d] flex-1">
+                Ihre aktuelle Konfiguration enthält Hinweise, die Sie prüfen sollten, bevor Sie bestellen.
+            </span>
+            <button
+                type="button"
+                onClick={onDismiss}
+                className="mono text-[10.5px] text-[#fcd34d] hover:text-white"
+            >
+                Schließen
+            </button>
+        </div>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/bom-basket.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+    CLASSIFICATION_ORDER,
+    classificationLabel,
+    fmtEuro,
+    getLineClassification,
+} from '../lib/data';
+import type { ConfigurationEvaluation, EvaluatedLine } from '../lib/types';
+import { Btn } from './btn';
+
+export type CtaAction = 'cart' | 'quote';
+
+interface BomBasketProps {
+    evaluation: ConfigurationEvaluation | null;
+    hasErrors?: boolean;
+    cartState?: 'idle' | 'adding' | 'added';
+    quoteState?: 'idle' | 'saving';
+    onCta?: (action: CtaAction) => void;
+}
+
+/**
+ * Flash newly-added or quantity-changed lines for a short moment.
+ * The 500ms clear timeout MUST exceed the `kp-bom-in` CSS animation duration
+ * (currently 450ms in styles.css) — shortening it below that cuts the flash
+ * off mid-animation.
+ */
+function useFlashSet(lines: EvaluatedLine[]): Set<string> {
+    const [flash, setFlash] = useState<Set<string>>(new Set());
+    const prev = useRef<EvaluatedLine[]>([]);
+    useEffect(() => {
+        const prevMap = new Map(prev.current.map(l => [l.productVariant.id, l.quantity]));
+        const added = new Set<string>();
+        for (const l of lines) {
+            if (prevMap.get(l.productVariant.id) !== l.quantity) added.add(l.productVariant.id);
+        }
+        setFlash(added);
+        prev.current = lines;
+        const t = setTimeout(() => setFlash(new Set()), 500);
+        return () => clearTimeout(t);
+    }, [lines]);
+    return flash;
+}
+
+export function BomBasket({ evaluation, hasErrors, cartState = 'idle', quoteState = 'idle', onCta }: BomBasketProps) {
+    // Memoize to keep a stable reference — `evaluation?.lines ?? []` creates
+    // a new empty array on every render which would thrash useFlashSet's
+    // effect into an infinite loop when `evaluation` is null.
+    const lines = useMemo(() => evaluation?.lines ?? [], [evaluation]);
+
+    const { grouped, groupOrder, totalPrice, totalQty } = useMemo(() => {
+        const g: Record<string, EvaluatedLine[]> = {};
+        for (const l of lines) {
+            const cls = getLineClassification(l);
+            (g[cls] = g[cls] ?? []).push(l);
+        }
+        // Prefer the canonical order; any classification not in the canonical
+        // list appears alphabetically at the end.
+        const canonical = CLASSIFICATION_ORDER.filter(c => g[c]);
+        const extras = Object.keys(g)
+            .filter(c => !CLASSIFICATION_ORDER.includes(c))
+            .sort();
+        return {
+            grouped: g,
+            groupOrder: [...canonical, ...extras],
+            totalPrice: lines.reduce(
+                (sum, l) => sum + l.productVariant.priceWithTax * l.quantity,
+                0,
+            ),
+            totalQty: lines.reduce((sum, l) => sum + l.quantity, 0),
+        };
+    }, [lines]);
+
+    const flash = useFlashSet(lines);
+
+    return (
+        <div className="h-full flex flex-col bg-[color:var(--panel)]">
+            <div className="px-4 h-11 flex items-center border-b border-[color:var(--line)] shrink-0">
+                <div className="caps text-[color:var(--muted)]">Stückliste · Live</div>
+                <div className="ml-auto flex items-center gap-2">
+                    <span className="mono text-[10px] text-[color:var(--muted-2)]">
+                        {evaluation?.totals.lineCount ?? 0} Positionen · {totalQty} Stk
+                    </span>
+                    <span className="relative inline-block w-2 h-2">
+                        <span className="absolute inset-0 rounded-full bg-[color:var(--fire)] pulse-dot" />
+                    </span>
+                </div>
+            </div>
+
+            <div className="flex-1 overflow-y-auto scroll-slim">
+                {lines.length === 0 ? (
+                    <EmptyBom />
+                ) : (
+                    groupOrder.map(cls => (
+                        <div key={cls} className="border-b border-[color:var(--line)]">
+                            <div className="px-4 py-1.5 flex items-center gap-2 bg-[color:var(--panel-3)]">
+                                <span className="caps text-[color:var(--muted)]">{classificationLabel(cls)}</span>
+                                <span className="mono text-[10px] text-[color:var(--muted-2)]">
+                                    {grouped[cls].reduce((s, l) => s + l.quantity, 0)} Stk
+                                </span>
+                            </div>
+                            {grouped[cls].map(l => {
+                                const enNormFv = l.productVariant.facetValues?.find(
+                                    fv => fv.facet?.code === 'en_norm',
+                                );
+                                // Names in the CSV use `_` instead of spaces
+                                // to keep them a single token. Unslug for
+                                // display.
+                                const enNormDisplay = enNormFv
+                                    ? (enNormFv.name ?? enNormFv.code).replace(/_/g, ' ')
+                                    : null;
+                                const thumb = l.productVariant.product?.featuredAsset?.preview;
+                                return (
+                                    <div
+                                        key={l.productVariant.id}
+                                        className={cn(
+                                            'px-4 py-2 flex items-start gap-3 border-t border-[color:var(--line)] first:border-t-0',
+                                            flash.has(l.productVariant.id) && 'bom-flash',
+                                        )}
+                                    >
+                                        <div className="w-8 h-8 shrink-0 rounded-sm overflow-hidden bg-[color:var(--panel-3)] border border-[color:var(--line)]">
+                                            {thumb ? (
+                                                // eslint-disable-next-line @next/next/no-img-element
+                                                <img
+                                                    src={`${thumb}?preset=thumb`}
+                                                    alt=""
+                                                    width={32}
+                                                    height={32}
+                                                    className="w-full h-full object-cover"
+                                                />
+                                            ) : null}
+                                        </div>
+                                        <div className="mono text-[10px] text-[color:var(--muted)] w-[72px] shrink-0 pt-0.5">
+                                            {l.productVariant.sku}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <div className="text-[12.5px] text-[color:var(--ink)] leading-tight">
+                                                {l.productVariant.name}
+                                            </div>
+                                            {enNormDisplay && (
+                                                <div className="mono text-[9px] text-[color:var(--muted-2)] mt-0.5 tracking-wide">
+                                                    {enNormDisplay}
+                                                </div>
+                                            )}
+                                        </div>
+                                        <div className="mono text-[11px] text-[color:var(--muted)] text-right shrink-0 w-[40px]">
+                                            {l.quantity}×
+                                        </div>
+                                        <div className="mono text-[12px] text-[color:var(--ink)] text-right shrink-0 w-[64px]">
+                                            {fmtEuro((l.productVariant.priceWithTax * l.quantity) / 100)}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ))
+                )}
+            </div>
+
+            <div className="shrink-0 border-t border-[color:var(--line-2)]">
+                <div className="px-4 py-3 flex items-baseline justify-between bg-[color:var(--panel-3)]">
+                    <div>
+                        <div className="caps text-[color:var(--muted)]">Gesamt brutto</div>
+                        <div className="mono text-[10px] text-[color:var(--muted-2)]">inkl. MwSt · zzgl. Versand</div>
+                    </div>
+                    <div className="mono text-[22px] text-[color:var(--ink)] font-semibold tabular-nums">
+                        {fmtEuro(totalPrice / 100)}
+                    </div>
+                </div>
+                <div className="p-3 grid gap-2">
+                    <Btn
+                        variant="default"
+                        size="lg"
+                        disabled={lines.length === 0 || hasErrors || cartState !== 'idle'}
+                        onClick={() => onCta?.('cart')}
+                        className={cn(
+                            cartState === 'added' && '!bg-[#16a34a] hover:!bg-[#16a34a]',
+                        )}
+                    >
+                        <span className="flex-1 text-left">
+                            {cartState === 'adding'
+                                ? 'Wird hinzugefügt…'
+                                : cartState === 'added'
+                                  ? '✓ Im Warenkorb'
+                                  : 'In den Warenkorb'}
+                        </span>
+                        <span className="mono text-[11px] opacity-80">
+                            {cartState === 'added' ? '→' : '↵'}
+                        </span>
+                    </Btn>
+                    <Btn
+                        variant="outline"
+                        size="md"
+                        disabled={lines.length === 0 || quoteState !== 'idle'}
+                        onClick={() => onCta?.('quote')}
+                    >
+                        <span className="flex-1 text-left">
+                            {quoteState === 'saving' ? 'Wird gespeichert…' : 'Als Angebot speichern'}
+                        </span>
+                        <span className="mono text-[11px] opacity-60">→</span>
+                    </Btn>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function EmptyBom() {
+    return (
+        <div className="p-5 text-center">
+            <div className="mx-auto w-16 h-16 mb-3 stripe rounded-sm border border-[color:var(--line)]" />
+            <div className="text-[13px] text-[color:var(--ink-2)] mb-1">Noch keine Teile</div>
+            <div className="text-[11.5px] text-[color:var(--muted)] leading-snug max-w-[240px] mx-auto">
+                Beginnen Sie links mit <span className="text-[color:var(--ink)]">Brennstoff</span> und{' '}
+                <span className="text-[color:var(--ink)]">Bauhöhe</span>. Die Stückliste wird automatisch erstellt.
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type BtnVariant = 'default' | 'outline' | 'ghost' | 'subtle';
+type BtnSize = 'sm' | 'md' | 'lg';
+
+interface BtnProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    variant?: BtnVariant;
+    size?: BtnSize;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+
+const BASE = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]';
+
+const SIZES: Record<BtnSize, string> = {
+    sm: 'h-8 px-3 text-[12px]',
+    md: 'h-9 px-4 text-[13px]',
+    lg: 'h-11 px-5 text-[14px]',
+};
+
+const VARIANTS: Record<BtnVariant, string> = {
+    default: 'bg-[color:var(--fire)] text-white hover:bg-[color:var(--fire-2)] focus-visible:ring-[color:var(--fire)] shadow-[0_0_0_1px_rgba(0,0,0,.35)_inset,0_1px_0_rgba(255,255,255,.08)_inset]',
+    outline: 'border border-[color:var(--line-2)] text-[color:var(--ink)] hover:bg-[color:var(--panel-2)] focus-visible:ring-[color:var(--line-2)]',
+    ghost: 'text-[color:var(--muted)] hover:text-[color:var(--ink)] hover:bg-[color:var(--panel-2)] focus-visible:ring-[color:var(--line-2)]',
+    subtle: 'bg-[color:var(--panel-2)] text-[color:var(--ink)] hover:bg-[color:var(--line)] border border-[color:var(--line)] focus-visible:ring-[color:var(--line-2)]',
+};
+
+export function Btn({ variant = 'default', size = 'md', className, icon, children, ...rest }: BtnProps) {
+    return (
+        <button className={cn(BASE, SIZES[size], VARIANTS[variant], className)} {...rest}>
+            {icon}
+            {children}
+        </button>
+    );
+}

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { ReactNode } from 'react';
+
+export type ChipTone = 'neutral' | 'ok' | 'warn' | 'err' | 'fire' | 'active';
+
+interface ChipProps {
+    tone?: ChipTone;
+    className?: string;
+    children: ReactNode;
+}
+
+const TONES: Record<ChipTone, string> = {
+    neutral: 'bg-[color:var(--panel-2)] text-[color:var(--muted)] border-[color:var(--line)]',
+    ok: 'bg-[#1a2010] text-[#a3e635] border-[#3b4a1f]',
+    warn: 'bg-[#2a1c0a] text-[#fbbf24] border-[#4a3418]',
+    err: 'bg-[#2a0f0f] text-[#f87171] border-[#4a1d1d]',
+    fire: 'bg-[color:var(--fire)] text-white border-transparent',
+    active: 'bg-[color:var(--ink)] text-[color:var(--bg)] border-transparent',
+};
+
+export function Chip({ tone = 'neutral', className, children }: ChipProps) {
+    return (
+        <span
+            className={cn(
+                'mono inline-flex items-center gap-1 px-1.5 py-0.5 border rounded-sm text-[10px] font-medium uppercase tracking-wider',
+                TONES[tone],
+                className,
+            )}
+        >
+            {children}
+        </span>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/config-header.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+
+interface ConfigHeaderProps {
+    systemName: string;
+    systemSub: string;
+    configName: string;
+    onRename: (name: string) => void;
+    rightChip: ReactNode;
+}
+
+export function ConfigHeader({ systemName, systemSub, configName, onRename, rightChip }: ConfigHeaderProps) {
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(configName);
+    useEffect(() => setDraft(configName), [configName]);
+
+    // Stable pseudo-ID derived from the INITIAL config name and frozen for the
+    // lifetime of this mount. If we recomputed on every rename, the chrome ID
+    // would drift, which contradicts the "this is a stable reference" UI
+    // affordance. Replace with a real backend-issued ID when persistence lands.
+    const [cfgId] = useState(() => {
+        let h = 0;
+        for (let i = 0; i < configName.length; i++) h = (h * 31 + configName.charCodeAt(i)) | 0;
+        return (Math.abs(h) % 900 + 100).toString();
+    });
+
+    return (
+        <div className="px-6 py-3 border-b border-[color:var(--line)] bg-[color:var(--panel)] shrink-0 whitespace-nowrap">
+            <div className="flex items-center gap-2 mono text-[10.5px] text-[color:var(--muted-2)] overflow-hidden">
+                <span>Konfigurator</span>
+                <span>/</span>
+                <span>{systemName}</span>
+                <span>/</span>
+                <span className="text-[color:var(--muted)] truncate">{configName}</span>
+                <span className="ml-auto mono text-[10.5px] text-[color:var(--muted-2)] shrink-0">
+                    ID · CFG-2026-04-{cfgId}
+                </span>
+            </div>
+            <div className="mt-1.5 flex items-center gap-4 overflow-hidden">
+                <h1 className="text-[22px] font-bold tracking-tight text-[color:var(--ink)] leading-tight shrink-0">{systemName}</h1>
+                <span className="mono text-[11px] text-[color:var(--muted)] shrink-0">{systemSub}</span>
+                <span className="hidden lg:inline-flex items-center gap-2 pl-4 ml-1 border-l border-[color:var(--line)] shrink-0">
+                    <span className="caps text-[color:var(--muted)]">Konfig</span>
+                    {editing ? (
+                        <input
+                            autoFocus
+                            value={draft}
+                            onChange={e => setDraft(e.target.value)}
+                            onBlur={() => { onRename(draft); setEditing(false); }}
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') { onRename(draft); setEditing(false); }
+                                if (e.key === 'Escape') { setDraft(configName); setEditing(false); }
+                            }}
+                            className="mono text-[13px] bg-transparent border-b border-[color:var(--fire)] text-[color:var(--ink)] outline-none px-1 w-64"
+                        />
+                    ) : (
+                        <button
+                            type="button"
+                            onClick={() => setEditing(true)}
+                            className="mono text-[13px] text-[color:var(--ink)] hover:text-[color:var(--fire)] border-b border-dashed border-[color:var(--line-2)] hover:border-[color:var(--fire)] truncate max-w-[320px]"
+                        >
+                            {configName}
+                        </button>
+                    )}
+                </span>
+                <div className="ml-auto flex items-center gap-2 shrink-0">{rightChip}</div>
+            </div>
+        </div>
+    );
+}