@templatical/editor 0.12.1 → 0.13.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 (92) hide show
  1. package/dist/{AiChatSidebar-CXH7l1Ar.js → AiChatSidebar-B0-U5-sb.js} +3 -3
  2. package/dist/{AiFeatureMenu-BKbUUc1D.js → AiFeatureMenu-DxDwLS8B.js} +1 -1
  3. package/dist/{CloudEditor-CB16QzKM.js → CloudEditor-DaEfipBn.js} +190 -158
  4. package/dist/{CollaboratorBar-ACUA7lBJ.js → CollaboratorBar-DgwjisX2.js} +1 -1
  5. package/dist/{CountdownBlock-C-6o19qS.js → CountdownBlock-DO9fziwf.js} +1 -1
  6. package/dist/{CountdownToolbar-Dol7Q0Pv.js → CountdownToolbar-BeII06yJ.js} +1 -1
  7. package/dist/{DesignReferenceSidebar-0dTsBW08.js → DesignReferenceSidebar-BgPDbOsl.js} +19 -31
  8. package/dist/{ModuleBrowserModal-Bz9hSjMS.js → ModuleBrowserModal-DsZRr87F.js} +4 -4
  9. package/dist/{ModulePreviewCanvas-CpaumPMS.js → ModulePreviewCanvas-Dni9kK4j.js} +19 -19
  10. package/dist/{NumberWithSuffix-Bp40ik4l.js → NumberWithSuffix-D3fdj0iO.js} +1 -1
  11. package/dist/{ParagraphEditor-BqRFV_Y-.js → ParagraphEditor-CZ-cmhX3.js} +7 -7
  12. package/dist/{SaveModuleDialog-DmfvH5D0.js → SaveModuleDialog-C38VqN2T.js} +2 -2
  13. package/dist/{SnapshotHistory-C052o-8U.js → SnapshotHistory-ByloTpwh.js} +2 -2
  14. package/dist/{TemplateScoringPanel-CUs8XmIi.js → TemplateScoringPanel-CUxiPtEf.js} +1 -1
  15. package/dist/{TestEmailModal-BIIxRWUt.js → TestEmailModal-BvZBMBad.js} +2 -2
  16. package/dist/{TitleEditor-FMh54Cx5.js → TitleEditor-DbNOcvhR.js} +1 -1
  17. package/dist/{TplModal-utMtXzSO.js → TplModal-BYb-X5Bj.js} +1 -1
  18. package/dist/{blockTypeIcons-C6UGDmrC.js → blockTypeIcons-CyAom3iI.js} +4 -4
  19. package/dist/bundle-stats.json +8 -8
  20. package/dist/cdn/chunks/{AiFeatureMenu-4NhCFeTh.js → AiFeatureMenu-BSoy-SoF.js} +7 -7
  21. package/dist/cdn/chunks/{AiFeatureMenu-4NhCFeTh.js.map → AiFeatureMenu-BSoy-SoF.js.map} +1 -1
  22. package/dist/cdn/chunks/{BlockIssueBadge-BYKThwhE.js → BlockIssueBadge-BQDUuJxy.js} +4 -4
  23. package/dist/cdn/chunks/{BlockIssueBadge-BYKThwhE.js.map → BlockIssueBadge-BQDUuJxy.js.map} +1 -1
  24. package/dist/cdn/chunks/{CloudEditor-DSeihOan.js → CloudEditor-BZuzsQOZ.js} +231 -199
  25. package/dist/cdn/chunks/CloudEditor-BZuzsQOZ.js.map +1 -0
  26. package/dist/cdn/chunks/{CollaboratorBar-Dn5gXNDt.js → CollaboratorBar-DUpSrtDr.js} +3 -3
  27. package/dist/cdn/chunks/{CollaboratorBar-Dn5gXNDt.js.map → CollaboratorBar-DUpSrtDr.js.map} +1 -1
  28. package/dist/cdn/chunks/{CountdownBlock-hYoJdVOt.js → CountdownBlock-DChGTAsH.js} +2 -2
  29. package/dist/cdn/chunks/{CountdownBlock-hYoJdVOt.js.map → CountdownBlock-DChGTAsH.js.map} +1 -1
  30. package/dist/cdn/chunks/{CountdownToolbar-BQn0Kj0X.js → CountdownToolbar-C6gX2SJr.js} +3 -3
  31. package/dist/cdn/chunks/CountdownToolbar-C6gX2SJr.js.map +1 -0
  32. package/dist/cdn/chunks/{IssuesPanel-_5fEnivU.js → IssuesPanel-Bo1uhdSe.js} +6 -6
  33. package/dist/cdn/chunks/{IssuesPanel-_5fEnivU.js.map → IssuesPanel-Bo1uhdSe.js.map} +1 -1
  34. package/dist/cdn/chunks/{ModuleBrowserModal-DtCksAeW.js → ModuleBrowserModal-a-tZRCcD.js} +8 -8
  35. package/dist/cdn/chunks/{ModuleBrowserModal-DtCksAeW.js.map → ModuleBrowserModal-a-tZRCcD.js.map} +1 -1
  36. package/dist/cdn/chunks/{ModulePreviewCanvas-CCOvabZd.js → ModulePreviewCanvas-Bm6k0Op0.js} +24 -24
  37. package/dist/cdn/chunks/{ModulePreviewCanvas-CCOvabZd.js.map → ModulePreviewCanvas-Bm6k0Op0.js.map} +1 -1
  38. package/dist/cdn/chunks/{NumberWithSuffix-cdWjAK6y.js → NumberWithSuffix-HTbuD3VJ.js} +2 -2
  39. package/dist/cdn/chunks/{NumberWithSuffix-cdWjAK6y.js.map → NumberWithSuffix-HTbuD3VJ.js.map} +1 -1
  40. package/dist/cdn/chunks/{ParagraphEditor-BnhnFOW1.js → ParagraphEditor-pGrfSccu.js} +13 -13
  41. package/dist/cdn/chunks/{ParagraphEditor-BnhnFOW1.js.map → ParagraphEditor-pGrfSccu.js.map} +1 -1
  42. package/dist/cdn/chunks/{RichTextEditorContent-DV2yknp8.js → RichTextEditorContent-D7XZix_1.js} +4 -4
  43. package/dist/cdn/chunks/{RichTextEditorContent-DV2yknp8.js.map → RichTextEditorContent-D7XZix_1.js.map} +1 -1
  44. package/dist/cdn/chunks/{SaveModuleDialog-CCX5U7VA.js → SaveModuleDialog-C9PQ9x6j.js} +4 -4
  45. package/dist/cdn/chunks/{SaveModuleDialog-CCX5U7VA.js.map → SaveModuleDialog-C9PQ9x6j.js.map} +1 -1
  46. package/dist/cdn/chunks/{TitleEditor-CQqklX0D.js → TitleEditor-BvFbL16O.js} +7 -7
  47. package/dist/cdn/chunks/{TitleEditor-CQqklX0D.js.map → TitleEditor-BvFbL16O.js.map} +1 -1
  48. package/dist/cdn/chunks/{blockTypeIcons-CpGPHppB.js → blockTypeIcons-Kd1MT0u8.js} +7 -7
  49. package/dist/cdn/chunks/{blockTypeIcons-CpGPHppB.js.map → blockTypeIcons-Kd1MT0u8.js.map} +1 -1
  50. package/dist/cdn/chunks/{de-BpseTWOA.js → de-C2wOXoxs.js} +3 -1
  51. package/dist/cdn/chunks/de-C2wOXoxs.js.map +1 -0
  52. package/dist/cdn/chunks/{en-VGIQ0WNq.js → en-dR7zfNC3.js} +3 -1
  53. package/dist/cdn/chunks/en-dR7zfNC3.js.map +1 -0
  54. package/dist/cdn/chunks/{extensions-Ds9GnMcd.js → extensions-CuUjSmuA.js} +23 -23
  55. package/dist/cdn/chunks/{extensions-Ds9GnMcd.js.map → extensions-CuUjSmuA.js.map} +1 -1
  56. package/dist/cdn/chunks/{features-DxWz_Enw.js → features-DU6lA8l1.js} +471 -420
  57. package/dist/cdn/chunks/features-DU6lA8l1.js.map +1 -0
  58. package/dist/cdn/chunks/{icons-BflGUmFY.js → icons-BjHUZZyJ.js} +2 -2
  59. package/dist/cdn/chunks/{icons-BflGUmFY.js.map → icons-BjHUZZyJ.js.map} +1 -1
  60. package/dist/cdn/chunks/{media-library-C479-QcE.js → media-library-Byelliig.js} +575 -575
  61. package/dist/cdn/chunks/media-library-Byelliig.js.map +1 -0
  62. package/dist/{pt-BR-zAqpLQbW.js → cdn/chunks/pt-BR-BZ86xqK6.js} +4 -0
  63. package/dist/cdn/chunks/pt-BR-BZ86xqK6.js.map +1 -0
  64. package/dist/cdn/chunks/{quality-BL_pEvFP.js → quality-DNnYAntR.js} +83 -83
  65. package/dist/cdn/chunks/{quality-BL_pEvFP.js.map → quality-DNnYAntR.js.map} +1 -1
  66. package/dist/cdn/chunks/{renderer-C0vdAODQ.js → renderer-CZKO-Tav.js} +19 -19
  67. package/dist/cdn/chunks/{renderer-C0vdAODQ.js.map → renderer-CZKO-Tav.js.map} +1 -1
  68. package/dist/cdn/chunks/{src-DzvOWQ9S.js → src-DsqSXXjk.js} +53 -53
  69. package/dist/cdn/chunks/{src-DzvOWQ9S.js.map → src-DsqSXXjk.js.map} +1 -1
  70. package/dist/cdn/chunks/{styles-LfeoSNRA.js → styles-DiAdtiz9.js} +856 -780
  71. package/dist/cdn/chunks/styles-DiAdtiz9.js.map +1 -0
  72. package/dist/cdn/editor.css +1 -1
  73. package/dist/cdn/editor.js +124 -122
  74. package/dist/cdn/editor.js.map +1 -1
  75. package/dist/{de-BpseTWOA.js → de-C2wOXoxs.js} +2 -0
  76. package/dist/{dist-DJ9aD8yA.js → dist-Cgry6fNv.js} +53 -4
  77. package/dist/{en-VGIQ0WNq.js → en-dR7zfNC3.js} +2 -0
  78. package/dist/{cdn/chunks/pt-BR-zAqpLQbW.js → pt-BR-BZ86xqK6.js} +2 -2
  79. package/dist/style.css +1 -1
  80. package/dist/{styles-DSm9Ijxt.js → styles-D0RCAWhB.js} +857 -779
  81. package/dist/templatical-editor.js +94 -92
  82. package/dist/upload-BF7sxd1_.js +17 -0
  83. package/dist/{useEditorCore-D7dQFRkw.js → useEditorCore-DKYZ7aKk.js} +788 -735
  84. package/package.json +7 -7
  85. package/dist/cdn/chunks/CloudEditor-DSeihOan.js.map +0 -1
  86. package/dist/cdn/chunks/CountdownToolbar-BQn0Kj0X.js.map +0 -1
  87. package/dist/cdn/chunks/de-BpseTWOA.js.map +0 -1
  88. package/dist/cdn/chunks/en-VGIQ0WNq.js.map +0 -1
  89. package/dist/cdn/chunks/features-DxWz_Enw.js.map +0 -1
  90. package/dist/cdn/chunks/media-library-C479-QcE.js.map +0 -1
  91. package/dist/cdn/chunks/pt-BR-zAqpLQbW.js.map +0 -1
  92. package/dist/cdn/chunks/styles-LfeoSNRA.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"NumberWithSuffix-cdWjAK6y.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 { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { colorTextClass } from \"../constants/styleConstants\";\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 {\n placeholder: \"\",\n seedColor: \"#ffffff\",\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\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// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() => props.modelValue || props.seedColor);\n\n// The clear (×) lives inside the input, shown only when a value is set.\nconst showClear = computed(\n () => !props.swatchOnly && !props.disabled && !isUnset.value,\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</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=\"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 '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 :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n :style=\"isUnset ? undefined : { backgroundColor: modelValue }\"\n />\n </button>\n <div v-if=\"!swatchOnly\" 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=\"modelValue\"\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)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]\"\n @click=\"clear\"\n >\n <X :size=\"14\" :stroke-width=\"1.5\" />\n </button>\n </div>\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=\"seed\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @pointerdown=\"onPickerPointerDown\"\n @pointerup=\"onPickerPointerUp\"\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\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, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { colorTextClass } from \"../constants/styleConstants\";\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 {\n placeholder: \"\",\n seedColor: \"#ffffff\",\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\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// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() => props.modelValue || props.seedColor);\n\n// The clear (×) lives inside the input, shown only when a value is set.\nconst showClear = computed(\n () => !props.swatchOnly && !props.disabled && !isUnset.value,\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</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=\"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 '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 :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n :style=\"isUnset ? undefined : { backgroundColor: modelValue }\"\n />\n </button>\n <div v-if=\"!swatchOnly\" 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=\"modelValue\"\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)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]\"\n @click=\"clear\"\n >\n <X :size=\"14\" :stroke-width=\"1.5\" />\n </button>\n </div>\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=\"seed\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @pointerdown=\"onPickerPointerDown\"\n @pointerup=\"onPickerPointerUp\"\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\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 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-HTbuD3VJ.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 { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { colorTextClass } from \"../constants/styleConstants\";\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 {\n placeholder: \"\",\n seedColor: \"#ffffff\",\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\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// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() => props.modelValue || props.seedColor);\n\n// The clear (×) lives inside the input, shown only when a value is set.\nconst showClear = computed(\n () => !props.swatchOnly && !props.disabled && !isUnset.value,\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</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=\"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 '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 :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n :style=\"isUnset ? undefined : { backgroundColor: modelValue }\"\n />\n </button>\n <div v-if=\"!swatchOnly\" 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=\"modelValue\"\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)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]\"\n @click=\"clear\"\n >\n <X :size=\"14\" :stroke-width=\"1.5\" />\n </button>\n </div>\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=\"seed\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @pointerdown=\"onPickerPointerDown\"\n @pointerup=\"onPickerPointerUp\"\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\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, ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport { X } from \"@lucide/vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { colorTextClass } from \"../constants/styleConstants\";\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 {\n placeholder: \"\",\n seedColor: \"#ffffff\",\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\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// The color handed to the wheel: the stored value, or the seed when unset.\nconst seed = computed(() => props.modelValue || props.seedColor);\n\n// The clear (×) lives inside the input, shown only when a value is set.\nconst showClear = computed(\n () => !props.swatchOnly && !props.disabled && !isUnset.value,\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</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=\"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 '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 :class=\"{ 'tpl-color-swatch-empty': isUnset }\"\n :style=\"isUnset ? undefined : { backgroundColor: modelValue }\"\n />\n </button>\n <div v-if=\"!swatchOnly\" 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=\"modelValue\"\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)] hover:tpl:bg-[var(--tpl-bg-hover)] hover:tpl:text-[var(--tpl-text)]\"\n @click=\"clear\"\n >\n <X :size=\"14\" :stroke-width=\"1.5\" />\n </button>\n </div>\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=\"seed\"\n :aria-label=\"t.colorPicker.pickColor\"\n @color-changed=\"onPickerChange\"\n @pointerdown=\"onPickerPointerDown\"\n @pointerup=\"onPickerPointerUp\"\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\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 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,8 +1,8 @@
1
1
  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";
2
- 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";
3
- 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";
2
+ import { $ as S, At as C, It as w, X as T, Xt as E, Zt as D, an as O, in as k, it as A, k as j, on as ee, rt as M, sn as N } from "./features-DU6lA8l1.js";
3
+ 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-BjHUZZyJ.js";
4
4
  import { a as z, o as B, s as V } from "./styleConstants-lGobwiLH.js";
5
- import { n as H, t as U } from "./RichTextEditorContent-DV2yknp8.js";
5
+ import { n as H, t as U } from "./RichTextEditorContent-D7XZix_1.js";
6
6
  //#region src/components/blocks/EmojiPickerDropdown.vue?vue&type=script&setup=true&lang.ts
7
7
  var W = [
8
8
  "aria-label",
@@ -12,8 +12,8 @@ var W = [
12
12
  __name: "EmojiPickerDropdown",
13
13
  emits: ["insert"],
14
14
  setup(e, { emit: t }) {
15
- let i = t, { categories: c, isOpen: m, toggle: _, close: y } = C(), { t: b, format: w } = S(), T = a(null), E = a(null);
16
- A(T, l(() => m.value)), j(E, () => {
15
+ let i = t, { categories: c, isOpen: m, toggle: _, close: y } = S(), { t: b, format: C } = w(), T = a(null), E = a(null);
16
+ M(T, l(() => m.value)), N(E, () => {
17
17
  m.value && y();
18
18
  });
19
19
  function D(e) {
@@ -52,7 +52,7 @@ var W = [
52
52
  }, [g("div", K, s(f(b).emoji[e.key]), 1), g("div", q, [(n(!0), u(v, null, r(e.emojis, (e) => (n(), u("button", {
53
53
  key: e,
54
54
  type: "button",
55
- "aria-label": f(w)(f(b).paragraphEditor.emojiItemLabel, { emoji: e }),
55
+ "aria-label": f(C)(f(b).paragraphEditor.emojiItemLabel, { emoji: e }),
56
56
  class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:border-none tpl:bg-transparent tpl:text-base tpl:transition-all tpl:duration-100 tpl:hover:scale-125 tpl:hover:bg-[var(--tpl-bg-active)]",
57
57
  onClick: (t) => D(e)
58
58
  }, s(e), 9, J))), 128))])]))), 128))], 40, G)) : d("", !0)], 512));
@@ -89,7 +89,7 @@ var W = [
89
89
  function me(e, t) {
90
90
  return n(), u("span", pe);
91
91
  }
92
- var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
92
+ var Z = /*#__PURE__*/ A(fe, [["render", me]]), he = [
93
93
  "value",
94
94
  "aria-label",
95
95
  "title"
@@ -146,7 +146,7 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
146
146
  },
147
147
  emits: ["open-link-dialog", "add-merge-tag"],
148
148
  setup(e, { emit: t }) {
149
- 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;
149
+ let r = e, a = t, o = i(k, null), p = i(O, null), h = ee(E, "ParagraphToolbar"), b = j(), S = i(D, null), T = l(() => S?.isOpen.value ?? !1), { t: A } = w(), M = h.fonts;
150
150
  function N(e) {
151
151
  r.editor?.chain().focus().insertContent(e).run();
152
152
  }
@@ -201,7 +201,7 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
201
201
  }, [!e.isLoading && e.editor ? (n(), u(v, { key: 0 }, [g("div", ye, [
202
202
  x(Q, {
203
203
  "model-value": P("fontFamily"),
204
- options: f(j),
204
+ options: f(M),
205
205
  label: f(A).paragraphEditor.fontFamily,
206
206
  placeholder: f(A).paragraphEditor.defaultFont,
207
207
  "width-class": "tpl:w-32",
@@ -412,7 +412,7 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
412
412
  size: 16,
413
413
  "stroke-width": 2
414
414
  }), y(" " + s(f(A).mergeTag.insert), 1)], 8, we)], 64)) : d("", !0)
415
- ])], 64)) : (n(), u("div", Te, [x(f(ee), {
415
+ ])], 64)) : (n(), u("div", Te, [x(f(C), {
416
416
  class: "tpl-spinner",
417
417
  size: 14,
418
418
  "stroke-width": 2
@@ -426,7 +426,7 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
426
426
  },
427
427
  emits: ["done"],
428
428
  setup(t, { emit: r }) {
429
- 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({
429
+ let i = t, a = r, o = j(), { 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({
430
430
  blockId: () => i.block.id,
431
431
  blockContent: () => i.block.content,
432
432
  onDone: () => a("done"),
@@ -444,7 +444,7 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
444
444
  import("./tiptap-CwScfbsM.js").then((e) => e.p),
445
445
  import("./tiptap-CwScfbsM.js").then((e) => e.f),
446
446
  import("./tiptap-CwScfbsM.js").then((e) => e.d),
447
- import("./extensions-Ds9GnMcd.js")
447
+ import("./extensions-CuUjSmuA.js")
448
448
  ]);
449
449
  return {
450
450
  TiptapEditor: a,
@@ -545,4 +545,4 @@ var Z = /*#__PURE__*/ N(fe, [["render", me]]), he = [
545
545
  //#endregion
546
546
  export { Oe as default };
547
547
 
548
- //# sourceMappingURL=ParagraphEditor-BnhnFOW1.js.map
548
+ //# sourceMappingURL=ParagraphEditor-pGrfSccu.js.map