@zuplo/zudoku-plugin-monetization 0.0.42 → 0.0.43

package/dist/{PricingTable-BlcXx4-5.mjs → PricingTable-WkG2n7V-.mjs}

@@ -265,6 +265,216 @@ const categorizeRateCards = (rateCards, options) => {
 	};
 };
 //#endregion
+//#region src/utils/comparePlanEntitlements.ts
+/** Compact, human-readable value for a quota row. */
+const quotaValueLabel = (q) => {
+	if (q.unitPrice) return q.unitPrice;
+	if (q.tierPrices && q.tierPrices.length > 0) return "Tiered pricing";
+	if (q.isPayg) return "Usage-based";
+	return `${q.limit.toLocaleString("en-US")} / ${q.period}`;
+};
+const featureValueLabel = (f) => f.value ?? "Included";
+const isPlainNumericQuota = (q) => !q.isPayg && !q.unitPrice && (!q.tierPrices || q.tierPrices.length === 0);
+const sameTierSchedule = (a, b) => (a ?? []).join("\n") === (b ?? []).join("\n");
+const sameQuota = (a, b) => a.name === b.name && a.limit === b.limit && a.period === b.period && a.isPayg === b.isPayg && a.unitPrice === b.unitPrice && sameTierSchedule(a.tierPrices, b.tierPrices);
+const sameFeature = (a, b) => a.name === b.name && a.value === b.value;
+/**
+* Whether two entitlement sets render identically: the same quota and feature
+* keys, each with identical display fields. Order-insensitive (matched by
+* key), so two phases whose rate cards merely differ in order still compare
+* equal. Used to collapse per-phase entitlement lists that would repeat the
+* exact same rows.
+*/
+const sameEntitlementSet = (a, b) => {
+	if (a.quotas.length !== b.quotas.length || a.features.length !== b.features.length) return false;
+	const bQuotas = new Map(b.quotas.map((q) => [q.key, q]));
+	const bFeatures = new Map(b.features.map((f) => [f.key, f]));
+	return a.quotas.every((q) => {
+		const other = bQuotas.get(q.key);
+		return other !== void 0 && sameQuota(q, other);
+	}) && a.features.every((f) => {
+		const other = bFeatures.get(f.key);
+		return other !== void 0 && sameFeature(f, other);
+	});
+};
+/**
+* Compare two plans' entitlements, matching strictly by feature key (never by
+* display name). Each key yields exactly one change row, so a key that exists
+* on one side and a differently-keyed feature that merely shares a display
+* name can never read as a contradictory "added" + "removed" of the same
+* thing. Labels are disambiguated afterwards when they would collide.
+*/
+const comparePlanEntitlements = (current, target) => {
+	const changes = [];
+	const curQuota = new Map(current.quotas.map((q) => [q.key, q]));
+	const tgtQuota = new Map(target.quotas.map((q) => [q.key, q]));
+	const curFeat = new Map(current.features.map((f) => [f.key, f]));
+	const tgtFeat = new Map(target.features.map((f) => [f.key, f]));
+	for (const key of new Set([...curQuota.keys(), ...tgtQuota.keys()])) {
+		const c = curQuota.get(key);
+		const t = tgtQuota.get(key);
+		if (c && t) {
+			const currentValue = quotaValueLabel(c);
+			const targetValue = quotaValueLabel(t);
+			let change = "same";
+			if (isPlainNumericQuota(c) && isPlainNumericQuota(t) && c.period === t.period) {
+				if (t.limit > c.limit) change = "increase";
+				else if (t.limit < c.limit) change = "decrease";
+			} else if (currentValue !== targetValue || !sameTierSchedule(c.tierPrices, t.tierPrices)) change = "changed";
+			changes.push({
+				key,
+				label: t.name,
+				kind: "quota",
+				change,
+				currentValue,
+				targetValue,
+				tierPrices: t.tierPrices,
+				period: t.period
+			});
+		} else if (t) changes.push({
+			key,
+			label: t.name,
+			kind: "quota",
+			change: "added",
+			targetValue: quotaValueLabel(t),
+			tierPrices: t.tierPrices,
+			period: t.period
+		});
+		else if (c) changes.push({
+			key,
+			label: c.name,
+			kind: "quota",
+			change: "removed",
+			currentValue: quotaValueLabel(c),
+			period: c.period
+		});
+	}
+	for (const key of new Set([...curFeat.keys(), ...tgtFeat.keys()])) {
+		const c = curFeat.get(key);
+		const t = tgtFeat.get(key);
+		if (c && t) {
+			const currentValue = featureValueLabel(c);
+			const targetValue = featureValueLabel(t);
+			changes.push({
+				key,
+				label: t.name,
+				kind: "feature",
+				change: currentValue === targetValue ? "same" : "changed",
+				currentValue,
+				targetValue
+			});
+		} else if (t) changes.push({
+			key,
+			label: t.name,
+			kind: "feature",
+			change: "added",
+			targetValue: featureValueLabel(t)
+		});
+		else if (c) changes.push({
+			key,
+			label: c.name,
+			kind: "feature",
+			change: "removed",
+			currentValue: featureValueLabel(c)
+		});
+	}
+	const labelCounts = /* @__PURE__ */ new Map();
+	for (const ch of changes) labelCounts.set(ch.label, (labelCounts.get(ch.label) ?? 0) + 1);
+	return changes.map(({ period, ...ch }) => {
+		if ((labelCounts.get(ch.label) ?? 0) > 1 && ch.kind === "quota" && period) return {
+			...ch,
+			label: `${ch.label} (${period})`
+		};
+		return ch;
+	});
+};
+//#endregion
+//#region src/utils/getPlanPrice.ts
+const sumFlatFeeAmounts = (rateCards) => {
+	let total = 0;
+	for (const rc of rateCards) if (rc.type === "flat_fee" && rc.price && rc.billingCadence !== null) {
+		const amount = Number(rc.price.amount);
+		if (Number.isFinite(amount)) total += amount;
+	}
+	return total;
+};
+/**
+* The plan's headline recurring price: the sum of every recurring `flat_fee`
+* rate-card amount on the plan's steady-state (last) phase, expressed in the
+* plan's own `billingCadence`. One-time fees (`flat_fee` with
+* `billingCadence: null`, e.g. a setup fee) are excluded.
+*
+* This is derived entirely from the plan's rate cards. It deliberately does
+* NOT read any server-provided `monthlyPrice` / `yearlyPrice` and performs no
+* cadence conversion, so it stays correct for any billing cadence — hourly
+* (`PT1H`), weekly, monthly, yearly, etc. Callers pair the returned amount
+* with `formatDuration(plan.billingCadence)` to render e.g. `$2.99/hour`.
+*
+* Returns `0` when there are no phases or no recurring flat fee, which callers
+* render as "Free" (or "Pay as you go" when the plan bills on usage — see
+* {@link formatPlanPrice}).
+*/
+const getPlanPrice = (plan) => {
+	const lastPhase = plan.phases?.at(-1);
+	if (!lastPhase) return 0;
+	return sumFlatFeeAmounts(lastPhase.rateCards ?? []);
+};
+//#endregion
+//#region src/utils/formatPlanPrice.ts
+const isPricedUsageRateCard = (rc) => {
+	if (rc.type !== "usage_based" || !rc.price) return false;
+	const p = rc.price;
+	if (p.type === "unit") return parseFloat(p.amount) > 0;
+	if (p.type === "tiered") return p.tiers.some(tierHasPositivePrice);
+	return true;
+};
+const hasPricedUsageRateCard = (plan) => plan.phases.some((phase) => phase.rateCards.some(isPricedUsageRateCard));
+/**
+* Headline pricing for plan cards. Centralizes the "Pay as you go" detection:
+* plans whose flat-fee total is zero but that bill on usage shouldn't render
+* as "Free" - they're charged per-unit.
+*/
+const formatPlanPrice = (plan) => {
+	if (!plan.phases || plan.phases.length === 0) return { type: "free" };
+	const amount = getPlanPrice(plan);
+	if (amount > 0) return {
+		type: "priced",
+		amount
+	};
+	if (hasPricedUsageRateCard(plan)) return {
+		type: "payg",
+		main: "Pay as you go",
+		sub: "Usage-based pricing"
+	};
+	return { type: "free" };
+};
+//#endregion
+//#region src/utils/getPhasePriceLabel.ts
+/**
+* Headline price for a SINGLE phase, derived only from that phase's own rate
+* cards. Mirrors {@link formatPlanPrice}'s rules, but scoped to the phase:
+* a positive recurring flat-fee total is `priced`; otherwise a priced
+* `usage_based` card in this phase makes it `payg`; otherwise it's `free`.
+*
+* Like {@link getPlanPrice}, one-time fees (`flat_fee` with
+* `billingCadence: null`) and `price: null` rate cards contribute nothing —
+* an intro phase whose fees all have `price: null` derives as `free`.
+*/
+const getPhasePriceLabel = (phase) => {
+	const rateCards = phase.rateCards ?? [];
+	const amount = sumFlatFeeAmounts(rateCards);
+	if (amount > 0) return {
+		type: "priced",
+		amount
+	};
+	if (rateCards.some(isPricedUsageRateCard)) return {
+		type: "payg",
+		main: "Pay as you go",
+		sub: "Usage-based pricing"
+	};
+	return { type: "free" };
+};
+//#endregion
 //#region src/pricing-ui/CheckIcon.tsx
 /**
 * Inline `Check` icon, visually identical to `lucide-react`'s `CheckIcon`
@@ -372,43 +582,128 @@ const EntitlementList = ({ quotas, features, header, itemClassName }) => {
 };
 //#endregion
 //#region src/pricing-ui/PlanEntitlements.tsx
-const PhaseSection = ({ phase, currency, showName, billingCadence, units, itemClassName }) => {
-	const { quotas, features } = categorizeRateCards(phase.rateCards, {
+const priceLabelText = (label, currency, billingCadence) => {
+	if (label.type === "payg") return label.main;
+	if (label.type === "free") return "Free";
+	const amount = formatPrice(label.amount, currency);
+	return billingCadence ? `${amount}/${formatDuration(billingCadence)}` : amount;
+};
+/**
+* Section header for one phase of a multi-phase plan: the phase name, its
+* duration, and the phase's own price. Shared by {@link PlanEntitlements} and
+* the plan-change card so per-phase sections read identically everywhere.
+*/
+const PlanPhaseHeader = ({ phase, currency, billingCadence }) => /* @__PURE__ */ jsxs("div", {
+	className: "text-sm font-medium text-card-foreground",
+	children: [
+		phase.name,
+		phase.duration && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal",
+			children: [
+				" ",
+				"— ",
+				formatDuration(phase.duration)
+			]
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal",
+			children: [
+				" ",
+				"·",
+				" ",
+				priceLabelText(getPhasePriceLabel(phase), currency, billingCadence)
+			]
+		})
+	]
+});
+const PhaseSection = ({ phase, set, currency, billingCadence, itemClassName }) => /* @__PURE__ */ jsx(EntitlementList, {
+	quotas: set.quotas,
+	features: set.features,
+	itemClassName,
+	header: /* @__PURE__ */ jsx(PlanPhaseHeader, {
+		phase,
+		currency,
+		billingCadence
+	})
+});
+/**
+* A plan's entitlements, phase by phase. Multi-phase plans whose phases all
+* resolve to the same entitlements collapse into a single list (the phases
+* only differ in price, which the price schedule already tells); phases with
+* genuinely different entitlements render as separate sections headed by the
+* phase name, duration, and that phase's own price.
+*/
+const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
+	const sets = phases.map((phase) => categorizeRateCards(phase.rateCards, {
 		currency,
 		units,
 		planBillingCadence: billingCadence
-	});
-	return /* @__PURE__ */ jsx(EntitlementList, {
-		quotas,
-		features,
-		itemClassName,
-		header: showName ? /* @__PURE__ */ jsxs("div", {
-			className: "text-sm font-medium text-card-foreground",
-			children: [phase.name, phase.duration && /* @__PURE__ */ jsxs("span", {
-				className: "text-muted-foreground font-normal",
-				children: [
-					" ",
-					"— ",
-					formatDuration(phase.duration)
-				]
-			})]
-		}) : void 0
-	});
-};
-const PlanEntitlements = ({ phases, currency, billingCadence, units, itemClassName }) => {
+	}));
+	if (phases.length <= 1 || sets.every((set) => sameEntitlementSet(set, sets[0]))) {
+		const steady = sets.at(-1);
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: steady && /* @__PURE__ */ jsx(EntitlementList, {
+				quotas: steady.quotas,
+				features: steady.features,
+				itemClassName
+			})
+		});
+	}
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4",
 		children: phases.map((phase, idx) => /* @__PURE__ */ jsx(PhaseSection, {
 			phase,
+			set: sets[idx],
 			currency,
-			showName: phases.length > 1,
 			billingCadence,
-			units,
 			itemClassName
 		}, phase.key ?? String(idx)))
 	});
 };
 //#endregion
+//#region src/pricing-ui/PlanPriceSchedule.tsx
+const RowPrice = ({ price, currency, billingCadence, className }) => {
+	if (price.type === "priced") return /* @__PURE__ */ jsxs("span", {
+		className: cn("font-semibold text-card-foreground", className),
+		children: [formatPrice(price.amount, currency), billingCadence && /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground font-normal text-sm",
+			children: ["/", formatDuration(billingCadence)]
+		})]
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-semibold text-card-foreground", className),
+		children: price.type === "payg" ? price.main : "Free"
+	});
+};
+/**
+* Stacked per-phase price rows for a multi-phase plan, replacing the single
+* headline price (which only reflects the steady-state phase): each row pairs
+* a phase label ("First 3 months", "After that") with that phase's own price.
+* Every row gets equal visual weight — the intro price is part of the plan's
+* price, not a footnote.
+*
+* Callers derive the rows via {@link getPlanPriceSchedule} and fall back to
+* the single-price rendering when it returns `undefined`. `size` picks the
+* typographic treatment: `"lg"` for a card's headline area, `"sm"` for
+* compact contexts (plan-change rows, summary cards).
+*/
+const PlanPriceSchedule = ({ schedule, currency, billingCadence, size = "sm", className }) => /* @__PURE__ */ jsx("div", {
+	className: cn("space-y-1 text-sm", className),
+	children: schedule.map((row) => /* @__PURE__ */ jsxs("div", {
+		className: "flex items-baseline justify-between gap-3",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: row.label
+		}), /* @__PURE__ */ jsx(RowPrice, {
+			price: row.price,
+			currency,
+			billingCadence,
+			className: size === "lg" ? "text-lg" : void 0
+		})]
+	}, row.key))
+});
+//#endregion
 //#region src/pricing-ui/PlanPriceTag.tsx
 /**
 * Headline price for a plan/subscription: `$X/cadence`, "Pay as you go", or
@@ -445,64 +740,38 @@ const PlanPriceTag = ({ label, currency, billingCadence, description = false, si
 	});
 };
 //#endregion
-//#region src/utils/getPlanPrice.ts
-const sumFlatFeeAmounts = (rateCards) => {
-	let total = 0;
-	for (const rc of rateCards) if (rc.type === "flat_fee" && rc.price && rc.billingCadence !== null) {
-		const amount = Number(rc.price.amount);
-		if (Number.isFinite(amount)) total += amount;
-	}
-	return total;
+//#region src/utils/getPlanPriceSchedule.ts
+const samePriceLabel = (a, b) => {
+	if (a.type !== b.type) return false;
+	return a.type !== "priced" || b.type !== "priced" || a.amount === b.amount;
 };
-/**
-* The plan's headline recurring price: the sum of every recurring `flat_fee`
-* rate-card amount on the plan's steady-state (last) phase, expressed in the
-* plan's own `billingCadence`. One-time fees (`flat_fee` with
-* `billingCadence: null`, e.g. a setup fee) are excluded.
-*
-* This is derived entirely from the plan's rate cards. It deliberately does
-* NOT read any server-provided `monthlyPrice` / `yearlyPrice` and performs no
-* cadence conversion, so it stays correct for any billing cadence — hourly
-* (`PT1H`), weekly, monthly, yearly, etc. Callers pair the returned amount
-* with `formatDuration(plan.billingCadence)` to render e.g. `$2.99/hour`.
-*
-* Returns `0` when there are no phases or no recurring flat fee, which callers
-* render as "Free" (or "Pay as you go" when the plan bills on usage — see
-* {@link formatPlanPrice}).
-*/
-const getPlanPrice = (plan) => {
-	const lastPhase = plan.phases?.at(-1);
-	if (!lastPhase) return 0;
-	return sumFlatFeeAmounts(lastPhase.rateCards ?? []);
+const rowLabel = (phase, index, lastIndex) => {
+	if (index === lastIndex) return "After that";
+	if (!phase.duration) return phase.name;
+	const duration = formatDuration(phase.duration);
+	return index === 0 ? `First ${duration}` : `Next ${duration}`;
 };
-//#endregion
-//#region src/utils/formatPlanPrice.ts
-const isPricedUsageRateCard = (rc) => {
-	if (rc.type !== "usage_based" || !rc.price) return false;
-	const p = rc.price;
-	if (p.type === "unit") return parseFloat(p.amount) > 0;
-	if (p.type === "tiered") return p.tiers.some(tierHasPositivePrice);
-	return true;
-};
-const hasPricedUsageRateCard = (plan) => plan.phases.some((phase) => phase.rateCards.some(isPricedUsageRateCard));
 /**
-* Headline pricing for plan cards. Centralizes the "Pay as you go" detection:
-* plans whose flat-fee total is zero but that bill on usage shouldn't render
-* as "Free" - they're charged per-unit.
+* A stacked price schedule for a multi-phase plan: one row per phase, each
+* priced from its own rate cards (e.g. "First 3 months — Free" then
+* "After that — $750/month"). This is how an intro/ramp phase's price gets
+* surfaced instead of only the steady-state price from {@link getPlanPrice}.
+*
+* Returns `undefined` when there is nothing to stack — fewer than two phases,
+* or every phase resolving to the same price label (a free trial into a free
+* plan, two identically-priced phases, …) — so callers fall back to the
+* single-headline rendering.
 */
-const formatPlanPrice = (plan) => {
-	if (!plan.phases || plan.phases.length === 0) return { type: "free" };
-	const amount = getPlanPrice(plan);
-	if (amount > 0) return {
-		type: "priced",
-		amount
-	};
-	if (hasPricedUsageRateCard(plan)) return {
-		type: "payg",
-		main: "Pay as you go",
-		sub: "Usage-based pricing"
-	};
-	return { type: "free" };
+const getPlanPriceSchedule = (plan) => {
+	const phases = plan.phases ?? [];
+	if (phases.length <= 1) return void 0;
+	const prices = phases.map(getPhasePriceLabel);
+	if (prices.every((price) => samePriceLabel(price, prices[0]))) return;
+	return phases.map((phase, index) => ({
+		key: phase.key ?? String(index),
+		label: rowLabel(phase, index, phases.length - 1),
+		price: prices[index]
+	}));
 };
 //#endregion
 //#region src/utils/pricingTaxLegend.ts
@@ -557,6 +826,7 @@ const PricingCard = ({ plan, isPopular = false, units, action, className }) => {
 	const priceLabel = formatPlanPrice(plan);
 	const isCustom = isCustomPlan(plan);
 	const billingInterval = formatDuration(plan.billingCadence);
+	const schedule = isCustom ? void 0 : getPlanPriceSchedule(plan);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative rounded-lg border p-6 flex flex-col", isPopular && "border-primary border-2", className),
 		children: [
@@ -574,7 +844,12 @@ const PricingCard = ({ plan, isPopular = false, units, action, className }) => {
 						className: "text-base font-semibold text-muted-foreground mb-2",
 						children: plan.name
 					}),
-					/* @__PURE__ */ jsx("div", {
+					schedule ? /* @__PURE__ */ jsx(PlanPriceSchedule, {
+						schedule,
+						currency: plan.currency,
+						billingCadence: plan.billingCadence,
+						size: "lg"
+					}) : /* @__PURE__ */ jsx("div", {
 						className: "flex items-baseline gap-1 flex-wrap",
 						children: isCustom ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
 							className: "text-3xl font-bold text-card-foreground",
@@ -660,4 +935,4 @@ const PricingTable = ({ plans, units, renderAction, renderCard, isPopular = (pla
 	})] });
 };
 //#endregion
-export { formatDurationInterval as S, formatStaticEntitlementConfig as _, planHasDefaultTaxBehavior as a, formatDuration as b, formatPlanPrice as c, PlanEntitlements as d, EntitlementList as f, formatTieredPriceBreakdown as g, categorizeRateCards as h, collectDefaultTaxBehaviors as i, getPlanPrice as l, FeatureItem as m, PricingCard as n, subscriptionTaxLegendSentence as o, QuotaItem as p, isCustomPlan as r, taxBehaviorLegendSentence as s, PricingTable as t, PlanPriceTag as u, formatMinorCurrencyAmount as v, formatDurationAdjective as x, formatPrice as y };
+export { formatStaticEntitlementConfig as C, formatDurationAdjective as D, formatDuration as E, formatDurationInterval as O, formatTieredPriceBreakdown as S, formatPrice as T, formatPlanPrice as _, planHasDefaultTaxBehavior as a, sameEntitlementSet as b, getPlanPriceSchedule as c, PlanEntitlements as d, PlanPhaseHeader as f, getPhasePriceLabel as g, FeatureItem as h, collectDefaultTaxBehaviors as i, PlanPriceTag as l, QuotaItem as m, PricingCard as n, subscriptionTaxLegendSentence as o, EntitlementList as p, isCustomPlan as r, taxBehaviorLegendSentence as s, PricingTable as t, PlanPriceSchedule as u, getPlanPrice as v, formatMinorCurrencyAmount as w, categorizeRateCards as x, comparePlanEntitlements as y };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { S as formatDurationInterval, a as planHasDefaultTaxBehavior, b as formatDuration, c as formatPlanPrice, d as PlanEntitlements, f as EntitlementList, h as categorizeRateCards, o as subscriptionTaxLegendSentence, r as isCustomPlan, t as PricingTable, u as PlanPriceTag, v as formatMinorCurrencyAmount, x as formatDurationAdjective, y as formatPrice } from "./PricingTable-BlcXx4-5.mjs";
+import { D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, b as sameEntitlementSet, c as getPlanPriceSchedule, d as PlanEntitlements, f as PlanPhaseHeader, l as PlanPriceTag, o as subscriptionTaxLegendSentence, p as EntitlementList, r as isCustomPlan, t as PricingTable, u as PlanPriceSchedule, w as formatMinorCurrencyAmount, x as categorizeRateCards, y as comparePlanEntitlements } from "./PricingTable-WkG2n7V-.mjs";
 import { cn, createPlugin, joinUrl, throwIfProblemJson } from "zudoku";
 import { AlertTriangleIcon, ArrowDownIcon, ArrowLeftRightIcon, ArrowUpIcon, CalendarIcon, CheckCheckIcon, CheckIcon, CircleSlashIcon, ClockIcon, CreditCardIcon, Grid2x2XIcon, InfoIcon, Loader2Icon, LockIcon, MoreVerticalIcon, RefreshCcw, RefreshCwIcon, Settings, ShieldIcon, StarsIcon, Trash2Icon, XIcon } from "zudoku/icons";
 import { Link, Outlet, useLocation, useNavigate, useSearchParams } from "zudoku/router";
@@ -256,7 +256,9 @@ const formatBillingCycle = (duration) => {
 * Plan summary shown on the checkout and plan-change confirmation pages: an
 * avatar + name/description on the left and the headline price (or
 * "Free" / "Pay as you go") plus tax and billing cadence on the right,
-* followed by the plan's included entitlements.
+* followed by the plan's included entitlements. Multi-phase ramp plans render
+* a full-width per-phase price schedule beneath the title instead of the
+* single right-column price.
 *
 * The price is derived from the plan's rate cards via {@link formatPlanPrice}
 * and rendered in the plan's own billing cadence, so it stays correct for any
@@ -264,10 +266,19 @@ const formatBillingCycle = (duration) => {
 */
 const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxInclusive, units, entitlementsItemClassName }) => {
 	const priceLabel = formatPlanPrice(plan);
+	const schedule = getPlanPriceSchedule(plan);
 	const billingCycle = plan.billingCadence ? formatDuration(plan.billingCadence) : null;
+	const taxLine = taxAmount != null && /* @__PURE__ */ jsx("div", {
+		className: "text-sm font-normal mt-1",
+		children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel}`
+	});
+	const billedLine = billingCycle && /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-muted-foreground font-normal",
+		children: ["Billed ", formatBillingCycle(billingCycle)]
+	});
 	return /* @__PURE__ */ jsxs(Card, {
 		className: "bg-muted/50",
-		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs(CardTitle, {
 			className: "flex justify-between items-start",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
@@ -284,22 +295,26 @@ const PlanSummaryCard = ({ plan, descriptionFallback, taxAmount, taxLabel, taxIn
 						children: plan.description || descriptionFallback
 					})]
 				})]
-			}), /* @__PURE__ */ jsxs("div", {
+			}), !schedule && /* @__PURE__ */ jsxs("div", {
 				className: "text-right",
 				children: [/* @__PURE__ */ jsx(PlanPriceTag, {
 					label: priceLabel,
 					currency: plan.currency,
 					size: "lg",
 					description: true
-				}), priceLabel.type === "priced" && /* @__PURE__ */ jsxs(Fragment$1, { children: [taxAmount != null && /* @__PURE__ */ jsx("div", {
-					className: "text-sm font-normal mt-1",
-					children: taxInclusive ? `${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel} included` : `+ ${formatMinorCurrencyAmount(taxAmount, plan.currency)} ${taxLabel}`
-				}), billingCycle && /* @__PURE__ */ jsxs("div", {
-					className: "text-sm text-muted-foreground font-normal",
-					children: ["Billed ", formatBillingCycle(billingCycle)]
-				})] })]
+				}), priceLabel.type === "priced" && /* @__PURE__ */ jsxs(Fragment$1, { children: [taxLine, billedLine] })]
+			})]
+		}), schedule && /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 font-normal",
+			children: [/* @__PURE__ */ jsx(PlanPriceSchedule, {
+				schedule,
+				currency: plan.currency,
+				billingCadence: plan.billingCadence
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "text-right",
+				children: [taxLine, billedLine]
 			})]
-		}) }), /* @__PURE__ */ jsxs(CardContent, { children: [
+		})] }), /* @__PURE__ */ jsxs(CardContent, { children: [
 			/* @__PURE__ */ jsx(Separator, {}),
 			/* @__PURE__ */ jsx("div", {
 				className: "text-sm font-medium mb-3 mt-3",
@@ -1431,130 +1446,6 @@ const RestoreSubscriptionDialog = ({ open, onOpenChange, planName, subscriptionI
 	});
 };
 //#endregion
-//#region src/utils/comparePlanEntitlements.ts
-/** Compact, human-readable value for a quota row. */
-const quotaValueLabel = (q) => {
-	if (q.unitPrice) return q.unitPrice;
-	if (q.tierPrices && q.tierPrices.length > 0) return "Tiered pricing";
-	if (q.isPayg) return "Usage-based";
-	return `${q.limit.toLocaleString("en-US")} / ${q.period}`;
-};
-const featureValueLabel = (f) => f.value ?? "Included";
-const isPlainNumericQuota = (q) => !q.isPayg && !q.unitPrice && (!q.tierPrices || q.tierPrices.length === 0);
-const sameTierSchedule = (a, b) => (a ?? []).join("\n") === (b ?? []).join("\n");
-/**
-* Compare two plans' entitlements, matching strictly by feature key (never by
-* display name). Each key yields exactly one change row, so a key that exists
-* on one side and a differently-keyed feature that merely shares a display
-* name can never read as a contradictory "added" + "removed" of the same
-* thing. Labels are disambiguated afterwards when they would collide.
-*/
-const comparePlanEntitlements = (current, target) => {
-	const changes = [];
-	const curQuota = new Map(current.quotas.map((q) => [q.key, q]));
-	const tgtQuota = new Map(target.quotas.map((q) => [q.key, q]));
-	const curFeat = new Map(current.features.map((f) => [f.key, f]));
-	const tgtFeat = new Map(target.features.map((f) => [f.key, f]));
-	for (const key of new Set([...curQuota.keys(), ...tgtQuota.keys()])) {
-		const c = curQuota.get(key);
-		const t = tgtQuota.get(key);
-		if (c && t) {
-			const currentValue = quotaValueLabel(c);
-			const targetValue = quotaValueLabel(t);
-			let change = "same";
-			if (isPlainNumericQuota(c) && isPlainNumericQuota(t) && c.period === t.period) {
-				if (t.limit > c.limit) change = "increase";
-				else if (t.limit < c.limit) change = "decrease";
-			} else if (currentValue !== targetValue || !sameTierSchedule(c.tierPrices, t.tierPrices)) change = "changed";
-			changes.push({
-				key,
-				label: t.name,
-				kind: "quota",
-				change,
-				currentValue,
-				targetValue,
-				tierPrices: t.tierPrices,
-				period: t.period
-			});
-		} else if (t) changes.push({
-			key,
-			label: t.name,
-			kind: "quota",
-			change: "added",
-			targetValue: quotaValueLabel(t),
-			tierPrices: t.tierPrices,
-			period: t.period
-		});
-		else if (c) changes.push({
-			key,
-			label: c.name,
-			kind: "quota",
-			change: "removed",
-			currentValue: quotaValueLabel(c),
-			period: c.period
-		});
-	}
-	for (const key of new Set([...curFeat.keys(), ...tgtFeat.keys()])) {
-		const c = curFeat.get(key);
-		const t = tgtFeat.get(key);
-		if (c && t) {
-			const currentValue = featureValueLabel(c);
-			const targetValue = featureValueLabel(t);
-			changes.push({
-				key,
-				label: t.name,
-				kind: "feature",
-				change: currentValue === targetValue ? "same" : "changed",
-				currentValue,
-				targetValue
-			});
-		} else if (t) changes.push({
-			key,
-			label: t.name,
-			kind: "feature",
-			change: "added",
-			targetValue: featureValueLabel(t)
-		});
-		else if (c) changes.push({
-			key,
-			label: c.name,
-			kind: "feature",
-			change: "removed",
-			currentValue: featureValueLabel(c)
-		});
-	}
-	const labelCounts = /* @__PURE__ */ new Map();
-	for (const ch of changes) labelCounts.set(ch.label, (labelCounts.get(ch.label) ?? 0) + 1);
-	return changes.map(({ period, ...ch }) => {
-		if ((labelCounts.get(ch.label) ?? 0) > 1 && ch.kind === "quota" && period) return {
-			...ch,
-			label: `${ch.label} (${period})`
-		};
-		return ch;
-	});
-};
-//#endregion
-//#region src/utils/formatPhaseRampSummary.ts
-const durationWithCount = (iso) => {
-	const text = formatDuration(iso);
-	return /^\d/.test(text) ? text : `1 ${text}`;
-};
-const steadyStateLabel = (plan) => {
-	const label = formatPlanPrice(plan);
-	if (label.type === "priced") return `${formatPrice(label.amount, plan.currency)} / ${formatDuration(plan.billingCadence)}`;
-	return label.type === "payg" ? "Pay as you go" : "Free";
-};
-/**
-* One-line summary of a multi-phase plan's progression for compact UI, e.g.
-* `"Free Trial (1 week), then $2.99 / month"`. Returns `undefined` for
-* single-phase plans (nothing to summarize).
-*/
-const formatPhaseRampSummary = (plan) => {
-	if (!plan.phases || plan.phases.length <= 1) return void 0;
-	const first = plan.phases[0];
-	return `${first.duration ? `${first.name} (${durationWithCount(first.duration)})` : first.name}, then ${steadyStateLabel(plan)}`;
-};
-//#endregion
 //#region src/pages/components/PlanChangeCard.tsx
 const MODE_LABEL = {
 	upgrade: "Upgrade",
@@ -1665,18 +1556,28 @@ const ChangeRow = ({ change }) => {
 const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwitching, units, onSwitch }) => {
 	const isCustom = isCustomPlan(plan);
 	const priceLabel = formatPlanPrice(plan);
-	const ramp = formatPhaseRampSummary(plan);
-	const entitlementChanges = useMemo(() => {
-		const steadyPhase = plan.phases.at(-1);
-		const changes = comparePlanEntitlements(currentEntitlements, steadyPhase ? categorizeRateCards(steadyPhase.rateCards, {
+	const schedule = isCustom ? void 0 : getPlanPriceSchedule(plan);
+	const phaseChangeGroups = useMemo(() => {
+		const diff = (target) => {
+			const changes = comparePlanEntitlements(currentEntitlements, target);
+			return [...changes.filter((c) => c.change !== "removed"), ...changes.filter((c) => c.change === "removed")];
+		};
+		const sets = plan.phases.map((phase) => categorizeRateCards(phase.rateCards, {
 			currency: plan.currency,
 			units,
 			planBillingCadence: plan.billingCadence
-		}) : {
+		}));
+		return (plan.phases.length <= 1 || sets.every((set) => sameEntitlementSet(set, sets[0])) ? [{ changes: diff(sets.at(-1) ?? {
 			quotas: [],
 			features: []
-		});
-		return [...changes.filter((c) => c.change !== "removed"), ...changes.filter((c) => c.change === "removed")];
+		}) }] : plan.phases.flatMap((phase, idx) => {
+			const set = sets[idx];
+			if (set.quotas.length === 0 && set.features.length === 0) return [];
+			return [{
+				phase,
+				changes: diff(set)
+			}];
+		})).filter((group) => group.changes.length > 0);
 	}, [
 		plan,
 		currentEntitlements,
@@ -1702,7 +1603,7 @@ const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwi
 					}), isCustom ? /* @__PURE__ */ jsx("span", {
 						className: "text-primary font-medium",
 						children: "Custom"
-					}) : /* @__PURE__ */ jsx(PlanPriceTag, {
+					}) : !schedule && /* @__PURE__ */ jsx(PlanPriceTag, {
 						label: priceLabel,
 						currency: plan.currency,
 						billingCadence: plan.billingCadence
@@ -1719,13 +1620,22 @@ const PlanChangeCard = ({ plan, mode, currentEntitlements, isNewerVersion, isSwi
 					children: MODE_LABEL[mode]
 				})]
 			}),
-			ramp && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-muted-foreground mb-2",
-				children: ramp
+			schedule && /* @__PURE__ */ jsx(PlanPriceSchedule, {
+				schedule,
+				currency: plan.currency,
+				billingCadence: plan.billingCadence,
+				className: "mb-2"
 			}),
-			entitlementChanges.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "space-y-1.5",
-				children: entitlementChanges.map((change) => /* @__PURE__ */ jsx(ChangeRow, { change }, `${change.kind}:${change.key}`))
+			phaseChangeGroups.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "space-y-3",
+				children: phaseChangeGroups.map((group, idx) => /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [group.phase && /* @__PURE__ */ jsx(PlanPhaseHeader, {
+						phase: group.phase,
+						currency: plan.currency,
+						billingCadence: plan.billingCadence
+					}), group.changes.map((change) => /* @__PURE__ */ jsx(ChangeRow, { change }, `${change.kind}:${change.key}`))]
+				}, group.phase?.key ?? String(idx)))
 			})
 		]
 	});

package/dist/pricing-ui.d.mts

@@ -142,6 +142,13 @@ declare const FeatureItem: ({
 }) => import("react/jsx-runtime").JSX.Element;
 //#endregion
 //#region src/pricing-ui/PlanEntitlements.d.ts
+/**
+ * A plan's entitlements, phase by phase. Multi-phase plans whose phases all
+ * resolve to the same entitlements collapse into a single list (the phases
+ * only differ in price, which the price schedule already tells); phases with
+ * genuinely different entitlements render as separate sections headed by the
+ * phase name, duration, and that phase's own price.
+ */
 declare const PlanEntitlements: ({
   phases,
   currency,
@@ -174,6 +181,52 @@ type PlanPriceLabel = {
  */
 declare const formatPlanPrice: (plan: Plan) => PlanPriceLabel;
 //#endregion
+//#region src/utils/getPlanPriceSchedule.d.ts
+type PlanPriceScheduleRow = {
+  /** Stable row key — the phase key, falling back to the phase index. */key: string; /** Left-column label, e.g. "First 3 months" / "Next 2 months" / "After that". */
+  label: string; /** The phase's own price, derived from its rate cards alone. */
+  price: PlanPriceLabel;
+};
+/**
+ * A stacked price schedule for a multi-phase plan: one row per phase, each
+ * priced from its own rate cards (e.g. "First 3 months — Free" then
+ * "After that — $750/month"). This is how an intro/ramp phase's price gets
+ * surfaced instead of only the steady-state price from {@link getPlanPrice}.
+ *
+ * Returns `undefined` when there is nothing to stack — fewer than two phases,
+ * or every phase resolving to the same price label (a free trial into a free
+ * plan, two identically-priced phases, …) — so callers fall back to the
+ * single-headline rendering.
+ */
+declare const getPlanPriceSchedule: (plan: Plan) => PlanPriceScheduleRow[] | undefined;
+//#endregion
+//#region src/pricing-ui/PlanPriceSchedule.d.ts
+/**
+ * Stacked per-phase price rows for a multi-phase plan, replacing the single
+ * headline price (which only reflects the steady-state phase): each row pairs
+ * a phase label ("First 3 months", "After that") with that phase's own price.
+ * Every row gets equal visual weight — the intro price is part of the plan's
+ * price, not a footnote.
+ *
+ * Callers derive the rows via {@link getPlanPriceSchedule} and fall back to
+ * the single-price rendering when it returns `undefined`. `size` picks the
+ * typographic treatment: `"lg"` for a card's headline area, `"sm"` for
+ * compact contexts (plan-change rows, summary cards).
+ */
+declare const PlanPriceSchedule: ({
+  schedule,
+  currency,
+  billingCadence,
+  size,
+  className
+}: {
+  schedule: PlanPriceScheduleRow[];
+  currency?: string; /** Render each priced row with the `/cadence` suffix (the plan's billing cadence). */
+  billingCadence?: string;
+  size?: "sm" | "lg";
+  className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/pricing-ui/PlanPriceTag.d.ts
 /**
  * Headline price for a plan/subscription: `$X/cadence`, "Pay as you go", or
@@ -320,6 +373,19 @@ declare const formatTieredPriceBreakdown: (opts: {
   includedLabel: string;
 }) => string[] | undefined;
 //#endregion
+//#region src/utils/getPhasePriceLabel.d.ts
+/**
+ * Headline price for a SINGLE phase, derived only from that phase's own rate
+ * cards. Mirrors {@link formatPlanPrice}'s rules, but scoped to the phase:
+ * a positive recurring flat-fee total is `priced`; otherwise a priced
+ * `usage_based` card in this phase makes it `payg`; otherwise it's `free`.
+ *
+ * Like {@link getPlanPrice}, one-time fees (`flat_fee` with
+ * `billingCadence: null`) and `price: null` rate cards contribute nothing —
+ * an intro phase whose fees all have `price: null` derives as `free`.
+ */
+declare const getPhasePriceLabel: (phase: PlanPhase) => PlanPriceLabel;
+//#endregion
 //#region src/utils/getPlanPrice.d.ts
 /**
  * The plan's headline recurring price: the sum of every recurring `flat_fee`
@@ -346,4 +412,4 @@ declare const collectDefaultTaxBehaviors: (plan: Plan) => CanonicalTaxBehavior;
 declare const taxBehaviorLegendSentence: (behavior: string) => string | undefined;
 declare const subscriptionTaxLegendSentence: (behavior: string) => string | undefined;
 //#endregion
-export { type Alignment, type BooleanEntitlementTemplate, type DynamicPrice, type EntitlementTemplate, type Feature, FeatureItem, type FlatFeeRateCard, type FlatPrice, type MeteredEntitlementTemplate, type PackagePrice, type Plan, type PlanDefaultTaxConfig, PlanEntitlements, type PlanPhase, type PlanPriceLabel, PlanPriceTag, type Price, type PriceTier, PricingCard, type PricingCardProps, PricingTable, type PricingTableProps, type ProRatingConfig, type Quota, QuotaItem, type RateCard, type StaticEntitlementTemplate, type TieredPrice, type TieredPriceBreakdownTier, type UnitPrice, type UsageBasedRateCard, type ValidationError, categorizeRateCards, collectDefaultTaxBehaviors, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPlanPrice, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPlanPrice, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };
+export { type Alignment, type BooleanEntitlementTemplate, type DynamicPrice, type EntitlementTemplate, type Feature, FeatureItem, type FlatFeeRateCard, type FlatPrice, type MeteredEntitlementTemplate, type PackagePrice, type Plan, type PlanDefaultTaxConfig, PlanEntitlements, type PlanPhase, type PlanPriceLabel, PlanPriceSchedule, type PlanPriceScheduleRow, PlanPriceTag, type Price, type PriceTier, PricingCard, type PricingCardProps, PricingTable, type PricingTableProps, type ProRatingConfig, type Quota, QuotaItem, type RateCard, type StaticEntitlementTemplate, type TieredPrice, type TieredPriceBreakdownTier, type UnitPrice, type UsageBasedRateCard, type ValidationError, categorizeRateCards, collectDefaultTaxBehaviors, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPlanPrice, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPhasePriceLabel, getPlanPrice, getPlanPriceSchedule, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };

package/dist/pricing-ui.mjs

@@ -1,2 +1,2 @@
-import { S as formatDurationInterval, _ as formatStaticEntitlementConfig, a as planHasDefaultTaxBehavior, b as formatDuration, c as formatPlanPrice, d as PlanEntitlements, g as formatTieredPriceBreakdown, h as categorizeRateCards, i as collectDefaultTaxBehaviors, l as getPlanPrice, m as FeatureItem, n as PricingCard, o as subscriptionTaxLegendSentence, p as QuotaItem, s as taxBehaviorLegendSentence, t as PricingTable, u as PlanPriceTag, v as formatMinorCurrencyAmount, x as formatDurationAdjective, y as formatPrice } from "./PricingTable-BlcXx4-5.mjs";
-export { FeatureItem, PlanEntitlements, PlanPriceTag, PricingCard, PricingTable, QuotaItem, categorizeRateCards, collectDefaultTaxBehaviors, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPlanPrice, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPlanPrice, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };
+import { C as formatStaticEntitlementConfig, D as formatDurationAdjective, E as formatDuration, O as formatDurationInterval, S as formatTieredPriceBreakdown, T as formatPrice, _ as formatPlanPrice, a as planHasDefaultTaxBehavior, c as getPlanPriceSchedule, d as PlanEntitlements, g as getPhasePriceLabel, h as FeatureItem, i as collectDefaultTaxBehaviors, l as PlanPriceTag, m as QuotaItem, n as PricingCard, o as subscriptionTaxLegendSentence, s as taxBehaviorLegendSentence, t as PricingTable, u as PlanPriceSchedule, v as getPlanPrice, w as formatMinorCurrencyAmount, x as categorizeRateCards } from "./PricingTable-WkG2n7V-.mjs";
+export { FeatureItem, PlanEntitlements, PlanPriceSchedule, PlanPriceTag, PricingCard, PricingTable, QuotaItem, categorizeRateCards, collectDefaultTaxBehaviors, formatDuration, formatDurationAdjective, formatDurationInterval, formatMinorCurrencyAmount, formatPlanPrice, formatPrice, formatStaticEntitlementConfig, formatTieredPriceBreakdown, getPhasePriceLabel, getPlanPrice, getPlanPriceSchedule, planHasDefaultTaxBehavior, subscriptionTaxLegendSentence, taxBehaviorLegendSentence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuplo/zudoku-plugin-monetization",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",