@templatical/editor 0.38.0 → 0.39.0

package/dist/cdn/chunks/MergeTagInput-l7paaAml.js.map

@@ -1 +0,0 @@
-{"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/MergeTagSuggestion-t8Uj00Er.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MergeTagSuggestion-t8Uj00Er.js","names":["$emit"],"sources":["../../../src/components/MergeTagSuggestionList.vue","../../../src/components/MergeTagSuggestionList.vue","../../../src/extensions/MergeTagSuggestion.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { MergeTag } from \"@templatical/types\";\n\nconst props = defineProps<{\n  items: MergeTag[];\n  selectedIndex: number;\n  emptyText: string;\n  /** Stable id used for aria-controls + per-option id derivation. */\n  listId?: string;\n}>();\n\ndefineEmits<{\n  (e: \"select\", item: MergeTag): void;\n  (e: \"hover\", index: number): void;\n}>();\n\nfunction optionId(index: number): string | undefined {\n  return props.listId ? `${props.listId}-opt-${index}` : undefined;\n}\n</script>\n\n<template>\n  <div\n    :id=\"listId\"\n    class=\"tpl:min-w-[200px] tpl:max-w-[320px] tpl:max-h-[50vh] tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:py-1 tpl:shadow-[var(--tpl-shadow-lg)]\"\n    role=\"listbox\"\n    data-testid=\"merge-tag-suggestion-list\"\n  >\n    <div\n      v-if=\"items.length === 0\"\n      class=\"tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n      data-testid=\"merge-tag-suggestion-empty\"\n    >\n      {{ emptyText }}\n    </div>\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"item.value\"\n      :id=\"optionId(index)\"\n      type=\"button\"\n      role=\"option\"\n      :aria-selected=\"index === selectedIndex\"\n      :data-selected=\"index === selectedIndex ? 'true' : 'false'\"\n      :data-merge-tag-value=\"item.value\"\n      class=\"tpl:flex tpl:w-full tpl:flex-col tpl:items-start tpl:gap-0.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors\"\n      :class=\"\n        index === selectedIndex\n          ? 'tpl:bg-[var(--tpl-primary-light)] tpl:text-[var(--tpl-primary)]'\n          : 'tpl:text-[var(--tpl-text)] tpl:hover:bg-[var(--tpl-bg-hover)]'\n      \"\n      @mousedown.prevent.stop=\"$emit('select', item)\"\n      @mousemove=\"index !== selectedIndex && $emit('hover', index)\"\n    >\n      <span class=\"tpl:font-medium\">{{ item.label }}</span>\n      <span class=\"tpl:text-[var(--tpl-text-dim)] tpl:font-mono\">{{\n        item.value\n      }}</span>\n    </button>\n  </div>\n</template>\n","import type { MergeTag } from \"@templatical/types\";\nimport { Extension } from \"@tiptap/core\";\nimport Suggestion, {\n  type SuggestionOptions,\n  type SuggestionProps,\n  type SuggestionKeyDownProps,\n} from \"@tiptap/suggestion\";\nimport { type App, createApp, h, ref, type Ref } from \"vue\";\nimport MergeTagSuggestionList from \"../components/MergeTagSuggestionList.vue\";\n\nconst MAX_RESULTS = 10;\n\n// Monotonic counter for unique listbox IDs across multiple popup instances.\nlet POPUP_ID_SEQ = 0;\n\nexport interface MergeTagSuggestionOptions {\n  /** Available merge tags */\n  mergeTags: MergeTag[];\n  /** Trigger string (e.g. \"{{\", \"*|\", \"%%=\") */\n  char: string;\n  /** Localized empty-state label */\n  emptyText: string;\n  /**\n   * Mount target for the suggestion popup. When provided with a non-null\n   * `.value`, the popup attaches into that element instead of\n   * `document.body` — keeping it inside the editor's effective DOM root\n   * (shadow-aware). Pass the ref returned by `usePopoverRoot()`.\n   *\n   * Falls back to `document.body` when omitted or when the ref's value is\n   * null at popup-open time (e.g. headless/test editors without an editor\n   * shell). Preserves pre-Phase-3 behavior for callers that don't migrate.\n   */\n  popoverRoot?: Ref<HTMLElement | null> | null;\n}\n\n/**\n * Filter merge tags by query against label and value (case-insensitive).\n * Capped at MAX_RESULTS. Exported for testing.\n */\nexport function filterMergeTags(tags: MergeTag[], query: string): MergeTag[] {\n  const trimmed = query.trim().toLowerCase();\n  if (trimmed === \"\") {\n    return tags.slice(0, MAX_RESULTS);\n  }\n  return tags\n    .filter((tag) => {\n      const label = tag.label.toLowerCase();\n      const value = tag.value.toLowerCase();\n      return label.includes(trimmed) || value.includes(trimmed);\n    })\n    .slice(0, MAX_RESULTS);\n}\n\n/**\n * Handle a keydown event against a list of items. Returns whether the\n * event was handled (so the suggestion plugin can stop propagation).\n * Exported for testing.\n */\nexport function handleSuggestionKeyDown(\n  event: KeyboardEvent,\n  items: MergeTag[],\n  selectedIndex: Ref<number>,\n  onSelect: (item: MergeTag) => void,\n): boolean {\n  if (items.length === 0) {\n    if (event.key === \"Enter\" || event.key === \"Tab\") return true;\n    return false;\n  }\n\n  if (event.key === \"ArrowDown\") {\n    selectedIndex.value = (selectedIndex.value + 1) % items.length;\n    return true;\n  }\n  if (event.key === \"ArrowUp\") {\n    selectedIndex.value =\n      (selectedIndex.value - 1 + items.length) % items.length;\n    return true;\n  }\n  if (event.key === \"Enter\" || event.key === \"Tab\") {\n    onSelect(items[selectedIndex.value]);\n    return true;\n  }\n  return false;\n}\n\n/** Options for opening the merge-tag popup. */\nexport interface MergeTagPopupOpenOptions {\n  /** Filtered tags to render. */\n  items: MergeTag[];\n  /**\n   * Anchor rect getter (the caret rect). Same contract as\n   * `@tiptap/suggestion`'s `clientRect`: viewport coordinates, re-read on\n   * every reposition so the popup tracks the caret through scroll.\n   */\n  getRect: (() => DOMRect | null) | null;\n  /**\n   * Element that owns the ARIA combobox state and serves as the theme +\n   * scroll-ancestor anchor — the ProseMirror `view.dom` in rich text, the\n   * `<input>`/`<textarea>` in a field.\n   */\n  anchorEl: HTMLElement | null;\n  /** Called with the item the user picks. */\n  onCommand: (item: MergeTag) => void;\n}\n\n/** Options for updating the popup after the query changed. */\nexport interface MergeTagPopupUpdateOptions {\n  items: MergeTag[];\n  getRect: (() => DOMRect | null) | null;\n  onCommand: (item: MergeTag) => void;\n}\n\n/**\n * Imperative handle over a single merge-tag suggestion popup.\n * Both the TipTap suggestion renderer and the input/textarea autocomplete\n * driver drive the SAME controller, so the popup's rendering, positioning,\n * scroll-tracking, ARIA wiring, and keyboard behavior are identical across\n * rich-text and plain-field surfaces by construction.\n */\nexport interface MergeTagPopupController {\n  /** Mount the popup and start tracking the caret. */\n  open(options: MergeTagPopupOpenOptions): void;\n  /** Refresh items + anchor after the query changed. */\n  update(options: MergeTagPopupUpdateOptions): void;\n  /**\n   * Handle a navigation/selection key (Arrow/Enter/Tab). Returns whether it\n   * was handled. Does NOT handle Escape — each caller owns Escape (TipTap's\n   * plugin closes via `onExit`; the field driver calls `close()`).\n   */\n  handleKeyDown(event: KeyboardEvent): boolean;\n  /** Unmount the popup, clear ARIA, and detach listeners. Idempotent. */\n  close(): void;\n  /** Whether the popup is currently mounted. */\n  isOpen(): boolean;\n}\n\n/**\n * Creates a merge-tag suggestion popup controller: mount, ARIA wiring,\n * caret-tracking position (flip-above + off-screen freeze), scroll/resize\n * repositioning, and cleanup. Framework-agnostic — it takes a plain caret\n * rect getter and an anchor element, so it serves both the ProseMirror\n * suggestion plugin and native text fields.\n */\nexport function createMergeTagPopup(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): MergeTagPopupController {\n  let app: App | null = null;\n  let container: HTMLElement | null = null;\n  let editableEl: HTMLElement | null = null;\n  const itemsRef = ref<MergeTag[]>([]);\n  const selectedIndex = ref(0);\n  let currentCommand: ((item: MergeTag) => void) | null = null;\n  const listId = `tpl-merge-tag-suggestion-${++POPUP_ID_SEQ}`;\n  let latestClientRect: (() => DOMRect | null) | null = null;\n  let scrollTargets: Array<EventTarget> = [];\n  let pendingRaf: number | null = null;\n\n  function reposition(): void {\n    position(latestClientRect?.() ?? null);\n  }\n\n  /**\n   * Reposition immediately and on the next animation frame.\n   * After a keystroke triggers the suggestion, TipTap may run its\n   * own `scrollIntoView` to keep the caret visible. That scroll\n   * lands AFTER the current task's `position()` call but BEFORE\n   * the browser's next paint, so we re-measure on rAF to catch\n   * the post-scroll caret rect. Without this, the popup pins to\n   * the pre-scroll caret position and ends up offset on slower\n   * runners.\n   */\n  function repositionAfterPaint(): void {\n    reposition();\n    if (pendingRaf !== null) cancelAnimationFrame(pendingRaf);\n    pendingRaf = requestAnimationFrame(() => {\n      pendingRaf = null;\n      reposition();\n    });\n  }\n\n  function collectScrollAncestors(el: HTMLElement | null): HTMLElement[] {\n    // Walk up the DOM finding scrollable ancestors. ProseMirror's\n    // scrollIntoView fires on whichever ancestor scrolls — listening\n    // to all of them ensures we reposition regardless of which one\n    // moves.\n    const result: HTMLElement[] = [];\n    let node: HTMLElement | null = el?.parentElement ?? null;\n    while (\n      node &&\n      // shadow-ok: ancestor walk terminator; not a mount target\n      node !== document.body &&\n      node !== document.documentElement\n    ) {\n      const style = window.getComputedStyle(node);\n      const overflow = style.overflow + style.overflowX + style.overflowY;\n      if (/(auto|scroll|overlay)/.test(overflow)) {\n        result.push(node);\n      }\n      node = node.parentElement;\n    }\n    return result;\n  }\n\n  function attachScrollListeners(viewDom: HTMLElement | null): void {\n    scrollTargets = [window, ...collectScrollAncestors(viewDom)];\n    for (const target of scrollTargets) {\n      target.addEventListener(\"scroll\", reposition, {\n        passive: true,\n        capture: true,\n      });\n    }\n    window.addEventListener(\"resize\", reposition, { passive: true });\n  }\n\n  function detachScrollListeners(): void {\n    for (const target of scrollTargets) {\n      target.removeEventListener(\"scroll\", reposition, {\n        capture: true,\n      } as EventListenerOptions);\n    }\n    window.removeEventListener(\"resize\", reposition);\n    scrollTargets = [];\n  }\n\n  function position(rect: DOMRect | null): void {\n    if (!container || !rect) return;\n    // If the caret has scrolled out of the viewport, freeze the\n    // popup at its last on-screen position. Following the caret\n    // off-screen produces an invisible popup the user can't reach,\n    // and lets pathological scroll loops drag the popup further\n    // each tick.\n    if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n    // Position `absolute` relative to the mount target — the popover root\n    // (`position: relative`) or the <body> fallback. The caret rect is in\n    // viewport space, so subtract the offset parent's rect to get local\n    // coords: a transformed ancestor of the editor becomes the containing\n    // block for a `fixed` popup and would offset it, but not for an\n    // `absolute` popup anchored inside the positioned popover root. The\n    // off-screen freeze and flip-above decisions still use viewport metrics.\n    container.style.position = \"absolute\";\n    container.style.zIndex = \"9999\";\n    const origin = container.offsetParent?.getBoundingClientRect();\n    const originTop = origin?.top ?? 0;\n    const originLeft = origin?.left ?? 0;\n    container.style.left = `${rect.left - originLeft}px`;\n    // Place below caret first; offsetHeight is sync-readable after\n    // the Vue app has mounted (or after onUpdate's reactive flush).\n    container.style.top = `${rect.bottom - originTop}px`;\n    const popupHeight = container.offsetHeight;\n    if (popupHeight === 0) return;\n    const spaceBelow = window.innerHeight - rect.bottom;\n    if (spaceBelow < popupHeight) {\n      // Not enough room below — flip above. Clamp to 0 so the\n      // popup never positions off the top of the viewport.\n      const flippedTop = Math.max(0, rect.top - popupHeight);\n      container.style.top = `${flippedTop - originTop}px`;\n    }\n  }\n\n  function applyThemeContext(\n    target: HTMLElement,\n    editorEl: HTMLElement | null | undefined,\n  ): void {\n    // When the popup mounts to document.body its `position: fixed`\n    // resolves against the viewport — any transform/filter on a\n    // consumer-page ancestor (route transitions, reveal animations,\n    // dark canvas inversion) creates a containing block and moves\n    // fixed descendants with it. Body ancestors don't transform.\n    //\n    // When mounting inside the editor's popover root, the popup is a\n    // descendant of the `.tpl[data-tpl-theme]` root so CSS vars + font\n    // would inherit — but the snapshot below is still emitted inline\n    // because inline declarations win and the cost is negligible. This\n    // keeps a single behavior across both mount paths.\n    //\n    // CSS vars (--tpl-bg-elevated, --tpl-border, etc.) are scoped to\n    // `.tpl` and `.tpl[data-tpl-theme=\"dark\"]` in the editor's\n    // stylesheet, so the popup wouldn't inherit them at body root.\n    // Adding `class=\"tpl\"` would also pull base rules (min-height,\n    // flex, full-page bg) we don't want on a popup. Instead, snapshot\n    // every --tpl-* custom property from the editor's theme root and\n    // re-emit them inline on the popup wrapper.\n    const themeRoot = editorEl?.closest<HTMLElement>(\"[data-tpl-theme]\");\n    if (!themeRoot) return;\n    const themeValue = themeRoot.getAttribute(\"data-tpl-theme\");\n    if (themeValue) target.setAttribute(\"data-tpl-theme\", themeValue);\n    const computed = window.getComputedStyle(themeRoot);\n    for (let i = 0; i < computed.length; i++) {\n      const prop = computed[i];\n      if (prop.startsWith(\"--tpl-\")) {\n        target.style.setProperty(prop, computed.getPropertyValue(prop));\n      }\n    }\n    // The popup is teleported out of the editor wrapper, so it inherits no\n    // font from it: without this its content renders in the page's default font\n    // and ends up at a different height — which changes the flip-above decision\n    // and shifts the popup off the caret. Copy typography too.\n    target.style.fontFamily = computed.fontFamily;\n    target.style.fontSize = computed.fontSize;\n    target.style.lineHeight = computed.lineHeight;\n  }\n\n  function setEditableAria(active: boolean): void {\n    if (!editableEl) return;\n    if (active) {\n      editableEl.setAttribute(\"role\", \"combobox\");\n      editableEl.setAttribute(\"aria-haspopup\", \"listbox\");\n      editableEl.setAttribute(\"aria-expanded\", \"true\");\n      editableEl.setAttribute(\"aria-controls\", listId);\n    } else {\n      editableEl.removeAttribute(\"aria-expanded\");\n      editableEl.removeAttribute(\"aria-controls\");\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      editableEl.removeAttribute(\"aria-haspopup\");\n      editableEl.removeAttribute(\"role\");\n    }\n  }\n\n  function setActiveDescendant(): void {\n    if (!editableEl) return;\n    if (itemsRef.value.length === 0) {\n      editableEl.removeAttribute(\"aria-activedescendant\");\n      return;\n    }\n    editableEl.setAttribute(\n      \"aria-activedescendant\",\n      `${listId}-opt-${selectedIndex.value}`,\n    );\n  }\n\n  function select(item: MergeTag): void {\n    currentCommand?.(item);\n  }\n\n  return {\n    open: ({ items, getRect, anchorEl, onCommand }) => {\n      itemsRef.value = items;\n      selectedIndex.value = 0;\n      currentCommand = onCommand;\n\n      container = document.createElement(\"div\");\n      container.setAttribute(\"data-testid\", \"merge-tag-suggestion-popup\");\n      editableEl = anchorEl;\n      applyThemeContext(container, anchorEl);\n      // Prefer the editor's popover root (shadow-aware) when wired by\n      // the consumer. Falls back to document.body for headless callers\n      // that don't pass `popoverRoot` to configure().\n      // shadow-ok: fallback when popoverRoot wasn't provided (e.g., headless caller); editor mounts pass the shadow-aware root\n      const mountTarget = popoverRootRef?.value ?? document.body;\n      mountTarget.appendChild(container);\n\n      app = createApp({\n        render() {\n          return h(MergeTagSuggestionList, {\n            items: itemsRef.value,\n            selectedIndex: selectedIndex.value,\n            emptyText,\n            listId,\n            onSelect: (item: MergeTag) => select(item),\n            onHover: (index: number) => {\n              selectedIndex.value = index;\n              setActiveDescendant();\n            },\n          });\n        },\n      });\n      app.mount(container);\n      setEditableAria(true);\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n      attachScrollListeners(anchorEl);\n    },\n    update: ({ items, getRect, onCommand }) => {\n      itemsRef.value = items;\n      // Reset selection when item set changes (query changed).\n      if (selectedIndex.value >= items.length) {\n        selectedIndex.value = 0;\n      }\n      currentCommand = onCommand;\n      setActiveDescendant();\n      latestClientRect = getRect;\n      repositionAfterPaint();\n    },\n    handleKeyDown: (event: KeyboardEvent): boolean => {\n      const handled = handleSuggestionKeyDown(\n        event,\n        itemsRef.value,\n        selectedIndex,\n        select,\n      );\n      if (handled) setActiveDescendant();\n      return handled;\n    },\n    close: () => {\n      // Idempotent: nothing to tear down (and no window listeners to detach)\n      // when the popup was never opened. Keeps repeated close() / close-before-\n      // open cheap and side-effect-free.\n      if (container === null) return;\n      if (pendingRaf !== null) {\n        cancelAnimationFrame(pendingRaf);\n        pendingRaf = null;\n      }\n      detachScrollListeners();\n      setEditableAria(false);\n      app?.unmount();\n      container.remove();\n      app = null;\n      container = null;\n      editableEl = null;\n      currentCommand = null;\n      latestClientRect = null;\n    },\n    isOpen: () => container !== null,\n  };\n}\n\n/**\n * Builds the `@tiptap/suggestion` `render` factory for the merge-tag popup.\n * A thin adapter over {@link createMergeTagPopup}: it maps ProseMirror's\n * `SuggestionProps` (items, `clientRect`, `view.dom`, `command`) onto the\n * controller. Exported as a standalone function so that mapping can be\n * unit-tested with mocked `SuggestionProps` instead of a full editor.\n */\nexport function createMergeTagSuggestionRenderer(\n  emptyText: string,\n  popoverRootRef?: Ref<HTMLElement | null> | null,\n): NonNullable<SuggestionOptions<MergeTag>[\"render\"]> {\n  return () => {\n    const popup = createMergeTagPopup(emptyText, popoverRootRef);\n\n    return {\n      onStart: (props: SuggestionProps<MergeTag>) => {\n        // Use view.dom (ProseMirror contenteditable, actually\n        // attached to the DOM) rather than options.element, which may\n        // be a detached div when no `element` is passed to the editor\n        // constructor (as is the case with @tiptap/vue-3 EditorContent).\n        const viewDom = props.editor.view?.dom as HTMLElement | undefined;\n        popup.open({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          anchorEl: viewDom ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onUpdate: (props: SuggestionProps<MergeTag>) => {\n        popup.update({\n          items: props.items,\n          getRect: props.clientRect ?? null,\n          onCommand: (item) => props.command(item),\n        });\n      },\n      onKeyDown: (props: SuggestionKeyDownProps): boolean => {\n        // Escape closes via TipTap's suggestion plugin (→ onExit); report it\n        // handled without selecting.\n        if (props.event.key === \"Escape\") {\n          return true;\n        }\n        return popup.handleKeyDown(props.event);\n      },\n      onExit: () => popup.close(),\n    };\n  };\n}\n\nexport const MergeTagSuggestion = Extension.create<MergeTagSuggestionOptions>({\n  name: \"mergeTagSuggestion\",\n\n  addOptions() {\n    return {\n      mergeTags: [],\n      char: \"{{\",\n      emptyText: \"No matching merge tags\",\n      popoverRoot: null,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const tags = this.options.mergeTags;\n    const emptyText = this.options.emptyText;\n    const popoverRootRef = this.options.popoverRoot;\n\n    const config: Omit<SuggestionOptions<MergeTag>, \"editor\"> = {\n      char: this.options.char,\n      allowSpaces: false,\n      startOfLine: false,\n      // Default is [\" \"] which requires whitespace/line-start before the\n      // trigger char — so `.{{` would not fire. Allow any preceding char.\n      allowedPrefixes: null,\n      items: ({ query }: { query: string }) => filterMergeTags(tags, query),\n      command: ({\n        editor,\n        range,\n        props,\n      }: {\n        editor: SuggestionProps<MergeTag>[\"editor\"];\n        range: { from: number; to: number };\n        props: MergeTag;\n      }) => {\n        // Use insertContentAt for atomic replace (matches the canonical\n        // @tiptap/suggestion + Mention pattern). Avoids edge cases where\n        // chained deleteRange + insertMergeTag fails to insert when the\n        // selection state shifts mid-chain.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(range, {\n            type: \"mergeTagNode\",\n            attrs: { label: props.label, value: props.value },\n          })\n          .run();\n      },\n      render: createMergeTagSuggestionRenderer(emptyText, popoverRootRef),\n    };\n\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...config,\n      }),\n    ];\n  },\n});\n"],"mappings":"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"}

package/dist/cdn/chunks/TemplateScoringPanel-DBjUNULq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplateScoringPanel-DBjUNULq.js","names":[],"sources":["../../../src/cloud/utils/scoringStyles.ts","../../../src/cloud/components/TemplateScoringPanel.vue","../../../src/cloud/components/TemplateScoringPanel.vue"],"sourcesContent":["export type ScoringSeverity = \"high\" | \"medium\" | \"low\" | string;\n\nexport function scoreColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success)\";\n  if (score >= 60) return \"var(--tpl-warning)\";\n  return \"var(--tpl-danger)\";\n}\n\nexport function scoreBgColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success-light)\";\n  if (score >= 60) return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-danger-light)\";\n}\n\nexport function severityColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger)\";\n  if (severity === \"medium\") return \"var(--tpl-warning)\";\n  return \"var(--tpl-text-muted)\";\n}\n\nexport function severityBgColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger-light)\";\n  if (severity === \"medium\") return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-bg-hover)\";\n}\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[11px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-[11px] tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-[11px] tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[11px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-[11px] tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-[11px] tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/TestEmailModal-BTNlSW6f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TestEmailModal-BTNlSW6f.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return false;\n  if (/\\s/.test(trimmed)) return false;\n\n  const parts = trimmed.split(\"@\");\n  if (parts.length !== 2) return false;\n\n  const [local, domain] = parts;\n  if (local.length === 0) return false;\n  if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n  // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n  // `a@b.c` and `a@sub.example.museum` pass.\n  const dot = domain.indexOf(\".\");\n  return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/TitleEditor-CrnuIq62.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TitleEditor-CrnuIq62.js","names":[],"sources":["../../../src/components/blocks/TitleEditor.vue","../../../src/components/blocks/TitleEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport { usePopoverRoot } from \"../../composables/usePopoverRoot\";\nimport type { TitleBlock as TitleBlockType } from \"@templatical/types\";\nimport {\n  Bold,\n  Braces,\n  Italic,\n  Link,\n  LoaderCircle,\n  ScanLine,\n} from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  THEME_STYLES_KEY,\n  UI_THEME_KEY,\n  MERGE_TAG_PICKER_KEY,\n  LOGIC_TAG_PICKER_KEY,\n} from \"../../keys\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\nimport { withLinkColor } from \"../../utils/linkColorExtension\";\n\nconst props = defineProps<{\n  block: TitleBlockType;\n  toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n  (e: \"done\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverRoot = usePopoverRoot();\n// Hide the floating toolbar while either built-in picker modal is open — see\n// ParagraphToolbar.vue for the same rationale.\nconst picker = inject(MERGE_TAG_PICKER_KEY, null);\nconst logicPicker = inject(LOGIC_TAG_PICKER_KEY, null);\nconst pickerIsOpen = computed(\n  () => (picker?.isOpen.value ?? false) || (logicPicker?.isOpen.value ?? false),\n);\n\nconst { t } = useI18n();\n\nconst {\n  editor,\n  EditorContent,\n  isLoading,\n  initError,\n  retry,\n  showLinkDialog,\n  linkUrl,\n  linkColor,\n  linkDialogRef,\n  canRequestMergeTag,\n  canInsertLogicTag,\n  openLinkDialog,\n  insertLink,\n  removeLink,\n  closeLinkDialog,\n  handleLinkKeydown,\n  handleAddMergeTag,\n  handleAddLogicTag,\n} = useRichTextEditor({\n  blockId: () => props.block.id,\n  blockContent: () => props.block.content,\n  onDone: () => emit(\"done\"),\n  editorName: \"TitleEditor\",\n  async loadExtensions({\n    mergeTags,\n    syntax,\n    triggerChar,\n    autocompleteEnabled,\n    suggestionEmptyText,\n  }) {\n    const [\n      { Editor: TiptapEditor, EditorContent: EC },\n      { default: StarterKit },\n      { default: LinkExt },\n      { MergeTagNode, MergeTagSuggestion, LogicMergeTagNode, LineBoundaryKeys },\n    ] = await Promise.all([\n      import(\"@tiptap/vue-3\"),\n      import(\"@tiptap/starter-kit\"),\n      import(\"@tiptap/extension-link\"),\n      import(\"../../extensions\"),\n    ]);\n\n    return {\n      TiptapEditor,\n      EC,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n          blockquote: false,\n          horizontalRule: false,\n          bulletList: false,\n          orderedList: false,\n          listItem: false,\n          strike: false,\n          // StarterKit bundles @tiptap/extension-link (openOnClick: true).\n          // Disable it so the LinkExt below (openOnClick: false) is the only\n          // link extension — otherwise clicking a link while editing opens it.\n          link: false,\n        }),\n        withLinkColor(LinkExt).configure({\n          openOnClick: false,\n          HTMLAttributes: {\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n          },\n        }),\n        MergeTagNode.configure({ mergeTags, syntax }),\n        LogicMergeTagNode.configure({ syntax }),\n        LineBoundaryKeys,\n        ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n          ? [\n              MergeTagSuggestion.configure({\n                mergeTags,\n                char: triggerChar,\n                emptyText: suggestionEmptyText,\n                popoverRoot,\n              }),\n            ]\n          : []),\n      ],\n    };\n  },\n});\n</script>\n\n<template>\n  <div class=\"tpl-text-editor-wrapper tpl:relative\">\n    <Teleport v-if=\"popoverRoot && !pickerIsOpen\" :to=\"popoverRoot\">\n      <div\n        :data-tpl-theme=\"tplUiTheme\"\n        role=\"toolbar\"\n        :aria-label=\"t.titleEditor.toolbar\"\n        class=\"tpl tpl-text-toolbar tpl:absolute tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-[var(--tpl-shadow-lg)]\"\n        :style=\"{\n          ...themeStyles,\n          top: `${toolbarPosition.top}px`,\n          left: `${toolbarPosition.left}px`,\n          transform: 'translateY(-100%)',\n        }\"\n      >\n        <template v-if=\"!isLoading && editor\">\n          <!-- Bold -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('bold'),\n            }\"\n            :aria-label=\"t.titleEditor.bold\"\n            :title=\"t.titleEditor.bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"\n          >\n            <Bold :size=\"16\" :stroke-width=\"2.5\" />\n          </button>\n          <!-- Italic -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('italic'),\n            }\"\n            :aria-label=\"t.titleEditor.italic\"\n            :title=\"t.titleEditor.italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"\n          >\n            <Italic :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <span\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n            aria-hidden=\"true\"\n          ></span>\n          <!-- Link -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('link'),\n            }\"\n            :aria-label=\"t.titleEditor.addLink\"\n            :title=\"t.titleEditor.addLink\"\n            @click=\"openLinkDialog\"\n          >\n            <Link :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <!-- Add Merge Tag -->\n          <span\n            v-if=\"canRequestMergeTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canRequestMergeTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.mergeTag.insert\"\n            :title=\"t.mergeTag.insert\"\n            @click=\"handleAddMergeTag\"\n          >\n            <ScanLine :size=\"16\" :stroke-width=\"2\" />\n            {{ t.mergeTag.insertShort }}\n          </button>\n          <!-- Insert Logic -->\n          <span\n            v-if=\"canInsertLogicTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canInsertLogicTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.logicTag.insert\"\n            :title=\"t.logicTag.insert\"\n            data-testid=\"insert-logic-button\"\n            @click=\"handleAddLogicTag\"\n          >\n            <Braces :size=\"16\" :stroke-width=\"2\" />\n            {{ t.logicTag.insertShort }}\n          </button>\n        </template>\n        <template v-else>\n          <div\n            class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n            {{ t.errors.editorLoading }}\n          </div>\n        </template>\n      </div>\n    </Teleport>\n\n    <RichTextEditorContent\n      :editor=\"editor\"\n      :editor-content=\"EditorContent\"\n      :is-loading=\"isLoading\"\n      :init-error=\"initError\"\n      @retry=\"retry\"\n    />\n\n    <RichTextLinkDialog\n      :visible=\"showLinkDialog\"\n      :is-editing-link=\"editor?.isActive('link') ?? false\"\n      v-model:dialog-ref=\"linkDialogRef\"\n      v-model:link-url=\"linkUrl\"\n      v-model:link-color=\"linkColor\"\n      @close=\"closeLinkDialog\"\n      @insert=\"insertLink\"\n      @remove=\"removeLink\"\n      @keydown=\"handleLinkKeydown\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport { usePopoverRoot } from \"../../composables/usePopoverRoot\";\nimport type { TitleBlock as TitleBlockType } from \"@templatical/types\";\nimport {\n  Bold,\n  Braces,\n  Italic,\n  Link,\n  LoaderCircle,\n  ScanLine,\n} from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  THEME_STYLES_KEY,\n  UI_THEME_KEY,\n  MERGE_TAG_PICKER_KEY,\n  LOGIC_TAG_PICKER_KEY,\n} from \"../../keys\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\nimport { withLinkColor } from \"../../utils/linkColorExtension\";\n\nconst props = defineProps<{\n  block: TitleBlockType;\n  toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n  (e: \"done\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverRoot = usePopoverRoot();\n// Hide the floating toolbar while either built-in picker modal is open — see\n// ParagraphToolbar.vue for the same rationale.\nconst picker = inject(MERGE_TAG_PICKER_KEY, null);\nconst logicPicker = inject(LOGIC_TAG_PICKER_KEY, null);\nconst pickerIsOpen = computed(\n  () => (picker?.isOpen.value ?? false) || (logicPicker?.isOpen.value ?? false),\n);\n\nconst { t } = useI18n();\n\nconst {\n  editor,\n  EditorContent,\n  isLoading,\n  initError,\n  retry,\n  showLinkDialog,\n  linkUrl,\n  linkColor,\n  linkDialogRef,\n  canRequestMergeTag,\n  canInsertLogicTag,\n  openLinkDialog,\n  insertLink,\n  removeLink,\n  closeLinkDialog,\n  handleLinkKeydown,\n  handleAddMergeTag,\n  handleAddLogicTag,\n} = useRichTextEditor({\n  blockId: () => props.block.id,\n  blockContent: () => props.block.content,\n  onDone: () => emit(\"done\"),\n  editorName: \"TitleEditor\",\n  async loadExtensions({\n    mergeTags,\n    syntax,\n    triggerChar,\n    autocompleteEnabled,\n    suggestionEmptyText,\n  }) {\n    const [\n      { Editor: TiptapEditor, EditorContent: EC },\n      { default: StarterKit },\n      { default: LinkExt },\n      { MergeTagNode, MergeTagSuggestion, LogicMergeTagNode, LineBoundaryKeys },\n    ] = await Promise.all([\n      import(\"@tiptap/vue-3\"),\n      import(\"@tiptap/starter-kit\"),\n      import(\"@tiptap/extension-link\"),\n      import(\"../../extensions\"),\n    ]);\n\n    return {\n      TiptapEditor,\n      EC,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n          blockquote: false,\n          horizontalRule: false,\n          bulletList: false,\n          orderedList: false,\n          listItem: false,\n          strike: false,\n          // StarterKit bundles @tiptap/extension-link (openOnClick: true).\n          // Disable it so the LinkExt below (openOnClick: false) is the only\n          // link extension — otherwise clicking a link while editing opens it.\n          link: false,\n        }),\n        withLinkColor(LinkExt).configure({\n          openOnClick: false,\n          HTMLAttributes: {\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n          },\n        }),\n        MergeTagNode.configure({ mergeTags, syntax }),\n        LogicMergeTagNode.configure({ syntax }),\n        LineBoundaryKeys,\n        ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n          ? [\n              MergeTagSuggestion.configure({\n                mergeTags,\n                char: triggerChar,\n                emptyText: suggestionEmptyText,\n                popoverRoot,\n              }),\n            ]\n          : []),\n      ],\n    };\n  },\n});\n</script>\n\n<template>\n  <div class=\"tpl-text-editor-wrapper tpl:relative\">\n    <Teleport v-if=\"popoverRoot && !pickerIsOpen\" :to=\"popoverRoot\">\n      <div\n        :data-tpl-theme=\"tplUiTheme\"\n        role=\"toolbar\"\n        :aria-label=\"t.titleEditor.toolbar\"\n        class=\"tpl tpl-text-toolbar tpl:absolute tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-[var(--tpl-shadow-lg)]\"\n        :style=\"{\n          ...themeStyles,\n          top: `${toolbarPosition.top}px`,\n          left: `${toolbarPosition.left}px`,\n          transform: 'translateY(-100%)',\n        }\"\n      >\n        <template v-if=\"!isLoading && editor\">\n          <!-- Bold -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('bold'),\n            }\"\n            :aria-label=\"t.titleEditor.bold\"\n            :title=\"t.titleEditor.bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"\n          >\n            <Bold :size=\"16\" :stroke-width=\"2.5\" />\n          </button>\n          <!-- Italic -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('italic'),\n            }\"\n            :aria-label=\"t.titleEditor.italic\"\n            :title=\"t.titleEditor.italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"\n          >\n            <Italic :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <span\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n            aria-hidden=\"true\"\n          ></span>\n          <!-- Link -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('link'),\n            }\"\n            :aria-label=\"t.titleEditor.addLink\"\n            :title=\"t.titleEditor.addLink\"\n            @click=\"openLinkDialog\"\n          >\n            <Link :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <!-- Add Merge Tag -->\n          <span\n            v-if=\"canRequestMergeTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canRequestMergeTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.mergeTag.insert\"\n            :title=\"t.mergeTag.insert\"\n            @click=\"handleAddMergeTag\"\n          >\n            <ScanLine :size=\"16\" :stroke-width=\"2\" />\n            {{ t.mergeTag.insertShort }}\n          </button>\n          <!-- Insert Logic -->\n          <span\n            v-if=\"canInsertLogicTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canInsertLogicTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.logicTag.insert\"\n            :title=\"t.logicTag.insert\"\n            data-testid=\"insert-logic-button\"\n            @click=\"handleAddLogicTag\"\n          >\n            <Braces :size=\"16\" :stroke-width=\"2\" />\n            {{ t.logicTag.insertShort }}\n          </button>\n        </template>\n        <template v-else>\n          <div\n            class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n            {{ t.errors.editorLoading }}\n          </div>\n        </template>\n      </div>\n    </Teleport>\n\n    <RichTextEditorContent\n      :editor=\"editor\"\n      :editor-content=\"EditorContent\"\n      :is-loading=\"isLoading\"\n      :init-error=\"initError\"\n      @retry=\"retry\"\n    />\n\n    <RichTextLinkDialog\n      :visible=\"showLinkDialog\"\n      :is-editing-link=\"editor?.isActive('link') ?? false\"\n      v-model:dialog-ref=\"linkDialogRef\"\n      v-model:link-url=\"linkUrl\"\n      v-model:link-color=\"linkColor\"\n      @close=\"closeLinkDialog\"\n      @insert=\"insertLink\"\n      @remove=\"removeLink\"\n      @keydown=\"handleLinkKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/en-C9U7N77n.js

@@ -1,2 +0,0 @@
-import { t as e } from "./editor-modal-MXgtarMl.js";
-export { e as default };