@svgrid/create-studio 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# @svgrid/create-studio
+
+Scaffold a runnable **SvGrid Studio** data app in one command.
+
+```bash
+npm create @svgrid/studio@latest
+# or into a named directory
+npm create @svgrid/studio@latest my-data-app
+# pnpm / yarn
+pnpm create @svgrid/studio my-data-app
+yarn create @svgrid/studio my-data-app
+```
+
+Then:
+
+```bash
+cd my-data-app
+npm install
+npm run dev
+```
+
+## From your own schema
+
+Point it at an existing **Drizzle** `schema.ts` or **Prisma** `schema.prisma`
+(auto-detected) and it scaffolds a screen for every table/model instead of the
+seeded example - foreign keys become searchable lookups:
+
+```bash
+npm create @svgrid/studio@latest my-app -- --from ./prisma/schema.prisma
+npm create @svgrid/studio@latest my-app -- --from ./src/lib/db/schema.ts
+```
+
+## From a designer project
+
+Export a `studio.config.json` from the [visual app designer](https://www.svgrid.com/docs/enterprise/studio/app-designer)
+and generate the exact screens + blocks you arranged:
+
+```bash
+npm create @svgrid/studio@latest my-app -- --project ./studio.config.json
+```
+
+## What you get
+
+A full [SvelteKit](https://svelte.dev/docs/kit) app - not a snippet - wired end to end:
+
+- **Nav shell + modern theme** (plain CSS, light/dark aware, no Tailwind).
+- **Two linked entities** - Customers and Orders - where an order references a
+  customer through a **searchable lookup** field.
+- **Grid + modal CRUD** on every screen: sort, filter, global search, paging,
+  multi-select delete, and a draggable / resizable / pinnable edit modal - all
+  driven by a single `EntitySchema` per entity.
+- **Seeded in-memory data**, so it runs with **no backend to set up**.
+
+Everything is schema-driven. Open [`src/lib/schemas.ts`](templates/default/src/lib/schemas.ts),
+add a field, and it appears in both the grid and the form.
+
+## Going to a real database
+
+The starter's data sources are the only thing tied to in-memory storage. Swap
+`createInMemoryDataSource` in `src/lib/data.ts` for a real adapter - or generate
+a connected entity from an existing table:
+
+```bash
+npx @svgrid/studio add public.invoices --db postgres --url "$DATABASE_URL"
+```
+
+The grid, form, sorting, filtering, and paging keep working unchanged.
+
+## Requirements
+
+- Node.js >= 18
+
+## Links
+
+- Docs: https://www.svgrid.com/docs/studio
+- Grid: [`@svgrid/grid`](https://www.npmjs.com/package/@svgrid/grid)
+- Studio / enterprise: [`@svgrid/enterprise`](https://www.npmjs.com/package/@svgrid/enterprise)

package/index.mjs

@@ -0,0 +1,307 @@
+#!/usr/bin/env node
+// @svgrid/create-studio - scaffold a runnable SvGrid Studio data app.
+//
+//   npm  create @svgrid/studio@latest            # interactive
+//   pnpm create @svgrid/studio my-app            # into ./my-app
+//   npm  create @svgrid/studio@latest my-app -- --force
+//
+// One command -> a full SvelteKit app: nav shell, two linked entities
+// (Customers + Orders with a searchable lookup), grid + modal CRUD, and a
+// modern theme, running on seeded in-memory data with no backend to set up.
+//
+// Zero runtime dependencies - Node built-ins only. Copies the bundled template,
+// renames `_`-prefixed dotfiles, and rewrites the project name.
+
+import { cp, mkdir, readdir, rename, rm, stat, readFile, writeFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { dirname, join, basename, resolve, isAbsolute } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createInterface } from 'node:readline/promises'
+import { stdin, stdout } from 'node:process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const TEMPLATE_DIR = join(__dirname, 'templates', 'default')
+
+const RENAME_BACK = new Map([
+  ['_gitignore', '.gitignore'],
+  ['_npmrc', '.npmrc'],
+  ['_env.example', '.env.example'],
+  ['_package.json', 'package.json'],
+])
+
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+}
+const color = stdout.isTTY ? (k, s) => `${c[k]}${s}${c.reset}` : (_k, s) => s
+
+function parseArgs(argv) {
+  const args = { _: [], force: false, help: false, from: null, project: null }
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--help' || a === '-h') args.help = true
+    else if (a === '--force' || a === '-f') args.force = true
+    else if (a === '--from') args.from = argv[++i]
+    else if (a.startsWith('--from=')) args.from = a.slice('--from='.length)
+    else if (a === '--project') args.project = argv[++i]
+    else if (a.startsWith('--project=')) args.project = a.slice('--project='.length)
+    else if (!a.startsWith('-')) args._.push(a)
+  }
+  return args
+}
+
+function printHelp() {
+  stdout.write(`
+${color('bold', '@svgrid/create-studio')} - scaffold a SvGrid Studio data app
+
+${color('bold', 'Usage')}
+  npm create @svgrid/studio@latest [dir] -- [--from <schema>] [--force]
+
+${color('bold', 'What you get')}
+  A runnable SvelteKit app: nav shell, grid + modal CRUD per entity, and a
+  modern theme. Without --from you get seeded Customers + Orders; with --from
+  you get a screen for every table/model in your schema.
+
+${color('bold', 'Options')}
+  --from <path>      Generate the app from a Drizzle (.ts) or Prisma (.prisma)
+                     schema instead of the seeded example (auto-detected).
+  --project <path>   Generate the app from a studio.config.json exported by the
+                     visual designer (screens + blocks, not just entities).
+  --force            Scaffold into a non-empty directory.
+
+${color('bold', 'Examples')}
+  npm  create @svgrid/studio@latest
+  pnpm create @svgrid/studio my-data-app
+  npm  create @svgrid/studio@latest my-app -- --from ./prisma/schema.prisma
+  npm  create @svgrid/studio@latest my-app -- --project ./studio.config.json
+`)
+}
+
+/**
+ * Generate the app from a studio.config.json (the visual designer's export):
+ * parse it, emit each screen's composed blocks, and replace the seeded example.
+ */
+async function applyProject(destDir, projectPath) {
+  const abs = resolve(process.cwd(), projectPath)
+  const json = await readFile(abs, 'utf8').catch(() => null)
+  if (json == null) throw new Error(`--project: config not found: ${projectPath}`)
+
+  let studio
+  try {
+    studio = await import('@svgrid/enterprise/studio')
+  } catch {
+    throw new Error('--project needs @svgrid/enterprise; reinstall and try again.')
+  }
+
+  const project = studio.parseProject(json)
+  const files = studio.emitStudioProject(project)
+
+  for (const ex of ['customers', 'orders']) {
+    await rm(join(destDir, 'src', 'routes', ex), { recursive: true, force: true })
+  }
+  for (const f of files) {
+    const full = join(destDir, f.path)
+    await mkdir(dirname(full), { recursive: true })
+    await writeFile(full, f.contents)
+  }
+  // Add the runtime deps the generated code imports (Supabase client / SQL
+  // drivers) so the app installs + runs turnkey.
+  const allSource = files.map((f) => f.contents).join('\n')
+  const DEPS = [
+    ["from '@supabase/supabase-js'", '@supabase/supabase-js', '^2.45.0'],
+    ["import pg from 'pg'", 'pg', '^8.11.0'],
+    ["from 'mysql2/promise'", 'mysql2', '^3.9.0'],
+    ["import mssql from 'mssql'", 'mssql', '^10.0.0'],
+    ["import Database from 'better-sqlite3'", 'better-sqlite3', '^11.0.0'],
+  ]
+  for (const [needle, dep, version] of DEPS) {
+    if (allSource.includes(needle)) await addDependency(destDir, dep, version)
+  }
+  return project.screens.map((s) => s.title)
+}
+
+/** Add a runtime dependency to the generated app's package.json (idempotent). */
+async function addDependency(destDir, name, version) {
+  const pkgPath = join(destDir, 'package.json')
+  if (!existsSync(pkgPath)) return
+  try {
+    const pkg = JSON.parse(await readFile(pkgPath, 'utf8'))
+    pkg.dependencies = { ...pkg.dependencies, [name]: version }
+    await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+  } catch {
+    // leave deps as-is if package.json isn't valid JSON
+  }
+}
+
+/**
+ * Generate the app's entities from a Drizzle/Prisma schema file: parse it with
+ * the Studio core, emit EntityScreen-style files, and replace the seeded
+ * Customers/Orders. Runs after the base template is copied.
+ */
+async function applyFromSchema(destDir, fromPath) {
+  const abs = resolve(process.cwd(), fromPath)
+  const src = await readFile(abs, 'utf8').catch(() => null)
+  if (src == null) throw new Error(`--from: schema file not found: ${fromPath}`)
+
+  let studio
+  try {
+    studio = await import('@svgrid/enterprise/studio')
+  } catch {
+    throw new Error('--from needs @svgrid/enterprise; reinstall, or scaffold without --from and run `npx @svgrid/studio add --all --from ...` in the app.')
+  }
+
+  const isPrisma = /\.prisma$/i.test(fromPath) || /\bmodel\s+\w+\s*\{/.test(src)
+  const schemas = isPrisma ? studio.introspectPrismaAll(src) : studio.introspectDrizzleAll(src)
+  if (!schemas.length) throw new Error(`--from: no ${isPrisma ? 'models' : 'tables'} found in ${fromPath}`)
+
+  const files = studio.emitStudioApp(schemas)
+
+  // Drop the seeded example screens (their schemas/data no longer exist).
+  for (const ex of ['customers', 'orders']) {
+    await rm(join(destDir, 'src', 'routes', ex), { recursive: true, force: true })
+  }
+  // Write generated files (overwrites schemas.ts / data.ts / +layout / +page).
+  for (const f of files) {
+    const full = join(destDir, f.path)
+    await mkdir(dirname(full), { recursive: true })
+    await writeFile(full, f.contents)
+  }
+  return schemas.map((s) => s.label ?? s.name)
+}
+
+function sanitizeName(name) {
+  return (
+    name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9._-]+/g, '-')
+      .replace(/^[-_.]+|[-_.]+$/g, '') || 'my-studio-app'
+  )
+}
+
+async function copyTemplate(srcDir, destDir) {
+  // Match only on the path RELATIVE to the template root - the absolute `src`
+  // includes the install location, which would match `node_modules` and skip
+  // the whole copy.
+  const skip = /(^|[\\/])(node_modules|\.svelte-kit|\.vercel|build|dist)([\\/]|$)/
+  await cp(srcDir, destDir, {
+    recursive: true,
+    filter: (src) => !skip.test(src.slice(srcDir.length)),
+  })
+  await renameBack(destDir)
+}
+
+async function renameBack(dir) {
+  for (const entry of await readdir(dir)) {
+    const full = join(dir, entry)
+    if ((await stat(full)).isDirectory()) {
+      await renameBack(full)
+    } else if (RENAME_BACK.has(entry)) {
+      await rename(full, join(dir, RENAME_BACK.get(entry)))
+    }
+  }
+}
+
+async function setProjectName(destDir, name) {
+  const pkgPath = join(destDir, 'package.json')
+  if (!existsSync(pkgPath)) return
+  try {
+    const pkg = JSON.parse(await readFile(pkgPath, 'utf8'))
+    pkg.name = name
+    await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+  } catch {
+    // leave the template's name if it isn't valid JSON for some reason
+  }
+}
+
+async function isEmptyDir(dir) {
+  if (!existsSync(dir)) return true
+  const entries = await readdir(dir)
+  return entries.filter((e) => e !== '.git').length === 0
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2))
+  if (args.help) return printHelp()
+
+  const interactive = stdin.isTTY && stdout.isTTY
+  let rl = null
+  const ask = async (q, def) => {
+    if (!interactive) return def
+    rl ??= createInterface({ input: stdin, output: stdout })
+    const a = (await rl.question(`${q} ${color('dim', `(${def})`)} `)).trim()
+    return a || def
+  }
+
+  stdout.write(`\n${color('bold', '◆ @svgrid/create-studio')}  ${color('dim', 'a runnable data app')}\n\n`)
+
+  // 1. Target directory.
+  let target = args._[0]
+  if (!target) target = await ask('Project directory:', 'my-studio-app')
+  const destDir = resolve(process.cwd(), target)
+  const projectName = sanitizeName(basename(destDir))
+
+  // 2. Safety: don't clobber a non-empty directory.
+  if (!(await isEmptyDir(destDir)) && !args.force) {
+    const ok = await ask(
+      `\n${color('yellow', '!')} ${target} is not empty. Continue and overwrite files? (y/N)`,
+      'N',
+    )
+    if (!/^y(es)?$/i.test(ok)) {
+      if (rl) rl.close()
+      stdout.write(`${color('red', '✖')} Aborted.\n`)
+      process.exit(1)
+    }
+  }
+
+  if (!existsSync(TEMPLATE_DIR)) {
+    if (rl) rl.close()
+    stdout.write(`\n${color('red', '✖')} Template is missing from this build.\n`)
+    process.exit(1)
+  }
+
+  // 3. Scaffold.
+  await mkdir(destDir, { recursive: true })
+  await copyTemplate(TEMPLATE_DIR, destDir)
+  await setProjectName(destDir, projectName)
+  if (rl) rl.close()
+
+  // 3b. Generate from a designer project (--project) or a schema file (--from).
+  let entities = null
+  let source = null
+  try {
+    if (args.project) {
+      entities = await applyProject(destDir, args.project)
+      source = args.project
+    } else if (args.from) {
+      entities = await applyFromSchema(destDir, args.from)
+      source = args.from
+    }
+  } catch (err) {
+    stdout.write(`\n${color('red', '✖')} ${err instanceof Error ? err.message : String(err)}\n`)
+    process.exit(1)
+  }
+
+  // 4. Next steps.
+  const rel = isAbsolute(target) || target.startsWith('.') ? target : `./${target}`
+  stdout.write(`\n${color('green', '✔')} Scaffolded ${color('bold', projectName)} into ${rel}\n`)
+  if (entities) {
+    stdout.write(`  ${color('dim', 'from')} ${source} ${color('dim', '->')} ${entities.join(', ')}\n`)
+  }
+  stdout.write(`\n`)
+  stdout.write(`${color('bold', 'Next steps')}\n`)
+  stdout.write(`  cd ${target}\n`)
+  stdout.write(`  npm install\n`)
+  stdout.write(`  npm run dev\n\n`)
+  stdout.write(`${color('dim', 'Docs:')} https://www.svgrid.com/docs/studio\n\n`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@svgrid/create-studio",
+  "version": "0.1.0",
+  "description": "Scaffold a runnable SvGrid Studio data app in one command: npm create @svgrid/studio@latest",
+  "type": "module",
+  "license": "MIT",
+  "author": "jQWidgets Ltd",
+  "homepage": "https://www.svgrid.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sv-grid/sv-grid.git",
+    "directory": "packages/create-studio"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "data-grid",
+    "datagrid",
+    "data-app",
+    "crud",
+    "svgrid",
+    "studio",
+    "create",
+    "scaffold",
+    "starter",
+    "template"
+  ],
+  "bin": "index.mjs",
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@svgrid/enterprise": "workspace:*"
+  }
+}

package/templates/default/README.md

@@ -0,0 +1,51 @@
+# My Studio App
+
+A data app built with [SvGrid Studio](https://www.svgrid.com/docs/studio).
+
+```bash
+npm install
+npm run dev      # http://localhost:5173
+```
+
+## How it works
+
+Each screen is driven by one `EntitySchema`. A schema describes an entity's
+fields once, and that single definition drives:
+
+- the **grid** columns, sorting, filtering, and paging,
+- the **edit form** (controls + validation), and
+- the generated code when you scaffold from a real database.
+
+### Where things live
+
+| File | What it does |
+| --- | --- |
+| `src/lib/schemas.ts` | The entity definitions. Add a field here and it shows up in the grid and the form. |
+| `src/lib/data.ts` | The data sources. Seeded in-memory by default; swap for a real adapter when ready. |
+| `src/lib/EntityScreen.svelte` | The reusable grid + modal CRUD screen. |
+| `src/routes/` | One route per entity, plus the nav shell (`+layout.svelte`) and home page. |
+
+### Add a field
+
+Open `src/lib/schemas.ts`, add an entry to a schema's `fields` array (and the
+matching property on its TypeScript type), and it appears in both the grid and
+the edit form on the next reload.
+
+### Connect a real database
+
+The in-memory sources in `src/lib/data.ts` are the only thing tied to fake data.
+Replace `createInMemoryDataSource` with `createSqlDataSource` or
+`createSupabaseDataSource`, or generate a connected entity:
+
+```bash
+npx @svgrid/studio add public.invoices --db postgres --url "$DATABASE_URL"
+```
+
+Sorting, filtering, paging, and CRUD keep working unchanged.
+
+## Scripts
+
+- `npm run dev` - start the dev server
+- `npm run build` - production build
+- `npm run preview` - preview the production build
+- `npm run check` - type-check with `svelte-check`

package/templates/default/_gitignore

@@ -0,0 +1,22 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS / editor
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

package/templates/default/_npmrc

@@ -0,0 +1 @@
+engine-strict=true

package/templates/default/_package.json

@@ -0,0 +1,25 @@
+{
+  "name": "my-studio-app",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
+    "typescript": "^5.7.0",
+    "vite": "^8.0.10"
+  },
+  "dependencies": {
+    "@svgrid/grid": "latest",
+    "@svgrid/enterprise": "latest"
+  }
+}

package/templates/default/src/app.css

@@ -0,0 +1,65 @@
+/* App theme + chrome. The grid ships its own styles; these tokens drive the
+ * accent + surfaces (light / dark friendly), the nav shell, and the buttons. */
+:root {
+  --sg-accent: #4f46e5;
+  color-scheme: light dark;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--sg-fg, #0f172a);
+  background: var(--sg-bg, #ffffff);
+}
+
+/* ---- App shell ---- */
+.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
+.app__nav {
+  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
+  border-right: 1px solid var(--sg-border, #e6e8ec); background: var(--sg-header-bg, #f8fafc);
+}
+.app__brand { padding: 6px 10px 14px; font-weight: 750; font-size: 16px; color: inherit; text-decoration: none; letter-spacing: -0.01em; }
+.app__links { display: flex; flex-direction: column; gap: 2px; }
+.app__link { padding: 8px 11px; border-radius: 8px; color: var(--sg-muted, #475569); text-decoration: none; font-size: 14px; font-weight: 500; }
+.app__link:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent); color: var(--sg-fg, #0f172a); }
+.app__link.is-active { background: color-mix(in srgb, var(--sg-accent) 14%, transparent); color: var(--sg-accent); font-weight: 600; }
+.app__foot { margin-top: auto; padding: 10px; font-size: 11px; color: var(--sg-muted, #94a3b8); }
+.app__main { padding: 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
+
+/* ---- Headings ---- */
+.st__title { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -0.015em; }
+.st__sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sg-muted, #64748b); max-width: 74ch; }
+.st__sub code { background: var(--sg-header-bg, #f1f5f9); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; }
+
+/* ---- Toolbar + buttons ---- */
+.st__toolbar { display: flex; align-items: center; gap: 10px; }
+.st-hint { font-size: 12.5px; color: var(--sg-muted, #94a3b8); }
+.st-btn {
+  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
+  font: inherit; font-size: 13.5px; font-weight: 560; line-height: 1;
+  border: 1px solid var(--sg-border, #e6e8ec); border-radius: 10px;
+  background: var(--sg-bg, #fff); color: var(--sg-fg, inherit); cursor: pointer;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.06s;
+}
+.st-btn:hover { background: color-mix(in srgb, var(--sg-fg, #0f172a) 5%, var(--sg-bg, #fff)); }
+.st-btn:active { transform: translateY(0.5px); }
+.st-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
+.st-btn--primary {
+  border-color: transparent; color: #fff;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--sg-accent) 88%, #fff), var(--sg-accent));
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 8px 18px -9px color-mix(in srgb, var(--sg-accent) 65%, transparent);
+}
+.st-btn--primary:hover { filter: brightness(1.06); }
+
+/* ---- Home cards ---- */
+.home { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
+.home__card {
+  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px;
+  border: 1px solid var(--sg-border, #e6e8ec); border-radius: 14px; text-decoration: none; color: inherit;
+  background: var(--sg-bg, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: border-color 0.15s, box-shadow 0.15s;
+}
+.home__card:hover { border-color: color-mix(in srgb, var(--sg-accent) 45%, var(--sg-border, #e6e8ec)); box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.3); }
+.home__card strong { font-size: 15px; }
+.home__card span { font-size: 13px; color: var(--sg-muted, #64748b); line-height: 1.5; }

package/templates/default/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {}

package/templates/default/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/templates/default/src/lib/EntityScreen.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" module>
+  type Row = Record<string, unknown>
+</script>
+
+<script lang="ts" generics="T extends Row">
+  /**
+   * A full CRUD screen for one entity: grid + create/edit modal + multi-select
+   * delete, over a ServerDataSource. Driven entirely by the EntitySchema.
+   */
+  import { SvGrid, createServerDataSource, type ServerState, type ServerDataSource } from '@svgrid/grid'
+  import { SvGridEditPanel, schemaToColumns, type EntitySchema, type RelationLookup } from '@svgrid/enterprise'
+
+  let { schema, source, lookups, newId }: {
+    schema: EntitySchema<T>
+    source: ServerDataSource<T>
+    lookups?: Record<string, RelationLookup>
+    newId: () => string
+  } = $props()
+
+  const idField = schema.idField ?? 'id'
+  const columns = schemaToColumns(schema)
+
+  let view = $state<ServerState<T>>({
+    rows: [], total: 0, loading: false, saving: false, error: null,
+    pageIndex: 0, pageSize: 10, pageCount: 1, sortModel: [], filterModel: {},
+  })
+  const controller = createServerDataSource<T>(source, {
+    pageSize: 10, optimistic: true, getRowId: (r) => String(r[idField]), onChange: (s) => (view = s),
+  })
+  $effect(() => {
+    controller.refresh()
+    return () => controller.dispose()
+  })
+
+  let editing = $state<T | null | undefined>(undefined)
+  let selected = $state<T[]>([])
+
+  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<T> }) {
+    if (mode === 'create') {
+      await controller.createRow({ [idField]: newId(), ...values } as Partial<T>)
+      controller.setPage(view.pageCount - 1)
+    } else if (id) {
+      await controller.updateRow(id, values)
+    }
+    editing = undefined
+  }
+  async function removeSelected() {
+    for (const row of selected) await controller.deleteRow(String(row[idField]))
+    selected = []
+  }
+</script>
+
+<div class="st__toolbar">
+  <button class="st-btn st-btn--primary" onclick={() => (editing = null)}>+ New {schema.label ?? schema.name}</button>
+  <button class="st-btn" disabled={selected.length === 0} onclick={removeSelected}>
+    Delete{selected.length ? ` (${selected.length})` : ''}
+  </button>
+  <span class="st-hint">Double-click a row to edit</span>
+</div>
+
+<SvGrid
+  data={view.rows}
+  {columns}
+  loading={view.loading}
+  fitColumns
+  enableRowSummaries={false}
+  showRowSelection
+  sortable
+  externalSort
+  onSortingChange={(s) => controller.setSort(s)}
+  filterable
+  filterMode="row"
+  showGlobalFilter
+  externalFilter
+  onFiltersChange={(f) =>
+    controller.setFilter({
+      global: f.global || undefined,
+      columns: Object.fromEntries(
+        f.columns.map((c) => [c.id, { operator: c.operator, value: c.value, valueTo: c.valueTo, selectedValues: c.selectedValues }]),
+      ),
+    })}
+  onRowDoubleClick={(e) => (editing = e.row)}
+  onRowSelectionChange={(_sel, rows) => (selected = rows)}
+  showPagination
+  externalPagination
+  rowCount={view.total}
+  pageIndex={view.pageIndex}
+  pageSize={view.pageSize}
+  onPaginationChange={({ pageIndex, pageSize }) => (pageSize !== view.pageSize ? controller.setPageSize(pageSize) : controller.setPage(pageIndex))}
+  containerHeight={460}
+/>
+
+{#if editing !== undefined}
+  <SvGridEditPanel {schema} row={editing} presentation="modal" persistKey={schema.name} {lookups} onSubmit={save} onCancel={() => (editing = undefined)} />
+{/if}

package/templates/default/src/lib/data.ts

@@ -0,0 +1,55 @@
+/**
+ * Data sources. This starter runs on seeded in-memory sources, so it works with
+ * no backend. To point an entity at a real database, swap `createInMemoryDataSource`
+ * for `createSqlDataSource` / `createSupabaseDataSource` (or scaffold a connected
+ * one with `npx @svgrid/studio add <table> --db postgres --url ...`) - the grid,
+ * form, sorting, filtering, and paging keep working unchanged.
+ */
+import {
+  createInMemoryDataSource,
+  createRelationLookup,
+  type ServerDataSource,
+} from '@svgrid/enterprise'
+import { customerSchema, orderSchema, type Customer, type Order } from './schemas'
+
+const customerSeed: Customer[] = [
+  { id: 'c1', name: 'Ada Lovelace', email: 'ada@analytic.io', tier: 'enterprise', mrr: 1200, active: true },
+  { id: 'c2', name: 'Alan Turing', email: 'alan@bletchley.uk', tier: 'pro', mrr: 240, active: true },
+  { id: 'c3', name: 'Grace Hopper', email: 'grace@navy.mil', tier: 'enterprise', mrr: 980, active: true },
+  { id: 'c4', name: 'Linus Torvalds', email: 'linus@kernel.org', tier: 'pro', mrr: 360, active: true },
+  { id: 'c5', name: 'Barbara Liskov', email: 'barbara@substitution.dev', tier: 'free', mrr: 0, active: false },
+]
+
+const orderSeed: Order[] = [
+  { id: 'o1', ref: 'INV-1001', customerId: 'c1', amount: 1200, status: 'paid' },
+  { id: 'o2', ref: 'INV-1002', customerId: 'c2', amount: 240, status: 'paid' },
+  { id: 'o3', ref: 'INV-1003', customerId: 'c1', amount: 300, status: 'draft' },
+  { id: 'o4', ref: 'INV-1004', customerId: 'c3', amount: 980, status: 'refunded' },
+]
+
+export const customersSource = createInMemoryDataSource(customerSeed, customerSchema)
+
+// Orders reference a customer. Enrich every method's rows with the customer
+// NAME so the grid shows it (the form stores the id via the lookup below).
+const nameById = () => new Map((customersSource.rows() as Customer[]).map((c) => [c.id, c.name]))
+const withCustomer = (r: Order): Order => ({ ...r, customer: nameById().get(r.customerId) ?? '' })
+const rawOrders = createInMemoryDataSource(orderSeed, orderSchema)
+export const ordersSource: ServerDataSource<Order> = {
+  ...rawOrders,
+  async getRows(req) {
+    const res = await rawOrders.getRows(req)
+    return { ...res, rows: res.rows.map(withCustomer) }
+  },
+  createRow: (input) => rawOrders.createRow(input).then(withCustomer),
+  updateRow: (id, patch) => rawOrders.updateRow(id, patch).then(withCustomer),
+}
+
+// A searchable Customer picker for the order form.
+export const customerLookup = createRelationLookup<Customer>({
+  source: customersSource,
+  schema: customerSchema,
+  labelField: 'name',
+})
+
+let seq = customerSeed.length + orderSeed.length
+export const nextId = (prefix: string) => `${prefix}${++seq}`

package/templates/default/src/lib/schemas.ts

@@ -0,0 +1,61 @@
+/**
+ * One EntitySchema per entity drives everything: the grid columns, the edit
+ * form (with validation), and - when you scaffold from a real database - the
+ * generated code. Add a field here and it shows up in the grid and the form.
+ */
+import type { EntitySchema } from '@svgrid/enterprise'
+
+export type Customer = {
+  id: string
+  name: string
+  email: string
+  tier: string
+  mrr: number
+  active: boolean
+}
+
+export type Order = {
+  id: string
+  ref: string
+  customerId: string
+  customer?: string // resolved customer name, for the grid (see data.ts)
+  amount: number
+  status: string
+}
+
+export const customerSchema: EntitySchema<Customer> = {
+  name: 'customers',
+  label: 'Customer',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true, hidden: { form: true } },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'email', type: 'text', label: 'Email', required: true, format: 'email' },
+    { field: 'tier', type: 'enum', options: [
+      { value: 'free', label: 'Free' },
+      { value: 'pro', label: 'Pro' },
+      { value: 'enterprise', label: 'Enterprise' },
+    ] },
+    { field: 'mrr', type: 'number', label: 'MRR ($)', min: 0 },
+    { field: 'active', type: 'boolean' },
+  ],
+}
+
+export const orderSchema: EntitySchema<Order> = {
+  name: 'orders',
+  label: 'Order',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true, hidden: { form: true } },
+    { field: 'ref', type: 'text', label: 'Reference', required: true },
+    // A foreign key: a searchable Customer picker in the form, the name in the grid.
+    { field: 'customerId', type: 'relation', label: 'Customer', relation: { entity: 'customers', labelField: 'name' }, hidden: { grid: true } },
+    { field: 'customer', type: 'text', label: 'Customer', readonly: true, hidden: { form: true } },
+    { field: 'amount', type: 'number', label: 'Amount ($)', min: 0 },
+    { field: 'status', type: 'enum', options: [
+      { value: 'draft', label: 'Draft' },
+      { value: 'paid', label: 'Paid' },
+      { value: 'refunded', label: 'Refunded' },
+    ] },
+  ],
+}

package/templates/default/src/routes/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import '../app.css'
+  import { page } from '$app/stores'
+
+  let { children } = $props()
+
+  const nav = [
+    { href: '/', label: 'Home' },
+    { href: '/customers', label: 'Customers' },
+    { href: '/orders', label: 'Orders' },
+  ]
+</script>
+
+<div class="app">
+  <aside class="app__nav">
+    <a class="app__brand" href="/">My Studio App</a>
+    <nav class="app__links">
+      {#each nav as item (item.href)}
+        <a class="app__link" class:is-active={$page.url.pathname === item.href} href={item.href}>{item.label}</a>
+      {/each}
+    </nav>
+    <span class="app__foot">Built with SvGrid Studio</span>
+  </aside>
+  <main class="app__main">
+    {@render children()}
+  </main>
+</div>

package/templates/default/src/routes/+layout.ts

@@ -0,0 +1,5 @@
+// This starter runs on in-memory data, so render it as a client SPA (the seeded
+// sources are module singletons that persist as you navigate). When you move an
+// entity to a real database, you can drop this and use SSR / server routes.
+export const ssr = false
+export const prerender = false

package/templates/default/src/routes/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  const entities = [
+    { href: '/customers', label: 'Customers', desc: 'Tiers, MRR, and status. Sort, filter, edit inline in a modal.' },
+    { href: '/orders', label: 'Orders', desc: 'Linked to a customer via a searchable lookup field.' },
+  ]
+</script>
+
+<h1 class="st__title">Welcome to your data app</h1>
+<p class="st__sub">
+  Built with SvGrid Studio. Each screen is driven by one <code>EntitySchema</code>.
+  It runs on seeded in-memory data - point an entity at a real database, or add one with
+  <code>npx @svgrid/studio add &lt;table&gt; --db postgres --url ...</code>
+</p>
+
+<div class="home">
+  {#each entities as e (e.href)}
+    <a class="home__card" href={e.href}>
+      <strong>{e.label}</strong>
+      <span>{e.desc}</span>
+    </a>
+  {/each}
+</div>

package/templates/default/src/routes/customers/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import EntityScreen from '$lib/EntityScreen.svelte'
+  import { customerSchema } from '$lib/schemas'
+  import { customersSource, nextId } from '$lib/data'
+</script>
+
+<h1 class="st__title">Customers</h1>
+<EntityScreen schema={customerSchema} source={customersSource} newId={() => nextId('c')} />

package/templates/default/src/routes/orders/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import EntityScreen from '$lib/EntityScreen.svelte'
+  import { orderSchema } from '$lib/schemas'
+  import { ordersSource, customerLookup, nextId } from '$lib/data'
+</script>
+
+<h1 class="st__title">Orders</h1>
+<EntityScreen
+  schema={orderSchema}
+  source={ordersSource}
+  lookups={{ customerId: customerLookup }}
+  newId={() => nextId('o')}
+/>

package/templates/default/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter(),
+  },
+}
+
+export default config

package/templates/default/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()],
+})