vk-typescript-cli 1.0.0

package/src/generators/react.js

@@ -0,0 +1,769 @@
+import path from 'node:path';
+import { rm, writeFile } from 'node:fs/promises';
+import { runCommand } from '../utils/run-command.js';
+import { logger } from '../utils/logger.js';
+import {
+  createProjectFolderStructure
+} from '../utils/folder-structure.js';
+import { generateSyncfusionConfig } from '../utils/config-generator.js';
+import {
+  getThemePackages,
+  generateThemeImportStatement
+} from '../utils/theme-loader.js';
+import { addPackagesToJson } from '../utils/package-manager.js';
+import { generateGridTemplate } from '../templates/grid-template.js';
+import { generateChartTemplate } from '../templates/chart-template.js';
+import { generateSchedulerTemplate } from '../templates/scheduler-template.js';
+import { generateGanttTemplate } from '../templates/gantt-template.js';
+import { generateFileManagerTemplate } from '../templates/filemanager-template.js';
+import { generateDiagramTemplate } from '../templates/diagram-template.js';
+import { generateRteTemplate } from '../templates/rte-template.js';
+import { generatePDFTemplate } from '../templates/pdfviewer-template.js';
+import { generateDOCXTemplate } from '../templates/docx-template.js';
+import { generateSpreadsheetTemplate } from '../templates/spreadheet-template.js';
+import { TEMPLATES, TEMPLATE_ROUTES } from '../constants.js';
+import { addTemplatePackages } from '../utils/common.js';
+
+const HOME_PAGE_STYLES = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Hanken+Grotesk:wght@100..900&display=swap');
+
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: 'Hanken Grotesk', sans-serif;
+}
+
+.home-page,
+.home-page *,
+.home-page *::before,
+.home-page *::after {
+  box-sizing: border-box;
+}
+
+.home-page {
+  min-height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: #252a33;
+  background: #ffffff;
+}
+
+.workspace-header {
+  height: 64px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+  border-bottom: 1px solid #dfe3ea;
+  background: #ffffff;
+}
+
+.top-actions {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+.top-actions a {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #111827;
+  text-decoration: none;
+}
+
+.home-page svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+  stroke: none;
+}
+
+.sf-brand svg {
+  width: 180px;
+  height: 50px;
+}
+
+.workspace-content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 65px 30px 40px;
+  background: radial-gradient(100.37% 115.33% at 50% 0%, rgba(0, 95, 170, 0.04) 0%, rgba(0, 95, 170, 0) 70%);
+}
+
+.hero-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.hero-section h1 {
+  margin: 0;
+  font-weight: 700;
+  font-size: 44px;
+  line-height: 56px;
+  letter-spacing: -0.96px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.hero-section .app-name {
+  color: rgba(0, 95, 170, 1);
+}
+
+.hero-section p {
+  font-family: Inter;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: 0px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+
+.component-links {
+  width: 700px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 18px;
+  margin-top: 34px;
+}
+
+.component-link-button {
+  min-width: 104px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 16px;
+  border: 1px solid #c8d0dd;
+  border-radius: 999px;
+  color: rgba(0, 95, 170, 1);
+  background: #ffffff;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: none;
+}
+
+.component-link-button svg {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.1;
+}
+
+.resource-heading {
+  margin: 65px 0 35px;
+  color: rgba(64, 71, 82, 1);
+  font-size: 23px;
+  line-height: 1.45;
+  font-weight: 600;
+  line-height: 32px;
+ letter-spacing: 0px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.quick-links {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 17px;
+}
+
+.link-box {
+  min-height: 128px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 18px;
+  border: 1px solid #ced5df;
+  border-radius: 7px;
+  color: #242629;
+  background: #ffffff;
+  text-decoration: none;
+  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
+}
+
+.link-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.link-icon {
+  width: 35px;
+  height: 35px;
+  flex: 0 0 35px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: 16px;
+}
+
+.link-icon.blue {
+  color: #0065b3;
+  background: #e6f4ff;
+}
+
+.link-icon.orange {
+  color: #a35e16;
+  background: #f8eddf;
+}
+
+.link-icon.cyan {
+  color: #0078d4;
+  background: #e6f5ff;
+}
+
+.link-icon.gray {
+  color: #6c6f75;
+  background: #eeeeee;
+}
+
+.link-icon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2.1;
+}
+
+.link-title {
+  max-width: none;
+  color: rgba(28, 27, 27, 1);
+  font-size: 22px;
+  line-height: 32px;
+  font-weight: 600;
+  letter-spacing: 0;
+  vertical-align: middle;
+}
+
+.link-description {
+  font-family: Inter;
+  max-width: 100%;
+  margin-top: 14px;
+  color: rgba(94, 94, 94, 1);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0px;
+ vertical-align: middle;
+}
+
+.workspace-footer {
+  min-height: 53px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+  border-top: 1px solid #d8dde5;
+  background: #ffffff;
+}
+
+.footer-left,
+.footer-links {
+  display: flex;
+  align-items: center;
+}
+
+.footer-left {
+  gap: 17px;
+}
+
+.footer-left a,
+.footer-links a {
+  margin: 0;
+  color: rgba(94, 94, 94, 1);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  line-height: 20px;
+  text-decoration: none;
+}
+
+.footer-links {
+  gap: 27px;
+}
+
+.footer-links a {
+  color: rgba(94, 94, 94, 1);
+}
+
+.shady-divider {
+  width: min(100%, 920px);
+  height: 1px;
+  margin: 50px auto 30px;
+  background: linear-gradient(90deg, transparent,rgba(15, 108, 189, 0.28),rgba(124, 58, 237, 0.22), transparent);
+  box-shadow: 0 10px 26px rgba(15, 108, 189, 0.2);
+}
+
+@media (max-width: 1100px) {
+  .quick-links {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .workspace-header,
+  .workspace-footer {
+    padding: 0 16px;
+  }
+
+  .workspace-content {
+    padding: 48px 16px 32px;
+  }
+
+  .component-links {
+    width: 100%;
+  }
+
+  .quick-links {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-footer {
+    height: auto;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .footer-left,
+  .footer-links {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+}
+
+@media (max-width: 947px) {
+  .home-page {
+    width: 100vw;
+    margin-top: 0;
+  }
+}
+`;
+
+const HOME_PAGE_CONTENT = `__LINK_IMPORT__const resourceLinks = [
+  {
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path d="M7.5 14.5L14.5 10L7.5 5.5V14.5ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z" fill="#005FAA" />
+      </svg>
+    ),
+    title: 'Explore the Demos',
+    description: 'See our UI components in action with real-world industry examples.',
+    link: 'https://ej2.syncfusion.com/react/demos/',
+    tone: 'blue',
+  },
+  {
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
+        <path d="M4 16H12V14H4V16ZM4 12H12V10H4V12ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H10L16 6V18C16 18.55 15.8042 19.0208 15.4125 19.4125C15.0208 19.8042 14.55 20 14 20H2ZM9 7V2H2V18H14V7H9ZM2 2V7V2V7V18V2Z" fill="#904C00" />
+      </svg>
+    ),
+    title: 'Explore the Docs',
+    description: 'Comprehensive guides and API references for every control.',
+    link: 'https://ej2.syncfusion.com/react/documentation/introduction',
+    tone: 'orange',
+  },
+  {
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+        <path d="M18 8L16.75 5.25L14 4L16.75 2.75L18 0L19.25 2.75L22 4L19.25 5.25L18 8ZM18 22L16.75 19.25L14 18L16.75 16.75L18 14L19.25 16.75L22 18L19.25 19.25L18 22ZM8 19L5.5 13.5L0 11L5.5 8.5L8 3L10.5 8.5L16 11L10.5 13.5L8 19Z" fill="#0078D4" />
+      </svg>
+    ),
+    title: 'AI Prompting',
+    description: 'Harness the power of AI with our curated integration patterns.',
+    link: 'https://ej2.syncfusion.com/react/documentation/ai-tools/ai-powered-development',
+    tone: 'cyan',
+  },
+  {
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
+        <path d="M2 18H15V13.4L16.125 12.85C16.3917 12.7167 16.6042 12.5333 16.7625 12.3C16.9208 12.0667 17 11.8 17 11.5C17 11.2167 16.9208 10.9542 16.7625 10.7125C16.6042 10.4708 16.3917 10.2833 16.125 10.15L15 9.625V5H10.2L9.95 3.3C9.9 2.93333 9.7375 2.625 9.4625 2.375C9.1875 2.125 8.86667 2 8.5 2C8.11667 2 7.7875 2.125 7.5125 2.375C7.2375 2.625 7.075 2.93333 7.025 3.3L6.775 5H2V7.15C2.93333 7.5 3.66667 8.06667 4.2 8.85C4.73333 9.63333 5 10.5167 5 11.5C5 12.5 4.73333 13.3917 4.2 14.175C3.66667 14.9583 2.93333 15.525 2 15.875V18ZM2 20C1.43333 20 0.958333 19.8083 0.575 19.425C0.191667 19.0417 0 18.5667 0 18V14.2C0.8 14.2 1.5 13.9458 2.1 13.4375C2.7 12.9292 3 12.2833 3 11.5C3 10.7333 2.7 10.1 2.1 9.6C1.5 9.1 0.8 8.83333 0 8.8V5C0 4.45 0.195833 3.97917 0.5875 3.5875C0.979167 3.19583 1.45 3 2 3H5.05C5.16667 2.15 5.55 1.4375 6.2 0.8625C6.85 0.2875 7.61667 0 8.5 0C9.36667 0 10.125 0.2875 10.775 0.8625C11.425 1.4375 11.8167 2.15 11.95 3H15C15.55 3 16.0208 3.19583 16.4125 3.5875C16.8042 3.97917 17 4.45 17 5V8.35C17.6 8.65 18.0833 9.08333 18.45 9.65C18.8167 10.2167 19 10.8333 19 11.5C19 12.1833 18.8167 12.8083 18.45 13.375C18.0833 13.9417 17.6 14.3667 17 14.65V18C17 18.5667 16.8042 19.0417 16.4125 19.425C16.0208 19.8083 15.55 20 15 20H2Z" fill="#5E5E5E" />
+      </svg>
+    ),
+    title: 'React UI Components',
+    description: 'Access 80+ high-performance React components today for faster development.',
+    link: 'https://www.syncfusion.com/react-components',
+    tone: 'gray',
+  },
+];
+
+export default function Home() {
+  return (
+    <main className="home-page" aria-label="Syncfusion workspace home">
+      <header className="workspace-header">
+        <div className="sf-brand">
+            <svg width="180" height="50px" viewBox="0 0 494 109" version="1.1" xmlns="http://www.w3.org/2000/svg">
+              <title>syncfusion-logo</title>
+              <g id="syncfusion-logo" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="Syncfusion-Logo" fillRule="nonzero">
+                  <path d="M137.352583,50.8333224 L109.79444,50.8333224 C106.82897,50.8333224 104.658899,51.3828735 103.270994,52.4849143 C101.88897,53.5884245 101.197958,55.3384653 101.197958,57.7365061 C101.197958,59.6584653 101.784583,61.1028735 102.963714,62.0594449 C104.147256,63.0160163 105.905661,63.4979755 108.240399,63.4979755 L123.013351,63.4979755 C129.095726,63.4979755 133.429988,64.6470367 136.002905,66.948098 C138.577292,69.2491592 139.86375,73.0872 139.86375,78.4534041 C139.86375,83.8974857 138.375869,87.8942204 135.407458,90.4480163 C132.434637,93.0032816 127.76222,94.2831184 121.388738,94.2831184 L91.6943393,94.2831184 L91.6943393,84.8937306 L119.617101,84.8937306 C122.792815,84.8937306 125.033458,84.4294041 126.336089,83.5051592 C127.63578,82.5794449 128.287095,81.0468735 128.287095,78.9030367 C128.287095,76.6930776 127.691649,75.1193633 126.499286,74.186302 C125.308393,73.2488327 123.266232,72.7756898 120.377214,72.7756898 L107.19506,72.7756898 C101.106804,72.7756898 96.6534524,71.5605061 93.8423571,69.1257306 C91.025381,66.6953633 89.6183631,62.8632 89.6183631,57.6116082 C89.6183631,52.0044245 91.0974226,47.913649 94.0555417,45.3245878 C97.0166012,42.7399347 101.721363,41.4454041 108.166887,41.4454041 L137.352583,41.4454041 L137.352583,50.8333224 Z" id="Fill-26" fill="#2B357C"></path>
+                  <path d="M162.661262,85.7649306 L170.86078,85.7649306 L170.86078,55.5249306 L181.127452,55.5249306 L181.127452,93.2411755 C181.127452,98.3796245 179.932149,102.183869 177.535661,104.658318 C175.136232,107.12689 171.466518,108.367053 166.532399,108.367053 L146.501728,108.367053 L146.501728,100.504359 L164.776935,100.504359 C166.732351,100.504359 168.233464,100.026808 169.290565,99.0746449 C170.337375,98.1195429 170.86078,96.7412571 170.86078,94.9250939 L170.86078,94.2829714 L161.837929,94.2829714 C156.04078,94.2829714 151.90794,93.1441959 149.443821,90.859298 C146.972204,88.5773388 145.735734,84.7657469 145.735734,79.4392163 L145.735734,55.5249306 L155.895226,55.5249306 L155.895226,78.6501551 C155.895226,81.5742367 156.334827,83.4903184 157.203738,84.4042776 C158.074119,85.3094204 159.892804,85.7649306 162.661262,85.7649306" id="Fill-27" fill="#2B357C"></path>
+                  <path d="M189.185827,55.5255184 L208.459179,55.5255184 C214.287202,55.5255184 218.447976,56.6246204 220.93856,58.8140082 C223.436494,61.0092735 224.686196,64.6416 224.686196,69.7153959 L224.686196,94.2820898 L214.419524,94.2820898 L214.419524,70.9746612 C214.419524,68.0755592 213.96522,66.1962122 213.068375,65.3336816 C212.168589,64.4740898 210.374899,64.0420898 207.669661,64.0420898 L199.45397,64.0420898 L199.45397,94.2820898 L189.185827,94.2820898 L189.185827,55.5255184 Z" id="Fill-28" fill="#2B357C"></path>
+                  <path d="M253.489631,85.9844571 L264.389976,85.9844571 L264.389976,94.2820898 L250.466821,94.2820898 C246.932369,94.2820898 244.036,93.9118041 241.770363,93.1888653 C239.492964,92.4571102 237.525786,91.2757224 235.845304,89.6491102 C234.039851,87.8829061 232.632833,85.7199673 231.608077,83.164702 C230.590673,80.6123755 230.08197,77.9189878 230.08197,75.0595592 C230.08197,72.0708245 230.587732,69.276049 231.596315,66.676702 C232.599018,64.084702 234.016327,61.9070694 235.845304,60.1599673 C237.544899,58.5318857 239.544423,57.3519673 241.842405,56.6202122 C244.133036,55.8899265 247.005881,55.5255184 250.466821,55.5255184 L264.389976,55.5255184 L264.389976,63.9304163 L253.489631,63.9304163 C248.66431,63.9304163 245.344512,64.7650286 243.522887,66.4254367 C241.702732,68.0887837 240.785304,70.9746612 240.785304,75.0860082 C240.785304,77.4531918 241.160214,79.4177633 241.901214,80.9650286 C242.646625,82.5122939 243.799292,83.767151 245.353333,84.7281306 C246.122268,85.1865796 247.014702,85.5069061 248.033577,85.6993959 C249.056863,85.8816 250.869667,85.9844571 253.489631,85.9844571" id="Fill-29" fill="#2B357C"></path>
+                  <path d="M273.558381,63.2778612 L266.241006,63.2778612 L266.241006,55.5253714 L273.558381,55.5253714 L273.558381,51.4874939 C273.558381,47.5421878 274.286149,44.8811265 275.754917,43.5057796 C277.208982,42.131902 280.014196,41.445698 284.164679,41.445698 L293.884423,41.445698 L293.884423,48.8631673 L289.020875,48.8631673 C287.265411,48.8631673 286.017179,49.142351 285.280589,49.6860245 C284.527827,50.2311673 284.164679,51.1363102 284.164679,52.3970449 L284.164679,55.5253714 L293.884423,55.5253714 L293.884423,63.2778612 L284.164679,63.2778612 L284.164679,94.2834122 L273.558381,94.2834122 L273.558381,63.2778612 Z" id="Fill-30" fill="#2B357C"></path>
+                  <path d="M332.89131,94.2828245 L313.56356,94.2828245 C307.901673,94.2828245 303.805589,93.1572735 301.287071,90.9135184 C298.765613,88.6653551 297.507089,85.0653551 297.507089,80.112049 L297.507089,55.5262531 L307.662024,55.5262531 L307.662024,79.2965388 C307.662024,81.8841306 308.119268,83.6047837 309.013173,84.4673143 C309.915899,85.3327837 311.709589,85.7647837 314.395714,85.7647837 L322.627577,85.7647837 L322.627577,55.5262531 L332.89131,55.5262531 L332.89131,94.2828245 Z" id="Fill-31" fill="#2B357C"></path>
+                  <path d="M340.405696,86.2011918 L361.97997,86.2011918 C363.903042,86.2011918 365.298298,85.9058449 366.17897,85.3092735 C367.058173,84.7141714 367.502185,83.7649469 367.502185,82.4483755 C367.502185,81.1450286 367.055232,80.1825796 366.162798,79.5786612 C365.274774,78.9732735 363.882458,78.6691102 361.97997,78.6691102 L353.118845,78.6691102 C347.884798,78.6691102 344.354756,77.8682939 342.514018,76.2563755 C340.67181,74.6503347 339.75144,71.7953143 339.75144,67.6927837 C339.75144,63.5182531 340.86294,60.448702 343.08447,58.4782531 C345.30747,56.5092735 348.753708,55.5262531 353.408482,55.5262531 L375.473815,55.5262531 L375.473815,63.6078857 L357.336958,63.6078857 C354.377369,63.6078857 352.457238,63.8650286 351.567744,64.3896 C350.68119,64.9097633 350.234238,65.8398857 350.234238,67.1740898 C350.234238,68.3833959 350.631202,69.2767837 351.406018,69.8483755 C352.185244,70.4170286 353.421714,70.7020898 355.106607,70.7020898 L364.397042,70.7020898 C368.631327,70.7020898 371.864381,71.6851102 374.088851,73.651151 C376.325083,75.6245388 377.435113,78.4633959 377.435113,82.1868245 C377.435113,85.7647837 376.445643,88.6785796 374.469643,90.9193959 C372.498054,93.1572735 369.958952,94.2828245 366.846458,94.2828245 L340.405696,94.2828245 L340.405696,86.2011918 Z" id="Fill-32" fill="#2B357C"></path>
+                  <path d="M394.309036,94.2835592 L383.605702,94.2835592 L383.605702,55.5269878 L394.309036,55.5269878 L394.309036,94.2835592 Z M394.309036,51.158498 L383.605702,51.158498 L383.605702,41.5501714 L394.309036,41.5501714 L394.309036,51.158498 Z" id="Fill-33" fill="#2B357C"></path>
+                  <path d="M410.290524,74.9396571 C410.290524,78.6234122 411.159435,81.4990041 412.892845,83.5502694 C414.626256,85.6162286 417.044798,86.6403918 420.157292,86.6403918 C423.238911,86.6403918 425.660393,85.6162286 427.421738,83.5502694 C429.180143,81.4990041 430.060815,78.6234122 430.060815,74.9396571 C430.060815,71.255902 429.188964,68.3920653 427.437911,66.3466776 C425.689798,64.3012898 423.260964,63.2785959 420.157292,63.2785959 C417.071262,63.2785959 414.65419,64.3071673 412.910488,66.359902 C411.159435,68.4229224 410.290524,71.2808816 410.290524,74.9396571 M440.761208,74.9396571 C440.761208,81.0170449 438.910179,85.8704327 435.205179,89.4998204 C431.50606,93.1248 426.50578,94.9336163 420.227863,94.9336163 C413.947006,94.9336163 408.934964,93.1189224 405.193208,89.4807184 C401.451452,85.8454531 399.58425,81.002351 399.58425,74.9396571 C399.58425,68.8608 401.451452,63.9971265 405.193208,60.3442286 C408.934964,56.6942694 413.947006,54.8692898 420.227863,54.8692898 C426.461673,54.8692898 431.441369,56.6942694 435.174304,60.3442286 C438.899887,63.9971265 440.761208,68.8608 440.761208,74.9396571" id="Fill-34" fill="#2B357C"></path>
+                  <path d="M445.826179,55.5255184 L465.10247,55.5255184 C470.929024,55.5255184 475.091268,56.6246204 477.581851,58.8140082 C480.078315,61.0092735 481.329488,64.6416 481.329488,69.7153959 L481.329488,94.2820898 L471.056935,94.2820898 L471.056935,70.9746612 C471.056935,68.0755592 470.609982,66.1962122 469.714607,65.3336816 C468.811881,64.4740898 467.019661,64.0420898 464.314423,64.0420898 L456.095792,64.0420898 L456.095792,94.2820898 L445.826179,94.2820898 L445.826179,55.5255184 Z" id="Fill-35" fill="#2B357C"></path>
+                  <polygon id="Fill-36" fill="#2B357C" points="0 36.8613551 24.113375 36.8613551 24.113375 12.7369469 0 12.7369469"></polygon>
+                  <polygon id="Fill-37" fill="#F6921E" points="97.4215048 15.9108245 81.5019137 34.6372898 62.7640232 18.7266122 78.6837613 0"></polygon>
+                  <polygon id="Fill-38" fill="#2B357C" points="28.6814048 36.8613551 52.7947798 36.8613551 52.7947798 12.7369469 28.6814048 12.7369469"></polygon>
+                  <polygon id="Fill-39" fill="#2B357C" points="0 65.5349878 24.113375 65.5349878 24.113375 41.4105796 0 41.4105796"></polygon>
+                  <polygon id="Fill-40" fill="#2B357C" points="28.6814048 65.5349878 52.7947798 65.5349878 52.7947798 41.4105796 28.6814048 41.4105796"></polygon>
+                  <polygon id="Fill-41" fill="#F6921E" points="57.4495536 65.5349878 81.5629286 65.5349878 81.5629286 41.4105796 57.4495536 41.4105796"></polygon>
+                  <polygon id="Fill-42" fill="#2B357C" points="0.0352857143 94.2262531 24.1516012 94.2262531 24.1516012 70.1106612 0.0352857143 70.1106612"></polygon>
+                  <polygon id="Fill-43" fill="#2B357C" points="28.7211012 94.2262531 52.8374167 94.2262531 52.8374167 70.1106612 28.7211012 70.1106612"></polygon>
+                  <polygon id="Fill-44" fill="#2B357C" points="57.48925 94.2262531 81.5996845 94.2262531 81.5996845 70.1106612 57.48925 70.1106612"></polygon>
+                  <path d="M487.322179,53.1636245 C488.119048,53.1636245 488.538065,52.7933388 488.538065,52.1115429 C488.538065,51.3797878 488.13669,51.0535837 487.226613,51.0535837 L486.986964,51.0535837 L486.986964,53.1636245 L487.322179,53.1636245 Z M490.142095,57.3366857 L488.87328,57.3366857 L486.986964,54.5845224 L486.986964,57.3366857 L485.950446,57.3366857 L485.950446,50.0470531 L487.192798,50.0470531 C488.763012,50.0470531 489.596637,50.7744 489.596637,52.1277061 C489.596637,53.2165224 488.976196,53.9321143 487.920565,54.112849 L490.142095,57.3366857 Z M483.642173,50.1205224 C482.779143,51.0682776 482.288083,52.3246041 482.288083,53.5794612 C482.288083,56.5344 484.619881,58.883951 487.550065,58.883951 C490.437613,58.883951 492.806167,56.5182367 492.806167,53.6161959 C492.806167,50.7744 490.437613,48.3675429 487.629458,48.3675429 C486.026899,48.3675429 484.690452,48.9523592 483.642173,50.1205224 L483.642173,50.1205224 Z M493.829452,53.6161959 C493.829452,57.0971755 491.024238,59.9081143 487.550065,59.9081143 C484.053839,59.9081143 481.266268,57.0971755 481.266268,53.5794612 C481.266268,50.1205224 484.109708,47.3536653 487.648571,47.3536653 C491.024238,47.3536653 493.829452,50.2101551 493.829452,53.6161959 L493.829452,53.6161959 Z" id="Fill-45" fill="#2B357C"></path>
+                  <path d="M137.352583,50.8333224 L109.79444,50.8333224 C106.82897,50.8333224 104.658899,51.3828735 103.270994,52.4849143 C101.88897,53.5884245 101.197958,55.3384653 101.197958,57.7365061 C101.197958,59.6584653 101.784583,61.1028735 102.963714,62.0594449 C104.147256,63.0160163 105.905661,63.4979755 108.240399,63.4979755 L123.013351,63.4979755 C129.095726,63.4979755 133.429988,64.6470367 136.002905,66.948098 C138.577292,69.2491592 139.86375,73.0872 139.86375,78.4534041 C139.86375,83.8974857 138.375869,87.8942204 135.407458,90.4480163 C132.434637,93.0032816 127.76222,94.2831184 121.388738,94.2831184 L91.6943393,94.2831184 L91.6943393,84.8937306 L119.617101,84.8937306 C122.792815,84.8937306 125.033458,84.4294041 126.336089,83.5051592 C127.63578,82.5794449 128.287095,81.0468735 128.287095,78.9030367 C128.287095,76.6930776 127.691649,75.1193633 126.499286,74.186302 C125.308393,73.2488327 123.266232,72.7756898 120.377214,72.7756898 L107.19506,72.7756898 C101.106804,72.7756898 96.6534524,71.5605061 93.8423571,69.1257306 C91.025381,66.6953633 89.6183631,62.8632 89.6183631,57.6116082 C89.6183631,52.0044245 91.0974226,47.913649 94.0555417,45.3245878 C97.0166012,42.7399347 101.721363,41.4454041 108.166887,41.4454041 L137.352583,41.4454041 L137.352583,50.8333224 Z" id="Fill-72" fill="#2B357C"></path>
+                  <path d="M162.661262,85.7649306 L170.86078,85.7649306 L170.86078,55.5249306 L181.127452,55.5249306 L181.127452,93.2411755 C181.127452,98.3796245 179.932149,102.183869 177.535661,104.658318 C175.136232,107.12689 171.466518,108.367053 166.532399,108.367053 L146.501728,108.367053 L146.501728,100.504359 L164.776935,100.504359 C166.732351,100.504359 168.233464,100.026808 169.290565,99.0746449 C170.337375,98.1195429 170.86078,96.7412571 170.86078,94.9250939 L170.86078,94.2829714 L161.837929,94.2829714 C156.04078,94.2829714 151.90794,93.1441959 149.443821,90.859298 C146.972204,88.5773388 145.735734,84.7657469 145.735734,79.4392163 L145.735734,55.5249306 L155.895226,55.5249306 L155.895226,78.6501551 C155.895226,81.5742367 156.334827,83.4903184 157.203738,84.4042776 C158.074119,85.3094204 159.892804,85.7649306 162.661262,85.7649306" id="Fill-73" fill="#2B357C"></path>
+                  <path d="M189.185827,55.5255184 L208.459179,55.5255184 C214.287202,55.5255184 218.447976,56.6246204 220.93856,58.8140082 C223.436494,61.0092735 224.686196,64.6416 224.686196,69.7153959 L224.686196,94.2820898 L214.419524,94.2820898 L214.419524,70.9746612 C214.419524,68.0755592 213.96522,66.1962122 213.068375,65.3336816 C212.168589,64.4740898 210.374899,64.0420898 207.669661,64.0420898 L199.45397,64.0420898 L199.45397,94.2820898 L189.185827,94.2820898 L189.185827,55.5255184 Z" id="Fill-74" fill="#2B357C"></path>
+                  <path d="M253.489631,85.9844571 L264.389976,85.9844571 L264.389976,94.2820898 L250.466821,94.2820898 C246.932369,94.2820898 244.036,93.9118041 241.770363,93.1888653 C239.492964,92.4571102 237.525786,91.2757224 235.845304,89.6491102 C234.039851,87.8829061 232.632833,85.7199673 231.608077,83.164702 C230.590673,80.6123755 230.08197,77.9189878 230.08197,75.0595592 C230.08197,72.0708245 230.587732,69.276049 231.596315,66.676702 C232.599018,64.084702 234.016327,61.9070694 235.845304,60.1599673 C237.544899,58.5318857 239.544423,57.3519673 241.842405,56.6202122 C244.133036,55.8899265 247.005881,55.5255184 250.466821,55.5255184 L264.389976,55.5255184 L264.389976,63.9304163 L253.489631,63.9304163 C248.66431,63.9304163 245.344512,64.7650286 243.522887,66.4254367 C241.702732,68.0887837 240.785304,70.9746612 240.785304,75.0860082 C240.785304,77.4531918 241.160214,79.4177633 241.901214,80.9650286 C242.646625,82.5122939 243.799292,83.767151 245.353333,84.7281306 C246.122268,85.1865796 247.014702,85.5069061 248.033577,85.6993959 C249.056863,85.8816 250.869667,85.9844571 253.489631,85.9844571" id="Fill-75" fill="#2B357C"></path>
+                  <path d="M273.558381,63.2778612 L266.241006,63.2778612 L266.241006,55.5253714 L273.558381,55.5253714 L273.558381,51.4874939 C273.558381,47.5421878 274.286149,44.8811265 275.754917,43.5057796 C277.208982,42.131902 280.014196,41.445698 284.164679,41.445698 L293.884423,41.445698 L293.884423,48.8631673 L289.020875,48.8631673 C287.265411,48.8631673 286.017179,49.142351 285.280589,49.6860245 C284.527827,50.2311673 284.164679,51.1363102 284.164679,52.3970449 L284.164679,55.5253714 L293.884423,55.5253714 L293.884423,63.2778612 L284.164679,63.2778612 L284.164679,94.2834122 L273.558381,94.2834122 L273.558381,63.2778612 Z" id="Fill-76" fill="#2B357C"></path>
+                  <path d="M332.89131,94.2828245 L313.56356,94.2828245 C307.901673,94.2828245 303.805589,93.1572735 301.287071,90.9135184 C298.765613,88.6653551 297.507089,85.0653551 297.507089,80.112049 L297.507089,55.5262531 L307.662024,55.5262531 L307.662024,79.2965388 C307.662024,81.8841306 308.119268,83.6047837 309.013173,84.4673143 C309.915899,85.3327837 311.709589,85.7647837 314.395714,85.7647837 L322.627577,85.7647837 L322.627577,55.5262531 L332.89131,55.5262531 L332.89131,94.2828245 Z" id="Fill-77" fill="#2B357C"></path>
+                  <path d="M340.405696,86.2011918 L361.97997,86.2011918 C363.903042,86.2011918 365.298298,85.9058449 366.17897,85.3092735 C367.058173,84.7141714 367.502185,83.7649469 367.502185,82.4483755 C367.502185,81.1450286 367.055232,80.1825796 366.162798,79.5786612 C365.274774,78.9732735 363.882458,78.6691102 361.97997,78.6691102 L353.118845,78.6691102 C347.884798,78.6691102 344.354756,77.8682939 342.514018,76.2563755 C340.67181,74.6503347 339.75144,71.7953143 339.75144,67.6927837 C339.75144,63.5182531 340.86294,60.448702 343.08447,58.4782531 C345.30747,56.5092735 348.753708,55.5262531 353.408482,55.5262531 L375.473815,55.5262531 L375.473815,63.6078857 L357.336958,63.6078857 C354.377369,63.6078857 352.457238,63.8650286 351.567744,64.3896 C350.68119,64.9097633 350.234238,65.8398857 350.234238,67.1740898 C350.234238,68.3833959 350.631202,69.2767837 351.406018,69.8483755 C352.185244,70.4170286 353.421714,70.7020898 355.106607,70.7020898 L364.397042,70.7020898 C368.631327,70.7020898 371.864381,71.6851102 374.088851,73.651151 C376.325083,75.6245388 377.435113,78.4633959 377.435113,82.1868245 C377.435113,85.7647837 376.445643,88.6785796 374.469643,90.9193959 C372.498054,93.1572735 369.958952,94.2828245 366.846458,94.2828245 L340.405696,94.2828245 L340.405696,86.2011918 Z" id="Fill-78" fill="#2B357C"></path>
+                  <path d="M394.309036,94.2835592 L383.605702,94.2835592 L383.605702,55.5269878 L394.309036,55.5269878 L394.309036,94.2835592 Z M394.309036,51.158498 L383.605702,51.158498 L383.605702,41.5501714 L394.309036,41.5501714 L394.309036,51.158498 Z" id="Fill-79" fill="#2B357C"></path>
+                  <path d="M410.290524,74.9396571 C410.290524,78.6234122 411.159435,81.4990041 412.892845,83.5502694 C414.626256,85.6162286 417.044798,86.6403918 420.157292,86.6403918 C423.238911,86.6403918 425.660393,85.6162286 427.421738,83.5502694 C429.180143,81.4990041 430.060815,78.6234122 430.060815,74.9396571 C430.060815,71.255902 429.188964,68.3920653 427.437911,66.3466776 C425.689798,64.3012898 423.260964,63.2785959 420.157292,63.2785959 C417.071262,63.2785959 414.65419,64.3071673 412.910488,66.359902 C411.159435,68.4229224 410.290524,71.2808816 410.290524,74.9396571 M440.761208,74.9396571 C440.761208,81.0170449 438.910179,85.8704327 435.205179,89.4998204 C431.50606,93.1248 426.50578,94.9336163 420.227863,94.9336163 C413.947006,94.9336163 408.934964,93.1189224 405.193208,89.4807184 C401.451452,85.8454531 399.58425,81.002351 399.58425,74.9396571 C399.58425,68.8608 401.451452,63.9971265 405.193208,60.3442286 C408.934964,56.6942694 413.947006,54.8692898 420.227863,54.8692898 C426.461673,54.8692898 431.441369,56.6942694 435.174304,60.3442286 C438.899887,63.9971265 440.761208,68.8608 440.761208,74.9396571" id="Fill-80" fill="#2B357C"></path>
+                  <path d="M445.826179,55.5255184 L465.10247,55.5255184 C470.929024,55.5255184 475.091268,56.6246204 477.581851,58.8140082 C480.078315,61.0092735 481.329488,64.6416 481.329488,69.7153959 L481.329488,94.2820898 L471.056935,94.2820898 L471.056935,70.9746612 C471.056935,68.0755592 470.609982,66.1962122 469.714607,65.3336816 C468.811881,64.4740898 467.019661,64.0420898 464.314423,64.0420898 L456.095792,64.0420898 L456.095792,94.2820898 L445.826179,94.2820898 L445.826179,55.5255184 Z" id="Fill-81" fill="#2B357C"></path>
+                  <polygon id="Fill-82" fill="#2B357C" points="0 36.8613551 24.113375 36.8613551 24.113375 12.7369469 0 12.7369469"></polygon>
+                  <polygon id="Fill-83" fill="#F6921E" points="97.4215048 15.9108245 81.5019137 34.6372898 62.7640232 18.7266122 78.6837613 0"></polygon>
+                  <polygon id="Fill-84" fill="#2B357C" points="28.6814048 36.8613551 52.7947798 36.8613551 52.7947798 12.7369469 28.6814048 12.7369469"></polygon>
+                  <polygon id="Fill-85" fill="#2B357C" points="0 65.5349878 24.113375 65.5349878 24.113375 41.4105796 0 41.4105796"></polygon>
+                  <polygon id="Fill-86" fill="#2B357C" points="28.6814048 65.5349878 52.7947798 65.5349878 52.7947798 41.4105796 28.6814048 41.4105796"></polygon>
+                  <polygon id="Fill-87" fill="#F6921E" points="57.4495536 65.5349878 81.5629286 65.5349878 81.5629286 41.4105796 57.4495536 41.4105796"></polygon>
+                  <polygon id="Fill-88" fill="#2B357C" points="0.0352857143 94.2262531 24.1516012 94.2262531 24.1516012 70.1106612 0.0352857143 70.1106612"></polygon>
+                  <polygon id="Fill-89" fill="#2B357C" points="28.7211012 94.2262531 52.8374167 94.2262531 52.8374167 70.1106612 28.7211012 70.1106612"></polygon>
+                  <polygon id="Fill-90" fill="#2B357C" points="57.48925 94.2262531 81.5996845 94.2262531 81.5996845 70.1106612 57.48925 70.1106612"></polygon>
+                  <path d="M487.322179,53.1636245 C488.119048,53.1636245 488.538065,52.7933388 488.538065,52.1115429 C488.538065,51.3797878 488.13669,51.0535837 487.226613,51.0535837 L486.986964,51.0535837 L486.986964,53.1636245 L487.322179,53.1636245 Z M490.142095,57.3366857 L488.87328,57.3366857 L486.986964,54.5845224 L486.986964,57.3366857 L485.950446,57.3366857 L485.950446,50.0470531 L487.192798,50.0470531 C488.763012,50.0470531 489.596637,50.7744 489.596637,52.1277061 C489.596637,53.2165224 488.976196,53.9321143 487.920565,54.112849 L490.142095,57.3366857 Z M483.642173,50.1205224 C482.779143,51.0682776 482.288083,52.3246041 482.288083,53.5794612 C482.288083,56.5344 484.619881,58.883951 487.550065,58.883951 C490.437613,58.883951 492.806167,56.5182367 492.806167,53.6161959 C492.806167,50.7744 490.437613,48.3675429 487.629458,48.3675429 C486.026899,48.3675429 484.690452,48.9523592 483.642173,50.1205224 L483.642173,50.1205224 Z M493.829452,53.6161959 C493.829452,57.0971755 491.024238,59.9081143 487.550065,59.9081143 C484.053839,59.9081143 481.266268,57.0971755 481.266268,53.5794612 C481.266268,50.1205224 484.109708,47.3536653 487.648571,47.3536653 C491.024238,47.3536653 493.829452,50.2101551 493.829452,53.6161959 L493.829452,53.6161959 Z" id="Fill-91" fill="#2B357C"></path>
+                </g>
+              </g>
+            </svg>
+        </div>
+        <nav className="top-actions" aria-label="Header links">
+          <a href="https://github.com/syncfusion/ej2-react-ui-components" aria-label="Source code">
+            <svg
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z" />
+      </svg>
+          </a>
+          <a href="https://twitter.com/Syncfusion" aria-label="Syncfusion on X">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+      </svg>
+          </a>
+          <a href="https://www.youtube.com/syncfusioninc" aria-label="Syncfusion videos">
+            <svg width="29" height="20" viewBox="0 0 29 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+        <path fillRule="evenodd" clipRule="evenodd" d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z" />
+      </svg>
+          </a>
+        </nav>
+      </header>
+      <section className="workspace-content">
+        <div className="hero-section">
+          <h1>Welcome to Your New <span className="app-name">React App</span></h1>
+          <p>Your application is running successfully.</p>
+          <div className="component-links">
+          __COMPONENT_LINK__
+          
+          </div>
+        </div>
+        __SHADY_DIVIDER__
+        <p className="resource-heading">
+          Start exploring docs, live demos, AI guidance, and production-ready components.
+        </p>
+        <div className="quick-links">
+          {resourceLinks.map((item) => (
+            <a className="link-box" key={item.title} href={item.link}>
+              <span className="link-header">
+                <span className={\`link-icon \${item.tone}\`}>
+                  {item.icon}
+                </span>
+                <span className="link-title">{item.title}</span>
+              </span>
+              <span className="link-description">{item.description}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+      <footer className="workspace-footer">
+        <div className="footer-left">
+          <a href="https://www.syncfusion.com/copyright">
+            Copyright © 2001 - 2026 Syncfusion®, Inc. All Rights Reserved.
+          </a>
+        </div>
+        <nav className="footer-links" aria-label="Footer links">
+          <a href="https://www.syncfusion.com/privacy">Privacy Policy</a>
+          <a href="https://www.syncfusion.com/terms-of-use">Terms of Service</a>
+          <a href="https://www.syncfusion.com/contact">Contact Us</a>
+        </nav>
+      </footer>
+    </main>
+  );
+}
+`;
+const COMPONENT_LINK_ICONS = {
+  'grid': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+  <path d="M1.66667 15C1.20833 15 0.815972 14.8368 0.489583 14.5104C0.163194 14.184 0 13.7917 0 13.3333V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H13.3333C13.7917 0 14.184 0.163194 14.5104 0.489583C14.8368 0.815972 15 1.20833 15 1.66667V13.3333C15 13.7917 14.8368 14.184 14.5104 14.5104C14.184 14.8368 13.7917 15 13.3333 15H1.66667ZM1.66667 13.3333H4.4375V10.5625H1.66667V13.3333ZM6.10417 13.3333H8.89583V10.5625H6.10417V13.3333ZM10.5625 13.3333H13.3333V10.5625H10.5625V13.3333ZM1.66667 8.89583H4.4375V6.10417H1.66667V8.89583ZM6.10417 8.89583H8.89583V6.10417H6.10417V8.89583ZM10.5625 8.89583H13.3333V6.10417H10.5625V8.89583ZM1.66667 4.4375H4.4375V1.66667H1.66667V4.4375ZM6.10417 4.4375H8.89583V1.66667H6.10417V4.4375ZM10.5625 4.4375H13.3333V1.66667H10.5625V4.4375Z" fill="#005FAA" />
+</svg>
+  `,
+  'chart': `
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M10 13.3333V7.5H13.3333V13.3333H10ZM5 13.3333V0H8.33333V13.3333H5ZM0 13.3333V4.16667H3.33333V13.3333H0Z" fill="#005FAA" />
+</svg>
+  `,
+  'gantt': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+  <path d="M3.33333 11.6667H5V3.33333H3.33333V11.6667ZM10 10H11.6667V3.33333H10V10ZM6.66667 7.5H8.33333V3.33333H6.66667V7.5ZM1.66667 15C1.20833 15 0.815972 14.8368 0.489583 14.5104C0.163194 14.184 0 13.7917 0 13.3333V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H13.3333C13.7917 0 14.184 0.163194 14.5104 0.489583C14.8368 0.815972 15 1.20833 15 1.66667V13.3333C15 13.7917 14.8368 14.184 14.5104 14.5104C14.184 14.8368 13.7917 15 13.3333 15H1.66667ZM1.66667 13.3333H13.3333V1.66667H1.66667V13.3333ZM1.66667 1.66667V13.3333V1.66667Z" fill="#005FAA" />
+</svg>
+  `,
+  'file-manager': `
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
+  <path d="M1.66667 13.3333C1.20833 13.3333 0.815972 13.1701 0.489583 12.8438C0.163194 12.5174 0 12.125 0 11.6667V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H6.66667L8.33333 1.66667H15C15.4583 1.66667 15.8507 1.82986 16.1771 2.15625C16.5035 2.48264 16.6667 2.875 16.6667 3.33333H7.64583L5.97917 1.66667H1.66667V11.6667L3.66667 5H17.9167L15.7708 12.1458C15.6597 12.5069 15.4549 12.7951 15.1562 13.0104C14.8576 13.2257 14.5278 13.3333 14.1667 13.3333H1.66667ZM3.41667 11.6667H14.1667L15.6667 6.66667H4.91667L3.41667 11.6667ZM3.41667 11.6667L4.91667 6.66667L3.41667 11.6667ZM1.66667 3.33333V1.66667V3.33333Z" fill="#005FAA" />
+</svg>
+  `,
+  'rich-text-editor': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
+  <path d="M0 8.33333V6.66667H5.83333V8.33333H0ZM0 5V3.33333H9.16667V5H0ZM0 1.66667V0H9.16667V1.66667H0ZM7.5 13.3333V10.7708L12.1042 6.1875C12.2292 6.0625 12.3681 5.97222 12.5208 5.91667C12.6736 5.86111 12.8264 5.83333 12.9792 5.83333C13.1458 5.83333 13.3056 5.86458 13.4583 5.92708C13.6111 5.98958 13.75 6.08333 13.875 6.20833L14.6458 6.97917C14.7569 7.10417 14.8438 7.24306 14.9062 7.39583C14.9688 7.54861 15 7.70139 15 7.85417C15 8.00694 14.9722 8.16319 14.9167 8.32292C14.8611 8.48264 14.7708 8.625 14.6458 8.75L10.0625 13.3333H7.5ZM13.75 7.85417L12.9792 7.08333L13.75 7.85417ZM8.75 12.0833H9.54167L12.0625 9.54167L11.6875 9.14583L11.2917 8.77083L8.75 11.2917V12.0833ZM11.6875 9.14583L11.2917 8.77083L12.0625 9.54167L11.6875 9.14583Z" fill="#005FAA" />
+</svg>
+  `,
+  'scheduler': `
+<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.66667 16.6667C1.20833 16.6667 0.815972 16.5035 0.489583 16.1771C0.163194 15.8507 0 15.4583 0 15V3.33333C0 2.875 0.163194 2.48264 0.489583 2.15625C0.815972 1.82986 1.20833 1.66667 1.66667 1.66667H2.5V0H4.16667V1.66667H10.8333V0H12.5V1.66667H13.3333C13.7917 1.66667 14.184 1.82986 14.5104 2.15625C14.8368 2.48264 15 2.875 15 3.33333V15C15 15.4583 14.8368 15.8507 14.5104 16.1771C14.184 16.5035 13.7917 16.6667 13.3333 16.6667H1.66667ZM1.66667 15H13.3333V6.66667H1.66667V15ZM1.66667 5H13.3333V3.33333H1.66667V5ZM1.66667 5V3.33333V5ZM7.5 10C7.26389 10 7.06597 9.92014 6.90625 9.76042C6.74653 9.60069 6.66667 9.40278 6.66667 9.16667C6.66667 8.93056 6.74653 8.73264 6.90625 8.57292C7.06597 8.41319 7.26389 8.33333 7.5 8.33333C7.73611 8.33333 7.93403 8.41319 8.09375 8.57292C8.25347 8.73264 8.33333 8.93056 8.33333 9.16667C8.33333 9.40278 8.25347 9.60069 8.09375 9.76042C7.93403 9.92014 7.73611 10 7.5 10ZM4.16667 10C3.93056 10 3.73264 9.92014 3.57292 9.76042C3.41319 9.60069 3.33333 9.40278 3.33333 9.16667C3.33333 8.93056 3.41319 8.73264 3.57292 8.57292C3.73264 8.41319 3.93056 8.33333 4.16667 8.33333C4.40278 8.33333 4.60069 8.41319 4.76042 8.57292C4.92014 8.73264 5 8.93056 5 9.16667C5 9.40278 4.92014 9.60069 4.76042 9.76042C4.60069 9.92014 4.40278 10 4.16667 10ZM10.8333 10C10.5972 10 10.3993 9.92014 10.2396 9.76042C10.0799 9.60069 10 9.40278 10 9.16667C10 8.93056 10.0799 8.73264 10.2396 8.57292C10.3993 8.41319 10.5972 8.33333 10.8333 8.33333C11.0694 8.33333 11.2674 8.41319 11.4271 8.57292C11.5868 8.73264 11.6667 8.93056 11.6667 9.16667C11.6667 9.40278 11.5868 9.60069 11.4271 9.76042C11.2674 9.92014 11.0694 10 10.8333 10ZM7.5 13.3333C7.26389 13.3333 7.06597 13.2535 6.90625 13.0938C6.74653 12.934 6.66667 12.7361 6.66667 12.5C6.66667 12.2639 6.74653 12.066 6.90625 11.9062C7.06597 11.7465 7.26389 11.6667 7.5 11.6667C7.73611 11.6667 7.93403 11.7465 8.09375 11.9062C8.25347 12.066 8.33333 12.2639 8.33333 12.5C8.33333 12.7361 8.25347 12.934 8.09375 13.0938C7.93403 13.2535 7.73611 13.3333 7.5 13.3333ZM4.16667 13.3333C3.93056 13.3333 3.73264 13.2535 3.57292 13.0938C3.41319 12.934 3.33333 12.7361 3.33333 12.5C3.33333 12.2639 3.41319 12.066 3.57292 11.9062C3.73264 11.7465 3.93056 11.6667 4.16667 11.6667C4.40278 11.6667 4.60069 11.7465 4.76042 11.9062C4.92014 12.066 5 12.2639 5 12.5C5 12.7361 4.92014 12.934 4.76042 13.0938C4.60069 13.2535 4.40278 13.3333 4.16667 13.3333ZM10.8333 13.3333C10.5972 13.3333 10.3993 13.2535 10.2396 13.0938C10.0799 12.934 10 12.7361 10 12.5C10 12.2639 10.0799 12.066 10.2396 11.9062C10.3993 11.7465 10.5972 11.6667 10.8333 11.6667C11.0694 11.6667 11.2674 11.7465 11.4271 11.9062C11.5868 12.066 11.6667 12.2639 11.6667 12.5C11.6667 12.7361 11.5868 12.934 11.4271 13.0938C11.2674 13.2535 11.0694 13.3333 10.8333 13.3333Z" fill="#005FAA" />
+  </svg>
+  `,
+  'diagram': `
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.8333 15V12.5H7.5V4.16667H5.83333V6.66667H0V0H5.83333V2.5H10.8333V0H16.6667V6.66667H10.8333V4.16667H9.16667V10.8333H10.8333V8.33333H16.6667V15H10.8333ZM1.66667 1.66667V5V1.66667ZM12.5 10V13.3333V10ZM12.5 1.66667V5V1.66667ZM12.5 5H15V1.66667H12.5V5ZM12.5 13.3333H15V10H12.5V13.3333ZM1.66667 5H4.16667V1.66667H1.66667V5Z" fill="#005FAA" />
+  </svg>
+  `,
+  'pdf-viewer': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17" viewBox="0 0 15 17" fill="none">
+  <path d="M2.5 16.6667C2.04167 16.6667 1.64931 16.5035 1.32292 16.1771C0.996528 15.8507 0.833333 15.4583 0.833333 15V1.66667C0.833333 1.20833 0.996528 0.815972 1.32292 0.489583C1.64931 0.163194 2.04167 0 2.5 0H9.16667L14.1667 5V15C14.1667 15.4583 14.0035 15.8507 13.6771 16.1771C13.3507 16.5035 12.9583 16.6667 12.5 16.6667H2.5ZM8.33333 5.83333V1.66667H2.5V15H12.5V5.83333H8.33333ZM4.16667 12.5H5.83333V10.8333H6.66667C7.01389 10.8333 7.30903 10.7118 7.55208 10.4688C7.79514 10.2257 7.91667 9.93056 7.91667 9.58333C7.91667 9.23611 7.79514 8.94097 7.55208 8.69792C7.30903 8.45486 7.01389 8.33333 6.66667 8.33333H4.16667V12.5ZM5.83333 9.58333V9.16667H6.66667C6.77778 9.16667 6.875 9.20833 6.95833 9.29167C7.04167 9.375 7.08333 9.47222 7.08333 9.58333C7.08333 9.69444 7.04167 9.79167 6.95833 9.875C6.875 9.95833 6.77778 10 6.66667 10H5.83333V9.58333ZM8.33333 12.5H10C10.3472 12.5 10.6424 12.3785 10.8854 12.1354C11.1285 11.8924 11.25 11.5972 11.25 11.25V9.58333C11.25 9.23611 11.1285 8.94097 10.8854 8.69792C10.6424 8.45486 10.3472 8.33333 10 8.33333H8.33333V12.5ZM9.16667 11.6667V9.16667H10C10.1111 9.16667 10.2083 9.20833 10.2917 9.29167C10.375 9.375 10.4167 9.47222 10.4167 9.58333V11.25C10.4167 11.3611 10.375 11.4583 10.2917 11.5417C10.2083 11.625 10.1111 11.6667 10 11.6667H9.16667Z" fill="#005FAA"/>
+</svg>
+  `,
+  'docx-editor': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17" viewBox="0 0 15 17" fill="none">
+  <path d="M2.5 16.6667C2.04167 16.6667 1.64931 16.5035 1.32292 16.1771C0.996528 15.8507 0.833333 15.4583 0.833333 15V1.66667C0.833333 1.20833 0.996528 0.815972 1.32292 0.489583C1.64931 0.163194 2.04167 0 2.5 0H9.16667L14.1667 5V15C14.1667 15.4583 14.0035 15.8507 13.6771 16.1771C13.3507 16.5035 12.9583 16.6667 12.5 16.6667H2.5ZM8.33333 5.83333V1.66667H2.5V15H12.5V5.83333H8.33333ZM4.16667 7.5H10.8333V8.75H4.16667V7.5ZM4.16667 10H10.8333V11.25H4.16667V10ZM4.16667 12.5H8.33333V13.75H4.16667V12.5ZM11.25 1.45833V4.16667H13.9583L11.25 1.45833Z" fill="#005FAA"/>
+</svg>
+  `,
+  'spreadsheet-editor': `
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+  <path d="M1.66667 15C1.20833 15 0.815972 14.8368 0.489583 14.5104C0.163194 14.184 0 13.7917 0 13.3333V1.66667C0 1.20833 0.163194 0.815972 0.489583 0.489583C0.815972 0.163194 1.20833 0 1.66667 0H13.3333C13.7917 0 14.184 0.163194 14.5104 0.489583C14.8368 0.815972 15 1.20833 15 1.66667V13.3333C15 13.7917 14.8368 14.184 14.5104 14.5104C14.184 14.8368 13.7917 15 13.3333 15H1.66667ZM1.66667 4.16667H4.16667V1.66667H1.66667V4.16667ZM5.83333 4.16667H9.16667V1.66667H5.83333V4.16667ZM10.8333 4.16667H13.3333V1.66667H10.8333V4.16667ZM1.66667 8.33333H4.16667V5.83333H1.66667V8.33333ZM5.83333 8.33333H9.16667V5.83333H5.83333V8.33333ZM10.8333 8.33333H13.3333V5.83333H10.8333V8.33333ZM1.66667 13.3333H4.16667V10H1.66667V13.3333ZM5.83333 13.3333H9.16667V10H5.83333V13.3333ZM10.8333 13.3333H13.3333V10H10.8333V13.3333ZM6.25 12.0833H8.75V11.25H6.25V12.0833ZM6.25 7.5H8.75V6.66667H6.25V7.5ZM6.25 3.33333H8.75V2.5H6.25V3.33333Z" fill="#005FAA"/>
+</svg>
+  `
+};
+
+export async function createReactProject(appName, appPath, options) {
+  // Determine if TypeScript or JavaScript
+  const isTypeScript = options.type === 'ts';
+  const viteTemplate = isTypeScript ? 'react-ts' : 'react';
+
+  // Create Vite React project
+  await runCommand('npm', [
+    'create',
+    'vite@latest',
+    appName,
+    '--',
+    '--template',
+    viteTemplate,
+    '--no-interactive'
+  ]);
+
+  const indexCSSPath = path.join(appPath, 'src', 'index.css');
+  await writeFile(indexCSSPath, '');
+  const assets = path.join(appPath, 'src', 'assets');
+  await rm(assets, { recursive: true, force: true });
+
+  const selectedTemplate = options.template || TEMPLATES.EMPTY;
+
+  if (options.styling === 'scss') {
+    await addPackagesToJson(appPath, ['sass']);
+  }
+  // Add theme package
+  const themePackageInfo = await getThemePackages(options.theme);
+
+  if (selectedTemplate === TEMPLATES.EMPTY) {
+    await createProjectFolderStructure(appPath, 'with-components');
+    await addTemplatePackages(appPath, selectedTemplate, 'react');
+    await addPackagesToJson(appPath, [themePackageInfo.base]);
+
+    await generateHomePage(appPath, isTypeScript, options.theme, options.styling);
+    await generateAppWithRouting(appPath, isTypeScript, [], options.styling);
+  } else {
+    // Always create components folder for routed templates
+    await createProjectFolderStructure(appPath, 'with-components');
+    await addTemplatePackages(appPath, selectedTemplate, 'react');
+    await addPackagesToJson(appPath, [themePackageInfo.base]);
+
+    // Generate Home page in components/
+    await generateHomePage(appPath, isTypeScript, options.theme, options.styling, selectedTemplate);
+
+    // Generate template-specific component pages
+    if (selectedTemplate === TEMPLATES.GRID) {
+      await generateGridTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.CHART) {
+      await generateChartTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.SCHEDULER) {
+      await generateSchedulerTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.GANTT) {
+      await generateGanttTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.FILEMANAGER) {
+      await generateFileManagerTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.DIAGRAM) {
+      await generateDiagramTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.RICHTEXTEDITOR) {
+      await generateRteTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.PDFVIEWER) {
+      await generatePDFTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.DOCXEDITOR) {
+      await generateDOCXTemplate(appPath, 'react', isTypeScript);
+    } else if (selectedTemplate === TEMPLATES.SPREADSHEETEDITOR) {
+      await generateSpreadsheetTemplate(appPath, 'react', isTypeScript);
+    }
+
+    // Generate App.tsx with router
+    await generateAppWithRouting(appPath, isTypeScript, [selectedTemplate], options.styling);
+  }
+  // Generate Syncfusion config
+  try {
+    await generateSyncfusionConfig(appPath, options);
+  } catch {
+    logger.warning('Syncfusion config generation skipped');
+  }
+}
+
+export async function generateHomePage(appPath, isTypeScript, theme, styling, selectedTemplates = []) {
+  const ext = isTypeScript ? '.tsx' : '.jsx';
+  const file = path.join(appPath, 'src', 'components', `Home${ext}`);
+
+  const templates = Array.isArray(selectedTemplates)
+    ? selectedTemplates
+    : selectedTemplates
+      ? [selectedTemplates]
+      : [];
+
+  const routeEntries = Object.entries(TEMPLATE_ROUTES).filter(([key]) =>
+    templates.includes(key)
+  );
+
+  const linkImport = routeEntries.length
+    ? `import { Link } from 'react-router';\n\n`
+    : '';
+
+  const componentLinks = routeEntries.length
+    ? `${routeEntries
+  .map(([, cfg]) => {
+    const componentName = cfg.route.replace('/', '');
+    const componentIcon = COMPONENT_LINK_ICONS[componentName] || '';
+    return `              <Link className="component-link-button" to="${cfg.route}">
+                ${componentIcon.trim()}
+                <span>${cfg.label}</span>
+              </Link>`;
+  })
+  .join('\n')}`
+  : '';
+
+  const shadyDivider = routeEntries.length === 0
+    ? '<div className="shady-divider" aria-hidden="true" />'
+    : '';
+
+  const appContent = HOME_PAGE_CONTENT
+    .replace('__LINK_IMPORT__', linkImport)
+    .replace('__COMPONENT_LINK__', componentLinks)
+    .replace('__SHADY_DIVIDER__', shadyDivider);
+
+  await writeFile(file, appContent);
+
+  await writeFile(path.join(appPath, 'src', 'Home.css'), HOME_PAGE_STYLES);
+  if (styling === 'scss') {
+    const themeImport = generateThemeImportStatement(theme, 'scss');
+    const appSCSS = `${themeImport}`;
+    await writeFile(path.join(appPath, 'src', 'styles.scss'), appSCSS);
+    await writeFile(path.join(appPath, 'src', 'App.css'), '');
+  } else {
+    const themeImport = generateThemeImportStatement(theme);
+    const appCSS = `${themeImport}`;
+    await writeFile(path.join(appPath, 'src', 'App.css'), appCSS);
+  }
+}
+/**
+ * Generate/regenerate src/App.{jsx,tsx} with a nav + route for every entry in
+ * `selectedTemplates` (in addition to Home). Used both when scaffolding a new
+ * project and when `sf add <component>` extends an existing one.
+ */
+export async function generateAppWithRouting(appPath, isTypeScript, selectedTemplates, styling) {
+  const ext = isTypeScript ? '.tsx' : '.jsx';
+  const appFile = path.join(appPath, 'src', `App${ext}`);
+  const templates = Array.isArray(selectedTemplates) ? selectedTemplates : [selectedTemplates];
+
+  const styleImport = styling === 'scss' ? `import './styles.scss';` : `import './App.css';`;
+  const homeStyleImport = `import './Home.css';`;
+  // Build nav: Home is shown only when component routes are available.
+  // Empty template keeps routing, but does not render navigation links.
+  const routeEntries = Object.entries(TEMPLATE_ROUTES).filter(
+    ([key]) => templates.includes(key)
+  );
+  const routeImports = routeEntries
+    .map(([, cfg]) => `import ${cfg.file} from './components/${cfg.file}';`)
+    .join('\n');
+
+  // Generate route definitions directly in JSX
+  const routeBlocks = routeEntries
+    .map(([, cfg]) => `<Route path="${cfg.route}" element={<${cfg.file} />} />`)
+    .join('\n            ');
+
+  const appContent = `import { BrowserRouter as Router, Routes, Route } from 'react-router';
+${styleImport}
+${homeStyleImport}
+import Home from './components/Home';
+${routeImports}
+
+function App() {
+  return (
+    <Router>
+      <div className="app-container">
+        <main className="app-main">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            ${routeBlocks}
+          </Routes>
+        </main>
+      </div>
+    </Router>
+  );
+}
+
+export default App;
+`;
+
+  await writeFile(appFile, appContent);
+}