vantage-md 0.7.0 → 0.8.0

package/dist/inline-svg.css

@@ -0,0 +1,55 @@
+/* vantage-md/styles/inline-svg.css
+ *
+ * Sizing for an `<svg>` a document writes inline (see "Inline SVG" in
+ * `docs/reference/inline-markup.md`). Without it a `width="2400"` drawing
+ * overflows the column instead of shrinking to it.
+ *
+ * It lives in the package, not the app, so that every renderer sizes a drawing
+ * the same way (D5): the app imports this file by relative source path, and
+ * `styles/index.css` re-exports it for the package's own <MarkdownViewer> and
+ * any other consumer of `vantage-md/styles`. It targets both container classes,
+ * Tailwind typography's `.prose` (the app, and the package viewer) and
+ * `.vantage-prose` (the package's `prose.css`), for the reason `task-list.css`
+ * gives.
+ *
+ * **Unlike its siblings this file IS layered, in `components`, and that is the
+ * point.** The rules reach every `svg` inside prose, including the icons a
+ * viewer draws there itself. A layered rule loses to every utility (Tailwind v4
+ * puts them in the later `utilities` layer) and to any unlayered rule a
+ * consumer writes. Unlayered, this would outrank all of them regardless of
+ * specificity.
+ *
+ * **It loses only on the properties the icon sets, though.** An icon's size
+ * utilities keep its size, and nothing keeps its display: the rule for an svg
+ * in a sentence made the Mermaid toolbar icons `inline-block` for a diagram in
+ * a list item, and their buttons grew. So an icon drawn inside prose states its
+ * display (`block`, in `MermaidDiagram.tsx`), and `inline_svg.spec.ts` deletes
+ * every rule in this file and requires that no icon or button moves.
+ */
+
+@layer components {
+  :is(.prose, .vantage-prose) svg {
+    max-width: 100%;
+  }
+
+  /* Only a drawing with a viewBox scales to its box, so only there may the
+     height follow the capped width. Without one, `height: auto` shrank the
+     viewport and left the drawing at full size inside it: a 1600x100 drawing
+     in a 928px column measured 58px tall, with everything below cut off. */
+  :is(.prose, .vantage-prose) svg[viewBox] {
+    height: auto;
+  }
+
+  /* An svg written inside a sentence stays in it. Tailwind's preflight makes
+     every svg `display: block`, which put a 16px icon on a line of its own and
+     split its paragraph into three. Only inside the blocks that hold phrasing
+     content, so a drawing in a `<div>` of its own is still a block — and so
+     is an icon in a `<div>` with text around it, which this cannot tell from
+     a drawing. `caption` is not listed because the sanitizer drops it. */
+  :is(.prose, .vantage-prose)
+    :where(p, li, td, th, h1, h2, h3, h4, h5, h6, summary, dt, dd, figcaption)
+    svg {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}

package/dist/line-anchor.css

@@ -0,0 +1,22 @@
+/* ──────────────────────────────────────────
+   Line anchor highlights (#L42, #L42-L50)
+   ────────────────────────────────────────── */
+.line-anchor-highlight {
+  background: rgb(59 130 246 / 0.08);
+  border-left: 3px solid rgb(59 130 246 / 0.5);
+  padding-left: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+  scroll-margin-top: 32px;
+}
+.line-anchor-highlight:hover {
+  background: rgb(59 130 246 / 0.12);
+}
+.dark .line-anchor-highlight {
+  background: rgb(59 130 246 / 0.1);
+  border-left-color: rgb(96 165 250 / 0.5);
+}
+.dark .line-anchor-highlight:hover {
+  background: rgb(59 130 246 / 0.16);
+}