feat: extract shop from mp/shop — initial libreshop/shop

Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first
concrete adapter consuming the libreshop toolkit. Builds and publishes
git.librete.ch/libreshop/shop on every main / v* push via the standard
.gitea/workflows/build.yml shared across libreshop components.

components/ContactForm.vue

@@ -0,0 +1,112 @@
+<template>
+	<form @submit.prevent="handleSubmit" class="space-y-6">
+		<div>
+			<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+			<input
+				id="name"
+				v-model="form.name"
+				type="text"
+				required
+				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+				placeholder="Ihr Name"
+			/>
+		</div>
+
+		<div>
+			<label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-Mail *</label>
+			<input
+				id="email"
+				v-model="form.email"
+				type="email"
+				required
+				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+				placeholder="ihre@email.de"
+			/>
+		</div>
+
+		<div>
+			<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Betreff</label>
+			<input
+				id="subject"
+				v-model="form.subject"
+				type="text"
+				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+				placeholder="Betreff Ihrer Nachricht"
+			/>
+		</div>
+
+		<div>
+			<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Nachricht *</label>
+			<textarea
+				id="message"
+				v-model="form.message"
+				required
+				rows="5"
+				class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
+				placeholder="Ihre Nachricht an uns..."
+			></textarea>
+		</div>
+
+		<!-- Honeypot field for spam protection -->
+		<div class="hidden" aria-hidden="true">
+			<input v-model="form.honeypot" type="text" name="website" tabindex="-1" autocomplete="off" />
+		</div>
+
+		<div v-if="status === 'success'" class="p-4 bg-green-50 text-green-800 rounded-lg">Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.</div>
+
+		<div v-if="status === 'error'" class="p-4 bg-red-50 text-red-800 rounded-lg">Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt per E-Mail.</div>
+
+		<button type="submit" :disabled="isSubmitting" class="w-full sm:w-auto px-8 py-3 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+			<span v-if="isSubmitting">Wird gesendet...</span>
+			<span v-else>Nachricht senden</span>
+		</button>
+	</form>
+</template>
+
+<script setup lang="ts">
+const form = reactive({
+	name: "",
+	email: "",
+	subject: "",
+	message: "",
+	honeypot: "", // spam protection
+});
+
+const isSubmitting = ref(false);
+const status = ref<"idle" | "success" | "error">("idle");
+
+async function handleSubmit() {
+	// Check honeypot
+	if (form.honeypot) {
+		status.value = "success"; // Fake success for bots
+		return;
+	}
+
+	isSubmitting.value = true;
+	status.value = "idle";
+
+	try {
+		await $fetch("/api/contact", {
+			method: "POST",
+			body: {
+				name: form.name,
+				email: form.email,
+				subject: form.subject || "Kontaktanfrage über Website",
+				message: form.message,
+			},
+		});
+
+		status.value = "success";
+		// Reset form
+		form.name = "";
+		form.email = "";
+		form.subject = "";
+		form.message = "";
+	} catch (error) {
+		console.error("Contact form error:", error);
+		status.value = "error";
+	} finally {
+		isSubmitting.value = false;
+	}
+}
+</script>