comark-ui 0.8.1 → 0.8.2

package/README.md

@@ -29,7 +29,9 @@ comarkUi({
 });
 ```
 
-`include` is off because it reads files from disk; turn it on to paste files into a document. `cast`, `table`, and `tests` are on but read no files until you pass `{ root }` or `{ read }`. When you parse in a browser, pass `chips: { download: false }`, since a browser may not download another site's images. comark-critic has no component for its styles, so put the exported `criticCss` in the page. The text around the blocks (headings, paragraphs, lists, tables, code, and quotes) is styled too, from shadcn/typeset on the same tokens and scoped to the document; pass `typeset: false` when your site already styles Markdown. See [Typeset](https://comark-ui.onmax.me/guide/typeset/).
+`include` is off because it reads files from disk; turn it on to paste files into a document. `cast`, `table`, and `tests` are on but read no files until you pass `{ root }` or `{ read }`. When you parse in a browser, pass `chips: { download: false }`, since a browser may not download another site's images. comark-critic has no component for its styles, so put the exported `criticCss` in the page. The text around the blocks (headings, paragraphs, lists, tables, code, and quotes) is styled too, from shadcn/typeset on the same tokens and scoped to the document; pass `typeset: false` when your site already styles Markdown. For content outside a document, such as an editor, import `comark-ui/typeset.css` and add the `comark-typeset` class. See [Typeset](https://comark-ui.onmax.me/guide/typeset/).
+
+It also returns `tags` and `blocks`. `tags` is every element a parsed document can hold besides the components; with the components' names, it's the allowlist for Comark's `security` plugin. `blocks` are the blocks the plugins replace while parsing, such as `::code-group`, which a linter needs beside the components' names.
 
 ## Renderers
 

package/dist/client.d.mts

@@ -1,4 +1,4 @@
-import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-DtOLAa1Z.mjs";
 //#region src/client.d.ts
 /**
  * comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
@@ -19,4 +19,4 @@ export declare function mermaidBar(): string;
  */
 export declare function startMermaid(): () => void;
 //#endregion
-export { typesetCss };
+export { typesetCss, typesetStylesheet };

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BYvWbqWz.mjs";
 import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
-export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };
+export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss, typesetStylesheet };

package/dist/editor-vue.mjs

@@ -1,12 +1,9 @@
+import { n as isElement, t as childrenOf } from "./nodes-CwDBFXnO.mjs";
 import { c as fromMarkdown, l as toMarkdown, m as ComarkKit, s as checkMarkdown } from "./editor-9IcfELjG.mjs";
 import { Editor, EditorContent } from "@tiptap/vue-3";
 import { rowsOf } from "comark-properties";
 import { Properties } from "comark-properties/vue";
 import { defineComponent, h, onScopeDispose, ref, shallowRef, watch } from "vue";
-//#region ../../shared/nodes.ts
-const isElement = (node) => Array.isArray(node) && node[0] !== null;
-const childrenOf = ([, , ...rest]) => rest;
-//#endregion
 //#region src/editor-vue.ts
 /**
 * A Tiptap editor bound to a Markdown string: an edit writes the Markdown back, and a change from outside reloads the

package/dist/html.d.mts

@@ -1,4 +1,4 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-DVGSDzBS.mjs";
+import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-BTyvRIPX.mjs";
 import { NodeHandler } from "comark";
 //#region src/html.d.ts
 /**
@@ -10,4 +10,4 @@ export declare const mermaidScript: string;
 /** Every plugin for `@comark/html`, with the `components` to render them. */
 declare const _default: (options?: PresetOptions) => Preset<NodeHandler>;
 //#endregion
-export { type PresetOptions, criticCss, _default as default };
+export { type PresetOptions, commentsCss, criticCss, _default as default };

package/dist/html.mjs

@@ -1,5 +1,5 @@
-import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
-import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
+import { n as criticCss, r as preset, t as commentsCss } from "./src-Baygj6ZQ.mjs";
+import { t as typesetCss } from "./typeset-css-BYvWbqWz.mjs";
 import { a as start, n as mermaidBar, r as mermaidCss } from "./client-kUEiRbtp.mjs";
 import { t as rawText } from "./text-D8j9clg3.mjs";
 import { escapeHtml } from "comark/utils";
@@ -111,4 +111,4 @@ var html_default = (options) => preset({
 	zoom
 }, options);
 //#endregion
-export { criticCss, html_default as default, mermaidScript };
+export { commentsCss, criticCss, html_default as default, mermaidScript };

package/dist/{index-DVGSDzBS.d.mts → index-BTyvRIPX.d.mts}

@@ -1,12 +1,14 @@
 import { CriticOptions, css as criticCss } from "comark-critic";
 import { FigureOptions } from "comark-figure";
 import { FootnotesOptions } from "comark-footnotes";
+import { CalloutsOptions, ReferencesOptions } from "comark-github";
 import { IconOptions, Icons } from "comark-icon";
 import { IncludeOptions } from "comark-include";
 import { KeysOptions } from "comark-keys";
 import { ReadingTimeOptions } from "comark-reading-time";
 import { XrefOptions } from "comark-xref";
 import { ComarkPlugin } from "comark";
+import { CommentsOptions, css as commentsCss } from "comark-comments";
 import { PropertiesOptions } from "comark-properties";
 import { BadgeOptions } from "comark-badge";
 import { AnnotateOptions } from "comark-annotate";
@@ -14,11 +16,9 @@ import { CastOptions } from "comark-cast";
 import { ChartsOptions } from "comark-charts";
 import { ChipsOptions } from "comark-chips";
 import { CodeOptions } from "comark-code";
-import { CommentsOptions } from "comark-comments";
 import { DetailsOptions } from "comark-details";
 import { DiagramsOptions } from "comark-diagrams";
 import { FileTreeOptions } from "comark-file-tree";
-import { CalloutsOptions, ReferencesOptions } from "comark-github";
 import { AnchorsOptions, ExternalOptions } from "comark-links";
 import { MathOptions } from "comark-mathml";
 import { MediaOptions } from "comark-media";
@@ -29,6 +29,14 @@ import { TableOptions } from "comark-table";
 import { TabsOptions } from "comark-tabs";
 import { TestsOptions } from "comark-tests";
 import { ZoomOptions } from "comark-zoom";
+//#region src/mermaid-limits.d.ts
+type MermaidOptions = PeleConfig & {
+  /** How many diagrams a document draws. The ones after show their source as a code block. */
+  maxDiagrams?: number;
+  /** How many characters of Mermaid source a document draws, over all its diagrams. A diagram past it shows its source. */
+  maxSource?: number;
+};
+//#endregion
 //#region src/typeset.d.ts
 /** The node that adds the styles. The plugin adds one at the end of every document. */
 declare const TYPESET_TAG = "typeset-styles";
@@ -63,8 +71,11 @@ type PresetOptions = {
   comments?: CommentsOptions | boolean;
   /** Sends each diagram's source to `https://kroki.io` unless you pass your own `server`, or `{ draw: false }`. */
   diagrams?: DiagramsOptions | boolean;
-  /** Draws `mermaid` fences with comark-pele, on the server and offline. */
-  mermaid?: PeleConfig | boolean;
+  /**
+   * Draws `mermaid` fences with comark-pele, on the server and offline. A host that renders documents it didn't write
+   * can pass `{ maxDiagrams, maxSource }`: the diagrams past either limit show their source as code, each with an issue.
+   */
+  mermaid?: MermaidOptions | boolean;
   /** HTML only: Vue, React, and Svelte have no diff components. */
   diff?: boolean;
   embed?: boolean;
@@ -176,8 +187,19 @@ type Renderer<C> = {
 type Preset<C> = {
   plugins: AnyPlugin[];
   components: Record<string, C>;
+  /**
+   * Every tag but `components`' that a document parsed with `plugins` can hold: Markdown's own, the raw HTML that
+   * GitHub's `html` plugin keeps, and the plain elements the plugins draw with. With `components`' names, it's the
+   * allowlist a host that sanitizes the tree needs. With GitHub's `html` off, raw HTML is left to the host.
+   */
+  tags: string[];
+  /**
+   * The blocks a document may write that the plugins turn into other nodes while parsing, such as `::code-group`. A
+   * linter that reports unknown components needs them beside `components`' names.
+   */
+  blocks: string[];
 };
 /** Builds a renderer's preset. Use the one from `comark-ui/html`, `/vue`, `/react`, or `/svelte`. */
 declare function preset<C>(renderer: Renderer<C>, options?: PresetOptions): Preset<C>;
 //#endregion
-export { criticCss as a, typeset as c, Renderer as i, Preset as n, preset as o, PresetOptions as r, TYPESET_TAG as s, AnyPlugin as t };
+export { commentsCss as a, TYPESET_TAG as c, Renderer as i, typeset as l, Preset as n, criticCss as o, PresetOptions as r, preset as s, AnyPlugin as t, MermaidOptions as u };

package/dist/index.d.mts

@@ -1,3 +1,3 @@
-import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
-import { a as criticCss, c as typeset, i as Renderer, n as Preset, o as preset, r as PresetOptions, s as TYPESET_TAG, t as AnyPlugin } from "./index-DVGSDzBS.mjs";
-export { AnyPlugin, Preset, PresetOptions, Renderer, TYPESET_TAG, criticCss, preset, typeset, typesetCss };
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-DtOLAa1Z.mjs";
+import { a as commentsCss, c as TYPESET_TAG, i as Renderer, l as typeset, n as Preset, o as criticCss, r as PresetOptions, s as preset, t as AnyPlugin, u as MermaidOptions } from "./index-BTyvRIPX.mjs";
+export { AnyPlugin, type MermaidOptions, Preset, PresetOptions, Renderer, TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
-import { i as typeset, n as preset, r as TYPESET_TAG, t as criticCss } from "./src-PkmYCSNu.mjs";
-export { TYPESET_TAG, criticCss, preset, typeset, typesetCss };
+import { a as typeset, i as TYPESET_TAG, n as criticCss, r as preset, t as commentsCss } from "./src-Baygj6ZQ.mjs";
+import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BYvWbqWz.mjs";
+export { TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };

package/dist/nodes-CwDBFXnO.mjs

@@ -0,0 +1,5 @@
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
+export { isElement as n, childrenOf as t };

package/dist/react.d.mts

@@ -1,8 +1,8 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-DVGSDzBS.mjs";
+import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-BTyvRIPX.mjs";
 import { ComponentType } from "react";
 //#region src/react.d.ts
 type AnyComponent = ComponentType<any>;
 /** Every plugin with components for `@comark/react`, which leaves out annotate, comments, diff, and quiz. */
 declare const _default: (options?: PresetOptions) => Preset<AnyComponent>;
 //#endregion
-export { type PresetOptions, criticCss, _default as default };
+export { type PresetOptions, commentsCss, criticCss, _default as default };

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
-import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
+import { n as criticCss, r as preset, t as commentsCss } from "./src-Baygj6ZQ.mjs";
+import { t as typesetCss } from "./typeset-css-BYvWbqWz.mjs";
 import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
 import { createElement, useEffect } from "react";
 import * as badge from "comark-badge/react";
@@ -94,4 +94,4 @@ var react_default = (options) => preset({
 	zoom
 }, options);
 //#endregion
-export { criticCss, react_default as default };
+export { commentsCss, criticCss, react_default as default };

package/dist/skills.mjs

@@ -325,6 +325,6 @@ const skills = [
 	}
 ];
 /** The comark-ui version the skills come from, for a host's cache key or a digest. */
-const version = "0.8.1";
+const version = "0.8.2";
 //#endregion
 export { skills, version };

package/dist/{src-PkmYCSNu.mjs → src-Baygj6ZQ.mjs}

@@ -1,14 +1,61 @@
+import { n as isElement, t as childrenOf } from "./nodes-CwDBFXnO.mjs";
 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 { HTML_TAGS } from "comark-github";
 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";
+import { css as commentsCss } from "comark-comments";
+//#region src/mermaid-limits.ts
+function diagramsOf(nodes, found = []) {
+	for (const node of nodes) {
+		if (!isElement(node)) continue;
+		if (node[0] === "pele") found.push(node);
+		else diagramsOf(childrenOf(node), found);
+	}
+	return found;
+}
+/**
+* Turns the diagrams past a document's limits back into code blocks, before comark-code reads them, so a host that
+* renders other people's documents bounds the time Pele spends drawing. Each one it turns back is a `meta.issues` entry.
+*/
+var mermaid_limits_default = defineComarkPlugin(({ maxDiagrams = Infinity, maxSource = Infinity } = {}) => ({
+	name: "comark-ui-mermaid-limits",
+	post({ tree }) {
+		const issues = [];
+		let drawn = 0;
+		let source = 0;
+		for (const [n, node] of diagramsOf(tree.nodes).entries()) {
+			const content = node[1].content;
+			const why = drawn >= maxDiagrams ? ["comark/mermaid/too-many-diagrams", `a document draws at most ${maxDiagrams} Mermaid diagrams. Move it to another document`] : source + content.length > maxSource ? ["comark/mermaid/source-too-long", `a document draws at most ${maxSource} characters of Mermaid. Shorten it or move it to another document`] : void 0;
+			if (!why) {
+				drawn++;
+				source += content.length;
+				continue;
+			}
+			const language = node[1].language ?? "mermaid";
+			node.splice(0, node.length, "pre", { language }, [
+				"code",
+				{ class: `language-${language}` },
+				content.replace(/\n$/, "")
+			]);
+			issues.push([why[0], `Mermaid diagram ${n + 1} shows its source as code, because ${why[1]}.`]);
+		}
+		if (!issues.length) return;
+		tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map(([, message]) => message)];
+		tree.meta.issueRules = {
+			...tree.meta.issueRules,
+			...Object.fromEntries(issues.map(([rule, message]) => [message, rule]))
+		};
+	}
+}));
+//#endregion
 //#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";
@@ -21,6 +68,34 @@ const typeset = defineComarkPlugin(() => ({
 }));
 //#endregion
 //#region src/index.ts
+const words = (text) => text.split(" ");
+const MARKDOWN_TAGS = words("a blockquote br code del em h1 h2 h3 h4 h5 h6 hr img input li ol p pre span strong table tbody td th thead tr ul");
+const TAGS = [
+	["carousel", words("div")],
+	["codeNotes", words("div span")],
+	["critic", words("del ins mark")],
+	["deflist", words("dd dl dt")],
+	["figure", words("figcaption figure")],
+	["footnotes", words("section sup")],
+	["keys", words("kbd")],
+	["mark", words("mark sup")],
+	["metrics", words("dd div dt")],
+	["outline", words("a div li ul")],
+	["properties", words("dd div dt time")],
+	["quiz", words("div quiz-after quiz-answer quiz-explain quiz-hint quiz-label quiz-option quiz-options quiz-prompt quiz-rationale")],
+	["sources", words("ol sup")],
+	["table", words("button div span")],
+	["tabs", words("div tabs-item")],
+	["tests", words("details div summary")],
+	["xref", words("caption figcaption figure")]
+];
+const BLOCKS = [
+	["details", words("accordion-item collapsible details")],
+	["metrics", words("progress stats")],
+	["table", words("table")],
+	["tabs", words("code-group tabs-item")],
+	["xref", words("ref")]
+];
 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 };
@@ -49,7 +124,14 @@ function preset(renderer, options = {}) {
 	add(renderer.chips, options.chips);
 	add(renderer.colors, options.colors);
 	add(renderer.diagrams, options.diagrams);
-	add(renderer.mermaid, options.mermaid);
+	if (on(options.mermaid)) {
+		const { maxDiagrams, maxSource, ...pele } = optionsOf(options.mermaid) ?? {};
+		add(renderer.mermaid, true, pele);
+		if (maxDiagrams !== void 0 || maxSource !== void 0) plugins.push(mermaid_limits_default({
+			maxDiagrams,
+			maxSource
+		}));
+	}
 	add(renderer.diff, options.diff);
 	add(renderer.embed, options.embed);
 	parse(footnotes, options.footnotes);
@@ -111,10 +193,26 @@ function preset(renderer, options = {}) {
 		plugins.push(typeset());
 		components[TYPESET_TAG] = renderer.typeset;
 	}
+	const { annotate, comments, diff, quiz } = renderer;
+	const absent = Object.entries({
+		annotate,
+		comments,
+		diff,
+		quiz
+	}).flatMap(([key, part]) => part ? [] : [key]);
+	const enabled = (key) => on(options[key], key !== "include") && !absent.includes(key);
+	const tags = /* @__PURE__ */ new Set([
+		...MARKDOWN_TAGS,
+		...on(options.github) && on(optionsOf(options.github)?.html) ? HTML_TAGS : [],
+		...TAGS.flatMap(([key, list]) => enabled(key) ? list : [])
+	]);
+	const blocks = BLOCKS.flatMap(([key, list]) => enabled(key) ? list : []);
 	return {
 		plugins,
-		components
+		components,
+		tags: [...tags],
+		blocks
 	};
 }
 //#endregion
-export { typeset as i, preset as n, TYPESET_TAG as r, criticCss as t };
+export { typeset as a, TYPESET_TAG as i, criticCss as n, preset as r, commentsCss as t };

package/dist/svelte/index.d.ts

@@ -1,7 +1,7 @@
 import type { Component } from "svelte";
 import type { Preset, PresetOptions } from "comark-ui";
 
-export { criticCss } from "comark-ui";
+export { commentsCss, criticCss } from "comark-ui";
 export type { PresetOptions } from "comark-ui";
 
 /** Every plugin with components for `@comark/svelte`, which leaves out annotate, comments, diff, and quiz. */

package/dist/svelte/index.js

@@ -35,7 +35,7 @@ import * as zoom from "comark-zoom/svelte";
 import Mermaid from "./Mermaid.svelte";
 import typeset from "./Typeset.svelte";
 
-export { criticCss } from "comark-ui";
+export { commentsCss, criticCss } from "comark-ui";
 
 const mermaid = { default: pele, components: { pele: Mermaid } };
 

package/dist/{typeset-css-blSNpFNK.mjs → typeset-css-BYvWbqWz.mjs}

@@ -137,7 +137,8 @@ const rules = `
   }
 
   &:where(img, video) { border-radius: var(--_ty-radius); max-width: 100%; height: auto; margin-block: var(--_ty-flow) 0; }
-  &:where(p img) { margin-block-start: 0; }
+  /* An image in a line of text sits on the text; a block's top margin would push it below. */
+  &:where(:is(p, li, td, th, a) img) { margin-block-start: 0; }
   &:where(figure) { margin-block: var(--_ty-flow) 0; margin-inline: 0; }
   &:where(figcaption, caption) {
     color: var(--_ty-muted); font-size: 0.875em; text-align: center; margin-block-start: calc(0.75em / 0.875);
@@ -175,10 +176,18 @@ const rules = `
 }
 
 /* Code highlighted with a light and a dark theme follows the page into dark mode, as the tokens do: a .dark class
-   above it, or the system's dark mode on a page with no .light class. Only spans that carry a dark color switch. */
-.shiki:where(.dark *) span[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
+   above it, or the system's dark mode on a page with no .light class. A span switches what it has a dark value for. */
+.shiki:where(.dark *) span {
+  &[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
+  &[style*="--shiki-dark-font-style:"] { font-style: var(--shiki-dark-font-style) !important; }
+  &[style*="--shiki-dark-font-weight:"] { font-weight: var(--shiki-dark-font-weight) !important; }
+}
 @media (prefers-color-scheme: dark) {
-  .shiki:not(:where(.light *)) span[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
+  .shiki:not(:where(.light *)) span {
+    &[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
+    &[style*="--shiki-dark-font-style:"] { font-style: var(--shiki-dark-font-style) !important; }
+    &[style*="--shiki-dark-font-weight:"] { font-weight: var(--shiki-dark-font-weight) !important; }
+  }
 }
 
 /* A block marked data-wide, such as a before/after comparison or a diagram wider than the text, grows past the column
@@ -212,5 +221,11 @@ const rules = `
 * the page wins over both.
 */
 const typesetCss = `@layer comark{@layer typeset{@scope{${theme(":scope", "primary")}${rules}}}}`.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/ ?([{};,>(]) ?/g, "$1").replace(/: /g, ":").trim();
+/**
+* The same styles for a page's own stylesheet, scoped to every element that matches `selector`, for Comark content
+* that isn't a rendered document, such as a rich-text editor. `comark-ui/typeset.css` is this with `.comark-typeset`.
+* The rules are the same string as `typesetCss`, so the two can't drift.
+*/
+const typesetStylesheet = (selector = ".comark-typeset") => typesetCss.replace("@scope{", `@scope (${selector}){`);
 //#endregion
-export { typesetCss as t };
+export { typesetStylesheet as n, typesetCss as t };

package/dist/{typeset-css-DdOGL7WF.d.mts → typeset-css-DtOLAa1Z.d.mts}

@@ -6,5 +6,11 @@
  * the page wins over both.
  */
 declare const typesetCss: string;
+/**
+ * The same styles for a page's own stylesheet, scoped to every element that matches `selector`, for Comark content
+ * that isn't a rendered document, such as a rich-text editor. `comark-ui/typeset.css` is this with `.comark-typeset`.
+ * The rules are the same string as `typesetCss`, so the two can't drift.
+ */
+declare const typesetStylesheet: (selector?: string) => string;
 //#endregion
-export { typesetCss as t };
+export { typesetStylesheet as n, typesetCss as t };

package/dist/typeset.css

@@ -0,0 +1 @@
+@layer comark{@layer typeset{@scope (.comark-typeset){:where(:scope){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media(prefers-color-scheme:dark){:where(:scope){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:scope{--_ty-flow:var(--typeset-flow,1.25em);--_ty-muted:var(--_comark-muted);--_ty-rule:var(--_comark-border);--_ty-surface:var(--_comark-accent);--_ty-radius:calc(var(--_comark-radius) * 0.8);--_ty-mono:var(--comark-font-mono,var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace));font-family:var(--_comark-font);font-size:calc(var(--typeset-size,1em) * 1.125);line-height:var(--typeset-leading,1.75);color:var(--_comark-foreground);overflow-wrap:break-word;background-image:var(--comark-grain,url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"));background-repeat:repeat;background-size:var(--comark-grain-size,256px 256px);@media(min-width:48rem),print{font-size:var(--typeset-size,1em);}}:scope *:not(:where(.not-typeset,[data-not-typeset],.not-typeset *,[data-not-typeset] *)){&:where(p){margin-block:var(--_ty-flow) 0;}&:where(h1,h2,h3,h4,h5,h6){color:var(--_comark-foreground);font-family:var(--comark-font-heading,var(--font-heading,inherit));font-weight:600;margin-block-end:0;}&:where(h1){font-size:1.75em;line-height:1.3;margin-block-start:var(--_ty-flow);}&:where(h2){font-size:1.25em;line-height:1.4;margin-block-start:calc(var(--_ty-flow) * 1.4);}&:where(h3){font-size:1.125em;line-height:1.45;margin-block-start:var(--_ty-flow);}&:where(h4){font-size:1em;line-height:1.5;margin-block-start:var(--_ty-flow);}&:where(h5){font-size:0.875em;line-height:1.5;font-weight:500;color:var(--_ty-muted);margin-block-start:calc(var(--_ty-flow) / 0.875);}&:where(h6){font-size:0.8125em;line-height:1.5;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--_ty-muted);margin-block-start:calc(var(--_ty-flow) / 0.8125);}&:where([id]){scroll-margin-block-start:var(--_ty-flow);}&:where(h1 + *,h2 + *,h3 + *,h4 + *,h5 + *,h6 + *){margin-block-start:1em;}&:where(:is(h1,h2,h3,h4) code){font-size:0.9em;}&:where(a){color:inherit;font-weight:500;text-decoration-line:underline;text-decoration-color:color-mix(in oklab,currentColor 30%,transparent);}&:where(a:hover){text-decoration-color:currentColor;}&:where(a:focus-visible){outline:2px solid var(--_comark-ring);outline-offset:2px;border-radius:0.125em;}&:where(:is(h1,h2,h3,h4,h5,h6) a){font-weight:inherit;}&:where(strong,b){font-weight:600;}&:where(mark){background-color:color-mix(in oklab,oklch(0.86 0.17 95) 40%,transparent);color:inherit;padding:0.05em 0.15em;border-radius:0.2em;}&:where(abbr[title]){text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:0.2em;cursor:help;}&:where(del,s){color:var(--_ty-muted);text-decoration-line:line-through;}&:where(sup,sub){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline;}&:where(sup){top:-0.5em;}&:where(sub){bottom:-0.25em;}&:where(sup a){text-decoration-line:none;font-weight:500;}&:where(ul){list-style-type:disc;}&:where(ol){list-style-type:decimal;}&:where(ul ul){list-style-type:circle;}&:where(ul ul ul){list-style-type:square;}&:where(ol[type="a" i]){list-style-type:lower-alpha;}&:where(ol[type="i" i]){list-style-type:lower-roman;}&:where(ol[type="A" s]){list-style-type:upper-alpha;}&:where(ol[type="I" s]){list-style-type:upper-roman;}&:where(ul,ol){margin-block:var(--_ty-flow) 0;padding-inline-start:1.5em;}&:where(li){margin-block-start:0.5em;padding-inline-start:0.4em;}&:where(li>p,li>ul,li>ol){margin-block-start:0.5em;}&:where(ul>li,ol>li)::marker{color:var(--_ty-muted);}&:where(ul.contains-task-list){list-style-type:none;padding-inline-start:0.25em;}&:where(li.task-list-item>input[type="checkbox"]){margin-inline-end:0.5em;vertical-align:-0.1em;accent-color:var(--_comark-primary);}&:where(details){margin-block:var(--_ty-flow) 0;}&:where(summary){cursor:pointer;font-weight:500;}&:where(summary)::marker{color:var(--_ty-muted);}&:where(kbd){font-family:inherit;font-size:0.85em;font-weight:500;border:1px solid var(--_ty-rule);border-block-end-width:2px;border-radius:0.35em;padding:0.0625em 0.35em;}&:where(dl){margin-block:var(--_ty-flow) 0;}&:where(dt){font-weight:500;margin-block-start:1em;}&:where(dt + dt){margin-block-start:0.25em;}&:where(dd){margin-block-start:0.25em;margin-inline-start:0;padding-inline-start:1em;color:var(--_ty-muted);}&:where(:not(pre)>code){background-color:var(--_ty-surface);font-family:var(--_ty-mono);font-size:0.85em;border-radius:0.35em;padding:0.125em 0.3em;}&:where(pre){background-color:var(--_ty-surface);font-family:var(--_ty-mono);font-size:0.875em;line-height:1.5;tab-size:2;direction:ltr;border-radius:var(--_ty-radius);padding:0.75em 1em;overflow-x:auto;margin-block:calc(var(--_ty-flow) / 0.875) 0;}&:where(pre code){background-color:transparent;font-family:inherit;font-size:inherit;padding:0;border-radius:0;}&:where(blockquote){border-inline-start:2px solid var(--_ty-rule);padding-inline-start:1em;margin-block:var(--_ty-flow) 0;margin-inline:0;}&:where(hr){border:0;border-block-start:1px solid var(--_ty-rule);margin-block:calc(var(--_ty-flow) * 2.4) 0;}&:where(hr + h1,hr + h2,hr + h3,hr + h4){margin-block-start:var(--_ty-flow);}&:where(.footnotes,[data-footnotes]){margin-block-start:calc(var(--_ty-flow) * 2);font-size:0.875em;color:var(--_ty-muted);}&:where(.footnotes>hr:first-child){margin-block-start:0;}&:where(.footnote-ref a,.footnote-backref){text-decoration-line:none;}&:where(math[display="block"]){margin-block:var(--_ty-flow) 0;overflow-x:auto;overflow-y:hidden;padding-block:0.25em;}&:where(img,video){border-radius:var(--_ty-radius);max-width:100%;height:auto;margin-block:var(--_ty-flow) 0;}&:where(:is(p,li,td,th,a) img){margin-block-start:0;}&:where(figure){margin-block:var(--_ty-flow) 0;margin-inline:0;}&:where(figcaption,caption){color:var(--_ty-muted);font-size:0.875em;text-align:center;margin-block-start:calc(0.75em / 0.875);}&:where(caption){caption-side:bottom;}&:where(table){display:block;width:max-content;max-width:100%;overflow-x:auto;font-size:1em;line-height:1.5;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0;border-block-end:1px solid var(--_ty-rule);margin-block:var(--_ty-flow) 0;}&:where(thead th){font-weight:500;text-align:start;padding:0.65em 1em;}&:where(:is(tbody,tfoot) :is(td,th)){padding:0.75em 1em;text-align:start;vertical-align:top;border-block-start:1px solid var(--_ty-rule);}&:where(tbody th,tfoot th){font-weight:500;}&:where(th:first-child,td:first-child){padding-inline-start:0;}&:where(th[align="center"],td[align="center"]){text-align:center;}&:where(th[align="right"],td[align="right"]){text-align:end;}&:where(li>blockquote,li>table,li>figure){margin-block-start:0.5em;}&:where(li>pre){margin-block-start:calc(0.5em / 0.875);}@media print{&:where(pre,table,blockquote,figure){break-inside:avoid;}&:where(h1,h2,h3,h4){break-after:avoid;}}@media(forced-colors:active){&:where(:not(pre)>code){border:1px solid;}}}.shiki:where(.dark *) span{&[style*="--shiki-dark:"]{color:var(--shiki-dark) !important;}&[style*="--shiki-dark-font-style:"]{font-style:var(--shiki-dark-font-style) !important;}&[style*="--shiki-dark-font-weight:"]{font-weight:var(--shiki-dark-font-weight) !important;}}@media(prefers-color-scheme:dark){.shiki:not(:where(.light *)) span{&[style*="--shiki-dark:"]{color:var(--shiki-dark) !important;}&[style*="--shiki-dark-font-style:"]{font-style:var(--shiki-dark-font-style) !important;}&[style*="--shiki-dark-font-weight:"]{font-weight:var(--shiki-dark-font-weight) !important;}}}:scope>[data-wide]{--_ty-start:max(0px,var(--comark-wide-start,0px));--_ty-end:max(0px,var(--comark-wide-end,0px));--_ty-wide:max(100%,min(var(--comark-wide-width,100vw),var(--comark-wide-max,72rem),100% + var(--_ty-start) + var(--_ty-end)));width:var(--_ty-wide);margin-inline:clamp(-1 * var(--_ty-start),(100% - var(--_ty-wide)) / 2,100% + var(--_ty-end) - var(--_ty-wide)) 0;}:scope>:where(:first-child):not(:where(.not-typeset,[data-not-typeset],.not-typeset *,[data-not-typeset] *)),:scope>:where(:first-child)>:where(:first-child):not(:where(.not-typeset,[data-not-typeset],.not-typeset *,[data-not-typeset] *)),:scope :where(li>:first-child,blockquote>:first-child,td>:first-child,th>:first-child,dd>:first-child,figure>:first-child,figure>picture>img ):not(:where(.not-typeset,[data-not-typeset],.not-typeset *,[data-not-typeset] *)){margin-block-start:0;}}}}

package/dist/vue.d.mts

@@ -1,7 +1,7 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-DVGSDzBS.mjs";
+import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-BTyvRIPX.mjs";
 import { Component } from "vue";
 //#region src/vue.d.ts
 /** Every plugin with components for `@comark/vue`, which leaves out annotate, comments, diff, and quiz. */
 declare const _default: (options?: PresetOptions) => Preset<Component>;
 //#endregion
-export { type PresetOptions, criticCss, _default as default };
+export { type PresetOptions, commentsCss, criticCss, _default as default };

package/dist/vue.mjs

@@ -1,5 +1,5 @@
-import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
-import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
+import { n as criticCss, r as preset, t as commentsCss } from "./src-Baygj6ZQ.mjs";
+import { t as typesetCss } from "./typeset-css-BYvWbqWz.mjs";
 import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
 import * as properties from "comark-properties/vue";
 import { defineComponent, h, onBeforeUnmount, onMounted } from "vue";
@@ -110,4 +110,4 @@ var vue_default = (options) => preset({
 	zoom
 }, options);
 //#endregion
-export { criticCss, vue_default as default };
+export { commentsCss, criticCss, vue_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Every comark-ui block in one install: annotated screenshots, charts, diffs, tabs, zoom, and more, registered in the order they need with shared icons. Turn any of them off or pass its options.",
   "keywords": [
     "comark",
@@ -23,7 +23,9 @@
     "dist"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": "./dist/index.mjs",
     "./client": "./dist/client.mjs",
@@ -40,7 +42,8 @@
     "./vue": "./dist/vue.mjs",
     "./package.json": "./package.json",
     "./skills": "./dist/skills.mjs",
-    "./skills/*": "./dist/skills/*"
+    "./skills/*": "./dist/skills/*",
+    "./typeset.css": "./dist/typeset.css"
   },
   "publishConfig": {
     "access": "public",
@@ -48,50 +51,50 @@
   },
   "dependencies": {
     "comark-pele": "^1.1.0",
-    "comark-annotate": "^0.8.1",
-    "comark-carousel": "^0.8.1",
-    "comark-cast": "^0.8.1",
-    "comark-badge": "^0.8.1",
-    "comark-charts": "^0.8.1",
-    "comark-cards": "^0.8.1",
-    "comark-chips": "^0.8.1",
-    "comark-cjk": "^0.8.1",
-    "comark-code-notes": "^0.8.1",
-    "comark-comments": "^0.8.1",
-    "comark-code": "^0.8.1",
-    "comark-colors": "^0.8.1",
-    "comark-critic": "^0.8.1",
-    "comark-deflist": "^0.8.1",
-    "comark-details": "^0.8.1",
-    "comark-diagrams": "^0.8.1",
-    "comark-diff": "^0.8.1",
-    "comark-embed": "^0.8.1",
-    "comark-figure": "^0.8.1",
-    "comark-footnotes": "^0.8.1",
-    "comark-file-tree": "^0.8.1",
-    "comark-fields": "^0.8.1",
-    "comark-keys": "^0.8.1",
-    "comark-include": "^0.8.1",
-    "comark-icon": "^0.8.1",
-    "comark-github": "^0.8.1",
-    "comark-magic-move": "^0.8.1",
-    "comark-mark": "^0.8.1",
-    "comark-links": "^0.8.1",
-    "comark-media": "^0.8.1",
-    "comark-mathml": "^0.8.1",
-    "comark-metrics": "^0.8.1",
-    "comark-properties": "^0.8.1",
-    "comark-outline": "^0.8.1",
-    "comark-qr": "^0.8.1",
-    "comark-quiz": "^0.8.1",
-    "comark-steps": "^0.8.1",
-    "comark-table": "^0.8.1",
-    "comark-sources": "^0.8.1",
-    "comark-reading-time": "^0.8.1",
-    "comark-tabs": "^0.8.1",
-    "comark-tests": "^0.8.1",
-    "comark-xref": "^0.8.1",
-    "comark-zoom": "^0.8.1"
+    "comark-annotate": "^0.8.2",
+    "comark-cast": "^0.8.2",
+    "comark-cards": "^0.8.2",
+    "comark-charts": "^0.8.2",
+    "comark-carousel": "^0.8.2",
+    "comark-badge": "^0.8.2",
+    "comark-chips": "^0.8.2",
+    "comark-cjk": "^0.8.2",
+    "comark-code": "^0.8.2",
+    "comark-colors": "^0.8.2",
+    "comark-critic": "^0.8.2",
+    "comark-details": "^0.8.2",
+    "comark-deflist": "^0.8.2",
+    "comark-comments": "^0.8.2",
+    "comark-diagrams": "^0.8.2",
+    "comark-code-notes": "^0.8.2",
+    "comark-embed": "^0.8.2",
+    "comark-diff": "^0.8.2",
+    "comark-fields": "^0.8.2",
+    "comark-figure": "^0.8.2",
+    "comark-file-tree": "^0.8.2",
+    "comark-include": "^0.8.2",
+    "comark-icon": "^0.8.2",
+    "comark-keys": "^0.8.2",
+    "comark-links": "^0.8.2",
+    "comark-mathml": "^0.8.2",
+    "comark-footnotes": "^0.8.2",
+    "comark-mark": "^0.8.2",
+    "comark-github": "^0.8.2",
+    "comark-magic-move": "^0.8.2",
+    "comark-metrics": "^0.8.2",
+    "comark-media": "^0.8.2",
+    "comark-outline": "^0.8.2",
+    "comark-quiz": "^0.8.2",
+    "comark-reading-time": "^0.8.2",
+    "comark-steps": "^0.8.2",
+    "comark-properties": "^0.8.2",
+    "comark-table": "^0.8.2",
+    "comark-tests": "^0.8.2",
+    "comark-tabs": "^0.8.2",
+    "comark-xref": "^0.8.2",
+    "comark-qr": "^0.8.2",
+    "comark-zoom": "^0.8.2",
+    "comark-sources": "^0.8.2"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",