@templatical/editor 0.26.2 → 0.27.0

package/dist/cdn/chunks/ColorPicker-CStXen0Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-CStXen0Y.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"],"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, inject, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { usePopoverPosition } from \"../composables/usePopoverPosition\";\nimport { colorTextClass } from \"../constants/styleConstants\";\nimport { canonicalizeHexColor, normalizeColorToHex } from \"../utils/color\";\nimport { COLORS_KEY, THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { DEFAULT_RESOLVED_COLORS } from \"../utils/resolveColorsConfig\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    /**\n     * Color the picker wheel opens on while the field is unset. It only\n     * positions the wheel — it never paints the swatch or fills the input,\n     * so an unset field still reads as \"not set\".\n     */\n    seedColor?: string;\n    swatchOnly?: boolean;\n    disabled?: boolean;\n    /**\n     * Swatch trigger size. `\"md\"` (40px) is the default for sidebar panels;\n     * `\"sm\"` (32px) matches the compact rich-text floating toolbar controls.\n     */\n    size?: \"sm\" | \"md\";\n    /**\n     * Accessible label (and hover title) for the swatch trigger. Falls back to\n     * the generic \"pick color\" label. Set it when several pickers sit side by\n     * side and must be told apart (e.g. text color vs highlight in the toolbar).\n     */\n    ariaLabel?: string;\n    /**\n     * Per-instance override of the editor-wide `colors.presets` for this one\n     * picker. This is the extension seam a caller uses to scope a single picker\n     * to its own palette; when omitted, the injected editor-level presets apply.\n     */\n    presets?: string[];\n    /**\n     * Per-instance override of the editor-wide `colors.allowCustom` for this one\n     * picker. When omitted, the injected editor-level setting applies.\n     */\n    allowCustom?: boolean;\n  }>(),\n  {\n    placeholder: \"\",\n    seedColor: \"#ffffff\",\n    swatchOnly: false,\n    disabled: false,\n    size: \"md\",\n    ariaLabel: \"\",\n    presets: undefined,\n    allowCustom: undefined,\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\n// Whether the picker emitted a real change during the current pointer gesture.\n// vanilla-colorful only fires `color-changed` when the chosen color differs\n// from the one the wheel was seeded with — so picking a color equal to the\n// seed emits nothing. When the field is still unset after such a no-change\n// pick, we commit the seed ourselves on pointerup so the value persists\n// (otherwise e.g. white on an empty background can never be set — issue #282).\nconst pickerTouched = ref(false);\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst isUnset = computed(() => !props.modelValue);\n\n// vanilla-colorful and the hex field are hex-only, but a stored value read back\n// from the DOM (e.g. a TipTap textStyle/highlight color) can be `rgb(...)`. Show\n// and seed the wheel with the hex form; the raw value still drives unset/emit.\nconst displayValue = computed(() => normalizeColorToHex(props.modelValue));\n\n// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() =>\n  normalizeColorToHex(props.modelValue || props.seedColor),\n);\n\n// The clear (×) sits inside whichever hex field is active — the inline field in\n// full mode, or the popover field in swatch-only mode — shown only when a value\n// is set. Not gated on swatchOnly: each field renders only in its own mode.\nconst showClear = computed(() => !props.disabled && !isUnset.value);\n\n// Color palette: a per-instance `presets`/`allowCustom` prop wins over the\n// injected editor-wide `colors` config, per property. Default keeps the picker\n// unchanged when neither is configured. \"preset\" is kept distinct from the\n// trigger \"swatch\" (swatchOnly/swatchRef) on purpose — they are two different\n// concepts in this file.\nconst editorColors = inject(COLORS_KEY, DEFAULT_RESOLVED_COLORS);\n// Deduplicated: a repeated entry in the configured palette would render a\n// pointless second chip and collide on the value-based `v-for` key.\nconst presets = computed(() => [\n  ...new Set(props.presets ?? editorColors.presets),\n]);\nconst allowCustom = computed(\n  () => props.allowCustom ?? editorColors.allowCustom,\n);\nconst hasPresets = computed(() => presets.value.length > 0);\n\n// Show the free-form controls (wheel + hex inputs) whenever custom entry is\n// allowed OR there are no presets to fall back on — so a picker is never left\n// with no way to choose a color. `resolveColorsConfig` already forbids\n// `allowCustom: false` without presets at the editor level; a custom-block\n// color field locking itself with no palette anywhere (`resolveFieldColors`)\n// relies on this guard instead.\nconst showFreeform = computed(() => allowCustom.value || !hasPresets.value);\n\n// A preset reads as selected when its hex equals the current value, compared in\n// the canonical (rgb→hex, 3-digit expanded, lowercased) form — so a `#abc`\n// preset matches an `#aabbcc` browser round-trip and case never matters.\nconst normalizedValue = computed(() => canonicalizeHexColor(props.modelValue));\nfunction isPresetSelected(preset: string): boolean {\n  return (\n    normalizedValue.value !== \"\" &&\n    canonicalizeHexColor(preset) === normalizedValue.value\n  );\n}\nfunction selectPreset(preset: string): void {\n  emit(\"update:modelValue\", preset);\n}\n\n// A leading \"no colour\" (unset/inherit) chip is rendered ONLY in locked mode\n// (`!showFreeform`) — the one mode with no other clear affordance. The freeform\n// modes already own clear via the hex-field ×; a preset-only grid otherwise has\n// no way back to unset once a colour is picked.\nconst showNoneChip = computed(() => hasPresets.value && !showFreeform.value);\n\n// Group-position of preset `index`, shifted by the leading none chip when it's\n// present, so the whole grid indexes as one radio list.\nfunction presetPosition(index: number): number {\n  return showNoneChip.value ? index + 1 : index;\n}\n\n// Roving tabindex (WAI-ARIA APG radio group): the grid exposes exactly one tab\n// stop — the checked radio, or the FIRST radio when nothing is checked (value\n// unset with no none chip, or off-palette) — so the group is reachable by Tab\n// but a single Tab steps past it. The none chip counts as checked when the\n// value is unset. Arrow keys then rove focus between the radios.\nconst rovingIndex = computed(() => {\n  if (showNoneChip.value && isUnset.value) {\n    return 0;\n  }\n  const selected = presets.value.findIndex((preset) =>\n    isPresetSelected(preset),\n  );\n  return selected === -1 ? 0 : presetPosition(selected);\n});\nfunction noneChipTabindex(): number {\n  return rovingIndex.value === 0 ? 0 : -1;\n}\nfunction presetTabindex(index: number): number {\n  return presetPosition(index) === rovingIndex.value ? 0 : -1;\n}\n\n// Arrow keys rove FOCUS across the chips (wrapping); they do NOT select.\n// Enter/Space activate the focused chip via native button click. This\n// deviates from APG's default \"selection follows focus\" on purpose: every\n// selection emits `update:modelValue`, and on the rich-text toolbar path that\n// runs `editor.chain().focus().setColor()` (see the swatch-only field comment\n// in the template), which refocuses the canvas — so following focus would\n// steal focus after the first arrow key and break traversal. APG sanctions\n// explicit activation when moving focus has side effects.\nfunction onPresetGridKeydown(e: KeyboardEvent): void {\n  const arrows = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\"];\n  if (!arrows.includes(e.key)) {\n    return;\n  }\n  // Resolve the current chip from `event.target`, never `document.activeElement`\n  // — the latter is unreliable across a shadow-DOM boundary (this editor can\n  // mount in a shadow root; the repo threads the real root via EDITOR_ROOT_KEY\n  // for the same reason).\n  const group = e.currentTarget as HTMLElement;\n  const radios = Array.from(\n    group.querySelectorAll<HTMLElement>('[role=\"radio\"]'),\n  );\n  const current = (e.target as HTMLElement).closest('[role=\"radio\"]');\n  const currentIndex = current ? radios.indexOf(current as HTMLElement) : -1;\n  if (currentIndex === -1) {\n    return;\n  }\n  const forward = e.key === \"ArrowRight\" || e.key === \"ArrowDown\";\n  const nextIndex =\n    (currentIndex + (forward ? 1 : -1) + radios.length) % radios.length;\n  radios[nextIndex]?.focus();\n  e.preventDefault();\n}\n\nfunction onPickerChange(e: Event): void {\n  pickerTouched.value = true;\n  emit(\"update:modelValue\", (e as CustomEvent).detail.value);\n}\n\nfunction onPickerPointerDown(): void {\n  pickerTouched.value = false;\n}\n\nfunction onPickerPointerUp(): void {\n  // A deliberate pick equal to the seed fires no `color-changed`; commit it.\n  if (!pickerTouched.value && isUnset.value) {\n    emit(\"update:modelValue\", seed.value);\n  }\n}\n\nfunction onTextInput(e: Event): void {\n  emit(\"update:modelValue\", (e.target as HTMLInputElement).value);\n}\n\nfunction clear(): void {\n  emit(\"update:modelValue\", \"\");\n}\n\n// The popover teleports to the shared popover root so it escapes any clipping /\n// overflow-hidden ancestor (e.g. the link dialog's card, where clicking the\n// clipped wheel landed on the backdrop and closed the modal). Position is\n// captured from the swatch on open and applied as `absolute`, in coordinates\n// local to the popover root (`toLocal`) so a transformed ancestor of the\n// editor doesn't offset it — see usePopoverPosition.\nconst popoverRoot = usePopoverRoot();\nconst { toLocal } = usePopoverPosition();\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverPosition = ref({ top: 0, left: 0 });\n\nfunction toggleOpen(): void {\n  if (props.disabled) return;\n  if (!open.value) {\n    const rect = swatchRef.value?.getBoundingClientRect();\n    if (rect) {\n      const PICKER_HEIGHT = 240; // wheel + hue slider + padding, approx\n      const gap = 8;\n      // Open below the swatch, or flip above when it would overflow the viewport\n      // bottom — the popover is `fixed`, so it can't scroll into view otherwise.\n      const fitsBelow = rect.bottom + gap + PICKER_HEIGHT <= window.innerHeight;\n      const viewportTop = fitsBelow\n        ? rect.bottom + gap\n        : Math.max(gap, rect.top - PICKER_HEIGHT - gap);\n      popoverPosition.value = toLocal({ top: viewportTop, left: rect.left });\n    }\n  }\n  open.value = !open.value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:items-center 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=\"ariaLabel || t.colorPicker.pickColor\"\n      :title=\"ariaLabel || undefined\"\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 && 'tpl:hover:border-[var(--tpl-text-dim)]',\n        size === 'sm' ? 'tpl:size-8' : 'tpl:size-10',\n      ]\"\n      @click=\"toggleOpen\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n        :style=\"isUnset ? undefined : { backgroundColor: displayValue }\"\n      />\n    </button>\n    <div v-if=\"!swatchOnly && showFreeform\" class=\"tpl:relative tpl:flex-1\">\n      <input\n        type=\"text\"\n        :class=\"[colorTextClass, 'tpl:w-full']\"\n        :style=\"showClear ? { paddingRight: '2.25rem' } : undefined\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder || t.colorPicker.notSet\"\n        :disabled=\"disabled\"\n        :aria-label=\"t.colorPicker.hexValue\"\n        @input=\"onTextInput\"\n      />\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        :aria-label=\"t.colorPicker.clear\"\n        :title=\"t.colorPicker.clear\"\n        class=\"tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n        @click=\"clear\"\n      >\n        <X :size=\"14\" :stroke-width=\"1.5\" />\n      </button>\n    </div>\n    <Teleport :to=\"popoverRoot\" :disabled=\"!popoverRoot\">\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          :data-tpl-theme=\"tplUiTheme\"\n          class=\"tpl-color-popover tpl:absolute tpl:z-modal tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:shadow-[var(--tpl-shadow-lg)]\"\n          :style=\"{\n            top: `${popoverPosition.top}px`,\n            left: `${popoverPosition.left}px`,\n            ...themeStyles,\n          }\"\n        >\n          <!-- Preset color grid — an ARIA radio group: each chip is a\n               `role=\"radio\"`, arrow keys rove focus between them (roving\n               tabindex), and Enter/Space activate. Supplements the wheel/hex\n               field; the only control when `allowCustom` is false. Each preset\n               carries its color value as its accessible label. -->\n          <div\n            v-if=\"hasPresets\"\n            role=\"radiogroup\"\n            :aria-label=\"t.colorPicker.presetColors\"\n            :class=\"[\n              'tpl:flex tpl:flex-wrap tpl:gap-1.5',\n              showFreeform && 'tpl:mb-2',\n            ]\"\n            @keydown=\"onPresetGridKeydown\"\n          >\n            <!-- Leading \"no colour\" (unset/inherit) chip — locked mode only.\n                 Always present, never gated on the current value: unset is a\n                 first-class member of the value domain, and a chip that\n                 disappeared on activation would strand keyboard focus mid-grid.\n                 Reuses the diagonal-slash unset visual and the same chip\n                 chrome; activating it emits \"\" to clear. -->\n            <button\n              v-if=\"showNoneChip\"\n              type=\"button\"\n              role=\"radio\"\n              :aria-label=\"t.colorPicker.clear\"\n              :title=\"t.colorPicker.clear\"\n              :aria-checked=\"isUnset\"\n              :tabindex=\"noneChipTabindex()\"\n              :class=\"[\n                'tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]',\n                isUnset\n                  ? 'tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]'\n                  : 'tpl:hover:border-[var(--tpl-text-dim)]',\n              ]\"\n              @click=\"clear\"\n            />\n            <button\n              v-for=\"(preset, index) in presets\"\n              :key=\"preset\"\n              type=\"button\"\n              role=\"radio\"\n              :aria-label=\"preset\"\n              :title=\"preset\"\n              :aria-checked=\"isPresetSelected(preset)\"\n              :tabindex=\"presetTabindex(index)\"\n              :style=\"{ backgroundColor: preset }\"\n              :class=\"[\n                'tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]',\n                isPresetSelected(preset)\n                  ? 'tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]'\n                  : 'tpl:hover:border-[var(--tpl-text-dim)]',\n              ]\"\n              @click=\"selectPreset(preset)\"\n            />\n          </div>\n          <hex-color-picker\n            v-if=\"showFreeform\"\n            :color=\"seed\"\n            :aria-label=\"t.colorPicker.pickColor\"\n            @color-changed=\"onPickerChange\"\n            @pointerdown=\"onPickerPointerDown\"\n            @pointerup=\"onPickerPointerUp\"\n            @keydown.escape=\"open = false\"\n          />\n          <!-- Swatch-only mode has no inline field beside the swatch, so the\n               popover carries the manual hex field (+ inline × clear) — the same\n               control as the full-mode sidebar field. It commits on change/Enter,\n               NOT @input: in the rich-text toolbar every emit calls\n               editor.chain().focus().setColor(), and focusing the canvas mid-type\n               would steal focus after the first character. Shown even when unset\n               so a first color can be typed; the × appears only once a value is set. -->\n          <div v-if=\"swatchOnly && showFreeform\" class=\"tpl:relative tpl:mt-2\">\n            <input\n              type=\"text\"\n              :class=\"[colorTextClass, 'tpl:w-full']\"\n              :style=\"showClear ? { paddingRight: '2.25rem' } : undefined\"\n              :value=\"displayValue\"\n              :placeholder=\"placeholder || t.colorPicker.notSet\"\n              :disabled=\"disabled\"\n              :aria-label=\"t.colorPicker.hexValue\"\n              @change=\"onTextInput\"\n              @keydown.enter.prevent=\"\n                ($event.target as HTMLInputElement).blur()\n              \"\n            />\n            <button\n              v-if=\"showClear\"\n              type=\"button\"\n              :aria-label=\"t.colorPicker.clear\"\n              :title=\"t.colorPicker.clear\"\n              class=\"tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"clear\"\n            >\n              <X :size=\"14\" :stroke-width=\"1.5\" />\n            </button>\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\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\n/* Unset swatch: paper with a single thin diagonal slash = \"no color set\".\n   A neutral non-color signal — never Signal Amber (intent) or Danger. */\n.tpl-color-swatch-empty {\n  background-color: var(--tpl-bg);\n  background-image: linear-gradient(\n    to top right,\n    transparent calc(50% - 0.75px),\n    var(--tpl-text-dim) calc(50% - 0.75px),\n    var(--tpl-text-dim) calc(50% + 0.75px),\n    transparent calc(50% + 0.75px)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { usePopoverRoot } from \"../composables/usePopoverRoot\";\nimport { usePopoverPosition } from \"../composables/usePopoverPosition\";\nimport { colorTextClass } from \"../constants/styleConstants\";\nimport { canonicalizeHexColor, normalizeColorToHex } from \"../utils/color\";\nimport { COLORS_KEY, THEME_STYLES_KEY, UI_THEME_KEY } from \"../keys\";\nimport { DEFAULT_RESOLVED_COLORS } from \"../utils/resolveColorsConfig\";\nimport \"vanilla-colorful\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string;\n    placeholder?: string;\n    /**\n     * Color the picker wheel opens on while the field is unset. It only\n     * positions the wheel — it never paints the swatch or fills the input,\n     * so an unset field still reads as \"not set\".\n     */\n    seedColor?: string;\n    swatchOnly?: boolean;\n    disabled?: boolean;\n    /**\n     * Swatch trigger size. `\"md\"` (40px) is the default for sidebar panels;\n     * `\"sm\"` (32px) matches the compact rich-text floating toolbar controls.\n     */\n    size?: \"sm\" | \"md\";\n    /**\n     * Accessible label (and hover title) for the swatch trigger. Falls back to\n     * the generic \"pick color\" label. Set it when several pickers sit side by\n     * side and must be told apart (e.g. text color vs highlight in the toolbar).\n     */\n    ariaLabel?: string;\n    /**\n     * Per-instance override of the editor-wide `colors.presets` for this one\n     * picker. This is the extension seam a caller uses to scope a single picker\n     * to its own palette; when omitted, the injected editor-level presets apply.\n     */\n    presets?: string[];\n    /**\n     * Per-instance override of the editor-wide `colors.allowCustom` for this one\n     * picker. When omitted, the injected editor-level setting applies.\n     */\n    allowCustom?: boolean;\n  }>(),\n  {\n    placeholder: \"\",\n    seedColor: \"#ffffff\",\n    swatchOnly: false,\n    disabled: false,\n    size: \"md\",\n    ariaLabel: \"\",\n    presets: undefined,\n    allowCustom: undefined,\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\n// Whether the picker emitted a real change during the current pointer gesture.\n// vanilla-colorful only fires `color-changed` when the chosen color differs\n// from the one the wheel was seeded with — so picking a color equal to the\n// seed emits nothing. When the field is still unset after such a no-change\n// pick, we commit the seed ourselves on pointerup so the value persists\n// (otherwise e.g. white on an empty background can never be set — issue #282).\nconst pickerTouched = ref(false);\n\nonClickOutside(\n  popoverRef,\n  () => {\n    open.value = false;\n  },\n  { ignore: [swatchRef] },\n);\n\nconst isUnset = computed(() => !props.modelValue);\n\n// vanilla-colorful and the hex field are hex-only, but a stored value read back\n// from the DOM (e.g. a TipTap textStyle/highlight color) can be `rgb(...)`. Show\n// and seed the wheel with the hex form; the raw value still drives unset/emit.\nconst displayValue = computed(() => normalizeColorToHex(props.modelValue));\n\n// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() =>\n  normalizeColorToHex(props.modelValue || props.seedColor),\n);\n\n// The clear (×) sits inside whichever hex field is active — the inline field in\n// full mode, or the popover field in swatch-only mode — shown only when a value\n// is set. Not gated on swatchOnly: each field renders only in its own mode.\nconst showClear = computed(() => !props.disabled && !isUnset.value);\n\n// Color palette: a per-instance `presets`/`allowCustom` prop wins over the\n// injected editor-wide `colors` config, per property. Default keeps the picker\n// unchanged when neither is configured. \"preset\" is kept distinct from the\n// trigger \"swatch\" (swatchOnly/swatchRef) on purpose — they are two different\n// concepts in this file.\nconst editorColors = inject(COLORS_KEY, DEFAULT_RESOLVED_COLORS);\n// Deduplicated: a repeated entry in the configured palette would render a\n// pointless second chip and collide on the value-based `v-for` key.\nconst presets = computed(() => [\n  ...new Set(props.presets ?? editorColors.presets),\n]);\nconst allowCustom = computed(\n  () => props.allowCustom ?? editorColors.allowCustom,\n);\nconst hasPresets = computed(() => presets.value.length > 0);\n\n// Show the free-form controls (wheel + hex inputs) whenever custom entry is\n// allowed OR there are no presets to fall back on — so a picker is never left\n// with no way to choose a color. `resolveColorsConfig` already forbids\n// `allowCustom: false` without presets at the editor level; a custom-block\n// color field locking itself with no palette anywhere (`resolveFieldColors`)\n// relies on this guard instead.\nconst showFreeform = computed(() => allowCustom.value || !hasPresets.value);\n\n// A preset reads as selected when its hex equals the current value, compared in\n// the canonical (rgb→hex, 3-digit expanded, lowercased) form — so a `#abc`\n// preset matches an `#aabbcc` browser round-trip and case never matters.\nconst normalizedValue = computed(() => canonicalizeHexColor(props.modelValue));\nfunction isPresetSelected(preset: string): boolean {\n  return (\n    normalizedValue.value !== \"\" &&\n    canonicalizeHexColor(preset) === normalizedValue.value\n  );\n}\nfunction selectPreset(preset: string): void {\n  emit(\"update:modelValue\", preset);\n}\n\n// A leading \"no colour\" (unset/inherit) chip is rendered ONLY in locked mode\n// (`!showFreeform`) — the one mode with no other clear affordance. The freeform\n// modes already own clear via the hex-field ×; a preset-only grid otherwise has\n// no way back to unset once a colour is picked.\nconst showNoneChip = computed(() => hasPresets.value && !showFreeform.value);\n\n// Group-position of preset `index`, shifted by the leading none chip when it's\n// present, so the whole grid indexes as one radio list.\nfunction presetPosition(index: number): number {\n  return showNoneChip.value ? index + 1 : index;\n}\n\n// Roving tabindex (WAI-ARIA APG radio group): the grid exposes exactly one tab\n// stop — the checked radio, or the FIRST radio when nothing is checked (value\n// unset with no none chip, or off-palette) — so the group is reachable by Tab\n// but a single Tab steps past it. The none chip counts as checked when the\n// value is unset. Arrow keys then rove focus between the radios.\nconst rovingIndex = computed(() => {\n  if (showNoneChip.value && isUnset.value) {\n    return 0;\n  }\n  const selected = presets.value.findIndex((preset) =>\n    isPresetSelected(preset),\n  );\n  return selected === -1 ? 0 : presetPosition(selected);\n});\nfunction noneChipTabindex(): number {\n  return rovingIndex.value === 0 ? 0 : -1;\n}\nfunction presetTabindex(index: number): number {\n  return presetPosition(index) === rovingIndex.value ? 0 : -1;\n}\n\n// Arrow keys rove FOCUS across the chips (wrapping); they do NOT select.\n// Enter/Space activate the focused chip via native button click. This\n// deviates from APG's default \"selection follows focus\" on purpose: every\n// selection emits `update:modelValue`, and on the rich-text toolbar path that\n// runs `editor.chain().focus().setColor()` (see the swatch-only field comment\n// in the template), which refocuses the canvas — so following focus would\n// steal focus after the first arrow key and break traversal. APG sanctions\n// explicit activation when moving focus has side effects.\nfunction onPresetGridKeydown(e: KeyboardEvent): void {\n  const arrows = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\"];\n  if (!arrows.includes(e.key)) {\n    return;\n  }\n  // Resolve the current chip from `event.target`, never `document.activeElement`\n  // — the latter is unreliable across a shadow-DOM boundary (this editor can\n  // mount in a shadow root; the repo threads the real root via EDITOR_ROOT_KEY\n  // for the same reason).\n  const group = e.currentTarget as HTMLElement;\n  const radios = Array.from(\n    group.querySelectorAll<HTMLElement>('[role=\"radio\"]'),\n  );\n  const current = (e.target as HTMLElement).closest('[role=\"radio\"]');\n  const currentIndex = current ? radios.indexOf(current as HTMLElement) : -1;\n  if (currentIndex === -1) {\n    return;\n  }\n  const forward = e.key === \"ArrowRight\" || e.key === \"ArrowDown\";\n  const nextIndex =\n    (currentIndex + (forward ? 1 : -1) + radios.length) % radios.length;\n  radios[nextIndex]?.focus();\n  e.preventDefault();\n}\n\nfunction onPickerChange(e: Event): void {\n  pickerTouched.value = true;\n  emit(\"update:modelValue\", (e as CustomEvent).detail.value);\n}\n\nfunction onPickerPointerDown(): void {\n  pickerTouched.value = false;\n}\n\nfunction onPickerPointerUp(): void {\n  // A deliberate pick equal to the seed fires no `color-changed`; commit it.\n  if (!pickerTouched.value && isUnset.value) {\n    emit(\"update:modelValue\", seed.value);\n  }\n}\n\nfunction onTextInput(e: Event): void {\n  emit(\"update:modelValue\", (e.target as HTMLInputElement).value);\n}\n\nfunction clear(): void {\n  emit(\"update:modelValue\", \"\");\n}\n\n// The popover teleports to the shared popover root so it escapes any clipping /\n// overflow-hidden ancestor (e.g. the link dialog's card, where clicking the\n// clipped wheel landed on the backdrop and closed the modal). Position is\n// captured from the swatch on open and applied as `absolute`, in coordinates\n// local to the popover root (`toLocal`) so a transformed ancestor of the\n// editor doesn't offset it — see usePopoverPosition.\nconst popoverRoot = usePopoverRoot();\nconst { toLocal } = usePopoverPosition();\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverPosition = ref({ top: 0, left: 0 });\n\nfunction toggleOpen(): void {\n  if (props.disabled) return;\n  if (!open.value) {\n    const rect = swatchRef.value?.getBoundingClientRect();\n    if (rect) {\n      const PICKER_HEIGHT = 240; // wheel + hue slider + padding, approx\n      const gap = 8;\n      // Open below the swatch, or flip above when it would overflow the viewport\n      // bottom — the popover is `fixed`, so it can't scroll into view otherwise.\n      const fitsBelow = rect.bottom + gap + PICKER_HEIGHT <= window.innerHeight;\n      const viewportTop = fitsBelow\n        ? rect.bottom + gap\n        : Math.max(gap, rect.top - PICKER_HEIGHT - gap);\n      popoverPosition.value = toLocal({ top: viewportTop, left: rect.left });\n    }\n  }\n  open.value = !open.value;\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tpl:flex tpl:items-center 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=\"ariaLabel || t.colorPicker.pickColor\"\n      :title=\"ariaLabel || undefined\"\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 && 'tpl:hover:border-[var(--tpl-text-dim)]',\n        size === 'sm' ? 'tpl:size-8' : 'tpl:size-10',\n      ]\"\n      @click=\"toggleOpen\"\n    >\n      <span\n        class=\"tpl:block tpl:size-full tpl:rounded-[calc(var(--tpl-radius-sm)-2px)]\"\n        :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n        :style=\"isUnset ? undefined : { backgroundColor: displayValue }\"\n      />\n    </button>\n    <div v-if=\"!swatchOnly && showFreeform\" class=\"tpl:relative tpl:flex-1\">\n      <input\n        type=\"text\"\n        :class=\"[colorTextClass, 'tpl:w-full']\"\n        :style=\"showClear ? { paddingRight: '2.25rem' } : undefined\"\n        :value=\"displayValue\"\n        :placeholder=\"placeholder || t.colorPicker.notSet\"\n        :disabled=\"disabled\"\n        :aria-label=\"t.colorPicker.hexValue\"\n        @input=\"onTextInput\"\n      />\n      <button\n        v-if=\"showClear\"\n        type=\"button\"\n        :aria-label=\"t.colorPicker.clear\"\n        :title=\"t.colorPicker.clear\"\n        class=\"tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n        @click=\"clear\"\n      >\n        <X :size=\"14\" :stroke-width=\"1.5\" />\n      </button>\n    </div>\n    <Teleport :to=\"popoverRoot\" :disabled=\"!popoverRoot\">\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          :data-tpl-theme=\"tplUiTheme\"\n          class=\"tpl-color-popover tpl:absolute tpl:z-modal tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-3 tpl:shadow-[var(--tpl-shadow-lg)]\"\n          :style=\"{\n            top: `${popoverPosition.top}px`,\n            left: `${popoverPosition.left}px`,\n            ...themeStyles,\n          }\"\n        >\n          <!-- Preset color grid — an ARIA radio group: each chip is a\n               `role=\"radio\"`, arrow keys rove focus between them (roving\n               tabindex), and Enter/Space activate. Supplements the wheel/hex\n               field; the only control when `allowCustom` is false. Each preset\n               carries its color value as its accessible label. -->\n          <div\n            v-if=\"hasPresets\"\n            role=\"radiogroup\"\n            :aria-label=\"t.colorPicker.presetColors\"\n            :class=\"[\n              'tpl:flex tpl:flex-wrap tpl:gap-1.5',\n              showFreeform && 'tpl:mb-2',\n            ]\"\n            @keydown=\"onPresetGridKeydown\"\n          >\n            <!-- Leading \"no colour\" (unset/inherit) chip — locked mode only.\n                 Always present, never gated on the current value: unset is a\n                 first-class member of the value domain, and a chip that\n                 disappeared on activation would strand keyboard focus mid-grid.\n                 Reuses the diagonal-slash unset visual and the same chip\n                 chrome; activating it emits \"\" to clear. -->\n            <button\n              v-if=\"showNoneChip\"\n              type=\"button\"\n              role=\"radio\"\n              :aria-label=\"t.colorPicker.clear\"\n              :title=\"t.colorPicker.clear\"\n              :aria-checked=\"isUnset\"\n              :tabindex=\"noneChipTabindex()\"\n              :class=\"[\n                'tpl-color-swatch-empty tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]',\n                isUnset\n                  ? 'tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]'\n                  : 'tpl:hover:border-[var(--tpl-text-dim)]',\n              ]\"\n              @click=\"clear\"\n            />\n            <button\n              v-for=\"(preset, index) in presets\"\n              :key=\"preset\"\n              type=\"button\"\n              role=\"radio\"\n              :aria-label=\"preset\"\n              :title=\"preset\"\n              :aria-checked=\"isPresetSelected(preset)\"\n              :tabindex=\"presetTabindex(index)\"\n              :style=\"{ backgroundColor: preset }\"\n              :class=\"[\n                'tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:border-[var(--tpl-border)] tpl:outline-none tpl:transition-all tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:focus-visible:ring-2 tpl:focus-visible:ring-[var(--tpl-primary)] tpl:focus-visible:ring-offset-1 tpl:focus-visible:ring-offset-[var(--tpl-bg-elevated)]',\n                isPresetSelected(preset)\n                  ? 'tpl:ring-2 tpl:ring-[var(--tpl-primary)] tpl:ring-offset-1 tpl:ring-offset-[var(--tpl-bg-elevated)]'\n                  : 'tpl:hover:border-[var(--tpl-text-dim)]',\n              ]\"\n              @click=\"selectPreset(preset)\"\n            />\n          </div>\n          <hex-color-picker\n            v-if=\"showFreeform\"\n            :color=\"seed\"\n            :aria-label=\"t.colorPicker.pickColor\"\n            @color-changed=\"onPickerChange\"\n            @pointerdown=\"onPickerPointerDown\"\n            @pointerup=\"onPickerPointerUp\"\n            @keydown.escape=\"open = false\"\n          />\n          <!-- Swatch-only mode has no inline field beside the swatch, so the\n               popover carries the manual hex field (+ inline × clear) — the same\n               control as the full-mode sidebar field. It commits on change/Enter,\n               NOT @input: in the rich-text toolbar every emit calls\n               editor.chain().focus().setColor(), and focusing the canvas mid-type\n               would steal focus after the first character. Shown even when unset\n               so a first color can be typed; the × appears only once a value is set. -->\n          <div v-if=\"swatchOnly && showFreeform\" class=\"tpl:relative tpl:mt-2\">\n            <input\n              type=\"text\"\n              :class=\"[colorTextClass, 'tpl:w-full']\"\n              :style=\"showClear ? { paddingRight: '2.25rem' } : undefined\"\n              :value=\"displayValue\"\n              :placeholder=\"placeholder || t.colorPicker.notSet\"\n              :disabled=\"disabled\"\n              :aria-label=\"t.colorPicker.hexValue\"\n              @change=\"onTextInput\"\n              @keydown.enter.prevent=\"\n                ($event.target as HTMLInputElement).blur()\n              \"\n            />\n            <button\n              v-if=\"showClear\"\n              type=\"button\"\n              :aria-label=\"t.colorPicker.clear\"\n              :title=\"t.colorPicker.clear\"\n              class=\"tpl:absolute tpl:right-2 tpl:top-1/2 tpl:flex tpl:size-6 tpl:-translate-y-1/2 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:text-[var(--tpl-text-dim)] tpl:transition-colors tpl:duration-[120ms] tpl:ease-[cubic-bezier(0.16,1,0.3,1)] tpl:hover:bg-[var(--tpl-bg-hover)] tpl:hover:text-[var(--tpl-text)]\"\n              @click=\"clear\"\n            >\n              <X :size=\"14\" :stroke-width=\"1.5\" />\n            </button>\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\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\n/* Unset swatch: paper with a single thin diagonal slash = \"no color set\".\n   A neutral non-color signal — never Signal Amber (intent) or Danger. */\n.tpl-color-swatch-empty {\n  background-color: var(--tpl-bg);\n  background-image: linear-gradient(\n    to top right,\n    transparent calc(50% - 0.75px),\n    var(--tpl-text-dim) calc(50% - 0.75px),\n    var(--tpl-text-dim) calc(50% + 0.75px),\n    transparent calc(50% + 0.75px)\n  );\n}\n</style>\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/CommentsPanel-jzZ2X0P4.js

@@ -0,0 +1,20 @@
+import { N as e, S as t, at as n, h as r, m as i, x as a } from "./draggable-BfpsXFg7.js";
+//#endregion
+//#region src/components/CommentsPanel.vue
+var o = /* @__PURE__ */ t({
+	__name: "CommentsPanel",
+	props: { feature: {} },
+	setup(t) {
+		let o = a(() => import("./CommentsSidebar-Dxke-vUP.js"));
+		return (a, s) => t.feature.isOpen.value ? (e(), i(n(o), {
+			key: 0,
+			visible: t.feature.isOpen.value,
+			feature: t.feature,
+			onClose: s[0] ||= (e) => t.feature.close()
+		}, null, 8, ["visible", "feature"])) : r("", !0);
+	}
+});
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=CommentsPanel-jzZ2X0P4.js.map

package/dist/cdn/chunks/CommentsPanel-jzZ2X0P4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsPanel-jzZ2X0P4.js","names":[],"sources":["../../../src/components/CommentsPanel.vue","../../../src/components/CommentsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * Mount point for the comments sidebar, shared by both entry points.\n *\n * The sidebar is `defineAsyncComponent` behind a `v-if` on its open state, so its\n * chunk is fetched only when the user actually opens the panel. `Editor.vue` in\n * turn lazy-loads *this* wrapper and renders it only when a `CommentsProvider` and\n * a `user` are configured, so a consumer with neither downloads none of it —\n * the `TestEmailPanel` / `SavedBlocksPanels` shape.\n *\n * Never static-import `CommentsSidebar` into `Editor.vue`: that collapses the\n * whole panel into the main entry for every consumer. Guarded by\n * `tests/cdn-chunk-granularity.test.ts`.\n */\nimport { defineAsyncComponent } from \"vue\";\nimport type { UseCommentsFeatureReturn } from \"../composables/useCommentsFeature\";\n\ndefineProps<{\n  feature: UseCommentsFeatureReturn;\n}>();\n\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\n</script>\n\n<template>\n  <CommentsSidebar\n    v-if=\"feature.isOpen.value\"\n    :visible=\"feature.isOpen.value\"\n    :feature=\"feature\"\n    @close=\"feature.close()\"\n  />\n</template>\n"],"mappings":";;;;;;;EAqBA,IAAM,IAAkB,QAChB,OAAO,gCACf;mBAKU,EAAA,QAAQ,OAAO,SADvB,EAAA,GAAA,EAKE,EAAA,CAAA,GAAA;;GAHC,SAAS,EAAA,QAAQ,OAAO;GACxB,SAAS,EAAA;GACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAQ,MAAK"}