vercel/satori ? reverse-engineered prompt

Build me a TypeScript library that takes JSX or simple HTML like elements plus a width, height, and fonts, then turns it into an SVG string. It should handle the common layout and styling stuff people use for social cards and Open Graph images, like flex layout, text, colors, spacing, backgrounds, borders, and embedded images. I want it to work in Node and in browser style environments, and I want a clean JSX friendly API so I can write components naturally instead of building raw SVG by hand.

Please make it support a small, well documented subset of HTML and CSS, and make the output good enough for generating preview images for posts and pages. If you need to, look up any current docs online for the layout behavior and font handling. Also include a playground or example so I can quickly test different cards and see the SVG result.