vantage-md 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/react.js CHANGED
@@ -1,1836 +1,2115 @@
1
- import { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
2
- import ReactMarkdown from 'react-markdown';
3
- import remarkGfm from 'remark-gfm';
4
- import remarkMath from 'remark-math';
5
- import rehypeRaw from 'rehype-raw';
6
- import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
7
- import rehypeHighlight from 'rehype-highlight';
8
- import rehypeKatex from 'rehype-katex';
9
- import rehypeSlug from 'rehype-slug';
10
- import YAML from 'yaml';
11
- import { parse } from 'smol-toml';
12
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
13
- import { unified } from 'unified';
14
- import remarkParse from 'remark-parse';
15
- import remarkRehype from 'remark-rehype';
16
- import rehypeStringify from 'rehype-stringify';
17
-
18
- // src/MarkdownViewer.tsx
19
-
20
- // src/rehypeSourceLines.ts
21
- var BLOCK_TAGS = /* @__PURE__ */ new Set([
22
- "p",
23
- "h1",
24
- "h2",
25
- "h3",
26
- "h4",
27
- "h5",
28
- "h6",
29
- "li",
30
- "blockquote",
31
- "pre",
32
- "table",
33
- "tr",
34
- "ul",
35
- "ol",
36
- "hr",
37
- "div"
1
+ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
2
+ import ReactMarkdown from "react-markdown";
3
+ import remarkGfm from "remark-gfm";
4
+ import remarkMath from "remark-math";
5
+ import rehypeRaw from "rehype-raw";
6
+ import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
7
+ import rehypeHighlight from "rehype-highlight";
8
+ import rehypeKatex from "rehype-katex";
9
+ import rehypeSlug from "rehype-slug";
10
+ import YAML from "yaml";
11
+ import { parse } from "smol-toml";
12
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
13
+ import { unified } from "unified";
14
+ import remarkParse from "remark-parse";
15
+ import remarkRehype from "remark-rehype";
16
+ import rehypeStringify from "rehype-stringify";
17
+ //#region src/rehypeSourceLines.ts
18
+ const BLOCK_TAGS = /* @__PURE__ */ new Set([
19
+ "p",
20
+ "h1",
21
+ "h2",
22
+ "h3",
23
+ "h4",
24
+ "h5",
25
+ "h6",
26
+ "li",
27
+ "blockquote",
28
+ "pre",
29
+ "table",
30
+ "tr",
31
+ "ul",
32
+ "ol",
33
+ "hr",
34
+ "div"
38
35
  ]);
39
36
  function visit(node, offset) {
40
- if ("children" in node) {
41
- for (const child of node.children) {
42
- if (child.type === "element") {
43
- if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
44
- child.properties = child.properties || {};
45
- child.properties["dataSourceLine"] = child.position.start.line + offset;
46
- }
47
- visit(child, offset);
48
- }
49
- }
50
- }
37
+ if ("children" in node) {
38
+ for (const child of node.children) if (child.type === "element") {
39
+ if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
40
+ child.properties = child.properties || {};
41
+ child.properties["dataSourceLine"] = child.position.start.line + offset;
42
+ }
43
+ visit(child, offset);
44
+ }
45
+ }
51
46
  }
52
- var rehypeSourceLines = (options) => {
53
- const offset = options?.offset ?? 0;
54
- return (tree) => {
55
- visit(tree, offset);
56
- };
47
+ const rehypeSourceLines = (options) => {
48
+ const offset = options?.offset ?? 0;
49
+ return (tree) => {
50
+ visit(tree, offset);
51
+ };
57
52
  };
58
- var rehypeSourceLines_default = rehypeSourceLines;
59
-
60
- // src/vantageDirectives.ts
61
- var VANTAGE_TONES = [
62
- "note",
63
- "tip",
64
- "important",
65
- "warning",
66
- "caution",
67
- "muted"
53
+ //#endregion
54
+ //#region src/vantageDirectives.ts
55
+ /**
56
+ * The `tone` vocabulary: GitHub's alert words plus `muted`.
57
+ *
58
+ * Semantic, never chromatic (P2, Ledger OQ-3). A document says what a section
59
+ * *is*; the theme decides what that looks like, which is what lets one document
60
+ * render correctly in light, in dark, and in themes that do not exist yet.
61
+ */
62
+ const VANTAGE_TONES = [
63
+ "note",
64
+ "tip",
65
+ "important",
66
+ "warning",
67
+ "caution",
68
+ "muted"
69
+ ];
70
+ /** How much the block should pull the eye — separate from `tone` on purpose. */
71
+ const VANTAGE_EMPHASIS = [
72
+ "strong",
73
+ "normal",
74
+ "quiet"
75
+ ];
76
+ /** A small chip beside the heading. */
77
+ const VANTAGE_BADGES = [
78
+ "draft",
79
+ "stale",
80
+ "blocked",
81
+ "done",
82
+ "wip"
68
83
  ];
69
- var VANTAGE_EMPHASIS = ["strong", "normal", "quiet"];
70
- var VANTAGE_BADGES = [
71
- "draft",
72
- "stale",
73
- "blocked",
74
- "done",
75
- "wip"
84
+ /**
85
+ * `collapsed` is a token, not a flag: `false` is the default written down.
86
+ *
87
+ * It stamps nothing on its own. Its one real effect is overriding a
88
+ * `collapsed=true` earlier in the same merged directive run — last key wins — so
89
+ * it is in the vocabulary rather than being an unknown value that drops. It
90
+ * cannot cancel an *enclosing* collapsed section: a nested heading is a hidden
91
+ * member of the outer group by design (A3), and the outer run is stamped before
92
+ * any inner directive has been resolved.
93
+ */
94
+ const VANTAGE_COLLAPSED = ["true", "false"];
95
+ /**
96
+ * Where a block sits in a stamped run, so section-wide CSS can join its members
97
+ * without an adjacent-sibling combinator.
98
+ *
99
+ * Not cosmetic. Review mode inserts comment cards as siblings *inside* a
100
+ * stamped run (`useReviewHighlights`), so `[tone] + [tone]` severs at every
101
+ * commented paragraph and bleeds across the boundary between two adjacent runs
102
+ * of different tone. An attribute survives both.
103
+ */
104
+ const VANTAGE_RUNS = [
105
+ "start",
106
+ "middle",
107
+ "end",
108
+ "only"
76
109
  ];
77
- var VANTAGE_COLLAPSED = ["true", "false"];
78
- var VANTAGE_RUNS = ["start", "middle", "end", "only"];
79
- var VANTAGE_STYLE_TARGETS = [
80
- "p",
81
- "h1",
82
- "h2",
83
- "h3",
84
- "h4",
85
- "h5",
86
- "h6",
87
- "li",
88
- "blockquote",
89
- "pre",
90
- "table",
91
- "tr",
92
- "ul",
93
- "ol",
94
- "hr",
95
- "div"
110
+ /**
111
+ * The tags a `section`/`block` directive may stamp.
112
+ *
113
+ * Deliberately `rehypeSourceLines`'s `BLOCK_TAGS`: a stamped block should also
114
+ * be a block with a `data-source-line`, so the styling surface and the anchor
115
+ * surface coincide. It also keeps an inline directive from stamping the `<em>`
116
+ * that happens to follow it inside a paragraph.
117
+ *
118
+ * It lives here rather than in the plugin because the CLI checker has to answer
119
+ * "will this directive stamp anything?" from an mdast tree with no hast in
120
+ * sight. A checker with its own copy of this list is a checker that calls a
121
+ * working directive an orphan, or stays silent about a dead one (D5).
122
+ */
123
+ const VANTAGE_STYLE_TARGETS = [
124
+ "p",
125
+ "h1",
126
+ "h2",
127
+ "h3",
128
+ "h4",
129
+ "h5",
130
+ "h6",
131
+ "li",
132
+ "blockquote",
133
+ "pre",
134
+ "table",
135
+ "tr",
136
+ "ul",
137
+ "ol",
138
+ "hr",
139
+ "div"
96
140
  ];
97
- var VANTAGE_ANCHOR_TARGETS = [
98
- "p",
99
- "h1",
100
- "h2",
101
- "h3",
102
- "h4",
103
- "h5",
104
- "h6",
105
- "li",
106
- "blockquote",
107
- "pre",
108
- "table"
141
+ /**
142
+ * The tags an `oq` directive may stamp — strictly the tags the review system
143
+ * can resolve an anchor on (`ANCHOR_TAGS` in the app's `MarkdownViewer`, and the
144
+ * block map in `useReviewHighlights`). `ul`, `ol`, `tr`, `hr` and `div` are in
145
+ * neither, so a button on one of them would build an anchor no review pass can
146
+ * find — the "mis-wired button" D6 forbids.
147
+ *
148
+ * The gap between this list and `VANTAGE_STYLE_TARGETS` is why an `oq`
149
+ * directive at column 0 above a list silently does nothing: the target is the
150
+ * `<ul>`, not the `<li>`. The checker says so.
151
+ */
152
+ const VANTAGE_ANCHOR_TARGETS = [
153
+ "p",
154
+ "h1",
155
+ "h2",
156
+ "h3",
157
+ "h4",
158
+ "h5",
159
+ "h6",
160
+ "li",
161
+ "blockquote",
162
+ "pre",
163
+ "table"
109
164
  ];
110
- var STYLE_KEYS = {
111
- tone: VANTAGE_TONES,
112
- emphasis: VANTAGE_EMPHASIS,
113
- badge: VANTAGE_BADGES,
114
- collapsed: VANTAGE_COLLAPSED
165
+ VANTAGE_ANCHOR_TARGETS.filter((tag) => tag !== "pre" && tag !== "table");
166
+ const STYLE_KEYS = {
167
+ tone: VANTAGE_TONES,
168
+ emphasis: VANTAGE_EMPHASIS,
169
+ badge: VANTAGE_BADGES,
170
+ collapsed: VANTAGE_COLLAPSED
115
171
  };
116
- var DIRECTIVE_VOCABULARY = {
117
- section: STYLE_KEYS,
118
- block: STYLE_KEYS,
119
- oq: { id: null, leaning: null }
172
+ /**
173
+ * Name → key → the closed value set for that key.
174
+ *
175
+ * `section` and `block` share their keys: they differ in *extent*, not in what
176
+ * they can say. `oq`'s two keys are the design's only values with no closed set
177
+ * — `id` is a token an author chose and `leaning` is a sentence (§8.3) — so
178
+ * neither can be value-allowlisted, which is recorded here as `null` rather
179
+ * than left to a caller to guess.
180
+ */
181
+ const DIRECTIVE_VOCABULARY = {
182
+ section: STYLE_KEYS,
183
+ block: STYLE_KEYS,
184
+ oq: {
185
+ id: null,
186
+ leaning: null
187
+ }
120
188
  };
121
- var WS = /[ \t\r\n]*/y;
122
- var SENTINEL_PREFIX = /^[ \t\r\n]*vantage:/;
123
- var NAME = /[a-z][a-z0-9-]*/y;
124
- var UNQUOTED = /[A-Za-z0-9_.:#-]+/y;
125
- var QUOTED = /"[^"]*"/y;
189
+ /**
190
+ * `ws` is `[ \t\r\n]` — the design's grammar leaves it undefined, and `\n` has
191
+ * to be in the set because a directive may legally wrap: a multi-line comment
192
+ * is one node whose value contains the newlines.
193
+ */
194
+ const WS = /[ \t\r\n]*/y;
195
+ const SENTINEL_PREFIX = /^[ \t\r\n]*vantage:/;
196
+ const NAME = /[a-z][a-z0-9-]*/y;
197
+ const UNQUOTED = /[A-Za-z0-9_.:#-]+/y;
198
+ /**
199
+ * A quoted value holds anything but a `"`, `--` included: measured through the
200
+ * real chain, `leaning="a--b"` reaches the tree intact, because HTML5 closes a
201
+ * comment on `-->` or `--!>` and on nothing else. There is deliberately **no**
202
+ * `--` restriction here. What a quoted value cannot hold is a terminator: a
203
+ * `-->` inside one ends the comment early and spills the tail into the document
204
+ * as literal text, which is a finding for the checker rather than a rule here —
205
+ * by the time this function runs, the truncation has already happened.
206
+ */
207
+ const QUOTED = /"[^"]*"/y;
208
+ /** The whole non-whitespace run at `offset`, capped, for a quotable message. */
126
209
  function token(comment, offset) {
127
- const rest = comment.slice(offset);
128
- const end = rest.search(/[ \t\r\n]/);
129
- const word = end === -1 ? rest : rest.slice(0, end);
130
- return word.length > 24 ? `${word.slice(0, 24)}\u2026` : word;
210
+ const rest = comment.slice(offset);
211
+ const end = rest.search(/[ \t\r\n]/);
212
+ const word = end === -1 ? rest : rest.slice(0, end);
213
+ return word.length > 24 ? `${word.slice(0, 24)}…` : word;
131
214
  }
215
+ /** The sticky match at `offset`, or `null` if the pattern does not apply. */
132
216
  function matchAt(pattern, comment, offset) {
133
- pattern.lastIndex = offset;
134
- const match = pattern.exec(comment);
135
- return match === null ? null : match[0];
217
+ pattern.lastIndex = offset;
218
+ const match = pattern.exec(comment);
219
+ return match === null ? null : match[0];
136
220
  }
221
+ /** How much whitespace sits at `offset`. `WS` matches everywhere, empty. */
137
222
  function skipWhitespace(comment, offset) {
138
- return matchAt(WS, comment, offset)?.length ?? 0;
223
+ return matchAt(WS, comment, offset)?.length ?? 0;
139
224
  }
140
225
  function malformed(reason, offset) {
141
- return { kind: "malformed", reason, offset };
226
+ return {
227
+ kind: "malformed",
228
+ reason,
229
+ offset
230
+ };
142
231
  }
232
+ /**
233
+ * Parse one comment's **inner** text — the value of a hast `comment` node, with
234
+ * `<!--` and `-->` already stripped. `null` means "no sentinel, not ours".
235
+ *
236
+ * Hand-rolled rather than one regular expression, because a repeated capture
237
+ * group keeps only its last match and the checker needs an offset per token to
238
+ * point at the character that broke.
239
+ */
143
240
  function parseVantageDirective(comment) {
144
- const sentinel = SENTINEL_PREFIX.exec(comment);
145
- if (sentinel === null) return null;
146
- let at = sentinel[0].length;
147
- at += skipWhitespace(comment, at);
148
- const nameOffset = at;
149
- const name = matchAt(NAME, comment, at);
150
- if (name === null) {
151
- return malformed("no directive name after `vantage:`", at);
152
- }
153
- at += name.length;
154
- const pairs = [];
155
- while (at < comment.length) {
156
- const gap = skipWhitespace(comment, at);
157
- at += gap;
158
- if (at >= comment.length) break;
159
- if (gap === 0) {
160
- return malformed(`\`${token(comment, at)}\` needs a space before it`, at);
161
- }
162
- const keyOffset = at;
163
- const key = matchAt(NAME, comment, at);
164
- if (key === null) {
165
- return malformed(
166
- `\`${token(comment, at)}\` is not a \`key=value\` pair`,
167
- at
168
- );
169
- }
170
- at += key.length;
171
- if (comment[at] !== "=") {
172
- return malformed(`\`${key}\` is not followed by \`=value\``, at);
173
- }
174
- at += 1;
175
- const valueOffset = at;
176
- const quoted = matchAt(QUOTED, comment, at);
177
- if (quoted !== null) {
178
- at += quoted.length;
179
- pairs.push({
180
- key,
181
- value: quoted.slice(1, -1),
182
- keyOffset,
183
- valueOffset,
184
- quoted: true
185
- });
186
- continue;
187
- }
188
- const unquoted = matchAt(UNQUOTED, comment, at);
189
- if (unquoted === null) {
190
- const found = token(comment, at);
191
- return malformed(
192
- found === "" ? `\`${key}=\` has no value` : `\`${found}\` is not a valid value for \`${key}\``,
193
- at
194
- );
195
- }
196
- at += unquoted.length;
197
- pairs.push({ key, value: unquoted, keyOffset, valueOffset, quoted: false });
198
- }
199
- return { kind: "directive", name, nameOffset, pairs };
241
+ const sentinel = SENTINEL_PREFIX.exec(comment);
242
+ if (sentinel === null) return null;
243
+ let at = sentinel[0].length;
244
+ at += skipWhitespace(comment, at);
245
+ const nameOffset = at;
246
+ const name = matchAt(NAME, comment, at);
247
+ if (name === null) return malformed("no directive name after `vantage:`", at);
248
+ at += name.length;
249
+ const pairs = [];
250
+ while (at < comment.length) {
251
+ const gap = skipWhitespace(comment, at);
252
+ at += gap;
253
+ if (at >= comment.length) break;
254
+ if (gap === 0) return malformed(`\`${token(comment, at)}\` needs a space before it`, at);
255
+ const keyOffset = at;
256
+ const key = matchAt(NAME, comment, at);
257
+ if (key === null) return malformed(`\`${token(comment, at)}\` is not a \`key=value\` pair`, at);
258
+ at += key.length;
259
+ if (comment[at] !== "=") return malformed(`\`${key}\` is not followed by \`=value\``, at);
260
+ at += 1;
261
+ const valueOffset = at;
262
+ const quoted = matchAt(QUOTED, comment, at);
263
+ if (quoted !== null) {
264
+ at += quoted.length;
265
+ pairs.push({
266
+ key,
267
+ value: quoted.slice(1, -1),
268
+ keyOffset,
269
+ valueOffset,
270
+ quoted: true
271
+ });
272
+ continue;
273
+ }
274
+ const unquoted = matchAt(UNQUOTED, comment, at);
275
+ if (unquoted === null) {
276
+ const found = token(comment, at);
277
+ return malformed(found === "" ? `\`${key}=\` has no value` : `\`${found}\` is not a valid value for \`${key}\``, at);
278
+ }
279
+ at += unquoted.length;
280
+ pairs.push({
281
+ key,
282
+ value: unquoted,
283
+ keyOffset,
284
+ valueOffset,
285
+ quoted: false
286
+ });
287
+ }
288
+ return {
289
+ kind: "directive",
290
+ name,
291
+ nameOffset,
292
+ pairs
293
+ };
200
294
  }
201
-
202
- // src/rehypeVantageDirectives.ts
203
- var STYLE_TARGET_TAGS = new Set(VANTAGE_STYLE_TARGETS);
204
- var ANCHOR_TARGET_TAGS = new Set(VANTAGE_ANCHOR_TARGETS);
205
- var HEADING_DEPTHS = /* @__PURE__ */ new Map([
206
- ["h1", 1],
207
- ["h2", 2],
208
- ["h3", 3],
209
- ["h4", 4],
210
- ["h5", 5],
211
- ["h6", 6]
212
- ]);
213
- var RANGE_PROPERTIES = /* @__PURE__ */ new Map([
214
- ["tone", "dataVantageTone"],
215
- ["emphasis", "dataVantageEmphasis"]
295
+ //#endregion
296
+ //#region src/rehypeVantageDirectives.ts
297
+ /**
298
+ * What a `section`/`block` and an `oq` directive may stamp.
299
+ *
300
+ * Both lists live in `vantageDirectives.ts`, with the reasoning for each tag,
301
+ * because the CLI checker resolves the same question over mdast and must reach
302
+ * the same answer (D5).
303
+ */
304
+ const STYLE_TARGET_TAGS = new Set(VANTAGE_STYLE_TARGETS);
305
+ const ANCHOR_TARGET_TAGS = new Set(VANTAGE_ANCHOR_TARGETS);
306
+ const HEADING_DEPTHS = /* @__PURE__ */ new Map([
307
+ ["h1", 1],
308
+ ["h2", 2],
309
+ ["h3", 3],
310
+ ["h4", 4],
311
+ ["h5", 5],
312
+ ["h6", 6]
216
313
  ]);
217
- var POINT_PROPERTIES = /* @__PURE__ */ new Map([["badge", "dataVantageBadge"]]);
218
- var RUN_PROPERTY = "dataVantageRun";
219
- var OQ_PROPERTY = "dataVantageOq";
220
- var LEANING_PROPERTY = "dataVantageLeaning";
221
- var COLLAPSED_PROPERTY = "dataVantageCollapsed";
222
- var COLLAPSE_GROUP_PROPERTY = "dataVantageCollapseGroup";
223
- var COLLAPSE_TOGGLE_PROPERTY = "dataVantageCollapseToggle";
224
- var MAX_LEANING = 500;
314
+ /**
315
+ * Key → hast property, for the keys that treat a whole run.
316
+ *
317
+ * A camelCase hast property serialises to the kebab-case attribute, so
318
+ * `dataVantageTone` is `data-vantage-tone` in every renderer.
319
+ *
320
+ * `tone` and `emphasis` describe what a section *is* and how loud it is, so
321
+ * every block in the range wears them: the tone rule is a slice of one
322
+ * continuous line down the section, and the weight applies to all of its prose.
323
+ *
324
+ * `collapsed` is not here because it is not one property on one block: it puts a
325
+ * toggle on the heading and a collapsed flag plus a group id on every block the
326
+ * heading hides, which `stampStyle` does with the three properties below.
327
+ */
328
+ const RANGE_PROPERTIES = /* @__PURE__ */ new Map([["tone", "dataVantageTone"], ["emphasis", "dataVantageEmphasis"]]);
329
+ /**
330
+ * Key → hast property, for the keys that mark one block: the directive's target.
331
+ *
332
+ * `badge` is the asymmetry in the vocabulary and the reason this second map
333
+ * exists. It is not a treatment of a run but a single chip — "a small chip after
334
+ * the heading text" (§4.3), drawn as `[data-vantage-badge]::after` — so a
335
+ * section-wide stamp paints the word once per paragraph, list, table and fence
336
+ * under the heading instead of once beside it.
337
+ *
338
+ * The chip is fixed here rather than in the stylesheet, because narrowing the
339
+ * CSS to `:is(h1, …, h6)` would silently draw nothing for the two placements
340
+ * that legitimately badge a non-heading — `block badge=…` on a paragraph, and a
341
+ * `section` that degraded onto one (A1) — and would leave an attribute stamped
342
+ * on every block that says something untrue about it.
343
+ */
344
+ const POINT_PROPERTIES = /* @__PURE__ */ new Map([["badge", "dataVantageBadge"]]);
345
+ const RUN_PROPERTY = "dataVantageRun";
346
+ const OQ_PROPERTY = "dataVantageOq";
347
+ const LEANING_PROPERTY = "dataVantageLeaning";
348
+ /**
349
+ * The three properties `collapsed=true` stamps across a section.
350
+ *
351
+ * The heading takes a *different* attribute from the blocks it hides, and that
352
+ * asymmetry is the whole design (A3): a nested `###` inside a collapsed `##` is
353
+ * both a hidden member of the outer group and the toggle for its own, so one
354
+ * shared attribute would make it permanently invisible and unreachable by
355
+ * either toggle. There is no `<details>` and no wrapper — the run stays a flat
356
+ * list of siblings, which is what keeps review comment cards, the typography
357
+ * plugin's `h2 + *` margin resets and the anchor surface working.
358
+ *
359
+ * Hiding is CSS, and that CSS is gated on two markers the toggle JS sets — the
360
+ * prose container's readiness, and an armed marker on each block whose group it
361
+ * gave a caret (`docs/reference/inline-markup.md`, "Collapse without a wrapper"). A renderer without the JS
362
+ * — the CLI checker's HTML, an external consumer of this package — shows every
363
+ * block, and so does any block that ended up with no control.
364
+ */
365
+ const COLLAPSED_PROPERTY = "dataVantageCollapsed";
366
+ const COLLAPSE_GROUP_PROPERTY = "dataVantageCollapseGroup";
367
+ const COLLAPSE_TOGGLE_PROPERTY = "dataVantageCollapseToggle";
368
+ /** A review-comment body, not prose. Bounds the attribute; 500 is generous. */
369
+ const MAX_LEANING = 500;
370
+ /**
371
+ * Nodes that may sit between a directive and its target.
372
+ *
373
+ * A whitespace-only `text` node always does — measured, with or without a blank
374
+ * line in the source. Comments do too, and an unrelated `<!-- TODO -->` must not
375
+ * break the chain: it is invisible in every renderer and deleted by the
376
+ * sanitiser, so letting it change a directive's meaning would make behaviour
377
+ * depend on something no reader can see.
378
+ */
225
379
  function isSkippable(node) {
226
- if (node.type === "comment" || node.type === "doctype") return true;
227
- if (node.type === "text") return node.value.trim() === "";
228
- return false;
380
+ if (node.type === "comment" || node.type === "doctype") return true;
381
+ if (node.type === "text") return node.value.trim() === "";
382
+ return false;
229
383
  }
230
384
  function headingDepth(node) {
231
- if (node.type !== "element") return void 0;
232
- return HEADING_DEPTHS.get(node.tagName);
385
+ if (node.type !== "element") return void 0;
386
+ return HEADING_DEPTHS.get(node.tagName);
233
387
  }
234
388
  function setProperty(element, property, value) {
235
- element.properties = element.properties ?? {};
236
- element.properties[property] = value;
389
+ element.properties = element.properties ?? {};
390
+ element.properties[property] = value;
237
391
  }
392
+ /**
393
+ * Where a member sits in a stamped run: `only` for a lone block, otherwise
394
+ * `start`, `middle`, `end`. See `VANTAGE_RUNS`.
395
+ */
238
396
  function runValue(index, length) {
239
- if (length === 1) return "only";
240
- if (index === 0) return "start";
241
- return index === length - 1 ? "end" : "middle";
397
+ if (length === 1) return "only";
398
+ if (index === 0) return "start";
399
+ return index === length - 1 ? "end" : "middle";
242
400
  }
401
+ /** The closed value set for one key, or `undefined` when the key is unknown. */
243
402
  function vocabularyOf(name, key) {
244
- return DIRECTIVE_VOCABULARY[name]?.[key];
403
+ return DIRECTIVE_VOCABULARY[name]?.[key];
245
404
  }
246
405
  function accepts(name, key, value) {
247
- const values = vocabularyOf(name, key);
248
- if (values === void 0) return false;
249
- return values === null || values.includes(value);
406
+ const values = vocabularyOf(name, key);
407
+ if (values === void 0) return false;
408
+ return values === null || values.includes(value);
250
409
  }
410
+ /**
411
+ * The nodes one style directive reaches, as indexes into its own parent's
412
+ * children — never outside that array, so a directive inside a blockquote or a
413
+ * list item cannot stamp past it.
414
+ *
415
+ * Position picks the target (the next sibling element); the name picks how far
416
+ * the stamp goes. `section` before a heading takes the heading and every
417
+ * following sibling until the first heading of the same or shallower depth;
418
+ * `section` before anything else degrades to that one block, and `block` is
419
+ * always that one block. A heading nested inside a stamped `blockquote` or
420
+ * `li` does not end the section: the walk never descends.
421
+ */
251
422
  function styleRange(children, targetIndex, name) {
252
- const range = [targetIndex];
253
- const depth = name === "section" ? headingDepth(children[targetIndex]) : void 0;
254
- if (depth === void 0) return range;
255
- for (let i = targetIndex + 1; i < children.length; i++) {
256
- const node = children[i];
257
- const nodeDepth = headingDepth(node);
258
- if (nodeDepth !== void 0 && nodeDepth <= depth) break;
259
- if (node.type === "element" && STYLE_TARGET_TAGS.has(node.tagName)) {
260
- range.push(i);
261
- }
262
- }
263
- return range;
423
+ const range = [targetIndex];
424
+ const depth = name === "section" ? headingDepth(children[targetIndex]) : void 0;
425
+ if (depth === void 0) return range;
426
+ for (let i = targetIndex + 1; i < children.length; i++) {
427
+ const node = children[i];
428
+ const nodeDepth = headingDepth(node);
429
+ if (nodeDepth !== void 0 && nodeDepth <= depth) break;
430
+ if (node.type === "element" && STYLE_TARGET_TAGS.has(node.tagName)) range.push(i);
431
+ }
432
+ return range;
264
433
  }
434
+ /**
435
+ * Whether this directive collapses its section — three ways to say no.
436
+ *
437
+ * `collapsed=false` stamps nothing: it is the default written down, and "not
438
+ * collapsed" is not a thing an attribute can usefully say. Its only effect is
439
+ * upstream of here — `stampRun` merges a run of comments last-key-wins, so a
440
+ * `false` cancels a `true` in the *same* run. It does not cancel an *enclosing*
441
+ * section: `styleRange` walks the outer heading's whole sibling span before any
442
+ * inner directive is resolved, and a nested heading being a hidden member of the
443
+ * outer group is the design (A3), not an oversight.
444
+ *
445
+ * A `block` scope is **dropped**, and so is a `section` that degraded onto
446
+ * a non-heading, because both would hide a lone paragraph with nothing left
447
+ * behind to reveal it — content that is simply gone, which is the P1/D8 failure
448
+ * the readiness gate exists to prevent. Only a heading can be a summary.
449
+ */
265
450
  function collapsesSection(name, pairs, target) {
266
- if (name !== "section") return false;
267
- if (pairs.get("collapsed") !== "true") return false;
268
- return headingDepth(target) !== void 0;
451
+ if (name !== "section") return false;
452
+ if (pairs.get("collapsed") !== "true") return false;
453
+ return headingDepth(target) !== void 0;
269
454
  }
270
455
  function stampStyle(children, targetIndex, name, pairs, state) {
271
- const target = children[targetIndex];
272
- if (!STYLE_TARGET_TAGS.has(target.tagName)) return;
273
- const rangeStamps = [];
274
- const targetStamps = [];
275
- for (const [key, value] of pairs) {
276
- if (!accepts(name, key, value)) continue;
277
- const rangeProperty = RANGE_PROPERTIES.get(key);
278
- if (rangeProperty !== void 0) {
279
- rangeStamps.push([rangeProperty, value]);
280
- continue;
281
- }
282
- const pointProperty = POINT_PROPERTIES.get(key);
283
- if (pointProperty !== void 0) targetStamps.push([pointProperty, value]);
284
- }
285
- const collapses = collapsesSection(name, pairs, target);
286
- if (rangeStamps.length === 0 && targetStamps.length === 0 && !collapses) {
287
- return;
288
- }
289
- const range = styleRange(children, targetIndex, name);
290
- const group = collapses && range.length > 1 ? String(state.nextGroup++) : void 0;
291
- for (let i = 0; i < range.length; i++) {
292
- const element = children[range[i]];
293
- for (const [property, value] of rangeStamps) {
294
- setProperty(element, property, value);
295
- }
296
- if (i === 0) {
297
- for (const [property, value] of targetStamps) {
298
- setProperty(element, property, value);
299
- }
300
- }
301
- if (rangeStamps.length > 0) {
302
- setProperty(element, RUN_PROPERTY, runValue(i, range.length));
303
- }
304
- if (group === void 0) continue;
305
- if (i === 0) {
306
- setProperty(element, COLLAPSE_TOGGLE_PROPERTY, group);
307
- } else {
308
- setProperty(element, COLLAPSED_PROPERTY, "true");
309
- setProperty(element, COLLAPSE_GROUP_PROPERTY, group);
310
- }
311
- }
456
+ const target = children[targetIndex];
457
+ if (!STYLE_TARGET_TAGS.has(target.tagName)) return;
458
+ const rangeStamps = [];
459
+ const targetStamps = [];
460
+ for (const [key, value] of pairs) {
461
+ if (!accepts(name, key, value)) continue;
462
+ const rangeProperty = RANGE_PROPERTIES.get(key);
463
+ if (rangeProperty !== void 0) {
464
+ rangeStamps.push([rangeProperty, value]);
465
+ continue;
466
+ }
467
+ const pointProperty = POINT_PROPERTIES.get(key);
468
+ if (pointProperty !== void 0) targetStamps.push([pointProperty, value]);
469
+ }
470
+ const collapses = collapsesSection(name, pairs, target);
471
+ if (rangeStamps.length === 0 && targetStamps.length === 0 && !collapses) return;
472
+ const range = styleRange(children, targetIndex, name);
473
+ const group = collapses && range.length > 1 ? String(state.nextGroup++) : void 0;
474
+ for (let i = 0; i < range.length; i++) {
475
+ const element = children[range[i]];
476
+ for (const [property, value] of rangeStamps) setProperty(element, property, value);
477
+ if (i === 0) for (const [property, value] of targetStamps) setProperty(element, property, value);
478
+ if (rangeStamps.length > 0) setProperty(element, RUN_PROPERTY, runValue(i, range.length));
479
+ if (group === void 0) continue;
480
+ if (i === 0) setProperty(element, COLLAPSE_TOGGLE_PROPERTY, group);
481
+ else {
482
+ setProperty(element, COLLAPSED_PROPERTY, "true");
483
+ setProperty(element, COLLAPSE_GROUP_PROPERTY, group);
484
+ }
485
+ }
312
486
  }
313
487
  function stampOq(target, pairs) {
314
- setProperty(target, OQ_PROPERTY, "true");
315
- const leaning = pairs.get("leaning");
316
- if (leaning === void 0) return;
317
- const text = leaning.replace(/\s+/g, " ").trim().slice(0, MAX_LEANING);
318
- if (text !== "") setProperty(target, LEANING_PROPERTY, text);
488
+ setProperty(target, OQ_PROPERTY, "true");
489
+ const leaning = pairs.get("leaning");
490
+ if (leaning === void 0) return;
491
+ const text = leaning.replace(/\s+/g, " ").trim().slice(0, MAX_LEANING);
492
+ if (text !== "") setProperty(target, LEANING_PROPERTY, text);
319
493
  }
494
+ /**
495
+ * Merge one run of directives onto one target, then stamp.
496
+ *
497
+ * Merging is defined on the tree, not on the source: every directive comment up
498
+ * to the target merges, last-key-wins, whether or not blank lines separate
499
+ * them. Measured — adjacent comments and comments separated by a blank line
500
+ * produce byte-identical trees, so a rule that told them apart would have to
501
+ * re-read line numbers to do it.
502
+ */
320
503
  function stampRun(children, targetIndex, run, state) {
321
- const target = children[targetIndex];
322
- const style = /* @__PURE__ */ new Map();
323
- const oq = /* @__PURE__ */ new Map();
324
- let styleName;
325
- let hasOq = false;
326
- for (const directive of run) {
327
- if (directive.name === "section" || directive.name === "block") {
328
- styleName = directive.name;
329
- for (const pair of directive.pairs) style.set(pair.key, pair.value);
330
- } else if (directive.name === "oq") {
331
- hasOq = true;
332
- for (const pair of directive.pairs) oq.set(pair.key, pair.value);
333
- }
334
- }
335
- if (styleName !== void 0) {
336
- stampStyle(children, targetIndex, styleName, style, state);
337
- }
338
- if (hasOq && ANCHOR_TARGET_TAGS.has(target.tagName)) {
339
- stampOq(target, oq);
340
- }
504
+ const target = children[targetIndex];
505
+ const style = /* @__PURE__ */ new Map();
506
+ const oq = /* @__PURE__ */ new Map();
507
+ let styleName;
508
+ let hasOq = false;
509
+ for (const directive of run) if (directive.name === "section" || directive.name === "block") {
510
+ styleName = directive.name;
511
+ for (const pair of directive.pairs) style.set(pair.key, pair.value);
512
+ } else if (directive.name === "oq") {
513
+ hasOq = true;
514
+ for (const pair of directive.pairs) oq.set(pair.key, pair.value);
515
+ }
516
+ if (styleName !== void 0) stampStyle(children, targetIndex, styleName, style, state);
517
+ if (hasOq && ANCHOR_TARGET_TAGS.has(target.tagName)) stampOq(target, oq);
341
518
  }
519
+ /** A directive comment, or `undefined` for anything else — malformed included. */
342
520
  function directiveOf(node) {
343
- if (node.type !== "comment") return void 0;
344
- const parsed = parseVantageDirective(node.value);
345
- return parsed !== null && parsed.kind === "directive" ? parsed : void 0;
521
+ if (node.type !== "comment") return void 0;
522
+ const parsed = parseVantageDirective(node.value);
523
+ return parsed !== null && parsed.kind === "directive" ? parsed : void 0;
346
524
  }
525
+ /**
526
+ * One left-to-right pass over a parent's children, recursing into elements.
527
+ *
528
+ * The whole tree, not just the root: `rehype-raw` leaves comment nodes inside
529
+ * `blockquote`, inside `li`, inside `td` and inline inside `p`, and the real
530
+ * Open Questions layout puts the `oq` directive inside a list item — so a
531
+ * root-only walk finds none of them.
532
+ *
533
+ * Pass order is also what resolves a nested section: an inner heading's
534
+ * directive necessarily sits at a higher child index than the outer directive
535
+ * that ranged over it, so each property is simply last-write-wins.
536
+ */
347
537
  function processChildren(parent, state) {
348
- const children = parent.children;
349
- let i = 0;
350
- while (i < children.length) {
351
- const node = children[i];
352
- if (node.type === "element") {
353
- processChildren(node, state);
354
- i++;
355
- continue;
356
- }
357
- const first = directiveOf(node);
358
- if (first === void 0) {
359
- i++;
360
- continue;
361
- }
362
- const run = [first];
363
- let j = i + 1;
364
- let targetIndex = -1;
365
- for (; j < children.length; j++) {
366
- const next = children[j];
367
- if (next.type === "element") {
368
- targetIndex = j;
369
- break;
370
- }
371
- if (!isSkippable(next)) break;
372
- const directive = directiveOf(next);
373
- if (directive !== void 0) run.push(directive);
374
- }
375
- if (targetIndex >= 0) stampRun(children, targetIndex, run, state);
376
- i = j;
377
- }
538
+ const children = parent.children;
539
+ let i = 0;
540
+ while (i < children.length) {
541
+ const node = children[i];
542
+ if (node.type === "element") {
543
+ processChildren(node, state);
544
+ i++;
545
+ continue;
546
+ }
547
+ const first = directiveOf(node);
548
+ if (first === void 0) {
549
+ i++;
550
+ continue;
551
+ }
552
+ const run = [first];
553
+ let j = i + 1;
554
+ let targetIndex = -1;
555
+ for (; j < children.length; j++) {
556
+ const next = children[j];
557
+ if (next.type === "element") {
558
+ targetIndex = j;
559
+ break;
560
+ }
561
+ if (!isSkippable(next)) break;
562
+ const directive = directiveOf(next);
563
+ if (directive !== void 0) run.push(directive);
564
+ }
565
+ if (targetIndex >= 0) stampRun(children, targetIndex, run, state);
566
+ i = j;
567
+ }
378
568
  }
379
- var rehypeVantageDirectives = () => {
380
- return (tree) => {
381
- processChildren(tree, { nextGroup: 1 });
382
- };
569
+ const rehypeVantageDirectives = () => {
570
+ return (tree) => {
571
+ processChildren(tree, { nextGroup: 1 });
572
+ };
383
573
  };
384
- var rehypeVantageDirectives_default = rehypeVantageDirectives;
385
-
386
- // src/rehypeVantageMathStamps.ts
387
- var CARRIED_KEY = "vantageDisplayMathStamps";
574
+ //#endregion
575
+ //#region src/rehypeVantageMathStamps.ts
576
+ /**
577
+ * Where the snapshot lives between the two halves.
578
+ *
579
+ * `file.data` rather than a closure or a module-level map: `buildPipeline` is
580
+ * allowed to be built once and run over many documents, and per-file state is
581
+ * the only kind that cannot leak from one of those to the next.
582
+ */
583
+ const CARRIED_KEY = "vantageDisplayMathStamps";
388
584
  function classNames(node) {
389
- const value = node.properties?.className;
390
- return Array.isArray(value) ? value.map(String) : [];
585
+ const value = node.properties?.className;
586
+ return Array.isArray(value) ? value.map(String) : [];
391
587
  }
588
+ /**
589
+ * A `<pre>` `rehype-katex` will replace — its own condition, restated.
590
+ *
591
+ * `language-math` is the only class to test: `rehype-katex` keys the
592
+ * pre-as-scope branch on it, and the sanitiser strips the `math-display` that
593
+ * `remark-math` also emits (measured — a stamped fence arrives here with
594
+ * `className: ["language-math"]` alone).
595
+ */
392
596
  function isDisplayMath(node) {
393
- if (node.type !== "element" || node.tagName !== "pre") return false;
394
- return node.children.some(
395
- (child) => child.type === "element" && child.tagName === "code" && classNames(child).includes("language-math")
396
- );
597
+ if (node.type !== "element" || node.tagName !== "pre") return false;
598
+ return node.children.some((child) => child.type === "element" && child.tagName === "code" && classNames(child).includes("language-math"));
397
599
  }
600
+ /**
601
+ * What is worth carrying: everything this pipeline stamped itself.
602
+ *
603
+ * Deliberately not the whole property bag. `className`, `style` and `id` belong
604
+ * to the element KaTeX is about to build, and copying a `<pre>`'s onto a
605
+ * `<span class="katex-display">` would fight it.
606
+ */
398
607
  function carriedProperties(properties) {
399
- const carried = {};
400
- for (const [key, value] of Object.entries(properties ?? {})) {
401
- if (key === "dataSourceLine" || key.startsWith("dataVantage")) {
402
- carried[key] = value;
403
- }
404
- }
405
- return carried;
608
+ const carried = {};
609
+ for (const [key, value] of Object.entries(properties ?? {})) if (key === "dataSourceLine" || key.startsWith("dataVantage")) carried[key] = value;
610
+ return carried;
406
611
  }
407
612
  function collect(parent, out) {
408
- const children = parent.children;
409
- for (let i = 0; i < children.length; i++) {
410
- const node = children[i];
411
- if (node.type !== "element") continue;
412
- if (isDisplayMath(node)) {
413
- const properties = carriedProperties(node.properties);
414
- if (Object.keys(properties).length > 0) {
415
- out.push({
416
- parent,
417
- anchor: i === 0 ? void 0 : children[i - 1],
418
- properties
419
- });
420
- }
421
- continue;
422
- }
423
- collect(node, out);
424
- }
613
+ const children = parent.children;
614
+ for (let i = 0; i < children.length; i++) {
615
+ const node = children[i];
616
+ if (node.type !== "element") continue;
617
+ if (isDisplayMath(node)) {
618
+ const properties = carriedProperties(node.properties);
619
+ if (Object.keys(properties).length > 0) out.push({
620
+ parent,
621
+ anchor: i === 0 ? void 0 : children[i - 1],
622
+ properties
623
+ });
624
+ continue;
625
+ }
626
+ collect(node, out);
627
+ }
425
628
  }
426
629
  function reapply(carried) {
427
- for (const { parent, anchor, properties } of carried) {
428
- const siblings = parent.children;
429
- let index = 0;
430
- if (anchor !== void 0) {
431
- const at = siblings.indexOf(anchor);
432
- if (at === -1) continue;
433
- index = at + 1;
434
- }
435
- const replacement = siblings[index];
436
- if (replacement === void 0 || replacement.type !== "element") continue;
437
- if (!classNames(replacement).some((name) => name.startsWith("katex"))) {
438
- continue;
439
- }
440
- replacement.properties ??= {};
441
- for (const [key, value] of Object.entries(properties)) {
442
- replacement.properties[key] ??= value;
443
- }
444
- }
630
+ for (const { parent, anchor, properties } of carried) {
631
+ const siblings = parent.children;
632
+ let index = 0;
633
+ if (anchor !== void 0) {
634
+ const at = siblings.indexOf(anchor);
635
+ if (at === -1) continue;
636
+ index = at + 1;
637
+ }
638
+ const replacement = siblings[index];
639
+ if (replacement === void 0 || replacement.type !== "element") continue;
640
+ if (!classNames(replacement).some((name) => name.startsWith("katex"))) continue;
641
+ replacement.properties ??= {};
642
+ for (const [key, value] of Object.entries(properties)) replacement.properties[key] ??= value;
643
+ }
445
644
  }
446
- var rehypeCaptureMathStamps = () => {
447
- return (tree, file) => {
448
- const carried = [];
449
- collect(tree, carried);
450
- file.data[CARRIED_KEY] = carried;
451
- };
645
+ /** Snapshot every stamped display-math block. Register before `rehypeKatex`. */
646
+ const rehypeCaptureMathStamps = () => {
647
+ return (tree, file) => {
648
+ const carried = [];
649
+ collect(tree, carried);
650
+ file.data[CARRIED_KEY] = carried;
651
+ };
452
652
  };
453
- var rehypeRestoreMathStamps = () => {
454
- return (_tree, file) => {
455
- const carried = file.data[CARRIED_KEY];
456
- delete file.data[CARRIED_KEY];
457
- if (Array.isArray(carried)) reapply(carried);
458
- };
653
+ /** Re-apply the snapshot. Register immediately after `rehypeKatex`. */
654
+ const rehypeRestoreMathStamps = () => {
655
+ return (_tree, file) => {
656
+ const carried = file.data[CARRIED_KEY];
657
+ delete file.data[CARRIED_KEY];
658
+ if (Array.isArray(carried)) reapply(carried);
659
+ };
459
660
  };
460
- var SAFE_STYLE_PROPERTIES = [
461
- // Box metrics. `top`/`right`/`bottom`/`left` are inert now that `position` is
462
- // banned, and they stay only because dropping them would fail the whole
463
- // attribute for a document that writes one — the all-or-nothing rule below
464
- // makes every removal a behaviour change. They buy an attacker nothing that
465
- // negative `margin` does not already buy.
466
- "height",
467
- "min-height",
468
- "max-height",
469
- "width",
470
- "min-width",
471
- "max-width",
472
- "top",
473
- "bottom",
474
- "left",
475
- "right",
476
- "margin",
477
- "margin-top",
478
- "margin-right",
479
- "margin-bottom",
480
- "margin-left",
481
- "padding",
482
- "padding-top",
483
- "padding-right",
484
- "padding-bottom",
485
- "padding-left",
486
- // Rules and boxes.
487
- "border",
488
- "border-style",
489
- "border-color",
490
- "border-width",
491
- "border-top-width",
492
- "border-right-width",
493
- "border-bottom-width",
494
- "border-left-width",
495
- "border-top-style",
496
- "border-right-style",
497
- "border-bottom-style",
498
- "border-left-style",
499
- "border-top-color",
500
- "border-right-color",
501
- "border-bottom-color",
502
- "border-left-color",
503
- "border-radius",
504
- // Typography.
505
- "color",
506
- "background-color",
507
- "font",
508
- "font-size",
509
- "font-style",
510
- "font-weight",
511
- "font-family",
512
- "font-variant",
513
- "line-height",
514
- "letter-spacing",
515
- "word-spacing",
516
- "text-align",
517
- "text-decoration",
518
- "text-indent",
519
- "white-space",
520
- "vertical-align",
521
- "list-style-type",
522
- // Flow.
523
- "display",
524
- "float",
525
- "clear",
526
- "opacity",
527
- "overflow"
528
- ];
529
- var VALUE = `[^;:()"'\\\\]*`;
530
- var DECLARATION = `(?:(?:${SAFE_STYLE_PROPERTIES.join("|")})\\s*:${VALUE})`;
531
- var SAFE_STYLE = new RegExp(
532
- `^\\s*(?:${DECLARATION};\\s*)*${DECLARATION}?$`,
533
- "i"
534
- );
535
- var COLLAPSE_GROUP_ID = /^[0-9]+$/;
536
- var sanitizeSchema = {
537
- ...defaultSchema,
538
- tagNames: [
539
- ...defaultSchema.tagNames || [],
540
- // KaTeX MathML elements
541
- "math",
542
- "semantics",
543
- "mrow",
544
- "mi",
545
- "mo",
546
- "mn",
547
- "msup",
548
- "msub",
549
- "mfrac",
550
- "mover",
551
- "munder",
552
- "msqrt",
553
- "mroot",
554
- "mtable",
555
- "mtr",
556
- "mtd",
557
- "mtext",
558
- "mspace",
559
- "annotation",
560
- // Other
561
- "figure",
562
- "figcaption",
563
- "summary",
564
- "details"
565
- ],
566
- attributes: {
567
- ...defaultSchema.attributes,
568
- "*": [
569
- ...defaultSchema.attributes?.["*"] || [],
570
- "className",
571
- ["style", SAFE_STYLE],
572
- "dataSourceLine",
573
- // What `rehypeVantageDirectives` compiles a `<!-- vantage: … -->` comment
574
- // into, named individually — never by a `data-vantage-*` wildcard, which
575
- // would readmit whatever a future bug emits and whatever a document
576
- // hand-writes as raw HTML.
577
- //
578
- // The value lists are the belt to the plugin's braces: the vocabulary is
579
- // closed in the plugin *and* here, imported from the one module that
580
- // defines it, so even if a refactor let an unvalidated value reach the
581
- // tree the sanitiser still refuses it.
582
- ["dataVantageTone", ...VANTAGE_TONES],
583
- ["dataVantageEmphasis", ...VANTAGE_EMPHASIS],
584
- ["dataVantageBadge", ...VANTAGE_BADGES],
585
- ["dataVantageCollapsed", ...VANTAGE_COLLAPSED],
586
- // The other half of `collapsed`: which group a hidden block belongs to,
587
- // and which group a heading toggles. Both are plugin-minted counters with
588
- // no vocabulary to allowlist, so they take a pattern instead —
589
- // `hast-util-sanitize` accepts a `RegExp` in place of a literal value.
590
- // A pattern rather than a bare name because the JS interpolates the value
591
- // into a selector: anything but digits has no business reaching it.
592
- ["dataVantageCollapseGroup", COLLAPSE_GROUP_ID],
593
- ["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
594
- ["dataVantageRun", ...VANTAGE_RUNS],
595
- ["dataVantageOq", "true"],
596
- // The design's one genuinely free-text value: the body of a review
597
- // comment, so it cannot be value-allowlisted and this entry is name-only.
598
- // Two defences remain rather than three — `hast` escapes the value on
599
- // serialisation and React sets it through the DOM property path, so it
600
- // cannot break out of the attribute — and the honest record of that is in
601
- // the design doc rather than a third layer implied here.
602
- "dataVantageLeaning"
603
- ],
604
- code: [...defaultSchema.attributes?.code || [], "className"],
605
- span: [
606
- ...defaultSchema.attributes?.span || [],
607
- "className",
608
- ["style", SAFE_STYLE]
609
- ],
610
- div: [
611
- ...defaultSchema.attributes?.div || [],
612
- "className",
613
- ["style", SAFE_STYLE]
614
- ],
615
- a: [...defaultSchema.attributes?.a || [], "id", "className"],
616
- math: ["xmlns"],
617
- annotation: ["encoding"],
618
- img: [...defaultSchema.attributes?.img || [], "loading"],
619
- td: [...defaultSchema.attributes?.td || [], ["style", SAFE_STYLE]],
620
- th: [...defaultSchema.attributes?.th || [], ["style", SAFE_STYLE]]
621
- }
661
+ //#endregion
662
+ //#region src/sanitize.ts
663
+ /**
664
+ * Sanitization schema for the rendering pipeline.
665
+ * Allows GFM, KaTeX MathML, syntax highlighting classes, and
666
+ * data-source-line attributes while blocking XSS vectors.
667
+ */
668
+ const DECLARATION = `(?:(?:${[
669
+ "height",
670
+ "min-height",
671
+ "max-height",
672
+ "width",
673
+ "min-width",
674
+ "max-width",
675
+ "top",
676
+ "bottom",
677
+ "left",
678
+ "right",
679
+ "margin",
680
+ "margin-top",
681
+ "margin-right",
682
+ "margin-bottom",
683
+ "margin-left",
684
+ "padding",
685
+ "padding-top",
686
+ "padding-right",
687
+ "padding-bottom",
688
+ "padding-left",
689
+ "border",
690
+ "border-style",
691
+ "border-color",
692
+ "border-width",
693
+ "border-top-width",
694
+ "border-right-width",
695
+ "border-bottom-width",
696
+ "border-left-width",
697
+ "border-top-style",
698
+ "border-right-style",
699
+ "border-bottom-style",
700
+ "border-left-style",
701
+ "border-top-color",
702
+ "border-right-color",
703
+ "border-bottom-color",
704
+ "border-left-color",
705
+ "border-radius",
706
+ "color",
707
+ "background-color",
708
+ "font",
709
+ "font-size",
710
+ "font-style",
711
+ "font-weight",
712
+ "font-family",
713
+ "font-variant",
714
+ "line-height",
715
+ "letter-spacing",
716
+ "word-spacing",
717
+ "text-align",
718
+ "text-decoration",
719
+ "text-indent",
720
+ "white-space",
721
+ "vertical-align",
722
+ "list-style-type",
723
+ "display",
724
+ "float",
725
+ "clear",
726
+ "opacity",
727
+ "overflow"
728
+ ].join("|")})\\s*:[^;:()"'\\\\]*)`;
729
+ const SAFE_STYLE = new RegExp(`^\\s*(?:${DECLARATION};\\s*)*${DECLARATION}?$`, "i");
730
+ /**
731
+ * A collapse group id: one or more digits, anchored.
732
+ *
733
+ * The plugin mints these as a per-document counter, so there is no vocabulary to
734
+ * list. Keeping the shape narrow matters anyway — the toggle JS builds a
735
+ * `[data-vantage-collapse-group="…"]` selector out of the value, and a document
736
+ * that hand-wrote raw HTML is the only way a non-numeric one could ever appear.
737
+ */
738
+ const COLLAPSE_GROUP_ID = /^[0-9]+$/;
739
+ /**
740
+ * Never set `allowComments` here.
741
+ *
742
+ * `hast-util-sanitize` drops comment nodes because that boolean defaults to
743
+ * `false` — comments are not elements, so `tagNames` has nothing to do with it.
744
+ * `rehypeVantageDirectives` relies on that deletion: it consumes a
745
+ * `<!-- vantage: … -->` comment into attributes and deliberately leaves the node
746
+ * for the sanitiser. Turning the switch on readmits every directive comment —
747
+ * valid and malformed alike — into the rendered HTML, which breaks the carrier's
748
+ * whole premise. `vantageDirectives.test.ts` ("leaves no comment in the rendered
749
+ * markup") is the guard.
750
+ */
751
+ const sanitizeSchema = {
752
+ ...defaultSchema,
753
+ tagNames: [
754
+ ...defaultSchema.tagNames || [],
755
+ "math",
756
+ "semantics",
757
+ "mrow",
758
+ "mi",
759
+ "mo",
760
+ "mn",
761
+ "msup",
762
+ "msub",
763
+ "mfrac",
764
+ "mover",
765
+ "munder",
766
+ "msqrt",
767
+ "mroot",
768
+ "mtable",
769
+ "mtr",
770
+ "mtd",
771
+ "mtext",
772
+ "mspace",
773
+ "annotation",
774
+ "figure",
775
+ "figcaption",
776
+ "summary",
777
+ "details"
778
+ ],
779
+ attributes: {
780
+ ...defaultSchema.attributes,
781
+ "*": [
782
+ ...defaultSchema.attributes?.["*"] || [],
783
+ "className",
784
+ ["style", SAFE_STYLE],
785
+ "dataSourceLine",
786
+ ["dataVantageTone", ...VANTAGE_TONES],
787
+ ["dataVantageEmphasis", ...VANTAGE_EMPHASIS],
788
+ ["dataVantageBadge", ...VANTAGE_BADGES],
789
+ ["dataVantageCollapsed", ...VANTAGE_COLLAPSED],
790
+ ["dataVantageCollapseGroup", COLLAPSE_GROUP_ID],
791
+ ["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
792
+ ["dataVantageRun", ...VANTAGE_RUNS],
793
+ ["dataVantageOq", "true"],
794
+ "dataVantageLeaning"
795
+ ],
796
+ code: [...defaultSchema.attributes?.code || [], "className"],
797
+ span: [
798
+ ...defaultSchema.attributes?.span || [],
799
+ "className",
800
+ ["style", SAFE_STYLE]
801
+ ],
802
+ div: [
803
+ ...defaultSchema.attributes?.div || [],
804
+ "className",
805
+ ["style", SAFE_STYLE]
806
+ ],
807
+ a: [
808
+ ...defaultSchema.attributes?.a || [],
809
+ "id",
810
+ "className"
811
+ ],
812
+ math: ["xmlns"],
813
+ annotation: ["encoding"],
814
+ img: [...defaultSchema.attributes?.img || [], "loading"],
815
+ td: [...defaultSchema.attributes?.td || [], ["style", SAFE_STYLE]],
816
+ th: [...defaultSchema.attributes?.th || [], ["style", SAFE_STYLE]]
817
+ }
622
818
  };
623
-
624
- // src/pipeline.ts
819
+ //#endregion
820
+ //#region src/pipeline.ts
821
+ /**
822
+ * The mdast half of the chain. Exported on its own because there is a real
823
+ * mdast-only consumer: the CLI checker parses documents without ever running
824
+ * rehype (`packages/vantage-check/src/core/document.ts`), and it has to parse
825
+ * them exactly the way the viewer does.
826
+ */
625
827
  function buildRemarkPlugins(options = {}) {
626
- const { gfm = true, math = true } = options;
627
- const plugins = [];
628
- if (gfm) plugins.push([remarkGfm, { singleTilde: false }]);
629
- if (math) plugins.push([remarkMath, { singleDollarTextMath: false }]);
630
- return plugins;
828
+ const { gfm = true, math = true } = options;
829
+ const plugins = [];
830
+ if (gfm) plugins.push([remarkGfm, { singleTilde: false }]);
831
+ if (math) plugins.push([remarkMath, { singleDollarTextMath: false }]);
832
+ return plugins;
631
833
  }
834
+ /** The hast half. Deliberately not exported: see `buildPipeline`. */
632
835
  function buildRehypePlugins(options = {}) {
633
- const {
634
- math = true,
635
- highlight = true,
636
- sourceLines = true,
637
- sanitize = true,
638
- bodyLineOffset = 0
639
- } = options;
640
- const plugins = [rehypeRaw];
641
- if (sourceLines) {
642
- plugins.push([rehypeSourceLines_default, { offset: bodyLineOffset }]);
643
- }
644
- plugins.push(rehypeVantageDirectives_default);
645
- if (sanitize) plugins.push([rehypeSanitize, sanitizeSchema]);
646
- plugins.push(rehypeSlug);
647
- if (highlight) plugins.push(rehypeHighlight);
648
- if (math) {
649
- plugins.push(rehypeCaptureMathStamps, rehypeKatex, rehypeRestoreMathStamps);
650
- }
651
- return plugins;
836
+ const { math = true, highlight = true, sourceLines = true, sanitize = true, bodyLineOffset = 0 } = options;
837
+ const plugins = [rehypeRaw];
838
+ if (sourceLines) plugins.push([rehypeSourceLines, { offset: bodyLineOffset }]);
839
+ plugins.push(rehypeVantageDirectives);
840
+ if (sanitize) plugins.push([rehypeSanitize, sanitizeSchema]);
841
+ plugins.push(rehypeSlug);
842
+ if (highlight) plugins.push(rehypeHighlight);
843
+ if (math) plugins.push(rehypeCaptureMathStamps, rehypeKatex, rehypeRestoreMathStamps);
844
+ return plugins;
652
845
  }
846
+ /**
847
+ * Both halves from one options object.
848
+ *
849
+ * This is what every renderer calls. It takes one object rather than exposing
850
+ * the two builders because `math` spans both halves — `remark-math` parses the
851
+ * delimiters, `rehype-katex` renders the result — and two calls are two places
852
+ * to forget the second one.
853
+ *
854
+ * Returns fresh arrays on every call and reads no module-level state; keep it
855
+ * that way, so a plugin in the chain cannot become a function of how many times
856
+ * the chain has been built.
857
+ */
653
858
  function buildPipeline(options = {}) {
654
- return {
655
- remarkPlugins: buildRemarkPlugins(options),
656
- rehypePlugins: buildRehypePlugins(options)
657
- };
859
+ return {
860
+ remarkPlugins: buildRemarkPlugins(options),
861
+ rehypePlugins: buildRehypePlugins(options)
862
+ };
658
863
  }
864
+ //#endregion
865
+ //#region src/frontmatter.ts
866
+ /**
867
+ * Frontmatter parser for YAML (---) and TOML (+++) delimited content.
868
+ * Works in both browser and server environments.
869
+ */
870
+ /**
871
+ * Parse frontmatter from markdown content.
872
+ * Supports YAML (delimited by ---) and TOML (delimited by +++).
873
+ */
659
874
  function parseFrontmatter(content) {
660
- if (content.startsWith("+++")) {
661
- return parseFrontmatterWithDelimiter(content, "+++", "toml");
662
- }
663
- if (content.startsWith("---")) {
664
- return parseFrontmatterWithDelimiter(content, "---", "yaml");
665
- }
666
- return withOffset(content, {
667
- frontmatter: {},
668
- body: content,
669
- format: "none"
670
- });
875
+ if (content.startsWith("+++")) return parseFrontmatterWithDelimiter(content, "+++", "toml");
876
+ if (content.startsWith("---")) return parseFrontmatterWithDelimiter(content, "---", "yaml");
877
+ return withOffset(content, {
878
+ frontmatter: {},
879
+ body: content,
880
+ format: "none"
881
+ });
671
882
  }
883
+ /**
884
+ * Fill in `bodyLineOffset`. `body` is always a suffix of `content`, so the
885
+ * newlines in the prefix that was stripped are exactly the shift — which also
886
+ * accounts for the blank line consumed after the closing delimiter.
887
+ */
672
888
  function withOffset(content, parsed) {
673
- const stripped = content.slice(0, content.length - parsed.body.length);
674
- let bodyLineOffset = 0;
675
- for (const ch of stripped) {
676
- if (ch === "\n") bodyLineOffset++;
677
- }
678
- return { ...parsed, bodyLineOffset };
889
+ const stripped = content.slice(0, content.length - parsed.body.length);
890
+ let bodyLineOffset = 0;
891
+ for (const ch of stripped) if (ch === "\n") bodyLineOffset++;
892
+ return {
893
+ ...parsed,
894
+ bodyLineOffset
895
+ };
679
896
  }
680
897
  function parseFrontmatterWithDelimiter(content, delimiter, format) {
681
- const searchStart = delimiter.length;
682
- const endIndex = content.indexOf(`
683
- ${delimiter}`, searchStart);
684
- if (endIndex === -1) {
685
- return withOffset(content, {
686
- frontmatter: {},
687
- body: content,
688
- format: "none",
689
- problem: { kind: "unterminated", delimiter }
690
- });
691
- }
692
- const raw = content.slice(searchStart + 1, endIndex).trim();
693
- const bodyStart = endIndex + 1 + delimiter.length;
694
- const body = content.slice(bodyStart).replace(/^\n/, "");
695
- try {
696
- const parsed = format === "toml" ? parse(raw) : YAML.parse(raw);
697
- return withOffset(content, {
698
- frontmatter: parsed || {},
699
- body,
700
- format,
701
- ...isMapping(parsed) ? {} : { problem: { kind: "not-a-mapping", delimiter } }
702
- });
703
- } catch (error) {
704
- return withOffset(content, {
705
- frontmatter: {},
706
- body: content,
707
- format: "none",
708
- problem: { kind: "invalid", delimiter, ...errorPosition(error) }
709
- });
710
- }
898
+ const searchStart = delimiter.length;
899
+ const endIndex = content.indexOf(`\n${delimiter}`, searchStart);
900
+ if (endIndex === -1) return withOffset(content, {
901
+ frontmatter: {},
902
+ body: content,
903
+ format: "none",
904
+ problem: {
905
+ kind: "unterminated",
906
+ delimiter
907
+ }
908
+ });
909
+ const raw = content.slice(searchStart + 1, endIndex).trim();
910
+ const bodyStart = endIndex + 1 + delimiter.length;
911
+ const body = content.slice(bodyStart).replace(/^\n/, "");
912
+ try {
913
+ const parsed = format === "toml" ? parse(raw) : YAML.parse(raw);
914
+ return withOffset(content, {
915
+ frontmatter: parsed || {},
916
+ body,
917
+ format,
918
+ ...isMapping(parsed) ? {} : { problem: {
919
+ kind: "not-a-mapping",
920
+ delimiter
921
+ } }
922
+ });
923
+ } catch (error) {
924
+ return withOffset(content, {
925
+ frontmatter: {},
926
+ body: content,
927
+ format: "none",
928
+ problem: {
929
+ kind: "invalid",
930
+ delimiter,
931
+ ...errorPosition(error)
932
+ }
933
+ });
934
+ }
711
935
  }
936
+ /** Empty frontmatter is fine; a scalar or a list where a table belongs is not. */
712
937
  function isMapping(value) {
713
- return value === null || value === void 0 || typeof value === "object" && !Array.isArray(value);
938
+ return value === null || value === void 0 || typeof value === "object" && !Array.isArray(value);
714
939
  }
940
+ /**
941
+ * Pull the parser's message and, where it gave one, the position inside the
942
+ * frontmatter block. `yaml` reports `linePos`; `smol-toml` reports `line` and
943
+ * `column`. Both are optional and both are read defensively — a missing
944
+ * position costs a less precise report, a wrong assumption costs a crash.
945
+ */
715
946
  function errorPosition(error) {
716
- const message = error instanceof Error ? error.message : String(error);
717
- const source = error;
718
- const yamlPosition = source?.linePos?.[0];
719
- if (typeof yamlPosition?.line === "number") {
720
- return {
721
- message,
722
- line: yamlPosition.line,
723
- ...typeof yamlPosition.col === "number" ? { column: yamlPosition.col } : {}
724
- };
725
- }
726
- if (typeof source?.line === "number") {
727
- return {
728
- message,
729
- line: source.line,
730
- ...typeof source.column === "number" ? { column: source.column } : {}
731
- };
732
- }
733
- return { message };
947
+ const message = error instanceof Error ? error.message : String(error);
948
+ const source = error;
949
+ const yamlPosition = source?.linePos?.[0];
950
+ if (typeof yamlPosition?.line === "number") return {
951
+ message,
952
+ line: yamlPosition.line,
953
+ ...typeof yamlPosition.col === "number" ? { column: yamlPosition.col } : {}
954
+ };
955
+ if (typeof source?.line === "number") return {
956
+ message,
957
+ line: source.line,
958
+ ...typeof source.column === "number" ? { column: source.column } : {}
959
+ };
960
+ return { message };
734
961
  }
735
-
736
- // src/mermaidCache.ts
737
- var svgCache = /* @__PURE__ */ new Map();
738
-
739
- // src/mermaidLoader.ts
740
- var mermaidInstance = null;
741
- var mermaidLoading = null;
742
- var isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
962
+ //#endregion
963
+ //#region src/mermaidCache.ts
964
+ const svgCache = /* @__PURE__ */ new Map();
965
+ //#endregion
966
+ //#region src/mermaidLoader.ts
967
+ let mermaidInstance = null;
968
+ let mermaidLoading = null;
969
+ const isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
743
970
  async function getMermaid() {
744
- if (mermaidInstance) return mermaidInstance;
745
- if (!mermaidLoading) {
746
- mermaidLoading = import('mermaid').then((mod) => {
747
- const m = mod.default;
748
- m.initialize({
749
- startOnLoad: false,
750
- theme: isDark() ? "dark" : "default",
751
- securityLevel: "strict",
752
- suppressErrorRendering: true
753
- });
754
- mermaidInstance = m;
755
- return m;
756
- });
757
- }
758
- return mermaidLoading;
971
+ if (mermaidInstance) return mermaidInstance;
972
+ if (!mermaidLoading) mermaidLoading = import("mermaid").then((mod) => {
973
+ const m = mod.default;
974
+ m.initialize({
975
+ startOnLoad: false,
976
+ theme: isDark() ? "dark" : "default",
977
+ securityLevel: "strict",
978
+ suppressErrorRendering: true
979
+ });
980
+ mermaidInstance = m;
981
+ return m;
982
+ });
983
+ return mermaidLoading;
759
984
  }
760
- var AlertTriangleIcon = () => /* @__PURE__ */ jsxs(
761
- "svg",
762
- {
763
- width: "16",
764
- height: "16",
765
- viewBox: "0 0 24 24",
766
- fill: "none",
767
- stroke: "currentColor",
768
- strokeWidth: "2",
769
- strokeLinecap: "round",
770
- strokeLinejoin: "round",
771
- className: "w-4 h-4 shrink-0",
772
- children: [
773
- /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
774
- /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
775
- /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
776
- ]
777
- }
778
- );
779
- var ChevronDownIcon = () => /* @__PURE__ */ jsx(
780
- "svg",
781
- {
782
- width: "12",
783
- height: "12",
784
- viewBox: "0 0 24 24",
785
- fill: "none",
786
- stroke: "currentColor",
787
- strokeWidth: "2",
788
- strokeLinecap: "round",
789
- strokeLinejoin: "round",
790
- className: "w-3 h-3",
791
- children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
792
- }
793
- );
794
- var ChevronUpIcon = () => /* @__PURE__ */ jsx(
795
- "svg",
796
- {
797
- width: "12",
798
- height: "12",
799
- viewBox: "0 0 24 24",
800
- fill: "none",
801
- stroke: "currentColor",
802
- strokeWidth: "2",
803
- strokeLinecap: "round",
804
- strokeLinejoin: "round",
805
- className: "w-3 h-3",
806
- children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
807
- }
808
- );
809
- var MaximizeIcon = () => /* @__PURE__ */ jsxs(
810
- "svg",
811
- {
812
- width: "16",
813
- height: "16",
814
- viewBox: "0 0 24 24",
815
- fill: "none",
816
- stroke: "currentColor",
817
- strokeWidth: "2",
818
- strokeLinecap: "round",
819
- strokeLinejoin: "round",
820
- className: "w-4 h-4 text-gray-600",
821
- children: [
822
- /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
823
- /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
824
- /* @__PURE__ */ jsx("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
825
- /* @__PURE__ */ jsx("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
826
- ]
827
- }
828
- );
829
- var CloseIcon = () => /* @__PURE__ */ jsxs(
830
- "svg",
831
- {
832
- width: "20",
833
- height: "20",
834
- viewBox: "0 0 24 24",
835
- fill: "none",
836
- stroke: "currentColor",
837
- strokeWidth: "2",
838
- strokeLinecap: "round",
839
- strokeLinejoin: "round",
840
- className: "w-5 h-5",
841
- children: [
842
- /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
843
- /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
844
- ]
845
- }
846
- );
847
- var PlusIcon = () => /* @__PURE__ */ jsxs(
848
- "svg",
849
- {
850
- width: "16",
851
- height: "16",
852
- viewBox: "0 0 24 24",
853
- fill: "none",
854
- stroke: "currentColor",
855
- strokeWidth: "2",
856
- strokeLinecap: "round",
857
- strokeLinejoin: "round",
858
- className: "w-4 h-4",
859
- children: [
860
- /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
861
- /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
862
- ]
863
- }
864
- );
865
- var MinusIcon = () => /* @__PURE__ */ jsx(
866
- "svg",
867
- {
868
- width: "16",
869
- height: "16",
870
- viewBox: "0 0 24 24",
871
- fill: "none",
872
- stroke: "currentColor",
873
- strokeWidth: "2",
874
- strokeLinecap: "round",
875
- strokeLinejoin: "round",
876
- className: "w-4 h-4",
877
- children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
878
- }
879
- );
880
- var ResetIcon = () => /* @__PURE__ */ jsxs(
881
- "svg",
882
- {
883
- width: "16",
884
- height: "16",
885
- viewBox: "0 0 24 24",
886
- fill: "none",
887
- stroke: "currentColor",
888
- strokeWidth: "2",
889
- strokeLinecap: "round",
890
- strokeLinejoin: "round",
891
- className: "w-4 h-4",
892
- children: [
893
- /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
894
- /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
895
- ]
896
- }
897
- );
898
- var MIN_SCALE = 0.2;
899
- var MAX_SCALE = 8;
985
+ //#endregion
986
+ //#region src/MermaidDiagram.tsx
987
+ const AlertTriangleIcon = () => /* @__PURE__ */ jsxs("svg", {
988
+ width: "16",
989
+ height: "16",
990
+ viewBox: "0 0 24 24",
991
+ fill: "none",
992
+ stroke: "currentColor",
993
+ strokeWidth: "2",
994
+ strokeLinecap: "round",
995
+ strokeLinejoin: "round",
996
+ className: "w-4 h-4 shrink-0",
997
+ children: [
998
+ /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
999
+ /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
1000
+ /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
1001
+ ]
1002
+ });
1003
+ const ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", {
1004
+ width: "12",
1005
+ height: "12",
1006
+ viewBox: "0 0 24 24",
1007
+ fill: "none",
1008
+ stroke: "currentColor",
1009
+ strokeWidth: "2",
1010
+ strokeLinecap: "round",
1011
+ strokeLinejoin: "round",
1012
+ className: "w-3 h-3",
1013
+ children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
1014
+ });
1015
+ const ChevronUpIcon = () => /* @__PURE__ */ jsx("svg", {
1016
+ width: "12",
1017
+ height: "12",
1018
+ viewBox: "0 0 24 24",
1019
+ fill: "none",
1020
+ stroke: "currentColor",
1021
+ strokeWidth: "2",
1022
+ strokeLinecap: "round",
1023
+ strokeLinejoin: "round",
1024
+ className: "w-3 h-3",
1025
+ children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
1026
+ });
1027
+ const MaximizeIcon = () => /* @__PURE__ */ jsxs("svg", {
1028
+ width: "16",
1029
+ height: "16",
1030
+ viewBox: "0 0 24 24",
1031
+ fill: "none",
1032
+ stroke: "currentColor",
1033
+ strokeWidth: "2",
1034
+ strokeLinecap: "round",
1035
+ strokeLinejoin: "round",
1036
+ className: "w-4 h-4 text-gray-600",
1037
+ children: [
1038
+ /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
1039
+ /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
1040
+ /* @__PURE__ */ jsx("line", {
1041
+ x1: "21",
1042
+ x2: "14",
1043
+ y1: "3",
1044
+ y2: "10"
1045
+ }),
1046
+ /* @__PURE__ */ jsx("line", {
1047
+ x1: "3",
1048
+ x2: "10",
1049
+ y1: "21",
1050
+ y2: "14"
1051
+ })
1052
+ ]
1053
+ });
1054
+ const CloseIcon = () => /* @__PURE__ */ jsxs("svg", {
1055
+ width: "20",
1056
+ height: "20",
1057
+ viewBox: "0 0 24 24",
1058
+ fill: "none",
1059
+ stroke: "currentColor",
1060
+ strokeWidth: "2",
1061
+ strokeLinecap: "round",
1062
+ strokeLinejoin: "round",
1063
+ className: "w-5 h-5",
1064
+ children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
1065
+ });
1066
+ const PlusIcon = () => /* @__PURE__ */ jsxs("svg", {
1067
+ width: "16",
1068
+ height: "16",
1069
+ viewBox: "0 0 24 24",
1070
+ fill: "none",
1071
+ stroke: "currentColor",
1072
+ strokeWidth: "2",
1073
+ strokeLinecap: "round",
1074
+ strokeLinejoin: "round",
1075
+ className: "w-4 h-4",
1076
+ children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), /* @__PURE__ */ jsx("path", { d: "M12 5v14" })]
1077
+ });
1078
+ const MinusIcon = () => /* @__PURE__ */ jsx("svg", {
1079
+ width: "16",
1080
+ height: "16",
1081
+ viewBox: "0 0 24 24",
1082
+ fill: "none",
1083
+ stroke: "currentColor",
1084
+ strokeWidth: "2",
1085
+ strokeLinecap: "round",
1086
+ strokeLinejoin: "round",
1087
+ className: "w-4 h-4",
1088
+ children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
1089
+ });
1090
+ const ResetIcon = () => /* @__PURE__ */ jsxs("svg", {
1091
+ width: "16",
1092
+ height: "16",
1093
+ viewBox: "0 0 24 24",
1094
+ fill: "none",
1095
+ stroke: "currentColor",
1096
+ strokeWidth: "2",
1097
+ strokeLinecap: "round",
1098
+ strokeLinejoin: "round",
1099
+ className: "w-4 h-4",
1100
+ children: [/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })]
1101
+ });
1102
+ const MIN_SCALE = .2;
1103
+ const MAX_SCALE = 8;
1104
+ /**
1105
+ * Zoom + pan viewport for the maximized diagram. Wheel/buttons zoom (anchored
1106
+ * on the cursor), drag pans, double-click resets, and it fills whatever space
1107
+ * the modal gives it.
1108
+ */
900
1109
  function ZoomableSvg({ svg }) {
901
- const [scale, setScale] = useState(1);
902
- const [offset, setOffset] = useState({ x: 0, y: 0 });
903
- const dragRef = useRef(null);
904
- const [isDragging, setIsDragging] = useState(false);
905
- const viewportRef = useRef(null);
906
- const reset = useCallback(() => {
907
- setScale(1);
908
- setOffset({ x: 0, y: 0 });
909
- }, []);
910
- const zoomBy = useCallback(
911
- (factor, anchor) => {
912
- setScale((prev) => {
913
- const next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev * factor));
914
- if (next === prev) return prev;
915
- const rect = viewportRef.current?.getBoundingClientRect();
916
- if (rect) {
917
- const ax = (anchor?.x ?? rect.width / 2) - rect.width / 2;
918
- const ay = (anchor?.y ?? rect.height / 2) - rect.height / 2;
919
- setOffset((o) => ({
920
- x: ax - (ax - o.x) * next / prev,
921
- y: ay - (ay - o.y) * next / prev
922
- }));
923
- }
924
- return next;
925
- });
926
- },
927
- []
928
- );
929
- const handleWheel = useCallback(
930
- (e) => {
931
- e.preventDefault();
932
- const rect = viewportRef.current?.getBoundingClientRect();
933
- const anchor = rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : void 0;
934
- zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15, anchor);
935
- },
936
- [zoomBy]
937
- );
938
- const handlePointerDown = (e) => {
939
- e.currentTarget.setPointerCapture(e.pointerId);
940
- dragRef.current = {
941
- startX: e.clientX,
942
- startY: e.clientY,
943
- originX: offset.x,
944
- originY: offset.y
945
- };
946
- setIsDragging(true);
947
- };
948
- const handlePointerMove = (e) => {
949
- const d = dragRef.current;
950
- if (!d) return;
951
- setOffset({
952
- x: d.originX + (e.clientX - d.startX),
953
- y: d.originY + (e.clientY - d.startY)
954
- });
955
- };
956
- const endDrag = (e) => {
957
- if (dragRef.current) {
958
- try {
959
- e.currentTarget.releasePointerCapture(e.pointerId);
960
- } catch {
961
- }
962
- }
963
- dragRef.current = null;
964
- setIsDragging(false);
965
- };
966
- return /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
967
- /* @__PURE__ */ jsx(
968
- "div",
969
- {
970
- ref: viewportRef,
971
- onWheel: handleWheel,
972
- onPointerDown: handlePointerDown,
973
- onPointerMove: handlePointerMove,
974
- onPointerUp: endDrag,
975
- onPointerLeave: endDrag,
976
- onDoubleClick: reset,
977
- className: "w-full h-full overflow-hidden touch-none select-none",
978
- style: { cursor: isDragging ? "grabbing" : "grab" },
979
- children: /* @__PURE__ */ jsx(
980
- "div",
981
- {
982
- className: "mermaid-zoom flex items-center justify-center w-full h-full",
983
- style: {
984
- transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
985
- transformOrigin: "center center",
986
- transition: isDragging ? "none" : "transform 0.08s ease-out"
987
- },
988
- dangerouslySetInnerHTML: { __html: svg }
989
- }
990
- )
991
- }
992
- ),
993
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 right-4 flex items-center gap-1 rounded-lg bg-white/95 shadow-md border border-gray-200 px-1.5 py-1", children: [
994
- /* @__PURE__ */ jsx(
995
- "button",
996
- {
997
- onClick: () => zoomBy(1 / 1.3),
998
- className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
999
- "aria-label": "Zoom out",
1000
- title: "Zoom out",
1001
- children: /* @__PURE__ */ jsx(MinusIcon, {})
1002
- }
1003
- ),
1004
- /* @__PURE__ */ jsxs(
1005
- "button",
1006
- {
1007
- onClick: reset,
1008
- className: "px-2 py-1 text-xs font-medium rounded hover:bg-gray-100 text-gray-600 min-w-[3rem]",
1009
- title: "Reset zoom (or double-click)",
1010
- children: [
1011
- Math.round(scale * 100),
1012
- "%"
1013
- ]
1014
- }
1015
- ),
1016
- /* @__PURE__ */ jsx(
1017
- "button",
1018
- {
1019
- onClick: () => zoomBy(1.3),
1020
- className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
1021
- "aria-label": "Zoom in",
1022
- title: "Zoom in",
1023
- children: /* @__PURE__ */ jsx(PlusIcon, {})
1024
- }
1025
- ),
1026
- /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-gray-200 mx-0.5" }),
1027
- /* @__PURE__ */ jsx(
1028
- "button",
1029
- {
1030
- onClick: reset,
1031
- className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
1032
- "aria-label": "Reset view",
1033
- title: "Reset view",
1034
- children: /* @__PURE__ */ jsx(ResetIcon, {})
1035
- }
1036
- )
1037
- ] })
1038
- ] });
1110
+ const [scale, setScale] = useState(1);
1111
+ const [offset, setOffset] = useState({
1112
+ x: 0,
1113
+ y: 0
1114
+ });
1115
+ const dragRef = useRef(null);
1116
+ const [isDragging, setIsDragging] = useState(false);
1117
+ const viewportRef = useRef(null);
1118
+ const reset = useCallback(() => {
1119
+ setScale(1);
1120
+ setOffset({
1121
+ x: 0,
1122
+ y: 0
1123
+ });
1124
+ }, []);
1125
+ const zoomBy = useCallback((factor, anchor) => {
1126
+ setScale((prev) => {
1127
+ const next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev * factor));
1128
+ if (next === prev) return prev;
1129
+ const rect = viewportRef.current?.getBoundingClientRect();
1130
+ if (rect) {
1131
+ const ax = (anchor?.x ?? rect.width / 2) - rect.width / 2;
1132
+ const ay = (anchor?.y ?? rect.height / 2) - rect.height / 2;
1133
+ setOffset((o) => ({
1134
+ x: ax - (ax - o.x) * next / prev,
1135
+ y: ay - (ay - o.y) * next / prev
1136
+ }));
1137
+ }
1138
+ return next;
1139
+ });
1140
+ }, []);
1141
+ const handleWheel = useCallback((e) => {
1142
+ e.preventDefault();
1143
+ const rect = viewportRef.current?.getBoundingClientRect();
1144
+ const anchor = rect ? {
1145
+ x: e.clientX - rect.left,
1146
+ y: e.clientY - rect.top
1147
+ } : void 0;
1148
+ zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15, anchor);
1149
+ }, [zoomBy]);
1150
+ const handlePointerDown = (e) => {
1151
+ e.currentTarget.setPointerCapture(e.pointerId);
1152
+ dragRef.current = {
1153
+ startX: e.clientX,
1154
+ startY: e.clientY,
1155
+ originX: offset.x,
1156
+ originY: offset.y
1157
+ };
1158
+ setIsDragging(true);
1159
+ };
1160
+ const handlePointerMove = (e) => {
1161
+ const d = dragRef.current;
1162
+ if (!d) return;
1163
+ setOffset({
1164
+ x: d.originX + (e.clientX - d.startX),
1165
+ y: d.originY + (e.clientY - d.startY)
1166
+ });
1167
+ };
1168
+ const endDrag = (e) => {
1169
+ if (dragRef.current) try {
1170
+ e.currentTarget.releasePointerCapture(e.pointerId);
1171
+ } catch {}
1172
+ dragRef.current = null;
1173
+ setIsDragging(false);
1174
+ };
1175
+ return /* @__PURE__ */ jsxs("div", {
1176
+ className: "relative w-full h-full",
1177
+ children: [/* @__PURE__ */ jsx("div", {
1178
+ ref: viewportRef,
1179
+ onWheel: handleWheel,
1180
+ onPointerDown: handlePointerDown,
1181
+ onPointerMove: handlePointerMove,
1182
+ onPointerUp: endDrag,
1183
+ onPointerLeave: endDrag,
1184
+ onDoubleClick: reset,
1185
+ className: "w-full h-full overflow-hidden touch-none select-none",
1186
+ style: { cursor: isDragging ? "grabbing" : "grab" },
1187
+ children: /* @__PURE__ */ jsx("div", {
1188
+ className: "mermaid-zoom flex items-center justify-center w-full h-full",
1189
+ style: {
1190
+ transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
1191
+ transformOrigin: "center center",
1192
+ transition: isDragging ? "none" : "transform 0.08s ease-out"
1193
+ },
1194
+ dangerouslySetInnerHTML: { __html: svg }
1195
+ })
1196
+ }), /* @__PURE__ */ jsxs("div", {
1197
+ className: "absolute bottom-4 right-4 flex items-center gap-1 rounded-lg bg-white/95 shadow-md border border-gray-200 px-1.5 py-1",
1198
+ children: [
1199
+ /* @__PURE__ */ jsx("button", {
1200
+ onClick: () => zoomBy(1 / 1.3),
1201
+ className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
1202
+ "aria-label": "Zoom out",
1203
+ title: "Zoom out",
1204
+ children: /* @__PURE__ */ jsx(MinusIcon, {})
1205
+ }),
1206
+ /* @__PURE__ */ jsxs("button", {
1207
+ onClick: reset,
1208
+ className: "px-2 py-1 text-xs font-medium rounded hover:bg-gray-100 text-gray-600 min-w-[3rem]",
1209
+ title: "Reset zoom (or double-click)",
1210
+ children: [Math.round(scale * 100), "%"]
1211
+ }),
1212
+ /* @__PURE__ */ jsx("button", {
1213
+ onClick: () => zoomBy(1.3),
1214
+ className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
1215
+ "aria-label": "Zoom in",
1216
+ title: "Zoom in",
1217
+ children: /* @__PURE__ */ jsx(PlusIcon, {})
1218
+ }),
1219
+ /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-gray-200 mx-0.5" }),
1220
+ /* @__PURE__ */ jsx("button", {
1221
+ onClick: reset,
1222
+ className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
1223
+ "aria-label": "Reset view",
1224
+ title: "Reset view",
1225
+ children: /* @__PURE__ */ jsx(ResetIcon, {})
1226
+ })
1227
+ ]
1228
+ })]
1229
+ });
1039
1230
  }
1040
1231
  function extractErrorMessage(err) {
1041
- if (err instanceof Error) {
1042
- const msg = err.message;
1043
- const parseMatch = msg.match(
1044
- /(?:Parse error|Syntax error|Error).*?(?:line \d+.*)/i
1045
- );
1046
- if (parseMatch) return parseMatch[0];
1047
- return msg.split("\n")[0].slice(0, 200);
1048
- }
1049
- if (typeof err === "string") return err.split("\n")[0].slice(0, 200);
1050
- return "Unknown error";
1232
+ if (err instanceof Error) {
1233
+ const msg = err.message;
1234
+ const parseMatch = msg.match(/(?:Parse error|Syntax error|Error).*?(?:line \d+.*)/i);
1235
+ if (parseMatch) return parseMatch[0];
1236
+ return msg.split("\n")[0].slice(0, 200);
1237
+ }
1238
+ if (typeof err === "string") return err.split("\n")[0].slice(0, 200);
1239
+ return "Unknown error";
1051
1240
  }
1052
- function DiagramModal({
1053
- isOpen,
1054
- onClose,
1055
- children
1056
- }) {
1057
- useEffect(() => {
1058
- if (!isOpen) return;
1059
- const handler = (e) => {
1060
- if (e.key === "Escape") onClose();
1061
- };
1062
- document.addEventListener("keydown", handler);
1063
- document.body.style.overflow = "hidden";
1064
- return () => {
1065
- document.removeEventListener("keydown", handler);
1066
- document.body.style.overflow = "unset";
1067
- };
1068
- }, [isOpen, onClose]);
1069
- if (!isOpen) return null;
1070
- return /* @__PURE__ */ jsx(
1071
- "div",
1072
- {
1073
- className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
1074
- onClick: onClose,
1075
- children: /* @__PURE__ */ jsxs(
1076
- "div",
1077
- {
1078
- className: "bg-white rounded-lg shadow-xl w-[96vw] h-[94vh] flex flex-col overflow-hidden",
1079
- role: "dialog",
1080
- "aria-modal": "true",
1081
- onClick: (e) => e.stopPropagation(),
1082
- children: [
1083
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [
1084
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Mermaid Diagram" }),
1085
- /* @__PURE__ */ jsx(
1086
- "button",
1087
- {
1088
- onClick: onClose,
1089
- className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
1090
- "aria-label": "Close modal",
1091
- children: /* @__PURE__ */ jsx(CloseIcon, {})
1092
- }
1093
- )
1094
- ] }),
1095
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden bg-gray-50", children })
1096
- ]
1097
- }
1098
- )
1099
- }
1100
- );
1241
+ /** Simple modal for expanding diagrams */
1242
+ function DiagramModal({ isOpen, onClose, children }) {
1243
+ useEffect(() => {
1244
+ if (!isOpen) return;
1245
+ const handler = (e) => {
1246
+ if (e.key === "Escape") onClose();
1247
+ };
1248
+ document.addEventListener("keydown", handler);
1249
+ document.body.style.overflow = "hidden";
1250
+ return () => {
1251
+ document.removeEventListener("keydown", handler);
1252
+ document.body.style.overflow = "unset";
1253
+ };
1254
+ }, [isOpen, onClose]);
1255
+ if (!isOpen) return null;
1256
+ return /* @__PURE__ */ jsx("div", {
1257
+ className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
1258
+ onClick: onClose,
1259
+ children: /* @__PURE__ */ jsxs("div", {
1260
+ className: "bg-white rounded-lg shadow-xl w-[96vw] h-[94vh] flex flex-col overflow-hidden",
1261
+ role: "dialog",
1262
+ "aria-modal": "true",
1263
+ onClick: (e) => e.stopPropagation(),
1264
+ children: [/* @__PURE__ */ jsxs("div", {
1265
+ className: "flex items-center justify-between p-4 border-b shrink-0",
1266
+ children: [/* @__PURE__ */ jsx("h2", {
1267
+ className: "text-lg font-semibold",
1268
+ children: "Mermaid Diagram"
1269
+ }), /* @__PURE__ */ jsx("button", {
1270
+ onClick: onClose,
1271
+ className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
1272
+ "aria-label": "Close modal",
1273
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
1274
+ })]
1275
+ }), /* @__PURE__ */ jsx("div", {
1276
+ className: "flex-1 overflow-hidden bg-gray-50",
1277
+ children
1278
+ })]
1279
+ })
1280
+ });
1101
1281
  }
1102
- var MermaidDiagramInner = ({ code }) => {
1103
- const hasCached = svgCache.has(code);
1104
- const [svg, setSvg] = useState(() => svgCache.get(code) || "");
1105
- const [errorMessage, setErrorMessage] = useState(null);
1106
- const [showSource, setShowSource] = useState(false);
1107
- const [isModalOpen, setIsModalOpen] = useState(false);
1108
- const [isLoading, setIsLoading] = useState(!hasCached);
1109
- const [minHeight, setMinHeight] = useState("auto");
1110
- const containerRef = useRef(null);
1111
- const lastHeightRef = useRef(null);
1112
- const stableId = useMemo(() => {
1113
- let hash = 0;
1114
- for (let i = 0; i < code.length; i++) {
1115
- const char = code.charCodeAt(i);
1116
- hash = (hash << 5) - hash + char;
1117
- hash = hash & hash;
1118
- }
1119
- return `mermaid-${Math.abs(hash).toString(36)}`;
1120
- }, [code]);
1121
- useEffect(() => {
1122
- if (hasCached) return;
1123
- let mounted = true;
1124
- const renderDiagram = async () => {
1125
- try {
1126
- if (containerRef.current) {
1127
- const height = containerRef.current.offsetHeight;
1128
- lastHeightRef.current = height;
1129
- setMinHeight(`${height}px`);
1130
- }
1131
- const m = await getMermaid();
1132
- const id = `${stableId}-${Date.now()}`;
1133
- const { svg: renderedSvg } = await m.render(id, code);
1134
- if (mounted) {
1135
- svgCache.set(code, renderedSvg);
1136
- setSvg(renderedSvg);
1137
- setErrorMessage(null);
1138
- setIsLoading(false);
1139
- }
1140
- } catch (err) {
1141
- console.error("Mermaid render error:", err);
1142
- if (mounted) {
1143
- setErrorMessage(extractErrorMessage(err));
1144
- setIsLoading(false);
1145
- }
1146
- }
1147
- };
1148
- renderDiagram();
1149
- return () => {
1150
- mounted = false;
1151
- };
1152
- }, [code, stableId, hasCached]);
1153
- if (errorMessage) {
1154
- return /* @__PURE__ */ jsxs(
1155
- "div",
1156
- {
1157
- "data-testid": "mermaid-container",
1158
- className: "my-4 rounded-md border border-yellow-300/40 bg-yellow-50/50 dark:border-yellow-700/40 dark:bg-yellow-950/20 overflow-hidden",
1159
- children: [
1160
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200", children: [
1161
- /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
1162
- /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Diagram syntax error" }),
1163
- /* @__PURE__ */ jsxs("span", { className: "text-yellow-700/70 dark:text-yellow-300/60", children: [
1164
- "\u2014 ",
1165
- errorMessage
1166
- ] })
1167
- ] }),
1168
- /* @__PURE__ */ jsxs("div", { className: "border-t border-yellow-300/30 dark:border-yellow-700/30", children: [
1169
- /* @__PURE__ */ jsxs(
1170
- "button",
1171
- {
1172
- onClick: () => setShowSource(!showSource),
1173
- className: "flex items-center gap-1.5 px-4 py-1.5 text-xs text-yellow-700/60 dark:text-yellow-400/50 hover:text-yellow-800 dark:hover:text-yellow-300 transition-colors w-full",
1174
- children: [
1175
- showSource ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
1176
- showSource ? "Hide source" : "Show source"
1177
- ]
1178
- }
1179
- ),
1180
- showSource && /* @__PURE__ */ jsx("pre", { className: "px-4 pb-3 text-xs font-mono text-yellow-800/70 dark:text-yellow-200/60 overflow-auto whitespace-pre-wrap", children: code })
1181
- ] })
1182
- ]
1183
- }
1184
- );
1185
- }
1186
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1187
- /* @__PURE__ */ jsxs(
1188
- "div",
1189
- {
1190
- ref: containerRef,
1191
- "data-testid": "mermaid-container",
1192
- className: "relative group inline-block max-w-full",
1193
- style: { minHeight: isLoading ? minHeight : "auto" },
1194
- children: [
1195
- /* @__PURE__ */ jsx(
1196
- "div",
1197
- {
1198
- className: `mermaid flex justify-center my-4 overflow-x-auto transition-opacity duration-150 ${isLoading ? "opacity-50" : "opacity-100"}`,
1199
- dangerouslySetInnerHTML: { __html: svg }
1200
- }
1201
- ),
1202
- svg && /* @__PURE__ */ jsx(
1203
- "button",
1204
- {
1205
- onClick: () => setIsModalOpen(true),
1206
- className: "absolute top-2 right-2 p-2 bg-white/90 shadow-sm border rounded-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-50",
1207
- "aria-label": "Maximize diagram",
1208
- children: /* @__PURE__ */ jsx(MaximizeIcon, {})
1209
- }
1210
- )
1211
- ]
1212
- }
1213
- ),
1214
- /* @__PURE__ */ jsx(DiagramModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), children: /* @__PURE__ */ jsx(ZoomableSvg, { svg }) })
1215
- ] });
1282
+ const MermaidDiagramInner = ({ code }) => {
1283
+ const hasCached = svgCache.has(code);
1284
+ const [svg, setSvg] = useState(() => svgCache.get(code) || "");
1285
+ const [errorMessage, setErrorMessage] = useState(null);
1286
+ const [showSource, setShowSource] = useState(false);
1287
+ const [isModalOpen, setIsModalOpen] = useState(false);
1288
+ const [isLoading, setIsLoading] = useState(!hasCached);
1289
+ const [minHeight, setMinHeight] = useState("auto");
1290
+ const containerRef = useRef(null);
1291
+ const lastHeightRef = useRef(null);
1292
+ const stableId = useMemo(() => {
1293
+ let hash = 0;
1294
+ for (let i = 0; i < code.length; i++) {
1295
+ const char = code.charCodeAt(i);
1296
+ hash = (hash << 5) - hash + char;
1297
+ hash = hash & hash;
1298
+ }
1299
+ return `mermaid-${Math.abs(hash).toString(36)}`;
1300
+ }, [code]);
1301
+ useEffect(() => {
1302
+ if (hasCached) return;
1303
+ let mounted = true;
1304
+ const renderDiagram = async () => {
1305
+ try {
1306
+ if (containerRef.current) {
1307
+ const height = containerRef.current.offsetHeight;
1308
+ lastHeightRef.current = height;
1309
+ setMinHeight(`${height}px`);
1310
+ }
1311
+ const m = await getMermaid();
1312
+ const id = `${stableId}-${Date.now()}`;
1313
+ const { svg: renderedSvg } = await m.render(id, code);
1314
+ if (mounted) {
1315
+ svgCache.set(code, renderedSvg);
1316
+ setSvg(renderedSvg);
1317
+ setErrorMessage(null);
1318
+ setIsLoading(false);
1319
+ }
1320
+ } catch (err) {
1321
+ console.error("Mermaid render error:", err);
1322
+ if (mounted) {
1323
+ setErrorMessage(extractErrorMessage(err));
1324
+ setIsLoading(false);
1325
+ }
1326
+ }
1327
+ };
1328
+ renderDiagram();
1329
+ return () => {
1330
+ mounted = false;
1331
+ };
1332
+ }, [
1333
+ code,
1334
+ stableId,
1335
+ hasCached
1336
+ ]);
1337
+ if (errorMessage) return /* @__PURE__ */ jsxs("div", {
1338
+ "data-testid": "mermaid-container",
1339
+ className: "my-4 rounded-md border border-yellow-300/40 bg-yellow-50/50 dark:border-yellow-700/40 dark:bg-yellow-950/20 overflow-hidden",
1340
+ children: [/* @__PURE__ */ jsxs("div", {
1341
+ className: "flex items-center gap-2 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200",
1342
+ children: [
1343
+ /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
1344
+ /* @__PURE__ */ jsx("span", {
1345
+ className: "font-medium",
1346
+ children: "Diagram syntax error"
1347
+ }),
1348
+ /* @__PURE__ */ jsxs("span", {
1349
+ className: "text-yellow-700/70 dark:text-yellow-300/60",
1350
+ children: ["— ", errorMessage]
1351
+ })
1352
+ ]
1353
+ }), /* @__PURE__ */ jsxs("div", {
1354
+ className: "border-t border-yellow-300/30 dark:border-yellow-700/30",
1355
+ children: [/* @__PURE__ */ jsxs("button", {
1356
+ onClick: () => setShowSource(!showSource),
1357
+ className: "flex items-center gap-1.5 px-4 py-1.5 text-xs text-yellow-700/60 dark:text-yellow-400/50 hover:text-yellow-800 dark:hover:text-yellow-300 transition-colors w-full",
1358
+ children: [showSource ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}), showSource ? "Hide source" : "Show source"]
1359
+ }), showSource && /* @__PURE__ */ jsx("pre", {
1360
+ className: "px-4 pb-3 text-xs font-mono text-yellow-800/70 dark:text-yellow-200/60 overflow-auto whitespace-pre-wrap",
1361
+ children: code
1362
+ })]
1363
+ })]
1364
+ });
1365
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
1366
+ ref: containerRef,
1367
+ "data-testid": "mermaid-container",
1368
+ className: "relative group inline-block max-w-full",
1369
+ style: { minHeight: isLoading ? minHeight : "auto" },
1370
+ children: [/* @__PURE__ */ jsx("div", {
1371
+ className: `mermaid flex justify-center my-4 overflow-x-auto transition-opacity duration-150 ${isLoading ? "opacity-50" : "opacity-100"}`,
1372
+ dangerouslySetInnerHTML: { __html: svg }
1373
+ }), svg && /* @__PURE__ */ jsx("button", {
1374
+ onClick: () => setIsModalOpen(true),
1375
+ className: "absolute top-2 right-2 p-2 bg-white/90 shadow-sm border rounded-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-50",
1376
+ "aria-label": "Maximize diagram",
1377
+ children: /* @__PURE__ */ jsx(MaximizeIcon, {})
1378
+ })]
1379
+ }), /* @__PURE__ */ jsx(DiagramModal, {
1380
+ isOpen: isModalOpen,
1381
+ onClose: () => setIsModalOpen(false),
1382
+ children: /* @__PURE__ */ jsx(ZoomableSvg, { svg })
1383
+ })] });
1216
1384
  };
1217
- var MermaidDiagram = memo(
1218
- MermaidDiagramInner,
1219
- (prevProps, nextProps) => prevProps.code === nextProps.code
1220
- );
1221
-
1222
- // src/vantageFrontmatter.ts
1223
- var DOC_STATUSES = [
1224
- "draft",
1225
- "in-review",
1226
- "accepted",
1227
- "deprecated"
1385
+ const MermaidDiagram = memo(MermaidDiagramInner, (prevProps, nextProps) => prevProps.code === nextProps.code);
1386
+ //#endregion
1387
+ //#region src/vantageFrontmatter.ts
1388
+ /**
1389
+ * The document lifecycle vocabulary. Closed; extending it is a code change.
1390
+ *
1391
+ * This is the repo's own existing set, not a new one — `styleGuide.ts` tells
1392
+ * every agent to write `status: in-review # draft | in-review | accepted |
1393
+ * deprecated`, and every document under `docs/` follows it. It is deliberately
1394
+ * *not* the `badge` set (`draft stale blocked done wip`): `badge` is
1395
+ * section-scoped workflow state, `status` is document lifecycle state, and
1396
+ * `in-review` — the value the design doc's own only example renders — is not a
1397
+ * badge word at all. Only `draft` is a member of both, and a token set is per key.
1398
+ */
1399
+ const DOC_STATUSES = [
1400
+ "draft",
1401
+ "in-review",
1402
+ "accepted",
1403
+ "deprecated"
1228
1404
  ];
1229
- var VANTAGE_FRONTMATTER_KEYS = ["status-chip"];
1230
- var DOC_STATUS_TONES = {
1231
- draft: "muted",
1232
- "in-review": "warning",
1233
- accepted: "tip",
1234
- deprecated: "caution"
1405
+ /** Every key this build knows under `vantage:`. Closed. */
1406
+ const VANTAGE_FRONTMATTER_KEYS = ["status-chip"];
1407
+ /**
1408
+ * Which tone each status borrows its colours from.
1409
+ *
1410
+ * The chip has no palette of its own: it reuses the tone chips
1411
+ * (`.vantage-chip--<tone>` in `styles/directives.css`), which is also what makes
1412
+ * a `draft` chip and a `badge=draft` chip the same visual object. A map rather
1413
+ * than a computed class name, so the whole status→tone relation is one readable
1414
+ * table and a test can assert it covers the vocabulary.
1415
+ */
1416
+ const DOC_STATUS_TONES = {
1417
+ draft: "muted",
1418
+ "in-review": "warning",
1419
+ accepted: "tip",
1420
+ deprecated: "caution"
1235
1421
  };
1236
- var STATUS_CHIP_VALUES = [
1237
- ...DOC_STATUSES,
1238
- "true",
1239
- "false"
1422
+ /** The legal `status-chip` values, in the order a message should list them. */
1423
+ const STATUS_CHIP_VALUES = [
1424
+ ...DOC_STATUSES,
1425
+ "true",
1426
+ "false"
1240
1427
  ];
1428
+ /** Narrowing helper the chip and the checker both use. */
1241
1429
  function isDocStatus(value) {
1242
- return typeof value === "string" && DOC_STATUSES.includes(value);
1430
+ return typeof value === "string" && DOC_STATUSES.includes(value);
1243
1431
  }
1244
1432
  function isTable(value) {
1245
- return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
1433
+ return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
1246
1434
  }
1435
+ /**
1436
+ * Read the `vantage:` key out of parsed frontmatter.
1437
+ *
1438
+ * Pure: no module state, no mutation of the input, no logging. The same object
1439
+ * in twice gives equal results out.
1440
+ */
1247
1441
  function readVantageFrontmatter(frontmatter) {
1248
- const issues = [];
1249
- if (!Object.hasOwn(frontmatter, "vantage")) return { issues };
1250
- const value = frontmatter["vantage"];
1251
- if (!isTable(value)) {
1252
- issues.push({ kind: "not-a-table", value });
1253
- return { issues };
1254
- }
1255
- let statusChip;
1256
- for (const key of Object.keys(value)) {
1257
- if (!VANTAGE_FRONTMATTER_KEYS.includes(key)) {
1258
- issues.push({ kind: "unknown-key", key });
1259
- continue;
1260
- }
1261
- if (key === "status-chip") {
1262
- statusChip = readStatusChip(frontmatter, value[key], issues);
1263
- }
1264
- }
1265
- return { ...statusChip === void 0 ? {} : { statusChip }, issues };
1442
+ const issues = [];
1443
+ if (!Object.hasOwn(frontmatter, "vantage")) return { issues };
1444
+ const value = frontmatter["vantage"];
1445
+ if (!isTable(value)) {
1446
+ issues.push({
1447
+ kind: "not-a-table",
1448
+ value
1449
+ });
1450
+ return { issues };
1451
+ }
1452
+ let statusChip;
1453
+ for (const key of Object.keys(value)) {
1454
+ if (!VANTAGE_FRONTMATTER_KEYS.includes(key)) {
1455
+ issues.push({
1456
+ kind: "unknown-key",
1457
+ key
1458
+ });
1459
+ continue;
1460
+ }
1461
+ if (key === "status-chip") statusChip = readStatusChip(frontmatter, value[key], issues);
1462
+ }
1463
+ return {
1464
+ ...statusChip === void 0 ? {} : { statusChip },
1465
+ issues
1466
+ };
1266
1467
  }
1468
+ /**
1469
+ * `status-chip` takes two shapes, and the boolean one is the recommended shape.
1470
+ *
1471
+ * `true` **inherits** the document's own top-level `status:`, so the chip cannot
1472
+ * disagree with it — which is the entire point of §5.3 ("makes `status: draft`
1473
+ * visible rather than only buried in a metadata card"; the row stays, the chip
1474
+ * promotes the value rather than moving it). A literal token is kept
1475
+ * because the design doc's first draft of that example used one, and the
1476
+ * disagreement it makes possible is turned into a checker finding rather than
1477
+ * banned.
1478
+ *
1479
+ * Discrimination is on `typeof`, never truthiness: `true` is a YAML boolean and
1480
+ * `2026-08-31` is a `Date`, and both would sail through a truthy test.
1481
+ */
1267
1482
  function readStatusChip(frontmatter, raw, issues) {
1268
- const status = frontmatter["status"];
1269
- if (raw === false) return void 0;
1270
- if (raw === true) {
1271
- if (isDocStatus(status)) return status;
1272
- issues.push({ kind: "status-chip-orphan", status });
1273
- return void 0;
1274
- }
1275
- if (isDocStatus(raw)) {
1276
- if (isDocStatus(status) && status !== raw) {
1277
- issues.push({ kind: "status-chip-disagrees", chip: raw, status });
1278
- }
1279
- return raw;
1280
- }
1281
- issues.push({
1282
- kind: "bad-value",
1283
- key: "status-chip",
1284
- value: raw,
1285
- legal: STATUS_CHIP_VALUES
1286
- });
1287
- return void 0;
1483
+ const status = frontmatter["status"];
1484
+ if (raw === false) return void 0;
1485
+ if (raw === true) {
1486
+ if (isDocStatus(status)) return status;
1487
+ issues.push({
1488
+ kind: "status-chip-orphan",
1489
+ status
1490
+ });
1491
+ return;
1492
+ }
1493
+ if (isDocStatus(raw)) {
1494
+ if (isDocStatus(status) && status !== raw) issues.push({
1495
+ kind: "status-chip-disagrees",
1496
+ chip: raw,
1497
+ status
1498
+ });
1499
+ return raw;
1500
+ }
1501
+ issues.push({
1502
+ kind: "bad-value",
1503
+ key: "status-chip",
1504
+ value: raw,
1505
+ legal: STATUS_CHIP_VALUES
1506
+ });
1288
1507
  }
1289
- var DocumentStatusChipInner = ({
1290
- status
1291
- }) => /* @__PURE__ */ jsx(
1292
- "span",
1293
- {
1294
- className: `vantage-chip vantage-chip--${DOC_STATUS_TONES[status]}`,
1295
- "data-vantage-status": status,
1296
- title: `Document status: ${status}`,
1297
- children: status
1298
- }
1299
- );
1300
- var DocumentStatusChip = memo(DocumentStatusChipInner);
1301
- var FileTextIcon = () => /* @__PURE__ */ jsxs(
1302
- "svg",
1303
- {
1304
- width: "14",
1305
- height: "14",
1306
- viewBox: "0 0 24 24",
1307
- fill: "none",
1308
- stroke: "currentColor",
1309
- strokeWidth: "2",
1310
- strokeLinecap: "round",
1311
- strokeLinejoin: "round",
1312
- className: "text-slate-400",
1313
- children: [
1314
- /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
1315
- /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
1316
- /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
1317
- /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
1318
- /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
1319
- ]
1320
- }
1321
- );
1508
+ //#endregion
1509
+ //#region src/DocumentStatusChip.tsx
1510
+ /**
1511
+ * The document's lifecycle status, as a chip.
1512
+ *
1513
+ * Non-interactive on purpose. D4 says a control that cannot work must not
1514
+ * render, and the cheapest way to satisfy that in *every* rendering — the app,
1515
+ * the package's exported viewer, an exported static site — is not to be a
1516
+ * control at all. So there is no `onClick`, no `<button>` and no
1517
+ * `isStaticMode()` gate: gating it would delete the chip from every exported
1518
+ * site, which is the one place D5 costs nothing.
1519
+ *
1520
+ * The text is the token verbatim, lowercase. No display map (`"In review"`) —
1521
+ * that is a second vocabulary that drifts from the first, and the visual
1522
+ * flourish belongs in CSS, where `text-transform` cannot change what the
1523
+ * document's text content is.
1524
+ *
1525
+ * Styling comes entirely from `styles/directives.css` — `.vantage-chip` for the
1526
+ * geometry, shared by selector list with the `badge=` pseudo-element, and
1527
+ * `.vantage-chip--<tone>` for the colours. No Tailwind utility appears here, so
1528
+ * the chip survives in a consumer that does not run Tailwind and no class name
1529
+ * has to be discovered by a content scan.
1530
+ */
1531
+ const DocumentStatusChipInner = ({ status }) => /* @__PURE__ */ jsx("span", {
1532
+ className: `vantage-chip vantage-chip--${DOC_STATUS_TONES[status]}`,
1533
+ "data-vantage-status": status,
1534
+ title: `Document status: ${status}`,
1535
+ children: status
1536
+ });
1537
+ const DocumentStatusChip = memo(DocumentStatusChipInner);
1538
+ //#endregion
1539
+ //#region src/FrontmatterDisplay.tsx
1540
+ const FileTextIcon = () => /* @__PURE__ */ jsxs("svg", {
1541
+ width: "14",
1542
+ height: "14",
1543
+ viewBox: "0 0 24 24",
1544
+ fill: "none",
1545
+ stroke: "currentColor",
1546
+ strokeWidth: "2",
1547
+ strokeLinecap: "round",
1548
+ strokeLinejoin: "round",
1549
+ className: "text-slate-400",
1550
+ children: [
1551
+ /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
1552
+ /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
1553
+ /* @__PURE__ */ jsx("path", { d: "M10 9H8" }),
1554
+ /* @__PURE__ */ jsx("path", { d: "M16 13H8" }),
1555
+ /* @__PURE__ */ jsx("path", { d: "M16 17H8" })
1556
+ ]
1557
+ });
1322
1558
  function isStringArray(value) {
1323
- return Array.isArray(value) && value.every((item) => typeof item === "string");
1559
+ return Array.isArray(value) && value.every((item) => typeof item === "string");
1324
1560
  }
1325
1561
  function isPlainObject(value) {
1326
- return typeof value === "object" && value !== null && !Array.isArray(value);
1562
+ return typeof value === "object" && value !== null && !Array.isArray(value);
1327
1563
  }
1328
1564
  function formatValue(value) {
1329
- if (value instanceof Date) {
1330
- return value.toISOString().split("T")[0];
1331
- }
1332
- if (Array.isArray(value)) {
1333
- return value.map(String).join(", ");
1334
- }
1335
- if (typeof value === "boolean") {
1336
- return value ? "true" : "false";
1337
- }
1338
- if (isPlainObject(value)) {
1339
- return JSON.stringify(value, null, 2);
1340
- }
1341
- return String(value);
1565
+ if (value instanceof Date) return value.toISOString().split("T")[0];
1566
+ if (Array.isArray(value)) return value.map(String).join(", ");
1567
+ if (typeof value === "boolean") return value ? "true" : "false";
1568
+ if (isPlainObject(value)) return JSON.stringify(value, null, 2);
1569
+ return String(value);
1342
1570
  }
1343
1571
  function TagList({ items }) {
1344
- return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item) => /* @__PURE__ */ jsx(
1345
- "span",
1346
- {
1347
- className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
1348
- children: item
1349
- },
1350
- item
1351
- )) });
1572
+ return /* @__PURE__ */ jsx("div", {
1573
+ className: "flex flex-wrap gap-1.5",
1574
+ children: items.map((item) => /* @__PURE__ */ jsx("span", {
1575
+ className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
1576
+ children: item
1577
+ }, item))
1578
+ });
1352
1579
  }
1353
1580
  function ValueCell({ value }) {
1354
- if (isStringArray(value) && value.length > 0) {
1355
- return /* @__PURE__ */ jsx(TagList, { items: value });
1356
- }
1357
- if (isPlainObject(value)) {
1358
- return /* @__PURE__ */ jsx("pre", { className: "bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md px-3 py-2 text-xs font-mono overflow-x-auto text-slate-600 dark:text-slate-300", children: formatValue(value) });
1359
- }
1360
- return /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatValue(value) });
1581
+ if (isStringArray(value) && value.length > 0) return /* @__PURE__ */ jsx(TagList, { items: value });
1582
+ if (isPlainObject(value)) return /* @__PURE__ */ jsx("pre", {
1583
+ className: "bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md px-3 py-2 text-xs font-mono overflow-x-auto text-slate-600 dark:text-slate-300",
1584
+ children: formatValue(value)
1585
+ });
1586
+ return /* @__PURE__ */ jsx("span", {
1587
+ className: "font-medium",
1588
+ children: formatValue(value)
1589
+ });
1361
1590
  }
1362
1591
  function flattenEntries(entries) {
1363
- const result = [];
1364
- for (const [key, value] of entries) {
1365
- if (key === "vantage") continue;
1366
- if (key === "taxonomies" && isPlainObject(value)) {
1367
- for (const [taxKey, taxVal] of Object.entries(value)) {
1368
- result.push([taxKey, taxVal]);
1369
- }
1370
- } else if (key === "extra" && isPlainObject(value)) {
1371
- for (const [extraKey, extraVal] of Object.entries(value)) {
1372
- result.push([extraKey, extraVal]);
1373
- }
1374
- } else {
1375
- result.push([key, value]);
1376
- }
1377
- }
1378
- return result;
1592
+ const result = [];
1593
+ for (const [key, value] of entries) {
1594
+ if (key === "vantage") continue;
1595
+ if (key === "taxonomies" && isPlainObject(value)) for (const [taxKey, taxVal] of Object.entries(value)) result.push([taxKey, taxVal]);
1596
+ else if (key === "extra" && isPlainObject(value)) for (const [extraKey, extraVal] of Object.entries(value)) result.push([extraKey, extraVal]);
1597
+ else result.push([key, value]);
1598
+ }
1599
+ return result;
1379
1600
  }
1380
- var FrontmatterDisplayInner = ({
1381
- frontmatter
1382
- }) => {
1383
- const entries = flattenEntries(Object.entries(frontmatter));
1384
- const { statusChip } = readVantageFrontmatter(frontmatter);
1385
- if (entries.length === 0 && statusChip === void 0) return null;
1386
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1387
- statusChip !== void 0 && /* @__PURE__ */ jsx("div", { className: "vantage-chrome", children: /* @__PURE__ */ jsx(DocumentStatusChip, { status: statusChip }) }),
1388
- entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8 rounded-lg overflow-hidden bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/80 border border-slate-200 dark:border-slate-700 shadow-sm", children: [
1389
- /* @__PURE__ */ jsxs("div", { className: "px-4 py-2.5 bg-white/60 dark:bg-slate-900/40 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2", children: [
1390
- /* @__PURE__ */ jsx(FileTextIcon, {}),
1391
- /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider", children: "Metadata" })
1392
- ] }),
1393
- /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs(
1394
- "tr",
1395
- {
1396
- className: "border-b border-slate-200/60 dark:border-slate-700/60 last:border-0",
1397
- children: [
1398
- /* @__PURE__ */ jsx("td", { className: "py-2 pr-4 font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap align-top w-1/4 min-w-[100px]", children: key }),
1399
- /* @__PURE__ */ jsx("td", { className: "py-2 text-slate-800 dark:text-slate-200 align-top", children: /* @__PURE__ */ jsx(ValueCell, { value }) })
1400
- ]
1401
- },
1402
- key
1403
- )) }) }) })
1404
- ] })
1405
- ] });
1601
+ const FrontmatterDisplayInner = ({ frontmatter }) => {
1602
+ const entries = flattenEntries(Object.entries(frontmatter));
1603
+ const { statusChip } = readVantageFrontmatter(frontmatter);
1604
+ if (entries.length === 0 && statusChip === void 0) return null;
1605
+ return /* @__PURE__ */ jsxs(Fragment, { children: [statusChip !== void 0 && /* @__PURE__ */ jsx("div", {
1606
+ className: "vantage-chrome",
1607
+ children: /* @__PURE__ */ jsx(DocumentStatusChip, { status: statusChip })
1608
+ }), entries.length > 0 && /* @__PURE__ */ jsxs("div", {
1609
+ className: "mb-8 rounded-lg overflow-hidden bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/80 border border-slate-200 dark:border-slate-700 shadow-sm",
1610
+ children: [/* @__PURE__ */ jsxs("div", {
1611
+ className: "px-4 py-2.5 bg-white/60 dark:bg-slate-900/40 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2",
1612
+ children: [/* @__PURE__ */ jsx(FileTextIcon, {}), /* @__PURE__ */ jsx("span", {
1613
+ className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider",
1614
+ children: "Metadata"
1615
+ })]
1616
+ }), /* @__PURE__ */ jsx("div", {
1617
+ className: "p-4",
1618
+ children: /* @__PURE__ */ jsx("table", {
1619
+ className: "w-full text-sm",
1620
+ children: /* @__PURE__ */ jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("tr", {
1621
+ className: "border-b border-slate-200/60 dark:border-slate-700/60 last:border-0",
1622
+ children: [/* @__PURE__ */ jsx("td", {
1623
+ className: "py-2 pr-4 font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap align-top w-1/4 min-w-[100px]",
1624
+ children: key
1625
+ }), /* @__PURE__ */ jsx("td", {
1626
+ className: "py-2 text-slate-800 dark:text-slate-200 align-top",
1627
+ children: /* @__PURE__ */ jsx(ValueCell, { value })
1628
+ })]
1629
+ }, key)) })
1630
+ })
1631
+ })]
1632
+ })] });
1406
1633
  };
1407
- var FrontmatterDisplay = memo(FrontmatterDisplayInner);
1408
-
1409
- // src/lineAnchor.ts
1634
+ const FrontmatterDisplay = memo(FrontmatterDisplayInner);
1635
+ //#endregion
1636
+ //#region src/lineAnchor.ts
1637
+ /**
1638
+ * Parsing for GitHub-style line anchors, with no DOM in sight.
1639
+ *
1640
+ * Split out from scrollToLineAnchor.ts so that non-browser consumers — the
1641
+ * `vantage-check` CLI, which validates `#L42` links against the file on disk —
1642
+ * can share the *same* syntax the viewer honours instead of reimplementing it
1643
+ * and drifting.
1644
+ */
1645
+ /**
1646
+ * Parse a GitHub-style line anchor hash.
1647
+ * Supports: #L42, #L42-L50, #L42-50
1648
+ * Returns null if the hash is not a line anchor.
1649
+ */
1410
1650
  function parseLineAnchor(hash) {
1411
- if (!hash) return null;
1412
- const frag = hash.startsWith("#") ? hash.slice(1) : hash;
1413
- const match = frag.match(/^L(\d+)(?:-L?(\d+))?$/);
1414
- if (!match) return null;
1415
- const start = parseInt(match[1], 10);
1416
- const end = match[2] ? parseInt(match[2], 10) : start;
1417
- return { start: Math.min(start, end), end: Math.max(start, end) };
1651
+ if (!hash) return null;
1652
+ const match = (hash.startsWith("#") ? hash.slice(1) : hash).match(/^L(\d+)(?:-L?(\d+))?$/);
1653
+ if (!match) return null;
1654
+ const start = parseInt(match[1], 10);
1655
+ const end = match[2] ? parseInt(match[2], 10) : start;
1656
+ return {
1657
+ start: Math.min(start, end),
1658
+ end: Math.max(start, end)
1659
+ };
1418
1660
  }
1419
-
1420
- // src/scrollToLineAnchor.ts
1421
- var HIGHLIGHT_CLASS = "line-anchor-highlight";
1661
+ //#endregion
1662
+ //#region src/scrollToLineAnchor.ts
1663
+ /**
1664
+ * Framework-agnostic line anchor utilities.
1665
+ * Scroll to and highlight the elements a GitHub-style line anchor
1666
+ * (#L42, #L42-L50) names. The parsing half lives in lineAnchor.ts, which has
1667
+ * no DOM dependency.
1668
+ */
1669
+ const HIGHLIGHT_CLASS$1 = "line-anchor-highlight";
1670
+ /**
1671
+ * Clear all line anchor highlights from a container.
1672
+ */
1422
1673
  function clearLineAnchorHighlights(container) {
1423
- container.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((node) => {
1424
- node.classList.remove(HIGHLIGHT_CLASS);
1425
- });
1674
+ container.querySelectorAll(`.${HIGHLIGHT_CLASS$1}`).forEach((node) => {
1675
+ node.classList.remove(HIGHLIGHT_CLASS$1);
1676
+ });
1426
1677
  }
1678
+ /**
1679
+ * Scroll to and highlight line-anchored elements in a container.
1680
+ *
1681
+ * @param container - The DOM element containing rendered markdown
1682
+ * @param hash - The URL hash (e.g. "#L42" or "#L42-L50")
1683
+ * @returns A cleanup function that removes the highlights
1684
+ */
1427
1685
  function scrollToLineAnchor(container, hash) {
1428
- clearLineAnchorHighlights(container);
1429
- const range = parseLineAnchor(hash);
1430
- if (!range) return null;
1431
- const blocks = container.querySelectorAll("[data-source-line]");
1432
- let firstMatch = null;
1433
- for (const block of blocks) {
1434
- const line = parseInt(block.dataset.sourceLine || "0", 10);
1435
- if (line >= range.start && line <= range.end) {
1436
- block.classList.add(HIGHLIGHT_CLASS);
1437
- if (!firstMatch) firstMatch = block;
1438
- }
1439
- }
1440
- if (!firstMatch) {
1441
- let closest = null;
1442
- let closestLine = 0;
1443
- for (const block of blocks) {
1444
- const line = parseInt(
1445
- block.dataset.sourceLine || "0",
1446
- 10
1447
- );
1448
- if (line <= range.start && line > closestLine) {
1449
- closestLine = line;
1450
- closest = block;
1451
- }
1452
- }
1453
- if (closest) {
1454
- closest.classList.add(HIGHLIGHT_CLASS);
1455
- firstMatch = closest;
1456
- }
1457
- }
1458
- if (firstMatch) {
1459
- requestAnimationFrame(() => {
1460
- const scrollParent = findScrollParent(container);
1461
- if (scrollParent) {
1462
- const offset = firstMatch.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
1463
- scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
1464
- } else {
1465
- firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
1466
- }
1467
- });
1468
- }
1469
- return () => clearLineAnchorHighlights(container);
1686
+ clearLineAnchorHighlights(container);
1687
+ const range = parseLineAnchor(hash);
1688
+ if (!range) return null;
1689
+ const blocks = container.querySelectorAll("[data-source-line]");
1690
+ let firstMatch = null;
1691
+ for (const block of blocks) {
1692
+ const line = parseInt(block.dataset.sourceLine || "0", 10);
1693
+ if (line >= range.start && line <= range.end) {
1694
+ block.classList.add(HIGHLIGHT_CLASS$1);
1695
+ if (!firstMatch) firstMatch = block;
1696
+ }
1697
+ }
1698
+ if (!firstMatch) {
1699
+ let closest = null;
1700
+ let closestLine = 0;
1701
+ for (const block of blocks) {
1702
+ const line = parseInt(block.dataset.sourceLine || "0", 10);
1703
+ if (line <= range.start && line > closestLine) {
1704
+ closestLine = line;
1705
+ closest = block;
1706
+ }
1707
+ }
1708
+ if (closest) {
1709
+ closest.classList.add(HIGHLIGHT_CLASS$1);
1710
+ firstMatch = closest;
1711
+ }
1712
+ }
1713
+ if (firstMatch) requestAnimationFrame(() => {
1714
+ const scrollParent = findScrollParent(container);
1715
+ if (scrollParent) {
1716
+ const offset = firstMatch.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
1717
+ scrollParent.scrollTo({
1718
+ top: offset - 32,
1719
+ behavior: "smooth"
1720
+ });
1721
+ } else firstMatch.scrollIntoView({
1722
+ behavior: "smooth",
1723
+ block: "start"
1724
+ });
1725
+ });
1726
+ return () => clearLineAnchorHighlights(container);
1470
1727
  }
1471
1728
  function findScrollParent(el) {
1472
- let node = el;
1473
- while (node) {
1474
- const overflow = getComputedStyle(node).overflowY;
1475
- if (overflow === "auto" || overflow === "scroll") return node;
1476
- node = node.parentElement;
1477
- }
1478
- return null;
1729
+ let node = el;
1730
+ while (node) {
1731
+ const overflow = getComputedStyle(node).overflowY;
1732
+ if (overflow === "auto" || overflow === "scroll") return node;
1733
+ node = node.parentElement;
1734
+ }
1735
+ return null;
1479
1736
  }
1480
-
1481
- // src/useLineAnchor.ts
1482
- var HIGHLIGHT_CLASS2 = "line-anchor-highlight";
1737
+ //#endregion
1738
+ //#region src/useLineAnchor.ts
1739
+ const HIGHLIGHT_CLASS = "line-anchor-highlight";
1740
+ /**
1741
+ * React hook that handles GitHub-style line anchors (#L42, #L42-L50).
1742
+ *
1743
+ * - Parses the URL hash for line references
1744
+ * - Finds block elements with matching `data-source-line` attributes
1745
+ * - Scrolls to and highlights them
1746
+ * - Dismisses on Escape or click on the highlight
1747
+ *
1748
+ * @param containerRef - Ref to the DOM element containing rendered markdown
1749
+ * @param hash - The current URL hash (e.g. "#L42", from location.hash or window.location.hash)
1750
+ */
1483
1751
  function useLineAnchor(containerRef, hash) {
1484
- const clearHighlights = useCallback(() => {
1485
- const el = containerRef.current;
1486
- if (!el) return;
1487
- clearLineAnchorHighlights(el);
1488
- }, [containerRef]);
1489
- useEffect(() => {
1490
- const el = containerRef.current;
1491
- if (!el) return;
1492
- clearHighlights();
1493
- const range = parseLineAnchor(hash);
1494
- if (!range) return;
1495
- const blocks = el.querySelectorAll("[data-source-line]");
1496
- let firstMatch = null;
1497
- for (const block of blocks) {
1498
- const line = parseInt(
1499
- block.dataset.sourceLine || "0",
1500
- 10
1501
- );
1502
- if (line >= range.start && line <= range.end) {
1503
- block.classList.add(HIGHLIGHT_CLASS2);
1504
- if (!firstMatch) firstMatch = block;
1505
- }
1506
- }
1507
- if (!firstMatch) {
1508
- let closest = null;
1509
- let closestLine = 0;
1510
- for (const block of blocks) {
1511
- const line = parseInt(
1512
- block.dataset.sourceLine || "0",
1513
- 10
1514
- );
1515
- if (line <= range.start && line > closestLine) {
1516
- closestLine = line;
1517
- closest = block;
1518
- }
1519
- }
1520
- if (closest) {
1521
- closest.classList.add(HIGHLIGHT_CLASS2);
1522
- firstMatch = closest;
1523
- }
1524
- }
1525
- if (firstMatch) {
1526
- let scrollParent = el;
1527
- while (scrollParent) {
1528
- const overflow = getComputedStyle(scrollParent).overflowY;
1529
- if (overflow === "auto" || overflow === "scroll") break;
1530
- scrollParent = scrollParent.parentElement;
1531
- }
1532
- if (scrollParent) {
1533
- const target = firstMatch;
1534
- requestAnimationFrame(() => {
1535
- const offset = target.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
1536
- scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
1537
- });
1538
- }
1539
- }
1540
- }, [hash, containerRef, clearHighlights]);
1541
- useEffect(() => {
1542
- const handler = (e) => {
1543
- if (e.key === "Escape") {
1544
- clearHighlights();
1545
- if (window.location.hash) {
1546
- history.replaceState(null, "", window.location.pathname);
1547
- }
1548
- }
1549
- };
1550
- document.addEventListener("keydown", handler);
1551
- return () => document.removeEventListener("keydown", handler);
1552
- }, [clearHighlights]);
1553
- useEffect(() => {
1554
- const el = containerRef.current;
1555
- if (!el) return;
1556
- const handler = (e) => {
1557
- const target = e.target;
1558
- if (target.closest(`.${HIGHLIGHT_CLASS2}`)) {
1559
- clearHighlights();
1560
- if (window.location.hash) {
1561
- history.replaceState(null, "", window.location.pathname);
1562
- }
1563
- }
1564
- };
1565
- el.addEventListener("click", handler);
1566
- return () => el.removeEventListener("click", handler);
1567
- }, [containerRef, clearHighlights]);
1568
- return { clearHighlights };
1752
+ const clearHighlights = useCallback(() => {
1753
+ const el = containerRef.current;
1754
+ if (!el) return;
1755
+ clearLineAnchorHighlights(el);
1756
+ }, [containerRef]);
1757
+ useEffect(() => {
1758
+ const el = containerRef.current;
1759
+ if (!el) return;
1760
+ clearHighlights();
1761
+ const range = parseLineAnchor(hash);
1762
+ if (!range) return;
1763
+ const blocks = el.querySelectorAll("[data-source-line]");
1764
+ let firstMatch = null;
1765
+ for (const block of blocks) {
1766
+ const line = parseInt(block.dataset.sourceLine || "0", 10);
1767
+ if (line >= range.start && line <= range.end) {
1768
+ block.classList.add(HIGHLIGHT_CLASS);
1769
+ if (!firstMatch) firstMatch = block;
1770
+ }
1771
+ }
1772
+ if (!firstMatch) {
1773
+ let closest = null;
1774
+ let closestLine = 0;
1775
+ for (const block of blocks) {
1776
+ const line = parseInt(block.dataset.sourceLine || "0", 10);
1777
+ if (line <= range.start && line > closestLine) {
1778
+ closestLine = line;
1779
+ closest = block;
1780
+ }
1781
+ }
1782
+ if (closest) {
1783
+ closest.classList.add(HIGHLIGHT_CLASS);
1784
+ firstMatch = closest;
1785
+ }
1786
+ }
1787
+ if (firstMatch) {
1788
+ let scrollParent = el;
1789
+ while (scrollParent) {
1790
+ const overflow = getComputedStyle(scrollParent).overflowY;
1791
+ if (overflow === "auto" || overflow === "scroll") break;
1792
+ scrollParent = scrollParent.parentElement;
1793
+ }
1794
+ if (scrollParent) {
1795
+ const target = firstMatch;
1796
+ requestAnimationFrame(() => {
1797
+ const offset = target.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
1798
+ scrollParent.scrollTo({
1799
+ top: offset - 32,
1800
+ behavior: "smooth"
1801
+ });
1802
+ });
1803
+ }
1804
+ }
1805
+ }, [
1806
+ hash,
1807
+ containerRef,
1808
+ clearHighlights
1809
+ ]);
1810
+ useEffect(() => {
1811
+ const handler = (e) => {
1812
+ if (e.key === "Escape") {
1813
+ clearHighlights();
1814
+ if (window.location.hash) history.replaceState(null, "", window.location.pathname);
1815
+ }
1816
+ };
1817
+ document.addEventListener("keydown", handler);
1818
+ return () => document.removeEventListener("keydown", handler);
1819
+ }, [clearHighlights]);
1820
+ useEffect(() => {
1821
+ const el = containerRef.current;
1822
+ if (!el) return;
1823
+ const handler = (e) => {
1824
+ if (e.target.closest(`.${HIGHLIGHT_CLASS}`)) {
1825
+ clearHighlights();
1826
+ if (window.location.hash) history.replaceState(null, "", window.location.pathname);
1827
+ }
1828
+ };
1829
+ el.addEventListener("click", handler);
1830
+ return () => el.removeEventListener("click", handler);
1831
+ }, [containerRef, clearHighlights]);
1832
+ return { clearHighlights };
1569
1833
  }
1570
- var MarkdownViewerInner = ({
1571
- content,
1572
- currentPath = "",
1573
- hash = "",
1574
- baseUrl = "/",
1575
- imageApiBase,
1576
- className,
1577
- onNavigate
1578
- }) => {
1579
- const containerRef = useRef(null);
1580
- useLineAnchor(containerRef, hash);
1581
- const { frontmatter, body, bodyLineOffset } = useMemo(() => {
1582
- return parseFrontmatter(content);
1583
- }, [content]);
1584
- const { remarkPlugins, rehypePlugins } = useMemo(
1585
- () => buildPipeline({ bodyLineOffset }),
1586
- [bodyLineOffset]
1587
- );
1588
- const handleLinkClick = useCallback(
1589
- (e, href) => {
1590
- if (href.startsWith("#")) {
1591
- e.preventDefault();
1592
- const id = href.slice(1);
1593
- const el = document.getElementById(id);
1594
- if (el) {
1595
- const scrollContainer = el.closest("[data-content-scroll]") || el.closest(".overflow-y-auto");
1596
- if (scrollContainer) {
1597
- const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
1598
- scrollContainer.scrollTo({ top: offset - 16 });
1599
- } else {
1600
- el.scrollIntoView();
1601
- }
1602
- }
1603
- return;
1604
- }
1605
- if (href.startsWith("http") || href.startsWith("mailto:")) return;
1606
- if (onNavigate) {
1607
- if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
1608
- e.preventDefault();
1609
- const [pathPart, hashPart] = href.split("#");
1610
- const parts = currentPath.split("/");
1611
- parts.pop();
1612
- const dir = parts.join("/");
1613
- const cleanHref = pathPart.replace(/^\.\//, "");
1614
- const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
1615
- onNavigate(resolvedPath + (hashPart ? `#${hashPart}` : ""));
1616
- }
1617
- },
1618
- [currentPath, onNavigate]
1619
- );
1620
- const resolveHref = useCallback(
1621
- (href) => {
1622
- if (!href) return "";
1623
- if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.startsWith("/")) {
1624
- return href;
1625
- }
1626
- const [pathPart, hashPart] = href.split("#");
1627
- const parts = currentPath.split("/");
1628
- parts.pop();
1629
- const dir = parts.join("/");
1630
- const cleanHref = pathPart.replace(/^\.\//, "");
1631
- const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
1632
- return `${baseUrl}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`;
1633
- },
1634
- [currentPath, baseUrl]
1635
- );
1636
- const transformImageUri = useCallback(
1637
- (uri, key) => {
1638
- if (key === "href") return uri;
1639
- if (uri.startsWith("http") || uri.startsWith("data:")) return uri;
1640
- const parts = currentPath.split("/");
1641
- parts.pop();
1642
- const dir = parts.join("/");
1643
- const resolvedPath = dir ? `${dir}/${uri}` : uri;
1644
- if (imageApiBase) {
1645
- return `${imageApiBase}/content?path=${encodeURIComponent(resolvedPath)}`;
1646
- }
1647
- return `${baseUrl}${resolvedPath}`;
1648
- },
1649
- [currentPath, baseUrl, imageApiBase]
1650
- );
1651
- const markdownComponents = useMemo(
1652
- () => ({
1653
- a({
1654
- href,
1655
- children,
1656
- ...props
1657
- }) {
1658
- const resolvedHref = resolveHref(href);
1659
- return /* @__PURE__ */ jsx(
1660
- "a",
1661
- {
1662
- href: resolvedHref,
1663
- onClick: (e) => href && handleLinkClick(e, href),
1664
- ...props,
1665
- children
1666
- }
1667
- );
1668
- },
1669
- code(props) {
1670
- const { children, className: codeClassName, ...rest } = props;
1671
- const match = /language-(\w+)/.exec(codeClassName || "");
1672
- if (match && match[1] === "mermaid") {
1673
- return /* @__PURE__ */ jsx(MermaidDiagram, { code: String(children).replace(/\n$/, "") });
1674
- }
1675
- return /* @__PURE__ */ jsx("code", { className: codeClassName, ...rest, children });
1676
- }
1677
- }),
1678
- [handleLinkClick, resolveHref]
1679
- );
1680
- const proseClasses = [
1681
- "prose prose-slate dark:prose-invert max-w-none",
1682
- "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-slate-100",
1683
- "prose-h1:text-[2em] prose-h1:mb-3 prose-h1:pb-[0.3em] prose-h1:border-b prose-h1:border-slate-200 dark:prose-h1:border-slate-700",
1684
- "prose-h2:text-[1.5em] prose-h2:mt-6 prose-h2:mb-3 prose-h2:pb-[0.3em] prose-h2:border-b prose-h2:border-slate-200 dark:prose-h2:border-slate-700",
1685
- "prose-h3:text-[1.25em] prose-h3:mt-6 prose-h3:mb-2",
1686
- "prose-h4:text-[1em] prose-h4:mt-6 prose-h4:mb-2",
1687
- "prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-[1.5] prose-p:my-[16px]",
1688
- "prose-ul:my-[16px] prose-ul:list-disc prose-li:my-0.5 prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
1689
- "prose-ol:my-[16px] prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
1690
- "prose-pre:bg-slate-50 dark:prose-pre:bg-slate-800 prose-pre:border prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-pre:p-4 prose-pre:rounded-md prose-pre:text-[85%] prose-pre:leading-[1.45]",
1691
- "prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
1692
- "prose-img:rounded-lg prose-img:my-4",
1693
- "prose-blockquote:border-l-[0.25em] prose-blockquote:border-slate-300 dark:prose-blockquote:border-slate-600 prose-blockquote:pl-4 prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400 prose-blockquote:italic",
1694
- "prose-code:before:content-none prose-code:after:content-none",
1695
- "prose-code:bg-slate-100 dark:prose-code:bg-slate-800 prose-code:px-[0.4em] prose-code:py-[0.2em] prose-code:rounded-md prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-code:font-mono prose-code:text-[85%] prose-code:font-normal prose-code:border prose-code:border-slate-200/50 dark:prose-code:border-slate-700/50",
1696
- "prose-table:text-sm",
1697
- "prose-th:px-3 prose-th:py-1.5 prose-th:border prose-th:border-slate-200 dark:prose-th:border-slate-700",
1698
- "prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-slate-200 dark:prose-td:border-slate-700"
1699
- ].join(" ");
1700
- return /* @__PURE__ */ jsxs(
1701
- "div",
1702
- {
1703
- ref: containerRef,
1704
- className: className ? `${proseClasses} ${className}` : proseClasses,
1705
- children: [
1706
- /* @__PURE__ */ jsx(FrontmatterDisplay, { frontmatter }),
1707
- /* @__PURE__ */ jsx(
1708
- ReactMarkdown,
1709
- {
1710
- remarkPlugins,
1711
- rehypePlugins,
1712
- urlTransform: transformImageUri,
1713
- components: markdownComponents,
1714
- children: body
1715
- }
1716
- )
1717
- ]
1718
- }
1719
- );
1834
+ //#endregion
1835
+ //#region src/MarkdownViewer.tsx
1836
+ /**
1837
+ * React markdown viewer component.
1838
+ *
1839
+ * Renders markdown with the full Vantage pipeline: GFM, math, syntax
1840
+ * highlighting, mermaid diagrams, line anchors, and frontmatter display.
1841
+ *
1842
+ * This is a standalone component with no dependency on Vantage's stores,
1843
+ * router, or review system.
1844
+ */
1845
+ const MarkdownViewerInner = ({ content, currentPath = "", hash = "", baseUrl = "/", imageApiBase, className, onNavigate }) => {
1846
+ const containerRef = useRef(null);
1847
+ useLineAnchor(containerRef, hash);
1848
+ const { frontmatter, body, bodyLineOffset } = useMemo(() => {
1849
+ return parseFrontmatter(content);
1850
+ }, [content]);
1851
+ const { remarkPlugins, rehypePlugins } = useMemo(() => buildPipeline({ bodyLineOffset }), [bodyLineOffset]);
1852
+ const handleLinkClick = useCallback((e, href) => {
1853
+ if (href.startsWith("#")) {
1854
+ e.preventDefault();
1855
+ const id = href.slice(1);
1856
+ const el = document.getElementById(id);
1857
+ if (el) {
1858
+ const scrollContainer = el.closest("[data-content-scroll]") || el.closest(".overflow-y-auto");
1859
+ if (scrollContainer) {
1860
+ const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
1861
+ scrollContainer.scrollTo({ top: offset - 16 });
1862
+ } else el.scrollIntoView();
1863
+ }
1864
+ return;
1865
+ }
1866
+ if (href.startsWith("http") || href.startsWith("mailto:")) return;
1867
+ if (onNavigate) {
1868
+ if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
1869
+ e.preventDefault();
1870
+ const [pathPart, hashPart] = href.split("#");
1871
+ const parts = currentPath.split("/");
1872
+ parts.pop();
1873
+ const dir = parts.join("/");
1874
+ const cleanHref = pathPart.replace(/^\.\//, "");
1875
+ onNavigate((dir ? `${dir}/${cleanHref}` : cleanHref) + (hashPart ? `#${hashPart}` : ""));
1876
+ }
1877
+ }, [currentPath, onNavigate]);
1878
+ const resolveHref = useCallback((href) => {
1879
+ if (!href) return "";
1880
+ if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.startsWith("/")) return href;
1881
+ const [pathPart, hashPart] = href.split("#");
1882
+ const parts = currentPath.split("/");
1883
+ parts.pop();
1884
+ const dir = parts.join("/");
1885
+ const cleanHref = pathPart.replace(/^\.\//, "");
1886
+ return `${baseUrl}${dir ? `${dir}/${cleanHref}` : cleanHref}${hashPart ? `#${hashPart}` : ""}`;
1887
+ }, [currentPath, baseUrl]);
1888
+ const transformImageUri = useCallback((uri, key) => {
1889
+ if (key === "href") return uri;
1890
+ if (uri.startsWith("http") || uri.startsWith("data:")) return uri;
1891
+ const parts = currentPath.split("/");
1892
+ parts.pop();
1893
+ const dir = parts.join("/");
1894
+ const resolvedPath = dir ? `${dir}/${uri}` : uri;
1895
+ if (imageApiBase) return `${imageApiBase}/content?path=${encodeURIComponent(resolvedPath)}`;
1896
+ return `${baseUrl}${resolvedPath}`;
1897
+ }, [
1898
+ currentPath,
1899
+ baseUrl,
1900
+ imageApiBase
1901
+ ]);
1902
+ const markdownComponents = useMemo(() => ({
1903
+ a({ href, children, ...props }) {
1904
+ const resolvedHref = resolveHref(href);
1905
+ return /* @__PURE__ */ jsx("a", {
1906
+ href: resolvedHref,
1907
+ onClick: (e) => href && handleLinkClick(e, href),
1908
+ ...props,
1909
+ children
1910
+ });
1911
+ },
1912
+ code(props) {
1913
+ const { children, className: codeClassName, ...rest } = props;
1914
+ const match = /language-(\w+)/.exec(codeClassName || "");
1915
+ if (match && match[1] === "mermaid") return /* @__PURE__ */ jsx(MermaidDiagram, { code: String(children).replace(/\n$/, "") });
1916
+ return /* @__PURE__ */ jsx("code", {
1917
+ className: codeClassName,
1918
+ ...rest,
1919
+ children
1920
+ });
1921
+ }
1922
+ }), [handleLinkClick, resolveHref]);
1923
+ const proseClasses = [
1924
+ "prose prose-slate dark:prose-invert max-w-none",
1925
+ "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-slate-100",
1926
+ "prose-h1:text-[2em] prose-h1:mb-3 prose-h1:pb-[0.3em] prose-h1:border-b prose-h1:border-slate-200 dark:prose-h1:border-slate-700",
1927
+ "prose-h2:text-[1.5em] prose-h2:mt-6 prose-h2:mb-3 prose-h2:pb-[0.3em] prose-h2:border-b prose-h2:border-slate-200 dark:prose-h2:border-slate-700",
1928
+ "prose-h3:text-[1.25em] prose-h3:mt-6 prose-h3:mb-2",
1929
+ "prose-h4:text-[1em] prose-h4:mt-6 prose-h4:mb-2",
1930
+ "prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-[1.5] prose-p:my-[16px]",
1931
+ "prose-ul:my-[16px] prose-ul:list-disc prose-li:my-0.5 prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
1932
+ "prose-ol:my-[16px] prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
1933
+ "prose-pre:bg-slate-50 dark:prose-pre:bg-slate-800 prose-pre:border prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-pre:p-4 prose-pre:rounded-md prose-pre:text-[85%] prose-pre:leading-[1.45]",
1934
+ "prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
1935
+ "prose-img:rounded-lg prose-img:my-4",
1936
+ "prose-blockquote:border-l-[0.25em] prose-blockquote:border-slate-300 dark:prose-blockquote:border-slate-600 prose-blockquote:pl-4 prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400 prose-blockquote:italic",
1937
+ "prose-code:before:content-none prose-code:after:content-none",
1938
+ "prose-code:bg-slate-100 dark:prose-code:bg-slate-800 prose-code:px-[0.4em] prose-code:py-[0.2em] prose-code:rounded-md prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-code:font-mono prose-code:text-[85%] prose-code:font-normal prose-code:border prose-code:border-slate-200/50 dark:prose-code:border-slate-700/50",
1939
+ "prose-table:text-sm",
1940
+ "prose-th:px-3 prose-th:py-1.5 prose-th:border prose-th:border-slate-200 dark:prose-th:border-slate-700",
1941
+ "prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-slate-200 dark:prose-td:border-slate-700"
1942
+ ].join(" ");
1943
+ return /* @__PURE__ */ jsxs("div", {
1944
+ ref: containerRef,
1945
+ className: className ? `${proseClasses} ${className}` : proseClasses,
1946
+ children: [/* @__PURE__ */ jsx(FrontmatterDisplay, { frontmatter }), /* @__PURE__ */ jsx(ReactMarkdown, {
1947
+ remarkPlugins,
1948
+ rehypePlugins,
1949
+ urlTransform: transformImageUri,
1950
+ components: markdownComponents,
1951
+ children: body
1952
+ })]
1953
+ });
1720
1954
  };
1721
- var MarkdownViewer = memo(
1722
- MarkdownViewerInner,
1723
- (prevProps, nextProps) => prevProps.content === nextProps.content && prevProps.currentPath === nextProps.currentPath && prevProps.hash === nextProps.hash && prevProps.className === nextProps.className
1724
- );
1955
+ const MarkdownViewer = memo(MarkdownViewerInner, (prevProps, nextProps) => prevProps.content === nextProps.content && prevProps.currentPath === nextProps.currentPath && prevProps.hash === nextProps.hash && prevProps.className === nextProps.className);
1956
+ //#endregion
1957
+ //#region src/renderMarkdown.ts
1958
+ /**
1959
+ * Framework-agnostic markdown -> HTML rendering pipeline.
1960
+ * Uses the same remark/rehype chain as the Vantage viewer.
1961
+ */
1962
+ /**
1963
+ * Render a markdown string to HTML using the full Vantage pipeline.
1964
+ *
1965
+ * Features (all enabled by default):
1966
+ * - GitHub Flavored Markdown (tables, strikethrough, task lists)
1967
+ * - KaTeX math rendering, inline and block ($$...$$ only; single $ is not a delimiter)
1968
+ * - Syntax highlighting via highlight.js
1969
+ * - `data-source-line` attributes for line anchors
1970
+ * - XSS sanitization
1971
+ * - Heading slugs/anchors
1972
+ * - YAML/TOML frontmatter parsing
1973
+ *
1974
+ * Mermaid diagrams are NOT rendered server-side (they require a browser).
1975
+ * Mermaid code blocks are preserved as `<pre><code class="language-mermaid">`.
1976
+ * Use the React `<MarkdownViewer>` component for client-side mermaid rendering.
1977
+ */
1725
1978
  async function renderMarkdown(content, options = {}) {
1726
- const {
1727
- gfm = true,
1728
- math = true,
1729
- highlight = true,
1730
- sourceLines = true,
1731
- sanitize = true,
1732
- frontmatter: parseFm = true
1733
- } = options;
1734
- let parsed;
1735
- if (parseFm) {
1736
- parsed = parseFrontmatter(content);
1737
- } else {
1738
- parsed = {
1739
- frontmatter: {},
1740
- body: content,
1741
- format: "none",
1742
- bodyLineOffset: 0
1743
- };
1744
- }
1745
- const { remarkPlugins, rehypePlugins } = buildPipeline({
1746
- gfm,
1747
- math,
1748
- highlight,
1749
- sourceLines,
1750
- sanitize,
1751
- bodyLineOffset: parsed.bodyLineOffset
1752
- });
1753
- const processor = unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, { allowDangerousHtml: true }).use(rehypePlugins).use(rehypeStringify);
1754
- const result = await processor.process(parsed.body);
1755
- return {
1756
- html: String(result),
1757
- frontmatter: parsed.frontmatter,
1758
- body: parsed.body
1759
- };
1979
+ const { gfm = true, math = true, highlight = true, sourceLines = true, sanitize = true, frontmatter: parseFm = true } = options;
1980
+ let parsed;
1981
+ if (parseFm) parsed = parseFrontmatter(content);
1982
+ else parsed = {
1983
+ frontmatter: {},
1984
+ body: content,
1985
+ format: "none",
1986
+ bodyLineOffset: 0
1987
+ };
1988
+ const { remarkPlugins, rehypePlugins } = buildPipeline({
1989
+ gfm,
1990
+ math,
1991
+ highlight,
1992
+ sourceLines,
1993
+ sanitize,
1994
+ bodyLineOffset: parsed.bodyLineOffset
1995
+ });
1996
+ const result = await unified().use(remarkParse).use(remarkPlugins).use(remarkRehype, { allowDangerousHtml: true }).use(rehypePlugins).use(rehypeStringify).process(parsed.body);
1997
+ return {
1998
+ html: String(result),
1999
+ frontmatter: parsed.frontmatter,
2000
+ body: parsed.body
2001
+ };
1760
2002
  }
1761
-
1762
- // src/renderMermaidBlocks.ts
2003
+ //#endregion
2004
+ //#region src/renderMermaidBlocks.ts
2005
+ /**
2006
+ * Client-side utility to find and render mermaid code blocks in a container.
2007
+ *
2008
+ * After calling `renderMarkdown()`, mermaid blocks come through as
2009
+ * `<pre><code class="language-mermaid">...</code></pre>`. This function
2010
+ * finds those blocks and replaces them with rendered SVG diagrams.
2011
+ *
2012
+ * Framework-agnostic — works in any browser environment.
2013
+ */
2014
+ /**
2015
+ * Find all `<pre><code class="language-mermaid">` blocks in a container
2016
+ * and replace them with rendered SVG diagrams.
2017
+ *
2018
+ * @param container - DOM element containing rendered markdown HTML
2019
+ * @param options - Optional configuration
2020
+ * @returns Promise that resolves when all diagrams are rendered
2021
+ *
2022
+ * @example
2023
+ * ```ts
2024
+ * import { renderMarkdown, renderMermaidBlocks } from "vantage-md";
2025
+ *
2026
+ * const { html } = await renderMarkdown(content);
2027
+ * container.innerHTML = html;
2028
+ * await renderMermaidBlocks(container);
2029
+ * ```
2030
+ */
1763
2031
  async function renderMermaidBlocks(container, options = {}) {
1764
- const { className = "mermaid", onError } = options;
1765
- const codeBlocks = container.querySelectorAll(
1766
- 'pre > code.language-mermaid, pre > code[class*="language-mermaid"]'
1767
- );
1768
- if (codeBlocks.length === 0) return;
1769
- const mermaid = await getMermaid();
1770
- const renderPromises = Array.from(codeBlocks).map(async (codeEl) => {
1771
- const preEl = codeEl.parentElement;
1772
- if (!preEl) return;
1773
- const code = codeEl.textContent || "";
1774
- if (!code.trim()) return;
1775
- const cached = svgCache.get(code);
1776
- if (cached) {
1777
- replaceWithSvg(preEl, cached, className);
1778
- return;
1779
- }
1780
- try {
1781
- let hash = 0;
1782
- for (let i = 0; i < code.length; i++) {
1783
- hash = (hash << 5) - hash + code.charCodeAt(i);
1784
- hash = hash & hash;
1785
- }
1786
- const id = `mermaid-${Math.abs(hash).toString(36)}-${Date.now()}`;
1787
- const { svg } = await mermaid.render(id, code);
1788
- svgCache.set(code, svg);
1789
- replaceWithSvg(preEl, svg, className);
1790
- } catch (err) {
1791
- if (onError) {
1792
- onError(code, err instanceof Error ? err : new Error(String(err)));
1793
- }
1794
- }
1795
- });
1796
- await Promise.all(renderPromises);
2032
+ const { className = "mermaid", onError } = options;
2033
+ const codeBlocks = container.querySelectorAll("pre > code.language-mermaid, pre > code[class*=\"language-mermaid\"]");
2034
+ if (codeBlocks.length === 0) return;
2035
+ const mermaid = await getMermaid();
2036
+ const renderPromises = Array.from(codeBlocks).map(async (codeEl) => {
2037
+ const preEl = codeEl.parentElement;
2038
+ if (!preEl) return;
2039
+ const code = codeEl.textContent || "";
2040
+ if (!code.trim()) return;
2041
+ const cached = svgCache.get(code);
2042
+ if (cached) {
2043
+ replaceWithSvg(preEl, cached, className);
2044
+ return;
2045
+ }
2046
+ try {
2047
+ let hash = 0;
2048
+ for (let i = 0; i < code.length; i++) {
2049
+ hash = (hash << 5) - hash + code.charCodeAt(i);
2050
+ hash = hash & hash;
2051
+ }
2052
+ const id = `mermaid-${Math.abs(hash).toString(36)}-${Date.now()}`;
2053
+ const { svg } = await mermaid.render(id, code);
2054
+ svgCache.set(code, svg);
2055
+ replaceWithSvg(preEl, svg, className);
2056
+ } catch (err) {
2057
+ if (onError) onError(code, err instanceof Error ? err : new Error(String(err)));
2058
+ }
2059
+ });
2060
+ await Promise.all(renderPromises);
1797
2061
  }
1798
2062
  function replaceWithSvg(preEl, svg, className) {
1799
- const wrapper = document.createElement("div");
1800
- wrapper.className = className;
1801
- wrapper.innerHTML = svg;
1802
- preEl.replaceWith(wrapper);
2063
+ const wrapper = document.createElement("div");
2064
+ wrapper.className = className;
2065
+ wrapper.innerHTML = svg;
2066
+ preEl.replaceWith(wrapper);
1803
2067
  }
1804
-
1805
- // src/resolveLinks.ts
2068
+ //#endregion
2069
+ //#region src/resolveLinks.ts
2070
+ /**
2071
+ * Rewrite relative links in rendered HTML.
2072
+ *
2073
+ * Processes all `href="..."` attributes, skipping:
2074
+ * - Absolute URLs (http://, https://, mailto:, etc.)
2075
+ * - Anchor-only links (#section)
2076
+ * - Already-absolute paths (/path/to/file)
2077
+ *
2078
+ * @example
2079
+ * ```ts
2080
+ * import { renderMarkdown, resolveLinks } from "vantage-md";
2081
+ *
2082
+ * const { html } = await renderMarkdown(content);
2083
+ *
2084
+ * // Simple: prepend a base path
2085
+ * const resolved = resolveLinks(html, { basePath: "/docs/", currentPath: "guides/setup.md" });
2086
+ *
2087
+ * // Custom: full control over link rewriting
2088
+ * const resolved = resolveLinks(html, {
2089
+ * currentPath: "guides/setup.md",
2090
+ * rewriter: (href, currentPath) => `/kb/${currentPath}/../${href}`,
2091
+ * });
2092
+ * ```
2093
+ */
1806
2094
  function resolveLinks(html, options = {}) {
1807
- const { basePath = "/", rewriter, currentPath = "" } = options;
1808
- const parts = currentPath.split("/");
1809
- parts.pop();
1810
- const currentDir = parts.join("/");
1811
- return html.replace(
1812
- /href="([^"]*?)"/g,
1813
- (_match, href) => {
1814
- if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("data:") || href.startsWith("#") || href.startsWith("/")) {
1815
- return `href="${href}"`;
1816
- }
1817
- if (rewriter) {
1818
- const result = rewriter(href, currentPath);
1819
- if (result !== null) {
1820
- return `href="${result}"`;
1821
- }
1822
- return `href="${href}"`;
1823
- }
1824
- const [pathPart, hashPart] = href.split("#");
1825
- const cleanHref = pathPart.replace(/^\.\//, "");
1826
- const resolvedPath = currentDir ? `${currentDir}/${cleanHref}` : cleanHref;
1827
- const base = basePath.endsWith("/") ? basePath : `${basePath}/`;
1828
- const finalHref = `${base}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`;
1829
- return `href="${finalHref}"`;
1830
- }
1831
- );
2095
+ const { basePath = "/", rewriter, currentPath = "" } = options;
2096
+ const parts = currentPath.split("/");
2097
+ parts.pop();
2098
+ const currentDir = parts.join("/");
2099
+ return html.replace(/href="([^"]*?)"/g, (_match, href) => {
2100
+ if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("data:") || href.startsWith("#") || href.startsWith("/")) return `href="${href}"`;
2101
+ if (rewriter) {
2102
+ const result = rewriter(href, currentPath);
2103
+ if (result !== null) return `href="${result}"`;
2104
+ return `href="${href}"`;
2105
+ }
2106
+ const [pathPart, hashPart] = href.split("#");
2107
+ const cleanHref = pathPart.replace(/^\.\//, "");
2108
+ const resolvedPath = currentDir ? `${currentDir}/${cleanHref}` : cleanHref;
2109
+ return `href="${`${basePath.endsWith("/") ? basePath : `${basePath}/`}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`}"`;
2110
+ });
1832
2111
  }
2112
+ //#endregion
2113
+ export { DOC_STATUSES, DOC_STATUS_TONES, DocumentStatusChip, FrontmatterDisplay, MarkdownViewer, MermaidDiagram, VANTAGE_FRONTMATTER_KEYS, buildPipeline, buildRemarkPlugins, clearLineAnchorHighlights, isDocStatus, parseFrontmatter, parseLineAnchor, readVantageFrontmatter, rehypeSourceLines, renderMarkdown, renderMermaidBlocks, resolveLinks, sanitizeSchema, scrollToLineAnchor, useLineAnchor };
1833
2114
 
1834
- export { DOC_STATUSES, DOC_STATUS_TONES, DocumentStatusChip, FrontmatterDisplay, MarkdownViewer, MermaidDiagram, VANTAGE_FRONTMATTER_KEYS, buildPipeline, buildRemarkPlugins, clearLineAnchorHighlights, isDocStatus, parseFrontmatter, parseLineAnchor, readVantageFrontmatter, rehypeSourceLines_default as rehypeSourceLines, renderMarkdown, renderMermaidBlocks, resolveLinks, sanitizeSchema, scrollToLineAnchor, useLineAnchor };
1835
- //# sourceMappingURL=react.js.map
1836
2115
  //# sourceMappingURL=react.js.map