since3-portal/modules/templates/catalog/shared/shell.tsx

"use client"

import { MotionConfig } from "motion/react"
import { useEffect, type CSSProperties, type ReactNode } from "react"
import { cn } from "@/lib/utils"
import { themeStyle } from "../../lib/content"
import { ChatWidget } from "../../ai/ui/chat-widget"
import type { FontPair, TemplateContent, TemplateDefinition } from "../../lib/types"
import { DemoBadge } from "./demo-badge"

// Rahmen jeder Vorlage: Palette und Schriften als CSS-Variablen (bg-t-*, font-t-*), reduzierte
// Bewegung laut Systemeinstellung, sanftes Scrollen zu Ankern, Entwurfs-Hinweis und KI-Chat.
// Fixe Leisten am unteren Rand (z. B. mobile CTA) schieben Badge und Chat über --t-safe-bottom nach oben.
export function TemplateShell({ def, content, fonts, className, children }: {
    def: TemplateDefinition
    content: TemplateContent
    fonts: FontPair
    className?: string
    children: ReactNode
}) {
    useEffect(() => {
        const root = document.documentElement
        const previous = root.style.scrollBehavior
        root.style.scrollBehavior = "smooth"
        return () => {
            root.style.scrollBehavior = previous
        }
    }, [])

    const style = { ...themeStyle(def, content), "--t-display": fonts.display, "--t-body": fonts.body } as CSSProperties

    return (
        <MotionConfig reducedMotion="user">
            <div
                style={style}
                className={cn(
                    fonts.className,
                    "relative min-h-dvh overflow-x-clip bg-t-bg font-t-body text-t-fg antialiased selection:bg-t-accent selection:text-t-accent-fg",
                    className
                )}
            >
                {children}
                <DemoBadge content={content} />
                <ChatWidget content={content} />
            </div>
        </MotionConfig>
    )
}