@svgrid/enterprise 2.5.2 → 2.6.0

package/src/studio/samples/subscriptions.ts

@@ -1,183 +0,0 @@
-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 plans: EntitySchema = {
-  name: 'plans',
-  label: 'Plan',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'name', type: 'text', required: true, minLength: 2, input: { help: 'Public plan name shown at checkout' } },
-    { field: 'price', type: 'number', label: 'Price ($)', required: true, min: 0, defaultValue: 0, input: { prefix: '$', help: 'Recurring charge per interval' } },
-    { field: 'interval', type: 'enum', required: true, defaultValue: 'monthly', options: [
-      { value: 'monthly', label: 'Monthly', color: '#6366f1' },
-      { value: 'yearly', label: 'Yearly', color: '#10b981' },
-    ] },
-    { field: 'seats', type: 'number', label: 'Included seats', min: 1, defaultValue: 1, input: { help: 'Users allowed on this plan' } },
-    { field: 'features', type: 'text', label: 'Included features', input: { editorType: 'chips', help: 'What this plan unlocks' } },
-    { field: 'color', type: 'text', label: 'Badge color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Plan badge in the UI' } },
-    { field: 'popular', type: 'boolean', label: 'Featured', defaultValue: false },
-  ],
-}
-
-const customers: EntitySchema = {
-  name: 'customers',
-  label: 'Customer',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'name', type: 'text', required: true, minLength: 2, input: { help: 'Billing account name' } },
-    { field: 'email', type: 'text', format: 'email', required: true, input: { help: 'Where invoices are sent' } },
-    { field: 'phone', type: 'text', label: 'Phone', input: { editorType: 'phone', help: 'Billing contact number' } },
-    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Billing country' } },
-    { field: 'taxId', type: 'text', label: 'Tax ID', input: { editorType: 'mask', mask: '##-#######', help: 'VAT / tax registration number' } },
-    { field: 'satisfaction', type: 'number', label: 'Satisfaction', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 account health score' } },
-    { field: 'since', type: 'date', label: 'Customer since' },
-    { field: 'active', type: 'boolean', defaultValue: true },
-  ],
-}
-
-const subs: EntitySchema = {
-  name: 'subscriptions',
-  label: 'Subscription',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'customerId', type: 'relation', label: 'Customer', relation: { entity: 'customers', foreignKey: 'customerId', labelField: 'name' } },
-    { field: 'planId', type: 'relation', label: 'Plan', relation: { entity: 'plans', foreignKey: 'planId', labelField: 'name' } },
-    { field: 'status', type: 'enum', required: true, defaultValue: 'trialing', options: [
-      { value: 'trialing', label: 'Trialing', color: '#0ea5e9' },
-      { value: 'active', label: 'Active', color: '#10b981' },
-      { value: 'past_due', label: 'Past due', color: '#f59e0b' },
-      { value: 'canceled', label: 'Canceled', color: '#ef4444' },
-    ] },
-    { field: 'mrr', type: 'number', label: 'MRR ($)', required: true, min: 0, defaultValue: 0, input: { prefix: '$', help: 'Monthly recurring revenue' } },
-    { field: 'seats', type: 'number', label: 'Seats', min: 1, defaultValue: 1, input: { help: 'Provisioned seats' } },
-    { field: 'usage', type: 'number', label: 'Usage (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Share of plan limits consumed' } },
-    { field: 'startedAt', type: 'date', label: 'Started at' },
-    { field: 'renewsAt', type: 'datetime', label: 'Renews at', input: { editorType: 'datetime', help: 'Next billing timestamp' } },
-    // Derived: annualized revenue from the monthly rate (display-only).
-    { field: 'annual', type: 'number', label: 'Annual ($)', readonly: true, formula: 'mrr * 12' },
-    // Derived: revenue per seat (display-only, never stored).
-    { field: 'perSeat', type: 'number', label: 'MRR / seat ($)', readonly: true, formula: 'mrr / seats' },
-    { field: 'autoRenew', type: 'boolean', label: 'Auto-renew', defaultValue: true },
-  ],
-}
-
-// Subscription grid formatting: status pills, plus numeric thresholds (healthy
-// MRR green + bold, churned $0 rows red, near-limit usage red + bold, idle usage
-// muted) - data-driven color, not just status pills.
-const subFormats: FormatRule[] = [
-  ...statusPills(subs, 'status'),
-  { field: 'mrr', op: 'gte', value: 200, color: '#16a34a', bold: true },
-  { field: 'mrr', op: 'eq', value: 0, color: '#dc2626' },
-  { field: 'usage', op: 'gte', value: 80, color: '#dc2626', bold: true },
-  { field: 'usage', op: 'lt', value: 20, color: '#94a3b8' },
-]
-
-const seed = {
-  plans: [
-    { id: 'pl1', name: 'Starter', price: 29, interval: 'monthly', seats: 3, features: ['Email support', 'Basic analytics'], color: '#6366f1', popular: false },
-    { id: 'pl2', name: 'Growth', price: 99, interval: 'monthly', seats: 10, features: ['Priority support', 'Advanced analytics', 'Integrations'], color: '#10b981', popular: true },
-    { id: 'pl3', name: 'Scale', price: 299, interval: 'monthly', seats: 25, features: ['SSO', 'Audit logs', 'Dedicated CSM', 'API access'], color: '#8b5cf6', popular: false },
-    { id: 'pl4', name: 'Starter Annual', price: 290, interval: 'yearly', seats: 3, features: ['Email support', 'Basic analytics'], color: '#6366f1', popular: false },
-    { id: 'pl5', name: 'Growth Annual', price: 990, interval: 'yearly', seats: 10, features: ['Priority support', 'Advanced analytics', 'Integrations'], color: '#10b981', popular: true },
-    { id: 'pl6', name: 'Enterprise', price: 2400, interval: 'yearly', seats: 100, features: ['SSO', 'Custom contracts', '24/7 support', 'SLA'], color: '#f59e0b', popular: false },
-  ],
-  customers: [
-    { id: 'cu1', name: 'Northwind Traders', email: 'billing@northwind.com', phone: '+1 (415) 555-0101', country: 'United States', taxId: '12-3456789', satisfaction: 4, since: '2025-03-12', active: true },
-    { id: 'cu2', name: 'Fabrikam', email: 'accounts@fabrikam.co', phone: '+44 20 7946 0102', country: 'United Kingdom', taxId: '44-2233445', satisfaction: 3, since: '2025-06-01', active: true },
-    { id: 'cu3', name: 'Contoso', email: 'finance@contoso.de', phone: '+49 30 5550103', country: 'Germany', taxId: '49-8877665', satisfaction: 5, since: '2024-11-20', active: true },
-    { id: 'cu4', name: 'Adventure Works', email: 'ap@adventure-works.ca', phone: '+1 (416) 555-0104', country: 'Canada', taxId: '11-9988776', satisfaction: 2, since: '2025-01-08', active: true },
-    { id: 'cu5', name: 'Tailspin Toys', email: 'billing@tailspin.com', phone: '+61 2 5550 0105', country: 'Australia', taxId: '61-4455667', satisfaction: 3, since: '2025-09-05', active: false },
-    { id: 'cu6', name: 'Wingtip', email: 'accounts@wingtip.io', phone: '+1 (212) 555-0106', country: 'United States', taxId: '13-2211009', satisfaction: 4, since: '2026-02-18', active: true },
-  ],
-  subscriptions: [
-    { id: 'sb1', customerId: 'cu1', planId: 'pl2', status: 'active', mrr: 99, seats: 10, usage: 72, startedAt: '2026-01-15', renewsAt: '2026-08-15T09:00:00Z', autoRenew: true },
-    { id: 'sb2', customerId: 'cu2', planId: 'pl1', status: 'trialing', mrr: 29, seats: 3, usage: 20, startedAt: '2026-07-01', renewsAt: '2026-07-15T09:00:00Z', autoRenew: true },
-    { id: 'sb3', customerId: 'cu3', planId: 'pl3', status: 'active', mrr: 299, seats: 25, usage: 88, startedAt: '2025-11-20', renewsAt: '2026-08-20T10:00:00Z', autoRenew: true },
-    { id: 'sb4', customerId: 'cu4', planId: 'pl6', status: 'past_due', mrr: 200, seats: 100, usage: 55, startedAt: '2025-09-10', renewsAt: '2026-09-10T09:00:00Z', autoRenew: false },
-    { id: 'sb5', customerId: 'cu5', planId: 'pl2', status: 'canceled', mrr: 0, seats: 10, usage: 5, startedAt: '2026-03-05', renewsAt: '2026-09-05T09:00:00Z', autoRenew: false },
-    { id: 'sb6', customerId: 'cu6', planId: 'pl5', status: 'active', mrr: 82, seats: 10, usage: 64, startedAt: '2026-02-28', renewsAt: '2027-02-28T09:00:00Z', autoRenew: true },
-    { id: 'sb7', customerId: 'cu1', planId: 'pl1', status: 'active', mrr: 29, seats: 3, usage: 41, startedAt: '2026-05-18', renewsAt: '2026-08-18T09:00:00Z', autoRenew: true },
-  ],
-}
-
-export const subscriptions: SampleApp = {
-  id: 'subscriptions',
-  name: 'Subscriptions',
-  description: 'Customers, plans and subscriptions - revenue + growth + plan dashboards (MRR sparkline over start dates, a $30k target, a usage gauge, status/interval charts, a status x auto-renew pivot, tabs), filtered status-pill grids with row actions, master/detail, and rich edit forms (phone, country, tax-id mask, satisfaction rating, usage slider, feature chips, plan color, renewal datetime).',
-  emoji: '\u{1F504}',
-  accent: '#14b8a6',
-  build: () => {
-    const planRows = pad(plans, seed.plans, 8)
-    const customerRows = pad(customers, seed.customers, 18)
-    const subRows = pad(subs, seed.subscriptions, 32, { customerId: ids(customerRows), planId: ids(planRows) })
-    return project({
-      title: 'SubHub',
-      brand: 'SubHub',
-      accent: '#14b8a6',
-      preset: 'notion',
-      footer: '',
-      entities: [plans, customers, subs],
-      seed: { plans: planRows, customers: customerRows, subscriptions: subRows },
-      screens: [
-        // Revenue dashboard: KPI cards (a Total MRR card with a sparkline over start
-        // dates + a $30k target), a usage gauge, an MRR-by-status funnel, a pie, a
-        // tabbed breakdown, and a status-pill subscription grid with row actions.
-        dashScreen(subs, { id: 'overview', title: 'Revenue', order: 0 }, [
-          { kpi: 'Total MRR', measure: 'mrr', reduce: 'sum', format: 'currency', trendField: 'startedAt', trendReduce: 'sum', target: 30000, span: 1 },
-          { kpi: 'Subscriptions', reduce: 'count', span: 1 },
-          { kpi: 'Avg MRR', measure: 'mrr', reduce: 'avg', format: 'currency', span: 1 },
-          { gauge: 'Avg usage', measure: 'usage', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
-          { chart: 'status', measure: 'mrr', reduce: 'sum', type: 'bar', span: 2 },
-          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
-          { tabs: [
-            { label: 'MRR by status', tiles: [{ chart: 'status', measure: 'mrr', reduce: 'sum', type: 'bar' }] },
-            { label: 'Subscriptions by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
-          ], span: 3 },
-          { grid: true, format: subFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
-        ]),
-        // Growth: revenue + usage KPIs, an MRR-over-time area trend, and a pivot of MRR
-        // by status (rows) x auto-renew (columns) to surface churn / non-renewing spend.
-        dashScreen(subs, { id: 'growth', title: 'Growth', order: 1 }, [
-          { kpi: 'Total MRR', measure: 'mrr', reduce: 'sum', format: 'currency', span: 1 },
-          { kpi: 'Avg usage', measure: 'usage', reduce: 'avg', format: 'percent', span: 1 },
-          { kpi: 'Largest MRR', measure: 'mrr', reduce: 'max', format: 'currency', span: 1 },
-          { chart: 'startedAt', measure: 'mrr', reduce: 'sum', type: 'area', span: 3 },
-          { pivot: { rows: ['status'], cols: ['autoRenew'], measure: 'mrr', aggregate: 'sum' }, span: 3 },
-        ]),
-        // Plans dashboard: pricing KPIs, an average-seats gauge, interval breakdowns, a
-        // filter, and a plan grid with interval status pills and inline edit actions.
-        dashScreen(plans, { id: 'plans-overview', title: 'Plans', order: 2 }, [
-          { kpi: 'Plans', reduce: 'count', span: 1 },
-          { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
-          { kpi: 'Top price', measure: 'price', reduce: 'max', format: 'currency', span: 1 },
-          { gauge: 'Avg seats', measure: 'seats', reduce: 'avg', min: 0, max: 100, span: 1 },
-          { chart: 'interval', measure: 'price', reduce: 'sum', type: 'bar', span: 2 },
-          { chart: 'interval', reduce: 'count', type: 'pie', span: 1 },
-          { filter: ['interval', 'popular'], span: 3 },
-          { grid: true, format: statusPills(plans, 'interval'), summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
-        ]),
-        // Customer 360: a record detail page - header (name + email + satisfaction
-        // tile), a tabbed Overview, and a Subscriptions timeline of the customer's subs.
-        detailScreen(customers, { id: 'customer-360', title: 'Customer 360', order: 3 }, {
-          titleField: 'name', subtitleField: 'email',
-          metricFields: ['satisfaction'],
-          related: [{ entity: 'subscriptions', foreignKey: 'customerId', label: 'Subscriptions', titleField: 'planId', subtitleField: 'mrr', dateField: 'startedAt', statusField: 'status' }],
-        }),
-        screen(customers, 'master-detail', { id: 'customers', title: 'Customers', order: 4, child: subs, foreignKey: 'customerId', linkScreen: 'customer-360' }),
-        // Subscriptions status board: filter by status / plan / customer, with status
-        // pills + numeric thresholds and inline edit.
-        formScreen(subs, { id: 'subscriptions', title: 'Subscriptions', order: 5 }, undefined, { format: subFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'planId', 'customerId']),
-        formScreen(plans, { id: 'plans-form', title: 'Manage plans', order: 6 }, undefined, { format: statusPills(plans, 'interval'), summaries: true, rowActions: [{ kind: 'edit' }] }, ['interval', 'popular']),
-        // Lifecycle board: subscriptions as draggable Kanban lanes by status
-        // (Trialing -> Active -> Past due -> Canceled), card = customer + MRR.
-        boardScreen(subs, { id: 'board', title: 'Lifecycle', order: 7 }, { groupBy: 'status', titleField: 'customerId', badgeField: 'mrr', subtitleField: 'planId', filter: ['status', 'planId'] }),
-        // Renewals calendar: subscriptions placed by their next renewal date.
-        calendarScreen(subs, { id: 'renewals', title: 'Renewals', order: 8 }, { dateField: 'renewsAt', titleField: 'customerId', filter: ['status', 'planId'] }),
-      ],
-    })
-  },
-}

package/src/studio/samples/support.ts

@@ -1,216 +0,0 @@
-import type { EntitySchema } from '../../schema.js'
-import { screen, formScreen, boardScreen, workspaceScreen, detailScreen, project, dashScreen, statusPills, pad, ids, whenIsAny, type SampleApp } from './shared.js'
-
-// Outlook-style chrome: a solid blue command ribbon (the toolbar), a light "folder"
-// rail with compact rows, and an accented left bar on the active folder.
-const OUTLOOK_CSS = `.sv-app.theme-outlook .sv-app__toolbar { background: #0f6cbd; border-bottom: 0; }
-.sv-app.theme-outlook .sv-app__toolbar, .sv-app.theme-outlook .sv-app__search-ic, .sv-app.theme-outlook .sv-app__kbd { color: #fff; }
-.sv-app.theme-outlook .sv-app__search { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); }
-.sv-app.theme-outlook .sv-app__search-in { color: #fff; }
-.sv-app.theme-outlook .sv-app__search-in::placeholder { color: rgba(255, 255, 255, 0.75); }
-.sv-app.theme-outlook .sv-app__side { background: #faf9f8; padding: 12px 8px; }
-.sv-app.theme-outlook .sv-app__brandtext { color: #0f6cbd; font-weight: 700; }
-.sv-app.theme-outlook .sv-app__link { border-radius: 4px; padding: 6px 12px; font-size: 13.5px; }
-.sv-app.theme-outlook .sv-app__link.is-active { background: color-mix(in srgb, #0f6cbd 12%, #fff); color: #0f6cbd; box-shadow: inset 3px 0 0 #0f6cbd; }`
-
-const customers: EntitySchema = {
-  name: 'customers',
-  label: 'Customer',
-  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, input: { help: 'Primary contact address' } },
-    { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Support callback number' } },
-    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Billing country' } },
-    { field: 'accountNo', type: 'text', label: 'Account #', input: { editorType: 'mask', mask: '####-####', help: 'Internal billing account number' } },
-    { field: 'plan', type: 'enum', required: true, defaultValue: 'free', options: [
-      { value: 'free', label: 'Free', color: '#94a3b8' },
-      { value: 'pro', label: 'Pro', color: '#6366f1' },
-      { value: 'business', label: 'Business', color: '#f59e0b' },
-    ] },
-    { field: 'signupAt', type: 'datetime', label: 'Signed up', input: { editorType: 'datetime', help: 'When the account was created' } },
-    { field: 'health', type: 'number', label: 'Account health', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 relationship score' } },
-    { field: 'active', type: 'boolean', defaultValue: true },
-  ],
-}
-
-const agents: EntitySchema = {
-  name: 'agents',
-  label: 'Agent',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'name', type: 'text', required: true, minLength: 2 },
-    { field: 'email', type: 'text', format: 'email', required: true, input: { help: 'Work address' } },
-    { field: 'team', type: 'enum', required: true, defaultValue: 'technical', options: [
-      { value: 'billing', label: 'Billing', color: '#10b981' },
-      { value: 'technical', label: 'Technical', color: '#6366f1' },
-      { value: 'onboarding', label: 'Onboarding', color: '#f59e0b' },
-    ] },
-    { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Desk extension' } },
-    { field: 'skills', type: 'text', label: 'Skills', input: { editorType: 'chips', help: 'Tools and specialities' } },
-    { field: 'capacity', type: 'number', label: 'Capacity (%)', min: 0, max: 100, defaultValue: 80, input: { editorType: 'slider', help: 'Share of a full ticket load' } },
-    { field: 'csat', type: 'number', label: 'CSAT', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: 'Rolling satisfaction score' } },
-    { field: 'calendarColor', type: 'text', label: 'Calendar color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Shown on the shift calendar' } },
-    { field: 'active', type: 'boolean', defaultValue: true },
-  ],
-}
-
-const tickets: EntitySchema = {
-  name: 'tickets',
-  label: 'Ticket',
-  idField: 'id',
-  fields: [
-    { field: 'id', type: 'text', primaryKey: true, readonly: true },
-    { field: 'subject', type: 'text', required: true, minLength: 3 },
-    { field: 'customerId', type: 'relation', label: 'Customer', relation: { entity: 'customers', foreignKey: 'customerId', labelField: 'name' } },
-    { field: 'agentId', type: 'relation', label: 'Agent', relation: { entity: 'agents', foreignKey: 'agentId', labelField: 'name' } },
-    { field: 'priority', type: 'enum', required: true, defaultValue: 'normal', options: [
-      { value: 'low', label: 'Low', color: '#94a3b8' },
-      { value: 'normal', label: 'Normal', color: '#6366f1' },
-      { value: 'high', label: 'High', color: '#f59e0b' },
-      { value: 'urgent', label: 'Urgent', color: '#ef4444' },
-    ] },
-    { field: 'status', type: 'enum', required: true, defaultValue: 'open', options: [
-      { value: 'open', label: 'Open', color: '#6366f1' },
-      { value: 'pending', label: 'Pending', color: '#f59e0b' },
-      { value: 'resolved', label: 'Resolved', color: '#10b981' },
-      { value: 'closed', label: 'Closed', color: '#94a3b8' },
-    ] },
-    { field: 'channel', type: 'enum', options: [
-      { value: 'email', label: 'Email', color: '#6366f1' },
-      { value: 'chat', label: 'Chat', color: '#10b981' },
-      { value: 'phone', label: 'Phone', color: '#f59e0b' },
-    ] },
-    { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Topic labels for routing' } },
-    { field: 'createdAt', type: 'datetime', label: 'Created', input: { editorType: 'datetime', help: 'When the ticket was opened' } },
-    { field: 'firstResponseMins', type: 'number', label: 'First response (min)', min: 0, input: { help: 'Time to the first agent reply' } },
-    // The close notes appear the moment a ticket reaches a terminal status, and
-    // the ticket cannot be saved in that state without them.
-    { field: 'resolution', type: 'text', label: 'Resolution', hidden: { grid: true },
-      input: { editorType: 'textarea', span: 2, help: 'What fixed it - required to resolve or close' },
-      when: { visible: whenIsAny('status', ['resolved', 'closed']), required: whenIsAny('status', ['resolved', 'closed']) } },
-    { field: 'satisfaction', type: 'number', label: 'CSAT', min: 1, max: 5, input: { editorType: 'rating', help: 'Customer rating on close' },
-      // A rating only means something once the customer has had an outcome.
-      when: { visible: whenIsAny('status', ['resolved', 'closed']) } },
-    { field: 'estimateHrs', type: 'number', label: 'Estimate (hrs)', min: 0, defaultValue: 1, input: { help: 'Estimated effort to resolve' } },
-    { field: 'hourlyRate', type: 'number', label: 'Rate ($/hr)', min: 0, defaultValue: 90, input: { help: 'Billed support rate' } },
-    // Derived: estimated support cost for the ticket (display-only, never seeded).
-    { field: 'cost', type: 'number', label: 'Cost ($)', readonly: true, formula: 'estimateHrs * hourlyRate' },
-  ],
-}
-
-const seed = {
-  customers: [
-    { id: 'c1', name: 'Ada Lovelace', email: 'ada@analytic.io', phone: '+1 (415) 555-0101', country: 'United States', accountNo: '4021-7788', plan: 'business', signupAt: '2025-09-12T09:15:00Z', health: 5, active: true },
-    { id: 'c2', name: 'Alan Turing', email: 'alan@bletchley.uk', phone: '+44 20 7946 0102', country: 'United Kingdom', accountNo: '5590-2143', plan: 'pro', signupAt: '2025-11-03T14:20:00Z', health: 4, active: true },
-    { id: 'c3', name: 'Grace Hopper', email: 'grace@navy.mil', phone: '+1 (202) 555-0103', country: 'United States', accountNo: '7781-6620', plan: 'business', signupAt: '2026-01-21T10:05:00Z', health: 5, active: true },
-    { id: 'c4', name: 'Linus Torvalds', email: 'linus@kernel.org', phone: '+1 (503) 555-0104', country: 'United States', accountNo: '3312-9087', plan: 'pro', signupAt: '2026-03-08T08:45:00Z', health: 3, active: true },
-    { id: 'c5', name: 'Barbara Liskov', email: 'barbara@sub.dev', phone: '+1 (617) 555-0105', country: 'United States', accountNo: '9001-4455', plan: 'free', signupAt: '2026-05-30T16:30:00Z', health: 2, active: false },
-  ],
-  agents: [
-    { id: 'a1', name: 'Sam Rivera', email: 'sam@support.io', team: 'technical', phone: '+1 (415) 555-0201', skills: ['TypeScript', 'AWS', 'GraphQL'], capacity: 85, csat: 5, calendarColor: '#6366f1', active: true },
-    { id: 'a2', name: 'Jamie Chen', email: 'jamie@support.io', team: 'billing', phone: '+1 (312) 555-0202', skills: ['SQL', 'Leadership'], capacity: 70, csat: 4, calendarColor: '#10b981', active: true },
-    { id: 'a3', name: 'Priya Patel', email: 'priya@support.io', team: 'onboarding', phone: '+1 (206) 555-0203', skills: ['Product', 'UX', 'Figma'], capacity: 60, csat: 4, calendarColor: '#f59e0b', active: true },
-  ],
-  tickets: [
-    { id: 'tk1', subject: 'Cannot reset password', customerId: 'c1', agentId: 'a1', priority: 'high', status: 'open', channel: 'email', tags: ['auth', 'login'], createdAt: '2026-07-10T08:30:00Z', firstResponseMins: 12, satisfaction: 4, estimateHrs: 2, hourlyRate: 90 },
-    { id: 'tk2', subject: 'Invoice discrepancy', customerId: 'c2', agentId: 'a2', priority: 'normal', status: 'pending', channel: 'email', tags: ['billing'], createdAt: '2026-07-08T11:05:00Z', firstResponseMins: 45, satisfaction: 3, estimateHrs: 1, hourlyRate: 75 },
-    { id: 'tk3', subject: 'API returns 500', customerId: 'c3', agentId: 'a1', priority: 'urgent', status: 'open', channel: 'chat', tags: ['api', 'outage'], createdAt: '2026-07-12T15:40:00Z', firstResponseMins: 4, satisfaction: 5, estimateHrs: 4, hourlyRate: 120 },
-    { id: 'tk4', subject: 'How do I export data?', customerId: 'c4', agentId: 'a3', priority: 'low', status: 'resolved', channel: 'chat', tags: ['export'], createdAt: '2026-07-02T09:20:00Z', firstResponseMins: 20, satisfaction: 5, estimateHrs: 1, hourlyRate: 60, resolution: 'Walked the customer through Export > CSV in the toolbar.' },
-    { id: 'tk5', subject: 'Upgrade to Business', customerId: 'c5', agentId: 'a3', priority: 'normal', status: 'closed', channel: 'phone', tags: ['upgrade', 'billing'], createdAt: '2026-06-28T13:10:00Z', firstResponseMins: 8, satisfaction: 4, estimateHrs: 1, hourlyRate: 75, resolution: 'Upgraded the account to Business and prorated the invoice.' },
-    { id: 'tk6', subject: 'SSO configuration', customerId: 'c1', agentId: 'a1', priority: 'high', status: 'pending', channel: 'email', tags: ['sso', 'security'], createdAt: '2026-07-11T10:00:00Z', firstResponseMins: 60, satisfaction: 2, estimateHrs: 3, hourlyRate: 120 },
-    { id: 'tk7', subject: 'Double charge refund', customerId: 'c2', agentId: 'a2', priority: 'urgent', status: 'resolved', channel: 'phone', tags: ['refund', 'billing'], createdAt: '2026-07-05T16:25:00Z', firstResponseMins: 15, satisfaction: 4, estimateHrs: 2, hourlyRate: 90, resolution: 'Refunded the duplicate charge; payment retry guard added.' },
-    { id: 'tk8', subject: 'Feature request: dark mode', customerId: 'c3', agentId: 'a3', priority: 'low', status: 'open', channel: 'chat', tags: ['feature'], createdAt: '2026-07-13T12:50:00Z', firstResponseMins: 90, satisfaction: 3, estimateHrs: 5, hourlyRate: 100 },
-  ],
-}
-
-export const support: SampleApp = {
-  id: 'support',
-  name: 'Support desk',
-  description: 'Tickets, customers and agents - an Outlook-style help desk behind a sign-in, with triage + SLA dashboards (CSAT sparkline + gauge, pivot, tabbed breakdown), a team-capacity dashboard, status-pill grids, master/detail, and rich edit forms.',
-  emoji: '\u{1F3AF}',
-  accent: '#0f6cbd',
-  build: () => {
-    const customerRows = pad(customers, seed.customers, 16)
-    const agentRows = pad(agents, seed.agents, 6)
-    const ticketRows = pad(tickets, seed.tickets, 36, { customerId: ids(customerRows), agentId: ids(agentRows) })
-    return project({
-      title: 'Support Desk',
-      brand: 'Support Desk',
-      accent: '#0f6cbd',
-      preset: 'atlassian',
-      footer: '',
-      // Outlook-style mail/triage client: blue command ribbon + a light folder rail.
-      appClass: 'theme-outlook',
-      customCss: OUTLOOK_CSS,
-      // Sign-in with two roles: agents work tickets but cannot delete records.
-      auth: { enabled: true, protect: true },
-      access: {
-        enabled: true,
-        defaultRole: 'agent',
-        roles: [
-          { role: 'admin', screens: '*', actions: '*' },
-          { role: 'agent', screens: '*', actions: ['create', 'update'] },
-        ],
-      },
-      entities: [customers, agents, tickets],
-      seed: { customers: customerRows, agents: agentRows, tickets: ticketRows },
-      screens: [
-        // Triage dashboard: volume + CSAT KPIs (CSAT card trends over created date),
-        // a CSAT gauge, status/priority/channel breakdowns, a tabbed view, and a
-        // ticket grid with status AND priority pills.
-        dashScreen(tickets, { id: 'overview', title: 'Overview', order: 0 }, [
-          { kpi: 'Open tickets', reduce: 'count', span: 1 },
-          { kpi: 'Avg first response', measure: 'firstResponseMins', reduce: 'avg', span: 1 },
-          { kpi: 'Avg CSAT', measure: 'satisfaction', reduce: 'avg', trendField: 'createdAt', trendReduce: 'avg', span: 1 },
-          { gauge: 'Avg CSAT', measure: 'satisfaction', reduce: 'avg', min: 0, max: 5, span: 1 },
-          { chart: 'status', reduce: 'count', type: 'bar', span: 2 },
-          { chart: 'priority', reduce: 'count', type: 'pie', span: 1 },
-          { chart: 'channel', reduce: 'count', type: 'bar', span: 2 },
-          { tabs: [
-            { label: 'By status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
-            { label: 'By priority', tiles: [{ chart: 'priority', reduce: 'count', type: 'bar' }] },
-            { label: 'By channel', tiles: [{ chart: 'channel', reduce: 'count', type: 'bar' }] },
-          ], span: 3 },
-          { grid: true, format: [...statusPills(tickets, 'status'), ...statusPills(tickets, 'priority')], summaries: true, span: 3 },
-        ]),
-        // SLA / quality: response + CSAT KPIs, a CSAT gauge, and a pivot of CSAT by
-        // priority (rows) x status (columns).
-        // Ticket board: tickets as cards in status columns (drag to change status).
-        boardScreen(tickets, { id: 'board', title: 'Board', order: 1 }, { groupBy: 'status', titleField: 'subject', subtitleField: 'priority', filter: ['priority', 'channel', 'agentId'] }),
-        // A docking console: filter | ticket queue | selected-ticket panel (drag / float / pin).
-        workspaceScreen(tickets, { id: 'console', title: 'Console', order: 2 }, { filter: ['priority', 'channel', 'agentId'], record: true, grid: { format: [...statusPills(tickets, 'status'), ...statusPills(tickets, 'priority')] } }),
-        // Customer 360: account header (plan pill + health tile) with a timeline of
-        // the customer's tickets (newest first, colored by status).
-        detailScreen(customers, { id: 'customer-360', title: 'Customer 360', order: 2 }, {
-          titleField: 'name', subtitleField: 'email', statusField: 'plan', metricFields: ['health'],
-          related: [{ entity: 'tickets', foreignKey: 'customerId', label: 'Tickets', titleField: 'subject', subtitleField: 'priority', dateField: 'createdAt', statusField: 'status' }],
-        }),
-        dashScreen(tickets, { id: 'performance', title: 'Performance', order: 3 }, [
-          { kpi: 'Avg first response', measure: 'firstResponseMins', reduce: 'avg', span: 1 },
-          { kpi: 'Avg CSAT', measure: 'satisfaction', reduce: 'avg', span: 1 },
-          { kpi: 'Est. hours', measure: 'estimateHrs', reduce: 'sum', format: 'number', span: 1 },
-          { gauge: 'Avg CSAT', measure: 'satisfaction', reduce: 'avg', min: 0, max: 5, span: 1 },
-          { chart: 'channel', measure: 'firstResponseMins', reduce: 'avg', type: 'bar', span: 2 },
-          { chart: 'priority', measure: 'satisfaction', reduce: 'avg', type: 'bar', span: 1 },
-          { pivot: { rows: ['priority'], cols: ['status'], measure: 'satisfaction', aggregate: 'avg' }, span: 3 },
-        ]),
-        // Team load: capacity gauge + a per-agent capacity leaderboard.
-        dashScreen(agents, { id: 'team', title: 'Team', order: 4 }, [
-          { kpi: 'Agents', reduce: 'count', span: 1 },
-          { kpi: 'Avg capacity', measure: 'capacity', reduce: 'avg', format: 'percent', span: 1 },
-          { kpi: 'Avg CSAT', measure: 'csat', reduce: 'avg', span: 1 },
-          { gauge: 'Avg team capacity', measure: 'capacity', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
-          { chart: 'name', measure: 'capacity', reduce: 'avg', type: 'bar', span: 2 },
-          { chart: 'team', reduce: 'count', type: 'pie', span: 1 },
-          { grid: true, format: statusPills(agents, 'team'), summaries: true, span: 3 },
-        ]),
-        formScreen(tickets, { id: 'tickets', title: 'Tickets', order: 5 }, undefined, { format: [...statusPills(tickets, 'status'), ...statusPills(tickets, 'priority')], summaries: true }),
-        screen(customers, 'master-detail', { id: 'customers', title: 'Customers', order: 6, child: tickets, foreignKey: 'customerId', linkScreen: 'customer-360' }),
-        formScreen(agents, { id: 'agents', title: 'Agents', order: 7 }),
-      ],
-    })
-  },
-}

package/src/studio/scaffold-app.test.ts

@@ -1,91 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { compile } from 'svelte/compiler'
-import type { EntitySchema } from '../schema'
-import { MANAGED_START, MANAGED_END } from './scaffold'
-import { scaffoldApp } from './scaffold-app'
-
-const companies: EntitySchema = {
-  name: 'companies', label: 'Companies', idField: 'id',
-  fields: [
-    { field: 'id', type: 'number', primaryKey: true, readonly: true },
-    { field: 'name', type: 'text', required: true },
-  ],
-}
-const contacts: EntitySchema = {
-  name: 'contacts', label: 'Contacts', idField: 'id',
-  fields: [
-    { field: 'id', type: 'number', primaryKey: true, readonly: true },
-    { field: 'full_name', type: 'text', required: true },
-    // FK with a placeholder labelField - scaffoldApp should resolve it to 'name'.
-    { field: 'company_id', type: 'relation', relation: { entity: 'companies', foreignKey: 'company_id', labelField: 'xxx' } },
-  ],
-}
-
-describe('scaffoldApp', () => {
-  const { files } = scaffoldApp([companies, contacts], { appTitle: 'CRM' })
-  const byPath = Object.fromEntries(files.map((f) => [f.path, f]))
-
-  it('emits every entity screen plus a layout and home page', () => {
-    for (const p of [
-      'src/lib/companies.schema.ts', 'src/routes/companies/+page.svelte', 'src/routes/api/companies/+server.ts',
-      'src/lib/contacts.schema.ts', 'src/routes/contacts/+page.svelte', 'src/routes/api/contacts/+server.ts',
-      'src/routes/+layout.svelte', 'src/routes/+page.svelte',
-    ]) {
-      expect(byPath[p], p).toBeDefined()
-    }
-  })
-
-  it('the layout links every entity and renders the routed page', () => {
-    const layout = byPath['src/routes/+layout.svelte']!.contents
-    expect(layout).toContain('"href":"/companies"')
-    expect(layout).toContain('"href":"/contacts"')
-    expect(layout).toContain('{@render children?.()}')
-    expect(layout).toContain('CRM')
-  })
-
-  it('the sidebar is collapsible and starts collapsed on tablet / phone', () => {
-    const layout = byPath['src/routes/+layout.svelte']!.contents
-    // Off-canvas drawer driven by a collapse toggle + a <= 1024px media query.
-    expect(layout).toContain('matchMedia')
-    expect(layout).toContain('max-width: 1024px')
-    expect(layout).toContain('function toggleNav')
-    expect(layout).toContain('class:is-drawer={drawer}')
-    expect(layout).toContain('app-shell__burger')
-  })
-
-  it('the home page lists the entities', () => {
-    const home = byPath['src/routes/+page.svelte']!.contents
-    expect(home).toContain('"label":"Companies"')
-    expect(home).toContain('"label":"Contacts"')
-  })
-
-  it('resolves relation labelFields across the app (linkRelationLabels)', () => {
-    const schema = byPath['src/lib/contacts.schema.ts']!.contents
-    // The placeholder 'xxx' is replaced by the related companies schema's 'name'.
-    expect(schema).toContain('"labelField":"name"')
-    expect(schema).not.toContain('"labelField":"xxx"')
-  })
-
-  it('the contacts page wires a lookup to the companies route', () => {
-    const page = byPath['src/routes/contacts/+page.svelte']!.contents
-    expect(page).toContain('createRelationLookup')
-    expect(page).toContain('endpoint: "/api/companies"')
-  })
-
-  it('layout and home are valid Svelte (compile)', () => {
-    for (const p of ['src/routes/+layout.svelte', 'src/routes/+page.svelte']) {
-      expect(() => compile(byPath[p]!.contents, { filename: p, generate: 'client' }), p).not.toThrow()
-    }
-  })
-
-  it('wraps shell files in managed markers', () => {
-    for (const p of ['src/routes/+layout.svelte', 'src/routes/+page.svelte']) {
-      expect(byPath[p]!.contents).toContain(MANAGED_START)
-      expect(byPath[p]!.contents).toContain(MANAGED_END)
-    }
-  })
-
-  it('throws with no schemas', () => {
-    expect(() => scaffoldApp([])).toThrow(/no schemas/)
-  })
-})