@troshab/slidev-theme-troshab 0.1.7 → 0.1.12

package/CLAUDE.md

@@ -535,3 +535,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/Metric.vue

@@ -123,7 +123,10 @@ const sizeClasses: Record<string, string> = {
 
 .metric-value {
   font-weight: var(--font-weight-bold);
-  line-height: 1.1;
+  /* IBM Plex Sans glyph box ~1.275 + tabular-nums + bold add ~5% — at h1*1.5 (lg)
+     and gradient text (background-clip: text), browser computes scrollH 5-7% above
+     line-height. 1.4 absorbs the rounding without visible spacing change. */
+  line-height: 1.4;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
   overflow: hidden;

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/components/StyledList.vue

@@ -16,7 +16,7 @@ import type { SemanticColor } from '../composables/useColors'
 import { semanticColorVar } from '../composables/useColors'
 
 const props = withDefaults(defineProps<{
-  marker?: 'disc' | 'number' | 'check' | 'arrow' | 'star' | 'none'
+  marker?: 'disc' | 'number' | 'check' | 'cross' | 'arrow' | 'star' | 'none'
   color?: SemanticColor
   size?: 'sm' | 'md' | 'lg'
   columns?: 1 | 2
@@ -81,6 +81,15 @@ const props = withDefaults(defineProps<{
   font-weight: var(--font-weight-bold);
 }
 
+/* Marker: cross (pairs with check — semantic "mistake/don't/anti-pattern") */
+.styled-list-cross li::before {
+  content: '\2717';
+  position: absolute;
+  left: 0;
+  color: var(--marker-color);
+  font-weight: var(--font-weight-bold);
+}
+
 /* Marker: arrow */
 .styled-list-arrow li::before {
   content: '\2192';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troshab/slidev-theme-troshab",
-  "version": "0.1.7",
+  "version": "0.1.12",
   "description": "A minimal, universal Slidev theme with flexible layouts and ready-to-use slide templates",
   "author": "troshab",
   "license": "PolyForm-Noncommercial-1.0.0",
@@ -39,6 +39,14 @@
     "slidev-addon-fancy-arrow": "^0.16.0",
     "slidev-addon-preload-images": "^0.2.0"
   },
+  "peerDependencies": {
+    "shiki": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "npx concurrently -n dark,light -c magenta,cyan \"slidev example_dark.md --port 30303\" \"slidev example_white.md --port 31313\"",
     "dev:dark": "slidev example_dark.md --port 30303",

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
    ============================================ */