@ostack.tech/ui-kform-scaffolder 0.3.4 → 0.4.0

package/dist/ostack-ui-kform-scaffolder.js

@@ -139,78 +139,55 @@ function scaffoldIssueMessagesConstant(schematic, data) {
     export const ${constantCase(schematic.name)}_ISSUE_MESSAGES: Record<string, IssueMessagesByCode> = {};
   `);
 }
-function scaffoldFormPages(schematic, data) {
+function scaffoldPageComponents(schematic, data) {
   const layout = reactAppLayout(schematic, {
     kmpModuleName: `${kebabCase(schematic.name)}-shared`,
     ...data
   });
   for (const annex of layout) {
     for (const formPage of annex.formPages) {
-      scaffoldFormPage(formPage.schematic, formPage.data);
+      scaffoldPageComponent(formPage.schematic, formPage.data);
       if (formPage.data.currentPath !== "/") {
         scaffoldIssueMessages(formPage.schematic, formPage.data);
       }
     }
   }
 }
-function scaffoldFormPage(schematic, data) {
+function scaffoldPageComponent(schematic, data) {
   const fileName = joinPaths(data.currentDir, `${schematic.name}.tsx`);
   let file = data.files.get(fileName);
   if (!file) {
     data.files.set(fileName, file = tsFile());
   }
-  scaffoldFormPageComponent(schematic, {
+  scaffoldPageComponentDeclarations(schematic, {
     kmpModuleName: `${kebabCase(data.rootSchematic.name)}-shared`,
     ...data,
     currentFile: file
   });
 }
-function scaffoldFormPageComponent(schematic, data) {
-  data.currentFile.imports.push(
-    { moduleName: "@ostack.tech/ui-kform", name: "FormPage" },
-    { moduleName: "@ostack.tech/ui", name: "Grid" }
-  );
-  if (data.currentPath !== "/") {
-    data.currentFile.imports.push({
-      moduleName: `./${schematic.name}IssueMessages.tsx`,
-      name: `${constantCase(schematic.name)}_ISSUE_MESSAGES`
-    });
-  }
-  let pathString;
-  let preamble;
-  const splitPath = data.currentPath.split("/");
-  if (splitPath.some((fragment) => fragment === "*")) {
-    data.currentFile.imports.push({
-      moduleName: "react-router",
-      name: "useParams"
-    });
-    pathString = `{\`${splitPath.map((f) => f === "*" ? "${id}" : f).join("/")}\`}`;
-    preamble = "\n  const { id } = useParams();\n";
-  } else {
-    pathString = `"${data.currentPath}"`;
-    preamble = "";
-  }
-  const pageComponent = code`
-    export function ${schematic.name}() {${preamble}
+function scaffoldPageComponentDeclarations(schematic, data) {
+  data.currentFile.imports.push({
+    moduleName: "@ostack.tech/ui",
+    name: "Grid"
+  });
+  data.currentFile.declarations.push(code`
+    export function ${schematic.name}() {
       return (
-        <FormPage${data.currentPath === "/" ? "" : ` path=${pathString} issueMessages={${constantCase(schematic.name)}_ISSUE_MESSAGES}`}>
-          <Grid container>
-            ${schematic.children.map(
+        <Grid container>
+          ${schematic.children.map(
     (child) => code`
-                    <Grid xs={12}>
-                      ${scaffoldField(child, {
+                  <Grid xs={12}>
+                    ${scaffoldField(child, {
       ...data,
       currentPath: child.childName
     })}
-                    </Grid>
-                  `
+                  </Grid>
+                `
   ).join("\n\n")}
-          </Grid>
-        </FormPage>
+        </Grid>
       );
     }
-  `;
-  data.currentFile.declarations.push(pageComponent);
+  `);
 }
 function scaffoldField(schematic, data) {
   const schematicKind = data.schematicKinds.get(
@@ -753,6 +730,7 @@ function layoutAnnex(schematic, data) {
   }
   return { schematic, data, formPages };
 }
+const DEFAULT_ACTIVE_PATH_SEARCH_PARAM = "activePath";
 function scaffoldAppComponent(schematic, data) {
   const fileName = joinPaths(data.currentDir, `${schematic.name}App.tsx`);
   let file = data.files.get(fileName);
@@ -768,10 +746,18 @@ function scaffoldAppComponent(schematic, data) {
 }
 function scaffoldAppComponentFile(schematic, data) {
   const localeVar = (data.defaultLocale ?? DEFAULT_LOCALE).replaceAll("-", "");
+  const activePathSearchParam = data.activePathSearchParam ?? DEFAULT_ACTIVE_PATH_SEARCH_PARAM;
   data.currentFile.imports.push(
     { moduleName: "@ostack.tech/kform", name: "ktMapToObject" },
+    { moduleName: "@ostack.tech/ui", name: "useSearchParam" },
     { moduleName: "@ostack.tech/ui-kform", name: "FormApp" },
     { moduleName: "@ostack.tech/ui-kform", name: localeVar },
+    { moduleName: "@ostack.tech/ui-kform", name: "TopBar" },
+    { moduleName: "@ostack.tech/ui-kform", name: "TopBarActions" },
+    { moduleName: "@ostack.tech/ui-kform", name: "Annexes" },
+    { moduleName: "@ostack.tech/ui-kform", name: "Annex" },
+    { moduleName: "@ostack.tech/ui-kform", name: "FormPages" },
+    { moduleName: "@ostack.tech/ui-kform", name: "IssuesPanel" },
     { moduleName: "react", name: "useMemo" },
     { moduleName: data.kmpModuleName, name: schematic.name },
     { moduleName: data.kmpModuleName, name: `${schematic.name}FormMode` },
@@ -784,11 +770,27 @@ function scaffoldAppComponentFile(schematic, data) {
     {
       moduleName: `./${schematic.name}IssueMessages.tsx`,
       name: `${constantCase(schematic.name)}_ISSUE_MESSAGES`
-    }
+    },
+    { moduleName: "./actions/Load.tsx", name: "Load" },
+    { moduleName: "./actions/Save.tsx", name: "Save" },
+    { moduleName: "./actions/Validate.tsx", name: "Validate" },
+    { moduleName: "./actions/Submit.tsx", name: "Submit" }
   );
+  const layout = reactAppLayout(schematic, data);
+  let annexesManager = "";
+  if (layout.length > 1) {
+    data.currentFile.imports.push({
+      moduleName: "@ostack.tech/ui-kform",
+      name: "AnnexesManager"
+    });
+    annexesManager = `
+  <AnnexesManager />
+`;
+  }
   data.currentFile.declarations.push(code`
     export function ${schematic.name}App() {
       const { externalContexts } = use${schematic.name}Context();
+      const [activePath, setActivePath] = useSearchParam("${activePathSearchParam}");
 
       return (
         <FormApp
@@ -807,79 +809,13 @@ function scaffoldAppComponentFile(schematic, data) {
               ? "manual"
               : "auto"
           }
+          activePath={activePath}
+          onActivePathChange={setActivePath}
           issueMessages={${constantCase(schematic.name)}_ISSUE_MESSAGES}
           defaultLocale={${localeVar}}
           reportError={reportError}
         >
-          <${schematic.name}Layout />
-        </FormApp>
-      );
-    }
-  `);
-  const layout = reactAppLayout(schematic, data);
-  data.currentFile.imports.push(
-    { moduleName: "react-router", name: "useNavigate" },
-    { moduleName: "react-router", name: "useLocation" },
-    { moduleName: "react-router", name: "Outlet" },
-    { moduleName: "@ostack.tech/ui-kform", name: "Annexes" },
-    { moduleName: "@ostack.tech/ui-kform", name: "Annex" },
-    {
-      moduleName: "@ostack.tech/ui-kform",
-      name: "AnnexObject",
-      isType: true
-    },
-    { moduleName: "@ostack.tech/ui-kform", name: "TopBar" },
-    { moduleName: "@ostack.tech/ui-kform", name: "TopBarActions" },
-    { moduleName: "./actions/Load.tsx", name: "Load" },
-    { moduleName: "./actions/Save.tsx", name: "Save" },
-    { moduleName: "./actions/Validate.tsx", name: "Validate" },
-    { moduleName: "./actions/Submit.tsx", name: "Submit" },
-    { moduleName: "@ostack.tech/ui-kform", name: "FormPages" },
-    {
-      moduleName: "@ostack.tech/ui-kform",
-      name: "FormPageObject",
-      isType: true
-    },
-    { moduleName: "@ostack.tech/ui-kform", name: "IssuesPanel" }
-  );
-  let annexesManager = "";
-  if (layout.length > 1) {
-    data.currentFile.imports.push({
-      moduleName: "@ostack.tech/ui-kform",
-      name: "AnnexesManager"
-    });
-    annexesManager = `
-  <AnnexesManager />
-`;
-  }
-  let formPagesNavigation = "";
-  if (layout.some((annex) => annex.formPages.length > 1)) {
-    data.currentFile.imports.push({
-      moduleName: "@ostack.tech/ui-kform",
-      name: "FormPagesNavigation"
-    });
-    if (layout.every((annex) => annex.formPages.length > 1)) {
-      formPagesNavigation = `
-  <FormPagesNavigation />
-`;
-    } else {
-      formPagesNavigation = `
-  {pages.length > 1 && <FormPagesNavigation />}
-`;
-    }
-  }
-  data.currentFile.declarations.push(code`
-    function ${schematic.name}Layout() {
-      const navigate = useNavigate();
-      const { pathname } = useLocation();
-
-      const annexes: AnnexObject[] = useMemo(() => ${scaffoldAnnexesArray(layout)}, []);
-
-      const pagesByAnnex: Record<string, FormPageObject[]> = useMemo(() => (${scaffoldFormPagesByAnnexObject(layout)}), []);
-
-      return (
-        <>
-          <Annexes annexes={annexes} activeAnnex={pathname}>
+          <Annexes>
             <TopBar>${annexesManager}
               <TopBarActions>
                 <Load />
@@ -889,64 +825,70 @@ function scaffoldAppComponentFile(schematic, data) {
               </TopBarActions>
             </TopBar>
 
-            {Object.entries(pagesByAnnex).map(([annexPath, pages]) => (
-              <Annex path={annexPath} key={annexPath}>
-                <FormPages
-                  pages={pages}
-                  activePage={pathname}
-                  onActivePageChange={(activePage) => {
-                    const newPathname = activePage?.toString() ?? "/";
-                    if (pathname !== newPathname) {
-                      void navigate(newPathname, {
-                        replace: newPathname.startsWith(
-                          pathname.endsWith("/") ? pathname : \`\${pathname}/\`,
-                        )
-                      });
-                    }
-                  }}
-                >${formPagesNavigation}
-                  <Outlet />
-                </FormPages>
-              </Annex>
-            ))}
+            ${scaffoldAnnexes(layout, data)}
           </Annexes>
 
           <IssuesPanel />
-        </>
+        </FormApp>
       );
     }
   `);
 }
-function scaffoldAnnexesArray(layout) {
+function scaffoldAnnexes(layout, data) {
+  return layout.map((annex) => scaffoldAnnex(annex, data)).join("\n\n");
+}
+function scaffoldAnnex(annex, data) {
+  let formPagesNavigation = "";
+  if (annex.formPages.length > 1) {
+    data.currentFile.imports.push({
+      moduleName: "@ostack.tech/ui-kform",
+      name: "FormPagesNavigation"
+    });
+    formPagesNavigation = `
+  <FormPagesNavigation />
+`;
+  }
   return code`
-    [
-      ${layout.map(
-    (annex) => `{ path: "${annex.data.currentPath}", title: "${sentenceCase(
-      annex.schematic.name
-    )}"${annex.formPages.length === 1 && annex.data.currentPath === annex.formPages[0].data.currentPath ? ", documentTitle: null" : ""} }`
-  ).join(",\n")}
-    ]
+    <Annex path="${annex.data.currentPath}" title="${sentenceCase(annex.schematic.name)}"${annex.formPages.length === 1 && annex.schematic === annex.formPages[0].schematic ? " documentTitle={null}" : ""}>
+      <FormPages>${formPagesNavigation}
+        ${annex.formPages.map((formPage) => scaffoldFormPage(annex, formPage, data))}
+      </FormPages>
+    </Annex>
   `;
 }
-function scaffoldFormPagesByAnnexObject(layout) {
-  return code`
-    {
-      ${layout.map(
-    (annex) => `"${annex.data.currentPath}": ` + code`
-              [
-                ${annex.formPages.map(
-      (formPage) => annex.schematic === formPage.schematic ? `{ title: "${sentenceCase(
-        formPage.schematic.name
-      )}", code: "${formPage.schematic.name?.[0].toUpperCase()}"${formPage.data.currentPath === "/" ? ", documentTitle: null" : ""} }` : `{ path: "${formPage.data.currentPath.slice(
-        annex.data.currentPath.length + (annex.data.currentPath.endsWith("/") ? 0 : 1)
-      )}", title: "${sentenceCase(
+function scaffoldFormPage(annex, formPage, data) {
+  data.currentFile.imports.push({
+    moduleName: `./${joinPaths(
+      formPage.data.currentDir.slice(
+        data.currentDir.length + (data.currentDir.endsWith("/") ? 0 : 1)
+      ),
+      formPage.schematic.name
+    )}.tsx`,
+    name: formPage.schematic.name
+  });
+  let issueMessagesProp = "";
+  if (formPage.data.currentPath !== "/") {
+    data.currentFile.imports.push({
+      moduleName: `./${joinPaths(
+        formPage.data.currentDir.slice(
+          data.currentDir.length + (data.currentDir.endsWith("/") ? 0 : 1)
+        ),
         formPage.schematic.name
-      )}", code: "${formPage.schematic.name?.[0].toUpperCase()}" }`
-    ).join(",\n")}
-              ]
-            `
-  ).join(",\n")}
-    }
+      )}IssueMessages.tsx`,
+      name: `${constantCase(formPage.schematic.name)}_ISSUE_MESSAGES`
+    });
+    issueMessagesProp = ` issueMessages={${constantCase(formPage.schematic.name)}_ISSUE_MESSAGES}`;
+  }
+  const pathProp = annex.schematic === formPage.schematic ? "" : ` path="${formPage.data.currentPath.slice(
+    annex.data.currentPath.length + (annex.data.currentPath.endsWith("/") ? 0 : 1)
+  )}"`;
+  const documentTitleProp = formPage.data.currentPath === "/" ? " documentTitle={null}" : "";
+  return code`
+    <FormPage${pathProp} title="${sentenceCase(
+    formPage.schematic.name
+  )}" code="${formPage.schematic.name?.[0].toUpperCase()}"${documentTitleProp}${issueMessagesProp}>
+      <${formPage.schematic.name} />
+    </FormPage>
   `;
 }
 const contextTsEjs = 'import { createContext, useContext } from "react";\nimport { <%= formClass %>ExternalContexts } from "<%= kmpModuleName %>";\n\nexport interface <%= formClass %>ContextValue {\n  externalContexts: <%= formClass %>ExternalContexts;\n}\n\nexport const <%= formClass %>Context = createContext<<%= formClass %>ContextValue>(null as never);\n\nexport function use<%= formClass %>Context(): <%= formClass %>ContextValue {\n  return useContext(<%= formClass %>Context);\n}\n';
@@ -980,7 +922,7 @@ const gradlePropertiesEjs = "group=<%= gradlePropertiesGroup %>\nversion=0.0.1\n
 const libsVersionsTomlEjs = '[versions]\n# Plugins\nkotlin = "2.2.21"\nnodeGradle = "7.1.0"\n# Libraries\nkotlinxCoroutines = "1.10.2"\nkform = "<%= kFormVersion %>"\n<%_ if (includeKotlinxDatetime) { -%>\nkotlinxDatetime = "0.7.1"\n<%_ } -%>\n<%_ if (serializationFormat === "json") { -%>\nkotlinxSerialization = "1.9.0"\n<%_ } -%>\n<%_ if (includeKtMath) { -%>\nktMath = "0.10.2"\n<%_ } -%>\nslf4j = "2.0.17"\n<%_ if (serializationFormat === "xml") { -%>\nxmlutil = "0.91.1"\n<%_ } -%>\n# Runtimes\njvmToolchain = "<%= jvmToolchainVersion %>"\nnodejs = "<%= nodejsVersion %>"\n\n[libraries]\nkform = { module = "tech.ostack:kform", version.ref = "kform" }\nkform-jsBindings = { module = "tech.ostack:kform-js-bindings", version.ref = "kform" }\nkotlinxCoroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "kotlinxCoroutines" }\n<%_ if (includeKotlinxDatetime) { -%>\nkotlinxDatetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinxDatetime" }\n<%_ } -%>\n<%_ if (serializationFormat === "json") { -%>\nkotlinxSerialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerialization" }\n<%_ } -%>\n<%_ if (includeKtMath) { -%>\nktMath = { module = "io.github.gciatto:kt-math", version.ref = "ktMath" }\n<%_ } -%>\nslf4j-simple = { module = "org.slf4j:slf4j-simple", version.ref = "slf4j" }\n<%_ if (serializationFormat === "xml") { -%>\nxmlutil-serialization = { module = "io.github.pdvrieze.xmlutil:serialization", version.ref = "xmlutil" }\n<%_ } -%>\n\n[plugins]\nkotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }\nkotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }\nnodeGradle = { id = "com.github.node-gradle.node", version.ref = "nodeGradle" }\n';
 const reactAppBuildGradleKtsEjs = 'import com.github.gradle.node.npm.task.NpmTask\n\nplugins {\n    alias(libs.plugins.nodeGradle)\n    base\n}\n\nval isCI = System.getenv("CI") !in arrayOf(null, "0", "false")\nnode {\n    download = true\n    version = libs.versions.nodejs.get()\n    npmInstallCommand = if (isCI) "ci" else "install"\n}\n\nval sharedPackage = project(":shared").file("build/<%= formId %>-shared-$version.tgz")\n\nval npmInstallShared by tasks.registering(NpmTask::class) {\n    group = "build"\n    dependsOn(":shared:packJsPackage")\n    npmCommand = listOf("install", "<%= formId %>-shared@file:$sharedPackage")\n\n    inputs.file(sharedPackage)\n    outputs.dir("node_modules/<%= formId %>-shared")\n}\n\ntasks.npmInstall {\n    dependsOn(npmInstallShared)\n}\n\nval npmRunDev by tasks.registering(NpmTask::class) {\n    group = "development"\n    dependsOn(tasks.npmInstall)\n    npmCommand = listOf("run", "dev")\n}\n\nprivate fun NpmTask.npmRunBuild(buildReason: String) {\n    group = "build"\n    dependsOn(tasks.npmInstall)\n    npmCommand = listOf("run", "build")\n    environment = mapOf("VITE_BUILD_REASON" to buildReason)\n\n    inputs.dir("src")\n    inputs.file(sharedPackage)\n    inputs.file("index.html")\n    inputs.file("package.json")\n    inputs.file("tsconfig.json")\n    inputs.file("tsconfig.app.json")\n    inputs.file("tsconfig.node.json")\n    inputs.file("vite.config.ts")\n    outputs.dir("build/dist")\n}\n\nval npmRunBuild by tasks.registering(NpmTask::class) {\n    npmRunBuild("production")\n}\n\nval npmRunBuildPreview by tasks.registering(NpmTask::class) {\n    npmRunBuild("preview")\n}\n\nval npmRunPreview by tasks.registering(NpmTask::class) {\n    group = "development"\n    dependsOn(npmRunBuildPreview)\n    npmCommand = listOf("run", "preview")\n}\n\nval npmRunLint by tasks.registering(NpmTask::class) {\n    group = "verification"\n    dependsOn(tasks.npmInstall)\n    npmCommand = listOf("run", "lint")\n\n    inputs.dir("src")\n    inputs.file("eslint.config.js")\n    inputs.file("package.json")\n    inputs.file("tsconfig.json")\n    inputs.file("tsconfig.app.json")\n    inputs.file("tsconfig.node.json")\n    outputs.upToDateWhen { true }\n}\n\ntasks.assemble {\n    dependsOn(npmRunBuild)\n}\n';
 const settingsGradleKtsEjs = 'plugins {\n    id("org.gradle.toolchains.foojay-resolver-convention") version "1.0.0"\n}\n\nrootProject.name = "<%= formId %>"\n\ninclude("shared", "react-app")\n';
-const sharedBuildGradleKtsEjs = 'import com.github.gradle.node.npm.task.NpmTask\n\nplugins {\n    alias(libs.plugins.kotlin.multiplatform)\n    alias(libs.plugins.kotlin.serialization)\n    alias(libs.plugins.nodeGradle)\n}\n\nkotlin {\n    jvmToolchain(libs.versions.jvmToolchain.get().toInt())\n    jvm {\n        testRuns["test"].executionTask.configure { useJUnitPlatform() }\n    }\n    js {\n        compilerOptions {\n            target = "es2015"\n            freeCompilerArgs.add("-Xes-long-as-bigint")\n            freeCompilerArgs.add("-Xwarning-level=NON_EXPORTABLE_TYPE:disabled")\n        }\n        binaries.library()\n        browser { testTask { useMocha() } }\n        generateTypeScriptDefinitions()\n    }\n\n    sourceSets {\n        all {\n            // Opt in to the experimental `JsExport` annotation\n            languageSettings.optIn("kotlin.js.ExperimentalJsExport")\n        }\n\n        commonMain.dependencies {\n            api(libs.kform)\n            <%_ if (includeKotlinxDatetime) { -%>\n            api(libs.kotlinxDatetime)\n            <%_ } -%>\n            <%_ if (serializationFormat === "json") { -%>\n            api(libs.kotlinxSerialization.json)\n            <%_ } -%>\n            <%_ if (includeKtMath) { -%>\n            api(libs.ktMath)\n            <%_ } -%>\n            <%_ if (serializationFormat === "xml") { -%>\n            api(libs.xmlutil.serialization)\n            <%_ } -%>\n        }\n        commonTest.dependencies {\n            implementation(kotlin("test"))\n            implementation(libs.kotlinxCoroutines.test)\n        }\n        jvmTest.dependencies {\n            implementation(libs.slf4j.simple)\n        }\n        jsMain.dependencies {\n            implementation(libs.kform.jsBindings)\n            <%_ if (includeKotlinxDatetime) { -%>\n            implementation(npm("@js-joda/timezone", "2.3.0"))\n            <%_ } -%>\n        }\n    }\n}\n\nval isCI = System.getenv("CI") !in arrayOf(null, "0", "false")\nnode {\n    download = true\n    version = libs.versions.nodejs.get()\n    npmInstallCommand = if (isCI) "ci" else "install"\n}\n\n// Packs the result of the JS compilation, for consumption by the React app\nval packJsPackage by tasks.registering(NpmTask::class) {\n    group = "build"\n    dependsOn("jsBrowserProductionLibraryDistribution")\n\n    val libraryDir = "build/dist/js/productionLibrary"\n    npmCommand = listOf("pack", libraryDir, "--pack-destination", "build")\n\n    inputs.dir(libraryDir)\n    outputs.file("build/<%= formId %>-shared-${version}.tgz")\n}\n';
+const sharedBuildGradleKtsEjs = 'import com.github.gradle.node.npm.task.NpmTask\n\nplugins {\n    alias(libs.plugins.kotlin.multiplatform)\n    alias(libs.plugins.kotlin.serialization)\n    alias(libs.plugins.nodeGradle)\n}\n\nkotlin {\n    jvmToolchain(libs.versions.jvmToolchain.get().toInt())\n    jvm {\n        testRuns["test"].executionTask.configure { useJUnitPlatform() }\n    }\n    js {\n        compilerOptions {\n            target = "es2015"\n            freeCompilerArgs.add("-Xes-long-as-bigint")\n            freeCompilerArgs.add("-Xwarning-level=NON_EXPORTABLE_TYPE:disabled")\n        }\n        binaries.library()\n        browser { testTask { useMocha() } }\n        generateTypeScriptDefinitions()\n    }\n\n    sourceSets {\n        all {\n            // Opt in to the experimental `JsExport` annotation\n            languageSettings.optIn("kotlin.js.ExperimentalJsExport")\n        }\n\n        commonMain.dependencies {\n            api(libs.kform)\n            <%_ if (includeKotlinxDatetime) { -%>\n            api(libs.kotlinxDatetime)\n            <%_ } -%>\n            <%_ if (serializationFormat === "json") { -%>\n            api(libs.kotlinxSerialization.json)\n            <%_ } -%>\n            <%_ if (includeKtMath) { -%>\n            api(libs.ktMath)\n            <%_ } -%>\n            <%_ if (serializationFormat === "xml") { -%>\n            api(libs.xmlutil.serialization)\n            <%_ } -%>\n        }\n        commonTest.dependencies {\n            implementation(kotlin("test"))\n            implementation(libs.kotlinxCoroutines.test)\n        }\n        jvmTest.dependencies {\n            implementation(libs.slf4j.simple)\n        }\n        jsMain.dependencies {\n            implementation(libs.kform.jsBindings)\n            <%_ if (includeKotlinxDatetime) { -%>\n            implementation(npm("@js-joda/timezone", "2.3.0"))\n            <%_ } -%>\n        }\n    }\n}\n\nnode {\n    download = true\n    version = libs.versions.nodejs.get()\n}\n\n// Packs the result of the JS compilation, for consumption by the React app\nval packJsPackage by tasks.registering(NpmTask::class) {\n    group = "build"\n    dependsOn("jsBrowserProductionLibraryDistribution")\n\n    val libraryDir = "build/dist/js/productionLibrary"\n    npmCommand = listOf("pack", libraryDir, "--pack-destination", "build")\n\n    inputs.dir(libraryDir)\n    outputs.file("build/<%= formId %>-shared-${version}.tgz")\n}\n';
 const jsJodaTimeZoneKtEjs = 'package <%= filePackage %>\n\n// See: https://github.com/Kotlin/kotlinx-datetime?tab=readme-ov-file#note-about-time-zones-in-js\n@JsModule("@js-joda/timezone")\n@JsNonModule\nexternal object JsJodaTimeZoneModule\n\n@JsExport\nval jsJodaTz = JsJodaTimeZoneModule\n';
 const DEFAULT_JVM_TOOLCHAIN_VERSION = "17";
 const DEFAULT_NODEJS_VERSION = "22.20.0";
@@ -1406,24 +1348,17 @@ function scaffoldMain(schematic, data) {
   if (!file) {
     data.files.set(fileName, file = tsFile());
   }
-  scaffoldMainFile(schematic, {
+  scaffoldMainDeclarations(schematic, {
     kmpModuleName: `${kebabCase(schematic.name)}-shared`,
     ...data,
     currentFile: file
   });
 }
-function scaffoldMainFile(schematic, data) {
+function scaffoldMainDeclarations(schematic, data) {
   data.currentFile.imports.push(
     { moduleName: "./index.scss" },
-    { moduleName: "react-router-dom", name: "createHashRouter" }
-  );
-  data.currentFile.declarations.push(
-    `const router = createHashRouter([${scaffoldRouteObject(schematic, data)}]);`
-  );
-  data.currentFile.imports.push(
-    { moduleName: "react-dom/client", name: "createRoot" },
     { moduleName: "react", name: "StrictMode" },
-    { moduleName: "react-router-dom", name: "RouterProvider" },
+    { moduleName: "react-dom/client", name: "createRoot" },
     {
       moduleName: data.kmpModuleName,
       name: `decode${schematic.name}ExternalContextsFromString`
@@ -1431,6 +1366,10 @@ function scaffoldMainFile(schematic, data) {
     {
       moduleName: `./${schematic.name}Context.ts`,
       name: `${schematic.name}Context`
+    },
+    {
+      moduleName: `./${schematic.name}App.tsx`,
+      name: `${schematic.name}App`
     }
   );
   data.currentFile.declarations.push(code`
@@ -1446,51 +1385,13 @@ function scaffoldMainFile(schematic, data) {
       createRoot(root).render(
         <StrictMode>
           <${schematic.name}Context.Provider value={{ externalContexts }}>
-            <RouterProvider router={router} />
+            <${schematic.name}App />
           </${schematic.name}Context.Provider>
         </StrictMode>,
       );
     };
   `);
 }
-function scaffoldRouteObject(schematic, data) {
-  const layout = reactAppLayout(schematic, data);
-  const formPages = layout.flatMap((annex) => annex.formPages);
-  data.currentFile.imports.push({
-    moduleName: `./${schematic.name}App.tsx`,
-    name: `${schematic.name}App`
-  });
-  for (const formPage of formPages) {
-    data.currentFile.imports.push({
-      moduleName: `./${joinPaths(
-        formPage.data.currentDir.slice(
-          data.currentDir.length + (data.currentDir.endsWith("/") ? 0 : 1)
-        ),
-        pascalCase(formPage.schematic.name)
-      )}.tsx`,
-      name: pascalCase(formPage.schematic.name)
-    });
-  }
-  const firstFormPage = formPages.find(
-    (formPage) => !formPage.schematic.nullable && !formPage.data.currentPath.split("/").includes("*")
-  );
-  const routes = [
-    firstFormPage && `{ path: "*", element: <${pascalCase(firstFormPage.schematic.name)} /> }`,
-    ...formPages.filter((formPage) => formPage !== firstFormPage).map(
-      (formPage) => `{ path: "${formPage.data.currentPath.split("/").map((f) => f === "*" ? ":id" : f).join(
-        "/"
-      )}", element: <${pascalCase(formPage.schematic.name)} /> }`
-    )
-  ];
-  return code`
-    {
-      element: <${schematic.name}App />,
-      children: [
-        ${routes.filter((r) => r).join(",\n")}
-      ]
-    }
-  `;
-}
 const editorconfig = "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[{*.kt,*.kts,*.md}]\nindent_size = 4\nmax_line_length = 100\n\n[{*.js,*.jsx,*.ts,*.tsx,*.json,*.html,*.css,*.scss,*.toml}]\nindent_size = 2\nmax_line_length = 80";
 const gitignore = "# Gradle\n.gradle/\nbuild/\n!**/src/**/build/\n\n# Kotlin\n.kotlin/\n\n# Node.js\nnode_modules/\n.npmrc\n\n# Typescript\n*.tsbuildinfo\n\n# Local env files\n.env*.local\n\n# Logs\nlogs\n*.log\n\n# IDEs and editors\n.vscode/\n.idea/\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\nout/\n!**/src/**/out/\n\n# Misc\n.DS_Store\n*.pem\n";
 function scaffoldProjectMisc(_schematic, data) {
@@ -1532,7 +1433,7 @@ function scaffoldStyles(_schematic, data) {
 }
 const eslintConfigJs = 'import js from "@eslint/js";\nimport { defineConfig, globalIgnores } from "eslint/config";\nimport reactHooks from "eslint-plugin-react-hooks";\nimport reactRefresh from "eslint-plugin-react-refresh";\nimport globals from "globals";\nimport tseslint from "typescript-eslint";\n\nexport default defineConfig([\n  globalIgnores([".gradle", "build"]),\n  {\n    files: ["**/*.{ts,tsx}"],\n    extends: [\n      js.configs.recommended,\n      tseslint.configs.recommended,\n      reactHooks.configs.flat.recommended,\n      reactRefresh.configs.vite,\n    ],\n    languageOptions: {\n      ecmaVersion: 2020,\n      globals: globals.browser,\n    },\n  },\n]);\n';
 const indexHtmlEjs = '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <link rel="icon" type="image/svg+xml" href="/vite.svg" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title><%= formTitle %></title>\n  </head>\n  <body>\n    <div\n      id="<%= formId %>-app-root"\n      data-external-contexts="<%= externalContextsData %>"\n    ></div>\n    <script type="module" src="/src/main.tsx"><\/script>\n    <script type="module">\n      render<%= formClass %>App();\n    <\/script>\n  </body>\n</html>\n';
-const packageJsonEjs = '{\n  "name": "<%= formId %>-react-app",\n  "private": true,\n  "version": "0.0.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "tsc -b && vite build",\n    "lint": "eslint .",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "<%= dependencyVersions["@fortawesome/fontawesome-svg-core"] %>",\n    "@fortawesome/free-regular-svg-icons": "<%= dependencyVersions["@fortawesome/free-regular-svg-icons"] %>",\n    "@fortawesome/free-solid-svg-icons": "<%= dependencyVersions["@fortawesome/free-solid-svg-icons"] %>",\n    "@ostack.tech/kform-react": "~<%= kFormVersion %>",\n    "@ostack.tech/ui": "~<%= ostackUiVersion %>",\n    "@ostack.tech/ui-kform": "~<%= ostackUiVersion %>",\n    "date-fns": "<%= dependencyVersions["date-fns"] %>",\n    "<%= formId %>-shared": "file:../shared/build/<%= formId %>-shared-0.0.1.tgz",\n    "react": "<%= dependencyVersions.react %>",\n    "react-dom": "<%= dependencyVersions["react-dom"] %>",\n    "react-router": "<%= dependencyVersions["react-router"] %>",\n    "react-router-dom": "<%= dependencyVersions["react-router-dom"] %>"\n  },\n  "devDependencies": {\n    "@eslint/js": "<%= dependencyVersions["@eslint/js"] %>",\n    "@types/node": "<%= dependencyVersions["@types/node"] %>",\n    "@types/ostack.tech__kform": "npm:@ostack.tech/kform@~<%= kFormVersion %>",\n    "@types/react": "<%= dependencyVersions["@types/react"] %>",\n    "@types/react-dom": "<%= dependencyVersions["@types/react-dom"] %>",\n    "@vitejs/plugin-react-swc": "<%= dependencyVersions["@vitejs/plugin-react-swc"] %>",\n    "eslint": "<%= dependencyVersions.eslint %>",\n    "eslint-plugin-react-hooks": "<%= dependencyVersions["eslint-plugin-react-hooks"] %>",\n    "eslint-plugin-react-refresh": "<%= dependencyVersions["eslint-plugin-react-refresh"] %>",\n    "globals": "<%= dependencyVersions.globals %>",\n    "sass-embedded": "<%= dependencyVersions["sass-embedded"] %>",\n    "typescript": "<%= dependencyVersions.typescript %>",\n    "typescript-eslint": "<%= dependencyVersions["typescript-eslint"] %>",\n    "vite": "<%= dependencyVersions.vite %>"\n  }\n}\n';
+const packageJsonEjs = '{\n  "name": "<%= formId %>-react-app",\n  "private": true,\n  "version": "0.0.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "tsc -b && vite build",\n    "lint": "eslint .",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "<%= dependencyVersions["@fortawesome/fontawesome-svg-core"] %>",\n    "@fortawesome/free-regular-svg-icons": "<%= dependencyVersions["@fortawesome/free-regular-svg-icons"] %>",\n    "@fortawesome/free-solid-svg-icons": "<%= dependencyVersions["@fortawesome/free-solid-svg-icons"] %>",\n    "@ostack.tech/kform-react": "~<%= kFormVersion %>",\n    "@ostack.tech/ui": "~<%= ostackUiVersion %>",\n    "@ostack.tech/ui-kform": "~<%= ostackUiVersion %>",\n    "date-fns": "<%= dependencyVersions["date-fns"] %>",\n    "<%= formId %>-shared": "file:../shared/build/<%= formId %>-shared-0.0.1.tgz",\n    "react": "<%= dependencyVersions.react %>",\n    "react-dom": "<%= dependencyVersions["react-dom"] %>"\n  },\n  "devDependencies": {\n    "@eslint/js": "<%= dependencyVersions["@eslint/js"] %>",\n    "@types/node": "<%= dependencyVersions["@types/node"] %>",\n    "@types/ostack.tech__kform": "npm:@ostack.tech/kform@~<%= kFormVersion %>",\n    "@types/react": "<%= dependencyVersions["@types/react"] %>",\n    "@types/react-dom": "<%= dependencyVersions["@types/react-dom"] %>",\n    "@vitejs/plugin-react-swc": "<%= dependencyVersions["@vitejs/plugin-react-swc"] %>",\n    "eslint": "<%= dependencyVersions.eslint %>",\n    "eslint-plugin-react-hooks": "<%= dependencyVersions["eslint-plugin-react-hooks"] %>",\n    "eslint-plugin-react-refresh": "<%= dependencyVersions["eslint-plugin-react-refresh"] %>",\n    "globals": "<%= dependencyVersions.globals %>",\n    "sass-embedded": "<%= dependencyVersions["sass-embedded"] %>",\n    "typescript": "<%= dependencyVersions.typescript %>",\n    "typescript-eslint": "<%= dependencyVersions["typescript-eslint"] %>",\n    "vite": "<%= dependencyVersions.vite %>"\n  }\n}\n';
 const viteSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>\n';
 const tsConfigAppJson = '{\n  "compilerOptions": {\n    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",\n    "target": "ES2022",\n    "useDefineForClassFields": true,\n    "lib": ["ES2022", "DOM", "DOM.Iterable"],\n    "module": "ESNext",\n    "types": ["vite/client"],\n    "skipLibCheck": true,\n\n    /* Bundler mode */\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "verbatimModuleSyntax": true,\n    "moduleDetection": "force",\n    "noEmit": true,\n    "jsx": "react-jsx",\n\n    /* Linting */\n    "strict": true,\n    "noUnusedLocals": true,\n    "noUnusedParameters": true,\n    "erasableSyntaxOnly": true,\n    "noFallthroughCasesInSwitch": true,\n    "noUncheckedSideEffectImports": true\n  },\n  "include": ["src"]\n}\n';
 const tsConfigJson = '{\n  "files": [],\n  "references": [\n    { "path": "./tsconfig.app.json" },\n    { "path": "./tsconfig.node.json" }\n  ]\n}\n';
@@ -1545,9 +1446,9 @@ function scaffoldViteProject(schematic, data) {
     formId: kebabCase(schematic.name),
     formClass: schematic.name,
     formTitle: capitalCase(schematic.name),
-    ostackUiVersion: "0.3.4",
+    ostackUiVersion: "0.4.0",
     kFormVersion: "0.31.5",
-    dependencyVersions: JSON.parse('{"@eslint/js":"^9.38.0","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@ostack.tech/kform":"~0.31.5","@ostack.tech/kform-react":"~0.31.5","@ostack.tech/kform-scaffolder":"~0.31.5","@storybook/addon-docs":"^9.1.16","@storybook/addon-links":"^9.1.16","@storybook/react-vite":"^9.1.16","@types/node":"^22.18.13","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@vitejs/plugin-react-swc":"^4.2.0","change-case":"^5.4.4","cpy-cli":"^6.0.0","date-fns":"^4.1.0","eslint":"^9.38.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-storybook":"^9.1.16","globals":"^16.4.0","happy-dom":"^20.0.10","lint-staged":"^16.2.6","prettier":"^3.6.2","prettier-plugin-jsdoc":"^1.5.0","react":"^19.2.0","react-dom":"^19.2.0","react-router":"^7.9.5","react-router-dom":"^7.9.5","rimraf":"^6.0.1","sass-embedded":"^1.93.2","simple-git-hooks":"^2.13.1","storybook":"^9.1.16","terser":"^5.44.0","tslib":"^2.8.1","typescript":"~5.9.3","typescript-eslint":"^8.46.2","vite":"^7.1.12","vite-plugin-dts":"^4.5.4","vitest":"^4.0.5","zustand":"^5.0.8"}'),
+    dependencyVersions: JSON.parse('{"@eslint/js":"^9.39.1","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@ostack.tech/kform":"~0.31.5","@ostack.tech/kform-react":"~0.31.5","@ostack.tech/kform-scaffolder":"~0.31.5","@storybook/addon-docs":"^10.0.5","@storybook/addon-links":"^10.0.5","@storybook/react-vite":"^10.0.5","@types/node":"^24.10.0","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@vitejs/plugin-react-swc":"^4.2.1","change-case":"^5.4.4","cpy-cli":"^6.0.0","date-fns":"^4.1.0","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-storybook":"^10.0.5","globals":"^16.5.0","happy-dom":"^20.0.10","lint-staged":"^16.2.6","prettier":"^3.6.2","prettier-plugin-jsdoc":"^1.5.0","react":"^19.2.0","react-dom":"^19.2.0","rimraf":"^6.1.0","sass-embedded":"^1.93.2","simple-git-hooks":"^2.13.1","storybook":"^10.0.5","terser":"^5.44.1","tslib":"^2.8.1","typescript":"~5.9.3","typescript-eslint":"^8.46.3","vite":"^7.2.1","vite-plugin-dts":"^4.5.4","vitest":"^4.0.7","zustand":"^5.0.8"}'),
     externalContextsData: data.serializationFormat === "json" ? "{}" : `<${schematic.name}ExternalContexts />`,
     apiBasePath: data.apiBasePath ?? DEFAULT_API_BASE_PATH,
     viteConfigOutDir: data.viteConfigOutDir ?? DEFAULT_VITE_CONFIG_OUT_DIR,
@@ -1596,7 +1497,7 @@ function SchematicBuilder({
     configScaffolder(scaffoldAppContext, reactAppData),
     configScaffolder(scaffoldActions, reactAppData),
     configScaffolder(scaffoldApi, reactAppData),
-    configScaffolder(scaffoldFormPages, reactAppData)
+    configScaffolder(scaffoldPageComponents, reactAppData)
   ],
   scaffoldingData = (schematic) => ({
     useFileBase64Serializer: true,
@@ -1622,6 +1523,7 @@ function SchematicBuilder({
   );
 }
 export {
+  DEFAULT_ACTIVE_PATH_SEARCH_PARAM,
   DEFAULT_API_BASE_PATH,
   DEFAULT_JVM_TOOLCHAIN_VERSION,
   DEFAULT_LOCALE,
@@ -1658,21 +1560,21 @@ export {
   longSchematicKind,
   reactAppLayout,
   scaffoldActions,
-  scaffoldAnnexesArray,
+  scaffoldAnnex,
+  scaffoldAnnexes,
   scaffoldApi,
   scaffoldAppComponent,
   scaffoldAppContext,
   scaffoldExternalContexts,
   scaffoldField,
-  scaffoldFormPages,
-  scaffoldFormPagesByAnnexObject,
+  scaffoldFormPage,
   scaffoldGradleProject,
   scaffoldGradleWrapper,
   scaffoldIssueMessages,
   scaffoldMain,
+  scaffoldPageComponents,
   scaffoldProjectMisc,
   scaffoldResponses,
-  scaffoldRouteObject,
   scaffoldSerializer,
   scaffoldStyles,
   scaffoldViteProject,