@hazem3500/komo 0.9.31 → 0.9.32

package/dist/chunk-HHG6KWKR.js

@@ -1 +0,0 @@
-import{a as t}from"./chunk-RPY7OOOR.js";function e(t){t.style.length||(t.getAttribute("style"),t.removeAttribute("style"))}function r(r,o,i){if(!t(r))return()=>{};let s=r.style.getPropertyValue(o),y=r.style.getPropertyPriority(o),n=!r.hasAttribute("style");return r.style.setProperty(o,i,y),()=>{s?r.style.setProperty(o,s,y):r.style.removeProperty(o),n&&e(r)}}var o=new WeakMap;function i(t,r,i,s=!1,y=!1){let n=o.get(t);n&&(clearTimeout(n.timer),n.restore());let l=t.style.getPropertyValue("transition"),a=t.style.getPropertyPriority("transition"),p=s?[...r].map(t=>`${t} .3s cubic-bezier(.22,1,.36,1)`).join():"none";t.style.setProperty("transition",p,"important");let u=t.style.getPropertyValue("transition"),P=()=>{o.delete(t),t.style.getPropertyValue("transition")===u&&"important"===t.style.getPropertyPriority("transition")&&(l?t.style.setProperty("transition",l,a):t.style.removeProperty("transition"),y&&e(t))};i(),s?o.set(t,{restore:P,timer:window.setTimeout(P,320)}):(getComputedStyle(t).color,P())}export{e as a,r as b,i as c};

package/dist/design-comment-W2OVUWBL.js

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

package/dist/design-panel-KHZDEA36.js

@@ -1 +0,0 @@
-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 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"},{property:"fill",label:"Fill",kind:"color",wide:!0},{property:"stroke",label:"Stroke",kind:"color",wide:!0},{property:"stroke-width",label:"Stroke width",kind:"length",min:0,max:24}],n=import("./select-menu-QH7IVM7P.js").catch(()=>null),i=["font-family","font-size","line-height","font-weight","text-align","color"];function r(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 o(e){let t=e.match(/^rgba\(.*,\s*([\d.]+)\)$/)?.[1];return void 0===t?/^rgb\(/.test(e)?r(e):e||"transparent":Number(t)?e:"transparent"}function l(e,t){let n=getComputedStyle(t).getPropertyValue(e.property).trim();if("color"===e.kind)return o(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 d(e,t){let{element:n}=t,i=document.createElement("div");i.className=`design-field design-field--${e.kind}`,i.dataset.fieldProperty=e.property,i.toggleAttribute("data-wide",!!e.wide);let o="select"===e.kind?document.createElement("select"):document.createElement("input");if(o instanceof HTMLSelectElement)for(let t of e.values??[]){let e=document.createElement("option");e.value=e.textContent=t,o.append(e)}else o.type="length"===e.kind?"number":"text",o.autocomplete="off",o.spellcheck=!1,o.placeholder=e.placeholder??"","length"===e.kind&&(o.min=String(e.min??0),o.max=String(e.max??1e3),o.setAttribute("inputmode","decimal"));if(o.dataset.property=e.property,o.setAttribute("aria-label",e.label),o.title=e.label,o.value=l(e,n),o instanceof HTMLSelectElement&&!o.value){let t=document.createElement("option");t.value=t.textContent=l(e,n),o.prepend(t),o.value=t.value}let d=()=>t.begin(o,e.property),a=()=>{t.apply(o,e.property,function(e,t){let n=t.value.trim();if("color"===e.kind){let t=document.createElement("span").style;return t.setProperty(e.property,n),t.getPropertyValue(e.property)?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,o)),t.commit(o,e.property,!1)},p=()=>t.commit(o,e.property);if(o.addEventListener("focus",d),o.addEventListener("input",a),o.addEventListener("change",p),o.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=r(o.value)};n(),t.addEventListener("pointerdown",d),t.addEventListener("focus",d),t.addEventListener("input",()=>{o.value=t.value,a()}),t.addEventListener("change",p),o.addEventListener("input",n),i.append(t)}if(e.glyph){let t=t=>{let i=o.value.trim().match(/^(-?\d*\.?\d+)([a-z%]*)$/i),r=i?i[2]:"text"===e.kind?"px":"",l=i?Number(i[1]):parseFloat(getComputedStyle(n).getPropertyValue(e.property))||0,d=Math.round(10*(l+t*("text"!==e.kind||r?1:.1)))/10;"text"!==e.kind&&(d=Math.min(e.max??1e4,Math.max(e.min??0,d))),o.value=`${d}${r}`,a()},r=document.createElement("span");r.className="design-field__glyph",r.setAttribute("aria-hidden","true"),r.title=`${e.label} · drag to adjust`,e.glyph.length>1?r.innerHTML=`<svg viewBox="0 0 12 12"><path d="${e.glyph}"/></svg>`:r.textContent=e.glyph,r.addEventListener("pointerdown",e=>{e.preventDefault(),d(),r.setPointerCapture?.(e.pointerId);let n=e.clientX,i=e=>{let i=Math.trunc((e.clientX-n)/2);i&&(n+=2*i,t(i*(e.shiftKey?10:1)))},o=()=>{r.removeEventListener("pointermove",i),p()};r.addEventListener("pointermove",i),r.addEventListener("pointerup",o,{once:!0}),r.addEventListener("pointercancel",o,{once:!0})}),o.addEventListener("keydown",e=>{"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),t(("ArrowUp"===e.key?1:-1)*(e.shiftKey?10:1)))}),i.append(r)}return o instanceof HTMLInputElement&&o.addEventListener("keydown",e=>{"Enter"===e.key&&o.blur()}),i.append(o),i}function a(e,n,i,r=[]){let o=document.createElement("section");o.className="design-section";let l=document.createElement("div");if(l.className="design-section__tools",l.append(...r),!i){let e=document.createElement("span");return e.className="design-section__title",e.textContent=n,o.append(e,l),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){let i=t.find(e=>e.property===n);s.append(d(e.element instanceof SVGElement&&"color"===n?{...i,label:"Color"}:i,e))}return a.append(p,s),a.addEventListener("toggle",()=>{a.isConnected&&(a.open?e.collapsed.delete(n):e.collapsed.add(n))}),o.append(l,a),o}function p(e,t){let{element:r,changed:l}=t;n.then(n=>n?.attach(e,t.element));let d=getComputedStyle(r);if(r instanceof SVGElement)return void e.append(a(t,"Layout",r instanceof SVGSVGElement?["width","height","display"]:["display"]),a(t,"Appearance",["color","fill","stroke","stroke-width"]));let p=e=>e.some(e=>l?.has(e)),s=[...r.childNodes].some(e=>e.nodeType===Node.TEXT_NODE&&e.textContent?.trim())||/(?:^|;)\s*(?:color|font|line-height|text-align)/.test(r.getAttribute("style")??"")||p(i),c=/flex|grid/.test(d.display)||p(["gap"]),g="transparent"!==o(d.backgroundColor)||p(["background-color"]),u=["top","right","bottom","left"].some(e=>parseFloat(d.getPropertyValue(`border-${e}-width`))>0&&"none"!==d.getPropertyValue(`border-${e}-style`))||p(["border","border-width","border-style","border-color"]),f=(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(a(t,"Layout",["width","height","padding",...c?["gap"]:[],"margin",...u?[]:["border-radius"],"display"])),s&&e.append(a(t,"Typography",i,[t.editText])),e.append(g?a(t,"Fill",["background-color"]):a(t,"Fill",null,[f("fill","background-color","#ffffff","background-color")]),u?a(t,"Border",["border-width","border-radius","border-style","border-color"]):a(t,"Border",null,[f("border","border","1px solid","border-width")]))}export{e as designPanelStyles,d as fieldControl,t as fields,p as renderPanel,r as toHex,l as valueFor};

package/dist/inline-text-editor-HKKHLSNR.js

@@ -1 +0,0 @@
-var e="script,style,svg,input,textarea,select,[data-private],[data-sensitive]";function t(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_TEXT),n=[];for(;t.nextNode();)n.push(t.currentNode);return n}function n(e,t,n){if(n&&e.childElementCount)for(let[e,t]of n)e.data=t;else e.textContent=t}function a(){let e=new Map,t=new Map,a=[],r=new Map;return{record(n){!n.reactProp&&n.before!==n.after&&(e.has(n.element)||(e.set(n.element,n.before),t.set(n.element,n.nodes)),a.push(n))},remember(t,n){e.has(t)||e.set(t,n)},original:t=>e.get(t),reconcile(t,n){e.get(t)===n&&e.delete(t)},reset(r){let o=e.get(r);void 0!==o&&n(r,o,t.get(r)),e.delete(r);for(let e=a.length-1;e>=0;e--)a[e].element===r&&a.splice(e,1)},proposal(t){let n=e.get(t),a=t.textContent??"";return void 0!==n&&n!==a?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(a)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[a,r]of e)n(a,r,t.get(a));e.clear(),a.length=0},showBefore(a){if(a)for(let[a,o]of e){let e=t.get(a);r.set(a,[a.textContent??"",e?.map(([e])=>[e,e.data])]),n(a,o,e)}else for(let[e,[t,a]]of r)n(e,t,a);a||r.clear()},undo(){let t=a.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function r(e){let t=a(),n=null,r=!1;function o(t=!1){let a=n;a&&(n=null,a.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return r},isEditing:e=>!!n&&n.element===e,toggle:async function(a){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||r||n)return;let s=i(l);if(s)e.status.textContent=s;else{r=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let r=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-PD6ENV6Q.js"),onFinish(n,a){a||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on exit"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on exit")}});r?e.active()&&e.selected()===l?(n=r,a&&function(e,t,n){let a=document.caretPositionFromPoint?.(t,n),r=a?document.createRange():document.caretRangeFromPoint?.(t,n);if(a&&r&&r.setStart(a.offsetNode,a.offset),!r||!e.contains(r.startContainer))return;r.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(r)}(l,a.clientX,a.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):r.finish(!0):e.status.textContent="This text couldn't be connected to its component prop."}catch{e.status.textContent="Inline text editing is unavailable."}finally{r=!1,e.onChange()}}},finish:o,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return o("Escape"===e.key),t.blur(),!0},hasChanges:e=>void 0!==t.original(e),undo(){let n=t.undo();return e.onChange(),n},reset(n){t.reset(n),e.onChange()},reconcile(n,a){t.reconcile(n,a),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=r(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function i(n){return n.matches("input,textarea,select")?"Form fields can't be edited as text.":n.matches("script,style,svg,canvas,video,audio,iframe")?"Graphics, media, and frames can't be edited.":n.closest("[data-private],[data-sensitive]")?"This text is marked private, so it stays read-only.":n.closest("[contenteditable]")?"This text is already editable on the page.":t(n).some(t=>t.data.trim()&&!t.parentElement?.closest(e))?null:"No text here. Double-click the text itself."}function l(e){return!i(e)}function s(e){let t=e.textContent??"",n=document.getSelection(),a=n?.rangeCount?n.getRangeAt(0):null;return a&&e.contains(a.commonAncestorContainer)?a.startContainer===e?Math.min([...e.childNodes].slice(0,a.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):a.startContainer.nodeType===Node.TEXT_NODE?Math.min(a.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,a=document.getSelection();if(!n||!a)return;let r=document.createRange();r.setStart(n,Math.min(t,n.textContent?.length??0)),r.collapse(!0),a.removeAllRanges(),a.addRange(r)}async function d(a,r){if(!l(a))return null;let o=null,i=null;if(a.dataset.komoTextProp&&(o=await r.loadReactBridge(),i=o.beginReactTextEdit(a),!i))return null;let d=i?.before??(a.textContent??"").slice(0,500),u=!i&&a.childElementCount>0,g=u?t(a).map(e=>[e,e.data]):void 0,p=a.getAttribute("role"),f=a.getAttribute("aria-label"),m=a.getAttribute("aria-multiline"),h=a.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(a,v)}),T=()=>{u||(a.childElementCount&&(a.textContent=a.textContent??""),(a.textContent??"").length>500&&(a.textContent=(a.textContent??"").slice(0,500)),i&&o&&(v=s(a),o.previewReactTextEdit(a,i.propName,a.textContent??"")||(a.textContent=d)))},E=(t,n)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!a.contains(r)||r.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(a.textContent??"").length+o));r.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(r,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};a.addEventListener("beforeinput",e=>{if(v=-1,!u||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&E(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:x.signal}),a.addEventListener("input",T,{signal:x.signal}),i&&b.observe(a,{childList:!0,characterData:!0,subtree:!0}),a.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",n=document.getSelection();u?n?.rangeCount&&E(n.getRangeAt(0),t):(function(e,t){let n=s(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));e.textContent=a.slice(0,n)+r+a.slice(n),c(e,n+r.length)}(a,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),a.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),a.setAttribute("contenteditable","true"),a.setAttribute("role","textbox"),a.setAttribute("aria-label","Inline text preview"),a.setAttribute("aria-multiline","false"),a.dataset.komoInlineEditing="true",a.spellcheck=!1,a.focus({preventScroll:!0});let y=document.getSelection(),R=document.createRange();return R.selectNodeContents(a),R.collapse(!1),y?.removeAllRanges(),y?.addRange(R),{element:a,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&a.childElementCount&&(a.textContent=a.textContent??"");let t=(a.textContent??"").slice(0,500);(function(){a.removeAttribute("contenteditable"),a.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",p],["aria-label",f],["aria-multiline",m],["spellcheck",h]])null===t?a.removeAttribute(e):a.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(a,i.propName,d),n(a,d,g)):i&&o&&o.finishReactTextEdit(a,i.propName,d,t),r.onFinish({element:a,before:d,after:t,nodes:g,...i?{reactProp:i.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{o as bindInlineTextTools,l as canEditText,r as createInlineTextTools,a as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};

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

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