@svgrid/enterprise 1.2.0 → 2.0.0

package/src/studio/samples/shared.ts

@@ -0,0 +1,305 @@
+/**
+ * Shared helpers for the curated sample apps. A `SampleApp` is a ready-made
+ * `StudioProject` (entities + screens + curated seed + theme) that a user loads
+ * to see a beautiful, working multi-entity app in a couple of clicks.
+ *
+ * Pure + node-safe (studio subtree): each sample is plain data built from the
+ * same immutable ops the designer uses, so it round-trips through
+ * 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, 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 } from '../project.js'
+
+type Row = Record<string, unknown>
+
+/**
+ * Extend a curated seed to `target` rows so grids scroll and charts / KPIs look
+ * substantial (real dashboards have data). The hand-authored rows stay first;
+ * extra rows get realistic generated values, valid ids, and foreign keys drawn
+ * from `fkPools` (relation field -> list of parent ids).
+ */
+export function pad(schema: EntitySchema, rows: Row[], target: number, fkPools: Record<string, string[]> = {}): Row[] {
+  if (rows.length >= target) return rows
+  const pk = schema.idField ?? schema.fields.find((f) => f.primaryKey)?.field ?? 'id'
+  const prefix = String(rows[0]?.[pk] ?? 'r').replace(/\d+$/, '') || 'r'
+  // Title-like text fields (a record's display name) must stay ON-DOMAIN - the
+  // generic generator would put "Premium Backpack" on a property board. So cycle
+  // the entity's own curated seed values (with a numeric suffix on wrap) instead.
+  // Exclude identifier-shaped fields (ref / number / sku / code) which have formats.
+  const firstText = schema.fields.find((f) => f.type === 'text' && f.field !== pk && !/id$|ref|no$|number|code|sku/i.test(f.field))?.field
+  const titleLike = new Set(schema.fields.filter((f) => f.type === 'text' && (/^(name|title|subject|headline|label)$/i.test(f.field) || f.field === firstText)).map((f) => f.field))
+  const seedVals = (field: string) => rows.map((r) => r[field]).filter((v) => v != null && v !== '')
+  const out = [...rows]
+  for (let i = rows.length; i < target; i++) {
+    const row: Row = {}
+    for (const f of schema.fields) {
+      if (f.field === pk) { row[f.field] = `${prefix}${i + 1}`; continue }
+      if (f.computed || f.formula) continue // derived at runtime - never seeded
+      if (f.type === 'relation') {
+        const pool = fkPools[f.field] ?? []
+        row[f.field] = pool.length ? pool[i % pool.length] : (rows[i % rows.length]?.[f.field] ?? '')
+        continue
+      }
+      if (titleLike.has(f.field)) {
+        const vals = seedVals(f.field)
+        if (vals.length) { const round = Math.floor(i / vals.length); row[f.field] = round === 0 ? vals[i] : `${vals[i % vals.length]} ${round + 1}`; continue }
+      }
+      row[f.field] = generateValue(f, i)
+    }
+    out.push(row)
+  }
+  return out
+}
+
+/** The `id` values of a seed array (for building foreign-key pools). */
+export const ids = (rows: Row[]): string[] => rows.map((r) => String(r.id))
+
+/** A ready-made app shown in the gallery. */
+export type SampleApp = {
+  /** Stable id (also the `--template` value). */
+  id: string
+  /** Display name, e.g. "CRM". */
+  name: string
+  /** One-line description for the gallery card. */
+  description: string
+  /** A single emoji used as the card icon. */
+  emoji: string
+  /** Accent color (themes the built app). */
+  accent: string
+  /** Build the full project (fresh each call). */
+  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(
+  entity: EntitySchema,
+  meta: { id: string; title: string; order: number },
+  opts: { groupBy: string; titleField: string; badgeField?: string; subtitleField?: string; filter?: string[]; openScreen?: string },
+): Screen {
+  const blocks: Block[] = []
+  if (opts.filter?.length) blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: opts.filter } })
+  blocks.push({ id: 'board-1', span: 3, config: {
+    kind: 'board', groupBy: opts.groupBy, titleField: opts.titleField,
+    ...(opts.badgeField ? { badgeField: opts.badgeField } : {}),
+    ...(opts.subtitleField ? { subtitleField: opts.subtitleField } : {}),
+    ...(opts.openScreen ? { openScreen: opts.openScreen } : {}),
+  } })
+  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
+}
+
+/** A calendar screen: an optional filter + a month event-calendar placing rows by
+ *  a date field (the signature "schedule" view). */
+export function calendarScreen(
+  entity: EntitySchema,
+  meta: { id: string; title: string; order: number },
+  opts: { dateField: string; titleField: string; colorField?: string; filter?: string[]; openScreen?: string },
+): Screen {
+  const blocks: Block[] = []
+  if (opts.filter?.length) blocks.push({ id: 'filter-1', span: 3, config: { kind: 'filter', fields: opts.filter } })
+  blocks.push({ id: 'calendar-1', span: 3, config: {
+    kind: 'calendar', dateField: opts.dateField, titleField: opts.titleField,
+    ...(opts.colorField ? { colorField: opts.colorField } : {}),
+    ...(opts.openScreen ? { openScreen: opts.openScreen } : {}),
+  } })
+  return { id: meta.id, entity: entity.name, title: meta.title, route: meta.id, blocks, nav: { show: true, label: meta.title, order: meta.order } }
+}
+
+/** 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(
+  entity: EntitySchema,
+  template: ScreenTemplate,
+  over: { id: string; title: string; route?: string; order: number; child?: EntitySchema; foreignKey?: string; linkScreen?: string },
+): Screen {
+  const base = screenFromTemplate(entity, template, { child: over.child, foreignKey: over.foreignKey })
+  const blocks = over.linkScreen
+    ? base.blocks.map((b) => (b.config.kind === 'master-detail' ? { ...b, config: { ...b.config, linkScreen: over.linkScreen } } : b))
+    : base.blocks
+  return {
+    ...base,
+    blocks,
+    id: over.id,
+    title: over.title,
+    route: over.route ?? over.id,
+    nav: { show: true, label: over.title, order: over.order },
+  }
+}
+
+/** Assemble a sample project: entities + screens + per-entity curated seed + theme/shell. */
+export function project(opts: {
+  title: string
+  brand: string
+  accent: string
+  footer?: string
+  navStyle?: 'sidebar' | 'top-nav'
+  navPosition?: 'left' | 'right'
+  /** A design-system preset id (font + radius + palette) from `studioThemes` -
+   *  what makes each app read as a distinct product (Salesforce vs Excel vs Linear). */
+  preset?: string
+  mode?: 'light' | 'dark'
+  entities: EntitySchema[]
+  screens: Screen[]
+  seed: Record<string, Record<string, unknown>[]>
+}): StudioProject {
+  const dataSources: Record<string, EntityDataSource> = {}
+  for (const e of opts.entities) dataSources[e.name] = { kind: 'memory', seed: opts.seed[e.name] ?? [] }
+  return sanitizeProject({
+    title: opts.title,
+    entities: opts.entities,
+    screens: opts.screens,
+    dataSource: 'memory',
+    dataSources,
+    theme: {
+      accent: opts.accent,
+      ...(opts.preset ? { preset: opts.preset } : {}),
+      ...(opts.mode ? { mode: opts.mode } : {}),
+      shell: { style: opts.navStyle ?? 'sidebar', brand: opts.brand, footer: opts.footer ?? '', navPosition: opts.navPosition ?? 'left' },
+    },
+  })
+}

package/src/studio/samples/subscriptions.ts

@@ -0,0 +1,183 @@
+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'] }),
+      ],
+    })
+  },
+}