@sampleapp.ai/sdk 1.0.36 → 1.0.38

package/dist/components/guardian/right-view/right-top-down-view.js

@@ -1,289 +0,0 @@
-"use client";
-import React from "react";
-import Browser from "../ide/browser";
-import { Component as AiLoader } from "../ui/ai-loader";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import SimplifiedEditor from "./simplified-editor";
-import PillFileSelector from "./pill-file-selector";
-import { useGuardianContext } from "../context/guardian-context";
-import { useEffect, useMemo, useState } from "react";
-import { zipPathToFileTree } from "../zip-to-filetree";
-import { zipPathToCodebase } from "../zip-to-codebase";
-import { DownloadIcon, Globe, Code2 } from "lucide-react";
-import { useFrameParams } from "../hooks/use-frame-params";
-import { cn } from "../../../lib/utils";
-export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, }) {
-    const { setFileTree, setGeneratedCode } = useGuardianContext();
-    const frameParams = useFrameParams();
-    const [activeTab, setActiveTab] = useState("code");
-    const [networkRequests, setNetworkRequests] = useState([]);
-    // Use frame param override for theme if in frame mode
-    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    const normalizedZipDownloadPath = useMemo(() => {
-        let normalizedPath = completeCodeZipFile;
-        if (normalizedPath.startsWith("/public/")) {
-            normalizedPath = normalizedPath.slice("/public".length);
-        }
-        if (!normalizedPath.startsWith("/")) {
-            normalizedPath = "/" + normalizedPath;
-        }
-        return normalizedPath;
-    }, [completeCodeZipFile]);
-    // Extract only the nested children (actual API calls to external services)
-    const childrenRequests = useMemo(() => {
-        const children = [];
-        for (const request of networkRequests) {
-            if (request.children && request.children.length > 0) {
-                children.push(...request.children);
-            }
-        }
-        return children;
-    }, [networkRequests]);
-    useEffect(() => {
-        let isMounted = true;
-        zipPathToFileTree(completeCodeZipFile)
-            .then((fileTree) => {
-            if (isMounted) {
-                setFileTree(fileTree);
-            }
-        })
-            .catch((error) => {
-            console.error("Failed to load zip file:", error);
-        });
-        zipPathToCodebase(codeZipFile)
-            .then((codebase) => {
-            if (isMounted) {
-                setGeneratedCode(codebase);
-            }
-        })
-            .catch((error) => {
-            console.error("Failed to load codebase:", error);
-        });
-        return () => {
-            isMounted = false;
-        };
-    }, [codeZipFile, completeCodeZipFile, setFileTree, setGeneratedCode]);
-    // Listen for network requests from iframe
-    useEffect(() => {
-        const handleMessage = (event) => {
-            if (event.origin.endsWith("sampleapp.love")) {
-                // Handle network requests
-                if (event.data.type === "NETWORK_REQUEST") {
-                    const request = event.data.request;
-                    setNetworkRequests((prev) => [...prev, request]);
-                }
-                // Handle runtime errors
-                if (event.data.type === "CONTAINER_APP_ERROR") {
-                    console.error("Container app error:", event.data);
-                }
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-        };
-    }, []);
-    // When browser is maximized, render only the browser at full size
-    if (isBrowserMaximized) {
-        return (React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
-            overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
-                React.createElement("div", { className: "text-center" },
-                    React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
-                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
-            overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
-                React.createElement("div", { className: "text-center" },
-                    React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
-                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
-                    React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
-                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" })))))))))));
-    }
-    return (React.createElement("div", { className: "h-full w-full flex flex-col" },
-        React.createElement(PanelGroup, { direction: "vertical", className: "relative h-full" },
-            hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
-                React.createElement(Panel, { defaultSize: 58, minSize: 20, maxSize: 80, order: 1 },
-                    React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
-                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
-                        overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
-                            React.createElement("div", { className: "text-center" },
-                                React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
-                                React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
-                        overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
-                            React.createElement("div", { className: "text-center" },
-                                React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
-                                React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
-                                React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
-                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
-                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
-                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" }))))))))))),
-                React.createElement(PanelResizeHandle, { className: "h-2 relative group flex-shrink-0" },
-                    React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 transition-colors flex justify-center items-center bg-transparent" },
-                        React.createElement("div", { className: "absolute inset-x-0 top-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
-                        React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
-                        React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
-            React.createElement(Panel, { defaultSize: 42, minSize: 20, maxSize: 80, order: 2 },
-                React.createElement("div", { className: "h-full w-full flex flex-col" },
-                    React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950 flex-shrink-0" },
-                        React.createElement("div", { className: "flex" },
-                            React.createElement("button", { type: "button", onClick: () => setActiveTab("code"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "code"
-                                    ? "border-current text-white"
-                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "code"
-                                    ? {
-                                        borderColor: effectiveThemeColor,
-                                        color: effectiveThemeColor,
-                                    }
-                                    : undefined },
-                                React.createElement(Code2, { className: "w-3.5 h-3.5" }),
-                                "Code"),
-                            React.createElement("button", { type: "button", onClick: () => setActiveTab("network"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "network"
-                                    ? "border-current text-white"
-                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "network"
-                                    ? {
-                                        borderColor: effectiveThemeColor,
-                                        color: effectiveThemeColor,
-                                    }
-                                    : undefined },
-                                React.createElement(Globe, { className: "w-3.5 h-3.5" }),
-                                "Network",
-                                childrenRequests.length > 0 && (React.createElement("span", { className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-zinc-700 text-zinc-300" }, childrenRequests.length)))),
-                        activeTab === "network" && childrenRequests.length > 0 && (React.createElement("button", { type: "button", className: "px-2 text-[10px] font-medium text-zinc-500 hover:text-zinc-300 transition-colors", onClick: () => setNetworkRequests([]) }, "Clear"))),
-                    React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" }, activeTab === "code" ? (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
-                            React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
-                            React.createElement("div", { className: "px-2 flex-shrink-0" },
-                                React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: () => {
-                                        window.open(normalizedZipDownloadPath, "_blank");
-                                    } },
-                                    React.createElement(DownloadIcon, { className: "w-4 h-4" }),
-                                    "Download Code"))),
-                        React.createElement("div", { className: "flex-1 min-h-0" },
-                            React.createElement(SimplifiedEditor, { themeColor: effectiveThemeColor })))) : (React.createElement(NetworkRequestsView, { requests: childrenRequests, themeColor: effectiveThemeColor }))))))));
-}
-// Simple Network Requests View Component
-function NetworkRequestsView({ requests, themeColor, }) {
-    var _a, _b, _c, _d;
-    const [selectedRequest, setSelectedRequest] = useState(null);
-    const getMethodColor = (method) => {
-        switch (method.toUpperCase()) {
-            case "GET":
-                return "text-emerald-400";
-            case "POST":
-                return "text-blue-400";
-            case "PUT":
-                return "text-amber-400";
-            case "PATCH":
-                return "text-orange-400";
-            case "DELETE":
-                return "text-red-400";
-            default:
-                return "text-zinc-400";
-        }
-    };
-    const getStatusColor = (status) => {
-        if (!status)
-            return "text-zinc-500";
-        if (status >= 200 && status < 300)
-            return "text-emerald-400";
-        if (status >= 300 && status < 400)
-            return "text-blue-400";
-        if (status >= 400 && status < 500)
-            return "text-amber-400";
-        return "text-red-400";
-    };
-    const formatDuration = (duration) => {
-        if (!duration)
-            return "—";
-        if (duration < 1000)
-            return `${duration}ms`;
-        return `${(duration / 1000).toFixed(2)}s`;
-    };
-    const formatUrl = (url) => {
-        try {
-            const urlObj = new URL(url);
-            return urlObj.pathname + urlObj.search;
-        }
-        catch (_a) {
-            return url;
-        }
-    };
-    const formatBody = (body) => {
-        // Handle string bodies (common from server-side tracking)
-        if (typeof body === "string") {
-            // Handle potentially double-encoded JSON strings
-            let current = body;
-            let iterations = 0;
-            const maxIterations = 3; // Prevent infinite loops
-            while (typeof current === "string" && iterations < maxIterations) {
-                try {
-                    const parsed = JSON.parse(current);
-                    current = parsed;
-                    iterations++;
-                }
-                catch (_a) {
-                    // Not valid JSON, break out
-                    break;
-                }
-            }
-            // If we successfully parsed to a non-string, format it
-            if (typeof current !== "string") {
-                try {
-                    return JSON.stringify(current, null, 2);
-                }
-                catch (_b) {
-                    return String(current);
-                }
-            }
-            // Return the string as-is
-            return current;
-        }
-        // Handle object/array bodies
-        if (body !== null && body !== undefined) {
-            try {
-                return JSON.stringify(body, null, 2);
-            }
-            catch (_c) {
-                return String(body);
-            }
-        }
-        return String(body);
-    };
-    if (requests.length === 0) {
-        return (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-950" },
-            React.createElement("div", { className: "text-center text-zinc-500" },
-                React.createElement(Globe, { className: "w-8 h-8 mx-auto mb-2 opacity-50" }),
-                React.createElement("p", { className: "text-sm" }, "No network requests yet"),
-                React.createElement("p", { className: "text-xs mt-1 opacity-70" }, "Requests will appear here as they happen"))));
-    }
-    return (React.createElement("div", { className: "h-full w-full flex bg-zinc-950" },
-        React.createElement("div", { className: cn("flex-1 overflow-auto border-r border-zinc-800", selectedRequest ? "w-1/2" : "w-full") },
-            React.createElement("div", { className: "divide-y divide-zinc-800/50" }, requests.map((request, index) => {
-                var _a, _b, _c, _d;
-                return (React.createElement("button", { key: request.id || index, type: "button", onClick: () => setSelectedRequest((selectedRequest === null || selectedRequest === void 0 ? void 0 : selectedRequest.id) === request.id ? null : request), className: cn("w-full text-left px-3 py-2 hover:bg-zinc-900 transition-colors", (selectedRequest === null || selectedRequest === void 0 ? void 0 : selectedRequest.id) === request.id && "bg-zinc-900") },
-                    React.createElement("div", { className: "flex items-center gap-2 text-xs" },
-                        React.createElement("span", { className: cn("font-mono font-semibold w-12", getMethodColor(request.method)) }, request.method),
-                        React.createElement("span", { className: cn("font-mono w-10 text-center", getStatusColor((_a = request.responseStatus) !== null && _a !== void 0 ? _a : request.status)) }, (_c = (_b = request.responseStatus) !== null && _b !== void 0 ? _b : request.status) !== null && _c !== void 0 ? _c : "..."),
-                        React.createElement("span", { className: "flex-1 font-mono text-zinc-300 truncate" }, formatUrl(request.url)),
-                        React.createElement("span", { className: "text-zinc-500 font-mono text-[10px]" }, formatDuration((_d = request.duration) !== null && _d !== void 0 ? _d : request.ms)))));
-            }))),
-        selectedRequest && (React.createElement("div", { className: "w-1/2 overflow-auto" },
-            React.createElement("div", { className: "p-3 space-y-3" },
-                React.createElement("div", null,
-                    React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide mb-1", style: { color: themeColor } }, "Request"),
-                    React.createElement("div", { className: "bg-zinc-900 rounded p-2 text-xs font-mono" },
-                        React.createElement("div", { className: "flex items-center gap-2 mb-2" },
-                            React.createElement("span", { className: getMethodColor(selectedRequest.method) }, selectedRequest.method),
-                            React.createElement("span", { className: "text-zinc-300 break-all" }, selectedRequest.url)),
-                        selectedRequest.requestBody !== undefined &&
-                            selectedRequest.requestBody !== null && (React.createElement("pre", { className: "text-[10px] text-zinc-400 overflow-x-auto overflow-y-auto max-h-32 mt-2 pt-2 border-t border-zinc-800 whitespace-pre-wrap break-words" }, formatBody(selectedRequest.requestBody))))),
-                React.createElement("div", null,
-                    React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide mb-1", style: { color: themeColor } }, "Response"),
-                    React.createElement("div", { className: "bg-zinc-900 rounded p-2 text-xs font-mono" },
-                        React.createElement("div", { className: "flex items-center gap-3 mb-2" },
-                            React.createElement("span", { className: getStatusColor((_a = selectedRequest.responseStatus) !== null && _a !== void 0 ? _a : selectedRequest.status) }, (_c = (_b = selectedRequest.responseStatus) !== null && _b !== void 0 ? _b : selectedRequest.status) !== null && _c !== void 0 ? _c : "Pending"),
-                            React.createElement("span", { className: "text-zinc-500" }, formatDuration((_d = selectedRequest.duration) !== null && _d !== void 0 ? _d : selectedRequest.ms))),
-                        selectedRequest.responseBody !== undefined &&
-                            selectedRequest.responseBody !== null && (React.createElement("pre", { className: "text-[10px] text-zinc-400 overflow-x-auto overflow-y-auto max-h-48 mt-2 pt-2 border-t border-zinc-800 whitespace-pre-wrap break-words" }, formatBody(selectedRequest.responseBody))),
-                        selectedRequest.error && (React.createElement("div", { className: "text-red-400 mt-2 pt-2 border-t border-zinc-800" }, selectedRequest.error)))))))));
-}

package/dist/components/guardian/right-view/right-view.js

@@ -1,28 +0,0 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import RightPanelView from "./right-panel-view";
-import RightTopDownView from "./right-top-down-view";
-import PreviewControlBar from "./preview-control-bar";
-export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, completeCodeZipFile, variant = "top-down", themeColor, hasPreview, isGuardian = false, isBrowserMaximized = false, }) {
-    const [isPreviewMinimized, setIsPreviewMinimized] = useState(false);
-    const [reloadCounterState, setReloadCounterState] = useState(reloadCounter);
-    // Sync with external reloadCounter changes
-    useEffect(() => {
-        setReloadCounterState(reloadCounter);
-    }, [reloadCounter]);
-    const handleRefresh = () => {
-        setReloadCounterState((c) => c + 1);
-    };
-    if (variant === "panel") {
-        return (React.createElement(RightPanelView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile }));
-    }
-    else if (variant === "top-down") {
-        return (React.createElement("div", { className: "h-full w-full flex flex-col" },
-            hasPreview && (React.createElement(PreviewControlBar, { isMinimized: isPreviewMinimized, onToggle: () => setIsPreviewMinimized(!isPreviewMinimized), onRefresh: handleRefresh, themeColor: themeColor, externalUrl: browserUrl })),
-            React.createElement("div", { className: "flex-1 min-h-0" },
-                React.createElement(RightTopDownView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, hasPreview: hasPreview, isPreviewMinimized: isPreviewMinimized, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized }))));
-    }
-    else {
-        return null;
-    }
-}

package/dist/components/guardian/right-view/simplified-editor.js

@@ -1,234 +0,0 @@
-"use client";
-import React, { useEffect, useRef } from "react";
-import MonacoEditor from "@monaco-editor/react";
-import { useGuardianContext } from "../context/guardian-context";
-import { CodeLanguage } from "../types/ide-types";
-// import {useTheme} from "next-themes"; // Removed - not available in SDK
-import { useFrameParams } from "../hooks/use-frame-params";
-// Convert a hex color (e.g. "#3b82f6") to an rgba string with the given alpha.
-const hexToRgba = (hex, alpha) => {
-    const normalized = hex.replace("#", "");
-    const bigint = parseInt(normalized.length === 3
-        ? normalized
-            .split("")
-            .map((c) => c + c)
-            .join("")
-        : normalized, 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-export default function SimplifiedEditor({ themeColor }) {
-    const { code, language, activeFileName: fileName, isGeneratingCode: isGenerating, activeLineNumber: contextActiveLineNumber, setActiveLineNumber, activeLineRange: contextActiveLineRange, } = useGuardianContext();
-    // Use dark theme by default (next-themes not available in SDK)
-    const theme = "dark";
-    // Read frame params - these override context when isFrame=true
-    const frameParams = useFrameParams();
-    // Use frame param overrides when in frame mode
-    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
-    // Override line range if frame params specify them
-    const activeLineNumber = frameParams.isFrame && frameParams.linesStart
-        ? frameParams.linesStart
-        : contextActiveLineNumber;
-    const activeLineRange = frameParams.isFrame && frameParams.linesStart && frameParams.linesEnd
-        ? { start: frameParams.linesStart, end: frameParams.linesEnd }
-        : frameParams.isFrame && frameParams.linesStart
-            ? { start: frameParams.linesStart, end: frameParams.linesStart }
-            : contextActiveLineRange;
-    // Add ref for the editor
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const editorRef = useRef(null);
-    // Store current decorations to clear them
-    const currentDecorationsRef = useRef([]);
-    // Define editor themes based on current system theme
-    const editorTheme = theme === "dark" ? "vs-dark" : "vs-light";
-    // Shared theme configuration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const configureEditorTheme = (monaco) => {
-        monaco.editor.defineTheme("custom-dark", {
-            base: "vs-dark",
-            inherit: true,
-            rules: [
-                // Custom syntax highlighting rules for dark mode
-                { token: "comment", foreground: "6A9955", fontStyle: "italic" },
-                { token: "keyword", foreground: "C586C0", fontStyle: "bold" },
-                { token: "string", foreground: "CE9178" },
-                { token: "number", foreground: "B5CEA8" },
-            ],
-            colors: {
-                // Custom UI colors for dark mode
-                "editor.background": "#000000",
-                "editor.foreground": "#D4D4D4",
-                "editorCursor.foreground": "#AEAFAD",
-                "editor.lineHighlightBackground": "#18181b",
-                "editorLineNumber.foreground": "#858585",
-                "editor.selectionBackground": "#264F78",
-                "editor.inactiveSelectionBackground": "#3A3D41",
-            },
-        });
-        // Apply the theme
-        monaco.editor.setTheme(theme === "dark" ? "custom-dark" : "vs-light");
-    };
-    // Configure Monaco editor on mount
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleEditorDidMount = (editor, monaco) => {
-        editorRef.current = editor;
-        configureEditorTheme(monaco);
-    };
-    // Helper function to clear all decorations
-    const clearAllDecorations = () => {
-        if (currentDecorationsRef.current.length > 0) {
-            if (editorRef.current) {
-                editorRef.current.deltaDecorations(currentDecorationsRef.current, []);
-            }
-            currentDecorationsRef.current = [];
-        }
-    };
-    // Effect to handle line navigation when activeLineNumber or activeLineRange changes
-    useEffect(() => {
-        // Always clear all existing decorations first
-        clearAllDecorations();
-        // Determine which line(s) to highlight
-        let startLine;
-        let endLine;
-        if (activeLineRange) {
-            startLine = activeLineRange.start;
-            endLine = activeLineRange.end;
-        }
-        else if (activeLineNumber) {
-            startLine = activeLineNumber;
-            endLine = activeLineNumber;
-        }
-        // Only add new decorations if we have a line to highlight
-        if (!startLine || !editorRef.current)
-            return;
-        const model = editorRef.current.getModel();
-        if (!model)
-            return;
-        const totalLines = model.getLineCount();
-        // Validate line numbers
-        if (startLine < 1 || startLine > totalLines) {
-            console.warn(`Invalid start line number ${startLine}. File has ${totalLines} lines.`);
-            setActiveLineNumber === null || setActiveLineNumber === void 0 ? void 0 : setActiveLineNumber(undefined);
-            return;
-        }
-        // If endLine is not provided, use startLine (single line)
-        // If endLine is provided, validate it
-        if (endLine === undefined) {
-            endLine = startLine;
-        }
-        else if (endLine < 1 || endLine > totalLines) {
-            // If endLine is invalid, default to startLine
-            endLine = startLine;
-        }
-        // Ensure startLine <= endLine
-        if (startLine > endLine) {
-            [startLine, endLine] = [endLine, startLine];
-        }
-        // Center the entire highlighted range in the editor viewport
-        editorRef.current.revealRangeInCenter({
-            startLineNumber: startLine,
-            startColumn: 1,
-            endLineNumber: endLine,
-            endColumn: model.getLineMaxColumn(endLine),
-        });
-        editorRef.current.setPosition({
-            lineNumber: startLine,
-            column: 1,
-        });
-        // Create decorations for all lines: highlight active range, mute others
-        const decorations = [];
-        for (let line = 1; line <= totalLines; line++) {
-            const maxColumn = model.getLineMaxColumn(line);
-            const isInHighlightRange = line >= startLine && line <= endLine;
-            if (isInHighlightRange) {
-                // Active lines: blue background highlight
-                decorations.push({
-                    range: {
-                        startLineNumber: line,
-                        startColumn: 1,
-                        endLineNumber: line,
-                        endColumn: maxColumn,
-                    },
-                    options: {
-                        isWholeLine: true,
-                        className: "search-highlight-line",
-                        glyphMarginClassName: "search-highlight-glyph",
-                    },
-                });
-            }
-            else {
-                // All other lines: muted text
-                decorations.push({
-                    range: {
-                        startLineNumber: line,
-                        startColumn: 1,
-                        endLineNumber: line,
-                        endColumn: maxColumn,
-                    },
-                    options: {
-                        inlineClassName: "muted-code-text",
-                    },
-                });
-            }
-        }
-        // Add new decorations
-        const newDecorations = editorRef.current.deltaDecorations([], decorations);
-        // Store the new decorations
-        currentDecorationsRef.current = newDecorations;
-    }, [activeLineNumber, activeLineRange, setActiveLineNumber]);
-    // Update the theme when it changes
-    useEffect(() => {
-        const monaco = window.monaco;
-        if (monaco) {
-            monaco.editor.setTheme(theme === "dark" ? "custom-dark" : "vs-light");
-        }
-    }, [theme]);
-    const highlightBackground = hexToRgba(effectiveThemeColor, 0.2);
-    const glyphBackground = hexToRgba(effectiveThemeColor, 0.3);
-    return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" },
-        React.createElement("div", { className: "flex-1 min-h-0 relative" },
-            React.createElement(MonacoEditor, { height: "100%", language: language
-                    ? language === CodeLanguage.TYPESCRIPT ||
-                        language === "tsx"
-                        ? "javascript"
-                        : language
-                    : CodeLanguage.TEXT, value: code, path: fileName, theme: editorTheme, onMount: handleEditorDidMount, options: Object.assign(Object.assign({ minimap: { enabled: false }, fontSize: 13, lineNumbers: "on", formatOnPaste: true, formatOnType: true, stickyScroll: {
-                        enabled: false,
-                    }, scrollBeyondLastLine: false, wordWrap: "on", wordWrapColumn: 120, wrappingIndent: "indent", wrappingStrategy: "advanced", automaticLayout: true, scrollbar: {
-                        vertical: "auto",
-                        horizontal: "hidden",
-                        verticalScrollbarSize: 8,
-                        horizontalScrollbarSize: 0,
-                    }, lineNumbersMinChars: 4, padding: { top: 6 } }, (theme === "dark" && {
-                    renderLineHighlight: "all",
-                    renderIndentGuides: true,
-                    colorDecorators: true,
-                })), { domReadOnly: isGenerating, readOnly: isGenerating }) })),
-        React.createElement("style", null, `
-        :global(.search-highlight-line) {
-          background-color: ${highlightBackground} !important;
-        }
-        :global(.search-highlight-glyph) {
-          background-color: ${glyphBackground};
-        }
-        :global(.muted-code-text) {
-          opacity: 0.5;
-          filter: grayscale(0.4);
-        }
-        /* Remove blue focus outline from Monaco Editor */
-        :global(.monaco-editor .inputarea.ime-input) {
-          outline: none !important;
-        }
-        :global(.monaco-editor) {
-          outline: none !important;
-        }
-        :global(.monaco-editor .monaco-editor-background) {
-          outline: none !important;
-        }
-        :global(.monaco-editor .view-overlays) {
-          outline: none !important;
-        }
-      `)));
-}