@wildo-ai/saas-website 1.1.1

package/src/astro/__tests__/bridge-runtime.test.tsx

@@ -0,0 +1,198 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { BUILTIN_PROVIDER_CAPABILITY } from '@wildo-ai/saas-models/public-runtime';
+import type { FrontendProvidersBlock } from '@wildo-ai/saas-models/public-runtime';
+import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
+
+import { useWebsiteRuntime } from '../../core/contexts/useWebsiteRuntime';
+import { useWebsitePage } from '../../core/contexts/useWebsitePage';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import type { WebsiteNavigationConfig } from '../../schemas/manifests/website-root-config.shared.schemas';
+import { WebsitePageRefSchema } from '../../schemas/refs/page-ref.schemas';
+import {
+  createWebsitePageBridgeIsland,
+  type WebsitePageBridgeIslandProps,
+} from '../bridge-runtime';
+
+const COLORS = {
+  background: '#fff',
+  foreground: '#111',
+  primary: '#0070f3',
+  primaryForeground: '#fff',
+  accent: '#ff5e5b',
+  accentForeground: '#fff',
+  surface: '#fafafa',
+  surfaceForeground: '#111',
+  border: '#e5e5e5',
+  muted: '#f5f5f5',
+  mutedForeground: '#737373',
+};
+const RADII = {
+  none: '0',
+  sm: '0.125rem',
+  md: '0.375rem',
+  lg: '0.75rem',
+  xl: '1.5rem',
+  full: '9999px',
+};
+const DESIGN_TOKENS = { colors: COLORS, radii: RADII };
+
+function NoopComponent(): React.ReactElement | null {
+  return null;
+}
+
+function PageProbe(): React.ReactElement {
+  const runtime = useWebsiteRuntime();
+  const page = useWebsitePage();
+  const posthogProvider = runtime.frontendProviderRegistry
+    ?.findProviderByProviderCapability(BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS);
+  return (
+    <div>
+      <span data-testid="page-ref">{page.pageRef as unknown as string}</span>
+      <span data-testid="locale">{runtime.locale}</span>
+      <span data-testid="headline">
+        {runtime.labelPack['website.landing.hero.headline'] ?? '<missing>'}
+      </span>
+      <span data-testid="primary-color">{runtime.designTokens.colors.primary}</span>
+      <span data-testid="provider-ref">{posthogProvider?.metadata.ref ?? '<missing>'}</span>
+    </div>
+  );
+}
+
+function buildNavigation(): WebsiteNavigationConfig {
+  return { headerComponent: NoopComponent, footerComponent: NoopComponent };
+}
+
+const PAGE_REF = WebsitePageRefSchema.parse('landing');
+const SKIP_KEY = WebsiteLabelKeySchema.parse('website.chrome.layout.skip-to-main-content');
+const SKIP_LABEL_PACK = { 'website.chrome.layout.skip-to-main-content': 'Skip to main content' } as const;
+// Typed as the real block rather than `as const`: the prop takes `FrontendProvidersBlock`,
+// whose `providerCapabilities` / `protocols` are mutable `string[]`, so a `readonly` tuple
+// fixture is not assignable to the surface under test.
+const FRONTEND_PROVIDERS: FrontendProvidersBlock = {
+  providers: {
+    posthog: {
+      metadata: { ref: 'posthog' },
+      providerCapabilities: [BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS],
+      protocols: ['FRONTEND_SDK'],
+      publicConfig: {
+        integrationKind: 'product-analytics',
+        websiteRuntime: true,
+      },
+    },
+  },
+};
+
+describe('createWebsitePageBridgeIsland', () => {
+  it('returns a React component (closes over deps; never crosses prop boundary)', () => {
+    const Island = createWebsitePageBridgeIsland({
+      PageComponent: PageProbe,
+      pageRef: PAGE_REF,
+      navigation: buildNavigation(),
+    });
+    expect(typeof Island).toBe('function');
+    expect(Island.displayName).toBe('WebsitePageBridgeIsland');
+  });
+
+  it('renders the page component inside the runtime + page contexts', () => {
+    const Island = createWebsitePageBridgeIsland({
+      PageComponent: PageProbe,
+      pageRef: PAGE_REF,
+      navigation: buildNavigation(),
+    });
+    render(
+      <Island
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={{ 'website.landing.hero.headline': 'Hello', ...SKIP_LABEL_PACK }}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+    expect(screen.getByTestId('page-ref').textContent).toBe('landing');
+    expect(screen.getByTestId('locale').textContent).toBe(AvailableLanguage.EN);
+    expect(screen.getByTestId('headline').textContent).toBe('Hello');
+    expect(screen.getByTestId('primary-color').textContent).toBe('#0070f3');
+    expect(screen.getByTestId('provider-ref').textContent).toBe('posthog');
+  });
+
+  it('emits the layout-root data attribute carrying the page ref', () => {
+    const Island = createWebsitePageBridgeIsland({
+      PageComponent: PageProbe,
+      pageRef: PAGE_REF,
+      navigation: buildNavigation(),
+    });
+    const { container } = render(
+      <Island
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+    expect(container.querySelector('[data-website-page-ref="landing"]')).not.toBeNull();
+    expect(
+      container.querySelector('[data-website-product-analytics-provider-ref="posthog"]'),
+    ).not.toBeNull();
+  });
+
+  it('uses the navigation deps (closure-trapped) for header + footer slots', () => {
+    function CustomHeader(): React.ReactElement {
+      return <div data-testid="custom-header">HEADER</div>;
+    }
+    function CustomFooter(): React.ReactElement {
+      return <div data-testid="custom-footer">FOOTER</div>;
+    }
+    const Island = createWebsitePageBridgeIsland({
+      PageComponent: PageProbe,
+      pageRef: PAGE_REF,
+      navigation: { headerComponent: CustomHeader, footerComponent: CustomFooter },
+    });
+    render(
+      <Island
+        locale={AvailableLanguage.EN}
+        defaultLocale={AvailableLanguage.EN}
+        labelPack={SKIP_LABEL_PACK}
+        designTokens={DESIGN_TOKENS}
+        skipToMainContentLabelKey={SKIP_KEY}
+        frontendProviders={FRONTEND_PROVIDERS}
+      />,
+    );
+    expect(screen.getByTestId('custom-header').textContent).toBe('HEADER');
+    expect(screen.getByTestId('custom-footer').textContent).toBe('FOOTER');
+  });
+
+  /**
+   * Regression guard for the H-2 ship-blocker that motivated this
+   * redesign: Astro serializes React-island props via `devalue`-style
+   * JSON. Function refs cannot survive that boundary. Asserting that
+   * `structuredClone` (the closest in-process analogue to `devalue`'s
+   * structured-clone semantics) accepts the prop object means a
+   * future contributor cannot accidentally re-introduce a
+   * `ComponentType`-typed field on `WebsitePageBridgeIslandProps`
+   * without this test failing loudly.
+   */
+  it('island props are JSON-serializable (ComponentType refs MUST stay closure-trapped, never on the prop boundary)', () => {
+    const props: WebsitePageBridgeIslandProps = {
+      locale: AvailableLanguage.EN,
+      defaultLocale: AvailableLanguage.EN,
+      labelPack: { 'website.landing.hero.headline': 'Hello' },
+      designTokens: DESIGN_TOKENS,
+      skipToMainContentLabelKey: SKIP_KEY,
+      frontendProviders: FRONTEND_PROVIDERS,
+    };
+    expect(() => structuredClone(props)).not.toThrow();
+    const cloned = structuredClone(props);
+    expect(cloned.locale).toBe(AvailableLanguage.EN);
+    expect(cloned.defaultLocale).toBe(AvailableLanguage.EN);
+    expect(cloned.labelPack['website.landing.hero.headline']).toBe('Hello');
+    expect(cloned.designTokens.colors.primary).toBe('#0070f3');
+    expect(cloned.frontendProviders?.providers.posthog.metadata.ref).toBe('posthog');
+  });
+});

package/src/astro/__tests__/collect-expected-label-keys.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+
+import { WebsiteSectionCategory } from '../../schemas/sections/website-section-category.shared';
+import {
+  WebsiteSectionDefinitionSchema,
+  type WebsiteSectionDefinition,
+} from '../../schemas/sections/website-section-definition.shared.schemas';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import { WebsiteSectionRefSchema } from '../../schemas/refs/section-ref.schemas';
+import { collectExpectedLabelKeysFromSections } from '../collect-expected-label-keys';
+
+const NoopComponent = () => null;
+
+const buildSection = (ref: string, slots: readonly string[]): WebsiteSectionDefinition =>
+  WebsiteSectionDefinitionSchema.parse({
+    sectionRef: WebsiteSectionRefSchema.parse(ref),
+    category: WebsiteSectionCategory.HERO,
+    expectedLabelKeys: slots.map((slot) =>
+      WebsiteLabelKeySchema.parse(`website.landing.${ref}.${slot}`),
+    ),
+    Component: NoopComponent,
+  }) as WebsiteSectionDefinition;
+
+describe('collectExpectedLabelKeysFromSections', () => {
+  it('builds a Map keyed by sectionRef with the section\'s expectedLabelKeys', () => {
+    const sections = [
+      buildSection('hero', ['headline', 'subheadline']),
+      buildSection('cta', ['primary']),
+    ];
+    const map = collectExpectedLabelKeysFromSections(sections);
+    expect(map.size).toBe(2);
+    const heroKeys = map.get(WebsiteSectionRefSchema.parse('hero'));
+    expect(heroKeys?.map((k) => k as unknown as string)).toEqual([
+      'website.landing.hero.headline',
+      'website.landing.hero.subheadline',
+    ]);
+  });
+
+  it('accepts duplicate sectionRef registration when expectedLabelKeys match (cross-page reuse)', () => {
+    const sections = [
+      buildSection('hero', ['headline']),
+      buildSection('hero', ['headline']),
+    ];
+    const map = collectExpectedLabelKeysFromSections(sections);
+    expect(map.size).toBe(1);
+  });
+
+  it('throws on duplicate sectionRef with non-matching expectedLabelKeys', () => {
+    const sections = [
+      buildSection('hero', ['headline']),
+      buildSection('hero', ['headline', 'subheadline']),
+    ];
+    expect(() => collectExpectedLabelKeysFromSections(sections)).toThrow(
+      /Duplicate sectionRef "hero".*non-matching expectedLabelKeys/,
+    );
+  });
+
+  it('returns an empty Map when no sections are passed', () => {
+    expect(collectExpectedLabelKeysFromSections([]).size).toBe(0);
+  });
+
+  it('treats key arrays as order-insensitive when comparing duplicates', () => {
+    const sections = [
+      buildSection('hero', ['headline', 'subheadline']),
+      buildSection('hero', ['subheadline', 'headline']),
+    ];
+    expect(() => collectExpectedLabelKeysFromSections(sections)).not.toThrow();
+  });
+});

package/src/astro/__tests__/headers-renderer.test.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'vitest';
+
+import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
+
+import { WildoMarketingWebsiteConfigSchema } from '../../config/wildo-website-config.schemas';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import {
+  WebsitePageManifestSchema,
+  type WebsitePageManifest,
+} from '../../schemas/manifests/website-page-manifest.shared.schemas';
+import {
+  WebsiteRootConfigSchema,
+  type WebsiteRootConfig,
+} from '../../schemas/manifests/website-root-config.shared.schemas';
+import { WebsitePageRefSchema } from '../../schemas/refs/page-ref.schemas';
+import { WebsiteSectionRefSchema } from '../../schemas/refs/section-ref.schemas';
+import {
+  renderBlogPostNoaiHeaders,
+  renderWebsitePageNoaiHeaders,
+} from '../headers-renderer';
+import {
+  composeWebsiteSiteContext,
+  type WebsiteSiteContext,
+} from '../website-site-context';
+
+const NoopComponent = () => null;
+
+const DESIGN_TOKENS = {
+  colors: {
+    background: '#fff',
+    foreground: '#111',
+    primary: '#0070f3',
+    primaryForeground: '#fff',
+    accent: '#ff5e5b',
+    accentForeground: '#fff',
+    surface: '#fafafa',
+    surfaceForeground: '#111',
+    border: '#e5e5e5',
+    muted: '#f5f5f5',
+    mutedForeground: '#737373',
+  },
+  radii: {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.75rem',
+    xl: '1.5rem',
+    full: '9999px',
+  },
+};
+
+function buildManifest(params: {
+  ref: string;
+  routePath: string;
+  noaiOptOut?: boolean;
+}): WebsitePageManifest {
+  return WebsitePageManifestSchema.parse({
+    ref: WebsitePageRefSchema.parse(params.ref),
+    routePath: params.routePath,
+    pageComponent: NoopComponent,
+    sectionRefs: [WebsiteSectionRefSchema.parse(`${params.ref}-section`)],
+    metaLabelKeys: {
+      titleKey: WebsiteLabelKeySchema.parse(`website.${params.ref}.meta.title`),
+      descriptionKey: WebsiteLabelKeySchema.parse(`website.${params.ref}.meta.description`),
+    },
+    ...(params.noaiOptOut ? { seo: { noaiOptOut: true } } : {}),
+  }) as WebsitePageManifest;
+}
+
+function buildSiteContext(pageManifests: readonly WebsitePageManifest[]): WebsiteSiteContext {
+  const rootConfig = WebsiteRootConfigSchema.parse({
+    pageManifests,
+    designTokens: DESIGN_TOKENS,
+    navigation: { headerComponent: NoopComponent, footerComponent: NoopComponent },
+    seo: { siteName: 'Example Site' },
+    skipToMainContentLabelKey: WebsiteLabelKeySchema.parse(
+      'website.chrome.layout.skip-to-main-content',
+    ),
+  }) as WebsiteRootConfig;
+
+  const websiteConfig = WildoMarketingWebsiteConfigSchema.parse({
+    publicOrigin: 'https://example.com',
+    appOrigin: 'https://app.example.com',
+    defaultLocale: AvailableLanguage.EN,
+    locales: [
+      { locale: AvailableLanguage.EN, path: 'en' },
+      { locale: AvailableLanguage.FR, path: 'fr' },
+    ],
+  });
+
+  return composeWebsiteSiteContext({ rootConfig, websiteConfig });
+}
+
+describe('renderWebsitePageNoaiHeaders', () => {
+  it('returns empty string when no page opts out of AI training', () => {
+    const siteContext = buildSiteContext([buildManifest({ ref: 'landing', routePath: '/' })]);
+    expect(renderWebsitePageNoaiHeaders(siteContext)).toBe('');
+  });
+
+  it('emits one path block per localized route for every opted-out page', () => {
+    const siteContext = buildSiteContext([
+      buildManifest({ ref: 'landing', routePath: '/' }),
+      buildManifest({ ref: 'pricing', routePath: '/pricing', noaiOptOut: true }),
+    ]);
+    expect(renderWebsitePageNoaiHeaders(siteContext)).toBe(
+      ['/pricing', '  X-Robots-Tag: noai, noimageai', '', '/fr/pricing', '  X-Robots-Tag: noai, noimageai'].join(
+        '\n',
+      ),
+    );
+  });
+});
+
+describe('renderBlogPostNoaiHeaders', () => {
+  it('returns empty string when the blog post does not opt out', () => {
+    const siteContext = buildSiteContext([buildManifest({ ref: 'blog-post', routePath: '/blog/[slug]' })]);
+    expect(
+      renderBlogPostNoaiHeaders({
+        siteContext,
+        routePath: '/blog/why-context-beats-content',
+        noaiOptOut: false,
+      }),
+    ).toBe('');
+  });
+
+  it('emits localized header blocks for an opted-out blog route', () => {
+    const siteContext = buildSiteContext([buildManifest({ ref: 'blog-post', routePath: '/blog/[slug]' })]);
+    expect(
+      renderBlogPostNoaiHeaders({
+        siteContext,
+        routePath: '/blog/why-context-beats-content',
+        noaiOptOut: true,
+      }),
+    ).toBe(
+      [
+        '/blog/why-context-beats-content',
+        '  X-Robots-Tag: noai, noimageai',
+        '',
+        '/fr/blog/why-context-beats-content',
+        '  X-Robots-Tag: noai, noimageai',
+      ].join('\n'),
+    );
+  });
+});

package/src/astro/__tests__/i18n-routing.helper.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+
+import { AvailableLanguage } from '@wildo-ai/saas-models/public-runtime';
+
+import { WildoMarketingWebsiteConfigSchema } from '../../config/wildo-website-config.schemas';
+import { WebsiteLabelKeySchema } from '../../schemas/label-keys/website-label-key.schemas';
+import { WebsitePageManifestSchema } from '../../schemas/manifests/website-page-manifest.shared.schemas';
+import {
+  WebsiteRootConfigSchema,
+  type WebsiteRootConfig,
+} from '../../schemas/manifests/website-root-config.shared.schemas';
+import { WebsitePageRefSchema } from '../../schemas/refs/page-ref.schemas';
+import { WebsiteSectionRefSchema } from '../../schemas/refs/section-ref.schemas';
+import { buildAstroI18nConfig } from '../i18n-routing.helper';
+import { composeWebsiteSiteContext, type WebsiteSiteContext } from '../website-site-context';
+
+const NoopComponent = () => null;
+
+const COLORS = {
+  background: '#fff',
+  foreground: '#111',
+  primary: '#0070f3',
+  primaryForeground: '#fff',
+  accent: '#ff5e5b',
+  accentForeground: '#fff',
+  surface: '#fafafa',
+  surfaceForeground: '#111',
+  border: '#e5e5e5',
+  muted: '#f5f5f5',
+  mutedForeground: '#737373',
+};
+const RADII = {
+  none: '0',
+  sm: '0.125rem',
+  md: '0.375rem',
+  lg: '0.75rem',
+  xl: '1.5rem',
+  full: '9999px',
+};
+
+const buildManifest = (ref: string, route: string) =>
+  WebsitePageManifestSchema.parse({
+    ref: WebsitePageRefSchema.parse(ref),
+    routePath: route,
+    pageComponent: NoopComponent,
+    sectionRefs: [WebsiteSectionRefSchema.parse('hero')],
+    metaLabelKeys: {
+      titleKey: WebsiteLabelKeySchema.parse(`website.${ref}.meta.title`),
+      descriptionKey: WebsiteLabelKeySchema.parse(`website.${ref}.meta.description`),
+    },
+  });
+
+const buildRootConfig = (): WebsiteRootConfig =>
+  WebsiteRootConfigSchema.parse({
+    pageManifests: [buildManifest('landing', '/')],
+    designTokens: { colors: COLORS, radii: RADII },
+    navigation: { headerComponent: NoopComponent, footerComponent: NoopComponent },
+    seo: { siteName: 'Example' },
+    skipToMainContentLabelKey: WebsiteLabelKeySchema.parse(
+      'website.chrome.layout.skip-to-main-content',
+    ),
+  }) as WebsiteRootConfig;
+
+const buildSiteContext = (
+  locales: AvailableLanguage[],
+  defaultLocale: AvailableLanguage,
+): WebsiteSiteContext =>
+  composeWebsiteSiteContext({
+    rootConfig: buildRootConfig(),
+    websiteConfig: WildoMarketingWebsiteConfigSchema.parse({
+      publicOrigin: 'https://example.com',
+      appOrigin: 'https://app.example.com',
+      defaultLocale,
+      locales: locales.map((locale) => ({ locale, path: String(locale) })),
+    }),
+  });
+
+describe('buildAstroI18nConfig', () => {
+  it('mirrors the website-config locales as raw strings in declaration order', () => {
+    const cfg = buildAstroI18nConfig(
+      buildSiteContext([AvailableLanguage.EN, AvailableLanguage.FR], AvailableLanguage.EN),
+    );
+    expect(cfg.locales).toEqual([AvailableLanguage.EN, AvailableLanguage.FR]);
+    expect(cfg.defaultLocale).toBe(AvailableLanguage.EN);
+  });
+
+  it('emits the marketing-site routing convention (default at root, no implicit redirect)', () => {
+    const cfg = buildAstroI18nConfig(
+      buildSiteContext([AvailableLanguage.EN, AvailableLanguage.FR], AvailableLanguage.EN),
+    );
+    expect(cfg.routing.prefixDefaultLocale).toBe(false);
+    expect(cfg.routing.redirectToDefaultLocale).toBe(false);
+  });
+
+  it('preserves locale order across the helper', () => {
+    const cfg = buildAstroI18nConfig(
+      buildSiteContext(
+        [AvailableLanguage.FR, AvailableLanguage.EN, AvailableLanguage.DE],
+        AvailableLanguage.FR,
+      ),
+    );
+    expect(cfg.locales).toEqual([
+      AvailableLanguage.FR,
+      AvailableLanguage.EN,
+      AvailableLanguage.DE,
+    ]);
+    expect(cfg.defaultLocale).toBe(AvailableLanguage.FR);
+  });
+
+  it('returns a frozen locales array (cannot be mutated downstream)', () => {
+    const cfg = buildAstroI18nConfig(
+      buildSiteContext([AvailableLanguage.EN], AvailableLanguage.EN),
+    );
+    expect(Object.isFrozen(cfg.locales)).toBe(true);
+  });
+});