@svgrid/enterprise 2.5.3 → 2.6.0

package/dist/studio/samples/library.d.ts

@@ -0,0 +1,2 @@
+import { type SampleApp } from './shared.js';
+export declare const library: SampleApp;

package/dist/studio/samples/library.js

@@ -0,0 +1,171 @@
+import { screen, formScreen, project, dashScreen, statusPills, detailScreen, pad, ids } from './shared.js';
+const books = {
+    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 = {
+    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 = {
+    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 = [
+    ...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 = [
+    ...statusPills(books, 'genre'),
+    { field: 'rating', op: 'gte', value: 4, color: '#16a34a', bold: true },
+    { field: 'rating', op: 'lt', value: 3, color: '#dc2626' },
+];
+export const library = {
+    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/dist/studio/samples/live-data.d.ts

@@ -0,0 +1,5 @@
+import { type SampleApp } from './shared.js';
+/** Starters wired to a real data source, in gallery order. */
+export declare const liveDataSamples: SampleApp[];
+/** Look up a live-data starter by id. */
+export declare function getLiveDataSample(id: string): SampleApp | undefined;

package/dist/studio/samples/live-data.js

@@ -0,0 +1,261 @@
+import { listScreen, dashScreen, detailScreen } from './shared.js';
+import { sanitizeProject } from '../project.js';
+// ---- Northwind schemas (shared by the PGlite + Supabase starters) ----------
+const products = {
+    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 = {
+    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 = {
+    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 = [
+    { 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 = [
+    { 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) {
+    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 = {
+    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 = {
+    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 = {
+    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 = {
+            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],
+            // The DummyJSON REST adapter gives the grid REAL server-side paging + sort
+            // (skip/limit/sortBy), and the dashboard aggregates fetch the catalogue in one
+            // large page. No pageSize hack, no manual row/total mapping.
+            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, 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: {
+                // The dummyjson adapter maps skip/limit/sortBy + unwraps the { products, total }
+                // envelope, so the grid pages + sorts against the live feed for real.
+                products: {
+                    kind: 'rest',
+                    baseUrl: 'https://dummyjson.com',
+                    path: 'products',
+                    method: 'GET',
+                    params: [],
+                    adapter: { kind: 'dummyjson', rowsKey: 'products' },
+                },
+            },
+        });
+    },
+};
+/** Starters wired to a real data source, in gallery order. */
+export const liveDataSamples = [northwindPglite, northwindSupabase, dummyjsonRest];
+/** Look up a live-data starter by id. */
+export function getLiveDataSample(id) {
+    return liveDataSamples.find((s) => s.id === id);
+}

package/dist/studio/samples/projects.d.ts

@@ -0,0 +1,2 @@
+import { type SampleApp } from './shared.js';
+export declare const projectTracker: SampleApp;