@hazem3500/komo 0.9.25 → 0.9.26

package/dist/chunk-MZE3O5EH.js

@@ -0,0 +1 @@
+import{a as t}from"./chunk-RPY7OOOR.js";var e=".komo-select,.komo-tokens{position:absolute;z-index:20;box-sizing:border-box;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up],.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select,.komo-tokens{animation:none}}";function o(e,o,r){if(!t(e))return()=>{};let n=e.style.getPropertyValue(o),i=e.style.getPropertyPriority(o);return e.style.setProperty(o,r,i),()=>{n?e.style.setProperty(o,n,i):e.style.removeProperty(o)}}function r(t){let e={top:0,left:0,bottom:innerHeight,right:innerWidth};for(let o=t.parentElement;o;o=o.parentElement)if(/auto|scroll|hidden/.test(getComputedStyle(o).overflowY)){let t=o.getBoundingClientRect();return{top:Math.max(t.top,0),left:Math.max(t.left,0),bottom:Math.min(t.bottom,e.bottom),right:Math.min(t.right,e.right)}}return e}function n(t,e,o){let r=t.getRootNode();r.addEventListener("komo-preview-cancel",e,{signal:o});let n=new MutationObserver(()=>{t.isConnected||e()});n.observe(document,{childList:!0,subtree:!0}),r instanceof ShadowRoot&&n.observe(r,{childList:!0,subtree:!0}),o.addEventListener("abort",()=>n.disconnect(),{once:!0})}export{e as a,o as b,r as c,n as d};

package/dist/design-mode.js

@@ -1 +1 @@
-import{a as e,b as t}from"./chunk-RPY7OOOR.js";import{a as n}from"./chunk-53M6AOAX.js";import{j as i,k as o}from"./chunk-PLSWBSSX.js";var s=(e,t)=>Object.assign(i("button",e,t),{type:"button"}),a=e=>"function"==typeof matchMedia&&matchMedia(e).matches,r=()=>a("(prefers-reduced-motion: reduce)");function d(d){let l=i("style");l.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-outline--prospective[data-kind=hover]{opacity:.55}.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__back,.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__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.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__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__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 c=null,p=import("./design-panel-KZCDP47N.js").then(e=>{l.textContent+=e.designPanelStyles,c=e},()=>{A.textContent="Design controls unavailable · try again"}),g=i("aside","design-inspector");g.setAttribute("role","dialog"),g.setAttribute("aria-label","Design mode inspector"),g.setAttribute("aria-hidden","true"),g.hidden=!0;let u=i("div","design-outline");u.setAttribute("aria-hidden","true");let m=i("div","design-outline design-outline--prospective");m.setAttribute("aria-hidden","true"),m.dataset.kind="hover",m.hidden=!0;let h=i("div","design-inspector__heading"),f=null,b=s("design-inspector__back");b.hidden=!0,b.append(o("chevron")),b.addEventListener("click",()=>f?.run());let v=s("design-inspector__parent");v.hidden=!0;let y=i("span","design-inspector__target"),x=i("small"),_=s("design-inspector__close");_.setAttribute("aria-label","Exit design mode"),_.append(o("close"));let w=s("design-inspector__fold");w.append(o("chevron"));let E=i("div","design-inspector__identity");E.append(v,y,x),h.append(b,E,w,_);let k=i("div","design-inspector__controls"),C=i("div","design-inspector__bar"),P=i("span","design-inspector__count");P.title="Runtime preview · Undo, Reset or reload to restore";let A=i("p","design-inspector__status");A.setAttribute("role","status");let L=i("div","design-inspector__actions"),T=e=>{let t=s("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},M=T("Undo"),S=T("Reset"),R=T("Copy CSS");R.append(o("copy"));let D=s("","Comment"),z=s("design-text-edit","Edit text");z.title="Edit text",z.setAttribute("aria-label","Edit selected text inline"),L.append(M,S,R,D);let H=i("div","design-inspector__compare");H.setAttribute("role","group"),H.setAttribute("aria-label","Compare with the page");let K=["Before","After"].map((e,t)=>{let n=s("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>me(!t)),H.append(n),n});C.append(P,H,A,L);let B,j=i("div");j.hidden=!0,g.append(h,j,k,C),d.root.append(l,u,m),(d.panelRoot??d.root).append(g);let I,O=!1,V=0,$=null,F=null,U=()=>d.page?.()??location.pathname,q=U(),N=new Map,W=null,X=0,Y=0,J=null,Z="",G=null,Q=null,ee=new Map,te=new Map,ne=new WeakMap,ie=new WeakMap,oe=new AbortController,se=()=>import("./design-export-LA5VVR5Z.js"),ae=e=>{I??=se().then(({footerTips:t})=>t(C,d.root,oe.signal,e),()=>{I=void 0})};C.addEventListener("pointerover",ae),C.addEventListener("focusin",ae);let re=new Set,de=[];function le(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ee.get(e);o||ee.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ce(e,t){let n=te.get(e);n||te.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ee.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||te.delete(e),we($,"selected")}let pe=0;new MutationObserver(()=>{let e=A.textContent??"";A.title=e,C.toggleAttribute("data-message",!!e),clearTimeout(pe),e&&(pe=window.setTimeout(function e(){W?.element?pe=window.setTimeout(e,2600):A.textContent=""},2600))}).observe(A,{childList:!0,characterData:!0,subtree:!0});let ge,ue=!1;function me(e){if(e===ue)return;e&&W?.element&&Se(),ue=e;let t=!r();for(let[n,i]of te){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=ee.get(n)?.get(t);e?he(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}W?.showBefore(e),G?.showDesignBefore(e),K.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),g.toggleAttribute("data-before",e),Me()}function he(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function fe(e,t,n){$&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(le($,t),G?.noteDesignTokenOverride($,t,n),$.style.setProperty(t,n,ee.get($)?.get(t)?.priority),ce($,t),Me()))}function be(e,t,n=!0){if(!$)return;let i={value:$.style.getPropertyValue(t),priority:$.style.getPropertyPriority(t)},o=ie.get(e),s=o?.before??ne.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&de.splice(de.indexOf(o),1),ie.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:$,property:t,before:s,after:i};de.push(n),ie.set(e,n)}n&&(ne.set(e,i),ie.delete(e)),Me()}function ve(){if(k.replaceChildren(),ye(),!$)return B&&k.append(B.empty),y.textContent="Select an element",x.textContent="",void(v.hidden=!0);let e=`${$.tagName.toLowerCase()}${$.id?`#${$.id}`:""}`;y.textContent=e,x.textContent=$ instanceof HTMLIFrameElement?"Frame only · contents are isolated":$.classList.length?`.${[...$.classList].slice(0,2).join(".")}`:"";let t=$.parentElement;v.hidden=!t||t===document.body||t===document.documentElement,v.textContent=t?.tagName.toLowerCase()??"",v.setAttribute("aria-label",`Select parent ${v.textContent}`);let n=$,i=c;i?(i.renderPanel(k,{element:n,changed:te.get(n),collapsed:re,editText:z,begin:(e,t)=>ne.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:fe,commit:be,rerender:ve}),(d.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(Q??=import("./react-props-panel-PV3SKNTA.js").then(e=>G=e).catch(e=>{throw Q=null,e}),Q.then(e=>{if(!O||$!==n||k.querySelector(".design-react-group, .design-theme-group"))return;let t=d.root;e.attachThemeSwitcher(k,d.design,()=>Pe(n),t);let o=e.createReactPropsPanel(n,()=>{A.textContent="Runtime preview · Undo, Reset or reload to restore",Me()},t,Pe,d.design);o&&k.append(o),e.attachStyleTokenControls(n,i.fields,k,(e,t,i)=>{le(n,e.property,i),ce(n,e.property),ne.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),be(t,e.property)},t,i.valueFor,i.toHex,d.design,e=>{de.push({element:n,undo:e}),Me()});let s=e.createDesignThemePanel(n,i,Me,t);s&&k.append(s)}).catch(()=>{}))):p.then(()=>{O&&$===n&&ve()})}function ye(){g.toggleAttribute("data-empty",D.hidden=!$),B&&(B.hint.hidden=!$),g.parentElement?.toggleAttribute("data-design-empty",O&&!$);let e=[...N.keys()].filter(xe);j.hidden=!!$||!e.length,B&&(B.pending.hidden=j.hidden),B?.update(e.length,e.some(e=>e.isConnected&&N.get(e)===U()))}function xe(e){return!!(te.get(e)?.size||e instanceof HTMLElement&&W?.hasChanges(e)||G?.hasReactPropChanges(e)||G?.hasDesignTokenEdit(e))}function _e(){Se(),Ce?.disconnect(),$=null,F=null,u.hidden=m.hidden=!0,ve(),Me()}function we(e,t,i=!1,o=u){if(!O||!e?.isConnected)return void(o.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(o.hidden=!1,o.dataset.kind=t,i&&(e!==J||t!==Z)){J=e,Z=t,clearTimeout(Y);let n=g.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;d.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(Y=window.setTimeout(d.flip,"hover"===t?350:0))}o.hidden=!n(o,s,e,d.bounds?.(e))}else o.hidden=!0}function Ee(e=!1){we($??F,$?"selected":"hover",e),we($&&F!==$?F:null,"hover",!1,m)}function ke(){X||(X=requestAnimationFrame(()=>{X=0,$&&(!$.isConnected||q!==U())&&_e(),Ee()}))}let Ce="function"==typeof ResizeObserver?new ResizeObserver(ke):null;function Pe(t){!e(t)||!t.isConnected||d.host.contains(t)||(W?.element&&W.element!==t&&Se(),Ce?.disconnect(),Ce?.observe(t),$=t,F=t,q=U(),N.set(t,q),ve(),we(t,"selected",!0),m.hidden=!0,Me())}let Ae=()=>a("(max-width:520px)");function Le(e){g.toggleAttribute("data-folded",e&&Ae()),w.setAttribute("aria-expanded",String(!g.hasAttribute("data-folded"))),w.setAttribute("aria-label",g.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Te(e){Le(!1),Ae()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=g.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:r()?"auto":"smooth"})})}function Me(){ke(),M.disabled=!de.length&&!G?.canUndoReactProp($)&&!G?.canUndoDesignTokenEdit($),S.disabled=!function(){let e=$,t=e?(te.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!W?.hasChanges(e))+ +!!G?.hasReactPropChanges(e)||+!!G?.hasDesignTokenEdit(e):0;return P.textContent=t?`${t} change${t>1?"s":""}`:"",C.toggleAttribute("data-changes",t>0||!M.disabled),H.hidden=!t&&!ue,t}(),R.disabled=!$||!te.get($)?.size,D.disabled=!$,z.disabled=!(!W?.busy&&$?.isConnected&&$ instanceof HTMLElement),z.textContent=W?.isEditing($ instanceof HTMLElement?$:null)?"Done editing":"Edit text",z.setAttribute("aria-label",W?.isEditing($ instanceof HTMLElement?$:null)?"Finish inline text editing":"Edit selected text inline"),ye()}function Se(e=!1){W?.finish(e),Me()}function Re(e){!O||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),_e(),De(!1),d.onExit())}function De(e){if(e||(W?.finish(),O&&(ge=ue,me(!0)),G?.restoreThemes()),e&&!O&&void 0!==ge){let e=ge;ge=void 0,me(e)}e&&$&&(!$.isConnected||q!==U())&&_e(),clearTimeout(V),V=0,O=e,ye(),e?(g.hidden=!1,g.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{O&&(g.dataset.state="active")}),u.hidden=!$,ve(),Le(!$),we($,"selected"),_.focus({preventScroll:!0})):(F=null,u.hidden=m.hidden=!0,g.setAttribute("aria-hidden","true"),g.dataset.state="closing",r()?(g.hidden=!0,delete g.dataset.state):V=window.setTimeout(()=>{V=0,O||(g.hidden=!0,delete g.dataset.state)},250))}function ze(){me(!1);for(let[e,t]of ee)for(let[n,i]of t)he(e,n,i);ee.clear(),te.clear(),de.length=0,W?.restoreAll(),G?.resetPreviews(),N.clear(),Me()}function He(e,t){return t(e,te.get(e),t=>ee.get(e)?.get(t)?.computed,G?.tokenBoundProperties(e),[e instanceof HTMLElement?W?.proposal(e):void 0,G?.proposedDesignChanges(e)],G?.designContext(e,d.design))}function Ke(e){W?.isEditing(e instanceof HTMLElement?e:null)&&Se(!0);let t=te.get(e),n=(e instanceof HTMLElement&&W?.hasChanges(e))??!1,i=G?.hasReactPropChanges(e)??!1,o=G?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||o){n&&e instanceof HTMLElement&&W?.reset(e);for(let n of t?.keys()??[])he(e,n,ee.get(e)?.get(n));te.delete(e),ee.delete(e),N.delete(e),i&&G?.resetReactProps(e),o&&G?.resetDesignTokenEdits(e);for(let t=de.length-1;t>=0;t--)de[t].element===e&&de.splice(t,1)}}z.addEventListener("click",e=>{W||$&&(A.textContent="Loading inline text editor…",import("./inline-text-editor-JSJVHPMM.js").then(t=>{W||!$||!O||(W=t.bindInlineTextTools({button:z,status:A,selected:()=>$ instanceof HTMLElement?$:null,active:()=>O,onChange:Me,onCommit(e){de.push({kind:"text",element:e})}}),W.toggle(e))}).catch(()=>{A.textContent="Inline text editing is unavailable."}))}),w.addEventListener("click",()=>Le(!g.hasAttribute("data-folded"))),v.addEventListener("click",()=>Pe($?.parentElement??null)),_.addEventListener("click",()=>{W?.element&&Se(),_e(),De(!1),d.onExit()}),M.addEventListener("click",()=>{let e=de.pop();e?e.kind?"text"===e.kind?$===(W?.undo()??e.element)&&ve():(he(e.element,e.property,e.before),G?.syncDesignTokenBinding(e.element,e.property),ce(e.element,e.property),$===e.element&&ve(),we($??F,$?"selected":"hover")):(e.undo(),ve()):($&&(G?.undoDesignTokenEdit($),G?.undoReactProp($),ve()),A.textContent="Runtime preview · Undo, Reset or reload to restore"),Me(),(M.disabled?_:M).focus({preventScroll:!0})}),S.addEventListener("click",()=>{$&&(Ke($),ve(),we($,"selected"),Me(),_.focus({preventScroll:!0}))}),R.addEventListener("click",()=>{let e=$,t=e?te.get(e):void 0;!e||!t?.size||se().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),A.textContent="CSS copied"}catch{A.textContent=i}})}),D.addEventListener("click",()=>{let e=$;e&&(W?.isEditing(e instanceof HTMLElement?e:null)&&Se(),se().then(({designProposal:t})=>{if(!O||$!==e||!e.isConnected)return;let n=He(e,t);Ke(e),Me(),d.onComment(e,n)},()=>{A.textContent="Comment unavailable · try again"}))});let Be=()=>me(!1);for(let e of[k,L,z])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Be,!0);document.addEventListener("pointermove",function(e){if(!O)return;if(e.composedPath().includes(d.host))return F=null,void Ee();let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);F=n&&!d.host.contains(n)?n:null,Ee(!$)},{capture:!0,signal:oe.signal}),document.addEventListener("pointerdown",function(e){if(!O||0!==e.button||e.composedPath().includes(d.host))return;let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!n||d.host.contains(n)||W?.element&&(n===W.element||W.element.contains(n))||(W?.element&&Se(),e.preventDefault(),e.stopImmediatePropagation(),Pe(n))},{capture:!0,signal:oe.signal}),document.addEventListener("click",function(e){!O||e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),$&&Te($),2===e.detail&&$?.contains(e.target)&&!z.disabled&&!W?.element&&z.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:oe.signal}),document.addEventListener("keydown",function(t){if(W?.handleKey(t))return void z.focus({preventScroll:!0});let n=t.key.toLowerCase(),i=t.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if(O&&$&&t.altKey&&!t.ctrlKey&&!t.metaKey&&!o&&("arrowup"===n||"arrowdown"===n)){let i=("arrowup"===n?$.parentElement:[...$.children].find(t=>e(t)&&!t.matches("script,style,defs,title,desc,metadata")))??null;return void(e(i)&&i!==document.body&&i!==document.documentElement&&!d.host.contains(i)&&(t.preventDefault(),t.stopImmediatePropagation(),Pe(i),Te(i)))}if(O&&!H.hidden&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&("b"===n||"arrowleft"===n||"arrowright"===n)&&!o)return t.preventDefault(),t.stopImmediatePropagation(),void me("b"===n?!ue:"arrowleft"===n);if(O&&!W?.element&&("Enter"===t.key||" "===t.key)&&!t.composedPath().includes(d.host)){let n=document.activeElement;if(e(n)&&n!==document.body&&n!==document.documentElement)return t.preventDefault(),t.stopImmediatePropagation(),Pe(n),void Te(n)}t.composedPath().includes(d.host)&&Re(t)},{capture:!0,signal:oe.signal}),window.addEventListener("keydown",Re,{signal:oe.signal}),window.addEventListener("scroll",ke,{capture:!0,passive:!0,signal:oe.signal}),window.addEventListener("resize",ke,{passive:!0,signal:oe.signal});let je=new MutationObserver(()=>{O&&$&&!$.isConnected&&_e(),F&&!F.isConnected&&(F=null,Ee())});je.observe(document.body,{childList:!0,subtree:!0});let Ie=se().then(e=>{oe.signal.aborted||(B=e.selectionViews({exitKey:d.exitKey,review(){let e=[...N.keys()].reverse().find(e=>e.isConnected&&N.get(e)===U()&&xe(e));e&&Pe(e)},reset:ze,proposals:()=>[...N.keys()].filter(xe).map(t=>He(t,e.designProposal)),message:e=>{A.textContent=e}}),l.textContent+=B.styles,M.innerHTML=B.icons.undo,S.innerHTML=B.icons.reset,g.insertBefore(B.hint,j),j.append(B.pending),O?ve():ye())},()=>{A.textContent="Selection tools unavailable · try again"});return{setActive:De,select:Pe,clearSelection:_e,setReturnAction(e){f=e,b.hidden=!e,e&&(b.setAttribute("aria-label",e.label),b.title=e.label)},mountPanel(e){g.parentElement!==e&&(g.parentElement?.removeAttribute("data-design-empty"),e.append(g),ye())},get active(){return O},ready:Promise.all([p,Ie]),destroy(){W?.finish(!0),De(!1),ze(),clearTimeout(V),clearTimeout(pe),clearTimeout(Y),Ce?.disconnect(),je.disconnect(),oe.abort(),cancelAnimationFrame(X),g.remove(),u.remove(),m.remove(),l.remove()}}}export{d as createDesignMode};
+import{a as e,b as t}from"./chunk-RPY7OOOR.js";import{a as n}from"./chunk-53M6AOAX.js";import{j as i,k as o}from"./chunk-PLSWBSSX.js";var s=(e,t)=>Object.assign(i("button",e,t),{type:"button"}),a=e=>"function"==typeof matchMedia&&matchMedia(e).matches,r=()=>a("(prefers-reduced-motion: reduce)");function d(d){let l=i("style");l.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-outline--prospective[data-kind=hover]{opacity:.55}.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__back,.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__back,.design-inspector__close,.design-inspector__fold{flex:none}.design-inspector__back svg,.design-inspector__close svg,.design-inspector__fold svg,.design-inspector__actions svg{width:16px;height:16px}.design-inspector__back svg{rotate:90deg}.design-inspector__back[hidden]{display:none}.design-inspector__back:hover,.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__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__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 c=null,p=import("./design-panel-3SQFWOPU.js").then(e=>{l.textContent+=e.designPanelStyles,c=e},()=>{A.textContent="Design controls unavailable · try again"}),g=i("aside","design-inspector");g.setAttribute("role","dialog"),g.setAttribute("aria-label","Design mode inspector"),g.setAttribute("aria-hidden","true"),g.hidden=!0;let u=i("div","design-outline");u.setAttribute("aria-hidden","true");let m=i("div","design-outline design-outline--prospective");m.setAttribute("aria-hidden","true"),m.dataset.kind="hover",m.hidden=!0;let h=i("div","design-inspector__heading"),f=null,b=s("design-inspector__back");b.hidden=!0,b.append(o("chevron")),b.addEventListener("click",()=>f?.run());let v=s("design-inspector__parent");v.hidden=!0;let y=i("span","design-inspector__target"),x=i("small"),_=s("design-inspector__close");_.setAttribute("aria-label","Exit design mode"),_.append(o("close"));let w=s("design-inspector__fold");w.append(o("chevron"));let E=i("div","design-inspector__identity");E.append(v,y,x),h.append(b,E,w,_);let k=i("div","design-inspector__controls"),C=i("div","design-inspector__bar"),P=i("span","design-inspector__count");P.title="Runtime preview · Undo, Reset or reload to restore";let A=i("p","design-inspector__status");A.setAttribute("role","status");let L=i("div","design-inspector__actions"),T=e=>{let t=s("design-inspector__tool");return t.dataset.tip=e,t.setAttribute("aria-label",e),t},M=T("Undo"),S=T("Reset"),R=T("Copy CSS");R.append(o("copy"));let D=s("","Comment"),z=s("design-text-edit","Edit text");z.title="Edit text",z.setAttribute("aria-label","Edit selected text inline"),L.append(M,S,R,D);let H=i("div","design-inspector__compare");H.setAttribute("role","group"),H.setAttribute("aria-label","Compare with the page");let B=["Before","After"].map((e,t)=>{let n=s("",e);return n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>me(!t)),H.append(n),n});C.append(P,H,A,L);let K,O=i("div");O.hidden=!0,g.append(h,O,k,C),d.root.append(l,u,m),(d.panelRoot??d.root).append(g);let I,j=!1,F=0,$=null,U=null,V=()=>d.page?.()??location.pathname,W=V(),X=new Map,q=null,Y=0,N=0,G=null,Q="",Z=null,J=null,ee=new Map,te=new Map,ne=new WeakMap,ie=new WeakMap,oe=new AbortController,se=()=>import("./design-export-LA5VVR5Z.js"),ae=e=>{I??=se().then(({footerTips:t})=>t(C,d.root,oe.signal,e),()=>{I=void 0})};C.addEventListener("pointerover",ae),C.addEventListener("focusin",ae);let re=new Set,de=[];function le(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=ee.get(e);o||ee.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function ce(e,t){let n=te.get(e);n||te.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(ee.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||te.delete(e),we($,"selected")}let pe=0;new MutationObserver(()=>{let e=A.textContent??"";A.title=e,C.toggleAttribute("data-message",!!e),clearTimeout(pe),e&&(pe=window.setTimeout(function e(){q?.element?pe=window.setTimeout(e,2600):A.textContent=""},2600))}).observe(A,{childList:!0,characterData:!0,subtree:!0});let ge,ue=!1;function me(e){if(e===ue)return;e&&q?.element&&Se(),ue=e;let t=!r();for(let[n,i]of te){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=ee.get(n)?.get(t);e?he(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}q?.showBefore(e),Z?.showDesignBefore(e),B.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),g.toggleAttribute("data-before",e),Me()}function he(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function fe(e,t,n){$&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(le($,t),Z?.noteDesignTokenOverride($,t,n),$.style.setProperty(t,n,ee.get($)?.get(t)?.priority),ce($,t),Me()))}function be(e,t,n=!0){if(!$)return;let i={value:$.style.getPropertyValue(t),priority:$.style.getPropertyPriority(t)},o=ie.get(e),s=o?.before??ne.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&de.splice(de.indexOf(o),1),ie.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:$,property:t,before:s,after:i};de.push(n),ie.set(e,n)}n&&(ne.set(e,i),ie.delete(e)),Me()}function ve(){if(He(),k.replaceChildren(),ye(),!$)return K&&k.append(K.empty),y.textContent="Select an element",x.textContent="",void(v.hidden=!0);let e=`${$.tagName.toLowerCase()}${$.id?`#${$.id}`:""}`;y.textContent=e,x.textContent=$ instanceof HTMLIFrameElement?"Frame only · contents are isolated":$.classList.length?`.${[...$.classList].slice(0,2).join(".")}`:"";let t=$.parentElement;v.hidden=!t||t===document.body||t===document.documentElement,v.textContent=t?.tagName.toLowerCase()??"",v.setAttribute("aria-label",`Select parent ${v.textContent}`);let n=$,i=c;i?(i.renderPanel(k,{element:n,changed:te.get(n),collapsed:re,editText:z,begin:(e,t)=>ne.set(e,{value:n.style.getPropertyValue(t),priority:n.style.getPropertyPriority(t)}),apply:fe,commit:be,rerender:ve}),(d.design||n.closest("[data-komo-inspectable], [data-komo-design-tokens]"))&&(J??=import("./react-props-panel-IU7XYCCH.js").then(e=>Z=e).catch(e=>{throw J=null,e}),J.then(e=>{if(!j||$!==n||k.querySelector(".design-react-group, .design-theme-group"))return;let t=d.root;e.attachThemeSwitcher(k,d.design,()=>Pe(n),t);let o=e.createReactPropsPanel(n,()=>{A.textContent="Runtime preview · Undo, Reset or reload to restore",Me()},t,Pe,d.design);o&&k.append(o),e.attachStyleTokenControls(n,i.fields,k,(e,t,i)=>{le(n,e.property,i),ce(n,e.property),ne.set(t,{value:i,priority:n.style.getPropertyPriority(e.property)}),be(t,e.property)},t,i.valueFor,i.toHex,d.design,e=>{de.push({element:n,undo:e}),Me()});let s=e.createDesignThemePanel(n,i,Me,t);s&&k.append(s)}).catch(()=>{}))):p.then(()=>{j&&$===n&&ve()})}function ye(){g.toggleAttribute("data-empty",D.hidden=!$),K&&(K.hint.hidden=!$),g.parentElement?.toggleAttribute("data-design-empty",j&&!$);let e=[...X.keys()].filter(xe);O.hidden=!!$||!e.length,K&&(K.pending.hidden=O.hidden),K?.update(e.length,e.some(e=>e.isConnected&&X.get(e)===V()))}function xe(e){return!!(te.get(e)?.size||e instanceof HTMLElement&&q?.hasChanges(e)||Z?.hasReactPropChanges(e)||Z?.hasDesignTokenEdit(e))}function _e(){Se(),Ce?.disconnect(),$=null,U=null,u.hidden=m.hidden=!0,ve(),Me()}function we(e,t,i=!1,o=u){if(!j||!e?.isConnected)return void(o.hidden=!0);let s=e.getBoundingClientRect();if(s.width&&s.height){if(o.hidden=!1,o.dataset.kind=t,i&&(e!==G||t!==Q)){G=e,Q=t,clearTimeout(N);let n=g.getBoundingClientRect(),i=e=>s.left<e+n.width&&s.right>e&&s.top<n.bottom&&s.bottom>n.top;d.flip&&n.width&&i(n.left)&&!i(document.documentElement.clientWidth-n.right)&&(N=window.setTimeout(d.flip,"hover"===t?350:0))}o.hidden=!n(o,s,e,d.bounds?.(e))}else o.hidden=!0}function Ee(e=!1){we($??U,$?"selected":"hover",e),we($&&U!==$?U:null,"hover",!1,m)}function ke(){Y||(Y=requestAnimationFrame(()=>{Y=0,$&&(!$.isConnected||W!==V())&&_e(),Ee()}))}let Ce="function"==typeof ResizeObserver?new ResizeObserver(ke):null;function Pe(t){!e(t)||!t.isConnected||d.host.contains(t)||(q?.element&&q.element!==t&&Se(),Ce?.disconnect(),Ce?.observe(t),$=t,U=t,W=V(),X.set(t,W),ve(),we(t,"selected",!0),m.hidden=!0,Me())}let Ae=()=>a("(max-width:520px)");function Le(e){g.toggleAttribute("data-folded",e&&Ae()),w.setAttribute("aria-expanded",String(!g.hasAttribute("data-folded"))),w.setAttribute("aria-label",g.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function Te(e){Le(!1),Ae()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=g.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:r()?"auto":"smooth"})})}function Me(){ke(),M.disabled=!de.length&&!Z?.canUndoReactProp($)&&!Z?.canUndoDesignTokenEdit($),S.disabled=!function(){let e=$,t=e?(te.get(e)?.size??0)+ +(e instanceof HTMLElement&&!!q?.hasChanges(e))+ +!!Z?.hasReactPropChanges(e)||+!!Z?.hasDesignTokenEdit(e):0;return P.textContent=t?`${t} change${t>1?"s":""}`:"",C.toggleAttribute("data-changes",t>0||!M.disabled),H.hidden=!t&&!ue,t}(),R.disabled=!$||!te.get($)?.size,D.disabled=!$,z.disabled=!(!q?.busy&&$?.isConnected&&$ instanceof HTMLElement),z.textContent=q?.isEditing($ instanceof HTMLElement?$:null)?"Done editing":"Edit text",z.setAttribute("aria-label",q?.isEditing($ instanceof HTMLElement?$:null)?"Finish inline text editing":"Edit selected text inline"),ye()}function Se(e=!1){q?.finish(e),Me()}function Re(e){!j||"Escape"!==e.key||e.defaultPrevented&&!e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),_e(),De(!1),d.onExit())}function De(e){if(e||(He(),q?.finish(),j&&(ge=ue,me(!0)),Z?.restoreThemes()),e&&!j&&void 0!==ge){let e=ge;ge=void 0,me(e)}e&&$&&(!$.isConnected||W!==V())&&_e(),clearTimeout(F),F=0,j=e,ye(),e?(g.hidden=!1,g.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{j&&(g.dataset.state="active")}),u.hidden=!$,ve(),Le(!$),we($,"selected"),_.focus({preventScroll:!0})):(U=null,u.hidden=m.hidden=!0,g.setAttribute("aria-hidden","true"),g.dataset.state="closing",r()?(g.hidden=!0,delete g.dataset.state):F=window.setTimeout(()=>{F=0,j||(g.hidden=!0,delete g.dataset.state)},250))}function ze(){He(),me(!1);for(let[e,t]of ee)for(let[n,i]of t)he(e,n,i);ee.clear(),te.clear(),de.length=0,q?.restoreAll(),Z?.resetPreviews(),X.clear(),Me()}function He(){d.root.dispatchEvent(new Event("komo-preview-cancel"))}function Be(e,t){return t(e,te.get(e),t=>ee.get(e)?.get(t)?.computed,Z?.tokenBoundProperties(e),[e instanceof HTMLElement?q?.proposal(e):void 0,Z?.proposedDesignChanges(e)],Z?.designContext(e,d.design))}function Ke(e){q?.isEditing(e instanceof HTMLElement?e:null)&&Se(!0);let t=te.get(e),n=(e instanceof HTMLElement&&q?.hasChanges(e))??!1,i=Z?.hasReactPropChanges(e)??!1,o=Z?.hasDesignTokenEdit(e)??!1;if(t?.size||n||i||o){n&&e instanceof HTMLElement&&q?.reset(e);for(let n of t?.keys()??[])he(e,n,ee.get(e)?.get(n));te.delete(e),ee.delete(e),X.delete(e),i&&Z?.resetReactProps(e),o&&Z?.resetDesignTokenEdits(e);for(let t=de.length-1;t>=0;t--)de[t].element===e&&de.splice(t,1)}}z.addEventListener("click",e=>{q||$&&(A.textContent="Loading inline text editor…",import("./inline-text-editor-AMTG5O25.js").then(t=>{q||!$||!j||(q=t.bindInlineTextTools({button:z,status:A,selected:()=>$ instanceof HTMLElement?$:null,active:()=>j,onChange:Me,onCommit(e){de.push({kind:"text",element:e})}}),q.toggle(e))}).catch(()=>{A.textContent="Inline text editing is unavailable."}))}),w.addEventListener("click",()=>Le(!g.hasAttribute("data-folded"))),v.addEventListener("click",()=>Pe($?.parentElement??null)),_.addEventListener("click",()=>{q?.element&&Se(),_e(),De(!1),d.onExit()}),M.addEventListener("click",()=>{let e=de.pop();e?e.kind?"text"===e.kind?$===(q?.undo()??e.element)&&ve():(he(e.element,e.property,e.before),Z?.syncDesignTokenBinding(e.element,e.property),ce(e.element,e.property),$===e.element&&ve(),we($??U,$?"selected":"hover")):(e.undo(),ve()):($&&(Z?.undoDesignTokenEdit($),Z?.undoReactProp($),ve()),A.textContent="Runtime preview · Undo, Reset or reload to restore"),Me(),(M.disabled?_:M).focus({preventScroll:!0})}),S.addEventListener("click",()=>{$&&(Ke($),ve(),we($,"selected"),Me(),_.focus({preventScroll:!0}))}),R.addEventListener("click",()=>{let e=$,t=e?te.get(e):void 0;!e||!t?.size||se().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),A.textContent="CSS copied"}catch{A.textContent=i}})}),D.addEventListener("click",()=>{let e=$;e&&(q?.isEditing(e instanceof HTMLElement?e:null)&&Se(),se().then(({designProposal:t})=>{if(!j||$!==e||!e.isConnected)return;let n=Be(e,t);Ke(e),Me(),d.onComment(e,n)},()=>{A.textContent="Comment unavailable · try again"}))});let Oe=()=>me(!1);for(let e of[k,L,z])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,Oe,!0);document.addEventListener("pointermove",function(e){if(!j)return;if(e.composedPath().includes(d.host))return U=null,void Ee();let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);U=n&&!d.host.contains(n)?n:null,Ee(!$)},{capture:!0,signal:oe.signal}),document.addEventListener("pointerdown",function(e){if(!j||0!==e.button||e.composedPath().includes(d.host))return;let n=t(d.targetAt(e.clientX,e.clientY),e.metaKey||e.ctrlKey);!n||d.host.contains(n)||q?.element&&(n===q.element||q.element.contains(n))||(q?.element&&Se(),e.preventDefault(),e.stopImmediatePropagation(),Pe(n))},{capture:!0,signal:oe.signal}),document.addEventListener("click",function(e){!j||e.composedPath().includes(d.host)||(e.preventDefault(),e.stopImmediatePropagation(),$&&Te($),2===e.detail&&$?.contains(e.target)&&!z.disabled&&!q?.element&&z.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:oe.signal}),document.addEventListener("keydown",function(t){if(q?.handleKey(t))return void z.focus({preventScroll:!0});let n=t.key.toLowerCase(),i=t.composedPath()[0],o=i instanceof HTMLElement&&(i.isContentEditable||i.matches("input,textarea,select"));if(j&&$&&t.altKey&&!t.ctrlKey&&!t.metaKey&&!o&&("arrowup"===n||"arrowdown"===n)){let i=("arrowup"===n?$.parentElement:[...$.children].find(t=>e(t)&&!t.matches("script,style,defs,title,desc,metadata")))??null;return void(e(i)&&i!==document.body&&i!==document.documentElement&&!d.host.contains(i)&&(t.preventDefault(),t.stopImmediatePropagation(),Pe(i),Te(i)))}if(j&&!H.hidden&&!t.metaKey&&!t.ctrlKey&&!t.altKey&&("b"===n||"arrowleft"===n||"arrowright"===n)&&!o)return t.preventDefault(),t.stopImmediatePropagation(),void me("b"===n?!ue:"arrowleft"===n);if(j&&!q?.element&&("Enter"===t.key||" "===t.key)&&!t.composedPath().includes(d.host)){let n=document.activeElement;if(e(n)&&n!==document.body&&n!==document.documentElement)return t.preventDefault(),t.stopImmediatePropagation(),Pe(n),void Te(n)}t.composedPath().includes(d.host)&&Re(t)},{capture:!0,signal:oe.signal}),window.addEventListener("keydown",Re,{signal:oe.signal}),window.addEventListener("scroll",ke,{capture:!0,passive:!0,signal:oe.signal}),window.addEventListener("resize",ke,{passive:!0,signal:oe.signal});let Ie=new MutationObserver(()=>{j&&$&&!$.isConnected&&_e(),U&&!U.isConnected&&(U=null,Ee())});Ie.observe(document.body,{childList:!0,subtree:!0});let je=se().then(e=>{oe.signal.aborted||(K=e.selectionViews({exitKey:d.exitKey,review(){let e=[...X.keys()].reverse().find(e=>e.isConnected&&X.get(e)===V()&&xe(e));e&&Pe(e)},reset:ze,proposals:()=>[...X.keys()].filter(xe).map(t=>Be(t,e.designProposal)),message:e=>{A.textContent=e}}),l.textContent+=K.styles,M.innerHTML=K.icons.undo,S.innerHTML=K.icons.reset,g.insertBefore(K.hint,O),O.append(K.pending),j?ve():ye())},()=>{A.textContent="Selection tools unavailable · try again"});return{setActive:De,select:Pe,clearSelection:_e,setReturnAction(e){f=e,b.hidden=!e,e&&(b.setAttribute("aria-label",e.label),b.title=e.label)},mountPanel(e){g.parentElement!==e&&(g.parentElement?.removeAttribute("data-design-empty"),e.append(g),ye())},get active(){return j},ready:Promise.all([p,je]),destroy(){q?.finish(!0),De(!1),ze(),clearTimeout(F),clearTimeout(pe),clearTimeout(N),Ce?.disconnect(),Ie.disconnect(),oe.abort(),cancelAnimationFrame(Y),g.remove(),u.remove(),m.remove(),l.remove()}}}export{d as createDesignMode};

package/dist/{design-panel-KZCDP47N.js → design-panel-3SQFWOPU.js}

@@ -1 +1 @@
-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-IY5BJMFM.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(t=>t?.attach(e));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};
+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-QS4CXU6O.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/design-popup.d.ts

@@ -0,0 +1,12 @@
+export declare const popupStyles = ".komo-select,.komo-tokens{position:absolute;z-index:20;box-sizing:border-box;border-radius:10px;background:#232323;box-shadow:0 0 0 1px #ffffff14,0 12px 32px #0008;color:#d9d6d1;font-size:11px;font-weight:400;line-height:1.25;text-align:left;cursor:default;transform-origin:top;animation:komo-popup-in var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) backwards}.komo-select[data-up],.komo-tokens[data-up]{transform-origin:bottom}@keyframes komo-popup-in{from{opacity:0;transform:scale(.97)}}@media (prefers-reduced-motion:reduce){.komo-select,.komo-tokens{animation:none}}";
+/** A transient declaration without changing bindings, proposals or history. */
+export declare function previewStyle(element: Element, property: string, value: string): () => void;
+/** The nearest scrolling or clipping ancestor, bounded by the viewport. */
+export declare function popupBounds(from: Element): {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+/** Cancel before a Design transition and when a render replaces the trigger. */
+export declare function watchPopup(trigger: HTMLElement, close: () => void, signal: AbortSignal): void;

package/dist/{inline-text-editor-JSJVHPMM.js → inline-text-editor-AMTG5O25.js}

@@ -1 +1 @@
-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-PV3SKNTA.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(),A=document.createRange();return A.selectNodeContents(a),A.collapse(!1),y?.removeAllRanges(),y?.addRange(A),{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};
+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-IU7XYCCH.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};