@umituz/web-payment 0.0.0-stage → 1.0.0

package/dist/portal.mjs

@@ -0,0 +1,2737 @@
+import {
+  NoopNavigationStrategy,
+  TONE_PAIRS,
+  VisualTokens,
+  WindowNavigationStrategy
+} from "./chunk-2NH5DOLT.mjs";
+import {
+  toMajorUnits
+} from "./chunk-PIWNUAKW.mjs";
+import {
+  BILLING_CYCLE
+} from "./chunk-RQTMBR74.mjs";
+
+// src/presentation/portal/components/BillingPortal.tsx
+import { CreditCard as CreditCard2, FileText as FileText2, BarChart3, Settings, AlertCircle } from "lucide-react";
+
+// src/presentation/portal/labels.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function formatLabel(template, params) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (match, key) => key in params ? String(params[key]) : match
+  );
+}
+var DEFAULT_BILLING_LABELS = Object.freeze({
+  common: Object.freeze({
+    loading: "Loading\u2026",
+    usage: "usage"
+  }),
+  page: Object.freeze({
+    backToDashboard: "Back to dashboard",
+    title: "Billing",
+    description: "Manage your subscription, payment methods, and invoices.",
+    needHelp: "Need help?",
+    contactAria: "Contact {email}"
+  }),
+  tabs: Object.freeze({
+    overview: "Overview",
+    paymentMethods: "Payment Methods",
+    invoices: "Invoices",
+    plan: "Plan"
+  }),
+  overview: Object.freeze({
+    currentSubscription: "Current Subscription",
+    trialDaysLeft: "days left in trial",
+    nextBilling: "Next billing:",
+    upcomingInvoice: "Upcoming Invoice"
+  }),
+  invoices: Object.freeze({
+    empty: "No invoices yet",
+    moreItems: "more items",
+    due: "Due",
+    viewInvoice: "View invoice",
+    downloadPdf: "Download PDF"
+  }),
+  plan: Object.freeze({
+    title: "Current Plan",
+    actionsTitle: "Plan Actions",
+    changePlan: "Change Plan",
+    cancelSubscription: "Cancel Subscription",
+    confirmCancel: "Click again to confirm",
+    cancelling: "Cancelling\u2026",
+    cancelConfirmMessage: "Your subscription stays active until the end of the current billing period.",
+    cancelFailed: "Failed to cancel subscription. Please try again."
+  }),
+  planComparison: Object.freeze({
+    monthly: "Monthly",
+    yearly: "Yearly",
+    monthlyShort: "mo",
+    yearlyShort: "yr",
+    save: "Save {percent}%",
+    saveWithYearly: "Save {percent}% with yearly billing",
+    mostPopular: "Most Popular",
+    currentPlan: "Current Plan",
+    selectPlan: "Select Plan",
+    processing: "Processing\u2026",
+    billingCycleLabel: "Billing cycle",
+    radiogroupLabel: "Available plans"
+  }),
+  paymentMethods: Object.freeze({
+    none: "No payment methods on file",
+    add: "Add Payment Method",
+    bankAccount: "Bank Account",
+    expires: "Expires",
+    default: "Default",
+    setDefault: "Set as default",
+    remove: "Remove",
+    removeConfirm: "Remove this payment method?",
+    confirmRemove: "Remove",
+    cancelRemove: "Cancel"
+  }),
+  usage: Object.freeze({
+    limit: "limit",
+    resets: "Resets"
+  }),
+  status: Object.freeze({
+    active: "Active",
+    trialing: "Trial",
+    past_due: "Past Due",
+    canceled: "Canceled",
+    unpaid: "Unpaid",
+    incomplete: "Incomplete",
+    revoked: "Revoked"
+  }),
+  invoiceStatus: Object.freeze({
+    draft: "Draft",
+    open: "Open",
+    paid: "Paid",
+    void: "Void",
+    uncollectible: "Uncollectible",
+    refunded: "Refunded"
+  })
+});
+function mergeLabels(overrides) {
+  if (!overrides) return { ...DEFAULT_BILLING_LABELS };
+  const merged = { ...DEFAULT_BILLING_LABELS };
+  for (const key of Object.keys(overrides)) {
+    const override = overrides[key];
+    if (override === void 0) continue;
+    const base = DEFAULT_BILLING_LABELS[key];
+    const target = merged;
+    if (typeof base === "string" || typeof override === "string") {
+      target[key] = override;
+    } else {
+      target[key] = { ...base, ...override };
+    }
+  }
+  return merged;
+}
+var BillingLabelsContext = createContext(
+  DEFAULT_BILLING_LABELS
+);
+function BillingLabelsProvider({
+  labels,
+  children
+}) {
+  const value = useMemo(() => mergeLabels(labels), [labels]);
+  return /* @__PURE__ */ jsx(BillingLabelsContext.Provider, { value, children });
+}
+function useBillingLabels() {
+  return useContext(BillingLabelsContext);
+}
+
+// src/presentation/portal/components/PaymentMethodsList.tsx
+import { useState } from "react";
+import {
+  CreditCard,
+  Trash2,
+  Check,
+  Plus,
+  AlertTriangle
+} from "lucide-react";
+
+// src/presentation/portal/utils/billing.ts
+function formatNumber(num, locale = "en-US") {
+  return new Intl.NumberFormat(locale).format(num);
+}
+function formatPrice(amount, currency = "USD") {
+  const localeMap = {
+    USD: "en-US",
+    EUR: "de-DE",
+    GBP: "en-GB",
+    TRY: "tr-TR",
+    JPY: "ja-JP"
+  };
+  return new Intl.NumberFormat(localeMap[currency] ?? "en-US", {
+    style: "currency",
+    currency
+  }).format(toMajorUnits(amount, currency));
+}
+function calculateDiscount(monthlyPrice, yearlyPrice) {
+  if (monthlyPrice <= 0) return 0;
+  const yearlyMonthly = yearlyPrice / 12;
+  const discount = (monthlyPrice - yearlyMonthly) / monthlyPrice * 100;
+  return Math.round(Math.max(discount, 0));
+}
+function calculateProratedAmount(amount, daysUsed, totalDays) {
+  if (totalDays === 0) return 0;
+  return amount / totalDays * daysUsed;
+}
+function getPlanPrice(plan, cycle) {
+  return cycle === "monthly" ? plan.monthlyPrice : plan.yearlyPrice;
+}
+function calculateUsagePercentage(metric) {
+  if (metric.limit === 0) return 0;
+  return Math.min(metric.current / metric.limit * 100, 100);
+}
+function isNearLimit(metric, threshold = 80) {
+  return calculateUsagePercentage(metric) >= threshold;
+}
+function getStatusTone(status) {
+  const toneMap = {
+    active: "active",
+    trialing: "active",
+    past_due: "warning",
+    canceled: "neutral",
+    unpaid: "danger",
+    incomplete: "warning",
+    revoked: "danger"
+  };
+  return toneMap[status] ?? "neutral";
+}
+function getStatusLabel(status) {
+  const labelMap = {
+    active: "Active",
+    trialing: "Trial",
+    past_due: "Past Due",
+    canceled: "Canceled",
+    unpaid: "Unpaid",
+    incomplete: "Incomplete",
+    revoked: "Revoked"
+  };
+  return labelMap[status] || status;
+}
+function getInvoiceStatusTone(status) {
+  const toneMap = {
+    draft: "neutral",
+    open: "warning",
+    paid: "active",
+    void: "neutral",
+    uncollectible: "danger",
+    refunded: "neutral"
+  };
+  return toneMap[status] ?? "neutral";
+}
+function getInvoiceStatusLabel(status) {
+  const labelMap = {
+    draft: "Draft",
+    open: "Open",
+    paid: "Paid",
+    void: "Void",
+    uncollectible: "Uncollectible",
+    refunded: "Refunded"
+  };
+  return labelMap[status] || status;
+}
+function formatCardNumber(last4, brand) {
+  return `${brand.toUpperCase()} \u2022\u2022\u2022\u2022 ${last4}`;
+}
+function formatExpiry(month, year) {
+  return `${String(month).padStart(2, "0")}/${String(year).slice(-2)}`;
+}
+function getDaysRemaining(endDate) {
+  const end = new Date(endDate);
+  const now = /* @__PURE__ */ new Date();
+  const diff = end.getTime() - now.getTime();
+  return Math.max(0, Math.ceil(diff / (1e3 * 60 * 60 * 24)));
+}
+function isTrialExpiringSoon(trialEnd, daysThreshold = 7) {
+  const daysRemaining = getDaysRemaining(trialEnd);
+  return daysRemaining > 0 && daysRemaining <= daysThreshold;
+}
+function getNextBillingDate(currentPeriodEnd, cycle) {
+  const nextDate = new Date(currentPeriodEnd);
+  if (cycle === "monthly") {
+    nextDate.setMonth(nextDate.getMonth() + 1);
+  } else {
+    nextDate.setFullYear(nextDate.getFullYear() + 1);
+  }
+  return nextDate;
+}
+function groupInvoicesByStatus(invoices) {
+  const grouped = {
+    draft: [],
+    open: [],
+    paid: [],
+    void: [],
+    uncollectible: [],
+    refunded: []
+  };
+  invoices.forEach((invoice) => {
+    grouped[invoice.status].push(invoice);
+  });
+  return grouped;
+}
+function calculateInvoiceTotal(invoices, status) {
+  const filtered = status ? invoices.filter((inv) => inv.status === status) : invoices;
+  return filtered.reduce((sum, inv) => sum + inv.amount, 0);
+}
+function sortInvoicesByDate(invoices, order = "desc") {
+  return [...invoices].sort((a, b) => {
+    const dateA = new Date(a.date).getTime();
+    const dateB = new Date(b.date).getTime();
+    return order === "asc" ? dateA - dateB : dateB - dateA;
+  });
+}
+function formatFeature(feature) {
+  if (typeof feature === "string") {
+    return { text: feature, included: true };
+  }
+  return feature;
+}
+function isPopularPlan(plan, plans) {
+  const middleIndex = Math.floor(plans.length / 2);
+  return plans[middleIndex]?.id === plan.id;
+}
+function getTrialDaysText(trialEnd) {
+  const days = getDaysRemaining(trialEnd);
+  if (days === 0) return "Trial ends today";
+  if (days === 1) return "1 day left";
+  return `${days} days left`;
+}
+
+// src/presentation/portal/components/PortalButton.tsx
+import { jsxs } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  default: {
+    background: VisualTokens.color.brandPrimary,
+    color: VisualTokens.color.textOnPrimary,
+    border: "1px solid transparent"
+  },
+  outline: {
+    background: "transparent",
+    color: VisualTokens.color.textPrimary,
+    border: `1px solid ${VisualTokens.color.borderStrong}`
+  },
+  destructive: {
+    background: VisualTokens.color.brandDanger,
+    color: VisualTokens.color.textOnError,
+    border: "1px solid transparent"
+  },
+  ghost: {
+    background: "transparent",
+    color: VisualTokens.color.textMuted,
+    border: "1px solid transparent"
+  }
+};
+var SIZE_STYLES = {
+  sm: {
+    padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.lg}px`,
+    fontSize: VisualTokens.fontSize.caption
+  },
+  md: {
+    padding: `${VisualTokens.spacing.md}px ${VisualTokens.spacing.xxl}px`,
+    fontSize: VisualTokens.fontSize.body
+  }
+};
+var PortalButton = ({
+  variant = "default",
+  size = "md",
+  fullWidth = false,
+  pill = false,
+  icon,
+  children,
+  disabled,
+  style,
+  type = "button",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      disabled,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: VisualTokens.spacing.sm,
+        borderRadius: pill ? VisualTokens.radius.pill : VisualTokens.radius.md,
+        fontWeight: VisualTokens.fontWeight.medium,
+        lineHeight: VisualTokens.lineHeight.normal,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? VisualTokens.opacity.disabled : 1,
+        width: fullWidth ? "100%" : void 0,
+        boxSizing: "border-box",
+        ...VARIANT_STYLES[variant],
+        ...SIZE_STYLES[size],
+        ...style
+      },
+      ...rest,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+};
+
+// src/presentation/portal/components/PortalSpinner.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PortalSpinner = ({ size = 24 }) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    style: { display: "inline-block", verticalAlign: "middle" },
+    children: /* @__PURE__ */ jsx2(
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeDasharray: "44 19",
+        children: /* @__PURE__ */ jsx2(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 12 12",
+            to: "360 12 12",
+            dur: "0.8s",
+            repeatCount: "indefinite"
+          }
+        )
+      }
+    )
+  }
+);
+
+// src/presentation/portal/styles.ts
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var card = {
+  background: VisualTokens.color.surfacePrimary,
+  border: `1px solid ${VisualTokens.color.borderSubtle}`,
+  borderRadius: VisualTokens.radius.lg,
+  padding: VisualTokens.spacing.section,
+  boxSizing: "border-box"
+};
+var cardInteractive = {
+  ...card,
+  cursor: "pointer"
+};
+var sectionTitle = {
+  fontSize: VisualTokens.fontSize.title,
+  fontWeight: VisualTokens.fontWeight.strong,
+  color: VisualTokens.color.textPrimary,
+  margin: 0,
+  marginBottom: VisualTokens.spacing.xl
+};
+var mutedText = {
+  color: VisualTokens.color.textMuted,
+  fontSize: VisualTokens.fontSize.body
+};
+var stack = {
+  display: "flex",
+  flexDirection: "column",
+  gap: VisualTokens.spacing.xl
+};
+var row = {
+  display: "flex",
+  alignItems: "center"
+};
+var alertDanger = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: VisualTokens.spacing.md,
+  padding: VisualTokens.spacing.lg,
+  borderRadius: VisualTokens.radius.md,
+  border: `1px solid ${VisualTokens.color.borderWarning}`,
+  background: VisualTokens.color.surfaceDangerMuted,
+  color: VisualTokens.color.brandDangerText,
+  fontSize: VisualTokens.fontSize.body
+};
+
+// src/presentation/portal/components/PaymentMethodsList.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var BRAND_GRADIENT = {
+  visa: "linear-gradient(135deg, #1d4ed8, #3b82f6)",
+  mastercard: "linear-gradient(135deg, #f97316, #ef4444)",
+  amex: "linear-gradient(135deg, #0e7490, #06b6d4)",
+  discover: "linear-gradient(135deg, #f59e0b, #f97316)",
+  default: "linear-gradient(135deg, #334155, #64748b)"
+};
+var cardGradient = (brand) => {
+  if (!brand) return BRAND_GRADIENT.default;
+  const key = brand.toLowerCase();
+  return BRAND_GRADIENT[key] ?? BRAND_GRADIENT.default;
+};
+var PaymentMethodsList = ({
+  paymentMethods,
+  loading = false,
+  busyId,
+  onSetDefault,
+  onRemove,
+  onAddNew
+}) => {
+  const labels = useBillingLabels();
+  const [pendingRemove, setPendingRemove] = useState(null);
+  if (loading) {
+    return /* @__PURE__ */ jsxs2("div", { style: { ...row, justifyContent: "center", padding: `${VisualTokens.spacing.section}px 0` }, role: "status", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx3(PortalSpinner, { size: 32 }),
+      /* @__PURE__ */ jsx3("span", { style: visuallyHidden, children: labels.common.loading })
+    ] });
+  }
+  if (paymentMethods.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", padding: `${VisualTokens.spacing.section}px 0` }, children: [
+      /* @__PURE__ */ jsx3(
+        CreditCard,
+        {
+          size: 48,
+          "aria-hidden": "true",
+          style: { color: VisualTokens.color.textMuted, marginBottom: VisualTokens.spacing.lg }
+        }
+      ),
+      /* @__PURE__ */ jsx3("p", { style: { ...mutedText, margin: 0, marginBottom: VisualTokens.spacing.section }, children: labels.paymentMethods.none }),
+      onAddNew && /* @__PURE__ */ jsx3(PortalButton, { type: "button", onClick: onAddNew, variant: "outline", icon: /* @__PURE__ */ jsx3(Plus, { size: 16 }), children: labels.paymentMethods.add })
+    ] });
+  }
+  const requestRemove = (id) => setPendingRemove(id);
+  const cancelRemove = () => setPendingRemove(null);
+  const confirmRemove = (id) => {
+    onRemove?.(id);
+    setPendingRemove(null);
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: stack, children: [
+    paymentMethods.map((method) => /* @__PURE__ */ jsx3(
+      PaymentMethodItem,
+      {
+        method,
+        allMethods: paymentMethods,
+        onRemove,
+        isBusy: busyId === method.id,
+        pendingRemove: pendingRemove === method.id,
+        onRequestRemove: requestRemove,
+        onCancelRemove: cancelRemove,
+        onConfirmRemove: confirmRemove,
+        onSetDefault
+      },
+      method.id
+    )),
+    onAddNew && /* @__PURE__ */ jsx3(
+      PortalButton,
+      {
+        type: "button",
+        onClick: onAddNew,
+        variant: "outline",
+        fullWidth: true,
+        icon: /* @__PURE__ */ jsx3(Plus, { size: 16 }),
+        children: labels.paymentMethods.add
+      }
+    )
+  ] });
+};
+var PaymentMethodItem = ({
+  method,
+  allMethods,
+  onRemove,
+  isBusy,
+  pendingRemove,
+  onRequestRemove,
+  onCancelRemove,
+  onConfirmRemove,
+  onSetDefault
+}) => {
+  const labels = useBillingLabels();
+  const itemStyle = {
+    borderRadius: VisualTokens.radius.lg,
+    border: `1px solid ${method.isDefault ? VisualTokens.color.brandPrimary : VisualTokens.color.borderSubtle}`,
+    background: method.isDefault ? VisualTokens.color.surfaceMuted : VisualTokens.color.surfacePrimary,
+    padding: VisualTokens.spacing.xl
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: itemStyle, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { ...row, justifyContent: "space-between", gap: VisualTokens.spacing.xl }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { ...row, gap: VisualTokens.spacing.xl, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: 48,
+              height: 32,
+              borderRadius: VisualTokens.radius.sm,
+              background: cardGradient(method.card?.brand),
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: method.card && /* @__PURE__ */ jsx3(CreditCard, { size: 20, color: VisualTokens.color.textInverse, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx3(
+            "p",
+            {
+              style: {
+                fontWeight: VisualTokens.fontWeight.medium,
+                color: VisualTokens.color.textPrimary,
+                margin: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: method.card ? formatCardNumber(method.card.last4, method.card.brand) : labels.paymentMethods.bankAccount
+            }
+          ),
+          /* @__PURE__ */ jsx3("p", { style: { ...mutedText, margin: 0 }, children: method.card ? `${labels.paymentMethods.expires} ${formatExpiry(
+            method.card.expiryMonth,
+            method.card.expiryYear
+          )}` : method.bankAccount ? `${method.bankAccount.bankName} \u2022\u2022\u2022\u2022 ${method.bankAccount.last4}` : null })
+        ] }),
+        method.isDefault && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.caption,
+              background: VisualTokens.color.brandPrimary,
+              color: VisualTokens.color.textOnPrimary,
+              padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.md}px`,
+              borderRadius: VisualTokens.radius.pill,
+              fontWeight: VisualTokens.fontWeight.medium,
+              flexShrink: 0
+            },
+            "aria-label": labels.paymentMethods.default,
+            children: labels.paymentMethods.default
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: { ...row, gap: VisualTokens.spacing.sm, flexShrink: 0 }, children: [
+        !method.isDefault && onSetDefault && /* @__PURE__ */ jsx3(
+          PortalButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onSetDefault(method.id),
+            disabled: isBusy,
+            "aria-label": labels.paymentMethods.setDefault,
+            children: /* @__PURE__ */ jsx3(Check, { size: 16 })
+          }
+        ),
+        onRemove && paymentMethodsAllowsRemove(method, allMethods) && /* @__PURE__ */ jsx3(
+          PortalButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onRequestRemove(method.id),
+            disabled: isBusy,
+            "aria-label": labels.paymentMethods.remove,
+            style: { color: isBusy ? void 0 : VisualTokens.color.brandDanger },
+            children: isBusy ? /* @__PURE__ */ jsx3(PortalSpinner, { size: 16 }) : /* @__PURE__ */ jsx3(Trash2, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    pendingRemove && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "alert",
+        style: { ...alertDanger, marginTop: VisualTokens.spacing.lg, justifyContent: "space-between" },
+        children: [
+          /* @__PURE__ */ jsxs2("span", { style: { ...row, gap: VisualTokens.spacing.md }, children: [
+            /* @__PURE__ */ jsx3(AlertTriangle, { size: 16, style: { flexShrink: 0 } }),
+            labels.paymentMethods.removeConfirm
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: { ...row, gap: VisualTokens.spacing.sm }, children: [
+            /* @__PURE__ */ jsx3(PortalButton, { type: "button", variant: "ghost", size: "sm", onClick: onCancelRemove, children: labels.paymentMethods.cancelRemove }),
+            /* @__PURE__ */ jsx3(
+              PortalButton,
+              {
+                type: "button",
+                variant: "destructive",
+                size: "sm",
+                onClick: () => onConfirmRemove(method.id),
+                children: labels.paymentMethods.confirmRemove
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var paymentMethodsAllowsRemove = (method, all) => all.length > 1 || !method.isDefault;
+
+// src/presentation/portal/components/InvoiceCard.tsx
+import { FileText, Download, ExternalLink } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DATE_FORMAT_OPTIONS = {
+  year: "numeric",
+  month: "long",
+  day: "numeric"
+};
+var openExternal = (url) => {
+  window.open(url, "_blank", "noopener,noreferrer");
+};
+var InvoiceCard = ({
+  invoice,
+  compact = false,
+  locale = "en-US",
+  onClick,
+  onDownload
+}) => {
+  const labels = useBillingLabels();
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick?.(invoice);
+    }
+  };
+  const statusTone = getInvoiceStatusTone(invoice.status);
+  const iconBox = {
+    width: compact ? 40 : 48,
+    height: compact ? 40 : 48,
+    borderRadius: VisualTokens.radius.md,
+    background: VisualTokens.color.surfaceMuted,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: VisualTokens.color.textMuted,
+    flexShrink: 0
+  };
+  if (compact) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        "aria-label": onClick ? `Invoice ${invoice.number}` : void 0,
+        onClick: onClick ? () => onClick(invoice) : void 0,
+        onKeyDown: onClick ? handleKeyDown : void 0,
+        style: { ...cardInteractive, ...row, justifyContent: "space-between", padding: VisualTokens.spacing.xl },
+        children: [
+          /* @__PURE__ */ jsxs3("div", { style: { ...row, gap: VisualTokens.spacing.lg }, children: [
+            /* @__PURE__ */ jsx4("div", { style: iconBox, children: /* @__PURE__ */ jsx4(FileText, { size: 20 }) }),
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx4(
+                "p",
+                {
+                  style: {
+                    fontSize: VisualTokens.fontSize.body,
+                    fontWeight: VisualTokens.fontWeight.medium,
+                    color: VisualTokens.color.textPrimary,
+                    margin: 0
+                  },
+                  children: invoice.number
+                }
+              ),
+              /* @__PURE__ */ jsx4("p", { style: { ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }, children: new Date(invoice.date).toLocaleDateString(locale) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { style: { textAlign: "right" }, children: [
+            /* @__PURE__ */ jsx4(
+              "p",
+              {
+                style: {
+                  fontWeight: VisualTokens.fontWeight.strong,
+                  color: VisualTokens.color.textPrimary,
+                  margin: 0
+                },
+                children: formatPrice(invoice.amount, invoice.currency)
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "p",
+              {
+                style: {
+                  fontSize: VisualTokens.fontSize.caption,
+                  fontWeight: VisualTokens.fontWeight.medium,
+                  color: TONE_PAIRS[statusTone].fg,
+                  margin: 0
+                },
+                children: labels.invoiceStatus[invoice.status]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      "aria-label": onClick ? `Invoice ${invoice.number}` : void 0,
+      onClick: onClick ? () => onClick(invoice) : void 0,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      style: cardInteractive,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              ...row,
+              justifyContent: "space-between",
+              gap: VisualTokens.spacing.lg,
+              marginBottom: VisualTokens.spacing.xl
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("div", { style: { ...row, gap: VisualTokens.spacing.lg }, children: [
+                /* @__PURE__ */ jsx4("div", { style: iconBox, children: /* @__PURE__ */ jsx4(FileText, { size: 24 }) }),
+                /* @__PURE__ */ jsxs3("div", { children: [
+                  /* @__PURE__ */ jsx4(
+                    "p",
+                    {
+                      style: {
+                        fontWeight: VisualTokens.fontWeight.strong,
+                        color: VisualTokens.color.textPrimary,
+                        margin: 0
+                      },
+                      children: invoice.number
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("p", { style: { ...mutedText, margin: 0 }, children: new Date(invoice.date).toLocaleDateString(locale, DATE_FORMAT_OPTIONS) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { style: { textAlign: "right" }, children: [
+                /* @__PURE__ */ jsx4(
+                  "p",
+                  {
+                    style: {
+                      fontSize: VisualTokens.fontSize.display,
+                      fontWeight: VisualTokens.fontWeight.strong,
+                      color: VisualTokens.color.textPrimary,
+                      margin: 0
+                    },
+                    children: formatPrice(invoice.amount, invoice.currency)
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "p",
+                  {
+                    style: {
+                      fontSize: VisualTokens.fontSize.body,
+                      fontWeight: VisualTokens.fontWeight.medium,
+                      color: TONE_PAIRS[statusTone].fg,
+                      margin: 0
+                    },
+                    children: labels.invoiceStatus[invoice.status]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        invoice.items && invoice.items.length > 0 && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: VisualTokens.spacing.sm,
+              marginBottom: VisualTokens.spacing.xl
+            },
+            children: [
+              invoice.items.slice(0, 2).map((item, index) => /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: { ...row, justifyContent: "space-between", fontSize: VisualTokens.fontSize.body },
+                  children: [
+                    /* @__PURE__ */ jsx4("span", { style: { color: VisualTokens.color.textMuted }, children: item.description }),
+                    /* @__PURE__ */ jsx4("span", { style: { color: VisualTokens.color.textPrimary }, children: formatPrice(item.amount, invoice.currency) })
+                  ]
+                },
+                `${item.description}-${index}`
+              )),
+              invoice.items.length > 2 && /* @__PURE__ */ jsxs3("p", { style: { ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }, children: [
+                "+",
+                formatNumber(invoice.items.length - 2, locale),
+                " ",
+                labels.invoices.moreItems
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              ...row,
+              justifyContent: "space-between",
+              paddingTop: VisualTokens.spacing.xl,
+              borderTop: `1px solid ${VisualTokens.color.borderSubtle}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("p", { style: { ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }, children: [
+                labels.invoices.due,
+                " ",
+                new Date(invoice.dueDate).toLocaleDateString(locale)
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { style: { ...row, gap: VisualTokens.spacing.sm }, children: [
+                invoice.invoiceUrl && /* @__PURE__ */ jsx4(
+                  PortalGhostIconButton,
+                  {
+                    label: labels.invoices.viewInvoice,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      openExternal(invoice.invoiceUrl);
+                    },
+                    children: /* @__PURE__ */ jsx4(ExternalLink, { size: 16 })
+                  }
+                ),
+                invoice.pdfUrl && /* @__PURE__ */ jsx4(
+                  PortalGhostIconButton,
+                  {
+                    label: labels.invoices.downloadPdf,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (onDownload) {
+                        onDownload(invoice);
+                      } else {
+                        openExternal(invoice.pdfUrl);
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx4(Download, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var PortalGhostIconButton = ({
+  label,
+  onClick,
+  children
+}) => /* @__PURE__ */ jsx4(
+  "button",
+  {
+    type: "button",
+    "aria-label": label,
+    onClick,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: VisualTokens.spacing.xs,
+      borderRadius: VisualTokens.radius.sm,
+      border: "1px solid transparent",
+      background: "transparent",
+      color: VisualTokens.color.textMuted,
+      cursor: "pointer"
+    },
+    children
+  }
+);
+
+// src/presentation/portal/components/PlanTab.tsx
+import { useState as useState2 } from "react";
+import { Calendar, CheckCircle2, XCircle, AlertTriangle as AlertTriangle2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PlanTab = ({
+  subscription,
+  onChangePlan,
+  onCancelSubscription,
+  locale = "en-US"
+}) => {
+  const labels = useBillingLabels();
+  const [confirmingCancel, setConfirmingCancel] = useState2(false);
+  const [cancelling, setCancelling] = useState2(false);
+  const [cancelError, setCancelError] = useState2(null);
+  const handleCancel = async () => {
+    if (!onCancelSubscription) return;
+    if (!confirmingCancel) {
+      setConfirmingCancel(true);
+      return;
+    }
+    setCancelling(true);
+    setCancelError(null);
+    try {
+      await onCancelSubscription();
+    } catch {
+      setCancelError(labels.plan.cancelFailed);
+    } finally {
+      setCancelling(false);
+      setConfirmingCancel(false);
+    }
+  };
+  const isActive = subscription.status === "active" || subscription.status === "trialing";
+  const statusTone = getStatusTone(subscription.status);
+  return /* @__PURE__ */ jsxs4("div", { style: stack, children: [
+    /* @__PURE__ */ jsxs4("section", { style: card, "aria-labelledby": "plan-current-heading", children: [
+      /* @__PURE__ */ jsx5("h3", { id: "plan-current-heading", style: sectionTitle, children: labels.plan.title }),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            gap: VisualTokens.spacing.xl,
+            flexWrap: "wrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxs4("div", { children: [
+              /* @__PURE__ */ jsx5(
+                "p",
+                {
+                  style: {
+                    fontSize: VisualTokens.fontSize.display,
+                    fontWeight: VisualTokens.fontWeight.strong,
+                    color: VisualTokens.color.textPrimary,
+                    margin: 0
+                  },
+                  children: subscription.plan.name
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "p",
+                {
+                  style: {
+                    fontSize: VisualTokens.fontSize.body,
+                    fontWeight: VisualTokens.fontWeight.medium,
+                    color: TONE_PAIRS[statusTone].fg,
+                    margin: 0,
+                    marginTop: VisualTokens.spacing.xs
+                  },
+                  children: labels.status[subscription.status]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "p",
+                {
+                  style: {
+                    fontSize: VisualTokens.fontSize.title,
+                    fontWeight: VisualTokens.fontWeight.strong,
+                    color: VisualTokens.color.textPrimary,
+                    margin: 0,
+                    marginTop: VisualTokens.spacing.lg
+                  },
+                  children: [
+                    formatPrice(
+                      getPlanPrice(subscription.plan, subscription.cycle),
+                      subscription.plan.currency
+                    ),
+                    /* @__PURE__ */ jsxs4(
+                      "span",
+                      {
+                        style: {
+                          fontSize: VisualTokens.fontSize.body,
+                          fontWeight: VisualTokens.fontWeight.regular,
+                          color: VisualTokens.color.textMuted
+                        },
+                        children: [
+                          "/",
+                          subscription.cycle
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "p",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    fontSize: VisualTokens.fontSize.caption,
+                    color: VisualTokens.color.textMuted,
+                    margin: 0,
+                    marginTop: VisualTokens.spacing.sm
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(Calendar, { size: 14, "aria-hidden": "true" }),
+                    subscription.currentPeriodStart && new Date(subscription.currentPeriodStart).toLocaleDateString(locale),
+                    " \u2192 ",
+                    subscription.currentPeriodEnd && new Date(subscription.currentPeriodEnd).toLocaleDateString(locale)
+                  ]
+                }
+              )
+            ] }),
+            isActive ? /* @__PURE__ */ jsx5(
+              CheckCircle2,
+              {
+                size: 24,
+                color: TONE_PAIRS.active.fg,
+                "aria-hidden": "true"
+              }
+            ) : /* @__PURE__ */ jsx5(XCircle, { size: 24, color: VisualTokens.color.brandDanger, "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("section", { style: card, "aria-labelledby": "plan-actions-heading", children: [
+      /* @__PURE__ */ jsx5(
+        "h4",
+        {
+          id: "plan-actions-heading",
+          style: {
+            fontSize: VisualTokens.fontSize.body,
+            fontWeight: VisualTokens.fontWeight.strong,
+            color: VisualTokens.color.textPrimary,
+            margin: 0,
+            marginBottom: VisualTokens.spacing.xl
+          },
+          children: labels.plan.actionsTitle
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexWrap: "wrap", gap: VisualTokens.spacing.lg }, children: [
+        onChangePlan && /* @__PURE__ */ jsx5(PortalButton, { onClick: onChangePlan, variant: "default", children: labels.plan.changePlan }),
+        onCancelSubscription && isActive && /* @__PURE__ */ jsx5(
+          PortalButton,
+          {
+            onClick: handleCancel,
+            variant: confirmingCancel ? "destructive" : "outline",
+            disabled: cancelling,
+            children: cancelling ? labels.plan.cancelling : confirmingCancel ? labels.plan.confirmCancel : labels.plan.cancelSubscription
+          }
+        )
+      ] }),
+      confirmingCancel && !cancelError && /* @__PURE__ */ jsxs4("div", { role: "alert", style: { ...alertDanger, marginTop: VisualTokens.spacing.xl }, children: [
+        /* @__PURE__ */ jsx5(AlertTriangle2, { size: 16, style: { marginTop: 2, flexShrink: 0 }, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx5("span", { children: labels.plan.cancelConfirmMessage })
+      ] }),
+      cancelError && /* @__PURE__ */ jsxs4("div", { role: "alert", style: { ...alertDanger, marginTop: VisualTokens.spacing.xl }, children: [
+        /* @__PURE__ */ jsx5(AlertTriangle2, { size: 16, style: { marginTop: 2, flexShrink: 0 }, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx5("span", { children: cancelError })
+      ] })
+    ] })
+  ] });
+};
+
+// src/presentation/portal/components/UsageCard.tsx
+import { AlertTriangle as AlertTriangle3, TrendingUp } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var UsageCard = ({
+  metric,
+  locale = "en-US",
+  showProgress = true,
+  showLimit = true
+}) => {
+  const labels = useBillingLabels();
+  const { percentage, isOverLimit, nearLimit, isUnlimited } = evaluateUsage(metric);
+  const tone = isOverLimit ? "danger" : nearLimit ? "warning" : "active";
+  const toneColor = TONE_PAIRS[tone].fg;
+  const barColor = isOverLimit ? VisualTokens.color.brandDanger : nearLimit ? VisualTokens.color.badgeWarningFg : VisualTokens.color.brandPrimary;
+  return /* @__PURE__ */ jsxs5("div", { style: { ...card, display: "flex", flexDirection: "column", gap: VisualTokens.spacing.lg }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { ...row, justifyContent: "space-between", gap: VisualTokens.spacing.lg }, children: [
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx6("p", { style: { ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0, marginBottom: VisualTokens.spacing.xs }, children: metric.name }),
+        /* @__PURE__ */ jsxs5(
+          "p",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.display,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0
+            },
+            children: [
+              formatNumber(metric.current, locale),
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    fontSize: VisualTokens.fontSize.body,
+                    fontWeight: VisualTokens.fontWeight.regular,
+                    color: VisualTokens.color.textMuted,
+                    marginLeft: VisualTokens.spacing.xs
+                  },
+                  children: metric.unit
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      (nearLimit || isOverLimit) && /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            width: 40,
+            height: 40,
+            borderRadius: VisualTokens.radius.md,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: toneColor,
+            background: TONE_PAIRS[tone].bg,
+            flexShrink: 0
+          },
+          "aria-hidden": "true",
+          children: isOverLimit ? /* @__PURE__ */ jsx6(AlertTriangle3, { size: 20 }) : /* @__PURE__ */ jsx6(TrendingUp, { size: 20 })
+        }
+      )
+    ] }),
+    showProgress && !isUnlimited && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: VisualTokens.spacing.sm }, children: [
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            ...row,
+            justifyContent: "space-between",
+            fontSize: VisualTokens.fontSize.caption
+          },
+          children: [
+            showLimit && /* @__PURE__ */ jsxs5("span", { style: { color: VisualTokens.color.textMuted }, children: [
+              formatNumber(metric.limit, locale),
+              " ",
+              metric.unit,
+              " ",
+              labels.usage.limit
+            ] }),
+            /* @__PURE__ */ jsxs5(
+              "span",
+              {
+                style: {
+                  fontWeight: VisualTokens.fontWeight.medium,
+                  color: isOverLimit || nearLimit ? toneColor : VisualTokens.color.textPrimary
+                },
+                children: [
+                  percentage.toFixed(0),
+                  "%"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: 8,
+            background: VisualTokens.color.surfaceSubtle,
+            borderRadius: VisualTokens.radius.pill,
+            overflow: "hidden"
+          },
+          role: "progressbar",
+          "aria-label": `${metric.name} ${labels.common.usage}`,
+          "aria-valuemin": 0,
+          "aria-valuemax": Math.max(metric.limit, metric.current),
+          "aria-valuenow": metric.current,
+          "aria-valuetext": `${formatNumber(metric.current, locale)} / ${formatNumber(metric.limit, locale)} ${metric.unit}`,
+          children: /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                height: "100%",
+                background: barColor,
+                width: `${Math.min(percentage, 100)}%`
+              }
+            }
+          )
+        }
+      ),
+      metric.resetAt && /* @__PURE__ */ jsxs5("p", { style: { ...mutedText, fontSize: VisualTokens.fontSize.caption, margin: 0 }, children: [
+        labels.usage.resets,
+        " ",
+        new Date(metric.resetAt).toLocaleDateString(locale)
+      ] })
+    ] })
+  ] });
+};
+var evaluateUsage = (metric) => {
+  if (metric.limit <= 0) {
+    return { percentage: 0, isOverLimit: false, nearLimit: false, isUnlimited: true };
+  }
+  return {
+    percentage: calculateUsagePercentage(metric),
+    isOverLimit: metric.current > metric.limit,
+    nearLimit: isNearLimit(metric),
+    isUnlimited: false
+  };
+};
+
+// src/presentation/portal/components/OverviewTab.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var OverviewTab = ({ billing, locale }) => {
+  const labels = useBillingLabels();
+  const { subscription, usage, upcomingInvoice } = billing;
+  const statusTone = getStatusTone(subscription.status);
+  return /* @__PURE__ */ jsxs6("div", { style: stack, children: [
+    /* @__PURE__ */ jsxs6("section", { style: card, "aria-labelledby": "overview-subscription-heading", children: [
+      /* @__PURE__ */ jsx7("h3", { id: "overview-subscription-heading", style: sectionTitle, children: labels.overview.currentSubscription }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: VisualTokens.spacing.lg }, children: [
+        /* @__PURE__ */ jsxs6("div", { children: [
+          /* @__PURE__ */ jsx7(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.display,
+                fontWeight: VisualTokens.fontWeight.strong,
+                color: VisualTokens.color.textPrimary,
+                margin: 0
+              },
+              children: subscription.plan.name
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: VisualTokens.fontWeight.medium,
+                color: TONE_PAIRS[statusTone].fg,
+                margin: 0
+              },
+              children: labels.status[subscription.status]
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.textMuted,
+                margin: 0,
+                marginTop: VisualTokens.spacing.xs
+              },
+              children: [
+                formatPrice(
+                  getPlanPrice(subscription.plan, subscription.cycle),
+                  subscription.plan.currency
+                ),
+                "/",
+                subscription.cycle
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: { textAlign: "right" }, children: [
+          subscription.status === "trialing" && subscription.trialEnd && /* @__PURE__ */ jsxs6(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.textMuted,
+                margin: 0
+              },
+              children: [
+                getDaysRemaining(subscription.trialEnd),
+                " ",
+                labels.overview.trialDaysLeft
+              ]
+            }
+          ),
+          upcomingInvoice && /* @__PURE__ */ jsxs6(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.textMuted,
+                margin: 0
+              },
+              children: [
+                labels.overview.nextBilling,
+                " ",
+                new Date(upcomingInvoice.date).toLocaleDateString(locale)
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    usage.length > 0 && /* @__PURE__ */ jsx7("section", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: VisualTokens.spacing.xl }, "aria-label": labels.common.usage, children: usage.map((metric) => /* @__PURE__ */ jsx7(UsageCard, { metric, locale }, metric.id)) }),
+    upcomingInvoice && /* @__PURE__ */ jsxs6("section", { style: card, "aria-labelledby": "overview-upcoming-heading", children: [
+      /* @__PURE__ */ jsx7("h3", { id: "overview-upcoming-heading", style: { ...sectionTitle, marginBottom: VisualTokens.spacing.md }, children: labels.overview.upcomingInvoice }),
+      /* @__PURE__ */ jsx7("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(
+          "p",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.display,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0
+            },
+            children: formatPrice(upcomingInvoice.amount, upcomingInvoice.currency)
+          }
+        ),
+        /* @__PURE__ */ jsxs6(
+          "p",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.body,
+              color: VisualTokens.color.textMuted,
+              margin: 0
+            },
+            children: [
+              labels.invoices.due,
+              " ",
+              new Date(upcomingInvoice.date).toLocaleDateString(locale)
+            ]
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/presentation/portal/components/BillingPortal.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TABS = [
+  { id: "overview", labelKey: "overview", icon: BarChart3 },
+  { id: "payment-methods", labelKey: "paymentMethods", icon: CreditCard2 },
+  { id: "invoices", labelKey: "invoices", icon: FileText2 },
+  { id: "plan", labelKey: "plan", icon: Settings }
+];
+var BillingPortal = ({
+  billing,
+  loading = false,
+  error,
+  showTabs = true,
+  activeTab = "overview",
+  locale = "en-US",
+  onTabChange,
+  onAddPaymentMethod,
+  onSetDefaultPaymentMethod,
+  onRemovePaymentMethod,
+  onViewInvoice,
+  onChangePlan,
+  onCancelSubscription,
+  labels
+}) => {
+  return /* @__PURE__ */ jsx8(BillingLabelsProvider, { labels, children: /* @__PURE__ */ jsx8(
+    BillingPortalBody,
+    {
+      billing,
+      loading,
+      error,
+      showTabs,
+      activeTab,
+      locale,
+      onTabChange,
+      onAddPaymentMethod,
+      onSetDefaultPaymentMethod,
+      onRemovePaymentMethod,
+      onViewInvoice,
+      onChangePlan,
+      onCancelSubscription
+    }
+  ) });
+};
+var BillingPortalBody = ({
+  billing,
+  loading = false,
+  error,
+  showTabs = true,
+  activeTab = "overview",
+  locale = "en-US",
+  onTabChange,
+  onAddPaymentMethod,
+  onSetDefaultPaymentMethod,
+  onRemovePaymentMethod,
+  onViewInvoice,
+  onChangePlan,
+  onCancelSubscription
+}) => {
+  const labels = useBillingLabels();
+  if (loading) {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: `${VisualTokens.spacing.page * 3}px 0`,
+          color: VisualTokens.color.textMuted
+        },
+        role: "status",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsx8(PortalSpinner, { size: 48 }),
+          /* @__PURE__ */ jsx8("span", { style: visuallyHidden, children: labels.common.loading })
+        ]
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: VisualTokens.spacing.xl,
+          padding: `${VisualTokens.spacing.page * 3}px 0`,
+          color: VisualTokens.color.brandDangerText
+        },
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx8(AlertCircle, { size: 24, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx8("p", { style: { margin: 0 }, children: error })
+        ]
+      }
+    );
+  }
+  if (!billing) return null;
+  const renderContent = () => {
+    switch (activeTab) {
+      case "overview":
+        return /* @__PURE__ */ jsx8(OverviewTab, { billing, locale });
+      case "payment-methods":
+        return /* @__PURE__ */ jsx8(
+          PaymentMethodsList,
+          {
+            paymentMethods: billing.paymentMethods,
+            onAddNew: onAddPaymentMethod,
+            onSetDefault: onSetDefaultPaymentMethod,
+            onRemove: onRemovePaymentMethod
+          }
+        );
+      case "invoices":
+        return /* @__PURE__ */ jsx8(InvoiceList, { invoices: billing.recentInvoices, onView: onViewInvoice, locale });
+      case "plan":
+        return /* @__PURE__ */ jsx8(
+          PlanTab,
+          {
+            subscription: billing.subscription,
+            onChangePlan,
+            onCancelSubscription,
+            locale
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { style: { width: "100%" }, children: [
+    showTabs && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: { borderBottom: `1px solid ${VisualTokens.color.borderSubtle}`, marginBottom: VisualTokens.spacing.section },
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        children: /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: VisualTokens.spacing.section }, children: TABS.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          return /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              id: `billing-tab-${tab.id}`,
+              role: "tab",
+              type: "button",
+              "aria-selected": isActive,
+              "aria-controls": "billing-tab-panel",
+              tabIndex: isActive ? 0 : -1,
+              onClick: () => onTabChange?.(tab.id),
+              onKeyDown: (e) => {
+                if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+                  e.preventDefault();
+                  const idx = TABS.findIndex((tt) => tt.id === activeTab);
+                  const nextIdx = e.key === "ArrowRight" ? (idx + 1) % TABS.length : (idx - 1 + TABS.length) % TABS.length;
+                  onTabChange?.(TABS[nextIdx].id);
+                }
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: VisualTokens.spacing.sm,
+                paddingBottom: VisualTokens.spacing.section,
+                border: "none",
+                borderBottom: `2px solid ${isActive ? VisualTokens.color.brandPrimary : "transparent"}`,
+                background: "transparent",
+                fontSize: VisualTokens.fontSize.body,
+                fontWeight: isActive ? VisualTokens.fontWeight.medium : VisualTokens.fontWeight.regular,
+                color: isActive ? VisualTokens.color.textPrimary : VisualTokens.color.textMuted,
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx8(Icon, { size: 16, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx8("span", { children: labels.tabs[tab.labelKey] })
+              ]
+            },
+            tab.id
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        id: "billing-tab-panel",
+        role: "tabpanel",
+        "aria-labelledby": `billing-tab-${activeTab}`,
+        children: renderContent()
+      }
+    )
+  ] });
+};
+var InvoiceList = ({
+  invoices,
+  onView,
+  locale
+}) => {
+  const labels = useBillingLabels();
+  if (invoices.length === 0) {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          textAlign: "center",
+          padding: `${VisualTokens.spacing.page * 1.5}px 0`,
+          color: VisualTokens.color.textMuted
+        },
+        children: [
+          /* @__PURE__ */ jsx8(FileText2, { size: 48, style: { opacity: 0.5, marginBottom: VisualTokens.spacing.xl }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx8("p", { style: { margin: 0 }, children: labels.invoices.empty })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8("div", { style: stack, children: invoices.map((invoice) => /* @__PURE__ */ jsx8(InvoiceCard, { invoice, onClick: onView, locale }, invoice.id)) });
+};
+
+// src/presentation/portal/components/BillingLayout.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var BRAND_LOGO_SIZE = 32;
+var DefaultBrandMark = ({ initial }) => /* @__PURE__ */ jsx9(
+  "span",
+  {
+    "aria-hidden": "true",
+    style: {
+      width: BRAND_LOGO_SIZE,
+      height: BRAND_LOGO_SIZE,
+      borderRadius: VisualTokens.radius.md,
+      background: VisualTokens.color.brandPrimary,
+      color: VisualTokens.color.textOnPrimary,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: VisualTokens.fontWeight.strong,
+      fontSize: VisualTokens.fontSize.body,
+      flexShrink: 0
+    },
+    children: initial
+  }
+);
+var container = {
+  maxWidth: 1152,
+  marginLeft: "auto",
+  marginRight: "auto",
+  paddingLeft: VisualTokens.spacing.section,
+  paddingRight: VisualTokens.spacing.section
+};
+var BillingLayout = ({ config, children, onBack }) => {
+  const labels = useBillingLabels();
+  const dashboardRoute = config.cancelRoute ?? "/dashboard";
+  const contactAria = formatLabel(labels.page.contactAria, { email: config.supportEmail ?? "" });
+  const backControl = () => onBack ? /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      onClick: onBack,
+      style: {
+        fontSize: VisualTokens.fontSize.body,
+        color: VisualTokens.color.textMuted,
+        background: "transparent",
+        border: "none",
+        padding: 0,
+        cursor: "pointer"
+      },
+      children: labels.page.backToDashboard
+    }
+  ) : /* @__PURE__ */ jsx9(
+    "a",
+    {
+      href: dashboardRoute,
+      style: {
+        fontSize: VisualTokens.fontSize.body,
+        color: VisualTokens.color.textMuted,
+        textDecoration: "none"
+      },
+      children: labels.page.backToDashboard
+    }
+  );
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      style: {
+        minHeight: "100vh",
+        background: VisualTokens.color.surfaceMuted,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "header",
+          {
+            style: {
+              borderBottom: `1px solid ${VisualTokens.color.borderSubtle}`,
+              padding: `${VisualTokens.spacing.xl}px ${VisualTokens.spacing.section}px`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              background: VisualTokens.color.surfacePrimary
+            },
+            children: [
+              /* @__PURE__ */ jsxs8(
+                "a",
+                {
+                  href: dashboardRoute,
+                  onClick: onBack ? (e) => {
+                    e.preventDefault();
+                    onBack();
+                  } : void 0,
+                  style: { display: "flex", alignItems: "center", gap: VisualTokens.spacing.sm, textDecoration: "none" },
+                  "aria-label": config.brandName,
+                  children: [
+                    config.logo ?? /* @__PURE__ */ jsx9(DefaultBrandMark, { initial: config.brandName.charAt(0).toUpperCase() || "?" }),
+                    /* @__PURE__ */ jsx9(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: VisualTokens.fontWeight.strong,
+                          fontSize: VisualTokens.fontSize.title,
+                          color: VisualTokens.color.textPrimary
+                        },
+                        children: config.brandName
+                      }
+                    )
+                  ]
+                }
+              ),
+              backControl()
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs8("main", { style: { flex: 1, ...container, paddingTop: 48, paddingBottom: 48, width: "100%", boxSizing: "border-box" }, children: [
+          /* @__PURE__ */ jsxs8("div", { style: { marginBottom: VisualTokens.spacing.page * 1.5 }, children: [
+            /* @__PURE__ */ jsx9(
+              "h1",
+              {
+                style: {
+                  fontSize: 32,
+                  fontWeight: VisualTokens.fontWeight.strong,
+                  color: VisualTokens.color.textPrimary,
+                  margin: 0,
+                  marginBottom: VisualTokens.spacing.sm
+                },
+                children: labels.page.title
+              }
+            ),
+            /* @__PURE__ */ jsx9("p", { style: { color: VisualTokens.color.textMuted, margin: 0 }, children: labels.page.description })
+          ] }),
+          children
+        ] }),
+        config.supportEmail && /* @__PURE__ */ jsx9(
+          "footer",
+          {
+            style: {
+              borderTop: `1px solid ${VisualTokens.color.borderSubtle}`,
+              padding: `${VisualTokens.spacing.xl}px ${VisualTokens.spacing.section}px`,
+              background: VisualTokens.color.surfacePrimary
+            },
+            children: /* @__PURE__ */ jsx9("div", { style: { ...container, textAlign: "center" }, children: /* @__PURE__ */ jsxs8(
+              "p",
+              {
+                style: {
+                  fontSize: VisualTokens.fontSize.body,
+                  color: VisualTokens.color.textMuted,
+                  margin: 0
+                },
+                children: [
+                  labels.page.needHelp,
+                  " ",
+                  /* @__PURE__ */ jsx9(
+                    "a",
+                    {
+                      href: `mailto:${config.supportEmail}`,
+                      style: { color: VisualTokens.color.brandPrimary },
+                      "aria-label": contactAria,
+                      children: config.supportEmail
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/presentation/portal/constants.ts
+var SUBSCRIPTION_STATUS = {
+  ACTIVE: "active",
+  TRIALING: "trialing",
+  PAST_DUE: "past_due",
+  CANCELED: "canceled",
+  UNPAID: "unpaid",
+  INCOMPLETE: "incomplete",
+  REVOKED: "revoked"
+};
+var INVOICE_STATUS = {
+  DRAFT: "draft",
+  OPEN: "open",
+  PAID: "paid",
+  VOID: "void",
+  UNCOLLECTIBLE: "uncollectible",
+  REFUNDED: "refunded"
+};
+var CURRENCY = {
+  USD: "USD",
+  EUR: "EUR",
+  GBP: "GBP",
+  TRY: "TRY",
+  JPY: "JPY"
+};
+var PLAN_TYPE = {
+  STANDARD: "standard",
+  PRO: "pro",
+  BUSINESS: "business",
+  ENTERPRISE: "enterprise"
+};
+var DEFAULT_BILLING_CONFIG = {
+  enableYearlyDiscount: true,
+  yearlyDiscount: 20,
+  currencies: [CURRENCY.USD, CURRENCY.EUR, CURRENCY.GBP],
+  defaultCurrency: CURRENCY.USD,
+  taxRate: 0
+};
+
+// src/presentation/portal/components/BillingPage.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var BillingPage = ({ config, labels, ...portalProps }) => {
+  const mergedConfig = {
+    ...DEFAULT_BILLING_CONFIG,
+    ...config
+  };
+  return /* @__PURE__ */ jsx10(BillingLabelsProvider, { labels, children: /* @__PURE__ */ jsx10(BillingLayout, { config: mergedConfig, children: /* @__PURE__ */ jsx10(BillingPortal, { showTabs: true, ...portalProps }) }) });
+};
+
+// src/presentation/portal/components/PlanComparison.tsx
+import { Check as Check2, X } from "lucide-react";
+import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var RADIO_GROUP_NAME = "plan-comparison";
+var PlanComparison = ({
+  plans,
+  selectedPlan,
+  cycle = "monthly",
+  showCycleToggle = true,
+  showFeatures = true,
+  onPlanSelect,
+  onCycleChange,
+  loading = false,
+  labels: labelsOverride
+}) => {
+  const labels = useBillingLabels();
+  const discount = pickLargestDiscount(plans);
+  return /* @__PURE__ */ jsx11(BillingLabelsProvider, { labels: labelsOverride, children: /* @__PURE__ */ jsxs9("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: VisualTokens.spacing.page }, children: [
+    showCycleToggle && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: { display: "flex", alignItems: "center", justifyContent: "center" },
+        role: "group",
+        children: /* @__PURE__ */ jsx11(CycleToggle, { cycle, onChange: onCycleChange, discountPercent: discount })
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+          gap: VisualTokens.spacing.section
+        },
+        role: "radiogroup",
+        "aria-label": labels.planComparison.radiogroupLabel,
+        children: plans.map((plan, index) => /* @__PURE__ */ jsx11(
+          PlanCard,
+          {
+            plan,
+            isSelected: selectedPlan === plan.id,
+            isPopular: isPopularPlan(plan, plans),
+            cycle,
+            showFeatures,
+            loading,
+            onSelect: onPlanSelect,
+            tabbable: selectedPlan === plan.id || !selectedPlan && index === 0
+          },
+          plan.id
+        ))
+      }
+    )
+  ] }) });
+};
+var pillBase = {
+  padding: `${VisualTokens.spacing.sm}px ${VisualTokens.spacing.section}px`,
+  borderRadius: VisualTokens.radius.pill,
+  fontSize: VisualTokens.fontSize.body,
+  fontWeight: VisualTokens.fontWeight.medium,
+  cursor: "pointer",
+  border: "1px solid transparent"
+};
+var CycleToggle = ({ cycle, onChange, discountPercent }) => {
+  const labels = useBillingLabels();
+  const active = {
+    background: VisualTokens.color.surfacePrimary,
+    color: VisualTokens.color.textPrimary
+  };
+  const inactive = {
+    background: "transparent",
+    color: VisualTokens.color.textMuted
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        background: VisualTokens.color.surfaceSubtle,
+        borderRadius: VisualTokens.radius.pill,
+        padding: VisualTokens.spacing.xs,
+        gap: VisualTokens.spacing.xs
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": cycle === "monthly",
+            onClick: () => onChange?.("monthly"),
+            style: { ...pillBase, ...cycle === "monthly" ? active : inactive },
+            children: labels.planComparison.monthly
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": cycle === "yearly",
+            onClick: () => onChange?.("yearly"),
+            style: { ...pillBase, ...cycle === "yearly" ? active : inactive },
+            children: [
+              labels.planComparison.yearly,
+              discountPercent > 0 && /* @__PURE__ */ jsx11(
+                "span",
+                {
+                  style: {
+                    marginLeft: VisualTokens.spacing.xs,
+                    fontSize: VisualTokens.fontSize.caption,
+                    background: VisualTokens.color.brandPrimary,
+                    color: VisualTokens.color.textOnPrimary,
+                    padding: `${2}px ${VisualTokens.spacing.md}px`,
+                    borderRadius: VisualTokens.radius.pill
+                  },
+                  children: formatLabel(labels.planComparison.save, { percent: discountPercent })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var PlanCard = ({
+  plan,
+  isSelected,
+  isPopular,
+  cycle,
+  showFeatures,
+  loading,
+  onSelect,
+  tabbable
+}) => {
+  const labels = useBillingLabels();
+  const price = getPlanPrice(plan, cycle);
+  const discount = calculateDiscount(plan.monthlyPrice, plan.yearlyPrice);
+  const cardStyle = {
+    position: "relative",
+    background: VisualTokens.color.surfacePrimary,
+    border: `2px solid ${isSelected ? VisualTokens.color.brandPrimary : isPopular ? VisualTokens.color.brandPrimary : VisualTokens.color.borderSubtle}`,
+    opacity: isPopular && !isSelected ? 0.85 : 1,
+    borderRadius: VisualTokens.radius.lg,
+    padding: VisualTokens.spacing.section,
+    cursor: loading ? "wait" : "pointer",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column"
+  };
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: tabbable ? 0 : -1,
+      onClick: () => !loading && onSelect?.(plan.id),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!loading) onSelect?.(plan.id);
+        }
+      },
+      style: cardStyle,
+      children: [
+        isPopular && /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: -12,
+              left: "50%",
+              transform: "translateX(-50%)"
+            },
+            children: /* @__PURE__ */ jsx11(
+              "span",
+              {
+                style: {
+                  background: VisualTokens.color.brandPrimary,
+                  color: VisualTokens.color.textOnPrimary,
+                  fontSize: VisualTokens.fontSize.caption,
+                  fontWeight: VisualTokens.fontWeight.strong,
+                  padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.xl}px`,
+                  borderRadius: VisualTokens.radius.pill,
+                  whiteSpace: "nowrap"
+                },
+                children: labels.planComparison.mostPopular
+              }
+            )
+          }
+        ),
+        plan.badge && /* @__PURE__ */ jsx11("div", { style: { marginBottom: VisualTokens.spacing.xl }, children: /* @__PURE__ */ jsx11(
+          "span",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.caption,
+              fontWeight: VisualTokens.fontWeight.strong,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              padding: `${VisualTokens.spacing.xs}px ${VisualTokens.spacing.lg}px`,
+              borderRadius: VisualTokens.radius.pill,
+              background: VisualTokens.color.surfaceSubtle,
+              color: VisualTokens.color.brandPrimary
+            },
+            children: plan.badge
+          }
+        ) }),
+        /* @__PURE__ */ jsx11(
+          "h3",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.title,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0,
+              marginBottom: VisualTokens.spacing.sm
+            },
+            children: plan.name
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "p",
+          {
+            style: {
+              fontSize: VisualTokens.fontSize.body,
+              color: VisualTokens.color.textMuted,
+              margin: 0,
+              marginBottom: VisualTokens.spacing.section
+            },
+            children: plan.description
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { style: { marginBottom: VisualTokens.spacing.section }, children: [
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "baseline", gap: VisualTokens.spacing.xs }, children: [
+            /* @__PURE__ */ jsx11(
+              "span",
+              {
+                style: {
+                  fontSize: 32,
+                  fontWeight: 800,
+                  color: VisualTokens.color.textPrimary
+                },
+                children: formatPrice(price, plan.currency)
+              }
+            ),
+            /* @__PURE__ */ jsxs9("span", { style: { color: VisualTokens.color.textMuted, fontSize: VisualTokens.fontSize.body }, children: [
+              "/",
+              cycle === "monthly" ? labels.planComparison.monthlyShort : labels.planComparison.yearlyShort
+            ] })
+          ] }),
+          cycle === "yearly" && discount > 0 && /* @__PURE__ */ jsx11(
+            "p",
+            {
+              style: {
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.badgeActiveFg,
+                margin: 0,
+                marginTop: VisualTokens.spacing.xs
+              },
+              children: formatLabel(labels.planComparison.saveWithYearly, { percent: discount })
+            }
+          )
+        ] }),
+        showFeatures && plan.features.length > 0 && /* @__PURE__ */ jsx11(
+          "ul",
+          {
+            style: {
+              listStyle: "none",
+              margin: 0,
+              padding: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: VisualTokens.spacing.lg,
+              marginBottom: VisualTokens.spacing.section,
+              flex: 1
+            },
+            children: plan.features.map((feature, index) => {
+              const { text, bold, included } = formatFeature(feature);
+              const isExcluded = included === false;
+              return /* @__PURE__ */ jsxs9(
+                "li",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: VisualTokens.spacing.lg,
+                    fontSize: VisualTokens.fontSize.body,
+                    opacity: isExcluded ? VisualTokens.opacity.disabled : 1,
+                    textDecoration: isExcluded ? "line-through" : "none"
+                  },
+                  children: [
+                    isExcluded ? /* @__PURE__ */ jsx11(
+                      X,
+                      {
+                        size: 20,
+                        style: { flexShrink: 0, marginTop: 2 },
+                        color: VisualTokens.color.textMuted,
+                        "aria-hidden": "true"
+                      }
+                    ) : /* @__PURE__ */ jsx11(
+                      Check2,
+                      {
+                        size: 20,
+                        style: { flexShrink: 0, marginTop: 2 },
+                        color: VisualTokens.color.brandPrimary,
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: bold ? VisualTokens.fontWeight.strong : VisualTokens.fontWeight.regular,
+                          color: VisualTokens.color.textPrimary
+                        },
+                        children: text
+                      }
+                    )
+                  ]
+                },
+                `${plan.id}-feature-${index}`
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          PortalButton,
+          {
+            type: "button",
+            pill: true,
+            fullWidth: true,
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelect?.(plan.id);
+            },
+            disabled: loading,
+            "aria-label": isSelected ? labels.planComparison.currentPlan : `${labels.planComparison.selectPlan} \u2014 ${plan.name}`,
+            variant: isSelected ? "default" : "ghost",
+            style: isSelected ? void 0 : {
+              background: VisualTokens.color.surfaceSubtle,
+              color: VisualTokens.color.textPrimary,
+              padding: `${VisualTokens.spacing.lg}px 0`
+            },
+            children: loading ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+              /* @__PURE__ */ jsx11(PortalSpinner, { size: 16 }),
+              labels.planComparison.processing
+            ] }) : isSelected ? labels.planComparison.currentPlan : labels.planComparison.selectPlan
+          }
+        )
+      ]
+    }
+  );
+};
+var pickLargestDiscount = (plans) => {
+  if (plans.length === 0) return 0;
+  return plans.reduce((max, plan) => {
+    const d = calculateDiscount(plan.monthlyPrice, plan.yearlyPrice);
+    return d > max ? d : max;
+  }, 0);
+};
+
+// src/presentation/portal/hooks/useBilling.ts
+import { useState as useState3, useCallback, useMemo as useMemo2 } from "react";
+var toErrorMessage = (err, fallback) => {
+  if (err instanceof Error && err.message) return err.message;
+  return fallback;
+};
+var executeBillingAction = async (setIsLoading, setError, fallbackMessage, action) => {
+  setIsLoading(true);
+  setError(null);
+  try {
+    return await action();
+  } catch (err) {
+    setError(toErrorMessage(err, fallbackMessage));
+    return null;
+  } finally {
+    setIsLoading(false);
+  }
+};
+function useBilling(options) {
+  const { initialData, apiClient } = options;
+  const [billing, setBilling] = useState3(initialData ?? null);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const loadBilling = useCallback(async () => {
+    const result = await executeBillingAction(
+      setIsLoading,
+      setError,
+      "Failed to load billing",
+      () => apiClient.loadBilling()
+    );
+    if (result) setBilling(result);
+  }, [apiClient]);
+  const updatePlan = useCallback(
+    async (planId) => {
+      await executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to update plan",
+        () => apiClient.updatePlan(planId).then(() => {
+          setBilling(
+            (prev) => prev ? { ...prev, subscription: { ...prev.subscription, planId } } : prev
+          );
+        })
+      );
+    },
+    [apiClient]
+  );
+  const cancelSubscription = useCallback(async () => {
+    await executeBillingAction(
+      setIsLoading,
+      setError,
+      "Failed to cancel subscription",
+      () => apiClient.cancelSubscription().then(() => {
+        setBilling(
+          (prev) => prev ? {
+            ...prev,
+            subscription: {
+              ...prev.subscription,
+              status: "canceled",
+              cancelAtPeriodEnd: true
+            }
+          } : prev
+        );
+      })
+    );
+  }, [apiClient]);
+  const updateCycle = useCallback(
+    async (cycle) => {
+      await executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to update cycle",
+        () => apiClient.updateCycle(cycle).then(() => {
+          setBilling(
+            (prev) => prev ? { ...prev, subscription: { ...prev.subscription, cycle } } : prev
+          );
+        })
+      );
+    },
+    [apiClient]
+  );
+  const addPaymentMethod = useCallback(
+    async (input) => {
+      return executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to add payment method",
+        () => apiClient.addPaymentMethod(input).then((method) => {
+          setBilling(
+            (prev) => prev ? { ...prev, paymentMethods: [...prev.paymentMethods, method] } : prev
+          );
+          return method;
+        })
+      );
+    },
+    [apiClient]
+  );
+  const removePaymentMethod = useCallback(
+    async (methodId) => {
+      await executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to remove payment method",
+        () => apiClient.removePaymentMethod(methodId).then(() => {
+          setBilling(
+            (prev) => prev ? {
+              ...prev,
+              paymentMethods: prev.paymentMethods.filter((pm) => pm.id !== methodId)
+            } : prev
+          );
+        })
+      );
+    },
+    [apiClient]
+  );
+  const setDefaultPaymentMethod = useCallback(
+    async (methodId) => {
+      await executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to set default payment method",
+        () => apiClient.setDefaultPaymentMethod(methodId).then(() => {
+          setBilling((prev) => {
+            if (!prev) return prev;
+            const methods = prev.paymentMethods.map((pm) => ({
+              ...pm,
+              isDefault: pm.id === methodId
+            }));
+            const defaultPaymentMethod = methods.find((pm) => pm.id === methodId);
+            return { ...prev, paymentMethods: methods, defaultPaymentMethod };
+          });
+        })
+      );
+    },
+    [apiClient]
+  );
+  const getInvoiceUrl = useCallback(
+    async (invoiceId) => {
+      const result = await executeBillingAction(
+        setIsLoading,
+        setError,
+        "Failed to get invoice URL",
+        () => apiClient.getInvoiceUrl(invoiceId)
+      );
+      return result;
+    },
+    [apiClient]
+  );
+  return useMemo2(
+    () => ({
+      billing,
+      isLoading,
+      error,
+      loadBilling,
+      updatePlan,
+      cancelSubscription,
+      updateCycle,
+      addPaymentMethod,
+      removePaymentMethod,
+      setDefaultPaymentMethod,
+      getInvoiceUrl
+    }),
+    [
+      billing,
+      isLoading,
+      error,
+      loadBilling,
+      updatePlan,
+      cancelSubscription,
+      updateCycle,
+      addPaymentMethod,
+      removePaymentMethod,
+      setDefaultPaymentMethod,
+      getInvoiceUrl
+    ]
+  );
+}
+var createStubBillingApiClient = (overrides) => {
+  const notConfigured = {
+    loadBilling: () => Promise.reject(new Error("BillingApiClient not configured")),
+    updatePlan: () => Promise.reject(new Error("BillingApiClient not configured")),
+    cancelSubscription: () => Promise.reject(new Error("BillingApiClient not configured")),
+    updateCycle: () => Promise.reject(new Error("BillingApiClient not configured")),
+    addPaymentMethod: () => Promise.reject(new Error("BillingApiClient not configured")),
+    removePaymentMethod: () => Promise.reject(new Error("BillingApiClient not configured")),
+    setDefaultPaymentMethod: () => Promise.reject(new Error("BillingApiClient not configured")),
+    getInvoiceUrl: () => Promise.reject(new Error("BillingApiClient not configured"))
+  };
+  return { ...notConfigured, ...overrides };
+};
+
+// src/presentation/portal/utils/plans.ts
+var MONTHS_IN_YEAR = 12;
+var KNOWN_CURRENCIES = new Set(Object.values(CURRENCY));
+var productFeatures = (product) => product.benefits.map((benefit) => benefit.description ?? "").filter((description) => description.length > 0);
+var toCurrency = (raw) => {
+  const upper = raw.toUpperCase();
+  if (KNOWN_CURRENCIES.has(upper)) return upper;
+  throw new Error(`Unsupported currency: ${raw}`);
+};
+var toMonthlyAmount = (amount, interval) => {
+  if (interval === "monthly") return amount;
+  if (interval === "yearly") return amount / MONTHS_IN_YEAR;
+  throw new Error(
+    `Cannot convert price to monthly: unsupported interval "${interval ?? "undefined"}"`
+  );
+};
+function transformProductToPlan(product, price) {
+  const interval = price.recurringInterval;
+  const monthlyAmount = toMonthlyAmount(price.amount ?? 0, interval);
+  const yearlyAmount = interval === "yearly" ? price.amount ?? 0 : (price.amount ?? 0) * MONTHS_IN_YEAR;
+  return {
+    id: product.id,
+    name: product.name,
+    description: product.description ?? "",
+    monthlyPrice: Math.round(monthlyAmount),
+    yearlyPrice: Math.round(yearlyAmount),
+    currency: toCurrency(price.currency),
+    features: productFeatures(product)
+  };
+}
+function transformProducts(products) {
+  const tiers = [];
+  for (const product of products) {
+    if (product.isArchived) continue;
+    const recurring = product.prices.filter(
+      (price) => !price.isArchived && price.recurringInterval !== void 0
+    );
+    const monthly = recurring.find((price) => price.recurringInterval === "monthly");
+    const yearly = recurring.find((price) => price.recurringInterval === "yearly");
+    if (monthly && yearly) {
+      tiers.push({
+        id: product.id,
+        name: product.name,
+        description: product.description ?? "",
+        monthlyPrice: Math.round(monthly.amount ?? 0),
+        yearlyPrice: Math.round(yearly.amount ?? 0),
+        currency: toCurrency(monthly.currency),
+        features: productFeatures(product)
+      });
+    } else if (monthly) {
+      tiers.push(transformProductToPlan(product, monthly));
+    } else if (yearly) {
+      tiers.push(transformProductToPlan(product, yearly));
+    }
+  }
+  return tiers;
+}
+
+// src/presentation/portal/create-portal-client.ts
+function portalStatus(core) {
+  switch (core) {
+    case "active":
+      return SUBSCRIPTION_STATUS.ACTIVE;
+    case "trialing":
+      return SUBSCRIPTION_STATUS.TRIALING;
+    case "past_due":
+      return SUBSCRIPTION_STATUS.PAST_DUE;
+    case "unpaid":
+      return SUBSCRIPTION_STATUS.UNPAID;
+    case "incomplete":
+    case "incomplete_expired":
+      return SUBSCRIPTION_STATUS.INCOMPLETE;
+    case "revoked":
+      return SUBSCRIPTION_STATUS.REVOKED;
+    default:
+      return SUBSCRIPTION_STATUS.CANCELED;
+  }
+}
+function freeTier(planKey) {
+  return {
+    id: planKey,
+    name: planKey === "free" ? "Free" : planKey,
+    description: "",
+    monthlyPrice: 0,
+    yearlyPrice: 0,
+    currency: CURRENCY.USD,
+    features: []
+  };
+}
+function orderToInvoice(order) {
+  const paid = order.paid || order.status === "paid";
+  const date = order.createdAt.length >= 10 ? order.createdAt.slice(0, 10) : order.createdAt;
+  return {
+    id: order.id,
+    number: order.id.slice(-8).toUpperCase(),
+    amount: order.amount,
+    currency: order.currency.toUpperCase(),
+    status: paid ? INVOICE_STATUS.PAID : INVOICE_STATUS.OPEN,
+    date,
+    dueDate: date,
+    ...paid ? { paidAt: date } : {},
+    ...order.invoiceUrl ? { invoiceUrl: order.invoiceUrl } : {},
+    items: [
+      {
+        description: order.productName ?? order.itemType ?? "Subscription",
+        quantity: 1,
+        unitPrice: order.amount,
+        amount: order.amount
+      }
+    ]
+  };
+}
+var HOSTED_PORTAL_METHOD = {
+  id: "hosted-portal",
+  type: "card",
+  isDefault: true,
+  createdAt: (/* @__PURE__ */ new Date(0)).toISOString(),
+  card: { last4: "\u2022\u2022\u2022\u2022", brand: "Managed in the billing portal", expiryMonth: 0, expiryYear: 0 }
+};
+function createPortalClient(options) {
+  const { adapter, products, userId, successUrl } = options;
+  const defaultCycle = options.defaultCycle ?? "monthly";
+  const navigation = options.navigation ?? new WindowNavigationStrategy();
+  const tiers = transformProducts(products);
+  const productByPlanKey = /* @__PURE__ */ new Map();
+  for (const product of products) {
+    const key = product.metadata?.planId;
+    if (typeof key === "string" && key.length > 0) productByPlanKey.set(key, product);
+  }
+  async function checkout(productId, cycle) {
+    const { url } = await adapter.createCheckout({
+      productId,
+      billingCycle: cycle ?? defaultCycle,
+      ...successUrl ? { successUrl } : {},
+      ...userId ? { userId } : {}
+    });
+    navigation.redirect(url);
+  }
+  async function openPortal() {
+    const url = await adapter.getPortalUrl(userId ?? "");
+    navigation.redirect(url);
+    return url;
+  }
+  return {
+    async loadBilling() {
+      const [status, history] = await Promise.all([
+        adapter.getStatus(userId ?? ""),
+        adapter.getBillingHistory(userId ?? "")
+      ]);
+      const tierById = tiers.find((tier2) => tier2.id === status.plan);
+      const product = productByPlanKey.get(status.plan);
+      const tier = tierById ?? (product ? tiers.find((t) => t.id === product.id) : void 0) ?? freeTier(status.plan);
+      const subscription = {
+        id: status.subscriptionId ?? "none",
+        planId: status.plan,
+        plan: tier,
+        status: portalStatus(status.subscriptionStatus),
+        cycle: status.billingCycle ?? defaultCycle,
+        currentPeriodStart: "",
+        currentPeriodEnd: status.currentPeriodEnd ?? "",
+        ...status.cancelAtPeriodEnd !== void 0 ? { cancelAtPeriodEnd: status.cancelAtPeriodEnd } : {}
+      };
+      const price = subscription.cycle === "yearly" ? tier.yearlyPrice : tier.monthlyPrice;
+      return {
+        subscription,
+        paymentMethods: [],
+        usage: [],
+        recentInvoices: history.map(orderToInvoice),
+        ...subscription.status === SUBSCRIPTION_STATUS.ACTIVE && subscription.currentPeriodEnd ? {
+          upcomingInvoice: {
+            amount: price,
+            currency: tier.currency,
+            date: subscription.currentPeriodEnd
+          }
+        } : {}
+      };
+    },
+    updatePlan: (productId) => checkout(productId),
+    selectPlan: (productId, cycle) => checkout(productId, cycle),
+    updateCycle: async (cycle) => {
+      const status = await adapter.getStatus(userId ?? "");
+      const product = productByPlanKey.get(status.plan) ?? tiers.find((t) => t.id === status.plan);
+      if (!product) throw new Error("Cannot switch cycle without a purchasable plan catalog");
+      await checkout(product.id, cycle);
+    },
+    cancelSubscription: async () => {
+      await adapter.cancelSubscription();
+    },
+    addPaymentMethod: async () => {
+      await openPortal();
+      return HOSTED_PORTAL_METHOD;
+    },
+    removePaymentMethod: () => openPortal().then(() => void 0),
+    setDefaultPaymentMethod: () => openPortal().then(() => void 0),
+    getInvoiceUrl: async (invoiceId) => {
+      const history = await adapter.getBillingHistory(userId ?? "");
+      const order = history.find((item) => item.id === invoiceId);
+      return order?.invoiceUrl ?? await openPortal();
+    },
+    openPortal
+  };
+}
+
+// src/presentation/portal/TurnkeyBillingPage.tsx
+import { useEffect, useMemo as useMemo3, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function browserNavigation() {
+  if (typeof window === "undefined") return new NoopNavigationStrategy();
+  return {
+    redirect(url) {
+      window.location.href = url;
+    }
+  };
+}
+function TurnkeyBillingPage({
+  adapter,
+  products,
+  config,
+  userId,
+  defaultCycle,
+  successUrl,
+  navigation,
+  locale,
+  labels,
+  onError
+}) {
+  const [cycle, setCycle] = useState4(defaultCycle ?? "monthly");
+  const [selecting, setSelecting] = useState4(false);
+  const client = useMemo3(
+    () => createPortalClient({
+      adapter,
+      products,
+      ...userId !== void 0 ? { userId } : {},
+      ...defaultCycle !== void 0 ? { defaultCycle } : {},
+      ...successUrl !== void 0 ? { successUrl } : {},
+      navigation: navigation ?? browserNavigation()
+    }),
+    [adapter, products, userId, defaultCycle, successUrl, navigation]
+  );
+  const { billing, isLoading, error, loadBilling, cancelSubscription } = useBilling({ apiClient: client });
+  useEffect(() => {
+    void loadBilling();
+  }, [loadBilling]);
+  const plans = config.plans ?? transformProducts(products);
+  const selectPlan = async (productId) => {
+    setSelecting(true);
+    try {
+      await client.selectPlan(productId, cycle);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setSelecting(false);
+    }
+  };
+  const openPortalSafely = async () => {
+    try {
+      await client.openPortal();
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  const viewInvoice = async (invoiceId) => {
+    try {
+      await client.getInvoiceUrl(invoiceId);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  const mergedConfig = { ...config, plans };
+  return /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%" }, children: [
+    /* @__PURE__ */ jsx12(
+      PlanComparison,
+      {
+        plans,
+        selectedPlan: billing?.subscription.plan.id,
+        cycle,
+        onPlanSelect: (productId) => void selectPlan(productId),
+        onCycleChange: setCycle,
+        loading: selecting,
+        labels
+      }
+    ),
+    billing ? /* @__PURE__ */ jsx12(
+      BillingPage,
+      {
+        config: mergedConfig,
+        billing,
+        loading: isLoading,
+        error: error ?? void 0,
+        locale,
+        labels,
+        onAddPaymentMethod: () => void openPortalSafely(),
+        onSetDefaultPaymentMethod: () => void openPortalSafely(),
+        onRemovePaymentMethod: () => void openPortalSafely(),
+        onViewInvoice: (invoice) => void viewInvoice(invoice.id),
+        onCancelSubscription: () => cancelSubscription().then(() => loadBilling())
+      }
+    ) : /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 32 }, children: isLoading ? /* @__PURE__ */ jsx12(PortalSpinner, {}) : error ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      /* @__PURE__ */ jsx12("span", { children: error }),
+      /* @__PURE__ */ jsx12(PortalButton, { onClick: () => void loadBilling(), children: "Retry" })
+    ] }) : /* @__PURE__ */ jsx12(PortalSpinner, {}) })
+  ] });
+}
+export {
+  BILLING_CYCLE,
+  BillingLabelsProvider,
+  BillingLayout,
+  BillingPage,
+  BillingPortal,
+  CURRENCY,
+  DEFAULT_BILLING_CONFIG,
+  DEFAULT_BILLING_LABELS,
+  INVOICE_STATUS,
+  InvoiceCard,
+  PLAN_TYPE,
+  PaymentMethodsList,
+  PlanComparison,
+  PortalButton,
+  PortalSpinner,
+  RADIO_GROUP_NAME,
+  SUBSCRIPTION_STATUS,
+  TurnkeyBillingPage,
+  UsageCard,
+  calculateDiscount,
+  calculateInvoiceTotal,
+  calculateProratedAmount,
+  calculateUsagePercentage,
+  createPortalClient,
+  createStubBillingApiClient,
+  formatCardNumber,
+  formatExpiry,
+  formatFeature,
+  formatLabel,
+  formatNumber,
+  formatPrice,
+  getDaysRemaining,
+  getInvoiceStatusLabel,
+  getInvoiceStatusTone,
+  getNextBillingDate,
+  getPlanPrice,
+  getStatusLabel,
+  getStatusTone,
+  getTrialDaysText,
+  groupInvoicesByStatus,
+  isNearLimit,
+  isPopularPlan,
+  isTrialExpiringSoon,
+  mergeLabels,
+  sortInvoicesByDate,
+  transformProductToPlan,
+  transformProducts,
+  useBilling,
+  useBillingLabels
+};