@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/examples/main.js

@@ -474,13 +474,7 @@ const AgentRuntimesIAMCallback = () => {
         window.localStorage.setItem('selectedExample', 'HomeExample');
         window.location.replace('/');
     }, []);
-    return (_jsx(JupyterReactTheme, { children: _jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minHeight: '100vh',
-                p: 3,
-            }, children: _jsxs(Box, { sx: { textAlign: 'center' }, children: [status === 'processing' ? _jsx(Spinner, { size: "large" }) : null, _jsx(Text, { as: "p", sx: {
+    return (_jsx(JupyterReactTheme, { children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", p: 3, children: _jsxs(Box, { textAlign: "center", children: [status === 'processing' ? _jsx(Spinner, { size: "large" }) : null, _jsx(Text, { as: "p", sx: {
                             mt: 3,
                             color: status === 'error' ? 'danger.fg' : 'fg.default',
                         }, children: message })] }) }) }));
@@ -1132,54 +1126,17 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
         syncTokenToIamStore(undefined);
         setShowSignIn(true);
     }, [clearAuth, syncTokenToIamStore]);
-    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
-                width: '100vw',
-                height: '100vh',
-                overflow: 'hidden',
-                bg: 'canvas.default',
-                color: 'fg.default',
-            }, children: [_jsxs(Box, { sx: {
-                        position: 'fixed',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        zIndex: 100,
-                        px: 3,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 3,
-                        height: '60px',
-                        bg: 'canvas.default',
-                        borderBottom: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "button", onClick: () => {
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { width: "100vw", height: "100vh", overflow: "hidden", bg: "canvas.default", color: "fg.default", children: [_jsxs(Box, { position: "fixed", top: 0, left: 0, right: 0, zIndex: 100, px: 3, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, height: "60px", bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { as: "button", onClick: () => {
                                         // Also the way back out of the sign-in view, which nothing
                                         // else dismisses: with the example chooser hidden behind it,
                                         // a person who changed their mind would otherwise be stuck.
                                         setShowSignIn(false);
                                         void onExampleChange('HomeExample');
-                                    }, title: "Home", "aria-label": "Go to examples home", sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: '32px',
-                                        height: '32px',
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        borderRadius: 2,
-                                        bg: 'canvas.default',
-                                        color: 'fg.default',
-                                        cursor: isChangingExample ? 'not-allowed' : 'pointer',
-                                    }, disabled: isChangingExample, children: _jsx(HomeIcon, { size: 16 }) }), !shouldShowAuthScreen && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { disabled: isChangingExample, "aria-label": "Select example", sx: { minWidth: '250px', justifyContent: 'space-between' }, onClick: () => setExampleSearch(''), children: selectedExampleEntry?.title ?? selectedExample }), _jsxs(ActionMenu.Overlay, { width: "large", sx: {
+                                    }, title: "Home", "aria-label": "Go to examples home", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px", border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", color: "fg.default", cursor: isChangingExample ? 'not-allowed' : 'pointer', disabled: isChangingExample, children: _jsx(HomeIcon, { size: 16 }) }), !shouldShowAuthScreen && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { disabled: isChangingExample, "aria-label": "Select example", sx: { minWidth: '250px', justifyContent: 'space-between' }, onClick: () => setExampleSearch(''), children: selectedExampleEntry?.title ?? selectedExample }), _jsxs(ActionMenu.Overlay, { width: "large", sx: {
                                                 maxHeight: 'calc(100vh - 72px)',
                                                 overflowY: 'auto',
                                                 overscrollBehavior: 'contain',
-                                            }, children: [_jsx(Box, { sx: {
-                                                        p: 2,
-                                                        borderBottom: '1px solid',
-                                                        borderColor: 'border.default',
-                                                    }, children: _jsx(TextInput, { autoFocus: true, block: true, "aria-label": "Filter examples", placeholder: "Filter examples...", value: exampleSearch, onChange: event => setExampleSearch(event.target.value) }) }), _jsxs(ActionList, { selectionVariant: "single", children: [availableExamples
+                                            }, children: [_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", children: _jsx(TextInput, { autoFocus: true, block: true, "aria-label": "Filter examples", placeholder: "Filter examples...", value: exampleSearch, onChange: event => setExampleSearch(event.target.value) }) }), _jsxs(ActionList, { selectionVariant: "single", children: [availableExamples
                                                             .filter(example => example.id === 'HomeExample' &&
                                                             (!exampleSearch.trim() ||
                                                                 example.title
@@ -1190,10 +1147,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                                             if (!examples?.length)
                                                                 return null;
                                                             return (_jsx(ActionList.Group, { title: groupName, children: examples.map(example => (_jsx(ActionList.Item, { selected: example.id === selectedExample, onSelect: () => void onExampleChange(example.id), children: example.title }, example.id))) }, groupName));
-                                                        })] })] })] })), !shouldShowAuthScreen && !exampleOwnsSandboxControl && (_jsx(Box, { "aria-label": "Where the example runs", sx: {
-                                        minWidth: '320px',
-                                        opacity: isHome || isChangingExample ? 0.6 : 1,
-                                    }, children: _jsx(SegmentedControl, { "aria-label": "Where the example runs", fullWidth: true, size: "small", children: RUNTIME_TARGETS.map(target => {
+                                                        })] })] })] })), !shouldShowAuthScreen && !exampleOwnsSandboxControl && (_jsx(Box, { "aria-label": "Where the example runs", minWidth: "320px", opacity: isHome || isChangingExample ? 0.6 : 1, children: _jsx(SegmentedControl, { "aria-label": "Where the example runs", fullWidth: true, size: "small", children: RUNTIME_TARGETS.map(target => {
                                             const capabilities = runtimeTargetCapabilities(target);
                                             // Signing in is what the Datalayer target needs; saying so on
                                             // the button beats letting the switch fail and explaining
@@ -1207,14 +1161,10 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                                         void onRuntimeTargetChange(target);
                                                     }
                                                 }, children: capabilities.label }, target));
-                                        }) }) })), !isHome && !shouldShowAuthScreen && !isLoopWorkspace && (_jsx(AgentSummary, { summary: agentSummary })), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(AppearanceControlsWithStore, { useStore: useExampleThemeStore }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: token ? (_jsxs(_Fragment, { children: [_jsx(UserBadge, { token: token, variant: "small", onTokenExpired: () => {
+                                        }) }) })), !isHome && !shouldShowAuthScreen && !isLoopWorkspace && (_jsx(AgentSummary, { summary: agentSummary })), isChangingExample && (_jsx(Box, { as: "span", color: "fg.muted", fontSize: 0, children: "Loading\u2026" }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, children: [_jsx(AppearanceControlsWithStore, { useStore: useExampleThemeStore }), _jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: token ? (_jsxs(_Fragment, { children: [_jsx(UserBadge, { token: token, variant: "small", onTokenExpired: () => {
                                                     handleHeaderLogout();
                                                     setShowSignIn(true);
-                                                } }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleHeaderLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] })) : (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(true), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) }), _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(DatalayerLogoText, { size: 24, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) })] })] }), _jsx(Box, { sx: {
-                        marginTop: '60px',
-                        height: 'calc(100vh - 60px)',
-                        overflow: 'hidden',
-                    }, children: shouldShowAuthScreen ? (
+                                                } }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleHeaderLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] })) : (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(true), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) }), _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", display: "inline-flex", alignItems: "center", children: _jsx(DatalayerLogoText, { size: 24, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) })] })] }), _jsx(Box, { marginTop: "60px", height: "calc(100vh - 60px)", overflow: "hidden", children: shouldShowAuthScreen ? (
                     /*
                       Signing in, beside what can be seen without it.
                       
@@ -1224,33 +1174,15 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                       putting it here turns a closed door into a choice: sign in for
                       the rest, or try this one now.
                     */
-                    _jsx(Box, { sx: {
-                            width: '100%',
-                            height: '100%',
-                            bg: 'canvas.backdrop',
-                            p: 3,
-                            overflow: 'auto',
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'grid',
-                                // Stacked on a narrow window, sign-in first: it is what the
-                                // reader came here for, and a column of cards above the form
-                                // would bury it.
-                                gridTemplateColumns: ['1fr', '1fr', '440px minmax(0, 1fr)'],
-                                gap: 4,
-                                maxWidth: 1400,
-                                mx: 'auto',
-                                alignItems: 'start',
-                            }, children: [_jsx(SignInSimple, { onSignIn: handleHeaderSignIn, onApiKeySignIn: apiKey => handleHeaderSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }), 
+                    _jsx(Box, { width: "100%", height: "100%", bg: "canvas.backdrop", p: 3, overflow: "auto", children: _jsxs(Box, { display: "grid", 
+                            // Stacked on a narrow window, sign-in first: it is what the
+                            // reader came here for, and a column of cards above the form
+                            // would bury it.
+                            gridTemplateColumns: ['1fr', '1fr', '440px minmax(0, 1fr)'], gap: 4, maxWidth: 1400, mx: "auto", alignItems: "start", children: [_jsx(SignInSimple, { onSignIn: handleHeaderSignIn, onApiKeySignIn: apiKey => handleHeaderSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }), 
                                     // Level with the cards beside it. Left to itself the form
                                     // centres in `100vh`, which put it half a screen below the
                                     // column it shares a row with.
-                                    fillHeight: false }), _jsx(Box, { sx: {
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        borderRadius: 2,
-                                        overflow: 'hidden',
-                                        bg: 'canvas.default',
-                                    }, children: _jsx(HomeExample, { examples: anonymousExampleEntries, searchQuery: "", onSelectExample: name => void onExampleChange(name) }) })] }) })) : isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null }), _jsx(SlidingPanel, { isOpen: Boolean(topNotice), onDismiss: onDismissTopNotice, position: "north", variant: topNotice?.tone ?? 'info', durationMs: topNotice?.durationMs ?? 0, fullWidth: true, offset: 60, zIndex: 160, message: topNotice?.message || '', details: topNotice?.details })] }) }));
+                                    fillHeight: false }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: _jsx(HomeExample, { examples: anonymousExampleEntries, searchQuery: "", onSelectExample: name => void onExampleChange(name) }) })] }) })) : isChangingExample ? (_jsxs(Box, { p: 5, textAlign: "center", color: "fg.muted", children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null }), _jsx(SlidingPanel, { isOpen: Boolean(topNotice), onDismiss: onDismissTopNotice, position: "north", variant: topNotice?.tone ?? 'info', durationMs: topNotice?.durationMs ?? 0, fullWidth: true, offset: 60, zIndex: 160, message: topNotice?.message || '', details: topNotice?.details })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');

package/lib/examples/scenes/A2UiComponentsGalleryScene.js

@@ -815,17 +815,7 @@ function GalleryContent({ onAction, }) {
     useEffect(() => {
         showScene(currentScene);
     }, [currentScene, showScene]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, p: 3 }, children: [_jsxs(Box, { sx: {
-                    width: '100%',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    p: 3,
-                    backgroundColor: 'canvas.default',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Scenes" }), _jsx(SegmentedControl, { "aria-label": "A2UI gallery scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedScene, onClick: () => setSelectedScene(scene.id), children: scene.label }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: currentScene.description }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => showScene(currentScene), children: "Reload" }), _jsx(Button, { size: "small", variant: "default", onClick: showAllScenes, children: "Show All" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" }), _jsx(Button, { size: "small", variant: "default", onClick: () => void sendSupportPayload({
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, p: 3, children: [_jsxs(Box, { width: "100%", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, backgroundColor: "canvas.default", display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Scenes" }), _jsx(SegmentedControl, { "aria-label": "A2UI gallery scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedScene, onClick: () => setSelectedScene(scene.id), children: scene.label }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: currentScene.description }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => showScene(currentScene), children: "Reload" }), _jsx(Button, { size: "small", variant: "default", onClick: showAllScenes, children: "Show All" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" }), _jsx(Button, { size: "small", variant: "default", onClick: () => void sendSupportPayload({
                                     query: 'Production deploy is failing with auth errors. Help me triage.',
                                 }), disabled: backendLoading, children: backendLoading
                                     ? 'Loading Python Backend…'
@@ -836,7 +826,7 @@ function GalleryContent({ onAction, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 4,
-                }, children: surfaces.map(surface => (_jsx(Box, { sx: { width: '100%' }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
+                }, children: surfaces.map(surface => (_jsx(Box, { width: "100%", children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiComponentsGalleryScene = () => {
     const [lastAction, setLastAction] = useState(null);
@@ -844,28 +834,7 @@ const A2UiComponentsGalleryScene = () => {
         console.warn('A2UI Gallery Action:', action);
         setLastAction(action);
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    height: '100%',
-                    overflow: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83C\uDFA8 A2UI Components Gallery" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Showcases the A2UI basic catalog rendered live via MessageProcessor and A2uiSurface." })] }), _jsx(GalleryContent, { onAction: handleAction }), _jsx(Box, { sx: {
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            p: 3,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            backgroundColor: 'canvas.default',
-                            whiteSpace: 'pre-wrap',
-                            maxHeight: 220,
-                            overflow: 'auto',
-                        }, children: lastAction
+    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { height: "100%", overflow: "auto", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 3, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.default", children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83C\uDFA8 A2UI Components Gallery" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Showcases the A2UI basic catalog rendered live via MessageProcessor and A2uiSurface." })] }), _jsx(GalleryContent, { onAction: handleAction }), _jsx(Box, { borderTop: "1px solid", borderColor: "border.default", p: 3, fontFamily: "mono", fontSize: 0, backgroundColor: "canvas.default", whiteSpace: "pre-wrap", maxHeight: 220, overflow: "auto", children: lastAction
                             ? JSON.stringify(lastAction, null, 2)
                             : 'No action triggered yet.' })] }) }) }));
 };

package/lib/examples/scenes/A2UiContactCardScene.js

@@ -133,17 +133,11 @@ function ContactCardContent({ onAction, }) {
     useEffect(() => {
         loadCard();
     }, [loadCard]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, px: 3, pb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { style: themeStyle, sx: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, px: 3, pb: 3, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { style: themeStyle, sx: {
                     ...A2UI_RENDER_SCOPE_SX,
                     display: 'grid',
                     gap: 3,
-                }, children: surfaces.map(surface => (_jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        p: 3,
-                        backgroundColor: 'canvas.default',
-                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
+                }, children: surfaces.map(surface => (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, backgroundColor: "canvas.default", children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiContactCardScene = () => {
     const [lastAction, setLastAction] = useState(null);
@@ -157,32 +151,6 @@ const A2UiContactCardScene = () => {
         }
         return JSON.stringify(lastAction, null, 2);
     }, [lastAction]);
-    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    height: '100%',
-                    overflow: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { sx: {
-                            display: 'grid',
-                            gridTemplateColumns: ['1fr', '2fr 1fr'],
-                            gap: 3,
-                            p: 3,
-                        }, children: [_jsx(ContactCardContent, { onAction: handleAction }), _jsx(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 3,
-                                    backgroundColor: 'canvas.default',
-                                    fontFamily: 'mono',
-                                    fontSize: 0,
-                                    whiteSpace: 'pre-wrap',
-                                    overflow: 'auto',
-                                }, children: actionPreview })] })] }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { height: "100%", overflow: "auto", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 3, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.default", children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: ['1fr', '2fr 1fr'], gap: 3, p: 3, children: [_jsx(ContactCardContent, { onAction: handleAction }), _jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, backgroundColor: "canvas.default", fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", overflow: "auto", children: actionPreview })] })] }) }) }));
 };
 export default A2UiContactCardScene;

package/lib/examples/scenes/A2UiRestaurantScene.js

@@ -55,23 +55,7 @@ function RestaurantSearch({ onSearch, isLoading, }) {
         }
         onSearch(inputValue.trim());
     }, [inputValue, isLoading, onSearch]);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 4,
-            p: 4,
-            maxWidth: 640,
-            mx: 'auto',
-        }, children: [_jsx(Box, { sx: {
-                    width: '100%',
-                    height: 200,
-                    borderRadius: 2,
-                    background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: { fontSize: '2rem', fontWeight: 'bold', textAlign: 'center' }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: "A2UI renderer connected to a live agent backend." }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 4, p: 4, maxWidth: 640, mx: "auto", children: [_jsx(Box, { width: "100%", height: 200, borderRadius: 2, background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`, display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: { fontSize: '2rem', fontWeight: 'bold', textAlign: 'center' }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: "A2UI renderer connected to a live agent backend." }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
 }
 const A2UiRestaurantScene = () => {
     const baseUrl = useExampleAgentRuntimesUrl();
@@ -152,45 +136,11 @@ const A2UiRestaurantScene = () => {
         }
         await sendPayload({ query: lastQuery });
     }, [lastQuery, sendPayload]);
-    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    height: '100%',
-                    overflow: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: [_jsxs(Box, { sx: {
-                            p: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { sx: { flex: 1, p: 3 }, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    height: 280,
-                                    gap: 3,
-                                }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] })), error && !isLoading && (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                    gap: 3,
-                                    p: 4,
-                                }, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { style: themeStyle, sx: {
+    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { height: "100%", overflow: "auto", display: "flex", flexDirection: "column", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.default", children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { flex: 1, p: 3, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: 280, gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] })), error && !isLoading && (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 3, p: 4, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { style: themeStyle, sx: {
                                     ...A2UI_RENDER_SCOPE_SX,
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 3,
-                                }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { sx: {
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 1,
-                                            p: 3,
-                                        }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
-                            p: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                            textAlign: 'center',
-                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
+                                }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 1, p: 3, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { p: 2, borderTop: "1px solid", borderColor: "border.default", backgroundColor: "canvas.default", textAlign: "center", children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
 };
 export default A2UiRestaurantScene;

package/lib/examples/scenes/A2UiViewerScene.js

@@ -343,23 +343,13 @@ function ViewerContent({ onAction, }) {
         resetSurfaces();
         processMessages(selectedScene.messages);
     }, [selectedScene, processMessages, resetSurfaces]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, p: 3 }, children: [_jsxs(Box, { sx: {
-                    width: '100%',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    p: 3,
-                    backgroundColor: 'canvas.default',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Select Scene" }), _jsx(SegmentedControl, { "aria-label": "A2UI viewer scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedSceneId, onClick: () => setSelectedSceneId(scene.id), children: `${scene.emoji} ${scene.label}` }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: selectedScene.description })] }), _jsx(Box, { style: themeStyle, sx: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, p: 3, children: [_jsxs(Box, { width: "100%", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, backgroundColor: "canvas.default", display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Select Scene" }), _jsx(SegmentedControl, { "aria-label": "A2UI viewer scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedSceneId, onClick: () => setSelectedSceneId(scene.id), children: `${scene.emoji} ${scene.label}` }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: selectedScene.description })] }), _jsx(Box, { style: themeStyle, sx: {
                     ...A2UI_RENDER_SCOPE_SX,
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
-                }, children: surfaces.map(surface => (_jsx(Box, { sx: { width: '100%' }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
+                }, children: surfaces.map(surface => (_jsx(Box, { width: "100%", children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiViewerScene = () => {
     const [lastAction, setLastAction] = useState(null);
@@ -367,28 +357,7 @@ const A2UiViewerScene = () => {
         console.log('A2UI Viewer Action:', action);
         setLastAction(action);
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { sx: {
-                    height: '100%',
-                    overflow: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 3,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            backgroundColor: 'canvas.default',
-                        }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDD0D A2UI Viewer" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Standalone viewer scenes powered by MessageProcessor and A2uiSurface." })] }), _jsx(ViewerContent, { onAction: handleAction }), _jsx(Box, { sx: {
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            p: 3,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            backgroundColor: 'canvas.default',
-                            whiteSpace: 'pre-wrap',
-                            maxHeight: 180,
-                            overflow: 'auto',
-                        }, children: lastAction
+    return (_jsx(_Fragment, { children: _jsx(A2uiMarkdownProvider, { children: _jsxs(Box, { height: "100%", overflow: "auto", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 3, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.default", children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDD0D A2UI Viewer" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Standalone viewer scenes powered by MessageProcessor and A2uiSurface." })] }), _jsx(ViewerContent, { onAction: handleAction }), _jsx(Box, { borderTop: "1px solid", borderColor: "border.default", p: 3, fontFamily: "mono", fontSize: 0, backgroundColor: "canvas.default", whiteSpace: "pre-wrap", maxHeight: 180, overflow: "auto", children: lastAction
                             ? JSON.stringify(lastAction, null, 2)
                             : 'No action triggered yet.' })] }) }) }));
 };

package/lib/examples/utils/AssistantGalleryGrid.js

@@ -78,37 +78,15 @@ export function Still({ still, children, }) {
  * stage's own `useKeepClear` finds it and steps aside.
  */
 export function GalleryObstacle({ sx, }) {
-    return (_jsx(Box, { "data-chat-composer": "", "aria-label": "A composer over the assistant", sx: {
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: '1px dashed',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.subtle',
-            color: 'fg.muted',
-            fontSize: 0,
-            textAlign: 'center',
-            p: 1,
-            ...sx,
-        }, children: "composer" }));
+    return (_jsx(Box, { "data-chat-composer": "", "aria-label": "A composer over the assistant", position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", border: "1px dashed", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", color: "fg.muted", fontSize: 0, textAlign: "center", p: 1, sx: sx, children: "composer" }));
 }
 function GalleryCell({ character, pose, size, }) {
     const stageRef = useRef(null);
-    return (_jsxs(Box, { "data-gallery-cell": `${character.id}-${pose}`, sx: {
-            position: 'relative',
-            width: size + 16,
-            height: size + 16,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, children: [_jsx(AssistantStage, { character: character.character, state: stateOfPose(pose), size: size, place: { position: 'relative', zIndex: 0 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: () => undefined, onDismiss: () => undefined }), pose === 'aside' && _jsx(GalleryObstacle, { sx: { inset: 0 } })] }));
+    return (_jsxs(Box, { "data-gallery-cell": `${character.id}-${pose}`, position: "relative", width: size + 16, height: size + 16, display: "flex", alignItems: "center", justifyContent: "center", children: [_jsx(AssistantStage, { character: character.character, state: stateOfPose(pose), size: size, place: { position: 'relative', zIndex: 0 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: () => undefined, onDismiss: () => undefined }), pose === 'aside' && _jsx(GalleryObstacle, { sx: { inset: 0 } })] }));
 }
 /** Every character in every pose: a row per character, a column per pose. */
 export function AssistantGalleryGrid({ characters, size = 48, }) {
-    return (_jsxs(Box, { as: "table", "data-assistant-gallery-grid": "", sx: {
-            borderCollapse: 'collapse',
+    return (_jsxs(Box, { as: "table", "data-assistant-gallery-grid": "", borderCollapse: "collapse", sx: {
             color: 'fg.default',
             '& th': {
                 fontSize: 0,
@@ -120,7 +98,7 @@ export function AssistantGalleryGrid({ characters, size = 48, }) {
                 whiteSpace: 'nowrap',
             },
             '& td': { p: 0, textAlign: 'center' },
-        }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), GALLERY_POSES.map(pose => (_jsx("th", { scope: "col", children: GALLERY_POSE_LABELS[pose] }, pose)))] }) }), _jsx("tbody", { children: characters.map(character => (_jsxs("tr", { children: [_jsxs(Box, { as: "th", scope: "row", sx: { textAlign: 'left !important', pr: '12px !important' }, children: [_jsx(Text, { sx: { display: 'block', color: 'fg.default' }, children: character.name }), _jsx(Text, { sx: { fontWeight: 400 }, children: character.from })] }), GALLERY_POSES.map(pose => (_jsx("td", { children: _jsx(GalleryCell, { character: character, pose: pose, size: size }) }, pose)))] }, character.id))) })] }));
+        }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), GALLERY_POSES.map(pose => (_jsx("th", { scope: "col", children: GALLERY_POSE_LABELS[pose] }, pose)))] }) }), _jsx("tbody", { children: characters.map(character => (_jsxs("tr", { children: [_jsxs(Box, { as: "th", scope: "row", textAlign: "left !important", pr: "12px !important", children: [_jsx(Text, { sx: { display: 'block', color: 'fg.default' }, children: character.name }), _jsx(Text, { sx: { fontWeight: 400 }, children: character.from })] }), GALLERY_POSES.map(pose => (_jsx("td", { children: _jsx(GalleryCell, { character: character, pose: pose, size: size }) }, pose)))] }, character.id))) })] }));
 }
 /** How tall the notebook in a balloon is, in the stage and in the grid. */
 export const GALLERY_NOTEBOOK_HEIGHT = 160;
@@ -138,14 +116,7 @@ export function galleryNotebookVisual() {
 /** One balloon display, pictured: a character with what its balloon says. */
 function BalloonCell({ character, label, display, balloon, height, }) {
     const stageRef = useRef(null);
-    return (_jsxs(Box, { "data-gallery-cell": `balloon-${label.toLowerCase().replace(/\W+/g, '-')}`, sx: {
-            position: 'relative',
-            width: 330,
-            height,
-            border: '1px solid',
-            borderColor: 'border.muted',
-            borderRadius: 2,
-        }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { "data-gallery-cell": `balloon-${label.toLowerCase().replace(/\W+/g, '-')}`, position: "relative", width: 330, height: height, border: "1px solid", borderColor: "border.muted", borderRadius: 2, children: [_jsx(Text, { sx: {
                     position: 'absolute',
                     top: 1,
                     right: 2,
@@ -160,7 +131,7 @@ function BalloonCell({ character, label, display, balloon, height, }) {
  * read-only jupyter-react notebook as in the stage, loaded when drawn.
  */
 export function GalleryBalloons({ character, }) {
-    return (_jsxs(Box, { "data-gallery-balloons": "", sx: { display: 'flex', gap: 3, flexWrap: 'wrap', mt: 3 }, children: [_jsx(BalloonCell, { character: character, label: "History", display: "history", height: 340, balloon: {
+    return (_jsxs(Box, { "data-gallery-balloons": "", display: "flex", gap: 3, flexWrap: "wrap", mt: 3, children: [_jsx(BalloonCell, { character: character, label: "History", display: "history", height: 340, balloon: {
                     ...sampleSaying(1),
                     history: sampleHistory(2),
                     onDismiss: () => undefined,

package/lib/examples2/DatalayerNotebookExample.js

@@ -66,44 +66,14 @@ const DatalayerNotebookExample = (props) => {
             token,
         });
     }, [enableCollaboration, configuration]);
-    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.spacerUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure spacerUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        gap: 2,
-                        flexDirection: 'row',
-                    }, children: [_jsxs(Box, { sx: {
-                                flex: 1,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                            }, children: [_jsx(Box, { sx: {
-                                        p: 2,
-                                        bg: 'canvas.subtle',
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                        fontWeight: 'bold',
-                                    }, children: "Collaborator 1" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
+    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { mb: 3, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.spacerUrl || !configuration?.token) && (_jsx(Box, { mb: 2, p: 2, bg: "danger.subtle", children: "Warning: Datalayer configuration is missing. Please configure spacerUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { mb: 2, p: 2, bg: "attention.subtle", children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { display: "flex", gap: 2, flexDirection: "row", children: [_jsxs(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsx(Box, { p: 2, bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.default", fontWeight: "bold", children: "Collaborator 1" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
                                         width: '100%',
                                         height: 'calc(100vh - 280px)',
                                         border: 'none',
-                                    }, title: "Collaborator 1" })] }), _jsxs(Box, { sx: {
-                                flex: 1,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                            }, children: [_jsx(Box, { sx: {
-                                        p: 2,
-                                        bg: 'canvas.subtle',
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                        fontWeight: 'bold',
-                                    }, children: "Collaborator 2" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
+                                    }, title: "Collaborator 1" })] }), _jsxs(Box, { flex: 1, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsx(Box, { p: 2, bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.default", fontWeight: "bold", children: "Collaborator 2" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
                                         width: '100%',
                                         height: 'calc(100vh - 280px)',
                                         border: 'none',
-                                    }, title: "Collaborator 2" })] })] })) : (_jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                    }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (spacerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
+                                    }, title: "Collaborator 2" })] })] })) : (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { p: 4, textAlign: "center", children: "Loading ServiceManager..." })) })), _jsxs(Box, { mt: 2, fontSize: 1, color: "fg.subtle", children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (spacerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
 };
 export default DatalayerNotebookExample;