@tangle-network/sandbox-ui 0.113.7 → 0.114.0

package/dist/chunk-OMUIPJQZ.js

@@ -1,555 +0,0 @@
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-
-// 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, jsx, jsxs } 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__ */ jsxs(
-    "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__ */ jsx("title", { children: "Credit card icon" }),
-        /* @__PURE__ */ jsx("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
-        /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
-      ]
-    }
-  );
-}
-function CoinsIcon({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "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__ */ jsx("title", { children: "Coins icon" }),
-        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }),
-        /* @__PURE__ */ jsx("path", { d: "M7 6h1v4" }),
-        /* @__PURE__ */ jsx("path", { d: "m16.71 13.88.7.71-2.82 2.82" })
-      ]
-    }
-  );
-}
-function ChartIcon({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "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__ */ jsx("title", { children: "Chart icon" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }),
-        /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: cn("grid gap-6 lg:grid-cols-3", className), children: [
-    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(CreditCardIcon, { className: colors2.accent }),
-          "Current Plan"
-        ] }),
-        subscription && /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(subscription.status), children: subscription.status })
-      ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: cn("font-bold text-2xl", colors2.accent), children: subscription.tierName }),
-          /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-sm", children: [
-            "Renews ",
-            formatDate(subscription.renewsAt)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            className: "w-full",
-            onClick: onManageSubscription,
-            children: "Manage Subscription"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "font-bold text-2xl text-muted-foreground", children: "No Active Plan" }),
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "Subscribe to get started" })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant,
-            className: "w-full",
-            onClick: onManageSubscription,
-            children: "View Plans"
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(CoinsIcon, { className: colors2.accent }),
-          "Credit Balance"
-        ] }),
-        /* @__PURE__ */ jsxs(CardDescription, { children: [
-          formatCredits(balance.available),
-          " credits remaining"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Used" }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCredits(balance.used) })
-          ] }),
-          /* @__PURE__ */ jsx(Progress, { value: usagePercent, variant, className: "h-3" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Available" }),
-            /* @__PURE__ */ jsx("span", { className: cn("font-medium", colors2.accent), children: formatCredits(balance.available) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant, className: "w-full", onClick: onAddCredits, children: "Add Credits" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { variant, className: cn("lg:col-span-1", cardClassName), children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsx(ChartIcon, { className: colors2.accent }),
-          "Usage Breakdown"
-        ] }),
-        /* @__PURE__ */ jsx(CardDescription, { children: usage.period })
-      ] }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Total Usage" }),
-          /* @__PURE__ */ jsx("span", { className: cn("font-bold text-2xl", colors2.accent), children: formatCredits(usage.total) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wider", children: "By Model" }),
-          /* @__PURE__ */ jsxs("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__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: model }),
-                  /* @__PURE__ */ jsx("span", { className: "ml-2 font-medium", children: formatCredits(credits) })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "h-full rounded-full transition-all",
-                      variant === "sandbox" && colors2.progress
-                    ),
-                    style: { width: `${modelPercent}%` }
-                  }
-                ) })
-              ] }, model);
-            }),
-            sortedModels.length > 5 && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
-              "+",
-              sortedModels.length - 5,
-              " more models"
-            ] }),
-            sortedModels.length === 0 && /* @__PURE__ */ jsx("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 jsx2, jsxs as jsxs2 } 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__ */ jsxs2("div", { className: cn("w-full space-y-10", className), children: [
-    /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-low p-1", children: [
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => onBillingPeriodChange("monthly"),
-          className: cn(
-            "rounded-full px-5 py-2 text-sm font-medium transition-all",
-            billingPeriod === "monthly" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: "Monthly"
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          onClick: () => onBillingPeriodChange("yearly"),
-          className: cn(
-            "rounded-full px-5 py-2 text-sm font-medium transition-all",
-            billingPeriod === "yearly" ? "bg-surface-container-high text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            "Yearly",
-            /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsxs2(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col rounded-2xl border bg-surface-container transition-all",
-            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-[var(--md3-outline-variant)] hover:border-primary/30"
-          ),
-          children: [
-            isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxs2("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__ */ jsx2(Zap, { className: "h-3 w-3" }),
-              "Most Popular"
-            ] }) }),
-            isCurrentTier && !isRecommended && /* @__PURE__ */ jsx2("div", { className: "absolute -top-4 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center rounded-full bg-surface-container-high border border-[var(--md3-outline-variant)] px-4 py-1.5 text-xs font-bold text-foreground", children: "Current Plan" }) }),
-            /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col p-8", isRecommended && "pt-10"), children: [
-              /* @__PURE__ */ jsxs2("div", { className: "mb-6", children: [
-                /* @__PURE__ */ jsx2("h3", { className: "text-lg font-bold text-foreground", children: tier.name }),
-                /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: tier.description })
-              ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "mb-8", children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
-                  /* @__PURE__ */ jsx2("span", { className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"), children: isFree ? "Free" : formatPrice(displayPrice) }),
-                  !isFree && /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground text-sm font-medium", children: "/mo" })
-                ] }),
-                billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-xs text-muted-foreground", children: [
-                  formatPrice(tier.yearlyPriceCents),
-                  " billed annually"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx2(
-                "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-[var(--md3-outline-variant)] cursor-default" : "bg-surface-container-high text-foreground border border-[var(--md3-outline-variant)] hover:border-primary/50 hover:bg-surface-container-highest"
-                  ),
-                  children: isCurrentTier ? "Current Plan" : isFree ? "Get Started" : "Subscribe"
-                }
-              ),
-              /* @__PURE__ */ jsx2("div", { className: "my-8 border-t border-[var(--md3-outline-variant)]" }),
-              /* @__PURE__ */ jsx2("ul", { className: "space-y-3.5 flex-1", children: tier.features.map((feature) => /* @__PURE__ */ jsxs2("li", { className: "flex items-start gap-3", children: [
-                /* @__PURE__ */ jsx2("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-surface-container-high text-muted-foreground"
-                ), children: /* @__PURE__ */ jsx2(Check, { className: "h-3 w-3" }) }),
-                /* @__PURE__ */ jsx2("span", { className: "text-sm text-foreground/80", children: feature })
-              ] }, feature)) })
-            ] })
-          ]
-        },
-        tier.id
-      );
-    }) })
-  ] });
-}
-
-// src/dashboard/usage-chart.tsx
-import * as React from "react";
-import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, CardTitle as CardTitle2 } from "@tangle-network/ui/primitives";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } 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] = React.useState(null);
-  const isEmpty = data.length === 0 || total === 0;
-  return /* @__PURE__ */ jsxs3(Card2, { className, children: [
-    /* @__PURE__ */ jsxs3(CardHeader2, { className: "flex flex-row items-center justify-between gap-3 pb-2", children: [
-      /* @__PURE__ */ jsx3(CardTitle2, { className: "min-w-0 truncate font-medium text-base", children: title }),
-      /* @__PURE__ */ jsxs3("div", { className: "shrink-0 whitespace-nowrap text-right", children: [
-        /* @__PURE__ */ jsx3("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
-        /* @__PURE__ */ jsx3("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx3(CardContent2, { children: isEmpty ? /* @__PURE__ */ jsxs3("div", { className: "flex h-48 flex-col items-center justify-center gap-1 text-center", children: [
-      /* @__PURE__ */ jsxs3("p", { className: "font-medium text-sm", children: [
-        "No ",
-        unit,
-        " recorded yet"
-      ] }),
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Usage appears here once activity begins." })
-    ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
-          /* @__PURE__ */ jsx3("span", { children: formatValue(maxValue) }),
-          /* @__PURE__ */ jsx3("span", { children: formatValue(Math.round(maxValue / 2)) }),
-          /* @__PURE__ */ jsx3("span", { children: "0" })
-        ] }),
-        /* @__PURE__ */ jsx3("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__ */ jsxs3(
-              "div",
-              {
-                className: "group relative flex flex-1 flex-col items-center",
-                onMouseEnter: () => setHoveredIndex(index),
-                onMouseLeave: () => setHoveredIndex(null),
-                children: [
-                  isHovered && /* @__PURE__ */ jsxs3("div", { className: "absolute -top-12 z-10 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-highest px-3 py-1.5 text-sm shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", children: [
-                    /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
-                      formatValue(point.value),
-                      " ",
-                      unit
-                    ] }),
-                    /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: formatDate2(point.date) })
-                  ] }),
-                  /* @__PURE__ */ jsx3(
-                    "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__ */ jsx3("div", { className: "mt-2 ml-10 flex gap-1", children: data.map((point, index) => /* @__PURE__ */ jsx3(
-          "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__ */ jsxs3("div", { className: "mt-4 grid grid-cols-3 gap-4 border-[var(--md3-outline-variant)] border-t pt-4", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Average" }),
-          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
-            formatValue(Math.round(total / data.length)),
-            " ",
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Peak" }),
-          /* @__PURE__ */ jsxs3("p", { className: "font-medium", children: [
-            formatValue(maxValue),
-            " ",
-            unit
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Total" }),
-          /* @__PURE__ */ jsxs3("p", { className: cn("font-medium", colors.text), children: [
-            formatValue(total),
-            " ",
-            unit
-          ] })
-        ] })
-      ] })
-    ] }) })
-  ] });
-}
-
-// src/dashboard/template-card.tsx
-import { ArrowRight } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function TemplateCard({ template, onUseTemplate, className }) {
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: cn(
-        "group relative flex flex-col justify-between rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container p-6 transition-colors hover:border-[var(--border-accent)]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx4("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-surface-container-high border border-[var(--md3-outline-variant)]", children: template.icon ?? /* @__PURE__ */ jsx4("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
-          /* @__PURE__ */ jsx4("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
-          /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
-          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx4(
-            "span",
-            {
-              className: "rounded-full bg-surface-container-high px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
-              children: tag
-            },
-            `${tag}-${i}`
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs4(
-          "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__ */ jsx4(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/dashboard/info-panel.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function InfoPanel({ label, title, description, className }) {
-  return /* @__PURE__ */ jsxs5("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs5("div", { className: "relative z-10", children: [
-      /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
-      /* @__PURE__ */ jsx5("h3", { className: "mt-1 text-lg font-bold", children: title }),
-      /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
-    ] }),
-    /* @__PURE__ */ jsx5("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 {
-  BillingDashboard,
-  formatPrice,
-  PricingPage,
-  UsageChart,
-  TemplateCard,
-  InfoPanel
-};