@cratis/scene.blueprint.components 0.1.0

package/for_ArcPageHeader/when_rendering_a_gallery_screen.tsx

@@ -0,0 +1,79 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { render, screen } from '@testing-library/react';
+import { SceneElement } from '@cratis/scene.model';
+import { SceneElementView } from '@cratis/scene.react';
+import { clearBindings, registerQuery } from '@cratis/scene.components';
+import { composeScreenElement, resolveElementComponentNames } from '@cratis/scene.blueprint.default';
+import { componentsBlueprintCatalog, componentsBlueprintProfile, componentsGalleryScreen, componentsPreviewRegistry } from '../gallery';
+import { SampleBindingName, arcPageHeader } from '../templates';
+
+class AllInvoices {}
+
+function renderElement(element: SceneElement) {
+    render(
+        <SceneElementView
+            element={resolveElementComponentNames(element, componentsBlueprintProfile, componentsBlueprintCatalog)}
+            registry={componentsPreviewRegistry}
+            resolveBinding={() => undefined}
+        />,
+    );
+}
+
+function has(selector: string): boolean {
+    return document.querySelector(selector) !== null;
+}
+
+describe('when rendering a gallery screen', () => {
+    describe('and nothing is registered', () => {
+        beforeEach(() => {
+            clearBindings();
+            renderElement(composeScreenElement(componentsGalleryScreen('DataListPage')!));
+        });
+
+        afterEach(() => clearBindings());
+
+        it('should render inside the shell the blueprint it depends on provides', () => {
+            has('.layout-topbar').should.equal(true);
+        });
+
+        it('should render the page header this blueprint contributes', () => {
+            has('.layout-page-header').should.equal(true);
+        });
+
+        it('should render the trail derived from the section and the title', () => {
+            screen.getAllByLabelText('Breadcrumb').some(element => element.textContent === 'Billing › Invoices').should.equal(true);
+        });
+
+        it('should say which query a host still has to register', () => {
+            screen.getAllByText('No query registered as AllInvoices').length.should.be.greaterThan(0);
+        });
+
+        it('should render the unbound data page as a placeholder naming the binding it wanted', () => {
+            screen.getAllByText("Unresolved query binding 'AllInvoices' on Cratis.Components:dataPage").length.should.be.greaterThan(0);
+        });
+
+        it('should render no unresolved-component fallback, because every name the page writes resolves', () => {
+            has('[data-scene-unresolved-component]').should.equal(false);
+        });
+    });
+
+    describe('and the header binding is registered', () => {
+        beforeEach(() => {
+            clearBindings();
+            registerQuery(SampleBindingName.AllInvoices, AllInvoices);
+            renderElement(arcPageHeader('bound-header', { title: 'Invoices', section: 'Billing', query: SampleBindingName.AllInvoices }));
+        });
+
+        afterEach(() => clearBindings());
+
+        it('should report the binding as resolved rather than missing', () => {
+            screen.getAllByText('Bound to query AllInvoices').length.should.be.greaterThan(0);
+        });
+
+        it('should mark the header as bound, so a preview can be scanned for what is still unwired', () => {
+            has('[data-scene-binding-state="bound"]').should.equal(true);
+        });
+    });
+});

package/for_CompositeName/when_checking_the_names_against_the_packages_that_declare_them.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { cratisComponentsPackageManifest } from '@cratis/scene.components';
+import { BorrowedComponentName } from '../BorrowedComponentName';
+import { CompositeName } from '../CompositeName';
+import { primeReactComponentNames } from '../gallery';
+
+/**
+ * The names this blueprint writes into its templates belong to other packages, and this is the standing
+ * check that they still exist there.
+ *
+ * The failure this prevents is quiet. A composite renamed upstream leaves every template that referenced it
+ * rendering a dashed red box somewhere inside a page, and nothing in the box says which template wrote the
+ * name. Checking the enum against the owning manifest turns that into a failed spec in this package.
+ */
+describe('when checking the names against the packages that declare them', () => {
+    const declaredByTheLibrary = new Set(cratisComponentsPackageManifest.components);
+
+    it('should have composite names to check', () => {
+        Object.values(CompositeName).should.not.be.empty;
+    });
+
+    it('should reference only composites the component library declares', () => {
+        Object.values(CompositeName)
+            .filter(name => !declaredByTheLibrary.has(name))
+            .should.be.empty;
+    });
+
+    it('should borrow only names PrimeReact declares', () => {
+        Object.values(BorrowedComponentName)
+            .filter(name => !primeReactComponentNames.includes(name))
+            .should.be.empty;
+    });
+
+    it('should borrow nothing the component library already declares, since the library would win the bare name anyway', () => {
+        Object.values(BorrowedComponentName)
+            .filter(name => declaredByTheLibrary.has(name))
+            .should.be.empty;
+    });
+});

package/for_componentsBlueprint/when_resolving_its_dependencies.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageKind, ScenePackage } from '@cratis/scene.model';
+import { isPackageSelectionValid, resolvePackageDependencies } from '@cratis/scene.engine';
+import { cratisComponentsPackageManifest } from '@cratis/scene.components';
+import { defaultBlueprintManifest } from '@cratis/scene.blueprint.default';
+import { componentsBlueprintManifest } from '../componentsBlueprint';
+import { componentsBlueprintName } from '../packageName';
+
+/** A styling package declaring nothing but itself - enough for `Cratis.Components` to depend on, and no more. */
+const tailwind: ScenePackage = {
+    name: 'Tailwind',
+    version: '4.3.3',
+    kind: PackageKind.Styling,
+    dependencies: [],
+    components: [],
+    layouts: [],
+    screenTemplates: [],
+    dialogTemplates: [],
+    themes: [],
+};
+
+/** The base component library both of this blueprint's dependencies are written against, at the version this repository pins. */
+const primeReact: ScenePackage = {
+    name: 'PrimeReact',
+    version: '10.9.8',
+    kind: PackageKind.ComponentLibrary,
+    dependencies: [{ name: 'Tailwind' }],
+    components: ['column', 'table', 'dialog'],
+    layouts: [],
+    screenTemplates: [],
+    dialogTemplates: [],
+    themes: [],
+};
+
+describe('when resolving its dependencies', () => {
+    const catalog = [tailwind, primeReact, cratisComponentsPackageManifest, defaultBlueprintManifest, componentsBlueprintManifest];
+    const selection = resolvePackageDependencies([componentsBlueprintName], catalog);
+    const positionOf = (name: string) => selection.packages.indexOf(name);
+
+    it('should be a valid selection', () => {
+        isPackageSelectionValid(selection).should.be.true;
+    });
+
+    it('should order the blueprint it layers on before it', () => {
+        positionOf('Cratis.Blueprint.Default').should.be.lessThan(positionOf(componentsBlueprintName));
+    });
+
+    it('should order the component library its templates are built from before it', () => {
+        positionOf('Cratis.Components').should.be.lessThan(positionOf(componentsBlueprintName));
+    });
+
+    it('should pull in the packages its own dependencies need, transitively', () => {
+        selection.added.should.contain('PrimeReact');
+        selection.added.should.contain('Tailwind');
+    });
+
+    it('should report nothing missing', () => {
+        selection.missing.should.deep.equal([]);
+    });
+
+    it('should report no version conflict', () => {
+        selection.versionConflicts.should.deep.equal([]);
+    });
+
+    it('should report no cycle, even though both blueprints depend on the same library', () => {
+        selection.cycles.should.deep.equal([]);
+    });
+
+    describe('and the default blueprint is not in the catalog', () => {
+        const withoutTheDefaultBlueprint = resolvePackageDependencies(
+            [componentsBlueprintName],
+            [tailwind, primeReact, cratisComponentsPackageManifest, componentsBlueprintManifest],
+        );
+
+        it('should report it missing rather than silently ordering around it', () => {
+            withoutTheDefaultBlueprint.missing.should.deep.equal([{ package: componentsBlueprintName, dependsOn: 'Cratis.Blueprint.Default' }]);
+        });
+
+        it('should not be a valid selection', () => {
+            isPackageSelectionValid(withoutTheDefaultBlueprint).should.be.false;
+        });
+    });
+});

package/for_componentsBlueprint/when_validating_the_bundle.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PackageKind } from '@cratis/scene.model';
+import { validatePackageBundle } from '@cratis/scene.react';
+import { componentsBlueprint, componentsBlueprintManifest } from '../componentsBlueprint';
+import { componentsBlueprintName } from '../packageName';
+
+describe('when validating the bundle', () => {
+    const problems = validatePackageBundle(componentsBlueprint);
+
+    it('should report no problems', () => {
+        problems.should.be.empty;
+    });
+
+    it('should declare itself a blueprint', () => {
+        componentsBlueprintManifest.kind.should.equal(PackageKind.Blueprint);
+    });
+
+    it('should be named as a blueprint package', () => {
+        componentsBlueprintManifest.name.should.equal(componentsBlueprintName);
+    });
+
+    it('should depend on the blueprint it layers on and the library its templates are built from', () => {
+        componentsBlueprintManifest.dependencies.map(dependency => dependency.name).should.deep.equal(['Cratis.Blueprint.Default', 'Cratis.Components']);
+    });
+
+    it('should ship no layout of its own, because it reuses the default blueprint shell', () => {
+        componentsBlueprintManifest.layouts.should.be.empty;
+    });
+
+    it('should provide no layout either, so the manifest and the bundle agree about that', () => {
+        (componentsBlueprint.layouts ?? []).should.be.empty;
+    });
+
+    it('should ship no theme, because the shell it themes is not its own', () => {
+        componentsBlueprintManifest.themes.should.be.empty;
+    });
+
+    it('should declare a screen template for every one it provides', () => {
+        componentsBlueprintManifest.screenTemplates.should.deep.equal((componentsBlueprint.screenTemplates ?? []).map(template => template.name));
+    });
+
+    it('should declare a dialog template for every one it provides', () => {
+        componentsBlueprintManifest.dialogTemplates.should.deep.equal((componentsBlueprint.dialogTemplates ?? []).map(template => template.name));
+    });
+
+    it('should ship a gallery screen for every screen template', () => {
+        (componentsBlueprint.screens ?? []).map(screen => screen.name).should.deep.equal(componentsBlueprintManifest.screenTemplates);
+    });
+
+    it('should name the module a host imports it from', () => {
+        componentsBlueprintManifest.module!.should.equal('@cratis/scene.blueprint.components');
+    });
+});

package/for_componentsGalleryScreens/when_checking_the_layouts_and_slots_they_fill.ts

@@ -0,0 +1,56 @@
+// 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 { defaultBlueprint, shellComponentForLayout } from '@cratis/scene.blueprint.default';
+import { componentsBlueprint } from '../componentsBlueprint';
+import { componentsGalleryScreens } from '../gallery';
+
+/**
+ * A gallery screen names a layout this package does not provide, which is the whole point of the
+ * dependency: it fills the default blueprint's `AppShell`. So the layout every one of them has to be
+ * checked against is that blueprint's, and a slot filled under a name the shell never reads renders
+ * nothing at all and reports nothing either.
+ */
+describe('when checking the layouts and slots they fill', () => {
+    const layouts = defaultBlueprint.layouts ?? [];
+    const layoutsByName = new Map<string, Layout>(layouts.map(layout => [layout.name, layout]));
+    const templateNames = (componentsBlueprint.screenTemplates ?? []).map(template => template.name);
+
+    it('should have at least one screen to check', () => {
+        componentsGalleryScreens.should.not.be.empty;
+    });
+
+    for (const screen of componentsGalleryScreens) {
+        describe(`and the screen is '${screen.name}'`, () => {
+            const layout = layoutsByName.get(screen.layout);
+
+            it('should name a layout the blueprint it depends on provides', () => {
+                (layout !== undefined).should.be.true;
+            });
+
+            it('should fill only slots that layout declares', () => {
+                const declared = new Set((layout?.slots ?? []).map(slot => slot.name));
+                Object.keys(screen.slotContent)
+                    .filter(name => !declared.has(name))
+                    .should.be.empty;
+            });
+
+            it('should fill the content slot, which is the only one every layout declares', () => {
+                (screen.slotContent.content?.length ?? 0).should.be.greaterThan(0);
+            });
+
+            it('should name a screen template this blueprint provides', () => {
+                templateNames.should.contain(screen.screenTemplate);
+            });
+
+            it('should render in a shell the blueprint it depends on provides', () => {
+                (shellComponentForLayout(screen.layout) !== undefined).should.be.true;
+            });
+
+            it('should contribute its navigation, so the menu is the same on every screen', () => {
+                screen.contributions.should.not.be.empty;
+            });
+        });
+    }
+});

package/for_componentsScreenTemplates/when_checking_that_arrangements_reference_declared_slots.ts

@@ -0,0 +1,66 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Arrangement, FlowArrangement, FlowContainer, FlowNode, Slot } from '@cratis/scene.model';
+import { componentsDialogTemplates, componentsScreenTemplates } from '../templates';
+
+function slotNamesIn(node: FlowNode): string[] {
+    if ('slotName' in node) {
+        return [(node as { slotName: string }).slotName];
+    }
+
+    if ('children' in node) {
+        return (node as FlowContainer).children.flatMap(slotNamesIn);
+    }
+
+    return [];
+}
+
+function referencedSlots(arrangement: Arrangement | undefined): string[] {
+    const flow = arrangement as FlowArrangement | undefined;
+    if (!flow?.root) {
+        return [];
+    }
+
+    return [flow.root, ...(flow.overrides ?? []).map(override => override.root)].flatMap(slotNamesIn);
+}
+
+function undeclared(slots: Slot[], arrangement: Arrangement | undefined): string[] {
+    const declared = new Set(slots.map(slot => slot.name));
+    return [...new Set(referencedSlots(arrangement))].filter(name => !declared.has(name));
+}
+
+/**
+ * An arrangement leaf naming a slot the template never declared positions nothing, and reports nothing
+ * either - the region simply is not there. No type can express "one of whatever this particular container
+ * declared", so this is the check that stands in for one.
+ */
+describe('when checking that arrangements reference declared slots', () => {
+    for (const template of componentsScreenTemplates.filter(candidate => candidate.arrangement !== undefined)) {
+        it(`should reference only slots the '${template.name}' template declares`, () => {
+            undeclared(template.slots, template.arrangement).should.be.empty;
+        });
+    }
+
+    for (const template of componentsScreenTemplates) {
+        it(`should file '${template.name}' content only under slots it declares`, () => {
+            const declared = new Set(template.slots.map(slot => slot.name));
+            Object.keys(template.content ?? {}).filter(name => !declared.has(name)).should.be.empty;
+        });
+    }
+
+    for (const template of componentsDialogTemplates) {
+        it(`should file '${template.name}' dialog content only under slots it declares`, () => {
+            const declared = new Set(template.slots.map(slot => slot.name));
+            Object.keys(template.content ?? {}).filter(name => !declared.has(name)).should.be.empty;
+        });
+    }
+
+    it('should give every dialog template exactly one slot, since the composites own their own chrome', () => {
+        componentsDialogTemplates.filter(template => template.slots.length !== 1).should.be.empty;
+    });
+
+    it('should give no dialog template a fitsSlot, because an overlay occupies no slot', () => {
+        componentsDialogTemplates.filter(template => 'fitsSlot' in template).should.be.empty;
+    });
+});

package/for_componentsScreenTemplates/when_following_the_nesting_chain.ts

@@ -0,0 +1,83 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { isScreenTemplateResolutionValid, resolveScreenTemplates } from '@cratis/scene.engine';
+import { appShellLayout } from '@cratis/scene.blueprint.default';
+import { nestingChainTemplates } from '../templates';
+
+/**
+ * The three-level chain, put through the real resolver rather than checked by walking slot lists.
+ *
+ * "It composes recursively" is the kind of claim that is true in a design document and wrong in the code,
+ * and the way it goes wrong is specific: a chain that reuses one slot name at several levels reads
+ * perfectly and resolves to nothing, because the resolver refuses to guess which of two containers a
+ * template belongs to. Only running it proves the chain is really placeable.
+ */
+describe('when following the nesting chain', () => {
+    const resolution = resolveScreenTemplates(appShellLayout, nestingChainTemplates);
+    const placementOf = (name: string) => resolution.placements.find(placement => placement.template === name);
+
+    it('should be a valid resolution', () => {
+        isScreenTemplateResolutionValid(resolution).should.be.true;
+    });
+
+    it('should place all three levels', () => {
+        resolution.placements.should.have.lengthOf(3);
+    });
+
+    it('should leave nothing unplaced', () => {
+        resolution.unplaced.should.be.empty;
+    });
+
+    describe('and it is the module level', () => {
+        const placement = placementOf('DataModulePage')!;
+
+        it('should sit directly inside the application layout', () => {
+            placement.container.should.equal(appShellLayout.name);
+        });
+
+        it('should fill the content slot', () => {
+            placement.slot.should.equal('content');
+        });
+
+        it('should be one level below the layout', () => {
+            placement.depth.should.equal(1);
+        });
+    });
+
+    describe('and it is the feature level', () => {
+        const placement = placementOf('DataFeatureSection')!;
+
+        it('should sit inside the module template', () => {
+            placement.container.should.equal('DataModulePage');
+        });
+
+        it('should fill a slot the module template declares', () => {
+            placement.slot.should.equal('body');
+        });
+
+        it('should be two levels below the layout', () => {
+            placement.depth.should.equal(2);
+        });
+    });
+
+    describe('and it is the slice level', () => {
+        const placement = placementOf('CommandSliceSection')!;
+
+        it('should sit inside the feature template', () => {
+            placement.container.should.equal('DataFeatureSection');
+        });
+
+        it('should fill a slot the feature template declares', () => {
+            placement.slot.should.equal('primary');
+        });
+
+        it('should be three levels below the layout', () => {
+            placement.depth.should.equal(3);
+        });
+    });
+
+    it('should order the placements shallowest first, so a caller can build the tree top down', () => {
+        resolution.placements.map(placement => placement.depth).should.deep.equal([1, 2, 3]);
+    });
+});

package/for_componentsScreenTemplates/when_placing_them_in_the_default_blueprint_layout.ts

@@ -0,0 +1,51 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { resolveScreenTemplates } from '@cratis/scene.engine';
+import { appShellLayout, defaultBlueprint } from '@cratis/scene.blueprint.default';
+import { componentsPageTemplates } from '../templates';
+
+/**
+ * The page templates are resolved against the default blueprint's layout *and its templates*, because that
+ * is the situation an application is actually in: a profile that activates both blueprints has every one of
+ * those templates in scope, and a `fitsSlot` that became ambiguous once they were is a `fitsSlot` that
+ * works only in isolation.
+ *
+ * Only this package's templates are asserted on. The default blueprint's own nesting chain reuses `body` at
+ * three levels, so it is reported unplaced in this combined scope - which is `resolveScreenTemplates`
+ * behaving correctly, and not this package's result to claim or to fix.
+ */
+describe('when placing them in the default blueprint layout', () => {
+    const templates = [...(defaultBlueprint.screenTemplates ?? []), ...componentsPageTemplates];
+    const resolution = resolveScreenTemplates(appShellLayout, templates);
+    const ownNames = new Set(componentsPageTemplates.map(template => template.name));
+    const ownPlacements = resolution.placements.filter(placement => ownNames.has(placement.template));
+
+    it('should have templates to place', () => {
+        componentsPageTemplates.should.not.be.empty;
+    });
+
+    it('should place every one of them', () => {
+        ownPlacements.map(placement => placement.template).sort().should.deep.equal([...ownNames].sort());
+    });
+
+    it('should leave none of them unplaced, even with the other blueprint templates in scope', () => {
+        resolution.unplaced.filter(unplaced => ownNames.has(unplaced.template)).should.be.empty;
+    });
+
+    it('should place every one directly inside the layout rather than inside another template', () => {
+        ownPlacements.filter(placement => placement.container !== appShellLayout.name).should.be.empty;
+    });
+
+    it('should place every one at the first level below the layout', () => {
+        ownPlacements.filter(placement => placement.depth !== 1).should.be.empty;
+    });
+
+    it('should place every one in the content slot, which is the only region a layout offers a screen', () => {
+        ownPlacements.filter(placement => placement.slot !== 'content').should.be.empty;
+    });
+
+    it('should introduce no nesting cycle', () => {
+        resolution.cycles.should.deep.equal([]);
+    });
+});

package/for_componentsScreenTemplates/when_resolving_the_component_names_they_reference.ts

@@ -0,0 +1,72 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { resolveComponentName } from '@cratis/scene.engine';
+import { composeScreenElement, defaultBlueprintName, distinctComponentNames } from '@cratis/scene.blueprint.default';
+import { cratisComponentsPackageManifest } from '@cratis/scene.components';
+import { ComponentName } from '../ComponentName';
+import { CompositeName } from '../CompositeName';
+import { componentsBlueprintCatalog, componentsBlueprintProfile, componentsGalleryScreens } from '../gallery';
+import { componentsBlueprintName } from '../packageName';
+import { componentsDialogTemplates } from '../templates';
+
+/**
+ * Every name a template writes has to resolve against the profile, or it renders as a dashed red box in
+ * the middle of an otherwise fine page with nothing pointing back at the template that wrote it. The
+ * catalog is built from the real manifests of the packages this blueprint depends on, so a name renamed
+ * upstream fails here rather than in an application.
+ */
+describe('when resolving the component names they reference', () => {
+    const fromScreens = distinctComponentNames(componentsGalleryScreens.map(composeScreenElement));
+    const fromDialogs = distinctComponentNames(componentsDialogTemplates.flatMap(template => Object.values(template.content ?? {}).flat()));
+    const names = [...new Set([...fromScreens, ...fromDialogs])].sort();
+    const resolutions = names.map(name => ({ name, resolution: resolveComponentName(name, componentsBlueprintProfile, componentsBlueprintCatalog) }));
+
+    it('should reference something', () => {
+        names.should.not.be.empty;
+    });
+
+    it('should reference something from the dialog templates too', () => {
+        fromDialogs.should.not.be.empty;
+    });
+
+    it('should resolve every referenced name against the profile', () => {
+        resolutions
+            .filter(entry => entry.resolution === undefined)
+            .map(entry => entry.name)
+            .should.be.empty;
+    });
+
+    it('should resolve its own page header to itself', () => {
+        resolveComponentName(ComponentName.ArcPageHeader, componentsBlueprintProfile, componentsBlueprintCatalog)!.package.should.equal(componentsBlueprintName);
+    });
+
+    it('should reference every component it registers, so nothing is declared and then unused', () => {
+        const referenced = new Set(names);
+        Object.values(ComponentName)
+            .filter(name => !referenced.has(name))
+            .should.be.empty;
+    });
+
+    it('should resolve the shell components to the blueprint it layers on', () => {
+        resolveComponentName('appShell', componentsBlueprintProfile, componentsBlueprintCatalog)!.package.should.equal(defaultBlueprintName);
+    });
+
+    it('should resolve the Arc-bound composites to the component library', () => {
+        resolutions
+            .filter(entry => (Object.values(CompositeName) as string[]).includes(entry.name))
+            .filter(entry => entry.resolution?.package !== cratisComponentsPackageManifest.name)
+            .map(entry => entry.name)
+            .should.be.empty;
+    });
+
+    it('should resolve a name both libraries declare to the Arc-aware one, and record the other as shadowed', () => {
+        const dataTable = resolveComponentName(CompositeName.DataTable, componentsBlueprintProfile, componentsBlueprintCatalog)!;
+        dataTable.package.should.equal(cratisComponentsPackageManifest.name);
+        dataTable.shadows.should.contain('PrimeReact');
+    });
+
+    it('should resolve the borrowed column to PrimeReact, since neither library declares one', () => {
+        resolveComponentName('column', componentsBlueprintProfile, componentsBlueprintCatalog)!.package.should.equal('PrimeReact');
+    });
+});

package/for_deriveArcHeading/when_no_binding_is_named.ts

@@ -0,0 +1,42 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingKind } from '@cratis/scene.components';
+import { deriveArcHeading } from '../header';
+
+/**
+ * The third state, and the one that is easiest to conflate with the second. A template that names nothing
+ * is not broken - the schema editor page genuinely has no query behind it - so this reads as a statement
+ * rather than as a problem to fix.
+ */
+describe('when no binding is named', () => {
+    const heading = deriveArcHeading({ title: 'InvoiceRegistered' }, {}, BindingKind.Query);
+
+    it('should use the title the template gave it', () => {
+        heading.title.should.equal('InvoiceRegistered');
+    });
+
+    it('should build a trail of just the title when no section was given', () => {
+        heading.trail.should.deep.equal(['InvoiceRegistered']);
+    });
+
+    it('should report that it is not bound', () => {
+        heading.isBound.should.be.false;
+    });
+
+    it('should state the absence plainly rather than naming a binding nobody asked for', () => {
+        heading.bindingLabel.should.equal('No binding');
+    });
+
+    it('should carry no binding name', () => {
+        (heading.bindingName === undefined).should.be.true;
+    });
+
+    describe('and the template gave no title either', () => {
+        const untitled = deriveArcHeading({}, {}, BindingKind.Query);
+
+        it('should fall back to something readable rather than an empty heading', () => {
+            untitled.title.should.equal('Untitled page');
+        });
+    });
+});

package/for_deriveArcHeading/when_the_binding_is_not_registered.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingKind } from '@cratis/scene.components';
+import { deriveArcHeading } from '../header';
+
+describe('when the binding is not registered', () => {
+    const heading = deriveArcHeading({ section: 'Billing' }, { name: 'RecordAdjustment' }, BindingKind.Command);
+
+    it('should fall back to the binding name read as a sentence, so the page is legible before anyone writes a title', () => {
+        heading.title.should.equal('Record adjustment');
+    });
+
+    it('should build the trail from the derived title', () => {
+        heading.trail.should.deep.equal(['Billing', 'Record adjustment']);
+    });
+
+    it('should report that it is not bound', () => {
+        heading.isBound.should.be.false;
+    });
+
+    it('should say which name a host has to register, which is the only actionable part', () => {
+        heading.bindingLabel.should.equal('No command registered as RecordAdjustment');
+    });
+});