create-nextblock 0.13.10 → 0.13.11

package/templates/nextblock-template/components/form-message.tsx

@@ -1,32 +1,32 @@
- 'use client';
-
-import { useTranslations } from "@nextblock-cms/utils";
-
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export function FormMessage({ message }: { message?: Message }) {
-  const { t } = useTranslations();
-
-  if (!message) return null;
-
-  return (
-    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
-      {"success" in message && message.success && (
-        <div className="text-foreground border-l-2 border-foreground px-4">
-          {t(message.success)}
-        </div>
-      )}
-      {"error" in message && message.error && (
-        <div className="text-destructive border-l-2 border-destructive px-4">
-          {t(message.error)}
-        </div>
-      )}
-      {"message" in message && message.message && (
-        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
-      )}
-    </div>
-  );
-}
+ 'use client';
+
+import { useTranslations } from "@nextblock-cms/utils";
+
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export function FormMessage({ message }: { message?: Message }) {
+  const { t } = useTranslations();
+
+  if (!message) return null;
+
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+      {"success" in message && message.success && (
+        <div className="text-foreground border-l-2 border-foreground px-4">
+          {t(message.success)}
+        </div>
+      )}
+      {"error" in message && message.error && (
+        <div className="text-destructive border-l-2 border-destructive px-4">
+          {t(message.error)}
+        </div>
+      )}
+      {"message" in message && message.message && (
+        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/components/media/YouTubeFacade.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useState } from 'react';
+import { buildNoCookieEmbedUrl, youTubePosterUrl } from '../../lib/media/youtube';
+
+interface YouTubeFacadeProps {
+  videoId: string;
+  title?: string;
+  /** Serialized extra player params (from parseYouTubeUrl). */
+  query?: string;
+  /** Classes for the clickable surface / injected iframe. Defaults to filling its parent. */
+  className?: string;
+}
+
+const FILL = 'absolute inset-0 h-full w-full';
+
+/**
+ * Click-to-play YouTube facade: renders a poster + play button and loads no
+ * youtube.com resource at all until the user clicks. This is what keeps the
+ * Lighthouse `inspector-issues` audit green -- the nocookie host still writes
+ * cookies from the player JS, so the only reliable fix is not booting the
+ * player during the audit. See lib/media/youtube.ts.
+ */
+const YouTubeFacade: React.FC<YouTubeFacadeProps> = ({ videoId, title, query, className }) => {
+  const [activated, setActivated] = useState(false);
+  const [poster, setPoster] = useState(() => youTubePosterUrl(videoId, 'maxres'));
+  const label = title || 'YouTube video';
+  const surface = className || FILL;
+
+  if (activated) {
+    return (
+      <iframe
+        className={surface}
+        src={buildNoCookieEmbedUrl(videoId, new URLSearchParams(query || ''), { autoplay: true })}
+        title={label}
+        allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => setActivated(true)}
+      aria-label={`Play video: ${label}`}
+      className={`${surface} group flex items-center justify-center overflow-hidden border-0 bg-black p-0`}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={poster}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+        decoding="async"
+        onError={() => setPoster(youTubePosterUrl(videoId, 'hq'))}
+        className="absolute inset-0 h-full w-full object-cover opacity-90 transition group-hover:opacity-100"
+      />
+      <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-black/70 text-white shadow-lg transition group-hover:scale-110 group-hover:bg-red-600">
+        <svg viewBox="0 0 24 24" className="ml-1 h-7 w-7" aria-hidden="true" focusable="false">
+          <path d="M8 5v14l11-7z" fill="currentColor" />
+        </svg>
+      </span>
+    </button>
+  );
+};
+
+export default YouTubeFacade;

package/templates/nextblock-template/components/media/youtube-embed-replace.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Element, type HTMLReactParserOptions } from 'html-react-parser';
+import YouTubeFacade from './YouTubeFacade';
+import { parseYouTubeUrl } from '../../lib/media/youtube';
+
+/**
+ * html-react-parser `replace` helper: swaps any YouTube <iframe> for a
+ * click-to-play facade (zero third-party requests on load) and forces
+ * loading="lazy" on every other third-party frame.
+ * Returns undefined to let the parser render the node normally.
+ */
+export function replaceYouTubeIframe(domNode: Element): React.ReactElement | undefined {
+  if (domNode.name !== 'iframe' || !domNode.attribs) return undefined;
+  const parsed = parseYouTubeUrl(domNode.attribs.src);
+  if (!parsed) {
+    if (!domNode.attribs.loading) domNode.attribs.loading = 'lazy';
+    return undefined;
+  }
+  return (
+    <YouTubeFacade
+      videoId={parsed.videoId}
+      title={domNode.attribs.title}
+      query={parsed.params.toString()}
+      className={domNode.attribs.class}
+    />
+  );
+}
+
+/** Minimal parser options for raw-HTML surfaces that only need embed safety. */
+export const embedSafeParserOptions: HTMLReactParserOptions = {
+  replace: (domNode) => (domNode instanceof Element ? replaceYouTubeIframe(domNode) : undefined),
+};

package/templates/nextblock-template/components/privacy/ConsentBanner.tsx

@@ -1,170 +1,170 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { useTranslations } from '@nextblock-cms/utils';
-import { logConsentDecision } from '../../app/actions/consent';
-import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
-
-/**
- * Minimal floating consent pill, bottom-right. Renders nothing once a decision
- * exists (the nb_consent_preference cookie). Decisions persist client-side and
- * are mirrored to privacy_consent_logs for accountability.
- */
-export function ConsentBanner() {
-  const { lang, t } = useTranslations();
-  const [visible, setVisible] = useState(false);
-  const [managing, setManaging] = useState(false);
-  const [analytics, setAnalytics] = useState(true);
-  const [marketing, setMarketing] = useState(false);
-  const isFrench = lang.toLowerCase().startsWith('fr');
-
-  const translate = (key: string, fallback: string) => {
-    const translated = t(key);
-    return translated === key ? fallback : translated;
-  };
-
-  const privacyPolicyHref = translate(
-    'privacy.consent.privacy_policy_href',
-    isFrench ? '/politique-de-confidentialite' : '/privacy-policy',
-  );
-
-  useEffect(() => {
-    if (!readConsent()) setVisible(true);
-  }, []);
-
-  const decide = (choice: { analytics: boolean; marketing: boolean }) => {
-    const pref = writeConsent(choice);
-    void logConsentDecision({
-      token: pref.token,
-      analytics: choice.analytics,
-      marketing: choice.marketing,
-    });
-    setVisible(false);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div
-      role="dialog"
-      aria-label={translate('privacy.consent.aria_label', 'Privacy consent')}
-      className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
-    >
-      <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
-        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-          {translate('privacy.consent.title', 'We value your privacy')}
-        </p>
-        <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
-          {translate(
-            'privacy.consent.description_before_policy_link',
-            'We use only essential cookies by default. With your consent we also use analytics to improve the site. See our',
-          )}{' '}
-          <Link
-            href={privacyPolicyHref}
-            className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200"
-          >
-            {translate('privacy.consent.privacy_policy_link', 'Privacy Policy')}
-          </Link>
-          {translate('privacy.consent.description_after_policy_link', '.')}
-        </p>
-
-        {managing && (
-          <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
-            <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.necessary_label', 'Necessary')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate('privacy.consent.necessary_help', 'Always on')}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked
-                disabled
-                className="h-4 w-4 accent-slate-400"
-              />
-            </label>
-            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.analytics_label', 'Analytics')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate(
-                    'privacy.consent.analytics_help',
-                    'Usage insights',
-                  )}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked={analytics}
-                onChange={(e) => setAnalytics(e.target.checked)}
-                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
-              />
-            </label>
-            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
-              <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">
-                  {translate('privacy.consent.marketing_label', 'Marketing')}
-                </span>
-                <span className="block text-[11px] text-slate-400">
-                  {translate(
-                    'privacy.consent.marketing_help',
-                    'Personalized content',
-                  )}
-                </span>
-              </span>
-              <input
-                type="checkbox"
-                checked={marketing}
-                onChange={(e) => setMarketing(e.target.checked)}
-                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
-              />
-            </label>
-          </div>
-        )}
-
-        <div className="mt-3 flex items-center gap-2">
-          {managing ? (
-            <button
-              type="button"
-              onClick={() => decide({ analytics, marketing })}
-              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
-            >
-              {translate('privacy.consent.save_choices', 'Save choices')}
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={() => decide({ analytics: true, marketing: true })}
-              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
-            >
-              {translate('privacy.consent.accept_all', 'Accept all')}
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => decide({ analytics: false, marketing: false })}
-            className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
-          >
-            {translate('privacy.consent.reject_all', 'Reject all')}
-          </button>
-        </div>
-
-        <button
-          type="button"
-          onClick={() => setManaging((prev) => !prev)}
-          className="mt-2 w-full text-center text-[11px] text-slate-800 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
-        >
-          {managing
-            ? translate('privacy.consent.hide_options', 'Hide options')
-            : translate('privacy.consent.manage_options', 'Manage options')}
-        </button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useTranslations } from '@nextblock-cms/utils';
+import { logConsentDecision } from '../../app/actions/consent';
+import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
+
+/**
+ * Minimal floating consent pill, bottom-right. Renders nothing once a decision
+ * exists (the nb_consent_preference cookie). Decisions persist client-side and
+ * are mirrored to privacy_consent_logs for accountability.
+ */
+export function ConsentBanner() {
+  const { lang, t } = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const [managing, setManaging] = useState(false);
+  const [analytics, setAnalytics] = useState(true);
+  const [marketing, setMarketing] = useState(false);
+  const isFrench = lang.toLowerCase().startsWith('fr');
+
+  const translate = (key: string, fallback: string) => {
+    const translated = t(key);
+    return translated === key ? fallback : translated;
+  };
+
+  const privacyPolicyHref = translate(
+    'privacy.consent.privacy_policy_href',
+    isFrench ? '/politique-de-confidentialite' : '/privacy-policy',
+  );
+
+  useEffect(() => {
+    if (!readConsent()) setVisible(true);
+  }, []);
+
+  const decide = (choice: { analytics: boolean; marketing: boolean }) => {
+    const pref = writeConsent(choice);
+    void logConsentDecision({
+      token: pref.token,
+      analytics: choice.analytics,
+      marketing: choice.marketing,
+    });
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label={translate('privacy.consent.aria_label', 'Privacy consent')}
+      className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
+    >
+      <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
+        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+          {translate('privacy.consent.title', 'We value your privacy')}
+        </p>
+        <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+          {translate(
+            'privacy.consent.description_before_policy_link',
+            'We use only essential cookies by default. With your consent we also use analytics to improve the site. See our',
+          )}{' '}
+          <Link
+            href={privacyPolicyHref}
+            className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200"
+          >
+            {translate('privacy.consent.privacy_policy_link', 'Privacy Policy')}
+          </Link>
+          {translate('privacy.consent.description_after_policy_link', '.')}
+        </p>
+
+        {managing && (
+          <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
+            <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.necessary_label', 'Necessary')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate('privacy.consent.necessary_help', 'Always on')}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked
+                disabled
+                className="h-4 w-4 accent-slate-400"
+              />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.analytics_label', 'Analytics')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.analytics_help',
+                    'Usage insights',
+                  )}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked={analytics}
+                onChange={(e) => setAnalytics(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.marketing_label', 'Marketing')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.marketing_help',
+                    'Personalized content',
+                  )}
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                checked={marketing}
+                onChange={(e) => setMarketing(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+          </div>
+        )}
+
+        <div className="mt-3 flex items-center gap-2">
+          {managing ? (
+            <button
+              type="button"
+              onClick={() => decide({ analytics, marketing })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              {translate('privacy.consent.save_choices', 'Save choices')}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => decide({ analytics: true, marketing: true })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              {translate('privacy.consent.accept_all', 'Accept all')}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => decide({ analytics: false, marketing: false })}
+            className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            {translate('privacy.consent.reject_all', 'Reject all')}
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setManaging((prev) => !prev)}
+          className="mt-2 w-full text-center text-[11px] text-slate-800 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
+        >
+          {managing
+            ? translate('privacy.consent.hide_options', 'Hide options')
+            : translate('privacy.consent.manage_options', 'Manage options')}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/components/privacy/ConsentGatedAnalytics.tsx

@@ -1,70 +1,70 @@
-'use client';
-
-// Gates third-party analytics behind explicit consent. Until the visitor opts
-// in, this renders null -> the GTM chunk is never imported and the network tab
-// shows zero analytics bytes, preserving the Lighthouse budget.
-import { useEffect, useRef, useState } from 'react';
-import { DeferredGoogleTagManager } from '../DeferredGoogleTagManager';
-import { DeferredGoogleAnalytics } from '../DeferredGoogleAnalytics';
-import { CONSENT_CHANGE_EVENT, readConsent } from '../../lib/privacy/consent-client';
-
-interface ConsentGatedAnalyticsProps {
-  gtmId?: string;
-  gaMeasurementId?: string;
-  customScripts?: string;
-  nonce?: string;
-}
-
-/** Recreate <script> elements from admin-provided markup so they actually run. */
-function injectCustomScripts(markup: string, nonce?: string) {
-  const parsed = new DOMParser().parseFromString(markup, 'text/html');
-  parsed.querySelectorAll('script').forEach((source) => {
-    const script = document.createElement('script');
-    for (const attr of Array.from(source.attributes)) {
-      script.setAttribute(attr.name, attr.value);
-    }
-    if (nonce) script.setAttribute('nonce', nonce);
-    if (source.textContent) script.textContent = source.textContent;
-    document.head.appendChild(script);
-  });
-}
-
-export function ConsentGatedAnalytics({
-  gtmId,
-  gaMeasurementId,
-  customScripts,
-  nonce,
-}: ConsentGatedAnalyticsProps) {
-  const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
-  const injectedRef = useRef(false);
-
-  useEffect(() => {
-    const sync = () => setAnalyticsAllowed(Boolean(readConsent()?.analytics));
-    sync();
-    window.addEventListener(CONSENT_CHANGE_EVENT, sync);
-    return () => window.removeEventListener(CONSENT_CHANGE_EVENT, sync);
-  }, []);
-
-  useEffect(() => {
-    if (!analyticsAllowed || injectedRef.current) return;
-    const markup = customScripts?.trim();
-    if (!markup) return;
-    injectedRef.current = true;
-    try {
-      injectCustomScripts(markup, nonce);
-    } catch (error) {
-      console.error('Failed to inject consented custom scripts:', error);
-    }
-  }, [analyticsAllowed, customScripts, nonce]);
-
-  if (!analyticsAllowed) return null;
-  if (!gtmId && !gaMeasurementId) return null;
-  return (
-    <>
-      {gtmId && <DeferredGoogleTagManager gtmId={gtmId} nonce={nonce} />}
-      {gaMeasurementId && (
-        <DeferredGoogleAnalytics gaId={gaMeasurementId} nonce={nonce} />
-      )}
-    </>
-  );
-}
+'use client';
+
+// Gates third-party analytics behind explicit consent. Until the visitor opts
+// in, this renders null -> the GTM chunk is never imported and the network tab
+// shows zero analytics bytes, preserving the Lighthouse budget.
+import { useEffect, useRef, useState } from 'react';
+import { DeferredGoogleTagManager } from '../DeferredGoogleTagManager';
+import { DeferredGoogleAnalytics } from '../DeferredGoogleAnalytics';
+import { CONSENT_CHANGE_EVENT, readConsent } from '../../lib/privacy/consent-client';
+
+interface ConsentGatedAnalyticsProps {
+  gtmId?: string;
+  gaMeasurementId?: string;
+  customScripts?: string;
+  nonce?: string;
+}
+
+/** Recreate <script> elements from admin-provided markup so they actually run. */
+function injectCustomScripts(markup: string, nonce?: string) {
+  const parsed = new DOMParser().parseFromString(markup, 'text/html');
+  parsed.querySelectorAll('script').forEach((source) => {
+    const script = document.createElement('script');
+    for (const attr of Array.from(source.attributes)) {
+      script.setAttribute(attr.name, attr.value);
+    }
+    if (nonce) script.setAttribute('nonce', nonce);
+    if (source.textContent) script.textContent = source.textContent;
+    document.head.appendChild(script);
+  });
+}
+
+export function ConsentGatedAnalytics({
+  gtmId,
+  gaMeasurementId,
+  customScripts,
+  nonce,
+}: ConsentGatedAnalyticsProps) {
+  const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
+  const injectedRef = useRef(false);
+
+  useEffect(() => {
+    const sync = () => setAnalyticsAllowed(Boolean(readConsent()?.analytics));
+    sync();
+    window.addEventListener(CONSENT_CHANGE_EVENT, sync);
+    return () => window.removeEventListener(CONSENT_CHANGE_EVENT, sync);
+  }, []);
+
+  useEffect(() => {
+    if (!analyticsAllowed || injectedRef.current) return;
+    const markup = customScripts?.trim();
+    if (!markup) return;
+    injectedRef.current = true;
+    try {
+      injectCustomScripts(markup, nonce);
+    } catch (error) {
+      console.error('Failed to inject consented custom scripts:', error);
+    }
+  }, [analyticsAllowed, customScripts, nonce]);
+
+  if (!analyticsAllowed) return null;
+  if (!gtmId && !gaMeasurementId) return null;
+  return (
+    <>
+      {gtmId && <DeferredGoogleTagManager gtmId={gtmId} nonce={nonce} />}
+      {gaMeasurementId && (
+        <DeferredGoogleAnalytics gaId={gaMeasurementId} nonce={nonce} />
+      )}
+    </>
+  );
+}