@sampleapp.ai/sdk 1.0.34 → 1.0.36

package/dist/components/sandbox/guardian/ui/markdown/code-group/code-block.js

@@ -1,10 +1,39 @@
-import React, { memo, useState } from "react";
+import React, { memo, useState, useEffect } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { cn } from "../../../../../../lib/utils";
 import { Copy, CheckCircle2 } from "lucide-react";
 export const CodeBlock = memo(({ language, value, title, className, children, isInsideCodeGroup = false, maxH, }) => {
     const [copied, setCopied] = useState(false);
+    const [isDark, setIsDark] = useState(true);
+    // Detect if we're in dark mode by checking for .dark class on ancestor
+    useEffect(() => {
+        const checkTheme = () => {
+            var _a;
+            if (typeof document === "undefined")
+                return;
+            // Check if guardian-sdk-root has dark class
+            const root = document.querySelector(".guardian-sdk-root");
+            setIsDark((_a = root === null || root === void 0 ? void 0 : root.classList.contains("dark")) !== null && _a !== void 0 ? _a : true);
+        };
+        checkTheme();
+        // Also check on mount with a slight delay to ensure DOM is ready
+        const timer = setTimeout(checkTheme, 100);
+        // Watch for changes using MutationObserver
+        const observer = new MutationObserver(checkTheme);
+        const root = document.querySelector(".guardian-sdk-root");
+        if (root) {
+            observer.observe(root, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+        }
+        return () => {
+            clearTimeout(timer);
+            observer.disconnect();
+        };
+    }, []);
     let code = value;
     if (typeof children === "string") {
         code = children;
@@ -22,33 +51,41 @@ export const CodeBlock = memo(({ language, value, title, className, children, is
     // If inside CodeGroup, render just the code content
     if (isInsideCodeGroup) {
         return (React.createElement("div", { className: "group relative overflow-x-auto" },
-            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-                React.createElement("div", { className: "min-w-0 text-[13px]" },
-                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+                React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                             margin: 0,
                             padding: 0,
-                            background: "transparent",
+                            background: "transparent !important",
                             fontSize: "13px",
                             width: "100%",
                             minWidth: 0,
                             maxWidth: "100%",
+                        }, codeTagProps: {
+                            style: {
+                                background: "transparent !important",
+                            },
                         }, wrapLongLines: false }, code || "")))));
     }
     // Standalone code block with title
     return (React.createElement("div", { className: cn("relative w-full border rounded-lg mb-4", className) },
-        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 text-primary border-b rounded-t-md" },
+        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-primary border-b rounded-t-md" },
             React.createElement("span", { className: "text-xs text-primary font-mono" }, language || title || ""),
-            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-200 hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
-        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-            React.createElement("div", { className: "min-w-0 text-[13px]" },
-                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
+        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+            React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                         margin: 0,
                         padding: 0,
-                        background: "transparent",
+                        background: "transparent !important",
                         fontSize: "13px",
                         width: "100%",
                         minWidth: 0,
                         maxWidth: "100%",
+                    }, codeTagProps: {
+                        style: {
+                            background: "transparent !important",
+                        },
                     }, wrapLongLines: false }, code || "")))));
 });
 CodeBlock.displayName = "CodeBlock";

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

@@ -229,7 +229,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-[var(--colors-primary)] text-sm bg-[var(--colors-secondary)] px-2 py-1 rounded-lg mt-2", className) }, props), children));
+                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));
             }
             // Extract language and title
             const language = (match === null || match === void 0 ? void 0 : match[1]) || "";

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

@@ -50,14 +50,14 @@ 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-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out 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 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" },
         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-white" }, safeTitle),
+                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("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-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-[#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] 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("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

@@ -90,26 +90,26 @@ export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }
             return matchesTitle || matchesDescription;
         });
     }, [allSandboxes, searchQuery]);
-    return (React.createElement("div", { className: "min-h-screen bg-black" },
+    return (React.createElement("div", { className: "min-h-screen bg-white dark:bg-black" },
         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("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-[#333] 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 border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden" },
                 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-800" })),
-                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-800 mt-1" }),
-                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-800 mt-1" })),
-                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
-                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                        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("p", { className: "text-red-500 text-lg" },
                     "Error: ",
                     error),
-                React.createElement("p", { className: "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-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
                 .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-gray-500 text-lg" }, searchQuery
+                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-lg" }, searchQuery
                     ? `No sandboxes found matching "${searchQuery}".`
                     : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
 };

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

@@ -6,7 +6,7 @@ import React from "react";
 export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", }) => {
     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-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 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("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-[#0a0a0a] border border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-gray-600 transition-colors" })));
+        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" })));
 };

package/dist/index.d.ts

@@ -248,7 +248,7 @@ export declare type GuardianNestedConfig = Record<string, GuardianUseCaseConfig>
  *
  * When isFrame=true, reads framework from URL params client-side.
  */
-export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, }: {
+export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, theme, }: {
     /** Nested config structure (use case → framework → config) */
     nestedConfig: GuardianNestedConfig;
     /** Current use case ID */
@@ -263,6 +263,8 @@ export declare function GuardianPlayground({ nestedConfig, useCase, framework: s
     env?: Record<string, string>;
     /** Chat UID for starting sandbox */
     chatUid?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }): default_2.JSX.Element;
 
 export declare function GuardianProvider({ children }: {
@@ -343,9 +345,16 @@ declare class SampleAppSDK {
  *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
  *   sandboxId="launchdarkly-feature-flags"
  * />
+ *
+ * // Light mode
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ *   theme="light"
+ * />
  * ```
  */
-export declare function Sandbox({ apiKey, sandboxId, env, themeColor, }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, }: SandboxProps): default_2.JSX.Element | null;
 
 export declare const SandboxHome: React_2.FC<SandboxHomeProps>;
 
@@ -379,6 +388,8 @@ export declare interface SandboxProps {
     env?: Record<string, string>;
     /** Optional theme color override */
     themeColor?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }
 
 declare interface SandboxUrlConfig {
@@ -431,6 +442,14 @@ export declare interface ThemeColors {
     };
 }
 
+/**
+ * Theme mode for the SDK
+ * - "light": Light mode
+ * - "dark": Dark mode
+ * - "system": Follows system preference
+ */
+export declare type ThemeMode = "light" | "dark" | "system";
+
 export declare type ThemeName = "ocean" | "autumn" | "mint" | "sunset" | "lavender" | "forest" | "coral";
 
 export declare const themes: Record<ThemeName, ThemeColors>;