@nerdev/skillset 0.2.1

package/skills/ui/impeccable/scripts/modern-screenshot.umd.js

@@ -0,0 +1,14 @@
+(function(y,v){typeof exports=="object"&&typeof module!="undefined"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(y=typeof globalThis!="undefined"?globalThis:y||self,v(y.modernScreenshot={}))})(this,function(y){"use strict";var rr=Object.defineProperty,nr=Object.defineProperties;var or=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var xe=Object.prototype.hasOwnProperty,Me=Object.prototype.propertyIsEnumerable;var Oe=Math.pow,Le=(y,v,N)=>v in y?rr(y,v,{enumerable:!0,configurable:!0,writable:!0,value:N}):y[v]=N,D=(y,v)=>{for(var N in v||(v={}))xe.call(v,N)&&Le(y,N,v[N]);if(Z)for(var N of Z(v))Me.call(v,N)&&Le(y,N,v[N]);return y},M=(y,v)=>nr(y,or(v));var je=(y,v)=>{var N={};for(var R in y)xe.call(y,R)&&v.indexOf(R)<0&&(N[R]=y[R]);if(y!=null&&Z)for(var R of Z(y))v.indexOf(R)<0&&Me.call(y,R)&&(N[R]=y[R]);return N};var C=(y,v,N)=>new Promise((R,O)=>{var X=P=>{try{q(N.next(P))}catch(W){O(W)}},j=P=>{try{q(N.throw(P))}catch(W){O(W)}},q=P=>P.done?R(P.value):Promise.resolve(P.value).then(X,j);q((N=N.apply(y,v)).next())});var Be;function v(e,t){return e[13]=1,e[14]=t>>8,e[15]=t&255,e[16]=t>>8,e[17]=t&255,e}const N=112,R=72,O=89,X=115;let j;function q(){const e=new Int32Array(256);for(let t=0;t<256;t++){let r=t;for(let n=0;n<8;n++)r=r&1?3988292384^r>>>1:r>>>1;e[t]=r}return e}function P(e){let t=-1;j||(j=q());for(let r=0;r<e.length;r++)t=j[(t^e[r])&255]^t>>>8;return t^-1}function W(e){const t=e.length-1;for(let r=t;r>=4;r--)if(e[r-4]===9&&e[r-3]===N&&e[r-2]===R&&e[r-1]===O&&e[r]===X)return r-3;return 0}function ae(e,t,r=!1){const n=new Uint8Array(13);t*=39.3701,n[0]=N,n[1]=R,n[2]=O,n[3]=X,n[4]=t>>>24,n[5]=t>>>16,n[6]=t>>>8,n[7]=t&255,n[8]=n[4],n[9]=n[5],n[10]=n[6],n[11]=n[7],n[12]=1;const i=P(n),a=new Uint8Array(4);if(a[0]=i>>>24,a[1]=i>>>16,a[2]=i>>>8,a[3]=i&255,r){const s=W(e);return e.set(n,s),e.set(a,s+13),e}else{const s=new Uint8Array(4);s[0]=0,s[1]=0,s[2]=0,s[3]=9;const o=new Uint8Array(54);return o.set(e,0),o.set(s,33),o.set(n,37),o.set(a,50),o}}const qe="AAlwSFlz",We="AAAJcEhZ",He="AAAACXBI";function Ve(e){let t=e.indexOf(qe);return t===-1&&(t=e.indexOf(We)),t===-1&&(t=e.indexOf(He)),t}const se="[modern-screenshot]",U=typeof window!="undefined",ze=U&&"Worker"in window,ie=U&&"atob"in window,Xe=U&&"btoa"in window,ee=U?(Be=window.navigator)==null?void 0:Be.userAgent:"",le=ee.includes("Chrome"),G=ee.includes("AppleWebKit")&&!le,te=ee.includes("Firefox"),Ge=e=>e&&"__CONTEXT__"in e,Ye=e=>e.constructor.name==="CSSFontFaceRule",Je=e=>e.constructor.name==="CSSImportRule",Ke=e=>e.constructor.name==="CSSLayerBlockRule",I=e=>e.nodeType===1,H=e=>typeof e.className=="object",ce=e=>e.tagName==="image",Qe=e=>e.tagName==="use",V=e=>I(e)&&typeof e.style!="undefined"&&!H(e),Ze=e=>e.nodeType===8,et=e=>e.nodeType===3,$=e=>e.tagName==="IMG",Y=e=>e.tagName==="VIDEO",tt=e=>e.tagName==="CANVAS",rt=e=>e.tagName==="TEXTAREA",nt=e=>e.tagName==="INPUT",ot=e=>e.tagName==="STYLE",at=e=>e.tagName==="SCRIPT",st=e=>e.tagName==="SELECT",it=e=>e.tagName==="SLOT",lt=e=>e.tagName==="IFRAME",ct=(...e)=>console.warn(se,...e);function ut(e){var r;const t=(r=e==null?void 0:e.createElement)==null?void 0:r.call(e,"canvas");return t&&(t.height=t.width=1),!!t&&"toDataURL"in t&&!!t.toDataURL("image/webp").includes("image/webp")}const re=e=>e.startsWith("data:");function ue(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(U&&e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i)||!U)return e;const r=J().implementation.createHTMLDocument(),n=r.createElement("base"),i=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(i),t&&(n.href=t),i.href=e,i.href}function J(e){var t;return(t=e&&I(e)?e==null?void 0:e.ownerDocument:e)!=null?t:window.document}const K="http://www.w3.org/2000/svg";function fe(e,t,r){const n=J(r).createElementNS(K,"svg");return n.setAttributeNS(null,"width",e.toString()),n.setAttributeNS(null,"height",t.toString()),n.setAttributeNS(null,"viewBox",`0 0 ${e} ${t}`),n}function de(e,t){let r=new XMLSerializer().serializeToString(e);return t&&(r=r.replace(/[\u0000-\u0008\v\f\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/gu,"")),`data:image/svg+xml;charset=utf-8,${encodeURIComponent(r)}`}function ft(e,t="image/png",r=1){return C(this,null,function*(){try{return yield new Promise((n,i)=>{e.toBlob(a=>{a?n(a):i(new Error("Blob is null"))},t,r)})}catch(n){if(ie)return dt(e.toDataURL(t,r));throw n}})}function dt(e){var o,c;const[t,r]=e.split(","),n=(c=(o=t.match(/data:(.+);/))==null?void 0:o[1])!=null?c:void 0,i=window.atob(r),a=i.length,s=new Uint8Array(a);for(let u=0;u<a;u+=1)s[u]=i.charCodeAt(u);return new Blob([s],{type:n})}function ge(e,t){return new Promise((r,n)=>{const i=new FileReader;i.onload=()=>r(i.result),i.onerror=()=>n(i.error),i.onabort=()=>n(new Error(`Failed read blob to ${t}`)),t==="dataUrl"?i.readAsDataURL(e):t==="arrayBuffer"&&i.readAsArrayBuffer(e)})}const gt=e=>ge(e,"dataUrl"),mt=e=>ge(e,"arrayBuffer");function _(e,t){const r=J(t).createElement("img");return r.decoding="sync",r.loading="eager",r.src=e,r}function L(e,t){return new Promise(r=>{const{timeout:n,ownerDocument:i,onError:a,onWarn:s}=t!=null?t:{},o=typeof e=="string"?_(e,J(i)):e;let c=null,u=null;function l(){r(o),c&&clearTimeout(c),u==null||u()}if(n&&(c=setTimeout(l,n)),Y(o)){const d=o.currentSrc||o.src;if(!d)return o.poster?L(o.poster,t).then(r):l();if(o.readyState>=2)return l();const m=l,f=h=>{s==null||s("Failed video load",d,h),a==null||a(h),l()};u=()=>{o.removeEventListener("loadeddata",m),o.removeEventListener("error",f)},o.addEventListener("loadeddata",m,{once:!0}),o.addEventListener("error",f,{once:!0})}else{const d=ce(o)?o.href.baseVal:o.currentSrc||o.src;if(!d)return l();const m=()=>C(this,null,function*(){if($(o)&&"decode"in o)try{yield o.decode()}catch(h){s==null||s("Failed to decode image, trying to render anyway",o.dataset.originalSrc||d,h)}l()}),f=h=>{s==null||s("Failed image load",o.dataset.originalSrc||d,h),l()};if($(o)&&o.complete)return m();u=()=>{o.removeEventListener("load",m),o.removeEventListener("error",f)},o.addEventListener("load",m,{once:!0}),o.addEventListener("error",f,{once:!0})}})}function me(e,t){return C(this,null,function*(){V(e)&&($(e)||Y(e)?yield L(e,t):yield Promise.all(["img","video"].flatMap(r=>Array.from(e.querySelectorAll(r)).map(n=>L(n,t)))))})}const he=function(){let t=0;const r=()=>`0000${(Math.random()*Oe(36,4)<<0).toString(36)}`.slice(-4);return()=>(t+=1,`u${r()}${t}`)}();function we(e){return e==null?void 0:e.split(",").map(t=>t.trim().replace(/"|'/g,"").toLowerCase()).filter(Boolean)}let pe=0;function ht(e){const t=`${se}[#${pe}]`;return pe++,{time:r=>e&&console.time(`${t} ${r}`),timeEnd:r=>e&&console.timeEnd(`${t} ${r}`),warn:(...r)=>e&&ct(...r)}}function wt(e){return{cache:e?"no-cache":"force-cache"}}function k(e,t){return C(this,null,function*(){return Ge(e)?e:ye(e,M(D({},t),{autoDestruct:!0}))})}function ye(e,t){return C(this,null,function*(){var f,h,g,p,E;const{scale:r=1,workerUrl:n,workerNumber:i=1}=t||{},a=!!(t!=null&&t.debug),s=(f=t==null?void 0:t.features)!=null?f:!0,o=(h=e.ownerDocument)!=null?h:U?window.document:void 0,c=(p=(g=e.ownerDocument)==null?void 0:g.defaultView)!=null?p:U?window:void 0,u=new Map,l=M(D({width:0,height:0,quality:1,type:"image/png",scale:r,backgroundColor:null,style:null,filter:null,maximumCanvasSize:0,timeout:3e4,progress:null,debug:a,fetch:D({requestInit:wt((E=t==null?void 0:t.fetch)==null?void 0:E.bypassingCache),placeholderImage:"data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",bypassingCache:!1},t==null?void 0:t.fetch),fetchFn:null,font:{},drawImageInterval:100,workerUrl:null,workerNumber:i,onCloneEachNode:null,onCloneNode:null,onEmbedNode:null,onCreateForeignObjectSvg:null,includeStyleProperties:null,autoDestruct:!1},t),{__CONTEXT__:!0,log:ht(a),node:e,ownerDocument:o,ownerWindow:c,dpi:r===1?null:96*r,svgStyleElement:be(o),svgDefsElement:o==null?void 0:o.createElementNS(K,"defs"),svgStyles:new Map,defaultComputedStyles:new Map,workers:[...Array.from({length:ze&&n&&i?i:0})].map(()=>{try{const b=new Worker(n);return b.onmessage=w=>C(this,null,function*(){var A,F,B,$e;const{url:S,result:T}=w.data;T?(F=(A=u.get(S))==null?void 0:A.resolve)==null||F.call(A,T):($e=(B=u.get(S))==null?void 0:B.reject)==null||$e.call(B,new Error(`Error receiving message from worker: ${S}`))}),b.onmessageerror=w=>{var T,A;const{url:S}=w.data;(A=(T=u.get(S))==null?void 0:T.reject)==null||A.call(T,new Error(`Error receiving message from worker: ${S}`))},b}catch(b){return l.log.warn("Failed to new Worker",b),null}}).filter(Boolean),fontFamilies:new Map,fontCssTexts:new Map,acceptOfImage:`${[ut(o)&&"image/webp","image/svg+xml","image/*","*/*"].filter(Boolean).join(",")};q=0.8`,requests:u,drawImageCount:0,tasks:[],features:s,isEnable:b=>{var w,S;return b==="restoreScrollPosition"?typeof s=="boolean"?!1:(w=s[b])!=null?w:!1:typeof s=="boolean"?s:(S=s[b])!=null?S:!0},shadowRoots:[]});l.log.time("wait until load"),yield me(e,{timeout:l.timeout,onWarn:l.log.warn}),l.log.timeEnd("wait until load");const{width:d,height:m}=pt(e,l);return l.width=d,l.height=m,l})}function be(e){if(!e)return;const t=e.createElement("style"),r=t.ownerDocument.createTextNode(`
+.______background-clip--text {
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+`);return t.appendChild(r),t}function pt(e,t){let{width:r,height:n}=t;if(I(e)&&(!r||!n)){const i=e.getBoundingClientRect();r=r||i.width||Number(e.getAttribute("width"))||0,n=n||i.height||Number(e.getAttribute("height"))||0}return{width:r,height:n}}function yt(e,t){return C(this,null,function*(){const{log:r,timeout:n,drawImageCount:i,drawImageInterval:a}=t;r.time("image to canvas");const s=yield L(e,{timeout:n,onWarn:t.log.warn}),{canvas:o,context2d:c}=bt(e.ownerDocument,t),u=()=>{try{c==null||c.drawImage(s,0,0,o.width,o.height)}catch(l){t.log.warn("Failed to drawImage",l)}};if(u(),t.isEnable("fixSvgXmlDecode"))for(let l=0;l<i;l++)yield new Promise(d=>{setTimeout(()=>{c==null||c.clearRect(0,0,o.width,o.height),u(),d()},l+a)});return t.drawImageCount=0,r.timeEnd("image to canvas"),o})}function bt(e,t){const{width:r,height:n,scale:i,backgroundColor:a,maximumCanvasSize:s}=t,o=e.createElement("canvas");o.width=Math.floor(r*i),o.height=Math.floor(n*i),o.style.width=`${r}px`,o.style.height=`${n}px`,s&&(o.width>s||o.height>s)&&(o.width>s&&o.height>s?o.width>o.height?(o.height*=s/o.width,o.width=s):(o.width*=s/o.height,o.height=s):o.width>s?(o.height*=s/o.width,o.width=s):(o.width*=s/o.height,o.height=s));const c=o.getContext("2d");return c&&a&&(c.fillStyle=a,c.fillRect(0,0,o.width,o.height)),{canvas:o,context2d:c}}function Se(e,t){if(e.ownerDocument)try{const a=e.toDataURL();if(a!=="data:,")return _(a,e.ownerDocument)}catch(a){t.log.warn("Failed to clone canvas",a)}const r=e.cloneNode(!1),n=e.getContext("2d"),i=r.getContext("2d");try{return n&&i&&i.putImageData(n.getImageData(0,0,e.width,e.height),0,0),r}catch(a){t.log.warn("Failed to clone canvas",a)}return r}function St(e,t){var r;try{if((r=e==null?void 0:e.contentDocument)!=null&&r.documentElement)return ne(e.contentDocument.documentElement,t)}catch(n){t.log.warn("Failed to clone iframe",n)}return e.cloneNode(!1)}function Et(e){const t=e.cloneNode(!1);return e.currentSrc&&e.currentSrc!==e.src&&(t.src=e.currentSrc,t.srcset=""),t.loading==="lazy"&&(t.loading="eager"),t}function Ct(e,t){return C(this,null,function*(){if(e.ownerDocument&&!e.currentSrc&&e.poster)return _(e.poster,e.ownerDocument);const r=e.cloneNode(!1);r.crossOrigin="anonymous",e.currentSrc&&e.currentSrc!==e.src&&(r.src=e.currentSrc);const n=r.ownerDocument;if(n){let i=!0;if(yield L(r,{onError:()=>i=!1,onWarn:t.log.warn}),!i)return e.poster?_(e.poster,e.ownerDocument):r;r.currentTime=e.currentTime,yield new Promise(s=>{r.addEventListener("seeked",s,{once:!0})});const a=n.createElement("canvas");a.width=e.offsetWidth,a.height=e.offsetHeight;try{const s=a.getContext("2d");s&&s.drawImage(r,0,0,a.width,a.height)}catch(s){return t.log.warn("Failed to clone video",s),e.poster?_(e.poster,e.ownerDocument):r}return Se(a,t)}return r})}function Tt(e,t){return tt(e)?Se(e,t):lt(e)?St(e,t):$(e)?Et(e):Y(e)?Ct(e,t):e.cloneNode(!1)}function vt(e){let t=e.sandbox;if(!t){const{ownerDocument:r}=e;try{r&&(t=r.createElement("iframe"),t.id=`__SANDBOX__${he()}`,t.width="0",t.height="0",t.style.visibility="hidden",t.style.position="fixed",r.body.appendChild(t),t.srcdoc='<!DOCTYPE html><meta charset="UTF-8"><title></title><body>',e.sandbox=t)}catch(n){e.log.warn("Failed to getSandBox",n)}}return t}const At=["width","height","-webkit-text-fill-color"],Nt=["stroke","fill"];function Ee(e,t,r){const{defaultComputedStyles:n}=r,i=e.nodeName.toLowerCase(),a=H(e)&&i!=="svg",s=a?Nt.map(g=>[g,e.getAttribute(g)]).filter(([,g])=>g!==null):[],o=[a&&"svg",i,s.map((g,p)=>`${g}=${p}`).join(","),t].filter(Boolean).join(":");if(n.has(o))return n.get(o);const c=vt(r),u=c==null?void 0:c.contentWindow;if(!u)return new Map;const l=u==null?void 0:u.document;let d,m;a?(d=l.createElementNS(K,"svg"),m=d.ownerDocument.createElementNS(d.namespaceURI,i),s.forEach(([g,p])=>{m.setAttributeNS(null,g,p)}),d.appendChild(m)):d=m=l.createElement(i),m.textContent=" ",l.body.appendChild(d);const f=u.getComputedStyle(m,t),h=new Map;for(let g=f.length,p=0;p<g;p++){const E=f.item(p);At.includes(E)||h.set(E,f.getPropertyValue(E))}return l.body.removeChild(d),n.set(o,h),h}function Ce(e,t,r){var o;const n=new Map,i=[],a=new Map;if(r)for(const c of r)s(c);else for(let c=e.length,u=0;u<c;u++){const l=e.item(u);s(l)}for(let c=i.length,u=0;u<c;u++)(o=a.get(i[u]))==null||o.forEach((l,d)=>n.set(d,l));function s(c){const u=e.getPropertyValue(c),l=e.getPropertyPriority(c),d=c.lastIndexOf("-"),m=d>-1?c.substring(0,d):void 0;if(m){let f=a.get(m);f||(f=new Map,a.set(m,f)),f.set(c,[u,l])}t.get(c)===u&&!l||(m?i.push(m):n.set(c,[u,l]))}return n}function Rt(e,t,r,n){var d,m,f,h;const{ownerWindow:i,includeStyleProperties:a,currentParentNodeStyle:s}=n,o=t.style,c=i.getComputedStyle(e),u=Ee(e,null,n);s==null||s.forEach((g,p)=>{u.delete(p)});const l=Ce(c,u,a);l.delete("transition-property"),l.delete("all"),l.delete("d"),l.delete("content"),r&&(l.delete("position"),l.delete("margin-top"),l.delete("margin-right"),l.delete("margin-bottom"),l.delete("margin-left"),l.delete("margin-block-start"),l.delete("margin-block-end"),l.delete("margin-inline-start"),l.delete("margin-inline-end"),l.set("box-sizing",["border-box",""])),((d=l.get("background-clip"))==null?void 0:d[0])==="text"&&t.classList.add("______background-clip--text"),le&&(l.has("font-kerning")||l.set("font-kerning",["normal",""]),(((m=l.get("overflow-x"))==null?void 0:m[0])==="hidden"||((f=l.get("overflow-y"))==null?void 0:f[0])==="hidden")&&((h=l.get("text-overflow"))==null?void 0:h[0])==="ellipsis"&&e.scrollWidth===e.clientWidth&&l.set("text-overflow",["clip",""]));for(let g=o.length,p=0;p<g;p++)o.removeProperty(o.item(p));return l.forEach(([g,p],E)=>{o.setProperty(E,g,p)}),l}function It(e,t){(rt(e)||nt(e)||st(e))&&t.setAttribute("value",e.value)}const kt=["::before","::after"],Dt=["::-webkit-scrollbar","::-webkit-scrollbar-button","::-webkit-scrollbar-thumb","::-webkit-scrollbar-track","::-webkit-scrollbar-track-piece","::-webkit-scrollbar-corner","::-webkit-resizer"];function Pt(e,t,r,n,i){const{ownerWindow:a,svgStyleElement:s,svgStyles:o,currentNodeStyle:c}=n;if(!s||!a)return;function u(l){var w;const d=a.getComputedStyle(e,l);let m=d.getPropertyValue("content");if(!m||m==="none")return;i==null||i(m),m=m.replace(/(')|(")|(counter\(.+\))/g,"");const f=[he()],h=Ee(e,l,n);c==null||c.forEach((S,T)=>{h.delete(T)});const g=Ce(d,h,n.includeStyleProperties);g.delete("content"),g.delete("-webkit-locale"),((w=g.get("background-clip"))==null?void 0:w[0])==="text"&&t.classList.add("______background-clip--text");const p=[`content: '${m}';`];if(g.forEach(([S,T],A)=>{p.push(`${A}: ${S}${T?" !important":""};`)}),p.length===1)return;try{t.className=[t.className,...f].join(" ")}catch(S){n.log.warn("Failed to copyPseudoClass",S);return}const E=p.join(`
+  `);let b=o.get(E);b||(b=[],o.set(E,b)),b.push(`.${f[0]}${l}`)}kt.forEach(u),r&&Dt.forEach(u)}const Te=new Set(["symbol"]);function ve(e,t,r,n,i){return C(this,null,function*(){if(I(r)&&(ot(r)||at(r))||n.filter&&!n.filter(r))return;Te.has(t.nodeName)||Te.has(r.nodeName)?n.currentParentNodeStyle=void 0:n.currentParentNodeStyle=n.currentNodeStyle;const a=yield ne(r,n,!1,i);n.isEnable("restoreScrollPosition")&&Ut(e,a),t.appendChild(a)})}function Ae(e,t,r,n){return C(this,null,function*(){var a;let i=e.firstChild;I(e)&&e.shadowRoot&&(i=(a=e.shadowRoot)==null?void 0:a.firstChild,r.shadowRoots.push(e.shadowRoot));for(let s=i;s;s=s.nextSibling)if(!Ze(s))if(I(s)&&it(s)&&typeof s.assignedNodes=="function"){const o=s.assignedNodes();for(let c=0;c<o.length;c++)yield ve(e,t,o[c],r,n)}else yield ve(e,t,s,r,n)})}function Ut(e,t){if(!V(e)||!V(t))return;const{scrollTop:r,scrollLeft:n}=e;if(!r&&!n)return;const{transform:i}=t.style,a=new DOMMatrix(i),{a:s,b:o,c,d:u}=a;a.a=1,a.b=0,a.c=0,a.d=1,a.translateSelf(-n,-r),a.a=s,a.b=o,a.c=c,a.d=u,t.style.transform=a.toString()}function _t(e,t){const{backgroundColor:r,width:n,height:i,style:a}=t,s=e.style;if(r&&s.setProperty("background-color",r,"important"),n&&s.setProperty("width",`${n}px`,"important"),i&&s.setProperty("height",`${i}px`,"important"),a)for(const o in a)s[o]=a[o]}const Ft=/^[\w-:]+$/;function ne(e,t,r=!1,n){return C(this,null,function*(){var u,l,d,m;const{ownerDocument:i,ownerWindow:a,fontFamilies:s,onCloneEachNode:o}=t;if(i&&et(e))return n&&/\S/.test(e.data)&&n(e.data),i.createTextNode(e.data);if(i&&a&&I(e)&&(V(e)||H(e))){const f=yield Tt(e,t);if(t.isEnable("removeAbnormalAttributes")){const w=f.getAttributeNames();for(let S=w.length,T=0;T<S;T++){const A=w[T];Ft.test(A)||f.removeAttribute(A)}}const h=t.currentNodeStyle=Rt(e,f,r,t);r&&_t(f,t);let g=!1;if(t.isEnable("copyScrollbar")){const w=[(u=h.get("overflow-x"))==null?void 0:u[0],(l=h.get("overflow-y"))==null?void 0:l[0]];g=w.includes("scroll")||(w.includes("auto")||w.includes("overlay"))&&(e.scrollHeight>e.clientHeight||e.scrollWidth>e.clientWidth)}const p=(d=h.get("text-transform"))==null?void 0:d[0],E=we((m=h.get("font-family"))==null?void 0:m[0]),b=E?w=>{p==="uppercase"?w=w.toUpperCase():p==="lowercase"?w=w.toLowerCase():p==="capitalize"&&(w=w[0].toUpperCase()+w.substring(1)),E.forEach(S=>{let T=s.get(S);T||s.set(S,T=new Set),w.split("").forEach(A=>T.add(A))})}:void 0;return Pt(e,f,g,t,b),It(e,f),Y(e)||(yield Ae(e,f,t,b)),yield o==null?void 0:o(f),f}const c=e.cloneNode(!1);return yield Ae(e,c,t),yield o==null?void 0:o(c),c})}function Ne(e){if(e.ownerDocument=void 0,e.ownerWindow=void 0,e.svgStyleElement=void 0,e.svgDefsElement=void 0,e.svgStyles.clear(),e.defaultComputedStyles.clear(),e.sandbox){try{e.sandbox.remove()}catch(t){e.log.warn("Failed to destroyContext",t)}e.sandbox=void 0}e.workers=[],e.fontFamilies.clear(),e.fontCssTexts.clear(),e.requests.clear(),e.tasks=[],e.shadowRoots=[]}function Bt(e){const o=e,{url:t,timeout:r,responseType:n}=o,i=je(o,["url","timeout","responseType"]),a=new AbortController,s=r?setTimeout(()=>a.abort(),r):void 0;return fetch(t,D({signal:a.signal},i)).then(c=>{if(!c.ok)throw new Error("Failed fetch, not 2xx response",{cause:c});switch(n){case"arrayBuffer":return c.arrayBuffer();case"dataUrl":return c.blob().then(gt);case"text":default:return c.text()}}).finally(()=>clearTimeout(s))}function z(e,t){const{url:r,requestType:n="text",responseType:i="text",imageDom:a}=t;let s=r;const{timeout:o,acceptOfImage:c,requests:u,fetchFn:l,fetch:{requestInit:d,bypassingCache:m,placeholderImage:f},font:h,workers:g,fontFamilies:p}=e;n==="image"&&(G||te)&&e.drawImageCount++;let E=u.get(r);if(!E){m&&m instanceof RegExp&&m.test(s)&&(s+=(/\?/.test(s)?"&":"?")+new Date().getTime());const b=n.startsWith("font")&&h&&h.minify,w=new Set;b&&n.split(";")[1].split(",").forEach(F=>{p.has(F)&&p.get(F).forEach(B=>w.add(B))});const S=b&&w.size,T=D({url:s,timeout:o,responseType:S?"arrayBuffer":i,headers:n==="image"?{accept:c}:void 0},d);E={type:n,resolve:void 0,reject:void 0,response:null},E.response=C(this,null,function*(){if(l&&n==="image"){const A=yield l(r);if(A)return A}return!G&&r.startsWith("http")&&g.length?new Promise((A,F)=>{g[u.size&g.length-1].postMessage(D({rawUrl:r},T)),E.resolve=A,E.reject=F}):Bt(T)}).catch(A=>{if(u.delete(r),n==="image"&&f)return e.log.warn("Failed to fetch image base64, trying to use placeholder image",s),typeof f=="string"?f:f(a);throw A}),u.set(r,E)}return E.response}function Re(e,t,r,n){return C(this,null,function*(){if(!Ie(e))return e;for(const[i,a]of $t(e,t))try{const s=yield z(r,{url:a,requestType:n?"image":"text",responseType:"dataUrl"});e=e.replace(Lt(i),`$1${s}$3`)}catch(s){r.log.warn("Failed to fetch css data url",i,s)}return e})}function Ie(e){return/url\((['"]?)([^'"]+?)\1\)/.test(e)}const ke=/url\((['"]?)([^'"]+?)\1\)/g;function $t(e,t){const r=[];return e.replace(ke,(n,i,a)=>(r.push([a,ue(a,t)]),n)),r.filter(([n])=>!re(n))}function Lt(e){const t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}const xt=["background-image","border-image-source","-webkit-border-image","-webkit-mask-image","list-style-image"];function Mt(e,t){return xt.map(r=>{const n=e.getPropertyValue(r);return!n||n==="none"?null:((G||te)&&t.drawImageCount++,Re(n,null,t,!0).then(i=>{!i||n===i||e.setProperty(r,i,e.getPropertyPriority(r))}))}).filter(Boolean)}function Ot(e,t){if($(e)){const r=e.currentSrc||e.src;if(!re(r))return[z(t,{url:r,imageDom:e,requestType:"image",responseType:"dataUrl"}).then(n=>{n&&(e.srcset="",e.dataset.originalSrc=r,e.src=n||"")})];(G||te)&&t.drawImageCount++}else if(H(e)&&!re(e.href.baseVal)){const r=e.href.baseVal;return[z(t,{url:r,imageDom:e,requestType:"image",responseType:"dataUrl"}).then(n=>{n&&(e.dataset.originalSrc=r,e.href.baseVal=n||"")})]}return[]}function jt(e,t){var o;const{ownerDocument:r,svgDefsElement:n}=t,i=(o=e.getAttribute("href"))!=null?o:e.getAttribute("xlink:href");if(!i)return[];const[a,s]=i.split("#");if(s){const c=`#${s}`,u=t.shadowRoots.reduce((l,d)=>l!=null?l:d.querySelector(`svg ${c}`),r==null?void 0:r.querySelector(`svg ${c}`));if(a&&e.setAttribute("href",c),n!=null&&n.querySelector(c))return[];if(u)return n==null||n.appendChild(u.cloneNode(!0)),[];if(a)return[z(t,{url:a,responseType:"text"}).then(l=>{n==null||n.insertAdjacentHTML("beforeend",l)})]}return[]}function De(e,t){const{tasks:r}=t;I(e)&&(($(e)||ce(e))&&r.push(...Ot(e,t)),Qe(e)&&r.push(...jt(e,t))),V(e)&&r.push(...Mt(e.style,t)),e.childNodes.forEach(n=>{De(n,t)})}function qt(e,t){return C(this,null,function*(){const{ownerDocument:r,svgStyleElement:n,fontFamilies:i,fontCssTexts:a,tasks:s,font:o}=t;if(!(!r||!n||!i.size))if(o&&o.cssText){const c=Ue(o.cssText,t);n.appendChild(r.createTextNode(`${c}
+`))}else{const c=Array.from(r.styleSheets).filter(f=>{try{return"cssRules"in f&&!!f.cssRules.length}catch(h){return t.log.warn(`Error while reading CSS rules from ${f.href}`,h),!1}}),u=r.implementation.createHTMLDocument(""),l=u.createElement("style");u.head.appendChild(l);const d=l.sheet;yield Promise.all(c.flatMap(f=>Array.from(f.cssRules).map(h=>C(this,null,function*(){if(Je(h)){const g=h.href;let p="";try{p=yield z(t,{url:g,requestType:"text",responseType:"text"})}catch(b){t.log.warn(`Error fetch remote css import from ${g}`,b)}const E=p.replace(ke,(b,w,S)=>b.replace(S,ue(S,g)));for(const b of Ht(E))try{d.insertRule(b,d.cssRules.length)}catch(w){t.log.warn("Error inserting rule from remote css import",{rule:b,error:w})}}})))),d.cssRules.length&&c.push(d);const m=[];c.forEach(f=>{oe(f.cssRules,m)}),m.filter(f=>{var h;return Ye(f)&&Ie(f.style.getPropertyValue("src"))&&((h=we(f.style.getPropertyValue("font-family")))==null?void 0:h.some(g=>i.has(g)))}).forEach(f=>{const h=f,g=a.get(h.cssText);g?n.appendChild(r.createTextNode(`${g}
+`)):s.push(Re(h.cssText,h.parentStyleSheet?h.parentStyleSheet.href:null,t).then(p=>{p=Ue(p,t),a.set(h.cssText,p),n.appendChild(r.createTextNode(`${p}
+`))}))})}})}const Wt=/(\/\*[\s\S]*?\*\/)/g,Pe=/((@.*?keyframes [\s\S]*?){([\s\S]*?}\s*?)})/gi;function Ht(e){if(e==null)return[];const t=[];let r=e.replace(Wt,"");for(;;){const a=Pe.exec(r);if(!a)break;t.push(a[0])}r=r.replace(Pe,"");const n=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,i=new RegExp("((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})","gi");for(;;){let a=n.exec(r);if(a)i.lastIndex=n.lastIndex;else if(a=i.exec(r),a)n.lastIndex=i.lastIndex;else break;t.push(a[0])}return t}const Vt=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,zt=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function Ue(e,t){const{font:r}=t,n=r?r==null?void 0:r.preferredFormat:void 0;return n?e.replace(zt,i=>{for(;;){const[a,,s]=Vt.exec(i)||[];if(!s)return"";if(s===n)return`src: ${a};`}}):e}function oe(e,t=[]){for(const r of Array.from(e))Ke(r)?t.push(...oe(r.cssRules)):"cssRules"in r?oe(r.cssRules,t):t.push(r);return t}const Xt=/\bx?link:?href\s*=\s*["'](?!data:)[^"']+["']/i;function Gt(e){return Xt.test(e.innerHTML)}function _e(e,t){return C(this,null,function*(){const r=yield k(e,t);if(I(r.node)&&H(r.node)&&!Gt(r.node))return r.node;const{ownerDocument:n,log:i,tasks:a,svgStyleElement:s,svgDefsElement:o,svgStyles:c,font:u,progress:l,autoDestruct:d,onCloneNode:m,onEmbedNode:f,onCreateForeignObjectSvg:h}=r;i.time("clone node");const g=yield ne(r.node,r,!0);if(s&&n){let S="";c.forEach((T,A)=>{S+=`${T.join(`,
+`)} {
+  ${A}
+}
+`}),s.appendChild(n.createTextNode(S))}i.timeEnd("clone node"),yield m==null?void 0:m(g),u!==!1&&I(g)&&(i.time("embed web font"),yield qt(g,r),i.timeEnd("embed web font")),i.time("embed node"),De(g,r);const p=a.length;let E=0;const b=()=>C(this,null,function*(){for(;;){const S=a.pop();if(!S)break;try{yield S}catch(T){r.log.warn("Failed to run task",T)}l==null||l(++E,p)}});l==null||l(E,p),yield Promise.all([...Array.from({length:4})].map(b)),i.timeEnd("embed node"),yield f==null?void 0:f(g);const w=Yt(g,r);return o&&w.insertBefore(o,w.children[0]),s&&w.insertBefore(s,w.children[0]),d&&Ne(r),yield h==null?void 0:h(w),w})}function Yt(e,t){const{width:r,height:n}=t,i=fe(r,n,e.ownerDocument),a=i.ownerDocument.createElementNS(i.namespaceURI,"foreignObject");return a.setAttributeNS(null,"x","0%"),a.setAttributeNS(null,"y","0%"),a.setAttributeNS(null,"width","100%"),a.setAttributeNS(null,"height","100%"),a.append(e),i.appendChild(a),i}function Q(e,t){return C(this,null,function*(){var s;const r=yield k(e,t),n=yield _e(r),i=de(n,r.isEnable("removeControlCharacter"));r.autoDestruct||(r.svgStyleElement=be(r.ownerDocument),r.svgDefsElement=(s=r.ownerDocument)==null?void 0:s.createElementNS(K,"defs"),r.svgStyles.clear());const a=_(i,n.ownerDocument);return yield yt(a,r)})}function Jt(e,t){return C(this,null,function*(){const r=yield k(e,t),{log:n,type:i,quality:a,dpi:s}=r,o=yield Q(r);n.time("canvas to blob");const c=yield ft(o,i,a);if(["image/png","image/jpeg"].includes(i)&&s){const u=yield mt(c.slice(0,33));let l=new Uint8Array(u);return i==="image/png"?l=ae(l,s):i==="image/jpeg"&&(l=v(l,s)),n.timeEnd("canvas to blob"),new Blob([l,c.slice(33)],{type:i})}return n.timeEnd("canvas to blob"),c})}function x(e,t){return C(this,null,function*(){const r=yield k(e,t),{log:n,quality:i,type:a,dpi:s}=r,o=yield Q(r);n.time("canvas to data url");let c=o.toDataURL(a,i);if(["image/png","image/jpeg"].includes(a)&&s&&ie&&Xe){const[u,l]=c.split(",");let d=0,m=!1;if(a==="image/png"){const w=Ve(l);w>=0?(d=Math.ceil((w+28)/3)*4,m=!0):d=33/3*4}else a==="image/jpeg"&&(d=18/3*4);const f=l.substring(0,d),h=l.substring(d),g=window.atob(f),p=new Uint8Array(g.length);for(let w=0;w<p.length;w++)p[w]=g.charCodeAt(w);const E=a==="image/png"?ae(p,s,m):v(p,s),b=window.btoa(String.fromCharCode(...E));c=[u,",",b,h].join("")}return n.timeEnd("canvas to data url"),c})}function Fe(e,t){return C(this,null,function*(){const r=yield k(e,t),{width:n,height:i,ownerDocument:a}=r,s=yield x(r),o=fe(n,i,a),c=o.ownerDocument.createElementNS(o.namespaceURI,"image");return c.setAttributeNS(null,"href",s),c.setAttributeNS(null,"height","100%"),c.setAttributeNS(null,"width","100%"),o.appendChild(c),de(o,r.isEnable("removeControlCharacter"))})}function Kt(e,t){return C(this,null,function*(){const r=yield k(e,t),{ownerDocument:n,width:i,height:a,scale:s,type:o}=r,c=o==="image/svg+xml"?yield Fe(r):yield x(r),u=_(c,n);return u.width=Math.floor(i*s),u.height=Math.floor(a*s),u.style.width=`${i}px`,u.style.height=`${a}px`,u})}function Qt(e,t){return C(this,null,function*(){return x(yield k(e,M(D({},t),{type:"image/jpeg"})))})}function Zt(e,t){return C(this,null,function*(){const r=yield k(e,t),n=yield Q(r);return n.getContext("2d").getImageData(0,0,n.width,n.height).data})}function er(e,t){return C(this,null,function*(){return x(yield k(e,M(D({},t),{type:"image/png"})))})}function tr(e,t){return C(this,null,function*(){return x(yield k(e,M(D({},t),{type:"image/webp"})))})}y.createContext=ye,y.destroyContext=Ne,y.domToBlob=Jt,y.domToCanvas=Q,y.domToDataUrl=x,y.domToForeignObjectSvg=_e,y.domToImage=Kt,y.domToJpeg=Qt,y.domToPixel=Zt,y.domToPng=er,y.domToSvg=Fe,y.domToWebp=tr,y.loadMedia=L,y.waitUntilLoad=me,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});

package/skills/ui/motion/SKILL.md

@@ -0,0 +1,207 @@
+---
+name: motion
+description: The whole motion job in one skill. Name an effect you cannot place. Decide whether to animate it. Build the animation. Review existing motion. Audit a screen for motion. Use when asked to animate something, add micro-interactions, make a UI feel alive, or review or improve the animations. Use it to find what could move or to name an effect you want ("what is it called when..."). Replaces the old animation family (animate, emil-design-eng, review-animations, improve-animations, find-animation-opportunities, animation-vocabulary, apple-design) as a single owned skill. house-style's "Micro-animations" section is the law. This file is the process.
+---
+
+# Motion
+
+One job, four phases. Run only the phase the request matches, in this
+order: name it, decide, build, review. Auditing a whole codebase is the
+review phase applied at scale. If the work already exists, review beats
+rebuild.
+
+## The rules that never bend
+
+- Fast, physical, quiet, purposeful.
+- State lands first. Nobody waits on a spring.
+- Animate `transform` and `opacity` only. Layout animations stutter.
+- Nothing loops forever. A pulse that never stops is a design with
+  nothing to say.
+- `prefers-reduced-motion: reduce` means instant state changes. No
+  springs, no entrances, no parallax.
+- This skill wins over any synced skill that talks about animation.
+  house-style wins over both.
+
+> **Related skills:** [`pick-ui-library`](../pick-ui-library/SKILL.md) for motion library recommendations (motion.dev, GSAP). [`ui`](../ui/SKILL.md) for the full UI process where motion is one phase. Load `house-style` + this skill for motion work; add `ui` when motion is part of a broader UI task.
+>
+> **Reference:** [transitions.dev](http://transitions.dev) — curated collection of copy-paste CSS transitions & micro-interactions. Use for inspiration and ready-made snippets that follow the rules above.
+
+## Name it (when you cannot say what you want)
+
+Reverse lookup: you describe the feeling, this names the effect.
+
+| You say | It is |
+|---|---|
+| "The bouncy thing when a popover opens" | Pop in: scale from 0.95 to 1 plus fade, slight overshoot |
+| "Bounces at the edge of the screen when I scroll past the end" | Rubber-banding |
+| "The card glides into the next column" | Layout transition (shared element) |
+| "Items arrive one after another" | Stagger |
+| "Old image fades out as the new one fades in" | Crossfade |
+| "The button squishes when I press it" | Press feedback: scale to 0.97 on press, spring back |
+| "A sheet slides up from the bottom with blur behind" | Sheet presentation |
+| "The icon reshapes between states" | Icon morph — use [morphicons](https://morphicons.com/) for SVG→SVG spring morphs |
+| "The header shrinks while I scroll" | Scroll-aware collapse |
+| "Rows slide away when I dismiss them" | Collapse dismissal |
+| "The thing follows my cursor with a lag" | Magnetic cursor spring |
+| "The list counts up when it loads" | Count-up plus bar fill |
+| "Ghost bars shimmer while loading" | Skeleton shimmer |
+| "The click ripples out" | Ripple |
+| "An infinite rotating banner" | Marquee (banned: it loops forever) |
+| "Layers move at different speeds while scrolling" | Parallax (banned by default) |
+
+If the table misses it, say it plainly: what comes from where, what it
+does, how long. Plain words beat jargon.
+
+## Decide (before writing any code)
+
+Ask in order. The first no stops the work.
+
+1. What changed? If the interaction changed nothing visible, there is
+   nothing to animate.
+2. How often? Rare moments (monthly, first visit) can carry motion.
+   Daily interactions get subtle and fast. Anything used hundreds of
+   times a day gets none. Keyboard-initiated actions never animate.
+3. One motion per event. Pick the element that carries the change. The
+   rest update instantly. Two springs at once read as glitch.
+4. Cut anything decorative: scroll-jacking, parallax, staggered
+   entrances on every load, confetti, idle pulses. Purple slop that
+   moves. Say no and go calmer.
+
+## Build
+
+Decide in this order.
+
+1. **Property.** `transform` and `opacity`. Exceptions need a reason.
+2. **Curve.** Springs by default for anything interactive. `ease-out`
+   (`cubic-bezier(0.16, 1, 0.3, 1)`) for things arriving, a sharper
+   curve for things leaving. `ease-in-out` is the elevator: it does not
+   belong. When Tailwind's curves cannot do the feel, raw CSS is fine:
+   in motion, the curve is the design.
+3. **Duration.** 200ms in, 150ms out, hover under 150ms, press feedback
+   under 100ms. Over 300ms needs a reason and a storyboard.
+4. **Scale.** Matched to the element. A checkbox does not slide. A card
+   does. Small element, small motion.
+5. **Interruption.** Animations yield to the next input. Use CSS
+   transitions (they retarget) over keyframes (they queue). Click three
+   times fast: the third press lands the state instantly.
+6. **Exit.** Whatever enters animated leaves animated. Exits are faster
+   and quieter than entrances.
+7. **Reduced motion.** Every animation also ships without it: the state
+   change is instant when the user asks for less.
+
+Crib sheet for the common jobs:
+
+- Press: scale 0.97 on press, spring back on release, under 150ms.
+- Toggle: thumb springs along the track, 200ms.
+- Expanding card: shared-element transition, image re-frames, 250ms.
+- Modal: fade plus scale 0.95 to 1, 200ms in, 150ms out.
+- Sheet: slides from its origin with a spring, 250ms, blur behind.
+- List reorder: layout transition, 200ms, items stagger 20ms.
+- Skeleton: shimmer only while loading, never on loop after load.
+
+### Micro-interactions are multi-sensory
+
+Every interaction has up to three layers. Pick what the moment needs:
+
+| Layer | Tool | When |
+|-------|------|------|
+| **Visual** | CSS spring, morphicons | Always — this is the primary feedback |
+| **Audio** | quiet-fx | Confirming actions: clicks, toggles, submits, deletes |
+| **Haptic** | `navigator.vibrate(ms)` | Mobile: toggles, destructive actions, long-press confirm |
+
+**Examples:**
+
+- **Send button:** Visual (scale 0.95→1 spring) + Audio (soft pop) + Haptic (10ms)
+- **Toggle switch:** Visual (thumb spring) + Audio (quiet snap) + Haptic (5ms)
+- **Delete:** Visual (fade out) + Audio (dull knock) + Haptic (50ms, stronger)
+- **Hover:** Visual only. No sound, no haptic. Hover is exploration, not commitment.
+- **Toast appear:** Visual (slide up + fade) + Audio (gentle chime). No haptic — it's informational, not interactive.
+
+**Rule:** The more consequential the action, the more layers. Hover = 1 layer. Click = 2. Destructive = 3. If someone notices the sound, it's too loud. If the haptic is longer than 50ms, it's an alarm, not feedback.
+
+## Review (a piece of work)
+
+Default to flagging. Approve only what passes review. Check in this order:
+
+1. Purpose: does it answer "what happened?" If not, flag for removal.
+2. Speed: it passes unnoticed. If you noticed it, it
+   is slow.
+3. Physics: spring feel, no `ease-in-out`, no `linear` outside progress
+   bars.
+4. Quiet: one motion per event, nothing loops, nothing announces
+   itself.
+5. Interruption: nothing queues, nothing waits.
+6. Exits: present, faster than entrances.
+7. Reduced motion: implemented, not just mentioned.
+8. Properties: `transform` and `opacity` only. Anything else is a flag
+   and needs a reason.
+
+Each flag lists: what, where, why, and the exact value that replaces
+it.
+
+## Audit (a codebase or a screen)
+
+Read-only. Survey everything that moves, then hand back:
+
+1. Places that animate but must not, each with the reason.
+2. Places that must animate but do not, only where a user would wait
+   or wonder.
+3. For every yes: the exact motion another agent can implement without
+   asking (property, curve, duration, interruption, exit).
+4. Priority order: fix what feels broken first, then what feels flat.
+
+Reject loudly: decorative, looped, scroll-jacked. They do not get
+motion, they get removal.
+
+## The physical grammar to match
+
+The products that feel expensive (Apple, Linear, Stripe) share a
+physical grammar. Match it, do not invent your own:
+
+- Springs for anything interactive. Timed curves only for
+  non-feedback transitions.
+- Sheets and drawers are draggable. Release mid-drag either settles or
+  dismisses, driven by velocity.
+- A fling keeps gliding and coasts to rest.
+- The current gesture interrupts the last motion cleanly.
+- Depth comes from use, not decoration. Slight scale and blur for layers,
+  never shadows and bevels pretending to be 3D.
+- Feedback returns along the same path it came: what rose from the
+  bottom dismisses toward the bottom.
+
+## Tooling notes
+
+- Tailwind utilities for duration and easing. Arbitrary
+  `ease-[cubic-bezier(...)]` for springs.
+- CSS transitions beat keyframes when interruption matters, which is
+  nearly always.
+- A motion library (motion.dev, GSAP) only when gestures get complex.
+   Most micro work is plain CSS.
+- **Icon morphing:** Use [morphicons](https://morphicons.com/) for
+   icon→icon transitions (hamburger↔X, play↔pause, chevron states).
+   6.5KB, zero deps, spring physics, works with Lucide/Tabler/Heroicons.
+   Install: `npm i morphicons`. Import as data (`d` attribute), not
+   components.
+- **Audio feedback:** Use
+   [quiet-fx](https://github.com/nicmcphee/quiet-fx) for subtle UI
+   sounds (clicks, pops, chimes, snaps). Creates one `SoundPlayer` per
+   mount, fire-and-forget `play()`, dispose on unmount. Layer with
+   visual motion — the sound confirms what the eye just saw. Never
+   await `play()`, never gate logic on it.
+   ```ts
+   import { createQuietSound } from './quiet';
+   // One per component. Dispose on unmount.
+   const { play, dispose } = createQuietSound();
+   // In handler: play() fires async, don't await
+   onClick={() => { play(); doAction(); }}
+   ```
+- Test on the weakest device you have. If it stutters, delete the
+   animation, not the test.
+
+## Origin
+
+Merged from the seven-skill animation family (emil-design-eng, animate,
+review-animations, improve-animations, find-animation-opportunities,
+animation-vocabulary, apple-design). It was one job split into seven
+voices of the same skill. They are gone by choice and their folders do
+not come back on sync.

package/skills/ui/pick-ui-library/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: pick-ui-library
+description: Pick the right library for a given frontend task from a curated, opinionated list ,  numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
+disable-model-invocation: true
+---
+
+# Picking The Right Library
+
+## Initial Response
+
+When this skill is first invoked without a specific question, respond only with:
+
+> I'm ready to pick the right library for your task, my picks come from Emil Kowalski's curated list.
+
+Do not provide any other information until the user asks a question.
+
+A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks ,  don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
+
+## How to use this
+
+1. **Identify the task**, not the library the user named. "I need to show a dropdown" is a UI-primitives task (base-ui), even if they asked about something else.
+2. **Check what's already installed.** Look at `package.json` first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.
+3. **Recommend one library**, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
+4. If the task isn't covered by the list, say so explicitly and recommend from your own knowledge ,  but be clear you've left the curated list.
+
+## The list
+
+### UI components & primitives
+
+| Task | Library |
+| --- | --- |
+| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | [base-ui](https://base-ui.com) |
+| Command menus (⌘K palettes) | [cmdk](https://cmdk.paco.me) |
+| Toasts / notifications | [Sonner](https://sonner.emilkowal.ski) |
+| One-time password / verification code inputs | [input-otp](https://input-otp.rodz.dev) |
+| Customizable GUIs / control panels | [Leva](https://github.com/pmndrs/leva) ,  [dialkit](https://joshpuckett.me/dialkit) is an alternative |
+
+### Motion & visuals
+
+| Task | Library |
+| --- | --- |
+| General-purpose animation (springs, layout animations, enter/exit) | [motion](https://motion.dev) (Framer Motion) |
+| Animating numbers (counters, prices, stats) | [NumberFlow](https://number-flow.barvian.me) |
+| Animated text components | [torph](https://torph.lochie.me/) |
+| 3D globes | [Cobe](https://cobe.vercel.app) |
+| Dynamic OG images (HTML/CSS → SVG/PNG) | [Satori](https://github.com/vercel/satori) |
+| Syntax highlighting | [shiki](https://shiki.style) |
+
+Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it ,  plain CSS transitions are the right tool there.
+
+### Charts
+
+| Task | Library |
+| --- | --- |
+| Real-time / streaming charts | [Liveline](https://github.com/benjitaylor/liveline) |
+| General charts (static or interactive dashboards) | [recharts](https://recharts.org) |
+
+The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
+
+### Interaction & performance
+
+| Task | Library |
+| --- | --- |
+| Drag and drop | [dnd kit](https://dndkit.com) |
+| Virtualization (long lists, large tables) | [Virtuoso](https://virtuoso.dev) |
+
+### State & styling
+
+| Task | Library |
+| --- | --- |
+| State management | [zustand](https://zustand.docs.pmnd.rs) |
+| Constructing `className` strings conditionally | [clsx](https://github.com/lukeed/clsx) |
+| Type-safe, variant-driven styling for Tailwind | [cva](https://cva.style) |
+| Theme switching / dark mode (no flash on load) | [next-themes](https://github.com/pacocoursey/next-themes) |
+
+The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose ,  cva uses clsx-style inputs internally.
+
+## Common mismatches to catch
+
+- **Toasts built by hand or with a modal library** → Sonner exists for exactly this.
+- **A `<div>`-based dropdown/dialog with manual focus handling** → base-ui, which handles accessibility, focus trapping, and dismissal.
+- **Animating a number by re-rendering text** → NumberFlow handles digit transitions properly.
+- **Rendering a 1,000+ row list directly** → Virtuoso before reaching for pagination hacks.
+- **A `useState`-per-component web of props for shared state** → zustand.
+- **Template-literal className ternaries three conditions deep** → clsx (or cva if it's variant-shaped).

package/skills/ui/product-messaging/SKILL.md

@@ -0,0 +1,163 @@
+---
+name: product-messaging
+description: Use whenever the user is writing or reviewing copy for a landing page, product homepage, pitch page, or hero section. Triggers on "write my landing page," "hero copy," "what should my homepage say," "positioning," "value prop," "why isn't my landing page converting," or any product/marketing page build where the layout is decided (or being decided via ui-theme-picker) but the actual words are not. Also use when a page already has UI polish but reads generic or forgettable, the content is the fix. Runs a messaging derivation (ICP, problem, outcome, mechanism, differentiation), builds a section-by-section content hierarchy tied to the question each section answers for the visitor, and hands back actual copy, not placeholder lorem or vague direction, mapped to sections a UI skill can then style. Pairs with ui-theme-picker: this skill decides what the page says, ui-theme-picker decides how it looks.
+---
+
+# Product Messaging
+
+Decides what a landing page should actually say, before or alongside deciding how it
+looks. A visually polished hero with generic copy still fails. "AI-powered platform
+for modern teams" reads the same on every SaaS page ever shipped, no matter how good
+the gradient is. This skill exists to stop content from being the afterthought.
+
+**Core failure mode:** treating copy as filler text for a pre-built layout. The layout
+should follow from what needs to be said, not the other way around. If a hero section
+has an eyebrow, headline, subheadline, and two CTAs before anyone has answered "what's
+the outcome, for whom, and why should they believe it," the section is empty scaffolding.
+
+**The bar: specificity over cleverness.** The single biggest tell of forgettable copy
+is vagueness dressed up as confidence. "The future of X," "reimagine your workflow,"
+"empowering teams to do more." None of that is falsifiable, memorable, or specific to
+this product. The fix is almost always a concrete number, a named use case, or a real
+mechanism, not a punchier adjective.
+
+## 1. Derive the messaging inputs first ,  never write copy cold
+
+Before any copy gets written, establish these five things. If the user hasn't given
+them, ask (short, direct questions ,  don't turn this into a lengthy intake form):
+
+1. **The product** ,  what it actually does, one sentence, no jargon.
+2. **The ICP** ,  who specifically. Not "developers" ,  "solo devs shipping side
+   projects who don't have a DevOps person." The narrower and more concrete, the
+   easier every downstream decision gets.
+3. **The painful problem** ,  not the category problem ("deployment is hard") but the
+   specific moment of pain this ICP feels ("you push to prod on a Friday and spend the
+   weekend babysitting logs"). If the user can't articulate this specifically, that's
+   itself a signal to dig further before writing anything.
+4. **The desired outcome** ,  the after-state, in the visitor's terms, not the
+   product's terms. "Deploy without checking Slack all weekend" beats "improved
+   deployment reliability."
+5. **The differentiator** ,  why this and not the obvious alternative (a competitor, a
+   DIY approach, or doing nothing). If the honest answer is "nothing, really," flag
+   that directly ,  it's a positioning problem to solve before a copy problem.
+
+Skip mechanism-first thinking ("we use X technology") until outcome and problem are
+locked ,  visitors care what changes for them, not how it works, until step 4 below.
+
+## 2. Build the messaging hierarchy ,  one sentence per layer
+
+Compress the five inputs into a strict hierarchy, each layer answering one visitor
+question. Write these as actual sentences, not bullet fragments ,  they become the
+literal copy for sections 3 (below).
+
+```
+Category / eyebrow   → What kind of thing is this?
+Core value prop       → What do I get, and is it for me?
+Clarifying subhead    → How, specifically, in one more sentence?
+Proof point           → Why should I believe that claim?
+Differentiation line  → Why this instead of the alternative?
+```
+
+**Rule: the value prop is an outcome, never a feature list.** Test every candidate
+headline against "so what?" ,  "Real-time collaboration for design teams" invites "so
+what?"; "See your teammate's cursor before they finish the sentence" doesn't, because
+the outcome is already in the sentence.
+
+## 3. Map the hierarchy to a section sequence
+
+The exact sections depend on the product, but reason about *why a section exists*, not
+just *whether it looks complete*. Each section answers one visitor question ,  if a
+section can't state the question it answers, cut it or merge it into a neighbor.
+
+```
+NAV        → orientation, one clear path to the primary CTA
+HERO       → What is this, and why should I care?
+PROOF BAR  → Is this legitimate? (logos, a number, a one-line stat — thin, early)
+PROBLEM    → Is this actually my problem?
+SOLUTION   → How does this solve it?
+DEMO       → Does it actually work the way I want? (real screenshot/product, not
+             illustration)
+BENEFITS   → What do I get, concretely?
+USE CASES  → Does this fit my specific situation? (named, not generic)
+HOW IT WORKS → What am I actually signing up for/doing?
+DIFFERENTIATION → Why this over the alternative I'm already using or considering?
+SOCIAL PROOF → Have people like me actually gotten the outcome?
+OBJECTIONS/FAQ → What's the thing stopping me right now? (price, setup time, "will
+             this work with my stack," migration risk — name the real one, not a
+             softball)
+FINAL CTA  → What do I do now? (same action as the hero CTA, not a new one)
+FOOTER     → trust signals, secondary paths
+```
+
+Not every page needs every section. A technical dev-tool page might collapse
+PROBLEM/SOLUTION into one section and spend more room on DEMO. A consumer app might
+drop OBJECTIONS entirely in favor of more social proof. Cut based on what this
+specific visitor is actually unsure about, not by copying the template wholesale.
+
+## 4. Write the actual copy ,  not placeholder direction
+
+Hand back real, ready-to-paste copy for each section, not descriptions of what the
+copy should do. "Write a headline emphasizing speed" is not a deliverable; "Ship in
+minutes, not sprints" is.
+
+**Headline formulas that hold up** (pick based on what the ICP most needs convincing
+of ,  don't default to the same one every time):
+- **Outcome-first**: `[Outcome] without [the usual pain]` ,  "Deploy on Friday and
+  actually enjoy your weekend."
+- **Mechanism-first**: for products where *how* is the differentiator and the ICP is
+  technical enough to care ,  "One CLI command, zero YAML."
+- **Category-defining**: only when genuinely creating a new category, otherwise this
+  reads as empty ambition ,  "The Figma for spreadsheets."
+- **Direct address**: names the ICP explicitly ,  "Built for solo devs who ship alone."
+
+**CTA copy**: name the action and, where possible, the immediate next state ,  "Start
+free deploy" beats "Get Started"; "See it on your repo" beats "Learn More." Reserve
+"Learn More" / "Get Started" for genuinely low-stakes secondary actions only.
+
+**Proof**: real numbers over vague claims. "Used by 40 teams shipping to production
+daily" beats "Trusted by teams everywhere." If real numbers don't exist yet, say so
+rather than inventing filler ,  recommend a placeholder proof strategy (early-access
+count, founder credibility, a single strong testimonial) instead of fabricating scale.
+
+## 5. Hard avoid-list ,  instantly generic, reads as AI-written or templated
+
+Actively strip these unless the user's actual context justifies one specifically:
+- "Empowering," "revolutionize," "reimagine," "unlock," "seamless," "cutting-edge,"
+  "next-generation," "game-changing," "the future of X"
+- A headline that would be equally true of ten competitors' products
+- "All-in-one platform for X" with no specific outcome named
+- Feature lists presented as benefits ("Real-time sync, AI-powered, cloud-native")
+  without the "so what" translated
+- Generic trust copy with no real proof behind it ("Trusted by industry leaders"
+  next to no logos)
+- A CTA that says "Learn More" as the *primary* action
+- Stock testimonial phrasing that sounds fabricated ("This tool changed my life!")
+  ,  real testimonials are specific and slightly awkward, not polished
+
+## 6. Reference points for voice (extract principle, not wording)
+
+- **Stripe** ,  precise, confident, technical without being cold; never oversells.
+- **Linear** ,  terse, declarative sentences; no filler adjectives.
+- **Basecamp (Signal v. Noise era copy)** ,  opinionated, plainspoken, willing to name
+  what it's against.
+- **Superhuman** ,  outcome-obsessed headlines, heavy specificity ("the fastest email
+  experience ever made").
+
+Don't copy tone wholesale ,  match voice to the ICP from step 1. A dev-tool ICP wants
+terse and technical; a consumer/SMB ICP tolerates warmer, more explanatory copy.
+
+## 7. Self-check before presenting
+
+- Does the hero headline pass the "so what?" test ,  is the outcome explicit, not
+  implied?
+- Could a competitor's name be swapped in without any sentence becoming false? If yes,
+  it's not differentiated enough ,  go back to step 1's differentiator.
+- Is there exactly one primary CTA action repeated (hero + final CTA), not several
+  competing asks?
+- Does every section's existence map to a specific visitor question from step 3? Cut
+  any that don't.
+- Did any phrase from the avoid-list in step 5 slip in? Remove or replace it.
+- Is the proof real, or flagged as a placeholder needing real data? Never presented as
+  real when it isn't.
+- Handed back as copy mapped to sections (ready for a UI skill to lay out), not as
+  abstract advice about what copy should do.