@svgrid/create 1.0.0

package/README.md

@@ -0,0 +1,49 @@
+# @svgrid/create
+
+Scaffold a [Svelte](https://svelte.dev) app powered by
+[SvGrid](https://www.svgrid.com) - the modern Svelte 5 data grid - in one
+command.
+
+```bash
+npm create sv-grid@latest
+# or
+pnpm create sv-grid
+# or
+yarn create sv-grid
+```
+
+Interactive by default. Or pass a directory and template directly:
+
+```bash
+npm create sv-grid@latest my-app -- --template admin-dashboard
+pnpm create sv-grid my-app -t minimal
+```
+
+## Templates
+
+| Template | Stack | Best for |
+| --- | --- | --- |
+| `minimal` | Vite + Svelte 5 + SvGrid | Dropping a grid into something quickly |
+| `admin-dashboard` | SvelteKit + Tailwind + SvGrid, deploy to Vercel | A real dashboard / internal tool |
+
+## Options
+
+| Flag | Description |
+| --- | --- |
+| `--template`, `-t` | `minimal` or `admin-dashboard` |
+| `--force`, `-f` | Scaffold into a non-empty directory |
+| `--help`, `-h` | Show usage |
+
+Then:
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+All templates use the free MIT `@svgrid/grid` core. Add
+[`@svgrid/enterprise`](https://www.svgrid.com/pricing) for Excel/PDF export, import,
+print, pivot, and AI helpers.
+
+SvGrid(TM) is a trademark of jQWidgets Ltd. This package is MIT-licensed.

package/index.mjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+// @svgrid/create - scaffold a Svelte app powered by SvGrid.
+//
+//   npm  create sv-grid@latest             # interactive
+//   pnpm create sv-grid                     # interactive
+//   npm  create sv-grid@latest my-app -- --template admin-dashboard
+//   npm  create sv-grid@latest my-app -- -t minimal
+//
+// Zero runtime dependencies - Node built-ins only. Copies a bundled template,
+// renames `_`-prefixed dotfiles, and rewrites the project name.
+
+import { cp, mkdir, readdir, rename, 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 TEMPLATES = {
+  minimal: {
+    label: 'Minimal      - Vite + Svelte 5 + SvGrid, one page',
+    bundled: join(__dirname, 'templates', 'minimal'),
+  },
+  'admin-dashboard': {
+    label: 'Admin dashboard - SvelteKit shell, multiple grids, deploy to Vercel',
+    bundled: join(__dirname, 'templates', 'admin-dashboard'),
+    // When running from the monorepo before `prepack` has synced the bundled
+    // copy, fall back to the canonical source.
+    fallback: join(__dirname, '..', '..', 'templates', 'sveltekit-admin-dashboard'),
+  },
+}
+
+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 = { _: [], template: null, force: false, help: false }
+  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 === '--template' || a === '-t') args.template = argv[++i]
+    else if (a.startsWith('--template=')) args.template = a.slice('--template='.length)
+    else if (!a.startsWith('-')) args._.push(a)
+  }
+  return args
+}
+
+function printHelp() {
+  stdout.write(`
+${color('bold', '@svgrid/create')} - scaffold a Svelte app powered by SvGrid
+
+${color('bold', 'Usage')}
+  npm create sv-grid@latest [dir] -- [--template <name>] [--force]
+
+${color('bold', 'Templates')}
+${Object.entries(TEMPLATES)
+  .map(([k, t]) => `  ${color('cyan', k.padEnd(16))} ${t.label.replace(/^\S+\s+-\s+/, '')}`)
+  .join('\n')}
+
+${color('bold', 'Examples')}
+  npm  create sv-grid@latest
+  npm  create sv-grid@latest my-app -- --template admin-dashboard
+  pnpm create sv-grid my-app -t minimal
+`)
+}
+
+function sanitizeName(name) {
+  return (
+    name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9._-]+/g, '-')
+      .replace(/^[-_.]+|[-_.]+$/g, '') || 'sv-grid-app'
+  )
+}
+
+function resolveTemplateDir(key) {
+  const t = TEMPLATES[key]
+  if (existsSync(t.bundled)) return t.bundled
+  if (t.fallback && existsSync(t.fallback)) return t.fallback
+  return null
+}
+
+async function copyTemplate(srcDir, destDir) {
+  await cp(srcDir, destDir, {
+    recursive: true,
+    filter: (src) =>
+      !/[\\/](node_modules|\.svelte-kit|\.vercel|build|dist)([\\/]|$)/.test(src),
+  })
+  // Rename `_`-prefixed files back to their real dotfile names.
+  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')}  ${color('dim', 'Svelte + SvGrid')}\n\n`)
+
+  // 1. Target directory.
+  let target = args._[0]
+  if (!target) target = await ask('Project directory:', 'my-sv-grid-app')
+  const destDir = resolve(process.cwd(), target)
+  const projectName = sanitizeName(basename(destDir))
+
+  // 2. Template.
+  let template = args.template
+  if (!template) {
+    if (interactive) {
+      stdout.write(`\n  Templates:\n`)
+      Object.entries(TEMPLATES).forEach(([k, t], i) => {
+        stdout.write(`   ${color('cyan', String(i + 1))}. ${t.label}\n`)
+      })
+      const pick = await ask('\nChoose a template (1-2):', '1')
+      template = Object.keys(TEMPLATES)[Number(pick) - 1] ?? 'minimal'
+    } else {
+      template = 'minimal'
+    }
+  }
+  if (!TEMPLATES[template]) {
+    if (rl) rl.close()
+    stdout.write(
+      `\n${color('red', '✖')} Unknown template "${template}". Choose: ${Object.keys(TEMPLATES).join(', ')}\n`,
+    )
+    process.exit(1)
+  }
+
+  // 3. 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)
+    }
+  }
+
+  const srcDir = resolveTemplateDir(template)
+  if (!srcDir) {
+    if (rl) rl.close()
+    stdout.write(
+      `\n${color('red', '✖')} Template "${template}" is not available in this build.\n`,
+    )
+    process.exit(1)
+  }
+
+  // 4. Scaffold.
+  await mkdir(destDir, { recursive: true })
+  await copyTemplate(srcDir, destDir)
+  await setProjectName(destDir, projectName)
+  if (rl) rl.close()
+
+  // 5. Next steps.
+  const rel = isAbsolute(target) || target.startsWith('.') ? target : `./${target}`
+  stdout.write(`\n${color('green', '✔')} Scaffolded ${color('bold', projectName)} (${template}) into ${rel}\n\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   ${color('dim', 'Pro:')} https://www.svgrid.com/pricing\n\n`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@svgrid/create",
+  "version": "1.0.0",
+  "description": "Scaffold a Svelte app powered by SvGrid in one command: npm create sv-grid@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-sv-grid"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "data-grid",
+    "datagrid",
+    "table",
+    "sv-grid",
+    "create",
+    "scaffold",
+    "starter",
+    "template"
+  ],
+  "bin": {
+    "@svgrid/create": "index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "sync-templates": "node sync-templates.mjs",
+    "prepack": "node sync-templates.mjs"
+  }
+}

package/templates/admin-dashboard/README.md

@@ -0,0 +1,77 @@
+# SvGrid Admin Dashboard (SvelteKit starter)
+
+A production-ready admin dashboard built with **[SvelteKit](https://svelte.dev/docs/kit)**
+and **[SvGrid](https://www.svgrid.com)** - the modern Svelte 5 data grid.
+Sortable, filterable, editable grids; KPI cards; a sidebar shell; prerendered
+to static HTML for SEO; one-click deploy to Vercel.
+
+![SvGrid + SvelteKit](https://img.shields.io/badge/SvelteKit-SvGrid-4f46e5)
+
+## Deploy
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsv-grid%2Fsv-grid%2Ftree%2Fmain%2Ftemplates%2Fsveltekit-admin-dashboard&project-name=sv-grid-admin&repository-name=sv-grid-admin)
+
+> Deploying from this monorepo subfolder? In the Vercel import step set the
+> **Root Directory** to `templates/sveltekit-admin-dashboard`. Or scaffold a
+> standalone copy first (recommended):
+>
+> ```bash
+> npm create sv-grid@latest my-admin -- --template admin-dashboard
+> ```
+
+## Quick start
+
+```bash
+npm install
+npm run dev      # http://localhost:5173
+```
+
+```bash
+npm run build    # static + serverless output via adapter-vercel
+npm run preview  # preview the production build
+npm run check    # svelte-check (types)
+```
+
+## What's inside
+
+| Path | What it shows |
+| --- | --- |
+| `src/routes/+layout.svelte` | App shell: sidebar nav + top bar |
+| `src/routes/+page.svelte` | Overview: KPI cards + a recent-orders grid |
+| `src/routes/orders/+page.svelte` | Full grid: sort, filter, **row select**, inline edit, pagination |
+| `src/routes/customers/+page.svelte` | Grid with **column grouping** (drag a column to the group bar) |
+| `src/lib/data.ts` | Deterministic sample data - swap for your API / `load()` |
+| `src/lib/types.ts` | `Order` / `Customer` row types |
+
+The grids mount client-side (`{#if browser}`) while the shell and headings
+prerender to crawlable HTML - good for SEO and instant first paint. Every
+route is `prerender = true` (see `src/routes/+layout.ts`); delete that line
+on any route that needs SSR or runtime data.
+
+## Wiring your own data
+
+Replace the calls to `makeOrders()` / `makeCustomers()` in each route with a
+SvelteKit [`load`](https://svelte.dev/docs/kit/load) function:
+
+```ts
+// src/routes/orders/+page.ts
+export async function load({ fetch }) {
+  const orders = await fetch('/api/orders').then((r) => r.json())
+  return { orders }
+}
+```
+
+Then read `data.orders` in the page via `let { data } = $props()`.
+
+## Upgrade to Pro
+
+This starter uses the free MIT **`@svgrid/grid`** core. For Excel/PDF
+export, data import, printing, pivot, and the AI helpers, add
+[`@svgrid/enterprise`](https://www.svgrid.com/pricing) and call `installPro(api)` on
+the grid's API. Pro runs in evaluation with a watermark - no key needed to try
+it.
+
+## License
+
+This template is MIT-licensed - use it as the basis for your own app.
+SvGrid(TM) is a trademark of jQWidgets Ltd.

package/templates/admin-dashboard/_env.example

@@ -0,0 +1,3 @@
+# Copy to .env and fill in for your own data source. The starter ships with
+# in-memory sample data, so nothing here is required to run.
+# PUBLIC_API_BASE_URL=https://api.example.com

package/templates/admin-dashboard/_gitignore

@@ -0,0 +1,9 @@
+node_modules
+/build
+/.svelte-kit
+/.vercel
+/package
+.env
+.env.*
+!.env.example
+vite.config.ts.timestamp-*

package/templates/admin-dashboard/_npmrc

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

package/templates/admin-dashboard/_package.json

@@ -0,0 +1,27 @@
+{
+  "name": "sv-grid-admin-dashboard",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Production-ready SvelteKit admin dashboard built on SvGrid (Svelte 5 data grid).",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^5.5.0",
+    "@sveltejs/kit": "^2.15.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5.7.0",
+    "vite": "^8.0.10"
+  },
+  "dependencies": {
+    "@svgrid/grid": "^1.0.0"
+  }
+}

package/templates/admin-dashboard/src/app.css

@@ -0,0 +1,18 @@
+@import 'tailwindcss';
+
+/* SvGrid ships its own scoped styles. These custom properties let you theme
+   the grid to match the dashboard shell. Tweak freely. */
+:root {
+  --app-bg: #f8fafc;
+  --app-panel: #ffffff;
+  --app-border: #e2e8f0;
+  --app-fg: #0f172a;
+  --app-muted: #64748b;
+  --app-accent: #4f46e5;
+}
+
+html,
+body {
+  background: var(--app-bg);
+  color: var(--app-fg);
+}

package/templates/admin-dashboard/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/admin-dashboard/src/app.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Admin dashboard starter built with SvelteKit and SvGrid - the Svelte 5 data grid."
+    />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover" class="h-full">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/templates/admin-dashboard/src/lib/StatCard.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  let {
+    label,
+    value,
+    hint = '',
+  }: { label: string; value: string; hint?: string } = $props()
+</script>
+
+<div
+  class="rounded-xl border bg-white p-4 shadow-sm"
+  style="border-color: var(--app-border);"
+>
+  <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--app-muted);">
+    {label}
+  </p>
+  <p class="mt-1 text-2xl font-bold" style="color: var(--app-fg);">{value}</p>
+  {#if hint}
+    <p class="mt-1 text-xs" style="color: var(--app-muted);">{hint}</p>
+  {/if}
+</div>

package/templates/admin-dashboard/src/lib/data.ts

@@ -0,0 +1,84 @@
+import type { Customer, Order, OrderStatus } from './types'
+
+// Deterministic pseudo-random generator so the sample data is stable across
+// reloads and SSR/CSR (no hydration mismatch). Swap any of this out for your
+// own API / load function.
+function mulberry32(seed: number): () => number {
+  let a = seed
+  return () => {
+    a |= 0
+    a = (a + 0x6d2b79f5) | 0
+    let t = Math.imul(a ^ (a >>> 15), 1 | a)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+const FIRST = ['Ava', 'Liam', 'Noah', 'Emma', 'Mia', 'Lucas', 'Sofia', 'Ethan', 'Aria', 'Leo', 'Zoe', 'Kai']
+const LAST = ['Carter', 'Nguyen', 'Patel', 'Kim', 'Garcia', 'Müller', 'Rossi', 'Silva', 'Okafor', 'Haddad', 'Novak', 'Tanaka']
+const COMPANIES = ['Northwind', 'Acme', 'Globex', 'Initech', 'Umbrella', 'Hooli', 'Vandelay', 'Stark Co', 'Wayne LLC', 'Soylent']
+const PRODUCTS = ['Starter Plan', 'Team Plan', 'Enterprise Plan', 'Add-on: Storage', 'Add-on: Seats', 'Onboarding']
+const COUNTRIES = ['US', 'UK', 'DE', 'FR', 'JP', 'BR', 'CA', 'AU', 'IN', 'NL']
+const STATUSES: OrderStatus[] = ['paid', 'paid', 'paid', 'pending', 'refunded', 'failed']
+const PLANS: Customer['plan'][] = ['Free', 'Pro', 'Pro', 'Enterprise']
+
+function isoDaysAgo(rng: () => number, maxDays: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() - Math.floor(rng() * maxDays))
+  return d.toISOString().slice(0, 10)
+}
+
+export function makeOrders(count = 240): Order[] {
+  const rng = mulberry32(42)
+  return Array.from({ length: count }, (_, i) => {
+    const customer = `${FIRST[Math.floor(rng() * FIRST.length)]} ${LAST[Math.floor(rng() * LAST.length)]}`
+    const quantity = 1 + Math.floor(rng() * 6)
+    const unit = [19, 49, 99, 149, 299][Math.floor(rng() * 5)]
+    return {
+      id: `ORD-${(10000 + i).toString()}`,
+      customer,
+      email: `${customer.toLowerCase().replace(/[^a-z]/g, '.')}@example.com`,
+      product: PRODUCTS[Math.floor(rng() * PRODUCTS.length)],
+      status: STATUSES[Math.floor(rng() * STATUSES.length)],
+      quantity,
+      total: quantity * unit,
+      country: COUNTRIES[Math.floor(rng() * COUNTRIES.length)],
+      date: isoDaysAgo(rng, 120),
+    }
+  })
+}
+
+export function makeCustomers(count = 120): Customer[] {
+  const rng = mulberry32(7)
+  return Array.from({ length: count }, (_, i) => {
+    const name = `${FIRST[Math.floor(rng() * FIRST.length)]} ${LAST[Math.floor(rng() * LAST.length)]}`
+    const plan = PLANS[Math.floor(rng() * PLANS.length)]
+    const seats = plan === 'Enterprise' ? 10 + Math.floor(rng() * 90) : plan === 'Pro' ? 1 + Math.floor(rng() * 10) : 1
+    const perSeat = plan === 'Enterprise' ? 40 : plan === 'Pro' ? 15 : 0
+    return {
+      id: `CUS-${(2000 + i).toString()}`,
+      name,
+      email: `${name.toLowerCase().replace(/[^a-z]/g, '.')}@example.com`,
+      company: COMPANIES[Math.floor(rng() * COMPANIES.length)],
+      plan,
+      mrr: seats * perSeat,
+      seats,
+      active: rng() > 0.18,
+      joined: isoDaysAgo(rng, 900),
+    }
+  })
+}
+
+/** Headline KPIs derived from the sample data - feeds the dashboard cards. */
+export function summarize(orders: Order[], customers: Customer[]) {
+  const revenue = orders.filter((o) => o.status === 'paid').reduce((s, o) => s + o.total, 0)
+  const mrr = customers.filter((c) => c.active).reduce((s, c) => s + c.mrr, 0)
+  const pending = orders.filter((o) => o.status === 'pending').length
+  return {
+    revenue,
+    mrr,
+    pending,
+    customers: customers.filter((c) => c.active).length,
+    orders: orders.length,
+  }
+}

package/templates/admin-dashboard/src/lib/types.ts

@@ -0,0 +1,25 @@
+export type OrderStatus = 'paid' | 'pending' | 'refunded' | 'failed'
+
+export interface Order {
+  id: string
+  customer: string
+  email: string
+  product: string
+  status: OrderStatus
+  quantity: number
+  total: number
+  country: string
+  date: string // ISO yyyy-mm-dd
+}
+
+export interface Customer {
+  id: string
+  name: string
+  email: string
+  company: string
+  plan: 'Free' | 'Pro' | 'Enterprise'
+  mrr: number
+  seats: number
+  active: boolean
+  joined: string // ISO yyyy-mm-dd
+}

package/templates/admin-dashboard/src/routes/+layout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import '../app.css'
+  import { page } from '$app/state'
+
+  let { children } = $props()
+
+  const nav = [
+    { href: '/', label: 'Overview', icon: '▦' },
+    { href: '/orders', label: 'Orders', icon: '🧾' },
+    { href: '/customers', label: 'Customers', icon: '👥' },
+  ]
+
+  function isActive(href: string): boolean {
+    return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href)
+  }
+</script>
+
+<div class="flex h-full min-h-screen">
+  <!-- Sidebar -->
+  <aside
+    class="hidden w-60 shrink-0 flex-col border-r bg-white md:flex"
+    style="border-color: var(--app-border);"
+  >
+    <div class="flex items-center gap-2 px-5 py-4">
+      <span
+        class="grid h-8 w-8 place-items-center rounded-lg font-bold text-white"
+        style="background: var(--app-accent);">S</span
+      >
+      <div class="leading-tight">
+        <p class="text-sm font-bold" style="color: var(--app-fg);">SvGrid Admin</p>
+        <p class="text-[11px]" style="color: var(--app-muted);">Dashboard starter</p>
+      </div>
+    </div>
+
+    <nav class="mt-2 flex-1 px-3">
+      {#each nav as item}
+        <a
+          href={item.href}
+          class="mb-1 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+          style={isActive(item.href)
+            ? 'background: var(--app-accent); color: #fff;'
+            : 'color: var(--app-fg);'}
+        >
+          <span class="w-5 text-center">{item.icon}</span>
+          {item.label}
+        </a>
+      {/each}
+    </nav>
+
+    <div class="px-5 py-4 text-[11px]" style="color: var(--app-muted);">
+      Built with
+      <a class="underline" href="https://www.svgrid.com" target="_blank" rel="noopener">SvGrid</a>
+      + SvelteKit
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <div class="flex min-w-0 flex-1 flex-col">
+    <header
+      class="flex items-center justify-between border-b bg-white px-6 py-3"
+      style="border-color: var(--app-border);"
+    >
+      <h1 class="text-base font-semibold" style="color: var(--app-fg);">
+        {nav.find((n) => isActive(n.href))?.label ?? 'Dashboard'}
+      </h1>
+      <a
+        href="https://www.svgrid.com/docs"
+        target="_blank"
+        rel="noopener"
+        class="rounded-lg border px-3 py-1.5 text-sm font-medium"
+        style="border-color: var(--app-border); color: var(--app-fg);">Docs</a
+      >
+    </header>
+
+    <main class="min-w-0 flex-1 p-6">
+      {@render children()}
+    </main>
+  </div>
+</div>

package/templates/admin-dashboard/src/routes/+layout.ts

@@ -0,0 +1,4 @@
+// Prerender the whole dashboard to static HTML at build time. The grids
+// hydrate on the client; the shell + headings ship as crawlable HTML, which
+// is great for SEO and makes the Vercel deploy a static, edge-cached site.
+export const prerender = true

package/templates/admin-dashboard/src/routes/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { browser } from '$app/environment'
+  import {
+    SvGrid,
+    tableFeatures,
+    rowSortingFeature,
+    columnFilteringFeature,
+    type ColumnDef,
+  } from '@svgrid/grid'
+  import StatCard from '$lib/StatCard.svelte'
+  import { makeOrders, makeCustomers, summarize } from '$lib/data'
+  import type { Order } from '$lib/types'
+
+  const orders = makeOrders()
+  const customers = makeCustomers()
+  const kpis = summarize(orders, customers)
+
+  const usd = (n: number) =>
+    n.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })
+
+  // Most recent 8 orders for the overview table.
+  const recent = $state(
+    [...orders].sort((a, b) => b.date.localeCompare(a.date)).slice(0, 8),
+  )
+
+  const features = tableFeatures({ rowSortingFeature, columnFilteringFeature })
+
+  const columns: ColumnDef<typeof features, Order>[] = [
+    { field: 'id', header: 'Order', width: 110 },
+    { field: 'customer', header: 'Customer', width: 160 },
+    { field: 'product', header: 'Product', width: 150 },
+    { field: 'status', header: 'Status', width: 110 },
+    {
+      field: 'total',
+      header: 'Total',
+      width: 110,
+      align: 'right',
+      format: { type: 'currency', currency: 'USD' },
+    },
+    { field: 'date', header: 'Date', width: 120, format: { type: 'date', pattern: 'y-m-d' } },
+  ]
+</script>
+
+<svelte:head>
+  <title>Overview · SvGrid Admin</title>
+</svelte:head>
+
+<section class="space-y-6">
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <StatCard label="Revenue (paid)" value={usd(kpis.revenue)} hint="all-time, sample data" />
+    <StatCard label="MRR" value={usd(kpis.mrr)} hint={`${kpis.customers} active customers`} />
+    <StatCard label="Orders" value={kpis.orders.toString()} hint={`${kpis.pending} pending`} />
+    <StatCard label="Active customers" value={kpis.customers.toString()} />
+  </div>
+
+  <div class="rounded-xl border bg-white p-4 shadow-sm" style="border-color: var(--app-border);">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 class="text-sm font-semibold" style="color: var(--app-fg);">Recent orders</h2>
+      <a class="text-sm font-medium" style="color: var(--app-accent);" href="/orders">View all →</a>
+    </div>
+
+    <div style="height: 360px;">
+      {#if browser}
+        <SvGrid
+          data={recent}
+          {columns}
+          {features}
+          filterMode="menu"
+          showRowNumbers={false}
+          showPagination={false}
+          rowHeight={40}
+          containerHeight="100%"
+          fitColumns={true}
+        />
+      {:else}
+        <!-- Prerendered placeholder: real, crawlable rows for SEO -->
+        <ul class="text-sm" style="color: var(--app-muted);">
+          {#each recent as o}
+            <li class="border-b py-1" style="border-color: var(--app-border);">
+              {o.id} · {o.customer} · {o.product} · {usd(o.total)}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </div>
+</section>

package/templates/admin-dashboard/src/routes/customers/+page.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { browser } from '$app/environment'
+  import {
+    SvGrid,
+    tableFeatures,
+    rowSortingFeature,
+    columnFilteringFeature,
+    columnGroupingFeature,
+    type ColumnDef,
+  } from '@svgrid/grid'
+  import { makeCustomers } from '$lib/data'
+  import type { Customer } from '$lib/types'
+
+  const features = tableFeatures({
+    rowSortingFeature,
+    columnFilteringFeature,
+    columnGroupingFeature,
+  })
+
+  let rows = $state<Customer[]>(makeCustomers())
+
+  const columns: ColumnDef<typeof features, Customer>[] = [
+    { field: 'id', header: 'ID', width: 100 },
+    { field: 'name', header: 'Name', editorType: 'text', width: 150 },
+    { field: 'company', header: 'Company', width: 130 },
+    { field: 'plan', header: 'Plan', width: 120 },
+    {
+      field: 'seats',
+      header: 'Seats',
+      width: 90,
+      align: 'right',
+      format: { type: 'number', options: { maximumFractionDigits: 0 } },
+    },
+    {
+      field: 'mrr',
+      header: 'MRR',
+      width: 110,
+      align: 'right',
+      format: { type: 'currency', currency: 'USD' },
+    },
+    { field: 'active', header: 'Active', width: 90, editorType: 'checkbox' },
+    { field: 'joined', header: 'Joined', width: 120, format: { type: 'date', pattern: 'y-m-d' } },
+  ]
+</script>
+
+<svelte:head>
+  <title>Customers · SvGrid Admin</title>
+</svelte:head>
+
+<section class="flex h-full flex-col gap-3">
+  <p class="text-sm" style="color: var(--app-muted);">
+    {rows.length} customers · drag the <strong>Plan</strong> column into the group bar to group by plan.
+  </p>
+
+  <div class="min-h-0 flex-1 rounded-xl border bg-white p-2 shadow-sm" style="border-color: var(--app-border);">
+    {#if browser}
+      <SvGrid
+        data={rows}
+        {columns}
+        {features}
+        filterMode="menu"
+        showRowNumbers={true}
+        showPagination={true}
+        pageSize={50}
+        showGroupingControls={true}
+        enableInlineEditing={true}
+        rowHeight={38}
+        containerHeight="100%"
+        fitColumns={true}
+      />
+    {:else}
+      <p class="p-4 text-sm" style="color: var(--app-muted);">Loading {rows.length} customers…</p>
+    {/if}
+  </div>
+</section>

package/templates/admin-dashboard/src/routes/orders/+page.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { browser } from '$app/environment'
+  import {
+    SvGrid,
+    tableFeatures,
+    rowSortingFeature,
+    columnFilteringFeature,
+    rowSelectionFeature,
+    type ColumnDef,
+    type SvGridApi,
+  } from '@svgrid/grid'
+  import { makeOrders } from '$lib/data'
+  import type { Order } from '$lib/types'
+
+  const features = tableFeatures({
+    rowSortingFeature,
+    columnFilteringFeature,
+    rowSelectionFeature,
+  })
+
+  let rows = $state<Order[]>(makeOrders())
+  let api = $state<SvGridApi<typeof features, Order> | null>(null)
+  let selectedCount = $state(0)
+
+  const columns: ColumnDef<typeof features, Order>[] = [
+    { field: 'id', header: 'Order', width: 110 },
+    { field: 'customer', header: 'Customer', editorType: 'text', width: 150 },
+    { field: 'email', header: 'Email', editorType: 'text', width: 190 },
+    { field: 'product', header: 'Product', editorType: 'text', width: 150 },
+    { field: 'status', header: 'Status', width: 110 },
+    {
+      field: 'quantity',
+      header: 'Qty',
+      editorType: 'number',
+      width: 80,
+      align: 'right',
+      format: { type: 'number', options: { maximumFractionDigits: 0 } },
+    },
+    {
+      field: 'total',
+      header: 'Total',
+      width: 120,
+      align: 'right',
+      format: { type: 'currency', currency: 'USD' },
+    },
+    { field: 'country', header: 'Country', width: 90 },
+    { field: 'date', header: 'Date', width: 120, format: { type: 'date', pattern: 'y-m-d' } },
+  ]
+</script>
+
+<svelte:head>
+  <title>Orders · SvGrid Admin</title>
+</svelte:head>
+
+<section class="flex h-full flex-col gap-3">
+  <div class="flex items-center justify-between">
+    <p class="text-sm" style="color: var(--app-muted);">
+      {rows.length} orders · sort, filter, select, edit inline, paginate.
+      {#if selectedCount > 0}
+        <span class="font-medium" style="color: var(--app-accent);">{selectedCount} selected</span>
+      {/if}
+    </p>
+  </div>
+
+  <div class="min-h-0 flex-1 rounded-xl border bg-white p-2 shadow-sm" style="border-color: var(--app-border);">
+    {#if browser}
+      <SvGrid
+        data={rows}
+        {columns}
+        {features}
+        filterMode="menu"
+        selectionMode="row"
+        showRowSelection={true}
+        showRowNumbers={true}
+        showPagination={true}
+        pageSize={25}
+        enableInlineEditing={true}
+        rowHeight={38}
+        containerHeight="100%"
+        fitColumns={true}
+        getRowId={(o: Order) => o.id}
+        onApiReady={(next) => (api = next)}
+        onRowSelectionChange={(_e, sel) => (selectedCount = sel.length)}
+      />
+    {:else}
+      <p class="p-4 text-sm" style="color: var(--app-muted);">Loading {rows.length} orders…</p>
+    {/if}
+  </div>
+</section>

package/templates/admin-dashboard/static/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#4f46e5" />
+  <g fill="#fff">
+    <rect x="6" y="7" width="20" height="4" rx="1.2" />
+    <rect x="6" y="14" width="9" height="4" rx="1.2" />
+    <rect x="17" y="14" width="9" height="4" rx="1.2" opacity="0.7" />
+    <rect x="6" y="21" width="9" height="4" rx="1.2" opacity="0.7" />
+    <rect x="17" y="21" width="9" height="4" rx="1.2" />
+  </g>
+</svg>

package/templates/admin-dashboard/svelte.config.js

@@ -0,0 +1,14 @@
+import adapter from '@sveltejs/adapter-vercel'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    // adapter-vercel ships zero-config to Vercel. Swap for adapter-auto,
+    // adapter-static, adapter-node, etc. if you deploy elsewhere.
+    adapter: adapter(),
+  },
+}
+
+export default config

package/templates/admin-dashboard/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/admin-dashboard/vite.config.ts

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

package/templates/minimal/README.md

@@ -0,0 +1,21 @@
+# SvGrid app
+
+A minimal [Vite](https://vite.dev) + [Svelte 5](https://svelte.dev) app wired
+to [SvGrid](https://www.svgrid.com), the Svelte data grid.
+
+```bash
+npm install
+npm run dev      # http://localhost:5173
+npm run build
+```
+
+Open `src/App.svelte` and edit the `rows` / `columns` to use your own data.
+
+## Next steps
+
+- Add more features: `rowExpandingFeature`, `columnGroupingFeature`, pagination, pinned rows. See the [docs](https://www.svgrid.com/docs).
+- Need Excel/PDF export, import, print, pivot, or AI helpers? Add [`@svgrid/enterprise`](https://www.svgrid.com/pricing).
+- Want a full app shell with routing? Scaffold the admin starter instead:
+  `npm create sv-grid@latest my-admin -- --template admin-dashboard`
+
+SvGrid(TM) is a trademark of jQWidgets Ltd. This template is MIT-licensed.

package/templates/minimal/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.local

package/templates/minimal/_package.json

@@ -0,0 +1,19 @@
+{
+  "name": "sv-grid-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "svelte": "^5.55.5",
+    "vite": "^8.0.10"
+  },
+  "dependencies": {
+    "@svgrid/grid": "^1.0.0"
+  }
+}

package/templates/minimal/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SvGrid app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/minimal/src/App.svelte

@@ -0,0 +1,61 @@
+<script>
+  import {
+    SvGrid,
+    tableFeatures,
+    rowSortingFeature,
+    columnFilteringFeature,
+    rowSelectionFeature,
+  } from '@svgrid/grid'
+
+  const features = tableFeatures({
+    rowSortingFeature,
+    columnFilteringFeature,
+    rowSelectionFeature,
+  })
+
+  // Your data. Swap for a fetch() in onMount, a store, or props.
+  let rows = $state([
+    { id: 1, name: 'Ada Lovelace', team: 'Engineering', salary: 145000, active: true },
+    { id: 2, name: 'Alan Turing', team: 'Research', salary: 160000, active: true },
+    { id: 3, name: 'Grace Hopper', team: 'Engineering', salary: 152000, active: false },
+    { id: 4, name: 'Katherine Johnson', team: 'Data', salary: 138000, active: true },
+    { id: 5, name: 'Edsger Dijkstra', team: 'Research', salary: 149000, active: false },
+  ])
+
+  const columns = [
+    { field: 'name', header: 'Name', editorType: 'text', width: 200 },
+    { field: 'team', header: 'Team', editorType: 'text', width: 150 },
+    {
+      field: 'salary',
+      header: 'Salary',
+      width: 130,
+      align: 'right',
+      format: { type: 'currency', currency: 'USD' },
+    },
+    { field: 'active', header: 'Active', editorType: 'checkbox', width: 90 },
+  ]
+</script>
+
+<main style="max-width: 720px; margin: 3rem auto; font-family: system-ui, sans-serif;">
+  <h1 style="font-size: 1.4rem;">SvGrid</h1>
+  <p style="color:#64748b;">
+    Sort, filter, select, and double-click a cell to edit. Edit
+    <code>src/App.svelte</code> to make it yours.
+  </p>
+
+  <div style="height: 320px;">
+    <SvGrid
+      data={rows}
+      {columns}
+      {features}
+      filterMode="menu"
+      selectionMode="row"
+      showRowSelection={true}
+      showRowNumbers={true}
+      enableInlineEditing={true}
+      rowHeight={38}
+      containerHeight="100%"
+      fitColumns={true}
+    />
+  </div>
+</main>

package/templates/minimal/src/main.js

@@ -0,0 +1,6 @@
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+const app = mount(App, { target: document.getElementById('app') })
+
+export default app

package/templates/minimal/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  preprocess: vitePreprocess(),
+}

package/templates/minimal/vite.config.js

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