@sampleapp.ai/sdk 1.0.36 → 1.0.37

package/dist/components/guardian/ide/browser.js

@@ -1,538 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useGuardianContext } from "../context/guardian-context";
-import { ChevronLeft, ChevronRight, RefreshCw, Lock, AlertTriangle, Maximize2, Minimize2, ExternalLink, MoreVertical, } from "lucide-react";
-import { cn } from "../../../lib/utils";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu";
-export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint, outerContainerClassName, children, reloadSignal, useVm, isGuardian = false, }) {
-    const { isBrowserMaximized, setIsBrowserMaximized } = useGuardianContext();
-    const iframeRef = useRef(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const historyRef = useRef([]);
-    const historyIndexRef = useRef(-1);
-    const suppressHistoryPushRef = useRef(false);
-    const suppressIframeSrcUpdateRef = useRef(false);
-    const [historyIndex, setHistoryIndex] = useState(-1);
-    const [historyLength, setHistoryLength] = useState(0);
-    const [urlInput, setUrlInput] = useState("");
-    const [iframeSrc, setIframeSrc] = useState("");
-    const isIgnorableUrl = useCallback((href) => {
-        if (!href)
-            return true;
-        const value = href.toString();
-        return value === "about:blank" || value.startsWith("about:");
-    }, []);
-    /**
-     * Convert displayed URL back to original format. For dev mode you
-     * can just show the containerEndpoint if you prefer.
-     */
-    const getDisplayUrl = (proxyUrl) => {
-        try {
-            const currentUrl = new URL(proxyUrl);
-            // Return just the pathname
-            return currentUrl.pathname || "/";
-        }
-        catch (_a) {
-            return proxyUrl;
-        }
-    };
-    const normalizeUrl = useCallback((href) => {
-        try {
-            const u = new URL(href, window.location.href);
-            u.searchParams.delete("_ts");
-            return u.toString();
-        }
-        catch (_a) {
-            // Best-effort removal of _ts from plain strings
-            const withoutTs = href.replace(/([?&])_ts=\d+(&|$)/, (m, p1, p2) => p2 === "&" ? p1 : "");
-            return withoutTs.replace(/[?&]$/, "");
-        }
-    }, []);
-    const updateHistoryState = useCallback(() => {
-        setHistoryIndex(historyIndexRef.current);
-        setHistoryLength(historyRef.current.length);
-    }, []);
-    const updateUrlInput = useCallback((href) => {
-        try {
-            const currentUrlObj = new URL(href, window.location.href);
-            setUrlInput(currentUrlObj.pathname || "/");
-        }
-        catch (_a) {
-            setUrlInput(href);
-        }
-    }, []);
-    const pushHistoryEntry = useCallback((href) => {
-        const sliceUntil = Math.min(historyRef.current.length, historyIndexRef.current + 1);
-        historyRef.current = [...historyRef.current.slice(0, sliceUntil), href];
-        historyIndexRef.current = historyRef.current.length - 1;
-        updateHistoryState();
-    }, [updateHistoryState]);
-    useEffect(() => {
-        if (!previewUrl)
-            return;
-        // Skip iframe src update if we're syncing from a navigation message
-        // (to prevent reloading the iframe when it has already navigated internally)
-        if (!suppressIframeSrcUpdateRef.current) {
-            // Keep iframe src in sync with external previewUrl when it changes meaningfully
-            setIframeSrc((prev) => {
-                const prevNorm = prev ? normalizeUrl(prev) : "";
-                const nextNorm = normalizeUrl(previewUrl);
-                return prevNorm === nextNorm ? prev || previewUrl : previewUrl;
-            });
-        }
-        else {
-            // Reset the flag after skipping the update
-            suppressIframeSrcUpdateRef.current = false;
-        }
-        updateUrlInput(previewUrl);
-        if (historyRef.current.length === 0) {
-            historyRef.current = [previewUrl];
-            historyIndexRef.current = 0;
-            updateHistoryState();
-            suppressHistoryPushRef.current = false;
-            return;
-        }
-        if (suppressHistoryPushRef.current) {
-            suppressHistoryPushRef.current = false;
-            return;
-        }
-        const current = historyRef.current[historyIndexRef.current];
-        if (normalizeUrl(current) === normalizeUrl(previewUrl))
-            return;
-        pushHistoryEntry(normalizeUrl(previewUrl));
-    }, [
-        previewUrl,
-        updateUrlInput,
-        pushHistoryEntry,
-        updateHistoryState,
-        normalizeUrl,
-    ]);
-    /**
-     * Force-reload the current iframe without mutating previewUrl.
-     * Tries same-origin reload first; falls back to cache-busting the src.
-     */
-    const reloadIframe = () => {
-        var _a;
-        if (!previewUrl)
-            return;
-        try {
-            const base = ((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.src) || iframeSrc || previewUrl;
-            const url = new URL(base, window.location.href);
-            url.searchParams.set("_ts", Date.now().toString());
-            setIframeSrc(url.toString());
-        }
-        catch (_b) {
-            try {
-                const url = new URL(previewUrl, window.location.href);
-                url.searchParams.set("_ts", Date.now().toString());
-                setIframeSrc(url.toString());
-            }
-            catch (_c) {
-                setIframeSrc(previewUrl);
-            }
-        }
-    };
-    const getFrameWindow = () => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return null;
-        try {
-            return iframe.contentWindow;
-        }
-        catch (_a) {
-            return null;
-        }
-    };
-    const getFrameHref = useCallback(() => {
-        var _a, _b;
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return null;
-        try {
-            const href = (_b = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.href;
-            if (href && !isIgnorableUrl(href))
-                return href;
-        }
-        catch (_c) {
-            // Ignore cross-origin errors; fall back to iframe.src below.
-        }
-        try {
-            // For cross-origin iframes, we can't read location.href, so use iframe.src
-            // But iframe.src might not reflect client-side navigation, so we also check
-            // if we have a more recent previewUrl
-            const src = iframe.src;
-            if (src && !isIgnorableUrl(src)) {
-                // If previewUrl is more recent and different, prefer it
-                if (previewUrl && normalizeUrl(previewUrl) !== normalizeUrl(src)) {
-                    return previewUrl;
-                }
-                return src;
-            }
-            // Fallback to previewUrl if iframe.src is not available
-            if (previewUrl && !isIgnorableUrl(previewUrl)) {
-                return previewUrl;
-            }
-            return null;
-        }
-        catch (_d) {
-            // Final fallback to previewUrl
-            if (previewUrl && !isIgnorableUrl(previewUrl)) {
-                return previewUrl;
-            }
-            return null;
-        }
-    }, [previewUrl, normalizeUrl, isIgnorableUrl]);
-    /**
-     * Synchronize state from the iframe's current location (when accessible).
-     */
-    const syncFromIframe = useCallback(() => {
-        const currentHref = getFrameHref();
-        if (!currentHref || isIgnorableUrl(currentHref)) {
-            // If we can't get the href, at least try to update from previewUrl
-            if (previewUrl && !isIgnorableUrl(previewUrl)) {
-                updateUrlInput(previewUrl);
-            }
-            return;
-        }
-        try {
-            const currentUrlObj = new URL(currentHref, window.location.href);
-            const pathOnly = currentUrlObj.pathname || "/";
-            setUrlInput(pathOnly);
-        }
-        catch (_a) {
-            // If URL parsing fails, try to extract path from the string
-            try {
-                const pathMatch = currentHref.match(/\/\/[^\/]+(\/.*?)(?:\?|$)/);
-                if (pathMatch && pathMatch[1]) {
-                    setUrlInput(pathMatch[1]);
-                }
-                else {
-                    setUrlInput(currentHref);
-                }
-            }
-            catch (_b) {
-                setUrlInput(currentHref);
-            }
-        }
-        const normalizedCurrent = normalizeUrl(currentHref);
-        if (!suppressHistoryPushRef.current) {
-            const currentFlowLength = historyRef.current.length;
-            const sliceUntil = Math.min(currentFlowLength, historyIndexRef.current + 1);
-            historyRef.current = [
-                ...historyRef.current.slice(0, sliceUntil),
-                normalizedCurrent,
-            ];
-            historyIndexRef.current = historyRef.current.length - 1;
-            setHistoryIndex(historyIndexRef.current);
-            setHistoryLength(historyRef.current.length);
-        }
-        // Only propagate meaningful navigations (ignore cache-busting changes)
-        if (normalizeUrl(previewUrl) !== normalizedCurrent) {
-            setPreviewUrl(normalizedCurrent);
-        }
-    }, [
-        previewUrl,
-        normalizeUrl,
-        updateUrlInput,
-        setPreviewUrl,
-        getFrameHref,
-        isIgnorableUrl,
-    ]);
-    /**
-     * Install navigation listeners in the iframe (same-origin only) so SPA-style
-     * navigations update our UI without a full reload.
-     */
-    const attachIframeNavigationSync = () => {
-        const win = getFrameWindow();
-        if (!win)
-            return;
-        // Same-origin guard: any property access on cross-origin windows throws.
-        // If we can't read location.href, bail out and avoid installing listeners.
-        try {
-            void win.location.href;
-        }
-        catch (_a) {
-            return;
-        }
-        const notify = () => {
-            // Delay slightly to allow location to settle
-            setTimeout(() => syncFromIframe(), 0);
-        };
-        if (win.__saNavSyncInstalled)
-            return;
-        win.addEventListener("hashchange", notify);
-        win.addEventListener("popstate", notify);
-        try {
-            const wrapHistoryMethod = (method) => {
-                const original = win.history[method];
-                if (typeof original !== "function")
-                    return;
-                win.history[method] = ((...args) => {
-                    const result = original.apply(win.history, args);
-                    win.dispatchEvent(new Event("sa-locationchange"));
-                    return result;
-                });
-            };
-            wrapHistoryMethod("pushState");
-            wrapHistoryMethod("replaceState");
-            win.addEventListener("sa-locationchange", notify);
-        }
-        catch (_b) {
-            // If we cannot patch history, rely on popstate/hashchange only
-        }
-        win.__saNavSyncInstalled = true;
-    };
-    // Trigger iframe reload when external signal changes
-    useEffect(() => {
-        if (typeof reloadSignal === "number") {
-            reloadIframe();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reloadSignal]);
-    // Listen for navigation messages from the iframe
-    useEffect(() => {
-        const handleMessage = (event) => {
-            var _a, _b;
-            // Only accept messages from the same origin or trusted origins
-            if (event.origin !== window.location.origin &&
-                !event.origin.endsWith("sampleapp.love")) {
-                return;
-            }
-            // Handle navigation updates from the iframe
-            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === "NAVIGATION_UPDATE" && ((_b = event.data) === null || _b === void 0 ? void 0 : _b.url)) {
-                const newUrl = event.data.url;
-                const normalized = normalizeUrl(newUrl);
-                // Update the URL display
-                updateUrlInput(newUrl);
-                // Update history without triggering iframe src change
-                const current = historyRef.current[historyIndexRef.current];
-                if (normalizeUrl(current) !== normalized) {
-                    suppressHistoryPushRef.current = true;
-                    pushHistoryEntry(normalized);
-                }
-                // Update previewUrl so syncFromIframe() can use the correct value
-                // Use a flag to prevent the useEffect from updating iframe src (which would cause reload)
-                if (normalizeUrl(previewUrl) !== normalized) {
-                    suppressIframeSrcUpdateRef.current = true;
-                    setPreviewUrl(normalized);
-                }
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-        };
-    }, [
-        normalizeUrl,
-        updateUrlInput,
-        pushHistoryEntry,
-        previewUrl,
-        setPreviewUrl,
-    ]);
-    /**
-     * Navigation logic
-     */
-    const handleNavigate = (url) => {
-        try {
-            let processedUrl;
-            const trimmedUrl = url.trim();
-            // If the input is blank, navigate to root path
-            if (trimmedUrl === "" ||
-                trimmedUrl.includes("https://") ||
-                trimmedUrl.includes("http://") ||
-                trimmedUrl.includes("localhost")) {
-                const baseUrl = containerEndpoint || "";
-                try {
-                    const baseUrlObj = new URL(baseUrl);
-                    processedUrl = `${baseUrlObj.origin}/`;
-                }
-                catch (error) {
-                    console.error("Error creating URL with base:", baseUrl, error);
-                    setError(`Invalid base URL: ${baseUrl}`);
-                    setIsLoading(false);
-                    return;
-                }
-            }
-            // If it starts with /api/browser, use as is
-            else if (trimmedUrl.startsWith("/api/browser")) {
-                processedUrl = trimmedUrl;
-            }
-            // If it's a relative path (starts with /)
-            else if (trimmedUrl.startsWith("/")) {
-                const baseUrl = containerEndpoint || "";
-                try {
-                    const baseUrlObj = new URL(baseUrl);
-                    processedUrl = `${baseUrlObj.origin}${trimmedUrl}`;
-                }
-                catch (error) {
-                    console.error("Error creating URL with base:", baseUrl, error);
-                    setError(`Invalid base URL: ${baseUrl}`);
-                    setIsLoading(false);
-                    return;
-                }
-            }
-            // Otherwise, treat as external URL
-            else {
-                const baseUrl = containerEndpoint || "";
-                try {
-                    const baseUrlObj = new URL(baseUrl);
-                    processedUrl = `${baseUrlObj.origin}/`;
-                }
-                catch (error) {
-                    console.error("Error creating URL with base:", baseUrl, error);
-                    setError(`Invalid base URL: ${baseUrl}`);
-                    setIsLoading(false);
-                    return;
-                }
-            }
-            setIsLoading(true);
-            setError(null);
-            const newHistory = historyRef.current.slice(0, historyIndex + 1);
-            newHistory.push(processedUrl);
-            historyRef.current = newHistory;
-            setHistoryIndex(newHistory.length - 1);
-            // Check if we're navigating to the same URL (ignoring cache-busting)
-            const compareAgainst = iframeSrc || previewUrl;
-            const isSameUrl = normalizeUrl(processedUrl) === normalizeUrl(compareAgainst);
-            // Update the URL input display right away
-            setUrlInput(getDisplayUrl(processedUrl));
-            // Force a refresh if navigating to the same URL
-            if (isSameUrl) {
-                setIsLoading(true);
-                setError(null);
-                reloadIframe();
-            }
-            else {
-                // Normal navigation for different URLs
-                setPreviewUrl(processedUrl);
-            }
-            // Set a timeout to reset loading state if it takes too long
-            setTimeout(() => {
-                if (isLoading) {
-                    setIsLoading(false);
-                }
-            }, 10000);
-        }
-        catch (error) {
-            console.error("Navigation error:", error);
-            setError(`Invalid URL: ${error.message || "Unknown error"}`);
-            setIsLoading(false);
-        }
-    };
-    const handleBack = () => {
-        var _a, _b;
-        setIsLoading(true);
-        // Try to use iframe's own history for same-origin navigations
-        try {
-            (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.history.back();
-            // onLoad will sync state when navigation completes
-            return;
-        }
-        catch (_c) {
-            // Fallback to our own tracked history
-        }
-        if (historyIndex > 0) {
-            const newIndex = historyIndex - 1;
-            setHistoryIndex(newIndex);
-            const previousUrl = historyRef.current[newIndex];
-            setPreviewUrl(previousUrl);
-            setUrlInput(getDisplayUrl(previousUrl));
-        }
-        else {
-            setIsLoading(false);
-        }
-    };
-    const handleForward = () => {
-        var _a, _b;
-        setIsLoading(true);
-        // Try to use iframe's own history for same-origin navigations
-        try {
-            (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.history.forward();
-            // onLoad will sync state when navigation completes
-            return;
-        }
-        catch (_c) {
-            // Fallback to our own tracked history
-        }
-        if (historyIndex < historyRef.current.length - 1) {
-            const newIndex = historyIndex + 1;
-            setHistoryIndex(newIndex);
-            const nextUrl = historyRef.current[newIndex];
-            setPreviewUrl(nextUrl);
-            setUrlInput(getDisplayUrl(nextUrl));
-        }
-        else {
-            setIsLoading(false);
-        }
-    };
-    const handleRefresh = () => {
-        if (previewUrl) {
-            setIsLoading(true);
-            setError(null);
-            reloadIframe();
-        }
-    };
-    const handleUrlChange = (e) => {
-        if (e.key === "Enter") {
-            handleNavigate(urlInput);
-        }
-    };
-    // Render the iframe directly with built-in event handlers
-    const renderIframe = () => {
-        if (!previewUrl && !iframeSrc)
-            return null;
-        return (React.createElement("iframe", { ref: iframeRef, src: iframeSrc || previewUrl, className: cn("h-full w-full border-none", outerContainerClassName), sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads allow-top-navigation", allow: "fullscreen; payment; geolocation; microphone; camera", onLoad: () => {
-                setIsLoading(false);
-                setError(null);
-                attachIframeNavigationSync();
-                syncFromIframe();
-            }, onError: () => {
-                console.error("Iframe failed to load");
-                setIsLoading(false);
-                setError("Failed to load page");
-            } }));
-    };
-    return (React.createElement("div", { className: "flex h-full w-full flex-col" },
-        !useVm && !isGuardian && (React.createElement("div", { className: "bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 flex-shrink-0" },
-            React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1.5 h-[2.38rem]" },
-                React.createElement("div", { className: "flex gap-0.5" },
-                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
-                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
-                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
-                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-600 dark:text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
-                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-50 dark:bg-zinc-950 rounded text-zinc-600 dark:text-zinc-400 focus-within:bg-white dark:focus-within:bg-zinc-900 transition-colors" },
-                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-400 dark:text-zinc-600 flex-shrink-0" })),
-                    React.createElement("input", { type: "text", 
-                        // value={urlInput}
-                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-700 dark:text-zinc-300 placeholder:text-zinc-400 dark:placeholder:text-zinc-600", placeholder: "Enter URL" }),
-                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
-                            ? "Exit fullscreen"
-                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })))),
-                    React.createElement("button", { onClick: () => {
-                            window.open(previewUrl, "_blank", "noopener,noreferrer");
-                        }, className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
-                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement(DropdownMenu, null,
-                        React.createElement(DropdownMenuTrigger, { asChild: true },
-                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
-                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-600 dark:text-zinc-400" }))),
-                        React.createElement(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800" },
-                            React.createElement(DropdownMenuItem, { onClick: () => {
-                                    // Restart functionality - can be implemented if needed
-                                    console.log("Restart app");
-                                }, className: "cursor-pointer text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800" }, "Restart App"))))))),
-        error && (React.createElement("div", { className: "p-4 bg-red-50 border-b border-red-100 text-red-700 text-sm dark:bg-red-950 dark:border-red-800 dark:text-red-200" },
-            React.createElement("div", { className: "flex items-center gap-2" },
-                React.createElement(AlertTriangle, { size: 16 }),
-                React.createElement("span", null, error)))),
-        React.createElement("div", { className: "flex-1 min-h-0 relative" },
-            renderIframe(),
-            isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-100 dark:bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
-                React.createElement("div", { className: "text-sm text-zinc-600 bg-white dark:bg-black p-3 rounded-lg shadow-md" },
-                    "Loading ",
-                    urlInput,
-                    "..."))),
-            children)));
-}

package/dist/components/guardian/index.js

@@ -1,8 +0,0 @@
-export { default as GuardianPlayground } from "./guardian-playground";
-export { default as GuardianComponent } from "./guardian-component";
-export { VmProvider, useVmContext } from "./context/vm-context";
-export { GuardianProvider, useGuardianContext } from "./context/guardian-context";
-export * from "./types";
-export { default as CodeFocusSection } from "./code-focus-section";
-export { buildGuardianConfig, createSandboxUrlConfigs } from "./utils";
-export { Framework, FrameworkLabel } from "./types";

package/dist/components/guardian/layout/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/layout/header/glassmorphic-combobox.js

@@ -1,48 +0,0 @@
-"use client";
-import React, { useState, useRef, useEffect } from "react";
-import { Button } from "../../../../components/ui/button";
-import { cn } from "../../../../lib/utils";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-export default function GlassmorphicCombobox({ options, value, placeholder, className, searchPlaceholder, onSelect, }) {
-    var _a;
-    const [open, setOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState("");
-    const containerRef = useRef(null);
-    const selectedLabel = (_a = options.find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label;
-    // Filter options based on search
-    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()));
-    // Close on outside click
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setOpen(false);
-                setSearchValue("");
-            }
-        };
-        if (open) {
-            document.addEventListener("mousedown", handleClickOutside);
-            return () => document.removeEventListener("mousedown", handleClickOutside);
-        }
-    }, [open]);
-    const handleSelect = (option) => {
-        if (option.href && typeof window !== "undefined") {
-            window.location.href = option.href;
-        }
-        else if (onSelect) {
-            onSelect(option.value);
-        }
-        setOpen(false);
-        setSearchValue("");
-    };
-    return (React.createElement("div", { ref: containerRef, className: "relative" },
-        React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": open, onClick: () => setOpen(!open), className: cn("w-64 justify-between rounded-xl border-white/20 bg-white/10 backdrop-blur-md", "text-white/90 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25)] hover:bg-white/15", "data-[state=open]:bg-white/15", className) },
-            React.createElement("span", { className: "truncate min-w-0" }, selectedLabel !== null && selectedLabel !== void 0 ? selectedLabel : placeholder),
-            React.createElement(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-70" })),
-        open && (React.createElement("div", { className: cn("absolute top-full mt-1 w-64 p-0 rounded-xl border border-white/20 bg-black/40 backdrop-blur-xl", "shadow-xl z-50") },
-            React.createElement("div", { className: "p-2" },
-                React.createElement("input", { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: (e) => setSearchValue(e.target.value), className: "w-full px-3 py-2 rounded-md bg-transparent border border-white/20 text-white placeholder:text-white/60 focus:outline-none focus:border-white/40" })),
-            React.createElement("div", { className: "max-h-[300px] overflow-y-auto" }, filteredOptions.length === 0 ? (React.createElement("div", { className: "px-3 py-2 text-white/80 text-sm" }, "No results found.")) : (React.createElement("div", { className: "p-1" }, filteredOptions.map((option) => (React.createElement("div", { key: option.value, onClick: () => handleSelect(option), className: cn("flex items-center px-2 py-1.5 rounded-sm cursor-pointer text-sm", "hover:bg-white/10", value === option.value && "bg-white/10") },
-                React.createElement(CheckIcon, { className: cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") }),
-                option.label))))))))));
-}

package/dist/components/guardian/layout/header.js

@@ -1,63 +0,0 @@
-"use client";
-import React from "react";
-import { Badge } from "../ui/badge";
-import GlassmorphicCombobox from "./header/glassmorphic-combobox";
-export default function Header({ demoOptions, frameworkOptions, firstFrameworkByUseCase, currentFramework, playgroundLogo, currentUseCase, }) {
-    var _a, _b, _c, _d;
-    // Derive values directly from props (which come from the URL)
-    // No internal state - the URL is the source of truth
-    const selectedUseCase = currentUseCase || ((_a = demoOptions[0]) === null || _a === void 0 ? void 0 : _a.value);
-    const selectedFramework = currentFramework || ((_b = frameworkOptions[0]) === null || _b === void 0 ? void 0 : _b.value);
-    // Build options with hrefs
-    const demoOptionsWithHrefs = demoOptions.map((opt) => {
-        var _a;
-        return (Object.assign(Object.assign({}, opt), { 
-            // Link to first available framework for this use case
-            href: `/${opt.value}?framework=${(firstFrameworkByUseCase === null || firstFrameworkByUseCase === void 0 ? void 0 : firstFrameworkByUseCase[opt.value]) || ((_a = frameworkOptions[0]) === null || _a === void 0 ? void 0 : _a.value)}` }));
-    });
-    const frameworkOptionsWithHrefs = frameworkOptions.map((opt) => (Object.assign(Object.assign({}, opt), { href: `/${selectedUseCase}?framework=${opt.value}` })));
-    // Derive environment metadata for badge styling and label
-    const environment = ((typeof window !== "undefined" &&
-        ((_d = (_c = window.__NEXT_DATA__) === null || _c === void 0 ? void 0 : _c.env) === null || _d === void 0 ? void 0 : _d.NEXT_PUBLIC_ENVIRONMENT)) ||
-        process.env.NEXT_PUBLIC_ENVIRONMENT ||
-        process.env.NODE_ENV ||
-        "development").toLowerCase();
-    const envMeta = {
-        production: {
-            label: "Production",
-            badgeClass: "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
-            dotClass: "bg-emerald-400 shadow-[0_0_0_3px_rgba(16,185,129,0.25)]",
-        },
-        staging: {
-            label: "Staging",
-            badgeClass: "border-amber-500/30 bg-amber-500/10 text-amber-100",
-            dotClass: "bg-amber-400 shadow-[0_0_0_3px_rgba(245,158,11,0.25)]",
-        },
-        test: {
-            label: "Test",
-            badgeClass: "border-cyan-500/30 bg-cyan-500/10 text-cyan-100",
-            dotClass: "bg-cyan-400 shadow-[0_0_0_3px_rgba(34,211,238,0.25)]",
-        },
-        preview: {
-            label: "Preview",
-            badgeClass: "border-sky-500/30 bg-sky-500/10 text-sky-100",
-            dotClass: "bg-sky-400 shadow-[0_0_0_3px_rgba(56,189,248,0.25)]",
-        },
-        development: {
-            label: "Demo Environment",
-            badgeClass: "border-violet-500/30 bg-violet-500/10 text-violet-100",
-            dotClass: "bg-violet-400 shadow-[0_0_0_3px_rgba(139,92,246,0.25)]",
-        },
-    };
-    const meta = envMeta[environment] || envMeta.development;
-    return (React.createElement("div", { className: "grid grid-cols-[1fr_auto_1fr] items-center w-full ml-6" },
-        React.createElement("div", { className: "justify-self-start" }, playgroundLogo),
-        React.createElement("div", { className: "justify-self-center" },
-            React.createElement("div", { className: "flex gap-2" },
-                React.createElement(GlassmorphicCombobox, { options: demoOptionsWithHrefs, value: selectedUseCase, placeholder: "Select use case...", searchPlaceholder: "Search use case..." }),
-                React.createElement(GlassmorphicCombobox, { options: frameworkOptionsWithHrefs, value: selectedFramework, placeholder: "Select framework...", searchPlaceholder: "Search framework...", className: "w-32" }))),
-        React.createElement("div", { className: "justify-self-end mr-6" },
-            React.createElement(Badge, { className: `rounded-full px-5 py-3 flex items-center gap-2 border ${meta.badgeClass} backdrop-blur-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-sm`, "aria-label": `${meta.label} environment` },
-                React.createElement("span", { className: `inline-block h-2 w-2 rounded-full ${meta.dotClass}` }),
-                meta.label))));
-}