@hazem3500/komo 0.9.0 → 0.9.1

package/dist/design-mode.d.ts

@@ -8,6 +8,8 @@ export interface DesignModeOptions {
     onExit(): void;
     /** Label of the shortcut that toggles Design mode, shown in the empty state. */
     exitKey?: string;
+    /** Move the floating panel to the other side when it covers the target. */
+    flip?(): void;
 }
 export declare function createDesignMode(options: DesignModeOptions): {
     setActive: (value: boolean) => void;

package/dist/design-mode.js

@@ -1 +1 @@
-import{i as e}from"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";var t=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 n(n){let i=document.createElement("style");i.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}.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:2px;height:44px;padding:0 6px 0 12px;border-bottom:1px solid #ffffff12}.design-inspector__identity{min-width:0;flex:1;display:flex;align-items:baseline;gap:4px;white-space:nowrap}.design-inspector__parent{flex:none;max-width:30%;overflow:hidden;text-overflow:ellipsis;margin-left:-4px;padding:2px 4px;border-radius:4px;color:#77736f;font-size:12px}.design-inspector__parent:after{content:"/";margin-left:4px;color:#4a4845}.design-inspector__parent:hover{color:#e9e6e1;background:#ffffff0d}.design-inspector__target{flex:none;margin-right:2px;max-width:60%;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:12px}.design-inspector__heading small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#77736f;font-size:11px}.design-inspector__close,.design-inspector__fold{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;color:#898680}.design-inspector__close svg,.design-inspector__fold svg{width:14px;height:14px}.design-inspector__close:hover,.design-inspector__fold:hover{background:#ffffff12;color:#fff}.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[data-folded] .design-inspector__heading{border:0}.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__heading{border:0}.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:44px;padding:0 8px 0 12px;border-top:1px solid #ffffff12;color:#898680;font-size:11px}.design-inspector__count{white-space:nowrap;font-variant-numeric:tabular-nums}.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{display:grid;place-items:center;min-width:28px;height:28px;border-radius:6px;color:#aaa6a0}.design-inspector__actions button:hover:not(:disabled){background:#ffffff12;color:#fff}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions svg{width:14px;height:14px}.design-inspector__actions button:last-child{padding:0 10px;color:#e9e6e1;font-size:11px;font-weight:550}.design-inspector__bar[data-changes] .design-inspector__actions button:last-child{margin-left:4px;background:#bda6ef;color:#211b2d}.design-inspector__bar[data-changes] .design-inspector__actions button:last-child:hover{background:#c8b5f4}.design-inspector :focus-visible{outline:2px solid #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-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 o=null,s=import("./design-panel-BPVXFERR.js").then(e=>{i.textContent+=e.designPanelStyles,o=e},()=>{b.textContent="Design controls unavailable · try again"}),a=document.createElement("aside");a.className="design-inspector",a.setAttribute("role","dialog"),a.setAttribute("aria-label","Design mode inspector"),a.setAttribute("aria-hidden","true"),a.hidden=!0;let r=document.createElement("div");r.className="design-outline",r.setAttribute("aria-hidden","true");let d=document.createElement("div");d.className="design-inspector__heading";let l=document.createElement("button");l.type="button",l.className="design-inspector__parent",l.hidden=!0;let c=document.createElement("span");c.className="design-inspector__target";let p=document.createElement("small"),g=document.createElement("button");g.type="button",g.className="design-inspector__close",g.setAttribute("aria-label","Exit design mode"),g.append(e("close"));let m=document.createElement("button");m.type="button",m.className="design-inspector__fold",m.append(e("chevron"));let u=document.createElement("div");u.className="design-inspector__identity",u.append(l,c,p),d.append(u,m,g);let f=document.createElement("div");f.className="design-inspector__controls";let h=document.createElement("div");h.className="design-inspector__bar";let x=document.createElement("span");x.className="design-inspector__count",x.title="Preview only · resets on refresh";let b=document.createElement("p");b.className="design-inspector__status",b.setAttribute("role","status");let y=document.createElement("div");y.className="design-inspector__actions";let _=(e,t)=>{let n=document.createElement("button");return n.type="button",n.className="design-inspector__tool",n.title=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},v=_("Undo",t("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),w=_("Reset",t("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),E=_("Copy CSS","");E.append(e("copy"));let k=document.createElement("button");k.type="button",k.textContent="Comment";let C=document.createElement("button");C.type="button",C.className="design-text-edit",C.title="Edit text",C.textContent="Edit text",C.setAttribute("aria-label","Edit selected text inline"),y.append(v,w,E,k),h.append(x,b,y),a.append(d,f,h),n.root.append(i,r),(n.panelRoot??n.root).append(a);let P=!1,A=0,T=null,L=null,M=null,D=0,S=null,z=null,R=new Map,N=new Map,B=new WeakMap,F=new WeakMap,$=new AbortController,I=new Set,j=[];function H(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=R.get(e);o||R.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function U(e,t){let n=N.get(e);n||N.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(R.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||N.delete(e),Q(T,"selected")}let V=0;function X(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function K(e,t,n){T&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(H(T,t),S?.noteDesignTokenOverride(T,t,n),T.style.setProperty(t,n,R.get(T)?.get(t)?.priority),U(T,t),te()))}function O(e,t,n=!0){if(!T)return;let i={value:T.style.getPropertyValue(t),priority:T.style.getPropertyPriority(t)},o=F.get(e),s=o?.before??B.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&j.splice(j.indexOf(o),1),F.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:T,property:t,before:s,after:i};j.push(n),F.set(e,n)}n&&(B.set(e,i),F.delete(e)),te()}function Y(){if(f.replaceChildren(),q(),!T){let t=document.createElement("div");t.className="design-inspector__empty";let i=document.createElement("strong");i.textContent="Select an element";let o=document.createElement("ul"),s=(...e)=>{let t=document.createElement("li");e.forEach((e,n)=>{n%2==0?t.append(e):t.append(Object.assign(document.createElement("kbd"),{textContent:e}))}),o.append(t)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),n.exitKey?s("","Esc"," or ",n.exitKey," to exit"):s("","Esc"," to exit"),t.append(e("design"),i,o),f.append(t),c.textContent="Select an element",p.textContent="",void(l.hidden=!0)}let t=`${T.tagName.toLowerCase()}${T.id?`#${T.id}`:""}`;c.textContent=t,p.textContent=T instanceof HTMLIFrameElement?"Frame only · contents are isolated":T.classList.length?`.${[...T.classList].slice(0,2).join(".")}`:"";let i=T.parentElement;l.hidden=!i||i===document.body||i===document.documentElement,l.textContent=i?.tagName.toLowerCase()??"",l.setAttribute("aria-label",`Select parent ${l.textContent}`);let a=T,r=o;r?(r.renderPanel(f,{element:a,changed:N.get(a),collapsed:I,editText:C,begin:(e,t)=>B.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:K,commit:O,rerender:Y}),a.closest("[data-komo-inspectable], [data-komo-design-tokens]")&&(z??=import("./react-props-panel-XSMDR2CY.js").then(e=>S=e).catch(e=>{throw z=null,e}),z.then(e=>{if(!P||T!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{b.textContent="React state preview · resets on refresh",te()},t);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{H(a,e.property,n),U(a,e.property),B.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),O(t,e.property)},t,r.valueFor,r.toHex);let o=e.createDesignThemePanel(a,r,te,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{P&&T===a&&Y()})}function q(){a.toggleAttribute("data-empty",k.hidden=!T),a.parentElement?.toggleAttribute("data-design-empty",P&&!T)}function Q(e,t){if(!P||!e?.isConnected)return void(r.hidden=!0);let n=e.getBoundingClientRect();n.width&&n.height?(r.hidden=!1,r.dataset.kind=t,Object.assign(r.style,{left:`${n.left}px`,top:`${n.top}px`,width:`${n.width}px`,height:`${n.height}px`})):r.hidden=!0}function W(){D||(D=requestAnimationFrame(()=>{D=0,Q(T??L,T?"selected":"hover")}))}function Z(e){!(e instanceof HTMLElement)||n.host.contains(e)||(M?.element&&M.element!==e&&ne(),T=e,L=e,Y(),Q(e,"selected"),te())}function G(){return"function"==typeof matchMedia&&matchMedia("(max-width:520px)").matches}function J(e){a.toggleAttribute("data-folded",e&&G()),m.setAttribute("aria-expanded",String(!a.hasAttribute("data-folded"))),m.setAttribute("aria-label",a.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ee(e){J(!1),G()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=a.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})})}function te(){(function(){let e=T,t=e?(N.get(e)?.size??0)+ +!!M?.hasChanges(e)+ +!!S?.hasReactPropChanges(e)||+!!S?.hasDesignTokenEdit(e):0;x.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||j.length>0||!(!e||!S?.canUndoReactProp(e)&&!S?.canUndoDesignTokenEdit(e)))})(),v.disabled=!(0!==j.length||T&&S?.canUndoReactProp(T)||T&&S?.canUndoDesignTokenEdit(T)),w.disabled=!T||!N.get(T)?.size&&!M?.hasChanges(T)&&!S?.hasReactPropChanges(T)&&!S?.hasDesignTokenEdit(T),E.disabled=!T||!N.get(T)?.size,k.disabled=!T,C.disabled=!!M?.busy||!T?.isConnected,C.textContent=M?.isEditing(T)?"Done editing":"Edit text",C.setAttribute("aria-label",M?.isEditing(T)?"Finish inline text editing":"Edit selected text inline")}function ne(e=!1){M?.finish(e),te()}function ie(e){!e&&M?.element&&ne(),window.clearTimeout(A),A=0,P=e,q(),e?(a.hidden=!1,a.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{P&&(a.dataset.state="active")}),r.hidden=!T,Y(),J(!T),Q(T,"selected"),g.focus({preventScroll:!0})):(r.hidden=!0,a.setAttribute("aria-hidden","true"),a.dataset.state="closing","function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?(a.hidden=!0,delete a.dataset.state):A=window.setTimeout(()=>{A=0,P||(a.hidden=!0,delete a.dataset.state)},250))}new MutationObserver(()=>{let e=b.textContent??"";b.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(V),e&&(V=window.setTimeout(function e(){M?.element?V=window.setTimeout(e,2600):b.textContent=""},2600))}).observe(b,{childList:!0,characterData:!0,subtree:!0}),C.addEventListener("click",e=>{M||T&&(b.textContent="Loading inline text editor…",import("./inline-text-editor-F7B6FQQ3.js").then(t=>{M||!T||!P||(M=t.bindInlineTextTools({button:C,status:b,selected:()=>T,active:()=>P,onChange:te,onCommit(e){j.push({kind:"text",element:e})}}),M.toggle(e))}).catch(()=>{b.textContent="Inline text editing is unavailable."}))}),m.addEventListener("click",()=>J(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>Z(T?.parentElement??null)),g.addEventListener("click",()=>{M?.element&&ne(),ie(!1),n.onExit()}),v.addEventListener("click",()=>{let e=j.pop();e?"text"===e.kind?T===(M?.undo()??e.element)&&Y():(X(e.element,e.property,e.before),S?.syncDesignTokenBinding(e.element,e.property),U(e.element,e.property),T===e.element&&Y(),Q(T??L,T?"selected":"hover")):(T&&(S?.undoDesignTokenEdit(T),S?.undoReactProp(T),Y()),b.textContent="React state preview · resets on refresh"),te(),(v.disabled?g:v).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!T)return;M?.isEditing(T)&&ne(!0);let e=N.get(T),t=M?.hasChanges(T)??!1,n=S?.hasReactPropChanges(T)??!1,i=S?.hasDesignTokenEdit(T)??!1;if(e?.size||t||n||i){t&&M?.reset(T);for(let t of e?.keys()??[])X(T,t,R.get(T)?.get(t));N.delete(T),n&&S?.resetReactProps(T),i&&S?.resetDesignTokenEdits(T);for(let e=j.length-1;e>=0;e--)j[e].element===T&&j.splice(e,1);Y(),Q(T,"selected"),te(),g.focus({preventScroll:!0})}});let oe=()=>import("./design-export-BRBI7S3V.js");return E.addEventListener("click",()=>{let e=T,t=e?N.get(e):void 0;!e||!t?.size||oe().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),b.textContent="CSS copied"}catch{b.textContent=i}})}),k.addEventListener("click",()=>{let e=T;e&&(M?.isEditing(e)&&ne(),oe().then(({designProposal:t})=>n.onComment(e,t(e,N.get(e),t=>R.get(e)?.get(t)?.computed,S?.tokenBoundProperties(e),[M?.proposal(e),S?.proposedDesignChanges(e)])),()=>{b.textContent="Comment unavailable · try again"}))}),document.addEventListener("pointermove",function(e){if(!P||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||(L=t,T||Q(L,"hover"))},{capture:!0,signal:$.signal}),document.addEventListener("pointerdown",function(e){if(!P||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||M?.element&&(t===M.element||M.element.contains(t))||(M?.element&&ne(),e.preventDefault(),e.stopImmediatePropagation(),Z(t))},{capture:!0,signal:$.signal}),document.addEventListener("click",function(e){!P||e.composedPath().includes(n.host)||(e.preventDefault(),e.stopImmediatePropagation(),T&&ee(T),2===e.detail&&T?.contains(e.target)&&!C.disabled&&!M?.element&&C.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:$.signal}),document.addEventListener("keydown",function(e){if(M?.handleKey(e))C.focus({preventScroll:!0});else{if(P&&!M?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(n.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),Z(t),void ee(t)}P&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),ie(!1),n.onExit())}},{capture:!0,signal:$.signal}),window.addEventListener("scroll",W,{capture:!0,passive:!0,signal:$.signal}),window.addEventListener("resize",W,{passive:!0,signal:$.signal}),{setActive:ie,mountPanel(e){a.parentElement!==e&&(a.parentElement?.removeAttribute("data-design-empty"),e.append(a),q())},get active(){return P},ready:s,destroy(){M?.element&&ne(!0),window.clearTimeout(A),window.clearTimeout(V),$.abort(),cancelAnimationFrame(D);for(let[e,t]of R)for(let[n,i]of t)X(e,n,i);M?.restoreAll(),a.remove(),r.remove(),i.remove()}}}export{n as createDesignMode};
+import{i as e}from"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";var t=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 n(n){let i=document.createElement("style");i.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__parent:hover{color:#eee;background:#161616}.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{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:7px;color:#909090}.design-inspector__close svg,.design-inspector__fold svg{width:16px;height:16px}.design-inspector__close:hover,.design-inspector__fold:hover{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[data-folded] .design-inspector__heading{border:0}.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__heading{border:0}.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{display:grid;place-items:center;min-width:28px;height:28px;border-radius:7px;color:#909090}.design-inspector__actions button:hover:not(:disabled){background:#161616;color:#eee}.design-inspector__actions button:disabled{cursor:default;opacity:.35}.design-inspector__actions svg{width:16px;height:16px}.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-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 o=null,s=import("./design-panel-BPVXFERR.js").then(e=>{i.textContent+=e.designPanelStyles,o=e},()=>{x.textContent="Design controls unavailable · try again"}),a=document.createElement("aside");a.className="design-inspector",a.setAttribute("role","dialog"),a.setAttribute("aria-label","Design mode inspector"),a.setAttribute("aria-hidden","true"),a.hidden=!0;let r=document.createElement("div");r.className="design-outline",r.setAttribute("aria-hidden","true");let d=document.createElement("div");d.className="design-inspector__heading";let l=document.createElement("button");l.type="button",l.className="design-inspector__parent",l.hidden=!0;let c=document.createElement("span");c.className="design-inspector__target";let p=document.createElement("small"),g=document.createElement("button");g.type="button",g.className="design-inspector__close",g.setAttribute("aria-label","Exit design mode"),g.append(e("close"));let u=document.createElement("button");u.type="button",u.className="design-inspector__fold",u.append(e("chevron"));let m=document.createElement("div");m.className="design-inspector__identity",m.append(l,c,p),d.append(m,u,g);let f=document.createElement("div");f.className="design-inspector__controls";let h=document.createElement("div");h.className="design-inspector__bar";let b=document.createElement("span");b.className="design-inspector__count",b.title="Preview only · resets on refresh";let x=document.createElement("p");x.className="design-inspector__status",x.setAttribute("role","status");let y=document.createElement("div");y.className="design-inspector__actions";let v=(e,t)=>{let n=document.createElement("button");return n.type="button",n.className="design-inspector__tool",n.dataset.tip=e,n.setAttribute("aria-label",e),n.innerHTML=t,n},_=v("Undo",t("M5.5 3.5 2.5 6.5l3 3m-3-3h7a4 4 0 0 1 0 8h-2")),w=v("Reset",t("M2.5 2.5v3h3M3 5.5a5.5 5.5 0 1 1-.5 2.5")),E=v("Copy CSS","");E.append(e("copy"));let k=document.createElement("button");k.type="button",k.textContent="Comment";let C=document.createElement("button");C.type="button",C.className="design-text-edit",C.title="Edit text",C.textContent="Edit text",C.setAttribute("aria-label","Edit selected text inline"),y.append(_,w,E,k);let P=document.createElement("div");P.className="design-inspector__compare",P.setAttribute("role","group"),P.setAttribute("aria-label","Compare with the page");let A=["Before","After"].map((e,t)=>{let n=document.createElement("button");return n.type="button",n.textContent=e,n.dataset.tip=`${e} · ${t?"→":"←"} or B`,n.setAttribute("aria-pressed",String(!!t)),n.addEventListener("click",()=>ee(!t)),P.append(n),n});h.append(b,P,x,y);let T=document.createElement("div");T.className="morphing-menu__tooltip sidebar-tooltip",T.setAttribute("aria-hidden","true");let L=0,M=()=>{window.clearTimeout(L),delete T.dataset.open},z=e=>{let t=e.target.closest?.("[data-tip]");if(!t||"focusin"===e.type&&!t.matches(":focus-visible"))return M();window.clearTimeout(L),L=window.setTimeout(()=>{if(!t.isConnected)return;let e=t.getBoundingClientRect();T.textContent=t.dataset.tip??"";let n=T.offsetWidth/2;T.style.left=`${Math.max(8+n,Math.min(document.documentElement.clientWidth-8-n,e.left+e.width/2))}px`,T.style.top=e.top-8-T.offsetHeight+"px",T.dataset.open="true"},T.dataset.open?0:400)};h.addEventListener("pointerover",z),h.addEventListener("focusin",z);for(let e of["pointerleave","pointerdown","focusout"])h.addEventListener(e,M);a.append(d,f,h),n.root.append(i,r,T),(n.panelRoot??n.root).append(a);let S=!1,D=0,R=null,N=null,B=null,$=0,I=0,j=null,F="",H=null,V=null,K=new Map,O=new Map,U=new WeakMap,W=new WeakMap,X=new AbortController,q=new Set,Y=[];function Q(e,t,n=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t)){let o=K.get(e);o||K.set(e,o=new Map),o.has(t)||o.set(t,{value:n,priority:i,computed:getComputedStyle(e).getPropertyValue(t).trim()})}function Z(e,t){let n=O.get(e);n||O.set(e,n=new Map);let i=e.style.getPropertyValue(t);i===(K.get(e)?.get(t)?.value??"")?n.delete(t):n.set(t,i),n.size||O.delete(e),ae(R,"selected")}let G=0;new MutationObserver(()=>{let e=x.textContent??"";x.title=e,h.toggleAttribute("data-message",!!e),window.clearTimeout(G),e&&(G=window.setTimeout(function e(){B?.element?G=window.setTimeout(e,2600):x.textContent=""},2600))}).observe(x,{childList:!0,characterData:!0,subtree:!0});let J=!1;function ee(e){if(e===J)return;e&&B?.element&&me(),J=e;let t=!("function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches);for(let[n,i]of O){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=K.get(n)?.get(t);e?te(n,t,i):n.style.setProperty(t,o,i?.priority)}t&&window.setTimeout(()=>n.style.transition=o,320)}B?.showBefore(e),H?.showDesignBefore(e),A.forEach((t,n)=>t.setAttribute("aria-pressed",String(!n===e))),a.toggleAttribute("data-before",e),ue()}function te(e,t,n){n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}function ne(e,t,n){R&&(e.setAttribute("aria-invalid",String(null===n)),null!==n&&(Q(R,t),H?.noteDesignTokenOverride(R,t,n),R.style.setProperty(t,n,K.get(R)?.get(t)?.priority),Z(R,t),ue()))}function ie(e,t,n=!0){if(!R)return;let i={value:R.style.getPropertyValue(t),priority:R.style.getPropertyPriority(t)},o=W.get(e),s=o?.before??U.get(e)??{value:"",priority:""};if(i.value===s.value&&i.priority===s.priority)o&&Y.splice(Y.indexOf(o),1),W.delete(e);else if(o)o.after=i;else{let n={kind:"style",element:R,property:t,before:s,after:i};Y.push(n),W.set(e,n)}n&&(U.set(e,i),W.delete(e)),ue()}function oe(){if(f.replaceChildren(),se(),!R){let t=document.createElement("div");t.className="design-inspector__empty";let i=document.createElement("strong");i.textContent="Select an element";let o=document.createElement("ul"),s=(...e)=>{let t=document.createElement("li");e.forEach((e,n)=>{n%2==0?t.append(e):t.append(Object.assign(document.createElement("kbd"),{textContent:e}))}),o.append(t)};return s("","Click"," to inspect"),s("","Double-click"," text to edit"),n.exitKey?s("","Esc"," or ",n.exitKey," to exit"):s("","Esc"," to exit"),t.append(e("design"),i,o),f.append(t),c.textContent="Select an element",p.textContent="",void(l.hidden=!0)}let t=`${R.tagName.toLowerCase()}${R.id?`#${R.id}`:""}`;c.textContent=t,p.textContent=R instanceof HTMLIFrameElement?"Frame only · contents are isolated":R.classList.length?`.${[...R.classList].slice(0,2).join(".")}`:"";let i=R.parentElement;l.hidden=!i||i===document.body||i===document.documentElement,l.textContent=i?.tagName.toLowerCase()??"",l.setAttribute("aria-label",`Select parent ${l.textContent}`);let a=R,r=o;r?(r.renderPanel(f,{element:a,changed:O.get(a),collapsed:q,editText:C,begin:(e,t)=>U.set(e,{value:a.style.getPropertyValue(t),priority:a.style.getPropertyPriority(t)}),apply:ne,commit:ie,rerender:oe}),a.closest("[data-komo-inspectable], [data-komo-design-tokens]")&&(V??=import("./react-props-panel-XQ4T3RLV.js").then(e=>H=e).catch(e=>{throw V=null,e}),V.then(e=>{if(!S||R!==a||f.querySelector(".design-react-group, .design-theme-group"))return;let t=n.root,i=e.createReactPropsPanel(a,()=>{x.textContent="React state preview · resets on refresh",ue()},t,le);i&&f.append(i),e.attachStyleTokenControls(a,r.fields,f,(e,t,n)=>{Q(a,e.property,n),Z(a,e.property),U.set(t,{value:n,priority:a.style.getPropertyPriority(e.property)}),ie(t,e.property)},t,r.valueFor,r.toHex);let o=e.createDesignThemePanel(a,r,ue,t);o&&f.append(o)}).catch(()=>{}))):s.then(()=>{S&&R===a&&oe()})}function se(){a.toggleAttribute("data-empty",k.hidden=!R),a.parentElement?.toggleAttribute("data-design-empty",S&&!R)}function ae(e,t,i=!1){if(!S||!e?.isConnected)return void(r.hidden=!0);let o=e.getBoundingClientRect();if(o.width&&o.height){if(r.hidden=!1,r.dataset.kind=t,i&&(e!==j||t!==F)){j=e,F=t,window.clearTimeout(I);let i=a.getBoundingClientRect(),s=e=>o.left<e+i.width&&o.right>e&&o.top<i.bottom&&o.bottom>i.top;n.flip&&i.width&&s(i.left)&&!s(document.documentElement.clientWidth-i.right)&&(I=window.setTimeout(n.flip,"hover"===t?350:0))}Object.assign(r.style,{left:`${o.left}px`,top:`${o.top}px`,width:`${o.width}px`,height:`${o.height}px`})}else r.hidden=!0}function re(){$||($=requestAnimationFrame(()=>{$=0,ae(R??N,R?"selected":"hover")}))}let de="function"==typeof ResizeObserver?new ResizeObserver(re):null;function le(e){!(e instanceof HTMLElement)||n.host.contains(e)||(B?.element&&B.element!==e&&me(),de?.disconnect(),de?.observe(e),R=e,N=e,oe(),ae(e,"selected",!0),ue())}function ce(){return"function"==typeof matchMedia&&matchMedia("(max-width:520px)").matches}function pe(e){a.toggleAttribute("data-folded",e&&ce()),u.setAttribute("aria-expanded",String(!a.hasAttribute("data-folded"))),u.setAttribute("aria-label",a.hasAttribute("data-folded")?"Expand inspector":"Collapse inspector")}function ge(e){pe(!1),ce()&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=a.getBoundingClientRect().top-12;t.top>=12&&t.bottom<=n||window.scrollBy({top:t.top-Math.max(12,(n-t.height)/2),behavior:matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"})})}function ue(){re(),function(){let e=R,t=e?(O.get(e)?.size??0)+ +!!B?.hasChanges(e)+ +!!H?.hasReactPropChanges(e)||+!!H?.hasDesignTokenEdit(e):0;b.textContent=t?`${t} change${t>1?"s":""}`:"",h.toggleAttribute("data-changes",t>0||Y.length>0||!(!e||!H?.canUndoReactProp(e)&&!H?.canUndoDesignTokenEdit(e))),P.hidden=!t&&!J}(),_.disabled=!(0!==Y.length||R&&H?.canUndoReactProp(R)||R&&H?.canUndoDesignTokenEdit(R)),w.disabled=!R||!O.get(R)?.size&&!B?.hasChanges(R)&&!H?.hasReactPropChanges(R)&&!H?.hasDesignTokenEdit(R),E.disabled=!R||!O.get(R)?.size,k.disabled=!R,C.disabled=!!B?.busy||!R?.isConnected,C.textContent=B?.isEditing(R)?"Done editing":"Edit text",C.setAttribute("aria-label",B?.isEditing(R)?"Finish inline text editing":"Edit selected text inline")}function me(e=!1){B?.finish(e),ue()}function fe(e){e||ee(!1),!e&&B?.element&&me(),window.clearTimeout(D),D=0,S=e,se(),e?(a.hidden=!1,a.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{S&&(a.dataset.state="active")}),r.hidden=!R,oe(),pe(!R),ae(R,"selected"),g.focus({preventScroll:!0})):(r.hidden=!0,a.setAttribute("aria-hidden","true"),a.dataset.state="closing","function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?(a.hidden=!0,delete a.dataset.state):D=window.setTimeout(()=>{D=0,S||(a.hidden=!0,delete a.dataset.state)},250))}C.addEventListener("click",e=>{B||R&&(x.textContent="Loading inline text editor…",import("./inline-text-editor-SWPVB35B.js").then(t=>{B||!R||!S||(B=t.bindInlineTextTools({button:C,status:x,selected:()=>R,active:()=>S,onChange:ue,onCommit(e){Y.push({kind:"text",element:e})}}),B.toggle(e))}).catch(()=>{x.textContent="Inline text editing is unavailable."}))}),u.addEventListener("click",()=>pe(!a.hasAttribute("data-folded"))),l.addEventListener("click",()=>le(R?.parentElement??null)),g.addEventListener("click",()=>{B?.element&&me(),fe(!1),n.onExit()}),_.addEventListener("click",()=>{let e=Y.pop();e?"text"===e.kind?R===(B?.undo()??e.element)&&oe():(te(e.element,e.property,e.before),H?.syncDesignTokenBinding(e.element,e.property),Z(e.element,e.property),R===e.element&&oe(),ae(R??N,R?"selected":"hover")):(R&&(H?.undoDesignTokenEdit(R),H?.undoReactProp(R),oe()),x.textContent="React state preview · resets on refresh"),ue(),(_.disabled?g:_).focus({preventScroll:!0})}),w.addEventListener("click",()=>{if(!R)return;B?.isEditing(R)&&me(!0);let e=O.get(R),t=B?.hasChanges(R)??!1,n=H?.hasReactPropChanges(R)??!1,i=H?.hasDesignTokenEdit(R)??!1;if(e?.size||t||n||i){t&&B?.reset(R);for(let t of e?.keys()??[])te(R,t,K.get(R)?.get(t));O.delete(R),n&&H?.resetReactProps(R),i&&H?.resetDesignTokenEdits(R);for(let e=Y.length-1;e>=0;e--)Y[e].element===R&&Y.splice(e,1);oe(),ae(R,"selected"),ue(),g.focus({preventScroll:!0})}});let he=()=>import("./design-export-BRBI7S3V.js");E.addEventListener("click",()=>{let e=R,t=e?O.get(e):void 0;!e||!t?.size||he().then(async({cssText:n})=>{let i=n(e,t);try{await navigator.clipboard.writeText(i),x.textContent="CSS copied"}catch{x.textContent=i}})}),k.addEventListener("click",()=>{let e=R;e&&(B?.isEditing(e)&&me(),he().then(({designProposal:t})=>n.onComment(e,t(e,O.get(e),t=>K.get(e)?.get(t)?.computed,H?.tokenBoundProperties(e),[B?.proposal(e),H?.proposedDesignChanges(e)])),()=>{x.textContent="Comment unavailable · try again"}))});let be=()=>ee(!1);for(let e of[f,y,C])for(let t of["pointerdown","focusin","click"])e.addEventListener(t,be,!0);return document.addEventListener("pointermove",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||(N=t,R||ae(N,"hover",!0))},{capture:!0,signal:X.signal}),document.addEventListener("pointerdown",function(e){if(!S||e.composedPath().includes(n.host))return;let t=n.targetAt(e.clientX,e.clientY);!(t instanceof HTMLElement)||n.host.contains(t)||B?.element&&(t===B.element||B.element.contains(t))||(B?.element&&me(),e.preventDefault(),e.stopImmediatePropagation(),le(t))},{capture:!0,signal:X.signal}),document.addEventListener("click",function(e){!S||e.composedPath().includes(n.host)||(e.preventDefault(),e.stopImmediatePropagation(),R&&ge(R),2===e.detail&&R?.contains(e.target)&&!C.disabled&&!B?.element&&C.dispatchEvent(new MouseEvent("click",e)))},{capture:!0,signal:X.signal}),document.addEventListener("keydown",function(e){if(B?.handleKey(e))return void C.focus({preventScroll:!0});let t=e.key.toLowerCase(),i=e.composedPath()[0];if(S&&!P.hidden&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&("b"===t||"arrowleft"===t||"arrowright"===t)&&!(i instanceof HTMLElement&&(i.isContentEditable||i.matches("input, textarea, select"))))return e.preventDefault(),e.stopImmediatePropagation(),void ee("b"===t?!J:"arrowleft"===t);if(S&&!B?.element&&("Enter"===e.key||" "===e.key)&&!e.composedPath().includes(n.host)){let t=document.activeElement;if(t instanceof HTMLElement&&t!==document.body&&t!==document.documentElement)return e.preventDefault(),e.stopImmediatePropagation(),le(t),void ge(t)}S&&"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),fe(!1),n.onExit())},{capture:!0,signal:X.signal}),window.addEventListener("scroll",re,{capture:!0,passive:!0,signal:X.signal}),window.addEventListener("resize",re,{passive:!0,signal:X.signal}),{setActive:fe,mountPanel(e){a.parentElement!==e&&(a.parentElement?.removeAttribute("data-design-empty"),e.append(a),se())},get active(){return S},ready:s,destroy(){ee(!1),B?.element&&me(!0),window.clearTimeout(D),window.clearTimeout(G),window.clearTimeout(I),de?.disconnect(),X.abort(),cancelAnimationFrame($);for(let[e,t]of K)for(let[n,i]of t)te(e,n,i);B?.restoreAll(),a.remove(),r.remove(),T.remove(),i.remove()}}}export{n as createDesignMode};

package/dist/design-system.d.ts

@@ -0,0 +1,150 @@
+/** DTCG-style token types. Composite types are listed but previewed only as a whole. */
+export type DesignTokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "lineHeight" | "letterSpacing" | "shadow" | "typography" | "duration" | "number" | "other";
+/** One token, with aliases already resolved by the adapter. */
+export interface DesignToken {
+    /** Stable dot path, e.g. "color.text.primary". This is what proposals record. */
+    path: string;
+    type: DesignTokenType;
+    /** Resolved value for the theme passed to `list()`, e.g. "#1f1f1f" or "8px". */
+    value: string;
+    /** CSS properties this token may set on an element, e.g. ["color"]. Used to suggest tokens. */
+    properties?: string[];
+    /** Display name; defaults to the path. */
+    label?: string;
+    /** Group heading in the picker, e.g. "Text", "Background", "Spacing". */
+    group?: string;
+    description?: string;
+    /**
+     * The adapter's own handle for the token: a CSS variable ("--color-brand"), a
+     * utility class ("text-primary"), etc. Shown to reviewers and agents.
+     */
+    ref?: string;
+    /** Interaction states the token carries itself, e.g. ["hover", "active", "disabled"]. */
+    states?: string[];
+}
+/** A property that uses a token. */
+export interface TokenRef {
+    path: string;
+}
+/** A property whose value doesn't come from a token; `value` is what the page uses. */
+export interface OffToken {
+    offToken: string;
+}
+export type TokenUsage = TokenRef | OffToken;
+export interface TokenAdapter {
+    /** Stable id recorded on proposals, e.g. "css-variables" or "tailwind". */
+    id: string;
+    /** Every token, with values for `theme` (the current theme state when omitted). */
+    list(theme?: ThemeState): DesignToken[] | Promise<DesignToken[]>;
+    /**
+     * Which token each CSS property of `element` uses, or its off-token value.
+     * Return only properties the app can vouch for; komo shows nothing for the rest.
+     */
+    resolve(element: Element): Record<string, TokenUsage> | Promise<Record<string, TokenUsage>>;
+    /**
+     * Preview `token` for `property` on `element` until the returned undo runs,
+     * e.g. by swapping a utility class or setting a CSS variable. Without it,
+     * komo previews by setting the token's resolved value inline.
+     */
+    preview?(element: Element, property: string, token: DesignToken): () => void;
+    /**
+     * How a developer or agent should apply the change in source, e.g.
+     * 'Replace class "text-secondary" with "text-primary"'. Recorded on proposals.
+     */
+    describe?(element: Element, property: string, from: TokenUsage, to: DesignToken): string;
+}
+/** Theme state: axis id → option id, e.g. { mode: "dark", product: "track" }. */
+export type ThemeState = Record<string, string>;
+export interface ThemeOption {
+    id: string;
+    label?: string;
+}
+/** One independent theme dimension reviewers can flip, such as light/dark. */
+export interface ThemeAxis {
+    id: string;
+    label?: string;
+    options: ThemeOption[];
+    /** The option currently applied to the page. */
+    current(): string;
+    /** Switch the page to `optionId`. komo restores the original option when Design mode closes. */
+    apply(optionId: string): void;
+}
+export type ComponentPropValue = string | number | boolean | null;
+/** What the app knows about the component that renders an element. */
+export interface ComponentIdentity {
+    /** Display name, e.g. "Button". Prefer the design-system or Figma Code Connect name. */
+    name: string;
+    /** Props worth showing, e.g. { variant: "secondary", size: "md" }. */
+    props?: Record<string, ComponentPropValue>;
+    /** Source location, e.g. "src/components/Button.tsx:12". */
+    source?: string;
+    /** The component's root element; may be an ancestor of the picked element. */
+    element: Element;
+}
+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.
+     */
+    identify(element: Element): ComponentIdentity | null;
+}
+export interface DesignSystem {
+    tokens?: TokenAdapter;
+    themes?: ThemeAxis[];
+    components?: ComponentAdapter;
+}
+/**
+ * Machine-readable record of a Design mode proposal, versioned so the CLI and
+ * agents can apply it. Comments carry it alongside the human-readable text.
+ */
+export interface DesignEdit {
+    komo: "design-edit";
+    version: 1;
+    target: {
+        /** CSS selector for the edited element at proposal time. */
+        selector: string;
+        component?: Omit<ComponentIdentity, "element">;
+    };
+    /** Theme state the proposal was made in. */
+    theme?: ThemeState;
+    /** Token adapter id, when token changes are present. */
+    tokens?: string;
+    changes: DesignEditChange[];
+}
+export type DesignEditChange = 
+/** Use a different token for a property. `apply` is the adapter's `describe()` text. */
+{
+    kind: "token";
+    property: string;
+    from: TokenUsage;
+    to: TokenRef;
+    apply?: string;
+}
+/** Change a shared token's value for everyone using it. */
+ | {
+    kind: "token-value";
+    path: string;
+    from: string;
+    to: string;
+}
+/** Change a component prop (from `useKomoInspectable` or the component adapter). */
+ | {
+    kind: "prop";
+    name: string;
+    from: ComponentPropValue | undefined;
+    to: ComponentPropValue | undefined;
+}
+/** Change text content. */
+ | {
+    kind: "text";
+    from: string;
+    to: string;
+}
+/** Raw CSS fallback when no token or prop applies. */
+ | {
+    kind: "css";
+    property: string;
+    from: string;
+    to: string;
+};

package/dist/design-tokens.d.ts

@@ -50,6 +50,8 @@ export declare function tokenImpactCount(source: RegisteredDesignTokenSource, to
  * extends the last undo step for the same token instead of adding one per keystroke.
  */
 export declare function previewThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken, value: string, merge?: boolean): boolean;
+/** Show shared theme values as the page had them, or put the edits back. */
+export declare function showThemeBefore(on: boolean): void;
 /** Return one shared token to the page's value; like Reset, it leaves no undo step. */
 export declare function resetThemeToken(source: RegisteredDesignTokenSource, token: KomoDesignToken): void;
 export declare function applyTokenToElement(source: RegisteredDesignTokenSource, element: HTMLElement, token: KomoDesignToken, property: string, options?: {

package/dist/index.js

@@ -1 +1 @@
-import{b as o,c as s}from"./chunk-JQVBZ2BB.js";import"./chunk-Q7WSWLMV.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};
+import{b as o,c as s}from"./chunk-5LHGJFWQ.js";import"./chunk-Q7WSWLMV.js";import"./chunk-Y2GRLW4Q.js";import"./chunk-7YUXYVQA.js";import"./chunk-YZP3KX4Y.js";import"./chunk-I7AUKTXE.js";export{s as initComments,o as initKomo};

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

@@ -0,0 +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 r(){let e=new Map,t=new Map,r=[],a=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)),r.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(a){let o=e.get(a);void 0!==o&&n(a,o,t.get(a)),e.delete(a);for(let e=r.length-1;e>=0;e--)r[e].element===a&&r.splice(e,1)},proposal(t){let n=e.get(t),r=t.textContent??"";return void 0!==n&&n!==r?`Proposed inline text change (preview only)\n- Text: ${JSON.stringify(n)} → ${JSON.stringify(r)}\n- Source markup is unchanged; refresh resets this preview.`:void 0},restoreAll(){for(let[r,a]of e)n(r,a,t.get(r))},showBefore(r){if(r)for(let[r,o]of e){let e=t.get(r);a.set(r,[r.textContent??"",e?.map(([e])=>[e,e.data])]),n(r,o,e)}else for(let[e,[t,r]]of a)n(e,t,r);r||a.clear()},undo(){let t=r.pop();return t?(n(t.element,t.before,t.nodes),e.get(t.element)===t.before&&e.delete(t.element),t.element):null}}}function a(e){let t=r(),n=null,a=!1;function o(t=!1){let r=n;r&&(n=null,r.finish(t),e.onChange())}return{get element(){return n?.element??null},get busy(){return a},isEditing:e=>!!n&&n.element===e,toggle:async function(r){let l=e.selected();if(n&&n.element===l)return void o();if(!l||!e.active()||a||n)return;let s=i(l);if(s)e.status.textContent=s;else{a=!0,e.status.textContent="Loading inline text editor…",e.onChange();try{let a=await d(l,{loadReactBridge:async()=>await import("./react-props-panel-XQ4T3RLV.js"),onFinish(n,r){r||n.reactProp||n.before===n.after?n.reactProp&&(e.status.textContent="React state preview · resets on refresh"):(t.record(n),e.onCommit(l),e.status.textContent="Text preview · resets on refresh")}});a?e.active()&&e.selected()===l?(n=a,r&&function(e,t,n){let r=document.caretPositionFromPoint?.(t,n),a=r?document.createRange():document.caretRangeFromPoint?.(t,n);if(r&&a&&a.setStart(r.offsetNode,r.offset),!a||!e.contains(a.startContainer))return;a.collapse(!0);let o=document.getSelection();o?.removeAllRanges(),o?.addRange(a)}(l,r.clientX,r.clientY),e.status.textContent=l.hasAttribute("data-komo-text-prop")?"React state preview · resets on refresh":"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,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,r){t.reconcile(n,r),e.onChange()},proposal:e=>t.proposal(e),restoreAll(){t.restoreAll()},showBefore:t.showBefore}}function o(e){let t=a(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(),r=n?.rangeCount?n.getRangeAt(0):null;return r&&e.contains(r.commonAncestorContainer)?r.startContainer===e?Math.min([...e.childNodes].slice(0,r.startOffset).reduce((e,t)=>e+(t.textContent?.length??0),0),t.length):r.startContainer.nodeType===Node.TEXT_NODE?Math.min(r.startOffset,t.length):t.length:-1}function c(e,t){let n=e.firstChild,r=document.getSelection();if(!n||!r)return;let a=document.createRange();a.setStart(n,Math.min(t,n.textContent?.length??0)),a.collapse(!0),r.removeAllRanges(),r.addRange(a)}async function d(r,a){if(!l(r))return null;let o=null,i=null;if(r.dataset.komoTextProp&&(o=await a.loadReactBridge(),i=o.beginReactTextEdit(r),!i))return null;let d=i?.before??(r.textContent??"").slice(0,500),u=!i&&r.childElementCount>0,f=u?t(r).map(e=>[e,e.data]):void 0,g=r.getAttribute("role"),p=r.getAttribute("aria-label"),m=r.getAttribute("aria-multiline"),h=r.getAttribute("spellcheck"),x=new AbortController,C=!1;let v=-1,b=new MutationObserver(()=>{v>=0&&c(r,v)}),T=()=>{u||(r.childElementCount&&(r.textContent=r.textContent??""),(r.textContent??"").length>500&&(r.textContent=(r.textContent??"").slice(0,500)),i&&o&&(v=s(r),o.previewReactTextEdit(r,i.propName,r.textContent??"")||(r.textContent=d)))},E=(t,n)=>{let a=t.startContainer;if(a!==t.endContainer||!(a instanceof Text)||!r.contains(a)||a.parentElement?.closest(e))return;let o=t.endOffset-t.startOffset,i=n.replace(/[\r\n]+/g," ").slice(0,Math.max(0,500-(r.textContent??"").length+o));a.replaceData(t.startOffset,o,i);let l=document.createRange();l.setStart(a,t.startOffset+i.length);let s=document.getSelection();s?.removeAllRanges(),s?.addRange(l)};r.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}),r.addEventListener("input",T,{signal:x.signal}),i&&b.observe(r,{childList:!0,characterData:!0,subtree:!0}),r.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 r=e.textContent??"",a=t.slice(0,Math.max(0,500-r.length));e.textContent=r.slice(0,n)+a+r.slice(n),c(e,n+a.length)}(r,t.replace(/[\r\n]+/g," ").slice(0,500)),T())},{signal:x.signal}),r.addEventListener("drop",e=>e.preventDefault(),{signal:x.signal}),r.setAttribute("contenteditable","true"),r.setAttribute("role","textbox"),r.setAttribute("aria-label","Inline text preview"),r.setAttribute("aria-multiline","false"),r.dataset.komoInlineEditing="true",r.spellcheck=!1,r.focus({preventScroll:!0});let R=document.getSelection(),y=document.createRange();return y.selectNodeContents(r),y.collapse(!1),R?.removeAllRanges(),R?.addRange(y),{element:r,finish(e=!1){if(C)return;C=!0,x.abort(),b.disconnect(),!u&&r.childElementCount&&(r.textContent=r.textContent??"");let t=(r.textContent??"").slice(0,500);(function(){r.removeAttribute("contenteditable"),r.removeAttribute("data-komo-inline-editing");for(let[e,t]of[["role",g],["aria-label",p],["aria-multiline",m],["spellcheck",h]])null===t?r.removeAttribute(e):r.setAttribute(e,t)})(),e?(i&&o&&o.cancelReactTextEdit(r,i.propName,d),n(r,d,f)):i&&o&&o.finishReactTextEdit(r,i.propName,d,t),a.onFinish({element:r,before:d,after:t,nodes:f,...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,a as createInlineTextTools,r as createTextPreviewHistory,d as startInlineTextEditor,i as textEditBlocker};

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

@@ -50,6 +50,8 @@ export interface InlineTextTools {
     reconcile(element: HTMLElement, text: string): void;
     proposal(element: HTMLElement): string | undefined;
     restoreAll(): void;
+    /** Show the page's original text, or put the edits back. */
+    showBefore(on: boolean): void;
 }
 export interface TextPreviewHistory {
     record(result: InlineTextEditResult): void;
@@ -59,6 +61,7 @@ export interface TextPreviewHistory {
     reset(element: HTMLElement): void;
     proposal(element: HTMLElement): string | undefined;
     restoreAll(): void;
+    showBefore(on: boolean): void;
     undo(): HTMLElement | null;
 }
 export declare function createTextPreviewHistory(): TextPreviewHistory;