@sampleapp.ai/sdk 1.0.29 → 1.0.31

package/dist/components/sandbox/guardian/guardian-home.js

@@ -0,0 +1,61 @@
+"use client";
+import Link from "next/link";
+import AppLayoutNoSidebar from "./app-layout-no-sidebar";
+import { useSandboxUrlLoader } from "./hooks/use-sandbox-url-loader";
+import { useEffect, useRef } from "react";
+export default function GuardianHome({ nestedConfig, }) {
+    var _a, _b, _c;
+    const { preloadSandboxUrls } = useSandboxUrlLoader();
+    const hasPreloadedRef = useRef(false);
+    // Preload all sandbox URLs when the home page loads (only once)
+    useEffect(() => {
+        // Prevent multiple preload attempts
+        if (hasPreloadedRef.current) {
+            return;
+        }
+        hasPreloadedRef.current = true;
+        // Extract all framework configs from nested structure
+        const configs = Object.values(nestedConfig).flatMap((uc) => Object.values(uc.frameworks).flatMap((fw) => {
+            // Include the main framework config
+            const mainConfig = {
+                sandboxUid: fw.sandboxUid,
+                browserUrl: fw.browserUrl,
+                useVm: fw.useVm,
+            };
+            // Include additional URLs from consoleUrlConfigs (urlsToPreload)
+            const additionalConfigs = fw.consoleUrlConfigs || [];
+            return [mainConfig, ...additionalConfigs];
+        }));
+        // Preload all URLs in the background
+        preloadSandboxUrls(configs).catch((error) => {
+            console.error("Failed to preload some sandbox URLs:", error);
+        });
+    }, [nestedConfig, preloadSandboxUrls]);
+    // Build unique use cases list with first framework for each
+    const uniqueUseCases = Object.entries(nestedConfig).map(([id, uc]) => {
+        const firstFramework = Object.keys(uc.frameworks)[0];
+        return {
+            id,
+            name: uc.name,
+            description: uc.description,
+            firstFramework,
+        };
+    });
+    // Get playground logo from the first framework of the first use case
+    const playgroundLogo = (_c = (_a = Object.values(nestedConfig)[0]) === null || _a === void 0 ? void 0 : _a.frameworks[Object.keys(((_b = Object.values(nestedConfig)[0]) === null || _b === void 0 ? void 0 : _b.frameworks) || {})[0]]) === null || _c === void 0 ? void 0 : _c.playgroundLogo;
+    return (React.createElement(AppLayoutNoSidebar, { header: React.createElement("div", { className: "flex items-center gap-3 ml-6" }, playgroundLogo) },
+        React.createElement("div", { className: "h-full flex flex-col" },
+            React.createElement("div", { className: "flex-1 px-6 py-6 space-y-8" },
+                React.createElement("div", { className: "space-y-3" },
+                    React.createElement("div", { className: "text-xs font-medium text-gray-400 tracking-wider uppercase" }, "Examples"),
+                    React.createElement("h1", { className: "text-2xl font-semibold text-gray-100" }, "Sample apps"),
+                    React.createElement("p", { className: "text-sm text-gray-400" }, "Select a sample app to explore and interact with")),
+                React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" }, uniqueUseCases.map((useCase) => (React.createElement(Link, { href: `/${useCase.id}?framework=${useCase.firstFramework}`, key: useCase.id },
+                    React.createElement("div", { className: "bg-[#1a1b23] rounded-lg border border-gray-800 p-6 flex flex-col justify-between min-h-[180px] hover:border-gray-700 transition-colors cursor-pointer" },
+                        React.createElement("div", null,
+                            React.createElement("div", { className: "flex items-center gap-3 mb-2" },
+                                React.createElement("h2", { className: "font-semibold text-base text-gray-100" }, useCase.name)),
+                            React.createElement("div", { className: "text-gray-400 text-sm mb-6" }, useCase.description)),
+                        React.createElement("div", { className: "flex items-center gap-2" },
+                            React.createElement("span", { className: "text-xs text-gray-500" }, "View app \u2192")))))))))));
+}

package/dist/components/sandbox/guardian/guardian-playground.js

@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import GuardianComponent from "./guardian-component";
+import { useFrameParams } from "./hooks/use-frame-params";
+import { GuardianStyleWrapper } from "./guardian-style-wrapper";
+/**
+ * Guardian Playground component with nested config structure.
+ * Expects config[useCaseId].frameworks[frameworkKey] structure.
+ *
+ * When isFrame=true, reads framework from URL params client-side.
+ */
+export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, }) {
+    var _a, _b;
+    // When in frame mode, allow URL params to override framework
+    const frameParams = useFrameParams();
+    const framework = isFrame && frameParams.framework ? frameParams.framework : serverFramework;
+    const useCaseConfig = nestedConfig[useCase];
+    if (!useCaseConfig) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
+            React.createElement("p", { className: "text-red-500" },
+                "Use case \"",
+                useCase,
+                "\" not found")));
+    }
+    const frameworkConfig = useCaseConfig.frameworks[framework];
+    if (!frameworkConfig) {
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen" },
+            React.createElement("p", { className: "text-red-500" },
+                "Framework \"",
+                framework,
+                "\" not found in use case \"",
+                useCase,
+                "\"")));
+    }
+    // Build a map of use case ID to first available framework key
+    const firstFrameworkByUseCase = {};
+    Object.entries(nestedConfig).forEach(([useCaseId, uc]) => {
+        const firstFrameworkKey = Object.keys(uc.frameworks)[0];
+        if (firstFrameworkKey) {
+            firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
+        }
+    });
+    return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor },
+        React.createElement(GuardianComponent, { demoOptions: frameworkConfig.demoOptions, frameworkOptions: frameworkConfig.frameworkOptions, firstFrameworkByUseCase: firstFrameworkByUseCase, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
+}

package/dist/components/sandbox/guardian/guardian-style-wrapper.js

@@ -0,0 +1,47 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { TAILWIND_CSS } from "../../../lib/generated-css";
+/**
+ * Style wrapper for Guardian components that injects Tailwind CSS
+ * into the document without using Shadow DOM (preserves React context)
+ */
+export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
+    const [stylesInjected, setStylesInjected] = useState(false);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        // Only run on client side
+        if (typeof window === "undefined" || typeof document === "undefined") {
+            return;
+        }
+        // Check if styles are already injected
+        const existingStyle = document.getElementById("guardian-sdk-styles");
+        if (existingStyle) {
+            setStylesInjected(true);
+            return;
+        }
+        // Inject styles into document head
+        const styleElement = document.createElement("style");
+        styleElement.id = "guardian-sdk-styles";
+        // Scope styles to guardian-sdk class to avoid conflicts
+        styleElement.textContent = TAILWIND_CSS;
+        document.head.appendChild(styleElement);
+        setStylesInjected(true);
+        return () => {
+            // Don't remove styles on unmount as other Guardian components might use them
+        };
+    }, []);
+    // Set CSS variables for colors based on themeColor
+    useEffect(() => {
+        if (rootRef.current) {
+            rootRef.current.style.setProperty("--colors-primary", themeColor);
+            // Create a slightly lighter version for secondary
+            const secondaryColor = themeColor; // Can be customized if needed
+            rootRef.current.style.setProperty("--colors-secondary", secondaryColor);
+        }
+    }, [themeColor]);
+    return (React.createElement("div", { ref: rootRef, className: "guardian-sdk-root dark bg-background text-foreground", style: {
+            width: "100%",
+            height: "100%",
+            fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+        } }, children));
+};

package/dist/components/sandbox/guardian/guardian-upload-spec.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type UploadedFile = {
+    name: string;
+    size: number;
+    type: string;
+    content?: string;
+};
+type GuardianUploadSpecProps = {
+    onBack: () => void;
+    onContinue: (file: UploadedFile) => void;
+    isLoading?: boolean;
+};
+export default function GuardianUploadSpec({ onBack, onContinue, isLoading, }: GuardianUploadSpecProps): React.JSX.Element;
+export {};

package/dist/components/sandbox/guardian/guardian-upload-spec.js

@@ -0,0 +1,160 @@
+"use client";
+import React from "react";
+"use client";
+import { useState, useCallback } from "react";
+import { Upload, FileText, X, Check, AlertCircle } from "lucide-react";
+import { cn } from "../../../lib/utils";
+export default function GuardianUploadSpec({ onBack, onContinue, isLoading = false, }) {
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [error, setError] = useState(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const validateFile = (file) => {
+        // Check file size (max 10MB)
+        if (file.size > 10 * 1024 * 1024) {
+            return "File size must be less than 10MB";
+        }
+        // Check file type
+        const validTypes = [
+            "application/json",
+            "application/x-yaml",
+            "application/yaml",
+            "text/yaml",
+            "text/x-yaml",
+            "text/plain",
+        ];
+        const validExtensions = [".json", ".yaml", ".yml"];
+        const hasValidType = validTypes.includes(file.type);
+        const hasValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
+        if (!hasValidType && !hasValidExtension) {
+            return "Please upload a JSON or YAML file";
+        }
+        return null;
+    };
+    const handleFile = useCallback((file) => {
+        setError(null);
+        setIsValidating(true);
+        const validationError = validateFile(file);
+        if (validationError) {
+            setError(validationError);
+            setIsValidating(false);
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            var _a;
+            const content = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+            // Basic validation that it's valid JSON or YAML
+            try {
+                if (file.name.toLowerCase().endsWith(".json")) {
+                    JSON.parse(content);
+                }
+            }
+            catch (_b) {
+                setError("Invalid JSON file");
+                setIsValidating(false);
+                return;
+            }
+            setUploadedFile({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                content,
+            });
+            setIsValidating(false);
+        };
+        reader.onerror = () => {
+            setError("Failed to read file");
+            setIsValidating(false);
+        };
+        reader.readAsText(file);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+            handleFile(files[0]);
+        }
+    }, [handleFile]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    }, []);
+    const handleFileInput = useCallback((e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            handleFile(files[0]);
+        }
+    }, [handleFile]);
+    const handleRemoveFile = () => {
+        setUploadedFile(null);
+        setError(null);
+    };
+    const formatFileSize = (bytes) => {
+        if (bytes < 1024)
+            return bytes + " B";
+        if (bytes < 1024 * 1024)
+            return (bytes / 1024).toFixed(1) + " KB";
+        return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+    };
+    return (React.createElement("div", { className: "min-h-screen bg-white flex flex-col items-center justify-center p-8" },
+        React.createElement("div", { className: "w-full max-w-xl" },
+            React.createElement("div", { className: "mb-8" },
+                React.createElement("button", { type: "button", onClick: onBack, disabled: isLoading, className: "text-sm text-gray-500 hover:text-gray-700 font-medium mb-4 flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700" }),
+                    React.createElement("span", null, "Back"))) : (React.createElement(React.Fragment, null, "\u2190 Back"))),
+                React.createElement("h1", { className: "text-3xl font-semibold text-black mb-3" }, "Upload OpenAPI spec"),
+                React.createElement("p", { className: "text-sm text-gray-600" }, "Upload your OpenAPI specification file (JSON or YAML format) to generate sample apps.")),
+            !uploadedFile ? (React.createElement("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, className: cn("relative rounded-xl border-2 border-dashed transition-all", isDragging
+                    ? "border-blue-500 bg-blue-50"
+                    : "border-gray-200 bg-gray-50", error && "border-red-300 bg-red-50") },
+                React.createElement("label", { className: "flex flex-col items-center justify-center px-8 py-12 cursor-pointer" },
+                    React.createElement("input", { type: "file", className: "hidden", accept: ".json,.yaml,.yml", onChange: handleFileInput, disabled: isValidating }),
+                    isValidating ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "h-12 w-12 mb-4 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600" }),
+                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, "Validating file..."))) : (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-full mb-4 transition-colors", isDragging ? "bg-blue-100" : "bg-white", error && "bg-red-100") }, error ? (React.createElement(AlertCircle, { className: "h-7 w-7 text-red-600" })) : (React.createElement(Upload, { className: cn("h-7 w-7", isDragging ? "text-blue-600" : "text-gray-400") }))),
+                        React.createElement("p", { className: "text-sm font-medium text-gray-900 mb-1" }, isDragging ? ("Drop your file here") : (React.createElement(React.Fragment, null,
+                            React.createElement("span", { className: "text-blue-600" }, "Click to upload"),
+                            " ",
+                            "or drag and drop"))),
+                        React.createElement("p", { className: "text-xs text-gray-500 mb-2" }, "JSON or YAML (max 10MB)"))),
+                    error && (React.createElement("div", { className: "mt-3 text-xs text-red-600 font-medium flex items-center gap-1.5" },
+                        React.createElement(AlertCircle, { className: "h-3.5 w-3.5" }),
+                        error))))) : (React.createElement("div", { className: "space-y-4" },
+                React.createElement("div", { className: "rounded-xl border border-gray-200 bg-white p-4 transition hover:bg-gray-50" },
+                    React.createElement("div", { className: "flex items-start justify-between gap-3" },
+                        React.createElement("div", { className: "flex items-start gap-3 flex-1" },
+                            React.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-green-50" },
+                                React.createElement(FileText, { className: "h-5 w-5 text-green-600" })),
+                            React.createElement("div", { className: "flex-1 min-w-0" },
+                                React.createElement("div", { className: "flex items-center gap-2 mb-1" },
+                                    React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate" }, uploadedFile.name),
+                                    React.createElement("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 flex-shrink-0" },
+                                        React.createElement(Check, { className: "h-3 w-3 text-white" }))),
+                                React.createElement("p", { className: "text-xs text-gray-500" }, formatFileSize(uploadedFile.size)))),
+                        React.createElement("button", { type: "button", onClick: handleRemoveFile, className: "flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600" },
+                            React.createElement(X, { className: "h-4 w-4" })))),
+                React.createElement("div", { className: "rounded-xl bg-blue-50 border border-blue-100 p-4" },
+                    React.createElement("p", { className: "text-xs text-blue-900 font-medium mb-2" }, "What happens next?"),
+                    React.createElement("ul", { className: "space-y-1.5 text-xs text-blue-800" },
+                        React.createElement("li", { className: "flex items-start gap-2" },
+                            React.createElement("span", null, "\u2022"),
+                            React.createElement("span", null, "We'll parse your OpenAPI spec and extract all endpoints")),
+                        React.createElement("li", { className: "flex items-start gap-2" },
+                            React.createElement("span", null, "\u2022"),
+                            React.createElement("span", null, "You'll choose frameworks for which to generate sample apps")),
+                        React.createElement("li", { className: "flex items-start gap-2" },
+                            React.createElement("span", null, "\u2022"),
+                            React.createElement("span", null, "Each app will be pre-configured with auth and example calls")))),
+                React.createElement("div", { className: "flex items-center justify-end gap-3 pt-2" },
+                    React.createElement("button", { type: "button", onClick: handleRemoveFile, disabled: isLoading, className: "rounded-full border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, "Choose different file"),
+                    React.createElement("button", { type: "button", onClick: () => onContinue(uploadedFile), disabled: isLoading, className: "inline-flex items-center gap-2 rounded-full bg-[#2563EB] px-6 py-2.5 text-sm font-medium text-white hover:bg-[#1d4ed8] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" }, isLoading ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
+                        React.createElement("span", null, "Processing..."))) : (React.createElement("span", null, "Continue")))))))));
+}

package/dist/components/sandbox/guardian/header/glassmorphic-combobox.js

@@ -0,0 +1,30 @@
+"use client";
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../ui/command";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../../../lib/utils";
+export default function GlassmorphicCombobox({ options, value, placeholder, className, searchPlaceholder, }) {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const selectedLabel = (_a = options.find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label;
+    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": 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" }))),
+        React.createElement(PopoverContent, { className: cn("w-64 p-0 rounded-xl border border-white/20 bg-black/40 backdrop-blur-xl", "shadow-xl") },
+            React.createElement(Command, { className: "bg-transparent" },
+                React.createElement(CommandInput, { placeholder: searchPlaceholder, className: "bg-transparent placeholder:text-white/60" }),
+                React.createElement(CommandList, { className: "bg-transparent" },
+                    React.createElement(CommandEmpty, { className: "text-white/80" }, "No results found."),
+                    React.createElement(CommandGroup, { className: "bg-transparent" }, options.map((option) => (React.createElement(CommandItem, { key: option.value, value: option.value, className: "cursor-pointer", onSelect: () => {
+                            setOpen(false);
+                            if (option.href && typeof window !== "undefined") {
+                                window.location.href = option.href;
+                            }
+                        } },
+                        React.createElement(CheckIcon, { className: cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") }),
+                        option.label)))))))));
+}

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

@@ -0,0 +1,61 @@
+"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;
+    // 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 = (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))));
+}

package/dist/components/sandbox/guardian/hooks/use-frame-messages.js

@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, useRef } from "react";
+/**
+ * Hook to handle postMessage communication with parent window when in iframe mode.
+ * - Sends IFRAME_READY when mounted
+ * - Listens for UPDATE_VIEW messages and updates URL params accordingly
+ * - Works with useFrameParams() which reads the updated URL params
+ *
+ * Supported UPDATE_VIEW message fields:
+ * - framework: Switch between frameworks (e.g., "nextjs", "react")
+ * - activeFilePath: Change the active file in the editor
+ * - linesStart/linesEnd: Highlight specific line range in the editor
+ * - theme: Override the theme color (hex color)
+ */
+export function useFrameMessages() {
+    const hasSignaledReady = useRef(false);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        // Check if we're in an iframe
+        const isFrame = window.self !== window.top;
+        if (!isFrame)
+            return;
+        // Signal to parent that we're ready to receive messages
+        if (!hasSignaledReady.current && window.parent) {
+            window.parent.postMessage({ type: "IFRAME_READY" }, "*");
+            hasSignaledReady.current = true;
+        }
+        const handleMessage = (event) => {
+            // Optional: Add origin validation for security in production
+            // if (event.origin !== 'https://your-allowed-origin.com') return;
+            const data = event.data;
+            if (data.type === "UPDATE_VIEW") {
+                const url = new URL(window.location.href);
+                // Update URL params based on message
+                if (data.framework !== undefined) {
+                    url.searchParams.set("framework", data.framework);
+                }
+                if (data.activeFilePath !== undefined) {
+                    url.searchParams.set("activeFilePath", data.activeFilePath);
+                }
+                if (data.linesStart !== undefined) {
+                    url.searchParams.set("linesStart", String(data.linesStart));
+                }
+                if (data.linesEnd !== undefined) {
+                    url.searchParams.set("linesEnd", String(data.linesEnd));
+                }
+                if (data.theme !== undefined) {
+                    url.searchParams.set("theme", data.theme);
+                }
+                if (data.iframeUrl !== undefined) {
+                    url.searchParams.set("iframeUrl", data.iframeUrl);
+                }
+                // Update URL without page reload
+                window.history.replaceState({}, "", url.toString());
+                // Dispatch a custom event so React components can react immediately
+                // (useFrameParams may have a slight delay)
+                window.dispatchEvent(new CustomEvent("frameParamsUpdated", { detail: data }));
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, []);
+    return {};
+}

package/dist/components/sandbox/guardian/hooks/use-frame-params.js

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+/**
+ * Hook to read frame-mode search parameters from URL.
+ * These params override config/context when isFrame=true.
+ *
+ * Note: This is a simplified version that reads from window.location.search.
+ * For Next.js apps, you can use the Next.js version that uses useSearchParams.
+ */
+export function useFrameParams() {
+    return useMemo(() => {
+        if (typeof window === "undefined") {
+            return {
+                isFrame: false,
+                framework: undefined,
+                theme: undefined,
+                activeFilePath: undefined,
+                linesStart: undefined,
+                linesEnd: undefined,
+                iframeUrl: undefined,
+            };
+        }
+        const searchParams = new URLSearchParams(window.location.search);
+        const isFrame = searchParams.get("isFrame") === "true";
+        const framework = searchParams.get("framework") || undefined;
+        const theme = searchParams.get("theme") || undefined;
+        const activeFilePath = searchParams.get("activeFilePath") || undefined;
+        const linesStart = searchParams.get("linesStart")
+            ? parseInt(searchParams.get("linesStart"), 10)
+            : undefined;
+        const linesEnd = searchParams.get("linesEnd")
+            ? parseInt(searchParams.get("linesEnd"), 10)
+            : undefined;
+        const iframeUrl = searchParams.get("iframeUrl") || undefined;
+        return {
+            isFrame,
+            framework,
+            theme,
+            activeFilePath,
+            linesStart,
+            linesEnd,
+            iframeUrl,
+        };
+    }, [typeof window !== "undefined" ? window.location.search : ""]);
+}