@cratis/scene.blueprint.default 0.1.0

package/gallery/workspaceTemplates.ts

@@ -0,0 +1,198 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';
+import { SlotName, column, grid, slotLeaf } from '../layouts';
+import { TemplateSlotName } from './TemplateSlotName';
+import { button, card, externalComponent, text } from './elements';
+import { emptyState, field, formActions, pageHeader, statCard, table, widget } from './widgets';
+
+/**
+ * The five workhorse shapes inside an application shell: a dashboard, a list, a detail, a form and the
+ * designed empty state.
+ *
+ * Every one fits the layout's `content` slot, and every one carries realistic seeded content rather than
+ * placeholder text. A gallery whose dashboard shows four boxes labeled "Card" proves the renderer runs; a
+ * gallery whose dashboard shows revenue, orders, customers and a real table proves the blueprint is worth
+ * starting an application from.
+ */
+
+/**
+ * The dashboard: four figures across the top, then two columns of larger widgets.
+ *
+ * This is Sakai's composition, and the reason to copy it is that it is the arrangement people already read
+ * fluently - the eye takes the row of numbers first and then settles into the detail.
+ *
+ * Its own arrangement collapses the two columns into one at a compact width, because a two-column widget
+ * grid on a phone is two columns of unreadable slivers.
+ */
+export const dashboardTemplate: ScreenTemplate = {
+    name: 'Dashboard',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Stats }, { name: TemplateSlotName.Primary }, { name: TemplateSlotName.Secondary }],
+    arrangement: {
+        root: column([slotLeaf(TemplateSlotName.Stats), grid([slotLeaf(TemplateSlotName.Primary, { span: 2 }), slotLeaf(TemplateSlotName.Secondary)], 3, 16)]),
+        overrides: [
+            {
+                width: WidthSizeClass.Compact,
+                root: column([slotLeaf(TemplateSlotName.Stats), slotLeaf(TemplateSlotName.Primary), slotLeaf(TemplateSlotName.Secondary)], 16),
+            },
+        ],
+    },
+    content: {
+        [TemplateSlotName.Stats]: [
+            statCard('stat-revenue', 'Revenue', '$284,120', '+12.4% this month', 'pi pi-dollar'),
+            statCard('stat-orders', 'Orders', '1,842', '+3.1% this month', 'pi pi-shopping-cart'),
+            statCard('stat-customers', 'Customers', '9,410', '+128 new', 'pi pi-users'),
+            statCard('stat-open', 'Open tickets', '17', '-4 since Monday', 'pi pi-inbox'),
+        ],
+        [TemplateSlotName.Primary]: [
+            widget('widget-revenue', 'Revenue over time', [
+                table(
+                    'revenue-table',
+                    [
+                        { field: 'month', header: 'Month' },
+                        { field: 'revenue', header: 'Revenue' },
+                        { field: 'change', header: 'Change' },
+                    ],
+                    [
+                        { month: 'March', revenue: '$284,120', change: '+12.4%' },
+                        { month: 'February', revenue: '$252,780', change: '+4.1%' },
+                        { month: 'January', revenue: '$242,830', change: '-1.8%' },
+                        { month: 'December', revenue: '$247,290', change: '+9.6%' },
+                    ],
+                ),
+            ]),
+            widget('widget-orders', 'Recent orders', [
+                table(
+                    'orders-table',
+                    [
+                        { field: 'reference', header: 'Reference' },
+                        { field: 'customer', header: 'Customer' },
+                        { field: 'total', header: 'Total' },
+                        { field: 'status', header: 'Status' },
+                    ],
+                    [
+                        { reference: 'ORD-4192', customer: 'Northwind Traders', total: '$1,240.00', status: 'Shipped' },
+                        { reference: 'ORD-4191', customer: 'Contoso Ltd', total: '$318.50', status: 'Packing' },
+                        { reference: 'ORD-4188', customer: 'Fabrikam', total: '$2,980.00', status: 'Awaiting payment' },
+                        { reference: 'ORD-4184', customer: 'Adventure Works', total: '$76.20', status: 'Shipped' },
+                    ],
+                ),
+            ]),
+        ],
+        [TemplateSlotName.Secondary]: [
+            widget('widget-activity', 'Activity', [externalComponent('activity-timeline', 'timeline', { align: 'left' })]),
+            widget('widget-capacity', 'Warehouse capacity', [externalComponent('capacity-bar', 'progressBar', { value: 68 })]),
+        ],
+    },
+    displayName: 'Dashboard',
+    description: 'Four stat cards over two columns of widgets - the composition every template line opens with.',
+};
+
+/** The list: a filter toolbar, a real table, and the row actions a list needs. */
+export const crudListTemplate: ScreenTemplate = {
+    name: 'CrudList',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Toolbar }, { name: TemplateSlotName.Body }],
+    content: {
+        [TemplateSlotName.Toolbar]: [
+            pageHeader('crud-header', 'Products', '412 products across 9 categories', [
+                button('crud-new', 'New product', { severity: 'primary', icon: 'pi pi-plus' }),
+                button('crud-import', 'Import', { severity: 'secondary', icon: 'pi pi-upload' }),
+            ]),
+            externalComponent('crud-search', 'inputText', { placeholder: 'Search products' }),
+        ],
+        [TemplateSlotName.Body]: [
+            table(
+                'products-table',
+                [
+                    { field: 'code', header: 'Code' },
+                    { field: 'name', header: 'Name' },
+                    { field: 'category', header: 'Category' },
+                    { field: 'price', header: 'Price' },
+                    { field: 'stock', header: 'In stock' },
+                ],
+                [
+                    { code: 'P-1001', name: 'Bamboo Watch', category: 'Accessories', price: '$65.00', stock: 24 },
+                    { code: 'P-1002', name: 'Black Watch', category: 'Accessories', price: '$72.00', stock: 61 },
+                    { code: 'P-1003', name: 'Blue Band', category: 'Fitness', price: '$79.00', stock: 2 },
+                    { code: 'P-1004', name: 'Blue T-Shirt', category: 'Clothing', price: '$29.00', stock: 25 },
+                    { code: 'P-1005', name: 'Bracelet', category: 'Accessories', price: '$15.00', stock: 73 },
+                ],
+            ),
+        ],
+    },
+    displayName: 'List',
+    description: 'A searchable table with a header, primary action and row data.',
+};
+
+/** The detail: a summary panel beside the record's own sections. */
+export const detailViewTemplate: ScreenTemplate = {
+    name: 'DetailView',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.SidePanel }],
+    content: {
+        [TemplateSlotName.Header]: [
+            pageHeader('detail-header', 'Bamboo Watch', 'P-1001 · Accessories', [
+                button('detail-edit', 'Edit', { severity: 'primary', icon: 'pi pi-pencil' }),
+                button('detail-archive', 'Archive', { severity: 'secondary', icon: 'pi pi-inbox' }),
+            ]),
+        ],
+        [TemplateSlotName.Body]: [
+            widget('detail-description', 'Description', [
+                text('detail-description-text', 'A bamboo-cased watch with a sapphire face and a recycled steel strap.'),
+            ]),
+            widget('detail-history', 'Price history', [externalComponent('detail-history-timeline', 'timeline', { align: 'left' })]),
+        ],
+        [TemplateSlotName.SidePanel]: [
+            widget('detail-summary', 'Summary', [
+                text('detail-stock', 'In stock: 24'),
+                text('detail-reserved', 'Reserved: 3'),
+                externalComponent('detail-status', 'tag', { value: 'Active', severity: 'success' }),
+            ]),
+        ],
+    },
+    displayName: 'Detail',
+    description: 'One record: a header with actions, its sections, and a summary panel.',
+};
+
+/** The form: fields, grouped, with the actions that close them. */
+export const formPageTemplate: ScreenTemplate = {
+    name: 'FormPage',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],
+    content: {
+        [TemplateSlotName.Header]: [pageHeader('form-header', 'New product', 'Everything marked with an asterisk is required')],
+        [TemplateSlotName.Body]: [
+            card('form-card', [
+                field('form-name', 'Name', 'inputText', { placeholder: 'Bamboo Watch' }),
+                field('form-code', 'Code', 'inputText', { placeholder: 'P-1001' }),
+                field('form-category', 'Category', 'dropdown', { options: ['Accessories', 'Clothing', 'Fitness'] }),
+                field('form-price', 'Price', 'inputNumber', { mode: 'currency', currency: 'USD' }),
+                field('form-available', 'Available from', 'calendar', {}),
+                field('form-notes', 'Notes', 'inputTextarea', { rows: 4 }),
+            ]),
+        ],
+        [TemplateSlotName.Actions]: [formActions('form-actions', 'Create product')],
+    },
+    displayName: 'Form',
+    description: 'A grouped form with the field types an application actually uses.',
+};
+
+/** The empty state: what a list looks like before anything exists, designed rather than apologized for. */
+export const emptyTemplate: ScreenTemplate = {
+    name: 'Empty',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Body }],
+    content: {
+        [TemplateSlotName.Body]: [
+            emptyState('empty-state', 'No products yet', 'Products you create will show up here, with their stock and pricing.', 'Create the first product'),
+        ],
+    },
+    displayName: 'Empty state',
+    description: 'The designed empty state for a list that has nothing in it yet.',
+};
+
+/** The five workspace templates. */
+export const workspaceTemplates: ScreenTemplate[] = [dashboardTemplate, crudListTemplate, detailViewTemplate, formPageTemplate, emptyTemplate];

package/index.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './packageName';
+export * from './ComponentName';
+export * from './configuration';
+export * from './layouts';
+export * from './gallery';
+export * from './shell';
+export * from './themes';
+export * from './defaultBlueprintComponents';
+export * from './defaultBlueprint';

package/layouts/LayoutName.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.
+
+/**
+ * The application shells this package provides.
+ *
+ * Only true application-level shells are layouts. Everything else this package ships - dashboards, CRUD
+ * lists, sign-in screens - is a page or dialog template that *fits into* one of these, not a layout of its
+ * own. Keeping the distinction in the type means the manifest's `layouts` list cannot quietly grow into a
+ * catalog of pages.
+ */
+export enum LayoutName {
+    /** Topbar, sidebar, breadcrumb, content, footer and an optional right panel - the shell an application signs in to. */
+    AppShell = 'AppShell',
+
+    /** No chrome at all: content, an optional branding aside, and the configurator. */
+    FullPage = 'FullPage',
+}

package/layouts/SlotName.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * The regions this package's layouts expose.
+ *
+ * These are the names a {@link Layout}'s {@link Slot}s carry, the keys a page template's content is
+ * filed under, and the keys the shell components read out of their `slots` prop - one enum for all three,
+ * because a slot filled under a name the shell never reads renders nothing at all and reports nothing
+ * either. That silent failure is exactly what a shared vocabulary prevents.
+ *
+ * The set follows PrimeTek's template line: Sakai establishes topbar/sidebar/menu/content/footer, and the
+ * premium templates (Diamond, Atlantis, Freya, Apollo, Ultima, Avalon, Verona) add breadcrumb and a right
+ * panel. Both are exposed here, because a layout package that only covers the free template's regions
+ * forces anyone wanting the others to fork it.
+ */
+export enum SlotName {
+    /** The fixed strip across the top: brand, the sidebar toggle, and per-screen actions. */
+    Topbar = 'topbar',
+
+    /** The sidebar's own chrome - its header, brand and pin button. */
+    Sidebar = 'sidebar',
+
+    /** The navigation itself, so a screen can replace the menu without replacing the sidebar around it. */
+    Menu = 'menu',
+
+    /** The trail above the content. */
+    Breadcrumb = 'breadcrumb',
+
+    /** The screen itself. The only slot every layout declares. */
+    Content = 'content',
+
+    /** The strip below the content. */
+    Footer = 'footer',
+
+    /** The optional inspector panel down the right-hand edge. */
+    RightPanel = 'rightPanel',
+
+    /** The floating configurator. Present in both shells, because a full-page screen still has to be themeable. */
+    ConfigPanel = 'configPanel',
+
+    /** The branding half of a full-page screen's split - the panel a login form sits beside. */
+    Aside = 'aside',
+}

package/layouts/appShell.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FlowArrangement, HeightSizeClass, Layout, WidthSizeClass } from '@cratis/scene.model';
+import { LayoutName } from './LayoutName';
+import { SlotName } from './SlotName';
+import { column, row, slotLeaf } from './flowBuilders';
+
+/**
+ * The tree at a regular width and height: a topbar across the top, the sidebar column beside the main
+ * column, an optional right panel down the edge, and the configurator floating over all of it.
+ */
+export const appShellRegularRoot = column([
+    slotLeaf(SlotName.Topbar),
+    row(
+        [
+            column([slotLeaf(SlotName.Sidebar), slotLeaf(SlotName.Menu, { grow: 1 })]),
+            column([slotLeaf(SlotName.Breadcrumb), slotLeaf(SlotName.Content, { grow: 1 }), slotLeaf(SlotName.Footer)], 0, { grow: 1 }),
+            slotLeaf(SlotName.RightPanel),
+        ],
+        0,
+        { grow: 1 },
+    ),
+    slotLeaf(SlotName.ConfigPanel),
+]);
+
+/**
+ * The tree at a compact width: the sidebar and the right panel leave the flow entirely.
+ *
+ * They leave rather than shrink because there is no width at which an 18rem panel and a 20rem panel both
+ * fit beside content on a phone. The sidebar is still rendered - off-canvas, over the content, behind the
+ * mask - but it no longer *occupies* anything, and that is a fact about the arrangement, not about CSS.
+ */
+export const appShellCompactWidthRoot = column([
+    slotLeaf(SlotName.Topbar),
+    column([slotLeaf(SlotName.Breadcrumb), slotLeaf(SlotName.Content, { grow: 1 }), slotLeaf(SlotName.Footer)], 0, { grow: 1 }),
+    slotLeaf(SlotName.ConfigPanel),
+]);
+
+/**
+ * The tree at a compact height: the breadcrumb and the footer go.
+ *
+ * A landscape phone has room across but almost none down, and two horizontal strips of chrome eat most of
+ * what is left. Dropping them is the height axis earning its place in the size-class matrix - width alone
+ * cannot express it.
+ */
+export const appShellCompactHeightRoot = column([
+    slotLeaf(SlotName.Topbar),
+    row(
+        [column([slotLeaf(SlotName.Sidebar), slotLeaf(SlotName.Menu, { grow: 1 })]), slotLeaf(SlotName.Content, { grow: 1 }), slotLeaf(SlotName.RightPanel)],
+        0,
+        { grow: 1 },
+    ),
+    slotLeaf(SlotName.ConfigPanel),
+]);
+
+/**
+ * The tree when both axes are compact - a phone in landscape: nothing but the topbar, the content and the
+ * configurator.
+ *
+ * This override exists to be *more specific* than the two single-axis ones. `evaluateFlowArrangement`
+ * scores an override by how many axes it targets, so without this one a landscape phone would pick
+ * whichever single-axis override was declared last and keep a footer it has no room for.
+ */
+export const appShellCompactRoot = column([
+    slotLeaf(SlotName.Topbar),
+    slotLeaf(SlotName.Content, { grow: 1 }),
+    slotLeaf(SlotName.ConfigPanel),
+]);
+
+/** The arrangement of the {@link appShellLayout}'s own slots, with one override per size-class combination that changes it. */
+export const appShellArrangement: FlowArrangement = {
+    root: appShellRegularRoot,
+    overrides: [
+        { width: WidthSizeClass.Compact, root: appShellCompactWidthRoot },
+        { height: HeightSizeClass.Compact, root: appShellCompactHeightRoot },
+        { width: WidthSizeClass.Compact, height: HeightSizeClass.Compact, root: appShellCompactRoot },
+    ],
+};
+
+/**
+ * The application shell layout.
+ *
+ * This is the *application-level* structure - the base navigational look an application picks once and
+ * every page then lives inside. The regions are the ones PrimeTek's template line settled on: Sakai
+ * establishes topbar, sidebar, menu, content and footer, and the premium templates add the breadcrumb and
+ * the right panel. Both sets are here, because a layout package covering only the free template's regions
+ * forces a fork on anyone who wants the others.
+ *
+ * The slots carry no arrangement of their own: how a screen's content is arranged *inside* a slot is that
+ * page template's business, and a layout that dictated it would stop being a shell.
+ */
+export const appShellLayout: Layout = {
+    name: LayoutName.AppShell,
+    slots: [
+        { name: SlotName.Topbar },
+        { name: SlotName.Sidebar },
+        { name: SlotName.Menu },
+        { name: SlotName.Breadcrumb },
+        { name: SlotName.Content },
+        { name: SlotName.Footer },
+        { name: SlotName.RightPanel },
+        { name: SlotName.ConfigPanel },
+    ],
+    arrangement: appShellArrangement,
+};

package/layouts/defaultLayouts.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 { Layout } from '@cratis/scene.model';
+import { appShellLayout } from './appShell';
+import { fullPageLayout } from './fullPage';
+
+/**
+ * The layouts this package provides.
+ *
+ * Two, and deliberately only two - every application shell worth having is one of these, and everything
+ * else this package ships is a page or dialog template that fits *into* one of them. The list is what the
+ * manifest's `layouts` names and what the bundle provides, which is what `validatePackageBundle` proves.
+ */
+export const defaultLayouts: Layout[] = [appShellLayout, fullPageLayout];

package/layouts/flowBuilders.ts

@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FlowColumn, FlowContainerKind, FlowGrid, FlowNode, FlowRow, FlowSlotLeaf } from '@cratis/scene.model';
+
+/**
+ * Small constructors for the `flow` primitives a layout's macro arrangement is built from.
+ *
+ * They exist because the primitives are structural interfaces with required members (`gap` and
+ * `children` on every container), so writing a tree as object literals buries the shape under
+ * boilerplate - and a layout tree is a thing to be read, not decoded. These keep the declarations in
+ * `appShell.ts` and `fullPage.ts` down to the structure itself.
+ *
+ * Each container carries its {@link FlowContainerKind}, which is what lets a renderer tell a row from a
+ * column - they are otherwise the same shape, and TypeScript has no runtime types to test. These builders
+ * set it, so a declaration site never has to repeat it and can never get it wrong.
+ */
+
+/**
+ * A leaf positioning one of the containing layout's or screen template's own named slots.
+ *
+ * Takes a plain string rather than one enum, because a layout arranges {@link SlotName}s while a screen
+ * template arranges its own vocabulary - and the same builder has to serve both. That every leaf names a
+ * slot its container actually declares is checked by a spec rather than by the type, since no type can
+ * express "one of whatever this particular container declared".
+ */
+export function slotLeaf(slotName: string, node: FlowNode = {}): FlowSlotLeaf {
+    return { ...node, slotName };
+}
+
+/** A container arranging its children horizontally. */
+export function row(children: FlowNode[], gap = 0, node: FlowNode = {}): FlowRow {
+    return { ...node, gap, children, kind: FlowContainerKind.Row };
+}
+
+/** A container arranging its children vertically. */
+export function column(children: FlowNode[], gap = 0, node: FlowNode = {}): FlowColumn {
+    return { ...node, gap, children, kind: FlowContainerKind.Column };
+}
+
+/**
+ * A container arranging its children in a grid.
+ *
+ * `columns` is always set rather than left to the renderer - a grid that does not say how many tracks it
+ * has leaves the renderer guessing at the one thing the author cared about.
+ */
+export function grid(children: FlowNode[], columns: number, gap = 0, node: FlowNode = {}): FlowGrid {
+    return { ...node, gap, children, columns, kind: FlowContainerKind.Grid };
+}

package/layouts/fullPage.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FlowArrangement, Layout, WidthSizeClass } from '@cratis/scene.model';
+import { LayoutName } from './LayoutName';
+import { SlotName } from './SlotName';
+import { column, row, slotLeaf } from './flowBuilders';
+
+/**
+ * The tree at a regular width: the branding aside beside the content, with the configurator over both.
+ *
+ * The split is the shape every premium PrimeTek sign-in page uses - a colored branding half and a form
+ * half - and it is the reason `aside` is a slot rather than something a screen paints inside `content`.
+ */
+export const fullPageRegularRoot = column([row([slotLeaf(SlotName.Aside), slotLeaf(SlotName.Content, { grow: 1 })], 0, { grow: 1 }), slotLeaf(SlotName.ConfigPanel)]);
+
+/**
+ * The tree at a compact width: the branding aside leaves the flow.
+ *
+ * On a phone the aside would take 40% of the width from the only thing that matters on a sign-in screen,
+ * which is the form. It drops out rather than stacking above it, because a sign-in form pushed below the
+ * fold by decoration is the worst possible first screen.
+ */
+export const fullPageCompactWidthRoot = column([slotLeaf(SlotName.Content, { grow: 1 }), slotLeaf(SlotName.ConfigPanel)]);
+
+/** The arrangement of the {@link fullPageLayout}'s own slots. */
+export const fullPageArrangement: FlowArrangement = {
+    root: fullPageRegularRoot,
+    overrides: [{ width: WidthSizeClass.Compact, root: fullPageCompactWidthRoot }],
+};
+
+/**
+ * The chrome-less layout.
+ *
+ * Sign-in, register, forgotten password, verification, lock, error, access-denied, not-found and landing
+ * screens all use this rather than a stripped-down application shell, and that split is structural in
+ * every PrimeTek template for a reason worth repeating: none of those screens has navigation state, a
+ * sidebar to remember or a breadcrumb to place, so hanging them off the application shell would mean every
+ * one of the eight modes needs an answer for a page with no menu.
+ *
+ * The configurator stays, because the sign-in page is very often the first page anyone sees and it still
+ * has to honor the chosen theme.
+ */
+export const fullPageLayout: Layout = {
+    name: LayoutName.FullPage,
+    slots: [{ name: SlotName.Aside }, { name: SlotName.Content }, { name: SlotName.ConfigPanel }],
+    arrangement: fullPageArrangement,
+};

package/layouts/index.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './SlotName';
+export * from './LayoutName';
+export * from './flowBuilders';
+export * from './shellComponents';
+export * from './appShell';
+export * from './fullPage';
+export * from './defaultLayouts';

package/layouts/shellComponents.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 { ComponentName } from '../ComponentName';
+import { LayoutName } from './LayoutName';
+
+/**
+ * Which component renders which layout.
+ *
+ * A {@link Layout} is data - named slots and an arrangement - and says nothing about how it is drawn. This
+ * is the one place that pairing lives, so a host holding a screen and its layout name can find the shell
+ * to render it in without hardcoding the answer, and a spec can prove every layout the blueprint declares
+ * actually has one.
+ */
+const shellComponents: Record<LayoutName, ComponentName> = {
+    [LayoutName.AppShell]: ComponentName.AppShell,
+    [LayoutName.FullPage]: ComponentName.FullPageShell,
+};
+
+/**
+ * The component that renders a layout.
+ *
+ * @param layoutName The layout's name.
+ * @returns The bare component name, or `undefined` when the layout is not one of this blueprint's.
+ */
+export function shellComponentForLayout(layoutName: string): ComponentName | undefined {
+    return shellComponents[layoutName as LayoutName];
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@cratis/scene.blueprint.default",
+    "version": "0.1.0",
+    "description": "The default blueprint: application shell layouts, the screen and dialog templates that go inside them, the components that fill their slots, and two themes.",
+    "author": "Cratis",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Cratis/Scene.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist",
+        "**/*.ts",
+        "**/*.tsx",
+        "shell/layout.css"
+    ],
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/esm/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/esm/index.d.ts",
+            "require": "./dist/cjs/index.js",
+            "import": "./dist/esm/index.js"
+        },
+        "./styles": "./shell/layout.css",
+        "./styles.css": "./shell/layout.css"
+    },
+    "scripts": {
+        "prepare": "yarn g:build",
+        "clean": "yarn g:clean",
+        "build": "yarn g:build",
+        "lint": "yarn g:lint",
+        "lint:ci": "yarn g:lint:ci",
+        "test": "yarn g:test",
+        "ci": "yarn g:ci",
+        "up": "yarn g:up",
+        "dev": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "dependencies": {
+        "@cratis/scene.engine": "0.1.0",
+        "@cratis/scene.model": "0.1.0",
+        "@cratis/scene.react": "0.1.0"
+    },
+    "devDependencies": {
+        "@cratis/scene.engine": "0.1.0",
+        "@cratis/scene.model": "0.1.0",
+        "@cratis/scene.react": "0.1.0",
+        "@storybook/addon-links": "^10.4.1",
+        "@storybook/react": "^10.4.1",
+        "@storybook/react-vite": "^10.4.1",
+        "primeicons": "^7.0.0",
+        "primereact": "10.9.8",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "storybook": "^10.4.1"
+    },
+    "peerDependencies": {
+        "primereact": "^10.9.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    }
+}

package/packageName.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * The name this blueprint is known by inside a `ui profile`.
+ *
+ * It is not the npm package name: a profile lists Scene package names, a theme declares compatibility
+ * with them, and `componentRegistryKey` builds every registry key from this. It therefore lives on its own
+ * rather than inside the manifest, so the registry can key off it without importing the manifest that
+ * describes the registry.
+ */
+export const defaultBlueprintName = 'Cratis.Blueprint.Default';