@svgrid/enterprise 1.2.0 → 2.0.1

package/src/studio/samples/ecommerce.ts

@@ -0,0 +1,187 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, boardScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const products: EntitySchema = {
+  name: 'products',
+  label: 'Product',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'sku', type: 'text', label: 'SKU', input: { editorType: 'mask', mask: 'AAA-#####', help: 'Warehouse stock code' } },
+    { field: 'category', type: 'enum', required: true, options: [
+      { value: 'electronics', label: 'Electronics', color: '#6366f1' },
+      { value: 'home', label: 'Home', color: '#10b981' },
+      { value: 'apparel', label: 'Apparel', color: '#f59e0b' },
+      { value: 'office', label: 'Office', color: '#0ea5e9' },
+    ] },
+    { field: 'price', type: 'number', label: 'Price ($)', required: true, min: 0, defaultValue: 0, input: { prefix: '$', help: 'Retail price' } },
+    { field: 'stock', type: 'number', label: 'In stock', min: 0, defaultValue: 0 },
+    // Derived: inventory value on hand (display-only, never stored).
+    { field: 'stockValue', type: 'number', label: 'Stock value ($)', readonly: true, formula: 'price * stock' },
+    { field: 'rating', type: 'number', label: 'Rating', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 customer rating' } },
+    { field: 'tags', type: 'text', label: 'Tags', input: { editorType: 'chips', help: 'Merchandising tags' } },
+    { field: 'color', type: 'text', label: 'Swatch', input: { editorType: 'color', help: 'Primary colorway' } },
+    { field: 'imageUrl', type: 'text', label: 'Image', format: 'url', input: { placeholder: 'https://…' } },
+    { field: 'active', type: 'boolean', label: 'Active', defaultValue: true },
+  ],
+}
+
+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 },
+    { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Primary contact number' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Billing country' } },
+    { field: 'tier', type: 'enum', required: true, options: [
+      { value: 'free', label: 'Free', color: '#94a3b8' },
+      { value: 'plus', label: 'Plus', color: '#6366f1' },
+      { value: 'vip', label: 'VIP', color: '#f59e0b' },
+    ] },
+    { field: 'joinedAt', type: 'datetime', label: 'Joined', input: { help: 'Signup date and time' } },
+    { field: 'active', type: 'boolean', defaultValue: true },
+  ],
+}
+
+const orders: EntitySchema = {
+  name: 'orders',
+  label: 'Order',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'ref', type: 'text', label: 'Reference' },
+    { field: 'customerId', type: 'relation', label: 'Customer', relation: { entity: 'customers', foreignKey: 'customerId', labelField: 'name' } },
+    { field: 'status', type: 'enum', required: true, options: [
+      { value: 'pending', label: 'Pending', color: '#f59e0b' },
+      { value: 'paid', label: 'Paid', color: '#6366f1' },
+      { value: 'shipped', label: 'Shipped', color: '#10b981' },
+      { value: 'refunded', label: 'Refunded', color: '#ef4444' },
+    ] },
+    { field: 'total', type: 'number', label: 'Total ($)', required: true, min: 0, input: { prefix: '$' } },
+    { field: 'discount', type: 'number', label: 'Discount (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Order-level discount' } },
+    // Derived: revenue after the discount is applied (display-only).
+    { field: 'net', type: 'number', label: 'Net ($)', readonly: true, formula: 'total - total * discount / 100' },
+    { field: 'placedAt', type: 'datetime', label: 'Placed' },
+  ],
+}
+
+// Order grid formatting: status pills plus numeric thresholds - big-ticket orders
+// green + bold, tiny orders muted, and steep discounts flagged red so margin risk
+// pops without reading a number.
+const orderFormats: FormatRule[] = [
+  ...statusPills(orders, 'status'),
+  { field: 'total', op: 'gte', value: 500, color: '#16a34a', bold: true },
+  { field: 'total', op: 'lt', value: 100, color: '#94a3b8' },
+  { field: 'discount', op: 'gte', value: 20, color: '#dc2626', bold: true },
+]
+
+// Product grid formatting: category pills plus stock thresholds - out-of-stock /
+// low stock red + bold, healthy stock green, and premium prices bold.
+const productFormats: FormatRule[] = [
+  ...statusPills(products, 'category'),
+  { field: 'stock', op: 'lt', value: 10, color: '#dc2626', bold: true },
+  { field: 'stock', op: 'gte', value: 200, color: '#16a34a' },
+  { field: 'price', op: 'gte', value: 300, bold: true },
+]
+
+const seed = {
+  products: [
+    { id: 'p1', name: 'Mechanical Keyboard', sku: 'ELE-01001', category: 'electronics', price: 120, stock: 42, rating: 5, tags: ['Bestseller', 'New'], color: '#111827', imageUrl: 'https://cdn.shopadmin.io/p/keyboard.png', active: true },
+    { id: 'p2', name: 'Standing Desk', sku: 'HOM-02002', category: 'home', price: 480, stock: 12, rating: 4, tags: ['Ergonomic'], color: '#a16207', imageUrl: 'https://cdn.shopadmin.io/p/desk.png', active: true },
+    { id: 'p3', name: 'Noise-Cancelling Headphones', sku: 'ELE-01003', category: 'electronics', price: 260, stock: 0, rating: 4, tags: ['Premium', 'Audio'], color: '#1e3a8a', imageUrl: 'https://cdn.shopadmin.io/p/headphones.png', active: false },
+    { id: 'p4', name: 'Ergonomic Mouse', sku: 'ELE-01004', category: 'electronics', price: 60, stock: 130, rating: 5, tags: ['Ergonomic', 'Wireless'], color: '#374151', imageUrl: 'https://cdn.shopadmin.io/p/mouse.png', active: true },
+    { id: 'p5', name: 'Desk Lamp', sku: 'HOM-02005', category: 'home', price: 45, stock: 88, rating: 3, tags: ['Home'], color: '#f59e0b', imageUrl: 'https://cdn.shopadmin.io/p/lamp.png', active: true },
+    { id: 'p6', name: 'Cotton Hoodie', sku: 'APP-03006', category: 'apparel', price: 55, stock: 210, rating: 4, tags: ['Cotton', 'Casual'], color: '#6366f1', imageUrl: 'https://cdn.shopadmin.io/p/hoodie.png', active: true },
+    { id: 'p7', name: 'Notebook Pack', sku: 'OFF-04007', category: 'office', price: 18, stock: 500, rating: 5, tags: ['Bulk'], color: '#10b981', imageUrl: 'https://cdn.shopadmin.io/p/notebook.png', active: true },
+  ],
+  customers: [
+    { id: 'c1', name: 'Ada Lovelace', email: 'ada@analytic.io', phone: '+1 (415) 555-0110', country: 'United States', tier: 'vip', joinedAt: '2025-01-15T09:20:00Z', active: true },
+    { id: 'c2', name: 'Alan Turing', email: 'alan@bletchley.uk', phone: '+44 20 7946 0111', country: 'United Kingdom', tier: 'plus', joinedAt: '2025-03-02T14:05:00Z', active: true },
+    { id: 'c3', name: 'Grace Hopper', email: 'grace@navy.mil', phone: '+1 (202) 555-0112', country: 'United States', tier: 'vip', joinedAt: '2024-11-08T11:45:00Z', active: true },
+    { id: 'c4', name: 'Linus Torvalds', email: 'linus@kernel.org', phone: '+358 9 5550113', country: 'Finland', tier: 'plus', joinedAt: '2025-05-21T08:30:00Z', active: true },
+    { id: 'c5', name: 'Barbara Liskov', email: 'barbara@sub.dev', phone: '+1 (650) 555-0114', country: 'United States', tier: 'free', joinedAt: '2025-02-17T16:10:00Z', active: false },
+    { id: 'c6', name: 'Guido van Rossum', email: 'guido@py.org', phone: '+31 20 5550115', country: 'Netherlands', tier: 'plus', joinedAt: '2025-04-09T10:00:00Z', active: true },
+  ],
+  orders: [
+    { id: 'o1', ref: 'ORD-1001', customerId: 'c1', status: 'shipped', total: 640, discount: 10, placedAt: '2026-06-12T14:30:00Z' },
+    { id: 'o2', ref: 'ORD-1002', customerId: 'c2', status: 'paid', total: 120, discount: 0, placedAt: '2026-06-18T09:15:00Z' },
+    { id: 'o3', ref: 'ORD-1003', customerId: 'c3', status: 'pending', total: 305, discount: 15, placedAt: '2026-07-01T18:40:00Z' },
+    { id: 'o4', ref: 'ORD-1004', customerId: 'c1', status: 'refunded', total: 260, discount: 0, placedAt: '2026-05-22T12:05:00Z' },
+    { id: 'o5', ref: 'ORD-1005', customerId: 'c4', status: 'shipped', total: 78, discount: 5, placedAt: '2026-07-03T07:50:00Z' },
+    { id: 'o6', ref: 'ORD-1006', customerId: 'c6', status: 'paid', total: 540, discount: 20, placedAt: '2026-07-08T20:25:00Z' },
+    { id: 'o7', ref: 'ORD-1007', customerId: 'c3', status: 'pending', total: 45, discount: 0, placedAt: '2026-07-10T13:00:00Z' },
+    { id: 'o8', ref: 'ORD-1008', customerId: 'c2', status: 'shipped', total: 198, discount: 25, placedAt: '2026-06-28T15:35:00Z' },
+  ],
+}
+
+export const ecommerce: SampleApp = {
+  id: 'ecommerce',
+  name: 'E-commerce admin',
+  description: 'Products, customers and orders - enterprise revenue + catalog dashboards (KPI revenue sparkline + target, gauges, area sales trend, category x stock pivot, tabbed breakdowns), filtered status-pill grids with low-stock red formatting and row actions, per-customer order-history master/detail, and rich edit forms (SKU mask, star rating, tags, color swatch, phone, country, discount slider).',
+  emoji: '\u{1F6D2}',
+  accent: '#10b981',
+  build: () => {
+    const productRows = pad(products, seed.products, 18)
+    const customerRows = pad(customers, seed.customers, 16)
+    const orderRows = pad(orders, seed.orders, 34, { customerId: ids(customerRows) })
+    return project({
+      title: 'Shop Admin',
+      brand: 'Shop Admin',
+      accent: '#10b981',
+      preset: 'vercel',
+      navStyle: 'top-nav',
+      footer: '© Shop Inc.',
+      entities: [products, customers, orders],
+      seed: { products: productRows, customers: customerRows, orders: orderRows },
+      screens: [
+        // Revenue dashboard: KPI cards (a revenue card with a sparkline over placed
+        // dates + a $12k target), a target gauge, a status breakdown + pie, a
+        // sales-over-time area trend, a tabbed breakdown, and a status-pill order grid.
+        dashScreen(orders, { id: 'overview', title: 'Overview', order: 0 }, [
+          { kpi: 'Revenue', measure: 'total', reduce: 'sum', format: 'currency', trendField: 'placedAt', trendReduce: 'sum', target: 12000, span: 1 },
+          { kpi: 'Orders', reduce: 'count', span: 1 },
+          { kpi: 'Avg order', measure: 'total', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Revenue vs $15k target', measure: 'total', reduce: 'sum', min: 0, max: 15000, unit: '$', span: 1 },
+          { chart: 'status', measure: 'total', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'placedAt', measure: 'total', reduce: 'sum', type: 'area', span: 3 },
+          { tabs: [
+            { label: 'Revenue by status', tiles: [{ chart: 'status', measure: 'total', reduce: 'sum', type: 'bar' }] },
+            { label: 'Orders by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: orderFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Catalog dashboard: stock + price KPIs (units compact-formatted), a rating
+        // gauge, category breakdowns, a category x active pivot of stock, a faceted
+        // filter, and a product grid with low-stock red formatting + inline edit.
+        // Fulfillment board: orders as cards in status columns (pending/paid/shipped/refunded).
+        boardScreen(orders, { id: 'board', title: 'Fulfillment', order: 1 }, { groupBy: 'status', titleField: 'ref', badgeField: 'total', filter: ['status', 'customerId'] }),
+        // Customer 360: shopper header (tier pill) with an order-history timeline
+        // (by placed date, colored by fulfillment status, $ order totals).
+        detailScreen(customers, { id: 'customer-360', title: 'Customer 360', order: 2 }, {
+          titleField: 'name', subtitleField: 'country', statusField: 'tier',
+          related: [{ entity: 'orders', foreignKey: 'customerId', label: 'Orders', titleField: 'ref', subtitleField: 'total', dateField: 'placedAt', statusField: 'status' }],
+        }),
+        dashScreen(products, { id: 'catalog', title: 'Catalog', order: 3 }, [
+          { kpi: 'Products', reduce: 'count', span: 1 },
+          { kpi: 'Units in stock', measure: 'stock', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg rating', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'category', measure: 'stock', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'category', reduce: 'count', type: 'pie', span: 1 },
+          { pivot: { rows: ['category'], cols: ['active'], measure: 'stock', aggregate: 'sum' }, span: 3 },
+          { filter: ['category', 'active'], span: 3 },
+          { grid: true, format: productFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        screen(customers, 'master-detail', { id: 'customers', title: 'Customers', order: 4, child: orders, foreignKey: 'customerId', linkScreen: 'customer-360' }),
+        formScreen(products, { id: 'products', title: 'Products', order: 5 }, undefined, { format: productFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['category', 'tags', 'active']),
+        formScreen(orders, { id: 'orders', title: 'Orders', order: 6 }, undefined, { format: orderFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'customerId']),
+      ],
+    })
+  },
+}

package/src/studio/samples/events.ts

@@ -0,0 +1,199 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, calendarScreen, project, dashScreen, detailScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const eventsEntity: EntitySchema = {
+  name: 'events',
+  label: 'Event',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 3, input: { help: 'Public event title' } },
+    { field: 'category', type: 'enum', label: 'Category', required: true, defaultValue: 'conference', options: [
+      { value: 'conference', label: 'Conference', color: '#6366f1' },
+      { value: 'workshop', label: 'Workshop', color: '#10b981' },
+      { value: 'webinar', label: 'Webinar', color: '#0ea5e9' },
+      { value: 'meetup', label: 'Meetup', color: '#f59e0b' },
+    ] },
+    { field: 'status', type: 'enum', label: 'Status', required: true, defaultValue: 'draft', options: [
+      { value: 'draft', label: 'Draft', color: '#94a3b8' },
+      { value: 'published', label: 'Published', color: '#6366f1' },
+      { value: 'sold_out', label: 'Sold out', color: '#ef4444' },
+      { value: 'done', label: 'Done', color: '#10b981' },
+    ] },
+    { field: 'capacity', type: 'number', label: 'Capacity', required: true, min: 1, max: 5000, defaultValue: 100, input: { help: 'Maximum seats available' } },
+    { field: 'price', type: 'number', label: 'Ticket price ($)', min: 0, defaultValue: 0, input: { prefix: '$', help: 'Standard ticket price' } },
+    // Derived: projected gross if the event sells out (display-only, never stored).
+    { field: 'revenue', type: 'number', label: 'Max revenue ($)', readonly: true, formula: 'price * capacity' },
+    { field: 'startAt', type: 'datetime', label: 'Starts at', required: true, input: { editorType: 'datetime', help: 'Local start date and time' } },
+    { field: 'topics', type: 'text', label: 'Topics', input: { editorType: 'chips', help: 'Session themes / tracks' } },
+    { field: 'color', type: 'text', label: 'Brand color', defaultValue: '#6366f1', input: { editorType: 'color', help: 'Accent used on the event page' } },
+    { field: 'website', type: 'text', label: 'Website', format: 'url', input: { placeholder: 'https://…', help: 'Landing page URL' } },
+  ],
+}
+
+const attendees: EntitySchema = {
+  name: 'attendees',
+  label: 'Attendee',
+  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: 'Used for the confirmation email' } },
+    { field: 'phone', type: 'text', label: 'Phone', input: { editorType: 'phone', help: 'Mobile for event reminders' } },
+    { field: 'country', type: 'text', label: 'Country', input: { editorType: 'country', help: 'Billing country' } },
+    { field: 'company', type: 'text', label: 'Company' },
+    { field: 'interests', type: 'text', label: 'Interests', input: { editorType: 'chips', help: 'Topics this attendee follows' } },
+    { field: 'vip', type: 'boolean', label: 'VIP', defaultValue: false },
+  ],
+}
+
+const registrations: EntitySchema = {
+  name: 'registrations',
+  label: 'Registration',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'eventId', type: 'relation', label: 'Event', relation: { entity: 'events', foreignKey: 'eventId', labelField: 'name' } },
+    { field: 'attendeeId', type: 'relation', label: 'Attendee', relation: { entity: 'attendees', foreignKey: 'attendeeId', labelField: 'name' } },
+    { field: 'ticket', type: 'enum', label: 'Ticket', required: true, defaultValue: 'standard', options: [
+      { value: 'standard', label: 'Standard', color: '#6366f1' },
+      { value: 'vip', label: 'VIP', color: '#f59e0b' },
+      { value: 'student', label: 'Student', color: '#10b981' },
+    ] },
+    { field: 'amount', type: 'number', label: 'Amount ($)', min: 0, defaultValue: 0, input: { prefix: '$', help: 'Charged after any discount' } },
+    { field: 'discount', type: 'number', label: 'Discount (%)', min: 0, max: 100, defaultValue: 0, input: { editorType: 'slider', help: 'Promo discount applied' } },
+    { field: 'status', type: 'enum', label: 'Status', required: true, defaultValue: 'confirmed', options: [
+      { value: 'confirmed', label: 'Confirmed', color: '#10b981' },
+      { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+      { value: 'waitlist', label: 'Waitlist', color: '#94a3b8' },
+    ] },
+    { field: 'registeredAt', type: 'datetime', label: 'Registered at', input: { editorType: 'datetime', help: 'When the ticket was booked' } },
+    { field: 'rating', type: 'number', label: 'Feedback', min: 1, max: 5, input: { editorType: 'rating', help: 'Post-event satisfaction (1-5)' } },
+  ],
+}
+
+// Registration grid formatting: status + ticket-tier pills, plus numeric
+// thresholds (big-ticket amounts bold, poor ratings red, top ratings green) -
+// data-driven color, not just status pills.
+const registrationFormats: FormatRule[] = [
+  ...statusPills(registrations, 'status'),
+  ...statusPills(registrations, 'ticket'),
+  { field: 'amount', op: 'gte', value: 300, bold: true },
+  { field: 'rating', op: 'lte', value: 2, color: '#dc2626' },
+  { field: 'rating', op: 'gte', value: 5, color: '#16a34a', bold: true },
+]
+
+// Event grid formatting: status + category pills, plus capacity / price
+// thresholds (large-venue capacity bold, free events muted, premium tickets green).
+const eventFormats: FormatRule[] = [
+  ...statusPills(eventsEntity, 'status'),
+  ...statusPills(eventsEntity, 'category'),
+  { field: 'capacity', op: 'gte', value: 500, bold: true },
+  { field: 'price', op: 'eq', value: 0, color: '#94a3b8' },
+  { field: 'price', op: 'gte', value: 400, color: '#16a34a', bold: true },
+]
+
+const seed = {
+  events: [
+    { id: 'ev1', name: 'Svelte Summit 2026', category: 'conference', status: 'published', capacity: 800, price: 490, startAt: '2026-09-12T09:00:00.000Z', topics: ['Svelte', 'Frontend', 'Performance'], color: '#6366f1', website: 'https://sveltesummit.com' },
+    { id: 'ev2', name: 'Grid Performance Workshop', category: 'workshop', status: 'sold_out', capacity: 50, price: 150, startAt: '2026-07-28T13:30:00.000Z', topics: ['Grids', 'Virtualization'], color: '#10b981', website: 'https://svgrid.com/workshop' },
+    { id: 'ev3', name: 'Data Apps Webinar', category: 'webinar', status: 'done', capacity: 500, price: 0, startAt: '2026-05-19T16:00:00.000Z', topics: ['Studio', 'No-code'], color: '#0ea5e9', website: 'https://svgrid.com/webinar' },
+    { id: 'ev4', name: 'Frontend Meetup Berlin', category: 'meetup', status: 'published', capacity: 120, price: 25, startAt: '2026-08-06T18:00:00.000Z', topics: ['Community', 'Svelte'], color: '#f59e0b', website: 'https://frontend.berlin' },
+    { id: 'ev5', name: 'AI in Tooling Conference', category: 'conference', status: 'draft', capacity: 600, price: 420, startAt: '2026-11-03T09:30:00.000Z', topics: ['AI', 'DevTools', 'MCP'], color: '#8b5cf6', website: 'https://aitooling.dev' },
+    { id: 'ev6', name: 'TypeScript Deep Dive', category: 'workshop', status: 'published', capacity: 60, price: 320, startAt: '2026-10-15T10:00:00.000Z', topics: ['TypeScript', 'Types'], color: '#3b82f6', website: 'https://tsdeepdive.io' },
+  ],
+  attendees: [
+    { id: 'at1', name: 'Clara Voss', email: 'clara.voss@nimbus.io', phone: '+1 (415) 555-0110', country: 'United States', company: 'Nimbus', interests: ['Svelte', 'Performance'], vip: true },
+    { id: 'at2', name: 'Diego Martins', email: 'diego.martins@lumen.dev', phone: '+55 11 95555-0111', country: 'Brazil', company: 'Lumen', interests: ['Frontend'], vip: false },
+    { id: 'at3', name: 'Priya Anand', email: 'priya.anand@quanta.co', phone: '+91 80 5550 0112', country: 'India', company: 'Quanta', interests: ['AI', 'DevTools'], vip: false },
+    { id: 'at4', name: 'Felix Braun', email: 'felix.braun@orbit.tech', phone: '+49 30 5550113', country: 'Germany', company: 'Orbit', interests: ['TypeScript', 'Grids'], vip: true },
+    { id: 'at5', name: 'Hana Sato', email: 'hana.sato@meridian.jp', phone: '+81 3 5550 0114', country: 'Japan', company: 'Meridian', interests: ['Community'], vip: false },
+    { id: 'at6', name: 'Lucas Moreau', email: 'lucas.moreau@volta.fr', phone: '+33 1 55 55 0115', country: 'France', company: 'Volta', interests: ['Studio', 'No-code'], vip: false },
+  ],
+  registrations: [
+    { id: 'rg1', eventId: 'ev1', attendeeId: 'at1', ticket: 'vip', amount: 490, discount: 0, status: 'confirmed', registeredAt: '2026-06-01T10:15:00.000Z', rating: 5 },
+    { id: 'rg2', eventId: 'ev1', attendeeId: 'at2', ticket: 'standard', amount: 190, discount: 0, status: 'confirmed', registeredAt: '2026-06-02T14:40:00.000Z', rating: 4 },
+    { id: 'rg3', eventId: 'ev2', attendeeId: 'at3', ticket: 'standard', amount: 150, discount: 0, status: 'waitlist', registeredAt: '2026-06-10T09:05:00.000Z', rating: 3 },
+    { id: 'rg4', eventId: 'ev3', attendeeId: 'at4', ticket: 'student', amount: 0, discount: 100, status: 'confirmed', registeredAt: '2026-04-28T11:20:00.000Z', rating: 5 },
+    { id: 'rg5', eventId: 'ev4', attendeeId: 'at5', ticket: 'standard', amount: 25, discount: 0, status: 'cancelled', registeredAt: '2026-07-01T17:30:00.000Z', rating: 2 },
+    { id: 'rg6', eventId: 'ev6', attendeeId: 'at6', ticket: 'vip', amount: 320, discount: 0, status: 'confirmed', registeredAt: '2026-07-03T08:45:00.000Z', rating: 4 },
+    { id: 'rg7', eventId: 'ev1', attendeeId: 'at5', ticket: 'student', amount: 90, discount: 50, status: 'confirmed', registeredAt: '2026-06-05T20:10:00.000Z', rating: 5 },
+    { id: 'rg8', eventId: 'ev4', attendeeId: 'at2', ticket: 'standard', amount: 25, discount: 0, status: 'confirmed', registeredAt: '2026-07-08T12:00:00.000Z', rating: 4 },
+  ],
+}
+
+export const events: SampleApp = {
+  id: 'events',
+  name: 'Events',
+  description: 'Events, attendees and registrations - sales + events dashboards (KPI sparklines, revenue target, feedback + capacity gauges, amount-over-time area trend, category x status pivot, tabs), filtered status-pill grids with row actions, master/detail, and rich edit forms (datetime, topic chips, brand color, phone, country, feedback rating, discount slider) with a computed max-revenue field.',
+  emoji: '\u{1F39F}\u{FE0F}',
+  accent: '#ec4899',
+  build: () => {
+    const eventRows = pad(eventsEntity, seed.events, 24)
+    const attendeeRows = pad(attendees, seed.attendees, 70)
+    const registrationRows = pad(registrations, seed.registrations, 90, { eventId: ids(eventRows), attendeeId: ids(attendeeRows) })
+    return project({
+      title: 'Evently',
+      brand: 'Evently',
+      accent: '#ec4899',
+      preset: 'catppuccin',
+      mode: 'dark',
+      navStyle: 'top-nav',
+      footer: '',
+      entities: [eventsEntity, attendees, registrations],
+      seed: { events: eventRows, attendees: attendeeRows, registrations: registrationRows },
+      screens: [
+        // Sales dashboard: registration KPIs (a revenue card with a sparkline over
+        // register dates + a $50k target), a feedback gauge, ticket / status
+        // breakdowns, an amount-over-time area trend, a ticket x status pivot, a
+        // tabbed breakdown, and a status-pill registration grid.
+        dashScreen(registrations, { id: 'overview', title: 'Overview', order: 0 }, [
+          { kpi: 'Ticket revenue', measure: 'amount', reduce: 'sum', format: 'currency', trendField: 'registeredAt', trendReduce: 'sum', target: 50000, span: 1 },
+          { kpi: 'Registrations', reduce: 'count', span: 1 },
+          { kpi: 'Avg ticket', measure: 'amount', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg feedback', measure: 'rating', reduce: 'avg', min: 0, max: 5, span: 1 },
+          { chart: 'ticket', measure: 'amount', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { chart: 'registeredAt', measure: 'amount', reduce: 'sum', type: 'area', span: 3 },
+          { pivot: { rows: ['ticket'], cols: ['status'], measure: 'amount', aggregate: 'sum' }, span: 3 },
+          { tabs: [
+            { label: 'Revenue by ticket', tiles: [{ chart: 'ticket', measure: 'amount', reduce: 'sum', type: 'bar' }] },
+            { label: 'Registrations by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: registrationFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Events dashboard: catalog KPIs (an avg-price card trending over start
+        // dates), a capacity gauge, category breakdowns, a category x status pivot, a
+        // tabbed view, a filter, and an event grid with status + category pills.
+        dashScreen(eventsEntity, { id: 'catalog', title: 'Catalog', order: 1 }, [
+          { kpi: 'Events', reduce: 'count', span: 1 },
+          { kpi: 'Total capacity', measure: 'capacity', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg price', measure: 'price', reduce: 'avg', format: 'currency', trendField: 'startAt', trendReduce: 'avg', span: 1 },
+          { gauge: 'Avg capacity', measure: 'capacity', reduce: 'avg', min: 0, max: 1000, span: 1 },
+          { chart: 'category', measure: 'capacity', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'category', reduce: 'count', type: 'pie', span: 1 },
+          { pivot: { rows: ['category'], cols: ['status'], measure: 'price', aggregate: 'avg' }, span: 3 },
+          { tabs: [
+            { label: 'Capacity by category', tiles: [{ chart: 'category', measure: 'capacity', reduce: 'sum', type: 'bar' }] },
+            { label: 'Price by category', tiles: [{ chart: 'category', measure: 'price', reduce: 'avg', type: 'bar' }] },
+          ], span: 3 },
+          { filter: ['category', 'status'], span: 3 },
+          { grid: true, format: eventFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Schedule: a month calendar placing every event on its start date, tinted
+        // by category. The signature "real app" scheduling view.
+        calendarScreen(eventsEntity, { id: 'schedule', title: 'Schedule', order: 2 }, { dateField: 'startAt', titleField: 'name', colorField: 'category', filter: ['category', 'status'] }),
+        // Event 360: a full record page for one event - header with status pill and
+        // capacity / price tiles, a tabbed overview, and a registrations timeline.
+        detailScreen(eventsEntity, { id: 'event-detail', title: 'Event detail', order: 3 }, {
+          titleField: 'name', statusField: 'status', metricFields: ['capacity', 'price'],
+          related: [{ entity: 'registrations', foreignKey: 'eventId', label: 'Registrations', titleField: 'attendeeId', subtitleField: 'amount', dateField: 'registeredAt', statusField: 'status' }],
+        }),
+        screen(eventsEntity, 'master-detail', { id: 'events', title: 'Events', order: 4, child: registrations, foreignKey: 'eventId', linkScreen: 'event-detail' }),
+        formScreen(registrations, { id: 'registrations', title: 'Registrations', order: 5 }, undefined, { format: registrationFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['ticket', 'status']),
+        formScreen(attendees, { id: 'attendees', title: 'Attendees', order: 6 }, undefined, {}, ['country', 'company', 'vip']),
+      ],
+    })
+  },
+}

package/src/studio/samples/fleet.ts

@@ -0,0 +1,184 @@
+import type { EntitySchema } from '../../schema.js'
+import type { FormatRule } from '../project.js'
+import { screen, formScreen, calendarScreen, detailScreen, project, dashScreen, statusPills, pad, ids, type SampleApp } from './shared.js'
+
+const drivers: EntitySchema = {
+  name: 'drivers',
+  label: 'Driver',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'phone', type: 'text', input: { editorType: 'phone', help: 'Mobile contact number' } },
+    { field: 'email', type: 'text', format: 'email', required: true, input: { placeholder: 'name@fleetly.com' } },
+    { field: 'license', type: 'text', label: 'License', input: { editorType: 'mask', mask: 'AA-######', help: 'State code + 6 digits' } },
+    { field: 'rating', type: 'number', label: 'Safety rating', min: 1, max: 5, defaultValue: 3, input: { editorType: 'rating', help: '1-5 safety score' } },
+    { field: 'hireDate', type: 'date', label: 'Hire date' },
+  ],
+}
+
+const vehicles: EntitySchema = {
+  name: 'vehicles',
+  label: 'Vehicle',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'name', type: 'text', required: true, minLength: 2 },
+    { field: 'vin', type: 'text', label: 'VIN', input: { editorType: 'mask', mask: '*****************', help: '17-character vehicle identification number' } },
+    { field: 'plate', type: 'text', label: 'Plate', input: { editorType: 'mask', mask: 'AAA-####', help: 'Fleet plate, e.g. FLT-1201' } },
+    { field: 'type', type: 'enum', required: true, defaultValue: 'van', options: [
+      { value: 'van', label: 'Van', color: '#6366f1' },
+      { value: 'truck', label: 'Truck', color: '#10b981' },
+      { value: 'car', label: 'Car', color: '#f59e0b' },
+      { value: 'bike', label: 'Bike', color: '#0ea5e9' },
+    ] },
+    { field: 'year', type: 'number', label: 'Year', min: 1990, max: 2030 },
+    { field: 'mileage', type: 'number', label: 'Mileage', min: 0, input: { help: 'Odometer reading' } },
+    { field: 'fuelLevel', type: 'number', label: 'Fuel level (%)', min: 0, max: 100, defaultValue: 100, input: { editorType: 'slider', help: 'Current tank level' } },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'available', options: [
+      { value: 'available', label: 'Available', color: '#10b981' },
+      { value: 'on_trip', label: 'On trip', color: '#0ea5e9' },
+      { value: 'maintenance', label: 'Maintenance', color: '#ef4444' },
+    ] },
+    { field: 'color', type: 'text', label: 'Livery color', input: { editorType: 'color', help: 'Fleet livery / map color' } },
+  ],
+}
+
+const trips: EntitySchema = {
+  name: 'trips',
+  label: 'Trip',
+  idField: 'id',
+  fields: [
+    { field: 'id', type: 'text', primaryKey: true, readonly: true },
+    { field: 'vehicleId', type: 'relation', label: 'Vehicle', required: true, relation: { entity: 'vehicles', foreignKey: 'vehicleId', labelField: 'name' } },
+    { field: 'driverId', type: 'relation', label: 'Driver', required: true, relation: { entity: 'drivers', foreignKey: 'driverId', labelField: 'name' } },
+    { field: 'status', type: 'enum', required: true, defaultValue: 'planned', options: [
+      { value: 'planned', label: 'Planned', color: '#94a3b8' },
+      { value: 'ongoing', label: 'Ongoing', color: '#0ea5e9' },
+      { value: 'done', label: 'Done', color: '#10b981' },
+      { value: 'cancelled', label: 'Cancelled', color: '#ef4444' },
+    ] },
+    { field: 'distanceKm', type: 'number', label: 'Distance (km)', min: 0, input: { help: 'Route distance in kilometers' } },
+    { field: 'cost', type: 'number', label: 'Cost ($)', min: 0 },
+    // Derived: cost efficiency per kilometer (display-only, never stored).
+    { field: 'costPerKm', type: 'number', label: 'Cost / km ($)', readonly: true, formula: 'cost / distanceKm' },
+    { field: 'startAt', type: 'datetime', label: 'Start', input: { editorType: 'datetime', help: 'Scheduled departure time' } },
+  ],
+}
+
+const seed = {
+  drivers: [
+    { id: 'dr1', name: 'Miguel Santos', phone: '+1 (415) 555-0201', email: 'miguel@fleetly.com', license: 'CA-482910', rating: 5, hireDate: '2021-03-15' },
+    { id: 'dr2', name: 'Aisha Khan', phone: '+1 (312) 555-0202', email: 'aisha@fleetly.com', license: 'IL-118273', rating: 4, hireDate: '2022-07-01' },
+    { id: 'dr3', name: 'Tom Becker', phone: '+1 (206) 555-0203', email: 'tom@fleetly.com', license: 'WA-905641', rating: 4, hireDate: '2020-11-20' },
+    { id: 'dr4', name: 'Lena Novak', phone: '+1 (720) 555-0204', email: 'lena@fleetly.com', license: 'CO-337882', rating: 3, hireDate: '2023-02-10' },
+    { id: 'dr5', name: 'Raj Mehta', phone: '+1 (646) 555-0205', email: 'raj@fleetly.com', license: 'NY-556201', rating: 5, hireDate: '2019-09-05' },
+    { id: 'dr6', name: 'Sofia Rossi', phone: '+1 (305) 555-0206', email: 'sofia@fleetly.com', license: 'FL-774519', rating: 4, hireDate: '2024-01-22' },
+  ],
+  vehicles: [
+    { id: 've1', name: 'Sprinter 1', vin: '1HGCM82633A004352', plate: 'FLT-1201', type: 'van', year: 2021, mileage: 82000, fuelLevel: 80, status: 'available', color: '#0284c7' },
+    { id: 've2', name: 'Hauler 2', vin: '2FMDK48C97BB12345', plate: 'FLT-1202', type: 'truck', year: 2019, mileage: 154000, fuelLevel: 45, status: 'on_trip', color: '#dc2626' },
+    { id: 've3', name: 'Sedan 3', vin: '3VWFE21C04M001234', plate: 'FLT-1203', type: 'car', year: 2022, mileage: 41000, fuelLevel: 95, status: 'available', color: '#0f172a' },
+    { id: 've4', name: 'Courier 4', vin: '5UXWX7C5XG0R12345', plate: 'FLT-1204', type: 'bike', year: 2023, mileage: 12000, fuelLevel: 60, status: 'maintenance', color: '#f59e0b' },
+    { id: 've5', name: 'Hauler 5', vin: '1FTFW1ET5DFA12345', plate: 'FLT-1205', type: 'truck', year: 2020, mileage: 132000, fuelLevel: 30, status: 'on_trip', color: '#10b981' },
+    { id: 've6', name: 'Sprinter 6', vin: '1GNEK13ZX3R123456', plate: 'FLT-1206', type: 'van', year: 2021, mileage: 76000, fuelLevel: 70, status: 'available', color: '#6366f1' },
+  ],
+  trips: [
+    { id: 'tp1', vehicleId: 've1', driverId: 'dr1', status: 'done', distanceKm: 120, cost: 180, startAt: '2026-07-08T08:30:00' },
+    { id: 'tp2', vehicleId: 've2', driverId: 'dr2', status: 'ongoing', distanceKm: 340, cost: 520, startAt: '2026-07-12T06:15:00' },
+    { id: 'tp3', vehicleId: 've3', driverId: 'dr3', status: 'planned', distanceKm: 60, cost: 90, startAt: '2026-07-15T09:00:00' },
+    { id: 'tp4', vehicleId: 've4', driverId: 'dr4', status: 'cancelled', distanceKm: 15, cost: 25, startAt: '2026-07-09T14:45:00' },
+    { id: 'tp5', vehicleId: 've5', driverId: 'dr5', status: 'ongoing', distanceKm: 410, cost: 640, startAt: '2026-07-13T05:30:00' },
+    { id: 'tp6', vehicleId: 've1', driverId: 'dr6', status: 'done', distanceKm: 95, cost: 140, startAt: '2026-07-11T11:20:00' },
+    { id: 'tp7', vehicleId: 've2', driverId: 'dr1', status: 'done', distanceKm: 275, cost: 430, startAt: '2026-07-10T07:00:00' },
+  ],
+}
+
+// Vehicle grid formatting: type + status pills, plus numeric thresholds (low fuel
+// red + bold, healthy fuel green, high-mileage vehicles bold) - data-driven color,
+// not just status pills.
+const vehicleFormats: FormatRule[] = [
+  ...statusPills(vehicles, 'status'),
+  ...statusPills(vehicles, 'type'),
+  { field: 'fuelLevel', op: 'lt', value: 25, color: '#dc2626', bold: true },
+  { field: 'fuelLevel', op: 'gte', value: 75, color: '#16a34a' },
+  { field: 'mileage', op: 'gte', value: 150000, bold: true },
+]
+
+// Trip grid formatting: status pills, plus expensive trips bold and long-haul
+// distances highlighted.
+const tripFormats: FormatRule[] = [
+  ...statusPills(trips, 'status'),
+  { field: 'cost', op: 'gte', value: 500, bold: true },
+  { field: 'distanceKm', op: 'gte', value: 300, color: '#0284c7', bold: true },
+]
+
+export const fleet: SampleApp = {
+  id: 'fleet',
+  name: 'Fleet',
+  description: 'Vehicles, drivers and trips - fleet + trips dashboards (mileage/cost KPIs with a startAt sparkline, a fuel-level gauge, a type x status pivot, a cost-over-time area trend, tabbed breakdowns), filtered status-pill grids with row actions, master/detail, and rich edit forms (phone, license/VIN/plate masks, safety rating, fuel slider, livery color, datetime).',
+  emoji: '\u{1F69A}',
+  accent: '#38bdf8',
+  build: () => {
+    const driverRows = pad(drivers, seed.drivers, 12)
+    const vehicleRows = pad(vehicles, seed.vehicles, 14)
+    const tripRows = pad(trips, seed.trips, 30, { vehicleId: ids(vehicleRows), driverId: ids(driverRows) })
+    return project({
+      title: 'Fleetly',
+      brand: 'Fleetly',
+      accent: '#38bdf8',
+      preset: 'carbon',
+      mode: 'dark',
+      footer: '',
+      entities: [drivers, vehicles, trips],
+      seed: { drivers: driverRows, vehicles: vehicleRows, trips: tripRows },
+      screens: [
+        // Fleet dashboard: fleet-size + mileage KPIs, a fuel-level gauge (avg tank
+        // 0-100), mileage-by-type + status breakdowns, a type x status pivot, a
+        // tabbed view, and a status-pill vehicle grid with inline edit actions.
+        dashScreen(vehicles, { id: 'overview', title: 'Fleet', order: 0 }, [
+          { kpi: 'Vehicles', reduce: 'count', span: 1 },
+          { kpi: 'Total mileage', measure: 'mileage', reduce: 'sum', format: 'compact', span: 1 },
+          { kpi: 'Avg mileage', measure: 'mileage', reduce: 'avg', format: 'compact', span: 1 },
+          { gauge: 'Avg fuel level', measure: 'fuelLevel', reduce: 'avg', min: 0, max: 100, unit: '%', span: 1 },
+          { chart: 'type', measure: 'mileage', reduce: 'sum', type: 'bar', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { pivot: { rows: ['type'], cols: ['status'], aggregate: 'count' }, span: 3 },
+          { tabs: [
+            { label: 'Mileage by type', tiles: [{ chart: 'type', measure: 'mileage', reduce: 'sum', type: 'bar' }] },
+            { label: 'Vehicles by status', tiles: [{ chart: 'status', reduce: 'count', type: 'bar' }] },
+          ], span: 3 },
+          { grid: true, format: vehicleFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        // Trips dashboard: distance + cost KPIs (both trending over start time via a
+        // sparkline), an avg-distance gauge, a cost-over-time area trend, a status
+        // pie, a tabbed breakdown, a faceted filter, and a status-pill trip grid.
+        dashScreen(trips, { id: 'trips-dashboard', title: 'Trips', order: 1 }, [
+          { kpi: 'Trips', reduce: 'count', span: 1 },
+          { kpi: 'Total distance', measure: 'distanceKm', reduce: 'sum', format: 'compact', trendField: 'startAt', trendReduce: 'sum', span: 1 },
+          { kpi: 'Total cost', measure: 'cost', reduce: 'sum', format: 'currency', trendField: 'startAt', trendReduce: 'sum', span: 1 },
+          { kpi: 'Avg cost', measure: 'cost', reduce: 'avg', format: 'currency', span: 1 },
+          { gauge: 'Avg distance (km)', measure: 'distanceKm', reduce: 'avg', min: 0, max: 500, unit: 'km', span: 1 },
+          { chart: 'startAt', measure: 'cost', reduce: 'sum', type: 'area', span: 2 },
+          { chart: 'status', reduce: 'count', type: 'pie', span: 1 },
+          { tabs: [
+            { label: 'Cost by status', tiles: [{ chart: 'status', measure: 'cost', reduce: 'sum', type: 'bar' }] },
+            { label: 'Distance by status', tiles: [{ chart: 'status', measure: 'distanceKm', reduce: 'sum', type: 'bar' }] },
+          ], span: 3 },
+          { filter: ['status', 'vehicleId', 'driverId'], span: 3 },
+          { grid: true, format: tripFormats, summaries: true, rowActions: [{ kind: 'edit' }], span: 3 },
+        ]),
+        calendarScreen(trips, { id: 'dispatch', title: 'Dispatch', order: 2 }, { dateField: 'startAt', titleField: 'driverId', colorField: 'status', filter: ['status', 'vehicleId'] }),
+        // Vehicle detail: asset header (status pill) + mileage / fuel tiles with a
+        // trip-history timeline (each trip titled by its driver, colored by status).
+        detailScreen(vehicles, { id: 'vehicle-detail', title: 'Vehicle detail', order: 3 }, {
+          titleField: 'name', subtitleField: 'plate', statusField: 'status', metricFields: ['mileage', 'fuelLevel'],
+          related: [{ entity: 'trips', foreignKey: 'vehicleId', label: 'Trips', titleField: 'driverId', subtitleField: 'distanceKm', dateField: 'startAt', statusField: 'status' }],
+        }),
+        screen(vehicles, 'master-detail', { id: 'vehicles', title: 'Vehicles', order: 4, child: trips, foreignKey: 'vehicleId', linkScreen: 'vehicle-detail' }),
+        formScreen(trips, { id: 'trip-forms', title: 'Trip forms', order: 5 }, ['vehicleId', 'driverId', 'status'], { format: tripFormats, summaries: true, rowActions: [{ kind: 'edit' }] }, ['status', 'vehicleId', 'driverId']),
+        formScreen(drivers, { id: 'drivers', title: 'Drivers', order: 6 }, ['name', 'phone', 'rating'], { summaries: true }, ['rating']),
+      ],
+    })
+  },
+}