@svgrid/enterprise 2.5.2 → 2.6.0

package/dist/studio/samples/projects.js

@@ -0,0 +1,203 @@
+import { screen, formScreen, boardScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
+// Jira-style chrome: a dark navy issue-tracker sidebar with muted labels and a
+// blue active row (accent bar + tinted fill), the board front and centre.
+const JIRA_CSS = `.sv-app.theme-jira .sv-app__side { background: #1d2125; border-right: 1px solid #2c333a; }
+.sv-app.theme-jira .sv-app__brandtext { color: #fff; font-weight: 700; }
+.sv-app.theme-jira .sv-app__link { color: #c7d1db; border-radius: 4px; padding: 7px 12px; }
+.sv-app.theme-jira .sv-app__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
+.sv-app.theme-jira .sv-app__link.is-active { background: color-mix(in srgb, #0c66e4 30%, #1d2125); color: #fff; box-shadow: inset 3px 0 0 #4c9aff; }
+.sv-app.theme-jira .sv-app__collapse, .sv-app.theme-jira .sv-app__foot { color: #8c9bab; }`;
+const projectsEntity = {
+    name: 'projects',
+    label: 'Project',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'status', type: 'enum', required: true, defaultValue: 'planning', options: [
+                { value: 'planning', label: 'Planning', color: '#94a3b8' },
+                { value: 'active', label: 'Active', color: '#6366f1' },
+                { value: 'on_hold', label: 'On hold', color: '#f59e0b' },
+                { value: 'done', label: 'Done', color: '#10b981' },
+            ] },
+        { field: 'owner', type: 'text', label: 'Owner' },
+        { field: 'budget', type: 'number', label: 'Budget ($)', min: 0, input: { prefix: '$', help: 'Approved budget' } },
+        { field: 'progress', type: 'number', label: 'Progress (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Overall completion' } },
+        { field: 'color', type: 'text', label: 'Label color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Board / calendar color' } },
+        { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Themes / labels' } },
+        { field: 'dueDate', type: 'date', label: 'Due date', required: true },
+    ],
+};
+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 },
+        { field: 'phone', type: 'text', label: 'Phone', input: { editorType: 'phone', help: 'Direct line' } },
+        { field: 'role', type: 'enum', required: true, defaultValue: 'dev', options: [
+                { value: 'dev', label: 'Engineer', color: '#6366f1' },
+                { value: 'design', label: 'Designer', color: '#ec4899' },
+                { value: 'pm', label: 'PM', color: '#f59e0b' },
+                { value: 'qa', label: 'QA', color: '#10b981' },
+            ] },
+        { field: 'skills', type: 'text', label: 'Skills', input: { editorType: 'chips', help: 'Tech / expertise' } },
+        { field: 'rating', type: 'number', label: 'Performance', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 review score' } },
+    ],
+};
+const tasks = {
+    name: 'tasks',
+    label: 'Task',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'title', type: 'text', required: true, minLength: 2 },
+        { field: 'projectId', type: 'relation', label: 'Project', relation: { entity: 'projects', foreignKey: 'projectId', labelField: 'name' } },
+        { field: 'assigneeId', type: 'relation', label: 'Assignee', relation: { entity: 'members', foreignKey: 'assigneeId', labelField: 'name' } },
+        { field: 'priority', type: 'enum', required: true, defaultValue: 'medium', options: [
+                { value: 'low', label: 'Low', color: '#94a3b8' },
+                { value: 'medium', label: 'Medium', color: '#6366f1' },
+                { value: 'high', label: 'High', color: '#f59e0b' },
+                { value: 'urgent', label: 'Urgent', color: '#ef4444' },
+            ] },
+        { field: 'status', type: 'enum', required: true, defaultValue: 'todo', options: [
+                { value: 'todo', label: 'To do', color: '#94a3b8' },
+                { value: 'doing', label: 'In progress', color: '#6366f1' },
+                { value: 'review', label: 'In review', color: '#f59e0b' },
+                { value: 'done', label: 'Done', color: '#10b981' },
+            ] },
+        { field: 'estimate', type: 'number', label: 'Estimate (h)', min: 0, defaultValue: 0, input: { suffix: 'h', help: 'Estimated hours' } },
+        { field: 'spent', type: 'number', label: 'Spent (h)', min: 0, defaultValue: 0, input: { suffix: 'h', help: 'Hours logged so far' } },
+        // Derived: hours left on the task (display-only, never stored).
+        { field: 'remaining', type: 'number', label: 'Remaining (h)', readonly: true, formula: 'estimate - spent' },
+        { field: 'progress', type: 'number', label: 'Progress (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Task completion' } },
+        { field: 'startedAt', type: 'datetime', label: 'Started', input: { editorType: 'datetime', help: 'When work began' } },
+        { field: 'dueDate', type: 'date', label: 'Due' },
+    ],
+};
+// Task grid formatting: status + priority pills, plus numeric thresholds -
+// over-budget tasks (spent past estimate) red + bold, nearly-done tasks green,
+// barely-started tasks red - data-driven color, not just status pills.
+const taskFormats = [
+    ...statusPills(tasks, 'status'),
+    ...statusPills(tasks, 'priority'),
+    { field: 'spent', op: 'gt', value: 16, color: '#dc2626', bold: true },
+    { field: 'progress', op: 'gte', value: 80, color: '#16a34a', bold: true },
+    { field: 'progress', op: 'lt', value: 25, color: '#dc2626' },
+];
+const seed = {
+    projects: [
+        { id: 'pr1', name: 'Website redesign', status: 'active', owner: 'Sam Rivera', budget: 48000, progress: 65, color: '#6366f1', tags: ['Marketing', 'Design'], dueDate: '2026-09-01' },
+        { id: 'pr2', name: 'Mobile app v2', status: 'planning', owner: 'Jamie Chen', budget: 120000, progress: 15, color: '#10b981', tags: ['Mobile', 'Growth'], dueDate: '2026-11-15' },
+        { id: 'pr3', name: 'Billing migration', status: 'on_hold', owner: 'Priya Patel', budget: 32000, progress: 40, color: '#f59e0b', tags: ['Infra', 'Finance'], dueDate: '2026-08-20' },
+        { id: 'pr4', name: 'Onboarding revamp', status: 'done', owner: 'Sam Rivera', budget: 18000, progress: 100, color: '#ef4444', tags: ['Product'], dueDate: '2026-06-10' },
+    ],
+    members: [
+        { id: 'm1', name: 'Ada Lovelace', email: 'ada@team.dev', phone: '+1 (415) 555-0101', role: 'dev', skills: ['TypeScript', 'Svelte'], rating: 5 },
+        { id: 'm2', name: 'Grace Hopper', email: 'grace@team.dev', phone: '+1 (415) 555-0102', role: 'dev', skills: ['Go', 'SQL', 'Docker'], rating: 4 },
+        { id: 'm3', name: 'Margaret Hamilton', email: 'mh@team.dev', phone: '+1 (415) 555-0103', role: 'pm', skills: ['Product', 'Leadership'], rating: 5 },
+        { id: 'm4', name: 'Radia Perlman', email: 'radia@team.dev', phone: '+1 (415) 555-0104', role: 'design', skills: ['Figma', 'UX'], rating: 4 },
+        { id: 'm5', name: 'Katherine Johnson', email: 'kj@team.dev', phone: '+1 (415) 555-0105', role: 'qa', skills: ['Python', 'GraphQL'], rating: 3 },
+    ],
+    tasks: [
+        { id: 't1', title: 'Design new homepage', projectId: 'pr1', assigneeId: 'm4', priority: 'high', status: 'doing', estimate: 16, spent: 6, progress: 40, startedAt: '2026-07-02T09:15:00Z', dueDate: '2026-07-20' },
+        { id: 't2', title: 'Set up CI pipeline', projectId: 'pr1', assigneeId: 'm1', priority: 'medium', status: 'done', estimate: 8, spent: 8, progress: 100, startedAt: '2026-06-24T10:00:00Z', dueDate: '2026-07-05' },
+        { id: 't3', title: 'API rate limiting', projectId: 'pr2', assigneeId: 'm2', priority: 'urgent', status: 'todo', estimate: 12, spent: 0, progress: 0, startedAt: '2026-07-18T08:30:00Z', dueDate: '2026-07-25' },
+        { id: 't4', title: 'Migrate invoices', projectId: 'pr3', assigneeId: 'm1', priority: 'high', status: 'review', estimate: 24, spent: 18, progress: 80, startedAt: '2026-07-06T13:45:00Z', dueDate: '2026-08-01' },
+        { id: 't5', title: 'QA onboarding flow', projectId: 'pr4', assigneeId: 'm5', priority: 'medium', status: 'done', estimate: 6, spent: 6, progress: 100, startedAt: '2026-06-02T11:20:00Z', dueDate: '2026-06-08' },
+        { id: 't6', title: 'Push notifications', projectId: 'pr2', assigneeId: 'm2', priority: 'low', status: 'todo', estimate: 10, spent: 0, progress: 0, startedAt: '2026-07-15T09:00:00Z', dueDate: '2026-08-15' },
+        { id: 't7', title: 'Accessibility audit', projectId: 'pr1', assigneeId: 'm5', priority: 'high', status: 'doing', estimate: 14, spent: 5, progress: 35, startedAt: '2026-07-10T14:00:00Z', dueDate: '2026-07-30' },
+        { id: 't8', title: 'Pricing page copy', projectId: 'pr1', assigneeId: 'm3', priority: 'low', status: 'review', estimate: 4, spent: 3, progress: 75, startedAt: '2026-07-11T15:30:00Z', dueDate: '2026-07-18' },
+    ],
+};
+export const projectTracker = {
+    id: 'projects',
+    name: 'Project tracker',
+    description: 'Projects, tasks and a team roster - a Jira-style issue tracker behind a sign-in, with portfolio + task-board dashboards (budget KPI sparkline + target, progress gauge, status/priority breakdowns with pie + area trend, status x priority pivot, tabbed views), filtered status-pill grids with row actions, master/detail, and rich edit forms (progress slider, color labels, tag chips, phone, rating, datetime).',
+    emoji: '\u{1F4CB}',
+    accent: '#0c66e4',
+    build: () => {
+        const projectRows = pad(projectsEntity, seed.projects, 10);
+        const projectPool = ids(projectRows);
+        const memberRows = pad(members, seed.members, 12);
+        const memberPool = ids(memberRows);
+        const taskRows = pad(tasks, seed.tasks, 60, { projectId: projectPool, assigneeId: memberPool });
+        return project({
+            title: 'Project Tracker',
+            brand: 'Tracker',
+            accent: '#0c66e4',
+            preset: 'linear',
+            footer: '',
+            // Jira-style issue tracker: dark navy rail, board-forward.
+            appClass: 'theme-jira',
+            customCss: JIRA_CSS,
+            // Sign-in with two roles: developers move issues but cannot delete them.
+            auth: { enabled: true, protect: true },
+            access: {
+                enabled: true,
+                defaultRole: 'developer',
+                roles: [
+                    { role: 'admin', screens: '*', actions: '*' },
+                    { role: 'developer', screens: '*', actions: ['create', 'update'] },
+                ],
+            },
+            entities: [projectsEntity, members, tasks],
+            seed: { projects: projectRows, members: memberRows, tasks: taskRows },
+            screens: [
+                // Portfolio dashboard: budget KPIs (a total-budget card with a sparkline over
+                // due dates + a $400k target), an average-progress gauge (0-100), status
+                // breakdowns (bar + pie), a budget-by-owner x status pivot, a tabbed view, and
+                // a status-pill project grid with inline edit actions.
+                dashScreen(projectsEntity, { id: 'portfolio', title: 'Portfolio', order: 0 }, [
+                    { kpi: 'Total budget', measure: 'budget', reduce: 'sum', format: 'currency', trendField: 'dueDate', trendReduce: 'sum', target: 400000, span: 1 },
+                    { kpi: 'Projects', reduce: 'count', span: 1 },
+                    { kpi: 'Largest budget', measure: 'budget', reduce: 'max', format: 'currency', span: 1 },
+                    { gauge: 'Avg progress', measure: 'progress', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
+                    { chart: 'status', measure: 'budget', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { pivot: { rows: ['owner'], cols: ['status'], measure: 'budget', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Budget by status', tiles: [{ chart: 'status', measure: 'budget', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Projects by status', tiles: [{ chart: 'status', reduce: 'count', type: 'pie' }] },
+                        ], span: 3 },
+                    { grid: true, format: [...statusPills(projectsEntity, 'status'), { field: 'progress', op: 'gte', value: 100, color: '#16a34a', bold: true }], summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Task board: task KPIs (an estimate card trending over due dates), a completion
+                // gauge, status + priority breakdowns (bar + pie), a spent-over-time area trend,
+                // an estimate pivot by status (rows) x priority (columns), a tabbed view, a
+                // filter, and a task grid with status + priority pills and inline edit actions.
+                // Kanban board: tasks as cards in status columns (drag to change status).
+                boardScreen(tasks, { id: 'board', title: 'Kanban', order: 1 }, { groupBy: 'status', titleField: 'title', badgeField: 'estimate', subtitleField: 'priority', filter: ['priority', 'assigneeId'] }),
+                // Project detail: header (status pill) + budget / progress tiles with a
+                // timeline of the project's tasks (by due date, colored by status).
+                detailScreen(projectsEntity, { id: 'project-detail', title: 'Project detail', order: 2 }, {
+                    titleField: 'name', subtitleField: 'owner', statusField: 'status', metricFields: ['budget', 'progress'],
+                    related: [{ entity: 'tasks', foreignKey: 'projectId', label: 'Tasks', titleField: 'title', subtitleField: 'priority', dateField: 'dueDate', statusField: 'status' }],
+                }),
+                dashScreen(tasks, { id: 'tasks-board', title: 'Task board', order: 3 }, [
+                    { kpi: 'Tasks', reduce: 'count', span: 1 },
+                    { kpi: 'Logged hours', measure: 'spent', reduce: 'sum', format: 'compact', span: 1 },
+                    { kpi: 'Estimated hours', measure: 'estimate', reduce: 'sum', format: 'compact', trendField: 'dueDate', trendReduce: 'sum', span: 1 },
+                    { gauge: 'Avg completion', measure: 'progress', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
+                    { chart: 'status', reduce: 'count', type: 'bar', span: 2 },
+                    { chart: 'priority', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'dueDate', measure: 'spent', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['status'], cols: ['priority'], measure: 'estimate', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Hours by status', tiles: [{ chart: 'status', measure: 'spent', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Tasks by priority', tiles: [{ chart: 'priority', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { filter: ['status', 'priority', 'assigneeId'], span: 3 },
+                    { grid: true, format: taskFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                screen(projectsEntity, 'master-detail', { id: 'projects', title: 'Projects', order: 4, child: tasks, foreignKey: 'projectId', linkScreen: 'project-detail' }),
+                formScreen(tasks, { id: 'tasks', title: 'Tasks', order: 5 }, undefined, { format: taskFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'priority', 'assigneeId']),
+                formScreen(members, { id: 'members', title: 'Members', order: 6 }, undefined, { format: statusPills(members, 'role'), summaries: true }, ['role']),
+                // Schedule: tasks placed on a month calendar by due date.
+                schedulerScreen(tasks, { id: 'calendar', title: 'Schedule', order: 7 }, { startField: 'startedAt', endField: 'dueDate', titleField: 'title', colorField: 'priority', resourceField: 'assigneeId', initialView: 'timelineWeek' }),
+            ],
+        });
+    },
+};

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

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

package/dist/studio/samples/realestate.js

@@ -0,0 +1,187 @@
+import { screen, formScreen, boardScreen, project, dashScreen, detailScreen, statusPills, pad, ids } from './shared.js';
+const agents = {
+    name: 'agents',
+    label: 'Agent',
+    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: 'license', type: 'text', label: 'License #', input: { editorType: 'mask', mask: 'AA-######', help: 'State license number' } },
+        { field: 'rating', type: 'number', label: 'Rating', min: 1, max: 5, defaultValue: 4, input: { editorType: 'rating', help: '1-5 client satisfaction' } },
+        { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+    ],
+};
+const properties = {
+    name: 'properties',
+    label: 'Property',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'title', type: 'text', required: true, minLength: 3 },
+        { field: 'type', type: 'enum', required: true, options: [
+                { value: 'house', label: 'House', color: '#6366f1' },
+                { value: 'condo', label: 'Condo', color: '#0ea5e9' },
+                { value: 'land', label: 'Land', color: '#f59e0b' },
+                { value: 'commercial', label: 'Commercial', color: '#ec4899' },
+            ] },
+        { field: 'status', type: 'enum', required: true, options: [
+                { value: 'available', label: 'Available', color: '#10b981' },
+                { value: 'pending', label: 'Pending', color: '#f59e0b' },
+                { value: 'sold', label: 'Sold', color: '#94a3b8' },
+            ] },
+        { field: 'price', type: 'number', label: 'Price ($)', min: 0 },
+        { field: 'beds', type: 'number', label: 'Beds', min: 0 },
+        { field: 'baths', type: 'number', label: 'Baths', min: 0 },
+        { field: 'area', type: 'number', label: 'Area (sqft)', min: 0 },
+        // Derived: list price per square foot (display-only).
+        { field: 'pricePerSqft', type: 'number', label: 'Price / sqft ($)', readonly: true, formula: 'price / area' },
+        { field: 'yearBuilt', type: 'number', label: 'Year built', min: 1800, max: 2100 },
+        { field: 'zip', type: 'text', label: 'ZIP', input: { editorType: 'mask', mask: '#####' } },
+        { field: 'city', type: 'text', label: 'City' },
+        { field: 'amenities', type: 'text', label: 'Amenities', input: { editorType: 'chips', help: 'Pool, Garage, ...' } },
+        { field: 'listingUrl', type: 'text', label: 'Listing', format: 'url', input: { placeholder: 'https://…' } },
+    ],
+};
+const leads = {
+    name: 'leads',
+    label: 'Lead',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', label: 'Lead name', required: true, minLength: 2 },
+        { field: 'phone', type: 'text', input: { editorType: 'phone' } },
+        { field: 'propertyId', type: 'relation', label: 'Property', relation: { entity: 'properties', foreignKey: 'propertyId', labelField: 'title' } },
+        { field: 'agentId', type: 'relation', label: 'Agent', relation: { entity: 'agents', foreignKey: 'agentId', labelField: 'name' } },
+        { field: 'stage', type: 'enum', required: true, options: [
+                { value: 'new', label: 'New', color: '#94a3b8' },
+                { value: 'touring', label: 'Touring', color: '#0ea5e9' },
+                { value: 'offer', label: 'Offer', color: '#f59e0b' },
+                { value: 'closed', label: 'Closed', color: '#10b981' },
+                { value: 'lost', label: 'Lost', color: '#ef4444' },
+            ] },
+        { field: 'budget', type: 'number', label: 'Budget ($)', min: 0 },
+        { field: 'score', type: 'number', label: 'Lead score', min: 0, max: 100, defaultValue: 50, input: { editorType: 'slider', help: 'Fit / intent score' } },
+        { field: 'interests', type: 'text', label: 'Interests', input: { editorType: 'chips', help: 'Neighborhoods / features' } },
+    ],
+};
+// Property grid formatting: type + status pills, plus price thresholds (entry-level
+// listings red, luxury listings green + bold) - data-driven color, not just pills.
+const propertyFormats = [
+    ...statusPills(properties, 'type'),
+    ...statusPills(properties, 'status'),
+    { field: 'price', op: 'lt', value: 300000, color: '#dc2626' },
+    { field: 'price', op: 'gte', value: 1000000, color: '#16a34a', bold: true },
+];
+// Lead grid formatting: stage pills, plus score thresholds (cold leads red, hot
+// leads green + bold) and big-budget rows in bold.
+const leadFormats = [
+    ...statusPills(leads, 'stage'),
+    { field: 'score', op: 'lt', value: 40, color: '#dc2626' },
+    { field: 'score', op: 'gte', value: 80, color: '#16a34a', bold: true },
+    { field: 'budget', op: 'gte', value: 1000000, bold: true },
+];
+const seed = {
+    agents: [
+        { id: 'ag1', name: 'Sam Rivera', email: 'sam@realty.com', phone: '+1 (415) 555-0201', license: 'CA-104822', rating: 5, active: true },
+        { id: 'ag2', name: 'Jamie Chen', email: 'jamie@realty.com', phone: '+1 (650) 555-0202', license: 'CA-118934', rating: 4, active: true },
+        { id: 'ag3', name: 'Priya Patel', email: 'priya@realty.com', phone: '+1 (212) 555-0203', license: 'NY-207651', rating: 4, active: true },
+        { id: 'ag4', name: 'Diego Morales', email: 'diego@realty.com', phone: '+1 (305) 555-0204', license: 'FL-330487', rating: 3, active: true },
+        { id: 'ag5', name: 'Nina Kovac', email: 'nina@realty.com', phone: '+1 (312) 555-0205', license: 'IL-415229', rating: 5, active: true },
+    ],
+    properties: [
+        { id: 'pt1', title: 'Sunny Hill Villa', type: 'house', status: 'available', price: 875000, beds: 4, baths: 3, area: 3200, yearBuilt: 2015, zip: '78701', city: 'Austin', amenities: ['Pool', 'Garage', 'Garden'], listingUrl: 'https://realty.com/listings/pt1' },
+        { id: 'pt2', title: 'Downtown Loft', type: 'condo', status: 'pending', price: 420000, beds: 2, baths: 2, area: 1150, yearBuilt: 2019, zip: '60601', city: 'Chicago', amenities: ['Gym', 'Doorman'], listingUrl: 'https://realty.com/listings/pt2' },
+        { id: 'pt3', title: 'Riverside Acreage', type: 'land', status: 'available', price: 260000, beds: 0, baths: 0, area: 87120, yearBuilt: 2000, zip: '83702', city: 'Boise', amenities: ['Waterfront'], listingUrl: 'https://realty.com/listings/pt3' },
+        { id: 'pt4', title: 'Market Street Office', type: 'commercial', status: 'sold', price: 1950000, beds: 0, baths: 4, area: 12000, yearBuilt: 1998, zip: '94103', city: 'San Francisco', amenities: ['Parking', 'Elevator'], listingUrl: 'https://realty.com/listings/pt4' },
+        { id: 'pt5', title: 'Maple Court House', type: 'house', status: 'sold', price: 640000, beds: 3, baths: 2, area: 2100, yearBuilt: 2008, zip: '80203', city: 'Denver', amenities: ['Garage', 'Fireplace'], listingUrl: 'https://realty.com/listings/pt5' },
+        { id: 'pt6', title: 'Harbor View Condo', type: 'condo', status: 'available', price: 510000, beds: 2, baths: 2, area: 1340, yearBuilt: 2021, zip: '98101', city: 'Seattle', amenities: ['Balcony', 'Gym', 'View'], listingUrl: 'https://realty.com/listings/pt6' },
+        { id: 'pt7', title: 'Old Town Retail', type: 'commercial', status: 'pending', price: 1180000, beds: 0, baths: 2, area: 6800, yearBuilt: 1985, zip: '97205', city: 'Portland', amenities: ['Storefront', 'Parking'], listingUrl: 'https://realty.com/listings/pt7' },
+    ],
+    leads: [
+        { id: 'ld1', name: 'Olivia Brooks', phone: '+1 (415) 555-0301', propertyId: 'pt1', agentId: 'ag1', stage: 'touring', budget: 900000, score: 78, interests: ['Downtown', 'Pool'] },
+        { id: 'ld2', name: 'Marcus Reed', phone: '+1 (650) 555-0302', propertyId: 'pt2', agentId: 'ag2', stage: 'offer', budget: 430000, score: 88, interests: ['Loft', 'Gym'] },
+        { id: 'ld3', name: 'Hannah Lee', phone: '+1 (208) 555-0303', propertyId: 'pt3', agentId: 'ag3', stage: 'new', budget: 250000, score: 42, interests: ['Land', 'Waterfront'] },
+        { id: 'ld4', name: 'Trevor Nash', phone: '+1 (415) 555-0304', propertyId: 'pt4', agentId: 'ag1', stage: 'closed', budget: 1950000, score: 95, interests: ['Commercial'] },
+        { id: 'ld5', name: 'Sofia Marin', phone: '+1 (305) 555-0305', propertyId: 'pt5', agentId: 'ag4', stage: 'lost', budget: 600000, score: 30, interests: ['Suburbs', 'Garage'] },
+        { id: 'ld6', name: 'Ethan Walsh', phone: '+1 (206) 555-0306', propertyId: 'pt6', agentId: 'ag5', stage: 'touring', budget: 520000, score: 66, interests: ['View', 'Balcony'] },
+        { id: 'ld7', name: 'Grace Kim', phone: '+1 (503) 555-0307', propertyId: 'pt7', agentId: 'ag2', stage: 'offer', budget: 1150000, score: 81, interests: ['Retail', 'Parking'] },
+    ],
+};
+export const realEstate = {
+    id: 'realestate',
+    name: 'Real estate',
+    description: 'Properties, agents and leads - sales + pipeline + agent dashboards (price KPI target, rating and lead-score gauges, type x status pivot, tabbed breakdown), filtered status-pill grids with row actions, master/detail, and rich edit forms (phone, license mask, rating, amenity chips, lead-score slider).',
+    emoji: '\u{1F3E0}',
+    accent: '#10b981',
+    build: () => {
+        const agentRows = pad(agents, seed.agents, 10);
+        const agentPool = ids(agentRows);
+        const propertyRows = pad(properties, seed.properties, 18);
+        const propertyPool = ids(propertyRows);
+        const leadRows = pad(leads, seed.leads, 60, { propertyId: propertyPool, agentId: agentPool });
+        return project({
+            title: 'Realty',
+            brand: 'Realty',
+            accent: '#10b981',
+            preset: 'nord',
+            footer: '© Realty Group',
+            entities: [agents, properties, leads],
+            seed: { agents: agentRows, properties: propertyRows, leads: leadRows },
+            screens: [
+                // Sales dashboard: listing KPIs (a total-value card with a $10M target), an
+                // average-price gauge, a value-by-type bar, a status pie, a tabbed breakdown,
+                // a type x status pivot, and a status-pill property grid with edit actions.
+                dashScreen(properties, { id: 'overview', title: 'Sales', order: 0 }, [
+                    { kpi: 'Listings', reduce: 'count', span: 1 },
+                    { kpi: 'Total value', measure: 'price', reduce: 'sum', format: 'currency', target: 10000000, span: 1 },
+                    { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Avg price vs $1M', measure: 'price', reduce: 'avg', min: 0, max: 1000000, unit: '$', span: 1 },
+                    { chart: 'type', measure: 'price', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'type', reduce: 'count', type: 'bar', span: 2 },
+                    { tabs: [
+                            { label: 'Value by type', tiles: [{ chart: 'type', measure: 'price', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Listings by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { pivot: { rows: ['type'], cols: ['status'], measure: 'price', aggregate: 'sum' }, span: 3 },
+                    { grid: true, format: propertyFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Pipeline dashboard: budget + score KPIs, a lead-score gauge, stage
+                // breakdowns, a stage filter, and a score-formatted status-pill lead grid.
+                // Listings board: properties as cards in status columns (available/pending/sold).
+                boardScreen(properties, { id: 'board', title: 'Listings', order: 1 }, { groupBy: 'status', titleField: 'title', badgeField: 'price', subtitleField: 'city', filter: ['type', 'status'], openScreen: 'property-detail' }),
+                dashScreen(leads, { id: 'pipeline', title: 'Pipeline', order: 2 }, [
+                    { kpi: 'Leads', reduce: 'count', span: 1 },
+                    { kpi: 'Pipeline budget', measure: 'budget', reduce: 'sum', format: 'currency', span: 1 },
+                    { kpi: 'Avg score', measure: 'score', reduce: 'avg', span: 1 },
+                    { gauge: 'Avg lead score', measure: 'score', reduce: 'avg', min: 0, max: 100, span: 1 },
+                    { chart: 'stage', reduce: 'count', type: 'bar', span: 2 },
+                    { chart: 'stage', measure: 'budget', reduce: 'sum', type: 'pie', span: 1 },
+                    { filter: ['stage'], span: 3 },
+                    { grid: true, format: leadFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Agents dashboard: roster KPIs, an average client-rating gauge (0-5), and a
+                // per-agent rating leaderboard.
+                dashScreen(agents, { id: 'ratings', title: 'Agents', order: 3 }, [
+                    { kpi: 'Agents', reduce: 'count', span: 1 },
+                    { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', span: 1 },
+                    { gauge: 'Avg client rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'name', measure: 'rating', reduce: 'avg', type: 'bar', span: 3 },
+                    { grid: true, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Property detail: header (title + city + status pill + price/area tiles),
+                // tabbed overview, and an Inquiries timeline of related leads.
+                detailScreen(properties, { id: 'property-detail', title: 'Property detail', order: 4 }, {
+                    titleField: 'title', subtitleField: 'city', statusField: 'status',
+                    metricFields: ['price', 'area'],
+                    related: [{ entity: 'leads', foreignKey: 'propertyId', label: 'Inquiries', titleField: 'name', subtitleField: 'budget', statusField: 'stage' }],
+                }),
+                screen(agents, 'master-detail', { id: 'agent-book', title: 'Agent book', order: 5, child: leads, foreignKey: 'agentId' }),
+                formScreen(properties, { id: 'properties', title: 'Properties', order: 6 }, undefined, { format: propertyFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'property-detail', sourceField: 'id', targetField: 'id' } }, ['type', 'status', 'city']),
+                formScreen(leads, { id: 'leads', title: 'Leads', order: 7 }, undefined, { format: leadFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['stage']),
+            ],
+        });
+    },
+};

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

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

package/dist/studio/samples/restaurant.js

@@ -0,0 +1,180 @@
+import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
+const menuItems = {
+    name: 'menuItems',
+    label: 'Menu item',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'category', type: 'enum', required: true, options: [
+                { value: 'starter', label: 'Starter', color: '#6366f1' },
+                { value: 'main', label: 'Main', color: '#10b981' },
+                { value: 'dessert', label: 'Dessert', color: '#ec4899' },
+                { value: 'drink', label: 'Drink', color: '#0ea5e9' },
+            ] },
+        { field: 'price', type: 'number', label: 'Price ($)', required: true, min: 0, input: { prefix: '$' } },
+        { field: 'dietaryTags', type: 'text', label: 'Dietary tags', input: { editorType: 'chips', help: 'Dietary labels, e.g. Vegan / Gluten-free' } },
+        { field: 'spiceLevel', type: 'number', label: 'Spice level', min: 0, max: 5, defaultValue: 0, input: { editorType: 'slider', help: '0 mild to 5 fiery' } },
+        { field: 'prepMinutes', type: 'number', label: 'Prep (min)', min: 0 },
+        { field: 'rating', type: 'number', label: 'Rating', min: 0, max: 5, input: { editorType: 'rating' } },
+        { field: 'available', type: 'boolean', label: 'Available', defaultValue: true },
+    ],
+};
+const tables = {
+    name: 'tables',
+    label: 'Table',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'name', type: 'text', required: true, minLength: 2 },
+        { field: 'seats', type: 'number', label: 'Seats', required: true, min: 1, max: 20 },
+        { field: 'section', type: 'enum', required: true, options: [
+                { value: 'indoor', label: 'Indoor', color: '#6366f1' },
+                { value: 'patio', label: 'Patio', color: '#10b981' },
+                { value: 'bar', label: 'Bar', color: '#f59e0b' },
+                { value: 'private', label: 'Private', color: '#a855f7' },
+            ] },
+        { field: 'color', type: 'text', label: 'Map color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Swatch used on the floor plan' } },
+    ],
+};
+const orders = {
+    name: 'orders',
+    label: 'Order',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'tableId', type: 'relation', label: 'Table', relation: { entity: 'tables', foreignKey: 'tableId', labelField: 'name' } },
+        { field: 'status', type: 'enum', required: true, options: [
+                { value: 'open', label: 'Open', color: '#0ea5e9' },
+                { value: 'served', label: 'Served', color: '#f59e0b' },
+                { value: 'paid', label: 'Paid', color: '#10b981' },
+                { value: 'void', label: 'Void', color: '#ef4444' },
+            ] },
+        { field: 'total', type: 'number', label: 'Total ($)', required: true, min: 0, input: { prefix: '$' } },
+        { field: 'partySize', type: 'number', label: 'Party size', min: 1, max: 20 },
+        { field: 'tipPercent', type: 'number', label: 'Tip (%)', min: 0, max: 30, defaultValue: 15, input: { editorType: 'slider', help: 'Gratuity applied to the total' } },
+        // Derived: total plus gratuity (display-only, never stored).
+        { field: 'grandTotal', type: 'number', label: 'Grand total ($)', readonly: true, formula: 'total + total * tipPercent / 100' },
+        { field: 'customerPhone', type: 'text', label: 'Customer phone', input: { editorType: 'phone' } },
+        { field: 'reservationTime', type: 'datetime', label: 'Reservation' },
+        { field: 'placedAt', type: 'date', label: 'Placed at' },
+    ],
+};
+const seed = {
+    menuItems: [
+        { id: 'mi1', name: 'Bruschetta', category: 'starter', price: 9, dietaryTags: ['Vegetarian'], spiceLevel: 0, prepMinutes: 8, rating: 4, available: true },
+        { id: 'mi2', name: 'Caesar Salad', category: 'starter', price: 11, dietaryTags: ['Vegetarian', 'Gluten-free'], spiceLevel: 0, prepMinutes: 6, rating: 4, available: true },
+        { id: 'mi3', name: 'Margherita Pizza', category: 'main', price: 16, dietaryTags: ['Vegetarian'], spiceLevel: 1, prepMinutes: 14, rating: 5, available: true },
+        { id: 'mi4', name: 'Ribeye Steak', category: 'main', price: 32, dietaryTags: ['Gluten-free', 'High-protein'], spiceLevel: 2, prepMinutes: 22, rating: 5, available: true },
+        { id: 'mi5', name: 'Spicy Arrabbiata', category: 'main', price: 18, dietaryTags: ['Vegan', 'Spicy'], spiceLevel: 4, prepMinutes: 16, rating: 4, available: true },
+        { id: 'mi6', name: 'Tiramisu', category: 'dessert', price: 8, dietaryTags: ['Vegetarian'], spiceLevel: 0, prepMinutes: 5, rating: 5, available: true },
+        { id: 'mi7', name: 'Espresso', category: 'drink', price: 4, dietaryTags: ['Vegan'], spiceLevel: 0, prepMinutes: 3, rating: 4, available: true },
+        { id: 'mi8', name: 'House Red', category: 'drink', price: 12, dietaryTags: ['Vegan'], spiceLevel: 0, prepMinutes: 2, rating: 3, available: false },
+    ],
+    tables: [
+        { id: 'tb1', name: 'Table 1', seats: 2, section: 'indoor', color: '#6366f1' },
+        { id: 'tb2', name: 'Table 2', seats: 4, section: 'indoor', color: '#6366f1' },
+        { id: 'tb3', name: 'Table 5', seats: 6, section: 'patio', color: '#10b981' },
+        { id: 'tb4', name: 'Table 8', seats: 4, section: 'patio', color: '#10b981' },
+        { id: 'tb5', name: 'Bar 1', seats: 1, section: 'bar', color: '#f59e0b' },
+        { id: 'tb6', name: 'Bar 2', seats: 1, section: 'bar', color: '#f59e0b' },
+        { id: 'tb7', name: 'Salon', seats: 10, section: 'private', color: '#a855f7' },
+    ],
+    orders: [
+        { id: 'or1', tableId: 'tb1', status: 'paid', total: 54, partySize: 2, tipPercent: 18, customerPhone: '+1 (415) 555-0142', reservationTime: '2026-07-10T19:30:00', placedAt: '2026-07-10' },
+        { id: 'or2', tableId: 'tb2', status: 'served', total: 88, partySize: 4, tipPercent: 15, customerPhone: '+1 (415) 555-0187', reservationTime: '2026-07-11T20:00:00', placedAt: '2026-07-11' },
+        { id: 'or3', tableId: 'tb3', status: 'open', total: 132, partySize: 6, tipPercent: 20, customerPhone: '+1 (628) 555-0110', reservationTime: '2026-07-12T18:45:00', placedAt: '2026-07-12' },
+        { id: 'or4', tableId: 'tb4', status: 'paid', total: 76, partySize: 4, tipPercent: 15, customerPhone: '+1 (415) 555-0163', reservationTime: '2026-07-12T21:15:00', placedAt: '2026-07-12' },
+        { id: 'or5', tableId: 'tb5', status: 'void', total: 18, partySize: 1, tipPercent: 0, customerPhone: '+1 (510) 555-0199', reservationTime: '2026-07-13T17:30:00', placedAt: '2026-07-13' },
+        { id: 'or6', tableId: 'tb1', status: 'open', total: 42, partySize: 2, tipPercent: 18, customerPhone: '+1 (415) 555-0125', reservationTime: '2026-07-14T19:00:00', placedAt: '2026-07-14' },
+        { id: 'or7', tableId: 'tb7', status: 'served', total: 265, partySize: 10, tipPercent: 22, customerPhone: '+1 (628) 555-0148', reservationTime: '2026-07-14T20:30:00', placedAt: '2026-07-14' },
+    ],
+};
+// Order grid formatting: status pills, plus numeric thresholds (big tickets bold,
+// tiny tickets red, generous tips green + bold) - data-driven color, not just
+// status pills.
+const orderFormats = [
+    ...statusPills(orders, 'status'),
+    { field: 'total', op: 'gte', value: 150, bold: true },
+    { field: 'total', op: 'lt', value: 30, color: '#dc2626' },
+    { field: 'tipPercent', op: 'gte', value: 20, color: '#16a34a', bold: true },
+];
+// Menu grid formatting: category pills, plus spice / rating / price thresholds
+// (fiery dishes red + bold, five-star dishes green + bold, premium plates bold).
+const menuFormats = [
+    ...statusPills(menuItems, 'category'),
+    { field: 'spiceLevel', op: 'gte', value: 4, color: '#dc2626', bold: true },
+    { field: 'rating', op: 'gte', value: 5, color: '#16a34a', bold: true },
+    { field: 'price', op: 'gte', value: 25, bold: true },
+];
+export const restaurant = {
+    id: 'restaurant',
+    name: 'Restaurant',
+    description: 'Menu, tables and orders - sales + menu dashboards (KPI sparkline + target, sales-over-time area trend, order-status pie, day x status pivot, rating gauge, tabs), filtered status-pill grids with row actions, tables/orders master-detail, and rich edit forms (chips, spice slider, rating, color swatch, phone, reservation datetime).',
+    emoji: '\u{1F37D}',
+    accent: '#f97316',
+    build: () => {
+        const menuRows = pad(menuItems, seed.menuItems, 40);
+        const tableRows = pad(tables, seed.tables, 16);
+        const orderRows = pad(orders, seed.orders, 90, { tableId: ids(tableRows) });
+        return project({
+            title: 'Bistro',
+            brand: 'Bistro',
+            accent: '#f97316',
+            preset: 'bootstrap',
+            navStyle: 'top-nav',
+            footer: '',
+            entities: [menuItems, tables, orders],
+            seed: { menuItems: menuRows, tables: tableRows, orders: orderRows },
+            screens: [
+                // Sales dashboard: KPI cards (a total-sales card with a sparkline over
+                // placed dates + a $2k target), a sales-vs-target gauge, a sales-over-time
+                // area trend, an order-status pie, a day x status value pivot, a tabbed
+                // breakdown, and a status-pill order grid with inline edit actions.
+                dashScreen(orders, { id: 'overview', title: 'Overview', order: 0 }, [
+                    { kpi: 'Total sales', measure: 'total', reduce: 'sum', format: 'currency', trendField: 'placedAt', trendReduce: 'sum', target: 2000, span: 1 },
+                    { kpi: 'Orders', reduce: 'count', span: 1 },
+                    { kpi: 'Avg ticket', measure: 'total', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Sales vs $3k target', measure: 'total', reduce: 'sum', min: 0, max: 3000, unit: '$', span: 1 },
+                    { chart: 'placedAt', measure: 'total', reduce: 'sum', type: 'area', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'status', measure: 'total', reduce: 'sum', type: 'bar', span: 3 },
+                    { pivot: { rows: ['placedAt'], cols: ['status'], measure: 'total', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Sales by status', tiles: [{ chart: 'status', measure: 'total', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Orders by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { grid: true, format: orderFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Menu dashboard: price / spice / rating KPIs, an average-rating gauge, a
+                // price-by-category bar + a category pie, a category x availability price
+                // pivot, a tabbed breakdown, a faceted filter, and a category-pill menu grid.
+                dashScreen(menuItems, { id: 'menu', title: 'Menu', order: 1 }, [
+                    { kpi: 'Menu items', reduce: 'count', span: 1 },
+                    { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
+                    { kpi: 'Avg spice', measure: 'spiceLevel', reduce: 'avg', span: 1 },
+                    { gauge: 'Avg rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'category', measure: 'price', reduce: 'avg', type: 'bar', span: 2 },
+                    { chart: 'category', reduce: 'count', type: 'pie', span: 1 },
+                    { pivot: { rows: ['category'], cols: ['available'], measure: 'price', aggregate: 'avg' }, span: 3 },
+                    { tabs: [
+                            { label: 'Price by category', tiles: [{ chart: 'category', measure: 'price', reduce: 'avg', type: 'bar' }] },
+                            { label: 'Rating by category', tiles: [{ chart: 'category', measure: 'rating', reduce: 'avg', type: 'bar' }] },
+                        ], span: 3 },
+                    { filter: ['category', 'available'], span: 3 },
+                    { grid: true, format: menuFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Resource scheduler: a column per table, reservations placed by time + tinted by
+                // status, drag-to-reassign a table + a detail drawer (day view). Was a month calendar.
+                schedulerScreen(orders, { id: 'reservations', title: 'Reservations', order: 2 }, { startField: 'reservationTime', titleField: 'name', colorField: 'status', resourceField: 'tableId', initialView: 'day' }),
+                detailScreen(tables, { id: 'table-detail', title: 'Table detail', order: 3 }, {
+                    titleField: 'name', statusField: 'section', metricFields: ['seats'],
+                    related: [{ entity: 'orders', foreignKey: 'tableId', label: 'Orders', titleField: 'customerPhone', subtitleField: 'total', dateField: 'reservationTime', statusField: 'status' }],
+                }),
+                screen(tables, 'master-detail', { id: 'tables', title: 'Tables', order: 4, child: orders, foreignKey: 'tableId', linkScreen: 'table-detail' }),
+                formScreen(orders, { id: 'orders', title: 'Orders', order: 5 }, undefined, { format: orderFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['tableId', 'status']),
+                formScreen(menuItems, { id: 'menuItems', title: 'Menu items', order: 6 }, undefined, { format: menuFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['category', 'dietaryTags', 'available']),
+            ],
+        });
+    },
+};

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

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