@motiadev/workbench 0.6.0-beta.120 → 0.6.0-beta.122

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

@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from 'react';
+import { MotiaTutorial } from '../engine/tutorial-engine';
+import { waitForElementByXPath } from './tutorial-utils';
+export const useTutorialEngine = () => {
+    const ref = useRef(null);
+    const highlighterRef = useRef(null);
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState(undefined);
+    const [image, setImage] = useState(undefined);
+    const [link, setLink] = useState(undefined);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [totalSteps, setTotalSteps] = useState(MotiaTutorial.steps.length);
+    const manualOpenRef = useRef(false);
+    const loading = useRef(false);
+    const currentStepRef = useRef(0);
+    const moveComponent = (x, y) => {
+        if (ref.current) {
+            ref.current.style.position = 'absolute';
+            ref.current.style.left = `${x}px`;
+            ref.current.style.top = `${y}px`;
+        }
+    };
+    const moveStep = async (stepNumber) => {
+        const container = ref.current;
+        if (container && !loading.current) {
+            if (stepNumber >= MotiaTutorial.steps.length) {
+                onClose();
+                return;
+            }
+            if (container.parentElement) {
+                container.style.transition = 'all 0.3s ease-in-out';
+                container.parentElement.style.opacity = '1';
+                container.parentElement.style.display = 'block';
+            }
+            loading.current = true;
+            currentStepRef.current = stepNumber;
+            const step = MotiaTutorial.steps[stepNumber];
+            // Run any before actions
+            if (step.before) {
+                for (const action of step.before) {
+                    if (action.type === 'click') {
+                        const element = await waitForElementByXPath(action.selector, action.optional);
+                        if (element) {
+                            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            element.click();
+                            element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 }));
+                        }
+                    }
+                    else if (action.type === 'fill-editor' && monaco) {
+                        monaco.editor?.getEditors?.()?.[0]?.setValue(JSON.stringify(action.content, null, 2));
+                    }
+                }
+            }
+            setCurrentStep(stepNumber + 1);
+            setTitle(step.title);
+            setDescription(await step.description());
+            setImage(step.image);
+            setLink(step.link);
+            setTimeout(async () => {
+                const { height, width } = container.getBoundingClientRect();
+                if (step.elementXpath) {
+                    const targetElement = await waitForElementByXPath(step.elementXpath);
+                    if (!targetElement) {
+                        console.warn(`Element not found after maximum attempts: ${step.elementXpath}`);
+                        loading.current = false;
+                        return;
+                    }
+                    if (targetElement && highlighterRef.current) {
+                        const { top, left, width, height } = targetElement.getBoundingClientRect();
+                        highlighterRef.current.style.top = `${top - 0}px`;
+                        highlighterRef.current.style.left = `${left - 0}px`;
+                        highlighterRef.current.style.width = `${width + 0}px`;
+                        highlighterRef.current.style.height = `${height + 0}px`;
+                    }
+                    // Position tutorial relative to target element
+                    if (targetElement) {
+                        const targetRect = targetElement.getBoundingClientRect();
+                        const spaceBelow = window.innerHeight - targetRect.bottom;
+                        const spaceAbove = targetRect.top;
+                        const spaceRight = window.innerWidth - targetRect.right;
+                        const spaceLeft = targetRect.left;
+                        // Helper function to adjust horizontal position within viewport bounds
+                        const adjustHorizontalPosition = (x) => {
+                            // this is important to avoid the tutorial from overflowing at far left or right
+                            return Math.max(20, Math.min(x, window.innerWidth - width - 20));
+                        };
+                        // Try to position below first
+                        if (spaceBelow >= height + 20) {
+                            const x = targetRect.left + targetRect.width / 2 - width / 2;
+                            moveComponent(adjustHorizontalPosition(x), targetRect.bottom + 20);
+                        }
+                        // Try above if not enough space below
+                        else if (spaceAbove >= height + 20) {
+                            const x = targetRect.left + targetRect.width / 2 - width / 2;
+                            moveComponent(adjustHorizontalPosition(x), targetRect.top - height - 20);
+                        }
+                        // Try right side
+                        else if (spaceRight >= width + 20) {
+                            moveComponent(targetRect.right + 20, targetRect.top + targetRect.height / 2 - height / 2);
+                        }
+                        // Try left side
+                        else if (spaceLeft >= width + 20) {
+                            moveComponent(targetRect.left - width - 20, targetRect.top + targetRect.height / 2 - height / 2);
+                        }
+                    }
+                }
+                else {
+                    if (highlighterRef.current) {
+                        highlighterRef.current.style.top = '50%';
+                        highlighterRef.current.style.left = '50%';
+                        highlighterRef.current.style.width = '1px';
+                        highlighterRef.current.style.height = '1px';
+                    }
+                    // Fallback to center of screen
+                    moveComponent(window.innerWidth / 2 - width / 2, window.innerHeight / 2 - height / 2);
+                }
+            }, 1);
+            loading.current = false;
+        }
+    };
+    const onClose = () => {
+        if (ref.current?.parentElement) {
+            ref.current.parentElement.style.transition = 'opacity 0.3s ease-out';
+            ref.current.parentElement.style.opacity = '0';
+            localStorage.setItem('motia-tutorial-closed', 'true');
+            setTimeout(() => {
+                if (ref.current?.parentElement) {
+                    ref.current.parentElement.style.display = 'none';
+                }
+            }, 300);
+        }
+    };
+    useEffect(() => {
+        importFile('tutorial.tsx').then((module) => {
+            if (Array.isArray(module.steps) && module.steps.length > 0) {
+                MotiaTutorial.register(module.steps);
+            }
+        });
+    }, []);
+    useEffect(() => {
+        const container = ref.current;
+        if (container?.parentElement) {
+            container.parentElement.style.display = 'none';
+        }
+        const onOpen = () => {
+            if (container?.parentElement) {
+                setTotalSteps(MotiaTutorial.steps.length);
+                moveStep(0);
+            }
+        };
+        MotiaTutorial.onOpen(() => {
+            manualOpenRef.current = true;
+            onOpen();
+        });
+        MotiaTutorial.onStepsRegistered(() => {
+            if (localStorage.getItem('motia-tutorial-closed') !== 'true') {
+                manualOpenRef.current = false;
+                onOpen();
+            }
+        });
+    }, []);
+    return {
+        ref,
+        highlighterRef,
+        title,
+        description,
+        image,
+        link,
+        currentStep,
+        totalSteps,
+        onClose,
+        moveStep,
+        currentStepRef,
+        manualOpenRef,
+    };
+};

package/dist/src/components/tutorial/hooks/use-tutorial.d.ts

@@ -0,0 +1,5 @@
+import { TutorialStep } from '../engine/tutorial-types';
+export declare const useTutorial: () => {
+    open: () => void;
+    steps: TutorialStep[];
+};

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,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analytics } from '@/lib/analytics';
+import { Button } from '@motiadev/ui';
+import { Book } from 'lucide-react';
+import { Tooltip } from '../ui/tooltip';
+import { useTutorial } from './hooks/use-tutorial';
+export const TutorialButton = () => {
+    const { open, steps } = useTutorial();
+    const isTutorialFlowMissing = steps.length === 0;
+    const onTutorialButtonClick = () => {
+        if (!isTutorialFlowMissing) {
+            open();
+        }
+        analytics.track('tutorial_button_clicked', { 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.css

@@ -0,0 +1,208 @@
+@import '@motiadev/ui/styles.css';
+@import '@motiadev/ui/globals.css';
+@import 'tw-animate-css';
+
+:root {
+  --tutorial-text-color: var(--dark-800);
+  --tutorial-border: var(--light-1000);
+  --tutorial-code-bg: rgb(24, 24, 24, 0.1);
+  --tutorial-code-text: var(--text-body);
+}
+
+.dark {
+  --tutorial-border: rgb(65, 65, 65);
+  --tutorial-text-color: var(--light-800);
+  --tutorial-code-bg: rgb(24, 24, 24, 0.4);
+  --tutorial-code-text: var(--light-1000);
+}
+
+.driver-popover {
+  z-index: 10000;
+  width: 400px;
+  max-width: 100%;
+  background-color: var(--background);
+  padding: 0;
+  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow);
+  display: flex;
+  flex-flow: column;
+  border: 1px solid var(--tutorial-border);
+  border-radius: 16px;
+}
+
+.driver-popover-image {
+  border-radius: 16px 16px 0 0;
+}
+
+.driver-popover-intro-step {
+  max-width: 400px;
+}
+
+.popover-title {
+  font-size: 18px;
+  font-weight: 700;
+  font-weight: var(--font-weight-600);
+  line-height: 1.2;
+  color: var(--text-header);
+  font-family: var(--default-font-family);
+}
+
+.driver-popover-description * {
+  line-height: 1.25;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--default-font-family);
+}
+
+.driver-popover-title {
+  padding: 16px 16px 0 16px;
+  
+}
+
+.driver-popover-description {
+  padding: 16px;
+
+  :not(b) {
+    color: var(--tutorial-text-color);
+  }
+
+  b {
+    font-weight: 800;
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-left: 24px;
+
+    &.no-decoration {
+      list-style-type: none;
+    }
+    &.square-decoration {
+      list-style-type: square;
+      padding-left: 4px;
+    }
+    &.double-indented {
+      margin-left: calc(var(--spacing) * 4);
+    }
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.driver-popover-progress-text {
+  color: var(--text-placeholder);
+}
+
+.tutorial-opt-out-container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  padding: 16px;
+}
+
+.tutorial-opt-out-button {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--default-font-family);
+  background: transparent;
+  border: none;
+  color: var(--text-body);
+  text-shadow: none;
+  cursor: pointer;
+}
+
+.driver-popover-navigation-btns {
+  position: relative;
+  flex-grow: 0;
+}
+
+.driver-popover-navigation-btns:hover:before {
+  content: 'Use arrow keys to navigate';
+  position: absolute;
+  color: white;
+  top: -20px;
+  right: 0;
+  text-align: right;
+  width: 180%;
+  height: 100%;
+
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--default-font-family);
+  color: var(--text-body);
+}
+
+.driver-popover-navigation-btns button {
+  cursor: pointer;
+  border-radius: 999px;
+  color: white;
+  font-family: var(--default-font-family);
+  border: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 125%;
+  letter-spacing: -0.25px;
+  text-shadow: none;
+  position: relative;
+}
+
+.driver-popover-btn-disabled {
+  display: none;
+}
+
+.driver-popover-next-btn, .driver-popover-next-btn:hover {
+  background-color: var(--accent-1000);
+  color: white;
+  padding: 16px 32px;
+}
+
+.driver-popover-footer {
+  padding: 16px;
+}
+
+.driver-popover-arrow {
+  border-width: 8px;
+}
+
+.driver-popover-arrow-side-top {
+  margin-top: 1px;
+  border-top-color: var(--tutorial-border);
+}
+
+.driver-popover-arrow-side-bottom {
+  margin-bottom: 1px;
+  border-bottom-color: var(--tutorial-border);
+}
+
+.driver-popover-arrow-side-left {
+  margin-left: 1px;
+  border-left-color: var(--tutorial-border);
+}
+
+.driver-popover-arrow-side-right {
+  margin-right: 1px;
+  border-right-color: var(--tutorial-border);
+}
+
+.code-preview {
+  overflow-x: auto;
+  background: var(--tutorial-code-bg);
+  padding: 16px;
+  border-radius: 8px;
+  
+  code {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--tutorial-code-text);
+    font-family: var(--font-dm-mono);
+  }
+}
+
+.driver-popover-close-btn {
+  display: none;
+}

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,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { analytics } from '@/lib/analytics';
+import { useTutorialEngine } from './hooks/use-tutorial-engine';
+import { TutorialStep } from './tutorial-step';
+import './tutorial.css';
+export const Tutorial = () => {
+    const engine = useTutorialEngine();
+    const onNext = () => {
+        const currentStep = engine.currentStepRef.current;
+        const nextStep = currentStep + 1;
+        engine.moveStep(nextStep);
+        if (engine.currentStep === engine.totalSteps) {
+            analytics.track('tutorial_completed', {
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+        else {
+            analytics.track('tutorial_next_step', {
+                step: nextStep,
+                manualOpen: engine.manualOpenRef.current,
+            });
+        }
+    };
+    const onClose = () => {
+        analytics.track('tutorial_closed', {
+            step: engine.currentStepRef.current,
+            manualOpen: engine.manualOpenRef.current,
+        });
+        engine.onClose();
+    };
+    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: onNext, onClose: onClose })] }));
+};

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

@@ -2,11 +2,19 @@ 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,10 @@
+import { Feature } from '@/types/file';
+import React from 'react';
+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 }) }));
 };