@sampleapp.ai/sdk 1.0.36 → 1.0.37

package/dist/index.js

@@ -16,7 +16,7 @@ export { ChatButton, ModalSearchAndChat, ChatBar, TailwindExample, SandboxHome }
 // Export Sandbox component and types
 export { Sandbox } from "./components/sandbox";
 // Export Guardian components (now nested under sandbox)
-export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, createSandboxUrlConfigs, } from "./components/sandbox/guardian";
+export { GuardianPlayground, GuardianComponent, GuardianProvider, VmProvider, buildGuardianConfig, } from "./components/sandbox/guardian";
 // Export themes
 export { themes, getTheme, DEFAULT_THEME } from "./themes";
 // SDK class for loadScript programmatic usage

package/dist/lib/api-client.js

@@ -72,8 +72,7 @@ class ApiClient {
             getByPlayground: async (playgroundUid, skip = 0, limit = 100) => {
                 return this.request(["sandbox-content", "playground", playgroundUid, "public"], {
                     method: "GET",
-                }, false, // Public endpoint, no API key required
-                { skip, limit });
+                }, { skip, limit });
             },
         };
         /**
@@ -88,7 +87,6 @@ class ApiClient {
              *
              * @param request - The start sandbox request (env and chatUid)
              * @returns The sandbox response with container URL
-             * @throws Error if apiKey is not set in client config
              *
              * @example
              * ```typescript
@@ -100,9 +98,6 @@ class ApiClient {
              * ```
              */
             startSandbox: async (request) => {
-                if (!this.apiKey) {
-                    throw new Error("API key is required. Set apiKey in ApiClientConfig when creating the client.");
-                }
                 return this.request(["sdk", "start-sandbox"], {
                     method: "POST",
                     body: JSON.stringify(request),
@@ -116,12 +111,8 @@ class ApiClient {
              *
              * @param sandboxId - The sandbox content UID
              * @returns Promise that resolves when download is initiated
-             * @throws Error if apiKey is not set in client config
              */
             downloadCode: async (sandboxId) => {
-                if (!this.apiKey) {
-                    throw new Error("API key is required. Set apiKey in ApiClientConfig when creating the client.");
-                }
                 const url = `${this.baseUrl}/api/v1/sdk/download-code?sandbox_id=${encodeURIComponent(sandboxId)}`;
                 // Make authenticated fetch request with Authorization header
                 const response = await fetch(url, {
@@ -155,7 +146,6 @@ class ApiClient {
              *
              * @param request - The start VM request with url, optional mode, and optional resolution
              * @returns The sandbox response with sandboxId and vncUrl (if mode=json)
-             * @throws Error if apiKey is not set in client config
              *
              * @example
              * ```typescript
@@ -168,9 +158,6 @@ class ApiClient {
              * ```
              */
             startVm: async (request) => {
-                if (!this.apiKey) {
-                    throw new Error("API key is required. Set apiKey in ApiClientConfig when creating the client.");
-                }
                 const queryParams = {
                     url: request.url,
                     mode: request.mode || "json",
@@ -184,19 +171,21 @@ class ApiClient {
                 }
                 return this.request(["sdk", "start-vm"], {
                     method: "GET",
-                }, false, // API key is sent as Bearer token in Authorization header
-                queryParams);
+                }, queryParams);
             },
         };
+        if (!config.apiKey || config.apiKey.trim() === "") {
+            throw new Error("apiKey is required when creating ApiClient");
+        }
         const defaultBaseUrl = getBaseUrl();
         this.baseUrl = defaultBaseUrl.replace(/\/$/, ""); // Remove trailing slash
         this.apiKey = config.apiKey;
     }
     /**
      * Makes a request to the API
-     * Automatically includes Authorization: Bearer {apiKey} header if apiKey is set in config
+     * Automatically includes Authorization: Bearer {apiKey} header
      */
-    async request(endpoint, options = {}, useApiKeyHeader = false, queryParams) {
+    async request(endpoint, options = {}, queryParams) {
         let url = `${this.baseUrl}/api/v1/${endpoint.join("/")}`;
         if (queryParams) {
             const params = new URLSearchParams();
@@ -212,14 +201,8 @@ class ApiClient {
             }
         }
         const headers = Object.assign({ "Content-Type": "application/json" }, options.headers);
-        if (this.apiKey) {
-            if (useApiKeyHeader) {
-                headers["x-api-key"] = this.apiKey;
-            }
-            else {
-                headers["Authorization"] = `Bearer ${this.apiKey}`;
-            }
-        }
+        // Always add Bearer token
+        headers["Authorization"] = `Bearer ${this.apiKey}`;
         const response = await fetch(url, Object.assign(Object.assign({}, options), { headers }));
         if (!response.ok) {
             const errorText = await response.text();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sampleapp.ai/sdk",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "type": "module",
   "description": "TypeScript SDK for your components",
   "main": "./dist/index.umd.js",

package/dist/components/guardian/app-layout-no-sidebar.js

@@ -1,8 +0,0 @@
-import React from "react";
-import { cn } from "../../lib/utils";
-export default function AppLayoutNoSidebar({ header, hasBodyPadding = true, children, bodyHeight = "h-[calc(100vh-6rem)]", }) {
-    return (React.createElement("div", null,
-        header && (React.createElement("header", { className: "flex h-24 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 w-full" },
-            React.createElement("div", { className: "flex items-center gap-2 px-4 w-full" }, header))),
-        React.createElement("div", { className: cn("flex flex-1 flex-col pt-0", hasBodyPadding && "gap-4 p-4", bodyHeight) }, children)));
-}

package/dist/components/guardian/ask-ai-view.js

@@ -1,249 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
-import { useChat } from "@ai-sdk/react";
-import { cn } from "../../lib/utils";
-import { Markdown } from "./ui/markdown";
-import { zipPathToCodebase } from "./zip-to-codebase";
-// Loading animation component - matching mcp-chat-view exactly
-function MessageLoading() {
-    return (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: "text-foreground" },
-        React.createElement("circle", { cx: "4", cy: "12", r: "2", fill: "currentColor" },
-            React.createElement("animate", { id: "spinner_qFRN", begin: "0;spinner_OcgL.end+0.25s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" })),
-        React.createElement("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" },
-            React.createElement("animate", { begin: "spinner_qFRN.begin+0.1s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" })),
-        React.createElement("circle", { cx: "20", cy: "12", r: "2", fill: "currentColor" },
-            React.createElement("animate", { id: "spinner_OcgL", begin: "spinner_qFRN.begin+0.2s", attributeName: "cy", calcMode: "spline", dur: "0.6s", values: "12;6;12", keySplines: ".33,.66,.66,1;.33,0,.66,.33" }))));
-}
-export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
-    const [input, setInput] = useState("");
-    const messagesEndRef = useRef(null);
-    // Track current message ID from stream
-    const currentMessageIdRef = useRef(null);
-    const [generatedCode, setGeneratedCode] = useState(null);
-    useEffect(() => {
-        zipPathToCodebase(codeZipFile).then((generatedCode) => {
-            setGeneratedCode(generatedCode);
-        });
-    }, [codeZipFile]);
-    // Custom fetch to intercept stream and process events (matching mcp-chat-view pattern)
-    const customFetch = useCallback(async (input, init) => {
-        const response = await fetch(input, init);
-        if (!response.body)
-            return response;
-        // Create a new readable stream that processes the original stream
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = "";
-        const stream = new ReadableStream({
-            async start(controller) {
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) {
-                        // Process any remaining buffer
-                        if (buffer.trim()) {
-                            controller.enqueue(new TextEncoder().encode(buffer));
-                        }
-                        controller.close();
-                        break;
-                    }
-                    buffer += decoder.decode(value, { stream: true });
-                    const lines = buffer.split("\n");
-                    // Keep the last incomplete line in buffer
-                    buffer = lines.pop() || "";
-                    for (const line of lines) {
-                        if (line.trim() === "")
-                            continue;
-                        if (line.startsWith("data: ")) {
-                            const dataStr = line.slice(6).trim();
-                            if (dataStr === "[DONE]") {
-                                controller.enqueue(new TextEncoder().encode(`data: ${dataStr}\n\n`));
-                                continue;
-                            }
-                            try {
-                                const data = JSON.parse(dataStr);
-                                const dataType = data.type;
-                                // Track message ID from start event
-                                if (dataType === "start" && data.messageId) {
-                                    currentMessageIdRef.current = data.messageId;
-                                }
-                            }
-                            catch (_a) {
-                                // Not JSON, pass through
-                            }
-                        }
-                        // Pass through the original line
-                        controller.enqueue(new TextEncoder().encode(line + "\n"));
-                    }
-                }
-            },
-        });
-        return new Response(stream, {
-            headers: response.headers,
-            status: response.status,
-            statusText: response.statusText,
-        });
-    }, []);
-    const initialMessages = [
-        {
-            id: "welcome",
-            role: "assistant",
-            content: "Hi! Ask me anything about feature flags or this demo. Try: 'How do I enable the sample-feature for beta users?'",
-            parts: [
-                {
-                    type: "text",
-                    text: "Hi! Ask me anything about feature flags or this demo. Try: 'How do I enable the sample-feature for beta users?'",
-                },
-            ],
-        },
-    ];
-    // const {messages, sendMessage, status, setMessages} = useChat({
-    const { messages, sendMessage, status } = useChat({
-        // @ts-expect-error - api property exists in ChatInit but types may not be properly inferred
-        api: "/api/chat",
-        fetch: customFetch,
-        initialMessages,
-    });
-    // Auto-scroll to bottom when new messages arrive
-    useEffect(() => {
-        var _a;
-        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-    }, [messages]);
-    // Format generatedCode into a readable string for the system prompt, skipping any .env files
-    const codebaseContext = useMemo(() => {
-        if (!generatedCode || Object.keys(generatedCode).length === 0) {
-            return "";
-        }
-        const codebaseLines = [];
-        codebaseLines.push("Here is the codebase context:\n");
-        // Sort files by path for consistent ordering
-        const sortedFiles = Object.entries(generatedCode)
-            .filter(([filePath]) => !filePath.endsWith(".env")) // skip .env files
-            .sort(([a], [b]) => a.localeCompare(b));
-        for (const [filePath, codeOutput] of sortedFiles) {
-            codebaseLines.push(`\nFile: ${filePath}`);
-            if (codeOutput.code_language) {
-                codebaseLines.push(`Language: ${codeOutput.code_language}`);
-            }
-            if (codeOutput.full_code) {
-                codebaseLines.push("Code:");
-                codebaseLines.push("```");
-                codebaseLines.push(codeOutput.full_code);
-                codebaseLines.push("```");
-            }
-            codebaseLines.push(""); // Empty line between files
-        }
-        return codebaseLines.join("\n");
-    }, [generatedCode]);
-    const handleSend = () => {
-        const trimmed = input.trim();
-        if (!trimmed || status === "submitted" || status === "streaming")
-            return;
-        // Build system prompt with codebase context
-        const baseSystemPrompt = `You are a helpful AI assistant. You help users understand the codebase and the project and how things are being used, specifically focused on the ${playgroundUid} or related APIs and SDKs and why they are designed in a certain way.
-
-    Response style:
-    - VERY VERY IMPORTANT: Be concise, like 50% of the usual response length.
-    - Be concise: Answer directly without unnecessary preamble or repetition
-    - Use code examples when they clarify better than words
-    - For complex topics, break down into key points rather than lengthy prose
-    - Prioritize relevance over completeness`;
-        const systemPrompt = codebaseContext
-            ? `${baseSystemPrompt}\n\n${codebaseContext}\n\nWhen answering questions, you can reference the codebase above to provide accurate and context-aware responses.`
-            : baseSystemPrompt;
-        // Send message without mcpUrl to use simple AI chat
-        // Include system prompt with codebase context
-        sendMessage({ text: trimmed }, {
-            body: {
-                system: systemPrompt,
-                model: "Claude Haiku 4.5",
-            },
-        });
-        setInput("");
-    };
-    const isLoading = status === "submitted" || status === "streaming";
-    // Filter out system messages (only show user and assistant)
-    const visibleMessages = messages.filter((m) => m.role === "user" || m.role === "assistant");
-    // const handleClearChat = () => {
-    //   // Clear all messages and reset to initial state
-    //   // Use the initialMessages directly since they now match the UIMessage structure
-    //   setMessages(initialMessages as unknown as typeof messages);
-    //   setInput("");
-    // };
-    return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" },
-        React.createElement("div", { className: "flex-1 overflow-y-auto min-w-0 w-full px-4 py-4" },
-            visibleMessages.length > 0 ? (React.createElement("div", { className: "space-y-4 max-w-4xl mx-auto" },
-                visibleMessages.map((message) => {
-                    return (React.createElement("div", { key: message.id }, message.role === "user" ? (React.createElement(UserMessage, { message: message, themeColor: themeColor })) : (React.createElement(AssistantMessage, { message: message }))));
-                }),
-                status === "submitted" && (React.createElement("div", { className: "flex justify-start" },
-                    React.createElement("div", { className: "flex items-center gap-2 px-2" },
-                        React.createElement(MessageLoading, null),
-                        React.createElement("span", { className: "text-muted-foreground text-sm" }, "Thinking...")))))) : (React.createElement("div", { className: "flex h-full items-center justify-center" },
-                React.createElement("div", { className: "flex flex-col items-start space-y-4 px-4 max-w-4xl" },
-                    React.createElement("div", { className: "text-start" },
-                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-200" }, "Hi! Ask me anything"),
-                        React.createElement("p", { className: "text-muted-foreground text-base" }, "Try: \u201CHow does this sample app work?\u201D"))))),
-            React.createElement("div", { ref: messagesEndRef })),
-        React.createElement("div", { className: "shrink-0 border-t border-gray-800/50 bg-[#0a0b0f]/95 backdrop-blur-sm" },
-            React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4" },
-                React.createElement("div", { className: "flex items-end gap-3 bg-[#1a1b23] rounded-2xl border border-gray-800/50 px-4 py-3 transition-all", style: {
-                        boxShadow: `0 0 0 1px transparent`,
-                    } },
-                    React.createElement("div", { className: "flex-1 min-w-0" },
-                        React.createElement("textarea", { value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
-                                if (e.key === "Enter" && !e.shiftKey) {
-                                    e.preventDefault();
-                                    handleSend();
-                                }
-                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-gray-200 placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
-                                height: "auto",
-                                minHeight: "32px",
-                            }, onInput: (e) => {
-                                const target = e.target;
-                                target.style.height = "auto";
-                                target.style.height = `${Math.min(target.scrollHeight, 160)}px`;
-                            } })),
-                    React.createElement("button", { onClick: handleSend, disabled: isLoading || input.trim().length === 0, className: cn("shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-all", isLoading || input.trim().length === 0
-                            ? "bg-gray-800 text-gray-500 cursor-not-allowed"
-                            : "text-white hover:scale-105 active:scale-95"), style: isLoading || input.trim().length === 0
-                            ? undefined
-                            : {
-                                backgroundColor: themeColor,
-                                boxShadow: `0 10px 25px -10px ${themeColor}4d`,
-                            }, title: "Send message" }, isLoading ? (React.createElement(MessageLoading, null)) : (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-current" },
-                        React.createElement("path", { d: "M22 2L11 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-                        React.createElement("path", { d: "M22 2L15 22L11 13L2 9L22 2Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))))))));
-}
-function UserMessage({ message, themeColor, }) {
-    var _a;
-    return (React.createElement("div", { className: "flex justify-end" },
-        React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-3 text-sm text-white shadow-lg", style: { backgroundColor: themeColor } }, (_a = message.parts) === null || _a === void 0 ? void 0 :
-            _a.map((part, i) => (React.createElement("div", { key: `${message.id}-${i}`, className: "leading-relaxed" }, part.type === "text" && part.text))),
-            (!message.parts || message.parts.length === 0) && message.content && (React.createElement("div", { className: "leading-relaxed" }, message.content)))));
-}
-function AssistantMessage({ message }) {
-    var _a;
-    const getMessageContent = () => {
-        var _a;
-        // First try to get content from parts (custom format)
-        const partsContent = (_a = message.parts) === null || _a === void 0 ? void 0 : _a.filter((part) => part.type === "text").map((part) => part.text).join("");
-        // Fall back to direct content property (useChat format)
-        return partsContent || message.content || "";
-    };
-    const content = getMessageContent();
-    // Only render if there's actual content
-    if (!content || content.trim() === "") {
-        return null;
-    }
-    return (React.createElement("div", { className: "flex justify-start" },
-        React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-3 text-sm bg-muted border border-border" }, (_a = message.parts) === null || _a === void 0 ? void 0 :
-            _a.map((part, i) => {
-                switch (part.type) {
-                    case "text":
-                        return (React.createElement(Markdown, { key: `${message.id}-${i}` }, part.text || ""));
-                    default:
-                        return null;
-                }
-            }),
-            (!message.parts || message.parts.length === 0) && content && (React.createElement(Markdown, null, content)))));
-}

package/dist/components/guardian/code-focus-section.d.ts

@@ -1,41 +0,0 @@
-import React from "react";
-export interface CodeFocusSectionProps {
-    /**
-     * The file path to focus on (e.g., "src/App.jsx")
-     */
-    filePath: string;
-    /**
-     * Optional line range to highlight. If not provided, just focuses on the file.
-     * If only start is provided, highlights from start to end of file.
-     */
-    lineRange?: {
-        start: number;
-        end?: number;
-    };
-    /**
-     * Title for this section
-     */
-    title: string;
-    /**
-     * Description for this section
-     */
-    description?: string;
-    /**
-     * Optional children to render in the section
-     */
-    children?: React.ReactNode;
-    /**
-     * Threshold for intersection observer (0-1, default ~0.66)
-     * When at least this percentage of the element is visible, trigger the code focus
-     */
-    threshold?: number;
-    /**
-     * Hex color (e.g. "#3b82f6") used for the active file accent.
-     */
-    themeColor: string;
-}
-/**
- * Component that focuses on a specific file and line range in the code editor
- * when it comes into view while scrolling, or when the user clicks "View Code".
- */
-export default function CodeFocusSection({ filePath, lineRange, title, description, children, threshold, themeColor, }: CodeFocusSectionProps): React.JSX.Element;

package/dist/components/guardian/code-focus-section.js

@@ -1,174 +0,0 @@
-"use client";
-import React, { useEffect, useMemo, useRef } from "react";
-import { useGuardianContext } from "./context/guardian-context";
-// Helper function to find a node in the file tree by path
-function getTargetNode(fileTree, targetPath) {
-    const parts = targetPath.split("/").filter(Boolean);
-    let current = fileTree;
-    for (const part of parts) {
-        if (!current.children || !current.children[part]) {
-            return null;
-        }
-        current = current.children[part];
-    }
-    return current;
-}
-/**
- * Component that focuses on a specific file and line range in the code editor
- * when it comes into view while scrolling, or when the user clicks "View Code".
- */
-export default function CodeFocusSection({ filePath, lineRange, title, description, children, threshold = 0, themeColor, }) {
-    const sectionRef = useRef(null);
-    const { generatedCode, fileTree, setActiveFilePath, setActiveFileName, setActiveLineNumber, setActiveLineRange, updateCode, setLanguage, filesEdited, activeFilePath, activeLineRange, } = useGuardianContext();
-    // Moves the editor's focus to this file/lines
-    const focusCode = () => {
-        // Get the file code from generatedCode or fileTree
-        // Always search by file_path property first, as that's the source of truth
-        let code = "";
-        let language;
-        let resolvedFilePath;
-        let codeOutput;
-        // First, search through all code outputs to find one matching file_path
-        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === filePath);
-        if (matchingCodeOutput) {
-            codeOutput = matchingCodeOutput;
-            code = codeOutput.full_code;
-            language = codeOutput.code_language;
-            resolvedFilePath = codeOutput.file_path;
-        }
-        else {
-            // Fallback: try to get from generatedCode by key, but still use file_path from the object
-            if (generatedCode[filePath]) {
-                codeOutput = generatedCode[filePath];
-                code = codeOutput.full_code;
-                language = codeOutput.code_language;
-                // Always use the file_path from the code output object as source of truth
-                resolvedFilePath = codeOutput.file_path || filePath;
-            }
-            else {
-                // Fallback to fileTree
-                try {
-                    const targetNode = getTargetNode(fileTree, filePath);
-                    if (targetNode === null || targetNode === void 0 ? void 0 : targetNode.metadata) {
-                        code = targetNode.metadata.full_code || "";
-                        language = targetNode.metadata.code_language;
-                        // Use file_path from metadata if available, otherwise use the provided filePath
-                        resolvedFilePath = targetNode.metadata.file_path || filePath;
-                    }
-                }
-                catch (error) {
-                    console.warn(`Failed to get code for file ${filePath}:`, error);
-                    resolvedFilePath = filePath;
-                }
-            }
-        }
-        // If we still don't have a resolved file path, use the provided filePath
-        if (!resolvedFilePath) {
-            resolvedFilePath = filePath;
-        }
-        // Check if file has been edited - use resolvedFilePath for lookup
-        const editedCode = filesEdited[resolvedFilePath] || filesEdited[filePath];
-        const finalCode = editedCode ? editedCode.full_code : code;
-        if (finalCode) {
-            // Extract filename from path - prefer code_file_name from code output
-            const fileName = (codeOutput === null || codeOutput === void 0 ? void 0 : codeOutput.code_file_name) ||
-                resolvedFilePath.split("/").pop() ||
-                resolvedFilePath;
-            // Set the active file using the resolved file path
-            setActiveFilePath(resolvedFilePath);
-            setActiveFileName(fileName);
-            updateCode(finalCode);
-            // Set language if available
-            if (language) {
-                setLanguage(language);
-            }
-            // Set line number/range if provided
-            if (lineRange) {
-                setActiveLineRange({
-                    start: lineRange.start,
-                    end: lineRange.end,
-                });
-            }
-            else {
-                setActiveLineRange(undefined);
-                setActiveLineNumber(undefined);
-            }
-        }
-    };
-    useEffect(() => {
-        const element = sectionRef.current;
-        if (!element)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                // Trigger when the element enters the middle of the viewport
-                if (entry.isIntersecting) {
-                    focusCode();
-                }
-            });
-        }, {
-            threshold,
-            rootMargin: "-40% 0px -40% 0px", // Trigger when element enters the middle 20% of viewport
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        filePath,
-        lineRange,
-        generatedCode,
-        fileTree,
-        setActiveFilePath,
-        setActiveFileName,
-        setActiveLineNumber,
-        setActiveLineRange,
-        updateCode,
-        setLanguage,
-        filesEdited,
-        threshold,
-    ]);
-    // Get the resolved file path for comparison
-    // This ensures we compare against the actual file_path from the code structure
-    const resolvedFilePathForComparison = useMemo(() => {
-        var _a, _b;
-        // Search by file_path property first (this is the source of truth)
-        const matchingCodeOutput = Object.values(generatedCode).find((output) => output.file_path === filePath);
-        if (matchingCodeOutput) {
-            return matchingCodeOutput.file_path;
-        }
-        // Fallback to key lookup
-        if ((_a = generatedCode[filePath]) === null || _a === void 0 ? void 0 : _a.file_path) {
-            return generatedCode[filePath].file_path;
-        }
-        // Fallback to fileTree
-        try {
-            const targetNode = getTargetNode(fileTree, filePath);
-            if ((_b = targetNode === null || targetNode === void 0 ? void 0 : targetNode.metadata) === null || _b === void 0 ? void 0 : _b.file_path) {
-                return targetNode.metadata.file_path;
-            }
-        }
-        catch (_c) {
-            // Ignore errors
-        }
-        return filePath;
-    }, [filePath, generatedCode, fileTree]);
-    return (React.createElement("div", { ref: sectionRef, className: `relative transition-colors py-6 cursor-pointer`, onClick: focusCode },
-        React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] top-0 border-t border-border" }),
-        React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] bottom-0 border-b border-border" }),
-        (activeFilePath === resolvedFilePathForComparison ||
-            activeFilePath === filePath) &&
-            (activeLineRange
-                ? lineRange &&
-                    activeLineRange.start === lineRange.start &&
-                    activeLineRange.end === lineRange.end
-                : !lineRange) && (React.createElement("div", { className: "absolute left-0 top-0 h-full w-1", style: {
-                backgroundColor: themeColor,
-                marginLeft: "-2rem",
-            } })),
-        React.createElement("div", { className: "flex items-center gap-2" },
-            React.createElement("h3", { className: "text-md font-semibold text-gray-900 dark:text-gray-100" }, title)),
-        description && (React.createElement("p", { className: "text-sm text-gray-400 mt-3" }, description)),
-        children && React.createElement("div", { className: "mt-3" }, children)));
-}