@miragon/slidev-toolkit 1.6.0 → 1.7.0

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/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/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.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",

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; }
+  `,
 }))