@hazem3500/palette 0.9.108 → 0.9.110

package/dist/frame-size-TF6SIUFO.js

@@ -0,0 +1 @@
+import{c as e}from"./chunk-5HZI7HRR.js";var t=[["Wide",1440,900],["Laptop",1280,800],["Tablet",768,1024],["Mobile",390,844]],a=[[240,3840],[240,2160]],i=(e,t,a={},i="")=>{let r=document.createElement(e);r.className=t;for(let[e,t]of Object.entries(a))r.setAttribute(e,t);return r.textContent=i,r},r=(e,t,a,i)=>Object.assign(e.style,{left:`${t}px`,top:`${a}px`,height:void 0===i?"":`${i}px`}),n=(e,t=0)=>Math.round(Math.min(a[t][1],Math.max(a[t][0],e)));function o(e){try{let t=JSON.parse(e??"null");return 2!==t?.v?{size:"window",actual:!1}:{size:"available"===t.size?"available":Array.isArray(t.size)&&2===t.size.length&&t.size.every(Number.isFinite)?[n(t.size[0]),n(t.size[1],1)]:"window",actual:!0===t.actual,..."boolean"==typeof t.inPlace?{inPlace:t.inPlace}:{}}}catch{return{size:"window",actual:!1}}}var d=(e,t,a)=>"window"!==e||t||void 0!==a?JSON.stringify({v:2,size:"window"===e?null:e,actual:t,...void 0===a?{}:{inPlace:a}}):null,l=(e,t)=>e.map((e,a)=>Math.round(Math.min(t[a],Math.max(0,e))));function s(e,t){let a=a=>1===e.deltaMode?16:2===e.deltaMode?t[a]:1,i=[e.deltaX*a(0),e.deltaY*a(1)];return e.shiftKey&&!i[0]?[i[1],0]:i}function p(e,t,a){let i=(e,t,a,i,r)=>!!t&&/auto|scroll|overlay/.test(e)&&i>r+1&&(t>0?a+r<i-1:a>0);for(let r=1===e?.nodeType?e:e?.parentElement;r&&r!==r.ownerDocument.body&&r!==r.ownerDocument.documentElement;r=r.parentElement??r.getRootNode().host){let e=getComputedStyle(r);if(i(e.overflowX,t,r.scrollLeft,r.scrollWidth,r.clientWidth)||i(e.overflowY,a,r.scrollTop,r.scrollHeight,r.clientHeight))return!0}return!1}var f=(e,t,a)=>[a.left+(e.x-t.left)/t.scale-e.x,a.top+(e.y-t.top)/t.scale-e.y],c=([e,t])=>`${Math.round(e)} × ${Math.round(t)}`;function h(h,u,m,g,b,x=!1,v={}){let w=null;try{w=localStorage.getItem(m)}catch{}let y,k=o(w),{size:z,actual:E}=k,L=void 0!==k.inPlace,S=!!x&&(L?!k.inPlace:"iframe"===x),A={active:!1},P=()=>x?L?!S:void 0:k.inPlace,$=()=>{try{let t=d(z,E,P());t?localStorage.setItem(m,t):e(localStorage,m)}catch{}};null!==w&&w!==d(z,E,P())&&$();let M=[0,0],C=[0,0],D=null,F=(e,t,a=!0,i=S)=>{if(t&&!E&&y&&we&&!A.active){let e=v.anchor?.()??D??{x:y.left+y.width*y.scale/2,y:y.top+y.height*y.scale/2};M=f(e,y,{left:we.left/ye,top:we.top/ye})}else t||(M=[0,0]);z=e,E=t;let r=i!==S||i&&!!A.reason&&!A.active;S=i,g(r),a&&$()},R=i("div","frame-size"),I=i("style","",{},'.frame-size{position:fixed;inset:0;pointer-events:none;z-index:3;font-size:12px;font-weight:500;line-height:1;color:#d6d3ce}.frame-size>*{pointer-events:auto;position:fixed}.frame-size [hidden]{display:none}.frame-bar,.frame-custom{display:flex;align-items:center;gap:6px}.frame-size button,.frame-size input,.frame-menu{font:inherit;color:inherit;background:#1c1c1c;border:1px solid #ffffff14;border-radius:8px;height:28px;padding:0 10px;cursor:pointer}.frame-size button:hover{background:#262626}.frame-size :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:1px}.frame-size [aria-checked=true]{background:#ffffff1f;color:#f1efeb}.frame-menu{display:grid;height:auto;min-width:200px;padding:4px;border:0;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;font-size:11px;cursor:auto}.frame-menu>button{display:flex;gap:12px;padding:0 8px;border:0;background:none}.frame-menu>button>span{margin-left:auto}.frame-menu>button::after{content:"";width:7px;height:3.5px;align-self:center;margin:-3px 3px 0 0;border:solid #0000;border-width:0 0 1.5px 1.5px;rotate:-45deg}.frame-menu>[aria-checked=true]::after{border-color:#bda6ef}.frame-size .frame-menu>[aria-checked=true]{background:none}.frame-size span,.frame-readout,.frame-custom{color:#898680;font-variant-numeric:tabular-nums}.frame-custom{gap:4px;padding:4px 4px 2px;border-top:1px solid #ffffff0d}.frame-custom input{width:64px;padding:0 6px;cursor:text}.frame-handle{width:10px;margin-left:-5px;cursor:ew-resize;touch-action:none}.frame-corner{width:18px;height:18px;margin:-9px 0 0 -9px;cursor:nwse-resize;touch-action:none}.frame-handle::after,.frame-corner::after{content:\'\';position:absolute;left:3px;top:calc(50% - 20px);width:4px;height:40px;border-radius:2px;background:#ffffff40}.frame-corner::after{inset:4px;width:auto;height:auto;background:none;border:solid #ffffff59;border-width:0 2px 2px 0;border-radius:0 0 4px 0}.frame-handle:hover::after,.frame-handle[data-active]::after{background:var(--accent,#bda6ef)}.frame-corner:hover::after,.frame-corner[data-active]::after{border-color:var(--accent,#bda6ef)}.frame-readout{padding:5px 8px;border-radius:6px;background:#1c1c1cf2;color:#f1efeb}.frame-scroll{box-sizing:border-box;touch-action:none}.frame-scroll[data-axis=y]{width:12px}.frame-scroll[data-axis=x]{height:12px}.frame-thumb{position:absolute;border-radius:4px;background:#2a2a2ad9;box-shadow:0 0 0 1px #ffffff2e}.frame-scroll[data-axis=y] .frame-thumb{left:3px;right:3px}.frame-scroll[data-axis=x] .frame-thumb{top:3px;bottom:3px}.frame-scroll:hover .frame-thumb,.frame-scroll:focus-visible .frame-thumb,.frame-thumb[data-active]{background:#3a3a3af2;box-shadow:0 0 0 1px #ffffff59}.frame-hand{cursor:grab;touch-action:none}.frame-hand[data-grabbing]{cursor:grabbing}.frame-hint{display:flex;align-items:center;gap:8px;box-sizing:border-box;padding:4px 4px 4px 12px;border:1px solid #ffffff14;border-radius:10px;background:#1c1c1cf2;box-shadow:0 8px 24px #0006;line-height:1.35}.frame-hint span{color:#d6d3ce}.frame-size .frame-hint-close{width:28px;padding:0;border:0;background:none;color:#898680;font-size:16px}.frame-bar{gap:2px;white-space:nowrap;pointer-events:none;container-type:inline-size}.frame-bar>*{flex:none;pointer-events:auto}.frame-size .frame-size-trigger{display:flex;align-items:center;gap:0;padding-right:9px;font-variant-numeric:tabular-nums}.frame-name{margin-right:4px}.frame-at{margin:0 4px}.frame-size-trigger span{color:inherit}.frame-size-trigger::after{content:"";width:5px;height:5px;margin:-3px 0 0 9px;border:solid;border-width:0 1.5px 1.5px 0;rotate:45deg;opacity:.6}@container (max-width:240px){.frame-name,.frame-at,.frame-scale{display:none}}.frame-note{position:relative;display:flex;align-items:center}.frame-loading:not(:empty){padding:0 6px}.frame-bar .frame-info{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:#898680}.frame-bar .frame-info:hover{background:#ffffff12;color:#f1efeb}.frame-info::before{content:"i";display:inline-grid;place-items:center;width:12px;height:12px;border:1.2px solid;border-radius:50%;font:italic 600 9px/1 Georgia,serif}.frame-size .frame-tip{position:absolute;z-index:1;top:calc(100% + 8px);left:0;width:260px;padding:10px;border-radius:10px;background:#191819;box-shadow:0 0 0 1px #ffffff1a,0 12px 40px #0008;color:#e9e6e1;font-weight:400;line-height:1.45;white-space:normal;opacity:0;visibility:hidden;transition:opacity .15s}.frame-info:is(:hover,:focus-visible)+.frame-tip{opacity:1;visibility:visible}.frame-bar [data-reason] .frame-info{color:#f3c27a}.frame-sep{height:1px;margin:4px 0;background:#ffffff0d}.frame-heading{padding:6px 8px 2px;color:#898680;font-size:10px}.frame-menu>.frame-sim{position:relative;display:grid;gap:3px;width:0;min-width:100%;height:auto;margin-top:4px;padding:8px 32px 8px 8px;text-align:left;line-height:1.3;white-space:normal}.frame-sim::before{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;box-sizing:border-box;border:1.5px solid #ffffff59;border-radius:4px;transition:background-color .15s,border-color .15s}.frame-sim[aria-checked=true]::before{border-color:var(--accent,#bda6ef);background:var(--accent,#bda6ef)}.frame-menu>.frame-sim::after{position:absolute;top:12px;right:11.5px;margin:0}.frame-menu>.frame-sim[aria-checked=true]::after{border-color:#1c1c1c}.frame-sim>b{font-weight:inherit}.frame-menu>.frame-sim>span{margin:0;font-weight:400;color:#a19d96}'),T=i("div","frame-bar",{role:"toolbar","aria-label":"Frame size"}),Y=i("button","frame-size-trigger",{type:"button","aria-haspopup":"menu","aria-expanded":"false"}),H=i("span","frame-name"),K=i("span",""),W=i("span","frame-scale");Y.append(H,K,i("span","frame-at",{},"·"),W);let X=i("span","frame-note",{hidden:""}),O=i("button","frame-info",{type:"button"}),j=i("span","frame-tip",{role:"tooltip","aria-hidden":"true"}),N="Layout follows your browser window, not this size."+(x?" Turn on Simulate real viewport in this menu for real breakpoints.":""),U=i("span","frame-loading",{role:"status"});X.append(U,O,j),T.append(Y,X);let B=i("div","frame-menu",{role:"menu","aria-label":"Frame size",hidden:""}),q=[["Desktop","Your window","window"],["Available","Available space","available"],...t.map(([e,t,a])=>[e,`${e} ${t}`,[t,a]])],J=[],Z=q.map(([,e,t])=>{let a=i("button","",{type:"button",role:"menuitemradio"}),r=i("span","",{},"string"==typeof t?"":c(t));return J.push(r),a.append(e,r),a.addEventListener("click",()=>{$e(),F(t,E)}),a}),G=i("form","frame-custom",{"aria-label":"Custom size"}),_=["Width","Height"].map((e,t)=>i("input","",{"aria-label":e,inputmode:"numeric",type:"number",min:String(a[t][0]),max:String(a[t][1]),required:""}));G.append(_[0],"×",_[1],i("button","",{type:"submit"},"Set")),G.addEventListener("submit",e=>{e.preventDefault(),$e(),F([n(+_[0].value),n(+_[1].value,1)],E)});let Q=["1","0"].map(e=>({key:e,shift:!0,alt:!1,ctrl:!1,meta:!1,label:`Shift+${e}`})),V=["Fit","100%"].map((e,t)=>{let a=i("button","",{type:"button",role:"menuitemradio","aria-keyshortcuts":Q[t].label},e),r=i("span","palette-kbd",{"aria-hidden":"true","data-variant":"surface"});for(let e of[/mac|iphone|ipad/i.test(navigator.platform)?"⇧":"Shift",Q[t].key])r.append(i("kbd","",{},e));return a.append(r),a.addEventListener("click",()=>{$e(),Ce(!!t)}),a}),ee=()=>i("div","frame-sep",{role:"separator"});B.append(...Z,G,ee(),i("div","frame-heading",{"aria-hidden":"true"},"Zoom"),...V);let te=i("button","frame-sim",{type:"button",role:"menuitemcheckbox","aria-labelledby":"frame-sim-label","aria-describedby":"frame-sim-hint"});te.append(i("b","",{id:"frame-sim-label"},"Simulate real viewport"),i("span","",{id:"frame-sim-hint"},v.shell?"Reloads this page inside a frame so breakpoints and popovers match this size.":"Reloads the page in a frame so breakpoints and popovers match this size. Runs a second copy of the app.")),x&&B.append(ee(),te);let ae=i("div","frame-handle",{role:"slider",tabindex:"0","aria-label":"Frame width","aria-orientation":"horizontal","aria-valuemin":String(a[0][0]),"aria-valuemax":String(a[0][1])}),ie=i("div","frame-corner",{role:"button",tabindex:"0","aria-label":"Frame size: arrow keys change width and height"}),re=i("div","frame-readout",{hidden:"",role:"status"}),ne=`${m}:scaled-tip`,oe=i("div","frame-hint",{role:"note",hidden:""}),de=i("button","",{type:"button"},"Use 100%"),le=i("button","frame-hint-close",{type:"button","aria-label":"Dismiss tip"},"×");oe.append(i("span","",{},"Some floating UI may be offset while scaled. Use 100% to check exact positions."),de,le);let se=!1;try{se="1"===localStorage.getItem(ne)}catch{}let pe=()=>{se=!0,oe.hidden=!0;try{localStorage.setItem(ne,"1")}catch{}};R.append(T,B,oe,ae,ie,re),h.append(I,R);let fe=1,ce=h.host,he=()=>!!y?.pan&&!R.hidden&&!A.active,ue=(e,t)=>{let a=l([e,t],C);a[0]===M[0]&&a[1]===M[1]||(M=a,v.pan?.())},me=(e,t)=>ue(M[0]+e/fe,M[1]+t/fe),ge=["x","y"].map(e=>{let t=i("div","frame-scroll",{"data-axis":e,role:"scrollbar",tabindex:"0",hidden:"","aria-orientation":"x"===e?"horizontal":"vertical","aria-label":`Pan the frame ${"x"===e?"horizontally":"vertically"}: arrow, Page and Home/End keys`,"aria-valuemin":"0"}),a=i("div","frame-thumb");return t.append(a),{axis:e,track:t,thumb:a,length:0,thumbLength:0}}),be=i("div","frame-hand",{hidden:"","aria-hidden":"true"}),xe=null,ve=!1;R.append(be,...ge.map(e=>e.track));let we=null,ye=1,ke=0,ze=null,Ee=0,Le=()=>[y?.width??0,y?.height??0],Se=(e,t)=>{clearTimeout(ke),re.textContent=c(e),re.hidden=!1,ze=e,t?(cancelAnimationFrame(Ee),Ee=0,F(e,E),ke=window.setTimeout(()=>re.hidden=!0,900)):Ee||=requestAnimationFrame(()=>{Ee=0,ze&&F(ze,E,!1)})},Ae=!1,Pe=()=>oe.hidden=se||!Ae||!B.hidden;function $e(){B.hidden=!0,Y.setAttribute("aria-expanded","false"),Pe()}Y.addEventListener("click",()=>{let e=B.hidden;B.hidden=!e,Pe(),Y.setAttribute("aria-expanded",String(e)),e&&(_.forEach((e,t)=>e.value=String(Math.round(Le()[t]))),(Z.find(e=>"true"===e.getAttribute("aria-checked"))??Z[0]).focus())}),B.addEventListener("keydown",e=>{"Escape"===e.key&&(e.stopPropagation(),$e(),Y.focus())});let Me=new AbortController;function Ce(e){e&&pe(),F(z,e)}document.addEventListener("pointerdown",e=>{!B.hidden&&!e.composedPath().some(e=>e===B||e===Y)&&$e()},{capture:!0,signal:Me.signal}),te.addEventListener("click",()=>{L=!0,F(z,E,!0,!S),te.setAttribute("aria-checked",String(S))}),de.addEventListener("click",()=>Ce(!0));let De=Q.map(({key:e})=>Object.values(v.shortcuts??{}).some(t=>!(!t?.shift||t.alt||t.ctrl||t.meta||t.key!==e))),Fe=e=>{let t=["Digit1","Digit0"].indexOf(e.code);if(t<0||De[t]||R.hidden||!e.shiftKey||e.altKey||e.ctrlKey||e.metaKey||e.defaultPrevented||e.isComposing)return;let a=document.activeElement;for(;a?.shadowRoot?.activeElement;)a=a.shadowRoot.activeElement;let i=v.textEntry??Re;i(e.composedPath()[0])||"iframe"!==a?.localName&&i(a??void 0)||(e.preventDefault(),Ce(!!t))};window.addEventListener("keydown",Fe,{signal:Me.signal}),v.onFrame?.("keydown",Fe,{signal:Me.signal},"window"),le.addEventListener("click",pe);let Re=e=>!!e?.isContentEditable||!!e?.matches?.("input,textarea,select");window.addEventListener("wheel",e=>{if(!he()||e.ctrlKey||e.defaultPrevented)return;let t=e.composedPath();if(t.includes(ce)&&!ge.some(e=>t.includes(e.track))&&!t.includes(be))return;let[a,i]=s(e,[we?.width??innerWidth,we?.height??innerHeight]);!t.includes(ce)&&p(t[0],a,i)||(e.preventDefault(),me(a,i))},{capture:!0,passive:!1,signal:Me.signal}),document.addEventListener("pointermove",e=>{we&&"touch"!==e.pointerType&&!e.composedPath().includes(R)&&(D=e.clientX>=we.left&&e.clientX<=we.left+we.width&&e.clientY>=we.top&&e.clientY<=we.top+we.height?{x:e.clientX/ye,y:e.clientY/ye}:D)},{capture:!0,passive:!0,signal:Me.signal});let Ie=()=>{ve=!1,xe||(be.hidden=!0)},Te=(e,t)=>{window.addEventListener(e,t,{capture:!0,signal:Me.signal}),v.onFrame?.(e,t,{capture:!0,signal:Me.signal},"window")};Te("keydown",e=>{if(" "!==e.key||e.ctrlKey||e.metaKey||e.altKey)return;if(!be.hidden)return e.preventDefault(),void e.stopPropagation();let t=e.composedPath();!y?.pan||R.hidden||e.repeat||t.includes(ce)||Re(t[0])||(e.preventDefault(),e.stopPropagation(),ve=!0,be.hidden=!1)}),Te("keyup",e=>{" "!==e.key||be.hidden||(e.preventDefault(),e.stopPropagation(),Ie())}),window.addEventListener("blur",Ie,{signal:Me.signal}),v.onFrame?.("blur",()=>setTimeout(()=>document.hasFocus()||Ie()),{signal:Me.signal},"window"),be.addEventListener("pointerdown",e=>{if(e.button)return;e.preventDefault(),be.setPointerCapture(e.pointerId),be.dataset.grabbing="";let t=A.active?u():null;xe={x:e.clientX,y:e.clientY,pan:t?[t.scrollLeft,t.scrollTop]:M,id:e.pointerId,port:t}}),be.addEventListener("pointermove",e=>{if(xe?.id!==e.pointerId)return;let[t,a]=[e.clientX-xe.x,e.clientY-xe.y];xe.port?xe.port.scrollTo(xe.pan[0]-t,xe.pan[1]-a):ue(xe.pan[0]-t/fe,xe.pan[1]-a/fe)});let Ye=()=>{xe=null,delete be.dataset.grabbing,ve||(be.hidden=!0)};be.addEventListener("pointerup",Ye),be.addEventListener("pointercancel",Ye);for(let e of ge){let t="x"===e.axis?0:1,a=null;e.track.addEventListener("pointerdown",i=>{if(i.button)return;i.preventDefault(),e.track.focus({preventScroll:!0});let r=t?i.clientY:i.clientX;if(i.target!==e.thumb){let a=e.thumb.getBoundingClientRect(),i=(t?we?.height:we?.width)??0,n=r<(t?a.top:a.left);return void(t?me(0,n?.9*-i:.9*i):me(n?.9*-i:.9*i,0))}e.track.setPointerCapture(i.pointerId),e.thumb.dataset.active="",a={start:r,pan:M[t],id:i.pointerId}}),e.track.addEventListener("pointermove",i=>{if(a?.id!==i.pointerId)return;let r=((t?i.clientY:i.clientX)-a.start)*C[t]/Math.max(1,e.length-e.thumbLength);t?ue(M[0],a.pan+r):ue(a.pan+r,M[1])});let i=()=>{a=null,delete e.thumb.dataset.active};e.track.addEventListener("pointerup",i),e.track.addEventListener("pointercancel",i),e.track.addEventListener("keydown",e=>{let a=[we?.width??0,we?.height??0].map(e=>.9*e/ye),i={ArrowLeft:[-40,0],ArrowRight:[40,0],ArrowUp:[0,-40],ArrowDown:[0,40],PageUp:[0,-a[1]],PageDown:[0,a[1]]}[e.key];if("Home"===e.key||"End"===e.key){e.preventDefault();let a="End"===e.key?1e9:0;return void(e.shiftKey||0===t?ue(a,M[1]):ue(M[0],a))}i&&(e.preventDefault(),ue(M[0]+i[0],M[1]+i[1]))})}document.addEventListener("focusin",e=>{let t=e.composedPath()[0];if(!(he()&&we&&u().contains(t)&&t.getBoundingClientRect))return;let a=t.getBoundingClientRect(),i=(e,t,a,i)=>e<a?e-a-24:e+t>a+i?Math.min(e-a-24,e+t-a-i+24):0,r=i(a.left,a.width,we.left,we.width),n=i(a.top,a.height,we.top,we.height);(r||n)&&me(r,n)},{capture:!0,signal:Me.signal}),document.addEventListener("mousedown",e=>{let t=e.composedPath()[0];!he()||t!==document.documentElement&&t!==document.body||(e.preventDefault(),(ge[1].track.hidden?ge[0]:ge[1]).track.focus({preventScroll:!0}))},{capture:!0,signal:Me.signal});for(let[e,t]of[[ae,!1],[ie,!0]]){let a=null;e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),e.setPointerCapture(t.pointerId),e.dataset.active="",a={x:t.clientX,y:t.clientY,size:Le(),ratio:fe})}),e.addEventListener("pointermove",e=>{a&&Se([n(a.size[0]+(e.clientX-a.x)/a.ratio),t?n(a.size[1]+(e.clientY-a.y)/a.ratio,1):Math.round(a.size[1])],!1)});let i=()=>{a&&(a=null,delete e.dataset.active,Se(ze??Le(),!0))};e.addEventListener("pointerup",i),e.addEventListener("pointercancel",i),e.addEventListener("keydown",e=>{let a=e.shiftKey?100:10,i={ArrowRight:[a,0],ArrowLeft:[-a,0],...t?{ArrowDown:[0,a],ArrowUp:[0,-a]}:{}}[e.key];if(!i)return;e.preventDefault(),e.stopPropagation();let[r,o]=Le();Se([n(r+i[0]),n(o+i[1],1)],!0)})}return{view(e,t){let a=b(e,"window"===z?t:"available"===z?[e.width,e.height]:z,E);C=a.pan?[Math.max(0,a.width*a.scale-e.width),Math.max(0,a.height*a.scale-e.height)]:[0,0],M=l(M,C);let i=A.active?[0,0]:M;return y={...a,left:a.left-i[0],top:a.top-i[1]}},sized:"window"!==z||E,get separate(){return S},status(e){A=e,y&&this.update(we,ye)},update(e,t=1){we=e,ye=t;let a=y??=e&&b({left:e.left/t,top:e.top/t,width:e.width/t,height:e.height/t},[innerWidth/t,innerHeight/t],!1);if(R.hidden=!e||!a,!e||!a)return $e();fe=a.scale*t;let i=u(),n=i.getBoundingClientRect();A.active||(i.style.clipPath=a.pan?`inset(${[e.top-n.top,n.right-e.left-e.width,n.bottom-e.top-e.height,e.left-n.left].map(e=>Math.max(0,e)/t+"px").join(" ")} round ${12/t}px)`:i.style.clipPath);let o=q.findIndex(([,,e])=>"string"==typeof e||"string"==typeof z?e===z:e[0]===z[0]&&e[1]===z[1]),d=o<0?"":q[o][0];H.textContent=d,H.hidden=!d,K.textContent=c(Le()),W.textContent=`${Math.round(100*a.scale)}%`,Y.setAttribute("aria-label",`${d} ${K.textContent} · ${W.textContent}`.trim()),J[0].textContent=c([innerWidth/t,innerHeight/t]),J[1].textContent=c([e.width/t,e.height/t]),Z.forEach((e,t)=>e.setAttribute("aria-checked",String(t===o))),V.forEach((e,t)=>e.setAttribute("aria-checked",String(!!t===E))),te.setAttribute("aria-checked",String(S));let l=S&&!A.active&&!A.loading&&!!A.reason;j.textContent=l?`Simulated viewport unavailable. ${A.reason} Showing the page itself.`:N,O.setAttribute("aria-label",l?"Why the simulated viewport is unavailable":"Why the layout follows your browser window"),O.setAttribute("aria-description",j.textContent),X.toggleAttribute("data-reason",l),U.textContent=A.loading?"Loading…":"",O.hidden=!!A.loading,X.hidden=A.active||!l&&!A.loading&&Math.abs(a.width-innerWidth/t)<1,ae.setAttribute("aria-valuenow",String(Math.round(a.width))),ae.setAttribute("aria-valuetext",`${c(Le())} pixels`);let s=Math.max(8,e.top-40);r(T,e.left,s),T.style.width=`${e.width}px`,r(B,e.left,s+34),Ae=a.scale<=.999&&!A.active,Pe(),oe.style.maxWidth=e.width-24+"px",r(oe,e.left+12,e.top+e.height-12-(oe.offsetHeight||38)),ae.hidden=ie.hidden=a.pan,r(ae,n.right,n.top,n.height),r(ie,n.right,n.bottom),r(re,Math.max(n.left+8,n.right-120),n.bottom-36);for(let i of ge){let r="x"===i.axis?0:1,n=(r?e.height:e.width)-12,o=C[r]*t;if(i.track.hidden=!a.pan||o<1||A.active,i.track.hidden)continue;i.length=n,i.thumbLength=Math.max(32,n*n/(n+o));let d=(n-i.thumbLength)*M[r]/(C[r]||1);Object.assign(i.track.style,r?{left:e.left+e.width-12+"px",top:`${e.top}px`,width:"",height:`${n}px`}:{left:`${e.left}px`,top:e.top+e.height-12+"px",width:`${n}px`,height:""}),Object.assign(i.thumb.style,r?{top:`${d}px`,height:`${i.thumbLength}px`,left:"",width:""}:{left:`${d}px`,width:`${i.thumbLength}px`,top:"",height:""}),i.track.setAttribute("aria-valuemax",String(Math.round(C[r]))),i.track.setAttribute("aria-valuenow",String(Math.round(M[r])))}a.pan||Ie(),Object.assign(be.style,{left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`})},destroy(){clearTimeout(ke),cancelAnimationFrame(Ee),Me.abort(),I.remove(),R.remove()}}}export{t as FRAME_PRESETS,f as anchoredPan,l as clampPan,d as frameSizeRecord,h as mountFrameSize,o as readFrameSize,p as scrollsFirst,s as wheelTravel};

package/dist/frame-target.d.ts

@@ -1,7 +1,10 @@
 import type { PreviewTarget } from "./design-system.js";
-/** The viewport iframe's name: Palette inside it stays inert, so only one instance reviews. */
+/**
+ * The viewport iframe's name: Palette inside it stays inert, so only one instance reviews.
+ * It keeps its name from before the rename, so an older framed copy still sees it is framed.
+ */
 export declare const FRAME_NAME = "komo-viewport";
-/** True inside Frame's viewport iframe. */
+/** True inside Frame's viewport iframe; either name and either attribute counts. */
 export declare const framedByPalette: () => boolean;
 type Watch = (document: Document, signal: AbortSignal) => void;
 /** The page's document: Frame's viewport iframe when it is showing, else this document. */

package/dist/host-motion.d.ts

@@ -1,5 +1,5 @@
 /** Present on an element, and so its subtree, while Palette previews it. */
-export declare const STILL = "data-komo-still";
+export declare const STILL = "data-palette-still";
 /** Hold host motion on `element` and its subtree for one preview step; returns its release. */
 export declare function holdHostMotion(element: Element): () => void;
 /** Run a preview with host motion held; its undo releases the hold once the host settles. */

package/dist/index.js

@@ -1 +1 @@
-import{b as s,c as t,d as i}from"./chunk-5OVDW2RU.js";import"./chunk-2J3IID4N.js";import"./chunk-RBHY7UDS.js";import"./chunk-LMXFSXO6.js";import"./chunk-57MG3M5P.js";import"./chunk-2BS2OWWH.js";import"./chunk-DZRM3YUQ.js";import"./chunk-6HM4JQLV.js";import"./chunk-IQOPM3JF.js";export{i as initComments,t as initKomo,s as initPalette};
+import{b as s,c as t,d as i}from"./chunk-U55ASP2Y.js";import"./chunk-KLPQTFVH.js";import"./chunk-RBHY7UDS.js";import"./chunk-LMXFSXO6.js";import"./chunk-DU7H4TEX.js";import"./chunk-5HZI7HRR.js";import"./chunk-2BS2OWWH.js";import"./chunk-J47R52WX.js";import"./chunk-VX6XCU4E.js";import"./chunk-4HBBEVFK.js";export{i as initComments,t as initKomo,s as initPalette};

package/dist/inline-text-editor-MK6FHDAM.js

@@ -0,0 +1 @@
+import{a as e,b as t,c as n,d as a,e as r,g as i}from"./chunk-6CIC7VU7.js";import{f as o}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";function s(e,t,n){n?a(n,e):e.firstChild?.nodeType===Node.TEXT_NODE&&!e.childElementCount&&(e.firstChild.data=t)}function l(e){let t=i(),n=null,a=!1;function r(a=!1){let r=n;r&&(n=null,r.finish(a),t.resume(r.element),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(i){let o=e.selected();if(n&&n.element===o)return void r();if(!o||!e.active()||a||n)return;let s=d(o);if(s)e.status.textContent=s;else{a=!0,t.pause(o),e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await p(o,{accent:getComputedStyle(e.button).getPropertyValue("--accent").trim()||"#bda6ef",loadReactBridge:async()=>await import("./react-props-panel-ZSKQ44GS.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(o),e.status.textContent="Text preview · resets on exit")}});a?e.active()&&e.selected()===o?(n=a,i&&function(e,t,n){let a=e.ownerDocument.caretPositionFromPoint?.(t,n),r=a?e.ownerDocument.createRange():e.ownerDocument.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let i=e.ownerDocument.getSelection();i?.removeAllRanges(),i?.addRange(r)}(o,i.clientX,i.clientY),e.status.textContent=o.hasAttribute("data-palette-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):a.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{a=!1,n||t.resume(o),e.onChange()}}},finish:r,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return r("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},redo(){let n=t.redo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function c(e){let t=l(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function d(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(([t])=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function u(e){return!d(e)}async function p(a,i){if(!u(a))return null;let l=null,c=null;if(a.dataset.paletteTextProp&&(l=await i.loadReactBridge(),c=l.beginReactTextEdit(a),!c))return null;let d=c?.before??(a.textContent??"").slice(0,500),p=!c&&a.childElementCount>0,g=c?void 0:t(a),f=g?.map(([e,t])=>[e,t]),m=()=>{for(let e of f??[])e[1]=e[0].data},h=f?r(a,f):()=>{},x=["outline","outline-offset","box-shadow","white-space"].map(e=>o(a,e)),C=a.getAttribute("role"),b=a.getAttribute("aria-label"),v=a.getAttribute("aria-multiline"),y=a.getAttribute("spellcheck"),w=new AbortController,T=!1,E=!1;let R=-1,A=new MutationObserver(()=>{R>=0&&function(e,t){let n=e.firstChild,a=e.ownerDocument.getSelection();if(!n||!a)return;let r=e.ownerDocument.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}(a,R)}),D=()=>{m(),!E&&!p&&((a.textContent??"").length>500&&s(a,(a.textContent??"").slice(0,500)),c&&l&&(R=function(e){let t=e.textContent??"",n=e.ownerDocument.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}(a),l.previewReactTextEdit(a,c.propName,a.textContent??"")||s(a,d)))},k=null,P=!1,S=(e,t)=>{k&&(e=k),k=null;let r=n(a,e,t);if(!r)return;m(),t.includes("\n")&&(P=!0),t.endsWith("\n")&&(k=new StaticRange({startContainer:r.startContainer,endContainer:r.endContainer,startOffset:r.startOffset,endOffset:r.endOffset}));let i=a.ownerDocument.getSelection();i?.removeAllRanges(),i?.addRange(r)};a.addEventListener("beforeinput",e=>{if(R=-1,E||e.isComposing||"insertCompositionText"===e.inputType)return;if("insertLineBreak"===e.inputType||"insertParagraph"===e.inputType){e.preventDefault();let t=a.ownerDocument.getSelection(),n=e.getTargetRanges()[0]??(t?.rangeCount?t.getRangeAt(0):null);return n&&S(n,"\n"),void D()}if(c&&!k)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;k&&"deleteContentBackward"===n&&(k=new StaticRange({startContainer:k.startContainer,endContainer:k.endContainer,startOffset:Math.max(0,k.startOffset-1),endOffset:k.endOffset})),t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&S(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??""),c&&D()},{signal:w.signal}),a.addEventListener("input",D,{signal:w.signal}),a.addEventListener("compositionstart",()=>{E=!0},{signal:w.signal}),a.addEventListener("compositionend",()=>{E=!1,D()},{signal:w.signal}),c&&A.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=a.ownerDocument.getSelection();n?.rangeCount&&S(n.getRangeAt(0),t),D()},{signal:w.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:w.signal}),a.addEventListener("pointerdown",()=>{k=null},{signal:w.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","true"),a.dataset.paletteInlineEditing="true",a.spellcheck=!1,a.style.setProperty("outline",`2px solid ${i.accent??"#bda6ef"}`,"important"),a.style.setProperty("outline-offset","2px","important"),a.style.setProperty("box-shadow","none","important"),a.style.setProperty("white-space","pre-wrap","important"),a.focus({preventScroll:!0});let O=a.ownerDocument.getSelection(),N=a.ownerDocument.createRange(),K=t(a).reverse().find(([t])=>!t.parentElement?.closest(e))?.[0];return K?N.setStart(K,K.length):N.selectNodeContents(a),N.collapse(!0),O?.removeAllRanges(),O?.addRange(N),{element:a,finish(e=!1){if(T)return;T=!0,w.abort(),A.disconnect(),h();for(let e of x.reverse())e.restore();let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-palette-inline-editing");for(let[e,t]of[["role",C],["aria-label",b],["aria-multiline",v],["spellcheck",y]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(c&&l&&l.cancelReactTextEdit(a,c.propName,d),s(a,d,g)):c&&l&&l.finishReactTextEdit(a,c.propName,d,t),i.onFinish({element:a,before:d,after:t,nodes:g,multiline:P,...c?{reactProp:c.propName}:{}},e)},handleKey:e=>((/^(Arrow|Home|End|Page)/.test(e.key)||e.metaKey||e.ctrlKey)&&(k=null),E||e.isComposing||229===e.keyCode?(e.stopImmediatePropagation(),!1):!("Enter"===e.key&&e.shiftKey&&!e.metaKey&&!e.ctrlKey&&!e.altKey)&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0)))}}export{c as bindInlineTextTools,u as canEditText,l as createInlineTextTools,i as createTextPreviewHistory,p as startInlineTextEditor,d as textEditBlocker};

package/dist/live-colors-D426RBEC.js

@@ -0,0 +1 @@
+import{d as e}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";function t(t,r,n){let o=new AbortController,i=new MutationObserver(()=>l()),a=!1,s=!1,l=()=>{a||(a=!0,requestAnimationFrame(u))},u=()=>{if(a=!1,!t[0].isConnected)return o.abort();for(let o of t){let t=o.querySelector("[data-property]"),i=o.querySelector('input[type="color"]'),a=o.querySelector(".design-token-binding")?.dataset.value,s=n({property:t.dataset.property,kind:"color"},r,a);s===t.value||t.matches(":focus")||"true"===t.getAttribute("aria-invalid")||(t.value=s,i&&(i.value=e(s)),o.dispatchEvent(new Event("palette-field-sync")))}let i=r.ownerDocument.getAnimations?.().filter(e=>/color|fill|stroke/.test(String(e.transitionProperty))&&e.effect?.target?.contains(r));!i?.length||s||(s=!0,Promise.race([Promise.allSettled(i.map(e=>e.finished)),new Promise(e=>setTimeout(e,1e3))]).then(()=>{s=!1,l()}))};for(let e of["pointerover","pointerout","pointerup","focusin","focusout","transitionend","transitioncancel"])addEventListener(e,l,{capture:!0,signal:o.signal});i.observe(r.ownerDocument,{attributes:!0,subtree:!0}),o.signal.addEventListener("abort",()=>i.disconnect()),l()}export{t as liveColors};

package/dist/live-colors.d.ts

@@ -6,7 +6,7 @@ type ColorValue = (field: Field, element: DesignTarget, resolved?: string) => st
  * renders restyle the element later, so the panel's color fields read again once
  * its color transitions settle: a token-bound field shows its token's value for
  * the current theme, any other field the computed value. A field being typed in
- * keeps its text; an open popup hears `komo-field-sync` and refreshes its own value.
+ * keeps its text; an open popup hears `palette-field-sync` and refreshes its own value.
  * Loaded with the panel as its own chunk.
  */
 export declare function liveColors(boxes: HTMLElement[], element: DesignTarget, valueFor: ColorValue): void;