vantage-md 0.5.6 → 0.5.7

package/dist/react.cjs

@@ -39,6 +39,7 @@ let rehype_katex = require("rehype-katex");
 rehype_katex = __toESM(rehype_katex, 1);
 let rehype_slug = require("rehype-slug");
 rehype_slug = __toESM(rehype_slug, 1);
+let unist_util_visit = require("unist-util-visit");
 let yaml = require("yaml");
 yaml = __toESM(yaml, 1);
 let smol_toml = require("smol-toml");
@@ -69,24 +70,145 @@ const BLOCK_TAGS = /* @__PURE__ */ new Set([
 	"hr",
 	"div"
 ]);
-function visit(node, offset) {
+function visit$1(node, offset) {
 	if ("children" in node) {
 		for (const child of node.children) if (child.type === "element") {
 			if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
 				child.properties = child.properties || {};
 				child.properties["dataSourceLine"] = child.position.start.line + offset;
 			}
-			visit(child, offset);
+			visit$1(child, offset);
 		}
 	}
 }
 const rehypeSourceLines = (options) => {
 	const offset = options?.offset ?? 0;
 	return (tree) => {
-		visit(tree, offset);
+		visit$1(tree, offset);
 	};
 };
 //#endregion
+//#region src/rehypeVantageAlerts.ts
+/**
+* GFM alerts — `> [!WARNING]` — compiled into `data-vantage-alert`.
+*
+* `remark-gfm` does not implement alerts, so until this plugin existed a
+* `> [!WARNING]` rendered as an ordinary blockquote with the literal marker
+* visible as its first words. Worse than merely unstyled: `@tailwindcss/typography`
+* italicises blockquotes and draws `open-quote`/`close-quote` around the first
+* paragraph, so a callout came out as an italic *quotation* whose opening words
+* were `"[!WARNING]`. That was the "Known gaps" entry in
+* `docs/reference/inline-markup.md` and OQ-10, filed rather than fixed, while
+* `styleGuide.ts` went on telling every agent to write them.
+*
+* The tokens are deliberately the ones the `tone` vocabulary already resolves —
+* an alert *is* the six-colour light/dark treatment `tone` shipped, which is
+* exactly what the gap entry said whoever fixed this should do rather than
+* building a second palette. `[!WARNING]` and `<!-- vantage: block tone=warning -->`
+* therefore agree by construction, and adding a theme still touches one
+* custom-property block.
+*
+* **This runs in the shared pipeline, so all four renderers get it** — the live
+* viewer, the package's exported viewer, the static export and the CLI checker's
+* `renderMarkdown`. That is what makes an injected title element acceptable here
+* where the collapse caret's glyph had to be drawn in CSS: the caret is injected
+* by app JS that may never run, and this is not (D5).
+*
+* ## What it does not do
+*
+* It does not touch a blockquote that carries no marker, and an unrecognised
+* marker (`[!HINT]`) is left exactly as it was — visible literal text, which is
+* the honest rendering of something GitHub also would not style. Silently
+* swallowing it would hide a typo that reads as a callout on neither renderer.
+*/
+/**
+* The five GFM alert kinds, lowercased.
+*
+* Deliberately *not* re-derived from `VANTAGE_TONES`: that list carries a sixth
+* token, `muted`, which is ours and is not an alert word. The overlap is the
+* point — the five that coincide share a palette — but the two vocabularies are
+* closed by different authorities and a change to one must not silently move the
+* other. A test asserts the five are a subset of the tones.
+*/
+const VANTAGE_ALERTS = [
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution"
+];
+/** The visible label per kind. Title case, as GitHub renders it. */
+const ALERT_TITLES = {
+	note: "Note",
+	tip: "Tip",
+	important: "Important",
+	warning: "Warning",
+	caution: "Caution"
+};
+/**
+* The marker, anchored and requiring the rest of its line to be empty.
+*
+* GFM puts the marker alone on the blockquote's first line, and holding to that
+* is what keeps a paragraph that merely *begins* with bracketed text from being
+* eaten. The trailing newline is optional only for the degenerate blockquote
+* whose entire content is the marker.
+*
+* Measured against the real chain rather than assumed: `remark-parse` reads
+* `[!TIP]` as a shortcut link reference, and because no definition matches,
+* `mdast-util-to-hast` puts it back as **one** leading text node —
+* `"[!TIP]\nThe generalization: "` — not as a `[`/label/`]` triple. So a single
+* anchored test on the first text node is enough, and the plugin does not have
+* to reassemble the marker across siblings.
+*/
+const MARKER = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\r?\n|$)/;
+/** The first child, if it is an element. */
+function firstElement(node) {
+	const child = node.children.find((c) => c.type === "element" || c.type === "text" && c.value.trim() !== "");
+	return child?.type === "element" ? child : void 0;
+}
+/**
+* Compile `> [!KIND]` blockquotes into `data-vantage-alert="kind"`.
+*
+* Order in the chain matters twice, and both are stated in `pipeline.ts`:
+*
+* - **after `rehypeSourceLines`**, so the injected title carries no
+*   `data-source-line`. That is what keeps it out of `anchorBlockWithin`, which
+*   filters candidates to those with a finite line — otherwise a review comment
+*   on an alert would anchor to the word "Warning" instead of to the prose.
+* - **before `rehypeSanitize`**, so nothing reaches the DOM the schema has not
+*   passed. `dataVantageAlert` is allowlisted there by name *and* value, like
+*   every other `data-vantage-*` attribute.
+*/
+function rehypeVantageAlerts() {
+	return (tree) => {
+		(0, unist_util_visit.visit)(tree, "element", (node) => {
+			if (node.tagName !== "blockquote") return;
+			const paragraph = firstElement(node);
+			if (paragraph === void 0 || paragraph.tagName !== "p") return;
+			const lead = paragraph.children[0];
+			if (lead === void 0 || lead.type !== "text") return;
+			const match = MARKER.exec(lead.value);
+			if (match === null) return;
+			const kind = match[1].toLowerCase();
+			lead.value = lead.value.slice(match[0].length);
+			if (lead.value === "" && paragraph.children.length === 1) node.children = node.children.filter((c) => c !== paragraph);
+			node.properties = {
+				...node.properties,
+				dataVantageAlert: kind
+			};
+			node.children.unshift({
+				type: "element",
+				tagName: "div",
+				properties: { className: ["vantage-alert-title"] },
+				children: [{
+					type: "text",
+					value: ALERT_TITLES[kind]
+				}]
+			});
+		});
+	};
+}
+//#endregion
 //#region src/vantageDirectives.ts
 /**
 * The `tone` vocabulary: GitHub's alert words plus `muted`.
@@ -827,6 +949,7 @@ const sanitizeSchema = {
 			["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
 			["dataVantageRun", ...VANTAGE_RUNS],
 			["dataVantageOq", "true"],
+			["dataVantageAlert", ...VANTAGE_ALERTS],
 			"dataVantageLeaning"
 		],
 		code: [...rehype_sanitize.defaultSchema.attributes?.code || [], "className"],
@@ -872,6 +995,7 @@ function buildRehypePlugins(options = {}) {
 	const { math = true, highlight = true, sourceLines = true, sanitize = true, bodyLineOffset = 0 } = options;
 	const plugins = [rehype_raw.default];
 	if (sourceLines) plugins.push([rehypeSourceLines, { offset: bodyLineOffset }]);
+	plugins.push(rehypeVantageAlerts);
 	plugins.push(rehypeVantageDirectives);
 	if (sanitize) plugins.push([rehype_sanitize.default, sanitizeSchema]);
 	plugins.push(rehype_slug.default);