@bleedingdev/modern-js-create 3.2.0-ultramodern.102 → 3.2.0-ultramodern.103

package/dist/index.js

@@ -566,6 +566,7 @@ const MODULE_FEDERATION_VERSION = '2.5.0';
 const ZEPHYR_RSPACK_PLUGIN_VERSION = '1.1.1';
 const ZEPHYR_AGENT_VERSION = '1.1.1';
 const WRANGLER_VERSION = '4.95.0';
+const CLOUDFLARE_COMPATIBILITY_DATE = '2026-06-02';
 const TAILWIND_VERSION = '4.3.0';
 const TAILWIND_POSTCSS_VERSION = '4.3.0';
 const EFFECT_TSGO_VERSION = '0.13.0';
@@ -1101,17 +1102,105 @@ function createCloudflareProofRoute(app) {
         } : {}
     };
 }
+function createCloudflareSecurityContract() {
+    return {
+        enabled: true,
+        headers: {
+            referrerPolicy: 'strict-origin-when-cross-origin',
+            contentTypeOptions: 'nosniff',
+            permissionsPolicy: 'camera=(), geolocation=(), microphone=(), payment=(), usb=()'
+        },
+        contentSecurityPolicy: {
+            mode: 'report-only',
+            directives: {
+                'base-uri': [
+                    "'self'"
+                ],
+                'connect-src': [
+                    "'self'",
+                    'https:',
+                    'http:',
+                    'wss:',
+                    'ws:'
+                ],
+                'default-src': [
+                    "'self'"
+                ],
+                'font-src': [
+                    "'self'",
+                    'data:',
+                    'https:',
+                    'http:'
+                ],
+                'form-action': [
+                    "'self'"
+                ],
+                'frame-ancestors': [
+                    "'self'"
+                ],
+                'img-src': [
+                    "'self'",
+                    'data:',
+                    'blob:',
+                    'https:',
+                    'http:'
+                ],
+                'manifest-src': [
+                    "'self'",
+                    'https:',
+                    'http:'
+                ],
+                'object-src': [
+                    "'none'"
+                ],
+                "script-src": [
+                    "'self'",
+                    "'unsafe-inline'",
+                    "'unsafe-eval'",
+                    'https:',
+                    'http:',
+                    'blob:'
+                ],
+                'style-src': [
+                    "'self'",
+                    "'unsafe-inline'",
+                    'https:',
+                    'http:'
+                ],
+                'worker-src': [
+                    "'self'",
+                    'blob:'
+                ]
+            },
+            reason: "Report-only by default so Cloudflare Module Federation SSR can prove remote script, style, and connect compatibility before enforcement."
+        },
+        noindex: {
+            workersDev: true,
+            localhost: true,
+            previewHostnames: []
+        },
+        cookies: {
+            mutateSetCookie: false,
+            reason: 'Generated Cloudflare worker does not own application Set-Cookie headers.'
+        }
+    };
+}
+function formatTsJsonValue(value, indent) {
+    return JSON.stringify(value, null, 2).replaceAll('\n', `\n${' '.repeat(indent)}`);
+}
 function createCloudflareDeployContract(scope, app) {
     return {
         target: 'cloudflare',
         workerName: createCloudflareWorkerName(scope, app),
         publicUrlEnv: createCloudflarePublicUrlEnv(app),
+        compatibilityDate: CLOUDFLARE_COMPATIBILITY_DATE,
         compatibilityFlags: [
             'nodejs_compat',
             'global_fetch_strictly_public'
         ],
         assetsBinding: 'ASSETS',
         routes: createCloudflareProofRoute(app),
+        security: createCloudflareSecurityContract(),
         evidence: {
             proofScript: "scripts/proof-cloudflare-version.mjs",
             reportDefault: '.codex/reports/cloudflare-version-proof/public-url-proof.json'
@@ -1400,6 +1489,8 @@ ${bffPluginEntry}        moduleFederationPlugin(),
         ? {
             deploy: {
               worker: {
+                compatibilityDate: '${CLOUDFLARE_COMPATIBILITY_DATE}',
+                security: ${formatTsJsonValue(createCloudflareSecurityContract(), 16)},
                 ssr: true,
               },
             },
@@ -1638,12 +1729,18 @@ ${createModuleFederationRemotesConfig(scope, app, remotes)}${createSharedModuleF
 function appI18nNamespace(app) {
     return 'shell' === app.kind ? 'shell' : app.domain ?? app.id;
 }
+const privateAppRoutePublicness = {
+    indexable: false,
+    public: false,
+    publicSurface: 'private-app-screen'
+};
 function createRouteOwnedI18nPaths(app) {
     const namespace = appI18nNamespace(app);
     const base = {
         mfBoundaryId: app.mfName,
         namespace,
-        ownerAppId: app.id
+        ownerAppId: app.id,
+        ...privateAppRoutePublicness
     };
     if ('shell' === app.kind) return [
         {
@@ -1816,8 +1913,11 @@ function createRouteOwnedI18nPaths(app) {
         }
     ];
 }
-function createLocalisedUrlsMap(app) {
-    return Object.fromEntries(createRouteOwnedI18nPaths(app).flatMap((route)=>{
+function isPublicIndexableRoute(route) {
+    return route.public && route.indexable;
+}
+function createLocalisedUrlsMapFromRoutes(routes) {
+    return Object.fromEntries(routes.flatMap((route)=>{
         if ('/' === route.canonicalPath) return [];
         return Array.from(new Set([
             route.canonicalPath,
@@ -1828,9 +1928,23 @@ function createLocalisedUrlsMap(app) {
             ]);
     }));
 }
+function createLocalisedUrlsMap(app) {
+    return createLocalisedUrlsMapFromRoutes(createRouteOwnedI18nPaths(app));
+}
+function createPublicRouteMetadata(app) {
+    return createRouteOwnedI18nPaths(app).filter(isPublicIndexableRoute).map((route)=>({
+            canonicalPath: route.canonicalPath,
+            id: route.id,
+            localisedPaths: route.localisedPaths,
+            namespace: route.namespace,
+            ownerAppId: route.ownerAppId,
+            titleKey: route.titleKey
+        }));
+}
 function createRouteMetadataModule(app) {
     const routes = sortJsonValue(createRouteOwnedI18nPaths(app));
     const localisedUrls = sortJsonValue(createLocalisedUrlsMap(app));
+    const publicRoutes = sortJsonValue(createPublicRouteMetadata(app));
     const namespace = appI18nNamespace(app);
     return `export const ultramodernRouteNamespace = '${namespace}' as const;
 
@@ -1838,9 +1952,12 @@ export const ultramodernRouteMetadata = ${JSON.stringify(routes, null, 2)} as co
 
 export const ultramodernLocalisedUrls = ${JSON.stringify(localisedUrls, null, 2)} as const;
 
+export const ultramodernPublicRoutes = ${JSON.stringify(publicRoutes, null, 2)} as const;
+
 export const ultramodernRouteConfig = {
   localisedUrls: ultramodernLocalisedUrls,
   namespace: ultramodernRouteNamespace,
+  publicRoutes: ultramodernPublicRoutes,
   routes: ultramodernRouteMetadata,
   source: 'route-owned',
 } as const;
@@ -4248,7 +4365,9 @@ function createAppGeneratedContract(scope, app, apps, enableTailwind) {
             target: 'cloudflare',
             cloudflare: createCloudflareDeployContract(scope, app),
             worker: {
+                compatibilityDate: CLOUDFLARE_COMPATIBILITY_DATE,
                 name: createCloudflareWorkerName(scope, app),
+                security: createCloudflareSecurityContract(),
                 ssr: true
             },
             output: {
@@ -4293,6 +4412,9 @@ function createAppGeneratedContract(scope, app, apps, enableTailwind) {
             metadataExport: './src/routes/ultramodern-route-metadata',
             localisedUrls: createLocalisedUrlsMap(app),
             owned: createRouteOwnedI18nPaths(app),
+            publicRoutes: createPublicRouteMetadata(app),
+            privateByDefault: true,
+            publicnessDefault: 'private-app-screen',
             generatedRouteMap: true,
             manualOverrides: []
         },
@@ -4770,6 +4892,7 @@ function createWorkspaceValidationScript(scope, enableTailwind, remotes = []) {
     const expectedBuildScript = remotes.length > 0 ? 'ULTRAMODERN_ZEPHYR=false pnpm -r --filter "./verticals/*" run build && ULTRAMODERN_ZEPHYR=false pnpm --filter "./apps/shell-super-app" run build && pnpm ultramodern:assert-mf-types' : 'ULTRAMODERN_ZEPHYR=false pnpm --filter "./apps/shell-super-app" run build && pnpm ultramodern:assert-mf-types';
     const expectedCloudflareBuildScript = remotes.length > 0 ? 'pnpm -r --filter "./verticals/*" run cloudflare:build && pnpm --filter "./apps/shell-super-app" run cloudflare:build && pnpm ultramodern:assert-mf-types' : 'pnpm --filter "./apps/shell-super-app" run cloudflare:build && pnpm ultramodern:assert-mf-types';
     const expectedCloudflareDeployScript = remotes.length > 0 ? 'pnpm -r --filter "./verticals/*" run cloudflare:deploy && pnpm --filter "./apps/shell-super-app" run cloudflare:deploy' : 'pnpm --filter "./apps/shell-super-app" run cloudflare:deploy';
+    const expectedCloudflareSecurity = createCloudflareSecurityContract();
     return `import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
@@ -4784,6 +4907,7 @@ const oldRemotePaths = ${JSON.stringify(oldRemotePaths, null, 2)};
 const expectedBuildScript = ${JSON.stringify(expectedBuildScript)};
 const expectedCloudflareBuildScript = ${JSON.stringify(expectedCloudflareBuildScript)};
 const expectedCloudflareDeployScript = ${JSON.stringify(expectedCloudflareDeployScript)};
+const expectedCloudflareSecurity = ${JSON.stringify(expectedCloudflareSecurity, null, 2)};
 
 const readText = relativePath => fs.readFileSync(path.join(root, relativePath), 'utf-8');
 const readJson = relativePath => JSON.parse(readText(relativePath));
@@ -4950,6 +5074,7 @@ assert(rootPackage.scripts?.['skills:check'] === 'node ./scripts/bootstrap-agent
 assert(rootPackage.scripts?.postinstall === "oxfmt . '!repos/**' && node ./scripts/bootstrap-agent-skills.mjs && node ./scripts/setup-agent-reference-repos.mjs", 'Root postinstall must format, bootstrap agent skills, initialize git/hooks, and install reference repositories');
 
 const expectedAppIds = ['shell-super-app', ...fullStackVerticals.map(vertical => vertical.id)];
+const expectedCloudflareCompatibilityDate = '${CLOUDFLARE_COMPATIBILITY_DATE}';
 const expectedCloudflareCompatibilityFlags = ['nodejs_compat', 'global_fetch_strictly_public'];
 assert(
   JSON.stringify(generatedContract.apps?.map(app => app.id)) === JSON.stringify(expectedAppIds),
@@ -4980,7 +5105,10 @@ assert(
 const shellContract = generatedContract.apps?.find(app => app.id === 'shell-super-app');
 assert(shellContract?.deploy?.cloudflare?.workerName === expectedWorkerName('shell-super-app'), 'Shell Cloudflare workerName is incorrect');
 assert(shellContract?.deploy?.cloudflare?.publicUrlEnv === 'ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP', 'Shell Cloudflare public URL env is incorrect');
+assert(shellContract?.deploy?.cloudflare?.compatibilityDate === expectedCloudflareCompatibilityDate, 'Shell Cloudflare compatibilityDate is incorrect');
 assert(JSON.stringify(shellContract?.deploy?.cloudflare?.compatibilityFlags) === JSON.stringify(expectedCloudflareCompatibilityFlags), 'Shell Cloudflare compatibility flags are incorrect');
+assert(JSON.stringify(shellContract?.deploy?.cloudflare?.security) === JSON.stringify(expectedCloudflareSecurity), 'Shell Cloudflare security contract is incorrect');
+assert(shellContract?.deploy?.worker?.compatibilityDate === expectedCloudflareCompatibilityDate, 'Shell worker compatibilityDate is incorrect');
 assert(shellContract?.config?.rspack?.output?.uniqueName === 'shellSuperApp', 'Shell Rspack uniqueName is incorrect');
 assert(shellContract?.config?.rspack?.output?.chunkLoadingGlobal === expectedChunkLoadingGlobal('shellSuperApp'), 'Shell Rspack chunkLoadingGlobal is incorrect');
 assert(topology.shell?.cloudflare?.workerName === expectedWorkerName('shell-super-app'), 'Shell topology Cloudflare workerName is incorrect');
@@ -4994,6 +5122,13 @@ assert(shellContract?.styling?.federation?.entrypoints?.css?.includes('src/route
 assert(shellContract?.styling?.federation?.assets?.shared?.some(asset => asset.endsWith('/shared-design-tokens/tokens.css')), 'Shell must import the shared design token CSS asset');
 assert(shellContract?.styling?.federation?.dedupe?.duplicateBaseStylesAllowed === false, 'Shell CSS contract must forbid duplicated base styles');
 assert(shellContract?.styling?.federation?.ssr?.firstPaintRequired === true, 'Shell CSS must be required for SSR first paint');
+assert(shellContract?.routes?.privateByDefault === true, 'Shell routes must be private by default');
+assert(shellContract?.routes?.publicnessDefault === 'private-app-screen', 'Shell route publicness default is incorrect');
+assert(JSON.stringify(shellContract?.routes?.publicRoutes ?? []) === '[]', 'Shell must not expose generated public routes by default');
+assert(
+  (shellContract?.routes?.owned ?? []).every(route => route.public === false && route.indexable === false && route.publicSurface === 'private-app-screen'),
+  'Shell owned routes must be non-indexable private app screens by default',
+);
 assert(
   topology.shell?.verticalRefs?.join(',') === fullStackVerticals.map(vertical => vertical.id).join(','),
   'Topology shell verticalRefs must match generated verticals',
@@ -5029,7 +5164,10 @@ for (const vertical of fullStackVerticals) {
   assert(contractEntry?.kind === 'vertical', \`\${vertical.id} generated contract kind is incorrect\`);
   assert(contractEntry?.deploy?.cloudflare?.workerName === expectedWorkerName(vertical.id), \`\${vertical.id} Cloudflare workerName is incorrect\`);
   assert(contractEntry?.deploy?.cloudflare?.publicUrlEnv === \`ULTRAMODERN_PUBLIC_URL_\${vertical.id.replace(/-/g, '_').toUpperCase()}\`, \`\${vertical.id} Cloudflare public URL env is incorrect\`);
+  assert(contractEntry?.deploy?.cloudflare?.compatibilityDate === expectedCloudflareCompatibilityDate, \`\${vertical.id} Cloudflare compatibilityDate is incorrect\`);
   assert(JSON.stringify(contractEntry?.deploy?.cloudflare?.compatibilityFlags) === JSON.stringify(expectedCloudflareCompatibilityFlags), \`\${vertical.id} Cloudflare compatibility flags are incorrect\`);
+  assert(JSON.stringify(contractEntry?.deploy?.cloudflare?.security) === JSON.stringify(expectedCloudflareSecurity), \`\${vertical.id} Cloudflare security contract is incorrect\`);
+  assert(contractEntry?.deploy?.worker?.compatibilityDate === expectedCloudflareCompatibilityDate, \`\${vertical.id} worker compatibilityDate is incorrect\`);
   assert(contractEntry?.deploy?.cloudflare?.routes?.effectReadiness === \`\${vertical.apiPrefix}/effect/\${vertical.stem}/readiness\`, \`\${vertical.id} Cloudflare proof readiness route is incorrect\`);
   assert(contractEntry?.config?.rspack?.output?.uniqueName === vertical.mfName, \`\${vertical.id} Rspack uniqueName is incorrect\`);
   assert(contractEntry?.config?.rspack?.output?.chunkLoadingGlobal === expectedChunkLoadingGlobal(vertical.mfName), \`\${vertical.id} Rspack chunkLoadingGlobal is incorrect\`);
@@ -5056,6 +5194,13 @@ for (const vertical of fullStackVerticals) {
   );
   assert(contractEntry?.routes?.source === 'route-owned', \`\${vertical.id} routes must be route-owned\`);
   assert(contractEntry?.routes?.metadataExport === './src/routes/ultramodern-route-metadata', \`\${vertical.id} route metadata export is incorrect\`);
+  assert(contractEntry?.routes?.privateByDefault === true, \`\${vertical.id} routes must be private by default\`);
+  assert(contractEntry?.routes?.publicnessDefault === 'private-app-screen', \`\${vertical.id} route publicness default is incorrect\`);
+  assert(JSON.stringify(contractEntry?.routes?.publicRoutes ?? []) === '[]', \`\${vertical.id} must not expose generated public routes by default\`);
+  assert(
+    (contractEntry?.routes?.owned ?? []).every(route => route.public === false && route.indexable === false && route.publicSurface === 'private-app-screen'),
+    \`\${vertical.id} owned routes must be non-indexable private app screens by default\`,
+  );
   assert(contractEntry?.styling?.federation?.owner?.id === vertical.id, \`\${vertical.id} CSS federation owner is missing\`);
   assert(contractEntry?.styling?.federation?.role === 'vertical-css', \`\${vertical.id} must own only vertical CSS\`);
   assert(contractEntry?.styling?.federation?.rootSelector === \`[data-app-id="\${vertical.id}"]\`, \`\${vertical.id} CSS root selector is incorrect\`);
@@ -5161,8 +5306,14 @@ async function fetchText(url) {
     ok: response.ok,
     status: response.status,
     accessControlAllowOrigin: response.headers.get('access-control-allow-origin'),
+    contentSecurityPolicy: response.headers.get('content-security-policy'),
+    contentSecurityPolicyReportOnly: response.headers.get('content-security-policy-report-only'),
     contentType: response.headers.get('content-type'),
     link: response.headers.get('link'),
+    permissionsPolicy: response.headers.get('permissions-policy'),
+    referrerPolicy: response.headers.get('referrer-policy'),
+    xContentTypeOptions: response.headers.get('x-content-type-options'),
+    xRobotsTag: response.headers.get('x-robots-tag'),
     body: await response.text(),
   };
 }
@@ -5213,6 +5364,139 @@ function assert(condition, message) {
   }
 }
 
+function matchesPreviewHostname(hostname, pattern) {
+  const normalizedHostname = hostname.toLowerCase();
+  const normalizedPattern = String(pattern || '').toLowerCase();
+
+  if (!normalizedPattern) {
+    return false;
+  }
+
+  if (normalizedPattern.startsWith('*.')) {
+    return normalizedHostname.endsWith(normalizedPattern.slice(1));
+  }
+
+  return normalizedHostname === normalizedPattern;
+}
+
+function shouldNoindexUrl(publicUrl, noindex) {
+  if (!noindex || noindex === false) {
+    return false;
+  }
+
+  const { hostname } = new URL(publicUrl);
+  const normalizedHostname = hostname.toLowerCase();
+
+  if (
+    noindex.localhost !== false &&
+    (normalizedHostname === 'localhost' ||
+      normalizedHostname === '127.0.0.1' ||
+      normalizedHostname === '[::1]')
+  ) {
+    return true;
+  }
+
+  if (
+    noindex.workersDev !== false &&
+    normalizedHostname.endsWith('.workers.dev')
+  ) {
+    return true;
+  }
+
+  return (noindex.previewHostnames || []).some(pattern =>
+    matchesPreviewHostname(normalizedHostname, pattern),
+  );
+}
+
+function assertHeader(evidence, response, expected, options) {
+  if (expected === false || expected === undefined) {
+    return;
+  }
+
+  const actual = response[options.field];
+  evidence.assertions.push({
+    type: 'security-header',
+    header: options.header,
+    route: options.route,
+    expected,
+    actual,
+    status: actual === expected ? 'pass' : 'fail',
+  });
+  assert(actual === expected, \`\${options.appId} \${options.route} is missing \${options.header}\`);
+}
+
+function assertCloudflareSecurity(evidence, app, response, route, publicUrl, options = {}) {
+  const security = app.deploy?.cloudflare?.security;
+
+  if (!security || security.enabled === false) {
+    return;
+  }
+
+  const headers = security.headers || {};
+  assertHeader(evidence, response, headers.referrerPolicy, {
+    appId: app.id,
+    field: 'referrerPolicy',
+    header: 'referrer-policy',
+    route,
+  });
+  assertHeader(evidence, response, headers.contentTypeOptions, {
+    appId: app.id,
+    field: 'xContentTypeOptions',
+    header: 'x-content-type-options',
+    route,
+  });
+  assertHeader(evidence, response, headers.permissionsPolicy, {
+    appId: app.id,
+    field: 'permissionsPolicy',
+    header: 'permissions-policy',
+    route,
+  });
+
+  const csp = security.contentSecurityPolicy;
+  if (options.html && csp?.mode !== 'off') {
+    const header =
+      csp?.mode === 'enforce'
+        ? 'content-security-policy'
+        : 'content-security-policy-report-only';
+    const actual =
+      csp?.mode === 'enforce'
+        ? response.contentSecurityPolicy
+        : response.contentSecurityPolicyReportOnly;
+    const expectedDirectives = ['script-src', 'style-src', 'connect-src'];
+    const missingDirectives = expectedDirectives.filter(
+      directive => !actual?.includes(directive),
+    );
+
+    evidence.assertions.push({
+      type: 'security-csp',
+      header,
+      route,
+      mode: csp?.mode ?? 'report-only',
+      actual,
+      missingDirectives,
+      status: actual && missingDirectives.length === 0 ? 'pass' : 'fail',
+    });
+    assert(actual, \`\${app.id} \${route} is missing \${header}\`);
+    assert(
+      missingDirectives.length === 0,
+      \`\${app.id} \${route} CSP is missing \${missingDirectives.join(', ')}\`,
+    );
+  }
+
+  if (shouldNoindexUrl(publicUrl, security.noindex)) {
+    evidence.assertions.push({
+      type: 'security-noindex',
+      route,
+      actual: response.xRobotsTag,
+      status: response.xRobotsTag === 'noindex, nofollow' ? 'pass' : 'fail',
+    });
+    assert(
+      response.xRobotsTag === 'noindex, nofollow',
+      \`\${app.id} \${route} is missing noindex X-Robots-Tag\`,
+    );
+  }
+}
+
 async function validateApp(app, publicUrl) {
   const cloudflare = app.deploy?.cloudflare;
   const routes = cloudflare?.routes ?? {};
@@ -5233,6 +5517,9 @@ async function validateApp(app, publicUrl) {
     statusCode: ssr.status,
   });
   assert(ssr.ok, \`\${app.id} SSR route returned HTTP \${ssr.status}\`);
+  assertCloudflareSecurity(evidence, app, ssr, ssrRoute, publicUrl, {
+    html: true,
+  });
 
   const uiMarker = extractUiMarker(ssr.body);
   evidence.assertions.push({
@@ -5286,6 +5573,7 @@ async function validateApp(app, publicUrl) {
     manifest.ok,
     \`\${app.id} MF manifest returned HTTP \${manifest.status}\`,
   );
+  assertCloudflareSecurity(evidence, app, manifest, manifestRoute, publicUrl);
   evidence.assertions.push({
     type: 'mf-manifest-cors',
     route: manifestRoute,
@@ -5325,6 +5613,7 @@ async function validateApp(app, publicUrl) {
     statusCode: locale.status,
   });
   assert(locale.ok, \`\${app.id} locale JSON returned HTTP \${locale.status}\`);
+  assertCloudflareSecurity(evidence, app, locale, localeRoute, publicUrl);
   evidence.assertions.push({
     type: 'i18n-cors',
     route: localeRoute,

package/dist/types/locale/index.d.ts

@@ -1,3 +1,118 @@
-declare const i18n: any;
-declare const localeKeys: any;
+import { I18n } from '@modern-js/i18n-utils';
+declare const i18n: I18n;
+declare const localeKeys: {
+    prompt: {
+        projectName: string;
+    };
+    error: {
+        projectNameEmpty: string;
+        directoryExists: string;
+        invalidRouter: string;
+        invalidBffRuntime: string;
+        createFailed: string;
+    };
+    message: {
+        welcome: string;
+        success: string;
+        nextSteps: string;
+        step1: string;
+        step2: string;
+        step3: string;
+    };
+    help: {
+        title: string;
+        description: string;
+        usage: string;
+        usageExample: string;
+        options: string;
+        optionHelp: string;
+        optionVersion: string;
+        optionLang: string;
+        optionRouter: string;
+        optionBff: string;
+        optionBffRuntime: string;
+        optionTailwind: string;
+        optionWorkspace: string;
+        optionUltramodernWorkspace: string;
+        optionUltramodernPackageSource: string;
+        optionUltramodernPackageScope: string;
+        optionUltramodernPackageNamePrefix: string;
+        optionVertical: string;
+        optionSub: string;
+        examples: string;
+        example1: string;
+        example2: string;
+        example3: string;
+        example4: string;
+        example5: string;
+        example6: string;
+        example7: string;
+        example8: string;
+        example9: string;
+        example10: string;
+        example11: string;
+        example12: string;
+        moreInfo: string;
+    };
+    version: {
+        message: string;
+    };
+} | {
+    prompt: {
+        projectName: string;
+    };
+    error: {
+        projectNameEmpty: string;
+        directoryExists: string;
+        invalidRouter: string;
+        invalidBffRuntime: string;
+        createFailed: string;
+    };
+    message: {
+        welcome: string;
+        success: string;
+        nextSteps: string;
+        step1: string;
+        step2: string;
+        step3: string;
+    };
+    help: {
+        title: string;
+        description: string;
+        usage: string;
+        usageExample: string;
+        options: string;
+        optionHelp: string;
+        optionVersion: string;
+        optionLang: string;
+        optionRouter: string;
+        optionBff: string;
+        optionBffRuntime: string;
+        optionTailwind: string;
+        optionWorkspace: string;
+        optionUltramodernWorkspace: string;
+        optionUltramodernPackageSource: string;
+        optionUltramodernPackageScope: string;
+        optionUltramodernPackageNamePrefix: string;
+        optionVertical: string;
+        optionSub: string;
+        examples: string;
+        example1: string;
+        example2: string;
+        example3: string;
+        example4: string;
+        example5: string;
+        example6: string;
+        example7: string;
+        example8: string;
+        example9: string;
+        example10: string;
+        example11: string;
+        example12: string;
+        moreInfo: string;
+    };
+    version: {
+        message: string;
+    };
+};
 export { i18n, localeKeys };

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.2.0-ultramodern.102",
+  "version": "3.2.0-ultramodern.103",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.js",
   "bin": {
@@ -41,7 +41,7 @@
     "@types/node": "^25.9.1",
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "tsx": "^4.22.3",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.102"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.103"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,6 @@
     "start": "node ./dist/index.js"
   },
   "ultramodern": {
-    "frameworkVersion": "3.2.0-ultramodern.102"
+    "frameworkVersion": "3.2.0-ultramodern.103"
   }
 }

package/template/README.md

@@ -49,6 +49,7 @@ The default app is intentionally monolith-friendly:
 | --- | --- |
 | App routes | Locale-prefixed pages under `src/routes/[lang]` |
 | Copy | English and Czech resources in `config/public/locales` |
+| Web defaults | Local favicon/logo assets, localized metadata, semantic starter markup |
 | Styling | App-local CSS, with Tailwind files only when selected |
 | Server logic | Optional BFF entrypoints under `api/` |
 | Tests | Rstest smoke coverage in `tests/` |
@@ -66,6 +67,11 @@ real routes, actions, and API calls. Put user-visible text in
 `config/public/locales/<lang>/translation.json`, then render it through
 `react-i18next` or `@modern-js/plugin-i18n/runtime`.
 
+The starter keeps favicon and logo assets local in `config/favicon.svg` and
+`config/public/assets/ultramodern-logo.svg`. Replace those files when your app
+has product branding. The localized page title and description live in the same
+translation resources as the visible UI copy.
+
 Tune the preset in `modern.config.ts`. Production builds require
 `MODERN_PUBLIC_SITE_URL` so canonical and `hreflang` URLs use your deployed
 origin. The local fallback is `http://localhost:8080`.

package/template/config/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="UltraModern.js">
+  <rect width="64" height="64" rx="12" fill="#111827"/>
+  <path fill="#35d399" d="M14 17h9v21c0 5 3 8 9 8s9-3 9-8V17h9v22c0 11-8 18-18 18s-18-7-18-18V17Z"/>
+  <path fill="#ffffff" d="M28 17h8v25h-8z"/>
+</svg>

package/template/config/public/assets/ultramodern-logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-label="UltraModern.js logo">
+  <rect width="160" height="160" rx="28" fill="#111827"/>
+  <path fill="#35d399" d="M42 36h22v56c0 22 14 34 36 34s36-12 36-34V36h22v57c0 35-24 57-58 57S42 128 42 93V36Z"/>
+  <path fill="#ffffff" d="M76 36h20v74H76z"/>
+  <path fill="#8be8ff" d="M112 36h18v74h-18z"/>
+</svg>

package/template/config/public/locales/cs/translation.json

@@ -33,7 +33,12 @@
       "switcher": "Jazyk"
     },
     "logoAlt": "Logo UltraModern.js",
+    "meta": {
+      "description": "Lokalizovany starter aplikace UltraModern.js se silnymi vychozimi hodnotami pro komplexni produkty.",
+      "title": "UltraModern.js Starter"
+    },
     "name": "Jednoduchy starter aplikace",
+    "skipLink": "Preskocit na obsah",
     "title": "UltraModern.js Starter"
   }
 }

package/template/config/public/locales/en/translation.json

@@ -33,7 +33,12 @@
       "switcher": "Language"
     },
     "logoAlt": "UltraModern.js Logo",
+    "meta": {
+      "description": "A localized UltraModern.js app starter with strong defaults for complex products.",
+      "title": "UltraModern.js Starter"
+    },
     "name": "Simple app starter",
+    "skipLink": "Skip to content",
     "title": "UltraModern.js Starter"
   }
 }

package/template/modern.config.ts.handlebars

@@ -53,6 +53,12 @@ export default defineConfig(
 {{/if}}{{#if enableBff}}
         bffPlugin(),
 {{/if}}      ],
+      html: {
+        title: 'UltraModern.js Starter',
+        meta: {
+          viewport: 'width=device-width, initial-scale=1.0, viewport-fit=cover',
+        },
+      },
       source: {
         globalVars: {
           ULTRAMODERN_SITE_URL: siteUrl,

package/template/scripts/validate-ultramodern.mjs.handlebars

@@ -8,6 +8,9 @@ const packageSourcePath = path.resolve(
   process.cwd(),
   '.modernjs/ultramodern-package-source.json',
 );
+const readText = (relativePath) =>
+  fs.readFileSync(path.resolve(process.cwd(), relativePath), 'utf-8');
+const readJson = (relativePath) => JSON.parse(readText(relativePath));
 const readPnpmConfig = (key) => {
   const env = Object.fromEntries(
     Object.entries(process.env).filter(
@@ -109,6 +112,8 @@ const requiredPaths = [
 {{/if}}
   'config/public/locales/en/translation.json',
   'config/public/locales/cs/translation.json',
+  'config/favicon.svg',
+  'config/public/assets/ultramodern-logo.svg',
   'src/modern-app-env.d.ts',
   'src/routes/index.css',
   'src/routes/layout.tsx',
@@ -241,6 +246,11 @@ const packageJson = JSON.parse(
   fs.readFileSync(path.resolve(process.cwd(), 'package.json'), 'utf-8'),
 );
 const packageSource = JSON.parse(fs.readFileSync(packageSourcePath, 'utf-8'));
+const routePage = readText('src/routes/[lang]/page.tsx');
+const routeCss = readText('src/routes/index.css');
+const modernConfig = readText('modern.config.ts');
+const enLocale = readJson('config/public/locales/en/translation.json');
+const csLocale = readJson('config/public/locales/cs/translation.json');
 const unresolvedTemplateMarker = String.fromCodePoint(123, 123);
 if (JSON.stringify(packageJson).includes(unresolvedTemplateMarker)) {
   console.error('package.json contains unresolved template markers');
@@ -250,6 +260,89 @@ if (JSON.stringify(packageSource).includes(unresolvedTemplateMarker)) {
   console.error('package source metadata contains unresolved template markers');
   process.exit(1);
 }
+
+for (const [fileName, text] of [
+  ['src/routes/[lang]/page.tsx', routePage],
+  ['src/routes/index.css', routeCss],
+  ['modern.config.ts', modernConfig],
+]) {
+  if (text.includes('lf3-static.bytednsdoc.com')) {
+    console.error(`${fileName} must not depend on remote starter assets`);
+    process.exit(1);
+  }
+}
+
+for (const requiredSnippet of [
+  '<Helmet',
+  'htmlAttributes={{',
+  'dir: languageDirections[currentLanguage]',
+  'lang: currentLanguage',
+  '<title>{pageTitle}</title>',
+  '<meta name="description" content={pageDescription} />',
+  '<main id="starter-main" className="starter-main">',
+  '<h1 id="starter-heading" className="title">',
+  'src="/assets/ultramodern-logo.svg"',
+  'height={96}',
+  'width={96}',
+  '<span aria-hidden="true" className="arrow-right" />',
+]) {
+  if (!routePage.includes(requiredSnippet)) {
+    console.error(`Generated route page must retain starter correctness snippet: ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+
+for (const forbiddenSnippet of ['src="https://', '<div className="title">']) {
+  if (routePage.includes(forbiddenSnippet)) {
+    console.error(`Generated route page must not contain ${forbiddenSnippet}`);
+    process.exit(1);
+  }
+}
+
+for (const requiredSnippet of [
+  'width=device-width, initial-scale=1.0, viewport-fit=cover',
+  "title: 'UltraModern.js Starter'",
+]) {
+  if (!modernConfig.includes(requiredSnippet)) {
+    console.error(`modern.config.ts must retain ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+if (modernConfig.includes('user-scalable=no') || modernConfig.includes('maximum-scale')) {
+  console.error('modern.config.ts must not disable user zoom');
+  process.exit(1);
+}
+
+for (const requiredSnippet of [
+  'min-block-size: 100dvh',
+  'grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))',
+  ':focus-visible',
+  '@media (prefers-reduced-motion: reduce)',
+  '.skip-link',
+]) {
+  if (!routeCss.includes(requiredSnippet)) {
+    console.error(`Starter CSS must retain ${requiredSnippet}`);
+    process.exit(1);
+  }
+}
+if (routeCss.includes('width: 1100px') || /\.card:focus(?!-visible)/u.test(routeCss)) {
+  console.error('Starter CSS must not reintroduce fixed grid width or focus transform styling');
+  process.exit(1);
+}
+
+for (const [localeName, locale] of [
+  ['en', enLocale],
+  ['cs', csLocale],
+]) {
+  if (
+    typeof locale.home?.meta?.title !== 'string' ||
+    typeof locale.home?.meta?.description !== 'string' ||
+    typeof locale.home?.skipLink !== 'string'
+  ) {
+    console.error(`${localeName} locale must include starter metadata and skip-link copy`);
+    process.exit(1);
+  }
+}
 {{#unless isSubproject}}
 const skillsLock = JSON.parse(
   fs.readFileSync(path.resolve(process.cwd(), '.agents/skills-lock.json'), 'utf-8'),

package/template/src/routes/[lang]/page.tsx.handlebars

@@ -13,6 +13,10 @@ import { useTranslation } from 'react-i18next';
 const fallbackLanguage = 'en';
 const supportedLanguages = ['en', 'cs'] as const;
 type SupportedLanguage = (typeof supportedLanguages)[number];
+const languageDirections: Record<SupportedLanguage, 'ltr'> = {
+  cs: 'ltr',
+  en: 'ltr',
+};
 
 const isSupportedLanguage = (value: string): value is SupportedLanguage =>
   supportedLanguages.includes(value as SupportedLanguage);
@@ -52,6 +56,8 @@ const Index = () => {
   const { language } = useModernI18n();
   const location = useLocation();
   const currentLanguage = isSupportedLanguage(language) ? language : fallbackLanguage;
+  const pageTitle = t('home.meta.title');
+  const pageDescription = t('home.meta.description');
   const canonicalPath = localizedPath(location.pathname, currentLanguage);
   const suffix = locationSuffix(location);
   const languageOptions = supportedLanguages.map((code) => ({
@@ -81,12 +87,9 @@ const Index = () => {
 {{/if}}
   return (
     <div className="container-box">
-      <Helmet>
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
-        />
+      <Helmet htmlAttributes={{ dir: languageDirections[currentLanguage], lang: currentLanguage }}>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
         <link rel="canonical" href={absoluteUrl(canonicalPath)} />
         {supportedLanguages.map((code) => (
           <link
@@ -102,7 +105,10 @@ const Index = () => {
           rel="alternate"
         />
       </Helmet>
-      <main>
+      <a className="skip-link" href="#starter-main">
+        {t('home.skipLink')}
+      </a>
+      <header className="starter-header">
         <nav className="language-switcher" aria-label={t('home.language.switcher')}>
           {languageOptions.map((option) => (
             <a
@@ -114,24 +120,32 @@ const Index = () => {
             </a>
           ))}
         </nav>
-        <div className="title">
-          {t('home.title')}
+      </header>
+      <main id="starter-main" className="starter-main">
+        <section className="hero" aria-labelledby="starter-heading">
           <img
             alt={t('home.logoAlt')}
             className="logo"
-            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+            height={96}
+            src="/assets/ultramodern-logo.svg"
+            width={96}
           />
-          <p className="name">{t('home.name')}</p>
-        </div>
-        <p className="description{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
-          {t('home.description.intro')}{' '}
-          <code className="code">presetUltramodern(...)</code>{' '}
-          {t('home.description.afterPreset')}{' '}
-          <code className="code">modern.config.ts</code>{' '}
-          {t('home.description.afterConfig')}{' '}
-          <code className="code">pnpm run ultramodern:check</code>{' '}
-          {t('home.description.end')}
-        </p>
+          <div className="hero-copy">
+            <p className="name">{t('home.name')}</p>
+            <h1 id="starter-heading" className="title">
+              {t('home.title')}
+            </h1>
+            <p className="description{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
+              {t('home.description.intro')}{' '}
+              <code className="code">presetUltramodern(...)</code>{' '}
+              {t('home.description.afterPreset')}{' '}
+              <code className="code">modern.config.ts</code>{' '}
+              {t('home.description.afterConfig')}{' '}
+              <code className="code">pnpm run ultramodern:check</code>{' '}
+              {t('home.description.end')}
+            </p>
+          </div>
+        </section>
 {{#if useEffectBff}}
         <p className="description effect-message{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
           {t('home.bff.response')} <code className="code">{effectMessage}</code>
@@ -146,11 +160,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.guide.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.guide.body')}</p>
           </a>
@@ -162,11 +172,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.config.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.config.body')}</p>
           </a>
@@ -178,11 +184,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.gates.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.gates.body')}</p>
           </a>
@@ -194,11 +196,7 @@ const Index = () => {
           >
             <h2>
               {t('home.cards.bff.title')}
-              <img
-                alt=""
-                className="arrow-right"
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
-              />
+              <span aria-hidden="true" className="arrow-right" />
             </h2>
             <p>{t('home.cards.bff.body')}</p>
           </a>

package/template/src/routes/index.css.handlebars

@@ -1,129 +1,266 @@
 {{#if enableTailwind}}@import 'tailwindcss';
 
-{{/if}}html,
+{{/if}}:root {
+  color-scheme: light;
+  --starter-bg: #f3f6f4;
+  --starter-surface: #ffffff;
+  --starter-text: #14201b;
+  --starter-muted: #52625b;
+  --starter-border: #cfdad4;
+  --starter-accent: #087f5b;
+  --starter-accent-strong: #075f48;
+  --starter-focus: #0b7285;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  padding: 0;
   margin: 0;
   font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
     Arial,
     sans-serif;
-  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+  color: var(--starter-text);
+  background: linear-gradient(180deg, #ffffff 0%, var(--starter-bg) 100%);
 }
 
 p {
   margin: 0;
 }
 
-* {
+.container-box,
+.container-box *,
+.container-box *::before,
+.container-box *::after {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
 }
 
 .container-box {
-  min-height: 100vh;
-  max-width: 100%;
+  min-block-size: 100dvh;
+  inline-size: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-top: 10px;
+  padding: 1.25rem;
 }
 
-main {
-  flex: 1;
+.skip-link {
+  position: fixed;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
+  z-index: 1;
+  padding: 0.65rem 0.9rem;
+  color: #ffffff;
+  background: var(--starter-accent-strong);
+  border-radius: 6px;
+  transform: translateY(-150%);
+  transition: transform 0.15s ease;
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+.starter-header {
+  inline-size: min(100%, 72rem);
+  margin-inline: auto;
+}
+
+.language-switcher {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.language-switcher a {
+  min-block-size: 2.25rem;
+  padding: 0.55rem 0.8rem;
+  color: var(--starter-muted);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+
+.language-switcher a:hover {
+  color: var(--starter-text);
+  border-color: var(--starter-border);
+}
+
+.language-switcher a[aria-current='page'] {
+  color: var(--starter-accent-strong);
+  background: rgb(8 127 91 / 10%);
+  border-color: rgb(8 127 91 / 24%);
+}
+
+.starter-main {
+  flex: 1;
+  inline-size: min(100%, 72rem);
+  margin-inline: auto;
+  padding-block: 4rem 2rem;
+  display: grid;
+  gap: 3rem;
+  align-content: center;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 1.5rem;
   align-items: center;
 }
 
 .title {
-  display: flex;
-  margin: 4rem 0 4rem;
-  align-items: center;
-  font-size: 4rem;
-  font-weight: 600;
+  margin: 0.35rem 0 0;
+  font-size: 3.5rem;
+  line-height: 1;
+  font-weight: 750;
+  letter-spacing: 0;
+  text-wrap: balance;
 }
 
 .logo {
-  width: 6rem;
-  margin: 7px 0 0 1rem;
+  inline-size: 6rem;
+  block-size: 6rem;
+  border-radius: 1.25rem;
+  filter: drop-shadow(0 1rem 1.5rem rgb(17 24 39 / 18%));
 }
 
 .name {
-  color: #4ecaff;
+  color: var(--starter-accent-strong);
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
 .description {
-  text-align: center;
   line-height: 1.5;
-  font-size: 1.3rem;
-  color: #1b3a42;
-  margin-bottom: 5rem;
+  font-size: 1.15rem;
+  color: var(--starter-muted);
+  max-inline-size: 54rem;
+  margin-block-start: 1rem;
+  text-wrap: pretty;
+}
+
+.effect-message {
+  padding: 1rem;
+  background: var(--starter-surface);
+  border: 1px solid var(--starter-border);
+  border-radius: 8px;
 }
 
 .code {
-  background: #fafafa;
-  border-radius: 12px;
-  padding: 0.6rem 0.9rem;
-  font-size: 1.05rem;
+  display: inline-block;
+  padding: 0.15rem 0.35rem;
+  color: var(--starter-accent-strong);
+  background: rgb(8 127 91 / 10%);
+  border-radius: 6px;
+  font-size: 0.95em;
   font-family:
+    ui-monospace,
+    SFMono-Regular,
     Menlo,
     Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
     monospace;
 }
 
 .container-box .grid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
   align-items: center;
-  justify-content: center;
-  width: 1100px;
-  margin-top: 3rem;
+  gap: 1rem;
 }
 
 .card {
-  padding: 1.5rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  height: 100px;
+  gap: 0.75rem;
+  min-block-size: 9rem;
+  padding: 1.25rem;
   color: inherit;
   text-decoration: none;
-  transition: 0.15s ease;
-  width: 45%;
+  background: var(--starter-surface);
+  border: 1px solid var(--starter-border);
+  border-radius: 8px;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
 }
 
-.card:hover,
-.card:focus {
-  transform: scale(1.05);
+.card:hover {
+  border-color: rgb(8 127 91 / 45%);
+  transform: translateY(-0.125rem);
+}
+
+.skip-link:focus-visible,
+.language-switcher a:focus-visible,
+.card:focus-visible {
+  outline: 3px solid var(--starter-focus);
+  outline-offset: 3px;
 }
 
 .card h2 {
   display: flex;
   align-items: center;
-  font-size: 1.5rem;
+  gap: 0.55rem;
+  font-size: 1.25rem;
+  line-height: 1.2;
   margin: 0;
   padding: 0;
 }
 
 .card p {
-  opacity: 0.6;
+  opacity: 0.7;
   font-size: 0.9rem;
   line-height: 1.5;
-  margin-top: 1rem;
 }
 
 .arrow-right {
-  width: 1.3rem;
-  margin-left: 0.5rem;
-  margin-top: 3px;
+  flex: none;
+  inline-size: 0.65rem;
+  block-size: 0.65rem;
+  border-block-start: 2px solid currentColor;
+  border-inline-end: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+
+@media (max-width: 44rem) {
+  .container-box {
+    padding: 1rem;
+  }
+
+  .starter-main {
+    padding-block: 2rem 1rem;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .title {
+    font-size: 2.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .skip-link,
+  .card {
+    transition: none;
+  }
+
+  .card:hover {
+    transform: none;
+  }
 }

package/template/tests/ultramodern.contract.test.ts.handlebars

@@ -25,6 +25,63 @@ describe('generated UltraModern contract', () => {
 {{/unless}}
   });
 
+  test('keeps UltraModern starter web correctness defaults', () => {
+    const routePage = readText('src/routes/[lang]/page.tsx');
+    const routeCss = readText('src/routes/index.css');
+    const modernConfig = readText('modern.config.ts');
+    const enLocale = readJson<{
+      home?: {
+        meta?: {
+          description?: string;
+          title?: string;
+        };
+        skipLink?: string;
+      };
+    }>('config/public/locales/en/translation.json');
+
+    expect(fs.existsSync(path.join(root, 'config/favicon.svg'))).toBe(true);
+    expect(
+      fs.existsSync(
+        path.join(root, 'config/public/assets/ultramodern-logo.svg'),
+      ),
+    ).toBe(true);
+    expect(routePage).not.toContain('lf3-static.bytednsdoc.com');
+    expect(routePage).toContain('<Helmet');
+    expect(routePage).toContain('htmlAttributes={{');
+    expect(routePage).toContain('dir: languageDirections[currentLanguage]');
+    expect(routePage).toContain('lang: currentLanguage');
+    expect(routePage).toContain('<title>{pageTitle}</title>');
+    expect(routePage).toContain(
+      '<meta name="description" content={pageDescription} />',
+    );
+    expect(routePage).toContain(
+      '<main id="starter-main" className="starter-main">',
+    );
+    expect(routePage).toContain('<h1 id="starter-heading" className="title">');
+    expect(routePage).toContain('src="/assets/ultramodern-logo.svg"');
+    expect(routePage).toContain('height={96}');
+    expect(routePage).toContain('width={96}');
+    expect(routePage).toContain(
+      '<span aria-hidden="true" className="arrow-right" />',
+    );
+    expect(routePage).not.toContain('<div className="title">');
+    expect(modernConfig).toContain(
+      'width=device-width, initial-scale=1.0, viewport-fit=cover',
+    );
+    expect(modernConfig).not.toContain('user-scalable=no');
+    expect(modernConfig).not.toContain('maximum-scale');
+    expect(routeCss).toContain('min-block-size: 100dvh');
+    expect(routeCss).toContain(
+      'grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr))',
+    );
+    expect(routeCss).toContain(':focus-visible');
+    expect(routeCss).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(routeCss).not.toContain('width: 1100px');
+    expect(enLocale.home?.meta?.title).toBe('UltraModern.js Starter');
+    expect(enLocale.home?.meta?.description).toBeTruthy();
+    expect(enLocale.home?.skipLink).toBeTruthy();
+  });
+
   test('retains package-source metadata for generated Modern.js packages', () => {
     const packageJson = readJson<{
       dependencies?: Record<string, string>;

package/template/tsconfig.json

@@ -116,6 +116,6 @@
       }
     ]
   },
-  "include": ["src", "api", "shared", "config", "modern.config.ts"],
+  "include": ["src", "api", "shared", "config", "modern.config.ts", "server"],
   "exclude": ["**/node_modules"]
 }