comark-ui 0.0.0-stage → 0.7.1

package/dist/skills/comark-ui/references/table.md

@@ -0,0 +1,48 @@
+# Tables from CSV, TSV, and JSON
+
+comark-table turns CSV, TSV, or JSON from a fence or a file into a plain HTML table with a Copy button, which pastes as cells in a spreadsheet, and a menu that copies it as Markdown or CSV. With `sort`, its headers sort the rows. Use it for benchmark results, exports, and any data a tool wrote, so the page shows the numbers the run produced.
+
+## Syntax
+
+````md
+::table{sort}
+```csv
+Benchmark,Before (ms),After (ms)
+Parse the duck census,"1,204",980
+Render the pond map,88,91
+```
+::
+````
+
+Or read the file the run wrote, and leave the block empty:
+
+```md
+::table{src="bench/results.csv" sort}
+::
+```
+
+- A ` ```csv ` or ` ```tsv ` fence turns into a table anywhere, with the Copy button and no sorting. Wrap it in `::table` to set the props below.
+- A ` ```json ` fence stays code unless it sits inside `::table`. It holds an array of objects, one per row. Every key becomes a column, in the order first seen, and a nested value shows as JSON.
+- `src` starts at the document's folder, or at the host's `root` when it starts with `/`. It can't leave `root` or be a URL, and the extension picks the format. The plugin drops content beside `src` and reports it.
+- A Markdown table inside `::table{sort}` or `::table{copy}` gets the Copy button. A `::table` with no props renders its Markdown table plain.
+
+| Prop | What it does |
+| --- | --- |
+| `src` | A `.csv`, `.tsv`, or `.json` file to read. |
+| `format` | `csv`, `tsv`, or `json`, for a file or fence whose extension or language doesn't say. |
+| `sort` | Makes every header a button that sorts the rows, up then down. Numbers sort as numbers. |
+| `copy` | On by default. `copy=false` hides the Copy button and its menu. |
+
+CSV follows RFC 4180. A cell in double quotes may hold commas and line breaks, and `""` is a quote inside one. TSV splits at tabs and has no quoting. The first row is the header, and every row needs one cell per column. A column whose cells are all numbers, with commas or a short unit such as `12 ms`, lines up on the right. A fence the plugin can't read stays code, and the plugin says why.
+
+## Fit the data to the page
+
+- Every row becomes HTML, so trim a large export to the rows the reader needs before you write it. A table wider than the page scrolls sideways in its frame.
+- `src` can't fetch a URL. Download the data next to the document, or paste it in a fence.
+- To number a table with [xref](xref.md), wrap a Markdown table in `::table{#tbl-name caption="..."}` with no other props. A table that comark-table draws loses its `id`, so comark-xref reports every `:ref` to it.
+- To draw the numbers, write a `::chart` around a Markdown table instead, as [charts](charts.md) shows.
+
+## Register
+
+- In `comark-ui`: on. Fences render, and every `src` reports a missing file until you pass `table: { root: "docs" }` or `{ read }`.
+- Alone: `pnpm add comark @comark/html comark-table`, then `createHtmlRenderer({ plugins: [table({ root: "docs" })], components })` with both from `comark-table/html`. `root` is the folder `src` can't leave, default `.`, the working directory. `base` is the document's folder under it, where relative paths start. `read(path)` returns a file's text, for browsers and edge runtimes. `fences: false` keeps csv and tsv fences as code. `comark-table/vue`, `/react`, and `/svelte` render it too.

package/dist/skills/comark-ui/references/tabs.md

@@ -0,0 +1,46 @@
+# Tabs and code groups
+
+comark-tabs draws `::tabs` of any Markdown, `::code-group` of code blocks, and a tab per package manager for a code block marked `pm`. Use tabs for versions of one thing where each reader needs only one, such as an operating system, a framework, or a package manager.
+
+## Syntax
+
+````md
+::code-group{sync="pm"}
+```sh [pnpm]
+pnpm add comark-tabs
+```
+
+```sh [npm]
+npm install comark-tabs
+```
+::
+
+::tabs{sync="os"}
+:::tabs-item{label="macOS"}
+Press **⌘K** to find the pigeon data.
+:::
+
+:::tabs-item{label="Windows"}
+Press **Ctrl+K** to find the pigeon data.
+:::
+::
+````
+
+- `::tabs`: each `:::tabs-item` inside is one tab. Content outside every tab doesn't render, and is reported.
+- `:::tabs-item`: `label` is required and must differ from the other labels in its block, since `sync` matches tabs by label. `icon` draws an Iconify name, such as `lucide:apple`, or an image URL before the label.
+- `::code-group`: only code blocks go inside. Name each one's tab in brackets after its language, as in `sh [pnpm]`, with an optional icon after it, as in `sh [pnpm] icon=logos:pnpm`. The tab replaces the block's own title, and comark-code's `title="pnpm"` names no tab.
+- `sync`, on either block, is a key shared by blocks that switch together. Picking a tab picks the tab with the same label in every block with that key, and the next page that uses the key remembers it.
+- A code block marked `pm`, as in `sh pm`, holds package manager commands in any manager (npm, npx, pnpm, pnpx, yarn, bun, bunx, or deno) and becomes a code group with a tab each for npm, pnpm, yarn, and bun, synced as `pm`. The manager it's written in keeps its commands as written. It reads install, frozen install (`npm ci`), add with `-D`, `-E`, `-O`, `--save-peer`, or `-g`, remove, update, run, `npx`/`dlx`, create, and init. Only commands at the start of a line or after `&&`, `||`, or `;` change. Inside a `::code-group`, `pm` does nothing.
+
+## Choose the block
+
+- `::code-group` when every tab is one code block, such as one config file per framework. Give every install snippet `sync="pm"`, the key `pm` blocks use, so the reader picks a package manager once.
+- `pm` for package manager commands, so you write them once in the manager you use. A command with no form in a manager, such as `npm install -g` in yarn, or one it doesn't read, such as `npm publish`, leaves those tabs out and is reported. Write that block as a `::code-group{sync="pm"}` by hand.
+- `::tabs` when a tab holds prose, images, or several blocks.
+
+Put only alternatives in tabs. Anything every reader needs goes outside them, since a reader sees one tab at a time. For a before and after, use annotate's `::compare` or comark-diff's `::diff`, which show both sides at once.
+
+## Register
+
+- In `comark-ui`: on, as `tabs`. `tabs: { managers }` sets the tabs a `pm` block gets, in order. The default is `["npm", "pnpm", "yarn", "bun"]`, and `"deno"` can join. `tabs: { icons }` gives each tab without an icon one by its label, such as `{ pnpm: "logos:pnpm" }`. Icons resolve through the preset's `icon` options, from the Iconify API unless its `collections` hold the set.
+- Alone: `pnpm add comark @comark/html comark-tabs`, then `createHtmlRenderer({ plugins: [tabs()], components })` with both from `comark-tabs/html`. `comark-tabs/vue`, `/react`, and `/svelte` (Svelte 5.20 or later) export the same pair for those renderers. It takes `managers`, `icons`, and `iconResolver`, a `createIcons()` from comark-icon to share with `:icon`. List it before Shiki, so Shiki highlights the tabs `pm` adds.

package/dist/skills/comark-ui/references/tests.md

@@ -0,0 +1,59 @@
+# Test results
+
+comark-tests reads a JUnit XML report into one line of passed, failed, and skipped counts with the run's duration, and folds each failure under it with its message and stack. Use it when a pull request or a CI summary reports a test run, so the reader sees the run itself.
+
+## Syntax
+
+````md
+::tests{title="Pond census tests"}
+```xml
+<testsuite name="pond.test.ts" time="0.42">
+  <testcase classname="pond.test.ts" name="counts the ducks" time="0.01"/>
+  <testcase classname="pond.test.ts" name="counts the geese" time="0.02">
+    <failure message="expected 3 to be 4">AssertionError: expected 3 to be 4
+    at pond.test.ts:12:20</failure>
+  </testcase>
+  <testcase classname="pond.test.ts" name="maps the herons"><skipped/></testcase>
+</testsuite>
+```
+::
+````
+
+Or read the report from a file, and leave the block empty:
+
+```md
+::tests{src="reports/junit.xml" title="CI run"}
+::
+```
+
+| Prop | What it does |
+| --- | --- |
+| `src` | The JUnit XML file to read. The path starts at the document's folder, or at the host's `root` when it starts with `/`, and it can't leave `root` or be a URL. Without `src`, the block holds one fence with the report. |
+| `title` | Shown before the counts. It also names the results for screen readers, which hear "Test results" without one. |
+
+The block shows:
+
+- The counts of `<testcase>` elements. A case with `<skipped>` is skipped, one with `<failure>` or `<error>` failed, and the rest passed. Failed and skipped show only when there are any.
+- The duration, from the `time` of `<testsuites>`, else the sum of the suites' times, else the cases', written as `250 ms`, `4.2 s`, or `1 min 21 s`. A report without times shows none.
+- Each failure as a closed disclosure named `classname › name`, with its `message` and its stack in a code block. Failures print open.
+
+The root is `<testsuites>` or a single `<testsuite>`. A report with another root renders nothing, and so does malformed XML, which the plugin reports with its line.
+
+## Use the run's own report
+
+Paste or point at the report the runner wrote, unedited, so the counts are the run's. Most runners write JUnit XML with a flag:
+
+| Runner | Command |
+| --- | --- |
+| Vitest | `vitest run --reporter=junit --outputFile=junit.xml` |
+| Jest | `jest --reporters=jest-junit` |
+| pytest | `pytest --junitxml=junit.xml` |
+| Go | `go test -v ./... 2>&1 \| go-junit-report > junit.xml` |
+| Playwright | `PLAYWRIGHT_JUNIT_OUTPUT_NAME=junit.xml playwright test --reporter=junit` |
+
+When the host reads files, have CI write the report next to the document and point `src` at it. Otherwise paste it into the fence. A long report stays short on the page, since the summary is one line and each failure stays closed until a reader opens it.
+
+## Register
+
+- In `comark-ui`: on. A pasted report renders, and every `src` reports a missing file until you pass `tests: { root: "." }` or `{ read }`.
+- Alone: `pnpm add comark @comark/html comark-tests`, then `createHtmlRenderer({ plugins: [tests({ root: "." })], components })` with both from `comark-tests/html`. `root` is the folder `src` can't leave, default `.`, the working directory. `base` is the document's folder under it, where relative paths start. `read(path)` returns a file's text, for browsers and edge runtimes. The output needs no script. `comark-tests/vue`, `/react`, and `/svelte` render it too. With comark-code registered, each stack gets a Copy button.

package/dist/skills/comark-ui/references/ui.md

@@ -0,0 +1,54 @@
+# Every plugin in one install
+
+comark-ui registers every comark-ui package for one renderer, in the order they need, with one icon resolver shared by `:icon`, cards, details, file trees, tabs, and code actions. Install in SKILL.md shows its basic use. This page covers its options, what it turns on, its other renderers, and how the linter uses it.
+
+## Options
+
+`comarkUi(options)` returns `{ plugins, components }`. Each key is a package's name without `comark-`, in camelCase, such as `fileTree`, `codeNotes`, or `readingTime`. `false` turns a plugin off along with its components, and an object turns it on with those options. `true` turns on `include` and leaves the others as they are:
+
+```ts
+comarkUi({
+  zoom: false,
+  code: { actions: [{ id: "run", label: "Run" }] },
+  github: { callouts: false, references: { repo: "owner/name" } },
+  table: { root: "data" },
+  include: { root: "content", base: "guide" },
+});
+```
+
+`github` takes its three plugins by name, `callouts`, `references`, and `html`, and `links` takes `external` and `anchors`. Each package's reference lists its own options. The order stays fixed whatever you pass. `include` runs first, so the others read what it pastes, and `code` and `codeNotes` run last, after every plugin that writes code blocks.
+
+## What it turns on
+
+- Every plugin except `include`, which reads files from disk. `include: { root, base }` turns it on, or `{ read }` in a browser or an edge runtime. `include: true` reads under the working directory.
+- `cast`, `table`, and `tests` get a reader that finds no file. Inline casts, CSV fences, and pasted JUnit reports render, and a `src` file doesn't load until you pass `{ root }` or `{ read }`. Any other options object replaces that reader too, so the plugin reads under the working directory.
+- Three plugins use the network while parsing: `chips` downloads favicons and avatars, `icon` fetches icon sets from the Iconify API, and `diagrams` sends each diagram's source to `https://kroki.io`. In a browser, pass `chips: { download: false }`, since a browser may not download another site's images. To parse offline, also pass `icon: { fetch: false }` with your icon sets in `collections`, and `diagrams: { draw: false }`. To keep diagram sources private, pass your own Kroki `server`.
+- `icon`'s options apply to every icon the preset draws, in cards, details, file trees, tabs, and code actions too.
+- comark-critic has no component to add its styles, so put `criticCss`, which every entry exports, in the page.
+- The text around the blocks is styled by default, scoped to the element the document renders into, on the same `--comark-*` tokens. Pass `typeset: false` when the site already styles Markdown, such as with Tailwind Typography's `prose`.
+
+## Renderers
+
+| Renderer | Entry |
+| --- | --- |
+| `@comark/html` | `comark-ui/html` |
+| `@comark/vue` | `comark-ui/vue` |
+| `@comark/react` | `comark-ui/react` |
+| `@comark/svelte` | `comark-ui/svelte` |
+
+The Vue, React, and Svelte entries leave out annotate and diff, which render only to HTML. Screenshots, compares, diffs, and the marks on charts need `comark-ui/html`.
+
+To use another renderer, install it in place of `@comark/html`, such as `pnpm add comark @comark/vue comark-ui`, and pass it `plugins` and `components` as you would one package's. The preset needs Vue 3.5, React 18, or Svelte 5.20 or later. Every entry exports the `PresetOptions` type, and `comark-ui` itself exports `preset(renderer, options)`, which builds the same pair from renderer entries you pass.
+
+## In the linter
+
+comark-linter imports `comark-ui/html` when the project has it, and lints with all its plugins and components, ahead of any comark package installed on its own, so none runs twice. It calls `comarkUi()` with options of its own, so the app's options don't reach it:
+
+- It draws no chart or diagram, and downloads no chip image.
+- `::cast`, `::table`, and `::tests` read their `src` files from the working directory.
+- `include` stays off until a lint config adds it, as [include](include.md) says.
+
+## Register
+
+- In `comark-ui`: this is the preset itself, registered as Install in SKILL.md shows.
+- Alone: each plugin is its own package, registered as its reference says. The preset ships in lockstep with them, so `comark-ui@X` holds every plugin at version `X`.

package/dist/skills/comark-ui/references/xref.md

@@ -0,0 +1,48 @@
+# Numbered figures and tables
+
+comark-xref numbers labeled images and tables in document order, and turns `:ref{#id}` into a link that reads "Figure 2". Use it when the text refers to its images or tables by number, so the numbers stay right when you add, remove, or reorder them.
+
+## Syntax
+
+```md
+The empty state in :ref{#fig-empty} replaces the spinner in :ref{#fig-loading}, and :ref{#tbl-load} has the load times.
+
+![The new empty state on the correlations page](empty.png){#fig-empty}
+
+![The old spinner on the correlations page](loading.png){#fig-loading}
+
+::table{#tbl-load caption="Time to first row, in ms"}
+| Page | Before | After |
+| --- | --: | --: |
+| Correlations | 1840 | 620 |
+::
+```
+
+- `{#fig-name}` after an image alone in its paragraph makes it a `figure`, captioned "Figure 1: " and its alt text. The plugin doesn't number an image that shares its paragraph with text, and reports it.
+- `::table{#tbl-name caption="..."}` around one Markdown table captions it "Table 1: " and its `caption`. A Markdown table takes no id on its own.
+- A label is `fig-` or `tbl-`, then letters, digits, `_`, or `-`. The plugin numbers figures and tables apart.
+- `:ref{#id}` becomes a link that reads "Figure 1" or "Table 1", to a label above or below it. The plugin drops text in `:ref[...]` and renders a `:ref` to an unknown label as `[id]`. It reports both, and a label used twice.
+
+## Label a screenshot
+
+The plugin also numbers any other element with a `fig-` id as a figure, such as a `::figure` you caption yourself, and adds no caption to it. It numbers a `::screenshot` or `::compare` too, but their HTML drops the id, so the link leads nowhere. Wrap the screenshot in a `::div` that carries the label:
+
+```md
+:ref{#fig-toolbar} shows the toolbar on one row.
+
+::div{#fig-toolbar}
+:::screenshot{src="after.png" alt="Filter toolbar on one row"}
+:::
+::
+```
+
+## With other plugins
+
+- Leave the title off a labeled image, since its alt text is the caption. comark-figure, on in `comark-ui`, makes a titled image its own figure first, and xref then reports it as sharing its paragraph.
+- Keep comark-table's `sort`, `copy`, and `src` off a labeled `::table`. With them, comark-table takes the block, drops the label, and reports `caption` as an unknown prop.
+- Write `:ref{#fig-name}` where Pandoc writes `@fig-name`, which comark-chips and comark-github read as a mention.
+
+## Register
+
+- In `comark-ui`: on in every entry. `xref: { figure: "Abbildung", table: "Tabelle" }` sets the words before the numbers, `"Figure"` and `"Table"` by default.
+- Alone: `pnpm add comark comark-xref`, then `createHtmlRenderer({ plugins: [xref()] })` with `xref` from `comark-xref`. It has no components and no styles, so it works with any renderer. Its output is `figure`, `figcaption`, `caption`, and `a`, with the classes `cxr`, `cxr-label`, and `cxr-ref` for your own rules.

package/dist/skills/comark-ui/references/zoom.md

@@ -0,0 +1,35 @@
+# Zoom
+
+comark-zoom lets the reader click an image or a `::zoom` block to see it large, and closes it with Escape, Back, or a click around it. Images zoom with no markup. Wrap a table, code block, or diagram in `::zoom` when it's too small to read in place.
+
+## Syntax
+
+```md
+::zoom{title="Deploy retry policy"}
+| Attempt | Wait before it |
+| --- | --- |
+| 1 | 1 s |
+| 2 | 4 s |
+| 3 | 16 s |
+::
+```
+
+- `::zoom` zooms everything inside it as one item. `title` heads the zoomed view. Items with the same `group` page through one zoomed view, with a strip of them below. `#id` and `.class` go on the block.
+- Every content image zooms on its own, with its alt text as the zoomed view's heading. It grows no larger than its file, so give a small image a larger file to open with `{data-zoom-src="dashboard@2x.png"}`.
+- An image inside a link keeps its link and doesn't zoom. Images inside `::zoom`, `::carousel`, `::screenshot`, or `::compare` zoom with their block.
+- `{zoom=false}` keeps an image from zooming, and `{data-zoom}` makes any element zoom on its own.
+
+comark-zoom reports no problems, so a misspelled prop such as `titel` is dropped silently and passes the linter. Spell `title` and `group` as written here.
+
+## Group or carousel
+
+A `group` leaves each item in its place in the text and pages through them only once one is zoomed. Use it for screenshots that sit apart, each next to the paragraph about it. A `::carousel` puts the items in one place with arrows instead. An item hidden when the view opens, such as one in a closed tab, stays out of its group.
+
+## In the page
+
+The zoomed view fires `comark-zoom:open`, `comark-zoom:change`, and `comark-zoom:close` on the item, and they bubble. The `detail` of `open` and `change` holds the dialog's `header` and `footer`, a `layer` over the zoomed content where a host draws its own pins, and `copyOf(element)` and `originalOf(element)` to map between the page and the zoomed copy. `data-zoom-aside`, a selector, shows a caption beside the zoomed item at its own size, as annotate does with a screenshot's notes.
+
+## Register
+
+- In `comark-ui`: on, as `zoom`. `zoom: { images: false }` leaves images alone, so only `::zoom` blocks and elements marked `{data-zoom}` zoom.
+- Alone: `pnpm add comark @comark/html comark-zoom`, then `createHtmlRenderer({ plugins: [zoom()], components })` with both from `comark-zoom/html`. `comark-zoom/vue`, `/react`, and `/svelte` export the same pair for those renderers. The plugin adds a node that starts the script, so pass the components even when only images zoom. A page with no renderer calls `start()` from `comark-zoom/client` once. comark-annotate and comark-carousel zoom their own blocks without it, so register `zoom()` for images and `::zoom`.

package/dist/src-DROB05U6.mjs

@@ -0,0 +1,119 @@
+import cjk from "comark-cjk";
+import critic, { css as criticCss } from "comark-critic";
+import deflist from "comark-deflist";
+import figure from "comark-figure";
+import footnotes from "comark-footnotes";
+import { createIcons } from "comark-icon";
+import include from "comark-include";
+import keys from "comark-keys";
+import readingTime from "comark-reading-time";
+import xref from "comark-xref";
+import { defineComarkPlugin } from "comark";
+//#region src/typeset.ts
+/** The node that adds the styles. The plugin adds one at the end of every document. */
+const TYPESET_TAG = "typeset-styles";
+/** Adds the node that writes the typeset styles at the end of the document. The preset turns it on by default. */
+const typeset = defineComarkPlugin(() => ({
+	name: "comark-ui-typeset",
+	post(state) {
+		state.tree.nodes.push([TYPESET_TAG, {}]);
+	}
+}));
+//#endregion
+//#region src/index.ts
+const on = (value, fallback = true) => value === void 0 ? fallback : value !== false;
+const optionsOf = (value) => value === true || value === false ? void 0 : value;
+const noFiles = { read: () => void 0 };
+/** Builds a renderer's preset. Use the one from `comark-ui/html`, `/vue`, `/react`, or `/svelte`. */
+function preset(renderer, options = {}) {
+	const plugins = [];
+	const components = {};
+	const add = (part, value, settings = optionsOf(value)) => {
+		if (!part || !on(value)) return;
+		plugins.push(part.default(settings));
+		Object.assign(components, part.components);
+	};
+	const parse = (plugin, value) => {
+		if (on(value)) plugins.push(plugin(optionsOf(value)));
+	};
+	const icons = createIcons(optionsOf(options.icon));
+	if (on(options.include, false)) plugins.push(include(optionsOf(options.include)));
+	add(renderer.annotate, options.annotate);
+	add(renderer.carousel, options.carousel);
+	add(renderer.cast, options.cast, optionsOf(options.cast) ?? noFiles);
+	parse(cjk, options.cjk);
+	parse(deflist, options.deflist);
+	parse(figure, options.figure);
+	parse(critic, options.critic);
+	add(renderer.charts, options.charts);
+	add(renderer.chips, options.chips);
+	add(renderer.colors, options.colors);
+	add(renderer.diagrams, options.diagrams);
+	add(renderer.mermaid, options.mermaid);
+	add(renderer.diff, options.diff);
+	add(renderer.embed, options.embed);
+	parse(footnotes, options.footnotes);
+	if (on(options.github)) {
+		const github = optionsOf(options.github) ?? {};
+		if (on(github.callouts)) {
+			plugins.push(renderer.github.callouts(optionsOf(github.callouts)));
+			Object.assign(components, renderer.github.components);
+		}
+		if (on(github.references)) plugins.push(renderer.github.references(optionsOf(github.references)));
+		if (on(github.html)) plugins.push(renderer.github.html());
+	}
+	add(renderer.icon, options.icon, icons);
+	add(renderer.mark, options.mark);
+	add(renderer.math, options.math);
+	add(renderer.details, options.details, {
+		iconResolver: icons,
+		...optionsOf(options.details)
+	});
+	if (on(options.links)) {
+		const links = optionsOf(options.links) ?? {};
+		if (on(links.external)) plugins.push(renderer.links.external(optionsOf(links.external)));
+		if (on(links.anchors)) plugins.push(renderer.links.anchors(optionsOf(links.anchors)));
+		if (on(links.external) || on(links.anchors)) Object.assign(components, renderer.links.components);
+	}
+	add(renderer.fileTree, options.fileTree, {
+		iconResolver: icons,
+		...optionsOf(options.fileTree)
+	});
+	add(renderer.fields, options.fields);
+	add(renderer.properties, options.properties);
+	parse(keys, options.keys);
+	add(renderer.badge, options.badge);
+	add(renderer.media, options.media);
+	add(renderer.metrics, options.metrics);
+	add(renderer.table, options.table, optionsOf(options.table) ?? noFiles);
+	add(renderer.cards, options.cards, { iconResolver: icons });
+	add(renderer.qr, options.qr);
+	add(renderer.sources, options.sources);
+	add(renderer.steps, options.steps);
+	add(renderer.quiz, options.quiz);
+	parse(readingTime, options.readingTime);
+	add(renderer.tabs, options.tabs, {
+		iconResolver: icons,
+		...optionsOf(options.tabs)
+	});
+	add(renderer.magicMove, options.magicMove);
+	add(renderer.outline, options.outline);
+	parse(xref, options.xref);
+	add(renderer.tests, options.tests, optionsOf(options.tests) ?? noFiles);
+	add(renderer.zoom, options.zoom);
+	add(renderer.code, options.code, {
+		iconResolver: icons,
+		...optionsOf(options.code)
+	});
+	add(renderer.codeNotes, options.codeNotes);
+	if (on(options.typeset)) {
+		plugins.push(typeset());
+		components[TYPESET_TAG] = renderer.typeset;
+	}
+	return {
+		plugins,
+		components
+	};
+}
+//#endregion
+export { typeset as i, preset as n, TYPESET_TAG as r, criticCss as t };

package/dist/svelte/Typeset.svelte

@@ -0,0 +1,7 @@
+<!-- Writes the typeset styles with the document rather than on mount, so `@scope` styles its root and server renders
+     arrive styled. -->
+<script>
+  import { typesetCss } from "comark-ui/client";
+</script>
+
+{@html `<style data-comark-typeset>${typesetCss}</style>`}

package/dist/svelte/index.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from "svelte";
+import type { Preset, PresetOptions } from "comark-ui";
+
+export { criticCss } from "comark-ui";
+export type { PresetOptions } from "comark-ui";
+
+/** Every plugin with components for `@comark/svelte`, which leaves out annotate, diff, and quiz. */
+declare const comarkUi: (options?: PresetOptions) => Preset<Component>;
+export default comarkUi;

package/dist/svelte/index.js

@@ -0,0 +1,84 @@
+// Every plugin with components for `@comark/svelte`, which leaves out annotate, diff, and quiz.
+import { preset } from "comark-ui";
+import { addMermaidStyles } from "comark-ui/client";
+import * as badge from "comark-badge/svelte";
+import * as cards from "comark-cards/svelte";
+import * as carousel from "comark-carousel/svelte";
+import * as cast from "comark-cast/svelte";
+import * as charts from "comark-charts/svelte";
+import * as chips from "comark-chips/svelte";
+import * as code from "comark-code/svelte";
+import * as codeNotes from "comark-code-notes/svelte";
+import * as colors from "comark-colors/svelte";
+import * as details from "comark-details/svelte";
+import * as diagrams from "comark-diagrams/svelte";
+import * as embed from "comark-embed/svelte";
+import * as fields from "comark-fields/svelte";
+import * as fileTree from "comark-file-tree/svelte";
+import * as github from "comark-github/svelte";
+import * as icon from "comark-icon/svelte";
+import * as links from "comark-links/svelte";
+import * as magicMove from "comark-magic-move/svelte";
+import * as mark from "comark-mark/svelte";
+import * as math from "comark-mathml/svelte";
+import * as media from "comark-media/svelte";
+import pele, { createPeleComponent } from "comark-pele/svelte";
+import * as metrics from "comark-metrics/svelte";
+import * as outline from "comark-outline/svelte";
+import * as properties from "comark-properties/svelte";
+import * as qr from "comark-qr/svelte";
+import * as sources from "comark-sources/svelte";
+import * as steps from "comark-steps/svelte";
+import * as table from "comark-table/svelte";
+import * as tabs from "comark-tabs/svelte";
+import * as tests from "comark-tests/svelte";
+import * as zoom from "comark-zoom/svelte";
+import typeset from "./Typeset.svelte";
+
+export { criticCss } from "comark-ui";
+
+// Pele calls `onRender` only in the browser, after it draws, so the styles arrive like the other components' do.
+const mermaid = {
+  default: pele,
+  components: { pele: createPeleComponent({ onRender: addMermaidStyles }) },
+};
+
+export default (options) =>
+  preset(
+    {
+      badge,
+      cards,
+      carousel,
+      cast,
+      charts,
+      chips,
+      code,
+      codeNotes,
+      colors,
+      details,
+      diagrams,
+      embed,
+      fields,
+      fileTree,
+      github,
+      icon,
+      links,
+      magicMove,
+      mark,
+      math,
+      media,
+      mermaid,
+      metrics,
+      outline,
+      properties,
+      qr,
+      sources,
+      steps,
+      table,
+      tabs,
+      tests,
+      typeset,
+      zoom,
+    },
+    options,
+  );