/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  PLUGIN:   SLIDER REVOLUTION 7                                                ║
║  MODULE:   PAGE EFFECTS  —  shared color picker (SR7-styled, self-contained)  ║
║  AUTHOR:   ThemePunch                                                         ║
╚══════════════════════════════════════════════════════════════════════════════╝

  A compact colour/gradient picker for the Page-Effects authoring UI, modelled on the SR7 editor's
  picker (SR-COLOR look + behaviour) but WITHOUT its substrate (GSAP / _tpt.obj / SR7.B.popUp / the
  modal partial) — those are editor-only and can't run in Gutenberg. Dependency-free vanilla JS +
  pointer events, styled from the shared skin (var(--pe-*)), and reusable by every effect.

  Value object V = { type:'solid'|'linear'|'radial', color:'#rrggbb', opacity:0-100,
                     angle:deg, stops:[{pos:0-100, color:'#rrggbb', opacity:0-100}] }

  API:  SR7.PE.colorField({value, onInput, onChange}) -> swatch element (has setValue/getValue)
        SR7.PE.openColorPicker(anchorEl, value, {onInput, onChange})
        SR7.PE.colorToCss(V) -> css color / gradient string   SR7.PE.normColor(v) -> V

  @copyright 2026 ThemePunch
*/
(()=>{"use strict";window.SR7??={},SR7.PE??={};const e=(e,t,o)=>Math.min(o,Math.max(t,e)),t=e=>{3===(e=String(e||"").replace("#","")).length&&(e=e.split("").map(e=>e+e).join(""));const t=parseInt(e.slice(0,6)||"ffffff",16);return{r:t>>16&255,g:t>>8&255,b:255&t}},o=t=>("0"+Math.round(e(t,0,255)).toString(16)).slice(-2),r=(e,t,r)=>"#"+o(e)+o(t)+o(r),n=(e,t,o)=>{e/=255,t/=255,o/=255;const r=Math.max(e,t,o),n=r-Math.min(e,t,o);let p=0;return n&&(p=r===e?(t-o)/n%6:r===t?(o-e)/n+2:(e-t)/n+4,p*=60,p<0&&(p+=360)),{h:p,s:r?n/r:0,v:r}},p=(e,o)=>{const r=t(e);return`rgba(${0|r.r},${0|r.g},${0|r.b},${null==o?1:o/100})`};SR7.PE.normColor=t=>{if(t&&"object"==typeof t){const o=Array.isArray(t.stops)&&t.stops.length>=2?t.stops.map(t=>({pos:e(+t.pos||0,0,100),color:"string"==typeof t.color&&"#"===t.color[0]?t.color.slice(0,7):"#ffffff",opacity:null==t.opacity?100:e(+t.opacity,0,100)})):null;return{type:"linear"===t.type||"radial"===t.type?t.type:"solid",color:"string"==typeof t.color&&"#"===t.color[0]?t.color.slice(0,7):"#ffffff",opacity:null==t.opacity?100:e(+t.opacity,0,100),angle:null==t.angle?90:e(+t.angle,0,360),stops:o||[{pos:0,color:t.color&&"#"===t.color[0]?t.color.slice(0,7):"#ffffff",opacity:100},{pos:100,color:"#000000",opacity:100}]}}const o="string"==typeof t&&"#"===t[0]?t.slice(0,7):"#ffffff";return{type:"solid",color:o,opacity:100,angle:90,stops:[{pos:0,color:o,opacity:100},{pos:100,color:"#000000",opacity:100}]}},SR7.PE.colorToCss=e=>{if("solid"===(e=SR7.PE.normColor(e)).type)return p(e.color,e.opacity);const t=e.stops.slice().sort((e,t)=>e.pos-t.pos).map(e=>p(e.color,e.opacity)+" "+e.pos+"%").join(",");return"radial"===e.type?"radial-gradient(circle,"+t+")":"linear-gradient("+e.angle+"deg,"+t+")"};const s="linear-gradient(45deg,#888 25%,transparent 25%),linear-gradient(-45deg,#888 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#888 75%),linear-gradient(-45deg,transparent 75%,#888 75%)",a=()=>{if(document.getElementById("sr7pe-cp-css"))return;const e=document.createElement("style");e.id="sr7pe-cp-css",e.textContent=".sr7pe-cp-swatch{width:40px;height:26px;padding:0;border:1px solid var(--pe-border-2,#4A4E51);border-radius:var(--pe-radius-s,4px);cursor:pointer;background:#fff;background-image:"+s+";background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;overflow:hidden}.sr7pe-cp-swatch-fill{display:block;width:100%;height:100%}.sr7pe-cp{position:fixed;z-index:100020;width:236px;background:var(--pe-surface,#2A2C2F);border:1px solid var(--pe-border,#3F444A);border-radius:var(--pe-radius,10px);box-shadow:var(--pe-shadow,0 10px 30px rgba(0,0,0,.45));padding:12px;font-family:var(--pe-font,'Inter',system-ui,sans-serif);color:var(--pe-text,#C7CCD2);user-select:none}.sr7pe-cp-types{display:flex;gap:2px;padding:3px;background:var(--pe-bg,#1C1E20);border:1px solid var(--pe-border,#3F444A);border-radius:var(--pe-radius-s,4px);margin-bottom:10px}.sr7pe-cp-types button{flex:1;background:transparent;color:var(--pe-text-dim,#777C80);border:0;border-radius:3px;padding:5px 0;font:500 11px var(--pe-font,sans-serif);cursor:pointer}.sr7pe-cp-types button.on{background:var(--pe-accent,#309BFF);color:var(--pe-accent-text,#fff)}.sr7pe-cp-sv{position:relative;width:100%;height:128px;border-radius:6px;cursor:crosshair;margin-bottom:10px;overflow:hidden}.sr7pe-cp-cur{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}.sr7pe-cp-track{position:relative;height:12px;border-radius:9999px;margin:0 5px 12px;cursor:pointer}.sr7pe-cp-hue{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.sr7pe-cp-alpha{background-image:"+s+";background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.sr7pe-cp-alpha-fill{position:absolute;inset:0;border-radius:inherit}.sr7pe-cp-knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.35);box-shadow:0 1px 3px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}.sr7pe-cp-fields{display:flex;gap:8px;align-items:center}.sr7pe-cp input{font:600 12px var(--pe-font,sans-serif);color:var(--pe-text,#C7CCD2);background:var(--pe-surface-3,#383B41);border:1px solid var(--pe-border-2,#4A4E51);border-radius:var(--pe-radius-s,4px);padding:0 7px;height:28px;min-height:28px;line-height:normal;width:100%;box-sizing:border-box;-moz-appearance:textfield}.sr7pe-cp input::-webkit-outer-spin-button,.sr7pe-cp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sr7pe-cp input:focus{outline:none;border-color:var(--pe-accent,#309BFF)}.sr7pe-cp input.sr7pe-cp-hex{flex:1 1 auto;width:auto;min-width:0}.sr7pe-cp input.sr7pe-cp-op{flex:0 0 58px;width:58px}.sr7pe-cp-grad{margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:10px}.sr7pe-cp-bar{position:relative;height:18px;border-radius:4px;margin-bottom:14px;background-image:"+s+";background-size:10px 10px;cursor:copy}.sr7pe-cp-bar-fill{position:absolute;inset:0;border-radius:4px}.sr7pe-cp-stop{position:absolute;top:-3px;width:14px;height:24px;border-radius:3px;background:#fff;border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);transform:translateX(-50%);cursor:grab}.sr7pe-cp-stop.on{border-color:var(--pe-accent,#309BFF);box-shadow:0 0 0 2px var(--pe-accent,#309BFF)}.sr7pe-cp-stop-c{position:absolute;inset:2px;border-radius:2px}.sr7pe-cp-gradrow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--pe-text-2,#AAAEB3)}.sr7pe-cp-angwrap{display:flex;flex:0 0 auto;align-items:center;gap:6px;white-space:nowrap}.sr7pe-cp input.sr7pe-cp-angle{flex:0 0 56px;width:56px}.sr7pe-cp-del{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pe-danger,#FF6B6B);cursor:pointer;font-size:11px}.sr7pe-cp-del.off{opacity:.35;pointer-events:none}",document.head.appendChild(e)},c=(t,o)=>{const r=o=>{const r=t.getBoundingClientRect();return{x:e((o.clientX-r.left)/r.width,0,1),y:e((o.clientY-r.top)/r.height,0,1)}};t.addEventListener("pointerdown",e=>{e.preventDefault(),t.setPointerCapture&&t.setPointerCapture(e.pointerId),o(r(e),!0);const n=e=>o(r(e),!1),p=()=>{t.removeEventListener("pointermove",n),t.removeEventListener("pointerup",p),t.removeEventListener("pointercancel",p)};t.addEventListener("pointermove",n),t.addEventListener("pointerup",p),t.addEventListener("pointercancel",p)})};let i=null;const l=e=>{if(!i)return;const t=i;i=null,document.removeEventListener("pointerdown",t.outside,!0),document.removeEventListener("keydown",t.onKey,!0),t.el.parentNode&&t.el.parentNode.removeChild(t.el),e&&t.handlers.onChange&&t.handlers.onChange(t.V)};SR7.PE.closeColorPicker=l,SR7.PE.openColorPicker=(o,s,d)=>{a(),l(!1),d=d||{};const u=SR7.PE.normColor(s);let g=0;const m=n(t(u.color).r,t(u.color).g,t(u.color).b),h=document.createElement("div");h.className="sr7pe-cp";const f=document.createElement("div");f.className="sr7pe-cp-types";const x={};[["solid","Solid"],["linear","Linear"],["radial","Radial"]].forEach(e=>{const t=document.createElement("button");t.textContent=e[1],t.onclick=()=>K(e[0]),f.appendChild(t),x[e[0]]=t}),h.appendChild(f);const b=document.createElement("div");b.className="sr7pe-cp-sv";const v=document.createElement("div");v.className="sr7pe-cp-cur",b.appendChild(v),h.appendChild(b);const y=document.createElement("div");y.className="sr7pe-cp-track sr7pe-cp-hue";const E=document.createElement("div");E.className="sr7pe-cp-knob",y.appendChild(E),h.appendChild(y);const C=document.createElement("div");C.className="sr7pe-cp-track sr7pe-cp-alpha";const w=document.createElement("div");w.className="sr7pe-cp-alpha-fill",C.appendChild(w);const k=document.createElement("div");k.className="sr7pe-cp-knob",C.appendChild(k),h.appendChild(C);const N=document.createElement("div");N.className="sr7pe-cp-fields";const L=document.createElement("input");L.className="sr7pe-cp-hex",L.spellcheck=!1;const P=document.createElement("input");P.type="number",P.min=0,P.max=100,P.className="sr7pe-cp-op",N.appendChild(L),N.appendChild(P),h.appendChild(N);const R=document.createElement("div");R.className="sr7pe-cp-grad";const S=document.createElement("div");S.className="sr7pe-cp-bar";const F=document.createElement("div");F.className="sr7pe-cp-bar-fill",S.appendChild(F),R.appendChild(S);const A=document.createElement("div");A.className="sr7pe-cp-gradrow";const M=document.createElement("span");M.className="sr7pe-cp-del",M.textContent="✕ remove stop";const B=document.createElement("span");B.className="sr7pe-cp-angwrap";const I=document.createElement("span");I.textContent="Angle";const z=document.createElement("input");z.type="number",z.min=0,z.max=360,z.className="sr7pe-cp-angle",B.appendChild(I),B.appendChild(z),A.appendChild(M),A.appendChild(B),R.appendChild(A),h.appendChild(R);const j=()=>"solid"===u.type?u:u.stops[g],$=()=>{d.onInput&&d.onInput(u)},D=()=>{const e=t(j().color),o=n(e.r,e.g,e.b);m.s=o.s,m.v=o.v,o.s>.001&&o.v>.001&&(m.h=o.h)},V=()=>{const e=((e,t,o)=>{const r=o*t,n=r*(1-Math.abs(e/60%2-1)),p=o-r;let s;return s=(e=(e%360+360)%360)<60?[r,n,0]:e<120?[n,r,0]:e<180?[0,r,n]:e<240?[0,n,r]:e<300?[n,0,r]:[r,0,n],{r:255*(s[0]+p),g:255*(s[1]+p),b:255*(s[2]+p)}})(m.h,m.s,m.v);j().color=r(e.r,e.g,e.b)},X=()=>{[].slice.call(S.querySelectorAll(".sr7pe-cp-stop")).forEach(e=>e.remove()),F.style.background=(e=>"linear-gradient(to right,"+e.stops.slice().sort((e,t)=>e.pos-t.pos).map(e=>p(e.color,e.opacity)+" "+e.pos+"%").join(",")+")")(u),u.stops.forEach((e,t)=>{const o=document.createElement("div");o.className="sr7pe-cp-stop"+(t===g?" on":""),o.style.left=e.pos+"%";const r=document.createElement("div");r.className="sr7pe-cp-stop-c",r.style.background=p(e.color,e.opacity),o.appendChild(r),o.addEventListener("pointerdown",e=>{e.stopPropagation(),g=t,H(t),D(),T()}),S.appendChild(o)}),M.classList.toggle("off",u.stops.length<=2)},H=t=>{const o=S.getBoundingClientRect(),r=r=>{u.stops[t].pos=Math.round(100*e((r.clientX-o.left)/o.width,0,1)),X(),$()},n=()=>{document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",n)};document.addEventListener("pointermove",r),document.addEventListener("pointerup",n)};S.addEventListener("pointerdown",o=>{if(o.target.closest(".sr7pe-cp-stop"))return;const n=S.getBoundingClientRect(),p=Math.round(100*e((o.clientX-n.left)/n.width,0,1)),s=(o=>{const n=u.stops.slice().sort((e,t)=>e.pos-t.pos);let p=n[0],s=n[n.length-1];for(let e=0;e<n.length;e++)if(n[e].pos<=o&&(p=n[e]),n[e].pos>=o){s=n[e];break}const a=s.pos-p.pos||1,c=e((o-p.pos)/a,0,1),i=t(p.color),l=t(s.color);return{color:r(i.r+(l.r-i.r)*c,i.g+(l.g-i.g)*c,i.b+(l.b-i.b)*c),opacity:Math.round(p.opacity+(s.opacity-p.opacity)*c)}})(p);u.stops.push({pos:p,color:s.color,opacity:s.opacity}),g=u.stops.length-1,D(),X(),T(),$()}),M.onclick=()=>{u.stops.length<=2||(u.stops.splice(g,1),g=Math.max(0,g-1),D(),X(),T(),$())},z.oninput=()=>{u.angle=e(parseInt(z.value,10)||0,0,360),$()};const K=e=>{u.type=e,"solid"!==e&&(!u.stops||u.stops.length<2)&&(u.stops=[{pos:0,color:u.color,opacity:u.opacity},{pos:100,color:"#000000",opacity:100}]),"solid"!==e&&(g=Math.min(g,u.stops.length-1)),D(),T(),$()},T=()=>{Object.keys(x).forEach(e=>x[e].classList.toggle("on",u.type===e));const e="solid"!==u.type;R.style.display=e?"":"none",B.style.display="linear"===u.type?"":"none";const t=j();b.style.background="linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl("+Math.round(m.h)+",100%,50%))",v.style.left=100*m.s+"%",v.style.top=100*(1-m.v)+"%",v.style.background=t.color,E.style.left=m.h/360*100+"%",w.style.background="linear-gradient(to right,"+p(t.color,0)+","+p(t.color,100)+")",k.style.left=t.opacity+"%",L.value=t.color,P.value=t.opacity,z.value=u.angle,e&&X()};c(b,e=>{m.s=e.x,m.v=1-e.y,V(),T(),$()}),c(y,e=>{m.h=360*e.x,V(),T(),$()}),c(C,e=>{j().opacity=Math.round(100*e.x),T(),$()}),L.onchange=()=>{let e=L.value.trim();if("#"!==e[0]&&(e="#"+e),/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(e)){const o=t(e);j().color=r(o.r,o.g,o.b),D(),T(),$()}else T()},P.oninput=()=>{j().opacity=e(parseInt(P.value,10)||0,0,100),T(),$()},document.body.appendChild(h);const W=o.getBoundingClientRect(),q=h.offsetWidth||236,O=h.offsetHeight||360;let Y=W.right+8;Y+q>window.innerWidth-8&&(Y=W.left-q-8),Y<8&&(Y=8);let G=W.top;G+O>window.innerHeight-8&&(G=Math.max(8,window.innerHeight-O-8)),h.style.left=Y+"px",h.style.top=G+"px";const J=e=>{h.contains(e.target)||e.target===o||o.contains(e.target)||l(!0)},Q=e=>{"Escape"===e.key&&l(!0)};return document.addEventListener("pointerdown",J,!0),document.addEventListener("keydown",Q,!0),i={el:h,V:u,handlers:d,outside:J,onKey:Q},T(),h},SR7.PE.colorField=e=>{a(),e=e||{};let t=SR7.PE.normColor(e.value);const o=document.createElement("button");o.type="button",o.className="sr7pe-cp-swatch";const r=document.createElement("span");r.className="sr7pe-cp-swatch-fill",o.appendChild(r);const n=()=>{r.style.background=SR7.PE.colorToCss(t)};return n(),o.addEventListener("click",r=>{r.preventDefault(),SR7.PE.openColorPicker(o,t,{onInput:o=>{t=o,n(),e.onInput&&e.onInput(t)},onChange:o=>{t=o,n(),e.onChange&&e.onChange(t)}})}),o.setValue=e=>{t=SR7.PE.normColor(e),n()},o.getValue=()=>t,o}})();