# Typeset

> A typography layer wrapping already-rendered markdown or HTML content and supplying every size, weight, spacing, and color decision through three custom properties: `--ui-typeset-size`, `--ui-typeset-leading`, and `--ui-typeset-flow`.

```ts
import { Typeset } from "@sdxc/ui";
```

Renders a `<div>` that sizes and colors already-rendered markdown or HTML
content through `--ui-typeset-size`, `--ui-typeset-leading`, and
`--ui-typeset-flow`, computing heading sizes via `calc()` off one shared value.

## Examples

```tsx
<Typeset preset="reading">{renderedArticleHtml}</Typeset>
```

```tsx
<Typeset preset="chat">
	<p>{t("assistant.reply")}</p>
</Typeset>
```

```tsx
<Typeset>
	<p>{t("docs.intro")}</p>
	<div data-not-typeset>
		<EmbeddedWidget />
	</div>
</Typeset>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `preset?` | `"docs" \| "chat" \| "reading"` | Rhythm context. Defaults to DEFAULT_PRESET. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Preset` | `"docs" \| "chat" \| "reading"` | Rhythm context: `"docs"` is the spacious default, `"chat"` tightens the scale for a conversational bubble's denser turn-taking, and `"reading"` opens both further for a long-form article. |