@tanstack/cta-ui-base 0.15.4

package/src/components/file-viewer.tsx

@@ -0,0 +1,67 @@
+import CodeMirror from '@uiw/react-codemirror'
+import CodeMirrorMerge from 'react-codemirror-merge'
+
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+
+import { githubDarkInit } from '@uiw/codemirror-theme-github'
+
+const theme = githubDarkInit({
+  settings: {
+    background: 'oklch(0.07 0.005 285.823)',
+    foreground: '#c9d1d9',
+    gutterBackground: 'oklch(0.22 0.005 285.823)',
+  },
+})
+
+export default function FileViewer({
+  originalFile,
+  modifiedFile,
+  filePath,
+}: {
+  originalFile?: string
+  modifiedFile: string
+  filePath: string
+}) {
+  function getLanguage(file: string) {
+    if (file.endsWith('.js') || file.endsWith('.jsx')) {
+      return javascript({ jsx: true })
+    }
+    if (file.endsWith('.ts') || file.endsWith('.tsx')) {
+      return javascript({ typescript: true, jsx: true })
+    }
+    if (file.endsWith('.json')) {
+      return json()
+    }
+    if (file.endsWith('.css')) {
+      return css()
+    }
+    if (file.endsWith('.html')) {
+      return html()
+    }
+    return javascript()
+  }
+  const language = getLanguage(filePath)
+
+  if (!originalFile || originalFile === modifiedFile) {
+    return (
+      <CodeMirror
+        value={modifiedFile}
+        theme={theme}
+        height="100vh"
+        width="100%"
+        readOnly
+        extensions={[language]}
+        className="text-lg"
+      />
+    )
+  }
+  return (
+    <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
+      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
+      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
+    </CodeMirrorMerge>
+  )
+}

package/src/components/header.tsx

@@ -0,0 +1,29 @@
+import Logo from './icons/tanstack'
+
+export function AppHeader() {
+  return (
+    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4 flex items-center gap-2 text-lg sm:text-xl shadow-xl">
+      <div className="flex items-center gap-1.5">
+        <Logo />
+        <div className="font-black text-xl uppercase">TanStack</div>
+      </div>
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        stroke-width="0"
+        viewBox="0 0 256 512"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+      </svg>
+      <div className="hover:text-blue-500 flex items-center gap-2">
+        Create TanStack App{' '}
+        <span className="bg-gradient-to-r from-blue-500 to-cyan-500 text-white text-xs font-bold px-2 py-0.5 rounded">
+          ALPHA
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/icons/tailwind.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../../lib/utils'
+
+export default function Tailwind({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 54 33"
+      className={cn('w-10 h-10', className)}
+    >
+      <g clip-path="url(#a)">
+        <path
+          fill="#38bdf8"
+          fill-rule="evenodd"
+          d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
+          clip-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h54v32.4H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/icons/tanstack.tsx

@@ -0,0 +1,338 @@
+import { cn } from '../../lib/utils'
+
+export default function Logo({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 633 633"
+      className={cn('w-10 h-10', className)}
+    >
+      <defs>
+        <linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="71.65%">
+          <stop offset="0%" stopColor="#6BDAFF" />
+          <stop offset="31.922%" stopColor="#F9FFB5" />
+          <stop offset="70.627%" stopColor="#FFA770" />
+          <stop offset="100%" stopColor="#FF7373" />
+        </linearGradient>
+        <linearGradient
+          id="d"
+          x1="43.996%"
+          x2="53.441%"
+          y1="8.54%"
+          y2="93.872%"
+        >
+          <stop offset="0%" stopColor="#673800" />
+          <stop offset="100%" stopColor="#B65E00" />
+        </linearGradient>
+        <linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="f" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="g" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="h" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="j" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#2F8A00" />
+          <stop offset="100%" stopColor="#90FF57" />
+        </linearGradient>
+        <linearGradient id="k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%">
+          <stop offset="0%" stopColor="#EE2700" />
+          <stop offset="100%" stopColor="#FF008E" />
+        </linearGradient>
+        <linearGradient
+          id="l"
+          x1="61.109%"
+          x2="43.717%"
+          y1="3.633%"
+          y2="43.072%"
+        >
+          <stop offset="0%" stopColor="#FFF400" />
+          <stop offset="100%" stopColor="#3C8700" />
+        </linearGradient>
+        <linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFDF00" />
+          <stop offset="100%" stopColor="#FF9D00" />
+        </linearGradient>
+        <linearGradient id="n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="s" x1="78.334%" x2="31.668%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="t" x1="57.913%" x2="44.88%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <linearGradient id="u" x1="50.495%" x2="49.68%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#FFA400" />
+          <stop offset="100%" stopColor="#FF5E00" />
+        </linearGradient>
+        <circle id="a" cx="308.5" cy="308.5" r="308.5" />
+        <circle id="v" cx="307.5" cy="308.5" r="316.5" />
+      </defs>
+      <g fill="none" fillRule="evenodd" transform="translate(9 8)">
+        <mask id="c" fill="#fff">
+          <use xlinkHref="#a" />
+        </mask>
+        <use xlinkHref="#a" fill="url(#b)" />
+        <ellipse
+          cx="81.5"
+          cy="602.5"
+          fill="#015064"
+          stroke="#00CFE2"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="602.5"
+          fill="#015064"
+          stroke="#00CFE2"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="81.5"
+          cy="640.5"
+          fill="#015064"
+          stroke="#00A8B8"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="640.5"
+          fill="#015064"
+          stroke="#00A8B8"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="81.5"
+          cy="676.5"
+          fill="#015064"
+          stroke="#007782"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <ellipse
+          cx="535.5"
+          cy="676.5"
+          fill="#015064"
+          stroke="#007782"
+          strokeWidth="25"
+          mask="url(#c)"
+          rx="214.5"
+          ry="185.968"
+        />
+        <g mask="url(#c)">
+          <path
+            fill="url(#d)"
+            stroke="#6E3A00"
+            strokeWidth="6.088"
+            d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927"
+            transform="scale(-1 1) rotate(25 -300.37 -553.013)"
+          />
+          <g stroke="#2F8A00">
+            <path
+              fill="url(#e)"
+              strokeWidth="9.343"
+              d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#f)"
+              strokeWidth="9.343"
+              d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#g)"
+              strokeWidth="9.343"
+              d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#h)"
+              strokeWidth="9.343"
+              d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#i)"
+              strokeWidth="9.343"
+              d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              fill="url(#j)"
+              strokeWidth="9.343"
+              d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z"
+              transform="rotate(1 -6061.691 5926.397)"
+            />
+            <path
+              strokeLinecap="round"
+              strokeWidth="5.91"
+              d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"
+            />
+            <path
+              strokeLinecap="round"
+              strokeWidth="5.91"
+              d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"
+            />
+          </g>
+          <path
+            stroke="#830305"
+            strokeLinecap="round"
+            strokeLinejoin="bevel"
+            strokeWidth="6.937"
+            d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"
+          />
+          <path
+            fill="url(#k)"
+            d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z"
+            transform="scale(-1 1) rotate(-9 2092.128 2856.854)"
+          />
+          <path
+            fill="#D8D8D8"
+            stroke="#FFF"
+            strokeLinecap="round"
+            strokeLinejoin="bevel"
+            strokeWidth="4.414"
+            d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"
+          />
+        </g>
+        <ellipse
+          cx="308.5"
+          cy="720.5"
+          fill="url(#l)"
+          mask="url(#c)"
+          rx="266"
+          ry="316.5"
+        />
+        <ellipse
+          cx="308.5"
+          cy="720.5"
+          stroke="#6DA300"
+          strokeOpacity=".502"
+          strokeWidth="26"
+          mask="url(#c)"
+          rx="253"
+          ry="303.5"
+        />
+        <g mask="url(#c)">
+          <g transform="translate(389 -32)">
+            <circle cx="168.5" cy="113.5" r="113.5" fill="url(#m)" />
+            <circle
+              cx="168.5"
+              cy="113.5"
+              r="106"
+              stroke="#FFC900"
+              strokeOpacity=".529"
+              strokeWidth="15"
+            />
+            <path
+              stroke="url(#n)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M30 113H0"
+            />
+            <path
+              stroke="url(#o)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M33.5 79.5 7 74"
+            />
+            <path
+              stroke="url(#p)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m34 146-29 8"
+            />
+            <path
+              stroke="url(#q)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m45 177-24 13"
+            />
+            <path
+              stroke="url(#r)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m67 204-20 19"
+            />
+            <path
+              stroke="url(#s)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m94.373 227-13.834 22.847"
+            />
+            <path
+              stroke="url(#t)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="M127.5 243.5 120 268"
+            />
+            <path
+              stroke="url(#u)"
+              strokeLinecap="round"
+              strokeLinejoin="bevel"
+              strokeWidth="12"
+              d="m167.5 252.5.5 24.5"
+            />
+          </g>
+        </g>
+        <circle cx="307.5" cy="308.5" r="304" stroke="#000" strokeWidth="25" />
+      </g>
+    </svg>
+  )
+}

package/src/components/icons/typescript.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../../lib/utils'
+
+export default function Typescript({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 256 256"
+      width="256"
+      height="256"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      className={cn('w-10 h-10', className)}
+    >
+      <path
+        d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z"
+        fill="#3178C6"
+      />
+      <path
+        d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z"
+        fill="#FFF"
+      />
+    </svg>
+  )
+}

package/src/components/query-provider.tsx

@@ -0,0 +1,10 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/src/components/sidebar-items/add-ons.tsx

@@ -0,0 +1,94 @@
+import { Fragment, useMemo, useState } from 'react'
+import { InfoIcon } from 'lucide-react'
+
+import { Switch } from '../ui/switch'
+import { Label } from '../ui/label'
+
+import { useAddOns } from '../../store/project'
+
+import ImportCustomAddOn from '../custom-add-on-dialog'
+import AddOnInfoDialog from '../add-on-info-dialog'
+
+import type { AddOnInfo } from '../../types'
+
+const addOnTypeLabels: Record<string, string> = {
+  toolchain: 'Toolchain',
+  'add-on': 'Add-on',
+  example: 'Example',
+}
+
+export default function SelectedAddOns() {
+  const { availableAddOns, addOnState, toggleAddOn } = useAddOns()
+
+  const sortedAddOns = useMemo(() => {
+    return availableAddOns.sort((a, b) => {
+      return a.name.localeCompare(b.name)
+    })
+  }, [availableAddOns])
+
+  const [infoAddOn, setInfoAddOn] = useState<AddOnInfo>()
+
+  return (
+    <>
+      <AddOnInfoDialog
+        addOn={infoAddOn}
+        onClose={() => setInfoAddOn(undefined)}
+      />
+      {Object.keys(addOnTypeLabels).map((type) => (
+        <Fragment key={type}>
+          {sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (
+            <div
+              key={`${type}-add-ons`}
+              className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active"
+            >
+              <h3 className="font-medium">{addOnTypeLabels[type]}</h3>
+              <div className="flex flex-row flex-wrap">
+                {sortedAddOns
+                  .filter((addOn) => addOn.type === type)
+                  .map((addOn) => (
+                    <div
+                      key={addOn.id}
+                      className="w-1/2 flex flex-row justify-between pr-4"
+                    >
+                      <div className="p-1 flex flex-row items-center">
+                        <Switch
+                          id={addOn.id}
+                          checked={addOnState[addOn.id].selected}
+                          disabled={!addOnState[addOn.id].enabled}
+                          onCheckedChange={() => {
+                            toggleAddOn(addOn.id)
+                          }}
+                        />
+                        <Label
+                          htmlFor={addOn.id}
+                          className="pl-2 font-semibold text-gray-300"
+                        >
+                          {addOn.smallLogo && (
+                            <img
+                              src={`data:image/svg+xml,${encodeURIComponent(
+                                addOn.smallLogo,
+                              )}`}
+                              alt={addOn.name}
+                              className="w-5"
+                            />
+                          )}
+                          {addOn.name}
+                        </Label>
+                        <InfoIcon
+                          className="ml-2 w-4 text-gray-600"
+                          onClick={() => setInfoAddOn(addOn)}
+                        />
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+        </Fragment>
+      ))}
+      <div className="mt-4">
+        <ImportCustomAddOn />
+      </div>
+    </>
+  )
+}

package/src/components/sidebar-items/mode-selector.tsx

@@ -0,0 +1,56 @@
+import { CodeIcon } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group'
+
+import {
+  setRouterMode,
+  useApplicationMode,
+  useModeEditable,
+  useRouterMode,
+  useSupportedModes,
+} from '../../store/project'
+
+import SidebarContainer from './sidebar-container'
+
+export default function ModeSelector() {
+  const mode = useApplicationMode()
+  const enableMode = useModeEditable()
+  const routerMode = useRouterMode()
+  const supportedModes = useSupportedModes()
+
+  if (mode !== 'setup' || Object.keys(supportedModes ?? {}).length < 2) {
+    return null
+  }
+
+  return (
+    <SidebarContainer>
+      <div className="flex flex-col @md:flex-row @md:items-center gap-2 items-start">
+        <h3 className="font-medium whitespace-nowrap">Router Mode</h3>
+        <div className="flex flex-row justify-center items-center">
+          <ToggleGroup
+            type="single"
+            value={routerMode}
+            onValueChange={(v: string) => {
+              if (v) {
+                setRouterMode(v)
+              }
+            }}
+            className="rounded-md border-2 border-gray-500/10"
+          >
+            {Object.keys(supportedModes ?? {}).map((mode) => (
+              <ToggleGroupItem
+                key={mode}
+                value={mode}
+                className="px-4"
+                disabled={!enableMode}
+              >
+                <CodeIcon className="w-4 h-4" />
+                {supportedModes?.[mode].displayName}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+      </div>
+    </SidebarContainer>
+  )
+}