@hazem3500/komo 0.9.30 → 0.9.32

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-YSTPKET2.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};
+import{a as o,c as n}from"./chunk-MU3NFN44.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-53M6AOAX.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};

package/dist/text-preview.d.ts

@@ -0,0 +1,23 @@
+import type { InlineTextEditResult } from "./inline-text-editor.js";
+export type TextSnapshot = Array<[Text, string]>;
+export declare const lockedText = "script,style,svg,input,textarea,select,[data-private],[data-sensitive]";
+export declare function snapshotText(element: HTMLElement): TextSnapshot;
+export declare function restoreText(nodes: TextSnapshot, owner: HTMLElement): void;
+/** Keep a visual preview on the same nodes through host text updates; never adopt replacement markup. */
+export declare function holdText(element: HTMLElement, nodes: TextSnapshot, onLost?: () => void): () => void;
+/** Apply only the changed character range, retaining every element and text node. */
+export declare function previewText(element: HTMLElement, before: string, after: string, onLost?: () => void): (() => void) | undefined;
+export interface TextPreviewHistory {
+    record(result: InlineTextEditResult): void;
+    remember(element: HTMLElement, before: string): void;
+    original(element: HTMLElement): string | undefined;
+    reconcile(element: HTMLElement, text: string): void;
+    reset(element: HTMLElement): void;
+    proposal(element: HTMLElement): string | undefined;
+    restoreAll(): void;
+    showBefore(on: boolean, retain?: boolean): void;
+    undo(): HTMLElement | null;
+    pause(element: HTMLElement): void;
+    resume(element: HTMLElement): void;
+}
+export declare function createTextPreviewHistory(): TextPreviewHistory;

package/dist/token-adapter.d.ts

@@ -1,4 +1,16 @@
 import type { DesignEditChange, DesignSystem, DesignToken, ThemeState, TokenAdapter, TokenUsage } from "./design-system.js";
+export declare function rememberTokenUsage(element: Element, property: string, usage: TokenUsage | undefined): TokenUsage | undefined;
+export declare function effectiveTokenUsage(element: Element, property: string, fallback?: TokenUsage): TokenUsage | undefined;
+export declare function customTokenOverride(element: Element, property: string): {
+    priority: string;
+    undo?: () => void;
+} | undefined;
+export declare function originalTokenStyle(element: Element, property: string): {
+    value: string;
+    priority: string;
+    computed: string;
+    restore(): void;
+} | undefined;
 /** The theme state Design mode lists tokens for: each axis's current option. */
 export declare function themeState(design?: DesignSystem): ThemeState;
 /** `list()` runs once per adapter and theme state; a failed call is retried next time. */
@@ -26,6 +38,7 @@ export declare function swappedToken(element: Element, property: string): Design
 export declare function swapToken(adapter: TokenAdapter, element: Element, property: string, token: DesignToken, from: TokenUsage, fromToken?: DesignToken): () => void;
 export declare function undoTokenSwap(element: Element): void;
 export declare function hasTokenSwaps(element: Element): boolean;
+export declare function hasCustomTokenOverrides(element: Element): boolean;
 export declare function resetTokenSwaps(element: Element): void;
 /** Take back every swap, e.g. when Design mode closes. */
 export declare function resetAllTokenSwaps(): void;

package/dist/{token-picker-RHPT7HCK.js → token-picker-DY76T4PJ.js}

@@ -1 +1 @@
-import{a as e,b as t,c as o}from"./chunk-4KEVPMJJ.js";import"./chunk-HHG6KWKR.js";import"./chunk-RPY7OOOR.js";var n,r=new WeakSet,a=0;function i(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function l(e){let t=/^(-?[\d.]+)(px|r?em)?$/.exec(e.trim());return t?parseFloat(t[1])*(t[2]?"px"===t[2]?1:16:1):void 0}var s=(e,t,o)=>Math.min(o,Math.max(t,e));function p(e){if(!e||/var\(/i.test(e))return!1;let t=document.createElement("span").style;return t.color=e,!!t.color}function d(e,t,o,n){let r=document.createElement("div");r.id=t,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(o));let a=document.createElement("span");a.className="komo-tokens__name";let d=document.createElement("span");d.textContent=i(e),a.append(d);let c=document.createElement("span");c.className="komo-tokens__check",c.setAttribute("aria-hidden","true");let f=document.createElement("span");f.className="komo-tokens__meta";let m="typography"===e.type?function(e){let t=e.trim().split(/\s+/);return[t.find(e=>/^(\d{3}|bold|bolder|lighter)$/.test(e)),t.find(e=>/^[\d.]+(px|r?em|pt|%)(\/\S+)?$/.test(e))].filter(Boolean).join(" · ")||e}(e.value??""):e.value??"",u="color"===e.type&&!p(e.value);for(let t of[e.ref,u?`Unresolved value · ${m||"not supplied"}`:m]){if(!t)continue;let e=document.createElement("span");e.textContent=t,f.append(e)}if(r.append(function(e,t){let o=document.createElement("span");o.className="komo-tokens__pv",o.setAttribute("aria-hidden","true");let n=e=>{let t=document.createElement("span");return t.className=`komo-tokens__${e}`,o.append(t),t},r=e.value??"",{type:a}=e;if("color"===a){let o=n("sw"),a=t.map(t=>t.values.get(e.path)).filter(e=>!!e);for(let e of new Set(a).size>1?a:[r]){let t=document.createElement("span");p(e)?t.style.background=e:(t.dataset.unresolved="",t.textContent="?"),o.append(t)}}else if("dimension"===a||"letterSpacing"===a){let t=l(r);if(void 0===t)return o;let a=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),i=n(a?"corner":"dim");a?i.style.borderTopLeftRadius=`${s(t,0,12)}px`:i.style.width=`${s(t/2,2,24)}px`}else if("shadow"===a)n("shadow").style.boxShadow=r;else if("typography"===a||"fontWeight"===a||"fontFamily"===a){let e=n("ag");if(e.textContent="Ag","typography"===a){e.style.font=r;let t=l(r.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${s(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===a?e.style.fontWeight=r:e.style.fontFamily=r}return o}(e,n),a,c,f),e.states?.length){let t=document.createElement("span");t.className="komo-tokens__states";for(let o of e.states){let e=document.createElement("i");e.textContent=o,t.append(e)}r.append(t)}if(e.description){let t=document.createElement("span");t.className="komo-tokens__desc",t.textContent=e.description,r.append(t)}let k=n.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return r.title=[e.label,e.path,e.ref,k.length>1?k.join(", "):e.value,u?"Unresolved color value; no swatch available":"",e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · "),r.setAttribute("aria-label",r.title),r}function c(e){return n?.trigger===e}function f(e){c(e.trigger)?n.close(!0):m(e)}function m(l){n?.close();let{trigger:p,tokens:c,property:f}=l,m=p.getRootNode();if((m instanceof ShadowRoot||m===document)&&!r.has(m)){r.add(m);let t=document.createElement("style");t.textContent=e+".komo-tokens{display:flex;flex-direction:column;overflow:hidden}.komo-tokens__bar{flex:none;display:flex;gap:4px;padding:8px;background:#232323;border-bottom:1px solid #ffffff0d}.komo-tokens__bar input{flex:1;min-width:0;height:28px;box-sizing:border-box;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:#ffffff0a;color:#f1efeb;font:inherit}.komo-tokens__bar input::placeholder{color:#77736f}.komo-tokens__bar input:focus{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-tokens__bar button{flex:none;height:28px;padding:0 8px;border:0;border-radius:6px;background:none;color:#898680;font:inherit;white-space:nowrap;cursor:pointer}.komo-tokens__bar button:hover{background:#ffffff0f;color:#f1efeb}.komo-tokens__bar button[aria-pressed=true]{background:#bda6ef24;color:#e6dcfb}.komo-tokens__bar button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.komo-tokens [role=listbox]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px}.komo-tokens small{position:sticky;top:0;z-index:1;display:block;padding:8px 8px 4px;background:#232323;color:#77736f;font-size:10px;font-weight:500}.komo-tokens [role=option]{display:grid;grid-template-columns:20px minmax(0,1fr) 14px;align-items:center;gap:4px 8px;box-sizing:border-box;min-height:48px;padding:8px;border-radius:7px;cursor:pointer}.komo-tokens [data-active]{background:#ffffff14;color:#f1efeb}.komo-tokens [aria-selected=true] .komo-tokens__name{color:#e6dcfb}.komo-tokens__name{grid-column:2;min-width:0;font-weight:500}.komo-tokens__name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__check{grid-column:3;justify-self:center}.komo-tokens [aria-selected=true] .komo-tokens__check{width:7px;height:3.5px;margin-top:-3px;border:solid #bda6ef;border-width:0 0 1.5px 1.5px;rotate:-45deg}.komo-tokens__meta,.komo-tokens__desc,.komo-tokens__states{grid-column:2/-1;min-width:0}.komo-tokens__meta{display:grid;gap:2px;color:#a5a19b;font-size:10px;font-variant-numeric:tabular-nums}.komo-tokens__meta span,.komo-tokens__desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__meta span+span,.komo-tokens__desc{color:#898680;font-size:10px}.komo-tokens__states{display:flex;flex-wrap:wrap;gap:4px}.komo-tokens__states i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 5px;border-radius:4px;background:#ffffff0a;color:#aaa69f;font-size:9px;font-style:normal}.komo-tokens__pv{display:flex;align-items:center;height:16px;overflow:hidden}.komo-tokens__sw{display:flex;width:16px;height:16px;border-radius:4px;overflow:hidden;background:repeating-conic-gradient(#ffffff40 0 25%,#ffffff0d 0 50%) 0 0/8px 8px;outline:1px solid #ffffff1f;outline-offset:-1px}.komo-tokens__sw>span{flex:1}.komo-tokens__sw>[data-unresolved]{display:grid;place-items:center;background:#393939;color:#b6b1aa;font-size:10px}.komo-tokens__dim{height:4px;min-width:2px;border-radius:2px;background:#bda6ef}.komo-tokens__corner{width:12px;height:12px;box-sizing:border-box;border:solid #bda6ef;border-width:1.5px 0 0 1.5px}.komo-tokens__shadow{width:16px;height:12px;margin-left:2px;border-radius:3px;background:#f1efeb}.komo-tokens__ag{color:#f1efeb;font-size:13px;line-height:1;white-space:nowrap}.komo-tokens__hint{flex:none;padding:7px 10px;border-top:1px solid #ffffff0d;color:#aaa69f;font-size:10px}.komo-tokens__empty{padding:12px 8px;color:#77736f}@media (pointer:coarse){.komo-tokens{font-size:13px}.komo-tokens [role=option]{min-height:40px}.komo-tokens__bar input,.komo-tokens__bar button{height:36px}}",(m instanceof ShadowRoot?m:document.head).append(t)}let u="komo-tokens-"+ ++a,k=document.createElement("div");k.className="komo-tokens";let g=document.createElement("div");g.className="komo-tokens__bar";let h=document.createElement("input");h.type="text",h.placeholder="Search tokens",h.autocomplete="off",h.spellcheck=!1,h.setAttribute("role","combobox"),h.setAttribute("aria-expanded","true"),h.setAttribute("aria-controls",u),h.setAttribute("aria-autocomplete","list"),h.setAttribute("aria-label",`Search tokens for ${f}`);let b=document.createElement("div");b.id=u,b.setAttribute("role","listbox"),b.setAttribute("aria-label",`Tokens for ${f}`);let x=c.filter(e=>e.properties?.includes(f)),_=!x.length,v=document.createElement("button");if(v.type="button",v.textContent="Show all",v.title=`Show all ${c.length} tokens, not only ${f} tokens`,g.append(h),x.length&&x.length<c.length&&g.append(v),k.append(g,b),l.onPreview){let e=document.createElement("div");e.className="komo-tokens__hint",e.textContent="↑↓ preview · Enter to apply · Esc to cancel",k.append(e)}let w,y,E=new Map(c.map(e=>[e,`${i(e)} ${e.label??""} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),$=[],A=[],C=0,S=-1,T=b,N=-1,z=()=>{let e=y;y=void 0,N=-1,e?.()},P=e=>{for(;C<Math.min(e,A.length);C++){let{token:e,group:t}=A[C];if(t!==w&&(w=t,T=b,t)){T=document.createElement("div"),T.setAttribute("role","group");let e=document.createElement("small");e.id=`${u}-g${C}`,e.textContent=t,T.setAttribute("aria-labelledby",e.id),T.append(e),b.append(T)}T.append(d(e,`${u}-${C}`,e.path===l.current,$))}},L=e=>b.querySelector(`#${u}-${e}`),M=(e,t=!0,o=!0)=>{if(e<0||e>=A.length)return;if(e!==N&&o){z(),N=e;let t=A[e].token;t.path!==l.current&&(y=l.onPreview?.(t))}P(e+60),L(S)?.removeAttribute("data-active"),S=e;let n=L(e);if(n.toggleAttribute("data-active",!0),h.setAttribute("aria-activedescendant",n.id),!t)return;let r=n.offsetTop-(n.parentElement===b?0:n.parentElement.firstElementChild.offsetHeight),a=n.offsetTop+n.offsetHeight;r<b.scrollTop?b.scrollTop=r-4:a>b.scrollTop+b.clientHeight&&(b.scrollTop=a-b.clientHeight+4)},H=(e=!1)=>{z();let t=h.value.toLowerCase().split(/\s+/).filter(Boolean),o=_?c:x,n=t.length?o.filter(e=>t.every(t=>E.get(e).includes(t))):o,r=!t.length&&l.current?n.find(e=>e.path===l.current):void 0,a=new Map([["",[]]]);for(let e of n){if(e===r)continue;let t=e.group??"";a.set(t,[...a.get(t)??[],e])}if(A=[...r?[{token:r,group:"Current"}]:[],...[...a].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],b.replaceChildren(),b.scrollTop=0,C=0,S=-1,w=void 0,h.removeAttribute("aria-activedescendant"),v.setAttribute("aria-pressed",String(_)),!A.length){let e=document.createElement("div");return e.className="komo-tokens__empty",e.textContent=t.length?"No matching tokens":"No tokens",void b.append(e)}P(60),M(0,!1,e)},j=new AbortController,{signal:R}=j,D=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function K(e=!1){n?.close===K&&(n=void 0,z(),j.abort(),k.remove(),p.setAttribute("aria-expanded","false"),p.removeAttribute("aria-controls"),e&&p.isConnected&&p.focus({preventScroll:!0}))}n={trigger:p,close:K};let B=e=>{let t=A[e]?.token;t&&(K(!0),t.path!==l.current&&l.onSelect(t))};h.addEventListener("input",()=>H(!0),{signal:R}),v.addEventListener("click",()=>{_=!_,H(!0),D||h.focus({preventScroll:!0})},{signal:R}),addEventListener("keydown",e=>{if(!p.isConnected)return K();let t=e.composedPath();if(!t.includes(k)&&!t.includes(p))return;let{key:o}=e;if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)K(!0);else{if("Tab"===o)return K();if(t[0]!==h&&t[0]!==p)return;if("ArrowDown"===o||"ArrowUp"===o)M(s(S+("ArrowDown"===o?1:-1),0,A.length-1));else if("PageDown"===o||"PageUp"===o)M(s(S+("PageDown"===o?8:-8),0,A.length-1));else{if("Enter"!==o)return;B(S)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:R}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(k)&&!t.includes(p)&&K()},{capture:!0,signal:R});let O=e=>{e.target===b?b.scrollTop+b.clientHeight>b.scrollHeight-200&&P(C+60):e.target instanceof Node&&k.contains(e.target)||K()};addEventListener("scroll",O,{capture:!0,signal:R}),m.addEventListener("scroll",O,{capture:!0,signal:R}),addEventListener("resize",()=>K(),{signal:R}),o(p,()=>K(),R),b.addEventListener("mousedown",e=>e.preventDefault(),{signal:R});let W=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(u.length+1)):-1};b.addEventListener("pointermove",e=>{let t=W(e);t>=0&&M(t,!1)},{signal:R}),k.addEventListener("click",e=>{e.target!==h&&e.preventDefault();let t=W(e);t>=0&&B(t)},{signal:R}),H();let U=p.closest(".design-field")??p.parentElement;U.append(k),p.setAttribute("aria-expanded","true"),p.setAttribute("aria-controls",u);let F=U.getBoundingClientRect(),I=t(U),J=(k.offsetParent??U).getBoundingClientRect(),q=s(I.right-I.left-8,120,340),G=I.bottom-F.bottom-8,V=F.top-I.top-8,Y=G<240&&V>G,Q=Math.min(320,Math.max(Y?V:G,120));if(k.style.width=`${q}px`,k.style.maxHeight=`${Q}px`,k.style.left=s(F.left,I.left+4,I.right-q-4)-J.left+"px",k.style.top=Y?"":F.bottom+4-J.top+"px",k.style.bottom=Y?J.bottom-F.top+4+"px":"",k.toggleAttribute("data-up",Y),l.current){let e=A.findIndex(e=>e.token.path===l.current);e>=0&&M(e,!0,!1)}return D||h.focus({preventScroll:!0}),Promise.resolve(l.themes?.()).then(e=>{if(!e||e.length<2||n?.trigger!==p)return;$=e;let t=S,o=b.scrollTop,r=C;b.replaceChildren(),C=0,w=void 0,P(r),b.scrollTop=o,M(t,!1,!1)},()=>{}),()=>K()}export{c as isTokenPickerOpen,m as openTokenPicker,f as toggleTokenPicker,i as tokenLabel};
+import{a as e,b as t,c as o}from"./chunk-4KEVPMJJ.js";import"./chunk-5BPQP3VG.js";import"./chunk-RPY7OOOR.js";var n,r=new WeakSet,a=0;function i(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function l(e){let t=/^(-?[\d.]+)(px|r?em)?$/.exec(e.trim());return t?parseFloat(t[1])*(t[2]?"px"===t[2]?1:16:1):void 0}var s=(e,t,o)=>Math.min(o,Math.max(t,e));function p(e){if(!e||/var\(/i.test(e))return!1;let t=document.createElement("span").style;return t.color=e,!!t.color}function d(e,t,o,n){let r=document.createElement("div");r.id=t,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(o));let a=document.createElement("span");a.className="komo-tokens__name";let d=document.createElement("span");d.textContent=i(e),a.append(d);let c=document.createElement("span");c.className="komo-tokens__check",c.setAttribute("aria-hidden","true");let f=document.createElement("span");f.className="komo-tokens__meta";let m="typography"===e.type?function(e){let t=e.trim().split(/\s+/);return[t.find(e=>/^(\d{3}|bold|bolder|lighter)$/.test(e)),t.find(e=>/^[\d.]+(px|r?em|pt|%)(\/\S+)?$/.test(e))].filter(Boolean).join(" · ")||e}(e.value??""):e.value??"",u="color"===e.type&&!p(e.value);for(let t of[e.ref,u?`Unresolved value · ${m||"not supplied"}`:m]){if(!t)continue;let e=document.createElement("span");e.textContent=t,f.append(e)}if(r.append(function(e,t){let o=document.createElement("span");o.className="komo-tokens__pv",o.setAttribute("aria-hidden","true");let n=e=>{let t=document.createElement("span");return t.className=`komo-tokens__${e}`,o.append(t),t},r=e.value??"",{type:a}=e;if("color"===a){let o=n("sw"),a=t.map(t=>t.values.get(e.path)).filter(e=>!!e);for(let e of new Set(a).size>1?a:[r]){let t=document.createElement("span");p(e)?t.style.background=e:(t.dataset.unresolved="",t.textContent="?"),o.append(t)}}else if("dimension"===a||"letterSpacing"===a){let t=l(r);if(void 0===t)return o;let a=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),i=n(a?"corner":"dim");a?i.style.borderTopLeftRadius=`${s(t,0,12)}px`:i.style.width=`${s(t/2,2,24)}px`}else if("shadow"===a)n("shadow").style.boxShadow=r;else if("typography"===a||"fontWeight"===a||"fontFamily"===a){let e=n("ag");if(e.textContent="Ag","typography"===a){e.style.font=r;let t=l(r.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${s(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===a?e.style.fontWeight=r:e.style.fontFamily=r}return o}(e,n),a,c,f),e.states?.length){let t=document.createElement("span");t.className="komo-tokens__states";for(let o of e.states){let e=document.createElement("i");e.textContent=o,t.append(e)}r.append(t)}if(e.description){let t=document.createElement("span");t.className="komo-tokens__desc",t.textContent=e.description,r.append(t)}let k=n.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return r.title=[e.label,e.path,e.ref,k.length>1?k.join(", "):e.value,u?"Unresolved color value; no swatch available":"",e.states?.length?`States: ${e.states.join(", ")}`:"",e.description].filter(Boolean).join(" · "),r.setAttribute("aria-label",r.title),r}function c(e){return n?.trigger===e}function f(e){c(e.trigger)?n.close(!0):m(e)}function m(l){n?.close();let{trigger:p,tokens:c,property:f}=l,m=p.getRootNode();if((m instanceof ShadowRoot||m===document)&&!r.has(m)){r.add(m);let t=document.createElement("style");t.textContent=e+".komo-tokens{display:flex;flex-direction:column;overflow:hidden}.komo-tokens__bar{flex:none;display:flex;gap:4px;padding:8px;background:#232323;border-bottom:1px solid #ffffff0d}.komo-tokens__bar input{flex:1;min-width:0;height:28px;box-sizing:border-box;margin:0;padding:0 8px;border:0;border-radius:6px;outline:0;box-shadow:none;background:#ffffff0a;color:#f1efeb;font:inherit}.komo-tokens__bar input::placeholder{color:#77736f}.komo-tokens__bar input:focus{outline:0;box-shadow:inset 0 0 0 1px #bda6ef}.komo-tokens__bar button{flex:none;height:28px;padding:0 8px;border:0;border-radius:6px;background:none;color:#898680;font:inherit;white-space:nowrap;cursor:pointer}.komo-tokens__bar button:hover{background:#ffffff0f;color:#f1efeb}.komo-tokens__bar button[aria-pressed=true]{background:#bda6ef24;color:#e6dcfb}.komo-tokens__bar button:focus-visible{outline:1px solid #bda6ef;outline-offset:-1px}.komo-tokens [role=listbox]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px}.komo-tokens small{position:sticky;top:0;z-index:1;display:block;padding:8px 8px 4px;background:#232323;color:#77736f;font-size:10px;font-weight:500}.komo-tokens [role=option]{display:grid;grid-template-columns:20px minmax(0,1fr) 14px;align-items:center;gap:4px 8px;box-sizing:border-box;min-height:48px;padding:8px;border-radius:7px;cursor:pointer}.komo-tokens [data-active]{background:#ffffff14;color:#f1efeb}.komo-tokens [aria-selected=true] .komo-tokens__name{color:#e6dcfb}.komo-tokens__name{grid-column:2;min-width:0;font-weight:500}.komo-tokens__name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__check{grid-column:3;justify-self:center}.komo-tokens [aria-selected=true] .komo-tokens__check{width:7px;height:3.5px;margin-top:-3px;border:solid #bda6ef;border-width:0 0 1.5px 1.5px;rotate:-45deg}.komo-tokens__meta,.komo-tokens__desc,.komo-tokens__states{grid-column:2/-1;min-width:0}.komo-tokens__meta{display:grid;gap:2px;color:#a5a19b;font-size:10px;font-variant-numeric:tabular-nums}.komo-tokens__meta span,.komo-tokens__desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komo-tokens__meta span+span,.komo-tokens__desc{color:#898680;font-size:10px}.komo-tokens__states{display:flex;flex-wrap:wrap;gap:4px}.komo-tokens__states i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 5px;border-radius:4px;background:#ffffff0a;color:#aaa69f;font-size:9px;font-style:normal}.komo-tokens__pv{display:flex;align-items:center;height:16px;overflow:hidden}.komo-tokens__sw{display:flex;width:16px;height:16px;border-radius:4px;overflow:hidden;background:repeating-conic-gradient(#ffffff40 0 25%,#ffffff0d 0 50%) 0 0/8px 8px;outline:1px solid #ffffff1f;outline-offset:-1px}.komo-tokens__sw>span{flex:1}.komo-tokens__sw>[data-unresolved]{display:grid;place-items:center;background:#393939;color:#b6b1aa;font-size:10px}.komo-tokens__dim{height:4px;min-width:2px;border-radius:2px;background:#bda6ef}.komo-tokens__corner{width:12px;height:12px;box-sizing:border-box;border:solid #bda6ef;border-width:1.5px 0 0 1.5px}.komo-tokens__shadow{width:16px;height:12px;margin-left:2px;border-radius:3px;background:#f1efeb}.komo-tokens__ag{color:#f1efeb;font-size:13px;line-height:1;white-space:nowrap}.komo-tokens__hint{flex:none;padding:7px 10px;border-top:1px solid #ffffff0d;color:#aaa69f;font-size:10px}.komo-tokens__empty{padding:12px 8px;color:#77736f}@media (pointer:coarse){.komo-tokens{font-size:13px}.komo-tokens [role=option]{min-height:40px}.komo-tokens__bar input,.komo-tokens__bar button{height:36px}}",(m instanceof ShadowRoot?m:document.head).append(t)}let u="komo-tokens-"+ ++a,k=document.createElement("div");k.className="komo-tokens";let g=document.createElement("div");g.className="komo-tokens__bar";let h=document.createElement("input");h.type="text",h.placeholder="Search tokens",h.autocomplete="off",h.spellcheck=!1,h.setAttribute("role","combobox"),h.setAttribute("aria-expanded","true"),h.setAttribute("aria-controls",u),h.setAttribute("aria-autocomplete","list"),h.setAttribute("aria-label",`Search tokens for ${f}`);let b=document.createElement("div");b.id=u,b.setAttribute("role","listbox"),b.setAttribute("aria-label",`Tokens for ${f}`);let x=c.filter(e=>e.properties?.includes(f)),_=!x.length,v=document.createElement("button");if(v.type="button",v.textContent="Show all",v.title=`Show all ${c.length} tokens, not only ${f} tokens`,g.append(h),x.length&&x.length<c.length&&g.append(v),k.append(g,b),l.onPreview){let e=document.createElement("div");e.className="komo-tokens__hint",e.textContent="↑↓ preview · Enter to apply · Esc to cancel",k.append(e)}let w,y,E=new Map(c.map(e=>[e,`${i(e)} ${e.label??""} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),$=[],A=[],C=0,S=-1,P=b,T=-1,N=()=>{let e=y;y=void 0,T=-1,e?.()},z=e=>{for(;C<Math.min(e,A.length);C++){let{token:e,group:t}=A[C];if(t!==w&&(w=t,P=b,t)){P=document.createElement("div"),P.setAttribute("role","group");let e=document.createElement("small");e.id=`${u}-g${C}`,e.textContent=t,P.setAttribute("aria-labelledby",e.id),P.append(e),b.append(P)}P.append(d(e,`${u}-${C}`,e.path===l.current,$))}},L=e=>b.querySelector(`#${u}-${e}`),M=(e,t=!0,o=!0)=>{if(e<0||e>=A.length)return;if(e!==T&&o){N(),T=e;let t=A[e].token;t.path!==l.current&&(y=l.onPreview?.(t))}z(e+60),L(S)?.removeAttribute("data-active"),S=e;let n=L(e);if(n.toggleAttribute("data-active",!0),h.setAttribute("aria-activedescendant",n.id),!t)return;let r=n.offsetTop-(n.parentElement===b?0:n.parentElement.firstElementChild.offsetHeight),a=n.offsetTop+n.offsetHeight;r<b.scrollTop?b.scrollTop=r-4:a>b.scrollTop+b.clientHeight&&(b.scrollTop=a-b.clientHeight+4)},j=(e=!1)=>{N();let t=h.value.toLowerCase().split(/\s+/).filter(Boolean),o=_?c:x,n=t.length?o.filter(e=>t.every(t=>E.get(e).includes(t))):o,r=!t.length&&l.current?n.find(e=>e.path===l.current):void 0,a=new Map([["",[]]]);for(let e of n){if(e===r)continue;let t=e.group??"";a.set(t,[...a.get(t)??[],e])}if(A=[...r?[{token:r,group:"Current"}]:[],...[...a].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],b.replaceChildren(),b.scrollTop=0,C=0,S=-1,w=void 0,h.removeAttribute("aria-activedescendant"),v.setAttribute("aria-pressed",String(_)),!A.length){let e=document.createElement("div");return e.className="komo-tokens__empty",e.textContent=t.length?"No matching tokens":"No tokens",void b.append(e)}z(60),M(0,!1,e)},H=new AbortController,{signal:R}=H,D=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function B(e=!1){n?.close===B&&(n=void 0,N(),H.abort(),k.remove(),p.setAttribute("aria-expanded","false"),p.removeAttribute("aria-controls"),e&&p.isConnected&&p.focus({preventScroll:!0}))}n={trigger:p,close:B};let O=e=>{let t=A[e]?.token;t&&(B(!0),t.path!==l.current&&l.onSelect(t))};h.addEventListener("input",()=>j(!0),{signal:R}),v.addEventListener("click",()=>{_=!_,j(!0),D||h.focus({preventScroll:!0})},{signal:R}),addEventListener("keydown",e=>{if(!p.isConnected)return B();let t=e.composedPath();if(!t.includes(k)&&!t.includes(p))return;let{key:o}=e;if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)B(!0);else{if("Tab"===o)return B();if(t[0]!==h&&t[0]!==p)return;if("ArrowDown"===o||"ArrowUp"===o)M(s(S+("ArrowDown"===o?1:-1),0,A.length-1));else if("PageDown"===o||"PageUp"===o)M(s(S+("PageDown"===o?8:-8),0,A.length-1));else{if("Enter"!==o)return;O(S)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:R}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(k)&&!t.includes(p)&&B()},{capture:!0,signal:R});let K=e=>{e.target===b?b.scrollTop+b.clientHeight>b.scrollHeight-200&&z(C+60):e.target instanceof Node&&k.contains(e.target)||B()};addEventListener("scroll",K,{capture:!0,signal:R}),m.addEventListener("scroll",K,{capture:!0,signal:R}),addEventListener("resize",()=>B(),{signal:R}),o(p,()=>B(),R),b.addEventListener("mousedown",e=>e.preventDefault(),{signal:R});let U=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(u.length+1)):-1};b.addEventListener("pointermove",e=>{let t=U(e);t>=0&&M(t,!1)},{signal:R}),k.addEventListener("click",e=>{e.target!==h&&e.preventDefault();let t=U(e);t>=0&&O(t)},{signal:R}),j();let W=p.closest(".design-field")??p.parentElement;W.append(k),p.setAttribute("aria-expanded","true"),p.setAttribute("aria-controls",u);let F=W.getBoundingClientRect(),I=t(W),J=(k.offsetParent??W).getBoundingClientRect(),V=s(I.right-I.left-8,120,340),q=I.bottom-F.bottom-8,G=F.top-I.top-8,Q=q<240&&G>q,Y=Math.min(320,Math.max(Q?G:q,120));if(k.style.width=`${V}px`,k.style.maxHeight=`${Y}px`,k.style.left=s(F.left,I.left+4,I.right-V-4)-J.left+"px",k.style.top=Q?"":F.bottom+4-J.top+"px",k.style.bottom=Q?J.bottom-F.top+4+"px":"",k.toggleAttribute("data-up",Q),l.current){let e=A.findIndex(e=>e.token.path===l.current);e>=0&&M(e,!0,!1)}return D||h.focus({preventScroll:!0}),Promise.resolve(l.themes?.()).then(e=>{if(!e||e.length<2||n?.trigger!==p)return;$=e;let t=S,o=b.scrollTop,r=C;b.replaceChildren(),C=0,w=void 0,z(r),b.scrollTop=o,M(t,!1,!1)},()=>{}),()=>B()}export{c as isTokenPickerOpen,m as openTokenPicker,f as toggleTokenPicker,i as tokenLabel};

package/dist/types.d.ts

@@ -107,7 +107,7 @@ export interface CommentsOptions {
     /**
      * Sidebar presentation when the review opens. "edge" (default) is a floating,
      * draggable sidebar that parks off and peeks from the viewport edge while
-     * closed. "background" frames the site and shows the sidebar in the scaled
+     * closed. "background" reflows the site beside the sidebar in an unscaled
      * review sheet. Users can switch Floating and Frame from the Account panel;
      * that choice is remembered per project. Compact viewports always use a bottom
      * Drawer, retaining the desktop preference when the viewport grows.
@@ -133,13 +133,17 @@ export interface CommentsOptions {
      */
     pickRoots?: () => Element[];
     /**
-     * Frame view scales body-level portals (dialogs, overlays, toasts) with the
-     * page, including fixed descendants of portal wrappers. Script-positioned
-     * popovers keep their viewport placement while their contents scale.
+     * Frame reflows the page at its available width without adding a scale,
+     * preserving native CSS-pixel interactions. Fixed body-level portals are
+     * kept inside the frame without moving their DOM.
+     * `scale: true` opts into shrinking the original viewport instead. Hosts
+     * deriving local values from client coordinates must handle that scale;
+     * arbitrary canvas, drag, and grid handlers cannot be corrected generically.
      * `include` overrides the default per body child; true maps the whole child
      * through the frame, and false leaves its subtree alone.
      */
     frame?: {
+        scale?: boolean;
         include?(element: HTMLElement): boolean;
     };
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazem3500/komo",
-  "version": "0.9.30",
+  "version": "0.9.32",
   "description": "Point, area, and threaded comments for website branches.",
   "type": "module",
   "license": "MIT",