@troshab/slidev-theme-troshab 0.1.12 → 0.1.14

package/CLAUDE.md

@@ -181,6 +181,7 @@ Theme automatically applies matching colors via `setup/mermaid.ts` (reads CSS va
 2. **Limit nodes** — max 6-8 for flowcharts
 3. **No titles in xychart** — causes overflow
 4. **Use abbreviations** — `LB` not `Load Balancer`
+5. **Labels render as SVG `<text>`** — `setup/mermaid.ts` sets `htmlLabels: false`, fixing the foreignObject width=0 off-centre bug in Slidev's shadow-DOM render. Single- and multi-line node labels both centre correctly (`<br/>` for line breaks). No special handling needed.
 
 ### Limits by type
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troshab/slidev-theme-troshab",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "A minimal, universal Slidev theme with flexible layouts and ready-to-use slide templates",
   "author": "troshab",
   "license": "PolyForm-Noncommercial-1.0.0",

package/setup/mermaid.ts

@@ -60,6 +60,18 @@ export default defineMermaidSetup(() => {
   return {
     theme: 'base',
     darkMode: isDark,
+
+    // Labels as native SVG <text> (centred via text-anchor) instead of
+    // htmlLabels (<p> in <foreignObject>). Slidev renders Mermaid into a SHADOW
+    // DOM where the foreignObject label is measured as width=0, and
+    // MermaidChart.vue's unlockSvg sets overflow:visible — so the text spilled
+    // out of the zero-width box ~15px right of centre. SVG <text> centres
+    // geometrically and is immune to that. Must be TOP-LEVEL (per-diagram
+    // `flowchart.htmlLabels` is deprecated/ignored). Single- AND multi-line
+    // labels both centre correctly (verified: offset 0px, symmetric gaps on
+    // each line) — the old mermaid#1177 tspan left-align no longer reproduces.
+    htmlLabels: false,
+
     themeVariables: {
       // Background
       background: colors.bg,

package/setup/preparser.ts

@@ -0,0 +1,71 @@
+/**
+ * Render markdown inside block-level theme components.
+ *
+ * markdown-it (and MDC) treat text flush against a custom block tag
+ * (<Callout>, <Card>, <StyledList>, ...) as a raw HTML block, so inline
+ * markdown inside it (**bold**, `code`, [links]) is NOT parsed. CommonMark
+ * needs a blank line after the opening tag and before the closing tag for the
+ * inner content to be parsed as markdown.
+ *
+ * This normalizes ANY PascalCase component used as a block (tag alone on its
+ * own line). Inline usage (<UPN>x</UPN> inside a sentence) is left untouched,
+ * and fenced code regions are skipped so component examples in code blocks are
+ * not rewritten.
+ *
+ * LOADING: Slidev loads preparser setups from the project and from ADDONS only,
+ * never from a theme root. So a deck must list this theme as an addon to pick
+ * this up:
+ *
+ *   ---
+ *   theme: "@troshab/slidev-theme-troshab"
+ *   addons: ["@troshab/slidev-theme-troshab"]
+ *   ---
+ *
+ * (The deck-scaffolding skill emits both lines.) Until a deck does that, an
+ * identical copy can live in the deck's own setup/preparser.ts.
+ *
+ * definePreparserSetup is an identity helper; we export the raw function to
+ * avoid importing @slidev/types (which jiti's CJS interop can choke on at the
+ * preparser stage).
+ */
+
+const OPEN_ALONE = /^\s*<[A-Z][A-Za-z0-9]*\b[^>]*?>\s*$/
+const CLOSE_ALONE = /^\s*<\/[A-Z][A-Za-z0-9]*>\s*$/
+const SELF_CLOSE = /\/>\s*$/
+const FENCE = /^\s*(```|~~~)/
+
+export default () => [
+  {
+    name: 'troshab:md-in-components',
+    transformRawLines(lines: string[]) {
+      // Mark fenced code regions so we never rewrite inside them.
+      const inCode: boolean[] = new Array(lines.length).fill(false)
+      let fence = false
+      for (let i = 0; i < lines.length; i++) {
+        if (FENCE.test(lines[i])) {
+          inCode[i] = true // the fence line itself
+          fence = !fence
+          continue
+        }
+        inCode[i] = fence
+      }
+
+      // Insert blank lines bottom-up so splices don't shift unprocessed indices.
+      for (let i = lines.length - 1; i >= 0; i--) {
+        if (inCode[i]) continue
+        const line = lines[i]
+
+        if (CLOSE_ALONE.test(line)) {
+          if (i > 0 && lines[i - 1].trim() !== '') lines.splice(i, 0, '')
+          continue
+        }
+
+        if (OPEN_ALONE.test(line) && !SELF_CLOSE.test(line)) {
+          if (i + 1 < lines.length && lines[i + 1].trim() !== '') {
+            lines.splice(i + 1, 0, '')
+          }
+        }
+      }
+    },
+  },
+]