@nozle-js/react 0.11.0 → 0.12.0

package/dist/index.cjs

@@ -411,7 +411,11 @@ function catalogQuery(client) {
       const response = await client.catalogFetch("/api/v1/plans", { signal });
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const data = await response.json();
-      return { plans: data.plans ?? [], nozleBranding: data.meta?.nozle_branding === true };
+      return {
+        plans: data.plans ?? [],
+        families: Array.isArray(data.families) ? data.families : null,
+        nozleBranding: data.meta?.nozle_branding === true
+      };
     },
     staleTime: 5 * 6e4,
     // The pricing page shows a load error at once; the app can call refetch().
@@ -423,6 +427,7 @@ function usePlans() {
   const query = reactQuery.useQuery(catalogQuery(client), queryClient);
   return {
     plans: query.data?.plans ?? [],
+    families: query.data?.families ?? null,
     isLoading: query.isPending,
     error: query.error ?? null,
     refetch: query.refetch
@@ -1964,7 +1969,7 @@ function UpgradeModal(props) {
 }
 
 // src/components/billing/amounts.ts
-function formatMinorAmount(value, currency, locale = "en-US") {
+function formatMinorAmount(value, currency, locale = "en-US", options = {}) {
   const raw = String(value);
   if (!/^-?\d+$/.test(raw) || typeof value === "number" && !Number.isSafeInteger(value)) {
     return "Amount unavailable";
@@ -1980,12 +1985,16 @@ function formatMinorAmount(value, currency, locale = "en-US") {
     const scale = 10n ** BigInt(digits);
     const whole = absolute / scale;
     const signed = minor < 0n ? whole === 0n ? -0 : -whole : whole;
-    const decimal = String(absolute % scale).padStart(digits, "0");
+    const remainder = absolute % scale;
+    const trim = options.trimZeroFraction === true && remainder === 0n;
+    const decimal = String(remainder).padStart(digits, "0");
     const digitFormatter = new Intl.NumberFormat(locale, {
       useGrouping: false
     });
     const fraction = [...decimal].map((digit) => digitFormatter.format(Number(digit))).join("");
-    return formatter.formatToParts(signed).map((part) => part.type === "fraction" ? fraction : part.value).join("");
+    return formatter.formatToParts(signed).filter(
+      (part) => !trim || part.type !== "fraction" && part.type !== "decimal"
+    ).map((part) => part.type === "fraction" ? fraction : part.value).join("");
   } catch {
     return "Amount unavailable";
   }
@@ -3701,6 +3710,360 @@ function useCheckout2() {
   );
   return { fetchClientSecret, checkout, isLoading, error };
 }
+
+// src/components/pricing/catalog.ts
+var PRICING_INTERVALS = [
+  "weekly",
+  "monthly",
+  "quarterly",
+  "semiannual",
+  "yearly"
+];
+var INTERVAL_LABELS2 = {
+  weekly: "Weekly",
+  monthly: "Monthly",
+  quarterly: "Quarterly",
+  semiannual: "Every 6 months",
+  yearly: "Annual"
+};
+var BILLED_WORDS = {
+  weekly: "weekly",
+  monthly: "monthly",
+  quarterly: "quarterly",
+  semiannual: "every 6 months",
+  yearly: "yearly"
+};
+var PERIODS_PER_YEAR = {
+  weekly: 52n,
+  monthly: 12n,
+  quarterly: 4n,
+  semiannual: 2n,
+  yearly: 1n
+};
+function isPricingInterval(value) {
+  return typeof value === "string" && PRICING_INTERVALS.includes(value);
+}
+function intervalRank(interval) {
+  return PRICING_INTERVALS.indexOf(interval);
+}
+function normalizePricingInterval(value) {
+  if (value === "annual") return "yearly";
+  return isPricingInterval(value) ? value : null;
+}
+function hasPosition(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function comparePositions(a, b) {
+  const aSet = hasPosition(a);
+  const bSet = hasPosition(b);
+  if (aSet && bSet) return a - b;
+  if (aSet) return -1;
+  if (bSet) return 1;
+  return 0;
+}
+var DEFAULT_LOCALE = "en-US";
+function resolvePricingLocale(locale) {
+  if (typeof locale !== "string" || locale.trim() === "") return DEFAULT_LOCALE;
+  try {
+    Intl.getCanonicalLocales(locale);
+    return locale;
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+}
+function isLive(plan) {
+  return plan.pending_deletion !== true;
+}
+function hasFamilies(catalog) {
+  return Array.isArray(catalog.families);
+}
+function getPricingGroups(catalog) {
+  const plans = catalog.plans ?? [];
+  if (!hasFamilies(catalog)) {
+    return plans.filter(isLive).map((plan) => ({ key: plan.code, family: null, plans: [plan] }));
+  }
+  const byCode = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    if (isLive(plan) && !byCode.has(plan.code)) byCode.set(plan.code, plan);
+  }
+  return catalog.families.map((family, index) => ({ family, index })).filter(({ family }) => family.show_on_pricing !== false).sort(
+    (a, b) => comparePositions(a.family.pricing_position, b.family.pricing_position) || a.index - b.index
+  ).map(({ family }) => {
+    const seen = /* @__PURE__ */ new Set();
+    const familyPlans = [];
+    for (const code of family.plan_codes ?? []) {
+      const plan = byCode.get(code);
+      if (plan && !seen.has(code)) {
+        seen.add(code);
+        familyPlans.push(plan);
+      }
+    }
+    return { key: family.code, family, plans: familyPlans };
+  }).filter((group) => group.plans.length > 0);
+}
+function toMinor(value) {
+  const raw = String(value);
+  if (!/^-?\d+$/.test(raw)) return null;
+  if (typeof value === "number" && !Number.isSafeInteger(value)) return null;
+  return BigInt(raw);
+}
+function divideRounded(numerator, denominator) {
+  if (numerator < 0n) return -divideRounded(-numerator, denominator);
+  return (2n * numerator + denominator) / (2n * denominator);
+}
+function perMonthMinor(amount, interval) {
+  return divideRounded(amount * PERIODS_PER_YEAR[interval], 12n);
+}
+function fmt(amount, currency, locale) {
+  return formatMinorAmount(String(amount), currency, locale, {
+    trimZeroFraction: true
+  });
+}
+function savingsAgainstMonthly(plan, monthly) {
+  if (!monthly || monthly === plan) return null;
+  if (!isPricingInterval(plan.interval) || plan.interval === "monthly") return null;
+  if (monthly.amount_currency !== plan.amount_currency) return null;
+  const monthlyAmount = toMinor(monthly.amount_cents);
+  const amount = toMinor(plan.amount_cents);
+  if (monthlyAmount === null || amount === null) return null;
+  const base = monthlyAmount * 12n;
+  const cost = amount * PERIODS_PER_YEAR[plan.interval];
+  if (base <= 0n || cost >= base) return null;
+  const percent = Number(divideRounded(100n * (base - cost), base));
+  return percent > 0 ? percent : null;
+}
+function monthlyPlanOf(group) {
+  return group.family ? group.plans.find((plan) => plan.interval === "monthly") : void 0;
+}
+function getAvailableIntervals(catalog) {
+  const present = /* @__PURE__ */ new Set();
+  for (const group of getPricingGroups(catalog)) {
+    for (const plan of group.plans) present.add(plan.interval);
+  }
+  return PRICING_INTERVALS.filter((interval) => present.has(interval));
+}
+function getPricingIntervalOptions(catalog) {
+  const groups = getPricingGroups(catalog);
+  return getAvailableIntervals(catalog).map((interval) => {
+    let best = null;
+    if (interval !== "monthly") {
+      for (const group of groups) {
+        const plan = group.plans.find((p) => p.interval === interval);
+        const saving = plan ? savingsAgainstMonthly(plan, monthlyPlanOf(group)) : null;
+        if (saving !== null && (best === null || saving > best)) best = saving;
+      }
+    }
+    return { interval, label: INTERVAL_LABELS2[interval], savingsPercent: best };
+  });
+}
+function getDefaultInterval(catalog, preferred) {
+  const available = getAvailableIntervals(catalog);
+  const wanted = normalizePricingInterval(preferred);
+  if (wanted && available.includes(wanted)) return wanted;
+  if (available.includes("monthly")) return "monthly";
+  return available[0] ?? null;
+}
+function pickPlan(plans, interval) {
+  if (interval === null) return plans[0];
+  const exact = plans.find((plan) => plan.interval === interval);
+  if (exact) return exact;
+  const target = intervalRank(interval);
+  let best = plans[0];
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (const plan of plans) {
+    const rank = intervalRank(plan.interval);
+    if (rank < 0) continue;
+    const score = Math.abs(rank - target) * 2 + (rank > target ? 1 : 0);
+    if (score < bestScore) {
+      best = plan;
+      bestScore = score;
+    }
+  }
+  return best;
+}
+function isTrueBoolean(privilege) {
+  const { value } = privilege;
+  if (value === true) return true;
+  return privilege.value_type === "boolean" && typeof value === "string" && value.toLowerCase() === "true";
+}
+function formatPrivilegeValue(privilege, numberFormat) {
+  const { value } = privilege;
+  if (value === null || value === void 0) return null;
+  if (isTrueBoolean(privilege)) return null;
+  if (value === false) return "No";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? numberFormat.format(value) : null;
+  }
+  const text2 = String(value).trim();
+  if (text2 === "") return null;
+  if (privilege.value_type === "boolean" && text2.toLowerCase() === "false") {
+    return "No";
+  }
+  if (privilege.value_type === "integer" && /^-?\d+$/.test(text2)) {
+    const parsed = Number(text2);
+    if (Number.isSafeInteger(parsed)) return numberFormat.format(parsed);
+  }
+  return text2;
+}
+function featureLabel(name, entitlement, numberFormat) {
+  const values = (entitlement?.privileges ?? []).map((privilege) => ({
+    privilege,
+    text: formatPrivilegeValue(privilege, numberFormat)
+  })).filter(
+    (entry) => entry.text !== null
+  );
+  if (values.length === 1) return `${name}: ${values[0].text}`;
+  if (values.length > 1) {
+    const parts = values.map(({ privilege, text: text2 }) => {
+      const privilegeName = privilege.name?.trim() || privilege.code;
+      return `${privilegeName}: ${text2}`;
+    });
+    return `${name} (${parts.join(", ")})`;
+  }
+  const limit = entitlement?.usage_limit;
+  if (typeof limit === "number" && Number.isFinite(limit)) {
+    return `${name}: ${numberFormat.format(limit)}`;
+  }
+  return name;
+}
+function trimmed(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+function familyFeatures(family, plan, locale) {
+  const numberFormat = new Intl.NumberFormat(locale);
+  const entitlements = /* @__PURE__ */ new Map();
+  for (const entitlement of plan.entitlements ?? []) {
+    if (!entitlements.has(entitlement.code)) {
+      entitlements.set(entitlement.code, entitlement);
+    }
+  }
+  return (family.features ?? []).filter((feature) => feature.show_on_pricing !== false).map((feature, index) => {
+    const entitlement = entitlements.get(feature.code);
+    const name = trimmed(feature.name) || trimmed(entitlement?.name) || feature.code;
+    return { feature, entitlement, index, name };
+  }).sort(
+    (a, b) => comparePositions(a.feature.display_position, b.feature.display_position) || a.name.localeCompare(b.name, locale) || a.index - b.index
+  ).map(({ feature, entitlement, name }) => {
+    const label = featureLabel(name, entitlement, numberFormat);
+    const description = trimmed(feature.description);
+    return feature.show_description === true && description ? { label, description } : { label };
+  });
+}
+function planCardFeatures(plan) {
+  return planFeatures(plan).map((label) => ({ label }));
+}
+function normalizeFeatures(items) {
+  return items.map((item) => typeof item === "string" ? { label: item } : item).filter(
+    (item) => Boolean(item) && typeof item.label === "string"
+  );
+}
+function overrideFeatures(overrides, group, plan, cardIndex) {
+  if (!overrides) return null;
+  if (Array.isArray(overrides)) {
+    const entry = overrides[cardIndex];
+    return entry ? normalizeFeatures(entry) : null;
+  }
+  const keys = [group.key, plan.code, ...group.plans.map((p) => p.code)];
+  for (const key of keys) {
+    if (Object.prototype.hasOwnProperty.call(overrides, key)) {
+      return normalizeFeatures(overrides[key] ?? []);
+    }
+  }
+  return null;
+}
+function yearlyMinor(plan) {
+  const amount = toMinor(plan.amount_cents);
+  if (amount === null || !isPricingInterval(plan.interval)) return null;
+  return amount * PERIODS_PER_YEAR[plan.interval];
+}
+function planPriceStrings(plan, locale) {
+  const amount = toMinor(plan.amount_cents);
+  return {
+    price: fmt(amount ?? plan.amount_cents, plan.amount_currency, locale),
+    pricePeriod: plan.interval ? `/${intervalLabel(plan.interval)}` : "",
+    billing: "",
+    savingsPercent: null
+  };
+}
+function priceStrings(plan, monthly, locale) {
+  const amount = toMinor(plan.amount_cents);
+  const currency = plan.amount_currency;
+  if (!isPricingInterval(plan.interval) || amount === null) {
+    return {
+      price: fmt(amount ?? plan.amount_cents, currency, locale),
+      pricePeriod: "",
+      billing: plan.interval ? `Billed ${plan.interval}` : "",
+      savingsPercent: null
+    };
+  }
+  const price = fmt(perMonthMinor(amount, plan.interval), currency, locale);
+  if (plan.interval === "monthly") {
+    return { price, pricePeriod: "/mo", billing: "Billed monthly", savingsPercent: null };
+  }
+  const savingsPercent = savingsAgainstMonthly(plan, monthly);
+  const billed = `Billed ${fmt(amount, currency, locale)} ${BILLED_WORDS[plan.interval]}`;
+  return {
+    price,
+    pricePeriod: "/mo",
+    billing: savingsPercent === null ? billed : `${billed} \xB7 save ${savingsPercent}%`,
+    savingsPercent
+  };
+}
+function getPricingCards(catalog, options = {}) {
+  const locale = resolvePricingLocale(options.locale);
+  const families = hasFamilies(catalog);
+  const requested = normalizePricingInterval(options.interval ?? null);
+  const interval = requested ?? getDefaultInterval(catalog);
+  const contactSales = new Set(options.contactSales ?? []);
+  const isContactSales = (group) => contactSales.has(group.key) || group.plans.some((plan) => contactSales.has(plan.code));
+  let groups = getPricingGroups(catalog);
+  if (!families) {
+    if (options.sort) {
+      const sort = options.sort;
+      groups = groups.map((group, index) => ({ group, index })).sort((a, b) => sort(a.group.plans[0], b.group.plans[0]) || a.index - b.index).map(({ group }) => group);
+    } else {
+      const sales = groups.filter(isContactSales);
+      const byPlan = new Map(groups.map((group) => [group.plans[0], group]));
+      groups = [
+        ...sortPlansByPrice(groups.filter((group) => !isContactSales(group)).map((group) => group.plans[0])).map((plan) => byPlan.get(plan)),
+        ...sales
+      ];
+    }
+    if (requested) {
+      groups = groups.filter(
+        (group) => group.plans[0].interval === requested || isContactSales(group)
+      );
+    }
+  }
+  const highlight = options.highlight ?? null;
+  const highlightedKey = highlight !== null ? groups.find(
+    (group) => group.key === highlight || group.plans.some((plan) => plan.code === highlight)
+  )?.key : groups.find((group) => group.family?.pricing_highlighted === true)?.key;
+  const badge = (family) => options.badge !== void 0 ? options.badge === null ? null : trimmed(options.badge) || null : trimmed(family?.badge_text) || "Most Popular";
+  return groups.map((group, cardIndex) => {
+    const plan = pickPlan(group.plans, interval);
+    const family = group.family;
+    const name = trimmed(family?.name) || plan.name;
+    const description = trimmed(family?.description) || trimmed(plan.description) || null;
+    const highlighted = highlightedKey !== void 0 && highlightedKey === group.key;
+    const features = overrideFeatures(options.features, group, plan, cardIndex) ?? (family ? familyFeatures(family, plan, locale) : planCardFeatures(plan));
+    return {
+      key: group.key,
+      family,
+      plans: group.plans,
+      plan,
+      isFallbackInterval: families && interval !== null && plan.interval !== interval,
+      name,
+      description,
+      ...family ? priceStrings(plan, monthlyPlanOf(group), locale) : planPriceStrings(plan, locale),
+      features,
+      highlighted,
+      badge: highlighted ? badge(family) : null,
+      cta: trimmed(family?.cta_text) || `Get ${name}`,
+      enterprise: isContactSales(group)
+    };
+  });
+}
 function PanelPlanCard({
   frame,
   el,
@@ -3708,6 +4071,7 @@ function PanelPlanCard({
   description,
   price,
   interval,
+  priceNote,
   features,
   isCurrent,
   isHighlighted,
@@ -3772,6 +4136,7 @@ function PanelPlanCard({
                 interval
               ] })
             ] }),
+            priceNote && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": "pricing-billing", style: { ...text.meta, color: muted5, margin: "0.25rem 0 0" }, children: priceNote }),
             description && /* @__PURE__ */ jsxRuntime.jsx("p", { ...el("planCard__description", { ...text.secondary, color: muted5, margin: "0.25rem 0 0" }), children: description })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3788,7 +4153,13 @@ function PanelPlanCard({
                 ...text.secondary,
                 color: muted5
               }),
-              children: features.map((feature) => /* @__PURE__ */ jsxRuntime.jsx("li", { ...el("planCard__feature"), children: feature }, feature))
+              children: features.map((feature, index) => {
+                const item = typeof feature === "string" ? { label: feature } : feature;
+                return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...el("planCard__feature"), children: [
+                  item.label,
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "block", ...text.meta, color: muted5 }, children: item.description })
+                ] }, `${index}:${item.label}`);
+              })
             }
           ),
           children
@@ -3797,59 +4168,66 @@ function PanelPlanCard({
     }
   );
 }
-function featureLines(override, plan, index) {
-  const given = Array.isArray(override) ? override[index] : override?.[plan.code];
-  return given ?? planFeatures(plan);
-}
-var SYMBOLS = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5" };
-function fmtPrice(cents, cur) {
-  const s = SYMBOLS[cur] ?? cur + " ";
-  const val = cents % 100 === 0 ? String(cents / 100) : (cents / 100).toFixed(2);
-  return `${s}${val}`;
-}
-var C = {
-  cardBg: T.card,
-  hl: T.primary,
-  border: T.border,
-  radius: T.radius,
-  text: T.foreground,
-  muted: T.mutedForeground,
-  mutedBg: T.muted};
 function Check() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Toggle({ isAnnual, onChange, el }) {
+function IntervalSwitch({
+  options,
+  selected,
+  onChange,
+  annualDiscountLabel,
+  el
+}) {
   const pill = {
     display: "inline-flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
     borderRadius: "9999px",
     padding: "4px",
-    background: C.mutedBg,
+    background: T.muted,
     gap: "2px"
   };
   const tab = (active) => ({
     padding: "8px 20px",
     borderRadius: "9999px",
     border: "none",
-    background: active ? C.cardBg : "transparent",
+    background: active ? T.card : "transparent",
     ...text.action,
-    color: active ? C.text : C.muted,
+    color: active ? T.foreground : T.mutedForeground,
     cursor: "pointer",
     boxShadow: active ? T.shadow : "none",
     transition: "all 0.15s ease"
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...el("pricingTable__toggle", pill), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onChange(false), ...el("pricingTable__toggleButton", tab(!isAnnual)), "aria-pressed": !isAnnual, children: "Monthly" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onChange(true), ...el("pricingTable__toggleButton", tab(isAnnual)), "aria-pressed": isAnnual, children: "Annual" })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": "Billing interval", ...el("pricingTable__toggle", pill), children: options.map((option) => {
+    const active = option.interval === selected;
+    const note = option.interval === "yearly" && annualDiscountLabel ? annualDiscountLabel : option.interval !== "monthly" && option.savingsPercent !== null ? `Save ${option.savingsPercent}%` : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-interval": option.interval,
+        onClick: () => onChange(option.interval),
+        ...el("pricingTable__toggleButton", tab(active)),
+        "aria-pressed": active,
+        "aria-label": note ? `${option.label}, ${note.replace(/^Save /, "save ")}` : void 0,
+        children: [
+          option.label,
+          note && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+            marginLeft: "6px",
+            ...text.meta,
+            fontWeight: 600,
+            color: active ? T.primary : T.mutedForeground
+          }, children: note })
+        ]
+      },
+      option.interval
+    );
+  }) }) });
 }
 function Card({
-  plan,
-  features,
+  card: card2,
   isCurrent,
-  isHighlighted,
   filled: filledStyle,
-  highlightLabel,
-  isEnt,
   enterpriseEmail,
   onSelect,
   el,
@@ -3857,12 +4235,14 @@ function Card({
   isUpgrade
 }) {
   const [hover, setHover] = React2.useState(false);
+  const { plan, features } = card2;
+  const isHighlighted = card2.highlighted;
+  const isEnt = card2.enterprise;
   const filled = isHighlighted && filledStyle;
-  const text2 = filled ? T.highlightForeground : C.text;
-  const muted5 = filled ? `color-mix(in srgb, ${T.highlightForeground} 75%, ${T.highlight})` : C.muted;
-  const accent = filled ? T.highlightForeground : C.hl;
-  const badgeLabel = isCurrent ? "Current Plan" : highlightLabel;
-  const interval = `/${intervalLabel(plan.interval)}`;
+  const text2 = filled ? T.highlightForeground : T.foreground;
+  const muted5 = filled ? `color-mix(in srgb, ${T.highlightForeground} 75%, ${T.highlight})` : T.mutedForeground;
+  const accent = filled ? T.highlightForeground : T.primary;
+  const badgeLabel = isCurrent ? "Current Plan" : card2.badge;
   const handleClick = () => {
     if (isCurrent) return;
     if (isEnt && enterpriseEmail) {
@@ -3871,6 +4251,7 @@ function Card({
     }
     onSelect?.();
   };
+  const ctaText = isCurrent ? "Current Plan" : card2.family?.cta_text?.trim() ? card2.cta : isEnt ? "Contact Sales" : card2.cta;
   const emphasised = isUpgrade ?? isHighlighted;
   const cta = onSelect && /* @__PURE__ */ jsxRuntime.jsx(
     CTAButton,
@@ -3879,24 +4260,32 @@ function Card({
       disabled: isCurrent,
       variant: isCurrent ? "current" : isEnt ? "outline" : !emphasised ? "secondary" : filled ? "inverse" : isHighlighted ? "highlight" : "primary",
       el,
-      children: isCurrent ? "Current Plan" : isEnt ? "Contact Sales" : `Get ${plan.name}`
+      children: ctaText
     }
   );
+  const dataAttributes = {
+    "data-card-key": card2.key,
+    "data-family-code": card2.family?.code,
+    "data-plan-code": plan.code,
+    "data-interval": plan.interval,
+    "data-highlighted": isHighlighted ? "true" : void 0
+  };
   if (panel) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       PanelPlanCard,
       {
-        frame: (style) => el("planCard", style),
+        frame: (style) => ({ ...el("planCard", style), ...dataAttributes }),
         el,
-        name: plan.name,
-        description: plan.description,
-        price: isEnt ? "Custom" : fmtPrice(plan.amount_cents, plan.amount_currency),
-        interval: isEnt ? void 0 : intervalLabel(plan.interval),
-        features: features ?? [],
+        name: card2.name,
+        description: card2.description,
+        price: isEnt ? "Custom" : card2.price,
+        interval: isEnt || !card2.pricePeriod ? void 0 : card2.pricePeriod.replace(/^\//, ""),
+        priceNote: isEnt ? null : card2.billing,
+        features,
         isCurrent,
         isHighlighted,
         filled: filledStyle,
-        highlightLabel,
+        highlightLabel: card2.badge,
         children: cta
       }
     );
@@ -3904,17 +4293,18 @@ function Card({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ...dataAttributes,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       ...el("planCard", {
         position: "relative",
         display: "flex",
         flexDirection: "column",
-        background: filled ? T.highlight : C.cardBg,
+        background: filled ? T.highlight : T.card,
         color: text2,
-        border: border(isHighlighted ? T.highlight : C.border),
+        border: border(isHighlighted ? T.highlight : T.border),
         borderTopWidth: isHighlighted && !filled ? `calc(${T.borderWidth} + 2px)` : T.borderWidth,
-        borderRadius: C.radius,
+        borderRadius: T.radius,
         padding: "2rem",
         transition: "box-shadow 0.2s ease, transform 0.2s ease",
         boxShadow: T.shadow,
@@ -3939,7 +4329,7 @@ function Card({
           top: "0",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          background: C.mutedBg,
+          background: T.muted,
           ...text.label,
           padding: "4px 12px",
           borderRadius: "9999px",
@@ -3950,18 +4340,21 @@ function Card({
             ...text.heading,
             color: text2,
             margin: 0
-          }), children: plan.name }),
-          plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { ...el("planCard__description", {
+          }), children: card2.name }),
+          card2.description && /* @__PURE__ */ jsxRuntime.jsx("p", { ...el("planCard__description", {
             ...text.secondary,
             color: muted5,
             margin: "6px 0 0"
-          }), children: plan.description })
+          }), children: card2.description })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ...el("planCard__price", { marginBottom: "1.5rem" }), children: isEnt ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.metric, color: text2 }, children: "Custom" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.metric, color: text2 }, children: fmtPrice(plan.amount_cents, plan.amount_currency) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.meta, color: muted5, marginLeft: "4px" }, children: interval })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ...el("planCard__price", { marginBottom: "1.5rem" }), children: isEnt ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.metric, color: text2 }, children: "Custom" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "pricing-price", style: { ...text.metric, color: text2 }, children: card2.price }),
+            card2.pricePeriod && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.meta, color: muted5, marginLeft: "4px" }, children: card2.pricePeriod })
+          ] }),
+          card2.billing && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": "pricing-billing", style: { ...text.meta, color: muted5, margin: "8px 0 0" }, children: card2.billing })
         ] }) }),
-        features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { ...el("planCard__features", {
+        features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { ...el("planCard__features", {
           listStyle: "none",
           padding: 0,
           margin: "0 0 2rem",
@@ -3969,7 +4362,7 @@ function Card({
           flexDirection: "column",
           gap: "0.75rem",
           flex: 1
-        }), children: features.map((feat) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...el("planCard__feature", {
+        }), children: features.map((feat, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...el("planCard__feature", {
           display: "flex",
           alignItems: "flex-start",
           gap: "10px",
@@ -3977,9 +4370,12 @@ function Card({
           color: text2
         }), children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: accent, marginTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Check, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feat })
-        ] }, feat)) }),
-        (!features || features.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: feat.label }),
+            feat.description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...text.meta, color: muted5, marginTop: "2px" }, children: feat.description })
+          ] })
+        ] }, `${index}:${feat.label}`)) }),
+        features.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
         cta
       ]
     }
@@ -3993,7 +4389,7 @@ function CTAButton({
   el
 }) {
   const [hover, setHover] = React2.useState(false);
-  const look = variant === "current" ? { ...buttonStyle("secondary"), background: C.mutedBg, color: C.muted, cursor: "default" } : variant === "highlight" ? { ...buttonStyle("primary"), background: T.highlight, color: T.highlightForeground, border: primaryButtonBorder(T.highlight) } : variant === "inverse" ? { ...buttonStyle("primary"), background: T.highlightForeground, color: T.highlight, border: primaryButtonBorder(T.highlightForeground) } : buttonStyle(variant);
+  const look = variant === "current" ? { ...buttonStyle("secondary"), background: T.muted, color: T.mutedForeground, cursor: "default" } : variant === "highlight" ? { ...buttonStyle("primary"), background: T.highlight, color: T.highlightForeground, border: primaryButtonBorder(T.highlight) } : variant === "inverse" ? { ...buttonStyle("primary"), background: T.highlightForeground, color: T.highlight, border: primaryButtonBorder(T.highlightForeground) } : buttonStyle(variant);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -4018,9 +4414,9 @@ function Skeleton({ rootProps }) {
     gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
     gap: "1.5rem"
   }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-    background: C.cardBg,
+    background: T.card,
     border: border(),
-    borderRadius: C.radius,
+    borderRadius: T.radius,
     padding: "2rem",
     height: "380px"
   }, children: [
@@ -4034,6 +4430,7 @@ function Skeleton({ rootProps }) {
 function PricingTable({
   currentPlanCode,
   plans: propPlans,
+  families: propFamilies,
   features,
   sort,
   onSelect,
@@ -4042,36 +4439,40 @@ function PricingTable({
   onCheckoutResult,
   onCheckoutError,
   showToggle = true,
+  defaultInterval,
   highlightPlan,
   highlightStyle = "outline",
-  highlightLabel = "Most Popular",
+  highlightLabel,
   className,
   contactSalesPlans,
   enterpriseEmail,
+  annualDiscountLabel,
+  locale: localeProp,
   appearance
 }) {
   const { root, el, planCardLayout } = useAppearance(appearance);
-  const isEnterprise = (p) => contactSalesPlans?.includes(p.code) ?? false;
+  const locale = resolvePricingLocale(localeProp);
   const billing = useOptionalBillingContext();
   const client = billing?.client;
-  const catalog = reactQuery.useQuery(
+  const fetched = reactQuery.useQuery(
     { ...catalogQuery(client), enabled: !propPlans && Boolean(client) },
     billing?.queryClient ?? idleQueryClient
   );
-  const plans = propPlans ?? catalog.data?.plans ?? [];
-  const loading = !propPlans && Boolean(client) && catalog.isPending;
-  const loadError = propPlans ? null : !client ? "BillingProvider with a publishableKey is required to load plans" : catalog.error ? `Plans could not be loaded: ${catalog.error.message}` : null;
+  const catalog = propPlans ? { plans: propPlans, families: Array.isArray(propFamilies) ? propFamilies : null } : { plans: fetched.data?.plans ?? [], families: fetched.data?.families ?? null };
+  const loading = !propPlans && Boolean(client) && fetched.isPending;
+  const loadError = propPlans ? null : !client ? "BillingProvider with a publishableKey is required to load plans" : fetched.error ? `Plans could not be loaded: ${fetched.error.message}` : null;
   const [currentPlan, setCurrentPlan] = React2.useState(currentPlanCode ?? null);
-  const [isAnnual, setIsAnnual] = React2.useState(false);
+  const [selectedInterval, setSelectedInterval] = React2.useState(null);
   const [processing, setProcessing] = React2.useState(false);
   const [checkoutError, setCheckoutError] = React2.useState(null);
   React2.useEffect(() => {
     if (currentPlanCode !== void 0) setCurrentPlan(currentPlanCode);
   }, [currentPlanCode]);
-  async function selectPlan(plan) {
+  const withFamilies = Array.isArray(catalog.families);
+  async function selectPlan(plan, family) {
     setCheckoutError(null);
     if (onSelect) {
-      onSelect(plan);
+      onSelect(plan, family);
       return;
     }
     try {
@@ -4097,37 +4498,57 @@ function PricingTable({
       onCheckoutError?.(error);
     }
   }
-  const ordered = sort ? [...plans].sort(sort) : [...sortPlansByPrice(plans.filter((p) => !isEnterprise(p))), ...plans.filter(isEnterprise)];
-  const hasAnnual = ordered.some((p) => p.interval === "yearly");
-  const current = plans.find((p) => p.code === currentPlan);
-  const filtered = showToggle && hasAnnual ? ordered.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : ordered;
+  const available = getAvailableIntervals(catalog);
+  const interval = selectedInterval !== null && available.includes(selectedInterval) ? selectedInterval : getDefaultInterval(catalog, defaultInterval);
+  const switchVisible = showToggle && available.length > 1 && interval !== null;
+  const cards = getPricingCards(catalog, {
+    interval: withFamilies || switchVisible ? interval : null,
+    locale,
+    highlight: highlightPlan,
+    badge: highlightLabel,
+    features,
+    contactSales: contactSalesPlans,
+    sort
+  });
+  const current = catalog.plans.find((p) => p.code === currentPlan);
+  const currentYearly = current ? yearlyMinor(current) : null;
+  const isUpgrade = (plan) => {
+    if (!current || current.amount_currency !== plan.amount_currency) return void 0;
+    const yearly = yearlyMinor(plan);
+    return currentYearly !== null && yearly !== null ? yearly > currentYearly : plan.amount_cents > current.amount_cents;
+  };
   const rootProps = root("pricingTable", text.body, className);
   if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { rootProps });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rootProps, children: [
-    showToggle && hasAnnual && /* @__PURE__ */ jsxRuntime.jsx(Toggle, { isAnnual, onChange: setIsAnnual, el }),
+    switchVisible && interval !== null && /* @__PURE__ */ jsxRuntime.jsx(
+      IntervalSwitch,
+      {
+        options: getPricingIntervalOptions(catalog),
+        selected: interval,
+        onChange: setSelectedInterval,
+        annualDiscountLabel,
+        el
+      }
+    ),
     processing && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Payment is processing. Confirmation may take a little while." }),
     (checkoutError ?? loadError) && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", style: { color: T.dangerText }, children: checkoutError ?? loadError }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { ...el("pricingTable__grid", {
       display: "grid",
       gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
       gap: "1.5rem"
-    }), children: filtered.map((plan, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    }), children: cards.map((card2) => /* @__PURE__ */ jsxRuntime.jsx(
       Card,
       {
-        plan,
-        features: featureLines(features, plan, i),
-        isCurrent: currentPlan === plan.code,
-        isUpgrade: current && current.amount_currency === plan.amount_currency ? plan.amount_cents > current.amount_cents : void 0,
-        isHighlighted: highlightPlan === plan.code,
+        card: card2,
+        isCurrent: currentPlan === card2.plan.code,
+        isUpgrade: isUpgrade(card2.plan),
         filled: highlightStyle === "filled",
-        highlightLabel,
-        isEnt: isEnterprise(plan),
         enterpriseEmail,
-        onSelect: () => void selectPlan(plan),
+        onSelect: () => void selectPlan(card2.plan, card2.family),
         el,
         panel: planCardLayout === "panel"
       },
-      plan.code
+      card2.key
     )) }),
     /* @__PURE__ */ jsxRuntime.jsx(NozleBranding, {})
   ] });
@@ -5179,6 +5600,10 @@ exports.UsageMeter = UsageMeter;
 exports.UsageTrend = UsageTrend;
 exports.comparisonRows = comparisonRows;
 exports.currentPlanMeters = currentPlanMeters;
+exports.getAvailableIntervals = getAvailableIntervals;
+exports.getDefaultInterval = getDefaultInterval;
+exports.getPricingCards = getPricingCards;
+exports.getPricingIntervalOptions = getPricingIntervalOptions;
 exports.getUsageMeterColor = getUsageMeterColor;
 exports.planFeatures = planFeatures;
 exports.sortPlansByPrice = sortPlansByPrice;