@hazem3500/komo 0.9.3 → 0.9.5

package/dist/design-mode.js

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

package/dist/design-system.d.ts

@@ -59,7 +59,10 @@ export interface ThemeOption {
     id: string;
     label?: string;
 }
-/** One independent theme dimension reviewers can flip, such as light/dark. */
+/**
+ * One independent theme dimension reviewers can flip, such as light/dark. The
+ * Design panel shows a switcher for each axis with two or more options.
+ */
 export interface ThemeAxis {
     id: string;
     label?: string;
@@ -84,10 +87,16 @@ export interface ComponentIdentity {
 export interface ComponentAdapter {
     /**
      * The nearest component for `element`, or null. Apps may use any strategy,
-     * including reading their framework's internals; komo itself never does.
-     * Works alongside `useKomoInspectable`, which still provides editable props.
+     * including reading their framework's internals; komo's core never does.
+     * Works alongside `useKomoInspectable`, which still provides editable props
+     * and always takes precedence over what an adapter identifies.
      */
     identify(element: Element): ComponentIdentity | null;
+    /**
+     * Read-only panel content for an identity this adapter returned, or null.
+     * The Design panel shows it under the picked element's other controls.
+     */
+    panel?(identity: ComponentIdentity): HTMLElement | null;
 }
 export interface DesignSystem {
     tokens?: TokenAdapter;

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-SOY4SE7F.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
+import{b as o,c as s}from"./chunk-NWRSH6AL.js";import"./chunk-KMYXE4O6.js";import"./chunk-DH22G2S5.js";import"./chunk-7YUXYVQA.js";import"./chunk-62YUEO4G.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};

package/dist/{inline-text-editor-2J7DVJQY.js → inline-text-editor-JWVS7J75.js}

@@ -1 +1 @@
-import"./chunk-I7AUKTXE.js";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-YJOE56ZS.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};
+import"./chunk-I7AUKTXE.js";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-BW4ZQPD7.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};