@sampleapp.ai/sdk 1.0.43 → 1.0.45

package/dist/components/sandbox/guardian/ui/markdown.js

@@ -33,6 +33,7 @@ import { CardGroup } from "./markdown/card-group";
 import { Card } from "./markdown/card-group/card";
 import CodeFocusSection from "../code-focus-section";
 import { DownloadAndOpenButtons } from "./download-and-open-buttons";
+import { useSdkTheme } from "../context/theme-context";
 // Stub components for components that don't exist in SDK
 const ButtonFileServer = ({ title, description, filePath, feature, fileContent, color, }) => {
     return null; // Stub - not implemented in SDK
@@ -51,7 +52,8 @@ const createId = (text) => {
 };
 export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
     prevProps.className === nextProps.className);
-export const Markdown = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey, }) => {
+/** Internal Markdown component that accepts isDark prop */
+const MarkdownInternal = ({ children, className, isRestricted, showToc, themeColor, browserUrl, gitUrl, sandboxId, apiKey, isDark, }) => {
     const headingRenderer = (level) => {
         return (_a) => {
             var _b, _c;
@@ -60,10 +62,10 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
             const id = createId(text);
             const isFirstElement = ((_c = (_b = node === null || node === void 0 ? void 0 : node.position) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.offset) === 0;
             const HeadingClasses = {
-                1: cn("scroll-m-20 text-3xl font-bold tracking-tight lg:text-3xl mb-7 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-16"),
-                2: cn("scroll-m-20 text-2xl font-bold tracking-tight mb-7 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-14"),
-                3: cn("scroll-m-20 text-xl font-bold tracking-tight mb-6 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-10"),
-                4: cn("scroll-m-20 text-lg font-bold tracking-tight mb-6 text-zinc-900 dark:text-zinc-50", !isFirstElement && "mt-10"),
+                1: cn("scroll-m-20 text-3xl font-bold tracking-tight lg:text-3xl mb-7", isDark ? "text-zinc-50" : "text-zinc-900", !isFirstElement && "mt-16"),
+                2: cn("scroll-m-20 text-2xl font-bold tracking-tight mb-7", isDark ? "text-zinc-50" : "text-zinc-900", !isFirstElement && "mt-14"),
+                3: cn("scroll-m-20 text-xl font-bold tracking-tight mb-6", isDark ? "text-zinc-50" : "text-zinc-900", !isFirstElement && "mt-10"),
+                4: cn("scroll-m-20 text-lg font-bold tracking-tight mb-6", isDark ? "text-zinc-50" : "text-zinc-900", !isFirstElement && "mt-10"),
             };
             const Tag = `h${level}`;
             return (React.createElement(Tag, Object.assign({ id: id, className: HeadingClasses[level] }, props),
@@ -196,11 +198,11 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
                 // If there's a block-level component, don't wrap in <p>, just return a <div> or fragment
                 return React.createElement("div", Object.assign({}, props), children);
             }
-            return (React.createElement("div", Object.assign({ className: cn("leading-6 text-zinc-700 dark:text-zinc-300 text-sm", !isFirstElement && "mt-5") }, props), children));
+            return (React.createElement("div", Object.assign({ className: cn("leading-6 text-sm", isDark ? "text-zinc-300" : "text-zinc-700", !isFirstElement && "mt-5") }, props), children));
         },
         // List
         li({ children }) {
-            return (React.createElement("li", { className: "text-zinc-700 dark:text-zinc-300 leading-7 text-sm" }, children));
+            return (React.createElement("li", { className: cn("leading-7 text-sm", isDark ? "text-zinc-300" : "text-zinc-700") }, children));
         },
         // Unordered List
         ul({ children }) {
@@ -214,12 +216,14 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
             var { children, href } = _a, props = __rest(_a, ["children", "href"]);
             const isInternal = href === null || href === void 0 ? void 0 : href.startsWith("#");
             return (React.createElement("a", Object.assign({ className: cn("font-medium transition-colors underline underline-offset-4", isInternal
-                    ? "text-zinc-900 hover:text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-300"
+                    ? isDark
+                        ? "text-zinc-100 hover:text-zinc-300"
+                        : "text-zinc-900 hover:text-zinc-700"
                     : "text-[var(--colors-primary)] hover:text-[var(--colors-primary)]"), target: isInternal ? undefined : "_blank", rel: isInternal ? undefined : "noopener noreferrer", href: href }, props), children));
         },
         // "> This is ÷a quote"
         blockquote({ children }) {
-            return (React.createElement("blockquote", { className: "mt-4 border-l-4 border-zinc-200 dark:border-zinc-800 pl-6 italic text-zinc-800 dark:text-zinc-200" }, children));
+            return (React.createElement("blockquote", { className: cn("mt-4 border-l-4 pl-6 italic", isDark ? "border-zinc-800 text-zinc-200" : "border-zinc-200 text-zinc-800") }, children));
         },
         code(_a) {
             var _b, _c;
@@ -229,7 +233,7 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
             // If it's an inline code block, render it as a small block by default
             // so it visually separates from the surrounding text instead of sitting inline.
             if (isInline) {
-                return (React.createElement("code", Object.assign({ className: cn("inline-block text-zinc-900 dark:text-zinc-100 text-sm bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg mt-2 font-mono", className) }, props), children));
+                return (React.createElement("code", Object.assign({ className: cn("inline-block text-sm px-2 py-1 rounded-lg mt-2 font-mono", isDark ? "text-zinc-100 bg-zinc-800" : "text-zinc-900 bg-zinc-100", className) }, props), children));
             }
             // Extract language and title
             const language = (match === null || match === void 0 ? void 0 : match[1]) || "";
@@ -244,7 +248,7 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
         },
     };
     return (React.createElement("div", { className: "mx-auto min-w-0" },
-        React.createElement(MemoizedReactMarkdown, { className: cn("prose prose-slate dark:prose-invert max-w-none", "prose-headings:font-semibold prose-headings:tracking-tight", "[&>*:first-child]:mt-0", "prose-p:leading-7", "prose-li:leading-7", "prose-code:rounded-md prose-code:bg-zinc-100 dark:prose-code:bg-zinc-800 prose-code:px-2 prose-code:py-1", "prose-pre:rounded-lg prose-pre:border prose-pre:border-zinc-200 dark:prose-pre:border-zinc-800", "prose-img:rounded-lg prose-img:border prose-img:border-zinc-200 dark:prose-img:border-zinc-800", "prose-blockquote:border-l-4 prose-blockquote:border-zinc-200 dark:prose-blockquote:border-zinc-800", "prose-table:border prose-table:border-zinc-200 dark:prose-table:border-zinc-800", "prose-a:no-underline hover:prose-a:underline", className), remarkPlugins: [
+        React.createElement(MemoizedReactMarkdown, { className: cn("prose prose-slate max-w-none", isDark && "prose-invert", "prose-headings:font-semibold prose-headings:tracking-tight", "[&>*:first-child]:mt-0", "prose-p:leading-7", "prose-li:leading-7", "prose-code:rounded-md prose-code:px-2 prose-code:py-1", isDark ? "prose-code:bg-zinc-800" : "prose-code:bg-zinc-100", "prose-pre:rounded-lg prose-pre:border", isDark ? "prose-pre:border-zinc-800" : "prose-pre:border-zinc-200", "prose-img:rounded-lg prose-img:border", isDark ? "prose-img:border-zinc-800" : "prose-img:border-zinc-200", "prose-blockquote:border-l-4", isDark ? "prose-blockquote:border-zinc-800" : "prose-blockquote:border-zinc-200", "prose-table:border", isDark ? "prose-table:border-zinc-800" : "prose-table:border-zinc-200", "prose-a:no-underline hover:prose-a:underline", className), remarkPlugins: [
                 remarkGfm,
                 remarkMath,
                 // add remarkMdx to the remarkPlugins array
@@ -253,15 +257,20 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
                 ? sharedComponents
                 : Object.assign(Object.assign({}, sharedComponents), { h1: headingRenderer(1), h2: headingRenderer(2), h3: headingRenderer(3), h4: headingRenderer(4), table({ children }) {
                         return (React.createElement("div", { className: "my-6 w-full overflow-x-auto rounded-lg" },
-                            React.createElement("table", { className: "w-full border-collapse border border-zinc-200 dark:border-zinc-800" }, children)));
+                            React.createElement("table", { className: cn("w-full border-collapse border", isDark ? "border-zinc-800" : "border-zinc-200") }, children)));
                     },
                     th({ children }) {
-                        return (React.createElement("th", { className: "border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-left font-semibold bg-zinc-50 dark:bg-zinc-900" }, children));
+                        return (React.createElement("th", { className: cn("border px-4 py-2 text-left font-semibold", isDark ? "border-zinc-800 bg-zinc-900" : "border-zinc-200 bg-zinc-50") }, children));
                     },
                     td({ children }) {
-                        return (React.createElement("td", { className: "border border-zinc-200 dark:border-zinc-800 px-4 py-2" }, children));
+                        return (React.createElement("td", { className: cn("border px-4 py-2", isDark ? "border-zinc-800" : "border-zinc-200") }, children));
                     } }) }, children)));
 };
+/** Wrapper component that uses theme context */
+export const Markdown = (props) => {
+    const { isDark } = useSdkTheme();
+    return React.createElement(MarkdownInternal, Object.assign({}, props, { isDark: isDark }));
+};
 // import React, { FC, useEffect, useState } from "react";
 // import { cn } from "@/lib/utils";
 // import { MDXProvider } from "@mdx-js/react";

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

@@ -33,7 +33,7 @@ function getGradientColors(title) {
 /**
  * SandboxCard component - displays an individual template card
  */
-export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbox", imageUrl, }) => {
+export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbox", imageUrl, isDark = true, }) => {
     // Ensure title is always a string
     const safeTitle = title || "";
     const safeDescription = description || "";
@@ -50,14 +50,16 @@ export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbo
             window.location.href = `${cleanBasePath}/${sandboxId}`;
         }
     };
-    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-zinc-300 dark:hover:border-[#444] focus-visible:outline-none cursor-pointer" },
+    return (React.createElement("div", { onClick: handleClick, className: `group relative block min-w-[240px] w-full h-[200px] border rounded-lg overflow-hidden transition-all duration-100 ease-out focus-visible:outline-none cursor-pointer ${isDark
+            ? "border-[#333] bg-[#0a0a0a] hover:border-[#444]"
+            : "border-zinc-200 bg-zinc-50 hover:border-zinc-300"}` },
         React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
             React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-zinc-900 dark:text-white" }, safeTitle),
+                React.createElement("h3", { className: `text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 ${isDark ? "text-white" : "text-zinc-900"}` }, safeTitle),
                 React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
-            React.createElement("p", { className: "text-[14px] text-zinc-500 dark:text-gray-400 m-0 line-clamp-2" }, safeDescription)),
-        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
+            React.createElement("p", { className: `text-[14px] m-0 line-clamp-2 ${isDark ? "text-gray-400" : "text-zinc-500"}` }, safeDescription)),
+        React.createElement("div", { className: `absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5 ${isDark ? "border-[#333]" : "border-zinc-200"}` }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
             React.createElement("div", { className: "w-full px-6 space-y-2" },
                 React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
                 React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),

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

@@ -1,9 +1,21 @@
 "use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useState, useMemo, useEffect } from "react";
 import { SandboxCard } from "./SandboxCard";
 import { SearchBar } from "./SearchBar";
 import { createApiClient } from "../../../lib/api-client";
 import { Skeleton } from "../../ui/skeleton";
+import { SdkThemeProvider, useSdkTheme } from "../guardian/context/theme-context";
 /**
  * Transform SandboxContentPublic to SandboxItem
  */
@@ -37,10 +49,12 @@ function transformSandboxContent(content) {
         sandboxId: content.uid,
     };
 }
-export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }) => {
+/** Internal component that uses theme context */
+const SandboxHomeInternal = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }) => {
+    const { isDark } = useSdkTheme();
     // Validate apiKey immediately
     if (!apiKey || apiKey.trim() === "") {
-        return (React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-white dark:bg-black" },
+        return (React.createElement("div", { className: `flex items-center justify-center min-h-screen ${isDark ? "bg-black" : "bg-white"}` },
             React.createElement("div", { className: "text-red-500" }, "Error: apiKey is required. Please provide a valid API key.")));
     }
     // Start loading as true if we need to fetch (no sandboxes prop provided)
@@ -95,26 +109,31 @@ export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }
             return matchesTitle || matchesDescription;
         });
     }, [allSandboxes, searchQuery]);
-    return (React.createElement("div", { className: "min-h-screen bg-white dark:bg-black" },
+    return (React.createElement("div", { className: `min-h-screen ${isDark ? "bg-black" : "bg-white"}` },
         React.createElement("div", { className: "pt-16 pb-12 px-4 md:px-6" },
             React.createElement("div", { className: "max-w-[1400px] mx-auto" },
-                React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery }))),
+                React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery, isDark: isDark }))),
         React.createElement("div", { className: "px-4 md:px-6 pb-16" },
-            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: `relative block min-w-[240px] w-full h-[200px] border rounded-lg overflow-hidden ${isDark ? "border-[#333] bg-[#0a0a0a]" : "border-zinc-200 bg-zinc-50"}` },
                 React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
                     React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                        React.createElement(Skeleton, { className: "h-5 w-32 bg-zinc-200 dark:bg-zinc-800" })),
-                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-200 dark:bg-zinc-800 mt-1" }),
-                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-200 dark:bg-zinc-800 mt-1" })),
-                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
-                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-200 dark:bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                        React.createElement(Skeleton, { className: `h-5 w-32 ${isDark ? "bg-zinc-800" : "bg-zinc-200"}` })),
+                    React.createElement(Skeleton, { className: `h-4 w-full mt-1 ${isDark ? "bg-zinc-800" : "bg-zinc-200"}` }),
+                    React.createElement(Skeleton, { className: `h-4 w-3/4 mt-1 ${isDark ? "bg-zinc-800" : "bg-zinc-200"}` })),
+                React.createElement("div", { className: `absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border overflow-hidden shadow-lg rotate-[-5deg] ${isDark ? "border-[#333]" : "border-zinc-200"}` },
+                    React.createElement(Skeleton, { className: `w-full h-full ${isDark ? "bg-zinc-800" : "bg-zinc-200"}` }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
                 React.createElement("p", { className: "text-red-500 text-lg" },
                     "Error: ",
                     error),
-                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                React.createElement("p", { className: `text-sm mt-2 ${isDark ? "text-gray-500" : "text-zinc-500"}` }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
                 .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
-                .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId, basePath: basePath, imageUrl: `https://sampleappassets.blob.core.windows.net/assets/${orgid}/${sandbox.id}.png` })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
-                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-lg" }, searchQuery
+                .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId, basePath: basePath, imageUrl: `https://sampleappassets.blob.core.windows.net/assets/${orgid}/${sandbox.id}.png`, isDark: isDark })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
+                React.createElement("p", { className: `text-lg ${isDark ? "text-gray-500" : "text-zinc-500"}` }, searchQuery
                     ? `No sandboxes found matching "${searchQuery}".`
                     : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
 };
+export const SandboxHome = (_a) => {
+    var { theme = "dark" } = _a, props = __rest(_a, ["theme"]);
+    return (React.createElement(SdkThemeProvider, { theme: theme },
+        React.createElement(SandboxHomeInternal, Object.assign({}, props))));
+};

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

@@ -3,10 +3,12 @@ import React from "react";
 /**
  * SearchBar component - provides search input for filtering sandboxes
  */
-export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", }) => {
+export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", isDark = true, }) => {
     return (React.createElement("div", { className: "relative max-w-md mx-auto" },
         React.createElement("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none" },
-            React.createElement("svg", { className: "w-4 h-4 text-zinc-400 dark:text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("svg", { className: `w-4 h-4 ${isDark ? "text-gray-500" : "text-zinc-400"}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))),
-        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-white dark:bg-[#0a0a0a] border border-zinc-200 dark:border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-gray-500 focus:outline-none focus:border-zinc-400 dark:focus:border-gray-600 transition-colors" })));
+        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: `w-full border rounded-lg py-3 pl-11 pr-4 text-sm focus:outline-none transition-colors ${isDark
+                ? "bg-[#0a0a0a] border-[#222] text-white placeholder:text-gray-500 focus:border-gray-600"
+                : "bg-white border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400"}` })));
 };

package/dist/hooks/use-tree-selector.js

@@ -3,7 +3,7 @@
  * Handles selection state and derives UI sections from the tree config
  */
 import { useState, useMemo, useCallback } from "react";
-import { getDefaultPath, getSelectableSections, updateSelectionPath, createSelection, } from "../lib/tree-utils";
+import { getDefaultPath, getSelectableSections, updateSelectionPath, createSelection } from "../lib/tree-utils";
 import { findMatchingContent, hasContentForSelection } from "../lib/content-matcher";
 /**
  * Hook for managing tree-based tech stack selection
@@ -33,7 +33,7 @@ import { findMatchingContent, hasContentForSelection } from "../lib/content-matc
  * ))}
  * ```
  */
-export function useTreeSelector({ config, allContent, initialPath, onSelectionChange, }) {
+export function useTreeSelector({ config, allContent, initialPath, onSelectionChange }) {
     // Initialize selection path
     const [selectionPath, setSelectionPath] = useState(() => {
         if (initialPath && initialPath.length > 0) {
@@ -92,7 +92,7 @@ export function useTreeSelector({ config, allContent, initialPath, onSelectionCh
         currentContent,
         selectOption,
         resetToDefault,
-        setSelectionPath: setPath,
+        setSelectionPath: setPath
     };
 }
 export default useTreeSelector;

package/dist/index.d.ts

@@ -397,7 +397,7 @@ export declare const getTheme: (themeName?: ThemeName) => ThemeColors;
 export declare function getUniqueFieldValues(allContent: SandboxContent[], field: keyof Pick<SandboxContent, "product" | "product_version" | "architecture" | "frontend" | "backend" | "framework">): string[];
 
 export declare function GuardianComponent({ sections, onSelect, currentFramework, currentUseCase, CustomConsole, GuideView, playgroundLogo, playgroundUid, browserUrl, useVm, sandboxUid, codeZipFile, completeCodeZipFile, variant, themeColor, hasPreview, isFrame, apiKey, env, chatUid, hideHeader, // Hardcoded to true by default, not exposed in Sandbox.tsx
-    gitUrl, }: GuardianComponentProps): default_2.JSX.Element;
+    gitUrl, hasNetworkView }: GuardianComponentProps): default_2.JSX.Element;
 
 export declare interface GuardianComponentProps {
     name: string;
@@ -445,6 +445,8 @@ export declare interface GuardianComponentProps {
     /* Excluded from this release type: hideHeader */
     /** Optional Git URL for opening the project in VSCode */
     gitUrl?: string;
+    /** Whether to show the network requests view tab */
+    hasNetworkView?: boolean;
 }
 
 /**
@@ -492,8 +494,12 @@ export declare type GuardianNestedConfig = Record<string, GuardianUseCaseConfig>
 /**
  * Guardian Playground component with tree-based tech stack selection.
  * Uses sections from useTreeSelector for dynamic header rendering.
+ *
+ * Note: Frame param overrides for node types (architecture, frontend, backend, etc.)
+ * are now handled in Sandbox.tsx via the tree selector sync mechanism.
+ * This component receives the already-resolved framework from the tree selector.
  */
-export declare function GuardianPlayground({ sandboxConfig, sections, onSelect, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, theme, }: GuardianPlaygroundProps): default_2.JSX.Element;
+export declare function GuardianPlayground({ sandboxConfig, sections, onSelect, useCase, framework, isFrame, apiKey, env, chatUid, theme, hasNetworkView }: GuardianPlaygroundProps): default_2.JSX.Element;
 
 declare interface GuardianPlaygroundProps {
     /** Sandbox configuration */
@@ -504,7 +510,7 @@ declare interface GuardianPlaygroundProps {
     onSelect: (nodeType: string, key: string) => void;
     /** Current use case ID */
     useCase: string;
-    /** Current framework key (from server-side props) */
+    /** Current framework key (from tree selector) */
     framework: string;
     /** Whether to render in frame mode (just the right view) */
     isFrame?: boolean;
@@ -516,6 +522,8 @@ declare interface GuardianPlaygroundProps {
     chatUid?: string;
     /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
     theme?: ThemeMode;
+    /** Whether to show the network requests view tab */
+    hasNetworkView?: boolean;
 }
 
 export declare function GuardianProvider({ children }: {
@@ -605,6 +613,16 @@ declare interface ModalSearchAndChatProps {
  */
 export declare const NODE_TYPE_LABELS: Record<string, string>;
 
+/**
+ * All supported node types for tech stack selection
+ */
+export declare const NODE_TYPES: readonly ["root", "product", "version", "architecture", "frontend", "backend", "framework", "integration", "platform"];
+
+/**
+ * Type for node types
+ */
+export declare type NodeType = (typeof NODE_TYPES)[number];
+
 /**
  * Convert a path to a byType map
  * @param root - The root node
@@ -652,7 +670,7 @@ declare class SampleAppSDK {
  * />
  * ```
  */
-export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config, }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, config }: SandboxProps): default_2.JSX.Element | null;
 
 /**
  * Configuration fetched from the API for a sandbox
@@ -680,6 +698,16 @@ declare interface SandboxConfig {
     useCases: GuardianUseCase[];
 }
 
+/**
+ * Configuration options for the Sandbox component
+ */
+declare interface SandboxConfigOptions {
+    /** Whether to render in frame mode (just the right view) */
+    isFrame?: boolean;
+    /** Whether to show the network requests view tab. Defaults to false */
+    hasNetworkView?: boolean;
+}
+
 /**
  * Extended sandbox configuration with tree-based tech stack selection
  */
@@ -735,6 +763,7 @@ export declare interface SandboxHomeProps {
     orgid: string;
     sandboxes?: SandboxItem[];
     basePath?: string;
+    theme?: ThemeMode;
 }
 
 export declare interface SandboxItem {
@@ -762,8 +791,8 @@ export declare interface SandboxProps {
     themeColor?: string;
     /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
     theme?: ThemeMode;
-    /** Configuration for the sandbox */
-    config?: any;
+    /** Configuration options for the sandbox */
+    config?: SandboxConfigOptions;
 }
 
 export declare interface SandboxUseCase {
@@ -787,6 +816,11 @@ export declare interface SDKSettings {
     aiChatSettings?: AiChatSettings;
 }
 
+/**
+ * Selectable node types (excludes "root" which is not user-selectable)
+ */
+export declare const SELECTABLE_NODE_TYPES: Exclude<NodeType, "root">[];
+
 /**
  * A single option within a selector section
  */
@@ -799,6 +833,8 @@ export declare interface SelectorOption {
     isSelected: boolean;
     /** Whether this option has content available (for disabling unavailable options) */
     hasContent?: boolean;
+    /** Whether this option is a leaf node (has no children) */
+    isLeaf?: boolean;
 }
 
 /**
@@ -967,7 +1003,7 @@ export declare function updateSelectionPath(config: TechStackConfig, currentPath
  * ))}
  * ```
  */
-export declare function useTreeSelector({ config, allContent, initialPath, onSelectionChange, }: UseTreeSelectorOptions): UseTreeSelectorReturn;
+export declare function useTreeSelector({ config, allContent, initialPath, onSelectionChange }: UseTreeSelectorOptions): UseTreeSelectorReturn;
 
 export declare interface UseTreeSelectorOptions {
     /** The tech stack configuration tree */