@kilivi/payloadcms-theme-management 2.1.0 → 2.2.0

package/dist/endpoints/themeFonts.js

@@ -0,0 +1,138 @@
+import { buildGoogleFontsHref, parseFontFamilies, THEME_FONTS_CSS_PATH, THEME_FONTS_FILE_PATH } from '../constants/themeFonts.js';
+/**
+ * Self-hosted theme fonts.
+ *
+ * The visitor's browser never talks to Google: these endpoints fetch the
+ * Google Fonts stylesheet and font files on the server, cache them in memory and
+ * serve them from the site's own origin (GDPR-friendly). Only fonts from
+ * FONT_CATALOG are served, and only files from fonts.gstatic.com are proxied, so
+ * the endpoints cannot be used as an open proxy.
+ *
+ *   GET {api}/theme-fonts/css?f=Inter,Playfair%20Display  → @font-face CSS
+ *   GET {api}/theme-fonts/file?p=s/inter/v19/….woff2      → font file
+ */ // A current desktop browser UA makes Google return woff2 with unicode-range subsets.
+const BROWSER_UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36';
+const CSS_TTL_MS = 24 * 60 * 60 * 1000;
+const MAX_CACHED_FILES = 300;
+const FONT_FILE_PATTERN = /^s\/[a-z0-9]+\/v\d+\/[A-Za-z0-9_\-.]+\.woff2$/;
+const cssCache = new Map();
+const fileCache = new Map();
+function rememberFile(key, data) {
+    if (fileCache.size >= MAX_CACHED_FILES) {
+        const oldest = fileCache.keys().next().value;
+        if (oldest !== undefined) fileCache.delete(oldest);
+    }
+    fileCache.set(key, data);
+}
+const apiRouteOf = (req)=>req.payload?.config?.routes?.api ?? '/api';
+const queryValue = (req, key)=>{
+    const fromSearchParams = req.searchParams?.get?.(key);
+    if (fromSearchParams) return fromSearchParams;
+    const fromQuery = req.query?.[key];
+    return typeof fromQuery === 'string' ? fromQuery : null;
+};
+/** Rewrites fonts.gstatic.com URLs in Google's CSS to the self-hosted file endpoint. */ export function rewriteFontUrls(css, fileEndpoint) {
+    return css.replace(/https:\/\/fonts\.gstatic\.com\/([^)\s'"]+)/g, (match, path)=>FONT_FILE_PATTERN.test(path) ? `${fileEndpoint}?p=${encodeURIComponent(path)}` : match);
+}
+const cssEndpoint = {
+    path: THEME_FONTS_CSS_PATH,
+    method: 'get',
+    handler: async (req)=>{
+        const families = parseFontFamilies(queryValue(req, 'f'));
+        const href = buildGoogleFontsHref(families);
+        if (!href) {
+            return new Response('/* no fonts requested */', {
+                status: 200,
+                headers: {
+                    'Content-Type': 'text/css; charset=utf-8'
+                }
+            });
+        }
+        const cacheKey = families.join(',');
+        const cached = cssCache.get(cacheKey);
+        if (cached && cached.expires > Date.now()) {
+            return new Response(cached.css, {
+                headers: {
+                    'Content-Type': 'text/css; charset=utf-8',
+                    'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800'
+                }
+            });
+        }
+        try {
+            const upstream = await fetch(href, {
+                headers: {
+                    'User-Agent': BROWSER_UA
+                }
+            });
+            if (!upstream.ok) throw new Error(`Google Fonts responded ${upstream.status}`);
+            const css = rewriteFontUrls(await upstream.text(), `${apiRouteOf(req)}${THEME_FONTS_FILE_PATH}`);
+            cssCache.set(cacheKey, {
+                css,
+                expires: Date.now() + CSS_TTL_MS
+            });
+            return new Response(css, {
+                headers: {
+                    'Content-Type': 'text/css; charset=utf-8',
+                    'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800'
+                }
+            });
+        } catch (error) {
+            req.payload?.logger?.warn?.(`Theme Management Plugin: could not load fonts (${cacheKey}): ${String(error)}`);
+            // Fall back to the CSS font stacks; never break the page over a font.
+            return new Response('/* fonts unavailable — falling back to system fonts */', {
+                status: 200,
+                headers: {
+                    'Content-Type': 'text/css; charset=utf-8',
+                    'Cache-Control': 'no-store'
+                }
+            });
+        }
+    }
+};
+const fileEndpoint = {
+    path: THEME_FONTS_FILE_PATH,
+    method: 'get',
+    handler: async (req)=>{
+        const path = queryValue(req, 'p');
+        if (!path || !FONT_FILE_PATTERN.test(path)) {
+            return new Response('Not found', {
+                status: 404
+            });
+        }
+        const headers = {
+            'Content-Type': 'font/woff2',
+            // gstatic paths are versioned, so a file never changes.
+            'Cache-Control': 'public, max-age=31536000, immutable',
+            'Access-Control-Allow-Origin': '*'
+        };
+        const cached = fileCache.get(path);
+        if (cached) return new Response(cached, {
+            headers
+        });
+        try {
+            const upstream = await fetch(`https://fonts.gstatic.com/${path}`, {
+                headers: {
+                    'User-Agent': BROWSER_UA
+                }
+            });
+            if (!upstream.ok) return new Response('Not found', {
+                status: 404
+            });
+            const data = await upstream.arrayBuffer();
+            rememberFile(path, data);
+            return new Response(data, {
+                headers
+            });
+        } catch  {
+            return new Response('Font unavailable', {
+                status: 502
+            });
+        }
+    }
+};
+export const themeFontEndpoints = [
+    cssEndpoint,
+    fileEndpoint
+];
+
+//# sourceMappingURL=themeFonts.js.map

package/dist/endpoints/themeFonts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/endpoints/themeFonts.ts"],"sourcesContent":["import type { Endpoint, PayloadRequest } from 'payload'\nimport {\n  buildGoogleFontsHref,\n  parseFontFamilies,\n  THEME_FONTS_CSS_PATH,\n  THEME_FONTS_FILE_PATH,\n} from '../constants/themeFonts.js'\n\n/**\n * Self-hosted theme fonts.\n *\n * The visitor's browser never talks to Google: these endpoints fetch the\n * Google Fonts stylesheet and font files on the server, cache them in memory and\n * serve them from the site's own origin (GDPR-friendly). Only fonts from\n * FONT_CATALOG are served, and only files from fonts.gstatic.com are proxied, so\n * the endpoints cannot be used as an open proxy.\n *\n *   GET {api}/theme-fonts/css?f=Inter,Playfair%20Display  → @font-face CSS\n *   GET {api}/theme-fonts/file?p=s/inter/v19/….woff2      → font file\n */\n\n// A current desktop browser UA makes Google return woff2 with unicode-range subsets.\nconst BROWSER_UA =\n  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0 Safari/537.36'\nconst CSS_TTL_MS = 24 * 60 * 60 * 1000\nconst MAX_CACHED_FILES = 300\nconst FONT_FILE_PATTERN = /^s\\/[a-z0-9]+\\/v\\d+\\/[A-Za-z0-9_\\-.]+\\.woff2$/\n\nconst cssCache = new Map<string, { css: string; expires: number }>()\nconst fileCache = new Map<string, ArrayBuffer>()\n\nfunction rememberFile(key: string, data: ArrayBuffer) {\n  if (fileCache.size >= MAX_CACHED_FILES) {\n    const oldest = fileCache.keys().next().value\n    if (oldest !== undefined) fileCache.delete(oldest)\n  }\n  fileCache.set(key, data)\n}\n\nconst apiRouteOf = (req: PayloadRequest) => req.payload?.config?.routes?.api ?? '/api'\n\nconst queryValue = (req: PayloadRequest, key: string): string | null => {\n  const fromSearchParams = req.searchParams?.get?.(key)\n  if (fromSearchParams) return fromSearchParams\n  const fromQuery = (req.query as Record<string, unknown> | undefined)?.[key]\n  return typeof fromQuery === 'string' ? fromQuery : null\n}\n\n/** Rewrites fonts.gstatic.com URLs in Google's CSS to the self-hosted file endpoint. */\nexport function rewriteFontUrls(css: string, fileEndpoint: string): string {\n  return css.replace(/https:\\/\\/fonts\\.gstatic\\.com\\/([^)\\s'\"]+)/g, (match, path: string) =>\n    FONT_FILE_PATTERN.test(path) ? `${fileEndpoint}?p=${encodeURIComponent(path)}` : match,\n  )\n}\n\nconst cssEndpoint: Endpoint = {\n  path: THEME_FONTS_CSS_PATH,\n  method: 'get',\n  handler: async (req) => {\n    const families = parseFontFamilies(queryValue(req, 'f'))\n    const href = buildGoogleFontsHref(families)\n    if (!href) {\n      return new Response('/* no fonts requested */', {\n        status: 200,\n        headers: { 'Content-Type': 'text/css; charset=utf-8' },\n      })\n    }\n\n    const cacheKey = families.join(',')\n    const cached = cssCache.get(cacheKey)\n    if (cached && cached.expires > Date.now()) {\n      return new Response(cached.css, {\n        headers: {\n          'Content-Type': 'text/css; charset=utf-8',\n          'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800',\n        },\n      })\n    }\n\n    try {\n      const upstream = await fetch(href, { headers: { 'User-Agent': BROWSER_UA } })\n      if (!upstream.ok) throw new Error(`Google Fonts responded ${upstream.status}`)\n      const css = rewriteFontUrls(await upstream.text(), `${apiRouteOf(req)}${THEME_FONTS_FILE_PATH}`)\n      cssCache.set(cacheKey, { css, expires: Date.now() + CSS_TTL_MS })\n      return new Response(css, {\n        headers: {\n          'Content-Type': 'text/css; charset=utf-8',\n          'Cache-Control': 'public, max-age=86400, stale-while-revalidate=604800',\n        },\n      })\n    } catch (error) {\n      req.payload?.logger?.warn?.(\n        `Theme Management Plugin: could not load fonts (${cacheKey}): ${String(error)}`,\n      )\n      // Fall back to the CSS font stacks; never break the page over a font.\n      return new Response('/* fonts unavailable — falling back to system fonts */', {\n        status: 200,\n        headers: { 'Content-Type': 'text/css; charset=utf-8', 'Cache-Control': 'no-store' },\n      })\n    }\n  },\n}\n\nconst fileEndpoint: Endpoint = {\n  path: THEME_FONTS_FILE_PATH,\n  method: 'get',\n  handler: async (req) => {\n    const path = queryValue(req, 'p')\n    if (!path || !FONT_FILE_PATTERN.test(path)) {\n      return new Response('Not found', { status: 404 })\n    }\n\n    const headers = {\n      'Content-Type': 'font/woff2',\n      // gstatic paths are versioned, so a file never changes.\n      'Cache-Control': 'public, max-age=31536000, immutable',\n      'Access-Control-Allow-Origin': '*',\n    }\n\n    const cached = fileCache.get(path)\n    if (cached) return new Response(cached, { headers })\n\n    try {\n      const upstream = await fetch(`https://fonts.gstatic.com/${path}`, {\n        headers: { 'User-Agent': BROWSER_UA },\n      })\n      if (!upstream.ok) return new Response('Not found', { status: 404 })\n      const data = await upstream.arrayBuffer()\n      rememberFile(path, data)\n      return new Response(data, { headers })\n    } catch {\n      return new Response('Font unavailable', { status: 502 })\n    }\n  },\n}\n\nexport const themeFontEndpoints: Endpoint[] = [cssEndpoint, fileEndpoint]\n"],"names":["buildGoogleFontsHref","parseFontFamilies","THEME_FONTS_CSS_PATH","THEME_FONTS_FILE_PATH","BROWSER_UA","CSS_TTL_MS","MAX_CACHED_FILES","FONT_FILE_PATTERN","cssCache","Map","fileCache","rememberFile","key","data","size","oldest","keys","next","value","undefined","delete","set","apiRouteOf","req","payload","config","routes","api","queryValue","fromSearchParams","searchParams","get","fromQuery","query","rewriteFontUrls","css","fileEndpoint","replace","match","path","test","encodeURIComponent","cssEndpoint","method","handler","families","href","Response","status","headers","cacheKey","join","cached","expires","Date","now","upstream","fetch","ok","Error","text","error","logger","warn","String","arrayBuffer","themeFontEndpoints"],"mappings":"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"}

package/dist/fields/AppearancePreviewField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppearancePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/AppearancePreviewField.tsx"],"names":[],"mappings":"AA6PA,MAAM,CAAC,OAAO,UAAU,sBAAsB,gCAqY7C"}
+{"version":3,"file":"AppearancePreviewField.d.ts","sourceRoot":"","sources":["../../src/fields/AppearancePreviewField.tsx"],"names":[],"mappings":"AAgRA,MAAM,CAAC,OAAO,UAAU,sBAAsB,gCAqb7C"}

package/dist/fields/AppearancePreviewField.js

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormFields } from '@payloadcms/ui';
-import { Monitor, Moon, Smartphone, Sparkles, Sun, Tablet } from 'lucide-react';
+import { ExternalLink, Monitor, Moon, Smartphone, Sparkles, Sun, Tablet } from 'lucide-react';
 import { useId, useMemo, useState } from 'react';
 import { DEFAULT_DEVICE_PREVIEW_ID, DEVICE_PREVIEWS, getDevicePreview } from '../constants/devicePreviews.js';
 import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
 import { resolveTypographyPreview } from '../components/typographyPreviewUtils.js';
+import { useNativeLivePreview } from '../hooks/useNativeLivePreview.js';
+import { useThemeFonts } from '../hooks/useThemeFonts.js';
 import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
 const DEVICE_ICONS = {
     mobile: Smartphone,
@@ -49,13 +51,20 @@ function radiusToPx(token) {
     const css = preset?.css;
     return css?.['--radius-large'] ?? css?.['--radius-default'] ?? '0.75rem';
 }
+const SPACING_SCALE = {
+    compact: 0.75,
+    medium: 1,
+    comfortable: 1.5,
+    spacious: 1.5
+};
+const px = (value, c)=>`${Math.round(value * c.space)}px`;
 function cardSurface(c, p, radius) {
     const base = {
         background: p.card,
         color: p.cardForeground,
         borderRadius: radius,
-        border: `${c.borderWidth} ${c.borderStyle === 'none' ? 'solid' : c.borderStyle} ${p.border}`,
-        padding: '16px',
+        border: c.borderStyle === 'none' || c.borderWidth === '0px' ? 'none' : `${c.borderWidth} ${c.borderStyle} ${p.border}`,
+        padding: px(16, c),
         transition: 'transform 200ms ease, box-shadow 200ms ease'
     };
     // Card style takes precedence for the structural look, effect style for depth.
@@ -172,7 +181,7 @@ function navbarStyle(c, p) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '10px 14px',
+        padding: `${px(10, c)} ${px(14, c)}`,
         background: p.background,
         color: p.foreground,
         borderBottom: `1px solid ${p.border}`
@@ -252,6 +261,7 @@ export default function AppearancePreviewField() {
     const [mode, setMode] = useState('light');
     const [device, setDevice] = useState(DEFAULT_DEVICE_PREVIEW_ID);
     const uid = useId().replace(/[:]/g, '');
+    const nativePreview = useNativeLivePreview();
     const activeDevice = getDevicePreview(device);
     // Fonts follow the Typography section (or the theme preset when set to "Use theme preset"),
     // so this single preview shows colours, type and component styles together.
@@ -262,8 +272,14 @@ export default function AppearancePreviewField() {
         bodyFontCustom: typographyValue('bodyFontCustom'),
         headingFontCustom: typographyValue('headingFontCustom'),
         baseFontSize: typographyValue('baseFontSize'),
-        lineHeight: typographyValue('lineHeight')
+        lineHeight: typographyValue('lineHeight'),
+        headingWeight: typographyValue('headingWeight'),
+        letterSpacing: typographyValue('letterSpacing')
     }, formFields?.['themeConfiguration.theme']?.value);
+    useThemeFonts([
+        typographyValue('bodyFont'),
+        typographyValue('headingFont')
+    ]);
     const str = (key, fallback)=>{
         const v = formFields?.[`themeConfiguration.${key}`]?.value;
         return typeof v === 'string' && v.trim().length > 0 ? v : fallback;
@@ -287,7 +303,8 @@ export default function AppearancePreviewField() {
         navbarStyle: str('componentStyles.navbarStyle', 'solid'),
         footerStyle: str('componentStyles.footerStyle', 'standard'),
         linkStyle: str('componentStyles.linkStyle', 'underline-hover'),
-        borderRadius: str('borderRadius', 'medium')
+        borderRadius: str('borderRadius', 'medium'),
+        space: SPACING_SCALE[str('spacing', 'medium')] ?? 1
     };
     const modeKey = mode === 'light' ? 'lightMode' : 'darkMode';
     const fallback = mode === 'light' ? {
@@ -332,6 +349,10 @@ export default function AppearancePreviewField() {
         Object.keys(fallback).forEach((key)=>{
             p[key] = str(`${modeKey}.${key}`, fallback[key]);
         });
+        // Same fallback as the site's --gradient-brand: primary → accent when no stops are set.
+        p.gradientFrom = str(`${modeKey}.gradientFrom`, p.primary);
+        p.gradientTo = str(`${modeKey}.gradientTo`, p.accent);
+        p.gradientVia = str(`${modeKey}.gradientVia`, p.gradientFrom);
         return p;
     }, [
         formFields,
@@ -362,45 +383,61 @@ export default function AppearancePreviewField() {
     const btnHoverCSS = `.${uid} .tm-prev-btn:hover{filter:brightness(1.05)}${choices.buttonVariant === 'brutal' ? `.${uid} .tm-prev-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 ${palette.foreground}}` : ''}`;
     // Movement-based hover effects only run for users who haven't asked for reduced motion.
     const previewCSS = `@media (prefers-reduced-motion: no-preference){${hoverCSS}${btnHoverCSS}}`;
-    const chipLabels = t.chips;
-    const chips = [
-        [
-            chipLabels.effect,
-            choices.effectStyle
-        ],
-        [
-            chipLabels.shadow,
-            choices.shadowIntensity
-        ],
-        [
-            chipLabels.card,
-            choices.cardStyle
-        ],
-        [
-            chipLabels.hover,
-            choices.cardHoverEffect
-        ],
-        [
-            chipLabels.button,
-            `${choices.buttonVariant} / ${choices.buttonSize}`
-        ],
-        [
-            chipLabels.navbar,
-            choices.navbarStyle
-        ],
-        [
-            chipLabels.footer,
-            choices.footerStyle
-        ],
-        [
-            chipLabels.link,
-            choices.linkStyle
-        ],
-        [
-            chipLabels.radius,
-            choices.borderRadius
-        ]
-    ];
+    // Content image treatment, mirroring the site's [data-img] rules.
+    const imageCss = (()=>{
+        const base = {
+            aspectRatio: '4 / 3',
+            borderRadius: 0,
+            backgroundImage: `radial-gradient(circle at 70% 30%, ${palette.accent} 0 18%, transparent 19%), linear-gradient(160deg, ${palette.gradientFrom}, ${palette.gradientTo})`
+        };
+        switch(choices.imageStyle){
+            case 'rounded':
+                return {
+                    ...base,
+                    borderRadius: radius
+                };
+            case 'circle':
+                return {
+                    ...base,
+                    aspectRatio: '1 / 1',
+                    borderRadius: '9999px'
+                };
+            case 'grayscale':
+                return {
+                    ...base,
+                    filter: 'grayscale(1)'
+                };
+            case 'duotone':
+                return {
+                    ...base,
+                    filter: 'grayscale(1) contrast(1.05)',
+                    mixBlendMode: 'luminosity'
+                };
+            case 'vignette':
+                return {
+                    ...base,
+                    boxShadow: 'inset 0 0 40px rgba(0,0,0,0.45)'
+                };
+            case 'polaroid':
+                return {
+                    ...base,
+                    border: '8px solid #fff',
+                    borderBottomWidth: '24px',
+                    boxShadow: '0 6px 16px rgba(0,0,0,0.18)',
+                    borderRadius: '2px'
+                };
+            default:
+                return base;
+        }
+    })();
+    const headingStyle = {
+        fontFamily: typography.headingFont,
+        fontWeight: Number(typography.headingWeight) || 700,
+        letterSpacing: typography.headingLetterSpacing,
+        textTransform: typography.headingTransform,
+        lineHeight: 1.15,
+        margin: 0
+    };
     const footerStyleCss = choices.footerStyle === 'dark' ? {
         background: palette.foreground,
         color: palette.background
@@ -421,6 +458,46 @@ export default function AppearancePreviewField() {
         color: palette.mutedForeground,
         borderTop: `1px solid ${palette.border}`
     };
+    // With Payload's native Live Preview the real site is the preview: no mock.
+    if (nativePreview.isEnabled) {
+        if (nativePreview.isOpen) return null;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "tm-native-preview-hint",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "tm-native-preview-hint__text",
+                    children: [
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "tm-native-preview-hint__title",
+                            children: [
+                                /*#__PURE__*/ _jsx(Sparkles, {
+                                    size: 14,
+                                    "aria-hidden": true
+                                }),
+                                t.nativeTitle
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tm-native-preview-hint__body",
+                            children: t.nativeBody
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
+                    className: "tm-native-preview-hint__action",
+                    onClick: nativePreview.open,
+                    children: [
+                        /*#__PURE__*/ _jsx(ExternalLink, {
+                            size: 14,
+                            "aria-hidden": true
+                        }),
+                        t.nativeOpen
+                    ]
+                })
+            ]
+        });
+    }
     return(// The slot spans the whole right column of the Appearance tab on wide admins;
     // its inner panel is sticky so the preview stays in view while editing.
     /*#__PURE__*/ _jsx("div", {
@@ -621,28 +698,27 @@ export default function AppearancePreviewField() {
                             }),
                             /*#__PURE__*/ _jsxs("div", {
                                 style: {
-                                    padding: '20px',
+                                    padding: px(20, choices),
                                     display: 'grid',
-                                    gap: '14px'
+                                    gap: px(14, choices)
                                 },
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ _jsx("div", {
                                                 style: {
-                                                    fontFamily: typography.headingFont,
-                                                    fontSize: '22px',
-                                                    fontWeight: 700,
-                                                    lineHeight: 1.2
+                                                    ...headingStyle,
+                                                    fontSize: '24px'
                                                 },
                                                 children: t.heading
                                             }),
                                             /*#__PURE__*/ _jsxs("p", {
                                                 style: {
-                                                    margin: '6px 0 0',
+                                                    margin: `${px(6, choices)} 0 0`,
                                                     fontSize: `calc(${typography.baseFontSize} * 0.8125)`,
                                                     lineHeight: typography.lineHeight,
-                                                    color: palette.mutedForeground
+                                                    color: palette.mutedForeground,
+                                                    maxWidth: '60ch'
                                                 },
                                                 children: [
                                                     t.body,
@@ -655,55 +731,78 @@ export default function AppearancePreviewField() {
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ _jsx("div", {
-                                        className: "tm-prev-card",
-                                        style: card,
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            style: {
-                                                display: 'flex',
-                                                gap: '10px',
-                                                alignItems: 'center',
-                                                flexWrap: 'wrap'
-                                            },
-                                            children: [
-                                                /*#__PURE__*/ _jsx("button", {
-                                                    type: "button",
-                                                    className: "tm-prev-btn",
-                                                    style: btn,
-                                                    children: t.primary
-                                                }),
-                                                /*#__PURE__*/ _jsx("button", {
-                                                    type: "button",
-                                                    style: {
-                                                        ...BUTTON_SIZE_MAP[choices.buttonSize] ?? BUTTON_SIZE_MAP.medium,
-                                                        fontWeight: 600,
-                                                        cursor: 'pointer',
-                                                        borderRadius: radius,
-                                                        background: palette.secondary,
-                                                        color: palette.secondaryForeground,
-                                                        border: 'none'
-                                                    },
-                                                    children: t.secondary
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    "aria-hidden": true,
-                                                    style: {
-                                                        marginLeft: 'auto',
-                                                        width: '54px',
-                                                        height: '22px',
-                                                        borderRadius: '6px',
-                                                        backgroundImage: `linear-gradient(135deg, ${palette.gradientFrom}, ${palette.gradientVia}, ${palette.gradientTo})`,
-                                                        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)'
-                                                    }
-                                                })
-                                            ]
-                                        })
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: device === 'mobile' ? '1fr' : 'minmax(0, 3fr) minmax(0, 2fr)',
+                                            gap: px(12, choices),
+                                            alignItems: 'start'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: "tm-prev-card",
+                                                style: card,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        style: {
+                                                            ...headingStyle,
+                                                            fontSize: '15px',
+                                                            marginBottom: px(6, choices)
+                                                        },
+                                                        children: t.cardTitle
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        style: {
+                                                            margin: `0 0 ${px(12, choices)}`,
+                                                            fontSize: `calc(${typography.baseFontSize} * 0.75)`,
+                                                            lineHeight: typography.lineHeight,
+                                                            color: palette.cardForeground,
+                                                            opacity: 0.8
+                                                        },
+                                                        children: t.cardBody
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        style: {
+                                                            display: 'flex',
+                                                            gap: '8px',
+                                                            alignItems: 'center',
+                                                            flexWrap: 'wrap'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("button", {
+                                                                type: "button",
+                                                                className: "tm-prev-btn",
+                                                                style: btn,
+                                                                children: t.primary
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("button", {
+                                                                type: "button",
+                                                                style: {
+                                                                    ...BUTTON_SIZE_MAP[choices.buttonSize] ?? BUTTON_SIZE_MAP.medium,
+                                                                    fontWeight: 600,
+                                                                    cursor: 'pointer',
+                                                                    borderRadius: choices.buttonVariant === 'pill' ? '9999px' : radius,
+                                                                    background: palette.secondary,
+                                                                    color: palette.secondaryForeground,
+                                                                    border: 'none'
+                                                                },
+                                                                children: t.secondary
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                "aria-hidden": true,
+                                                style: imageCss
+                                            })
+                                        ]
                                     })
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("div", {
                                 style: {
-                                    padding: '12px 16px',
+                                    padding: `${px(12, choices)} ${px(16, choices)}`,
                                     fontSize: '11px',
                                     ...footerStyleCss
                                 },
@@ -718,42 +817,6 @@ export default function AppearancePreviewField() {
                             })
                         ]
                     })
-                }),
-                /*#__PURE__*/ _jsx("div", {
-                    style: {
-                        display: 'flex',
-                        flexWrap: 'wrap',
-                        gap: '5px',
-                        marginTop: '10px'
-                    },
-                    children: chips.map(([k, v])=>/*#__PURE__*/ _jsxs("span", {
-                            style: {
-                                fontSize: '11px',
-                                padding: '2px 7px',
-                                borderRadius: '999px',
-                                background: 'var(--theme-elevation-50)',
-                                border: '1px solid var(--theme-elevation-150)',
-                                color: 'var(--theme-elevation-700)'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsxs("span", {
-                                    style: {
-                                        color: 'var(--theme-elevation-600)'
-                                    },
-                                    children: [
-                                        k,
-                                        ":"
-                                    ]
-                                }),
-                                " ",
-                                /*#__PURE__*/ _jsx("strong", {
-                                    style: {
-                                        fontWeight: 600
-                                    },
-                                    children: v
-                                })
-                            ]
-                        }, k))
                 })
             ]
         })