@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/index.js

@@ -1,25 +1,28 @@
+import {
+  copyText,
+  timeAgo
+} from "./chunk-QD4QE5P5.js";
 import {
   AuthHeader,
   GitHubLoginButton,
   UserMenu
-} from "./chunk-OU4TRNQZ.js";
+} from "./chunk-COCSO7FG.js";
 import {
   createAuthFetcher,
   useApiKey,
-  useAuth,
+  useAuth
+} from "./chunk-FJSVPBKY.js";
+import {
+  usePtySession
+} from "./chunk-GRYHFH5O.js";
+import {
   useDropdownMenu,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSidecarAuth,
   useToolCallStream
-} from "./chunk-HYEAX3DC.js";
-import {
-  usePtySession
-} from "./chunk-GRYHFH5O.js";
-import {
-  copyText,
-  timeAgo
-} from "./chunk-QD4QE5P5.js";
+} from "./chunk-5LV6DZZF.js";
 import {
   Label,
   Select,
@@ -34,14 +37,6 @@ import {
   SelectValue,
   StatCard,
   Switch,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
   TerminalCursor,
   TerminalDisplay,
   TerminalInput,
@@ -49,7 +44,7 @@ import {
   ToastContainer,
   ToastProvider,
   useToast
-} from "./chunk-SOT2V7TX.js";
+} from "./chunk-TXI4MZAZ.js";
 import {
   Avatar,
   AvatarFallback,
@@ -66,73 +61,100 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  EmptyState,
-  Input,
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsTrigger
+} from "./chunk-PDV7W4NY.js";
+import {
+  ToolCallFeed,
+  parseToolEvent
+} from "./chunk-CCKNIAS7.js";
+import {
+  AgentWorkbench,
+  AuditResults,
+  DirectoryPane,
+  RuntimePane,
+  SandboxWorkbench,
+  StatusBanner,
+  StatusBar,
+  TerminalPanel,
+  WorkspaceLayout
+} from "./chunk-67C53XVV.js";
+import {
+  EmptyState,
+  Input,
   Textarea
-} from "./chunk-NI2EI43H.js";
+} from "./chunk-MUOL44AE.js";
 import {
+  AgentTimeline,
   ChatContainer,
   ChatInput,
   ChatMessage,
-  ChatMessageList,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-U62G5TS7.js";
+} from "./chunk-4F2GJRGU.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-KMXV7DDX.js";
-import {
-  ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
-  parseToolEvent
-} from "./chunk-M6VLC32S.js";
+} from "./chunk-CNWVHQFY.js";
 import {
   CommandPreview,
+  DiffPreview,
   ExpandedToolDetail,
+  GlobResultsPreview,
+  GrepResultsPreview,
   InlineThinkingItem,
   InlineToolItem,
+  QuestionPreview,
   RunGroup,
+  WebSearchPreview,
   WriteFilePreview
-} from "./chunk-6MQIDUPA.js";
-import {
-  CodeBlock,
-  CopyButton,
-  Markdown
-} from "./chunk-LTFK464G.js";
-import {
-  SimpleMarkdown,
-  simpleMarkdownStyles
-} from "./chunk-M34OA6PQ.js";
+} from "./chunk-WUR652Y3.js";
 import {
   formatDuration,
   truncateText
 } from "./chunk-HRMUF35V.js";
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-CJ2RYVZH.js";
 import {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText
-} from "./chunk-QSQBDR3N.js";
+} from "./chunk-BX6AQMUS.js";
 import {
-  AuditResults,
-  StatusBanner,
-  StatusBar,
-  TerminalPanel,
-  WorkspaceLayout
-} from "./chunk-KYY2X6LY.js";
+  CodeBlock,
+  InlineCode,
+  OpenUIArtifactRenderer
+} from "./chunk-YDBXQQLC.js";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-TQN3VR4F.js";
 import {
+  ArtifactPane,
+  FileArtifactPane,
   FilePreview,
   FileTabs,
-  FileTree
-} from "./chunk-L6ZDH5F4.js";
+  FileTree,
+  filterFileTree
+} from "./chunk-JF6E2DS5.js";
+import {
+  CodeBlock as CodeBlock2,
+  CopyButton,
+  Markdown
+} from "./chunk-LTFK464G.js";
 import {
   BackendSelector,
   DashboardLayout,
@@ -141,12 +163,12 @@ import {
   ThemeToggle,
   VariantList,
   useTheme
-} from "./chunk-J4OADEUK.js";
+} from "./chunk-OM6ON27W.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-4EIWPJMJ.js";
+} from "./chunk-ZP6GSX4D.js";
 import {
   Logo,
   TangleKnot
@@ -168,6 +190,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./chunk-MCGKDCOR.js";
+import {
+  Progress,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable
+} from "./chunk-FRGMMANX.js";
 import {
   Badge,
   Card,
@@ -176,82 +204,19 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Progress,
-  Skeleton,
-  SkeletonCard,
-  SkeletonTable,
   badgeVariants
-} from "./chunk-2UHPE5T7.js";
+} from "./chunk-MXCSSOGH.js";
 import {
   Button,
   buttonVariants
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
-
-// src/primitives/code-block.tsx
-import { clsx } from "clsx";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function CodeBlock2({
-  code,
-  language,
-  showCopy = true,
-  showLineNumbers = false,
-  className,
-  ...props
-}) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  };
-  const lines = code.split("\n");
-  return /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
-    /* @__PURE__ */ jsx(
-      "pre",
-      {
-        className: clsx(
-          "overflow-x-auto rounded-lg border border-[#262626] bg-[#0a0a0a] p-4 font-mono text-sm",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { className: "w-8 select-none pr-4 text-right text-[#525252]", children: i + 1 }),
-          /* @__PURE__ */ jsx("td", { className: "text-[#a1a1a1]", children: line || " " })
-        ] }, i)) }) }) : /* @__PURE__ */ jsx("span", { className: "text-[#a1a1a1]", children: code }) })
-      }
-    ),
-    showCopy && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleCopy,
-        className: clsx(
-          "absolute top-2 right-2 rounded px-2 py-1 text-xs",
-          "bg-[#262626] text-[#a1a1a1] hover:bg-[#363636] hover:text-white",
-          "opacity-0 transition-opacity group-hover:opacity-100"
-        ),
-        children: copied ? "Copied!" : "Copy"
-      }
-    )
-  ] });
-}
-function InlineCode({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "code",
-    {
-      className: clsx(
-        "rounded border border-[#262626] bg-[#1a1a1a] px-1.5 py-0.5 font-mono text-sm",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
 export {
+  AgentTimeline,
+  AgentWorkbench,
+  ArtifactPane,
   AuditResults,
   AuthHeader,
   Avatar,
@@ -270,9 +235,8 @@ export {
   ChatContainer,
   ChatInput,
   ChatMessage,
-  ChatMessageList,
-  CodeBlock,
-  CodeBlock2 as CodeBlockDisplay,
+  CodeBlock2 as CodeBlock,
+  CodeBlock as CodeBlockDisplay,
   CommandPreview,
   CopyButton,
   DashboardLayout,
@@ -286,6 +250,8 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DiffPreview,
+  DirectoryPane,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -303,10 +269,13 @@ export {
   DropdownMenuTrigger,
   EmptyState,
   ExpandedToolDetail,
+  FileArtifactPane,
   FilePreview,
   FileTabs,
   FileTree,
   GitHubLoginButton,
+  GlobResultsPreview,
+  GrepResultsPreview,
   InlineCode,
   InlineThinkingItem,
   InlineToolItem,
@@ -315,11 +284,15 @@ export {
   Logo,
   Markdown,
   MessageList,
+  OpenUIArtifactRenderer,
   PricingPage as PricingCards,
   ProfileComparison,
   ProfileSelector,
   Progress,
+  QuestionPreview,
   RunGroup,
+  RuntimePane,
+  SandboxWorkbench,
   Select,
   SelectContent,
   SelectGroup,
@@ -330,7 +303,6 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-  SimpleMarkdown,
   Skeleton,
   SkeletonCard,
   SkeletonTable,
@@ -369,6 +341,7 @@ export {
   UserMenu,
   UserMessage,
   VariantList,
+  WebSearchPreview,
   WorkspaceLayout,
   WriteFilePreview,
   badgeVariants,
@@ -376,12 +349,12 @@ export {
   cn,
   copyText,
   createAuthFetcher,
+  filterFileTree,
   formatDuration,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText,
   parseToolEvent,
-  simpleMarkdownStyles,
   timeAgo,
   truncateText,
   useApiKey,
@@ -392,6 +365,7 @@ export {
   useRunCollapseState,
   useRunGroups,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSidecarAuth,
   useTheme,

package/dist/markdown.d.ts

@@ -2,29 +2,6 @@ import * as React from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-/**
- * SimpleMarkdown — lightweight markdown renderer with Tangle styling.
- *
- * GFM tables, fenced code blocks with syntax highlighting,
- * lists, links, blockquotes, headings. Tangle dark theme.
- * No external dependencies (no react-markdown).
- */
-interface SimpleMarkdownProps {
-    content: string;
-    className?: string;
-}
-/**
- * Lightweight markdown renderer — no external dependency.
- * Handles the common patterns: headings, bold, italic, code, links, lists, tables, blockquotes.
- * For full GFM, consumers can swap in react-markdown at the app level.
- */
-declare function SimpleMarkdown({ content, className }: SimpleMarkdownProps): react_jsx_runtime.JSX.Element;
-/**
- * CSS for the markdown renderer. Import this in your app's global styles
- * or include via <style> tag.
- */
-declare const simpleMarkdownStyles = "\n.tangle-prose {\n  font-family: var(--font-sans);\n  color: var(--text-primary);\n  font-size: 0.9375rem;\n  line-height: 1.6;\n}\n.tangle-prose p { margin: 0.5em 0; }\n.tangle-prose p:last-child { margin-bottom: 0; }\n.tangle-h1 { font-size: 1.5rem; font-weight: 700; margin: 1em 0 0.5em; }\n.tangle-h2 { font-size: 1.25rem; font-weight: 700; margin: 1em 0 0.5em; }\n.tangle-h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75em 0 0.4em; }\n.tangle-h4, .tangle-h5, .tangle-h6 { font-size: 1rem; font-weight: 600; margin: 0.5em 0 0.3em; }\n.tangle-inline-code {\n  font-family: var(--font-mono);\n  font-size: 0.85em;\n  background: var(--bg-input);\n  border: 1px solid var(--border-subtle);\n  border-radius: 4px;\n  padding: 0.15em 0.4em;\n}\n.tangle-code-block {\n  position: relative;\n  margin: 0.75em 0;\n  background: var(--bg-input);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n.tangle-code-lang {\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.tangle-code-block pre {\n  margin: 0;\n  padding: 1rem;\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-size: 13px;\n  line-height: 1.55;\n  color: var(--text-secondary);\n}\n.tangle-link {\n  color: var(--brand-cool);\n  text-decoration: none;\n}\n.tangle-link:hover { text-decoration: underline; }\n.tangle-blockquote {\n  border-left: 3px solid var(--border-accent);\n  padding: 0.5em 1em;\n  margin: 0.5em 0;\n  color: var(--text-secondary);\n}\n.tangle-list {\n  margin: 0.5em 0;\n  padding-left: 1.5em;\n}\n.tangle-list li { margin: 0.2em 0; }\n.tangle-list-ordered { list-style-type: decimal; }\n.tangle-table-wrap { overflow-x: auto; margin: 0.75em 0; }\n.tangle-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.875rem;\n}\n.tangle-table th {\n  text-align: left;\n  padding: 0.5em 0.75em;\n  border-bottom: 2px solid var(--border-default);\n  font-weight: 600;\n  color: var(--text-secondary);\n  white-space: nowrap;\n}\n.tangle-table td {\n  padding: 0.4em 0.75em;\n  border-bottom: 1px solid var(--border-subtle);\n  color: var(--text-secondary);\n}\n.tangle-table tr:hover td { background: var(--bg-hover); }\n.tangle-hr {\n  border: none;\n  border-top: 1px solid var(--border-subtle);\n  margin: 1em 0;\n}\nstrong { font-weight: 700; }\nem { font-style: italic; }\n";
-
 interface MarkdownProps {
     children: string;
     className?: string;
@@ -52,4 +29,4 @@ declare const CopyButton: React.MemoExoticComponent<({ text }: {
     text: string;
 }) => react_jsx_runtime.JSX.Element>;
 
-export { CodeBlock, type CodeBlockProps, CopyButton, Markdown, type MarkdownProps, SimpleMarkdown, type SimpleMarkdownProps, simpleMarkdownStyles };
+export { CodeBlock, type CodeBlockProps, CopyButton, Markdown, type MarkdownProps };

package/dist/markdown.js

@@ -3,15 +3,9 @@ import {
   CopyButton,
   Markdown
 } from "./chunk-LTFK464G.js";
-import {
-  SimpleMarkdown,
-  simpleMarkdownStyles
-} from "./chunk-M34OA6PQ.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CodeBlock,
   CopyButton,
-  Markdown,
-  SimpleMarkdown,
-  simpleMarkdownStyles
+  Markdown
 };

package/dist/openui.d.ts

@@ -0,0 +1,115 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type OpenUIPrimitive = string | number | boolean | null | undefined;
+interface OpenUIAction {
+    id: string;
+    label: string;
+    tone?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+    disabled?: boolean;
+    onPress?: () => void;
+}
+interface OpenUIBaseNode {
+    id?: string;
+}
+interface OpenUIHeadingNode extends OpenUIBaseNode {
+    type: "heading";
+    text: string;
+    level?: 1 | 2 | 3 | 4;
+    kicker?: string;
+    meta?: string;
+}
+interface OpenUITextNode extends OpenUIBaseNode {
+    type: "text";
+    text: string;
+    tone?: "default" | "muted" | "success" | "warning" | "error";
+    mono?: boolean;
+}
+interface OpenUIBadgeNode extends OpenUIBaseNode {
+    type: "badge";
+    label: string;
+    tone?: "default" | "secondary" | "success" | "warning" | "error" | "info" | "sandbox";
+}
+interface OpenUIStatNode extends OpenUIBaseNode {
+    type: "stat";
+    label: string;
+    value: string;
+    change?: string;
+    tone?: "default" | "success" | "warning" | "error" | "info";
+}
+interface OpenUIKeyValueNode extends OpenUIBaseNode {
+    type: "key_value";
+    items: Array<{
+        id?: string;
+        label: string;
+        value: ReactNode | OpenUIPrimitive;
+        tone?: "default" | "muted";
+    }>;
+}
+interface OpenUICodeNode extends OpenUIBaseNode {
+    type: "code";
+    code: string;
+    language?: string;
+    title?: string;
+    showLineNumbers?: boolean;
+}
+interface OpenUIMarkdownNode extends OpenUIBaseNode {
+    type: "markdown";
+    content: string;
+}
+interface OpenUITableNode extends OpenUIBaseNode {
+    type: "table";
+    columns: Array<{
+        key: string;
+        header: string;
+        align?: "left" | "right";
+    }>;
+    rows: Array<Record<string, ReactNode | OpenUIPrimitive>>;
+    caption?: string;
+}
+interface OpenUIActionsNode extends OpenUIBaseNode {
+    type: "actions";
+    actions: OpenUIAction[];
+}
+interface OpenUISeparatorNode extends OpenUIBaseNode {
+    type: "separator";
+    label?: string;
+}
+interface OpenUIStackNode extends OpenUIBaseNode {
+    type: "stack";
+    direction?: "row" | "column";
+    gap?: "sm" | "md" | "lg";
+    align?: "start" | "center" | "end" | "stretch";
+    wrap?: boolean;
+    children: OpenUIComponentNode[];
+}
+interface OpenUIGridNode extends OpenUIBaseNode {
+    type: "grid";
+    columns?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    children: OpenUIComponentNode[];
+}
+interface OpenUICardNode extends OpenUIBaseNode {
+    type: "card";
+    title?: string;
+    description?: string;
+    eyebrow?: string;
+    badge?: OpenUIBadgeNode;
+    actions?: OpenUIAction[];
+    children?: OpenUIComponentNode[];
+}
+type OpenUIComponentNode = OpenUIActionsNode | OpenUIBadgeNode | OpenUICardNode | OpenUICodeNode | OpenUIGridNode | OpenUIHeadingNode | OpenUIKeyValueNode | OpenUIMarkdownNode | OpenUISeparatorNode | OpenUIStackNode | OpenUIStatNode | OpenUITableNode | OpenUITextNode;
+interface OpenUIArtifactRendererProps {
+    schema: OpenUIComponentNode | OpenUIComponentNode[];
+    onAction?: (action: OpenUIAction) => void;
+    className?: string;
+}
+/**
+ * OpenUIArtifactRenderer — contained renderer for OpenUI-like structured
+ * artifact payloads using sandbox-ui primitives and theme tokens. This is an
+ * extension surface for generated inspectors/results, not a replacement for
+ * the sandbox shell.
+ */
+declare function OpenUIArtifactRenderer({ schema, onAction, className, }: OpenUIArtifactRendererProps): react_jsx_runtime.JSX.Element;
+
+export { type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode };

package/dist/openui.js

@@ -0,0 +1,11 @@
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-YDBXQQLC.js";
+import "./chunk-TQN3VR4F.js";
+import "./chunk-LTFK464G.js";
+import "./chunk-MXCSSOGH.js";
+import "./chunk-HWLX5NME.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  OpenUIArtifactRenderer
+};

package/dist/pages.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { B as BillingSubscription, a as BillingBalance, b as BillingUsage, U as UsageDataPoint, P as PricingTier } from './usage-chart-DINgSVL5.js';
+import { B as BillingSubscription, a as BillingBalance, b as BillingUsage, U as UsageDataPoint, P as PricingTier } from './usage-chart-CY9xo3KX.js';
 
 type ProductVariant$1 = "sandbox";
 interface BillingPageData {
@@ -29,8 +29,9 @@ interface StandalonePricingPageProps {
     fetchTiers?: () => Promise<PricingTier[]>;
     title?: string;
     subtitle?: string;
+    className?: string;
 }
-declare function StandalonePricingPage({ variant, initialTiers, apiBasePath, onSelectTier, fetchTiers, title, subtitle, }: StandalonePricingPageProps): react_jsx_runtime.JSX.Element;
+declare function StandalonePricingPage({ variant, initialTiers, apiBasePath, onSelectTier, fetchTiers, title, subtitle, className, }: StandalonePricingPageProps): react_jsx_runtime.JSX.Element;
 
 interface ProfileMetrics {
     total_runs: number;

package/dist/pages.js

@@ -5,27 +5,31 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  EmptyState,
-  Input,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger
-} from "./chunk-NI2EI43H.js";
+} from "./chunk-PDV7W4NY.js";
+import {
+  EmptyState,
+  Input
+} from "./chunk-MUOL44AE.js";
 import {
   BillingDashboard,
   PricingPage,
   UsageChart
-} from "./chunk-4EIWPJMJ.js";
+} from "./chunk-ZP6GSX4D.js";
 import {
-  Badge,
-  Card,
   Skeleton,
   SkeletonCard
-} from "./chunk-2UHPE5T7.js";
+} from "./chunk-FRGMMANX.js";
+import {
+  Badge,
+  Card
+} from "./chunk-MXCSSOGH.js";
 import {
   Button
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -292,9 +296,8 @@ import * as React2 from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var variantColors = {
   sandbox: {
-    accent: "text-purple-400",
-    gradientFrom: "from-purple-600",
-    gradientTo: "to-purple-400"
+    accent: "text-[var(--accent-text)]",
+    gradient: "bg-[image:var(--accent-gradient-strong)]"
   }
 };
 async function fetchTiersFromApi(apiBasePath) {
@@ -364,7 +367,8 @@ function StandalonePricingPage({
   onSelectTier,
   fetchTiers,
   title = "Simple, transparent pricing",
-  subtitle = "Choose the plan that fits your needs. Upgrade or downgrade at any time."
+  subtitle = "Choose the plan that fits your needs. Upgrade or downgrade at any time.",
+  className
 }) {
   const colors = variantColors[variant];
   const [state, setState] = React2.useState({
@@ -433,16 +437,15 @@ function StandalonePricingPage({
     },
     []
   );
-  return /* @__PURE__ */ jsxs2("div", { className: "w-full space-y-12", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full space-y-12", className), children: [
     /* @__PURE__ */ jsxs2("div", { className: "space-y-4 text-center", children: [
       /* @__PURE__ */ jsx2(
         "h1",
         {
           className: cn(
             "font-bold text-4xl tracking-tight sm:text-5xl",
-            "bg-gradient-to-r bg-clip-text text-transparent",
-            colors.gradientFrom,
-            colors.gradientTo
+            "bg-clip-text text-transparent",
+            colors.gradient
           ),
           children: title
         }