@sampleapp.ai/sdk 1.0.28 → 1.0.30

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

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

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

@@ -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/layout/header/glassmorphic-combobox.js

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

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