@hazem3500/komo 0.9.30 → 0.9.32

package/dist/design-mode.js

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

package/dist/design-panel-ISV2MKNX.js

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

package/dist/design-panel.d.ts

@@ -1,7 +1,9 @@
 import type { DesignTarget } from "./design-target.js";
 import { designPanelStyles } from "./design-panel-styles.js";
+import { toHex } from "./design-preview.js";
 /** The property controls load as their own chunk, so the Design mode entry stays small. */
 export { designPanelStyles };
+export { toHex };
 export type Control = HTMLInputElement | HTMLSelectElement;
 export type Field = {
     property: string;
@@ -23,12 +25,12 @@ export interface PanelContext {
     begin(control: Control, property: string): void;
     apply(control: Control, property: string, value: string | null): void;
     commit(control: Control, property: string, final?: boolean): void;
+    cancel?(control: Control, property: string): void;
     rerender(): void;
 }
 export declare const fields: Field[];
-export declare function toHex(value: string): string;
 export declare function valueFor(field: Field, element: DesignTarget): string;
 /** Shared by every section, including the shared theme tokens. */
-export declare function fieldControl(field: Field, context: Pick<PanelContext, "element" | "begin" | "apply" | "commit">): HTMLDivElement;
+export declare function fieldControl(field: Field, context: Pick<PanelContext, "element" | "begin" | "apply" | "commit" | "cancel">): HTMLDivElement;
 /** Render only the sections that apply to the element; empty Fill and Border offer a quiet add. */
 export declare function renderPanel(container: HTMLElement, context: PanelContext): void;

package/dist/design-preview.d.ts

@@ -1,4 +1,37 @@
 import { type DesignTarget } from "./design-target.js";
+export type StyleOriginal = {
+    value: string;
+    priority: string;
+    computed?: string;
+    restore?(): void;
+    bindingUndo?(): void;
+};
+export type StyleEdit = {
+    kind: "style";
+    element: DesignTarget;
+    property: string;
+    before: StyleOriginal;
+    after: StyleOriginal;
+};
+export declare function createStyleEdits(history: Array<StyleEdit | {
+    element: DesignTarget;
+    kind?: string;
+}>): {
+    begin(control: Element, value: StyleOriginal): void;
+    override(control: Element, undo?: () => void): void;
+    commit(control: Element, element: DesignTarget, property: string, final: boolean): void;
+    cancel(control: Element, element: DesignTarget, property: string): void;
+};
+export declare function restoreStyle(element: DesignTarget, property: string, original?: StyleOriginal): void;
+export declare function toHex(value: string): string;
+export declare function validStyleValue(property: string, value: string): string | null;
+/** Restore one declaration, retaining unrelated edits and the original shorthand when possible. */
+export declare function inlineStyleSnapshot(element: DesignTarget, property: string): {
+    value: string;
+    priority: string;
+    computed: string;
+    restore(): void;
+};
 export declare function removeEmptyStyle(element: DesignTarget): void;
 /** A transient declaration without changing bindings, proposals or history. */
 export declare function previewStyle(element: Element, property: string, value: string): () => void;

package/dist/frame-portals.d.ts

@@ -5,6 +5,7 @@ export type FrameMapping = {
     zoom?: number;
     bounds?: Pick<DOMRect, "left" | "top" | "right" | "bottom" | "width" | "height">;
 };
+export declare function preserveFrameStyles(node: HTMLElement, names: string[]): () => void;
 /** 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;

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-YSTPKET2.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};
+import{b as o,c as s}from"./chunk-MU3NFN44.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};

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

@@ -0,0 +1 @@
+import{a as e,b as t,c as n,d as a,f as r}from"./chunk-LDZL6B65.js";import{e as i}from"./chunk-5BPQP3VG.js";import"./chunk-RPY7OOOR.js";function o(e,t,a){a?n(a,e):e.firstChild instanceof Text&&!e.childElementCount&&(e.firstChild.data=t)}function l(e){let t=r(),n=null,a=!1;function i(a=!1){let r=n;r&&(n=null,r.finish(a),t.resume(r.element),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let o=e.selected();if(n&&n.element===o)return void i();if(!o||!e.active()||a||n)return;let l=c(o);if(l)e.status.textContent=l;else{a=!0,t.pause(o),e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await f(o,{accent:getComputedStyle(e.button).getPropertyValue("--accent").trim()||"#bda6ef",loadReactBridge:async()=>await import("./react-props-panel-ME6XCEVP.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(o),e.status.textContent="Text preview · resets on exit")}});a?e.active()&&e.selected()===o?(n=a,r&&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 i=document.getSelection();i?.removeAllRanges(),i?.addRange(r)}(o,r.clientX,r.clientY),e.status.textContent=o.hasAttribute("data-komo-text-prop")?"React state preview · resets on exit":"Editing text · preview only"):a.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{a=!1,n||t.resume(o),e.onChange()}}},finish:i,handleKey(e){if(!n||!e.composedPath().includes(n.element)||!n.handleKey(e))return!1;let t=n.element;return i("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 s(e){let t=l(e);return e.button.addEventListener("click",e=>{t.toggle(e)}),t}function c(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 d(e){return!c(e)}function u(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 p(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 f(n,r){if(!d(n))return null;let l=null,s=null;if(n.dataset.komoTextProp&&(l=await r.loadReactBridge(),s=l.beginReactTextEdit(n),!s))return null;let c=s?.before??(n.textContent??"").slice(0,500),f=!s&&n.childElementCount>0,m=s?void 0:t(n),g=m?.map(([e,t])=>[e,t]),h=()=>{for(let e of g??[])e[1]=e[0].data},x=g?a(n,g):()=>{},b=["outline","outline-offset","box-shadow","white-space"].map(e=>i(n,e)),C=n.getAttribute("role"),v=n.getAttribute("aria-label"),y=n.getAttribute("aria-multiline"),T=n.getAttribute("spellcheck"),E=new AbortController,R=!1;let A=-1,w=new MutationObserver(()=>{A>=0&&p(n,A)}),P=()=>{h(),!f&&((n.textContent??"").length>500&&o(n,(n.textContent??"").slice(0,500)),s&&l&&(A=u(n),l.previewReactTextEdit(n,s.propName,n.textContent??"")||o(n,c)))},k=(t,a)=>{let r=t.startContainer;if(r!==t.endContainer||!(r instanceof Text)||!n.contains(r)||r.parentElement?.closest(e))return;let i=t.endOffset-t.startOffset,o=a.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(n.textContent??"").length+i));r.replaceData(t.startOffset,i,o),h();let l=document.createRange();l.setStart(r,t.startOffset+o.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};n.addEventListener("beforeinput",e=>{if(A=-1,s||"insertCompositionText"===e.inputType)return;e.preventDefault();let t=e.getTargetRanges()[0],n=e.inputType;t&&(n.startsWith("delete")||"insertText"===n||"insertReplacementText"===n)&&k(t,n.startsWith("delete")?"":e.data??e.dataTransfer?.getData("text/plain")??"")},{signal:E.signal}),n.addEventListener("input",P,{signal:E.signal}),s&&w.observe(n,{childList:!0,characterData:!0,subtree:!0}),n.addEventListener("paste",e=>{e.preventDefault();let t=e.clipboardData?.getData("text/plain")??"",a=document.getSelection();f?a?.rangeCount&&k(a.getRangeAt(0),t):(function(e,t){let n=u(e);if(n<0)return;let a=e.textContent??"",r=t.slice(0,Math.max(0,500-a.length));o(e,a.slice(0,n)+r+a.slice(n)),p(e,n+r.length)}(n,t.replace(/[\r\n]+/g," ").slice(0,500)),P())},{signal:E.signal}),n.addEventListener("drop",e=>e.preventDefault(),{signal:E.signal}),n.setAttribute("contenteditable","true"),n.setAttribute("role","textbox"),n.setAttribute("aria-label","Inline text preview"),n.setAttribute("aria-multiline","false"),n.dataset.komoInlineEditing="true",n.spellcheck=!1,n.style.setProperty("outline",`2px solid ${r.accent??"#bda6ef"}`,"important"),n.style.setProperty("outline-offset","2px","important"),n.style.setProperty("box-shadow","none","important"),n.style.setProperty("white-space","pre-wrap","important"),n.focus({preventScroll:!0});let D=document.getSelection(),S=document.createRange(),O=t(n).reverse().find(([t])=>!t.parentElement?.closest(e))?.[0];return O?S.setStart(O,O.length):S.selectNodeContents(n),S.collapse(!0),D?.removeAllRanges(),D?.addRange(S),{element:n,finish(e=!1){if(R)return;R=!0,E.abort(),w.disconnect(),x();for(let e of b.reverse())e.restore();let t=(n.textContent??"").slice(0,500);(function(){n.removeAttribute("contenteditable"),n.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",C],["aria-label",v],["aria-multiline",y],["spellcheck",T]])null===t?n.removeAttribute(e):n.setAttribute(e,t)})(),e?(s&&l&&l.cancelReactTextEdit(n,s.propName,c),o(n,c,m)):s&&l&&l.finishReactTextEdit(n,s.propName,c,t),r.onFinish({element:n,before:c,after:t,nodes:m,...s?{reactProp:s.propName}:{}},e)},handleKey:e=>!e.isComposing&&(("Enter"===e.key||"Escape"===e.key)&&(e.preventDefault(),e.stopImmediatePropagation(),!0))}}export{s as bindInlineTextTools,d as canEditText,l as createInlineTextTools,r as createTextPreviewHistory,f as startInlineTextEditor,c as textEditBlocker};

package/dist/inline-text-editor.d.ts

@@ -1,3 +1,6 @@
+import { type TextSnapshot } from "./text-preview.js";
+export { createTextPreviewHistory } from "./text-preview.js";
+export type { TextSnapshot, TextPreviewHistory } from "./text-preview.js";
 export interface ReactTextBridge {
     beginReactTextEdit(element: HTMLElement): {
         propName: string;
@@ -15,13 +18,13 @@ export interface InlineTextEditResult {
     /** Text node values before the edit, for elements with nested markup. */
     nodes?: TextSnapshot;
 }
-export type TextSnapshot = Array<[Text, string]>;
 export interface InlineTextEditor {
     readonly element: HTMLElement;
     finish(cancel?: boolean): void;
     handleKey(event: KeyboardEvent): boolean;
 }
 export interface InlineTextEditorOptions {
+    accent?: string;
     loadReactBridge(): Promise<ReactTextBridge>;
     onFinish(result: InlineTextEditResult, cancel: boolean): void;
 }
@@ -51,20 +54,8 @@ export interface InlineTextTools {
     proposal(element: HTMLElement): string | undefined;
     restoreAll(): void;
     /** Show the page's original text, or put the edits back. */
-    showBefore(on: boolean): void;
+    showBefore(on: boolean, retain?: boolean): void;
 }
-export interface TextPreviewHistory {
-    record(result: InlineTextEditResult): void;
-    remember(element: HTMLElement, before: string): void;
-    original(element: HTMLElement): string | undefined;
-    reconcile(element: HTMLElement, text: string): void;
-    reset(element: HTMLElement): void;
-    proposal(element: HTMLElement): string | undefined;
-    restoreAll(): void;
-    showBefore(on: boolean): void;
-    undo(): HTMLElement | null;
-}
-export declare function createTextPreviewHistory(): TextPreviewHistory;
 export declare function createInlineTextTools(options: InlineTextToolsOptions): InlineTextTools;
 export declare function bindInlineTextTools(options: InlineTextToolsOptions): InlineTextTools;
 /** Why an element's text can't be edited inline, or null when it can. */