@troshab/slidev-theme-troshab 0.1.8 → 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
 
@@ -535,3 +536,21 @@ Phosphor Icons via Iconify (`@iconify-json/ph`). Use via `<Icon>` component:
 ```
 
 Weight suffixes: (none) = regular, `-bold`, `-fill`, `-duotone`, `-thin`, `-light`.
+
+
+## Related Projects (Cyber Academy)
+
+This project is part of the Cyber Academy content factory. See `~/cyber-academy/README.md` for the full map.
+
+| Path | Role |
+|------|------|
+| `~/colo_cyberrange` | LMS platform (delivery) |
+| `~/soc-tier-2` | SOC Tier 1+2 program (course-gen DB pipeline) |
+| `~/was26` | Web App Security 2026 (Slidev course) |
+| `~/ll26` | Binary Exploitation 2026 (Slidev course, planned) |
+| `~/avis26` | NaUKMA F5 bachelor program (curriculum admin) |
+| `~/slidev-theme-troshab` | Slidev theme used by all course presentations |
+
+Authoring tools: `~/.claude/plugins/marketplaces/troshab-own-claude-code` (skills `course-*`, `slidev-*`, `ukrainize-text`).
+
+Cross-project navigation: `/troshab-own:cyber-academy` slash command.

package/components/Stepper.vue

@@ -240,7 +240,7 @@ function isUpcoming(index: number) {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 0.25rem;
+  padding: 0.25rem 0.25rem 0;
 }
 
 /* ===== Track ===== */
@@ -267,12 +267,12 @@ function isUpcoming(index: number) {
 .stepper-step {
   display: flex;
   align-items: center;
-  /* Reserve horizontal space for .stepper-marker's transform: scale(1.15) on
-   * active state. Scaled marker's visible box extends ~6px past its layout
-   * box; without padding, step.scrollWidth exceeds clientWidth by 1-3px on
-   * short labels. Per CSS spec, transformed descendants count toward parent
-   * scrollable overflow. */
-  padding: 0 var(--transform-scale-comp);
+  /* Reserve horizontal AND vertical space for .stepper-marker's transform:
+   * scale(1.15) on active state. Scaled marker's visible box extends ~6px past
+   * its layout box; without padding, step.scrollWidth/scrollHeight exceeds
+   * clientWidth/clientHeight by 1-5px. Per CSS spec, transformed descendants
+   * count toward parent scrollable overflow. */
+  padding: var(--transform-scale-comp);
 }
 
 .stepper-horizontal .stepper-step {
@@ -459,7 +459,7 @@ function isUpcoming(index: number) {
 .stepper-arrow-char {
   color: var(--color-text-tertiary);
   font-size: 2rem;
-  line-height: 1;
+  line-height: 1.25;
 }
 
 .stepper-connector.is-completed .stepper-arrow-char {
@@ -479,10 +479,15 @@ function isUpcoming(index: number) {
 }
 
 .stepper-vertical.stepper-arrows .stepper-connector {
+  width: auto;
+  min-width: 2rem;
+  min-height: 2.5rem;
   background: none;
   display: flex;
   align-items: center;
-  margin-left: calc(var(--stepper-marker-size) / 2 - 0.5rem);
+  justify-content: center;
+  margin-left: calc(var(--stepper-marker-size) / 2 - 1rem);
+  line-height: 1;
 }
 
 .stepper-vertical .stepper-connector.is-completed {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troshab/slidev-theme-troshab",
-  "version": "0.1.8",
+  "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, '')
+          }
+        }
+      }
+    },
+  },
+]

package/setup/vite-plugins.ts

@@ -0,0 +1,27 @@
+/**
+ * slidev-theme-troshab — Vite Plugins Setup
+ *
+ * Fix: `lz-string` 1.5.0 is CJS-only (no `exports`/`module` fields).
+ * `@slidev/client/modules/mermaid.ts` does `import lz from 'lz-string'`
+ * which fails at runtime unless Vite pre-bundles the dep through esbuild
+ * (which fabricates a `default` export). Forcing `optimizeDeps.include`
+ * makes the pre-bundle deterministic across modules and CI environments.
+ *
+ * NOTE: this file runs through jiti BEFORE Vite starts, so it must avoid
+ * importing from ESM-only packages like `@slidev/types` (jiti's CJS interop
+ * crashes on them). `defineVitePluginsSetup` is just an identity helper
+ * for type inference; we drop it and export the raw setup function.
+ */
+
+export default () => [
+  {
+    name: 'troshab:dep-optimization',
+    config() {
+      return {
+        optimizeDeps: {
+          include: ['lz-string'],
+        },
+      }
+    },
+  },
+]

package/styles/base.css

@@ -11,12 +11,8 @@
 /* Import color system */
 @import './colors.css';
 
-/* ============================================
-   1. @font-face — IBM Plex via @fontsource
-   Provides proper unicode-range subsetting
-   (latin, cyrillic, cyrillic-ext, etc.)
-   ============================================ */
-
+/* @font-face via @fontsource — must come BEFORE any other CSS rules per
+ * CSS spec (all @import / @charset / @layer at top of file). */
 @import '@fontsource/ibm-plex-sans/400.css';
 @import '@fontsource/ibm-plex-sans/500.css';
 @import '@fontsource/ibm-plex-sans/600.css';
@@ -24,6 +20,15 @@
 @import '@fontsource/ibm-plex-mono/400.css';
 @import '@fontsource/ibm-plex-mono/500.css';
 
+/* Slidev fix: #slidev-goto-dialog уse `-top-20` (-5rem) для closed state, але
+ * з 100+ слайдів список autocomplete стає вищим за 5rem і видно нижню
+ * частину з-під верху екрану. Перекриваємо: коли dialog має `-top-20` клас,
+ * примусово ховаємо через translateY(-100%). */
+#slidev-goto-dialog.\-top-20 {
+  transform: translateY(-100%);
+  pointer-events: none;
+}
+
 /* ============================================
    2. CSS Custom Properties (Typography & Layout)
    Note: Colors are defined in colors.css
@@ -56,7 +61,7 @@
      Chung (2004, Vision Research): optimal 1.25-1.5 for body.
      Bringhurst "Elements of Typographic Style": headings 1.1-1.25, body 1.3-1.5.
      Kolers et al. (1981): reading speed U-curve — extremes reduce speed. */
-  --line-height-heading: 1.3;     /* IBM Plex Sans glyph box (1.275) + safety margin */
+  --line-height-heading: 1.4;     /* IBM Plex Sans + Cyrillic descender (у, р, ф, ц, щ) need extra room - 1.3 caused 1-8px h1 overflow */
   --line-height-body: 1.4;        /* Chung mid — comfortable for slides */
   --line-height-reading: 1.5;     /* Chung upper — BDA recommended for paragraphs */
   --line-height-list: 1.4;        /* matches body for consistency */
@@ -159,7 +164,7 @@
   letter-spacing: var(--letter-spacing-body);
   word-spacing: var(--word-spacing-body);
   color: var(--color-text);
-  padding: var(--safe-inset-y) var(--safe-inset-x);
+  padding: var(--safe-inset-y) var(--safe-inset-x) calc(var(--safe-inset-y) - 16px);
   height: 100%;
   width: 100%;
 }
@@ -182,6 +187,7 @@
   line-height: 1.45;
 }
 
+
 /* --- Headings --- */
 .slidev-layout h1,
 .slidev-layout h2,
@@ -763,6 +769,19 @@
   padding-bottom: 1%;
 }
 
+/* Split + footer: explicit grid rows so panels share remaining height with
+ * footer (auto). Without this, panel height defaults stretch and footer adds
+ * a 3rd auto-row, causing total > viewport (~80-200px overflow). */
+.slide-split:has(.slide-footer) {
+  grid-template-rows: 1fr auto;
+}
+.slide-split:has(.slide-footer) .slide-panel {
+  min-height: 0;
+}
+.slide-split:has(.slide-footer) .slide-panel-content {
+  overflow: hidden;
+}
+
 /* ============================================
    8. Component Styles
    ============================================ */