@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/samples/gym.ts

@@ -0,0 +1,213 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, calendarScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const classes: EntitySchema = {
+  name: 'classes',
+  label: 'Class',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'type', type: 'enum', required: true, options: [
+      { value: 'yoga', label: 'Yoga', color: '#10b981' },
+      { value: 'spin', label: 'Spin', color: '#0ea5e9' },
+      { value: 'hiit', label: 'HIIT', color: '#ef4444' },
+      { value: 'strength', label: 'Strength', color: '#6366f1' },
+    ] },
+    { field: 'capacity', type: 'number', label: 'Capacity', required: true, min: 1, defaultValue: 20, input: { help: 'Maximum attendees per session' } },
+    { field: 'durationMins', type: 'number', label: 'Duration (min)', min: 15, max: 120, defaultValue: 60, input: { suffix: ' min' } },
+    { field: 'intensity', type: 'number', label: 'Intensity', min: 0, max: 5, defaultValue: 3, input: { editorType: 'slider', help: 'Effort level from easy (0) to brutal (5)' } },
+    // Derived: training load = intensity x duration (display-only, never stored).
+    { field: 'load', type: 'number', label: 'Load', readonly: true, formula: 'intensity * durationMins' },
+    { field: 'color', type: 'text', label: 'Schedule colour', input: { editorType: 'color', help: 'Shown on the timetable' } },
+    { field: 'trainer', type: 'text', label: 'Lead trainer' },
+  ],
+}
+
+const members: EntitySchema = {
+  name: 'members',
+  label: 'Member',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'email', type: 'text', format: 'email', required: true },
+    { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Mobile for class reminders' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country' } },
+    { field: 'plan', type: 'enum', label: 'Membership', required: true, options: [
+      { value: 'basic', label: 'Basic', color: '#94a3b8' },
+      { value: 'plus', label: 'Plus', color: '#0ea5e9' },
+      { value: 'elite', label: 'Elite', color: '#f59e0b' },
+    ] },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'active', options: [
+      { value: 'active', label: 'Active', color: '#10b981' },
+      { value: 'paused', label: 'Paused', color: '#f59e0b' },
+      { value: 'expired', label: 'Expired', color: '#ef4444' },
+    ] },
+    { field: 'joinDate', type: 'date', label: 'Joined' },
+    { field: 'goals', type: 'text', label: 'Goals', input: { editorType: 'chips', help: 'What this member is training for' } },
+    { field: 'monthlyFee', type: 'number', label: 'Monthly fee ($)', min: 0, defaultValue: 49, input: { prefix: '$' } },
+    // Derived: yearly commitment from the monthly fee (display-only).
+    { field: 'annualFee', type: 'number', label: 'Annual fee ($)', readonly: true, formula: 'monthlyFee * 12' },
+  ],
+}
+
+const bookings: EntitySchema = {
+  name: 'bookings',
+  label: 'Booking',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'memberId', type: 'relation', label: 'Member', relation: { entity: 'members', foreignKey: 'memberId', labelField: 'name' } },
+    { field: 'classId', type: 'relation', label: 'Class', relation: { entity: 'classes', foreignKey: 'classId', labelField: 'name' } },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'booked', options: [
+      { value: 'booked', label: 'Booked', color: '#0ea5e9' },
+      { value: 'attended', label: 'Attended', color: '#10b981' },
+      { value: 'no_show', label: 'No show', color: '#ef4444' },
+    ] },
+    { field: 'bookedAt', type: 'datetime', label: 'Booked at', input: { editorType: 'datetime', help: 'When the spot was reserved' } },
+    { field: 'rating', type: 'number', label: 'Feedback', min: 0, max: 5, defaultValue: 0, input: { editorType: 'rating', help: 'Post-class member rating' } },
+  ],
+}
+
+const seed = {
+  classes: [
+    { id: 'cl1', name: 'Sunrise Yoga', type: 'yoga', capacity: 20, durationMins: 60, intensity: 2, color: '#10b981', trainer: 'Maya Cohen' },
+    { id: 'cl2', name: 'Power Spin', type: 'spin', capacity: 24, durationMins: 45, intensity: 4, color: '#0ea5e9', trainer: 'Rob Sena' },
+    { id: 'cl3', name: 'HIIT Blast', type: 'hiit', capacity: 16, durationMins: 30, intensity: 5, color: '#ef4444', trainer: 'Tara Voss' },
+    { id: 'cl4', name: 'Iron Strength', type: 'strength', capacity: 12, durationMins: 50, intensity: 4, color: '#6366f1', trainer: 'Marcus Lee' },
+    { id: 'cl5', name: 'Flow Yoga', type: 'yoga', capacity: 18, durationMins: 75, intensity: 3, color: '#22c55e', trainer: 'Maya Cohen' },
+    { id: 'cl6', name: 'Endurance Spin', type: 'spin', capacity: 22, durationMins: 60, intensity: 3, color: '#38bdf8', trainer: 'Rob Sena' },
+  ],
+  members: [
+    { id: 'mb1', name: 'Olivia Grant', email: 'olivia.grant@example.com', phone: '+1 (415) 555-0111', country: 'United States', plan: 'elite', status: 'active', joinDate: '2025-01-12', goals: ['Weight loss', 'Flexibility'], monthlyFee: 99 },
+    { id: 'mb2', name: 'James Carter', email: 'james.carter@example.com', phone: '+44 20 7946 0112', country: 'United Kingdom', plan: 'plus', status: 'active', joinDate: '2025-03-04', goals: ['Strength'], monthlyFee: 69 },
+    { id: 'mb3', name: 'Hana Kim', email: 'hana.kim@example.com', phone: '+82 2 555 0113', country: 'South Korea', plan: 'basic', status: 'paused', joinDate: '2025-05-20', goals: ['Stress relief'], monthlyFee: 39 },
+    { id: 'mb4', name: 'Diego Morales', email: 'diego.morales@example.com', phone: '+34 91 555 0114', country: 'Spain', plan: 'plus', status: 'active', joinDate: '2024-11-08', goals: ['Endurance', 'Cardio'], monthlyFee: 69 },
+    { id: 'mb5', name: 'Zara Ahmed', email: 'zara.ahmed@example.com', phone: '+971 4 555 0115', country: 'United Arab Emirates', plan: 'elite', status: 'expired', joinDate: '2024-08-15', goals: ['Toning'], monthlyFee: 99 },
+    { id: 'mb6', name: 'Ben Walker', email: 'ben.walker@example.com', phone: '+1 (650) 555-0116', country: 'United States', plan: 'basic', status: 'active', joinDate: '2025-06-01', goals: ['General fitness'], monthlyFee: 39 },
+    { id: 'mb7', name: 'Chloe Dubois', email: 'chloe.dubois@example.com', phone: '+33 1 42 55 0117', country: 'France', plan: 'plus', status: 'active', joinDate: '2025-02-18', goals: ['Flexibility', 'Balance'], monthlyFee: 69 },
+  ],
+  bookings: [
+    { id: 'bk1', memberId: 'mb1', classId: 'cl1', status: 'attended', bookedAt: '2026-07-01T06:30:00.000Z', rating: 5 },
+    { id: 'bk2', memberId: 'mb2', classId: 'cl2', status: 'attended', bookedAt: '2026-07-01T18:00:00.000Z', rating: 4 },
+    { id: 'bk3', memberId: 'mb3', classId: 'cl1', status: 'no_show', bookedAt: '2026-07-02T06:30:00.000Z', rating: 0 },
+    { id: 'bk4', memberId: 'mb4', classId: 'cl3', status: 'booked', bookedAt: '2026-07-03T12:15:00.000Z', rating: 0 },
+    { id: 'bk5', memberId: 'mb5', classId: 'cl4', status: 'attended', bookedAt: '2026-07-03T19:00:00.000Z', rating: 5 },
+    { id: 'bk6', memberId: 'mb6', classId: 'cl2', status: 'attended', bookedAt: '2026-07-04T18:00:00.000Z', rating: 3 },
+    { id: 'bk7', memberId: 'mb7', classId: 'cl5', status: 'booked', bookedAt: '2026-07-05T09:00:00.000Z', rating: 0 },
+    { id: 'bk8', memberId: 'mb1', classId: 'cl6', status: 'attended', bookedAt: '2026-07-05T17:30:00.000Z', rating: 4 },
+  ],
+}
+
+// Class grid formatting: type pills plus numeric thresholds (tight rooms red,
+// roomy sessions green + bold, brutal-intensity classes bold red) - data-driven
+// color, not just status pills.
+const classFormats: FormatRule[] = [
+  ...statusPills(classes, 'type'),
+  { field: 'capacity', op: 'lt', value: 15, color: '#dc2626' },
+  { field: 'capacity', op: 'gte', value: 24, color: '#16a34a', bold: true },
+  { field: 'intensity', op: 'gte', value: 4, color: '#dc2626', bold: true },
+]
+
+// Member grid formatting: status + plan pills, plus premium-fee highlight.
+const memberFormats: FormatRule[] = [
+  ...statusPills(members, 'status'),
+  ...statusPills(members, 'plan'),
+  { field: 'monthlyFee', op: 'gte', value: 90, bold: true },
+]
+
+// Booking grid formatting: status pills plus rating thresholds (poor feedback
+// red, strong feedback green + bold).
+const bookingFormats: FormatRule[] = [
+  ...statusPills(bookings, 'status'),
+  { field: 'rating', op: 'lt', value: 3, color: '#dc2626' },
+  { field: 'rating', op: 'gte', value: 4, color: '#16a34a', bold: true },
+]
+
+export const gym: SampleApp = {
+  id: 'gym',
+  name: 'Gym',
+  description: 'Members, classes and bookings - membership, class and attendance dashboards (KPI sparklines + a fee target, capacity and feedback gauges, a plan-by-status pivot, join-date and booking trends, tabbed breakdowns), filtered status-pill grids with row actions, master/detail, and rich edit forms.',
+  emoji: '🏋️',
+  accent: '#22c55e',
+  build: () => {
+    const classRows = pad(classes, seed.classes, 12)
+    const memberRows = pad(members, seed.members, 22)
+    const classPool = ids(classRows)
+    const memberPool = ids(memberRows)
+    const bookingRows = pad(bookings, seed.bookings, 30, { memberId: memberPool, classId: classPool })
+    return project({
+      title: 'FitClub',
+      brand: 'FitClub',
+      accent: '#22c55e',
+      preset: 'dracula',
+      mode: 'dark',
+      footer: '© FitClub',
+      entities: [classes, members, bookings],
+      seed: { classes: classRows, members: memberRows, bookings: bookingRows },
+      screens: [
+        // Membership dashboard: revenue + member KPIs (a monthly-revenue card with a
+        // sparkline over join dates + a $1.5k target), a fee gauge, plan / status
+        // breakdowns, a join-date revenue trend, a plan x status pivot, a tabbed
+        // breakdown, a faceted filter, and a status-pill member grid.
+        dashScreen(members, { id: 'membership', title: 'Membership', order: 0 }, [
+          { kpi: 'Members', reduce: 'count', span: 1 },
+          { kpi: 'Monthly revenue', measure: 'monthlyFee', reduce: 'sum', format: 'currency', trendField: 'joinDate', trendReduce: 'sum', target: 1500, span: 1 },
+          { kpi: 'Avg fee', measure: 'monthlyFee', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg monthly fee vs $150', measure: 'monthlyFee', reduce: 'avg', min: 0, max: 150, unit: '$', span: 1 },
+          { chart: 'plan', measure: 'monthlyFee', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'joinDate', measure: 'monthlyFee', reduce: 'sum', type: 'area', span: 3 },
+          { pivot: { rows: ['plan'], cols: ['status'], measure: 'monthlyFee', aggregate: 'sum' }, span: 3 },
+          { tabs: [
+            { label: 'Revenue by plan', tiles: [{ chart: 'plan', measure: 'monthlyFee', reduce: 'sum', type: 'bar' }] },
+            { label: 'Members by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { filter: ['plan', 'status', 'country'], span: 3 },
+          { grid: true, format: memberFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Class insights: capacity + intensity KPIs, an average-capacity gauge, type
+        // breakdowns, a tabbed capacity / intensity view, and a class grid with type
+        // pills plus capacity / intensity thresholds.
+        dashScreen(classes, { id: 'schedule', title: 'Class insights', order: 1 }, [
+          { kpi: 'Classes', reduce: 'count', span: 1 },
+          { kpi: 'Total capacity', measure: 'capacity', reduce: 'sum', span: 1 },
+          { kpi: 'Avg intensity', measure: 'intensity', reduce: 'avg', span: 1 },
+          { gauge: 'Avg capacity', measure: 'capacity', reduce: 'avg', min: 0, max: 30, span: 1 },
+          { chart: 'type', measure: 'capacity', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'type', reduce: 'count', type: 'pie', span: 1 },
+          { tabs: [
+            { label: 'Capacity by type', tiles: [{ chart: 'type', measure: 'capacity', reduce: 'sum', type: 'bar' }] },
+            { label: 'Intensity by type', tiles: [{ chart: 'type', measure: 'intensity', reduce: 'avg', type: 'bar' }] },
+            { label: 'Duration by type', tiles: [{ chart: 'type', measure: 'durationMins', reduce: 'avg', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: classFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Attendance: booking + feedback KPIs (avg rating trends over booking time), a
+        // feedback gauge, status breakdown, a rating-over-time area trend, a filter,
+        // and a status-pill booking grid with rating thresholds.
+        dashScreen(bookings, { id: 'attendance', title: 'Attendance', order: 2 }, [
+          { kpi: 'Bookings', reduce: 'count', span: 1 },
+          { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', trendField: 'bookedAt', trendReduce: 'avg', span: 1 },
+          { kpi: 'Top rating', measure: 'rating', reduce: 'max', span: 1 },
+          { gauge: 'Avg feedback', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'bookedAt', measure: 'rating', reduce: 'avg', type: 'area', span: 2 },
+          { filter: ['status'], span: 3 },
+          { grid: true, format: bookingFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        calendarScreen(bookings, { id: 'schedule-cal', title: 'Schedule', order: 3 }, { dateField: 'bookedAt', titleField: 'classId', colorField: 'status', filter: ['status', 'classId'] }),
+        detailScreen(members, { id: 'member-360', title: 'Member 360', order: 4 }, {
+          titleField: 'name', subtitleField: 'email', statusField: 'status',
+          metricFields: ['monthlyFee'],
+          related: [{ entity: 'bookings', foreignKey: 'memberId', label: 'Bookings', titleField: 'classId', dateField: 'bookedAt', statusField: 'status' }],
+        }),
+        screen(classes, 'master-detail', { id: 'classes', title: 'Classes', order: 5, child: bookings, foreignKey: 'classId' }),
+        formScreen(members, { id: 'members', title: 'Members', order: 6 }, undefined, { format: memberFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'member-360', sourceField: 'id', targetField: 'id' } }, ['plan', 'status', 'country']),
+        formScreen(bookings, { id: 'bookings', title: 'Bookings', order: 7 }, undefined, { format: bookingFormats, summaries: true }, ['status']),
+      ],
+    })
+  },
+}

package/src/studio/samples/hr.ts

@@ -0,0 +1,193 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const departments: EntitySchema = {
+  name: 'departments',
+  label: 'Department',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'parentId', type: 'relation', label: 'Parent dept', relation: { entity: 'departments', foreignKey: 'parentId', labelField: 'name' } },
+    { field: 'location', type: 'text', label: 'Location', input: { editorType: 'country', help: 'Primary office country' } },
+    { field: 'budget', type: 'number', label: 'Budget ($)', min: 0 },
+    { field: 'headcount', type: 'number', label: 'Headcount', min: 0 },
+    { field: 'color', type: 'text', label: 'Accent', defaultValue: '#8b5cf6', input: { editorType: 'color', help: 'Chart accent color' } },
+  ],
+}
+
+const employees: EntitySchema = {
+  name: 'employees',
+  label: 'Employee',
+  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: 'ssn', type: 'text', label: 'SSN', input: { editorType: 'mask', mask: '###-##-####', help: 'US tax identifier' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country' } },
+    { field: 'deptId', type: 'relation', label: 'Department', relation: { entity: 'departments', foreignKey: 'deptId', labelField: 'name' } },
+    { field: 'level', type: 'enum', options: [
+      { value: 'junior', label: 'Junior', color: '#94a3b8' },
+      { value: 'mid', label: 'Mid', color: '#0ea5e9' },
+      { value: 'senior', label: 'Senior', color: '#6366f1' },
+      { value: 'lead', label: 'Lead', color: '#10b981' },
+    ] },
+    { field: 'skills', type: 'text', label: 'Skills', input: { editorType: 'chips', help: 'Key skills and specialties' } },
+    { field: 'performance', type: 'number', label: 'Performance', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 review score' } },
+    { field: 'status', type: 'enum', defaultValue: 'active', options: [
+      { value: 'active', label: 'Active', color: '#10b981' },
+      { value: 'on_leave', label: 'On leave', color: '#f59e0b' },
+      { value: 'terminated', label: 'Terminated', color: '#ef4444' },
+    ] },
+    { field: 'salary', type: 'number', label: 'Salary ($)', min: 0 },
+    // Derived: fully-loaded cost including benefits and overhead (display-only).
+    { field: 'annualCost', type: 'number', label: 'Annual cost ($)', readonly: true, formula: 'salary * 1.3' },
+    { field: 'hireDate', type: 'date', label: 'Hire date' },
+    { field: 'portalPassword', type: 'text', label: 'Portal password', minLength: 8, hidden: { grid: true }, input: { editorType: 'password', help: 'Employee self-service login' } },
+  ],
+}
+
+const timeOff: EntitySchema = {
+  name: 'timeOff',
+  label: 'Time off',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'employeeId', type: 'relation', label: 'Employee', relation: { entity: 'employees', foreignKey: 'employeeId', labelField: 'name' } },
+    { field: 'type', type: 'enum', required: true, options: [
+      { value: 'vacation', label: 'Vacation', color: '#0ea5e9' },
+      { value: 'sick', label: 'Sick', color: '#ef4444' },
+      { value: 'personal', label: 'Personal', color: '#f59e0b' },
+    ] },
+    { field: 'startDate', type: 'date', label: 'Start date', required: true },
+    { field: 'endDate', type: 'date', label: 'End date' },
+    { field: 'days', type: 'number', label: 'Days', min: 0 },
+    { field: 'status', type: 'enum', defaultValue: 'requested', options: [
+      { value: 'requested', label: 'Requested', color: '#94a3b8' },
+      { value: 'approved', label: 'Approved', color: '#10b981' },
+      { value: 'rejected', label: 'Rejected', color: '#ef4444' },
+    ] },
+  ],
+}
+
+const seed = {
+  departments: [
+    { id: 'dp0', name: 'Executive', parentId: '', location: 'United States', budget: 400000, headcount: 4, color: '#334155' },
+    { id: 'dp1', name: 'Engineering', parentId: 'dp0', location: 'United States', budget: 1800000, headcount: 42, color: '#6366f1' },
+    { id: 'dp2', name: 'Sales', parentId: 'dp0', location: 'United Kingdom', budget: 950000, headcount: 28, color: '#10b981' },
+    { id: 'dp3', name: 'Marketing', parentId: 'dp2', location: 'Germany', budget: 620000, headcount: 16, color: '#f59e0b' },
+    { id: 'dp4', name: 'Finance', parentId: 'dp0', location: 'United States', budget: 540000, headcount: 12, color: '#0ea5e9' },
+    { id: 'dp5', name: 'People Ops', parentId: 'dp0', location: 'Canada', budget: 380000, headcount: 9, color: '#8b5cf6' },
+  ],
+  employees: [
+    { id: 'em1', name: 'Ada Lovelace', email: 'ada@company.com', phone: '+1 (415) 555-0101', ssn: '123-45-6789', country: 'United States', deptId: 'dp1', level: 'lead', skills: ['Architecture', 'Leadership', 'Rust'], performance: 5, status: 'active', salary: 165000, hireDate: '2026-01-06', portalPassword: 'lovelace-01' },
+    { id: 'em2', name: 'Alan Turing', email: 'alan@company.com', phone: '+44 20 7946 0102', ssn: '234-56-7890', country: 'United Kingdom', deptId: 'dp1', level: 'senior', skills: ['Cryptography', 'Python'], performance: 5, status: 'active', salary: 142000, hireDate: '2026-01-20', portalPassword: 'turing-4102' },
+    { id: 'em3', name: 'Grace Hopper', email: 'grace@company.com', phone: '+1 (312) 555-0103', ssn: '345-67-8901', country: 'United States', deptId: 'dp2', level: 'mid', skills: ['Compilers', 'Mentoring'], performance: 4, status: 'on_leave', salary: 98000, hireDate: '2026-02-03', portalPassword: 'hopper-cobol' },
+    { id: 'em4', name: 'Linus Torvalds', email: 'linus@company.com', phone: '+1 (650) 555-0104', ssn: '456-78-9012', country: 'Finland', deptId: 'dp1', level: 'senior', skills: ['Kernel', 'Git', 'C'], performance: 4, status: 'active', salary: 138000, hireDate: '2026-02-17', portalPassword: 'torvalds-git' },
+    { id: 'em5', name: 'Barbara Liskov', email: 'barbara@company.com', phone: '+1 (617) 555-0105', ssn: '567-89-0123', country: 'United States', deptId: 'dp3', level: 'junior', skills: ['Research', 'Writing'], performance: 3, status: 'active', salary: 72000, hireDate: '2026-03-02', portalPassword: 'liskov-2026' },
+    { id: 'em6', name: 'Katherine Johnson', email: 'kj@company.com', phone: '+1 (757) 555-0106', ssn: '678-90-1234', country: 'United States', deptId: 'dp4', level: 'mid', skills: ['Analytics', 'Forecasting'], performance: 2, status: 'terminated', salary: 89000, hireDate: '2026-03-16', portalPassword: 'johnson-nasa' },
+    { id: 'em7', name: 'Margaret Hamilton', email: 'mh@company.com', phone: '+1 (212) 555-0107', ssn: '789-01-2345', country: 'United States', deptId: 'dp5', level: 'lead', skills: ['Systems', 'Reliability', 'Leadership'], performance: 5, status: 'active', salary: 151000, hireDate: '2026-04-01', portalPassword: 'hamilton-apollo' },
+  ],
+  timeOff: [
+    { id: 'to1', employeeId: 'em1', type: 'vacation', startDate: '2026-07-06', endDate: '2026-07-10', days: 5, status: 'approved' },
+    { id: 'to2', employeeId: 'em3', type: 'sick', startDate: '2026-06-15', endDate: '2026-06-17', days: 3, status: 'approved' },
+    { id: 'to3', employeeId: 'em2', type: 'personal', startDate: '2026-07-21', endDate: '2026-07-21', days: 1, status: 'requested' },
+    { id: 'to4', employeeId: 'em5', type: 'vacation', startDate: '2026-08-03', endDate: '2026-08-12', days: 8, status: 'rejected' },
+    { id: 'to5', employeeId: 'em4', type: 'sick', startDate: '2026-06-22', endDate: '2026-06-23', days: 2, status: 'approved' },
+    { id: 'to6', employeeId: 'em7', type: 'vacation', startDate: '2026-09-07', endDate: '2026-09-10', days: 4, status: 'requested' },
+  ],
+}
+
+// Employee grid formatting: level + status pills, plus numeric thresholds
+// (under-performers red, top reviews green + bold, six-figure salaries bold) -
+// data-driven color, not just status pills.
+const empFormats: FormatRule[] = [
+  ...statusPills(employees, 'level'),
+  ...statusPills(employees, 'status'),
+  { field: 'performance', op: 'lt', value: 3, color: '#dc2626' },
+  { field: 'performance', op: 'gte', value: 5, color: '#16a34a', bold: true },
+  { field: 'salary', op: 'gte', value: 150000, bold: true },
+]
+
+// Time-off grid formatting: type + status pills for a triage-ready request list.
+const timeOffFormats: FormatRule[] = [
+  ...statusPills(timeOff, 'type'),
+  ...statusPills(timeOff, 'status'),
+]
+
+export const hr: SampleApp = {
+  id: 'hr',
+  name: 'HR',
+  description: 'Employees, departments and time off - headcount and time-off dashboards (payroll KPI sparkline + target, performance gauge, level/status breakdowns, a level x status pivot, tabs, a time-off area trend), filtered status-pill grids with row actions, master/detail, and rich edit forms (phone, SSN mask, country, skills chips, performance rating, password).',
+  emoji: '\u{1F465}',
+  accent: '#8b5cf6',
+  build: () => {
+    const departmentRows = pad(departments, seed.departments, 10)
+    const deptPool = ids(departmentRows)
+    const employeeRows = pad(employees, seed.employees, 32, { deptId: deptPool })
+    const employeePool = ids(employeeRows)
+    const timeOffRows = pad(timeOff, seed.timeOff, 28, { employeeId: employeePool })
+    return project({
+      title: 'People Ops',
+      brand: 'People Ops',
+      accent: '#8b5cf6',
+      preset: 'fluent',
+      footer: '',
+      entities: [departments, employees, timeOff],
+      seed: { departments: departmentRows, employees: employeeRows, timeOff: timeOffRows },
+      screens: [
+        // Headcount dashboard: KPI cards (a payroll card with a sparkline over hire
+        // dates + a $1.5M target, compact-formatted), a performance-rating gauge (0-5),
+        // payroll + headcount breakdowns by level and status, a tabbed view, a level x
+        // status payroll pivot, and a status-pill employee grid with inline edit.
+        dashScreen(employees, { id: 'headcount', title: 'Headcount', order: 0 }, [
+          { kpi: 'Headcount', reduce: 'count', span: 1 },
+          { kpi: 'Total payroll', measure: 'salary', reduce: 'sum', format: 'compact', trendField: 'hireDate', trendReduce: 'sum', target: 1500000, span: 1 },
+          { kpi: 'Avg salary', measure: 'salary', reduce: 'avg', format: 'compact', span: 1 },
+          { gauge: 'Avg performance', measure: 'performance', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'level', measure: 'salary', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'level', reduce: 'count', type: 'bar', span: 2 },
+          { tabs: [
+            { label: 'Payroll by level', tiles: [{ chart: 'level', measure: 'salary', reduce: 'sum', type: 'bar' }] },
+            { label: 'Headcount by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 1 },
+          { pivot: { rows: ['level'], cols: ['status'], measure: 'salary', aggregate: 'sum' }, span: 3 },
+          { grid: true, format: empFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Time-off dashboard: request + days KPIs, an average-days gauge, a days-booked
+        // area trend over start dates, type/status breakdowns, a faceted filter, and a
+        // grid with type + status pills and inline edit actions.
+        dashScreen(timeOff, { id: 'timeoff', title: 'Time off', order: 1 }, [
+          { kpi: 'Requests', reduce: 'count', span: 1 },
+          { kpi: 'Days booked', measure: 'days', reduce: 'sum', span: 1 },
+          { kpi: 'Avg days', measure: 'days', reduce: 'avg', span: 1 },
+          { gauge: 'Avg days per request', measure: 'days', reduce: 'avg', min: 0, max: 20, unit: 'd', span: 1 },
+          { chart: 'startDate', measure: 'days', reduce: 'sum', type: 'area', span: 3 },
+          { chart: 'type', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'status', reduce: 'count', type: 'bar', span: 2 },
+          { filter: ['type', 'status'], span: 3 },
+          { grid: true, format: timeOffFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Employee 360: a full record page (header with the department subtitle, a
+        // status pill and salary/performance tiles) plus a time-off timeline tab.
+        detailScreen(employees, { id: 'employee-360', title: 'Employee 360', order: 2 }, {
+          titleField: 'name', subtitleField: 'deptId', statusField: 'status', metricFields: ['salary', 'performance'],
+          related: [{ entity: 'timeOff', foreignKey: 'employeeId', label: 'Time off', titleField: 'type', dateField: 'startDate', statusField: 'status' }],
+        }),
+        screen(departments, 'master-detail', { id: 'departments', title: 'Departments', order: 3, child: employees, foreignKey: 'deptId' }),
+        formScreen(employees, { id: 'employees', title: 'Employees', order: 4 }, undefined, { format: empFormats, summaries: true, rowActions: [{ kind: 'edit' }], rowLink: { screen: 'employee-360', sourceField: 'id', targetField: 'id' } }, ['deptId', 'level', 'status']),
+        formScreen(timeOff, { id: 'requests', title: 'Requests', order: 5 }, undefined, { format: timeOffFormats, summaries: true }, ['employeeId', 'type', 'status']),
+        // Org chart: the department hierarchy as a collapsible tree (parentId ->
+        // id, self-referential), beside the department grid.
+        dashScreen(departments, { id: 'org', title: 'Org chart', order: 6 }, [
+          { tree: { labelField: 'name', parentField: 'parentId' }, span: 3 },
+          { grid: true, summaries: true, span: 3 },
+        ]),
+      ],
+    })
+  },
+}

package/src/studio/samples/index.ts

@@ -0,0 +1,55 @@
+/**
+ * The sample-app gallery: ready-made, polished `StudioProject`s a user loads to
+ * see a beautiful working multi-entity app in a couple of clicks, then tweaks or
+ * rebinds to their own backend. Each is plain data (entities + screens + curated
+ * seed + theme), so it round-trips and generates like any hand-built project.
+ */
+import type { SampleApp } from './shared.js'
+import { crm } from './crm.js'
+import { ecommerce } from './ecommerce.js'
+import { projectTracker } from './projects.js'
+import { support } from './support.js'
+import { subscriptions } from './subscriptions.js'
+import { invoicing } from './invoicing.js'
+import { inventory } from './inventory.js'
+import { ats } from './ats.js'
+import { hr } from './hr.js'
+import { clinic } from './clinic.js'
+import { school } from './school.js'
+import { events } from './events.js'
+import { restaurant } from './restaurant.js'
+import { realEstate } from './realestate.js'
+import { fleet } from './fleet.js'
+import { gym } from './gym.js'
+import { library } from './library.js'
+import { insurance } from './insurance.js'
+
+export type { SampleApp } from './shared.js'
+export { liveDataSamples, getLiveDataSample } from './live-data.js'
+
+/** All shipped sample apps, in gallery order. */
+export const sampleApps: SampleApp[] = [
+  crm,
+  ecommerce,
+  subscriptions,
+  invoicing,
+  inventory,
+  support,
+  ats,
+  hr,
+  projectTracker,
+  clinic,
+  school,
+  events,
+  restaurant,
+  realEstate,
+  fleet,
+  gym,
+  library,
+  insurance,
+]
+
+/** Look up a sample app by id (the `--template` value). */
+export function getSampleApp(id: string): SampleApp | undefined {
+  return sampleApps.find((s) => s.id === id)
+}