@hazem3500/komo 0.9.6 → 0.9.7

package/dist/react-props-panel-LDKSPP3X.js

@@ -0,0 +1 @@
+import{a as e,d as t,e as n,g as o,h as i,i as r,j as a,k as s,l,m as d,n as p,o as c,p as u,q as f,r as g,s as m,t as h,u as b,v as k,w as v,x as y,y as x}from"./chunk-JXIYWNFL.js";import"./chunk-I7AUKTXE.js";var w=new Map,E=new WeakMap,$=!1;function C(e){let t={};for(let n of e?.themes??[])try{t[n.id]=n.current()}catch{}return t}function S(e,t={}){let n=E.get(e);n||E.set(e,n=new Map);let o=JSON.stringify(Object.entries(t).sort()),i=n.get(o);return i||(i=Promise.resolve().then(()=>e.list(Object.keys(t).length?t:void 0)).then(e=>Array.isArray(e)?e.filter(e=>e&&"string"==typeof e.path):[]),i.catch(()=>n.delete(o)),n.set(o,i)),i}function P(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function A(e){let t=e.trim().toLowerCase().replace(/\s+/g,""),n=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(t)?.[1];if(!n)return t.replace(/^rgba\((\d+,\d+,\d+),1\)$/,"rgb($1)");let o=n.length<5?[...n].map(e=>e+e).join(""):n,[i,r,a,s=255]=o.match(/../g).map(e=>parseInt(e,16));return 255===s?`rgb(${i},${r},${a})`:`rgba(${i},${r},${a},${+(s/255).toFixed(3)})`}function N(e,t){let n=A(t);return n?e.find(e=>("color"===e.type||"dimension"===e.type)&&A(e.value)===n):void 0}function M(e){return e.label||e.path}function T(e){return[e.path,e.ref,e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function L(){let e=document.createElement("span");return e.className="design-token-off",e.setAttribute("role","img"),e}function j(e,t,n){e.title=`Not from a token · ${t||"unset"}${n?` · matches ${M(n)}`:""}`,e.setAttribute("aria-label",e.title)}function z(e,t,n,o){try{if(e.preview)return e.preview(t,n,o)??(()=>{})}catch{return()=>{}}return function(e,t,n){let o=e.style;if(!o)return()=>{};let i=o.getPropertyValue(t),r=o.getPropertyPriority(t);return o.setProperty(t,n,r),()=>{i?o.setProperty(t,i,r):o.removeProperty(t)}}(t,n,o.value)}function q(e){let t=w.get(e);t?.pop()?.undo(),t&&!t.length&&w.delete(e)}function O(e){return!!w.get(e)?.length}function R(e){for(;w.has(e);)q(e)}function D(e){return[...new Set(w.get(e)?.map(e=>e.property))]}function V(e,t){try{let n=t.adapter.describe?.(e,t.property,t.from,t.token);return n?String(n).replace(/\s+/g," ").replace(/→/g,"->").trim().slice(0,300):void 0}catch{return}}function B(e){let t=[],n=new Set;for(let o of function(e){let t=new Map;for(let n of w.get(e)??[])t.set(n.property,n);return[...t.values()].filter(e=>!("path"in e.from)||e.from.path!==e.token.path)}(e)){n.add(o.adapter.id);let i="path"in o.from?`${o.fromToken?.value?`${o.fromToken.value} `:""}[${o.from.path}]`:o.from.offToken||"(unset)";t.push(`Element ${o.property}: ${i} → ${o.token.value} [${o.token.path}]`);let r=V(e,o);r&&t.push(`Apply: ${r}`)}if(t.length)return["Proposed design-token changes (preview only)",...t,`Token adapter: ${[...n].join(", ")}`].join("\n")}var H=new Map,I=new Map,U=new WeakSet,_=new WeakMap;function F(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var W=new Map;function J(e){if(e)for(let[e,n]of H){let o=t(e);o&&(W.set(e,o.props),o.setProps({...o.props,...Object.fromEntries(n)}))}else for(let[e,n]of W)t(e)?.setProps(n);e||W.clear(),s(e),function(e){if(e!==$){$=e;for(let[t,n]of w)if(e)for(let e of[...n].reverse())e.undo();else for(let e of n)e.undo=z(e.adapter,t,e.property,e.token)}}(e)}function K(e){return!!H.get(e)?.size}function X(e){let n=t(e),o=n?.definition.textProp,i=n?.definition.props.find(e=>e.name===o);if(!n||!o||"string"!==i?.kind)return null;let r=n.props[o];if("string"!=typeof r||r.length>500)return null;let a=H.get(e);return a||H.set(e,a=new Map),a.has(o)||a.set(o,r),{propName:o,before:r}}function Y(n,o,i){let r=t(n),a=r?.definition.props.find(e=>e.name===o);return!(!r||r.definition.textProp!==o||"string"!==a?.kind||i.length>500||!e(a,i))&&(r.setProps({...r.props,[o]:i}),!0)}function G(e,t,n,o){if(n===o){let o=H.get(e);return void(o?.get(t)===n&&!(I.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||H.delete(e)))}let i=I.get(e);i||I.set(e,i=[]),i.push({propName:t,before:n,after:o})}function Q(e,t,n){Y(e,t,n);let o=H.get(e);o?.get(t)===n&&!(I.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||H.delete(e))}function Z(e){return!!e&&!!I.get(e)?.length}function ee(e){let n=H.get(e),i=t(e);if(!n?.size||!i)return;let r=o(e),a=[...n].map(([e,t])=>{let n=i.definition.props.find(t=>t.name===e)?.styleProperty,o=i.props[e],a=n&&"string"==typeof o?r?.tokens.find(e=>e.properties.includes(n)&&o===`var(${e.cssVariable})`):void 0;return`- ${e}: ${F(t)} → ${F(o)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${i.definition.name}`,`Source: ${i.definition.source}:${i.definition.line}`,...a,"Preview values use the app's React state callback; Komo does not write source files."].join("\n")}function te(e,o){if(t(e))return null;let i;try{i=o?.components?.identify(e)}catch{}let r=n(e);return i?.name&&(!r||r.root!==i.element&&r.root.contains(i.element))?i:null}var ne=e=>String(e).replace(/\s+/g," ").trim();function oe(e,o){let i=Object.entries(C(o)).map(([e,t])=>`${ne(e)}=${ne(t)}`).join(", "),r=te(e,o),a=t(e),s=a?{root:e,component:a}:r?void 0:n(e);if(s){let{definition:e,props:t}=s.component;r={name:e.name,source:`${e.source}:${e.line}`,props:{...t,...Object.fromEntries(H.get(s.root)??[])}}}let l=Object.entries(r?.props??{}).filter(([,e])=>null===e||["boolean","number"].includes(typeof e)||"string"==typeof e&&e.length<=80).slice(0,12).map(([e,t])=>`${ne(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[i&&`Theme: ${i}`,r?.name&&`Component: ${ne(r.name)}${r.source?` (${ne(r.source)})`:""}`,l.length&&`Props: ${l.join(", ")}`].filter(e=>!!e)}function ie(e){return[ee(e),x(e),B(e)].filter(e=>!!e).join("\n\n")||void 0}function re(e,n,o){_.get(e)?.abort();let i=new AbortController;_.set(e,i),e.addEventListener("click",e=>{let i=n();if(!i)return;let r=x(i)||O(i);!t(i)&&!r||(e.stopImmediatePropagation(),o(i,ie(i)))},{capture:!0,signal:i.signal})}function ae(e){return b(e)}function se(e){return h(e)||O(e)}function le(e){k(e)}function de(e){v(e),R(e)}function pe(e){if(!e||U.has(e))return;let t=document.createElement("style");t.textContent=".design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-inside{padding:10px 12px}.design-react-inside button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-react-inside button:hover{text-decoration:underline}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background-color:#ffffff0a;color:#f1efeb;font:inherit;font-size:11px}.design-react-field.design-field>:is(input,select):focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-react-field.design-field>select{padding-right:20px}.design-react-field input[type=checkbox]{justify-self:end;width:14px;height:14px;accent-color:#bda6ef}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field .design-token-binding{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:4px;color:#77736f;font-size:10px}.design-react-field .design-token-binding select{min-width:0;height:24px;border:0;border-radius:6px;appearance:none;background:#ffffff0a url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E\") right 6px center/8px no-repeat;color:#e9e6e1;padding:0 18px 0 6px;font:inherit;font-size:10px;cursor:pointer}.design-react-field .design-token-binding[data-mode=token] select{background-color:#bda6ef24;color:#e6dcfb}.design-token-binding__state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.design-field>.design-token-binding{display:contents}.design-field:has(>.design-token-binding)>input[data-property]{padding-right:28px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{position:absolute;top:4px;right:4px;width:20px;height:20px;box-sizing:border-box;border-radius:5px}.design-token-icon{display:grid;place-items:center;color:#77736f;opacity:0;pointer-events:none;transition:opacity .12s}.design-token-icon::before{content:'';width:6px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;rotate:45deg}.design-field:is(:hover,:focus-within) .design-token-icon{opacity:1}.design-field>.design-token-binding select{margin:0;padding:0;border:0;opacity:0;cursor:pointer;appearance:none}.design-field>.design-token-binding select:hover+.design-token-icon,.design-field:has(.design-token-binding select:hover) .design-token-icon{background:#ffffff14;color:#e9e6e1}.design-field:has(.design-token-binding select:focus-visible) :is(.design-token-icon,.design-token-chip){outline:2px solid #bda6ef;outline-offset:1px;opacity:1}.design-field[data-token-mode=override] .design-token-icon{opacity:1;color:#e7c27d}.design-token-chip,.design-token-detach{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected])>[data-property]{visibility:hidden}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{position:absolute;inset:4px 28px 4px var(--lead,4px);display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:4px;background:#bda6ef1f;color:#e6dcfb;font-size:11px;white-space:nowrap;overflow:hidden;pointer-events:none}.design-token-chip::before{content:'';flex:none;width:5px;height:5px;border:1.2px solid #c8b5f4;border-radius:1px;rotate:45deg}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:var(--lead,4px);right:28px;width:auto}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-icon{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-detach{display:grid;place-items:center;color:#898680}.design-token-detach:hover{background:#ffffff14;color:#f1efeb}.design-token-detach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-theme-group .design-react-source{padding:0 0 6px}.design-theme-heading{display:block;padding:8px 0 2px;color:#77736f;font-size:10px;text-transform:capitalize}.design-theme-token{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:6px;margin-top:4px}.design-theme-token>span{overflow:hidden;color:#898680;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.design-theme-token[data-changed]>span{color:#e6dcfb}.design-theme-token[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-8px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-theme-reset{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#77736f;cursor:pointer}.design-theme-reset:disabled{visibility:hidden}.design-theme-reset:hover{background:#ffffff14;color:#f1efeb}.design-theme-reset svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-token-off{position:absolute;top:8px;right:24px;display:grid;place-items:center;width:12px;height:12px}.design-token-off::before{content:'';width:4px;height:4px;border-radius:50%;background:#e7c27d;opacity:.7}.design-token-off[hidden]{display:none}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>input[data-property]{padding-right:38px}.design-theme-switch{padding:6px 12px 8px}.design-theme-switch .design-react-field>span{text-transform:capitalize}.design-theme-options{display:flex;min-width:0;padding:2px;border-radius:6px;background:#ffffff0a}.design-theme-options button{flex:1;min-width:0;height:24px;padding:0 6px;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.design-theme-options button:hover{color:#f1efeb}.design-theme-options button[aria-pressed=true]{background:#ffffff1a;color:#f1efeb}.design-theme-options button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}@media (max-width:520px){.design-theme-options button{height:30px}.design-react-field.design-field>:is(input,select){height:34px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{top:7px}.design-token-off{top:11px}}",e.append(t),U.add(e)}function ce(e,t,n,r){let a=o(e);if(!a)return null;let s=m(a,t);if(!s.length)return null;pe(r);let l=document.createElement("span");l.className="design-token-binding",l.setAttribute("data-mode","custom");let c=document.createElement("span");c.className="design-token-icon",c.setAttribute("aria-hidden","true");let h=document.createElement("span");h.className="design-token-chip",h.setAttribute("aria-hidden","true");let b=document.createElement("button");b.type="button",b.className="design-token-detach",b.title="Detach token",b.setAttribute("aria-label",`Detach token from ${t}`),b.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let k=document.createElement("select");k.setAttribute("aria-label",`Style token for ${t}`);let v=document.createElement("small");v.className="design-token-binding__state",v.setAttribute("aria-live","polite");let y=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;v.id=y,k.setAttribute("aria-describedby",y);let x=document.createElement("option");x.value="custom",x.textContent="Custom value",k.append(x);for(let e of s){let t=document.createElement("option"),n=i(a,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,k.append(t)}let w=L(),E=()=>{let n=u(a,e,t),o=n?null:f(a,e,t),r="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,d=r??o?.token;k.value=d?.path??"custom",h.textContent=d?.path??"";let p=n?.declaredPath,c=r?"token":o?"connected":p?"override":"custom";if(l.dataset.mode=c,l.parentElement?.setAttribute("data-token-mode",c),v.textContent="token"===c?p&&p!==r?.path?`Rebound from ${p} · preview`:`Linked to ${r?.path} · preview`:"connected"===c?"Connected "+("inline"===o?.origin?"inline":"from stylesheet"):"override"===c?`Custom override · was ${p}`:"",k.title=v.textContent||"Choose a token",w.hidden="custom"!==c,"custom"===c){let n=getComputedStyle(e).getPropertyValue(t).trim();j(w,n,N(s.map(e=>({path:e.path,type:e.type,value:i(a,e)})),n))}},$=new MutationObserver(E);$.observe(e,{attributes:!0,attributeFilter:["style"]});let C=new MutationObserver(()=>{l.isConnected||($.disconnect(),C.disconnect())});return C.observe(l.ownerDocument,{childList:!0,subtree:!0}),k.addEventListener("change",()=>{let o=e.style.getPropertyValue(t),i=s.find(e=>e.path===k.value),r=u(a,e,t);if(i&&r&&i.path===r.declaredPath)g(a,e,t),n(o,e.style.getPropertyValue(t),i.path);else if(i)(i.path!==f(a,e,t)?.token.path||r)&&d(a,e,i,t,{recordHistory:!1})&&n(o,e.style.getPropertyValue(t),i.path);else{let i=l.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),r=/^-?[\d.]+$/.test(i.trim())&&!/weight|line/.test(t)?`${i.trim()}px`:i;p(a,e,t,r),e.style.setProperty(t,r),n(o,r)}E()}),b.addEventListener("click",()=>{let e=s.find(e=>e.path===k.value),t=l.parentElement?.querySelector("input[data-property]"),n=e&&i(a,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),k.value="custom",k.dispatchEvent(new Event("change")),l.parentElement?.querySelector("[data-property]")?.focus()}),l.append(h,k,c,b,w,v),queueMicrotask(E),E(),l}function ue(e){let t=o(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...D(e)])}function fe(e,t,n,o,i,r,a,s,l){let d=t.flatMap(e=>{let t=[...n.querySelectorAll("[data-field-property]")].find(t=>t.dataset.fieldProperty===e.property),o=t?.querySelector("[data-property]");return t&&o?[{field:e,label:t,input:o}]:[]}),p=t=>{for(let{field:o,label:i,input:s}of d){if(i.querySelector(".design-token-binding")||!n.contains(i))continue;let l=t(o,i,s,()=>{r&&(s.value=r(o,e));let t=i.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===o.kind&&a?a(s.value):s.value)});l&&i.append(l)}},c=s?.tokens;if(c)return pe(i),Promise.all([S(c,C(s)),P(c,e)]).then(([t,n])=>{p((o,i,r,a)=>ge(c,e,o.property,t,n[o.property],e=>{l?.(e),a()},i,r))},()=>{});p((t,n,r,a)=>ce(e,t.property,e=>{o(t,r,e),a()},i))}function ge(e,t,n,o,i,r,a,s){let l=function(e,t){return e.filter(e=>e.properties?.includes(t))}(o,n);if(!l.length&&!i)return null;let d=i&&"offToken"in i?i.offToken:void 0,p=void 0===d?void 0:N(l,d),c=document.createElement("span");c.className="design-token-binding";let u=document.createElement("span");u.className="design-token-chip",u.setAttribute("aria-hidden","true");let f=document.createElement("span");f.className="design-token-icon",f.setAttribute("aria-hidden","true");let g=document.createElement("button");g.type="button",g.className="design-token-detach",g.title="Edit the value",g.setAttribute("aria-label",`Edit ${n} value`),g.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let m=document.createElement("select");m.setAttribute("aria-label",`Style token for ${n}`),m.disabled=!l.length;let h=document.createElement("option");h.value="",h.textContent="Choose a token",m.append(h);let b=new Map([["",m]]);for(let e of l){let t=e.group??"",n=b.get(t);n||(n=document.createElement("optgroup"),n.label=t,b.set(t,n));let o=document.createElement("option");o.value=e.path,o.textContent=`${M(e)}${e.ref?` · ${e.ref}`:""}${e===p?" · same value":""}`,o.title=T(e),n.append(o)}for(let[e,t]of b)e&&m.append(t);let k=L();void 0!==d&&j(k,d,p);let v=document.createElement("small");v.className="design-token-binding__state",v.setAttribute("aria-live","polite");let y=!1,x=()=>{let e=function(e,t){return[...w.get(e)??[]].reverse().find(e=>e.property===t)?.token}(t,n),r=y?void 0:e?.path??(i&&"path"in i?i.path:void 0),s=r?o.find(e=>e.path===r):void 0;m.value=r&&l.some(e=>e.path===r)?r:"",u.textContent=s?M(s):r??"";let p=r?e?"token":"connected":"custom";c.dataset.mode=p,(a??c.parentElement)?.setAttribute("data-token-mode",p),k.hidden=void 0===d||!!e,v.textContent=s?`${e?"Preview":"Uses"} ${T(s)}`:r?`Uses ${r}`:k.hidden?"":k.title,m.title=v.textContent||"Choose a token"};return m.addEventListener("change",()=>{let a=l.find(e=>e.path===m.value);if(!a)return x();y=!1;let s=i??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},d="path"in s?o.find(e=>e.path===s.path):void 0;r(function(e,t,n,o,i,r){let a=w.get(t);a||w.set(t,a=[]);let s=a.find(e=>e.property===n);return a.push({adapter:e,property:n,token:o,from:s?.from??i,fromToken:s?s.fromToken:r,undo:z(e,t,n,o)}),()=>q(t)}(e,t,n,a,s,d)),x()}),g.addEventListener("click",()=>{y=!0,x(),s?.focus()}),c.append(u,m,f,g,k,v),x(),c}var me=!1;function he(e,t,n,i){let r=o(e);if(!r||!r.tokens.length)return null;pe(i);let a=document.createElement("details");a.className="design-group design-theme-group",a.open=me,a.addEventListener("toggle",()=>{a.isConnected&&(me=a.open)});let s=document.createElement("summary");s.textContent="Shared theme";let l=document.createElement("small");l.className="design-react-source",l.textContent="Changes every element using these tokens",a.append(s,l);let d=new Map;for(let e of r.tokens){let t=e.path.split(".")[0];d.set(t,[...d.get(t)??[],e])}let p=r.tokens.length>6&&d.size>1;for(let[e,o]of p?d:new Map([["",r.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,a.append(t)}for(let i of o)a.append(be(r,i,t,n,e))}return a}function be(e,t,n,o,s){let d=document.createElement("div");d.className="design-theme-token";let p=document.createElement("span");p.textContent=s&&t.path.slice(s.length+1)||t.path,p.title=`${t.path} · ${r(e,t)} matching · ${t.impactSelector}`;let c=n.fields.find(e=>t.properties.includes(e.property)),u={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:"dimension"===t.type?"size":c?.kind??"text",glyph:"color"===t.type?void 0:c?.glyph,values:c?.values},f=!1,g=n.fieldControl(u,{element:e.root,begin:()=>{f=!1},apply:(n,i,r)=>{let s=null!==r&&a(e,t,r.trim(),f);n.setAttribute("aria-invalid",String(!s)),s&&(f=!0,k(),o())},commit:(e,t,n)=>{!1!==n&&(f=!1,"true"===e.getAttribute("aria-invalid")&&b())}}),m=g.querySelector("[data-property]"),h=g.querySelector('input[type="color"]'),b=()=>{let o=i(e,t);m.value=o,h&&(h.value=n.toHex(o)),m.removeAttribute("aria-invalid"),k()},k=()=>{v.disabled=!d.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(m.title=m.value)},v=document.createElement("button");return v.type="button",v.className="design-theme-reset",v.title="Reset to page value",v.setAttribute("aria-label",`Reset ${t.path}`),v.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',v.addEventListener("click",()=>{l(e,t),b(),o()}),b(),d.append(p,g,v),d}function ke(e,t,n){let i=o(e);i&&p(i,e,t,n)}function ve(e,t){let n=o(e);n&&c(n,e,t)}function ye(e){let n=I.get(e)?.pop(),o=t(e);if(!n||!o)return;o.setProps({...o.props,[n.propName]:n.before});let i=H.get(e);if(i){let t=i.get(n.propName);Object.is(t,n.before)&&i.delete(n.propName),i.size||H.delete(e)}}function xe(){for(let e of[...H.keys()])Ae(e);H.clear(),I.clear(),y(),function(){for(let e of[...w.keys()])R(e)}(),Ce()}var we,Ee=new Map;function $e(e){try{return String(e.current())}catch{return}}function Ce(){for(let[e,t]of Ee)try{$e(e)!==t&&e.apply(t)}catch{}Ee.clear()}var Se=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function Pe(e,t,n,o){if(e.querySelector(".design-theme-switch"))return;let i=document.createElement("div");i.className="design-group design-theme-switch";let r,a=t?.themes;for(let e of Array.isArray(a)?a:[]){let t=$e(e),o=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||o.length<2)continue;let a=Se(e.label,String(e.id)),s=o=>{let i=$e(e);if(o!==i){Ee.has(e)||Ee.set(e,i??t),we=e;try{e.apply(o)}catch{}n()}},l=document.createElement(o.length>3?"label":"div");l.className="design-field design-react-field";let d,p=document.createElement("span");if(p.textContent=a,o.length>3){let e=document.createElement("select");for(let t of o)e.append(new Option(Se(t.label,t.id),t.id));e.value=t,e.setAttribute("aria-label",`${a} theme`),e.addEventListener("change",()=>s(e.value)),d=e}else{d=document.createElement("div"),d.className="design-theme-options",d.setAttribute("role","group"),d.setAttribute("aria-label",`${a} theme`);for(let e of o){let n=document.createElement("button");n.type="button",n.textContent=Se(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>s(e.id)),d.append(n)}}we===e&&(r=d.querySelector("[aria-pressed=true]")??d),l.append(p,d),i.append(l)}we=void 0,i.childElementCount&&(pe(o),e.prepend(i),r?.focus({preventScroll:!0}))}function Ae(e){let n=H.get(e),o=t(e);!n?.size||!o||(o.setProps({...o.props,...Object.fromEntries(n)}),H.delete(e),I.delete(e))}function Ne(t,n,o,i,r,a){let s=n.definition.props.find(e=>e.name===o);if(!s||!e(s,i))return r.setAttribute("aria-invalid","true"),!1;r.removeAttribute("aria-invalid");let l=n.props[o];if(Object.is(l,i))return!0;let d=H.get(t);d||H.set(t,d=new Map);let p=d.has(o)?d.get(o):l;Object.is(p,i)?d.delete(o):d.set(o,p),d.size||H.delete(t);let c=I.get(t);return c||I.set(t,c=[]),c.push({propName:o,before:l,after:i}),n.setProps({...n.props,[o]:i}),a(),!0}function Me(e,i,r,a,s){let l=t(e);if(!l){let t=te(e,s),o=null;try{o=t&&s?.components?.panel?.(t)||null}catch{}return o&&pe(r),o??function(e,t,o){let i=n(e);if(!i)return null;pe(o);let r=document.createElement("small");if(r.className="design-react-source design-react-group design-react-inside",r.append(`Inside ${i.component.definition.name}`),t){let e=document.createElement("button");e.type="button",e.textContent="Select component",e.addEventListener("click",()=>t(i.root)),r.append(" · ",e)}return r}(e,a,r)}pe(r);let d=document.createElement("details");d.className="design-group design-react-group",d.open=!0;let p=document.createElement("summary");p.textContent="Properties",d.append(p);let c=document.createElement("small");c.className="design-react-source",c.textContent=`${l.definition.name} · ${l.definition.source}:${l.definition.line}`,d.append(c);for(let t of l.definition.props){let n=t.styleProperty,r=document.createElement("label");r.className="design-field design-react-field";let a=document.createElement("span");a.textContent=t.name;let s,p=l.props[t.name];if("enum"===t.kind){let e=document.createElement("select");for(let n of t.values??[]){let t=document.createElement("option");t.value=String(n),t.textContent=String(n),e.append(t)}if(void 0===p&&!t.required){let t=document.createElement("option");t.value="",t.textContent="unset",e.prepend(t)}e.value=void 0===p?"":String(p),s=e}else{let e=document.createElement("input");"boolean"===t.kind?(e.type="checkbox",e.checked=!0===p):"number"===t.kind?(e.type="number",e.step="any",e.value="number"==typeof p?String(p):""):(e.type="text",e.maxLength=500,e.autocomplete="off",e.value="string"==typeof p?p:""),s=e}if(s.setAttribute("aria-label",`${l.definition.name} ${t.name}`),"unsupported"===t.kind)s=document.createElement("input"),s.disabled=!0,s.value=`Read only · ${t.typeLabel}`,s.setAttribute("aria-label",`${l.definition.name} ${t.name}, read only`),r.title=`Komo does not edit ${t.typeLabel} props.`;else{let n=()=>{let n=s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked:s.value,o=n;if("number"===t.kind)o=""===String(n).trim()?void 0:Number(n);else if("enum"===t.kind){let e=(t.values??[]).find(e=>String(e)===n);o=""!==n||t.required?e:void 0}else"boolean"===t.kind&&(o=!0===n);Ne(e,l,t.name,o,s,i)};s.addEventListener("change",n)}r.append(a,s);let c=document.createElement("small");if(c.className="design-react-type",c.textContent=`${t.typeLabel}${t.required?" · required":" · optional"}`,r.append(c),r.title||=c.textContent,"string"===t.kind&&n){let a=o(e),d=a?m(a,n):[];if(d.length){let o=document.createElement("span");o.className="design-token-binding";let a=document.createElement("span");a.textContent="Style token";let p=document.createElement("select");p.setAttribute("aria-label",`Style token for ${t.name}`);let c=document.createElement("option");c.value="custom",c.textContent="Custom value",p.append(c);for(let e of d){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,p.append(t)}let u=()=>{let e=d.find(e=>l.props[t.name]===`var(${e.cssVariable})`);p.value=e?.path??"custom",o.dataset.mode=e?"token":"custom"};p.addEventListener("change",()=>{let o=d.find(e=>e.path===p.value),r=o?`var(${o.cssVariable})`:"string"==typeof l.props[t.name]&&String(l.props[t.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(n).trim()??"":"string"==typeof l.props[t.name]?l.props[t.name]:"";Ne(e,l,t.name,r,s,i)&&u()}),o.append(a,p),r.append(o),u()}}d.append(r)}return d}export{fe as attachStyleTokenControls,Pe as attachThemeSwitcher,X as beginReactTextEdit,ae as canUndoDesignTokenEdit,Z as canUndoReactProp,Q as cancelReactTextEdit,ge as createAdapterTokenControl,he as createDesignThemePanel,ce as createElementTokenControl,Me as createReactPropsPanel,oe as designContext,G as finishReactTextEdit,se as hasDesignTokenEdit,K as hasReactPropChanges,re as installCommentCapture,ke as noteDesignTokenOverride,Y as previewReactTextEdit,ie as proposedDesignChanges,ee as proposedReactChanges,de as resetDesignTokenEdits,xe as resetPreviews,Ae as resetReactProps,Ce as restoreThemes,J as showDesignBefore,ve as syncDesignTokenBinding,ue as tokenBoundProperties,le as undoDesignTokenEdit,ye as undoReactProp};

package/dist/react.js

@@ -1 +1 @@
-"use client";import{b as e,c as n,f as t,z as r}from"./chunk-JXIYWNFL.js";import{b as o}from"./chunk-NWRSH6AL.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(t){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===t.enabled&&r.current)return e(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component]),s(()=>{!0===t.enabled&&n(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component,t.props,t.onChange]),{ref:o.current,"data-komo-inspectable":t.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return t(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{r as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};
+"use client";import{b as e,c as n,f as t,z as r}from"./chunk-JXIYWNFL.js";import{b as o}from"./chunk-V4KLBVAJ.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(t){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===t.enabled&&r.current)return e(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component]),s(()=>{!0===t.enabled&&n(r.current,t.component,t.props,t.onChange)},[t.enabled,t.component,t.props,t.onChange]),{ref:o.current,"data-komo-inspectable":t.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return t(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{r as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-NWRSH6AL.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};
+import{a as o,c as n}from"./chunk-V4KLBVAJ.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazem3500/komo",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Point, area, and threaded comments for website branches.",
   "type": "module",
   "license": "MIT",

package/server/setup-client.txt

@@ -237,7 +237,7 @@ ${a.join(`
 `)}var gi,t_,n_,h_=T(()=>{"use strict";gi=new Map,t_=new WeakMap,n_=!1});var s2={};Ao(s2,{attachStyleTokenControls:()=>hU,attachThemeSwitcher:()=>EU,beginReactTextEdit:()=>iU,canUndoDesignTokenEdit:()=>uU,canUndoReactProp:()=>sU,cancelReactTextEdit:()=>aU,createAdapterTokenControl:()=>C_,createDesignThemePanel:()=>gU,createElementTokenControl:()=>k_,createReactPropsPanel:()=>SU,designContext:()=>lU,finishReactTextEdit:()=>rU,hasDesignTokenEdit:()=>dU,hasReactPropChanges:()=>oU,installCommentCapture:()=>cU,noteDesignTokenOverride:()=>bU,previewReactTextEdit:()=>w_,proposedDesignChanges:()=>S_,proposedReactChanges:()=>E_,resetDesignTokenEdits:()=>pU,resetPreviews:()=>wU,resetReactProps:()=>M_,restoreThemes:()=>A_,showDesignBefore:()=>nU,syncDesignTokenBinding:()=>xU,tokenBoundProperties:()=>mU,undoDesignTokenEdit:()=>fU,undoReactProp:()=>vU});function b_(e){return e===void 0?"unset":JSON.stringify(e)??"unset"}function nU(e){if(e)for(let[t,n]of yn){let o=xo(t);o&&(o2.set(t,o.props),o.setProps({...o.props,...Object.fromEntries(n)}))}else for(let[t,n]of o2)xo(t)?.setProps(n);e||o2.clear(),Kz(e),p_(e)}function oU(e){return!!yn.get(e)?.size}function iU(e){let t=xo(e),n=t?.definition.textProp,o=t?.definition.props.find(a=>a.name===n);if(!t||!n||o?.kind!=="string")return null;let i=t.props[n];if(typeof i!="string"||i.length>500)return null;let r=yn.get(e);return r||yn.set(e,r=new Map),r.has(n)||r.set(n,i),{propName:n,before:i}}function w_(e,t,n){let o=xo(e),i=o?.definition.props.find(r=>r.name===t);return!o||o.definition.textProp!==t||i?.kind!=="string"||n.length>500||!$T(i,n)?!1:(o.setProps({...o.props,[t]:n}),!0)}function rU(e,t,n,o){if(n===o){let r=yn.get(e);r?.get(t)===n&&!(Gi.get(e)??[]).some(a=>a.propName===t)&&(r.delete(t),r.size||yn.delete(e));return}let i=Gi.get(e);i||Gi.set(e,i=[]),i.push({propName:t,before:n,after:o})}function aU(e,t,n){w_(e,t,n);let o=yn.get(e);o?.get(t)===n&&!(Gi.get(e)??[]).some(i=>i.propName===t)&&(o.delete(t),o.size||yn.delete(e))}function sU(e){return!!e&&!!Gi.get(e)?.length}function E_(e){let t=yn.get(e),n=xo(e);if(!t?.size||!n)return;let o=vo(e),i=[...t].map(([r,a])=>{let l=n.definition.props.find(d=>d.name===r)?.styleProperty,c=n.props[r],u=l&&typeof c=="string"?o?.tokens.find(d=>d.properties.includes(l)&&c===`var(${d.cssVariable})`):void 0;return`- ${r}: ${b_(a)} \u2192 ${b_(c)}${u?` [${u.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,`Source: ${n.definition.source}:${n.definition.line}`,...i,"Preview values use the app's React state callback; Komo does not write source files."].join(`
 `)}function T_(e,t){if(xo(e))return null;let n;try{n=t?.components?.identify(e)}catch{}let o=yy(e);return n?.name&&(!o||o.root!==n.element&&o.root.contains(n.element))?n:null}function lU(e,t){let n=Object.entries(WT(t)).map(([s,l])=>`${zf(s)}=${zf(l)}`).join(", "),o=T_(e,t),i=xo(e),r=i?{root:e,component:i}:o?void 0:yy(e);if(r){let{definition:s,props:l}=r.component;o={name:s.name,source:`${s.source}:${s.line}`,props:{...l,...Object.fromEntries(yn.get(r.root)??[])}}}let a=Object.entries(o?.props??{}).filter(([,s])=>s===null||["boolean","number"].includes(typeof s)||typeof s=="string"&&s.length<=80).slice(0,12).map(([s,l])=>`${zf(s)}=${JSON.stringify(l).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,o?.name&&`Component: ${zf(o.name)}${o.source?` (${zf(o.source)})`:""}`,a.length&&`Props: ${a.join(", ")}`].filter(s=>!!s)}function S_(e){return[E_(e),FT(e),m_(e)].filter(t=>!!t).join(`
 
-`)||void 0}function cU(e,t,n){y_.get(e)?.abort();let o=new AbortController;y_.set(e,o),e.addEventListener("click",i=>{let r=t();if(!r)return;let a=FT(r)||t2(r);!xo(r)&&!a||(i.stopImmediatePropagation(),n(r,S_(r)))},{capture:!0,signal:o.signal})}function uU(e){return Zz(e)}function dU(e){return Wz(e)||t2(e)}function fU(e){Qz(e)}function pU(e){XT(e),n2(e)}function Qs(e){if(!e||g_.has(e))return;let t=document.createElement("style");t.textContent=tU,e.append(t),g_.add(e)}function k_(e,t,n,o){let i=vo(e);if(!i)return null;let r=IT(i,t);if(!r.length)return null;Qs(o);let a=document.createElement("span");a.className="design-token-binding",a.setAttribute("data-mode","custom");let s=document.createElement("span");s.className="design-token-icon",s.setAttribute("aria-hidden","true");let l=document.createElement("span");l.className="design-token-chip",l.setAttribute("aria-hidden","true");let c=document.createElement("button");c.type="button",c.className="design-token-detach",c.title="Detach token",c.setAttribute("aria-label",`Detach token from ${t}`),c.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let u=document.createElement("select");u.setAttribute("aria-label",`Style token for ${t}`);let d=document.createElement("small");d.className="design-token-binding__state",d.setAttribute("aria-live","polite");let f=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;d.id=f,u.setAttribute("aria-describedby",f);let m=document.createElement("option");m.value="custom",m.textContent="Custom value",u.append(m);for(let h of r){let b=document.createElement("option"),v=Pc(i,h);b.value=h.path,b.textContent=v?`${h.path} \xB7 ${v}`:h.path,u.append(b)}let y=JT(),x=()=>{let h=YT(i,e,t),b=h?null:Rf(i,e,t),v=h?.mode==="token"?r.find(M=>M.path===h.tokenPath):void 0,A=v??b?.token;u.value=A?.path??"custom",l.textContent=A?.path??"";let R=h?.declaredPath,S=v?"token":b?"connected":R?"override":"custom";if(a.dataset.mode=S,a.parentElement?.setAttribute("data-token-mode",S),d.textContent=S==="token"?R&&R!==v?.path?`Rebound from ${R} \xB7 preview`:`Linked to ${v?.path} \xB7 preview`:S==="connected"?`Connected ${b?.origin==="inline"?"inline":"from stylesheet"}`:S==="override"?`Custom override \xB7 was ${R}`:"",u.title=d.textContent||"Choose a token",y.hidden=S!=="custom",S==="custom"){let M=getComputedStyle(e).getPropertyValue(t).trim();e2(y,M,ZT(r.map(z=>({path:z.path,type:z.type,value:Pc(i,z)})),M))}},E=new MutationObserver(x);E.observe(e,{attributes:!0,attributeFilter:["style"]});let g=new MutationObserver(()=>{a.isConnected||(E.disconnect(),g.disconnect())});return g.observe(a.ownerDocument,{childList:!0,subtree:!0}),u.addEventListener("change",()=>{let h=e.style.getPropertyValue(t),b=r.find(A=>A.path===u.value),v=YT(i,e,t);if(b&&v&&b.path===v.declaredPath)Fz(i,e,t),n(h,e.style.getPropertyValue(t),b.path);else if(b)(b.path!==Rf(i,e,t)?.token.path||v)&&Iz(i,e,b,t,{recordHistory:!1})&&n(h,e.style.getPropertyValue(t),b.path);else{let R=a.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),S=/^-?[\d.]+$/.test(R.trim())&&!/weight|line/.test(t)?`${R.trim()}px`:R;KT(i,e,t,S),e.style.setProperty(t,S),n(h,S)}x()}),c.addEventListener("click",()=>{let h=r.find(A=>A.path===u.value),b=a.parentElement?.querySelector("input[data-property]"),v=h&&Pc(i,h);b&&v&&(b.value=b.type==="number"?String(parseFloat(v)):v),u.value="custom",u.dispatchEvent(new Event("change")),a.parentElement?.querySelector("[data-property]")?.focus()}),a.append(l,u,s,c,y,d),queueMicrotask(x),x(),a}function mU(e){let t=vo(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...f_(e)])}function hU(e,t,n,o,i,r,a,s,l){let c=t.flatMap(f=>{let m=[...n.querySelectorAll("[data-field-property]")].find(x=>x.dataset.fieldProperty===f.property),y=m?.querySelector("[data-property]");return m&&y?[{field:f,label:m,input:y}]:[]}),u=f=>{for(let{field:m,label:y,input:x}of c){if(y.querySelector(".design-token-binding")||!n.contains(y))continue;let g=f(m,y,x,()=>{r&&(x.value=r(m,e));let h=y.querySelector('input[type="range"],input[type="color"]');h&&(h.value=m.kind==="color"&&a?a(x.value):x.value)});g&&y.append(g)}},d=s?.tokens;if(!d){u((f,m,y,x)=>k_(e,f.property,E=>{o(f,y,E),x()},i));return}return Qs(i),Promise.all([i_(d,WT(s)),r_(d,e)]).then(([f,m])=>{u((y,x,E,g)=>C_(d,e,y.property,f,m[y.property],h=>{l?.(h),g()},x,E))},()=>{})}function C_(e,t,n,o,i,r,a,s){let l=a_(o,n);if(!l.length&&!i)return null;let c=i&&"offToken"in i?i.offToken:void 0,u=c===void 0?void 0:ZT(l,c),d=document.createElement("span");d.className="design-token-binding";let f=document.createElement("span");f.className="design-token-chip",f.setAttribute("aria-hidden","true");let m=document.createElement("span");m.className="design-token-icon",m.setAttribute("aria-hidden","true");let y=document.createElement("button");y.type="button",y.className="design-token-detach",y.title="Edit the value",y.setAttribute("aria-label",`Edit ${n} value`),y.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let x=document.createElement("select");x.setAttribute("aria-label",`Style token for ${n}`),x.disabled=!l.length;let E=document.createElement("option");E.value="",E.textContent="Choose a token",x.append(E);let g=new Map([["",x]]);for(let R of l){let S=R.group??"",M=g.get(S);M||(M=document.createElement("optgroup"),M.label=S,g.set(S,M));let z=document.createElement("option");z.value=R.path,z.textContent=`${by(R)}${R.ref?` \xB7 ${R.ref}`:""}${R===u?" \xB7 same value":""}`,z.title=QT(R),M.append(z)}for(let[R,S]of g)R&&x.append(S);let h=JT();c!==void 0&&e2(h,c,u);let b=document.createElement("small");b.className="design-token-binding__state",b.setAttribute("aria-live","polite");let v=!1,A=()=>{let R=l_(t,n),S=v?void 0:R?.path??(i&&"path"in i?i.path:void 0),M=S?o.find(D=>D.path===S):void 0;x.value=S&&l.some(D=>D.path===S)?S:"",f.textContent=M?by(M):S??"";let z=S?R?"token":"connected":"custom";d.dataset.mode=z,(a??d.parentElement)?.setAttribute("data-token-mode",z),h.hidden=c===void 0||!!R,b.textContent=M?`${R?"Preview":"Uses"} ${QT(M)}`:S?`Uses ${S}`:h.hidden?"":h.title,x.title=b.textContent||"Choose a token"};return x.addEventListener("change",()=>{let R=l.find(z=>z.path===x.value);if(!R)return A();v=!1;let S=i??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},M="path"in S?o.find(z=>z.path===S.path):void 0;r(c_(e,t,n,R,S,M)),A()}),y.addEventListener("click",()=>{v=!0,A(),s?.focus()}),d.append(f,x,m,y,h,b),A(),d}function gU(e,t,n,o){let i=vo(e);if(!i||!i.tokens.length)return null;Qs(o);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=x_,r.addEventListener("toggle",()=>{r.isConnected&&(x_=r.open)});let a=document.createElement("summary");a.textContent="Shared theme";let s=document.createElement("small");s.className="design-react-source",s.textContent="Changes every element using these tokens",r.append(a,s);let l=new Map;for(let u of i.tokens){let d=u.path.split(".")[0];l.set(d,[...l.get(d)??[],u])}let c=i.tokens.length>6&&l.size>1;for(let[u,d]of c?l:new Map([["",i.tokens]])){if(u){let f=document.createElement("small");f.className="design-theme-heading",f.textContent=u,r.append(f)}for(let f of d)r.append(yU(i,f,t,n,u))}return r}function yU(e,t,n,o,i){let r=document.createElement("div");r.className="design-theme-token";let a=document.createElement("span");a.textContent=i&&t.path.slice(i.length+1)||t.path,a.title=`${t.path} \xB7 ${GT(e,t)} matching \xB7 ${t.impactSelector}`;let s=n.fields.find(E=>t.properties.includes(E.property)),l={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:t.type==="dimension"?"size":s?.kind??"text",glyph:t.type==="color"?void 0:s?.glyph,values:s?.values},c=!1,u=n.fieldControl(l,{element:e.root,begin:()=>{c=!1},apply:(E,g,h)=>{let b=h!==null&&Gz(e,t,h.trim(),c);E.setAttribute("aria-invalid",String(!b)),b&&(c=!0,y(),o())},commit:(E,g,h)=>{h!==!1&&(c=!1,E.getAttribute("aria-invalid")==="true"&&m())}}),d=u.querySelector("[data-property]"),f=u.querySelector('input[type="color"]'),m=()=>{let E=Pc(e,t);d.value=E,f&&(f.value=n.toHex(E)),d.removeAttribute("aria-invalid"),y()},y=()=>{x.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),t.type==="fontFamily"&&(d.title=d.value)},x=document.createElement("button");return x.type="button",x.className="design-theme-reset",x.title="Reset to page value",x.setAttribute("aria-label",`Reset ${t.path}`),x.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',x.addEventListener("click",()=>{Yz(e,t),m(),o()}),m(),r.append(a,u,x),r}function bU(e,t,n){let o=vo(e);o&&KT(o,e,t,n)}function xU(e,t){let n=vo(e);n&&Xz(n,e,t)}function vU(e){let t=Gi.get(e)?.pop(),n=xo(e);if(!t||!n)return;n.setProps({...n.props,[t.propName]:t.before});let o=yn.get(e);if(o){let i=o.get(t.propName);Object.is(i,t.before)&&o.delete(t.propName),o.size||yn.delete(e)}}function wU(){for(let e of[...yn.keys()])M_(e);yn.clear(),Gi.clear(),Jz(),d_(),A_()}function a2(e){try{return String(e.current())}catch{return}}function A_(){for(let[e,t]of xy)try{a2(e)!==t&&e.apply(t)}catch{}xy.clear()}function EU(e,t,n,o){if(e.querySelector(".design-theme-switch"))return;let i=document.createElement("div");i.className="design-group design-theme-switch";let r=t?.themes,a;for(let s of Array.isArray(r)?r:[]){let l=a2(s),c=Array.isArray(s?.options)?s.options.filter(x=>typeof x?.id=="string"):[];if(l===void 0||c.length<2)continue;let u=r2(s.label,String(s.id)),d=x=>{let E=a2(s);if(x!==E){xy.has(s)||xy.set(s,E??l),i2=s;try{s.apply(x)}catch{}n()}},f=document.createElement(c.length>3?"label":"div");f.className="design-field design-react-field";let m=document.createElement("span");m.textContent=u;let y;if(c.length>3){let x=document.createElement("select");for(let E of c)x.append(new Option(r2(E.label,E.id),E.id));x.value=l,x.setAttribute("aria-label",`${u} theme`),x.addEventListener("change",()=>d(x.value)),y=x}else{y=document.createElement("div"),y.className="design-theme-options",y.setAttribute("role","group"),y.setAttribute("aria-label",`${u} theme`);for(let x of c){let E=document.createElement("button");E.type="button",E.textContent=r2(x.label,x.id),E.setAttribute("aria-pressed",String(x.id===l)),E.addEventListener("click",()=>d(x.id)),y.append(E)}}i2===s&&(a=y.querySelector("[aria-pressed=true]")??y),f.append(m,y),i.append(f)}i2=void 0,i.childElementCount&&(Qs(o),e.prepend(i),a?.focus({preventScroll:!0}))}function M_(e){let t=yn.get(e),n=xo(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),yn.delete(e),Gi.delete(e))}function TU(e,t,n){let o=yy(e);if(!o)return null;Qs(n);let i=document.createElement("small");if(i.className="design-react-source design-react-group design-react-inside",i.append(`Inside ${o.component.definition.name}`),t){let r=document.createElement("button");r.type="button",r.textContent="Select component",r.addEventListener("click",()=>t(o.root)),i.append(" \xB7 ",r)}return i}function v_(e,t,n,o,i,r){let a=t.definition.props.find(d=>d.name===n);if(!a||!$T(a,o))return i.setAttribute("aria-invalid","true"),!1;i.removeAttribute("aria-invalid");let s=t.props[n];if(Object.is(s,o))return!0;let l=yn.get(e);l||yn.set(e,l=new Map);let c=l.has(n)?l.get(n):s;Object.is(c,o)?l.delete(n):l.set(n,c),l.size||yn.delete(e);let u=Gi.get(e);return u||Gi.set(e,u=[]),u.push({propName:n,before:s,after:o}),t.setProps({...t.props,[n]:o}),r(),!0}function SU(e,t,n,o,i){let r=xo(e);if(!r){let c=T_(e,i),u=null;try{u=c&&i?.components?.panel?.(c)||null}catch{}return u&&Qs(n),u??TU(e,o,n)}Qs(n);let a=document.createElement("details");a.className="design-group design-react-group",a.open=!0;let s=document.createElement("summary");s.textContent="Properties",a.append(s);let l=document.createElement("small");l.className="design-react-source",l.textContent=`${r.definition.name} \xB7 ${r.definition.source}:${r.definition.line}`,a.append(l);for(let c of r.definition.props){let u=c.styleProperty,d=document.createElement("label");d.className="design-field design-react-field";let f=document.createElement("span");f.textContent=c.name;let m=r.props[c.name],y;if(c.kind==="enum"){let E=document.createElement("select");for(let g of c.values??[]){let h=document.createElement("option");h.value=String(g),h.textContent=String(g),E.append(h)}if(m===void 0&&!c.required){let g=document.createElement("option");g.value="",g.textContent="unset",E.prepend(g)}E.value=m===void 0?"":String(m),y=E}else{let E=document.createElement("input");c.kind==="boolean"?(E.type="checkbox",E.checked=m===!0):c.kind==="number"?(E.type="number",E.step="any",E.value=typeof m=="number"?String(m):""):(E.type="text",E.maxLength=500,E.autocomplete="off",E.value=typeof m=="string"?m:""),y=E}if(y.setAttribute("aria-label",`${r.definition.name} ${c.name}`),c.kind==="unsupported")y=document.createElement("input"),y.disabled=!0,y.value=`Read only \xB7 ${c.typeLabel}`,y.setAttribute("aria-label",`${r.definition.name} ${c.name}, read only`),d.title=`Komo does not edit ${c.typeLabel} props.`;else{let E=()=>{let g=y instanceof HTMLInputElement&&y.type==="checkbox"?y.checked:y.value,h=g;if(c.kind==="number")h=String(g).trim()===""?void 0:Number(g);else if(c.kind==="enum"){let b=(c.values??[]).find(v=>String(v)===g);h=g===""&&!c.required?void 0:b}else c.kind==="boolean"&&(h=g===!0);v_(e,r,c.name,h,y,t)};y.addEventListener("change",E)}d.append(f,y);let x=document.createElement("small");if(x.className="design-react-type",x.textContent=`${c.typeLabel}${c.required?" \xB7 required":" \xB7 optional"}`,d.append(x),d.title||=x.textContent,c.kind==="string"&&u){let E=vo(e),g=E?IT(E,u):[];if(g.length){let h=document.createElement("span");h.className="design-token-binding";let b=document.createElement("span");b.textContent="Style token";let v=document.createElement("select");v.setAttribute("aria-label",`Style token for ${c.name}`);let A=document.createElement("option");A.value="custom",A.textContent="Custom value",v.append(A);for(let S of g){let M=document.createElement("option");M.value=S.path,M.textContent=S.path,v.append(M)}let R=()=>{let S=g.find(M=>r.props[c.name]===`var(${M.cssVariable})`);v.value=S?.path??"custom",h.dataset.mode=S?"token":"custom"};v.addEventListener("change",()=>{let S=g.find(z=>z.path===v.value),M=S?`var(${S.cssVariable})`:typeof r.props[c.name]=="string"&&String(r.props[c.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(u).trim()??"":typeof r.props[c.name]=="string"?r.props[c.name]:"";v_(e,r,c.name,M,y,t)&&R()}),h.append(b,v),d.append(h),R()}}a.append(d)}return a}var yn,Gi,g_,y_,tU,o2,zf,x_,xy,i2,r2,l2=T(()=>{"use strict";$z();e_();h_();yn=new Map,Gi=new Map,g_=new WeakSet,y_=new WeakMap,tU=`.design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-inside{padding:10px 12px}.design-react-inside button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-react-inside button:hover{text-decoration:underline}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background-color:#ffffff0a;color:#f1efeb;font:inherit;font-size:11px}.design-react-field.design-field>:is(input,select):focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-react-field.design-field>select{padding-right:20px}.design-react-field input[type=checkbox]{justify-self:end;width:14px;height:14px;accent-color:#bda6ef}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field .design-token-binding{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:4px;color:#77736f;font-size:10px}.design-react-field .design-token-binding select{min-width:0;height:24px;border:0;border-radius:6px;appearance:none;background:#ffffff0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E") right 6px center/8px no-repeat;color:#e9e6e1;padding:0 18px 0 6px;font:inherit;font-size:10px;cursor:pointer}.design-react-field .design-token-binding[data-mode=token] select{background-color:#bda6ef24;color:#e6dcfb}.design-token-binding__state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.design-field>.design-token-binding{display:contents}.design-field:has(>.design-token-binding)>input[data-property]{padding-right:28px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{position:absolute;top:4px;right:4px;width:20px;height:20px;box-sizing:border-box;border-radius:5px}.design-token-icon{display:grid;place-items:center;color:#77736f;opacity:0;pointer-events:none;transition:opacity .12s}.design-token-icon::before{content:'';width:6px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;rotate:45deg}.design-field:is(:hover,:focus-within) .design-token-icon{opacity:1}.design-field>.design-token-binding select{margin:0;padding:0;border:0;opacity:0;cursor:pointer;appearance:none}.design-field>.design-token-binding select:hover+.design-token-icon,.design-field:has(.design-token-binding select:hover) .design-token-icon{background:#ffffff14;color:#e9e6e1}.design-field:has(.design-token-binding select:focus-visible) :is(.design-token-icon,.design-token-chip){outline:2px solid #bda6ef;outline-offset:1px;opacity:1}.design-field[data-token-mode=override] .design-token-icon{opacity:1;color:#e7c27d}.design-token-chip,.design-token-detach{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected])>input[data-property]{visibility:hidden}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{position:absolute;inset:4px 28px 4px var(--lead,4px);display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:4px;background:#bda6ef1f;color:#e6dcfb;font-size:11px;white-space:nowrap;overflow:hidden;pointer-events:none}.design-token-chip::before{content:'';flex:none;width:5px;height:5px;border:1.2px solid #c8b5f4;border-radius:1px;rotate:45deg}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:var(--lead,4px);right:28px;width:auto}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-icon{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-detach{display:grid;place-items:center;color:#898680}.design-token-detach:hover{background:#ffffff14;color:#f1efeb}.design-token-detach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-theme-group .design-react-source{padding:0 0 6px}.design-theme-heading{display:block;padding:8px 0 2px;color:#77736f;font-size:10px;text-transform:capitalize}.design-theme-token{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:6px;margin-top:4px}.design-theme-token>span{overflow:hidden;color:#898680;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.design-theme-token[data-changed]>span{color:#e6dcfb}.design-theme-token[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-8px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-theme-reset{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#77736f;cursor:pointer}.design-theme-reset:disabled{visibility:hidden}.design-theme-reset:hover{background:#ffffff14;color:#f1efeb}.design-theme-reset svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-token-off{position:absolute;top:8px;right:24px;display:grid;place-items:center;width:12px;height:12px}.design-token-off::before{content:'';width:4px;height:4px;border-radius:50%;background:#e7c27d;opacity:.7}.design-token-off[hidden]{display:none}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>input[data-property]{padding-right:38px}.design-theme-switch{padding:6px 12px 8px}.design-theme-switch .design-react-field>span{text-transform:capitalize}.design-theme-options{display:flex;min-width:0;padding:2px;border-radius:6px;background:#ffffff0a}.design-theme-options button{flex:1;min-width:0;height:24px;padding:0 6px;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.design-theme-options button:hover{color:#f1efeb}.design-theme-options button[aria-pressed=true]{background:#ffffff1a;color:#f1efeb}.design-theme-options button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}@media (max-width:520px){.design-theme-options button{height:30px}.design-react-field.design-field>:is(input,select){height:34px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{top:7px}.design-token-off{top:11px}}`;o2=new Map;zf=e=>String(e).replace(/\s+/g," ").trim();x_=!1;xy=new Map;r2=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1)});var H_={};Ao(H_,{bindInlineTextTools:()=>kU,canEditText:()=>__,createInlineTextTools:()=>z_,createTextPreviewHistory:()=>R_,startInlineTextEditor:()=>V_,textEditBlocker:()=>c2});function D_(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function Uc(e,t,n){if(n&&e.childElementCount)for(let[o,i]of n)o.data=i;else e.textContent=t}function R_(){let e=new Map,t=new Map,n=[],o=new Map;return{record(i){!i.reactProp&&i.before!==i.after&&(e.has(i.element)||(e.set(i.element,i.before),t.set(i.element,i.nodes)),n.push(i))},remember(i,r){e.has(i)||e.set(i,r)},original(i){return e.get(i)},reconcile(i,r){e.get(i)===r&&e.delete(i)},reset(i){let r=e.get(i);r!==void 0&&Uc(i,r,t.get(i)),e.delete(i);for(let a=n.length-1;a>=0;a--)n[a].element===i&&n.splice(a,1)},proposal(i){let r=e.get(i),a=i.textContent??"";return r!==void 0&&r!==a?`Proposed inline text change (preview only)
+`)||void 0}function cU(e,t,n){y_.get(e)?.abort();let o=new AbortController;y_.set(e,o),e.addEventListener("click",i=>{let r=t();if(!r)return;let a=FT(r)||t2(r);!xo(r)&&!a||(i.stopImmediatePropagation(),n(r,S_(r)))},{capture:!0,signal:o.signal})}function uU(e){return Zz(e)}function dU(e){return Wz(e)||t2(e)}function fU(e){Qz(e)}function pU(e){XT(e),n2(e)}function Qs(e){if(!e||g_.has(e))return;let t=document.createElement("style");t.textContent=tU,e.append(t),g_.add(e)}function k_(e,t,n,o){let i=vo(e);if(!i)return null;let r=IT(i,t);if(!r.length)return null;Qs(o);let a=document.createElement("span");a.className="design-token-binding",a.setAttribute("data-mode","custom");let s=document.createElement("span");s.className="design-token-icon",s.setAttribute("aria-hidden","true");let l=document.createElement("span");l.className="design-token-chip",l.setAttribute("aria-hidden","true");let c=document.createElement("button");c.type="button",c.className="design-token-detach",c.title="Detach token",c.setAttribute("aria-label",`Detach token from ${t}`),c.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let u=document.createElement("select");u.setAttribute("aria-label",`Style token for ${t}`);let d=document.createElement("small");d.className="design-token-binding__state",d.setAttribute("aria-live","polite");let f=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;d.id=f,u.setAttribute("aria-describedby",f);let m=document.createElement("option");m.value="custom",m.textContent="Custom value",u.append(m);for(let h of r){let b=document.createElement("option"),v=Pc(i,h);b.value=h.path,b.textContent=v?`${h.path} \xB7 ${v}`:h.path,u.append(b)}let y=JT(),x=()=>{let h=YT(i,e,t),b=h?null:Rf(i,e,t),v=h?.mode==="token"?r.find(M=>M.path===h.tokenPath):void 0,A=v??b?.token;u.value=A?.path??"custom",l.textContent=A?.path??"";let R=h?.declaredPath,S=v?"token":b?"connected":R?"override":"custom";if(a.dataset.mode=S,a.parentElement?.setAttribute("data-token-mode",S),d.textContent=S==="token"?R&&R!==v?.path?`Rebound from ${R} \xB7 preview`:`Linked to ${v?.path} \xB7 preview`:S==="connected"?`Connected ${b?.origin==="inline"?"inline":"from stylesheet"}`:S==="override"?`Custom override \xB7 was ${R}`:"",u.title=d.textContent||"Choose a token",y.hidden=S!=="custom",S==="custom"){let M=getComputedStyle(e).getPropertyValue(t).trim();e2(y,M,ZT(r.map(z=>({path:z.path,type:z.type,value:Pc(i,z)})),M))}},E=new MutationObserver(x);E.observe(e,{attributes:!0,attributeFilter:["style"]});let g=new MutationObserver(()=>{a.isConnected||(E.disconnect(),g.disconnect())});return g.observe(a.ownerDocument,{childList:!0,subtree:!0}),u.addEventListener("change",()=>{let h=e.style.getPropertyValue(t),b=r.find(A=>A.path===u.value),v=YT(i,e,t);if(b&&v&&b.path===v.declaredPath)Fz(i,e,t),n(h,e.style.getPropertyValue(t),b.path);else if(b)(b.path!==Rf(i,e,t)?.token.path||v)&&Iz(i,e,b,t,{recordHistory:!1})&&n(h,e.style.getPropertyValue(t),b.path);else{let R=a.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),S=/^-?[\d.]+$/.test(R.trim())&&!/weight|line/.test(t)?`${R.trim()}px`:R;KT(i,e,t,S),e.style.setProperty(t,S),n(h,S)}x()}),c.addEventListener("click",()=>{let h=r.find(A=>A.path===u.value),b=a.parentElement?.querySelector("input[data-property]"),v=h&&Pc(i,h);b&&v&&(b.value=b.type==="number"?String(parseFloat(v)):v),u.value="custom",u.dispatchEvent(new Event("change")),a.parentElement?.querySelector("[data-property]")?.focus()}),a.append(l,u,s,c,y,d),queueMicrotask(x),x(),a}function mU(e){let t=vo(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...f_(e)])}function hU(e,t,n,o,i,r,a,s,l){let c=t.flatMap(f=>{let m=[...n.querySelectorAll("[data-field-property]")].find(x=>x.dataset.fieldProperty===f.property),y=m?.querySelector("[data-property]");return m&&y?[{field:f,label:m,input:y}]:[]}),u=f=>{for(let{field:m,label:y,input:x}of c){if(y.querySelector(".design-token-binding")||!n.contains(y))continue;let g=f(m,y,x,()=>{r&&(x.value=r(m,e));let h=y.querySelector('input[type="range"],input[type="color"]');h&&(h.value=m.kind==="color"&&a?a(x.value):x.value)});g&&y.append(g)}},d=s?.tokens;if(!d){u((f,m,y,x)=>k_(e,f.property,E=>{o(f,y,E),x()},i));return}return Qs(i),Promise.all([i_(d,WT(s)),r_(d,e)]).then(([f,m])=>{u((y,x,E,g)=>C_(d,e,y.property,f,m[y.property],h=>{l?.(h),g()},x,E))},()=>{})}function C_(e,t,n,o,i,r,a,s){let l=a_(o,n);if(!l.length&&!i)return null;let c=i&&"offToken"in i?i.offToken:void 0,u=c===void 0?void 0:ZT(l,c),d=document.createElement("span");d.className="design-token-binding";let f=document.createElement("span");f.className="design-token-chip",f.setAttribute("aria-hidden","true");let m=document.createElement("span");m.className="design-token-icon",m.setAttribute("aria-hidden","true");let y=document.createElement("button");y.type="button",y.className="design-token-detach",y.title="Edit the value",y.setAttribute("aria-label",`Edit ${n} value`),y.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let x=document.createElement("select");x.setAttribute("aria-label",`Style token for ${n}`),x.disabled=!l.length;let E=document.createElement("option");E.value="",E.textContent="Choose a token",x.append(E);let g=new Map([["",x]]);for(let R of l){let S=R.group??"",M=g.get(S);M||(M=document.createElement("optgroup"),M.label=S,g.set(S,M));let z=document.createElement("option");z.value=R.path,z.textContent=`${by(R)}${R.ref?` \xB7 ${R.ref}`:""}${R===u?" \xB7 same value":""}`,z.title=QT(R),M.append(z)}for(let[R,S]of g)R&&x.append(S);let h=JT();c!==void 0&&e2(h,c,u);let b=document.createElement("small");b.className="design-token-binding__state",b.setAttribute("aria-live","polite");let v=!1,A=()=>{let R=l_(t,n),S=v?void 0:R?.path??(i&&"path"in i?i.path:void 0),M=S?o.find(D=>D.path===S):void 0;x.value=S&&l.some(D=>D.path===S)?S:"",f.textContent=M?by(M):S??"";let z=S?R?"token":"connected":"custom";d.dataset.mode=z,(a??d.parentElement)?.setAttribute("data-token-mode",z),h.hidden=c===void 0||!!R,b.textContent=M?`${R?"Preview":"Uses"} ${QT(M)}`:S?`Uses ${S}`:h.hidden?"":h.title,x.title=b.textContent||"Choose a token"};return x.addEventListener("change",()=>{let R=l.find(z=>z.path===x.value);if(!R)return A();v=!1;let S=i??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},M="path"in S?o.find(z=>z.path===S.path):void 0;r(c_(e,t,n,R,S,M)),A()}),y.addEventListener("click",()=>{v=!0,A(),s?.focus()}),d.append(f,x,m,y,h,b),A(),d}function gU(e,t,n,o){let i=vo(e);if(!i||!i.tokens.length)return null;Qs(o);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=x_,r.addEventListener("toggle",()=>{r.isConnected&&(x_=r.open)});let a=document.createElement("summary");a.textContent="Shared theme";let s=document.createElement("small");s.className="design-react-source",s.textContent="Changes every element using these tokens",r.append(a,s);let l=new Map;for(let u of i.tokens){let d=u.path.split(".")[0];l.set(d,[...l.get(d)??[],u])}let c=i.tokens.length>6&&l.size>1;for(let[u,d]of c?l:new Map([["",i.tokens]])){if(u){let f=document.createElement("small");f.className="design-theme-heading",f.textContent=u,r.append(f)}for(let f of d)r.append(yU(i,f,t,n,u))}return r}function yU(e,t,n,o,i){let r=document.createElement("div");r.className="design-theme-token";let a=document.createElement("span");a.textContent=i&&t.path.slice(i.length+1)||t.path,a.title=`${t.path} \xB7 ${GT(e,t)} matching \xB7 ${t.impactSelector}`;let s=n.fields.find(E=>t.properties.includes(E.property)),l={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:t.type==="dimension"?"size":s?.kind??"text",glyph:t.type==="color"?void 0:s?.glyph,values:s?.values},c=!1,u=n.fieldControl(l,{element:e.root,begin:()=>{c=!1},apply:(E,g,h)=>{let b=h!==null&&Gz(e,t,h.trim(),c);E.setAttribute("aria-invalid",String(!b)),b&&(c=!0,y(),o())},commit:(E,g,h)=>{h!==!1&&(c=!1,E.getAttribute("aria-invalid")==="true"&&m())}}),d=u.querySelector("[data-property]"),f=u.querySelector('input[type="color"]'),m=()=>{let E=Pc(e,t);d.value=E,f&&(f.value=n.toHex(E)),d.removeAttribute("aria-invalid"),y()},y=()=>{x.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),t.type==="fontFamily"&&(d.title=d.value)},x=document.createElement("button");return x.type="button",x.className="design-theme-reset",x.title="Reset to page value",x.setAttribute("aria-label",`Reset ${t.path}`),x.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',x.addEventListener("click",()=>{Yz(e,t),m(),o()}),m(),r.append(a,u,x),r}function bU(e,t,n){let o=vo(e);o&&KT(o,e,t,n)}function xU(e,t){let n=vo(e);n&&Xz(n,e,t)}function vU(e){let t=Gi.get(e)?.pop(),n=xo(e);if(!t||!n)return;n.setProps({...n.props,[t.propName]:t.before});let o=yn.get(e);if(o){let i=o.get(t.propName);Object.is(i,t.before)&&o.delete(t.propName),o.size||yn.delete(e)}}function wU(){for(let e of[...yn.keys()])M_(e);yn.clear(),Gi.clear(),Jz(),d_(),A_()}function a2(e){try{return String(e.current())}catch{return}}function A_(){for(let[e,t]of xy)try{a2(e)!==t&&e.apply(t)}catch{}xy.clear()}function EU(e,t,n,o){if(e.querySelector(".design-theme-switch"))return;let i=document.createElement("div");i.className="design-group design-theme-switch";let r=t?.themes,a;for(let s of Array.isArray(r)?r:[]){let l=a2(s),c=Array.isArray(s?.options)?s.options.filter(x=>typeof x?.id=="string"):[];if(l===void 0||c.length<2)continue;let u=r2(s.label,String(s.id)),d=x=>{let E=a2(s);if(x!==E){xy.has(s)||xy.set(s,E??l),i2=s;try{s.apply(x)}catch{}n()}},f=document.createElement(c.length>3?"label":"div");f.className="design-field design-react-field";let m=document.createElement("span");m.textContent=u;let y;if(c.length>3){let x=document.createElement("select");for(let E of c)x.append(new Option(r2(E.label,E.id),E.id));x.value=l,x.setAttribute("aria-label",`${u} theme`),x.addEventListener("change",()=>d(x.value)),y=x}else{y=document.createElement("div"),y.className="design-theme-options",y.setAttribute("role","group"),y.setAttribute("aria-label",`${u} theme`);for(let x of c){let E=document.createElement("button");E.type="button",E.textContent=r2(x.label,x.id),E.setAttribute("aria-pressed",String(x.id===l)),E.addEventListener("click",()=>d(x.id)),y.append(E)}}i2===s&&(a=y.querySelector("[aria-pressed=true]")??y),f.append(m,y),i.append(f)}i2=void 0,i.childElementCount&&(Qs(o),e.prepend(i),a?.focus({preventScroll:!0}))}function M_(e){let t=yn.get(e),n=xo(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),yn.delete(e),Gi.delete(e))}function TU(e,t,n){let o=yy(e);if(!o)return null;Qs(n);let i=document.createElement("small");if(i.className="design-react-source design-react-group design-react-inside",i.append(`Inside ${o.component.definition.name}`),t){let r=document.createElement("button");r.type="button",r.textContent="Select component",r.addEventListener("click",()=>t(o.root)),i.append(" \xB7 ",r)}return i}function v_(e,t,n,o,i,r){let a=t.definition.props.find(d=>d.name===n);if(!a||!$T(a,o))return i.setAttribute("aria-invalid","true"),!1;i.removeAttribute("aria-invalid");let s=t.props[n];if(Object.is(s,o))return!0;let l=yn.get(e);l||yn.set(e,l=new Map);let c=l.has(n)?l.get(n):s;Object.is(c,o)?l.delete(n):l.set(n,c),l.size||yn.delete(e);let u=Gi.get(e);return u||Gi.set(e,u=[]),u.push({propName:n,before:s,after:o}),t.setProps({...t.props,[n]:o}),r(),!0}function SU(e,t,n,o,i){let r=xo(e);if(!r){let c=T_(e,i),u=null;try{u=c&&i?.components?.panel?.(c)||null}catch{}return u&&Qs(n),u??TU(e,o,n)}Qs(n);let a=document.createElement("details");a.className="design-group design-react-group",a.open=!0;let s=document.createElement("summary");s.textContent="Properties",a.append(s);let l=document.createElement("small");l.className="design-react-source",l.textContent=`${r.definition.name} \xB7 ${r.definition.source}:${r.definition.line}`,a.append(l);for(let c of r.definition.props){let u=c.styleProperty,d=document.createElement("label");d.className="design-field design-react-field";let f=document.createElement("span");f.textContent=c.name;let m=r.props[c.name],y;if(c.kind==="enum"){let E=document.createElement("select");for(let g of c.values??[]){let h=document.createElement("option");h.value=String(g),h.textContent=String(g),E.append(h)}if(m===void 0&&!c.required){let g=document.createElement("option");g.value="",g.textContent="unset",E.prepend(g)}E.value=m===void 0?"":String(m),y=E}else{let E=document.createElement("input");c.kind==="boolean"?(E.type="checkbox",E.checked=m===!0):c.kind==="number"?(E.type="number",E.step="any",E.value=typeof m=="number"?String(m):""):(E.type="text",E.maxLength=500,E.autocomplete="off",E.value=typeof m=="string"?m:""),y=E}if(y.setAttribute("aria-label",`${r.definition.name} ${c.name}`),c.kind==="unsupported")y=document.createElement("input"),y.disabled=!0,y.value=`Read only \xB7 ${c.typeLabel}`,y.setAttribute("aria-label",`${r.definition.name} ${c.name}, read only`),d.title=`Komo does not edit ${c.typeLabel} props.`;else{let E=()=>{let g=y instanceof HTMLInputElement&&y.type==="checkbox"?y.checked:y.value,h=g;if(c.kind==="number")h=String(g).trim()===""?void 0:Number(g);else if(c.kind==="enum"){let b=(c.values??[]).find(v=>String(v)===g);h=g===""&&!c.required?void 0:b}else c.kind==="boolean"&&(h=g===!0);v_(e,r,c.name,h,y,t)};y.addEventListener("change",E)}d.append(f,y);let x=document.createElement("small");if(x.className="design-react-type",x.textContent=`${c.typeLabel}${c.required?" \xB7 required":" \xB7 optional"}`,d.append(x),d.title||=x.textContent,c.kind==="string"&&u){let E=vo(e),g=E?IT(E,u):[];if(g.length){let h=document.createElement("span");h.className="design-token-binding";let b=document.createElement("span");b.textContent="Style token";let v=document.createElement("select");v.setAttribute("aria-label",`Style token for ${c.name}`);let A=document.createElement("option");A.value="custom",A.textContent="Custom value",v.append(A);for(let S of g){let M=document.createElement("option");M.value=S.path,M.textContent=S.path,v.append(M)}let R=()=>{let S=g.find(M=>r.props[c.name]===`var(${M.cssVariable})`);v.value=S?.path??"custom",h.dataset.mode=S?"token":"custom"};v.addEventListener("change",()=>{let S=g.find(z=>z.path===v.value),M=S?`var(${S.cssVariable})`:typeof r.props[c.name]=="string"&&String(r.props[c.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(u).trim()??"":typeof r.props[c.name]=="string"?r.props[c.name]:"";v_(e,r,c.name,M,y,t)&&R()}),h.append(b,v),d.append(h),R()}}a.append(d)}return a}var yn,Gi,g_,y_,tU,o2,zf,x_,xy,i2,r2,l2=T(()=>{"use strict";$z();e_();h_();yn=new Map,Gi=new Map,g_=new WeakSet,y_=new WeakMap,tU=`.design-react-source{display:block;padding:0 0 8px;color:#77736f;font-size:10px;overflow-wrap:anywhere}.design-react-inside{padding:10px 12px}.design-react-inside button{padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-react-inside button:hover{text-decoration:underline}.design-react-field.design-field{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 8px;height:auto;min-height:28px;margin-top:4px;background:none;box-shadow:none;color:#898680;font-size:11px}.design-react-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-field.design-field>:is(input,select){box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background-color:#ffffff0a;color:#f1efeb;font:inherit;font-size:11px}.design-react-field.design-field>:is(input,select):focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.design-react-field.design-field>select{padding-right:20px}.design-react-field input[type=checkbox]{justify-self:end;width:14px;height:14px;accent-color:#bda6ef}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field .design-token-binding{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;margin-top:4px;color:#77736f;font-size:10px}.design-react-field .design-token-binding select{min-width:0;height:24px;border:0;border-radius:6px;appearance:none;background:#ffffff0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E") right 6px center/8px no-repeat;color:#e9e6e1;padding:0 18px 0 6px;font:inherit;font-size:10px;cursor:pointer}.design-react-field .design-token-binding[data-mode=token] select{background-color:#bda6ef24;color:#e6dcfb}.design-token-binding__state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.design-field>.design-token-binding{display:contents}.design-field:has(>.design-token-binding)>input[data-property]{padding-right:28px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{position:absolute;top:4px;right:4px;width:20px;height:20px;box-sizing:border-box;border-radius:5px}.design-token-icon{display:grid;place-items:center;color:#77736f;opacity:0;pointer-events:none;transition:opacity .12s}.design-token-icon::before{content:'';width:6px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;rotate:45deg}.design-field:is(:hover,:focus-within) .design-token-icon{opacity:1}.design-field>.design-token-binding select{margin:0;padding:0;border:0;opacity:0;cursor:pointer;appearance:none}.design-field>.design-token-binding select:hover+.design-token-icon,.design-field:has(.design-token-binding select:hover) .design-token-icon{background:#ffffff14;color:#e9e6e1}.design-field:has(.design-token-binding select:focus-visible) :is(.design-token-icon,.design-token-chip){outline:2px solid #bda6ef;outline-offset:1px;opacity:1}.design-field[data-token-mode=override] .design-token-icon{opacity:1;color:#e7c27d}.design-token-chip,.design-token-detach{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected])>[data-property]{visibility:hidden}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-chip{position:absolute;inset:4px 28px 4px var(--lead,4px);display:flex;align-items:center;gap:5px;padding:0 6px;border-radius:4px;background:#bda6ef1f;color:#e6dcfb;font-size:11px;white-space:nowrap;overflow:hidden;pointer-events:none}.design-token-chip::before{content:'';flex:none;width:5px;height:5px;border:1.2px solid #c8b5f4;border-radius:1px;rotate:45deg}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-binding select{left:var(--lead,4px);right:28px;width:auto}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-icon{display:none}.design-field:is([data-token-mode=token],[data-token-mode=connected]) .design-token-detach{display:grid;place-items:center;color:#898680}.design-token-detach:hover{background:#ffffff14;color:#f1efeb}.design-token-detach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.design-theme-group .design-react-source{padding:0 0 6px}.design-theme-heading{display:block;padding:8px 0 2px;color:#77736f;font-size:10px;text-transform:capitalize}.design-theme-token{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 20px;align-items:center;gap:6px;margin-top:4px}.design-theme-token>span{overflow:hidden;color:#898680;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.design-theme-token[data-changed]>span{color:#e6dcfb}.design-theme-token[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-8px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-theme-reset{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:none;color:#77736f;cursor:pointer}.design-theme-reset:disabled{visibility:hidden}.design-theme-reset:hover{background:#ffffff14;color:#f1efeb}.design-theme-reset svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-token-off{position:absolute;top:8px;right:24px;display:grid;place-items:center;width:12px;height:12px}.design-token-off::before{content:'';width:4px;height:4px;border-radius:50%;background:#e7c27d;opacity:.7}.design-token-off[hidden]{display:none}.design-field:has(>.design-token-binding>.design-token-off:not([hidden]))>input[data-property]{padding-right:38px}.design-theme-switch{padding:6px 12px 8px}.design-theme-switch .design-react-field>span{text-transform:capitalize}.design-theme-options{display:flex;min-width:0;padding:2px;border-radius:6px;background:#ffffff0a}.design-theme-options button{flex:1;min-width:0;height:24px;padding:0 6px;border:0;border-radius:4px;background:none;color:#898680;font:inherit;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.design-theme-options button:hover{color:#f1efeb}.design-theme-options button[aria-pressed=true]{background:#ffffff1a;color:#f1efeb}.design-theme-options button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}@media (max-width:520px){.design-theme-options button{height:30px}.design-react-field.design-field>:is(input,select){height:34px}.design-token-icon,.design-token-detach,.design-field>.design-token-binding select{top:7px}.design-token-off{top:11px}}`;o2=new Map;zf=e=>String(e).replace(/\s+/g," ").trim();x_=!1;xy=new Map;r2=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1)});var H_={};Ao(H_,{bindInlineTextTools:()=>kU,canEditText:()=>__,createInlineTextTools:()=>z_,createTextPreviewHistory:()=>R_,startInlineTextEditor:()=>V_,textEditBlocker:()=>c2});function D_(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function Uc(e,t,n){if(n&&e.childElementCount)for(let[o,i]of n)o.data=i;else e.textContent=t}function R_(){let e=new Map,t=new Map,n=[],o=new Map;return{record(i){!i.reactProp&&i.before!==i.after&&(e.has(i.element)||(e.set(i.element,i.before),t.set(i.element,i.nodes)),n.push(i))},remember(i,r){e.has(i)||e.set(i,r)},original(i){return e.get(i)},reconcile(i,r){e.get(i)===r&&e.delete(i)},reset(i){let r=e.get(i);r!==void 0&&Uc(i,r,t.get(i)),e.delete(i);for(let a=n.length-1;a>=0;a--)n[a].element===i&&n.splice(a,1)},proposal(i){let r=e.get(i),a=i.textContent??"";return r!==void 0&&r!==a?`Proposed inline text change (preview only)
 - Text: ${JSON.stringify(r)} \u2192 ${JSON.stringify(a)}
 - Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[i,r]of e)Uc(i,r,t.get(i));e.clear(),n.length=0},showBefore(i){if(i)for(let[r,a]of e){let s=t.get(r);o.set(r,[r.textContent??"",s?.map(([l])=>[l,l.data])]),Uc(r,a,s)}else for(let[r,[a,s]]of o)Uc(r,a,s);i||o.clear()},undo(){let i=n.pop();return i?(Uc(i.element,i.before,i.nodes),e.get(i.element)===i.before&&e.delete(i.element),i.element):null}}}function z_(e){let t=R_(),n=null,o=!1;function i(a=!1){let s=n;s&&(n=null,s.finish(a),e.onChange())}async function r(a){let s=e.selected();if(n&&n.element===s){i();return}if(!s||!e.active()||o||n)return;let l=c2(s);if(l){e.status.textContent=l;return}o=!0,e.status.textContent="Loading inline text editor\u2026",e.onChange();try{let c=await V_(s,{async loadReactBridge(){return await Promise.resolve().then(()=>(l2(),s2))},onFinish(u,d){!d&&!u.reactProp&&u.before!==u.after?(t.record(u),e.onCommit(s),e.status.textContent="Text preview \xB7 resets on exit"):u.reactProp&&(e.status.textContent="React state preview \xB7 resets on exit")}});c?e.active()&&e.selected()===s?(n=c,a&&CU(s,a.clientX,a.clientY),e.status.textContent=s.hasAttribute("data-komo-text-prop")?"React state preview \xB7 resets on exit":"Editing text \xB7 preview only"):c.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{o=!1,e.onChange()}}return{get element(){return n?.element??null},get busy(){return o},isEditing(a){return!!n&&n.element===a},toggle:r,finish:i,handleKey(a){if(!n||!a.composedPath().includes(n.element)||!n.handleKey(a))return!1;let s=n.element;return i(a.key==="Escape"),s.blur(),!0},hasChanges(a){return t.original(a)!==void 0},undo(){let a=t.undo();return e.onChange(),a},reset(a){t.reset(a),e.onChange()},reconcile(a,s){t.reconcile(a,s),e.onChange()},proposal(a){return t.proposal(a)},restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function kU(e){let t=z_(e);return e.button.addEventListener("click",n=>{t.toggle(n)}),t}function CU(e,t,n){let o=document.caretPositionFromPoint?.(t,n),i=o?document.createRange():document.caretRangeFromPoint?.(t,n);if(o&&i&&i.setStart(o.offsetNode,o.offset),!i||!e.contains(i.startContainer))return;i.collapse(!0);let r=document.getSelection();r?.removeAllRanges(),r?.addRange(i)}function c2(e){return e.matches("input,textarea,select")?"Form fields can't be edited as text.":e.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":e.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":e.closest("[contenteditable]")?"This text is already editable on the page.":D_(e).some(t=>t.data.trim()&&!t.parentElement?.closest(L_))?null:"No text here. Double-click the text itself."}function __(e){return!c2(e)}function O_(e){let t=e.textContent??"",n=document.getSelection(),o=n?.rangeCount?n.getRangeAt(0):null;return!o||!e.contains(o.commonAncestorContainer)?-1:o.startContainer===e?Math.min([...e.childNodes].slice(0,o.startOffset).reduce((i,r)=>i+(r.textContent?.length??0),0),t.length):o.startContainer.nodeType===Node.TEXT_NODE?Math.min(o.startOffset,t.length):t.length}function j_(e,t){let n=e.firstChild,o=document.getSelection();if(!n||!o)return;let i=document.createRange();i.setStart(n,Math.min(t,n.textContent?.length??0)),i.collapse(!0),o.removeAllRanges(),o.addRange(i)}function AU(e,t){let n=O_(e);if(n<0)return;let o=e.textContent??"",i=t.slice(0,Math.max(0,500-o.length));e.textContent=o.slice(0,n)+i+o.slice(n),j_(e,n+i.length)}async function V_(e,t){if(!__(e))return null;let n=null,o=null;if(e.dataset.komoTextProp&&(n=await t.loadReactBridge(),o=n.beginReactTextEdit(e),!o))return null;let i=o?.before??(e.textContent??"").slice(0,500),r=!o&&e.childElementCount>0,a=r?D_(e).map(A=>[A,A.data]):void 0,s={role:e.getAttribute("role"),label:e.getAttribute("aria-label"),multiline:e.getAttribute("aria-multiline"),spellcheck:e.getAttribute("spellcheck")},l=new AbortController,c=!1;function u(){e.removeAttribute("contenteditable"),e.removeAttribute("data-komo-inline-editing");for(let[A,R]of[["role",s.role],["aria-label",s.label],["aria-multiline",s.multiline],["spellcheck",s.spellcheck]])R===null?e.removeAttribute(A):e.setAttribute(A,R)}let d=-1,f=new MutationObserver(()=>{d>=0&&j_(e,d)}),m=()=>{r||(e.childElementCount&&(e.textContent=e.textContent??""),(e.textContent??"").length>500&&(e.textContent=(e.textContent??"").slice(0,500)),o&&n&&(d=O_(e),n.previewReactTextEdit(e,o.propName,e.textContent??"")||(e.textContent=i)))},y=(A,R)=>{let S=A.startContainer;if(S!==A.endContainer||!(S instanceof Text)||!e.contains(S)||S.parentElement?.closest(L_))return;let M=A.endOffset-A.startOffset,z=R.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(e.textContent??"").length+M));S.replaceData(A.startOffset,M,z);let D=document.createRange();D.setStart(S,A.startOffset+z.length);let H=document.getSelection();H?.removeAllRanges(),H?.addRange(D)},x=A=>{if(d=-1,!r||A.inputType==="insertCompositionText")return;A.preventDefault();let R=A.getTargetRanges()[0],S=A.inputType;R&&(S.startsWith("delete")||S==="insertText"||S==="insertReplacementText")&&y(R,S.startsWith("delete")?"":A.data??A.dataTransfer?.getData("text/plain")??"")},E=A=>{A.preventDefault();let R=A.clipboardData?.getData("text/plain")??"",S=document.getSelection();if(r){S?.rangeCount&&y(S.getRangeAt(0),R);return}AU(e,R.replace(/[\r\n]+/g," ").slice(0,500)),m()},g=A=>A.preventDefault();e.addEventListener("beforeinput",x,{signal:l.signal}),e.addEventListener("input",m,{signal:l.signal}),o&&f.observe(e,{childList:!0,characterData:!0,subtree:!0}),e.addEventListener("paste",E,{signal:l.signal}),e.addEventListener("drop",g,{signal:l.signal}),e.setAttribute("contenteditable","true"),e.setAttribute("role","textbox"),e.setAttribute("aria-label","Inline text preview"),e.setAttribute("aria-multiline","false"),e.dataset.komoInlineEditing="true",e.spellcheck=!1,e.focus({preventScroll:!0});let h=document.getSelection(),b=document.createRange();return b.selectNodeContents(e),b.collapse(!1),h?.removeAllRanges(),h?.addRange(b),{element:e,finish(A=!1){if(c)return;c=!0,l.abort(),f.disconnect(),!r&&e.childElementCount&&(e.textContent=e.textContent??"");let R=(e.textContent??"").slice(0,500);u(),A?(o&&n&&n.cancelReactTextEdit(e,o.propName,i),Uc(e,i,a)):o&&n&&n.finishReactTextEdit(e,o.propName,i,R),t.onFinish({element:e,before:i,after:R,nodes:a,...o?{reactProp:o.propName}:{}},A)},handleKey(A){return A.isComposing?!1:A.key==="Enter"||A.key==="Escape"?(A.preventDefault(),A.stopImmediatePropagation(),!0):!1}}}var L_,B_=T(()=>{"use strict";L_="script,style,svg,input,textarea,select,[data-private],[data-sensitive]"});var U_={};Ao(U_,{createDesignMode:()=>MU});function MU(e){let t=C("style");t.textContent=Tz;let n=null,o=Promise.resolve().then(()=>(Nz(),Bz)).then(j=>{t.textContent+=j.designPanelStyles,n=j},()=>{E.textContent="Design controls unavailable \xB7 try again"}),i=C("aside","design-inspector");i.setAttribute("role","dialog"),i.setAttribute("aria-label","Design mode inspector"),i.setAttribute("aria-hidden","true"),i.hidden=!0;let r=C("div","design-outline");r.setAttribute("aria-hidden","true");let a=C("div","design-inspector__heading"),s=Js("design-inspector__parent");s.hidden=!0;let l=C("span","design-inspector__target"),c=C("small"),u=Js("design-inspector__close");u.setAttribute("aria-label","Exit design mode"),u.append(ct("close"));let d=Js("design-inspector__fold");d.append(ct("chevron"));let f=C("div","design-inspector__identity");f.append(s,l,c),a.append(f,d,u);let m=C("div","design-inspector__controls"),y=C("div","design-inspector__bar"),x=C("span","design-inspector__count");x.title="Preview only \xB7 resets on exit";let E=C("p","design-inspector__status");E.setAttribute("role","status");let g=C("div","design-inspector__actions"),h=(j,X)=>{let ne=Js("design-inspector__tool");return ne.dataset.tip=j,ne.setAttribute("aria-label",j),ne.innerHTML=X,ne},b=h("Undo",N_("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),v=h("Reset",N_("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),A=h("Copy CSS","");A.append(ct("copy"));let R=Js("","Comment"),S=Js("design-text-edit","Edit text");S.title="Edit text",S.setAttribute("aria-label","Edit selected text inline"),g.append(b,v,A,R);let M=C("div","design-inspector__compare");M.setAttribute("role","group"),M.setAttribute("aria-label","Compare with the page");let z=["Before","After"].map((j,X)=>{let ne=Js("",j);return ne.dataset.tip=`${j} \xB7 ${X?"\u2192":"\u2190"} or B`,ne.setAttribute("aria-pressed",String(!!X)),ne.addEventListener("click",()=>ye(!X)),M.append(ne),ne});y.append(x,M,E,g),i.append(a,m,y),e.root.append(t,r),(e.panelRoot??e.root).append(i);let D=!1,H=0,_=null,ie=null,J=null,se=0,Ie=0,yt=null,Y="",me=null,xe=null,be=new Map,Me=new Map,Le=new WeakMap,oe=new WeakMap,ee=new AbortController,rt=()=>Promise.resolve().then(()=>(Uz(),Pz)),Qt,je=j=>{Qt??=rt().then(({footerTips:X})=>X(y,e.root,ee.signal,j),()=>{Qt=void 0})};y.addEventListener("pointerover",je),y.addEventListener("focusin",je);let ln=new Set,B=[];function Z(j,X,ne=j.style.getPropertyValue(X),pe=j.style.getPropertyPriority(X)){let ke=be.get(j);ke||be.set(j,ke=new Map),ke.has(X)||ke.set(X,{value:ne,priority:pe,computed:getComputedStyle(j).getPropertyValue(X).trim()})}function re(j,X){let ne=Me.get(j);ne||Me.set(j,ne=new Map);let pe=j.style.getPropertyValue(X);pe===(be.get(j)?.get(X)?.value??"")?ne.delete(X):ne.set(X,pe),ne.size||Me.delete(j),nt(_,"selected")}function ve(){let j=_,X=j?(Me.get(j)?.size??0)+ +!!J?.hasChanges(j)+ +!!me?.hasReactPropChanges(j)||+!!me?.hasDesignTokenEdit(j):0;return x.textContent=X?`${X} change${X>1?"s":""}`:"",y.toggleAttribute("data-changes",X>0||!b.disabled),M.hidden=!X&&!ae,X}let $=0;new MutationObserver(()=>{let j=E.textContent??"";E.title=j,y.toggleAttribute("data-message",!!j),clearTimeout($),j&&($=window.setTimeout(function X(){J?.element?$=window.setTimeout(X,2600):E.textContent=""},2600))}).observe(E,{childList:!0,characterData:!0,subtree:!0});let ae=!1;function ye(j){if(j===ae)return;j&&J?.element&&_n(),ae=j;let X=!u2();for(let[ne,pe]of Me){let ke=ne.style.transition;X&&(ne.style.transition=[...pe.keys()].map(st=>`${st} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[st,xt]of pe){let Xe=be.get(ne)?.get(st);j?Ne(ne,st,Xe):ne.style.setProperty(st,xt,Xe?.priority)}X&&window.setTimeout(()=>ne.style.transition=ke,320)}J?.showBefore(j),me?.showDesignBefore(j),z.forEach((ne,pe)=>ne.setAttribute("aria-pressed",String(!pe===j))),i.toggleAttribute("data-before",j),en()}function Ne(j,X,ne){ne?.value?j.style.setProperty(X,ne.value,ne.priority):j.style.removeProperty(X)}function Ut(j,X,ne){_&&(j.setAttribute("aria-invalid",String(ne===null)),ne!==null&&(Z(_,X),me?.noteDesignTokenOverride(_,X,ne),_.style.setProperty(X,ne,be.get(_)?.get(X)?.priority),re(_,X),en()))}function Dt(j,X,ne=!0){if(!_)return;let pe={value:_.style.getPropertyValue(X),priority:_.style.getPropertyPriority(X)},ke=oe.get(j),st=ke?.before??Le.get(j)??{value:"",priority:""};if(pe.value===st.value&&pe.priority===st.priority)ke&&B.splice(B.indexOf(ke),1),oe.delete(j);else if(ke)ke.after=pe;else{let xt={kind:"style",element:_,property:X,before:st,after:pe};B.push(xt),oe.set(j,xt)}ne&&(Le.set(j,pe),oe.delete(j)),en()}function at(){if(m.replaceChildren(),Yt(),!_){let ke=C("div","design-inspector__empty"),st=C("strong","","Select an element"),xt=C("ul"),Xe=(...Wo)=>{let eo=C("li");Wo.forEach((_r,Ha)=>{Ha%2===0?eo.append(_r):eo.append(C("kbd","",_r))}),xt.append(eo)};Xe("","Click"," to inspect"),Xe("","Double-click"," text to edit"),e.exitKey?Xe("","Esc"," or ",e.exitKey," to exit"):Xe("","Esc"," to exit"),ke.append(ct("design"),st,xt),m.append(ke),l.textContent="Select an element",c.textContent="",s.hidden=!0;return}let j=`${_.tagName.toLowerCase()}${_.id?`#${_.id}`:""}`;l.textContent=j,c.textContent=_ instanceof HTMLIFrameElement?"Frame only \xB7 contents are isolated":_.classList.length?`.${[..._.classList].slice(0,2).join(".")}`:"";let X=_.parentElement;s.hidden=!X||X===document.body||X===document.documentElement,s.textContent=X?.tagName.toLowerCase()??"",s.setAttribute("aria-label",`Select parent ${s.textContent}`);let ne=_,pe=n;if(!pe){o.then(()=>{D&&_===ne&&at()});return}pe.renderPanel(m,{element:ne,changed:Me.get(ne),collapsed:ln,editText:S,begin:(ke,st)=>Le.set(ke,{value:ne.style.getPropertyValue(st),priority:ne.style.getPropertyPriority(st)}),apply:Ut,commit:Dt,rerender:at}),(e.design||ne.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(xe??=Promise.resolve().then(()=>(l2(),s2)).then(ke=>me=ke).catch(ke=>{throw xe=null,ke}),xe.then(ke=>{if(!D||_!==ne||m.querySelector(".design-react-group, .design-theme-group"))return;let st=e.root;ke.attachThemeSwitcher(m,e.design,()=>Qn(ne),st);let xt=ke.createReactPropsPanel(ne,()=>{E.textContent="React state preview \xB7 resets on exit",en()},st,Qn,e.design);xt&&m.append(xt),ke.attachStyleTokenControls(ne,pe.fields,m,(Wo,eo,_r)=>{Z(ne,Wo.property,_r),re(ne,Wo.property),Le.set(eo,{value:_r,priority:ne.style.getPropertyPriority(Wo.property)}),Dt(eo,Wo.property)},st,pe.valueFor,pe.toHex,e.design,Wo=>{B.push({element:ne,undo:Wo}),en()});let Xe=ke.createDesignThemePanel(ne,pe,en,st);Xe&&m.append(Xe)}).catch(()=>{}))}function Yt(){i.toggleAttribute("data-empty",R.hidden=!_),i.parentElement?.toggleAttribute("data-design-empty",D&&!_)}function nt(j,X,ne=!1){if(!D||!j?.isConnected){r.hidden=!0;return}let pe=j.getBoundingClientRect();if(!pe.width||!pe.height){r.hidden=!0;return}if(r.hidden=!1,r.dataset.kind=X,ne&&(j!==yt||X!==Y)){yt=j,Y=X,clearTimeout(Ie);let ke=i.getBoundingClientRect(),st=xt=>pe.left<xt+ke.width&&pe.right>xt&&pe.top<ke.bottom&&pe.bottom>ke.top;e.flip&&ke.width&&st(ke.left)&&!st(document.documentElement.clientWidth-ke.right)&&(Ie=window.setTimeout(e.flip,X==="hover"?350:0))}Object.assign(r.style,{left:`${pe.left}px`,top:`${pe.top}px`,width:`${pe.width}px`,height:`${pe.height}px`})}function We(){se||(se=requestAnimationFrame(()=>{se=0,nt(_??ie,_?"selected":"hover")}))}let Jt=typeof ResizeObserver=="function"?new ResizeObserver(We):null;function Qn(j){!(j instanceof HTMLElement)||e.host.contains(j)||(J?.element&&J.element!==j&&_n(),Jt?.disconnect(),Jt?.observe(j),_=j,ie=j,at(),nt(j,"selected",!0),en())}let Va=()=>P_("(max-width:520px)");function cn(j){i.toggleAttribute("data-folded",j&&Va()),d.setAttribute("aria-expanded",String(!i.hasAttribute("data-folded"))),d.setAttribute("aria-label",i.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Rt(j){cn(!1),Va()&&requestAnimationFrame(()=>{let X=j.getBoundingClientRect(),ne=i.getBoundingClientRect().top-12;X.top>=12&&X.bottom<=ne||window.scrollBy({top:X.top-Math.max(12,(ne-X.height)/2),behavior:u2()?"auto":"smooth"})})}function en(){We(),b.disabled=!B.length&&!me?.canUndoReactProp(_)&&!me?.canUndoDesignTokenEdit(_),v.disabled=!ve(),A.disabled=!_||!Me.get(_)?.size,R.disabled=!_,S.disabled=!!J?.busy||!_?.isConnected,S.textContent=J?.isEditing(_)?"Done editing":"Edit text",S.setAttribute("aria-label",J?.isEditing(_)?"Finish inline text editing":"Edit selected text inline")}function _n(j=!1){J?.finish(j),en()}S.addEventListener("click",j=>{J||_&&(E.textContent="Loading inline text editor\u2026",Promise.resolve().then(()=>(B_(),H_)).then(X=>{J||!_||!D||(J=X.bindInlineTextTools({button:S,status:E,selected:()=>_,active:()=>D,onChange:en,onCommit(ne){B.push({kind:"text",element:ne})}}),J.toggle(j))}).catch(()=>{E.textContent="Inline text editing is unavailable."}))});function yi(j){if(!D||j.composedPath().includes(e.host))return;let X=e.targetAt(j.clientX,j.clientY);!(X instanceof HTMLElement)||e.host.contains(X)||(ie=X,_||nt(ie,"hover",!0))}function zr(j){if(!D||j.composedPath().includes(e.host))return;let X=e.targetAt(j.clientX,j.clientY);!(X instanceof HTMLElement)||e.host.contains(X)||J?.element&&(X===J.element||J.element.contains(X))||(J?.element&&_n(),j.preventDefault(),j.stopImmediatePropagation(),Qn(X))}function bt(j){!D||j.composedPath().includes(e.host)||(j.preventDefault(),j.stopImmediatePropagation(),_&&Rt(_),j.detail===2&&_?.contains(j.target)&&!S.disabled&&!J?.element&&S.dispatchEvent(new MouseEvent("click",j)))}function $t(j){if(J?.handleKey(j)){S.focus({preventScroll:!0});return}let X=j.key.toLowerCase(),ne=j.composedPath()[0];if(D&&!M.hidden&&!j.metaKey&&!j.ctrlKey&&!j.altKey&&(X==="b"||X==="arrowleft"||X==="arrowright")&&!(ne instanceof HTMLElement&&(ne.isContentEditable||ne.matches("input, textarea, select")))){j.preventDefault(),j.stopImmediatePropagation(),ye(X==="b"?!ae:X==="arrowleft");return}if(D&&!J?.element&&(j.key==="Enter"||j.key===" ")&&!j.composedPath().includes(e.host)){let pe=document.activeElement;if(pe instanceof HTMLElement&&pe!==document.body&&pe!==document.documentElement){j.preventDefault(),j.stopImmediatePropagation(),Qn(pe),Rt(pe);return}}D&&j.key==="Escape"&&(j.preventDefault(),j.stopImmediatePropagation(),Jn(!1),e.onExit())}function Jn(j){if(!j){ye(!1),J?.finish();for(let[X,ne]of be)for(let[pe,ke]of ne)Ne(X,pe,ke);be.clear(),Me.clear(),B.length=0,J?.restoreAll(),me?.resetPreviews(),en()}clearTimeout(H),H=0,D=j,Yt(),j?(i.hidden=!1,i.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{D&&(i.dataset.state="active")}),r.hidden=!_,at(),cn(!_),nt(_,"selected"),u.focus({preventScroll:!0})):(r.hidden=!0,i.setAttribute("aria-hidden","true"),i.dataset.state="closing",u2()?(i.hidden=!0,delete i.dataset.state):H=window.setTimeout(()=>{H=0,D||(i.hidden=!0,delete i.dataset.state)},250))}d.addEventListener("click",()=>cn(!i.hasAttribute("data-folded"))),s.addEventListener("click",()=>Qn(_?.parentElement??null)),u.addEventListener("click",()=>{J?.element&&_n(),Jn(!1),e.onExit()}),b.addEventListener("click",()=>{let j=B.pop();j?j.kind?j.kind==="text"?_===(J?.undo()??j.element)&&at():(Ne(j.element,j.property,j.before),me?.syncDesignTokenBinding(j.element,j.property),re(j.element,j.property),_===j.element&&at(),nt(_??ie,_?"selected":"hover")):(j.undo(),at()):(_&&(me?.undoDesignTokenEdit(_),me?.undoReactProp(_),at()),E.textContent="React state preview \xB7 resets on exit"),en(),(b.disabled?u:b).focus({preventScroll:!0})}),v.addEventListener("click",()=>{if(!_)return;J?.isEditing(_)&&_n(!0);let j=Me.get(_),X=J?.hasChanges(_)??!1,ne=me?.hasReactPropChanges(_)??!1,pe=me?.hasDesignTokenEdit(_)??!1;if(!(!j?.size&&!X&&!ne&&!pe)){X&&J?.reset(_);for(let ke of j?.keys()??[])Ne(_,ke,be.get(_)?.get(ke));Me.delete(_),ne&&me?.resetReactProps(_),pe&&me?.resetDesignTokenEdits(_);for(let ke=B.length-1;ke>=0;ke--)B[ke].element===_&&B.splice(ke,1);at(),nt(_,"selected"),en(),u.focus({preventScroll:!0})}}),A.addEventListener("click",()=>{let j=_,X=j?Me.get(j):void 0;!j||!X?.size||rt().then(async({cssText:ne})=>{let pe=ne(j,X);try{await navigator.clipboard.writeText(pe),E.textContent="CSS copied"}catch{E.textContent=pe}})}),R.addEventListener("click",()=>{let j=_;j&&(J?.isEditing(j)&&_n(),rt().then(({designProposal:X})=>e.onComment(j,X(j,Me.get(j),ne=>be.get(j)?.get(ne)?.computed,me?.tokenBoundProperties(j),[J?.proposal(j),me?.proposedDesignChanges(j)],me?.designContext(j,e.design))),()=>{E.textContent="Comment unavailable \xB7 try again"}))});let wo=()=>ye(!1);for(let j of[m,g,S])for(let X of["pointerdown","focusin","click"])j.addEventListener(X,wo,!0);return document.addEventListener("pointermove",yi,{capture:!0,signal:ee.signal}),document.addEventListener("pointerdown",zr,{capture:!0,signal:ee.signal}),document.addEventListener("click",bt,{capture:!0,signal:ee.signal}),document.addEventListener("keydown",$t,{capture:!0,signal:ee.signal}),window.addEventListener("scroll",We,{capture:!0,passive:!0,signal:ee.signal}),window.addEventListener("resize",We,{passive:!0,signal:ee.signal}),{setActive:Jn,mountPanel(j){i.parentElement!==j&&(i.parentElement?.removeAttribute("data-design-empty"),j.append(i),Yt())},get active(){return D},ready:o,destroy(){J?.finish(!0),Jn(!1),clearTimeout(H),clearTimeout($),clearTimeout(Ie),Jt?.disconnect(),ee.abort(),cancelAnimationFrame(se),i.remove(),r.remove(),t.remove()}}}var Js,P_,u2,N_,$_=T(()=>{"use strict";Sz();jn();Js=(e,t)=>Object.assign(C("button",e,t),{type:"button"}),P_=e=>typeof matchMedia=="function"&&matchMedia(e).matches,u2=()=>P_("(prefers-reduced-motion: reduce)"),N_=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>`});var aS=e=>`komo:setup:${e.endpoint}:${e.onboarding?.code}`;function sS(e,t){try{localStorage.setItem(aS(e),JSON.stringify({project:t.project,repo:t.repo}))}catch{}}function lS(e){if(!e.onboarding?.inProject)return e;try{let t=JSON.parse(localStorage.getItem(aS(e))||"null");if(typeof t?.project=="string"&&t.project.startsWith("komo_")&&typeof t.repo=="string")return{...e,project:t.project,repo:t.repo,onboarding:void 0}}catch{}return e}function cS(e,t){let n=e.split(/\s+/).filter(Boolean).map(i=>{let r;try{r=new URL(i)}catch{throw new Error("Enter a full HTTPS site address, such as https://your-site.com.")}if(r.protocol!=="https:"||r.username||r.password)throw new Error("Use HTTPS addresses for production and preview sites.");return r.origin}),o=[...new Set([t,...n])];if(o.length>10)throw new Error("Connect up to ten sites at a time.");return o}function uS(e,t,n=[location.origin]){let o=new URL(e.endpoint),i=new URL("/setup/connect",o);i.searchParams.set("code",e.onboarding.code),i.searchParams.set("origin",location.origin),i.searchParams.set("sites",JSON.stringify(n));let r=window.open("about:blank","komo-connect","popup,width=600,height=720");return r?new Promise((a,s)=>{let l=()=>{window.removeEventListener("message",d),t.removeEventListener("abort",u),clearInterval(f),clearTimeout(m),r.close()},c=y=>{l(),s(new Error(y))},u=()=>c("Setup closed. Reopen komo to try again."),d=y=>{let x=y.data;y.origin!==o.origin||y.source!==r||x?.type!=="komo:setup"||x.code!==e.onboarding?.code||typeof x.project!="string"||!/^komo_[a-f0-9]{32}$/.test(x.project)||typeof x.repo!="string"||typeof x.token!="string"||!x.token||x.user?.verified!==!0||typeof x.user.id!="string"||!x.user.id.startsWith("google:")||typeof x.user.name!="string"||(l(),a(x))},f=window.setInterval(()=>{r.closed&&c("Sign-in closed. Try connecting again.")},1e3),m=window.setTimeout(()=>c("Setup expired. Run komo init again."),6e5);window.addEventListener("message",d),t.addEventListener("abort",u,{once:!0}),t.aborted?u():r.location.href=i.href}):Promise.reject(new Error("Allow popups to connect komo."))}function dS(e){let t,n=!1,o=!1,i=!1,r=0,a=()=>{if(clearTimeout(t),o||!e.enabled())return;let c=e.active()?Math.min(Math.max(15e3,e.interval),e.interval*2**Math.min(r,3)):Math.max(6e4,e.interval);t=setTimeout(s,c*(.9+Math.random()*.2))},s=async()=>{if(!(o||!e.enabled())){if(n){i=!0;return}n=!0;try{r=await e.read()?0:r+1}catch{r++}finally{n=!1,i?(i=!1,l()):a()}}};function l(c=!0){r=0,clearTimeout(t),c?s():n||a()}return{wake:l,stop(){o=!0,clearTimeout(t)}}}function np(e,t){let n=e.x<t/2?"right":"left",o=e.component;if(!o)return n;let{left:i,top:r,right:a,bottom:s}=o;if(a<=i||s<=r)return n;let c=Math.hypot(Math.max(i-e.x,0,e.x-a),Math.max(r-e.y,0,e.y-s))||Math.min(e.x-i,a-e.x,e.y-r,s-e.y),u=(i+a)/2;return c>100||e.x===u?n:e.x<u?"right":"left"}function fS(e,t){let n=new Map;for(let i of e){if(i.resolved||i.anchor.unstacked)continue;let r=t(i);if(r===null)continue;let a=n.get(r)??[];a.push(i),n.set(r,a)}let o=new Map;for(let i of n.values())if(!(i.length<2)){i.sort((r,a)=>r.createdAt-a.createdAt||r.id.localeCompare(a.id));for(let r of i)o.set(r.id,i)}return o}var op=class{constructor(t,n,o=i=>i){this.confirmed=t;this.changed=n;this.normalize=o}confirmed;changed;normalize;jobs=[];aliases=new Map;revision=0;get busy(){return this.jobs.length>0}id=t=>this.aliases.get(t)??t;get value(){return this.normalize(this.jobs.reduce((t,n)=>n.change(t,this.id),this.confirmed),this.id)}replace(t,n=this.revision){return this.busy||n!==this.revision?!1:(this.confirmed=t,this.changed(this.value),!0)}reset(t){let n=this.jobs;this.jobs=[],this.aliases.clear(),this.confirmed=t,this.revision++;for(let o of n)o.reject(new DOMException("Session changed","AbortError"));this.changed(this.value)}submit(t,n){let o=new Promise((i,r)=>{this.jobs.push({change:t,save:n,resolve:i,reject:r})});return this.revision++,this.changed(this.value),this.jobs.length===1&&this.drain(),o}async drain(){for(;this.jobs.length;){let t=this.jobs[0],n,o=!1;try{let i=await t.save(this.id);if(this.jobs[0]!==t)return;this.confirmed=t.change(this.confirmed,this.id);for(let[r,a]of Object.entries(i??{}))this.aliases.set(r,a);this.confirmed=this.normalize(this.confirmed,this.id)}catch(i){o=!0,n=i}if(this.jobs[0]!==t)return;this.jobs.shift(),this.revision++,this.changed(this.value),o?t.reject(n):t.resolve()}}};var pS=e=>e.split(`
 `).map(t=>`> ${t}`).join(`
@@ -1695,6 +1695,10 @@ ${rz}
 .account-layer .account button { border-radius: 12px; }
 .account-layer .account .primary { background: #bda6ef; color: #211b2d; font-weight: 600; }
 .account-layer .account .primary:disabled { opacity: .4; cursor: default; }
+.account-layer .account .primary[aria-busy="true"] { opacity: .7; cursor: progress; }
+.account .primary[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid; border-right-color: transparent; border-radius: 50%; animation: busy-spin .7s linear infinite; }
+@keyframes busy-spin { to { rotate: 1turn; } }
+@media (prefers-reduced-motion: reduce) { .account .primary[aria-busy="true"]::after { animation-duration: 2s; } }
  .account-dialog .dialog-head { top: 16px; right: 14px; }
 .account-layer .account .account-avatar-button { padding: 0; border-radius: 50%; background: transparent; position: relative; transition: filter 150ms ease, transform 150ms ease; }
 .account-avatar-button:hover { filter: brightness(.88); transform: scale(1.025); }
@@ -2934,7 +2938,7 @@ textarea {
 `),author:{...S.user},createdAt:w,editedAt:null,reactions:{}};if(k.body.trim()){if(p)Zo.delete(p.id),await B(ln(p.id,L=>({...L,updatedAt:w,comments:[...L.comments,k]})),async L=>{let V=(await S.request(`threads/${L(p.id)}/comments`,"POST",{body:k.body})).id??(await S.list()).find(N=>N.id===L(p.id))?.comments.filter(N=>N.author.id===k.author.id&&N.body===k.body).at(-1)?.id;return V?{[k.id]:V}:{}},()=>{let L=je.id(p.id);Le.some(O=>O.id===L)?Zo.set(L,[k.body,Zo.get(L)].filter(Boolean).join(`
 `)):ee===p.anchor?to=[to,k.body].filter(Boolean).join(`
 `):ne.push({anchor:p.anchor,text:k.body})});else if(ee){let L=ee,O=bi,V=to,N=jr,q={id:`pending-${crypto.randomUUID()}`,page:ni(),anchor:L,tags:O,resolved:!1,resolvedBy:null,createdAt:w,updatedAt:w,comments:[k]};oe=q.id,ee=null,to=jr="",bi=[],await B(F=>[...F,q],async()=>{let F=await S.request("threads","POST",{page:q.page,anchor:L,body:k.body,...O.length?{tags:O}:{}}),te=F.commentId??(await S.list()).find(K=>K.id===F.id)?.comments[0]?.id;return{[q.id]:F.id,...te?{[k.id]:te}:{}}},()=>{ee?ne.push({anchor:L,text:k.body}):(oe=null,ee=L,to=V,jr=N,bi=O)}),_&&!ee&&!Y&&oe===je.id(q.id)&&(Yf()||(oe=null,D&&Xt(!1)),H=!0,Ze())}}}async function F2(){let p=Ic;Ic=null,p&&await p()}let ru=new Map;function Pr(){p2?.then(({resetDesignPreviews:U})=>U(new Set([...Y?[]:Le.find(I=>I.id===oe)?.comments.map(I=>I.id)??[],...un.hidden?[]:[Ty],...ee?["draft"]:[]])));let p=Ut;Ut=void 0,Yc?.(!0),Yc=void 0;let w=ot.activeElement,k=w?.dataset.focusKey,L=k?w?.selectionStart:null,O=!!w?.matches(":focus-visible"),V=it.querySelector(".messages")?.scrollTop??0,N=it.querySelector(".account-dialog")?.scrollTop??0,q=Y?"account":ee?"draft":oe,F=it.firstElementChild,te=Gy(),K=it.classList.contains("thread-pane"),le=pe!==q,ft=F?.getBoundingClientRect(),lt=new Map([...F?.querySelectorAll("[data-comment]")??[]].map(U=>[U.dataset.comment,U.querySelector(".message-reaction")]));if(F&&le&&!Ft()&&!(K&&(te||!it.isConnected))){let U=getComputedStyle(F),I={opacity:U.opacity,transform:U.transform};F.getAnimations().forEach(Ke=>Ke.cancel());let ce={duration:150,easing:"cubic-bezier(.22,1,.36,1)",fill:"forwards"},he=pe==="account"?C("div","account-layer"):K?C("div","thread-pane"):F;he!==F&&he.append(F),F.animate([{transform:I.transform},{transform:K?"translateX(24px)":"translateY(4px) scale(.99)"}],ce);let De=he.animate([{opacity:I.opacity},{opacity:0}],ce);he.inert=!0,he.setAttribute("aria-hidden","true"),F.style.pointerEvents="none",(K?it.parentElement:he!==F&&x?P:ot).append(he),$c.set(he,p),p=void 0,De.finished.catch(()=>{}).finally(()=>{he.remove(),$c.get(he)?.(),$c.delete(he)})}p?.(),it.replaceChildren(),J_(te);let St=P.querySelector(".panel");if(St&&K!==!!te){if(!Ft())for(let I of St.querySelectorAll(":scope > :not(.thread-pane)")){let ce=[{visibility:"visible",opacity:1,transform:"none"},{visibility:"visible",opacity:0,transform:"translateX(-24px)"}];I.animate(te?ce:ce.reverse(),{duration:250,easing:"cubic-bezier(.22,1,.36,1)"})}let U=`[data-thread="${CSS.escape(pe??"")}"] .thread-card`;(te?wy:!ee&&O&&(St.contains(w)||!w.isConnected))&&queueMicrotask(()=>(te?it:St).querySelector(te?".thread-back":U)?.focus({preventScroll:!0})),wy=!1}if(pe=q,it.classList.toggle("account-layer",Y),!ee&&!oe&&!Y){Nr();return}let fe=C("section",Y?"dialog account-dialog":"dialog");Y&&fe.setAttribute("aria-modal","false"),fe.setAttribute("role","dialog"),fe.setAttribute("aria-label",Y?"Reviewer account":ee?"New comment":"Comment thread");let He=C("div","dialog-head row between"),Ce=C("div","row"),$e=Le.find(U=>U.id===oe)??null;if($e&&!Y){let U=(Ke,vt)=>({label:Ke,icon:Ke==="Copy link"?"link":Ke==="Copy selector"?"code":"comment",onSelect:()=>Qe(async()=>{await navigator.clipboard.writeText(vt()),ko("Copied")})}),I=$e.anchor.source,ce=I?e.sourceUrl?.(I,e.branch)??`https://github.com/${e.repo}/blob/${encodeURIComponent(e.branch)}/${I.split("/").map(encodeURIComponent).join("/")}`:"",he=Dg("Comment actions",[...G2($e.comments[0],$e),...ce&&/^(https?:|vscode:|cursor:)/.test(ce)?[{label:"Open source",icon:"code",onSelect:()=>window.open(ce,"_blank","noopener,noreferrer")}]:[],U("Copy link",()=>{let Ke=new URL($e.page,location.origin);return Ke.searchParams.set("comment",$e.id),Ke.href}),U("Copy feedback",()=>[`Repository: ${e.repo}`,`Branch: ${e.branch}`,`Page: ${new URL($e.page,location.origin).href}`,`Target: ${$e.anchor.selector||"Page position"}`,...$e.anchor.source?[`Source: ${$e.anchor.source}`]:[],...$e.anchor.text?[`Element text: ${$e.anchor.text}`]:[],"",...$e.comments.map(Ke=>`${Ke.author.name}: ${Ke.body}`)].join(`
-`)),U("Copy selector",()=>$e.anchor.selector)]);Ce.append(he);let De=ue($e.resolved?"Reopen comment":"Resolve comment",()=>tb($e,By($e.anchor)),"icon","check");De.disabled=!Zf(),Ce.append(De)}if(Ce.append(te?ue("Close sidebar",()=>{Xi(),Xt(!1)},"icon","close"):ue(Y?"Close account":"Close comment",Xi,"icon","close")),te&&He.append(ue("Back to comments",Xi,"icon thread-back","chevron"),$2(C("strong","thread-title"),$e?.comments[0]?.body??"")),He.append(Ce),$e||Y||te?fe.append(He):fe.append(ue("Close comment",Xi,"draft-close icon","close")),Y){let U=C("form","account");if(S.user){Ne??={name:S.user.name,avatarUrl:S.user.avatarUrl??"",accentColor:S.user.accentColor??gb};let I=Ne,ce=qr({...S.user,...I}),he=C("div","account-summary"),De=C("span","account-status");S.user.verified?(De.append(document.createTextNode("Connected with ")),S.user.id.startsWith("google:")&&De.append(f0()),De.append(document.createTextNode(S.user.id.startsWith("google:")?"Google":"GitHub"))):De.textContent="Guest account";let Ke=ue("Update profile photo",()=>Ve.click(),"account-avatar-button");Ke.replaceChildren(ce),he.append(Ke,C("h2","","Your profile"),De),U.append(he);let vt=C("label","account-name-label","Display name"),zt=C("input");zt.value=I.name,zt.name="name",zt.autocomplete="name",zt.required=!0,zt.maxLength=60,zt.dataset.focusKey="profile-name",zt.addEventListener("input",()=>{I.name=zt.value,Qn(I)}),zt.addEventListener("blur",()=>{Qn(I,!0)}),vt.append(zt);let Ve=C("input");Ve.type="file",Ve.accept="image/png,image/jpeg,image/webp",Ve.hidden=!0,Ve.setAttribute("aria-label","Choose profile photo"),Ve.addEventListener("change",()=>Qe(async()=>{let qe=Ve.files?.[0];if(!qe)return;if(qe.size>10*1024*1024)throw new Error("Choose a photo under 10 MB.");let tn=await createImageBitmap(qe),Wi=document.createElement("canvas");Wi.width=Wi.height=128;let Ga=Wi.getContext("2d"),Ka=Math.min(tn.width,tn.height);Ga.drawImage(tn,(tn.width-Ka)/2,(tn.height-Ka)/2,Ka,Ka,0,0,128,128),tn.close();let kt=.8;do I.avatarUrl=Wi.toDataURL("image/jpeg",kt),kt-=.15;while(I.avatarUrl.length>12e3&&kt>.1);if(I.avatarUrl.length>12e3)throw new Error("Choose a smaller photo.");Qn(I,!0),Pr()})),he.append(Ve);let _t=YL(I.accentColor,qe=>{I.accentColor=qe,du(ce,qe),Qn(I)});if(Ut=_t.destroy,U.append(vt,_t.element),e.onboarding){let qe=e.onboarding;U.append(D2(C("section","onboarding-panel"),Promise.resolve().then(()=>(gy(),hy)).then(({onboardingPanel:tn})=>tn(S,qe))))}else U.append(Y_()),b&&U.append(I_()),U.append(R2());if(S.user?.verified&&!e.onboarding?.code&&!e.onboarding?.claimKey&&!e.onboarding?.invite){let qe=C("div");U.append(qe),Promise.resolve().then(()=>(gy(),hy)).then(({projectManagement:tn})=>{qe.isConnected&&qe.replaceWith(tn(S,e.onboarding?.workspace,Wi=>{if(Wi)oe=null,je.replace([],je.revision),U.querySelector(".account-usage")?.remove();else{let Ga=e.onboarding?.workspace?`usage?workspace=${encodeURIComponent(e.onboarding.workspace)}`:"usage";U.querySelector(".account-usage")?.replaceWith(R2(Ga)),oi().catch(()=>{})}}))})}U.addEventListener("submit",qe=>{qe.preventDefault(),Qn(I,!0)});let En=C("div","account-session");En.append(ue("Sign out",()=>Qe(async()=>{if(je.busy||me){ko("Wait for your changes to save.");return}clearTimeout(Dt),We=null;let qe=S.logout();Ua(),Ne=null,Yt=null,Ze();try{await qe}finally{Ua(),Qe(oi),Ze()}}),"secondary")),U.append(En),!S.user.verified&&bt&&U.append(Va()),!S.user.verified&&Jn&&U.append(ue("Sign in with GitHub",()=>Qe(()=>nb()),"primary"))}else{if(U.append(C("h2","",e.onboarding?"Set up komo":"Leave comments")),e.onboarding?.inProject){U.append(C("p","","Connect komo to start leaving feedback on this site. One site per line."));let I=C("label","account-name-label","Production and preview sites"),ce=C("textarea");ce.rows=2,ce.placeholder="https://your-site.com",ce.value=zr,ce.dataset.focusKey="setup-sites",ce.addEventListener("input",()=>{zr=ce.value}),I.append(ce),U.append(I);let he=ue("Connect komo",()=>Qe(async()=>{if(!yi){yi=!0,he.disabled=!0;try{let De=await uS(e,M.signal,cS(zr,location.origin));if(z)return;sS(e,De),e={...e,project:De.project,repo:De.repo,onboarding:void 0},S=new Is(e),S.save(De),Y=!1,Ne=null,pe=null,await uu(),Ze(),ko("komo is connected. Select an element to leave feedback.")}finally{yi=!1,z||Ze()}}}),"primary");he.disabled=yi,U.append(he)}if(wo){let I=C("label","account-name-label","Your name"),ce=C("input");ce.name="name",ce.autocomplete="name",ce.placeholder="Your name",ce.required=!0,ce.maxLength=60,ce.value=Pa,ce.dataset.focusKey="account-name",ce.addEventListener("input",()=>Pa=ce.value),I.append(ce),U.append(I);let he=ue("Continue",()=>{},"primary");he.type="submit",he.disabled=me,U.append(he)}wo&&(bt||Jn)&&U.append(C("div","account-divider","or")),bt&&U.append(Va()),Jn&&U.append(ue("Continue with GitHub",()=>Qe(()=>nb()),"secondary")),U.addEventListener("submit",I=>{I.preventDefault(),Qe(async()=>{await W_(async()=>{await S.guest(Pa),Y=!1}),await F2()})})}fe.append(U)}else if(ee)fe.append(I2(null));else if($e){let U=C("div","messages");for(let ce of $e.comments)U.append(rO(ce,$e));fe.append(U);let I=()=>U.dataset.fade=`${U.scrollTop>2?"top":""} ${U.scrollTop+U.clientHeight<U.scrollHeight-2?"bottom":""}`;if(U.addEventListener("scroll",I,{passive:!0}),requestAnimationFrame(I),r){let ce=K2($e.tags??[],De=>Y2($e,{tag:De}),De=>Y2($e,{untag:De}));ce.classList.add("thread-tags");let he=U.querySelector(".message > .row");te||!he?U.before(ce):he.after(ce)}fe.append(I2($e))}else fe.append(C("div","empty","This comment is no longer available."));if(it.append(fe),Y&&le&&!Ft()&&(it.animate([{opacity:0},{opacity:1}],{duration:250,easing:"ease-out"}),fe.animate([{opacity:0,transform:"translateY(8px) scale(.97)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"})),!Y&&!te){let U=C("div","comment-drag-handle");U.setAttribute("aria-hidden","true"),fe.prepend(U),Um(fe,U,I=>{pe&&ke.set(pe,I),Mn()},M.signal,()=>st.stop())}if(Mn(),te){le&&(Jf=!1,ep(!0,1200));let U=I=>{Jf=I,ep(I)};for(let I of[He,fe.querySelector(".messages")])I?.addEventListener("pointermove",()=>Jf||U(!0)),I?.addEventListener("pointerleave",()=>U(!1)),I?.addEventListener("focusin",ce=>{ce.target.matches(":focus-visible")&&U(!0)}),I?.addEventListener("focusout",()=>U(!1));fe.addEventListener("click",()=>ep(!1,600)),fe.addEventListener("pointerover",I=>I.target.closest(".design-card-target")?.removeAttribute("title"))}if(!Y&&!Ft()){let U=fe.getBoundingClientRect(),I=ol??(le?null:ft);te?le&&fe.animate([{opacity:0,transform:K?"none":"translateX(24px)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"}):I&&(ol||Math.abs(I.height-U.height)>1||Math.abs(I.width-U.width)>1)?fe.animate([{left:`${I.left}px`,top:`${I.top}px`,width:`${I.width}px`,height:`${I.height}px`,opacity:1},{left:`${U.left}px`,top:`${U.top}px`,width:`${U.width}px`,height:`${U.height}px`,opacity:1}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"}):le&&fe.animate([{opacity:0,transform:"translateY(6px) scale(.97)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"});for(let ce of fe.querySelectorAll("[data-comment]")){let he=ce.querySelector(".message-reaction"),De=lt.get(ce.dataset.comment),Ke=ce.dataset.comment;he&&De&&De.dataset.reactions!==he.dataset.reactions&&ru.set(Ke,{from:De,to:he.dataset.reactions,started:performance.now()});let vt=ru.get(Ke),zt=vt?performance.now()-vt.started:470;if(he&&vt&&zt<470&&vt.to===he.dataset.reactions){let Ve=C("span","reaction-leaving");Ve.setAttribute("aria-hidden","true");for(let qe of vt.from.children){if(qe.classList.contains("reaction-leaving"))continue;let tn=qe.cloneNode(!0);Ve.append(tn)}let _t=[...he.children];he.append(Ve);let En=Ve.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(.2, .35)"}],{duration:110,easing:"ease-in",fill:"forwards"});En.currentTime=zt,En.finished.then(()=>Ve.remove()).catch(()=>Ve.remove());for(let qe of _t){let tn=qe.animate([{opacity:0,transform:"scale(.25, .4)",offset:0},{opacity:1,transform:"scale(1.16, .92)",offset:.38},{opacity:1,transform:"scale(.95, 1.07)",offset:.6},{opacity:1,transform:"scale(1.025, .985)",offset:.8},{opacity:1,transform:"scale(1)",offset:1}],{duration:380,delay:90,easing:"ease-in-out",fill:"backwards"});tn.currentTime=zt,tn.finished.then(()=>{ru.get(Ke)===vt&&ru.delete(Ke)}).catch(()=>{})}}}}ol=null;let W=fe.querySelector(".messages");if(W&&(W.scrollTop=V),Y&&!le&&(fe.scrollTop=N),k){let U=fe.querySelector(`[data-focus-key="${k}"]`);U&&(U.focus({preventScroll:!0}),L!=null&&U.setSelectionRange(L,L))}}let sO,Qf=0,ib=!1,Jf=!1,W2=0,au="",su="",lu="",rb=0;function cu(p=su||lu){if(clearTimeout(rb),p!==au){au=p;for(let w of Tt.querySelectorAll(".pin"))w.classList.toggle("hot",w.dataset.thread===p);pl()}}function ep(p,w=0){clearTimeout(W2),ib=p,pl(),w&&(W2=window.setTimeout(()=>ep(Jf),w))}function Mn(){let p=Math.min(window.innerHeight,window.visualViewport?.height??window.innerHeight),w=it.firstElementChild;if(!w||Y)return;if(it.classList.contains("thread-pane")){let fe=Qf;Qf=performance.now()+500;let He=()=>{pl(),performance.now()<Qf?requestAnimationFrame(He):Qf=0};fe||He();return}if(y&&w.querySelector("textarea:focus")){let He=window.visualViewport?.offsetTop??0;w.style.maxHeight=`${Math.max(0,p-24)}px`;let Ce=K6(window.innerWidth,p,He,w.offsetWidth,w.offsetHeight);st.place(pe,w,Ce.x,Ce.y,!0),w.style.bottom="auto",w.style.transformOrigin="bottom center",Nr();return}let k=It?u.getBoundingClientRect().bottom-12:p-92;w.style.maxHeight=`${k-12}px`,(sO??=new ResizeObserver(()=>Mn())).observe(w);let L=Le.find(fe=>fe.id===oe),O=ee??L?.anchor,V,N=xt?.id===oe?xt:O?(()=>{let fe=fl(O);if(!fe.attached)return null;V=fe.width>16&&fe.height>16?{left:fe.x,top:fe.y,right:fe.x+fe.width,bottom:fe.y+fe.height}:(ee?J2:qc.test(L?.comments[0]?.body??""))?fe.component:void 0;let He=oe&&Tt.querySelector(`[data-thread="${CSS.escape(oe)}"]`);return He?lb(He,fe):fe})():null,q=xt?.id===oe,F=()=>{w.style.transformOrigin=!N||N.x<w.offsetLeft+w.offsetWidth/2?"top left":"top right"},te=!q&&pe&&ke.get(pe);if(te){let fe=xr(te,w.offsetWidth,w.offsetHeight,document.documentElement.clientWidth,p);st.place(pe,w,fe.x,fe.y,q),F(),Nr();return}let K=(window.innerWidth-354)/2,le=p-450;N&&(K=N.x+20,le=N.y-28);let ft=D&&!y?396:12,lt=w.offsetWidth,St=w.offsetHeight;if(N&&K+lt>window.innerWidth-ft&&(K=N.x-lt-20),V&&!y&&!q){let fe=k-V.bottom-14,He=V.top-26;if(V.right+14+lt<=window.innerWidth-ft)[K,le]=[V.right+14,V.top];else if(V.left-14-lt>=12)[K,le]=[V.left-14-lt,V.top];else if(Math.max(fe,He)>=Math.min(St,200)){let Ce=fe>=St||fe>=He?fe:He;w.style.maxHeight=`${Ce}px`,[K,le]=[V.left,Ce===fe?V.bottom+14:V.top-14-Math.min(St,Ce)]}}st.place(pe,w,Math.max(12,Math.min(K,window.innerWidth-w.offsetWidth-ft)),Math.max(12,Math.min(le,k-w.offsetHeight)),q),F(),Nr()}function Ur(){clearTimeout(To),Ne=null,H=!1;let p=y;p&&!D&&Xt(!0),To=0,!(z||p&&!D)&&(Y=!0,Ze(),lO())}function lO(){queueMicrotask(()=>{if(!Y)return;let p=y,w=p?it.querySelector(".account-dialog"):it.querySelector("input,button");p&&w&&(w.tabIndex=-1),w?.focus({preventScroll:!0})})}let Z2=Cf,fl=JR;function ab(p,w){return document.elementsFromPoint(p,w).find(k=>k!==Oe&&!Oe.contains(k))??null}function sb(p){return!!p&&p!==u&&p!==document.body&&(e.pickRoots?[u,...e.pickRoots()]:[document.body]).some(w=>w.contains(p))}function cO(){return rt?Promise.resolve(rt):(Qt||(Qt=Promise.resolve().then(()=>($_(),U_)).then(({createDesignMode:p})=>{let w=p({root:ot,panelRoot:P,host:Oe,exitKey:o.design?.label,design:e.design,flip(){if(!x||!D||h||So)return;let k=P.getBoundingClientRect();E2({x:document.documentElement.clientWidth-k.right,y:k.top}),g=!0,P.animate([{transform:`translateX(${k.left-P.getBoundingClientRect().left}px)`},{}],{duration:320,easing:"cubic-bezier(.22,1,.36,1)"})},targetAt(k,L){let O=ab(k,L);return sb(O)?O:null},onComment(k,L){Ie=!1,D&&!Yf()&&Xt(!1),Py(!1),to="",jr=L??"",bi=[];let O=k.getBoundingClientRect(),V={x:O.left+O.width/2,y:O.top+O.height/2};ub(k,V,V,!0)},onExit(){se=!1,ll(),On(),_2()}});return z?(w.destroy(),null):(rt=w,w.setActive(se),w)}).catch(()=>(se=!1,ll(),On(),null)).finally(()=>{Qt=null})),Qt)}function lb(p,w){if(!p.closest(".pin-stack")||p.dataset.dragging)return w;let k=p.getBoundingClientRect();return{x:k.left+(p.dataset.pointer==="right"?25:9),y:k.top+28}}function uO(p,w,k){let L=null,O=!1,V=k;S.user&&(S.user.verified||w.comments[0]?.author.id===S.user.id)&&(p.style.cursor="grab"),p.addEventListener("pointerdown",N=>{N.button!==0||me||!S.user||!(S.user.verified||w.comments[0]?.author.id===S.user.id)||(V={...k,...lb(p,k)},L={x:N.clientX,y:N.clientY},O=!1,p.setPointerCapture(N.pointerId))}),p.addEventListener("pointermove",N=>{if(!L)return;let q=N.clientX-L.x,F=N.clientY-L.y;!O&&Math.hypot(q,F)<5||(O||(p.dataset.dragging="true",p.style.position="fixed",p.style.margin="0",$t=w.id,tl=!0,oo(),oe===w.id&&(st.stop(),oe=null,no=null,Pr())),O=!0,p.dataset.pointer=np({...V,x:V.x+q,y:V.y+F},window.innerWidth),p.style.left=`${V.x+q}px`,p.style.top=`${V.y+F}px`,xt={id:w.id,x:V.x+q,y:V.y+F},ke.delete(w.id),Mn())}),p.addEventListener("click",N=>{O&&(N.preventDefault(),N.stopImmediatePropagation())},!0),p.addEventListener("pointerup",N=>{if(!L)return;let q=V.x+N.clientX-L.x,F=V.y+N.clientY-L.y;if(L=null,$t=null,!O)return;xt={id:w.id,x:q,y:F},Mn();let te=cb(q,F);if(!te){xt=null,Mn(),Fi="",ri();return}let K=_T(te,{x:q,y:F},{x:q+k.width,y:F+k.height},e.source);K.unstacked=!0,Qe(async()=>{try{xt=null,await B(ln(w.id,le=>({...le,anchor:K})),async le=>{await S.request(`threads/${le(w.id)}`,"PATCH",{anchor:K})})}finally{xt=null,Mn(),Fi="",ri()}})}),p.addEventListener("pointercancel",()=>{xt=null,Mn(),L=null,$t=null,Fi="",ri()})}function cb(p,w){let k=ab(p,w);if(!sb(k))return null;let L=k.closest("button,a,input,textarea,select,[role=button],[role=link],[data-comment-anchor],h1,h2,h3,h4,h5,h6,p,li,figure,svg,canvas,img,video")??k,O=L.closest("button,a,[role=button],[role=link]");return sb(O)?O:L}function pl(){let p=!H&&!!Gy(),w=p?oe:D&&!ee&&!Gy()&&P.querySelector(`.list [data-thread="${CSS.escape(au)}"]`)&&au,k=w&&Le.find(V=>V.id===w&&V.page===ni()),L=k&&fl(k.anchor),O=L&&L.attached&&(L.width&&L.height?{left:L.x,top:L.y,right:L.x+L.width,bottom:L.y+L.height}:L.component);if(Qo.toggleAttribute("data-thread",!!O),Tt.toggleAttribute("data-quiet",!!O&&p),Tt.toggleAttribute("data-outlined",!!O&&p&&ib),O){let V=Z2(k.anchor);Q2(O,V,It&&!!V&&u.contains(V)),p&&!ib&&(Qo.style.opacity="0");return}if(!H&&!ee||Co||ee&&ee.width>0&&ee.height>0){Qo.style.opacity="0",!H&&!ee&&(Jo=null,Vr=null);return}if(ee&&(Jo=Z2(ee)),H&&Vr&&(Jo=cb(Vr.x,Vr.y)),!Jo?.isConnected){Qo.style.opacity="0";return}Q2(Jo.getBoundingClientRect(),Jo,It&&u.contains(Jo))}function Q2(p,w,k){let L=k?u.getBoundingClientRect():{left:0,top:0,right:window.innerWidth,bottom:window.innerHeight},O=Math.max(0,L.left,p.left),V=Math.max(L.top,p.top),N=Math.min(L.right,p.right),q=Math.min(L.bottom,p.bottom);if(N<=O||q<=V){Qo.style.opacity="0";return}Object.assign(Qo.style,{opacity:"1",left:`${O}px`,top:`${V}px`,width:`${N-O}px`,height:`${q-V}px`,borderRadius:w?getComputedStyle(w).borderRadius:""})}function dO(){Bf||(Bf=requestAnimationFrame(()=>{Bf=0,pl()}))}function Ze(){if(z)return;if(Oe.classList.toggle("design-active",se),Y&&!D){mi(window.innerWidth,window.innerHeight)?(Y=!1,Ur()):Xt(!0);return}Ii();let p=!!ee&&!Y&&mi(window.innerWidth,window.innerHeight);Oe.classList.toggle("mobile-composing",p),P.inert=y?!D||Y:x?!D:Y,(oe||ee||H||ie||Y)&&oo(!0),Eo.hidden=!H,pl(),b2.replaceChildren(),On(),Q.inert=se,ri(),ro(),Pr();let w=P.querySelector(".panel");w&&(w.inert=se,w.setAttribute("aria-hidden",String(se)),w.hidden=se),se&&rt?.mountPanel(P);let k=P.querySelector(".design-inspector__heading");k&&!k.dataset.drag&&(k.dataset.drag="",C2(k))}let Co=null,$r=null;Eo.addEventListener("pointerdown",p=>{if(p.button!==0)return;p.preventDefault(),p.stopPropagation();let w=cb(p.clientX,p.clientY);w&&(Jo=w,Vr=null,Qo.style.opacity="0",Co={x:p.clientX,y:p.clientY,element:w,pointerId:p.pointerId},Eo.setPointerCapture(p.pointerId),$r=C("div","selection"),ot.append($r))}),Eo.addEventListener("pointermove",p=>{if(!Co||!$r){Vr={x:p.clientX,y:p.clientY},dO();return}Object.assign($r.style,{left:`${Math.min(Co.x,p.clientX)}px`,top:`${Math.min(Co.y,p.clientY)}px`,width:`${Math.abs(Co.x-p.clientX)}px`,height:`${Math.abs(Co.y-p.clientY)}px`})});let J2=!1;function ub(p,w,k=w,L=!1){if(J2=L,oo(),ee=_T(p,w,k,e.source),It){let O=u.getBoundingClientRect(),V=ii*qf();ee.pageX=(Math.min(w.x,k.x)-O.left)/V+u.scrollLeft,ee.pageY=(Math.min(w.y,k.y)-O.top)/V+u.scrollTop}Jo=p,H=!1,oe=null,Y=!1,no=null,ye="",Ze(),it.querySelector('[data-focus-key="body"]')?.focus({preventScroll:!0}),Mn()}Eo.addEventListener("pointerup",p=>{if(!Co)return;let w=Co;$r?.remove(),$r=null,Co=null,ub(w.element,w,{x:p.clientX,y:p.clientY})}),Eo.addEventListener("pointerleave",()=>{Co||ee||(Vr=null,Jo=null,Qo.style.opacity="0")}),Eo.addEventListener("pointercancel",()=>{Co=null,$r?.remove(),$r=null,Vr=null,Jo=null,Qo.style.opacity="0"});function Ti(){if(jf||z||document.hidden)return;let p=ni();!ee&&!oe&&!H&&!$a&&(ie||!Le.some(w=>w.page===p&&!w.resolved))||(jf=requestAnimationFrame(()=>{jf=0,ri(),Mn(),Nr(),pl()}))}document.addEventListener("scroll",p=>{tl=!0,oo();let w=p.target;w===Oe||!w||w instanceof Node&&w.getRootNode()===ot||!((w===document?document.scrollingElement:w)instanceof Element)||($t||(Wy=!0,Tt.dataset.scrolling="true",clearTimeout(Zy),Zy=window.setTimeout(()=>{z||(Fi="",ri(!0),Wy=!1,delete Tt.dataset.scrolling)},180)),Ti())},{capture:!0,passive:!0,signal:M.signal});for(let p of["focusin","focusout","click"])it.addEventListener(p,()=>requestAnimationFrame(Mn),{signal:M.signal});window.visualViewport?.addEventListener("scroll",()=>{mi(window.innerWidth,window.innerHeight)&&(Ii(),(Y||ee||oe)&&Ti())},{signal:M.signal}),window.visualViewport?.addEventListener("resize",()=>{mi(window.innerWidth,window.innerHeight)&&(Ii(),Ti())},{signal:M.signal}),window.addEventListener("resize",()=>{Z_(),Ii(),y||On(),Ti()},{signal:M.signal}),Qi(ot,"keydown",p=>{Ay=!0,queueMicrotask(()=>{Ay=!1});let w=p.composedPath()[0];if((Y||y&&D)&&p.key==="Tab"){let L=[...(Y?it:ot).querySelectorAll("button:not(:disabled),input:not(:disabled):not([type=hidden]),select:not(:disabled),textarea:not(:disabled),summary,a[href],[tabindex]")].filter(N=>N.tabIndex>=0&&N.getClientRects().length>0&&!N.closest("[inert]")&&(Y||!y||!!N.closest(".panel,.toolbar"))),O=L[0],V=L.at(-1);p.shiftKey&&(ot.activeElement===O||!L.includes(ot.activeElement))?(p.preventDefault(),V?.focus()):!p.shiftKey&&(ot.activeElement===V||!L.includes(ot.activeElement))&&(p.preventDefault(),O?.focus())}let k=c0(w);if(p.key==="Escape"){H||ee||oe||Y?Xi():D&&Xt(!1);return}if(!k){if(J&&Af(p,o.restore)){p.preventDefault(),H2();return}e.onboarding||(Af(p,o.comment)?(p.preventDefault(),cl(!_)):Af(p,o.browse)?(p.preventDefault(),cl(!1)):i&&Af(p,o.design)&&(p.preventDefault(),Py(!se)))}},{signal:M.signal}),Qi(ot,"pointerdown",p=>{let w=p.composedPath(),k=w.some(L=>L instanceof Element&&L.getRootNode()===ot&&L.matches("button,input,textarea,summary,[role=menu],[role=listbox],.emoji-menu,.emoji-keyboard,.floating-notice"));p.button===0&&(oe||ee)&&!(ee&&mi(window.innerWidth,window.innerHeight))&&!Y&&!w.includes(it)&&!w.includes(Q)&&!w.includes(Tt)&&!(H&&w.includes(Eo))&&!k&&(ee&&to.trim()&&(X={anchor:ee,text:to}),Xi());for(let L of ot.querySelectorAll(".comment-menu[open]"))p.composedPath().includes(L)||(L.open=!1)},{signal:M.signal});let eS=new ResizeObserver(Ti);eS.observe(u);let ml=0,tp=new MutationObserver(()=>{if(ee||oe||H||$a)return Ti();ml||(ml=window.setTimeout(()=>{ml=0,Ti()},80))});tp.observe(document.body,{childList:!0,subtree:!0,characterData:!0}),it.addEventListener("pointerdown",p=>{Y&&p.target===it&&Xi()});function tS(){z||ni()===g2||(g2=ni(),X=null,oe=null,ee=null,Ze())}let nS=()=>setTimeout(tS);window.addEventListener("popstate",nS,{signal:M.signal}),window.navigation?.addEventListener("navigatesuccess",nS,{signal:M.signal});function db(){let p=new Is(e);return p.token===S.token||S.transient&&!p.token?!1:(S.cancelReads(),S=p,en=!1,Rt=null,ae="Connecting",bt=Jn=wo=j=_n=!1,ee=X=null,to=jr="",bi=[],Zo.clear(),ne.length=0,We=Ne=Yt=null,at++,clearTimeout(Dt),Ua(),Ze(),Qe(uu),!0)}window.addEventListener("storage",p=>{p.storageArea===localStorage&&p.key===S.sessionKey&&p.newValue!==S.token&&db()},{signal:M.signal}),window.addEventListener("focus",()=>{db()||Ei?.wake()},{signal:M.signal});let oS=p=>p.target.closest?.(".list .thread-item")?.dataset.thread??"",fb=()=>{clearTimeout(rb),rb=window.setTimeout(()=>cu(),80)};for(let[p,w]of[["pointerover",k=>(su=oS(k))?cu():fb()],["pointerleave",()=>{su="",fb()}],["focusin",k=>{lu=oS(k),cu()}],["focusout",()=>{lu="",fb()}],["scroll",()=>{su=lu="",cu()}]])P.addEventListener(p,w,{capture:!0,signal:M.signal});let pb=!1;u.addEventListener("pointerdown",p=>{pb=p.button===0&&D&&It&&!x&&!H&&!Y&&!oe&&!ee},{capture:!0,signal:M.signal}),u.addEventListener("click",p=>{!pb||!D||x||(pb=!1,p.preventDefault(),p.stopPropagation(),Xt(!1))},{capture:!0,signal:M.signal}),Ei=dS({interval:Math.max(2e3,e.pollInterval??4e3),enabled:()=>!z&&!document.hidden&&navigator.onLine!==!1&&!e.onboarding,active:()=>D||Y||H||!!ee||!!oe,read:async()=>(tS(),en?oi():uu())});for(let p of["online","offline"])window.addEventListener(p,()=>Ei?.wake(),{signal:M.signal});if(Oe.addEventListener("click",()=>Ei?.wake(!1),{signal:M.signal}),Oe.addEventListener("keydown",()=>Ei?.wake(!1),{signal:M.signal}),e.isolateEvents!==!1){Oe.setAttribute("data-isolate","");for(let p of tk)Oe.addEventListener(p,w=>u0(w,ot)&&w.stopPropagation(),{passive:!0,signal:M.signal});document.addEventListener("focusout",p=>p.relatedTarget===Oe&&p.stopImmediatePropagation(),{signal:M.signal})}document.addEventListener("visibilitychange",()=>{document.hidden?(tp.disconnect(),clearTimeout(ml),ml=0):(tp.observe(document.body,{childList:!0,subtree:!0,characterData:!0}),Ti()),(document.hidden||!db())&&Ei?.wake()},{signal:M.signal});let iS={destroy(){if(z)return;z=!0,Ei?.stop(),rt?.destroy(),el?.resetDesignPreviews(),S.cancelReads(),Jc(),ou?.(),cancelAnimationFrame(Uy),clearTimeout(ml),clearTimeout(Zy),clearTimeout(To),clearTimeout(Qy),ru.clear(),st.stop(),Qe(Jt),Ut?.(),Yc?.(!0);for(let[w,k]of $c)k?.(),w.getAnimations().forEach(L=>L.cancel()),w.remove();$c.clear(),vi?.stop(),Br?.stop(),tu(!0),M.abort(),clearTimeout(_f),clearTimeout(Of),clearTimeout(Ey),cancelAnimationFrame(jf),cancelAnimationFrame(Bf),cancelAnimationFrame(Vy),oo(),eS.disconnect(),tp.disconnect(),Cy.disconnect(),cancelAnimationFrame(ky);let p=It?u.scrollTop*qf():window.scrollY/ii;for(let[w,k]of Hr)Object.assign(w.style,k);Hr.clear(),(It||!x)&&(document.documentElement.style.overflow=Sy,Object.assign(u.style,Ki),Object.assign(document.body.style,Wc),document.documentElement.style.background=Zc,window.scrollTo({top:p,behavior:"instant"})),jy.disconnect(),x2.unmount(),Oe.remove(),d2.delete(document)},comment(p){let w=()=>{if(z||!p.isConnected)return;let k=p.getBoundingClientRect();!k.width||!k.height||ub(p,{x:k.left+k.width/2,y:k.top+k.height/2})};D&&!Yf()?(Xt(!1),vi&&ei?vi.finished.then(w):w()):w()},open(){z||(H2(),Xt(!0))},close(){z||(Xi(),Xt(!1))},async refresh(){await oi()}};d2.set(document,{scope:a,controller:iS});try{io=!e.onboarding&&localStorage.getItem(My)==="1"}catch{}Ii();let mb=e.onboarding?null:S.cached();be||=mb!==null;let fO=io;if(io=!0,mb&&je.replace(Ny(mb)),Ze(),x&&(P.style.transition="none",Yi(),P.offsetWidth,P.style.transition=""),io=fO,io&&(Xt(!0),io=!1,!Ft()))for(let p of[Oe,It?u:null])p?.animate([{opacity:0},{opacity:1}],{duration:200,easing:"cubic-bezier(0.22, 1, 0.36, 1)"});async function uu(){let p=S,w=p.token,k;try{await p.restore()}catch{}if(z||p!==S)return;w!==p.token&&Ua(),On(),Y&&Pr();let L=oi();L.catch(()=>{});try{k=await p.request("config")}catch(q){if(z||p!==S||q instanceof DOMException&&q.name==="AbortError")return;let F=LT(q),te=Rt?.detail!==F.detail;throw Rt=F,ae="Offline",te&&Ze(),q}if(z||p!==S)return;en=!0,bt=!!k.google,Jn=k.github,wo=k.guests,j=k.guestResolve,_n=!!k.private,Ze();let O=await L;if(z||p!==S)return;let V=new URL(location.href).searchParams.get("comment"),N=Le.find(q=>q.id===V);return N&&(D||Xt(!0),nu(N)),Ze(),O}return e.onboarding?.inProject||Qe(()=>uu().finally(()=>Ei?.wake(!1))),iS}var ja=new URL(location.href),G_=ja.searchParams.get("project")||"_komo",K_=new URLSearchParams(ja.hash.slice(1)).get("invite")||void 0,LU=K_?void 0:ja.hash.slice(1)||void 0;history.replaceState(null,"",ja.pathname+ja.search);q_({endpoint:location.origin,project:G_,repo:G_,branch:"shared",pageRoot:document.querySelector("main"),onboarding:{code:ja.searchParams.get("code")||void 0,workspace:ja.searchParams.get("workspace")||void 0,site:ja.searchParams.get("site")||void 0,claimKey:LU,invite:K_}});
+`)),U("Copy selector",()=>$e.anchor.selector)]);Ce.append(he);let De=ue($e.resolved?"Reopen comment":"Resolve comment",()=>tb($e,By($e.anchor)),"icon","check");De.disabled=!Zf(),Ce.append(De)}if(Ce.append(te?ue("Close sidebar",()=>{Xi(),Xt(!1)},"icon","close"):ue(Y?"Close account":"Close comment",Xi,"icon","close")),te&&He.append(ue("Back to comments",Xi,"icon thread-back","chevron"),$2(C("strong","thread-title"),$e?.comments[0]?.body??"")),He.append(Ce),$e||Y||te?fe.append(He):fe.append(ue("Close comment",Xi,"draft-close icon","close")),Y){let U=C("form","account");if(S.user){Ne??={name:S.user.name,avatarUrl:S.user.avatarUrl??"",accentColor:S.user.accentColor??gb};let I=Ne,ce=qr({...S.user,...I}),he=C("div","account-summary"),De=C("span","account-status");S.user.verified?(De.append(document.createTextNode("Connected with ")),S.user.id.startsWith("google:")&&De.append(f0()),De.append(document.createTextNode(S.user.id.startsWith("google:")?"Google":"GitHub"))):De.textContent="Guest account";let Ke=ue("Update profile photo",()=>Ve.click(),"account-avatar-button");Ke.replaceChildren(ce),he.append(Ke,C("h2","","Your profile"),De),U.append(he);let vt=C("label","account-name-label","Display name"),zt=C("input");zt.value=I.name,zt.name="name",zt.autocomplete="name",zt.required=!0,zt.maxLength=60,zt.dataset.focusKey="profile-name",zt.addEventListener("input",()=>{I.name=zt.value,Qn(I)}),zt.addEventListener("blur",()=>{Qn(I,!0)}),vt.append(zt);let Ve=C("input");Ve.type="file",Ve.accept="image/png,image/jpeg,image/webp",Ve.hidden=!0,Ve.setAttribute("aria-label","Choose profile photo"),Ve.addEventListener("change",()=>Qe(async()=>{let qe=Ve.files?.[0];if(!qe)return;if(qe.size>10*1024*1024)throw new Error("Choose a photo under 10 MB.");let tn=await createImageBitmap(qe),Wi=document.createElement("canvas");Wi.width=Wi.height=128;let Ga=Wi.getContext("2d"),Ka=Math.min(tn.width,tn.height);Ga.drawImage(tn,(tn.width-Ka)/2,(tn.height-Ka)/2,Ka,Ka,0,0,128,128),tn.close();let kt=.8;do I.avatarUrl=Wi.toDataURL("image/jpeg",kt),kt-=.15;while(I.avatarUrl.length>12e3&&kt>.1);if(I.avatarUrl.length>12e3)throw new Error("Choose a smaller photo.");Qn(I,!0),Pr()})),he.append(Ve);let _t=YL(I.accentColor,qe=>{I.accentColor=qe,du(ce,qe),Qn(I)});if(Ut=_t.destroy,U.append(vt,_t.element),e.onboarding){let qe=e.onboarding;U.append(D2(C("section","onboarding-panel"),Promise.resolve().then(()=>(gy(),hy)).then(({onboardingPanel:tn})=>tn(S,qe))))}else U.append(Y_()),b&&U.append(I_()),U.append(R2());if(S.user?.verified&&!e.onboarding?.code&&!e.onboarding?.claimKey&&!e.onboarding?.invite){let qe=C("div");U.append(qe),Promise.resolve().then(()=>(gy(),hy)).then(({projectManagement:tn})=>{qe.isConnected&&qe.replaceWith(tn(S,e.onboarding?.workspace,Wi=>{if(Wi)oe=null,je.replace([],je.revision),U.querySelector(".account-usage")?.remove();else{let Ga=e.onboarding?.workspace?`usage?workspace=${encodeURIComponent(e.onboarding.workspace)}`:"usage";U.querySelector(".account-usage")?.replaceWith(R2(Ga)),oi().catch(()=>{})}}))})}U.addEventListener("submit",qe=>{qe.preventDefault(),Qn(I,!0)});let En=C("div","account-session");En.append(ue("Sign out",()=>Qe(async()=>{if(je.busy||me){ko("Wait for your changes to save.");return}clearTimeout(Dt),We=null;let qe=S.logout();Ua(),Ne=null,Yt=null,Ze();try{await qe}finally{Ua(),Qe(oi),Ze()}}),"secondary")),U.append(En),!S.user.verified&&bt&&U.append(Va()),!S.user.verified&&Jn&&U.append(ue("Sign in with GitHub",()=>Qe(()=>nb()),"primary"))}else{if(U.append(C("h2","",e.onboarding?"Set up komo":"Leave comments")),e.onboarding?.inProject){U.append(C("p","","Connect komo to start leaving feedback on this site. One site per line."));let I=C("label","account-name-label","Production and preview sites"),ce=C("textarea");ce.rows=2,ce.placeholder="https://your-site.com",ce.value=zr,ce.dataset.focusKey="setup-sites",ce.addEventListener("input",()=>{zr=ce.value}),I.append(ce),U.append(I);let he=ue("Connect komo",()=>Qe(async()=>{if(!yi){yi=!0,he.disabled=!0;try{let De=await uS(e,M.signal,cS(zr,location.origin));if(z)return;sS(e,De),e={...e,project:De.project,repo:De.repo,onboarding:void 0},S=new Is(e),S.save(De),Y=!1,Ne=null,pe=null,await uu(),Ze(),ko("komo is connected. Select an element to leave feedback.")}finally{yi=!1,z||Ze()}}}),"primary");he.disabled=yi,U.append(he)}if(wo){let I=C("label","account-name-label","Your name"),ce=C("input");ce.name="name",ce.autocomplete="name",ce.placeholder="Your name",ce.required=!0,ce.maxLength=60,ce.value=Pa,ce.dataset.focusKey="account-name",ce.addEventListener("input",()=>Pa=ce.value),I.append(ce),U.append(I);let he=ue("Continue",()=>{},"primary");he.type="submit",he.disabled=me,me&&he.setAttribute("aria-busy","true"),U.append(he)}wo&&(bt||Jn)&&U.append(C("div","account-divider","or")),bt&&U.append(Va()),Jn&&U.append(ue("Continue with GitHub",()=>Qe(()=>nb()),"secondary")),U.addEventListener("submit",I=>{I.preventDefault(),Qe(async()=>{await W_(async()=>{await S.guest(Pa),Y=!1}),await F2()})})}fe.append(U)}else if(ee)fe.append(I2(null));else if($e){let U=C("div","messages");for(let ce of $e.comments)U.append(rO(ce,$e));fe.append(U);let I=()=>U.dataset.fade=`${U.scrollTop>2?"top":""} ${U.scrollTop+U.clientHeight<U.scrollHeight-2?"bottom":""}`;if(U.addEventListener("scroll",I,{passive:!0}),requestAnimationFrame(I),r){let ce=K2($e.tags??[],De=>Y2($e,{tag:De}),De=>Y2($e,{untag:De}));ce.classList.add("thread-tags");let he=U.querySelector(".message > .row");te||!he?U.before(ce):he.after(ce)}fe.append(I2($e))}else fe.append(C("div","empty","This comment is no longer available."));if(it.append(fe),Y&&le&&!Ft()&&(it.animate([{opacity:0},{opacity:1}],{duration:250,easing:"ease-out"}),fe.animate([{opacity:0,transform:"translateY(8px) scale(.97)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"})),!Y&&!te){let U=C("div","comment-drag-handle");U.setAttribute("aria-hidden","true"),fe.prepend(U),Um(fe,U,I=>{pe&&ke.set(pe,I),Mn()},M.signal,()=>st.stop())}if(Mn(),te){le&&(Jf=!1,ep(!0,1200));let U=I=>{Jf=I,ep(I)};for(let I of[He,fe.querySelector(".messages")])I?.addEventListener("pointermove",()=>Jf||U(!0)),I?.addEventListener("pointerleave",()=>U(!1)),I?.addEventListener("focusin",ce=>{ce.target.matches(":focus-visible")&&U(!0)}),I?.addEventListener("focusout",()=>U(!1));fe.addEventListener("click",()=>ep(!1,600)),fe.addEventListener("pointerover",I=>I.target.closest(".design-card-target")?.removeAttribute("title"))}if(!Y&&!Ft()){let U=fe.getBoundingClientRect(),I=ol??(le?null:ft);te?le&&fe.animate([{opacity:0,transform:K?"none":"translateX(24px)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"}):I&&(ol||Math.abs(I.height-U.height)>1||Math.abs(I.width-U.width)>1)?fe.animate([{left:`${I.left}px`,top:`${I.top}px`,width:`${I.width}px`,height:`${I.height}px`,opacity:1},{left:`${U.left}px`,top:`${U.top}px`,width:`${U.width}px`,height:`${U.height}px`,opacity:1}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"}):le&&fe.animate([{opacity:0,transform:"translateY(6px) scale(.97)"},{opacity:1,transform:"none"}],{duration:250,easing:"cubic-bezier(.22,1,.36,1)"});for(let ce of fe.querySelectorAll("[data-comment]")){let he=ce.querySelector(".message-reaction"),De=lt.get(ce.dataset.comment),Ke=ce.dataset.comment;he&&De&&De.dataset.reactions!==he.dataset.reactions&&ru.set(Ke,{from:De,to:he.dataset.reactions,started:performance.now()});let vt=ru.get(Ke),zt=vt?performance.now()-vt.started:470;if(he&&vt&&zt<470&&vt.to===he.dataset.reactions){let Ve=C("span","reaction-leaving");Ve.setAttribute("aria-hidden","true");for(let qe of vt.from.children){if(qe.classList.contains("reaction-leaving"))continue;let tn=qe.cloneNode(!0);Ve.append(tn)}let _t=[...he.children];he.append(Ve);let En=Ve.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(.2, .35)"}],{duration:110,easing:"ease-in",fill:"forwards"});En.currentTime=zt,En.finished.then(()=>Ve.remove()).catch(()=>Ve.remove());for(let qe of _t){let tn=qe.animate([{opacity:0,transform:"scale(.25, .4)",offset:0},{opacity:1,transform:"scale(1.16, .92)",offset:.38},{opacity:1,transform:"scale(.95, 1.07)",offset:.6},{opacity:1,transform:"scale(1.025, .985)",offset:.8},{opacity:1,transform:"scale(1)",offset:1}],{duration:380,delay:90,easing:"ease-in-out",fill:"backwards"});tn.currentTime=zt,tn.finished.then(()=>{ru.get(Ke)===vt&&ru.delete(Ke)}).catch(()=>{})}}}}ol=null;let W=fe.querySelector(".messages");if(W&&(W.scrollTop=V),Y&&!le&&(fe.scrollTop=N),k){let U=fe.querySelector(`[data-focus-key="${k}"]`);U&&(U.focus({preventScroll:!0}),L!=null&&U.setSelectionRange(L,L))}}let sO,Qf=0,ib=!1,Jf=!1,W2=0,au="",su="",lu="",rb=0;function cu(p=su||lu){if(clearTimeout(rb),p!==au){au=p;for(let w of Tt.querySelectorAll(".pin"))w.classList.toggle("hot",w.dataset.thread===p);pl()}}function ep(p,w=0){clearTimeout(W2),ib=p,pl(),w&&(W2=window.setTimeout(()=>ep(Jf),w))}function Mn(){let p=Math.min(window.innerHeight,window.visualViewport?.height??window.innerHeight),w=it.firstElementChild;if(!w||Y)return;if(it.classList.contains("thread-pane")){let fe=Qf;Qf=performance.now()+500;let He=()=>{pl(),performance.now()<Qf?requestAnimationFrame(He):Qf=0};fe||He();return}if(y&&w.querySelector("textarea:focus")){let He=window.visualViewport?.offsetTop??0;w.style.maxHeight=`${Math.max(0,p-24)}px`;let Ce=K6(window.innerWidth,p,He,w.offsetWidth,w.offsetHeight);st.place(pe,w,Ce.x,Ce.y,!0),w.style.bottom="auto",w.style.transformOrigin="bottom center",Nr();return}let k=It?u.getBoundingClientRect().bottom-12:p-92;w.style.maxHeight=`${k-12}px`,(sO??=new ResizeObserver(()=>Mn())).observe(w);let L=Le.find(fe=>fe.id===oe),O=ee??L?.anchor,V,N=xt?.id===oe?xt:O?(()=>{let fe=fl(O);if(!fe.attached)return null;V=fe.width>16&&fe.height>16?{left:fe.x,top:fe.y,right:fe.x+fe.width,bottom:fe.y+fe.height}:(ee?J2:qc.test(L?.comments[0]?.body??""))?fe.component:void 0;let He=oe&&Tt.querySelector(`[data-thread="${CSS.escape(oe)}"]`);return He?lb(He,fe):fe})():null,q=xt?.id===oe,F=()=>{w.style.transformOrigin=!N||N.x<w.offsetLeft+w.offsetWidth/2?"top left":"top right"},te=!q&&pe&&ke.get(pe);if(te){let fe=xr(te,w.offsetWidth,w.offsetHeight,document.documentElement.clientWidth,p);st.place(pe,w,fe.x,fe.y,q),F(),Nr();return}let K=(window.innerWidth-354)/2,le=p-450;N&&(K=N.x+20,le=N.y-28);let ft=D&&!y?396:12,lt=w.offsetWidth,St=w.offsetHeight;if(N&&K+lt>window.innerWidth-ft&&(K=N.x-lt-20),V&&!y&&!q){let fe=k-V.bottom-14,He=V.top-26;if(V.right+14+lt<=window.innerWidth-ft)[K,le]=[V.right+14,V.top];else if(V.left-14-lt>=12)[K,le]=[V.left-14-lt,V.top];else if(Math.max(fe,He)>=Math.min(St,200)){let Ce=fe>=St||fe>=He?fe:He;w.style.maxHeight=`${Ce}px`,[K,le]=[V.left,Ce===fe?V.bottom+14:V.top-14-Math.min(St,Ce)]}}st.place(pe,w,Math.max(12,Math.min(K,window.innerWidth-w.offsetWidth-ft)),Math.max(12,Math.min(le,k-w.offsetHeight)),q),F(),Nr()}function Ur(){clearTimeout(To),Ne=null,H=!1;let p=y;p&&!D&&Xt(!0),To=0,!(z||p&&!D)&&(Y=!0,Ze(),lO())}function lO(){queueMicrotask(()=>{if(!Y)return;let p=y,w=p?it.querySelector(".account-dialog"):it.querySelector("input,button");p&&w&&(w.tabIndex=-1),w?.focus({preventScroll:!0})})}let Z2=Cf,fl=JR;function ab(p,w){return document.elementsFromPoint(p,w).find(k=>k!==Oe&&!Oe.contains(k))??null}function sb(p){return!!p&&p!==u&&p!==document.body&&(e.pickRoots?[u,...e.pickRoots()]:[document.body]).some(w=>w.contains(p))}function cO(){return rt?Promise.resolve(rt):(Qt||(Qt=Promise.resolve().then(()=>($_(),U_)).then(({createDesignMode:p})=>{let w=p({root:ot,panelRoot:P,host:Oe,exitKey:o.design?.label,design:e.design,flip(){if(!x||!D||h||So)return;let k=P.getBoundingClientRect();E2({x:document.documentElement.clientWidth-k.right,y:k.top}),g=!0,P.animate([{transform:`translateX(${k.left-P.getBoundingClientRect().left}px)`},{}],{duration:320,easing:"cubic-bezier(.22,1,.36,1)"})},targetAt(k,L){let O=ab(k,L);return sb(O)?O:null},onComment(k,L){Ie=!1,D&&!Yf()&&Xt(!1),Py(!1),to="",jr=L??"",bi=[];let O=k.getBoundingClientRect(),V={x:O.left+O.width/2,y:O.top+O.height/2};ub(k,V,V,!0)},onExit(){se=!1,ll(),On(),_2()}});return z?(w.destroy(),null):(rt=w,w.setActive(se),w)}).catch(()=>(se=!1,ll(),On(),null)).finally(()=>{Qt=null})),Qt)}function lb(p,w){if(!p.closest(".pin-stack")||p.dataset.dragging)return w;let k=p.getBoundingClientRect();return{x:k.left+(p.dataset.pointer==="right"?25:9),y:k.top+28}}function uO(p,w,k){let L=null,O=!1,V=k;S.user&&(S.user.verified||w.comments[0]?.author.id===S.user.id)&&(p.style.cursor="grab"),p.addEventListener("pointerdown",N=>{N.button!==0||me||!S.user||!(S.user.verified||w.comments[0]?.author.id===S.user.id)||(V={...k,...lb(p,k)},L={x:N.clientX,y:N.clientY},O=!1,p.setPointerCapture(N.pointerId))}),p.addEventListener("pointermove",N=>{if(!L)return;let q=N.clientX-L.x,F=N.clientY-L.y;!O&&Math.hypot(q,F)<5||(O||(p.dataset.dragging="true",p.style.position="fixed",p.style.margin="0",$t=w.id,tl=!0,oo(),oe===w.id&&(st.stop(),oe=null,no=null,Pr())),O=!0,p.dataset.pointer=np({...V,x:V.x+q,y:V.y+F},window.innerWidth),p.style.left=`${V.x+q}px`,p.style.top=`${V.y+F}px`,xt={id:w.id,x:V.x+q,y:V.y+F},ke.delete(w.id),Mn())}),p.addEventListener("click",N=>{O&&(N.preventDefault(),N.stopImmediatePropagation())},!0),p.addEventListener("pointerup",N=>{if(!L)return;let q=V.x+N.clientX-L.x,F=V.y+N.clientY-L.y;if(L=null,$t=null,!O)return;xt={id:w.id,x:q,y:F},Mn();let te=cb(q,F);if(!te){xt=null,Mn(),Fi="",ri();return}let K=_T(te,{x:q,y:F},{x:q+k.width,y:F+k.height},e.source);K.unstacked=!0,Qe(async()=>{try{xt=null,await B(ln(w.id,le=>({...le,anchor:K})),async le=>{await S.request(`threads/${le(w.id)}`,"PATCH",{anchor:K})})}finally{xt=null,Mn(),Fi="",ri()}})}),p.addEventListener("pointercancel",()=>{xt=null,Mn(),L=null,$t=null,Fi="",ri()})}function cb(p,w){let k=ab(p,w);if(!sb(k))return null;let L=k.closest("button,a,input,textarea,select,[role=button],[role=link],[data-comment-anchor],h1,h2,h3,h4,h5,h6,p,li,figure,svg,canvas,img,video")??k,O=L.closest("button,a,[role=button],[role=link]");return sb(O)?O:L}function pl(){let p=!H&&!!Gy(),w=p?oe:D&&!ee&&!Gy()&&P.querySelector(`.list [data-thread="${CSS.escape(au)}"]`)&&au,k=w&&Le.find(V=>V.id===w&&V.page===ni()),L=k&&fl(k.anchor),O=L&&L.attached&&(L.width&&L.height?{left:L.x,top:L.y,right:L.x+L.width,bottom:L.y+L.height}:L.component);if(Qo.toggleAttribute("data-thread",!!O),Tt.toggleAttribute("data-quiet",!!O&&p),Tt.toggleAttribute("data-outlined",!!O&&p&&ib),O){let V=Z2(k.anchor);Q2(O,V,It&&!!V&&u.contains(V)),p&&!ib&&(Qo.style.opacity="0");return}if(!H&&!ee||Co||ee&&ee.width>0&&ee.height>0){Qo.style.opacity="0",!H&&!ee&&(Jo=null,Vr=null);return}if(ee&&(Jo=Z2(ee)),H&&Vr&&(Jo=cb(Vr.x,Vr.y)),!Jo?.isConnected){Qo.style.opacity="0";return}Q2(Jo.getBoundingClientRect(),Jo,It&&u.contains(Jo))}function Q2(p,w,k){let L=k?u.getBoundingClientRect():{left:0,top:0,right:window.innerWidth,bottom:window.innerHeight},O=Math.max(0,L.left,p.left),V=Math.max(L.top,p.top),N=Math.min(L.right,p.right),q=Math.min(L.bottom,p.bottom);if(N<=O||q<=V){Qo.style.opacity="0";return}Object.assign(Qo.style,{opacity:"1",left:`${O}px`,top:`${V}px`,width:`${N-O}px`,height:`${q-V}px`,borderRadius:w?getComputedStyle(w).borderRadius:""})}function dO(){Bf||(Bf=requestAnimationFrame(()=>{Bf=0,pl()}))}function Ze(){if(z)return;if(Oe.classList.toggle("design-active",se),Y&&!D){mi(window.innerWidth,window.innerHeight)?(Y=!1,Ur()):Xt(!0);return}Ii();let p=!!ee&&!Y&&mi(window.innerWidth,window.innerHeight);Oe.classList.toggle("mobile-composing",p),P.inert=y?!D||Y:x?!D:Y,(oe||ee||H||ie||Y)&&oo(!0),Eo.hidden=!H,pl(),b2.replaceChildren(),On(),Q.inert=se,ri(),ro(),Pr();let w=P.querySelector(".panel");w&&(w.inert=se,w.setAttribute("aria-hidden",String(se)),w.hidden=se),se&&rt?.mountPanel(P);let k=P.querySelector(".design-inspector__heading");k&&!k.dataset.drag&&(k.dataset.drag="",C2(k))}let Co=null,$r=null;Eo.addEventListener("pointerdown",p=>{if(p.button!==0)return;p.preventDefault(),p.stopPropagation();let w=cb(p.clientX,p.clientY);w&&(Jo=w,Vr=null,Qo.style.opacity="0",Co={x:p.clientX,y:p.clientY,element:w,pointerId:p.pointerId},Eo.setPointerCapture(p.pointerId),$r=C("div","selection"),ot.append($r))}),Eo.addEventListener("pointermove",p=>{if(!Co||!$r){Vr={x:p.clientX,y:p.clientY},dO();return}Object.assign($r.style,{left:`${Math.min(Co.x,p.clientX)}px`,top:`${Math.min(Co.y,p.clientY)}px`,width:`${Math.abs(Co.x-p.clientX)}px`,height:`${Math.abs(Co.y-p.clientY)}px`})});let J2=!1;function ub(p,w,k=w,L=!1){if(J2=L,oo(),ee=_T(p,w,k,e.source),It){let O=u.getBoundingClientRect(),V=ii*qf();ee.pageX=(Math.min(w.x,k.x)-O.left)/V+u.scrollLeft,ee.pageY=(Math.min(w.y,k.y)-O.top)/V+u.scrollTop}Jo=p,H=!1,oe=null,Y=!1,no=null,ye="",Ze(),it.querySelector('[data-focus-key="body"]')?.focus({preventScroll:!0}),Mn()}Eo.addEventListener("pointerup",p=>{if(!Co)return;let w=Co;$r?.remove(),$r=null,Co=null,ub(w.element,w,{x:p.clientX,y:p.clientY})}),Eo.addEventListener("pointerleave",()=>{Co||ee||(Vr=null,Jo=null,Qo.style.opacity="0")}),Eo.addEventListener("pointercancel",()=>{Co=null,$r?.remove(),$r=null,Vr=null,Jo=null,Qo.style.opacity="0"});function Ti(){if(jf||z||document.hidden)return;let p=ni();!ee&&!oe&&!H&&!$a&&(ie||!Le.some(w=>w.page===p&&!w.resolved))||(jf=requestAnimationFrame(()=>{jf=0,ri(),Mn(),Nr(),pl()}))}document.addEventListener("scroll",p=>{tl=!0,oo();let w=p.target;w===Oe||!w||w instanceof Node&&w.getRootNode()===ot||!((w===document?document.scrollingElement:w)instanceof Element)||($t||(Wy=!0,Tt.dataset.scrolling="true",clearTimeout(Zy),Zy=window.setTimeout(()=>{z||(Fi="",ri(!0),Wy=!1,delete Tt.dataset.scrolling)},180)),Ti())},{capture:!0,passive:!0,signal:M.signal});for(let p of["focusin","focusout","click"])it.addEventListener(p,()=>requestAnimationFrame(Mn),{signal:M.signal});window.visualViewport?.addEventListener("scroll",()=>{mi(window.innerWidth,window.innerHeight)&&(Ii(),(Y||ee||oe)&&Ti())},{signal:M.signal}),window.visualViewport?.addEventListener("resize",()=>{mi(window.innerWidth,window.innerHeight)&&(Ii(),Ti())},{signal:M.signal}),window.addEventListener("resize",()=>{Z_(),Ii(),y||On(),Ti()},{signal:M.signal}),Qi(ot,"keydown",p=>{Ay=!0,queueMicrotask(()=>{Ay=!1});let w=p.composedPath()[0];if((Y||y&&D)&&p.key==="Tab"){let L=[...(Y?it:ot).querySelectorAll("button:not(:disabled),input:not(:disabled):not([type=hidden]),select:not(:disabled),textarea:not(:disabled),summary,a[href],[tabindex]")].filter(N=>N.tabIndex>=0&&N.getClientRects().length>0&&!N.closest("[inert]")&&(Y||!y||!!N.closest(".panel,.toolbar"))),O=L[0],V=L.at(-1);p.shiftKey&&(ot.activeElement===O||!L.includes(ot.activeElement))?(p.preventDefault(),V?.focus()):!p.shiftKey&&(ot.activeElement===V||!L.includes(ot.activeElement))&&(p.preventDefault(),O?.focus())}let k=c0(w);if(p.key==="Escape"){H||ee||oe||Y?Xi():D&&Xt(!1);return}if(!k){if(J&&Af(p,o.restore)){p.preventDefault(),H2();return}e.onboarding||(Af(p,o.comment)?(p.preventDefault(),cl(!_)):Af(p,o.browse)?(p.preventDefault(),cl(!1)):i&&Af(p,o.design)&&(p.preventDefault(),Py(!se)))}},{signal:M.signal}),Qi(ot,"pointerdown",p=>{let w=p.composedPath(),k=w.some(L=>L instanceof Element&&L.getRootNode()===ot&&L.matches("button,input,textarea,summary,[role=menu],[role=listbox],.emoji-menu,.emoji-keyboard,.floating-notice"));p.button===0&&(oe||ee)&&!(ee&&mi(window.innerWidth,window.innerHeight))&&!Y&&!w.includes(it)&&!w.includes(Q)&&!w.includes(Tt)&&!(H&&w.includes(Eo))&&!k&&(ee&&to.trim()&&(X={anchor:ee,text:to}),Xi());for(let L of ot.querySelectorAll(".comment-menu[open]"))p.composedPath().includes(L)||(L.open=!1)},{signal:M.signal});let eS=new ResizeObserver(Ti);eS.observe(u);let ml=0,tp=new MutationObserver(()=>{if(ee||oe||H||$a)return Ti();ml||(ml=window.setTimeout(()=>{ml=0,Ti()},80))});tp.observe(document.body,{childList:!0,subtree:!0,characterData:!0}),it.addEventListener("pointerdown",p=>{Y&&p.target===it&&Xi()});function tS(){z||ni()===g2||(g2=ni(),X=null,oe=null,ee=null,Ze())}let nS=()=>setTimeout(tS);window.addEventListener("popstate",nS,{signal:M.signal}),window.navigation?.addEventListener("navigatesuccess",nS,{signal:M.signal});function db(){let p=new Is(e);return p.token===S.token||S.transient&&!p.token?!1:(S.cancelReads(),S=p,en=!1,Rt=null,ae="Connecting",bt=Jn=wo=j=_n=!1,ee=X=null,to=jr="",bi=[],Zo.clear(),ne.length=0,We=Ne=Yt=null,at++,clearTimeout(Dt),Ua(),Ze(),Qe(uu),!0)}window.addEventListener("storage",p=>{p.storageArea===localStorage&&p.key===S.sessionKey&&p.newValue!==S.token&&db()},{signal:M.signal}),window.addEventListener("focus",()=>{db()||Ei?.wake()},{signal:M.signal});let oS=p=>p.target.closest?.(".list .thread-item")?.dataset.thread??"",fb=()=>{clearTimeout(rb),rb=window.setTimeout(()=>cu(),80)};for(let[p,w]of[["pointerover",k=>(su=oS(k))?cu():fb()],["pointerleave",()=>{su="",fb()}],["focusin",k=>{lu=oS(k),cu()}],["focusout",()=>{lu="",fb()}],["scroll",()=>{su=lu="",cu()}]])P.addEventListener(p,w,{capture:!0,signal:M.signal});let pb=!1;u.addEventListener("pointerdown",p=>{pb=p.button===0&&D&&It&&!x&&!H&&!Y&&!oe&&!ee},{capture:!0,signal:M.signal}),u.addEventListener("click",p=>{!pb||!D||x||(pb=!1,p.preventDefault(),p.stopPropagation(),Xt(!1))},{capture:!0,signal:M.signal}),Ei=dS({interval:Math.max(2e3,e.pollInterval??4e3),enabled:()=>!z&&!document.hidden&&navigator.onLine!==!1&&!e.onboarding,active:()=>D||Y||H||!!ee||!!oe,read:async()=>(tS(),en?oi():uu())});for(let p of["online","offline"])window.addEventListener(p,()=>Ei?.wake(),{signal:M.signal});if(Oe.addEventListener("click",()=>Ei?.wake(!1),{signal:M.signal}),Oe.addEventListener("keydown",()=>Ei?.wake(!1),{signal:M.signal}),e.isolateEvents!==!1){Oe.setAttribute("data-isolate","");for(let p of tk)Oe.addEventListener(p,w=>u0(w,ot)&&w.stopPropagation(),{passive:!0,signal:M.signal});document.addEventListener("focusout",p=>p.relatedTarget===Oe&&p.stopImmediatePropagation(),{signal:M.signal})}document.addEventListener("visibilitychange",()=>{document.hidden?(tp.disconnect(),clearTimeout(ml),ml=0):(tp.observe(document.body,{childList:!0,subtree:!0,characterData:!0}),Ti()),(document.hidden||!db())&&Ei?.wake()},{signal:M.signal});let iS={destroy(){if(z)return;z=!0,Ei?.stop(),rt?.destroy(),el?.resetDesignPreviews(),S.cancelReads(),Jc(),ou?.(),cancelAnimationFrame(Uy),clearTimeout(ml),clearTimeout(Zy),clearTimeout(To),clearTimeout(Qy),ru.clear(),st.stop(),Qe(Jt),Ut?.(),Yc?.(!0);for(let[w,k]of $c)k?.(),w.getAnimations().forEach(L=>L.cancel()),w.remove();$c.clear(),vi?.stop(),Br?.stop(),tu(!0),M.abort(),clearTimeout(_f),clearTimeout(Of),clearTimeout(Ey),cancelAnimationFrame(jf),cancelAnimationFrame(Bf),cancelAnimationFrame(Vy),oo(),eS.disconnect(),tp.disconnect(),Cy.disconnect(),cancelAnimationFrame(ky);let p=It?u.scrollTop*qf():window.scrollY/ii;for(let[w,k]of Hr)Object.assign(w.style,k);Hr.clear(),(It||!x)&&(document.documentElement.style.overflow=Sy,Object.assign(u.style,Ki),Object.assign(document.body.style,Wc),document.documentElement.style.background=Zc,window.scrollTo({top:p,behavior:"instant"})),jy.disconnect(),x2.unmount(),Oe.remove(),d2.delete(document)},comment(p){let w=()=>{if(z||!p.isConnected)return;let k=p.getBoundingClientRect();!k.width||!k.height||ub(p,{x:k.left+k.width/2,y:k.top+k.height/2})};D&&!Yf()?(Xt(!1),vi&&ei?vi.finished.then(w):w()):w()},open(){z||(H2(),Xt(!0))},close(){z||(Xi(),Xt(!1))},async refresh(){await oi()}};d2.set(document,{scope:a,controller:iS});try{io=!e.onboarding&&localStorage.getItem(My)==="1"}catch{}Ii();let mb=e.onboarding?null:S.cached();be||=mb!==null;let fO=io;if(io=!0,mb&&je.replace(Ny(mb)),Ze(),x&&(P.style.transition="none",Yi(),P.offsetWidth,P.style.transition=""),io=fO,io&&(Xt(!0),io=!1,!Ft()))for(let p of[Oe,It?u:null])p?.animate([{opacity:0},{opacity:1}],{duration:200,easing:"cubic-bezier(0.22, 1, 0.36, 1)"});async function uu(){let p=S,w=p.token,k;try{await p.restore()}catch{}if(z||p!==S)return;w!==p.token&&Ua(),On(),Y&&Pr();let L=oi();L.catch(()=>{});try{k=await p.request("config")}catch(q){if(z||p!==S||q instanceof DOMException&&q.name==="AbortError")return;let F=LT(q),te=Rt?.detail!==F.detail;throw Rt=F,ae="Offline",te&&Ze(),q}if(z||p!==S)return;en=!0,bt=!!k.google,Jn=k.github,wo=k.guests,j=k.guestResolve,_n=!!k.private,Ze();let O=await L;if(z||p!==S)return;let V=new URL(location.href).searchParams.get("comment"),N=Le.find(q=>q.id===V);return N&&(D||Xt(!0),nu(N)),Ze(),O}return e.onboarding?.inProject||Qe(()=>uu().finally(()=>Ei?.wake(!1))),iS}var ja=new URL(location.href),G_=ja.searchParams.get("project")||"_komo",K_=new URLSearchParams(ja.hash.slice(1)).get("invite")||void 0,LU=K_?void 0:ja.hash.slice(1)||void 0;history.replaceState(null,"",ja.pathname+ja.search);q_({endpoint:location.origin,project:G_,repo:G_,branch:"shared",pageRoot:document.querySelector("main"),onboarding:{code:ja.searchParams.get("code")||void 0,workspace:ja.searchParams.get("workspace")||void 0,site:ja.searchParams.get("site")||void 0,claimKey:LU,invite:K_}});
 /*! Bundled license information:
 
 react/cjs/react.production.js: