@cratis/scene.blueprint.default 0.1.0

package/for_AppShell/when_rendering_a_gallery_screen.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { render, screen } from '@testing-library/react';
+import { SceneElementView, coreComponents, corePackage, mergePackageRegistries } from '@cratis/scene.react';
+import { defaultBlueprint } from '../defaultBlueprint';
+import { composeScreenElement, galleryComponentCatalog, galleryPreviewProfile, galleryScreen, resolveElementComponentNames } from '../gallery';
+
+const registry = mergePackageRegistries([corePackage, defaultBlueprint]);
+
+function renderGalleryScreen(name: string) {
+    const galleryItem = galleryScreen(name)!;
+    const element = resolveElementComponentNames(composeScreenElement(galleryItem), galleryPreviewProfile, galleryComponentCatalog);
+    render(<SceneElementView element={element} registry={registry} resolveBinding={() => undefined} />);
+}
+
+function has(selector: string): boolean {
+    return document.querySelector(selector) !== null;
+}
+
+describe('when rendering a gallery screen', () => {
+    describe('and it is an application-shell screen', () => {
+        beforeEach(() => {
+            renderGalleryScreen('Dashboard');
+        });
+
+        it('should render the shell wrapper with the default static mode', () => {
+            document.querySelector('.layout-wrapper')!.className.should.contain('layout-static');
+        });
+
+        it('should render the topbar', () => {
+            has('.layout-topbar').should.equal(true);
+        });
+
+        it('should render the sidebar panel the mode CSS positions', () => {
+            has('.layout-sidebar').should.equal(true);
+        });
+
+        it('should render the navigation the screen contributed', () => {
+            screen.getAllByRole('link', { name: /Products/ }).length.should.be.greaterThan(0);
+        });
+
+        it('should render the seeded content rather than a placeholder', () => {
+            screen.getAllByText('Revenue').length.should.be.greaterThan(0);
+            screen.getAllByText('$284,120').length.should.be.greaterThan(0);
+        });
+
+        it('should register the core registry alongside the blueprint one', () => {
+            Object.keys(coreComponents)
+                .every(key => key in registry)
+                .should.equal(true);
+        });
+    });
+
+    describe('and it is a full-page screen', () => {
+        beforeEach(() => {
+            renderGalleryScreen('Login');
+        });
+
+        it('should render the chrome-less shell', () => {
+            has('.layout-full-page').should.equal(true);
+        });
+
+        it('should render the branding aside beside the form', () => {
+            has('.layout-full-page-aside').should.equal(true);
+        });
+
+        it('should not render an application topbar', () => {
+            has('.layout-topbar').should.equal(false);
+        });
+
+        it('should render the form the template seeded', () => {
+            screen.getAllByText('Sign in').length.should.be.greaterThan(0);
+        });
+    });
+});

package/for_LayoutConfigProvider/when_switching_mode_and_reloading.tsx

@@ -0,0 +1,77 @@
+// 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 { userEvent } from '@testing-library/user-event';
+import { ExternalComponent, HorizontalAlignment, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { LayoutConfigProvider, LayoutMode, layoutConfigStorageKey, readPersistedLayoutConfig, useLayoutConfig } from '../configuration';
+import { LayoutModeSwitcher } from '../shell';
+
+class FakeStorage {
+    entries = new Map<string, string>();
+    getItem(key: string): string | null {
+        return this.entries.has(key) ? this.entries.get(key)! : null;
+    }
+
+    setItem(key: string, value: string): void {
+        this.entries.set(key, value);
+    }
+}
+
+const switcherElement: ExternalComponent = {
+    id: 'mode-switcher',
+    name: 'mode-switcher',
+    properties: {},
+    visibility: Visibility.Visible,
+    isEnabled: true,
+    opacity: 1,
+    size: {},
+    zIndex: 0,
+    minimumSize: {},
+    maximumSize: {},
+    margin: { left: 0, top: 0, right: 0, bottom: 0 },
+    horizontalAlignment: HorizontalAlignment.Stretch,
+    verticalAlignment: VerticalAlignment.Stretch,
+    componentName: 'layoutModeSwitcher',
+    slots: {},
+};
+
+function CurrentMode() {
+    const { config, effectiveMode } = useLayoutConfig();
+    return <output data-testid='mode'>{`${config.mode}/${effectiveMode}`}</output>;
+}
+
+describe('when switching mode and reloading', () => {
+    let storage: FakeStorage;
+
+    beforeEach(async () => {
+        storage = new FakeStorage();
+        render(
+            <LayoutConfigProvider storage={storage as unknown as Storage}>
+                <LayoutModeSwitcher element={switcherElement} slots={{}} />
+                <CurrentMode />
+            </LayoutConfigProvider>,
+        );
+        await userEvent.click(screen.getByRole('button', { name: 'Drawer' }));
+    });
+
+    it('should apply the chosen mode immediately', () => {
+        screen.getByTestId('mode').textContent!.should.equal(`${LayoutMode.Drawer}/${LayoutMode.Drawer}`);
+    });
+
+    it('should mark the chosen mode as pressed', () => {
+        screen.getByRole('button', { name: 'Drawer' }).getAttribute('aria-pressed')!.should.equal('true');
+    });
+
+    it('should persist the choice under the storage key', () => {
+        storage.getItem(layoutConfigStorageKey)!.should.contain(LayoutMode.Drawer);
+    });
+
+    it('should come back with the same mode after a reload', () => {
+        readPersistedLayoutConfig(storage as unknown as Storage).mode.should.equal(LayoutMode.Drawer);
+    });
+
+    it('should not persist whether the sidebar happened to be open', () => {
+        storage.getItem(layoutConfigStorageKey)!.should.not.contain('isSidebarOpen');
+    });
+});

package/for_appShellLayout/when_evaluating_the_arrangement_at_each_size_class.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 { FlowArrangement, HeightSizeClass, WidthSizeClass } from '@cratis/scene.model';
+import { evaluateFlowArrangement } from '@cratis/scene.engine';
+import {
+    appShellArrangement,
+    appShellCompactHeightRoot,
+    appShellCompactRoot,
+    appShellCompactWidthRoot,
+    appShellLayout,
+    appShellRegularRoot,
+} from '../layouts';
+
+describe('when evaluating the arrangement at each size class', () => {
+    const arrangement = appShellLayout.arrangement as FlowArrangement;
+
+    const regular = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Regular, height: HeightSizeClass.Regular });
+    const compactWidth = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Compact, height: HeightSizeClass.Regular });
+    const compactHeight = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Regular, height: HeightSizeClass.Compact });
+    const compactBoth = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Compact, height: HeightSizeClass.Compact });
+
+    it('should use the full tree at a regular width and height', () => {
+        regular.should.equal(appShellRegularRoot);
+    });
+
+    it('should collapse the sidebar out of the flow at a compact width', () => {
+        compactWidth.should.equal(appShellCompactWidthRoot);
+    });
+
+    it('should drop the breadcrumb and footer at a compact height', () => {
+        compactHeight.should.equal(appShellCompactHeightRoot);
+    });
+
+    it('should prefer the override targeting both axes when both are compact', () => {
+        compactBoth.should.equal(appShellCompactRoot);
+    });
+
+    it('should be the layout declared on the blueprint', () => {
+        arrangement.should.equal(appShellArrangement);
+    });
+});

package/for_defaultBlueprint/when_validating_the_bundle.ts

@@ -0,0 +1,43 @@
+// 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 { defaultBlueprint, defaultBlueprintManifest } from '../defaultBlueprint';
+import { defaultBlueprintName } from '../packageName';
+
+describe('when validating the bundle', () => {
+    const problems = validatePackageBundle(defaultBlueprint);
+
+    it('should report no problems', () => {
+        problems.should.be.empty;
+    });
+
+    it('should declare itself a blueprint', () => {
+        defaultBlueprintManifest.kind.should.equal(PackageKind.Blueprint);
+    });
+
+    it('should be named as a blueprint package', () => {
+        defaultBlueprintManifest.name.should.equal(defaultBlueprintName);
+    });
+
+    it('should depend on the component libraries its shells are built from', () => {
+        defaultBlueprintManifest.dependencies.map(dependency => dependency.name).should.deep.equal(['PrimeReact', 'Cratis.Components']);
+    });
+
+    it('should declare only application shells as layouts', () => {
+        defaultBlueprintManifest.layouts.should.deep.equal(['AppShell', 'FullPage']);
+    });
+
+    it('should declare a screen template for every one it provides', () => {
+        defaultBlueprintManifest.screenTemplates.should.deep.equal((defaultBlueprint.screenTemplates ?? []).map(template => template.name));
+    });
+
+    it('should declare a dialog template for every one it provides', () => {
+        defaultBlueprintManifest.dialogTemplates.should.deep.equal((defaultBlueprint.dialogTemplates ?? []).map(template => template.name));
+    });
+
+    it('should ship a screen for every screen template', () => {
+        (defaultBlueprint.screens ?? []).map(screen => screen.name).should.deep.equal(defaultBlueprintManifest.screenTemplates);
+    });
+});

package/for_defaultBlueprintThemes/when_checking_attribution_and_tokens.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { incompatiblePackages } from '@cratis/scene.engine';
+import { themeTokenProperty } from '@cratis/scene.react';
+import { galleryProfile } from '../gallery';
+import { darkTheme, defaultBlueprintThemes, lightTheme } from '../themes';
+
+describe('when checking attribution and tokens', () => {
+    for (const theme of defaultBlueprintThemes) {
+        describe(`and the theme is '${theme.name}'`, () => {
+            it('should say who made it', () => {
+                (theme.author ?? '').should.not.be.empty;
+            });
+
+            it('should link to them', () => {
+                (theme.authorUrl ?? '').should.not.be.empty;
+            });
+
+            it('should state the license it is used under', () => {
+                (theme.license ?? '').should.not.be.empty;
+            });
+
+            it('should be compatible with every package the gallery profile activates', () => {
+                incompatiblePackages(theme, galleryProfile).should.be.empty;
+            });
+
+            it('should declare compatibility with core, which gets no implicit exemption', () => {
+                theme.compatibleWith.should.contain('core');
+            });
+        });
+    }
+
+    it('should define exactly the same token names in both themes', () => {
+        Object.keys(lightTheme.tokens ?? {})
+            .sort()
+            .should.deep.equal(Object.keys(darkTheme.tokens ?? {}).sort());
+    });
+
+    it('should ship one light and one dark theme', () => {
+        defaultBlueprintThemes.filter(theme => theme.isDark === true).should.have.lengthOf(1);
+        defaultBlueprintThemes.filter(theme => theme.isDark !== true).should.have.lengthOf(1);
+    });
+
+    it('should name tokens that become the custom properties the stylesheet reads', () => {
+        themeTokenProperty('primary.contrastColor').should.equal('--scene-primary-contrast-color');
+        themeTokenProperty('text.mutedColor').should.equal('--scene-text-muted-color');
+        themeTokenProperty('content.borderRadius').should.equal('--scene-content-border-radius');
+    });
+});

package/for_fullPageLayout/when_evaluating_the_arrangement_at_each_size_class.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FlowArrangement, FlowContainer, FlowSlotLeaf, HeightSizeClass, WidthSizeClass } from '@cratis/scene.model';
+import { evaluateFlowArrangement } from '@cratis/scene.engine';
+import { SlotName, fullPageCompactWidthRoot, fullPageLayout, fullPageRegularRoot } from '../layouts';
+
+describe('when evaluating the arrangement at each size class', () => {
+    const arrangement = fullPageLayout.arrangement as FlowArrangement;
+
+    const regular = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Regular, height: HeightSizeClass.Regular });
+    const compactWidth = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Compact, height: HeightSizeClass.Regular });
+    const compactHeight = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Regular, height: HeightSizeClass.Compact });
+    const compactBoth = evaluateFlowArrangement(arrangement, { width: WidthSizeClass.Compact, height: HeightSizeClass.Compact });
+
+    it('should use the split tree at a regular width', () => {
+        regular.should.equal(fullPageRegularRoot);
+    });
+
+    it('should keep the split tree at a compact height, which the width override does not target', () => {
+        compactHeight.should.equal(fullPageRegularRoot);
+    });
+
+    it('should drop the branding aside at a compact width', () => {
+        compactWidth.should.equal(fullPageCompactWidthRoot);
+    });
+
+    it('should drop the branding aside whenever the width is compact, whatever the height is', () => {
+        compactBoth.should.equal(fullPageCompactWidthRoot);
+    });
+
+    it('should leave the compact-width tree with no reference to the aside slot', () => {
+        const leaves = (fullPageCompactWidthRoot as FlowContainer).children as FlowSlotLeaf[];
+        leaves.map(leaf => leaf.slotName).should.not.contain(SlotName.Aside);
+    });
+});

package/for_galleryScreenTemplates/when_checking_that_arrangements_reference_declared_slots.ts

@@ -0,0 +1,53 @@
+// 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 { defaultBlueprint } from '../defaultBlueprint';
+import { galleryScreenTemplates } from '../gallery';
+
+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));
+}
+
+describe('when checking that arrangements reference declared slots', () => {
+    for (const layout of defaultBlueprint.layouts ?? []) {
+        it(`should reference only slots the '${layout.name}' layout declares`, () => {
+            undeclared(layout.slots, layout.arrangement).should.be.empty;
+        });
+    }
+
+    for (const template of galleryScreenTemplates.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 galleryScreenTemplates) {
+        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;
+        });
+    }
+});

package/for_galleryScreenTemplates/when_following_the_nesting_chain.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 { Slot } from '@cratis/scene.model';
+import { appShellLayout, fullPageLayout } from '../layouts';
+import { featureSectionTemplate, galleryScreenTemplates, moduleWorkspaceTemplate, sliceSectionTemplate } from '../gallery';
+
+function declares(slots: Slot[], name: string | undefined): boolean {
+    return name !== undefined && slots.some(slot => slot.name === name);
+}
+
+describe('when following the nesting chain', () => {
+    it('should fit the module template into a slot the application layout declares', () => {
+        declares(appShellLayout.slots, moduleWorkspaceTemplate.fitsSlot).should.be.true;
+    });
+
+    it('should fit the feature template into a slot the module template declares', () => {
+        declares(moduleWorkspaceTemplate.slots, featureSectionTemplate.fitsSlot).should.be.true;
+    });
+
+    it('should fit the slice template into a slot the feature template declares', () => {
+        declares(featureSectionTemplate.slots, sliceSectionTemplate.fitsSlot).should.be.true;
+    });
+
+    it('should resolve each level against its direct parent rather than globally', () => {
+        featureSectionTemplate.fitsSlot!.should.equal(sliceSectionTemplate.fitsSlot!);
+    });
+
+    it('should fit every other template into a slot one of the layouts declares', () => {
+        const layoutSlots = [...appShellLayout.slots, ...fullPageLayout.slots];
+        const templateSlots = galleryScreenTemplates.flatMap(template => template.slots);
+        galleryScreenTemplates
+            .filter(template => !declares(layoutSlots, template.fitsSlot) && !declares(templateSlots, template.fitsSlot))
+            .map(template => template.name)
+            .should.be.empty;
+    });
+
+    it('should give every screen template a slot to fit into', () => {
+        galleryScreenTemplates.filter(template => template.fitsSlot === undefined).map(template => template.name).should.be.empty;
+    });
+});

package/for_galleryScreens/when_checking_the_layouts_and_slots_they_fill.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.
+
+import { Layout } from '@cratis/scene.model';
+import { defaultBlueprint } from '../defaultBlueprint';
+import { galleryScreens } from '../gallery';
+import { shellComponentForLayout } from '../layouts';
+
+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]));
+
+    it('should have at least one screen to check', () => {
+        galleryScreens.should.not.be.empty;
+    });
+
+    for (const screen of galleryScreens) {
+        describe(`and the screen is '${screen.name}'`, () => {
+            const layout = layoutsByName.get(screen.layout);
+
+            it('should name a layout this blueprint provides', () => {
+                (layout !== undefined).should.be.true;
+            });
+
+            it('should fill only slots the layout declares', () => {
+                const declared = new Set((layout?.slots ?? []).map(slot => slot.name));
+                const filled = Object.keys(screen.slotContent);
+                filled.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', () => {
+                (defaultBlueprint.screenTemplates ?? []).map(template => template.name).should.contain(screen.screenTemplate);
+            });
+
+            it('should render in a shell this blueprint provides', () => {
+                (shellComponentForLayout(screen.layout) !== undefined).should.be.true;
+            });
+        });
+    }
+});

package/for_galleryScreens/when_resolving_the_component_names_they_reference.ts

@@ -0,0 +1,60 @@
+// 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 { ComponentName } from '../ComponentName';
+import {
+    composeScreenElement,
+    distinctComponentNames,
+    galleryComponentCatalog,
+    galleryDialogTemplates,
+    galleryProfile,
+    galleryScreens,
+} from '../gallery';
+import { defaultBlueprintName } from '../packageName';
+
+describe('when resolving the component names they reference', () => {
+    const fromScreens = distinctComponentNames(galleryScreens.map(composeScreenElement));
+    const fromDialogs = distinctComponentNames(galleryDialogTemplates.flatMap(template => Object.values(template.content ?? {}).flat()));
+    const names = [...new Set([...fromScreens, ...fromDialogs])].sort();
+    const resolutions = names.map(name => ({ name, resolution: resolveComponentName(name, galleryProfile, galleryComponentCatalog) }));
+    const blueprintNames = new Set<string>(Object.values(ComponentName));
+
+    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 this blueprint own names to this blueprint', () => {
+        resolutions
+            .filter(entry => blueprintNames.has(entry.name))
+            .filter(entry => entry.resolution?.package !== defaultBlueprintName)
+            .map(entry => entry.name)
+            .should.be.empty;
+    });
+
+    it('should shadow the component libraries for the names this blueprint also declares', () => {
+        const menu = resolveComponentName(ComponentName.Menu, galleryProfile, galleryComponentCatalog);
+        menu!.package.should.equal(defaultBlueprintName);
+        menu!.shadows.should.contain('PrimeReact');
+    });
+
+    it('should reference every shell component the blueprint registers except the ones a host places itself', () => {
+        const referenced = new Set(names);
+        const placedByAHostRatherThanATemplate = [ComponentName.Mask, ComponentName.ThemeSwitcher, ComponentName.LayoutModeSwitcher, ComponentName.RightPanel];
+        Object.values(ComponentName)
+            .filter(name => !placedByAHostRatherThanATemplate.includes(name))
+            .filter(name => !referenced.has(name))
+            .should.be.empty;
+    });
+});

package/for_layoutConfigStorage/when_restoring_a_persisted_configuration.ts

@@ -0,0 +1,76 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ColorScheme, LayoutMode, MenuTheme, defaultLayoutConfigState, layoutConfigStorageKey, persistLayoutConfig, readPersistedLayoutConfig, withMobile, withMode, withSidebarAnchored } from '../configuration';
+
+class FakeStorage {
+    entries = new Map<string, string>();
+    getItem(key: string): string | null {
+        return this.entries.has(key) ? this.entries.get(key)! : null;
+    }
+
+    setItem(key: string, value: string): void {
+        this.entries.set(key, value);
+    }
+}
+
+function storageWith(raw: string): Storage {
+    const storage = new FakeStorage();
+    storage.setItem(layoutConfigStorageKey, raw);
+    return storage as unknown as Storage;
+}
+
+describe('when restoring a persisted configuration', () => {
+    it('should fall back to the defaults when nothing was persisted', () => {
+        readPersistedLayoutConfig(new FakeStorage() as unknown as Storage).should.deep.equal(defaultLayoutConfigState());
+    });
+
+    it('should fall back to the defaults when there is no storage at all', () => {
+        readPersistedLayoutConfig(undefined).should.deep.equal(defaultLayoutConfigState());
+    });
+
+    it('should round-trip the preferences that are worth keeping', () => {
+        const storage = new FakeStorage() as unknown as Storage;
+        const chosen = withSidebarAnchored(withMode(defaultLayoutConfigState(), LayoutMode.Drawer), true);
+        persistLayoutConfig(chosen, storage);
+
+        const restored = readPersistedLayoutConfig(storage);
+        restored.mode.should.equal(LayoutMode.Drawer);
+        restored.isSidebarAnchored.should.be.true;
+    });
+
+    it('should not restore the transient state', () => {
+        const storage = new FakeStorage() as unknown as Storage;
+        persistLayoutConfig(withMobile(defaultLayoutConfigState(), true), storage);
+        readPersistedLayoutConfig(storage).isMobile.should.be.false;
+    });
+
+    it('should ignore an unrecognized mode rather than putting a class no rule matches on the wrapper', () => {
+        readPersistedLayoutConfig(storageWith('{"mode":"kaleidoscope"}')).mode.should.equal(defaultLayoutConfigState().mode);
+    });
+
+    it('should ignore an unrecognized menu theme and color scheme', () => {
+        const restored = readPersistedLayoutConfig(storageWith('{"menuTheme":"neon","colorScheme":"sepia"}'));
+        restored.menuTheme.should.equal(MenuTheme.Light);
+        restored.colorScheme.should.equal(ColorScheme.Light);
+    });
+
+    it('should survive malformed json', () => {
+        readPersistedLayoutConfig(storageWith('{ not json')).should.deep.equal(defaultLayoutConfigState());
+    });
+
+    it('should survive json that is not an object', () => {
+        readPersistedLayoutConfig(storageWith('[1,2,3]')).should.deep.equal(defaultLayoutConfigState());
+    });
+
+    it('should not throw when storage refuses to write', () => {
+        const refusing = {
+            getItem: () => null,
+            setItem: () => {
+                throw new Error('QuotaExceededError');
+            },
+        } as unknown as Storage;
+
+        (() => persistLayoutConfig(defaultLayoutConfigState(), refusing)).should.not.throw();
+    });
+});

package/for_layoutConfigTransitions/when_anchoring_a_reveal_sidebar.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.
+
+import {
+    LayoutMode,
+    defaultLayoutConfigState,
+    isPointerRevealMode,
+    toggleSidebarAnchor,
+    withMode,
+    withSidebarRevealed,
+} from '../configuration';
+
+describe('when anchoring a reveal sidebar', () => {
+    const reveal = withMode(defaultLayoutConfigState(), LayoutMode.Reveal);
+    const anchored = toggleSidebarAnchor(reveal);
+
+    it('should recognize reveal and drawer as the pointer-driven modes', () => {
+        isPointerRevealMode(LayoutMode.Reveal).should.be.true;
+        isPointerRevealMode(LayoutMode.Drawer).should.be.true;
+        isPointerRevealMode(LayoutMode.Static).should.be.false;
+    });
+
+    it('should hold the sidebar out as soon as it is anchored', () => {
+        anchored.isSidebarRevealed.should.be.true;
+    });
+
+    it('should ignore the pointer while anchored', () => {
+        withSidebarRevealed(anchored, false).should.equal(anchored);
+    });
+
+    it('should let the pointer take over again once unanchored', () => {
+        const unanchored = toggleSidebarAnchor(anchored);
+        unanchored.isSidebarAnchored.should.be.false;
+        withSidebarRevealed(unanchored, true).isSidebarRevealed.should.be.true;
+    });
+
+    it('should keep the pin across a mode change, since it is a preference rather than transient state', () => {
+        withMode(anchored, LayoutMode.Drawer).isSidebarAnchored.should.be.true;
+    });
+
+    it('should drop a pointer-held reveal when the mode changes', () => {
+        withMode(withSidebarRevealed(reveal, true), LayoutMode.Static).isSidebarRevealed.should.be.false;
+    });
+});