@tangle-network/sandbox-ui 0.2.0

package/dist/index.js

@@ -0,0 +1,551 @@
+import {
+  AuthHeader,
+  GitHubLoginButton,
+  UserMenu
+} from "./chunk-OU4TRNQZ.js";
+import {
+  createAuthFetcher,
+  useApiKey,
+  useAuth,
+  useDropdownMenu,
+  useSSEStream,
+  useSessionStream,
+  useSidecarAuth,
+  useToolCallStream
+} from "./chunk-HYEAX3DC.js";
+import {
+  usePtySession
+} from "./chunk-GRYHFH5O.js";
+import {
+  copyText,
+  timeAgo
+} from "./chunk-QD4QE5P5.js";
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  StatCard,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  ToastContainer,
+  ToastProvider,
+  useToast
+} from "./chunk-ZOL2TR5M.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-B26TQ7SA.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  EmptyState,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea
+} from "./chunk-NI2EI43H.js";
+import {
+  ChatContainer,
+  ChatInput,
+  ChatMessage,
+  ChatMessageList,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+} from "./chunk-U62G5TS7.js";
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-KMXV7DDX.js";
+import {
+  ToolCallFeed,
+  ToolCallGroup,
+  ToolCallStep,
+  parseToolEvent
+} from "./chunk-M6VLC32S.js";
+import {
+  CommandPreview,
+  ExpandedToolDetail,
+  InlineThinkingItem,
+  InlineToolItem,
+  RunGroup,
+  WriteFilePreview
+} from "./chunk-6MQIDUPA.js";
+import {
+  CodeBlock,
+  CopyButton,
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  SimpleMarkdown,
+  simpleMarkdownStyles
+} from "./chunk-M34OA6PQ.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-HRMUF35V.js";
+import {
+  TOOL_CATEGORY_ICONS,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-QSQBDR3N.js";
+import {
+  AuditResults,
+  StatusBanner,
+  StatusBar,
+  TerminalPanel,
+  WorkspaceLayout
+} from "./chunk-KYY2X6LY.js";
+import {
+  FilePreview,
+  FileTabs,
+  FileTree
+} from "./chunk-L6ZDH5F4.js";
+import {
+  BackendSelector,
+  DashboardLayout,
+  Logo,
+  ProfileComparison,
+  ProfileSelector,
+  TangleKnot,
+  ThemeToggle,
+  VariantList,
+  useTheme
+} from "./chunk-HMND7JPA.js";
+import {
+  BillingDashboard,
+  PricingPage,
+  UsageChart
+} from "./chunk-4EIWPJMJ.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "./chunk-MCGKDCOR.js";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Progress,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable,
+  badgeVariants
+} from "./chunk-2UHPE5T7.js";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-E6FS7R4X.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
+    }
+  );
+}
+
+// src/primitives/terminal-display.tsx
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TerminalDisplay = React.forwardRef(
+  ({
+    className,
+    variant = "default",
+    title = "Terminal",
+    showHeader = true,
+    autoScroll = true,
+    maxHeight = "400px",
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = useRef(null);
+    useEffect(() => {
+      if (autoScroll && containerRef.current) {
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      }
+    }, [autoScroll]);
+    const variants = {
+      default: "border-border",
+      sandbox: "border-purple-500/20 shadow-lg shadow-purple-500/5"
+    };
+    const dotColors = {
+      default: ["bg-red-500", "bg-yellow-500", "bg-green-500"],
+      sandbox: ["bg-red-500", "bg-yellow-500", "bg-purple-500"]
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-hidden rounded-xl border bg-[#0a0a0a] font-mono text-sm",
+          variants[variant],
+          className
+        ),
+        ...props,
+        children: [
+          showHeader && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-border/50 border-b bg-card/30 px-4 py-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex gap-1.5", children: dotColors[variant].map((color) => /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn("h-3 w-3 rounded-full", color)
+              },
+              color
+            )) }),
+            /* @__PURE__ */ jsx2("span", { className: "ml-2 text-muted-foreground text-xs", children: title })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              ref: containerRef,
+              className: "overflow-auto p-4",
+              style: { maxHeight },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TerminalDisplay.displayName = "TerminalDisplay";
+var TerminalLine = React.forwardRef(
+  ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
+    const typeStyles = {
+      input: "text-foreground",
+      output: "text-muted-foreground",
+      error: "text-red-400",
+      success: "text-green-400",
+      info: "text-blue-400",
+      thinking: "text-yellow-400 animate-pulse",
+      command: "text-foreground",
+      warning: "text-yellow-400"
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-start gap-2 py-0.5 leading-relaxed",
+          typeStyles[type],
+          className
+        ),
+        ...props,
+        children: [
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx2("span", { className: "shrink-0 select-none text-green-400", children: prompt }),
+          type === "thinking" && /* @__PURE__ */ jsx2("span", { className: "shrink-0 select-none", children: "..." }),
+          timestamp && /* @__PURE__ */ jsxs2("span", { className: "shrink-0 select-none text-muted-foreground/50", children: [
+            "[",
+            timestamp,
+            "]"
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "whitespace-pre-wrap break-all", children })
+        ]
+      }
+    );
+  }
+);
+TerminalLine.displayName = "TerminalLine";
+var TerminalCursor = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "span",
+  {
+    ref,
+    className: cn(
+      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TerminalCursor.displayName = "TerminalCursor";
+var TerminalInput = React.forwardRef(
+  ({ className, onSubmit, variant = "default", ...props }, ref) => {
+    const [value, setValue] = React.useState("");
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && value.trim() && onSubmit) {
+        onSubmit(value.trim());
+        setValue("");
+      }
+    };
+    const variants = {
+      default: "border-border focus-within:border-muted-foreground",
+      sandbox: "border-purple-500/20 focus-within:border-purple-500/50"
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex items-center rounded-lg border bg-[#0a0a0a] px-4 py-2.5 font-mono text-sm transition-colors",
+          variants[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "mr-2 select-none text-green-400", children: "$" }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ref,
+              type: "text",
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx2(TerminalCursor, {})
+        ]
+      }
+    );
+  }
+);
+TerminalInput.displayName = "TerminalInput";
+export {
+  AuditResults,
+  AuthHeader,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  BackendSelector,
+  Badge,
+  BillingDashboard,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ChatContainer,
+  ChatInput,
+  ChatMessage,
+  ChatMessageList,
+  CodeBlock,
+  CodeBlock2 as CodeBlockDisplay,
+  CommandPreview,
+  CopyButton,
+  DashboardLayout,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  ExpandedToolDetail,
+  FilePreview,
+  FileTabs,
+  FileTree,
+  GitHubLoginButton,
+  InlineCode,
+  InlineThinkingItem,
+  InlineToolItem,
+  Input,
+  Label,
+  Logo,
+  Markdown,
+  MessageList,
+  PricingPage as PricingCards,
+  ProfileComparison,
+  ProfileSelector,
+  Progress,
+  RunGroup,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SimpleMarkdown,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable,
+  StatCard,
+  StatusBanner,
+  StatusBar,
+  Switch,
+  TOOL_CATEGORY_ICONS,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TangleKnot,
+  TerminalDisplay,
+  TerminalCursor as TerminalDisplayCursor,
+  TerminalInput as TerminalDisplayInput,
+  TerminalLine as TerminalDisplayLine,
+  TerminalPanel,
+  Textarea,
+  ThemeToggle,
+  ThinkingIndicator,
+  ToastContainer,
+  ToastProvider,
+  ToolCallFeed,
+  ToolCallGroup,
+  ToolCallStep,
+  UsageChart,
+  UserMenu,
+  UserMessage,
+  VariantList,
+  WorkspaceLayout,
+  WriteFilePreview,
+  badgeVariants,
+  buttonVariants,
+  cn,
+  copyText,
+  createAuthFetcher,
+  formatDuration,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText,
+  parseToolEvent,
+  simpleMarkdownStyles,
+  timeAgo,
+  truncateText,
+  useApiKey,
+  useAuth,
+  useAutoScroll,
+  useDropdownMenu,
+  usePtySession,
+  useRunCollapseState,
+  useRunGroups,
+  useSSEStream,
+  useSessionStream,
+  useSidecarAuth,
+  useTheme,
+  useToast,
+  useToolCallStream
+};

package/dist/markdown.d.ts

@@ -0,0 +1,55 @@
+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;
+}
+/**
+ * Renders Markdown content with GFM support, XSS sanitisation, and
+ * custom code block rendering via our CodeBlock component.
+ */
+declare const Markdown: React.MemoExoticComponent<({ children, className }: MarkdownProps) => react_jsx_runtime.JSX.Element>;
+
+interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+    code: string;
+    language?: string;
+    children?: ReactNode;
+}
+/**
+ * Syntax-highlighted code block with copy button.
+ *
+ * Falls back to plain `<pre><code>` — syntax highlighting can be provided
+ * by the consuming app via CSS (e.g. Shiki themes applied externally).
+ */
+declare const CodeBlock: React.MemoExoticComponent<({ code, language, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element>;
+/** Copy-to-clipboard button for use inside CodeBlock. */
+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 };

package/dist/markdown.js

@@ -0,0 +1,17 @@
+import {
+  CodeBlock,
+  CopyButton,
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  SimpleMarkdown,
+  simpleMarkdownStyles
+} from "./chunk-M34OA6PQ.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  CodeBlock,
+  CopyButton,
+  Markdown,
+  SimpleMarkdown,
+  simpleMarkdownStyles
+};

package/dist/pages.d.ts

@@ -0,0 +1,89 @@
+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';
+
+type ProductVariant$1 = "sandbox";
+interface BillingPageData {
+    subscription: BillingSubscription | null;
+    balance: BillingBalance;
+    usage: BillingUsage;
+    usageHistory: UsageDataPoint[];
+    tiers: PricingTier[];
+}
+interface BillingPageProps {
+    variant?: ProductVariant$1;
+    initialData?: BillingPageData;
+    apiBasePath?: string;
+    onManageSubscription?: () => void;
+    onAddCredits?: () => void;
+    onSelectTier?: (tierId: string) => void;
+    fetchBillingData?: () => Promise<BillingPageData>;
+}
+declare function BillingPage({ variant, initialData, apiBasePath, onManageSubscription, onAddCredits, onSelectTier, fetchBillingData, }: BillingPageProps): react_jsx_runtime.JSX.Element;
+
+type ProductVariant = "sandbox";
+interface StandalonePricingPageProps {
+    variant?: ProductVariant;
+    initialTiers?: PricingTier[];
+    apiBasePath?: string;
+    onSelectTier?: (tierId: string, billingPeriod: "monthly" | "yearly") => void;
+    fetchTiers?: () => Promise<PricingTier[]>;
+    title?: string;
+    subtitle?: string;
+}
+declare function StandalonePricingPage({ variant, initialTiers, apiBasePath, onSelectTier, fetchTiers, title, subtitle, }: StandalonePricingPageProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileMetrics {
+    total_runs: number;
+    success_rate: number;
+    avg_duration_ms: number;
+    avg_tokens_used?: number;
+    last_run_at?: string;
+}
+interface Profile {
+    id: string;
+    name: string;
+    description?: string;
+    extends?: string;
+    model?: string;
+    system_prompt?: string;
+    instructions?: string[];
+    tags?: string[];
+    is_builtin?: boolean;
+    is_public?: boolean;
+    metrics?: ProfileMetrics;
+    created_at?: string;
+    updated_at?: string;
+}
+interface ProfileFormData {
+    name: string;
+    description?: string;
+    extends?: string;
+    model?: string;
+    system_prompt?: string;
+    instructions?: string[];
+    tags?: string[];
+    is_public?: boolean;
+}
+interface ProfilesPageProps {
+    /** API client for profile operations */
+    apiClient: {
+        listProfiles: () => Promise<{
+            builtin: Profile[];
+            custom: Profile[];
+        }>;
+        createProfile: (data: ProfileFormData) => Promise<Profile>;
+        updateProfile: (id: string, data: Partial<ProfileFormData>) => Promise<Profile>;
+        deleteProfile: (id: string) => Promise<void>;
+    };
+    /** User's subscription tier for limit enforcement */
+    tier?: "free" | "starter" | "pro" | "enterprise";
+    /** Maximum profiles allowed for current tier */
+    maxProfiles?: number;
+    /** Callback when navigating to profile comparison */
+    onCompareClick?: (profiles: Profile[]) => void;
+    /** Custom page title */
+    title?: string;
+}
+declare function ProfilesPage({ apiClient, tier, maxProfiles, onCompareClick, title, }: ProfilesPageProps): react_jsx_runtime.JSX.Element;
+
+export { BillingPage, type BillingPageData, type BillingPageProps, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, StandalonePricingPage, type StandalonePricingPageProps };