sovrium 0.0.2

package/src/presentation/ui/pages/PageBodyScripts.tsx

@@ -0,0 +1,242 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { type ReactElement } from 'react'
+import {
+  renderInlineScriptTag,
+  renderScriptTag,
+  renderWindowConfig,
+} from '@/presentation/scripts/script-renderers'
+import { buildPageMetadataI18n } from './PageMetadataI18n'
+import type { GroupedScripts } from './PageScripts'
+import type { Languages } from '@/domain/models/app/languages'
+import type { Page } from '@/domain/models/app/pages'
+import type { Theme } from '@/domain/models/app/theme'
+
+/**
+ * Props for PageBodyScripts component
+ */
+type PageBodyScriptsProps = {
+  readonly page: Page
+  readonly theme: Theme | undefined
+  readonly languages: Languages | undefined
+  readonly direction: 'ltr' | 'rtl'
+  readonly scripts: GroupedScripts
+  readonly position: 'start' | 'end'
+}
+
+/**
+ * Renders external and inline scripts for a given position
+ */
+function renderScripts(
+  externalScripts: GroupedScripts['external']['head'],
+  inlineScripts: GroupedScripts['inline']['head'],
+  keyPrefix: string
+): ReactElement {
+  return (
+    <>
+      {externalScripts.map((script, index) =>
+        renderScriptTag({
+          src: script.src,
+          async: script.async,
+          defer: script.defer,
+          module: script.module,
+          integrity: script.integrity,
+          crossOrigin: script.crossorigin as 'anonymous' | 'use-credentials' | undefined,
+          reactKey: `${keyPrefix}-${index}`,
+        })
+      )}
+      {inlineScripts.map((script, index) =>
+        renderInlineScriptTag({
+          code: script.code,
+          async: script.async,
+          reactKey: `inline-${keyPrefix}-${index}`,
+        })
+      )}
+    </>
+  )
+}
+
+/**
+ * Renders language switcher scripts and configuration
+ */
+function LanguageSwitcherScripts({
+  page,
+  languages,
+  theme,
+  direction,
+}: {
+  readonly page: Page
+  readonly languages: Languages
+  readonly theme: Theme | undefined
+  readonly direction: 'ltr' | 'rtl'
+}): ReactElement {
+  // Build enriched metadata with i18n translations for all languages
+  const enrichedMeta = buildPageMetadataI18n(page, languages)
+
+  return (
+    <>
+      {/* Configuration data for external script (CSP-compliant) */}
+      <div
+        data-language-switcher-config={JSON.stringify(languages)}
+        style={{ display: 'none' }}
+      />
+      {/* Page metadata for client-side updates (title, i18n) */}
+      <div
+        data-page-meta={JSON.stringify(enrichedMeta)}
+        style={{ display: 'none' }}
+      />
+      {/* Expose languages config to window for testing/debugging - fallback defaults to default language */}
+      {renderWindowConfig({
+        windowKey: 'APP_LANGUAGES',
+        data: {
+          ...languages,
+          fallback: languages.fallback ?? languages.default,
+        },
+        reactKey: 'window-app-languages',
+      })}
+      {/* Expose theme config with RTL-aware direction to window for testing/debugging */}
+      {renderWindowConfig({
+        windowKey: 'APP_THEME',
+        data: {
+          ...(theme || {}),
+          direction: direction,
+        },
+        reactKey: 'window-app-theme',
+      })}
+      {/* External script file loaded only when needed (defer ensures DOM is ready) */}
+      <script
+        src="/assets/language-switcher.js"
+        defer={true}
+      />
+    </>
+  )
+}
+
+/**
+ * Renders scroll animation script if needed
+ */
+function ScrollAnimationScript({
+  page,
+  theme,
+}: {
+  readonly page: Page
+  readonly theme: Theme | undefined
+}): ReactElement | undefined {
+  const needsAnimation = (page.sections && page.sections.length > 0) || theme?.animations?.scaleUp
+  if (!needsAnimation) return undefined
+  return (
+    <script
+      src="/assets/scroll-animation.js"
+      defer={true}
+    />
+  )
+}
+
+/**
+ * Renders feature flags configuration if configured
+ */
+function FeatureFlagsScript({ page }: { readonly page: Page }): ReactElement | undefined {
+  if (!page.scripts?.features) return undefined
+  return renderWindowConfig({
+    windowKey: 'FEATURES',
+    data: page.scripts.features,
+    reactKey: 'window-features',
+  })
+}
+
+/**
+ * Renders conditional script tags (banner, animation, features)
+ */
+function renderConditionalScripts(config: {
+  readonly page: Page
+  readonly theme: Theme | undefined
+  readonly languages: Languages | undefined
+  readonly direction: 'ltr' | 'rtl'
+}): ReactElement {
+  const { page, theme, languages, direction } = config
+  return (
+    <>
+      <ScrollAnimationScript
+        page={page}
+        theme={theme}
+      />
+      {languages && (
+        <LanguageSwitcherScripts
+          page={page}
+          languages={languages}
+          theme={theme}
+          direction={direction}
+        />
+      )}
+      <FeatureFlagsScript page={page} />
+    </>
+  )
+}
+
+/**
+ * Click interaction handler (SECURITY: Safe - static code, no user input)
+ */
+const clickScript = `!function(){document.addEventListener("click",function(t){const e=t.target.closest("[data-click-animation], [data-click-navigate], [data-click-open-url], [data-click-scroll-to], [data-click-toggle-element], [data-click-submit-form]");if(!e)return;const n=e.getAttribute("data-click-animation"),a=e.getAttribute("data-click-navigate"),c=e.getAttribute("data-click-open-url"),i=e.getAttribute("data-click-open-in-new-tab")==="true",o=e.getAttribute("data-click-scroll-to"),l=e.getAttribute("data-click-toggle-element"),r=e.getAttribute("data-click-submit-form"),s=c||a,d=!!c;if(r){const t=document.querySelector(r);t&&"FORM"===t.tagName&&t.requestSubmit()}else if(l){const t=document.querySelector(l);if(t){const e="none"===window.getComputedStyle(t).display;t.style.display=e?"":"none"}}else if(o){const t=document.querySelector(o);t&&t.scrollIntoView({behavior:"smooth",block:"start"})}else if(n&&"none"!==n){const t="animate-"+n;if(e.classList.add(t),s){let n=!1;const a=function(){n||(n=!0,e.classList.remove(t),d&&i?window.open(s,"_blank"):window.location.href=s)};e.addEventListener("animationend",a,{once:!0}),setTimeout(a,300)}else{const n=function(){e.classList.remove(t)};e.addEventListener("animationend",n,{once:!0}),setTimeout(n,300)}}else s&&(d&&i?window.open(s,"_blank"):window.location.href=s)})}();`
+
+/**
+ * Renders scripts for body end position
+ */
+function renderBodyEndScripts(config: {
+  readonly page: Page
+  readonly theme: Theme | undefined
+  readonly languages: Languages | undefined
+  readonly direction: 'ltr' | 'rtl'
+  readonly scripts: GroupedScripts
+}): ReactElement {
+  const { page, theme, languages, direction, scripts } = config
+  return (
+    <>
+      {renderScripts(scripts.external.bodyEnd, scripts.inline.bodyEnd, 'body-end')}
+      {renderConditionalScripts({ page, theme, languages, direction })}
+      {/* Render APP_CONFIG after inline scripts to merge with any existing values */}
+      {page.scripts?.config &&
+        renderWindowConfig({
+          windowKey: 'APP_CONFIG',
+          data: page.scripts.config,
+          reactKey: 'window-app-config-body',
+        })}
+      <script dangerouslySetInnerHTML={{ __html: clickScript }} />
+    </>
+  )
+}
+
+/**
+ * Renders scripts for body start or end position
+ *
+ * For 'start' position:
+ * - External and inline scripts positioned at body-start
+ *
+ * For 'end' position:
+ * - External and inline scripts positioned at body-end
+ * - Banner dismiss script (if banner is dismissible)
+ * - Scroll animation script (if theme has scaleUp animation)
+ * - Language switcher script (if languages configured)
+ * - Feature flags script (if features configured)
+ *
+ * @param props - Component props
+ * @returns Script elements for the specified position
+ */
+export function PageBodyScripts({
+  page,
+  theme,
+  languages,
+  direction,
+  scripts,
+  position,
+}: PageBodyScriptsProps): Readonly<ReactElement> {
+  if (position === 'start') {
+    return renderScripts(scripts.external.bodyStart, scripts.inline.bodyStart, 'body-start')
+  }
+
+  return renderBodyEndScripts({ page, theme, languages, direction, scripts })
+}

package/src/presentation/ui/pages/PageBodyStyles.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import type { Theme } from '@/domain/models/app/theme'
+
+/**
+ * Body style configuration for theme fonts
+ */
+export type BodyStyle = {
+  readonly fontFamily?: string
+  readonly fontSize?: string
+  readonly lineHeight?: string
+  readonly fontStyle?: 'normal' | 'italic' | 'oblique'
+  readonly letterSpacing?: string
+  readonly textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+}
+
+/**
+ * Builds font family string with optional fallback
+ */
+function buildFontFamily(family: string, fallback?: string): string {
+  return fallback ? `${family}, ${fallback}` : family
+}
+
+/**
+ * Generates inline body styles from theme fonts configuration
+ *
+ * Inline styles have highest specificity and override Tailwind base styles.
+ *
+ * @param theme - Theme configuration
+ * @returns Body style object or undefined if no body font configured
+ */
+export function generateBodyStyle(theme: Theme | undefined): BodyStyle | undefined {
+  if (!theme?.fonts?.body) return undefined
+
+  const bodyFont = theme.fonts.body
+
+  return {
+    ...(bodyFont.family && { fontFamily: buildFontFamily(bodyFont.family, bodyFont.fallback) }),
+    ...(bodyFont.size && { fontSize: bodyFont.size }),
+    ...(bodyFont.lineHeight && { lineHeight: bodyFont.lineHeight }),
+    ...(bodyFont.style && { fontStyle: bodyFont.style as 'normal' | 'italic' | 'oblique' }),
+    ...(bodyFont.letterSpacing && { letterSpacing: bodyFont.letterSpacing }),
+    ...(bodyFont.transform && {
+      textTransform: bodyFont.transform as 'none' | 'uppercase' | 'lowercase' | 'capitalize',
+    }),
+  }
+}

package/src/presentation/ui/pages/PageHead.tsx

@@ -0,0 +1,380 @@
+/**
+ * Copyright (c) 2025 ESSENTIAL SERVICES
+ *
+ * This source code is licensed under the Business Source License 1.1
+ * found in the LICENSE.md file in the root directory of this source tree.
+ */
+
+import { type ReactElement } from 'react'
+import { normalizeFavicons } from '@/application/metadata/favicon-transformer'
+import { renderInlineScriptTag, renderScriptTag } from '@/presentation/scripts/script-renderers'
+import { resolveTranslationPattern } from '@/presentation/translations/translation-resolver'
+import {
+  AnalyticsHead,
+  CustomElementsHead,
+  DnsPrefetchLinks,
+  FaviconLink,
+  FaviconSetLinks,
+  OpenGraphMeta,
+  PreloadLinks,
+  StructuredDataScript,
+  TwitterCardMeta,
+} from '@/presentation/ui/metadata'
+import type { GroupedScripts } from './PageScripts'
+import type { Languages } from '@/domain/models/app/languages'
+import type { CustomElement } from '@/domain/models/app/page/meta/custom-elements'
+import type { OpenGraph } from '@/domain/models/app/page/meta/open-graph'
+import type { Page } from '@/domain/models/app/pages'
+import type { Theme } from '@/domain/models/app/theme'
+
+/**
+ * Props for PageHead component
+ */
+type PageHeadProps = {
+  readonly page: Page
+  readonly theme: Theme | undefined
+  readonly directionStyles: string
+  readonly title: string
+  readonly description: string
+  readonly keywords?: string
+  readonly canonical?: string
+  readonly lang: string
+  readonly languages?: Languages
+  readonly scripts: GroupedScripts
+}
+
+/**
+ * Checks if custom elements include a viewport meta tag
+ */
+function hasCustomViewportMeta(customElements: readonly CustomElement[] | undefined): boolean {
+  if (!customElements) return false
+  return customElements.some(
+    (element) => element.type === 'meta' && element.attrs?.name === 'viewport'
+  )
+}
+
+/**
+ * Extracts OpenGraph properties from meta object
+ * Handles both standard openGraph object and og:* prefixed direct properties
+ */
+function extractOpenGraphData(
+  page: Page,
+  lang: string,
+  languages: Languages | undefined
+): OpenGraph | undefined {
+  if (!page.meta) return undefined
+
+  // Start with existing openGraph object if present
+  const openGraph = page.meta.openGraph || {}
+
+  // Extract og:* prefixed properties from meta (type assertion needed for dynamic access)
+  const metaRecord = page.meta as Record<string, unknown>
+  const ogSiteName = metaRecord['og:site_name']
+
+  // Resolve translation patterns in extracted properties
+  const resolvedSiteName =
+    typeof ogSiteName === 'string'
+      ? resolveTranslationPattern(ogSiteName, lang, languages)
+      : undefined
+
+  // Merge og:* properties into openGraph structure
+  const merged = {
+    ...openGraph,
+    ...(resolvedSiteName && { siteName: resolvedSiteName }),
+  }
+
+  // Only return if there's at least one property
+  return Object.keys(merged).length > 0 ? merged : undefined
+}
+
+/**
+ * Renders basic meta tags (charset, viewport, title, description, keywords, canonical)
+ */
+function BasicMetaTags({
+  title,
+  description,
+  keywords,
+  canonical,
+  hasCustomViewport,
+}: {
+  readonly title: string
+  readonly description: string
+  readonly keywords?: string
+  readonly canonical?: string
+  readonly hasCustomViewport: boolean
+}): ReactElement {
+  return (
+    <>
+      <meta charSet="UTF-8" />
+      {!hasCustomViewport && (
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0"
+        />
+      )}
+      <title>{title}</title>
+      {description && (
+        <meta
+          name="description"
+          content={description}
+        />
+      )}
+      {keywords && (
+        <meta
+          name="keywords"
+          content={keywords}
+        />
+      )}
+      {canonical && (
+        <link
+          rel="canonical"
+          href={canonical}
+        />
+      )}
+    </>
+  )
+}
+
+/**
+ * Renders font stylesheets from theme configuration
+ */
+function ThemeFonts({ theme }: { readonly theme: Theme | undefined }): ReactElement | undefined {
+  if (!theme?.fonts) return undefined
+
+  return (
+    <>
+      {Object.values(theme.fonts).map((font, index) =>
+        font.url ? (
+          <link
+            key={`font-${index}`}
+            rel="stylesheet"
+            href={font.url}
+          />
+        ) : undefined
+      )}
+    </>
+  )
+}
+
+/**
+ * Renders custom stylesheet link from meta.stylesheet
+ */
+function CustomStylesheet({
+  stylesheet,
+}: {
+  readonly stylesheet: string | undefined
+}): ReactElement | undefined {
+  if (!stylesheet) return undefined
+
+  return (
+    <link
+      rel="stylesheet"
+      href={stylesheet}
+    />
+  )
+}
+
+/**
+ * Renders Google Fonts with performance optimizations
+ * Includes preconnect hints for fonts.googleapis.com and fonts.gstatic.com
+ */
+function GoogleFonts({
+  googleFonts,
+}: {
+  readonly googleFonts: string | undefined
+}): ReactElement | undefined {
+  if (!googleFonts) return undefined
+
+  return (
+    <>
+      <link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+      />
+      <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="stylesheet"
+        href={googleFonts}
+      />
+    </>
+  )
+}
+
+/**
+ * Renders global CSS and direction styles
+ * Theme CSS is compiled globally at /assets/output.css
+ *
+ * SECURITY: Safe use of dangerouslySetInnerHTML
+ * - Content: RTL direction styles (build-time generated CSS)
+ * - Source: directionStyles prop computed from language direction
+ * - Risk: None - contains only CSS direction properties
+ * - Validation: Generated by language direction logic (ltr/rtl)
+ * - Purpose: Apply RTL-aware styling for Arabic/Hebrew languages
+ * - XSS Protection: CSS syntax prevents script execution
+ * - Content: Fixed format like "[dir='rtl'] { direction: rtl; }"
+ */
+function GlobalStyles({ directionStyles }: { readonly directionStyles: string }): ReactElement {
+  return (
+    <>
+      <link
+        rel="stylesheet"
+        href="/assets/output.css"
+      />
+      <style dangerouslySetInnerHTML={{ __html: directionStyles }} />
+    </>
+  )
+}
+
+/**
+ * Renders external and inline scripts for head section
+ * Note: APP_CONFIG is rendered in body-end to merge with inline scripts
+ */
+function HeadScripts({ scripts }: { readonly scripts: GroupedScripts }): ReactElement {
+  return (
+    <>
+      {scripts.external.head.map((script, index) =>
+        renderScriptTag({
+          src: script.src,
+          async: script.async,
+          defer: script.defer,
+          module: script.module,
+          integrity: script.integrity,
+          crossOrigin: script.crossorigin,
+          reactKey: `head-${index}`,
+        })
+      )}
+      {scripts.inline.head.map((script, index) =>
+        renderInlineScriptTag({
+          code: script.code,
+          async: script.async,
+          reactKey: `inline-head-${index}`,
+        })
+      )}
+    </>
+  )
+}
+
+/**
+ * Renders hreflang alternate links for multi-language SEO
+ * Generates <link rel="alternate" hreflang="..."> tags for each supported language
+ *
+ * Uses dual-pattern approach:
+ * - hreflang attribute: Full locale (e.g., 'en-US', 'fr-FR') for SEO standards
+ * - href attribute: Short code URL path (e.g., '/en/', '/fr/') for routing
+ *
+ * Includes x-default link pointing to the default language for undefined locales
+ */
+function HreflangLinks({
+  page,
+  languages,
+}: {
+  readonly page: Page
+  readonly languages: Languages | undefined
+}): ReactElement | undefined {
+  if (!languages || languages.supported.length <= 1) {
+    return undefined
+  }
+
+  const basePath = page.path === '/' ? '' : page.path
+
+  return (
+    <>
+      {languages.supported.map((lang) => {
+        // Use full locale for hreflang attribute (e.g., 'en-US', 'fr-FR')
+        // Use short code for URL path (e.g., '/en/', '/fr/')
+        const hreflang = lang.locale || lang.code
+        return (
+          <link
+            key={lang.code}
+            rel="alternate"
+            hrefLang={hreflang}
+            href={`/${lang.code}${basePath}/`}
+          />
+        )
+      })}
+      <link
+        key="x-default"
+        rel="alternate"
+        hrefLang="x-default"
+        href={`/${languages.default}${basePath}/`}
+      />
+    </>
+  )
+}
+
+/**
+ * Renders the complete <head> section of a dynamic page
+ *
+ * Includes:
+ * - Basic meta tags (charset, viewport, title, description)
+ * - OpenGraph and Twitter Card metadata
+ * - Structured data (JSON-LD)
+ * - Preload hints for critical resources
+ * - DNS prefetch hints
+ * - Analytics scripts
+ * - Custom elements
+ * - Favicon links
+ * - Custom stylesheet from meta.stylesheet
+ * - Google Fonts with preconnect hints from meta.googleFonts
+ * - Font stylesheets from theme
+ * - Global CSS with compiled theme tokens
+ * - Direction styles for RTL support
+ * - External and inline scripts positioned in head
+ *
+ * @param props - Component props
+ * @returns Head section elements
+ */
+export function PageHead({
+  page,
+  theme,
+  directionStyles,
+  title,
+  description,
+  keywords,
+  canonical,
+  lang,
+  languages,
+  scripts,
+}: PageHeadProps): Readonly<ReactElement> {
+  const hasCustomViewport = hasCustomViewportMeta(page.meta?.customElements)
+  const openGraphData = extractOpenGraphData(page, lang, languages)
+  const normalizedFavicons = normalizeFavicons(page.meta?.favicons)
+
+  return (
+    <>
+      <BasicMetaTags
+        title={title}
+        description={description}
+        keywords={keywords}
+        canonical={canonical}
+        hasCustomViewport={hasCustomViewport}
+      />
+      <OpenGraphMeta
+        openGraph={openGraphData}
+        lang={lang}
+        languages={languages}
+      />
+      <TwitterCardMeta page={page} />
+      <StructuredDataScript page={page} />
+      <PreloadLinks preload={page.meta?.preload} />
+      <DnsPrefetchLinks dnsPrefetch={page.meta?.dnsPrefetch} />
+      <HreflangLinks
+        page={page}
+        languages={languages}
+      />
+      <AnalyticsHead analytics={page.meta?.analytics} />
+      <CustomElementsHead customElements={page.meta?.customElements} />
+      <FaviconLink favicon={page.meta?.favicon} />
+      <FaviconSetLinks favicons={normalizedFavicons} />
+      <CustomStylesheet stylesheet={page.meta?.stylesheet} />
+      <GoogleFonts googleFonts={page.meta?.googleFonts} />
+      <ThemeFonts theme={theme} />
+      <GlobalStyles directionStyles={directionStyles} />
+      <HeadScripts scripts={scripts} />
+    </>
+  )
+}