@hazem3500/komo 0.9.25 → 0.9.26

package/dist/token-adapter.d.ts

@@ -16,6 +16,7 @@ export declare function tokenTitle(token: DesignToken): string;
 export declare function offTokenMarker(): HTMLElement;
 /** "Not from a token · 13px", naming a token with exactly that value when there is one. */
 export declare function markOffToken(dot: HTMLElement, value: string, match?: DesignToken): void;
+export declare function previewToken(adapter: TokenAdapter, element: Element, property: string, token: DesignToken): () => void;
 /** The latest token komo previewed for a property, if any. */
 export declare function swappedToken(element: Element, property: string): DesignToken | undefined;
 /**

package/dist/token-picker-JANYJIL4.js

@@ -0,0 +1 @@
+import{a as e,c as t,d as o}from"./chunk-MZE3O5EH.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?.()},L=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,$))}},P=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))}L(e+60),P(S)?.removeAttribute("data-active"),S=e;let n=P(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)}L(60),M(0,!1,e)},j=new AbortController,{signal:R}=j,D=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function O(e=!1){n?.close===O&&(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:O};let B=e=>{let t=A[e]?.token;t&&(O(!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 O();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)O(!0);else{if("Tab"===o)return O();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)&&O()},{capture:!0,signal:R});let U=e=>{e.target===b?b.scrollTop+b.clientHeight>b.scrollHeight-200&&L(C+60):e.target instanceof Node&&k.contains(e.target)||O()};addEventListener("scroll",U,{capture:!0,signal:R}),m.addEventListener("scroll",U,{capture:!0,signal:R}),addEventListener("resize",()=>O(),{signal:R}),o(p,()=>O(),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 F=p.closest(".design-field")??p.parentElement;F.append(k),p.setAttribute("aria-expanded","true"),p.setAttribute("aria-controls",u);let I=F.getBoundingClientRect(),K=t(F),q=(k.offsetParent??F).getBoundingClientRect(),Y=s(K.right-K.left-8,120,340),Z=K.bottom-I.bottom-8,G=I.top-K.top-8,J=Z<240&&G>Z,Q=Math.min(320,Math.max(J?G:Z,120));if(k.style.width=`${Y}px`,k.style.maxHeight=`${Q}px`,k.style.left=s(I.left,K.left+4,K.right-Y-4)-q.left+"px",k.style.top=J?"":I.bottom+4-q.top+"px",k.style.bottom=J?q.bottom-I.top+4+"px":"",k.toggleAttribute("data-up",J),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,L(r),b.scrollTop=o,M(t,!1,!1)},()=>{}),()=>O()}export{c as isTokenPickerOpen,m as openTokenPicker,f as toggleTokenPicker,i as tokenLabel};

package/dist/token-picker.d.ts

@@ -15,6 +15,8 @@ export interface TokenPickerOptions {
     current?: string;
     /** Values per theme option, for split swatches; resolved lazily. */
     themes?: () => Promise<ThemeValues[]> | ThemeValues[] | undefined;
+    /** Transient preview; its undo runs before another preview, cancellation or a commit. */
+    onPreview?(token: DesignToken): () => void;
     onSelect(token: DesignToken): void;
 }
 /** The row's name: `label`, else the last path segment, since the group heading names the rest. */

package/package.json

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