@troshab/slidev-theme-troshab 0.1.0

package/components/MermaidChart.vue

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+/**
+ * MermaidChart — semantic wrapper for Mermaid diagrams.
+ *
+ * Provides LLMs with typed props and constraints for correct diagram usage.
+ * The actual diagram is passed as slot content containing a Mermaid code block.
+ * Renders via Slidev's built-in Mermaid support.
+ *
+ * In development mode, validates diagram complexity against recommended limits
+ * and shows a warning banner when exceeded.
+ *
+ * Usage:
+ *   <MermaidChart type="flowchart" direction="LR">
+ *
+ *   ```mermaid
+ *   graph LR
+ *       A[App] --> B[Server]
+ *   ```
+ *
+ *   </MermaidChart>
+ */
+import { computed, onMounted, ref, useSlots, type VNode } from 'vue'
+
+const props = defineProps<{
+  /** Diagram type — determines rendering constraints */
+  type: 'flowchart' | 'xychart' | 'sequence' | 'pie' | 'class' | 'state' | 'er' | 'gantt' | 'timeline' | 'mindmap' | 'gitgraph'
+  /** Flow direction for flowcharts */
+  direction?: 'LR' | 'TD' | 'BT' | 'RL'
+  /** Caption text below the diagram */
+  caption?: string
+}>()
+
+const isDev = import.meta.env.DEV
+const slots = useSlots()
+
+/** Limits per diagram type */
+const limits: Record<string, { max: number, label: string }> = {
+  pie: { max: 5, label: 'segments' },
+  flowchart: { max: 8, label: 'nodes' },
+  xychart: { max: 8, label: 'x-axis labels' },
+  sequence: { max: 4, label: 'participants' },
+  class: { max: 5, label: 'classes' },
+  state: { max: 8, label: 'states' },
+  er: { max: 4, label: 'entities' },
+  gantt: { max: 6, label: 'tasks' },
+  timeline: { max: 6, label: 'events' },
+  mindmap: { max: 4, label: 'branches' },
+  gitgraph: { max: 8, label: 'commits' },
+}
+
+/**
+ * Walk slot VNodes to find mermaid source code.
+ * Slidev compiles ```mermaid blocks into components with a `code` prop.
+ */
+function extractCode(): string | null {
+  const vnodes = slots.default?.()
+  if (!vnodes) return null
+
+  function walk(nodes: VNode[]): string | null {
+    for (const vn of nodes) {
+      if (typeof vn.props?.code === 'string') return vn.props.code
+      if (Array.isArray(vn.children)) {
+        const found = walk(vn.children as VNode[])
+        if (found) return found
+      }
+      if (vn.component?.props?.code) {
+        return vn.component.props.code as string
+      }
+    }
+    return null
+  }
+
+  return walk(vnodes)
+}
+
+/** Count items in mermaid code based on diagram type */
+function countItems(type: string, code: string): number {
+  switch (type) {
+    case 'pie':
+      return (code.match(/".+?"\s*:/g) || []).length
+
+    case 'flowchart': {
+      // Match node IDs before shape brackets: A[text], B(text), C{text}, D((text)), etc.
+      const matches = code.match(/(?:^|\s|-->|---)([A-Za-z]\w*)[\[({]/gm) || []
+      const ids = new Set(matches.map(m => {
+        const id = m.replace(/^[\s\->]+/, '').replace(/[\[({]$/, '')
+        return id
+      }))
+      return ids.size
+    }
+
+    case 'sequence': {
+      const actors = new Set<string>()
+      for (const m of code.matchAll(/(\S+)\s*->>?\+?\s*(\S+)/g)) {
+        actors.add(m[1].replace(/:$/, ''))
+        actors.add(m[2].replace(/:$/, ''))
+      }
+      return actors.size
+    }
+
+    case 'xychart': {
+      // x-axis [...labels...] or x-axis "title" [...labels...]
+      const xMatch = code.match(/x-axis\s+(?:"[^"]*"\s+)?\[([^\]]+)\]/)
+      return xMatch ? xMatch[1].split(',').length : 0
+    }
+
+    case 'class':
+      return (code.match(/^\s*class\s+\w+/gm) || []).length
+
+    case 'state':
+      // Count state definitions (lines with "state" keyword or [*] transitions)
+      return new Set(
+        (code.match(/(?:state\s+"[^"]*"\s+as\s+(\w+)|\b(\w+)\s*-->)/gm) || [])
+          .map(m => m.replace(/\s*-->.*/, '').replace(/^state\s+"[^"]*"\s+as\s+/, '').trim())
+          .filter(Boolean)
+      ).size
+
+    case 'er':
+      // Entity names before { blocks
+      return (code.match(/^\s*\w[\w-]*\s*\{/gm) || []).length
+
+    case 'gantt':
+      // Task lines: indented lines that are not section/title/dateFormat/axisFormat/etc.
+      return (code.match(/^\s{2,}\w[^:]*:[^,\n]*/gm) || []).length
+
+    case 'timeline': {
+      // Period entries: lines with content : detail
+      return (code.match(/^\s+.+\s*:\s*.+$/gm) || []).length
+    }
+
+    case 'mindmap': {
+      // First-level branches: lines with exactly one level of indentation
+      const lines = code.split('\n')
+      let rootIndent = -1
+      let branches = 0
+      for (const line of lines) {
+        if (!line.trim() || line.trim().startsWith('mindmap')) continue
+        const indent = line.search(/\S/)
+        if (rootIndent === -1) { rootIndent = indent; continue }
+        if (indent === rootIndent + 2 || indent === rootIndent + 4) branches++
+      }
+      return branches
+    }
+
+    case 'gitgraph':
+      return (code.match(/^\s*commit/gm) || []).length
+
+    default:
+      return 0
+  }
+}
+
+const diagramRef = ref<HTMLElement | null>(null)
+
+/**
+ * Mermaid renders SVG inside a shadow DOM with an inline max-width
+ * that caps the diagram at its intrinsic size. We observe the shadow root
+ * and remove that constraint so the SVG scales to fill the container.
+ */
+onMounted(() => {
+  const el = diagramRef.value
+  if (!el) return
+
+  function unlockSvg(mermaidEl: Element) {
+    const sr = (mermaidEl as any).shadowRoot
+    if (!sr) return
+    const svg = sr.querySelector('svg')
+    if (svg) {
+      svg.removeAttribute('height')
+      svg.style.maxWidth = 'none'
+      svg.style.width = '100%'
+      svg.style.height = 'auto'
+      svg.style.maxHeight = '100%'
+      // Mermaid renders text as foreignObject with overflow:hidden — unclip
+      sr.querySelectorAll('foreignObject').forEach((fo: Element) => {
+        ;(fo as HTMLElement).style.overflow = 'visible'
+      })
+      // Mindmap nodes use dark cScale chart backgrounds — Mermaid's textColor
+      // applies globally and has no mindmap-specific override, so fix via CSS var
+      if (props.type === 'mindmap') {
+        sr.querySelectorAll('foreignObject div').forEach((el: Element) => {
+          ;(el as HTMLElement).style.color = 'var(--color-bg)'
+        })
+      }
+      // Gantt critText: Mermaid has no themeVariable for critText (only
+      // taskTextColor applies, which can't differ from regular task text).
+      // Avoid using `crit` tasks in demos, or accept the contrast limitation.
+      // done/active text is handled by taskTextDarkColor in mermaid.ts.
+    }
+  }
+
+  /**
+   * Observe shadow root for SVG changes (initial render + re-renders).
+   * Mermaid may re-render after initial mount (e.g. theme config applied),
+   * so we must re-apply fixes each time a new SVG appears.
+   */
+  function observeShadowRoot(mermaidEl: Element) {
+    const sr = (mermaidEl as any).shadowRoot
+    if (!sr) return
+
+    // Apply immediately if SVG already exists
+    if (sr.querySelector('svg')) unlockSvg(mermaidEl)
+
+    // Watch for SVG additions/replacements in shadow root
+    const srObserver = new MutationObserver(() => {
+      if (sr.querySelector('svg')) unlockSvg(mermaidEl)
+    })
+    srObserver.observe(sr, { childList: true, subtree: true })
+  }
+
+  /** Poll until .mermaid element has a shadow root, then observe it. */
+  function pollForShadowRoot(mermaidEl: Element) {
+    if ((mermaidEl as any).shadowRoot) {
+      observeShadowRoot(mermaidEl)
+    } else {
+      requestAnimationFrame(() => pollForShadowRoot(mermaidEl))
+    }
+  }
+
+  // If .mermaid already in DOM (Slidev pre-render), start observing
+  const existing = el.querySelector('.mermaid')
+  if (existing) pollForShadowRoot(existing)
+
+  // Watch for .mermaid being added later (lazy rendering)
+  const observer = new MutationObserver(() => {
+    const mermaidEl = el.querySelector('.mermaid')
+    if (mermaidEl) pollForShadowRoot(mermaidEl)
+  })
+  observer.observe(el, { childList: true, subtree: true })
+})
+
+const warning = computed<string | null>(() => {
+  if (!isDev) return null
+  const code = extractCode()
+  if (!code) return null
+  const limit = limits[props.type]
+  if (!limit) return null
+  const count = countItems(props.type, code)
+  if (count > limit.max) {
+    return `${props.type}: ${count} ${limit.label} (max ${limit.max})`
+  }
+  return null
+})
+</script>
+
+<template>
+  <div class="mermaid-chart">
+    <div v-if="warning" class="mermaid-chart-warning">{{ warning }}</div>
+    <div ref="diagramRef" class="mermaid-chart-diagram">
+      <slot />
+    </div>
+    <p v-if="caption" class="mermaid-chart-caption">{{ caption }}</p>
+  </div>
+</template>
+
+<style scoped>
+.mermaid-chart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.mermaid-chart-diagram {
+  width: 100%;
+  flex: 0 1 auto;
+  min-height: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.mermaid-chart-diagram :deep(.mermaid) {
+  width: 100%;
+  height: 100%;
+}
+
+.mermaid-chart-warning {
+  align-self: stretch;
+  padding: 0.375rem 0.75rem;
+  border-left: 3px solid var(--color-danger);
+  background: var(--color-danger-tint);
+  color: var(--color-danger);
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+}
+
+.mermaid-chart-caption {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  text-align: center;
+  margin: 0;
+}
+</style>

package/components/Metric.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+/**
+ * Metric primitive — KPI/stat display with optional animation.
+ *
+ * Static:   <Metric value="99.9%" label="Uptime" color="primary" />
+ * Animated: <Metric :value="10000" label="Users" color="success" animated separator="," />
+ * Full:     <Metric :value="2.5" prefix="$" suffix="M" label="Revenue" color="info"
+ *             animated :from="0" :duration="2500" :decimals="1" />
+ *
+ * When `animated` is set and `value` is a number, uses AnimatedCounter internally.
+ * When `value` is a string (or animated is false), displays statically.
+ */
+
+import { computed } from 'vue'
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar, gradientVar } from '../composables/useColors'
+import AnimatedCounter from '../components_base/AnimatedCounter.vue'
+
+const props = withDefaults(defineProps<{
+  value: string | number
+  label: string
+  color?: SemanticColor
+  prefix?: string
+  suffix?: string
+  icon?: string
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'card' | 'bare'
+  gradient?: boolean
+  // Animation props (only when value is number)
+  animated?: boolean
+  from?: number
+  duration?: number
+  decimals?: number
+  separator?: string
+  easing?: 'linear' | 'easeOut' | 'easeInOut'
+  at?: number                 // undefined = auto-register click, 0 = on slide enter, -1 = manual
+}>(), {
+  color: 'primary',
+  prefix: '',
+  suffix: '',
+  size: 'md',
+  variant: 'card',
+  gradient: false,
+  animated: false,
+  from: 0,
+  duration: 2000,
+  decimals: 0,
+  separator: '',
+  easing: 'easeOut',
+})
+
+const isNumeric = computed(() => typeof props.value === 'number')
+const shouldAnimate = computed(() => props.animated && isNumeric.value)
+
+const staticDisplay = computed(() => {
+  if (isNumeric.value && !shouldAnimate.value) {
+    let num = (props.value as number).toFixed(props.decimals)
+    if (props.separator) {
+      const parts = num.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, props.separator)
+      num = parts.join('.')
+    }
+    return `${props.prefix}${num}${props.suffix}`
+  }
+  return `${props.prefix}${props.value}${props.suffix}`
+})
+
+const sizeClasses: Record<string, string> = {
+  sm: 'metric-sm',
+  md: 'metric-md',
+  lg: 'metric-lg',
+}
+</script>
+
+<template>
+  <div class="metric" :class="[sizeClasses[size], { 'metric-bare': variant === 'bare' }]">
+    <div v-if="$slots.icon" class="metric-icon" :style="{ color: semanticColorVar[color] }">
+      <slot name="icon" />
+    </div>
+    <div class="metric-value" :class="{ 'metric-gradient': gradient }" :style="gradient ? { '--metric-gradient': gradientVar[color] } : { color: semanticColorVar[color] }">
+      <template v-if="shouldAnimate">
+        <span v-if="prefix" class="metric-affix">{{ prefix }}</span>
+        <AnimatedCounter
+          :value="(value as number)"
+          :from="from"
+          :duration="duration"
+          :decimals="decimals"
+          :separator="separator"
+          :easing="easing"
+          :at="at"
+        />
+        <span v-if="suffix" class="metric-affix">{{ suffix }}</span>
+      </template>
+      <template v-else>{{ staticDisplay }}</template>
+    </div>
+    <div class="metric-label">{{ label }}</div>
+    <div v-if="$slots.default" class="metric-extra">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.metric {
+  text-align: center;
+  padding: var(--space-md);
+  background: var(--color-bg-soft);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+}
+
+.metric-bare {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.metric-icon {
+  font-size: 1.5em;
+  margin-bottom: var(--space-xs);
+  line-height: 1;
+}
+
+.metric-value {
+  font-weight: var(--font-weight-bold);
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.metric-affix {
+  font-weight: inherit;
+}
+
+.metric-label {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-xs);
+}
+
+.metric-extra {
+  margin-top: var(--space-xs);
+  font-size: var(--font-size-small);
+  color: var(--color-text-tertiary);
+}
+
+/* Sizes */
+.metric-sm .metric-value { font-size: var(--font-size-h2); }
+.metric-md .metric-value { font-size: calc(var(--font-size-h1) * 1.1); }
+.metric-lg .metric-value { font-size: calc(var(--font-size-h1) * 1.5); }
+
+/* Gradient text effect */
+.metric-gradient {
+  background: var(--metric-gradient, var(--gradient-primary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+</style>

package/components/PersonCard.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+/**
+ * PersonCard primitive — speaker/team member introduction.
+ *
+ * <PersonCard name="John Doe" role="CTO" initials="JD" />
+ * <PersonCard name="Jane" role="Engineer" company="Acme" avatar="/photo.jpg" />
+ * <PersonCard name="Alex" role="Designer" bio="10 years experience" horizontal />
+ * <PersonCard name="Sam" role="Lead" size="sm" />
+ *
+ * Auto-generates initials from name if not provided.
+ * Supports avatar image, initials circle, or no avatar.
+ * Default slot for extra content (links, badges, etc).
+ */
+
+import { computed } from 'vue'
+import type { ExtendedColor } from '../composables/useColors'
+import { gradientVar } from '../composables/useColors'
+
+const props = withDefaults(defineProps<{
+  name: string
+  role?: string
+  company?: string
+  avatar?: string
+  initials?: string
+  bio?: string
+  size?: 'sm' | 'md' | 'lg'
+  align?: 'left' | 'center'
+  horizontal?: boolean
+  color?: ExtendedColor
+}>(), {
+  size: 'md',
+  align: 'center',
+  horizontal: false,
+  color: 'primary',
+})
+
+const autoInitials = computed(() => {
+  if (props.initials) return props.initials
+  return props.name
+    .split(/\s+/)
+    .map(w => w[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+})
+
+const hasAvatar = computed(() => !!props.avatar || !!props.initials || true)
+
+const avatarBg = computed(() => gradientVar[props.color])
+</script>
+
+<template>
+  <div
+    class="person-card"
+    :class="[
+      `person-${size}`,
+      `person-align-${align}`,
+      horizontal ? 'person-horizontal' : '',
+    ]"
+  >
+    <!-- Avatar -->
+    <div class="person-avatar-wrap">
+      <img
+        v-if="avatar"
+        :src="avatar"
+        :alt="name"
+        class="person-avatar person-avatar-img"
+      />
+      <div
+        v-else
+        class="person-avatar person-avatar-initials"
+        :style="{ background: avatarBg }"
+      >
+        {{ autoInitials }}
+      </div>
+    </div>
+
+    <!-- Info -->
+    <div class="person-info">
+      <div class="person-name">{{ name }}</div>
+      <div v-if="role || company" class="person-role">
+        {{ role }}<template v-if="role && company"> @ </template>{{ company }}
+      </div>
+      <div v-if="bio" class="person-bio">{{ bio }}</div>
+      <div v-if="$slots.default" class="person-extra">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.person-align-center { align-items: center; text-align: center; }
+.person-align-left { align-items: flex-start; text-align: left; }
+
+.person-horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.person-horizontal .person-info {
+  text-align: left;
+}
+
+/* Avatar */
+.person-avatar {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.person-avatar-img {
+  object-fit: cover;
+}
+
+.person-avatar-initials {
+  color: var(--color-primary-foreground);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Sizes */
+.person-sm .person-avatar { width: 3rem; height: 3rem; font-size: 1.2rem; }
+.person-md .person-avatar { width: 5rem; height: 5rem; font-size: 2rem; }
+.person-lg .person-avatar { width: 7rem; height: 7rem; font-size: 2.8rem; }
+
+.person-sm .person-name { font-size: var(--font-size-small); }
+.person-md .person-name { font-size: var(--font-size-base); }
+.person-lg .person-name { font-size: var(--font-size-h2); }
+
+/* Info */
+.person-name {
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-xs);
+}
+
+.person-horizontal .person-name {
+  margin-top: 0;
+}
+
+.person-role {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+}
+
+.person-bio {
+  font-size: var(--font-size-small);
+  color: var(--color-text-tertiary);
+  margin-top: var(--space-xs);
+  max-width: 35ch;
+}
+
+.person-extra {
+  margin-top: var(--space-xs);
+}
+</style>