npm - @templatical/editor - Versions diffs - 0.11.1 → 0.12.0 - Mend

@templatical/editor 0.11.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/dist/cdn/chunks/{NumberWithSuffix-Deo8EOSz.js.map → NumberWithSuffix-ZuJ2ePB0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberWithSuffix-Deo8EOSz.js","names":["css","hueCss","saturationCss"],"sources":["../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../../src/components/ColorPicker.vue","../../../src/components/ColorPicker.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue"],"sourcesContent":["// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/*\n Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n /\nconst angleUnits = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n if (hex[0] === '#')\n hex = hex.substring(1);\n if (hex.length < 6) {\n return {\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n };\n }\n return {\n r: parseInt(hex.substring(0, 2), 16),\n g: parseInt(hex.substring(2, 4), 16),\n b: parseInt(hex.substring(4, 6), 16),\n a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n };\n};\nexport const parseHue = (value, unit = 'deg') => {\n return Number(value) * (angleUnits[unit] \|\| 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n const matcher = /hsla?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(hslString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n s = (l < 50 ? l : 100 - l) / 100;\n return {\n h: h,\n s: s > 0 ? ((2 s) / (l + s)) * 100 : 0,\n v: l + s,\n a\n };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n const hh = ((200 - s) * v) / 100;\n return {\n h: round(h),\n s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: round(hh / 2),\n a: round(a, 2)\n };\n};\nexport const hsvaToHsvString = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n const { h, s, v, a } = roundHsva(hsva);\n return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n const { h, s, l } = hsvaToHsla(hsva);\n return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n const { h, s, l, a } = hsvaToHsla(hsva);\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n h = (h / 360) * 6;\n s = s / 100;\n v = v / 100;\n const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n return {\n r: round([v, c, b, b, d, v][module] * 255),\n g: round([d, v, v, c, b, b][module] * 255),\n b: round([b, b, d, v, v, c][module] * 255),\n a: round(a, 2)\n };\n};\nexport const hsvaToRgbString = (hsva) => {\n const { r, g, b } = hsvaToRgba(hsva);\n return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n const { r, g, b, a } = hsvaToRgba(hsva);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n const matcher = /hsva?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(hsvString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return roundHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n v: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n const matcher = /rgba?\$?\\s(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(rgbaString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n const hex = number.toString(16);\n return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n const alphaHex = a < 1 ? format(round(a * 255)) : '';\n return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n // prettier-ignore\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh)),\n s: round(max ? (delta / max) * 100 : 0),\n v: round((max / 255) * 100),\n a\n };\n};\nexport const roundHsva = (hsva) => ({\n h: round(hsva.h),\n s: round(hsva.s),\n v: round(hsva.v),\n a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n if (first === second)\n return true;\n for (const prop in first) {\n // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n // there is or not), and then as a type TS can iterate over.\n if (first[prop] !==\n second[prop])\n return false;\n }\n return true;\n};\nexport const equalColorString = (first, second) => {\n return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n if (first.toLowerCase() === second.toLowerCase())\n return true;\n // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n let template = cache[html];\n if (!template) {\n template = document.createElement('template');\n template.innerHTML = html;\n cache[html] = template;\n }\n return template;\n};\nexport const fire = (target, type, detail) => {\n target.dispatchEvent(new CustomEvent(type, {\n bubbles: true,\n detail\n }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n if (hasTouched && !isTouch(event))\n return false;\n if (!hasTouched)\n hasTouched = isTouch(event);\n return true;\n};\nconst pointerMove = (target, event) => {\n const pointer = isTouch(event) ? event.touches[0] : event;\n const rect = target.el.getBoundingClientRect();\n fire(target.el, 'move', target.getMove({\n x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n }));\n};\nconst keyMove = (target, event) => {\n // We use `keyCode` instead of `key` to reduce the size of the library.\n const keyCode = event.keyCode;\n // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n if (keyCode > 40 \|\| (target.xy && keyCode < 37) \|\| keyCode < 33)\n return;\n // Do not scroll page by keys when color picker element has focus.\n event.preventDefault();\n // Send relative offset to the parent component.\n fire(target.el, 'move', target.getMove({\n x: keyCode === 39 // Arrow Right\n ? 0.01\n : keyCode === 37 // Arrow Left\n ? -0.01\n : keyCode === 34 // Page Down\n ? 0.05\n : keyCode === 33 // Page Up\n ? -0.05\n : keyCode === 35 // End\n ? 1\n : keyCode === 36 // Home\n ? -1\n : 0,\n y: keyCode === 40 // Arrow down\n ? 0.01\n : keyCode === 38 // Arrow Up\n ? -0.01\n : 0\n }, true));\n};\nexport class Slider {\n constructor(root, part, aria, xy) {\n const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n root.appendChild(template.content.cloneNode(true));\n const el = root.querySelector(`[part=${part}]`);\n el.addEventListener('mousedown', this);\n el.addEventListener('touchstart', this);\n el.addEventListener('keydown', this);\n this.el = el;\n this.xy = xy;\n this.nodes = [el.firstChild, el];\n }\n set dragging(state) {\n const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n }\n handleEvent(event) {\n switch (event.type) {\n case 'mousedown':\n case 'touchstart':\n event.preventDefault();\n // event.button is 0 in mousedown for left button activation\n if (!isValid(event) \|\| (!hasTouched && event.button != 0))\n return;\n this.el.focus();\n pointerMove(this, event);\n this.dragging = true;\n break;\n case 'mousemove':\n case 'touchmove':\n event.preventDefault();\n pointerMove(this, event);\n break;\n case 'mouseup':\n case 'touchend':\n this.dragging = false;\n break;\n case 'keydown':\n keyMove(this, event);\n break;\n }\n }\n style(styles) {\n styles.forEach((style, i) => {\n for (const p in style) {\n this.nodes[i].style.setProperty(p, style[p]);\n }\n });\n }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n constructor(root) {\n super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n }\n update({ h }) {\n this.h = h;\n this.style([\n {\n left: `${(h / 360) * 100}%`,\n color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuenow', `${round(h)}`);\n }\n getMove(offset, key) {\n // Hue measured in degrees of the color circle ranging from 0 to 360\n return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n constructor(root) {\n super(root, 'saturation', 'aria-label=\"Color\"', true);\n }\n update(hsva) {\n this.hsva = hsva;\n this.style([\n {\n top: `${100 - hsva.v}%`,\n left: `${hsva.s}%`,\n color: hsvaToHslString(hsva)\n },\n {\n 'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n }\n getMove(offset, key) {\n // Saturation and brightness always fit into [0, 100] range\n return {\n s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n };\n }\n}\n//# sourceMappingURL=saturation.js.map","export default `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;\n//# sourceMappingURL=hue.js.map","export default `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;\n//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n static get observedAttributes() {\n return ['color'];\n }\n get [$css]() {\n return [css, hueCss, saturationCss];\n }\n get [$sliders]() {\n return [Saturation, Hue];\n }\n get color() {\n return this[$color];\n }\n set color(newColor) {\n if (!this[$isSame](newColor)) {\n const newHsva = this.colorModel.toHsva(newColor);\n this[$update](newHsva);\n this[$color] = newColor;\n }\n }\n constructor() {\n super();\n const template = tpl(`<style>${this[$css].join('')}</style>`);\n const root = this.attachShadow({ mode: 'open' });\n root.appendChild(template.content.cloneNode(true));\n root.addEventListener('move', this);\n this[$parts] = this[$sliders].map((slider) => new slider(root));\n }\n connectedCallback() {\n // A user may set a property on an _instance_ of an element,\n // before its prototype has been connected to this class.\n // If so, we need to run it through the proper class setter.\n if (this.hasOwnProperty('color')) {\n const value = this.color;\n delete this['color'];\n this.color = value;\n }\n else if (!this.color) {\n this.color = this.colorModel.defaultColor;\n }\n }\n attributeChangedCallback(_attr, _oldVal, newVal) {\n const color = this.colorModel.fromAttr(newVal);\n if (!this[$isSame](color)) {\n this.color = color;\n }\n }\n handleEvent(event) {\n // Merge the current HSV color object with updated params.\n const oldHsva = this[$hsva];\n const newHsva = { ...oldHsva, ...event.detail };\n this[$update](newHsva);\n let newColor;\n if (!equalColorObjects(newHsva, oldHsva) &&\n !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n this[$color] = newColor;\n fire(this, 'color-changed', { value: newColor });\n }\n }\n [$isSame](color) {\n return this.color && this.colorModel.equal(color, this.color);\n }\n [$update](hsva) {\n this[$hsva] = hsva;\n this[$parts].forEach((part) => part.update(hsva));\n }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n defaultColor: '#000',\n toHsva: hexToHsva,\n fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n equal: equalHex,\n fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n get colorModel() {\n return colorModel;\n }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/*\n A color picker custom element that uses HEX format.\n \n @element hex-color-picker\n \n @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n \n @fires color-changed - Event fired when color property changes.\n \n @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n /\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" \| \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue \|\| DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n 'tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" \| \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue \|\| DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n 'tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,11,12],"mappings":"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"}
1	+ {"version":3,"file":"NumberWithSuffix-ZuJ2ePB0.js","names":["css","hueCss","saturationCss"],"sources":["../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/convert.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js","../../../../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js","../../../src/components/ColorPicker.vue","../../../src/components/ColorPicker.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/SlidingPillSelect.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/FieldRow.vue","../../../src/components/toolbar/NumberWithSuffix.vue","../../../src/components/toolbar/NumberWithSuffix.vue"],"sourcesContent":["// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number, min = 0, max = 1) => {\n return number > max ? max : number < min ? min : number;\n};\nexport const round = (number, digits = 0, base = Math.pow(10, digits)) => {\n return Math.round(base * number) / base;\n};\n//# sourceMappingURL=math.js.map","import { round } from './math.js';\n/*\n Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n /\nconst angleUnits = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI 2)\n};\nexport const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));\nexport const hexToRgba = (hex) => {\n if (hex[0] === '#')\n hex = hex.substring(1);\n if (hex.length < 6) {\n return {\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1\n };\n }\n return {\n r: parseInt(hex.substring(0, 2), 16),\n g: parseInt(hex.substring(2, 4), 16),\n b: parseInt(hex.substring(4, 6), 16),\n a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1\n };\n};\nexport const parseHue = (value, unit = 'deg') => {\n return Number(value) * (angleUnits[unit] \|\| 1);\n};\nexport const hslaStringToHsva = (hslString) => {\n const matcher = /hsla?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(hslString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hslStringToHsva = hslaStringToHsva;\nexport const hslaToHsva = ({ h, s, l, a }) => {\n s = (l < 50 ? l : 100 - l) / 100;\n return {\n h: h,\n s: s > 0 ? ((2 s) / (l + s)) * 100 : 0,\n v: l + s,\n a\n };\n};\nexport const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));\nexport const hsvaToHsla = ({ h, s, v, a }) => {\n const hh = ((200 - s) * v) / 100;\n return {\n h: round(h),\n s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: round(hh / 2),\n a: round(a, 2)\n };\n};\nexport const hsvaToHsvString = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return `hsv(${h}, ${s}%, ${v}%)`;\n};\nexport const hsvaToHsvaString = (hsva) => {\n const { h, s, v, a } = roundHsva(hsva);\n return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\nexport const hsvaToHslString = (hsva) => {\n const { h, s, l } = hsvaToHsla(hsva);\n return `hsl(${h}, ${s}%, ${l}%)`;\n};\nexport const hsvaToHslaString = (hsva) => {\n const { h, s, l, a } = hsvaToHsla(hsva);\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\nexport const hsvaToRgba = ({ h, s, v, a }) => {\n h = (h / 360) * 6;\n s = s / 100;\n v = v / 100;\n const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;\n return {\n r: round([v, c, b, b, d, v][module] * 255),\n g: round([d, v, v, c, b, b][module] * 255),\n b: round([b, b, d, v, v, c][module] * 255),\n a: round(a, 2)\n };\n};\nexport const hsvaToRgbString = (hsva) => {\n const { r, g, b } = hsvaToRgba(hsva);\n return `rgb(${r}, ${g}, ${b})`;\n};\nexport const hsvaToRgbaString = (hsva) => {\n const { r, g, b, a } = hsvaToRgba(hsva);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\nexport const hsvaStringToHsva = (hsvString) => {\n const matcher = /hsva?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(hsvString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return roundHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n v: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)\n });\n};\nexport const hsvStringToHsva = hsvaStringToHsva;\nexport const rgbaStringToHsva = (rgbaString) => {\n const matcher = /rgba?\$?\\s(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n const match = matcher.exec(rgbaString);\n if (!match)\n return { h: 0, s: 0, v: 0, a: 1 };\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)\n });\n};\nexport const rgbStringToHsva = rgbaStringToHsva;\nconst format = (number) => {\n const hex = number.toString(16);\n return hex.length < 2 ? '0' + hex : hex;\n};\nexport const rgbaToHex = ({ r, g, b, a }) => {\n const alphaHex = a < 1 ? format(round(a * 255)) : '';\n return '#' + format(r) + format(g) + format(b) + alphaHex;\n};\nexport const rgbaToHsva = ({ r, g, b, a }) => {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n // prettier-ignore\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh)),\n s: round(max ? (delta / max) * 100 : 0),\n v: round((max / 255) * 100),\n a\n };\n};\nexport const roundHsva = (hsva) => ({\n h: round(hsva.h),\n s: round(hsva.s),\n v: round(hsva.v),\n a: round(hsva.a, 2)\n});\nexport const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });\nexport const hslaToHsl = ({ h, s, l }) => ({ h, s, l });\nexport const hsvaToHsv = (hsva) => {\n const { h, s, v } = roundHsva(hsva);\n return { h, s, v };\n};\n//# sourceMappingURL=convert.js.map","import { hexToRgba } from './convert.js';\nexport const equalColorObjects = (first, second) => {\n if (first === second)\n return true;\n for (const prop in first) {\n // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n // there is or not), and then as a type TS can iterate over.\n if (first[prop] !==\n second[prop])\n return false;\n }\n return true;\n};\nexport const equalColorString = (first, second) => {\n return first.replace(/\\s/g, '') === second.replace(/\\s/g, '');\n};\nexport const equalHex = (first, second) => {\n if (first.toLowerCase() === second.toLowerCase())\n return true;\n // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n//# sourceMappingURL=compare.js.map","const cache = {};\nexport const tpl = (html) => {\n let template = cache[html];\n if (!template) {\n template = document.createElement('template');\n template.innerHTML = html;\n cache[html] = template;\n }\n return template;\n};\nexport const fire = (target, type, detail) => {\n target.dispatchEvent(new CustomEvent(type, {\n bubbles: true,\n detail\n }));\n};\n//# sourceMappingURL=dom.js.map","import { fire, tpl } from '../utils/dom.js';\nimport { clamp } from '../utils/math.js';\nlet hasTouched = false;\n// Check if an event was triggered by touch\nconst isTouch = (e) => 'touches' in e;\n// Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n// If we detected a touch interaction before, we prefer reacting to touch events only.\nconst isValid = (event) => {\n if (hasTouched && !isTouch(event))\n return false;\n if (!hasTouched)\n hasTouched = isTouch(event);\n return true;\n};\nconst pointerMove = (target, event) => {\n const pointer = isTouch(event) ? event.touches[0] : event;\n const rect = target.el.getBoundingClientRect();\n fire(target.el, 'move', target.getMove({\n x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\n y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)\n }));\n};\nconst keyMove = (target, event) => {\n // We use `keyCode` instead of `key` to reduce the size of the library.\n const keyCode = event.keyCode;\n // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.\n if (keyCode > 40 \|\| (target.xy && keyCode < 37) \|\| keyCode < 33)\n return;\n // Do not scroll page by keys when color picker element has focus.\n event.preventDefault();\n // Send relative offset to the parent component.\n fire(target.el, 'move', target.getMove({\n x: keyCode === 39 // Arrow Right\n ? 0.01\n : keyCode === 37 // Arrow Left\n ? -0.01\n : keyCode === 34 // Page Down\n ? 0.05\n : keyCode === 33 // Page Up\n ? -0.05\n : keyCode === 35 // End\n ? 1\n : keyCode === 36 // Home\n ? -1\n : 0,\n y: keyCode === 40 // Arrow down\n ? 0.01\n : keyCode === 38 // Arrow Up\n ? -0.01\n : 0\n }, true));\n};\nexport class Slider {\n constructor(root, part, aria, xy) {\n const template = tpl(`<div role=\"slider\" tabindex=\"0\" part=\"${part}\" ${aria}><div part=\"${part}-pointer\"></div></div>`);\n root.appendChild(template.content.cloneNode(true));\n const el = root.querySelector(`[part=${part}]`);\n el.addEventListener('mousedown', this);\n el.addEventListener('touchstart', this);\n el.addEventListener('keydown', this);\n this.el = el;\n this.xy = xy;\n this.nodes = [el.firstChild, el];\n }\n set dragging(state) {\n const toggleEvent = state ? document.addEventListener : document.removeEventListener;\n toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);\n toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);\n }\n handleEvent(event) {\n switch (event.type) {\n case 'mousedown':\n case 'touchstart':\n event.preventDefault();\n // event.button is 0 in mousedown for left button activation\n if (!isValid(event) \|\| (!hasTouched && event.button != 0))\n return;\n this.el.focus();\n pointerMove(this, event);\n this.dragging = true;\n break;\n case 'mousemove':\n case 'touchmove':\n event.preventDefault();\n pointerMove(this, event);\n break;\n case 'mouseup':\n case 'touchend':\n this.dragging = false;\n break;\n case 'keydown':\n keyMove(this, event);\n break;\n }\n }\n style(styles) {\n styles.forEach((style, i) => {\n for (const p in style) {\n this.nodes[i].style.setProperty(p, style[p]);\n }\n });\n }\n}\n//# sourceMappingURL=slider.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Hue extends Slider {\n constructor(root) {\n super(root, 'hue', 'aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"', false);\n }\n update({ h }) {\n this.h = h;\n this.style([\n {\n left: `${(h / 360) * 100}%`,\n color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuenow', `${round(h)}`);\n }\n getMove(offset, key) {\n // Hue measured in degrees of the color circle ranging from 0 to 360\n return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };\n }\n}\n//# sourceMappingURL=hue.js.map","import { Slider } from './slider.js';\nimport { hsvaToHslString } from '../utils/convert.js';\nimport { clamp, round } from '../utils/math.js';\nexport class Saturation extends Slider {\n constructor(root) {\n super(root, 'saturation', 'aria-label=\"Color\"', true);\n }\n update(hsva) {\n this.hsva = hsva;\n this.style([\n {\n top: `${100 - hsva.v}%`,\n left: `${hsva.s}%`,\n color: hsvaToHslString(hsva)\n },\n {\n 'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })\n }\n ]);\n this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);\n }\n getMove(offset, key) {\n // Saturation and brightness always fit into [0, 100] range\n return {\n s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,\n v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)\n };\n }\n}\n//# sourceMappingURL=saturation.js.map","export default `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:\"\";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;\n//# sourceMappingURL=color-picker.js.map","export default `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;\n//# sourceMappingURL=hue.js.map","export default `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;\n//# sourceMappingURL=saturation.js.map","import { equalColorObjects } from '../utils/compare.js';\nimport { fire, tpl } from '../utils/dom.js';\nimport { Hue } from './hue.js';\nimport { Saturation } from './saturation.js';\nimport css from '../styles/color-picker.js';\nimport hueCss from '../styles/hue.js';\nimport saturationCss from '../styles/saturation.js';\nconst $isSame = Symbol('same');\nconst $color = Symbol('color');\nconst $hsva = Symbol('hsva');\nconst $update = Symbol('update');\nconst $parts = Symbol('parts');\nexport const $css = Symbol('css');\nexport const $sliders = Symbol('sliders');\nexport class ColorPicker extends HTMLElement {\n static get observedAttributes() {\n return ['color'];\n }\n get [$css]() {\n return [css, hueCss, saturationCss];\n }\n get [$sliders]() {\n return [Saturation, Hue];\n }\n get color() {\n return this[$color];\n }\n set color(newColor) {\n if (!this[$isSame](newColor)) {\n const newHsva = this.colorModel.toHsva(newColor);\n this[$update](newHsva);\n this[$color] = newColor;\n }\n }\n constructor() {\n super();\n const template = tpl(`<style>${this[$css].join('')}</style>`);\n const root = this.attachShadow({ mode: 'open' });\n root.appendChild(template.content.cloneNode(true));\n root.addEventListener('move', this);\n this[$parts] = this[$sliders].map((slider) => new slider(root));\n }\n connectedCallback() {\n // A user may set a property on an _instance_ of an element,\n // before its prototype has been connected to this class.\n // If so, we need to run it through the proper class setter.\n if (this.hasOwnProperty('color')) {\n const value = this.color;\n delete this['color'];\n this.color = value;\n }\n else if (!this.color) {\n this.color = this.colorModel.defaultColor;\n }\n }\n attributeChangedCallback(_attr, _oldVal, newVal) {\n const color = this.colorModel.fromAttr(newVal);\n if (!this[$isSame](color)) {\n this.color = color;\n }\n }\n handleEvent(event) {\n // Merge the current HSV color object with updated params.\n const oldHsva = this[$hsva];\n const newHsva = { ...oldHsva, ...event.detail };\n this[$update](newHsva);\n let newColor;\n if (!equalColorObjects(newHsva, oldHsva) &&\n !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {\n this[$color] = newColor;\n fire(this, 'color-changed', { value: newColor });\n }\n }\n [$isSame](color) {\n return this.color && this.colorModel.equal(color, this.color);\n }\n [$update](hsva) {\n this[$hsva] = hsva;\n this[$parts].forEach((part) => part.update(hsva));\n }\n}\n//# sourceMappingURL=color-picker.js.map","import { ColorPicker } from '../components/color-picker.js';\nimport { hexToHsva, hsvaToHex } from '../utils/convert.js';\nimport { equalHex } from '../utils/compare.js';\nconst colorModel = {\n defaultColor: '#000',\n toHsva: hexToHsva,\n fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),\n equal: equalHex,\n fromAttr: (color) => color\n};\nexport class HexBase extends ColorPicker {\n get colorModel() {\n return colorModel;\n }\n}\n//# sourceMappingURL=hex.js.map","import { HexBase } from './lib/entrypoints/hex.js';\n/*\n A color picker custom element that uses HEX format.\n \n @element hex-color-picker\n \n @prop {string} color - Selected color in HEX format.\n * @attr {string} color - Selected color in HEX format.\n \n @fires color-changed - Event fired when color property changes.\n \n @csspart hue - A hue selector container.\n * @csspart saturation - A saturation selector container\n * @csspart hue-pointer - A hue pointer element.\n * @csspart saturation-pointer - A saturation pointer element.\n /\nexport class HexColorPicker extends HexBase {\n}\ncustomElements.define('hex-color-picker', HexColorPicker);\n//# sourceMappingURL=hex-color-picker.js.map","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" \| \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue \|\| DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n 'tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { useI18n } from \"../composables/useI18n\";\nimport {\n colorTextClass,\n DEFAULT_TEXT_COLOR,\n} from \"../constants/styleConstants\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string;\n placeholder?: string;\n size?: \"default\" \| \"large\";\n swatchOnly?: boolean;\n disabled?: boolean;\n }>(),\n {\n placeholder: DEFAULT_TEXT_COLOR,\n size: \"default\",\n swatchOnly: false,\n disabled: false,\n },\n);\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst { t } = useI18n();\n\nconst open = ref(false);\nconst popoverRef = ref<HTMLElement>();\nconst swatchRef = ref<HTMLElement>();\n\nonClickOutside(\n popoverRef,\n () => {\n open.value = false;\n },\n { ignore: [swatchRef] },\n);\n\nconst internalColor = computed({\n get: () => props.modelValue \|\| DEFAULT_TEXT_COLOR,\n set: (val) => emit(\"update:modelValue\", val),\n});\n\nfunction onPickerChange(e: Event) {\n internalColor.value = (e as CustomEvent).detail.value;\n}\n\nfunction onTextInput(e: Event) {\n internalColor.value = (e.target as HTMLInputElement).value;\n}\n</script>\n\n<template>\n <div\n :class=\"[\n 'tpl:flex tpl:gap-2 tpl:relative',\n disabled && 'tpl:opacity-60 tpl:cursor-not-allowed',\n ]\"\n >\n <button\n ref=\"swatchRef\"\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.pickColor\"\n :aria-expanded=\"open\"\n :class=\"[\n 'tpl:shrink-0 tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-0.5 tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]',\n disabled ? 'tpl:cursor-not-allowed' : 'tpl:cursor-pointer',\n open\n ? 'tpl:border-[var(--tpl-primary)] tpl:shadow-[var(--tpl-ring)]'\n : !disabled && 'hover:tpl:border-[var(--tpl-text-dim)]',\n size === 'large' ? 'tpl:size-12' : 'tpl:size-10',\n ]\"\n @click=\"!disabled && (open = !open)\"\n >\n <span\n class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n :style=\"{ backgroundColor: internalColor }\"\n />\n </button>\n <input\n v-if=\"!swatchOnly\"\n type=\"text\"\n :class=\"colorTextClass\"\n :value=\"modelValue\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :aria-label=\"t.colorPicker.hexValue\"\n @input=\"onTextInput\"\n />\n <Transition\n enter-active-class=\"tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n enter-from-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n enter-to-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-active-class=\"tpl:transition-all tpl:duration-[80ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)]\"\n leave-from-class=\"tpl:opacity-100 tpl:scale-100 tpl:translate-y-0\"\n leave-to-class=\"tpl:opacity-0 tpl:scale-95 tpl:translate-y-1\"\n >\n <div\n v-if=\"open\"\n ref=\"popoverRef\"\n class=\"tpl:absolute tpl:left-0 tpl:top-full tpl:z-50 tpl:mt-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-3 tpl:shadow-lg\"\n >\n <hex-color-picker\n :color=\"internalColor\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @keydown.escape=\"open = false\"\n />\n </div>\n </Transition>\n </div>\n</template>\n\n<style>\nhex-color-picker {\n --hcp-width: 200px;\n}\n\nhex-color-picker::part(hue) {\n border-radius: var(--tpl-radius-sm, 7px);\n}\n\nhex-color-picker::part(saturation) {\n border-radius: var(--tpl-radius-sm, 7px) var(--tpl-radius-sm, 7px) 0 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Component } from \"vue\";\nimport { computed } from \"vue\";\n\nexport interface PillOption {\n value: string;\n label: string;\n icon?: Component;\n}\n\nconst props = defineProps<{\n options: PillOption[];\n modelValue: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst selectedIndex = computed(() =>\n props.options.findIndex((o) => o.value === props.modelValue),\n);\n\nconst pillOffset = computed(\n () => `translateX(${Math.max(selectedIndex.value, 0) * 100}%)`,\n);\n</script>\n\n<template>\n <div\n role=\"radiogroup\"\n class=\"tpl:relative tpl:grid tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1\"\n :style=\"{\n gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n backgroundColor: 'var(--tpl-bg-hover)',\n }\"\n >\n <!-- Sliding pill — hidden when modelValue matches no option,\n otherwise it would silently sit on the first option and create\n a visual mismatch with aria-checked. -->\n <div\n v-if=\"selectedIndex >= 0\"\n class=\"tpl:absolute tpl:inset-y-1 tpl:rounded-[var(--tpl-radius-sm)]\"\n :style=\"{\n left: '4px',\n width: `calc((100% - 8px) / ${options.length})`,\n transform: pillOffset,\n backgroundColor: 'var(--tpl-bg)',\n boxShadow: 'var(--tpl-shadow)',\n transition: 'transform 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n ></div>\n\n <button\n v-for=\"option in options\"\n :key=\"option.value\"\n role=\"radio\"\n :aria-checked=\"modelValue === option.value\"\n :aria-label=\"option.label\"\n class=\"tpl:relative tpl:z-10 tpl:flex tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:py-[5px] tpl:text-xs tpl:font-medium\"\n :style=\"{\n color:\n modelValue === option.value\n ? 'var(--tpl-primary)'\n : 'var(--tpl-text-muted)',\n transition: 'color 120ms cubic-bezier(0.16, 1, 0.3, 1)',\n }\"\n :title=\"option.label\"\n @click=\"emit('update:modelValue', option.value)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n :size=\"14\"\n :stroke-width=\"2\"\n />\n <span v-else>{{ option.label }}</span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { labelClass } from \"../../constants/styleConstants\";\n\ndefineProps<{\n label?: string;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:mb-3.5\">\n <label v-if=\"label\" :class=\"labelClass\">{{ label }}</label>\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n inputGroupInputClass,\n inputSuffixClass,\n} from \"../../constants/styleConstants\";\n\ndefineProps<{\n modelValue: number;\n min?: number;\n max?: number;\n suffix: string;\n}>();\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", value: number): void;\n}>();\n</script>\n\n<template>\n <div class=\"tpl:flex tpl:items-stretch\">\n <input\n type=\"number\"\n :class=\"inputGroupInputClass\"\n :value=\"modelValue\"\n :min=\"min\"\n :max=\"max\"\n @input=\"\n emit(\n 'update:modelValue',\n Number(($event.target as HTMLInputElement).value),\n )\n \"\n />\n <span :class=\"inputSuffixClass\">{{ suffix }}</span>\n </div>\n</template>\n"],"x_google_ignoreList":[0,1,2,3,4,5,6,7,8,9,10,11,12],"mappings":"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"}

package/dist/cdn/chunks/{ParagraphEditor-Cbl_gBYM.js → ParagraphEditor-BnhnFOW1.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { K as e, L as t, M as n, P as r, T as i, Z as a, c as o, ct as s, d as c, f as l, g as u, h as d, it as f, l as p, m, ot as h, p as g, st as _, u as v, v as y, x as b, y as x } from "./draggable-iAb7QVJo.js";
-import { $ as S, It as C, X as w, Xt as T, Zt as E, an as D, in as ee, it as O, k, on as A, rt as j, sn as M, yt as N } from "./features-mO5NzwnN.js";
-import { B as te, C as ne, H as re, L as ie, R as ae, X as oe, b as se, c as ce, d as le, f as ue, g as P, i as F, l as I, o as L, s as R } from "./icons-CuXm6XAT.js";
+import { K as e, L as t, M as n, P as r, T as i, Z as a, c as o, ct as s, d as c, f as l, g as u, h as d, it as f, l as p, m, ot as h, p as g, st as _, u as v, v as y, x as b, y as x } from "./draggable-Bci-fq8y.js";
+import { Ft as S, Q as C, Xt as w, Y as T, Yt as E, an as D, in as O, k, kt as ee, nt as A, on as j, rn as M, rt as N } from "./features-DxWz_Enw.js";
+import { G as te, H as ne, I as re, K as ie, M as ae, P as oe, W as se, c as ce, f as P, g as le, i as ue, j as F, l as I, o as L, y as R } from "./icons-BflGUmFY.js";
 import { a as z, o as B, s as V } from "./styleConstants-lGobwiLH.js";
-import { n as H, t as U } from "./RichTextEditorContent-TBPzn3RC.js";
+import { n as H, t as U } from "./RichTextEditorContent-DV2yknp8.js";
 //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
 var W = [
 	"aria-label",
@@ -12,8 +12,8 @@ var W = [
 	__name: "EmojiPickerDropdown",
 	emits: ["insert"],
 	setup(e, { emit: t }) {
-		let i = t, { categories: c, isOpen: m, toggle: _, close: y } = S(), { t: b, format: w } = C(), T = a(null), E = a(null);
-		j(T, l(() => m.value)), M(E, () => {
+		let i = t, { categories: c, isOpen: m, toggle: _, close: y } = C(), { t: b, format: w } = S(), T = a(null), E = a(null);
+		A(T, l(() => m.value)), j(E, () => {
 			m.value && y();
 		});
 		function D(e) {
@@ -89,7 +89,7 @@ var W = [
 function me(e, t) {
 	return n(), u("span", pe);
 }
-var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
+var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
 	"value",
 	"aria-label",
 	"title"
@@ -146,8 +146,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 	},
 	emits: ["open-link-dialog", "add-merge-tag"],
 	setup(e, { emit: t }) {
-		let r = e, a = t, o = i(ee, null), p = i(D, null), h = A(T, "ParagraphToolbar"), b = k(), S = i(E, null), w = l(() => S?.isOpen.value ?? !1), { t: O } = C(), j = h.fonts;
-		function M(e) {
+		let r = e, a = t, o = i(M, null), p = i(O, null), h = D(E, "ParagraphToolbar"), b = k(), C = i(w, null), T = l(() => C?.isOpen.value ?? !1), { t: A } = S(), j = h.fonts;
+		function N(e) {
 			r.editor?.chain().focus().insertContent(e).run();
 		}
 		function P(e) {
@@ -183,13 +183,13 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			let t = r.editor?.chain().focus();
 			e ? t?.setHighlight({ color: e }).run() : t?.unsetHighlight().run();
 		}
-		return (t, r) => f(b) && !w.value ? (n(), m(c, {
+		return (t, r) => f(b) && !T.value ? (n(), m(c, {
 			key: 0,
 			to: f(b)
 		}, [g("div", {
 			"data-tpl-theme": f(p),
 			role: "toolbar",
-			"aria-label": f(O).paragraphEditor.toolbar,
+			"aria-label": f(A).paragraphEditor.toolbar,
 			class: "tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex 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-lg",
 			style: _({
 				...f(o),
@@ -202,8 +202,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			x(Q, {
 				"model-value": P("fontFamily"),
 				options: f(j),
-				label: f(O).paragraphEditor.fontFamily,
-				placeholder: f(O).paragraphEditor.defaultFont,
+				label: f(A).paragraphEditor.fontFamily,
+				placeholder: f(A).paragraphEditor.defaultFont,
 				"width-class": "tpl:w-32",
 				"onUpdate:modelValue": H
 			}, null, 8, [
@@ -215,8 +215,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			x(Q, {
 				"model-value": P("fontSize"),
 				options: f(z),
-				label: f(O).paragraphEditor.fontSize,
-				placeholder: f(O).paragraphEditor.defaultSize,
+				label: f(A).paragraphEditor.fontSize,
+				placeholder: f(A).paragraphEditor.defaultSize,
 				"width-class": "tpl:w-20",
 				"onUpdate:modelValue": U
 			}, null, 8, [
@@ -230,8 +230,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				type: "color",
 				class: "tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-1",
 				value: P("color") || f("#000000"),
-				"aria-label": f(O).paragraphEditor.textColor,
-				title: f(O).paragraphEditor.textColor,
+				"aria-label": f(A).paragraphEditor.textColor,
+				title: f(A).paragraphEditor.textColor,
 				onInput: r[0] ||= (e) => W(e.target.value)
 			}, null, 40, xe)]),
 			g("div", Se, [g("input", {
@@ -239,14 +239,14 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				class: "tpl:size-8 tpl:cursor-pointer tpl:rounded tpl:border tpl:border-[var(--tpl-border)] tpl:p-1",
 				style: _({ backgroundColor: J() || "var(--tpl-bg)" }),
 				value: J() || f("#ffff00"),
-				"aria-label": f(O).paragraphEditor.highlightColor,
-				title: f(O).paragraphEditor.highlightColor,
+				"aria-label": f(A).paragraphEditor.highlightColor,
+				title: f(A).paragraphEditor.highlightColor,
 				onInput: r[1] ||= (e) => Y(e.target.value)
 			}, null, 44, Ce)]),
 			x(Z),
 			x(X, {
-				icon: f(oe),
-				label: f(O).paragraphEditor.bold,
+				icon: f(ne),
+				label: f(A).paragraphEditor.bold,
 				active: e.editor.isActive("bold"),
 				"stroke-width": 2.5,
 				onClick: r[2] ||= (t) => e.editor.chain().focus().toggleBold().run()
@@ -257,7 +257,7 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(X, {
 				icon: f(re),
-				label: f(O).paragraphEditor.italic,
+				label: f(A).paragraphEditor.italic,
 				active: e.editor.isActive("italic"),
 				onClick: r[3] ||= (t) => e.editor.chain().focus().toggleItalic().run()
 			}, null, 8, [
@@ -266,8 +266,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"active"
 			]),
 			x(X, {
-				icon: f(F),
-				label: f(O).paragraphEditor.underline,
+				icon: f(ue),
+				label: f(A).paragraphEditor.underline,
 				active: e.editor.isActive("underline"),
 				onClick: r[4] ||= (t) => e.editor.chain().focus().toggleUnderline().run()
 			}, null, 8, [
@@ -276,8 +276,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"active"
 			]),
 			x(X, {
-				icon: f(ue),
-				label: f(O).paragraphEditor.strikethrough,
+				icon: f(I),
+				label: f(A).paragraphEditor.strikethrough,
 				active: e.editor.isActive("strike"),
 				onClick: r[5] ||= (t) => e.editor.chain().focus().toggleStrike().run()
 			}, null, 8, [
@@ -287,8 +287,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(Z),
 			x(X, {
-				icon: f(le),
-				label: f(O).paragraphEditor.subscript,
+				icon: f(ce),
+				label: f(A).paragraphEditor.subscript,
 				active: e.editor.isActive("subscript"),
 				onClick: r[6] ||= (t) => e.editor.chain().focus().toggleSubscript().run()
 			}, null, 8, [
@@ -297,8 +297,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"active"
 			]),
 			x(X, {
-				icon: f(I),
-				label: f(O).paragraphEditor.superscript,
+				icon: f(L),
+				label: f(A).paragraphEditor.superscript,
 				active: e.editor.isActive("superscript"),
 				onClick: r[7] ||= (t) => e.editor.chain().focus().toggleSuperscript().run()
 			}, null, 8, [
@@ -308,8 +308,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(Z),
 			x(X, {
-				icon: f(te),
-				label: f(O).paragraphEditor.addLink,
+				icon: f(oe),
+				label: f(A).paragraphEditor.addLink,
 				active: e.editor.isActive("link"),
 				onClick: r[8] ||= (e) => a("open-link-dialog")
 			}, null, 8, [
@@ -319,8 +319,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			])
 		]), g("div", $, [
 			x(X, {
-				icon: f(ie),
-				label: f(O).paragraphEditor.bulletList,
+				icon: f(F),
+				label: f(A).paragraphEditor.bulletList,
 				active: e.editor.isActive("bulletList"),
 				onClick: r[9] ||= (t) => e.editor.chain().focus().toggleBulletList().run()
 			}, null, 8, [
@@ -330,7 +330,7 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(X, {
 				icon: f(ae),
-				label: f(O).paragraphEditor.numberedList,
+				label: f(A).paragraphEditor.numberedList,
 				active: e.editor.isActive("orderedList"),
 				onClick: r[10] ||= (t) => e.editor.chain().focus().toggleOrderedList().run()
 			}, null, 8, [
@@ -340,8 +340,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(Z),
 			x(X, {
-				icon: f(L),
-				label: f(O).paragraphEditor.alignLeft,
+				icon: f(se),
+				label: f(A).paragraphEditor.alignLeft,
 				active: e.editor.isActive({ textAlign: "left" }),
 				onClick: r[11] ||= (t) => e.editor.chain().focus().setTextAlign("left").run()
 			}, null, 8, [
@@ -350,8 +350,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"active"
 			]),
 			x(X, {
-				icon: f(ce),
-				label: f(O).paragraphEditor.alignCenter,
+				icon: f(ie),
+				label: f(A).paragraphEditor.alignCenter,
 				active: e.editor.isActive({ textAlign: "center" }),
 				onClick: r[12] ||= (t) => e.editor.chain().focus().setTextAlign("center").run()
 			}, null, 8, [
@@ -360,8 +360,8 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"active"
 			]),
 			x(X, {
-				icon: f(R),
-				label: f(O).paragraphEditor.alignRight,
+				icon: f(te),
+				label: f(A).paragraphEditor.alignRight,
 				active: e.editor.isActive({ textAlign: "right" }),
 				onClick: r[13] ||= (t) => e.editor.chain().focus().setTextAlign("right").run()
 			}, null, 8, [
@@ -373,7 +373,7 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			x(Q, {
 				"model-value": G(),
 				options: f(V),
-				label: f(O).paragraphEditor.lineHeight,
+				label: f(A).paragraphEditor.lineHeight,
 				placeholder: "LH",
 				"width-class": "tpl:w-16",
 				"onUpdate:modelValue": K
@@ -385,7 +385,7 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			x(Q, {
 				"model-value": P("letterSpacing"),
 				options: f(B),
-				label: f(O).paragraphEditor.letterSpacing,
+				label: f(A).paragraphEditor.letterSpacing,
 				placeholder: "LS",
 				"width-class": "tpl:w-20",
 				"onUpdate:modelValue": q
@@ -396,27 +396,27 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 			]),
 			x(Z),
 			x(X, {
-				icon: f(ne),
-				label: f(O).paragraphEditor.clearFormatting,
+				icon: f(R),
+				label: f(A).paragraphEditor.clearFormatting,
 				onClick: r[14] ||= (t) => e.editor.chain().focus().clearNodes().unsetAllMarks().run()
 			}, null, 8, ["icon", "label"]),
 			x(Z),
-			x(de, { onInsert: M }),
+			x(de, { onInsert: N }),
 			e.canRequestMergeTag ? (n(), u(v, { key: 0 }, [x(Z), g("button", {
 				type: "button",
 				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:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]",
-				"aria-label": f(O).mergeTag.insert,
-				title: f(O).mergeTag.insert,
+				"aria-label": f(A).mergeTag.insert,
+				title: f(A).mergeTag.insert,
 				onClick: r[15] ||= (e) => a("add-merge-tag")
-			}, [x(f(se), {
+			}, [x(f(le), {
 				size: 16,
 				"stroke-width": 2
-			}), y(" " + s(f(O).mergeTag.insert), 1)], 8, we)], 64)) : d("", !0)
-		])], 64)) : (n(), u("div", Te, [x(f(N), {
+			}), y(" " + s(f(A).mergeTag.insert), 1)], 8, we)], 64)) : d("", !0)
+		])], 64)) : (n(), u("div", Te, [x(f(ee), {
 			class: "tpl-spinner",
 			size: 14,
 			"stroke-width": 2
-		}), y(" " + s(f(O).errors.editorLoading), 1)]))], 12, ve)], 8, ["to"])) : d("", !0);
+		}), y(" " + s(f(A).errors.editorLoading), 1)]))], 12, ve)], 8, ["to"])) : d("", !0);
 	}
 }), De = { class: "tpl-text-editor-wrapper tpl:relative" }, Oe = /* @__PURE__ */ b({
 	__name: "ParagraphEditor",
@@ -426,25 +426,25 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 	},
 	emits: ["done"],
 	setup(t, { emit: r }) {
-		let i = t, a = r, o = k(), { editor: s, EditorContent: c, isLoading: l, initError: d, retry: p, showLinkDialog: m, linkUrl: h, linkDialogRef: g, canRequestMergeTag: _, openLinkDialog: v, insertLink: y, removeLink: b, closeLinkDialog: S, handleLinkKeydown: C, handleAddMergeTag: T } = w({
+		let i = t, a = r, o = k(), { editor: s, EditorContent: c, isLoading: l, initError: d, retry: p, showLinkDialog: m, linkUrl: h, linkDialogRef: g, canRequestMergeTag: _, openLinkDialog: v, insertLink: y, removeLink: b, closeLinkDialog: S, handleLinkKeydown: C, handleAddMergeTag: w } = T({
 			blockId: () => i.block.id,
 			blockContent: () => i.block.content,
 			onDone: () => a("done"),
 			editorName: "ParagraphEditor",
 			async loadExtensions({ mergeTags: e, syntax: t, triggerChar: n, autocompleteEnabled: r, suggestionEmptyText: i }) {
 				let [{ Editor: a, EditorContent: s }, { default: c }, { default: l }, { default: u }, { default: d }, { default: f }, { default: p }, { TextStyle: m }, { default: h }, { default: g }, { default: _ }, { MergeTagNode: v, MergeTagSuggestion: y, LogicMergeTagNode: b, FontSize: x, LineHeight: S, LetterSpacing: C }] = await Promise.all([
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.i),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.a),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.u),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.o),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.l),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.c),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.s),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.m),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.p),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.f),
-					import("./tiptap-BAwu9VcJ.js").then((e) => e.d),
-					import("./extensions-BtWoLy6E.js")
+					import("./tiptap-CwScfbsM.js").then((e) => e.i),
+					import("./tiptap-CwScfbsM.js").then((e) => e.a),
+					import("./tiptap-CwScfbsM.js").then((e) => e.u),
+					import("./tiptap-CwScfbsM.js").then((e) => e.o),
+					import("./tiptap-CwScfbsM.js").then((e) => e.l),
+					import("./tiptap-CwScfbsM.js").then((e) => e.c),
+					import("./tiptap-CwScfbsM.js").then((e) => e.s),
+					import("./tiptap-CwScfbsM.js").then((e) => e.m),
+					import("./tiptap-CwScfbsM.js").then((e) => e.p),
+					import("./tiptap-CwScfbsM.js").then((e) => e.f),
+					import("./tiptap-CwScfbsM.js").then((e) => e.d),
+					import("./extensions-Ds9GnMcd.js")
 				]);
 				return {
 					TiptapEditor: a,
@@ -496,7 +496,7 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 				"is-loading": f(l),
 				"can-request-merge-tag": f(_),
 				onOpenLinkDialog: f(v),
-				onAddMergeTag: f(T)
+				onAddMergeTag: f(w)
 			}, null, 8, [
 				"editor",
 				"toolbar-position",
@@ -545,4 +545,4 @@ var Z = /*#__PURE__*/ O(fe, [["render", me]]), he = [
 //#endregion
 export { Oe as default };
-//# sourceMappingURL=ParagraphEditor-Cbl_gBYM.js.map
+//# sourceMappingURL=ParagraphEditor-BnhnFOW1.js.map