[pull] main from TryGhost:main

apps/admin-x-settings/src/components/settings/email-design/design-utils.ts

@@ -122,3 +122,20 @@ export function resolveAllColors(settings: EmailDesignSettings, accentColor: str
         secondaryHeaderTextColor
     };
 }
+
+export function resolveFontFamily(category: string | undefined) {
+    return category === 'serif' ? 'Georgia, serif' : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+}
+
+export function resolveButtonCorners(corners: string | undefined): string {
+    switch (corners) {
+    case 'square': return 'rounded-none';
+    case 'pill': return 'rounded-full';
+    case 'rounded':
+    default: return 'rounded-[6px]';
+    }
+}
+
+export function resolveImageCorners(corners: string | undefined): string {
+    return corners === 'rounded' ? 'rounded-md' : '';
+}

apps/admin-x-settings/src/components/settings/email-design/email-preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {GhostOrb, cn} from '@tryghost/shade';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
-import {resolveAllColors} from './design-utils';
+import {resolveAllColors, resolveImageCorners} from './design-utils';
 import {useGlobalData} from '../../providers/global-data-provider';
 import type {EmailDesignSettings} from './types';
 
@@ -18,25 +18,6 @@ interface EmailPreviewProps {
     children?: React.ReactNode;
 }
 
-// --- Helper functions ---
-
-export function resolveFontFamily(category: string | undefined) {
-    return category === 'serif' ? 'Georgia, serif' : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-}
-
-export function resolveButtonCorners(corners: string | undefined): string {
-    switch (corners) {
-    case 'square': return 'rounded-none';
-    case 'pill': return 'rounded-full';
-    case 'rounded':
-    default: return 'rounded-[6px]';
-    }
-}
-
-export function resolveImageCorners(corners: string | undefined): string {
-    return corners === 'rounded' ? 'rounded-md' : '';
-}
-
 // --- Sub-components ---
 
 const EnvelopeHeader: React.FC<{senderName?: string; senderEmail?: string; subject?: string}> = ({senderName, senderEmail, subject}) => {
@@ -45,7 +26,7 @@ const EnvelopeHeader: React.FC<{senderName?: string; senderEmail?: string; subje
     }
 
     return (
-        <div className="flex-column flex min-h-[77px] justify-center border-b border-grey-200 bg-white px-6 text-sm text-grey-700">
+        <div className="flex flex-col justify-center gap-1 border-b border-grey-200 bg-white p-6 text-sm text-grey-700">
             {senderName && (
                 <div className="flex gap-2">
                     <span className="font-semibold text-grey-900">{senderName}</span>
@@ -69,8 +50,7 @@ const PublicationHeader: React.FC<{
     siteTitle?: string;
     backgroundColor?: string;
     textColor: string;
-    fontFamily: string;
-}> = ({showTitle, siteTitle, backgroundColor, textColor, fontFamily}) => {
+}> = ({showTitle, siteTitle, backgroundColor, textColor}) => {
     if (!showTitle || !siteTitle) {
         return null;
     }
@@ -82,7 +62,7 @@ const PublicationHeader: React.FC<{
         >
             <h4
                 className="mb-1 text-[1.6rem] font-bold uppercase leading-tight tracking-tight"
-                style={{color: textColor, fontFamily}}
+                style={{color: textColor}}
             >
                 {siteTitle}
             </h4>
@@ -123,11 +103,10 @@ const EmailPreview: React.FC<EmailPreviewProps> = ({settings, senderName, sender
     const accentColor = siteData.accent_color;
 
     const colors = resolveAllColors(settings, accentColor);
-    const titleFont = resolveFontFamily(settings.title_font_category);
     const imageCornerClass = resolveImageCorners(settings.image_corners);
 
     return (
-        <div className="mx-auto w-full max-w-[700px] overflow-hidden rounded-[4px] text-black shadow-sm">
+        <div className="mx-auto flex max-h-full min-h-0 w-full max-w-[700px] flex-col overflow-hidden rounded-[4px] text-black shadow-sm">
             <EnvelopeHeader senderEmail={senderEmail} senderName={senderName} subject={subject} />
 
             <div
@@ -143,7 +122,6 @@ const EmailPreview: React.FC<EmailPreviewProps> = ({settings, senderName, sender
 
                     <PublicationHeader
                         backgroundColor="transparent"
-                        fontFamily={titleFont}
                         showTitle={showPublicationTitle}
                         siteTitle={siteTitle}
                         textColor={colors.headerTextColor}

apps/admin-x-settings/src/components/settings/email-design/header-image-field.tsx

@@ -40,7 +40,7 @@ const HeaderImageField: React.FC<HeaderImageFieldProps> = ({value, onChange}) =>
                         className="flex h-24 items-center justify-center p-0 text-sm"
                         onDropAccepted={files => files[0] && handleUpload(files[0])}
                     >
-                        <span className="text-gray-400">Upload header image</span>
+                        <span className="text-gray-700">Upload header image</span>
                     </Dropzone>
                     <span className="text-gray-400 text-xs">1200x600 recommended. Use a transparent PNG for best results on any background.</span>
                 </>

apps/admin-x-settings/src/components/settings/email-design/welcome-email-preview-content.tsx

@@ -1,8 +1,8 @@
+import CoverImage from '../../../assets/images/user-cover.jpg';
 import React from 'react';
 import {cn} from '@tryghost/shade';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
-import {resolveAllColors} from './design-utils';
-import {resolveButtonCorners, resolveFontFamily} from './email-preview';
+import {resolveAllColors, resolveButtonCorners, resolveFontFamily, resolveImageCorners} from './design-utils';
 import {useEmailDesign} from './email-design-context';
 import {useGlobalData} from '../../providers/global-data-provider';
 
@@ -29,9 +29,22 @@ const WelcomeEmailPreviewContent: React.FC = () => {
 
     return (
         <>
-            {/* Divider */}
-            <div className="px-[7rem] py-4">
-                <hr className="m-0 border-0 border-t" style={{borderColor: colors.dividerColor}} />
+            {/* Heading */}
+            <div className="px-[7rem] pt-8">
+                <h3
+                    className={cn(
+                        'mb-[13px] text-[2.6rem] leading-supertight',
+                        settings.title_font_category === 'serif' && 'font-serif',
+                        settings.title_font_category === 'sans_serif' && 'font-sans',
+                        settings.title_font_weight === 'normal' && 'font-normal',
+                        settings.title_font_weight === 'medium' && 'font-medium',
+                        settings.title_font_weight === 'semibold' && 'font-semibold',
+                        settings.title_font_weight === 'bold' && 'font-bold'
+                    )}
+                    style={{color: colors.textColor}}
+                >
+                    Thanks for subscribing
+                </h3>
             </div>
 
             {/* Body content */}
@@ -40,20 +53,30 @@ const WelcomeEmailPreviewContent: React.FC = () => {
                 style={{color: colors.textColor, fontFamily: bodyFont}}
             >
                 <p className="mb-6 mt-0">
-                    Welcome to {siteTitle || 'our publication'}! We&#39;re glad you&#39;re here. This is a preview of how your welcome email will look with the current design settings.
+                    This is a preview of what your welcome email will look like when new members sign up to {siteTitle || 'your publication'}.
                 </p>
                 <p className="mb-6 mt-0">
-                    You can customize the{' '}
+                    You can customize the design using the settings on the right &ndash; from{' '}
                     <a
                         className={linkClasses}
                         href="#"
                         style={{color: colors.linkColor}}
                         onClick={e => e.preventDefault()}
                     >
-                        colors, fonts, and styles
+                        colors and fonts
                     </a>{' '}
-                    to match your brand.
+                    to buttons and images &ndash; to make it feel like part of your brand.
                 </p>
+                <hr className="my-[52px] border-0 border-t" style={{borderColor: colors.dividerColor}} />
+
+                <p className="mb-6 mt-0">
+                    The actual content of your welcome email can be edited separately. This preview is just here to help you get the design right.
+                </p>
+
+                {/* Image */}
+                <div className="mb-6 h-[unset] w-full max-w-[600px] bg-cover bg-no-repeat">
+                    <img alt="" className={cn('min-h-full min-w-full shrink-0', resolveImageCorners(settings.image_corners))} src={CoverImage} />
+                </div>
             </div>
 
             {/* Button */}
@@ -73,7 +96,7 @@ const WelcomeEmailPreviewContent: React.FC = () => {
                     }
                     onClick={e => e.preventDefault()}
                 >
-                    Subscribe
+                    Get started
                 </a>
             </div>
 

apps/admin-x-settings/src/components/settings/membership/member-emails/member-email-editor.tsx

@@ -1,4 +1,5 @@
 import React, {Suspense, useCallback, useMemo, useRef} from 'react';
+import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import {ErrorBoundary, type KoenigInstance, LoadingIndicator, loadKoenig, useDesignSystem} from '@tryghost/admin-x-design-system';
 import {cn} from '@tryghost/shade';
 import {focusKoenigEditorOnBottomClick, useFramework} from '@tryghost/admin-x-framework';
@@ -102,15 +103,20 @@ const MemberEmailsEditor: React.FC<MemberEmailsEditorProps> = ({
     const tenorConfig = config.tenor?.googleApiKey ? config.tenor : null;
     const {fetchKoenigLexical, darkMode} = useDesignSystem();
     const editorResource = useMemo(() => loadKoenig(fetchKoenigLexical), [fetchKoenigLexical]);
+    const transistorEnabled = useFeatureFlag('transistor');
 
     const cardConfig = useMemo(() => ({
         unsplash: unsplashConfig,
         pinturaConfig,
         tenor: tenorConfig,
         fetchEmbed,
         fetchAutocompleteLinks,
-        searchLinks
-    }), [unsplashConfig, pinturaConfig, tenorConfig, fetchEmbed, fetchAutocompleteLinks, searchLinks]);
+        searchLinks,
+        feature: {
+            transistor: transistorEnabled
+        },
+        visibilitySettings: 'none'
+    }), [unsplashConfig, pinturaConfig, tenorConfig, fetchEmbed, fetchAutocompleteLinks, searchLinks, transistorEnabled]);
 
     const registerEditorAPI = useCallback((API: KoenigInstance | null) => {
         editorAPIRef.current = API;

apps/admin/package.json

@@ -15,7 +15,7 @@
     "@tryghost/activitypub": "*",
     "@tryghost/admin-x-framework": "*",
     "@tryghost/admin-x-settings": "*",
-    "@tryghost/koenig-lexical": "1.7.25",
+    "@tryghost/koenig-lexical": "1.7.27",
     "@tryghost/posts": "*",
     "@tryghost/shade": "*",
     "@tryghost/stats": "*",