@hazem3500/komo 0.9.38 → 0.9.40

package/dist/chunk-CIOHAE5J.js

@@ -1 +0,0 @@
-import{e,g as t}from"./chunk-WNJLJD4A.js";import{a as r}from"./chunk-RPY7OOOR.js";var n=new Map,o=new Map,a=new WeakMap,s=new WeakMap,i=new Map,f=new WeakMap,l=!1;function p(e,t){let r=o.get(e);r?.delete(t),r?.size||o.delete(e)}function u(t,i,f,l,p){let u=a.get(t);if(u||a.set(t,u=new Map),(!u.has(i)||!n.has(t)&&!o.has(t))&&(u.set(i,f),r(t))){let r=s.get(t);r||s.set(t,r=new Map);let n=e(t,i),o={adapter:l,style:n,token:void 0};o.style={...n,get computed(){return o.token?.value??n.computed}},r.set(i,o)}return d(t,l,p),u.get(i)}function c(e,t){return e?a.get(e)?.get(t):void 0}function d(e,t,r){for(let[n,o]of s.get(e)??[]){if(o.adapter!==t)continue;let a=c(e,n);o.token=a&&"path"in a?r.find(e=>e.path===a.path):void 0}}function h(e,t,r){if(o.get(e)?.has(t))return{offToken:getComputedStyle(e).getPropertyValue(t).trim()};let n=N(e,t);return n?{path:n.path}:r}function g(e,t){if(!a.get(e)?.has(t))return;let r=o.get(e),n=r?.has(t)??!1,s=a.get(e)?.get(t),i=!!N(e,t)||!!s&&"path"in s;return r||o.set(e,r=new Set),r.add(t),{priority:"important",...!n&&i?{undo:()=>{p(e,t),l||(L(!0),L(!1))}}:{}}}function m(e,t){return s.get(e)?.get(t)?.style??n.get(e)?.find(e=>e.property===t)?.inline}function y(e){let t={};for(let r of e?.themes??[])try{t[r.id]=r.current()}catch{}return t}function v(e,t,r,n){if(n.aborted||!e?.themes?.length)return;let o=JSON.stringify(y(e)),a=()=>{let t=JSON.stringify(y(e));t===o||n.aborted||(o=t,r())},s=[],i=!1;for(let t of e.themes)try{t.subscribe?s.push(t.subscribe(a)):i=!0}catch{i=!0}let f=i?new MutationObserver(a):void 0;f?.observe(t.documentElement,{attributes:!0}),t.body&&f?.observe(t.body,{attributes:!0}),n.addEventListener("abort",()=>{f?.disconnect();for(let e of s)e()},{once:!0})}function k(e,t={}){let r=f.get(e);r||f.set(e,r=new Map);let n=JSON.stringify(Object.entries(t).sort()),o=r.get(n);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(()=>r.delete(n)),r.set(n,o)),o}function b(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function w(e,t){return e.filter(e=>e.properties?.includes(t))}function $(e){let t,r=e.trim().toLowerCase().replace(/\s+/g," "),n=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(r)?.[1];if(n)t=(n.length<5?[...n].map(e=>e+e).join(""):n).match(/../g).map((e,t)=>parseInt(e,16)/(t>2?255:1));else{let e=/^rgba?\(([^)]*)\)$/.exec(r)?.[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 r.replace(/\s*,\s*/g,",");let[o,a,s,i=1]=t.map((e,t)=>t>2?+e.toFixed(2):Math.round(e));return 1===i?`rgb(${o},${a},${s})`:`rgba(${o},${a},${s},${i})`}function M(e,t){let r=$(t);return r?e.find(e=>"string"==typeof e.value&&$(e.value)===r):void 0}function S(e){return e.label||e.path}function j(e,t=e.value,r){return[e.path,e.ref,t,r,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function O(){let e=document.createElement("span");return e.className="design-token-off",e.setAttribute("role","img"),e}function T(e,t,r){e.title=`Not from a token · ${t||"unset"}${r?` · matches ${S(r)}`:""}`,e.setAttribute("aria-label",e.title)}function A(n,o,a,s){let i=r(o)?e(o,a):void 0;try{r(o)&&o.style.setProperty(a,"");let e=n.preview?n.preview(o,a,s):t(o,a,s.value),f=!0;return()=>{f&&(f=!1,e?.(),i?.restore())}}catch{throw i?.restore(),new Error("This token could not be previewed.")}}function N(e,t){if(!o.get(e)?.has(t))return[...n.get(e)??[]].reverse().find(e=>e.property===t)?.token}function P(t,a,s,i,f,l){let u=n.get(a);u||n.set(a,u=[]);let c=u.find(e=>e.property===s),d=r(a)?e(a,s):void 0,h=o.get(a)?.has(s)??!1,g=A(t,a,s,i);return p(a,s),u.push({adapter:t,property:s,token:i,from:c?.from??f,fromToken:c?c.fromToken:l,undo:g,inline:d,customBefore:h}),()=>x(a)}function x(e){let t=n.get(e),r=t?.pop();if(r?.undo(),r?.customBefore){let t=o.get(e);t||o.set(e,t=new Set),t.add(r.property)}else r&&p(e,r.property);t&&!t.length&&n.delete(e)}function E(e){return!!n.get(e)?.length}function J(e){return!!o.get(e)?.size}function W(e){for(;n.has(e);)x(e);o.delete(e)}function B(){for(let e of[...n.keys()])W(e);o.clear(),i.clear()}function z(e){return[...new Set(n.get(e)?.map(e=>e.property))].filter(t=>!o.get(e)?.has(t))}function L(t){if(t!==l){l=t,t&&(i=new Map([...o].flatMap(([t,n])=>r(t)?[[t,new Map([...n].map(r=>[r,e(t,r)]))]]:[])));for(let[o,a]of n)if(t)for(let e of[...a].reverse())e.undo();else for(let t of a)t.customBefore&&t.inline?.restore(),r(o)&&(t.inline=e(o,t.property)),t.undo=A(t.adapter,o,t.property,t.token);if(!t){for(let e of i.values())for(let t of e.values())t.restore();i.clear()}}}function C(e,t){let r=l;r||L(!0);for(let r of new Set([...n.keys(),...o.keys()]))d(r,e,t);for(let r of n.values())for(let n of r)n.adapter===e&&(n.token=t.find(e=>e.path===n.token.path)??n.token,"path"in n.from&&(n.fromToken=t.find(e=>e.path===n.from.path)));r||L(!1)}function F(e,t){try{let r=t.adapter.describe?.(e,t.property,t.from,t.token);return r?String(r).replace(/\s+/g," ").replace(/→/g,"->").trim().slice(0,300):void 0}catch{return}}function R(e){let t=[],r=new Set;for(let a of function(e){let t=new Map;for(let r of n.get(e)??[])t.set(r.property,r);return[...t.values()].filter(t=>!(o.get(e)?.has(t.property)||"path"in t.from&&t.from.path===t.token.path))}(e)){r.add(a.adapter.id);let n="path"in a.from?`${a.fromToken?.value?`${a.fromToken.value} `:""}[${a.from.path}]`:a.from.offToken||"(unset)";t.push(`Element ${a.property}: ${n} → ${a.token.value} [${a.token.path}]`);let o=F(e,a);o&&t.push(`Apply: ${o}`)}if(t.length)return["Proposed design-token changes (preview only)",...t,`Token adapter: ${[...r].join(", ")}`].join("\n")}export{u as a,c as b,h as c,g as d,m as e,y as f,v as g,k as h,b as i,w as j,M as k,S as l,j as m,O as n,T as o,A as p,N as q,P as r,E as s,J as t,W as u,B as v,z as w,L as x,C as y,R as z};

package/dist/design-comment-BYUC2WXI.js

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

package/dist/react-props-panel-5VXPVY3H.js

@@ -1 +0,0 @@
-import{a as e,c as t,d as n,e as i,f as o,g as r,h as a,i as s,j as d,k as l,l as p,m as c,n as u,o as m,p as g,q as f,r as h,s as b,t as v,u as x,v as k,w as y,x as w,y as E,z as C}from"./chunk-CIOHAE5J.js";import{c as $}from"./chunk-4KEVPMJJ.js";import{a as S,b as A,e as P,f as N,h as L,i as M,j as T,k as R,l as z,m as q,n as D,o as j,p as O,q as V,r as H,s as U,t as B,u as J,v as _,w as I,x as W,y as F,z as K}from"./chunk-UZLXJJJW.js";import{g as Y}from"./chunk-WNJLJD4A.js";import{a as Q}from"./chunk-RPY7OOOR.js";var X=new Map,Z=new Map,G=new WeakSet,ee=new WeakMap;function te(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var ne=new Map,ie=e=>e.definition.source?`${e.definition.source}${e.definition.line?`:${e.definition.line}`:""}`:"";function oe(e){if(e)for(let[e,t]of X){let n=P(e);n&&(ne.set(e,n.props),n.setProps({...n.props,...Object.fromEntries(t)}))}else for(let[e,t]of ne)P(e)?.setProps(t);e||ne.clear(),z(e),w(e)}function re(e){return!!X.get(e)?.size}function ae(e){let t=P(e),n=t?.definition.textProp,i=t?.definition.props.find(e=>e.name===n);if(!t||!n||"string"!==i?.kind)return null;let o=t.props[n];if("string"!=typeof o||o.length>500)return null;let r=X.get(e);return r||X.set(e,r=new Map),r.has(n)||r.set(n,o),{propName:n,before:o}}function se(e,t,n){let i=P(e),o=i?.definition.props.find(e=>e.name===t);return!(!i||i.definition.textProp!==t||"string"!==o?.kind||n.length>500||!A(o,n))&&(i.setProps({...i.props,[t]:n}),!0)}function de(e,t,n,i){if(n===i){let i=X.get(e);return void(i?.get(t)===n&&!(Z.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||X.delete(e)))}let o=Z.get(e);o||Z.set(e,o=[]),o.push({propName:t,before:n,after:i})}function le(e,t,n){se(e,t,n);let i=X.get(e);i?.get(t)===n&&!(Z.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||X.delete(e))}function pe(e){return!!e&&!!Z.get(e)?.length}function ce(e){let t=X.get(e),n=P(e);if(!t?.size||!n)return;let i=L(e),o=[...t].map(([e,t])=>{let o=n.definition.props.find(t=>t.name===e)?.styleProperty,r=n.props[e],a=o&&"string"==typeof r?i?.tokens.find(e=>e.properties.includes(o)&&r===`var(${e.cssVariable})`):void 0;return`- ${e}: ${te(t)} → ${te(r)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,...ie(n)?[`Source: ${ie(n)}`]:[],...o,"Runtime preview only; inline feedback does not write source files."].join("\n")}function ue(e,t){if(P(e))return null;let n;try{n=t?.components?.identify(e)}catch{}let i=N(e);return n?.name&&(!i||i.root!==n.element&&i.root.contains(n.element))?n:null}var me=e=>String(e).replace(/\s+/g," ").trim();function ge(e,t){let n=Object.entries(o(t)).map(([e,t])=>`${me(e)}=${me(t)}`).join(", "),i=ue(e,t),r=P(e),a=r?{root:e,component:r}:i?void 0:N(e);if(a){let{definition:e,props:t}=a.component;i={name:e.name,source:ie(a.component),props:{...t,...Object.fromEntries(X.get(a.root)??[])}}}let s=Object.entries(i?.props??{}).filter(([,e])=>null===e||["boolean","number"].includes(typeof e)||"string"==typeof e&&e.length<=80).slice(0,12).map(([e,t])=>`${me(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,i?.name&&`Component: ${me(i.name)}${i.source?` (${me(i.source)})`:""}`,s.length&&`Props: ${s.join(", ")}`].filter(e=>!!e)}function fe(e){return[ce(e),K(e),C(e)].filter(e=>!!e).join("\n\n")||void 0}function he(e,t,n){ee.get(e)?.abort();let i=new AbortController;ee.set(e,i),e.addEventListener("click",e=>{let i=t();if(!i)return;let o=K(i)||b(i);!P(i)&&!o||(e.stopImmediatePropagation(),n(i,fe(i)))},{capture:!0,signal:i.signal})}function be(e){return _(e)}function ve(e){return J(e)||b(e)||v(e)}function xe(e){I(e)}function ke(e){W(e),x(e)}function ye(e){if(!e||G.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),G.add(e)}function we(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false");let n,i,o=i=>import("./token-picker-QETCH45O.js").then(o=>{n=o,e.isConnected&&!e.disabled&&(i||"true"!==e.getAttribute("aria-expanded"))&&o.openTokenPicker({trigger:e,...t()},i)},()=>{});e.addEventListener("pointerdown",t=>{t.button||(t.preventDefault(),i="mouse"===t.pointerType?void 0:t,!i&&(e.focus(),o(!0)))}),e.addEventListener("pointerup",e=>{i&&Math.abs(e.clientY-i.clientY)<=10&&o(!0),i=void 0});for(let t of["mousedown","touchend"])e.addEventListener(t,e=>{e.cancelable&&e.preventDefault()});return e.addEventListener("keydown",e=>{e.ctrlKey||e.metaKey||!["Enter"," ","ArrowDown","ArrowUp"].includes(e.key)||(e.preventDefault(),o(!1))}),{prepare:()=>n?.refreshTokenPicker(e),refresh:()=>n?.refreshTokenPicker(e,{trigger:e,...t()})}}function Ee(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 Ce(e,t,n,i){let o=L(e);if(!o)return null;let r=B(o,t);if(!r.length)return null;ye(i);let a=document.createElement("span");a.className="design-token-binding",a.setAttribute("data-mode","custom");let s=document.createElement("span");s.className="design-token-icon",s.setAttribute("aria-hidden","true");let d=document.createElement("span");d.className="design-token-chip",d.setAttribute("aria-hidden","true");let p=document.createElement("button");p.type="button",p.className="design-token-detach",p.title="Detach token",p.setAttribute("aria-label",`Detach token from ${t}`),p.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 c=document.createElement("select");c.setAttribute("aria-label",`Style token for ${t}`);let g=document.createElement("small");g.className="design-token-binding__state",g.setAttribute("aria-live","polite");let f=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;g.id=f,c.setAttribute("aria-describedby",f);let h=document.createElement("option");h.value="custom",h.textContent="Custom value",c.append(h);for(let e of r){let t=document.createElement("option"),n=M(o,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,c.append(t)}let b=u(),v=e=>({path:e.path,type:e.type,value:M(o,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),x=Ee(null,a),k=e=>{c.value=e,c.dispatchEvent(new Event("change"))};we(c,()=>({tokens:r.map(v),property:t,current:c.value,onPreview:n=>{let i=r.find(e=>e.path===n.path);return Y(e,t,`var(${i.cssVariable})`)},onSelect:e=>k(e.path)}));let y=()=>{let n=V(o,e,t),i=n?null:H(o,e,t),s="token"===n?.mode?r.find(e=>e.path===n.tokenPath):void 0,p=s??i?.token;c.value=p?.path??"custom",d.textContent=p?.path??"";let u=n?.declaredPath,f=s?"token":i?"connected":u?"override":"custom";a.dataset.mode=f,a.parentElement?.setAttribute("data-token-mode",f),g.textContent="token"===f?u&&u!==s?.path?`Rebound from ${u} · preview`:`Linked to ${s?.path} · preview`:"connected"===f?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===f?`Custom override · was ${u}`:"",c.title=g.textContent||"Choose a token",b.hidden="custom"!==f;let h="custom"===f?getComputedStyle(e).getPropertyValue(t).trim():"",y="custom"===f?l(r.map(v),h):void 0;"custom"===f&&m(b,h,y),x.show(y,()=>y&&k(y.path))},w=new MutationObserver(y);w.observe(e,{attributes:!0,attributeFilter:["style"]});let E=new MutationObserver(()=>{a.isConnected||(w.disconnect(),E.disconnect())});return E.observe(a.ownerDocument,{childList:!0,subtree:!0}),c.addEventListener("change",()=>{let i=e.style.getPropertyValue(t),s=r.find(e=>e.path===c.value),d=V(o,e,t);if(s&&d&&s.path===d.declaredPath)U(o,e,t),n(i,e.style.getPropertyValue(t),s.path);else if(s)(s.path!==H(o,e,t)?.token.path||d)&&D(o,e,s,t,{recordHistory:!1})&&n(i,e.style.getPropertyValue(t),s.path);else{let r=a.parentElement?.querySelector("[data-property]")?.value??getComputedStyle(e).getPropertyValue(t).trim(),s=/^-?[\d.]+$/.test(r.trim())&&!/weight|line/.test(t)?`${r.trim()}px`:r;j(o,e,t,s),e.style.setProperty(t,s),n(i,s)}y()}),p.addEventListener("click",()=>{let e=r.find(e=>e.path===c.value),t=a.parentElement?.querySelector("input[data-property]"),n=e&&M(o,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),c.value="custom",c.dispatchEvent(new Event("change")),a.parentElement?.querySelector("[data-property]")?.focus()}),a.append(d,c,s,p,b,g),queueMicrotask(y),y(),a}function $e(e){let t=L(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...y(e)])}function Se(e,t,n,i,r,d,l,p,c){let u=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}]:[]}),m=t=>{for(let{field:i,label:o,input:r}of u){if(o.querySelector(".design-token-binding")||!n.contains(o))continue;let a=t(i,o,r,()=>{d&&(r.value=d(i,e));let t=o.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===i.kind&&l?l(r.value):r.value)});a&&o.append(a)}},g=p?.tokens;if(!g)return void m((t,n,o,a)=>Ce(e,t.property,e=>{i(t,o,e),a()},r));ye(r);let f=function(e,t){let n=(Array.isArray(t?.themes)?t.themes:[]).find(e=>Array.isArray(e?.options)&&e.options.length>1&&e.options.length<4);if(n)return()=>Promise.all(n.options.map(i=>a(e,{...o(t),[n.id]:i.id}).then(e=>({label:Ue(i.label,i.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(g,p);return Promise.all([a(g,o(p)),s(g,e)]).then(([t,n])=>{m((i,r,s,d)=>Ae(g,e,i.property,t,n[i.property],e=>{c?.(e),d()},r,s,f,d,()=>a(g,o(p))))},()=>{})}function Ae(n,i,o,r,a,s,b,v,x,k,y){let w=d(r,o);if(!w.length&&!a)return null;let E=e(i,o,a,n,r),C=a&&"offToken"in a?a.offToken:void 0,$=void 0===C?void 0:l(w,C),S=document.createElement("span");S.className="design-token-binding";let A=document.createElement("span");A.className="design-token-chip",A.setAttribute("aria-hidden","true");let P=document.createElement("span");P.className="design-token-icon",P.setAttribute("aria-hidden","true");let N=document.createElement("button");N.type="button",N.className="design-token-detach",N.title="Edit the value",N.setAttribute("aria-label",`Edit ${o} value`),N.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 L=document.createElement("select");L.setAttribute("aria-label",`Style token for ${o}`),L.disabled=!w.length;let M=document.createElement("option");M.value="",M.textContent="Choose a token",L.append(M);let T=()=>{L.replaceChildren(M),L.disabled=!w.length;let e=new Map([["",L]]);for(let t of w){let n=t.group??"",i=e.get(n);i||(i=document.createElement("optgroup"),i.label=n,e.set(n,i));let o=document.createElement("option");o.value=t.path,o.textContent=`${p(t)}${t.ref?` · ${t.ref}`:""}${t===$?" · same value":""}`,o.title=c(t),i.append(o)}for(let[t,n]of e)t&&L.append(n)};T();let R=u();void 0!==C&&m(R,C,$);let z=document.createElement("small");z.className="design-token-binding__state",z.setAttribute("aria-live","polite");let q=!1,D=Ee(b,S),j=()=>{let e=t(i,o,a);return q?void 0:e&&"path"in e?e.path:void 0},O=we(L,()=>({tokens:r,property:o,current:j(),themes:x,onPreview:e=>{let t=g(n,i,o,e);return k?.(),()=>{t(),k?.()}},onSelect:H})),V=()=>{let e=f(i,o),n=j(),s=n?r.find(e=>e.path===n):void 0;L.value=n&&w.some(e=>e.path===n)?n:"",A.textContent=s?p(s):n??"";let d=n?e?"token":"connected":"custom";S.dataset.mode=d,(b??S.parentElement)?.setAttribute("data-token-mode",d),R.hidden=!!n;let u=t(i,o,a),g=u&&"offToken"in u?u.offToken:getComputedStyle(i).getPropertyValue(o).trim()||C||"",h=n?void 0:l(w,g);n||m(R,g,h),z.textContent=s?`${e?"Preview":"Uses"} ${c(s)}`:n?`Uses ${n}`:R.hidden?"":R.title,L.title=z.textContent||"Choose a token",D.show(R.hidden?void 0:h,()=>h&&H(h))};function H(e){q=!1;let t=E??{offToken:getComputedStyle(i).getPropertyValue(o).trim()},a="path"in t?r.find(e=>e.path===t.path):void 0;s(h(n,i,o,e,t,a)),V()}L.addEventListener("change",()=>{let e=w.find(e=>e.path===L.value);e?H(e):V()}),N.addEventListener("click",()=>{q=!0,V(),v?.focus()}),S.append(A,L,P,N,R,z);let U=new MutationObserver(V);U.observe(i,{attributes:!0,attributeFilter:["style","class"]});let B=new AbortController,J=new MutationObserver(()=>{S.isConnected||(U.disconnect(),J.disconnect(),B.abort())});J.observe(document,{childList:!0,subtree:!0});let _=b?.getRootNode();_ instanceof ShadowRoot&&J.observe(_,{childList:!0,subtree:!0}),_?.addEventListener("komo-theme-changing",O.prepare,{signal:B.signal});let I=0;return _?.addEventListener("komo-theme-change",()=>{let t=++I;(y?.()??Promise.resolve([...r])).then(s=>{B.signal.aborted||t!==I||(e(i,o,a,n,r=s),w=d(r,o),T(),V(),(_ instanceof ShadowRoot?_.activeElement:document.activeElement)?.isSameNode(v??null)||k?.(),O.refresh())},()=>{})},{signal:B.signal}),V(),S}var Pe=!1;function Ne(e,t,n,i){let o=L(e);if(!o||!o.tokens.length)return null;ye(i);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=Pe,r.addEventListener("toggle",()=>{r.isConnected&&(Pe=r.open)});let a=document.createElement("summary");a.textContent="Shared theme";let s=document.createElement("small");s.className="design-react-source",s.textContent="Changes every element using these tokens",r.append(a,s);let d=new Map;for(let e of o.tokens){let t=e.path.split(".")[0];d.set(t,[...d.get(t)??[],e])}let l=o.tokens.length>6&&d.size>1;for(let[e,i]of l?d:new Map([["",o.tokens]])){if(e){let t=document.createElement("small");t.className="design-theme-heading",t.textContent=e,r.append(t)}for(let a of i)r.append(Le(o,a,t,n,e))}return r}function Le(e,t,n,i,o){let r=document.createElement("div");r.className="design-theme-token";let a=document.createElement("span");a.textContent=o&&t.path.slice(o.length+1)||t.path,a.title=`${t.path} · ${T(e,t)} matching · ${t.impactSelector}`;let s=n.fields.find(e=>t.properties.includes(e.property)),d={property:t.cssVariable,label:`Shared theme value for ${t.path}`,kind:"dimension"===t.type?"size":s?.kind??"text",glyph:"color"===t.type?void 0:s?.glyph,values:s?.values},l=!1,p=n.fieldControl(d,{element:e.root,begin:()=>{l=!1},apply:(n,o,r)=>{let a=null!==r&&R(e,t,r.trim(),l);n.setAttribute("aria-invalid",String(!a)),a&&(l=!0,g(),i())},commit:(e,t,n)=>{!1!==n&&(l=!1,"true"===e.getAttribute("aria-invalid")&&m())}}),c=p.querySelector("[data-property]"),u=p.querySelector('input[type="color"]'),m=()=>{let i=M(e,t);c.value=i,u&&(u.value=n.toHex(i)),c.removeAttribute("aria-invalid"),g()},g=()=>{f.disabled=!r.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(c.title=c.value)},f=document.createElement("button");return f.type="button",f.className="design-theme-reset",f.title="Reset to page value",f.setAttribute("aria-label",`Reset ${t.path}`),f.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>',f.addEventListener("click",()=>{q(e,t),m(),i()}),m(),r.append(a,p,f),r}function Me(e,t,i){let o=L(e);return o&&j(o,e,t,i),n(e,t)}function Te(e,t){let n=L(e);n&&O(n,e,t)}function Re(e){let t=Z.get(e),n=t?.at(-1),i=P(e);if(!n||!i)return;let o=t.find(e=>e.propName===n.propName).before;t.pop(),i.setProps({...i.props,[n.propName]:n.before});let r=X.get(e);r||X.set(e,r=new Map),Object.is(o,n.before)?(r.delete(n.propName),i.releaseProps?.([n.propName])):r.set(n.propName,o),r.size||X.delete(e)}function ze(){for(let e of[...X.keys()])Je(e);X.clear(),Z.clear(),F(),k(),He()}var qe,De=new Map,je=new WeakMap,Oe=new WeakSet;function Ve(e){try{return String(e.current())}catch{return}}function He(e){for(let[e,t]of De)try{Ve(e)!==t&&e.apply(t)}catch{}De.clear();let t=e?.querySelector(".design-theme-switch");t&&(je.get(t)?.(),t.remove())}var Ue=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function Be(e,t,n,i,s){i&&s&&!Oe.has(s)&&(Oe.add(s),function(e,t,n){let i=0;r(e,t.ownerDocument,()=>{let r=++i,s=e?.tokens;t.dispatchEvent(new Event("komo-theme-changing")),(s?a(s,o(e)):Promise.resolve([])).then(e=>{n.aborted||r!==i||(t.dispatchEvent(new Event("komo-theme-changing")),s&&E(s,e),t.dispatchEvent(new Event("komo-theme-change")))},()=>{})},n)}(t,i,s));let d=e.closest(".design-inspector")?.querySelector(".design-inspector__heading"),l=(d??e).querySelector(".design-theme-switch"),p=l?.open??!1;l&&je.get(l)?.(),l?.remove();let c=document.createElement("details");c.className="design-theme-switch";let u=document.createElement("summary");u.setAttribute("aria-label","Preview theme");let m=document.createElement("div");m.className="design-theme-popup",m.setAttribute("role","group"),m.setAttribute("aria-label","Theme preview options"),c.append(u,m);let g,f=[],h=[],b=t?.themes;for(let e of Array.isArray(b)?b:[]){let t=Ve(e),i=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||i.length<2)continue;let o=Ue(e.label,String(e.id)),r=i=>{let o=Ve(e);if(i!==o){De.has(e)||De.set(e,o??t),qe=e;try{e.apply(i)}catch{}n()}},a=document.createElement(i.length>3?"label":"div");a.className="design-field design-react-field";let s,d=document.createElement("span");if(d.textContent=o,i.length>3){let e=document.createElement("select");for(let t of i)e.append(new Option(Ue(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 i){let n=document.createElement("button");n.type="button",n.textContent=Ue(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>r(e.id)),s.append(n)}}qe===e&&(g=s.querySelector("[aria-pressed=true]")??s),h.push(()=>{let n=Ve(e)??t;return s instanceof HTMLSelectElement?s.value=n:s.querySelectorAll("button").forEach((e,t)=>e.setAttribute("aria-pressed",String(i[t].id===n))),`${o}: ${Ue(i.find(e=>e.id===n)?.label,n)}`}),a.append(d,s),m.append(a)}if(qe=void 0,!m.childElementCount)return;let v=()=>{f.splice(0,f.length,...h.map(e=>e())),u.textContent=f[0].split(": ").slice(1).join(": ")+(f.length>1?" +"+(f.length-1):""),u.title=`Preview theme · ${f.join(" · ")}`};v(),c.open=p||!!g;let x=new AbortController,k=x.signal,y=()=>{c.open=!1};je.set(c,()=>{y(),x.abort()}),c.addEventListener("keydown",e=>{"ArrowDown"===e.key&&e.target===u&&(e.preventDefault(),c.open=!0,m.querySelector("button,select")?.focus())}),c.addEventListener("focusout",e=>{e.relatedTarget instanceof Node&&!c.contains(e.relatedTarget)&&y()}),ye(i),d?d.insertBefore(c,d.querySelector(".design-inspector__close")):e.prepend(c),c.getRootNode().addEventListener("komo-theme-change",v,{signal:k}),c.getRootNode().addEventListener("pointerdown",e=>{e.composedPath().includes(c)||y()},{capture:!0,signal:k}),c.ownerDocument.defaultView?.addEventListener("keydown",e=>{!c.open||"Escape"!==e.key||!e.composedPath().includes(c)||(e.preventDefault(),e.stopImmediatePropagation(),y(),u.focus())},{capture:!0,signal:k}),$(u,()=>{y(),u.isConnected||x.abort()},k),g?.focus({preventScroll:!0})}function Je(e){let t=X.get(e),n=P(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),n.releaseProps?.([...t.keys()]),X.delete(e),Z.delete(e))}function _e(e,t,n,i,o,r){let a,s=t.definition.props.find(e=>e.name===n);if(!s||!A(s,i))return o.setAttribute("aria-invalid","true"),!1;o.removeAttribute("aria-invalid");try{let e=t.props;if(a=e[n],Object.is(a,i))return!0;t.setProps({...e,[n]:i})}catch{return o.setAttribute("aria-invalid","true"),o.title="Runtime preview is unavailable. The component kept its current props.",!1}let d=X.get(e);d||X.set(e,d=new Map);let l=d.has(n)?d.get(n):(Z.get(e)?.find(e=>e.propName===n)??{before:a}).before;Object.is(l,i)?(d.delete(n),t.releaseProps?.([n])):d.set(n,l),d.size||X.delete(e);let p=Z.get(e);return p||Z.set(e,p=[]),p.push({propName:n,before:a,after:i}),r(()=>Re(e)),!0}function Ie(e,t,n,i,o,r){let a=P(e);if(!a){let t,r=ue(e,o);try{t=r&&o?.components?.editor?.(r)}catch{}if(t&&r&&Q(r.element)){if(r.element!==e){ye(n);let e=document.createElement("small");if(e.className="design-react-source design-react-group design-react-inside",e.append(`Inside ${r.name}`),i){let t=document.createElement("button");t.type="button",t.textContent="Select component",t.addEventListener("click",()=>i(r.element)),e.append(" · ",t)}return e}a=S(r,t)}if(!a){let t=null;try{t=r&&o?.components?.panel?.(r)||null}catch{}return t&&ye(n),t??function(e,t,n){let i=N(e);if(!i)return null;ye(n);let o=document.createElement("small");if(o.className="design-react-source design-react-group design-react-inside",o.append(`Inside ${i.component.definition.name}`),t){let e=document.createElement("button");e.type="button",e.textContent="Select component",e.addEventListener("click",()=>t(i.root)),o.append(" · ",e)}return o}(e,i,n)}}ye(n);let s=document.createElement("details");s.className="design-group design-react-group",s.open=!0;let d=document.createElement("summary");d.textContent="Properties",s.append(d);let l=document.createElement("small");l.className="design-react-source",l.textContent=`${a.definition.name}${ie(a)?` · ${ie(a)}`:""}`,l.title=l.textContent,s.append(l);let p=document.createElement("small");p.className="design-react-source design-react-preview",p.textContent="Runtime preview · Undo or Reset to restore",s.append(p);let c=a,u=[];if(r&&a.subscribe){let e=0,t=!1,i=new AbortController,o=s.getRootNode(),d=()=>{e||!s.isConnected||(e=requestAnimationFrame(()=>{if(e=0,!s.isConnected)return;let n=s.getRootNode(),i=n.activeElement;u.forEach(e=>e()),!i?.closest(".design-inspector,.komo-tokens,.komo-select")&&!n.querySelector(".komo-tokens,.komo-select")&&(t=!1,r())}))},l=a.subscribe(()=>{t=!0,d()});(n??o).addEventListener("focusout",()=>{queueMicrotask(()=>{t&&d()})},{signal:i.signal});let p=()=>{l(),cancelAnimationFrame(e),i.abort()};queueMicrotask(()=>{s.isConnected?$(s,p,i.signal):p()})}for(let n of a.definition.props.filter(e=>"unsupported"!==e.kind)){let i=n.styleProperty,o=document.createElement("label");o.className="design-field design-react-field";let r=document.createElement("span");r.textContent=n.name;let d,l=a.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===l&&!n.required){let t=document.createElement("option");t.value="",t.textContent="unset",e.prepend(t)}e.value=void 0===l?"":String(l),d=e}else{let e=document.createElement("input");"boolean"===n.kind?(e.type="checkbox",e.checked=!0===l,e.indeterminate=void 0===l):"number"===n.kind?(e.type="number",e.step="any",e.value="number"==typeof l?String(l):""):(e.type="text",e.maxLength=500,e.autocomplete="off",e.value="string"==typeof l?l:""),d=e}if(d.setAttribute("aria-label",`${a.definition.name} ${n.name}`),"unsupported"===n.kind)d=document.createElement("input"),d.disabled=!0,d.value=`Read only · ${n.typeLabel}`,d.setAttribute("aria-label",`${a.definition.name} ${n.name}, read only`),o.title=`Inline feedback does not edit ${n.typeLabel} props.`;else{let i=()=>{let i=d instanceof HTMLInputElement&&"checkbox"===d.type?d.checked:d.value,o=i;if("number"===n.kind)o=""===String(i).trim()?void 0:Number(i);else if("enum"===n.kind){let e=(n.values??[]).find(e=>String(e)===i);o=""!==i||n.required?e:void 0}else"boolean"===n.kind&&(o=!0===i);_e(e,c,n.name,o,d,t)};d.addEventListener("change",i)}r.title=n.name,o.append(r,d);let p=document.createElement("div");p.className="design-react-row";let m=document.createElement("button");m.type="button",m.className="design-theme-reset",m.setAttribute("aria-label",`Reset ${a.definition.name} ${n.name}`),m.title="Restore the value before editing",m.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>';let g=()=>{m.hidden=!X.get(e)?.has(n.name)};u.push(()=>{if(d===d.getRootNode().activeElement||"true"===d.getAttribute("aria-expanded"))return;let e=c.props[n.name];d instanceof HTMLInputElement&&"checkbox"===d.type?d.checked=!0===e:d.value=null==e?"":String(e),g()}),d.addEventListener("change",g),m.addEventListener("click",()=>{let i=X.get(e);if(!i?.has(n.name))return;_e(e,c,n.name,i.get(n.name),d,t);let o=c.props[n.name];d instanceof HTMLInputElement&&"checkbox"===d.type?d.checked=!0===o:d.value=void 0===o?"":String(o),g(),d.focus()}),g(),p.append(o,m);let f=document.createElement("small");if(f.className="design-react-type",f.textContent=`${n.typeLabel}${n.required?" · required":" · optional"}`,o.append(f),o.title||=f.textContent,"string"===n.kind&&i){let r=L(e),s=r?B(r,i):[];if(s.length){let r=document.createElement("span");r.className="design-token-binding";let l=document.createElement("span");l.textContent="Style token";let p=document.createElement("select");p.setAttribute("aria-label",`Style token for ${n.name}`);let c=document.createElement("option");c.value="custom",c.textContent="Custom value",p.append(c);for(let e of s){let t=document.createElement("option");t.value=e.path,t.textContent=e.path,p.append(t)}let u=()=>{let e=s.find(e=>a.props[n.name]===`var(${e.cssVariable})`);p.value=e?.path??"custom",r.dataset.mode=e?"token":"custom"};p.addEventListener("change",()=>{let o=s.find(e=>e.path===p.value),r=o?`var(${o.cssVariable})`:"string"==typeof a.props[n.name]&&String(a.props[n.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(i).trim()??"":"string"==typeof a.props[n.name]?a.props[n.name]:"";_e(e,a,n.name,r,d,t)&&u()}),r.append(l,p),o.append(r),u()}}s.append(p)}return s}export{Se as attachStyleTokenControls,Be as attachThemeSwitcher,ae as beginReactTextEdit,be as canUndoDesignTokenEdit,pe as canUndoReactProp,le as cancelReactTextEdit,Ae as createAdapterTokenControl,Ne as createDesignThemePanel,Ce as createElementTokenControl,Ie as createReactPropsPanel,ge as designContext,de as finishReactTextEdit,ve as hasDesignTokenEdit,re as hasReactPropChanges,he as installCommentCapture,Me as noteDesignTokenOverride,i as originalDesignTokenStyle,se as previewReactTextEdit,fe as proposedDesignChanges,ce as proposedReactChanges,ke as resetDesignTokenEdits,ze as resetPreviews,Je as resetReactProps,He as restoreThemes,oe as showDesignBefore,Te as syncDesignTokenBinding,$e as tokenBoundProperties,xe as undoDesignTokenEdit,Re as undoReactProp};

package/dist/token-picker-QETCH45O.js

@@ -1 +0,0 @@
-import{j as e,m as t}from"./chunk-CIOHAE5J.js";import{a as o,b as n,c as r}from"./chunk-4KEVPMJJ.js";import"./chunk-WNJLJD4A.js";import"./chunk-RPY7OOOR.js";import{j as i}from"./chunk-PLSWBSSX.js";var a,l=new WeakSet,s=0;function p(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function d(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 f=(e,t,o)=>Math.min(o,Math.max(t,e));function c(e){if(!e||/var\(/i.test(e))return!1;let t=i("span").style;return t.color=e,!!t.color}function u(e,o,n,r){let a=i("div");a.id=o,a.setAttribute("role","option"),a.setAttribute("aria-selected",String(n));let l=i("span","komo-tokens__name"),s=i("span","",p(e));l.append(s);let u=i("span","komo-tokens__check");u.setAttribute("aria-hidden","true");let k=i("span","komo-tokens__meta"),h="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??"",m="color"===e.type&&!c(e.value);for(let t of[e.ref,m?`Unresolved value · ${h||"not supplied"}`:h]){if(!t)continue;let e=i("span","",t);k.append(e)}if(a.append(function(e,t){let o=i("span","komo-tokens__pv");o.setAttribute("aria-hidden","true");let n=e=>{let t=i("span",`komo-tokens__${e}`);return 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=i("span");c(e)?t.style.background=e:(t.dataset.unresolved="",t.textContent="?"),o.append(t)}}else if("dimension"===a||"letterSpacing"===a){let t=d(r);if(void 0===t)return o;let i=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),a=n(i?"corner":"dim");i?a.style.borderTopLeftRadius=`${f(t,0,12)}px`:a.style.width=`${f(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=d(r.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${f(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===a?e.style.fontWeight=r:e.style.fontFamily=r}return o}(e,r),l,u,k),e.states?.length){let t=i("span","komo-tokens__states");for(let o of e.states){let e=i("i","",o);t.append(e)}a.append(t)}if(e.description){let t=i("span","komo-tokens__desc",e.description);a.append(t)}let g=r.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return a.title=[e.label,t(e,g.length>1?g.join(", "):e.value,m?"Unresolved color value; no swatch available":"")].filter(Boolean).join(" · "),a.setAttribute("aria-label",a.title),a}function k(e,t){a?.trigger===e&&a.refresh(t)}function h(t,d=!1){if(d&&a?.trigger===t.trigger)return a.close(!0);a?.close();let{trigger:c,property:k}=t,h=t.tokens,m=c.getRootNode();if((m instanceof ShadowRoot||m===document)&&!l.has(m)){l.add(m);let e=i("style");e.textContent=o+".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(e)}let g="komo-tokens-"+ ++s,b=i("div","komo-tokens"),x=i("div","komo-tokens__bar"),_=i("input");_.type="text",_.placeholder="Search tokens",_.autocomplete="off",_.spellcheck=!1,_.setAttribute("role","combobox"),_.setAttribute("aria-expanded","true"),_.setAttribute("aria-controls",g),_.setAttribute("aria-autocomplete","list"),_.setAttribute("aria-label",`Search tokens for ${k}`);let v=i("div");v.id=g,v.setAttribute("role","listbox"),v.setAttribute("aria-label",`Tokens for ${k}`);let w=e(h,k),y=!w.length,A=i("button");if(A.type="button",A.textContent="Show all",A.title=`Show all ${h.length} tokens`,x.append(_),w.length&&w.length<h.length&&x.append(A),b.append(x,v),t.onPreview){let e=i("div","komo-tokens__hint","↑↓ preview · Enter apply · Esc cancel");b.append(e)}let $,S,E=()=>new Map(h.map(e=>[e,`${p(e)} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),C=E(),L=[],T=[],z=0,P=-1,j=v,M=-1,H=!1,R=()=>{let e=S;S=void 0,M=-1,e?.()},B=e=>{for(;z<Math.min(e,T.length);z++){let{token:e,group:o}=T[z];if(o!==$&&($=o,j=v,o)){j=i("div"),j.setAttribute("role","group");let e=i("small");e.id=`${g}-g${z}`,e.textContent=o,j.setAttribute("aria-labelledby",e.id),j.append(e),v.append(j)}j.append(u(e,`${g}-${z}`,e.path===t.current,L))}},D=e=>v.querySelector(`#${g}-${e}`),N=(e,o=!0,n=!0)=>{if(e<0||e>=T.length)return;if(e!==M&&n){R(),M=e;let o=T[e].token;o.path!==t.current&&(S=t.onPreview?.(o))}B(e+60),D(P)?.removeAttribute("data-active"),P=e;let r=D(e);if(r.toggleAttribute("data-active",!0),_.setAttribute("aria-activedescendant",r.id),!o)return;let i=r.offsetTop-(r.parentElement===v?0:r.parentElement.firstElementChild.offsetHeight),a=r.offsetTop+r.offsetHeight;i<v.scrollTop?v.scrollTop=i-4:a>v.scrollTop+v.clientHeight&&(v.scrollTop=a-v.clientHeight+4)},W=(e=!1,o=!1)=>{let n=o?T[P]?.token.path:void 0,r=v.scrollTop,a=o?z:60;R();let l=_.value.toLowerCase().split(/\s+/).filter(Boolean),s=y?h:w,p=l.length?s.filter(e=>l.every(t=>C.get(e).includes(t))):s,d=!l.length&&t.current?p.find(e=>e.path===t.current):void 0,f=new Map([["",[]]]);for(let e of p){if(e===d)continue;let t=e.group??"";f.set(t,[...f.get(t)??[],e])}if(T=[...d?[{token:d,group:"Current"}]:[],...[...f].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],v.replaceChildren(),v.scrollTop=0,z=0,P=-1,$=void 0,_.removeAttribute("aria-activedescendant"),A.setAttribute("aria-pressed",String(y)),!T.length){let e=i("div","komo-tokens__empty",l.length?"No matching tokens":"No tokens");return void v.append(e)}B(a),N(Math.max(0,T.findIndex(e=>e.token.path===n)),!1,e),o&&(v.scrollTop=r)},I=new AbortController,{signal:J}=I,O=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function K(e=!1){a?.close===K&&(a=void 0,R(),I.abort(),b.remove(),c.setAttribute("aria-expanded","false"),c.removeAttribute("aria-controls"),e&&c.isConnected&&c.focus({preventScroll:!0}))}a={trigger:c,close:K,refresh(o){if(!o)return H||=M>=0,R();let n=H||M>=0;H=!1,t=o,h=o.tokens,w=e(h,k),C=E(),L=[],A.title=`Show all ${h.length} tokens`,w.length&&w.length<h.length?x.append(A):A.remove(),W(n,!0),re()}};let U=e=>{let o=T[e]?.token;o&&(K(!0),o.path!==t.current&&t.onSelect(o))};_.addEventListener("input",()=>W(!0),{signal:J}),A.addEventListener("click",()=>{y=!y,W(!0),O||_.focus({preventScroll:!0})},{signal:J}),addEventListener("keydown",e=>{if(!c.isConnected)return K();let t=e.composedPath();if(!t.includes(b)&&!t.includes(c))return;let{key:o}=e,n={ArrowDown:1,ArrowUp:-1,PageDown:8,PageUp:-8}[o];if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)K(!0);else{if("Tab"===o)return K();if(t[0]!==_&&t[0]!==c)return;if(n)N(f(P+n,0,T.length-1));else{if("Enter"!==o)return;U(P)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:J}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(b)&&!t.includes(c)&&K()},{capture:!0,signal:J});let F=e=>{e.target===v?v.scrollTop+v.clientHeight>v.scrollHeight-200&&B(z+60):e.target instanceof Node&&b.contains(e.target)||K()};addEventListener("scroll",F,{capture:!0,signal:J}),m.addEventListener("scroll",F,{capture:!0,signal:J}),addEventListener("resize",()=>K(),{signal:J}),r(c,()=>K(),J),v.addEventListener("mousedown",e=>e.preventDefault(),{signal:J});let q=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(g.length+1)):-1};v.addEventListener("pointermove",e=>{let t=q(e);t>=0&&N(t,!1)},{signal:J}),b.addEventListener("click",e=>{e.target!==_&&e.preventDefault();let t=q(e);t>=0&&U(t)},{signal:J}),W();let V=c.closest(".design-field")??c.parentElement;V.append(b),c.setAttribute("aria-expanded","true"),c.setAttribute("aria-controls",g);let X=V.getBoundingClientRect(),Y=n(V),G=(b.offsetParent??V).getBoundingClientRect(),Q=f(Y.right-Y.left-8,120,340),Z=Y.bottom-X.bottom-8,ee=X.top-Y.top-8,te=Z<240&&ee>Z,oe=Math.min(320,Math.max(te?ee:Z,120));if(b.style.width=`${Q}px`,b.style.maxHeight=`${oe}px`,b.style.left=f(X.left,Y.left+4,Y.right-Q-4)-G.left+"px",b.style.top=te?"":X.bottom+4-G.top+"px",b.style.bottom=te?G.bottom-X.top+4+"px":"",b.toggleAttribute("data-up",te),t.current){let e=T.findIndex(e=>e.token.path===t.current);e>=0&&N(e,!0,!1)}O||_.focus({preventScroll:!0});let ne=0;function re(){let e=++ne;Promise.resolve(t.themes?.()).then(t=>{!t||t.length<2||a?.close!==K||e!==ne||(L=t,W(M>=0,!0))},()=>{})}return re(),()=>K()}export{h as openTokenPicker,k as refreshTokenPicker,p as tokenLabel};