[ @sdxc/ui ]
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 |
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="/api/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 remiximport "@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
Chat reply
Your status page went down at 14:02 because the api.acme.dev check timed out three times in a row. Two things will stop it from paging you again:
- Raise the timeout to 10 seconds.
- Require two failed regions before an incident opens.
Want me to apply both?
View code
<Typeset preset="chat" mix={[is("100%"), maxIs("28rem")]}>
<p>
Your status page went down at 14:02 because the <code>api.acme.dev</code> check timed out
three times in a row. Two things will stop it from paging you again:
</p>
<ul>
<li>Raise the timeout to 10 seconds.</li>
<li>Require two failed regions before an incident opens.</li>
</ul>
<p>Want me to apply both?</p>
</Typeset>Opted-out widget
Every check runs from three regions. Add your first one below and Acme starts watching it within a minute.
New check
https://api.acme.dev/health, every 60 seconds
View code
<Typeset mix={[is("100%"), maxIs("28rem")]}>
<p>
Every check runs from three regions. Add your first one below and Acme starts watching it
within a minute.
</p>
<div data-not-typeset>
<Card>
<Card.Header>
<Card.Title>New check</Card.Title>
<Card.Description>https://api.acme.dev/health, every 60 seconds</Card.Description>
</Card.Header>
<Card.Footer>
<Button size="sm">Create check</Button>
</Card.Footer>
</Card>
</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. |