@hazem3500/komo 0.9.27 → 0.9.28

package/dist/chunk-K6ETEZER.js

@@ -1 +0,0 @@
-import{a as e}from"./chunk-RPY7OOOR.js";var t=new WeakMap;function r(e,t){return void 0===t?!e.required:!(!function(e){return void 0===e||"string"==typeof e||"number"==typeof e&&Number.isFinite(e)||"boolean"==typeof e}(t)||"unsupported"===e.kind)&&("string"===e.kind?"string"==typeof t&&t.length<=500:"number"===e.kind?"number"==typeof t&&Number.isFinite(t):"boolean"===e.kind?"boolean"==typeof t:"enum"===e.kind&&(e.values??[]).includes(t))}function n(e,t){let n={};for(let o of e.props){if("unsupported"===o.kind)continue;let e=t[o.name];r(o,e)&&(n[o.name]=e)}return n}function o(e,r,o,i){let l=r.textProp&&r.props.some(e=>e.name===r.textProp&&"string"===e.kind)?r.textProp:void 0,s=n(r,o),a={definition:r,props:s,onChange:i,setProps(e){let t=n(r,e);if(Object.keys(t).length===Object.keys(e).length){for(let e of r.props)if("unsupported"!==e.kind&&e.required&&!(e.name in t))return;a.props=t,a.onChange(t)}}};return t.set(e,a),e.dataset.komoInspectable=r.id,l?e.dataset.komoTextProp=l:delete e.dataset.komoTextProp,()=>{t.get(e)===a&&(t.delete(e),e.dataset.komoInspectable===r.id&&delete e.dataset.komoInspectable,e.dataset.komoTextProp===l&&delete e.dataset.komoTextProp)}}function i(e,r,o,i){if(!e)return;let l=t.get(e);if(!l||l.definition.id!==r.id)return;l.definition=r,l.props=n(r,o),l.onChange=i;let s=r.textProp&&r.props.some(e=>e.name===r.textProp&&"string"===e.kind)?r.textProp:void 0;s?e.dataset.komoTextProp=s:delete e.dataset.komoTextProp}function l(e){let r=e&&t.get(e);return r&&e.getAttribute("data-komo-inspectable")===r.definition.id?r:null}function s(e){for(let t=e?.parentElement;t;t=t.parentElement){let e=l(t);if(e)return{root:t,component:e}}return null}var a=new Set,p=new WeakMap,f=new WeakMap,u=new WeakMap,d={color:new Set(["color","background-color","border-color"]),dimension:new Set(["gap","padding","margin","border-radius","font-size","width","height"]),fontFamily:new Set(["font-family"]),fontWeight:new Set(["font-weight"]),lineHeight:new Set(["line-height"])};function m(e,t){if(t.length>100||t.some(e=>!function(e){return!!e&&"string"==typeof e.path&&e.path.length<=160&&/^--[a-zA-Z0-9_-]+$/.test(e.cssVariable)&&!!d[e.type]&&Array.isArray(e.properties)&&e.properties.length>0&&e.properties.every(t=>d[e.type].has(t))&&"string"==typeof e.impactSelector&&e.impactSelector.length<=200}(e)))throw new Error("Komo design tokens must use supported, explicit CSS-variable metadata");let r=new Set(t.map(e=>e.path)),n=new Set(t.map(e=>e.cssVariable));if(r.size!==t.length||n.size!==t.length)throw new Error("Komo design token paths and CSS variables must be unique");for(let r of t)e.querySelectorAll(r.impactSelector);let o={root:e,tokens:t.map(e=>({...e,properties:[...e.properties]})),themeEdits:new Map,elementOriginals:new Map,elementBindings:new Map,previousMarker:e.getAttribute("data-komo-design-tokens")};return p.set(e,o),a.add(o),u.set(o,[]),e.setAttribute("data-komo-design-tokens",String(t.length)),()=>{if(p.get(e)===o){for(let[t,r]of o.themeEdits){let n=o.tokens.find(e=>e.path===t);n&&(r.inlineBefore?e.style.setProperty(n.cssVariable,r.inlineBefore):e.style.removeProperty(n.cssVariable))}for(let[e,t]of o.elementOriginals)for(let[r,n]of t)n.value?e.style.setProperty(r,n.value,n.priority):e.style.removeProperty(r);o.elementBindings.clear(),a.delete(o),p.delete(e),null===o.previousMarker?e.removeAttribute("data-komo-design-tokens"):e.setAttribute("data-komo-design-tokens",o.previousMarker)}}}function c(e){if(!e)return null;let t=null;for(let r of a)(r.root===e||r.root.contains(e))&&(!t||t.root.contains(r.root))&&(t=r);return t}function h(e,t){return e.root.ownerDocument.defaultView?.getComputedStyle(e.root).getPropertyValue(t.cssVariable).trim()??""}function g(e,t){try{return e.root.querySelectorAll(t.impactSelector).length}catch{return 0}}function y(e,t,r,n=!1){if(!e.tokens.some(e=>e===t||e.path===t.path)||!function(e,t,r){if(!r||r.length>160||/[{};]/.test(r)||/(?:url|expression)\s*\(/i.test(r))return!1;let n=e.root.ownerDocument.defaultView?.CSS;return!n?.supports||t.properties.some(e=>n.supports(e,r))}(e,t,r))return!1;let o=h(e,t),i=e.themeEdits.get(t.path),l=e.root.style.getPropertyValue(t.cssVariable),s=i?.inlineBefore??l,a=u.get(e)??[];if(o===r)return!0;e.root.style.setProperty(t.cssVariable,r),r===(i?.before??o)?e.themeEdits.delete(t.path):e.themeEdits.set(t.path,{before:i?.before??o,after:r,inlineBefore:s});let p=a.at(-1);return n&&"theme"===p?.kind&&p.token.path===t.path?r===p.before?a.pop():p.after=r:a.push({kind:"theme",source:e,token:t,before:o,after:r,inlineBefore:l}),u.set(e,a),!0}function k(e){for(let t of a)for(let[r,n]of t.themeEdits){let o=t.tokens.find(e=>e.path===r)?.cssVariable;if(!o)continue;let i=e?n.inlineBefore:n.after;i?t.root.style.setProperty(o,i):t.root.style.removeProperty(o)}}function P(e,t){let r=e.themeEdits.get(t.path),n=u.get(e)??[],o=n.find(e=>"theme"===e.kind&&e.token.path===t.path),i=r?.inlineBefore??("theme"===o?.kind?o.inlineBefore:void 0);void 0!==i&&(i?e.root.style.setProperty(t.cssVariable,i):e.root.style.removeProperty(t.cssVariable),e.themeEdits.delete(t.path),u.set(e,n.filter(e=>"theme"!==e.kind||e.token.path!==t.path)))}function b(e,t,r,n,o={}){if(!e.tokens.some(e=>e.path===r.path)||!r.properties.includes(n))return!1;let i=e.elementOriginals.get(t);i||e.elementOriginals.set(t,i=new Map),i.has(n)||i.set(n,{value:t.style.getPropertyValue(n),priority:t.style.getPropertyPriority(n)});let l=t.style.getPropertyValue(n),s=t.style.getPropertyPriority(n),a=`var(${r.cssVariable})`,p=e.elementBindings.get(t);p||e.elementBindings.set(t,p=new Map);let d=p.get(n);if(p.set(n,{tokenPath:r.path,initialValue:d?.initialValue??l,initialPriority:d?.initialPriority??s,mode:"token",declaredPath:d?d.declaredPath:x(e,t,n)?.token.path}),t.style.setProperty(n,a,s),!1===o.recordHistory)return!0;let m={kind:"element",element:t,property:n,before:l,priority:s,after:a},c=u.get(e)??[];c.push(m),u.set(e,c);let h=f.get(t)??[];return h.push(m),f.set(t,h),!0}function v(e,t,r,n){let o=e.elementBindings.get(t),i=o?.get(r);if(!i){let n=x(e,t,r);if(!n)return;o||e.elementBindings.set(t,o=new Map),i={tokenPath:n.token.path,initialValue:t.style.getPropertyValue(r),initialPriority:t.style.getPropertyPriority(r),mode:"custom",declaredPath:n.token.path},o.set(r,i)}i.mode="custom",i.customValue=n}function w(e,t,r){let n=e.elementBindings.get(t)?.get(r);if(!n)return;let o=t.style.getPropertyValue(r);o!==n.initialValue||t.style.getPropertyPriority(r)!==n.initialPriority?e.tokens.find(e=>e.path===n.tokenPath&&e.properties.includes(r)&&o===`var(${e.cssVariable})`)?(n.mode="token",delete n.customValue):(n.mode="custom",n.customValue=o):e.elementBindings.get(t)?.delete(r)}function V(e,t,r){let n=e.elementBindings.get(t)?.get(r);return n?{...n}:null}var B={"background-color":["background"],"border-color":["border"],"font-family":["font"],"font-size":["font"],"font-weight":["font"],"line-height":["font"]};function S(e,t,r,n){let o=[...r.matchAll(/var\(\s*(--[\w-]+)/g)].map(e=>e[1]);if(!o.length||n&&!/^var\(\s*--[\w-]+\s*(?:,[^;{}]*)?\)$/.test(r.trim()))return;let i=e.tokens.filter(e=>e.properties.includes(t)&&o.includes(e.cssVariable));return 1===i.length?i[0]:void 0}function $(e){let t=e.replace(/:(?:where)\([^)]*\)/g,"").replace(/"[^"]*"|'[^']*'/g,"");return 1e4*(t.match(/#[\w-]+/g)?.length??0)+100*(t.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g)?.length??0)+(t.match(/(?:^|[\s>+~(])[a-z][\w-]*/gi)?.length??0)}function E(e){let t=[],r=0,n=0;for(let o=0;o<e.length;o++){let i=e[o];"("===i||"["===i?r++:")"===i||"]"===i?r--:","===i&&0===r&&(t.push(e.slice(n,o)),n=o+1)}return t.push(e.slice(n)),t.map(e=>e.trim()).filter(Boolean)}function x(e,t,r,n=t.style.getPropertyValue(r),o=t.style.getPropertyPriority(r)){let i=t.ownerDocument.defaultView,l=null,s=0,a=e=>{for(let n of e){s++;let e=n.media;if(e&&i?.matchMedia&&e.mediaText&&!i.matchMedia(e.mediaText).matches)continue;let o=n.style,p=n.selectorText;if(o&&p)for(let e of[r,...B[r]??[]]){let r=o.getPropertyValue(e).trim();if(!r)continue;let n=-1;for(let e of E(p))try{t.matches(e)&&(n=Math.max(n,$(e)))}catch{}if(!(n<0)){n+=o.getPropertyPriority(e)?1e9:0,(!l||n>l.rank||n===l.rank&&s>=l.order)&&(l={value:r,property:e,rank:n,order:s});break}}let f=n.cssRules;f&&!o&&a(f)}};for(let e of t.ownerDocument.styleSheets)try{e.disabled||a(e.cssRules)}catch{}let p=l;if(n&&(!(p&&p.rank>=1e9)||o)){let t=S(e,r,n,!0);return t?{token:t,origin:"inline"}:null}if(!p)return null;let f=S(e,r,p.value,p.property===r);return f?{token:f,origin:"stylesheet"}:null}function M(e,t,r){let n=e.elementBindings.get(t)?.get(r),o=e.elementOriginals.get(t)?.get(r),i=n?.initialValue??o?.value??"",l=n?.initialPriority??o?.priority??"";i?t.style.setProperty(r,i,l):t.style.removeProperty(r),e.elementBindings.get(t)?.delete(r)}function O(e,t){return e.tokens.filter(e=>e.properties.includes(t))}function A(e){let t=c(e);return!!t&&(t.themeEdits.size>0||!!f.get(e)?.length||!!t.elementBindings.get(e)?.size)}function T(e){let t=c(e);return!!t&&!!u.get(t)?.length}function z(e){let t=c(e),r=t&&u.get(t)?.pop();if(!t||!r)return;if("theme"===r.kind){r.inlineBefore?t.root.style.setProperty(r.token.cssVariable,r.inlineBefore):t.root.style.removeProperty(r.token.cssVariable);let e=t.themeEdits.get(r.token.path);if(e&&e.after===r.after)e.before===r.before?t.themeEdits.delete(r.token.path):t.themeEdits.set(r.token.path,{...e,after:r.before});else if(!e){let e=u.get(t).find(e=>"theme"===e.kind&&e.token.path===r.token.path);t.themeEdits.set(r.token.path,{before:r.after,after:r.before,inlineBefore:("theme"===e?.kind?e:r).inlineBefore})}return}r.before?r.element.style.setProperty(r.property,r.before,r.priority):r.element.style.removeProperty(r.property);let n=f.get(r.element)??[];n.pop(),n.length||f.delete(r.element)}function C(e){let t=c(e);if(!t)return;for(let[e,r]of t.themeEdits){let n=t.tokens.find(t=>t.path===e);n&&(r.inlineBefore?t.root.style.setProperty(n.cssVariable,r.inlineBefore):t.root.style.removeProperty(n.cssVariable))}t.themeEdits.clear();let r=t.elementOriginals.get(e);for(let[t,n]of r??[])n.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t);t.elementOriginals.delete(e),t.elementBindings.delete(e),f.delete(e),u.set(t,(u.get(t)??[]).filter(t=>"element"===t.kind&&t.element!==e))}function q(){for(let e of a){for(let t of[e.root,...e.elementOriginals.keys(),...e.elementBindings.keys()])C(t);u.set(e,[])}}function j(e){let t=c(e);if(!t)return;let r=[];for(let[n,o]of t.elementBindings.get(e)??[]){let e=t.tokens.find(e=>e.path===o.tokenPath&&e.properties.includes(n));if(!e)continue;let i=t.tokens.find(e=>e.path===o.declaredPath),l=i?`var(${i.cssVariable}) [${i.path}]`:o.initialValue||"(unset)";"token"===o.mode?i!==e&&r.push(`Element ${n}: ${l} → var(${e.cssVariable}) [${e.path}]${i?" [rebind]":""}`):r.push(`Element ${n}: ${l} → ${o.customValue||"(unset)"} [${i?"custom override":"custom value"}]`)}for(let n of f.get(e)??[]){if("element"!==n.kind||t.elementBindings.get(e)?.has(n.property))continue;let o=t.tokens.find(e=>n.after===`var(${e.cssVariable})`);o&&r.push(`Element ${n.property}: ${n.before||"(unset)"} → var(${o.cssVariable}) [${o.path}]`)}for(let[e,n]of t.themeEdits){let o=t.tokens.find(t=>t.path===e);o&&r.push(`Shared theme ${e} (${o.cssVariable}): ${n.before} → ${n.after}; preview scope ${o.impactSelector} (${g(t,o)} matching elements)`)}return r.length?["Proposed design-token changes (preview only)",...r,"Token references are preserved for element assignments; refresh resets previews."].join("\n"):void 0}function D(){return{id:"css-variables",list:()=>[...a].flatMap(e=>e.tokens.map(t=>function(e,t){return{path:t.path,type:t.type,value:h(e,t),properties:[...t.properties],group:t.path.split(".")[0],ref:t.cssVariable}}(e,t))),resolve(t){let r=c(t),n={};if(!r||!e(t))return n;let o=t.ownerDocument.defaultView?.getComputedStyle(t);for(let e of new Set(r.tokens.flatMap(e=>e.properties))){let i=x(r,t,e);n[e]=i?{path:i.token.path}:{offToken:o?.getPropertyValue(e).trim()??""}}return n},preview(t,r,n){let o=c(t),i=o?.tokens.find(e=>e.path===n.path);if(!o||!i||!e(t))return()=>{};let l=t.style.getPropertyValue(r),s=t.style.getPropertyPriority(r);return b(o,t,i,r,{recordHistory:!1}),()=>{l?t.style.setProperty(r,l,s):t.style.removeProperty(r),w(o,t,r)}},describe:(e,t,r,n)=>`Set ${t} to var(${n.ref})`}}export{r as a,o as b,i as c,l as d,s as e,m as f,c as g,h,g as i,y as j,k,P as l,b as m,v as n,w as o,V as p,x as q,M as r,O as s,A as t,T as u,z as v,C as w,q as x,j as y,D as z};

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

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