@hazem3500/komo 0.9.38 → 0.9.40

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

@@ -0,0 +1 @@
+import{A as e,a as t,c as n,d as i,e as o,f as r,g as a,h as s,i as d,j as l,k as p,l as c,m as u,n as m,o as g,p as f,q as h,r as b,s as v,t as x,u as k,v as y,w,x as E,y as C,z as $}from"./chunk-RQNYOMUH.js";import{c as S}from"./chunk-4KEVPMJJ.js";import{a as A,b as P,e as N,f as L,h as M,i as T,j as R,k as z,l as q,m as D,n as j,o as O,p as V,q as U,r as H,s as B,t as _,u as J,v as I,w as F,x as W,y as Y,z as K}from"./chunk-UZLXJJJW.js";import{g as Q}from"./chunk-WNJLJD4A.js";import{a as X}from"./chunk-RPY7OOOR.js";var Z=new Map,G=new Map,ee=new WeakSet,te=new WeakMap;function ne(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var ie=new Map,oe=e=>e.definition.source?`${e.definition.source}${e.definition.line?`:${e.definition.line}`:""}`:"";function re(e){if(e)for(let[e,t]of Z){let n=N(e);n&&(ie.set(e,n.props),n.setProps({...n.props,...Object.fromEntries(t)}))}else for(let[e,t]of ie)N(e)?.setProps(t);e||ie.clear(),q(e),C(e)}function ae(e){return!!Z.get(e)?.size}function se(e){let t=N(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=Z.get(e);return r||Z.set(e,r=new Map),r.has(n)||r.set(n,o),{propName:n,before:o}}function de(e,t,n){let i=N(e),o=i?.definition.props.find(e=>e.name===t);return!(!i||i.definition.textProp!==t||"string"!==o?.kind||n.length>500||!P(o,n))&&(i.setProps({...i.props,[t]:n}),!0)}function le(e,t,n,i){if(n===i){let i=Z.get(e);return void(i?.get(t)===n&&!(G.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||Z.delete(e)))}let o=G.get(e);o||G.set(e,o=[]),o.push({propName:t,before:n,after:i})}function pe(e,t,n){de(e,t,n);let i=Z.get(e);i?.get(t)===n&&!(G.get(e)??[]).some(e=>e.propName===t)&&(i.delete(t),i.size||Z.delete(e))}function ce(e){return!!e&&!!G.get(e)?.length}function ue(e){let t=Z.get(e),n=N(e);if(!t?.size||!n)return;let i=M(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}: ${ne(t)} → ${ne(r)}${a?` [${a.path}]`:" [custom value]"}`});return["Proposed React prop changes (preview only)",`Component: ${n.definition.name}`,...oe(n)?[`Source: ${oe(n)}`]:[],...o,"Runtime preview only; inline feedback does not write source files."].join("\n")}function me(e,t){if(N(e))return null;let n;try{n=t?.components?.identify(e)}catch{}let i=L(e);return n?.name&&(!i||i.root!==n.element&&i.root.contains(n.element))?n:null}var ge=e=>String(e).replace(/\s+/g," ").trim();function fe(e,t){let n=Object.entries(a(t)).map(([e,t])=>`${ge(e)}=${ge(t)}`).join(", "),i=me(e,t),o=N(e),r=o?{root:e,component:o}:i?void 0:L(e);if(r){let{definition:e,props:t}=r.component;i={name:e.name,source:oe(r.component),props:{...t,...Object.fromEntries(Z.get(r.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])=>`${ge(e)}=${JSON.stringify(t).replace(/→/g,"\\u2192")}`);return[n&&`Theme: ${n}`,i?.name&&`Component: ${ge(i.name)}${i.source?` (${ge(i.source)})`:""}`,s.length&&`Props: ${s.join(", ")}`].filter(e=>!!e)}function he(t){return[ue(t),K(t),e(t)].filter(e=>!!e).join("\n\n")||void 0}function be(e,t,n){te.get(e)?.abort();let i=new AbortController;te.set(e,i),e.addEventListener("click",e=>{let i=t();if(!i)return;let o=K(i)||x(i);!N(i)&&!o||(e.stopImmediatePropagation(),n(i,he(i)))},{capture:!0,signal:i.signal})}function ve(e){return I(e)}function xe(e){return J(e)||x(e)||k(e)}function ke(e){F(e)}function ye(e){W(e),y(e)}function we(e){if(!e||ee.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),ee.add(e)}function Ee(e,t){e.dataset.picker="token",e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false");let n,i,o=i=>import("./token-picker-RF7E5P72.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 Ce(e,t){let n=document.createElement("div");n.className="design-token-match",n.hidden=!0;let i=document.createElement("span"),o=document.createElement("button");o.type="button",o.textContent="Use token",n.append(i,o);let r=()=>{};return o.addEventListener("click",e=>{e.preventDefault(),r()}),{show(a,s){n.isConnected||(e??t.parentElement)?.after(n),n.hidden=!a,r=s,i.textContent=a?`Matches ${a.label||a.path}`:"",i.title=a?`${a.path}${a.ref?` · ${a.ref}`:""} · ${a.value}`:"",o.setAttribute("aria-label",a?`Use token ${a.label||a.path}`:"Use token")}}}function $e(e,t,n,i){let o=M(e);if(!o)return null;let r=_(o,t);if(!r.length)return null;we(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 l=document.createElement("button");l.type="button",l.className="design-token-detach",l.title="Detach token",l.setAttribute("aria-label",`Detach token from ${t}`),l.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 p=document.createElement("select");p.setAttribute("aria-label",`Style token for ${t}`);let u=document.createElement("small");u.className="design-token-binding__state",u.setAttribute("aria-live","polite");let m=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;u.id=m,p.setAttribute("aria-describedby",m);let h=document.createElement("option");h.value="custom",h.textContent="Custom value",p.append(h);for(let e of r){let t=document.createElement("option"),n=T(o,e);t.value=e.path,t.textContent=n?`${e.path} · ${n}`:e.path,p.append(t)}let b=g(),v=e=>({path:e.path,type:e.type,value:T(o,e),properties:e.properties,group:e.path.split(".")[0],ref:e.cssVariable}),x=Ce(null,a),k=e=>{p.value=e,p.dispatchEvent(new Event("change"))};Ee(p,()=>({tokens:r.map(v),property:t,current:p.value,onPreview:n=>{let i=r.find(e=>e.path===n.path);return Q(e,t,`var(${i.cssVariable})`)},onSelect:e=>k(e.path)}));let y=()=>{let n=U(o,e,t),i=n?null:H(o,e,t),s="token"===n?.mode?r.find(e=>e.path===n.tokenPath):void 0,l=s??i?.token;p.value=l?.path??"custom",d.textContent=l?.path??"";let m=n?.declaredPath,g=s?"token":i?"connected":m?"override":"custom";a.dataset.mode=g,a.parentElement?.setAttribute("data-token-mode",g),u.textContent="token"===g?m&&m!==s?.path?`Rebound from ${m} · preview`:`Linked to ${s?.path} · preview`:"connected"===g?"Connected "+("inline"===i?.origin?"inline":"from stylesheet"):"override"===g?`Custom override · was ${m}`:"",p.title=u.textContent||"Choose a token",b.hidden="custom"!==g;let h="custom"===g?getComputedStyle(e).getPropertyValue(t).trim():"",y="custom"===g?c(r.map(v),h):void 0;"custom"===g&&f(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}),p.addEventListener("change",()=>{let i=e.style.getPropertyValue(t),s=r.find(e=>e.path===p.value),d=U(o,e,t);if(s&&d&&s.path===d.declaredPath)B(o,e,t),n(i,e.style.getPropertyValue(t),s.path);else if(s)(s.path!==H(o,e,t)?.token.path||d)&&j(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;O(o,e,t,s),e.style.setProperty(t,s),n(i,s)}y()}),l.addEventListener("click",()=>{let e=r.find(e=>e.path===p.value),t=a.parentElement?.querySelector("input[data-property]"),n=e&&T(o,e);t&&n&&(t.value="number"===t.type?String(parseFloat(n)):n),p.value="custom",p.dispatchEvent(new Event("change")),a.parentElement?.querySelector("[data-property]")?.focus()}),a.append(d,p,s,l,b,u),queueMicrotask(y),y(),a}function Se(e){let t=M(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...E(e)])}function Ae(e,t,n,i,o,r,s,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:a}of u){if(o.querySelector(".design-token-binding")||!n.contains(o))continue;let d=t(i,o,a,()=>{r&&(a.value=r(i,e));let t=o.querySelector('input[type="range"],input[type="color"]');t&&(t.value="color"===i.kind&&s?s(a.value):a.value)});d&&o.append(d)}},g=p?.tokens;if(!g)return void m((t,n,r,a)=>$e(e,t.property,e=>{i(t,r,e),a()},o));we(o);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=>d(e,{...a(t),[n.id]:i.id}).then(e=>({label:Be(i.label,i.id),values:new Map(e.map(e=>[e.path,e.value]))})))).catch(()=>[])}(g,p);return Promise.all([d(g,a(p)),l(g,e)]).then(([t,n])=>{m((i,o,r,s)=>Pe(g,e,i.property,t,n[i.property],e=>{c?.(e),s()},o,r,f,s,()=>d(g,a(p))))},()=>{})}function Pe(e,o,r,a,s,d,l,x,k,y,w){let E=p(a,r);if(!E.length&&!s)return null;let C=t(o,r,s,e,a),$=s&&"offToken"in s?s.offToken:void 0,S=void 0===$?void 0:c(E,$),A=document.createElement("span");A.className="design-token-binding";let P=document.createElement("span");P.className="design-token-chip",P.setAttribute("aria-hidden","true");let N=document.createElement("span");N.className="design-token-icon",N.setAttribute("aria-hidden","true");let L=document.createElement("button");L.type="button",L.className="design-token-detach",L.title="Edit the value",L.setAttribute("aria-label",`Edit ${r} value`),L.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 M=document.createElement("select");M.setAttribute("aria-label",`Style token for ${r}`),M.disabled=!E.length;let T=document.createElement("option");T.value="",T.textContent="Choose a token",M.append(T);let R=()=>{M.replaceChildren(T),M.disabled=!E.length;let e=new Map([["",M]]);for(let t of E){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=`${u(t)}${t.ref?` · ${t.ref}`:""}${t===S?" · same value":""}`,o.title=m(t),i.append(o)}for(let[t,n]of e)t&&M.append(n)};R();let z=g();void 0!==$&&f(z,$,S);let q=document.createElement("small");q.className="design-token-binding__state",q.setAttribute("aria-live","polite");let D=!1,j=Ce(l,A),O=()=>{let e=i(o,r,s);return D?void 0:e&&"path"in e?e.path:void 0},V=Ee(M,()=>({tokens:a,property:r,current:O(),themes:k,onPreview:t=>{let n=h(e,o,r,t);return y?.(),()=>{n(),y?.()}},onSelect:H})),U=()=>{let e=b(o,r),t=O(),n=t?a.find(e=>e.path===t):void 0;M.value=t&&E.some(e=>e.path===t)?t:"",P.textContent=n?u(n):t??"";let d=t?e?"token":"connected":"custom";A.dataset.mode=d,(l??A.parentElement)?.setAttribute("data-token-mode",d),z.hidden=!!t;let p=i(o,r,s),g=p&&"offToken"in p?p.offToken:getComputedStyle(o).getPropertyValue(r).trim()||$||"",h=t?void 0:c(E,g);t||f(z,g,h),q.textContent=n?`${e?"Preview":"Uses"} ${m(n)}`:t?`Uses ${t}`:z.hidden?"":z.title,M.title=q.textContent||"Choose a token",j.show(z.hidden?void 0:h,()=>h&&H(h))};function H(t){D=!1;let n=C??{offToken:getComputedStyle(o).getPropertyValue(r).trim()},i="path"in n?a.find(e=>e.path===n.path):void 0;d(v(e,o,r,t,n,i)),U()}M.addEventListener("change",()=>{let e=E.find(e=>e.path===M.value);e?H(e):U()}),L.addEventListener("click",()=>{D=!0,U(),x?.focus()}),A.append(P,M,N,L,z,q);let B=new MutationObserver(U);B.observe(o,{attributes:!0,attributeFilter:["style","class"]});let _=new AbortController,J=new MutationObserver(()=>{A.isConnected||(B.disconnect(),J.disconnect(),_.abort())});J.observe(document,{childList:!0,subtree:!0});let I=l?.getRootNode();I instanceof ShadowRoot&&J.observe(I,{childList:!0,subtree:!0}),I?.addEventListener("komo-theme-changing",V.prepare,{signal:_.signal});let F=0;return I?.addEventListener("komo-theme-change",()=>{let t=++F;(w?.()??Promise.resolve([...a])).then(i=>{_.signal.aborted||t!==F||(n(o,e,a=i),E=p(a,r),R(),U(),(I instanceof ShadowRoot?I.activeElement:document.activeElement)?.isSameNode(x??null)||y?.(),V.refresh())},()=>{})},{signal:_.signal}),U(),A}var Ne=!1;function Le(e,t,n,i){let o=M(e);if(!o||!o.tokens.length)return null;we(i);let r=document.createElement("details");r.className="design-group design-theme-group",r.open=Ne,r.addEventListener("toggle",()=>{r.isConnected&&(Ne=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(Me(o,a,t,n,e))}return r}function Me(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} · ${R(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&&z(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=T(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",()=>{D(e,t),m(),i()}),m(),r.append(a,p,f),r}function Te(e,t,n){let i=M(e);return i&&O(i,e,t,n),o(e,t)}function Re(e,t){let n=M(e);n&&V(n,e,t)}function ze(e){let t=G.get(e),n=t?.at(-1),i=N(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=Z.get(e);r||Z.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||Z.delete(e)}function qe(){for(let e of[...Z.keys()])Je(e);Z.clear(),G.clear(),Y(),w(),He()}var De,je=new Map,Oe=new WeakMap,Ve=new WeakSet;function Ue(e){try{return String(e.current())}catch{return}}function He(e){for(let[e,t]of je)try{Ue(e)!==t&&e.apply(t)}catch{}je.clear();let t=e?.querySelector(".design-theme-switch");t&&(Oe.get(t)?.(),t.remove())}var Be=(e,t)=>e||t.charAt(0).toUpperCase()+t.slice(1);function _e(e,t,n,i,o){i&&o&&!Ve.has(o)&&(Ve.add(o),function(e,t,n){let i=0;s(e,t.ownerDocument,()=>{let o=++i,r=e?.tokens;t.dispatchEvent(new Event("komo-theme-changing")),(r?d(r,a(e)):Promise.resolve([])).then(e=>{n.aborted||o!==i||(t.dispatchEvent(new Event("komo-theme-changing")),r&&$(r,e),t.dispatchEvent(new Event("komo-theme-change")))},()=>{})},n)}(t,i,o));let r=e.closest(".design-inspector")?.querySelector(".design-inspector__heading"),l=(r??e).querySelector(".design-theme-switch"),p=l?.open??!1;l&&Oe.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=Ue(e),i=Array.isArray(e?.options)?e.options.filter(e=>"string"==typeof e?.id):[];if(void 0===t||i.length<2)continue;let o=Be(e.label,String(e.id)),r=i=>{let o=Ue(e);if(i!==o){je.has(e)||je.set(e,o??t),De=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(Be(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=Be(e.label,e.id),n.setAttribute("aria-pressed",String(e.id===t)),n.addEventListener("click",()=>r(e.id)),s.append(n)}}De===e&&(g=s.querySelector("[aria-pressed=true]")??s),h.push(()=>{let n=Ue(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}: ${Be(i.find(e=>e.id===n)?.label,n)}`}),a.append(d,s),m.append(a)}if(De=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};Oe.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()}),we(i),r?r.insertBefore(c,r.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}),S(u,()=>{y(),u.isConnected||x.abort()},k),g?.focus({preventScroll:!0})}function Je(e){let t=Z.get(e),n=N(e);!t?.size||!n||(n.setProps({...n.props,...Object.fromEntries(t)}),n.releaseProps?.([...t.keys()]),Z.delete(e),G.delete(e))}function Ie(e,t,n,i,o,r){let a,s=t.definition.props.find(e=>e.name===n);if(!s||!P(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=Z.get(e);d||Z.set(e,d=new Map);let l=d.has(n)?d.get(n):(G.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||Z.delete(e);let p=G.get(e);return p||G.set(e,p=[]),p.push({propName:n,before:a,after:i}),r(()=>ze(e)),!0}function Fe(e,t,n,i,o,r){let a=N(e);if(!a){let t,r=me(e,o);try{t=r&&o?.components?.editor?.(r)}catch{}if(t&&r&&X(r.element)){if(r.element!==e){we(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=A(r,t)}if(!a){let t=null;try{t=r&&o?.components?.panel?.(r)||null}catch{}return t&&we(n),t??function(e,t,n){let i=L(e);if(!i)return null;we(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)}}we(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}${oe(a)?` · ${oe(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(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);Ie(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=!Z.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=Z.get(e);if(!i?.has(n.name))return;Ie(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=M(e),s=r?_(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]:"";Ie(e,a,n.name,r,d,t)&&u()}),r.append(l,p),o.append(r),u()}}s.append(p)}return s}export{Ae as attachStyleTokenControls,_e as attachThemeSwitcher,se as beginReactTextEdit,ve as canUndoDesignTokenEdit,ce as canUndoReactProp,pe as cancelReactTextEdit,Pe as createAdapterTokenControl,Le as createDesignThemePanel,$e as createElementTokenControl,Fe as createReactPropsPanel,fe as designContext,le as finishReactTextEdit,xe as hasDesignTokenEdit,ae as hasReactPropChanges,be as installCommentCapture,Te as noteDesignTokenOverride,r as originalDesignTokenStyle,de as previewReactTextEdit,he as proposedDesignChanges,ue as proposedReactChanges,ye as resetDesignTokenEdits,qe as resetPreviews,Je as resetReactProps,He as restoreThemes,re as showDesignBefore,Re as syncDesignTokenBinding,Se as tokenBoundProperties,ke as undoDesignTokenEdit,ze as undoReactProp};

package/dist/react.js

@@ -1 +1 @@
-"use client";import{A as e,c as n,d as t,g as r}from"./chunk-UZLXJJJW.js";import{b as o}from"./chunk-HHOQUW5B.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-RPY7OOOR.js";import"./chunk-3276ZULN.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t||"frame"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(e){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===e.enabled&&r.current)return n(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component]),s(()=>{!0===e.enabled&&t(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component,e.props,e.onChange]),{ref:o.current,"data-komo-inspectable":e.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return r(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{e as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};
+"use client";import{A as e,c as n,d as t,g as r}from"./chunk-UZLXJJJW.js";import{b as o}from"./chunk-VEY47JTO.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-RPY7OOOR.js";import"./chunk-3276ZULN.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";import{useEffect as s,useRef as c}from"react";function u(e){let n=c(null);s(()=>{if(n.current&&function(e,n){return[...new Set([...Object.keys(e),...Object.keys(n)])].every(t=>{if("shortcuts"===t||"features"===t||"frame"===t){let r=e[t]??{},o=n[t]??{};return Object.keys({...r,...o}).every(e=>Object.is(r[e],o[e]))}if("design"===t){let t=e.design,r=n.design;if(!t||!r)return t===r;let o=t.themes??[],s=r.themes??[];return t.tokens===r.tokens&&t.components===r.components&&o.length===s.length&&o.every((e,n)=>e===s[n])}if("onboarding"!==t)return Object.is(e[t],n[t]);let r=e.onboarding,o=n.onboarding;return r&&o?Object.keys({...r,...o}).every(e=>"sites"===e?r.sites?.length===o.sites?.length&&(r.sites??[]).every((e,n)=>e===o.sites?.[n]):Object.is(r[e],o[e])):r===o})}(n.current.config,e)||(n.current?.controller.destroy(),n.current=null,!1===e.enabled))return;let t={...e,...e.onboarding?{onboarding:{...e.onboarding,...e.onboarding.sites?{sites:[...e.onboarding.sites]}:{}}}:{}};n.current={config:t,controller:o(t)}}),s(()=>()=>{n.current?.controller.destroy(),n.current=null},[])}function i(e){let r=c(null),o=c(null);return o.current||(o.current=e=>{r.current=e}),s(()=>{if(!0===e.enabled&&r.current)return n(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component]),s(()=>{!0===e.enabled&&t(r.current,e.component,e.props,e.onChange)},[e.enabled,e.component,e.props,e.onChange]),{ref:o.current,"data-komo-inspectable":e.component.id}}function l(e){s(()=>{if(!0!==e.enabled)return;let n=e.root??document.documentElement;return r(n,e.tokens)},[e.root,e.tokens,e.enabled])}export{e as cssVariableTokens,u as useKomo,l as useKomoDesignTokens,i as useKomoInspectable};