@sampleapp.ai/sdk 1.0.29 → 1.0.31

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,249 @@
+"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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,174 @@
+"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)));
+}

package/dist/components/guardian/context/guardian-context.js

@@ -0,0 +1,94 @@
+"use client";
+import React, { createContext, useContext, useState, useCallback, } from "react";
+import { CodeLanguage, } from "../types/ide-types";
+const GuardianContext = createContext(undefined);
+export function GuardianProvider({ children }) {
+    const [previewUrl, setPreviewUrlState] = useState("");
+    const [isBrowserMaximized, setIsBrowserMaximized] = useState(false);
+    const [currentView, setCurrentViewState] = useState("preview");
+    // Code state
+    const [code, setCode] = useState("");
+    const [language, setLanguage] = useState(CodeLanguage.TEXT);
+    const [activeFileName, setActiveFileName] = useState("");
+    const [activeFilePath, setActiveFilePath] = useState("");
+    const [activeLineNumber, setActiveLineNumber] = useState(undefined);
+    const [activeLineRange, setActiveLineRange] = useState(undefined);
+    const [isGeneratingCode, setIsGeneratingCode] = useState(false);
+    // Generated code and file tree
+    const [generatedCode, setGeneratedCodeState] = useState({});
+    const [fileTree, setFileTree] = useState({
+        name: "root",
+        children: {},
+        type: "folder",
+        metadata: {
+            response_type: "CodeOutput",
+            file_path: "",
+            code_file_name: "",
+            code_language: CodeLanguage.TEXT,
+            dependencies_to_install: [],
+            framework: null,
+            full_code: "",
+        },
+    });
+    // Dependencies and edited files
+    const [activeDependenciesToInstall, setActiveDependenciesToInstall] = useState([]);
+    const [filesEdited, setFilesEdited] = useState({});
+    const setPreviewUrl = useCallback((url) => {
+        setPreviewUrlState(url);
+    }, []);
+    const setIsBrowserMaximizedState = useCallback((maximized) => {
+        setIsBrowserMaximized(maximized);
+    }, []);
+    const setCurrentView = useCallback((view) => {
+        setCurrentViewState(view);
+    }, []);
+    const updateCode = useCallback((newCode) => {
+        setCode(newCode);
+    }, []);
+    const setGeneratedCode = useCallback((generatedCode) => {
+        if (typeof generatedCode === "function") {
+            setGeneratedCodeState((prev) => generatedCode(prev));
+        }
+        else {
+            setGeneratedCodeState(generatedCode);
+        }
+    }, []);
+    const value = {
+        previewUrl,
+        setPreviewUrl,
+        isBrowserMaximized,
+        setIsBrowserMaximized: setIsBrowserMaximizedState,
+        currentView,
+        setCurrentView,
+        code,
+        updateCode,
+        language,
+        setLanguage,
+        activeFileName,
+        setActiveFileName,
+        activeFilePath,
+        setActiveFilePath,
+        activeLineNumber,
+        setActiveLineNumber,
+        activeLineRange,
+        setActiveLineRange,
+        isGeneratingCode,
+        setIsGeneratingCode,
+        generatedCode,
+        setGeneratedCode,
+        fileTree,
+        setFileTree,
+        activeDependenciesToInstall,
+        setActiveDependenciesToInstall,
+        filesEdited,
+        setFilesEdited,
+    };
+    return (React.createElement(GuardianContext.Provider, { value: value }, children));
+}
+export function useGuardianContext() {
+    const context = useContext(GuardianContext);
+    if (!context) {
+        throw new Error("useGuardianContext must be used within a GuardianProvider");
+    }
+    return context;
+}

package/dist/components/guardian/context/vm-context.js

@@ -0,0 +1,28 @@
+"use client";
+import React, { createContext, useContext, useState } from "react";
+const VmContext = createContext(undefined);
+export const VmProvider = ({ children }) => {
+    const [vmUrlMap, setVmUrlMap] = useState({});
+    const setVmUrl = (uid, url) => {
+        setVmUrlMap((prev) => (Object.assign(Object.assign({}, prev), { [uid]: url })));
+    };
+    const getVmUrl = (uid) => {
+        const value = vmUrlMap[uid];
+        // Return undefined if it's an error marker
+        return value === "error" ? undefined : value;
+    };
+    const setVmError = (uid) => {
+        setVmUrlMap((prev) => (Object.assign(Object.assign({}, prev), { [uid]: "error" })));
+    };
+    const hasError = (uid) => {
+        return vmUrlMap[uid] === "error";
+    };
+    return (React.createElement(VmContext.Provider, { value: { vmUrlMap, setVmUrl, getVmUrl, setVmError, hasError } }, children));
+};
+export const useVmContext = () => {
+    const context = useContext(VmContext);
+    if (!context) {
+        throw new Error("useVmContext must be used within a VmProvider");
+    }
+    return context;
+};

package/dist/components/guardian/default-guide-view.js

@@ -0,0 +1,34 @@
+"use client";
+import React from "react";
+import { Markdown } from "./ui/markdown";
+export default function DefaultGuideView({ themeColor, }) {
+    return (React.createElement("div", { className: "h-full flex flex-col" },
+        React.createElement("div", { className: "flex-1 px-8 py-6" },
+            React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, `# Guardian Guide
+
+Learn how to use Guardian to build and deploy your application with confidence.
+
+## Getting Started
+
+Guardian provides a comprehensive development environment with real-time preview, code editing, and AI assistance.
+
+### Features
+
+- **Live Preview**: See your changes instantly as you code
+- **Code Editor**: Edit files directly in the browser
+- **AI Assistant**: Get help with your code using the Ask AI feature
+
+### Navigation
+
+Use the tabs at the top to switch between:
+- **Guide**: View this documentation
+- **Ask AI**: Get AI-powered assistance with your code
+
+### Code Editing
+
+Select files from the file selector to view and edit them. The editor supports syntax highlighting and automatic formatting.
+
+### Preview
+
+The preview panel shows your running application. Use the reload button to refresh the preview when needed.`))));
+}