@cratis/scene.blueprint.vendors 0.0.0-stage → 4.78.3

package/screens/index.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Screen } from '@cratis/scene.model';
+import { LayoutName } from '@cratis/scene.blueprint.default';
+import { vendorsScreenDefinitions } from '../vendorsScreenSet';
+
+/**
+ * The ready-to-use screens: real `Screen` instances, one for each entry of the manifest's `blueprint.screenSet`, each filling the screen template it names in
+ * the foundation's application shell. A new application that adopts the blueprint gets these, wired into its navigation (`vendorsNavigation`).
+ */
+export const vendorsScreens: Screen[] = vendorsScreenDefinitions.map(definition => ({
+    name: definition.name,
+    layout: LayoutName.AppShell,
+    screenTemplate: definition.template,
+    slotContent: {},
+    forms: [],
+    contributions: [],
+    path: definition.name.split('.'),
+}));

package/templateProvenance.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { TemplateMetadata } from '@cratis/scene.model';
+
+/** The compatibility, attribution and license metadata every template this blueprint ships carries. */
+export const vendorsTemplateProvenance: Pick<TemplateMetadata, 'compatibility' | 'attribution' | 'license' | 'licenseUrl'> = {
+    compatibility: {
+        scene: '^4.13.0',
+        packages: [{ name: 'Cratis.Blueprint.Default', versionRange: '^1.0.0' }],
+    },
+    attribution: { author: 'Cratis', url: 'https://github.com/Cratis/Scene/tree/main/Source/JavaScript/blueprint.vendors' },
+    license: 'MIT',
+    licenseUrl: 'https://github.com/Cratis/Scene/blob/main/LICENSE',
+};

package/templates/boardTemplate.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { boardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { VendorsEntityKind, VendorsQuery, fromQuery, localeOfData, vendorsQueriesOf } from '../vendorsQueries';
+import { actionButton, component, vendorsMetadata, opensDialog, withBehaviors } from '../vendorsParts';
+
+interface BoardOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    label: string;
+    entity: VendorsEntityKind;
+    columns: string;
+    cards: string;
+    primary: { label: string; dialog: string };
+}
+
+/**
+ * One board: the foundation `BoardScreen` with a column for each step and a card for each record. A card moves to another step by dragging or by its own Move-to menu,
+ * and a column says in words when its limit is exceeded.
+ */
+function boardOf(options: BoardOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: boardScreenTemplate.slots,
+        arrangement: boardScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: [withBehaviors(actionButton(`${id}-new`, options.primary.label, 'primary'), opensDialog(options.primary.dialog))],
+            })],
+            toolbar: [
+                component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel }),
+                component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(vendorsQueriesOf(options.entity).views), savePermission: 'enabled', managePermission: 'enabled' }),
+            ],
+            board: [component(`${id}-columns`, 'kanbanBoard', { columns: fromQuery(options.columns), cards: fromQuery(options.cards), editPermission: 'enabled', label: options.label, ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: vendorsMetadata(options.name, 'Board', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The onboarding board: a column for each step a vendor goes through and a card for each vendor with its category and country. */
+export const vendorsOnboardingTemplate = boardOf({
+    name: 'VendorsOnboardingBoard', displayName: 'Vendors onboarding board', description: 'Vendors as cards in a column for each onboarding step, moved by dragging or by menu.', title: 'Onboarding', subtitle: 'Drag a vendor to its next step', searchLabel: 'Search the board', label: 'Vendors by onboarding step',
+    entity: VendorsEntityKind.Vendor, columns: VendorsQuery.OnboardingColumns, cards: VendorsQuery.OnboardingCards, primary: { label: 'New vendor', dialog: 'VendorsQuickCreateVendor' },
+});

package/templates/dashboardTemplates.ts

@@ -0,0 +1,76 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { dashboardScreenTemplate } from '@cratis/scene.blueprint.default';
+import { VendorsEntityKind, VendorsQuery, currencyOfData, fromQuery, localeOfData, vendorsQueriesOf } from '../vendorsQueries';
+import { actionButton, component, goesTo, vendorsMetadata, opensDialog, withBehaviors } from '../vendorsParts';
+
+interface KeyFigure { id: string; label: string; query: string; index: number; format?: 'currency' | 'percent'; fractionDigits?: number; goodDirection?: 'up' | 'down'; comparison: string }
+interface Chart { id: string; title: string; kind: 'bar' | 'line' | 'donut' | 'funnel'; query: string }
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface DashboardOptions {
+    name: string;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    figures: KeyFigure[];
+    charts: Chart[];
+    table: { label: string; rows: string; columns: string; titleField: string; pageSize: number };
+    aside: { kind: 'activity'; label: string; query: string } | { kind: 'checklist'; label: string; query: string };
+    actions: Action[];
+}
+
+/**
+ * One dashboard: the foundation `DashboardScreen` - key figures over two charts, a table beneath and a list beside - with every region its own component with its own
+ * loading, empty and error states, so one failed query leaves the others on the page.
+ */
+function dashboardOf(options: DashboardOptions): ScreenTemplate {
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: dashboardScreenTemplate.slots,
+        arrangement: dashboardScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, {
+                actions: options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+            })],
+            kpis: options.figures.map(figure => component(`${id}-${figure.id}`, 'statCard', {
+                label: figure.label, value: fromQuery(figure.query, `${figure.index}.value`), change: fromQuery(figure.query, `${figure.index}.change`), comparison: figure.comparison,
+                ...(figure.format ? { format: figure.format } : {}), ...(figure.fractionDigits === undefined ? {} : { fractionDigits: figure.fractionDigits }), ...(figure.goodDirection ? { goodDirection: figure.goodDirection } : {}), ...currencyOfData,
+            })),
+            charts: options.charts.map(chart => component(`${id}-${chart.id}`, 'chartWrapper', {
+                title: chart.title, kind: chart.kind, categories: fromQuery(chart.query, '0.categories'), series: fromQuery(chart.query, '0.series'), ...localeOfData,
+            })),
+            tables: [component(`${id}-table`, 'dataList', {
+                label: options.table.label, rows: fromQuery(options.table.rows), columns: fromQuery(options.table.columns), titleField: options.table.titleField, pageSize: options.table.pageSize, ...localeOfData,
+            })],
+            aside: [options.aside.kind === 'activity'
+                ? component(`${id}-aside`, 'activityFeed', { label: options.aside.label, entries: fromQuery(options.aside.query), ...localeOfData })
+                : component(`${id}-aside`, 'checklistSection', { label: options.aside.label, sections: fromQuery(options.aside.query), ...localeOfData })],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: vendorsMetadata(options.name, 'Dashboard', [TemplateScope.Module, TemplateScope.Feature]),
+    };
+}
+
+/** The performance dashboard: three key figures over two charts - spend by category and on-time delivery - with the vendors beneath and the latest activity beside them. */
+export const vendorsPerformanceTemplate = dashboardOf({
+    name: 'VendorsPerformance', displayName: 'Vendors performance', description: 'Active vendors, spend this year, on-time delivery, spend by category, delivery over the quarters and the vendors to watch.', title: 'Vendor performance', subtitle: 'Spend and delivery this year',
+    figures: [
+        { id: 'active', label: 'Active vendors', query: VendorsQuery.Kpis, index: 0, comparison: 'last year' },
+        { id: 'spend', label: 'Spend this year', query: VendorsQuery.Kpis, index: 1, format: 'currency', fractionDigits: 0, comparison: 'last year' },
+        { id: 'ontime', label: 'On-time delivery', query: VendorsQuery.Kpis, index: 2, format: 'percent', comparison: 'last quarter' },
+    ],
+    charts: [
+        { id: 'spend-chart', title: 'Spend by category', kind: 'bar', query: VendorsQuery.SpendByCategory },
+        { id: 'ontime-chart', title: 'On-time delivery', kind: 'line', query: VendorsQuery.OnTimeDelivery },
+    ],
+    table: { label: 'Vendors', titleField: 'name', pageSize: 5, rows: vendorsQueriesOf(VendorsEntityKind.Vendor).rows, columns: vendorsQueriesOf(VendorsEntityKind.Vendor).columns },
+    aside: { kind: 'activity', label: 'Latest activity', query: VendorsQuery.Activity },
+    actions: [{ id: 'vendors', label: 'Open the vendors', emphasis: 'secondary', screen: 'vendors.list' }],
+});

package/templates/formTemplates.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogTemplate, TemplateScope } from '@cratis/scene.model';
+import { quickCreateDialogTemplate } from '@cratis/scene.blueprint.default';
+import { VendorsQuery, fromQuery, localeOfData } from '../vendorsQueries';
+import { closesDialog, component, vendorsMetadata, withBehaviors } from '../vendorsParts';
+
+/**
+ * One quick-create dialog: the foundation `QuickCreateDialog` - a short form opened from a page to make one record without leaving it - with the fields
+ * that thing needs to get started.
+ */
+function quickCreateOf(name: string, title: string, sections: string, noun: string, submit: string): DialogTemplate {
+    return {
+        name,
+        slots: quickCreateDialogTemplate.slots,
+        content: {
+            header: [component(`${name}-frame`, 'dialogFrame', { title, subtitle: 'Only what is needed to get started' })],
+            body: [withBehaviors(component(`${name}-form`, 'formScreenBody', {
+                mode: 'create', saveAndNew: false, strings: { formSave: submit }, sections: fromQuery(sections), errors: fromQuery(VendorsQuery.FormErrors, '0'), ...localeOfData,
+            }), closesDialog())],
+            actions: [],
+        },
+        displayName: `Vendors quick create ${noun}`,
+        description: `A short form that creates one ${noun} without leaving the page.`,
+        metadata: vendorsMetadata(name, 'Dialog', [TemplateScope.Slice]),
+    };
+}
+
+/** The quick dialogs of the blueprint. */
+export const vendorsDialogs: DialogTemplate[] = [
+    quickCreateOf('VendorsQuickCreateVendor', 'New vendor', 'VendorQuickSections', 'vendor', 'Create'),
+];

package/templates/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { vendorsListTemplate } from './listTemplates';
+import { vendorPageTemplate } from './recordTemplates';
+import { vendorsOnboardingTemplate } from './boardTemplate';
+import { vendorsPerformanceTemplate } from './dashboardTemplates';
+
+export * from './listTemplates';
+export * from './recordTemplates';
+export * from './boardTemplate';
+export * from './dashboardTemplates';
+export * from './formTemplates';
+
+/** Every screen template this blueprint provides, in the order the manifest lists them. */
+export const vendorsScreenTemplates = [vendorsListTemplate, vendorPageTemplate, vendorsOnboardingTemplate, vendorsPerformanceTemplate];
+
+export { vendorsDialogs as vendorsDialogTemplates } from './formTemplates';

package/templates/listTemplates.ts

@@ -0,0 +1,96 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { InteractionActionKind, InteractionTriggerKind, NotificationLevel, NotifyAction, ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { listScreenTemplate } from '@cratis/scene.blueprint.default';
+import { VendorsEntityKind, fromQuery, vendorsQueriesOf, localeOfData } from '../vendorsQueries';
+import { actionButton, component, goesTo, vendorsMetadata, opensDialog, opensDialogOnSelect, opensRecordOnSelect, withBehaviors } from '../vendorsParts';
+
+const listScopes = [TemplateScope.Module, TemplateScope.Feature];
+
+/** The Export button: it tells the user the export has started, which is what the shell does for a long-running action it does not wait on. */
+const exportAction = (id: string) => withBehaviors(actionButton(id, 'Export', 'secondary'), [{
+    bindings: [{
+        trigger: { kind: InteractionTriggerKind.Click },
+        actions: [{ kind: InteractionActionKind.Notify, level: NotificationLevel.Info, message: { text: 'The export has started.' } } as unknown as NotifyAction],
+    }],
+}]);
+
+interface ListOptions {
+    name: string;
+    entity: VendorsEntityKind;
+    displayName: string;
+    description: string;
+    title: string;
+    subtitle: string;
+    searchLabel: string;
+    urlKey: string;
+    /** The primary action of the header: a quick-create dialog to open, or a screen to go to. */
+    primary: { label: string; dialog?: string; screen?: string };
+    rowActions: string[];
+    bulkActions: string[];
+    titleField: string;
+    /** The screen a chosen row opens; the list then selects one row at a time. Absent, rows are selected many at a time for the bulk bar. */
+    recordScreen?: string;
+    /** The side sheet a chosen row opens instead of a record page; the list then selects one row at a time. */
+    recordDialog?: string;
+    /** Group the rows (`variant: grouped`) by this field. */
+    grouped?: { groupBy: string };
+    /** Rows are not selectable at all: a record of what happened, which nobody edits. */
+    readOnly?: boolean;
+    /** Show the records as cards, each with the picture its `imageField` names. */
+    cards?: { imageField?: string };
+    /** Tint a row by the tone in this field (always beside a status column that says the same in words). */
+    toneField?: string;
+}
+
+/**
+ * One list: the foundation `ListScreen` with its header, toolbar, filters, list and bulk bar filled for an entity. The slots, arrangement and
+ * every behavior - sort, search, paging and selection in the address, the table collapsing to cards on a phone - are the foundation's.
+ */
+function listTemplateOf(options: ListOptions): ScreenTemplate {
+    const queries = vendorsQueriesOf(options.entity);
+    const id = options.name;
+    const listId = `${id}-records`;
+    const primary = withBehaviors(actionButton(`${id}-primary`, options.primary.label, 'primary'), options.primary.dialog ? opensDialog(options.primary.dialog) : goesTo(options.primary.screen!));
+    const list = component(listId, 'dataList', {
+        label: options.title, rows: fromQuery(queries.rows), columns: fromQuery(queries.columns), titleField: options.titleField, pageSize: options.cards ? 12 : 10, urlKey: options.urlKey, ...localeOfData,
+        rowActions: options.rowActions,
+        ...(options.readOnly ? {} : { selectionMode: options.recordScreen || options.recordDialog ? 'single' : 'multiple' }),
+        ...(options.cards ? { variant: 'cards', ...(options.cards.imageField ? { imageField: options.cards.imageField } : {}) } : {}),
+        ...(options.grouped ? { variant: 'grouped', groupBy: options.grouped.groupBy } : {}),
+        ...(options.toneField ? { toneField: options.toneField } : {}),
+    });
+
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: listScreenTemplate.slots,
+        arrangement: listScreenTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: options.title, subtitle: options.subtitle }, { actions: [exportAction(`${id}-export`), primary] })],
+            toolbar: [
+                component(`${id}-search`, 'globalSearch', { placeholder: options.searchLabel, label: options.searchLabel, urlKey: `${options.urlKey}q` }),
+                component(`${id}-views`, 'savedViewsMenu', { views: fromQuery(queries.views), savePermission: 'enabled', managePermission: 'enabled' }),
+                component(`${id}-columns`, 'columnChooser', { columns: fromQuery(queries.columnChoices) }),
+            ],
+            filters: [component(`${id}-filter`, 'filterBuilder', { fields: fromQuery(queries.filterFields), ...localeOfData })],
+            list: [options.recordScreen ? withBehaviors(list, opensRecordOnSelect(listId, options.recordScreen)) : options.recordDialog ? withBehaviors(list, opensDialogOnSelect(options.recordDialog)) : list],
+            bulkBar: options.recordScreen || options.recordDialog || options.readOnly ? [] : [component(`${id}-bulk`, 'bulkBar', { selection: fromQuery(queries.selection), actions: options.bulkActions })],
+            footer: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: vendorsMetadata(options.name, 'List', listScopes),
+    };
+}
+
+
+/** The vendors: every vendor with its category, country, spend this year, rating and status. Choosing a vendor opens it. */
+export const vendorsListTemplate = listTemplateOf({
+    name: 'VendorsList',
+    entity: VendorsEntityKind.Vendor, displayName: 'Vendors list', description: 'Every vendor with its category, country, spend, rating and status, filtered by category, status, country and account manager.', title: 'Vendors', subtitle: 'Everyone you buy from', searchLabel: 'Search vendors', urlKey: 'vendors',
+    primary: { label: 'New vendor', dialog: 'VendorsQuickCreateVendor' },
+    rowActions: ['Open', 'Suspend'], bulkActions: [],
+    titleField: 'name', recordScreen: 'vendors.record'
+});

package/templates/recordTemplates.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { recordPageTemplate } from '@cratis/scene.blueprint.default';
+import { VendorsEntityKind, currencyOfData, fromQuery, localeOfData, vendorsQueriesOf } from '../vendorsQueries';
+import { actionButton, component, goesTo, vendorsMetadata, opensDialog, withBehaviors } from '../vendorsParts';
+
+interface Fact { id: string; label: string; field: string; format?: 'currency' | 'percent' }
+interface Extra { key: string; label: string; titleField: string; pageSize?: number }
+interface Action { id: string; label: string; emphasis: 'primary' | 'secondary' | 'quiet' | 'danger'; dialog?: string; screen?: string }
+
+interface RecordOptions {
+    name: string;
+    entity: VendorsEntityKind;
+    displayName: string;
+    description: string;
+    titleField: string;
+    backScreen: string;
+    backLabel: string;
+    facts: Fact[];
+    extras: Extra[];
+    actions: Action[];
+}
+
+/**
+ * One record page: the foundation `RecordPage` with the record's own title, its status and key facts at the top, its fields and the lists that belong to it in the
+ * main region, and the activity beside it. What it shows is the record the list handed it the id of.
+ */
+function recordPageOf(options: RecordOptions): ScreenTemplate {
+    const queries = vendorsQueriesOf(options.entity);
+    const id = options.name;
+    return {
+        name: options.name,
+        fitsSlot: 'content',
+        slots: recordPageTemplate.slots,
+        arrangement: recordPageTemplate.arrangement,
+        content: {
+            header: [component(`${id}-header`, 'pageHeader', { title: fromQuery(queries.record, `0.${options.titleField}`), subtitle: fromQuery(queries.record, '0.summary') }, {
+                actions: [
+                    withBehaviors(actionButton(`${id}-back`, options.backLabel, 'secondary'), goesTo(options.backScreen)),
+                    ...options.actions.map(action => withBehaviors(actionButton(`${id}-${action.id}`, action.label, action.emphasis), action.dialog ? opensDialog(action.dialog) : goesTo(action.screen!))),
+                ],
+            })],
+            summary: [
+                component(`${id}-status`, 'statusChip', { status: fromQuery(queries.summary, '0.status'), tone: fromQuery(queries.summary, '0.tone') }),
+                ...options.facts.map(fact => component(`${id}-${fact.id}`, 'statCard', {
+                    label: fact.label, value: fromQuery(queries.summary, `0.${fact.field}`), ...(fact.format ? { format: fact.format } : {}), ...currencyOfData,
+                })),
+            ],
+            tabs: [component(`${id}-tabs`, 'tabSet', { tabs: fromQuery(queries.tabs), urlKey: 'tab', label: `${options.displayName} sections` })],
+            main: [
+                component(`${id}-form`, 'formScreenBody', { mode: 'readOnly', sections: fromQuery(queries.sections), values: fromQuery(queries.record, '0'), ...currencyOfData }),
+                ...options.extras.map(extra => component(`${id}-${extra.key.toLowerCase()}`, 'dataList', {
+                    label: extra.label, rows: fromQuery(`${options.entity}${extra.key}`), columns: fromQuery(`${options.entity}${extra.key}Columns`), titleField: extra.titleField, pageSize: extra.pageSize ?? 8, ...currencyOfData,
+                })),
+            ],
+            related: [],
+            activity: [component(`${id}-activity`, 'activityFeed', { label: 'Activity', entries: fromQuery(queries.activity), ...localeOfData })],
+            aside: [],
+        },
+        displayName: options.displayName,
+        description: options.description,
+        metadata: vendorsMetadata(options.name, 'Detail', [TemplateScope.Feature, TemplateScope.Subfeature]),
+    };
+}
+
+/** The vendor page: the vendor's name as its title, its status, spend, rating and open orders at the top, its details, contacts, purchase orders and certificates in the main region, and the activity beside it. */
+export const vendorPageTemplate = recordPageOf({
+    name: 'VendorPage', entity: VendorsEntityKind.Vendor, displayName: 'Vendor page', description: 'One vendor: status, spend, rating and open orders, its details, contacts, purchase orders and certificates, and its activity.', titleField: 'name', backScreen: 'vendors.list', backLabel: 'Back to vendors',
+    facts: [
+        { id: 'spend', label: 'Spend this year', field: 'spend', format: 'currency' },
+        { id: 'rating', label: 'Rating', field: 'rating' },
+        { id: 'open', label: 'Open orders', field: 'openOrders' },
+    ],
+    extras: [{ key: 'Contacts', label: 'Contacts', titleField: 'name' }, { key: 'Orders', label: 'Purchase orders', titleField: 'number' }, { key: 'Certificates', label: 'Certificates', titleField: 'name' }],
+    actions: [],
+});

package/thumbnails/VendorPage.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="VendorPage">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="78" width="150" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="78" width="66" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="107" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="124" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="141" width="130" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="250" y="90" width="50" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="250" y="107" width="50" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="250" y="124" width="50" height="6" rx="3" fill="#7c3aed"/>
+</svg>

package/thumbnails/VendorsList.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="VendorsList">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="90" y="82" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="90" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="160" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="164" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="166" y="82" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="166" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="236" y="40" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="44" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="242" y="82" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="242" y="94" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="84" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="90" y="158" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="90" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="160" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="164" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="166" y="158" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="166" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+    <rect x="236" y="116" width="68" height="70" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="240" y="120" width="60" height="30" rx="4" fill="#d5d9df"/>
+    <rect x="242" y="158" width="40" height="5" rx="3" fill="#7c3aed"/>
+    <rect x="242" y="170" width="52" height="5" rx="3" fill="#9aa3b2"/>
+</svg>

package/thumbnails/VendorsOnboardingBoard.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="VendorsOnboardingBoard">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="46" width="30" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="88" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="88" y="140" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="141" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="145" y="46" width="30" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="145" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="145" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="198" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="46" width="30" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="202" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="202" y="140" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="255" y="40" width="52" height="148" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="259" y="46" width="30" height="6" rx="3" fill="#7c3aed"/>
+    <rect x="259" y="60" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="259" y="100" width="44" height="32" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+</svg>

package/thumbnails/VendorsPerformance.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="VendorsPerformance">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="34" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="82" width="150" height="106" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="242" y="82" width="66" height="106" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="100" y="191" width="16" height="14" rx="4" fill="#7c3aed"/>
+    <rect x="124" y="161" width="16" height="34" rx="4" fill="#7c3aed"/>
+    <rect x="148" y="176" width="16" height="24" rx="4" fill="#7c3aed"/>
+    <rect x="172" y="131" width="16" height="54" rx="4" fill="#7c3aed"/>
+    <rect x="196" y="146" width="16" height="44" rx="4" fill="#7c3aed"/>
+</svg>

package/thumbnails/VendorsQuickCreateVendor.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="VendorsQuickCreateVendor">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="224" height="148" rx="4" fill="#e4e7ec"/>
+    <rect x="120" y="56" width="152" height="120" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="130" y="66" width="70" height="7" rx="3" fill="#7c3aed"/>
+    <rect x="130" y="86" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="130" y="108" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="130" y="130" width="132" height="14" rx="4" fill="#eef0f3"/>
+    <rect x="206" y="152" width="56" height="16" rx="4" fill="#7c3aed"/>
+</svg>

package/thumbnails/vendors.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Vendors blueprint">
+    <rect x="0" y="0" width="320" height="200" rx="4" fill="#f4f5f7"/>
+    <rect x="12" y="12" width="296" height="20" rx="4" fill="#7c3aed"/>
+    <rect x="12" y="40" width="64" height="148" rx="4" fill="#d5d9df"/>
+    <rect x="84" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="160" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="236" y="40" width="70" height="30" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="84" y="78" width="224" height="110" rx="4" fill="#ffffff" stroke="#d5d9df"/>
+    <rect x="94" y="90" width="200" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="107" width="164" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="124" width="200" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="141" width="164" height="6" rx="3" fill="#9aa3b2"/>
+    <rect x="94" y="158" width="200" height="6" rx="3" fill="#9aa3b2"/>
+</svg>

package/vendorsApplication.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { UiProfile } from '@cratis/scene.model';
+import { ApplicationStructureIndex } from '@cratis/scene.engine';
+import { ApplicationDocument, CompositionOptions, defaultLayouts, previewProfile } from '@cratis/scene.blueprint.default';
+import { vendorsNavigation, vendorsStructure } from './navigation';
+import { vendorsScreens } from './screens';
+import { vendorsDialogTemplates, vendorsScreenTemplates } from './templates';
+
+/** The id of the sample-data pack a new application starts with. */
+export const vendorsDefaultSampleDataId = 'vendors-en';
+
+/**
+ * The example application of the blueprint: the foundation's layouts, the Vendors templates, the quick-create dialogs and their 4 screens, rendering against the
+ * foundation's packages with the default sample-data pack chosen. This is what a gallery previews and what the conformance fixture
+ * (`Samples/Vendors/vendors.play`) declares in Screenplay: the document, the structure and the navigation are the three things an application is made of.
+ */
+export function vendorsApplication(sampleData: string = vendorsDefaultSampleDataId): ApplicationDocument {
+    const profile: UiProfile = { ...previewProfile(undefined), name: 'Vendors', sampleData: { activePack: sampleData, mappings: [], bindings: [] } };
+    return { layouts: defaultLayouts, screenTemplates: vendorsScreenTemplates, dialogTemplates: vendorsDialogTemplates, screens: vendorsScreens, uiProfiles: [profile] };
+}
+
+/** What a host composes the screens with: the application's logo, which the shell's topbar shows. */
+export const vendorsComposition: CompositionOptions = { logo: vendorsNavigation.application.logo };
+
+/** The structure and navigation the shell's regions show and the items' destinations resolve against. */
+export const vendorsNavigationModel = () => ({ structure: new ApplicationStructureIndex(vendorsStructure), navigation: vendorsNavigation });

package/vendorsParts.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    Behavior, BindingSourceKind, DialogTemplate, ExternalComponent, InteractionActionKind, InteractionTriggerKind, NavigateAction, OpenDialogAction, SceneElement, ScreenTemplate, TemplateMetadata, TemplateScope,
+} from '@cratis/scene.model';
+import { component, panel } from '@cratis/scene.blueprint.default';
+import { vendorsTemplateProvenance } from './templateProvenance';
+
+export { component, panel };
+
+/** The category of every template of this blueprint (spec Part B 1.2: `Business / <domain>`). */
+export const vendorsCategory = 'Business / Vendors';
+
+/** The package-relative thumbnail of a template. */
+export const thumbnailOf = (templateName: string): string => `thumbnails/${templateName}.svg`;
+
+/** The metadata of a screen template of this blueprint: provenance, a type from the vocabulary, the category, a thumbnail and the levels it applies at. */
+export const vendorsMetadata = (name: string, type: 'Dashboard' | 'List' | 'Board' | 'Detail' | 'Form' | 'Dialog' | 'Workspace' | 'Calendar' | 'Timeline' | 'Inbox' | 'Profile' | 'Wizard', scopes: TemplateScope[]): TemplateMetadata =>
+    ({ ...vendorsTemplateProvenance, type, category: vendorsCategory, thumbnail: thumbnailOf(name), scopes });
+
+/** A button of the foundation: a verb, its emphasis, and the permission rule every action declares (spec Part B 1.5). */
+export const actionButton = (id: string, label: string, emphasis: 'primary' | 'secondary' | 'quiet' | 'danger', extra: Record<string, unknown> = {}, behaviors?: Behavior[]): ExternalComponent =>
+    ({ ...component(id, 'actionButton', { label, emphasis, permission: 'enabled', ...extra }), ...(behaviors ? { behaviors } : {}) });
+
+/** What pressing an element does: open the named dialog template over the page. */
+export const opensDialog = (dialogTemplate: string): Behavior[] =>
+    [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Click }, actions: [{ kind: InteractionActionKind.OpenDialog, dialogTemplate } as OpenDialogAction] }] }];
+
+/** What pressing an element does: go to the named screen. */
+export const goesTo = (screen: string): Behavior[] =>
+    [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Click }, actions: [{ kind: InteractionActionKind.Navigate, screen } as NavigateAction] }] }];
+
+/**
+ * What choosing a row of a list does: open the record page, handing it the chosen row's id. The list is single-selection, so choosing a row is
+ * opening it - the way a table of records works everywhere.
+ */
+export const opensRecordOnSelect = (listId: string, screen: string): Behavior[] => [{
+    bindings: [{
+        trigger: { kind: InteractionTriggerKind.Select },
+        actions: [{ kind: InteractionActionKind.Navigate, screen, arguments: [{ name: 'id', value: { kind: BindingSourceKind.ComponentProperty, componentId: listId, path: 'value' } }] } as NavigateAction],
+    }],
+}];
+
+/**
+ * What choosing a row of a list does: open the named dialog over the page - a side sheet with the row's detail, so the list stays where it was.
+ */
+export const opensDialogOnSelect = (dialogTemplate: string): Behavior[] =>
+    [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Select }, actions: [{ kind: InteractionActionKind.OpenDialog, dialogTemplate } as OpenDialogAction] }] }];
+
+/** What a Cancel or Close control does: close the dialog it was opened from. */
+export const closesDialog = (): Behavior[] => [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Click }, actions: [{ kind: InteractionActionKind.CloseDialog }] }] }];
+
+/** An element with the given behaviors attached. */
+export const withBehaviors = <T extends SceneElement>(element: T, behaviors: Behavior[]): T => ({ ...element, behaviors });
+
+export type VendorsScreenTemplate = ScreenTemplate;
+export type VendorsDialogTemplate = DialogTemplate;