@vvedantb/ui 0.20.0 → 0.23.0

package/README.md

@@ -4,7 +4,7 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
@@ -179,6 +179,17 @@ function MentionComposer({ draft, setDraft, send }: Props) {
 
 Fixture: `composer/examples/` (see its README). It has a `tokens.css` page and a `compat-shadcn-rgb.css` page, each with light and dark.
 
+## Sidebar upgrade card
+
+```tsx
+import { SidebarUpgradeCard } from "@vvedantb/ui";
+
+{!isPro && <SidebarUpgradeCard onUpgrade={() => setPricingOpen(true)} />}
+{!isPro && <SidebarUpgradeCard collapsed onUpgrade={() => setPricingOpen(true)} />}
+```
+
+Shows the Project V mark, "Upgrade to Pro" and an "Upgrade" pill. `collapsed` renders an icon-only round button labelled "Upgrade to Pro" for narrow rails. The card does not check the plan, so the app hides it for Pro users.
+
 ## Sessions hover card
 
 ```tsx
@@ -865,22 +876,104 @@ links under a separator.
 | `legalLinks` | `{ href, label }[]`, open in a new tab. |
 | `variant` | `"muted"` (default, `text-muted`), `"muted-foreground"`, or `"touch"` (`text-muted-foreground`, `max-sm:hit-target` links, safe-area bottom padding). |
 
+### `AppMark`
+
+Family app icons: `app` (`projectv`, `vibot`, `vhub`, `vmem`, `verve`, `velth`),
+`variant`, `size`, `title`.
+
+- `variant="mark"` (default) is the plain logo in `currentColor`. It is cropped
+  tight to the glyph (stroke marks include half the stroke width) with no
+  padding. `size` is the rendered height; the width follows the glyph's aspect
+  ratio, so it sits level with a wordmark. A string `size` (for example `"2rem"`)
+  sets both width and height to that value. `APP_MARK_VIEWBOX` holds the tight
+  viewBox per app; `appMarkSvg()` and `APP_MARK_SVG` use it.
+- `variant="tile"` and `"tile-light"` keep the equalised, padded 1024 grid on a
+  rounded tile, always square. `appTileSvg`, `appAdaptiveSvg`, `appExtension128Svg`,
+  `APP_TILE_SVG`, `APP_TILE_LIGHT_SVG` and favicons are unchanged.
+
+Use tiles only where the app shows on its background (app and store icons,
+favicons). Use the plain mark wherever the logo has no background.
+
 ### `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 plain `AppMark` logos, no tile, 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 +987,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.23.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/shell/src/SidebarUpgradeCard.tsx

@@ -0,0 +1,52 @@
+import { AppMark } from "../../src/brand/AppMark";
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+
+export type SidebarUpgradeCardProps = {
+  /** Opens the app's `PricingModal`. */
+  onUpgrade: () => void;
+  /** Narrow rail: an icon-only "Upgrade to Pro" button instead of the full card. Default `false`. */
+  collapsed?: boolean;
+  className?: string;
+};
+
+const pillClass = "bg-foreground text-background hover:bg-foreground/85";
+
+/**
+ * Upgrade prompt for the sidebar: Project V mark, "Upgrade to Pro" and an "Upgrade" pill. It does not check
+ * the plan; the app hides it when the user is already on Pro. The mark uses a numeric `size` (its height) so
+ * the width follows the aspect ratio.
+ */
+export function SidebarUpgradeCard({ onUpgrade, collapsed = false, className }: SidebarUpgradeCardProps) {
+  if (collapsed) {
+    return (
+      <Button
+        type="button"
+        size="icon"
+        aria-label="Upgrade to Pro"
+        title="Upgrade to Pro"
+        onClick={onUpgrade}
+        className={cn("rounded-full", pillClass, className)}
+      >
+        <AppMark app="projectv" size={16} />
+      </Button>
+    );
+  }
+  return (
+    <div
+      data-slot="sidebar-upgrade-card"
+      className={cn(
+        "flex items-center justify-between gap-3 rounded-2xl bg-surface-secondary px-3 py-2.5 text-foreground",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2 text-sm font-semibold">
+        <AppMark app="projectv" size={14} className="shrink-0" />
+        <span className="truncate">Upgrade to Pro</span>
+      </div>
+      <Button type="button" size="sm" onClick={onUpgrade} className={cn("shrink-0 rounded-full", pillClass)}>
+        Upgrade
+      </Button>
+    </div>
+  );
+}

package/shell/src/index.ts

@@ -1,5 +1,7 @@
 export { SidebarHeader } from "./SidebarHeader.js";
 export type { SidebarHeaderProps } from "./SidebarHeader.js";
+export { SidebarUpgradeCard } from "./SidebarUpgradeCard.js";
+export type { SidebarUpgradeCardProps } from "./SidebarUpgradeCard.js";
 export { PillTabs } from "./PillTabs.js";
 export type { PillTabItem, PillTabsProps } from "./PillTabs.js";
 export { cn } from "./cn.js";

package/src/brand/AppMark.tsx

@@ -0,0 +1,62 @@
+import { useId, type SVGProps } from "react";
+import { APP_MARKS, APP_MARK_VIEWBOX, MARK_VIEWBOX, TILE_RADIUS, markAspect, 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): plain logo in `currentColor`, cropped tight to the glyph with no padding. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
+  variant?: AppMarkVariant;
+  /**
+   * Default 24. For `"mark"` it sets the rendered height and the width follows the glyph's aspect ratio
+   * (a number gives an exact width; a string sets both to the same value and the glyph is centred).
+   * Tiles are always square, `size` by `size`.
+   */
+  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. The plain mark is cropped tight; tiles use the padded 1024 grid. */
+export function AppMark({ app, variant = "mark", size = 24, title, ...rest }: AppMarkProps) {
+  const titleId = useId();
+  const { kind, paths } = APP_MARKS[app];
+  const isMark = variant === "mark";
+  const width = isMark && typeof size === "number" ? Math.round(size * markAspect(app) * 100) / 100 : size;
+  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={width}
+      height={size}
+      viewBox={isMark ? APP_MARK_VIEWBOX[app] : MARK_VIEWBOX}
+      preserveAspectRatio="xMidYMid meet"
+      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,20 @@
+export { AppMark } from "./AppMark";
+export type { AppMarkProps } from "./AppMark";
+export {
+  APP_MARKS,
+  APP_MARK_VIEWBOX,
+  APP_MARK_SVG,
+  APP_NAMES,
+  APP_TILE_LIGHT_SVG,
+  APP_TILE_SVG,
+  appAdaptiveSvg,
+  appExtension128Svg,
+  appMarkSvg,
+  appTileSvg,
+  markAspect,
+  markBBox,
+  markLinecap,
+  markStrokeWidth,
+  pathBBox,
+} from "./svg";
+export type { AppMarkVariant, AppName, MarkShape } from "./svg";

package/src/brand/svg.ts

@@ -0,0 +1,234 @@
+// 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, cropped tight, 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",
+    ],
+  },
+};
+
+type Point = [number, number];
+type Box = [minX: number, minY: number, maxX: number, maxY: number];
+
+/** Roots in (0, 1) of the derivative of a Bezier with 1D control values `v` (quadratic or cubic). */
+function bezierExtrema(v: number[]): number[] {
+  const roots: number[] = [];
+  if (v.length === 3) {
+    const d = v[0]! - 2 * v[1]! + v[2]!;
+    if (d !== 0) roots.push((v[0]! - v[1]!) / d);
+  } else {
+    const a = -v[0]! + 3 * v[1]! - 3 * v[2]! + v[3]!;
+    const b = 2 * (v[0]! - 2 * v[1]! + v[2]!);
+    const c = v[1]! - v[0]!;
+    if (Math.abs(a) < 1e-12) {
+      if (b !== 0) roots.push(-c / b);
+    } else {
+      const disc = b * b - 4 * a * c;
+      if (disc >= 0) roots.push((-b + Math.sqrt(disc)) / (2 * a), (-b - Math.sqrt(disc)) / (2 * a));
+    }
+  }
+  return roots.filter((t) => t > 0 && t < 1);
+}
+
+function bezierAt(v: number[], t: number): number {
+  const u = 1 - t;
+  const [p0, p1, p2, p3] = v as [number, number, number, number];
+  return v.length === 3 ? u * u * p0 + 2 * u * t * p1 + t * t * p2 : u ** 3 * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t ** 3 * p3;
+}
+
+/** Extreme points of an SVG elliptical arc (endpoint form, no rotation), including both ends. */
+function arcPoints(from: Point, [rx0, ry0, , large, sweep, x, y]: [number, number, number, number, number, number, number]): Point[] {
+  const [x0, y0] = from;
+  let rx = Math.abs(rx0);
+  let ry = Math.abs(ry0);
+  const dx = (x0 - x) / 2;
+  const dy = (y0 - y) / 2;
+  const lambda = (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const num = rx * rx * ry * ry - rx * rx * dy * dy - ry * ry * dx * dx;
+  const den = rx * rx * dy * dy + ry * ry * dx * dx;
+  const k = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, num / den));
+  const cx = k * ((rx * dy) / ry) + (x0 + x) / 2;
+  const cy = k * (-(ry * dx) / rx) + (y0 + y) / 2;
+  const a0 = Math.atan2((y0 - cy) / ry, (x0 - cx) / rx);
+  let delta = Math.atan2((y - cy) / ry, (x - cx) / rx) - a0;
+  if (sweep && delta < 0) delta += 2 * Math.PI;
+  if (!sweep && delta > 0) delta -= 2 * Math.PI;
+  const points: Point[] = [from, [x, y]];
+  for (let q = -6; q <= 6; q++) {
+    const a = (q * Math.PI) / 2;
+    const t = (a - a0) / delta;
+    if (t > 0 && t < 1) points.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+  }
+  return points;
+}
+
+/** Exact bounding box of absolute `M`, `L`, `Q`, `C` and `A` path data (the only commands the marks use). Returns [minX, minY, maxX, maxY]. */
+export function pathBBox(d: string): Box {
+  const tokens = d.match(/[MLQCA]|-?\d*\.?\d+(?:e-?\d+)?/g) ?? [];
+  const points: Point[] = [];
+  let cmd = "";
+  let cur: Point = [0, 0];
+  const argc: Record<string, number> = { M: 2, L: 2, Q: 4, C: 6, A: 7 };
+  for (let i = 0; i < tokens.length; ) {
+    if (/[A-Z]/.test(tokens[i]!)) cmd = tokens[i++]!;
+    const n = argc[cmd];
+    if (!n) throw new Error(`Unsupported path command: ${cmd}`);
+    const a = tokens.slice(i, i + n).map(Number);
+    i += n;
+    const end: Point = [a[n - 2]!, a[n - 1]!];
+    if (cmd === "Q" || cmd === "C") {
+      const xs = [cur[0], ...a.filter((_, j) => j % 2 === 0)];
+      const ys = [cur[1], ...a.filter((_, j) => j % 2 === 1)];
+      for (const t of new Set([...bezierExtrema(xs), ...bezierExtrema(ys)])) points.push([bezierAt(xs, t), bezierAt(ys, t)]);
+    } else if (cmd === "A") {
+      points.push(...arcPoints(cur, a as Parameters<typeof arcPoints>[1]));
+    }
+    points.push(end);
+    cur = end;
+  }
+  return [Math.min(...points.map((p) => p[0])), Math.min(...points.map((p) => p[1])), Math.max(...points.map((p) => p[0])), Math.max(...points.map((p) => p[1]))];
+}
+
+/** Tight box of a mark: union of its paths, grown by half the stroke width for stroke marks. Returns [minX, minY, maxX, maxY]. */
+export function markBBox(app: AppName): Box {
+  const { kind, paths } = APP_MARKS[app];
+  const boxes = paths.map(pathBBox);
+  const pad = kind === "stroke" ? markStrokeWidth(app) / 2 : 0;
+  return [Math.min(...boxes.map((b) => b[0])) - pad, Math.min(...boxes.map((b) => b[1])) - pad, Math.max(...boxes.map((b) => b[2])) + pad, Math.max(...boxes.map((b) => b[3])) + pad];
+}
+
+
+/**
+ * Tight viewBox per app (`minX minY width height` on the 1024 grid): the glyph box grown by half the
+ * stroke width for stroke marks, rounded outward to whole units. Checked against `markBBox` in tests.
+ * Used by the plain logo (`variant="mark"`, `appMarkSvg`). Tiles keep `MARK_VIEWBOX`.
+ */
+export const APP_MARK_VIEWBOX: Record<AppName, string> = {
+  projectv: "172 377 686 295",
+  vibot: "295 314 494 398",
+  vhub: "186 338 582 348",
+  vmem: "255 259 513 503",
+  verve: "260 319 504 413",
+  velth: "273 276 478 482",
+};
+
+/** Width over height of a mark's tight viewBox. */
+export function markAspect(app: AppName): number {
+  const [, , w = 1, h = 1] = APP_MARK_VIEWBOX[app].split(" ").map(Number);
+  return w / h;
+}
+
+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, cropped tight with no padding, painted with `color` (default `currentColor`). */
+export function appMarkSvg(app: AppName, color = "currentColor"): string {
+  return `<svg ${NS} viewBox="${APP_MARK_VIEWBOX[app]}" ${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";
@@ -181,6 +181,8 @@ export { toast } from "sonner";
 // use the root `cn` (clsx + tailwind-merge).
 export { SidebarHeader } from "../shell/src/SidebarHeader";
 export type { SidebarHeaderProps } from "../shell/src/SidebarHeader";
+export { SidebarUpgradeCard } from "../shell/src/SidebarUpgradeCard";
+export type { SidebarUpgradeCardProps } from "../shell/src/SidebarUpgradeCard";
 export { PillTabs } from "../shell/src/PillTabs";
 export type { PillTabItem, PillTabsProps } from "../shell/src/PillTabs";
 export { SessionsHoverCard } from "../shell/src/SessionsHoverCard";
@@ -289,11 +291,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,170 @@ 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} size={20} />)}
+          </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"
+                }`}
+              >
+                {emphasised ? (
+                  <div className="flex items-center gap-2 text-base text-foreground">
+                    <AppMark app="projectv" size={16} className="shrink-0" />
+                    <h3>{plan.name}</h3>
+                  </div>
+                ) : (
+                  <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 h-4 w-5 shrink-0 items-center justify-center">
+                          {benefit.icon && benefit.icon !== "check" ? (
+                            <AppMark app={benefit.icon} size={12} className="max-w-full" />
+                          ) : (
+                            <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;