@cratis/scene.blueprint.default 4.33.0 → 4.35.0

package/index.ts

@@ -12,3 +12,4 @@ export * from './themes';
 export * from './defaultBlueprintComponents';
 export * from './defaultBlueprint';
 export * from './templateProvenance';
+export * from './preview-host';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.33.0",
+    "version": "4.35.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.",
     "keywords": [
         "cratis",
@@ -55,15 +55,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.33.0",
-        "@cratis/scene.model": "4.33.0",
-        "@cratis/scene.react": "4.33.0"
+        "@cratis/scene.engine": "4.35.0",
+        "@cratis/scene.model": "4.35.0",
+        "@cratis/scene.react": "4.35.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.33.0",
-        "@cratis/scene.model": "4.33.0",
-        "@cratis/scene.primereact": "4.33.0",
-        "@cratis/scene.react": "4.33.0",
+        "@cratis/scene.engine": "4.35.0",
+        "@cratis/scene.model": "4.35.0",
+        "@cratis/scene.primereact": "4.35.0",
+        "@cratis/scene.react": "4.35.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primeuix/themes": "^3.0.1",

package/preview-host/ApplicationDocument.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { SceneDocument, Theme, UiProfile } from '@cratis/scene.model';
+
+/**
+ * What an application is made of: the document a designer edits - layouts, templates, screens, and what a template exposes and
+ * each instance contributes - and the profile and theme the application renders with. Stage assembles it from a Screenplay
+ * model, Studio from the model in memory (unsaved edits included); the composition and the hosts take nothing else.
+ */
+export type ApplicationDocument =
+    & Pick<SceneDocument, 'layouts' | 'screenTemplates' | 'screens'>
+    & Partial<Pick<SceneDocument, 'dialogTemplates' | 'exposures' | 'instanceContributions'>>
+    & {
+        /** The profiles the application declares; the first for the web is the one rendered with. */
+        uiProfiles?: UiProfile[];
+
+        themes?: Theme[];
+    };
+
+/** The document with everything a template chain needs filled in. */
+export function completeDocument(application: ApplicationDocument): SceneDocument {
+    return {
+        layouts: application.layouts,
+        screenTemplates: application.screenTemplates,
+        dialogTemplates: application.dialogTemplates ?? [],
+        screens: application.screens,
+        exposures: application.exposures ?? [],
+        instanceContributions: application.instanceContributions ?? [],
+    };
+}

package/preview-host/ApplicationHost.tsx

@@ -0,0 +1,155 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode, useMemo, useState } from 'react';
+import { DialogTemplate, SceneElement, type EffectiveConfiguration } from '@cratis/scene.model';
+import { BindingResolver, BindingScope } from '@cratis/scene.engine';
+import {
+    ComponentRegistry, SceneElementView, SceneHistory, SceneNavigationContextValue, SceneNavigationModel, SceneNavigationModelProvider,
+    SceneNavigationProvider, SceneOutletContext, SliceDialogView, collectOutletOwners, createMemorySceneHistory, navigationDestinations,
+    sceneRoutesFrom, sliceDialogParameters, useSceneHistoryNavigation,
+} from '@cratis/scene.react';
+import { LayoutConfigProvider } from '../configuration';
+import { ApplicationDocument } from './ApplicationDocument';
+import { previewComponents } from './PreviewTemplate';
+import { CompositionOptions, collectDestinations, composeApplicationScreen, composeDialog, composeOutletScreen } from './composeApplication';
+
+export interface ApplicationHostProps {
+    /** The document the application is composed from. */
+    application: ApplicationDocument;
+
+    /** What the host decides about composition; Stage and the preview host differ only here. */
+    composition?: CompositionOptions;
+
+    /** The structure and navigation the shell's regions show and the items' destinations resolve against. */
+    navigationModel: SceneNavigationModel;
+
+    registry: ComponentRegistry;
+
+    /** The screen shown first. */
+    initialScreen: string;
+
+    /** Where entries are recorded: the address bar for Stage, an in-memory history for a preview, which never touches the host's URL (PRV4). */
+    history?: SceneHistory;
+
+    /** What the screens' bindings resolve against. */
+    resolveBinding?: BindingResolver;
+    queryResults?: Record<string, unknown>;
+
+    /**
+     * Draws the composed screen. The default renders it with `SceneElementView`; Stage wraps it with its data and command scope.
+     * @param element The composed screen.
+     * @param configuration What the screen's templates were configured with.
+     * @param navigation Where the user is.
+     */
+    renderScreen?(element: SceneElement, configuration: EffectiveConfiguration | undefined, navigation: SceneNavigationContextValue): ReactNode;
+
+    /**
+     * Draws what the open dialog shows when the document has no dialog template of that name - a toolbar slice button's task
+     * dialog by default.
+     */
+    renderDialog?(navigation: SceneNavigationContextValue): ReactNode;
+
+    /**
+     * Draws a dialog the document declares, in place of the host's plain one - a host that wants its own backdrop, a close button
+     * and keyboard handling around the template's content. Called inside {@link scope}.
+     * @param template The dialog template that is open.
+     * @param content The template's composed content.
+     * @param navigation Where the user is.
+     */
+    renderDialogTemplate?(template: DialogTemplate, content: SceneElement, navigation: SceneNavigationContextValue): ReactNode;
+
+    /**
+     * What a host provides around everything that renders - the screen on the page and the dialog over it: its data, its command
+     * dispatcher, its chrome state. Inside the navigation providers, so it can read where the user is. Stage puts its data and
+     * interaction scope here, so the screen, a dialog template and a slice dialog all share them.
+     * @param navigation Where the user is.
+     * @param children The screen and the dialog.
+     */
+    scope?(navigation: SceneNavigationContextValue, children: ReactNode): ReactNode;
+
+    /**
+     * Where the shell keeps its layout configuration - the sidebar's state, the chosen theme. A preview keeps none (null, the default);
+     * a running application passes its storage so what a user chose is still chosen on the next visit.
+     */
+    layoutConfigStorage?: Storage | null;
+
+    /** Rendered inside the host's providers, after the application. */
+    children?: ReactNode;
+}
+
+/**
+ * The application as both Stage and the preview host run it: the shell composed for the screen on the page
+ * (`composeApplicationScreen`), nested outlets holding the screens placed in them, the navigation model in scope for the shell's
+ * topbar and sidebar regions, every destination the document and the navigation lead to routed, and the dialog a toolbar slice
+ * button or a dialog destination opened shown over it - one place for all of it (spec PRV9), so a behaviour that differs between
+ * the two hosts is a bug in the host, not a second implementation.
+ */
+export function ApplicationHost({ application, composition = {}, navigationModel, registry: hostRegistry, initialScreen, history, resolveBinding, queryResults, renderScreen, renderDialog, renderDialogTemplate, scope, layoutConfigStorage = null, children }: ApplicationHostProps) {
+    const [memoryHistory] = useState(() => createMemorySceneHistory());
+    const registry = useMemo(() => ({ ...previewComponents, ...hostRegistry }), [hostRegistry]);
+    const hostHistory = history ?? memoryHistory;
+    const screens = application.screens;
+
+    const outletScreens = useMemo(
+        () => Object.fromEntries(screens.map(candidate => [candidate.name, composeOutletScreen(application, candidate, composition)])),
+        [application, composition, screens]);
+    const owners = useMemo(() => collectOutletOwners(outletScreens), [outletScreens]);
+    const destinations = useMemo(
+        () => [...collectDestinations(application), ...navigationDestinations(navigationModel.structure, navigationModel.navigation, navigationModel.screenFor)],
+        [application, navigationModel]);
+    const routes = useMemo(() => sceneRoutesFrom(screens.map(candidate => candidate.name), destinations), [destinations, screens]);
+    const bindingScope = useMemo<BindingScope>(() => ({ queryResults }), [queryResults]);
+    const navigation = useSceneHistoryNavigation(hostHistory, routes, initialScreen, bindingScope, owners, destinations);
+
+    const screen = screens.find(candidate => candidate.name === navigation.primaryScreen) ?? screens.find(candidate => candidate.name === initialScreen) ?? screens[0];
+    const composed = useMemo(() => screen ? composeApplicationScreen(application, screen, composition) : undefined, [application, composition, screen]);
+    const outletContext = useMemo(() => ({ screens: outletScreens, registry }), [outletScreens, registry]);
+
+    const dialogTemplate = navigation.currentDialog ? application.dialogTemplates?.find(candidate => candidate.name === navigation.currentDialog) : undefined;
+    const sliceDialog = !dialogTemplate && navigation.currentDialog && sliceDialogParameters(navigation.currentDialogParameters) !== undefined;
+    const dialogName = sliceDialogParameters(navigation.currentDialogParameters)?.title ?? navigation.currentDialog;
+
+    const dialogContent = dialogTemplate ? composeDialog(application, dialogTemplate, composition) : undefined;
+
+    const body = (
+        <>
+            <div data-scene-outlet='primary' data-scene-url={navigation.currentUrl} data-scene-screen={navigation.primaryScreen}>
+                {composed && <Drawn>{renderScreen
+                    ? () => renderScreen(composed.element, composed.configuration, navigation)
+                    : () => <SceneElementView element={composed.element} registry={registry} resolveBinding={resolveBinding} queryResults={queryResults} configuration={composed.configuration} />}</Drawn>}
+            </div>
+            {dialogTemplate && dialogContent && (renderDialogTemplate
+                ? <Drawn>{() => renderDialogTemplate(dialogTemplate, dialogContent, navigation)}</Drawn>
+                : (
+                    <div role='dialog' aria-modal='true' aria-label={dialogName} data-scene-dialog={navigation.currentDialog}>
+                        <SceneElementView element={dialogContent} registry={registry} resolveBinding={resolveBinding} queryResults={queryResults} />
+                    </div>
+                ))}
+            {sliceDialog && (
+                <div role='dialog' aria-modal='true' aria-label={dialogName} data-scene-dialog={navigation.currentDialog}>
+                    {renderDialog?.(navigation) ?? <SliceDialogView />}
+                </div>
+            )}
+        </>
+    );
+
+    return (
+        <SceneNavigationProvider value={navigation}>
+            <SceneOutletContext.Provider value={outletContext}>
+                <SceneNavigationModelProvider model={navigationModel}>
+                    {/* The shell reads its layout configuration from a provider; nothing is saved unless the host gives it somewhere to. */}
+                    <LayoutConfigProvider storage={layoutConfigStorage}>
+                        {scope ? scope(navigation, body) : body}
+                        {children}
+                    </LayoutConfigProvider>
+                </SceneNavigationModelProvider>
+            </SceneOutletContext.Provider>
+        </SceneNavigationProvider>
+    );
+}
+
+/** Calls what a host draws as part of this component, so a hook it uses runs under the providers the host put in scope. */
+function Drawn({ children }: { children(): ReactNode }) {
+    return <>{children()}</>;
+}

package/preview-host/FlowArrangementView.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CSSProperties, ReactNode } from 'react';
+import { FlowContainerKind, type FlowNode } from '@cratis/scene.model';
+import { isFlowContainer, isFlowGrid, isFlowSlotLeaf } from '@cratis/scene.engine';
+
+/**
+ * Renders a {@link FlowNode} tree - the same one `evaluateFlowArrangement` picks for the current size
+ * class - by walking it into nested flex/grid containers and dropping each named slot's real content into
+ * its {@link FlowSlotLeaf}. This is what turns a modeled `arrangement flow` (a layout's topbar/sidebar/
+ * content/footer, or a screen template's header/body/aside) into something that actually looks like more
+ * than one column, rather than every slot's content stacked flat regardless of what the document said.
+ *
+ * A fixed `width`/`height` on a slot is a known, documented gap in the arrangement it is fed (see
+ * the Screenplay converter) - only `grow` and `span` survive conversion. A slot that does not grow
+ * therefore sizes to its own content here, which is a reasonable rendering of "not growing" even though
+ * the exact pixel the author wrote is not carried this far yet.
+ */
+export function FlowArrangementView({ node, slots }: { node: FlowNode; slots: Record<string, ReactNode> }) {
+    if (isFlowSlotLeaf(node)) {
+        return <>{slots[node.slotName] ?? null}</>;
+    }
+
+    if (isFlowGrid(node)) {
+        const style: CSSProperties = {
+            gap: `${node.gap}px`,
+            gridTemplateColumns: node.columns ? `repeat(${node.columns}, 1fr)` : undefined,
+            gridTemplateRows: node.rows ? `repeat(${node.rows}, 1fr)` : undefined,
+        };
+        return (
+            <div className='flow-container flow-container--grid' style={style}>
+                {node.children.map((child, index) => <FlowChild key={index} node={child} slots={slots} />)}
+            </div>
+        );
+    }
+
+    if (isFlowContainer(node)) {
+        const direction = node.kind === FlowContainerKind.Row ? 'row' : 'column';
+        return (
+            <div className={`flow-container flow-container--${direction}`} style={{ gap: `${node.gap}px` }}>
+                {node.children.map((child, index) => <FlowChild key={index} node={child} slots={slots} />)}
+            </div>
+        );
+    }
+
+    return null;
+}
+
+function FlowChild({ node, slots }: { node: FlowNode; slots: Record<string, ReactNode> }) {
+    const style: CSSProperties = node.grow
+        ? { flex: `${node.grow} 1 0%`, minWidth: 0, minHeight: 0 }
+        : { flex: '0 0 auto' };
+    return (
+        <div className='flow-child' style={style}>
+            <FlowArrangementView node={node} slots={slots} />
+        </div>
+    );
+}

package/preview-host/PreviewProblem.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Why a preview could not be rendered, or rendered with a caveat. */
+export enum PreviewProblemCode {
+    /** The module, feature or slice the preview was asked for is not in the application structure. */
+    TargetNotFound = 'targetNotFound',
+
+    /** The module has no feature to show. */
+    ModuleWithoutFeatures = 'moduleWithoutFeatures',
+
+    /** The feature the preview shows has no screen in the document. */
+    ScreenMissing = 'screenMissing',
+
+    /** The slice is neither a State Change nor a State View, so there is nothing to preview. */
+    SliceNotPreviewable = 'sliceNotPreviewable',
+
+    /** A State View slice's data fragment was not found, so its feature's page is shown. */
+    SliceFragmentMissing = 'sliceFragmentMissing',
+
+    /** The layout a screen names is neither in the document nor one the blueprint provides. */
+    LayoutMissing = 'layoutMissing',
+
+    /** The screen template a screen names is neither in the document nor one the blueprint provides. */
+    TemplateMissing = 'templateMissing',
+
+    /** A template found no single home in the layout, or nests inside itself. */
+    TemplateUnplaced = 'templateUnplaced',
+
+    /** The application structure has a duplicate or ambiguous id. */
+    StructureInvalid = 'structureInvalid',
+
+    /** A navigation item leads nowhere or collides with another (the engine's navigation diagnostics). */
+    NavigationInvalid = 'navigationInvalid',
+
+    /** A toolbar button's slice does not exist, is not a State Change or is empty (the engine's toolbar diagnostics). */
+    ToolbarInvalid = 'toolbarInvalid',
+
+    /** The profile's sample data selection names a pack or set that does not exist. */
+    SampleDataInvalid = 'sampleDataInvalid',
+}
+
+/** How a problem affects the preview. */
+export enum PreviewProblemSeverity {
+    /** The preview cannot show what was asked for; the problems are shown instead of a blank screen. */
+    Error = 'error',
+
+    /** The preview renders, but something in the model will not behave as authored. */
+    Warning = 'warning',
+}
+
+/**
+ * One problem the preview found (PRV8): what it is, where, and a sentence an author can act on. The node id is what a host
+ * links to - a screen, a template, a navigation item, a toolbar button, a module, feature or slice.
+ */
+export interface PreviewProblem {
+    code: PreviewProblemCode;
+    severity: PreviewProblemSeverity;
+    message: string;
+
+    /** The model node the problem is about, when it has one. */
+    nodeId?: string;
+}
+
+/** Whether any of the problems stops the preview from rendering. */
+export function hasBlockingProblem(problems: PreviewProblem[]): boolean {
+    return problems.some(problem => problem.severity === PreviewProblemSeverity.Error);
+}

package/preview-host/PreviewProblemsView.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PreviewProblem } from './PreviewProblem';
+
+export interface PreviewProblemsViewProps {
+    problems: PreviewProblem[];
+
+    /** Called when the author follows a problem to the node it is about. */
+    onSelectProblem?(problem: PreviewProblem): void;
+}
+
+/**
+ * What a preview shows instead of a blank screen when the model has errors that would break rendering (PRV8): each problem
+ * with its code, its message and a link to the offending node.
+ */
+export function PreviewProblemsView({ problems, onSelectProblem }: PreviewProblemsViewProps) {
+    return (
+        <section className='scene-preview-problems' role='alert' data-scene-preview-problems>
+            <h2>This preview cannot be shown</h2>
+            <ul>
+                {problems.map((problem, index) => (
+                    <li key={`${problem.code}-${problem.nodeId ?? index}-${index}`} data-severity={problem.severity} data-code={problem.code} data-node-id={problem.nodeId}>
+                        <code>{problem.code}</code> {problem.message}
+                        {problem.nodeId !== undefined && onSelectProblem && <> <button type='button' onClick={() => onSelectProblem(problem)}>Show {problem.nodeId}</button></>}
+                    </li>
+                ))}
+            </ul>
+        </section>
+    );
+}

package/preview-host/PreviewSliceFragment.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 { ExternalComponent, SceneElement, Screen, SliceNode } from '@cratis/scene.model';
+
+function matches(element: ExternalComponent, names: Set<string>): boolean {
+    const properties = element.properties as Record<string, unknown> | undefined;
+    return ['query', 'readModel', 'slice'].some(key => {
+        const value = properties?.[key];
+        return typeof value === 'string' && (names.has(value) || names.has(value.slice(value.lastIndexOf('.') + 1)));
+    });
+}
+
+function childrenOf(element: SceneElement): SceneElement[] {
+    const node = element as { slots?: Record<string, SceneElement[]>; children?: SceneElement[]; content?: SceneElement; itemTemplate?: SceneElement };
+    return [
+        ...Object.values(node.slots ?? {}).flat(),
+        ...(Array.isArray(node.children) ? node.children : []),
+        ...(node.content ? [node.content] : []),
+        ...(node.itemTemplate ? [node.itemTemplate] : []),
+    ];
+}
+
+/**
+ * The data fragment of a State View slice (PRV3): the outermost components of the slice's screen bound to the slice's read model
+ * or query - by the slice's qualified id, its id, its name or its command - each with everything inside it. Empty when the screen
+ * has nothing bound to it.
+ */
+export function findSliceFragment(screen: Screen, sliceId: string, slice: SliceNode): SceneElement[] {
+    const names = new Set([sliceId, slice.id, slice.name, ...(slice.command ? [slice.command] : [])]);
+    const found: SceneElement[] = [];
+    const visit = (element: SceneElement) => {
+        if ((element as ExternalComponent).componentName !== undefined && matches(element as ExternalComponent, names)) {
+            found.push(element);
+            return;
+        }
+
+        childrenOf(element).forEach(visit);
+    };
+
+    Object.values(screen.slotContent).flat().forEach(visit);
+    return found;
+}

package/preview-host/PreviewTarget.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * What a preview shows (spec PRV1/PRV3): a module - the application shell with the module's effective navigation and its
+ * first feature -, one of its features - the same shell with that feature - or a slice. Ids are the qualified ids of the
+ * application structure: `sales`, `sales.orders`, `sales.orders.PlaceOrder`. A feature may also be given relative to its module
+ * (`orders`).
+ *
+ * A State Change slice opens its dialog over a minimal host page; a State View slice renders its data fragment.
+ */
+export type PreviewTarget =
+    | { module: string; feature?: string }
+    | { slice: string };
+
+/** Whether a target names a slice. */
+export function isSliceTarget(target: PreviewTarget): target is { slice: string } {
+    return 'slice' in target;
+}

package/preview-host/PreviewTemplate.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactNode } from 'react';
+import type { FlowArrangement } from '@cratis/scene.model';
+import { evaluateFlowArrangement } from '@cratis/scene.engine';
+import type { ComponentRegistry, RegisteredComponentProps } from '@cratis/scene.react';
+import { FlowArrangementView } from './FlowArrangementView';
+import { useSizeClass } from './useSizeClass';
+
+/** The name the template wrapper is registered under. */
+export const previewTemplateComponent = 'Scene:template';
+
+function isFlowArrangement(arrangement: unknown): arrangement is FlowArrangement {
+    return !!arrangement && typeof arrangement === 'object' && 'root' in arrangement;
+}
+
+/**
+ * A screen's content inside the screen template it names.
+ *
+ * The template's own `arrangement flow` positions its slots - header, body, aside - exactly as the document wrote it, evaluated
+ * for the window's current size class. A template with no flow arrangement stacks them. It sits inside the shell's content
+ * slot, so the shell, not this, owns the chrome around it. Stage and the preview host render templates with this one component.
+ */
+export function PreviewTemplate({ element, slots }: RegisteredComponentProps) {
+    const sizeClass = useSizeClass();
+    const arrangement = (element.properties as Record<string, unknown> | undefined)?.arrangement;
+    const nodes: Record<string, ReactNode> = {};
+    for (const [name, content] of Object.entries(slots)) {
+        nodes[name] = <section className='scene-template-slot' data-slot={name}>{content}</section>;
+    }
+
+    return (
+        <div className='scene-template' data-scene-id={element.id}>
+            {isFlowArrangement(arrangement)
+                ? <FlowArrangementView node={evaluateFlowArrangement(arrangement, sizeClass)} slots={nodes} />
+                : Object.entries(nodes).map(([name, node]) => <div key={name}>{node}</div>)}
+        </div>
+    );
+}
+
+/** The components the preview host and the Stage add to the registry for composed screens. */
+export const previewComponents: ComponentRegistry = {
+    [previewTemplateComponent]: PreviewTemplate,
+};

package/preview-host/PreviewToast.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** What a dry run reports (PRV5). */
+export interface PreviewInvocation {
+    /** The qualified id of the slice. */
+    sliceId: string;
+
+    /** The command the slice accepts, when known. */
+    command?: string;
+
+    /** The payload that would have been sent. */
+    payload: Record<string, unknown>;
+}
+
+/**
+ * The toast that confirms a dry run: "Command would be sent", with the payload in an expandable detail. Nothing was sent to
+ * Chronicle or Arc.
+ */
+export function PreviewToast({ invocation, onDismiss }: { invocation: PreviewInvocation; onDismiss(): void }) {
+    return (
+        <div className='scene-preview-toast' role='status' data-scene-preview-toast>
+            <strong>Command would be sent</strong>
+            <span> · {invocation.command ?? invocation.sliceId}</span>
+            <details>
+                <summary>Payload</summary>
+                <pre>{JSON.stringify(invocation.payload, null, 2)}</pre>
+            </details>
+            <button type='button' onClick={onDismiss}>Dismiss</button>
+        </div>
+    );
+}