@svgrid/create 2.6.0 → 2.8.0

package/templates/pivot-dashboard/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/pivot-dashboard/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()
+		})
+	]
+});

package/templates/sveltekit/README.md

@@ -1,8 +1,8 @@
 # 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.
+A grid whose rows are loaded on the server, sorted from the URL, edited through
+a form action, and gated behind a cookie session with roles - the things that
+are different about running a grid in SvelteKit rather than a plain Vite SPA.
 
 ```bash
 npm install
@@ -19,6 +19,16 @@ npm run dev     # http://localhost:5173/people
    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.
+5. **Sign in as each user.** `admin@example.com` can edit names;
+   `viewer@example.com` cannot, and the column is not editable for them.
+   The password is `password` for both.
+6. **Try to bypass the gate.** Sign in as the viewer, then post the action by
+   hand. It comes back 403, because the check is on the server and hiding the
+   button was only cosmetic:
+
+   ```bash
+   curl -i -X POST 'localhost:5173/people?/rename' -F id=1 -F name=Nope
+   ```
 
 ## Where things are
 
@@ -27,9 +37,29 @@ npm run dev     # http://localhost:5173/people
 | `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/server/auth.ts` | Password hashing (PBKDF2 via Web Crypto), sessions, roles. Swap the arrays for your database. |
+| `src/hooks.server.ts` | Resolves the session once per request and gates routes from one list. |
+| `src/routes/login/+page.server.ts` | Login action. Rejects open redirects; one message for every failure. |
+| `src/routes/logout/+server.ts` | POST-only sign out. Drops the session server-side, not just the cookie. |
 | `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. |
 
+## Auth
+
+The scaffold is the real shape, with the storage stubbed:
+
+- Passwords are hashed with PBKDF2-HMAC-SHA256 through Web Crypto, so the same
+  code runs on Node and on the edge runtimes `adapter-auto` may pick.
+- The session cookie is `httpOnly` (an XSS bug cannot read it) and
+  `SameSite=Lax` (a cross-site POST cannot ride it).
+- Sign out drops the session server-side, so a copied id stops working.
+- Route gating lives in one list in `hooks.server.ts`, so adding a protected
+  route is an entry rather than a check you have to remember.
+
+The users and sessions are in-memory, like `src/lib/people.ts`. Move both to
+your database before this goes anywhere real - in particular, an in-memory
+session map does not survive a restart or a second instance.
+
 ## Themes
 
 Pick a starting theme when you scaffold:

package/templates/sveltekit/src/app.css

@@ -8,7 +8,7 @@
  * `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/tailwind.css';
+@import '@svgrid/grid/themes/ember.css';
 /* svgrid-theme:end */
 
 * { box-sizing: border-box; }

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

@@ -1,10 +1,18 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+import type { User } from '$lib/server/auth'
+
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
+		interface Locals {
+			/** Set by hooks.server.ts on every request; null when signed out. */
+			user: User | null
+		}
+		interface PageData {
+			/** Returned by the root layout load, so every page can read it. */
+			user?: User | null
+		}
 		// interface PageState {}
 		// interface Platform {}
 	}

package/templates/sveltekit/src/hooks.server.ts

@@ -0,0 +1,49 @@
+/**
+ * Server hooks: resolve the session once per request, then gate routes.
+ *
+ * Doing it here rather than in each `+page.server.ts` is what makes the gate
+ * hard to forget - a new protected route is one entry in PROTECTED, not a
+ * check you have to remember to copy into every load function.
+ */
+import { redirect, type Handle } from '@sveltejs/kit'
+import { SESSION_COOKIE, userForSession } from '$lib/server/auth'
+import type { Role } from '$lib/server/auth'
+
+/**
+ * Route prefixes that need a session, and the role they need.
+ *
+ * `null` means any signed-in user. Longest prefix wins, so a specific child
+ * route can require more than its parent.
+ */
+const PROTECTED: { prefix: string; role: Role | null }[] = [
+  { prefix: '/people', role: null },
+  { prefix: '/admin', role: 'admin' },
+]
+
+function requirementFor(pathname: string): Role | null | undefined {
+  const match = PROTECTED.filter((r) => pathname === r.prefix || pathname.startsWith(r.prefix + '/')).sort(
+    (a, b) => b.prefix.length - a.prefix.length,
+  )[0]
+  return match ? match.role : undefined
+}
+
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.user = await userForSession(event.cookies.get(SESSION_COOKIE))
+
+  const required = requirementFor(event.url.pathname)
+  if (required !== undefined) {
+    if (!event.locals.user) {
+      // Carry where they were going, so login can send them back rather than
+      // dumping everyone on the home page.
+      const from = encodeURIComponent(event.url.pathname + event.url.search)
+      redirect(303, `/login?redirectTo=${from}`)
+    }
+    if (required && event.locals.user.role !== required) {
+      // Signed in but not allowed: 403, not a redirect to login. Bouncing an
+      // authenticated user to a login form reads as a broken app.
+      redirect(303, '/people?error=forbidden')
+    }
+  }
+
+  return resolve(event)
+}

package/templates/sveltekit/src/lib/server/auth.ts

@@ -0,0 +1,177 @@
+/**
+ * Auth scaffold: password hashing, sessions, and role lookup.
+ *
+ * Everything here runs on the server only - `$lib/server` is a folder SvelteKit
+ * enforces, so importing this from a component is a build error rather than a
+ * leaked password hash.
+ *
+ * Like `$lib/people.ts`, the stores are module-level and in-memory: they stand
+ * in for your database so the starter runs with no setup. Swap the two arrays
+ * for real queries and nothing else has to change. What is *not* a placeholder
+ * is the hashing and the cookie handling - those are the real patterns, because
+ * getting them wrong is the expensive kind of wrong.
+ *
+ * Built on Web Crypto rather than `node:crypto`, so the same code runs on Node,
+ * Deno, Bun and the edge runtimes `adapter-auto` may select. Nothing here needs
+ * a dependency.
+ */
+
+export type Role = 'admin' | 'viewer'
+export type User = { id: number; email: string; role: Role }
+
+/** A user plus the credential we never hand to the client. */
+type StoredUser = User & { passwordHash: string }
+
+/** Name of the session cookie. */
+export const SESSION_COOKIE = 'sid'
+
+/** How long a session stays valid. Refreshed on each request. */
+const SESSION_TTL_MS = 1000 * 60 * 60 * 24 * 7 // 7 days
+
+/** PBKDF2 rounds. OWASP's floor for PBKDF2-HMAC-SHA256 is 600k; this is the
+ *  knob to raise as hardware gets faster. Stored alongside each hash so old
+ *  hashes keep verifying after you raise it. */
+const PBKDF2_ROUNDS = 600_000
+
+const encoder = new TextEncoder()
+
+function toHex(bytes: Uint8Array): string {
+  return [...bytes].map((b) => b.toString(16).padStart(2, '0')).join('')
+}
+
+function fromHex(hex: string): Uint8Array {
+  const out = new Uint8Array(hex.length / 2)
+  for (let i = 0; i < out.length; i++) out[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16)
+  return out
+}
+
+async function derive(password: string, salt: Uint8Array, rounds: number): Promise<Uint8Array> {
+  const key = await crypto.subtle.importKey('raw', encoder.encode(password), 'PBKDF2', false, ['deriveBits'])
+  const bits = await crypto.subtle.deriveBits(
+    { name: 'PBKDF2', salt: salt as BufferSource, iterations: rounds, hash: 'SHA-256' },
+    key,
+    256,
+  )
+  return new Uint8Array(bits)
+}
+
+/** Format: rounds:salt:hash, so the work factor travels with the hash. */
+async function hashPassword(password: string): Promise<string> {
+  const salt = crypto.getRandomValues(new Uint8Array(16))
+  const hash = await derive(password, salt, PBKDF2_ROUNDS)
+  return `${PBKDF2_ROUNDS}:${toHex(salt)}:${toHex(hash)}`
+}
+
+/** Compare without an early exit, so the time taken does not reveal how many
+ *  leading bytes matched. */
+function constantTimeEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) return false
+  let diff = 0
+  for (let i = 0; i < a.length; i++) diff |= a[i]! ^ b[i]!
+  return diff === 0
+}
+
+async function verifyPassword(password: string, stored: string): Promise<boolean> {
+  const [rounds, salt, hash] = stored.split(':')
+  if (!rounds || !salt || !hash) return false
+  const actual = await derive(password, fromHex(salt), Number(rounds))
+  return constantTimeEqual(actual, fromHex(hash))
+}
+
+// --- users -----------------------------------------------------------------
+
+/**
+ * Seeded lazily: hashing is async, and 600k PBKDF2 rounds twice at import would
+ * stall the first request. `getUsers()` awaits the same promise every time, so
+ * the work happens once.
+ */
+let usersPromise: Promise<StoredUser[]> | null = null
+
+function getUsers(): Promise<StoredUser[]> {
+  usersPromise ??= (async () => [
+    { id: 1, email: 'admin@example.com', role: 'admin' as const, passwordHash: await hashPassword('password') },
+    { id: 2, email: 'viewer@example.com', role: 'viewer' as const, passwordHash: await hashPassword('password') },
+  ])()
+  return usersPromise
+}
+
+/** Hashed once so an unknown email costs the same work as a known one. Without
+ *  it, a fast "no such user" reply enumerates your user list. */
+let dummyHashPromise: Promise<string> | null = null
+function getDummyHash(): Promise<string> {
+  dummyHashPromise ??= hashPassword(crypto.randomUUID())
+  return dummyHashPromise
+}
+
+/** Public shape - never includes the hash. */
+function publicUser(u: StoredUser): User {
+  return { id: u.id, email: u.email, role: u.role }
+}
+
+/**
+ * Check an email/password pair. Returns the user, or null.
+ *
+ * The same null comes back for an unknown email and a wrong password, and a
+ * verify runs either way, so the response neither confirms which emails exist
+ * nor answers faster for one case than the other.
+ */
+export async function verifyCredentials(email: string, password: string): Promise<User | null> {
+  const users = await getUsers()
+  const found = users.find((u) => u.email.toLowerCase() === email.trim().toLowerCase())
+  const ok = await verifyPassword(password, found?.passwordHash ?? (await getDummyHash()))
+  return ok && found ? publicUser(found) : null
+}
+
+// --- sessions --------------------------------------------------------------
+
+type Session = { userId: number; expires: number }
+
+const sessions = new Map<string, Session>()
+
+/** Start a session and return its id, to be set as the cookie value. */
+export function createSession(userId: number): string {
+  // randomUUID is a CSPRNG. A guessable session id is as good as no auth.
+  const id = crypto.randomUUID()
+  sessions.set(id, { userId, expires: Date.now() + SESSION_TTL_MS })
+  return id
+}
+
+/** Resolve a session id to its user, sliding the expiry forward. Returns null
+ *  for an unknown or expired id, and drops the expired entry. */
+export async function userForSession(id: string | undefined): Promise<User | null> {
+  if (!id) return null
+  const session = sessions.get(id)
+  if (!session) return null
+  if (session.expires < Date.now()) {
+    sessions.delete(id)
+    return null
+  }
+  session.expires = Date.now() + SESSION_TTL_MS
+  const users = await getUsers()
+  const user = users.find((u) => u.id === session.userId)
+  return user ? publicUser(user) : null
+}
+
+/** Invalidate a session server-side. Clearing the cookie alone would leave a
+ *  stolen id working until it expired. */
+export function destroySession(id: string | undefined): void {
+  if (id) sessions.delete(id)
+}
+
+/**
+ * Cookie options for the session.
+ *
+ * `httpOnly` keeps the id away from JavaScript, so an XSS bug cannot read it.
+ * `sameSite: 'lax'` blocks the cookie on cross-site POSTs, which is what stops
+ * CSRF against the form actions. `secure` is on outside dev, where there is no
+ * HTTPS to require.
+ */
+export function sessionCookieOptions(secure: boolean) {
+  return {
+    path: '/',
+    httpOnly: true,
+    sameSite: 'lax',
+    secure,
+    maxAge: Math.floor(SESSION_TTL_MS / 1000),
+  } as const
+}

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

@@ -28,7 +28,7 @@ const STORAGE_KEY = 'svgrid-theme'
 // 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 = 'tailwind'
+export const INITIAL_THEME = 'ember'
 export const INITIAL_MODE: ThemeMode = 'light'
 /* svgrid-initial-theme:end */
 

package/templates/sveltekit/src/routes/+layout.server.ts

@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+/**
+ * Publish the signed-in user to every page.
+ *
+ * `locals.user` is server-only; returning it from a layout load is what makes
+ * it available to components as `data.user`. Only the public shape crosses
+ * that boundary - `$lib/server/auth` never puts the password hash on it.
+ */
+export const load: LayoutServerLoad = ({ locals }) => ({ user: locals.user })

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

@@ -2,7 +2,7 @@
   import '../app.css'
   import { theme, presets } from '$lib/theme.svelte'
 
-  let { children } = $props()
+  let { children, data } = $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
@@ -31,6 +31,14 @@
   <button type="button" onclick={() => theme.toggleMode()} aria-pressed={theme.mode === 'dark'}>
     {theme.mode === 'dark' ? 'Dark' : 'Light'}
   </button>
+
+  {#if data?.user}
+    <span class="who">{data.user.email} <em>({data.user.role})</em></span>
+    <!-- A form, not a link: see routes/logout/+page.server.ts for why. -->
+    <form class="out" method="POST" action="/logout"><button type="submit">Sign out</button></form>
+  {:else}
+    <a class="who" href="/login">Sign in</a>
+  {/if}
 </header>
 
 <main>
@@ -68,6 +76,13 @@
     cursor: pointer;
     min-width: 4.5rem;
   }
+  .who {
+    margin-inline-start: auto;
+    font-size: 0.875rem;
+    color: var(--sg-header-fg);
+  }
+  .who em { color: var(--sg-muted, #64748b); font-style: normal; }
+  .out { margin: 0; }
   main {
     padding: 1.25rem;
     font-family: system-ui, sans-serif;

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

@@ -0,0 +1,51 @@
+import { fail, redirect } from '@sveltejs/kit'
+import { dev } from '$app/environment'
+import type { Actions, PageServerLoad } from './$types'
+import {
+  SESSION_COOKIE,
+  createSession,
+  sessionCookieOptions,
+  verifyCredentials,
+} from '$lib/server/auth'
+
+export const load: PageServerLoad = ({ locals, url }) => {
+  // Already signed in? Nothing to do here.
+  if (locals.user) redirect(303, safeRedirect(url.searchParams.get('redirectTo')))
+  return { redirectTo: safeRedirect(url.searchParams.get('redirectTo')) }
+}
+
+/**
+ * Only ever redirect to a path on this site. Echoing an arbitrary `redirectTo`
+ * back into a Location header is an open redirect: an attacker mails a link to
+ * your real login page that lands the user on theirs afterwards.
+ */
+function safeRedirect(target: string | null): string {
+  if (!target) return '/people'
+  // Must start with a single slash - "//evil.test" and "https://evil.test" are
+  // both absolute, and the browser would happily follow them off-site.
+  if (!target.startsWith('/') || target.startsWith('//')) return '/people'
+  return target
+}
+
+export const actions: Actions = {
+  default: async ({ request, cookies, url }) => {
+    const data = await request.formData()
+    const email = String(data.get('email') ?? '')
+    const password = String(data.get('password') ?? '')
+    const redirectTo = safeRedirect(String(data.get('redirectTo') ?? '') || url.searchParams.get('redirectTo'))
+
+    if (!email || !password) {
+      return fail(400, { email, error: 'Enter your email and password.' })
+    }
+
+    const user = await verifyCredentials(email, password)
+    if (!user) {
+      // One message for both "no such user" and "wrong password": a specific
+      // one tells an attacker which emails are registered.
+      return fail(401, { email, error: 'Those credentials did not match.' })
+    }
+
+    cookies.set(SESSION_COOKIE, createSession(user.id), sessionCookieOptions(!dev))
+    redirect(303, redirectTo)
+  },
+}

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { enhance } from '$app/forms'
+  import type { ActionData, PageData } from './$types'
+
+  let { data, form }: { data: PageData; form: ActionData } = $props()
+</script>
+
+<svelte:head><title>Sign in</title></svelte:head>
+
+<main class="login">
+  <h1>Sign in</h1>
+
+  <form method="POST" use:enhance>
+    <input type="hidden" name="redirectTo" value={data.redirectTo} />
+
+    <label for="email">Email</label>
+    <input id="email" name="email" type="email" autocomplete="username" required value={form?.email ?? ''} />
+
+    <label for="password">Password</label>
+    <input id="password" name="password" type="password" autocomplete="current-password" required />
+
+    {#if form?.error}
+      <!-- Announced, so a screen reader hears the failure rather than only
+           seeing the field reset. -->
+      <p class="error" role="alert">{form.error}</p>
+    {/if}
+
+    <button type="submit">Sign in</button>
+  </form>
+
+  <p class="hint">
+    Demo users: <code>admin@example.com</code> (admin) and
+    <code>viewer@example.com</code> (viewer). Password <code>password</code> for both.
+  </p>
+</main>
+
+<style>
+  .login { max-width: 22rem; margin: 4rem auto; padding: 0 1rem; }
+  form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.5rem; }
+  label { font-weight: 600; font-size: 0.875rem; }
+  input {
+    padding: 0.5rem 0.6rem; font: inherit;
+    border: 1px solid var(--sg-border, #cbd5e1); border-radius: var(--sg-radius, 8px);
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+  }
+  input + label { margin-top: 0.75rem; }
+  button {
+    margin-top: 1.25rem; padding: 0.55rem 0.9rem; font: inherit; font-weight: 600;
+    color: #fff; background: var(--sg-accent, #2563eb);
+    border: 0; border-radius: var(--sg-radius, 8px); cursor: pointer;
+  }
+  .error { margin: 0.75rem 0 0; color: var(--sg-danger, #dc2626); font-size: 0.875rem; }
+  .hint { margin-top: 2rem; font-size: 0.8125rem; color: var(--sg-muted, #64748b); line-height: 1.6; }
+  code { font-size: 0.9em; }
+</style>

package/templates/sveltekit/src/routes/logout/+server.ts

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit'
+import { dev } from '$app/environment'
+import type { RequestHandler } from './$types'
+import { SESSION_COOKIE, destroySession, sessionCookieOptions } from '$lib/server/auth'
+
+/**
+ * Sign out.
+ *
+ * An endpoint rather than a form action, because signing out has no page to
+ * render - a `+page.server.ts` with no `+page.svelte` beside it is not a route
+ * SvelteKit will post a form to, and returns 415.
+ *
+ * POST only, deliberately. A GET logout link fires from any prefetcher or
+ * `<img src="/logout">` on a page you do not control. SvelteKit's origin check
+ * covers this POST, and the session cookie is SameSite=Lax, so a cross-site
+ * form cannot drive it either.
+ */
+export const POST: RequestHandler = async ({ cookies }) => {
+  // Drop the session server-side as well as clearing the cookie, so a copy of
+  // the id taken earlier stops working immediately.
+  destroySession(cookies.get(SESSION_COOKIE))
+  cookies.delete(SESSION_COOKIE, sessionCookieOptions(!dev))
+  redirect(303, '/login')
+}

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

@@ -1,14 +1,23 @@
+import { error } from '@sveltejs/kit'
 import type { Actions, PageServerLoad } from './$types'
 import { listPeople, renamePerson, type Person } from '$lib/people'
 
-export const load: PageServerLoad = ({ url }) => {
+// hooks.server.ts already refused this request if nobody is signed in, so the
+// load can assume a user. It still reads `locals.user` rather than trusting a
+// query parameter or a client-sent id.
+export const load: PageServerLoad = ({ url, locals }) => {
   const sortBy = (url.searchParams.get('sort') ?? 'name') as keyof Person
   const desc = url.searchParams.get('dir') === 'desc'
-  return { rows: listPeople(sortBy, desc), sortBy, desc }
+  return { rows: listPeople(sortBy, desc), sortBy, desc, canEdit: locals.user?.role === 'admin' }
 }
 
 export const actions: Actions = {
-  rename: async ({ request }) => {
+  rename: async ({ request, locals }) => {
+    // The check lives on the server. `canEdit` above only hides the UI, and
+    // hiding a button stops nobody from posting the form by hand.
+    if (locals.user?.role !== 'admin') {
+      error(403, 'Only an admin can rename people.')
+    }
     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

@@ -6,11 +6,13 @@
 
   let { data } = $props()
 
-  const columns: GridColumns<Person> = [
-    { field: 'name', header: 'Name', editable: true },
+  // Editing is offered only to an admin. The server enforces it either way
+  // (see the rename action) - this just avoids showing an edit that will fail.
+  const columns: GridColumns<Person> = $derived([
+    { field: 'name', header: 'Name', editable: data.canEdit },
     { 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 }>) {
@@ -27,7 +29,7 @@
 
   // Committed edit -> form action -> database.
   async function onCellValueChange(e: { row: Person; columnId: string; newValue: unknown }) {
-    if (e.columnId !== 'name') return
+    if (e.columnId !== 'name' || !data.canEdit) return
     const body = new FormData()
     body.set('id', String(e.row.id))
     body.set('name', String(e.newValue))
@@ -36,7 +38,10 @@
 </script>
 
 <h1>People</h1>
-<p>Click a header to sort - the order lives in the URL. Double-click a name to edit it.</p>
+<p>
+  Click a header to sort - the order lives in the URL.
+  {#if data.canEdit}Double-click a name to edit it.{:else}Sign in as an admin to edit names.{/if}
+</p>
 
 <SvGrid
   data={data.rows}