@tangle-network/sandbox-ui 0.20.2 → 0.21.0

package/dist/{chunk-N5RYCDLD.js → chunk-4KAPMTPU.js}

@@ -127,8 +127,8 @@ function resolveModelBrandIdentity(model) {
   const labKey = normalizeBrandKey(model.logos?.lab ?? model.modelLab ?? inferModelLab(model, canonical, hostKey));
   const hostBase = brandInfo(hostKey);
   const labBase = brandInfo(labKey);
-  const host = { ...hostBase, logoUrl: model.logos?.hostUrl ?? hostBase.logoUrl };
-  const lab = { ...labBase, logoUrl: model.logos?.labUrl ?? labBase.logoUrl };
+  const host = model.logos?.hostUrl ? { ...hostBase, logoUrl: model.logos.hostUrl, monochrome: false } : hostBase;
+  const lab = model.logos?.labUrl ? { ...labBase, logoUrl: model.logos.labUrl, monochrome: false } : labBase;
   return {
     host,
     lab,
@@ -468,13 +468,33 @@ function BrandLogo({ brand, size, className }) {
         size === "md" && "h-7 w-7",
         className
       ),
-      children: brand.logo === "tangle" ? /* @__PURE__ */ jsx(TangleKnot, { size: pixelSize, className: "h-full w-full" }) : brand.logoUrl ? /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: "", className: "h-[72%] w-[72%] object-contain" }) : null
+      children: brand.logo === "tangle" ? /* @__PURE__ */ jsx(TangleKnot, { size: pixelSize, className: "h-full w-full" }) : brand.logoUrl && brand.monochrome ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-[72%] w-[72%]",
+          style: {
+            backgroundColor: "hsl(var(--foreground))",
+            maskImage: cssUrl(brand.logoUrl),
+            maskSize: "contain",
+            maskRepeat: "no-repeat",
+            maskPosition: "center",
+            WebkitMaskImage: cssUrl(brand.logoUrl),
+            WebkitMaskSize: "contain",
+            WebkitMaskRepeat: "no-repeat",
+            WebkitMaskPosition: "center"
+          }
+        }
+      ) : brand.logoUrl ? /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: "", className: "h-[72%] w-[72%] object-contain" }) : null
     }
   );
 }
 function hasRealLogo(brand) {
   return Boolean(brand.logoUrl || brand.logo);
 }
+function cssUrl(url) {
+  return `url("${url.replace(/[\\"'#\n]/g, (char) => encodeURIComponent(char))}")`;
+}
 function modelLogo(path) {
   return path;
 }
@@ -548,7 +568,7 @@ function brandLogo(key) {
 function brandMark(key) {
   if (key === "tangle" || key === "tcloud") return { logo: "tangle" };
   const logoUrl = brandLogo(key);
-  return logoUrl ? { logoUrl } : {};
+  return logoUrl ? { logoUrl, monochrome: true } : {};
 }
 function inferModelLab(model, canonical, hostKey) {
   const name = model.name ?? "";
@@ -638,550 +658,9 @@ var BRAND_INFO = {
   unknown: { key: "unknown", label: "Unknown" }
 };
 
-// src/dashboard/billing-dashboard.tsx
-import { Button } from "@tangle-network/ui/primitives";
-import { Badge } from "@tangle-network/ui/primitives";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from "@tangle-network/ui/primitives";
-import { Progress } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var variantColors = {
-  sandbox: {
-    accent: "text-[var(--accent-text)]",
-    accentBg: "bg-[var(--accent-surface-soft)]",
-    border: "border-[var(--border-accent)]",
-    progress: "bg-[image:var(--accent-gradient-strong)]"
-  }
-};
-function formatCredits(value) {
-  if (value >= 1e6) {
-    return `${(value / 1e6).toFixed(1)}M`;
-  }
-  if (value >= 1e3) {
-    return `${(value / 1e3).toFixed(1)}K`;
-  }
-  return value.toLocaleString();
-}
-function formatDate(dateStr) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric"
-  });
-}
-function getStatusBadgeVariant(status) {
-  switch (status.toLowerCase()) {
-    case "active":
-      return "success";
-    case "trialing":
-    case "past_due":
-      return "warning";
-    case "canceled":
-    case "unpaid":
-      return "error";
-    default:
-      return "secondary";
-  }
-}
-function CreditCardIcon({ className }) {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: cn("h-5 w-5", className),
-      children: [
-        /* @__PURE__ */ jsx2("title", { children: "Credit card icon" }),
-        /* @__PURE__ */ jsx2("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-        /* @__PURE__ */ jsx2("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-      ]
-    }
-  );
-}
-function CoinsIcon({ className }) {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: cn("h-5 w-5", className),
-      children: [
-        /* @__PURE__ */ jsx2("title", { children: "Coins icon" }),
-        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "6" }),
-        /* @__PURE__ */ jsx2("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }),
-        /* @__PURE__ */ jsx2("path", { d: "M7 6h1v4" }),
-        /* @__PURE__ */ jsx2("path", { d: "m16.71 13.88.7.71-2.82 2.82" })
-      ]
-    }
-  );
-}
-function ChartIcon({ className }) {
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: cn("h-5 w-5", className),
-      children: [
-        /* @__PURE__ */ jsx2("title", { children: "Chart icon" }),
-        /* @__PURE__ */ jsx2("path", { d: "M3 3v18h18" }),
-        /* @__PURE__ */ jsx2("path", { d: "m19 9-5 5-4-4-3 3" })
-      ]
-    }
-  );
-}
-function BillingDashboard({
-  subscription,
-  balance,
-  usage,
-  onManageSubscription,
-  onAddCredits,
-  variant = "sandbox",
-  className,
-  cardClassName
-}) {
-  const colors2 = variantColors[variant];
-  const totalCredits = balance.available + balance.used;
-  const usagePercent = totalCredits > 0 ? balance.used / totalCredits * 100 : 0;
-  const sortedModels = Object.entries(usage.byModel).sort(
-    ([, a], [, b]) => b - a
-  );
-  return /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-6 lg:grid-cols-3", className), children: [
-    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsx2(CardHeader, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx2(CreditCardIcon, { className: colors2.accent }),
-          "Current Plan"
-        ] }),
-        subscription && /* @__PURE__ */ jsx2(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
-      ] }) }),
-      /* @__PURE__ */ jsx2(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2("p", { className: cn("font-bold text-2xl", colors2.accent), children: subscription.tierName }),
-          /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground text-sm", children: [
-            "Renews ",
-            formatDate(subscription.renewsAt)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant: "outline",
-            className: "w-full",
-            onClick: onManageSubscription,
-            children: "Manage Subscription"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2("p", { className: "font-bold text-2xl text-muted-foreground", children: "No Active Plan" }),
-          /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "Subscribe to get started" })
-        ] }),
-        /* @__PURE__ */ jsx2(
-          Button,
-          {
-            variant,
-            className: "w-full",
-            onClick: onManageSubscription,
-            children: "View Plans"
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsxs2(CardHeader, { children: [
-        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx2(CoinsIcon, { className: colors2.accent }),
-          "Credit Balance"
-        ] }),
-        /* @__PURE__ */ jsxs2(CardDescription, { children: [
-          formatCredits(balance.available),
-          " credits remaining"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Used" }),
-            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: formatCredits(balance.used) })
-          ] }),
-          /* @__PURE__ */ jsx2(Progress, { value: usagePercent, variant, className: "h-3" }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: "Available" }),
-            /* @__PURE__ */ jsx2("span", { className: cn("font-medium", colors2.accent), children: formatCredits(balance.available) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx2(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs2(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsxs2(CardHeader, { children: [
-        /* @__PURE__ */ jsxs2(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx2(ChartIcon, { className: colors2.accent }),
-          "Usage Breakdown"
-        ] }),
-        /* @__PURE__ */ jsx2(CardDescription, { children: usage.period })
-      ] }),
-      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-between", children: [
-          /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
-          /* @__PURE__ */ jsx2("span", { className: cn("font-bold text-2xl", colors2.accent), children: formatCredits(usage.total) })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx2("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
-          /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-            sortedModels.slice(0, 5).map(([model, credits]) => {
-              const modelPercent = usage.total > 0 ? credits / usage.total * 100 : 0;
-              return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-sm", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "truncate text-muted-foreground", children: model }),
-                  /* @__PURE__ */ jsx2("span", { className: "ml-2 font-medium", children: formatCredits(credits) })
-                ] }),
-                /* @__PURE__ */ jsx2("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx2(
-                  "div",
-                  {
-                    className: cn(
-                      "h-full rounded-full transition-all",
-                      variant === "sandbox" && colors2.progress
-                    ),
-                    style: { width: `${modelPercent}%` }
-                  }
-                ) })
-              ] }, model);
-            }),
-            sortedModels.length > 5 && /* @__PURE__ */ jsxs2("p", { className: "text-muted-foreground text-xs", children: [
-              "+",
-              sortedModels.length - 5,
-              " more models"
-            ] }),
-            sortedModels.length === 0 && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground text-sm", children: "No usage this period" })
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-
-// src/dashboard/pricing-page.tsx
-import { Check, Zap } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function formatPrice(cents) {
-  if (!Number.isFinite(cents) || cents < 0) return "$0";
-  return cents % 100 === 0 ? `$${cents / 100}` : `$${(cents / 100).toFixed(2)}`;
-}
-function PricingPage({
-  tiers,
-  currentTierId,
-  billingPeriod,
-  onBillingPeriodChange,
-  onSelectTier,
-  loading = false,
-  className
-}) {
-  const tiersWithRecommended = tiers.map((tier, i) => ({
-    ...tier,
-    recommended: tier.recommended ?? (tiers.length === 3 && i === 1)
-  }));
-  return /* @__PURE__ */ jsxs3("div", { className: cn("w-full space-y-10", className), children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center rounded-full border border-border bg-muted/50 p-1", children: [
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          type: "button",
-          onClick: () => onBillingPeriodChange("monthly"),
-          className: cn(
-            "rounded-full px-5 py-2 text-sm font-medium transition-all",
-            billingPeriod === "monthly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: "Monthly"
-        }
-      ),
-      /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          type: "button",
-          onClick: () => onBillingPeriodChange("yearly"),
-          className: cn(
-            "rounded-full px-5 py-2 text-sm font-medium transition-all",
-            billingPeriod === "yearly" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            "Yearly",
-            /* @__PURE__ */ jsx3("span", { className: "ml-2 rounded-full bg-[var(--surface-success-bg)] px-2 py-0.5 text-[10px] font-bold text-[var(--surface-success-text)]", children: "Save 20%" })
-          ]
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3 items-start", children: tiersWithRecommended.map((tier) => {
-      const isCurrentTier = tier.id === currentTierId;
-      const isRecommended = tier.recommended;
-      const isFree = tier.monthlyPriceCents === 0;
-      const price = billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 ? tier.yearlyPriceCents : tier.monthlyPriceCents;
-      const displayPrice = billingPeriod === "yearly" ? Math.round(price / 12) : price;
-      return /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col rounded-2xl border transition-all",
-            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-border hover:border-primary/30"
-          ),
-          children: [
-            isRecommended && /* @__PURE__ */ jsx3("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 text-xs font-bold text-primary-foreground shadow-sm", children: [
-              /* @__PURE__ */ jsx3(Zap, { className: "h-3 w-3" }),
-              "Most Popular"
-            ] }) }),
-            isCurrentTier && !isRecommended && /* @__PURE__ */ jsx3("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center rounded-full bg-muted border border-border px-4 py-1.5 text-xs font-bold text-foreground", children: "Current Plan" }) }),
-            /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col p-8", isRecommended && "pt-10"), children: [
-              /* @__PURE__ */ jsxs3("div", { className: "mb-6", children: [
-                /* @__PURE__ */ jsx3("h3", { className: "text-lg font-bold text-foreground", children: tier.name }),
-                /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-muted-foreground", children: tier.description })
-              ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "mb-8", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline gap-1", children: [
-                  /* @__PURE__ */ jsx3("span", { className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"), children: isFree ? "Free" : formatPrice(displayPrice) }),
-                  !isFree && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-sm font-medium", children: "/mo" })
-                ] }),
-                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-xs text-muted-foreground", children: [
-                  formatPrice(tier.yearlyPriceCents),
-                  " billed annually"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onSelectTier(tier.id),
-                  disabled: isCurrentTier || loading,
-                  className: cn(
-                    "w-full rounded-xl py-3 text-sm font-bold transition-all active:scale-[0.98] disabled:opacity-50",
-                    isRecommended ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : isCurrentTier ? "bg-muted text-muted-foreground border border-border cursor-default" : "bg-card text-foreground border border-border hover:border-primary/50 hover:bg-muted"
-                  ),
-                  children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
-                }
-              ),
-              /* @__PURE__ */ jsx3("div", { className: "my-8 border-t border-border" }),
-              /* @__PURE__ */ jsx3("ul", { className: "space-y-3.5 flex-1", children: tier.features.map((feature) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx3("div", { className: cn(
-                  "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
-                  isRecommended ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
-                ), children: /* @__PURE__ */ jsx3(Check, { className: "h-3 w-3" }) }),
-                /* @__PURE__ */ jsx3("span", { className: "text-sm text-foreground/80", children: feature })
-              ] }, feature)) })
-            ] })
-          ]
-        },
-        tier.id
-      );
-    }) })
-  ] });
-}
-
-// src/dashboard/usage-chart.tsx
-import * as React2 from "react";
-import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, CardTitle as CardTitle2 } from "@tangle-network/ui/primitives";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var colors = {
-  bar: "bg-[image:var(--accent-gradient-strong)]",
-  barHover: "hover:brightness-110",
-  text: "text-[var(--accent-text)]"
-};
-function formatDate2(dateStr) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-}
-function formatValue(value) {
-  if (value >= 1e6) {
-    return `${(value / 1e6).toFixed(1)}M`;
-  }
-  if (value >= 1e3) {
-    return `${(value / 1e3).toFixed(1)}K`;
-  }
-  return value.toLocaleString();
-}
-function UsageChart({ data, title, unit, className }) {
-  const maxValue = Math.max(...data.map((d) => d.value), 1);
-  const total = data.reduce((sum, d) => sum + d.value, 0);
-  const [hoveredIndex, setHoveredIndex] = React2.useState(null);
-  return /* @__PURE__ */ jsxs4(Card2, { className, children: [
-    /* @__PURE__ */ jsxs4(CardHeader2, { className: "flex flex-row items-center justify-between pb-2", children: [
-      /* @__PURE__ */ jsx4(CardTitle2, { className: "font-medium text-base", children: title }),
-      /* @__PURE__ */ jsxs4("div", { className: "text-right", children: [
-        /* @__PURE__ */ jsx4("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
-        /* @__PURE__ */ jsx4("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs4(CardContent2, { children: [
-      /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
-          /* @__PURE__ */ jsx4("span", { children: formatValue(maxValue) }),
-          /* @__PURE__ */ jsx4("span", { children: formatValue(Math.round(maxValue / 2)) }),
-          /* @__PURE__ */ jsx4("span", { children: "0" })
-        ] }),
-        /* @__PURE__ */ jsx4("div", { className: "ml-10 flex h-48 items-end gap-1", children: data.map((point, index) => {
-          const heightPercent = point.value / maxValue * 100;
-          const isHovered = hoveredIndex === index;
-          return (
-            // biome-ignore lint/a11y/noStaticElementInteractions: chart bar uses hover for tooltip display
-            /* @__PURE__ */ jsxs4(
-              "div",
-              {
-                className: "group relative flex flex-1 flex-col items-center",
-                onMouseEnter: () => setHoveredIndex(index),
-                onMouseLeave: () => setHoveredIndex(null),
-                children: [
-                  isHovered && /* @__PURE__ */ jsxs4("div", { className: "absolute -top-12 z-10 rounded-lg bg-popover px-3 py-1.5 text-sm shadow-lg", children: [
-                    /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
-                      formatValue(point.value),
-                      " ",
-                      unit
-                    ] }),
-                    /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: formatDate2(point.date) })
-                  ] }),
-                  /* @__PURE__ */ jsx4(
-                    "div",
-                    {
-                      className: cn(
-                        "min-h-[2px] w-full rounded-t-sm transition-all duration-200",
-                        colors.bar,
-                        colors.barHover,
-                        isHovered && "opacity-80"
-                      ),
-                      style: { height: `${Math.max(heightPercent, 1)}%` }
-                    }
-                  )
-                ]
-              },
-              point.date
-            )
-          );
-        }) }),
-        /* @__PURE__ */ jsx4("div", { className: "mt-2 ml-10 flex gap-1", children: data.map((point, index) => /* @__PURE__ */ jsx4(
-          "div",
-          {
-            className: cn(
-              "flex-1 truncate text-center text-muted-foreground text-xs",
-              hoveredIndex === index && colors.text
-            ),
-            children: data.length <= 7 || index % Math.ceil(data.length / 7) === 0 ? formatDate2(point.date) : ""
-          },
-          point.date
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "mt-4 grid grid-cols-3 gap-4 border-border border-t pt-4", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Average" }),
-          /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
-            formatValue(Math.round(total / data.length)),
-            " ",
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Peak" }),
-          /* @__PURE__ */ jsxs4("p", { className: "font-medium", children: [
-            formatValue(maxValue),
-            " ",
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Total" }),
-          /* @__PURE__ */ jsxs4("p", { className: cn("font-medium", colors.text), children: [
-            formatValue(total),
-            " ",
-            unit
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-
-// src/dashboard/template-card.tsx
-import { ArrowRight } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function TemplateCard({ template, onUseTemplate, className }) {
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      className: cn(
-        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", children: template.icon ?? /* @__PURE__ */ jsx5("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsx5("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
-          /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
-          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx5("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx5(
-            "span",
-            {
-              className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
-              children: tag
-            },
-            `${tag}-${i}`
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs5(
-          "button",
-          {
-            type: "button",
-            onClick: () => onUseTemplate(template.id),
-            className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary/10 border border-primary/20 px-4 py-2.5 text-sm font-bold text-primary transition-colors hover:bg-primary hover:text-primary-foreground active:scale-[0.98]",
-            children: [
-              "Use Template",
-              /* @__PURE__ */ jsx5(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/dashboard/info-panel.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function InfoPanel({ label, title, description, className }) {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "relative z-10", children: [
-      /* @__PURE__ */ jsx6("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
-      /* @__PURE__ */ jsx6("h3", { className: "mt-1 text-lg font-bold", children: title }),
-      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
-    ] }),
-    /* @__PURE__ */ jsx6("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })
-  ] });
-}
-
 export {
   canonicalModelId,
   formatPricing,
   formatContext,
-  ModelPicker,
-  BillingDashboard,
-  formatPrice,
-  PricingPage,
-  UsageChart,
-  TemplateCard,
-  InfoPanel
+  ModelPicker
 };