@motiadev/workbench 0.5.11-beta.120-433270 → 0.5.11-beta.120-110250

package/dist/src/components/tutorial/hooks/use-tutorial.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react';
+import { MotiaTutorial } from '../engine/tutorial-engine';
+export const useTutorial = () => {
+    const open = () => MotiaTutorial.open();
+    const [steps, setSteps] = useState([]);
+    useEffect(() => {
+        MotiaTutorial.onStepsRegistered(() => setSteps(MotiaTutorial.steps));
+    }, []);
+    return { open, steps };
+};

package/dist/src/components/tutorial/tutorial-button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@motiadev/ui';
+import { Book } from 'lucide-react';
+import { useTutorial } from './hooks/use-tutorial';
+import { Tooltip } from '../ui/tooltip';
+export const TutorialButton = () => {
+    const { open, steps } = useTutorial();
+    const isTutorialFlowMissing = steps.length === 0;
+    const onTutorialButtonClick = () => {
+        if (!isTutorialFlowMissing) {
+            open();
+        }
+    };
+    console.log(isTutorialFlowMissing);
+    const trigger = (_jsxs(Button, { "data-testid": "tutorial-trigger", variant: "default", onClick: () => onTutorialButtonClick(), children: [_jsx(Book, { className: "h-4 w-4" }), "Tutorial"] }));
+    if (isTutorialFlowMissing) {
+        return (_jsx(Tooltip, { content: _jsxs("div", { className: "flex flex-col gap-4 p-4 max-w-[320px]", children: [_jsx("p", { className: "text-sm wrap-break-word p-0 m-0", children: "In order to start the tutorial, you need to download the tutorial steps using the Motia CLI. In your terminal execute the following command to create a new project:" }), _jsx("pre", { className: "text-sm font-bold", children: "npx motia@latest create" })] }), children: trigger }));
+    }
+    return trigger;
+};

package/dist/src/components/tutorial/tutorial-step.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TutorialImage } from './engine/tutorial-types';
+type TutorialStepProps = {
+    step: number;
+    totalSteps: number;
+    title: string;
+    description: React.ReactNode;
+    link?: string;
+    image?: TutorialImage;
+    onNext: () => void;
+    onClose: () => void;
+};
+export declare const TutorialStep: React.ForwardRefExoticComponent<TutorialStepProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/tutorial/tutorial-step.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+export const TutorialStep = forwardRef(({ step, totalSteps, title, description, link, image, onNext, onClose }, ref) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+            else if (e.key === 'ArrowRight') {
+                onNext();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onClose, onNext]);
+    return (_jsxs("div", { ref: ref, className: "driver-popover", children: [image && (_jsx("img", { src: image.src, alt: "Step visual", className: "driver-popover-image object-cover", style: { height: image.height, width: '100%' } })), _jsx("div", { className: "driver-popover-title", children: _jsx("h2", { className: "popover-title", children: title }) }), _jsx("div", { className: "driver-popover-description", children: description }), link && (_jsx("a", { href: link, target: "_blank", className: "text-foreground text-xs font-semibold px-4 hover:underline", children: "Learn more" })), _jsxs("div", { className: "driver-popover-footer flex items-center justify-between", children: [_jsxs("div", { className: "text-sm text-muted-foreground font-semibold", children: [step, " ", _jsx("span", { className: "text-foreground", children: "/" }), " ", totalSteps] }), _jsx("div", { className: "driver-popover-navigation-btns flex gap-2", children: _jsx("button", { className: "driver-popover-next-btn", onClick: onNext, children: step < totalSteps ? 'Continue' : 'Finish' }) })] }), step < totalSteps && (_jsx("div", { className: "tutorial-opt-out-container", children: _jsx("button", { className: "tutorial-opt-out-button", onClick: onClose, children: "Close" }) }))] }));
+});
+TutorialStep.displayName = 'TutorialStep';

package/dist/src/components/tutorial/tutorial.d.ts

@@ -0,0 +1,2 @@
+import './tutorial.css';
+export declare const Tutorial: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/tutorial/tutorial.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTutorialEngine } from './hooks/use-tutorial-engine';
+import { TutorialStep } from './tutorial-step';
+import './tutorial.css';
+export const Tutorial = () => {
+    const engine = useTutorialEngine();
+    return (_jsxs("div", { children: [_jsx("div", { className: "fixed inset-0 z-[9999]" }), _jsx("div", { className: "absolute top-5 left-5 w-full h-full rounded-lg shadow-[0_0_0_9999px_rgba(0,0,0,0.5)] z-[10000] pointer-events-none", ref: engine.highlighterRef }), _jsx(TutorialStep, { ref: engine.ref, step: engine.currentStep, totalSteps: engine.totalSteps, title: engine.title, description: engine.description, link: engine.link, image: engine.image, onNext: () => engine.moveStep(engine.currentStepRef.current + 1), onClose: engine.onClose })] }));
+};

package/dist/src/components/ui/theme-toggle.js

@@ -2,19 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Moon, Sun } from 'lucide-react';
 import { useThemeStore } from '@/stores/use-theme-store';
 import { cn } from '@/lib/utils';
-import { useEffect } from 'react';
 export const ThemeToggle = () => {
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const toggleTheme = () => {
         setTheme(theme === 'light' ? 'dark' : 'light');
     };
-    useEffect(() => {
-        const url = new URL(window.location.href);
-        const colorScheme = url.searchParams.get('color-scheme');
-        if (colorScheme) {
-            setTheme(colorScheme);
-        }
-    }, [setTheme]);
     return (_jsxs("button", { onClick: toggleTheme, className: "relative flex items-center cursor-pointer w-16 h-8 border bg-muted-foreground/10 rounded-full p-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "aria-label": `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, children: [_jsx("div", { className: cn('absolute w-6 h-6 bg-background border border-border rounded-full shadow-sm transition-transform duration-200 ease-in-out', theme === 'dark' ? 'translate-x-8' : 'translate-x-0') }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10", children: _jsx(Sun, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'light' ? 'text-foreground' : 'text-muted-foreground') }) }), _jsx("div", { className: "flex items-center justify-center w-6 h-6 z-10 ml-2", children: _jsx(Moon, { className: cn('h-3.5 w-3.5 transition-colors duration-200', theme === 'dark' ? 'text-foreground' : 'text-muted-foreground') }) })] }));
 };

package/dist/src/publicComponents/base-node/base-node.js

@@ -10,10 +10,12 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
     const [isOpen, setIsOpen] = useState(false);
     const { sourcePosition, targetPosition, toggleTargetPosition, toggleSourcePosition } = useHandlePositions(data);
     const [content, setContent] = useState(null);
+    const [features, setFeatures] = useState([]);
     const fetchContent = useCallback(async () => {
         const response = await fetch(`/step/${data.id}`);
         const responseData = await response.json();
         setContent(responseData.content);
+        setFeatures(responseData.features);
     }, [data.id]);
     useEffect(() => {
         if (data.id && isOpen) {
@@ -24,5 +26,5 @@ export const BaseNode = ({ title, variant, children, disableSourceHandle, disabl
             'bg-muted-foreground/20': isOpen,
         }), children: [_jsx("div", { className: "rounded-lg bg-background border-1 border-muted-foreground/30 border-solid", "data-testid": `node-${title?.toLowerCase().replace(/ /g, '-')}`, children: _jsxs("div", { className: "group relative", children: [_jsx(NodeHeader, { text: title, variant: variant, className: "border-b-2 border-muted-foreground/10", children: _jsx("div", { className: "flex justify-end", children: _jsx(Button, { "data-testid": `open-code-preview-button-${title?.toLowerCase()}`, variant: "ghost", className: "h-5 p-0.5", onClick: () => setIsOpen(true), children: _jsx(ScanSearch, { className: "w-4 h-4" }) }) }) }), subtitle && _jsx("div", { className: "py-4 px-6 text-sm text-muted-foreground", children: subtitle }), children && (_jsx("div", { className: "p-2", children: _jsx("div", { className: cn('space-y-3 p-4 text-sm text-muted-foreground', {
                                     'bg-card': variant !== 'noop',
-                                }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
+                                }), children: children }) })), !disableTargetHandle && (_jsx(BaseHandle, { type: "target", position: targetPosition, onTogglePosition: toggleTargetPosition })), !disableSourceHandle && (_jsx(BaseHandle, { type: "source", position: sourcePosition, onTogglePosition: toggleSourcePosition }))] }) }), content && (_jsx(NodeSidebar, { features: features, content: content, title: title, subtitle: subtitle, variant: variant, language: language, isOpen: isOpen, onClose: () => setIsOpen(false) }))] }));
 };

package/dist/src/publicComponents/base-node/code-display.d.ts

@@ -0,0 +1,9 @@
+import { Feature } from '@/types/file';
+import React from 'react';
+type CodeDisplayProps = {
+    code: string;
+    language?: string;
+    features?: Feature[];
+};
+export declare const CodeDisplay: React.FC<CodeDisplayProps>;
+export {};

package/dist/src/publicComponents/base-node/code-display.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeStore } from '@/stores/use-theme-store';
+import { FeatureCard } from './feature-card';
+import { useRef, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { LanguageIndicator } from './language-indicator';
+const codeTagProps = {
+    style: {
+        fontFamily: 'DM Mono, monospace',
+        fontSize: '16px',
+    },
+};
+const customStyle = {
+    margin: 0,
+    borderRadius: 0,
+    padding: 0,
+};
+const isHighlighted = (lines, lineNumber) => {
+    return lines.some((line) => {
+        const [start, end] = line.split('-').map((num) => parseInt(num, 10));
+        if (end !== undefined) {
+            return lineNumber >= start && lineNumber <= end;
+        }
+        return lineNumber == start;
+    });
+};
+const getFirstLineNumber = (line) => {
+    const [start] = line.split('-').map((num) => parseInt(num, 10));
+    return start;
+};
+export const CodeDisplay = ({ code, language, features }) => {
+    const theme = useThemeStore((state) => state.theme);
+    const themeStyle = theme === 'dark' ? dracula : oneLight;
+    const [highlightedLines, setHighlightedLines] = useState([]);
+    const [selectedFeature, setSelectedFeature] = useState(null);
+    const ref = useRef(null);
+    const handleFeatureClick = (feature) => {
+        setSelectedFeature(feature);
+        setHighlightedLines(feature.lines);
+        const lineNumber = getFirstLineNumber(feature.lines[0]);
+        const line = ref.current?.querySelector(`[data-line-number="${lineNumber}"]`);
+        if (line) {
+            line.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [_jsxs("div", { className: "flex items-center py-2 px-5 dark:bg-[#1e1e1e] gap-2 justify-center", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "Read only" }), _jsx("div", { className: "flex-1" }), _jsx(LanguageIndicator, { language: language, className: "w-4 h-4", size: 16, showLabel: true })] }), _jsxs("div", { className: "flex flex-row h-[calc(100%-36px)]", children: [features && features.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 p-2 bg-card overflow-y-auto min-w-[200px] w-[300px]", children: features.map((feature, index) => (_jsx(FeatureCard, { feature: feature, highlighted: selectedFeature === feature, onClick: () => handleFeatureClick(feature), onHover: () => handleFeatureClick(feature) }, index))) })), _jsx("div", { className: "overflow-y-auto", ref: ref, children: _jsx(SyntaxHighlighter, { showLineNumbers: true, language: language, style: themeStyle, codeTagProps: codeTagProps, customStyle: customStyle, wrapLines: true, lineProps: (lineNumber) => {
+                                if (isHighlighted(highlightedLines, lineNumber)) {
+                                    return {
+                                        'data-line-number': lineNumber,
+                                        style: {
+                                            borderLeft: '2px solid var(--accent-1000)',
+                                            backgroundColor: 'rgb(from var(--accent-1000) r g b / 0.2)',
+                                        },
+                                    };
+                                }
+                                return {
+                                    'data-line-number': lineNumber,
+                                    style: {
+                                        borderLeft: '2px solid transparent',
+                                    },
+                                };
+                            }, children: code }) })] })] }));
+};

package/dist/src/publicComponents/base-node/feature-card.d.ts

@@ -0,0 +1,9 @@
+import { Feature } from '@/types/file';
+type Props = {
+    feature: Feature;
+    highlighted: boolean;
+    onClick: () => void;
+    onHover: () => void;
+};
+export declare const FeatureCard: React.FC<Props>;
+export {};

package/dist/src/publicComponents/base-node/feature-card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+export const FeatureCard = ({ feature, highlighted, onClick, onHover }) => {
+    return (_jsxs("div", { "data-feature-id": feature.id, className: cn('p-4 rounded-lg bg-card shadow-sm cursor-pointer hover:bg-card/50 border-2 border-transparent', highlighted && 'border-2 border-accent-1000 bg-accent-100'), onClick: onClick, onMouseEnter: onHover, children: [_jsx("div", { className: "text-md font-semibold text-foreground leading-tight whitespace-nowrap mb-2", children: feature.title }), _jsx("div", { className: "text-sm font-medium text-muted-foreground leading-tight", children: feature.description }), feature.link && (_jsx("div", { className: "text-sm font-medium text-muted-foreground leading-tight", children: _jsx("a", { href: feature.link, children: "Learn more" }) }))] }));
+};

package/dist/src/publicComponents/base-node/node-sidebar.d.ts

@@ -1,6 +1,8 @@
+import { Feature } from '@/types/file';
 import React from 'react';
 type NodeSidebarProps = {
     content: string;
+    features: Feature[];
     title: string;
     subtitle?: string;
     variant: 'event' | 'api' | 'noop' | 'cron';

package/dist/src/publicComponents/base-node/node-sidebar.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JsonEditor } from '@/components/endpoints/json-editor';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Sidebar } from '@/components/sidebar/sidebar';
 import { X } from 'lucide-react';
-import { LanguageIndicator } from './language-indicator';
-export const NodeSidebar = ({ content, title, subtitle, language, isOpen, onClose }) => {
+import { CodeDisplay } from './code-display';
+export const NodeSidebar = ({ content, title, subtitle, language, isOpen, onClose, features, }) => {
     if (!isOpen)
         return null;
-    return (_jsxs(Sidebar, { title: title, subtitle: subtitle, initialWidth: 600, contentClassName: "p-0 h-full gap-0", onClose: onClose, actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }], children: [_jsxs("div", { className: "flex items-center py-2 px-5 dark:bg-[#1e1e1e] gap-2 justify-center", children: [_jsx("div", { className: "text-sm text-muted-foreground", children: "Read only" }), _jsx("div", { className: "flex-1" }), _jsx(LanguageIndicator, { language: language, className: "w-4 h-4", size: 16, showLabel: true })] }), _jsx(JsonEditor, { value: content, language: language, height: 'calc(100vh - 160px)', readOnly: true })] }));
+    return (_jsx(Sidebar, { title: title, subtitle: subtitle, initialWidth: 900, contentClassName: "p-0 h-full gap-0", onClose: onClose, actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }], children: _jsx(CodeDisplay, { code: content, language: language, features: features }) }));
 };

package/dist/src/stores/use-flow-store.d.ts

@@ -4,17 +4,15 @@ type UseFlowStore = {
     flows: string[];
     setFlows: (flows: string[]) => void;
 };
-export declare const useFlowStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseFlowStore>, "setState" | "persist"> & {
-    setState(partial: UseFlowStore | Partial<UseFlowStore> | ((state: UseFlowStore) => UseFlowStore | Partial<UseFlowStore>), replace?: false | undefined): unknown;
-    setState(state: UseFlowStore | ((state: UseFlowStore) => UseFlowStore), replace: true): unknown;
+export declare const useFlowStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseFlowStore>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore, unknown>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: UseFlowStore) => void) => () => void;
         onFinishHydration: (fn: (state: UseFlowStore) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore, unknown>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseFlowStore, UseFlowStore>>;
     };
 }>;
 export {};

package/dist/src/stores/use-global-store.d.ts

@@ -10,17 +10,15 @@ type UseGlobalStore = {
     selectedLogId?: string;
     selectLogId: (logId?: string) => void;
 };
-export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseGlobalStore>, "setState" | "persist"> & {
-    setState(partial: UseGlobalStore | Partial<UseGlobalStore> | ((state: UseGlobalStore) => UseGlobalStore | Partial<UseGlobalStore>), replace?: false | undefined): unknown;
-    setState(state: UseGlobalStore | ((state: UseGlobalStore) => UseGlobalStore), replace: true): unknown;
+export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseGlobalStore>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore, unknown>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: UseGlobalStore) => void) => () => void;
         onFinishHydration: (fn: (state: UseGlobalStore) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore, unknown>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<UseGlobalStore, UseGlobalStore>>;
     };
 }>;
 export {};

package/dist/src/stores/use-tabs-store.d.ts

@@ -3,17 +3,15 @@ interface TabsState {
     setTopTab: (tab: string) => void;
     setBottomTab: (tab: string) => void;
 }
-export declare const useTabsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TabsState>, "setState" | "persist"> & {
-    setState(partial: TabsState | Partial<TabsState> | ((state: TabsState) => TabsState | Partial<TabsState>), replace?: false | undefined): unknown;
-    setState(state: TabsState | ((state: TabsState) => TabsState), replace: true): unknown;
+export declare const useTabsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TabsState>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState, unknown>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: TabsState) => void) => () => void;
         onFinishHydration: (fn: (state: TabsState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState, unknown>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TabsState, TabsState>>;
     };
 }>;
 export {};

package/dist/src/stores/use-theme-store.d.ts

@@ -1,18 +1,17 @@
-export type Theme = 'dark' | 'light' | 'system';
+type Theme = 'dark' | 'light' | 'system';
 export type ThemeState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
 };
-export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "setState" | "persist"> & {
-    setState(partial: ThemeState | Partial<ThemeState> | ((state: ThemeState) => ThemeState | Partial<ThemeState>), replace?: false | undefined): unknown;
-    setState(state: ThemeState | ((state: ThemeState) => ThemeState), replace: true): unknown;
+export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void> | void;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: ThemeState) => void) => () => void;
         onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
     };
 }>;
+export {};

package/dist/src/types/file.d.ts

@@ -0,0 +1,7 @@
+export type Feature = {
+    id?: string;
+    title: string;
+    description: string;
+    lines: string[];
+    link?: string;
+};

package/dist/src/types/file.js

@@ -0,0 +1 @@
+export {};