leetcode/Docs/typeset-prompt.md

Install shadcn/typeset in this Fumapress (Fumadocs + Waku) project.

Typeset is a single stylesheet that styles rendered markdown: wrap the output
in a `typeset` container and everything inside (headings, lists, tables,
code, blockquotes, math) is styled. Everything outside is untouched.

If this project was scaffolded with create-fumapress-typeset, steps 1-4 are
already done — verify each one and move on; every step below is safe to
re-run.

1. Download https://ui.shadcn.com/typeset.css and save it as
   `src/typeset.css` (next to the main CSS file, `src/app.css`). If the
   file already exists, replace it with the downloaded copy.

2. Import it in `src/app.css`, after the Tailwind and Fumadocs imports:

   @import "./typeset.css";

3. Install the fonts:

   bun add @fontsource-variable/dm-sans @fontsource-variable/instrument-sans @fontsource-variable/jetbrains-mono

   Then import them in `src/app.css`:

   @import "@fontsource-variable/dm-sans";
   @import "@fontsource-variable/instrument-sans";
   @import "@fontsource-variable/jetbrains-mono";

   :root {
     --font-dm-sans: "DM Sans Variable", sans-serif;
     --font-instrument-sans: "Instrument Sans Variable", sans-serif;
     --font-jetbrains-mono: "JetBrains Mono Variable", monospace;
   }

4. Add this preset to `src/app.css`, after the typeset import. If a class
   named `.typeset-docs` already exists, update its values in place. Leave
   any other `typeset-*` presets untouched: they are separate surfaces:

   .typeset-docs {
     --typeset-font-body: var(--font-instrument-sans);
     --typeset-font-heading: var(--font-dm-sans);
     --typeset-font-mono: var(--font-jetbrains-mono);
     --typeset-size: 16px;
     --typeset-leading: 1.9;
     --typeset-flow: 1em;
   }

5. Do not apply the class anywhere yet. Search the project for surfaces that
   render markdown or rich content:

   - The Fumadocs docs page body. Fumapress owns that layout: customize it in
     `press.config.tsx` with `createDocsLayoutPage` from
     "fumapress/layouts/docs" (see https://press.fumadocs.dev/docs/layouts)
     and wrap the page body there.
   - MDX components, react-markdown/Streamdown renderers,
     dangerouslySetInnerHTML with parsed markdown, `prose` classes, CMS
     content renderers.

   Present the candidates you find as a short list and ask the user which
   surface should use typeset. Then wrap only the surface they pick:

   <div className="typeset typeset-docs max-w-[37em]">
     {content}
   </div>

   (`src/app.css` also defines `.typeset-measure` with the same
   max-width, if a plain class is preferred over a Tailwind utility.)

   If the picked surface already has its own typography (Fumadocs' `prose`
   class, styled markdown components), list those styles and let the user
   decide what to remove before wrapping. Note: `src/app.css` already zeroes
   `margin-block-end` inside `.typeset.prose` so typeset owns the rhythm
   when both classes share a container.

Notes:

- To exclude an embedded component from typeset styles, add the
  `not-typeset` class or the `data-not-typeset` attribute to it. Keep
  interactive Fumadocs components (tabs, callouts, accordions) out of typeset
  this way.
- Verify on the surface the user picked: headings, lists, tables, and code
  inside the container should be styled with no classes on the content
  itself.
- Docs: https://ui.shadcn.com/docs/typeset