@hazem3500/komo 0.8.0 → 0.9.1

package/dist/{chunk-E5X4IQJ2.js → chunk-YZP3KX4Y.js}

@@ -1 +1 @@
-var e="#c8b5f4";function t(t,r){let o=r&&/^#[0-9a-f]{6}$/i.test(r)?r:e,n=[1,3,5].map(e=>{let t=parseInt(o.slice(e,e+2),16)/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}),i=.2126*n[0]+.7152*n[1]+.0722*n[2];t.style.backgroundColor=o,t.style.color=i>.179?"#161616":"#ffffff",t.style.setProperty("--reviewer-accent",o),t.style.setProperty("--reviewer-ink",i>.179?"#161616":"#ffffff")}var r={chevron:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>',drawer:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"></path></svg>',edit:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 6.28 2 7.12 2 8.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 22 5.12 22 6.8 22h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V13M8 16h1.675c.489 0 .733 0 .963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5 5.5a2.121 2.121 0 0 0-3-3l-9.563 9.563c-.346.346-.519.519-.642.72a2 2 0 0 0-.24.579c-.055.23-.055.474-.055.963V16Z"></path></svg>',trash:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 6v-.8c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 2 13.92 2 12.8 2h-1.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C8 3.52 8 4.08 8 5.2V6m2 5.5v5m4-5v5M3 6h18m-2 0v11.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 22 15.88 22 14.2 22H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 19.72 5 18.88 5 17.2V6"></path></svg>',info:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"></path></svg>',more:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg>',person:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21c0-1.396 0-2.093-.172-2.661a4 4 0 0 0-2.667-2.667c-.568-.172-1.265-.172-2.661-.172h-5c-1.396 0-2.093 0-2.661.172a4 4 0 0 0-2.667 2.667C4 18.907 4 19.604 4 21M16.5 7.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"></path></svg>',search:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0Z"></path></svg>',plus:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14m-7-7h14"></path></svg>',comment:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.094 11.229A8.01 8.01 0 0 1 6 10c0-4.418 3.605-8 8.053-8 4.447 0 8.052 3.582 8.052 8a7.94 7.94 0 0 1-.52 2.835c-.07.182-.105.274-.12.345a.897.897 0 0 0-.024.194c-.002.073.008.153.028.314l.403 3.27c.043.355.065.532.006.66a.5.5 0 0 1-.257.252c-.13.055-.306.03-.66-.022l-3.184-.467c-.167-.024-.25-.037-.326-.036a.898.898 0 0 0-.2.021 2.989 2.989 0 0 0-.358.122 8.174 8.174 0 0 1-4.07.42M7.632 22C10.597 22 13 19.538 13 16.5S10.597 11 7.632 11c-2.965 0-5.369 2.462-5.369 5.5 0 .61.097 1.198.277 1.747.075.232.113.348.126.427.013.083.015.13.01.213-.005.08-.025.17-.065.351L2 22l2.995-.409c.163-.022.245-.034.316-.033.076 0 .115.005.19.02.07.013.173.05.381.123a5.246 5.246 0 0 0 1.75.299Z"></path></svg>',copy:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 15c-.932 0-1.398 0-1.765-.152a2 2 0 0 1-1.083-1.083C2 13.398 2 12.932 2 12V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C3.52 2 4.08 2 5.2 2H12c.932 0 1.398 0 1.765.152a2 2 0 0 1 1.083 1.083C15 3.602 15 4.068 15 5m-2.8 17h6.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C22 20.48 22 19.92 22 18.8v-6.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C20.48 9 19.92 9 18.8 9h-6.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C9 10.52 9 11.08 9 12.2v6.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C10.52 22 11.08 22 12.2 22Z"></path></svg>',pointer:'<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path transform="translate(24 0) scale(-1 1)" d="M3.41345 10.7445C2.81811 10.513 2.52043 10.3972 2.43353 10.2304C2.35819 10.0858 2.35809 9.91354 2.43326 9.76886C2.51997 9.60195 2.8175 9.48584 3.41258 9.25361L20.3003 2.66327C20.8375 2.45364 21.1061 2.34883 21.2777 2.40616C21.4268 2.45596 21.5437 2.57292 21.5935 2.72197C21.6509 2.8936 21.5461 3.16219 21.3364 3.69937L14.7461 20.5871C14.5139 21.1822 14.3977 21.4797 14.2308 21.5664C14.0862 21.6416 13.9139 21.6415 13.7693 21.5662C13.6025 21.4793 13.4867 21.1816 13.2552 20.5862L10.6271 13.8282C10.5801 13.7074 10.5566 13.647 10.5203 13.5961C10.4881 13.551 10.4487 13.5115 10.4036 13.4794C10.3527 13.4431 10.2923 13.4196 10.1715 13.3726L3.41345 10.7445Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>',expand:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3v18M7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3Z"></path></svg>',close:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>',check:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>',arrow:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5m0 0-7 7m7-7 7 7"></path></svg>',link:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12.708 18.364-1.415 1.414a5 5 0 1 1-7.07-7.07l1.413-1.415m12.728 1.414 1.415-1.414a5 5 0 0 0-7.071-7.071l-1.415 1.414M8.5 15.5l7-7"></path></svg>',code:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 17 5-5-5-5M7 7l-5 5 5 5m7-14-4 18"></path></svg>',smile:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>',tag:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8h.01M2 5.2v4.475c0 .489 0 .733.055.963.05.204.13.4.24.579.123.201.296.374.642.72l7.669 7.669c1.188 1.188 1.782 1.782 2.467 2.004a3 3 0 0 0 1.854 0c.685-.222 1.28-.816 2.467-2.004l2.212-2.212c1.188-1.188 1.782-1.782 2.004-2.467a3 3 0 0 0 0-1.854c-.222-.685-.816-1.28-2.004-2.467l-7.669-7.669c-.346-.346-.519-.519-.72-.642a2.001 2.001 0 0 0-.579-.24C10.409 2 10.165 2 9.676 2H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 3.52 2 4.08 2 5.2ZM8.5 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path></svg>',design:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12c0 5.523 4.477 10 10 10a3 3 0 0 0 3-3v-.5c0-.464 0-.697.026-.892a3 3 0 0 1 2.582-2.582c.195-.026.428-.026.892-.026h.5a3 3 0 0 0 3-3c0-5.523-4.477-10-10-10S2 6.477 2 12Z"></path><path d="M7 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9-4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-6-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg>'};function o(e,t="",r){let o=document.createElement(e);return t&&(o.className=t),void 0!==r&&(o.textContent=r),o}var n=new Map;function i(e){let t=n.get(e);if(!t){let o=document.createElement("div");o.innerHTML=r[e],t=o.querySelector("svg"),n.set(e,t)}return t.cloneNode(!0)}function a(e,t,r="icon",n){let a=o("button",r);return a.type="button",a.title=e,a.setAttribute("aria-label",e),n?a.append(i(n)):a.textContent=e,a.addEventListener("click",t),a}var h=e=>e.trim().split(/\s+/).slice(0,2).map(e=>e[0]).join("").toUpperCase();function s(e){let t=Math.max(0,Math.floor((Date.now()-e)/6e4));return t?t<60?`${t}m`:t<1440?`${Math.floor(t/60)}h`:`${Math.floor(t/1440)}d`:"Just now"}function l(e){let r=o("span","avatar",h(e.name));if(t(r,e.accentColor),e.avatarUrl&&/^(https:\/\/|data:image\/jpeg;base64,)/.test(e.avatarUrl)){let t=o("img");t.src=e.avatarUrl,t.alt="",t.referrerPolicy="no-referrer",t.addEventListener("error",()=>t.remove(),{once:!0}),r.append(t)}return r}function d(){let e=o("img","google-logo");return e.src="data:image/webp;base64,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",e.alt="",e.width=e.height=18,e}export{e as a,t as b,r as c,o as d,i as e,a as f,h as g,s as h,l as i,d as j};
+var e="#c8b5f4";function t(t,o){let r=o&&/^#[0-9a-f]{6}$/i.test(o)?o:e,n=[1,3,5].map(e=>{let t=parseInt(r.slice(e,e+2),16)/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4}),i=.2126*n[0]+.7152*n[1]+.0722*n[2];t.style.backgroundColor=r,t.style.color=i>.179?"#161616":"#ffffff",t.style.setProperty("--reviewer-accent",r),t.style.setProperty("--reviewer-ink",i>.179?"#161616":"#ffffff")}var o={chevron:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>',drawer:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"></path></svg>',edit:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 6.28 2 7.12 2 8.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 22 5.12 22 6.8 22h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V13M8 16h1.675c.489 0 .733 0 .963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5 5.5a2.121 2.121 0 0 0-3-3l-9.563 9.563c-.346.346-.519.519-.642.72a2 2 0 0 0-.24.579c-.055.23-.055.474-.055.963V16Z"></path></svg>',trash:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 6v-.8c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 2 13.92 2 12.8 2h-1.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C8 3.52 8 4.08 8 5.2V6m2 5.5v5m4-5v5M3 6h18m-2 0v11.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C16.72 22 15.88 22 14.2 22H9.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C5 19.72 5 18.88 5 17.2V6"></path></svg>',info:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"></path></svg>',more:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg>',person:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21c0-1.396 0-2.093-.172-2.661a4 4 0 0 0-2.667-2.667c-.568-.172-1.265-.172-2.661-.172h-5c-1.396 0-2.093 0-2.661.172a4 4 0 0 0-2.667 2.667C4 18.907 4 19.604 4 21M16.5 7.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"></path></svg>',search:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-3.5-3.5m2.5-6a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0Z"></path></svg>',plus:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14m-7-7h14"></path></svg>',comment:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.094 11.229A8.01 8.01 0 0 1 6 10c0-4.418 3.605-8 8.053-8 4.447 0 8.052 3.582 8.052 8a7.94 7.94 0 0 1-.52 2.835c-.07.182-.105.274-.12.345a.897.897 0 0 0-.024.194c-.002.073.008.153.028.314l.403 3.27c.043.355.065.532.006.66a.5.5 0 0 1-.257.252c-.13.055-.306.03-.66-.022l-3.184-.467c-.167-.024-.25-.037-.326-.036a.898.898 0 0 0-.2.021 2.989 2.989 0 0 0-.358.122 8.174 8.174 0 0 1-4.07.42M7.632 22C10.597 22 13 19.538 13 16.5S10.597 11 7.632 11c-2.965 0-5.369 2.462-5.369 5.5 0 .61.097 1.198.277 1.747.075.232.113.348.126.427.013.083.015.13.01.213-.005.08-.025.17-.065.351L2 22l2.995-.409c.163-.022.245-.034.316-.033.076 0 .115.005.19.02.07.013.173.05.381.123a5.246 5.246 0 0 0 1.75.299Z"></path></svg>',copy:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 15c-.932 0-1.398 0-1.765-.152a2 2 0 0 1-1.083-1.083C2 13.398 2 12.932 2 12V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C3.52 2 4.08 2 5.2 2H12c.932 0 1.398 0 1.765.152a2 2 0 0 1 1.083 1.083C15 3.602 15 4.068 15 5m-2.8 17h6.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C22 20.48 22 19.92 22 18.8v-6.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C20.48 9 19.92 9 18.8 9h-6.6c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C9 10.52 9 11.08 9 12.2v6.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C10.52 22 11.08 22 12.2 22Z"></path></svg>',pointer:'<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path transform="translate(24 0) scale(-1 1)" d="M3.41345 10.7445C2.81811 10.513 2.52043 10.3972 2.43353 10.2304C2.35819 10.0858 2.35809 9.91354 2.43326 9.76886C2.51997 9.60195 2.8175 9.48584 3.41258 9.25361L20.3003 2.66327C20.8375 2.45364 21.1061 2.34883 21.2777 2.40616C21.4268 2.45596 21.5437 2.57292 21.5935 2.72197C21.6509 2.8936 21.5461 3.16219 21.3364 3.69937L14.7461 20.5871C14.5139 21.1822 14.3977 21.4797 14.2308 21.5664C14.0862 21.6416 13.9139 21.6415 13.7693 21.5662C13.6025 21.4793 13.4867 21.1816 13.2552 20.5862L10.6271 13.8282C10.5801 13.7074 10.5566 13.647 10.5203 13.5961C10.4881 13.551 10.4487 13.5115 10.4036 13.4794C10.3527 13.4431 10.2923 13.4196 10.1715 13.3726L3.41345 10.7445Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>',expand:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3v18M7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3Z"></path></svg>',close:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>',check:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>',arrow:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5m0 0-7 7m7-7 7 7"></path></svg>',link:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12.708 18.364-1.415 1.414a5 5 0 1 1-7.07-7.07l1.413-1.415m12.728 1.414 1.415-1.414a5 5 0 0 0-7.071-7.071l-1.415 1.414M8.5 15.5l7-7"></path></svg>',code:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 17 5-5-5-5M7 7l-5 5 5 5m7-14-4 18"></path></svg>',smile:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>',tag:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8h.01M2 5.2v4.475c0 .489 0 .733.055.963.05.204.13.4.24.579.123.201.296.374.642.72l7.669 7.669c1.188 1.188 1.782 1.782 2.467 2.004a3 3 0 0 0 1.854 0c.685-.222 1.28-.816 2.467-2.004l2.212-2.212c1.188-1.188 1.782-1.782 2.004-2.467a3 3 0 0 0 0-1.854c-.222-.685-.816-1.28-2.004-2.467l-7.669-7.669c-.346-.346-.519-.519-.72-.642a2.001 2.001 0 0 0-.579-.24C10.409 2 10.165 2 9.676 2H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 3.52 2 4.08 2 5.2ZM8.5 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path></svg>',design:'<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12c0 5.523 4.477 10 10 10a3 3 0 0 0 3-3v-.5c0-.464 0-.697.026-.892a3 3 0 0 1 2.582-2.582c.195-.026.428-.026.892-.026h.5a3 3 0 0 0 3-3c0-5.523-4.477-10-10-10S2 6.477 2 12Z"></path><path d="M7 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9-4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-6-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path></svg>'},r=e=>e instanceof HTMLElement&&(e.matches("input,textarea,select")||e.isContentEditable),n="pointerdown mousedown touchstart touchmove touchend click wheel focusin focusout keydown keyup keypress".split(" "),i=(e,t)=>t instanceof ShadowRoot&&t.host.hasAttribute("data-isolate")&&(!e.type.startsWith("key")||r(e.composedPath()[0]));function a(e,t,o,r){let n=e.getRootNode();document.addEventListener(t,o,r),n.addEventListener(t,e=>i(e,n)&&o(e),r)}function s(e,t="",o){let r=document.createElement(e);return t&&(r.className=t),void 0!==o&&(r.textContent=o),r}var h=new Map;function d(e){let t=h.get(e);if(!t){let r=document.createElement("div");r.innerHTML=o[e],t=r.querySelector("svg"),h.set(e,t)}return t.cloneNode(!0)}function l(e,t,o="icon",r){let n=s("button",o);return n.type="button",n.title=e,n.setAttribute("aria-label",e),r?n.append(d(r)):n.textContent=e,n.addEventListener("click",t),n}var c=e=>e.trim().split(/\s+/).slice(0,2).map(e=>e[0]).join("").toUpperCase();function u(e){let t=Math.max(0,Math.floor((Date.now()-e)/6e4));return t?t<60?`${t}m`:t<1440?`${Math.floor(t/60)}h`:`${Math.floor(t/1440)}d`:"Just now"}function p(e){let o=s("span","avatar",c(e.name));if(t(o,e.accentColor),e.avatarUrl&&/^(https:\/\/|data:image\/jpeg;base64,)/.test(e.avatarUrl)){let t=s("img");t.src=e.avatarUrl,t.alt="",t.referrerPolicy="no-referrer",t.addEventListener("error",()=>t.remove(),{once:!0}),o.append(t)}return o}function g(){let e=s("img","google-logo");return e.src="data:image/webp;base64,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",e.alt="",e.width=e.height=18,e}export{e as a,t as b,o as c,r as d,n as e,i as f,a as g,s as h,d as i,l as j,c as k,u as l,p as m,g as n};

package/dist/design-comment-RTVUFVDE.js

@@ -0,0 +1 @@
+import"./chunk-I7AUKTXE.js";var e=/^Proposed (.+?) changes? \(preview only\)$/,t={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function n(t){return t.split("\n").some(t=>e.test(t))}function r(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function a(e,t){let n=/^Shared theme (\S+) \((--[\w-]+)\): (.*?) → (.*?)(?:; preview scope .*)?$/.exec(e);if(n)return{label:n[1],token:n[1],before:n[3],after:n[4],apply:{kind:"variable",property:n[2]}};if(n=/^Element ([\w-]+): (.*?) → (.*?)(?: \[([^\]]+)\])*$/.exec(e),n){let t=/\[([\w.-]+)\]/.exec(e.slice(e.indexOf("→")))?.[1];return{label:n[1],before:n[2],after:n[3],...t&&!t.includes(" ")?{token:t}:{},apply:{kind:"style",property:n[1]}}}if(n=/^- (.+?): (.*) → (.*?)(?: \[([^\]]+)\])?$/.exec(e),!n)return null;let[,a,o,i,s]=n;return"inline text"===t?{label:"Text",before:r(o),after:r(i),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:a,before:r(o),after:r(i),...s&&"custom value"!==s?{token:s}:{}}:{label:a,before:o,after:i,apply:{kind:"style",property:a}}}function o(n){let r=[];for(let o of n.split(/\n{2,}/)){let n=o.split("\n"),i=e.exec(n[0]??"");if(!i){o.trim()&&r.push({text:o.trim()});continue}let s=i[1],l={title:t[s]??`${s[0].toUpperCase()}${s.slice(1)} changes`,changes:[]};for(let e of n.slice(1))if(e.startsWith("Target: "))l.target=e.slice(8);else if(e.startsWith("Component: "))l.component=e.slice(11);else if(e.startsWith("Source: "))l.source=e.slice(8);else{let t=e.includes("→")?a(e,s):null;t&&t.before!==t.after&&l.changes.push(t)}l.changes.length?r.push(l):r.push({text:o.trim()})}return r}function i(e){let t=o(e),n=t.filter(e=>"changes"in e),r=t.find(e=>"text"in e)?.text,a=n.reduce((e,t)=>e+t.changes.length,0),i=n.find(e=>e.target)?.target,l=`Design change · ${a} ${1===a?"edit":"edits"}${i?` on ${s(i)}`:""}`;return r?`${r}\n${l}`:l}function s(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var l=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,p=new Map,d=new Set,c=new Map;function f(e){let t=c.get(e);t&&(clearTimeout(t.timer),c.delete(e),t.finish())}function g(e,t,n,r=!1){f(e);let a=[],o=[],i=[];for(let e of t){let t=n(e.target);for(let n of e.changes)if(n.apply&&"(unset)"!==n.after)if("variable"===n.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(n.apply.property);e.style.setProperty(n.apply.property,n.after),a.push(()=>t?e.style.setProperty(n.apply.property,t):e.style.removeProperty(n.apply.property))}else if(t instanceof HTMLElement&&"style"===n.apply.kind){let e=t.style.getPropertyValue(n.apply.property),a=t.style.getPropertyPriority(n.apply.property),s=n.apply.property,l=()=>"(unset)"!==n.before&&(t.style.setProperty(s,n.before,"important"),!0);r&&l()&&getComputedStyle(t).getPropertyValue(s),t.style.setProperty(s,n.after,"important"),i.push(l),o.push(()=>e?t.style.setProperty(n.apply.property,e,a):t.style.removeProperty(n.apply.property))}else if(t instanceof HTMLElement&&"text"===n.apply.kind&&!t.childElementCount){let e=t.firstChild;if(e instanceof Text){let t=e.data;e.data=n.after,a.push(()=>{e.data=t})}}}return p.set(e,{restore:a,restoreStyles:o,pinBefore:i}),a.length+o.length>0}var m,u=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],h="cubic-bezier(.22, 1, .36, 1)";function y(e,t){let n=new Set;for(let r of e)for(let e of r.changes)if("style"===e.apply?.kind)n.add(e.apply.property);else if("variable"===e.apply?.kind)u.forEach(e=>n.add(e));else if("text"===e.apply?.kind){let e=t(r.target);e instanceof HTMLElement&&e.animate?.([{opacity:1},{opacity:.25,offset:.4},{opacity:1}],{duration:360,easing:h})}if(!n.size)return;m&&(clearTimeout(m.timer),m.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${h} !important; transition-delay: 0s !important; }`,document.head.append(r),m={style:r,timer:setTimeout(()=>{r.remove(),m=void 0},480)}}function x(e,t=!1){f(e);let n=p.get(e);if(!n)return;p.delete(e);for(let e of n.restore.reverse())e();let r=()=>{for(let e of n.restoreStyles.reverse())e()};if(!t||!n.pinBefore.length)return r();for(let e of n.pinBefore)e();c.set(e,{finish:r,timer:setTimeout(()=>f(e),480)})}function b(e){return p.has(e)||c.has(e)}function w(e=new Set){for(let t of[...c.keys()])e.has(t)||f(t);for(let t of[...p.keys()])e.has(t)||x(t)}function v(e){return"text"===e.apply?.kind||!(e.apply||e.token||l.test(e.before)||l.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function k(e,t){let n=0;for(;n<e.length&&n<t.length&&e[n]===t[n];)n++;let r=0;for(;r<e.length-n&&r<t.length-n&&e[e.length-1-r]===t[t.length-1-r];)r++;for(;n>0&&!/\s/.test(e[n-1]);)n--;for(;r>0&&!/\s/.test(e[e.length-r]);)r--;let a=e.slice(0,n),o=e.slice(e.length-r),i=document.createElement("p");i.className="design-diff",i.append(a.length>48?`…${a.slice(-40)}`:a);let s=e.slice(n,e.length-r),l=t.slice(n,t.length-r);return s&&i.append(Object.assign(document.createElement("del"),{textContent:s})),l&&i.append(Object.assign(document.createElement("ins"),{textContent:l})),i.append(o.length>48?`${o.slice(0,40)}…`:o),i}function E(e,t){let n=document.createElement("span");n.className="design-value";let r=/^var\((--[\w-]+)\)$/.exec(e);if(t&&r)return n.append(Object.assign(document.createElement("span"),{className:"design-token",textContent:t})),n;if(l.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function C(e,t,n){let r=o(t),a=r.filter(e=>"changes"in e),i=document.createElement("div");i.className="design-comment",i.append(Object.assign(document.createElement("style"),{textContent:'\n.design-comment { display: grid; gap: 8px; margin: 2px 0 6px; }\n.design-note { margin: 0; white-space: pre-wrap; }\n.design-card { border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; overflow: hidden; font-size: 12px; }\n.design-card-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 8px 7px 12px; }\n.design-card-label { display: grid; min-width: 0; gap: 1px; }\n.design-card-title { font-weight: 600; color: #eee; white-space: nowrap; }\n.design-card-target { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8a8a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }\n.design-toggle { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 7px; background: #ffffff0a; flex: none; }\n.design-toggle button { border: 0; padding: 0 8px; height: 22px; border-radius: 5px; font: inherit; font-size: 11px; color: #9a9a9a; background: none; cursor: pointer; }\n.design-toggle button[aria-pressed="true"] { color: #fff; background: #ffffff1a; }\n.design-rows { display: grid; border-top: 1px solid #ffffff0a; }\n.design-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 12px; }\n.design-row + .design-row { border-top: 1px solid #ffffff06; }\n.design-row[hidden] { display: none; }\n.design-row-prose { grid-template-columns: 1fr; gap: 3px; }\n.design-diff { margin: 0; line-height: 1.5; color: #ddd; overflow-wrap: anywhere; }\n.design-diff del, .design-diff ins { border-radius: 3px; padding: 0 2px; }\n.design-diff del { color: #f6a19a; background: #f28b8224; text-decoration-color: #f6a19a99; }\n.design-diff ins { color: #b9e6ad; background: #8fd69424; text-decoration: none; }\n.design-prop { color: #9a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.design-values { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: #eee; }\n.design-before { color: #858585; text-decoration: line-through; text-decoration-color: #85858599; }\n.design-arrow { color: #666; }\n.design-value { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }\n.design-swatch { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff26; }\n.design-token { padding: 1px 6px; border-radius: 5px; color: var(--accent, #bda6ef); background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent); }\n.design-more { border: 0; width: 100%; padding: 7px 12px; text-align: left; font: inherit; font-size: 11px; color: #9a9a9a; background: none; border-top: 1px solid #ffffff06; cursor: pointer; }\n.design-more:hover, .design-toggle button:hover { color: #fff; }\n.design-source { padding: 0 12px 8px; color: #777; font-size: 11px; }\n[data-compact] { gap: 6px; margin: 11px 0 0; }\n[data-compact] .design-card-head, [data-compact] .design-row, [data-compact] > .design-source { min-height: 0; padding: 4px 10px; }\n[data-compact]:hover > .design-source { color: #eee; text-decoration: underline; }\n'}));let l=!!n.compact;l&&(i.dataset.compact="");let c=l?3:1/0,f=0,m=a.some(e=>e.changes.some(e=>e.apply)),u=[],h=()=>{let e=p.has(n.key);for(let t of u)t.querySelectorAll("button").forEach((t,n)=>t.setAttribute("aria-pressed",String(1===n?e:!e)))};for(let e of r){if("text"in e){let t=document.createElement("p");t.className="design-note",n.note(t,e.text),i.append(t);continue}if(c<=0){f+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let o=document.createElement("div");o.className="design-card-label",o.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let b=e.target?s(e.target):e.component;if(b){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:b});e.target&&(t.title=e.target),o.append(t)}if(r.append(o),m&&!u.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.className="design-toggle",e.setAttribute("role","group"),e.setAttribute("aria-label","Preview on page");for(let[t,r]of["Before","After"].entries()){let o=Object.assign(document.createElement("button"),{type:"button",textContent:r,title:`${r} · ${t?"→":"←"} or B`});o.addEventListener("click",()=>{let e=1===t;if(e===p.has(n.key))return;let r=n.resolve(a.find(e=>e.target)?.target);e&&r?.scrollIntoView({block:"center",behavior:"smooth"});let o="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;o||y(a,n.resolve),e?g(n.key,a,n.resolve,!o):x(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),h()}),e.append(o)}u.push(e);for(let e of d)e.isConnected||d.delete(e);d.add(e),r.append(e)}t.append(r);let w=document.createElement("div");w.className="design-rows";let C=4;e.changes.forEach((t,n)=>{if(c<=0)return void f++;l&&c--;let r=document.createElement("div");r.className="design-row",r.hidden=!l&&n>=C&&e.changes.length>C+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,v(t))return r.classList.add("design-row-prose"),r.append(a,k(t.before,t.after)),void w.append(r);let o=document.createElement("span");o.className="design-values";let i=E(t.before);i.classList.add("design-before"),o.append(i,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),E(t.after,t.token)),r.append(a,o),w.append(r)}),t.append(w);let S=w.querySelectorAll("[hidden]").length;if(S){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${S} more`});e.addEventListener("click",()=>{w.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!l&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),i.append(t)}f&&i.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${f} more`})),h(),e.replaceChildren(i),u.length&&(S||(S=!0,document.addEventListener("keydown",e=>{let t="ArrowLeft"===e.key?0:"ArrowRight"===e.key?1:"b"===e.key.toLowerCase()?-1:null;if(null===t||e.metaKey||e.ctrlKey||e.altKey||e.shiftKey||e.isComposing)return;let n=e.composedPath()[0];if(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select")))return;let r=[...d].reverse().find(e=>e.isConnected),a=r?.querySelectorAll("button"),o=-1===t?r?.querySelector('button[aria-pressed="false"]'):a?.[t];o&&(e.preventDefault(),o.click())})))}var S=!1;function $(e,t){C(e,t,{key:"draft",resolve:()=>null,note:(e,t)=>e.append(t)}),e.querySelector(".design-toggle")?.remove()}export{n as isDesignComment,b as isPreviewing,o as parseDesignComment,C as renderDesignComment,$ as renderDraftProposal,w as resetDesignPreviews,s as shortTarget,i as summarizeDesignComment};

package/dist/design-comment.d.ts

@@ -0,0 +1,50 @@
+export interface DesignChange {
+    label: string;
+    before: string;
+    after: string;
+    /** Token path such as color.brand, when the change binds a design token. */
+    token?: string;
+    /** How to preview it on the page; absent when only the app can apply it. */
+    apply?: {
+        kind: "style" | "variable" | "text";
+        property: string;
+    };
+}
+export interface DesignSection {
+    title: string;
+    target?: string;
+    component?: string;
+    source?: string;
+    changes: DesignChange[];
+}
+export type DesignBlock = {
+    text: string;
+} | DesignSection;
+/** True when a comment body contains at least one Design mode proposal. */
+export declare function isDesignComment(body: string): boolean;
+/** Split a comment body into plain notes and recognised proposal sections. */
+export declare function parseDesignComment(body: string): DesignBlock[];
+/** One-line summary for the sidebar, e.g. "Design change · 2 edits on h2". */
+export declare function summarizeDesignComment(body: string): string;
+/** The last step of a generated selector, without :nth-of-type noise. */
+export declare function shortTarget(selector: string): string;
+/** Whether a comment's After state is currently applied to the page. */
+export declare function isPreviewing(key: string): boolean;
+/** Undo every live preview except those whose cards are still on screen. */
+export declare function resetDesignPreviews(keep?: ReadonlySet<string>): void;
+export interface DesignCommentOptions {
+    /** Stable id for this comment, used to keep its preview state across redraws. */
+    key: string;
+    /** Element the change applies to; falls back to the comment's anchor. */
+    resolve(selector?: string): Element | null;
+    /** Render plain notes with the widget's normal link handling. */
+    note(element: HTMLElement, text: string): void;
+    /** Read-only summary for hover cards: at most three rows, no Before/After switch. */
+    compact?: boolean;
+    /** Called once a Before/After switch has settled, e.g. to move a dialog off a resized element. */
+    onSwitch?(): void;
+}
+/** Replace `container`'s content with a change card for each proposal. */
+export declare function renderDesignComment(container: HTMLElement, body: string, options: DesignCommentOptions): void;
+/** A proposal being written: read-only, since the change is already live on the page. */
+export declare function renderDraftProposal(container: HTMLElement, body: string): void;

package/dist/design-mode-styles.d.ts

@@ -1 +1 @@
-export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n   widget shadow root and never become site styles. */\n.design-outline {\n  position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n  border:2px solid var(--accent,#bda6ef); border-radius:8px;\n  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent), 0 2px 12px #0003;\n  transition:all 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { border-style:dashed; opacity:.8; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n  position:absolute; inset:0; z-index:9;\n  display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n  background:#0d0d0d; border-radius:inherit;\n  font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n  opacity:0; translate:0 6px; pointer-events:none;\n  transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:2px; height:44px; padding:0 6px 0 12px; border-bottom:1px solid #ffffff12; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:4px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:30%; overflow:hidden; text-overflow:ellipsis; margin-left:-4px; padding:2px 4px; border-radius:4px; color:#77736f; font-size:12px; }\n.design-inspector__parent::after { content:'/'; margin-left:4px; color:#4a4845; }\n.design-inspector__parent:hover { color:#e9e6e1; background:#ffffff0d; }\n.design-inspector__target { flex:none; margin-right:2px; max-width:60%; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size:12px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#77736f; font-size:11px; }\n.design-inspector__close,.design-inspector__fold { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:6px; color:#898680; }\n.design-inspector__close svg,.design-inspector__fold svg { width:14px; height:14px; }\n.design-inspector__close:hover,.design-inspector__fold:hover { background:#ffffff12; color:#fff; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector[data-folded] .design-inspector__heading { border:0; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__heading { border:0; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n.design-inspector__empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 24px 28px; color:#898680; font-size:11px; text-align:center; }\n.design-inspector__empty > svg { box-sizing:content-box; width:20px; height:20px; margin-bottom:8px; padding:8px; border-radius:10px; background:#ffffff0a; color:#77736f; }\n.design-inspector__empty strong { color:#e9e6e1; font-size:12px; font-weight:600; }\n.design-inspector__empty ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }\n.design-inspector__empty kbd { display:inline-block; min-width:8px; padding:0 5px; border-radius:4px; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 8px 0 12px; border-top:1px solid #ffffff12; color:#898680; font-size:11px; }\n.design-inspector__count { white-space:nowrap; font-variant-numeric:tabular-nums; }\n.design-inspector__status { display:none; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:design-status .2s var(--ease-smooth-out); }\n.design-inspector__bar[data-message] .design-inspector__status { display:block; }\n.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:6px; color:#aaa6a0; }\n.design-inspector__actions button:hover:not(:disabled) { background:#ffffff12; color:#fff; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n.design-inspector__actions svg { width:14px; height:14px; }\n.design-inspector__actions button:last-child { padding:0 10px; color:#e9e6e1; font-size:11px; font-weight:550; }\n.design-inspector__bar[data-changes] .design-inspector__actions button:last-child { margin-left:4px; background:#bda6ef; color:#211b2d; }\n.design-inspector__bar[data-changes] .design-inspector__actions button:last-child:hover { background:#c8b5f4; }\n.design-inspector :focus-visible { outline:2px solid #bda6ef; outline-offset:2px; }\n@keyframes design-status { from { opacity:0; translate:0 2px; } }\n@media (max-width:520px) {\n  /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n  .design-inspector {\n    position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n    max-height:min(58dvh,560px);\n    border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n    transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n    transform-origin:bottom center;\n  }\n  .design-inspector__heading { height:52px; padding-left:18px; }\n  .design-inspector__fold { display:grid; }\n  .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n  .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";
+export declare const designModeStyles = "\n/* Design mode is deliberately an in-page preview: all controls remain in the\n   widget shadow root and never become site styles. */\n.design-outline {\n  position:fixed; z-index:1; pointer-events:none; box-sizing:border-box;\n  border:2px solid var(--accent,#bda6ef); border-radius:8px;\n  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent), 0 2px 12px #0003;\n  transition:all 80ms ease;\n}\n.design-outline[data-kind=\"hover\"] { border-style:dashed; opacity:.8; }\n/* The inspector replaces the Comments view inside Komo's shared sidebar surface. */\n.design-inspector {\n  position:absolute; inset:0; z-index:9;\n  display:flex; flex-direction:column; overflow:hidden; color:#e9e6e1;\n  background:#0d0d0d; border-radius:inherit;\n  font:12px/1.4 -apple-system,BlinkMacSystemFont,\"Inter\",\"Segoe UI\",sans-serif; color-scheme:dark;\n  opacity:0; translate:0 6px; pointer-events:none;\n  transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out);\n}\n.design-inspector[hidden] { display:none; }\n/* Frame docks the inspector in the sidebar column beside the scaled page. */\n:host([data-sidebar=\"background\"]) .design-inspector { position:fixed; inset:0 0 0 auto; width:380px; border-radius:0; }\n/* The floating inspector drags by its heading, like the comment sidebar's grip. */\n:host([data-sidebar=\"edge\"]) .design-inspector__heading { cursor:grab; touch-action:none; padding-top:22px; }\n/* The sidebar's own grip stays visible above the inspector, as it is above Comments. */\n:host(.design-active[data-sidebar=\"edge\"]) .edge-sidebar .edge-sidebar-grip { z-index:10; opacity:1 !important; }\n.design-inspector[data-state=\"active\"] { opacity:1; translate:0 0; pointer-events:auto; }\n.design-inspector[data-state=\"closing\"] { opacity:0; translate:0 4px; }\n.design-inspector button { cursor:pointer; }\n/* Header and icon buttons match the Comments panel's title and icons, on the inspector's 12px gutter. */\n.design-inspector__heading { flex:none; display:flex; align-items:center; gap:4px; min-height:54px; padding:0 8px 0 12px; }\n.design-inspector__identity { min-width:0; flex:1; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }\n.design-inspector__parent { flex:none; max-width:35%; overflow:hidden; text-overflow:ellipsis; margin-left:-6px; padding:2px 6px; border-radius:7px; color:#909090; font-size:15px; font-weight:500; }\n.design-inspector__parent::after { content:'/'; margin-left:6px; color:#555; }\n.design-inspector__parent:hover { color:#eee; background:#161616; }\n.design-inspector__target { flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; font-size:15px; }\n.design-inspector__heading small { min-width:0; overflow:hidden; text-overflow:ellipsis; color:#909090; font-size:13px; }\n.design-inspector__close,.design-inspector__fold { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:7px; color:#909090; }\n.design-inspector__close svg,.design-inspector__fold svg { width:16px; height:16px; }\n.design-inspector__close:hover,.design-inspector__fold:hover { background:#161616; color:#eee; }\n.design-inspector__fold { display:none; }\n.design-inspector__fold svg { transition:rotate .25s var(--ease-smooth-out); }\n.design-inspector[data-folded] .design-inspector__fold svg { rotate:180deg; }\n.design-inspector[data-folded] > :not(.design-inspector__heading) { display:none; }\n.design-inspector[data-folded] .design-inspector__heading { border:0; }\n.design-inspector__controls { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }\n/* Empty state: the floating sidebar fits a compact, centered hint instead of an empty column. */\n:host([data-sidebar=\"edge\"]) .edge-sidebar[data-design-empty]:not([data-morphing]) { height:auto !important; }\n:host([data-sidebar=\"edge\"]) [data-design-empty] > .design-inspector { position:relative; inset:auto; }\n/* The hidden toolbar docked in the sidebar would otherwise add its height. */\n:host([data-sidebar=\"edge\"]) [data-design-empty]:not([data-morphing]) > .toolbar { position:absolute; }\n.design-inspector[data-empty] .design-inspector__heading { border:0; }\n.design-inspector[data-empty] .design-inspector__identity { visibility:hidden; }\n.design-inspector[data-empty] .design-inspector__controls { display:grid; place-items:center; }\n.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]) { display:none; }\n.design-inspector__empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 24px 28px; color:#898680; font-size:11px; text-align:center; }\n.design-inspector__empty > svg { box-sizing:content-box; width:20px; height:20px; margin-bottom:8px; padding:8px; border-radius:10px; background:#ffffff0a; color:#77736f; }\n.design-inspector__empty strong { color:#e9e6e1; font-size:12px; font-weight:600; }\n.design-inspector__empty ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }\n.design-inspector__empty kbd { display:inline-block; min-width:8px; padding:0 5px; border-radius:4px; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }\n/* One slim bar: a quiet Comment action, plus a change count and tools once something changed. */\n.design-inspector__bar { flex:none; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 12px; border-top:1px solid #ffffff0d; color:#909090; font-size:12px; }\n.design-inspector__count { white-space:nowrap; font-variant-numeric:tabular-nums; }\n/* Before/After: the same segmented control as design comment cards. */\n.design-inspector__compare { display:inline-flex; flex:none; padding:2px; border-radius:7px; background:#ffffff0a; }\n.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare { display:none; }\n.design-inspector__compare button { height:22px; padding:0 8px; border-radius:5px; color:#9a9a9a; font:inherit; font-size:11px; }\n.design-inspector__compare button:hover { color:#fff; }\n.design-inspector__compare button[aria-pressed=\"true\"] { color:#fff; background:#ffffff1a; }\n.design-inspector__status { display:none; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:design-status .2s var(--ease-smooth-out); }\n.design-inspector__bar[data-message] .design-inspector__status { display:block; }\n.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool { display:none; }\n.design-inspector__actions { display:flex; align-items:center; gap:2px; margin-left:auto; }\n.design-inspector__actions button { display:grid; place-items:center; min-width:28px; height:28px; border-radius:7px; color:#909090; }\n.design-inspector__actions button:hover:not(:disabled) { background:#161616; color:#eee; }\n.design-inspector__actions button:disabled { cursor:default; opacity:.35; }\n.design-inspector__actions svg { width:16px; height:16px; }\n/* Comment is komo's primary action, as on the Comments panel. */\n.design-inspector__actions button:last-child { min-height:34px; margin-left:6px; padding:0 14px; border-radius:8px; background:var(--accent,#bda6ef); color:#211b2d; font-size:12px; font-weight:500; }\n.design-inspector__actions button:last-child:hover:not(:disabled) { background:var(--accent,#bda6ef); color:#211b2d; filter:brightness(1.08); }\n.design-inspector :focus-visible { outline:2px solid var(--accent,#bda6ef); outline-offset:2px; }\n@keyframes design-status { from { opacity:0; translate:0 2px; } }\n@media (max-width:520px) {\n  /* A content-sized bottom sheet; folding it leaves only the heading over the page. */\n  .design-inspector {\n    position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));\n    max-height:min(58dvh,560px);\n    border-radius:24px; box-shadow:0 -1px 0 #ffffff24,0 16px 48px #0005;\n    transition:translate 320ms cubic-bezier(.22,1,.36,1),scale 320ms cubic-bezier(.22,1,.36,1),opacity 150ms ease;\n    transform-origin:bottom center;\n  }\n  .design-inspector__heading { height:52px; padding-left:18px; }\n  .design-inspector__fold { display:grid; }\n  .design-inspector[data-empty] .design-inspector__identity { visibility:visible; }\n  .design-field { height:34px; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status { transition:none; animation:none; }\n}\n";

package/dist/design-mode.d.ts

@@ -8,6 +8,8 @@ export interface DesignModeOptions {
     onExit(): void;
     /** Label of the shortcut that toggles Design mode, shown in the empty state. */
     exitKey?: string;
+    /** Move the floating panel to the other side when it covers the target. */
+    flip?(): void;
 }
 export declare function createDesignMode(options: DesignModeOptions): {
     setActive: (value: boolean) => void;

package/dist/design-mode.js

@@ -1 +1 @@
-import{e}from"./chunk-E5X4IQJ2.js";import"./chunk-I7AUKTXE.js";var t=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function n(n){let i=document.createElement("style");i.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--accent,#bda6ef);border-radius:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent),0 2px 12px #0003;transition:all 80ms ease}.design-outline[data-kind=hover]{border-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:2px;height:44px;padding:0 6px 0 12px;border-bottom:1px solid #ffffff12}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:4px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:30%;overflow:hidden;text-overflow:ellipsis;margin-left:-4px;padding:2px 4px;border-radius:4px;color:#77736f;font-size:12px}.design-inspector__parent:after{content:"/";margin-left:4px;color:#4a4845}.design-inspector__parent:hover{color:#e9e6e1;background:#ffffff0d}.design-inspector__target{flex:none;margin-right:2px;max-width:60%;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#77736f;font-size:11px}.design-inspector__close,.design-inspector__fold{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;color:#898680}.design-inspector__close svg,.design-inspector__fold svg{width:14px;height:14px}.design-inspector__close:hover,.design-inspector__fold:hover{background:#ffffff12;color:#fff}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector[data-folded] .design-inspector__heading{border:0}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__heading{border:0}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 12px;border-top:1px solid #ffffff12;color:#898680;font-size:11px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:6px;color:#aaa6a0}.design-inspector__actions button:hover:not(:disabled){background:#ffffff12;color:#fff}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions svg{width:14px;height:14px}.design-inspector__actions button:last-child{padding:0 10px;color:#e9e6e1;font-size:11px;font-weight:550}.design-inspector__bar[data-changes] .design-inspector__actions button:last-child{margin-left:4px;background:#bda6ef;color:#211b2d}.design-inspector__bar[data-changes] .design-inspector__actions button:last-child:hover{background:#c8b5f4}.design-inspector :focus-visible{outline:2px solid #bda6ef;outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let o=null,s=import("./design-panel-BPVXFERR.js").then(e=>{i.textContent+=e.designPanelStyles,o=e},()=>{b.textContent="Design controls unavailable · try again"}),a=document.createElement("aside");a.className="design-inspector",a.setAttribute("role","dialog"),a.setAttribute("aria-label","Design mode inspector"),a.setAttribute("aria-hidden","true"),a.hidden=!0;let r=document.createElement("div");r.className="design-outline",r.setAttribute("aria-hidden","true");let d=document.createElement("div");d.className="design-inspector__heading";let l=document.createElement("button");l.type="button",l.className="design-inspector__parent",l.hidden=!0;let c=document.createElement("span");c.className="design-inspector__target";let p=document.createElement("small"),g=document.createElement("button");g.type="button",g.className="design-inspector__close",g.setAttribute("aria-label","Exit design mode"),g.append(e("close"));let m=document.createElement("button");m.type="button",m.className="design-inspector__fold",m.append(e("chevron"));let u=document.createElement("div");u.className="design-inspector__identity",u.append(l,c,p),d.append(u,m,g);let f=document.createElement("div");f.className="design-inspector__controls";let h=document.createElement("div");h.className="design-inspector__bar";let x=document.createElement("span");x.className="design-inspector__count",x.title="Preview only · resets on refresh";let b=document.createElement("p");b.className="design-inspector__status",b.setAttribute("role","status");let y=document.createElement("div");y.className="design-inspector__actions";let _=(e,t)=>{let n=document.createElement("button");return n.type="button",n.className="design-inspector__tool",n.title=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},v=_("Undo",t("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),w=_("Reset",t("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),E=_("Copy CSS","");E.append(e("copy"));let k=document.createElement("button");k.type="button",k.textContent="Comment";let C=document.createElement("button");C.type="button",C.className="design-text-edit",C.title="Edit text",C.textContent="Edit text",C.setAttribute("aria-label","Edit selected text inline"),y.append(v,w,E,k),h.append(x,b,y),a.append(d,f,h),n.root.append(i,r),(n.panelRoot??n.root).append(a);let P=!1,A=0,T=null,L=null,M=null,D=0,S=null,z=null,R=new Map,N=new Map,B=new WeakMap,F=new WeakMap,I=new AbortController,$=new Set,j=[];function H(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=R.get(e);o||R.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function U(e,t){let n=N.get(e);n||N.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(R.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||N.delete(e),Y(T,"selected")}let V=0;function X(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function O(e,t,n){T&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(H(T,t),S?.noteDesignTokenOverride(T,t,n),T.style.setProperty(t,n,R.get(T)?.get(t)?.priority),U(T,t),te()))}function q(e,t,n=!0){if(!T)return;let i={value:T.style.getPropertyValue(t),priority:T.style.getPropertyPriority(t)},o=F.get(e),s=o?.before??B.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&j.splice(j.indexOf(o),1),F.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:T,property:t,before:s,after:i};j.push(n),F.set(e,n)}n&&(B.set(e,i),F.delete(e)),te()}function K(){if(f.replaceChildren(),Q(),!T){let t=document.createElement("div");t.className="design-inspector__empty";let i=document.createElement("strong");i.textContent="Select an element";let o=document.createElement("ul"),s=(...e)=>{let t=document.createElement("li");e.forEach((e,n)=>{n%2==0?t.append(e):t.append(Object.assign(document.createElement("kbd"),{textContent:e}))}),o.append(t)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),n.exitKey?s("","Esc"," or ",n.exitKey," to exit"):s("","Esc"," to exit"),t.append(e("design"),i,o),f.append(t),c.textContent="Select an element",p.textContent="",void(l.hidden=!0)}let t=`${T.tagName.toLowerCase()}${T.id?`#${T.id}`:""}`;c.textContent=t,p.textContent=T instanceof HTMLIFrameElement?"Frame only · contents are isolated":T.classList.length?`.${[...T.classList].slice(0,2).join(".")}`:"";let i=T.parentElement;l.hidden=!i||i===document.body||i===document.documentElement,l.textContent=i?.tagName.toLowerCase()??"",l.setAttribute("aria-label",`Select parent ${l.textContent}`);let a=T,r=o;r?(r.renderPanel(f,{element:a,changed:N.get(a),collapsed:$,editText:C,begin:(e,t)=>B.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:O,commit:q,rerender:K}),a.closest("[data-komo-inspectable], [data-komo-design-tokens]")&&(z??=import("./react-props-panel-XSMDR2CY.js").then(e=>S=e).catch(e=>{throw z=null,e}),z.then(e=>{if(!P||T!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{b.textContent="React state preview · resets on refresh",te()},t);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{H(a,e.property,n),U(a,e.property),B.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),q(t,e.property)},t,r.valueFor,r.toHex);let o=e.createDesignThemePanel(a,r,te,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{P&&T===a&&K()})}function Q(){a.toggleAttribute("data-empty",k.hidden=!T),a.parentElement?.toggleAttribute("data-design-empty",P&&!T)}function Y(e,t){if(!P||!e?.isConnected)return void(r.hidden=!0);let n=e.getBoundingClientRect();n.width&&n.height?(r.hidden=!1,r.dataset.kind=t,Object.assign(r.style,{left:`${n.left}px`,top:`${n.top}px`,width:`${n.width}px`,height:`${n.height}px`})):r.hidden=!0}function W(){D||(D=requestAnimationFrame(()=>{D=0,Y(T??L,T?"selected":"hover")}))}function J(e){!(e instanceof HTMLElement)||n.host.contains(e)||(M?.element&&M.element!==e&&ne(),T=e,L=e,K(),Y(e,"selected"),te())}function G(){return"function"==typeof matchMedia&&matchMedia("(max-width:520px)").matches}function Z(e){a.toggleAttribute("data-folded",e&&G()),m.setAttribute("aria-expanded",String(!a.hasAttribute("data-folded"))),m.setAttribute("aria-label",a.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ee(e){Z(!1),G()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=a.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})})}function te(){(function(){let e=T,t=e?(N.get(e)?.size??0)+ +!!M?.hasChanges(e)+ +!!S?.hasReactPropChanges(e)||+!!S?.hasDesignTokenEdit(e):0;x.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||j.length>0||!(!e||!S?.canUndoReactProp(e)&&!S?.canUndoDesignTokenEdit(e)))})(),v.disabled=!(0!==j.length||T&&S?.canUndoReactProp(T)||T&&S?.canUndoDesignTokenEdit(T)),w.disabled=!T||!N.get(T)?.size&&!M?.hasChanges(T)&&!S?.hasReactPropChanges(T)&&!S?.hasDesignTokenEdit(T),E.disabled=!T||!N.get(T)?.size,k.disabled=!T,C.disabled=!!M?.busy||!T?.isConnected,C.textContent=M?.isEditing(T)?"Done editing":"Edit text",C.setAttribute("aria-label",M?.isEditing(T)?"Finish inline text editing":"Edit selected text inline")}function ne(e=!1){M?.finish(e),te()}function ie(e){!e&&M?.element&&ne(),window.clearTimeout(A),A=0,P=e,Q(),e?(a.hidden=!1,a.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{P&&(a.dataset.state="active")}),r.hidden=!T,K(),Z(!T),Y(T,"selected"),g.focus({preventScroll:!0})):(r.hidden=!0,a.setAttribute("aria-hidden","true"),a.dataset.state="closing","function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?(a.hidden=!0,delete a.dataset.state):A=window.setTimeout(()=>{A=0,P||(a.hidden=!0,delete a.dataset.state)},250))}new MutationObserver(()=>{let e=b.textContent??"";b.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(V),e&&(V=window.setTimeout(function e(){M?.element?V=window.setTimeout(e,2600):b.textContent=""},2600))}).observe(b,{childList:!0,characterData:!0,subtree:!0}),C.addEventListener("click",e=>{M||T&&(b.textContent="Loading inline text editor…",import("./inline-text-editor-F7B6FQQ3.js").then(t=>{M||!T||!P||(M=t.bindInlineTextTools({button:C,status:b,selected:()=>T,active:()=>P,onChange:te,onCommit(e){j.push({kind:"text",element:e})}}),M.toggle(e))}).catch(()=>{b.textContent="Inline text editing is unavailable."}))}),m.addEventListener("click",()=>Z(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>J(T?.parentElement??null)),g.addEventListener("click",()=>{M?.element&&ne(),ie(!1),n.onExit()}),v.addEventListener("click",()=>{let e=j.pop();e?"text"===e.kind?T===(M?.undo()??e.element)&&K():(X(e.element,e.property,e.before),S?.syncDesignTokenBinding(e.element,e.property),U(e.element,e.property),T===e.element&&K(),Y(T??L,T?"selected":"hover")):(T&&(S?.undoDesignTokenEdit(T),S?.undoReactProp(T),K()),b.textContent="React state preview · resets on refresh"),te(),(v.disabled?g:v).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!T)return;M?.isEditing(T)&&ne(!0);let e=N.get(T),t=M?.hasChanges(T)??!1,n=S?.hasReactPropChanges(T)??!1,i=S?.hasDesignTokenEdit(T)??!1;if(e?.size||t||n||i){t&&M?.reset(T);for(let t of e?.keys()??[])X(T,t,R.get(T)?.get(t));N.delete(T),n&&S?.resetReactProps(T),i&&S?.resetDesignTokenEdits(T);for(let e=j.length-1;e>=0;e--)j[e].element===T&&j.splice(e,1);K(),Y(T,"selected"),te(),g.focus({preventScroll:!0})}});let oe=()=>import("./design-export-BRBI7S3V.js");return E.addEventListener("click",()=>{let e=T,t=e?N.get(e):void 0;!e||!t?.size||oe().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),b.textContent="CSS copied"}catch{b.textContent=i}})}),k.addEventListener("click",()=>{let e=T;e&&(M?.isEditing(e)&&ne(),oe().then(({designProposal:t})=>n.onComment(e,t(e,N.get(e),t=>R.get(e)?.get(t)?.computed,S?.tokenBoundProperties(e),[M?.proposal(e),S?.proposedDesignChanges(e)])),()=>{b.textContent="Comment unavailable · try again"}))}),document.addEventListener("pointermove",function(e){if(!P||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||(L=t,T||Y(L,"hover"))},{capture:!0,signal:I.signal}),document.addEventListener("pointerdown",function(e){if(!P||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||M?.element&&(t===M.element||M.element.contains(t))||(M?.element&&ne(),e.preventDefault(),e.stopImmediatePropagation(),J(t))},{capture:!0,signal:I.signal}),document.addEventListener("click",function(e){!P||e.composedPath().includes(n.host)||(e.preventDefault(),e.stopImmediatePropagation(),T&&ee(T),2===e.detail&&T?.contains(e.target)&&!C.disabled&&!M?.element&&C.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:I.signal}),document.addEventListener("keydown",function(e){if(M?.handleKey(e))C.focus({preventScroll:!0});else{if(P&&!M?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(n.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),J(t),void ee(t)}P&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),ie(!1),n.onExit())}},{capture:!0,signal:I.signal}),window.addEventListener("scroll",W,{capture:!0,passive:!0,signal:I.signal}),window.addEventListener("resize",W,{passive:!0,signal:I.signal}),{setActive:ie,mountPanel(e){a.parentElement!==e&&(a.parentElement?.removeAttribute("data-design-empty"),e.append(a),Q())},get active(){return P},ready:s,destroy(){M?.element&&ne(!0),window.clearTimeout(A),window.clearTimeout(V),I.abort(),cancelAnimationFrame(D);for(let[e,t]of R)for(let[n,i]of t)X(e,n,i);M?.restoreAll(),a.remove(),r.remove(),i.remove()}}}export{n as createDesignMode};
+import{i as e}from"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";var t=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function n(n){let i=document.createElement("style");i.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--accent,#bda6ef);border-radius:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#bda6ef) 22%,transparent),0 2px 12px #0003;transition:all 80ms ease}.design-outline[data-kind=hover]{border-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__parent:hover{color:#eee;background:#161616}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__close,.design-inspector__fold{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;color:#909090}.design-inspector__close svg,.design-inspector__fold svg{width:16px;height:16px}.design-inspector__close:hover,.design-inspector__fold:hover{background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector[data-folded] .design-inspector__heading{border:0}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__heading{border:0}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__compare{display:inline-flex;flex:none;padding:2px;border-radius:7px;background:#ffffff0a}.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare{display:none}.design-inspector__compare button{height:22px;padding:0 8px;border-radius:5px;color:#9a9a9a;font:inherit;font-size:11px}.design-inspector__compare button:hover{color:#fff}.design-inspector__compare button[aria-pressed=true]{color:#fff;background:#ffffff1a}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions svg{width:16px;height:16px}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let o=null,s=import("./design-panel-BPVXFERR.js").then(e=>{i.textContent+=e.designPanelStyles,o=e},()=>{x.textContent="Design controls unavailable · try again"}),a=document.createElement("aside");a.className="design-inspector",a.setAttribute("role","dialog"),a.setAttribute("aria-label","Design mode inspector"),a.setAttribute("aria-hidden","true"),a.hidden=!0;let r=document.createElement("div");r.className="design-outline",r.setAttribute("aria-hidden","true");let d=document.createElement("div");d.className="design-inspector__heading";let l=document.createElement("button");l.type="button",l.className="design-inspector__parent",l.hidden=!0;let c=document.createElement("span");c.className="design-inspector__target";let p=document.createElement("small"),g=document.createElement("button");g.type="button",g.className="design-inspector__close",g.setAttribute("aria-label","Exit design mode"),g.append(e("close"));let u=document.createElement("button");u.type="button",u.className="design-inspector__fold",u.append(e("chevron"));let m=document.createElement("div");m.className="design-inspector__identity",m.append(l,c,p),d.append(m,u,g);let f=document.createElement("div");f.className="design-inspector__controls";let h=document.createElement("div");h.className="design-inspector__bar";let b=document.createElement("span");b.className="design-inspector__count",b.title="Preview only · resets on refresh";let x=document.createElement("p");x.className="design-inspector__status",x.setAttribute("role","status");let y=document.createElement("div");y.className="design-inspector__actions";let v=(e,t)=>{let n=document.createElement("button");return n.type="button",n.className="design-inspector__tool",n.dataset.tip=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},_=v("Undo",t("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),w=v("Reset",t("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),E=v("Copy CSS","");E.append(e("copy"));let k=document.createElement("button");k.type="button",k.textContent="Comment";let C=document.createElement("button");C.type="button",C.className="design-text-edit",C.title="Edit text",C.textContent="Edit text",C.setAttribute("aria-label","Edit selected text inline"),y.append(_,w,E,k);let P=document.createElement("div");P.className="design-inspector__compare",P.setAttribute("role","group"),P.setAttribute("aria-label","Compare with the page");let A=["Before","After"].map((e,t)=>{let n=document.createElement("button");return n.type="button",n.textContent=e,n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>ee(!t)),P.append(n),n});h.append(b,P,x,y);let T=document.createElement("div");T.className="morphing-menu__tooltip sidebar-tooltip",T.setAttribute("aria-hidden","true");let L=0,M=()=>{window.clearTimeout(L),delete T.dataset.open},z=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return M();window.clearTimeout(L),L=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();T.textContent=t.dataset.tip??"";let n=T.offsetWidth/2;T.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,T.style.top=e.top-8-T.offsetHeight+"px",T.dataset.open="true"},T.dataset.open?0:400)};h.addEventListener("pointerover",z),h.addEventListener("focusin",z);for(let e of["pointerleave","pointerdown","focusout"])h.addEventListener(e,M);a.append(d,f,h),n.root.append(i,r,T),(n.panelRoot??n.root).append(a);let S=!1,D=0,R=null,N=null,B=null,$=0,I=0,j=null,F="",H=null,V=null,K=new Map,O=new Map,U=new WeakMap,W=new WeakMap,X=new AbortController,q=new Set,Y=[];function Q(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=K.get(e);o||K.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function Z(e,t){let n=O.get(e);n||O.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(K.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||O.delete(e),ae(R,"selected")}let G=0;new MutationObserver(()=>{let e=x.textContent??"";x.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(G),e&&(G=window.setTimeout(function e(){B?.element?G=window.setTimeout(e,2600):x.textContent=""},2600))}).observe(x,{childList:!0,characterData:!0,subtree:!0});let J=!1;function ee(e){if(e===J)return;e&&B?.element&&me(),J=e;let t=!("function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches);for(let[n,i]of O){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=K.get(n)?.get(t);e?te(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}B?.showBefore(e),H?.showDesignBefore(e),A.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),a.toggleAttribute("data-before",e),ue()}function te(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function ne(e,t,n){R&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(Q(R,t),H?.noteDesignTokenOverride(R,t,n),R.style.setProperty(t,n,K.get(R)?.get(t)?.priority),Z(R,t),ue()))}function ie(e,t,n=!0){if(!R)return;let i={value:R.style.getPropertyValue(t),priority:R.style.getPropertyPriority(t)},o=W.get(e),s=o?.before??U.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Y.splice(Y.indexOf(o),1),W.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:R,property:t,before:s,after:i};Y.push(n),W.set(e,n)}n&&(U.set(e,i),W.delete(e)),ue()}function oe(){if(f.replaceChildren(),se(),!R){let t=document.createElement("div");t.className="design-inspector__empty";let i=document.createElement("strong");i.textContent="Select an element";let o=document.createElement("ul"),s=(...e)=>{let t=document.createElement("li");e.forEach((e,n)=>{n%2==0?t.append(e):t.append(Object.assign(document.createElement("kbd"),{textContent:e}))}),o.append(t)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),n.exitKey?s("","Esc"," or ",n.exitKey," to exit"):s("","Esc"," to exit"),t.append(e("design"),i,o),f.append(t),c.textContent="Select an element",p.textContent="",void(l.hidden=!0)}let t=`${R.tagName.toLowerCase()}${R.id?`#${R.id}`:""}`;c.textContent=t,p.textContent=R instanceof HTMLIFrameElement?"Frame only · contents are isolated":R.classList.length?`.${[...R.classList].slice(0,2).join(".")}`:"";let i=R.parentElement;l.hidden=!i||i===document.body||i===document.documentElement,l.textContent=i?.tagName.toLowerCase()??"",l.setAttribute("aria-label",`Select parent ${l.textContent}`);let a=R,r=o;r?(r.renderPanel(f,{element:a,changed:O.get(a),collapsed:q,editText:C,begin:(e,t)=>U.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:ne,commit:ie,rerender:oe}),a.closest("[data-komo-inspectable], [data-komo-design-tokens]")&&(V??=import("./react-props-panel-XQ4T3RLV.js").then(e=>H=e).catch(e=>{throw V=null,e}),V.then(e=>{if(!S||R!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{x.textContent="React state preview · resets on refresh",ue()},t,le);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{Q(a,e.property,n),Z(a,e.property),U.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),ie(t,e.property)},t,r.valueFor,r.toHex);let o=e.createDesignThemePanel(a,r,ue,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{S&&R===a&&oe()})}function se(){a.toggleAttribute("data-empty",k.hidden=!R),a.parentElement?.toggleAttribute("data-design-empty",S&&!R)}function ae(e,t,i=!1){if(!S||!e?.isConnected)return void(r.hidden=!0);let o=e.getBoundingClientRect();if(o.width&&o.height){if(r.hidden=!1,r.dataset.kind=t,i&&(e!==j||t!==F)){j=e,F=t,window.clearTimeout(I);let i=a.getBoundingClientRect(),s=e=>o.left<e+i.width&&o.right>e&&o.top<i.bottom&&o.bottom>i.top;n.flip&&i.width&&s(i.left)&&!s(document.documentElement.clientWidth-i.right)&&(I=window.setTimeout(n.flip,"hover"===t?350:0))}Object.assign(r.style,{left:`${o.left}px`,top:`${o.top}px`,width:`${o.width}px`,height:`${o.height}px`})}else r.hidden=!0}function re(){$||($=requestAnimationFrame(()=>{$=0,ae(R??N,R?"selected":"hover")}))}let de="function"==typeof ResizeObserver?new ResizeObserver(re):null;function le(e){!(e instanceof HTMLElement)||n.host.contains(e)||(B?.element&&B.element!==e&&me(),de?.disconnect(),de?.observe(e),R=e,N=e,oe(),ae(e,"selected",!0),ue())}function ce(){return"function"==typeof matchMedia&&matchMedia("(max-width:520px)").matches}function pe(e){a.toggleAttribute("data-folded",e&&ce()),u.setAttribute("aria-expanded",String(!a.hasAttribute("data-folded"))),u.setAttribute("aria-label",a.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ge(e){pe(!1),ce()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=a.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})})}function ue(){re(),function(){let e=R,t=e?(O.get(e)?.size??0)+ +!!B?.hasChanges(e)+ +!!H?.hasReactPropChanges(e)||+!!H?.hasDesignTokenEdit(e):0;b.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||Y.length>0||!(!e||!H?.canUndoReactProp(e)&&!H?.canUndoDesignTokenEdit(e))),P.hidden=!t&&!J}(),_.disabled=!(0!==Y.length||R&&H?.canUndoReactProp(R)||R&&H?.canUndoDesignTokenEdit(R)),w.disabled=!R||!O.get(R)?.size&&!B?.hasChanges(R)&&!H?.hasReactPropChanges(R)&&!H?.hasDesignTokenEdit(R),E.disabled=!R||!O.get(R)?.size,k.disabled=!R,C.disabled=!!B?.busy||!R?.isConnected,C.textContent=B?.isEditing(R)?"Done editing":"Edit text",C.setAttribute("aria-label",B?.isEditing(R)?"Finish inline text editing":"Edit selected text inline")}function me(e=!1){B?.finish(e),ue()}function fe(e){e||ee(!1),!e&&B?.element&&me(),window.clearTimeout(D),D=0,S=e,se(),e?(a.hidden=!1,a.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{S&&(a.dataset.state="active")}),r.hidden=!R,oe(),pe(!R),ae(R,"selected"),g.focus({preventScroll:!0})):(r.hidden=!0,a.setAttribute("aria-hidden","true"),a.dataset.state="closing","function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?(a.hidden=!0,delete a.dataset.state):D=window.setTimeout(()=>{D=0,S||(a.hidden=!0,delete a.dataset.state)},250))}C.addEventListener("click",e=>{B||R&&(x.textContent="Loading inline text editor…",import("./inline-text-editor-SWPVB35B.js").then(t=>{B||!R||!S||(B=t.bindInlineTextTools({button:C,status:x,selected:()=>R,active:()=>S,onChange:ue,onCommit(e){Y.push({kind:"text",element:e})}}),B.toggle(e))}).catch(()=>{x.textContent="Inline text editing is unavailable."}))}),u.addEventListener("click",()=>pe(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>le(R?.parentElement??null)),g.addEventListener("click",()=>{B?.element&&me(),fe(!1),n.onExit()}),_.addEventListener("click",()=>{let e=Y.pop();e?"text"===e.kind?R===(B?.undo()??e.element)&&oe():(te(e.element,e.property,e.before),H?.syncDesignTokenBinding(e.element,e.property),Z(e.element,e.property),R===e.element&&oe(),ae(R??N,R?"selected":"hover")):(R&&(H?.undoDesignTokenEdit(R),H?.undoReactProp(R),oe()),x.textContent="React state preview · resets on refresh"),ue(),(_.disabled?g:_).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!R)return;B?.isEditing(R)&&me(!0);let e=O.get(R),t=B?.hasChanges(R)??!1,n=H?.hasReactPropChanges(R)??!1,i=H?.hasDesignTokenEdit(R)??!1;if(e?.size||t||n||i){t&&B?.reset(R);for(let t of e?.keys()??[])te(R,t,K.get(R)?.get(t));O.delete(R),n&&H?.resetReactProps(R),i&&H?.resetDesignTokenEdits(R);for(let e=Y.length-1;e>=0;e--)Y[e].element===R&&Y.splice(e,1);oe(),ae(R,"selected"),ue(),g.focus({preventScroll:!0})}});let he=()=>import("./design-export-BRBI7S3V.js");E.addEventListener("click",()=>{let e=R,t=e?O.get(e):void 0;!e||!t?.size||he().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),x.textContent="CSS copied"}catch{x.textContent=i}})}),k.addEventListener("click",()=>{let e=R;e&&(B?.isEditing(e)&&me(),he().then(({designProposal:t})=>n.onComment(e,t(e,O.get(e),t=>K.get(e)?.get(t)?.computed,H?.tokenBoundProperties(e),[B?.proposal(e),H?.proposedDesignChanges(e)])),()=>{x.textContent="Comment unavailable · try again"}))});let be=()=>ee(!1);for(let e of[f,y,C])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,be,!0);return document.addEventListener("pointermove",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||(N=t,R||ae(N,"hover",!0))},{capture:!0,signal:X.signal}),document.addEventListener("pointerdown",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||B?.element&&(t===B.element||B.element.contains(t))||(B?.element&&me(),e.preventDefault(),e.stopImmediatePropagation(),le(t))},{capture:!0,signal:X.signal}),document.addEventListener("click",function(e){!S||e.composedPath().includes(n.host)||(e.preventDefault(),e.stopImmediatePropagation(),R&&ge(R),2===e.detail&&R?.contains(e.target)&&!C.disabled&&!B?.element&&C.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:X.signal}),document.addEventListener("keydown",function(e){if(B?.handleKey(e))return void C.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0];if(S&&!P.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(i instanceof HTMLElement&&(i.isContentEditable||i.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void ee("b"===t?!J:"arrowleft"===t);if(S&&!B?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(n.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),le(t),void ge(t)}S&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),fe(!1),n.onExit())},{capture:!0,signal:X.signal}),window.addEventListener("scroll",re,{capture:!0,passive:!0,signal:X.signal}),window.addEventListener("resize",re,{passive:!0,signal:X.signal}),{setActive:fe,mountPanel(e){a.parentElement!==e&&(a.parentElement?.removeAttribute("data-design-empty"),e.append(a),se())},get active(){return S},ready:s,destroy(){ee(!1),B?.element&&me(!0),window.clearTimeout(D),window.clearTimeout(G),window.clearTimeout(I),de?.disconnect(),X.abort(),cancelAnimationFrame($);for(let[e,t]of K)for(let[n,i]of t)te(e,n,i);B?.restoreAll(),a.remove(),r.remove(),T.remove(),i.remove()}}}export{n as createDesignMode};

package/dist/design-system.d.ts

@@ -0,0 +1,150 @@
+/** DTCG-style token types. Composite types are listed but previewed only as a whole. */
+export type DesignTokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "lineHeight" | "letterSpacing" | "shadow" | "typography" | "duration" | "number" | "other";
+/** One token, with aliases already resolved by the adapter. */
+export interface DesignToken {
+    /** Stable dot path, e.g. "color.text.primary". This is what proposals record. */
+    path: string;
+    type: DesignTokenType;
+    /** Resolved value for the theme passed to `list()`, e.g. "#1f1f1f" or "8px". */
+    value: string;
+    /** CSS properties this token may set on an element, e.g. ["color"]. Used to suggest tokens. */
+    properties?: string[];
+    /** Display name; defaults to the path. */
+    label?: string;
+    /** Group heading in the picker, e.g. "Text", "Background", "Spacing". */
+    group?: string;
+    description?: string;
+    /**
+     * The adapter's own handle for the token: a CSS variable ("--color-brand"), a
+     * utility class ("text-primary"), etc. Shown to reviewers and agents.
+     */
+    ref?: string;
+    /** Interaction states the token carries itself, e.g. ["hover", "active", "disabled"]. */
+    states?: string[];
+}
+/** A property that uses a token. */
+export interface TokenRef {
+    path: string;
+}
+/** A property whose value doesn't come from a token; `value` is what the page uses. */
+export interface OffToken {
+    offToken: string;
+}
+export type TokenUsage = TokenRef | OffToken;
+export interface TokenAdapter {
+    /** Stable id recorded on proposals, e.g. "css-variables" or "tailwind". */
+    id: string;
+    /** Every token, with values for `theme` (the current theme state when omitted). */
+    list(theme?: ThemeState): DesignToken[] | Promise<DesignToken[]>;
+    /**
+     * Which token each CSS property of `element` uses, or its off-token value.
+     * Return only properties the app can vouch for; komo shows nothing for the rest.
+     */
+    resolve(element: Element): Record<string, TokenUsage> | Promise<Record<string, TokenUsage>>;
+    /**
+     * Preview `token` for `property` on `element` until the returned undo runs,
+     * e.g. by swapping a utility class or setting a CSS variable. Without it,
+     * komo previews by setting the token's resolved value inline.
+     */
+    preview?(element: Element, property: string, token: DesignToken): () => void;
+    /**
+     * How a developer or agent should apply the change in source, e.g.
+     * 'Replace class "text-secondary" with "text-primary"'. Recorded on proposals.
+     */
+    describe?(element: Element, property: string, from: TokenUsage, to: DesignToken): string;
+}
+/** Theme state: axis id → option id, e.g. { mode: "dark", product: "track" }. */
+export type ThemeState = Record<string, string>;
+export interface ThemeOption {
+    id: string;
+    label?: string;
+}
+/** One independent theme dimension reviewers can flip, such as light/dark. */
+export interface ThemeAxis {
+    id: string;
+    label?: string;
+    options: ThemeOption[];
+    /** The option currently applied to the page. */
+    current(): string;
+    /** Switch the page to `optionId`. komo restores the original option when Design mode closes. */
+    apply(optionId: string): void;
+}
+export type ComponentPropValue = string | number | boolean | null;
+/** What the app knows about the component that renders an element. */
+export interface ComponentIdentity {
+    /** Display name, e.g. "Button". Prefer the design-system or Figma Code Connect name. */
+    name: string;
+    /** Props worth showing, e.g. { variant: "secondary", size: "md" }. */
+    props?: Record<string, ComponentPropValue>;
+    /** Source location, e.g. "src/components/Button.tsx:12". */
+    source?: string;
+    /** The component's root element; may be an ancestor of the picked element. */
+    element: Element;
+}
+export interface ComponentAdapter {
+    /**
+     * The nearest component for `element`, or null. Apps may use any strategy,
+     * including reading their framework's internals; komo itself never does.
+     * Works alongside `useKomoInspectable`, which still provides editable props.
+     */
+    identify(element: Element): ComponentIdentity | null;
+}
+export interface DesignSystem {
+    tokens?: TokenAdapter;
+    themes?: ThemeAxis[];
+    components?: ComponentAdapter;
+}
+/**
+ * Machine-readable record of a Design mode proposal, versioned so the CLI and
+ * agents can apply it. Comments carry it alongside the human-readable text.
+ */
+export interface DesignEdit {
+    komo: "design-edit";
+    version: 1;
+    target: {
+        /** CSS selector for the edited element at proposal time. */
+        selector: string;
+        component?: Omit<ComponentIdentity, "element">;
+    };
+    /** Theme state the proposal was made in. */
+    theme?: ThemeState;
+    /** Token adapter id, when token changes are present. */
+    tokens?: string;
+    changes: DesignEditChange[];
+}
+export type DesignEditChange = 
+/** Use a different token for a property. `apply` is the adapter's `describe()` text. */
+{
+    kind: "token";
+    property: string;
+    from: TokenUsage;
+    to: TokenRef;
+    apply?: string;
+}
+/** Change a shared token's value for everyone using it. */
+ | {
+    kind: "token-value";
+    path: string;
+    from: string;
+    to: string;
+}
+/** Change a component prop (from `useKomoInspectable` or the component adapter). */
+ | {
+    kind: "prop";
+    name: string;
+    from: ComponentPropValue | undefined;
+    to: ComponentPropValue | undefined;
+}
+/** Change text content. */
+ | {
+    kind: "text";
+    from: string;
+    to: string;
+}
+/** Raw CSS fallback when no token or prop applies. */
+ | {
+    kind: "css";
+    property: string;
+    from: string;
+    to: string;
+};

package/dist/design-tokens.d.ts

@@ -50,6 +50,8 @@ export declare function tokenImpactCount(source: RegisteredDesignTokenSource, to
  * extends the last undo step for the same token instead of adding one per keystroke.
  */
 export declare function previewThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken, value: string, merge?: boolean): boolean;
+/** Show shared theme values as the page had them, or put the edits back. */
+export declare function showThemeBefore(on: boolean): void;
 /** Return one shared token to the page's value; like Reset, it leaves no undo step. */
 export declare function resetThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken): void;
 export declare function applyTokenToElement(source: RegisteredDesignTokenSource, element: HTMLElement, token: KomoDesignToken, property: string, options?: {

package/dist/dom.d.ts

@@ -1,6 +1,16 @@
 import type { Identity } from "./types.js";
 import { iconMarkup as icons } from "./icon-markup.js";
 export { icons };
+export declare const editable: (node?: EventTarget) => boolean;
+/**
+ * Events komo stops at its shadow host (isolateEvents), so host shortcut
+ * libraries and modal "outside interaction" listeners never see komo's UI.
+ * Key events are stopped only while typing in a komo field.
+ */
+export declare const isolatedEvents: string[];
+export declare const isolated: (event: Event, root: Node) => boolean;
+/** Listen on document, plus komo's shadow root for the events stopped at its host. */
+export declare function onPage<E extends Event>(node: Node, type: string, listener: (event: E) => void, options?: AddEventListenerOptions): void;
 export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K];
 export declare function icon(name: keyof typeof icons): SVGSVGElement;
 export declare function button(label: string, action: () => void, className?: string, glyph?: keyof typeof icons): HTMLButtonElement;

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-ZUNTYWJF.js";import"./chunk-RPKLGTEU.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-E5X4IQJ2.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
+import{b as o,c as s}from"./chunk-5LHGJFWQ.js";import"./chunk-Q7WSWLMV.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};

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

@@ -0,0 +1 @@
+import"./chunk-I7AUKTXE.js";var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function r(){let e=new Map,t=new Map,r=[],a=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),r.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(a){let o=e.get(a);void 0!==o&&n(a,o,t.get(a)),e.delete(a);for(let e=r.length-1;e>=0;e--)r[e].element===a&&r.splice(e,1)},proposal(t){let n=e.get(t),r=t.textContent??"";return void 0!==n&&n!==r?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(r)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[r,a]of e)n(r,a,t.get(r))},showBefore(r){if(r)for(let[r,o]of e){let e=t.get(r);a.set(r,[r.textContent??"",e?.map(([e])=>[e,e.data])]),n(r,o,e)}else for(let[e,[t,r]]of a)n(e,t,r);r||a.clear()},undo(){let t=r.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function a(e){let t=r(),n=null,a=!1;function o(t=!1){let r=n;r&&(n=null,r.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||a||n)return;let s=i(l);if(s)e.status.textContent=s;else{a=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-XQ4T3RLV.js"),onFinish(n,r){r||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on refresh"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on refresh")}});a?e.active()&&e.selected()===l?(n=a,r&&function(e,t,n){let r=document.caretPositionFromPoint?.(t,n),a=r?document.createRange():document.caretRangeFromPoint?.(t,n);if(r&&a&&a.setStart(r.offsetNode,r.offset),!a||!e.contains(a.startContainer))return;a.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(a)}(l,r.clientX,r.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on refresh":"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,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,r){t.reconcile(n,r),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=a(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(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 l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),r=n?.rangeCount?n.getRangeAt(0):null;return r&&e.contains(r.commonAncestorContainer)?r.startContainer===e?Math.min([...e.childNodes].slice(0,r.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):r.startContainer.nodeType===Node.TEXT_NODE?Math.min(r.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,r=document.getSelection();if(!n||!r)return;let a=document.createRange();a.setStart(n,Math.min(t,n.textContent?.length??0)),a.collapse(!0),r.removeAllRanges(),r.addRange(a)}async function d(r,a){if(!l(r))return null;let o=null,i=null;if(r.dataset.komoTextProp&&(o=await a.loadReactBridge(),i=o.beginReactTextEdit(r),!i))return null;let d=i?.before??(r.textContent??"").slice(0,500),u=!i&&r.childElementCount>0,f=u?t(r).map(e=>[e,e.data]):void 0,g=r.getAttribute("role"),p=r.getAttribute("aria-label"),m=r.getAttribute("aria-multiline"),h=r.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(r,v)}),T=()=>{u||(r.childElementCount&&(r.textContent=r.textContent??""),(r.textContent??"").length>500&&(r.textContent=(r.textContent??"").slice(0,500)),i&&o&&(v=s(r),o.previewReactTextEdit(r,i.propName,r.textContent??"")||(r.textContent=d)))},E=(t,n)=>{let a=t.startContainer;if(a!==t.endContainer||!(a instanceof Text)||!r.contains(a)||a.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(r.textContent??"").length+o));a.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(a,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};r.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),r.addEventListener("input",T,{signal:x.signal}),i&&b.observe(r,{childList:!0,characterData:!0,subtree:!0}),r.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let r=e.textContent??"",a=t.slice(0,Math.max(0,500-r.length));e.textContent=r.slice(0,n)+a+r.slice(n),c(e,n+a.length)}(r,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),r.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),r.setAttribute("contenteditable","true"),r.setAttribute("role","textbox"),r.setAttribute("aria-label","Inline text preview"),r.setAttribute("aria-multiline","false"),r.dataset.komoInlineEditing="true",r.spellcheck=!1,r.focus({preventScroll:!0});let R=document.getSelection(),y=document.createRange();return y.selectNodeContents(r),y.collapse(!1),R?.removeAllRanges(),R?.addRange(y),{element:r,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&r.childElementCount&&(r.textContent=r.textContent??"");let t=(r.textContent??"").slice(0,500);(function(){r.removeAttribute("contenteditable"),r.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",g],["aria-label",p],["aria-multiline",m],["spellcheck",h]])null===t?r.removeAttribute(e):r.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(r,i.propName,d),n(r,d,f)):i&&o&&o.finishReactTextEdit(r,i.propName,d,t),a.onFinish({element:r,before:d,after:t,nodes:f,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,a as createInlineTextTools,r as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};

package/dist/inline-text-editor.d.ts

@@ -50,6 +50,8 @@ export interface InlineTextTools {
     reconcile(element: HTMLElement, text: string): void;
     proposal(element: HTMLElement): string | undefined;
     restoreAll(): void;
+    /** Show the page's original text, or put the edits back. */
+    showBefore(on: boolean): void;
 }
 export interface TextPreviewHistory {
     record(result: InlineTextEditResult): void;
@@ -59,6 +61,7 @@ export interface TextPreviewHistory {
     reset(element: HTMLElement): void;
     proposal(element: HTMLElement): string | undefined;
     restoreAll(): void;
+    showBefore(on: boolean): void;
     undo(): HTMLElement | null;
 }
 export declare function createTextPreviewHistory(): TextPreviewHistory;