@hazem3500/komo 0.9.26 → 0.9.27

package/dist/chunk-MZE3O5EH.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-RPY7OOOR.js";var e=".komo-select,.komo-tokens{position:absolute;z-index:20;box-sizing:border-box;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up],.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select,.komo-tokens{animation:none}}";function o(e,o,r){if(!t(e))return()=>{};let n=e.style.getPropertyValue(o),i=e.style.getPropertyPriority(o);return e.style.setProperty(o,r,i),()=>{n?e.style.setProperty(o,n,i):e.style.removeProperty(o)}}function r(t){let e={top:0,left:0,bottom:innerHeight,right:innerWidth};for(let o=t.parentElement;o;o=o.parentElement)if(/auto|scroll|hidden/.test(getComputedStyle(o).overflowY)){let t=o.getBoundingClientRect();return{top:Math.max(t.top,0),left:Math.max(t.left,0),bottom:Math.min(t.bottom,e.bottom),right:Math.min(t.right,e.right)}}return e}function n(t,e,o){let r=t.getRootNode();r.addEventListener("komo-preview-cancel",e,{signal:o});let n=new MutationObserver(()=>{t.isConnected||e()});n.observe(document,{childList:!0,subtree:!0}),r instanceof ShadowRoot&&n.observe(r,{childList:!0,subtree:!0}),o.addEventListener("abort",()=>n.disconnect(),{once:!0})}export{e as a,o as b,r as c,n as d};

package/dist/design-comment-K2JCM7IT.js

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

package/dist/design-export-LA5VVR5Z.js

@@ -1 +0,0 @@
-import{j as e,k as t}from"./chunk-PLSWBSSX.js";function n(n){let i=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>`,o=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘-click":"Ctrl-click",s=e("p","design-inspector__pick-hint",`${o} inner target · Alt+↑ parent · Alt+↓ child`),r=e("div","design-inspector__empty"),a=e("ul"),p=(...t)=>{let n=e("li");t.forEach((t,i)=>n.append(i%2?e("kbd","",t):t)),a.append(n)};p("","Click"," to inspect"),p("",o," for an inner target"),p("","Alt+↑"," parent · ","Alt+↓"," child"),p("","Double-click"," text to edit"),n.exitKey?p("","Esc"," or ",n.exitKey," to exit"):p("","Esc"," to exit"),r.append(t("design"),e("strong","","Select an element"),a);let d=e("section","design-inspector__pending"),l=e("p"),c=(t,n)=>{let i=e("button","",t);return i.type="button",i.addEventListener("click",n),i},f=c("Review previous element",n.review),g=c("Copy pending proposals",async()=>{let e=n.proposals().filter(Boolean).join("\n\n");try{await navigator.clipboard.writeText(e),n.message("Pending proposals copied")}catch{n.message("Couldn't copy pending proposals. Try again.")}});return d.append(l,f,g,c("Reset all previews",n.reset)),{hint:s,empty:r,pending:d,icons:{undo:i("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2"),reset:i("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")},styles:'.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__compare { display:inline-flex; flex:none; padding:2px; border-radius:7px; background:#ffffff0a; }.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare { display:none; }.design-inspector__compare button { height:22px; padding:0 8px; border-radius:5px; color:#9a9a9a; font:inherit; font-size:11px; }.design-inspector__compare button:hover { color:#fff; }.design-inspector__compare button[aria-pressed="true"] { color:#fff; background:#ffffff1a; }.design-inspector__empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 24px 28px; color:#898680; font-size:11px; text-align:center; }.design-inspector__empty > svg { box-sizing:content-box; width:20px; height:20px; margin-bottom:8px; padding:8px; border-radius:10px; background:#ffffff0a; color:#77736f; }.design-inspector__empty strong { color:#e9e6e1; font-size:12px; font-weight:600; }.design-inspector__empty ul { display:grid; gap:6px; margin:8px 0 0; padding:0; list-style:none; }.design-inspector__empty kbd { display:inline-block; min-width:8px; padding:0 5px; border-radius:4px; background:#ffffff0f; box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px 0 #ffffff12; color:#c9c5bf; font:inherit; font-size:10px; font-weight:500; line-height:17px; }.design-inspector__pick-hint{flex:none;margin:0 12px 10px;color:#989898;font-size:10px;line-height:1.5}.design-inspector__pending{margin:12px;padding:12px;border:1px solid #ffffff1a;border-radius:10px;display:flex;flex-wrap:wrap;gap:8px}.design-inspector__pending[hidden]{display:none}.design-inspector__pending p{flex-basis:100%;margin:0 0 4px;color:#aaa;line-height:1.5}.design-inspector__pending button{min-height:32px;padding:6px 10px;border:1px solid #ffffff20;border-radius:7px;background:#ffffff08;font:inherit;color:inherit;cursor:pointer}',update(e,t){l.textContent=`${e} element${1===e?" has":"s have"} pending runtime previews. Undo, Reset or reload to restore.`,f.hidden=!t}}}function i(e){let t=[];for(let n=e;n;n=n.parentElement){let i=n.id&&!/^radix-|^:r|_r_|«r/.test(n.id)?`#${CSS.escape(n.id)}`:"";if(i&&1===document.querySelectorAll(i).length)return[i,...t].join(" > ");if(n===document.body||!n.parentElement)return[n.tagName.toLowerCase(),...t].join(" > ");let o=n===e?[...n.classList].slice(0,2).map(e=>`.${CSS.escape(e)}`).join(""):"",s=[...n.parentElement.children].filter(e=>e.tagName===n.tagName).indexOf(n)+1;t.unshift(`${n.tagName.toLowerCase()}${o}:nth-of-type(${s})`)}return t.join(" > ")}function o(e,t){return`${i(e)} {\n${[...t].map(([e,t])=>`  ${e}: ${t};`).join("\n")}\n}`}function s(e,t,n,o,s,r=[]){let a=[...t??[]].filter(([e])=>!o?.has(e)).map(([e,t])=>`- ${e}: ${n(e)||"(unset)"} → ${t}`),p=[a.length?`Proposed style changes (preview only)\nTarget: ${i(e)}\n${a.join("\n")}`:"",...s].filter(e=>!!e);if(p[0]&&r.length){let e=p[0].split("\n"),t=r.filter(t=>!t.startsWith("Component: ")||!e.some(e=>e.startsWith("Component: ")));e.splice(e[1]?.startsWith("Target: ")?2:1,0,...t),p[0]=e.join("\n")}return p.join("\n\n")||void 0}function r(t,n,i,o){if(i.aborted)return;let s=e("div","morphing-menu__tooltip sidebar-tooltip");s.setAttribute("aria-hidden","true"),n.append(s);let r=0,a=()=>{clearTimeout(r),delete s.dataset.open},p=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return a();clearTimeout(r),r=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();s.textContent=t.dataset.tip??"";let n=s.offsetWidth/2;s.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,s.style.top=e.top-8-s.offsetHeight+"px",s.dataset.open="true"},s.dataset.open?0:400)};t.addEventListener("pointerover",p,{signal:i}),t.addEventListener("focusin",p,{signal:i});for(let e of["pointerleave","pointerdown","focusout"])t.addEventListener(e,a,{signal:i});i.addEventListener("abort",()=>{a(),s.remove()}),("focusin"===o.type||t.matches(":hover"))&&p(o)}export{i as cssSelector,o as cssText,s as designProposal,r as footerTips,n as selectionViews};

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

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

package/dist/select-menu-QS4CXU6O.js

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

package/dist/token-picker-JANYJIL4.js

@@ -1 +0,0 @@
-import{a as e,c as t,d as o}from"./chunk-MZE3O5EH.js";import"./chunk-RPY7OOOR.js";var n,r=new WeakSet,a=0;function i(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function l(e){let t=/^(-?[\d.]+)(px|r?em)?$/.exec(e.trim());return t?parseFloat(t[1])*(t[2]?"px"===t[2]?1:16:1):void 0}var s=(e,t,o)=>Math.min(o,Math.max(t,e));function p(e){if(!e||/var\(/i.test(e))return!1;let t=document.createElement("span").style;return t.color=e,!!t.color}function d(e,t,o,n){let r=document.createElement("div");r.id=t,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(o));let a=document.createElement("span");a.className="komo-tokens__name";let d=document.createElement("span");d.textContent=i(e),a.append(d);let c=document.createElement("span");c.className="komo-tokens__check",c.setAttribute("aria-hidden","true");let f=document.createElement("span");f.className="komo-tokens__meta";let m="typography"===e.type?function(e){let t=e.trim().split(/\s+/);return[t.find(e=>/^(\d{3}|bold|bolder|lighter)$/.test(e)),t.find(e=>/^[\d.]+(px|r?em|pt|%)(\/\S+)?$/.test(e))].filter(Boolean).join(" · ")||e}(e.value??""):e.value??"",u="color"===e.type&&!p(e.value);for(let t of[e.ref,u?`Unresolved value · ${m||"not supplied"}`:m]){if(!t)continue;let e=document.createElement("span");e.textContent=t,f.append(e)}if(r.append(function(e,t){let o=document.createElement("span");o.className="komo-tokens__pv",o.setAttribute("aria-hidden","true");let n=e=>{let t=document.createElement("span");return t.className=`komo-tokens__${e}`,o.append(t),t},r=e.value??"",{type:a}=e;if("color"===a){let o=n("sw"),a=t.map(t=>t.values.get(e.path)).filter(e=>!!e);for(let e of new Set(a).size>1?a:[r]){let t=document.createElement("span");p(e)?t.style.background=e:(t.dataset.unresolved="",t.textContent="?"),o.append(t)}}else if("dimension"===a||"letterSpacing"===a){let t=l(r);if(void 0===t)return o;let a=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),i=n(a?"corner":"dim");a?i.style.borderTopLeftRadius=`${s(t,0,12)}px`:i.style.width=`${s(t/2,2,24)}px`}else if("shadow"===a)n("shadow").style.boxShadow=r;else if("typography"===a||"fontWeight"===a||"fontFamily"===a){let e=n("ag");if(e.textContent="Ag","typography"===a){e.style.font=r;let t=l(r.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${s(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===a?e.style.fontWeight=r:e.style.fontFamily=r}return o}(e,n),a,c,f),e.states?.length){let t=document.createElement("span");t.className="komo-tokens__states";for(let o of e.states){let e=document.createElement("i");e.textContent=o,t.append(e)}r.append(t)}if(e.description){let t=document.createElement("span");t.className="komo-tokens__desc",t.textContent=e.description,r.append(t)}let k=n.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return r.title=[e.label,e.path,e.ref,k.length>1?k.join(", "):e.value,u?"Unresolved color value; no swatch available":"",e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · "),r.setAttribute("aria-label",r.title),r}function c(e){return n?.trigger===e}function f(e){c(e.trigger)?n.close(!0):m(e)}function m(l){n?.close();let{trigger:p,tokens:c,property:f}=l,m=p.getRootNode();if((m instanceof ShadowRoot||m===document)&&!r.has(m)){r.add(m);let t=document.createElement("style");t.textContent=e+".komo-tokens{display:flex;flex-direction:column;overflow:hidden}.komo-tokens__bar{flex:none;display:flex;gap:4px;padding: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::placeholder{color:#77736f}.komo-tokens__bar input:focus{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-tokens__bar button{flex:none;height:28px;padding:0 8px;border:0;border-radius:6px;background:none;color:#898680;font:inherit;white-space:nowrap;cursor:pointer}.komo-tokens__bar button:hover{background:#ffffff0f;color:#f1efeb}.komo-tokens__bar button[aria-pressed=true]{background:#bda6ef24;color:#e6dcfb}.komo-tokens__bar button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.komo-tokens [role=listbox]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px}.komo-tokens small{position:sticky;top:0;z-index:1;display:block;padding:8px 8px 4px;background:#232323;color:#77736f;font-size:10px;font-weight:500}.komo-tokens [role=option]{display:grid;grid-template-columns:20px minmax(0,1fr) 14px;align-items:center;gap:4px 8px;box-sizing:border-box;min-height:48px;padding: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__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__meta,.komo-tokens__desc,.komo-tokens__states{grid-column:2/-1;min-width:0}.komo-tokens__meta{display:grid;gap:2px;color:#a5a19b;font-size:10px;font-variant-numeric:tabular-nums}.komo-tokens__meta span,.komo-tokens__desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__meta span+span,.komo-tokens__desc{color:#898680;font-size:10px}.komo-tokens__states{display:flex;flex-wrap:wrap;gap:4px}.komo-tokens__states i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 5px;border-radius:4px;background:#ffffff0a;color:#aaa69f;font-size:9px;font-style:normal}.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__hint{flex:none;padding:7px 10px;border-top:1px solid #ffffff0d;color:#aaa69f;font-size:10px}.komo-tokens__empty{padding:12px 8px;color:#77736f}@media (pointer:coarse){.komo-tokens{font-size:13px}.komo-tokens [role=option]{min-height:40px}.komo-tokens__bar input,.komo-tokens__bar button{height:36px}}",(m instanceof ShadowRoot?m:document.head).append(t)}let u="komo-tokens-"+ ++a,k=document.createElement("div");k.className="komo-tokens";let g=document.createElement("div");g.className="komo-tokens__bar";let h=document.createElement("input");h.type="text",h.placeholder="Search tokens",h.autocomplete="off",h.spellcheck=!1,h.setAttribute("role","combobox"),h.setAttribute("aria-expanded","true"),h.setAttribute("aria-controls",u),h.setAttribute("aria-autocomplete","list"),h.setAttribute("aria-label",`Search tokens for ${f}`);let b=document.createElement("div");b.id=u,b.setAttribute("role","listbox"),b.setAttribute("aria-label",`Tokens for ${f}`);let x=c.filter(e=>e.properties?.includes(f)),_=!x.length,v=document.createElement("button");if(v.type="button",v.textContent="Show all",v.title=`Show all ${c.length} tokens, not only ${f} tokens`,g.append(h),x.length&&x.length<c.length&&g.append(v),k.append(g,b),l.onPreview){let e=document.createElement("div");e.className="komo-tokens__hint",e.textContent="↑↓ preview · Enter to apply · Esc to cancel",k.append(e)}let w,y,E=new Map(c.map(e=>[e,`${i(e)} ${e.label??""} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),$=[],A=[],C=0,S=-1,T=b,N=-1,z=()=>{let e=y;y=void 0,N=-1,e?.()},L=e=>{for(;C<Math.min(e,A.length);C++){let{token:e,group:t}=A[C];if(t!==w&&(w=t,T=b,t)){T=document.createElement("div"),T.setAttribute("role","group");let e=document.createElement("small");e.id=`${u}-g${C}`,e.textContent=t,T.setAttribute("aria-labelledby",e.id),T.append(e),b.append(T)}T.append(d(e,`${u}-${C}`,e.path===l.current,$))}},P=e=>b.querySelector(`#${u}-${e}`),M=(e,t=!0,o=!0)=>{if(e<0||e>=A.length)return;if(e!==N&&o){z(),N=e;let t=A[e].token;t.path!==l.current&&(y=l.onPreview?.(t))}L(e+60),P(S)?.removeAttribute("data-active"),S=e;let n=P(e);if(n.toggleAttribute("data-active",!0),h.setAttribute("aria-activedescendant",n.id),!t)return;let r=n.offsetTop-(n.parentElement===b?0:n.parentElement.firstElementChild.offsetHeight),a=n.offsetTop+n.offsetHeight;r<b.scrollTop?b.scrollTop=r-4:a>b.scrollTop+b.clientHeight&&(b.scrollTop=a-b.clientHeight+4)},H=(e=!1)=>{z();let t=h.value.toLowerCase().split(/\s+/).filter(Boolean),o=_?c:x,n=t.length?o.filter(e=>t.every(t=>E.get(e).includes(t))):o,r=!t.length&&l.current?n.find(e=>e.path===l.current):void 0,a=new Map([["",[]]]);for(let e of n){if(e===r)continue;let t=e.group??"";a.set(t,[...a.get(t)??[],e])}if(A=[...r?[{token:r,group:"Current"}]:[],...[...a].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],b.replaceChildren(),b.scrollTop=0,C=0,S=-1,w=void 0,h.removeAttribute("aria-activedescendant"),v.setAttribute("aria-pressed",String(_)),!A.length){let e=document.createElement("div");return e.className="komo-tokens__empty",e.textContent=t.length?"No matching tokens":"No tokens",void b.append(e)}L(60),M(0,!1,e)},j=new AbortController,{signal:R}=j,D=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function O(e=!1){n?.close===O&&(n=void 0,z(),j.abort(),k.remove(),p.setAttribute("aria-expanded","false"),p.removeAttribute("aria-controls"),e&&p.isConnected&&p.focus({preventScroll:!0}))}n={trigger:p,close:O};let B=e=>{let t=A[e]?.token;t&&(O(!0),t.path!==l.current&&l.onSelect(t))};h.addEventListener("input",()=>H(!0),{signal:R}),v.addEventListener("click",()=>{_=!_,H(!0),D||h.focus({preventScroll:!0})},{signal:R}),addEventListener("keydown",e=>{if(!p.isConnected)return O();let t=e.composedPath();if(!t.includes(k)&&!t.includes(p))return;let{key:o}=e;if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)O(!0);else{if("Tab"===o)return O();if(t[0]!==h&&t[0]!==p)return;if("ArrowDown"===o||"ArrowUp"===o)M(s(S+("ArrowDown"===o?1:-1),0,A.length-1));else if("PageDown"===o||"PageUp"===o)M(s(S+("PageDown"===o?8:-8),0,A.length-1));else{if("Enter"!==o)return;B(S)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:R}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(k)&&!t.includes(p)&&O()},{capture:!0,signal:R});let U=e=>{e.target===b?b.scrollTop+b.clientHeight>b.scrollHeight-200&&L(C+60):e.target instanceof Node&&k.contains(e.target)||O()};addEventListener("scroll",U,{capture:!0,signal:R}),m.addEventListener("scroll",U,{capture:!0,signal:R}),addEventListener("resize",()=>O(),{signal:R}),o(p,()=>O(),R),b.addEventListener("mousedown",e=>e.preventDefault(),{signal:R});let W=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(u.length+1)):-1};b.addEventListener("pointermove",e=>{let t=W(e);t>=0&&M(t,!1)},{signal:R}),k.addEventListener("click",e=>{e.target!==h&&e.preventDefault();let t=W(e);t>=0&&B(t)},{signal:R}),H();let F=p.closest(".design-field")??p.parentElement;F.append(k),p.setAttribute("aria-expanded","true"),p.setAttribute("aria-controls",u);let I=F.getBoundingClientRect(),K=t(F),q=(k.offsetParent??F).getBoundingClientRect(),Y=s(K.right-K.left-8,120,340),Z=K.bottom-I.bottom-8,G=I.top-K.top-8,J=Z<240&&G>Z,Q=Math.min(320,Math.max(J?G:Z,120));if(k.style.width=`${Y}px`,k.style.maxHeight=`${Q}px`,k.style.left=s(I.left,K.left+4,K.right-Y-4)-q.left+"px",k.style.top=J?"":I.bottom+4-q.top+"px",k.style.bottom=J?q.bottom-I.top+4+"px":"",k.toggleAttribute("data-up",J),l.current){let e=A.findIndex(e=>e.token.path===l.current);e>=0&&M(e,!0,!1)}return D||h.focus({preventScroll:!0}),Promise.resolve(l.themes?.()).then(e=>{if(!e||e.length<2||n?.trigger!==p)return;$=e;let t=S,o=b.scrollTop,r=C;b.replaceChildren(),C=0,w=void 0,L(r),b.scrollTop=o,M(t,!1,!1)},()=>{}),()=>O()}export{c as isTokenPickerOpen,m as openTokenPicker,f as toggleTokenPicker,i as tokenLabel};