Typeset

A typography layer wrapping already-rendered markdown or HTML content and supplying every size, weight, spacing, and color decision through three custom properties.

Every fallible call answers with a Result

A function that can fail returns a Result instead of throwing, so the failure is part of the signature and the caller decides what to do with it. See the result package for the full surface.

No exception escapes a package boundary.
Every error case is named in the type.
A caller that ignores the failure does not typecheck.

The compiler is the only reviewer that reads every line.

let user = await findUser(id);
if (user.isErr) return notFound();

Method	Returns
`unwrap()`	The value, or throws
`unwrapOr(fallback)`	The value, or the fallback

Opted out of the layer

View code

<Typeset preset="reading">
	<h2>Every fallible call answers with a Result</h2>

	<p>
		A function that can fail returns a <code>Result</code> instead of throwing, so the
		failure is part of the signature and the caller decides what to do with it. See the
		<a href="/docs/packages/result">result package</a> for the full surface.
	</p>

	<ul>
		<li>No exception escapes a package boundary.</li>
		<li>Every error case is named in the type.</li>
		<li>A caller that ignores the failure does not typecheck.</li>
	</ul>

	<blockquote>
		<p>The compiler is the only reviewer that reads every line.</p>
	</blockquote>

	<pre><code>{"let user = await findUser(id);\nif (user.isErr) return notFound();"}</code></pre>

	<table>
		<thead>
			<tr>
				<th>Method</th>
				<th>Returns</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>unwrap()</code></td>
				<td>The value, or throws</td>
			</tr>
			<tr>
				<td><code>unwrapOr(fallback)</code></td>
				<td>The value, or the fallback</td>
			</tr>
		</tbody>
	</table>

	<div data-not-typeset>
		<Badge color="brand">Opted out of the layer</Badge>
	</div>
</Typeset>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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

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

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

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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.