@hazem3500/komo 0.9.38 → 0.9.40

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-HHOQUW5B.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-3276ZULN.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-VEY47JTO.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-3276ZULN.js";import"./chunk-WGISPOJV.js";import"./chunk-PLSWBSSX.js";function r(r){return(s={})=>n(o({...r,...s}))}export{r as defineKomo};

package/dist/token-adapter.d.ts

@@ -1,6 +1,7 @@
 import type { DesignEditChange, DesignSystem, DesignToken, ThemeState, TokenAdapter, TokenUsage } from "./design-system.js";
 export declare function rememberTokenUsage(element: Element, property: string, usage: TokenUsage | undefined, adapter: TokenAdapter, tokens: readonly DesignToken[]): TokenUsage | undefined;
 export declare function originalTokenUsage(element: Element | null, property: string): TokenUsage | undefined;
+export declare function refreshTokenBaseline(element: Element, adapter: TokenAdapter, tokens: readonly DesignToken[], restore?: Iterable<string>): void;
 export declare function effectiveTokenUsage(element: Element, property: string, fallback?: TokenUsage): TokenUsage | undefined;
 export declare function customTokenOverride(element: Element, property: string): {
     priority: string;

package/dist/token-picker-RF7E5P72.js

@@ -0,0 +1 @@
+import{k as e,n as t}from"./chunk-RQNYOMUH.js";import{a as o,b as n,c as r}from"./chunk-4KEVPMJJ.js";import"./chunk-WNJLJD4A.js";import"./chunk-RPY7OOOR.js";import{j as i}from"./chunk-PLSWBSSX.js";var a,l=new WeakSet,s=0;function p(e){return e.label||e.path.slice(e.path.lastIndexOf(".")+1)||e.path}function d(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 f=(e,t,o)=>Math.min(o,Math.max(t,e));function c(e){if(!e||/var\(/i.test(e))return!1;let t=i("span").style;return t.color=e,!!t.color}function u(e,o,n,r){let a=i("div");a.id=o,a.setAttribute("role","option"),a.setAttribute("aria-selected",String(n));let l=i("span","komo-tokens__name"),s=i("span","",p(e));l.append(s);let u=i("span","komo-tokens__check");u.setAttribute("aria-hidden","true");let k=i("span","komo-tokens__meta"),h="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??"",m="color"===e.type&&!c(e.value);for(let t of[e.ref,m?`Unresolved value · ${h||"not supplied"}`:h]){if(!t)continue;let e=i("span","",t);k.append(e)}if(a.append(function(e,t){let o=i("span","komo-tokens__pv");o.setAttribute("aria-hidden","true");let n=e=>{let t=i("span",`komo-tokens__${e}`);return 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=i("span");c(e)?t.style.background=e:(t.dataset.unresolved="",t.textContent="?"),o.append(t)}}else if("dimension"===a||"letterSpacing"===a){let t=d(r);if(void 0===t)return o;let i=/radius/.test(`${e.path} ${e.properties?.join(" ")}`),a=n(i?"corner":"dim");i?a.style.borderTopLeftRadius=`${f(t,0,12)}px`:a.style.width=`${f(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=d(r.split(/\s+/).find(e=>/^[\d.]+(px|r?em)(\/|$)/.test(e))?.split("/")[0]??"");e.style.fontSize=`${f(t??13,10,16)}px`,e.style.lineHeight="1"}else"fontWeight"===a?e.style.fontWeight=r:e.style.fontFamily=r}return o}(e,r),l,u,k),e.states?.length){let t=i("span","komo-tokens__states");for(let o of e.states){let e=i("i","",o);t.append(e)}a.append(t)}if(e.description){let t=i("span","komo-tokens__desc",e.description);a.append(t)}let g=r.flatMap(t=>{let o=t.values.get(e.path);return o&&"color"===e.type?[`${t.label} ${o}`]:[]});return a.title=[e.label,t(e,g.length>1?g.join(", "):e.value,m?"Unresolved; no swatch available":"")].filter(Boolean).join(" · "),a.setAttribute("aria-label",a.title),a}function k(e,t){a?.trigger===e&&a.refresh(t)}function h(t,d=!1){if(d&&a?.trigger===t.trigger)return a.close(!0);a?.close();let{trigger:c,property:k}=t,h=t.tokens,m=c.getRootNode();if((m instanceof ShadowRoot||m===document)&&!l.has(m)){l.add(m);let e=i("style");e.textContent=o+".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(e)}let g="komo-tokens-"+ ++s,b=i("div","komo-tokens"),x=i("div","komo-tokens__bar"),_=i("input");_.type="text",_.placeholder="Search tokens",_.autocomplete="off",_.spellcheck=!1,_.setAttribute("role","combobox"),_.setAttribute("aria-expanded","true"),_.setAttribute("aria-controls",g),_.setAttribute("aria-autocomplete","list"),_.setAttribute("aria-label",`Search tokens for ${k}`);let v=i("div");v.id=g,v.setAttribute("role","listbox"),v.setAttribute("aria-label",`Tokens for ${k}`);let w=e(h,k),y=!w.length,A=i("button");A.type="button",A.textContent="Show all",A.title=`Show all ${h.length} tokens`,x.append(_),w.length&&w.length<h.length&&x.append(A),b.append(x,v),t.onPreview&&b.append(i("div","komo-tokens__hint","↑↓ preview · Enter apply · Esc cancel"));let $,S,E=()=>new Map(h.map(e=>[e,`${p(e)} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),L=E(),T=[],z=[],C=0,P=-1,M=v,j=-1,H=!1,R=()=>{let e=S;S=void 0,j=-1,e?.()},N=e=>{for(;C<Math.min(e,z.length);C++){let{token:e,group:o}=z[C];if(o!==$&&($=o,M=v,o)){M=i("div"),M.setAttribute("role","group");let e=i("small");e.id=`${g}-g${C}`,e.textContent=o,M.setAttribute("aria-labelledby",e.id),M.append(e),v.append(M)}M.append(u(e,`${g}-${C}`,e.path===t.current,T))}},B=e=>v.querySelector(`#${g}-${e}`),D=(e,o=!0,n=!0)=>{if(e<0||e>=z.length)return;if(e!==j&&n){R(),j=e;let o=z[e].token;o.path!==t.current&&(S=t.onPreview?.(o))}N(e+60),B(P)?.removeAttribute("data-active"),P=e;let r=B(e);if(r.toggleAttribute("data-active",!0),_.setAttribute("aria-activedescendant",r.id),!o)return;let i=r.offsetTop-(r.parentElement===v?0:r.parentElement.firstElementChild.offsetHeight),a=r.offsetTop+r.offsetHeight;i<v.scrollTop?v.scrollTop=i-4:a>v.scrollTop+v.clientHeight&&(v.scrollTop=a-v.clientHeight+4)},W=(e=!1,o=!1)=>{let n=o?z[P]?.token.path:void 0,r=v.scrollTop,a=o?C:60;R();let l=_.value.toLowerCase().split(/\s+/).filter(Boolean),s=y?h:w,p=l.length?s.filter(e=>l.every(t=>L.get(e).includes(t))):s,d=!l.length&&t.current?p.find(e=>e.path===t.current):void 0,f=new Map([["",[]]]);for(let e of p){if(e===d)continue;let t=e.group??"";f.set(t,[...f.get(t)??[],e])}if(z=[...d?[{token:d,group:"Current"}]:[],...[...f].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],v.replaceChildren(),v.scrollTop=0,C=0,P=-1,$=void 0,_.removeAttribute("aria-activedescendant"),A.setAttribute("aria-pressed",String(y)),!z.length){let e=i("div","komo-tokens__empty",l.length?"No matching tokens":"No tokens");return void v.append(e)}N(a),D(Math.max(0,z.findIndex(e=>e.token.path===n)),!1,e),o&&(v.scrollTop=r)},O=new AbortController,{signal:U}=O,I=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function J(e=!1){a?.close===J&&(a=void 0,R(),O.abort(),b.remove(),c.setAttribute("aria-expanded","false"),c.removeAttribute("aria-controls"),e&&c.isConnected&&c.focus({preventScroll:!0}))}a={trigger:c,close:J,refresh(o){if(!o)return H||=j>=0,R();let n=H||j>=0;H=!1,t=o,h=o.tokens,w=e(h,k),L=E(),T=[],A.title=`Show all ${h.length} tokens`,w.length&&w.length<h.length?x.append(A):A.remove(),W(n,!0),re()}};let K=e=>{let o=z[e]?.token;o&&(J(!0),o.path!==t.current&&t.onSelect(o))};_.addEventListener("input",()=>W(!0),{signal:U}),A.addEventListener("click",()=>{y=!y,W(!0),I||_.focus({preventScroll:!0})},{signal:U}),addEventListener("keydown",e=>{if(!c.isConnected)return J();let t=e.composedPath();if(!t.includes(b)&&!t.includes(c))return;let{key:o}=e,n={ArrowDown:1,ArrowUp:-1,PageDown:8,PageUp:-8}[o];if(!(e.ctrlKey||e.metaKey||e.altKey)){if("Escape"===o)J(!0);else{if("Tab"===o)return J();if(t[0]!==_&&t[0]!==c)return;if(n)D(f(P+n,0,z.length-1));else{if("Enter"!==o)return;K(P)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:U}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(b)&&!t.includes(c)&&J()},{capture:!0,signal:U});let F=e=>{e.target===v?v.scrollTop+v.clientHeight>v.scrollHeight-200&&N(C+60):e.target instanceof Node&&b.contains(e.target)||J()};addEventListener("scroll",F,{capture:!0,signal:U}),m.addEventListener("scroll",F,{capture:!0,signal:U}),addEventListener("resize",()=>J(),{signal:U}),r(c,()=>J(),U),v.addEventListener("mousedown",e=>e.preventDefault(),{signal:U});let Y=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(g.length+1)):-1};v.addEventListener("pointermove",e=>{let t=Y(e);t>=0&&D(t,!1)},{signal:U}),b.addEventListener("click",e=>{e.target!==_&&e.preventDefault();let t=Y(e);t>=0&&K(t)},{signal:U}),W();let q=c.closest(".design-field")??c.parentElement;q.append(b),c.setAttribute("aria-expanded","true"),c.setAttribute("aria-controls",g);let Q=q.getBoundingClientRect(),V=n(q),X=(b.offsetParent??q).getBoundingClientRect(),G=f(V.right-V.left-8,120,340),Z=V.bottom-Q.bottom-8,ee=Q.top-V.top-8,te=Z<240&&ee>Z,oe=Math.min(320,Math.max(te?ee:Z,120));if(b.style.width=`${G}px`,b.style.maxHeight=`${oe}px`,b.style.left=f(Q.left,V.left+4,V.right-G-4)-X.left+"px",b.style.top=te?"":Q.bottom+4-X.top+"px",b.style.bottom=te?X.bottom-Q.top+4+"px":"",b.toggleAttribute("data-up",te),t.current){let e=z.findIndex(e=>e.token.path===t.current);e>=0&&D(e,!0,!1)}I||_.focus({preventScroll:!0});let ne=0;function re(){let e=++ne;Promise.resolve(t.themes?.()).then(t=>{!t||t.length<2||a?.close!==J||e!==ne||(T=t,W(j>=0,!0))},()=>{})}return re(),()=>J()}export{h as openTokenPicker,k as refreshTokenPicker,p as tokenLabel};

package/package.json

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