@svgrid/create 2.5.0 → 2.7.0

package/templates/headless/src/app.css

@@ -0,0 +1,153 @@
+/* ---------------------------------------------------------------------------
+ * Your stylesheet. All of it.
+ *
+ * Nothing here comes from @svgrid/grid - there is no preset import, no --sg-*
+ * token, no theme to pick. The headless entry point ships an engine and no CSS,
+ * so the table below is styled the same way any other table in your app would
+ * be. Rename the variables, drop them for Tailwind classes, delete this file
+ * and start over: none of it affects sorting or filtering.
+ *
+ * If you'd rather inherit a themed grid than write one, the other starters use
+ * the <SvGrid> renderer and its 20 presets:
+ *   npm create @svgrid@latest my-app -- --template minimal
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --app-bg: #ffffff;
+  --app-surface: #fafaf9;
+  --app-fg: #1c1917;
+  --app-muted: #78716c;
+  --app-border: #e7e5e4;
+  --app-accent: #c2410c;
+  --app-hover: #f5f5f4;
+  color-scheme: light;
+}
+
+/* Dark mode follows the OS. Swap this for a data-theme attribute and a toggle
+   if you want the choice to be the user's. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --app-bg: #1c1917;
+    --app-surface: #292524;
+    --app-fg: #fafaf9;
+    --app-muted: #a8a29e;
+    --app-border: #44403c;
+    --app-accent: #fb923c;
+    --app-hover: #292524;
+    color-scheme: dark;
+  }
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--app-bg);
+  color: var(--app-fg);
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+}
+
+main {
+  max-width: 720px;
+  margin: 3rem auto;
+  padding: 0 1rem;
+}
+
+h1 {
+  margin: 0 0 0.5rem;
+  font-size: 1.4rem;
+}
+
+header p {
+  margin: 0 0 1.5rem;
+  color: var(--app-muted);
+  line-height: 1.6;
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+}
+
+.search {
+  width: 260px;
+  margin-bottom: 1rem;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--app-border);
+  border-radius: 6px;
+  background: var(--app-bg);
+  color: var(--app-fg);
+  font: inherit;
+  font-size: 0.9rem;
+}
+
+.search:focus-visible {
+  outline: 2px solid var(--app-accent);
+  outline-offset: 1px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+th {
+  padding: 0;
+  background: var(--app-surface);
+  border-bottom: 2px solid var(--app-border);
+  text-align: left;
+}
+
+/* The header is a button so keyboard users can sort too - the engine does not
+   care what element calls toggleSort. */
+th button {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+th button:hover {
+  color: var(--app-accent);
+}
+
+th button:focus-visible {
+  outline: 2px solid var(--app-accent);
+  outline-offset: -2px;
+}
+
+.indicator {
+  color: var(--app-accent);
+  font-size: 0.7em;
+}
+
+td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--app-border);
+}
+
+tbody tr:hover td {
+  background: var(--app-hover);
+}
+
+.numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  padding: 1.5rem;
+  color: var(--app-muted);
+  text-align: center;
+}
+
+.count {
+  margin-top: 0.75rem;
+  color: var(--app-muted);
+  font-size: 0.8rem;
+}

package/templates/headless/src/main.ts

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

package/templates/headless/src/vite-env.d.ts

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

package/templates/headless/svelte.config.js

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

package/templates/headless/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"]
+}

package/templates/headless/vite.config.js

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

package/templates/minimal/src/app.css

@@ -13,7 +13,7 @@
  * Token reference: https://svgrid.com/docs/getting-started/5-theme-and-density
  * ------------------------------------------------------------------------- */
 /* svgrid-theme:start */
-@import '@svgrid/grid/themes/shadcn.css';
+@import '@svgrid/grid/themes/ember.css';
 /* svgrid-theme:end */
 
 /* Which way the page leans, so scrollbars, form controls and the canvas behind

package/templates/sveltekit/README.md

@@ -0,0 +1,44 @@
+# SvGrid + SvelteKit sample
+
+A grid whose rows are loaded on the server, sorted from the URL, and edited
+through a form action - the three things that are different about running a grid
+in SvelteKit rather than a plain Vite SPA.
+
+```bash
+npm install
+npm run dev     # http://localhost:5173/people
+```
+
+## What to try
+
+1. **Click the `Year` header.** The URL becomes `?sort=year&dir=asc`. Copy that
+   link into a new tab - it opens already sorted, because the server did it.
+2. **Double-click a name, change it, press Enter, then reload.** The edit went
+   through the form action in `+page.server.ts` and survived.
+3. **Switch the theme** with the picker in the header. All 20 built-in presets,
+   light and dark, applied live.
+4. **`curl localhost:5173/people`.** The rows are in the HTML, not injected by
+   JS afterwards. That is what a crawler sees.
+
+## Where things are
+
+| File | Does |
+| --- | --- |
+| `src/lib/people.ts` | Stands in for your database. Swap for real queries. |
+| `src/routes/people/+page.server.ts` | `load` sorts from the query string; the `rename` action takes the edit. |
+| `src/routes/people/+page.svelte` | The grid. `externalSort` because the server owns the ordering. |
+| `src/lib/theme.svelte.ts` | Runtime theme switching via `resolveThemeTokens`. |
+| `src/app.css` | Imports one preset so the first paint is themed before JS runs. |
+
+## Themes
+
+Pick a starting theme when you scaffold:
+
+```bash
+npm create @svgrid@latest my-app -- --template sveltekit --theme dracula --dark
+```
+
+Or change it at runtime with the header picker. The picker writes the preset's
+`--sg-*` custom properties onto `<html>`; nothing rebuilds.
+
+Full guide: https://svgrid.com/docs/getting-started/sveltekit/

package/templates/sveltekit/_gitignore

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

package/templates/sveltekit/_package.json

@@ -0,0 +1,26 @@
+{
+  "name": "svgrid-sveltekit-sample",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.56.1",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "dependencies": {
+    "@svgrid/grid": "^2.6.8"
+  }
+}

package/templates/sveltekit/src/app.css

@@ -0,0 +1,15 @@
+/* SvGrid theme. One of the 20 presets @svgrid/grid ships.
+ *
+ * Importing it as a stylesheet means the FIRST paint - and the server-rendered
+ * HTML - is already themed, before any JavaScript runs. The theme picker in the
+ * layout overrides these values at runtime by setting the same --sg-* custom
+ * properties on <html>.
+ *
+ * `npm create @svgrid@latest -- --theme <id>` rewrites the line between the
+ * markers, so pick a starting theme at scaffold time if you prefer. */
+/* svgrid-theme:start */
+@import '@svgrid/grid/themes/ember.css';
+/* svgrid-theme:end */
+
+* { box-sizing: border-box; }
+body { margin: 0; }

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

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

package/templates/sveltekit/src/app.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="text-scale" content="scale" />
+		<script>
+			// Settle the theme before the first paint. Without this the server-rendered
+			// HTML shows one palette and the picker in +layout.svelte swaps it a frame
+			// later. With nothing saved yet we follow the OS.
+			try {
+				var saved = JSON.parse(localStorage.getItem('svgrid-theme') || 'null')
+				var fallback = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+				document.documentElement.dataset.theme = (saved && saved.mode) || fallback
+			} catch (e) {}
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/templates/sveltekit/src/lib/people.ts

@@ -0,0 +1,22 @@
+export type Person = { id: number; name: string; role: string; year: number }
+
+// Stands in for your database. Mutating a module-level array is fine for a
+// tutorial; swap it for real queries and the rest of the page is unchanged.
+const people: Person[] = [
+  { id: 1, name: 'Ada Lovelace', role: 'Mathematician', year: 1843 },
+  { id: 2, name: 'Grace Hopper', role: 'Rear Admiral', year: 1952 },
+  { id: 3, name: 'Karen Sparck Jones', role: 'Computer Scientist', year: 1972 },
+  { id: 4, name: 'Barbara Liskov', role: 'Computer Scientist', year: 1968 },
+  { id: 5, name: 'Margaret Hamilton', role: 'Software Engineer', year: 1969 },
+]
+
+export function listPeople(sortBy: keyof Person = 'name', desc = false): Person[] {
+  const rows = [...people]
+  rows.sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : a[sortBy] < b[sortBy] ? -1 : 0))
+  return desc ? rows.reverse() : rows
+}
+
+export function renamePerson(id: number, name: string): void {
+  const row = people.find((p) => p.id === id)
+  if (row) row.name = name
+}

package/templates/sveltekit/src/lib/theme.svelte.ts

@@ -0,0 +1,87 @@
+/**
+ * Runtime theme switching.
+ *
+ * `@svgrid/grid/themes` ships 20 presets and a `resolveThemeTokens(preset, mode)`
+ * helper that returns the `--sg-*` custom properties for a given preset and
+ * light/dark mode. Writing those onto `<html>` re-themes the grid live - there
+ * is nothing to rebuild and no stylesheet to swap.
+ *
+ * `app.css` imports one preset as a stylesheet so the very first paint (and the
+ * server-rendered HTML) already has a theme before any JS runs. The values set
+ * here override it once the user picks something.
+ */
+import {
+  getThemePreset,
+  resolveThemeTokens,
+  themePresets,
+  type ThemeMode,
+} from '@svgrid/grid/themes'
+
+/** Every preset, for the picker. */
+export const presets = themePresets.map((p) => ({ id: p.id, name: p.name }))
+
+const STORAGE_KEY = 'svgrid-theme'
+
+// `npm create @svgrid@latest -- --theme <id> [--dark|--light]` patches the two
+// values between these markers so the scaffolded app starts on the theme you
+// asked for. INITIAL_MODE is only the fallback: a saved choice wins over it, and
+// so does the OS preference when nobody has pinned a mode. The inline script in
+// `app.html` settles the same question before the first paint.
+/* svgrid-initial-theme:start */
+export const INITIAL_THEME = 'ember'
+export const INITIAL_MODE: ThemeMode = 'light'
+/* svgrid-initial-theme:end */
+
+type Saved = { id: string; mode: ThemeMode }
+
+function restore(): Saved {
+  const fallback: Saved = { id: INITIAL_THEME, mode: INITIAL_MODE }
+  if (typeof document === 'undefined') return fallback
+  // Trust whatever app.html's inline script settled on, so the picker agrees
+  // with what is already on screen.
+  const painted = document.documentElement.dataset.theme
+  if (painted === 'dark' || painted === 'light') fallback.mode = painted
+  try {
+    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null') as Saved | null
+    if (!saved || typeof saved.id !== 'string') return fallback
+    if (!getThemePreset(saved.id)) return fallback
+    return { id: saved.id, mode: saved.mode === 'dark' ? 'dark' : 'light' }
+  } catch {
+    return fallback
+  }
+}
+
+class ThemeState {
+  #initial = restore()
+  id = $state(this.#initial.id)
+  mode = $state<ThemeMode>(this.#initial.mode)
+
+  /** Push the current selection onto <html> as CSS custom properties. */
+  apply() {
+    if (typeof document === 'undefined') return
+    const tokens = resolveThemeTokens(getThemePreset(this.id) ?? getThemePreset(INITIAL_THEME)!, this.mode)
+    const root = document.documentElement
+    for (const [key, value] of Object.entries(tokens)) root.style.setProperty(key, value)
+    // Lets the browser theme form controls and scrollbars to match, and keeps
+    // any `[data-theme='dark']` rules in your own CSS in step.
+    root.style.colorScheme = this.mode
+    root.dataset.theme = this.mode
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ id: this.id, mode: this.mode }))
+    } catch {
+      // Private mode, quota, a blocked origin - not worth breaking the page over.
+    }
+  }
+
+  set(id: string, mode: ThemeMode = this.mode) {
+    this.id = id
+    this.mode = mode
+    this.apply()
+  }
+
+  toggleMode() {
+    this.set(this.id, this.mode === 'dark' ? 'light' : 'dark')
+  }
+}
+
+export const theme = new ThemeState()

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

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import '../app.css'
+  import { theme, presets } from '$lib/theme.svelte'
+
+  let { children } = $props()
+
+  // Apply on mount so the picker's starting value wins over the stylesheet, and
+  // on every later change. Runs client-side only - the server-rendered HTML is
+  // already themed by the stylesheet import in app.css.
+  $effect(() => {
+    theme.apply()
+  })
+</script>
+
+<header class="bar">
+  <strong>SvGrid + SvelteKit</strong>
+
+  <label>
+    Theme
+    <select
+      value={theme.id}
+      onchange={(e) => theme.set(e.currentTarget.value)}
+      aria-label="Grid theme"
+    >
+      {#each presets as p (p.id)}
+        <option value={p.id}>{p.name}</option>
+      {/each}
+    </select>
+  </label>
+
+  <button type="button" onclick={() => theme.toggleMode()} aria-pressed={theme.mode === 'dark'}>
+    {theme.mode === 'dark' ? 'Dark' : 'Light'}
+  </button>
+</header>
+
+<main>
+  {@render children?.()}
+</main>
+
+<style>
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--sg-border);
+    background: var(--sg-header-bg);
+    color: var(--sg-header-fg);
+    font-family: system-ui, sans-serif;
+  }
+  .bar label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.875rem;
+  }
+  .bar select,
+  .bar button {
+    font: inherit;
+    padding: 0.3rem 0.5rem;
+    border-radius: 6px;
+    border: 1px solid var(--sg-border);
+    background: var(--sg-bg);
+    color: var(--sg-fg);
+  }
+  .bar button {
+    cursor: pointer;
+    min-width: 4.5rem;
+  }
+  main {
+    padding: 1.25rem;
+    font-family: system-ui, sans-serif;
+    color: var(--sg-fg);
+    background: var(--sg-bg);
+    min-height: 100vh;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+<h1>SvGrid + SvelteKit</h1>
+<p>
+  The sample lives at <a href="/people">/people</a> - a grid whose rows are
+  loaded in <code>+page.server.ts</code>, sorted from the URL, and edited through
+  a form action.
+</p>
+<p>Use the picker in the header to switch the grid theme while it runs.</p>

package/templates/sveltekit/src/routes/people/+page.server.ts

@@ -0,0 +1,16 @@
+import type { Actions, PageServerLoad } from './$types'
+import { listPeople, renamePerson, type Person } from '$lib/people'
+
+export const load: PageServerLoad = ({ url }) => {
+  const sortBy = (url.searchParams.get('sort') ?? 'name') as keyof Person
+  const desc = url.searchParams.get('dir') === 'desc'
+  return { rows: listPeople(sortBy, desc), sortBy, desc }
+}
+
+export const actions: Actions = {
+  rename: async ({ request }) => {
+    const data = await request.formData()
+    renamePerson(Number(data.get('id')), String(data.get('name')))
+    return { success: true }
+  },
+}

package/templates/sveltekit/src/routes/people/+page.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import { page } from '$app/state'
+  import { SvGrid, type GridColumns } from '@svgrid/grid'
+  import type { Person } from '$lib/people'
+
+  let { data } = $props()
+
+  const columns: GridColumns<Person> = [
+    { field: 'name', header: 'Name', editable: true },
+    { field: 'role', header: 'Role' },
+    { field: 'year', header: 'Year' },
+  ]
+
+  // Header click -> URL -> server sorts -> load returns ordered rows.
+  function onSortingChange(sorting: Array<{ id: string; desc: boolean }>) {
+    const next = new URL(page.url)
+    if (sorting.length === 0) {
+      next.searchParams.delete('sort')
+      next.searchParams.delete('dir')
+    } else {
+      next.searchParams.set('sort', sorting[0]!.id)
+      next.searchParams.set('dir', sorting[0]!.desc ? 'desc' : 'asc')
+    }
+    goto(next, { keepFocus: true, noScroll: true })
+  }
+
+  // Committed edit -> form action -> database.
+  async function onCellValueChange(e: { row: Person; columnId: string; newValue: unknown }) {
+    if (e.columnId !== 'name') return
+    const body = new FormData()
+    body.set('id', String(e.row.id))
+    body.set('name', String(e.newValue))
+    await fetch('?/rename', { method: 'POST', body })
+  }
+</script>
+
+<h1>People</h1>
+<p>Click a header to sort - the order lives in the URL. Double-click a name to edit it.</p>
+
+<SvGrid
+  data={data.rows}
+  {columns}
+  sortable
+  editable
+  externalSort
+  initialSorting={[{ id: data.sortBy, desc: data.desc }]}
+  {onSortingChange}
+  {onCellValueChange}
+  containerHeight={320}
+/>

package/templates/sveltekit/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/templates/sveltekit/vite.config.ts

@@ -0,0 +1,20 @@
+import adapter from '@sveltejs/adapter-auto';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		sveltekit({
+			compilerOptions: {
+				// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
+				runes: ({ filename }) =>
+					filename.split(/[/\\]/).includes('node_modules') ? undefined : true
+			},
+
+			// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+			// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+			// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+			adapter: adapter()
+		})
+	]
+});