@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/sample-data.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { generateValue, generateRows } from './sample-data.js'
+import type { EntityField } from '../schema.js'
+
+const f = (over: Partial<EntityField>): EntityField => ({ field: 'x', type: 'text', ...over } as EntityField)
+
+describe('generateValue - realistic, field-name aware', () => {
+  it('emails look like emails, derived from a person', () => {
+    const v = generateValue(f({ field: 'email', type: 'text' }), 0)
+    expect(String(v)).toMatch(/^[a-z.]+@[a-z.]+$/)
+  })
+
+  it('name fields get a full person name (not "name 1")', () => {
+    const v = String(generateValue(f({ field: 'name', type: 'text' }), 0))
+    expect(v).toMatch(/^\w+ [\w-]+/)
+    expect(v).not.toMatch(/\bname 1\b/i)
+  })
+
+  it('company-ish fields get a company', () => {
+    expect(['company', 'vendor', 'client', 'organization'].every((n) => /[A-Z]/.test(String(generateValue(f({ field: n }), 1))))).toBe(true)
+  })
+
+  it('currency-ish numbers use realistic amounts, not i*25', () => {
+    const total = generateValue(f({ field: 'total', type: 'number' }), 0)
+    expect(typeof total).toBe('number')
+    expect(total).toBeGreaterThan(50)
+  })
+
+  it('quantity-ish numbers stay small', () => {
+    const qty = generateValue(f({ field: 'quantity', type: 'number' }), 3) as number
+    expect(qty).toBeGreaterThan(0)
+    expect(qty).toBeLessThanOrEqual(50)
+  })
+
+  it('enum/options fields cycle their options', () => {
+    const field = f({ field: 'status', type: 'enum', options: [{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }] })
+    expect(generateValue(field, 0)).toBe('a')
+    expect(generateValue(field, 1)).toBe('b')
+    expect(generateValue(field, 2)).toBe('a')
+  })
+
+  it('dates are ISO; datetime carries time', () => {
+    expect(String(generateValue(f({ field: 'created', type: 'date' }), 0))).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+    expect(String(generateValue(f({ field: 'created', type: 'datetime' }), 0))).toMatch(/^\d{4}-\d{2}-\d{2}T/)
+  })
+
+  it('is deterministic across calls', () => {
+    const a = generateValue(f({ field: 'name' }), 2)
+    const b = generateValue(f({ field: 'name' }), 2)
+    expect(a).toBe(b)
+  })
+
+  it('generateRows fills every field', () => {
+    const rows = generateRows([f({ field: 'id', type: 'number' }), f({ field: 'name' }), f({ field: 'email' })], 4)
+    expect(rows).toHaveLength(4)
+    expect(Object.keys(rows[0]!)).toEqual(['id', 'name', 'email'])
+  })
+})

package/src/studio/sample-data.ts

@@ -0,0 +1,200 @@
+/**
+ * Realistic sample-data generator - shared by the designer preview
+ * (`schema-designer.ts`) and the codegen seed (`emit-schema.ts`), so a Studio
+ * app looks *believable* out of the box (real-looking people, companies,
+ * amounts, dates, statuses) instead of `name 1` / `email 1` / `10, 20, 30`.
+ *
+ * Pure + node-safe (studio subtree: `.js` imports, types only, no Svelte / grid /
+ * DOM). DETERMINISTIC by (field, row index) - no `Math.random`, so previews and
+ * generated seed are stable across runs and don't churn tests or git diffs.
+ */
+import type { EntityField } from '../schema.js'
+
+// --- curated value pools ----------------------------------------------------
+
+const FIRST_NAMES = ['Ada', 'Alan', 'Grace', 'Linus', 'Barbara', 'Katherine', 'Donald', 'Margaret', 'Tim', 'Radia', 'Guido', 'Anita', 'Ken', 'Dorothy', 'Vint', 'Hedy']
+const LAST_NAMES = ['Lovelace', 'Turing', 'Hopper', 'Torvalds', 'Liskov', 'Johnson', 'Knuth', 'Hamilton', 'Berners-Lee', 'Perlman', 'van Rossum', 'Borg', 'Thompson', 'Vaughan', 'Cerf', 'Lamarr']
+const COMPANIES = ['Acme Corp', 'Globex', 'Initech', 'Umbrella', 'Soylent', 'Hooli', 'Stark Industries', 'Wayne Enterprises', 'Cyberdyne', 'Wonka Industries', 'Aperture', 'Tyrell Corp', 'Massive Dynamic', 'Pied Piper', 'Vandelay', 'Gekko & Co']
+const PRODUCTS = ['Aeron Chair', 'Standing Desk', 'Mechanical Keyboard', 'Noise-Cancelling Headphones', '4K Monitor', 'Webcam Pro', 'USB-C Hub', 'Ergonomic Mouse', 'Laptop Stand', 'Desk Lamp', 'Cable Organizer', 'Wireless Charger', 'Notebook', 'Water Bottle', 'Backpack', 'Coffee Mug']
+const CITIES = ['San Francisco', 'New York', 'London', 'Berlin', 'Toronto', 'Amsterdam', 'Sydney', 'Tokyo', 'Austin', 'Paris', 'Singapore', 'Dublin']
+const COUNTRIES = ['United States', 'United Kingdom', 'Germany', 'Canada', 'Australia', 'France', 'Japan', 'Netherlands', 'Ireland', 'Singapore', 'Spain', 'Sweden']
+const STREETS = ['Market St', 'Main St', 'Oak Ave', 'Elm St', 'Pine Rd', 'Maple Dr', '5th Ave', 'King St', 'Queen St', 'Broadway', 'High St', 'Park Ln']
+const WORDS = ['Standard', 'Premium', 'Basic', 'Advanced', 'Starter', 'Professional', 'Enterprise', 'Custom', 'General', 'Priority']
+const SENTENCES = [
+  'Follow up on the latest changes and confirm next steps.',
+  'Reviewed the proposal and shared feedback with the team.',
+  'Waiting on approval before moving to the next phase.',
+  'Everything looks good - ready to ship this week.',
+  'Blocked by a dependency; escalating to the owner.',
+  'Scheduled a call to walk through the requirements.',
+  'Updated the estimate after the scope changed.',
+  'Closed out the remaining items from last sprint.',
+]
+const COLORS = ['Black', 'White', 'Silver', 'Blue', 'Red', 'Green', 'Graphite', 'Gold']
+const DOMAINS = ['example.com', 'acme.io', 'globex.co', 'mail.dev', 'company.org', 'work.app']
+const CURRENCY_POOL = [1200, 340, 980, 4500, 220, 1750, 60, 8900, 430, 2600, 150, 3200, 720, 5400, 90, 1980]
+// Tag pools for `chips` (SvTagsInput) fields, chosen by field name.
+const SKILLS = ['TypeScript', 'React', 'Svelte', 'Python', 'Go', 'SQL', 'AWS', 'Figma', 'Rust', 'GraphQL', 'Docker', 'Kubernetes', 'Node.js', 'Leadership', 'Product', 'UX']
+const AMENITIES = ['Parking', 'Pool', 'Gym', 'Balcony', 'Garden', 'A/C', 'Heating', 'Elevator', 'Pet-friendly', 'Furnished', 'Laundry', 'Dishwasher', 'Fireplace', 'Garage']
+const DIET_TAGS = ['Vegan', 'Vegetarian', 'Gluten-free', 'Dairy-free', 'Nut-free', 'Halal', 'Kosher', 'Spicy', 'Organic', 'Keto']
+const TOPIC_TAGS = ['Keynote', 'Workshop', 'Networking', 'Panel', 'Q&A', 'Hands-on', 'Beginner', 'Advanced', 'Remote', 'Live']
+const HEX_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#8b5cf6', '#ec4899', '#14b8a6']
+
+// --- helpers ----------------------------------------------------------------
+
+function titleCase(s: string): string {
+  return s.replace(/[_-]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()).trim()
+}
+
+/** Stable small offset from a field name, so different fields don't align. */
+function offsetFor(name: string): number {
+  let h = 0
+  for (let i = 0; i < name.length; i++) h = (h + name.charCodeAt(i) * (i + 1)) % 997
+  return h
+}
+
+const pick = <T>(pool: readonly T[], i: number): T => pool[i % pool.length]!
+
+const firstName = (i: number) => pick(FIRST_NAMES, i)
+const lastName = (i: number) => pick(LAST_NAMES, i)
+const fullName = (i: number) => `${firstName(i)} ${lastName(i + 3)}`
+const slug = (s: string) => s.toLowerCase().replace(/[^a-z]+/g, '')
+
+/** A fixed "today" so date spreads are deterministic (no `new Date()`). */
+const BASE_YEAR = 2026
+const BASE_MONTH = 6 // July (0-based)
+const BASE_DAY = 14
+
+/** 2-4 distinct tags from the pool that best matches the field name. */
+function tagArray(name: string, i: number, off: number): string[] {
+  const pool = /skill|tech|stack|expert/.test(name) ? SKILLS
+    : /amenit|feature|facilit/.test(name) ? AMENITIES
+    : /diet|cuisine|allerg|food/.test(name) ? DIET_TAGS
+    : /topic|track|tag|interest|categor|label/.test(name) ? TOPIC_TAGS
+    : WORDS
+  const n = 2 + ((off + i) % 3) // 2-4 tags
+  const out = new Set<string>()
+  for (let k = 0; k < n; k++) out.add(pick(pool, off + i * 3 + k))
+  return [...out]
+}
+
+/** A masked code (VIN, plate, ISBN, SSN, ...) chosen by field name. */
+function maskedCode(name: string, n: number): string {
+  const d = (len: number, seed: number) => String(seed % Math.pow(10, len)).padStart(len, '0')
+  if (/vin/.test(name)) return `1HGCM${d(6, n * 7)}${String.fromCharCode(65 + (n % 26))}`
+  if (/plate|registration/.test(name)) return `${String.fromCharCode(65 + n % 26)}${String.fromCharCode(65 + (n + 3) % 26)}${String.fromCharCode(65 + (n + 7) % 26)}-${d(4, n * 13 + 1000)}`
+  if (/isbn/.test(name)) return `978-0-${d(5, n * 271 + 10000)}-${d(3, n * 7 + 100)}-${(n % 10)}`
+  if (/ssn/.test(name)) return `${d(3, n + 100)}-${d(2, n + 10)}-${d(4, n * 3 + 1000)}`
+  if (/ein|tax/.test(name)) return `${d(2, n + 10)}-${d(7, n * 137 + 1000000)}`
+  if (/zip|postal/.test(name)) return d(5, n * 37 + 10000)
+  return d(4, n + 1000)
+}
+
+function isoDate(offsetDays: number, withTime: boolean): string {
+  // Build a date by simple arithmetic off the fixed base (avoids `Date.now()`).
+  const dayOfYear = (BASE_MONTH * 30 + BASE_DAY) + offsetDays
+  const month = Math.max(0, Math.min(11, Math.floor(((dayOfYear % 360) + 360) % 360 / 30)))
+  const day = Math.max(1, Math.min(28, (((dayOfYear % 30) + 30) % 30) + 1))
+  const mm = String(month + 1).padStart(2, '0')
+  const dd = String(day).padStart(2, '0')
+  return withTime ? `${BASE_YEAR}-${mm}-${dd}T09:${String(10 + (offsetDays % 40)).padStart(2, '0')}:00Z` : `${BASE_YEAR}-${mm}-${dd}`
+}
+
+// --- the generator ----------------------------------------------------------
+
+/**
+ * A believable value for `field` on row `i` (0-based). Type drives the shape;
+ * the field NAME refines it (an `email` field gets an email, a `price` field
+ * gets a currency amount, a `status` field cycles a status pool).
+ */
+export function generateValue(field: EntityField, i: number): unknown {
+  const name = String(field.field).toLowerCase()
+  const off = offsetFor(name)
+  const j = i + off
+
+  // A field with explicit options (enum / select) always cycles its options.
+  if (field.options && field.options.length) return field.options[i % field.options.length]!.value
+
+  // The chosen editor refines the shape ahead of the base type (a `slider` field
+  // is a number 0-100, a `chips` field is a tag array, a `mask` field a code).
+  switch (field.input?.editorType) {
+    case 'chips':
+      return tagArray(name, i, off)
+    case 'mask':
+      return maskedCode(name, j)
+    case 'rating':
+      return 1 + (j % 5)
+    case 'slider': {
+      const lo = field.min ?? 0
+      const hi = field.max ?? 100
+      return lo + ((j * 7) % Math.max(1, hi - lo + 1))
+    }
+    case 'color':
+      return pick(HEX_COLORS, j)
+    case 'country':
+      return pick(COUNTRIES, j)
+    case 'phone':
+      return `+1 (${200 + (j % 700)}) ${String(100 + (j % 900)).padStart(3, '0')}-${String(1000 + (j % 9000)).padStart(4, '0')}`
+  }
+
+  switch (field.type) {
+    case 'relation':
+      return `${field.relation?.entity ?? 'ref'}-${i + 1}`
+    case 'boolean':
+      // active / enabled / paid / verified skew true; otherwise ~2/3 true.
+      return /inactive|archived|deleted|disabled/.test(name) ? i % 3 === 0 : i % 3 !== 0
+    case 'json':
+      return {}
+    case 'date':
+    case 'dateString':
+    case 'datetime': {
+      const withTime = field.type === 'datetime'
+      // created/joined in the past, due/expires in the future, else spread around now.
+      const dir = /due|expire|deadline|end|renew/.test(name) ? 1 : /created|joined|start|signed|opened|order/.test(name) ? -1 : (i % 2 ? 1 : -1)
+      return isoDate(dir * (5 + ((j * 7) % 90)), withTime)
+    }
+    case 'number': {
+      if (/price|amount|total|cost|salary|mrr|arr|revenue|balance|fee|value|budget|spent|paid|subtotal|tax/.test(name)) return pick(CURRENCY_POOL, j)
+      if (/qty|quantity|stock|count|units|seats|items|inventory/.test(name)) return 1 + (j % 50)
+      if (/age/.test(name)) return 22 + (j % 44)
+      if (/percent|discount|progress|score|rate|completion/.test(name)) return (j * 7) % 100
+      if (/year/.test(name)) return 2020 + (j % 7)
+      if (/rating|stars/.test(name)) return 1 + (j % 5)
+      return (i + 1) * 25
+    }
+    default: {
+      // text: refine heavily by field name.
+      if (/e-?mail/.test(name)) return `${slug(firstName(i))}.${slug(lastName(i + 3))}@${pick(DOMAINS, j)}`
+      if (/first.?name|given/.test(name)) return firstName(i)
+      if (/last.?name|surname|family/.test(name)) return lastName(i)
+      if (/full.?name|^name$|contact|customer|author|owner|assignee|manager|agent|member|person|lead|rep|user/.test(name)) return fullName(i)
+      if (/compan|organi|vendor|supplier|account|client|business|employer/.test(name)) return pick(COMPANIES, j)
+      if (/product|item|^sku$|part/.test(name)) return pick(PRODUCTS, j)
+      if (/city|town/.test(name)) return pick(CITIES, j)
+      if (/country|nation/.test(name)) return pick(COUNTRIES, j)
+      if (/state|province|region/.test(name)) return pick(CITIES, j + 2)
+      if (/address|street/.test(name)) return `${100 + ((j * 13) % 900)} ${pick(STREETS, j)}`
+      if (/phone|mobile|tel|fax/.test(name)) return `+1 (${200 + (j % 700)}) ${String(100 + (j % 900)).padStart(3, '0')}-${String(1000 + (j % 9000)).padStart(4, '0')}`
+      if (/url|website|link|site|domain/.test(name)) return `https://${slug(pick(COMPANIES, j))}.com`
+      if (/description|notes?|summary|comment|message|body|detail|remark/.test(name)) return pick(SENTENCES, j)
+      if (/subject|title|headline|task|name/.test(name)) return `${pick(WORDS, j)} ${pick(PRODUCTS, j + 1)}`
+      if (/status|stage|priority|category|tier|plan|role|department|type|kind|level|group/.test(name)) return pick(WORDS, j)
+      if (/color|colour/.test(name)) return pick(COLORS, j)
+      if (/code|ref|reference|invoice|^no$|number|order|ticket|^id$/.test(name)) {
+        const prefix = (name.match(/[a-z]{2,4}/)?.[0] ?? 'ref').toUpperCase().slice(0, 3)
+        return `${prefix}-${1000 + i * 7 + (off % 90)}`
+      }
+      // Fallback: a title-cased label + index (still readable).
+      return `${field.label ?? titleCase(field.field)} ${i + 1}`
+    }
+  }
+}
+
+/** Deterministic rows for a schema's fields (used by the designer preview). */
+export function generateRows(fields: ReadonlyArray<EntityField>, count = 6): Array<Record<string, unknown>> {
+  return Array.from({ length: count }, (_, i) => {
+    const row: Record<string, unknown> = {}
+    for (const f of fields) row[String(f.field)] = generateValue(f, i)
+    return row
+  })
+}

package/src/studio/samples/ats.ts

@@ -0,0 +1,202 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, boardScreen, calendarScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const jobs: EntitySchema = {
+  name: 'jobs',
+  label: 'Job',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'title', type: 'text', required: true, minLength: 3 },
+    { field: 'department', type: 'enum', required: true, options: [
+      { value: 'engineering', label: 'Engineering', color: '#6366f1' },
+      { value: 'design', label: 'Design', color: '#ec4899' },
+      { value: 'sales', label: 'Sales', color: '#f59e0b' },
+      { value: 'ops', label: 'Ops', color: '#0ea5e9' },
+    ] },
+    { field: 'location', type: 'text', label: 'Location', input: { editorType: 'country', help: 'Where the role is based' } },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'open', options: [
+      { value: 'open', label: 'Open', color: '#10b981' },
+      { value: 'on_hold', label: 'On hold', color: '#f59e0b' },
+      { value: 'closed', label: 'Closed', color: '#94a3b8' },
+    ] },
+    { field: 'openings', type: 'number', label: 'Openings', min: 0, max: 25, defaultValue: 1, input: { help: 'Headcount to fill' } },
+    { field: 'salaryMin', type: 'number', label: 'Salary min ($)', min: 0 },
+    { field: 'salaryMax', type: 'number', label: 'Salary max ($)', min: 0 },
+    // Derived: midpoint of the posted salary band (display-only).
+    { field: 'salaryMid', type: 'number', label: 'Salary mid ($)', readonly: true, formula: '(salaryMin + salaryMax) / 2' },
+    { field: 'hiringManager', type: 'text', label: 'Hiring manager' },
+    { field: 'postedDate', type: 'date', label: 'Posted date' },
+  ],
+}
+
+const candidates: EntitySchema = {
+  name: 'candidates',
+  label: 'Candidate',
+  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: 'country', type: 'text', label: 'Country', input: { editorType: 'country' } },
+    { field: 'source', type: 'enum', options: [
+      { value: 'referral', label: 'Referral', color: '#10b981' },
+      { value: 'linkedin', label: 'LinkedIn', color: '#0ea5e9' },
+      { value: 'website', label: 'Website', color: '#6366f1' },
+      { value: 'agency', label: 'Agency', color: '#f59e0b' },
+    ] },
+    { field: 'skills', type: 'text', label: 'Skills', input: { editorType: 'chips', help: 'Key skills / stack' } },
+    { field: 'rating', type: 'number', label: 'Rating', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 recruiter score' } },
+    { field: 'linkedin', type: 'text', label: 'LinkedIn', format: 'url', input: { placeholder: 'https://linkedin.com/in/…' } },
+    { field: 'portfolio', type: 'text', label: 'Portfolio', format: 'url', input: { placeholder: 'https://…' } },
+  ],
+}
+
+const applications: EntitySchema = {
+  name: 'applications',
+  label: 'Application',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'candidateId', type: 'relation', label: 'Candidate', relation: { entity: 'candidates', foreignKey: 'candidateId', labelField: 'name' } },
+    { field: 'jobId', type: 'relation', label: 'Job', relation: { entity: 'jobs', foreignKey: 'jobId', labelField: 'title' } },
+    { field: 'stage', type: 'enum', required: true, options: [
+      { value: 'applied', label: 'Applied', color: '#94a3b8' },
+      { value: 'screen', label: 'Screen', color: '#0ea5e9' },
+      { value: 'interview', label: 'Interview', color: '#6366f1' },
+      { value: 'offer', label: 'Offer', color: '#f59e0b' },
+      { value: 'hired', label: 'Hired', color: '#10b981' },
+      { value: 'rejected', label: 'Rejected', color: '#ef4444' },
+    ] },
+    { field: 'score', type: 'number', label: 'Score', min: 0, max: 100, defaultValue: 50, input: { editorType: 'slider', help: 'Overall fit 0-100' } },
+    { field: 'fit', type: 'number', label: 'Culture fit', min: 1, max: 5, input: { editorType: 'rating' } },
+    { field: 'appliedDate', type: 'date', label: 'Applied date' },
+    { field: 'interviewAt', type: 'datetime', label: 'Interview at', input: { editorType: 'datetime', help: 'Scheduled interview slot' } },
+  ],
+}
+
+// Application grid formatting: stage pills + score thresholds (strong green/bold,
+// weak red) - data-driven color beyond the pipeline status.
+const appFormats: FormatRule[] = [
+  ...statusPills(applications, 'stage'),
+  { field: 'score', op: 'gte', value: 80, color: '#16a34a', bold: true },
+  { field: 'score', op: 'lt', value: 50, color: '#dc2626' },
+]
+// Job grid formatting: status + department pills + urgent-openings bold.
+const jobFormats: FormatRule[] = [
+  ...statusPills(jobs, 'status'),
+  ...statusPills(jobs, 'department'),
+  { field: 'openings', op: 'gte', value: 3, bold: true },
+]
+// Candidate grid formatting: source pills + rating thresholds.
+const candidateFormats: FormatRule[] = [
+  ...statusPills(candidates, 'source'),
+  { field: 'rating', op: 'gte', value: 4, color: '#16a34a', bold: true },
+  { field: 'rating', op: 'lte', value: 2, color: '#dc2626' },
+]
+
+const seed = {
+  jobs: [
+    { id: 'jb1', title: 'Senior Frontend Engineer', department: 'engineering', location: 'United States', status: 'open', openings: 2, salaryMin: 140000, salaryMax: 180000, hiringManager: 'Sam Rivera', postedDate: '2026-06-02' },
+    { id: 'jb2', title: 'Product Designer', department: 'design', location: 'United Kingdom', status: 'open', openings: 1, salaryMin: 90000, salaryMax: 120000, hiringManager: 'Jamie Chen', postedDate: '2026-06-10' },
+    { id: 'jb3', title: 'Account Executive', department: 'sales', location: 'Germany', status: 'on_hold', openings: 3, salaryMin: 80000, salaryMax: 110000, hiringManager: 'Priya Patel', postedDate: '2026-05-18' },
+    { id: 'jb4', title: 'DevOps Engineer', department: 'engineering', location: 'Canada', status: 'open', openings: 1, salaryMin: 130000, salaryMax: 165000, hiringManager: 'Sam Rivera', postedDate: '2026-06-21' },
+    { id: 'jb5', title: 'Operations Manager', department: 'ops', location: 'Netherlands', status: 'closed', openings: 1, salaryMin: 85000, salaryMax: 115000, hiringManager: 'Jamie Chen', postedDate: '2026-04-30' },
+    { id: 'jb6', title: 'UX Researcher', department: 'design', location: 'Australia', status: 'open', openings: 1, salaryMin: 95000, salaryMax: 125000, hiringManager: 'Priya Patel', postedDate: '2026-06-27' },
+  ],
+  candidates: [
+    { id: 'cd1', name: 'Maya Fernandez', email: 'maya.fernandez@example.com', phone: '+1 (415) 555-0110', country: 'United States', source: 'referral', skills: ['React', 'TypeScript', 'GraphQL'], rating: 4, linkedin: 'https://linkedin.com/in/mayafernandez', portfolio: 'https://mayafernandez.dev' },
+    { id: 'cd2', name: 'Liam Chen', email: 'liam.chen@example.com', phone: '+44 20 7946 0111', country: 'United Kingdom', source: 'linkedin', skills: ['Svelte', 'Node.js'], rating: 5, linkedin: 'https://linkedin.com/in/liamchen', portfolio: 'https://liamchen.io' },
+    { id: 'cd3', name: 'Priya Nair', email: 'priya.nair@example.com', phone: '+91 22 5550 0112', country: 'India', source: 'website', skills: ['Figma', 'UX', 'Product'], rating: 4, linkedin: 'https://linkedin.com/in/priyanair', portfolio: 'https://priyanair.design' },
+    { id: 'cd4', name: 'Noah Williams', email: 'noah.williams@example.com', phone: '+1 (312) 555-0113', country: 'United States', source: 'agency', skills: ['Go', 'Docker', 'Kubernetes'], rating: 3, linkedin: 'https://linkedin.com/in/noahwilliams', portfolio: 'https://noahwilliams.dev' },
+    { id: 'cd5', name: 'Sofia Rossi', email: 'sofia.rossi@example.com', phone: '+39 06 5550 0114', country: 'Italy', source: 'linkedin', skills: ['Python', 'SQL', 'AWS'], rating: 5, linkedin: 'https://linkedin.com/in/sofiarossi', portfolio: 'https://sofiarossi.tech' },
+    { id: 'cd6', name: 'Ethan Brooks', email: 'ethan.brooks@example.com', phone: '+1 (206) 555-0115', country: 'Canada', source: 'referral', skills: ['Leadership', 'Product'], rating: 3, linkedin: 'https://linkedin.com/in/ethanbrooks', portfolio: 'https://ethanbrooks.co' },
+    { id: 'cd7', name: 'Amara Okafor', email: 'amara.okafor@example.com', phone: '+234 1 555 0116', country: 'Nigeria', source: 'website', skills: ['Rust', 'Go', 'AWS'], rating: 4, linkedin: 'https://linkedin.com/in/amaraokafor', portfolio: 'https://amaraokafor.dev' },
+  ],
+  applications: [
+    { id: 'ap1', candidateId: 'cd1', jobId: 'jb1', stage: 'interview', score: 82, fit: 4, appliedDate: '2026-06-05', interviewAt: '2026-07-08T09:30:00Z' },
+    { id: 'ap2', candidateId: 'cd2', jobId: 'jb1', stage: 'offer', score: 91, fit: 5, appliedDate: '2026-06-12', interviewAt: '2026-07-02T14:00:00Z' },
+    { id: 'ap3', candidateId: 'cd3', jobId: 'jb2', stage: 'screen', score: 74, fit: 4, appliedDate: '2026-06-15', interviewAt: '2026-07-11T10:00:00Z' },
+    { id: 'ap4', candidateId: 'cd4', jobId: 'jb3', stage: 'applied', score: 60, fit: 3, appliedDate: '2026-06-20', interviewAt: '2026-07-15T15:30:00Z' },
+    { id: 'ap5', candidateId: 'cd5', jobId: 'jb4', stage: 'hired', score: 95, fit: 5, appliedDate: '2026-05-28', interviewAt: '2026-06-18T11:00:00Z' },
+    { id: 'ap6', candidateId: 'cd6', jobId: 'jb1', stage: 'rejected', score: 48, fit: 2, appliedDate: '2026-06-08', interviewAt: '2026-06-25T13:00:00Z' },
+    { id: 'ap7', candidateId: 'cd7', jobId: 'jb6', stage: 'interview', score: 79, fit: 4, appliedDate: '2026-06-22', interviewAt: '2026-07-14T09:00:00Z' },
+    { id: 'ap8', candidateId: 'cd3', jobId: 'jb4', stage: 'screen', score: 68, fit: 3, appliedDate: '2026-06-25', interviewAt: '2026-07-16T16:00:00Z' },
+  ],
+}
+
+export const ats: SampleApp = {
+  id: 'ats',
+  name: 'Recruiting',
+  description: 'Jobs, candidates and an application pipeline - hiring + openings + candidate dashboards (score KPI sparkline + gauge, applications-over-time trend, department x status pivot, tabbed breakdown), status-pill grids with score/rating conditional formatting, filters, row actions, master/detail, and rich edit forms.',
+  emoji: '\u{1F4DD}',
+  accent: '#7c3aed',
+  build: () => {
+    const jobRows = pad(jobs, seed.jobs, 12)
+    const candidateRows = pad(candidates, seed.candidates, 20)
+    const jobPool = ids(jobRows)
+    const candidatePool = ids(candidateRows)
+    const applicationRows = pad(applications, seed.applications, 30, { jobId: jobPool, candidateId: candidatePool })
+    return project({
+      title: 'HireDesk',
+      brand: 'HireDesk',
+      accent: '#7c3aed',
+      preset: 'ag-alpine',
+      footer: '',
+      entities: [jobs, candidates, applications],
+      seed: { jobs: jobRows, candidates: candidateRows, applications: applicationRows },
+      screens: [
+        // Hiring pipeline: score KPI (sparkline over applied date) + a score gauge,
+        // stage breakdowns, an applications-over-time trend, a tabbed view, a filter,
+        // and a stage-pill grid with score conditional formatting.
+        dashScreen(applications, { id: 'overview', title: 'Pipeline', order: 0 }, [
+          { kpi: 'Applications', reduce: 'count', span: 1 },
+          { kpi: 'Avg score', measure: 'score', reduce: 'avg', trendField: 'appliedDate', trendReduce: 'avg', span: 1 },
+          { kpi: 'Top score', measure: 'score', reduce: 'max', span: 1 },
+          { gauge: 'Avg fit score', measure: 'score', reduce: 'avg', min: 0, max: 100, span: 1 },
+          { chart: 'stage', reduce: 'count', type: 'bar', span: 2 },
+          { chart: 'stage', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'appliedDate', reduce: 'count', type: 'area', span: 3 },
+          { tabs: [
+            { label: 'By stage', tiles: [{ chart: 'stage', reduce: 'count', type: 'bar' }] },
+            { label: 'Score by stage', tiles: [{ chart: 'stage', measure: 'score', reduce: 'avg', type: 'bar' }] },
+          ], span: 3 },
+          { filter: ['stage'], span: 3 },
+          { grid: true, format: appFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // The signature ATS view: a candidate pipeline as draggable Kanban columns
+        // by stage (Applied -> Hired), each card the candidate name + job + score.
+        boardScreen(applications, { id: 'pipeline-board', title: 'Board', order: 1 }, { groupBy: 'stage', titleField: 'candidateId', subtitleField: 'jobId', badgeField: 'score', filter: ['stage', 'jobId'] }),
+        // Openings: headcount KPIs, an openings gauge, department breakdowns, a
+        // department x status pivot, tabs, and a status-pill job grid.
+        dashScreen(jobs, { id: 'openings', title: 'Openings', order: 2 }, [
+          { kpi: 'Open roles', reduce: 'count', span: 1 },
+          { kpi: 'Total openings', measure: 'openings', reduce: 'sum', span: 1 },
+          { kpi: 'Avg salary', measure: 'salaryMax', reduce: 'avg', format: 'compact', span: 1 },
+          { gauge: 'Total openings', measure: 'openings', reduce: 'sum', min: 0, max: 30, span: 1 },
+          { chart: 'department', measure: 'openings', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { pivot: { rows: ['department'], cols: ['status'], measure: 'openings', aggregate: 'sum' }, span: 3 },
+          { tabs: [
+            { label: 'Openings by dept', tiles: [{ chart: 'department', measure: 'openings', reduce: 'sum', type: 'bar' }] },
+            { label: 'Roles by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: jobFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        detailScreen(jobs, { id: 'job-detail', title: 'Job detail', order: 3 }, {
+          titleField: 'title', subtitleField: 'department', statusField: 'status',
+          metricFields: ['openings', 'salaryMax'],
+          related: [{ entity: 'applications', foreignKey: 'jobId', label: 'Applications', titleField: 'candidateId', subtitleField: 'stage', dateField: 'appliedDate', statusField: 'stage' }],
+        }),
+        screen(jobs, 'master-detail', { id: 'jobs', title: 'Jobs', order: 4, child: applications, foreignKey: 'jobId', linkScreen: 'job-detail' }),
+        formScreen(applications, { id: 'applications', title: 'Applications', order: 5 }, undefined, { format: appFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['stage']),
+        formScreen(candidates, { id: 'candidates', title: 'Candidates', order: 6 }, undefined, { format: candidateFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['source']),
+        // Interview schedule: applications placed on a month calendar by their
+        // scheduled interview slot (card title resolves to the candidate name).
+        calendarScreen(applications, { id: 'interviews', title: 'Interviews', order: 7 }, { dateField: 'interviewAt', titleField: 'candidateId', filter: ['stage', 'jobId'] }),
+      ],
+    })
+  },
+}