@hazem3500/komo 0.9.36 → 0.9.38

package/dist/setup.js

@@ -1 +1 @@
-import{a as o,c as n}from"./chunk-FACQL6LQ.js";import"./chunk-ILX63XAJ.js";import"./chunk-DH22G2S5.js";import"./chunk-MLH3Z6TW.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-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};

package/dist/token-adapter.d.ts

@@ -1,5 +1,6 @@
 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 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 effectiveTokenUsage(element: Element, property: string, fallback?: TokenUsage): TokenUsage | undefined;
 export declare function customTokenOverride(element: Element, property: string): {
     priority: string;
@@ -9,10 +10,12 @@ export declare function originalTokenStyle(element: Element, property: string):
     value: string;
     priority: string;
     computed: string;
+    absent: boolean;
     restore(): void;
 } | undefined;
 /** The theme state Design mode lists tokens for: each axis's current option. */
 export declare function themeState(design?: DesignSystem): ThemeState;
+export declare function watchThemes(design: DesignSystem | undefined, document: Document, update: () => void, signal: AbortSignal): void;
 /** `list()` runs once per adapter and theme state; a failed call is retried next time. */
 export declare function listTokens(adapter: TokenAdapter, theme?: ThemeState): Promise<DesignToken[]>;
 /** Which token each property of `element` uses; an adapter error reads as "unknown". */
@@ -23,7 +26,7 @@ export declare function tokensFor(tokens: readonly DesignToken[], property: stri
 export declare function closestToken(tokens: readonly DesignToken[], value: string): DesignToken | undefined;
 export declare function tokenName(token: DesignToken): string;
 /** Tooltip text: path, ref, value and states; states are shown, never previewed. */
-export declare function tokenTitle(token: DesignToken): string;
+export declare function tokenTitle(token: DesignToken, value?: string, detail?: string): string;
 /** A subtle marker for a value that doesn't come from a token. */
 export declare function offTokenMarker(): HTMLElement;
 /** "Not from a token · 13px", naming a token with exactly that value when there is one. */
@@ -46,6 +49,8 @@ export declare function resetAllTokenSwaps(): void;
 export declare function swappedProperties(element: Element): string[];
 /** Before takes every swap back; After previews them again in order. */
 export declare function showTokenSwapsBefore(on: boolean): void;
+/** Resolve existing semantic proposals again without recording an edit or changing Before/After. */
+export declare function refreshTokenSwaps(adapter: TokenAdapter, tokens: readonly DesignToken[]): void;
 /**
  * Hook for structured proposals: each net token swap as a `DesignEdit` change.
  * The human-readable section below is derived from the same data.

package/dist/token-picker-QETCH45O.js

@@ -0,0 +1 @@
+import{j as e,m as t}from"./chunk-CIOHAE5J.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 color value; 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");if(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){let e=i("div","komo-tokens__hint","↑↓ preview · Enter apply · Esc cancel");b.append(e)}let $,S,E=()=>new Map(h.map(e=>[e,`${p(e)} ${e.path} ${e.ref??""} ${e.value??""}`.toLowerCase()])),C=E(),L=[],T=[],z=0,P=-1,j=v,M=-1,H=!1,R=()=>{let e=S;S=void 0,M=-1,e?.()},B=e=>{for(;z<Math.min(e,T.length);z++){let{token:e,group:o}=T[z];if(o!==$&&($=o,j=v,o)){j=i("div"),j.setAttribute("role","group");let e=i("small");e.id=`${g}-g${z}`,e.textContent=o,j.setAttribute("aria-labelledby",e.id),j.append(e),v.append(j)}j.append(u(e,`${g}-${z}`,e.path===t.current,L))}},D=e=>v.querySelector(`#${g}-${e}`),N=(e,o=!0,n=!0)=>{if(e<0||e>=T.length)return;if(e!==M&&n){R(),M=e;let o=T[e].token;o.path!==t.current&&(S=t.onPreview?.(o))}B(e+60),D(P)?.removeAttribute("data-active"),P=e;let r=D(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?T[P]?.token.path:void 0,r=v.scrollTop,a=o?z:60;R();let l=_.value.toLowerCase().split(/\s+/).filter(Boolean),s=y?h:w,p=l.length?s.filter(e=>l.every(t=>C.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(T=[...d?[{token:d,group:"Current"}]:[],...[...f].flatMap(([e,t])=>t.map(t=>({token:t,group:e})))],v.replaceChildren(),v.scrollTop=0,z=0,P=-1,$=void 0,_.removeAttribute("aria-activedescendant"),A.setAttribute("aria-pressed",String(y)),!T.length){let e=i("div","komo-tokens__empty",l.length?"No matching tokens":"No tokens");return void v.append(e)}B(a),N(Math.max(0,T.findIndex(e=>e.token.path===n)),!1,e),o&&(v.scrollTop=r)},I=new AbortController,{signal:J}=I,O=!!globalThis.matchMedia?.("(pointer:coarse)")?.matches;function K(e=!1){a?.close===K&&(a=void 0,R(),I.abort(),b.remove(),c.setAttribute("aria-expanded","false"),c.removeAttribute("aria-controls"),e&&c.isConnected&&c.focus({preventScroll:!0}))}a={trigger:c,close:K,refresh(o){if(!o)return H||=M>=0,R();let n=H||M>=0;H=!1,t=o,h=o.tokens,w=e(h,k),C=E(),L=[],A.title=`Show all ${h.length} tokens`,w.length&&w.length<h.length?x.append(A):A.remove(),W(n,!0),re()}};let U=e=>{let o=T[e]?.token;o&&(K(!0),o.path!==t.current&&t.onSelect(o))};_.addEventListener("input",()=>W(!0),{signal:J}),A.addEventListener("click",()=>{y=!y,W(!0),O||_.focus({preventScroll:!0})},{signal:J}),addEventListener("keydown",e=>{if(!c.isConnected)return K();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)K(!0);else{if("Tab"===o)return K();if(t[0]!==_&&t[0]!==c)return;if(n)N(f(P+n,0,T.length-1));else{if("Enter"!==o)return;U(P)}}e.preventDefault(),e.stopImmediatePropagation()}},{capture:!0,signal:J}),addEventListener("pointerdown",e=>{let t=e.composedPath();!t.includes(b)&&!t.includes(c)&&K()},{capture:!0,signal:J});let F=e=>{e.target===v?v.scrollTop+v.clientHeight>v.scrollHeight-200&&B(z+60):e.target instanceof Node&&b.contains(e.target)||K()};addEventListener("scroll",F,{capture:!0,signal:J}),m.addEventListener("scroll",F,{capture:!0,signal:J}),addEventListener("resize",()=>K(),{signal:J}),r(c,()=>K(),J),v.addEventListener("mousedown",e=>e.preventDefault(),{signal:J});let q=e=>{let t=e.target.closest?.("[role=option]");return t?Number(t.id.slice(g.length+1)):-1};v.addEventListener("pointermove",e=>{let t=q(e);t>=0&&N(t,!1)},{signal:J}),b.addEventListener("click",e=>{e.target!==_&&e.preventDefault();let t=q(e);t>=0&&U(t)},{signal:J}),W();let V=c.closest(".design-field")??c.parentElement;V.append(b),c.setAttribute("aria-expanded","true"),c.setAttribute("aria-controls",g);let X=V.getBoundingClientRect(),Y=n(V),G=(b.offsetParent??V).getBoundingClientRect(),Q=f(Y.right-Y.left-8,120,340),Z=Y.bottom-X.bottom-8,ee=X.top-Y.top-8,te=Z<240&&ee>Z,oe=Math.min(320,Math.max(te?ee:Z,120));if(b.style.width=`${Q}px`,b.style.maxHeight=`${oe}px`,b.style.left=f(X.left,Y.left+4,Y.right-Q-4)-G.left+"px",b.style.top=te?"":X.bottom+4-G.top+"px",b.style.bottom=te?G.bottom-X.top+4+"px":"",b.toggleAttribute("data-up",te),t.current){let e=T.findIndex(e=>e.token.path===t.current);e>=0&&N(e,!0,!1)}O||_.focus({preventScroll:!0});let ne=0;function re(){let e=++ne;Promise.resolve(t.themes?.()).then(t=>{!t||t.length<2||a?.close!==K||e!==ne||(L=t,W(M>=0,!0))},()=>{})}return re(),()=>K()}export{h as openTokenPicker,k as refreshTokenPicker,p as tokenLabel};

package/dist/token-picker.d.ts

@@ -21,7 +21,6 @@ export interface TokenPickerOptions {
 }
 /** The row's name: `label`, else the last path segment, since the group heading names the rest. */
 export declare function tokenLabel(token: DesignToken): string;
-export declare function isTokenPickerOpen(trigger: HTMLElement): boolean;
-/** Open the picker for `trigger`, or close it when it is already open there. */
-export declare function toggleTokenPicker(options: TokenPickerOptions): void;
+export declare function refreshTokenPicker(trigger: HTMLElement, options?: TokenPickerOptions): void;
 export declare function openTokenPicker(options: TokenPickerOptions): () => void;
+export declare function openTokenPicker(options: TokenPickerOptions, toggle: boolean): (() => void) | void;

package/package.json

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