@cratis/scene.blueprint.default 4.39.0 → 4.41.0

package/dist/cjs/foundation/templates/boardScreenTemplate.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The board: columns mapped to a status or stage, cards that move between them - by dragging or by each card's own Move-to menu, so the board is as
+ * usable from a keyboard and a screen reader as with a pointer.
+ */ const boardScreenTemplate = {
+    name: 'BoardScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'toolbar'
+        },
+        {
+            name: 'board'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.row([
+                flowBuilders.slotLeaf('toolbar')
+            ], 8),
+            flowBuilders.slotLeaf('board')
+        ], 12),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('toolbar'),
+                    flowBuilders.slotLeaf('board')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('board-header', 'pageHeader', {
+                title: 'Pipeline',
+                subtitle: 'Drag a deal to a new stage'
+            })
+        ],
+        toolbar: [
+            templateParts.component('board-search', 'globalSearch', {
+                placeholder: 'Search the pipeline',
+                label: 'Search the pipeline'
+            })
+        ],
+        board: [
+            templateParts.component('board-columns', 'kanbanBoard', {
+                columns: templateParts.fromQuery('PipelineColumns'),
+                cards: templateParts.fromQuery('PipelineCards')
+            })
+        ]
+    },
+    displayName: 'Board',
+    description: 'Columns mapped to a stage with cards that move by dragging or by menu.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Board',
+        category: 'Foundation / Board',
+        thumbnail: templateParts.thumbnailOf('BoardScreen')
+    }
+};
+
+exports.boardScreenTemplate = boardScreenTemplate;
+//# sourceMappingURL=boardScreenTemplate.js.map

package/dist/cjs/foundation/templates/boardScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boardScreenTemplate.js","sources":["../../../../foundation/templates/boardScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The board: columns mapped to a status or stage, cards that move between them - by dragging or by each card's own Move-to menu, so the board is as\n * usable from a keyboard and a screen reader as with a pointer.\n */\nexport const boardScreenTemplate: ScreenTemplate = {\n    name: 'BoardScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'toolbar' }, { name: 'board' }],\n    arrangement: {\n        root: column([slotLeaf('header'), row([slotLeaf('toolbar')], 8), slotLeaf('board')], 12),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('toolbar'), slotLeaf('board')], 16) }],\n    },\n    content: {\n        header: [component('board-header', 'pageHeader', { title: 'Pipeline', subtitle: 'Drag a deal to a new stage' })],\n        toolbar: [component('board-search', 'globalSearch', { placeholder: 'Search the pipeline', label: 'Search the pipeline' })],\n        board: [component('board-columns', 'kanbanBoard', { columns: fromQuery('PipelineColumns'), cards: fromQuery('PipelineCards') })],\n    },\n    displayName: 'Board',\n    description: 'Columns mapped to a stage with cards that move by dragging or by menu.',\n    metadata: { ...foundationTemplateProvenance, type: 'Board', category: 'Foundation / Board', thumbnail: thumbnailOf('BoardScreen') },\n};\n"],"names":["boardScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","row","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","toolbar","placeholder","label","board","columns","fromQuery","cards","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,mBAAAA,GAAsC;IAC/CC,IAAAA,EAAM,aAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAU,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAQ;AAAE,KAAA;IACnEG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,mBAAAA,CAAO;YAACC,qBAAAA,CAAS,QAAA,CAAA;YAAWC,gBAAAA,CAAI;gBAACD,qBAAAA,CAAS,SAAA;aAAW,EAAE,CAAA,CAAA;YAAIA,qBAAAA,CAAS,OAAA;SAAS,EAAE,EAAA,CAAA;QACrFE,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,2BAAeC,OAAO;AAAEP,gBAAAA,IAAAA,EAAMC,mBAAAA,CAAO;oBAACC,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,SAAA,CAAA;oBAAYA,qBAAAA,CAAS,OAAA;iBAAS,EAAE,EAAA;AAAI;AAAE;AAClI,KAAA;IACAM,OAAAA,EAAS;QACLC,MAAAA,EAAQ;AAACC,YAAAA,uBAAAA,CAAU,gBAAgB,YAAA,EAAc;gBAAEC,KAAAA,EAAO,UAAA;gBAAYC,QAAAA,EAAU;AAA6B,aAAA;AAAG,SAAA;QAChHC,OAAAA,EAAS;AAACH,YAAAA,uBAAAA,CAAU,gBAAgB,cAAA,EAAgB;gBAAEI,WAAAA,EAAa,qBAAA;gBAAuBC,KAAAA,EAAO;AAAsB,aAAA;AAAG,SAAA;QAC1HC,KAAAA,EAAO;AAACN,YAAAA,uBAAAA,CAAU,iBAAiB,aAAA,EAAe;AAAEO,gBAAAA,OAAAA,EAASC,uBAAAA,CAAU,iBAAA,CAAA;AAAoBC,gBAAAA,KAAAA,EAAOD,uBAAAA,CAAU,eAAA;AAAiB,aAAA;AAAG;AACpI,KAAA;IACAE,WAAAA,EAAa,OAAA;IACbC,WAAAA,EAAa,wEAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,0CAA4B;QAAEC,IAAAA,EAAM,OAAA;QAASC,QAAAA,EAAU,oBAAA;AAAsBC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,aAAA;AAAe;AACtI;;"}

package/dist/cjs/foundation/templates/dashboardScreenTemplate.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The dashboard: key figures across the top, charts and tables below, an aside for what needs attention. Every region is its own component with its
+ * own five states, so one failed query shows the other regions - the page never fails as a whole.
+ */ const dashboardScreenTemplate = {
+    name: 'DashboardScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'kpis'
+        },
+        {
+            name: 'charts'
+        },
+        {
+            name: 'tables'
+        },
+        {
+            name: 'aside'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.slotLeaf('kpis'),
+            flowBuilders.grid([
+                flowBuilders.slotLeaf('charts', {
+                    span: 2
+                }),
+                flowBuilders.slotLeaf('aside')
+            ], 3, 16),
+            flowBuilders.slotLeaf('tables')
+        ], 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('kpis'),
+                    flowBuilders.slotLeaf('charts'),
+                    flowBuilders.slotLeaf('tables'),
+                    flowBuilders.slotLeaf('aside')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('dashboard-header', 'pageHeader', {
+                title: 'Sales overview',
+                subtitle: 'This quarter compared to last'
+            })
+        ],
+        kpis: [
+            templateParts.component('kpi-pipeline', 'statCard', {
+                label: 'Open pipeline',
+                value: templateParts.fromQuery('Kpis', '0.value'),
+                change: templateParts.fromQuery('Kpis', '0.change'),
+                format: 'currency',
+                currency: 'USD',
+                comparison: 'last quarter'
+            }),
+            templateParts.component('kpi-won', 'statCard', {
+                label: 'Deals won',
+                value: templateParts.fromQuery('Kpis', '1.value'),
+                change: templateParts.fromQuery('Kpis', '1.change'),
+                comparison: 'last quarter'
+            }),
+            templateParts.component('kpi-response', 'statCard', {
+                label: 'Response time (hours)',
+                value: templateParts.fromQuery('Kpis', '2.value'),
+                change: templateParts.fromQuery('Kpis', '2.change'),
+                goodDirection: 'down',
+                comparison: 'last quarter'
+            })
+        ],
+        charts: [
+            templateParts.component('chart-revenue', 'chartWrapper', {
+                title: 'Revenue by quarter',
+                kind: 'line',
+                categories: templateParts.fromQuery('RevenueChart', '0.categories'),
+                series: templateParts.fromQuery('RevenueChart', '0.series')
+            }),
+            templateParts.component('chart-stages', 'chartWrapper', {
+                title: 'Deals by stage',
+                kind: 'funnel',
+                categories: templateParts.fromQuery('StageChart', '0.categories'),
+                series: templateParts.fromQuery('StageChart', '0.series')
+            })
+        ],
+        tables: [
+            templateParts.component('dashboard-deals', 'dataList', {
+                label: 'Closing soon',
+                rows: templateParts.fromQuery('Deals'),
+                columns: templateParts.fromQuery('DealColumns'),
+                titleField: 'name',
+                pageSize: 5
+            })
+        ],
+        aside: [
+            templateParts.component('dashboard-activity', 'activityFeed', {
+                label: 'Recent activity',
+                entries: templateParts.fromQuery('Activity')
+            })
+        ]
+    },
+    displayName: 'Dashboard',
+    description: 'Key figures, charts and tables, each region with its own loading, empty and error states.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Dashboard',
+        category: 'Foundation / Dashboard',
+        thumbnail: templateParts.thumbnailOf('DashboardScreen')
+    }
+};
+
+exports.dashboardScreenTemplate = dashboardScreenTemplate;
+//# sourceMappingURL=dashboardScreenTemplate.js.map

package/dist/cjs/foundation/templates/dashboardScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardScreenTemplate.js","sources":["../../../../foundation/templates/dashboardScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The dashboard: key figures across the top, charts and tables below, an aside for what needs attention. Every region is its own component with its\n * own five states, so one failed query shows the other regions - the page never fails as a whole.\n */\nexport const dashboardScreenTemplate: ScreenTemplate = {\n    name: 'DashboardScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'kpis' }, { name: 'charts' }, { name: 'tables' }, { name: 'aside' }],\n    arrangement: {\n        root: column([slotLeaf('header'), slotLeaf('kpis'), grid([slotLeaf('charts', { span: 2 }), slotLeaf('aside')], 3, 16), slotLeaf('tables')], 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('kpis'), slotLeaf('charts'), slotLeaf('tables'), slotLeaf('aside')], 16) }],\n    },\n    content: {\n        header: [component('dashboard-header', 'pageHeader', { title: 'Sales overview', subtitle: 'This quarter compared to last' })],\n        kpis: [\n            component('kpi-pipeline', 'statCard', { label: 'Open pipeline', value: fromQuery('Kpis', '0.value'), change: fromQuery('Kpis', '0.change'), format: 'currency', currency: 'USD', comparison: 'last quarter' }),\n            component('kpi-won', 'statCard', { label: 'Deals won', value: fromQuery('Kpis', '1.value'), change: fromQuery('Kpis', '1.change'), comparison: 'last quarter' }),\n            component('kpi-response', 'statCard', { label: 'Response time (hours)', value: fromQuery('Kpis', '2.value'), change: fromQuery('Kpis', '2.change'), goodDirection: 'down', comparison: 'last quarter' }),\n        ],\n        charts: [\n            component('chart-revenue', 'chartWrapper', { title: 'Revenue by quarter', kind: 'line', categories: fromQuery('RevenueChart', '0.categories'), series: fromQuery('RevenueChart', '0.series') }),\n            component('chart-stages', 'chartWrapper', { title: 'Deals by stage', kind: 'funnel', categories: fromQuery('StageChart', '0.categories'), series: fromQuery('StageChart', '0.series') }),\n        ],\n        tables: [component('dashboard-deals', 'dataList', { label: 'Closing soon', rows: fromQuery('Deals'), columns: fromQuery('DealColumns'), titleField: 'name', pageSize: 5 })],\n        aside: [component('dashboard-activity', 'activityFeed', { label: 'Recent activity', entries: fromQuery('Activity') })],\n    },\n    displayName: 'Dashboard',\n    description: 'Key figures, charts and tables, each region with its own loading, empty and error states.',\n    metadata: { ...foundationTemplateProvenance, type: 'Dashboard', category: 'Foundation / Dashboard', thumbnail: thumbnailOf('DashboardScreen') },\n};\n"],"names":["dashboardScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","grid","span","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","kpis","label","value","fromQuery","change","format","currency","comparison","goodDirection","charts","kind","categories","series","tables","rows","columns","titleField","pageSize","aside","entries","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,uBAAAA,GAA0C;IACnDC,IAAAA,EAAM,iBAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAO,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAQ;AAAE,KAAA;IACxGG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,mBAAAA,CAAO;YAACC,qBAAAA,CAAS,QAAA,CAAA;YAAWA,qBAAAA,CAAS,MAAA,CAAA;YAASC,iBAAAA,CAAK;AAACD,gBAAAA,qBAAAA,CAAS,QAAA,EAAU;oBAAEE,IAAAA,EAAM;AAAE,iBAAA,CAAA;gBAAIF,qBAAAA,CAAS,OAAA;AAAS,aAAA,EAAE,CAAA,EAAG,EAAA,CAAA;YAAKA,qBAAAA,CAAS,QAAA;SAAU,EAAE,EAAA,CAAA;QAC5IG,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,2BAAeC,OAAO;AAAER,gBAAAA,IAAAA,EAAMC,mBAAAA,CAAO;oBAACC,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,MAAA,CAAA;oBAASA,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,OAAA;iBAAS,EAAE,EAAA;AAAI;AAAE;AACvK,KAAA;IACAO,OAAAA,EAAS;QACLC,MAAAA,EAAQ;AAACC,YAAAA,uBAAAA,CAAU,oBAAoB,YAAA,EAAc;gBAAEC,KAAAA,EAAO,gBAAA;gBAAkBC,QAAAA,EAAU;AAAgC,aAAA;AAAG,SAAA;QAC7HC,IAAAA,EAAM;AACFH,YAAAA,uBAAAA,CAAU,gBAAgB,UAAA,EAAY;gBAAEI,KAAAA,EAAO,eAAA;AAAiBC,gBAAAA,KAAAA,EAAOC,wBAAU,MAAA,EAAQ,SAAA,CAAA;AAAYC,gBAAAA,MAAAA,EAAQD,wBAAU,MAAA,EAAQ,UAAA,CAAA;gBAAaE,MAAAA,EAAQ,UAAA;gBAAYC,QAAAA,EAAU,KAAA;gBAAOC,UAAAA,EAAY;AAAe,aAAA,CAAA;AAC5MV,YAAAA,uBAAAA,CAAU,WAAW,UAAA,EAAY;gBAAEI,KAAAA,EAAO,WAAA;AAAaC,gBAAAA,KAAAA,EAAOC,wBAAU,MAAA,EAAQ,SAAA,CAAA;AAAYC,gBAAAA,MAAAA,EAAQD,wBAAU,MAAA,EAAQ,UAAA,CAAA;gBAAaI,UAAAA,EAAY;AAAe,aAAA,CAAA;AAC9JV,YAAAA,uBAAAA,CAAU,gBAAgB,UAAA,EAAY;gBAAEI,KAAAA,EAAO,uBAAA;AAAyBC,gBAAAA,KAAAA,EAAOC,wBAAU,MAAA,EAAQ,SAAA,CAAA;AAAYC,gBAAAA,MAAAA,EAAQD,wBAAU,MAAA,EAAQ,UAAA,CAAA;gBAAaK,aAAAA,EAAe,MAAA;gBAAQD,UAAAA,EAAY;AAAe,aAAA;AACzM,SAAA;QACDE,MAAAA,EAAQ;AACJZ,YAAAA,uBAAAA,CAAU,iBAAiB,cAAA,EAAgB;gBAAEC,KAAAA,EAAO,oBAAA;gBAAsBY,IAAAA,EAAM,MAAA;AAAQC,gBAAAA,UAAAA,EAAYR,wBAAU,cAAA,EAAgB,cAAA,CAAA;AAAiBS,gBAAAA,MAAAA,EAAQT,wBAAU,cAAA,EAAgB,UAAA;AAAY,aAAA,CAAA;AAC7LN,YAAAA,uBAAAA,CAAU,gBAAgB,cAAA,EAAgB;gBAAEC,KAAAA,EAAO,gBAAA;gBAAkBY,IAAAA,EAAM,QAAA;AAAUC,gBAAAA,UAAAA,EAAYR,wBAAU,YAAA,EAAc,cAAA,CAAA;AAAiBS,gBAAAA,MAAAA,EAAQT,wBAAU,YAAA,EAAc,UAAA;AAAY,aAAA;AACzL,SAAA;QACDU,MAAAA,EAAQ;AAAChB,YAAAA,uBAAAA,CAAU,mBAAmB,UAAA,EAAY;gBAAEI,KAAAA,EAAO,cAAA;AAAgBa,gBAAAA,IAAAA,EAAMX,uBAAAA,CAAU,OAAA,CAAA;AAAUY,gBAAAA,OAAAA,EAASZ,uBAAAA,CAAU,aAAA,CAAA;gBAAgBa,UAAAA,EAAY,MAAA;gBAAQC,QAAAA,EAAU;AAAE,aAAA;AAAG,SAAA;QAC3KC,KAAAA,EAAO;AAACrB,YAAAA,uBAAAA,CAAU,sBAAsB,cAAA,EAAgB;gBAAEI,KAAAA,EAAO,iBAAA;AAAmBkB,gBAAAA,OAAAA,EAAShB,uBAAAA,CAAU,UAAA;AAAY,aAAA;AAAG;AAC1H,KAAA;IACAiB,WAAAA,EAAa,WAAA;IACbC,WAAAA,EAAa,2FAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,0CAA4B;QAAEC,IAAAA,EAAM,WAAA;QAAaC,QAAAA,EAAU,wBAAA;AAA0BC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,iBAAA;AAAmB;AAClJ;;"}

package/dist/cjs/foundation/templates/formScreenTemplate.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The form: titled sections of fields in a one-to-three column grid, validated, with Save, Save and new and Cancel. One template serves create, edit, read-only
+ * and settings (a save for each section) by its mode, and warns before unsaved changes are lost.
+ */ const formScreenTemplate = {
+    name: 'FormScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.slotLeaf('body'),
+            flowBuilders.slotLeaf('actions')
+        ], 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('body'),
+                    flowBuilders.slotLeaf('actions')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('form-header', 'pageHeader', {
+                title: 'New account',
+                subtitle: 'Fields marked * are required'
+            })
+        ],
+        body: [
+            templateParts.component('form-body', 'formScreenBody', {
+                mode: 'create',
+                sections: templateParts.fromQuery('RecordSections'),
+                values: templateParts.fromQuery('RecordValues', '0'),
+                errors: templateParts.fromQuery('FormErrors', '0')
+            })
+        ],
+        actions: []
+    },
+    displayName: 'Form',
+    description: 'Sections of validated fields with Save, Save and new, Cancel and an unsaved-changes guard.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Form',
+        category: 'Foundation / Form',
+        thumbnail: templateParts.thumbnailOf('FormScreen')
+    }
+};
+
+exports.formScreenTemplate = formScreenTemplate;
+//# sourceMappingURL=formScreenTemplate.js.map

package/dist/cjs/foundation/templates/formScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formScreenTemplate.js","sources":["../../../../foundation/templates/formScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The form: titled sections of fields in a one-to-three column grid, validated, with Save, Save and new and Cancel. One template serves create, edit, read-only\n * and settings (a save for each section) by its mode, and warns before unsaved changes are lost.\n */\nexport const formScreenTemplate: ScreenTemplate = {\n    name: 'FormScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    arrangement: {\n        root: column([slotLeaf('header'), slotLeaf('body'), slotLeaf('actions')], 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('body'), slotLeaf('actions')], 16) }],\n    },\n    content: {\n        header: [component('form-header', 'pageHeader', { title: 'New account', subtitle: 'Fields marked * are required' })],\n        body: [component('form-body', 'formScreenBody', { mode: 'create', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0'), errors: fromQuery('FormErrors', '0') })],\n        actions: [],\n    },\n    displayName: 'Form',\n    description: 'Sections of validated fields with Save, Save and new, Cancel and an unsaved-changes guard.',\n    metadata: { ...foundationTemplateProvenance, type: 'Form', category: 'Foundation / Form', thumbnail: thumbnailOf('FormScreen') },\n};\n"],"names":["formScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","body","mode","sections","fromQuery","values","errors","actions","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,kBAAAA,GAAqC;IAC9CC,IAAAA,EAAM,YAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAO,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAU;AAAE,KAAA;IAClEG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,mBAAAA,CAAO;YAACC,qBAAAA,CAAS,QAAA,CAAA;YAAWA,qBAAAA,CAAS,MAAA,CAAA;YAASA,qBAAAA,CAAS,SAAA;SAAW,EAAE,EAAA,CAAA;QAC1EC,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,2BAAeC,OAAO;AAAEN,gBAAAA,IAAAA,EAAMC,mBAAAA,CAAO;oBAACC,qBAAAA,CAAS,QAAA,CAAA;oBAAWA,qBAAAA,CAAS,MAAA,CAAA;oBAASA,qBAAAA,CAAS,SAAA;iBAAW,EAAE,EAAA;AAAI;AAAE;AACjI,KAAA;IACAK,OAAAA,EAAS;QACLC,MAAAA,EAAQ;AAACC,YAAAA,uBAAAA,CAAU,eAAe,YAAA,EAAc;gBAAEC,KAAAA,EAAO,aAAA;gBAAeC,QAAAA,EAAU;AAA+B,aAAA;AAAG,SAAA;QACpHC,IAAAA,EAAM;AAACH,YAAAA,uBAAAA,CAAU,aAAa,gBAAA,EAAkB;gBAAEI,IAAAA,EAAM,QAAA;AAAUC,gBAAAA,QAAAA,EAAUC,uBAAAA,CAAU,gBAAA,CAAA;AAAmBC,gBAAAA,MAAAA,EAAQD,wBAAU,cAAA,EAAgB,GAAA,CAAA;AAAME,gBAAAA,MAAAA,EAAQF,wBAAU,YAAA,EAAc,GAAA;AAAK,aAAA;AAAG,SAAA;AACzLG,QAAAA,OAAAA,EAAS;AACb,KAAA;IACAC,WAAAA,EAAa,MAAA;IACbC,WAAAA,EAAa,4FAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,0CAA4B;QAAEC,IAAAA,EAAM,MAAA;QAAQC,QAAAA,EAAU,mBAAA;AAAqBC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,YAAA;AAAc;AACnI;;"}

package/dist/cjs/foundation/templates/index.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var boardScreenTemplate = require('./boardScreenTemplate.js');
+var dashboardScreenTemplate = require('./dashboardScreenTemplate.js');
+var formScreenTemplate = require('./formScreenTemplate.js');
+var listScreenTemplate = require('./listScreenTemplate.js');
+var masterDetailScreenTemplate = require('./masterDetailScreenTemplate.js');
+var recordPageTemplate = require('./recordPageTemplate.js');
+var wizardScreenTemplate = require('./wizardScreenTemplate.js');
+var workspaceScreenTemplate = require('./workspaceScreenTemplate.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The foundation screen templates, in the order the manifest lists them. The workspace comes first: it is the container the master/detail nests in. */ const foundationScreenTemplates = [
+    workspaceScreenTemplate.workspaceScreenTemplate,
+    dashboardScreenTemplate.dashboardScreenTemplate,
+    listScreenTemplate.listScreenTemplate,
+    boardScreenTemplate.boardScreenTemplate,
+    masterDetailScreenTemplate.masterDetailScreenTemplate,
+    recordPageTemplate.recordPageTemplate,
+    formScreenTemplate.formScreenTemplate,
+    wizardScreenTemplate.wizardScreenTemplate
+];
+
+exports.boardScreenTemplate = boardScreenTemplate.boardScreenTemplate;
+exports.dashboardScreenTemplate = dashboardScreenTemplate.dashboardScreenTemplate;
+exports.formScreenTemplate = formScreenTemplate.formScreenTemplate;
+exports.listScreenTemplate = listScreenTemplate.listScreenTemplate;
+exports.masterDetailScreenTemplate = masterDetailScreenTemplate.masterDetailScreenTemplate;
+exports.recordPageTemplate = recordPageTemplate.recordPageTemplate;
+exports.wizardScreenTemplate = wizardScreenTemplate.wizardScreenTemplate;
+exports.workspaceScreenTemplate = workspaceScreenTemplate.workspaceScreenTemplate;
+exports.component = templateParts.component;
+exports.foundationTemplateProvenance = templateParts.foundationTemplateProvenance;
+exports.fromQuery = templateParts.fromQuery;
+exports.thumbnailOf = templateParts.thumbnailOf;
+exports.foundationScreenTemplates = foundationScreenTemplates;
+//# sourceMappingURL=index.js.map

package/dist/cjs/foundation/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../foundation/templates/index.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { boardScreenTemplate } from './boardScreenTemplate';\nimport { dashboardScreenTemplate } from './dashboardScreenTemplate';\nimport { formScreenTemplate } from './formScreenTemplate';\nimport { listScreenTemplate } from './listScreenTemplate';\nimport { masterDetailScreenTemplate } from './masterDetailScreenTemplate';\nimport { recordPageTemplate } from './recordPageTemplate';\nimport { wizardScreenTemplate } from './wizardScreenTemplate';\nimport { workspaceScreenTemplate } from './workspaceScreenTemplate';\n\nexport * from './templateParts';\nexport * from './boardScreenTemplate';\nexport * from './dashboardScreenTemplate';\nexport * from './formScreenTemplate';\nexport * from './listScreenTemplate';\nexport * from './masterDetailScreenTemplate';\nexport * from './recordPageTemplate';\nexport * from './wizardScreenTemplate';\nexport * from './workspaceScreenTemplate';\n\n/** The foundation screen templates, in the order the manifest lists them. The workspace comes first: it is the container the master/detail nests in. */\nexport const foundationScreenTemplates = [\n    workspaceScreenTemplate, dashboardScreenTemplate, listScreenTemplate, boardScreenTemplate, masterDetailScreenTemplate, recordPageTemplate, formScreenTemplate, wizardScreenTemplate,\n];\n"],"names":["foundationScreenTemplates","workspaceScreenTemplate","dashboardScreenTemplate","listScreenTemplate","boardScreenTemplate","masterDetailScreenTemplate","recordPageTemplate","formScreenTemplate","wizardScreenTemplate"],"mappings":";;;;;;;;;;;;AAAA;AACA;AAqBA,yJACO,MAAMA,yBAAAA,GAA4B;AACrCC,IAAAA,+CAAAA;AAAyBC,IAAAA,+CAAAA;AAAyBC,IAAAA,qCAAAA;AAAoBC,IAAAA,uCAAAA;AAAqBC,IAAAA,qDAAAA;AAA4BC,IAAAA,qCAAAA;AAAoBC,IAAAA,qCAAAA;AAAoBC,IAAAA;;;;;;;;;;;;;;;"}

package/dist/cjs/foundation/templates/listScreenTemplate.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The collection screen: search, filters, a list that is a table, grouped, or cards, a bar that appears when rows are selected, and a footer for paging.
+ * Search, sort, page and selection live in the address, so a link shares the list as it is. On a phone the table becomes cards.
+ */ const listScreenTemplate = {
+    name: 'ListScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'toolbar'
+        },
+        {
+            name: 'filters'
+        },
+        {
+            name: 'list'
+        },
+        {
+            name: 'bulkBar'
+        },
+        {
+            name: 'footer'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.column([
+            flowBuilders.slotLeaf('header'),
+            flowBuilders.row([
+                flowBuilders.slotLeaf('toolbar')
+            ], 8),
+            flowBuilders.slotLeaf('filters'),
+            flowBuilders.slotLeaf('bulkBar'),
+            flowBuilders.slotLeaf('list'),
+            flowBuilders.slotLeaf('footer')
+        ], 12),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('header'),
+                    flowBuilders.slotLeaf('toolbar'),
+                    flowBuilders.slotLeaf('filters'),
+                    flowBuilders.slotLeaf('bulkBar'),
+                    flowBuilders.slotLeaf('list'),
+                    flowBuilders.slotLeaf('footer')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            templateParts.component('list-header', 'pageHeader', {
+                title: 'Deals',
+                subtitle: 'Every open and closed deal'
+            })
+        ],
+        toolbar: [
+            templateParts.component('list-search', 'globalSearch', {
+                placeholder: 'Search deals',
+                label: 'Search deals',
+                urlKey: 'dealsq'
+            }),
+            templateParts.component('list-views', 'savedViewsMenu', {
+                views: templateParts.fromQuery('DealViews'),
+                savePermission: 'enabled',
+                managePermission: 'enabled'
+            }),
+            templateParts.component('list-columns', 'columnChooser', {
+                columns: templateParts.fromQuery('DealColumnChoices')
+            })
+        ],
+        filters: [
+            templateParts.component('list-filter', 'filterBuilder', {
+                fields: templateParts.fromQuery('DealFilterFields')
+            })
+        ],
+        list: [
+            templateParts.component('list-records', 'dataList', {
+                label: 'Deals',
+                rows: templateParts.fromQuery('Deals'),
+                columns: templateParts.fromQuery('DealColumns'),
+                titleField: 'name',
+                selectionMode: 'multiple',
+                pageSize: 10,
+                rowActions: [
+                    'Open',
+                    'Archive'
+                ],
+                urlKey: 'deals'
+            })
+        ],
+        bulkBar: [
+            templateParts.component('list-bulk', 'bulkBar', {
+                selection: templateParts.fromQuery('DealSelection'),
+                actions: [
+                    'Assign',
+                    'Archive'
+                ]
+            })
+        ],
+        footer: []
+    },
+    displayName: 'List',
+    description: 'A searchable, filterable collection that is a table, grouped or cards, with a bulk bar for selected rows.',
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'List',
+        category: 'Foundation / List',
+        thumbnail: templateParts.thumbnailOf('ListScreen')
+    }
+};
+
+exports.listScreenTemplate = listScreenTemplate;
+//# sourceMappingURL=listScreenTemplate.js.map

package/dist/cjs/foundation/templates/listScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listScreenTemplate.js","sources":["../../../../foundation/templates/listScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The collection screen: search, filters, a list that is a table, grouped, or cards, a bar that appears when rows are selected, and a footer for paging.\n * Search, sort, page and selection live in the address, so a link shares the list as it is. On a phone the table becomes cards.\n */\nexport const listScreenTemplate: ScreenTemplate = {\n    name: 'ListScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'toolbar' }, { name: 'filters' }, { name: 'list' }, { name: 'bulkBar' }, { name: 'footer' }],\n    arrangement: {\n        root: column([slotLeaf('header'), row([slotLeaf('toolbar')], 8), slotLeaf('filters'), slotLeaf('bulkBar'), slotLeaf('list'), slotLeaf('footer')], 12),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('toolbar'), slotLeaf('filters'), slotLeaf('bulkBar'), slotLeaf('list'), slotLeaf('footer')], 16) }],\n    },\n    content: {\n        header: [component('list-header', 'pageHeader', { title: 'Deals', subtitle: 'Every open and closed deal' })],\n        toolbar: [\n            component('list-search', 'globalSearch', { placeholder: 'Search deals', label: 'Search deals', urlKey: 'dealsq' }),\n            component('list-views', 'savedViewsMenu', { views: fromQuery('DealViews'), savePermission: 'enabled', managePermission: 'enabled' }),\n            component('list-columns', 'columnChooser', { columns: fromQuery('DealColumnChoices') }),\n        ],\n        filters: [component('list-filter', 'filterBuilder', { fields: fromQuery('DealFilterFields') })],\n        list: [component('list-records', 'dataList', {\n            label: 'Deals', rows: fromQuery('Deals'), columns: fromQuery('DealColumns'), titleField: 'name', selectionMode: 'multiple', pageSize: 10, rowActions: ['Open', 'Archive'], urlKey: 'deals',\n        })],\n        bulkBar: [component('list-bulk', 'bulkBar', { selection: fromQuery('DealSelection'), actions: ['Assign', 'Archive'] })],\n        footer: [],\n    },\n    displayName: 'List',\n    description: 'A searchable, filterable collection that is a table, grouped or cards, with a bulk bar for selected rows.',\n    metadata: { ...foundationTemplateProvenance, type: 'List', category: 'Foundation / List', thumbnail: thumbnailOf('ListScreen') },\n};\n"],"names":["listScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","row","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","toolbar","placeholder","label","urlKey","views","fromQuery","savePermission","managePermission","columns","filters","fields","list","rows","titleField","selectionMode","pageSize","rowActions","bulkBar","selection","actions","footer","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":"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"}

package/dist/cjs/foundation/templates/masterDetailScreenTemplate.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var scene_model = require('@cratis/scene.model');
+var flowBuilders = require('../../layouts/flowBuilders.js');
+var templateParts = require('./templateParts.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The master/detail: a list beside the selected record. The selection lives in the address, so a link opens a record and the back button returns to the
+ * list; on a phone the two become a navigation stack - the list, then the record with a way back. It lives in a module workspace's `moduleContent`.
+ */ const masterDetailScreenTemplate = {
+    name: 'MasterDetailScreen',
+    fitsSlot: 'WorkspaceScreen.moduleContent',
+    slots: [
+        {
+            name: 'list'
+        },
+        {
+            name: 'details'
+        }
+    ],
+    arrangement: {
+        root: flowBuilders.grid([
+            flowBuilders.slotLeaf('list'),
+            flowBuilders.slotLeaf('details', {
+                span: 2
+            })
+        ], 3, 16),
+        overrides: [
+            {
+                width: scene_model.WidthSizeClass.Compact,
+                root: flowBuilders.column([
+                    flowBuilders.slotLeaf('list'),
+                    flowBuilders.slotLeaf('details')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        list: [
+            templateParts.component('md-list', 'dataList', {
+                label: 'Accounts',
+                rows: templateParts.fromQuery('Deals'),
+                columns: templateParts.fromQuery('DealColumns'),
+                titleField: 'name',
+                selectionMode: 'single',
+                urlKey: 'md'
+            })
+        ],
+        details: [
+            templateParts.component('md-detail', 'tabSet', {
+                tabs: templateParts.fromQuery('RecordTabs'),
+                urlKey: 'mdtab',
+                label: 'Account'
+            })
+        ]
+    },
+    displayName: 'Master/detail with address selection',
+    description: 'A list beside the selected record that stacks into a navigation stack on a phone.',
+    outlets: [
+        {
+            name: 'master-detail.detail',
+            description: 'The selected record.',
+            accepts: [
+                'Detail'
+            ]
+        }
+    ],
+    metadata: {
+        ...templateParts.foundationTemplateProvenance,
+        type: 'Workspace',
+        category: 'Foundation / Workspace',
+        thumbnail: templateParts.thumbnailOf('MasterDetailScreen')
+    }
+};
+
+exports.masterDetailScreenTemplate = masterDetailScreenTemplate;
+//# sourceMappingURL=masterDetailScreenTemplate.js.map

package/dist/cjs/foundation/templates/masterDetailScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterDetailScreenTemplate.js","sources":["../../../../foundation/templates/masterDetailScreenTemplate.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The master/detail: a list beside the selected record. The selection lives in the address, so a link opens a record and the back button returns to the\n * list; on a phone the two become a navigation stack - the list, then the record with a way back. It lives in a module workspace's `moduleContent`.\n */\nexport const masterDetailScreenTemplate: ScreenTemplate = {\n    name: 'MasterDetailScreen',\n    fitsSlot: 'WorkspaceScreen.moduleContent',\n    slots: [{ name: 'list' }, { name: 'details' }],\n    arrangement: {\n        root: grid([slotLeaf('list'), slotLeaf('details', { span: 2 })], 3, 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('list'), slotLeaf('details')], 16) }],\n    },\n    content: {\n        list: [component('md-list', 'dataList', { label: 'Accounts', rows: fromQuery('Deals'), columns: fromQuery('DealColumns'), titleField: 'name', selectionMode: 'single', urlKey: 'md' })],\n        details: [component('md-detail', 'tabSet', { tabs: fromQuery('RecordTabs'), urlKey: 'mdtab', label: 'Account' })],\n    },\n    displayName: 'Master/detail with address selection',\n    description: 'A list beside the selected record that stacks into a navigation stack on a phone.',\n    outlets: [{ name: 'master-detail.detail', description: 'The selected record.', accepts: ['Detail'] }],\n    metadata: { ...foundationTemplateProvenance, type: 'Workspace', category: 'Foundation / Workspace', thumbnail: thumbnailOf('MasterDetailScreen') },\n};\n"],"names":["masterDetailScreenTemplate","name","fitsSlot","slots","arrangement","root","grid","slotLeaf","span","overrides","width","WidthSizeClass","Compact","column","content","list","component","label","rows","fromQuery","columns","titleField","selectionMode","urlKey","details","tabs","displayName","description","outlets","accepts","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;;;AAAA;AACA;AAMA;;;UAIaA,0BAAAA,GAA6C;IACtDC,IAAAA,EAAM,oBAAA;IACNC,QAAAA,EAAU,+BAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAO,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAU;AAAE,KAAA;IAC9CG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,iBAAAA,CAAK;YAACC,qBAAAA,CAAS,MAAA,CAAA;AAASA,YAAAA,qBAAAA,CAAS,SAAA,EAAW;gBAAEC,IAAAA,EAAM;AAAE,aAAA;AAAG,SAAA,EAAE,CAAA,EAAG,EAAA,CAAA;QACpEC,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,2BAAeC,OAAO;AAAEP,gBAAAA,IAAAA,EAAMQ,mBAAAA,CAAO;oBAACN,qBAAAA,CAAS,MAAA,CAAA;oBAASA,qBAAAA,CAAS,SAAA;iBAAW,EAAE,EAAA;AAAI;AAAE;AAC7G,KAAA;IACAO,OAAAA,EAAS;QACLC,IAAAA,EAAM;AAACC,YAAAA,uBAAAA,CAAU,WAAW,UAAA,EAAY;gBAAEC,KAAAA,EAAO,UAAA;AAAYC,gBAAAA,IAAAA,EAAMC,uBAAAA,CAAU,OAAA,CAAA;AAAUC,gBAAAA,OAAAA,EAASD,uBAAAA,CAAU,aAAA,CAAA;gBAAgBE,UAAAA,EAAY,MAAA;gBAAQC,aAAAA,EAAe,QAAA;gBAAUC,MAAAA,EAAQ;AAAK,aAAA;AAAG,SAAA;QACvLC,OAAAA,EAAS;AAACR,YAAAA,uBAAAA,CAAU,aAAa,QAAA,EAAU;AAAES,gBAAAA,IAAAA,EAAMN,uBAAAA,CAAU,YAAA,CAAA;gBAAeI,MAAAA,EAAQ,OAAA;gBAASN,KAAAA,EAAO;AAAU,aAAA;AAAG;AACrH,KAAA;IACAS,WAAAA,EAAa,sCAAA;IACbC,WAAAA,EAAa,mFAAA;IACbC,OAAAA,EAAS;AAAC,QAAA;YAAE3B,IAAAA,EAAM,sBAAA;YAAwB0B,WAAAA,EAAa,sBAAA;YAAwBE,OAAAA,EAAS;AAAC,gBAAA;AAAS;AAAC;AAAE,KAAA;IACrGC,QAAAA,EAAU;AAAE,QAAA,GAAGC,0CAA4B;QAAEC,IAAAA,EAAM,WAAA;QAAaC,QAAAA,EAAU,wBAAA;AAA0BC,QAAAA,SAAAA,EAAWC,yBAAAA,CAAY,oBAAA;AAAsB;AACrJ;;"}