nuxt-ui-basekit 0.1.0

package/app/components/BaseKitDataTable.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts" generic="T extends object">
+import { computed, ref, useSlots, watch } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+import { NuxtLink } from '#components'
+
+/**
+ * Wiederverwendbare Admin-Tabelle: sortierbare Spalten, Textfilter und ein
+ * „Anlegen"-Button oben rechts. Client-seitig (Daten werden übergeben).
+ *
+ * - `columns` definiert Spalten; `sortable` macht den Kopf klickbar.
+ * - Zellen rendern per Default `row[key]`; überschreibbar via Slot
+ *   `#cell-<key>="{ row, value }"`.
+ * - Zeilen-Aktionen über den Slot `#actions="{ row }"` (rechte Spalte).
+ * - `row-link` macht die Namensspalte anklickbar: die Funktion bekommt die
+ *   Zeile und gibt ihr Ziel zurück (oder `null`, wenn diese Zeile keins hat).
+ *   Welche Spalte den Link trägt, sagt `link-column` — ohne Angabe die erste.
+ * - Zusätzliche Filter über den Slot `#toolbar` (rechts neben der Suche).
+ * - „Anlegen": `create-label` + `@create` rendert den Button oben rechts.
+ * - Paginierung client-seitig: Seitengröße über `page-size` /
+ *   `page-size-options` (Default 25; Auswahl 10/25/50/100/250/Alle).
+ *
+ * Generisch über den Zeilentyp `T` — Slots liefern `row` typisiert zurück.
+ */
+export interface BaseKitDataColumn {
+  key: string
+  label: string
+  sortable?: boolean
+  align?: 'left' | 'right'
+  class?: string
+}
+
+/** Seitengröße: feste Zeilenzahl oder `'all'` für „ohne Limit". */
+export type BaseKitPageSize = number | 'all'
+
+const props = withDefaults(defineProps<{
+  columns: BaseKitDataColumn[]
+  rows: T[]
+  rowKey?: string
+  searchable?: boolean
+  /** Felder, die die Suche durchsucht (Default: alle Spalten-Keys). */
+  searchKeys?: string[]
+  searchPlaceholder?: string
+  createLabel?: string
+  loading?: boolean
+  emptyLabel?: string
+  /** Anfangs gewählte Seitengröße. */
+  pageSize?: BaseKitPageSize
+  /** Auswahlmöglichkeiten für die Seitengröße. */
+  pageSizeOptions?: BaseKitPageSize[]
+  /**
+   * Ziel je Zeile. Gesetzt, macht es den Namen anklickbar — der Weg, den man
+   * zuerst probiert. Die Aktionsspalte bleibt trotzdem: sie zeigt, was es
+   * außer „öffnen" noch gibt.
+   */
+  rowLink?: (row: T) => string | null | undefined
+  /** Spalte, die den Link trägt. Ohne Angabe die erste. */
+  linkColumn?: string
+}>(), {
+  rowKey: 'id',
+  searchable: true,
+  loading: false,
+  pageSize: 25,
+  pageSizeOptions: () => [10, 25, 50, 100, 250, 'all'],
+})
+
+const emit = defineEmits<{ create: [] }>()
+
+const labels = useBaseKitLabels()
+const slots = useSlots()
+const hasActions = computed(() => !!slots.actions)
+
+const search = ref('')
+const sortKey = ref<string | null>(null)
+const sortDir = ref<'asc' | 'desc'>('asc')
+
+const searchFields = computed(() => props.searchKeys ?? props.columns.map(c => c.key))
+
+/** Die verlinkte Spalte — explizit gesetzt oder die erste. */
+const linkKey = computed(() => props.linkColumn ?? props.columns[0]?.key ?? null)
+
+function rowTarget(row: T, key: string): string | null {
+  if (!props.rowLink || key !== linkKey.value) return null
+  const target = props.rowLink(row)
+  return target || null
+}
+
+/** Wert einer Zelle — internes String-Indexing über den generischen Zeilentyp. */
+function cell(row: T, key: string): unknown {
+  return (row as Record<string, unknown>)[key]
+}
+
+const filtered = computed<T[]>(() => {
+  const q = search.value.trim().toLowerCase()
+  if (!q) return props.rows
+  return props.rows.filter(row =>
+    searchFields.value.some((key) => {
+      const v = cell(row, key)
+      return v != null && String(v).toLowerCase().includes(q)
+    }),
+  )
+})
+
+const displayed = computed<T[]>(() => {
+  if (!sortKey.value) return filtered.value
+  const key = sortKey.value
+  const dir = sortDir.value === 'asc' ? 1 : -1
+  return [...filtered.value].sort((a, b) => compare(cell(a, key), cell(b, key)) * dir)
+})
+
+// — Paginierung ------------------------------------------------------------
+const page = ref(1)
+const pageSize = ref<BaseKitPageSize>(props.pageSize)
+
+const total = computed(() => displayed.value.length)
+const totalPages = computed(() =>
+  pageSize.value === 'all' ? 1 : Math.max(1, Math.ceil(total.value / pageSize.value)),
+)
+
+const paged = computed<T[]>(() => {
+  if (pageSize.value === 'all') return displayed.value
+  const start = (page.value - 1) * pageSize.value
+  return displayed.value.slice(start, start + pageSize.value)
+})
+
+const rangeFrom = computed(() =>
+  total.value === 0 ? 0 : pageSize.value === 'all' ? 1 : (page.value - 1) * pageSize.value + 1,
+)
+const rangeTo = computed(() =>
+  pageSize.value === 'all' ? total.value : Math.min(page.value * pageSize.value, total.value),
+)
+
+const pageSizeItems = computed(() =>
+  props.pageSizeOptions.map(opt => ({
+    label: opt === 'all' ? labels.value.all : String(opt),
+    value: opt,
+  })),
+)
+
+// Suche oder Seitengröße geändert → zurück auf Seite 1.
+watch([search, pageSize], () => {
+  page.value = 1
+})
+
+// Datenbestand geschrumpft (z. B. Filter) → Seite in gültigen Bereich klemmen.
+watch(totalPages, (pages) => {
+  if (page.value > pages) page.value = pages
+})
+
+function compare(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0
+  if (a == null) return -1
+  if (b == null) return 1
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b))
+}
+
+function toggleSort(col: BaseKitDataColumn): void {
+  if (!col.sortable) return
+  if (sortKey.value !== col.key) {
+    sortKey.value = col.key
+    sortDir.value = 'asc'
+  }
+  else if (sortDir.value === 'asc') {
+    sortDir.value = 'desc'
+  }
+  else {
+    sortKey.value = null // dritter Klick: Sortierung aus
+  }
+}
+
+function sortIcon(col: BaseKitDataColumn): string | null {
+  if (sortKey.value !== col.key) return null
+  return sortDir.value === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Toolbar: Suche links, Filter/Anlegen rechts -->
+    <div v-if="searchable || $slots.toolbar || createLabel" class="flex flex-wrap items-center justify-between gap-3">
+      <UInput
+        v-if="searchable"
+        v-model="search"
+        icon="i-lucide-search"
+        :placeholder="searchPlaceholder ?? labels.search"
+        class="w-72 max-w-full"
+      />
+      <span v-else />
+
+      <div class="flex flex-wrap items-center gap-2">
+        <slot name="toolbar" />
+        <UButton v-if="createLabel" color="primary" icon="i-lucide-plus" @click="emit('create')">
+          {{ createLabel }}
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Zustände -->
+    <div v-if="loading" class="py-12 text-center text-muted">
+      <UIcon name="i-lucide-loader-2" class="size-6 animate-spin" />
+    </div>
+    <div v-else-if="!displayed.length">
+      <slot name="empty">
+        <BaseKitEmptyState
+          :variant="search.trim() ? 'search' : 'empty'"
+          :title="search.trim() ? labels.noResults : (emptyLabel ?? labels.empty)"
+          :description="search.trim() ? labels.noResultsHint : undefined"
+        />
+      </slot>
+    </div>
+
+    <!-- Tabelle -->
+    <table v-else class="w-full text-sm">
+      <thead class="border-b border-neutral-200 text-left text-muted dark:border-neutral-800">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="py-2 font-medium"
+            :class="[col.align === 'right' ? 'text-right' : '', col.class]"
+            :aria-sort="col.sortable ? (sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none') : undefined"
+          >
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="inline-flex cursor-pointer select-none items-center gap-1"
+              :class="col.align === 'right' ? 'justify-end' : ''"
+              @click="toggleSort(col)"
+            >
+              {{ col.label }}
+              <UIcon v-if="sortIcon(col)" :name="sortIcon(col)!" class="size-3.5" />
+            </button>
+            <span v-else class="inline-flex items-center gap-1" :class="col.align === 'right' ? 'justify-end' : ''">
+              {{ col.label }}
+            </span>
+          </th>
+          <th v-if="hasActions" class="py-2 text-right font-medium" />
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-neutral-100 dark:divide-neutral-800">
+        <tr
+          v-for="row in paged"
+          :key="String(cell(row, rowKey))"
+          class="hover:bg-neutral-50 dark:hover:bg-neutral-900/50"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="py-2"
+            :class="[col.align === 'right' ? 'text-right' : '', col.class]"
+          >
+            <component
+              :is="rowTarget(row, col.key) ? NuxtLink : 'span'"
+              :to="rowTarget(row, col.key) ?? undefined"
+              :class="rowTarget(row, col.key) ? 'font-medium hover:text-primary-700 dark:hover:text-primary-300' : undefined"
+            >
+              <slot :name="`cell-${col.key}`" :row="row" :value="cell(row, col.key)">
+                {{ cell(row, col.key) ?? '—' }}
+              </slot>
+            </component>
+          </td>
+          <td v-if="hasActions" class="py-2 text-right">
+            <div class="flex justify-end gap-2">
+              <slot name="actions" :row="row" />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- Fußzeile: Seitengröße links, Bereich + Blättern rechts -->
+    <div
+      v-if="!loading && displayed.length"
+      class="flex flex-wrap items-center justify-between gap-3 pt-1 text-sm text-muted"
+    >
+      <div class="flex items-center gap-2">
+        <span>{{ labels.perPage }}</span>
+        <USelect v-model="pageSize" :items="pageSizeItems" size="sm" class="w-24" />
+      </div>
+      <div class="flex items-center gap-3">
+        <span>{{ labels.paginationRange({ from: rangeFrom, to: rangeTo, total }) }}</span>
+        <UPagination
+          v-if="totalPages > 1"
+          v-model:page="page"
+          :total="total"
+          :items-per-page="pageSize === 'all' ? total : pageSize"
+          :sibling-count="1"
+          size="sm"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/BaseKitEmptyState.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * BaseKitEmptyState — einheitlicher Leerzustand: Icon + handlungsorientierte
+ * Überschrift + optionaler Erklärtext + optionale Primäraktion (Default-Slot).
+ *
+ * `variant` trennt die beiden Fälle aus docs/18:
+ * - `empty`  → „noch nichts angelegt" (führt zum ersten Schritt)
+ * - `search` → „kein Suchergebnis" (bestätigt die Suche, bietet Korrektur)
+ *
+ * Das passende Icon wird je Variante gewählt, kann per `icon` überschrieben
+ * werden. Aktion (z. B. ein `UButton`) kommt in den Default-Slot.
+ */
+withDefaults(defineProps<{
+  title: string
+  description?: string
+  icon?: string
+  variant?: 'empty' | 'search'
+}>(), {
+  variant: 'empty',
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3 py-12 text-center">
+    <UIcon
+      :name="icon ?? (variant === 'search' ? 'i-lucide-search-x' : 'i-lucide-inbox')"
+      class="size-10 text-dimmed"
+    />
+    <div>
+      <p class="font-medium text-highlighted">
+        {{ title }}
+      </p>
+      <p v-if="description" class="mx-auto mt-1 max-w-sm text-sm text-muted">
+        {{ description }}
+      </p>
+    </div>
+    <slot />
+  </div>
+</template>

package/app/components/BaseKitFileUpload.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+
+/**
+ * Datei-Auswahl per Klick oder Drag & Drop. Reicht die ausgewählten Dateien
+ * über `select` nach oben — kümmert sich NICHT selbst um den Upload (das macht
+ * der Aufrufer, je nach Bild/Video unterschiedlich).
+ */
+const props = withDefaults(defineProps<{
+  accept?: string
+  multiple?: boolean
+  label?: string
+  disabled?: boolean
+}>(), {
+  accept: '*/*',
+  multiple: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{ select: [files: File[]] }>()
+
+const labels = useBaseKitLabels()
+const input = ref<HTMLInputElement | null>(null)
+const dragging = ref(false)
+
+function pick(): void {
+  if (!props.disabled) input.value?.click()
+}
+
+function onChange(event: Event): void {
+  const files = Array.from((event.target as HTMLInputElement).files ?? [])
+  if (files.length) emit('select', files)
+  // Zurücksetzen, damit dieselbe Datei erneut gewählt werden kann.
+  if (input.value) input.value.value = ''
+}
+
+function onDrop(event: DragEvent): void {
+  dragging.value = false
+  if (props.disabled) return
+  const files = Array.from(event.dataTransfer?.files ?? [])
+  if (files.length) emit('select', props.multiple ? files : files.slice(0, 1))
+}
+</script>
+
+<template>
+  <div
+    class="basekit-upload"
+    :class="{ 'basekit-upload--drag': dragging, 'basekit-upload--disabled': disabled }"
+    role="button"
+    tabindex="0"
+    @click="pick"
+    @keydown.enter.prevent="pick"
+    @keydown.space.prevent="pick"
+    @dragover.prevent="dragging = true"
+    @dragleave.prevent="dragging = false"
+    @drop.prevent="onDrop"
+  >
+    <input
+      ref="input"
+      type="file"
+      class="basekit-upload__input"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onChange"
+    >
+    <UIcon name="i-lucide-upload-cloud" class="basekit-upload__icon" />
+    <span class="basekit-upload__label">{{ label ?? labels.upload }}</span>
+  </div>
+</template>
+
+<style scoped>
+.basekit-upload {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 6px; min-height: 110px; padding: 16px; cursor: pointer; text-align: center;
+  border: 1px dashed var(--basekit-border-strong, #d6dbe4); border-radius: 12px;
+  color: var(--basekit-text-muted, #667085); background: var(--basekit-surface, #fff);
+  transition: border-color .12s, background .12s;
+}
+.basekit-upload:hover, .basekit-upload--drag { border-color: var(--basekit-accent, #2563eb); background: var(--basekit-surface-muted, #f7f9fc); }
+.basekit-upload--disabled { opacity: .5; cursor: not-allowed; }
+.basekit-upload__input { display: none; }
+.basekit-upload__icon { font-size: 1.5rem; }
+.basekit-upload__label { font-size: 0.8125rem; font-weight: 500; }
+
+/* Dark-Mode: die Light-Fallbacks des Dropfelds überschreiben. */
+:where(.dark) .basekit-upload { border-color: #1f2937; background: #0f172a; color: #9ca3af; }
+:where(.dark) .basekit-upload:hover, :where(.dark) .basekit-upload--drag { background: #1f2937; }
+</style>

package/app/components/BaseKitIconPicker.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+
+/**
+ * Icon-Auswahl als Form-Element für `i-lucide-*`-Namen — reine Anzeige + Picker,
+ * kein Freitext. Der Trigger zeigt das gewählte Icon (oder einen Platzhalter);
+ * ein Klick öffnet ein Popover mit Suche und einem Raster kuratierter Icons.
+ * `modelValue` ist der Icon-Name; leerer String bedeutet „kein Icon".
+ *
+ * Bewusst kuratiert statt des kompletten Iconify-Satzes — das hält den Bundle
+ * klein und braucht keine zusätzliche Datenquelle. Fehlt mal ein Icon, wird die
+ * Liste unten einfach ergänzt.
+ */
+const props = defineProps<{ modelValue: string }>()
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const labels = useBaseKitLabels()
+
+const open = ref(false)
+const search = ref('')
+
+// Kuratierte, für Navigation/Inhalte typische Lucide-Icons.
+const ICONS: string[] = [
+  'i-lucide-home', 'i-lucide-layout-dashboard', 'i-lucide-layout-grid', 'i-lucide-list',
+  'i-lucide-file-text', 'i-lucide-file', 'i-lucide-files', 'i-lucide-folder',
+  'i-lucide-folder-open', 'i-lucide-newspaper', 'i-lucide-book-open', 'i-lucide-book',
+  'i-lucide-graduation-cap', 'i-lucide-library', 'i-lucide-calendar', 'i-lucide-calendar-days',
+  'i-lucide-clock', 'i-lucide-image', 'i-lucide-images', 'i-lucide-video',
+  'i-lucide-film', 'i-lucide-music', 'i-lucide-play', 'i-lucide-camera',
+  'i-lucide-mic', 'i-lucide-headphones', 'i-lucide-users', 'i-lucide-user',
+  'i-lucide-user-round', 'i-lucide-contact', 'i-lucide-mail', 'i-lucide-phone',
+  'i-lucide-map-pin', 'i-lucide-map', 'i-lucide-compass', 'i-lucide-globe',
+  'i-lucide-info', 'i-lucide-help-circle', 'i-lucide-circle-help', 'i-lucide-settings',
+  'i-lucide-cog', 'i-lucide-wrench', 'i-lucide-hammer', 'i-lucide-plug',
+  'i-lucide-shield', 'i-lucide-lock', 'i-lucide-key', 'i-lucide-star',
+  'i-lucide-heart', 'i-lucide-bookmark', 'i-lucide-tag', 'i-lucide-tags',
+  'i-lucide-flag', 'i-lucide-award', 'i-lucide-trophy', 'i-lucide-target',
+  'i-lucide-lightbulb', 'i-lucide-sparkles', 'i-lucide-shopping-cart', 'i-lucide-shopping-bag',
+  'i-lucide-package', 'i-lucide-gift', 'i-lucide-store', 'i-lucide-briefcase',
+  'i-lucide-building', 'i-lucide-building-2', 'i-lucide-factory', 'i-lucide-warehouse',
+  'i-lucide-message-square', 'i-lucide-messages-square', 'i-lucide-message-circle', 'i-lucide-bell',
+  'i-lucide-megaphone', 'i-lucide-search', 'i-lucide-link', 'i-lucide-external-link',
+  'i-lucide-download', 'i-lucide-upload', 'i-lucide-share-2', 'i-lucide-table',
+  'i-lucide-columns-3', 'i-lucide-rows-3', 'i-lucide-kanban', 'i-lucide-chart-bar',
+  'i-lucide-chart-line', 'i-lucide-chart-pie', 'i-lucide-trending-up', 'i-lucide-activity',
+  'i-lucide-euro', 'i-lucide-credit-card', 'i-lucide-receipt', 'i-lucide-percent',
+  'i-lucide-wallet', 'i-lucide-banknote', 'i-lucide-leaf', 'i-lucide-tree-pine',
+  'i-lucide-sun', 'i-lucide-moon', 'i-lucide-cloud', 'i-lucide-droplet',
+  'i-lucide-flame', 'i-lucide-zap', 'i-lucide-wifi', 'i-lucide-rss',
+  'i-lucide-clipboard', 'i-lucide-clipboard-list', 'i-lucide-check', 'i-lucide-check-circle',
+  'i-lucide-circle-check', 'i-lucide-bookmark-check', 'i-lucide-heart-handshake', 'i-lucide-handshake',
+  'i-lucide-hand-helping', 'i-lucide-baby', 'i-lucide-dumbbell', 'i-lucide-bike',
+  'i-lucide-car', 'i-lucide-bus', 'i-lucide-plane', 'i-lucide-ship',
+  'i-lucide-utensils', 'i-lucide-coffee', 'i-lucide-cake', 'i-lucide-pizza',
+]
+
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  if (!q) return ICONS
+  return ICONS.filter(name => name.includes(q))
+})
+
+function pick(name: string): void {
+  emit('update:modelValue', name)
+  open.value = false
+}
+
+function clear(): void {
+  emit('update:modelValue', '')
+  open.value = false
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open">
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 rounded-md border border-default px-3 py-2 text-left transition-colors hover:bg-elevated"
+    >
+      <span class="flex size-6 shrink-0 items-center justify-center">
+        <UIcon v-if="props.modelValue" :name="props.modelValue" class="size-5" />
+        <UIcon v-else name="i-lucide-image" class="size-5 text-dimmed" />
+      </span>
+      <span class="flex-1 truncate text-sm" :class="{ 'text-muted': !props.modelValue }">
+        {{ props.modelValue || labels.iconChoose }}
+      </span>
+      <UIcon name="i-lucide-chevron-down" class="size-4 shrink-0 text-dimmed" />
+    </button>
+
+    <template #content>
+      <div class="w-72 space-y-2 p-3">
+        <UInput
+          v-model="search"
+          icon="i-lucide-search"
+          size="sm"
+          autofocus
+          :placeholder="labels.search"
+        />
+        <div class="grid max-h-56 grid-cols-6 gap-1 overflow-y-auto">
+          <button
+            v-for="name in filtered"
+            :key="name"
+            type="button"
+            class="flex aspect-square items-center justify-center rounded hover:bg-elevated"
+            :class="{ 'bg-primary/10 ring-1 ring-primary': name === props.modelValue }"
+            :title="name"
+            @click="pick(name)"
+          >
+            <UIcon :name="name" class="size-5" />
+          </button>
+        </div>
+        <p v-if="filtered.length === 0" class="text-xs text-muted">
+          {{ labels.iconEmpty }}
+        </p>
+        <div v-if="props.modelValue" class="border-t border-default pt-2">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            icon="i-lucide-x"
+            @click="clear"
+          >
+            {{ labels.iconClear }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/BaseKitMarkdownEditor.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import { useBaseKitLabels } from '../composables/useBaseKit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import { renderMarkdown } from '../utils/markdown'
+import { htmlToMarkdown, prepareHtmlToMarkdown } from '../utils/html-to-markdown'
+
+/**
+ * WYSIWYG-Editor für den Text-Block. v-model ist ein **Markdown-String**.
+ *
+ * Tiptap arbeitet intern mit HTML; die Brücke nach Markdown läuft über zwei
+ * etablierte Bibliotheken statt eines Tiptap-Markdown-Plugins (versionsrobust):
+ *   - Laden:    Markdown → HTML via markdown-it (`renderMarkdown`)
+ *   - Speichern: HTML → Markdown via turndown
+ *
+ * Der Editor wird erst `onMounted` erzeugt (ProseMirror braucht DOM, SSR-sicher).
+ */
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+
+const labels = useBaseKitLabels()
+
+const editor = shallowRef<Editor>()
+
+function toMarkdown(html: string): string {
+  return htmlToMarkdown(html)
+}
+
+onMounted(() => {
+  // turndown im Browser nachladen — Details in html-to-markdown.ts.
+  prepareHtmlToMarkdown()
+  editor.value = new Editor({
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: false }),
+    ],
+    content: renderMarkdown(props.modelValue),
+    onUpdate: ({ editor }) => emit('update:modelValue', toMarkdown(editor.getHTML())),
+  })
+})
+
+onBeforeUnmount(() => editor.value?.destroy())
+
+// Externe Wertänderung übernehmen, ohne den Cursor zu stören (nur bei echtem Diff).
+watch(() => props.modelValue, (v) => {
+  if (!editor.value) return
+  if ((v ?? '') !== toMarkdown(editor.value.getHTML())) {
+    editor.value.commands.setContent(renderMarkdown(v))
+  }
+})
+
+function setLink(): void {
+  if (!editor.value) return
+  const prev = editor.value.getAttributes('link').href as string | undefined
+  const url = window.prompt(labels.value.markdown.linkPrompt, prev ?? '')
+  if (url === null) return
+  if (url === '') { editor.value.chain().focus().extendMarkRange('link').unsetLink().run(); return }
+  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
+
+function isActive(name: string, attrs?: Record<string, unknown>): boolean {
+  return !!editor.value?.isActive(name, attrs)
+}
+</script>
+
+<template>
+  <div class="md-editor">
+    <div v-if="editor" class="md-toolbar">
+      <button type="button" :class="{ on: isActive('bold') }" :aria-label="labels.markdown.bold" :title="labels.markdown.bold" @click="editor.chain().focus().toggleBold().run()"><UIcon name="i-lucide-bold" class="size-4" /></button>
+      <button type="button" :class="{ on: isActive('italic') }" :aria-label="labels.markdown.italic" :title="labels.markdown.italic" @click="editor.chain().focus().toggleItalic().run()"><UIcon name="i-lucide-italic" class="size-4" /></button>
+      <span class="md-sep" />
+      <button type="button" :class="{ on: isActive('heading', { level: 2 }) }" :aria-label="labels.markdown.h2" :title="labels.markdown.h2" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"><UIcon name="i-lucide-heading-2" class="size-4" /></button>
+      <button type="button" :class="{ on: isActive('heading', { level: 3 }) }" :aria-label="labels.markdown.h3" :title="labels.markdown.h3" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"><UIcon name="i-lucide-heading-3" class="size-4" /></button>
+      <span class="md-sep" />
+      <button type="button" :class="{ on: isActive('bulletList') }" :aria-label="labels.markdown.bullet" :title="labels.markdown.bullet" @click="editor.chain().focus().toggleBulletList().run()"><UIcon name="i-lucide-list" class="size-4" /></button>
+      <button type="button" :class="{ on: isActive('orderedList') }" :aria-label="labels.markdown.ordered" :title="labels.markdown.ordered" @click="editor.chain().focus().toggleOrderedList().run()"><UIcon name="i-lucide-list-ordered" class="size-4" /></button>
+      <button type="button" :class="{ on: isActive('blockquote') }" :aria-label="labels.markdown.quote" :title="labels.markdown.quote" @click="editor.chain().focus().toggleBlockquote().run()"><UIcon name="i-lucide-quote" class="size-4" /></button>
+      <button type="button" :class="{ on: isActive('code') }" :aria-label="labels.markdown.code" :title="labels.markdown.code" @click="editor.chain().focus().toggleCode().run()"><UIcon name="i-lucide-code" class="size-4" /></button>
+      <span class="md-sep" />
+      <button type="button" :class="{ on: isActive('link') }" :aria-label="labels.markdown.link" :title="labels.markdown.link" @click="setLink()"><UIcon name="i-lucide-link" class="size-4" /></button>
+    </div>
+    <EditorContent :editor="editor" class="md-content" />
+  </div>
+</template>
+
+<style scoped>
+.md-editor { border: 1px solid var(--basekit-border-strong, #d6dbe4); border-radius: 8px; overflow: hidden; background: #fff; }
+.md-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--basekit-border, #e5e8ee); background: var(--basekit-surface-muted, #f4f6fa); }
+.md-toolbar button { min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; line-height: 1; color: var(--basekit-text, #101828); cursor: pointer; }
+.md-toolbar button:hover { background: #fff; border-color: var(--basekit-border, #e5e8ee); }
+.md-toolbar button.on { background: var(--basekit-accent, #2563eb); color: #fff; }
+.md-sep { width: 1px; height: 18px; background: var(--basekit-border, #e5e8ee); margin: 0 3px; }
+.md-content :deep(.ProseMirror) { min-height: 220px; padding: 12px 14px; outline: none; font-size: 0.9375rem; line-height: 1.6; }
+.md-content :deep(.ProseMirror h2) { font-weight: 700; font-size: 1.25rem; margin: 0.5rem 0; }
+.md-content :deep(.ProseMirror h3) { font-weight: 700; font-size: 1.1rem; margin: 0.5rem 0; }
+.md-content :deep(.ProseMirror p) { margin: 0 0 0.6rem; }
+.md-content :deep(.ProseMirror ul) { margin: 0 0 0.6rem 1.1rem; list-style: disc; }
+.md-content :deep(.ProseMirror ol) { margin: 0 0 0.6rem 1.3rem; list-style: decimal; }
+.md-content :deep(.ProseMirror blockquote) { margin: 0 0 0.6rem; padding-left: 0.9rem; border-left: 3px solid var(--basekit-accent, #2563eb); color: var(--basekit-text-muted, #667085); }
+.md-content :deep(.ProseMirror code) { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--basekit-surface-muted, #f4f6fa); padding: 0.1em 0.35em; border-radius: 4px; }
+.md-content :deep(.ProseMirror a) { color: var(--basekit-accent, #2563eb); text-decoration: underline; }
+
+/* Dark-Mode: die hart hinterlegten Light-Fallbacks überschreiben. */
+:where(.dark) .md-editor { background: #101828; border-color: #1f2937; }
+:where(.dark) .md-toolbar { background: #0b1220; border-color: #1f2937; }
+:where(.dark) .md-toolbar button { color: #e5e7eb; }
+:where(.dark) .md-toolbar button:hover { background: #1f2937; border-color: #374151; }
+:where(.dark) .md-sep { background: #1f2937; }
+:where(.dark) .md-content :deep(.ProseMirror code) { background: #1f2937; }
+</style>