@hazem3500/komo 0.9.2 → 0.9.3

package/dist/design-comment-MWNQNKWT.js

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

package/dist/design-export-ZHCBPSWY.js

@@ -1 +0,0 @@
-import"./chunk-I7AUKTXE.js";function e(e){let n=[];for(let t=e;t;t=t.parentElement){let r=t.id&&!/^radix-|^:r|_r_|«r/.test(t.id)?`#${CSS.escape(t.id)}`:"";if(r&&1===document.querySelectorAll(r).length)return[r,...n].join(" > ");if(t===document.body||!t.parentElement)return[t.tagName.toLowerCase(),...n].join(" > ");let o=t===e?[...t.classList].slice(0,2).map(e=>`.${CSS.escape(e)}`).join(""):"",a=[...t.parentElement.children].filter(e=>e.tagName===t.tagName).indexOf(t)+1;n.unshift(`${t.tagName.toLowerCase()}${o}:nth-of-type(${a})`)}return n.join(" > ")}function n(n,t){return`${e(n)} {\n${[...t].map(([e,n])=>`  ${e}: ${n};`).join("\n")}\n}`}function t(n,t,r,o,a){let i=[...t??[]].filter(([e])=>!o?.has(e)).map(([e,n])=>`- ${e}: ${r(e)||"(unset)"} → ${n}`);return[i.length?`Proposed style changes (preview only)\nTarget: ${e(n)}\n${i.join("\n")}`:"",...a].filter(Boolean).join("\n\n")||void 0}export{e as cssSelector,n as cssText,t as designProposal};

package/dist/design-panel-BPVXFERR.js

@@ -1 +0,0 @@
-import"./chunk-I7AUKTXE.js";var e=".design-inspector__controls>*+*{border-top:1px solid #ffffff0d}.design-group{padding:0 12px 10px}.design-section>.design-group{padding-bottom:12px}.design-group summary{cursor:pointer;display:flex;align-items:center;gap:4px;height:36px;color:#e9e6e1;font-size:11px;font-weight:600;list-style:none}.design-group summary::-webkit-details-marker{display:none}.design-group summary:after{content:\"\";width:5px;height:5px;margin:-2px 0 0 3px;border:solid #77736f;border-width:0 1.2px 1.2px 0;rotate:45deg;opacity:0;transition:opacity .12s,rotate .2s var(--ease-smooth-out)}.design-group:not([open]) summary:after{rotate:-45deg;margin:0 0 0 2px}.design-group summary:is(:hover,:focus-visible):after,.design-group:not([open]) summary:after{opacity:1}.design-group summary:focus-visible{outline-offset:-2px;border-radius:6px}.design-section{position:relative}.design-section__title{display:flex;align-items:center;height:36px;padding:0 12px;color:#898680;font-size:11px;font-weight:600}.design-section__tools{position:absolute;z-index:1;top:6px;right:8px;display:flex;gap:2px}.design-section__tools button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#898680;font-size:16px;line-height:1}.design-section__tools button:hover{background:#ffffff12;color:#f1efeb}.design-text-edit{font-size:0!important}.design-text-edit:before{content:\"T\";font:600 13px/1 Georgia,Times New Roman,serif}.design-text-edit[aria-label^=Finish]{background:#bda6ef33;color:#e6dcfb!important}.design-text-edit:disabled{opacity:.35;cursor:default}.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}.design-field{position:relative;--lead:4px;min-width:0;height:28px;display:flex;align-items:center;border-radius:6px;background:#ffffff0a;color:#898680;transition:box-shadow .12s var(--ease-smooth-out)}.design-field:hover{box-shadow:inset 0 0 0 1px #ffffff1c}.design-field:focus-within{box-shadow:inset 0 0 0 1px #bda6ef}.design-field:has([aria-invalid=true]){box-shadow:inset 0 0 0 1px #fda29b}.design-field[data-wide]{grid-column:1/-1}.design-field:has(.design-field__glyph){--lead:22px}.design-field--color{--lead:26px}.design-field>input:not([type=color]),.design-field>select{flex:1;box-sizing:border-box;width:100%;min-width:0;height:100%;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:none;color:#f1efeb;font:inherit;font-size:11px;font-variant-numeric:tabular-nums;text-overflow:ellipsis}.design-field>:is(input,select):focus-visible{outline:0}.design-field>select{appearance:none;padding-right:20px;cursor:pointer;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3 4 5.5 6.5 3' fill='none' stroke='%23898680' stroke-width='1.2'/%3E%3C/svg%3E\") right 7px center/8px no-repeat}.design-field>select option{background:#191919}.design-field input[type=number]{appearance:textfield;-moz-appearance:textfield}.design-field input::-webkit-inner-spin-button{appearance:none}.design-field__glyph{flex:none;display:grid;place-items:center;width:22px;height:100%;margin-right:-6px;color:#77736f;font-size:10px;font-weight:600;cursor:ew-resize;user-select:none;touch-action:none}.design-field__glyph:hover{color:#e9e6e1}.design-field__glyph svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.1}.design-field input[type=color]{flex:none;width:16px;height:16px;margin:0 -2px 0 6px;padding:0;border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26;background:none;cursor:pointer}.design-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.design-field input[type=color]::-webkit-color-swatch{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff26}.design-field input[type=color]::-moz-color-swatch{border:0;border-radius:4px}\n",t=[{property:"width",label:"Width",kind:"size",glyph:"W"},{property:"height",label:"Height",kind:"size",glyph:"H"},{property:"padding",label:"Padding",kind:"length",glyph:"M1.5 1.5h9v9h-9zM4.5 4.5h3v3h-3z",max:200},{property:"gap",label:"Gap",kind:"length",glyph:"M1.5 1.5h3v9h-3zM7.5 1.5h3v9h-3z",max:200},{property:"margin",label:"Margin",kind:"length",glyph:"M4 4h4v4H4zM1 3V1h2m6 0h2v2m0 6v2H9m-6 0H1V9",max:200},{property:"border-radius",label:"Corner radius",kind:"length",glyph:"M1.5 10.5V6A4.5 4.5 0 0 1 6 1.5h4.5",max:96},{property:"display",label:"Layout",kind:"select",values:["block","flex","grid","inline-flex","inline-grid"]},{property:"font-family",label:"Font family",kind:"text",wide:!0,placeholder:"system-ui, sans-serif"},{property:"font-size",label:"Font size",kind:"length",glyph:"M2 3V1.5h8V3M6 1.5v9m-1.5 0h3",min:1,max:160},{property:"line-height",label:"Line height",kind:"text",glyph:"M1 1.5h10M1 10.5h10M3.5 8.5 6 3l2.5 5.5",placeholder:"1.4 or 24px"},{property:"font-weight",label:"Weight",kind:"select",values:["300","400","500","600","700","800"]},{property:"text-align",label:"Alignment",kind:"select",values:["left","center","right","justify"]},{property:"color",label:"Text color",kind:"color",wide:!0},{property:"background-color",label:"Fill",kind:"color",wide:!0},{property:"border-width",label:"Border width",kind:"length",glyph:"M1 2.5h10M1 6h10M1 9.5h10",max:24},{property:"border-style",label:"Border style",kind:"select",values:["none","solid","dashed","dotted"]},{property:"border-color",label:"Border color",kind:"color"}],n=["font-family","font-size","line-height","font-weight","text-align","color"];function i(e){if(/^#[\da-f]{6}$/i.test(e))return e;if(/^#[\da-f]{3}$/i.test(e))return`#${[...e.slice(1)].map(e=>e+e).join("")}`;let t=e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);return t?`#${t.slice(1,4).map(e=>Number(e).toString(16).padStart(2,"0")).join("")}`:"#000000"}function r(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?i(e):e||"transparent":Number(t)?e:"transparent"}function o(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return r(n);if("length"===e.kind||"size"===e.kind){let t=n.match(/^(-?\d+(?:\.\d+)?)px$/);return t?String(Math.round(10*Number(t[1]))/10):"size"===e.kind?n||"auto":"0"}return n}function l(e,t){let{element:n}=t,r=document.createElement("div");r.className=`design-field design-field--${e.kind}`,r.dataset.fieldProperty=e.property,r.toggleAttribute("data-wide",!!e.wide);let l="select"===e.kind?document.createElement("select"):document.createElement("input");if(l instanceof HTMLSelectElement)for(let t of e.values??[]){let e=document.createElement("option");e.value=e.textContent=t,l.append(e)}else l.type="length"===e.kind?"number":"text",l.autocomplete="off",l.spellcheck=!1,l.placeholder=e.placeholder??"","length"===e.kind&&(l.min=String(e.min??0),l.max=String(e.max??1e3),l.setAttribute("inputmode","decimal"));if(l.dataset.property=e.property,l.setAttribute("aria-label",e.label),l.title=e.label,l.value=o(e,n),l instanceof HTMLSelectElement&&!l.value){let t=document.createElement("option");t.value=t.textContent=o(e,n),l.prepend(t),l.value=t.value}let d=()=>t.begin(l,e.property),a=()=>{t.apply(l,e.property,function(e,t){let n=t.value.trim();if("color"===e.kind){let e=document.createElement("span").style;return e.color=n,e.color?n:null}if("length"===e.kind){if(!n)return null;let t=Number(n);return!Number.isFinite(t)||t<(e.min??-200)||t>(e.max??1e3)?null:`${t}px`}return"size"===e.kind||"line-height"===e.property?/^(auto|normal|(?:\d+(?:\.\d+)?)(?:px|%|vw|vh|rem|em)?)$/.test(n)?"size"===e.kind&&/^[\d.]+$/.test(n)?`${n}px`:n:null:n}(e,l)),t.commit(l,e.property,!1)},p=()=>t.commit(l,e.property);if(l.addEventListener("focus",d),l.addEventListener("input",a),l.addEventListener("change",p),l.addEventListener("blur",p),"color"===e.kind){let t=document.createElement("input");t.type="color",t.setAttribute("aria-label",`${e.label} picker`);let n=()=>{t.value=i(l.value)};n(),t.addEventListener("pointerdown",d),t.addEventListener("focus",d),t.addEventListener("input",()=>{l.value=t.value,a()}),t.addEventListener("change",p),l.addEventListener("input",n),r.append(t)}if(e.glyph){let t=t=>{let i=l.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),r=i?i[2]:"text"===e.kind?"px":"",o=i?Number(i[1]):parseFloat(getComputedStyle(n).getPropertyValue(e.property))||0,d=Math.round(10*(o+t*("text"!==e.kind||r?1:.1)))/10;"text"!==e.kind&&(d=Math.min(e.max??1e4,Math.max(e.min??0,d))),l.value=`${d}${r}`,a()},i=document.createElement("span");i.className="design-field__glyph",i.setAttribute("aria-hidden","true"),i.title=`${e.label} · drag to adjust`,e.glyph.length>1?i.innerHTML=`<svg viewBox="0 0 12 12"><path d="${e.glyph}"/></svg>`:i.textContent=e.glyph,i.addEventListener("pointerdown",e=>{e.preventDefault(),d(),i.setPointerCapture?.(e.pointerId);let n=e.clientX,r=e=>{let i=Math.trunc((e.clientX-n)/2);i&&(n+=2*i,t(i*(e.shiftKey?10:1)))},o=()=>{i.removeEventListener("pointermove",r),p()};i.addEventListener("pointermove",r),i.addEventListener("pointerup",o,{once:!0}),i.addEventListener("pointercancel",o,{once:!0})}),l.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),t(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)))}),r.append(i)}return l instanceof HTMLInputElement&&l.addEventListener("keydown",e=>{"Enter"===e.key&&l.blur()}),r.append(l),r}function d(e,n,i,r=[]){let o=document.createElement("section");o.className="design-section";let d=document.createElement("div");if(d.className="design-section__tools",d.append(...r),!i){let e=document.createElement("span");return e.className="design-section__title",e.textContent=n,o.append(e,d),o}let a=document.createElement("details");a.className="design-group",a.open=!e.collapsed.has(n);let p=document.createElement("summary");p.textContent=n;let s=document.createElement("div");s.className="design-grid";for(let n of i)s.append(l(t.find(e=>e.property===n),e));return a.append(p,s),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(n):e.collapsed.add(n))}),o.append(d,a),o}function a(e,t){let{element:i,changed:o}=t,l=getComputedStyle(i),a=e=>e.some(e=>o?.has(e)),p=[...i.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim())||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(i.getAttribute("style")??"")||a(n),s=/flex|grid/.test(l.display)||a(["gap"]),g="transparent"!==r(l.backgroundColor)||a(["background-color"]),c=["top","right","bottom","left"].some(e=>parseFloat(l.getPropertyValue(`border-${e}-width`))>0&&"none"!==l.getPropertyValue(`border-${e}-style`))||a(["border","border-width","border-style","border-color"]),u=(n,i,r,o)=>function(e,t,n){let i=document.createElement("button");return i.type="button",i.title=e,i.setAttribute("aria-label",e),i.textContent=t,i.addEventListener("click",n),i}(`Add ${n}`,"+",()=>{let n=document.createElement("input");t.begin(n,i),t.apply(n,i,r),t.commit(n,i),t.rerender(),e.querySelector(`[data-property="${o}"]`)?.focus()});e.append(d(t,"Layout",["width","height","padding",...s?["gap"]:[],"margin",...c?[]:["border-radius"],"display"])),p&&e.append(d(t,"Typography",n,[t.editText])),e.append(g?d(t,"Fill",["background-color"]):d(t,"Fill",null,[u("fill","background-color","#ffffff","background-color")]),c?d(t,"Border",["border-width","border-radius","border-style","border-color"]):d(t,"Border",null,[u("border","border","1px solid","border-width")]))}export{e as designPanelStyles,l as fieldControl,t as fields,a as renderPanel,i as toHex,o as valueFor};

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

@@ -1 +0,0 @@
-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 as d,m as l,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 as y,y as x}from"./chunk-JXIYWNFL.js";import"./chunk-I7AUKTXE.js";var w=new Map,E=new WeakMap,$=!1;function C(e){let t={};for(let n of e?.themes??[])try{t[n.id]=n.current()}catch{}return t}function P(e,t={}){let n=E.get(e);n||E.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 S(e,t){return Promise.resolve().then(()=>e.resolve(t)).then(e=>e??{},()=>({}))}function N(e){let t=e.trim().toLowerCase().replace(/\s+/g,""),n=/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/.exec(t)?.[1];if(!n)return t.replace(/^rgba\((\d+,\d+,\d+),1\)$/,"rgb($1)");let o=n.length<5?[...n].map(e=>e+e).join(""):n,[i,r,a,s=255]=o.match(/../g).map(e=>parseInt(e,16));return 255===s?`rgb(${i},${r},${a})`:`rgba(${i},${r},${a},${+(s/255).toFixed(3)})`}function A(e,t){let n=N(t);return n?e.find(e=>("color"===e.type||"dimension"===e.type)&&N(e.value)===n):void 0}function M(e){return e.label||e.path}function T(e){return[e.path,e.ref,e.value,e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · ")}function L(){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 ${M(n)}`:""}`,e.setAttribute("aria-label",e.title)}function j(e,t,n,o){try{if(e.preview)return e.preview(t,n,o)??(()=>{})}catch{return()=>{}}return function(e,t,n){let o=e.style;if(!o)return()=>{};let i=o.getPropertyValue(t),r=o.getPropertyPriority(t);return o.setProperty(t,n,r),()=>{i?o.setProperty(t,i,r):o.removeProperty(t)}}(t,n,o.value)}function R(e){let t=w.get(e);t?.pop()?.undo(),t&&!t.length&&w.delete(e)}function q(e){return!!w.get(e)?.length}function D(e){for(;w.has(e);)R(e)}function V(e){return[...new Set(w.get(e)?.map(e=>e.property))]}function O(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 B(e){let t=[],n=new Set;for(let o of function(e){let t=new Map;for(let n of w.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=O(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 H=new Map,I=new Map,_=new WeakSet,F=new WeakMap;function U(e){return void 0===e?"unset":JSON.stringify(e)??"unset"}var W=new Map;function J(e){if(e)for(let[e,n]of H){let o=t(e);o&&(W.set(e,o.props),o.setProps({...o.props,...Object.fromEntries(n)}))}else for(let[e,n]of W)t(e)?.setProps(n);e||W.clear(),s(e),function(e){if(e!==$){$=e;for(let[t,n]of w)if(e)for(let e of[...n].reverse())e.undo();else for(let e of n)e.undo=j(e.adapter,t,e.property,e.token)}}(e)}function K(e){return!!H.get(e)?.size}function X(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=H.get(e);return a||H.set(e,a=new Map),a.has(o)||a.set(o,r),{propName:o,before:r}}function Y(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 G(e,t,n,o){if(n===o){let o=H.get(e);return void(o?.get(t)===n&&!(I.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||H.delete(e)))}let i=I.get(e);i||I.set(e,i=[]),i.push({propName:t,before:n,after:o})}function Q(e,t,n){Y(e,t,n);let o=H.get(e);o?.get(t)===n&&!(I.get(e)??[]).some(e=>e.propName===t)&&(o.delete(t),o.size||H.delete(e))}function Z(e){return!!e&&!!I.get(e)?.length}function ee(e){let n=H.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}: ${U(t)} → ${U(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; Komo does not write source files."].join("\n")}function te(e){return[ee(e),x(e),B(e)].filter(e=>!!e).join("\n\n")||void 0}function ne(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=x(i)||q(i);!t(i)&&!r||(e.stopImmediatePropagation(),o(i,te(i)))},{capture:!0,signal:i.signal})}function oe(e){return b(e)}function ie(e){return h(e)||q(e)}function re(e){k(e)}function ae(e){v(e),D(e)}function se(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:#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 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;background:#ffffff0a;color:#e9e6e1;padding:0 6px;font:inherit;font-size:10px}.design-react-field .design-token-binding[data-mode=token] select{background:#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])>input[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}",e.append(t),_.add(e)}function de(e,t,n,r){let a=o(e);if(!a)return null;let s=m(a,t);if(!s.length)return null;se(r);let d=document.createElement("span");d.className="design-token-binding",d.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 y=`komo-token-${t}-${Math.random().toString(36).slice(2,8)}`;v.id=y,k.setAttribute("aria-describedby",y);let x=document.createElement("option");x.value="custom",x.textContent="Custom value",k.append(x);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 w=L(),E=()=>{let n=u(a,e,t),o=n?null:f(a,e,t),r="token"===n?.mode?s.find(e=>e.path===n.tokenPath):void 0,l=r??o?.token;k.value=l?.path??"custom",h.textContent=l?.path??"";let p=n?.declaredPath,c=r?"token":o?"connected":p?"override":"custom";if(d.dataset.mode=c,d.parentElement?.setAttribute("data-token-mode",c),v.textContent="token"===c?p&&p!==r?.path?`Rebound from ${p} · preview`:`Linked to ${r?.path} · preview`:"connected"===c?"Connected "+("inline"===o?.origin?"inline":"from stylesheet"):"override"===c?`Custom override · was ${p}`:"",k.title=v.textContent||"Choose a token",w.hidden="custom"!==c,"custom"===c){let n=getComputedStyle(e).getPropertyValue(t).trim();z(w,n,A(s.map(e=>({path:e.path,type:e.type,value:i(a,e)})),n))}},$=new MutationObserver(E);$.observe(e,{attributes:!0,attributeFilter:["style"]});let C=new MutationObserver(()=>{d.isConnected||($.disconnect(),C.disconnect())});return C.observe(d.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)&&l(a,e,i,t,{recordHistory:!1})&&n(o,e.style.getPropertyValue(t),i.path);else{let i=d.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)}E()}),b.addEventListener("click",()=>{let e=s.find(e=>e.path===k.value),t=d.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")),d.parentElement?.querySelector("[data-property]")?.focus()}),d.append(h,k,c,b,w,v),queueMicrotask(E),E(),d}function le(e){let t=o(e);return new Set([...t?.elementBindings.get(e)?.keys()??[],...V(e)])}function pe(e,t,n,o,i,r,a,s,d){let l=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 l){if(i.querySelector(".design-token-binding")||!n.contains(i))continue;let d=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)});d&&i.append(d)}},c=s?.tokens;if(c)return se(i),Promise.all([P(c,C(s)),S(c,e)]).then(([t,n])=>{p((o,i,r,a)=>ce(c,e,o.property,t,n[o.property],e=>{d?.(e),a()},i,r))},()=>{});p((t,n,r,a)=>de(e,t.property,e=>{o(t,r,e),a()},i))}function ce(e,t,n,o,i,r,a,s){let d=function(e,t){return e.filter(e=>e.properties?.includes(t))}(o,n);if(!d.length&&!i)return null;let l=i&&"offToken"in i?i.offToken:void 0,p=void 0===l?void 0:A(d,l),c=document.createElement("span");c.className="design-token-binding";let u=document.createElement("span");u.className="design-token-chip",u.setAttribute("aria-hidden","true");let f=document.createElement("span");f.className="design-token-icon",f.setAttribute("aria-hidden","true");let g=document.createElement("button");g.type="button",g.className="design-token-detach",g.title="Edit the value",g.setAttribute("aria-label",`Edit ${n} value`),g.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 ${n}`),m.disabled=!d.length;let h=document.createElement("option");h.value="",h.textContent="Choose a token",m.append(h);let b=new Map([["",m]]);for(let e of d){let t=e.group??"",n=b.get(t);n||(n=document.createElement("optgroup"),n.label=t,b.set(t,n));let o=document.createElement("option");o.value=e.path,o.textContent=`${M(e)}${e.ref?` · ${e.ref}`:""}${e===p?" · same value":""}`,o.title=T(e),n.append(o)}for(let[e,t]of b)e&&m.append(t);let k=L();void 0!==l&&z(k,l,p);let v=document.createElement("small");v.className="design-token-binding__state",v.setAttribute("aria-live","polite");let y=!1,x=()=>{let e=function(e,t){return[...w.get(e)??[]].reverse().find(e=>e.property===t)?.token}(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;m.value=r&&d.some(e=>e.path===r)?r:"",u.textContent=s?M(s):r??"";let p=r?e?"token":"connected":"custom";c.dataset.mode=p,(a??c.parentElement)?.setAttribute("data-token-mode",p),k.hidden=void 0===l||!!e,v.textContent=s?`${e?"Preview":"Uses"} ${T(s)}`:r?`Uses ${r}`:k.hidden?"":k.title,m.title=v.textContent||"Choose a token"};return m.addEventListener("change",()=>{let a=d.find(e=>e.path===m.value);if(!a)return x();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=w.get(t);a||w.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:j(e,t,n,o)}),()=>R(t)}(e,t,n,a,s,l)),x()}),g.addEventListener("click",()=>{y=!0,x(),s?.focus()}),c.append(u,m,f,g,k,v),x(),c}var ue=!1;function fe(e,t,n,i){let r=o(e);if(!r||!r.tokens.length)return null;se(i);let a=document.createElement("details");a.className="design-group design-theme-group",a.open=ue,a.addEventListener("toggle",()=>{a.isConnected&&(ue=a.open)});let s=document.createElement("summary");s.textContent="Shared theme";let d=document.createElement("small");d.className="design-react-source",d.textContent="Changes every element using these tokens",a.append(s,d);let l=new Map;for(let e of r.tokens){let t=e.path.split(".")[0];l.set(t,[...l.get(t)??[],e])}let p=r.tokens.length>6&&l.size>1;for(let[e,o]of p?l: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(ge(r,i,t,n,e))}return a}function ge(e,t,n,o,s){let l=document.createElement("div");l.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=!l.toggleAttribute("data-changed",e.themeEdits.has(t.path)),"fontFamily"===t.type&&(m.title=m.value)},v=document.createElement("button");return v.type="button",v.className="design-theme-reset",v.title="Reset to page value",v.setAttribute("aria-label",`Reset ${t.path}`),v.innerHTML='<svg viewBox="0 0 16 16"><path d="M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5"/></svg>',v.addEventListener("click",()=>{d(e,t),b(),o()}),b(),l.append(p,g,v),l}function me(e,t,n){let i=o(e);i&&p(i,e,t,n)}function he(e,t){let n=o(e);n&&c(n,e,t)}function be(e){let n=I.get(e)?.pop(),o=t(e);if(!n||!o)return;o.setProps({...o.props,[n.propName]:n.before});let i=H.get(e);if(i){let t=i.get(n.propName);Object.is(t,n.before)&&i.delete(n.propName),i.size||H.delete(e)}}function ke(){for(let e of[...H.keys()])ve(e);H.clear(),I.clear(),y(),function(){for(let e of[...w.keys()])D(e)}()}function ve(e){let n=H.get(e),o=t(e);!n?.size||!o||(o.setProps({...o.props,...Object.fromEntries(n)}),H.delete(e),I.delete(e))}function ye(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 d=n.props[o];if(Object.is(d,i))return!0;let l=H.get(t);l||H.set(t,l=new Map);let p=l.has(o)?l.get(o):d;Object.is(p,i)?l.delete(o):l.set(o,p),l.size||H.delete(t);let c=I.get(t);return c||I.set(t,c=[]),c.push({propName:o,before:d,after:i}),n.setProps({...n.props,[o]:i}),a(),!0}function xe(e,i,r,a){let s=t(e);if(!s)return function(e,t,o){let i=n(e);if(!i)return null;se(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);se(r);let d=document.createElement("details");d.className="design-group design-react-group",d.open=!0;let l=document.createElement("summary");l.textContent="Properties",d.append(l);let p=document.createElement("small");p.className="design-react-source",p.textContent=`${s.definition.name} · ${s.definition.source}:${s.definition.line}`,d.append(p);for(let t of s.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 l,p=s.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),l=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:""),l=e}if(l.setAttribute("aria-label",`${s.definition.name} ${t.name}`),"unsupported"===t.kind)l=document.createElement("input"),l.disabled=!0,l.value=`Read only · ${t.typeLabel}`,l.setAttribute("aria-label",`${s.definition.name} ${t.name}, read only`),r.title=`Komo does not edit ${t.typeLabel} props.`;else{let n=()=>{let n=l instanceof HTMLInputElement&&"checkbox"===l.type?l.checked:l.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);ye(e,s,t.name,o,l,i)};l.addEventListener("change",n)}r.append(a,l);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=>s.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 s.props[t.name]&&String(s.props[t.name]).startsWith("var(")?e.ownerDocument.defaultView?.getComputedStyle(e).getPropertyValue(n).trim()??"":"string"==typeof s.props[t.name]?s.props[t.name]:"";ye(e,s,t.name,r,l,i)&&u()}),o.append(a,p),r.append(o),u()}}d.append(r)}return d}export{pe as attachStyleTokenControls,X as beginReactTextEdit,oe as canUndoDesignTokenEdit,Z as canUndoReactProp,Q as cancelReactTextEdit,ce as createAdapterTokenControl,fe as createDesignThemePanel,de as createElementTokenControl,xe as createReactPropsPanel,G as finishReactTextEdit,ie as hasDesignTokenEdit,K as hasReactPropChanges,ne as installCommentCapture,me as noteDesignTokenOverride,Y as previewReactTextEdit,te as proposedDesignChanges,ee as proposedReactChanges,ae as resetDesignTokenEdits,ke as resetPreviews,ve as resetReactProps,J as showDesignBefore,he as syncDesignTokenBinding,le as tokenBoundProperties,re as undoDesignTokenEdit,be as undoReactProp};