@hazem3500/komo 0.9.36 → 0.9.38

package/dist/chunk-4JLPHVWU.js

@@ -1 +0,0 @@
-import{a as e}from"./chunk-RPY7OOOR.js";function t(e){let t=new WeakMap,i=new WeakMap;return{begin(e,r){t.set(e,r)},override(e,r){let s=t.get(e);r&&s&&!s.bindingUndo&&!i.has(e)&&(s.bindingUndo=r)},commit(r,s,l,o){let n={value:s.style.getPropertyValue(l),priority:s.style.getPropertyPriority(l)},y=i.get(r),a=y?.before??t.get(r)??{value:"",priority:""};if(n.value!==a.value||n.priority!==a.priority||a.bindingUndo)if(y)y.after=n;else{let t={kind:"style",element:s,property:l,before:a,after:n};e.push(t),i.set(r,t)}else y&&e.splice(e.indexOf(y),1),i.delete(r);o&&(t.set(r,n),i.delete(r))},cancel(s,l,o){let n=i.get(s);n&&(r(l,o,n.before),n.before.bindingUndo?.(),e.splice(e.indexOf(n),1)),i.delete(s),t.delete(s)}}}function r(e,t,r){r?.restore?r.restore():e.style.setProperty(t,r?.value??"",r?.priority)}function i(e){if(/^#[\da-f]{6}$/i.test(e))return e;if(/^#[\da-f]{3}$/i.test(e))return`#${[...e.slice(1)].map(e=>e+e).join("")}`;let t=e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("")}`:"#000000"}function s(e,t){if(!t)return null;let r="",i=0,s=!1;for(let e of t)if(s)s=!1;else if("\\"===e)s=!0;else if(r)e===r&&(r="");else if('"'===e||"'"===e)r=e;else if("("===e)i++;else if(")"===e&&--i<0)return null;if(r||i||s)return null;let l=document.createElement("span").style;return l.setProperty(e,t),l.getPropertyValue(e)?t:null}function l(e,t){let r=e.getAttribute("style"),i=e.style.cssText,s=e.style.getPropertyValue(t),l=e.style.getPropertyPriority(t),n=getComputedStyle(e).getPropertyValue(t).trim(),y=r=>{let i=e.ownerDocument.createElement("span").style;return i.cssText=r,i.setProperty(t,""),i.cssText},a=y(i);return{value:s,priority:l,computed:n,restore(){y(e.style.cssText)===a?null===r?(e.getAttribute("style"),e.removeAttribute("style")):e.setAttribute("style",r):(e.style.setProperty(t,s,l),null===r&&!e.style.length&&o(e))}}}function o(e){e.style.length||(e.getAttribute("style"),e.removeAttribute("style"))}function n(t,r,i){if(!e(t))return()=>{};let s=t.style.getPropertyValue(r),l=t.style.getPropertyPriority(r),n=!t.hasAttribute("style");return t.style.setProperty(r,i,l),()=>{s?t.style.setProperty(r,s,l):t.style.removeProperty(r),n&&o(t)}}var y=new WeakMap;function a(e,t,r,i=!1,s=!1){let l=y.get(e);l&&(clearTimeout(l.timer),l.restore());let n=e.style.getPropertyValue("transition"),a=e.style.getPropertyPriority("transition"),u=!e.hasAttribute("style"),p=i?[...t].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join():"none";e.style.setProperty("transition",p,"important");let f=e.style.getPropertyValue("transition"),g=()=>{y.delete(e),e.style.getPropertyValue("transition")===f&&"important"===e.style.getPropertyPriority("transition")&&(n?e.style.setProperty("transition",n,a):e.style.removeProperty("transition"),(s||u)&&o(e))};r(),i?y.set(e,{restore:g,timer:window.setTimeout(g,320)}):(getComputedStyle(e).color,g())}export{t as a,r as b,i as c,s as d,l as e,o as f,n as g,a as h};

package/dist/chunk-MLH3Z6TW.js

@@ -1 +0,0 @@
-var t=t=>t&&"transparent"!==t&&!/(?:^rgba\([^)]*,|\/)\s*0(?:\.0+)?%?\s*\)$/.test(t);function e(e,o,r,n={left:0,top:0,right:innerWidth,bottom:innerHeight}){let a=Math.max(0,n.left,o.left),i=Math.max(n.top,o.top),l=Math.min(n.right,o.right),s=Math.min(n.bottom,o.bottom);if(l<=a||s<=i)return!1;let d="0px";if(r){let e=getComputedStyle(r),n=parseFloat(e.width);if("border-box"!==e.boxSizing)for(let t of["paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"])n+=parseFloat(e[t])||0;(!n||"inline"===e.display)&&(n=r.offsetWidth);let a=n?(o.right-o.left)/n:1;d=e.borderRadius.replace(/([+-]?[\d.]+(?:e[+-]?\d+)?)px/gi,(t,e)=>+e*a+"px");let i=o=>!["none","hidden"].includes(e.getPropertyValue(`${o}-style`))&&parseFloat(e.getPropertyValue(`${o}-width`))>0&&t(e.getPropertyValue(`${o}-color`));!/[1-9]/.test(d)&&!t(e.backgroundColor)&&(!e.backgroundImage||"none"===e.backgroundImage)&&!["border-top","border-right","border-bottom","border-left","outline"].some(i)&&(d=4*a+"px")}return Object.assign(e.style,{left:`${o.left}px`,top:`${o.top}px`,width:o.right-o.left+"px",height:o.bottom-o.top+"px",borderRadius:d,clipPath:`inset(${Math.max(n.top-o.top,-4)}px ${Math.max(o.right-n.right,-4)}px ${Math.max(o.bottom-n.bottom,-4)}px ${Math.max(Math.max(0,n.left)-o.left,-4)}px)`}),!0}function o(t,e,o,r,n){if(r.aborted)return;let a=t.ownerDocument,i=a.defaultView,l=0;function s(){l||r.aborted||!e().some(Boolean)||(l=i.requestAnimationFrame(()=>{l=0,o();for(let t of e())for(let e=t;e?.isConnected;e=e.parentElement)if(e.getAnimations?.().some(t=>"running"===t.playState))return void s()}))}let d=o=>o!==t&&!t.contains(o)&&e().some(t=>t&&(!t.isConnected||o.contains(t)||t.contains(o)||o instanceof Element&&o.closest("style"))),p=new MutationObserver(t=>{let o=e()[0];o&&!o.isConnected&&n?.(),t.some(t=>d(t.target))&&s()});p.observe(a.documentElement,{attributes:!0,childList:!0,characterData:!0,subtree:!0});for(let t of["transitionrun","animationstart"])a.addEventListener(t,t=>{t.target instanceof Node&&d(t.target)&&s()},{capture:!0,signal:r});r.addEventListener("abort",()=>{p.disconnect(),i.cancelAnimationFrame(l)},{once:!0})}export{e as a,o as b};

package/dist/design-comment-A5LYSE7M.js

@@ -1 +0,0 @@
-import{e}from"./chunk-ZJWJEB5S.js";import{f as t}from"./chunk-4JLPHVWU.js";import{a as n}from"./chunk-RPY7OOOR.js";var r=/^Proposed (.+?) changes? \(preview only\)$/,a={style:"Style changes","inline text":"Text change","design-token":"Token changes","React prop":"Prop changes"};function o(e){return e.split("\n").some(e=>r.test(e))}function i(e){try{return e.startsWith('"')?JSON.parse(e):e}catch{return e}}function s(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[,r,a,o,s]=n;return"inline text"===t?{label:"Text",before:i(a),after:i(o),apply:{kind:"text",property:"text"}}:"React prop"===t?{label:r,before:i(a),after:i(o),...s&&"custom value"!==s?{token:s}:{}}:{label:r,before:a,after:o,apply:{kind:"style",property:r}}}function l(e){let t=[];for(let n of e.split(/\n{2,}/)){let e=n.split("\n"),o=r.exec(e[0]??"");if(!o){n.trim()&&t.push({text:n.trim()});continue}let i=o[1],l={title:a[i]??`${i[0].toUpperCase()}${i.slice(1)} changes`,changes:[]};for(let t of e.slice(1))if(t.startsWith("Target: "))l.target=t.slice(8);else if(t.startsWith("Component: ")){let[,e,n]=/^(.*?)(?: \((.+)\))?$/.exec(t.slice(11));l.component=e,n&&(l.source=n)}else if(t.startsWith("Source: "))l.source=t.slice(8);else{let e=t.includes("→")?s(t,i):null;e&&e.before!==e.after&&l.changes.push(e)}l.changes.length?t.push(l):t.push({text:n.trim()})}return t}function d(e){let t=l(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),o=n.find(e=>e.target)?.target,i=`Design change · ${a} ${1===a?"edit":"edits"}${o?` on ${p(o)}`:""}`;return r?`${r}\n${i}`:i}function p(e){return(e.split(">").at(-1)??e).trim().replace(/:nth-of-type\(\d+\)/g,"")||e}var c=/^(#[0-9a-f]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\))$/i,f=new Map,g=new Set,u=new Set,m="Preview unavailable: the target or its text has changed.";function h(e){g.add(e),C(e);for(let t of u){if(t.dataset.previewKey!==e||!t.isConnected)continue;t.querySelectorAll("button").forEach((e,t)=>{e.setAttribute("aria-pressed",String(0===t)),1===t&&(e.disabled=!0)});let n=t.closest(".design-comment")?.querySelector('[role="status"]');n&&(n.textContent=m,n.hidden=!1)}}var y=new Map;function x(e){let t=y.get(e);t&&(clearTimeout(t.timer),y.delete(e),t.finish())}function b(r,a,o,i=!1){if(g.has(r))return!1;x(r);let s=[],l=[],d=[],p=!1;for(let c of a){let a=o(c.target);for(let o of c.changes)if(o.apply&&"(unset)"!==o.after)if("variable"===o.apply.kind){let e=document.documentElement,t=e.style.getPropertyValue(o.apply.property);e.style.setProperty(o.apply.property,o.after),s.push(()=>t?e.style.setProperty(o.apply.property,t):e.style.removeProperty(o.apply.property))}else if(n(a)&&"style"===o.apply.kind){let e=a.style.getPropertyValue(o.apply.property),n=a.style.getPropertyPriority(o.apply.property),r=!a.hasAttribute("style"),s=o.apply.property,p=()=>"(unset)"!==o.before&&(a.style.setProperty(s,o.before,"important"),!0);i&&p()&&getComputedStyle(a).getPropertyValue(s),a.style.setProperty(s,o.after,"important"),d.push(p),l.push(()=>{e?a.style.setProperty(o.apply.property,e,n):a.style.removeProperty(o.apply.property),r&&t(a)})}else if("text"===o.apply.kind){let t=a instanceof HTMLElement?e(a,o.before,o.after,()=>h(r)):void 0;t?s.push(t):p=!0}}if(p){for(let e of[...s,...l].reverse())e();return!1}return s.length+l.length&&f.set(r,{restore:s,restoreStyles:l,pinBefore:d}),s.length+l.length>0}var w,v=["color","background-color","border-color","outline-color","fill","stroke","box-shadow","text-decoration-color"],k="cubic-bezier(.22, 1, .36, 1)";function E(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)v.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:k})}if(!n.size)return;w&&(clearTimeout(w.timer),w.style.remove());let r=document.createElement("style");r.textContent=`*, *::before, *::after { transition-property: ${[...n].join(", ")} !important; transition-duration: 420ms !important; transition-timing-function: ${k} !important; transition-delay: 0s !important; }`,document.head.append(r),w={style:r,timer:setTimeout(()=>{r.remove(),w=void 0},480)}}function C(e,t=!1){x(e);let n=f.get(e);if(!n)return;f.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();y.set(e,{finish:r,timer:setTimeout(()=>x(e),480)})}function S(e){return f.has(e)||y.has(e)}function $(e=new Set){e.has("draft")||(A=void 0);for(let t of[...y.keys()])e.has(t)||x(t);for(let t of[...f.keys()])e.has(t)||C(t);for(let t of g)e.has(t)||g.delete(t)}function N(e){return"text"===e.apply?.kind||!(e.apply||e.token||c.test(e.before)||c.test(e.after))&&(/\s/.test(e.before+e.after)||e.before.length+e.after.length>32)}function P(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 O(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(c.test(e)){let t=document.createElement("span");t.className="design-swatch",t.style.background=e,n.append(t)}return n.append(e),n}function j(e,t,n){let r=l(t),a=r.filter(e=>"changes"in e),o=document.createElement("div");o.className="design-comment",o.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-toggle button:disabled { opacity: .45; cursor: not-allowed; }\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 i=document.createElement("p");i.className="design-source",i.setAttribute("role","status"),i.hidden=!g.has(n.key),i.textContent=m;let s=!!n.compact;s&&(o.dataset.compact="");let d=s?3:1/0,c=0,h=a.some(e=>e.changes.some(e=>e.apply)),y=[],x=()=>{let e=f.has(n.key);for(let t of y)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),o.append(t);continue}if(d<=0){c+=e.changes.length;continue}let t=document.createElement("section");t.className="design-card";let r=document.createElement("div");r.className="design-card-head";let l=document.createElement("div");l.className="design-card-label",l.append(Object.assign(document.createElement("span"),{className:"design-card-title",textContent:e.title}));let w=e.target?p(e.target):e.component;if(w){let t=Object.assign(document.createElement("span"),{className:"design-card-target",textContent:w});e.target&&(t.title=e.target),l.append(t)}if(r.append(l),h&&!y.length&&e.changes.some(e=>e.apply)){let e=document.createElement("div");e.dataset.previewKey=n.key,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`});1===t&&(o.disabled=g.has(n.key)),o.addEventListener("click",()=>{let e=1===t;if(e===f.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||E(a,n.resolve),e?(i.hidden=b(n.key,a,n.resolve,!o),i.textContent=m):C(n.key,!o),n.onSwitch&&setTimeout(n.onSwitch,o?0:480),x()}),e.append(o)}y.push(e);for(let e of u)e.isConnected||u.delete(e);u.add(e),r.append(e)}t.append(r);let v=document.createElement("div");v.className="design-rows";let k=4;e.changes.forEach((t,n)=>{if(d<=0)return void c++;s&&d--;let r=document.createElement("div");r.className="design-row",r.hidden=!s&&n>=k&&e.changes.length>k+1;let a=Object.assign(document.createElement("span"),{className:"design-prop",textContent:t.label});if(a.title=t.label,N(t))return r.classList.add("design-row-prose"),r.append(a,P(t.before,t.after)),void v.append(r);let o=document.createElement("span");o.className="design-values";let i=O(t.before);i.classList.add("design-before"),o.append(i,Object.assign(document.createElement("span"),{className:"design-arrow",textContent:"→"}),O(t.after,t.token)),r.append(a,o),v.append(r)}),t.append(v);let S=v.querySelectorAll("[hidden]").length;if(S){let e=Object.assign(document.createElement("button"),{type:"button",className:"design-more",textContent:`Show ${S} more`});e.addEventListener("click",()=>{v.querySelectorAll("[hidden]").forEach(e=>e.hidden=!1),e.remove()}),t.append(e)}e.source&&!s&&t.append(Object.assign(document.createElement("div"),{className:"design-source",textContent:e.source})),o.append(t)}c&&o.append(Object.assign(document.createElement("span"),{className:"design-source",textContent:`+${c} more`})),o.append(i),x(),e.replaceChildren(o),y.length&&(T||(T=!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=[...u].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 A,T=!1;function L(e,t,n){A!==t&&(C("draft"),g.delete("draft"),A=t,b("draft",l(t).filter(e=>"changes"in e),n)),j(e,t,{key:"draft",resolve:n,note:(e,t)=>e.append(t)})}export{o as isDesignComment,S as isPreviewing,l as parseDesignComment,j as renderDesignComment,L as renderDraftProposal,$ as resetDesignPreviews,p as shortTarget,d as summarizeDesignComment};

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

@@ -1 +0,0 @@
-import{c as e}from"./chunk-4KEVPMJJ.js";import{a as t,b as n,e as i,f as o,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 v,v as k,w as x,x as y,y as w,z as E}from"./chunk-UZLXJJJW.js";import{e as $,g as C}from"./chunk-4JLPHVWU.js";import{a as S}from"./chunk-RPY7OOOR.js";var A=new Map,P=new Map,M=new WeakMap,N=new Map,L=new WeakMap,T=!1;function z(e,t){let n=P.get(e);n?.delete(t),n?.size||P.delete(e)}function R(e,t,n){if(P.get(e)?.has(t))return{offToken:getComputedStyle(e).getPropertyValue(t).trim()};let i=J(e,t);return i?{path:i.path}:n}function j(e,t){return A.get(e)?.find(e=>e.property===t)?.inline}function q(e){let t={};for(let n of e?.themes??[])try{t[n.id]=n.current()}catch{}return t}function D(e,t={}){let n=L.get(e);n||L.set(e,n=new Map);let i=JSON.stringify(Object.entries(t).sort()),o=n.get(i);return o||(o=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):[]),o.catch(()=>n.delete(i)),n.set(i,o)),o}function O(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function V(e){let t,n=e.trim().toLowerCase().replace(/\s+/g," "),i=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(n)?.[1];if(i)t=(i.length<5?[...i].map(e=>e+e).join(""):i).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[o,r,a,s=1]=t.map((e,t)=>t>2?+e.toFixed(2):Math.round(e));return 1===s?`rgb(${o},${r},${a})`:`rgba(${o},${r},${a},${s})`}function B(e,t){let n=V(t);return n?e.find(e=>"string"==typeof e.value&&V(e.value)===n):void 0}function U(e){return e.label||e.path}function H(e){return[e.path,e.ref,e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function I(){let e=document.createElement("span");return e.className="design-token-off",e.setAttribute("role","img"),e}function _(e,t,n){e.title=`Not from a token · ${t||"unset"}${n?` · matches ${U(n)}`:""}`,e.setAttribute("aria-label",e.title)}function F(e,t,n,i){let o=S(t)?$(t,n):void 0;try{S(t)&&t.style.setProperty(n,"");let r=e.preview?e.preview(t,n,i):C(t,n,i.value),a=!0;return()=>{a&&(a=!1,r?.(),o?.restore())}}catch{throw o?.restore(),new Error("This token could not be previewed.")}}function J(e,t){if(!P.get(e)?.has(t))return[...A.get(e)??[]].reverse().find(e=>e.property===t)?.token}function W(e){let t=A.get(e),n=t?.pop();if(n?.undo(),n?.customBefore){let t=P.get(e);t||P.set(e,t=new Set),t.add(n.property)}else n&&z(e,n.property);t&&!t.length&&A.delete(e)}function K(e){return!!A.get(e)?.length}function Y(e){for(;A.has(e);)W(e);P.delete(e)}function X(e){return[...new Set(A.get(e)?.map(e=>e.property))].filter(t=>!P.get(e)?.has(t))}function Z(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 G(e){let t=[],n=new Set;for(let i of function(e){let t=new Map;for(let n of A.get(e)??[])t.set(n.property,n);return[...t.values()].filter(t=>!(P.get(e)?.has(t.property)||"path"in t.from&&t.from.path===t.token.path))}(e)){n.add(i.adapter.id);let o="path"in i.from?`${i.fromToken?.value?`${i.fromToken.value} `:""}[${i.from.path}]`:i.from.offToken||"(unset)";t.push(`Element ${i.property}: ${o} → ${i.token.value} [${i.token.path}]`);let r=Z(e,i);r&&t.push(`Apply: ${r}`)}if(t.length)return["Proposed design-token changes (preview only)",...t,`Token adapter: ${[...n].join(", ")}`].join("\n")}var Q=new Map,ee=new Map,te=new WeakSet,ne=new WeakMap;function ie(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var oe=new Map,re=e=>e.definition.source?`${e.definition.source}${e.definition.line?`:${e.definition.line}`:""}`:"";function ae(e){if(e)for(let[e,t]of Q){let n=i(e);n&&(oe.set(e,n.props),n.setProps({...n.props,...Object.fromEntries(t)}))}else for(let[e,t]of oe)i(e)?.setProps(t);e||oe.clear(),d(e),function(e){if(e!==T){T=e,e&&(N=new Map([...P].flatMap(([e,t])=>S(e)?[[e,new Map([...t].map(t=>[t,$(e,t)]))]]:[])));for(let[t,n]of A)if(e)for(let e of[...n].reverse())e.undo();else for(let e of n)e.inline?.restore(),e.undo=F(e.adapter,t,e.property,e.token);if(!e){for(let e of N.values())for(let t of e.values())t.restore();N.clear()}}}(e)}function se(e){return!!Q.get(e)?.size}function le(e){let t=i(e),n=t?.definition.textProp,o=t?.definition.props.find(e=>e.name===n);if(!t||!n||"string"!==o?.kind)return null;let r=t.props[n];if("string"!=typeof r||r.length>500)return null;let a=Q.get(e);return a||Q.set(e,a=new Map),a.has(n)||a.set(n,r),{propName:n,before:r}}function de(e,t,o){let r=i(e),a=r?.definition.props.find(e=>e.name===t);return!(!r||r.definition.textProp!==t||"string"!==a?.kind||o.length>500||!n(a,o))&&(r.setProps({...r.props,[t]:o}),!0)}function pe(e,t,n,i){if(n===i){let i=Q.get(e);return void(i?.get(t)===n&&!(ee.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||Q.delete(e)))}let o=ee.get(e);o||ee.set(e,o=[]),o.push({propName:t,before:n,after:i})}function ce(e,t,n){de(e,t,n);let i=Q.get(e);i?.get(t)===n&&!(ee.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||Q.delete(e))}function ue(e){return!!e&&!!ee.get(e)?.length}function fe(e){let t=Q.get(e),n=i(e);if(!t?.size||!n)return;let o=r(e),a=[...t].map(([e,t])=>{let i=n.definition.props.find(t=>t.name===e)?.styleProperty,r=n.props[e],a=i&&"string"==typeof r?o?.tokens.find(e=>e.properties.includes(i)&&r===`var(${e.cssVariable})`):void 0;return`- ${e}: ${ie(t)} → ${ie(r)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,...re(n)?[`Source: ${re(n)}`]:[],...a,"Runtime preview only; inline feedback does not write source files."].join("\n")}function ge(e,t){if(i(e))return null;let n;try{n=t?.components?.identify(e)}catch{}let r=o(e);return n?.name&&(!r||r.root!==n.element&&r.root.contains(n.element))?n:null}var me=e=>String(e).replace(/\s+/g," ").trim();function he(e,t){let n=Object.entries(q(t)).map(([e,t])=>`${me(e)}=${me(t)}`).join(", "),r=ge(e,t),a=i(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:re(s.component),props:{...t,...Object.fromEntries(Q.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])=>`${me(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,r?.name&&`Component: ${me(r.name)}${r.source?` (${me(r.source)})`:""}`,l.length&&`Props: ${l.join(", ")}`].filter(e=>!!e)}function be(e){return[fe(e),E(e),G(e)].filter(e=>!!e).join("\n\n")||void 0}function ve(e,t,n){ne.get(e)?.abort();let o=new AbortController;ne.set(e,o),e.addEventListener("click",e=>{let o=t();if(!o)return;let r=E(o)||K(o);!i(o)&&!r||(e.stopImmediatePropagation(),n(o,be(o)))},{capture:!0,signal:o.signal})}function ke(e){return k(e)}function xe(e){return v(e)||K(e)||function(e){return!!P.get(e)?.size}(e)}function ye(e){x(e)}function we(e){y(e),Y(e)}function Ee(e){if(!e||te.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-react-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:4px}.design-react-row>.design-react-field{flex:1;min-width:0;grid-template-columns:minmax(88px,.8fr) minmax(0,1fr);min-height:32px;gap:0 10px;margin-top:6px}.design-react-row .design-react-field>:is(input,select){height:32px}.design-react-row .design-react-field>span{white-space:normal;overflow-wrap:anywhere;line-height:1.4}.design-react-row>.design-theme-reset{flex:none;width:28px;height:28px;margin-top:6px}.design-react-row>.design-theme-reset[hidden]{display:none}.design-react-preview{font-size:10px;color:#8e8799}.design-react-group>.design-react-source:first-of-type{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.design-react-advanced{margin-top:10px}.design-react-advanced>summary{color:#898680;font-size:11px;cursor:pointer}.design-react-field input[readonly]{color:#aaa;background:#ffffff06;cursor:text}.design-react-row .design-react-field>input[type=checkbox]{width:16px;height:16px;margin:8px 0}.design-react-row .design-react-field:has(input[type=checkbox]){cursor:pointer}@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-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-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),te.add(e)}function $e(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false");let n,i=n=>import("./token-picker-TKKRI4FY.js").then(i=>{!e.isConnected||e.disabled||!n&&i.isTokenPickerOpen(e)||i.toggleTokenPicker({trigger:e,...t()})},()=>{});e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),n="mouse"===t.pointerType?void 0:t,!n&&(e.focus(),i(!0)))}),e.addEventListener("pointerup",e=>{n&&Math.abs(e.clientY-n.clientY)<=10&&i(!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(),i(!1))})}function Ce(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,i.textContent=a?`Matches ${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 Se(e,t,n,i){let o=r(e);if(!o)return null;let s=b(o,t);if(!s.length)return null;Ee(i);let l=document.createElement("span");l.className="design-token-binding",l.setAttribute("data-mode","custom");let d=document.createElement("span");d.className="design-token-icon",d.setAttribute("aria-hidden","true");let p=document.createElement("span");p.className="design-token-chip",p.setAttribute("aria-hidden","true");let f=document.createElement("button");f.type="button",f.className="design-token-detach",f.title="Detach token",f.setAttribute("aria-label",`Detach token from ${t}`),f.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 ${t}`);let k=document.createElement("small");k.className="design-token-binding__state",k.setAttribute("aria-live","polite");let x=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;k.id=x,v.setAttribute("aria-describedby",x);let y=document.createElement("option");y.value="custom",y.textContent="Custom value",v.append(y);for(let e of s){let t=document.createElement("option"),n=a(o,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,v.append(t)}let w=I(),E=e=>({path:e.path,type:e.type,value:a(o,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),$=Ce(null,l),S=e=>{v.value=e,v.dispatchEvent(new Event("change"))};$e(v,()=>({tokens:s.map(E),property:t,current:v.value,onPreview:n=>{let i=s.find(e=>e.path===n.path);return C(e,t,`var(${i.cssVariable})`)},onSelect:e=>S(e.path)}));let A=()=>{let n=g(o,e,t),i=n?null:m(o,e,t),r="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,a=r??i?.token;v.value=a?.path??"custom",p.textContent=a?.path??"";let d=n?.declaredPath,c=r?"token":i?"connected":d?"override":"custom";l.dataset.mode=c,l.parentElement?.setAttribute("data-token-mode",c),k.textContent="token"===c?d&&d!==r?.path?`Rebound from ${d} · preview`:`Linked to ${r?.path} · preview`:"connected"===c?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===c?`Custom override · was ${d}`:"",v.title=k.textContent||"Choose a token",w.hidden="custom"!==c;let u="custom"===c?getComputedStyle(e).getPropertyValue(t).trim():"",f="custom"===c?B(s.map(E),u):void 0;"custom"===c&&_(w,u,f),$.show(f,()=>f&&S(f.path))},P=new MutationObserver(A);P.observe(e,{attributes:!0,attributeFilter:["style"]});let M=new MutationObserver(()=>{l.isConnected||(P.disconnect(),M.disconnect())});return M.observe(l.ownerDocument,{childList:!0,subtree:!0}),v.addEventListener("change",()=>{let i=e.style.getPropertyValue(t),r=s.find(e=>e.path===v.value),a=g(o,e,t);if(r&&a&&r.path===a.declaredPath)h(o,e,t),n(i,e.style.getPropertyValue(t),r.path);else if(r)(r.path!==m(o,e,t)?.token.path||a)&&c(o,e,r,t,{recordHistory:!1})&&n(i,e.style.getPropertyValue(t),r.path);else{let r=l.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),a=/^-?[\d.]+$/.test(r.trim())&&!/weight|line/.test(t)?`${r.trim()}px`:r;u(o,e,t,a),e.style.setProperty(t,a),n(i,a)}A()}),f.addEventListener("click",()=>{let e=s.find(e=>e.path===v.value),t=l.parentElement?.querySelector("input[data-property]"),n=e&&a(o,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),v.value="custom",v.dispatchEvent(new Event("change")),l.parentElement?.querySelector("[data-property]")?.focus()}),l.append(p,v,d,f,w,k),queueMicrotask(A),A(),l}function Ae(e){let t=r(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...X(e)])}function Pe(e,t,n,i,o,r,a,s,l){let d=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}]:[]}),p=t=>{for(let{field:i,label:o,input:s}of d){if(o.querySelector(".design-token-binding")||!n.contains(o))continue;let l=t(i,o,s,()=>{r&&(s.value=r(i,e));let t=o.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===i.kind&&a?a(s.value):s.value)});l&&o.append(l)}},c=s?.tokens;if(!c)return void p((t,n,r,a)=>Se(e,t.property,e=>{i(t,r,e),a()},o));Ee(o);let u=function(e,t){let n,i=(Array.isArray(t?.themes)?t.themes:[]).find(e=>Array.isArray(e?.options)&&e.options.length>1&&e.options.length<4);if(i)return()=>n??=Promise.all(i.options.map(n=>D(e,{...q(t),[i.id]:n.id}).then(e=>({label:He(n.label,n.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(c,s);return Promise.all([D(c,q(s)),O(c,e)]).then(([t,n])=>{p((i,o,r,a)=>Me(c,e,i.property,t,n[i.property],e=>{l?.(e),a()},o,r,u,a))},()=>{})}function Me(e,t,n,i,o,r,a,s,l,d){let p=function(e,t){return e.filter(e=>e.properties?.includes(t))}(i,n);if(!p.length&&!o)return null;let c=function(e,t,n){let i=M.get(e);return i||M.set(e,i=new Map),(!i.has(t)||!A.has(e)&&!P.has(e))&&i.set(t,n),i.get(t)}(t,n,o),u=o&&"offToken"in o?o.offToken:void 0,f=void 0===u?void 0:B(p,u),g=document.createElement("span");g.className="design-token-binding";let m=document.createElement("span");m.className="design-token-chip",m.setAttribute("aria-hidden","true");let h=document.createElement("span");h.className="design-token-icon",h.setAttribute("aria-hidden","true");let b=document.createElement("button");b.type="button",b.className="design-token-detach",b.title="Edit the value",b.setAttribute("aria-label",`Edit ${n} value`),b.innerHTML='<svg viewBox="0 0 12 12"><path d="M5 3.5 6.5 2a2.1 2.1 0 0 1 3 3L8 6.5M7 8.5 5.5 10a2.1 2.1 0 0 1-3-3L4 5.5M2 2l8 8"/></svg>';let v=document.createElement("select");v.setAttribute("aria-label",`Style token for ${n}`),v.disabled=!p.length;let k=document.createElement("option");k.value="",k.textContent="Choose a token",v.append(k);let x=new Map([["",v]]);for(let e of p){let t=e.group??"",n=x.get(t);n||(n=document.createElement("optgroup"),n.label=t,x.set(t,n));let i=document.createElement("option");i.value=e.path,i.textContent=`${U(e)}${e.ref?` · ${e.ref}`:""}${e===f?" · same value":""}`,i.title=H(e),n.append(i)}for(let[e,t]of x)e&&v.append(t);let y=I();void 0!==u&&_(y,u,f);let w=document.createElement("small");w.className="design-token-binding__state",w.setAttribute("aria-live","polite");let E=!1,C=Ce(a,g),N=()=>{let e=R(t,n,o);return E?void 0:e&&"path"in e?e.path:void 0};$e(v,()=>({tokens:i,property:n,current:N(),themes:l,onPreview:i=>{let o=F(e,t,n,i);return d?.(),()=>{o(),d?.()}},onSelect:T}));let L=()=>{let e=J(t,n),r=N(),s=r?i.find(e=>e.path===r):void 0;v.value=r&&p.some(e=>e.path===r)?r:"",m.textContent=s?U(s):r??"";let l=r?e?"token":"connected":"custom";g.dataset.mode=l,(a??g.parentElement)?.setAttribute("data-token-mode",l),y.hidden=!!r;let d=R(t,n,o),c=d&&"offToken"in d?d.offToken:getComputedStyle(t).getPropertyValue(n).trim()||u||"",f=r?void 0:B(p,c);r||_(y,c,f),w.textContent=s?`${e?"Preview":"Uses"} ${H(s)}`:r?`Uses ${r}`:y.hidden?"":y.title,v.title=w.textContent||"Choose a token",C.show(y.hidden?void 0:f,()=>f&&T(f))};function T(o){E=!1;let a=c??{offToken:getComputedStyle(t).getPropertyValue(n).trim()},s="path"in a?i.find(e=>e.path===a.path):void 0;r(function(e,t,n,i,o,r){let a=A.get(t);a||A.set(t,a=[]);let s=a.find(e=>e.property===n),l=S(t)?$(t,n):void 0,d=P.get(t)?.has(n)??!1,p=F(e,t,n,i);return z(t,n),a.push({adapter:e,property:n,token:i,from:s?.from??o,fromToken:s?s.fromToken:r,undo:p,inline:l,customBefore:d}),()=>W(t)}(e,t,n,o,a,s)),L()}v.addEventListener("change",()=>{let e=p.find(e=>e.path===v.value);e?T(e):L()}),b.addEventListener("click",()=>{E=!0,L(),s?.focus()}),g.append(m,v,h,b,y,w);let j=new MutationObserver(L);j.observe(t,{attributes:!0,attributeFilter:["style","class"]});let q=new MutationObserver(()=>{g.isConnected||(j.disconnect(),q.disconnect())});q.observe(document,{childList:!0,subtree:!0});let D=a?.getRootNode();return D instanceof ShadowRoot&&q.observe(D,{childList:!0,subtree:!0}),L(),g}var Ne=!1;function Le(e,t,n,i){let o=r(e);if(!o||!o.tokens.length)return null;Ee(i);let a=document.createElement("details");a.className="design-group design-theme-group",a.open=Ne,a.addEventListener("toggle",()=>{a.isConnected&&(Ne=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 o.tokens){let t=e.path.split(".")[0];d.set(t,[...d.get(t)??[],e])}let p=o.tokens.length>6&&d.size>1;for(let[e,i]of p?d:new Map([["",o.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,a.append(t)}for(let r of i)a.append(Te(o,r,t,n,e))}return a}function Te(e,t,n,i,o){let r=document.createElement("div");r.className="design-theme-token";let d=document.createElement("span");d.textContent=o&&t.path.slice(o.length+1)||t.path,d.title=`${t.path} · ${s(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,o,r)=>{let a=null!==r&&l(e,t,r.trim(),f);n.setAttribute("aria-invalid",String(!a)),a&&(f=!0,v(),i())},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 i=a(e,t);m.value=i,h&&(h.value=n.toHex(i)),m.removeAttribute("aria-invalid"),v()},v=()=>{k.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(m.title=m.value)},k=document.createElement("button");return k.type="button",k.className="design-theme-reset",k.title="Reset to page value",k.setAttribute("aria-label",`Reset ${t.path}`),k.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>',k.addEventListener("click",()=>{p(e,t),b(),i()}),b(),r.append(d,g,k),r}function ze(e,t,n){let i=r(e);return i&&u(i,e,t,n),function(e,t){if(!M.get(e)?.has(t))return;let n=P.get(e),i=n?.has(t)??!1,o=M.get(e)?.get(t),r=!!J(e,t)||!!o&&"path"in o;return n||P.set(e,n=new Set),n.add(t),{priority:"important",...!i&&r?{undo:()=>z(e,t)}:{}}}(e,t)}function Re(e,t){let n=r(e);n&&f(n,e,t)}function je(e){let t=ee.get(e),n=t?.at(-1),o=i(e);if(!n||!o)return;let r=t.find(e=>e.propName===n.propName).before;t.pop(),o.setProps({...o.props,[n.propName]:n.before});let a=Q.get(e);a||Q.set(e,a=new Map),Object.is(r,n.before)?(a.delete(n.propName),o.releaseProps?.([n.propName])):a.set(n.propName,r),a.size||Q.delete(e)}function qe(){for(let e of[...Q.keys()])_e(e);Q.clear(),ee.clear(),w(),function(){for(let e of[...A.keys()])Y(e);P.clear(),N.clear()}(),Ue()}var De,Oe=new Map,Ve=new WeakMap;function Be(e){try{return String(e.current())}catch{return}}function Ue(e){for(let[e,t]of Oe)try{Be(e)!==t&&e.apply(t)}catch{}Oe.clear();let t=e?.querySelector(".design-theme-switch");t&&(Ve.get(t)?.(),t.remove())}var He=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function Ie(t,n,i,o){let r=t.closest(".design-inspector")?.querySelector(".design-inspector__heading"),a=(r??t).querySelector(".design-theme-switch"),s=a?.open??!1;a&&Ve.get(a)?.(),a?.remove();let l=document.createElement("details");l.className="design-theme-switch";let d=document.createElement("summary");d.setAttribute("aria-label","Preview theme");let p=document.createElement("div");p.className="design-theme-popup",p.setAttribute("role","group"),p.setAttribute("aria-label","Theme preview options"),l.append(d,p);let c,u=[],f=n?.themes;for(let e of Array.isArray(f)?f:[]){let t=Be(e),n=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||n.length<2)continue;let o=He(e.label,String(e.id));u.push(`${o}: ${He(n.find(e=>e.id===t)?.label,t)}`);let r=n=>{let o=Be(e);if(n!==o){Oe.has(e)||Oe.set(e,o??t),De=e;try{e.apply(n)}catch{}i()}},a=document.createElement(n.length>3?"label":"div");a.className="design-field design-react-field";let s,l=document.createElement("span");if(l.textContent=o,n.length>3){let e=document.createElement("select");for(let t of n)e.append(new Option(He(t.label,t.id),t.id));e.value=t,e.setAttribute("aria-label",`${o} theme`),e.addEventListener("change",()=>r(e.value)),s=e}else{s=document.createElement("div"),s.className="design-theme-options",s.setAttribute("role","group"),s.setAttribute("aria-label",`${o} theme`);for(let e of n){let n=document.createElement("button");n.type="button",n.textContent=He(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>r(e.id)),s.append(n)}}De===e&&(c=s.querySelector("[aria-pressed=true]")??s),a.append(l,s),p.append(a)}if(De=void 0,!p.childElementCount)return;d.textContent=u[0].split(": ").slice(1).join(": ")+(u.length>1?" +"+(u.length-1):""),d.title=`Preview theme · ${u.join(" · ")}`,l.open=s||!!c;let g=new AbortController,{signal:m}=g,h=()=>{l.open=!1};Ve.set(l,()=>{h(),g.abort()}),l.addEventListener("keydown",e=>{"ArrowDown"===e.key&&e.target===d&&(e.preventDefault(),l.open=!0,p.querySelector("button,select")?.focus())}),l.addEventListener("focusout",e=>{e.relatedTarget instanceof Node&&!l.contains(e.relatedTarget)&&h()}),Ee(o),r?r.insertBefore(l,r.querySelector(".design-inspector__close")):t.prepend(l),l.getRootNode().addEventListener("pointerdown",e=>{e.composedPath().includes(l)||h()},{capture:!0,signal:m}),l.ownerDocument.defaultView?.addEventListener("keydown",e=>{!l.open||"Escape"!==e.key||!e.composedPath().includes(l)||(e.preventDefault(),e.stopImmediatePropagation(),h(),d.focus())},{capture:!0,signal:m}),e(d,()=>{h(),d.isConnected||g.abort()},m),c?.focus({preventScroll:!0})}function _e(e){let t=Q.get(e),n=i(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),n.releaseProps?.([...t.keys()]),Q.delete(e),ee.delete(e))}function Fe(e,t,i,o,r,a){let s,l=t.definition.props.find(e=>e.name===i);if(!l||!n(l,o))return r.setAttribute("aria-invalid","true"),!1;r.removeAttribute("aria-invalid");try{let e=t.props;if(s=e[i],Object.is(s,o))return!0;t.setProps({...e,[i]:o})}catch{return r.setAttribute("aria-invalid","true"),r.title="Runtime preview is unavailable. The component kept its current props.",!1}let d=Q.get(e);d||Q.set(e,d=new Map);let p=d.has(i)?d.get(i):(ee.get(e)?.find(e=>e.propName===i)??{before:s}).before;Object.is(p,o)?(d.delete(i),t.releaseProps?.([i])):d.set(i,p),d.size||Q.delete(e);let c=ee.get(e);return c||ee.set(e,c=[]),c.push({propName:i,before:s,after:o}),a(()=>je(e)),!0}function Je(n,a,s,l,d,p){let c=i(n);if(!c){let e,i=ge(n,d);try{e=i&&d?.components?.editor?.(i)}catch{}if(e&&i&&S(i.element)){if(i.element!==n){Ee(s);let e=document.createElement("small");if(e.className="design-react-source design-react-group design-react-inside",e.append(`Inside ${i.name}`),l){let t=document.createElement("button");t.type="button",t.textContent="Select component",t.addEventListener("click",()=>l(i.element)),e.append(" · ",t)}return e}c=t(i,e)}if(!c){let e=null;try{e=i&&d?.components?.panel?.(i)||null}catch{}return e&&Ee(s),e??function(e,t,n){let i=o(e);if(!i)return null;Ee(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}(n,l,s)}}Ee(s);let u=document.createElement("details");u.className="design-group design-react-group",u.open=!0;let f=document.createElement("summary");f.textContent="Properties",u.append(f);let g=document.createElement("small");g.className="design-react-source",g.textContent=`${c.definition.name}${re(c)?` · ${re(c)}`:""}`,g.title=g.textContent,u.append(g);let m=document.createElement("small");m.className="design-react-source design-react-preview",m.textContent="Runtime preview · Undo or Reset to restore",u.append(m);let h=c,v=[];if(p&&c.subscribe){let t=0,n=!1,i=new AbortController,o=u.getRootNode(),r=()=>{t||!u.isConnected||(t=requestAnimationFrame(()=>{if(t=0,!u.isConnected)return;let e=u.getRootNode(),i=e.activeElement;v.forEach(e=>e()),!i?.closest(".design-inspector,.komo-tokens,.komo-select")&&!e.querySelector(".komo-tokens,.komo-select")&&(n=!1,p())}))},a=c.subscribe(()=>{n=!0,r()});(s??o).addEventListener("focusout",()=>{queueMicrotask(()=>{n&&r()})},{signal:i.signal});let l=()=>{a(),cancelAnimationFrame(t),i.abort()};queueMicrotask(()=>{u.isConnected?e(u,l,i.signal):l()})}for(let e of c.definition.props.filter(e=>"unsupported"!==e.kind)){let t=e.styleProperty,i=document.createElement("label");i.className="design-field design-react-field";let o=document.createElement("span");o.textContent=e.name;let s,l=c.props[e.name];if("enum"===e.kind){let t=document.createElement("select");for(let n of e.values??[]){let e=document.createElement("option");e.value=String(n),e.textContent=String(n),t.append(e)}if(void 0===l&&!e.required){let e=document.createElement("option");e.value="",e.textContent="unset",t.prepend(e)}t.value=void 0===l?"":String(l),s=t}else{let t=document.createElement("input");"boolean"===e.kind?(t.type="checkbox",t.checked=!0===l,t.indeterminate=void 0===l):"number"===e.kind?(t.type="number",t.step="any",t.value="number"==typeof l?String(l):""):(t.type="text",t.maxLength=500,t.autocomplete="off",t.value="string"==typeof l?l:""),s=t}if(s.setAttribute("aria-label",`${c.definition.name} ${e.name}`),"unsupported"===e.kind)s=document.createElement("input"),s.disabled=!0,s.value=`Read only · ${e.typeLabel}`,s.setAttribute("aria-label",`${c.definition.name} ${e.name}, read only`),i.title=`Inline feedback does not edit ${e.typeLabel} props.`;else{let t=()=>{let t=s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked:s.value,i=t;if("number"===e.kind)i=""===String(t).trim()?void 0:Number(t);else if("enum"===e.kind){let n=(e.values??[]).find(e=>String(e)===t);i=""!==t||e.required?n:void 0}else"boolean"===e.kind&&(i=!0===t);Fe(n,h,e.name,i,s,a)};s.addEventListener("change",t)}o.title=e.name,i.append(o,s);let d=document.createElement("div");d.className="design-react-row";let p=document.createElement("button");p.type="button",p.className="design-theme-reset",p.setAttribute("aria-label",`Reset ${c.definition.name} ${e.name}`),p.title="Restore the value before editing",p.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=()=>{p.hidden=!Q.get(n)?.has(e.name)};v.push(()=>{if(s===s.getRootNode().activeElement||"true"===s.getAttribute("aria-expanded"))return;let t=h.props[e.name];s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked=!0===t:s.value=null==t?"":String(t),f()}),s.addEventListener("change",f),p.addEventListener("click",()=>{let t=Q.get(n);if(!t?.has(e.name))return;Fe(n,h,e.name,t.get(e.name),s,a);let i=h.props[e.name];s instanceof HTMLInputElement&&"checkbox"===s.type?s.checked=!0===i:s.value=void 0===i?"":String(i),f(),s.focus()}),f(),d.append(i,p);let g=document.createElement("small");if(g.className="design-react-type",g.textContent=`${e.typeLabel}${e.required?" · required":" · optional"}`,i.append(g),i.title||=g.textContent,"string"===e.kind&&t){let o=r(n),l=o?b(o,t):[];if(l.length){let o=document.createElement("span");o.className="design-token-binding";let r=document.createElement("span");r.textContent="Style token";let d=document.createElement("select");d.setAttribute("aria-label",`Style token for ${e.name}`);let p=document.createElement("option");p.value="custom",p.textContent="Custom value",d.append(p);for(let e of l){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,d.append(t)}let u=()=>{let t=l.find(t=>c.props[e.name]===`var(${t.cssVariable})`);d.value=t?.path??"custom",o.dataset.mode=t?"token":"custom"};d.addEventListener("change",()=>{let i=l.find(e=>e.path===d.value),o=i?`var(${i.cssVariable})`:"string"==typeof c.props[e.name]&&String(c.props[e.name]).startsWith("var(")?n.ownerDocument.defaultView?.getComputedStyle(n).getPropertyValue(t).trim()??"":"string"==typeof c.props[e.name]?c.props[e.name]:"";Fe(n,c,e.name,o,s,a)&&u()}),o.append(r,d),i.append(o),u()}}u.append(d)}return u}export{Pe as attachStyleTokenControls,Ie as attachThemeSwitcher,le as beginReactTextEdit,ke as canUndoDesignTokenEdit,ue as canUndoReactProp,ce as cancelReactTextEdit,Me as createAdapterTokenControl,Le as createDesignThemePanel,Se as createElementTokenControl,Je as createReactPropsPanel,he as designContext,pe as finishReactTextEdit,xe as hasDesignTokenEdit,se as hasReactPropChanges,ve as installCommentCapture,ze as noteDesignTokenOverride,j as originalDesignTokenStyle,de as previewReactTextEdit,be as proposedDesignChanges,fe as proposedReactChanges,we as resetDesignTokenEdits,qe as resetPreviews,_e as resetReactProps,Ue as restoreThemes,ae as showDesignBefore,Re as syncDesignTokenBinding,Ae as tokenBoundProperties,ye as undoDesignTokenEdit,je as undoReactProp};

package/dist/token-picker-TKKRI4FY.js

@@ -1 +0,0 @@
-import{a as e,b as t,c as o}from"./chunk-4KEVPMJJ.js";import"./chunk-4JLPHVWU.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,P=()=>{let e=y;y=void 0,N=-1,e?.()},z=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,$))}},L=e=>b.querySelector(`#${u}-${e}`),M=(e,t=!0,o=!0)=>{if(e<0||e>=A.length)return;if(e!==N&&o){P(),N=e;let t=A[e].token;t.path!==l.current&&(y=l.onPreview?.(t))}z(e+60),L(S)?.removeAttribute("data-active"),S=e;let n=L(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)},j=(e=!1)=>{P();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)}z(60),M(0,!1,e)},H=new AbortController,{signal:R}=H,D=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function B(e=!1){n?.close===B&&(n=void 0,P(),H.abort(),k.remove(),p.setAttribute("aria-expanded","false"),p.removeAttribute("aria-controls"),e&&p.isConnected&&p.focus({preventScroll:!0}))}n={trigger:p,close:B};let O=e=>{let t=A[e]?.token;t&&(B(!0),t.path!==l.current&&l.onSelect(t))};h.addEventListener("input",()=>j(!0),{signal:R}),v.addEventListener("click",()=>{_=!_,j(!0),D||h.focus({preventScroll:!0})},{signal:R}),addEventListener("keydown",e=>{if(!p.isConnected)return B();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)B(!0);else{if("Tab"===o)return B();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;O(S)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:R}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(k)&&!t.includes(p)&&B()},{capture:!0,signal:R});let U=e=>{e.target===b?b.scrollTop+b.clientHeight>b.scrollHeight-200&&z(C+60):e.target instanceof Node&&k.contains(e.target)||B()};addEventListener("scroll",U,{capture:!0,signal:R}),m.addEventListener("scroll",U,{capture:!0,signal:R}),addEventListener("resize",()=>B(),{signal:R}),o(p,()=>B(),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&&O(t)},{signal:R}),j();let K=p.closest(".design-field")??p.parentElement;K.append(k),p.setAttribute("aria-expanded","true"),p.setAttribute("aria-controls",u);let F=K.getBoundingClientRect(),I=t(K),J=(k.offsetParent??K).getBoundingClientRect(),V=s(I.right-I.left-8,120,340),q=I.bottom-F.bottom-8,Y=F.top-I.top-8,G=q<240&&Y>q,Q=Math.min(320,Math.max(G?Y:q,120));if(k.style.width=`${V}px`,k.style.maxHeight=`${Q}px`,k.style.left=s(F.left,I.left+4,I.right-V-4)-J.left+"px",k.style.top=G?"":F.bottom+4-J.top+"px",k.style.bottom=G?J.bottom-F.top+4+"px":"",k.toggleAttribute("data-up",G),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,z(r),b.scrollTop=o,M(t,!1,!1)},()=>{}),()=>B()}export{c as isTokenPickerOpen,m as openTokenPicker,f as toggleTokenPicker,i as tokenLabel};