@hazem3500/palette 0.9.108 → 0.9.110

package/dist/react-props-panel-4XO3NSX3.js

@@ -1 +0,0 @@
-import{c as e}from"./chunk-4XQD75A2.js";import"./chunk-3BVM3I52.js";import{b as t,c as n}from"./chunk-DLC3CRFV.js";import{a as i,b as o}from"./chunk-UEZCLURX.js";import{A as r,a,c as s,d,e as l,f as p,g as c,h as u,i as g,j as f,k as m,l as h,m as b,n as v,o as k,p as x,q as y,r as w,s as E,t as C,u as S,v as $,w as A,x as L,y as M,z as P}from"./chunk-AYGLN3MI.js";import{c as N}from"./chunk-4KEVPMJJ.js";import{A as T,B as q,a as j,b as D,c as z,f as R,g as O,i as V,j as U,k as B,l as H,m as I,n as F,o as _,p as K,q as W,r as J,s as X,t as Y,u as Q,v as G,w as Z,x as ee,y as te,z as ne}from"./chunk-DVYSFT6O.js";import{a as ie}from"./chunk-XP22SMEQ.js";import{h as oe}from"./chunk-4FX5IS2U.js";import{a as re}from"./chunk-XOMOONGK.js";import{E as ae,e as se,j as de}from"./chunk-IQOPM3JF.js";var le=new Map,pe=new Map,ce=new Map;function ue(e){let t=D(e);if(!re(t))return null;if(t!==e)for(let n of[le,pe,xe])n.has(e)&&(n.set(t,n.get(e)),n.delete(e));return t}function ge(e,t,n,i,o,r){if(de(e)&&(o?.element===e||o?.hasChanges(e)))return!1;let a=ue(e);if(!a||a===e||n.host.contains(a))return!1;let s=t.querySelector(".design-react-group:not(.design-react-discovered)")??void 0,d=n.root.activeElement;for(let t of i)!t.kind&&t.props&&t.element===e&&(t.element=a);return r(a,s),d instanceof HTMLElement&&s?.contains(d)&&d.focus({preventScroll:!0}),!0}function fe(e,t,n,i,o){let{root:r,design:a}=i,{retainedProps:s,syncStyles:d,updateActions:l}=o;if(!s&&t.querySelector(".design-react-group, .design-theme-group"))return;let p=(t,n=!1)=>{t&&o.history.push({element:n?ue(e)??e:e,props:n,undo:()=>{t(),d()}}),d(),l()};ft(t,a,()=>o.select(e),r,o.signal);let c=s??xt(e,e=>p(e,!0),r,o.select,a,o.refresh,i.sourceHref);c&&!s&&t.prepend(c),Je(e,n.fields,t,o.onStyleEdit,r,n.valueFor,n.toHex,a,p,o.isFieldDirty);let u=Qe(e,n,o.updateActions,r);u&&t.append(u)}var me=new WeakSet,he=new WeakMap,be=".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:clamp(56px,24%,80px) minmax(0,1fr);align-items:center;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-scrub{cursor:ew-resize;user-select:none;touch-action:none}.design-react-scrub:hover{color:#e9e6e1}.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.design-field>.design-react-switch{position:relative;justify-self:start;appearance:none;width:28px;min-width:0;height:16px;margin:0;padding:0;border-radius:8px;background:#ffffff29;cursor:pointer;transition:background-color .12s}.design-react-switch::before{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0006;transition:translate .12s var(--ease-smooth-out,ease)}.design-react-field.design-field>.design-react-switch:checked{background:#8b6ff0}.design-react-switch:checked::before{translate:12px}.design-react-field.design-field>.design-react-switch[data-unset]{border:1px dashed #ffffff4d;background:none}.design-react-switch[data-unset]::before{display:none}.design-react-switch[data-unset]::after{content:\"unset\";position:absolute;top:-1px;left:34px;color:#77736f;font-size:10px;line-height:16px;white-space:nowrap}.design-react-field.design-field>.design-react-switch:focus-visible{outline:2px solid #bda6ef;outline-offset:2px}@media (prefers-reduced-motion:reduce){.design-react-field.design-field>.design-react-switch,.design-react-switch::before{transition:none}}.design-react-field input:disabled{opacity:.55;cursor:not-allowed}.design-react-type{display:none}.design-react-field.design-field>.design-token-binding{display:grid}.design-react-field.design-field>.design-token-binding select{position:static;width:auto;height:24px;padding:0 18px 0 6px;box-shadow:none;opacity:1}.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 18px 0 6px;border-radius:4px;background:#bda6ef1f 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='%23c8b5f4' stroke-width='1.2'/%3E%3C/svg%3E\") right 6px center/8px no-repeat;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-react-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:4px}.design-react-row>.design-react-field{min-width:0;margin-top:4px}.design-react-row>.design-theme-reset{flex:none;width:28px;height:28px;margin-top:4px}.design-react-row>.design-theme-reset[hidden]{display:none}.design-react-group{position:relative}.design-react-group>summary{padding-right:32px}.design-react-group[data-empty]{padding-bottom:0}.design-react-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-react-status{flex:none;margin-left:4px;padding:1px 5px;border-radius:4px;background:#ffffff0f;color:#898680;font-size:10px;font-weight:500}.design-react-group>.komo-source{position:absolute;z-index:3;top:6px;right:8px}.design-react-advanced{margin-top:10px}.design-react-advanced>summary{color:#898680;font-size:11px;cursor:pointer}.design-react-field.design-field>input[readonly]{width:100%;min-width:0;padding:0;background:none;color:#c9c5bf;cursor:text}@media(max-width:520px){.design-react-row .design-react-field>:is(input,select){height:36px}.design-react-row>.design-theme-reset{width:32px;height:32px}.design-react-group>.komo-source{top:2px}}.design-theme-switch{position:relative;flex:none;padding:0}.design-theme-switch>summary{display:flex;align-items:center;gap:5px;max-width:90px;min-height:28px;padding:0 8px;border-radius:7px;background:#ffffff08;color:#b7b1c2;font-size:11px;list-style:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-theme-switch>summary::-webkit-details-marker{display:none}.design-theme-switch>summary::after{content:\"⌄\";color:#77736f}.design-theme-switch[open]>summary,.design-theme-switch>summary:hover{background:#ffffff14;color:#f1efeb}.design-theme-popup{position:absolute;z-index:12;top:calc(100% + 6px);right:0;box-sizing:border-box;width:min(280px,calc(100vw - 48px));max-height:50dvh;overflow:auto;padding:10px 12px;border:1px solid #ffffff1a;border-radius:10px;background:#191819;box-shadow:0 12px 40px #0008}.design-theme-popup .design-react-field{grid-template-columns:68px minmax(0,1fr)}.design-theme-popup .design-react-field+ .design-react-field{margin-top:8px}.design-theme-toggle{flex:none;display:flex;align-items:center;min-width:28px;height:28px;padding:0;border:0;border-radius:7px;background:none;color:#909090;font:inherit;font-size:11px}.design-theme-toggle:hover{background:#161616;color:#eee}.design-theme-toggle>svg{width:16px;height:16px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-theme-toggle:has(span){padding:2px;background:#ffffff0a}.design-theme-toggle span{max-width:72px;padding:0 6px;border-radius:5px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-theme-toggle[data-on=\"0\"] span:first-child,.design-theme-toggle[data-on=\"1\"] span:last-child{background:#ffffff1a;color:#f1efeb}",ve=".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}}";function ke(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var xe=new Map,ye=e=>e.definition.source?`${e.definition.source}${e.definition.line?`:${e.definition.line}`:""}`:"";function we(e){let n=t(se().root);try{if(e)for(let[e,t]of le){let n=R(e);n&&(xe.set(e,n.props),n.setProps({...n.props,...Object.fromEntries(t)}))}else for(let[e,t]of xe)R(e)?.setProps(t);e||xe.clear(),I(e),M(e)}finally{n()}}function Ee(e){return!!le.get(e)?.size}function Ce(e){let t=R(e),n=t?.definition.textProp,i=t?.definition.props.find(e=>e.name===n);if(!t||!n||"string"!==i?.kind)return null;let o=t.props[n];if("string"!=typeof o||o.length>500)return null;let r=le.get(e);return r||le.set(e,r=new Map),r.has(n)||r.set(n,o),{propName:n,before:o}}function Se(e,t,n){let i=R(e),o=i?.definition.props.find(e=>e.name===t);return!(!i||i.definition.textProp!==t||"string"!==o?.kind||n.length>500||!z(o,n))&&(i.setProps({...i.props,[t]:n}),!0)}function $e(e,t,n,i){if(n===i){let i=le.get(e);return void(i?.get(t)===n&&!(pe.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||le.delete(e)))}let o=pe.get(e);o||pe.set(e,o=[]),o.push({propName:t,before:n,after:i})}function Ae(e,t,n){Se(e,t,n);let i=le.get(e);i?.get(t)===n&&!(pe.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||le.delete(e))}function Le(e){return!!e&&!!pe.get(e)?.length}function Me(e){let t=le.get(e),n=R(e);if(!t?.size||!n)return;let i=V(e),o=[...t].map(([e,t])=>{let o=n.definition.props.find(t=>t.name===e)?.styleProperty,r=n.props[e],a=o&&"string"==typeof r?i?.tokens.find(e=>e.properties.includes(o)&&r===`var(${e.cssVariable})`):void 0;return`- ${e}: ${ke(t)} → ${ke(r)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,...ye(n)?[`Source: ${ye(n)}`]:[],...o,"Runtime preview only; inline feedback does not write source files."].join("\n")}function Pe(e,t){if(R(e))return null;let n;try{n=ie(e,t)?.identify(e)}catch{}let i=O(e);return n?.name&&(!i||i.root!==n.element&&i.root.contains(n.element))?n:null}var Ne=e=>String(e).replace(/\s+/g," ").trim();function Te(e,t){let n=Object.entries(c(t)).map(([e,t])=>`${Ne(e)}=${Ne(t)}`).join(", "),i=Pe(e,t),o=R(e),r=o?{root:e,component:o}:i?void 0:O(e);if(r){let{definition:e,props:t}=r.component;i={name:e.name,source:ye(r.component),props:{...t,...Object.fromEntries(le.get(r.root)??[])}}}let a=Object.entries(i?.props??{}).filter(([,e])=>null===e||["boolean","number"].includes(typeof e)||"string"==typeof e&&e.length<=80).slice(0,12).map(([e,t])=>`${Ne(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,i?.name&&`Component: ${Ne(i.name)}${i.source?` (${Ne(i.source)})`:""}`,a.length&&`Props: ${a.join(", ")}`].filter(e=>!!e)}function qe(e){return[Me(e),T(e),r(e)].filter(e=>!!e).join("\n\n")||void 0}function je(e,t,n){he.get(e)?.abort();let i=new AbortController;he.set(e,i),e.addEventListener("click",e=>{let i=t();if(!i)return;let o=T(i)||C(i);!R(i)&&!o||(e.stopImmediatePropagation(),n(i,qe(i)))},{capture:!0,signal:i.signal})}function De(e){return Z(e)}function ze(e){return G(e)||C(e)||S(e)}function Re(e){ee(e)}function Oe(e){te(e),$(e)}function Ve(e){if(!e||me.has(e))return;let t=document.createElement("style");t.textContent=be+ve+i,e.append(t),me.add(e)}function Ue(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false");let n,i,o=i=>import("./token-picker-WMWUKLKJ.js").then(o=>{n=o,e.isConnected&&!e.disabled&&(i||"true"!==e.getAttribute("aria-expanded"))&&o.openTokenPicker({trigger:e,...t()},i)},()=>{});e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),i="mouse"===t.pointerType?void 0:t,!i&&(e.focus(),o(!0)))}),e.addEventListener("pointerup",e=>{i&&Math.abs(e.clientY-i.clientY)<=10&&o(!0),i=void 0});for(let t of["mousedown","touchend"])e.addEventListener(t,e=>{e.cancelable&&e.preventDefault()});return e.addEventListener("keydown",e=>{e.ctrlKey||e.metaKey||!["Enter"," ","ArrowDown","ArrowUp"].includes(e.key)||(e.preventDefault(),o(!1))}),{prepare:()=>n?.refreshTokenPicker(e),refresh:()=>n?.refreshTokenPicker(e,{trigger:e,...t()})}}function Be(e,t,n,i,o){let r=e.getRootNode(),a=new AbortController,s=new MutationObserver(()=>{n.isConnected||a.abort()});s.observe(r instanceof ShadowRoot?r:document,{childList:!0,subtree:!0}),r.addEventListener("komo-theme-change",()=>{o?.(n)||function(e,t,n){if(n.aborted)return;let i=e.ownerDocument.defaultView;if(!i)return;t();let o=0,r=0,a=()=>{n.aborted||(t(),!(++r>120)&&(o=i.requestAnimationFrame(()=>{o=0;for(let t=e;t;t=t.parentElement)if(t.getAnimations?.().some(e=>"running"===e.playState))return void a()})))};a(),i.setTimeout(()=>{n.aborted||t()},320)}(t,i,a.signal)},{signal:a.signal}),a.signal.addEventListener("abort",()=>s.disconnect(),{once:!0})}function He(e,t){let n=document.createElement("div");n.className="design-token-match",n.hidden=!0;let i=document.createElement("span"),o=document.createElement("button");o.type="button",o.textContent="Use token",n.append(i,o);let r=()=>{};return o.addEventListener("click",e=>{e.preventDefault(),r()}),{show(a,s){n.isConnected||(e??t.parentElement)?.after(n),n.hidden=!a,r=s;let d=(e??t.parentElement)?.dataset.fieldLabel;i.textContent=a?`${d?`${d} · `:""}Same ${"color"===a.type?"color":"value"} as ${a.label||a.path}`:"",i.title=a?`${a.path}${a.ref?` · ${a.ref}`:""} · ${a.value}`:"",o.setAttribute("aria-label",a?`Use token ${a.label||a.path}`:"Use token")}}}function Ie(e,t){let n=e?.getAttribute("aria-describedby")?.split(" ")??[];e&&!n.includes(t)&&e.setAttribute("aria-describedby",[...n,t].join(" "))}function Fe(e,t){let n=document.createElement("small");return n.className="design-token-binding__state",n.id=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`,Ie(e,n.id),n}function _e(e,t){e.dispatchEvent(new CustomEvent("komo-announce",{detail:t,bubbles:!0,composed:!0}))}function Ke(t,i,o,r){let a=V(t);if(!a)return null;let s=Q(a,i);if(!s.length)return null;Ve(r);let d=document.createElement("span");d.className="design-token-binding",d.setAttribute("data-mode","custom");let l=document.createElement("span");l.className="design-token-icon",l.setAttribute("aria-hidden","true");let p=document.createElement("span");p.className="design-token-chip",p.setAttribute("aria-hidden","true");let c=document.createElement("button");c.type="button",c.className="design-token-detach",c.title="Detach token",c.setAttribute("aria-label",`Detach token from ${i}`),c.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let u=document.createElement("select");u.setAttribute("aria-label",`Style token for ${i}`);let g=Fe(u,i),f=document.createElement("option");f.value="custom",f.textContent="Custom value",u.append(f);for(let e of s){let t=document.createElement("option"),n=U(a,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,u.append(t)}let m=k(),b=e=>({path:e.path,type:e.type,value:U(a,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),v=He(null,d),y=e=>{u.value=e,u.dispatchEvent(new Event("change"))};Ue(u,()=>({tokens:s.map(b),property:i,current:u.value,custom:e(t,i,d.parentElement?.querySelector("[data-property]")),onPreview:e=>{let o=s.find(t=>t.path===e.path);return n(t,()=>oe(t,i,`var(${o.cssVariable})`))},onSelect:e=>y(e.path)}));let w=()=>{let e=J(a,t,i),n=e?null:X(a,t,i),o="token"===e?.mode?s.find(t=>t.path===e.tokenPath):void 0,r=o??n?.token;u.value=r?.path??"custom",p.textContent=r?`Uses ${r.path}`:"";let l=e?.declaredPath,c=o?"token":n?"connected":l?"override":"custom";d.dataset.mode=c,d.parentElement?.setAttribute("data-token-mode",c),g.textContent="token"===c?l&&l!==o?.path?`Rebound from ${l} · preview`:`Linked to ${o?.path} · preview`:"connected"===c?"Connected "+("inline"===n?.origin?"inline":"from stylesheet"):"override"===c?`Custom override · was ${l}`:"",u.title=g.textContent||"Choose a token",Ie(d.parentElement?.querySelector("[data-property]"),g.id),m.hidden="custom"!==c;let f="custom"===c?getComputedStyle(t).getPropertyValue(i).trim():"",k="custom"===c?h(s.map(b),f):void 0;"custom"===c&&x(m,f,k),v.show(k,()=>k&&y(k.path))},E=new MutationObserver(w);E.observe(t,{attributes:!0,attributeFilter:["style"]});let C=new MutationObserver(()=>{d.isConnected||(E.disconnect(),C.disconnect())});return C.observe(d.ownerDocument,{childList:!0,subtree:!0}),u.addEventListener("change",()=>{let e=t.style.getPropertyValue(i),n=s.find(e=>e.path===u.value),r=J(a,t,i);if(n&&r&&n.path===r.declaredPath)Y(a,t,i),o(e,t.style.getPropertyValue(i),n.path);else if(n)(n.path!==X(a,t,i)?.token.path||r)&&_(a,t,n,i,{recordHistory:!1})&&o(e,t.style.getPropertyValue(i),n.path),_e(d,`${i} uses ${n.path}`);else{let n=d.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(t).getPropertyValue(i).trim(),r=/^-?[\d.]+$/.test(n.trim())&&!/weight|line/.test(i)?`${n.trim()}px`:n;K(a,t,i,r),t.style.setProperty(i,r),o(e,r)}w()}),c.addEventListener("click",()=>{let e=s.find(e=>e.path===u.value),t=d.parentElement?.querySelector("input[data-property]"),n=e&&U(a,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),u.value="custom",u.dispatchEvent(new Event("change")),d.parentElement?.querySelector("[data-property]")?.focus()}),d.append(p,u,l,c,m,g),queueMicrotask(w),w(),d}function We(e){let t=V(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...L(e)])}function Je(e,t,n,i,o,r,a,s,d,l){let p=t.flatMap(e=>{let t=[...n.querySelectorAll("[data-field-property]")].find(t=>t.dataset.fieldProperty===e.property),i=t?.querySelector("[data-property]");return t&&i?[{field:e,label:t,input:i}]:[]}),u=t=>{for(let{field:i,label:o,input:s}of p){if(o.querySelector(".design-token-binding")||!n.contains(o))continue;let d=()=>{r&&(s.value=r(i,e,o.querySelector(".design-token-binding")?.dataset.value));let t=o.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===i.kind&&a?a(s.value):s.value)},p=t(i,o,s,d);if(p){o.append(p),d();let e=o.querySelector('input[type="color"]'),t=p.querySelector("select"),n=e=>{e.preventDefault(),t?.focus(),t&&(t.dataset.start="custom"),t?.dispatchEvent(new KeyboardEvent("keydown",{key:"Enter",bubbles:!0,cancelable:!0}))};e?.addEventListener("click",n),e?.addEventListener("keydown",e=>{("Enter"===e.key||" "===e.key)&&n(e)})}Be(o,e,s,d,l)}},m=s?.tokens;if(!m)return void u((t,n,r,a)=>Ke(e,t.property,e=>{i(t,r,e),a()},o));Ve(o);let h=function(e,t){let n=(Array.isArray(t?.themes)?t.themes:[]).find(e=>Array.isArray(e?.options)&&e.options.length>1&&e.options.length<4);if(n)return()=>Promise.all(n.options.map(i=>g(e,{...c(t),[n.id]:i.id}).then(e=>({label:ct(i.label,i.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(m,s);return Promise.all([g(m,c(s)),f(m,e)]).then(([t,n])=>{u((i,o,r,a)=>Xe(m,e,i.property,t,n[i.property],e=>{d?.(e),a()},o,r,h,a,()=>g(m,c(s))))},()=>{})}function Xe(t,i,o,r,l,p,c,u,g,f,C){let S=m(r,o),$=e(i,o,u);if(!S.length&&!l&&!$)return null;let A=a(i,o,l,t,r),L=l&&"offToken"in l?l.offToken:void 0,M=void 0===L?void 0:h(S,L),P=document.createElement("span");P.className="design-token-binding";let N=document.createElement("span");N.className="design-token-chip",N.setAttribute("aria-hidden","true");let T=document.createElement("span");T.className="design-token-icon",T.setAttribute("aria-hidden","true");let q=document.createElement("button");q.type="button",q.className="design-token-detach",q.title="Edit the value",q.setAttribute("aria-label",`Edit ${o} value`),q.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 j=document.createElement("select");j.setAttribute("aria-label",`Style token for ${o}`),j.disabled=!S.length&&!$;let D=document.createElement("option");D.value="",D.textContent="Choose a token",j.append(D);let z=()=>{j.replaceChildren(D),j.disabled=!S.length&&!$;let e=new Map([["",j]]);for(let t of S){let n=t.group??"",i=e.get(n);i||(i=document.createElement("optgroup"),i.label=n,e.set(n,i));let o=document.createElement("option");o.value=t.path,o.textContent=`${b(t)}${t.ref?` · ${t.ref}`:""}${t===M?" · same value":""}`,o.title=v(t),i.append(o)}for(let[t,n]of e)t&&j.append(n)};z();let R=k();void 0!==L&&x(R,L,M);let O=Fe(j,o);Ie(u,O.id);let V=!1,U=He(c,P),B=()=>{let e=d(i,o,l);return V?void 0:e&&"path"in e?e.path:void 0},H=Ue(j,()=>({tokens:r,property:o,current:B(),themes:g,custom:e(i,o,u),onPreview:e=>n(i,()=>{let n=y(t,i,o,e);return f?.(),()=>{n(),f?.()}}),onSelect:F})),I=()=>{let e=w(i,o),t=B(),n=t?r.find(e=>e.path===t):void 0;j.value=t&&S.some(e=>e.path===t)?t:"";let a=n?b(n):t;N.replaceChildren(...a?[ae("span","design-token-chip__verb","Uses"),` ${a}`]:[]);let s=t?e?"token":"connected":"custom";P.dataset.mode=s;let p=document.createElement("i").style;n&&/color|fill|stroke/.test(o)&&(p.color=n.value);let u=/^rgba?\(/.test(p.color)?p.color:"";P.dataset.value!==u&&(P.dataset.value=u,P.isConnected&&f?.()),(c??P.parentElement)?.setAttribute("data-token-mode",s),R.hidden=!!t;let g=d(i,o,l),m=g&&"offToken"in g?g.offToken:getComputedStyle(i).getPropertyValue(o).trim()||L||"",k=t?void 0:h(S,m);t||x(R,m,k),O.textContent=n?`${e?"Preview":"Uses"} ${v(n)}`:t?`Uses ${t}`:R.hidden?"":R.title,j.title=O.textContent||"Choose a token",U.show(R.hidden?void 0:k,()=>k&&F(k))};function F(e){V=!1;let n=A??{offToken:getComputedStyle(i).getPropertyValue(o).trim()},a="path"in n?r.find(e=>e.path===n.path):void 0;p(E(t,i,o,e,n,a)),I(),_e(P,`${o} uses ${b(e)}`)}j.addEventListener("change",()=>{let e=S.find(e=>e.path===j.value);e?F(e):I()}),q.addEventListener("click",()=>{V=!0,I(),u?.focus()}),P.append(N,j,T,q,R,O);let _=new MutationObserver(I);_.observe(i,{attributes:!0,attributeFilter:["style","class"]});let K=new AbortController,W=new MutationObserver(()=>{P.isConnected||(_.disconnect(),W.disconnect(),K.abort())});W.observe(document,{childList:!0,subtree:!0});let J=c?.getRootNode();J instanceof ShadowRoot&&W.observe(J,{childList:!0,subtree:!0}),J?.addEventListener("komo-theme-changing",H.prepare,{signal:K.signal});let X=0;return J?.addEventListener("komo-theme-change",()=>{let e=++X;(C?.()??Promise.resolve([...r])).then(n=>{K.signal.aborted||e!==X||(s(i,t,r=n),S=m(r,o),z(),I(),H.refresh())},()=>{})},{signal:K.signal}),I(),P}var Ye=!1;function Qe(e,t,n,i){let o=V(e);if(!o||!o.tokens.length)return null;Ve(i);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=Ye,r.addEventListener("toggle",()=>{r.isConnected&&(Ye=r.open)});let a=document.createElement("summary");a.textContent="Shared theme";let s=document.createElement("small");s.className="design-react-source",s.textContent="Changes every element using these tokens",r.append(a,s);let d=new Map;for(let e of o.tokens){let t=e.path.split(".")[0];d.set(t,[...d.get(t)??[],e])}let l=o.tokens.length>6&&d.size>1;for(let[e,i]of l?d:new Map([["",o.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,r.append(t)}for(let a of i)r.append(Ge(o,a,t,n,e))}return r}function Ge(e,t,n,i,o){let r=document.createElement("div");r.className="design-theme-token";let a=document.createElement("span");a.textContent=o&&t.path.slice(o.length+1)||t.path,a.title=`${t.path} · ${B(e,t)} matching · ${t.impactSelector}`;let s=n.fields.find(e=>t.properties.includes(e.property)),d={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:"dimension"===t.type?"size":s?.kind??"text",glyph:"color"===t.type?void 0:s?.glyph,values:s?.values},l=!1,p=n.fieldControl(d,{element:e.root,begin:()=>{l=!1},apply:(n,o,r)=>{let a=null!==r&&H(e,t,r.trim(),l);n.setAttribute("aria-invalid",String(!a)),a&&(l=!0,f(),i())},commit:(e,t,n)=>{!1!==n&&(l=!1,"true"===e.getAttribute("aria-invalid")&&g())}}),c=p.querySelector("[data-property]"),u=p.querySelector('input[type="color"]'),g=()=>{let i=U(e,t);c.value=i,u&&(u.value=n.toHex(i)),c.removeAttribute("aria-invalid"),f()},f=()=>{m.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(c.title=c.value)},m=document.createElement("button");return m.type="button",m.className="design-theme-reset",m.title="Reset to page value",m.setAttribute("aria-label",`Reset ${t.path}`),m.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>',m.addEventListener("click",()=>{F(e,t),g(),i()}),g(),r.append(a,p,m),r}function Ze(e,t,n){let i=V(e);return i&&K(i,e,t,n),l(e,t)}function et(e,t){let n=V(e);n&&W(n,e,t)}function tt(e){e=ue(e)??e;let t=pe.get(e),n=t?.at(-1),i=R(e);if(!n||!i)return;let o=t.find(e=>e.propName===n.propName).before;t.pop(),ce.set(e,[...ce.get(e)??[],n]),i.setProps({...i.props,[n.propName]:n.before});let r=le.get(e);r||le.set(e,r=new Map),Object.is(o,n.before)?(r.delete(n.propName),i.releaseProps?.([n.propName])):r.set(n.propName,o),r.size||le.delete(e)}function nt(e){e=ue(e)??e;let t=ce.get(e)?.pop(),n=R(e);if(!t||!n)return;n.setProps({...n.props,[t.propName]:t.after});let i=le.get(e);i||le.set(e,i=new Map);let o=i.has(t.propName)?i.get(t.propName):t.before;Object.is(o,t.after)?(i.delete(t.propName),n.releaseProps?.([t.propName])):i.set(t.propName,o),i.size||le.delete(e),pe.has(e)||pe.set(e,[]),pe.get(e).push(t)}function it(){for(let e of[...le.keys()])mt(e);le.clear(),pe.clear(),ne(),A(),pt()}var ot,rt=new Map,at=new WeakMap,st=new WeakSet,dt=".design-theme-switch,.design-theme-toggle";function lt(e){try{return String(e.current(se()))}catch{return}}function pt(e){for(let[e,t]of rt)try{lt(e)!==t&&e.apply(t,se())}catch{}rt.clear();let t=e?.querySelector(dt);t&&(at.get(t)?.(),t.remove())}var ct=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1),ut='<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="2.75"/><path d="M8 1.75v1.5m0 9.5v1.5M1.75 8h1.5m9.5 0h1.5M3.6 3.6l1 1m6.8 6.8 1 1m-8.8 0 1-1m6.8-6.8 1-1"/></svg>',gt='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M13.25 9.6A5.5 5.5 0 1 1 6.4 2.75a4.4 4.4 0 0 0 6.85 6.85Z"/></svg>';function ft(e,t,n,i,o){i&&o&&!st.has(o)&&(st.add(o),function(e,t,n){let i=0;u(e,t.ownerDocument,()=>{let o=++i,r=e?.tokens;t.dispatchEvent(new Event("komo-theme-changing")),(r?g(r,c(e)):Promise.resolve([])).then(e=>{n.aborted||o!==i||(t.dispatchEvent(new Event("komo-theme-changing")),r&&P(r,e),t.dispatchEvent(new Event("komo-theme-change")))},()=>{})},n)}(t,i,o));let r=e.closest(".design-inspector")?.querySelector(".design-inspector__heading"),a=(r??e).querySelector(dt),s=a instanceof HTMLDetailsElement&&a.open;a&&at.get(a)?.(),a?.remove();let d=t?.themes,l=(Array.isArray(d)?d:[]).flatMap(e=>{let t=lt(e),n=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];return void 0===t||n.length<2?[]:[{axis:e,current:t,options:n,names:n.map(e=>ct(e.label,e.id))}]}),p=ot;if(ot=void 0,!l.length)return;let f,m,h,b=(e,t,i)=>{let o=lt(e);if(i===o)return;rt.has(e)||rt.set(e,o??t);let r=f.getRootNode().activeElement;(!r||f.contains(r))&&(ot=e);try{e.apply(i,se())}catch{}n(),m()},v=new AbortController,k=v.signal,x=()=>{};if(1===l.length&&2===l[0].options.length){let{axis:e,current:t,options:n,names:o}=l[0],r=n.map(e=>[e.id,e.label].map(e=>String(e??"").toLowerCase()).find(e=>"light"===e||"dark"===e)),a=r.includes("light")&&r.includes("dark"),s=f=ae("button","design-theme-toggle");s.type="button",s.setAttribute("role","switch"),a||s.append(...o.map(e=>ae("span","",e)));let d=function(e,t,n){let i=ae("div","morphing-menu__tooltip sidebar-tooltip");i.setAttribute("aria-hidden","true");let o=0,r=()=>{clearTimeout(o),delete i.dataset.open},a=()=>{if(!e.isConnected)return r();i.textContent=e.dataset.tip??"";let t=e.getBoundingClientRect(),n=i.offsetWidth/2;i.style.left=`${Math.max(8+n,Math.min(innerWidth-8-n,t.left+t.width/2))}px`,i.style.top=`${t.bottom+8}px`,i.dataset.open=""},s=t=>{"focusin"===t.type&&!e.matches(":focus-visible")||(clearTimeout(o),o=window.setTimeout(a,"focusin"===t.type?0:400))};(t??e.ownerDocument.body).append(i),e.addEventListener("pointerenter",s,{signal:n}),e.addEventListener("focusin",s,{signal:n});for(let t of["pointerleave","pointerdown","focusout"])e.addEventListener(t,r,{signal:n});return n.addEventListener("abort",()=>{r(),i.remove()}),()=>{void 0!==i.dataset.open&&a()}}(s,i,k),c=0;m=()=>{c=Math.max(0,n.findIndex(n=>n.id===(lt(e)??t))),s.setAttribute("aria-checked",String(1===c)),s.setAttribute("aria-label",`Theme: ${o[c]}`),s.dataset.tip=`Switch to ${o[1-c]}`,a?s.innerHTML="dark"===r[c]?gt:ut:s.dataset.on=String(c),d()},s.addEventListener("click",()=>b(e,t,n[1-c].id)),p===e&&(h=s)}else{let e=f=ae("details","design-theme-switch"),t=ae("summary");t.setAttribute("aria-label","Preview theme");let n=ae("div","design-theme-popup");n.setAttribute("role","group"),n.setAttribute("aria-label","Theme preview options"),e.append(t,n);let i=[];for(let{axis:e,current:t,options:o,names:r}of l){let a,s=ct(e.label,String(e.id)),d=ae(o.length>3?"label":"div","design-field design-react-field");if(o.length>3){let i=a=ae("select");o.forEach((e,t)=>i.append(new Option(r[t],e.id))),i.value=t,i.addEventListener("change",()=>b(e,t,i.value)),import("./select-menu-QAYV7NKJ.js").then(e=>e.attach(n),()=>{})}else a=ae("div","design-theme-options"),a.setAttribute("role","group"),o.forEach((n,i)=>{let o=ae("button","",r[i]);o.type="button",o.setAttribute("aria-pressed",String(n.id===t)),o.addEventListener("click",()=>b(e,t,n.id)),a.append(o)});a.setAttribute("aria-label",`${s} theme`),p===e&&(h=a.querySelector("[aria-pressed=true]")??a),i.push(()=>{let n=lt(e)??t;a instanceof HTMLSelectElement?a.value=n:a.querySelectorAll("button").forEach((e,t)=>e.setAttribute("aria-pressed",String(o[t].id===n)));let i=o.findIndex(e=>e.id===n);return`${s}: ${i<0?ct(void 0,n):r[i]}`}),d.append(ae("span","",s),a),n.append(d)}m=()=>{let e=i.map(e=>e());t.textContent=e[0].split(": ").slice(1).join(": ")+(e.length>1?" +"+(e.length-1):""),t.title=`Preview theme · ${e.join(" · ")}`},e.open=s||!!h,x=()=>{e.open=!1},e.addEventListener("keydown",i=>{"ArrowDown"===i.key&&i.target===t&&(i.preventDefault(),e.open=!0,n.querySelector("button,select")?.focus())}),e.addEventListener("focusout",t=>{t.relatedTarget instanceof Node&&!e.contains(t.relatedTarget)&&x()}),e.ownerDocument.defaultView?.addEventListener("keydown",n=>{!e.open||"Escape"!==n.key||!n.composedPath().includes(e)||e.querySelector("select[aria-expanded=true]")||(n.preventDefault(),n.stopImmediatePropagation(),x(),t.focus())},{capture:!0,signal:k})}m(),at.set(f,()=>{x(),v.abort()}),Ve(i),r?r.insertBefore(f,r.querySelector(".design-inspector__close")):e.prepend(f);let y=f.getRootNode();y.addEventListener("komo-theme-change",m,{signal:k}),y.addEventListener("pointerdown",e=>{e.composedPath().includes(f)||x()},{capture:!0,signal:k}),N(f,()=>{x(),f.isConnected||v.abort()},k),h?.focus({preventScroll:!0})}function mt(e){e=ue(e)??e;let t=le.get(e),n=R(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),n.releaseProps?.([...t.keys()]),le.delete(e),pe.delete(e))}function ht(e,t){if(e.title=void 0===t?"unset":""===t?"Empty string":"",e instanceof HTMLInputElement&&"checkbox"===e.type)return e.checked=!0===t,void e.toggleAttribute("data-unset",void 0===t);e.value=void 0===t?"":String(t),e instanceof HTMLInputElement&&(e.placeholder=void 0===t?"unset":'""')}function bt(e,t){e.className="design-react-scrub";let n=()=>Number(t.value)||0,i=e=>{t.value=String(Math.round(100*e)/100)};e.addEventListener("pointerdown",o=>{if(o.button||t.disabled)return;o.preventDefault(),e.setPointerCapture?.(o.pointerId);let r=o.clientX,a=!1,s=n();e.onpointermove=e=>{let o=Math.trunc((e.clientX-r)/2);o&&(r+=2*o,a=!0,i(n()+o*(e.shiftKey?10:1)),t.dispatchEvent(new CustomEvent("komo-preview",{detail:t.value})))},e.onpointerup=e.onpointercancel=()=>{if(e.onpointermove=e.onpointerup=e.onpointercancel=null,!a)return t.focus();t.dispatchEvent(new CustomEvent("komo-preview",{detail:null})),n()!==s&&t.dispatchEvent(new Event("change",{bubbles:!0}))}}),t.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),i(n()+("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)),t.dispatchEvent(new Event("change",{bubbles:!0})))})}function vt(e,t,n,i,r){if(!r){r=ae("summary");let n=ae("span","design-react-name",t);n.title=t,r.append(n),e.append(r)}n&&r.after(o(t,n,i))}function kt(e,t,n,i,o,r){e=ue(e)??e;let a,s=t.definition.props.find(e=>e.name===n);if(!s||!z(s,i))return o.setAttribute("aria-invalid","true"),!1;o.removeAttribute("aria-invalid");try{let e=t.props;if(a=e[n],Object.is(a,i))return!0;t.setProps({...e,[n]:i})}catch{return o.setAttribute("aria-invalid","true"),o.title="Runtime preview is unavailable. The component kept its current props.",!1}let d=le.get(e);d||le.set(e,d=new Map);let l=d.has(n)?d.get(n):(pe.get(e)?.find(e=>e.propName===n)??{before:a}).before;Object.is(l,i)?(d.delete(n),t.releaseProps?.([n])):d.set(n,l),d.size||le.delete(e);let p=pe.get(e);return p||pe.set(e,p=[]),p.push({propName:n,before:a,after:i}),ce.delete(e),r(()=>tt(e)),!0}function xt(e,t,n,i,o,r,a){let s=R(e);if(!s){let t,r=Pe(e,o);try{t=r&&ie(e,o)?.editor?.(r)}catch{}if(t&&r&&re(r.element)){if(r.element!==e){Ve(n);let e=document.createElement("small");if(e.className="design-react-source design-react-group design-react-inside",e.append(`Inside ${r.name}`),i){let t=document.createElement("button");t.type="button",t.textContent="Select component",t.addEventListener("click",()=>i(r.element)),e.append(" · ",t)}return e}s=j(r,t)}if(!s){let t=null;try{t=r&&ie(e,o)?.panel?.(r)||null}catch{}if(t){Ve(n);let e=t.querySelector("summary");e&&r&&vt(t,r.name,r.source??"",a,e)}return t??function(e,t,n){let i=O(e);if(!i)return null;Ve(n);let o=document.createElement("small");if(o.className="design-react-source design-react-group design-react-inside",o.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)),o.append(" · ",e)}return o}(e,i,n)}}Ve(n);let d=document.createElement("details");d.className="design-group design-react-group",d.open=!0,vt(d,s.definition.name,ye(s),a);let l=s,p=[];if(r&&s.subscribe){let t=0,i=!1,o=new AbortController,a=d.getRootNode(),l=()=>{t||!d.isConnected||(t=requestAnimationFrame(()=>{if(t=0,!d.isConnected)return;let n=d.getRootNode(),o=n.activeElement;p.forEach(e=>e()),!o?.closest(".design-inspector,.komo-tokens,.komo-select")&&!n.querySelector(".komo-tokens,.komo-select")&&(i=!1,r(e.isConnected?d:void 0))}))},c=s.subscribe(()=>{e=ue(e)??e,i=!0,l()});(n??a).addEventListener("focusout",()=>{queueMicrotask(()=>{i&&l()})},{signal:o.signal});let u=()=>{c(),cancelAnimationFrame(t),o.abort()};queueMicrotask(()=>{d.isConnected?N(d,()=>{d.isConnected||u()},o.signal):u()})}for(let n of s.definition.props.filter(e=>"unsupported"!==e.kind)){let i=n.styleProperty,o=document.createElement("label");o.className="design-field design-react-field";let r=document.createElement("span");r.textContent=n.name;let a,c=s.props[n.name];if("enum"===n.kind){let e=document.createElement("select");for(let t of n.values??[]){let n=document.createElement("option");n.value=String(t),n.textContent=String(t),e.append(n)}if(void 0===c&&!n.required){let t=document.createElement("option");t.value="",t.textContent="unset",e.prepend(t)}a=e}else{let e=document.createElement("input");"boolean"===n.kind?(e.type="checkbox",e.setAttribute("role","switch"),e.className="design-react-switch"):"number"===n.kind?(e.type="number",e.step="any",bt(r,e)):(e.type="text",e.maxLength=500,e.autocomplete="off"),a=e}if(ht(a,c),a.setAttribute("aria-label",`${s.definition.name} ${n.name}`),"unsupported"===n.kind)a=document.createElement("input"),a.disabled=!0,a.value=`Read only · ${n.typeLabel}`,a.setAttribute("aria-label",`${s.definition.name} ${n.name}, read only`),o.title=`Inline feedback does not edit ${n.typeLabel} props.`;else{let i,o=()=>{let i=a instanceof HTMLInputElement&&"checkbox"===a.type?a.checked:a.value,o=i;"number"===n.kind?o=""===String(i).trim()?void 0:Number(i):"enum"===n.kind?o=r(String(i)):"boolean"===n.kind&&(o=!0===i),kt(e,l,n.name,o,a,t)&&"boolean"===n.kind&&ht(a,o)},r=e=>""!==e||n.required?(n.values??[]).find(t=>String(t)===e):void 0;a.addEventListener("change",o),("enum"===n.kind||"number"===n.kind)&&a.addEventListener("komo-preview",t=>{e=ue(e)??e;let o=t.detail,a=l.props,s=a[n.name];try{null!==o?(i??={opening:s},i.shown="number"===n.kind?Number(o):r(o),l.setProps({...a,[n.name]:i.shown})):i&&(Object.is(s,i.shown)||Object.is(s,i.opening))&&(l.setProps({...a,[n.name]:i.opening}),le.get(e)?.has(n.name)||l.releaseProps?.([n.name]))}catch{}null===o&&(i=void 0)})}r.title=n.name,o.append(r,a);let u=document.createElement("div");u.className="design-react-row";let g=document.createElement("button");g.type="button",g.className="design-theme-reset",g.setAttribute("aria-label",`Reset ${s.definition.name} ${n.name}`),g.title="Restore the value before editing",g.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>';let f=()=>{g.hidden=!le.get(e)?.has(n.name)};p.push(()=>{a===a.getRootNode().activeElement||"true"===a.getAttribute("aria-expanded")||(ht(a,l.props[n.name]),f())}),a.addEventListener("change",f),g.addEventListener("click",()=>{let i=le.get(e);i?.has(n.name)&&(kt(e,l,n.name,i.get(n.name),a,t),ht(a,l.props[n.name]),f(),a.focus())}),f(),u.append(o,g);let m=document.createElement("small");if(m.className="design-react-type",m.textContent=`${n.typeLabel}${n.required?" · required":" · optional"}`,o.append(m),o.title||=m.textContent,"string"===n.kind&&i){let r=V(e),d=r?Q(r,i):[];if(d.length){let r=document.createElement("span");r.className="design-token-binding";let l=document.createElement("span");l.textContent="Style token";let p=document.createElement("select");p.setAttribute("aria-label",`Style token for ${n.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=>s.props[n.name]===`var(${e.cssVariable})`);p.value=e?.path??"custom",r.dataset.mode=e?"token":"custom"};p.addEventListener("change",()=>{let o=d.find(e=>e.path===p.value),r=o?`var(${o.cssVariable})`:"string"==typeof s.props[n.name]&&String(s.props[n.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(i).trim()??"":"string"==typeof s.props[n.name]?s.props[n.name]:"";kt(e,s,n.name,r,a,t)&&u()}),r.append(l,p),o.append(r),u()}}d.append(u)}return d.toggleAttribute("data-empty",!d.querySelector(".design-react-row")),d}export{fe as attachDesignSystemControls,Je as attachStyleTokenControls,ft as attachThemeSwitcher,Ce as beginReactTextEdit,De as canUndoDesignTokenEdit,Le as canUndoReactProp,Ae as cancelReactTextEdit,Xe as createAdapterTokenControl,Qe as createDesignThemePanel,Ke as createElementTokenControl,xt as createReactPropsPanel,q as cssVariableTokens,Te as designContext,$e as finishReactTextEdit,ze as hasDesignTokenEdit,Ee as hasReactPropChanges,je as installCommentCapture,g as listTokens,Ze as noteDesignTokenOverride,p as originalDesignTokenStyle,Se as previewReactTextEdit,qe as proposedDesignChanges,Me as proposedReactChanges,nt as redoReactProp,Oe as resetDesignTokenEdits,it as resetPreviews,mt as resetReactProps,pt as restoreThemes,ge as retainReactPropSelection,ue as retainReactPropTarget,we as showDesignBefore,et as syncDesignTokenBinding,c as themeState,We as tokenBoundProperties,Re as undoDesignTokenEdit,tt as undoReactProp};

package/dist/select-menu-QAYV7NKJ.js

@@ -1 +0,0 @@
-import{c as e}from"./chunk-DLC3CRFV.js";import{a as t,c as o}from"./chunk-4KEVPMJJ.js";import{h as n}from"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";var i,l=new WeakSet,a=new WeakMap,r=new WeakMap,s=new WeakSet,d=0;function p(e,o,n){o&&a.set(e,o),n&&r.set(e,n),i&&!i.select.isConnected&&i.close();let d=e.getRootNode();if((d instanceof ShadowRoot||d===document)&&!s.has(d)){s.add(d);let e=document.createElement("style");e.textContent=t+".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{width:max-content;max-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px;line-height:1.2}.komo-select[popover]{position:fixed;inset:auto;margin:0;border:0}.komo-select [role=option]{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:28px;padding:0 8px;border-radius:6px;white-space:nowrap;cursor:pointer}.komo-select [role=option] span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.komo-select [role=option]::after{content:'';flex:none;width:7px;height:3.5px;margin:-3px 1px 0 0;border:solid transparent;border-width:0 0 1.5px 1.5px;rotate:-45deg}.komo-select [data-active]{background:#ffffff14;color:#f1efeb}.komo-select [aria-selected=true]{color:#f1efeb}.komo-select [aria-selected=true]::after{border-color:#bda6ef}.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}}",(d instanceof ShadowRoot?d:document.head).append(e)}if(l.has(e))return;l.add(e);let p=e=>{let t=e.composedPath()[0];return t instanceof HTMLSelectElement&&!t.disabled&&!t.multiple&&!t.dataset.picker?t:null};e.addEventListener("focusin",e=>{let t=p(e);t&&!t.hasAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-expanded","false"))}),e.addEventListener("pointerdown",t=>{c="mouse"===t.pointerType?void 0:t;let o=p(t);!o||t.button||(t.preventDefault(),c||f(o,a.get(e)))},!0),e.addEventListener("pointerup",t=>{let o=p(t);o&&c&&!u(t)&&f(o,a.get(e))},!0);for(let t of["mousedown","touchend"])e.addEventListener(t,e=>{p(e)&&e.cancelable&&e.preventDefault()},!0);e.addEventListener("keydown",t=>{let o=p(t);if(!o||i?.select===o||t.ctrlKey||t.metaKey)return;let n=1===t.key.length&&" "!==t.key&&!t.altKey;n&&(/^[b?]$/i.test(t.key)||r.get(e)?.(t))||!n&&!["Enter"," ","ArrowDown","ArrowUp"].includes(t.key)||(t.preventDefault(),m(o,a.get(e),n?t.key:""))},!0)}var c,u=e=>c&&Math.abs(e.clientY-c.clientY)>10;function f(e,t){if(i?.select===e)return i.close();c||e.focus(),m(e,t)}function m(t,l,a=""){i?.close(),c=void 0;let r="komo-select-"+ ++d,s=document.createElement("div");s.className="komo-select",s.id=r,s.setAttribute("role","listbox"),s.setAttribute("aria-label",t.getAttribute("aria-label")??t.title);let p=[],f=(e,t)=>{let o=document.createElement("div");o.id=`${r}-${p.length}`,o.setAttribute("role","option"),o.setAttribute("aria-selected",String(e.selected)),e.disabled&&o.setAttribute("aria-disabled","true"),e.title&&(o.title=e.title);let n=document.createElement("span");n.textContent=e.label,n.style.cssText=e.style.cssText,o.append(n),t.append(o),p.push({node:o,option:e})};for(let e of t.children)if(e instanceof HTMLOptionElement)f(e,s);else if(e instanceof HTMLOptGroupElement){let t=document.createElement("div");t.setAttribute("role","group"),t.setAttribute("aria-labelledby",`${r}-g${p.length}`);let o=document.createElement("small");o.id=`${r}-g${p.length}`,o.textContent=e.label,t.append(o);for(let o of e.querySelectorAll("option"))f(o,t);s.append(t)}let m,h=-1,g=t.dataset.property,b=()=>{let e=m;m=void 0,e?.()},v=p.flatMap((e,t)=>e.option.disabled?[]:[t]),x=(o,i=!0)=>{if(!(o>=0))return;if(o!==h&&i){b();let{value:i,selected:a}=p[o].option;if(!a){let o=e=>t.dispatchEvent(new CustomEvent("komo-preview",{detail:e}));m=e(l,()=>l&&g?n(l,g,i):(o(i),()=>o(null)))}}p[h]?.node.removeAttribute("data-active"),h=o;let a=p[o].node;a.toggleAttribute("data-active",!0),t.setAttribute("aria-activedescendant",a.id);let r=a.offsetTop,d=r+a.offsetHeight;r<s.scrollTop?s.scrollTop=r-4:d>s.scrollTop+s.clientHeight&&(s.scrollTop=d-s.clientHeight+4)},w=e=>{let t=v.indexOf(h);x(v[t<0?0:Math.max(0,Math.min(v.length-1,t+e))])},k=e=>{let o=p[e]?.option;y(),o&&!o.disabled&&!o.selected&&(o.selected=!0,t.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),t.dispatchEvent(new Event("change",{bubbles:!0})))},E=new AbortController,{signal:A}=E;function y(){i?.close===y&&(i=void 0,b(),E.abort(),s.remove(),t.setAttribute("aria-expanded","false"),t.removeAttribute("aria-activedescendant"),t.removeAttribute("aria-controls"))}i={select:t,close:y};let L="",M=0,C=(e,t)=>{L=t-M<1e3?L+e.toLowerCase():e.toLowerCase(),M=t;let o=Math.max(0,v.indexOf(h)+(L[1]?0:1)),n=[...v.slice(o),...v.slice(0,o)].find(e=>p[e].option.label.toLowerCase().startsWith(L));void 0!==n&&x(n)};addEventListener("keydown",e=>{if(!t.isConnected||e.composedPath()[0]!==t)return y();let o=e.key;if(!(e.ctrlKey||e.metaKey||e.altKey&&!o.startsWith("Arrow"))){if("Tab"===o)return y();if("ArrowDown"===o||"ArrowUp"===o)w("ArrowDown"===o?1:-1);else if("Home"===o||"PageUp"===o)x(v[0]);else if("End"===o||"PageDown"===o)x(v[v.length-1]);else if("Escape"===o)y();else if("Enter"===o||" "===o&&!L)k(h);else if(1===o.length)C(o,e.timeStamp);else if("ArrowLeft"!==o&&"ArrowRight"!==o)return;e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:A}),addEventListener("pointerdown",e=>{let o=e.composedPath();!o.includes(s)&&!o.includes(t)&&y()},{capture:!0,signal:A});let T,W=e=>{let o=t.getBoundingClientRect();e.target!==s&&(!T||Math.abs(o.top-T.top)+Math.abs(o.left-T.left)>1)&&y()};addEventListener("scroll",W,{capture:!0,signal:A}),t.getRootNode().addEventListener("scroll",W,{capture:!0,signal:A}),addEventListener("resize",y,{signal:A}),o(t,y,A),t.addEventListener("blur",y,{signal:A}),s.addEventListener("mousedown",e=>e.preventDefault(),{signal:A}),s.addEventListener("pointerleave",()=>{b(),p[h]?.node.removeAttribute("data-active"),t.removeAttribute("aria-activedescendant"),h=-1},{signal:A}),s.addEventListener("pointermove",e=>{let t=e.target.closest?.("[role=option]"),o=p.findIndex(e=>e.node===t);v.includes(o)&&o!==h&&x(o)},{signal:A}),s.addEventListener("click",e=>{if(e.preventDefault(),u(e))return;let t=e.target.closest?.("[role=option]"),o=p.findIndex(e=>e.node===t);v.includes(o)&&k(o)},{signal:A});let D=t.closest(".design-field")??t.parentElement;s.popover="manual",(t.closest(".komo-tokens")??D).append(s),s.showPopover?.(),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-expanded","true"),t.setAttribute("aria-controls",r),T=t.getBoundingClientRect();let $=(t.offsetWidth<60?D:t).getBoundingClientRect(),H=Math.min(Math.max($.width,s.offsetWidth+2,120),innerWidth-16),R=innerHeight-$.bottom-8,S=$.top-8,K=s.scrollHeight,P=K>R&&S>R,O=Math.max(P?S:R,60),I=Math.min(K,240,O);s.style.width=`${H}px`,s.style.maxHeight=`${Math.min(240,O)}px`,s.style.left=`${Math.max(8,Math.min($.left,innerWidth-H-8))}px`,s.style.top=`${P?$.top-I-4:$.bottom+4}px`,s.toggleAttribute("data-up",P);for(let{node:e,option:t}of p)!e.title&&e.firstElementChild.scrollWidth>e.firstElementChild.clientWidth&&(e.title=t.label);x(p.findIndex(e=>e.option.selected&&!e.option.disabled),!1),h<0&&w(0),a&&C(a,performance.now())}export{p as attach};

package/dist/shell-mode-SUYLWDWW.js

@@ -1 +0,0 @@
-var e="komo-shell",t="komo:shell";function o(t,o){let a=new URL(t,location.href);return o?a.searchParams.set(e,o):a.searchParams.delete(e),a.href}function a(e,a=""){try{sessionStorage.removeItem(t),a&&sessionStorage.setItem("komo:shell-off",a)}catch{}location.replace(o(e,""))}function n(e,a,n,r){if(a&&!confirm(`Reload so the app runs once, in the frame?\n\nUnsaved changes in the app are lost${n?", and so are design changes you haven't posted":""}. Cancel keeps a second copy instead.`))return r();try{let a=Array.from(crypto.getRandomValues(new Uint8Array(16)),e=>e.toString(16).padStart(2,"0")).join("");sessionStorage.setItem(t,JSON.stringify({v:1,project:e,nonce:a,origin:location.origin})),location.replace(o(location.href,a))}catch{return r()}setTimeout(r,3e3)}function r(e,t){try{let a=e.location.href,n=o(a,t);a.startsWith(location.origin)&&n!==location.href&&history.replaceState(history.state,"",n)}catch{}}export{n as enterShell,a as leaveShellPage,o as shellUrl,r as syncShell};

package/dist/shortcut-help-XRDNX7MZ.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-RBHY7UDS.js";import{a as e,b as o,c as r,d as n}from"./chunk-6HM4JQLV.js";import{E as i,G as s}from"./chunk-IQOPM3JF.js";var a=(t,e,o,r={})=>({label:t,group:o,shortcut:{key:e,label:e,alt:!1,shift:!1,ctrl:!1,meta:!1,...r}});function l(o=e(),r,n=t()){let i="Design canvas",s="Experimental geometry",l="Text editing",c="Compare",p=(t,e,o)=>({label:t,group:e,shortcut:o}),m="enter"!==n.child?.key||n.child.alt||n.child.shift||n.child.ctrl||n.child.meta?n.child:null;return[p("Next sibling",i,n.next),p("Previous sibling",i,n.prev),p("Parent element",i,n.parent),a("Post comment","Enter",i),...m?[p("First child",i,m)]:[],a(m?"First child (alternative)":"First child","ArrowDown",i,{alt:!0}),a("Parent element (alternative)","ArrowUp",i,{alt:!0}),a("Exit Design mode","Escape",i),a("Undo last preview","z",i,o?{meta:!0}:{ctrl:!0}),a("Redo last undo","z",i,o?{meta:!0,shift:!0}:{ctrl:!0,shift:!0}),...o?[]:[a("Redo last undo","y",i,{ctrl:!0})],a("Focus selection to move or resize","M",i),a("Move before previous sibling","ArrowUp",s,{alt:!0}),a("Move after next sibling","ArrowDown",s,{alt:!0}),a("Move out, after its parent","ArrowUp",s,{alt:!0,shift:!0}),a("Move into previous sibling","ArrowDown",s,{alt:!0,shift:!0}),a("Resize width","ArrowRight",s,o?{meta:!0}:{ctrl:!0}),a("Resize height","ArrowDown",s,o?{meta:!0}:{ctrl:!0}),a("Resize by 10px","ArrowRight",s,o?{meta:!0,shift:!0}:{ctrl:!0,shift:!0}),a("Back to the canvas","Escape",s),...r?[{label:"Hide or show selection · hold to peek",group:i,shortcut:r}]:[],a("Commit text","Enter",l),a("New line","Enter",l,{shift:!0}),a("Cancel text edit","Escape",l),a("Toggle before and after","B",c),p("Show before",c,n.before),p("Show after",c,n.after)]}function c(t=e()){let o="Design canvas";return[{label:"Inspect element",group:o,keys:[],gesture:"Click",aria:"Click"},{label:"Select inner element",group:o,keys:[t?"⌘":"Ctrl"],gesture:"Click",aria:(t?"Command":"Control")+" + Click"},{label:"Edit text",group:o,keys:[],gesture:"Double-click",aria:"Double-click"},{label:"Keyboard shortcuts",group:o,keys:["?"],aria:"?"}]}function p(t,e,p=!1,m,u,h=!1){let d=t.querySelector("dialog.komo-shortcuts");if(d)return d.querySelector("[autofocus]")?.focus();let k=t.activeElement??document.activeElement,g=k?.closest(".morphing-menu__panel")?t.querySelector('[data-menu-item="more"]'):k,b=i("dialog","komo-shortcuts");b.setAttribute("aria-modal","true"),b.setAttribute("aria-labelledby","komo-shortcuts-title");let x=i("h2","","Keyboard shortcuts");x.id="komo-shortcuts-title";let f=s("Close",()=>L(),"icon komo-shortcuts__close","close");f.removeAttribute("title");let v=i("span","morphing-menu__tooltip komo-shortcuts__tip","Close");v.setAttribute("aria-hidden","true"),v.append(n(["Esc"],"Escape"));let w=i("header");w.append(x,f,v);let y=i("input");y.type="search",y.placeholder="Filter shortcuts",y.setAttribute("aria-label","Filter shortcuts"),y.autocomplete="off",y.spellcheck=!1;let _=i("div","komo-shortcuts__body");_.tabIndex=0,_.setAttribute("autofocus",""),_.setAttribute("role","region"),_.setAttribute("aria-label","Shortcuts");let E=p?[...c(),...l(void 0,e.find(t=>/^(Hide|Show) comments$/.test(t.label))?.shortcut,u)]:[],C=[...e,a("Post comment","Enter","Comments"),a("New line","Enter","Comments",{shift:!0}),...h?[a("Zoom to fit","1","Frame",{shift:!0}),a("Zoom to 100%","0","Frame",{shift:!0})]:[]],A=("design"===m?[...E,...C]:[...C,...E]).filter(t=>t.shortcut||t.keys?.length||t.gesture),S=[...new Set(A.map(t=>t.group??"General"))].sort((t,e)=>+("comment"===m&&"Comments"===e)-+("comment"===m&&"Comments"===t)),D=[];for(let t of S){let e=i("section");e.append(i("h3","",t));for(let s of A.filter(e=>(e.group??"General")===t)){let t=i("div","komo-shortcuts__row"),a=s.shortcut?o(s.shortcut):void 0;a&&t.setAttribute("aria-keyshortcuts",a.aria);let l=s.shortcut?r(s.shortcut):n(s.keys,s.aria??s.keys.join(" + "));s.gesture&&l.append(i("span","",s.gesture)),t.append(i("span","",s.label),l),e.append(t),D.push([t,`${s.label} ${l.getAttribute("aria-label")} ${l.textContent}`.toLowerCase()])}_.append(e)}let z=i("p","","No matching shortcuts");z.setAttribute("role","status"),z.hidden=!0,_.append(z,i("p","","Shortcuts pause while typing in a text field.")),y.addEventListener("input",()=>{let t=y.value.toLowerCase().split(/\s+/).filter(Boolean);for(let[e,o]of D)e.hidden=!t.every(t=>o.includes(t));for(let t of _.querySelectorAll("section"))t.hidden=!t.querySelector(".komo-shortcuts__row:not([hidden])");z.hidden=D.some(([t])=>!t.hidden)}),b.append(Object.assign(i("style"),{textContent:'.komo-shortcuts{box-sizing:border-box;width:min(720px,calc(100vw - 32px));max-width:none;max-height:min(680px,calc(100dvh - 32px));margin:auto;padding:0;overflow:hidden;border:0;border-radius:16px;background:var(--mm-surface);color:var(--mm-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mm-ink) 12%,transparent),0 24px 64px -16px rgb(0 0 0/55%);font:12px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;pointer-events:auto;color-scheme:dark}\n.komo-shortcuts[open]{display:flex;flex-direction:column;animation:komo-help-in var(--duration-fast) var(--ease-smooth-out)}\n.komo-shortcuts::backdrop{background:rgb(0 0 0/40%);pointer-events:auto}\n@keyframes komo-help-in{from{opacity:0;scale:.98;translate:0 4px}}\n.komo-shortcuts header{flex:none;position:relative;display:flex;align-items:center;gap:8px;padding:10px 10px 4px 16px}\n.komo-shortcuts h2{flex:1;margin:0;font-size:14px;font-weight:600}\n.komo-shortcuts__close{width:28px;height:28px;border-radius:8px;color:color-mix(in oklab,var(--mm-ink) 60%,transparent)}\n.komo-shortcuts__close:hover{background:color-mix(in oklab,var(--mm-ink) 8%,transparent);color:var(--mm-ink)}\n.komo-shortcuts__close svg{width:16px;height:16px}\n.komo-shortcuts .komo-shortcuts__tip{top:50%;bottom:auto;right:44px;translate:0 -50%;opacity:0;transition:opacity var(--duration-quick) var(--ease-smooth-out)}\n.komo-shortcuts__close:hover+.komo-shortcuts__tip,.komo-shortcuts__close:focus-visible+.komo-shortcuts__tip{opacity:1;transition-delay:400ms}\n.komo-shortcuts input{flex:none;width:auto;height:30px;margin:6px 16px;padding:0 10px;border-radius:8px;background:color-mix(in oklab,var(--mm-ink) 7%,transparent);box-shadow:none}\n.komo-shortcuts input:focus{box-shadow:inset 0 0 0 1px var(--accent,#bda6ef)}\n.komo-shortcuts input::placeholder{color:color-mix(in oklab,var(--mm-ink) 50%,transparent)}\n.komo-shortcuts__close:focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:-2px}\n.komo-shortcuts__body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 16px 14px;columns:2 240px;column-gap:28px;outline:0}\n.komo-shortcuts section{break-inside:avoid;padding-bottom:10px}\n.komo-shortcuts h3{margin:0;padding:6px 0 2px;font-size:11px;font-weight:600;color:color-mix(in oklab,var(--mm-ink) 62%,transparent)}\n.komo-shortcuts__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}\n.komo-shortcuts [hidden]{display:none}\n.komo-shortcuts .komo-kbd{align-items:center;gap:4px}\n.komo-shortcuts__row kbd{box-sizing:border-box;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;font-size:11px;line-height:1}\n.komo-shortcuts .komo-kbd span,.komo-shortcuts p{color:color-mix(in oklab,var(--mm-ink) 55%,transparent)}\n.komo-shortcuts p{column-span:all;margin:4px 0 0;font-size:11px}\n@media (prefers-reduced-motion:reduce){.komo-shortcuts[open]{animation:none}}\n@media (pointer:coarse){.komo-shortcuts__close{width:44px;height:44px}}'}),w,y,_);let F=new AbortController,{signal:M}=F,L=()=>{M.aborted||(F.abort(),b.close(),b.remove(),g?.isConnected&&g.focus({preventScroll:!0}))};b.addEventListener("close",L,{signal:M}),window.addEventListener("keydown",e=>{let o=e.composedPath().find(t=>t instanceof HTMLDialogElement&&t.open);if(o&&o!==b||(e.stopImmediatePropagation(),e.isComposing))return;let r=t.activeElement===y;if("Escape"!==e.key&&("?"!==e.key||r||e.ctrlKey||e.metaKey||e.altKey)){if("Tab"===e.key){let o=[f,y,_],r=o.indexOf(t.activeElement);e.preventDefault(),o[r<0?e.shiftKey?2:0:(r+(e.shiftKey?2:1))%3].focus()}}else e.preventDefault(),L()},{capture:!0,signal:M});let R=!1,P=t=>{let e=b.getBoundingClientRect();return t.target===b&&(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)};b.addEventListener("pointerdown",t=>{R=P(t)},{signal:M}),b.addEventListener("click",t=>{R&&P(t)&&L()},{signal:M}),t.append(b),b.showModal()}export{p as showShortcutHelp};

package/dist/snapshot-V264ZMQG.js

@@ -1 +0,0 @@
-var e="data-komo-no-snapshot",t="[data-branch-comments],[data-komo-move-clone],[data-komo-viewport],[data-komo-snapshot-sandbox]",a="[redacted]",n=new Set(["script","noscript","template","style","link","meta","base","title"]),o=/^(?:href|src|action|formaction|xlink:href|poster|data|background)$/i,r=e=>"textarea"===e.localName||"input"===e.localName&&!/^(?:button|submit|reset|image|checkbox|radio|range|color)$/i.test(e.getAttribute("type")??""),i=2e4,l=200,s=500,c=(e,t)=>e.length>t?`${e.slice(0,t-1)}…`:e,h=e=>(new TextEncoder).encode(e).length,u=a=>!!a.closest(`[${e}],${t}`);function d(t,a=1/0){for(let{name:n,value:r}of[...t.attributes])/^on/i.test(n)||"srcdoc"===n||n.startsWith("data-komo-")&&n!==e||o.test(n)&&/^\s*(?:javascript|vbscript):/i.test(r)?t.removeAttribute(n):r.length>a&&t.setAttribute(n,c(r,a))}function m(o,l,s=i){let u=o.ownerDocument,m=s,f=o=>{if(3===o.nodeType){let e=c(o.nodeValue??"",500);return m-=e.length,u.createTextNode(e)}if(1!==o.nodeType)return null;let i=o;if(n.has(i.localName)||i.matches(t))return null;let s=i.cloneNode(!1);if(d(s,200),r(i)&&function(e,t){let n=e.value??e.getAttribute("value")??"";"textarea"===e.localName?t.textContent=n?a:"":(n||t.hasAttribute("value"))&&t.setAttribute("value",a)}(i,s),m-=s.outerHTML.length,i.hasAttribute(e))return s;if(l?.(i))return r(i)||(s.textContent=a),s;if("textarea"===i.localName)return s;for(let e of i.childNodes){if(m<=0){s.append(u.createComment(" trimmed "));break}let t=f(e);t&&s.append(t)}return s},g=f(o);if(!g)return"";let p=g.outerHTML;if(h(p)<=s)return p;let w=u.createComment(" trimmed ");g.append(w);for(let e=h(g.outerHTML)-s;e>0&&g.firstChild!==w;e=h(g.outerHTML)-s)for(;e>0&&g.firstChild!==w;){let t=w.previousSibling;for(;t.lastChild;)t=t.lastChild;e-=1===t.nodeType?t.outerHTML.length:(t.nodeValue?.length??0)+7,t.parentNode.removeChild(t)}return p=g.outerHTML,h(p)>s?"":p}var f=class extends Error{constructor(e){super(e),this.reason=e}reason},g=25e4,p=e=>new Promise((t,a)=>{let n=new FileReader;n.onload=()=>t(n.result),n.onerror=()=>a(n.error),n.readAsDataURL(e)});async function w(e,t){if(e.startsWith("data:"))return e;let a=new URL(e,t.document.baseURI);try{let e=await fetch(a,{mode:"cors",signal:AbortSignal.timeout(5e3)});return e.ok?await p(await e.blob()):""}catch{if(a.origin!==t.location.origin)throw new f("cross-origin");return""}}function b(e,t,a){let n="";for(let o=0;o<e.length;o++){let r=e[o];if(r.startsWith("--"))continue;let i=e.getPropertyValue(r);(i!==t.get(r)||a&&i!==a.getPropertyValue(r))&&(n+=`${r}:${i};`)}return n}var y=/url\((['"]?)(.*?)\1\)/g;async function x(o,i,l){let s=o.ownerDocument,c=s.defaultView,h=o.getBoundingClientRect(),u=o.offsetWidth??h.width,m=Math.min(o.offsetHeight??h.height,2e3);if(!u||!m)throw new f("failed");let g=function(){let e=document.createElement("iframe");e.setAttribute("data-komo-snapshot-sandbox",""),e.setAttribute("aria-hidden","true"),e.tabIndex=-1,e.style.cssText="position:fixed;left:-10px;top:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none",document.documentElement.append(e);let t=e.contentDocument;try{t.open(),t.write("<!doctype html><html><head></head><body></body></html>"),t.close()}catch{}let a=new Map;return{of(e){let n=`${e.namespaceURI} ${e.localName}`,o=a.get(n);if(!o){let r=t.createElementNS(e.namespaceURI,e.localName);(t.body??t.documentElement).append(r);let i=t.defaultView.getComputedStyle(r);o=new Map;for(let e=0;e<i.length;e++)o.set(i[e],i.getPropertyValue(i[e]));r.remove(),a.set(n,o)}return o},dispose:()=>e.remove()}}(),p=[],x=new Set,v=new Map,$=[],M="",C=0,T=e=>(e.catch(()=>{}),e),A=e=>{for(let[,,t]of e.matchAll(y))t&&!t.startsWith("data:")&&!v.has(t)&&v.set(t,T(w(t,c)));return e},k=(o,h)=>{if(3===o.nodeType)return s.createTextNode(o.nodeValue??"");if(1!==o.nodeType)return null;let y=o,v=y.localName;if(n.has(v)||y.matches(t))return null;if(++C>3e3)throw new f("too-large");let E,I=c.getComputedStyle(y);if("none"===I.display)return null;if("canvas"===v||"video"===v){E=s.createElement("img");let e=document.createElement("canvas");e.width=y.width||y.videoWidth||1,e.height=y.height||y.videoHeight||1;try{e.getContext("2d").drawImage(y,0,0,e.width,e.height),E.setAttribute("src",e.toDataURL("image/png"))}catch{throw new f("cross-origin")}}else if("iframe"===v||"embed"===v||"object"===v)E=s.createElement("div");else{E=y.cloneNode(!1),d(E);for(let e of["id","class","srcset","sizes","loading","style"])E.removeAttribute(e)}r(y)&&(E.removeAttribute("value"),E.hasAttribute("placeholder")&&i?.(y)&&E.setAttribute("placeholder",a)),"img"===v&&p.push(T(async function(e,t,a){let n=e.currentSrc||e.src;if(!n||n.startsWith("data:"))return n;await e.decode().catch(()=>{});let o=Math.min(e.naturalWidth,Math.ceil(e.offsetWidth*t)||e.naturalWidth),r=Math.round(o*e.naturalHeight/(e.naturalWidth||1));if(o&&r){let t=document.createElement("canvas");t.width=o,t.height=r;try{return t.getContext("2d").drawImage(e,0,0,o,r),t.toDataURL("image/png")}catch{}}return w(n,a)}(y,l,c).then(e=>E.setAttribute("src",e)))),x.add(I.fontFamily.split(",")[0].replace(/["']/g,"").trim().toLowerCase());let L=b(I,g.of(y),h);h||(L+=`${"inline"===I.display?"display:inline-block;":""}margin:0;position:relative;inset:auto;float:none;transform:none;translate:none;rotate:none;scale:none;flex:none;box-sizing:border-box;width:${u}px;height:${m}px;max-width:none;max-height:none;min-width:0;min-height:0;`);let R=y.hasAttribute(e)&&!!h;R&&(L+="color:transparent;background:#e5e5e5;background-image:none;"),$.push([E,A(L)]);for(let e of["::before","::after"]){let t=c.getComputedStyle(y,e);R||/^(?:none|normal)$/.test(t.content)||(E.setAttribute("data-snapshot",String(C)),M+=`[data-snapshot="${C}"]${e}{${A(b(t,g.of(y),I))}content:${t.content};}`)}if(R)return E;if(i?.(y))return r(y)||(E.textContent=a),E;if("textarea"===v)return E;for(let e of y.childNodes){if("picture"===v&&"img"!==e.localName)continue;let t=k(e,I);t&&E.append(t)}return E};try{await(s.fonts?.ready);let e=k(o),t=new Map(await Promise.all([...v].map(async([e,t])=>[e,await t]))),a=e=>e.replace(y,(e,a,n)=>t.has(n)?`url("${t.get(n)}")`:e);for(let[e,t]of $)e.setAttribute("style",a(t));M=a(M),await Promise.all(p);let n=s.createElement("div");n.setAttribute("style",`width:${u+32}px;height:${m+32}px;padding:16px;box-sizing:border-box;overflow:hidden;background:${function(e,t){for(let a=e.parentElement;a;a=a.parentElement){let e=t.getComputedStyle(a).backgroundColor;if(e&&!/^(?:transparent|rgba\(.*,\s*0\))$/.test(e))return e}return"#fff"}(o,c)}`);let r=s.createElement("style");r.textContent=await async function(e,t,a){let n=[],o=2e6,r=async(e,i)=>{for(let l of e){if(l.cssRules&&await r(l.cssRules,i),!l.cssText.startsWith("@font-face"))continue;let e=l.style,s=e.getPropertyValue("font-family").replace(/["']/g,"").trim().toLowerCase(),c=e.getPropertyValue("src").match(/url\((['"]?)(.*?)\1\)/)?.[2];if(!t.has(s)||!c||o<=0)continue;let h=await w(new URL(c,i).href,a).catch(()=>"");h&&(o-=h.length,n.push(`@font-face{font-family:"${s}";src:url("${h}");${["font-weight","font-style","font-stretch","unicode-range"].map(t=>e.getPropertyValue(t)?`${t}:${e.getPropertyValue(t)};`:"").join("")}}`))}};for(let t of e.styleSheets){let a;try{a=t.cssRules}catch{continue}await r(a,t.href??e.baseURI)}return n.join("")}(s,x,c)+M,n.append(r,e);let i={width:u+32,height:m+32},l=`<svg xmlns="http://www.w3.org/2000/svg" width="${i.width}" height="${i.height}"><foreignObject x="0" y="0" width="100%" height="100%">${(new XMLSerializer).serializeToString(n)}</foreignObject></svg>`,h=new Image;return h.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(l)}`,await h.decode(),{image:h,...i}}finally{g.dispose()}}var v=(e,t)=>new Promise((a,n)=>{try{e.toBlob(a,"image/webp",t)}catch(e){n(e)}});async function $(e,t={}){let a=t.maxBytes??g,n=e.ownerDocument.defaultView??window,o=e.offsetWidth||e.getBoundingClientRect().width,r=Math.min(n.devicePixelRatio||1,2,1200/(o+32)),i=await x(e,t.redact,r),l=document.createElement("canvas"),s=.8;for(let e=0;e<12&&i.width*r>=48;e++){l.width=Math.max(1,Math.round(i.width*r)),l.height=Math.max(1,Math.round(i.height*r));let e,t=l.getContext("2d");if(!t)throw new f("unsupported");t.drawImage(i.image,0,0,l.width,l.height);try{e=await v(l,s)}catch{throw new f("cross-origin")}if(!e||"image/webp"!==e.type)throw new f("unsupported");if(e.size<=a)return p(e);s>.5?s=Math.round(100*(s-.15))/100:r*=Math.min(.85,Math.max(.3,.95*Math.sqrt(a/e.size)))}throw new f("too-large")}var M={"cross-origin":"the element shows images from another origin","too-large":"the element is too large to draw",unsupported:"this browser can't encode WebP",failed:"it couldn't be drawn"},C=e=>`\x3c!-- komo: no image snapshot, ${M[e]}. --\x3e`;async function T(e,t,a=i){if(!e?.isConnected||u(e))return null;let n={},o=()=>m(e,t.redact,a-120);if(t.html&&(n.html=o()),t.image){await new Promise(e=>"function"==typeof requestIdleCallback?requestIdleCallback(e,{timeout:500}):setTimeout(e));try{n.image=await $(e,t)}catch(e){n.note=e instanceof f?e.reason:"failed","cross-origin"===n.note&&(n.html??=o()),n.html&&(n.html=C(n.note)+n.html)}}return n.image||n.html?n:null}var A=e=>{let[t,a]=e.split(","),n=atob(a),o=new Uint8Array(n.length);for(let e=0;e<n.length;e++)o[e]=n.charCodeAt(e);return new Blob([o],{type:t.slice(5,t.indexOf(";"))})},k=new WeakMap;function E(e,t,a,n,o){let r=k.get(e);if(!r){let o={...a,maxBytes:Math.min(a.maxBytes??g,n.maxImageBytes||1/0)};r=a.image||a.html?T(t(e),o,Math.min(i,n.maxHtmlBytes||1/0)).catch(()=>null):Promise.resolve(null),k.set(e,r)}return o&&r.then(async e=>{for(let t of["image","html"])e?.[t]&&await o(t,"image"===t?A(e.image):new Blob([e.html],{type:"text/html;charset=utf-8"})).catch(e=>console.info(`Palette: the comment posted without its ${t} snapshot.`,e instanceof Error?e.message:e))}),r}export{l as ATTRIBUTE_LIMIT,i as HTML_LIMIT,g as IMAGE_BYTES,e as OPT_OUT,a as PLACEHOLDER,s as TEXT_LIMIT,T as captureSnapshot,C as noteComment,u as skipped,E as snapshotFor,m as snapshotHtml,$ as snapshotImage};

package/dist/tag-editor-MMAMOEI4.js

@@ -1 +0,0 @@
-var e,t=12,n=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u,a='\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.tag-popover { position: fixed; z-index: 40; pointer-events: auto; width: 252px; box-sizing: border-box; padding: 8px; border-radius: 12px; background: #292929; color: #ddd; box-shadow: 0 0 0 1px #ffffff18, 0 12px 32px #0007; font-family: inherit; font-size: 12px; line-height: 1.4; overflow: auto; }\n.tag-popover .tag-input { box-sizing: border-box; width: 100%; height: 32px; padding: 0 9px; border: 1px solid #ffffff18; border-radius: 7px; outline: none; background: #ffffff07; color: #eee; font: inherit; }\n.tag-popover .tag-input:focus { border-color: #ffffff50; }\n.tag-popover .tag-input:focus-visible { outline: 2px solid var(--accent, #bda6ef); outline-offset: 1px; }\n.tag-popover .tag-input[aria-invalid=true] { border-color: #f28b82; }\n.tag-popover-choices { display: grid; gap: 2px; max-height: 200px; overflow: auto; margin-top: 6px; }\n.tag-popover-choice { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 32px; width: 100%; box-sizing: border-box; border: 0; padding: 6px 8px; border-radius: 7px; background: none; color: #ddd; font: inherit; text-align: left; cursor: pointer; }\n.tag-popover-choice:hover,.tag-popover-choice:focus-visible { background: #ffffff0d; outline: 1px solid #ffffff40; outline-offset: -1px; }\n.tag-popover-choice[aria-pressed=true] { color: var(--accent, #bda6ef); }\n.tag-popover-choice:disabled { opacity: .4; cursor: default; }\n.tag-popover-check { width: 14px; flex: none; }\n.tag-popover-label { min-width: 0; overflow-wrap: anywhere; }\n.tag-popover-note { color: #aaa; padding: 8px; font-size: 11px; }\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';function o(e){let t=e.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return n.test(t)?t:null}function r(t,n){if(n.trigger)return function(t,n,r){let i,l,d=[...n.tags],s=0,p=`komo-tag-popover-${Math.random().toString(36).slice(2)}`,c=(t=!1)=>{cancelAnimationFrame(s),l?.abort(),i?.remove(),i=void 0,r.setAttribute("aria-expanded","false"),e===g&&(e=void 0),t&&r.isConnected&&r.focus({preventScroll:!0})},g=()=>c(),u=()=>{let e=document.createElement("style");e.textContent=a;let n=document.createElement("div");n.className="tag-row",n.setAttribute("role","group"),n.setAttribute("aria-label","Tags");for(let e of d){let t=document.createElement("span");t.className="tag-chip",t.title=e,t.append(Object.assign(document.createElement("span"),{textContent:`#${e}`})),n.append(t)}t.replaceChildren(e,n),t.hidden=!d.length;let o=d.length?"Manage tags":"Add tag";r.title=o,r.setAttribute("aria-label",o)};r.setAttribute("aria-haspopup","dialog"),r.setAttribute("aria-controls",p),r.setAttribute("aria-expanded","false"),r.onclick=()=>{if(i)return c(!0);let a=t.getRootNode(),f=a instanceof ShadowRoot?a:document.body;e?.(),e=g,l=new AbortController;let m=l.signal;i=document.createElement("div"),i.className="tag-popover",i.id=p,i.setAttribute("role","dialog"),i.setAttribute("aria-label","Manage tags");let h=document.createElement("input");h.className="tag-input",h.type="search",h.placeholder="Search or create tag…",h.maxLength=33,h.autocomplete="off",h.setAttribute("aria-label","Search or create tag");let b=document.createElement("div");b.className="tag-popover-choices",b.setAttribute("role","group"),b.setAttribute("aria-label","Tag choices");let x=document.createElement("div");x.className="tag-popover-note",x.setAttribute("role","status"),i.append(h,b,x),f.append(i),r.setAttribute("aria-expanded","true");let v=(e,t=!1)=>{if(d.includes(e))d=d.filter(t=>t!==e),n.onRemove(e);else{if(!(d.length<12))return;d=[...d,e].sort(),n.onAdd(e)}t&&(h.value=""),u(),w(e),t&&h.focus({preventScroll:!0})},w=e=>{let t=h.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),a=o(h.value),r=[...new Set([...d,...n.suggestions])],i=r.filter(e=>e.includes(t)).sort((e,n)=>Number(d.includes(n))-Number(d.includes(e))||Number(n.startsWith(t))-Number(e.startsWith(t))||e.localeCompare(n));b.replaceChildren();let l=(t,n)=>{let a=document.createElement("button");a.type="button",a.className="tag-popover-choice",a.dataset.tag=t,a.setAttribute("aria-pressed",String(d.includes(t))),a.disabled=!d.includes(t)&&d.length>=12,a.append(Object.assign(document.createElement("span"),{className:"tag-popover-check",textContent:d.includes(t)?"✓":n?"+":""}),Object.assign(document.createElement("span"),{className:"tag-popover-label",textContent:`${n?"Create ":""}#${t}`})),a.addEventListener("click",()=>v(t,n)),b.append(a),e===t&&a.focus({preventScroll:!0})};i.forEach(e=>l(e,!1)),a&&!r.includes(a)&&l(a,!0),x.textContent=d.length>=12?"Maximum 12 tags. Remove one to add another.":b.children.length?`${d.length} of 12 tags selected`:t?"Use letters, numbers, spaces, . _ or -":"Type to create a tag"};h.addEventListener("input",()=>{h.removeAttribute("aria-invalid"),w()}),i.addEventListener("keydown",e=>{if(e.stopPropagation(),e.isComposing)return;let t=[...b.querySelectorAll("button:not(:disabled)")],n=a instanceof ShadowRoot?a.activeElement:document.activeElement;if("Escape"===e.key)e.preventDefault(),c(!0);else if("ArrowDown"===e.key||"ArrowUp"===e.key){e.preventDefault();let a=t.indexOf(n);("ArrowDown"===e.key?t[a+1]??h:a>0?t[a-1]:h)?.focus({preventScroll:!0})}else if("Enter"===e.key&&e.target===h){e.preventDefault();let t=o(h.value);t&&!d.includes(t)?v(t,!0):h.value.trim()&&!t&&h.setAttribute("aria-invalid","true")}});let y=e=>{let t=e.composedPath();!t.includes(i)&&!t.includes(r)&&c()};document.addEventListener("pointerdown",y,{capture:!0,signal:m}),document.addEventListener("focusin",y,{signal:m}),document.addEventListener("keydown",e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),c(!0))},{capture:!0,signal:m});let A=()=>{if(!r.isConnected||!t.isConnected)return c();let e=r.getBoundingClientRect();if(e.bottom<0||e.top>innerHeight)return c();let n=r.closest(".dialog")?.getBoundingClientRect(),a=Math.max(8,(n?.left??0)+8),o=Math.min(innerWidth-8,(n?.right??innerWidth)-8),l=Math.max(0,Math.min(252,o-a));i.style.width=`${l}px`,i.style.maxHeight=`${Math.max(80,innerHeight-16)}px`;let d=i.offsetHeight,p=innerHeight-e.bottom-8,g=d+6<=p||e.top<p?e.bottom+6:e.top-d-6;i.style.left=`${Math.max(a,Math.min(e.right-l,o-l))}px`,i.style.top=`${Math.max(8,Math.min(g,innerHeight-d-8))}px`,s=requestAnimationFrame(A)};w(),A(),h.focus({preventScroll:!0})},u()}(t,n,n.trigger);let r=[...n.tags],i=!1,l=!1,d=(...e)=>{l=!0,t.replaceChildren(...e),l=!1},s=`komo-tags-${Math.random().toString(36).slice(2)}`,p=null,c=0,g=()=>{cancelAnimationFrame(c),p?.remove(),p=null};!function e(u=!1){if(g(),t.hidden=!!n.trigger&&!r.length&&!i,n.trigger){let e=r.length?"Manage tags":"Add tag";n.trigger.title=e,n.trigger.setAttribute("aria-label",e),n.trigger.setAttribute("aria-expanded",String(i))}let f=document.createElement("style");f.textContent=a;let m=document.createElement("div");m.className="tag-row",m.setAttribute("role","group"),m.setAttribute("aria-label","Tags");for(let a of r){let o=document.createElement("span");o.className="tag-chip";let l=document.createElement("span");l.textContent=`#${a}`;let d=document.createElement("button");d.type="button",d.textContent="×",d.setAttribute("aria-label",`Remove tag ${a}`),d.addEventListener("pointerdown",e=>e.preventDefault()),d.addEventListener("click",()=>{let o=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement===d:document.activeElement===d,l=r.indexOf(a);r=r.filter(e=>e!==a),n.onRemove(a),e(i),o&&!i&&(t.querySelectorAll(".tag-chip button")[Math.min(l,r.length-1)]??n.trigger??t.querySelector(".tag-add"))?.focus()}),o.append(l,d),m.append(o)}if(i){let a=document.createElement("input");a.className="tag-input",a.placeholder="Add tag…",a.maxLength=33,a.autocomplete="off",a.setAttribute("role","combobox"),a.setAttribute("aria-label","Add tag"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-controls",s);let h=document.createElement("div");h.className="tag-options",h.id=s,h.setAttribute("role","listbox"),h.setAttribute("aria-label","Tags");let b=[],x=-1,v=t=>{!r.includes(t)&&r.length<12&&(r=[...r,t].sort(),n.onAdd(t)),i=r.length<12,e(i),i||n.trigger?.focus({preventScroll:!0})},w=e=>{x=e,h.querySelectorAll("[role=option]").forEach((t,n)=>{t.setAttribute("aria-selected",String(n===e)),n===e&&t.scrollIntoView?.({block:"nearest"})}),e>=0?a.setAttribute("aria-activedescendant",`${s}-${e}`):a.removeAttribute("aria-activedescendant")},y=()=>{let e=a.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),t=o(a.value),i=n.suggestions.filter(e=>!r.includes(e));b=(e?[...i.filter(t=>t.startsWith(e)),...i.filter(t=>!t.startsWith(e)&&t.includes(e))]:i).map(e=>({tag:e,create:!1})),t&&!r.includes(t)&&!i.includes(t)&&b.push({tag:t,create:!0}),h.replaceChildren(...b.map(({tag:e,create:t},n)=>{let a=document.createElement("div");return a.id=`${s}-${n}`,a.className="tag-option",a.setAttribute("role","option"),t&&a.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),a.append(Object.assign(document.createElement("span"),{textContent:`#${e}`})),a.addEventListener("click",()=>v(e)),a.addEventListener("pointermove",()=>w(n)),a})),b.length||h.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:e?r.includes(t??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),a.setAttribute("aria-expanded",String(b.length>0)),w(e&&b.length?0:-1)};a.addEventListener("input",y),a.addEventListener("keydown",t=>{if(t.stopPropagation(),!t.isComposing)if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),!b.length)return;let e=b.length-1;w("ArrowDown"===t.key?x>=e?0:x+1:x<=0?e:x-1)}else if("Enter"===t.key||","===t.key)if(t.preventDefault(),x>=0&&b[x])v(b[x].tag);else if(a.value.trim()){let e=o(a.value);e?v(e):a.setAttribute("aria-invalid","true")}else i=!1,e(),n.trigger?.focus({preventScroll:!0});else if("Escape"===t.key)t.preventDefault(),i=!1,e(),n.trigger?.focus({preventScroll:!0});else if("Backspace"===t.key&&!a.value&&r.length){let t=r.at(-1);r=r.slice(0,-1),n.onRemove(t),e(!0)}}),a.addEventListener("input",()=>a.removeAttribute("aria-invalid"));let A=!1;h.addEventListener("pointerdown",e=>{e.preventDefault(),A=!0}),a.addEventListener("blur",()=>{if(A)return A=!1,void requestAnimationFrame(()=>a.isConnected&&a.focus({preventScroll:!0}));l||!a.isConnected||!i||(i=!1,e())}),m.append(a),d(f,m);let E=t.getRootNode();(E instanceof ShadowRoot?E:document.body).append(h),p=h;let k=()=>{if(!a.isConnected)return g();let e=a.getBoundingClientRect(),t=h.offsetHeight,n=window.innerHeight-e.bottom-8,o=t+4<=n||e.top-8<n?e.bottom+4:e.top-4-t;h.style.top=`${Math.max(8,o)}px`,h.style.left=`${Math.max(8,Math.min(e.left,window.innerWidth-h.offsetWidth-8))}px`,c=requestAnimationFrame(k)};return y(),k(),void((u||i)&&a.focus({preventScroll:!0}))}if(!n.trigger&&r.length<12){let t=document.createElement("button");t.type="button",t.className="tag-add",t.textContent=r.length?"+":"+ Add tag",t.setAttribute("aria-label","Add tag"),t.addEventListener("click",()=>{i=!0,e(!0)}),m.append(t)}d(f,m)}()}export{t as MAX_TAGS,o as normalizeTag,r as tagEditor};

package/dist/thread-snapshot-HLTNHS4N.js

@@ -1 +0,0 @@
-import{E as e,G as t}from"./chunk-IQOPM3JF.js";var o=new WeakMap;function n(t){let n=o.get(t);n?.isConnected||(n=e("style","",'.komo-snapshot{display:block;width:fit-content;margin-top:8px;padding:0;border:0;border-radius:6px;background:none;color:inherit;font:inherit;cursor:zoom-in;line-height:0}\n.komo-snapshot img{display:block;width:72px;height:48px;border-radius:6px;object-fit:cover;object-position:left top;background:color-mix(in oklab,currentColor 8%,transparent);outline:1px solid color-mix(in oklab,currentColor 16%,transparent);outline-offset:-1px}\n.komo-snapshot:not([data-ready]){background:color-mix(in oklab,currentColor 8%,transparent)}\n.komo-snapshot:not([data-ready]) img{visibility:hidden}\n.komo-snapshot[hidden]{display:none}\n.komo-snapshot:focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}\n.komo-snapshot[data-large]{width:auto;max-width:100%}\n.komo-snapshot[data-large] img{width:auto;height:auto;min-width:72px;min-height:48px;max-width:100%;max-height:180px;object-fit:contain}\n.thread-item>.komo-snapshot{margin:6px 12px 0 calc(12px + var(--komo-avatar,20px) + var(--komo-gutter,8px))}\n.dialog:has(.thread-navigation:not([hidden]) .komo-snapshot-view) .message .komo-snapshot{display:none}\n.komo-snapshot-view{margin-top:8px}\n.komo-snapshot-view p{margin:0 0 6px}\n.komo-snapshot-code{box-sizing:border-box;max-height:160px;margin:0;padding:8px;overflow:auto;border-radius:6px;background:color-mix(in oklab,currentColor 8%,transparent);font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin}\n.komo-snapshot-code:focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}\n.komo-snapshot-text{justify-self:start;margin-top:8px;padding:4px 8px;border:0;border-radius:6px;background:color-mix(in oklab,currentColor 8%,transparent);color:inherit;font-family:inherit;font-size:11px;line-height:1.4;cursor:pointer}\n.komo-snapshot-draft{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#999}\n.komo-snapshot-draft .komo-snapshot{margin:0}\n.komo-snapshot-draft span{flex:1;min-width:0}\n.komo-snapshot-draft .icon{width:28px;height:28px}\n.komo-snapshot-viewer{box-sizing:border-box;max-width:min(1200px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:12px;overflow:hidden;border:0;border-radius:16px;background:#242424;color:#eee;box-shadow:inset 0 0 0 1px #ffffff1f,0 24px 64px -16px rgb(0 0 0/55%);font:12px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;pointer-events:auto;color-scheme:dark}\n.komo-snapshot-viewer[open]{display:flex;flex-direction:column;gap:8px;animation:komo-snapshot-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1))}\n.komo-snapshot-viewer::backdrop{background:rgb(0 0 0/40%);pointer-events:auto}\n.komo-snapshot-viewer header{display:flex;align-items:center;gap:8px}\n.komo-snapshot-viewer h2{flex:1;margin:0;padding-left:4px;font-size:13px;font-weight:600}\n.komo-snapshot-viewer .icon{width:28px;height:28px;border-radius:8px;color:#bbb}\n.komo-snapshot-viewer .icon:hover{background:#ffffff14;color:#eee}\n.komo-snapshot-viewer .icon:focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:-2px}\n.komo-snapshot-viewer img{display:block;min-height:0;max-width:100%;max-height:calc(100dvh - 104px);margin:auto;border-radius:8px;object-fit:contain}\n.komo-snapshot-viewer .komo-snapshot-code{max-height:calc(100dvh - 104px);width:min(720px,calc(100vw - 56px))}\n@keyframes komo-snapshot-in{from{opacity:0;scale:.98;translate:0 4px}}\n@media (prefers-reduced-motion:reduce){.komo-snapshot-viewer[open]{animation:none}}\n@media (pointer:coarse){.komo-snapshot-viewer .icon,.komo-snapshot-draft .icon{width:44px;height:44px}}'),o.set(t,n),t.append(n))}var a=20,r=[],i=0,s=[],p=0;function l(){let e=performance.now();for(;s.length&&e-s[0]>=6e4;)s.shift();for(;r.length&&i<2&&s.length<20;)i++,s.push(e),r.shift()();r.length&&!p&&s.length>=20&&(p=window.setTimeout(()=>(p=0,l()),6e4-(e-s[0])))}var d=new Map;function c(e,t){let o,n=t.token();try{o=new URL(e)}catch{return Promise.resolve(null)}if(!n||o.origin!==t.origin())return Promise.resolve(null);let a=`${n} ${e}`,s=d.get(a);if(s)return s;s=new Promise(e=>{r.push(()=>e(()=>(i--,l()))),l()}).then(async e=>{try{let e=await fetch(o,{headers:{Authorization:`Bearer ${n}`},credentials:"omit",signal:AbortSignal.timeout(15e3)});if(404===e.status)return null;if(!e.ok)throw new Error(String(e.status));return await e.blob()}finally{e()}}),d.set(a,s),s.catch(()=>d.get(a)===s&&d.delete(a));for(let e of d.keys())d.size>40&&d.delete(e);return s}var h,m=new WeakMap,f=new Map,u=new WeakSet,g="img[data-komo-snapshot]";function x(e){let t=m.get(e);!t||f.has(e)||!e.isConnected||c(t.url,t.context).then(o=>{if(!e.isConnected||f.has(e))return;if(!o)return t.done?.(!1);let n=URL.createObjectURL(o);f.set(e,n),e.src=n,t.done?.(!0)},()=>t.done?.(!1))}function b(e){h?h.observe(e):x(e)}function v(e){u.has(e)||(u.add(e),"function"==typeof IntersectionObserver&&(h??=new IntersectionObserver(e=>{for(let t of e)t.isIntersecting&&x(t.target)})),new MutationObserver(e=>{for(let t of e){for(let e of t.removedNodes)if(e instanceof Element)for(let t of e.matches(g)?[e]:e.querySelectorAll(g))t.isConnected||h?.unobserve(t);for(let e of t.addedNodes)if(e instanceof Element&&e.isConnected)for(let t of e.matches(g)?[e]:e.querySelectorAll(g))b(t)}!function(){for(let[e,t]of f)e.isConnected||(URL.revokeObjectURL(t),f.delete(e),e.removeAttribute("src"))}()}).observe(e,{childList:!0,subtree:!0}))}function k(e){for(let t of[...C.get(e)??[]])t();for(let[t,o]of f)t.getRootNode()===e&&(URL.revokeObjectURL(o),f.delete(t),t.removeAttribute("src"),h?.unobserve(t))}function w(e){let{context:t,text:o}=e.anchor,n=(t?.label||o||"").replace(/\s+/g," ").trim();return`Snapshot of ${n?`“${n.length>60?`${n.slice(0,59)}…`:n}”`:t?.tag?`the ${t.tag} element`:"the commented element"} when the comment was left`}var y=/^<!-- komo: (no image snapshot, [^>]*?)\.? -->\s*/;function L(e){let t=y.exec(e);return t?{note:`${t[1][0].toUpperCase()}${t[1].slice(1)}.`,code:e.slice(t[0].length)}:{note:"",code:e}}function S(t){let o=e("pre","komo-snapshot-code");return o.textContent=t,o.tabIndex=0,o.setAttribute("role","region"),o.setAttribute("aria-label","HTML snapshot"),o}var C=new Map;async function R(o,a,r){n(o);let i=o.activeElement,s=e("dialog","komo-snapshot-viewer");s.setAttribute("aria-modal","true"),s.setAttribute("aria-label",a.alt);let p=e("header"),l=t("Close snapshot",()=>h(),"icon","close");if(l.removeAttribute("title"),p.append(e("h2","",a.src?"Snapshot":"HTML snapshot"),l),s.append(p),a.src){let t=e("img");t.alt=a.alt,t.src=a.src,s.append(t),await t.decode().catch(()=>{})}else{let{note:t,code:o}=L(a.html??"");t&&s.append(e("p","",t)),s.append(S(o))}if(!o.host.isConnected)return r?.();let d=new AbortController,{signal:c}=d,h=()=>{c.aborted||(d.abort(),C.get(o)?.delete(h),s.close(),s.remove(),r?.(),i?.isConnected&&i.focus({preventScroll:!0}))};s.addEventListener("close",h,{signal:c}),C.set(o,(C.get(o)??new Set).add(h)),window.addEventListener("keydown",e=>{e.stopImmediatePropagation(),"Escape"===e.key&&(e.preventDefault(),h())},{capture:!0,signal:c});let m=!1,f=e=>{let t=s.getBoundingClientRect();return e.target===s&&(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom)};return s.addEventListener("pointerdown",e=>m=f(e),{signal:c}),s.addEventListener("click",e=>m&&f(e)&&h(),{signal:c}),o.append(s),s.showModal(),l.focus(),s}function A(t,o,n,a=!1,r){let i=w(o),s=e("img");s.alt=i,s.dataset.komoSnapshot="",s.decoding="async";let p=e("button","komo-snapshot");return p.type="button",p.setAttribute("aria-haspopup","dialog"),a&&(p.dataset.large=""),p.append(s),m.set(s,{url:t,context:n,done:e=>{e?p.dataset.ready="":p.dataset.ready||(r?r():p.hidden=!0)}}),p.addEventListener("click",()=>{c(t,n).then(e=>{if(!e)return;let t=URL.createObjectURL(e);R(n.root,{src:t,alt:i},()=>URL.revokeObjectURL(t))})}),p}function M(e,t,o){v(o),e.replaceWith(t);let n=t.querySelector(g);n?.isConnected&&b(n)}function E(o,a,r,i,s){let{image:p,html:l}=i.snapshot??{};if(n(a.root),3===r)return void s?.then(n=>{n&&(n.image||n.html)&&o.isConnected&&!a.dropped.has(i.anchor)&&M(o,function(o,n,a){let r=e("div","komo-snapshot-draft"),i=w({anchor:n});if(o.image){let t=e("button","komo-snapshot");t.type="button",t.dataset.ready="",t.setAttribute("aria-haspopup","dialog");let n=e("img");n.alt=i,n.src=o.image,t.append(n),t.addEventListener("click",()=>{R(a.root,{src:o.image,alt:i})}),r.append(t)}r.append(e("span","",o.image?o.html?"Snapshot and HTML attached":"Snapshot attached":"HTML snapshot attached"));let s=t("Remove snapshot",()=>{a.dropped.add(n),r.closest("form")?.querySelector("textarea")?.focus(),r.remove()},"icon","trash");return r.append(s),r}(n,i.anchor,a),a.root)});let d=r>1?(p||l)&&function(t,o){let{image:n,html:a}=t.snapshot,r=e("div","komo-snapshot-view"),i=()=>{if(!a)return r.remove();c(a,o).then(async t=>{if(!t)return r.remove();let{note:o,code:n}=L(await t.text());r.replaceChildren(e("p","",o||"How it looked, as HTML:"),S(n))},()=>r.remove())};return r.append(e("p","","How it looked:")),n?r.append(A(n,t,o,!0,i)):i(),r}(i,a):p?A(p,i,a):r&&l&&function(e,o,n){let a=t("HTML snapshot",()=>{c(e,n).then(async e=>{e&&R(n.root,{html:await e.text(),alt:w(o)})})},"komo-snapshot-text");return a.removeAttribute("title"),a.setAttribute("aria-haspopup","dialog"),a}(l,i,a);if(4===r){let t=e("div");t.append(function(t,o){let n=new URL(t.page,location.origin);n.searchParams.set("comment",t.id);let a=e("a","thread-route",t.page);a.href=n.href,a.addEventListener("click",e=>{e.preventDefault(),o.go(n)});let r=e("p","","Left on ");return r.append(a),r}(i,a),...d?[d]:[]),d=t}d&&M(o,d,a.root)}function U(e,t){t.notify("Remove this comment’s snapshot?",{label:"Remove",run:()=>{t.remove(e),t.notify("Snapshot removed")}})}export{a as READS_PER_MINUTE,U as confirmRemove,k as disposeSnapshots,E as mountSnapshot,R as openSnapshotViewer,c as readSnapshot,w as snapshotAlt,L as splitNote};

package/dist/token-custom-UCA6CBOV.js

@@ -1 +0,0 @@
-import{a as e,b as t}from"./chunk-3BVM3I52.js";import{E as o}from"./chunk-IQOPM3JF.js";var i=/^([+-]?(?:\d*\.)?\d+)([a-z%]*)$/i;function n(e){return e.filter(e=>!e.hidden).map(e=>[...e.inset?["inset"]:[],...e.lengths,e.color].filter(Boolean).join(" ")).join(", ")||"none"}var r=/^\s*((?:(?:italic|oblique|normal|small-caps|bold|bolder|lighter|[1-9]00)\s+)*)([+-]?(?:\d*\.)?\d+[a-z%]*)(?:\s*\/\s*((?:\d*\.)?\d+[a-z%]*|normal))?(?:\s+([\s\S]+?))?\s*$/i;function l(e){let t=r.exec(e);if(!t)return;let o=t[1].trim().split(/\s+/).filter(Boolean);return{style:o.filter(e=>/^(italic|oblique|small-caps)$/i.test(e)).join(" "),weight:o.find(e=>/^(bold|bolder|lighter|[1-9]00)$/i.test(e))??"",size:t[2],lineHeight:t[3]??"",family:t[4]??""}}function a(e){return[e.style,e.weight,e.size+(e.lineHeight?`/${e.lineHeight}`:""),e.family].filter(Boolean).join(" ")}var p=["px","%","rem","em","vw","vh","ch","vmin","vmax","dvh"];function d(e,t,i,n){let r=o("button","komo-typed__icon");return r.type="button",r.innerHTML=t,r.title=e,r.setAttribute("aria-label",e),void 0!==n&&r.setAttribute("aria-pressed",String(n)),r.onclick=i,r}function s(e,t,n,r,l,{unitless:a=!1,optional:d=!1}={}){let s=o("div","komo-typed__field"),f=o("span");t?f.textContent=t:f.innerHTML='<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M1 6h10M3 4 1 6l2 2M9 4l2 2-2 2"/></svg>',f.title=`${e} · drag to adjust`;let u=o("input");u.setAttribute("aria-label",e),u.inputMode="decimal",u.autocomplete="off",u.spellcheck=!1;let m=o("select");m.setAttribute("aria-label",`${e} unit`);let c=i.exec(n)??["","",""];u.value=c[1];let h=c[2]||(a||!c[1]&&d?"":"px");for(let e of new Set([h,...p,...a?[""]:[]])){let t=o("option","",e||"—");t.value=e,e||(t.title="No unit"),m.append(t)}m.value=h;let y=!1,g=e=>{let t=d&&!u.value.trim(),o=t||i.test(u.value.trim()+m.value);o?l.delete(u):l.add(u);let n=o&&r(t?"":u.value.trim()+m.value,e);return u.setAttribute("aria-invalid",String(!o)),e&&(y=!1),n},_=(e,t)=>{let o=i.exec(function(e,t){let o=i.exec(e.trim());if(!o)return e;let n=!o[2]||/^r?em$/i.test(o[2]);return`${Math.round(1e3*(parseFloat(o[1])+t*(n?.1:1)))/1e3}${o[2]}`}(u.value.trim()+m.value,e));o&&(u.value=o[1],g(t))};return u.oninput=()=>{y=!0,g(!1)},u.onkeydown=e=>{"Enter"===e.key?(e.preventDefault(),e.stopPropagation(),g(!0)):("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),_(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1),!0))},u.onblur=()=>{y&&g(!0)},m.onchange=()=>g(!0),f.onpointerdown=e=>{if(e.button)return;e.preventDefault(),f.setPointerCapture?.(e.pointerId);let t=e.clientX,o=!1;f.onpointermove=e=>{let i=Math.trunc((e.clientX-t)/2);i&&(t+=2*i,o=!0,_(i*(e.shiftKey?10:1),!1))},f.onpointerup=f.onpointercancel=()=>{f.onpointermove=f.onpointerup=f.onpointercancel=null,o?g(!0):u.focus()}},s.append(f,u,m),s}function f(r,p,f,u,m,c,h=[],y=()=>{}){let g=o("div","komo-typed"),_=o("details","komo-typed komo-typed__advanced"),x=o("summary","","Edit as CSS");x.onclick=e=>{e.preventDefault(),e.stopPropagation(),_.open=!_.open};let k=o("div","komo-typed__field");u.title=p,u.autocomplete="off",u.spellcheck=!1,k.append(o("span","","CSS"),u),_.append(x,k),r.append(g,_);let v=!1,b=new Set;u.oninput=()=>{v=!0,m(u.value,!1)&&S(u.value,!0)},u.onkeydown=e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),v=!1,m(u.value,!0))},u.onblur=()=>{v&&(v=!1,m(u.value,!0))};let w=(e,t,i,n,r,l)=>{let a=o("select","komo-typed__menu");a.setAttribute("aria-label",e);for(let[e,i]of t){let t=o("option","",i);t.value=e,t.title=e,l&&e&&(t.style[l]=e),a.append(t)}return a.value=i,a.onchange=()=>n(a.value),r&&a.addEventListener("komo-preview",e=>{let t=e.detail;y(null===t?void 0:r(t))}),a};function S(r,f=!1){if(f||(u.value=r),b.clear(),g.replaceChildren(),"font-family"===p){let e=o("div","komo-typed__sample"),i=o("b","","Aa"),n=o("span","",t(r));e.title=r,i.style.fontFamily=r,e.append(i,n),g.append(e);let l=h.filter(e=>"fontFamily"===e.type&&e.value&&CSS.supports(p,e.value));l.length?g.append(w("Font family choices",[[r,`Custom · ${t(r)}`],...l.map(e=>[e.value,e.label||t(e.value)])],r,e=>{m(e,!0)&&S(e)},e=>e,"fontFamily")):_.open=!0}else if(/^(box|text)-shadow$/.test(p)){let t=function(t,o="box-shadow"){if("none"===t)return[];let n=[];for(let r of e(t,!0)){let t=e(r),l=[],a="",p=!1,d=!1;for(let e of t)if("inset"!==e||"box-shadow"!==o||p)if(i.test(e)){if(d)return;l.push(e)}else{if(a||/var\(/i.test(e)||!CSS.supports("color",e))return;a=e,d=l.length>0}else p=!0;if(l.length<2||l.length>("box-shadow"===o?4:3))return;n.push({lengths:l,color:a,inset:p})}return n.length?n:void 0}(r,p);if(!t)return g.append(o("span","komo-typed__hint","Complex shadow · edit it as CSS below.")),void(_.open=!0);let l="box-shadow"===p,a=o("div","komo-typed__tile"),f=o("i","",l?"":"Ag");a.setAttribute("aria-hidden","true"),a.append(f);let u=e=>(f.style.setProperty(p,n(t)),m(n(t),e));f.style.setProperty(p,n(t));let c=o("div","komo-typed__head");c.append(o("b","","Layers"),d("Add shadow layer",'<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9"/></svg>',()=>{t.push({lengths:["0px","2px","4px","0px"].slice(0,l?4:3),color:"#00000040",inset:!1}),u(!0)&&S(n(t))})),g.append(a,c),t.forEach((e,i)=>{let r=`Layer ${i+1}`,a=o("div","komo-typed__layer");a.setAttribute("role","group"),a.setAttribute("aria-label",`Shadow layer ${i+1}`),a.toggleAttribute("data-hidden",!!e.hidden);let p=o("div","komo-typed__row");l&&p.append(w(`${r} type`,[["drop","Drop"],["inner","Inner"]],e.inset?"inner":"drop",t=>{e.inset="inner"===t,u(!0)}));let f=o("button","komo-typed__color");f.type="button",f.setAttribute("aria-label",`${r} color`),f.setAttribute("aria-expanded","false");let m=o("i"),c=o("span"),y=o("span","komo-typed__alpha");f.append(m,c,y);let _,x=()=>{let[t,o="100%"]=function(e){let t=document.createElement("i").style;t.color=e.trim(),t.color&&(e=t.color);let o=/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+)(%?))?\s*\)$/i.exec(e.trim());if(!o)return e||"currentColor";let i=`#${o.slice(1,4).map(e=>Math.round(Number(e)).toString(16).padStart(2,"0")).join("")}`,n=void 0===o[4]?1:Number(o[4])/(o[5]?100:1);return n<1?`${i} · ${Math.round(100*n)}%`:i}(e.color).split(" · ");m.style.setProperty("--c",e.color||"currentColor"),c.textContent=t.replace(/^#/,"").toUpperCase(),y.textContent=e.color?o:"",f.title=e.color||"currentColor"};x(),f.onclick=async()=>{if(_)return _.remove(),_=void 0,void f.setAttribute("aria-expanded","false");f.setAttribute("aria-expanded","true");let{pickerEditor:t}=await import("./color-editor-ATWWSENS.js");!f.isConnected||_||(_=t({trigger:f,tokens:h,property:"color",onSelect(){},custom:{value:e.color||"#000000",onPreview:()=>()=>{},onSelect(){}}},{preview(t){e.color=t,x(),u(!1)},commit(t){e.color=t,x(),u(!0)},token(t){e.color=t.value,x(),u(!0)}}),a.append(_))};let k=d(`${r} visible`,'<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/></svg>',()=>{e.hidden=!e.hidden,k.setAttribute("aria-pressed",String(!e.hidden)),a.toggleAttribute("data-hidden",!!e.hidden),u(!0)},!e.hidden);p.append(f,k,d(`Remove layer ${i+1}`,'<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8h9"/></svg>',()=>{t.splice(i,1),u(!0)&&S(n(t))}));let v=o("div","komo-typed__grid");[["X offset","X"],["Y offset","Y"],["Blur","Blur"],["Spread","Spread"]].slice(0,l?4:3).forEach(([t,o],i)=>v.append(s(`${r} ${t.toLowerCase()}`,o,e.lengths[i]||"0px",(t,o)=>{for(;e.lengths.length<=i;)e.lengths.push("0px");return e.lengths[i]=t,!b.size&&u(o)},b))),a.append(p,v),g.append(a)})}else if("font"===p){let e=l(r);if(!e)return g.append(o("span","komo-typed__hint","Custom expression · edit it as CSS below.")),void(_.open=!0);let i=o("div","komo-typed__sample"),n=o("b","","Aa"),p=o("span");i.setAttribute("aria-hidden","true"),i.append(n,p);let d=()=>{Object.assign(n.style,{fontStyle:e.style,fontWeight:e.weight,fontFamily:e.family}),p.textContent=[e.family?t(e.family):"Inherited family",e.weight,e.size+(e.lineHeight?`/${e.lineHeight}`:"")].filter(Boolean).join(" · ")},f=t=>(d(),m(a(e),t));d();let u=h.filter(t=>"fontFamily"===t.type&&t.value&&CSS.supports("font-family",t.value)&&t.value!==e.family),c=o("div","komo-typed__grid komo-typed__font");c.append(w("Font weight",[...new Set([e.weight||"400","100","200","300","400","500","600","700","800","900"])].map(e=>[e,e]),e.weight||"400",t=>{e.weight=t,f(!0)},t=>a({...e,weight:t}),"fontWeight"),s("Font size","Size",e.size,(t,o)=>(e.size=t,!b.size&&f(o)),b),s("Line height","LH",e.lineHeight,(t,o)=>(e.lineHeight=t,!b.size&&f(o)),b,{unitless:!0,optional:!0})),g.append(i,w("Font family",[[e.family,e.family?t(e.family):"Inherited family"],...u.map(e=>[e.value,e.label||t(e.value)])],e.family,t=>{e.family=t,f(!0)},t=>a({...e,family:t}),"fontFamily"),c)}else if(c?.values?.length)g.append(w(c.label,[...new Set([r,...c.values])].map(e=>[e,e]),r,e=>m(e,!0),e=>e));else{let t=e(r),n=/^(padding|margin|border-(width|radius)|gap)$/.test(p);if(t.length&&t.every(e=>i.test(e))&&(1===t.length||n&&t.length<=4)){let e=c?.label||p,i=1===t.length?[[e,""]]:"gap"===p?[["Row gap","Row"],["Column gap","Col"]]:"border-radius"===p?[["Top left","TL"],["Top right","TR"],["Bottom right","BR"],["Bottom left","BL"]]:[["Top","T"],["Right","R"],["Bottom","B"],["Left","L"]];if(t.length>1&&"gap"!==p){let[e,o=e,i=e,n=o]=t;t.splice(0,t.length,e,o,i,n)}let n=t.map((e,o)=>s(i[o][0],i[o][1],e,(e,i)=>(t[o]=e,!b.size&&m(t.join(" "),i)),b));if(n.length>1){let e=o("div","komo-typed__grid");e.append(...n),g.append(e)}else g.append(...n)}else g.append(o("span","komo-typed__hint","Custom expression · preserved exactly below.")),_.open=!0}}return S(f),S}function u(e,t){let{property:i}=e,n=e.custom.value,r=o("div","komo-custom"),a=o("div","komo-custom__body"),p=o("input");p.value=n,p.setAttribute("aria-label","CSS value");let d=!1,s=!1;r.append(o("style","",".komo-custom{display:flex;flex:1;flex-direction:column;min-height:0}.komo-custom__body{display:grid;gap:8px;padding:8px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.komo-typed{display:grid;gap:6px;min-width:0}.komo-typed__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.komo-typed__field,.komo-typed__color,.komo-typed__menu{display:flex;align-items:center;box-sizing:border-box;width:100%;min-width:0;height:28px;border-radius:6px;background:#ffffff0a;box-shadow:none;color:#f1efeb;font:inherit;font-size:11px}.komo-typed__field:hover,.komo-typed__color:hover,.komo-typed__menu:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.komo-typed__field:focus-within,.komo-typed__color:focus-visible,.komo-typed__menu:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-typed__field>span{flex:none;display:grid;place-items:center;min-width:24px;height:100%;padding:0 2px 0 6px;color:#77736f;font-size:10px;font-weight:500;cursor:ew-resize;user-select:none;touch-action:none}.komo-typed__field>span:hover{color:#e9e6e1}.komo-typed__field>span svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}.komo-typed__field input{flex:1;width:100%;min-width:0;height:100%;margin:0;padding:0 2px;border:0;border-radius:0;outline:0;box-shadow:none;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums}.komo-typed__field input:focus,.komo-typed__field input:focus-visible,.komo-typed__field select:focus,.komo-typed__field select:focus-visible{outline:0;box-shadow:none}.komo-typed__field select{flex:none;width:auto;max-width:44px;height:100%;margin:0;padding:0 8px 0 2px;border:0;border-radius:0 6px 6px 0;box-shadow:none;appearance:none;background:none;color:#77736f;font:inherit;font-size:10px;text-align:right;cursor:pointer}.komo-typed__field select:hover{color:#f1efeb}.komo-typed__menu{padding:0 20px 0 8px;border:0;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 7px center/8px no-repeat;cursor:pointer}.komo-typed [aria-invalid=true]{color:#f8a898}.komo-typed__layer{display:grid;gap:6px}.komo-typed__layer[data-hidden] .komo-typed__grid{opacity:.45}.komo-typed__row{display:flex;align-items:center;gap:4px;min-width:0}.komo-typed__row>.komo-typed__menu{flex:none;width:64px}.komo-typed__row>.komo-typed__color{flex:1;gap:6px;padding:0 6px}.komo-typed__color .komo-typed__alpha{flex:none;margin-left:auto;color:#898680;font-size:10px}.komo-typed button.komo-typed__icon{display:grid;place-items:center;flex:none;width:24px;padding:0}.komo-typed__icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.komo-typed__tile{display:grid;place-items:center;height:56px;border-radius:6px;background:repeating-conic-gradient(#ffffff0a 0 25%,#ffffff04 0 50%) 0 0/12px 12px}.komo-typed__tile i{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#f1efeb;color:#f1efeb;font-style:normal;font-size:20px;font-weight:600}.komo-typed__tile i:not(:empty){width:auto;height:auto;background:none}.komo-typed__layer+.komo-typed__layer{padding-top:8px;border-top:1px solid #ffffff0d}.komo-typed__head{display:flex;align-items:center;gap:2px;min-height:24px}.komo-typed__head b{flex:1;color:#b5b1ab;font-size:10px;font-weight:500}.komo-typed button:not(.komo-typed__color,.komo-color *){height:24px;padding:0 8px;border:0;border-radius:5px;background:none;color:#898680;font:inherit;font-size:10px;cursor:pointer}.komo-typed button:not(.komo-typed__color,.komo-color *):hover{background:#ffffff14;color:#f1efeb}.komo-typed button[aria-pressed=true]{background:#bda6ef24;color:#e6dcfb}.komo-typed button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.komo-typed__color{gap:8px;padding:0 8px;border:0;justify-content:flex-start;text-align:left;font-variant-numeric:tabular-nums;cursor:pointer}.komo-typed__color i{flex:none;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff26;background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#ffffff40 0 25%,#ffffff12 0 50%) 0 0/8px 8px}.komo-typed__color span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-typed .komo-color{padding:0}.komo-typed__sample{display:flex;align-items:center;gap:8px;min-width:0;height:36px;padding:0 8px;border-radius:6px;background:#ffffff08}.komo-typed__sample b{flex:none;font-size:20px;font-weight:400}.komo-typed__sample span{overflow:hidden;color:#b5b1ab;text-overflow:ellipsis;white-space:nowrap}.komo-typed__hint{color:#898680;font-size:10px;line-height:1.5}.komo-custom .komo-typed__advanced>summary{display:flex;align-items:center;height:auto;min-height:24px;color:#77736f;font-size:10px;font-weight:500;list-style:none;cursor:pointer}.komo-typed__advanced>summary::-webkit-details-marker{display:none}.komo-custom .komo-typed__advanced>summary:hover{color:#e9e6e1}.komo-typed__advanced>summary:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px;border-radius:4px}@media (max-width:520px){.komo-typed__font{grid-template-columns:minmax(0,1fr)}}@media (pointer:coarse){.komo-typed__field,.komo-typed__color,.komo-typed__menu{height:36px}.komo-typed button:not(.komo-typed__color,.komo-color *){height:32px}}"),a);let u=f(a,i,n,p,(e,o)=>{if(s)return!1;d=!0;let n=!!e.trim()&&(CSS.supports(i,e)||"font"===i&&!!l(e))&&!/[{};]/.test(e);return p.setAttribute("aria-invalid",String(!n)),!!n&&(p!==p.getRootNode().activeElement&&(p.value=e),o?t.commit(e):t.preview(e),!0)},e.custom?.field,e.tokens,e=>{s||t.hover?.(e)});return Object.assign(r,{live:!0,destroy(){s=!0},refresh(e){if(d)return;let{selectionStart:t,selectionEnd:o}=p;u(e),null!==t&&null!==o&&p.setSelectionRange(t,o)}})}export{u as pickerEditor};

package/dist/token-page-PGPWPUKU.js

@@ -1 +0,0 @@
-import{e,t,z as n}from"./chunk-IQOPM3JF.js";var o=(e,t)=>`${t??""} ${e}`,i=e=>e.replace(/→/g,"->").replace(/\s+/g," ").trim()||"(unset)";function r(t){let n=[];for(let o of Array.isArray(t?.themes)?t.themes:[])if(Array.isArray(o?.options)&&!(o.options.length<2))try{n.push(String(o.current(e())))}catch{}return n.length?n.join("+"):void 0}function a(t,n={}){let i,r=()=>!!n.before?.(),a=new Map,s=[],l=[],d="",p=o=>{let r=o.map(({path:e,value:t,theme:n,alias:o})=>({path:e,value:t,...n?{theme:n}:{},...o?{alias:o}:{}})),a=n.theme?.(),s=r.length?JSON.stringify([a,r]):"";if(s===d)return;let l=i;i=void 0,d=s;try{l?.()}catch{}if(r.length&&t.previewValues)try{i=t.previewValues(r,a,e())}catch{}},c=()=>p(r()?[]:[...a.values()]),g=e=>[...a].filter(([t])=>t!==e).map(([,e])=>e);return{get size(){return a.size},get canUndo(){return s.length>0},get steps(){return s},list:()=>[...a.values()],get:(e,t)=>a.get(o(e,t)),set(e){let t=o(e.path,e.theme),n=a.get(t);return(n?.to??e.from)!==e.to&&(s.push({key:t,edit:n}),l.length=0,e.to===e.from?a.delete(t):a.set(t,e),c(),!0)},preview:e=>(p(r()?[]:[...g(o(e.path,e.theme)),...e.to===e.from?[]:[e]]),c),undo(){let e=s.pop();e&&(l.push({key:e.key,edit:a.get(e.key)}),e.edit?a.set(e.key,e.edit):a.delete(e.key),c())},redo(){let e=l.pop();e&&(s.push({key:e.key,edit:a.get(e.key)}),e.edit?a.set(e.key,e.edit):a.delete(e.key),c())},reset(e,t){let n=o(e,t);a.delete(n);for(let e=s.length;e--;)s[e].key===n&&s.splice(e,1);c()},resetAll(){a.clear(),s.length=0,c()},sync:c,stop(){a.clear(),s.length=0,p([])}}}function s(e,t){if(e.length)return["Proposed token changes (preview only)",...e.map(e=>`Token: ${e.path}${e.theme?` (${e.theme})`:""} ${i(e.from)} → ${i(e.to)}`),`Token adapter: ${t}`].join("\n")}function l(e){return e.map(({path:e,theme:t,from:n,to:o})=>({kind:"token-value",path:e,...t?{theme:t}:{},from:n,to:o}))}var d={color:"color",dimension:"width",fontFamily:"font-family",fontWeight:"font-weight",lineHeight:"line-height",letterSpacing:"letter-spacing",shadow:"box-shadow",typography:"font",duration:"transition-duration"},p=e=>e.properties?.[0]??d[e.type]??"--token",c=".design-inspector[data-tokens] .design-inspector__identity{visibility:visible}.design-inspector[data-tokens] .design-inspector__controls{display:flex;flex-direction:column;place-items:stretch;overflow:hidden}.design-inspector[data-tokens] .design-inspector__parent{display:none}.design-inspector[data-tokens]>.design-inspector__bar:not(.design-token-bar),.design-inspector[data-tokens] .design-inspector__pending,.design-inspector:not([data-tokens])>.design-token-bar{display:none}.design-token-page{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;height:min(520px,calc(100dvh - 190px))}:host([data-sidebar=background]) .design-token-page{height:auto}.design-token-page>.komo-tokens__bar{flex:none;padding:0 12px 8px;background:none;border:0}.design-token-page>p{margin:0 12px 8px;color:#e7c27d;font-size:11px}.design-token-page>p[hidden]{display:none}.design-token-page__list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 8px 8px}.design-token-page__list small{position:sticky;top:0;z-index:1;display:block;padding:8px 8px 4px;background:#0d0d0d;color:#77736f;font-size:10px;font-weight:500}.design-token-page__list>p{margin:0;padding:12px 8px;color:#77736f}.design-token-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:2px;border-radius:7px}.design-token-row:hover{background:#ffffff0a}.design-token-row>button{border:0;background:none;color:inherit;font:inherit}.design-token-row>button:first-child{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;min-height:32px;padding:6px 8px;border-radius:7px;color:#d9d6d1;text-align:left}.design-token-row b{overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.design-token-row i{max-width:110px;overflow:hidden;color:#77736f;font-style:normal;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.design-token-row[data-changed] b{color:#e6dcfb}.design-token-row[data-changed]::before{content:'';position:absolute;top:calc(50% - 2px);left:-2px;width:4px;height:4px;border-radius:50%;background:#bda6ef}.design-token-row>button+button{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:5px;color:#77736f}.design-token-row>button+button:disabled{visibility:hidden}.design-token-row>button+button:hover{background:#ffffff14;color:#f1efeb}.design-token-row svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.design-token-row .komo-tokens{font-size:11px}@media (pointer:coarse){.design-token-row>button:first-child{min-height:44px}.design-token-row>button+button{width:32px;height:32px}}",g=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`,u=g("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"),h=g("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2"),f=new WeakMap;async function k(o,i){let l=await Promise.all([import("./token-picker-WMWUKLKJ.js"),import("./react-props-panel-4XO3NSX3.js"),import("./design-export-BNNHI4JP.js")]),d=f.get(o);d||f.set(o,d=function(o,i,[l,d,g]){let k=i.design?.tokens??d.cssVariableTokens(),m="function"==typeof k.previewValues,v=()=>o.hasAttribute("data-before"),y=a(k,{before:v,theme:()=>r(i.design)}),w=b("style");w.textContent=c,i.root.append(w),l.stylePicker(o);let x=b("section","design-token-page");x.setAttribute("aria-label","Tokens");let _=b("p","","No live preview · edits are recorded as proposals");_.hidden=m;let C=b("div","komo-tokens__bar"),A=b("input");A.type="search",A.placeholder="Search tokens",A.autocomplete="off",A.spellcheck=!1,A.setAttribute("aria-label","Search tokens"),C.append(A);let $=b("div","design-token-page__list");x.append(_,C,$);let L=(e,t)=>{let n=t.getBoundingClientRect(),i=o.getBoundingClientRect();i.left-16>e.offsetWidth?(e.style.left=i.left-8-e.offsetWidth/2+"px",e.style.top=`${n.top+(n.height-e.offsetHeight)/2}px`):i.top-16>e.offsetHeight&&(e.style.top=i.top-8-e.offsetHeight+"px")},E=b("div","design-inspector__bar design-token-bar"),S=b("span","design-inspector__count"),T=b("div","design-inspector__compare");T.setAttribute("role","group"),T.setAttribute("aria-label","Compare with the page");let M=["Before","After"].map((e,t)=>{let n=b("button","",e);return n.type="button",n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.addEventListener("click",()=>V(!t)),T.append(n),n}),P=b("p","design-inspector__status");P.setAttribute("role","status");let z=b("div","design-inspector__actions"),j=(e,t,n)=>{let o=b("button","design-inspector__tool");return o.type="button",o.dataset.tip=e,o.setAttribute("aria-label",e),o.innerHTML=t,o.addEventListener("click",()=>{V(!1),n(),F()}),o},N=j("Undo",h,()=>y.undo()),B=j("Reset all",u,()=>y.resetAll()),H=b("button","","Comment");H.type="button";let K=()=>s(y.list(),k.id),O=()=>{y.resetAll(),F()};H.addEventListener("click",()=>{let t=K();t&&(O(),i.onComment(e().document.body,t))}),z.append(N,B,H),E.append(S,T,P,z);let W,J=[],R=0,U=new Map;function V(e){e!==v()&&o.querySelectorAll(".design-inspector__bar:not(.design-token-bar) .design-inspector__compare button")[e?0:1]?.click(),y.sync(),q()}function q(){let e=y.size;S.textContent=e?`${e} change${e>1?"s":""}`:"",E.toggleAttribute("data-changes",e>0||y.canUndo),N.disabled=!y.canUndo,B.disabled=H.disabled=!e,T.hidden=!m||!e&&!v(),M.forEach((e,t)=>e.setAttribute("aria-pressed",String(!t===v()))),e?o.dataset.tokenEdits=String(e):delete o.dataset.tokenEdits,oe?.()}function F(){for(let e of U.values())e();q()}let I=e=>{let t=J.find(t=>t.path===e);return t?l.tokenLabel(t):e};function X(e,t){let n=r(i.design),o=y.get(e.path,n),a=e.alias?`{${e.alias}}`:e.value,s=(t,o)=>({path:e.path,value:t,from:a,to:o?`{${o}}`:t,...n?{theme:n}:{},...o?{alias:o}:{}}),d=e=>{y.set(e)&&F()},c=e.alias?J.filter(t=>t.type===e.type&&t.path!==e.path&&t.alias!==e.path):[];l.openTokenPicker({trigger:t,tokens:c,property:p(e),title:l.tokenLabel(e),current:o?o.alias:e.alias,onPreview:e=>y.preview(s(e.value,e.path)),onSelect:e=>d(s(e.value,e.path)),custom:{value:o?.value??e.value,onPreview:e=>y.preview(s(e)),onSelect:e=>d(s(e))}},!0)}let D=new Map;function Q(e){let t=()=>D.get(e.path)??e,n=b("div","design-token-row"),o=b("button");o.type="button",o.setAttribute("aria-haspopup","dialog");let a=b("b","",l.tokenLabel(e)),s=b("i"),d=b("button");d.type="button",d.title="Reset to page value",d.setAttribute("aria-label",`Reset ${e.path}`),d.innerHTML=u,n.append(o,d);let p=()=>{let e=t();a.textContent=l.tokenLabel(e);let p=y.get(e.path,r(i.design)),c=p?p.alias:e.alias,g=p?.value??e.value;s.textContent=c?I(c):g,o.replaceChildren(l.tokenPreview({...e,value:g}),a,s),o.dataset.tip=[e.path,e.ref,c?`${c} · ${g}`:g,e.description].filter(Boolean).join(" · "),o.setAttribute("aria-label",`${a.textContent}, ${s.textContent}${p?", edited":""}`),n.toggleAttribute("data-changed",!!p),d.disabled=!p};return o.addEventListener("click",()=>X(t(),o)),d.addEventListener("click",()=>{V(!1),y.reset(e.path,r(i.design)),F(),o.focus({preventScroll:!0})}),U.set(e.path,p),p(),n}let G="";function Y(){for(let e of J)D.set(e.path,e);let e=A.value.toLowerCase().split(/\s+/).filter(Boolean),t=new Map([["",[]]]);for(let n of J){let o=y.get(n.path,r(i.design))?.to??n.value,a=`${l.tokenLabel(n)} ${n.path} ${n.ref??""} ${o}`.toLowerCase();if(!e.every(e=>a.includes(e)))continue;let s=n.group??"";t.set(s,[...t.get(s)??[],n])}let n=JSON.stringify([...t].map(([e,t])=>[e,t.map(e=>e.path)]));if(n===G&&U.size)return F();G=n,U.clear(),$.replaceChildren();let a=0;for(let[e,n]of t){if(!n.length)continue;let t=$;if(e){t=b("div"),t.setAttribute("role","group");let n=b("small","",e);n.id="design-token-group-"+ ++a,t.setAttribute("aria-labelledby",n.id),t.append(n),$.append(t)}for(let e of n)t.append(Q(e))}U.size||$.append(b("p","",e.length?"No matching tokens":"No tokens"));let s=o.querySelector(".design-inspector__identity small");s&&(s.textContent=`${J.length} token${1===J.length?"":"s"}`),q()}async function Z(){let e=++R,t=[];try{t=await d.listTokens(k,d.themeState(i.design))}catch{P.textContent="Tokens unavailable · try again"}y.sync(),e===R&&x.isConnected&&(J=t,Y())}function ee(){W?.abort(),W=void 0,o.removeAttribute("data-tokens"),E.remove()}let te=new AbortController;new MutationObserver((e,t)=>{if("true"===o.getAttribute("aria-hidden")&&d.restoreThemes(o),o.isConnected)return y.sync(),q();t.disconnect(),te.abort(),ee(),y.stop(),oe?.(),w.remove(),f.delete(o)}).observe(o,{attributes:!0,attributeFilter:["data-before","aria-hidden"]}),i.root.addEventListener("komo-theme-change",()=>y.sync(),{signal:te.signal}),A.addEventListener("input",Y);let ne={open(){let e=o.querySelector(".design-inspector__controls");if(e){if(!x.isConnected){W=new AbortController;let{signal:r}=W;o.toggleAttribute("data-tokens",!0),e.replaceChildren(x),o.append(E);let a=o.querySelector(".design-inspector__target");a&&(a.textContent="Tokens");let s=new MutationObserver(()=>{x.isConnected||ee()});s.observe(e,{childList:!0}),r.addEventListener("abort",()=>s.disconnect(),{once:!0}),d.attachThemeSwitcher(x,i.design,()=>{Z()},i.root,r),i.root.addEventListener("komo-theme-change",()=>{Z()},{signal:r});let l=!1,p=e=>{l||g.footerTips(E,i.root,r,e),l=!0};E.addEventListener("pointerover",p,{signal:r}),E.addEventListener("focusin",p,{signal:r});let c=!1,u=e=>{c||g.footerTips($,i.root,r,e,L),c=!0};$.addEventListener("pointerover",u,{signal:r}),$.addEventListener("focusin",u,{signal:r});let h=e=>{let t=e.key.toLowerCase(),o=e.composedPath()[0];T.hidden||e.metaKey||e.ctrlKey||e.altKey||!["b","arrowleft","arrowright"].includes(t)||n(o)||"b"!==t&&o.matches?.("input,select,[role=slider],[role=radio]")||(e.preventDefault(),e.stopImmediatePropagation(),V("b"===t?!v():"arrowleft"===t))};document.addEventListener("keydown",h,{capture:!0,signal:r}),t("keydown",h,{capture:!0,signal:r}),Y(),Z()}globalThis.matchMedia?.("(pointer:coarse)")?.matches||A.focus({preventScroll:!0})}}},oe=i.link?.({get size(){return y.size},get steps(){return y.steps},undo(){y.undo(),F()},redo(){y.redo(),F()},reset:O,proposal:K,open:ne.open});return ne}(o,i,l)),d.open()}function b(e,t="",n){let o=document.createElement(e);return o.className=t,void 0!==n&&(o.textContent=n),o}export{k as openTokenPage,r as themeKey,a as tokenEdits,s as tokenProposal,l as tokenValueChanges};

package/dist/token-picker-WMWUKLKJ.js

@@ -1 +0,0 @@
-import{k as e,n as t}from"./chunk-AYGLN3MI.js";import{a as o,b as n,c as i}from"./chunk-4KEVPMJJ.js";import"./chunk-4FX5IS2U.js";import"./chunk-XOMOONGK.js";import{E as r}from"./chunk-IQOPM3JF.js";var l,s={font:"Typography","box-shadow":"Shadow","text-shadow":"Text shadow"},a=new WeakSet,d=0;function p(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}var c=(e,t,o)=>Math.min(o,Math.max(t,e));function f(e){let t=r("span","komo-tokens__pv");t.setAttribute("aria-hidden","true");let o=e=>{let o=r("span",`komo-tokens__${e}`);return t.append(o),o},n=e.value??"",{type:i}=e;if("color"===i){let e=o("sw"),t=r("span");u(n)?t.style.background=n:(t.dataset.unresolved="",t.textContent="?"),e.append(t)}else if("dimension"===i||"letterSpacing"===i){let i=function(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}(n);if(void 0===i)return t;let r=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),l=o(r?"corner":"dim");r?l.style.borderTopLeftRadius=`${c(i,0,12)}px`:l.style.width=`${c(i/2,2,24)}px`}else if("shadow"===i)o("shadow").style.boxShadow=n;else if("typography"===i||"fontWeight"===i||"fontFamily"===i){let e=o("ag");e.textContent="Ag","typography"===i?(e.style.font=n,e.style.fontSize="13px",e.style.lineHeight="1"):"fontWeight"===i?e.style.fontWeight=n:e.style.fontFamily=n}return t}function u(e){if(!e||/var\(/i.test(e))return!1;let t=r("span").style;return t.color=e,!!t.color}function m(e,o,n,i){let l=r("div");l.id=o,l.setAttribute("role","option"),l.setAttribute("aria-selected",String(n));let s=r("span","komo-tokens__name"),a=r("span","",p(e));s.append(a);let d=r("span","komo-tokens__check");d.setAttribute("aria-hidden","true");let c="color"===e.type&&!u(e.value),m=i.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]}),h=m.length>1?m.join(", "):e.value??"",g=r("span","komo-tokens__sub",[e.path,h].filter(Boolean).join(" · "));return g.setAttribute("aria-hidden","true"),l.append(f(e),s,d,g),l.setAttribute("aria-label",[e.label,t(e,h,c?"Unresolved; no swatch available":"")].filter(Boolean).join(" · ")),l}function h(e){let t=e.getRootNode();if((t instanceof ShadowRoot||t===document)&&!a.has(t)){a.add(t);let e=r("style");e.textContent=o+".komo-tokens{display:flex;flex-direction:column;overflow:hidden}.komo-tokens__head{flex:none;display:flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;color:#f1efeb;font-weight:500}.komo-tokens__back{display:grid;place-items:center;width:20px;height:20px;margin-left:-6px;padding:0;border:0;border-radius:5px;background:none;color:#898680;cursor:pointer}.komo-tokens__back:hover{background:#ffffff14;color:#f1efeb}.komo-tokens__back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.komo-tokens__bar{flex:none;display:flex;gap:4px;padding:0 8px 8px;background:#232323;border-bottom:1px solid #ffffff0d}.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:focus{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-tokens__widen{flex:none;height:28px;margin:0 4px 4px;padding:0 8px;border:0;border-radius:6px;background:none;color:#898680;font:inherit;text-align:left;cursor:pointer}.komo-tokens__widen:hover,.komo-tokens__more:hover{background:#ffffff0f;color:#f1efeb}.komo-tokens__more{flex:none;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:0;border-top:1px solid #ffffff0d;background:none;color:#d9d6d1;font:inherit;text-align:left;cursor:pointer}.komo-tokens__more b{margin-right:auto;font-weight:500}.komo-tokens__more i{flex:none;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff26;background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#ffffff40 0 25%,#ffffff12 0 50%) 0 0/8px 8px}.komo-tokens__more span{max-width:50%;overflow:hidden;color:#898680;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.komo-tokens [role=listbox]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px}.komo-tokens small:not(.komo-select *){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]:not(.komo-select *){display:grid;grid-template-columns:20px minmax(0,1fr) 14px;align-items:center;gap:4px 8px;box-sizing:border-box;min-height:32px;padding:6px 8px;border-radius:7px;cursor:pointer}.komo-tokens [data-active]{background:#ffffff14;color:#f1efeb}.komo-tokens [aria-selected=true] .komo-tokens__name{color:#e6dcfb}.komo-tokens__name{grid-column:2;min-width:0;font-weight:500}.komo-tokens__name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__sub{grid-column:2/4;display:none;min-width:0;overflow:hidden;color:#77736f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.komo-tokens [data-active] .komo-tokens__sub{display:block}.komo-tokens__check{grid-column:3;justify-self:center}.komo-tokens [aria-selected=true] .komo-tokens__check{width:7px;height:3.5px;margin-top:-3px;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__sw>[data-unresolved]{display:grid;place-items:center;background:#393939;color:#b6b1aa;font-size:10px}.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]:not(.komo-select *){min-height:44px}.komo-tokens__bar input,.komo-tokens__bar button{height:36px}}.komo-tokens__custom{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.komo-tokens__custom>.komo-custom{flex:none}.komo-tokens__custom .komo-custom__body{overflow:visible}.komo-tokens [hidden]{display:none!important}.komo-tokens button:focus-visible,.komo-tokens [role=listbox]:focus-visible{outline:1px solid #bda6ef;outline-offset:-2px}.komo-tokens[popover]{position:fixed;inset:auto;margin:0;border:0;padding:0}",(t instanceof ShadowRoot?t:document.head).append(e)}return t}function g(e,t){l?.trigger===e&&l.refresh(t)}function k(t,o=!1){let a=t.trigger.dataset.start;if(delete t.trigger.dataset.start,o&&l?.trigger===t.trigger)return l.close(!0);l?.close();let{trigger:f,property:u}=t,g=t.tokens,k=h(f),b="komo-tokens-"+ ++d,x=/color|^(fill|stroke)$/.test(u),v=r("div","komo-tokens");v.id=`${b}-popup`,v.setAttribute("role","dialog"),v.setAttribute("aria-label",`Edit ${u}`);let _=r("div","komo-tokens__head"),w=r("button","komo-tokens__back");w.type="button",w.setAttribute("aria-label","Back to tokens"),w.innerHTML='<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M7.5 2.5 4 6l3.5 3.5"/></svg>';let y=r("span","",t.title||t.custom?.field?.label||s[u]||u);_.append(w,y);let A=r("div","komo-tokens__bar"),E=r("input");E.type="text",E.placeholder="Search tokens",E.autocomplete="off",E.spellcheck=!1,E.setAttribute("role","combobox"),E.setAttribute("aria-expanded","true"),E.setAttribute("aria-controls",b),E.setAttribute("aria-autocomplete","list"),E.setAttribute("aria-label",`Search tokens for ${u}`);let $=r("div","komo-tokens__list");$.id=b,$.tabIndex=0,$.setAttribute("role","listbox"),$.setAttribute("aria-label",`Tokens for ${u}`);let S=e(g,u),C=!S.length,L=r("button","komo-tokens__widen");L.type="button",A.append(E);let M=r("button","komo-tokens__more");M.type="button";let T=r("i"),H=r("span");M.append(r("b","","Custom…"),T,H);let P=r("div","komo-tokens__custom");v.append(_,A,$,L,M),t.custom&&v.append(P);let j,z,I,N,B=()=>new Map(g.map(e=>[e,`${p(e)} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),R=B(),U=[],K=[],O=0,D=-1,W=$,F=-1,q=!1,J=!1,V=!1,G=()=>{let e=z;z=void 0,F=-1,e?.()},X=e=>{G(),I=e,z=t.custom?.onPreview(e)},Q=()=>{F<0||(G(),void 0!==I&&X(I))},Y=()=>!t.custom||!!S.length,Z=()=>{let e=Y()&&!V,o=C||E.value?g:S;$.hidden=A.hidden=!e,E.hidden=!e||!J&&o.length<=8&&!E.value,A.hidden||=E.hidden,L.hidden=!e||!!E.value||!S.length||S.length===g.length,L.textContent=C?"Show relevant tokens":`Show all ${g.length} tokens`,L.setAttribute("aria-pressed",String(C)),M.hidden=!e||!t.custom,P.hidden=e,w.hidden=!V||!Y(),y.textContent=V&&Y()?x?"Custom colour":"Custom value":t.title||t.custom?.field?.label||s[u]||u,v.toggleAttribute("data-custom",!e);let n=t.custom?.value??"",i=/^rgba?\((\d+)[ ,]+(\d+)[ ,]+(\d+)(?:[ ,/]+([\d.]+))?/.exec(n);H.textContent=x?i?i.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("").toUpperCase()+(i[4]&&+i[4]<1?` ${Math.round(100*+i[4])}%`:""):n.replace(/^#/,"").toUpperCase():n,T.hidden=!x||!n,T.style.setProperty("--c",n),M.title=n},ee=e=>{for(;O<Math.min(e,K.length);O++){let{token:e,group:o}=K[O];if(o!==j&&(j=o,W=$,o)){W=r("div"),W.setAttribute("role","group");let e=r("small");e.id=`${b}-g${O}`,e.textContent=o,W.setAttribute("aria-labelledby",e.id),W.append(e),$.append(W)}W.append(m(e,`${b}-${O}`,e.path===t.current,U))}},te=e=>$.querySelector(`#${b}-${e}`),oe=(e,o=!0,n=!0)=>{if(e<0||e>=K.length)return;if(e!==F&&n){G(),F=e;let o=K[e].token;o.path!==t.current&&(z=t.onPreview?.(o))}ee(e+60),te(D)?.removeAttribute("data-active"),D=e;let i=te(e);if(i.toggleAttribute("data-active",!0),E.setAttribute("aria-activedescendant",i.id),$.setAttribute("aria-activedescendant",i.id),!o)return;let r=i.offsetTop-(i.parentElement===$?0:i.parentElement.firstElementChild.offsetHeight),l=i.offsetTop+i.offsetHeight;r<$.scrollTop?$.scrollTop=r-4:l>$.scrollTop+$.clientHeight&&($.scrollTop=l-$.clientHeight+4)},ne=(e=!1,t=!1)=>{let o=t?K[D]?.token.path:void 0,n=$.scrollTop,i=t?O:60;F>=0&&G();let l=E.value.toLowerCase().split(/\s+/).filter(Boolean),s=C||l.length?g:S,a=l.length?s.filter(e=>l.every(t=>R.get(e).includes(t))):s,d=C?a:[...a.filter(e=>S.includes(e)),...a.filter(e=>!S.includes(e))],p=new Map([["",[]]]);for(let e of d){let t=e.group??"";p.set(t,[...p.get(t)??[],e])}if(K=[...[...p].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],$.replaceChildren(),$.scrollTop=0,O=0,D=-1,j=void 0,E.removeAttribute("aria-activedescendant"),$.removeAttribute("aria-activedescendant"),Z(),!K.length){let e=r("div","komo-tokens__empty",l.length?"No matching tokens":"No tokens");return void $.append(e)}ee(i),oe(Math.max(0,K.findIndex(e=>e.token.path===o)),!1,e),t&&($.scrollTop=n)},ie=new AbortController,{signal:re}=ie,le=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function se(e=!1,o=!1){if(l?.close!==se)return;l=void 0;let n=N?.live&&I;G(),n&&!o&&(t.custom?.onCommit??t.custom?.onSelect)?.(n),t.custom?.[o?"onCancel":"onDone"]?.(),ie.abort(),N?.destroy(),v.remove(),f.setAttribute("aria-expanded","false"),f.removeAttribute("aria-controls"),e&&f.isConnected&&f.focus({preventScroll:!0})}l={trigger:f,close:se,refresh(o){if(!o)return q||=F>=0,G();let n=q||F>=0;q=!1,t=o,g=o.tokens,S=e(g,u),R=B(),U=[],ne(n&&!V,!0),t.current&&t.custom&&N?.refresh(t.custom.value),F<0&&!z&&void 0!==I&&X(I),ve()}};let ae=e=>{G(),I=void 0,t.custom?.onCancel?.(),se(!0),e.path!==t.current&&t.onSelect(e)},de=t.custom?x?import("./color-editor-ATWWSENS.js"):import("./token-custom-UCA6CBOV.js"):void 0;function pe(e,o=!le){Q(),V=e,Z(),he="",ge(),V?async function(e){let o=await de;if(l?.close!==se)return;N||(N=o.pickerEditor(t,{preview:X,commit(e){if(!t.custom?.onCommit)return X(e);G(),I=void 0,t.custom.onCommit(e)},token:ae,hover(e){G(),void 0!==e?z=t.custom?.onPreview(e):void 0!==I&&X(I)}}),P.append(N)),he="",ge();let n=!!v.getClientRects().length,i=[...v.querySelectorAll("input,select,summary,button")].filter(e=>(!n||e.getClientRects().length)&&!e.closest("[hidden]")&&!e.matches("details:not([open]) :not(summary)"));e&&(i.find(e=>e instanceof HTMLInputElement&&P.contains(e))??i[0])?.focus({preventScroll:!0})}(o):o&&(E.hidden?M:E).focus({preventScroll:!0})}let ce=e=>{let t=K[e]?.token;t&&ae(t)};M.addEventListener("click",()=>pe(!0),{signal:re}),w.addEventListener("click",()=>pe(!1),{signal:re}),E.addEventListener("input",()=>ne(!0),{signal:re}),L.addEventListener("click",()=>{C=!C,ne(!0),le||(E.hidden?$:E).focus({preventScroll:!0})},{signal:re}),addEventListener("keydown",e=>{if(!f.isConnected)return se();let t=e.composedPath();if(!t.includes(v)&&!t.includes(f))return;let{key:o}=e,n={ArrowDown:1,ArrowUp:-1,PageDown:8,PageUp:-8}[o];if(!(e.ctrlKey||e.metaKey||e.altKey||"Escape"===o&&t[0]instanceof HTMLSelectElement&&t[0]!==f&&"true"===t[0].getAttribute("aria-expanded"))){if("Escape"===o)se(!0,!0);else if("Tab"===o){let o=[...v.querySelectorAll("button,input,select,summary,[tabindex='0']")].filter(e=>!e.closest("[hidden]")&&!e.matches("details:not([open]) :not(summary)")&&e.getClientRects().length);if(t[0]!==o[e.shiftKey?0:o.length-1])return;o[e.shiftKey?o.length-1:0]?.focus()}else if(t[0]===M&&"ArrowUp"===o&&K.length)$.focus({preventScroll:!0}),oe(K.length-1);else{if($.hidden||t[0]!==E&&t[0]!==f&&t[0]!==$)return;if(n>0&&t[0]===$&&D===K.length-1&&!M.hidden)Q(),M.focus({preventScroll:!0});else if(n)oe(c(D+n,0,K.length-1));else if("Home"!==o&&"End"!==o||t[0]===E)if("Enter"===o)ce(D);else{if(t[0]!==$||1!==o.length||" "===o)return;J=!0,E.value+=o,ne(!0),E.focus({preventScroll:!0})}else oe("Home"===o?0:K.length-1)}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:re}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(v)&&!t.includes(f)&&se()},{capture:!0,signal:re}),addEventListener("focusin",e=>{let t=e.composedPath();!t.includes(v)&&!t.includes(f)&&se()},{capture:!0,signal:re});let fe=e=>{e.target===$?$.scrollTop+$.clientHeight>$.scrollHeight-200&&ee(O+60):e.target instanceof Node&&v.contains(e.target)||se()};addEventListener("scroll",fe,{capture:!0,signal:re}),k.addEventListener("scroll",fe,{capture:!0,signal:re}),addEventListener("resize",()=>se(),{signal:re}),i(f,()=>se(),re),$.addEventListener("mousedown",e=>e.preventDefault(),{signal:re});let ue=e=>{let t=e.target.closest?.("[role=option]");return t&&$.contains(t)?Number(t.id.slice(b.length+1)):-1};$.addEventListener("pointermove",e=>{let t=ue(e);t>=0&&oe(t,!1)},{signal:re}),$.addEventListener("pointerleave",Q,{signal:re}),M.addEventListener("focusin",Q,{signal:re}),P.addEventListener("focusin",Q,{signal:re}),v.addEventListener("click",e=>{e.target instanceof HTMLInputElement||e.target instanceof HTMLSelectElement||e.target instanceof HTMLButtonElement||e.preventDefault();let t=ue(e);t>=0&&ce(t)},{signal:re}),ne();let me=f.closest(".design-field")??f.parentElement;v.popover="manual",me.append(v),v.showPopover?.(),me.addEventListener("komo-field-sync",()=>{z||!t.custom||(N?.refresh(t.custom.value),Z())},{signal:re}),f.setAttribute("aria-expanded","true"),f.setAttribute("aria-controls",v.id);let he="",ge=()=>{let e=me.getBoundingClientRect();if(he===`${e.left} ${e.top}`)return;he=`${e.left} ${e.top}`;let t=n(me),o=c(t.right-t.left-8,120,256),i=innerHeight-e.bottom-12,r=e.top-12;v.style.maxHeight="";let l=i<Math.min(460,Math.max(v.scrollHeight,200))&&r>i,s=Math.min(460,innerHeight-16,Math.max(l?r:i,200));v.style.width=`${o}px`,v.style.maxHeight=`${s}px`,v.style.left=`${c(e.left,t.left+4,t.right-o-4)}px`,v.style.top=l?"":`${Math.min(e.bottom+4,innerHeight-8-s)}px`,v.style.bottom=l?`${Math.min(innerHeight-e.top+4,innerHeight-8-s)}px`:"",v.toggleAttribute("data-up",l)};ge();let ke=new MutationObserver(ge);ke.observe(k,{attributes:!0,childList:!0,subtree:!0}),re.addEventListener("abort",()=>ke.disconnect());let be=K.findIndex(e=>e.token.path===t.current);be>=0&&oe(be,!0,!1),!Y()||"custom"===a&&t.custom?pe(!0):le||(E.hidden?$:E).focus({preventScroll:!0,focusVisible:!1});let xe=0;function ve(){let e=++xe;Promise.resolve(t.themes?.()).then(t=>{!t||t.length<2||l?.close!==se||e!==xe||(U=t,$.hidden||ne(F>=0,!0))},()=>{})}return ve(),()=>se()}export{k as openTokenPicker,g as refreshTokenPicker,h as stylePicker,p as tokenLabel,f as tokenPreview};