create-nextblock 0.13.1 → 0.13.2

package/templates/nextblock-template/app/cms/settings/cortex-ai/actions.ts

@@ -6,16 +6,23 @@ import { redirect } from 'next/navigation';
 import { createClient, verifyPackageOnline } from '@nextblock-cms/db/server';
 
 import {
+  CORTEX_AI_AGENT_SETTINGS_DEFAULTS,
+  CORTEX_AI_AGENT_SETTINGS_KEY,
   CORTEX_AI_OPENROUTER_MODEL_SELECTION_SETTING_KEY,
   CORTEX_AI_OPENROUTER_SETTING_KEY,
   CORTEX_AI_PACKAGE_ID,
+  CORTEX_AI_PEXELS_SETTING_KEY,
+  CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY,
+  CORTEX_AI_UNSPLASH_SETTING_KEY,
   createCortexAiStoredModelSelection,
   encryptStoredOpenRouterApiKey,
   getCortexAiEnvConfig,
   getEnvOpenRouterKeyStatus,
   getStoredOpenRouterKeyStatus,
   listCortexAiCompatibleOpenRouterModels,
+  normalizeCortexAiAgentSettings,
   safeParseCortexAiModelSelection,
+  type CortexAiAgentSettings,
   type CortexAiStoredModelSelection,
 } from '@nextblock-cms/cortex';
 
@@ -23,14 +30,24 @@ const CORTEX_AI_SETTINGS_PATH = '/cms/settings/cortex-ai';
 
 type CortexAiSettingsStatus = {
   activeKeySource: 'env' | 'stored' | 'none';
+  activeStockProvider: 'pexels' | 'unsplash' | null;
+  agentSettings: CortexAiAgentSettings;
   hasEncryptionKey: boolean;
   hasEnvOpenRouterKey: boolean;
+  hasEnvPexelsKey: boolean;
+  hasEnvUnsplashKey: boolean;
   hasStoredOpenRouterKey: boolean;
+  hasStoredPexelsKey: boolean;
+  hasStoredUnsplashKey: boolean;
   isPackageActive: boolean;
   maskedEnvOpenRouterKey: string | null;
   maskedStoredOpenRouterKey: string | null;
+  maskedStoredPexelsKey: string | null;
+  maskedStoredUnsplashKey: string | null;
   selectedModel: CortexAiStoredModelSelection | null;
+  stockKeysUpdatedAt: string | null;
   storedOpenRouterKeyUpdatedAt: string | null;
+  unsplashAppName: string | null;
 };
 
 function redirectWithStatus(status: 'success' | 'error', message: string): never {
@@ -66,7 +83,15 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
   const env = getCortexAiEnvConfig();
   const envKeyStatus = getEnvOpenRouterKeyStatus();
 
-  const [{ data: storedKeyRow }, { data: selectedModelRow }, isPackageActive] = await Promise.all([
+  const [
+    { data: storedKeyRow },
+    { data: selectedModelRow },
+    { data: storedPexelsRow },
+    { data: storedUnsplashRow },
+    { data: unsplashAppNameRow },
+    { data: agentSettingsRow },
+    isPackageActive,
+  ] = await Promise.all([
     supabase
       .from('site_settings')
       .select('value')
@@ -77,11 +102,44 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
       .select('value')
       .eq('key', CORTEX_AI_OPENROUTER_MODEL_SELECTION_SETTING_KEY)
       .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_PEXELS_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_UNSPLASH_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY)
+      .maybeSingle(),
+    supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', CORTEX_AI_AGENT_SETTINGS_KEY)
+      .maybeSingle(),
     verifyPackageOnline(CORTEX_AI_PACKAGE_ID).catch(() => false),
   ]);
 
   const storedKeyStatus = getStoredOpenRouterKeyStatus(storedKeyRow?.value);
   const selectedModel = safeParseCortexAiModelSelection(selectedModelRow?.value);
+  const pexelsStatus = getStoredOpenRouterKeyStatus(storedPexelsRow?.value);
+  const unsplashStatus = getStoredOpenRouterKeyStatus(storedUnsplashRow?.value);
+  const hasEnvPexelsKey = Boolean(process.env.PEXELS_API_KEY?.trim());
+  const hasEnvUnsplashKey = Boolean(process.env.UNSPLASH_ACCESS_KEY?.trim());
+  const activeStockProvider: 'pexels' | 'unsplash' | null = pexelsStatus.hasStoredKey
+    ? 'pexels'
+    : unsplashStatus.hasStoredKey
+      ? 'unsplash'
+      : hasEnvPexelsKey
+        ? 'pexels'
+        : hasEnvUnsplashKey
+          ? 'unsplash'
+          : null;
 
   return {
     activeKeySource: storedKeyStatus.hasStoredKey
@@ -89,14 +147,27 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
       : env.hasOpenRouterEnvKey
         ? 'env'
         : 'none',
+    activeStockProvider,
     hasEncryptionKey: env.hasEncryptionKey,
     hasEnvOpenRouterKey: env.hasOpenRouterEnvKey,
+    hasEnvPexelsKey,
+    hasEnvUnsplashKey,
     hasStoredOpenRouterKey: storedKeyStatus.hasStoredKey,
+    hasStoredPexelsKey: pexelsStatus.hasStoredKey,
+    hasStoredUnsplashKey: unsplashStatus.hasStoredKey,
     isPackageActive,
     maskedEnvOpenRouterKey: envKeyStatus.maskedEnvOpenRouterKey,
     maskedStoredOpenRouterKey: storedKeyStatus.maskedKey,
+    maskedStoredPexelsKey: pexelsStatus.maskedKey,
+    maskedStoredUnsplashKey: unsplashStatus.maskedKey,
+    agentSettings: normalizeCortexAiAgentSettings(agentSettingsRow?.value),
     selectedModel: storedKeyStatus.hasStoredKey ? selectedModel : null,
+    stockKeysUpdatedAt: pexelsStatus.updatedAt || unsplashStatus.updatedAt || null,
     storedOpenRouterKeyUpdatedAt: storedKeyStatus.updatedAt,
+    unsplashAppName:
+      typeof unsplashAppNameRow?.value === 'string' && unsplashAppNameRow.value.trim()
+        ? unsplashAppNameRow.value.trim()
+        : null,
   };
 }
 
@@ -162,6 +233,154 @@ export async function clearOpenRouterApiKeyAction() {
   redirectWithStatus('success', 'Stored OpenRouter key cleared.');
 }
 
+export async function saveStockPhotoKeysAction(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot save keys to the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const pexelsKey = String(formData.get('pexels_api_key') || '').trim();
+    const unsplashKey = String(formData.get('unsplash_access_key') || '').trim();
+    const unsplashAppName = String(formData.get('unsplash_app_name') || '').trim();
+
+    if (!pexelsKey && !unsplashKey && !unsplashAppName) {
+      throw new Error('Enter a Pexels or Unsplash API key, or an Unsplash app name.');
+    }
+
+    const rows: Array<{ key: string; value: unknown }> = [];
+
+    if (pexelsKey) {
+      rows.push({
+        key: CORTEX_AI_PEXELS_SETTING_KEY,
+        value: encryptStoredOpenRouterApiKey(pexelsKey),
+      });
+    }
+
+    if (unsplashKey) {
+      rows.push({
+        key: CORTEX_AI_UNSPLASH_SETTING_KEY,
+        value: encryptStoredOpenRouterApiKey(unsplashKey),
+      });
+    }
+
+    // Non-secret: the registered Unsplash app name for attribution utm_source.
+    if (unsplashAppName) {
+      rows.push({ key: CORTEX_AI_UNSPLASH_APP_NAME_SETTING_KEY, value: unsplashAppName });
+    }
+
+    const { error } = await supabase.from('site_settings').upsert(rows);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to save stock photo keys.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Stock photo API key saved.');
+}
+
+export async function clearStockPhotoKeysAction() {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot clear keys from the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const { error } = await supabase
+      .from('site_settings')
+      .delete()
+      .in('key', [CORTEX_AI_PEXELS_SETTING_KEY, CORTEX_AI_UNSPLASH_SETTING_KEY]);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to clear stock photo keys.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Stock photo API keys cleared.');
+}
+
+export async function saveCortexAiAgentSettingsAction(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot save settings to the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const unlimited = String(formData.get('max_output_unlimited') || '') === 'on';
+    const rawMaxOutput = String(formData.get('max_output_tokens') || '').trim();
+    const rawTimeoutSeconds = Number(formData.get('response_timeout_seconds'));
+
+    // normalizeCortexAiAgentSettings clamps everything to safe bounds.
+    const settings = normalizeCortexAiAgentSettings({
+      maxOutputTokens: unlimited
+        ? null
+        : rawMaxOutput
+          ? Number(rawMaxOutput)
+          : CORTEX_AI_AGENT_SETTINGS_DEFAULTS.maxOutputTokens,
+      maxSteps: Number(formData.get('max_steps')),
+      responseTimeoutMs: Number.isFinite(rawTimeoutSeconds)
+        ? rawTimeoutSeconds * 1000
+        : CORTEX_AI_AGENT_SETTINGS_DEFAULTS.responseTimeoutMs,
+      temperature: Number(formData.get('temperature')),
+    });
+
+    const { error } = await supabase.from('site_settings').upsert({
+      key: CORTEX_AI_AGENT_SETTINGS_KEY,
+      value: settings,
+    });
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to save advanced settings.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Advanced agent settings saved.');
+}
+
+export async function resetCortexAiAgentSettingsAction() {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    throw new Error('Sandbox environment cannot change settings in the database.');
+  }
+
+  try {
+    const supabase = await requireAdminSupabaseClient();
+    const { error } = await supabase
+      .from('site_settings')
+      .delete()
+      .eq('key', CORTEX_AI_AGENT_SETTINGS_KEY);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+  } catch (error) {
+    redirectWithStatus(
+      'error',
+      error instanceof Error ? error.message : 'Failed to reset advanced settings.'
+    );
+  }
+
+  revalidatePath(CORTEX_AI_SETTINGS_PATH);
+  redirectWithStatus('success', 'Advanced agent settings reset to defaults.');
+}
+
 export async function saveCortexAiModelSelectionAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
     throw new Error('Sandbox environment cannot save model selection to the database.');

package/templates/nextblock-template/app/cms/settings/cortex-ai/page.tsx

@@ -36,6 +36,7 @@ export default async function CortexAiSettingsPage({
     : {};
   const storedKeyUpdatedAt = formatDate(status.storedOpenRouterKeyUpdatedAt);
   const selectedModelUpdatedAt = formatDate(status.selectedModel?.updatedAt || null);
+  const stockKeysUpdatedAt = formatDate(status.stockKeysUpdatedAt);
   let compatibleModels: Awaited<ReturnType<typeof listCortexAiCompatibleOpenRouterModels>> = [];
   let modelCatalogError: string | null = null;
 
@@ -73,6 +74,16 @@ export default async function CortexAiSettingsPage({
       selectedModelUpdatedAt={selectedModelUpdatedAt}
       hasEncryptionKey={status.hasEncryptionKey}
       modelCatalogError={modelCatalogError}
+      activeStockProvider={status.activeStockProvider}
+      hasStoredPexelsKey={status.hasStoredPexelsKey}
+      maskedStoredPexelsKey={status.maskedStoredPexelsKey}
+      hasStoredUnsplashKey={status.hasStoredUnsplashKey}
+      maskedStoredUnsplashKey={status.maskedStoredUnsplashKey}
+      hasEnvPexelsKey={status.hasEnvPexelsKey}
+      hasEnvUnsplashKey={status.hasEnvUnsplashKey}
+      stockKeysUpdatedAt={stockKeysUpdatedAt}
+      unsplashAppName={status.unsplashAppName}
+      agentSettings={status.agentSettings}
       successMessage={params.success}
       errorMessage={params.error}
     />

package/templates/nextblock-template/app/lib/homepage.ts

@@ -0,0 +1,36 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
+
+/**
+ * The homepage is the default-language page at slug "home". Every one of its
+ * translation-group siblings — whatever slug each one uses (e.g. "accueil",
+ * "startseite", "inicio") — is ALSO served at "/". This returns that shared
+ * `translation_group_id` so callers can recognise every language variation of
+ * the homepage instead of hardcoding per-locale slugs.
+ *
+ * Returns `null` when there is no default-language "home" page (e.g. a fresh
+ * install), in which case callers should fall back to their prior slug-literal
+ * behaviour.
+ */
+export async function getHomepageTranslationGroupId(
+  supabase: SupabaseClient<Database>,
+): Promise<string | null> {
+  const { data: defaultLang } = await supabase
+    .from('languages')
+    .select('id')
+    .eq('is_default', true)
+    .maybeSingle();
+
+  if (!defaultLang) {
+    return null;
+  }
+
+  const { data: home } = await supabase
+    .from('pages')
+    .select('translation_group_id')
+    .eq('slug', 'home')
+    .eq('language_id', defaultLang.id)
+    .maybeSingle();
+
+  return home?.translation_group_id ?? null;
+}

package/templates/nextblock-template/app/lib/sitemap-utils.ts

@@ -1,4 +1,5 @@
 import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { getHomepageTranslationGroupId } from './homepage';
 
 /**
  * A single, language-aware entry destined for the XML sitemap.
@@ -30,11 +31,13 @@ export interface SitemapEntry {
  * re-advertised under the generic `/{slug}` catch-all:
  *  - `product-template` backs the product layout (app/product/[slug]); it is
  *    not a public page.
- *  - `home` / `accueil` back the locale-resolved homepage served at "/"
- *    (see getHomepageSlugForLocale in app/page.tsx); listing them as `/home`
- *    and `/accueil` would duplicate the canonical "/" entry.
+ *
+ * The homepage and its translations are excluded separately, by translation
+ * group (see `getHomepageTranslationGroupId`), because every language variation
+ * of the homepage is served at "/" regardless of the slug it uses — listing it
+ * under `/{slug}` would duplicate the canonical "/" entry.
  */
-const EXCLUDED_PAGE_SLUGS = new Set(['product-template', 'home', 'accueil']);
+const EXCLUDED_PAGE_SLUGS = new Set(['product-template']);
 
 type SupabaseLikeClient = ReturnType<typeof getSsgSupabaseClient>;
 
@@ -157,12 +160,13 @@ function rowsToEntries(
 export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
   const supabase = getSsgSupabaseClient();
   try {
-    const [{ data: pages, error }, languageMap] = await Promise.all([
+    const [{ data: pages, error }, languageMap, homepageGroupId] = await Promise.all([
       supabase
         .from('pages')
         .select('slug, updated_at, language_id, translation_group_id')
         .eq('status', 'published'),
       fetchLanguageMap(supabase),
+      getHomepageTranslationGroupId(supabase),
     ]);
 
     if (error) {
@@ -171,7 +175,10 @@ export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
     }
 
     const rows = (pages ?? []).filter(
-      (page) => page.slug && !EXCLUDED_PAGE_SLUGS.has(page.slug),
+      (page) =>
+        page.slug &&
+        !EXCLUDED_PAGE_SLUGS.has(page.slug) &&
+        !(homepageGroupId && page.translation_group_id === homepageGroupId),
     );
 
     return rowsToEntries(

package/templates/nextblock-template/app/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { cookies, draftMode, headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
-import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { createClient, getSsgSupabaseClient } from '@nextblock-cms/db/server';
 import PageClientContent from './[slug]/PageClientContent';
 import { getPageDataBySlug } from './[slug]/page.utils';
 import BlockRenderer from '../components/BlockRenderer';
@@ -29,12 +29,57 @@ interface PageTranslation {
   }[];
 }
 
-async function getHomepageSlugForLocale(locale: string): Promise<string> {
-  if (locale === 'fr') {
-    return 'accueil';
+// Resolve the homepage for a given locale WITHOUT assuming a per-locale slug.
+// The homepage is, by convention, the default-language page at slug "home".
+// Its translated versions may use ANY slug (e.g. "accueil"), so we find the
+// localized version through the shared translation group. This lets "/" serve
+// every language variation of the homepage regardless of what slug it uses.
+async function resolveHomepageData(preferredLocale: string) {
+  const defaultHome = await getPageDataBySlug('home', DEFAULT_LOCALE);
+
+  // Default locale (or a homepage with no linked translations): serve it directly.
+  if (defaultHome && (preferredLocale === DEFAULT_LOCALE || !defaultHome.translation_group_id)) {
+    return defaultHome;
   }
 
-  return 'home';
+  // Resolve the localized homepage via the shared translation group (any slug),
+  // so "/" serves every language variation regardless of the slug it uses. In
+  // draft (preview) mode we include unpublished siblings; otherwise only published.
+  if (defaultHome?.translation_group_id) {
+    const draft = await draftMode();
+    const supabase = draft.isEnabled ? createClient() : getSsgSupabaseClient();
+    let siblingQuery = supabase
+      .from('pages')
+      .select('slug, languages!inner(code)')
+      .eq('translation_group_id', defaultHome.translation_group_id)
+      .eq('languages.code', preferredLocale)
+      .limit(1);
+
+    if (!draft.isEnabled) {
+      siblingQuery = siblingQuery.eq('status', 'published');
+    }
+
+    const { data: sibling } = await siblingQuery.maybeSingle();
+    const localizedSlug = (sibling as { slug?: string } | null)?.slug;
+    if (localizedSlug) {
+      const localized = await getPageDataBySlug(localizedSlug, preferredLocale);
+      if (localized) {
+        return localized;
+      }
+    }
+  }
+
+  // Fallbacks: the preferred locale's own "home" slug (covers a missing or
+  // renamed default-language home that the group lookup couldn't anchor on),
+  // then the default home. Either may be null — the caller renders notFound().
+  if (preferredLocale !== DEFAULT_LOCALE) {
+    const localizedHome = await getPageDataBySlug('home', preferredLocale);
+    if (localizedHome) {
+      return localizedHome;
+    }
+  }
+
+  return defaultHome;
 }
 
 async function getPreferredLocale() {
@@ -71,8 +116,7 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 
   const preferredLocale = await getPreferredLocale();
-  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
-  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
+  const pageData = await resolveHomepageData(preferredLocale);
 
   if (!pageData) {
     return { title: 'Homepage Not Found' };
@@ -128,16 +172,15 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function RootPage() {
   const preferredLocale = await getPreferredLocale();
-  const homepageSlug = await getHomepageSlugForLocale(preferredLocale);
-  const pageData = await getPageDataBySlug(homepageSlug, preferredLocale);
+  const pageData = await resolveHomepageData(preferredLocale);
 
   if (!pageData) {
-    console.error(
-      `Homepage data not found for slug: ${homepageSlug} (locale: ${preferredLocale})`
-    );
+    console.error(`Homepage data not found (locale: ${preferredLocale})`);
     notFound();
   }
 
+  const homepageSlug = pageData.slug;
+
   const translatedSlugs: { [key: string]: string } = {};
   if (pageData.translation_group_id) {
     const supabase = getSsgSupabaseClient();

package/templates/nextblock-template/components/blocks/renderers/ImageBlockRenderer.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import Image from "next/image";
 import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+import { StockPhotoCredit, isStockPhotoCreditCaption, type StockPhotoAttribution } from "./StockPhotoCredit";
 
 export type ImageBlockContent = {
     media_id: string | null;
     object_key: string | null;
+    external_url?: string | null;
+    attribution?: StockPhotoAttribution | null;
     alt_text: string | null;
     caption: string | null;
     width: number | null;
@@ -12,6 +15,10 @@ export type ImageBlockContent = {
     blur_data_url: string | null;
 };
 
+function isRenderableExternalImageUrl(value: unknown): value is string {
+  return typeof value === "string" && /^https?:\/\//i.test(value.trim());
+}
+
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
 
 interface ImageBlockRendererProps {
@@ -28,6 +35,55 @@ const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   visualEditAttributes,
 }) => {
   void languageId;
+
+  // External URL (e.g. a stock photo the AI inserted). Rendered with a plain
+  // <img> so it works for any allowlisted https host without Next image
+  // remotePatterns config. The caption/figure structure matches the R2 path.
+  if (isRenderableExternalImageUrl(content.external_url)) {
+    const hasDimensions =
+      typeof content.width === "number" &&
+      typeof content.height === "number" &&
+      content.width > 0 &&
+      content.height > 0;
+
+    // Don't render a caption that merely repeats the attribution credit — the
+    // StockPhotoCredit below already renders "Photo by … on {Provider}". (Stock
+    // photos historically stored the credit string in `caption` too, which showed
+    // the same line twice.)
+    const captionText = content.caption?.trim() ?? "";
+    const showCaption =
+      captionText.length > 0 && !isStockPhotoCreditCaption(captionText, content.attribution);
+
+    return (
+      <div className="w-full" {...visualEditAttributes}>
+        <figure className="my-6 text-center mx-auto max-w-full">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={content.external_url as string}
+            alt={content.alt_text || ""}
+            {...(hasDimensions
+              ? { width: content.width as number, height: content.height as number }
+              : {})}
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="rounded-md border max-w-full h-auto mx-auto"
+          />
+          {showCaption && (
+            <figcaption className="text-sm text-muted-foreground mt-2">
+              {content.caption}
+            </figcaption>
+          )}
+          {content.attribution && (
+            <StockPhotoCredit
+              attribution={content.attribution}
+              className="mt-1 block text-xs text-muted-foreground"
+            />
+          )}
+        </figure>
+      </div>
+    );
+  }
+
   if (!content.media_id || !content.object_key) {
     return (
       <div