@troshab/slidev-theme-troshab 0.1.0

package/components/StyledList.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+/**
+ * StyledList primitive — themed list markers, columns, and formatting.
+ *
+ * Wraps markdown list content and applies styled markers.
+ *
+ * <StyledList marker="check" color="success">
+ *
+ * - Item one
+ * - Item two
+ *
+ * </StyledList>
+ */
+
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar } from '../composables/useColors'
+
+const props = withDefaults(defineProps<{
+  marker?: 'disc' | 'number' | 'check' | 'arrow' | 'star' | 'none'
+  color?: SemanticColor
+  size?: 'sm' | 'md' | 'lg'
+  columns?: 1 | 2
+  indent?: 'normal' | 'hanging'
+  align?: 'left' | 'center'
+}>(), {
+  marker: 'disc',
+  color: 'primary',
+  size: 'md',
+  columns: 1,
+  indent: 'normal',
+  align: 'left',
+})
+</script>
+
+<template>
+  <div
+    class="styled-list"
+    :class="[
+      `styled-list-${marker}`,
+      `styled-list-${size}`,
+      { 'styled-list-cols-2': columns === 2 },
+      { 'styled-list-hanging': indent === 'hanging' },
+      { 'styled-list-center': align === 'center' },
+    ]"
+    :style="{ '--marker-color': semanticColorVar[color] }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.styled-list ul,
+.styled-list ol {
+  list-style: none;
+  margin-inline-start: 0;
+  max-width: none;
+}
+
+.styled-list li {
+  list-style: none;
+  padding-left: 2em;
+  position: relative;
+  margin-block: 0.5em;
+}
+
+/* Size variants */
+.styled-list-sm li { font-size: var(--font-size-small); }
+.styled-list-md li { font-size: var(--font-size-base); }
+.styled-list-lg li { font-size: calc(var(--font-size-base) * 1.15); }
+
+/* Marker: disc (default) */
+.styled-list-disc ul { margin-inline-start: 1.5em; }
+.styled-list-disc li { list-style: disc; padding-left: 0; }
+
+/* Marker: check */
+.styled-list-check li::before {
+  content: '\2713';
+  position: absolute;
+  left: 0;
+  color: var(--marker-color);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Marker: arrow */
+.styled-list-arrow li::before {
+  content: '\2192';
+  position: absolute;
+  left: 0;
+  color: var(--marker-color);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Marker: star */
+.styled-list-star li::before {
+  content: '\2605';
+  position: absolute;
+  left: 0;
+  color: var(--marker-color);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Marker: number */
+.styled-list-number ul,
+.styled-list-number ol {
+  counter-reset: styled-list;
+}
+
+.styled-list-number li {
+  counter-increment: styled-list;
+}
+
+.styled-list-number li::before {
+  content: counter(styled-list) '.';
+  position: absolute;
+  left: 0;
+  color: var(--marker-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
+  width: 1.5em;
+  text-align: center;
+}
+
+/* Marker: none */
+.styled-list-none li { padding-left: 0; }
+.styled-list-none li::before { display: none; }
+
+/* Columns */
+.styled-list-cols-2 ul,
+.styled-list-cols-2 ol {
+  columns: 2;
+  column-gap: var(--space-xl);
+}
+
+.styled-list-cols-2 li {
+  break-inside: avoid;
+}
+
+/* Hanging indent (for references) */
+.styled-list-hanging li {
+  padding-left: 2em;
+  text-indent: -2em;
+  line-height: var(--line-height-reading);
+}
+
+.styled-list-hanging li::before { display: none; }
+
+/* Center alignment */
+.styled-list-center ul,
+.styled-list-center ol {
+  text-align: center;
+}
+
+.styled-list-center li {
+  margin-block: 0.75em;
+}
+</style>

package/components/StyledText.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+/**
+ * StyledText — universal themed text component.
+ *
+ * Replaces markdown headings/text when you need color, effects, or formatting.
+ * Use plain markdown (#, ##, ###, paragraphs) when no styling is needed.
+ *
+ * Heading (renders <h1>/<h2>/<h3>):
+ *   <StyledText tag="h1" color="primary">Colored Title</StyledText>
+ *   <StyledText tag="h2" align="center">Centered H2</StyledText>
+ *
+ * Block (default, renders <p>):
+ *   <StyledText color="secondary">Subtitle text</StyledText>
+ *   <StyledText size="small" color="tertiary">Caption</StyledText>
+ *
+ * Inline (renders <span>):
+ *   <StyledText inline color="primary">colored word</StyledText>
+ *   <StyledText inline highlight="warning">highlighted</StyledText>
+ *   <StyledText inline kbd>Ctrl+S</StyledText>
+ *   <StyledText inline gradient>fancy text</StyledText>
+ *   <StyledText inline bold color="danger">bold danger</StyledText>
+ *
+ * Spoiler (auto-integrates with Slidev v-click):
+ *   <StyledText inline spoiler>hidden answer</StyledText>
+ *   Automatically registers as next v-click. Reveals on slide advance,
+ *   re-blurs on backward navigation. Falls back to manual click outside Slidev.
+ */
+
+import { ref, computed, inject, onMounted, onUnmounted, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+import type { TextColor } from '../composables/useColors'
+import { textColorVar, semanticColorVar, gradientVar } from '../composables/useColors'
+
+type HighlightColor = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type TagName = 'h1' | 'h2' | 'h3' | 'p' | 'span'
+
+const props = defineProps<{
+  // HTML tag (h1/h2/h3/p/span). Default: p. `inline` is shorthand for span.
+  tag?: TagName
+  inline?: boolean
+  // Block-only props
+  align?: 'left' | 'center' | 'right'
+  // Shared props
+  color?: TextColor
+  size?: 'small' | 'base' | 'large'
+  // Inline formatting props
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+  strike?: boolean
+  uppercase?: boolean
+  mono?: boolean
+  gradient?: boolean
+  kbd?: boolean
+  highlight?: HighlightColor
+  spoiler?: boolean
+}>()
+
+const resolvedTag = computed<TagName>(() => {
+  if (props.tag) return props.tag
+  return props.inline ? 'span' : 'p'
+})
+
+const isInline = computed(() => resolvedTag.value === 'span')
+const isHeading = computed(() => ['h1', 'h2', 'h3'].includes(resolvedTag.value))
+
+// --- Spoiler: auto v-click integration ---
+const rootEl = ref<HTMLElement | null>(null)
+const clicksContext = inject<Ref<any>>('$$slidev-clicks-context', ref(null))
+const revealed = ref(false)
+const hasSlidevClicks = computed(() => !!clicksContext.value?.calculate)
+
+if (props.spoiler) {
+  onMounted(() => {
+    const ctx = clicksContext.value
+    if (ctx?.calculate && rootEl.value) {
+      const info = ctx.calculate('+1')
+      if (info) {
+        ctx.register(rootEl.value, info)
+        // Track click state reactively — info.isActive is a computed ref
+        watchEffect(() => {
+          revealed.value = info.isActive.value
+        })
+      }
+    }
+  })
+
+  onUnmounted(() => {
+    if (clicksContext.value?.unregister && rootEl.value) {
+      clicksContext.value.unregister(rootEl.value)
+    }
+  })
+}
+
+function handleSpoilerClick(e: Event) {
+  if (!props.spoiler) return
+  if (hasSlidevClicks.value) return
+  e.stopPropagation()
+  revealed.value = !revealed.value
+}
+
+function handleSpoilerKey(e: KeyboardEvent) {
+  if (!props.spoiler || hasSlidevClicks.value) return
+  if (e.key === ' ') e.preventDefault()
+  revealed.value = !revealed.value
+}
+
+// --- CSS variables ---
+const cssVars = computed(() => {
+  const vars: Record<string, string> = {}
+  if (props.color && props.color !== 'inherit' && !props.gradient)
+    vars['--text-color'] = textColorVar[props.color]
+  if (props.gradient && props.color && props.color !== 'inherit')
+    vars['--text-gradient'] = gradientVar[props.color as keyof typeof gradientVar] || gradientVar.primary
+  if (props.highlight)
+    vars['--text-highlight-bg'] = semanticColorVar[props.highlight]
+  return vars
+})
+
+const sizeMap: Record<string, string> = {
+  base: 'var(--font-size-base)',
+  small: 'var(--font-size-small)',
+  large: 'var(--font-size-h2)',
+}
+</script>
+
+<template>
+  <component
+    ref="rootEl"
+    :is="resolvedTag"
+    :class="[
+      isInline ? 'styled-text-inline' : 'styled-text-block',
+      {
+        'is-bold': bold,
+        'is-italic': italic,
+        'is-underline': underline,
+        'is-strike': strike,
+        'is-spoiler': spoiler && !revealed,
+        'is-spoiler-revealed': spoiler && revealed,
+        'is-mono': mono,
+        'is-uppercase': uppercase,
+        'is-gradient': gradient,
+        'is-highlight': highlight,
+        'is-kbd': kbd,
+        'is-size-small': size === 'small',
+        'is-size-large': size === 'large',
+      },
+    ]"
+    :style="{
+      ...cssVars,
+      ...(isInline ? {} : {
+        textAlign: align || undefined,
+        ...(isHeading ? {} : { fontSize: sizeMap[size || 'base'] }),
+      }),
+    }"
+    :role="spoiler && !hasSlidevClicks ? 'button' : undefined"
+    :tabindex="spoiler && !hasSlidevClicks ? 0 : undefined"
+    :aria-label="spoiler && !revealed ? 'Spoiler — click to reveal' : undefined"
+    @click="handleSpoilerClick"
+    @keydown.enter="handleSpoilerKey"
+    @keydown.space="handleSpoilerKey"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+/* === Block mode (default) === */
+.styled-text-block {
+  color: var(--text-color, inherit);
+}
+
+/* === Inline mode === */
+.styled-text-inline {
+  color: var(--text-color, inherit);
+}
+
+/* --- Formatting --- */
+.is-bold { font-weight: 700; }
+.is-italic { font-style: italic; }
+.is-underline { text-decoration: underline; text-underline-offset: 0.15em; }
+.is-strike { text-decoration: line-through; }
+
+.is-underline.is-strike {
+  text-decoration: underline line-through;
+  text-underline-offset: 0.15em;
+}
+
+/* --- Sizes (inline mode) --- */
+.styled-text-inline.is-size-small { font-size: var(--font-size-small); }
+.styled-text-inline.is-size-large { font-size: var(--font-size-h2); }
+
+/* --- Spoiler --- */
+.is-spoiler {
+  filter: blur(0.45em);
+  cursor: pointer;
+  transition: filter var(--duration-moderate, 240ms) var(--ease-standard, ease);
+  user-select: none;
+  border-radius: 0.15em;
+  background: var(--color-bg-muted);
+  padding: 0.1em 0.25em;
+  margin: 0 0.1em;
+}
+
+.is-spoiler:hover {
+  filter: blur(0.3em);
+}
+
+.is-spoiler:focus-visible {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.is-spoiler-revealed {
+  cursor: default;
+  user-select: auto;
+  border-radius: 0.15em;
+  background: var(--color-bg-muted);
+  padding: 0.1em 0.25em;
+  margin: 0 0.1em;
+  animation: spoiler-reveal var(--duration-moderate, 240ms) var(--ease-standard, ease);
+}
+
+@keyframes spoiler-reveal {
+  from { filter: blur(0.45em); }
+  to { filter: blur(0); }
+}
+
+/* --- Monospace --- */
+.is-mono {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.9em;
+  background: var(--color-bg-muted);
+  padding: 0.1em 0.35em;
+  border-radius: 0.2em;
+  margin: 0 0.1em;
+}
+
+/* --- Uppercase --- */
+.is-uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* --- Gradient text --- */
+.is-gradient {
+  background: var(--text-gradient, var(--gradient-primary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* --- Highlight --- */
+.is-highlight {
+  background-color: color-mix(in srgb, var(--text-highlight-bg) 20%, transparent);
+  padding: 0.1em 0.25em;
+  border-radius: 0.2em;
+  border-bottom: 2px solid var(--text-highlight-bg);
+  margin: 0 0.1em;
+}
+
+/* --- Keyboard key --- */
+.is-kbd {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.85em;
+  background: var(--color-bg-soft);
+  border: 1px solid var(--color-border);
+  border-bottom-width: 2px;
+  padding: 0.1em 0.4em;
+  border-radius: 0.25em;
+  box-shadow: 0 1px 0 var(--color-border);
+  white-space: nowrap;
+  margin: 0 0.1em;
+}
+</style>

package/components/SwotGrid.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * SwotGrid widget — SWOT analysis built on top of MatrixGrid.
+ *
+ * <SwotGrid
+ *   :strengths="['Strong brand', 'Expert team']"
+ *   :weaknesses="['Limited reach', 'High cost']"
+ *   :opportunities="['New markets', 'Partnerships']"
+ *   :threats="['Competition', 'Regulation']"
+ * />
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  strengths: string[]
+  weaknesses: string[]
+  opportunities: string[]
+  threats: string[]
+  showAxes?: boolean
+}>(), {
+  showAxes: true,
+})
+
+const cells = computed(() => [
+  { title: 'Strengths', items: props.strengths, color: 'success' as const },
+  { title: 'Weaknesses', items: props.weaknesses, color: 'danger' as const },
+  { title: 'Opportunities', items: props.opportunities, color: 'primary' as const },
+  { title: 'Threats', items: props.threats, color: 'warning' as const },
+])
+</script>
+
+<template>
+  <div class="swot-wrapper" :class="{ 'swot-with-axes': showAxes }">
+    <div v-if="showAxes" class="swot-axis-top">
+      <span class="swot-axis-label">Helpful</span>
+      <span class="swot-axis-label">Harmful</span>
+    </div>
+    <div class="swot-body">
+      <div v-if="showAxes" class="swot-axis-left">
+        <span class="swot-axis-label-vertical">Internal</span>
+        <span class="swot-axis-label-vertical">External</span>
+      </div>
+      <MatrixGrid :cells="cells" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.swot-wrapper {
+  width: 100%;
+}
+
+.swot-axis-top {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  text-align: center;
+  padding-bottom: var(--space-xs);
+}
+
+.swot-with-axes .swot-axis-top {
+  margin-left: 2rem;
+}
+
+.swot-axis-label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.swot-body {
+  display: flex;
+}
+
+.swot-axis-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 2rem;
+  flex-shrink: 0;
+}
+
+.swot-axis-label-vertical {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+  text-align: center;
+}
+
+.swot-body :deep(.matrix-grid) {
+  flex: 1;
+  margin-top: 0;
+}
+</style>

package/components/Tags.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Tags component - теги/мітки
+ *
+ * Використання:
+ * <Tags :items="['Vue', 'TypeScript', 'Slidev']" />
+ */
+
+defineProps<{
+  items: string[]
+}>()
+</script>
+
+<template>
+  <div class="tags-container">
+    <span v-for="item in items" :key="item" class="tag">
+      {{ item }}
+    </span>
+  </div>
+</template>