@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/samples/library.ts

@@ -0,0 +1,180 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, project, dashScreen, statusPills, detailScreen, pad, ids, type SampleApp } from './shared.js'
+
+const books: EntitySchema = {
+  name: 'books',
+  label: 'Book',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'title', type: 'text', required: true, minLength: 2 },
+    { field: 'author', type: 'text', label: 'Author', required: true, minLength: 2 },
+    { field: 'isbn', type: 'text', label: 'ISBN', input: { editorType: 'mask', mask: '###-#-#####-###-#', help: 'ISBN-13, digits only' } },
+    { field: 'genre', type: 'enum', required: true, defaultValue: 'fiction', options: [
+      { value: 'fiction', label: 'Fiction', color: '#6366f1' },
+      { value: 'science', label: 'Science', color: '#0ea5e9' },
+      { value: 'history', label: 'History', color: '#f59e0b' },
+      { value: 'kids', label: 'Kids', color: '#ec4899' },
+    ] },
+    { field: 'rating', type: 'number', label: 'Rating', min: 0, max: 5, defaultValue: 3, input: { editorType: 'rating', help: 'Reader score 0-5' } },
+    { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Themes / keywords' } },
+    { field: 'spineColor', type: 'text', label: 'Spine color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Shelf label color' } },
+    { field: 'copies', type: 'number', label: 'Copies', min: 0, defaultValue: 1, input: { help: 'Total copies owned' } },
+    { field: 'year', type: 'number', label: 'Year', min: 0 },
+    { field: 'coverUrl', type: 'text', label: 'Cover', format: 'url', input: { placeholder: 'https://…' } },
+  ],
+}
+
+const members: EntitySchema = {
+  name: 'members',
+  label: 'Member',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'email', type: 'text', format: 'email', required: true, input: { help: 'Used for hold notices' } },
+    { field: 'phone', type: 'text', label: 'Phone', input: { editorType: 'phone' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Residence country' } },
+    { field: 'tier', type: 'enum', required: true, defaultValue: 'standard', options: [
+      { value: 'standard', label: 'Standard', color: '#6366f1' },
+      { value: 'student', label: 'Student', color: '#10b981' },
+      { value: 'senior', label: 'Senior', color: '#f59e0b' },
+    ] },
+    { field: 'pin', type: 'text', label: 'Card PIN', minLength: 4, hidden: { grid: true }, input: { editorType: 'password', help: 'Self-checkout PIN' } },
+    { field: 'joinDate', type: 'date', label: 'Joined' },
+    { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+  ],
+}
+
+const loans: EntitySchema = {
+  name: 'loans',
+  label: 'Loan',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'bookId', type: 'relation', label: 'Book', relation: { entity: 'books', foreignKey: 'bookId', labelField: 'title' } },
+    { field: 'memberId', type: 'relation', label: 'Member', relation: { entity: 'members', foreignKey: 'memberId', labelField: 'name' } },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'borrowed', options: [
+      { value: 'borrowed', label: 'Borrowed', color: '#0ea5e9' },
+      { value: 'returned', label: 'Returned', color: '#10b981' },
+      { value: 'overdue', label: 'Overdue', color: '#ef4444' },
+    ] },
+    { field: 'borrowedAt', type: 'date', label: 'Borrowed' },
+    { field: 'dueDate', type: 'date', label: 'Due date' },
+    { field: 'returnedAt', type: 'text', label: 'Returned at', input: { editorType: 'datetime', help: 'Exact check-in time' } },
+    { field: 'daysOverdue', type: 'number', label: 'Days overdue', min: 0, defaultValue: 0, input: { help: 'Days past the due date' } },
+    { field: 'dailyRate', type: 'number', label: 'Daily rate ($)', min: 0, defaultValue: 0.25, input: { help: 'Fine charged per overdue day' } },
+    // Derived: total fine owed = overdue days times the daily rate (display-only).
+    { field: 'fineAmount', type: 'number', label: 'Fine ($)', readonly: true, formula: 'daysOverdue * dailyRate' },
+  ],
+}
+
+const seed = {
+  books: [
+    { id: 'bk1', title: 'The Silent Sea', author: 'Marina Cole', isbn: '978-0-14028-329-5', genre: 'fiction', rating: 4, tags: ['Mystery', 'Ocean'], spineColor: '#6366f1', copies: 4, year: 2019, coverUrl: 'https://covers.example.com/silent-sea.jpg' },
+    { id: 'bk2', title: 'Quantum Frontiers', author: 'Devan Rao', isbn: '978-1-40889-641-3', genre: 'science', rating: 5, tags: ['Physics', 'Space'], spineColor: '#0ea5e9', copies: 3, year: 2021, coverUrl: 'https://covers.example.com/quantum.jpg' },
+    { id: 'bk3', title: 'Empires of Old', author: 'Sofia Marek', isbn: '978-0-33450-403-8', genre: 'history', rating: 3, tags: ['Rome', 'War'], spineColor: '#f59e0b', copies: 2, year: 2015, coverUrl: 'https://covers.example.com/empires.jpg' },
+    { id: 'bk4', title: 'The Curious Fox', author: 'Penny Hart', isbn: '978-1-59327-599-0', genre: 'kids', rating: 5, tags: ['Animals', 'Adventure'], spineColor: '#ec4899', copies: 6, year: 2022, coverUrl: 'https://covers.example.com/fox.jpg' },
+    { id: 'bk5', title: 'Midnight Harbor', author: 'Louis Brenn', isbn: '978-0-74322-620-9', genre: 'fiction', rating: 4, tags: ['Noir', 'Thriller'], spineColor: '#8b5cf6', copies: 5, year: 2018, coverUrl: 'https://covers.example.com/harbor.jpg' },
+    { id: 'bk6', title: 'Atoms and Stars', author: 'Iris Chen', isbn: '978-0-30788-743-6', genre: 'science', rating: 4, tags: ['Astronomy', 'Chemistry'], spineColor: '#14b8a6', copies: 3, year: 2020, coverUrl: 'https://covers.example.com/atoms.jpg' },
+  ],
+  members: [
+    { id: 'mb1', name: 'Eleanor Price', email: 'eleanor.price@example.com', phone: '+1 (415) 555-0111', country: 'United States', tier: 'standard', pin: '4821', joinDate: '2023-02-14', active: true },
+    { id: 'mb2', name: 'Ravi Menon', email: 'ravi.menon@example.com', phone: '+44 20 7946 0112', country: 'United Kingdom', tier: 'student', pin: '9037', joinDate: '2024-09-01', active: true },
+    { id: 'mb3', name: 'Greta Olsen', email: 'greta.olsen@example.com', phone: '+49 30 5550113', country: 'Germany', tier: 'senior', pin: '2264', joinDate: '2021-06-30', active: true },
+    { id: 'mb4', name: 'Tomas Vega', email: 'tomas.vega@example.com', phone: '+34 91 555 0114', country: 'Spain', tier: 'standard', pin: '7715', joinDate: '2022-11-19', active: true },
+    { id: 'mb5', name: 'Aisha Bello', email: 'aisha.bello@example.com', phone: '+234 1 555 0115', country: 'Nigeria', tier: 'student', pin: '3390', joinDate: '2025-01-08', active: true },
+    { id: 'mb6', name: 'Harold Finch', email: 'harold.finch@example.com', phone: '+1 (212) 555-0116', country: 'United States', tier: 'senior', pin: '5582', joinDate: '2020-03-27', active: false },
+  ],
+  loans: [
+    { id: 'ln1', bookId: 'bk1', memberId: 'mb1', status: 'borrowed', borrowedAt: '2026-07-14', dueDate: '2026-07-28', returnedAt: '', daysOverdue: 0, dailyRate: 0.25 },
+    { id: 'ln2', bookId: 'bk2', memberId: 'mb2', status: 'overdue', borrowedAt: '2026-06-21', dueDate: '2026-07-05', returnedAt: '', daysOverdue: 18, dailyRate: 0.25 },
+    { id: 'ln3', bookId: 'bk3', memberId: 'mb3', status: 'returned', borrowedAt: '2026-06-06', dueDate: '2026-06-20', returnedAt: '2026-06-19T15:42:00.000Z', daysOverdue: 0, dailyRate: 0.25 },
+    { id: 'ln4', bookId: 'bk4', memberId: 'mb4', status: 'borrowed', borrowedAt: '2026-07-19', dueDate: '2026-08-02', returnedAt: '', daysOverdue: 0, dailyRate: 0.10 },
+    { id: 'ln5', bookId: 'bk5', memberId: 'mb5', status: 'overdue', borrowedAt: '2026-06-16', dueDate: '2026-06-30', returnedAt: '', daysOverdue: 29, dailyRate: 0.25 },
+    { id: 'ln6', bookId: 'bk1', memberId: 'mb6', status: 'returned', borrowedAt: '2026-06-01', dueDate: '2026-06-15', returnedAt: '2026-06-18T09:05:00.000Z', daysOverdue: 3, dailyRate: 0.25 },
+    { id: 'ln7', bookId: 'bk6', memberId: 'mb2', status: 'borrowed', borrowedAt: '2026-07-27', dueDate: '2026-08-10', returnedAt: '', daysOverdue: 0, dailyRate: 0.25 },
+    { id: 'ln8', bookId: 'bk2', memberId: 'mb3', status: 'overdue', borrowedAt: '2026-06-17', dueDate: '2026-07-01', returnedAt: '', daysOverdue: 24, dailyRate: 0.50 },
+  ],
+}
+
+// Loan grid formatting: status pills, plus numeric thresholds so overdue loans
+// jump out (any overdue day red + bold, a badly overdue loan gets a red wash) -
+// data-driven color, not just status pills.
+const loanFormats: FormatRule[] = [
+  ...statusPills(loans, 'status'),
+  { field: 'daysOverdue', op: 'gt', value: 0, color: '#dc2626', bold: true },
+  { field: 'daysOverdue', op: 'gte', value: 21, background: 'color-mix(in srgb, #ef4444 18%, transparent)' },
+]
+
+// Book grid formatting: genre pills plus rating thresholds (top-rated green +
+// bold, weak titles red).
+const bookFormats: FormatRule[] = [
+  ...statusPills(books, 'genre'),
+  { field: 'rating', op: 'gte', value: 4, color: '#16a34a', bold: true },
+  { field: 'rating', op: 'lt', value: 3, color: '#dc2626' },
+]
+
+export const library: SampleApp = {
+  id: 'library',
+  name: 'Library',
+  description: 'Books, members and loans - circulation + catalog dashboards (an overdue-days KPI sparkline over borrow dates, a rating gauge, status and genre breakdowns, a status x borrow-date pivot, tabbed views), conditional-format status-pill grids with overdue-red rows and row actions, master/detail, and rich edit forms (ISBN mask, star rating, tag chips, phone, country, and a computed fine).',
+  emoji: '📚',
+  accent: '#a855f7',
+  build: () => {
+    const bookRows = pad(books, seed.books, 60)
+    const memberRows = pad(members, seed.members, 40)
+    const loanRows = pad(loans, seed.loans, 90, { bookId: ids(bookRows), memberId: ids(memberRows) })
+    return project({
+      title: 'BookNook',
+      brand: 'BookNook',
+      accent: '#a855f7',
+      preset: 'shadcn',
+      footer: '© BookNook Library',
+      entities: [books, members, loans],
+      seed: { books: bookRows, members: memberRows, loans: loanRows },
+      screens: [
+        // Circulation dashboard: loan KPIs (overdue-days card trends over borrow
+        // dates as a sparkline), an average-overdue gauge, status breakdowns, a
+        // status x borrow-date pivot, a tabbed view, and a status-pill loan grid
+        // where overdue rows go red.
+        dashScreen(loans, { id: 'overview', title: 'Circulation', order: 0 }, [
+          { kpi: 'Active loans', reduce: 'count', span: 1 },
+          { kpi: 'Days overdue', measure: 'daysOverdue', reduce: 'sum', trendField: 'borrowedAt', trendReduce: 'sum', span: 1 },
+          { kpi: 'Avg daily rate', measure: 'dailyRate', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg days overdue', measure: 'daysOverdue', reduce: 'avg', min: 0, max: 30, unit: 'd', span: 1 },
+          { chart: 'status', measure: 'daysOverdue', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { pivot: { rows: ['status'], cols: ['borrowedAt'], measure: 'daysOverdue', aggregate: 'sum' }, span: 3 },
+          { tabs: [
+            { label: 'Overdue by status', tiles: [{ chart: 'status', measure: 'daysOverdue', reduce: 'sum', type: 'bar' }] },
+            { label: 'Loans by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: loanFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Catalog dashboard: book KPIs (avg rating targets 4 stars), a rating gauge
+        // 0-5, copies + count by genre, a copies-by-year area trend, a genre filter,
+        // and a genre-pill book grid with rating thresholds.
+        dashScreen(books, { id: 'catalog', title: 'Catalog', order: 1 }, [
+          { kpi: 'Titles', reduce: 'count', span: 1 },
+          { kpi: 'Copies on shelf', measure: 'copies', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', target: 4, span: 1 },
+          { gauge: 'Avg rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'genre', measure: 'copies', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'genre', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'year', measure: 'copies', reduce: 'sum', type: 'area', span: 3 },
+          { filter: ['genre'], span: 3 },
+          { grid: true, format: bookFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        detailScreen(members, { id: 'member-360', title: 'Member 360', order: 2 }, {
+          titleField: 'name', subtitleField: 'email', statusField: 'tier',
+          related: [{ entity: 'loans', foreignKey: 'memberId', label: 'Loans', titleField: 'bookId', dateField: 'borrowedAt', statusField: 'status' }],
+        }),
+        screen(books, 'master-detail', { id: 'books', title: 'Books', order: 3, child: loans, foreignKey: 'bookId' }),
+        formScreen(loans, { id: 'loans', title: 'Loans', order: 4 }, undefined, { format: loanFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'bookId', 'memberId']),
+        formScreen(members, { id: 'members', title: 'Members', order: 5 }, undefined, { rowLink: { screen: 'member-360', sourceField: 'id', targetField: 'id' } }, ['tier', 'country', 'active']),
+      ],
+    })
+  },
+}

package/src/studio/samples/live-data.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { compile } from 'svelte/compiler'
+import { liveDataSamples, getLiveDataSample } from './live-data.js'
+import { validateProject, parseProject, serializeProject, type EntityDataSource } from '../project.js'
+import { emitStudioProject } from '../emit-project.js'
+
+describe('live-data starters', () => {
+  it('ships a gallery with unique ids and card metadata', () => {
+    expect(liveDataSamples.length).toBeGreaterThanOrEqual(3)
+    const ids = liveDataSamples.map((s) => s.id)
+    expect(new Set(ids).size).toBe(ids.length)
+    for (const s of liveDataSamples) {
+      expect(s.name).toBeTruthy()
+      expect(s.description).toBeTruthy()
+      expect(s.emoji).toBeTruthy()
+      expect(s.accent).toMatch(/^#[0-9a-f]{6}$/i)
+    }
+  })
+
+  it('getLiveDataSample resolves by id', () => {
+    expect(getLiveDataSample('live-northwind-pglite')?.name).toBe('Northwind · Local Postgres')
+    expect(getLiveDataSample('nope')).toBeUndefined()
+  })
+
+  for (const sample of liveDataSamples) {
+    describe(sample.id, () => {
+      const project = sample.build()
+
+      it('is a valid project (no errors)', () => {
+        const errors = validateProject(project).filter((i) => i.level === 'error')
+        expect(errors, JSON.stringify(errors)).toHaveLength(0)
+      })
+
+      it('binds every entity to a REAL source (never memory)', () => {
+        expect(project.entities.length).toBeGreaterThanOrEqual(1)
+        for (const e of project.entities) {
+          const src = project.dataSources?.[e.name] as EntityDataSource | undefined
+          expect(src, `${e.name}: no source`).toBeTruthy()
+          expect(src!.kind).not.toBe('memory')
+        }
+      })
+
+      it('round-trips through parse/serialize', () => {
+        const again = parseProject(serializeProject(project))
+        expect(again.entities.map((e) => e.name)).toEqual(project.entities.map((e) => e.name))
+        expect(again.dataSources).toEqual(project.dataSources)
+      })
+
+      it('generates compiling Svelte pages', () => {
+        const files = emitStudioProject(project)
+        for (const f of files.filter((f) => f.path.endsWith('.svelte'))) {
+          expect(() => compile(f.contents, { filename: f.path, generate: 'client' }), f.path).not.toThrow()
+        }
+      })
+    })
+  }
+
+  it('every starter is a real app: a dashboard, a detail page, and drill-through', () => {
+    for (const s of liveDataSamples) {
+      const blocks = s.build().screens.flatMap((sc) => sc.blocks)
+      expect(blocks.some((b) => b.config.kind === 'kpi'), `${s.id}: no dashboard KPIs`).toBe(true)
+      const all = emitStudioProject(s.build()).map((f) => f.contents).join('\n')
+      expect(all.includes('SvRecordDetail'), `${s.id}: no detail page`).toBe(true)
+      expect(all.includes('import { goto }'), `${s.id}: no drill-through`).toBe(true)
+      expect(all.includes("selectedId={$page.url.searchParams.get('id')"), `${s.id}: detail not URL-addressable`).toBe(true)
+    }
+  })
+
+  it('the Northwind (Supabase) detail timelines match the denormalized view by name/company', () => {
+    const all = emitStudioProject(getLiveDataSample('live-northwind-supabase')!.build()).map((f) => f.contents).join('\n')
+    expect(all).toContain('parentField: "name"')    // product -> order_lines by product name
+    expect(all).toContain('parentField: "company"') // customer -> order_lines by company
+  })
+
+  it('PGlite starter generates embedded Postgres bootstrap + seeded rows', () => {
+    const data = emitStudioProject(getLiveDataSample('live-northwind-pglite')!.build()).find((f) => f.path.endsWith('src/lib/data.ts'))!.contents
+    expect(data).toContain("import { PGlite } from '@electric-sql/pglite'")
+    expect(data).toContain('createSqlDataSource')
+    expect(data).toContain('Chai') // a curated seed row is baked in
+  })
+
+  it('Supabase starter generates a client bound to the hosted sample', () => {
+    const files = emitStudioProject(getLiveDataSample('live-northwind-supabase')!.build())
+    const conn = files.find((f) => f.path.endsWith('src/lib/connections.ts'))!.contents
+    expect(conn).toContain('rbnnlzgtfzsylllniozo.supabase.co')
+    expect(conn).toContain('createClient')
+    const data = files.find((f) => f.path.endsWith('src/lib/data.ts'))!.contents
+    expect(data).toContain('createSupabaseDataSource')
+    expect(data).toContain("table: 'order_lines'")
+  })
+
+  it('REST starter generates createRestDataSource against DummyJSON', () => {
+    const data = emitStudioProject(getLiveDataSample('live-dummyjson-rest')!.build()).find((f) => f.path.endsWith('src/lib/data.ts'))!.contents
+    expect(data).toContain('createRestDataSource')
+    expect(data).toContain('dummyjson.com/products')
+    expect(data).toContain('body?.products') // rowsPath parse
+  })
+})

package/src/studio/samples/live-data.ts

@@ -0,0 +1,308 @@
+/**
+ * "Start from live data" gallery: starter `StudioProject`s wired to a REAL data
+ * source instead of an in-memory seed - so one click gives you an app that talks
+ * to actual Postgres or a live API, then generates a runnable project bound to
+ * the same source.
+ *
+ * These are deliberately separate from `sampleApps` (which are polished,
+ * memory-backed, enterprise-layout showcases). A live-data starter's value is
+ * the *binding*: embedded Postgres (PGlite), a hosted Supabase project, or a
+ * public REST API.
+ *
+ * Pure + node-safe: plain data built from the same ops the designer uses, so
+ * each round-trips through parse/serialize and generates like any project.
+ */
+import type { EntitySchema } from '../../schema.js'
+import { listScreen, dashScreen, detailScreen, type SampleApp } from './shared.js'
+import { sanitizeProject, type EntityDataSource, type Screen, type StudioProject } from '../project.js'
+
+type Row = Record<string, unknown>
+
+// ---- Northwind schemas (shared by the PGlite + Supabase starters) ----------
+
+const products: EntitySchema = {
+  name: 'products',
+  label: 'Product',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'number', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', label: 'Product', required: true, minLength: 2 },
+    { field: 'category_id', type: 'number', label: 'Category #', min: 1, max: 8 },
+    { field: 'unit_price', type: 'number', label: 'Unit Price ($)', min: 0 },
+    { field: 'units_in_stock', type: 'number', label: 'In Stock', min: 0 },
+    { field: 'discontinued', type: 'boolean' },
+  ],
+}
+
+const customers: EntitySchema = {
+  name: 'customers',
+  label: 'Customer',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'number', primaryKey: true, readonly: true },
+    { field: 'company', type: 'text', label: 'Company', required: true, minLength: 2 },
+    { field: 'contact', type: 'text', label: 'Contact' },
+    { field: 'city', type: 'text', label: 'City' },
+    { field: 'country', type: 'text', label: 'Country' },
+  ],
+}
+
+/** The `order_lines` join view (Supabase) - read-only. */
+const orderLines: EntitySchema = {
+  name: 'order_lines',
+  label: 'Order line',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'number', primaryKey: true, readonly: true },
+    { field: 'order_id', type: 'number', label: 'Order #', readonly: true },
+    { field: 'order_date', type: 'dateString', label: 'Date', readonly: true },
+    { field: 'customer', type: 'text', label: 'Customer', readonly: true },
+    { field: 'product', type: 'text', label: 'Product', readonly: true },
+    { field: 'category', type: 'text', label: 'Category', readonly: true },
+    { field: 'quantity', type: 'number', label: 'Qty', readonly: true },
+    { field: 'unit_price', type: 'number', label: 'Unit Price ($)', readonly: true },
+    { field: 'line_total', type: 'number', label: 'Line Total ($)', readonly: true },
+    { field: 'ship_country', type: 'text', label: 'Ship To', readonly: true },
+  ],
+}
+
+// ---- Curated Northwind seed (for the PGlite starter) ------------------------
+
+const PRODUCTS: Row[] = [
+  { id: 1, name: 'Chai', category_id: 1, unit_price: 18, units_in_stock: 39, discontinued: false },
+  { id: 2, name: 'Chang', category_id: 1, unit_price: 19, units_in_stock: 17, discontinued: false },
+  { id: 3, name: 'Aniseed Syrup', category_id: 2, unit_price: 10, units_in_stock: 13, discontinued: false },
+  { id: 4, name: "Chef Anton's Cajun Seasoning", category_id: 2, unit_price: 22, units_in_stock: 53, discontinued: false },
+  { id: 5, name: "Grandma's Boysenberry Spread", category_id: 2, unit_price: 25, units_in_stock: 120, discontinued: false },
+  { id: 6, name: "Uncle Bob's Organic Dried Pears", category_id: 7, unit_price: 30, units_in_stock: 15, discontinued: false },
+  { id: 7, name: 'Northwoods Cranberry Sauce', category_id: 2, unit_price: 40, units_in_stock: 6, discontinued: false },
+  { id: 8, name: 'Mishi Kobe Niku', category_id: 6, unit_price: 97, units_in_stock: 29, discontinued: true },
+  { id: 9, name: 'Ikura', category_id: 8, unit_price: 31, units_in_stock: 31, discontinued: false },
+  { id: 10, name: 'Queso Cabrales', category_id: 4, unit_price: 21, units_in_stock: 22, discontinued: false },
+  { id: 11, name: 'Konbu', category_id: 8, unit_price: 6, units_in_stock: 24, discontinued: false },
+  { id: 12, name: 'Tofu', category_id: 7, unit_price: 23.25, units_in_stock: 35, discontinued: false },
+  { id: 13, name: 'Genen Shouyu', category_id: 2, unit_price: 15.5, units_in_stock: 39, discontinued: false },
+  { id: 14, name: 'Pavlova', category_id: 3, unit_price: 17.45, units_in_stock: 29, discontinued: false },
+  { id: 15, name: 'Alice Mutton', category_id: 6, unit_price: 39, units_in_stock: 0, discontinued: true },
+  { id: 16, name: 'Carnarvon Tigers', category_id: 8, unit_price: 62.5, units_in_stock: 42, discontinued: false },
+]
+
+const CUSTOMERS: Row[] = [
+  { id: 1, company: 'Alfreds Futterkiste', contact: 'Maria Anders', city: 'Berlin', country: 'Germany' },
+  { id: 2, company: 'Ana Trujillo Emparedados', contact: 'Ana Trujillo', city: 'México D.F.', country: 'Mexico' },
+  { id: 3, company: 'Antonio Moreno Taquería', contact: 'Antonio Moreno', city: 'México D.F.', country: 'Mexico' },
+  { id: 4, company: 'Around the Horn', contact: 'Thomas Hardy', city: 'London', country: 'UK' },
+  { id: 5, company: 'Berglunds snabbköp', contact: 'Christina Berglund', city: 'Luleå', country: 'Sweden' },
+  { id: 6, company: 'Blauer See Delikatessen', contact: 'Hanna Moos', city: 'Mannheim', country: 'Germany' },
+  { id: 7, company: 'Bólido Comidas preparadas', contact: 'Martín Sommer', city: 'Madrid', country: 'Spain' },
+  { id: 8, company: "Bon app'", contact: 'Laurence Lebihan', city: 'Marseille', country: 'France' },
+  { id: 9, company: 'Bottom-Dollar Markets', contact: 'Elizabeth Lincoln', city: 'Tsawassen', country: 'Canada' },
+  { id: 10, company: "B's Beverages", contact: 'Victoria Ashworth', city: 'London', country: 'UK' },
+]
+
+// ---- Hosted Supabase sample (see docs/enterprise/studio/supabase-sample.md) --
+// Read-only anon RLS, so the publishable key is safe to embed.
+const SUPABASE_URL = 'https://rbnnlzgtfzsylllniozo.supabase.co'
+const SUPABASE_KEY = 'sb_publishable_SiT7CxGl4Z_Du1opTYbxVA_VQWumPUN'
+
+/** Assemble a starter project from entities + screens + explicit per-entity sources. */
+function assemble(opts: {
+  title: string
+  brand: string
+  accent: string
+  mode?: 'light' | 'dark'
+  preset?: string
+  navStyle?: 'sidebar' | 'top-nav'
+  entities: EntitySchema[]
+  screens: Screen[]
+  sources: Record<string, EntityDataSource>
+  dataSource: StudioProject['dataSource']
+}): StudioProject {
+  return sanitizeProject({
+    title: opts.title,
+    entities: opts.entities,
+    screens: opts.screens,
+    dataSource: opts.dataSource,
+    dataSources: opts.sources,
+    theme: {
+      accent: opts.accent,
+      ...(opts.mode ? { mode: opts.mode } : {}),
+      ...(opts.preset ? { preset: opts.preset } : {}),
+      shell: { style: opts.navStyle ?? 'sidebar', brand: opts.brand, footer: '', navPosition: 'left' },
+    },
+  })
+}
+
+// ---- Starters ---------------------------------------------------------------
+
+/** Northwind on embedded Postgres (PGlite) - real SQL + CRUD, zero backend. */
+const northwindPglite: SampleApp = {
+  id: 'live-northwind-pglite',
+  name: 'Northwind · Local Postgres',
+  description: 'The Northwind sample on a real in-browser Postgres (PGlite). Full CRUD, no server, no keys.',
+  emoji: '🐘',
+  accent: '#2f6f4f',
+  build: () =>
+    assemble({
+      title: 'Northwind (Local Postgres)',
+      brand: 'Northwind',
+      accent: '#2f6f4f',
+      preset: 'material',
+      dataSource: 'pglite',
+      entities: [products, customers],
+      screens: [
+        dashScreen(products, { id: 'overview', title: 'Overview', order: 0 }, [
+          { kpi: 'Products', reduce: 'count', span: 1 },
+          { kpi: 'Avg price', measure: 'unit_price', reduce: 'avg', format: 'currency', span: 1 },
+          { kpi: 'In stock', measure: 'units_in_stock', reduce: 'sum', span: 1 },
+          { kpi: 'Priciest', measure: 'unit_price', reduce: 'max', format: 'currency', span: 1 },
+          { chart: 'category_id', measure: 'unit_price', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'discontinued', reduce: 'count', type: 'pie', span: 1 },
+          { grid: true, rowLink: { screen: 'product-detail', sourceField: 'id', targetField: 'id' }, span: 3 },
+        ]),
+        detailScreen(products, { id: 'product-detail', title: 'Product', order: 1 }, {
+          titleField: 'name', metricFields: ['unit_price', 'units_in_stock'],
+          sections: [{ label: 'Catalog', fields: ['category_id', 'discontinued'] }],
+        }),
+        listScreen(customers, { id: 'customers', title: 'Customers', order: 2 }, { grid: { rowLink: { screen: 'customer-detail', sourceField: 'id', targetField: 'id' } } }),
+        detailScreen(customers, { id: 'customer-detail', title: 'Customer', order: 3 }, {
+          titleField: 'company', subtitleField: 'contact',
+          sections: [{ label: 'Location', fields: ['city', 'country'] }],
+        }),
+      ],
+      sources: {
+        products: { kind: 'pglite', table: 'products', seed: PRODUCTS },
+        customers: { kind: 'pglite', table: 'customers', seed: CUSTOMERS },
+      },
+    }),
+}
+
+/** Northwind on a hosted Supabase project - live PostgREST, incl. the join view. */
+const northwindSupabase: SampleApp = {
+  id: 'live-northwind-supabase',
+  name: 'Northwind · Supabase',
+  description: 'A hosted, read-only Northwind on Supabase. Browse the five-table order_lines join view live over PostgREST.',
+  emoji: '⚡',
+  accent: '#3ecf8e',
+  build: () =>
+    assemble({
+      title: 'Northwind (Supabase)',
+      brand: 'Northwind',
+      accent: '#3ecf8e',
+      mode: 'dark',
+      preset: 'vercel',
+      dataSource: 'supabase',
+      entities: [orderLines, products, customers],
+      screens: [
+        // Sales dashboard over the join view: revenue KPIs + breakdowns by category /
+        // country / product, a faceted filter, and the raw order-lines grid.
+        dashScreen(orderLines, { id: 'sales', title: 'Sales', order: 0 }, [
+          { kpi: 'Line items', reduce: 'count', span: 1 },
+          { kpi: 'Revenue', measure: 'line_total', reduce: 'sum', format: 'currency', span: 1 },
+          { kpi: 'Avg line', measure: 'line_total', reduce: 'avg', format: 'currency', span: 1 },
+          { kpi: 'Units sold', measure: 'quantity', reduce: 'sum', span: 1 },
+          { chart: 'category', measure: 'line_total', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'ship_country', measure: 'line_total', reduce: 'sum', type: 'pie', span: 1 },
+          { chart: 'product', measure: 'line_total', reduce: 'sum', type: 'bar', span: 3 },
+          { filter: ['category', 'ship_country'], span: 3 },
+          { grid: true, span: 3 },
+        ]),
+        listScreen(products, { id: 'products', title: 'Products', order: 1 }, { grid: { rowLink: { screen: 'product-360', sourceField: 'id', targetField: 'id' } } }),
+        // Product 360: unit price / stock tiles + a timeline of the order lines for
+        // this product. The view has no FK ids, so the timeline matches by name.
+        detailScreen(products, { id: 'product-360', title: 'Product', order: 2 }, {
+          titleField: 'name', metricFields: ['unit_price', 'units_in_stock'],
+          sections: [{ label: 'Catalog', fields: ['category_id', 'discontinued'] }],
+          related: [{ entity: 'order_lines', foreignKey: 'product', parentField: 'name', label: 'Orders', titleField: 'customer', subtitleField: 'line_total', dateField: 'order_date' }],
+        }),
+        listScreen(customers, { id: 'customers', title: 'Customers', order: 3 }, { grid: { rowLink: { screen: 'customer-360', sourceField: 'id', targetField: 'id' } } }),
+        // Customer 360: an order-history timeline matched by company name.
+        detailScreen(customers, { id: 'customer-360', title: 'Customer', order: 4 }, {
+          titleField: 'company', subtitleField: 'contact',
+          sections: [{ label: 'Location', fields: ['city', 'country'] }],
+          related: [{ entity: 'order_lines', foreignKey: 'customer', parentField: 'company', label: 'Orders', titleField: 'product', subtitleField: 'line_total', dateField: 'order_date' }],
+        }),
+      ],
+      sources: {
+        order_lines: { kind: 'supabase', table: 'order_lines', url: SUPABASE_URL, key: SUPABASE_KEY },
+        products: { kind: 'supabase', table: 'products', url: SUPABASE_URL, key: SUPABASE_KEY },
+        customers: { kind: 'supabase', table: 'customers', url: SUPABASE_URL, key: SUPABASE_KEY },
+      },
+    }),
+}
+
+/** A live public REST feed (DummyJSON products) - no backend, no keys. */
+const dummyjsonRest: SampleApp = {
+  id: 'live-dummyjson-rest',
+  name: 'Products · Live REST',
+  description: 'A live product feed from the public DummyJSON API over createRestDataSource. No backend, no keys.',
+  emoji: '🛰️',
+  accent: '#6d5efc',
+  build: () => {
+    const restProduct: EntitySchema = {
+      name: 'products',
+      label: 'Product',
+      idField: 'id',
+      fields: [
+        { field: 'id', type: 'number', primaryKey: true, readonly: true },
+        { field: 'title', type: 'text', label: 'Product' },
+        { field: 'brand', type: 'text', label: 'Brand' },
+        { field: 'category', type: 'text', label: 'Category' },
+        { field: 'price', type: 'number', label: 'Price ($)' },
+        { field: 'rating', type: 'number', label: 'Rating' },
+        { field: 'stock', type: 'number', label: 'Stock' },
+      ],
+    }
+    return assemble({
+      title: 'Live Products (REST)',
+      brand: 'Live Feed',
+      accent: '#6d5efc',
+      preset: 'shadcn',
+      dataSource: 'rest',
+      entities: [restProduct],
+      // A page size that covers the whole catalogue: the grid asks for one page,
+      // so it reads the entire live feed in a single request. (DummyJSON pages by
+      // `skip`, not `offset`, so deep server-paging would need a REST adapter -
+      // see docs/enterprise/studio/rest-api.md.)
+      screens: [
+        // Catalog dashboard: price / rating / stock KPIs + category & brand breakdowns
+        // over the live feed, with the grid drilling into a product page.
+        dashScreen(restProduct, { id: 'catalog', title: 'Catalog', order: 0 }, [
+          { kpi: 'Products', reduce: 'count', span: 1 },
+          { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
+          { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', span: 1 },
+          { kpi: 'In stock', measure: 'stock', reduce: 'sum', span: 1 },
+          { chart: 'category', reduce: 'count', type: 'bar', span: 2 },
+          { chart: 'brand', measure: 'price', reduce: 'avg', type: 'bar', span: 1 },
+          { filter: ['category', 'brand'], span: 3 },
+          { grid: true, pageSize: 200, rowLink: { screen: 'product-detail', sourceField: 'id', targetField: 'id' }, span: 3 },
+        ]),
+        detailScreen(restProduct, { id: 'product-detail', title: 'Product', order: 1 }, {
+          titleField: 'title', subtitleField: 'brand', metricFields: ['price', 'rating', 'stock'],
+          sections: [{ label: 'Details', fields: ['category', 'brand'] }],
+        }),
+      ],
+      sources: {
+        // Rows + total read from DummyJSON's { products, total } envelope. `limit=0`
+        // asks DummyJSON for the whole catalogue so the dashboard aggregates it all.
+        products: {
+          kind: 'rest',
+          baseUrl: 'https://dummyjson.com',
+          path: 'products',
+          method: 'GET',
+          params: [{ name: 'limit', location: 'query', type: 'number', value: '0' }],
+          rowsPath: 'products',
+          totalPath: 'total',
+        },
+      },
+    })
+  },
+}
+
+/** Starters wired to a real data source, in gallery order. */
+export const liveDataSamples: SampleApp[] = [northwindPglite, northwindSupabase, dummyjsonRest]
+
+/** Look up a live-data starter by id. */
+export function getLiveDataSample(id: string): SampleApp | undefined {
+  return liveDataSamples.find((s) => s.id === id)
+}