@xenterprises/nuxt-x-marketing 1.11.0 → 1.13.0

package/CHANGELOG.md

@@ -30,6 +30,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   section and its sample product data were dropped with them. Every other section of the
   demo page is unchanged.
 
+## [1.13.0] - 2026-10-13
+
+Opt-in; plain-string answers render byte-identical to 1.12.0.
+
+### Added
+
+- **`XMarkFAQ` inline links in answers.** An answer may be `{ text, links }`: `text` holds
+  `{token}` placeholders and `links` maps each token to `{ label, to, target? }` (or an array,
+  addressed as `{0}`, `{1}`). Rendered as text plus `NuxtLink`s, never `v-html`, so HTML in the text
+  shows as text. Only `/`, `#`, `?`, `http(s)://`, `mailto:` and `tel:` targets become links (others
+  render the label as plain text); internal paths are same-tab; `target: '_blank'` adds
+  `rel="noopener noreferrer"`. Unknown tokens stay literal. Works in both layouts; a closed
+  accordion answer with links is `inert` so its links are not tabbable while hidden.
+- `useFaqAnswer()` composable (`isRichAnswer`, `answerParts`, `answerPlainText`).
+
+## [1.12.0] - 2026-10-13
+
+Opt-in; the default (`aspectRatio="16/9"`, cropped with object-cover) renders byte-identical to 1.11.0.
+
+### Added
+
+- **`XMarkMedia aspectRatio="auto"`**: the image renders at its natural ratio with no crop
+  (`block w-full h-auto`, no aspect-ratio style, no object-cover, no absolute positioning).
+  `img.width` / `img.height` are passed through as attributes in this mode to reserve space.
+  `aspect="auto"` is accepted as an alias (it only takes `"auto"`).
+
 ## [1.11.0] - 2026-10-12
 
 Additive; menus with only flat children render byte-identical to 1.10.0.

package/app/components/X/Mark/FAQ/index.vue

@@ -38,6 +38,25 @@
 					}"
 				>
 					<div
+						v-if="isRichAnswer(item.answer)"
+						:inert="!openIndexes.includes(index) || undefined"
+						class="p-5 pt-0 text-neutral-600 dark:text-neutral-400 prose prose-neutral dark:prose-invert max-w-none"
+					>
+						<template
+							v-for="(part, pi) in answerParts(item.answer)"
+							:key="pi"
+						>
+							<NuxtLink
+								v-if="part.to"
+								:to="part.to"
+								:target="part.target"
+								:rel="part.rel"
+							>{{ part.label }}</NuxtLink>
+							<template v-else>{{ part.text }}</template>
+						</template>
+					</div>
+					<div
+						v-else
 						class="p-5 pt-0 text-neutral-600 dark:text-neutral-400 prose prose-neutral dark:prose-invert max-w-none"
 					>
 						{{ item.answer }}
@@ -63,7 +82,34 @@
 			</div>
 
 			<!-- Answers Column -->
-			<div class="answers-column space-y-4">
+			<div
+				v-if="hasRichAnswers"
+				class="answers-column space-y-4"
+			>
+				<div
+					v-for="(item, index) in items"
+					:key="index"
+					class="text-neutral-600 dark:text-neutral-400"
+				>
+					<template
+						v-for="(part, pi) in answerParts(item.answer)"
+						:key="pi"
+					>
+						<NuxtLink
+							v-if="part.to"
+							:to="part.to"
+							:target="part.target"
+							:rel="part.rel"
+							class="underline"
+						>{{ part.label }}</NuxtLink>
+						<template v-else>{{ part.text }}</template>
+					</template>
+				</div>
+			</div>
+			<div
+				v-else
+				class="answers-column space-y-4"
+			>
 				<div
 					v-for="(item, index) in items"
 					:key="index"
@@ -77,8 +123,14 @@
 </template>
 
 <script setup>
+import { useFaqAnswer } from "../../../../composables/useFaqAnswer";
+
 const props = defineProps({
-	/** Array of FAQ items [{ question, answer, open? }] */
+	/**
+	 * Array of FAQ items [{ question, answer, open? }].
+	 * answer is a plain string, or (1.13.0) { text, links } where text holds {tokens} and
+	 * links maps each token to { label, to, target? }. Rendered as text + NuxtLinks (no v-html).
+	 */
 	items: {
 		type: Array,
 		default: () => [
@@ -106,6 +158,9 @@ const props = defineProps({
 	},
 });
 
+const { isRichAnswer, answerParts, answerPlainText } = useFaqAnswer();
+const hasRichAnswers = computed(() => props.items.some((item) => isRichAnswer(item.answer)));
+
 // Track which items are open
 const openIndexes = ref([]);
 
@@ -158,7 +213,7 @@ function calculateHeights() {
 	// This is a simplified approach - in production, you might measure actual heights
 	props.items.forEach((item, index) => {
 		// Estimate height based on answer length (rough approximation)
-		const answerLength = item.answer?.length || 0;
+		const answerLength = typeof item.answer === "string" ? item.answer.length : answerPlainText(item.answer).length;
 		// Average characters per line ~50, line height ~1.6, padding ~20px
 		const lines = Math.ceil(answerLength / 50);
 		const estimatedHeight = lines * 28 + 40; // ~28px per line + padding

package/app/components/X/Mark/Media/index.vue

@@ -2,6 +2,40 @@
 	<div :class="containerClasses">
 		<figure class="m-0">
 			<div
+				v-if="isAuto"
+				class="relative w-full overflow-hidden"
+				:class="roundedClass"
+			>
+				<picture v-if="img?.sources?.length">
+					<source
+						v-for="(source, i) in img.sources"
+						:key="i"
+						:srcset="source.srcset"
+						:type="source.type"
+						:media="source.media"
+						:sizes="source.sizes"
+					>
+					<img
+						:src="img.src"
+						:alt="img.alt || ''"
+						:width="img.width"
+						:height="img.height"
+						:loading="loading"
+						class="block w-full h-auto"
+					>
+				</picture>
+				<img
+					v-else
+					:src="img.src"
+					:alt="img.alt || ''"
+					:width="img.width"
+					:height="img.height"
+					:loading="loading"
+					class="block w-full h-auto"
+				>
+			</div>
+			<div
+				v-else
 				class="relative w-full overflow-hidden"
 				:class="roundedClass"
 				:style="aspectStyle"
@@ -59,11 +93,20 @@ const props = defineProps({
 				(Array.isArray(v.sources) &&
 					v.sources.every((x) => x && typeof x.srcset === "string"))),
 	},
-	/** CSS aspect-ratio, e.g. "16/9", "21/9", "4/3" */
+	/**
+	 * CSS aspect-ratio, e.g. "16/9", "21/9", "4/3" (image is cropped to fill, object-cover).
+	 * 1.12.0: "auto" shows the image at its natural ratio with no crop (w-full h-auto).
+	 */
 	aspectRatio: {
 		type: String,
 		default: "16/9",
-		validator: (v) => /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(v),
+		validator: (v) => v === "auto" || /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(v),
+	},
+	/** 1.12.0 alias: aspect="auto" is the same as aspectRatio="auto" (only "auto" is accepted). */
+	aspect: {
+		type: String,
+		default: "",
+		validator: (v) => v === "" || v === "auto",
 	},
 	/** Same values and classes as XMarkSection container */
 	container: {
@@ -112,6 +155,8 @@ const roundedClass = computed(() => {
 	return r[props.rounded];
 });
 
+const isAuto = computed(() => props.aspectRatio === "auto" || props.aspect === "auto");
+
 const aspectStyle = computed(() => ({ aspectRatio: props.aspectRatio.replace(/\s+/g, " ") }));
 
 const positionStyle = computed(() =>

package/app/composables/useFaqAnswer.js

@@ -0,0 +1,52 @@
+/**
+ * useFaqAnswer (1.13.0) - safe inline links for XMarkFAQ answers.
+ *
+ * answer: "plain string" (rendered as before) or
+ *   { text: "See our {guide} or {contact}.", links: { guide: { label, to, target? }, contact: {...} } }
+ * links may also be an array, addressed as {0}, {1}, ...
+ *
+ * Output is a list of text and link parts rendered with interpolation and NuxtLink; no HTML is
+ * ever parsed. Only "/", "#", "?", http(s):, mailto: and tel: targets become links; anything
+ * else (javascript:, data:, ...) renders as plain label text. Unknown tokens stay literal.
+ */
+const TOKEN = /\{([A-Za-z0-9_-]+)\}/g;
+const SAFE = /^(\/(?!\/)|#|\?|https?:\/\/|mailto:|tel:)/i;
+
+export function isRichAnswer(answer) {
+	return !!answer && typeof answer === "object" && typeof answer.text === "string";
+}
+
+export function answerParts(answer) {
+	if (!isRichAnswer(answer)) return [{ text: answer == null ? "" : String(answer) }];
+	const links = answer.links || {};
+	const parts = [];
+	let last = 0;
+	for (const m of answer.text.matchAll(TOKEN)) {
+		const link = links[m[1]];
+		if (!link || typeof link.label !== "string") continue;
+		if (m.index > last) parts.push({ text: answer.text.slice(last, m.index) });
+		const to = typeof link.to === "string" ? link.to.trim() : "";
+		if (to && SAFE.test(to)) {
+			const target = link.target || undefined;
+			parts.push({
+				to,
+				label: link.label,
+				target,
+				rel: target === "_blank" ? "noopener noreferrer" : undefined,
+			});
+		} else {
+			parts.push({ text: link.label });
+		}
+		last = m.index + m[0].length;
+	}
+	if (last < answer.text.length) parts.push({ text: answer.text.slice(last) });
+	return parts;
+}
+
+export function answerPlainText(answer) {
+	return answerParts(answer)
+		.map((p) => (p.to ? p.label : p.text))
+		.join("");
+}
+
+export const useFaqAnswer = () => ({ isRichAnswer, answerParts, answerPlainText });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",