@datalayer/agent-runtimes 1.5.1 → 1.5.3

package/lib/apps/core/index.d.ts

@@ -9,6 +9,7 @@ import type { AssistantCharacter } from '../../chat/assistant/characters';
 import type { AssistantCharacterData } from '../../chat/assistant/formats/types';
 import type { PresenceState } from '../../chat/presence/presenceStatus';
 import type { ChatWords } from '../../chat/words';
+import type { ChatViewMode } from '../../types/chat';
 /** Lifecycle of the sandbox a workspace is attached to. */
 export type SandboxState = 'idle' | 'starting' | 'running' | 'stopping' | 'error';
 /** What the workspace knows about the sandbox behind it. */
@@ -196,6 +197,21 @@ export type LoopWorkspaceContext = {
      * part of the page and the chat's stay together at the trailing edge.
      */
     chatHeaderActions?: ReactNode;
+    /**
+     * The chat's view, as the host keeps it: the chat's title bar offers the
+     * views with its view-mode toggle (`ChatViewModeToggle`). Unsaid, the
+     * title bar offers none.
+     */
+    chatViewModes?: LoopChatViewModes;
+};
+/** The chat's view in a workspace whose host keeps it (`chatViewModes`). */
+export type LoopChatViewModes = {
+    /** The view the chat is in. */
+    value: ChatViewMode;
+    /** The person picked another view. */
+    onChange: (mode: ChatViewMode) => void;
+    /** The views offered, in the toggle's order; all of them when unsaid. */
+    offered?: readonly ChatViewMode[];
 };
 /**
  * How a prompt typed in the shell reaches whatever should answer it.

package/lib/apps/index.d.ts

@@ -6,7 +6,7 @@
  *
  * @module apps
  */
-export { LoopCommand, LoopDocumentToolbar, LoopMention, LoopNotebookToolbar, LoopRunProps, LoopSlots, LoopViewType, canOpenView, createPromptChannel, parseCommand, runForwardedProps, type CommandArgSpec, type CommandContribution, type CommandResult, type EditorToolbarContext, type EditorToolbarContribution, type LoopCommandContext, type LoopViewProps, type LoopWorkspaceContext, type MentionCandidate, type MentionContribution, type PromptChannel, type RunPropsContribution, type SandboxSnapshot, type SandboxState, type ViewControls, type ViewTypeContribution, useLoopPromptStore, suggestLoopPrompt, focusPrompt, onPromptFocusRequest, type LoopPromptState, type SuggestedPrompt, } from './core';
+export { LoopCommand, LoopDocumentToolbar, LoopMention, LoopNotebookToolbar, LoopRunProps, LoopSlots, LoopViewType, canOpenView, createPromptChannel, parseCommand, runForwardedProps, type CommandArgSpec, type CommandContribution, type CommandResult, type EditorToolbarContext, type EditorToolbarContribution, type LoopCommandContext, type LoopViewProps, type LoopWorkspaceContext, type LoopChatViewModes, type MentionCandidate, type MentionContribution, type PromptChannel, type RunPropsContribution, type SandboxSnapshot, type SandboxState, type ViewControls, type ViewTypeContribution, useLoopPromptStore, suggestLoopPrompt, focusPrompt, onPromptFocusRequest, type LoopPromptState, type SuggestedPrompt, } from './core';
 export { useEditorToolbar } from './core/toolbar';
 export { LoopWorkspace, PluginToggles, ViewSwitcher, WorkspaceFullScreenAction, buildLoopReactor, useWorkspaceFullScreen, type LoopWorkspaceProps, type PluginTogglesProps, type ViewSwitcherProps, } from './shell';
 export { A2uiPlugin, A2UI_PLUGIN_NAME } from './plugins/a2ui';

package/lib/apps/plugins/chat/ChatView.js

@@ -1845,7 +1845,19 @@ export default function ChatView({ workspace }) {
                             showNewChat: config?.headerButtons?.newChat ?? false,
                             showClear: config?.headerButtons?.clear ?? false,
                         }, renderHeader: HeaderComponent
-                            ? headerProps => (_jsx(HeaderComponent, { workspace: workspace, header: headerProps }))
+                            ? headerProps => (_jsx(HeaderComponent, { workspace: workspace, header: 
+                                /* The chat's view, when the host keeps it: the
+                                   title bar's toggle, given to the header only —
+                                   the chat itself stays where the workspace
+                                   places it, whichever view is picked. */
+                                workspace.chatViewModes
+                                    ? {
+                                        ...headerProps,
+                                        chatViewMode: workspace.chatViewModes.value,
+                                        onChatViewModeChange: workspace.chatViewModes.onChange,
+                                        offeredViewModes: workspace.chatViewModes.offered,
+                                    }
+                                    : headerProps }))
                             : undefined, 
                         /*
                           The (i), which opens the agent's details over the transcript.

package/lib/apps/shell/LoopWorkspace.d.ts

@@ -22,7 +22,7 @@
 import type { JSX } from 'react';
 import type { ReactNode } from 'react';
 import { type PlatformInput, type PluginRef, type ReactorPlatform } from '@datalayer/reactor';
-import { type LoopWorkspaceContext, type SandboxSnapshot } from '../core';
+import { type LoopChatViewModes, type LoopWorkspaceContext, type SandboxSnapshot } from '../core';
 export type LoopWorkspaceProps = {
     /** Server backing this session. */
     serverUrl: string;
@@ -93,6 +93,13 @@ export type LoopWorkspaceProps = {
      * to `LoopSlots.chatHeader` instead, and both end up in the same row.
      */
     chatHeaderActions?: ReactNode;
+    /**
+     * The chat's view, kept by the host: offered in the chat's title bar by
+     * its view-mode toggle. The host draws the view picked — for the
+     * assistant, a chat layout (`LoopChatLayout`) that hands the transcript
+     * and the composer to `ChatFloating`'s assistant mode.
+     */
+    chatViewModes?: LoopChatViewModes;
     /**
      * The host's own controls for the workspace header row.
      *

package/lib/apps/shell/LoopWorkspace.js

@@ -13,21 +13,21 @@ export function buildLoopReactor(extensions) {
     return buildReactorFromPlugins(extensions);
 }
 export function LoopWorkspace(props) {
-    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, sidebarRail = false, } = props;
+    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, chatViewModes, headerActions, headerContainer, sidebarRail = false, } = props;
     // Building the platform is a one-time act: rebuilding it on every render
     // would restart every plugin.
     const reactor = useMemo(() => providedReactor ?? buildLoopReactor(extensions), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [providedReactor]);
     useReactor(reactor, { autoStart: manageReactor });
-    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer, sidebarRail: sidebarRail }));
+    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, chatViewModes: chatViewModes, headerActions: headerActions, headerContainer: headerContainer, sidebarRail: sidebarRail }));
 }
 /**
  * Split from `LoopWorkspace` so the hooks below run with the platform already
  * registered — `useContributions` needs a reactor in the store, and `useReactor`
  * registers it during the parent's render.
  */
-function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, sidebarRail = false, }) {
+function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, chatViewModes, headerActions, headerContainer, sidebarRail = false, }) {
     /*
      * Which agent the session is talking to.
      *
@@ -119,6 +119,7 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
         viewControls,
         setViewControls,
         chatHeaderActions,
+        chatViewModes,
     }), [
         serverUrl,
         agentId,
@@ -131,6 +132,7 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
         viewControls,
         setViewControls,
         chatHeaderActions,
+        chatViewModes,
     ]);
     // `submit` must not be rebuilt whenever the workspace object changes — the
     // chat holds on to it — so it reads the current values through refs.

package/lib/chat/header/ChatHeaderBase.d.ts

@@ -69,6 +69,8 @@ export interface ChatBaseHeaderProps {
     onChatViewModeChange?: (mode: ChatViewMode) => void;
     /** Modes shown greyed out: the sidebar, when the host has no mount point. */
     disabledViewModes?: readonly ChatViewMode[];
+    /** The modes the toggle offers; all of them when unsaid. */
+    offeredViewModes?: readonly ChatViewMode[];
     /** Show the companion-surface segmented control (None / Notebook / Document). */
     showEphemeralSurfaceControl?: boolean;
     /** Whether the Notebook option is available in the surface control. */
@@ -80,5 +82,5 @@ export interface ChatBaseHeaderProps {
     /** Callback fired when the user changes the companion-surface mode. */
     onEphemeralSurfaceModeChange?: (mode: EphemeralSurfaceMode) => void;
 }
-export declare function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes, showEphemeralSurfaceControl, enableEphemeralNotebookOption, enableEphemeralDocumentOption, ephemeralSurfaceMode, onEphemeralSurfaceModeChange, }: ChatBaseHeaderProps): import("react").JSX.Element;
+export declare function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes, offeredViewModes, showEphemeralSurfaceControl, enableEphemeralNotebookOption, enableEphemeralDocumentOption, ephemeralSurfaceMode, onEphemeralSurfaceModeChange, }: ChatBaseHeaderProps): import("react").JSX.Element;
 export {};

package/lib/chat/header/ChatHeaderBase.js

@@ -31,7 +31,7 @@ export function toRuntimeExecutionState(runtimeStatus) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement = 'left', runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes = [], showEphemeralSurfaceControl = false, enableEphemeralNotebookOption = false, enableEphemeralDocumentOption = false, ephemeralSurfaceMode = 'none', onEphemeralSurfaceModeChange, }) {
+export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement = 'left', runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes = [], offeredViewModes, showEphemeralSurfaceControl = false, enableEphemeralNotebookOption = false, enableEphemeralDocumentOption = false, ephemeralSurfaceMode = 'none', onEphemeralSurfaceModeChange, }) {
     const effectiveIndicatorState = kernelIndicatorState ?? toRuntimeExecutionState(runtimeStatus);
     /*
      * No indicator where there is nothing to indicate.
@@ -58,5 +58,5 @@ export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, head
                                         color: 'fg.muted',
                                         minWidth: 0,
                                         maxWidth: '100%',
-                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), disableReason && (_jsx(Label, { variant: "attention", sx: { flexShrink: 0 }, children: disableReason })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: onEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebookOption, enableDocument: enableEphemeralDocumentOption })), chatViewMode && onChatViewModeChange && (_jsx(ChatViewModeToggle, { value: chatViewMode, onChange: onChatViewModeChange, disabledModes: disabledViewModes })), headerActions] })] }) }));
+                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), disableReason && (_jsx(Label, { variant: "attention", sx: { flexShrink: 0 }, children: disableReason })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: onEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebookOption, enableDocument: enableEphemeralDocumentOption })), chatViewMode && onChatViewModeChange && (_jsx(ChatViewModeToggle, { value: chatViewMode, onChange: onChatViewModeChange, disabledModes: disabledViewModes, modes: offeredViewModes })), headerActions] })] }) }));
 }

package/lib/chat/header/ChatViewModeToggle.d.ts

@@ -23,7 +23,13 @@ export type ChatViewModeToggleProps = {
     onChange: (mode: ChatViewMode) => void;
     /** Modes shown greyed out: the sidebar, when the host has no mount point. */
     disabledModes?: readonly ChatViewMode[];
+    /**
+     * The modes offered, in `CHAT_VIEW_MODES` order whatever order they are
+     * given in: all of them when unsaid. A host that places only some of them
+     * — the workspace: its sidebar, or the assistant over it — leaves the rest out.
+     */
+    modes?: readonly ChatViewMode[];
     /** Where the tooltips open. Above by default; below for a control at the top of its window. */
     tooltipDirection?: 'n' | 's';
 };
-export declare function ChatViewModeToggle({ value, onChange, disabledModes, tooltipDirection, }: ChatViewModeToggleProps): JSX.Element;
+export declare function ChatViewModeToggle({ value, onChange, disabledModes, modes, tooltipDirection, }: ChatViewModeToggleProps): JSX.Element;

package/lib/chat/header/ChatViewModeToggle.js

@@ -11,8 +11,11 @@ export const VIEW_MODE_ICONS = {
     assistant: PaperclipIcon,
     sidebar: SidebarExpandIcon,
 };
-export function ChatViewModeToggle({ value, onChange, disabledModes = [], tooltipDirection = 'n', }) {
-    return (_jsx(Box, { role: "group", "aria-label": "Display mode", "data-chat-view-mode-toggle": "", display: "inline-flex", alignItems: "center", bg: "neutral.muted", borderRadius: "6px", p: "2px", gap: "1px", children: CHAT_VIEW_MODES.map(({ mode, label }) => {
+export function ChatViewModeToggle({ value, onChange, disabledModes = [], modes, tooltipDirection = 'n', }) {
+    const offered = modes
+        ? CHAT_VIEW_MODES.filter(option => modes.includes(option.mode))
+        : CHAT_VIEW_MODES;
+    return (_jsx(Box, { role: "group", "aria-label": "Display mode", "data-chat-view-mode-toggle": "", display: "inline-flex", alignItems: "center", bg: "neutral.muted", borderRadius: "6px", p: "2px", gap: "1px", children: offered.map(({ mode, label }) => {
             const ModeIcon = VIEW_MODE_ICONS[mode];
             const selected = value === mode;
             /* Greyed rather than left out: the person sees the mode exists, and

package/lib/examples/pap/PapTraceView.d.ts

@@ -60,6 +60,8 @@ export type PapTrace = {
     title: string;
     description: string;
     generator: string;
+    /** The released SDK the trace was recorded with, as `personal-agent-protocol <version>`. */
+    sdk: string;
     parties: PapTraceParty[];
     steps: PapTraceStep[];
 };

package/lib/examples/pap/PapTraceView.js

@@ -22,6 +22,8 @@ export function parsePapTrace(value) {
     const trace = value;
     if (!trace ||
         typeof trace.slug !== 'string' ||
+        typeof trace.sdk !== 'string' ||
+        !/^personal-agent-protocol \d+\.\d+\.\d+$/.test(trace.sdk) ||
         !Array.isArray(trace.parties) ||
         !Array.isArray(trace.steps) ||
         trace.steps.length === 0) {
@@ -190,7 +192,7 @@ export const PapTraceView = ({ trace, eyebrow = 'PAP · Replayed trace', }) => {
     const go = (next) => setStepIndex(Math.max(0, Math.min(trace.steps.length - 1, next)));
     const active = new Set(step.sequence.flatMap(item => [item.from, item.to]));
     const observers = trace.parties.slice(1);
-    return (_jsxs(PapExamplePage, { eyebrow: eyebrow, title: trace.title, description: `${trace.description} Replayed from a trace the PAP Python SDK's demo world generated (${trace.generator}); every token, code, proof and assertion is a placeholder.`, maxWidth: 1240, children: [_jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", p: 3, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: trace.parties.map(party => (_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", mr: 3, children: [_jsx(Avatar, { party: party, tone: toneOf(trace.parties, party.id) }), _jsxs(Box, { children: [_jsx(Text, { as: "div", sx: { fontWeight: 700, fontSize: 1 }, children: party.name }), _jsx(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: party.role })] })] }, party.id))) }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(IconButton, { icon: ChevronLeftIcon, "aria-label": "Previous step", disabled: stepIndex === 0, onClick: () => go(stepIndex - 1) }), _jsx(Box, { display: "flex", gap: 2, overflow: "auto", flex: 1, "aria-label": "Trace steps", children: trace.steps.map((candidate, index) => (_jsxs(Button, { variant: index === stepIndex ? 'primary' : 'default', onClick: () => go(index), sx: { flexShrink: 0 }, children: [index + 1, ". ", candidate.title] }, candidate.title))) }), _jsx(IconButton, { icon: ChevronRightIcon, "aria-label": "Next step", disabled: stepIndex === trace.steps.length - 1, onClick: () => go(stepIndex + 1) })] }), _jsxs(Box, { display: "grid", sx: {
+    return (_jsxs(PapExamplePage, { eyebrow: eyebrow, title: trace.title, description: `${trace.description} Recorded data, not live: replayed from a trace the PAP Python SDK's demo world generated with ${trace.sdk} (${trace.generator}); every token, code, proof and assertion is a placeholder.`, maxWidth: 1240, children: [_jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", p: 3, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: trace.parties.map(party => (_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", mr: 3, children: [_jsx(Avatar, { party: party, tone: toneOf(trace.parties, party.id) }), _jsxs(Box, { children: [_jsx(Text, { as: "div", sx: { fontWeight: 700, fontSize: 1 }, children: party.name }), _jsx(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: party.role })] })] }, party.id))) }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(IconButton, { icon: ChevronLeftIcon, "aria-label": "Previous step", disabled: stepIndex === 0, onClick: () => go(stepIndex - 1) }), _jsx(Box, { display: "flex", gap: 2, overflow: "auto", flex: 1, "aria-label": "Trace steps", children: trace.steps.map((candidate, index) => (_jsxs(Button, { variant: index === stepIndex ? 'primary' : 'default', onClick: () => go(index), sx: { flexShrink: 0 }, children: [index + 1, ". ", candidate.title] }, candidate.title))) }), _jsx(IconButton, { icon: ChevronRightIcon, "aria-label": "Next step", disabled: stepIndex === trace.steps.length - 1, onClick: () => go(stepIndex + 1) })] }), _jsxs(Box, { display: "grid", sx: {
                     gridTemplateColumns: ['1fr', '1fr', 'minmax(300px, 0.7fr) 1.5fr'],
                 }, gap: 4, alignItems: "start", children: [_jsx(Phone, { trace: trace, stepIndex: stepIndex }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, minWidth: 0, children: [_jsxs(Box, { p: 3, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Text, { as: "div", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Step ", stepIndex + 1, " of ", trace.steps.length, " \u00B7 ", step.channel] }), _jsx(Heading, { as: "h2", sx: { mt: 1, fontSize: 3 }, children: step.title }), _jsx(Text, { as: "p", sx: { mt: 2, mb: 0, color: 'fg.muted' }, children: step.summary })] }), _jsx(Sequence, { trace: trace, step: step }), _jsx(Box, { display: "grid", sx: {
                                     gridTemplateColumns: [