@bleedingdev/modern-js-create 3.5.0-ultramodern.30 → 3.5.0-ultramodern.31

package/dist/esm/ultramodern-workspace/bridge-config.js

@@ -1,270 +1 @@
-const ultramodernBridgeCliFlags = {
-    enabled: '--bridge',
-    parentRoot: '--bridge-parent-root',
-    workspacePackage: '--bridge-workspace-package',
-    workspacePackageName: '--bridge-workspace-package-name',
-    testAlias: '--bridge-test-alias',
-    dependency: '--bridge-dependency',
-    lockfilePolicy: '--bridge-lockfile-policy',
-    gate: '--bridge-gate',
-    gateCwd: '--bridge-gate-cwd',
-    reactSingleton: '--bridge-react-singleton'
-};
-const ultramodernBridgeCliValueFlags = [
-    ultramodernBridgeCliFlags.parentRoot,
-    ultramodernBridgeCliFlags.workspacePackage,
-    ultramodernBridgeCliFlags.workspacePackageName,
-    ultramodernBridgeCliFlags.testAlias,
-    ultramodernBridgeCliFlags.dependency,
-    ultramodernBridgeCliFlags.lockfilePolicy,
-    ultramodernBridgeCliFlags.gate,
-    ultramodernBridgeCliFlags.gateCwd,
-    ultramodernBridgeCliFlags.reactSingleton
-];
-const ultramodernBridgeCliBooleanFlags = [
-    ultramodernBridgeCliFlags.enabled
-];
-const ultramodernBridgeLockfilePolicies = [
-    'nested',
-    'parent'
-];
-const defaultReactSingletons = [
-    'react',
-    'react-dom'
-];
-function hasUltramodernBridgeCliOptions(args) {
-    return args.some((arg)=>[
-            ...ultramodernBridgeCliBooleanFlags,
-            ...ultramodernBridgeCliValueFlags
-        ].some((flag)=>arg === flag || arg.startsWith(`${flag}=`)));
-}
-function parseUltramodernBridgeCliOptions(args) {
-    rejectBooleanFlagValues(args);
-    if (!hasUltramodernBridgeCliOptions(args)) return;
-    const parentRoot = readSingleValue(args, ultramodernBridgeCliFlags.parentRoot);
-    const lockfilePolicy = readSingleValue(args, ultramodernBridgeCliFlags.lockfilePolicy) ?? 'nested';
-    const workspacePackages = readWorkspacePackages(args);
-    const gates = readBridgeGates(args);
-    const reactSingletons = readCsvOptionValues(args, ultramodernBridgeCliFlags.reactSingleton);
-    return normalizeUltramodernBridgeConfig({
-        enabled: true,
-        parentRoot: requireNonEmptyValue(parentRoot, ultramodernBridgeCliFlags.parentRoot),
-        workspacePackages,
-        dependencies: readCsvOptionValues(args, ultramodernBridgeCliFlags.dependency),
-        lockfilePolicy: parseLockfilePolicy(lockfilePolicy),
-        gates,
-        reactSingletons: reactSingletons.length > 0 ? reactSingletons : void 0
-    });
-}
-function normalizeUltramodernBridgeConfig(bridge) {
-    if (!bridge || false === bridge.enabled) return;
-    const parentRoot = requireNonEmptyValue(bridge.parentRoot, 'bridge.parentRoot');
-    const workspacePackages = normalizeWorkspacePackages(bridge.workspacePackages);
-    const dependencies = uniqueNonEmptyValues(bridge.dependencies, 'bridge.dependencies');
-    const gates = normalizeBridgeGates(bridge.gates);
-    const reactSingletons = bridge.reactSingletons && bridge.reactSingletons.length > 0 ? uniqueNonEmptyValues(bridge.reactSingletons, 'bridge.reactSingletons') : [
-        ...defaultReactSingletons
-    ];
-    if (0 === workspacePackages.length) throw new Error('Bridge mode requires at least one bridge.workspacePackages entry.');
-    if (0 === dependencies.length) throw new Error('Bridge mode requires at least one explicit bridge.dependencies package name.');
-    if (0 === gates.length) throw new Error('Bridge mode requires at least one bridge.gates delegated parent command.');
-    validateParentPackageCoverage(workspacePackages, dependencies);
-    validateReactSingletons(reactSingletons);
-    return {
-        enabled: true,
-        parentRoot,
-        workspacePackages,
-        dependencies,
-        lockfilePolicy: parseLockfilePolicy(bridge.lockfilePolicy ?? 'nested'),
-        gates,
-        reactSingletons
-    };
-}
-function rejectBooleanFlagValues(args) {
-    for (const flag of ultramodernBridgeCliBooleanFlags)if (args.some((arg)=>arg.startsWith(`${flag}=`))) throw new Error(`${flag} does not accept a value.`);
-}
-function readRepeatedOptionValues(args, flag) {
-    const values = [];
-    for(let index = 0; index < args.length; index++){
-        const arg = args[index];
-        if (arg === flag) {
-            const value = args[index + 1];
-            if (!value || value.startsWith('-')) throw new Error(`${flag} requires a value.`);
-            values.push(value);
-            index += 1;
-            continue;
-        }
-        if (arg.startsWith(`${flag}=`)) values.push(arg.slice(flag.length + 1));
-    }
-    return values;
-}
-function readSingleValue(args, flag) {
-    const values = readRepeatedOptionValues(args, flag);
-    if (values.length > 1) throw new Error(`${flag} can be provided only once.`);
-    return values[0];
-}
-function readCsvOptionValues(args, flag) {
-    return readRepeatedOptionValues(args, flag).flatMap((value)=>value.split(',').map((entry)=>entry.trim()).filter(Boolean));
-}
-function requireNonEmptyValue(value, label) {
-    if ('string' != typeof value || 0 === value.trim().length) throw new Error(`${label} must be a non-empty string.`);
-    return value.trim();
-}
-function parseLockfilePolicy(value) {
-    if (!ultramodernBridgeLockfilePolicies.includes(value)) throw new Error(`${ultramodernBridgeCliFlags.lockfilePolicy} must be "nested" or "parent".`);
-    return value;
-}
-function readWorkspacePackages(args) {
-    const drafts = new Map();
-    const getDraft = (pattern)=>{
-        const normalizedPattern = requireNonEmptyValue(pattern, ultramodernBridgeCliFlags.workspacePackage);
-        const existing = drafts.get(normalizedPattern);
-        if (existing) return existing;
-        const draft = {
-            pattern: normalizedPattern,
-            packageNames: [],
-            testAliases: []
-        };
-        drafts.set(normalizedPattern, draft);
-        return draft;
-    };
-    for (const pattern of readRepeatedOptionValues(args, ultramodernBridgeCliFlags.workspacePackage))getDraft(pattern);
-    for (const value of readRepeatedOptionValues(args, ultramodernBridgeCliFlags.workspacePackageName)){
-        const { left: pattern, right: packageNames } = splitAssignment(value, ultramodernBridgeCliFlags.workspacePackageName, '<pattern>=<package-name>[,<package-name>]');
-        getDraft(pattern).packageNames.push(...packageNames.split(',').map((packageName)=>packageName.trim()).filter(Boolean));
-    }
-    for (const value of readRepeatedOptionValues(args, ultramodernBridgeCliFlags.testAlias)){
-        const separator = value.indexOf(':');
-        if (-1 === separator) throw new Error(`${ultramodernBridgeCliFlags.testAlias} must use <pattern>:<alias>=<target>.`);
-        const pattern = value.slice(0, separator);
-        const aliasDefinition = value.slice(separator + 1);
-        const { left: alias, right: target } = splitAssignment(aliasDefinition, ultramodernBridgeCliFlags.testAlias, '<pattern>:<alias>=<target>');
-        getDraft(pattern).testAliases.push({
-            alias: requireNonEmptyValue(alias, `${ultramodernBridgeCliFlags.testAlias} alias`),
-            target: requireNonEmptyValue(target, `${ultramodernBridgeCliFlags.testAlias} target`)
-        });
-    }
-    return normalizeWorkspacePackages([
-        ...drafts.values()
-    ]);
-}
-function readBridgeGates(args) {
-    const gates = new Map();
-    const getGate = (name)=>{
-        const normalizedName = requireNonEmptyValue(name, `${ultramodernBridgeCliFlags.gate} name`);
-        const existing = gates.get(normalizedName);
-        if (existing) return existing;
-        const draft = {
-            name: normalizedName
-        };
-        gates.set(normalizedName, draft);
-        return draft;
-    };
-    for (const value of readRepeatedOptionValues(args, ultramodernBridgeCliFlags.gate)){
-        const { left: name, right: command } = splitAssignment(value, ultramodernBridgeCliFlags.gate, '<name>=<command>');
-        getGate(name).command = requireNonEmptyValue(command, `${ultramodernBridgeCliFlags.gate} command`);
-    }
-    for (const value of readRepeatedOptionValues(args, ultramodernBridgeCliFlags.gateCwd)){
-        const { left: name, right: cwd } = splitAssignment(value, ultramodernBridgeCliFlags.gateCwd, '<name>=<cwd>');
-        getGate(name).cwd = requireNonEmptyValue(cwd, `${ultramodernBridgeCliFlags.gateCwd} cwd`);
-    }
-    const missingCommand = [
-        ...gates.values()
-    ].find((gate)=>!gate.command);
-    if (missingCommand) throw new Error(`${ultramodernBridgeCliFlags.gateCwd} references "${missingCommand.name}" without a matching ${ultramodernBridgeCliFlags.gate}.`);
-    return normalizeBridgeGates([
-        ...gates.values()
-    ].map((gate)=>({
-            name: gate.name,
-            command: gate.command,
-            cwd: gate.cwd
-        })));
-}
-function splitAssignment(value, flag, usage) {
-    const separator = value.indexOf('=');
-    if (-1 === separator) throw new Error(`${flag} must use ${usage}.`);
-    return {
-        left: value.slice(0, separator),
-        right: value.slice(separator + 1)
-    };
-}
-function normalizeWorkspacePackages(workspacePackages) {
-    return workspacePackages.map((entry, index)=>{
-        const label = `bridge.workspacePackages[${index}]`;
-        const packageNames = entry.packageNames && entry.packageNames.length > 0 ? uniqueNonEmptyValues(entry.packageNames, `${label}.packageNames`) : void 0;
-        const testAliases = entry.testAliases && entry.testAliases.length > 0 ? normalizeTestAliases(entry.testAliases, label) : void 0;
-        return {
-            pattern: requireNonEmptyValue(entry.pattern, `${label}.pattern`),
-            ...packageNames ? {
-                packageNames
-            } : {},
-            ...testAliases ? {
-                testAliases
-            } : {}
-        };
-    });
-}
-function validateParentPackageCoverage(workspacePackages, dependencies) {
-    const declaredPackages = new Set();
-    for (const [index, entry] of workspacePackages.entries()){
-        const label = `bridge.workspacePackages[${index}]`;
-        const packageNames = entry.packageNames ?? [];
-        if (0 === packageNames.length && (entry.testAliases ?? []).length > 0) throw new Error(`${label}.packageNames must declare the parent package names covered by "${entry.pattern}" before testAliases can be checked.`);
-        for (const packageName of packageNames)declaredPackages.add(packageName);
-        for (const alias of entry.testAliases ?? []){
-            if (!packageNames.some((packageName)=>aliasMatchesPackage(alias.alias, packageName))) throw new Error(`${label}.testAliases entry "${alias.alias}" must match one of ${label}.packageNames.`);
-            if (pointsAtBuildOutput(alias.target)) throw new Error(`${label}.testAliases target "${alias.target}" must point at source files, not dist output.`);
-        }
-    }
-    const missingDependencies = dependencies.filter((dependency)=>!declaredPackages.has(dependency));
-    if (declaredPackages.size > 0 && missingDependencies.length > 0) throw new Error(`Bridge mode dependencies must be declared by bridge.workspacePackages[].packageNames: ${missingDependencies.join(', ')}.`);
-}
-function aliasMatchesPackage(alias, packageName) {
-    return alias === packageName || alias.startsWith(`${packageName}/`);
-}
-function pointsAtBuildOutput(target) {
-    return target.split(/[\\/]/u).includes('dist');
-}
-function validateReactSingletons(reactSingletons) {
-    const missing = defaultReactSingletons.filter((packageName)=>!reactSingletons.includes(packageName));
-    if (missing.length > 0) throw new Error(`Bridge mode React singleton/dedupe declarations must include ${defaultReactSingletons.join(' and ')}. Missing: ${missing.join(', ')}.`);
-}
-function normalizeTestAliases(testAliases, parentLabel) {
-    const aliases = new Map();
-    for (const [index, alias] of testAliases.entries()){
-        const label = `${parentLabel}.testAliases[${index}]`;
-        const normalizedAlias = requireNonEmptyValue(alias.alias, `${label}.alias`);
-        aliases.set(normalizedAlias, {
-            alias: normalizedAlias,
-            target: requireNonEmptyValue(alias.target, `${label}.target`)
-        });
-    }
-    return [
-        ...aliases.values()
-    ];
-}
-function normalizeBridgeGates(gates) {
-    const normalized = new Map();
-    for (const [index, gate] of gates.entries()){
-        const label = `bridge.gates[${index}]`;
-        const name = requireNonEmptyValue(gate.name, `${label}.name`);
-        normalized.set(name, {
-            name,
-            command: requireNonEmptyValue(gate.command, `${label}.command`),
-            ...gate.cwd ? {
-                cwd: requireNonEmptyValue(gate.cwd, `${label}.cwd`)
-            } : {}
-        });
-    }
-    return [
-        ...normalized.values()
-    ];
-}
-function uniqueNonEmptyValues(values, label) {
-    const unique = new Set();
-    for (const [index, value] of values.entries())unique.add(requireNonEmptyValue(value, `${label}[${index}]`));
-    return [
-        ...unique
-    ];
-}
-export { hasUltramodernBridgeCliOptions, normalizeUltramodernBridgeConfig, parseUltramodernBridgeCliOptions, ultramodernBridgeCliBooleanFlags, ultramodernBridgeCliFlags, ultramodernBridgeCliValueFlags, ultramodernBridgeLockfilePolicies };
+export * from "./bridge-config/index.js";

package/dist/esm/ultramodern-workspace/delivery-unit-sync.js

@@ -1,25 +1,12 @@
 import node_fs from "node:fs";
 import node_path from "node:path";
+import { parseArgs } from "node:util";
 import { readUltramodernConfig, workspaceAppsFromToolingConfig } from "../ultramodern-tooling/config.js";
 import { createBackendFederationContract } from "./backend-federation.js";
 import { createDeliveryUnitRecord, deliveryUnitContractBlock } from "./delivery-unit.js";
 import { ULTRAMODERN_CONFIG_PATH } from "./descriptors.js";
-import { createUltramodernBuildModule } from "./module-federation.js";
+import { createUltramodernBuildArtifactJson, createUltramodernBuildModule } from "./module-federation.js";
 const REFERENCE_TOPOLOGY_PATH = 'topology/reference-topology.json';
-function readOption(args, name) {
-    const prefix = `${name}=`;
-    const inline = args.find((arg)=>arg.startsWith(prefix));
-    if (inline) {
-        const value = inline.slice(prefix.length);
-        if (!value) throw new Error(`${name} needs a value.`);
-        return value;
-    }
-    const index = args.indexOf(name);
-    if (-1 === index) return;
-    const value = args[index + 1];
-    if (!value || value.startsWith('--')) throw new Error(`${name} needs a value.`);
-    return value;
-}
 function isPlainObject(value) {
     return 'object' == typeof value && null !== value && !Array.isArray(value);
 }
@@ -44,7 +31,21 @@ function stampDeliveryUnitIdentity(entry, scope, app) {
     } else entry.backendFederation = createBackendFederationContract(scope, app);
 }
 function runSyncDeliveryUnit(args, context) {
-    if (args.includes('--help') || args.includes('-h')) {
+    const parsed = parseArgs({
+        args,
+        options: {
+            help: {
+                type: 'boolean',
+                short: 'h'
+            },
+            workspace: {
+                type: 'string'
+            }
+        },
+        strict: true,
+        allowPositionals: false
+    });
+    if (parsed.values.help) {
         process.stdout.write(`Usage:
   modern-js-create ultramodern sync-delivery-unit [--workspace <dir>]
 
@@ -54,12 +55,12 @@ through framework tooling only. For each full-stack vertical it writes the
 delivery-unit block into .modernjs/ultramodern.json topology.apps[] and
 topology/reference-topology.json verticals[] (plus backendFederation.deliveryUnit
 and backendFederation.versionBoundary.identityRoot) and regenerates
-verticals/<id>/shared/ultramodern-build.ts. Idempotent: a second run writes
+verticals/<id>/shared/ultramodern-build.{json,ts}. Idempotent: a second run writes
 nothing.
 `);
         return 0;
     }
-    const workspaceOverride = readOption(args, '--workspace');
+    const workspaceOverride = parsed.values.workspace;
     const workspaceRoot = workspaceOverride ? node_path.resolve(context.invocationCwd, workspaceOverride) : context.workspaceRoot;
     const compactPath = node_path.join(workspaceRoot, ULTRAMODERN_CONFIG_PATH);
     if (!node_fs.existsSync(compactPath)) throw new Error(`Missing ${ULTRAMODERN_CONFIG_PATH}. sync-delivery-unit needs the compact UltraModern config; run \`modern-js-create ultramodern migrate-strict-effect\` first.`);
@@ -93,9 +94,10 @@ nothing.
         track(REFERENCE_TOPOLOGY_PATH, writeJsonIfChanged(topologyPath, topology));
     }
     for (const app of apiApps){
-        const relativePath = node_path.join(app.directory, 'shared/ultramodern-build.ts');
-        const changed = writeTextIfChanged(node_path.join(workspaceRoot, relativePath), createUltramodernBuildModule(scope, app));
-        track(relativePath, changed);
+        const buildModulePath = node_path.join(app.directory, 'shared/ultramodern-build.ts');
+        const buildArtifactPath = node_path.join(app.directory, 'shared/ultramodern-build.json');
+        track(buildModulePath, writeTextIfChanged(node_path.join(workspaceRoot, buildModulePath), createUltramodernBuildModule()));
+        track(buildArtifactPath, writeTextIfChanged(node_path.join(workspaceRoot, buildArtifactPath), createUltramodernBuildArtifactJson(scope, app)));
     }
     if (0 === written.length) process.stdout.write('[ultramodern] sync-delivery-unit: already in sync; no files written.\n');
     else {

package/dist/esm/ultramodern-workspace/delivery-unit.js

@@ -1,31 +1,21 @@
 import node_crypto from "node:crypto";
+import { DELIVERY_UNIT_DEPLOY_PROFILE, DELIVERY_UNIT_KIND, DELIVERY_UNIT_SCHEMA_VERSION, deliveryUnitContractBlock } from "@modern-js/utils/universal";
 import { packageName } from "./naming.js";
-const DELIVERY_UNIT_SCHEMA_VERSION = 1;
+const deliveryUnitGenerationSeed = `${Date.now()}:${node_crypto.randomUUID()}`;
 function createBuildMarker(scope, app) {
-    return node_crypto.createHash('sha256').update(`${scope}:${app.packageSuffix}:${app.id}:0.1.0`).digest('hex').slice(0, 16);
-}
-function deliveryUnitContractBlock(record) {
-    return {
-        schemaVersion: record.schemaVersion,
-        kind: record.kind,
-        unitId: record.unitId,
-        packageName: record.packageName,
-        version: record.version,
-        buildMarker: record.buildMarker,
-        sourceRevision: record.sourceRevision
-    };
+    return node_crypto.createHash('sha256').update(`${deliveryUnitGenerationSeed}:${scope}:${app.packageSuffix}:${app.id}:0.1.0`).digest('hex').slice(0, 16);
 }
 function createDeliveryUnitRecord(scope, app) {
     return {
         schemaVersion: DELIVERY_UNIT_SCHEMA_VERSION,
-        kind: 'microvertical-delivery-unit',
+        kind: DELIVERY_UNIT_KIND,
         unitId: `${scope}/${app.domain ?? app.id}`,
         appId: app.id,
         packageName: packageName(scope, app.packageSuffix),
         version: '0.1.0',
         sourceRevision: 'workspace',
         buildMarker: createBuildMarker(scope, app),
-        deployProfile: 'cloudflare-ssr-mf-effect-v1'
+        deployProfile: DELIVERY_UNIT_DEPLOY_PROFILE
     };
 }
-export { DELIVERY_UNIT_SCHEMA_VERSION, createBuildMarker, createDeliveryUnitRecord, deliveryUnitContractBlock };
+export { createBuildMarker, createDeliveryUnitRecord, deliveryUnitContractBlock };

package/dist/esm/ultramodern-workspace/demo-components.js

@@ -1,58 +1,32 @@
 import { appHasApi, remoteDependencyAlias, resolveApiStem, shellApp } from "./descriptors.js";
+import { renderFileTemplate } from "./fs-io.js";
 import { createTw, packageName, tailwindPrefixForApp, toPascalCase } from "./naming.js";
 function createShellPage(remotes = []) {
     const tw = createTw(tailwindPrefixForApp(shellApp));
     const remoteCount = String(remotes.length);
-    return `import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
-import ShellFrame from '../shell-frame';
-import { UltramodernRouteHead } from '../ultramodern-route-head';
-import { VerticalShowcase } from '../vertical-components';
-import { ultramodernUiMarker } from '../../ultramodern-build';
-
-export default function ShellHome() {
-  const { t } = useModernI18n();
-
-  return (
-    <ShellFrame>
-      <UltramodernRouteHead />
-      <section className="${tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14')}">
-        <div className="${tw('min-w-0')}">
-          <p className="${tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800')}">{t('shell.hero.eyebrow')}</p>
-          <h1 className="${tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl')}">{t('shell.title')}</h1>
-          <p className="${tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600')}">{t('shell.hero.lede')}</p>
-          <div className="${tw('mt-7 flex flex-wrap gap-3')}">
-            <Link className="${tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10')}" to="/">
-              {t('shell.hero.primary')}
-            </Link>
-            <span className="${tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10')}">
-              {t('shell.hero.secondary')}
-            </span>
-          </div>
-        </div>
-        <div className="${tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15')}">
-          <div className="${tw('grid gap-4 sm:grid-cols-2')}">
-            <article className="${tw('rounded-2xl bg-emerald-50 p-5')}">
-              <span className="${tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800')}">{t('shell.hero.cardOneKicker')}</span>
-              <strong className="${tw('mt-3 block text-3xl font-black text-stone-950')}">${remoteCount}</strong>
-              <p className="${tw('mt-2 text-sm font-semibold text-stone-600')}">{t('shell.hero.cardOne')}</p>
-            </article>
-            <article className="${tw('rounded-2xl bg-amber-50 p-5')}">
-              <span className="${tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800')}">{t('shell.hero.cardTwoKicker')}</span>
-              <strong className="${tw('mt-3 block text-3xl font-black text-stone-950')}">SSR</strong>
-              <p className="${tw('mt-2 text-sm font-semibold text-stone-600')}">{t('shell.hero.cardTwo')}</p>
-            </article>
-          </div>
-        </div>
-      </section>
-      <VerticalShowcase />
-      <p className="${tw('sr-only')}" data-testid="ultramodern-preset">presetUltramodern workspace</p>
-      <p className="${tw('sr-only')}" data-build-marker={ultramodernUiMarker.build} data-testid="ultramodern-ui-marker">
-        {ultramodernUiMarker.appId}:{ultramodernUiMarker.version}
-      </p>
-    </ShellFrame>
-  );
-}
-`;
+    return renderFileTemplate('workspace/apps/shell-super-app/src/routes/[lang]/page.tsx', {
+        value0: tw('mx-auto grid max-w-7xl items-center gap-8 py-8 md:grid-cols-[0.9fr_1.1fr] lg:gap-14'),
+        value1: tw('min-w-0'),
+        value2: tw('text-xs font-black uppercase tracking-[0.18em] text-emerald-800'),
+        value3: tw('mt-3 max-w-3xl text-5xl font-black leading-none tracking-normal text-stone-950 md:text-7xl'),
+        value4: tw('mt-5 max-w-2xl text-lg leading-8 text-stone-600'),
+        value5: tw('mt-7 flex flex-wrap gap-3'),
+        value6: tw('inline-flex min-h-11 items-center justify-center rounded-full bg-emerald-800 px-5 font-bold text-white shadow-lg shadow-stone-900/10'),
+        value7: tw('inline-flex min-h-11 items-center justify-center rounded-full border border-stone-900/15 bg-white/90 px-5 font-bold text-stone-950 shadow-lg shadow-stone-900/10'),
+        value8: tw('rounded-3xl bg-white/90 p-6 shadow-2xl shadow-stone-900/15'),
+        value9: tw('grid gap-4 sm:grid-cols-2'),
+        value10: tw('rounded-2xl bg-emerald-50 p-5'),
+        value11: tw('text-sm font-black uppercase tracking-[0.16em] text-emerald-800'),
+        value12: tw('mt-3 block text-3xl font-black text-stone-950'),
+        value13: remoteCount,
+        value14: tw('mt-2 text-sm font-semibold text-stone-600'),
+        value15: tw('rounded-2xl bg-amber-50 p-5'),
+        value16: tw('text-sm font-black uppercase tracking-[0.16em] text-amber-800'),
+        value17: tw('mt-3 block text-3xl font-black text-stone-950'),
+        value18: tw('mt-2 text-sm font-semibold text-stone-600'),
+        value19: tw('sr-only'),
+        value20: tw('sr-only')
+    });
 }
 function createShellRemoteComponents(scope, remotes = []) {
     const tw = createTw(tailwindPrefixForApp(shellApp));
@@ -62,150 +36,34 @@ function createShellRemoteComponents(scope, remotes = []) {
         const componentName = `${toPascalCase(remote.id)}Widget`;
         return `const ${componentName} = createHydratedRemote(${componentName}Server, '${remoteDependencyAlias(remote)}/Widget');`;
     }).join('\n');
-    const federationImports = widgetRemotes.length > 0 ? `import {
-  classifyModuleFederationFallback,
-  createModuleFederationFallbackTelemetry,
-  emitModuleFederationFallbackTelemetry,
-  toModuleFederationFallbackAttributes,
-} from '@modern-js/runtime/module-federation';
-import { createLazyComponent } from '@module-federation/bridge-react';
-import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
-import { Suspense, useEffect, useMemo, useState } from 'react';
-import type { ComponentType } from 'react';
-${serverImports}
-` : '';
-    const federationHelpers = widgetRemotes.length > 0 ? `interface RemoteComponentModule {
-  default: ComponentType;
-}
-
-const loadRemoteComponent = (specifier: string) =>
-  loadRemote<RemoteComponentModule>(specifier) as Promise<RemoteComponentModule>;
-
-const createRemoteFallback = (specifier: string) =>
-  ({ error }: { error: Error }) => {
-    const { t } = useModernI18n();
-    const classification = classifyModuleFederationFallback(error);
-    const telemetryEntry =
-      typeof window === 'undefined' ? undefined : window.location.href;
-    const telemetry = createModuleFederationFallbackTelemetry({
-      appName: '${shellApp.id}',
-      classification,
-      ...(telemetryEntry === undefined ? {} : { entry: telemetryEntry }),
-      error,
-      eventName: 'mf.client.remote.fallback',
-      exportName: 'default',
-      phase: 'load',
-      remote: specifier,
-      status: 'degraded',
-    });
-
-    useEffect(() => {
-      void emitModuleFederationFallbackTelemetry({
-        appName: telemetry.appName,
-        classification,
-        ...(telemetry.entry === undefined ? {} : { entry: telemetry.entry }),
-        error,
-        eventName: telemetry.eventName,
-        exportName: 'default',
-        metadata: telemetry.metadata,
-        phase: telemetry.phase,
-        remote: specifier,
-        status: 'degraded',
-      });
-    }, [classification, error, telemetry]);
-
-    return <div className="${tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')}" data-remote-error={error.name} {...toModuleFederationFallbackAttributes(telemetry)}>{t('shell.remoteUnavailable')}</div>;
-  };
-
-const createHydratedRemote =
-  (ServerComponent: ComponentType, specifier: string) =>
-  function HydratedRemote() {
-    const [hydrated, setHydrated] = useState(false);
-
-    useEffect(() => {
-      setHydrated(true);
-    }, []);
-
-    const FederatedComponent = useMemo(() => {
-      if (!hydrated) {
-        return null;
-      }
-      const instance = getInstance();
-      if (instance === null || instance === undefined) {
-        return null;
-      }
-      return createLazyComponent({
-        export: 'default',
-        fallback: createRemoteFallback(specifier),
-        instance,
-        loader: () => loadRemoteComponent(specifier),
-        loading: <ServerComponent />,
-      });
-    }, [hydrated]);
-
-    if (FederatedComponent === null) {
-      return <ServerComponent />;
-    }
-
-    return (
-      <Suspense fallback={<ServerComponent />}>
-        <FederatedComponent />
-      </Suspense>
-    );
-  };
-` : '';
+    const federationImports = widgetRemotes.length > 0 ? renderFileTemplate('workspace/apps/shell-super-app/src/routes/vertical-components.imports.tsx', {
+        value0: serverImports
+    }) : '';
+    const federationHelpers = widgetRemotes.length > 0 ? renderFileTemplate('workspace/apps/shell-super-app/src/routes/vertical-components.helpers.tsx', {
+        value0: shellApp.id,
+        value1: tw('rounded-xl border border-red-900/20 bg-red-50 px-4 py-3 text-sm font-semibold text-red-900')
+    }) : '';
     const showcaseItems = widgetRemotes.map((remote)=>{
         const componentName = `${toPascalCase(remote.id)}Widget`;
         return `          <${componentName} key="${remote.id}" />`;
     }).join('\n');
     const remoteCount = String(widgetRemotes.length);
-    return `${federationImports}import { Link, useModernI18n } from '@modern-js/plugin-i18n/runtime';
-
-	const widgetCount = Number('${remoteCount}');
-
-	${federationHelpers}
-	${hydratedExports}
-
-	export const Header = () => {
-  const { t } = useModernI18n();
-
-  return (
-    <header className="${tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1')}" data-modern-boundary-id="${shellApp.mfName}" data-modern-mf-expose="shell/Header">
-      <Link className="${tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline')}" to="/">{t('shell.title')}</Link>
-    </header>
-  );
-};
-
-export const StatusBadge = () => {
-  const { t } = useModernI18n();
-
-  return (
-    <span className="${tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5')}">
-      {widgetCount} {t('shell.hero.cardOneKicker')}
-    </span>
-  );
-};
-
-export const VerticalShowcase = () => {
-  const { t } = useModernI18n();
-
-  if (widgetCount === 0) {
-    return (
-      <section className="${tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10')}">
-        <p className="${tw('text-lg font-bold text-stone-700')}">{t('shell.hero.empty')}</p>
-      </section>
-    );
-  }
-
-  return (
-    <section className="${tw('mx-auto mt-12 max-w-7xl')}" data-modern-boundary-id="${shellApp.mfName}">
-      <div className="${tw('grid gap-4 md:grid-cols-2')}">
-${showcaseItems}
-      </div>
-    </section>
-  );
-};
-`;
+    return renderFileTemplate('workspace/apps/shell-super-app/src/routes/vertical-components.tsx', {
+        value0: federationImports,
+        value1: remoteCount,
+        value2: federationHelpers,
+        value3: hydratedExports,
+        value4: tw('flex min-w-0 flex-wrap items-center gap-x-8 gap-y-2 md:flex-1'),
+        value5: shellApp.mfName,
+        value6: tw('whitespace-nowrap text-xl font-black tracking-normal text-stone-950 no-underline'),
+        value7: tw('inline-flex h-10 shrink-0 items-center justify-center rounded-full border border-stone-900/15 bg-white px-4 text-sm font-extrabold text-stone-950 shadow-lg shadow-stone-900/5'),
+        value8: tw('mx-auto mt-12 max-w-7xl rounded-2xl bg-white/90 p-6 shadow-xl shadow-stone-900/10'),
+        value9: tw('text-lg font-bold text-stone-700'),
+        value10: tw('mx-auto mt-12 max-w-7xl'),
+        value11: shellApp.mfName,
+        value12: tw('grid gap-4 md:grid-cols-2'),
+        value13: showcaseItems
+    });
 }
 function createRemotePage(app) {
     const tw = createTw(tailwindPrefixForApp(app));