@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.37-alpha.0

package/v2Containers/Rcs/components/CarouselCard.js

@@ -15,6 +15,7 @@ import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import TagList from '../../TagList';
 import globalMessages from '../../Cap/messages';
 import messages from '../messages';
+import { RCS_TAG_AREA_FIELD_TITLE, RCS_TAG_AREA_FIELD_DESC } from '../constants';
 import CarouselCardMedia from './CarouselCardMedia';
 import CarouselCardButtons from './CarouselCardButtons';
 import CarouselCharacterCount from './CarouselCharacterCount';
@@ -50,7 +51,8 @@ const CarouselCard = ({
   onDescriptionChange,
   onTitleAddVar,
   onDescriptionAddVar,
-  onTagSelect,
+  onTitleTagSelect,
+  onDescTagSelect,
   onContextChange,
   renderEditMessage,
   onFieldChange,
@@ -137,7 +139,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onTitleTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -159,7 +161,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.title || '', cardIndex)
+          renderEditMessage(card.title || '', cardIndex, RCS_TAG_AREA_FIELD_TITLE)
         ) : (
           <CapInput
             value={card.title || ''}
@@ -189,7 +191,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onDescTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -211,7 +213,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.description || '', cardIndex)
+          renderEditMessage(card.description || '', cardIndex, RCS_TAG_AREA_FIELD_DESC)
         ) : (
           <TextArea
             autosize={{ minRows: 3, maxRows: 5 }}
@@ -286,7 +288,8 @@ CarouselCard.propTypes = {
   onDescriptionChange: PropTypes.func.isRequired,
   onTitleAddVar: PropTypes.func.isRequired,
   onDescriptionAddVar: PropTypes.func.isRequired,
-  onTagSelect: PropTypes.func.isRequired,
+  onTitleTagSelect: PropTypes.func.isRequired,
+  onDescTagSelect: PropTypes.func.isRequired,
   onContextChange: PropTypes.func,
   renderEditMessage: PropTypes.func.isRequired,
   onFieldChange: PropTypes.func.isRequired,

package/v2Containers/Rcs/constants.js

@@ -78,8 +78,13 @@ export const rcsVarTestRegex = /^\{\{[^}]+\}\}$/;
 export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
 /** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
 export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
-/** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
-export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.()]+$/;
+/**
+ * Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the
+ * editor). Carousel slots are now keyed by global position (see `computeCarouselVarSlotKeys`), a
+ * plain number, so this only needs to match bare semantic names — the optional `cN::` prefix is
+ * kept solely so `pickRcsCardVarMappedEntries` doesn't drop legacy scoped keys from older payloads.
+ */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^(?:c\d+::)?[\w.()]+$/;
 /** Escape all special RegExp characters in an arbitrary string before using it in `new RegExp(...)`. */
 export const REGEX_SPECIAL_CHARS_ESCAPE_PATTERN = /[-/\\^$*+?.()|[\]{}]/g;
 /** Entire string is wrapped in `{{…}}` mustache delimiters (allows any content including `}`). */

package/v2Containers/Rcs/index.js

@@ -175,7 +175,7 @@ import {
   getCarouselDescriptionCharacterCount,
   buildCarouselCardsForPreview as buildCarouselCardsForPreviewUtil,
   buildCarouselCardContentForPayload,
-  getCarouselVarMapKey,
+  computeCarouselVarSlotKeys,
 } from './carouselUtils';
 import CarouselDimensionSelection from './components/CarouselDimensionSelection';
 import CarouselCard from './components/CarouselCard';
@@ -271,7 +271,12 @@ export const Rcs = (props) => {
   const [carouselErrors, setCarouselErrors] = useState([]); // [{ title: string|false, description: string|false }]
   const [activeCarouselIndex, setActiveCarouselIndex] = useState('0');
   const [carouselResetNonce, setCarouselResetNonce] = useState(0);
-  const [carouselFocusedVarId, setCarouselFocusedVarId] = useState('');
+  // Title and description each track their own last-focused var slot (mirrors titleTextAreaId/
+  // descTextAreaId for the single-card flow) — a single shared id would let a click on the
+  // "Add Labels" picker next to one field silently apply to whichever field was focused last,
+  // if the user hadn't just clicked into that field's own var slot.
+  const [carouselTitleFocusedVarId, setCarouselTitleFocusedVarId] = useState('');
+  const [carouselDescFocusedVarId, setCarouselDescFocusedVarId] = useState('');
    const [imageError, setImageError] = useState(null);
   const [templateTitleError, setTemplateTitleError] = useState(false);
   const [cardVarMapped, setCardVarMapped] = useState({});
@@ -597,7 +602,8 @@ export const Rcs = (props) => {
           }}
           onTitleAddVar={() => appendVarToCarouselField(index, 'title')}
           onDescriptionAddVar={() => appendVarToCarouselField(index, 'description')}
-          onTagSelect={onCarouselTagSelect}
+          onTitleTagSelect={onCarouselTitleTagSelect}
+          onDescTagSelect={onCarouselDescTagSelect}
           onContextChange={handleOnTagsContextChange}
           renderEditMessage={renderCarouselEditMessage}
           onFieldChange={(fieldName, value) => handleCarouselValueChange(index, [{ fieldName, value }])}
@@ -656,7 +662,8 @@ export const Rcs = (props) => {
             onChange={(key) => {
               setActiveCarouselIndex(`${key}`);
               // reset focused var when switching cards (as per requirement)
-              setCarouselFocusedVarId('');
+              setCarouselTitleFocusedVarId('');
+              setCarouselDescFocusedVarId('');
             }}
             panes={getCarouselTabPanes()}
           />
@@ -776,7 +783,7 @@ export const Rcs = (props) => {
       ['title', 'description'].forEach((field) => {
         const templateStr = card?.[field] || '';
         if (!templateStr) return;
-        const resolved = resolveCarouselTemplateWithMap(templateStr, idx);
+        const resolved = resolveCarouselTemplateWithMap(templateStr, idx, field === 'description');
         if (!resolved) {
           updateCarouselErrors(idx, { [field]: false });
           return;
@@ -869,17 +876,22 @@ export const Rcs = (props) => {
   };
 
   /**
-   * Carousel resolve: each card's variables live under their own `getCarouselVarMapKey(cardIndex, name)`
-   * key in `cardVarMapped` (see that helper's doc) — no global slot-offset arithmetic needed since
-   * cards can no longer collide with each other's entries.
+   * Carousel resolve: each variable slot's key comes from `computeCarouselVarSlotKeys` (title,
+   * then description, per card; same name within a card shares one key; different cards never
+   * collide). A slot's key never depends on which tag currently fills it.
    */
-  const resolveCarouselTemplateWithMap = (str = '', cardIndex) => {
+  const resolveCarouselTemplateWithMap = (str = '', cardIndex, isDescField = false) => {
     if (!str) return '';
     const arr = splitTemplateVarStringRcs(str);
+    const fieldKeys = (isDescField
+      ? computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex]?.description
+      : computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex]?.title) ?? [];
+    let varOrdinal = 0;
     return arr.map((elem) => {
       if (rcsVarTestRegex.test(elem)) {
-        const varName = getVarNameFromToken(elem);
-        const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)];
+        const slotKey = fieldKeys[varOrdinal];
+        varOrdinal += 1;
+        const slotValue = cardVarMapped?.[slotKey];
         if (isNil(slotValue) || String(slotValue)?.trim?.() === '') return elem;
         return String(slotValue);
       }
@@ -1237,35 +1249,15 @@ export const Rcs = (props) => {
         setActiveCarouselIndex('0');
 
         if (cards.length > 1) {
-
-          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}, idx) => {
+          // Each card's own `cardVarMapped` is already keyed by global var position (see
+          // computeCarouselVarSlotKeys) — a slot's key is assigned once, from where its token
+          // sits in the template text, and never depends on which tag fills it. So merging every
+          // card's own map directly is correct and collision-free: no per-card coalescing,
+          // normalizing, or re-scoping needed (unlike the old name-based scoped-key scheme).
+          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}) => {
             const rawCardMap = c?.cardVarMapped;
             if (rawCardMap == null || typeof rawCardMap !== 'object') return merged;
-            if (idx === 0) return { ...merged, ...rawCardMap };
-            const cardTitle = c?.title != null ? String(c.title) : '';
-            const cardDesc = c?.description != null ? String(c.description) : '';
-            const cardTokens = [
-              ...(cardTitle ? cardTitle.match(rcsVarRegex) ?? [] : []),
-              ...(cardDesc ? cardDesc.match(rcsVarRegex) ?? [] : []),
-            ];
-            const cardOrderedTagNames = cardTokens.map((token) => getVarNameFromToken(token)).filter(Boolean);
-            const cardMapBeforeCoalesce = isFullMode
-              ? normalizeCardVarMapped(rawCardMap, cardOrderedTagNames)
-              : { ...rawCardMap };
-            const cardMapAfterCoalesce = coalesceCardVarMappedToTemplate(
-              cardMapBeforeCoalesce,
-              cardTitle,
-              cardDesc,
-              rcsVarRegex,
-            );
-            const cardMapAfterSlotSync = !isFullMode
-              ? syncCardVarMappedSemanticsFromSlots(cardMapAfterCoalesce, cardTitle, cardDesc, rcsVarRegex)
-              : cardMapAfterCoalesce;
-            const namespacedCardMap = {};
-            Object.entries(cardMapAfterSlotSync).forEach(([key, value]) => {
-              namespacedCardMap[getCarouselVarMapKey(idx, key)] = value;
-            });
-            return { ...merged, ...namespacedCardMap };
+            return { ...merged, ...rawCardMap };
           }, { ...(previousVarMap || {}) }));
         }
 
@@ -1606,25 +1598,51 @@ export const Rcs = (props) => {
 
   const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
 
-  const onCarouselTagSelect = (data) => {
-    if (!carouselFocusedVarId) return;
-    const sep = carouselFocusedVarId.lastIndexOf('_');
-    if (sep === -1) return;
-    const token = carouselFocusedVarId.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
-    if (!variableName) return;
+  /** Field-local var ordinal (0-based, vars only) for a `{{tok}}_segIdx` composite id — scoped to
+   * a single field's own template string (title and description are tracked independently). */
+  const getCarouselFieldLocalVarOrdinal = (compositeId, fieldTemplateStr) => {
+    const segments = splitTemplateVarStringRcs(fieldTemplateStr ?? '');
+    let varOrdinal = 0;
+    for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex += 1) {
+      if (rcsVarTestRegex.test(segments[segmentIndex])) {
+        if (`${segments[segmentIndex]}_${segmentIndex}` === compositeId) return varOrdinal;
+        varOrdinal += 1;
+      }
+    }
+    return null;
+  };
+
+  // The card's placeholder (numeric {{N}} or a bare semantic token like {{first_name}}) is locked
+  // here — picking a tag only supplies/replaces the *value* behind that slot in cardVarMapped, it
+  // never rewrites the card's title/description text. `focusedVarId` is passed in by the caller
+  // (title vs description each track their own last-focused slot, like titleTextAreaId/
+  // descTextAreaId) so a click on one field's "Add Labels" can never apply to the other field's
+  // last-focused slot. The slot's key is its global position across the whole carousel — assigned
+  // once from where its token sits in the template text, never from whatever tag currently fills
+  // it — so swapping tags never changes the key and never collides with another card's slot.
+  const onCarouselTagSelect = (data, focusedVarId, isDescField) => {
+    if (!focusedVarId) return;
     const activeIdx = parseInt(activeCarouselIndex, 10);
-    const mapKey = getCarouselVarMapKey(isNaN(activeIdx) ? 0 : activeIdx, variableName);
-    setCardVarMapped((prev) => {
-      const base = (prev?.[mapKey] ?? '').toString();
-      const nextVal = `${base}{{${data}}}`;
-      return {
-        ...(prev || {}),
-        [mapKey]: nextVal,
-      };
-    });
+    const cardIndex = isNaN(activeIdx) ? 0 : activeIdx;
+    const fieldTemplateStr = (isDescField
+      ? carouselData?.[cardIndex]?.description
+      : carouselData?.[cardIndex]?.title) || '';
+    const localVarOrdinal = getCarouselFieldLocalVarOrdinal(focusedVarId, fieldTemplateStr);
+    if (localVarOrdinal == null) return;
+    const slotKeys = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const slotKey = (isDescField ? slotKeys?.description : slotKeys?.title)?.[localVarOrdinal];
+    if (!slotKey) return;
+
+    setCardVarMapped((prev) => ({
+      ...(prev || {}),
+      [slotKey]: `{{${data}}}`,
+    }));
   };
 
+  const onCarouselTitleTagSelect = (data) => onCarouselTagSelect(data, carouselTitleFocusedVarId, false);
+
+  const onCarouselDescTagSelect = (data) => onCarouselTagSelect(data, carouselDescFocusedVarId, true);
+
   //removing optout tag for rcs
   const getRcsTags = () => {
     const tempTags = cloneDeep(tags);
@@ -1710,7 +1728,7 @@ export const Rcs = (props) => {
               key={`${elem}_${index}`}
               placeholder={`enter the value for ${elem}`}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={e => textAreaValueChange(e, type)}
+              onChange={e => textAreaValueChange(e)}
               value={textAreaValue(index, type)}
               onFocus={(e) => setTextAreaId(e, type)}
             />
@@ -1930,16 +1948,21 @@ const onTitleAddVar = () => {
 
   // Carousel: render variable-value editor for a given template string (title/description) belonging
   // to `cardIndex`. This matches rich-card/text edit behavior: static pieces are read-only, variable
-  // tokens are editable. Each card's values live under their own `getCarouselVarMapKey(cardIndex, name)`
-  // key in `cardVarMapped` so two cards using the same variable/tag name never collide.
-  const renderCarouselEditMessage = (templateStr, cardIndex) => {
+  // tokens are editable. Each slot's key comes from `computeCarouselVarSlotKeys` — stable regardless
+  // of which tag fills it, and independent even from another occurrence of the same tag name.
+  const renderCarouselEditMessage = (templateStr, cardIndex, fieldType) => {
     const renderArray = [];
     const templateArr = splitTemplateVarString(templateStr);
+    const isDescField = fieldType === RCS_TAG_AREA_FIELD_DESC;
+    const slotKeysForCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const fieldKeys = (isDescField ? slotKeysForCard?.description : slotKeysForCard?.title) ?? [];
+    let varOrdinal = 0;
     if (templateArr?.length) {
       templateArr.forEach((elem, index) => {
         if (rcsVarTestRegex.test(elem)) {
           const varName = getVarNameFromToken(elem);
-          const mapKey = getCarouselVarMapKey(cardIndex, varName);
+          const mapKey = fieldKeys[varOrdinal];
+          varOrdinal += 1;
           const computedValue = varName ? ((cardVarMapped?.[mapKey] ?? '').toString()) : '';
           renderArray.push(
             <div
@@ -1950,11 +1973,15 @@ const onTitleAddVar = () => {
                 id={`${elem}_${index}`}
                 placeholder={`enter the value for ${elem}`}
                 autosize={{ minRows: 1, maxRows: 3 }}
-                onChange={(e) => textAreaValueChange(e, cardIndex)}
+                onChange={(e) => carouselTextAreaValueChange(e, cardIndex, fieldType)}
                 value={computedValue}
                 onFocus={(e) => {
                   const id = e?.target?.id || e?.currentTarget?.id || '';
-                  setCarouselFocusedVarId(id);
+                  if (fieldType === RCS_TAG_AREA_FIELD_DESC) {
+                    setCarouselDescFocusedVarId(id);
+                  } else {
+                    setCarouselTitleFocusedVarId(id);
+                  }
                 }}
               />
             </div>
@@ -1975,7 +2002,7 @@ const onTitleAddVar = () => {
     return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
   };
 
-  const textAreaValueChange = (e, cardIndex) => {
+  const textAreaValueChange = (e) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
@@ -1986,14 +2013,38 @@ const onTitleAddVar = () => {
     const variableName = getVarNameFromToken(token);
 
     if (variableName) {
-      const mapKey = getCarouselVarMapKey(cardIndex, variableName);
+      const nextVal = isInvalidValue ? "" : value;
       setCardVarMapped((prev) => ({
         ...prev,
-        [mapKey]: isInvalidValue ? "" : value,
+        [variableName]: nextVal,
       }));
     }
   };
 
+  // Carousel: typing directly into a slot's value box (as opposed to picking a tag) — same global
+  // positional key as onCarouselTagSelect/renderCarouselEditMessage, so both ways of filling a
+  // slot land on the identical key.
+  const carouselTextAreaValueChange = (e, cardIndex, fieldType) => {
+    const value = e?.target?.value ?? '';
+    const id = e?.target?.id || e?.currentTarget?.id || '';
+    if (!id) return;
+    const isDescField = fieldType === RCS_TAG_AREA_FIELD_DESC;
+    const fieldTemplateStr = (isDescField
+      ? carouselData?.[cardIndex]?.description
+      : carouselData?.[cardIndex]?.title) || '';
+    const localVarOrdinal = getCarouselFieldLocalVarOrdinal(id, fieldTemplateStr);
+    if (localVarOrdinal == null) return;
+    const slotKeys = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const mapKey = (isDescField ? slotKeys?.description : slotKeys?.title)?.[localVarOrdinal];
+    if (!mapKey) return;
+    const isInvalidValue = value?.trim() === "";
+    const nextVal = isInvalidValue ? "" : value;
+    setCardVarMapped((prev) => ({
+      ...prev,
+      [mapKey]: nextVal,
+    }));
+  };
+
   const setTextAreaId = (e, type) => {
     // VarSegmentMessageEditor calls onFocus(id) with a plain string; DOM events
     // have an `.target.id` shape. Support both.
@@ -2844,9 +2895,8 @@ const onTitleAddVar = () => {
         // the user mapped via cardVarMapped. Run this for ALL modes (create, edit, consumer) so that:
         //  - buildRcsTestMessagePayload sends real Capillary tag names to the test API, and
         //  - prepareTagExtractionPayload can extract tag metadata from the card content.
-        // Each card's variables live under their own getCarouselVarMapKey(cardIndex, name) slot, so
-        // no cross-card slot-offset bookkeeping is needed (or safe — two cards' variables never share
-        // a key, so there is nothing to accidentally collide).
+        // Each variable slot's key comes from computeCarouselVarSlotKeys, so two cards' variables
+        // never share a key even when they pick the same tag name for their own slot.
         rcsForTest = {
           ...rcsForTest,
           rcsContent: {
@@ -2854,8 +2904,8 @@ const onTitleAddVar = () => {
             cardContent: cardContent.map((card, cardIndex) => {
               const rawTitle = card.title || '';
               const rawDesc = card.description || '';
-              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex);
-              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex);
+              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex, false);
+              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex, true);
               return { ...card, title: resolvedTitle, description: resolvedDesc };
             }),
           },
@@ -3066,12 +3116,16 @@ const onTitleAddVar = () => {
       ['title', 'description'].some((field) => !(card?.[field] || '').trim())
     );
     if (hasEmptyField) return true;
+    const slotKeysByCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex);
     const unfilledVar = (carouselData || []).some((card, cardIndex) =>
       ['title', 'description'].some((field) => {
+        const isDescField = field === 'description';
         const tokens = splitTemplateVarStringRcs(card?.[field] || '').filter((token) => rcsVarTestRegex.test(token));
-        return tokens.some((token) => {
-          const name = token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
-          const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, name)];
+        if (tokens.length === 0) return false;
+        const fieldKeys = (isDescField ? slotKeysByCard[cardIndex]?.description : slotKeysByCard[cardIndex]?.title) ?? [];
+        return tokens.some((token, localVarOrdinal) => {
+          const slotKey = fieldKeys[localVarOrdinal];
+          const slotValue = cardVarMapped?.[slotKey];
           return slotValue == null || String(slotValue).trim() === '';
         });
       })

package/v2Containers/Rcs/rcsLibraryHydrationUtils.js

@@ -447,6 +447,7 @@ export function syncCardVarMappedSemanticsFromSlots(
   templateDesc,
   rcsVarRegex,
 ) {
+  console.log('syncCardVarMappedSemanticsFromSlots', cardVarMappedInput, templateTitle, templateDesc);
   const cardVarMappedSynced =
     cardVarMappedInput != null && typeof cardVarMappedInput === 'object'
       ? { ...cardVarMappedInput }
@@ -459,11 +460,48 @@ export function syncCardVarMappedSemanticsFromSlots(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
-    const numericSlotKey = String(slotIndexZeroBased + 1);
-    const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
-    const numericSlotValueTrimmed = String(cardVarMappedSynced[numericSlotKey] ?? '').trim();
-    if (!semanticValueTrimmed && numericSlotValueTrimmed) {
-      cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[numericSlotKey];
+
+    if (!RCS_NUMERIC_VAR_NAME_REGEX.test(semanticVarName)) {
+      // A numeric slot may already self-reference this exact tag (e.g. "4" -> "{{last_name}}") when
+      // the template's own numeric placeholder has since been resolved to this tag in the text —
+      // that numeric key is the source of truth, not this token's position.
+      const mustacheSelfReference = `{{${semanticVarName}}}`;
+      const existingNumericKeyForSemantic = Object.keys(cardVarMappedSynced).find((key) => (
+        RCS_NUMERIC_VAR_NAME_REGEX.test(key) && cardVarMappedSynced[key] === mustacheSelfReference
+      ));
+      if (existingNumericKeyForSemantic) {
+        const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+        const numericValueTrimmed = String(cardVarMappedSynced[existingNumericKeyForSemantic] ?? '').trim();
+        if (!semanticValueTrimmed && numericValueTrimmed) {
+          cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[existingNumericKeyForSemantic];
+        }
+        return;
+      }
+
+      // Legacy: template embeds the semantic token directly ({{user_name}}), but older payloads
+      // stored the resolved value under a position-based numeric key ("1", "2", …).
+      const numericSlotKey = String(slotIndexZeroBased + 1);
+      const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+      const numericSlotValueTrimmed = String(cardVarMappedSynced[numericSlotKey] ?? '').trim();
+      if (!semanticValueTrimmed && numericSlotValueTrimmed) {
+        cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[numericSlotKey];
+      }
+      return;
+    }
+
+    // Carousel numeric placeholder ({{3}}, {{4}}, …): the slot key IS the token digit itself —
+    // numbers are allocated globally across the whole carousel (getNextCarouselVarToken), not
+    // re-numbered per card, so a position-based key here would target the wrong slot. Its value
+    // may be a mustache-wrapped tag reference (e.g. "3" -> "{{last_name}}") — mirror that onto the
+    // bare semantic key too so VarSegment editors keyed by tag name also prepopulate.
+    const slotValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+    if (!slotValueTrimmed) return;
+    const mustacheInnerMatch = slotValueTrimmed.match(/^\{\{([^}]+)\}\}$/);
+    const innerSemanticName = mustacheInnerMatch?.[1]?.trim();
+    if (!innerSemanticName || innerSemanticName === semanticVarName) return;
+    const existingSemanticValue = String(cardVarMappedSynced[innerSemanticName] ?? '').trim();
+    if (!existingSemanticValue) {
+      cardVarMappedSynced[innerSemanticName] = cardVarMappedSynced[semanticVarName];
     }
   });
   return cardVarMappedSynced;

package/v2Containers/Rcs/tests/CarouselCard.test.js

@@ -220,7 +220,8 @@ const baseProps = {
   onDescriptionChange: jest.fn(),
   onTitleAddVar: jest.fn(),
   onDescriptionAddVar: jest.fn(),
-  onTagSelect: jest.fn(),
+  onTitleTagSelect: jest.fn(),
+  onDescTagSelect: jest.fn(),
   onContextChange: jest.fn(),
   renderEditMessage: (val) => <div data-testid="render-edit-message">{val}</div>,
   onFieldChange: jest.fn(),