@vvedantb/ui 0.20.0 → 0.22.0

package/README.md

@@ -867,20 +867,84 @@ links under a separator.
 
 ### `PricingModal`
 
-One-plan upgrade dialog. Props: `open`, `onClose`, `title` (accessible, hidden),
-`description` (hidden; when set the title is an `sr-only` `DialogTitle`,
-otherwise it sits in `VisuallyHidden`), `logo` (`dark` and `light` image URLs,
-shown in that colour mode), `wordmark`, `price`, `tagline`,
-`taglineFontClassName`, `features`, `ctaLabel` (default "Get Pro"),
-`renderCheckout(button, period)` (wrap the button in the billing provider's checkout),
-`closeButton` (an extra compact close button, default `false`) and `tone`
-(`"muted"` default or `"muted-foreground"`).
+Upgrade dialog with two layouts. Without `plans` it is the single-plan dialog
+below. With `plans` (0.22.0) it is the wide multi-plan dialog.
+
+Shared props: `open`, `onClose`, `title` (accessible, hidden), `description`
+(hidden), `tone` (`"muted"` default or `"muted-foreground"`),
+`billingPeriod`, `onBillingPeriodChange`, `defaultBillingPeriod` (`"month"`
+default) and `renderCheckout`.
+
+#### Multi-plan (0.22.0)
+
+Header: `apps` (an `AppName[]`, shown as `AppMark` tiles at the top left),
+`headline` (centre), a Monthly / Annual switch and a close button (top right).
+Then one card per entry of `plans` (2 to 4 fit) and one `finePrint` line. Cards
+stack on narrow screens.
+
+A `PricingPlan` is `{ id, name, price: { month, year }, ctaLabel?, intro?,
+highlight?: { title, description }, benefits?: { label, icon?: "check" |
+AppName, muted? }[], current?, featured?, periodSuffix? }`. Prices are display
+strings and always per month (`periodSuffix` default `"/month"`; the yearly
+price is the per-month price). `ctaLabel` defaults to "Get started". `featured`
+(or `highlighted`) adds a subtle ring. A `current` plan shows a disabled,
+outlined "Current plan" button and does not call `renderCheckout`.
+
+The `featured` plan's button is a solid primary button (`Button` `variant="default"`). Other plans use `secondary`.
+
+`renderCheckout(button, plan, period)` wraps each plan's button.
+
+Each app passes its own plan names, prices and copy. The example and the screenshots use placeholder text only.
+
+```tsx
+<PricingModal
+  open={open}
+  onClose={close}
+  title="Plans"
+  apps={["vibot", "verve", "velth", "vmem", "vhub"]}
+  headline="One plan. Every V app."
+  finePrint="Cancel anytime. $120 billed yearly. Save 33%."
+  plans={[
+    { id: "free", name: "Free", price: { month: "$0", year: "$0" }, current: true },
+    {
+      id: "pro",
+      name: "V Pro",
+      price: { month: "$15", year: "$10" },
+      featured: true,
+      intro: "Everything in Free, and:",
+      highlight: { title: "Shared", description: "usage across every V app" },
+      benefits: [
+        { label: "Higher limits", icon: "vibot" },
+        { label: "Pro features", icon: "verve" },
+        { label: "Pro features", icon: "velth" },
+        { label: "More memory", icon: "vmem" },
+        { label: "More storage", icon: "vhub" },
+      ],
+    },
+  ]}
+  renderCheckout={(button, plan, period) => (
+    <CheckoutButton planId={plan.id} planPeriod={period}>{button}</CheckoutButton>
+  )}
+/>
+```
+
+In the example, V Pro costs $15/month, or $10/month billed yearly ($120/year,
+a 33% saving). The cards show the per-month price only, so the yearly total and
+the saving go in `finePrint`. Screenshots: `brand/pricing-modal/` (regenerate with
+`node scripts/build-pricing-screenshots.mjs`).
+
+#### Single plan
+
+Props: `logo` (`dark` and `light` image URLs, shown in that colour mode),
+`wordmark`, `price`, `tagline`, `taglineFontClassName`, `features`, `ctaLabel`
+(default "Get Pro"), `renderCheckout(button, period)` (wrap the button in the
+billing provider's checkout), `closeButton` (an extra compact close button,
+default `false`) and, when `description` is set, the title is an `sr-only`
+`DialogTitle`, otherwise it sits in `VisuallyHidden`.
 
 From 0.20.0, `yearly={{ pricePerMonth, total?, saveLabel? }}` adds a
-monthly/yearly toggle; `price` stays the monthly price. Control the period with
-`billingPeriod` and `onBillingPeriodChange`, or set the start with
-`defaultBillingPeriod` (`"month"` default). `renderCheckout` gets the selected
-`period` (`"month"` or `"year"`) as its second argument, for Clerk's
+monthly/yearly toggle; `price` stays the monthly price. `renderCheckout` gets the
+selected `period` (`"month"` or `"year"`) as its second argument, for Clerk's
 `planPeriod`. Without `yearly` the DOM is unchanged.
 
 ```tsx
@@ -894,6 +958,15 @@ monthly/yearly toggle; `price` stays the monthly price. Control the period with
 />
 ```
 
+#### Migration
+
+Single-plan callers need no change. To move to the multi-plan layout, replace
+`logo`, `wordmark`, `price`, `tagline`, `features` and `yearly` with `plans`,
+`apps` and `headline`, and change `renderCheckout` to
+`(button, plan, period)`. Type helpers: use `PricingModalLegacyProps` or
+`PricingModalMultiProps` when you need one layout's props;
+`PricingModalProps` is their union.
+
 ### Account menu items and rail collapse tile
 
 `SidebarAccountMenu` takes three optional props. Without them it renders as before.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -40,6 +40,10 @@
       "types": "./tokens/src/tailwind-preset.d.mts",
       "default": "./tokens/src/tailwind-preset.mjs"
     },
+    "./brand": {
+      "types": "./src/brand/index.ts",
+      "default": "./src/brand/index.ts"
+    },
     "./landing.css": "./src/marketing/landing.css",
     "./package.json": "./package.json"
   },
@@ -50,6 +54,7 @@
     "app/src",
     "tokens/src",
     "tokens/examples",
+    "scripts/build-brand-assets.mjs",
     "README.md",
     "LICENSE",
     "!**/*.test.ts",
@@ -66,6 +71,8 @@
     "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs app/tests-node/*.test.mjs",
     "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
     "analyze": "node tokens/verify/analyze.mjs",
+    "brand:assets": "node scripts/build-brand-assets.mjs",
+    "brand:sheet": "node scripts/build-brand-sheet.mjs",
     "prepack": "node tokens/scripts/check-exports.mjs"
   },
   "dependencies": {

package/scripts/build-brand-assets.mjs

@@ -0,0 +1,126 @@
+// Writes the favicon, PWA, extension and Android icon sets for the family apps.
+//
+//   node scripts/build-brand-assets.mjs --out <dir> [--app <name>] [--no-png] [--dry-run]
+//
+// SVGs are always written. PNGs and favicon.ico need `rsvg-convert`; without it they are skipped
+// with a message. Layout: <dir>/<app>/{mark,icon,favicon,icon-light}.svg, PNGs, extension/, android/.
+import { spawnSync } from "node:child_process";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { APP_NAMES, appAdaptiveSvg, appExtension128Svg, appMarkSvg, appTileSvg } from "../src/brand/svg.ts";
+
+/** Whether `rsvg-convert` can be run. */
+export function hasRsvg() {
+  return spawnSync("rsvg-convert", ["--version"], { stdio: "ignore" }).status === 0;
+}
+
+/** Renders `svg` to a square PNG buffer of `px` pixels. */
+export function renderPng(svg, px) {
+  const result = spawnSync("rsvg-convert", ["-w", String(px), "-h", String(px), "-f", "png"], { input: svg, maxBuffer: 64 * 1024 * 1024 });
+  if (result.status !== 0) throw new Error(`rsvg-convert failed: ${String(result.stderr)}`);
+  return result.stdout;
+}
+
+/** An ICO file that embeds each PNG (sizes in pixels, same order). */
+export function icoFromPngs(pngs, sizes) {
+  const header = Buffer.alloc(6 + 16 * pngs.length);
+  header.writeUInt16LE(1, 2);
+  header.writeUInt16LE(pngs.length, 4);
+  let offset = header.length;
+  pngs.forEach((png, i) => {
+    const at = 6 + 16 * i;
+    header.writeUInt8(sizes[i] % 256, at);
+    header.writeUInt8(sizes[i] % 256, at + 1);
+    header.writeUInt16LE(1, at + 4);
+    header.writeUInt16LE(32, at + 6);
+    header.writeUInt32LE(png.length, at + 8);
+    header.writeUInt32LE(offset, at + 12);
+    offset += png.length;
+  });
+  return Buffer.concat([header, ...pngs]);
+}
+
+/** SVG files for one app, as `[relative path, content]`. */
+export function svgFiles(app) {
+  const tile = appTileSvg(app);
+  return [
+    ["mark.svg", appMarkSvg(app)],
+    ["icon.svg", tile],
+    ["favicon.svg", tile],
+    ["icon-light.svg", appTileSvg(app, "light")],
+    ["android/adaptive-foreground.svg", appAdaptiveSvg(app, "#fff")],
+  ];
+}
+
+/** PNG files for one app, as `[relative path, svg source, pixels]`. */
+export function pngSpecs(app) {
+  const tile = appTileSvg(app);
+  const square = appTileSvg(app, "dark", 0);
+  return [
+    ["favicon-16.png", tile, 16],
+    ["favicon-32.png", tile, 32],
+    ["apple-touch-icon.png", square, 180],
+    ["icon-192.png", tile, 192],
+    ["icon-512.png", tile, 512],
+    ["icon-1024.png", tile, 1024],
+    ["icon-light.png", appTileSvg(app, "light"), 512],
+    ["maskable-512.png", square, 512],
+    ["extension/icon-16.png", tile, 16],
+    ["extension/icon-32.png", tile, 32],
+    ["extension/icon-48.png", tile, 48],
+    ["extension/icon-128.png", appExtension128Svg(app), 128],
+    ["android/adaptive-foreground-432.png", appAdaptiveSvg(app, "#fff"), 432],
+    ["android/adaptive-monochrome-432.png", appAdaptiveSvg(app, "#000"), 432],
+  ];
+}
+
+/** Writes (or, with `dryRun`, lists) the set for each app. Returns the relative file paths per app and any skip notes. */
+export function buildBrandAssets({ out, apps = APP_NAMES, png = true, dryRun = false }) {
+  const written = [];
+  const notes = [];
+  const withPng = png && hasRsvg();
+  if (png && !withPng) notes.push("rsvg-convert not found: PNGs and favicon.ico skipped (SVGs written).");
+  const put = (file, data) => {
+    written.push(file);
+    if (dryRun) return;
+    mkdirSync(dirname(join(out, file)), { recursive: true });
+    writeFileSync(join(out, file), data);
+  };
+  for (const app of apps) {
+    for (const [name, svg] of svgFiles(app)) put(join(app, name), svg);
+    if (!withPng) continue;
+    for (const [name, svg, px] of pngSpecs(app)) put(join(app, name), dryRun ? "" : renderPng(svg, px));
+    const sizes = [16, 32, 48];
+    const tile = appTileSvg(app);
+    put(join(app, "favicon.ico"), dryRun ? "" : icoFromPngs(sizes.map((px) => renderPng(tile, px)), sizes));
+  }
+  return { written, notes };
+}
+
+function parseArgs(argv) {
+  const args = { out: "", app: "", png: true, dryRun: false };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--out") args.out = argv[++i] ?? "";
+    else if (arg === "--app") args.app = argv[++i] ?? "";
+    else if (arg === "--no-png") args.png = false;
+    else if (arg === "--dry-run") args.dryRun = true;
+    else throw new Error(`unknown argument: ${arg}`);
+  }
+  if (!args.out) throw new Error("--out <dir> is required");
+  if (args.app && !APP_NAMES.includes(args.app)) throw new Error(`--app must be one of ${APP_NAMES.join(", ")}`);
+  return args;
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  try {
+    const args = parseArgs(process.argv.slice(2));
+    const { written, notes } = buildBrandAssets({ out: args.out, apps: args.app ? [args.app] : APP_NAMES, png: args.png, dryRun: args.dryRun });
+    for (const file of written) console.log(`${args.dryRun ? "would write" : "wrote"} ${join(args.out, file)}`);
+    for (const note of notes) console.warn(note);
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+}

package/src/brand/AppMark.tsx

@@ -0,0 +1,55 @@
+import { useId, type SVGProps } from "react";
+import { APP_MARKS, MARK_VIEWBOX, TILE_RADIUS, markLinecap, markStrokeWidth, type AppMarkVariant, type AppName } from "./svg";
+
+export type AppMarkProps = Omit<SVGProps<SVGSVGElement>, "children" | "height" | "width" | "viewBox"> & {
+  /** Which family app's mark to draw. */
+  app: AppName;
+  /** `"mark"` (default): glyph in `currentColor`. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
+  variant?: AppMarkVariant;
+  /** Width and height. Default 24. */
+  size?: number | string;
+  /** Accessible name. Without it the mark is `aria-hidden`. */
+  title?: string;
+};
+
+const TILE_TONES = {
+  tile: { bg: "#000", fg: "#fff" },
+  "tile-light": { bg: "#fff", fg: "#000" },
+} as const;
+
+/** One of the six family app marks on the 1024 grid. */
+export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: AppMarkProps) {
+  const titleId = useId();
+  const { kind, paths } = APP_MARKS[app];
+  const tone = variant === "mark" ? undefined : TILE_TONES[variant];
+  const color = tone?.fg ?? "currentColor";
+  const glyphProps =
+    kind === "fill"
+      ? { fill: color }
+      : { fill: "none", stroke: color, strokeWidth: markStrokeWidth(app), strokeLinecap: markLinecap(app), strokeLinejoin: "round" };
+  const glyph = (
+    <g {...(glyphProps as SVGProps<SVGGElement>)} data-glyph={app}>
+      {paths.map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </g>
+  );
+  return (
+    <svg
+      {...rest}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox={MARK_VIEWBOX}
+      data-app={app}
+      data-variant={variant}
+      role={title ? "img" : undefined}
+      aria-hidden={title ? undefined : true}
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      {tone ? <rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} /> : null}
+      {glyph}
+    </svg>
+  );
+}

package/src/brand/index.ts

@@ -0,0 +1,16 @@
+export { AppMark } from "./AppMark";
+export type { AppMarkProps } from "./AppMark";
+export {
+  APP_MARKS,
+  APP_MARK_SVG,
+  APP_NAMES,
+  APP_TILE_LIGHT_SVG,
+  APP_TILE_SVG,
+  appAdaptiveSvg,
+  appExtension128Svg,
+  appMarkSvg,
+  appTileSvg,
+  markLinecap,
+  markStrokeWidth,
+} from "./svg";
+export type { AppMarkVariant, AppName, MarkShape } from "./svg";

package/src/brand/svg.ts

@@ -0,0 +1,119 @@
+// Geometry and raw SVG strings for the family app marks. No imports, so the
+// asset script can load this file directly with Node.
+
+export const APP_NAMES = ["projectv", "vibot", "vhub", "vmem", "verve", "velth"] as const;
+
+export type AppName = (typeof APP_NAMES)[number];
+
+/** `mark`: glyph only, follows `currentColor`. `tile`: white glyph on a black tile. `tile-light`: black glyph on a white tile. */
+export type AppMarkVariant = "mark" | "tile" | "tile-light";
+
+export const MARK_VIEWBOX = "0 0 1024 1024";
+export const MARK_STROKE_WIDTH = 50;
+export const TILE_RADIUS = 224;
+
+export type MarkShape = {
+  /** Filled shapes (no stroke) versus lines (50 wide, round caps by default). */
+  kind: "fill" | "stroke";
+  /** Path data on the 1024 grid. */
+  paths: readonly string[];
+  /** Stroke width override on the 1024 grid. Defaults to `MARK_STROKE_WIDTH`. */
+  strokeWidth?: number;
+  /** Line cap override. Defaults to `"round"`. */
+  linecap?: "butt" | "round";
+};
+
+/** Stroke width of a mark on the 1024 grid. */
+export function markStrokeWidth(app: AppName): number {
+  return APP_MARKS[app].strokeWidth ?? MARK_STROKE_WIDTH;
+}
+
+/** Line cap of a mark. */
+export function markLinecap(app: AppName): "butt" | "round" {
+  return APP_MARKS[app].linecap ?? "round";
+}
+
+/**
+ * Glyphs sized by one rule: longest side = 512 * min(1.2, aspect^0.25), centred halfway between
+ * the bounding-box centre and the centre of mass. `verve` and `velth` are the final vectors.
+ * The others are traced from the approved 1024px renders.
+ */
+export const APP_MARKS: Record<AppName, MarkShape> = {
+  projectv: {
+    kind: "fill",
+    paths: ["M172 398L260 397L418 558L580 377L858 378L824 415L604 415L452 598L466 611L622 433L808 433L773 471L658 471L491 671L442 672Z"],
+  },
+  vibot: {
+    kind: "fill",
+    paths: [
+      "M295 314L396 314L396 574C520 540 620 440 655 314L711 314C680 470 560 590 396 627L390 627L390 651L396 651C560 610 700 480 734 314L789 314C740 540 560 712 295 712Z",
+    ],
+  },
+  vhub: {
+    kind: "stroke",
+    paths: ["M211 512L743 512", "M415 512C500 512 540 363 743 363", "M415 512C500 512 540 661 743 661"],
+  },
+  vmem: {
+    kind: "stroke",
+    strokeWidth: 58,
+    linecap: "butt",
+    paths: [
+      "M693.2 379.5A227.25 227.25 0 0 1 581.0 732.7",
+      "M442.5 732.7A227.25 227.25 0 0 1 330.9 378.7",
+      "M397.3 319.9A227.25 227.25 0 0 1 627.1 320.4",
+    ],
+  },
+  verve: {
+    kind: "stroke",
+    paths: [
+      "M285.4 344.1Q428.6 344.1 512 552.6Q595.4 344.1 738.6 344.1",
+      "M285.4 344.1L285.4 579.8Q428.6 579.8 512 706.7Q595.4 579.8 738.6 579.8L738.6 344.1",
+    ],
+  },
+  velth: {
+    kind: "stroke",
+    paths: [
+      "M512 732.3C379.8 652.1 289.7 471.9 299.7 301.6C419.9 371.7 500 552 512 732.3Z",
+      "M512 732.3C644.2 652.1 734.3 471.9 724.3 301.6C604.1 371.7 524 552 512 732.3Z",
+    ],
+  },
+};
+
+const NS = 'xmlns="http://www.w3.org/2000/svg"';
+
+/** Attributes that paint the glyph in `color`. */
+export function markPaintAttrs(app: AppName, color: string): string {
+  return APP_MARKS[app].kind === "fill" ? `fill="${color}"` : `fill="none" stroke="${color}" stroke-width="${markStrokeWidth(app)}" stroke-linecap="${markLinecap(app)}" stroke-linejoin="round"`;
+}
+
+function pathElements(app: AppName): string {
+  return APP_MARKS[app].paths.map((d) => `<path d="${d}"/>`).join("");
+}
+
+/** Glyph only, painted with `color` (default `currentColor`). */
+export function appMarkSvg(app: AppName, color = "currentColor"): string {
+  return `<svg ${NS} viewBox="${MARK_VIEWBOX}" ${markPaintAttrs(app, color)}>${pathElements(app)}</svg>\n`;
+}
+
+/** Tile with a glyph. `radius` 0 gives a full-bleed square (apple-touch, maskable). */
+export function appTileSvg(app: AppName, tone: "dark" | "light" = "dark", radius = TILE_RADIUS): string {
+  const [bg, fg] = tone === "dark" ? ["#000", "#fff"] : ["#fff", "#000"];
+  const rx = radius > 0 ? ` rx="${radius}"` : "";
+  return `<svg ${NS} viewBox="${MARK_VIEWBOX}"><rect width="1024" height="1024"${rx} fill="${bg}"/><g ${markPaintAttrs(app, fg)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Android adaptive-icon layer: 432 canvas, glyph scaled into the 288 inner square. */
+export function appAdaptiveSvg(app: AppName, color: string): string {
+  const scale = 288 / 1024;
+  return `<svg ${NS} viewBox="0 0 432 432"><g transform="translate(216 216) scale(${scale}) translate(-512 -512)" ${markPaintAttrs(app, color)}>${pathElements(app)}</g></svg>\n`;
+}
+
+/** Chrome extension 128px icon: 96px tile plus 16px transparent padding. */
+export function appExtension128Svg(app: AppName): string {
+  const inner = appTileSvg(app).replace(`<svg ${NS} viewBox="${MARK_VIEWBOX}">`, `<svg ${NS} x="16" y="16" width="96" height="96" viewBox="${MARK_VIEWBOX}">`);
+  return `<svg ${NS} viewBox="0 0 128 128">${inner.trim()}</svg>\n`;
+}
+
+export const APP_MARK_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appMarkSvg(app)])) as Record<AppName, string>;
+export const APP_TILE_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appTileSvg(app)])) as Record<AppName, string>;
+export const APP_TILE_LIGHT_SVG = Object.fromEntries(APP_NAMES.map((app) => [app, appTileSvg(app, "light")])) as Record<AppName, string>;

package/src/index.ts

@@ -143,7 +143,7 @@ export * from "./ai-elements/sources";
 export * from "./ai-elements/speech-input";
 export * from "./ai-elements/suggestion";
 
-// Agent activity and run surfaces (moved from eva): the activity timeline and
+// Agent activity and run surfaces (moved from an app): the activity timeline and
 // its step model, Trace lines, plan, test results, web preview, context usage
 // and the model picker.
 export * from "./ai-elements/activity-shared";
@@ -289,11 +289,21 @@ export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-
 export { SiteFooter } from "./marketing/SiteFooter";
 export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
 export { PricingModal } from "./marketing/PricingModal";
-export type { PricingModalPeriod, PricingModalProps } from "./marketing/PricingModal";
+export type {
+  PricingModalLegacyProps,
+  PricingModalMultiProps,
+  PricingModalPeriod,
+  PricingModalProps,
+  PricingPlan,
+  PricingPlanBenefit,
+} from "./marketing/PricingModal";
 
 // App helpers: confirm skip, update watcher, settings chrome, stable auth, Convex provider, VITE env and ensure-user.
 export * from "../app/src/index";
 
+// Family app marks (AppMark and raw SVG strings for favicons).
+export * from "./brand";
+
 // Native tokens (JS values that match tokens.css).
 export { tokens } from "../tokens/src/native";
 export type { Tokens } from "../tokens/src/native";

package/src/marketing/PricingModal.tsx

@@ -1,13 +1,17 @@
-import { useState, type ReactElement, type ReactNode } from "react";
+import { useRef, useState, type ReactElement, type ReactNode } from "react";
 import { IconCheck, IconX } from "@tabler/icons-react";
+import { AppMark } from "../brand/AppMark";
+import type { AppName } from "../brand/svg";
 import { Button } from "../ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
 import { VisuallyHidden } from "../ui/visually-hidden";
-import { pricingModalClasses, type PricingModalTone } from "./marketing-classes";
+import { pricingModalClasses, pricingMultiClasses, type PricingModalTone } from "./marketing-classes";
 
 export type PricingModalPeriod = "month" | "year";
 
-export type PricingModalProps = {
+export type PricingModalLegacyProps = {
+  /** Absent in the single-plan layout. Set `plans` for the multi-plan layout. */
+  plans?: undefined;
   open: boolean;
   /** Called when the dialog asks to close and by the `closeButton`. */
   onClose: () => void;
@@ -51,8 +55,67 @@ export type PricingModalProps = {
   tone?: PricingModalTone;
 };
 
-/** Single-plan upgrade dialog: brand header with price and tagline, checkout button and feature list. */
-export function PricingModal({
+export type PricingPlanBenefit = {
+  label: ReactNode;
+  /** `"check"` (default) or an app mark. */
+  icon?: "check" | AppName;
+  /** Dimmed row. */
+  muted?: boolean;
+};
+
+export type PricingPlan = {
+  id: string;
+  name: string;
+  /** Display strings per month, for example `{ month: "$10", year: "$8" }`. The yearly price is still per month. */
+  price: { month: string; year: string };
+  /** Default "Get started". */
+  ctaLabel?: string;
+  /** Line above the highlight, for example "Everything in Free, and:". */
+  intro?: ReactNode;
+  /** Large title with small text under it. */
+  highlight?: { title: string; description: string };
+  benefits?: readonly PricingPlanBenefit[];
+  /** The plan the user is on: the button reads "Current plan" and is disabled. */
+  current?: boolean;
+  /** Subtle ring on the card. `highlighted` is an alias. */
+  featured?: boolean;
+  highlighted?: boolean;
+  /** Text after the price. Default "/month". */
+  periodSuffix?: string;
+};
+
+export type PricingModalMultiProps = {
+  open: boolean;
+  onClose: () => void;
+  /** Accessible dialog title. Not visible. */
+  title: string;
+  /** Accessible description. Not visible. */
+  description?: string;
+  /** Cards, left to right. Sized for 1 to 4. */
+  plans: readonly PricingPlan[];
+  /** App marks at the top left. */
+  apps?: readonly AppName[];
+  /** Centred headline, for example "One plan. Every V app." */
+  headline?: ReactNode;
+  /** Small print under the cards. */
+  finePrint?: ReactNode;
+  billingPeriod?: PricingModalPeriod;
+  onBillingPeriodChange?: (period: PricingModalPeriod) => void;
+  /** Default `"month"`. */
+  defaultBillingPeriod?: PricingModalPeriod;
+  /** Wraps each plan's button, for example in the billing provider's checkout. Not called for the `current` plan. */
+  renderCheckout: (button: ReactElement, plan: PricingPlan, period: PricingModalPeriod) => ReactNode;
+  tone?: PricingModalTone;
+};
+
+export type PricingModalProps = PricingModalLegacyProps | PricingModalMultiProps;
+
+/** Upgrade dialog. With `plans`: wide multi-plan layout. Without: the single-plan layout. */
+export function PricingModal(props: PricingModalProps) {
+  return props.plans ? <PricingModalMulti {...props} /> : <PricingModalSingle {...props} />;
+}
+
+function PricingModalSingle({
   open,
   onClose,
   title,
@@ -71,7 +134,7 @@ export function PricingModal({
   renderCheckout,
   closeButton = false,
   tone = "muted",
-}: PricingModalProps) {
+}: PricingModalLegacyProps) {
   const c = pricingModalClasses[tone];
   const [localPeriod, setLocalPeriod] = useState<PricingModalPeriod>(defaultBillingPeriod);
   const period: PricingModalPeriod = yearly ? (billingPeriod ?? localPeriod) : "month";
@@ -174,3 +237,163 @@ export function PricingModal({
     </Dialog>
   );
 }
+
+const multiWidth = {
+  1: "sm:max-w-md",
+  2: "sm:max-w-3xl",
+  3: "sm:max-w-5xl",
+  4: "sm:max-w-6xl",
+} as const;
+
+const multiColumns = {
+  1: "",
+  2: "sm:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+} as const;
+
+function PricingModalMulti({
+  open,
+  onClose,
+  title,
+  description,
+  plans,
+  apps,
+  headline,
+  finePrint,
+  billingPeriod,
+  onBillingPeriodChange,
+  defaultBillingPeriod = "month",
+  renderCheckout,
+  tone = "muted",
+}: PricingModalMultiProps) {
+  const c = pricingMultiClasses[tone];
+  const [localPeriod, setLocalPeriod] = useState<PricingModalPeriod>(defaultBillingPeriod);
+  const period = billingPeriod ?? localPeriod;
+  const selectPeriod = (next: PricingModalPeriod) => {
+    setLocalPeriod(next);
+    onBillingPeriodChange?.(next);
+  };
+  const contentRef = useRef<HTMLDivElement>(null);
+  const count = Math.min(Math.max(plans.length, 1), 4) as 1 | 2 | 3 | 4;
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent
+        ref={contentRef}
+        hideCloseButton
+        // Focus the dialog, not the first segment button, so no ring shows on open.
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          contentRef.current?.focus();
+        }}
+        className={`max-h-[calc(100dvh-2rem)] gap-0 overflow-y-auto p-0 font-sans sm:w-[calc(100vw-2rem)] ${multiWidth[count]}`}
+      >
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        {description ? <DialogDescription className="sr-only">{description}</DialogDescription> : null}
+
+        <div className="grid grid-cols-[1fr_auto] items-center gap-x-4 gap-y-3 px-4 pb-4 pt-5 sm:grid-cols-[1fr_auto_1fr] sm:px-6">
+          <div className="flex items-center gap-2 text-foreground" data-testid="pricing-apps">
+            {apps?.map((app) => <AppMark key={app} app={app} variant="tile" size={24} className="rounded-md" />)}
+          </div>
+          <div className="flex items-center justify-end gap-2 sm:order-last">
+            <div role="group" aria-label="Billing period" className="inline-flex rounded-full bg-surface-tertiary p-0.5">
+              {(["month", "year"] as const).map((value) => (
+                <button
+                  key={value}
+                  type="button"
+                  aria-pressed={period === value}
+                  onClick={() => selectPeriod(value)}
+                  className={`rounded-full px-3 py-1 text-xs font-medium transition-colors duration-150 motion-reduce:transition-none ${
+                    period === value ? "bg-segment text-segment-foreground" : `${c.switchIdle} hover:text-foreground`
+                  }`}
+                >
+                  {value === "month" ? "Monthly" : "Annual"}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex size-8 items-center justify-center rounded-full text-muted-foreground transition-[background-color,transform] duration-100 ease-out hover:bg-surface-tertiary hover:text-foreground active:scale-[0.96] motion-reduce:transition-none"
+            >
+              <IconX className="size-4" />
+              <span className="sr-only">Close</span>
+            </button>
+          </div>
+          {headline ? (
+            <p className="col-span-2 text-balance text-center text-xl font-medium tracking-tight text-foreground sm:order-none sm:col-span-1 sm:text-2xl">
+              {headline}
+            </p>
+          ) : (
+            <span className="hidden sm:block" />
+          )}
+        </div>
+
+        <div className={`grid grid-cols-1 gap-3 px-4 sm:px-6 ${multiColumns[count]}`}>
+          {plans.map((plan) => {
+            const emphasised = plan.featured ?? plan.highlighted;
+            const button = (
+              <Button
+                size="lg"
+                variant={plan.current ? "outline" : emphasised ? "default" : "secondary"}
+                disabled={plan.current}
+                className="h-12 w-full rounded-full"
+              >
+                {plan.current ? "Current plan" : (plan.ctaLabel ?? "Get started")}
+              </Button>
+            );
+            return (
+              <section
+                key={plan.id}
+                data-plan={plan.id}
+                aria-label={plan.name}
+                className={`flex flex-col rounded-3xl bg-surface-secondary p-5 ${
+                  emphasised ? "ring-1 ring-foreground/25" : "ring-1 ring-separator"
+                }`}
+              >
+                <h3 className="text-base text-foreground">{plan.name}</h3>
+                <p className="mt-4 flex items-baseline gap-1">
+                  <span className="text-5xl font-medium tabular-nums leading-none tracking-tight text-foreground">
+                    {plan.price[period]}
+                  </span>
+                  <span className={c.suffix}>{plan.periodSuffix ?? "/month"}</span>
+                </p>
+                <div className="mt-5">{plan.current ? button : renderCheckout(button, plan, period)}</div>
+                {plan.intro ? <p className={`mt-6 text-sm ${c.suffix}`}>{plan.intro}</p> : null}
+                {plan.highlight ? (
+                  <div className="mt-3">
+                    <p className="text-2xl font-medium leading-tight text-foreground">{plan.highlight.title}</p>
+                    <p className="text-sm text-foreground">{plan.highlight.description}</p>
+                  </div>
+                ) : null}
+                {plan.benefits?.length ? (
+                  <ul className="mt-5 space-y-2.5 border-t border-separator pt-4">
+                    {plan.benefits.map((benefit, index) => (
+                      <li
+                        key={index}
+                        className={`flex items-start gap-2.5 text-sm leading-snug ${
+                          benefit.muted ? c.suffix : "text-foreground"
+                        }`}
+                      >
+                        <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
+                          {benefit.icon && benefit.icon !== "check" ? (
+                            <AppMark app={benefit.icon} size={16} />
+                          ) : (
+                            <IconCheck className="size-4" strokeWidth={2} />
+                          )}
+                        </span>
+                        <span>{benefit.label}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </section>
+            );
+          })}
+        </div>
+
+        {finePrint ? <p className={`px-4 pb-5 pt-4 text-xs sm:px-6 ${c.suffix}`}>{finePrint}</p> : <div className="pb-4" />}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/marketing/marketing-classes.ts

@@ -113,3 +113,15 @@ export const pricingModalClasses = {
 } as const;
 
 export type PricingModalTone = keyof typeof pricingModalClasses;
+
+/** Multi-plan `PricingModal` secondary text classes for the two tones. */
+export const pricingMultiClasses = {
+  muted: {
+    suffix: "text-muted", // check-tokens-allow: text-muted
+    switchIdle: "text-muted", // check-tokens-allow: text-muted
+  },
+  "muted-foreground": {
+    suffix: "text-muted-foreground",
+    switchIdle: "text-muted-foreground",
+  },
+} as const;