@miragon/slidev-toolkit 1.7.2 → 1.9.0

package/components/Agenda.vue

@@ -8,7 +8,15 @@
  * Past six the rail WRAPS into balanced rows and drops the previews, becoming a
  * static, top-aligned overview.
  *
- * Props: eyebrow (kicker, default "Agenda"), title (h2), accent (blue|green|mixed).
+ * `layout: subsection` slides do NOT open a chapter (they divide a chapter
+ * internally); they are collected onto the enclosing chapter's `subsections`.
+ * With `preview="subsections"` the previews show just those sub-chapter dividers
+ * instead of every slide — a sparse overview for chapters with many slides.
+ * Chapters without any subsection fall back to their full slide list.
+ *
+ * Props: eyebrow (kicker, default "Agenda"), title (h2), accent (blue|green|mixed),
+ * preview ("slides" | "subsections", default "slides"), gap (CSS length for the
+ * space between the head and the stepper below, default "1.4rem").
  */
 import { computed, ref, watch } from 'vue'
 import { useElementSize } from '@vueuse/core'
@@ -27,8 +35,10 @@ const props = withDefaults(
     eyebrow?: string
     title?: string
     accent?: 'blue' | 'green' | 'mixed'
+    preview?: 'slides' | 'subsections'
+    gap?: string
   }>(),
-  { eyebrow: 'Agenda', accent: 'mixed' },
+  { eyebrow: 'Agenda', accent: 'mixed', preview: 'slides', gap: '1.4rem' },
 )
 
 const { slides, go, currentPage } = useNav()
@@ -48,6 +58,7 @@ interface Chapter {
   eyebrow: string
   title: string
   routes: any[]
+  subsections: any[]
 }
 
 const chapters = computed<Chapter[]>(() => {
@@ -61,9 +72,13 @@ const chapters = computed<Chapter[]>(() => {
         eyebrow: clean(fm.eyebrow) || `Chapter ${n}`,
         title: clean(route.meta?.slide?.title) || clean(fm.eyebrow) || `Chapter ${n}`,
         routes: [route],
+        subsections: [],
       })
     } else if (out.length) {
-      out[out.length - 1].routes.push(route)
+      const chapter = out[out.length - 1]
+      chapter.routes.push(route)
+      // Sub-chapter dividers structure a chapter without opening a new one.
+      if (fm.layout === 'subsection') chapter.subsections.push(route)
     }
   }
   return out
@@ -86,6 +101,17 @@ watch(
 
 const activeChapter = computed(() => chapters.value[selected.value])
 
+// The slides shown as previews for the selected chapter. In "subsections" mode
+// that is just the chapter's sub-chapter dividers (a sparse overview); chapters
+// without any subsection fall back to their full slide list so nothing vanishes.
+const previewRoutes = computed(() => {
+  const ch = activeChapter.value
+  if (!ch) return []
+  return props.preview === 'subsections' && ch.subsections.length
+    ? ch.subsections
+    : ch.routes
+})
+
 // Mini size is computed as if a chapter held at most this many slides, so the
 // frame never shrinks below the clean size; extra slides scroll below the fold.
 const MAX_MINIS = 21
@@ -146,7 +172,7 @@ const ASPECT = 16 / 9
 const MAX_W = 320
 
 const miniWidth = computed(() => {
-  const n = Math.min(activeChapter.value?.routes.length ?? 0, MAX_MINIS)
+  const n = Math.min(previewRoutes.value.length, MAX_MINIS)
   const W = stageW.value
   const H = stageH.value
   if (!n || W < 1 || H < 1) return 200
@@ -173,7 +199,7 @@ function openSlide(no: number, ev: MouseEvent) {
 </script>
 
 <template>
-  <div class="agenda-layout" :style="{ '--ag-grad': gradientVar, '--ag-accent': accentVar }">
+  <div class="agenda-layout" :style="{ '--ag-grad': gradientVar, '--ag-accent': accentVar, '--ag-head-gap': gap }">
     <div class="agenda-inner">
       <header class="agenda-head">
         <span class="agenda-bar" aria-hidden="true"></span>
@@ -230,7 +256,7 @@ function openSlide(no: number, ev: MouseEvent) {
           <transition name="fade-preview" mode="out-in">
             <div :key="selected" class="preview-row">
               <button
-                v-for="route in activeChapter?.routes"
+                v-for="route in previewRoutes"
                 :key="route.no"
                 type="button"
                 class="mini"
@@ -256,6 +282,7 @@ function openSlide(no: number, ev: MouseEvent) {
   /* Fallback for the linter; the inline :style binding overrides at runtime. */
   --ag-grad: var(--miragon-gradient-mixed);
   --ag-accent: var(--miragon-blue);
+  --ag-head-gap: 1.4rem;
   position: absolute;
   inset: 0;
   width: 100%;
@@ -279,7 +306,7 @@ function openSlide(no: number, ev: MouseEvent) {
 
 .agenda-head {
   flex: 0 0 auto;
-  margin-bottom: 1.4rem;
+  margin-bottom: var(--ag-head-gap, 1.4rem);
 }
 .agenda-bar {
   display: block;

package/layouts/subsection.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/**
+ * subsection — Unterkapitel-Trenner (STATISCHE Welt, KEIN Mesh-Shader).
+ *
+ * Der kleine Bruder von `section`: gliedert ein Kapitel INTERN, ohne im Agenda-
+ * Rail ein eigenes Kapitel zu eröffnen (die Agenda zählt nur `layout: section`).
+ * Optisch untergeordnet — kleinerer Titel, dezentere Ghost-Ziffer, eine
+ * optionale Kapitel-Rückreferenz als Überzeile — damit klar bleibt: dies ist
+ * eine Zwischenüberschrift, kein neues Kapitel.
+ *
+ * Die Agenda kann diese Trenner mit `<Agenda preview="subsections">` statt der
+ * Einzelfolien als Kapitel-Vorschau rendern.
+ *
+ * Slots: default = Unterkapiteltitel (h1) + optionaler Einzeiler (p) aus Markdown.
+ * Frontmatter-Props:
+ *   index    — Nummer als String (z. B. "2.1"); rendert als Ghost-Ziffer
+ *   eyebrow  — kleine Überzeile (z. B. das übergeordnete Kapitel)
+ *   accent   — "blue" | "green" | "mixed" — Gradient-Akzent (default blue)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    index?: string
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+  }>(),
+  { accent: 'blue' },
+)
+
+// Token reaktiv (siehe section.vue) — alle Werte aus theme.css, keine Hex.
+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="subsection-layout"
+    :style="{ '--s-grad': gradientVar, '--s-accent': accentVar }"
+  >
+    <span v-if="index" class="subsection-ghost" aria-hidden="true">{{ index }}</span>
+
+    <div class="subsection-content">
+      <span class="subsection-bar" aria-hidden="true"></span>
+      <div v-if="eyebrow" class="subsection-eyebrow">{{ eyebrow }}</div>
+      <div class="subsection-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.subsection-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: center;
+}
+
+/* Ghost-Ziffer wie section, aber kleiner und dezenter — Unterkapitel ordnet sich
+   dem Kapitel unter. Solide Akzentfarbe (exportsicher, vgl. section.vue). */
+.subsection-ghost {
+  position: absolute;
+  z-index: 0;
+  right: 4.5rem;
+  bottom: 2rem;
+  font-size: 20rem;
+  line-height: 1;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  color: var(--s-accent);
+  opacity: 0.06;
+  user-select: none;
+  pointer-events: none;
+}
+
+.subsection-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 60rem;
+  padding: 0 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.subsection-bar {
+  width: 3rem;
+  height: 0.3rem;
+  border-radius: 999px;
+  background: var(--s-grad);
+  margin-bottom: 1.5rem;
+}
+.subsection-eyebrow {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--s-accent);
+  margin-bottom: 1rem;
+}
+
+.subsection-body :deep(h1) {
+  font-size: clamp(2rem, 3.6vw, 3rem);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+.subsection-body :deep(h1 strong) {
+  font-weight: 800;
+  color: var(--s-accent);
+}
+.subsection-body :deep(p) {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--miragon-text-muted);
+  margin: 1.5rem 0 0;
+  max-width: 38rem;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.7.2",
+  "version": "1.9.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",