@mundogamernetwork/shared-ui 1.8.14 → 1.8.15

package/components/MediaKit/MgMediaKitImages.vue

@@ -1,29 +1,30 @@
 <template>
 	<div class="mk-images">
-		<!-- Avatar -->
+		<!-- Avatar — square crop so it always displays consistently wherever
+		     the media kit shows it, instead of uploading raw/uncropped. -->
 		<div class="mk-field">
 			<label class="mk-label">{{ t("media_kit.images.avatar") }}</label>
-			<div class="mk-single">
-				<img v-if="avatar" :src="avatar" class="mk-thumb" alt="avatar" />
-				<label class="mk-upload" :class="{ 'is-busy': busy === 'avatar' }">
-					<input type="file" accept="image/*" class="mk-file" :disabled="!!busy" @change="onSingle($event, 'avatar')" />
-					{{ busy === 'avatar' ? t("media_kit.images.uploading") : t("media_kit.images.upload") }}
-				</label>
-				<button v-if="avatar" type="button" class="mk-remove" @click="clearSingle('avatar')">×</button>
-			</div>
+			<div v-if="busy === 'avatar'" class="mk-crop-uploading">{{ t("media_kit.images.uploading") }}</div>
+			<MgAvatarUploadCrop
+				:initial-preview="avatar || ''"
+				:crop-width="400"
+				:crop-height="400"
+				@change="(payload) => onCropChange(payload, 'avatar')"
+				@error="(msg) => emit('error', msg)"
+			/>
 		</div>
 
-		<!-- Cover -->
+		<!-- Cover — wide crop, same idea as avatar. -->
 		<div class="mk-field">
 			<label class="mk-label">{{ t("media_kit.images.cover") }}</label>
-			<div class="mk-single">
-				<img v-if="cover" :src="cover" class="mk-thumb mk-thumb--wide" alt="cover" />
-				<label class="mk-upload" :class="{ 'is-busy': busy === 'cover' }">
-					<input type="file" accept="image/*" class="mk-file" :disabled="!!busy" @change="onSingle($event, 'cover')" />
-					{{ busy === 'cover' ? t("media_kit.images.uploading") : t("media_kit.images.upload") }}
-				</label>
-				<button v-if="cover" type="button" class="mk-remove" @click="clearSingle('cover')">×</button>
-			</div>
+			<div v-if="busy === 'cover'" class="mk-crop-uploading">{{ t("media_kit.images.uploading") }}</div>
+			<MgAvatarUploadCrop
+				:initial-preview="cover || ''"
+				:crop-width="1200"
+				:crop-height="600"
+				@change="(payload) => onCropChange(payload, 'cover')"
+				@error="(msg) => emit('error', msg)"
+			/>
 		</div>
 
 		<!-- Portfolio gallery -->
@@ -91,19 +92,17 @@ async function upload(file: File): Promise<string | null> {
 	}
 }
 
-async function onSingle(e: Event, key: "avatar" | "cover") {
-	const input = e.target as HTMLInputElement;
-	const file = input.files?.[0];
-	if (!file) return;
+async function onCropChange(payload: { file: File | null; base64: string }, key: "avatar" | "cover") {
+	const field = key === "avatar" ? "avatar_url" : "cover_url";
+	if (!payload.file) {
+		// User hit the crop component's own remove ("✕") button.
+		emit("update", field, null);
+		return;
+	}
 	busy.value = key;
-	const url = await upload(file);
+	const url = await upload(payload.file);
 	busy.value = null;
-	input.value = "";
-	if (url) emit("update", key === "avatar" ? "avatar_url" : "cover_url", url);
-}
-
-function clearSingle(key: "avatar" | "cover") {
-	emit("update", key === "avatar" ? "avatar_url" : "cover_url", null);
+	if (url) emit("update", field, url);
 }
 
 async function onMulti(e: Event, key: "portfolio" | "brands") {
@@ -140,6 +139,11 @@ function removeFromList(key: "portfolio" | "brands", idx: number) {
 	gap: 0.5rem;
 }
 
+.mk-crop-uploading {
+	font-size: 0.8rem;
+	color: #aaa;
+}
+
 .mk-label {
 	color: #c0c4d0;
 	font-size: 0.8rem;

package/components/MediaKit/MgMediaKitLinks.vue

@@ -97,7 +97,7 @@ const save = () => {
 .mk-links-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
 .mk-links-head h3 { margin: 0 0 5px; color: #f2f3f5; font-size: 17px; }
 .mk-links-head p, .mk-links-empty { margin: 0; color: #9292a4; font-size: 13px; line-height: 1.5; }
-.mk-link-add, .mk-link-save { border: 1px solid #ffb000; background: #ffb000; color: #090909; min-height: 38px; padding: 0 16px; font-weight: 750; cursor: pointer; white-space: nowrap; }
+.mk-link-add, .mk-link-save { border: 1px solid #ffb000; background: #ffb000; color: #090909; min-height: 38px; padding: 0 16px; font-weight: 500; cursor: pointer; white-space: nowrap; }
 button:disabled { opacity: .42; cursor: not-allowed; }
 .mk-link-list { display: grid; gap: 10px; margin-top: 18px; }
 .mk-link-row { display: grid; grid-template-columns: 30px minmax(150px, .75fr) minmax(220px, 1.4fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(140, 140, 160, .25); }

package/components/MediaKit/MgRateCardEditor.vue

@@ -24,11 +24,11 @@
 					</select>
 				</div>
 				<div class="form-group">
-					<label>{{ $t("media_kit.editor.ad_channel") }}</label>
-					<select v-model="form.ad_channel_id" :class="{ 'input-error': rateCardErrors.ad_channel_id }" @change="delete rateCardErrors.ad_channel_id" required>
+					<label>{{ $t("media_kit.editor.platform") }}</label>
+					<select v-model="form.platform_id" :class="{ 'input-error': rateCardErrors.platform_id }" @change="delete rateCardErrors.platform_id" required>
 						<option value="">{{ $t("media_kit.editor.select") }}</option>
-						<option v-for="channel in adChannels" :key="channel.id" :value="channel.id">
-							{{ channel.name }}
+						<option v-for="platform in platforms" :key="platform.id" :value="platform.id">
+							{{ platform.name }}
 						</option>
 					</select>
 				</div>
@@ -110,7 +110,7 @@
 			<div v-for="card in rateCards" :key="card.id" class="rate-card-item">
 				<div class="card-info">
 					<span class="format">{{ card.content_format?.name || card.label }}</span>
-					<span class="channel">{{ card.ad_channel?.name }}</span>
+					<span class="channel">{{ card.platform?.name }}</span>
 					<span class="price">{{ formatPrice(card.price_min, card.price_max, card.currency) }}</span>
 				</div>
 				<div class="card-actions">
@@ -134,7 +134,7 @@ const { t } = useI18n();
 interface RateCard {
 	id: number;
 	content_format_id: number;
-	ad_channel_id: number;
+	platform_id: number;
 	label?: string;
 	price_min: string;
 	price_max?: string;
@@ -143,7 +143,7 @@ interface RateCard {
 	description?: string;
 	is_active: boolean;
 	content_format?: { id: number; name: string };
-	ad_channel?: { id: number; name: string };
+	platform?: { id: number; name: string };
 }
 
 interface LookupItem {
@@ -156,7 +156,7 @@ const props = withDefaults(
 		rateCards: RateCard[];
 		influencerProInfoId: number;
 		contentFormats: LookupItem[];
-		adChannels: LookupItem[];
+		platforms: LookupItem[];
 		isEnabled?: boolean;
 		/** MGN commission % for the current plan (host app resolves this, e.g. from feature_limits). */
 		commissionPercent?: number;
@@ -196,7 +196,7 @@ const saving = ref(false);
 
 const defaultForm = {
 	content_format_id: '',
-	ad_channel_id: '',
+	platform_id: '',
 	price_min: '',
 	price_max: '',
 	currency: 'USD',
@@ -265,7 +265,7 @@ const editCard = (card: RateCard) => {
 	editing.value = card.id;
 	form.value = {
 		content_format_id: String(card.content_format_id),
-		ad_channel_id: String(card.ad_channel_id),
+		platform_id: String(card.platform_id),
 		price_min: card.price_min,
 		price_max: card.price_max || '',
 		currency: card.currency,
@@ -283,7 +283,7 @@ const saveRateCard = async () => {
 	// Client-side required field check (HTML required bypassed by @click)
 	Object.keys(rateCardErrors).forEach(k => delete rateCardErrors[k]);
 	if (!form.value.content_format_id) rateCardErrors.content_format_id = 'required';
-	if (!form.value.ad_channel_id) rateCardErrors.ad_channel_id = 'required';
+	if (!form.value.platform_id) rateCardErrors.platform_id = 'required';
 	if (!form.value.price_min && form.value.price_min !== 0) rateCardErrors.price_min = 'required';
 	if (Object.keys(rateCardErrors).length) return;
 
@@ -293,7 +293,7 @@ const saveRateCard = async () => {
 			...form.value,
 			influencer_professional_info_id: props.influencerProInfoId,
 			content_format_id: Number(form.value.content_format_id),
-			ad_channel_id: Number(form.value.ad_channel_id),
+			platform_id: Number(form.value.platform_id),
 			price_min: Number(form.value.price_min),
 			price_max: form.value.price_max ? Number(form.value.price_max) : null,
 			delivery_time_days: form.value.delivery_time_days ? Number(form.value.delivery_time_days) : null,

package/components/ui/MgAvatarUploadCrop.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	initialPreview?: string;
+	cropWidth?: number;
+	cropHeight?: number;
+}>(), {
+	cropWidth: 300,
+	cropHeight: 300,
+});
+
+const emit = defineEmits<{
+	(e: 'change', payload: { file: File | null; base64: string }): void;
+	(e: 'error', message: string): void;
+}>();
+
+const { t } = useI18n();
+
+const isMounted = ref(false);
+onMounted(() => { isMounted.value = true; });
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const croppedPreview = ref<string>(props.initialPreview ?? '');
+const showModal = ref(false);
+
+// Image state
+const img = ref<HTMLImageElement | null>(null);
+const scale = ref(1);
+const minimumScale = ref(0.1);
+const offsetX = ref(0);
+const offsetY = ref(0);
+const dragging = ref(false);
+const dragStart = ref({ clientX: 0, clientY: 0, offsetX: 0, offsetY: 0 });
+
+const CANVAS_W = computed(() => props.cropWidth);
+const CANVAS_H = computed(() => props.cropHeight);
+const maximumScale = computed(() => minimumScale.value * 4);
+
+// Display size — fit within 680×480 (modal viewport) while preserving aspect ratio
+const displaySize = computed(() => {
+	const maxW = 680;
+	const maxH = 480; // cap height so portrait crops don't overflow the screen
+	const ratio = CANVAS_H.value / CANVAS_W.value;
+	let w = Math.min(CANVAS_W.value, maxW);
+	let h = Math.round(w * ratio);
+	if (h > maxH) {
+		h = maxH;
+		w = Math.round(h / ratio);
+	}
+	return { w, h };
+});
+
+const openPicker = () => {
+	inputRef.value?.click();
+};
+
+const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
+const MAX_SOURCE_SIZE_BYTES = 20 * 1024 * 1024; // generous — the crop step re-encodes to a small JPEG anyway
+
+const onFileSelected = (event: Event) => {
+	const input = event.target as HTMLInputElement;
+	const file = input.files?.[0];
+	if (!file) return;
+	input.value = '';
+
+	if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+		emit('error', t('components.avatar_crop.error_file_type'));
+		return;
+	}
+	if (file.size > MAX_SOURCE_SIZE_BYTES) {
+		emit('error', t('components.avatar_crop.error_file_too_large', { size: '20MB' }));
+		return;
+	}
+
+	const reader = new FileReader();
+	reader.onerror = () => emit('error', t('components.avatar_crop.error_read_failed'));
+	reader.onload = (e) => {
+		const image = new Image();
+		image.onerror = () => emit('error', t('components.avatar_crop.error_read_failed'));
+		image.onload = () => {
+			img.value = image;
+			// Scale to cover the crop area fully (no empty borders by default)
+			const scaleX = CANVAS_W.value / image.width;
+			const scaleY = CANVAS_H.value / image.height;
+			minimumScale.value = Math.max(scaleX, scaleY);
+			scale.value = minimumScale.value;
+			offsetX.value = (CANVAS_W.value - image.width * scale.value) / 2;
+			offsetY.value = (CANVAS_H.value - image.height * scale.value) / 2;
+			showModal.value = true;
+			nextTick(() => drawCanvas());
+		};
+		image.src = e.target?.result as string;
+	};
+	reader.readAsDataURL(file);
+};
+
+const drawCanvas = () => {
+	const canvas = canvasRef.value;
+	const image = img.value;
+	if (!canvas || !image) return;
+
+	const ctx = canvas.getContext('2d');
+	if (!ctx) return;
+
+	canvas.width = CANVAS_W.value;
+	canvas.height = CANVAS_H.value;
+
+	ctx.fillStyle = '#0e0e0e';
+	ctx.fillRect(0, 0, CANVAS_W.value, CANVAS_H.value);
+	ctx.drawImage(image, offsetX.value, offsetY.value, image.width * scale.value, image.height * scale.value);
+};
+
+const constrainPosition = () => {
+	const image = img.value;
+	if (!image) return;
+
+	const renderedWidth = image.width * scale.value;
+	const renderedHeight = image.height * scale.value;
+	// Keep the crop completely covered. Without these bounds it was possible
+	// to upload a hero with black strips after dragging or zooming out.
+	offsetX.value = renderedWidth <= CANVAS_W.value
+		? (CANVAS_W.value - renderedWidth) / 2
+		: Math.min(0, Math.max(CANVAS_W.value - renderedWidth, offsetX.value));
+	offsetY.value = renderedHeight <= CANVAS_H.value
+		? (CANVAS_H.value - renderedHeight) / 2
+		: Math.min(0, Math.max(CANVAS_H.value - renderedHeight, offsetY.value));
+};
+
+const setScale = (newScale: number) => {
+	const boundedScale = Math.max(minimumScale.value, Math.min(maximumScale.value, newScale));
+	const ratio = boundedScale / scale.value;
+	const cx = CANVAS_W.value / 2;
+	const cy = CANVAS_H.value / 2;
+	offsetX.value = cx - (cx - offsetX.value) * ratio;
+	offsetY.value = cy - (cy - offsetY.value) * ratio;
+	scale.value = boundedScale;
+	constrainPosition();
+	drawCanvas();
+};
+
+const onWheel = (e: WheelEvent) => {
+	e.preventDefault();
+	const step = minimumScale.value * 0.08;
+	setScale(scale.value + (e.deltaY > 0 ? -step : step));
+};
+
+const onZoomSlider = (e: Event) => {
+	setScale(parseFloat((e.target as HTMLInputElement).value));
+};
+
+const clientToCanvasRatio = () => {
+	const rect = canvasRef.value?.getBoundingClientRect();
+	return {
+		x: CANVAS_W.value / (rect?.width || displaySize.value.w),
+		y: CANVAS_H.value / (rect?.height || displaySize.value.h),
+	};
+};
+
+const onMouseDown = (e: MouseEvent) => {
+	dragging.value = true;
+	dragStart.value = {
+		clientX: e.clientX,
+		clientY: e.clientY,
+		offsetX: offsetX.value,
+		offsetY: offsetY.value,
+	};
+};
+
+const onMouseMove = (e: MouseEvent) => {
+	if (!dragging.value) return;
+	// Client coordinates refer to the reduced on-screen canvas. Convert the
+	// delta back to export-canvas coordinates so the image tracks the cursor.
+	const ratio = clientToCanvasRatio();
+	offsetX.value = dragStart.value.offsetX + (e.clientX - dragStart.value.clientX) * ratio.x;
+	offsetY.value = dragStart.value.offsetY + (e.clientY - dragStart.value.clientY) * ratio.y;
+	constrainPosition();
+	drawCanvas();
+};
+
+const onMouseUp = () => { dragging.value = false; };
+
+const onTouchStart = (e: TouchEvent) => {
+	if (e.touches.length !== 1) return;
+	dragging.value = true;
+	const touch = e.touches[0];
+	dragStart.value = {
+		clientX: touch.clientX,
+		clientY: touch.clientY,
+		offsetX: offsetX.value,
+		offsetY: offsetY.value,
+	};
+};
+
+const onTouchMove = (e: TouchEvent) => {
+	if (!dragging.value || e.touches.length !== 1) return;
+	e.preventDefault();
+	const touch = e.touches[0];
+	const ratio = clientToCanvasRatio();
+	offsetX.value = dragStart.value.offsetX + (touch.clientX - dragStart.value.clientX) * ratio.x;
+	offsetY.value = dragStart.value.offsetY + (touch.clientY - dragStart.value.clientY) * ratio.y;
+	constrainPosition();
+	drawCanvas();
+};
+
+const onTouchEnd = () => { dragging.value = false; };
+
+const confirmCrop = () => {
+	const canvas = canvasRef.value;
+	if (!canvas) return;
+
+	const base64 = canvas.toDataURL('image/jpeg', 0.92);
+	canvas.toBlob((blob: Blob | null) => {
+		if (!blob) return;
+		croppedPreview.value = base64;
+		const file = new File([blob], 'avatar.jpg', { type: 'image/jpeg' });
+		emit('change', { file, base64 });
+		showModal.value = false;
+	}, 'image/jpeg', 0.92);
+};
+
+const cancelCrop = () => { showModal.value = false; };
+
+const removeImage = () => {
+	croppedPreview.value = '';
+	emit('change', { file: null, base64: '' });
+};
+
+watch(() => props.initialPreview, (value) => { croppedPreview.value = value ?? ''; });
+</script>
+
+<template>
+	<div style="position: relative; width: 100%;"
+	>
+		<input
+			ref="inputRef"
+			type="file"
+			accept="image/png,image/jpeg,image/jpg,image/webp,image/gif"
+			style="position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none;"
+			@change="onFileSelected"
+		/>
+
+		<!-- Upload button -->
+		<div
+			v-if="!croppedPreview"
+			style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 120px; border: 2px dashed #666; background: #1e2028; color: #ccc; font-size: 13px; gap: 10px; cursor: pointer; padding: 16px;"
+			@click="openPicker"
+			@mouseenter="($event.currentTarget as HTMLElement).style.borderColor = '#fdb215'"
+			@mouseleave="($event.currentTarget as HTMLElement).style.borderColor = '#666'"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
+				<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#fdb215" />
+			</svg>
+			<span style="color: #fdb215; font-weight: 500;">{{ t('components.avatar_crop.select_image') }}</span>
+			<span style="color: #888; font-size: 11px;">{{ t('components.avatar_crop.format_hint', { w: CANVAS_W, h: CANVAS_H }) }}</span>
+		</div>
+
+		<!-- Preview — proportional thumbnail capped at 160px wide -->
+		<div
+			v-else
+			:style="{
+				position: 'relative',
+				width: '160px',
+				height: Math.round(160 * (CANVAS_H / CANVAS_W)) + 'px',
+				overflow: 'hidden',
+				border: '2px solid #555',
+				cursor: 'pointer',
+			}"
+			@click="openPicker"
+		>
+			<img :src="croppedPreview" style="width: 100%; height: 100%; object-fit: cover;" alt="avatar" />
+			<div
+				style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.2s;"
+				@mouseenter="($event.currentTarget as HTMLElement).style.opacity = '1'"
+				@mouseleave="($event.currentTarget as HTMLElement).style.opacity = '0'"
+			>
+				<button
+					type="button"
+					style="width: 32px; height: 32px; border-radius: 0; background: rgba(0,0,0,0.8); border: none; color: #fff; cursor: pointer; font-size: 14px;"
+					@click.stop="openPicker"
+				>✎</button>
+				<button
+					type="button"
+					style="width: 32px; height: 32px; border-radius: 0; background: #e05555; border: none; color: #fff; cursor: pointer; font-size: 14px;"
+					@click.stop="removeImage"
+				>✕</button>
+			</div>
+		</div>
+
+		<!-- Crop Modal -->
+		<Teleport v-if="isMounted" to="body">
+		<div
+			v-if="showModal"
+			style="position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 99999; display: flex; align-items: center; justify-content: center;"
+			@click.self="cancelCrop"
+		>
+			<div
+					:style="{
+						background: '#191b20',
+						border: '1px solid #333',
+						width: '90vw',
+						maxWidth: (displaySize.w + 48) + 'px',
+						display: 'flex',
+						flexDirection: 'column',
+						overflow: 'hidden',
+					}"
+				>
+				<!-- Header -->
+				<div style="display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #272930; color: #fff; font-size: 16px; font-weight: 600;">
+					<div style="display: flex; align-items: baseline; gap: 10px;">
+						<span>{{ t('components.avatar_crop.modal_title') }}</span>
+						<span style="font-size: 12px; font-weight: 400; color: #fdb215; background: rgba(253,178,21,0.12); padding: 2px 8px; letter-spacing: 0.03em;">
+							{{ CANVAS_W }} × {{ CANVAS_H }} px
+						</span>
+					</div>
+					<button
+						type="button"
+						style="background: none; border: none; color: #aaa; cursor: pointer; font-size: 24px; line-height: 1; padding: 0;"
+						@click="cancelCrop"
+					>&times;</button>
+				</div>
+
+				<!-- Canvas area — display at most 680px wide, preserve aspect ratio -->
+				<div style="padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;">
+					<div
+						:style="{
+							position: 'relative',
+							width: displaySize.w + 'px',
+							height: displaySize.h + 'px',
+							overflow: 'hidden',
+							cursor: 'grab',
+							border: '2px solid rgba(253,178,21,0.4)',
+							maxWidth: '100%',
+						}"
+					>
+						<canvas
+							ref="canvasRef"
+							:width="CANVAS_W"
+							:height="CANVAS_H"
+							:style="{
+								display: 'block',
+								width: displaySize.w + 'px',
+								height: displaySize.h + 'px',
+								maxWidth: '100%',
+							}"
+							@mousedown="onMouseDown"
+							@mousemove="onMouseMove"
+							@mouseup="onMouseUp"
+							@mouseleave="onMouseUp"
+							@wheel.prevent="onWheel"
+							@touchstart="onTouchStart"
+							@touchmove="onTouchMove"
+							@touchend="onTouchEnd"
+						/>
+					</div>
+
+					<!-- Zoom slider -->
+					<div style="display: flex; align-items: center; gap: 12px; width: 100%; max-width: 280px;">
+						<span style="color: #aaa; font-size: 18px; font-weight: 600; user-select: none;">−</span>
+						<input
+							type="range"
+							:min="minimumScale"
+							:max="maximumScale"
+							:step="minimumScale / 100"
+							:value="scale"
+							style="flex: 1; accent-color: #fdb215;"
+							@input="onZoomSlider"
+						/>
+						<span style="color: #aaa; font-size: 18px; font-weight: 600; user-select: none;">+</span>
+					</div>
+
+					<span style="font-size: 11px; color: #888;">{{ t('components.avatar_crop.drag_hint') }} · {{ CANVAS_W }}×{{ CANVAS_H }}px</span>
+				</div>
+
+				<!-- Footer -->
+				<div style="display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid #272930;">
+					<button
+						type="button"
+						style="height: 40px; padding: 0 20px; background: transparent; border: 1px solid #555; border-radius: 0; color: #fff; font-size: 14px; cursor: pointer;"
+						@click="cancelCrop"
+					>{{ t('modal.cancel') }}</button>
+					<button
+						type="button"
+						style="height: 40px; padding: 0 24px; background: #fdb215; border: none; border-radius: 0; color: #0e0e0e; font-size: 14px; font-weight: 600; cursor: pointer;"
+						@click="confirmCrop"
+					>{{ t('modal.confirm') }}</button>
+				</div>
+			</div>
+		</div>
+	</Teleport>
+	</div>
+</template>

package/locales/de.json

@@ -59,6 +59,9 @@
       "status_key": {
         "see_key": "View key",
         "of": "of",
+        "title_not_open": "This campaign",
+        "title_span_not_open": "hasn't opened yet",
+        "obs_not_open": "Requests aren't accepted until the campaign's start date. Come back then.",
         "title_0": "Campaign",
         "title_span_0": "ended",
         "obs_0": "The redemption period for the key has expired.",
@@ -115,6 +118,8 @@
         "launch": "Launch",
         "status": "Status",
         "status_active": "Active",
+        "status_upcoming": "Coming soon",
+        "opens_in": "Opens in",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -209,6 +214,12 @@
       "press_kit_link": "Presse-Kit",
       "review_guideline": "Review-Richtlinie",
       "embargo_date": "Sperrfrist",
+      "embargo_warning_title": "Dieser Key unterliegt einer Sperrfrist",
+      "embargo_warning_desc": "Du darfst vor dem {date} keine Inhalte über dieses Spiel veröffentlichen oder teilen.",
+      "embargo_ack_label": "Ich verstehe, dass dieser Key bis {date} gesperrt ist, und werde vorher nichts veröffentlichen.",
+      "embargo_ack_confirm": "Bestätigen & Key anzeigen",
+      "no_embargo_title": "Keine Sperrfrist",
+      "no_embargo_desc": "Du kannst sofort Inhalte über dieses Spiel veröffentlichen oder teilen.",
       "pr_contact_label": "PR-Kontakt"
     },
     "materials": {

package/locales/en.json

@@ -59,6 +59,9 @@
       "status_key": {
         "see_key": "View key",
         "of": "of",
+        "title_not_open": "This campaign",
+        "title_span_not_open": "hasn't opened yet",
+        "obs_not_open": "Requests aren't accepted until the campaign's start date. Come back then.",
         "title_0": "Campaign",
         "title_span_0": "ended",
         "obs_0": "The redemption period for the key has expired.",
@@ -115,6 +118,8 @@
         "launch": "Launch",
         "status": "Status",
         "status_active": "Active",
+        "status_upcoming": "Coming soon",
+        "opens_in": "Opens in",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -209,6 +214,12 @@
       "press_kit_link": "Press Kit",
       "review_guideline": "Review guideline",
       "embargo_date": "Embargo date",
+      "embargo_warning_title": "This key is under embargo",
+      "embargo_warning_desc": "You must not publish or share any content about this game before {date}.",
+      "embargo_ack_label": "I understand this key is embargoed until {date} and will not publish before then.",
+      "embargo_ack_confirm": "Confirm & reveal key",
+      "no_embargo_title": "No embargo",
+      "no_embargo_desc": "You're free to publish or share content about this game right away.",
       "pr_contact_label": "PR contact"
     },
     "materials": {

package/locales/pt-BR.json

@@ -59,6 +59,9 @@
       "status_key": {
         "see_key": "View key",
         "of": "of",
+        "title_not_open": "This campaign",
+        "title_span_not_open": "hasn't opened yet",
+        "obs_not_open": "Requests aren't accepted until the campaign's start date. Come back then.",
         "title_0": "Campaign",
         "title_span_0": "ended",
         "obs_0": "The redemption period for the key has expired.",
@@ -115,6 +118,8 @@
         "launch": "Launch",
         "status": "Status",
         "status_active": "Active",
+        "status_upcoming": "Coming soon",
+        "opens_in": "Opens in",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -209,6 +214,12 @@
       "press_kit_link": "Press Kit",
       "review_guideline": "Diretriz de review",
       "embargo_date": "Data de embargo",
+      "embargo_warning_title": "Essa chave está sob embargo",
+      "embargo_warning_desc": "Você não pode publicar ou compartilhar nenhum conteúdo sobre esse jogo antes de {date}.",
+      "embargo_ack_label": "Entendo que essa chave está embargada até {date} e não vou publicar antes disso.",
+      "embargo_ack_confirm": "Confirmar e revelar chave",
+      "no_embargo_title": "Sem embargo",
+      "no_embargo_desc": "Você já pode publicar ou compartilhar conteúdo sobre esse jogo.",
       "pr_contact_label": "Contato de imprensa"
     },
     "materials": {

package/locales/ro.json

@@ -59,6 +59,9 @@
       "status_key": {
         "see_key": "View key",
         "of": "of",
+        "title_not_open": "This campaign",
+        "title_span_not_open": "hasn't opened yet",
+        "obs_not_open": "Requests aren't accepted until the campaign's start date. Come back then.",
         "title_0": "Campaign",
         "title_span_0": "ended",
         "obs_0": "The redemption period for the key has expired.",
@@ -115,6 +118,8 @@
         "launch": "Launch",
         "status": "Status",
         "status_active": "Active",
+        "status_upcoming": "Coming soon",
+        "opens_in": "Opens in",
         "status_closed": "Closed",
         "status_ending": "Ending soon",
         "status_exhausted": "Keys exhausted",
@@ -209,6 +214,12 @@
       "press_kit_link": "Press Kit",
       "review_guideline": "Ghid de recenzie",
       "embargo_date": "Data embargo",
+      "embargo_warning_title": "Acest cod este sub embargo",
+      "embargo_warning_desc": "Nu ai voie să publici sau să distribui niciun conținut despre acest joc înainte de {date}.",
+      "embargo_ack_label": "Înțeleg că acest cod este sub embargo până la {date} și nu voi publica nimic înainte de asta.",
+      "embargo_ack_confirm": "Confirmă și dezvăluie codul",
+      "no_embargo_title": "Fără embargo",
+      "no_embargo_desc": "Poți publica sau distribui conținut despre acest joc chiar acum.",
       "pr_contact_label": "Contact PR"
     },
     "materials": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.14",
+  "version": "1.8.15",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/[slug].vue

@@ -191,9 +191,38 @@ const isCampaignExpired = computed(() => {
 	return parseTimeToExpire(campaign.value?.time_to_expire) <= 0
 })
 
+// A campaign with a future start_date used to render as "Active" with a
+// countdown that was actually counting down to end_date, not to its real
+// opening date — nothing distinguished "scheduled, not open yet" from
+// "already open". Backend now also rejects requests before start_date
+// (KeyRequestController::store()); this is the matching frontend state.
+const campaignNotYetOpen = computed(() => {
+	const start = campaign.value?.start
+	return !!start && new Date(start).getTime() > Date.now()
+})
+
 let countdownInterval: ReturnType<typeof setInterval> | null = null
 
 const updateCountdown = () => {
+	if (campaignNotYetOpen.value) {
+		// Count down to the real opening date instead of end_date — there is no
+		// server-computed "time to start" field, so this is derived client-side.
+		let totalSeconds = Math.max(0, Math.floor((new Date(campaign.value!.start!).getTime() - Date.now()) / 1000))
+		countdownInterval = setInterval(() => {
+			if (totalSeconds <= 0) {
+				if (countdownInterval) clearInterval(countdownInterval)
+				return
+			}
+			totalSeconds--
+			timeValues.value = {
+				days: Math.floor(totalSeconds / 86400),
+				hours: Math.floor((totalSeconds % 86400) / 3600),
+				minutes: Math.floor((totalSeconds % 3600) / 60),
+				seconds: totalSeconds % 60,
+			}
+		}, 1000)
+		return
+	}
 	if (hasNoDateLimit.value) {
 		timeValues.value = { days: 999, hours: 0, minutes: 0, seconds: 0 }
 		return
@@ -294,6 +323,13 @@ type StatusConfig = {
 }
 
 const statusConfigs: Record<string, StatusConfig> = {
+	not_yet_open: {
+		titleParts: [
+			{ text: "keys.campaigns.status_key.title_not_open" },
+			{ text: "keys.campaigns.status_key.title_span_not_open", color: "yellow" },
+		],
+		obs: "keys.campaigns.status_key.obs_not_open",
+	},
 	expired: {
 		titleParts: [
 			{ text: "keys.campaigns.status_key.title_0" },
@@ -442,6 +478,13 @@ const currentConfig = computed((): StatusConfig | null => {
 	const noRequestYet = status === null || status === undefined || status === 1
 	const userCanAccess = campaign.value?.user_can_access !== false
 
+	// Checked first: a not-yet-open campaign takes priority over every other
+	// state (tier lock, exclusive, expired, etc.) — none of those are
+	// meaningful yet if the campaign itself hasn't started.
+	if (campaignNotYetOpen.value && noRequestYet) {
+		return statusConfigs.not_yet_open
+	}
+
 	if (noRequestYet && !campaignExpired && !userCanAccess) {
 		if (campaign.value?.is_exclusive) return statusConfigs.locked_exclusive
 		if (campaign.value?.is_tier_locked) return statusConfigs.locked_tier
@@ -530,7 +573,7 @@ onMounted(async () => {
 					<div class="rescue-texts">
 						<div class="title">
 							<template v-for="(part, i) in currentConfig.titleParts" :key="i">
-								<template v-if="i > 0"> </template>
+								<template v-if="i > 0">&nbsp;</template>
 								<span v-if="part.color" :class="part.color">{{ $t(part.text) }}</span>
 								<template v-if="!part.color">{{ $t(part.text) }}</template>
 							</template>
@@ -738,20 +781,23 @@ onMounted(async () => {
 							<div class="tags">
 								<div class="tag">
 									<span :class="{
-										active: !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && (hasNoDateLimit || timeValues.days > 7),
-										ending: !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && !hasNoDateLimit && timeValues.days <= 7 && timeValues.days > 0,
-										inactive: isCampaignExpired || (campaign?.available_count ?? 0) === 0,
+										upcoming: campaignNotYetOpen,
+										active: !campaignNotYetOpen && !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && (hasNoDateLimit || timeValues.days > 7),
+										ending: !campaignNotYetOpen && !isCampaignExpired && (campaign?.available_count ?? 0) > 0 && !hasNoDateLimit && timeValues.days <= 7 && timeValues.days > 0,
+										inactive: !campaignNotYetOpen && (isCampaignExpired || (campaign?.available_count ?? 0) === 0),
 									}">●</span>
 									{{
-										isCampaignExpired
-											? $t("keys.campaigns.campaign.status_closed")
-											: (campaign?.available_count ?? 0) === 0
-												? $t("keys.campaigns.campaign.status_exhausted")
-												: hasNoDateLimit
-													? $t("keys.campaigns.campaign.status_active")
-													: timeValues.days <= 7
-														? $t("keys.campaigns.campaign.status_ending")
-														: $t("keys.campaigns.campaign.status_active")
+										campaignNotYetOpen
+											? $t("keys.campaigns.campaign.status_upcoming")
+											: isCampaignExpired
+												? $t("keys.campaigns.campaign.status_closed")
+												: (campaign?.available_count ?? 0) === 0
+													? $t("keys.campaigns.campaign.status_exhausted")
+													: hasNoDateLimit
+														? $t("keys.campaigns.campaign.status_active")
+														: timeValues.days <= 7
+															? $t("keys.campaigns.campaign.status_ending")
+															: $t("keys.campaigns.campaign.status_active")
 									}}
 								</div>
 								<div class="tag-quantity" v-if="!isCampaignExpired">
@@ -765,7 +811,8 @@ onMounted(async () => {
 							</div>
 						</div>
 
-						<div class="time" v-if="!hasNoDateLimit">
+						<div class="time" v-if="campaignNotYetOpen || !hasNoDateLimit">
+							<div class="time-label" v-if="campaignNotYetOpen">{{ $t("keys.campaigns.campaign.opens_in") }}</div>
 							<div class="card-time">
 								{{ timeValues.days }}<span>{{ $t("keys.campaigns.campaign.days") }}</span>
 							</div>
@@ -1279,15 +1326,24 @@ onMounted(async () => {
 							span.active { color: var(--success, #22c55e); }
 							span.inactive { color: var(--danger, #e53935); }
 							span.ending { color: var(--status-ending, #ffa600); }
+							span.upcoming { color: var(--status-upcoming, #a78bfa); }
 						}
 					}
 				}
 
 				.time {
 					display: flex;
+					flex-wrap: wrap;
 					gap: 12px;
 					width: 100%;
 
+					.time-label {
+						flex-basis: 100%;
+						font-size: 12px;
+						color: var(--status-upcoming, #a78bfa);
+						font-weight: 600;
+					}
+
 					.card-time {
 						display: flex;
 						min-height: 80px;

package/pages/key-campaigns/redeem-key-approved.vue

@@ -22,6 +22,16 @@ const requestData = ref<any>(null)
 const copied = ref(false)
 const platform = ref("")
 
+// Embargo handling: the creator gets the code right away specifically to
+// prepare content ahead of the embargo lifting — embargo_date only restricts
+// when they publish, not when they can have the key. The backend requires an
+// explicit one-time acknowledgment before actually returning the code
+// (needsEmbargoAck) — a real consent step, not just the neutral, unenforced
+// date line this page used to show.
+const needsEmbargoAck = ref(false)
+const embargoAckDate = ref<string | null>(null)
+const embargoAckChecked = ref(false)
+
 // Maps a platform name to its official key-activation page.
 const REDEEM_URLS: Record<string, string> = {
 	steam: "https://store.steampowered.com/account/registerkey",
@@ -69,22 +79,28 @@ onMounted(async () => {
 	}
 })
 
-async function reveal() {
+async function reveal(acknowledgeEmbargo = false) {
 	revealing.value = true
 	error.value = ""
 	try {
-		const res = await revealKey(requestId)
+		const res = await revealKey(requestId, acknowledgeEmbargo)
 		const data = res?.data?.data || res?.data || null
 		keyCode.value = data?.code || (typeof data?.key === "string" ? data.key : null) || data?.value || null
 		// Keep the pre-reveal platform (chosen at request time) as fallback if the
 		// revealed item has no platform of its own.
 		platform.value = data?.platform || data?.platforms?.[0]?.name || platform.value
+		needsEmbargoAck.value = false
 		if (!keyCode.value) {
 			error.value = $i18n.t("keys.campaigns.error_reveal")
 		}
 	} catch (e: any) {
-		const code = e?.response?.data?.message || ""
-		if (code === "NO_KEYS_AVAILABLE" || code === "KEY_ITEM_NOT_FOUND") {
+		const body = e?.response?.data || {}
+		const code = body.message || ""
+		const errorCode = body.error_code || ""
+		if (errorCode === "embargo_acknowledgment_required") {
+			needsEmbargoAck.value = true
+			embargoAckDate.value = body.embargo_date || null
+		} else if (code === "NO_KEYS_AVAILABLE" || code === "KEY_ITEM_NOT_FOUND") {
 			error.value = $i18n.t("keys.campaigns.error_no_keys")
 		} else if (code === "KEY_NOT_APPROVED") {
 			error.value = $i18n.t("keys.campaigns.error_not_approved")
@@ -96,6 +112,11 @@ async function reveal() {
 	}
 }
 
+function confirmEmbargoAndReveal() {
+	if (!embargoAckChecked.value) return
+	reveal(true)
+}
+
 async function copyCode() {
 	if (!keyCode.value) return
 	try {
@@ -151,15 +172,44 @@ function goBack() {
 					<p v-if="platform" class="platform-name">{{ $t("keys.campaigns.platform") }}: {{ platform }}</p>
 				</div>
 
+				<div v-if="requestData && !keyCode" class="embargo-warning" :class="{ 'embargo-warning--none': !requestData?.key?.embargo_date }">
+					<MGIcon size="1x" :icon="requestData?.key?.embargo_date ? 'lock' : 'unlock'" />
+					<div class="embargo-warning-text">
+						<template v-if="requestData?.key?.embargo_date">
+							<strong>{{ $t("keys.campaigns.embargo_warning_title") }}</strong>
+							<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: formatDate(requestData.key.embargo_date) }) }}</p>
+						</template>
+						<template v-else>
+							<strong>{{ $t("keys.campaigns.no_embargo_title") }}</strong>
+							<p>{{ $t("keys.campaigns.no_embargo_desc") }}</p>
+						</template>
+					</div>
+				</div>
+
 				<div class="cards">
 					<div class="side">
 						<div class="code-list">
 							<div class="code">
 								<div class="number">1</div>
 								<div class="texts">
-									<div class="code-box" v-if="!keyCode">
+									<div class="embargo-ack" v-if="!keyCode && needsEmbargoAck">
+										<label class="embargo-ack-label">
+											<input type="checkbox" v-model="embargoAckChecked" />
+											{{ $t("keys.campaigns.embargo_ack_label", { date: formatDate(embargoAckDate) }) }}
+										</label>
+										<button
+											class="btn"
+											:class="{ disabled: !embargoAckChecked || revealing }"
+											:disabled="!embargoAckChecked || revealing"
+											@click="confirmEmbargoAndReveal"
+										>
+											{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.embargo_ack_confirm") }}
+										</button>
+									</div>
+
+									<div class="code-box" v-else-if="!keyCode">
 										<input type="text" value="••••••••••••••••" readonly class="code-masked" />
-										<button class="btn" :class="{ disabled: revealing }" :disabled="revealing" @click="reveal">
+										<button class="btn" :class="{ disabled: revealing }" :disabled="revealing" @click="() => reveal()">
 											{{ revealing ? $t("keys.campaigns.revealing") : $t("keys.campaigns.status_key.reveal_key") }}
 										</button>
 									</div>
@@ -209,7 +259,7 @@ function goBack() {
 							</div>
 						</div>
 
-						<div class="resources" v-if="requestData?.key?.press_kit_link || requestData?.key?.review_guideline || requestData?.key?.embargo_date">
+						<div class="resources" v-if="requestData?.key?.press_kit_link || requestData?.key?.review_guideline">
 							<div class="resources-title">{{ $t("keys.campaigns.resources_title") }}</div>
 
 							<a
@@ -227,11 +277,6 @@ function goBack() {
 								<div class="resource-label">{{ $t("keys.campaigns.review_guideline") }}</div>
 								<div class="resource-text">{{ requestData.key.review_guideline }}</div>
 							</div>
-
-							<div v-if="requestData?.key?.embargo_date" class="resource-item">
-								<div class="resource-label">{{ $t("keys.campaigns.embargo_date") }}</div>
-								<div class="resource-text">{{ formatDate(requestData.key.embargo_date) }}</div>
-							</div>
 						</div>
 					</div>
 				</div>
@@ -405,6 +450,50 @@ function goBack() {
 
 	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
 
+	.embargo-warning {
+		display: flex;
+		gap: 12px;
+		align-items: flex-start;
+		background: rgba(229, 57, 53, 0.1);
+		border: 1px solid var(--danger, #e53935);
+		padding: 14px 16px;
+		margin-bottom: 20px;
+
+		svg { color: var(--danger, #e53935); flex-shrink: 0; margin-top: 2px; }
+
+		.embargo-warning-text {
+			strong { display: block; color: var(--danger, #e53935); font-size: 14px; margin-bottom: 4px; }
+			p { margin: 0; font-size: 13px; color: var(--text-secondary, #ccc); }
+		}
+
+		&--none {
+			background: rgba(34, 197, 94, 0.08);
+			border-color: var(--success, #22c55e);
+
+			svg { color: var(--success, #22c55e); }
+			.embargo-warning-text strong { color: var(--success, #22c55e); }
+		}
+	}
+
+	.embargo-ack {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 14px;
+		background: rgba(229, 57, 53, 0.06);
+		border: 1px solid var(--danger, #e53935);
+
+		.embargo-ack-label {
+			display: flex;
+			align-items: flex-start;
+			gap: 8px;
+			font-size: 13px;
+			cursor: pointer;
+
+			input { margin-top: 2px; }
+		}
+	}
+
 	.resources {
 		display: flex;
 		flex-direction: column;

package/pages/press-kit/[slug].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// /presskit (no hyphen) is the canonical public press-kit route — every
+// share link/redirect/marketing surface in the app already generates that
+// form. "/press-kit" (hyphenated) never had a route at all, so anyone
+// who typed or linked the more conventional-looking hyphenated form (it's
+// the same spelling the dashboard editor route /dashboard/press-kit uses)
+// got a 404. Redirect it to the canonical slug route instead of trying to
+// make both forms equally "real" — same technique as presskit/[slug].vue's
+// own redirect to the canonical /presskit/game/[slug] page.
+definePageMeta({ layout: 'blank' })
+const route = useRoute()
+navigateTo(`/presskit/game/${route.params.slug}`, { redirectCode: 301 })
+</script>

package/pages/press-kit/game/[slug].vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+// Same compatibility redirect as ../[slug].vue, for the /press-kit/game/...
+// form specifically (in case that's what got linked/typed instead).
+definePageMeta({ layout: 'blank' })
+const route = useRoute()
+navigateTo(`/presskit/game/${route.params.slug}`, { redirectCode: 301 })
+</script>

package/pages/press-kit/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+// Same compatibility redirect as [slug].vue, for the bare /press-kit form.
+definePageMeta({ layout: 'blank' })
+navigateTo('/presskit', { redirectCode: 301 })
+</script>

package/services/campaignService.ts

@@ -418,8 +418,10 @@ export const requestKey = (data: Record<string, any>) => {
 /**
  * Reveal a previously granted key.
  */
-export const revealKey = (requestId: number) => {
-	return authClient.get(`/public/key-requests/${requestId}/reveal`)
+export const revealKey = (requestId: number, acknowledgeEmbargo = false) => {
+	return authClient.get(`/public/key-requests/${requestId}/reveal`, {
+		params: acknowledgeEmbargo ? { acknowledge_embargo: 1 } : undefined,
+	})
 }
 
 /**