@svgrid/enterprise 2.5.3 → 2.6.1

package/dist/studio/sample-data.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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';
+/**
+ * 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 declare function generateValue(field: EntityField, i: number): unknown;
+/** Deterministic rows for a schema's fields (used by the designer preview). */
+export declare function generateRows(fields: ReadonlyArray<EntityField>, count?: number): Array<Record<string, unknown>>;

package/dist/studio/sample-data.js

@@ -0,0 +1,207 @@
+// --- 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) {
+    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) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h + name.charCodeAt(i) * (i + 1)) % 997;
+    return h;
+}
+const pick = (pool, i) => pool[i % pool.length];
+const firstName = (i) => pick(FIRST_NAMES, i);
+const lastName = (i) => pick(LAST_NAMES, i);
+const fullName = (i) => `${firstName(i)} ${lastName(i + 3)}`;
+const slug = (s) => 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, i, off) {
+    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();
+    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, n) {
+    const d = (len, seed) => 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, withTime) {
+    // 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');
+    // Minutes must land in 00-59 even when offsetDays is negative (JS `%` keeps the
+    // sign, which would emit an invalid "T09:-2:00Z"). Normalise to a positive range.
+    const minute = 10 + ((((offsetDays % 40) + 40) % 40));
+    return withTime ? `${BASE_YEAR}-${mm}-${dd}T09:${String(minute).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, i) {
+    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, count = 6) {
+    return Array.from({ length: count }, (_, i) => {
+        const row = {};
+        for (const f of fields)
+            row[String(f.field)] = generateValue(f, i);
+        return row;
+    });
+}

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

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

package/dist/studio/samples/ats.js

@@ -0,0 +1,194 @@
+import { screen, formScreen, boardScreen, schedulerScreen, project, dashScreen, detailScreen, statusPills, pad, ids } from './shared.js';
+const jobs = {
+    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 = {
+    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 = {
+    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 = [
+    ...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 = [
+    ...statusPills(jobs, 'status'),
+    ...statusPills(jobs, 'department'),
+    { field: 'openings', op: 'gte', value: 3, bold: true },
+];
+// Candidate grid formatting: source pills + rating thresholds.
+const candidateFormats = [
+    ...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 = {
+    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).
+                schedulerScreen(applications, { id: 'interviews', title: 'Interviews', order: 7 }, { startField: 'interviewAt', titleField: 'candidateId', colorField: 'stage', initialView: 'week' }),
+            ],
+        });
+    },
+};

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

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

package/dist/studio/samples/clinic.js

@@ -0,0 +1,171 @@
+import { screen, formScreen, schedulerScreen, detailScreen, project, dashScreen, statusPills, pad, ids } from './shared.js';
+const doctors = {
+    name: 'doctors',
+    label: 'Doctor',
+    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: 'specialty', type: 'enum', label: 'Specialty', required: true, options: [
+                { value: 'gp', label: 'General Practice', color: '#6366f1' },
+                { value: 'cardiology', label: 'Cardiology', color: '#ef4444' },
+                { value: 'dermatology', label: 'Dermatology', color: '#f59e0b' },
+                { value: 'pediatrics', label: 'Pediatrics', color: '#10b981' },
+            ] },
+        { field: 'rating', type: 'number', label: 'Patient rating', min: 1, max: 5, defaultValue: 4, input: { editorType: 'rating', help: '1-5 average patient rating' } },
+        { field: 'calendarColor', type: 'text', label: 'Calendar color', input: { editorType: 'color', help: 'Color used on the schedule' } },
+    ],
+};
+const patients = {
+    name: 'patients',
+    label: 'Patient',
+    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: 'dob', type: 'date', label: 'Date of birth', required: true },
+        { field: 'bloodType', type: 'enum', label: 'Blood type', options: [
+                { value: 'O+', label: 'O+', color: '#ef4444' },
+                { value: 'O-', label: 'O-', color: '#f97316' },
+                { value: 'A+', label: 'A+', color: '#6366f1' },
+                { value: 'A-', label: 'A-', color: '#8b5cf6' },
+                { value: 'B+', label: 'B+', color: '#10b981' },
+                { value: 'B-', label: 'B-', color: '#14b8a6' },
+                { value: 'AB+', label: 'AB+', color: '#f59e0b' },
+                { value: 'AB-', label: 'AB-', color: '#eab308' },
+            ] },
+        { field: 'insuranceNumber', type: 'text', label: 'Insurance #', input: { editorType: 'mask', mask: 'AAA-######', placeholder: 'AAA-000000' } },
+        { field: 'allergies', type: 'text', label: 'Allergies', input: { editorType: 'chips', help: 'Known allergies' } },
+    ],
+};
+const appointments = {
+    name: 'appointments',
+    label: 'Appointment',
+    idField: 'id',
+    fields: [
+        { field: 'id', type: 'text', primaryKey: true, readonly: true },
+        { field: 'patientId', type: 'relation', label: 'Patient', required: true, relation: { entity: 'patients', foreignKey: 'patientId', labelField: 'name' } },
+        { field: 'doctorId', type: 'relation', label: 'Doctor', required: true, relation: { entity: 'doctors', foreignKey: 'doctorId', labelField: 'name' } },
+        { field: 'status', type: 'enum', label: 'Status', defaultValue: 'scheduled', options: [
+                { value: 'scheduled', label: 'Scheduled', color: '#6366f1' },
+                { value: 'completed', label: 'Completed', color: '#10b981' },
+                { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+                { value: 'no_show', label: 'No show', color: '#94a3b8' },
+            ] },
+        { field: 'scheduledAt', type: 'datetime', label: 'Scheduled at', required: true },
+        { field: 'durationMins', type: 'number', label: 'Duration (min)', min: 15, max: 120, defaultValue: 30, input: { editorType: 'slider', step: 15, help: 'Visit length in minutes' } },
+        { field: 'fee', type: 'number', label: 'Fee ($)', min: 0 },
+        // Derived: fee plus 8% tax (display-only, never seeded).
+        { field: 'total', type: 'number', label: 'Total w/ tax ($)', readonly: true, formula: 'fee * 1.08' },
+        { field: 'satisfaction', type: 'number', label: 'Satisfaction', min: 1, max: 5, input: { editorType: 'rating', help: '1-5 visit rating' } },
+    ],
+};
+// Appointment grid formatting: status pills plus numeric thresholds (low
+// satisfaction red, perfect scores green + bold, high-value fees bold) - data-driven
+// color, not just status pills.
+const apptFormats = [
+    ...statusPills(appointments, 'status'),
+    { field: 'satisfaction', op: 'lt', value: 3, color: '#dc2626' },
+    { field: 'satisfaction', op: 'gte', value: 5, color: '#16a34a', bold: true },
+    { field: 'fee', op: 'gte', value: 250, bold: true },
+];
+const seed = {
+    doctors: [
+        { id: 'dr1', name: 'Dr. Sarah Mendes', email: 'sarah.mendes@healthclinic.com', phone: '+1 (415) 555-0301', specialty: 'gp', rating: 5, calendarColor: '#6366f1' },
+        { id: 'dr2', name: 'Dr. James Whitfield', email: 'james.whitfield@healthclinic.com', phone: '+1 (415) 555-0302', specialty: 'cardiology', rating: 4, calendarColor: '#ef4444' },
+        { id: 'dr3', name: 'Dr. Aisha Rahman', email: 'aisha.rahman@healthclinic.com', phone: '+1 (650) 555-0303', specialty: 'dermatology', rating: 5, calendarColor: '#f59e0b' },
+        { id: 'dr4', name: 'Dr. Marcus Liang', email: 'marcus.liang@healthclinic.com', phone: '+1 (212) 555-0304', specialty: 'pediatrics', rating: 4, calendarColor: '#10b981' },
+        { id: 'dr5', name: 'Dr. Elena Popova', email: 'elena.popova@healthclinic.com', phone: '+1 (312) 555-0305', specialty: 'gp', rating: 3, calendarColor: '#3b82f6' },
+        { id: 'dr6', name: 'Dr. Thomas Becker', email: 'thomas.becker@healthclinic.com', phone: '+1 (206) 555-0306', specialty: 'cardiology', rating: 4, calendarColor: '#8b5cf6' },
+    ],
+    patients: [
+        { id: 'pt1', name: 'Oliver Grant', email: 'oliver.grant@example.com', phone: '+1 (415) 555-0201', dob: '1984-03-12', bloodType: 'O+', insuranceNumber: 'AET-100482', allergies: ['Penicillin'] },
+        { id: 'pt2', name: 'Maya Fernandez', email: 'maya.fernandez@example.com', phone: '+1 (415) 555-0202', dob: '1991-11-04', bloodType: 'A-', insuranceNumber: 'BCX-204817', allergies: ['Peanuts', 'Latex'] },
+        { id: 'pt3', name: 'Noah Kim', email: 'noah.kim@example.com', phone: '+1 (650) 555-0203', dob: '2015-06-22', bloodType: 'B+', insuranceNumber: 'CDN-330298', allergies: [] },
+        { id: 'pt4', name: 'Sophia Rossi', email: 'sophia.rossi@example.com', phone: '+1 (212) 555-0204', dob: '1978-09-30', bloodType: 'AB+', insuranceNumber: 'DEF-419926', allergies: ['Aspirin'] },
+        { id: 'pt5', name: 'Ethan Walsh', email: 'ethan.walsh@example.com', phone: '+1 (312) 555-0205', dob: '2001-01-18', bloodType: 'O-', insuranceNumber: 'EGH-528140', allergies: ['Pollen', 'Dust'] },
+        { id: 'pt6', name: 'Amara Okafor', email: 'amara.okafor@example.com', phone: '+1 (206) 555-0206', dob: '1996-07-08', bloodType: 'A+', insuranceNumber: 'FIJ-610355', allergies: ['Shellfish'] },
+    ],
+    appointments: [
+        { id: 'ap1', patientId: 'pt1', doctorId: 'dr1', status: 'completed', scheduledAt: '2026-06-02T09:30:00Z', durationMins: 30, fee: 120, satisfaction: 5 },
+        { id: 'ap2', patientId: 'pt2', doctorId: 'dr2', status: 'scheduled', scheduledAt: '2026-07-18T14:00:00Z', durationMins: 45, fee: 260, satisfaction: 4 },
+        { id: 'ap3', patientId: 'pt3', doctorId: 'dr4', status: 'completed', scheduledAt: '2026-06-14T10:15:00Z', durationMins: 20, fee: 90, satisfaction: 5 },
+        { id: 'ap4', patientId: 'pt4', doctorId: 'dr3', status: 'cancelled', scheduledAt: '2026-05-27T11:00:00Z', durationMins: 30, fee: 150, satisfaction: 3 },
+        { id: 'ap5', patientId: 'pt5', doctorId: 'dr1', status: 'no_show', scheduledAt: '2026-06-09T15:30:00Z', durationMins: 30, fee: 120, satisfaction: 2 },
+        { id: 'ap6', patientId: 'pt6', doctorId: 'dr6', status: 'scheduled', scheduledAt: '2026-07-21T08:45:00Z', durationMins: 60, fee: 280, satisfaction: 4 },
+        { id: 'ap7', patientId: 'pt1', doctorId: 'dr5', status: 'completed', scheduledAt: '2026-06-30T13:00:00Z', durationMins: 25, fee: 110, satisfaction: 5 },
+        { id: 'ap8', patientId: 'pt4', doctorId: 'dr2', status: 'completed', scheduledAt: '2026-07-03T16:20:00Z', durationMins: 45, fee: 260, satisfaction: 4 },
+    ],
+};
+export const clinic = {
+    id: 'clinic',
+    name: 'Clinic',
+    description: 'Patients, doctors and appointments - visits, revenue and satisfaction dashboards (KPI sparkline + target, satisfaction gauge, status/specialty charts, a scheduled-at revenue trend, a pivot, and a tabbed breakdown), filtered status-pill grids with row actions, patient master/detail, and rich edit forms (phone, blood-type, insurance mask, allergy chips, duration slider, ratings).',
+    emoji: '\u{1FA7A}',
+    accent: '#ef4444',
+    build: () => {
+        const doctorRows = pad(doctors, seed.doctors, 18);
+        const patientRows = pad(patients, seed.patients, 60);
+        const appointmentRows = pad(appointments, seed.appointments, 90, { patientId: ids(patientRows), doctorId: ids(doctorRows) });
+        return project({
+            title: 'HealthClinic',
+            brand: 'HealthClinic',
+            accent: '#ef4444',
+            preset: 'material',
+            footer: '',
+            entities: [doctors, patients, appointments],
+            seed: { doctors: doctorRows, patients: patientRows, appointments: appointmentRows },
+            screens: [
+                // Appointments dashboard: visit + revenue KPIs (a revenue card that trends
+                // over scheduledAt with a $2k target), a satisfaction gauge (0-5), status
+                // revenue/volume charts, a scheduled-at revenue area trend, a fee-by-status
+                // pivot, a tabbed breakdown, a status filter, and a status-pill grid.
+                dashScreen(appointments, { id: 'overview', title: 'Overview', order: 0 }, [
+                    { kpi: 'Appointments', reduce: 'count', span: 1 },
+                    { kpi: 'Total revenue', measure: 'fee', reduce: 'sum', format: 'currency', trendField: 'scheduledAt', trendReduce: 'sum', target: 2000, span: 1 },
+                    { kpi: 'Avg fee', measure: 'fee', reduce: 'avg', format: 'currency', span: 1 },
+                    { gauge: 'Avg satisfaction', measure: 'satisfaction', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'status', measure: 'fee', reduce: 'sum', type: 'bar', span: 2 },
+                    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'scheduledAt', measure: 'fee', reduce: 'sum', type: 'area', span: 3 },
+                    { pivot: { rows: ['status'], cols: [], measure: 'fee', aggregate: 'sum' }, span: 3 },
+                    { tabs: [
+                            { label: 'Revenue by status', tiles: [{ chart: 'status', measure: 'fee', reduce: 'sum', type: 'bar' }] },
+                            { label: 'Visits by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+                        ], span: 3 },
+                    { filter: ['status'], span: 3 },
+                    { grid: true, format: statusPills(appointments, 'status'), summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+                ]),
+                // Doctors dashboard: roster + rating KPIs, an average-rating gauge (0-5),
+                // specialty breakdowns (pie + avg-rating bar), a specialty filter, and a
+                // specialty-pill roster grid.
+                dashScreen(doctors, { id: 'specialties', title: 'Specialties', order: 1 }, [
+                    { kpi: 'Doctors', reduce: 'count', span: 1 },
+                    { kpi: 'Avg rating', measure: 'rating', reduce: 'avg', span: 1 },
+                    { kpi: 'Top rating', measure: 'rating', reduce: 'max', span: 1 },
+                    { gauge: 'Avg patient rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+                    { chart: 'specialty', reduce: 'count', type: 'pie', span: 1 },
+                    { chart: 'specialty', measure: 'rating', reduce: 'avg', type: 'bar', span: 2 },
+                    { filter: ['specialty'], span: 3 },
+                    { grid: true, format: statusPills(doctors, 'specialty'), summaries: true, span: 3 },
+                ]),
+                // Resource scheduler: a column per doctor, appointments placed by time + tinted
+                // by status, drag-to-reschedule + a detail drawer (day view). Was a month calendar.
+                schedulerScreen(appointments, { id: 'schedule', title: 'Schedule', order: 2 }, { startField: 'scheduledAt', titleField: 'patientId', colorField: 'status', resourceField: 'doctorId', initialView: 'day' }),
+                // Patient 360: chart header (blood-type pill) with a visit-history timeline -
+                // each appointment titled by its doctor (relation resolved), colored by status.
+                detailScreen(patients, { id: 'patient-360', title: 'Patient 360', order: 3 }, {
+                    titleField: 'name', subtitleField: 'email', statusField: 'bloodType',
+                    related: [{ entity: 'appointments', foreignKey: 'patientId', label: 'Visits', titleField: 'doctorId', subtitleField: 'fee', dateField: 'scheduledAt', statusField: 'status' }],
+                }),
+                screen(patients, 'master-detail', { id: 'patients', title: 'Patients', order: 4, child: appointments, foreignKey: 'patientId', linkScreen: 'patient-360' }),
+                formScreen(appointments, { id: 'appointments', title: 'Appointments', order: 5 }, undefined, { format: apptFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status']),
+                formScreen(doctors, { id: 'doctors', title: 'Doctors', order: 6 }, undefined, {}, ['specialty']),
+            ],
+        });
+    },
+};

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

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