@tangle-network/sandbox-ui 0.113.7 → 0.115.0

package/dist/info-panel-C9cqDzOL.js

@@ -0,0 +1,594 @@
+import { t as cn } from "./utils-DzWbktWG.js";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Progress } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { ArrowRight, Check, Zap } from "lucide-react";
+//#region src/dashboard/billing-dashboard.tsx
+const 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$1(dateStr) {
+	return new Date(dateStr).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 colors = 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: colors.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", colors.accent),
+						children: subscription.tierName
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-sm",
+						children: ["Renews ", formatDate$1(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: colors.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", colors.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: colors.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", colors.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" && colors.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"
+								})
+							]
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/dashboard/pricing-page.tsx
+/**
+* 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).
+*/
+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__ */ jsxs("div", {
+		className: cn("w-full space-y-10", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "inline-flex items-center rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-low p-1",
+				children: [/* @__PURE__ */ jsx("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__ */ jsxs("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__ */ jsx("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__ */ jsx("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__ */ jsxs("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__ */ jsx("div", {
+							className: "absolute -top-4 left-1/2 -translate-x-1/2",
+							children: /* @__PURE__ */ jsxs("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__ */ jsx(Zap, { className: "h-3 w-3" }), "Most Popular"]
+							})
+						}),
+						isCurrentTier && !isRecommended && /* @__PURE__ */ jsx("div", {
+							className: "absolute -top-4 left-1/2 -translate-x-1/2",
+							children: /* @__PURE__ */ jsx("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__ */ jsxs("div", {
+							className: cn("flex flex-col p-8", isRecommended && "pt-10"),
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "mb-6",
+									children: [/* @__PURE__ */ jsx("h3", {
+										className: "text-lg font-bold text-foreground",
+										children: tier.name
+									}), /* @__PURE__ */ jsx("p", {
+										className: "mt-1 text-sm text-muted-foreground",
+										children: tier.description
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "mb-8",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex items-baseline gap-1",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: cn("text-5xl font-extrabold tracking-tight", isRecommended ? "text-primary" : "text-foreground"),
+											children: isFree ? "Free" : formatPrice(displayPrice)
+										}), !isFree && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-sm font-medium",
+											children: "/mo"
+										})]
+									}), billingPeriod === "yearly" && tier.yearlyPriceCents !== void 0 && !isFree && /* @__PURE__ */ jsxs("p", {
+										className: "mt-1 text-xs text-muted-foreground",
+										children: [formatPrice(tier.yearlyPriceCents), " billed annually"]
+									})]
+								}),
+								/* @__PURE__ */ jsx("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__ */ jsx("div", { className: "my-8 border-t border-[var(--md3-outline-variant)]" }),
+								/* @__PURE__ */ jsx("ul", {
+									className: "space-y-3.5 flex-1",
+									children: tier.features.map((feature) => /* @__PURE__ */ jsxs("li", {
+										className: "flex items-start gap-3",
+										children: [/* @__PURE__ */ jsx("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__ */ jsx(Check, { className: "h-3 w-3" })
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-sm text-foreground/80",
+											children: feature
+										})]
+									}, feature))
+								})
+							]
+						})
+					]
+				}, tier.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/dashboard/usage-chart.tsx
+const colors = {
+	bar: "bg-[image:var(--accent-gradient-strong)]",
+	barHover: "hover:brightness-110",
+	text: "text-[var(--accent-text)]"
+};
+function formatDate(dateStr) {
+	return new Date(dateStr).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$1.useState(null);
+	const isEmpty = data.length === 0 || total === 0;
+	return /* @__PURE__ */ jsxs(Card, {
+		className,
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "flex flex-row items-center justify-between gap-3 pb-2",
+			children: [/* @__PURE__ */ jsx(CardTitle, {
+				className: "min-w-0 truncate font-medium text-base",
+				children: title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 whitespace-nowrap text-right",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("font-bold text-2xl", colors.text),
+					children: formatValue(total)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-1 text-muted-foreground text-sm",
+					children: unit
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(CardContent, { children: isEmpty ? /* @__PURE__ */ jsxs("div", {
+			className: "flex h-48 flex-col items-center justify-center gap-1 text-center",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "font-medium text-sm",
+				children: [
+					"No ",
+					unit,
+					" recorded yet"
+				]
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: "Usage appears here once activity begins."
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: formatValue(maxValue) }),
+						/* @__PURE__ */ jsx("span", { children: formatValue(Math.round(maxValue / 2)) }),
+						/* @__PURE__ */ jsx("span", { children: "0" })
+					]
+				}),
+				/* @__PURE__ */ jsx("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 /* @__PURE__ */ jsxs("div", {
+							className: "group relative flex flex-1 flex-col items-center",
+							onMouseEnter: () => setHoveredIndex(index),
+							onMouseLeave: () => setHoveredIndex(null),
+							children: [isHovered && /* @__PURE__ */ jsxs("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__ */ jsxs("p", {
+									className: "font-medium",
+									children: [
+										formatValue(point.value),
+										" ",
+										unit
+									]
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-xs",
+									children: formatDate(point.date)
+								})]
+							}), /* @__PURE__ */ jsx("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__ */ jsx("div", {
+					className: "mt-2 ml-10 flex gap-1",
+					children: data.map((point, index) => /* @__PURE__ */ jsx("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 ? formatDate(point.date) : ""
+					}, point.date))
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 grid grid-cols-3 gap-4 border-[var(--md3-outline-variant)] border-t pt-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Average"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "font-medium",
+						children: [
+							formatValue(Math.round(total / data.length)),
+							" ",
+							unit
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Peak"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "font-medium",
+						children: [
+							formatValue(maxValue),
+							" ",
+							unit
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "Total"
+					}), /* @__PURE__ */ jsxs("p", {
+						className: cn("font-medium", colors.text),
+						children: [
+							formatValue(total),
+							" ",
+							unit
+						]
+					})]
+				})
+			]
+		})] }) })]
+	});
+}
+//#endregion
+//#region src/dashboard/template-card.tsx
+function TemplateCard({ template, onUseTemplate, className }) {
+	return /* @__PURE__ */ jsxs("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__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("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__ */ jsx("span", {
+					className: "text-lg font-bold text-primary",
+					children: template.name.charAt(0).toUpperCase()
+				})
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: "mb-1 text-base font-bold text-foreground",
+				children: template.name
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground leading-relaxed line-clamp-2",
+				children: template.description
+			}),
+			template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-3 flex flex-wrap gap-1.5",
+				children: template.tags.map((tag, i) => /* @__PURE__ */ jsx("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__ */ jsxs("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__ */ jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })]
+		})]
+	});
+}
+//#endregion
+//#region src/dashboard/info-panel.tsx
+function InfoPanel({ label, title, description, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative z-10",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "mt-1 text-lg font-bold",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]",
+					children: description
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })]
+	});
+}
+//#endregion
+export { formatPrice as a, PricingPage as i, TemplateCard as n, BillingDashboard as o, UsageChart as r, InfoPanel as t };