@svgrid/enterprise 2.2.1 → 2.3.1

package/src/studio/samples/shared.ts

@@ -8,9 +8,14 @@
  * parse/serialize and generates a runnable app with no special-casing.
  */
 import type { EntitySchema } from '../../schema.js'
-import type { ChartType } from '@svgrid/grid'
 import { generateValue } from '../sample-data.js'
-import { defaultBlockConfig, sanitizeProject, screenFromTemplate, buildDockLayout, type Block, type BlockConfig, type DetailRelated, type FormatRule, type GridConfig, type GridDensity, type KpiFormat, type Reduce, type RowAction, type RowLink, type Screen, type ScreenTemplate, type StudioProject, type EntityDataSource, type ShellStyle, type SchedulerViewConfig, type SchedulerViewMode } from '../project.js'
+import { gridConfig, type GridOpts } from '../screen-suites.js'
+import { sanitizeProject, screenFromTemplate, buildDockLayout, type Block, type GridConfig, type Screen, type ScreenTemplate, type StudioProject, type EntityDataSource, type ShellStyle, type SchedulerViewConfig, type SchedulerViewMode, type AuthConfig, type AccessControl } from '../project.js'
+
+// The generic screen factories live in `../screen-suites.js` (they are public API
+// now - the guided CRUD suite builds on them). Re-exported here so every sample
+// app keeps importing its whole toolkit from one place.
+export { dashScreen, detailScreen, formScreen, gridConfig, listScreen, statusPills, type GridOpts, type Tile } from '../screen-suites.js'
 
 type Row = Record<string, unknown>
 
@@ -72,130 +77,6 @@ export type SampleApp = {
   build: () => StudioProject
 }
 
-/** Rich-grid options an enterprise screen layers onto the default grid: status
- *  pills / thresholds (formatRules), a totals row, row actions, row-click drill,
- *  and density. */
-export type GridOpts = {
-  format?: FormatRule[]
-  rowActions?: RowAction[]
-  rowLink?: RowLink
-  summaries?: boolean
-  density?: GridDensity
-  pageSize?: number
-}
-
-/** A dashboard tile: KPI card (with trend/target/format), chart, gauge, pivot,
- *  tree, a rich grid, or a tabbed group of display tiles. */
-export type Tile =
-  | { kpi: string; measure?: string; reduce: Reduce; format?: KpiFormat; trendField?: string; trendReduce?: Reduce; target?: number; span?: 1 | 2 | 3 }
-  | { chart: string; measure?: string; reduce?: Reduce; type?: ChartType; span?: 1 | 2 | 3 }
-  | { gauge: string; measure?: string; reduce: Reduce; min?: number; max?: number; unit?: string; span?: 1 | 2 | 3 }
-  | { pivot: { rows: string[]; cols: string[]; measure?: string; aggregate?: Reduce }; span?: 1 | 2 | 3 }
-  | { tree: { labelField: string; parentField: string }; span?: 1 | 2 | 3 }
-  | ({ grid: true; span?: 1 | 2 | 3 } & GridOpts)
-  | { filter: string[]; span?: 1 | 2 | 3 }
-  | { tabs: { label: string; tiles: Tile[] }[]; span?: 1 | 2 | 3 }
-
-/** The default grid config with enterprise options merged on. */
-function gridConfig(entity: EntitySchema, opts: GridOpts): BlockConfig {
-  const base = defaultBlockConfig('grid', entity) as GridConfig
-  return {
-    ...base,
-    ...(opts.format ? { formatRules: opts.format } : {}),
-    ...(opts.rowActions ? { rowActions: opts.rowActions } : {}),
-    ...(opts.rowLink ? { rowLink: opts.rowLink } : {}),
-    ...(opts.summaries ? { rowSummaries: true } : {}),
-    ...(opts.density ? { density: opts.density } : {}),
-    ...(opts.pageSize ? { pageSize: opts.pageSize } : {}),
-  }
-}
-
-/** One dashboard tile -> a Block. Recurses for `tabs` (whose children must be
- *  display blocks: chart / kpi / gauge / pivot / tree). */
-function tileBlock(entity: EntitySchema, t: Tile, i: number): Block {
-  const id = `blk-${i + 1}`
-  if ('kpi' in t) {
-    const config: BlockConfig = {
-      kind: 'kpi', label: t.kpi, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce,
-      ...(t.format ? { format: t.format } : {}), ...(t.trendField ? { trendField: t.trendField } : {}),
-      ...(t.trendReduce ? { trendReduce: t.trendReduce } : {}), ...(t.target != null ? { target: t.target } : {}),
-    }
-    return { id, span: t.span ?? 1, config }
-  }
-  if ('chart' in t) {
-    return { id, span: t.span ?? 2, config: { kind: 'chart', dimension: t.chart, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce ?? 'sum', type: t.type ?? 'bar' } }
-  }
-  if ('gauge' in t) {
-    return { id, span: t.span ?? 1, config: { kind: 'gauge', label: t.gauge, ...(t.measure ? { measure: t.measure } : {}), reduce: t.reduce, min: t.min ?? 0, max: t.max ?? 100, ...(t.unit ? { unit: t.unit } : {}) } }
-  }
-  if ('pivot' in t) {
-    return { id, span: t.span ?? 3, config: { kind: 'pivot', rows: t.pivot.rows, cols: t.pivot.cols, ...(t.pivot.measure ? { measure: t.pivot.measure } : {}), aggregate: t.pivot.aggregate ?? 'sum' } }
-  }
-  if ('tree' in t) {
-    return { id, span: t.span ?? 1, config: { kind: 'tree', labelField: t.tree.labelField, parentField: t.tree.parentField } }
-  }
-  if ('filter' in t) {
-    return { id, span: t.span ?? 3, config: { kind: 'filter', fields: t.filter } }
-  }
-  if ('tabs' in t) {
-    return { id, span: t.span ?? 3, config: { kind: 'tabs', tabs: t.tabs.map((tab) => ({ label: tab.label, blocks: tab.tiles.map((tt, j) => tileBlock(entity, tt, j)) })) } }
-  }
-  return { id, span: t.span ?? 3, config: gridConfig(entity, t) }
-}
-
-/** Compose a dashboard screen from explicit tiles (KPI cards + gauges + charts +
- *  pivots + trees + a rich grid). */
-export function dashScreen(
-  entity: EntitySchema,
-  meta: { id: string; title: string; order: number },
-  tiles: Tile[],
-): Screen {
-  const blocks = tiles.map((t, i) => tileBlock(entity, t, i))
-  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
-}
-
-/** FormatRule[] that color-code an enum field's cells by its option colors -
- *  turns a plain status column into enterprise status pills. */
-export function statusPills(entity: EntitySchema, field: string): FormatRule[] {
-  const f = entity.fields.find((x) => x.field === field)
-  if (!f?.options) return []
-  return f.options
-    .filter((o) => o.color)
-    .map((o) => ({ field, op: 'eq' as const, value: o.value as string | number, background: `color-mix(in srgb, ${o.color} 18%, transparent)`, color: o.color, bold: true }))
-}
-
-/** A list screen: an optional faceted filter panel + a rich grid (status pills,
- *  totals, row actions, drill-through). */
-export function listScreen(
-  entity: EntitySchema,
-  meta: { id: string; title: string; order: number },
-  opts: { filter?: string[]; grid?: GridOpts } = {},
-): Screen {
-  const blocks: Block[] = []
-  if (opts.filter?.length) blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: opts.filter } })
-  blocks.push({ id: 'grid-1', span: 3, config: gridConfig(entity, opts.grid ?? {}) })
-  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
-}
-
-/**
- * A form-showcase screen: a grid to pick a row + an editable record panel that
- * renders the full field form (phone / rating / tags / mask / slider editors)
- * inline. Lets a user see and try the rich editors on load, not just on edit.
- */
-export function formScreen(
-  entity: EntitySchema,
-  meta: { id: string; title: string; order: number },
-  fields?: string[],
-  grid?: GridOpts,
-  filter?: string[],
-): Screen {
-  const blocks: Block[] = []
-  if (filter?.length) blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: filter } })
-  blocks.push({ id: 'grid-1', span: 3, config: gridConfig(entity, grid ?? {}) })
-  blocks.push({ id: 'record-1', span: 3, config: { kind: 'record', editable: true, ...(fields ? { fields } : {}) } })
-  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
-}
-
 /** A Kanban board screen: an optional filter panel + a board grouping rows by an
  *  enum field into draggable columns (the signature "pipeline" view). */
 export function boardScreen(
@@ -272,25 +153,6 @@ export function workspaceScreen(
   return { ...base, dock: buildDockLayout(base) }
 }
 
-/** A record detail-page screen: a full record view (header + status pill + metric
- *  tiles + tabbed Overview / related timelines) - the signature view for
- *  relation-heavy records (a customer / deal / patient / trip page). */
-export function detailScreen(
-  entity: EntitySchema,
-  meta: { id: string; title: string; order: number },
-  opts: { titleField: string; subtitleField?: string; statusField?: string; metricFields?: string[]; sections?: { label: string; fields: string[] }[]; related?: DetailRelated[] },
-): Screen {
-  const blocks: Block[] = [{ id: 'detail-1', span: 3, config: {
-    kind: 'detail', titleField: opts.titleField,
-    ...(opts.subtitleField ? { subtitleField: opts.subtitleField } : {}),
-    ...(opts.statusField ? { statusField: opts.statusField } : {}),
-    ...(opts.metricFields?.length ? { metricFields: opts.metricFields } : {}),
-    ...(opts.sections?.length ? { sections: opts.sections } : {}),
-    ...(opts.related?.length ? { related: opts.related } : {}),
-  } }]
-  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
-}
-
 /** Build a screen from a template, then override its id / route / title / nav.
  *  `linkScreen` wires a master-detail parent row to drill into a detail screen. */
 export function screen(
@@ -324,6 +186,17 @@ export function project(opts: {
    *  what makes each app read as a distinct product (Salesforce vs Excel vs Linear). */
   preset?: string
   mode?: 'light' | 'dark'
+  /** Bespoke app chrome: raw CSS written to the generated app's `custom.css` (imported
+   *  after `app.css`, so it overrides). Scope rules under `.sv-app.<appClass>` so an
+   *  app can look like its real-world archetype, not a recolored sibling. */
+  customCss?: string
+  /** Extra class on the shell root (the hook `customCss` targets). */
+  appClass?: string
+  /** A sign-in starter: `{ enabled: true }` gives the generated app a `/login` page,
+   *  a signed-cookie session, and route guards (dependency-free, no DB). */
+  auth?: AuthConfig
+  /** Role-based access. With `auth`, seeds one demo login per role. */
+  access?: AccessControl
   entities: EntitySchema[]
   screens: Screen[]
   seed: Record<string, Record<string, unknown>[]>
@@ -340,7 +213,11 @@ export function project(opts: {
       accent: opts.accent,
       ...(opts.preset ? { preset: opts.preset } : {}),
       ...(opts.mode ? { mode: opts.mode } : {}),
+      ...(opts.customCss ? { customCss: opts.customCss } : {}),
+      ...(opts.appClass ? { appClass: opts.appClass } : {}),
       shell: { style: opts.navStyle ?? 'sidebar', brand: opts.brand, footer: opts.footer ?? '', navPosition: opts.navPosition ?? 'left' },
     },
+    ...(opts.auth?.enabled ? { auth: opts.auth } : {}),
+    ...(opts.access?.enabled ? { access: opts.access } : {}),
   })
 }

package/src/studio/samples/starter.ts

@@ -0,0 +1,251 @@
+/**
+ * The project a fresh `svgrid-studio designer` session opens with: not a bare stub,
+ * but a complete, enterprise-ready multi-page CRM that shows off the grid's range on
+ * first paint - a KPI/chart **Overview**, the rich **Customers** CRUD grid (status
+ * pills, health bars, export, popup form), a drag-and-drop **Pipeline** board, a
+ * **Deals** grid, a **Calendar** of close dates, and a **Forecast** analytics page.
+ * Every generated Studio app already wires `@svgrid/enterprise` (data layer, columns,
+ * validation); the rich grids + export make that enterprise surface visible.
+ */
+import { project, dashScreen, boardScreen, calendarScreen } from './shared.js'
+import { gridColumns, defaultBlockConfig, buildDockLayout, type StudioProject, type Screen, type Block, type GridConfig, type GridColumnConfig } from '../project.js'
+import type { EntitySchema } from '../../schema.js'
+
+/** A realistic B2B customer/account: company + contact, region, industry, plan,
+ *  seats, MRR, a health score, and lifecycle dates. */
+const customers: EntitySchema = {
+  name: 'customers',
+  label: 'Customer',
+  idField: 'id',
+  fields: [
+    { field: 'id', label: 'ID', type: 'number', primaryKey: true, readonly: true },
+    { field: 'company', label: 'Company', type: 'text', required: true },
+    { field: 'contact', label: 'Contact', type: 'text', required: true },
+    { field: 'email', label: 'Email', type: 'text', format: 'email' },
+    { field: 'country', label: 'Country', type: 'text' },
+    { field: 'industry', label: 'Industry', type: 'enum', input: { editorType: 'list' }, options: [
+      { value: 'saas', label: 'SaaS', color: '#6366f1' },
+      { value: 'fintech', label: 'Fintech', color: '#0ea5e9' },
+      { value: 'healthcare', label: 'Healthcare', color: '#10b981' },
+      { value: 'retail', label: 'Retail', color: '#f59e0b' },
+      { value: 'manufacturing', label: 'Manufacturing', color: '#64748b' },
+      { value: 'media', label: 'Media', color: '#ec4899' },
+      { value: 'education', label: 'Education', color: '#14b8a6' },
+      { value: 'logistics', label: 'Logistics', color: '#a855f7' },
+    ] },
+    { field: 'status', label: 'Status', type: 'enum', required: true, input: { editorType: 'list' }, options: [
+      { value: 'active', label: 'Active', color: '#10b981' },
+      { value: 'trial', label: 'Trial', color: '#f59e0b' },
+      { value: 'paused', label: 'Paused', color: '#64748b' },
+      { value: 'churned', label: 'Churned', color: '#ef4444' },
+    ] },
+    { field: 'plan', label: 'Plan', type: 'enum', input: { editorType: 'list' }, options: [
+      { value: 'starter', label: 'Starter', color: '#94a3b8' },
+      { value: 'growth', label: 'Growth', color: '#6366f1' },
+      { value: 'scale', label: 'Scale', color: '#0ea5e9' },
+      { value: 'enterprise', label: 'Enterprise', color: '#8b5cf6' },
+    ] },
+    { field: 'seats', label: 'Seats', type: 'number' },
+    { field: 'mrr', label: 'MRR', type: 'number' },
+    { field: 'health', label: 'Health', type: 'number', min: 0, max: 100 },
+    { field: 'signupDate', label: 'Signed up', type: 'date' },
+    { field: 'lastContact', label: 'Last contact', type: 'date' },
+  ],
+}
+
+/** Sales opportunities against accounts - the Pipeline board / Calendar / Forecast. */
+const deals: EntitySchema = {
+  name: 'deals',
+  label: 'Deal',
+  idField: 'id',
+  fields: [
+    { field: 'id', label: 'ID', type: 'number', primaryKey: true, readonly: true },
+    { field: 'name', label: 'Deal', type: 'text', required: true },
+    { field: 'customerId', label: 'Account', type: 'relation', relation: { entity: 'customers', labelField: 'company' } },
+    { field: 'stage', label: 'Stage', type: 'enum', required: true, input: { editorType: 'list' }, options: [
+      { value: 'lead', label: 'Lead', color: '#94a3b8' },
+      { value: 'qualified', label: 'Qualified', color: '#38bdf8' },
+      { value: 'proposal', label: 'Proposal', color: '#6366f1' },
+      { value: 'negotiation', label: 'Negotiation', color: '#f59e0b' },
+      { value: 'won', label: 'Won', color: '#10b981' },
+      { value: 'lost', label: 'Lost', color: '#ef4444' },
+    ] },
+    { field: 'owner', label: 'Owner', type: 'enum', input: { editorType: 'list' }, options: [
+      { value: 'Sarah Chen', label: 'Sarah Chen', color: '#6366f1' },
+      { value: 'Marcus Lee', label: 'Marcus Lee', color: '#10b981' },
+      { value: 'Elena Vidal', label: 'Elena Vidal', color: '#f59e0b' },
+      { value: 'Tom Baker', label: 'Tom Baker', color: '#ec4899' },
+    ] },
+    { field: 'amount', label: 'Amount', type: 'number' },
+    { field: 'probability', label: 'Probability', type: 'number', min: 0, max: 100 },
+    { field: 'closeDate', label: 'Close date', type: 'date' },
+  ],
+}
+
+/** ~20 seeded accounts with a realistic spread of industries, regions, plans and
+ *  lifecycle states (active/paused carry MRR; trials + churned sit at 0). */
+const customerSeed: Record<string, unknown>[] = [
+  { id: 1, company: 'Meridian Software', contact: 'Sarah Chen', email: 'sarah.chen@meridiansoft.com', country: 'United States', industry: 'saas', status: 'active', plan: 'scale', seats: 42, mrr: 1490, health: 88, signupDate: '2024-03-12', lastContact: '2026-07-28' },
+  { id: 2, company: 'Cedar Analytics', contact: 'Michael Rodriguez', email: 'm.rodriguez@cedaranalytics.io', country: 'United States', industry: 'fintech', status: 'active', plan: 'enterprise', seats: 180, mrr: 4200, health: 94, signupDate: '2023-11-05', lastContact: '2026-08-04' },
+  { id: 3, company: 'BlueSky Labs', contact: 'Emma Thompson', email: 'emma@blueskylabs.co.uk', country: 'United Kingdom', industry: 'saas', status: 'trial', plan: 'starter', seats: 3, mrr: 0, health: 65, signupDate: '2026-06-20', lastContact: '2026-08-06' },
+  { id: 4, company: 'Northgate Systems', contact: 'David Kim', email: 'dkim@northgate.com', country: 'Canada', industry: 'manufacturing', status: 'active', plan: 'growth', seats: 15, mrr: 499, health: 79, signupDate: '2025-01-18', lastContact: '2026-07-15' },
+  { id: 5, company: 'Vantage Digital', contact: 'Olivia Martins', email: 'olivia.martins@vantage.digital', country: 'Australia', industry: 'media', status: 'active', plan: 'growth', seats: 12, mrr: 399, health: 82, signupDate: '2024-09-30', lastContact: '2026-07-22' },
+  { id: 6, company: 'Harbor Health', contact: "James O'Brien", email: 'j.obrien@harborhealth.org', country: 'United States', industry: 'healthcare', status: 'active', plan: 'enterprise', seats: 240, mrr: 5400, health: 91, signupDate: '2023-06-14', lastContact: '2026-08-01' },
+  { id: 7, company: 'Riverstone Media', contact: 'Priya Sharma', email: 'priya@riverstone.media', country: 'India', industry: 'media', status: 'churned', plan: 'scale', seats: 0, mrr: 0, health: 22, signupDate: '2024-02-08', lastContact: '2026-03-19' },
+  { id: 8, company: 'Lumen Retail', contact: 'Lucas Müller', email: 'lucas.mueller@lumenretail.de', country: 'Germany', industry: 'retail', status: 'active', plan: 'scale', seats: 55, mrr: 1890, health: 85, signupDate: '2024-12-02', lastContact: '2026-07-30' },
+  { id: 9, company: 'Pinewood Financial', contact: 'Aisha Bello', email: 'aisha.bello@pinewoodfin.com', country: 'United States', industry: 'fintech', status: 'paused', plan: 'growth', seats: 8, mrr: 0, health: 48, signupDate: '2025-04-27', lastContact: '2026-05-11' },
+  { id: 10, company: 'Orchard Foods', contact: 'Carlos Mendez', email: 'carlos@orchardfoods.mx', country: 'Brazil', industry: 'retail', status: 'active', plan: 'starter', seats: 4, mrr: 99, health: 73, signupDate: '2025-08-09', lastContact: '2026-07-19' },
+  { id: 11, company: 'Ironclad Security', contact: 'Nina Petrova', email: 'nina.petrova@ironcladsec.com', country: 'Netherlands', industry: 'saas', status: 'active', plan: 'enterprise', seats: 130, mrr: 3600, health: 96, signupDate: '2023-09-21', lastContact: '2026-08-05' },
+  { id: 12, company: 'Brightpath Education', contact: 'Tomás Silva', email: 'tomas.silva@brightpath.edu', country: 'Portugal', industry: 'education', status: 'trial', plan: 'starter', seats: 2, mrr: 0, health: 61, signupDate: '2026-07-01', lastContact: '2026-08-07' },
+  { id: 13, company: 'Quantum Ledger', contact: 'Grace Okafor', email: 'grace@quantumledger.io', country: 'United Kingdom', industry: 'fintech', status: 'active', plan: 'scale', seats: 38, mrr: 1290, health: 87, signupDate: '2024-05-16', lastContact: '2026-07-26' },
+  { id: 14, company: 'Evergreen Energy', contact: 'Hiroshi Tanaka', email: 'h.tanaka@evergreen-energy.jp', country: 'Japan', industry: 'manufacturing', status: 'active', plan: 'growth', seats: 20, mrr: 549, health: 80, signupDate: '2025-02-11', lastContact: '2026-06-28' },
+  { id: 15, company: 'Summit Logistics', contact: 'Fatima Al-Farsi', email: 'fatima@summitlogistics.com', country: 'United States', industry: 'logistics', status: 'active', plan: 'scale', seats: 47, mrr: 1590, health: 89, signupDate: '2024-07-03', lastContact: '2026-08-02' },
+  { id: 16, company: 'Fabrikam Retail', contact: 'Erik Larsson', email: 'erik.larsson@fabrikam.se', country: 'Sweden', industry: 'retail', status: 'churned', plan: 'starter', seats: 0, mrr: 0, health: 18, signupDate: '2025-03-22', lastContact: '2026-01-30' },
+  { id: 17, company: 'Beacon Analytics', contact: 'Sofia Rossi', email: 'sofia.rossi@beaconanalytics.com', country: 'Italy', industry: 'saas', status: 'active', plan: 'growth', seats: 11, mrr: 449, health: 76, signupDate: '2025-05-19', lastContact: '2026-07-24' },
+  { id: 18, company: 'Cobalt Cloud', contact: 'Daniel Okoye', email: 'daniel@cobaltcloud.com', country: 'United States', industry: 'saas', status: 'trial', plan: 'growth', seats: 6, mrr: 0, health: 68, signupDate: '2026-06-28', lastContact: '2026-08-08' },
+  { id: 19, company: 'Willow Health', contact: 'Mei Lin', email: 'mei.lin@willowhealth.sg', country: 'Singapore', industry: 'healthcare', status: 'active', plan: 'enterprise', seats: 95, mrr: 2800, health: 92, signupDate: '2023-12-08', lastContact: '2026-07-31' },
+  { id: 20, company: 'Atlas Manufacturing', contact: 'Pierre Dubois', email: 'p.dubois@atlasmfg.fr', country: 'France', industry: 'manufacturing', status: 'paused', plan: 'scale', seats: 30, mrr: 0, health: 44, signupDate: '2024-10-15', lastContact: '2026-04-22' },
+]
+
+/** ~24 open + closed opportunities across the accounts, spread over stages, owners
+ *  and close dates - so the board, calendar, and forecast are all alive. */
+const dealSeed: Record<string, unknown>[] = [
+  { id: 1, name: 'Enterprise rollout', customerId: 2, stage: 'negotiation', owner: 'Sarah Chen', amount: 84000, probability: 70, closeDate: '2026-09-15' },
+  { id: 2, name: 'Platform upgrade', customerId: 6, stage: 'proposal', owner: 'Marcus Lee', amount: 62000, probability: 55, closeDate: '2026-10-02' },
+  { id: 3, name: 'Seat expansion', customerId: 1, stage: 'won', owner: 'Elena Vidal', amount: 24000, probability: 100, closeDate: '2026-07-20' },
+  { id: 4, name: 'Pilot program', customerId: 3, stage: 'qualified', owner: 'Tom Baker', amount: 12000, probability: 35, closeDate: '2026-11-10' },
+  { id: 5, name: 'Annual renewal', customerId: 11, stage: 'negotiation', owner: 'Sarah Chen', amount: 58000, probability: 65, closeDate: '2026-09-30' },
+  { id: 6, name: 'Security add-on', customerId: 19, stage: 'proposal', owner: 'Marcus Lee', amount: 33000, probability: 45, closeDate: '2026-10-18' },
+  { id: 7, name: 'Data migration', customerId: 8, stage: 'lead', owner: 'Elena Vidal', amount: 21000, probability: 20, closeDate: '2026-12-05' },
+  { id: 8, name: 'Multi-region', customerId: 13, stage: 'won', owner: 'Tom Baker', amount: 47000, probability: 100, closeDate: '2026-06-28' },
+  { id: 9, name: 'Onboarding package', customerId: 5, stage: 'qualified', owner: 'Sarah Chen', amount: 9000, probability: 40, closeDate: '2026-11-22' },
+  { id: 10, name: 'Analytics tier', customerId: 15, stage: 'proposal', owner: 'Marcus Lee', amount: 38000, probability: 50, closeDate: '2026-10-08' },
+  { id: 11, name: 'Compliance module', customerId: 6, stage: 'negotiation', owner: 'Elena Vidal', amount: 72000, probability: 75, closeDate: '2026-09-12' },
+  { id: 12, name: 'Trial conversion', customerId: 3, stage: 'lead', owner: 'Tom Baker', amount: 6000, probability: 15, closeDate: '2026-12-20' },
+  { id: 13, name: 'Enterprise SSO', customerId: 2, stage: 'won', owner: 'Sarah Chen', amount: 30000, probability: 100, closeDate: '2026-07-05' },
+  { id: 14, name: 'Capacity boost', customerId: 14, stage: 'qualified', owner: 'Marcus Lee', amount: 15000, probability: 30, closeDate: '2026-11-15' },
+  { id: 15, name: 'Premium support', customerId: 17, stage: 'proposal', owner: 'Elena Vidal', amount: 18000, probability: 45, closeDate: '2026-10-25' },
+  { id: 16, name: 'Global expansion', customerId: 11, stage: 'lost', owner: 'Tom Baker', amount: 90000, probability: 0, closeDate: '2026-05-30' },
+  { id: 17, name: 'API integration', customerId: 10, stage: 'qualified', owner: 'Sarah Chen', amount: 8000, probability: 35, closeDate: '2026-11-28' },
+  { id: 18, name: 'Renewal + upsell', customerId: 19, stage: 'negotiation', owner: 'Marcus Lee', amount: 66000, probability: 70, closeDate: '2026-09-22' },
+  { id: 19, name: 'Sandbox pilot', customerId: 18, stage: 'lead', owner: 'Elena Vidal', amount: 7000, probability: 20, closeDate: '2026-12-12' },
+  { id: 20, name: 'Custom reporting', customerId: 15, stage: 'won', owner: 'Tom Baker', amount: 26000, probability: 100, closeDate: '2026-06-18' },
+  { id: 21, name: 'Migration service', customerId: 4, stage: 'proposal', owner: 'Sarah Chen', amount: 22000, probability: 50, closeDate: '2026-10-14' },
+  { id: 22, name: 'Team plan', customerId: 5, stage: 'lost', owner: 'Marcus Lee', amount: 11000, probability: 0, closeDate: '2026-04-16' },
+  { id: 23, name: 'Platform renewal', customerId: 1, stage: 'negotiation', owner: 'Elena Vidal', amount: 44000, probability: 60, closeDate: '2026-09-08' },
+  { id: 24, name: 'Advanced tier', customerId: 13, stage: 'qualified', owner: 'Tom Baker', amount: 19000, probability: 40, closeDate: '2026-11-05' },
+]
+
+/** The hero grid: the no-code default plus the enterprise surface (filtering, export
+ *  toolbar, totals, status pills, row actions) and custom cells - MRR as currency,
+ *  health as a progress bar, email as a link, dates formatted, larger comfortable rows. */
+function crudGrid(): Block {
+  const base = defaultBlockConfig('grid', customers) as GridConfig
+  const columns: GridColumnConfig[] = gridColumns(customers).map((c) =>
+    c.field === 'mrr' ? { ...c, header: 'MRR', format: { type: 'currency', currency: 'USD' }, align: 'right', aggregate: 'sum' }
+    : c.field === 'seats' ? { ...c, align: 'right', aggregate: 'sum' }
+    : c.field === 'health' ? { ...c, header: 'Health', width: 140, cellType: { kind: 'progress', max: 100 } }
+    : c.field === 'signupDate' || c.field === 'lastContact' ? { ...c, format: { type: 'date' } }
+    : c.field === 'email' ? { ...c, cellType: { kind: 'link', as: 'email' } }
+    : c,
+  )
+  const config: GridConfig = {
+    ...base,
+    columns,
+    filterable: true,
+    filterUi: { global: true, row: false, menu: true },
+    export: { csv: true, json: true, copy: true },
+    rowSummaries: true,
+    pageSize: 10,
+    density: 'comfortable',
+    rowActions: [{ kind: 'edit' }, { kind: 'delete' }],
+    props: { headerHeight: 48 },
+  }
+  return { id: 'grid-1', span: 3, height: 440, config }
+}
+
+/** The Deals grid: stage/owner chips, currency amount (summed), a probability bar. */
+function dealsGrid(): Block {
+  const base = defaultBlockConfig('grid', deals) as GridConfig
+  const columns: GridColumnConfig[] = gridColumns(deals).map((c) =>
+    c.field === 'amount' ? { ...c, format: { type: 'currency', currency: 'USD' }, align: 'right', aggregate: 'sum' }
+    : c.field === 'probability' ? { ...c, header: 'Win %', width: 130, cellType: { kind: 'progress', max: 100 } }
+    : c.field === 'closeDate' ? { ...c, format: { type: 'date' } }
+    : c,
+  )
+  const config: GridConfig = {
+    ...base,
+    columns,
+    filterable: true,
+    filterUi: { global: true, row: false, menu: true },
+    export: { csv: true, json: true, copy: true },
+    rowSummaries: true,
+    pageSize: 10,
+    density: 'comfortable',
+    rowActions: [{ kind: 'edit' }, { kind: 'delete' }],
+    props: { headerHeight: 48 },
+  }
+  return { id: 'grid-1', span: 3, height: 440, config }
+}
+
+/** A docking-workspace console: a facet filter, the rich grid, and a record panel laid
+ *  out in a live SvDockManager (drag to float / pin / re-dock) - the signature "wow"
+ *  layout. `buildDockLayout` seeds filter-left, grid-centre, record-right. */
+function dockConsole(entity: EntitySchema, id: string, title: string, order: number, gridBlock: Block, filterFields: string[]): Screen {
+  const blocks: Block[] = [
+    { id: 'filter-1', span: 3, config: { kind: 'filter', fields: filterFields } },
+    gridBlock,
+    { id: 'record-1', span: 3, config: { kind: 'record', editable: true } },
+  ]
+  const base: Screen = { id, entity: entity.name, title, route: id, blocks, nav: { show: true, label: title, order }, layout: 'dock' }
+  return { ...base, dock: buildDockLayout(base) }
+}
+
+/** The Overview: the hero Customers grid FIRST (so opening the app lands on a real
+ *  data grid, not a chart), with KPI cards + charts below it as supporting context. */
+function overviewScreen(): Screen {
+  const dash = dashScreen(customers, { id: 'overview', title: 'Overview', order: 0 }, [
+    { kpi: 'Recurring revenue', measure: 'mrr', reduce: 'sum', format: 'currency', span: 1 },
+    { kpi: 'Accounts', reduce: 'count', span: 1 },
+    { kpi: 'Seats', measure: 'seats', reduce: 'sum', format: 'compact', span: 1 },
+    { gauge: 'Avg health', measure: 'health', reduce: 'avg', min: 0, max: 100, span: 1 },
+    { chart: 'industry', measure: 'mrr', reduce: 'sum', type: 'bar', span: 2 },
+    { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+  ])
+  return { ...dash, blocks: [crudGrid(), ...dash.blocks] }
+}
+
+/** The default first-run project: a complete, enterprise-ready multi-page CRM whose
+ *  hero is the CRUD grid (Overview + two SvDockManager consoles). */
+export function starterProject(): StudioProject {
+  return project({
+    title: 'Acme CRM',
+    brand: 'Acme CRM',
+    accent: '#6366f1',
+    footer: 'Built with SvGrid Studio',
+    entities: [customers, deals],
+    screens: [
+      // Overview: KPIs + charts ABOVE the hero Customers grid.
+      overviewScreen(),
+      // Customers: a dockable console - filter + hero grid + record panel (drag to float / pin).
+      dockConsole(customers, 'customers', 'Customers', 1, crudGrid(), ['status', 'industry', 'plan']),
+      // Pipeline: deals as draggable cards in stage columns (drag to change stage).
+      boardScreen(deals, { id: 'pipeline', title: 'Pipeline', order: 2 }, { groupBy: 'stage', titleField: 'name', badgeField: 'amount', subtitleField: 'owner', filter: ['owner', 'stage'] }),
+      // Deals: a second docking console over the opportunity grid.
+      dockConsole(deals, 'deals', 'Deals', 3, dealsGrid(), ['stage', 'owner']),
+      // Calendar: deals placed on a month calendar by their close date, tinted by stage.
+      calendarScreen(deals, { id: 'calendar', title: 'Calendar', order: 4 }, { dateField: 'closeDate', titleField: 'name', colorField: 'stage', filter: ['owner'] }),
+      // Forecast: pipeline KPIs, value by stage/owner, and a pivot of amount by owner x stage.
+      dashScreen(deals, { id: 'forecast', title: 'Forecast', order: 5 }, [
+        { kpi: 'Pipeline value', measure: 'amount', reduce: 'sum', format: 'currency', span: 1 },
+        { kpi: 'Open deals', reduce: 'count', span: 1 },
+        { kpi: 'Avg deal size', measure: 'amount', reduce: 'avg', format: 'currency', span: 1 },
+        { kpi: 'Largest deal', measure: 'amount', reduce: 'max', format: 'currency', span: 1 },
+        { chart: 'stage', measure: 'amount', reduce: 'sum', type: 'bar', span: 2 },
+        { chart: 'owner', measure: 'amount', reduce: 'sum', type: 'bar', span: 1 },
+        { pivot: { rows: ['owner'], cols: ['stage'], measure: 'amount', aggregate: 'sum' }, span: 3 },
+      ]),
+    ],
+    seed: { customers: customerSeed, deals: dealSeed },
+  })
+}