@hazem3500/komo 0.9.18 → 0.9.20

package/dist/{design-export-G42ZDP5F.js → design-export-YFMZGYR3.js}

@@ -1 +1 @@
-import{i as e}from"./chunk-ANKCS6NI.js";function t(e){let t=[];for(let n=e;n;n=n.parentElement){let i=n.id&&!/^radix-|^:r|_r_|«r/.test(n.id)?`#${CSS.escape(n.id)}`:"";if(i&&1===document.querySelectorAll(i).length)return[i,...t].join(" > ");if(n===document.body||!n.parentElement)return[n.tagName.toLowerCase(),...t].join(" > ");let o=n===e?[...n.classList].slice(0,2).map(e=>`.${CSS.escape(e)}`).join(""):"",r=[...n.parentElement.children].filter(e=>e.tagName===n.tagName).indexOf(n)+1;t.unshift(`${n.tagName.toLowerCase()}${o}:nth-of-type(${r})`)}return t.join(" > ")}function n(e,n){return`${t(e)} {\n${[...n].map(([e,t])=>`  ${e}: ${t};`).join("\n")}\n}`}function i(e,n,i,o,r,s=[]){let a=[...n??[]].filter(([e])=>!o?.has(e)).map(([e,t])=>`- ${e}: ${i(e)||"(unset)"} → ${t}`),l=[a.length?`Proposed style changes (preview only)\nTarget: ${t(e)}\n${a.join("\n")}`:"",...r].filter(e=>!!e);if(l[0]&&s.length){let e=l[0].split("\n"),t=s.filter(t=>!t.startsWith("Component: ")||!e.some(e=>e.startsWith("Component: ")));e.splice(e[1]?.startsWith("Target: ")?2:1,0,...t),l[0]=e.join("\n")}return l.join("\n\n")||void 0}function o(t,n,i,o){if(i.aborted)return;let r=e("div","morphing-menu__tooltip sidebar-tooltip");r.setAttribute("aria-hidden","true"),n.append(r);let s=0,a=()=>{clearTimeout(s),delete r.dataset.open},l=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return a();clearTimeout(s),s=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();r.textContent=t.dataset.tip??"";let n=r.offsetWidth/2;r.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,r.style.top=e.top-8-r.offsetHeight+"px",r.dataset.open="true"},r.dataset.open?0:400)};t.addEventListener("pointerover",l,{signal:i}),t.addEventListener("focusin",l,{signal:i});for(let e of["pointerleave","pointerdown","focusout"])t.addEventListener(e,a,{signal:i});i.addEventListener("abort",()=>{a(),r.remove()}),("focusin"===o.type||t.matches(":hover"))&&l(o)}export{t as cssSelector,n as cssText,i as designProposal,o as footerTips};
+import{j as e}from"./chunk-PLSWBSSX.js";function t(e){let t=[];for(let n=e;n;n=n.parentElement){let i=n.id&&!/^radix-|^:r|_r_|«r/.test(n.id)?`#${CSS.escape(n.id)}`:"";if(i&&1===document.querySelectorAll(i).length)return[i,...t].join(" > ");if(n===document.body||!n.parentElement)return[n.tagName.toLowerCase(),...t].join(" > ");let o=n===e?[...n.classList].slice(0,2).map(e=>`.${CSS.escape(e)}`).join(""):"",r=[...n.parentElement.children].filter(e=>e.tagName===n.tagName).indexOf(n)+1;t.unshift(`${n.tagName.toLowerCase()}${o}:nth-of-type(${r})`)}return t.join(" > ")}function n(e,n){return`${t(e)} {\n${[...n].map(([e,t])=>`  ${e}: ${t};`).join("\n")}\n}`}function i(e,n,i,o,r,s=[]){let a=[...n??[]].filter(([e])=>!o?.has(e)).map(([e,t])=>`- ${e}: ${i(e)||"(unset)"} → ${t}`),l=[a.length?`Proposed style changes (preview only)\nTarget: ${t(e)}\n${a.join("\n")}`:"",...r].filter(e=>!!e);if(l[0]&&s.length){let e=l[0].split("\n"),t=s.filter(t=>!t.startsWith("Component: ")||!e.some(e=>e.startsWith("Component: ")));e.splice(e[1]?.startsWith("Target: ")?2:1,0,...t),l[0]=e.join("\n")}return l.join("\n\n")||void 0}function o(t,n,i,o){if(i.aborted)return;let r=e("div","morphing-menu__tooltip sidebar-tooltip");r.setAttribute("aria-hidden","true"),n.append(r);let s=0,a=()=>{clearTimeout(s),delete r.dataset.open},l=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return a();clearTimeout(s),s=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();r.textContent=t.dataset.tip??"";let n=r.offsetWidth/2;r.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,r.style.top=e.top-8-r.offsetHeight+"px",r.dataset.open="true"},r.dataset.open?0:400)};t.addEventListener("pointerover",l,{signal:i}),t.addEventListener("focusin",l,{signal:i});for(let e of["pointerleave","pointerdown","focusout"])t.addEventListener(e,a,{signal:i});i.addEventListener("abort",()=>{a(),r.remove()}),("focusin"===o.type||t.matches(":hover"))&&l(o)}export{t as cssSelector,n as cssText,i as designProposal,o as footerTips};

package/dist/design-mode.js

@@ -1 +1 @@
-import{a as e}from"./chunk-53M6AOAX.js";import{i as t,j as n}from"./chunk-ANKCS6NI.js";var i=(e,n)=>Object.assign(t("button",e,n),{type:"button"}),o=e=>"function"==typeof matchMedia&&matchMedia(e).matches,s=()=>o("(prefers-reduced-motion: reduce)"),a=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function r(r){let d=t("style");d.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__compare{display:inline-flex;flex:none;padding:2px;border-radius:7px;background:#ffffff0a}.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare{display:none}.design-inspector__compare button{height:22px;padding:0 8px;border-radius:5px;color:#9a9a9a;font:inherit;font-size:11px}.design-inspector__compare button:hover{color:#fff}.design-inspector__compare button[aria-pressed=true]{color:#fff;background:#ffffff1a}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let l=null,p=import("./design-panel-VLR2UILF.js").then(e=>{d.textContent+=e.designPanelStyles,l=e},()=>{k.textContent="Design controls unavailable · try again"}),c=t("aside","design-inspector");c.setAttribute("role","dialog"),c.setAttribute("aria-label","Design mode inspector"),c.setAttribute("aria-hidden","true"),c.hidden=!0;let g=t("div","design-outline");g.setAttribute("aria-hidden","true");let u=t("div","design-inspector__heading"),f=i("design-inspector__parent");f.hidden=!0;let m=t("span","design-inspector__target"),h=t("small"),x=i("design-inspector__close");x.setAttribute("aria-label","Exit design mode"),x.append(n("close"));let b=i("design-inspector__fold");b.append(n("chevron"));let y=t("div","design-inspector__identity");y.append(f,m,h),u.append(y,b,x);let v=t("div","design-inspector__controls"),_=t("div","design-inspector__bar"),w=t("span","design-inspector__count");w.title="Preview only · resets on exit";let k=t("p","design-inspector__status");k.setAttribute("role","status");let E=t("div","design-inspector__actions"),C=(e,t)=>{let n=i("design-inspector__tool");return n.dataset.tip=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},P=C("Undo",a("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),A=C("Reset",a("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),L=C("Copy CSS","");L.append(n("copy"));let T=i("","Comment"),z=i("design-text-edit","Edit text");z.title="Edit text",z.setAttribute("aria-label","Edit selected text inline"),E.append(P,A,L,T);let M=t("div","design-inspector__compare");M.setAttribute("role","group"),M.setAttribute("aria-label","Compare with the page");let S=["Before","After"].map((e,t)=>{let n=i("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>oe(!t)),M.append(n),n});_.append(w,M,k,E),c.append(u,v,_),r.root.append(d,g),(r.panelRoot??r.root).append(c);let D,R=!1,B=0,I=null,F=null,$=null,j=0,H=0,K=null,O="",N=null,V=null,U=new Map,q=new Map,W=new WeakMap,X=new WeakMap,Z=new AbortController,Y=()=>import("./design-export-G42ZDP5F.js"),G=e=>{D??=Y().then(({footerTips:t})=>t(_,r.root,Z.signal,e),()=>{D=void 0})};_.addEventListener("pointerover",G),_.addEventListener("focusin",G);let J=new Set,Q=[];function ee(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=U.get(e);o||U.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function te(e,t){let n=q.get(e);n||q.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(U.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||q.delete(e),pe(I,"selected")}let ne=0;new MutationObserver(()=>{let e=k.textContent??"";k.title=e,_.toggleAttribute("data-message",!!e),clearTimeout(ne),e&&(ne=window.setTimeout(function e(){$?.element?ne=window.setTimeout(e,2600):k.textContent=""},2600))}).observe(k,{childList:!0,characterData:!0,subtree:!0});let ie=!1;function oe(e){if(e===ie)return;e&&$?.element&&be(),ie=e;let t=!s();for(let[n,i]of q){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=U.get(n)?.get(t);e?se(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}$?.showBefore(e),N?.showDesignBefore(e),S.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),c.toggleAttribute("data-before",e),xe()}function se(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function ae(e,t,n){I&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ee(I,t),N?.noteDesignTokenOverride(I,t,n),I.style.setProperty(t,n,U.get(I)?.get(t)?.priority),te(I,t),xe()))}function re(e,t,n=!0){if(!I)return;let i={value:I.style.getPropertyValue(t),priority:I.style.getPropertyPriority(t)},o=X.get(e),s=o?.before??W.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Q.splice(Q.indexOf(o),1),X.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:I,property:t,before:s,after:i};Q.push(n),X.set(e,n)}n&&(W.set(e,i),X.delete(e)),xe()}function de(){if(v.replaceChildren(),le(),!I){let e=t("div","design-inspector__empty"),i=t("strong","","Select an element"),o=t("ul"),s=(...e)=>{let n=t("li");e.forEach((e,i)=>{i%2==0?n.append(e):n.append(t("kbd","",e))}),o.append(n)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),r.exitKey?s("","Esc"," or ",r.exitKey," to exit"):s("","Esc"," to exit"),e.append(n("design"),i,o),v.append(e),m.textContent="Select an element",h.textContent="",void(f.hidden=!0)}let e=`${I.tagName.toLowerCase()}${I.id?`#${I.id}`:""}`;m.textContent=e,h.textContent=I instanceof HTMLIFrameElement?"Frame only · contents are isolated":I.classList.length?`.${[...I.classList].slice(0,2).join(".")}`:"";let i=I.parentElement;f.hidden=!i||i===document.body||i===document.documentElement,f.textContent=i?.tagName.toLowerCase()??"",f.setAttribute("aria-label",`Select parent ${f.textContent}`);let o=I,s=l;s?(s.renderPanel(v,{element:o,changed:q.get(o),collapsed:J,editText:z,begin:(e,t)=>W.set(e,{value:o.style.getPropertyValue(t),priority:o.style.getPropertyPriority(t)}),apply:ae,commit:re,rerender:de}),(r.design||o.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(V??=import("./react-props-panel-NC7KLZ73.js").then(e=>N=e).catch(e=>{throw V=null,e}),V.then(e=>{if(!R||I!==o||v.querySelector(".design-react-group, .design-theme-group"))return;let t=r.root;e.attachThemeSwitcher(v,r.design,()=>ue(o),t);let n=e.createReactPropsPanel(o,()=>{k.textContent="React state preview · resets on exit",xe()},t,ue,r.design);n&&v.append(n),e.attachStyleTokenControls(o,s.fields,v,(e,t,n)=>{ee(o,e.property,n),te(o,e.property),W.set(t,{value:n,priority:o.style.getPropertyPriority(e.property)}),re(t,e.property)},t,s.valueFor,s.toHex,r.design,e=>{Q.push({element:o,undo:e}),xe()});let i=e.createDesignThemePanel(o,s,xe,t);i&&v.append(i)}).catch(()=>{}))):p.then(()=>{R&&I===o&&de()})}function le(){c.toggleAttribute("data-empty",T.hidden=!I),c.parentElement?.toggleAttribute("data-design-empty",R&&!I)}function pe(t,n,i=!1){if(!R||!t?.isConnected)return void(g.hidden=!0);let o=t.getBoundingClientRect();if(o.width&&o.height){if(g.hidden=!1,g.dataset.kind=n,i&&(t!==K||n!==O)){K=t,O=n,clearTimeout(H);let e=c.getBoundingClientRect(),i=t=>o.left<t+e.width&&o.right>t&&o.top<e.bottom&&o.bottom>e.top;r.flip&&e.width&&i(e.left)&&!i(document.documentElement.clientWidth-e.right)&&(H=window.setTimeout(r.flip,"hover"===n?350:0))}g.hidden=!e(g,o,t)}else g.hidden=!0}function ce(){j||(j=requestAnimationFrame(()=>{j=0,pe(I??F,I?"selected":"hover")}))}let ge="function"==typeof ResizeObserver?new ResizeObserver(ce):null;function ue(e){!(e instanceof HTMLElement)||r.host.contains(e)||($?.element&&$.element!==e&&be(),ge?.disconnect(),ge?.observe(e),I=e,F=e,de(),pe(e,"selected",!0),xe())}let fe=()=>o("(max-width:520px)");function me(e){c.toggleAttribute("data-folded",e&&fe()),b.setAttribute("aria-expanded",String(!c.hasAttribute("data-folded"))),b.setAttribute("aria-label",c.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function he(e){me(!1),fe()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=c.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:s()?"auto":"smooth"})})}function xe(){ce(),P.disabled=!Q.length&&!N?.canUndoReactProp(I)&&!N?.canUndoDesignTokenEdit(I),A.disabled=!function(){let e=I,t=e?(q.get(e)?.size??0)+ +!!$?.hasChanges(e)+ +!!N?.hasReactPropChanges(e)||+!!N?.hasDesignTokenEdit(e):0;return w.textContent=t?`${t} change${t>1?"s":""}`:"",_.toggleAttribute("data-changes",t>0||!P.disabled),M.hidden=!t&&!ie,t}(),L.disabled=!I||!q.get(I)?.size,T.disabled=!I,z.disabled=!!$?.busy||!I?.isConnected,z.textContent=$?.isEditing(I)?"Done editing":"Edit text",z.setAttribute("aria-label",$?.isEditing(I)?"Finish inline text editing":"Edit selected text inline")}function be(e=!1){$?.finish(e),xe()}function ye(e){if(!e){oe(!1),$?.finish();for(let[e,t]of U)for(let[n,i]of t)se(e,n,i);U.clear(),q.clear(),Q.length=0,$?.restoreAll(),N?.resetPreviews(),xe()}clearTimeout(B),B=0,R=e,le(),e?(c.hidden=!1,c.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{R&&(c.dataset.state="active")}),g.hidden=!I,de(),me(!I),pe(I,"selected"),x.focus({preventScroll:!0})):(g.hidden=!0,c.setAttribute("aria-hidden","true"),c.dataset.state="closing",s()?(c.hidden=!0,delete c.dataset.state):B=window.setTimeout(()=>{B=0,R||(c.hidden=!0,delete c.dataset.state)},250))}z.addEventListener("click",e=>{$||I&&(k.textContent="Loading inline text editor…",import("./inline-text-editor-Z2N32PER.js").then(t=>{$||!I||!R||($=t.bindInlineTextTools({button:z,status:k,selected:()=>I,active:()=>R,onChange:xe,onCommit(e){Q.push({kind:"text",element:e})}}),$.toggle(e))}).catch(()=>{k.textContent="Inline text editing is unavailable."}))}),b.addEventListener("click",()=>me(!c.hasAttribute("data-folded"))),f.addEventListener("click",()=>ue(I?.parentElement??null)),x.addEventListener("click",()=>{$?.element&&be(),ye(!1),r.onExit()}),P.addEventListener("click",()=>{let e=Q.pop();e?e.kind?"text"===e.kind?I===($?.undo()??e.element)&&de():(se(e.element,e.property,e.before),N?.syncDesignTokenBinding(e.element,e.property),te(e.element,e.property),I===e.element&&de(),pe(I??F,I?"selected":"hover")):(e.undo(),de()):(I&&(N?.undoDesignTokenEdit(I),N?.undoReactProp(I),de()),k.textContent="React state preview · resets on exit"),xe(),(P.disabled?x:P).focus({preventScroll:!0})}),A.addEventListener("click",()=>{if(!I)return;$?.isEditing(I)&&be(!0);let e=q.get(I),t=$?.hasChanges(I)??!1,n=N?.hasReactPropChanges(I)??!1,i=N?.hasDesignTokenEdit(I)??!1;if(e?.size||t||n||i){t&&$?.reset(I);for(let t of e?.keys()??[])se(I,t,U.get(I)?.get(t));q.delete(I),n&&N?.resetReactProps(I),i&&N?.resetDesignTokenEdits(I);for(let e=Q.length-1;e>=0;e--)Q[e].element===I&&Q.splice(e,1);de(),pe(I,"selected"),xe(),x.focus({preventScroll:!0})}}),L.addEventListener("click",()=>{let e=I,t=e?q.get(e):void 0;!e||!t?.size||Y().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),k.textContent="CSS copied"}catch{k.textContent=i}})}),T.addEventListener("click",()=>{let e=I;e&&($?.isEditing(e)&&be(),Y().then(({designProposal:t})=>r.onComment(e,t(e,q.get(e),t=>U.get(e)?.get(t)?.computed,N?.tokenBoundProperties(e),[$?.proposal(e),N?.proposedDesignChanges(e)],N?.designContext(e,r.design))),()=>{k.textContent="Comment unavailable · try again"}))});let ve=()=>oe(!1);for(let e of[v,E,z])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,ve,!0);return document.addEventListener("pointermove",function(e){if(!R||e.composedPath().includes(r.host))return;let t=r.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||r.host.contains(t)||(F=t,I||pe(F,"hover",!0))},{capture:!0,signal:Z.signal}),document.addEventListener("pointerdown",function(e){if(!R||e.composedPath().includes(r.host))return;let t=r.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||r.host.contains(t)||$?.element&&(t===$.element||$.element.contains(t))||($?.element&&be(),e.preventDefault(),e.stopImmediatePropagation(),ue(t))},{capture:!0,signal:Z.signal}),document.addEventListener("click",function(e){!R||e.composedPath().includes(r.host)||(e.preventDefault(),e.stopImmediatePropagation(),I&&he(I),2===e.detail&&I?.contains(e.target)&&!z.disabled&&!$?.element&&z.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:Z.signal}),document.addEventListener("keydown",function(e){if($?.handleKey(e))return void z.focus({preventScroll:!0});let t=e.key.toLowerCase(),n=e.composedPath()[0];if(R&&!M.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void oe("b"===t?!ie:"arrowleft"===t);if(R&&!$?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(r.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),ue(t),void he(t)}R&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),ye(!1),r.onExit())},{capture:!0,signal:Z.signal}),window.addEventListener("scroll",ce,{capture:!0,passive:!0,signal:Z.signal}),window.addEventListener("resize",ce,{passive:!0,signal:Z.signal}),{setActive:ye,mountPanel(e){c.parentElement!==e&&(c.parentElement?.removeAttribute("data-design-empty"),e.append(c),le())},get active(){return R},ready:p,destroy(){$?.finish(!0),ye(!1),clearTimeout(B),clearTimeout(ne),clearTimeout(H),ge?.disconnect(),Z.abort(),cancelAnimationFrame(j),c.remove(),g.remove(),d.remove()}}}export{r as createDesignMode};
+import{a as e}from"./chunk-53M6AOAX.js";import{j as t,k as n}from"./chunk-PLSWBSSX.js";var i=(e,n)=>Object.assign(t("button",e,n),{type:"button"}),o=e=>"function"==typeof matchMedia&&matchMedia(e).matches,s=()=>o("(prefers-reduced-motion: reduce)"),a=e=>`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="${e}"/></svg>`;function r(r){let d=t("style");d.textContent='.design-outline{position:fixed;z-index:1;pointer-events:none;box-sizing:border-box;outline:2px solid var(--accent,#bda6ef);outline-offset:2px;transition:opacity 80ms ease}.design-outline[data-kind=hover]{outline-style:dashed;opacity:.8}.design-inspector{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;overflow:hidden;color:#e9e6e1;background:#0d0d0d;border-radius:inherit;font:12px/1.4 -apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;color-scheme:dark;opacity:0;translate:0 6px;pointer-events:none;transition:opacity .15s var(--ease-smooth-out),translate .25s var(--ease-smooth-out)}.design-inspector[hidden]{display:none}:host([data-sidebar="background"]) .design-inspector{position:fixed;inset:0 0 0 auto;width:380px;border-radius:0}:host([data-sidebar="edge"]) .design-inspector__heading{cursor:grab;touch-action:none;padding-top:22px}:host(.design-active[data-sidebar="edge"]) .edge-sidebar .edge-sidebar-grip{z-index:10;opacity:1!important}.design-inspector[data-state=active]{opacity:1;translate:0 0;pointer-events:auto}.design-inspector[data-state=closing]{opacity:0;translate:0 4px}.design-inspector button{cursor:pointer}.design-inspector__heading{flex:none;display:flex;align-items:center;gap:4px;min-height:54px;padding:0 8px 0 12px}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:35%;overflow:hidden;text-overflow:ellipsis;margin-left:-6px;padding:2px 6px;border-radius:7px;color:#909090;font-size:15px;font-weight:500}.design-inspector__parent:after{content:"/";margin-left:6px;color:#555}.design-inspector__target{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;font-size:15px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#909090;font-size:13px}.design-inspector__close,.design-inspector__fold,.design-inspector__actions button{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__parent:hover,.design-inspector__close:hover,.design-inspector__fold:hover,.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__fold{display:none}.design-inspector__fold svg{transition:rotate .25s var(--ease-smooth-out)}.design-inspector[data-folded] .design-inspector__fold svg{rotate:180deg}.design-inspector[data-folded]>:not(.design-inspector__heading){display:none}.design-inspector__controls{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}:host([data-sidebar="edge"]) .edge-sidebar[data-design-empty]:not([data-morphing]){height:auto!important}:host([data-sidebar="edge"]) [data-design-empty]>.design-inspector{position:relative;inset:auto}:host([data-sidebar="edge"]) [data-design-empty]:not([data-morphing])>.toolbar{position:absolute}.design-inspector[data-empty] .design-inspector__identity{visibility:hidden}.design-inspector[data-empty] .design-inspector__controls{display:grid;place-items:center}.design-inspector[data-empty] .design-inspector__bar:not([data-changes],[data-message]){display:none}.design-inspector__empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px 28px;color:#898680;font-size:11px;text-align:center}.design-inspector__empty>svg{box-sizing:content-box;width:20px;height:20px;margin-bottom:8px;padding:8px;border-radius:10px;background:#ffffff0a;color:#77736f}.design-inspector__empty strong{color:#e9e6e1;font-size:12px;font-weight:600}.design-inspector__empty ul{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}.design-inspector__empty kbd{display:inline-block;min-width:8px;padding:0 5px;border-radius:4px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -1px #ffffff12;color:#c9c5bf;font:inherit;font-size:10px;font-weight:500;line-height:17px}.design-inspector__bar{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;padding:0 12px;border-top:1px solid #ffffff0d;color:#909090;font-size:12px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.design-inspector__compare{display:inline-flex;flex:none;padding:2px;border-radius:7px;background:#ffffff0a}.design-inspector__compare[hidden],.design-inspector__bar[data-message] .design-inspector__compare{display:none}.design-inspector__compare button{height:22px;padding:0 8px;border-radius:5px;color:#9a9a9a;font:inherit;font-size:11px}.design-inspector__compare button:hover{color:#fff}.design-inspector__compare button[aria-pressed=true]{color:#fff;background:#ffffff1a}.design-inspector__status{display:none;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:design-status .2s var(--ease-smooth-out)}.design-inspector__bar[data-message] .design-inspector__status{display:block}.design-inspector__bar[data-message] .design-inspector__count,.design-inspector__bar:not([data-changes]) .design-inspector__tool{display:none}.design-inspector__actions{display:flex;align-items:center;gap:2px;margin-left:auto}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions button:last-child{min-height:34px;margin-left:6px;padding:0 14px;border-radius:8px;background:var(--accent,#bda6ef);color:#211b2d;font-size:12px;font-weight:500}.design-inspector__actions button:last-child:hover:not(:disabled){background:var(--accent,#bda6ef);color:#211b2d;filter:brightness(1.08)}.design-inspector :focus-visible{outline:2px solid var(--accent,#bda6ef);outline-offset:2px}@keyframes design-status{0%{opacity:0;translate:0 2px}}@media(max-width:520px){.design-inspector{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:min(58dvh,560px);border-radius:24px;box-shadow:0 -1px #ffffff24,0 16px 48px #0005;transition:translate .32s cubic-bezier(.22,1,.36,1),scale .32s cubic-bezier(.22,1,.36,1),opacity .15s ease;transform-origin:bottom center}.design-inspector__heading{height:52px;padding-left:18px}.design-inspector__fold{display:grid}.design-inspector[data-empty] .design-inspector__identity{visibility:visible}.design-inspector .design-field{height:34px}}@media(prefers-reduced-motion:reduce){.design-outline,.design-inspector,.design-inspector__fold svg,.design-inspector__status{transition:none;animation:none}}\n';let l=null,p=import("./design-panel-VLR2UILF.js").then(e=>{d.textContent+=e.designPanelStyles,l=e},()=>{k.textContent="Design controls unavailable · try again"}),c=t("aside","design-inspector");c.setAttribute("role","dialog"),c.setAttribute("aria-label","Design mode inspector"),c.setAttribute("aria-hidden","true"),c.hidden=!0;let g=t("div","design-outline");g.setAttribute("aria-hidden","true");let u=t("div","design-inspector__heading"),f=i("design-inspector__parent");f.hidden=!0;let m=t("span","design-inspector__target"),h=t("small"),x=i("design-inspector__close");x.setAttribute("aria-label","Exit design mode"),x.append(n("close"));let b=i("design-inspector__fold");b.append(n("chevron"));let y=t("div","design-inspector__identity");y.append(f,m,h),u.append(y,b,x);let v=t("div","design-inspector__controls"),_=t("div","design-inspector__bar"),w=t("span","design-inspector__count");w.title="Preview only · resets on exit";let k=t("p","design-inspector__status");k.setAttribute("role","status");let E=t("div","design-inspector__actions"),C=(e,t)=>{let n=i("design-inspector__tool");return n.dataset.tip=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},P=C("Undo",a("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),A=C("Reset",a("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),L=C("Copy CSS","");L.append(n("copy"));let T=i("","Comment"),S=i("design-text-edit","Edit text");S.title="Edit text",S.setAttribute("aria-label","Edit selected text inline"),E.append(P,A,L,T);let z=t("div","design-inspector__compare");z.setAttribute("role","group"),z.setAttribute("aria-label","Compare with the page");let M=["Before","After"].map((e,t)=>{let n=i("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>oe(!t)),z.append(n),n});_.append(w,z,k,E),c.append(u,v,_),r.root.append(d,g),(r.panelRoot??r.root).append(c);let D,R=!1,B=0,j=null,F=null,I=null,$=0,H=0,K=null,O="",V=null,U=null,q=new Map,N=new Map,W=new WeakMap,X=new WeakMap,Y=new AbortController,Z=()=>import("./design-export-YFMZGYR3.js"),G=e=>{D??=Z().then(({footerTips:t})=>t(_,r.root,Y.signal,e),()=>{D=void 0})};_.addEventListener("pointerover",G),_.addEventListener("focusin",G);let J=new Set,Q=[];function ee(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=q.get(e);o||q.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function te(e,t){let n=N.get(e);n||N.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(q.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||N.delete(e),pe(j,"selected")}let ne=0;new MutationObserver(()=>{let e=k.textContent??"";k.title=e,_.toggleAttribute("data-message",!!e),clearTimeout(ne),e&&(ne=window.setTimeout(function e(){I?.element?ne=window.setTimeout(e,2600):k.textContent=""},2600))}).observe(k,{childList:!0,characterData:!0,subtree:!0});let ie=!1;function oe(e){if(e===ie)return;e&&I?.element&&be(),ie=e;let t=!s();for(let[n,i]of N){let o=n.style.transition;t&&(n.style.transition=[...i.keys()].map(e=>`${e} .3s cubic-bezier(.22,1,.36,1)`).join());for(let[t,o]of i){let i=q.get(n)?.get(t);e?se(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}I?.showBefore(e),V?.showDesignBefore(e),M.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),c.toggleAttribute("data-before",e),xe()}function se(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function ae(e,t,n){j&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(ee(j,t),V?.noteDesignTokenOverride(j,t,n),j.style.setProperty(t,n,q.get(j)?.get(t)?.priority),te(j,t),xe()))}function re(e,t,n=!0){if(!j)return;let i={value:j.style.getPropertyValue(t),priority:j.style.getPropertyPriority(t)},o=X.get(e),s=o?.before??W.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Q.splice(Q.indexOf(o),1),X.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:j,property:t,before:s,after:i};Q.push(n),X.set(e,n)}n&&(W.set(e,i),X.delete(e)),xe()}function de(){if(v.replaceChildren(),le(),!j){let e=t("div","design-inspector__empty"),i=t("strong","","Select an element"),o=t("ul"),s=(...e)=>{let n=t("li");e.forEach((e,i)=>{i%2==0?n.append(e):n.append(t("kbd","",e))}),o.append(n)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),r.exitKey?s("","Esc"," or ",r.exitKey," to exit"):s("","Esc"," to exit"),e.append(n("design"),i,o),v.append(e),m.textContent="Select an element",h.textContent="",void(f.hidden=!0)}let e=`${j.tagName.toLowerCase()}${j.id?`#${j.id}`:""}`;m.textContent=e,h.textContent=j instanceof HTMLIFrameElement?"Frame only · contents are isolated":j.classList.length?`.${[...j.classList].slice(0,2).join(".")}`:"";let i=j.parentElement;f.hidden=!i||i===document.body||i===document.documentElement,f.textContent=i?.tagName.toLowerCase()??"",f.setAttribute("aria-label",`Select parent ${f.textContent}`);let o=j,s=l;s?(s.renderPanel(v,{element:o,changed:N.get(o),collapsed:J,editText:S,begin:(e,t)=>W.set(e,{value:o.style.getPropertyValue(t),priority:o.style.getPropertyPriority(t)}),apply:ae,commit:re,rerender:de}),(r.design||o.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(U??=import("./react-props-panel-NC7KLZ73.js").then(e=>V=e).catch(e=>{throw U=null,e}),U.then(e=>{if(!R||j!==o||v.querySelector(".design-react-group, .design-theme-group"))return;let t=r.root;e.attachThemeSwitcher(v,r.design,()=>ue(o),t);let n=e.createReactPropsPanel(o,()=>{k.textContent="React state preview · resets on exit",xe()},t,ue,r.design);n&&v.append(n),e.attachStyleTokenControls(o,s.fields,v,(e,t,n)=>{ee(o,e.property,n),te(o,e.property),W.set(t,{value:n,priority:o.style.getPropertyPriority(e.property)}),re(t,e.property)},t,s.valueFor,s.toHex,r.design,e=>{Q.push({element:o,undo:e}),xe()});let i=e.createDesignThemePanel(o,s,xe,t);i&&v.append(i)}).catch(()=>{}))):p.then(()=>{R&&j===o&&de()})}function le(){c.toggleAttribute("data-empty",T.hidden=!j),c.parentElement?.toggleAttribute("data-design-empty",R&&!j)}function pe(t,n,i=!1){if(!R||!t?.isConnected)return void(g.hidden=!0);let o=t.getBoundingClientRect();if(o.width&&o.height){if(g.hidden=!1,g.dataset.kind=n,i&&(t!==K||n!==O)){K=t,O=n,clearTimeout(H);let e=c.getBoundingClientRect(),i=t=>o.left<t+e.width&&o.right>t&&o.top<e.bottom&&o.bottom>e.top;r.flip&&e.width&&i(e.left)&&!i(document.documentElement.clientWidth-e.right)&&(H=window.setTimeout(r.flip,"hover"===n?350:0))}g.hidden=!e(g,o,t)}else g.hidden=!0}function ce(){$||($=requestAnimationFrame(()=>{$=0,pe(j??F,j?"selected":"hover")}))}let ge="function"==typeof ResizeObserver?new ResizeObserver(ce):null;function ue(e){!(e instanceof HTMLElement)||r.host.contains(e)||(I?.element&&I.element!==e&&be(),ge?.disconnect(),ge?.observe(e),j=e,F=e,de(),pe(e,"selected",!0),xe())}let fe=()=>o("(max-width:520px)");function me(e){c.toggleAttribute("data-folded",e&&fe()),b.setAttribute("aria-expanded",String(!c.hasAttribute("data-folded"))),b.setAttribute("aria-label",c.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function he(e){me(!1),fe()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=c.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:s()?"auto":"smooth"})})}function xe(){ce(),P.disabled=!Q.length&&!V?.canUndoReactProp(j)&&!V?.canUndoDesignTokenEdit(j),A.disabled=!function(){let e=j,t=e?(N.get(e)?.size??0)+ +!!I?.hasChanges(e)+ +!!V?.hasReactPropChanges(e)||+!!V?.hasDesignTokenEdit(e):0;return w.textContent=t?`${t} change${t>1?"s":""}`:"",_.toggleAttribute("data-changes",t>0||!P.disabled),z.hidden=!t&&!ie,t}(),L.disabled=!j||!N.get(j)?.size,T.disabled=!j,S.disabled=!!I?.busy||!j?.isConnected,S.textContent=I?.isEditing(j)?"Done editing":"Edit text",S.setAttribute("aria-label",I?.isEditing(j)?"Finish inline text editing":"Edit selected text inline")}function be(e=!1){I?.finish(e),xe()}function ye(e){if(!e){oe(!1),I?.finish();for(let[e,t]of q)for(let[n,i]of t)se(e,n,i);q.clear(),N.clear(),Q.length=0,I?.restoreAll(),V?.resetPreviews(),xe()}clearTimeout(B),B=0,R=e,le(),e?(c.hidden=!1,c.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{R&&(c.dataset.state="active")}),g.hidden=!j,de(),me(!j),pe(j,"selected"),x.focus({preventScroll:!0})):(g.hidden=!0,c.setAttribute("aria-hidden","true"),c.dataset.state="closing",s()?(c.hidden=!0,delete c.dataset.state):B=window.setTimeout(()=>{B=0,R||(c.hidden=!0,delete c.dataset.state)},250))}S.addEventListener("click",e=>{I||j&&(k.textContent="Loading inline text editor…",import("./inline-text-editor-Z2N32PER.js").then(t=>{I||!j||!R||(I=t.bindInlineTextTools({button:S,status:k,selected:()=>j,active:()=>R,onChange:xe,onCommit(e){Q.push({kind:"text",element:e})}}),I.toggle(e))}).catch(()=>{k.textContent="Inline text editing is unavailable."}))}),b.addEventListener("click",()=>me(!c.hasAttribute("data-folded"))),f.addEventListener("click",()=>ue(j?.parentElement??null)),x.addEventListener("click",()=>{I?.element&&be(),ye(!1),r.onExit()}),P.addEventListener("click",()=>{let e=Q.pop();e?e.kind?"text"===e.kind?j===(I?.undo()??e.element)&&de():(se(e.element,e.property,e.before),V?.syncDesignTokenBinding(e.element,e.property),te(e.element,e.property),j===e.element&&de(),pe(j??F,j?"selected":"hover")):(e.undo(),de()):(j&&(V?.undoDesignTokenEdit(j),V?.undoReactProp(j),de()),k.textContent="React state preview · resets on exit"),xe(),(P.disabled?x:P).focus({preventScroll:!0})}),A.addEventListener("click",()=>{if(!j)return;I?.isEditing(j)&&be(!0);let e=N.get(j),t=I?.hasChanges(j)??!1,n=V?.hasReactPropChanges(j)??!1,i=V?.hasDesignTokenEdit(j)??!1;if(e?.size||t||n||i){t&&I?.reset(j);for(let t of e?.keys()??[])se(j,t,q.get(j)?.get(t));N.delete(j),n&&V?.resetReactProps(j),i&&V?.resetDesignTokenEdits(j);for(let e=Q.length-1;e>=0;e--)Q[e].element===j&&Q.splice(e,1);de(),pe(j,"selected"),xe(),x.focus({preventScroll:!0})}}),L.addEventListener("click",()=>{let e=j,t=e?N.get(e):void 0;!e||!t?.size||Z().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),k.textContent="CSS copied"}catch{k.textContent=i}})}),T.addEventListener("click",()=>{let e=j;e&&(I?.isEditing(e)&&be(),Z().then(({designProposal:t})=>r.onComment(e,t(e,N.get(e),t=>q.get(e)?.get(t)?.computed,V?.tokenBoundProperties(e),[I?.proposal(e),V?.proposedDesignChanges(e)],V?.designContext(e,r.design))),()=>{k.textContent="Comment unavailable · try again"}))});let ve=()=>oe(!1);for(let e of[v,E,S])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,ve,!0);return document.addEventListener("pointermove",function(e){if(!R||e.composedPath().includes(r.host))return;let t=r.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||r.host.contains(t)||(F=t,j||pe(F,"hover",!0))},{capture:!0,signal:Y.signal}),document.addEventListener("pointerdown",function(e){if(!R||e.composedPath().includes(r.host))return;let t=r.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||r.host.contains(t)||I?.element&&(t===I.element||I.element.contains(t))||(I?.element&&be(),e.preventDefault(),e.stopImmediatePropagation(),ue(t))},{capture:!0,signal:Y.signal}),document.addEventListener("click",function(e){!R||e.composedPath().includes(r.host)||(e.preventDefault(),e.stopImmediatePropagation(),j&&he(j),2===e.detail&&j?.contains(e.target)&&!S.disabled&&!I?.element&&S.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:Y.signal}),document.addEventListener("keydown",function(e){if(I?.handleKey(e))return void S.focus({preventScroll:!0});let t=e.key.toLowerCase(),n=e.composedPath()[0];if(R&&!z.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(n instanceof HTMLElement&&(n.isContentEditable||n.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void oe("b"===t?!ie:"arrowleft"===t);if(R&&!I?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(r.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),ue(t),void he(t)}R&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),ye(!1),r.onExit())},{capture:!0,signal:Y.signal}),window.addEventListener("scroll",ce,{capture:!0,passive:!0,signal:Y.signal}),window.addEventListener("resize",ce,{passive:!0,signal:Y.signal}),{setActive:ye,mountPanel(e){c.parentElement!==e&&(c.parentElement?.removeAttribute("data-design-empty"),e.append(c),le())},get active(){return R},ready:p,destroy(){I?.finish(!0),ye(!1),clearTimeout(B),clearTimeout(ne),clearTimeout(H),ge?.disconnect(),Y.abort(),cancelAnimationFrame($),c.remove(),g.remove(),d.remove()}}}export{r as createDesignMode};

package/dist/dom.d.ts

@@ -11,6 +11,8 @@ export declare const editable: (node?: EventTarget | null) => boolean;
  */
 export declare const isolatedEvents: string[];
 export declare const isolated: (event: Event, root: Node) => boolean;
+/** Window capture precedes host-dialog document capture, while feedback still receives Escape. */
+export declare function isolateEscape(host: HTMLElement, signal: AbortSignal): void;
 /** Listen on document, plus komo's shadow root for the events stopped at its host. */
 export declare function onPage<E extends Event>(node: Node, type: string, listener: (event: E) => void, options?: AddEventListenerOptions): void;
 export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string): HTMLElementTagNameMap[K];

package/dist/frame-portals.d.ts

@@ -2,9 +2,12 @@ export type FrameMapping = {
     scale: number;
     left: number;
     top: number;
+    zoom?: number;
+    bounds?: Pick<DOMRect, "left" | "top" | "right" | "bottom" | "width" | "height">;
 };
 /** Compose Frame with host portals without moving live DOM or capturing entrance scales. */
 export declare function createFramePortals(surface: HTMLElement, host: HTMLElement, include: ((node: HTMLElement) => boolean) | undefined, onChange: () => void): {
     update(next: FrameMapping | null): void;
+    reposition: () => void;
     destroy(): void;
 };

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-57AHSROT.js";import"./chunk-URGMAMH5.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-ANKCS6NI.js";export{s as initComments,o as initKomo};
+import{b as o,c as s}from"./chunk-J77KQ2WS.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";export{s as initComments,o as initKomo};