@hazem3500/komo 0.9.14 → 0.9.16

package/dist/onboarding-BYM5KIZI.js

@@ -0,0 +1 @@
+import{b as e,c as t}from"./chunk-URGMAMH5.js";import{i as a,j as n,k as s}from"./chunk-ANKCS6NI.js";async function r(e,t=""){let r;try{let a=await e.request(`project/sites${t}`);r=[...a.fixed,...a.sites]}catch{return null}let i=a("div","approved-sites-editor");i.dataset.open="false";let o=a("span","approved-sites-count"),l=s("Sites with comments",()=>{let e="true"!==i.dataset.open;i.dataset.open=String(e),l.setAttribute("aria-expanded",String(e)),c.inert=!e},"approved-sites-toggle");l.replaceChildren(a("span","","Sites with comments"),o,n("chevron")),l.setAttribute("aria-expanded","false");let c=a("div","approved-sites-reveal");c.id=`approved-sites-${crypto.randomUUID()}`,c.inert=!0,l.setAttribute("aria-controls",c.id);let p=a("div","approved-sites-body"),d=a("ul","approved-site-list"),u=a("p","account-usage-status");u.setAttribute("role","status");let v=a("div","approved-site-add"),m=a("input");m.type="text",m.inputMode="url",m.spellcheck=!1,m.placeholder="your-site.com",m.setAttribute("aria-label","Site to approve"),m.setAttribute("autocomplete","off");let b=a("div","account-usage-note account-sites-note");b.append(n("info"),a("span","","Only these sites can show comments. Add * to cover preview links."));let h=async a=>{let n=r;r=a,f(),u.textContent="";try{let n=await e.request(`project/sites${t}`,"PATCH",{sites:a});return r=[...n.fixed,...n.sites],f(),!0}catch(e){return r=n,f(),u.textContent=e instanceof Error?e.message:"Try again.",!1}},y=s("Add",async()=>{let e;try{e=function(e){let t=e.trim().replace(/\/$/,"").toLowerCase();if(/^http:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(t))return t;let a=/^https:\/\/([^/?#@\s]+)$/.exec(t.includes("://")?t:`https://${t}`),[n="",...s]=(a?.[1]??"").split(".");if(!a||s.length<1||s.join(".").includes("*")||n.split("*").length>2||n.includes("*")&&s.length<2)throw new Error("That doesn’t look like a site. Try your-site.com or *-preview.your-site.com.");return`https://${a[1]}`}(m.value)}catch(e){return void(u.textContent=e.message)}if(r.includes(e))return m.value="",void(u.textContent="Already on the list.");let t=m.value;m.value="",y.disabled=!0,await h([...r,e])||(m.value||=t),y.disabled=!1,m.focus()},"secondary");m.addEventListener("keydown",e=>{"Enter"===e.key&&(e.preventDefault(),y.click())}),v.append(m,y);let g=e=>{let t=a("li","approved-site"),n=a("span","",e.replace(/^https:\/\//,""));return n.title=e,t.append(n,s(`Remove ${e}`,()=>{h(r.filter(t=>t!==e))},"icon","close")),t},f=()=>{o.textContent=String(r.length),d.replaceChildren(...r.map(g))};return f(),p.append(d,v,b,u),c.append(p),i.append(l,c),i}var i=new WeakMap;function o(e,n="usage",o=!0,l=!1){let c=a("section","account-usage");c.setAttribute("aria-label","Account usage");let p=(e="")=>{let t=a("span",`usage-skeleton ${e}`);return t.setAttribute("aria-hidden","true"),t},d=e.user?.id,u=e.token,v=()=>e.user?.id===d&&e.token===u,m=i.get(e);m||i.set(e,m=new Map);let b=JSON.stringify([d,u,n]),h=m.get(b);h||m.set(b,h={});let y=e=>{c.setAttribute("aria-busy","false"),c.replaceChildren(a("h3","",`${e.hosted?"Starter plan":"Self-hosted"}${l?" · Local":""}`));let{used:t,limit:n}=e.comments,s=a("div","account-usage-label account-comments"),r=a("span","account-comment-count");if(r.append(a("span","",null===n?`${t.toLocaleString()} / Unlimited`:`${t.toLocaleString()} / ${n.toLocaleString()}`)),s.title="Includes replies and deleted comments.",null!==n){let e=a("span","account-usage-ring");e.setAttribute("role","meter"),e.setAttribute("aria-label","Project comments"),e.setAttribute("aria-valuemin","0"),e.setAttribute("aria-valuemax",String(n)),e.setAttribute("aria-valuenow",String(Math.min(t,n))),e.setAttribute("aria-valuetext",`${t} of ${n} comments used, including replies and deleted comments`),e.style.setProperty("--usage",(n>0?100*Math.min(t/n,1):0)+"%"),e.dataset.full=String(t>=n),r.append(e)}if(s.append(a("span","","Project comments"),r),c.append(s),e.projects){let{used:t,limit:n}=e.projects;if(null===n){let e=a("div","account-usage-label");return e.append(a("span","","Projects"),a("span","",`${t.toLocaleString()} / Unlimited`)),void c.append(e)}let s=a("div","account-projects"),r=a("div","account-usage-label"),i=a("span","account-project-count");i.append(a("strong","",String(t)),a("span","",`of ${n}`)),r.append(a("span","","Projects"),i);let o=a("div","account-project-slots");o.setAttribute("role","meter"),o.setAttribute("aria-label","Projects"),o.setAttribute("aria-valuemin","0"),o.setAttribute("aria-valuemax",String(n)),o.setAttribute("aria-valuenow",String(t)),o.setAttribute("aria-valuetext",`${t} of ${n} projects used`);for(let e=0;e<n;e++){let n=a("span");n.dataset.used=String(e<t),o.append(n)}s.append(r,o),c.append(s)}},g=async()=>{if(!v())return c.replaceChildren(),void c.setAttribute("aria-busy","false");h.value?y(h.value):(()=>{let e=a("div","usage-skeleton-heading");e.append(p("usage-skeleton-title"));let t=a("div","account-usage-label account-comments"),n=a("span","account-comment-count");n.append(p("usage-skeleton-count"),p("usage-skeleton-ring")),t.append(p("usage-skeleton-label"),n);let s=a("div","account-projects"),r=a("div","account-usage-label");r.append(p("usage-skeleton-label"),p("usage-skeleton-count"));let i=a("div","account-project-slots");i.setAttribute("aria-hidden","true"),i.append(a("span"),a("span"),a("span")),s.append(r,i);let o=a("span","sr-only","Loading account usage");o.setAttribute("role","status"),c.setAttribute("aria-busy","true"),c.replaceChildren(e,t,s,o)})(),c.setAttribute("aria-busy","true");try{let t,a=h.pending??=e.request(n);try{t=await a}finally{h.pending===a&&(h.pending=void 0)}if(!v())return delete h.value,c.replaceChildren(),void c.setAttribute("aria-busy","false");if(h.value=t,!c.isConnected)return;y(t),o&&e.user?.verified&&(async()=>{let t=n.includes("?")?n.slice(n.indexOf("?")):"",a=await r(e,t);a&&h.value&&c.isConnected&&v()&&c.append(a)})().catch(()=>{})}catch(e){if(e instanceof t&&(401===e.status||403===e.status)&&delete h.value,!v())return delete h.value,c.replaceChildren(),void c.setAttribute("aria-busy","false");if(!c.isConnected)return;h.value?y(h.value):c.replaceChildren(),c.setAttribute("aria-busy","false");let n=a("span","account-usage-status",h.value?"Couldn’t refresh usage":"Usage unavailable");n.setAttribute("role","status"),c.append(n,s("Retry",()=>{g()},"secondary"))}};return g(),c}function l(t,r,i){let o=a("section","account-sites project-management");o.dataset.open="false";let l=s("Project settings",()=>{let e="true"!==o.dataset.open;o.dataset.open=String(e),l.setAttribute("aria-expanded",String(e)),c.inert=!e,c.setAttribute("aria-hidden",String(!e))},"account-sites-summary");l.append(n("chevron")),l.setAttribute("aria-expanded","false");let c=a("div","account-sites-reveal");c.id=`project-settings-${crypto.randomUUID()}`,l.setAttribute("aria-controls",c.id),c.inert=!0,c.setAttribute("aria-hidden","true");let p=a("div","account-sites-clip");c.append(p);let d=a("div","account-sites-content"),u=a("p","account-usage-status");u.setAttribute("role","status");let v=r?`?workspace=${encodeURIComponent(r)}`:"",m=(e,a="GET",n)=>t.request(`project${e}${v}`,a,n);o.hidden=!0,p.append(d,u),o.append(l,c);let b,h=async e=>{let t=Array.from(o.querySelectorAll("button"));t.forEach(e=>e.disabled=!0),u.textContent="";try{await e()}catch(e){u.textContent=e instanceof Error?e.message:"Try again."}finally{t.forEach(e=>e.disabled=!1)}},y=async()=>{let e,n={format:"komo-export",version:1,project:b.project,exportedAt:(new Date).toISOString(),tables:{}};for(let a of["threads","comments","reactions","users"]){n.tables[a]=[];let s=0;for(;null!==s;){let i=await t.request(`project/export?table=${a}&offset=${s}${void 0===e?"":`&revision=${e}`}${r?`&workspace=${encodeURIComponent(r)}`:""}`);e=i.revision,n.tables[a].push(...i.rows),s=i.next}}let s=URL.createObjectURL(new Blob([JSON.stringify(n,null,2)],{type:"application/json"})),i=a("a");i.href=s,i.download=`${b.project}-comments.json`,i.click(),setTimeout(()=>URL.revokeObjectURL(s),1e3),u.textContent="Export downloaded."},g=async()=>{b=await m(""),o.hidden=!1,d.replaceChildren();let t=a("div","account-name-label");t.append(a("span","","Access"));let n,r=[["public","Anyone with the link"],["private","Invited Google accounts"]],l=()=>{let a=e("Project access",r,b.access,e=>{h(async()=>{let t=b.access;b.access=e,l();try{await m("","PATCH",{access:e}),u.textContent="Access updated."}catch(e){throw b.access=t,l(),e}})});n?n.replaceWith(a):t.append(a),n=a};l(),d.append(t);let c=await m("/webhook"),p=a("details","project-webhook");p.append(a("summary","","Comment webhooks"));let v=a("p","project-help","Send signed events to your HTTPS endpoint. Signing secrets are encrypted and shown only when entered.");p.append(v),c.deliveryAvailable||(v.textContent="Secure webhook delivery is not available on this server yet.");let f=a("label","account-name-label","HTTPS endpoint"),w=a("input");w.type="url",w.autocomplete="off",w.placeholder="https://example.com/komo-webhook",w.value=c.url,f.append(w),p.append(f);let A=a("label","account-name-label",c.secretConfigured?"Replace signing secret":"Signing secret"),C=a("input");C.type="password",C.autocomplete="new-password",C.minLength=32,C.maxLength=256,A.append(C),p.append(A);let k=new Map;for(let e of c.supportedEvents){let t=a("label","account-name-label",e),n=a("input");n.type="checkbox",n.checked=c.events.includes(e),k.set(e,n),t.prepend(n),p.append(t)}let x=a("label","account-name-label","Enable delivery"),j=a("input");j.type="checkbox",j.checked=c.enabled,j.disabled=!c.deliveryAvailable&&!c.enabled,x.prepend(j),p.append(x),p.append(s("Save webhook settings",()=>{h(async()=>{await m("/webhook","PATCH",{url:w.value,secret:C.value,events:[...k].filter(([,e])=>e.checked).map(([e])=>e),enabled:j.checked}),C.value="",u.textContent="Webhook settings saved."})},"secondary")),d.append(p);let S=a("label","account-name-label","Invite someone"),$=a("input");$.type="email",$.placeholder="name@example.com",$.autocomplete="email",S.append($);let E=a("input");E.readOnly=!0,E.hidden=!0,E.setAttribute("aria-label","Invitation link");let T=s("Create invitation",()=>{h(async()=>{if(!$.checkValidity()||!$.value)throw Error("Enter an email address.");let e=await m("/invites","POST",{email:$.value});E.value=e.url,E.hidden=!1,P.hidden=!1,u.textContent="Share this link. It expires in 7 days."})},"secondary"),P=s("Copy invitation",()=>{h(async()=>{await navigator.clipboard.writeText(E.value),u.textContent="Invitation copied."})},"secondary");P.hidden=!0,d.append(S,T,E,P);for(let e of b.members){let t=a("div","project-member");t.append(a("span","",e.name),s(`Remove ${e.name}`,()=>{h(async()=>{await m("/members","DELETE",{user:e.id}),await g(),u.textContent="Member removed."})},"secondary")),d.append(t)}for(let e of b.invites){let t=a("div","project-member");t.append(a("span","",e.email),s("Revoke invitation",()=>{h(async()=>{await m("/invites","DELETE",{email:e.email}),await g(),u.textContent="Invitation revoked."})},"secondary")),d.append(t)}d.append(s("Download comments",()=>{h(y)},"secondary"));let L=a("a","project-help","Move to self-hosting");L.href="https://komo.offbr.co/hosting/#migration",L.target="_blank",L.rel="noopener noreferrer",d.append(L);let R=a("details","project-danger");R.append(a("summary","","Free space or delete project")),R.append(a("p","",`Export first. These actions permanently remove comments. Type ${b.project} to confirm.`));let U=a("input");U.placeholder=b.project,U.setAttribute("aria-label","Confirm project key"),R.append(U),R.append(s("Delete resolved threads",()=>{h(async()=>{await m("/clear-resolved","POST",{confirm:U.value}),i?.(!1),u.textContent="Resolved threads deleted.",U.value=""})},"secondary destructive")),b.hosted&&R.append(s("Delete project",()=>{h(async()=>{await m("","DELETE",{confirm:U.value}),i?.(!0),d.replaceChildren(),u.textContent="Project deleted. Its project slot is available again."})},"secondary destructive")),d.append(R)};return g().catch(e=>{403!==e?.status&&(o.hidden=!1,u.textContent="Project settings unavailable.",d.append(s("Retry",()=>{h(g)},"secondary")))}),o}function c(e,t){let r=a("section","onboarding-panel"),i=a("p","account-usage-status");i.setAttribute("role","status");let l=e=>{i.textContent=e instanceof Error?e.message:"Try again."},c=async()=>{let p=encodeURIComponent(t.workspace),d=a("div","account-sites"),u=a("div","account-sites-summary");u.append(a("span","","Approved sites"),n("chevron")),d.append(u),d.setAttribute("aria-busy","true"),i.textContent="",r.replaceChildren(o(e,`usage?workspace=${p}`,!1),d,i);try{let o=await e.request(`workspace?workspace=${p}`);if(!r.isConnected)return;i.textContent="";let c=a("section","account-sites");c.dataset.open="false";let u=s("",()=>{let e="true"!==c.dataset.open;c.dataset.open=String(e),u.setAttribute("aria-expanded",String(e)),v.inert=!e,v.setAttribute("aria-hidden",String(!e))},"account-sites-summary");u.setAttribute("aria-expanded","false");let v=a("div","account-sites-reveal");v.id=`approved-sites-${crypto.randomUUID()}`,v.inert=!0,v.setAttribute("aria-hidden","true"),u.setAttribute("aria-controls",v.id);let m=a("div","account-sites-clip"),b=a("span","account-sites-count");u.append(a("span","","Approved sites"),b,n("chevron"));let h=a("div","account-sites-content"),y=a("div","approved-sites"),g=()=>{b.textContent=String(o.sites.length),y.replaceChildren(...o.sites.map(e=>a("span","",new URL(e).host)))};g();let f=a("label","account-name-label","Website"),w=a("input");w.type="url",w.placeholder="https://your-site.com",w.setAttribute("autocomplete","url"),w.value=t.site||o.suggested.find(e=>!o.sites.includes(e))||"",f.append(w);let A=s("Approve site",async()=>{let a;try{let e=new URL(w.value.trim());if("https:"!==e.protocol||e.username||e.password)throw Error("Enter an HTTPS website address.");a=e.origin}catch(e){return void l(e)}let n=[...o.sites],s=w.value;o.sites.includes(a)||o.sites.push(a),g(),w.value="",A.disabled=!0;try{await e.request("workspace/sites","POST",{project:t.workspace,origin:a}),t.site=void 0,i.textContent="Site approved"}catch(e){o.sites=n,g(),w.value||(w.value=s),l(e)}finally{A.disabled=!1}},"secondary");w.addEventListener("keydown",e=>{"Enter"===e.key&&(e.preventDefault(),A.click())});let C=a("div","account-usage-note account-sites-note");C.append(n("info"),a("span","","Approved sites can show and share comments. Localhost comments are visible by default.")),h.append(y,f,A,C),m.append(h),v.append(m),c.append(u,v),d.replaceWith(c)}catch(e){l(e),r.append(s("Retry",()=>{c()},"secondary"))}};if(t.invite){let n=s("Accept invitation",async()=>{n.disabled=!0;try{await e.request("project/join","POST",{invite:t.invite}),t.invite=void 0,r.replaceChildren(a("p","","You’re in. Return to the website to leave comments."))}catch(e){l(e),n.disabled=!1}},"primary");r.append(n,i)}else if(t.workspace)c();else if(t.code||t.claimKey){let a=s(t.code?"Create project":"Enable comments",async()=>{a.disabled=!0;let n=a.textContent;a.textContent=t.code?"Creating project…":"Enabling comments…";try{if(t.code){let a=await e.request("setup/complete","POST",{code:t.code});t.workspace=a.project,t.code=void 0,history.replaceState(null,"",`/setup?workspace=${encodeURIComponent(a.project)}`),await c(),i.textContent="Project ready. Return to your terminal."}else await e.request("owner/claim","POST",{key:t.claimKey}),t.claimKey=void 0,r.replaceChildren(o(e),i),i.textContent="Comments are ready."}catch(e){l(e),a.disabled=!1,a.textContent=n}},"primary");r.append(a,i)}else r.append(o(e));return r}export{o as accountUsage,c as onboardingPanel,l as projectManagement};

package/dist/picker-CMP4UZRF.js

@@ -0,0 +1 @@
+function e(e){if("string"!=typeof e||!e)throw new Error("expected a non-empty string, got: "+e)}function t(e){if("number"!=typeof e)throw new Error("expected a number, got: "+e)}var n="emoji",o="keyvalue",i="favorites",r="tokens",a="count",s="group-order",c="eTag",l="url",d="skinTone",u="readonly",m="readwrite",f="skinUnicodes";function h(e){return function(e,t){let n=new Set,o=[];for(let i of e){let e=t(i);n.has(e)||(n.add(e),o.push(i))}return o}(e,e=>e.unicode)}var p={},g={},b={};function v(e,t,n){n.onerror=()=>t(n.error),n.onblocked=()=>t(new Error("IDB blocked")),n.onsuccess=()=>e(n.result)}async function y(e){let t=await new Promise((t,c)=>{let l=indexedDB.open(e,1);p[e]=l,l.onupgradeneeded=e=>{e.oldVersion<1&&function(e){function t(t,n,o){let i=n?e.createObjectStore(t,{keyPath:n}):e.createObjectStore(t);if(o)for(let[e,[t,n]]of Object.entries(o))i.createIndex(e,t,{multiEntry:n});return i}t(o),t(n,"unicode",{[r]:["tokens",!0],[s]:[["group","order"]],[f]:["skinUnicodes",!0]}),t(i,void 0,{[a]:[""]})}(l.result)},v(t,c,l)});return t.onclose=()=>w(e),t}function k(e,t,n,o){return new Promise((i,r)=>{let a,s=e.transaction(t,n,{durability:"relaxed"}),c="string"==typeof t?s.objectStore(t):t.map(e=>s.objectStore(e));o(c,s,e=>{a=e}),s.oncomplete=()=>i(a),s.onerror=()=>r(s.error)})}function w(e){let t=p[e],n=t&&t.result;if(n){n.close();let t=b[e];if(t)for(let e of t)e()}delete p[e],delete g[e],delete b[e]}var j=new Set([":D","XD",":'D","O:)",":X",":P",";P","XP",":L",":Z",":j","8D","XO","8)",":B",":O",":S",":'o","Dx","X(","D:",":C",">0)",":3","</3","<3","\\M/",":E","8#"]);function E(e){return e.split(/[\s_]+/).map(e=>!e.match(/\w/)||j.has(e)?e.toLowerCase():e.replace(/[)(:,]/g,"").replace(/’/g,"'").toLowerCase()).filter(Boolean)}function S(e){return e.filter(Boolean).map(e=>e.toLowerCase()).filter(e=>e.length>=2)}function T(e,t,n,o){e[t](n).onsuccess=e=>o&&o(e.target.result)}function x(e,t,n){T(e,"get",t,n)}function C(e,t,n){T(e,"getAll",t,n)}function $(e){e.commit&&e.commit()}function _(e,t){let n=function(e,t){let n=e[0];for(let o=1;o<e.length;o++){let i=e[o];t(n)>t(i)&&(n=i)}return n}(e,e=>e.length),o=[];for(let i of n)e.some(e=>-1===e.findIndex(e=>t(e)===t(i)))||o.push(i);return o}async function L(e,t,i,r){{let a=function(e){return e.map(({annotation:e,emoticon:t,group:n,order:o,shortcodes:i,skins:r,tags:a,emoji:s,version:c})=>{let l={annotation:e,group:n,order:o,tags:a,tokens:[...new Set(S([...(i||[]).map(E).flat(),...(a||[]).map(E).flat(),...E(e),t]))].sort(),unicode:s,version:c};if(t&&(l.emoticon=t),i&&(l.shortcodes=i),r){l.skinTones=[],l.skinUnicodes=[],l.skinVersions=[];for(let{tone:e,emoji:t,version:n}of r)l.skinTones.push(e),l.skinUnicodes.push(t),l.skinVersions.push(n)}return l})}(t);await k(e,[n,o],m,([e,t],n)=>{let o,s,d=0;function u(){2===++d&&function(){if(o!==r||s!==i){e.clear();for(let t of a)e.put(t);t.put(r,c),t.put(i,l),$(n)}}()}x(t,c,e=>{o=e,u()}),x(t,l,e=>{s=e,u()})})}}async function I(e,t){let o=S(E(t));return o.length?k(e,n,u,(e,t,n)=>{let i=[],a=()=>{let e=_(i,e=>e.unicode);n(e.sort((e,t)=>e.order<t.order?-1:1))};for(let t=0;t<o.length;t++){let n=o[t],s=t===o.length-1?IDBKeyRange.bound(n,n+"￿",!1,!0):IDBKeyRange.only(n);C(e.index(r),s,e=>{i.push(e),i.length===o.length&&a()})}}):[]}async function z(e,t){let o=await I(e,t);return o.length?o.filter(e=>(e.shortcodes||[]).map(e=>e.toLowerCase()).includes(t.toLowerCase()))[0]||null:await async function(e,t){return k(e,n,u,(e,n,o)=>{let i,r=()=>{e.getAll(i&&IDBKeyRange.lowerBound(i,!0),50).onsuccess=e=>{let n=e.target.result;for(let e of n)if(i=e.unicode,t(e))return o(e);if(n.length<50)return o();r()}};r()})}(e,e=>(e.shortcodes||[]).includes(t.toLowerCase()))||null}function P(e,t,n){return k(e,t,u,(e,t,o)=>x(e,n,o))}var M=["name","url"];function A(e){!function(e){let t=e&&Array.isArray(e),n=t&&e.length&&(!e[0]||M.some(t=>!(t in e[0])));if(!t||n)throw new Error("Custom emojis are in the wrong format")}(e);let t=(e,t)=>e.name.toLowerCase()<t.name.toLowerCase()?-1:1,n=e.sort(t),o=function(e,t){let n=new Map;for(let o of e){let e=t(o);for(let t of e){let e=n;for(let n=0;n<t.length;n++){let o=t.charAt(n),i=e.get(o);i||(i=new Map,e.set(o,i)),e=i}let i=e.get("");i||(i=[],e.set("",i)),i.push(o)}}return(e,t)=>{let o=n;for(let t=0;t<e.length;t++){let n=e.charAt(t),i=o.get(n);if(!i)return[];o=i}if(t)return o.get("")||[];let i=[],r=[o];for(;r.length;){let e=[...r.shift().entries()].sort((e,t)=>e[0]<t[0]?-1:1);for(let[t,n]of e)""===t?i.push(...n):r.push(n)}return i}}(e,e=>{let t=new Set;if(e.shortcodes)for(let n of e.shortcodes)for(let e of E(n))t.add(e);return t}),i=e=>o(e,!0),r=e=>o(e,!1),a=new Map,s=new Map;for(let t of e){s.set(t.name.toLowerCase(),t);for(let e of t.shortcodes||[])a.set(e.toLowerCase(),t)}return{all:n,search:e=>{let n=E(e);return _(n.map((e,t)=>(t<n.length-1?i:r)(e)),e=>e.name).sort(t)},byShortcode:e=>a.get(e.toLowerCase()),byName:e=>s.get(e.toLowerCase())}}var O=typeof wrappedJSObject<"u";function B(e){if(!e)return e;if(O&&(e=structuredClone(e)),delete e.tokens,e.skinTones){let t=e.skinTones.length;e.skins=Array(t);for(let n=0;n<t;n++)e.skins[n]={tone:e.skinTones[n],unicode:e.skinUnicodes[n],version:e.skinVersions[n]};delete e.skinTones,delete e.skinUnicodes,delete e.skinVersions}return e}function N(e){e||console.warn("emoji-picker-element is more efficient if the dataSource server exposes an ETag header.")}var D=["annotation","emoji","group","order","version"];function F(e,t){if(2!==Math.floor(e.status/100))throw new Error("Failed to fetch: "+t+":  "+e.status)}async function U(e){let t=await fetch(e);F(t,e);let n=t.headers.get("etag");N(n);let o=await t.json();return function(e){if(!e||!Array.isArray(e)||!e[0]||"object"!=typeof e[0]||D.some(t=>!(t in e[0])))throw new Error("Emoji data is in the wrong format")}(o),[n,o]}async function W(e){let t=function(e){for(var t=e.length,n=new ArrayBuffer(t),o=new Uint8Array(n),i=-1;++i<t;)o[i]=e.charCodeAt(i);return n}(JSON.stringify(e)),n=function(e){for(var t="",n=new Uint8Array(e),o=n.byteLength,i=-1;++i<o;)t+=String.fromCharCode(n[i]);return t}(await crypto.subtle.digest("SHA-1",t));return btoa(n)}async function V(e,t){let n,i=await async function(e){let t=await fetch(e,{method:"HEAD"});F(t,e);let n=t.headers.get("etag");return N(n),n}(t);if(!i){let e=await U(t);i=e[0],n=e[1],i||(i=await W(n))}await async function(e,t,n){let[i,r]=await Promise.all([c,l].map(t=>P(e,o,t)));return i===n&&r===t}(e,t,i)||(n||(n=(await U(t))[1]),await L(e,n,t,i))}var G=class{constructor({dataSource:e="https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json",locale:t="en",customEmoji:n=[]}={}){this.dataSource=e,this.locale=t,this._dbName=`emoji-picker-element-${this.locale}`,this._db=void 0,this._lazyUpdate=void 0,this._custom=A(n),this._clear=this._clear.bind(this),this._ready=this._init()}async _init(){let e=this._db=await(t=this._dbName,g[t]||(g[t]=y(t)),g[t]);var t;!function(e,t){let n=b[e];n||(n=b[e]=[]),n.push(t)}(this._dbName,this._clear);let n=this.dataSource;await async function(e){return!await P(e,o,l)}(e)?await async function(e,t){let[n,o]=await U(t);n||(n=await W(o)),await L(e,o,t,n)}(e,n):this._lazyUpdate=async function(e,t){try{await V(e,t)}catch(e){if("InvalidStateError"!==e.name)throw e}}(e,n)}async ready(){let e=async()=>(this._ready||(this._ready=this._init()),this._ready);await e(),this._db||await e()}async getEmojiByGroup(e){return t(e),await this.ready(),h(await async function(e,t){return k(e,n,u,(e,n,o)=>{let i=IDBKeyRange.bound([t,0],[t+1,0],!1,!0);C(e.index(s),i,o)})}(this._db,e)).map(B)}async getEmojiBySearchQuery(t){return e(t),await this.ready(),[...this._custom.search(t),...h(await I(this._db,t)).map(B)]}async getEmojiByShortcode(t){return e(t),await this.ready(),this._custom.byShortcode(t)||B(await z(this._db,t))}async getEmojiByUnicodeOrName(t){return e(t),await this.ready(),this._custom.byName(t)||B(await async function(e,t){return k(e,n,u,(e,n,o)=>x(e,t,n=>{if(n)return o(n);x(e.index(f),t,e=>o(e||null))}))}(this._db,t))}async getPreferredSkinTone(){return await this.ready(),await P(this._db,o,d)||0}async setPreferredSkinTone(e){return t(e),await this.ready(),function(e,t,n,o){return k(e,t,m,(e,t)=>{e.put(o,n),$(t)})}(this._db,o,d,e)}async incrementFavoriteEmojiCount(t){return e(t),await this.ready(),function(e,t){return k(e,i,m,(e,n)=>x(e,t,o=>{e.put((o||0)+1,t),$(n)}))}(this._db,t)}async getTopFavoriteEmoji(e){return t(e),await this.ready(),(await function(e,t,o){return 0===o?[]:k(e,[i,n],u,([e,n],i,r)=>{let s=[];e.index(a).openCursor(void 0,"prev").onsuccess=e=>{let i=e.target.result;if(!i)return r(s);function a(e){if(s.push(e),s.length===o)return r(s);i.continue()}let c=i.primaryKey,l=t.byName(c);if(l)return a(l);x(n,c,e=>{if(e)return a(e);i.continue()})}})}(this._db,this._custom,e)).map(B)}set customEmoji(e){this._custom=A(e)}get customEmoji(){return this._custom.all}async _shutdown(){await this.ready();try{await this._lazyUpdate}catch{}}_clear(){this._db=this._ready=this._lazyUpdate=void 0}async close(){await this._shutdown(),await w(this._dbName)}async delete(){var e;await this._shutdown(),await(e=this._dbName,new Promise((t,n)=>{w(e),v(t,n,indexedDB.deleteDatabase(e))}))}},R=[[-1,"✨","custom"],[0,"😀","smileys-emotion"],[1,"👋","people-body"],[3,"🐱","animals-nature"],[4,"🍎","food-drink"],[5,"🏠️","travel-places"],[6,"⚽","activities"],[7,"📝","objects"],[8,"⛔️","symbols"],[9,"🏁","flags"]].map(([e,t,n])=>({id:e,emoji:t,name:n})),K=R.slice(1),H="function"==typeof requestIdleCallback?requestIdleCallback:setTimeout;function q(e){return e.unicode.includes("‍")}var X={"🫪":17,"🫩":16,"🫨":15.1,"🫠":14,"🥲":13.1,"🥻":12.1,"🥰":11,"🤩":5,"👱‍♀️":4,"🤣":3,"👁️‍🗨️":2,"😀":1,"😐️":.7,"😃":.6},J=["😊","😒","❤️","👍️","😍","😂","😭","☺️","😔","😩","😏","💕","🙌","😘"],Q='"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif',Y=(e,t)=>e<t?-1:e>t?1:0,Z=(e,t)=>{let n=document.createElement("canvas");n.width=n.height=1;let o=n.getContext("2d",{willReadFrequently:!0});return o.textBaseline="top",o.font=`100px ${Q}`,o.fillStyle=t,o.scale(.01,.01),o.fillText(e,0,0),o.getImageData(0,0,1,1).data};function ee(e){let t=Z(e,"#000"),n=Z(e,"#fff");return t&&n&&((e,t)=>{let n=[...e].join(",");return n===[...t].join(",")&&!n.startsWith("0,0,0,")})(t,n)}var te,ne=()=>(te||(te=new Promise(e=>H(()=>e(function(){let e=Object.entries(X);try{for(let[t,n]of e)if(ee(t))return n}catch{}return e[0][1]}())))),te),oe=new Map;function ie(e){e.preventDefault(),e.stopPropagation()}function re(e,t,n){return(t+=e?-1:1)<0?t=n.length-1:t>=n.length&&(t=0),t}function ae(e,t){let n=new Set,o=[];for(let i of e){let e=t(i);n.has(e)||(n.add(e),o.push(i))}return o}var se=requestAnimationFrame,ce="function"==typeof ResizeObserver;function le(e){{let t=document.createRange();return t.selectNode(e.firstChild),t.getBoundingClientRect().width}}var de,ue;function me(e,t,n){let o=le(t);if(!o){if(!ue){ue=n.cloneNode(!0);let e=getComputedStyle(n);for(let t of["font-family","line-height","width","height","font-size","display","align-items","justify-content"])ue.style.setProperty(t,e.getPropertyValue(t),"important")}try{return document.body.appendChild(ue),ue.firstChild.nodeValue=e,le(ue)}finally{ue.remove()}}return o}function fe(e,t,n){let o=e.get(t);return o||(o=n(),e.set(t,o)),o}function he(e){return""+e}function pe(e){let t=document.createElement("template");return t.innerHTML=e,t}var ge=new WeakMap,be=new WeakMap,ve=Symbol("un-keyed"),ye="replaceChildren"in Element.prototype;function ke(e,t){let{targetNode:n}=t,{targetParentNode:o}=t,i=!1;o?i=function(e,t){let n=e.firstChild,o=0;for(;n;){if(t[o]!==n)return!0;n=n.nextSibling,o++}return o!==t.length}(o,e):(i=!0,t.targetNode=void 0,t.targetParentNode=o=n.parentNode),i&&function(e,t){ye?e.replaceChildren(...t):(e.innerHTML="",e.append(...t))}(o,e)}function we(e,t,n){for(let o=0;o<e.length;o++){let i=e[o],r={binding:i,targetNode:i.attributeName?t:t.firstChild,targetParentNode:void 0,currentExpression:void 0};n.push(r)}}function je(e){let{template:t,elementsToBindings:n}=fe(ge,e,()=>function(e){let t="",n=!1,o=!1,i=-1,r=new Map,a=[],s=0;for(let c=0,l=e.length;c<l;c++){let d=e[c];if(t+=d.slice(s),c===l-1)break;for(let e=0;e<d.length;e++)switch(d.charAt(e)){case"<":"/"===d.charAt(e+1)?a.pop():(n=!0,a.push(++i));break;case">":n=!1,o=!1;break;case"=":o=!0}let u,m,f,h=fe(r,a[a.length-1],()=>[]);if(o){let n=/(\S+)="?([^"=]*)$/.exec(d);u=n[1],m=n[2];let o=/^([^">]*)("?)/.exec(e[c+1]);f=o[1],t=t.slice(0,-1*n[0].length),s=o[0].length}else s=0;let p={attributeName:u,attributeValuePre:m,attributeValuePost:f,expressionIndex:c};h.push(p),!n&&!o&&(t+=" ")}return{template:pe(t),elementsToBindings:r}}(e)),o=t.cloneNode(!0).content.firstElementChild,i=function(e,t){let n,o=[];if(1===t.size&&(n=t.get(0)))we(n,e,o);else{let n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),i=e,r=-1;do{let e=t.get(++r);e&&we(e,i,o)}while(i=n.nextNode())}return o}(o,n);return function(e){return function(e,t){for(let n of t){let{targetNode:t,currentExpression:o,binding:{expressionIndex:i,attributeName:r,attributeValuePre:a,attributeValuePost:s}}=n,c=e[i];if(o!==c)if(n.currentExpression=c,r)if(null===c)t.removeAttribute(r);else{let e=a+he(c)+s;t.setAttribute(r,e)}else{let e;Array.isArray(c)?ke(c,n):c instanceof Element?(e=c,t.replaceWith(e)):t.nodeValue=he(c),e&&(n.targetNode=e)}}}(e,i),o}}function Ee(e,t,n,o,i,r,a,s,c){let{labelWithSkin:l,titleForEmoji:d,unicodeWithSkin:u}=n,{html:m,map:f}=function(e){let t=fe(be,e,()=>new Map),n=ve;return{map:function(e,t,o){return e.map((e,i)=>{let r=n;n=o(e);try{return t(e,i)}finally{n=r}})},html:function(e,...o){let i=fe(t,e,()=>new Map);return fe(i,n,()=>je(e))(o)}}}(t);function h(e,n,o){return f(e,(e,i)=>m`<button role="${n?"option":"menuitem"}" aria-selected="${n?i===t.activeSearchItem:null}" aria-label="${l(e,t.currentSkinTone)}" title="${d(e)}" class="${"emoji"+(n&&i===t.activeSearchItem?" active":"")+(e.unicode?"":" custom-emoji")}" id="${`${o}-${e.id}`}" style="${e.unicode?null:`--custom-emoji-background: url(${JSON.stringify(e.url)})`}">${e.unicode?u(e,t.currentSkinTone):""}</button>`,e=>`${o}-${e.id}`)}let p=m`<section data-ref="rootElement" class="picker" aria-label="${t.i18n.regionLabel}" style="${t.pickerStyle||""}"><div class="pad-top"></div><div class="search-row"><div class="search-wrapper"><input id="search" class="search" type="search" role="combobox" enterkeyhint="search" placeholder="${t.i18n.searchLabel}" autocapitalize="none" autocomplete="off" spellcheck="true" aria-expanded="${!(!t.searchMode||!t.currentEmojis.length)}" aria-controls="search-results" aria-describedby="search-description" aria-autocomplete="list" aria-activedescendant="${t.activeSearchItemId?`emo-${t.activeSearchItemId}`:null}" data-ref="searchElement" data-on-input="onSearchInput" data-on-keydown="onSearchKeydown"><label class="sr-only" for="search">${t.i18n.searchLabel}</label> <span id="search-description" class="sr-only">${t.i18n.searchDescription}</span></div><div class="skintone-button-wrapper ${t.skinTonePickerExpandedAfterAnimation?"expanded":""}"><button id="skintone-button" class="emoji ${t.skinTonePickerExpanded?"hide-focus":""}" aria-label="${t.skinToneButtonLabel}" title="${t.skinToneButtonLabel}" aria-describedby="skintone-description" aria-haspopup="listbox" aria-expanded="${t.skinTonePickerExpanded}" aria-controls="skintone-list" data-on-click="onClickSkinToneButton">${t.skinToneButtonText||""}</button></div><span id="skintone-description" class="sr-only">${t.i18n.skinToneDescription}</span><div data-ref="skinToneDropdown" id="skintone-list" class="skintone-list hide-focus ${t.skinTonePickerExpanded?"":"hidden no-animate"}" style="transform:translateY(${t.skinTonePickerExpanded?0:"calc(-1 * var(--num-skintones) * var(--total-emoji-size))"})" role="listbox" aria-label="${t.i18n.skinTonesLabel}" aria-activedescendant="skintone-${t.activeSkinTone}" aria-hidden="${!t.skinTonePickerExpanded}" tabIndex="-1" data-on-focusout="onSkinToneOptionsFocusOut" data-on-click="onSkinToneOptionsClick" data-on-keydown="onSkinToneOptionsKeydown" data-on-keyup="onSkinToneOptionsKeyup">${f(t.skinTones,(e,n)=>m`<div id="skintone-${n}" class="emoji ${n===t.activeSkinTone?"active":""}" aria-selected="${n===t.activeSkinTone}" role="option" title="${t.i18n.skinTones[n]}" aria-label="${t.i18n.skinTones[n]}">${e}</div>`,e=>e)}</div></div><div class="nav" role="tablist" style="grid-template-columns:repeat(${t.groups.length},1fr)" aria-label="${t.i18n.categoriesLabel}" data-on-keydown="onNavKeydown" data-on-click="onNavClick">${f(t.groups,e=>m`<button role="tab" class="nav-button" aria-controls="tab-${e.id}" aria-label="${t.i18n.categories[e.name]}" aria-selected="${!t.searchMode&&t.currentGroup.id===e.id}" title="${t.i18n.categories[e.name]}" data-group-id="${e.id}"><div class="nav-emoji emoji">${e.emoji}</div></button>`,e=>e.id)}</div><div class="indicator-wrapper"><div class="indicator" style="transform:translateX(${(t.isRtl?-1:1)*t.currentGroupIndex*100}%)"></div></div><div class="message ${t.message?"":"gone"}" role="alert" aria-live="polite">${t.message||""}</div><div data-ref="tabpanelElement" class="tabpanel ${!t.databaseLoaded||t.message?"gone":""}" role="${t.searchMode?"region":"tabpanel"}" aria-label="${t.searchMode?t.i18n.searchResultsLabel:t.i18n.categories[t.currentGroup.name]}" id="${t.searchMode?null:`tab-${t.currentGroup.id}`}" tabIndex="0" data-on-click="onEmojiClick"><div data-action="calculateEmojiGridStyle">${f(t.currentEmojisWithCategories,(e,n)=>m`<div><div id="menu-label-${n}" class="category ${1===t.currentEmojisWithCategories.length&&""===t.currentEmojisWithCategories[0].category?"gone":""}" aria-hidden="true">${t.searchMode?t.i18n.searchResultsLabel:e.category?e.category:t.currentEmojisWithCategories.length>1?t.i18n.categories.custom:t.i18n.categories[t.currentGroup.name]}</div><div class="emoji-menu ${0===n||t.searchMode||-1!==t.currentGroup.id?"":"visibility-auto"}" style="${`--num-rows: ${Math.ceil(e.emojis.length/t.numColumns)}`}" data-action="updateOnIntersection" role="${t.searchMode?"listbox":"menu"}" aria-labelledby="menu-label-${n}" id="${t.searchMode?"search-results":null}">${h(e.emojis,t.searchMode,"emo")}</div></div>`,e=>e.category)}</div></div><div class="favorites onscreen emoji-menu ${t.message?"gone":""}" role="menu" aria-label="${t.i18n.favoritesLabel}" data-on-click="onEmojiClick">${h(t.currentFavorites,!1,"fav")}</div><button data-ref="baselineEmoji" aria-hidden="true" tabindex="-1" class="abs-pos hidden emoji baseline-emoji">😀</button></section>`,g=(t,n)=>{for(let o of e.querySelectorAll(`[${t}]`))n(o,o.getAttribute(t))};if(c){e.appendChild(p);for(let e of["click","focusout","input","keydown","keyup"])g(`data-on-${e}`,(t,n)=>{t.addEventListener(e,o[n])});g("data-ref",(e,t)=>{r[t]=e}),a.addEventListener("abort",()=>{e.removeChild(p)})}g("data-action",(e,t)=>{let n=s.get(t);n||s.set(t,n=new WeakSet),n.has(e)||(n.add(e),i[t](e))})}var Se="function"==typeof queueMicrotask?queueMicrotask:e=>Promise.resolve().then(e);function Te(e,t,n){if(e.length!==t.length)return!1;for(let o=0;o<e.length;o++)if(!n(e[o],t[o]))return!1;return!0}var xe=new WeakMap;var Ce=[],{assign:$e}=Object;function _e(e,t){let n={},o=new AbortController,i=o.signal,{state:r,createEffect:a}=function(e){let t,n,o=!1,i=new Map,r=new Set,a=()=>{if(o)return;let e=[...r];r.clear();try{for(let t of e)t()}finally{n=!1,r.size&&(n=!0,Se(a))}},s=new Proxy({},{get(e,n){if(t){let e=i.get(n);e||(e=new Set,i.set(n,e)),e.add(t)}return e[n]},set(e,t,o){if(e[t]!==o){e[t]=o;let s=i.get(t);if(s){for(let e of s)r.add(e);n||(n=!0,Se(a))}}return!0}});return e.addEventListener("abort",()=>{o=!0}),{state:s,createEffect:e=>{let n=()=>{let o=t;t=n;try{return e()}finally{t=o}};return n()}}}(i),s=new Map;$e(r,{skinToneEmoji:void 0,i18n:void 0,database:void 0,customEmoji:void 0,customCategorySorting:void 0,emojiVersion:void 0}),$e(r,t),$e(r,{initialLoad:!0,currentEmojis:[],currentEmojisWithCategories:[],rawSearchText:"",searchText:"",searchMode:!1,activeSearchItem:-1,message:void 0,skinTonePickerExpanded:!1,skinTonePickerExpandedAfterAnimation:!1,currentSkinTone:0,activeSkinTone:0,skinToneButtonText:void 0,pickerStyle:void 0,skinToneButtonLabel:"",skinTones:[],currentFavorites:[],defaultFavoriteEmojis:void 0,numColumns:8,isRtl:!1,currentGroupIndex:0,groups:K,databaseLoaded:!1,activeSearchItemId:void 0}),a(()=>{r.currentGroup!==r.groups[r.currentGroupIndex]&&(r.currentGroup=r.groups[r.currentGroupIndex])});let c=t=>{e.getElementById(t).focus()},l=t=>e.getElementById(`emo-${t.id}`),d=(e,t)=>{n.rootElement.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))},u=(e,t)=>e.id===t.id,m=(e,t)=>{let{category:n,emojis:o}=e,{category:i,emojis:r}=t;return n===i&&Te(o,r,u)},f=e=>{Te(r.currentEmojis,e,u)||(r.currentEmojis=e)},h=e=>{r.searchMode!==e&&(r.searchMode=e)},p=(e,t)=>t&&e.skins&&e.skins[t]||e.unicode,g={labelWithSkin:(e,t)=>function(e){return ae(e,e=>e)}([e.name||p(e,t),e.annotation,...e.shortcodes||Ce].filter(Boolean)).join(", "),titleForEmoji:e=>e.annotation||(e.shortcodes||Ce).join(", "),unicodeWithSkin:p},b={onClickSkinToneButton:function(e){r.skinTonePickerExpanded=!r.skinTonePickerExpanded,r.activeSkinTone=r.currentSkinTone,r.skinTonePickerExpanded&&(ie(e),se(()=>c("skintone-list")))},onEmojiClick:function(e){let{target:t}=e;if(!t.classList.contains("emoji"))return;ie(e),T(t.id.substring(4))},onNavClick:function(e){let{target:t}=e,o=t.closest(".nav-button");if(!o)return;let i=parseInt(o.dataset.groupId,10);n.searchElement.value="",r.rawSearchText="",r.searchText="",r.activeSearchItem=-1,r.currentGroupIndex=r.groups.findIndex(e=>e.id===i)},onNavKeydown:function(e){let{target:t,key:n}=e,o=t=>{t&&(ie(e),t.focus())};switch(n){case"ArrowLeft":return o(t.previousElementSibling);case"ArrowRight":return o(t.nextElementSibling);case"Home":return o(t.parentElement.firstElementChild);case"End":return o(t.parentElement.lastElementChild)}},onSearchKeydown:function(e){if(!r.searchMode||!r.currentEmojis.length)return;let t=t=>{ie(e),r.activeSearchItem=re(t,r.activeSearchItem,r.currentEmojis)};switch(e.key){case"ArrowDown":return t(!1);case"ArrowUp":return t(!0);case"Enter":if(-1!==r.activeSearchItem)return ie(e),T(r.currentEmojis[r.activeSearchItem].id);r.activeSearchItem=0}},onSkinToneOptionsClick:function(e){let{target:{id:t}}=e,n=t&&t.match(/^skintone-(\d)/);if(!n)return;ie(e),x(parseInt(n[1],10))},onSkinToneOptionsFocusOut:async function(e){let{relatedTarget:t}=e;(!t||"skintone-list"!==t.id)&&(r.skinTonePickerExpanded=!1)},onSkinToneOptionsKeydown:function(e){if(!r.skinTonePickerExpanded)return;let t=async t=>{ie(e),r.activeSkinTone=t};switch(e.key){case"ArrowUp":return t(re(!0,r.activeSkinTone,r.skinTones));case"ArrowDown":return t(re(!1,r.activeSkinTone,r.skinTones));case"Home":return t(0);case"End":return t(r.skinTones.length-1);case"Enter":return ie(e),x(r.activeSkinTone);case"Escape":return ie(e),r.skinTonePickerExpanded=!1,c("skintone-button")}},onSkinToneOptionsKeyup:function(e){if(r.skinTonePickerExpanded&&" "===e.key)return ie(e),x(r.activeSkinTone)},onSearchInput:function(e){r.rawSearchText=e.target.value}},v={calculateEmojiGridStyle:function(e){!function(e,t,n){let o;ce?(o=new ResizeObserver(n),o.observe(e)):se(n),t.addEventListener("abort",()=>{o&&o.disconnect()})}(e,i,()=>{{let e=getComputedStyle(n.rootElement),t=parseInt(e.getPropertyValue("--num-columns"),10),o="rtl"===e.getPropertyValue("direction");r.numColumns=t,r.isRtl=o}})},updateOnIntersection:function(e){!function(e,t,n){{let o=e.closest(".tabpanel"),i=xe.get(o);i||(i=new IntersectionObserver(n,{root:o,rootMargin:"50% 0px 50% 0px",threshold:0}),xe.set(o,i),t.addEventListener("abort",()=>{i.disconnect()})),i.observe(e)}}(e,i,e=>{for(let{target:t,isIntersecting:n}of e)t.classList.toggle("onscreen",n)})}},y=!0;function k(){let{customEmoji:e,database:t}=r,n=e||Ce;t.customEmoji!==n&&(t.customEmoji=n)}a(()=>{Ee(e,r,g,b,v,n,i,s,y),y=!1}),r.emojiVersion||ne().then(e=>{e||(r.message=r.i18n.emojiUnsupportedMessage)}),a(()=>{r.database&&async function(){let e=!1,t=setTimeout(()=>{e=!0,r.message=r.i18n.loadingMessage},1e3);try{await r.database.ready(),r.databaseLoaded=!0}catch(e){console.error(e),r.message=r.i18n.networkErrorMessage}finally{clearTimeout(t),e&&(e=!1,r.message="")}}()}),a(()=>{r.pickerStyle=`\n      --num-groups: ${r.groups.length}; \n      --indicator-opacity: ${r.searchMode?0:1}; \n      --num-skintones: 6;`}),a(()=>{r.customEmoji&&r.database&&k()}),a(()=>{r.customEmoji&&r.customEmoji.length?r.groups!==R&&(r.groups=R):r.groups!==K&&(r.currentGroupIndex&&r.currentGroupIndex--,r.groups=K)}),a(()=>{!async function(){r.databaseLoaded&&(r.currentSkinTone=await r.database.getPreferredSkinTone())}()}),a(()=>{r.skinTones=Array(6).fill().map((e,t)=>function(e,t){if(0===t)return e;let n=e.indexOf("‍");return-1!==n?e.substring(0,n)+String.fromCodePoint(127995+t-1)+e.substring(n):(e.endsWith("️")&&(e=e.substring(0,e.length-1)),e+"\ud83c"+String.fromCodePoint(57339+t-1))}(r.skinToneEmoji,t))}),a(()=>{r.skinToneButtonText=r.skinTones[r.currentSkinTone]}),a(()=>{r.skinToneButtonLabel=r.i18n.skinToneLabel.replace("{skinTone}",r.i18n.skinTones[r.currentSkinTone])}),a(()=>{r.databaseLoaded&&async function(){let{database:e}=r,t=(await Promise.all(J.map(t=>e.getEmojiByUnicodeOrName(t)))).filter(Boolean);r.defaultFavoriteEmojis=t}()}),a(()=>{r.databaseLoaded&&r.defaultFavoriteEmojis&&async function(){k();let{database:e,defaultFavoriteEmojis:t,numColumns:n}=r,o=await e.getTopFavoriteEmoji(n),i=await S(ae([...o,...t],e=>e.unicode||e.name).slice(0,n));r.currentFavorites=i}()}),a(()=>{!async function(){let{searchText:e,currentGroup:t,databaseLoaded:n,customEmoji:o}=r;if(n)if(e.length>=2){let t=await async function(e){return S(await E(await r.database.getEmojiBySearchQuery(e)))}(e);r.searchText===e&&(f(t),h(!0))}else{let{id:e}=t;if(-1!==e||o&&o.length){let t=await async function(e){let t=-1===e?r.customEmoji:await r.database.getEmojiByGroup(e);return S(await E(t))}(e);r.currentGroup.id===e&&(f(t),h(!1))}}else r.currentEmojis=[],r.searchMode=!1}()});let w=()=>{se(()=>function(e){e&&(e.scrollTop=0)}(n.tabpanelElement))};function j(e){return!e.unicode||!q(e)||oe.get(e.unicode)}async function E(e){let t=r.emojiVersion||await ne();return e.filter(({version:e})=>!e||e<=t)}async function S(e){return function(e,t){let n=e=>{let n={};for(let o of e)"number"==typeof o.tone&&o.version<=t&&(n[o.tone]=o.unicode);return n};return e.map(({unicode:e,skins:t,shortcodes:o,url:i,name:r,category:a,annotation:s})=>({unicode:e,name:r,shortcodes:o,url:i,category:a,annotation:s,id:e||r,skins:t&&n(t)}))}(e,r.emojiVersion||await ne())}async function T(e){let t=async function(e){let t=await r.database.getEmojiByUnicodeOrName(e),n=[...r.currentEmojis,...r.currentFavorites].find(t=>t.id===e),o=n.unicode&&p(n,r.currentSkinTone);return await r.database.incrementFavoriteEmojiCount(e),{emoji:t,skinTone:r.currentSkinTone,...o&&{unicode:o},...n.name&&{name:n.name}}}(e);d("emoji-click-sync",t),d("emoji-click",await t)}function x(e){r.currentSkinTone=e,r.skinTonePickerExpanded=!1,c("skintone-button"),d("skin-tone-change",{skinTone:e}),r.database.setPreferredSkinTone(e)}return a(()=>{let{currentEmojis:e,emojiVersion:t}=r,o=e.filter(e=>e.unicode).filter(e=>q(e)&&!oe.has(e.unicode));if(!t&&o.length)f(e),se(()=>function(e){!function(e,t,n){let o=!0;for(let i of e){let e=n(i);if(!e)continue;typeof de>"u"&&(de=me("😀",t,t));let r=me(i.unicode,e,t)/1.8<de;oe.set(i.unicode,r),r||(o=!1)}return o}(e,n.baselineEmoji,l)?r.currentEmojis=[...r.currentEmojis]:w()}(o));else{let n=t?e:e.filter(j);f(n),w()}}),a(()=>{}),a(()=>{(e=>{Te(r.currentEmojisWithCategories,e,m)||(r.currentEmojisWithCategories=e)})(function(){let{searchMode:e,currentEmojis:t}=r;if(e)return[{category:"",emojis:t}];let n=new Map;for(let e of t){let t=e.category||"",o=n.get(t);o||(o=[],n.set(t,o)),o.push(e)}return[...n.entries()].map(([e,t])=>({category:e,emojis:t})).sort((e,t)=>r.customCategorySorting(e.category,t.category))}())}),a(()=>{r.activeSearchItemId=-1!==r.activeSearchItem&&r.currentEmojis[r.activeSearchItem].id}),a(()=>{let{rawSearchText:e}=r;H(()=>{r.searchText=(e||"").trim(),r.activeSearchItem=-1})}),a(()=>{r.skinTonePickerExpanded?n.skinToneDropdown.addEventListener("transitionend",()=>{r.skinTonePickerExpandedAfterAnimation=!0},{once:!0}):r.skinTonePickerExpandedAfterAnimation=!1}),{$set(e){$e(r,e)},$destroy(){o.abort()}}}var Le={categoriesLabel:"Categories",emojiUnsupportedMessage:"Your browser does not support color emoji.",favoritesLabel:"Favorites",loadingMessage:"Loading…",networkErrorMessage:"Could not load emoji.",regionLabel:"Emoji picker",searchDescription:"When search results are available, press up or down to select and enter to choose.",searchLabel:"Search",searchResultsLabel:"Search results",skinToneDescription:"When expanded, press up or down to select and enter to choose.",skinToneLabel:"Choose a skin tone (currently {skinTone})",skinTonesLabel:"Skin tones",skinTones:["Default","Light","Medium-Light","Medium","Medium-Dark","Dark"],categories:{custom:"Custom","smileys-emotion":"Smileys and emoticons","people-body":"People and body","animals-nature":"Animals and nature","food-drink":"Food and drink","travel-places":"Travel and places",activities:"Activities",objects:"Objects",symbols:"Symbols",flags:"Flags"}},Ie=["customEmoji","customCategorySorting","database","dataSource","i18n","locale","skinToneEmoji","emojiVersion"],ze=`:host{--emoji-font-family:${Q}}`,Pe=class extends HTMLElement{constructor(e){super(),this.attachShadow({mode:"open"});let t=document.createElement("style");t.textContent=':host{--emoji-size:1.375rem;--emoji-padding:0.5rem;--category-emoji-size:var(--emoji-size);--category-emoji-padding:var(--emoji-padding);--indicator-height:3px;--input-border-radius:0.5rem;--input-border-size:1px;--input-font-size:1rem;--input-line-height:1.5;--input-padding:0.25rem;--num-columns:8;--outline-size:2px;--border-size:1px;--border-radius:0;--skintone-border-radius:1rem;--category-font-size:1rem;display:flex;width:min-content;height:400px}:host,:host(.light){color-scheme:light;--background:#fff;--border-color:#e0e0e0;--indicator-color:#385ac1;--input-border-color:#999;--input-font-color:#111;--input-placeholder-color:#999;--outline-color:#999;--category-font-color:#111;--button-active-background:#e6e6e6;--button-hover-background:#d9d9d9}:host(.dark){color-scheme:dark;--background:#222;--border-color:#444;--indicator-color:#5373ec;--input-border-color:#ccc;--input-font-color:#efefef;--input-placeholder-color:#ccc;--outline-color:#fff;--category-font-color:#efefef;--button-active-background:#555555;--button-hover-background:#484848}@media (prefers-color-scheme:dark){:host{color-scheme:dark;--background:#222;--border-color:#444;--indicator-color:#5373ec;--input-border-color:#ccc;--input-font-color:#efefef;--input-placeholder-color:#ccc;--outline-color:#fff;--category-font-color:#efefef;--button-active-background:#555555;--button-hover-background:#484848}}:host([hidden]){display:none}button{margin:0;padding:0;border:0;background:0 0;box-shadow:none;-webkit-tap-highlight-color:transparent}button::-moz-focus-inner{border:0}input{padding:0;margin:0;line-height:1.15;font-family:inherit}input[type=search]{-webkit-appearance:none}:focus{outline:var(--outline-color) solid var(--outline-size);outline-offset:calc(-1*var(--outline-size))}:host([data-js-focus-visible]) :focus:not([data-focus-visible-added]){outline:0}:focus:not(:focus-visible){outline:0}.hide-focus{outline:0}*{box-sizing:border-box}.picker{contain:content;display:flex;flex-direction:column;background:var(--background);border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);width:100%;height:100%;overflow:hidden;--total-emoji-size:calc(var(--emoji-size) + (2 * var(--emoji-padding)));--total-category-emoji-size:calc(var(--category-emoji-size) + (2 * var(--category-emoji-padding)))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.hidden{opacity:0;pointer-events:none}.abs-pos{position:absolute;left:0;top:0}.gone{display:none!important}.skintone-button-wrapper,.skintone-list{background:var(--background);z-index:3}.skintone-button-wrapper.expanded{z-index:1}.skintone-list{position:absolute;inset-inline-end:0;top:0;z-index:2;overflow:visible;border-bottom:var(--border-size) solid var(--border-color);border-radius:0 0 var(--skintone-border-radius) var(--skintone-border-radius);will-change:transform;transition:transform .2s ease-in-out;transform-origin:center 0}@media (prefers-reduced-motion:reduce){.skintone-list{transition-duration:.001s}}@supports not (inset-inline-end:0){.skintone-list{right:0}}.skintone-list.no-animate{transition:none}.tabpanel{overflow-y:auto;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;will-change:transform;min-height:0;flex:1;contain:content}.emoji-menu{display:grid;grid-template-columns:repeat(var(--num-columns),var(--total-emoji-size));justify-content:space-around;align-items:flex-start;width:100%}.emoji-menu.visibility-auto{content-visibility:auto;contain-intrinsic-size:calc(var(--num-columns)*var(--total-emoji-size)) calc(var(--num-rows)*var(--total-emoji-size))}.category{padding:var(--emoji-padding);font-size:var(--category-font-size);color:var(--category-font-color)}.emoji,button.emoji{font-size:var(--emoji-size);display:flex;align-items:center;justify-content:center;border-radius:100%;height:var(--total-emoji-size);width:var(--total-emoji-size);line-height:1;overflow:hidden;font-family:var(--emoji-font-family);cursor:pointer}@media (hover:hover) and (pointer:fine){.emoji:hover,button.emoji:hover{background:var(--button-hover-background)}}.emoji.active,.emoji:active,button.emoji.active,button.emoji:active{background:var(--button-active-background)}.onscreen .custom-emoji::after{content:"";width:var(--emoji-size);height:var(--emoji-size);background-repeat:no-repeat;background-position:center center;background-size:contain;background-image:var(--custom-emoji-background)}.nav,.nav-button{align-items:center}.nav{display:grid;justify-content:space-between;contain:content}.nav-button{display:flex;justify-content:center}.nav-emoji{font-size:var(--category-emoji-size);width:var(--total-category-emoji-size);height:var(--total-category-emoji-size)}.indicator-wrapper{display:flex;border-bottom:1px solid var(--border-color)}.indicator{width:calc(100%/var(--num-groups));height:var(--indicator-height);opacity:var(--indicator-opacity);background-color:var(--indicator-color);will-change:transform,opacity;transition:opacity .1s linear,transform .25s ease-in-out}@media (prefers-reduced-motion:reduce){.indicator{will-change:opacity;transition:opacity .1s linear}}.pad-top,input.search{background:var(--background);width:100%}.pad-top{height:var(--emoji-padding);z-index:3}.search-row{display:flex;align-items:center;position:relative;padding-inline-start:var(--emoji-padding);padding-bottom:var(--emoji-padding)}.search-wrapper{flex:1;min-width:0}input.search{padding:var(--input-padding);border-radius:var(--input-border-radius);border:var(--input-border-size) solid var(--input-border-color);color:var(--input-font-color);font-size:var(--input-font-size);line-height:var(--input-line-height)}input.search::placeholder{color:var(--input-placeholder-color)}.favorites{overflow-y:auto;scrollbar-gutter:stable;display:flex;flex-direction:row;border-top:var(--border-size) solid var(--border-color);contain:content}.message{padding:var(--emoji-padding)}'+ze,this.shadowRoot.appendChild(t),this._ctx={locale:"en",dataSource:"https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json",skinToneEmoji:"🖐️",customCategorySorting:Y,customEmoji:null,i18n:Le,emojiVersion:null,...e};for(let e of Ie)"database"!==e&&Object.prototype.hasOwnProperty.call(this,e)&&(this._ctx[e]=this[e],delete this[e]);this._dbFlush()}connectedCallback(){Ae(this),this._cmp||(this._cmp=_e(this.shadowRoot,this._ctx))}disconnectedCallback(){Ae(this),Se(()=>{if(!this.isConnected&&this._cmp){this._cmp.$destroy(),this._cmp=void 0;let{database:e}=this._ctx;e.close().catch(e=>console.error(e))}})}static get observedAttributes(){return["locale","data-source","skin-tone-emoji","emoji-version"]}attributeChangedCallback(e,t,n){this._set(e.replace(/-([a-z])/g,(e,t)=>t.toUpperCase()),"emoji-version"===e?parseFloat(n):n)}_set(e,t){this._ctx[e]=t,this._cmp&&this._cmp.$set({[e]:t}),["locale","dataSource"].includes(e)&&this._dbFlush()}_dbCreate(){let{locale:e,dataSource:t,database:n}=this._ctx;(!n||n.locale!==e||n.dataSource!==t)&&this._set("database",new G({locale:e,dataSource:t}))}_dbFlush(){Se(()=>this._dbCreate())}},Me={};for(let e of Ie)Me[e]={get(){return"database"===e&&this._dbCreate(),this._ctx[e]},set(t){if("database"===e)throw new Error("database is read-only");this._set(e,t)}};function Ae(e){e instanceof Pe||Object.setPrototypeOf(e,customElements.get(e.tagName.toLowerCase()).prototype)}Object.defineProperties(Pe.prototype,Me),customElements.get("emoji-picker")||customElements.define("emoji-picker",Pe);export{Pe as default,Ae as rescueElementPrototype};

package/dist/react-props-panel-NC7KLZ73.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";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 A(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function P(e){let t,n=e.trim().toLowerCase().replace(/\s+/g," "),o=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(n)?.[1];if(o)t=(o.length<5?[...o].map(e=>e+e).join(""):o).match(/../g).map((e,t)=>parseInt(e,16)/(t>2?255:1));else{let e=/^rgba?\(([^)]*)\)$/.exec(n)?.[1].split(/\s*[,/]\s*|\s+/);e&&(3===e.length||4===e.length)&&e.every(e=>/^[\d.]+%?$/.test(e))&&(t=e.map((e,t)=>parseFloat(e)*(e.endsWith("%")?t>2?.01:2.55:1)))}if(!t)return n.replace(/\s*,\s*/g,",");let[i,r,a,s=1]=t.map((e,t)=>t>2?+e.toFixed(2):Math.round(e));return 1===s?`rgb(${i},${r},${a})`:`rgba(${i},${r},${a},${s})`}function N(e,t){let n=P(t);return n?e.find(e=>"string"==typeof e.value&&P(e.value)===n):void 0}function M(e){return e.label||e.path}function L(e){return[e.path,e.ref,e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function T(){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 D(e,t){return[...w.get(e)??[]].reverse().find(e=>e.property===t)?.token}function O(e){let t=w.get(e);t?.pop()?.undo(),t&&!t.length&&w.delete(e)}function q(e){return!!w.get(e)?.length}function R(e){for(;w.has(e);)O(e)}function V(e){return[...new Set(w.get(e)?.map(e=>e.property))]}function B(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 U(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=B(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 F=new Map,H=new Map,I=new WeakSet,W=new WeakMap;function _(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var J=new Map;function X(e){if(e)for(let[e,n]of F){let o=t(e);o&&(J.set(e,o.props),o.setProps({...o.props,...Object.fromEntries(n)}))}else for(let[e,n]of J)t(e)?.setProps(n);e||J.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 Y(e){return!!F.get(e)?.size}function K(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=F.get(e);return a||F.set(e,a=new Map),a.has(o)||a.set(o,r),{propName:o,before:r}}function G(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 Q(e,t,n,o){if(n===o){let o=F.get(e);return void(o?.get(t)===n&&!(H.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||F.delete(e)))}let i=H.get(e);i||H.set(e,i=[]),i.push({propName:t,before:n,after:o})}function Z(e,t,n){G(e,t,n);let o=F.get(e);o?.get(t)===n&&!(H.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||F.delete(e))}function ee(e){return!!e&&!!H.get(e)?.length}function te(e){let n=F.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}: ${_(t)} → ${_(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; inline feedback does not write source files."].join("\n")}function ne(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 oe=e=>String(e).replace(/\s+/g," ").trim();function ie(e,o){let i=Object.entries(C(o)).map(([e,t])=>`${oe(e)}=${oe(t)}`).join(", "),r=ne(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(F.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])=>`${oe(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[i&&`Theme: ${i}`,r?.name&&`Component: ${oe(r.name)}${r.source?` (${oe(r.source)})`:""}`,l.length&&`Props: ${l.join(", ")}`].filter(e=>!!e)}function re(e){return[te(e),x(e),U(e)].filter(e=>!!e).join("\n\n")||void 0}function ae(e,n,o){W.get(e)?.abort();let i=new AbortController;W.set(e,i),e.addEventListener("click",e=>{let i=n();if(!i)return;let r=x(i)||q(i);!t(i)&&!r||(e.stopImmediatePropagation(),o(i,re(i)))},{capture:!0,signal:i.signal})}function se(e){return b(e)}function le(e){return h(e)||q(e)}function de(e){k(e)}function pe(e){v(e),R(e)}function ce(e){if(!e||I.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}}.design-token-match{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;margin-top:-2px;padding:0 4px;color:#77736f;font-size:10px}.design-token-match[hidden]{display:none}.design-token-match>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-token-match button{flex:none;padding:0;border:0;background:none;color:#bda6ef;font:inherit;cursor:pointer}.design-token-match button:hover{text-decoration:underline}.design-token-match button:focus-visible{outline:1px solid #bda6ef;outline-offset:2px;border-radius:2px}@media (pointer:coarse){.design-token-match button{min-height:32px}}",e.append(t),I.add(e)}function ue(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false");let n,o=n=>import("./token-picker-XXX4L3Y7.js").then(o=>{!e.isConnected||e.disabled||!n&&o.isTokenPickerOpen(e)||o.toggleTokenPicker({trigger:e,...t()})},()=>{});e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),n="mouse"===t.pointerType?void 0:t,!n&&(e.focus(),o(!0)))}),e.addEventListener("pointerup",e=>{n&&Math.abs(e.clientY-n.clientY)<=10&&o(!0),n=void 0});for(let t of["mousedown","touchend"])e.addEventListener(t,e=>{e.cancelable&&e.preventDefault()});e.addEventListener("keydown",e=>{e.ctrlKey||e.metaKey||!["Enter"," ","ArrowDown","ArrowUp"].includes(e.key)||(e.preventDefault(),o(!1))})}function fe(e,t){let n=document.createElement("div");n.className="design-token-match",n.hidden=!0;let o=document.createElement("span"),i=document.createElement("button");i.type="button",i.textContent="Use token",n.append(o,i);let r=()=>{};return i.addEventListener("click",e=>{e.preventDefault(),r()}),{show(a,s){n.isConnected||(e??t.parentElement)?.after(n),n.hidden=!a,r=s,o.textContent=a?`Matches ${a.label||a.path}`:"",o.title=a?`${a.path}${a.ref?` · ${a.ref}`:""} · ${a.value}`:"",i.setAttribute("aria-label",a?`Use token ${a.label||a.path}`:"Use token")}}}function ge(e,t,n,r){let a=o(e);if(!a)return null;let s=m(a,t);if(!s.length)return null;ce(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=T(),E=e=>({path:e.path,type:e.type,value:i(a,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),$=fe(null,l),C=e=>{k.value=e,k.dispatchEvent(new Event("change"))};ue(k,()=>({tokens:s.map(E),property:t,current:k.value,onSelect:e=>C(e.path)}));let S=()=>{let n=u(a,e,t),o=n?null:f(a,e,t),i="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,r=i??o?.token;k.value=r?.path??"custom",h.textContent=r?.path??"";let d=n?.declaredPath,p=i?"token":o?"connected":d?"override":"custom";l.dataset.mode=p,l.parentElement?.setAttribute("data-token-mode",p),v.textContent="token"===p?d&&d!==i?.path?`Rebound from ${d} · preview`:`Linked to ${i?.path} · preview`:"connected"===p?"Connected "+("inline"===o?.origin?"inline":"from stylesheet"):"override"===p?`Custom override · was ${d}`:"",k.title=v.textContent||"Choose a token",w.hidden="custom"!==p;let c="custom"===p?getComputedStyle(e).getPropertyValue(t).trim():"",g="custom"===p?N(s.map(E),c):void 0;"custom"===p&&j(w,c,g),$.show(g,()=>g&&C(g.path))},A=new MutationObserver(S);A.observe(e,{attributes:!0,attributeFilter:["style"]});let P=new MutationObserver(()=>{l.isConnected||(A.disconnect(),P.disconnect())});return P.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)}S()}),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(S),S(),l}function me(e){let t=o(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...V(e)])}function he(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 void p((t,n,r,a)=>ge(e,t.property,e=>{o(t,r,e),a()},i));ce(i);let u=function(e,t){let n,o=(Array.isArray(t?.themes)?t.themes:[]).find(e=>Array.isArray(e?.options)&&e.options.length>1&&e.options.length<4);if(o)return()=>n??=Promise.all(o.options.map(n=>S(e,{...C(t),[o.id]:n.id}).then(e=>({label:Ne(n.label,n.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(c,s);return Promise.all([S(c,C(s)),A(c,e)]).then(([t,n])=>{p((o,i,r,a)=>be(c,e,o.property,t,n[o.property],e=>{l?.(e),a()},i,r,u))},()=>{})}function be(e,t,n,o,i,r,a,s,l){let d=function(e,t){return e.filter(e=>e.properties?.includes(t))}(o,n);if(!d.length&&!i)return null;let p=i&&"offToken"in i?i.offToken:void 0,c=void 0===p?void 0:N(d,p),u=document.createElement("span");u.className="design-token-binding";let f=document.createElement("span");f.className="design-token-chip",f.setAttribute("aria-hidden","true");let g=document.createElement("span");g.className="design-token-icon",g.setAttribute("aria-hidden","true");let m=document.createElement("button");m.type="button",m.className="design-token-detach",m.title="Edit the value",m.setAttribute("aria-label",`Edit ${n} value`),m.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 h=document.createElement("select");h.setAttribute("aria-label",`Style token for ${n}`),h.disabled=!d.length;let b=document.createElement("option");b.value="",b.textContent="Choose a token",h.append(b);let k=new Map([["",h]]);for(let e of d){let t=e.group??"",n=k.get(t);n||(n=document.createElement("optgroup"),n.label=t,k.set(t,n));let o=document.createElement("option");o.value=e.path,o.textContent=`${M(e)}${e.ref?` · ${e.ref}`:""}${e===c?" · same value":""}`,o.title=L(e),n.append(o)}for(let[e,t]of k)e&&h.append(t);let v=T();void 0!==p&&j(v,p,c);let y=document.createElement("small");y.className="design-token-binding__state",y.setAttribute("aria-live","polite");let x=!1,E=fe(a,u);ue(h,()=>({tokens:o,property:n,current:x?void 0:D(t,n)?.path??(i&&"path"in i?i.path:void 0),themes:l,onSelect:C}));let $=()=>{let e=D(t,n),r=x?void 0:e?.path??(i&&"path"in i?i.path:void 0),s=r?o.find(e=>e.path===r):void 0;h.value=r&&d.some(e=>e.path===r)?r:"",f.textContent=s?M(s):r??"";let l=r?e?"token":"connected":"custom";u.dataset.mode=l,(a??u.parentElement)?.setAttribute("data-token-mode",l),v.hidden=void 0===p||!!e,y.textContent=s?`${e?"Preview":"Uses"} ${L(s)}`:r?`Uses ${r}`:v.hidden?"":v.title,h.title=y.textContent||"Choose a token",E.show(v.hidden||x?void 0:c,()=>c&&C(c))};function C(a){x=!1;let s=i??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},l="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)}),()=>O(t)}(e,t,n,a,s,l)),$()}return h.addEventListener("change",()=>{let e=d.find(e=>e.path===h.value);e?C(e):$()}),m.addEventListener("click",()=>{x=!0,$(),s?.focus()}),u.append(f,h,g,m,v,y),$(),u}var ke=!1;function ve(e,t,n,i){let r=o(e);if(!r||!r.tokens.length)return null;ce(i);let a=document.createElement("details");a.className="design-group design-theme-group",a.open=ke,a.addEventListener("toggle",()=>{a.isConnected&&(ke=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(ye(r,i,t,n,e))}return a}function ye(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 xe(e,t,n){let i=o(e);i&&p(i,e,t,n)}function we(e,t){let n=o(e);n&&c(n,e,t)}function Ee(e){let n=H.get(e)?.pop(),o=t(e);if(!n||!o)return;o.setProps({...o.props,[n.propName]:n.before});let i=F.get(e);if(i){let t=i.get(n.propName);Object.is(t,n.before)&&i.delete(n.propName),i.size||F.delete(e)}}function $e(){for(let e of[...F.keys()])Le(e);F.clear(),H.clear(),y(),function(){for(let e of[...w.keys()])R(e)}(),Pe()}var Ce,Se=new Map;function Ae(e){try{return String(e.current())}catch{return}}function Pe(){for(let[e,t]of Se)try{Ae(e)!==t&&e.apply(t)}catch{}Se.clear()}var Ne=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function Me(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=Ae(e),o=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||o.length<2)continue;let a=Ne(e.label,String(e.id)),s=o=>{let i=Ae(e);if(o!==i){Se.has(e)||Se.set(e,i??t),Ce=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(Ne(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=Ne(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>s(e.id)),d.append(n)}}Ce===e&&(r=d.querySelector("[aria-pressed=true]")??d),l.append(p,d),i.append(l)}Ce=void 0,i.childElementCount&&(ce(o),e.prepend(i),r?.focus({preventScroll:!0}))}function Le(e){let n=F.get(e),o=t(e);!n?.size||!o||(o.setProps({...o.props,...Object.fromEntries(n)}),F.delete(e),H.delete(e))}function Te(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=F.get(t);d||F.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||F.delete(t);let c=H.get(t);return c||H.set(t,c=[]),c.push({propName:o,before:l,after:i}),n.setProps({...n.props,[o]:i}),a(),!0}function je(e,i,r,a,s){let l=t(e);if(!l){let t=ne(e,s),o=null;try{o=t&&s?.components?.panel?.(t)||null}catch{}return o&&ce(r),o??function(e,t,o){let i=n(e);if(!i)return null;ce(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)}ce(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=`Inline feedback 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);Te(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]:"";Te(e,l,t.name,r,s,i)&&u()}),o.append(a,p),r.append(o),u()}}d.append(r)}return d}export{he as attachStyleTokenControls,Me as attachThemeSwitcher,K as beginReactTextEdit,se as canUndoDesignTokenEdit,ee as canUndoReactProp,Z as cancelReactTextEdit,be as createAdapterTokenControl,ve as createDesignThemePanel,ge as createElementTokenControl,je as createReactPropsPanel,ie as designContext,Q as finishReactTextEdit,le as hasDesignTokenEdit,Y as hasReactPropChanges,ae as installCommentCapture,xe as noteDesignTokenOverride,G as previewReactTextEdit,re as proposedDesignChanges,te as proposedReactChanges,pe as resetDesignTokenEdits,$e as resetPreviews,Le as resetReactProps,Pe as restoreThemes,X as showDesignBefore,we as syncDesignTokenBinding,me as tokenBoundProperties,de as undoDesignTokenEdit,Ee 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-RCC6R6PS.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-ANKCS6NI.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-65SLG7FY.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-ANKCS6NI.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||"frame"===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/select-menu-IY5BJMFM.js

@@ -0,0 +1 @@
+var e,t=new WeakSet,o=new WeakSet,n=0;function i(n){e&&!e.select.isConnected&&e.close();let i=n.getRootNode();if((i instanceof ShadowRoot||i===document)&&!o.has(i)){o.add(i);let e=document.createElement("style");e.textContent=".design-field>select{appearance:none;padding-right:20px;cursor:pointer;background: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 7px center/8px no-repeat}.komo-select{position:absolute;z-index:20;box-sizing:border-box;width:max-content;max-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.2;text-align:left;cursor:default;transform-origin:top;animation:komo-select-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up]{transform-origin:bottom}@keyframes komo-select-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select{animation:none}}.komo-select [role=option]{display:flex;align-items:center;gap:8px;min-height:26px;padding:0 8px;border-radius:6px;white-space:nowrap;cursor:pointer}.komo-select [role=option] span{flex:1;overflow:hidden;text-overflow:ellipsis}.komo-select [data-active]{background:#ffffff14;color:#f1efeb}.komo-select [aria-selected=true]{color:#f1efeb}.komo-select [aria-selected=true]::after{content:'';flex:none;width:7px;height:3.5px;margin:-3px 1px 0 0;border:solid #bda6ef;border-width:0 0 1.5px 1.5px;rotate:-45deg}.komo-select [aria-disabled=true]{opacity:.4;cursor:default}.komo-select small{display:block;padding:8px 8px 4px;color:#77736f;font-size:10px;font-weight:500}.komo-select [role=group]+[role=group],.komo-select [role=option]+[role=group]{margin-top:4px;border-top:1px solid #ffffff0d}@media (pointer:coarse){.komo-select{font-size:13px}.komo-select [role=option]{min-height:40px}}",(i instanceof ShadowRoot?i:document.head).append(e)}if(t.has(n))return;t.add(n);let d=e=>{let t=e.composedPath()[0];return t instanceof HTMLSelectElement&&!t.disabled&&!t.multiple&&!t.dataset.picker?t:null};n.addEventListener("focusin",e=>{let t=d(e);t&&!t.hasAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-expanded","false"))}),n.addEventListener("pointerdown",e=>{a="mouse"===e.pointerType?void 0:e;let t=d(e);!t||e.button||(e.preventDefault(),a||r(t))},!0),n.addEventListener("pointerup",e=>{let t=d(e);t&&a&&!l(e)&&r(t)},!0);for(let e of["mousedown","touchend"])n.addEventListener(e,e=>{d(e)&&e.cancelable&&e.preventDefault()},!0);n.addEventListener("keydown",t=>{let o=d(t);!o||e?.select===o||t.ctrlKey||t.metaKey||["Enter"," ","ArrowDown","ArrowUp"].includes(t.key)&&(t.preventDefault(),s(o))},!0)}var a,l=e=>a&&Math.abs(e.clientY-a.clientY)>10;function r(t){if(e?.select===t)return e.close();a||t.focus(),s(t)}function s(t){e?.close(),a=void 0;let o="komo-select-"+ ++n,i=document.createElement("div");i.className="komo-select",i.id=o,i.setAttribute("role","listbox"),i.setAttribute("aria-label",t.getAttribute("aria-label")??t.title);let r=[],s=(e,t)=>{let n=document.createElement("div");n.id=`${o}-${r.length}`,n.setAttribute("role","option"),n.setAttribute("aria-selected",String(e.selected)),e.disabled&&n.setAttribute("aria-disabled","true"),e.title&&(n.title=e.title);let i=document.createElement("span");i.textContent=e.label,n.append(i),t.append(n),r.push({node:n,option:e})};for(let e of t.children)if(e instanceof HTMLOptionElement)s(e,i);else if(e instanceof HTMLOptGroupElement){let t=document.createElement("div");t.setAttribute("role","group"),t.setAttribute("aria-labelledby",`${o}-g${r.length}`);let n=document.createElement("small");n.id=`${o}-g${r.length}`,n.textContent=e.label,t.append(n);for(let o of e.querySelectorAll("option"))s(o,t);i.append(t)}let d=-1,p=r.flatMap((e,t)=>e.option.disabled?[]:[t]),c=e=>{if(!(e>=0))return;r[d]?.node.removeAttribute("data-active"),d=e;let o=r[e].node;o.toggleAttribute("data-active",!0),t.setAttribute("aria-activedescendant",o.id);let n=o.offsetTop,a=n+o.offsetHeight;n<i.scrollTop?i.scrollTop=n-4:a>i.scrollTop+i.clientHeight&&(i.scrollTop=a-i.clientHeight+4)},f=e=>{let t=p.indexOf(d);c(p[t<0?0:Math.max(0,Math.min(p.length-1,t+e))])},u=e=>{let o=r[e]?.option;h(),o&&!o.disabled&&!o.selected&&(o.selected=!0,t.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),t.dispatchEvent(new Event("change",{bubbles:!0})))},m=new AbortController,{signal:g}=m;function h(){e?.select===t&&(e=void 0,m.abort(),i.remove(),t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),t.removeAttribute("aria-controls"))}e={select:t,close:h};let b="",x=0;addEventListener("keydown",e=>{if(!t.isConnected||e.composedPath()[0]!==t)return h();let o=e.key;if(!(e.ctrlKey||e.metaKey||e.altKey&&!o.startsWith("Arrow"))){if("Tab"===o)return h();if("ArrowDown"===o||"ArrowUp"===o)f("ArrowDown"===o?1:-1);else if("Home"===o||"PageUp"===o)c(p[0]);else if("End"===o||"PageDown"===o)c(p[p.length-1]);else if("Escape"===o)h();else if("Enter"===o||" "===o&&!b)u(d);else{if(1!==o.length)return;{b=e.timeStamp-x<1e3?b+o.toLowerCase():o.toLowerCase(),x=e.timeStamp;let t=Math.max(0,p.indexOf(d)+(b[1]?0:1)),n=[...p.slice(t),...p.slice(0,t)].find(e=>r[e].option.label.toLowerCase().startsWith(b));void 0!==n&&c(n)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:g}),addEventListener("pointerdown",e=>{let o=e.composedPath();!o.includes(i)&&!o.includes(t)&&h()},{capture:!0,signal:g});let v=e=>{e.target!==i&&h()};addEventListener("scroll",v,{capture:!0,signal:g}),t.getRootNode().addEventListener("scroll",v,{capture:!0,signal:g}),addEventListener("resize",h,{signal:g}),t.addEventListener("blur",h,{signal:g}),i.addEventListener("mousedown",e=>e.preventDefault(),{signal:g}),i.addEventListener("pointermove",e=>{let t=e.target.closest?.("[role=option]"),o=r.findIndex(e=>e.node===t);p.includes(o)&&o!==d&&c(o)},{signal:g}),i.addEventListener("click",e=>{if(e.preventDefault(),l(e))return;let t=e.target.closest?.("[role=option]"),o=r.findIndex(e=>e.node===t);p.includes(o)&&u(o)},{signal:g});let w=t.closest(".design-field")??t.parentElement;w.append(i),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-expanded","true"),t.setAttribute("aria-controls",o);let E=(t.offsetWidth<60?w:t).getBoundingClientRect(),k=function(e){let t={top:0,left:0,bottom:innerHeight,right:innerWidth};for(let o=e.parentElement;o;o=o.parentElement)if(/auto|scroll|hidden/.test(getComputedStyle(o).overflowY)){let e=o.getBoundingClientRect();return{top:Math.max(e.top,0),left:Math.max(e.left,0),bottom:Math.min(e.bottom,t.bottom),right:Math.min(e.right,t.right)}}return t}(w),A=(i.offsetParent??w).getBoundingClientRect(),y=Math.min(Math.max(E.width,i.offsetWidth+2,120),k.right-k.left-8),L=k.bottom-E.bottom-8,M=E.top-k.top-8,C=i.scrollHeight,D=C>L&&M>L,H=Math.max(D?M:L,60),S=Math.min(C,240,H);i.style.width=`${y}px`,i.style.maxHeight=`${Math.min(240,H)}px`,i.style.left=Math.max(k.left+4,Math.min(E.left,k.right-y-4))-A.left+"px",i.style.top=(D?E.top-S-4:E.bottom+4)-A.top+"px",i.toggleAttribute("data-up",D),c(r.findIndex(e=>e.option.selected&&!e.option.disabled)),d<0&&f(0)}export{i as attach};

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-RCC6R6PS.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-ANKCS6NI.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-65SLG7FY.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-ANKCS6NI.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};

package/dist/tag-editor-ES4VZCEQ.js

@@ -0,0 +1 @@
+var t=12,e=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u;function n(t){let n=t.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return e.test(n)?n:null}function a(t,e){let a=[...e.tags],o=!1,r=!1,i=(...e)=>{r=!0,t.replaceChildren(...e),r=!1},l=`komo-tags-${Math.random().toString(36).slice(2)}`,d=null,s=0,p=()=>{cancelAnimationFrame(s),d?.remove(),d=null};function c(g=!1){if(p(),t.hidden=!!e.trigger&&!a.length&&!o,e.trigger){let t=a.length?"Manage tags":"Add tag";e.trigger.title=t,e.trigger.setAttribute("aria-label",t),e.trigger.setAttribute("aria-expanded",String(o))}let u=document.createElement("style");u.textContent='\n.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; min-height: 24px; font-size: 12px; }\n.tag-row .tag-chip {\n  display: inline-flex; align-items: center; gap: 2px; max-width: 160px; height: 22px; padding: 0 2px 0 7px;\n  border-radius: 6px; font-weight: 500; line-height: 1; color: var(--accent, #bda6ef);\n  background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent);\n}\n.tag-row .tag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tag-row .tag-chip button, .tag-row .tag-add {\n  display: inline-flex; align-items: center; border: 0; padding: 0; color: inherit; background: none; cursor: pointer; font-family: inherit;\n}\n.tag-row .tag-chip button { justify-content: center; width: 18px; height: 18px; border-radius: 4px; opacity: .6; }\n.tag-row .tag-chip button:hover, .tag-row .tag-chip button:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }\n.tag-row .tag-add {\n  gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: #858585;\n  transition: color var(--duration-quick, 150ms), background var(--duration-quick, 150ms);\n}\n.tag-row .tag-add:hover, .tag-row .tag-add:focus-visible { color: #eee; background: #ffffff0d; }\n.tag-row .tag-input {\n  width: 96px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; outline: none;\n  font-family: inherit; font-size: 12px; color: #eee; background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff05;\n}\n.tag-row .tag-input::placeholder { color: #858585; }\n.tag-row .tag-input:focus { box-shadow: inset 0 0 0 1px #ffffff20; }\n.tag-row .tag-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #f28b8299; }\n.tag-options {\n  position: fixed; z-index: 40; pointer-events: auto; display: grid; gap: 1px; width: 220px; max-height: 220px; overflow: auto;\n  padding: 4px; border-radius: 10px; background: #2a2a2a; box-shadow: 0 0 0 1px #ffffff14, 0 12px 32px #0007;\n  font-size: 12px;\n}\n.tag-options:empty { display: none; }\n.tag-option {\n  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 6px;\n  color: #ddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.tag-option[aria-selected="true"] { background: #ffffff14; color: #fff; }\n.tag-option-hint, .tag-option-empty { color: #858585; }\n.tag-option-empty { padding: 6px 8px; }\n.new-comment-composer .draft-body:has(.tag-slot) { grid-template-rows: minmax(28px, auto) minmax(28px, auto); }\n.new-comment-composer .draft-body .tag-slot { grid-row: 2; grid-column: 2; align-self: start; min-width: 0; padding-top: 2px; }\n.new-comment-composer .draft-body:has(.tag-slot) .send { align-self: start; }\n.new-comment-composer .draft-body:not(:has(.avatar)) .tag-slot { grid-column: 1; }\n';let f=document.createElement("div");f.className="tag-row",f.setAttribute("role","group"),f.setAttribute("aria-label","Tags");for(let n of a){let r=document.createElement("span");r.className="tag-chip";let i=document.createElement("span");i.textContent=`#${n}`;let l=document.createElement("button");l.type="button",l.textContent="×",l.setAttribute("aria-label",`Remove tag ${n}`),l.addEventListener("pointerdown",t=>t.preventDefault()),l.addEventListener("click",()=>{let r=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement===l:document.activeElement===l,i=a.indexOf(n);a=a.filter(t=>t!==n),e.onRemove(n),c(o),r&&!o&&(t.querySelectorAll(".tag-chip button")[Math.min(i,a.length-1)]??e.trigger??t.querySelector(".tag-add"))?.focus()}),r.append(i,l),f.append(r)}if(o){let m=document.createElement("input");m.className="tag-input",m.placeholder="Add tag…",m.maxLength=33,m.autocomplete="off",m.setAttribute("role","combobox"),m.setAttribute("aria-label","Add tag"),m.setAttribute("aria-autocomplete","list"),m.setAttribute("aria-controls",l);let h=document.createElement("div");h.className="tag-options",h.id=l,h.setAttribute("role","listbox"),h.setAttribute("aria-label","Tags");let x=[],b=-1,v=t=>{!a.includes(t)&&a.length<12&&(a=[...a,t].sort(),e.onAdd(t)),o=a.length<12,c(o),o||e.trigger?.focus({preventScroll:!0})},w=t=>{b=t,h.querySelectorAll("[role=option]").forEach((e,n)=>{e.setAttribute("aria-selected",String(n===t)),n===t&&e.scrollIntoView?.({block:"nearest"})}),t>=0?m.setAttribute("aria-activedescendant",`${l}-${t}`):m.removeAttribute("aria-activedescendant")},y=()=>{let t=m.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),o=n(m.value),r=e.suggestions.filter(t=>!a.includes(t));x=(t?[...r.filter(e=>e.startsWith(t)),...r.filter(e=>!e.startsWith(t)&&e.includes(t))]:r).map(t=>({tag:t,create:!1})),o&&!a.includes(o)&&!r.includes(o)&&x.push({tag:o,create:!0}),h.replaceChildren(...x.map(({tag:t,create:e},n)=>{let a=document.createElement("div");return a.id=`${l}-${n}`,a.className="tag-option",a.setAttribute("role","option"),e&&a.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),a.append(Object.assign(document.createElement("span"),{textContent:`#${t}`})),a.addEventListener("click",()=>v(t)),a.addEventListener("pointermove",()=>w(n)),a})),x.length||h.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:t?a.includes(o??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),m.setAttribute("aria-expanded",String(x.length>0)),w(t&&x.length?0:-1)};m.addEventListener("input",y),m.addEventListener("keydown",t=>{if(t.stopPropagation(),!t.isComposing)if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),!x.length)return;let e=x.length-1;w("ArrowDown"===t.key?b>=e?0:b+1:b<=0?e:b-1)}else if("Enter"===t.key||","===t.key)if(t.preventDefault(),b>=0&&x[b])v(x[b].tag);else if(m.value.trim()){let t=n(m.value);t?v(t):m.setAttribute("aria-invalid","true")}else o=!1,c(),e.trigger?.focus({preventScroll:!0});else if("Escape"===t.key)t.preventDefault(),o=!1,c(),e.trigger?.focus({preventScroll:!0});else if("Backspace"===t.key&&!m.value&&a.length){let t=a.at(-1);a=a.slice(0,-1),e.onRemove(t),c(!0)}}),m.addEventListener("input",()=>m.removeAttribute("aria-invalid"));let A=!1;h.addEventListener("pointerdown",t=>{t.preventDefault(),A=!0}),m.addEventListener("blur",()=>{if(A)return A=!1,void requestAnimationFrame(()=>m.isConnected&&m.focus({preventScroll:!0}));r||!m.isConnected||!o||(o=!1,c())}),f.append(m),i(u,f);let E=t.getRootNode();(E instanceof ShadowRoot?E:document.body).append(h),d=h;let k=()=>{if(!m.isConnected)return p();let t=m.getBoundingClientRect(),e=h.offsetHeight,n=window.innerHeight-t.bottom-8,a=e+4<=n||t.top-8<n?t.bottom+4:t.top-4-e;h.style.top=`${Math.max(8,a)}px`,h.style.left=`${Math.max(8,Math.min(t.left,window.innerWidth-h.offsetWidth-8))}px`,s=requestAnimationFrame(k)};return y(),k(),void((g||o)&&m.focus({preventScroll:!0}))}if(!e.trigger&&a.length<12){let t=document.createElement("button");t.type="button",t.className="tag-add",t.textContent=a.length?"+":"+ Add tag",t.setAttribute("aria-label","Add tag"),t.addEventListener("click",()=>{o=!0,c(!0)}),f.append(t)}i(u,f)}e.trigger&&(e.trigger.onclick=()=>{o=a.length<12,c(o),o||t.querySelector(".tag-chip button")?.focus()}),c()}export{t as MAX_TAGS,n as normalizeTag,a as tagEditor};

package/dist/tag-editor.d.ts

@@ -5,6 +5,8 @@ export interface TagEditorOptions {
     suggestions: readonly string[];
     onAdd(tag: string): void;
     onRemove(tag: string): void;
+    /** An existing header action can replace the inline add button. */
+    trigger?: HTMLButtonElement;
 }
 /** Lowercase and validate a typed tag; returns null when it isn't a valid tag. */
 export declare function normalizeTag(value: string): string | null;

package/dist/token-picker-XXX4L3Y7.js

@@ -0,0 +1 @@
+var e,t=new WeakSet,o=0;function n(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function r(e){let t=/^(-?[\d.]+)(px|r?em)?$/.exec(e.trim());return t?parseFloat(t[1])*(t[2]?"px"===t[2]?1:16:1):void 0}var i=(e,t,o)=>Math.min(o,Math.max(t,e));function a(e,t,o,a){let l=document.createElement("div");l.id=t,l.setAttribute("role","option"),l.setAttribute("aria-selected",String(o));let s=document.createElement("span");s.className="komo-tokens__name";let p=document.createElement("span");p.textContent=n(e),s.append(p);for(let t of e.states??[]){let e=document.createElement("i");e.textContent=t,s.append(e)}let d=document.createElement("span");d.className="komo-tokens__meta";let f="typography"===e.type?function(e){let t=e.trim().split(/\s+/);return[t.find(e=>/^(\d{3}|bold|bolder|lighter)$/.test(e)),t.find(e=>/^[\d.]+(px|r?em|pt|%)(\/\S+)?$/.test(e))].filter(Boolean).join(" · ")||e}(e.value??""):e.value??"";for(let t of[e.ref,f]){if(!t)continue;let e=document.createElement("span");e.textContent=t,d.append(e)}if(l.append(function(e,t){let o=document.createElement("span");o.className="komo-tokens__pv",o.setAttribute("aria-hidden","true");let n=e=>{let t=document.createElement("span");return t.className=`komo-tokens__${e}`,o.append(t),t},a=e.value??"",{type:l}=e;if("color"===l){let o=n("sw"),r=t.map(t=>t.values.get(e.path)).filter(e=>!!e);for(let e of new Set(r).size>1?r:[a]){let t=document.createElement("span");t.style.background=e,o.append(t)}}else if("dimension"===l||"letterSpacing"===l){let t=r(a);if(void 0===t)return o;let l=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),s=n(l?"corner":"dim");l?s.style.borderTopLeftRadius=`${i(t,0,12)}px`:s.style.width=`${i(t/2,2,24)}px`}else if("shadow"===l)n("shadow").style.boxShadow=a;else if("typography"===l||"fontWeight"===l||"fontFamily"===l){let e=n("ag");if(e.textContent="Ag","typography"===l){e.style.font=a;let t=r(a.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${i(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===l?e.style.fontWeight=a:e.style.fontFamily=a}return o}(e,a),s,d),e.description){let t=document.createElement("span");t.className="komo-tokens__desc",t.textContent=e.description,l.append(t)}let c=a.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return l.title=[e.path,e.ref,c.length>1?c.join(", "):e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · "),l}function l(t){return e?.trigger===t}function s(t){l(t.trigger)?e.close(!0):p(t)}function p(r){e?.close();let{trigger:l,tokens:s,property:p}=r,d=l.getRootNode();if((d instanceof ShadowRoot||d===document)&&!t.has(d)){t.add(d);let e=document.createElement("style");e.textContent=".komo-tokens{position:absolute;z-index:20;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-tokens-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-tokens-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-tokens{animation:none}}.komo-tokens__bar{display:flex;gap:4px;padding:6px 6px 2px}.komo-tokens__bar input{flex:1;min-width:0;height:28px;box-sizing:border-box;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:#ffffff0a;color:#f1efeb;font:inherit}.komo-tokens__bar input::placeholder{color:#77736f}.komo-tokens__bar input:focus{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-tokens__bar button{flex:none;height:28px;padding:0 8px;border:0;border-radius:6px;background:none;color:#898680;font:inherit;white-space:nowrap;cursor:pointer}.komo-tokens__bar button:hover{background:#ffffff0f;color:#f1efeb}.komo-tokens__bar button[aria-pressed=true]{background:#bda6ef24;color:#e6dcfb}.komo-tokens__bar button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.komo-tokens [role=listbox]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px}.komo-tokens small{position:sticky;top:0;z-index:1;display:block;padding:8px 8px 4px;background:#232323;color:#77736f;font-size:10px;font-weight:500}.komo-tokens [role=option]{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:1px 8px;box-sizing:border-box;min-height:28px;padding:4px 8px;border-radius:6px;cursor:pointer}.komo-tokens [data-active]{background:#ffffff14;color:#f1efeb}.komo-tokens__name{display:flex;align-items:center;gap:4px;min-width:0}.komo-tokens__name>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__name>span{flex:none;max-width:100%}.komo-tokens__name>i{min-width:0;padding:1px 4px;border-radius:4px;background:#ffffff0d;color:#898680;font-size:9px;font-style:normal}.komo-tokens__desc{grid-column:2/-1;overflow:hidden;color:#77736f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__meta{display:flex;align-items:center;gap:6px;max-width:160px;min-width:0;color:#77736f;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}.komo-tokens__meta span{overflow:hidden;text-overflow:ellipsis}.komo-tokens__meta span+span{flex:none;max-width:90px;color:#898680}.komo-tokens [aria-selected=true] .komo-tokens__meta::after{content:'';flex:none;width:7px;height:3.5px;margin:-3px 1px 0 0;border:solid #bda6ef;border-width:0 0 1.5px 1.5px;rotate:-45deg}.komo-tokens__pv{display:flex;align-items:center;height:16px;overflow:hidden}.komo-tokens__sw{display:flex;width:16px;height:16px;border-radius:4px;overflow:hidden;background:repeating-conic-gradient(#ffffff40 0 25%,#ffffff0d 0 50%) 0 0/8px 8px;outline:1px solid #ffffff1f;outline-offset:-1px}.komo-tokens__sw>span{flex:1}.komo-tokens__dim{height:4px;min-width:2px;border-radius:2px;background:#bda6ef}.komo-tokens__corner{width:12px;height:12px;box-sizing:border-box;border:solid #bda6ef;border-width:1.5px 0 0 1.5px}.komo-tokens__shadow{width:16px;height:12px;margin-left:2px;border-radius:3px;background:#f1efeb}.komo-tokens__ag{color:#f1efeb;font-size:13px;line-height:1;white-space:nowrap}.komo-tokens__empty{padding:12px 8px;color:#77736f}@media (pointer:coarse){.komo-tokens{font-size:13px}.komo-tokens [role=option]{min-height:40px}.komo-tokens__bar input,.komo-tokens__bar button{height:36px}}",(d instanceof ShadowRoot?d:document.head).append(e)}let f="komo-tokens-"+ ++o,c=document.createElement("div");c.className="komo-tokens";let m=document.createElement("div");m.className="komo-tokens__bar";let u=document.createElement("input");u.type="text",u.placeholder="Search tokens",u.autocomplete="off",u.spellcheck=!1,u.setAttribute("role","combobox"),u.setAttribute("aria-expanded","true"),u.setAttribute("aria-controls",f),u.setAttribute("aria-autocomplete","list"),u.setAttribute("aria-label",`Search tokens for ${p}`);let g=document.createElement("div");g.id=f,g.setAttribute("role","listbox"),g.setAttribute("aria-label",`Tokens for ${p}`);let h=s.filter(e=>e.properties?.includes(p)),x=!h.length,k=document.createElement("button");k.type="button",k.textContent="Show all",k.title=`Show all ${s.length} tokens, not only ${p} tokens`,m.append(u),h.length&&h.length<s.length&&m.append(k),c.append(m,g);let b,w=new Map(s.map(e=>[e,`${n(e)} ${e.label??""} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),v=[],_=[],y=0,E=-1,$=g,A=e=>{for(;y<Math.min(e,_.length);y++){let{token:e,group:t}=_[y];if(t!==b&&(b=t,$=g,t)){$=document.createElement("div"),$.setAttribute("role","group");let e=document.createElement("small");e.id=`${f}-g${y}`,e.textContent=t,$.setAttribute("aria-labelledby",e.id),$.append(e),g.append($)}$.append(a(e,`${f}-${y}`,e.path===r.current,v))}},C=e=>g.querySelector(`#${f}-${e}`),S=(e,t=!0)=>{if(e<0||e>=_.length)return;A(e+60),C(E)?.removeAttribute("data-active"),E=e;let o=C(e);if(o.toggleAttribute("data-active",!0),u.setAttribute("aria-activedescendant",o.id),!t)return;let n=o.offsetTop-(o.parentElement===g?0:o.parentElement.firstElementChild.offsetHeight),r=o.offsetTop+o.offsetHeight;n<g.scrollTop?g.scrollTop=n-4:r>g.scrollTop+g.clientHeight&&(g.scrollTop=r-g.clientHeight+4)},z=()=>{let e=u.value.toLowerCase().split(/\s+/).filter(Boolean),t=x?s:h,o=e.length?t.filter(t=>e.every(e=>w.get(t).includes(e))):t,n=!e.length&&r.current?o.find(e=>e.path===r.current):void 0,i=new Map([["",[]]]);for(let e of o){if(e===n)continue;let t=e.group??"";i.set(t,[...i.get(t)??[],e])}if(_=[...n?[{token:n,group:"Current"}]:[],...[...i].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],g.replaceChildren(),g.scrollTop=0,y=0,E=-1,b=void 0,u.removeAttribute("aria-activedescendant"),k.setAttribute("aria-pressed",String(x)),!_.length){let t=document.createElement("div");return t.className="komo-tokens__empty",t.textContent=e.length?"No matching tokens":"No tokens",void g.append(t)}A(60),S(0,!1)},T=new AbortController,{signal:L}=T,M=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function N(t=!1){e?.trigger===l&&(e=void 0,T.abort(),c.remove(),l.setAttribute("aria-expanded","false"),l.removeAttribute("aria-controls"),t&&l.isConnected&&l.focus({preventScroll:!0}))}e={trigger:l,close:N};let P=e=>{let t=_[e]?.token;t&&(N(!0),r.onSelect(t))};u.addEventListener("input",z,{signal:L}),k.addEventListener("click",()=>{x=!x,z(),M||u.focus({preventScroll:!0})},{signal:L}),addEventListener("keydown",e=>{if(!l.isConnected)return N();let t=e.composedPath();if(!t.includes(c)&&!t.includes(l))return;let{key:o}=e;if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)N(!0);else{if("Tab"===o)return N();if(t[0]!==u)return;if("ArrowDown"===o||"ArrowUp"===o)S(i(E+("ArrowDown"===o?1:-1),0,_.length-1));else if("PageDown"===o||"PageUp"===o)S(i(E+("PageDown"===o?8:-8),0,_.length-1));else{if("Enter"!==o)return;P(E)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:L}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(c)&&!t.includes(l)&&N()},{capture:!0,signal:L});let H=e=>{e.target===g?g.scrollTop+g.clientHeight>g.scrollHeight-200&&A(y+60):e.target instanceof Node&&c.contains(e.target)||N()};addEventListener("scroll",H,{capture:!0,signal:L}),d.addEventListener("scroll",H,{capture:!0,signal:L}),addEventListener("resize",()=>N(),{signal:L}),g.addEventListener("mousedown",e=>e.preventDefault(),{signal:L});let D=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(f.length+1)):-1};g.addEventListener("pointermove",e=>{let t=D(e);t>=0&&t!==E&&S(t,!1)},{signal:L}),c.addEventListener("click",e=>{e.target!==u&&e.preventDefault();let t=D(e);t>=0&&P(t)},{signal:L}),z();let R=l.closest(".design-field")??l.parentElement;R.append(c),l.setAttribute("aria-expanded","true"),l.setAttribute("aria-controls",f);let B=R.getBoundingClientRect(),j=function(e){let t={top:0,left:0,bottom:innerHeight,right:innerWidth};for(let o=e.parentElement;o;o=o.parentElement)if(/auto|scroll|hidden/.test(getComputedStyle(o).overflowY)){let e=o.getBoundingClientRect();return{top:Math.max(e.top,0),left:Math.max(e.left,0),bottom:Math.min(e.bottom,t.bottom),right:Math.min(e.right,t.right)}}return t}(R),W=(c.offsetParent??R).getBoundingClientRect(),F=i(j.right-j.left-8,120,340),I=j.bottom-B.bottom-8,K=B.top-j.top-8,O=I<240&&K>I,U=Math.min(320,Math.max(O?K:I,120));if(c.style.width=`${F}px`,c.style.maxHeight=`${U}px`,c.style.left=i(B.left,j.left+4,j.right-F-4)-W.left+"px",c.style.top=O?"":B.bottom+4-W.top+"px",c.style.bottom=O?W.bottom-B.top+4+"px":"",c.toggleAttribute("data-up",O),r.current){let e=_.findIndex(e=>e.token.path===r.current);e>=0&&S(e)}return M||u.focus({preventScroll:!0}),Promise.resolve(r.themes?.()).then(t=>{if(!t||t.length<2||e?.trigger!==l)return;v=t;let o=E,n=g.scrollTop,r=y;g.replaceChildren(),y=0,b=void 0,A(r),g.scrollTop=n,S(o,!1)},()=>{}),()=>N()}export{l as isTokenPickerOpen,p as openTokenPicker,s as toggleTokenPicker,n as tokenLabel};

package/dist/toolbar-runtime-AQBTB2UG.js

@@ -0,0 +1 @@
+import{a as e,b as t,c as r,j as n,k as i,l as o,m as a}from"./chunk-WGISPOJV.js";import{c as l,h as c,l as u,o as d}from"./chunk-ANKCS6NI.js";import{createRoot as s}from"react-dom/client";import{flushSync as m}from"react-dom";import{createElement as p}from"react";import*as h from"react";var f=({size:e=24,color:t="currentColor",...r})=>h.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},h.createElement("path",{d:"m7 15 5 5 5-5M7 9l5-5 5 5"}));f.displayName="ChevronSelectorVertical";import*as g from"react";var b=({size:e=24,color:t="currentColor",...r})=>g.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},g.createElement("path",{d:"M18 6 6 18M6 6l12 12"}));b.displayName="XClose";import*as y from"react";var v=({size:e=24,color:t="currentColor",...r})=>y.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},y.createElement("path",{d:"M19 12H5m0 0 7 7m-7-7 7-7"}));v.displayName="ArrowLeft";import*as k from"react";var x=({size:e=24,color:t="currentColor",...r})=>k.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},k.createElement("path",{d:"m9 18 6-6-6-6"}));x.displayName="ChevronRight";import{useEffect as w,useId as _,useLayoutEffect as N,useRef as T,useState as E}from"react";import{useState as C}from"react";import{Fragment as M,jsx as L,jsxs as S}from"react/jsx-runtime";function A({items:l,defaultActiveId:u,activeId:d,edge:s="bottom",alignEnd:m=!1,onActiveChange:p,label:h="App navigation",moreLabel:g="More",backLabel:y="Back",className:k="",style:x}){let A=_(),[I,P]=E({kind:"collapsed"}),[$,W]=E(u??l[0]?.id),[O,R]=E(null),z=T(null),H=T(null),Y=T(s),q="left"===s||"right"===s;N(()=>{let e=H.current;if(!e||!O)return;let t=0,r=0,n=document.documentElement.clientWidth,i=window.innerHeight;for(let o=e.parentNode;o instanceof Element&&o!==document.body;o=o.parentNode instanceof ShadowRoot?o.parentNode.host:o.parentNode){let e=getComputedStyle(o),a=o.getBoundingClientRect();"visible"!==e.overflowX&&(t=Math.max(t,a.left),n=Math.min(n,a.right)),"visible"!==e.overflowY&&(r=Math.max(r,a.top),i=Math.min(i,a.bottom))}e.style.maxWidth=`${Math.max(0,n-t-16)}px`,e.style.left=`${O.x}px`,e.style.top=`${O.y}px`;let o=e.getBoundingClientRect(),a=Math.max(t+8-o.left,Math.min(0,n-8-o.right)),l=Math.max(r+8-o.top,Math.min(0,i-8-o.bottom));e.style.left=`${O.x+a}px`,e.style.top=`${O.y+l}px`},[O]);let D=T(null),F=T(null),X=T(I),K=T("more"),V=T(!1),G=T(!1),J=T(!1),Q=T(null),U=T(void 0),Z=T(void 0),ee=T(!1),te=T(!1),re=function(){!i.current&&o();let[e]=C(n.current);return e}(),ne=d??$,ie="collapsed"!==I.kind,oe=l.filter(e=>!1!==e.showInBar),ae=oe.find(e=>"dismiss"===e.id),le=oe.filter(e=>"dismiss"!==e.id),ce=l.filter(e=>e.children?.length),ue=T(new Map),de=T(new Map),se=oe.map(e=>e.id).join("|");function me(){clearTimeout(U.current),R(null)}function pe(){me(),clearTimeout(Z.current),ee.current=!1}function he(e,t,r=!1){clearTimeout(U.current);let n=z.current,i=F.current;if(!n||!i||ie||G.current||J.current&&!r)return;let o=n.getBoundingClientRect(),a=e.getBoundingClientRect(),l={label:t,x:"left"===s?o.width+8:"right"===s?-8:a.left-o.left+a.width/2,y:"top"===s?o.height+8:"bottom"===s?-8:a.top-o.top+a.height/2};clearTimeout(Z.current);let c=()=>{ee.current=!0,R(l)};r||ee.current?c():U.current=setTimeout(c,400)}function fe(e,t,r){pe(),ie||(K.current=t,V.current=r),Q.current="first",P(e)}function ge(e=!0,t=K.current){pe(),J.current=!0,Q.current=e&&V.current?t:null,P({kind:"collapsed"})}function be(){"group"===I.kind&&(Q.current=I.id,P({kind:"main"}))}function ye(e,t){let r=!!e.children?.length,n=ne===e.id||!!e.children?.some(e=>e.id===ne),i=!t&&e.keepOpenOnSelect,o=(t,r=!1)=>L(j,{label:e.label,icon:r,reduced:!!re,children:t}),a=n&&e.activeIcon?e.activeIcon:e.icon,l=S(M,{children:[L("span",{className:"morphing-menu__icon","aria-hidden":"true",style:i?{display:"grid"}:void 0,children:i?o(a,!0):a}),!t&&L("span",{className:"morphing-menu__label",style:i?{display:"grid"}:void 0,children:i?o(e.label):e.label}),!t&&r&&L(B,{})]}),c={className:t?"morphing-menu__shortcut":"morphing-menu__row","data-menu-item":e.id,"aria-label":e.label,"aria-current":n?r?"true":"page":void 0,"aria-expanded":r?"group"===I.kind&&I.id===e.id:void 0,"aria-controls":r?`${A}-group-${e.id}`:void 0,onClick:t=>r?fe({kind:"group",id:e.id},e.id,0===t.detail):function(e){W(e.id),p?.(e.id),ie&&!e.keepOpenOnSelect?ge(!0,"group"===I.kind?I.id:e.id):pe(),e.onSelect?.()}(e),onPointerEnter:r=>{t&&"mouse"===r.pointerType&&he(r.currentTarget,e.label)},onPointerLeave:me,onPointerDown:pe,onFocus:r=>{t&&r.currentTarget.matches(":focus-visible")&&he(r.currentTarget,e.label,!0)},onBlur:me};return e.href&&!r?L("a",{href:e.href,...c,children:l},e.id):L("button",{type:"button",...c,children:l},e.id)}N(()=>{let t=new Map,r=[...F.current?.querySelectorAll("[data-menu-item]")??[]].map(e=>{let r=e.dataset.menuItem,n=[e.offsetLeft,e.offsetTop];return t.set(r,n),{node:e,id:r,position:n,before:ue.current.get(r)}});for(let{node:t,id:n,position:i,before:o}of r)re||V.current?(de.current.get(n)?.complete(),de.current.delete(n)):o&&(o[0]!==i[0]||o[1]!==i[1])&&(de.current.get(n)?.complete(),de.current.set(n,a(t,{x:[o[0]-i[0],0],y:[o[1]-i[1],0]},e)));for(let[e,r]of de.current)t.has(e)||(r.stop(),de.current.delete(e));ue.current=t},[se,s,I,re]),w(()=>()=>{for(let e of de.current.values())e.stop()},[]),N(()=>{let n=z.current,i=D.current,o=F.current;if(!n||!i||!o)return;let l=Y.current!==s;Y.current=s;let c=X.current;X.current=I;let u=[...n.querySelectorAll(".morphing-menu__panel")],d=u.find(e=>"false"===e.getAttribute("aria-hidden")),m=[],p=!1,h=e=>(m.push(e),e),f=()=>({width:d?.offsetWidth??o.offsetWidth,height:d?.offsetHeight??o.offsetHeight}),g=l||c.kind!==I.kind||"group"===c.kind&&"group"===I.kind&&c.id!==I.id,b="collapsed"===c.kind!=("collapsed"===I.kind),y=re||!g;if(y)(()=>{let e=f();i.style.width=`${e.width}px`,i.style.height=`${e.height}px`})();else if(b&&!ie)h(a(i,f(),r));else if(b){let r=Math.min(o.offsetWidth,o.offsetWidth>250?280:200);h(a(i,{width:r,height:o.offsetHeight>52?32:28},t)).finished.then(()=>{p||h(a(i,f(),{...e,bounce:ie?.24:.15}))}).catch(()=>{})}else h(a(i,f(),{...e,duration:.25,bounce:.1}));h(a(o,{opacity:ie?0:1,scale:ie&&!re?.8:1,filter:ie&&!re?"blur(8px)":"blur(0px)"},{duration:y?0:ie?.15:.22,delay:y||ie?0:.08,...ie?{}:{ease:"easeOut"}}));for(let t of u){let r=t===d;for(let[n,i]of[...t.querySelectorAll(".morphing-menu__row")].entries())r&&b&&!y&&Object.assign(i.style,{opacity:"0",transform:"translateY(48px)",filter:"blur(4px)"}),h(a(i,{opacity:r?1:0,y:r||re?0:16,filter:r||re?"blur(0px)":"blur(2px)"},{...e,duration:y?0:r?b?.4:.25:.12,bounce:b?.3:0,delay:!y&&r?(b?.2:0)+.02*n:0}))}let v=[...(ie?d:o)?.querySelectorAll("[data-menu-item]")??[]],k=Q.current;Q.current=null,k&&(G.current=!0,(("first"===k?v[0]:v.find(e=>e.dataset.menuItem===k))??(ie?void 0:v.find(e=>"more"===e.dataset.menuItem)))?.focus({preventScroll:!0}),G.current=!1);let x=()=>P(e=>({...e}));return window.addEventListener("resize",x),()=>{p=!0,m.forEach(e=>e.stop()),window.removeEventListener("resize",x)}},[I,re,s,l.length,oe.length]),w(()=>{if(!ie)return;let e=new AbortController;return c(z.current,"pointerdown",e=>{e.target instanceof Node&&!e.composedPath().includes(z.current)&&ge(!1)},{signal:e.signal}),()=>e.abort()},[ie]),w(()=>()=>{clearTimeout(U.current),clearTimeout(Z.current)},[]);let ve=S("button",{type:"button",className:"morphing-menu__row","data-menu-item":"close",onClick:()=>ge(!0,"more"),children:[L(b,{"aria-hidden":"true"}),L("span",{className:"morphing-menu__label",children:"Close drawer"})]});return S("nav",{ref:z,"aria-label":h,className:["morphing-menu",k].filter(Boolean).join(" "),"data-view":I.kind,"data-edge":s,"data-vertical":q,"data-align-end":m,style:{"--mm-count":oe.length+1,...x},onPointerMove:e=>{if(!J.current||"mouse"!==e.pointerType||!e.movementX&&!e.movementY)return;J.current=!1;let t=e.target instanceof Element?e.target.closest(".morphing-menu__shortcut"):null;t&&he(t,t.getAttribute("aria-label")??"")},onKeyDown:e=>{"Escape"===e.key&&(J.current=!0,pe(),ie&&(e.preventDefault(),e.stopPropagation(),"group"===I.kind?be():ge()))},onBlur:e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||(ie?e.relatedTarget instanceof Node&&ge(!1):te.current||pe())},children:[S("div",{ref:D,className:"morphing-menu__shell",children:[S("div",{ref:F,className:"morphing-menu__bar","aria-hidden":ie,inert:ie,onPointerEnter:e=>{"mouse"===e.pointerType&&(te.current=!0,clearTimeout(Z.current))},onPointerLeave:e=>{"mouse"===e.pointerType&&(te.current=!1,me(),clearTimeout(Z.current),Z.current=setTimeout(()=>{ee.current=!1},300))},children:[le.map(e=>ye(e,!0)),L("button",{type:"button",className:"morphing-menu__shortcut","data-menu-item":"more","aria-label":g,"aria-expanded":ie,"aria-controls":`${A}-main`,onClick:e=>fe({kind:"main"},"more",0===e.detail),onPointerEnter:e=>{"mouse"===e.pointerType&&he(e.currentTarget,g)},onPointerLeave:me,onPointerDown:pe,onBlur:me,onFocus:e=>{e.currentTarget.matches(":focus-visible")&&he(e.currentTarget,g,!0)},children:L(f,{"aria-hidden":"true"})}),ae&&ye(ae,!0)]}),S("div",{id:`${A}-main`,className:"morphing-menu__panel","aria-hidden":"main"!==I.kind,inert:"main"!==I.kind,children:[[...l].sort((e,t)=>(e.expandedOrder??0)-(t.expandedOrder??0)).map(e=>ye(e,!1)),ve]}),ce.map(e=>{let t="group"===I.kind&&I.id===e.id;return S("div",{id:`${A}-group-${e.id}`,className:"morphing-menu__panel","aria-label":e.label,"aria-hidden":!t,inert:!t,children:[S("button",{type:"button",className:"morphing-menu__row","data-menu-item":"back",onClick:be,children:[L(v,{"aria-hidden":"true"}),L("span",{children:y})]}),e.children.map(e=>ye(e,!1)),ve]},e.id)})]}),O&&!ie&&L("div",{ref:H,className:"morphing-menu__tooltip","aria-hidden":"true",style:{left:O.x,top:O.y},children:O.label})]})}function B(){return L(x,{className:"morphing-menu__chevron","aria-hidden":"true"})}function j({label:e,icon:t,reduced:r,children:n}){let i=T(null),o=T(null);return N(()=>{let n=i.current,a=o.current;if(o.current={label:e,node:n.cloneNode(!0)},!a||a.label===e||r)return;let l=a.node;l.setAttribute("aria-hidden","true"),n.parentElement.append(l);let c={duration:200,easing:"cubic-bezier(.22,1,.36,1)"},u=n.animate([{opacity:0,transform:t?"scale(.7)":"translateY(4px)",filter:"blur(2px)"},{opacity:1,transform:"none",filter:"blur(0px)"}],c),d=l.animate([{opacity:1,transform:"none",filter:"blur(0px)"},{opacity:0,transform:t?"scale(.7)":"translateY(-4px)",filter:"blur(2px)"}],c);return d.finished.then(()=>l.remove()).catch(()=>{}),()=>{u.cancel(),d.cancel(),l.remove()}},[e,t,r]),L("span",{ref:i,style:{gridArea:"1 / 1",display:"flex",alignItems:"center"},children:n})}function I(e){if("glyph"in e)return p("span",{style:{display:"contents"},dangerouslySetInnerHTML:{__html:l[e.glyph]}});let{user:t}=e,r=t&&d(t);return p("span",{className:"review-avatar"},t?u(t.name):I({glyph:"person"}),r&&p("img",{key:r,src:r,alt:"",referrerPolicy:"no-referrer",decoding:"async",onError:e=>{e.currentTarget.hidden=!0}}))}var P=e=>p(A,{...e,items:e.items.map(e=>({...e,icon:I(e.icon)}))});function $(e,t){e.replaceChildren();let r=s(e);return m(()=>r.render(P(t))),{render:e=>r.render(P(e)),unmount:()=>r.unmount()}}export{$ as mountToolbar};

package/dist/types.d.ts

@@ -132,6 +132,15 @@ export interface CommentsOptions {
      * picking to pageRoot. Called on every pick; keep it cheap.
      */
     pickRoots?: () => Element[];
+    /**
+     * Frame view scales body-level portals (dialogs, overlays, toasts) with the
+     * page. By default it frames each position: fixed child of body without an
+     * inline transform; script-positioned popovers already follow their framed
+     * anchors. `include` overrides that choice per body child.
+     */
+    frame?: {
+        include?(element: HTMLElement): boolean;
+    };
     /**
      * Stop komo's own pointer, focus, wheel and typing events at its host
      * element, so page shortcuts and open modals don't react to komo's UI.

package/package.json

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