@miragon/slidev-toolkit 1.0.0 → 1.2.0

package/global/ChapterFooter.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * ChapterFooter — dezenter Footer: Kapitel + Fortschritt, optional Datum links
+ * (globales Chrome).
+ *
+ * Implementierung, die vom globalen Layer `global-bottom.vue` (Theme-Root) auf
+ * jeder Slide gerendert wird. Liegt bewusst in `global/` (nicht `components/`):
+ * `components/` sind autoren-aufrufbare Tags, dies ist Chrome, das Slidev
+ * automatisch injiziert.
+ *
+ * Zeigt ein kleines Label unten links, z. B.:
+ *   "21 July 2026 · 01 · Welcome · 2 / 5"
+ *
+ * Kapitel-Erkennung (identisch zur Agenda.vue): jede `layout: section`-Slide
+ * öffnet ein Kapitel; die Slides bis zur nächsten section gehören dazu. Die
+ * Position zählt nur Content-Slides — die section-Slide selbst ist Position 0,
+ * sodass die erste Content-Slide "1 / N" statt "2 / N" liest.
+ *
+ * Regeln:
+ *   - Rein visuelles Overlay: transparenter Hintergrund, `pointer-events: none`,
+ *     verdeckt niemals Slide-Inhalt (malt nur das kleine Text-Label).
+ *   - Ausgeblendet auf cover/closing/section und überall, wo (noch) kein
+ *     Kapitel aktiv ist (Cover, Agenda vor der ersten section).
+ *   - Aktuelles Layout MUSS über useNav() gelesen werden — `$frontmatter` aus
+ *     useSlideContext() ist in globalen Komponenten NICHT reaktiv.
+ */
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const { currentPage, total, slides } = useNav()
+
+// Markdown-Bold (** **) überlebt in den auto-extrahierten Titel; entfernen.
+function clean(s?: string): string {
+  return (s ?? '').replace(/\*\*/g, '').trim()
+}
+
+interface Chapter {
+  no: number // 1-basierte Seitennummer der section-Slide
+  index: string // Kapitelnummer (aus frontmatter `index`, sonst Ordinalzahl)
+  title: string // Kapiteltitel (h1 der section-Slide)
+}
+
+// Deck einmal durchlaufen: jede section-Slide startet ein Kapitel.
+const chapters = computed<Chapter[]>(() => {
+  const out: Chapter[] = []
+  for (const route of slides.value as any[]) {
+    const fm = route.meta?.slide?.frontmatter ?? {}
+    if (fm.layout === 'section') {
+      const n = out.length + 1
+      out.push({
+        no: route.no,
+        index: clean(fm.index) || String(n).padStart(2, '0'),
+        title:
+          clean(route.meta?.slide?.title) || clean(fm.eyebrow) || `Chapter ${n}`,
+      })
+    }
+  }
+  return out
+})
+
+// Das Kapitel, in dem die aktuelle Slide liegt (mit Startseite der nächsten
+// section als obere Grenze; für das letzte Kapitel ist die Grenze total + 1).
+const current = computed(() => {
+  const chs = chapters.value
+  const page = currentPage.value
+  for (let i = 0; i < chs.length; i++) {
+    const next = i < chs.length - 1 ? chs[i + 1].no : total.value + 1
+    if (page >= chs[i].no && page < next) {
+      return { ...chs[i], next }
+    }
+  }
+  return null
+})
+
+// "position / total" innerhalb des Kapitels; section-Slide selbst zählt nicht.
+const chapterProgress = computed(() => {
+  const c = current.value
+  if (!c) return ''
+  const position = currentPage.value - c.no
+  const totalInChapter = c.next - 1 - c.no
+  if (position < 1 || totalInChapter < 1) return ''
+  return `${position} / ${totalInChapter}`
+})
+
+// Optionales Datum: Feld `eventDate` im Deck-Headmatter (erster Frontmatter-
+// Block = Frontmatter der ersten Slide). Fehlt es, bleibt das Segment leer.
+const dateLabel = computed(() => {
+  const raw = (slides.value?.[0] as any)?.meta?.slide?.frontmatter?.eventDate
+  if (!raw) return ''
+  const d = new Date(raw)
+  if (isNaN(d.getTime())) return ''
+  return new Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(d)
+})
+
+// Segmente in gewünschter Reihenfolge zusammensetzen: Datum · NN · Titel · n/N.
+const footerText = computed(() => {
+  const c = current.value
+  if (!c) return ''
+  const parts: string[] = []
+  if (dateLabel.value) parts.push(dateLabel.value)
+  if (c.index) parts.push(c.index)
+  if (c.title) parts.push(c.title)
+  if (chapterProgress.value) parts.push(chapterProgress.value)
+  return parts.join(' · ')
+})
+
+// Auf den Voll-Bild-Slides ausblenden (gleiche Menge wie ProgressBar.vue).
+const HIDDEN_LAYOUTS = ['cover', 'closing', 'section']
+const isHidden = computed(() => {
+  const layout = (slides.value?.[currentPage.value - 1] as any)?.meta?.slide
+    ?.frontmatter?.layout
+  return HIDDEN_LAYOUTS.includes(layout)
+})
+</script>
+
+<template>
+  <div v-if="!isHidden && footerText" class="miragon-footer" aria-hidden="true">
+    <span class="miragon-footer-text">{{ footerText }}</span>
+  </div>
+</template>
+
+<style scoped>
+.miragon-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  padding: 0 2rem 0.75rem;
+  background: transparent;
+  pointer-events: none;
+}
+.miragon-footer-text {
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--miragon-text-muted);
+}
+</style>

package/global/ProgressBar.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * ProgressBar — dünne Fortschritts-Stepper-Bar (globales Chrome).
+ *
+ * Implementierung, die vom globalen Layer `global-top.vue` (Theme-Root) auf
+ * jeder Slide gerendert wird. Liegt bewusst in `global/` (nicht `components/`):
+ * `components/` sind autoren-aufrufbare Tags (<Card> …), dies ist Chrome, das
+ * Slidev automatisch injiziert.
+ *
+ * Rendert einen schmalen Gradient-Balken am oberen Rand, dessen Breite dem
+ * Deck-Fortschritt (currentPage / total) entspricht.
+ *
+ * Regeln:
+ *   - Rein visuelles Overlay: transparenter Rest, `pointer-events: none`,
+ *     verdeckt niemals Slide-Inhalt (nur der Verlauf malt Pixel).
+ *   - Ausgeblendet auf den animierten Brand-Momenten (cover/closing) und dem
+ *     Kapiteltrenner (section), damit diese Voll-Bild-Slides ruhig bleiben.
+ *   - Das aktuelle Layout MUSS über useNav() gelesen werden — `$frontmatter`
+ *     aus useSlideContext() ist in globalen Komponenten NICHT reaktiv und
+ *     liefert veraltete Werte.
+ */
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const { currentPage, total, slides } = useNav()
+
+// Deck-Fortschritt in Prozent (0..100).
+const progress = computed(() =>
+  total.value ? (currentPage.value / total.value) * 100 : 0,
+)
+
+// Layouts, auf denen die Bar ausgeblendet wird (siehe ChapterFooter.vue —
+// bewusst dieselbe Menge, damit Chrome konsistent verschwindet).
+const HIDDEN_LAYOUTS = ['cover', 'closing', 'section']
+const isHidden = computed(() => {
+  const layout = (slides.value?.[currentPage.value - 1] as any)?.meta?.slide
+    ?.frontmatter?.layout
+  return HIDDEN_LAYOUTS.includes(layout)
+})
+</script>
+
+<template>
+  <div
+    v-if="!isHidden"
+    class="miragon-progress"
+    :style="{ width: progress + '%' }"
+    aria-hidden="true"
+  ></div>
+</template>
+
+<style scoped>
+.miragon-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 4px;
+  z-index: 50;
+  /* Verlauf aus Brand-Tokens (Blau -> Grün), keine hardcoded Hex. */
+  background: linear-gradient(
+    90deg,
+    var(--miragon-blue) 0%,
+    var(--miragon-green) 100%
+  );
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  pointer-events: none;
+  transition: width 0.3s ease;
+}
+</style>

package/global-bottom.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/**
+ * global-bottom — Slidev-Einhängepunkt für den unteren globalen Layer.
+ *
+ * Slidev injiziert per Namenskonvention NUR Dateien namens `global-bottom.*`
+ * aus dem Theme-Root (Unterordner werden nicht gescannt). Diese Datei ist daher
+ * ein schlanker Shim; die eigentliche Logik liegt aufgeräumt in `global/`.
+ */
+import ChapterFooter from './global/ChapterFooter.vue'
+</script>
+
+<template>
+  <ChapterFooter></ChapterFooter>
+</template>

package/global-top.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/**
+ * global-top — Slidev-Einhängepunkt für den oberen globalen Layer.
+ *
+ * Slidev injiziert per Namenskonvention NUR Dateien namens `global-top.*` aus
+ * dem Theme-Root (Unterordner werden nicht gescannt). Diese Datei ist daher ein
+ * schlanker Shim; die eigentliche Logik liegt aufgeräumt in `global/`.
+ */
+import ProgressBar from './global/ProgressBar.vue'
+</script>
+
+<template>
+  <ProgressBar></ProgressBar>
+</template>

package/layouts/dmn.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+/**
+ * dmn — Slide centered on a DMN decision table (STATIC world, no Mesh shader).
+ *
+ * Renders a .dmn file as a decision table via `slidev-addon-dmn`, with an
+ * optional title/eyebrow header above and an optional caption below. The
+ * decision table is the focal point. The sibling of the `bpmn` archetype: BPMN
+ * models the process, DMN models the decisions inside it.
+ *
+ * Requires: `slidev-addon-dmn` must be listed in the slides.md frontmatter
+ * `addons:` block. The component used is `<DmnTable>`, registered automatically
+ * by the addon (it also ships `<DmnDrd>` for the requirement diagram and
+ * `<DmnModeler>` for an editor, not used here).
+ *
+ * Frontmatter props:
+ *   title           — slide title (h2-level)
+ *   eyebrow         — uppercase kicker
+ *   accent          — "blue" | "green" | "mixed" (default blue)
+ *   diagram         — served URL path to the .dmn file, resolved base-aware
+ *                     (e.g. "/resources/04-diagrams/approval.dmn")
+ *   height          — CSS height for the table canvas (default "360px")
+ *   decisionId      — which decision to show when the file holds several (optional)
+ *   fontSize        — table font size (default "15px")
+ *   showAnnotations — show the trailing annotations column (default false)
+ * Slot:
+ *   default  — optional caption / explanatory line below the table
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    diagram?: string
+    height?: string
+    decisionId?: string
+    fontSize?: string
+    showAnnotations?: boolean
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue', height: '360px', fontSize: '15px', showAnnotations: false },
+)
+
+const title = computed(() => props.frontmatter?.title as string | undefined)
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+// Base-Pfad respektieren (Deploys bauen ggf. unter /<repo>/). Runtime-Strings
+// werden von Vite NICHT umgeschrieben — daher manuell mit BASE_URL auflösen.
+// Gleiche Logik wie in bpmn.vue / person.vue / content-image.vue.
+function withBase(path?: string) {
+  if (!path) return path
+  if (/^https?:\/\//.test(path)) return path
+  return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
+}
+const diagramSrc = computed(() => withBase(props.diagram))
+</script>
+
+<template>
+  <div class="dmn-layout" :style="{ '--dm-grad': gradientVar, '--dm-accent': accentVar }">
+    <div class="dmn-inner">
+      <header v-if="title || eyebrow" class="dmn-head">
+        <span class="dmn-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="dmn-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="dmn-title">{{ title }}</h2>
+      </header>
+
+      <div class="dmn-canvas">
+        <DmnTable
+          v-if="diagram"
+          :dmnFilePath="diagramSrc"
+          width="100%"
+          :height="height"
+          :decisionId="decisionId"
+          :fontSize="fontSize"
+          :showAnnotations="showAnnotations"
+        />
+      </div>
+
+      <div v-if="$slots.default" class="dmn-caption">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dmn-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.dmn-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 78rem;
+  margin: 0 auto;
+  padding: 2.5rem 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.dmn-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.25rem;
+}
+.dmn-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--dm-grad);
+  margin-bottom: 0.9rem;
+}
+.dmn-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dm-accent);
+  margin-bottom: 0.55rem;
+}
+.dmn-title {
+  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.dmn-canvas {
+  flex: 1 1 auto;
+  min-height: 0;
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1.1rem;
+  padding: 0.75rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* dmn-js ships its own decision-table CSS (imported by the addon). We keep that
+   rendering intact and only frame it in the branded card above, exactly like the
+   bpmn archetype frames bpmn-js. */
+
+.dmn-caption {
+  flex: 0 0 auto;
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  color: var(--miragon-text-muted);
+  text-align: center;
+}
+.dmn-caption :deep(p) {
+  margin: 0;
+  line-height: 1.5;
+}
+.dmn-caption :deep(code) {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.9em;
+  background: var(--miragon-blue-light);
+  color: var(--miragon-blue-darker);
+  padding: 0.1em 0.4em;
+  border-radius: 0.35rem;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",
@@ -23,13 +23,16 @@
     "@paper-design/shaders": "0.0.77"
   },
   "peerDependencies": {
-    "vue": "^3.5"
+    "vue": "3.5.40"
   },
   "files": [
     "layouts",
     "components",
     "styles",
-    "assets"
+    "assets",
+    "global",
+    "global-top.vue",
+    "global-bottom.vue"
   ],
   "publishConfig": {
     "access": "public",