create-elytra 0.0.0 → 0.0.1

package/template/studio/convex/auth.ts

@@ -0,0 +1,6 @@
+// EC-252: Convex Auth (EC-150) is package-shipped with a default + override seam; the
+// engine's first-principal admin bootstrap lives in the package, not here. This consumer
+// picks up the default (email + password). Add OAuth via defineStudioAuth({ providers }).
+import { defineStudioAuth } from '@elytracms/studio/convex/auth'
+
+export const { auth, signIn, signOut, store, isAuthenticated } = defineStudioAuth()

package/template/studio/convex/cliTokens.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/cliTokens'

package/template/studio/convex/cms.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/cms'

package/template/studio/convex/content.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/content'

package/template/studio/convex/delivery.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/delivery'

package/template/studio/convex/functions.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/functions'

package/template/studio/convex/graphs.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/graphs'

package/template/studio/convex/guard.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/guard'

package/template/studio/convex/http.ts

@@ -0,0 +1,6 @@
+// EC-252: HTTP routes (Convex Auth /.well-known/* + the EC-157 registry-sync endpoint)
+// are package-shipped; the consumer injects only its own auth (provider choice).
+import { auth } from './auth'
+import { defineStudioHttp } from '@elytracms/studio/convex/http'
+
+export default defineStudioHttp({ auth })

package/template/studio/convex/members.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/members'

package/template/studio/convex/publishing.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/publishing'

package/template/studio/convex/references.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/references'

package/template/studio/convex/schema.ts

@@ -0,0 +1 @@
+export { default } from '@elytracms/studio/convex/schema'

package/template/studio/convex/sync.ts

@@ -0,0 +1,4 @@
+// EC-252: the EC-157 sync endpoint is package-shipped engine infra (decoupled from
+// ./_generated via string refs). This consumer shim keeps the convex/sync.ts path
+// Convex bundles + codegens against, registering sync:registrySync + sync:exportSnapshot.
+export * from '@elytracms/studio/convex/sync'

package/template/studio/convex/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "customConditions": ["development"],
+    "types": ["node"]
+  },
+  "include": ["./**/*.ts"]
+}

package/template/studio/convex/users.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/users'

package/template/studio/convex/webhooks.ts

@@ -0,0 +1 @@
+export * from '@elytracms/studio/convex/webhooks'

package/template/studio/dot-env

@@ -0,0 +1,18 @@
+# {{projectName}} — studio environment.
+#
+# Backend mode. Exactly one path is active:
+#
+#   Playground (default): in-memory, seeded, no signup. The studio boots straight
+#   into an editable starter project; data resets on reload. Sign-in is bypassed.
+#
+#   Connected: comment out VITE_ELYTRA_MODE and set VITE_CONVEX_URL to your Convex
+#   deployment (run `npx convex dev` from this directory). See CONNECT.md.
+#
+{{studioModeEnv}}
+
+# --- Connected mode ----------------------------------------------------------
+# VITE_CONVEX_URL=https://<your-deployment>.convex.cloud
+#
+# Optional: auto-sign-in for local testing (a REAL sign-in; role guards still
+# apply). Format email:password.
+# VITE_ELYTRA_DEV_LOGIN=you@example.com:your-password

package/template/studio/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "studio",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "type-check": "tsc --noEmit",
+    "convex:dev": "convex dev"
+  },
+  "dependencies": {
+    "@auth/core": "^0.37.4",
+    "@convex-dev/auth": "^0.0.94",
+    "@elytracms/core": "^0.0.7",
+    "@elytracms/studio": "^0.0.7",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-router": "^1.170.0",
+    "@tanstack/react-start": "^1.168.0",
+    "convex": "^1.40.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.0.0"
+  }
+}

package/template/studio/src/routeTree.gen.ts

@@ -0,0 +1,104 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SignInRouteImport } from './routes/sign-in'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ProjectIdSplatRouteImport } from './routes/$projectId.$'
+
+const SignInRoute = SignInRouteImport.update({
+  id: '/sign-in',
+  path: '/sign-in',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ProjectIdSplatRoute = ProjectIdSplatRouteImport.update({
+  id: '/$projectId/$',
+  path: '/$projectId/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/sign-in': typeof SignInRoute
+  '/$projectId/$': typeof ProjectIdSplatRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/sign-in': typeof SignInRoute
+  '/$projectId/$': typeof ProjectIdSplatRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/sign-in': typeof SignInRoute
+  '/$projectId/$': typeof ProjectIdSplatRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/sign-in' | '/$projectId/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/sign-in' | '/$projectId/$'
+  id: '__root__' | '/' | '/sign-in' | '/$projectId/$'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SignInRoute: typeof SignInRoute
+  ProjectIdSplatRoute: typeof ProjectIdSplatRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/sign-in': {
+      id: '/sign-in'
+      path: '/sign-in'
+      fullPath: '/sign-in'
+      preLoaderRoute: typeof SignInRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/$projectId/$': {
+      id: '/$projectId/$'
+      path: '/$projectId/$'
+      fullPath: '/$projectId/$'
+      preLoaderRoute: typeof ProjectIdSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SignInRoute: SignInRoute,
+  ProjectIdSplatRoute: ProjectIdSplatRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/template/studio/src/router.tsx

@@ -0,0 +1,25 @@
+import { createRouter } from '@tanstack/react-router'
+import config from '../../elytra.config'
+import { createStudio } from '@elytracms/studio/lib/workspace'
+import { setCanvasStylesheetUrl } from '@elytracms/studio/components/builder/canvas-stylesheet'
+import canvasCss from './styles/canvas.css?url'
+import { routeTree } from './routeTree.gen'
+
+// EC-223 mount contract: the entry point explicitly hands the studio its project config
+// (`../../elytra.config` — the repo root) — no `import.meta.glob` autoload. This is the
+// thin mount; it runs at module load on both the server and client entries, seeding the
+// workspace state before any route reads it.
+createStudio(config)
+
+// The canvas previews inside an isolated iframe and <link>s `canvas.css` — a SEPARATE
+// stylesheet from the chrome's `app.css`: studio CSS (for the portaled editing controls)
+// + the consuming app's delivery theme (for the blocks). Keeping it separate is what lets
+// the delivery theme use natural global rules without leaking into the studio chrome.
+setCanvasStylesheetUrl(canvasCss)
+
+export function getRouter() {
+  return createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+}

package/template/studio/src/routes/$projectId.$.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StudioProjectScreen } from '@elytracms/studio/components/studio-project-screen'
+import { studioSearch } from '@elytracms/studio/router/search'
+
+// EC-223 Stage 6 (catch-all routing): the whole `/$projectId/*` subtree — every
+// section, the bare project index, and unknown URLs — resolves through this ONE
+// splat. The studio package owns the URL→screen map (`router/match.ts` +
+// `StudioProjectScreen`); this consumer file is the thin mount, the only
+// per-project route the app defines. `validateSearch` is the engine's superset
+// parser so deep-link params (`state`/`asset`/`field`/`page`) survive on any URL.
+export const Route = createFileRoute('/$projectId/$')({
+  validateSearch: studioSearch,
+  component: StudioProjectScreen,
+})

package/template/studio/src/routes/__root.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react'
+import {
+  createRootRoute,
+  HeadContent,
+  Navigate,
+  Outlet,
+  Scripts,
+  useLocation,
+} from '@tanstack/react-router'
+import { AuthProvider, useAuth } from '@elytracms/studio/components/auth-context'
+import { BackendGate } from '@elytracms/studio/components/backend-gate'
+import { StudioProvider } from '@elytracms/studio/components/studio-context'
+import { ThemeProvider } from '@elytracms/studio/components/theme-context'
+import { WorkspaceGate } from '@elytracms/studio/components/workspace-gate'
+import { Text } from '@elytracms/studio/ui'
+import { SIGN_IN_PATH, resolveRouteGuard } from '@elytracms/studio/lib/auth'
+import { activeSlugForLocation, setActiveProjectSlug } from '@elytracms/studio/lib/workspace'
+import { THEME_INIT_SCRIPT } from '@elytracms/studio/lib/theme'
+import appCss from '../styles/app.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'Elytra' },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  const location = useLocation()
+  // EC-179: the active project selects its Convex backend. Resolve it from the
+  // URL (or the sign-in redirect target) and bind it *before* the auth and
+  // persistence adapters are selected, so the initial sign-in authenticates
+  // against the project the user is heading for. Keying the auth/studio subtree
+  // by the active project remounts it on a project switch, so the adapters
+  // re-select against the new backend and the session is restored per-backend.
+  const activeSlug = activeSlugForLocation(
+    location.pathname,
+    (location.search as { redirect?: string }).redirect,
+  )
+  setActiveProjectSlug(activeSlug)
+
+  return (
+    <RootDocument>
+      <ThemeProvider>
+        {/* EC-153: the backend gate runs before auth — a misconfigured or
+            unreachable backend is a visible boot state, never an in-memory
+            fallback (selectAuthAdapter/selectPersistenceAdapter would throw). */}
+        <BackendGate>
+          {/* EC-154: an invalid workspace config is a deterministic boot error,
+              rendered before auth — the studio never silently falls back to
+              unconfigured (adapter-listed) behavior while a config is present. */}
+          <WorkspaceGate>
+            <AuthProvider key={activeSlug ?? '__launcher__'}>
+              <AuthGate>
+                <StudioProvider>
+                  <Outlet />
+                </StudioProvider>
+              </AuthGate>
+            </AuthProvider>
+          </WorkspaceGate>
+        </BackendGate>
+      </ThemeProvider>
+    </RootDocument>
+  )
+}
+
+/**
+ * Route guard (EC-150): one chokepoint in the root layout. Unauthenticated
+ * visitors on protected paths are redirected to the sign-in screen (with the
+ * intended target preserved); signed-in users never see the sign-in screen.
+ * The decision logic is the pure, unit-tested `resolveRouteGuard`.
+ */
+function AuthGate({ children }: { children: ReactNode }) {
+  const { status } = useAuth()
+  const { pathname } = useLocation()
+  const decision = resolveRouteGuard(pathname, status)
+
+  if (decision.kind === 'pending') return <SessionLoading />
+  if (decision.kind === 'redirect-to-sign-in') {
+    return <Navigate to={SIGN_IN_PATH} search={{ redirect: decision.redirect }} replace />
+  }
+  if (decision.kind === 'redirect-home') return <Navigate to="/" replace />
+  return children
+}
+
+/** Deterministic session-restore state (also the SSR output for protected paths). */
+function SessionLoading() {
+  return (
+    <div className="grid min-h-dvh place-items-center bg-background">
+      <Text size="sm" tone="muted">
+        Checking session…
+      </Text>
+    </div>
+  )
+}
+
+function RootDocument({ children }: { children: ReactNode }) {
+  // Dark-first SSR baseline; THEME_INIT_SCRIPT flips the class pre-hydration
+  // from the stored preference, and ThemeProvider keeps it reactive thereafter.
+  // suppressHydrationWarning: the script intentionally mutates the class before
+  // React hydrates, so a className mismatch on <html> is expected, not a bug.
+  return (
+    <html lang="de" className="dark" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+      </head>
+      <body className="min-h-screen bg-background font-sans text-foreground antialiased">
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/template/studio/src/routes/index.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ProjectLauncher } from '@elytracms/studio/components/project-list'
+import { parseSectionState } from '@elytracms/studio/components/section-surface'
+import type { SectionState } from '@elytracms/core/studio-core'
+
+export const Route = createFileRoute('/')({
+  validateSearch: (search: Record<string, unknown>): { state?: SectionState } => {
+    const state = parseSectionState(search.state)
+    return state ? { state } : {}
+  },
+  component: HomePage,
+})
+
+function HomePage() {
+  const { state } = Route.useSearch()
+  return <ProjectLauncher forcedState={state ?? null} />
+}

package/template/studio/src/routes/sign-in.tsx

@@ -0,0 +1,159 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Button, Card, CardContent, Field, Heading, Input, Stack, Text } from '@elytracms/studio/ui'
+import { useAuth } from '@elytracms/studio/components/auth-context'
+import { LOCAL_DEV_CREDENTIALS, authMode, postSignInTarget } from '@elytracms/studio/lib/auth'
+import { getActiveProjectSlug, getWorkspaceState } from '@elytracms/studio/lib/workspace'
+
+/**
+ * Sign-in screen (EC-150). Deterministic states: idle → submitting →
+ * (signed-in redirect | inline structured failure). Invalid credentials are a
+ * rendered state, never a silent failure or a crash. In local (in-memory) mode
+ * the seeded dev credentials are listed so the whole flow works offline.
+ */
+
+export const Route = createFileRoute('/sign-in')({
+  validateSearch: (search: Record<string, unknown>): { redirect?: string } => {
+    const redirect = search.redirect
+    return typeof redirect === 'string' && redirect.length > 0 ? { redirect } : {}
+  },
+  component: SignInPage,
+})
+
+type FormPhase = 'idle' | 'submitting'
+type AuthMode = 'signin' | 'signup'
+
+/** The project whose backend this sign-in authenticates against (EC-179). */
+function activeProjectName(): string | null {
+  const state = getWorkspaceState()
+  if (state.kind !== 'config') return null
+  const slug = getActiveProjectSlug()
+  const project = (slug && state.projects.find((p) => p.slug === slug)) || state.projects[0]
+  return project?.name ?? null
+}
+
+function SignInPage() {
+  const auth = useAuth()
+  const navigate = useNavigate()
+  const { redirect } = Route.useSearch()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [phase, setPhase] = useState<FormPhase>('idle')
+  const [mode, setMode] = useState<AuthMode>('signin')
+  const [error, setError] = useState<string | null>(null)
+  const projectName = activeProjectName()
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setPhase('submitting')
+    setError(null)
+    const result = mode === 'signup' ? await auth.signUp(email, password) : await auth.signIn(email, password)
+    if (result.ok) {
+      await navigate({ to: postSignInTarget(redirect) })
+      return
+    }
+    // A fresh backend has no account yet: nudge sign-in → create, and vice versa.
+    if (result.reason === 'account-exists') setMode('signin')
+    setError(result.message)
+    setPhase('idle')
+  }
+
+  const submitting = phase === 'submitting'
+  const creating = mode === 'signup'
+
+  return (
+    <div className="grid min-h-dvh place-items-center bg-background p-6">
+      <Stack gap="4" className="w-full max-w-sm">
+        <Stack gap="1" align="center">
+          <span className="size-8 rounded-lg bg-primary shadow-sm" aria-hidden />
+          <Heading size="h2">
+            {creating ? 'Create your account' : 'Sign in to Elytra'}
+          </Heading>
+          <Text size="sm" tone="muted">
+            {projectName
+              ? `${creating ? 'Register on' : 'Continue to'} ${projectName}.`
+              : 'Use your studio account to continue.'}
+          </Text>
+        </Stack>
+
+        <Card>
+          <CardContent className="pt-5">
+            <form onSubmit={handleSubmit} noValidate>
+              <Stack gap="4">
+                <Field label="Email" htmlFor="sign-in-email" required>
+                  <Input
+                    id="sign-in-email"
+                    type="email"
+                    autoComplete="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@example.com"
+                    disabled={submitting}
+                  />
+                </Field>
+                <Field label="Password" htmlFor="sign-in-password" required error={error}>
+                  <Input
+                    id="sign-in-password"
+                    type="password"
+                    autoComplete={creating ? 'new-password' : 'current-password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    disabled={submitting}
+                  />
+                </Field>
+                <Button type="submit" disabled={submitting} className="w-full">
+                  {submitting
+                    ? creating
+                      ? 'Creating account…'
+                      : 'Signing in…'
+                    : creating
+                      ? 'Create account'
+                      : 'Sign in'}
+                </Button>
+              </Stack>
+            </form>
+          </CardContent>
+        </Card>
+
+        {authMode() === 'convex' ? (
+          <Text size="sm" tone="muted" className="text-center">
+            {creating ? 'Already have an account on this backend? ' : 'First time on this backend? '}
+            <button
+              type="button"
+              className="font-medium text-primary underline-offset-2 hover:underline"
+              onClick={() => {
+                setMode(creating ? 'signin' : 'signup')
+                setError(null)
+              }}
+            >
+              {creating ? 'Sign in' : 'Create an account'}
+            </button>
+          </Text>
+        ) : null}
+
+        {authMode() === 'playground' ? <DevCredentialsHint /> : null}
+      </Stack>
+    </div>
+  )
+}
+
+/** Seeded dev accounts for the explicit playground mode — fixtures, not secrets. */
+function DevCredentialsHint() {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="pt-4">
+        <Stack gap="1">
+          <Text size="xs" tone="muted" className="font-medium">
+            Playground mode — seeded dev accounts
+          </Text>
+          {LOCAL_DEV_CREDENTIALS.map((entry) => (
+            <Text key={entry.user.id} size="xs" tone="muted" className="font-mono">
+              {entry.user.email} / {entry.password}
+            </Text>
+          ))}
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}

package/template/studio/src/styles/app.css

@@ -0,0 +1,11 @@
+/*
+ * The studio CHROME stylesheet (linked by `routes/__root.tsx`). A thin re-export of
+ * the package's complete Tailwind entry (theme + tokens + base + utilities + the
+ * package `@source`) — the studio UI and nothing else. This app's own route files are
+ * auto-detected by Tailwind from the build root, so they need no `@source` here.
+ *
+ * The page-builder CANVAS does NOT use this file — its preview iframe is a separate,
+ * isolated document with its own stylesheet (`canvas.css`), so the consuming app's
+ * delivery theme never has to worry about leaking into this chrome. See `canvas.css`.
+ */
+@import '@elytracms/studio/styles.css';

package/template/studio/src/styles/canvas.css

@@ -0,0 +1,23 @@
+/*
+ * The page-builder CANVAS stylesheet — `<link>`ed into the preview iframe only
+ * (`router.tsx` → `setCanvasStylesheetUrl`), a document fully isolated from the studio
+ * chrome. It carries BOTH halves the iframe needs:
+ *
+ *   1. the studio design system — the inline editing controls (RichTextToolbar,
+ *      SpacingHandles) are portaled INTO this iframe and are styled with studio
+ *      utilities, so they need it here;
+ *   2. the consuming app's DELIVERY theme — the page-builder blocks
+ *      (`../../../components/*.tsx`) are the consuming app's own components and render
+ *      against its delivery CSS, NOT the studio's.
+ *
+ * Because this file lives only in the isolated iframe (the chrome links `app.css`), the
+ * delivery theme keeps its natural global `body`/`h1-h6` rules with zero risk of bleeding
+ * into the studio UI — the developer authors `components/theme.css` as plain site CSS.
+ *
+ * `@source` is required: Tailwind only generates classes it can see, and it never scans
+ * the cross-dir host components, so without this their block utilities are purged.
+ */
+@import '@elytracms/studio/styles.css';
+@import '../../../components/theme.css';
+
+@source '../../../components/**/*.{ts,tsx}';

package/template/studio/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/studio/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "customConditions": ["development"],
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src", "src/routeTree.gen.ts", "vite.config.ts"]
+}