@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/scaffold.ts

@@ -0,0 +1,374 @@
+/**
+ * scaffold - turn an `EntitySchema` into runnable SvelteKit files. The shared
+ * code-emit core: both the AI generator (MCP `scaffold_entity` tool) and the
+ * visual designer's "Generate code" action call this one function, so there is
+ * a single source of truth for what generated code looks like.
+ *
+ * Every generated file wraps its body in `svgrid:managed` markers. A future
+ * regeneration replaces only the managed region, so edits a user makes outside
+ * the markers survive - idempotent generation, the thing that makes a
+ * generator trustworthy enough to keep using.
+ *
+ * Pure string building. No filesystem, no Svelte. The `validate` (Standard
+ * Schema) functions on a field cannot be serialized to a literal, so they are
+ * omitted from the emitted schema with a note to re-add them by hand.
+ */
+import { resolveIdField, type EntityField, type EntitySchema } from '../schema.js'
+import type { SqlDialectName } from './introspect-db.js'
+
+export type GeneratedFile = {
+  path: string
+  contents: string
+  description: string
+}
+
+export type ScaffoldOptions = {
+  /** Route segment for the page, defaults to the schema name. e.g. `'customers'`. */
+  route?: string
+  /** API route the page talks to, defaults to `/api/{route}`. */
+  apiRoute?: string
+  /** `$lib` path for the generated schema module, defaults to `$lib/{route}.schema`. */
+  schemaImport?: string
+  /**
+   * Backend the generated API route uses:
+   *   - `'memory'` (default): `createInMemoryDataSource` - runs immediately, no DB.
+   *   - `'sql'`: `createSqlDataSource` with an `execute(text, params)` stub you fill in.
+   *   - a dialect (`'postgres'` | `'supabase'` | `'mysql'` | `'mssql'` | `'sqlite'`):
+   *     a fully-connected route wired to that driver via `process.env.DATABASE_URL`.
+   */
+  dataSource?: 'memory' | 'sql' | SqlDialectName
+}
+
+/** Per-dialect driver wiring for a connected `+server.ts`. */
+type DriverWiring = { imports: string; setup: string; dialectArg: string; execBody: string }
+const DRIVERS: Record<'postgres' | 'mysql' | 'mssql' | 'sqlite', DriverWiring> = {
+  postgres: {
+    imports: `import pg from 'pg'`,
+    setup: `const pool = new pg.Pool({ connectionString: process.env.DATABASE_URL })`,
+    dialectArg: `\n  dialect: { placeholders: '$', ilike: true },`,
+    execBody: `const result = await pool.query(text, params)\n    return result.rows`,
+  },
+  mysql: {
+    imports: `import mysql from 'mysql2/promise'`,
+    setup: `const pool = mysql.createPool(process.env.DATABASE_URL ?? '')`,
+    dialectArg: ``,
+    execBody: `const [rows] = await pool.query(text, params)\n    return rows as Record<string, unknown>[]`,
+  },
+  mssql: {
+    imports: `import mssql from 'mssql'`,
+    setup: `const poolPromise = mssql.connect(process.env.DATABASE_URL ?? '')`,
+    dialectArg: `\n  dialect: { placeholders: '@' },`,
+    execBody: `const pool = await poolPromise\n    const request = pool.request()\n    params.forEach((p, i) => request.input('p' + (i + 1), p))\n    const result = await request.query(text)\n    return result.recordset as Record<string, unknown>[]`,
+  },
+  sqlite: {
+    imports: `import Database from 'better-sqlite3'`,
+    setup: `const db = new Database(process.env.DATABASE_URL ?? 'data.db')`,
+    dialectArg: ``,
+    execBody: `return db.prepare(text).all(...params) as Record<string, unknown>[]`,
+  },
+}
+
+export const MANAGED_START = '// svgrid:managed:start'
+export const MANAGED_END = '// svgrid:managed:end'
+const MANAGED_NOTE = '// Regenerated by SvGrid Studio. Edits inside these markers are overwritten.'
+
+function pascal(name: string): string {
+  return name
+    .replace(/[_\-\s]+/g, ' ')
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('')
+}
+
+function camel(name: string): string {
+  const p = pascal(name)
+  return p.charAt(0).toLowerCase() + p.slice(1)
+}
+
+function tsType(field: EntityField): string {
+  switch (field.type) {
+    case 'number':
+      return 'number'
+    case 'boolean':
+      return 'boolean'
+    default:
+      return 'string'
+  }
+}
+
+function fieldLiteral(field: EntityField): string {
+  const parts = [`field: ${JSON.stringify(field.field)}`, `type: ${JSON.stringify(field.type)}`]
+  if (field.label) parts.push(`label: ${JSON.stringify(field.label)}`)
+  if (field.primaryKey) parts.push('primaryKey: true')
+  if (field.readonly) parts.push('readonly: true')
+  if (field.required) parts.push('required: true')
+  if (field.hidden) parts.push(`hidden: ${JSON.stringify(field.hidden)}`)
+  if (field.options) parts.push(`options: ${JSON.stringify(field.options)}`)
+  if (field.relation) parts.push(`relation: ${JSON.stringify(field.relation)}`)
+  return `    { ${parts.join(', ')} }`
+}
+
+function schemaLiteral(schema: EntitySchema, constName: string, rowType: string): string {
+  const head = [`  name: ${JSON.stringify(schema.name)}`]
+  if (schema.label) head.push(`  label: ${JSON.stringify(schema.label)}`)
+  if (schema.idField) head.push(`  idField: ${JSON.stringify(schema.idField)}`)
+  const fields = schema.fields.map(fieldLiteral).join(',\n')
+  return `export const ${constName}: EntitySchema<${rowType}> = {\n${head.join(',\n')},\n  fields: [\n${fields}\n  ],\n}`
+}
+
+function managed(body: string): string {
+  return `${MANAGED_START}\n${MANAGED_NOTE}\n${body}\n${MANAGED_END}`
+}
+
+export function scaffold(schema: EntitySchema, options: ScaffoldOptions = {}): { files: GeneratedFile[] } {
+  const route = options.route ?? schema.name
+  const apiRoute = options.apiRoute ?? `/api/${route}`
+  const schemaImport = options.schemaImport ?? `$lib/${route}.schema`
+  const constName = `${camel(schema.name)}Schema`
+  const rowType = `${pascal(schema.name)}Row`
+  const idField = resolveIdField(schema)
+  const label = schema.label ?? schema.name
+
+  const rowFields = schema.fields
+    .map((f) => `  ${f.field}: ${tsType(f)}`)
+    .join('\n')
+
+  // 1. The schema module ($lib).
+  const schemaFile: GeneratedFile = {
+    path: `src/lib/${route}.schema.ts`,
+    description: 'Entity schema + row type. Re-add any Standard Schema `validate` functions here by hand.',
+    contents: `import type { EntitySchema } from '@svgrid/enterprise'
+
+${managed(`export type ${rowType} = {
+${rowFields}
+}
+
+${schemaLiteral(schema, constName, rowType)}`)}
+`,
+  }
+
+  // 2. The API route: SvelteKit +server.ts using the transport handlers.
+  const dataSource = options.dataSource ?? 'memory'
+  const driver = dataSource === 'supabase' ? DRIVERS.postgres : DRIVERS[dataSource as 'postgres']
+  let serverImport: string
+  let serverBody: string
+  let serverDescription: string
+
+  if (driver) {
+    // Fully-connected route: driver + DATABASE_URL, no manual editing needed.
+    serverImport = `${driver.imports}
+import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'`
+    serverBody = `${driver.setup}
+
+const source = createSqlDataSource<${rowType}>({
+  schema: ${constName},
+  table: ${JSON.stringify(schema.name)},${driver.dialectArg}
+  execute: async (text, params) => {
+    ${driver.execBody}
+  },
+})
+
+export const { POST } = createKitHandlers({ schema: ${constName}, source })`
+    serverDescription = `API route connected to your ${dataSource} database via process.env.DATABASE_URL.`
+  } else if (dataSource === 'sql') {
+    serverImport = `import { createKitHandlers, createSqlDataSource } from '@svgrid/enterprise'`
+    serverBody = `// Wire execute() to your SQL client: run \`text\` with \`params\`, return the rows.
+// Works with Drizzle (db.execute), postgres.js, better-sqlite3, mysql2, ...
+const source = createSqlDataSource<${rowType}>({
+  schema: ${constName},
+  table: ${JSON.stringify(schema.name)},
+  dialect: { placeholders: '$', ilike: true },
+  execute: async (text, params) => {
+    throw new Error('TODO: run the query with your database client and return the rows.')
+  },
+})
+
+export const { POST } = createKitHandlers({ schema: ${constName}, source })`
+    serverDescription = 'API route. Fill in execute() with your SQL client (Drizzle / postgres.js / ...).'
+  } else {
+    serverImport = `import { createInMemoryDataSource, createKitHandlers } from '@svgrid/enterprise'`
+    serverBody = `// Starts empty and in-memory so the screen runs immediately. Swap this for
+// a database-backed source (scaffold with dataSource:"sql" or a dialect) when ready.
+const source = createInMemoryDataSource<${rowType}>([], ${constName})
+
+export const { POST } = createKitHandlers({ schema: ${constName}, source })`
+    serverDescription = 'API route using an in-memory source. Scaffold with a dialect for a real database.'
+  }
+
+  const serverFile: GeneratedFile = {
+    path: `src/routes${apiRoute}/+server.ts`,
+    description: serverDescription,
+    contents: `${serverImport}
+import { ${constName}, type ${rowType} } from '${schemaImport}'
+
+${managed(serverBody)}
+`,
+  }
+
+  // Relation (foreign-key) fields become searchable lookups in the edit form.
+  // Each lookup queries the related entity's API route, so scaffold those tables
+  // too (e.g. `npx @svgrid/studio add <relatedTable>`).
+  const relationFields = schema.fields.filter(
+    (f): f is EntityField & { relation: NonNullable<EntityField['relation']> } =>
+      f.type === 'relation' && !!f.relation,
+  )
+  const hasLookups = relationFields.length > 0
+  const lookupDecls = relationFields
+    .map((f) => {
+      const name = `${camel(f.field)}Lookup`
+      const endpoint = JSON.stringify(`/api/${f.relation.entity}`)
+      return `  const ${name} = createRelationLookup<Record<string, unknown>>({
+    source: createKitDataSource({ endpoint: ${endpoint} }),
+    labelField: ${JSON.stringify(f.relation.labelField)},
+  })`
+    })
+    .join('\n')
+  const lookupsMap = `  const lookups = { ${relationFields
+    .map((f) => `${JSON.stringify(f.field)}: ${camel(f.field)}Lookup`)
+    .join(', ')} }`
+  const lookupsSection = hasLookups ? `\n\n${lookupDecls}\n${lookupsMap}` : ''
+
+  // 3. The page: a full data screen - search, server sort + paging,
+  //    multi-select delete (optimistic), create/edit, loading/error/empty.
+  const pageBody = `  const source = createKitDataSource<${rowType}>({ endpoint: '${apiRoute}' })
+  const columns = schemaToColumns(${constName})${lookupsSection}
+
+  let state = $state<ServerState<${rowType}>>({
+    rows: [], total: 0, loading: false, saving: false, error: null,
+    pageIndex: 0, pageSize: 25, pageCount: 1, sortModel: [], filterModel: {},
+  })
+  const controller = createServerDataSource<${rowType}>(source, {
+    pageSize: 25,
+    optimistic: true,
+    getRowId: (r) => String(r.${idField}),
+    onChange: (s) => (state = s),
+  })
+  controller.refresh()
+
+  let selected = $state<${rowType}[]>([])
+  let editing = $state<${rowType} | null | undefined>(undefined) // undefined = closed, null = create
+
+  async function save({ mode, id, values }: { mode: 'create' | 'edit'; id: string | null; values: Partial<${rowType}> }) {
+    if (mode === 'create') {
+      await controller.createRow(values)
+      controller.setPage(state.pageCount - 1) // jump to the new row (appended at the end)
+    } 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 = []
+  }`
+
+  const pageFile: GeneratedFile = {
+    path: `src/routes/${route}/+page.svelte`,
+    description: 'The data screen: sort, filter, search, paging, multi-select delete, and create/edit - wired to the API route.',
+    contents: `<script lang="ts">
+  import { SvGrid, createServerDataSource } from '@svgrid/grid'
+  import {
+    SvGridEditPanel,
+    createKitDataSource,${hasLookups ? '\n    createRelationLookup,' : ''}
+    schemaToColumns,
+    type ServerState,
+  } from '@svgrid/enterprise'
+  import { ${constName}, type ${rowType} } from '${schemaImport}'
+
+${managed(pageBody)}
+</script>
+
+<div class="page">
+  <header class="page__toolbar">
+    <h2 class="page__title">${label}</h2>
+    <div class="page__actions">
+      <button onclick={() => (editing = null)}>New</button>
+      <button disabled={selected.length === 0} onclick={removeSelected}>
+        Delete {selected.length > 0 ? '(' + selected.length + ')' : ''}
+      </button>
+    </div>
+  </header>
+
+  {#if state.error}<p class="page__error" role="alert">{state.error}</p>{/if}
+
+  <SvGrid
+    data={state.rows}
+    {columns}
+    loading={state.loading}
+    loadingOverlay
+    fitColumns
+    enableRowSummaries={false}
+    showRowSelection
+    enableCellSelection
+    sortable
+    externalSort
+    onSortingChange={(s) => controller.setSort(s)}
+    filterable
+    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 }]),
+        ),
+      })}
+    onRowClick={(e) => (editing = e.row)}
+    onRowSelectionChange={(_sel, rows) => (selected = rows)}
+    showPagination
+    externalPagination
+    rowCount={state.total}
+    pageIndex={state.pageIndex}
+    pageSize={state.pageSize}
+    onPaginationChange={({ pageIndex, pageSize }) => {
+      if (pageSize !== state.pageSize) controller.setPageSize(pageSize)
+      else controller.setPage(pageIndex)
+    }}
+    emptyMessage="No ${label} yet"
+    containerHeight={480}
+  />
+
+  {#if editing !== undefined}
+    <SvGridEditPanel schema={${constName}} row={editing} ${hasLookups ? 'lookups={lookups} ' : ''}onSubmit={save} onCancel={() => (editing = undefined)} />
+  {/if}
+</div>
+
+<style>
+  .page { display: flex; flex-direction: column; gap: 12px; }
+  .page__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .page__title { margin: 0; font-size: 18px; font-weight: 600; }
+  .page__actions { display: flex; gap: 8px; }
+  .page__actions button { padding: 7px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
+  .page__error { margin: 0; padding: 8px 12px; color: #b3261e; background: #fdecea; border-radius: 6px; }
+</style>
+`,
+  }
+
+  return { files: [schemaFile, serverFile, pageFile] }
+}
+
+/**
+ * Merge freshly-scaffolded files into existing file contents, replacing only
+ * each file's `svgrid:managed` region and preserving everything a user wrote
+ * outside it. When there's no existing content (or no markers in it), the new
+ * file is used whole. This is what makes regeneration safe.
+ */
+export function mergeManaged(existing: string | null | undefined, generated: string): string {
+  if (!existing) return generated
+
+  const startIdx = existing.indexOf(MANAGED_START)
+  const endIdx = existing.indexOf(MANAGED_END)
+  if (startIdx === -1 || endIdx === -1 || endIdx < startIdx) return generated
+
+  const genStart = generated.indexOf(MANAGED_START)
+  const genEnd = generated.indexOf(MANAGED_END)
+  if (genStart === -1 || genEnd === -1) return generated
+  const newRegion = generated.slice(genStart, genEnd + MANAGED_END.length)
+
+  return (
+    existing.slice(0, startIdx) + newRegion + existing.slice(endIdx + MANAGED_END.length)
+  )
+}

package/src/studio/themes.ts

@@ -0,0 +1,172 @@
+/**
+ * The Studio look-and-feel themes: faithful reproductions of SvGrid's built-in
+ * design-system presets (shadcn/ui, Tailwind, Material 3, Excel, Fluent 2, ...),
+ * the same tokens that ship in `examples/src/themes/*.css` and the website Theme
+ * Builder. Each theme carries an explicit light + dark palette; picking one (and
+ * a light/dark mode) restyles the WHOLE generated app - shell, grids, charts,
+ * KPIs, forms - not just the accent.
+ *
+ * Pure + node-safe (studio subtree): plain data + helpers, so the same tokens
+ * drive the browser preview and the emitted `+layout.svelte` / `app.css`.
+ */
+import type { ProjectTheme } from './project.js'
+
+export type ThemeMode = 'light' | 'dark'
+
+/** The core palette for one mode. Mirrors the Theme Builder's preset shape. */
+export type ThemePalette = {
+  bg: string; fg: string; muted: string; border: string
+  headerBg: string; headerFg: string; accent: string
+  rowAlt: string; rowHover: string; selectionBg: string
+}
+
+export type StudioTheme = {
+  /** Stable id, stored on `ProjectTheme.preset`. */
+  id: string
+  /** Display name shown on the swatch. */
+  name: string
+  /** Control corner rounding (px). */
+  radius: number
+  /** Font stack applied to the app surface. */
+  font: string
+  light: ThemePalette
+  dark: ThemePalette
+}
+
+/** The built-in Studio themes, in gallery order (default first). */
+export const studioThemes: StudioTheme[] = [
+  { id: 'shadcn', name: 'shadcn/ui', radius: 6, font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#ffffff', fg: '#09090b', muted: '#71717a', border: '#e4e4e7', headerBg: '#fafafa', headerFg: '#71717a', accent: '#18181b', rowAlt: '#ffffff', rowHover: '#f4f4f5', selectionBg: '#f4f4f5' },
+    dark: { bg: '#0a0a0a', fg: '#fafafa', muted: '#a1a1aa', border: '#27272a', headerBg: '#18181b', headerFg: '#a1a1aa', accent: '#fafafa', rowAlt: '#0a0a0a', rowHover: '#18181b', selectionBg: '#27272a' } },
+  { id: 'tailwind', name: 'Tailwind', radius: 6, font: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+    light: { bg: '#ffffff', fg: '#0f172a', muted: '#64748b', border: '#e2e8f0', headerBg: '#f8fafc', headerFg: '#0f172a', accent: '#4f46e5', rowAlt: '#ffffff', rowHover: '#f1f5f9', selectionBg: '#e0e7ff' },
+    dark: { bg: '#0f172a', fg: '#f8fafc', muted: '#94a3b8', border: '#334155', headerBg: '#1e293b', headerFg: '#f8fafc', accent: '#818cf8', rowAlt: '#0f172a', rowHover: '#1e293b', selectionBg: '#312e81' } },
+  { id: 'material', name: 'Material 3', radius: 8, font: '"Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif',
+    light: { bg: '#fef7ff', fg: '#1d1b20', muted: '#49454f', border: '#cac4d0', headerBg: '#f3edf7', headerFg: '#1d1b20', accent: '#6750a4', rowAlt: '#fffbfe', rowHover: '#ece6f0', selectionBg: '#e8def8' },
+    dark: { bg: '#141218', fg: '#e6e0e9', muted: '#cac4d0', border: '#49454f', headerBg: '#211f26', headerFg: '#e6e0e9', accent: '#d0bcff', rowAlt: '#141218', rowHover: '#2b2930', selectionBg: '#4a4458' } },
+  { id: 'excel', name: 'Excel', radius: 0, font: '"Aptos", "Segoe UI", Calibri, Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#323130', muted: '#605e5c', border: '#d2d0ce', headerBg: '#f3f2f1', headerFg: '#444444', accent: '#107c41', rowAlt: '#ffffff', rowHover: '#edebe9', selectionBg: 'rgba(16, 124, 65, 0.10)' },
+    dark: { bg: '#1b1a19', fg: '#f3f2f1', muted: '#c8c6c4', border: '#3b3a39', headerBg: '#252423', headerFg: '#c8c6c4', accent: '#58c188', rowAlt: '#1b1a19', rowHover: '#323130', selectionBg: 'rgba(88, 193, 136, 0.16)' } },
+  { id: 'fluent', name: 'Fluent 2', radius: 4, font: '"Segoe UI Variable", "Segoe UI", system-ui, sans-serif',
+    light: { bg: '#ffffff', fg: '#242424', muted: '#616161', border: '#e0e0e0', headerBg: '#f5f5f5', headerFg: '#242424', accent: '#0f6cbd', rowAlt: '#fafafa', rowHover: '#f0f0f0', selectionBg: '#ebebeb' },
+    dark: { bg: '#1f1f1f', fg: '#ffffff', muted: '#d6d6d6', border: '#666666', headerBg: '#141414', headerFg: '#ffffff', accent: '#479ef5', rowAlt: '#1a1a1a', rowHover: '#3d3d3d', selectionBg: '#383838' } },
+  { id: 'carbon', name: 'Carbon', radius: 0, font: '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#161616', muted: '#525252', border: '#e0e0e0', headerBg: '#e0e0e0', headerFg: '#161616', accent: '#0f62fe', rowAlt: '#f4f4f4', rowHover: '#e8e8e8', selectionBg: '#d0e2ff' },
+    dark: { bg: '#161616', fg: '#f4f4f4', muted: '#c6c6c6', border: '#393939', headerBg: '#393939', headerFg: '#f4f4f4', accent: '#78a9ff', rowAlt: '#262626', rowHover: '#333333', selectionBg: '#393939' } },
+  { id: 'sap', name: 'SAP Fiori', radius: 6, font: '"72", "72full", "Arial", sans-serif',
+    light: { bg: '#f5f6f7', fg: '#131e29', muted: '#556b82', border: '#e5e5e5', headerBg: '#ffffff', headerFg: '#131e29', accent: '#0070f2', rowAlt: '#f5f6f7', rowHover: '#eaecee', selectionBg: '#ebf8ff' },
+    dark: { bg: '#12171c', fg: '#f5f6f7', muted: '#8396a8', border: '#2e3742', headerBg: '#1d232a', headerFg: '#f5f6f7', accent: '#4db1ff', rowAlt: '#12171c', rowHover: '#222b35', selectionBg: '#1d2d3e' } },
+  { id: 'salesforce', name: 'Salesforce', radius: 4, font: '"Salesforce Sans", "SF Pro", Helvetica, Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#181818', muted: '#757575', border: '#c9c9c9', headerBg: '#f3f3f3', headerFg: '#181818', accent: '#0176d3', rowAlt: '#ffffff', rowHover: '#f3f3f3', selectionBg: '#ecebea' },
+    dark: { bg: '#181818', fg: '#ffffff', muted: '#c9c9c9', border: '#3e3e3c', headerBg: '#2e2e2e', headerFg: '#ffffff', accent: '#1b96ff', rowAlt: '#181818', rowHover: '#2e2e2e', selectionBg: '#1e4d8e' } },
+  { id: 'atlassian', name: 'Atlassian', radius: 3, font: '"Charlie Display", "Atlassian Sans", -apple-system, "Segoe UI", sans-serif',
+    light: { bg: '#ffffff', fg: '#172b4d', muted: '#44546f', border: '#dcdfe4', headerBg: '#fafbfc', headerFg: '#44546f', accent: '#0c66e4', rowAlt: '#ffffff', rowHover: '#f1f2f4', selectionBg: '#e9f2ff' },
+    dark: { bg: '#1d2125', fg: '#b6c2cf', muted: '#8590a2', border: '#38414a', headerBg: '#22272b', headerFg: '#8590a2', accent: '#579dff', rowAlt: '#1d2125', rowHover: '#2c333a', selectionBg: '#09326c' } },
+  { id: 'github', name: 'GitHub', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#1f2328', muted: '#59636e', border: '#d1d9e0', headerBg: '#f6f8fa', headerFg: '#59636e', accent: '#0969da', rowAlt: '#ffffff', rowHover: '#f6f8fa', selectionBg: '#ddf4ff' },
+    dark: { bg: '#0d1117', fg: '#f0f6fc', muted: '#9198a1', border: '#3d444d', headerBg: '#151b23', headerFg: '#9198a1', accent: '#4493f8', rowAlt: '#0d1117', rowHover: '#151b23', selectionBg: 'rgba(56, 139, 253, 0.10)' } },
+  { id: 'antd', name: 'Ant Design', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif',
+    light: { bg: '#ffffff', fg: 'rgba(0, 0, 0, 0.88)', muted: 'rgba(0, 0, 0, 0.65)', border: '#d9d9d9', headerBg: '#fafafa', headerFg: 'rgba(0, 0, 0, 0.88)', accent: '#1677ff', rowAlt: '#ffffff', rowHover: '#f5f5f5', selectionBg: '#e6f4ff' },
+    dark: { bg: '#141414', fg: 'rgba(255, 255, 255, 0.85)', muted: 'rgba(255, 255, 255, 0.65)', border: '#424242', headerBg: '#1f1f1f', headerFg: 'rgba(255, 255, 255, 0.85)', accent: '#177ddc', rowAlt: '#141414', rowHover: '#262626', selectionBg: '#111a2c' } },
+  { id: 'ag-alpine', name: 'Alpine', radius: 3, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#ffffff', fg: '#181d1f', muted: 'rgba(24, 29, 31, 0.5)', border: '#babfc7', headerBg: '#f8f8f8', headerFg: '#181d1f', accent: '#2196f3', rowAlt: '#fcfcfc', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' },
+    dark: { bg: '#181d1f', fg: '#ffffff', muted: 'rgba(255, 255, 255, 0.5)', border: '#68686e', headerBg: '#222628', headerFg: '#ffffff', accent: '#2196f3', rowAlt: '#222628', rowHover: 'rgba(33, 150, 243, 0.1)', selectionBg: 'rgba(33, 150, 243, 0.3)' } },
+  { id: 'bootstrap', name: 'Bootstrap 5', radius: 6, font: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#212529', muted: '#6c757d', border: '#dee2e6', headerBg: '#f8f9fa', headerFg: '#212529', accent: '#0d6efd', rowAlt: '#fcfcfd', rowHover: '#f2f2f2', selectionBg: '#cfe2ff' },
+    dark: { bg: '#212529', fg: '#dee2e6', muted: '#adb5bd', border: '#495057', headerBg: '#2b3035', headerFg: '#dee2e6', accent: '#0d6efd', rowAlt: '#25292e', rowHover: '#2c3034', selectionBg: '#031633' } },
+  { id: 'vercel', name: 'Vercel', radius: 6, font: '"Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#ffffff', fg: '#000000', muted: '#666666', border: '#eaeaea', headerBg: '#fafafa', headerFg: '#666666', accent: '#0070f3', rowAlt: '#fafafa', rowHover: '#f5f5f5', selectionBg: '#e8f0fe' },
+    dark: { bg: '#000000', fg: '#ffffff', muted: '#888888', border: '#333333', headerBg: '#111111', headerFg: '#888888', accent: '#3291ff', rowAlt: '#0a0a0a', rowHover: '#1a1a1a', selectionBg: '#0d2847' } },
+  { id: 'linear', name: 'Linear', radius: 6, font: '"Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    light: { bg: '#ffffff', fg: '#282a30', muted: '#6b6f76', border: '#e9e9eb', headerBg: '#f7f8f8', headerFg: '#6b6f76', accent: '#5e6ad2', rowAlt: '#fbfbfc', rowHover: '#f4f4f5', selectionBg: '#e8eafd' },
+    dark: { bg: '#08090a', fg: '#f7f8f8', muted: '#8a8f98', border: '#23252a', headerBg: '#0f1011', headerFg: '#8a8f98', accent: '#5e6ad2', rowAlt: '#0f1011', rowHover: '#1a1b1e', selectionBg: '#2a2d4a' } },
+  { id: 'notion', name: 'Notion', radius: 4, font: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+    light: { bg: '#ffffff', fg: '#37352f', muted: '#787774', border: '#e9e9e7', headerBg: '#f7f6f3', headerFg: '#787774', accent: '#2383e2', rowAlt: '#fbfbfa', rowHover: '#f1f1ef', selectionBg: '#d9eaf7' },
+    dark: { bg: '#191919', fg: '#d4d4d4', muted: '#9b9b9b', border: '#2f2f2f', headerBg: '#202020', headerFg: '#9b9b9b', accent: '#529cca', rowAlt: '#1c1c1c', rowHover: '#252525', selectionBg: '#20415c' } },
+  { id: 'nord', name: 'Nord', radius: 4, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5e81ac', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
+    dark: { bg: '#2e3440', fg: '#d8dee9', muted: '#4c566a', border: '#434c5e', headerBg: '#3b4252', headerFg: '#e5e9f0', accent: '#88c0d0', rowAlt: '#333b48', rowHover: '#3b4252', selectionBg: '#434c5e' } },
+  { id: 'dracula', name: 'Dracula', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#fffbeb', fg: '#1f1f1f', muted: '#6c664b', border: '#dedccf', headerBg: '#ece9df', headerFg: '#1f1f1f', accent: '#644ac9', rowAlt: '#fffdf5', rowHover: '#f2efe3', selectionBg: '#cfcfde' },
+    dark: { bg: '#282a36', fg: '#f8f8f2', muted: '#6272a4', border: '#44475a', headerBg: '#21222c', headerFg: '#f8f8f2', accent: '#bd93f9', rowAlt: '#2d2f3b', rowHover: '#343746', selectionBg: '#44475a' } },
+  { id: 'catppuccin', name: 'Catppuccin', radius: 8, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    light: { bg: '#eff1f5', fg: '#4c4f69', muted: '#6c6f85', border: '#ccd0da', headerBg: '#e6e9ef', headerFg: '#4c4f69', accent: '#8839ef', rowAlt: '#e6e9ef', rowHover: '#dce0e8', selectionBg: '#dce0e8' },
+    dark: { bg: '#1e1e2e', fg: '#cdd6f4', muted: '#a6adc8', border: '#313244', headerBg: '#181825', headerFg: '#cdd6f4', accent: '#cba6f7', rowAlt: '#1a1a28', rowHover: '#313244', selectionBg: '#45475a' } },
+]
+
+/** The default theme (used when a project has no `preset`). */
+export const defaultStudioTheme: StudioTheme = studioThemes.find((t) => t.id === 'tailwind') ?? studioThemes[0]!
+
+/** Look up a theme by id. */
+export const getStudioTheme = (id?: string): StudioTheme | undefined =>
+  id ? studioThemes.find((t) => t.id === id) : undefined
+
+/** A readable (near-black / white) foreground for text placed on the accent. */
+function onAccent(accent: string): string {
+  const m = /^#?([0-9a-f]{6})$/i.exec(accent.trim())
+  if (!m) return '#ffffff'
+  const n = parseInt(m[1]!, 16)
+  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255
+  // Perceived luminance (sRGB, quick approximation).
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return lum > 0.6 ? '#18181b' : '#ffffff'
+}
+
+/** Resolve the effective `--sg-*` tokens for a project theme: the chosen preset
+ *  (default if none) in the chosen mode, with the accent override applied. */
+export function resolveThemeTokens(theme?: ProjectTheme): Record<string, string> {
+  const preset = getStudioTheme(theme?.preset) ?? defaultStudioTheme
+  const mode: ThemeMode = theme?.mode === 'dark' ? 'dark' : 'light'
+  const p = preset[mode]
+  const accent = theme?.accent || p.accent
+  return {
+    '--sg-bg': p.bg,
+    '--sg-fg': p.fg,
+    '--sg-muted': p.muted,
+    '--sg-border': p.border,
+    '--sg-header-bg': p.headerBg,
+    '--sg-header-fg': p.headerFg,
+    // A subtle inset surface (used by e.g. the master-detail region behind the
+    // nested grid). Themed so it isn't a fixed light grey on dark presets.
+    '--sg-bg-subtle': p.headerBg,
+    '--sg-row-alt-bg': p.rowAlt,
+    '--sg-row-hover-bg': p.rowHover,
+    '--sg-selection-bg': p.selectionBg,
+    // Inputs/checkboxes: pin to the theme's own surface so they never borrow the
+    // host page's input tokens (which is how a themed grid ended up with dark
+    // checkboxes on a light page when the host mode differed).
+    '--sg-input-bg': p.bg,
+    '--sg-input-border': p.border,
+    '--sg-accent': accent,
+    '--sg-on-accent': onAccent(accent),
+    '--sg-radius': `${preset.radius}px`,
+    '--sg-font': preset.font,
+    // The grid's custom scrollbar is a shadow-DOM web component that reads its
+    // OWN --sg-scrollbar-* tokens (with fixed light-mode fallbacks). Without
+    // these it ignores the theme entirely - a light scrollbar left on a dark
+    // grid. CSS custom properties pierce shadow DOM, so defining them here (on
+    // the themed container) reaches the scrollbar. Derive them from the palette
+    // so the scrollbar tracks the preset + light/dark mode like everything else.
+    '--sg-scrollbar-bg': p.headerBg,
+    '--sg-scrollbar-border': p.border,
+    '--sg-scrollbar-thumb': p.muted,
+    '--sg-scrollbar-thumb-hover': p.fg,
+    '--sg-scrollbar-thumb-active': p.fg,
+    '--sg-scrollbar-arrow': p.muted,
+    '--sg-scrollbar-arrow-hover': p.fg,
+    '--sg-scrollbar-arrow-hover-bg': p.rowHover,
+    '--sg-scrollbar-arrow-active': p.fg,
+    '--sg-scrollbar-arrow-active-bg': p.selectionBg,
+    '--sg-scrollbar-arrow-disabled': p.border,
+  }
+}
+
+/** True when the project's theme is rendering in dark mode. */
+export const isDarkTheme = (theme?: ProjectTheme): boolean => theme?.mode === 'dark'
+
+/** An inline `style` string (`--sg-x: y; ...; color-scheme; font-family`) for previews. */
+export function themeStyleString(theme?: ProjectTheme): string {
+  const tokens = resolveThemeTokens(theme)
+  const vars = Object.entries(tokens).map(([k, v]) => `${k}: ${v}`).join('; ')
+  return `${vars}; color-scheme: ${isDarkTheme(theme) ? 'dark' : 'light'}; font-family: ${tokens['--sg-font']}`
+}

package/src/studio/verify.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import type { EntitySchema } from '../schema'
+import { scaffold } from './scaffold'
+import { summarizeVerify, verifyScaffold } from './verify'
+
+const schema: EntitySchema = {
+  name: 'customers',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true },
+    { field: 'name', type: 'text' },
+  ],
+}
+
+describe('verifyScaffold', () => {
+  it('reports ok when the scaffolded Svelte page compiles', async () => {
+    const { files } = scaffold(schema)
+    const res = await verifyScaffold(files)
+    expect(res.ok).toBe(true)
+    expect(res.checked).toBeGreaterThan(0) // the .svelte page was compiled for real
+    expect(res.issues.filter((i) => i.severity === 'error')).toHaveLength(0)
+  })
+
+  it('flags a malformed Svelte file with an error', async () => {
+    const res = await verifyScaffold([
+      { path: 'Bad.svelte', description: '', contents: '{#if true}<p>oops' },
+    ])
+    expect(res.ok).toBe(false)
+    expect(res.issues.some((i) => i.severity === 'error')).toBe(true)
+  })
+
+  it('skips non-svelte files (they need the project tsc)', async () => {
+    const res = await verifyScaffold([{ path: 'x.ts', description: '', contents: 'export const a = 1' }])
+    expect(res.skipped).toBe(1)
+    expect(res.checked).toBe(0)
+  })
+})
+
+describe('summarizeVerify', () => {
+  it('summarizes ok, failure, and skipped', () => {
+    expect(summarizeVerify({ ok: true, issues: [], checked: 2, skipped: 1 })).toMatch(/verified: 2/)
+    expect(
+      summarizeVerify({ ok: false, checked: 1, skipped: 0, issues: [{ path: 'p.svelte', severity: 'error', message: 'boom' }] }),
+    ).toMatch(/VERIFICATION FAILED/)
+    expect(summarizeVerify({ ok: true, issues: [], checked: 0, skipped: 2 })).toMatch(/skipped/)
+  })
+})