@miragon/slidev-toolkit 1.6.0 → 1.7.1

package/README.md

@@ -2,7 +2,7 @@
 
 The Miragon-branded [Slidev](https://sli.dev) design system: a fixed brand theme, twelve layout archetypes, reusable components (`Card`, `CardGrid`, `StepList`, `Figure`, `SplitView`, `Agenda`), the animated `BrandMeshBackground`, and always-on progress chrome (a stepper bar and a chapter footer). One source of design truth, so a Miragon deck stays on-brand without hand-written HTML or CSS.
 
-> Building a **new** deck? The easiest path is the [template repository](https://github.com/Miragon/slidev-deck-template) ("Use this template") — it ships this toolkit together with a demo deck, authoring guidance, and CI. Use the npm package below when you want the brand in an **existing** or standalone Slidev project.
+> Building a **new** deck? The easiest path is `npm create @miragon/slidev-deck@latest my-talk` (from the [template repository](https://github.com/Miragon/slidev-deck-template)) — it scaffolds this toolkit together with a demo deck, authoring guidance, and CI. Use the npm package below when you want the brand in an **existing** or standalone Slidev project.
 
 ## Install
 

package/components/Card.vue

@@ -1,28 +1,5 @@
 <script setup lang="ts">
-/**
- * Card — kanonische weiße Brand-Card (Design-System §6).
- * Hintergrund IMMER weiß, Akzent NUR auf dem Titel. `accent` wählt einen Stop
- * der blue → teal → green-Progression (§6.3) — dies ist der einzige
- * sanktionierte Ort für rohe Hex-Werte, hier zentral statt im Deck verstreut.
- *
- * Mehrkartige Grids: Titel von links nach rechts entlang der Progression.
- *   2 Karten: blue, green
- *   3 Karten: blue, teal, green
- *   4 Karten: blue, blue-mid, green-deep, green
- *   <Card title="Deployment" accent="blue">Body …</Card>
- *
- * `icon` (optional): eine Iconify-UnoCSS-Klasse (`i-carbon-idea`, `i-ph-cube`, …).
- * Wird sie gesetzt, erscheint das Icon über dem Titel und trägt dieselbe
- * Akzentfarbe; ohne `icon` bleibt die Karte wie bisher rein textuell.
- * Der volle Klassenname muss so im Slide stehen, damit UnoCSS ihn beim
- * statischen Scan findet und generiert (Brand-Regel: Iconify `i-*`, kein Emoji).
- *   <Card title="Deployment" accent="blue" icon="i-carbon-rocket">Body …</Card>
- *
- * `align` (optional): richtet Icon, Titel und Body aus — `left` (Standard),
- * `center` oder `right`. Betrifft nur die horizontale Ausrichtung des Inhalts;
- * Hintergrund, Akzentlogik und alles andere bleiben unverändert.
- *   <Card title="Deployment" accent="blue" align="center">Body …</Card>
- */
+
 const props = withDefaults(
   defineProps<{
     title?: string
@@ -34,7 +11,6 @@ const props = withDefaults(
   { accent: 'blue', padding: 'standard', align: 'left' },
 )
 
-// Die §6.3-Progressions-Stops. Bewusst lokal: der einzige sanktionierte Hex-Ort.
 const ACCENTS: Record<string, string> = {
   blue: '#335DE5',
   'blue-mid': '#2B5ACE',
@@ -60,11 +36,6 @@ const ACCENTS: Record<string, string> = {
   background: var(--miragon-white);
   box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
 }
-/* Nur Karten mit Zeichnung (compact) werden zur Flex-Spalte: im Grid stretchen
-   die Karten auf gleiche Höhe, eine abschließende Zeichnung (margin-top:auto)
-   dockt am Kartenboden an und liegt über alle Karten hinweg auf gleicher Höhe.
-   Standard-Karten bleiben normaler Fluss, sonst würde inline <strong> im Body
-   zu eigenen Flex-Items (eigene Zeilen) umbrechen. */
 .mg-card--compact { padding: 1rem; display: flex; flex-direction: column; }
 .mg-card--standard { padding: 1.25rem; }
 .mg-card--generous { padding: 1.5rem; }
@@ -90,28 +61,36 @@ const ACCENTS: Record<string, string> = {
   line-height: 1.55;
   color: #4b5563;
 }
-/* Blank-line-wrapped inline Markdown emits a <p>; normalise it to the card body size (no prose bloat). */
-.mg-card__body :deep(p) {
-  margin: 0;
+.mg-card .mg-card__body :deep(p),
+.mg-card .mg-card__body :deep(ul),
+.mg-card .mg-card__body :deep(ol),
+.mg-card .mg-card__body :deep(li),
+.mg-card .mg-card__body :deep(h1),
+.mg-card .mg-card__body :deep(h2),
+.mg-card .mg-card__body :deep(h3),
+.mg-card .mg-card__body :deep(h4) {
   font-size: inherit;
   line-height: inherit;
+  color: inherit;
+  font-weight: inherit;
+  max-width: none;
+  margin: 0;
 }
-.mg-card__body :deep(p + p) { margin-top: 0.6em; }
-/* Same for bullet lists: normalise to the body size with a small blue square marker (like the content layout). */
-.mg-card__body :deep(ul) {
+.mg-card .mg-card__body :deep(p + p) { margin-top: 0.6em; }
+/* Small breath between a lead paragraph and the list it introduces. */
+.mg-card .mg-card__body :deep(p + ul),
+.mg-card .mg-card__body :deep(p + ol) { margin-top: 0.3em; }
+.mg-card .mg-card__body :deep(ul),
+.mg-card .mg-card__body :deep(ol) {
   list-style: none;
-  margin: 0;
   padding: 0;
 }
-.mg-card__body :deep(li) {
+.mg-card .mg-card__body :deep(li) {
   position: relative;
-  font-size: inherit;
-  line-height: inherit;
   padding-left: 1.1rem;
-  margin: 0;
 }
-.mg-card__body :deep(li + li) { margin-top: 0.4em; }
-.mg-card__body :deep(li)::before {
+.mg-card .mg-card__body :deep(li + li) { margin-top: 0.4em; }
+.mg-card .mg-card__body :deep(li)::before {
   content: '';
   position: absolute;
   left: 0;
@@ -121,8 +100,25 @@ const ACCENTS: Record<string, string> = {
   border-radius: 0.1rem;
   background: var(--miragon-blue);
 }
+/* Numbered lists keep a decimal counter instead of the square marker. */
+.mg-card .mg-card__body :deep(ol) { counter-reset: mg-card-ol; }
+.mg-card .mg-card__body :deep(ol > li) { counter-increment: mg-card-ol; }
+.mg-card .mg-card__body :deep(ol > li)::before {
+  content: counter(mg-card-ol) '.';
+  top: 0;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--miragon-blue);
+  font-weight: 700;
+}
+.mg-card .mg-card__body :deep(strong) { font-weight: 700; color: #1f2937; }
+.mg-card .mg-card__body :deep(a) {
+  color: var(--miragon-blue);
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+}
 .mg-card--compact .mg-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
-/* A trailing diagram (<Figure src>) docks at the card bottom, so the image sits at
-   the same position in every card of a stretched grid regardless of text length. */
 .mg-card--compact .mg-card__body :deep(.mg-figure) { margin-top: auto; }
 </style>

package/components/DiagramFrame.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    padding?: 'compact' | 'standard' | 'generous'
+    height?: string
+  }>(),
+  { padding: 'standard' },
+)
+</script>
+
+<template>
+  <div
+    class="mg-frame"
+    :class="`mg-frame--${padding}`"
+    :style="height ? { height } : undefined"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.mg-frame {
+  box-sizing: border-box;
+  background: var(--miragon-white);
+  border: 1px solid #e5e7eb;
+  border-radius: 1.1rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.mg-frame--compact { padding: 0.75rem; }
+.mg-frame--standard { padding: 1rem 1.25rem; }
+.mg-frame--generous { padding: 1.75rem 2rem; }
+</style>

package/components/StepList.vue

@@ -1,15 +1,6 @@
 <script setup lang="ts">
-/**
- * StepList — kompakte, beschriftete Schrittliste für die Seitenspalte neben
- * einem Diagramm (Laufzeit-/Deploymentsicht). Ersetzt handgestylte
- * <div style="font-size:…"><div style="margin-bottom:…"><strong style="…">-Blöcke.
- *
- * Styling lebt ausschließlich hier (Tokens aus theme.css), nie in slides.md.
- * Verwendung:
- *   <StepList>
- *   <Step label="Client">ruft … auf</Step>
- *   </StepList>
- */
+// Numbered step sequence beside a diagram. Wrap <Step> items; styling lives here.
+//   <StepList><Step label="Client">calls …</Step></StepList>
 </script>
 
 <template>
@@ -26,4 +17,24 @@
   color: var(--miragon-text-secondary);
   counter-reset: miragon-step;
 }
+/* Own the step typography regardless of content or host layout: the doubled
+   `.step-list.step-list` (0,3,1) beats a host layout's prose `:deep()` (0,2,1),
+   so steps keep their size even inside a large-prose layout. */
+.step-list.step-list :deep(p),
+.step-list.step-list :deep(ul),
+.step-list.step-list :deep(ol),
+.step-list.step-list :deep(li) {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  max-width: none;
+  margin: 0;
+}
+.step-list.step-list :deep(p + p) { margin-top: 0.4em; }
+.step-list.step-list :deep(strong) { font-weight: 700; color: var(--miragon-text-primary); }
+.step-list.step-list :deep(a) {
+  color: var(--miragon-blue);
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+}
 </style>

package/layouts/bpmn.vue

@@ -21,6 +21,7 @@
  *   default  — optional caption / explanatory line below the diagram
  */
 import { computed } from 'vue'
+import DiagramFrame from '../components/DiagramFrame.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -59,14 +60,14 @@ const diagramSrc = computed(() => withBase(props.diagram))
         <h2 v-if="title" class="bpmn-title">{{ title }}</h2>
       </header>
 
-      <div class="bpmn-canvas">
+      <DiagramFrame class="bpmn-canvas" padding="compact">
         <BpmnTokenSimulation
           v-if="diagram"
           :bpmnFilePath="diagramSrc"
           width="100%"
           :height="height"
         />
-      </div>
+      </DiagramFrame>
 
       <div v-if="$slots.default" class="bpmn-caption">
         <slot />
@@ -129,15 +130,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
 .bpmn-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;
+  width: 100%;
 }
 
 .bpmn-caption {

package/layouts/dmn.vue

@@ -26,6 +26,7 @@
  *   default  — optional caption / explanatory line below the table
  */
 import { computed } from 'vue'
+import DiagramFrame from '../components/DiagramFrame.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -67,7 +68,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
         <h2 v-if="title" class="dmn-title">{{ title }}</h2>
       </header>
 
-      <div class="dmn-canvas">
+      <DiagramFrame class="dmn-canvas" padding="compact">
         <DmnTable
           v-if="diagram"
           :dmnFilePath="diagramSrc"
@@ -77,7 +78,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
           :fontSize="fontSize"
           :showAnnotations="showAnnotations"
         />
-      </div>
+      </DiagramFrame>
 
       <div v-if="$slots.default" class="dmn-caption">
         <slot />
@@ -140,19 +141,11 @@ const diagramSrc = computed(() => withBase(props.diagram))
 .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;
+  width: 100%;
 }
 /* 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. */
+   rendering intact and only frame it in the branded DiagramFrame card, exactly
+   like the bpmn archetype frames bpmn-js. */
 
 .dmn-caption {
   flex: 0 0 auto;

package/layouts/excalidraw.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import DiagramFrame from '../components/DiagramFrame.vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    diagram?: string
+    alt?: string
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue' },
+)
+
+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)',
+)
+
+function withBase(path?: string) {
+  if (!path) return path
+  if (/^https?:\/\//.test(path)) return path
+  return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
+}
+const imageSrc = computed(() => withBase(props.diagram))
+</script>
+
+<template>
+  <div class="excalidraw-layout" :style="{ '--ex-grad': gradientVar, '--ex-accent': accentVar }">
+    <div class="excalidraw-inner">
+      <header v-if="title || eyebrow" class="excalidraw-head">
+        <span class="excalidraw-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="excalidraw-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="excalidraw-title">{{ title }}</h2>
+      </header>
+
+      <DiagramFrame class="excalidraw-canvas" padding="generous">
+        <img v-if="imageSrc" :src="imageSrc" :alt="alt" class="excalidraw-img" />
+      </DiagramFrame>
+
+      <div v-if="$slots.default" class="excalidraw-caption">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.excalidraw-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.excalidraw-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 78rem;
+  margin: 0 auto;
+  padding: 2.5rem 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.excalidraw-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.25rem;
+}
+.excalidraw-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--ex-grad);
+  margin-bottom: 0.9rem;
+}
+.excalidraw-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ex-accent);
+  margin-bottom: 0.55rem;
+}
+.excalidraw-title {
+  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.excalidraw-canvas {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.excalidraw-img {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+}
+
+.excalidraw-caption {
+  flex: 0 0 auto;
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  color: var(--miragon-text-muted);
+  text-align: center;
+}
+.excalidraw-caption :deep(p) {
+  margin: 0;
+  line-height: 1.5;
+}
+.excalidraw-caption :deep(:not(pre) > 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/layouts/mermaid.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import DiagramFrame from '../components/DiagramFrame.vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue' },
+)
+
+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)',
+)
+</script>
+
+<template>
+  <div class="mermaid-layout" :style="{ '--mm-grad': gradientVar, '--mm-accent': accentVar }">
+    <div class="mermaid-inner">
+      <header v-if="title || eyebrow" class="mermaid-head">
+        <span class="mermaid-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="mermaid-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="mermaid-title">{{ title }}</h2>
+      </header>
+
+      <DiagramFrame class="mermaid-canvas">
+        <slot />
+      </DiagramFrame>
+
+      <div v-if="$slots.caption" class="mermaid-caption">
+        <slot name="caption" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mermaid-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.mermaid-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 78rem;
+  margin: 0 auto;
+  padding: 2.5rem 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.mermaid-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.25rem;
+}
+.mermaid-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--mm-grad);
+  margin-bottom: 0.9rem;
+}
+.mermaid-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--mm-accent);
+  margin-bottom: 0.55rem;
+}
+.mermaid-title {
+  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.mermaid-canvas {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+.mermaid-canvas :deep(.mermaid),
+.mermaid-canvas :deep(.mermaid-svg-wrapper) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.mermaid-canvas :deep(svg) {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+}
+
+.mermaid-caption {
+  flex: 0 0 auto;
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  color: var(--miragon-text-muted);
+  text-align: center;
+}
+.mermaid-caption :deep(p) {
+  margin: 0;
+  line-height: 1.5;
+}
+.mermaid-caption :deep(:not(pre) > 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.6.0",
+  "version": "1.7.1",
   "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",

package/setup/mermaid.ts

@@ -1,32 +1,25 @@
 import { defineMermaidSetup } from '@slidev/types'
 
-// Brand-styles every ```mermaid diagram with the Miragon palette and Geist, so
-// text-generated diagrams stay on-brand. Slidev collects setup/* from every root
-// (theme included), so shipping this in the theme package means every deck that
-// sets `theme: '@miragon/slidev-toolkit'` inherits it with zero config. A deck can
-// still override by adding its own setup/mermaid.ts, but never has to.
-// The hex values mirror the tokens in ../styles/theme.css; they live here (config),
-// never in slide markdown, so the "no hardcoded hex in markdown" rule stays intact.
-// Excalidraw remains the default for diagrams; Mermaid is for text-generated flows.
 export default defineMermaidSetup(() => ({
   theme: 'base',
   themeVariables: {
-    // Nodes: light-blue fill, Miragon-blue border, black label text
-    primaryColor: '#F0F4FF', // --miragon-blue-light
-    primaryBorderColor: '#335DE5', // --miragon-blue
-    primaryTextColor: '#000000', // --miragon-text-primary
+    primaryColor: '#F0F4FF',
+    primaryBorderColor: '#335DE5',
+    primaryTextColor: '#000000',
 
-    // Edges and their labels
-    lineColor: '#335DE5', // --miragon-blue
-    edgeLabelBackground: '#F5F7FF', // --miragon-blue-soft
+    lineColor: '#335DE5',
+    edgeLabelBackground: '#F5F7FF',
 
-    // Secondary / tertiary surfaces (sequence actor boxes, alt-blocks, notes)
-    secondaryColor: '#F5F7FF', // --miragon-blue-soft
-    secondaryBorderColor: '#2B4ACB', // --miragon-blue-mid
+    secondaryColor: '#F5F7FF',
+    secondaryBorderColor: '#2B4ACB',
     tertiaryColor: '#FFFFFF',
     tertiaryBorderColor: '#335DE5',
 
-    // Typography: Geist, matching the theme's body font
     fontFamily: "'Geist', 'Inter', 'Helvetica Neue', Arial, sans-serif",
   },
+  themeCSS: `
+    .node rect, .node polygon, .cluster rect { rx: 8px; ry: 8px; }
+    rect.actor, .actor rect, rect.note, .note rect,
+    .classGroup rect, .stateGroup rect, .entityBox { rx: 8px; ry: 8px; }
+  `,
 }))