@troshab/slidev-theme-troshab 0.1.0

package/components/CodeDiff.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+/**
+ * CodeDiff - before/after code comparison using <pre> blocks.
+ *
+ * <CodeDiff mode="split">
+ *   <pre filename="utils.js" lang="javascript">
+ * function add(a, b) {
+ *   return a + b;
+ * }
+ *   </pre>
+ *   <pre filename="utils.ts" lang="typescript">
+ * function add(a: number, b: number): number {
+ *   return a + b;
+ * }
+ *   </pre>
+ * </CodeDiff>
+ */
+
+import { computed, useSlots } from 'vue'
+import type { VNode } from 'vue'
+import type { CodeLine } from '../composables/useColors'
+import { useShiki } from '../composables/useShiki'
+import CodeHighlight from './CodeHighlight.vue'
+
+const props = withDefaults(defineProps<{
+  mode?: 'split' | 'unified'
+  showLineNumbers?: boolean
+  highlightChanges?: boolean
+}>(), {
+  mode: 'split',
+  showLineNumbers: true,
+  highlightChanges: true,
+})
+
+const slots = useSlots()
+const { highlighter, tokenizeCode } = useShiki()
+
+// --- Extract code from <pre> slot children ---
+
+interface CodeBlock {
+  code: string
+  filename?: string
+  lang?: string
+}
+
+function extractText(vnode: VNode): string {
+  // Block elements (e.g. <p>) inserted by markdown-it when blank lines appear
+  // inside <pre>: restore the blank line separator with \n prefix
+  const prefix = typeof vnode.type === 'string' ? '\n' : ''
+  if (typeof vnode.children === 'string') return prefix + vnode.children
+  if (Array.isArray(vnode.children)) {
+    return prefix + (vnode.children as VNode[]).map(extractText).join('')
+  }
+  return ''
+}
+
+function dedent(text: string): string {
+  const lines = text.split('\n')
+  while (lines.length && lines[0].trim() === '') lines.shift()
+  while (lines.length && lines[lines.length - 1].trim() === '') lines.pop()
+  const minIndent = lines
+    .filter(l => l.trim().length > 0)
+    .reduce((min, l) => Math.min(min, (l.match(/^(\s*)/)?.[1].length ?? 0)), Infinity)
+  if (minIndent === Infinity || minIndent === 0) return lines.join('\n')
+  return lines.map(l => l.slice(minIndent)).join('\n')
+}
+
+const blocks = computed<CodeBlock[]>(() => {
+  if (!slots.default) return []
+  const vnodes = slots.default()
+  const result: CodeBlock[] = []
+
+  for (const vnode of vnodes) {
+    if (vnode.type === 'pre') {
+      const attrs = (vnode.props || {}) as Record<string, string>
+      result.push({
+        code: dedent(extractText(vnode)),
+        filename: attrs.filename,
+        lang: attrs.lang,
+      })
+    }
+  }
+
+  return result
+})
+
+const oldBlock = computed(() => blocks.value[0])
+const newBlock = computed(() => blocks.value[1])
+
+// --- Shiki pre-tokenization (full code blocks for proper multi-line context) ---
+
+const oldTokens = computed<string[] | null>(() => {
+  if (!highlighter.value || !oldBlock.value?.lang) return null
+  return tokenizeCode(oldBlock.value.code, oldBlock.value.lang)
+})
+
+const newTokens = computed<string[] | null>(() => {
+  if (!highlighter.value || !newBlock.value?.lang) return null
+  return tokenizeCode(newBlock.value.code, newBlock.value.lang)
+})
+
+// --- LCS-based diff ---
+
+function computeLCS(a: string[], b: string[]): string[] {
+  const m = a.length, n = b.length
+  const dp: number[][] = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0))
+  for (let i = 1; i <= m; i++)
+    for (let j = 1; j <= n; j++)
+      dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] + 1 : Math.max(dp[i - 1][j], dp[i][j - 1])
+  const lcs: string[] = []
+  let i = m, j = n
+  while (i > 0 && j > 0) {
+    if (a[i - 1] === b[j - 1]) { lcs.unshift(a[i - 1]); i--; j-- }
+    else if (dp[i - 1][j] > dp[i][j - 1]) i--
+    else j--
+  }
+  return lcs
+}
+
+interface DiffEntry {
+  type: 'unchanged' | 'removed' | 'added'
+  beforeLine?: string
+  afterLine?: string
+  beforeNum?: number
+  afterNum?: number
+}
+
+const diffResult = computed<DiffEntry[]>(() => {
+  if (!oldBlock.value || !newBlock.value) return []
+  const beforeLines = oldBlock.value.code.split('\n')
+  const afterLines = newBlock.value.code.split('\n')
+  const lcs = computeLCS(beforeLines, afterLines)
+  const result: DiffEntry[] = []
+
+  let bi = 0, ai = 0, li = 0
+  while (bi < beforeLines.length || ai < afterLines.length) {
+    if (li < lcs.length && beforeLines[bi] === lcs[li] && afterLines[ai] === lcs[li]) {
+      result.push({ type: 'unchanged', beforeLine: beforeLines[bi], afterLine: afterLines[ai], beforeNum: bi + 1, afterNum: ai + 1 })
+      bi++; ai++; li++
+    } else if (bi < beforeLines.length && (li >= lcs.length || beforeLines[bi] !== lcs[li])) {
+      result.push({ type: 'removed', beforeLine: beforeLines[bi], beforeNum: bi + 1 })
+      bi++
+    } else if (ai < afterLines.length && (li >= lcs.length || afterLines[ai] !== lcs[li])) {
+      result.push({ type: 'added', afterLine: afterLines[ai], afterNum: ai + 1 })
+      ai++
+    }
+  }
+  return result
+})
+
+const hl = computed(() => props.highlightChanges)
+
+const beforeDiffLines = computed<CodeLine[]>(() =>
+  diffResult.value
+    .filter(d => d.type !== 'added')
+    .map(d => ({
+      text: d.beforeLine ?? '',
+      html: d.beforeNum != null ? oldTokens.value?.[d.beforeNum - 1] : undefined,
+      num: d.beforeNum,
+      type: hl.value ? d.type : 'unchanged' as const,
+      prefix: d.type === 'removed' ? '-' : ' ',
+    }))
+)
+
+const afterDiffLines = computed<CodeLine[]>(() =>
+  diffResult.value
+    .filter(d => d.type !== 'removed')
+    .map(d => ({
+      text: d.afterLine ?? '',
+      html: d.afterNum != null ? newTokens.value?.[d.afterNum - 1] : undefined,
+      num: d.afterNum,
+      type: hl.value ? d.type : 'unchanged' as const,
+      prefix: d.type === 'added' ? '+' : ' ',
+    }))
+)
+</script>
+
+<template>
+  <div class="code-diff" :class="`code-diff-${mode}`">
+    <CodeHighlight
+      v-if="oldBlock"
+      :filename="oldBlock.filename"
+      :lang="oldBlock.lang"
+      :lines="beforeDiffLines"
+      :showLineNumbers="showLineNumbers"
+    />
+    <CodeHighlight
+      v-if="newBlock"
+      :filename="newBlock.filename"
+      :lang="newBlock.lang"
+      :lines="afterDiffLines"
+      :showLineNumbers="showLineNumbers"
+    />
+  </div>
+</template>
+
+<style>
+.code-diff {
+  display: flex;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.code-diff-split {
+  flex-direction: row;
+}
+
+.code-diff-unified {
+  flex-direction: column;
+}
+
+/* Children take equal width */
+.code-diff > .code-hl {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Remove inner CodeHighlight borders - parent handles framing */
+.code-diff > .code-hl {
+  border: none;
+  border-radius: 0;
+}
+
+/* Divider between panels */
+.code-diff-split > .code-hl:first-child {
+  border-right: 1px solid var(--color-border-strong);
+}
+</style>

package/components/CodeHighlight.vue

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+/**
+ * CodeHighlight - code block with Shiki syntax highlighting, line numbers,
+ * filename header, line highlighting.
+ *
+ * Via prop:
+ *   <CodeHighlight code="const x = 1;" lang="typescript" />
+ *
+ * Via <pre> slot (preserves whitespace in Slidev markdown):
+ *   <CodeHighlight filename="app.ts" lang="typescript"><pre>
+ * const x: number = 1;
+ * const y: number = 2;
+ *   </pre></CodeHighlight>
+ *
+ * Via lines prop (used internally by CodeDiff):
+ *   <CodeHighlight :lines="computedLines" :showLineNumbers="true" lang="ts" />
+ */
+
+import { ref, computed, useSlots, watch } from 'vue'
+import type { VNode } from 'vue'
+import type { SemanticColor, CodeLine } from '../composables/useColors'
+import { useShiki } from '../composables/useShiki'
+
+const props = withDefaults(defineProps<{
+  code?: string
+  lines?: CodeLine[]
+  filename?: string
+  lang?: string
+  showLineNumbers?: boolean
+  startLine?: number
+  highlights?: number[]
+  highlightColor?: SemanticColor
+}>(), {
+  startLine: 1,
+  showLineNumbers: true,
+  highlightColor: 'primary',
+})
+
+const slots = useSlots()
+const rootEl = ref<HTMLElement | null>(null)
+const { highlighter, tokenizeCode } = useShiki()
+
+// --- Raw code: prop > slot > empty ---
+
+function extractSlotText(vnodes: VNode[]): string {
+  return vnodes.map(vnode => {
+    // Block elements (e.g. <p>) inserted by markdown-it when blank lines appear
+    // inside <pre>: restore the blank line separator with \n prefix
+    const prefix = typeof vnode.type === 'string' ? '\n' : ''
+    if (typeof vnode.children === 'string') return prefix + vnode.children
+    if (Array.isArray(vnode.children)) return prefix + extractSlotText(vnode.children as VNode[])
+    return ''
+  }).join('')
+}
+
+function dedent(text: string): string {
+  const lines = text.split('\n')
+  while (lines.length && lines[0].trim() === '') lines.shift()
+  while (lines.length && lines[lines.length - 1].trim() === '') lines.pop()
+  const minIndent = lines
+    .filter(l => l.trim().length > 0)
+    .reduce((min, l) => Math.min(min, (l.match(/^(\s*)/)?.[1].length ?? 0)), Infinity)
+  if (minIndent === Infinity || minIndent === 0) return lines.join('\n')
+  return lines.map(l => l.slice(minIndent)).join('\n')
+}
+
+const rawCode = computed(() => {
+  if (props.code) return props.code
+  if (slots.default) return dedent(extractSlotText(slots.default()))
+  return ''
+})
+
+// --- Shiki highlighting (reactive: re-runs when highlighter loads or code changes) ---
+
+const shikiLines = computed<string[] | null>(() => {
+  if (!highlighter.value) return null
+  if (props.lines) return null // lines with html come pre-tokenized from CodeDiff
+  if (!rawCode.value || !props.lang) return null
+  return tokenizeCode(rawCode.value, props.lang)
+})
+
+// --- Resolved lines ---
+
+const resolvedLines = computed<CodeLine[]>(() => {
+  if (props.lines) return props.lines
+  if (!rawCode.value) return []
+  const htmlLines = shikiLines.value
+  return rawCode.value.split('\n').map((text, i) => ({
+    text,
+    html: htmlLines?.[i],
+    num: props.startLine + i,
+    type: 'unchanged' as const,
+  }))
+})
+
+const highlightSet = computed(() => new Set(props.highlights ?? []))
+
+// --- Fallback regex tokenizer (used while Shiki loads or for unknown langs) ---
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+const KEYWORDS = new Set([
+  'function', 'return', 'const', 'let', 'var', 'if', 'else', 'for', 'while', 'do',
+  'switch', 'case', 'break', 'continue', 'new', 'delete', 'typeof', 'instanceof',
+  'class', 'extends', 'implements', 'interface', 'type', 'enum', 'import', 'export',
+  'from', 'default', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'yield',
+  'in', 'of', 'as', 'is', 'keyof', 'readonly', 'declare', 'abstract',
+  'public', 'private', 'protected', 'static', 'override', 'get', 'set',
+])
+const LITERALS = new Set([
+  'number', 'string', 'boolean', 'void', 'null', 'undefined', 'any', 'never',
+  'unknown', 'object', 'symbol', 'bigint', 'true', 'false', 'this', 'super',
+])
+
+function wordClass(word: string): string | null {
+  if (KEYWORDS.has(word)) return 'hl-keyword'
+  if (LITERALS.has(word)) return 'hl-constant'
+  return null
+}
+
+function tokenize(text: string): string {
+  if (!props.lang || props.lang === 'text') return esc(text)
+
+  let result = ''
+  let i = 0
+
+  while (i < text.length) {
+    if (text[i] === '"' || text[i] === "'" || text[i] === '`') {
+      const q = text[i]
+      let j = i + 1
+      while (j < text.length && text[j] !== q) { if (text[j] === '\\') j++; j++ }
+      j++
+      result += `<span class="hl-string">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+    if (text[i] === '/' && text[i + 1] === '/') {
+      result += `<span class="hl-comment">${esc(text.slice(i))}</span>`
+      break
+    }
+    if (text[i] === '/' && text[i + 1] === '*') {
+      const end = text.indexOf('*/', i + 2)
+      const j = end >= 0 ? end + 2 : text.length
+      result += `<span class="hl-comment">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+    if (/[a-zA-Z_$]/.test(text[i])) {
+      let j = i
+      while (j < text.length && /[a-zA-Z0-9_$]/.test(text[j])) j++
+      const word = text.slice(i, j)
+      const cls = wordClass(word)
+      result += cls ? `<span class="${cls}">${esc(word)}</span>` : esc(word)
+      i = j
+      continue
+    }
+    if (/\d/.test(text[i])) {
+      let j = i
+      while (j < text.length && /[\d.xXa-fA-F_]/.test(text[j])) j++
+      result += `<span class="hl-constant">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+    if (text[i] === '=' && text[i + 1] === '>') {
+      result += '<span class="hl-keyword">=&gt;</span>'
+      i += 2
+      continue
+    }
+    if (/[{}()\[\];:,=<>+\-*\/&|!?.@#%^~]/.test(text[i])) {
+      result += `<span class="hl-punctuation">${esc(text[i])}</span>`
+      i++
+      continue
+    }
+    result += esc(text[i])
+    i++
+  }
+
+  return result
+}
+</script>
+
+<template>
+  <div ref="rootEl" class="code-hl">
+    <div v-if="$slots.header || filename || lang" class="code-hl-header">
+      <slot name="header">
+        <span v-if="filename" class="code-hl-filename">{{ filename }}</span>
+        <span v-if="lang" class="code-hl-lang">{{ lang }}</span>
+      </slot>
+    </div>
+    <pre class="code-hl-content"><code><template v-for="(line, idx) in resolvedLines" :key="idx"><span
+          class="code-hl-line"
+          :class="[
+            line.type && line.type !== 'unchanged' ? `code-hl-line-${line.type}` : '',
+            highlightSet.has(line.num ?? idx + startLine) ? `code-hl-line-highlight code-hl-highlight-${highlightColor}` : '',
+          ]"
+        ><span v-if="showLineNumbers" class="code-hl-linenum">{{ line.num ?? '' }}</span><span v-if="line.prefix !== undefined" class="code-hl-prefix" :class="line.type ? `code-hl-prefix-${line.type}` : ''">{{ line.prefix }}</span><span class="code-hl-text" v-html="line.html ?? tokenize(line.text)"></span>
+</span></template></code></pre>
+  </div>
+</template>
+
+<style>
+.code-hl {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-code);
+  letter-spacing: normal;
+  word-spacing: normal;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background-color: var(--shiki-color-background, var(--color-bg-muted));
+}
+
+/* Header */
+.code-hl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--shiki-color-background, var(--color-bg-muted));
+}
+
+.code-hl-filename {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.code-hl-lang {
+  font-size: 0.8em;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Content - reset .slidev-layout pre overrides */
+.code-hl-content {
+  margin: 0;
+  padding: 0.25rem 0;
+  border-radius: 0;
+  overflow: auto;
+}
+
+.code-hl-content code {
+  display: block;
+}
+
+/* Line */
+.code-hl-line {
+  display: flex;
+  min-height: 1.4em;
+}
+
+/* Line numbers */
+.code-hl-linenum {
+  width: 2.5em;
+  text-align: right;
+  padding-right: 0.75em;
+  color: var(--color-text-tertiary);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* Diff prefix (+/-/space) */
+.code-hl-prefix {
+  width: 1.5em;
+  text-align: center;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.code-hl-prefix-removed {
+  color: var(--color-danger);
+  font-weight: var(--font-weight-bold);
+}
+
+.code-hl-prefix-added {
+  color: var(--color-success);
+  font-weight: var(--font-weight-bold);
+}
+
+.code-hl-prefix-modified {
+  color: var(--color-warning);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Code text */
+.code-hl-text {
+  flex: 1;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  color: var(--shiki-color-text, var(--color-text));
+}
+
+/* Diff line backgrounds */
+.code-hl-line-removed {
+  background-color: var(--color-danger-tint);
+}
+
+.code-hl-line-added {
+  background-color: var(--color-success-tint);
+}
+
+.code-hl-line-modified {
+  background-color: var(--color-warning-tint);
+}
+
+/* Highlight backgrounds */
+.code-hl-line-highlight.code-hl-highlight-primary {
+  background-color: var(--color-primary-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-success {
+  background-color: var(--color-success-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-warning {
+  background-color: var(--color-warning-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-danger {
+  background-color: var(--color-danger-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-info {
+  background-color: var(--color-info-tint);
+}
+
+/* Fallback syntax tokens (used while Shiki loads) */
+.hl-keyword { color: var(--shiki-token-keyword); }
+.hl-string { color: var(--shiki-token-string); }
+.hl-comment { color: var(--shiki-token-comment); font-style: italic; }
+.hl-constant { color: var(--shiki-token-constant); }
+.hl-punctuation { color: var(--shiki-token-punctuation); }
+</style>

package/components/ColorSwatch.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/**
+ * ColorSwatch primitive - displays a color variable with its resolved value.
+ *
+ * Automatically reads the actual CSS variable value at runtime.
+ * No hex props needed - resolves from --color-{name} directly.
+ *
+ * Usage:
+ *   <ColorSwatch name="primary" />
+ *   <ColorSwatch name="bg" />
+ *   <ColorSwatch name="success" />
+ */
+
+import { ref, computed, onMounted, watch } from 'vue'
+import { useIsDark } from '../composables/useColors'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const isDark = useIsDark()
+const resolvedColor = ref('')
+
+function getCssVarName(): string {
+  return `--color-${props.name}`
+}
+
+function parseRgb(raw: string): [number, number, number] | null {
+  raw = raw.trim()
+  if (raw.startsWith('#')) {
+    const hex = raw.length === 4
+      ? raw[1] + raw[1] + raw[2] + raw[2] + raw[3] + raw[3]
+      : raw.slice(1, 7)
+    return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)]
+  }
+  const m = raw.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (m) return [+m[1], +m[2], +m[3]]
+  return null
+}
+
+function relativeLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(c =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),
+  )
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+const isLightBg = computed(() => {
+  const rgb = parseRgb(resolvedColor.value)
+  if (!rgb) return false
+  return relativeLuminance(...rgb) > 0.2
+})
+
+function resolveColor() {
+  if (typeof document === 'undefined') return
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(getCssVarName())
+    .trim()
+  resolvedColor.value = value || '?'
+}
+
+onMounted(resolveColor)
+watch(() => [isDark.value, props.name], resolveColor)
+</script>
+
+<template>
+  <div
+    class="color-swatch"
+    :class="{ 'color-swatch-light': isLightBg }"
+    :style="{ backgroundColor: `var(${getCssVarName()})` }"
+  >
+    <div class="color-swatch-label">
+      {{ getCssVarName() }}
+      <span class="color-swatch-hex">{{ resolvedColor }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.color-swatch {
+  height: 5rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: flex-end;
+  padding: 0.5rem;
+  border: 1px solid var(--color-border);
+  color: var(--color-white);
+}
+
+.color-swatch:has(.color-swatch-label) {
+  position: relative;
+}
+
+.color-swatch-label {
+  font-size: var(--font-size-small);
+  font-family: var(--font-mono);
+  line-height: 1.3;
+  text-shadow: 0 1px 3px color-mix(in srgb, var(--color-black) 30%, transparent);
+}
+
+.color-swatch-hex {
+  display: block;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.color-swatch-light {
+  color: var(--color-drac-fg-900);
+}
+
+.color-swatch-light .color-swatch-label {
+  text-shadow: 0 1px 3px color-mix(in srgb, var(--color-white) 40%, transparent);
+}
+</style>