@templatical/editor 0.35.0 → 0.37.0

package/dist/cdn/chunks/{MergeTagInput-D76Kyvgu.js.map → MergeTagInput-l7paaAml.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagInput-D76Kyvgu.js","names":["$emit","$emit"],"sources":["../../../src/utils/mergeTagTrigger.ts","../../../src/utils/textFieldCaret.ts","../../../src/composables/useMergeTagAutocomplete.ts","../../../src/composables/useMergeTagField.ts","../../../src/components/MergeTagSegments.vue","../../../src/components/MergeTagSegments.vue","../../../src/components/MergeTagInsertButton.vue","../../../src/components/MergeTagInsertButton.vue","../../../src/components/LogicTagInsertButton.vue","../../../src/components/LogicTagInsertButton.vue","../../../src/components/MergeTagInput.vue","../../../src/components/MergeTagInput.vue"],"sourcesContent":["/**\n * Result of a merge-tag trigger scan — the caret sits inside an open tag.\n */\nexport interface OpenMergeTagTrigger {\n  /** Index in the field value where the trigger opener starts. */\n  triggerStart: number;\n  /** Caret index the scan ran at (also the end of `query`). */\n  caret: number;\n  /** Text typed between the opener and the caret — the autocomplete filter. */\n  query: string;\n}\n\n/**\n * Detects whether the caret sits inside an *open* merge-tag trigger: the user\n * has typed the syntax opener (e.g. `{{`) and is mid-typing the tag name with\n * no closing delimiter yet. Returns the opener position + query so the caller\n * can drive the autocomplete popup, or `null` when the caret is not inside an\n * open trigger.\n *\n * Mirrors `@tiptap/suggestion`'s behavior with `allowSpaces: false`: the run\n * between the opener and the caret ends at the first whitespace, and a closing\n * delimiter inside that run means the tag is already complete (`{{first_name}}`)\n * so the popup must not reappear over it.\n */\nexport function findOpenMergeTagTrigger(\n  value: string,\n  caret: number,\n  triggerChar: string,\n  closingChar: string | null,\n): OpenMergeTagTrigger | null {\n  if (!triggerChar) return null;\n\n  const before = value.slice(0, caret);\n  const triggerStart = before.lastIndexOf(triggerChar);\n  if (triggerStart === -1) return null;\n\n  const query = before.slice(triggerStart + triggerChar.length);\n\n  // Whitespace ends the query (allowSpaces: false parity).\n  if (/\\s/.test(query)) return null;\n\n  // A closing delimiter between the opener and the caret means the tag is\n  // already complete — don't reopen the popup over a finished tag.\n  if (closingChar && query.includes(closingChar)) return null;\n\n  return { triggerStart, caret, query };\n}\n","/**\n * Viewport-space caret geometry for `<input>` / `<textarea>` elements.\n *\n * Native text controls expose no caret coordinates (unlike ProseMirror, which\n * hands the merge-tag popup a `clientRect()`). The standard workaround is a\n * hidden \"mirror\" element that clones the field's text metrics; the caret's\n * pixel position is read from a marker span placed at the caret offset. This\n * lets the input/textarea autocomplete anchor its popup at the caret exactly\n * like the rich-text editor does.\n *\n * Adapted from component/textarea-caret-position (MIT). Returns a viewport\n * `DOMRect` (same coordinate space as `Range.getBoundingClientRect`) so the\n * shared merge-tag popup controller positions it identically to the TipTap path.\n */\n\n// Computed-style properties copied onto the mirror so its text wraps and\n// measures exactly like the source field.\nconst MIRRORED_PROPERTIES = [\n  \"boxSizing\",\n  \"width\",\n  \"borderTopWidth\",\n  \"borderRightWidth\",\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderStyle\",\n  \"paddingTop\",\n  \"paddingRight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"fontStyle\",\n  \"fontVariant\",\n  \"fontWeight\",\n  \"fontStretch\",\n  \"fontSize\",\n  \"lineHeight\",\n  \"fontFamily\",\n  \"textAlign\",\n  \"textTransform\",\n  \"textIndent\",\n  \"letterSpacing\",\n  \"wordSpacing\",\n  \"tabSize\",\n  \"whiteSpace\",\n  \"wordWrap\",\n  \"wordBreak\",\n] as const;\n\nfunction toRect(left: number, top: number, bottom: number): DOMRect {\n  const height = bottom - top;\n  return {\n    left,\n    top,\n    bottom,\n    right: left,\n    width: 0,\n    height,\n    x: left,\n    y: top,\n    toJSON: () => ({}),\n  } as DOMRect;\n}\n\n/**\n * Returns the viewport rect of the caret at `position` in a text field, or\n * `null` when the field isn't laid out (detached / no view). The rect is a\n * zero-width vertical strip at the caret, one line tall — matching the shape\n * `Range.getBoundingClientRect()` produces for a collapsed selection.\n */\nexport function getCaretRect(\n  el: HTMLInputElement | HTMLTextAreaElement,\n  position: number,\n): DOMRect | null {\n  const doc = el.ownerDocument;\n  const win = doc.defaultView;\n  if (!win) return null;\n\n  const isInput = el.tagName === \"INPUT\";\n  const style = win.getComputedStyle(el);\n\n  const mirror = doc.createElement(\"div\");\n  mirror.setAttribute(\"aria-hidden\", \"true\");\n  const s = mirror.style;\n  s.position = \"absolute\";\n  s.visibility = \"hidden\";\n  s.top = \"0\";\n  s.left = \"0\";\n  s.overflow = \"hidden\";\n  s.whiteSpace = isInput ? \"pre\" : \"pre-wrap\";\n  s.wordWrap = isInput ? \"normal\" : \"break-word\";\n  const target = s as unknown as Record<string, string>;\n  const source = style as unknown as Record<string, string>;\n  for (const prop of MIRRORED_PROPERTIES) {\n    target[prop] = source[prop];\n  }\n  // A single-line input never wraps; let the mirror grow with the text so the\n  // marker's horizontal offset tracks the caret.\n  if (isInput) {\n    s.width = \"auto\";\n    s.whiteSpace = \"pre\";\n  }\n\n  const value = el.value;\n  let head = value.slice(0, position);\n  if (isInput) {\n    // <input> collapses whitespace runs to a single rendered space; replace\n    // with non-breaking spaces so the mirror's width matches the field.\n    head = head.replace(/\\s/g, \" \");\n  }\n  mirror.textContent = head;\n\n  const marker = doc.createElement(\"span\");\n  // Remaining text (or a placeholder) gives the marker the caret line's height.\n  marker.textContent = value.slice(position) || \".\";\n  mirror.appendChild(marker);\n\n  doc.body.appendChild(mirror);\n  const markerTop = marker.offsetTop;\n  const markerLeft = marker.offsetLeft;\n  doc.body.removeChild(mirror);\n\n  const elRect = el.getBoundingClientRect();\n  const borderTop = parseFloat(style.borderTopWidth) || 0;\n  const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n  const lineHeight =\n    parseFloat(style.lineHeight) || parseFloat(style.fontSize) || 0;\n\n  const left = elRect.left + markerLeft + borderLeft - el.scrollLeft;\n\n  // A single-line input vertically centers its text, which the block-flow\n  // mirror can't replicate — anchor vertically to the field itself so the\n  // popup sits directly under the input. Textareas use the measured caret line.\n  if (isInput) {\n    return toRect(left, elRect.top, elRect.bottom);\n  }\n\n  const top = elRect.top + markerTop + borderTop - el.scrollTop;\n  return toRect(left, top, top + lineHeight);\n}\n","import {\n  getSyntaxClosingChar,\n  getSyntaxTriggerChar,\n  type MergeTag,\n  type SyntaxPreset,\n} from \"@templatical/types\";\nimport {\n  getCurrentScope,\n  inject,\n  isRef,\n  nextTick,\n  onScopeDispose,\n  type Ref,\n} from \"vue\";\nimport type { Translations } from \"../i18n\";\nimport { TRANSLATIONS_KEY } from \"../keys\";\nimport {\n  createMergeTagPopup,\n  filterMergeTags,\n} from \"../extensions/MergeTagSuggestion\";\nimport {\n  findOpenMergeTagTrigger,\n  type OpenMergeTagTrigger,\n} from \"../utils/mergeTagTrigger\";\nimport { getCaretRect } from \"../utils/textFieldCaret\";\nimport { usePopoverRoot } from \"./usePopoverRoot\";\n\nexport interface UseMergeTagAutocompleteOptions {\n  /** The `<input>` / `<textarea>` the popup anchors to. */\n  elementRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** Reads the current field value. */\n  modelValue: () => string;\n  /** Emits a new field value. */\n  emit: (value: string) => void;\n  /** Available merge tags (the autocomplete filter source). */\n  mergeTags: MergeTag[];\n  /** Resolved merge-tag syntax. */\n  syntax: SyntaxPreset;\n  /** Consumer's `mergeTags.autocomplete` flag. */\n  enabled: boolean;\n  /**\n   * Invoked right before a picked tag is emitted, so the field can keep edit\n   * mode and not flip to the chip display while the caret is still active.\n   */\n  onInsert?: () => void;\n}\n\nexport interface UseMergeTagAutocompleteReturn {\n  /**\n   * Whether autocomplete can ever fire. Mirrors the rich-text gate exactly:\n   * enabled + a built-in trigger syntax + at least one tag to filter.\n   */\n  available: boolean;\n  /** Recompute the popup after the value or caret changed. */\n  refresh: () => void;\n  /**\n   * Field `keydown` handler. Returns `true` when the popup consumed the key\n   * (the caller must then `preventDefault`); `false` to let the field handle it.\n   */\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  /** Close the popup (e.g. on blur). Idempotent. */\n  close: () => void;\n  /** Whether the popup is currently open. */\n  isOpen: () => boolean;\n}\n\n// Horizontal caret moves take the caret out of the query run — dismiss the\n// popup (like navigating away in the rich-text editor) and let the caret move.\nconst CARET_MOVE_KEYS = new Set([\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"]);\n\n/**\n * Type-ahead merge-tag autocomplete for a native `<input>` / `<textarea>`.\n *\n * Drives the SAME popup controller as the rich-text (`@tiptap/suggestion`)\n * path — see `createMergeTagPopup` — so the popup's rendering, positioning,\n * keyboard behavior, and ARIA are identical across both surfaces. The only\n * field-specific work is here: detecting the open trigger in the raw string\n * (`findOpenMergeTagTrigger`), measuring the caret rect without ProseMirror\n * (`getCaretRect`), and replacing the typed fragment with the picked tag.\n */\nexport function useMergeTagAutocomplete(\n  options: UseMergeTagAutocompleteOptions,\n): UseMergeTagAutocompleteReturn {\n  const { elementRef, modelValue, emit, mergeTags, syntax, enabled, onInsert } =\n    options;\n\n  const triggerChar = getSyntaxTriggerChar(syntax);\n  const closingChar = getSyntaxClosingChar(syntax);\n  const available = enabled && triggerChar !== null && mergeTags.length > 0;\n\n  // Resolve the empty-state label the same way the rich-text path does —\n  // inject with a null default so headless callers (no translations provider)\n  // don't throw, falling back to the English string.\n  const injectedTranslations = inject(TRANSLATIONS_KEY, null) as\n    Translations | Ref<Translations> | null;\n  const resolvedTranslations = isRef(injectedTranslations)\n    ? injectedTranslations.value\n    : injectedTranslations;\n  const emptyText =\n    resolvedTranslations?.mergeTag?.suggestionEmpty ?? \"No matching merge tags\";\n\n  const popoverRoot = usePopoverRoot();\n  const popup = createMergeTagPopup(emptyText, popoverRoot);\n\n  let disposed = false;\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disposed = true;\n      popup.close();\n    });\n  }\n\n  function currentMatch(el: HTMLInputElement | HTMLTextAreaElement) {\n    const value = el.value ?? \"\";\n    const caret = el.selectionStart ?? value.length;\n    return findOpenMergeTagTrigger(\n      value,\n      caret,\n      triggerChar as string,\n      closingChar,\n    );\n  }\n\n  function applySelection(\n    el: HTMLInputElement | HTMLTextAreaElement,\n    match: OpenMergeTagTrigger,\n    tag: MergeTag,\n  ): void {\n    const value = el.value ?? modelValue();\n    // Absorb a matching closer sitting immediately after the caret so\n    // `{{fir}}` → pick → `{{first_name}}`, never `{{first_name}}}}`.\n    const afterCaret = value.slice(match.caret);\n    const trailing =\n      closingChar && afterCaret.startsWith(closingChar)\n        ? closingChar.length\n        : 0;\n    const before = value.slice(0, match.triggerStart);\n    const after = value.slice(match.caret + trailing);\n    const newValue = before + tag.value + after;\n    const newPos = before.length + tag.value.length;\n\n    // Keep the field in edit mode BEFORE emitting: once the value gains a tag,\n    // `hasMergeTags` flips true, and without this the field would swap to the\n    // chip display and unmount the input mid-insert.\n    onInsert?.();\n    emit(newValue);\n    popup.close();\n\n    nextTick(() => {\n      if (disposed) return;\n      const node = elementRef.value;\n      node?.focus();\n      node?.setSelectionRange(newPos, newPos);\n    });\n  }\n\n  function refresh(): void {\n    if (!available || disposed) return;\n    const el = elementRef.value;\n    if (!el) {\n      popup.close();\n      return;\n    }\n    const match = currentMatch(el);\n    if (!match) {\n      popup.close();\n      return;\n    }\n\n    const items = filterMergeTags(mergeTags, match.query);\n    const getRect = () => getCaretRect(el, match.triggerStart);\n    const onCommand = (tag: MergeTag) => applySelection(el, match, tag);\n\n    if (popup.isOpen()) {\n      popup.update({ items, getRect, onCommand });\n    } else {\n      popup.open({ items, getRect, anchorEl: el, onCommand });\n    }\n  }\n\n  function handleKeydown(event: KeyboardEvent): boolean {\n    if (!popup.isOpen()) return false;\n    if (event.key === \"Escape\") {\n      popup.close();\n      return true;\n    }\n    if (CARET_MOVE_KEYS.has(event.key)) {\n      popup.close();\n      return false;\n    }\n    return popup.handleKeyDown(event);\n  }\n\n  return {\n    available,\n    refresh,\n    handleKeydown,\n    close: () => popup.close(),\n    isOpen: () => popup.isOpen(),\n  };\n}\n","import {\n  getLogicMergeTagKeyword,\n  isLogicMergeTagValue,\n} from \"@templatical/types\";\nimport {\n  computed,\n  getCurrentScope,\n  nextTick,\n  onScopeDispose,\n  ref,\n  type ComputedRef,\n  type Ref,\n} from \"vue\";\nimport { useMergeTag } from \"./useMergeTag\";\nimport { useLogicTag } from \"./useLogicTag\";\nimport { useMergeTagAutocomplete } from \"./useMergeTagAutocomplete\";\n\nexport type MergeTagSegment =\n  | { type: \"text\"; value: string }\n  | { type: \"mergeTag\"; value: string; label: string }\n  | { type: \"logicMergeTag\"; value: string; keyword: string };\n\nexport interface UseMergeTagFieldOptions {\n  modelValue: () => string;\n  emit: (value: string) => void;\n  elementRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n}\n\nexport interface UseMergeTagFieldReturn {\n  segments: ComputedRef<MergeTagSegment[]>;\n  hasMergeTags: ComputedRef<boolean>;\n  canRequestMergeTag: boolean;\n  isRequestingMergeTag: Ref<boolean>;\n  canInsertLogicTag: boolean;\n  isRequestingLogicTag: Ref<boolean>;\n  isEditing: Ref<boolean>;\n  startEditing: () => void;\n  stopEditing: () => void;\n  handleInput: (event: Event) => void;\n  /**\n   * Returns whether the autocomplete popup consumed the event. A host with\n   * keys of its own (the link dialog submits on Enter) acts only on `false`.\n   */\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  handleClick: () => void;\n  handleBlur: () => void;\n  clearValue: () => void;\n  insertMergeTag: () => Promise<void>;\n  insertLogicTag: () => Promise<void>;\n  /** Whether type-ahead autocomplete is active for this field. */\n  autocompleteAvailable: boolean;\n}\n\nexport function useMergeTagField(\n  options: UseMergeTagFieldOptions,\n): UseMergeTagFieldReturn {\n  const { modelValue, emit, elementRef } = options;\n\n  const {\n    mergeTags,\n    canRequestMergeTag,\n    isRequesting: isRequestingMergeTag,\n    isMergeTagValue,\n    getMergeTagLabel,\n    requestMergeTag,\n    syntax,\n    autocomplete,\n  } = useMergeTag();\n\n  const {\n    canInsertLogicTag,\n    isRequesting: isRequestingLogicTag,\n    requestLogicTag,\n  } = useLogicTag();\n\n  const isEditing = ref(false);\n  let insertingMergeTag = false;\n  let disposed = false;\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disposed = true;\n    });\n  }\n\n  // Type-ahead autocomplete for the raw <input>/<textarea>, sharing the exact\n  // popup used by the rich-text editor. `onInsert` keeps the field in edit mode\n  // so the freshly inserted tag stays visible instead of flipping to chips.\n  const typeahead = useMergeTagAutocomplete({\n    elementRef,\n    modelValue,\n    emit,\n    mergeTags,\n    syntax,\n    enabled: autocomplete,\n    onInsert: () => {\n      isEditing.value = true;\n    },\n  });\n\n  const segments = computed((): MergeTagSegment[] => {\n    const val = modelValue();\n    if (!val) return [];\n\n    const result: MergeTagSegment[] = [];\n    const combinedSource = `(${syntax.value.source}|${syntax.logic.source})`;\n    const regex = new RegExp(combinedSource, \"g\");\n    let lastIndex = 0;\n    let match;\n\n    while ((match = regex.exec(val)) !== null) {\n      if (match.index > lastIndex) {\n        result.push({\n          type: \"text\",\n          value: val.slice(lastIndex, match.index),\n        });\n      }\n\n      const matched = match[0];\n      if (isMergeTagValue(matched)) {\n        result.push({\n          type: \"mergeTag\",\n          value: matched,\n          label: getMergeTagLabel(matched),\n        });\n      } else if (isLogicMergeTagValue(matched, syntax)) {\n        result.push({\n          type: \"logicMergeTag\",\n          value: matched,\n          keyword: getLogicMergeTagKeyword(matched, syntax),\n        });\n      } else {\n        result.push({ type: \"text\", value: matched });\n      }\n\n      lastIndex = match.index + matched.length;\n    }\n\n    if (lastIndex < val.length) {\n      result.push({ type: \"text\", value: val.slice(lastIndex) });\n    }\n\n    return result;\n  });\n\n  const hasMergeTags = computed(() =>\n    segments.value.some(\n      (s) => s.type === \"mergeTag\" || s.type === \"logicMergeTag\",\n    ),\n  );\n\n  function startEditing(): void {\n    isEditing.value = true;\n    nextTick(() => {\n      elementRef.value?.focus();\n      const len = modelValue()?.length || 0;\n      elementRef.value?.setSelectionRange(len, len);\n    });\n  }\n\n  function stopEditing(): void {\n    if (insertingMergeTag) return;\n    isEditing.value = false;\n  }\n\n  function handleInput(event: Event): void {\n    emit((event.target as HTMLInputElement | HTMLTextAreaElement).value);\n    typeahead.refresh();\n  }\n\n  /**\n   * Field keydown: let the autocomplete popup consume navigation/selection\n   * keys first (Arrow/Enter/Tab/Escape). If it doesn't, Escape falls through\n   * to leaving edit mode.\n   *\n   * Escape is reported as NOT consumed even though it acts here: a host\n   * dialog should close on the same press rather than swallow the first one.\n   */\n  function handleKeydown(event: KeyboardEvent): boolean {\n    if (typeahead.handleKeydown(event)) {\n      event.preventDefault();\n      return true;\n    }\n    if (event.key === \"Escape\") {\n      stopEditing();\n    }\n    return false;\n  }\n\n  /** A click may move the caret into or out of a trigger — re-evaluate. */\n  function handleClick(): void {\n    typeahead.refresh();\n  }\n\n  /** Blur closes the popup, then leaves edit mode. */\n  function handleBlur(): void {\n    typeahead.close();\n    stopEditing();\n  }\n\n  function clearValue(): void {\n    emit(\"\");\n  }\n\n  async function insertMergeTag(): Promise<void> {\n    const cursorPos =\n      isEditing.value && elementRef.value\n        ? (elementRef.value.selectionStart ?? modelValue().length)\n        : modelValue().length;\n\n    insertingMergeTag = true;\n    let mergeTag: Awaited<ReturnType<typeof requestMergeTag>>;\n    try {\n      mergeTag = await requestMergeTag();\n    } finally {\n      insertingMergeTag = false;\n    }\n\n    if (disposed) return;\n\n    if (mergeTag) {\n      const before = modelValue().slice(0, cursorPos);\n      const after = modelValue().slice(cursorPos);\n      const newValue = before + mergeTag.value + after;\n      emit(newValue);\n\n      isEditing.value = true;\n      nextTick(() => {\n        if (disposed) return;\n        const newPos = cursorPos + mergeTag.value.length;\n        elementRef.value?.focus();\n        elementRef.value?.setSelectionRange(newPos, newPos);\n      });\n    }\n  }\n\n  async function insertLogicTag(): Promise<void> {\n    // Read the selection straight from the element (kept focused via the\n    // button's mousedown.prevent). Null only in display mode → append at end.\n    const el = elementRef.value;\n    const start = el?.selectionStart ?? modelValue().length;\n    const end = el?.selectionEnd ?? start;\n\n    insertingMergeTag = true;\n    let item: Awaited<ReturnType<typeof requestLogicTag>>;\n    try {\n      item = await requestLogicTag();\n    } finally {\n      insertingMergeTag = false;\n    }\n\n    if (disposed || !item) return;\n\n    const val = modelValue();\n    let newValue: string;\n    let newPos: number;\n    if (\"before\" in item) {\n      // Pair: wrap the selection with before/after. With no selection\n      // (start === end) the caret lands between them so the user types the\n      // wrapped content — mirrors the rich-text behavior.\n      newValue =\n        val.slice(0, start) +\n        item.before +\n        val.slice(start, end) +\n        item.after +\n        val.slice(end);\n      newPos = start + item.before.length + (end - start);\n    } else {\n      // Tag: insert at the cursor.\n      newValue = val.slice(0, start) + item.value + val.slice(start);\n      newPos = start + item.value.length;\n    }\n    emit(newValue);\n\n    isEditing.value = true;\n    nextTick(() => {\n      if (disposed) return;\n      elementRef.value?.focus();\n      elementRef.value?.setSelectionRange(newPos, newPos);\n    });\n  }\n\n  return {\n    segments,\n    hasMergeTags,\n    canRequestMergeTag,\n    isRequestingMergeTag,\n    canInsertLogicTag,\n    isRequestingLogicTag,\n    isEditing,\n    startEditing,\n    stopEditing,\n    handleInput,\n    handleKeydown,\n    handleClick,\n    handleBlur,\n    clearValue,\n    insertMergeTag,\n    insertLogicTag,\n    autocompleteAvailable: typeahead.available,\n  };\n}\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { MergeTagSegment } from \"../composables/useMergeTagField\";\nimport { X } from \"@lucide/vue\";\n\ndefineProps<{\n  segments: MergeTagSegment[];\n  displayClass: string;\n  pulse?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"edit\"): void;\n  (e: \"clear\"): void;\n}>();\n\nconst { t } = useI18n();\n\nfunction onEdit(): void {\n  emit(\"edit\");\n}\n</script>\n\n<template>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    :aria-label=\"t.mergeTag.clickToEdit\"\n    :class=\"[displayClass, { 'tpl-pulse-fill': pulse }]\"\n    @click=\"onEdit\"\n    @keydown.enter=\"onEdit\"\n    @keydown.space.prevent=\"onEdit\"\n  >\n    <template\n      v-for=\"(seg, i) in segments\"\n      :key=\"`${seg.type}-${i}-${seg.value}`\"\n    >\n      <span\n        v-if=\"seg.type === 'mergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          );\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.label }}\n      </span>\n      <span\n        v-else-if=\"seg.type === 'logicMergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: transparent;\n          border: 1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent);\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.keyword }}\n      </span>\n      <span v-else class=\"tpl:text-sm tpl:text-[var(--tpl-text)]\">{{\n        seg.value\n      }}</span>\n    </template>\n    <button\n      type=\"button\"\n      class=\"tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all tpl:hover:text-[var(--tpl-danger)] tpl:hover:opacity-100\"\n      :aria-label=\"t.mergeTag.remove\"\n      :title=\"t.mergeTag.remove\"\n      @click.stop=\"emit('clear')\"\n    >\n      <X :size=\"12\" :stroke-width=\"2.5\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { MergeTagSegment } from \"../composables/useMergeTagField\";\nimport { X } from \"@lucide/vue\";\n\ndefineProps<{\n  segments: MergeTagSegment[];\n  displayClass: string;\n  pulse?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"edit\"): void;\n  (e: \"clear\"): void;\n}>();\n\nconst { t } = useI18n();\n\nfunction onEdit(): void {\n  emit(\"edit\");\n}\n</script>\n\n<template>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    :aria-label=\"t.mergeTag.clickToEdit\"\n    :class=\"[displayClass, { 'tpl-pulse-fill': pulse }]\"\n    @click=\"onEdit\"\n    @keydown.enter=\"onEdit\"\n    @keydown.space.prevent=\"onEdit\"\n  >\n    <template\n      v-for=\"(seg, i) in segments\"\n      :key=\"`${seg.type}-${i}-${seg.value}`\"\n    >\n      <span\n        v-if=\"seg.type === 'mergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          );\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.label }}\n      </span>\n      <span\n        v-else-if=\"seg.type === 'logicMergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: transparent;\n          border: 1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent);\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.keyword }}\n      </span>\n      <span v-else class=\"tpl:text-sm tpl:text-[var(--tpl-text)]\">{{\n        seg.value\n      }}</span>\n    </template>\n    <button\n      type=\"button\"\n      class=\"tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all tpl:hover:text-[var(--tpl-danger)] tpl:hover:opacity-100\"\n      :aria-label=\"t.mergeTag.remove\"\n      :title=\"t.mergeTag.remove\"\n      @click.stop=\"emit('clear')\"\n    >\n      <X :size=\"12\" :stroke-width=\"2.5\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { ScanLine } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTagBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[mergeTagBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.mergeTag.insert\"\n    :title=\"t.mergeTag.insert\"\n    :disabled=\"disabled\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <ScanLine :size=\"12\" :stroke-width=\"2\" />\n    {{ t.mergeTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { ScanLine } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTagBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[mergeTagBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.mergeTag.insert\"\n    :title=\"t.mergeTag.insert\"\n    :disabled=\"disabled\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <ScanLine :size=\"12\" :stroke-width=\"2\" />\n    {{ t.mergeTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { Braces } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst logicBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[logicBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.logicTag.insert\"\n    :title=\"t.logicTag.insert\"\n    :disabled=\"disabled\"\n    data-testid=\"field-insert-logic-button\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <Braces :size=\"12\" :stroke-width=\"2\" />\n    {{ t.logicTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { Braces } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst logicBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[logicBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.logicTag.insert\"\n    :title=\"t.logicTag.insert\"\n    :disabled=\"disabled\"\n    data-testid=\"field-insert-logic-button\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <Braces :size=\"12\" :stroke-width=\"2\" />\n    {{ t.logicTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"MergeTagInput-l7paaAml.js","names":["$emit","$emit"],"sources":["../../../src/utils/mergeTagTrigger.ts","../../../src/utils/textFieldCaret.ts","../../../src/composables/useMergeTagAutocomplete.ts","../../../src/composables/useMergeTagField.ts","../../../src/components/MergeTagSegments.vue","../../../src/components/MergeTagSegments.vue","../../../src/components/MergeTagInsertButton.vue","../../../src/components/MergeTagInsertButton.vue","../../../src/components/LogicTagInsertButton.vue","../../../src/components/LogicTagInsertButton.vue","../../../src/components/MergeTagInput.vue","../../../src/components/MergeTagInput.vue"],"sourcesContent":["/**\n * Result of a merge-tag trigger scan — the caret sits inside an open tag.\n */\nexport interface OpenMergeTagTrigger {\n  /** Index in the field value where the trigger opener starts. */\n  triggerStart: number;\n  /** Caret index the scan ran at (also the end of `query`). */\n  caret: number;\n  /** Text typed between the opener and the caret — the autocomplete filter. */\n  query: string;\n}\n\n/**\n * Detects whether the caret sits inside an *open* merge-tag trigger: the user\n * has typed the syntax opener (e.g. `{{`) and is mid-typing the tag name with\n * no closing delimiter yet. Returns the opener position + query so the caller\n * can drive the autocomplete popup, or `null` when the caret is not inside an\n * open trigger.\n *\n * Mirrors `@tiptap/suggestion`'s behavior with `allowSpaces: false`: the run\n * between the opener and the caret ends at the first whitespace, and a closing\n * delimiter inside that run means the tag is already complete (`{{first_name}}`)\n * so the popup must not reappear over it.\n */\nexport function findOpenMergeTagTrigger(\n  value: string,\n  caret: number,\n  triggerChar: string,\n  closingChar: string | null,\n): OpenMergeTagTrigger | null {\n  if (!triggerChar) return null;\n\n  const before = value.slice(0, caret);\n  const triggerStart = before.lastIndexOf(triggerChar);\n  if (triggerStart === -1) return null;\n\n  const query = before.slice(triggerStart + triggerChar.length);\n\n  // Whitespace ends the query (allowSpaces: false parity).\n  if (/\\s/.test(query)) return null;\n\n  // A closing delimiter between the opener and the caret means the tag is\n  // already complete — don't reopen the popup over a finished tag.\n  if (closingChar && query.includes(closingChar)) return null;\n\n  return { triggerStart, caret, query };\n}\n","/**\n * Viewport-space caret geometry for `<input>` / `<textarea>` elements.\n *\n * Native text controls expose no caret coordinates (unlike ProseMirror, which\n * hands the merge-tag popup a `clientRect()`). The standard workaround is a\n * hidden \"mirror\" element that clones the field's text metrics; the caret's\n * pixel position is read from a marker span placed at the caret offset. This\n * lets the input/textarea autocomplete anchor its popup at the caret exactly\n * like the rich-text editor does.\n *\n * Adapted from component/textarea-caret-position (MIT). Returns a viewport\n * `DOMRect` (same coordinate space as `Range.getBoundingClientRect`) so the\n * shared merge-tag popup controller positions it identically to the TipTap path.\n */\n\n// Computed-style properties copied onto the mirror so its text wraps and\n// measures exactly like the source field.\nconst MIRRORED_PROPERTIES = [\n  \"boxSizing\",\n  \"width\",\n  \"borderTopWidth\",\n  \"borderRightWidth\",\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderStyle\",\n  \"paddingTop\",\n  \"paddingRight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"fontStyle\",\n  \"fontVariant\",\n  \"fontWeight\",\n  \"fontStretch\",\n  \"fontSize\",\n  \"lineHeight\",\n  \"fontFamily\",\n  \"textAlign\",\n  \"textTransform\",\n  \"textIndent\",\n  \"letterSpacing\",\n  \"wordSpacing\",\n  \"tabSize\",\n  \"whiteSpace\",\n  \"wordWrap\",\n  \"wordBreak\",\n] as const;\n\nfunction toRect(left: number, top: number, bottom: number): DOMRect {\n  const height = bottom - top;\n  return {\n    left,\n    top,\n    bottom,\n    right: left,\n    width: 0,\n    height,\n    x: left,\n    y: top,\n    toJSON: () => ({}),\n  } as DOMRect;\n}\n\n/**\n * Returns the viewport rect of the caret at `position` in a text field, or\n * `null` when the field isn't laid out (detached / no view). The rect is a\n * zero-width vertical strip at the caret, one line tall — matching the shape\n * `Range.getBoundingClientRect()` produces for a collapsed selection.\n */\nexport function getCaretRect(\n  el: HTMLInputElement | HTMLTextAreaElement,\n  position: number,\n): DOMRect | null {\n  const doc = el.ownerDocument;\n  const win = doc.defaultView;\n  if (!win) return null;\n\n  const isInput = el.tagName === \"INPUT\";\n  const style = win.getComputedStyle(el);\n\n  const mirror = doc.createElement(\"div\");\n  mirror.setAttribute(\"aria-hidden\", \"true\");\n  const s = mirror.style;\n  s.position = \"absolute\";\n  s.visibility = \"hidden\";\n  s.top = \"0\";\n  s.left = \"0\";\n  s.overflow = \"hidden\";\n  s.whiteSpace = isInput ? \"pre\" : \"pre-wrap\";\n  s.wordWrap = isInput ? \"normal\" : \"break-word\";\n  const target = s as unknown as Record<string, string>;\n  const source = style as unknown as Record<string, string>;\n  for (const prop of MIRRORED_PROPERTIES) {\n    target[prop] = source[prop];\n  }\n  // A single-line input never wraps; let the mirror grow with the text so the\n  // marker's horizontal offset tracks the caret.\n  if (isInput) {\n    s.width = \"auto\";\n    s.whiteSpace = \"pre\";\n  }\n\n  const value = el.value;\n  let head = value.slice(0, position);\n  if (isInput) {\n    // <input> collapses whitespace runs to a single rendered space; replace\n    // with non-breaking spaces so the mirror's width matches the field.\n    head = head.replace(/\\s/g, \" \");\n  }\n  mirror.textContent = head;\n\n  const marker = doc.createElement(\"span\");\n  // Remaining text (or a placeholder) gives the marker the caret line's height.\n  marker.textContent = value.slice(position) || \".\";\n  mirror.appendChild(marker);\n\n  doc.body.appendChild(mirror);\n  const markerTop = marker.offsetTop;\n  const markerLeft = marker.offsetLeft;\n  doc.body.removeChild(mirror);\n\n  const elRect = el.getBoundingClientRect();\n  const borderTop = parseFloat(style.borderTopWidth) || 0;\n  const borderLeft = parseFloat(style.borderLeftWidth) || 0;\n  const lineHeight =\n    parseFloat(style.lineHeight) || parseFloat(style.fontSize) || 0;\n\n  const left = elRect.left + markerLeft + borderLeft - el.scrollLeft;\n\n  // A single-line input vertically centers its text, which the block-flow\n  // mirror can't replicate — anchor vertically to the field itself so the\n  // popup sits directly under the input. Textareas use the measured caret line.\n  if (isInput) {\n    return toRect(left, elRect.top, elRect.bottom);\n  }\n\n  const top = elRect.top + markerTop + borderTop - el.scrollTop;\n  return toRect(left, top, top + lineHeight);\n}\n","import {\n  getSyntaxClosingChar,\n  getSyntaxTriggerChar,\n  type MergeTag,\n  type SyntaxPreset,\n} from \"@templatical/types\";\nimport {\n  getCurrentScope,\n  inject,\n  isRef,\n  nextTick,\n  onScopeDispose,\n  type Ref,\n} from \"vue\";\nimport type { Translations } from \"../i18n\";\nimport { TRANSLATIONS_KEY } from \"../keys\";\nimport {\n  createMergeTagPopup,\n  filterMergeTags,\n} from \"../extensions/MergeTagSuggestion\";\nimport {\n  findOpenMergeTagTrigger,\n  type OpenMergeTagTrigger,\n} from \"../utils/mergeTagTrigger\";\nimport { getCaretRect } from \"../utils/textFieldCaret\";\nimport { usePopoverRoot } from \"./usePopoverRoot\";\n\nexport interface UseMergeTagAutocompleteOptions {\n  /** The `<input>` / `<textarea>` the popup anchors to. */\n  elementRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** Reads the current field value. */\n  modelValue: () => string;\n  /** Emits a new field value. */\n  emit: (value: string) => void;\n  /** Available merge tags (the autocomplete filter source). */\n  mergeTags: MergeTag[];\n  /** Resolved merge-tag syntax. */\n  syntax: SyntaxPreset;\n  /** Consumer's `mergeTags.autocomplete` flag. */\n  enabled: boolean;\n  /**\n   * Invoked right before a picked tag is emitted, so the field can keep edit\n   * mode and not flip to the chip display while the caret is still active.\n   */\n  onInsert?: () => void;\n}\n\nexport interface UseMergeTagAutocompleteReturn {\n  /**\n   * Whether autocomplete can ever fire. Mirrors the rich-text gate exactly:\n   * enabled + a built-in trigger syntax + at least one tag to filter.\n   */\n  available: boolean;\n  /** Recompute the popup after the value or caret changed. */\n  refresh: () => void;\n  /**\n   * Field `keydown` handler. Returns `true` when the popup consumed the key\n   * (the caller must then `preventDefault`); `false` to let the field handle it.\n   */\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  /** Close the popup (e.g. on blur). Idempotent. */\n  close: () => void;\n  /** Whether the popup is currently open. */\n  isOpen: () => boolean;\n}\n\n// Horizontal caret moves take the caret out of the query run — dismiss the\n// popup (like navigating away in the rich-text editor) and let the caret move.\nconst CARET_MOVE_KEYS = new Set([\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"]);\n\n/**\n * Type-ahead merge-tag autocomplete for a native `<input>` / `<textarea>`.\n *\n * Drives the SAME popup controller as the rich-text (`@tiptap/suggestion`)\n * path — see `createMergeTagPopup` — so the popup's rendering, positioning,\n * keyboard behavior, and ARIA are identical across both surfaces. The only\n * field-specific work is here: detecting the open trigger in the raw string\n * (`findOpenMergeTagTrigger`), measuring the caret rect without ProseMirror\n * (`getCaretRect`), and replacing the typed fragment with the picked tag.\n */\nexport function useMergeTagAutocomplete(\n  options: UseMergeTagAutocompleteOptions,\n): UseMergeTagAutocompleteReturn {\n  const { elementRef, modelValue, emit, mergeTags, syntax, enabled, onInsert } =\n    options;\n\n  const triggerChar = getSyntaxTriggerChar(syntax);\n  const closingChar = getSyntaxClosingChar(syntax);\n  const available = enabled && triggerChar !== null && mergeTags.length > 0;\n\n  // Resolve the empty-state label the same way the rich-text path does —\n  // inject with a null default so headless callers (no translations provider)\n  // don't throw, falling back to the English string.\n  const injectedTranslations = inject(TRANSLATIONS_KEY, null) as\n    Translations | Ref<Translations> | null;\n  const resolvedTranslations = isRef(injectedTranslations)\n    ? injectedTranslations.value\n    : injectedTranslations;\n  const emptyText =\n    resolvedTranslations?.mergeTag?.suggestionEmpty ?? \"No matching merge tags\";\n\n  const popoverRoot = usePopoverRoot();\n  const popup = createMergeTagPopup(emptyText, popoverRoot);\n\n  let disposed = false;\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disposed = true;\n      popup.close();\n    });\n  }\n\n  function currentMatch(el: HTMLInputElement | HTMLTextAreaElement) {\n    const value = el.value ?? \"\";\n    const caret = el.selectionStart ?? value.length;\n    return findOpenMergeTagTrigger(\n      value,\n      caret,\n      triggerChar as string,\n      closingChar,\n    );\n  }\n\n  function applySelection(\n    el: HTMLInputElement | HTMLTextAreaElement,\n    match: OpenMergeTagTrigger,\n    tag: MergeTag,\n  ): void {\n    const value = el.value ?? modelValue();\n    // Absorb a matching closer sitting immediately after the caret so\n    // `{{fir}}` → pick → `{{first_name}}`, never `{{first_name}}}}`.\n    const afterCaret = value.slice(match.caret);\n    const trailing =\n      closingChar && afterCaret.startsWith(closingChar)\n        ? closingChar.length\n        : 0;\n    const before = value.slice(0, match.triggerStart);\n    const after = value.slice(match.caret + trailing);\n    const newValue = before + tag.value + after;\n    const newPos = before.length + tag.value.length;\n\n    // Keep the field in edit mode BEFORE emitting: once the value gains a tag,\n    // `hasMergeTags` flips true, and without this the field would swap to the\n    // chip display and unmount the input mid-insert.\n    onInsert?.();\n    emit(newValue);\n    popup.close();\n\n    nextTick(() => {\n      if (disposed) return;\n      const node = elementRef.value;\n      node?.focus();\n      node?.setSelectionRange(newPos, newPos);\n    });\n  }\n\n  function refresh(): void {\n    if (!available || disposed) return;\n    const el = elementRef.value;\n    if (!el) {\n      popup.close();\n      return;\n    }\n    const match = currentMatch(el);\n    if (!match) {\n      popup.close();\n      return;\n    }\n\n    const items = filterMergeTags(mergeTags, match.query);\n    const getRect = () => getCaretRect(el, match.triggerStart);\n    const onCommand = (tag: MergeTag) => applySelection(el, match, tag);\n\n    if (popup.isOpen()) {\n      popup.update({ items, getRect, onCommand });\n    } else {\n      popup.open({ items, getRect, anchorEl: el, onCommand });\n    }\n  }\n\n  function handleKeydown(event: KeyboardEvent): boolean {\n    if (!popup.isOpen()) return false;\n    if (event.key === \"Escape\") {\n      popup.close();\n      return true;\n    }\n    if (CARET_MOVE_KEYS.has(event.key)) {\n      popup.close();\n      return false;\n    }\n    return popup.handleKeyDown(event);\n  }\n\n  return {\n    available,\n    refresh,\n    handleKeydown,\n    close: () => popup.close(),\n    isOpen: () => popup.isOpen(),\n  };\n}\n","import {\n  getLogicMergeTagKeyword,\n  isLogicMergeTagValue,\n} from \"@templatical/types\";\nimport {\n  computed,\n  getCurrentScope,\n  nextTick,\n  onScopeDispose,\n  ref,\n  type ComputedRef,\n  type Ref,\n} from \"vue\";\nimport { useMergeTag } from \"./useMergeTag\";\nimport { useLogicTag } from \"./useLogicTag\";\nimport { useMergeTagAutocomplete } from \"./useMergeTagAutocomplete\";\n\nexport type MergeTagSegment =\n  | { type: \"text\"; value: string }\n  | { type: \"mergeTag\"; value: string; label: string }\n  | { type: \"logicMergeTag\"; value: string; keyword: string };\n\nexport interface UseMergeTagFieldOptions {\n  modelValue: () => string;\n  emit: (value: string) => void;\n  elementRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n}\n\nexport interface UseMergeTagFieldReturn {\n  segments: ComputedRef<MergeTagSegment[]>;\n  hasMergeTags: ComputedRef<boolean>;\n  canRequestMergeTag: boolean;\n  isRequestingMergeTag: Ref<boolean>;\n  canInsertLogicTag: boolean;\n  isRequestingLogicTag: Ref<boolean>;\n  isEditing: Ref<boolean>;\n  startEditing: () => void;\n  stopEditing: () => void;\n  handleInput: (event: Event) => void;\n  /**\n   * Returns whether the autocomplete popup consumed the event. A host with\n   * keys of its own (the link dialog submits on Enter) acts only on `false`.\n   */\n  handleKeydown: (event: KeyboardEvent) => boolean;\n  handleClick: () => void;\n  handleBlur: () => void;\n  clearValue: () => void;\n  insertMergeTag: () => Promise<void>;\n  insertLogicTag: () => Promise<void>;\n  /** Whether type-ahead autocomplete is active for this field. */\n  autocompleteAvailable: boolean;\n}\n\nexport function useMergeTagField(\n  options: UseMergeTagFieldOptions,\n): UseMergeTagFieldReturn {\n  const { modelValue, emit, elementRef } = options;\n\n  const {\n    mergeTags,\n    canRequestMergeTag,\n    isRequesting: isRequestingMergeTag,\n    isMergeTagValue,\n    getMergeTagLabel,\n    requestMergeTag,\n    syntax,\n    autocomplete,\n  } = useMergeTag();\n\n  const {\n    canInsertLogicTag,\n    isRequesting: isRequestingLogicTag,\n    requestLogicTag,\n  } = useLogicTag();\n\n  const isEditing = ref(false);\n  let insertingMergeTag = false;\n  let disposed = false;\n  if (getCurrentScope()) {\n    onScopeDispose(() => {\n      disposed = true;\n    });\n  }\n\n  // Type-ahead autocomplete for the raw <input>/<textarea>, sharing the exact\n  // popup used by the rich-text editor. `onInsert` keeps the field in edit mode\n  // so the freshly inserted tag stays visible instead of flipping to chips.\n  const typeahead = useMergeTagAutocomplete({\n    elementRef,\n    modelValue,\n    emit,\n    mergeTags,\n    syntax,\n    enabled: autocomplete,\n    onInsert: () => {\n      isEditing.value = true;\n    },\n  });\n\n  const segments = computed((): MergeTagSegment[] => {\n    const val = modelValue();\n    if (!val) return [];\n\n    const result: MergeTagSegment[] = [];\n    const combinedSource = `(${syntax.value.source}|${syntax.logic.source})`;\n    const regex = new RegExp(combinedSource, \"g\");\n    let lastIndex = 0;\n    let match;\n\n    while ((match = regex.exec(val)) !== null) {\n      if (match.index > lastIndex) {\n        result.push({\n          type: \"text\",\n          value: val.slice(lastIndex, match.index),\n        });\n      }\n\n      const matched = match[0];\n      if (isMergeTagValue(matched)) {\n        result.push({\n          type: \"mergeTag\",\n          value: matched,\n          label: getMergeTagLabel(matched),\n        });\n      } else if (isLogicMergeTagValue(matched, syntax)) {\n        result.push({\n          type: \"logicMergeTag\",\n          value: matched,\n          keyword: getLogicMergeTagKeyword(matched, syntax),\n        });\n      } else {\n        result.push({ type: \"text\", value: matched });\n      }\n\n      lastIndex = match.index + matched.length;\n    }\n\n    if (lastIndex < val.length) {\n      result.push({ type: \"text\", value: val.slice(lastIndex) });\n    }\n\n    return result;\n  });\n\n  const hasMergeTags = computed(() =>\n    segments.value.some(\n      (s) => s.type === \"mergeTag\" || s.type === \"logicMergeTag\",\n    ),\n  );\n\n  function startEditing(): void {\n    isEditing.value = true;\n    nextTick(() => {\n      elementRef.value?.focus();\n      const len = modelValue()?.length || 0;\n      elementRef.value?.setSelectionRange(len, len);\n    });\n  }\n\n  function stopEditing(): void {\n    if (insertingMergeTag) return;\n    isEditing.value = false;\n  }\n\n  function handleInput(event: Event): void {\n    emit((event.target as HTMLInputElement | HTMLTextAreaElement).value);\n    typeahead.refresh();\n  }\n\n  /**\n   * Field keydown: let the autocomplete popup consume navigation/selection\n   * keys first (Arrow/Enter/Tab/Escape). If it doesn't, Escape falls through\n   * to leaving edit mode.\n   *\n   * Escape is reported as NOT consumed even though it acts here: a host\n   * dialog should close on the same press rather than swallow the first one.\n   */\n  function handleKeydown(event: KeyboardEvent): boolean {\n    if (typeahead.handleKeydown(event)) {\n      event.preventDefault();\n      return true;\n    }\n    if (event.key === \"Escape\") {\n      stopEditing();\n    }\n    return false;\n  }\n\n  /** A click may move the caret into or out of a trigger — re-evaluate. */\n  function handleClick(): void {\n    typeahead.refresh();\n  }\n\n  /** Blur closes the popup, then leaves edit mode. */\n  function handleBlur(): void {\n    typeahead.close();\n    stopEditing();\n  }\n\n  function clearValue(): void {\n    emit(\"\");\n  }\n\n  async function insertMergeTag(): Promise<void> {\n    const cursorPos =\n      isEditing.value && elementRef.value\n        ? (elementRef.value.selectionStart ?? modelValue().length)\n        : modelValue().length;\n\n    insertingMergeTag = true;\n    let mergeTag: Awaited<ReturnType<typeof requestMergeTag>>;\n    try {\n      mergeTag = await requestMergeTag();\n    } finally {\n      insertingMergeTag = false;\n    }\n\n    if (disposed) return;\n\n    if (mergeTag) {\n      const before = modelValue().slice(0, cursorPos);\n      const after = modelValue().slice(cursorPos);\n      const newValue = before + mergeTag.value + after;\n      emit(newValue);\n\n      isEditing.value = true;\n      nextTick(() => {\n        if (disposed) return;\n        const newPos = cursorPos + mergeTag.value.length;\n        elementRef.value?.focus();\n        elementRef.value?.setSelectionRange(newPos, newPos);\n      });\n    }\n  }\n\n  async function insertLogicTag(): Promise<void> {\n    // Read the selection straight from the element (kept focused via the\n    // button's mousedown.prevent). Null only in display mode → append at end.\n    const el = elementRef.value;\n    const start = el?.selectionStart ?? modelValue().length;\n    const end = el?.selectionEnd ?? start;\n\n    insertingMergeTag = true;\n    let item: Awaited<ReturnType<typeof requestLogicTag>>;\n    try {\n      item = await requestLogicTag();\n    } finally {\n      insertingMergeTag = false;\n    }\n\n    if (disposed || !item) return;\n\n    const val = modelValue();\n    let newValue: string;\n    let newPos: number;\n    if (\"before\" in item) {\n      // Pair: wrap the selection with before/after. With no selection\n      // (start === end) the caret lands between them so the user types the\n      // wrapped content — mirrors the rich-text behavior.\n      newValue =\n        val.slice(0, start) +\n        item.before +\n        val.slice(start, end) +\n        item.after +\n        val.slice(end);\n      newPos = start + item.before.length + (end - start);\n    } else {\n      // Tag: insert at the cursor.\n      newValue = val.slice(0, start) + item.value + val.slice(start);\n      newPos = start + item.value.length;\n    }\n    emit(newValue);\n\n    isEditing.value = true;\n    nextTick(() => {\n      if (disposed) return;\n      elementRef.value?.focus();\n      elementRef.value?.setSelectionRange(newPos, newPos);\n    });\n  }\n\n  return {\n    segments,\n    hasMergeTags,\n    canRequestMergeTag,\n    isRequestingMergeTag,\n    canInsertLogicTag,\n    isRequestingLogicTag,\n    isEditing,\n    startEditing,\n    stopEditing,\n    handleInput,\n    handleKeydown,\n    handleClick,\n    handleBlur,\n    clearValue,\n    insertMergeTag,\n    insertLogicTag,\n    autocompleteAvailable: typeahead.available,\n  };\n}\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { MergeTagSegment } from \"../composables/useMergeTagField\";\nimport { X } from \"@lucide/vue\";\n\ndefineProps<{\n  segments: MergeTagSegment[];\n  displayClass: string;\n  pulse?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"edit\"): void;\n  (e: \"clear\"): void;\n}>();\n\nconst { t } = useI18n();\n\nfunction onEdit(): void {\n  emit(\"edit\");\n}\n</script>\n\n<template>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    :aria-label=\"t.mergeTag.clickToEdit\"\n    :class=\"[displayClass, { 'tpl-pulse-fill': pulse }]\"\n    @click=\"onEdit\"\n    @keydown.enter=\"onEdit\"\n    @keydown.space.prevent=\"onEdit\"\n  >\n    <template\n      v-for=\"(seg, i) in segments\"\n      :key=\"`${seg.type}-${i}-${seg.value}`\"\n    >\n      <span\n        v-if=\"seg.type === 'mergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          );\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.label }}\n      </span>\n      <span\n        v-else-if=\"seg.type === 'logicMergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: transparent;\n          border: 1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent);\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.keyword }}\n      </span>\n      <span v-else class=\"tpl:text-sm tpl:text-[var(--tpl-text)]\">{{\n        seg.value\n      }}</span>\n    </template>\n    <button\n      type=\"button\"\n      class=\"tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all tpl:hover:text-[var(--tpl-danger)] tpl:hover:opacity-100\"\n      :aria-label=\"t.mergeTag.remove\"\n      :title=\"t.mergeTag.remove\"\n      @click.stop=\"emit('clear')\"\n    >\n      <X :size=\"12\" :stroke-width=\"2.5\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { MergeTagSegment } from \"../composables/useMergeTagField\";\nimport { X } from \"@lucide/vue\";\n\ndefineProps<{\n  segments: MergeTagSegment[];\n  displayClass: string;\n  pulse?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"edit\"): void;\n  (e: \"clear\"): void;\n}>();\n\nconst { t } = useI18n();\n\nfunction onEdit(): void {\n  emit(\"edit\");\n}\n</script>\n\n<template>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    :aria-label=\"t.mergeTag.clickToEdit\"\n    :class=\"[displayClass, { 'tpl-pulse-fill': pulse }]\"\n    @click=\"onEdit\"\n    @keydown.enter=\"onEdit\"\n    @keydown.space.prevent=\"onEdit\"\n  >\n    <template\n      v-for=\"(seg, i) in segments\"\n      :key=\"`${seg.type}-${i}-${seg.value}`\"\n    >\n      <span\n        v-if=\"seg.type === 'mergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: color-mix(\n            in srgb,\n            var(--tpl-primary) 20%,\n            transparent\n          );\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.label }}\n      </span>\n      <span\n        v-else-if=\"seg.type === 'logicMergeTag'\"\n        class=\"tpl-tooltip tpl:inline-flex tpl:items-center tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase\"\n        :data-tooltip=\"seg.value\"\n        style=\"\n          background-color: transparent;\n          border: 1.5px solid\n            color-mix(in srgb, var(--tpl-primary) 50%, transparent);\n          color: var(--tpl-primary);\n        \"\n      >\n        {{ seg.keyword }}\n      </span>\n      <span v-else class=\"tpl:text-sm tpl:text-[var(--tpl-text)]\">{{\n        seg.value\n      }}</span>\n    </template>\n    <button\n      type=\"button\"\n      class=\"tpl:ml-auto tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:text-[var(--tpl-text-dim)] tpl:opacity-60 tpl:transition-all tpl:hover:text-[var(--tpl-danger)] tpl:hover:opacity-100\"\n      :aria-label=\"t.mergeTag.remove\"\n      :title=\"t.mergeTag.remove\"\n      @click.stop=\"emit('clear')\"\n    >\n      <X :size=\"12\" :stroke-width=\"2.5\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { ScanLine } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTagBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[mergeTagBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.mergeTag.insert\"\n    :title=\"t.mergeTag.insert\"\n    :disabled=\"disabled\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <ScanLine :size=\"12\" :stroke-width=\"2\" />\n    {{ t.mergeTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { ScanLine } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTagBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[mergeTagBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.mergeTag.insert\"\n    :title=\"t.mergeTag.insert\"\n    :disabled=\"disabled\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <ScanLine :size=\"12\" :stroke-width=\"2\" />\n    {{ t.mergeTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { Braces } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst logicBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[logicBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.logicTag.insert\"\n    :title=\"t.logicTag.insert\"\n    :disabled=\"disabled\"\n    data-testid=\"field-insert-logic-button\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <Braces :size=\"12\" :stroke-width=\"2\" />\n    {{ t.logicTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport { Braces } from \"@lucide/vue\";\n\ndefineProps<{\n  disabled?: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"insert\"): void;\n}>();\n\nconst { t } = useI18n();\n\nconst logicBtnClass =\n  \"tpl:flex tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-hover)] tpl:px-2 tpl:py-1 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:transition-all tpl:duration-[120ms] tpl:hover:bg-[var(--tpl-primary-light)] tpl:hover:text-[var(--tpl-primary)] tpl:hover:border-[var(--tpl-primary)]\";\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"[logicBtnClass, 'tpl:mt-1.5']\"\n    :aria-label=\"t.logicTag.insert\"\n    :title=\"t.logicTag.insert\"\n    :disabled=\"disabled\"\n    data-testid=\"field-insert-logic-button\"\n    @mousedown.prevent\n    @click=\"$emit('insert')\"\n  >\n    <Braces :size=\"12\" :stroke-width=\"2\" />\n    {{ t.logicTag.insertShort }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useMergeTagField } from \"../composables/useMergeTagField\";\nimport { inputClass } from \"../constants/styleConstants\";\nimport MergeTagSegments from \"./MergeTagSegments.vue\";\nimport MergeTagInsertButton from \"./MergeTagInsertButton.vue\";\nimport LogicTagInsertButton from \"./LogicTagInsertButton.vue\";\nimport { ref } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    type?: \"text\" | \"url\";\n    placeholder?: string;\n    pulse?: boolean;\n  }>(),\n  {\n    type: \"text\",\n    placeholder: \"\",\n    pulse: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void;\n  /**\n   * Keydown the autocomplete popup declined. Declared (rather than left to\n   * attribute fallthrough) so a host binding `@keydown` never sees the key\n   * that just picked a tag — the link dialog would submit on it.\n   */\n  (e: \"keydown\", event: KeyboardEvent): void;\n}>();\n\nconst inputRef = ref<HTMLInputElement | null>(null);\n\nconst {\n  segments,\n  hasMergeTags,\n  canRequestMergeTag,\n  isRequestingMergeTag,\n  canInsertLogicTag,\n  isRequestingLogicTag,\n  isEditing,\n  startEditing,\n  handleInput,\n  handleKeydown: handleFieldKeydown,\n  handleClick,\n  handleBlur,\n  clearValue,\n  insertMergeTag,\n  insertLogicTag,\n} = useMergeTagField({\n  modelValue: () => props.modelValue,\n  emit: (value) => emit(\"update:modelValue\", value),\n  elementRef: inputRef,\n});\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (!handleFieldKeydown(event)) {\n    emit(\"keydown\", event);\n  }\n}\n\nconst displayClass =\n  \"tpl:flex tpl:w-full tpl:min-h-10 tpl:cursor-pointer tpl:items-center tpl:flex-wrap tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:shadow-[var(--tpl-shadow-sm)] tpl:bg-[var(--tpl-bg)] tpl:border-[var(--tpl-border)] tpl:px-3.5 tpl:py-1.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\";\n</script>\n\n<template>\n  <div v-if=\"hasMergeTags && !isEditing\">\n    <MergeTagSegments\n      :segments=\"segments\"\n      :display-class=\"displayClass\"\n      :pulse=\"pulse\"\n      @edit=\"startEditing\"\n      @clear=\"clearValue\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n  <div v-else>\n    <input\n      ref=\"inputRef\"\n      :type=\"type\"\n      :class=\"[inputClass, { 'tpl-pulse-fill': pulse }]\"\n      :value=\"modelValue\"\n      :placeholder=\"placeholder\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @click=\"handleClick\"\n      @blur=\"handleBlur\"\n    />\n    <div\n      v-if=\"canRequestMergeTag || canInsertLogicTag\"\n      class=\"tpl:flex tpl:flex-wrap tpl:gap-1.5\"\n    >\n      <MergeTagInsertButton\n        v-if=\"canRequestMergeTag\"\n        :disabled=\"isRequestingMergeTag\"\n        @insert=\"insertMergeTag\"\n      />\n      <LogicTagInsertButton\n        v-if=\"canInsertLogicTag\"\n        :disabled=\"isRequestingLogicTag\"\n        @insert=\"insertLogicTag\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tpl-pulse-fill {\n  animation: tpl-field-pulse 1s ease-out;\n}\n\n@keyframes tpl-field-pulse {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tpl-warning) 30%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 6%, transparent);\n  }\n  40% {\n    box-shadow: 0 0 0 3px\n      color-mix(in srgb, var(--tpl-warning) 15%, transparent);\n    background-color: color-mix(in srgb, var(--tpl-warning) 5%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tpl-pulse-fill {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{MergeTagModeToggle-Dz3gxN2y.js → MergeTagModeToggle-DYxkAGtA.js}

@@ -1,8 +1,8 @@
 import { E as e, F as t, N as n, S as r, at as i, f as a, g as o, h as s, lt as c, m as l, p as u, u as d, ut as f } from "./draggable-kbOhCgnk.js";
 import { u as p } from "./src-Dwgq7hf4.js";
-import { E as m } from "./keys-DQp8x7Nx.js";
-import { t as h } from "./useI18n-Ct1VIFcf.js";
-import { $ as g, D as _, E as v, m as y } from "./icons-BLxcQUck.js";
+import { D as m } from "./keys-DBFhDFng.js";
+import { t as h } from "./useI18n-Dlo7R9RA.js";
+import { $ as g, D as _, E as v, p as y } from "./icons-BUlqGSgd.js";
 //#region src/components/ViewportToggle.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], x = [
 	"aria-checked",
@@ -124,4 +124,4 @@ var b = ["aria-label"], x = [
 //#endregion
 export { S as n, T as t };
 
-//# sourceMappingURL=MergeTagModeToggle-Dz3gxN2y.js.map
+//# sourceMappingURL=MergeTagModeToggle-DYxkAGtA.js.map

package/dist/cdn/chunks/{MergeTagModeToggle-Dz3gxN2y.js.map → MergeTagModeToggle-DYxkAGtA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MergeTagModeToggle-Dz3gxN2y.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAO,GAIP,EAAE,SAAM,EAAQ,GAEhB,IAAY,QAAe,CAC/B;GAAE,OAAO;GAA2B,OAAO,EAAE,SAAS;EAAQ,GAC9D;GAAE,OAAO;GAA0B,OAAO,EAAE,SAAS;EAAO,CAC9D,CAAC,GAEK,IAAa,QAEV,cADO,EAAU,MAAM,WAAW,MAAO,EAAG,UAAU,EAAM,QAC9C,IAAQ,IAAI,GAClC;oBAIC,EAAA,GAAA,EA2CM,OAAA;GA1CJ,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,SAAS;GACxB,OAAM;GACL,OAAK,EAAA;IAAyC,qBAAA,UAAA,EAAA,MAAU,OAAM;;;EAM/D,GAAA,CAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAK,EAAA;;IAA+D,OAAA,uBAAA,EAAA,MAAU,OAAM;IAAwB,WAAA,EAAA;;;;;EAU/G,GAAA,MAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAoBS,GAAA,MAAA,EAnBM,EAAA,QAAN,OADT,EAAA,GAAA,EAoBS,UAAA;GAlBN,KAAK,EAAG;GACT,MAAK;GACJ,gBAAc,EAAA,aAAa,EAAG;GAC9B,cAAY,EAAG;GAChB,OAAM;GACL,OAAK,EAAA;IAA6B,OAAA,EAAA,aAAa,EAAG,QAAA,uBAAA;;;GAOlD,OAAO,EAAG;GACV,UAAK,MAAE,EAAI,UAAW,EAAG,KAAK;EAEhB,GAAA,CAAA,EAAG,UAAK,aAAvB,EAAA,GAAA,EAAwE,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACjE,CAAA,MAAA,EAAA,GAAA,EAAoD,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAC7C,CAAA,IAAA,EAA2B,QAAA,MAAA,EAAlB,EAAG,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;EE3CvB,IAAM,IAAQ,GAKR,IAAO,GAIP,EAAE,SAAM,EAAQ,GAEhB,IAAY,EAAO,GAAgB,CAAC,CAAC,GACrC,IAAc,QAAe,EAAmB,CAAS,CAAC,GAE1D,IAAQ,QAAe,CAC3B;GAAE,OAAO;GAAM,OAAO,EAAE,gBAAgB;EAAO,GAC/C;GAAE,OAAO;GAAO,OAAO,EAAE,gBAAgB;EAAU,CACrD,CAAC,GAEK,IAAa,QAEV,cADO,EAAM,MAAM,WAAW,MAAM,EAAE,UAAU,EAAM,UACxC,IAAQ,IAAI,GAClC;mBAKS,EAAA,SADR,EAAA,GAAA,EA6CM,OAAA;;GA3CJ,MAAK;GACJ,cAAY,EAAA,CAAA,CAAC,CAAC,gBAAgB;GAC/B,eAAY;GACZ,OAAM;GACL,OAAK,EAAA;IAAyC,qBAAA,UAAA,EAAA,MAAM,OAAM;;;EAM3D,GAAA,CAAA,EAUO,OAAA;GATL,OAAM;GACL,OAAK,EAAA;;IAA+D,OAAA,uBAAA,EAAA,MAAM,OAAM;IAAwB,WAAA,EAAA;;;;;EAU3G,GAAA,MAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAoBS,GAAA,MAAA,EAnBQ,EAAA,QAAR,OADT,EAAA,GAAA,EAoBS,UAAA;GAlBN,KAAK,OAAO,EAAK,KAAK;GACvB,MAAK;GACJ,gBAAc,EAAA,eAAe,EAAK;GAClC,cAAY,EAAK;GAClB,OAAM;GACL,OAAK,EAAA;IAA6B,OAAA,EAAA,eAAe,EAAK,QAAA,uBAAA;;;GAOtD,OAAO,EAAK;GACZ,UAAK,MAAE,EAAI,UAAW,EAAK,KAAK;EAEjB,GAAA,CAAA,EAAK,SAArB,EAAA,GAAA,EAA6D,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EACtD,CAAA,MAAA,EAAA,GAAA,EAAyD,EAAA,CAAA,GAAA;;GAAhC,MAAM;GAAK,gBAAc;EAClD,CAAA,IAAA,EAA6B,QAAA,MAAA,EAApB,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"MergeTagModeToggle-DYxkAGtA.js","names":[],"sources":["../../../src/components/ViewportToggle.vue","../../../src/components/ViewportToggle.vue","../../../src/components/MergeTagModeToggle.vue","../../../src/components/MergeTagModeToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../composables/useI18n\";\nimport type { ViewportSize } from \"@templatical/types\";\nimport { Monitor, Smartphone } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nconst props = defineProps<{\n  viewport: ViewportSize;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", viewport: ViewportSize): void;\n}>();\n\nconst { t } = useI18n();\n\nconst viewports = computed(() => [\n  { value: \"desktop\" as ViewportSize, label: t.viewport.desktop },\n  { value: \"mobile\" as ViewportSize, label: t.viewport.mobile },\n]);\n\nconst pillOffset = computed(() => {\n  const index = viewports.value.findIndex((vp) => vp.value === props.viewport);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    role=\"radiogroup\"\n    :aria-label=\"t.viewport.label\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${viewports.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${viewports.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"vp in viewports\"\n      :key=\"vp.value\"\n      role=\"radio\"\n      :aria-checked=\"viewport === vp.value\"\n      :aria-label=\"vp.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          viewport === vp.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"vp.label\"\n      @click=\"emit('change', vp.value)\"\n    >\n      <Monitor v-if=\"vp.value === 'desktop'\" :size=\"18\" :stroke-width=\"1.5\" />\n      <Smartphone v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ vp.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Switches the previews between the two merge-tag views: **Sample** (tags\n * replaced by their `MergeTag.sample`, rendered as ordinary text) and **Label**\n * (tags shown as their label with the usual cue).\n *\n * Deliberately the same segmented control as `ViewportToggle.vue` — the two sit\n * one click apart on the same preview surfaces, so they have to read as one\n * family rather than two similar things. Kept as a separate component rather\n * than generalising the viewport one: that would mean a generic segmented\n * control with an icon map, and two call sites don't justify the indirection.\n *\n * Renders only where a preview is showing. It must never appear over the\n * editing canvas, because substitution never happens there.\n *\n * **Renders nothing at all unless some configured tag declares a `sample`.**\n * With none, the two views are identical, so the control would be inert. The\n * check lives here rather than at each call site so the guarantee holds for\n * every surface — present and future — without three `v-if`s to keep in step.\n */\nimport { hasMergeTagSamples } from \"@templatical/types\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { MERGE_TAGS_KEY } from \"../keys\";\nimport { TextCursorInput, Sparkles } from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\n\nconst props = defineProps<{\n  /** `true` for Sample view, `false` for Label view. */\n  sampleMode: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"change\", sampleMode: boolean): void;\n}>();\n\nconst { t } = useI18n();\n\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst isAvailable = computed(() => hasMergeTagSamples(mergeTags));\n\nconst modes = computed(() => [\n  { value: true, label: t.mergeTagPreview.sample },\n  { value: false, label: t.mergeTagPreview.labelView },\n]);\n\nconst pillOffset = computed(() => {\n  const index = modes.value.findIndex((m) => m.value === props.sampleMode);\n  return `translateX(${index * 100}%)`;\n});\n</script>\n\n<template>\n  <div\n    v-if=\"isAvailable\"\n    role=\"radiogroup\"\n    :aria-label=\"t.mergeTagPreview.label\"\n    data-testid=\"merge-tag-mode-toggle\"\n    class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n    :style=\"{\n      gridTemplateColumns: `repeat(${modes.length}, 1fr)`,\n      backgroundColor: 'var(--tpl-bg-hover)',\n    }\"\n  >\n    <!-- Sliding pill -->\n    <div\n      class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n      :style=\"{\n        left: '4px',\n        width: `calc((100% - 8px) / ${modes.length})`,\n        transform: pillOffset,\n        backgroundColor: 'var(--tpl-bg)',\n        boxShadow: 'var(--tpl-shadow)',\n        transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n    ></div>\n\n    <button\n      v-for=\"mode in modes\"\n      :key=\"String(mode.value)\"\n      role=\"radio\"\n      :aria-checked=\"sampleMode === mode.value\"\n      :aria-label=\"mode.label\"\n      class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium\"\n      :style=\"{\n        color:\n          sampleMode === mode.value\n            ? 'var(--tpl-primary)'\n            : 'var(--tpl-text-muted)',\n        transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n      }\"\n      :title=\"mode.label\"\n      @click=\"emit('change', mode.value)\"\n    >\n      <Sparkles v-if=\"mode.value\" :size=\"18\" :stroke-width=\"1.5\" />\n      <TextCursorInput v-else :size=\"18\" :stroke-width=\"1.5\" />\n      <span>{{ mode.label }}</span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-DQn0HMfV.js → ParagraphEditor-Bd-GQXee.js}

@@ -1,15 +1,15 @@
 import { E as e, F as t, N as n, Q as r, R as i, S as a, at as o, b as s, c, ct as l, d as u, f as d, g as f, h as p, l as m, lt as h, m as g, p as _, q as v, u as y, ut as b, y as x } from "./draggable-kbOhCgnk.js";
 import { R as S } from "./src-Dwgq7hf4.js";
-import { E as C, S as w, T, x as E } from "./useEditorCore-D4MytYB9.js";
+import { E as C, S as w, T, x as E } from "./useEditorCore-Cs7rYVBo.js";
 import { t as D } from "./dist-CAFTQ6Y2.js";
-import { J as O, K as k, O as A, U as ee, _ as j, h as M, w as N } from "./keys-DQp8x7Nx.js";
-import { t as P } from "./useI18n-Ct1VIFcf.js";
-import { n as F } from "./usePopoverPosition-BxVWE5_0.js";
-import { Ct as I, P as te, R as ne, Rt as re, S as ie, Vt as ae, _ as oe, at as se, ct as ce, g as le, h as ue, it as de, l as fe, ot as pe, p as me, ut as he, x as ge, y as _e } from "./icons-BLxcQUck.js";
+import { T as O, W as k, Y as A, g as ee, k as j, q as M, v as N } from "./keys-DBFhDFng.js";
+import { t as P } from "./useI18n-Dlo7R9RA.js";
+import { n as F } from "./usePopoverPosition-ElP3ABaV.js";
+import { Ct as I, P as te, R as ne, Rt as re, S as ie, Vt as ae, _ as oe, at as se, ct as ce, g as le, h as ue, it as de, l as fe, m as pe, ot as me, ut as he, x as ge, y as _e } from "./icons-BUlqGSgd.js";
 import { t as L } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { a as ve, n as ye, o as be, s as xe } from "./styleConstants-C_YAPdQS.js";
-import { t as R } from "./ColorPicker-C7yC58FK.js";
-import { n as z, t as B } from "./RichTextEditorContent-Drzwgh0J.js";
+import { t as R } from "./ColorPicker-LcrzgMoW.js";
+import { n as z, t as B } from "./RichTextEditorContent-D_rb0rmU.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var V = [
 	"aria-label",
@@ -158,7 +158,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 		"add-logic-tag"
 	],
 	setup(t, { emit: r }) {
-		let i = t, a = r, c = e(ee, null), l = e(k, null), m = O(j, "ParagraphToolbar"), v = F(), S = e(A, null), C = e(N, null), w = e(M, null), T = d(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = P(), D = m.fonts;
+		let i = t, a = r, c = e(k, null), l = e(M, null), m = A(N, "ParagraphToolbar"), v = F(), S = e(j, null), C = e(O, null), w = e(ee, null), T = d(() => (S?.isOpen.value ?? !1) || (C?.isOpen.value ?? !1)), { t: E } = P(), D = m.fonts;
 		function I(e) {
 			i.editor?.chain().focus().insertContent(e).run();
 		}
@@ -363,7 +363,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"active"
 			]),
 			s(q, {
-				icon: o(pe),
+				icon: o(me),
 				label: o(E).paragraphEditor.numberedList,
 				active: t.editor.isActive("orderedList"),
 				onClick: r[8] ||= (e) => t.editor.chain().focus().toggleOrderedList().run()
@@ -374,7 +374,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 			]),
 			s(Z),
 			s(q, {
-				icon: o(me),
+				icon: o(pe),
 				label: o(E).paragraphEditor.alignLeft,
 				active: t.editor.isActive({ textAlign: "left" }),
 				onClick: r[9] ||= (e) => t.editor.chain().focus().setTextAlign("left").run()
@@ -481,7 +481,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 	},
 	emits: ["done"],
 	setup(t, { emit: r }) {
-		let i = t, a = r, c = F(), l = e(M, null), u = S(l?.content?.value?.settings ?? { locale: "en" }) === "rtl" ? "right" : "left", { editor: d, EditorContent: p, isLoading: m, initError: h, retry: g, showLinkDialog: _, linkUrl: y, linkColor: b, linkDialogRef: x, canRequestMergeTag: C, canInsertLogicTag: T, openLinkDialog: D, insertLink: O, removeLink: k, closeLinkDialog: A, handleLinkKeydown: ee, handleAddMergeTag: j, handleAddLogicTag: N } = E({
+		let i = t, a = r, c = F(), l = e(ee, null), u = S(l?.content?.value?.settings ?? { locale: "en" }) === "rtl" ? "right" : "left", { editor: d, EditorContent: p, isLoading: m, initError: h, retry: g, showLinkDialog: _, linkUrl: y, linkColor: b, linkDialogRef: x, canRequestMergeTag: C, canInsertLogicTag: T, openLinkDialog: D, insertLink: O, removeLink: k, closeLinkDialog: A, handleLinkKeydown: j, handleAddMergeTag: M, handleAddLogicTag: N } = E({
 			blockId: () => i.block.id,
 			blockContent: () => i.block.content,
 			onDone: () => a("done"),
@@ -499,7 +499,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 					import("./tiptap-Epe8m3Vo.js").then((e) => e.f),
 					import("./tiptap-Epe8m3Vo.js").then((e) => e.d),
 					import("./tiptap-Epe8m3Vo.js").then((e) => e.u),
-					import("./extensions-BpXY7jO5.js")
+					import("./extensions-B8_jnIkD.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -558,7 +558,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				"can-request-merge-tag": o(C),
 				"can-insert-logic-tag": o(T),
 				onOpenLinkDialog: o(D),
-				onAddMergeTag: o(j),
+				onAddMergeTag: o(M),
 				onAddLogicTag: o(N)
 			}, null, 8, [
 				"editor",
@@ -595,7 +595,7 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 				onClose: o(A),
 				onInsert: o(O),
 				onRemove: o(k),
-				onKeydown: o(ee)
+				onKeydown: o(j)
 			}, null, 8, [
 				"visible",
 				"is-editing-link",
@@ -613,4 +613,4 @@ var Ee = ["data-tpl-theme", "aria-label"], De = { class: "tpl:flex tpl:items-cen
 //#endregion
 export { Pe as default };
 
-//# sourceMappingURL=ParagraphEditor-DQn0HMfV.js.map
+//# sourceMappingURL=ParagraphEditor-Bd-GQXee.js.map