@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/samples/samples.test.ts

@@ -0,0 +1,208 @@
+import { describe, it, expect } from 'vitest'
+import { compile } from 'svelte/compiler'
+import { sampleApps, getSampleApp } from './index.js'
+import { validateProject, parseProject, serializeProject } from '../project.js'
+import { emitStudioProject } from '../emit-project.js'
+
+describe('sample apps', () => {
+  it('ships a non-empty gallery with unique ids', () => {
+    expect(sampleApps.length).toBeGreaterThanOrEqual(4)
+    const ids = sampleApps.map((s) => s.id)
+    expect(new Set(ids).size).toBe(ids.length)
+    for (const s of sampleApps) {
+      expect(s.name).toBeTruthy()
+      expect(s.description).toBeTruthy()
+      expect(s.emoji).toBeTruthy()
+      expect(s.accent).toMatch(/^#[0-9a-f]{6}$/i)
+    }
+  })
+
+  it('getSampleApp resolves by id', () => {
+    expect(getSampleApp('crm')?.name).toBe('CRM')
+    expect(getSampleApp('nope')).toBeUndefined()
+  })
+
+  it('every app has a distinct visual identity (unique design-system preset)', () => {
+    const presets = sampleApps.map((s) => s.build().theme?.preset)
+    expect(presets.every(Boolean), 'an app is missing a theme preset').toBe(true)
+    // Distinct presets => each app reads as its own product, not a recolored sibling.
+    expect(new Set(presets).size, 'preset ids are not unique across apps').toBe(sampleApps.length)
+  })
+
+  it('ships a mix of dark-mode and top-nav apps for visual variety', () => {
+    const themes = sampleApps.map((s) => s.build().theme)
+    expect(themes.filter((t) => t?.mode === 'dark').length).toBeGreaterThanOrEqual(3)
+    expect(themes.filter((t) => t?.shell?.style === 'top-nav').length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('generated apps ship an app-chrome toolbar with a working quick screen-search', () => {
+    const layout = emitStudioProject(getSampleApp('crm')!.build()).find((f) => f.path.endsWith('+layout.svelte'))!.contents
+    expect(layout).toContain('sv-app__toolbar')
+    expect(layout).toContain('sv-app__search-in')
+    // The search is functional: a derived filter over the nav screens.
+    expect(layout).toContain('const results = $derived')
+    expect(layout).toContain('sv-app__avatar')
+  })
+
+  for (const sample of sampleApps) {
+    describe(sample.id, () => {
+      const project = sample.build()
+
+      it('is a valid project (no errors)', () => {
+        const errors = validateProject(project).filter((i) => i.level === 'error')
+        expect(errors, JSON.stringify(errors)).toHaveLength(0)
+      })
+
+      it('has entities, screens and curated seed', () => {
+        expect(project.entities.length).toBeGreaterThanOrEqual(2)
+        expect(project.screens.length).toBeGreaterThanOrEqual(3)
+        for (const e of project.entities) {
+          const src = project.dataSources?.[e.name]
+          expect(src?.kind).toBe('memory')
+          expect((src as { seed?: unknown[] }).seed?.length).toBeGreaterThan(0)
+        }
+      })
+
+      it('round-trips through parse/serialize', () => {
+        const again = parseProject(serializeProject(project))
+        expect(again.entities.map((e) => e.name)).toEqual(project.entities.map((e) => e.name))
+        expect(again.dataSources).toEqual(project.dataSources)
+      })
+
+      it('generates compiling Svelte pages + seeded data.ts', () => {
+        const files = emitStudioProject(project)
+        const data = files.find((f) => f.path.endsWith('src/lib/data.ts'))!
+        // Curated seed is baked in (a recognizable value from each app).
+        expect(data.contents).toContain('createInMemoryDataSource')
+        for (const f of files.filter((f) => f.path.endsWith('.svelte'))) {
+          expect(() => compile(f.contents, { filename: f.path, generate: 'client' }), f.path).not.toThrow()
+        }
+      })
+    })
+  }
+
+  // Wave 1: these apps get the full editor treatment (rich form controls +
+  // validation + computed fields). Guards against a regression that flattens a
+  // sample back to plain text/number fields.
+  // Every shipped sample now gets the full editor treatment. This guards against
+  // any app being flattened back to plain text/number fields.
+  const RICH_EDITOR_TYPES = new Set(['phone', 'country', 'mask', 'slider', 'rating', 'chips', 'color', 'datetime', 'password'])
+  for (const id of sampleApps.map((s) => s.id)) {
+    describe(`${id} (rich editors)`, () => {
+      const project = getSampleApp(id)!.build()
+      const allFields = project.entities.flatMap((e) => e.fields)
+
+      it('uses several rich form editors', () => {
+        const used = new Set(allFields.map((f) => f.input?.editorType).filter((t): t is string => !!t && RICH_EDITOR_TYPES.has(t)))
+        expect(used.size, [...used].join(',')).toBeGreaterThanOrEqual(4)
+      })
+
+      it('adds real validation + a computed field', () => {
+        expect(allFields.some((f) => f.required)).toBe(true)
+        expect(allFields.some((f) => typeof f.min === 'number' || typeof f.max === 'number')).toBe(true)
+        expect(allFields.some((f) => f.formula || f.computed)).toBe(true)
+      })
+
+      it('serializes editorType into the generated schema (so the edit panel renders them)', () => {
+        const files = emitStudioProject(project)
+        const schema = files.find((f) => f.path.endsWith('src/lib/schemas.ts'))!.contents
+        expect(schema).toContain('editorType')
+        // The computed formula compiles into a runtime `computed` assignment.
+        expect(schema).toMatch(/\.computed = \(row\)/)
+      })
+    })
+  }
+
+  // Flagships reworked into enterprise layouts: they must use the full visual
+  // palette (KPI cards + gauge + pivot + tabs) and a status-pill grid, not just
+  // "3 KPIs + bar + pie + grid".
+  const flatKinds = (p: ReturnType<(typeof sampleApps)[number]['build']>): Set<string> => {
+    const kinds = new Set<string>()
+    for (const s of p.screens) for (const b of s.blocks) kinds.add(b.config.kind)
+    return kinds
+  }
+  // EVERY shipped app must now be an enterprise layout, not just the flagships.
+  for (const id of sampleApps.map((s) => s.id)) {
+    describe(`${id} (enterprise layout)`, () => {
+      const project = getSampleApp(id)!.build()
+      it('uses gauge + pivot + tabs + kpi + chart blocks', () => {
+        const kinds = flatKinds(project)
+        for (const k of ['kpi', 'chart', 'gauge', 'pivot', 'tabs']) expect(kinds.has(k), `${id}: missing ${k}`).toBe(true)
+      })
+      it('has a KPI card with a sparkline trend or target', () => {
+        const kpis = project.screens.flatMap((s) => s.blocks).filter((b) => b.config.kind === 'kpi')
+        expect(kpis.some((b) => (b.config as { trendField?: string }).trendField || (b.config as { target?: number }).target != null)).toBe(true)
+      })
+      it('has a grid with conditional-format status pills', () => {
+        const grids = project.screens.flatMap((s) => s.blocks).filter((b) => b.config.kind === 'grid')
+        expect(grids.some((b) => ((b.config as { formatRules?: unknown[] }).formatRules?.length ?? 0) > 0)).toBe(true)
+      })
+      it('generated app imports SvGauge, SvPivotDesigner, SvTabs + an enhanced KPI card', () => {
+        const all = emitStudioProject(project).map((f) => f.contents).join('\n')
+        for (const c of ['SvGauge', 'SvPivotDesigner', 'SvTabs']) expect(all.includes(c), `${id}: missing ${c}`).toBe(true)
+        // A sparkline (trendField) or a "% of target" delta chip - either enhances the card.
+        expect(all.includes('kpi__spark') || all.includes('kpi__delta'), `${id}: no enhanced KPI card`).toBe(true)
+      })
+    })
+  }
+
+  describe('signature views', () => {
+    it('CRM Deal 360 emits SvRecordDetail with a resolved relation subtitle + a related timeline', () => {
+      const project = getSampleApp('crm')!.build()
+      const detail = project.screens.flatMap((s) => s.blocks).find((b) => b.config.kind === 'detail')
+      expect(detail, 'crm: no detail block').toBeTruthy()
+      const all = emitStudioProject(project).map((f) => f.contents).join('\n')
+      expect(all.includes('SvRecordDetail')).toBe(true)
+      const tag = all.match(/<SvRecordDetail[\s\S]*?\/>/)![0]
+      // The companyId relation subtitle resolves to the denormalized display column.
+      expect(tag).toContain('subtitleField="company"')
+      // The Activities related tab loads the child table and filters by the FK.
+      expect(tag).toContain('related={[')
+      expect(tag).toContain('foreignKey: "dealId"')
+      expect(all).toContain('load_md_activities_rows')
+    })
+
+    it('EVERY app has a detail page that emits SvRecordDetail reading ?id from the URL', () => {
+      for (const s of sampleApps) {
+        const project = s.build()
+        const detail = project.screens.flatMap((sc) => sc.blocks).find((b) => b.config.kind === 'detail')
+        expect(detail, `${s.id}: no detail block`).toBeTruthy()
+        const all = emitStudioProject(project).map((f) => f.contents).join('\n')
+        expect(all.includes('SvRecordDetail'), `${s.id}: no SvRecordDetail`).toBe(true)
+        expect(all.includes("selectedId={$page.url.searchParams.get('id')"), `${s.id}: detail not URL-addressable`).toBe(true)
+      }
+    })
+
+    it('EVERY app connects a view to its detail page (grid rowLink / board / calendar / master-detail drill)', () => {
+      for (const s of sampleApps) {
+        const detailIds = new Set(s.build().screens.filter((sc) => sc.blocks.some((b) => b.config.kind === 'detail')).map((sc) => sc.id))
+        const drills = s.build().screens.flatMap((sc) => sc.blocks).some((b) =>
+          (b.config.kind === 'grid' && b.config.rowLink && detailIds.has(b.config.rowLink.screen)) ||
+          ((b.config.kind === 'board' || b.config.kind === 'calendar') && b.config.openScreen != null && detailIds.has(b.config.openScreen)) ||
+          (b.config.kind === 'master-detail' && b.config.linkScreen != null && detailIds.has(b.config.linkScreen)))
+        expect(drills, `${s.id}: nothing drills into its detail page`).toBe(true)
+        // And the generated app actually navigates there.
+        const all = emitStudioProject(s.build()).map((f) => f.contents).join('\n')
+        expect(all.includes("import { goto }"), `${s.id}: no goto for drill-through`).toBe(true)
+      }
+    })
+
+    it('child relation title fields on detail timelines resolve to display columns', () => {
+      // clinic appointments titled by doctorId -> doctor; fleet trips by driverId -> driver.
+      for (const [id, title] of Object.entries({ clinic: 'doctor', fleet: 'driver' })) {
+        const all = emitStudioProject(getSampleApp(id)!.build()).map((f) => f.contents).join('\n')
+        const rel = all.match(/related=\{\[[\s\S]*?\]\}/)![0]
+        expect(rel, `${id}: child title not resolved`).toContain(`titleField: "${title}"`)
+      }
+    })
+
+    it('calendar apps resolve relation title fields to their display columns', () => {
+      const cases: Record<string, string> = { clinic: 'patient', gym: 'class', restaurant: 'table', fleet: 'driver' }
+      for (const [id, title] of Object.entries(cases)) {
+        const all = emitStudioProject(getSampleApp(id)!.build()).map((f) => f.contents).join('\n')
+        const tag = all.match(/<SvSchedule[\s\S]*?\/>/)![0]
+        expect(tag, `${id}: schedule title not resolved`).toContain(`titleField="${title}"`)
+      }
+    })
+  })
+})

package/src/studio/samples/school.ts

@@ -0,0 +1,197 @@
+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 courses: EntitySchema = {
+  name: 'courses',
+  label: 'Course',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'department', type: 'enum', label: 'Department', required: true, options: [
+      { value: 'cs', label: 'Computer Science', color: '#6366f1' },
+      { value: 'math', label: 'Mathematics', color: '#0ea5e9' },
+      { value: 'biology', label: 'Biology', color: '#10b981' },
+      { value: 'arts', label: 'Arts', color: '#ec4899' },
+    ] },
+    { field: 'credits', type: 'number', label: 'Credits', required: true, min: 0, max: 6, defaultValue: 3, input: { help: 'Credit hours awarded on completion' } },
+    { field: 'capacity', type: 'number', label: 'Capacity', required: true, min: 1, input: { help: 'Maximum seats per term' } },
+    { field: 'fee', type: 'number', label: 'Fee ($)', min: 0, defaultValue: 0, input: { prefix: '$', help: 'Tuition charged per seat' } },
+    { field: 'topics', type: 'text', label: 'Topics', input: { editorType: 'chips', help: 'Syllabus themes, e.g. Workshop / Hands-on' } },
+    { field: 'rating', type: 'number', label: 'Rating', min: 0, max: 5, defaultValue: 0, input: { editorType: 'rating', help: 'Average student rating' } },
+    { field: 'color', type: 'text', label: 'Catalog color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Swatch shown in the course catalog' } },
+    // Derived: projected tuition if every seat is filled (display-only, never stored).
+    { field: 'revenue', type: 'number', label: 'Revenue ($)', readonly: true, formula: 'fee * capacity' },
+    { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+  ],
+}
+
+const students: EntitySchema = {
+  name: 'students',
+  label: 'Student',
+  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: 'Primary contact number' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Country of residence' } },
+    { field: 'sisId', type: 'text', label: 'SIS number', input: { editorType: 'mask', mask: 'SIS-######', help: 'Student information system id' } },
+    { field: 'gpa', type: 'number', label: 'GPA', min: 0, max: 4, defaultValue: 0, input: { step: 0.1, precision: 2, help: 'Grade point average, 0 to 4' } },
+    { field: 'year', type: 'enum', label: 'Year', required: true, options: [
+      { value: 'freshman', label: 'Freshman', color: '#0ea5e9' },
+      { value: 'sophomore', label: 'Sophomore', color: '#6366f1' },
+      { value: 'junior', label: 'Junior', color: '#f59e0b' },
+      { value: 'senior', label: 'Senior', color: '#10b981' },
+    ] },
+    { field: 'enrolledAt', type: 'datetime', label: 'Enrolled at', input: { help: 'First matriculation date' } },
+    { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+  ],
+}
+
+const enrollments: EntitySchema = {
+  name: 'enrollments',
+  label: 'Enrollment',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'studentId', type: 'relation', label: 'Student', relation: { entity: 'students', foreignKey: 'studentId', labelField: 'name' } },
+    { field: 'courseId', type: 'relation', label: 'Course', relation: { entity: 'courses', foreignKey: 'courseId', labelField: 'name' } },
+    { field: 'term', type: 'enum', label: 'Term', required: true, options: [
+      { value: 'fall2025', label: 'Fall 2025', color: '#6366f1' },
+      { value: 'spring2026', label: 'Spring 2026', color: '#10b981' },
+      { value: 'summer2026', label: 'Summer 2026', color: '#f59e0b' },
+    ] },
+    { field: 'status', type: 'enum', label: 'Status', required: true, options: [
+      { value: 'enrolled', label: 'Enrolled', color: '#6366f1' },
+      { value: 'completed', label: 'Completed', color: '#10b981' },
+      { value: 'dropped', label: 'Dropped', color: '#ef4444' },
+    ] },
+    { field: 'grade', type: 'number', label: 'Grade', min: 0, max: 100, defaultValue: 0, input: { help: 'Final score, 0 to 100' } },
+    { field: 'attendance', type: 'number', label: 'Attendance (%)', min: 0, max: 100, defaultValue: 100, input: { editorType: 'slider', suffix: '%', help: 'Share of sessions attended' } },
+    // Derived: attendance-weighted final score (display-only, never stored).
+    { field: 'finalScore', type: 'number', label: 'Final score', readonly: true, formula: 'grade * attendance / 100' },
+    { field: 'enrolledOn', type: 'date', label: 'Enrolled on' },
+  ],
+}
+
+// Enrollment grid formatting: term + status pills, plus attendance/grade
+// thresholds (chronic absentees red, near-perfect attendance green + bold,
+// top grades bold) - data-driven color, not just status pills.
+const enrollmentFormats: FormatRule[] = [
+  ...statusPills(enrollments, 'status'),
+  ...statusPills(enrollments, 'term'),
+  { field: 'attendance', op: 'lt', value: 50, color: '#dc2626' },
+  { field: 'attendance', op: 'gte', value: 90, color: '#16a34a', bold: true },
+  { field: 'grade', op: 'gte', value: 90, bold: true },
+]
+
+// Course catalog formatting: department pills plus rating / capacity thresholds
+// (five-star courses green + bold, thin sections red).
+const courseFormats: FormatRule[] = [
+  ...statusPills(courses, 'department'),
+  { field: 'rating', op: 'gte', value: 5, color: '#16a34a', bold: true },
+  { field: 'capacity', op: 'lt', value: 40, color: '#dc2626' },
+]
+
+const seed = {
+  courses: [
+    { id: 'cr1', name: 'Intro to Algorithms', department: 'cs', credits: 4, capacity: 120, fee: 1200, topics: ['Beginner', 'Hands-on'], rating: 5, color: '#6366f1', active: true },
+    { id: 'cr2', name: 'Linear Algebra', department: 'math', credits: 3, capacity: 90, fee: 950, topics: ['Advanced'], rating: 4, color: '#0ea5e9', active: true },
+    { id: 'cr3', name: 'Molecular Biology', department: 'biology', credits: 4, capacity: 60, fee: 1400, topics: ['Workshop', 'Live'], rating: 4, color: '#10b981', active: true },
+    { id: 'cr4', name: 'Renaissance Painting', department: 'arts', credits: 2, capacity: 40, fee: 700, topics: ['Beginner'], rating: 3, color: '#ec4899', active: true },
+    { id: 'cr5', name: 'Data Structures', department: 'cs', credits: 4, capacity: 110, fee: 1250, topics: ['Advanced', 'Hands-on'], rating: 5, color: '#6366f1', active: true },
+    { id: 'cr6', name: 'Calculus III', department: 'math', credits: 3, capacity: 85, fee: 980, topics: ['Advanced'], rating: 4, color: '#0ea5e9', active: true },
+    { id: 'cr7', name: 'Genetics', department: 'biology', credits: 3, capacity: 70, fee: 1100, topics: ['Workshop'], rating: 4, color: '#10b981', active: true },
+    { id: 'cr8', name: 'Sculpture Studio', department: 'arts', credits: 2, capacity: 30, fee: 650, topics: ['Hands-on', 'Beginner'], rating: 3, color: '#ec4899', active: false },
+  ],
+  students: [
+    { id: 'st1', name: 'Liam Carter', email: 'liam.carter@campus.edu', phone: '+1 (415) 555-0101', country: 'United States', sisId: 'SIS-100234', gpa: 3.6, year: 'freshman', enrolledAt: '2025-09-01T09:00:00Z', active: true },
+    { id: 'st2', name: 'Emma Nguyen', email: 'emma.nguyen@campus.edu', phone: '+1 (416) 555-0102', country: 'Canada', sisId: 'SIS-100235', gpa: 3.9, year: 'sophomore', enrolledAt: '2024-09-02T09:00:00Z', active: true },
+    { id: 'st3', name: 'Noah Silva', email: 'noah.silva@campus.edu', phone: '+44 20 7946 0103', country: 'United Kingdom', sisId: 'SIS-100236', gpa: 3.4, year: 'junior', enrolledAt: '2023-09-01T09:00:00Z', active: true },
+    { id: 'st4', name: 'Ava Johansson', email: 'ava.johansson@campus.edu', phone: '+46 8 555 0104', country: 'Sweden', sisId: 'SIS-100237', gpa: 3.8, year: 'senior', enrolledAt: '2022-09-05T09:00:00Z', active: true },
+    { id: 'st5', name: 'Mateo Rossi', email: 'mateo.rossi@campus.edu', phone: '+39 06 5550105', country: 'Italy', sisId: 'SIS-100238', gpa: 3.1, year: 'sophomore', enrolledAt: '2024-09-03T09:00:00Z', active: true },
+    { id: 'st6', name: 'Isla Murphy', email: 'isla.murphy@campus.edu', phone: '+353 1 555 0106', country: 'Ireland', sisId: 'SIS-100239', gpa: 3.7, year: 'freshman', enrolledAt: '2025-09-02T09:00:00Z', active: true },
+    { id: 'st7', name: 'Kenji Watanabe', email: 'kenji.watanabe@campus.edu', phone: '+81 3 5550107', country: 'Japan', sisId: 'SIS-100240', gpa: 3.5, year: 'junior', enrolledAt: '2023-09-04T09:00:00Z', active: true },
+    { id: 'st8', name: 'Sofia Garcia', email: 'sofia.garcia@campus.edu', phone: '+34 91 555 0108', country: 'Spain', sisId: 'SIS-100241', gpa: 2.9, year: 'senior', enrolledAt: '2022-09-06T09:00:00Z', active: false },
+  ],
+  enrollments: [
+    { id: 'en1', studentId: 'st1', courseId: 'cr1', term: 'fall2025', status: 'enrolled', grade: 0, attendance: 92, enrolledOn: '2025-09-01' },
+    { id: 'en2', studentId: 'st2', courseId: 'cr2', term: 'spring2026', status: 'completed', grade: 88, attendance: 96, enrolledOn: '2026-01-15' },
+    { id: 'en3', studentId: 'st3', courseId: 'cr3', term: 'fall2025', status: 'completed', grade: 92, attendance: 90, enrolledOn: '2025-09-03' },
+    { id: 'en4', studentId: 'st4', courseId: 'cr4', term: 'fall2025', status: 'dropped', grade: 0, attendance: 40, enrolledOn: '2025-09-04' },
+    { id: 'en5', studentId: 'st5', courseId: 'cr1', term: 'spring2026', status: 'enrolled', grade: 0, attendance: 85, enrolledOn: '2026-01-16' },
+    { id: 'en6', studentId: 'st6', courseId: 'cr5', term: 'fall2025', status: 'completed', grade: 79, attendance: 88, enrolledOn: '2025-09-02' },
+    { id: 'en7', studentId: 'st3', courseId: 'cr6', term: 'spring2026', status: 'completed', grade: 84, attendance: 91, enrolledOn: '2026-01-14' },
+    { id: 'en8', studentId: 'st2', courseId: 'cr5', term: 'summer2026', status: 'enrolled', grade: 0, attendance: 78, enrolledOn: '2026-05-20' },
+    { id: 'en9', studentId: 'st7', courseId: 'cr7', term: 'fall2025', status: 'completed', grade: 81, attendance: 87, enrolledOn: '2025-09-05' },
+    { id: 'en10', studentId: 'st8', courseId: 'cr8', term: 'spring2026', status: 'dropped', grade: 0, attendance: 35, enrolledOn: '2026-01-18' },
+  ],
+}
+
+export const school: SampleApp = {
+  id: 'school',
+  name: 'School',
+  description: 'Students, courses and enrollments - enrollment + catalog dashboards (attendance sparkline + gauge, term/status breakdowns, a term x status pivot, tabbed views, faceted filters), status-pill enrollment grids with attendance/grade thresholds and row actions, courses master/detail, and rich edit forms (topic chips, course rating, catalog color, phone, country, SIS mask, GPA, enrollment datetime, attendance slider).',
+  emoji: '\u{1F393}',
+  accent: '#6366f1',
+  build: () => {
+    const courseRows = pad(courses, seed.courses, 12)
+    const studentRows = pad(students, seed.students, 22)
+    const enrollmentRows = pad(enrollments, seed.enrollments, 34, { studentId: ids(studentRows), courseId: ids(courseRows) })
+    return project({
+      title: 'Campus',
+      brand: 'Campus',
+      accent: '#6366f1',
+      preset: 'github',
+      navStyle: 'top-nav',
+      footer: '',
+      entities: [courses, students, enrollments],
+      seed: { courses: courseRows, students: studentRows, enrollments: enrollmentRows },
+      screens: [
+        // Enrollment dashboard: volume + quality KPIs (an attendance card that trends
+        // over enrollment dates), an attendance gauge, term/status breakdowns, a grade
+        // trend area, a tabbed breakdown, a term x status pivot, a filter, and an
+        // enrollment grid with term + status pills and attendance/grade thresholds.
+        dashScreen(enrollments, { id: 'enrollment', title: 'Enrollment', order: 0 }, [
+          { kpi: 'Enrollments', reduce: 'count', span: 1 },
+          { kpi: 'Avg grade', measure: 'grade', reduce: 'avg', span: 1 },
+          { kpi: 'Avg attendance', measure: 'attendance', reduce: 'avg', format: 'percent', trendField: 'enrolledOn', trendReduce: 'avg', span: 1 },
+          { gauge: 'Avg attendance', measure: 'attendance', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
+          { chart: 'term', reduce: 'count', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'enrolledOn', measure: 'grade', reduce: 'avg', type: 'area', span: 3 },
+          { tabs: [
+            { label: 'By term', tiles: [{ chart: 'term', reduce: 'count', type: 'bar' }] },
+            { label: 'By status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { pivot: { rows: ['term'], cols: ['status'], measure: 'grade', aggregate: 'avg' }, span: 3 },
+          { filter: ['term', 'status'], span: 3 },
+          { grid: true, format: enrollmentFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Catalog dashboard: course counts + capacity KPIs (a capacity card with a
+        // 1,000-seat target), an average-rating gauge, department breakdowns, a
+        // filter, and a course grid with department pills + rating/capacity thresholds.
+        dashScreen(courses, { id: 'catalog', title: 'Catalog', order: 1 }, [
+          { kpi: 'Courses', reduce: 'count', span: 1 },
+          { kpi: 'Total capacity', measure: 'capacity', reduce: 'sum', target: 1000, span: 1 },
+          { kpi: 'Avg credits', measure: 'credits', reduce: 'avg', span: 1 },
+          { gauge: 'Avg rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'department', measure: 'capacity', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'department', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'department', measure: 'fee', reduce: 'avg', type: 'bar', span: 2 },
+          { filter: ['department', 'active'], span: 1 },
+          { grid: true, format: courseFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        detailScreen(students, { id: 'student-360', title: 'Student 360', order: 2 }, {
+          titleField: 'name', subtitleField: 'email', statusField: 'year', metricFields: ['gpa'],
+          related: [{ entity: 'enrollments', foreignKey: 'studentId', label: 'Enrollments', titleField: 'courseId', subtitleField: 'grade', dateField: 'enrolledOn', statusField: 'status' }],
+        }),
+        screen(courses, 'master-detail', { id: 'courses', title: 'Courses', order: 3, child: enrollments, foreignKey: 'courseId' }),
+        formScreen(students, { id: 'students', title: 'Students', order: 4 }, undefined, { rowLink: { screen: 'student-360', sourceField: 'id', targetField: 'id' } }, ['year', 'country', 'active']),
+        formScreen(enrollments, { id: 'enrollments', title: 'Enrollments', order: 5 }, undefined, { format: enrollmentFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['term', 'status', 'studentId', 'courseId']),
+      ],
+    })
+  },
+}

package/src/studio/samples/seed-floor.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { sampleApps } from './index.js'
+
+/**
+ * A seed-density floor: every sample app must ship enough rows that its grids
+ * scroll and its charts / KPIs look substantial (a dashboard with 6 rows reads
+ * as unfinished). Guards against a sample regressing to a sparse curated seed.
+ */
+describe('sample seed density', () => {
+  const FLOOR = 40 // total curated/padded rows across all entities
+  const PRIMARY_FLOOR = 30 // the largest entity (the "fact" table) should scroll
+
+  for (const app of sampleApps) {
+    it(`${app.id} ships >= ${FLOOR} rows (largest entity >= ${PRIMARY_FLOOR})`, () => {
+      const p = app.build()
+      const counts = p.entities.map((e) => {
+        const src = p.dataSources?.[e.name] as { seed?: unknown[] } | undefined
+        return src?.seed?.length ?? 0
+      })
+      const total = counts.reduce((a, b) => a + b, 0)
+      expect(total, `${app.id}: only ${total} rows`).toBeGreaterThanOrEqual(FLOOR)
+      expect(Math.max(...counts), `${app.id}: largest entity too small`).toBeGreaterThanOrEqual(PRIMARY_FLOOR)
+    })
+  }
+})