@tangle-network/sandbox-ui 0.15.1 → 0.15.3

package/dist/chunk-DNZ4DTNA.js

@@ -1,547 +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-border bg-muted/50 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-card 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-card 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 transition-all",
-            isRecommended ? "border-primary shadow-[var(--shadow-glow)] scale-[1.02] z-10" : "border-border 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-muted border border-border 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-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__ */ jsx2("div", { className: "my-8 border-t border-border" }),
-              /* @__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-muted 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 { 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);
-  return /* @__PURE__ */ jsxs3(Card2, { className, children: [
-    /* @__PURE__ */ jsxs3(CardHeader2, { className: "flex flex-row items-center justify-between pb-2", children: [
-      /* @__PURE__ */ jsx3(CardTitle2, { className: "font-medium text-base", children: title }),
-      /* @__PURE__ */ jsxs3("div", { className: "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__ */ jsxs3(CardContent2, { 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 bg-popover px-3 py-1.5 text-sm shadow-lg", 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-border 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-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx4("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", 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-muted 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
-};

package/dist/template-card-UhV3pmRC.d.ts

@@ -1,88 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
-interface BillingSubscription {
-    status: string;
-    tierName: string;
-    renewsAt: string;
-}
-interface BillingBalance {
-    available: number;
-    used: number;
-}
-interface BillingUsage {
-    period: string;
-    total: number;
-    byModel: Record<string, number>;
-}
-interface BillingDashboardProps {
-    subscription: BillingSubscription | null;
-    balance: BillingBalance;
-    usage: BillingUsage;
-    onManageSubscription: () => void;
-    onAddCredits: () => void;
-    variant?: "sandbox";
-    className?: string;
-    cardClassName?: string;
-}
-declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
-
-interface PricingTier {
-    id: string;
-    name: string;
-    description: string;
-    monthlyPriceCents: number;
-    yearlyPriceCents?: number;
-    features: string[];
-    recommended?: boolean;
-    creditsPerMonth?: number;
-    monthlyPriceId?: string;
-    yearlyPriceId?: string;
-}
-interface PricingPageProps {
-    tiers: PricingTier[];
-    currentTierId?: string;
-    billingPeriod: "monthly" | "yearly";
-    onBillingPeriodChange: (period: "monthly" | "yearly") => void;
-    onSelectTier: (tierId: string) => void;
-    variant?: "sandbox";
-    loading?: boolean;
-    className?: string;
-    cardClassName?: string;
-}
-/**
- * Formats an integer cent amount as a human-readable USD price.
- * Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
- * Returns "$0" for non-finite or negative inputs.
- * @param cents - Amount in whole US cents (e.g. 1099 for $10.99).
- */
-declare function formatPrice(cents: number): string;
-declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className, }: PricingPageProps): react_jsx_runtime.JSX.Element;
-
-interface UsageDataPoint {
-    date: string;
-    value: number;
-}
-interface UsageChartProps {
-    data: UsageDataPoint[];
-    title: string;
-    unit: string;
-    className?: string;
-}
-declare function UsageChart({ data, title, unit, className }: UsageChartProps): react_jsx_runtime.JSX.Element;
-
-interface TemplateCardData {
-    id: string;
-    name: string;
-    description: string;
-    icon?: React.ReactNode;
-    tags?: string[];
-}
-interface TemplateCardProps {
-    template: TemplateCardData;
-    onUseTemplate: (templateId: string) => void;
-    className?: string;
-}
-declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): react_jsx_runtime.JSX.Element;
-
-export { type BillingBalance as B, PricingPage as P, TemplateCard as T, UsageChart as U, BillingDashboard as a, type BillingDashboardProps as b, type BillingSubscription as c, type BillingUsage as d, type PricingPageProps as e, type PricingTier as f, type TemplateCardData as g, type TemplateCardProps as h, type UsageChartProps as i, type UsageDataPoint as j, formatPrice as k };