@svgrid/enterprise 2.5.2 → 2.6.0

package/dist/studio/samples/crm.js

@@ -0,0 +1,280 @@
+import { screen, formScreen, boardScreen, schedulerScreen, workspaceScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIs } from './shared.js';
+// Salesforce Lightning-style chrome: a gradient blue brand rail, white rounded-pill
+// nav with a solid-white active state, and a Lightning-blue rule under the toolbar.
+const LIGHTNING_CSS = `.sv-app.theme-lightning .sv-app__side { background: linear-gradient(180deg, #032d60, #0176d3); border-right: 0; }
+.sv-app.theme-lightning .sv-app__brandtext { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
+.sv-app.theme-lightning .sv-app__link { color: #d9edff; font-weight: 600; border-radius: 9999px; padding: 8px 14px; }
+.sv-app.theme-lightning .sv-app__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
+.sv-app.theme-lightning .sv-app__link.is-active { background: #fff; color: #032d60; }
+.sv-app.theme-lightning .sv-app__collapse, .sv-app.theme-lightning .sv-app__foot { color: rgba(255, 255, 255, 0.72); }
+.sv-app.theme-lightning .sv-app__toolbar { border-bottom: 2px solid #0176d3; }`;
+// A fixed sales-rep pool, shared by deals + activities so leaderboards, pivots
+// and owner pills stay clean (padded rows cycle these instead of random names).
+const OWNERS = [
+    { value: 'Sam Rivera', label: 'Sam Rivera', color: '#6366f1' },
+    { value: 'Jamie Chen', label: 'Jamie Chen', color: '#10b981' },
+    { value: 'Priya Patel', label: 'Priya Patel', color: '#f59e0b' },
+    { value: 'Dana Lee', label: 'Dana Lee', color: '#ec4899' },
+];
+const companies = {
+    name: 'companies',
+    label: 'Company',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'industry', type: 'enum', required: true, options: [
+                { value: 'saas', label: 'SaaS', color: '#6366f1' },
+                { value: 'fintech', label: 'Fintech', color: '#10b981' },
+                { value: 'retail', label: 'Retail', color: '#f59e0b' },
+                { value: 'health', label: 'Health', color: '#ef4444' },
+            ] },
+        { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Headquarters country' } },
+        { field: 'website', type: 'text', format: 'url', input: { placeholder: 'https://…' } },
+        { field: 'employees', type: 'number', label: 'Employees', min: 0 },
+        { field: 'health', type: 'number', label: 'Account health', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 relationship score' } },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const contacts = {
+    name: 'contacts',
+    label: 'Contact',
+    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 },
+        { field: 'phone', type: 'text', input: { editorType: 'phone' } },
+        { field: 'title', type: 'text', label: 'Job title' },
+        { field: 'companyId', type: 'relation', label: 'Company', relation: { entity: 'companies', foreignKey: 'companyId', labelField: 'name' } },
+        { field: 'tags', type: 'text', label: 'Segments', input: { editorType: 'chips', help: 'Interests / segments' } },
+        { field: 'active', type: 'boolean', defaultValue: true },
+    ],
+};
+const deals = {
+    name: 'deals',
+    label: 'Deal',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'title', type: 'text', required: true, minLength: 2 },
+        { field: 'companyId', type: 'relation', label: 'Company', relation: { entity: 'companies', foreignKey: 'companyId', labelField: 'name' } },
+        { field: 'stage', type: 'enum', required: true, options: [
+                { value: 'lead', label: 'Lead', color: '#94a3b8' },
+                { value: 'qualified', label: 'Qualified', color: '#6366f1' },
+                { value: 'proposal', label: 'Proposal', color: '#f59e0b' },
+                { value: 'won', label: 'Won', color: '#10b981' },
+                { value: 'lost', label: 'Lost', color: '#ef4444' },
+            ] },
+        { field: 'value', type: 'number', label: 'Value ($)', min: 0 },
+        { field: 'probability', type: 'number', label: 'Probability (%)', min: 0, max: 100, defaultValue: 50, input: { editorType: 'slider', help: 'Win likelihood' } },
+        // Derived: expected value weighted by win probability (display-only).
+        { field: 'weighted', type: 'number', label: 'Weighted ($)', readonly: true, formula: 'value * probability / 100' },
+        { field: 'owner', type: 'enum', label: 'Owner', options: OWNERS },
+        { field: 'closeDate', type: 'date', label: 'Close date' },
+        // Only asked for once a deal is actually lost, and then it is mandatory - the
+        // form never shows a question it does not need an answer to.
+        { field: 'lostReason', type: 'enum', label: 'Lost to', hidden: { grid: true }, options: [
+                { value: 'price', label: 'Price' },
+                { value: 'competitor', label: 'Competitor' },
+                { value: 'timing', label: 'Timing' },
+                { value: 'no-budget', label: 'No budget' },
+                { value: 'other', label: 'Other' },
+            ], when: { visible: whenIs('stage', 'lost'), required: whenIs('stage', 'lost') } },
+    ],
+};
+const activities = {
+    name: 'activities',
+    label: 'Activity',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'subject', type: 'text', required: true, minLength: 3 },
+        { field: 'type', type: 'enum', required: true, options: [
+                { value: 'call', label: 'Call', color: '#6366f1' },
+                { value: 'email', label: 'Email', color: '#10b981' },
+                { value: 'meeting', label: 'Meeting', color: '#f59e0b' },
+                { value: 'task', label: 'Task', color: '#8b5cf6' },
+            ] },
+        { field: 'dealId', type: 'relation', label: 'Deal', relation: { entity: 'deals', foreignKey: 'dealId', labelField: 'title' } },
+        { field: 'owner', type: 'enum', label: 'Owner', options: OWNERS },
+        { field: 'priority', type: 'enum', defaultValue: 'medium', options: [
+                { value: 'low', label: 'Low', color: '#94a3b8' },
+                { value: 'medium', label: 'Medium', color: '#6366f1' },
+                { value: 'high', label: 'High', color: '#ef4444' },
+            ] },
+        { field: 'dueDate', type: 'date', label: 'Due date' },
+        { field: 'durationMins', type: 'number', label: 'Duration (min)', min: 0 },
+        { field: 'completed', type: 'boolean', label: 'Done', defaultValue: false },
+        { field: 'notes', type: 'text', label: 'Notes' },
+    ],
+};
+// Deal grid formatting: stage + owner pills, plus numeric thresholds (weak deals
+// red, strong deals green + bold, big-ticket values bold) - data-driven color, not
+// just status pills.
+const dealFormats = [
+    ...statusPills(deals, 'stage'),
+    ...statusPills(deals, 'owner'),
+    { field: 'probability', op: 'lt', value: 30, color: '#dc2626' },
+    { field: 'probability', op: 'gte', value: 70, color: '#16a34a', bold: true },
+    { field: 'value', op: 'gte', value: 100000, bold: true },
+];
+const seed = {
+    companies: [
+        { id: 'co1', name: 'Globex', industry: 'saas', country: 'United States', website: 'https://globex.com', employees: 320, health: 4, active: true },
+        { id: 'co2', name: 'Initech', industry: 'fintech', country: 'United Kingdom', website: 'https://initech.co', employees: 140, health: 3, active: true },
+        { id: 'co3', name: 'Umbrella', industry: 'health', country: 'Germany', website: 'https://umbrella.de', employees: 900, health: 5, active: true },
+        { id: 'co4', name: 'Hooli', industry: 'saas', country: 'United States', website: 'https://hooli.com', employees: 2100, health: 2, active: false },
+        { id: 'co5', name: 'Soylent', industry: 'retail', country: 'Canada', website: 'https://soylent.ca', employees: 75, health: 3, active: true },
+        { id: 'co6', name: 'Stark Industries', industry: 'fintech', country: 'United States', website: 'https://stark.com', employees: 5400, health: 5, active: true },
+    ],
+    contacts: [
+        { id: 'ct1', name: 'Ada Lovelace', email: 'ada@globex.com', phone: '+1 (415) 555-0101', title: 'CTO', companyId: 'co1', tags: ['Champion', 'Technical'], active: true },
+        { id: 'ct2', name: 'Alan Turing', email: 'alan@initech.co', phone: '+44 20 7946 0102', title: 'Head of Data', companyId: 'co2', tags: ['Economic buyer'], active: true },
+        { id: 'ct3', name: 'Grace Hopper', email: 'grace@umbrella.de', phone: '+49 30 5550103', title: 'VP Engineering', companyId: 'co3', tags: ['Champion'], active: true },
+        { id: 'ct4', name: 'Linus Torvalds', email: 'linus@hooli.com', phone: '+1 (650) 555-0104', title: 'Architect', companyId: 'co4', tags: ['Technical', 'Blocker'], active: false },
+        { id: 'ct5', name: 'Barbara Liskov', email: 'barbara@soylent.ca', phone: '+1 (416) 555-0105', title: 'Founder', companyId: 'co5', tags: ['Decision maker'], active: true },
+        { id: 'ct6', name: 'Katherine Johnson', email: 'kj@stark.com', phone: '+1 (212) 555-0106', title: 'Analyst', companyId: 'co6', tags: ['Influencer'], active: true },
+        { id: 'ct7', name: 'Donald Knuth', email: 'don@globex.com', phone: '+1 (415) 555-0107', title: 'Advisor', companyId: 'co1', tags: ['Influencer', 'Technical'], active: true },
+        { id: 'ct8', name: 'Margaret Hamilton', email: 'mh@stark.com', phone: '+1 (212) 555-0108', title: 'Director', companyId: 'co6', tags: ['Decision maker'], active: true },
+    ],
+    deals: [
+        { id: 'dl1', title: 'Globex platform rollout', companyId: 'co1', stage: 'proposal', value: 48000, probability: 60, owner: 'Sam Rivera', closeDate: '2026-08-15' },
+        { id: 'dl2', title: 'Initech data pipeline', companyId: 'co2', stage: 'won', value: 26000, probability: 100, owner: 'Jamie Chen', closeDate: '2026-06-30' },
+        { id: 'dl3', title: 'Umbrella compliance suite', companyId: 'co3', stage: 'qualified', value: 91000, probability: 40, owner: 'Sam Rivera', closeDate: '2026-09-20' },
+        { id: 'dl4', title: 'Hooli migration', companyId: 'co4', stage: 'lost', value: 15000, probability: 0, owner: 'Priya Patel', closeDate: '2026-05-10', lostReason: 'competitor' },
+        { id: 'dl5', title: 'Soylent storefront', companyId: 'co5', stage: 'lead', value: 8000, probability: 20, owner: 'Jamie Chen', closeDate: '2026-10-01' },
+        { id: 'dl6', title: 'Stark analytics', companyId: 'co6', stage: 'proposal', value: 132000, probability: 65, owner: 'Priya Patel', closeDate: '2026-08-28' },
+        { id: 'dl7', title: 'Globex add-on seats', companyId: 'co1', stage: 'won', value: 12000, probability: 100, owner: 'Sam Rivera', closeDate: '2026-07-05' },
+        { id: 'dl8', title: 'Stark expansion', companyId: 'co6', stage: 'qualified', value: 54000, probability: 45, owner: 'Jamie Chen', closeDate: '2026-09-12' },
+    ],
+    activities: [
+        { id: 'ac1', subject: 'Discovery call with Ada', type: 'call', dealId: 'dl1', owner: 'Sam Rivera', priority: 'high', dueDate: '2026-07-16', durationMins: 30, completed: true, notes: 'Mapped the rollout scope.' },
+        { id: 'ac2', subject: 'Send pricing proposal', type: 'email', dealId: 'dl1', owner: 'Sam Rivera', priority: 'high', dueDate: '2026-07-18', durationMins: 15, completed: false, notes: 'Awaiting legal sign-off.' },
+        { id: 'ac3', subject: 'Data pipeline demo', type: 'meeting', dealId: 'dl2', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-12', durationMins: 45, completed: true, notes: 'Great fit, moving to close.' },
+        { id: 'ac4', subject: 'Compliance review follow-up', type: 'task', dealId: 'dl3', owner: 'Sam Rivera', priority: 'medium', dueDate: '2026-07-20', durationMins: 20, completed: false, notes: 'Collect SOC2 docs.' },
+        { id: 'ac5', subject: 'Re-engage Hooli champion', type: 'call', dealId: 'dl4', owner: 'Priya Patel', priority: 'low', dueDate: '2026-07-22', durationMins: 25, completed: false, notes: 'Deal went cold - revisit Q4.' },
+        { id: 'ac6', subject: 'Storefront scoping', type: 'meeting', dealId: 'dl5', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-19', durationMins: 60, completed: false, notes: 'Needs design mockups.' },
+        { id: 'ac7', subject: 'Analytics exec briefing', type: 'meeting', dealId: 'dl6', owner: 'Priya Patel', priority: 'high', dueDate: '2026-07-24', durationMins: 40, completed: false, notes: 'CFO joining the call.' },
+        { id: 'ac8', subject: 'Renewal paperwork', type: 'task', dealId: 'dl7', owner: 'Sam Rivera', priority: 'low', dueDate: '2026-07-14', durationMins: 10, completed: true, notes: 'Signed and filed.' },
+        { id: 'ac9', subject: 'Expansion seats quote', type: 'email', dealId: 'dl8', owner: 'Jamie Chen', priority: 'medium', dueDate: '2026-07-21', durationMins: 15, completed: false, notes: 'Quote 40 extra seats.' },
+        { id: 'ac10', subject: 'Quarterly business review', type: 'meeting', dealId: 'dl6', owner: 'Priya Patel', priority: 'high', dueDate: '2026-07-28', durationMins: 90, completed: false, notes: 'Prep the QBR deck.' },
+    ],
+};
+export const crm = {
+    id: 'crm',
+    name: 'CRM',
+    description: 'Companies, contacts, deals and activities - a Salesforce Lightning-style CRM behind a sign-in, with sales + forecast + activity dashboards (KPI sparklines, target gauge, value-over-time trend, pivot, tabs), filtered status-pill grids with drill-through and row actions, master/detail, and rich edit forms.',
+    emoji: '\u{1F91D}',
+    accent: '#0176d3',
+    build: () => {
+        const companyRows = pad(companies, seed.companies, 12);
+        const pool = ids(companyRows);
+        const contactRows = pad(contacts, seed.contacts, 22, { companyId: pool });
+        const dealRows = pad(deals, seed.deals, 30, { companyId: pool });
+        const dealPool = ids(dealRows);
+        const activityRows = pad(activities, seed.activities, 24, { dealId: dealPool });
+        return project({
+            title: 'Acme CRM',
+            brand: 'Acme CRM',
+            accent: '#0176d3',
+            preset: 'salesforce',
+            footer: '© Acme Inc.',
+            // Salesforce Lightning look: a deep-blue brand rail with white pill nav, and a
+            // Lightning-blue accent bar under the app toolbar.
+            appClass: 'theme-lightning',
+            customCss: LIGHTNING_CSS,
+            // A sign-in wall with two sales roles (reps can create + edit, not delete).
+            auth: { enabled: true, protect: true },
+            access: {
+                enabled: true,
+                defaultRole: 'rep',
+                roles: [
+                    { role: 'admin', screens: '*', actions: '*' },
+                    { role: 'rep', screens: '*', actions: ['create', 'update'] },
+                ],
+            },
+            entities: [companies, contacts, deals, activities],
+            seed: { companies: companyRows, contacts: contactRows, deals: dealRows, activities: activityRows },
+            screens: [
+                // Sales dashboard: KPI cards (a pipeline-value card with a sparkline over
+                // close dates + a $400k target), a target gauge, a stage funnel, a pie, an
+                // owner-leaderboard, a tabbed breakdown, and a status-pill deal grid.
+                dashScreen(deals, { id: 'overview', title: 'Overview', order: 0 }, [
+                    { kpi: 'Pipeline value', measure: 'value', reduce: 'sum', format: 'currency', trendField: 'closeDate', trendReduce: 'sum', target: 400000, span: 1 },
+                    { kpi: 'Open deals', reduce: 'count', span: 1 },
+                    { kpi: 'Avg deal size', measure: 'value', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Pipeline vs $500k target', measure: 'value', reduce: 'sum', min: 0, max: 500000, unit: '$', span: 1 },
+                    { chart: 'stage', measure: 'value', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'stage', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'owner', measure: 'value', reduce: 'sum', type: 'bar', span: 2 },
+                    { tabs: [
+                            { label: 'Value by stage', tiles: [{ chart: 'stage', measure: 'value', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Deals by owner', tiles: [{ chart: 'owner', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: dealFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Pipeline board: deals as draggable cards in stage columns (drag a card to
+                // change its stage). The signature "real app" view.
+                boardScreen(deals, { id: 'pipeline', title: 'Pipeline', order: 1 }, { groupBy: 'stage', titleField: 'title', badgeField: 'value', subtitleField: 'owner', filter: ['owner', 'companyId'], openScreen: 'deal-360' }),
+                // Deal desk: a docking-manager console (split panes) - filter deals on the
+                // left, the pipeline grid centre, and the selected deal's record on the right.
+                // Resize the panes; click a row to load it. Showcases screen layout: 'split'.
+                workspaceScreen(deals, { id: 'deal-desk', title: 'Deal desk', order: 2 }, { filter: ['stage', 'owner'], mode: 'split' }),
+                // Deal 360: a full record page - header (title + company + stage pill), value /
+                // probability metric tiles, an Overview of deal + account fields, and an
+                // Activities timeline of the tasks logged against the deal.
+                detailScreen(deals, { id: 'deal-360', title: 'Deal 360', order: 3 }, {
+                    titleField: 'title', subtitleField: 'companyId', statusField: 'stage',
+                    metricFields: ['value', 'probability'],
+                    sections: [
+                        { label: 'Deal', fields: ['owner', 'closeDate'] },
+                        { label: 'Account', fields: ['companyId'] },
+                    ],
+                    related: [{ entity: 'activities', foreignKey: 'dealId', label: 'Activities', titleField: 'subject', subtitleField: 'owner', dateField: 'dueDate', statusField: 'priority' }],
+                }),
+                // Forecast: value KPIs, a value-over-time area trend, and a pivot of value by
+                // owner (rows) x stage (columns).
+                dashScreen(deals, { id: 'forecast', title: 'Forecast', order: 4 }, [
+                    { kpi: 'Pipeline value', measure: 'value', reduce: 'sum', format: 'currency', span: 1 },
+                    { kpi: 'Avg deal size', measure: 'value', reduce: 'avg', format: 'currency', span: 1 },
+                    { kpi: 'Largest deal', measure: 'value', reduce: 'max', format: 'currency', span: 1 },
+                    { chart: 'closeDate', measure: 'value', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['owner'], cols: ['stage'], measure: 'value', aggregate: 'sum' }, span: 3 },
+                ]),
+                // Accounts dashboard: headcount KPIs (compact-formatted), an account-health
+                // gauge (avg rating 0-5), industry breakdowns, and a company grid that drills
+                // into the account's deals.
+                dashScreen(companies, { id: 'accounts', title: 'Accounts', order: 5 }, [
+                    { kpi: 'Companies', reduce: 'count', span: 1 },
+                    { kpi: 'Total headcount', measure: 'employees', reduce: 'sum', format: 'compact', span: 1 },
+                    { kpi: 'Avg headcount', measure: 'employees', reduce: 'avg', span: 1 },
+                    { gauge: 'Avg account health', measure: 'health', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'industry', measure: 'employees', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'industry', reduce: 'count', type: 'pie', span: 1 },
+                    { filter: ['industry', 'country', 'active'], span: 3 },
+                    { grid: true, format: statusPills(companies, 'industry'), summaries: true, rowLink: { screen: 'deals', sourceField: 'id', targetField: 'companyId' }, span: 3 },
+                ]),
+                // Activity board: task KPIs, a duration gauge, type/owner breakdowns, a filter,
+                // and a grid with type + priority pills and inline edit actions.
+                dashScreen(activities, { id: 'activities', title: 'Activities', order: 6 }, [
+                    { kpi: 'Activities', reduce: 'count', span: 1 },
+                    { kpi: 'Logged minutes', measure: 'durationMins', reduce: 'sum', format: 'compact', span: 1 },
+                    { kpi: 'Avg duration', measure: 'durationMins', reduce: 'avg', span: 1 },
+                    { gauge: 'Avg duration (min)', measure: 'durationMins', reduce: 'avg', min: 0, max: 120, unit: 'm', span: 1 },
+                    { chart: 'type', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'owner', reduce: 'count', type: 'bar', span: 2 },
+                    { filter: ['type', 'priority', 'owner', 'completed'], span: 3 },
+                    { grid: true, format: [...statusPills(activities, 'type'), ...statusPills(activities, 'priority'), ...statusPills(activities, 'owner')], summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Activity schedule: the activities grid rendered as a resource scheduler -
+                // a column per owner (rep), tasks placed by due date and tinted by type, with
+                // drag-to-reschedule + a detail drawer. Showcases the grid's scheduler view.
+                schedulerScreen(activities, { id: 'activity-cal', title: 'Schedule', order: 7 }, { startField: 'dueDate', titleField: 'subject', colorField: 'type', resourceField: 'owner', initialView: 'week' }),
+                screen(companies, 'master-detail', { id: 'companies', title: 'Companies', order: 8, child: contacts, foreignKey: 'companyId' }),
+                formScreen(contacts, { id: 'contacts', title: 'Contacts', order: 9 }, undefined, {}, ['companyId', 'tags', 'active']),
+                formScreen(deals, { id: 'deals', title: 'Deals', order: 10 }, undefined, { format: dealFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'deal-360', sourceField: 'id', targetField: 'id' } }, ['stage', 'owner', 'companyId']),
+            ],
+        });
+    },
+};

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

@@ -0,0 +1,38 @@
+/**
+ * Starter datasets for the guided "new app" flow.
+ *
+ * Where `sampleApps` are finished, hand-laid-out showcases, these are just DATA:
+ * a small pair of related entities plus realistic seed rows. The guided wizard
+ * (and `svgrid-studio init`) feeds them through `crudAppFromSchemas`, so the
+ * user sees the same generated app shape they would get from their own database
+ * - only without having to connect one first.
+ *
+ * Each dataset carries a parent and a child linked by a relation, plus at least
+ * one colored enum, so the generated app has status pills, a chart dimension and
+ * a related-records tab out of the box.
+ *
+ * Pure + node-safe: `build()` returns fresh data on every call.
+ */
+import type { EntitySchema } from '../../schema.js';
+type Row = Record<string, unknown>;
+/** A ready-made pair of entities + seed rows, offered as a starting point. */
+export type StarterDataset = {
+    /** Stable id (also the wizard / CLI selection value). */
+    id: string;
+    /** Display name, e.g. "Customers & orders". */
+    name: string;
+    /** One-line description for the picker card. */
+    description: string;
+    /** A single emoji used as the card icon. */
+    emoji: string;
+    /** Build the schemas + seed (fresh each call). */
+    build: () => {
+        entities: EntitySchema[];
+        seed: Record<string, Row[]>;
+    };
+};
+/** Every starter dataset, in picker order. */
+export declare const starterDatasets: StarterDataset[];
+/** Look up a starter dataset by id. */
+export declare function getStarterDataset(id: string): StarterDataset | undefined;
+export {};

package/dist/studio/samples/datasets.js

@@ -0,0 +1,296 @@
+import { pad, ids } from './shared.js';
+// --- 1. Customers & orders ---------------------------------------------------
+function customersOrders() {
+    const customers = {
+        name: 'customers',
+        label: 'Customer',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Customer', required: true, minLength: 2 },
+            { field: 'email', type: 'text', label: 'Email', format: 'email' },
+            { field: 'city', type: 'text', label: 'City' },
+            { field: 'tier', type: 'enum', label: 'Tier', options: [
+                    { value: 'free', label: 'Free', color: '#64748b' },
+                    { value: 'pro', label: 'Pro', color: '#2563eb' },
+                    { value: 'enterprise', label: 'Enterprise', color: '#7c3aed' },
+                ] },
+            { field: 'since', type: 'dateString', label: 'Customer since' },
+        ],
+    };
+    const orders = {
+        name: 'orders',
+        label: 'Order',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'reference', type: 'text', label: 'Reference', required: true },
+            { field: 'customer_id', type: 'relation', label: 'Customer', relation: { entity: 'customers', labelField: 'name' } },
+            { field: 'total', type: 'number', label: 'Total ($)', min: 0 },
+            { field: 'status', type: 'enum', label: 'Status', options: [
+                    { value: 'pending', label: 'Pending', color: '#f59e0b' },
+                    { value: 'paid', label: 'Paid', color: '#16a34a' },
+                    { value: 'shipped', label: 'Shipped', color: '#2563eb' },
+                    { value: 'refunded', label: 'Refunded', color: '#dc2626' },
+                ] },
+            { field: 'placed', type: 'dateString', label: 'Placed' },
+        ],
+    };
+    const customerRows = [
+        { id: 'cu1', name: 'Northwind Traders', email: 'ops@northwind.test', city: 'Seattle', tier: 'enterprise', since: '2023-02-14' },
+        { id: 'cu2', name: 'Blue Harbour Foods', email: 'hello@blueharbour.test', city: 'Bristol', tier: 'pro', since: '2024-06-02' },
+        { id: 'cu3', name: 'Cedar & Co', email: 'accounts@cedar.test', city: 'Toronto', tier: 'pro', since: '2024-11-19' },
+        { id: 'cu4', name: 'Meridian Labs', email: 'buy@meridian.test', city: 'Berlin', tier: 'free', since: '2025-03-08' },
+        { id: 'cu5', name: 'Fairlight Studio', email: 'studio@fairlight.test', city: 'Melbourne', tier: 'pro', since: '2025-05-21' },
+        { id: 'cu6', name: 'Alpine Outfitters', email: 'orders@alpine.test', city: 'Zurich', tier: 'enterprise', since: '2022-09-30' },
+    ];
+    const orderRows = [
+        { id: 'or1', reference: 'INV-1041', customer_id: 'cu1', total: 4820, status: 'paid', placed: '2026-01-12' },
+        { id: 'or2', reference: 'INV-1042', customer_id: 'cu2', total: 615, status: 'shipped', placed: '2026-01-15' },
+        { id: 'or3', reference: 'INV-1043', customer_id: 'cu1', total: 1290, status: 'pending', placed: '2026-01-19' },
+        { id: 'or4', reference: 'INV-1044', customer_id: 'cu3', total: 340, status: 'refunded', placed: '2026-01-23' },
+        { id: 'or5', reference: 'INV-1045', customer_id: 'cu6', total: 7150, status: 'paid', placed: '2026-02-02' },
+    ];
+    return {
+        entities: [customers, orders],
+        seed: {
+            customers: pad(customers, customerRows, 24),
+            orders: pad(orders, orderRows, 40, { customer_id: ids(customerRows) }),
+        },
+    };
+}
+// --- 2. Products & categories ------------------------------------------------
+function productsCategories() {
+    const categories = {
+        name: 'categories',
+        label: 'Category',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Category', required: true },
+            { field: 'description', type: 'text', label: 'Description' },
+        ],
+    };
+    const products = {
+        name: 'products',
+        label: 'Product',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Product', required: true, minLength: 2 },
+            { field: 'category_id', type: 'relation', label: 'Category', relation: { entity: 'categories', labelField: 'name' } },
+            { field: 'price', type: 'number', label: 'Price ($)', min: 0 },
+            { field: 'stock', type: 'number', label: 'In stock', min: 0 },
+            { field: 'status', type: 'enum', label: 'Status', options: [
+                    { value: 'active', label: 'Active', color: '#16a34a' },
+                    { value: 'low', label: 'Low stock', color: '#f59e0b' },
+                    { value: 'discontinued', label: 'Discontinued', color: '#64748b' },
+                ] },
+        ],
+    };
+    const categoryRows = [
+        { id: 'ca1', name: 'Beverages', description: 'Coffee, tea, soft drinks' },
+        { id: 'ca2', name: 'Condiments', description: 'Sauces, spreads, seasonings' },
+        { id: 'ca3', name: 'Produce', description: 'Fresh fruit and vegetables' },
+        { id: 'ca4', name: 'Bakery', description: 'Bread, pastries, cakes' },
+        { id: 'ca5', name: 'Household', description: 'Cleaning and kitchen supplies' },
+    ];
+    const productRows = [
+        { id: 'pr1', name: 'Single-origin coffee', category_id: 'ca1', price: 14.5, stock: 92, status: 'active' },
+        { id: 'pr2', name: 'Green tea sampler', category_id: 'ca1', price: 9.75, stock: 12, status: 'low' },
+        { id: 'pr3', name: 'Smoked chilli sauce', category_id: 'ca2', price: 6.2, stock: 240, status: 'active' },
+        { id: 'pr4', name: 'Sourdough loaf', category_id: 'ca4', price: 5, stock: 30, status: 'active' },
+        { id: 'pr5', name: 'Bamboo dish brush', category_id: 'ca5', price: 4.4, stock: 0, status: 'discontinued' },
+    ];
+    return {
+        entities: [categories, products],
+        seed: {
+            categories: pad(categories, categoryRows, 12),
+            products: pad(products, productRows, 36, { category_id: ids(categoryRows) }),
+        },
+    };
+}
+// --- 3. Projects & tasks -----------------------------------------------------
+function projectsTasks() {
+    const projects = {
+        name: 'projects',
+        label: 'Project',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Project', required: true, minLength: 2 },
+            { field: 'owner', type: 'text', label: 'Owner' },
+            { field: 'status', type: 'enum', label: 'Status', options: [
+                    { value: 'planning', label: 'Planning', color: '#64748b' },
+                    { value: 'active', label: 'Active', color: '#2563eb' },
+                    { value: 'blocked', label: 'Blocked', color: '#dc2626' },
+                    { value: 'done', label: 'Done', color: '#16a34a' },
+                ] },
+            { field: 'budget', type: 'number', label: 'Budget ($)', min: 0 },
+            { field: 'due', type: 'dateString', label: 'Due' },
+        ],
+    };
+    const tasks = {
+        name: 'tasks',
+        label: 'Task',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'title', type: 'text', label: 'Task', required: true, minLength: 2 },
+            { field: 'project_id', type: 'relation', label: 'Project', relation: { entity: 'projects', labelField: 'name' } },
+            { field: 'assignee', type: 'text', label: 'Assignee' },
+            { field: 'priority', type: 'enum', label: 'Priority', options: [
+                    { value: 'low', label: 'Low', color: '#64748b' },
+                    { value: 'medium', label: 'Medium', color: '#f59e0b' },
+                    { value: 'high', label: 'High', color: '#dc2626' },
+                ] },
+            { field: 'estimate', type: 'number', label: 'Estimate (h)', min: 0 },
+            { field: 'done', type: 'boolean', label: 'Done' },
+            { field: 'due', type: 'dateString', label: 'Due' },
+        ],
+    };
+    const projectRows = [
+        { id: 'pj1', name: 'Website redesign', owner: 'Dana Iqbal', status: 'active', budget: 48000, due: '2026-04-30' },
+        { id: 'pj2', name: 'Mobile checkout', owner: 'Sam Oyelaran', status: 'blocked', budget: 96000, due: '2026-06-15' },
+        { id: 'pj3', name: 'Warehouse migration', owner: 'Riya Kapoor', status: 'planning', budget: 130000, due: '2026-09-01' },
+        { id: 'pj4', name: 'Support portal', owner: 'Theo Marchand', status: 'done', budget: 25000, due: '2025-12-12' },
+    ];
+    const taskRows = [
+        { id: 'ts1', title: 'Audit current pages', project_id: 'pj1', assignee: 'Dana Iqbal', priority: 'medium', estimate: 12, done: true, due: '2026-02-10' },
+        { id: 'ts2', title: 'New component library', project_id: 'pj1', assignee: 'Nils Berg', priority: 'high', estimate: 40, done: false, due: '2026-03-20' },
+        { id: 'ts3', title: 'Payment provider spike', project_id: 'pj2', assignee: 'Sam Oyelaran', priority: 'high', estimate: 16, done: false, due: '2026-02-28' },
+        { id: 'ts4', title: 'Inventory data mapping', project_id: 'pj3', assignee: 'Riya Kapoor', priority: 'low', estimate: 24, done: false, due: '2026-05-05' },
+    ];
+    return {
+        entities: [projects, tasks],
+        seed: {
+            projects: pad(projects, projectRows, 16),
+            tasks: pad(tasks, taskRows, 48, { project_id: ids(projectRows) }),
+        },
+    };
+}
+// --- 4. Employees & departments ---------------------------------------------
+function employeesDepartments() {
+    const departments = {
+        name: 'departments',
+        label: 'Department',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Department', required: true },
+            { field: 'location', type: 'text', label: 'Location' },
+            { field: 'headcount', type: 'number', label: 'Headcount', min: 0 },
+        ],
+    };
+    const employees = {
+        name: 'employees',
+        label: 'Employee',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'name', type: 'text', label: 'Name', required: true, minLength: 2 },
+            { field: 'email', type: 'text', label: 'Email', format: 'email' },
+            { field: 'department_id', type: 'relation', label: 'Department', relation: { entity: 'departments', labelField: 'name' } },
+            { field: 'role', type: 'text', label: 'Role' },
+            { field: 'salary', type: 'number', label: 'Salary ($)', min: 0 },
+            { field: 'status', type: 'enum', label: 'Status', options: [
+                    { value: 'active', label: 'Active', color: '#16a34a' },
+                    { value: 'onboarding', label: 'Onboarding', color: '#2563eb' },
+                    { value: 'leave', label: 'On leave', color: '#f59e0b' },
+                    { value: 'alumni', label: 'Alumni', color: '#64748b' },
+                ] },
+            { field: 'started', type: 'dateString', label: 'Start date' },
+        ],
+    };
+    const departmentRows = [
+        { id: 'de1', name: 'Engineering', location: 'Lisbon', headcount: 42 },
+        { id: 'de2', name: 'Sales', location: 'Chicago', headcount: 18 },
+        { id: 'de3', name: 'Support', location: 'Manila', headcount: 25 },
+        { id: 'de4', name: 'Finance', location: 'London', headcount: 9 },
+    ];
+    const employeeRows = [
+        { id: 'em1', name: 'Aisha Rahman', email: 'aisha@example.test', department_id: 'de1', role: 'Staff engineer', salary: 142000, status: 'active', started: '2021-08-16' },
+        { id: 'em2', name: 'Marcus Webb', email: 'marcus@example.test', department_id: 'de2', role: 'Account executive', salary: 88000, status: 'active', started: '2023-01-09' },
+        { id: 'em3', name: 'Lena Fischer', email: 'lena@example.test', department_id: 'de3', role: 'Support lead', salary: 76000, status: 'leave', started: '2022-04-25' },
+        { id: 'em4', name: 'Diego Santos', email: 'diego@example.test', department_id: 'de4', role: 'Financial analyst', salary: 81000, status: 'onboarding', started: '2026-01-05' },
+    ];
+    return {
+        entities: [departments, employees],
+        seed: {
+            departments: pad(departments, departmentRows, 10),
+            employees: pad(employees, employeeRows, 40, { department_id: ids(departmentRows) }),
+        },
+    };
+}
+// --- 5. Support tickets ------------------------------------------------------
+function ticketsAccounts() {
+    const accounts = {
+        name: 'accounts',
+        label: 'Account',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'company', type: 'text', label: 'Company', required: true, minLength: 2 },
+            { field: 'contact', type: 'text', label: 'Primary contact' },
+            { field: 'plan', type: 'enum', label: 'Plan', options: [
+                    { value: 'starter', label: 'Starter', color: '#64748b' },
+                    { value: 'growth', label: 'Growth', color: '#2563eb' },
+                    { value: 'scale', label: 'Scale', color: '#7c3aed' },
+                ] },
+            { field: 'seats', type: 'number', label: 'Seats', min: 1 },
+        ],
+    };
+    const tickets = {
+        name: 'tickets',
+        label: 'Ticket',
+        idField: 'id',
+        fields: [
+            { field: 'id', type: 'text', primaryKey: true, readonly: true },
+            { field: 'subject', type: 'text', label: 'Subject', required: true, minLength: 3 },
+            { field: 'account_id', type: 'relation', label: 'Account', relation: { entity: 'accounts', labelField: 'company' } },
+            { field: 'priority', type: 'enum', label: 'Priority', options: [
+                    { value: 'low', label: 'Low', color: '#64748b' },
+                    { value: 'normal', label: 'Normal', color: '#2563eb' },
+                    { value: 'urgent', label: 'Urgent', color: '#dc2626' },
+                ] },
+            { field: 'status', type: 'enum', label: 'Status', options: [
+                    { value: 'open', label: 'Open', color: '#f59e0b' },
+                    { value: 'pending', label: 'Pending', color: '#2563eb' },
+                    { value: 'solved', label: 'Solved', color: '#16a34a' },
+                ] },
+            { field: 'hours', type: 'number', label: 'Hours logged', min: 0 },
+            { field: 'opened', type: 'dateString', label: 'Opened' },
+        ],
+    };
+    const accountRows = [
+        { id: 'ac1', company: 'Halcyon Retail', contact: 'Priya Nair', plan: 'scale', seats: 220 },
+        { id: 'ac2', company: 'Redwood Clinic', contact: 'Tom Alvarez', plan: 'growth', seats: 45 },
+        { id: 'ac3', company: 'Vector Freight', contact: 'Ingrid Holm', plan: 'starter', seats: 8 },
+        { id: 'ac4', company: 'Pinehill Academy', contact: 'Joy Adeyemi', plan: 'growth', seats: 60 },
+    ];
+    const ticketRows = [
+        { id: 'tk1', subject: 'Export fails on large report', account_id: 'ac1', priority: 'urgent', status: 'open', hours: 3.5, opened: '2026-02-03' },
+        { id: 'tk2', subject: 'Add a second admin seat', account_id: 'ac2', priority: 'low', status: 'solved', hours: 0.5, opened: '2026-01-28' },
+        { id: 'tk3', subject: 'Webhook retries stop after an hour', account_id: 'ac3', priority: 'normal', status: 'pending', hours: 2, opened: '2026-02-06' },
+        { id: 'tk4', subject: 'SSO metadata refresh', account_id: 'ac4', priority: 'normal', status: 'open', hours: 1.25, opened: '2026-02-11' },
+    ];
+    return {
+        entities: [accounts, tickets],
+        seed: {
+            accounts: pad(accounts, accountRows, 12),
+            tickets: pad(tickets, ticketRows, 44, { account_id: ids(accountRows) }),
+        },
+    };
+}
+/** Every starter dataset, in picker order. */
+export const starterDatasets = [
+    { id: 'customers-orders', name: 'Customers & orders', description: 'Accounts with their order history - the classic back-office pair.', emoji: '🧾', build: customersOrders },
+    { id: 'products-categories', name: 'Products & categories', description: 'A product catalog with stock levels and categories.', emoji: '📦', build: productsCategories },
+    { id: 'projects-tasks', name: 'Projects & tasks', description: 'Project tracker with assignees, priorities and due dates.', emoji: '🗂️', build: projectsTasks },
+    { id: 'employees-departments', name: 'Employees & departments', description: 'A staff directory with departments, roles and salaries.', emoji: '👥', build: employeesDepartments },
+    { id: 'tickets-accounts', name: 'Support tickets', description: 'Customer accounts with a support queue by priority and status.', emoji: '🎧', build: ticketsAccounts },
+];
+/** Look up a starter dataset by id. */
+export function getStarterDataset(id) {
+    return starterDatasets.find((d) => d.id === id);
+}

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

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