@sampleapp.ai/sdk 1.0.29 → 1.0.31

package/dist/components/sandbox/guardian/ui/dropdown-menu.js

@@ -0,0 +1,82 @@
+"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 * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../../../lib/utils";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
+    var { className, inset, children, hideChevron } = _a, props = __rest(_a, ["className", "inset", "children", "hideChevron"]);
+    return (React.createElement(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn("flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props),
+        children,
+        !hideChevron && React.createElement(ChevronRight, { className: "ml-auto" })));
+});
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)));
+});
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef((_a, ref) => {
+    var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
+    return (React.createElement(DropdownMenuPrimitive.Portal, null,
+        React.createElement(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props))));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (React.createElement(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className) }, props)));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
+    var { className, children, checked } = _a, props = __rest(_a, ["className", "children", "checked"]);
+    return (React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked }, props),
+        React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(Check, { className: "h-4 w-4" }))),
+        children));
+});
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className) }, props),
+        React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(Circle, { className: "h-2 w-2 fill-current" }))),
+        children));
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (React.createElement(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className) }, props)));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className) }, props)));
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("span", Object.assign({ className: cn("ml-auto text-xs tracking-widest opacity-60", className) }, props)));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { cn } from "../../../../../../lib/utils";
+import { ChevronRight } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+import { Markdown } from "../../markdown";
+export const Accordion = ({ title, children, icon, defaultOpen = false, className, inGroup = false, }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const IconComponent = icon
+        ? LucideIcons[icon]
+        : null;
+    const processNode = (node) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Handle string nodes (like whitespace and text)
+        if (typeof node === "string") {
+            return node;
+        }
+        // Handle arrays (like the root structure)
+        if (Array.isArray(node)) {
+            return node.map((item) => processNode(item)).join("");
+        }
+        // Handle React elements and objects
+        if (React.isValidElement(node) || (node && typeof node === "object")) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const element = node; // Type assertion for accessing properties
+            // Handle pre elements
+            if (element.type === "pre") {
+                const preChildren = (_a = element.props) === null || _a === void 0 ? void 0 : _a.children;
+                // Handle the nested code structure
+                if ((_b = preChildren === null || preChildren === void 0 ? void 0 : preChildren.props) === null || _b === void 0 ? void 0 : _b.children) {
+                    return preChildren.props.children;
+                }
+                // Handle direct code content
+                if ((_f = (_e = (_d = (_c = preChildren === null || preChildren === void 0 ? void 0 : preChildren.props) === null || _c === void 0 ? void 0 : _c.node) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.value) {
+                    return preChildren.props.node.children[0].value;
+                }
+            }
+            // Recursively process children
+            if ((_g = element.props) === null || _g === void 0 ? void 0 : _g.children) {
+                return processNode(element.props.children);
+            }
+        }
+        return "";
+    };
+    const markdownContent = processNode(children).trim();
+    return (React.createElement("div", { className: cn(inGroup
+            ? "border-b border-zinc-200 last:border-0 dark:border-zinc-800"
+            : "rounded-lg border border-zinc-200 dark:border-zinc-800", className) },
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), className: cn("flex w-full items-center justify-between px-4 py-3", inGroup
+                ? "hover:bg-zinc-100 dark:hover:bg-zinc-800/70"
+                : "rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800/70", "bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[#0066FF] dark:focus-visible:ring-[#66A3FF]", isOpen && "bg-zinc-100 dark:bg-zinc-800") },
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(ChevronRight, { className: cn("h-4 w-4 transition-transform duration-200", isOpen
+                        ? "rotate-90 text-[#0066FF] dark:text-[#66A3FF]"
+                        : "text-zinc-500 dark:text-zinc-400") }),
+                IconComponent && (React.createElement(IconComponent, { className: "h-4 w-4 flex-shrink-0 text-[#0066FF] dark:text-[#66A3FF]" })),
+                React.createElement("span", { className: cn("text-sm font-medium", isOpen
+                        ? "text-[#0066FF] dark:text-[#66A3FF]"
+                        : "text-zinc-700 dark:text-zinc-200") }, title))),
+        React.createElement("div", { className: cn("overflow-hidden transition-all duration-200", isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0") },
+            React.createElement("div", { className: "px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300 bg-transparent" },
+                React.createElement(Markdown, null, markdownContent)))));
+};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../../../../lib/utils";
+export const AccordionGroup = ({ children, className, }) => {
+    // More strict version with type checking
+    const childrenWithProps = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+        // Type guard to check if the child has the expected props
+        const hasRequiredProps = (element) => {
+            return "children" in element.props;
+        };
+        if (!hasRequiredProps(child)) {
+            return null;
+        }
+        if (typeof child.props.children === "string" &&
+            !child.props.children.trim()) {
+            return null;
+        }
+        return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { inGroup: true }));
+    });
+    return (React.createElement("div", { className: cn("rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950", className) }, childrenWithProps));
+};

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-check.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { CheckCircle2 } from "lucide-react";
+import React from "react";
+export const CalloutCheck = ({ children }) => (React.createElement(Callout, { className: "border-emerald-200 bg-emerald-100 text-emerald-900 dark:border-emerald-800/30 dark:bg-emerald-900/30 dark:text-emerald-200", icon: React.createElement(CheckCircle2, { className: "h-5 w-5 text-emerald-500 dark:text-emerald-400" }) }, children));

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-error.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { AlertTriangle } from "lucide-react";
+import React from "react";
+export const CalloutError = ({ children }) => (React.createElement(Callout, { className: "border-red-200 bg-red-100 text-red-900 dark:border-red-800/30 dark:bg-red-900/30 dark:text-red-200", icon: React.createElement(AlertTriangle, { className: "h-5 w-5 text-red-500 dark:text-red-400" }) }, children));

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-info.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { Info } from "lucide-react";
+import React from "react";
+export const CalloutInfo = ({ children }) => (React.createElement(Callout, { className: "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-800/30 dark:bg-blue-900/30 dark:text-blue-200", icon: React.createElement(Info, { className: "h-5 w-5 text-blue-500 dark:text-blue-400" }) }, children));

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-note.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { AlertCircle } from "lucide-react";
+import React from "react";
+export const CalloutNote = ({ children }) => (React.createElement(Callout, { className: "border-neutral-200 bg-neutral-100 text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900/40 dark:text-neutral-200", icon: React.createElement(AlertCircle, { className: "h-5 w-5 text-neutral-500 dark:text-neutral-400" }) }, children));

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-tip.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { Star } from "lucide-react";
+import React from "react";
+export const CalloutTip = ({ children }) => (React.createElement(Callout, { className: "border-emerald-200 bg-emerald-100 text-emerald-900 dark:border-emerald-800/30 dark:bg-emerald-900/30 dark:text-emerald-200", icon: React.createElement(Star, { className: "h-5 w-5 text-emerald-500 dark:text-emerald-400" }) }, children));

package/dist/components/sandbox/guardian/ui/markdown/callout/callout-warning.js

@@ -0,0 +1,4 @@
+import { Callout } from "./shared/callout";
+import { AlertTriangle } from "lucide-react";
+import React from "react";
+export const CalloutWarning = ({ children }) => (React.createElement(Callout, { className: "border-amber-200 bg-amber-100 text-amber-900 dark:border-amber-800/30 dark:bg-amber-900/30 dark:text-amber-200", icon: React.createElement(AlertTriangle, { className: "h-5 w-5 text-amber-500 dark:text-amber-400" }) }, children));

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { cn } from "../../../../../../../lib/utils";
+import { Markdown } from "../../../markdown";
+export const Callout = ({ children, className, icon }) => {
+    return (React.createElement("div", { className: cn("my-4 flex items-start gap-4 rounded-md border bg-opacity-10 p-4", className) },
+        icon && React.createElement("div", { className: "mt-0.5 flex-shrink-0" }, icon),
+        React.createElement("div", null,
+            React.createElement(Markdown, null, children))));
+};

package/dist/components/sandbox/guardian/ui/markdown/callout/shared/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { cn } from "../../../../../../lib/utils";
+import * as LucideIcons from "lucide-react";
+export const Card = ({ title, children, icon, href, img, horizontal = false, className, }) => {
+    const IconComponent = icon
+        ? LucideIcons[icon]
+        : null;
+    const CardContent = () => (React.createElement(React.Fragment, null,
+        img && (React.createElement("div", { className: "overflow-hidden rounded-t-lg" },
+            React.createElement("img", { src: img, alt: title, className: "aspect-[2/1] w-full object-cover" }))),
+        React.createElement("div", { className: cn("flex flex-col space-y-2", horizontal ? "flex-row items-start space-x-4 space-y-0" : "", img ? "p-4" : "p-6") },
+            React.createElement("div", { className: "flex-1" },
+                IconComponent && (React.createElement(IconComponent, { className: "mb-2 h-5 w-5 text-[#0066FF] dark:text-[#66A3FF]" })),
+                React.createElement("h3", { className: "font-bold text-zinc-900 dark:text-zinc-100" }, title),
+                React.createElement("p", { className: "mt-2 text-zinc-600 dark:text-zinc-400" }, children)))));
+    return (React.createElement("div", { className: cn("group relative rounded-lg border border-zinc-200 bg-white transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950", className) }, href ? (React.createElement("a", { href: href, className: "flex h-full flex-col", target: "_blank", rel: "noopener noreferrer" },
+        React.createElement(CardContent, null))) : (React.createElement(CardContent, null))));
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "../../../../../lib/utils";
+//TODO: Fix the bug on not being able to display different number of columns
+export const CardGroup = ({ children, cols = 2, className, }) => {
+    // Helper function to get the correct column classes
+    const getColumnClass = () => {
+        switch (cols) {
+            case 1:
+                return "grid-cols-1";
+            case 2:
+                return "grid-cols-1 sm:grid-cols-2";
+            case 3:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+            case 4:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+            case 5:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5";
+            case 6:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6";
+            default:
+                return "grid-cols-1 sm:grid-cols-2";
+        }
+    };
+    return (React.createElement("div", { className: cn("grid gap-4", getColumnClass(), className) }, children));
+};

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

@@ -0,0 +1,54 @@
+import React, { memo, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } 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);
+    let code = value;
+    if (typeof children === "string") {
+        code = children;
+    }
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code || "");
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy code:", err);
+        }
+    };
+    // 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: {
+                            margin: 0,
+                            padding: 0,
+                            background: "transparent",
+                            fontSize: "13px",
+                            width: "100%",
+                            minWidth: 0,
+                            maxWidth: "100%",
+                        }, 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("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: {
+                        margin: 0,
+                        padding: 0,
+                        background: "transparent",
+                        fontSize: "13px",
+                        width: "100%",
+                        minWidth: 0,
+                        maxWidth: "100%",
+                    }, wrapLongLines: false }, code || "")))));
+});
+CodeBlock.displayName = "CodeBlock";

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Copy } from "lucide-react";
+import { cn } from "../../../../../lib/utils";
+import { CodeBlock } from "./code-group/code-block";
+export const CodeGroup = ({ children }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    const [copied, setCopied] = useState(false);
+    const parseCodeBlock = (element) => {
+        if (!element || !element.props) {
+            console.warn("Invalid code block element");
+            return null;
+        }
+        try {
+            // Handle both direct string content and nested code elements
+            let codeElement = null;
+            let content = "";
+            if (typeof element.props.children === "string") {
+                content = element.props.children.trim();
+                // Use the pre element's className if available
+                const classNameRaw = element.props.className || "";
+                const parts = classNameRaw.replace(/^language-/, "").split(" ");
+                const language = parts[0] || "plain";
+                const title = parts.slice(1).join(" ") || language;
+                return { language, title, content };
+            }
+            // Handle nested code element
+            if (Array.isArray(element.props.children)) {
+                const codeChild = element.props.children.find((child) => React.isValidElement(child) &&
+                    (child.type === "code" || typeof child.type === "string"));
+                if (codeChild) {
+                    codeElement = codeChild;
+                }
+            }
+            else if (React.isValidElement(element.props.children)) {
+                codeElement = element.props.children;
+            }
+            if (!codeElement || !codeElement.props) {
+                console.warn("No valid code element found");
+                return null;
+            }
+            const classNameRaw = codeElement.props.className || "";
+            const parts = classNameRaw.replace(/^language-/, "").split(" ");
+            const language = parts[0] || "plain";
+            const title = parts.slice(1).join(" ") || language;
+            // Handle different content structures
+            if (typeof codeElement.props.children === "string") {
+                content = codeElement.props.children.trim();
+            }
+            else if (Array.isArray(codeElement.props.children)) {
+                content = codeElement.props.children
+                    .map((child) => {
+                    var _a;
+                    return typeof child === "string"
+                        ? child
+                        : React.isValidElement(child)
+                            ? ((_a = child.props.children) === null || _a === void 0 ? void 0 : _a.toString()) || ""
+                            : "";
+                })
+                    .join("")
+                    .trim();
+            }
+            return { language, title, content };
+        }
+        catch (error) {
+            console.error("Failed to parse code block:", error);
+            return null;
+        }
+    };
+    const validChildren = Array.isArray(children) ? children : [children];
+    const blocks = validChildren
+        .filter((child) => React.isValidElement(child) &&
+        (child.type === "pre" || typeof child.type === "string"))
+        .map(parseCodeBlock)
+        .filter((block) => block !== null);
+    if (blocks.length === 0) {
+        console.warn("No valid code blocks found");
+        return null;
+    }
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(blocks[activeTab].content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy code:", err);
+        }
+    };
+    return (React.createElement("div", { className: "relative my-4 rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950" },
+        React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-200 bg-zinc-50/80 dark:border-zinc-800 dark:bg-zinc-900/80" },
+            React.createElement("div", { className: "flex overflow-x-auto" }, blocks.map((block, index) => (React.createElement("button", { key: index, onClick: () => setActiveTab(index), className: cn("min-w-[120px] border-b-2 px-4 py-2 text-sm font-medium", "transition-all duration-200", activeTab === index
+                    ? "border-[#0066FF] text-[#0066FF] dark:border-[#66A3FF] dark:text-[#66A3FF]"
+                    : "border-transparent text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200") }, block.title)))),
+            React.createElement("div", { className: "border-l border-zinc-200 dark:border-zinc-800" },
+                React.createElement("button", { onClick: handleCopy, className: cn("p-2 transition-colors", copied
+                        ? "text-green-500 dark:text-green-400"
+                        : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"), "aria-label": "Copy code" },
+                    React.createElement(Copy, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "group relative" }, blocks.map((block, index) => (React.createElement("div", { key: index, className: cn("relative", activeTab === index ? "block" : "hidden") },
+            React.createElement(CodeBlock, { language: block.language, value: block.content, isInsideCodeGroup: true })))))));
+};

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { cn } from "../../../../../lib/utils";
+import * as LucideIcons from "lucide-react";
+const Icon = ({ icon, size = 24, color = "#0066FF", strokeWidth = 2, absoluteStrokeWidth = false, className, children, }) => {
+    // Ensure `size` is always passed as a string
+    const normalizedSize = typeof size === "number" ? `${size}` : size;
+    // Fetch the appropriate icon component from LucideIcons
+    const IconComponent = icon
+        ? LucideIcons[icon]
+        : null;
+    if (!IconComponent) {
+        console.warn(`Icon "${icon}" not found or not provided`);
+        return (React.createElement("span", { className: cn("inline-block align-middle text-zinc-500 italic", className) }, `Icon "${icon}" not found`));
+    }
+    // Decide rendering behavior based on `children`
+    if (!children) {
+        // No inline text: render as standalone block-level element
+        return (React.createElement("div", { className: cn("block", className), style: {
+                lineHeight: 0, // Prevent extra spacing around the icon
+            } },
+            React.createElement(IconComponent, { size: normalizedSize, color: color, strokeWidth: strokeWidth, absoluteStrokeWidth: absoluteStrokeWidth })));
+    }
+    // Inline text exists: render as inline-flex with the text
+    return (React.createElement("span", { className: cn("inline-flex items-center align-middle gap-1", className), style: {
+            display: "inline-flex",
+            verticalAlign: "middle",
+        } },
+        React.createElement(IconComponent, { size: normalizedSize, color: color, strokeWidth: strokeWidth, absoluteStrokeWidth: absoluteStrokeWidth }),
+        React.createElement("span", null, children)));
+};
+export default Icon;