asciify-engine 4.14.2 → 4.16.0

package/README.md

@@ -646,6 +646,18 @@ const field = mountGlyphField(canvas, {
 
 It needs WebGL2 on a GPU: `isGlyphFieldSupported()` is false without it or on software WebGL, and slow devices step down to 1× pixels and then still ambient motion. Keep a poster or the `/studio` renderer as the fallback. A still field stops drawing once its wake settles. Measured in Playwright Chromium on an Apple M4 Pro at 1440 × 900 and device pixel ratio 2, a full-viewport field held 120 fps (9 ms 95th-percentile frame) under continuous pointer movement; measure your own targets. See the [field guide](skills/asciify-engine/references/glyph-field.md) and [brand field example](examples/glyph-field.ts). It is a separate entry: the root, `/core`, `/hover` and `/studio` never load it.
 
+## 4.16: smooth shading in every charset, rolling streamed text
+
+- Glyph fields gain `blend` (default `'auto'`): with nine or fewer characters, a photo or video mixes neighbouring characters in a fixed 4x4 pattern for the shades between them, so binary, dots and block sets shade like a full ramp. Drawn interface shapes stay crisp. It costs one comparison per cell and never shimmers.
+- `streamText(el, { transition: 'roll' })` rolls each character up through glyphs into the crisp letter, like the odometer, with the caret on the front of the roll.
+
+## 4.15: every charset at the same weight, inks from your tokens
+
+- `setGlobalLook({ charset })` measures the set's ink against classic ASCII and balances it: block and solid sets draw smaller glyphs and keep their detail, sets without light glyphs ease off, and faint sets draw larger, bolder glyphs. Tones are untouched.
+- Kit inks default to `--ascii-ink-strong`, and with that unset, to the element's own text colour, so components follow the page's tokens instead of a fixed grey.
+- `skeleton` reads its blocks' shapes from CSS (an image's radius; one bar per line of text, as wide as the words) and its shimmer is a continuous wave until `resolve()`.
+- A hidden (`display: none`) field gives its WebGL context to fields on screen.
+
 ## 4.14: backgrounds in the kit, site-quality components
 
 - **`background(el, { preset })`** brings all 26 asciify.org backgrounds into the kit: drift, halftone, wordField and fluid on the GPU field, and 22 canvas presets (caustics, contour, facet, etch, moire, weave, veil, dune, wave, aurora, noise, silk, rain, stars, pulse, grid, voidWell, morph, fire, dna, terrain, circuit). Presets are separate imports, so a page pays only for the ones it uses, and each matches the /backgrounds page's rendering.

package/dist/field.cjs

@@ -1 +1 @@
-"use strict";var e=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",t="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",n=t+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",r=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",i=t+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",o=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",a=t+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",l=t+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=t+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",s=t+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var c=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const u=Math.min(this.width,this.height),s=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/u/s),f=1-Math.exp(-c/2.2),h=u*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,g=a/l,p=-g,x=v,E=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),u=Math.min(this.width-2,Math.ceil(o+3*h)),s=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=s;e<=c;e++)for(let t=l;t<=u;t++){const n=((t-o)*v+(e-a)*g)/h,r=((t-o)*p+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const u=1-r*r*.55,s=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*u+p*s)*i*E)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(g*u+x*s)*i*E))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,u=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),s=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|u,f=0|s,h=u-c,d=s-f,m=f*n+c,v=(1-h)*(1-d),g=h*(1-d),p=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*g+this.u[m+n]*p+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*g+this.v[m+n]*p+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*g+this.ink[m+n]*p+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,u=this.curl[i]*e*10,s=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*u,this.v[i]-=o/l*u;const c=Math.min(1,s/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},f={radius:.13,strength:.5,trail:.45,follow:12},h={strength:.55,radius:.45},d={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},m={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:d,lantern:f,trail:h,maxPixelRatio:2,respectReducedMotion:!0},v=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,g=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function p(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function x(e={},t=m){const n="string"==typeof e.charset&&p(e.charset).length>=2?e.charset:t.charset,r=t.fluid||d,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:v(e.radius,.005,.5,d.radius),force:v(e.force,0,8,d.force),dissipation:v(e.dissipation,.05,20,d.dissipation),refraction:v(e.refraction,0,.5,d.refraction),glow:v(e.glow,0,2,d.glow),resolution:Math.round(v(e.resolution,16,512,d.resolution)),curl:v(e.curl,0,80,d.curl)}})(),a="none"===e.scene||"flow"===e.scene||"orb"===e.scene||"drift"===e.scene?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),u=void 0===e.clear||l?t.clear:e.clear,s=!!u&&{x:v(u.x,-.5,1.5,.25),y:v(u.y,-.5,1.5,.3),width:v(u.width,0,2,.5),height:v(u.height,0,2,.4),feather:v(u.feather,.005,1,.12),shape:"rect"===u.shape?"rect":"ellipse"};return{charset:n,cellSize:v(e.cellSize,3,96,t.cellSize),cellAspect:v(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(v(e.fontWeight,100,900,t.fontWeight)),glyphScale:v(e.glyphScale,.3,1.6,t.glyphScale),mark:"dot"===e.mark||"glyph"===e.mark?e.mark:t.mark,dotScale:v(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:g(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":g(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":g(e.background,t.background),brightness:v(e.brightness,-1,1,t.brightness),contrast:v(e.contrast,0,4,t.contrast),gamma:v(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,saturation:v(e.saturation,0,3,t.saturation),shade:v(e.shade,0,1,t.shade),backdrop:v(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:v(e.focus?.x,0,1,t.focus.x),y:v(e.focus?.y,0,1,t.focus.y)},vignette:v(e.vignette,0,1,t.vignette),drift:v(e.drift,0,2,t.drift),scene:a,scale:v(e.scale,.2,6,t.scale),clear:s,speed:v(e.speed,0,5,t.speed),hover:"fluid"===e.hover||"lantern"===e.hover||"trail"===e.hover||"none"===e.hover?e.hover:t.hover,fluid:o,lantern:{radius:v(e.lantern?.radius,.02,.6,t.lantern.radius),strength:v(e.lantern?.strength,0,1.5,t.lantern.strength),trail:v(e.lantern?.trail,0,3,t.lantern.trail),follow:v(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:v(e.trail?.strength,0,1,t.trail.strength),radius:v(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:v(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function E(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,u=l>a,s="cover"===i?u?[a/l,1]:[1,l/a]:u?[1,l/a]:[a/l,1];return{scale:s,offset:"cover"===i?[(1-s[0])*o.x,(1-s[1])*o.y]:[.5*(1-s[0]),.5*(1-s[1])]}}function T(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function y(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function b(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var w=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function M(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var R,F=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,A=/swiftshader|llvmpipe|softpipe|software|basic render/i;function L(){if(R)return R;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return R="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return R="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),R=A.test(n)?"software":"gpu"}catch{return R="none"}}exports.DEFAULT_FIELD_FLUID=d,exports.DEFAULT_FIELD_LANTERN=f,exports.DEFAULT_FIELD_SETTINGS=m,exports.DEFAULT_FIELD_TRAIL=h,exports.FIELD_HOVERS=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],exports.activeFieldHover=w,exports.fieldCellLayout=T,exports.fieldClearFromRects=M,exports.fieldGlyphs=p,exports.fieldLevels=b,exports.fieldSourceRect=E,exports.glyphFieldTier=L,exports.isGlyphFieldSupported=function(e={}){const t=L();return"gpu"===t||"software"===t&&!!e.allowSoftware},exports.mountGlyphField=function(t,f={}){const h=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,d=e=>{const t=e.clear;return h(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&h(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let m=d(f).element,v=x(d(f).rest);const g=f.onError,R=t.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!R)throw new Error("WebGL2 is not available for the glyph field.");const A=R;t.setAttribute("role","img"),t.setAttribute("aria-label",f.label??"ASCII artwork"),t.dataset.renderer="glyph-field";let L=!1;const _=A.getExtension("KHR_parallel_shader_compile");let S,D,k=null,C=null,U=null,P=null,B=[],I=[],X=null,N=!1,V=null,G=null;const H=[];let z=0,O=0,W=1,Y=0,q=T(v.cellSize,v.cellAspect,1,2),$=2,j=0,K=0,J=0,Q=null,Z=null,ee=0,te=0,ne=0,re=null,ie=0,oe=!0,ae=0,le=[0,1],ue=-1/0,se=0,ce=0,fe=0,he=!0,de=!1,me=!1,ve=!1,ge=!1,pe=!0,xe=null,Ee=null,Te=1/60,ye=0,be=0,we=[];const Me=new Float32Array(16),Re=()=>{if(!m)return;const{element:e,padding:n=32,feather:r=.16,shape:i="rect"}=m,o=M(t.getBoundingClientRect(),e.getBoundingClientRect(),n,r,i),a=v.clear;JSON.stringify(a)!==JSON.stringify(o)&&(v={...v,clear:o},he=!0)},Fe={target:null,at:null,strength:0,trail:[]},Ae=new Float32Array(36);let Le=null,_e=null,Se=!1;const De=()=>{if(!z||!O)return null;const e=z/O,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return Le&&Le.width===t&&Le.height===n||(Le=new c(t,n),_e||(_e=ze(A.LINEAR)),A.bindTexture(A.TEXTURE_2D,_e),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,t,n,0,A.RGBA,A.UNSIGNED_BYTE,Le.pixels),Se=!0),Le};let ke=0;const Ce="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Ue=()=>v.respectReducedMotion&&!!Ce?.matches;let Pe;const Be=new Promise(e=>{Pe=e});let Ie=!0;const Xe=e=>g?.(e instanceof Error?e:new Error(String(e))),Ne=(e,t)=>{const n=A.createShader(e);return H.push(n),A.shaderSource(n,t),A.compileShader(n),n},Ve=e=>{G??(G=Ne(A.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=A.createProgram(),n=Ne(A.FRAGMENT_SHADER,e);return A.attachShader(t,G),A.attachShader(t,n),A.linkProgram(t),{program:t,locations:null,fragment:n}},Ge=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&_&&!A.getProgramParameter(n,_.COMPLETION_STATUS_KHR))return!1;if(!A.getProgramParameter(n,A.LINK_STATUS)){if(A.isContextLost())return!1;throw new Error(A.getShaderInfoLog(r)||A.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=A.getProgramParameter(n,A.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=A.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=A.getUniformLocation(n,t)}return e.locations=i,!0},He=(e=!1)=>!!k&&!!C&&Ge(k,e)&&Ge(C,e),ze=e=>{const t=A.createTexture();return A.bindTexture(A.TEXTURE_2D,t),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_MIN_FILTER,e),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_MAG_FILTER,e===A.LINEAR_MIPMAP_LINEAR?A.LINEAR:e),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_WRAP_S,A.CLAMP_TO_EDGE),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_WRAP_T,A.CLAMP_TO_EDGE),t},Oe=()=>{P&&(A.deleteTexture(P.ink),A.deleteTexture(P.under),A.deleteFramebuffer(P.buffer),P=null)},We=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,u=l*n;return[i/Math.max(1,Math.floor(i/u+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(v.cellFit,v.cellSize,v.cellAspect,W,z,O,q),Ye=()=>!!v.fluid&&"fluid"===w(v),qe=()=>{X?.release(),N=!1,B.forEach(e=>A.deleteTexture(e)),I.forEach(e=>A.deleteFramebuffer(e)),B=[],I=[]};function $e(){U&&A.deleteProgram(U.program),U=Ve((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${e(t)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(L)),X?.dispose(),X=L?null:function(e,t,c){const f={splat:t(n),curl:t(r),vorticity:t(i),divergence:t(o),fade:t(a),pressure:t(l),gradient:t(u),advect:t(s)},h=Object.values(f);let d=0,m=0,v=[],g=[],p=null,x=null;const E=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},T=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},y=()=>{[...v,...g,p,x].forEach(T),v=[],g=[],p=x=null},b=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},w=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){y(),d=t,m=n;const r=[E(e.LINEAR),E(e.LINEAR),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(T),!1):(v=[r[0],r[1]],g=[r[2],r[3]],p=r[4],x=r[5],!0)},ready:()=>h.every(c),step(t,n){if(!v.length||!p||!x)return;let r;e.viewport(0,0,d,m),t&&(r=b(f.splat,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=b(f.curl,x),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.vorticity,v[1]),w(r,"uVelocity",0,v[0].texture),w(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=b(f.divergence,p),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.fade,g[1]),w(r,"uSource",0,g[0].texture),e.uniform1f(r.uAmount,.8),M(),R(g);for(let e=0;e<20;e++)r=b(f.pressure,g[1]),w(r,"uPressure",0,g[0].texture),w(r,"uDivergence",1,p.texture),M(),R(g);r=b(f.gradient,v[1]),w(r,"uPressure",0,g[0].texture),w(r,"uVelocity",1,v[0].texture),M(),R(v),r=b(f.advect,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:y,dispose(){y(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(A,Ve,e=>Ge(e))}const je=()=>{qe();const e=v.fluid;if(!(e&&Ye()&&z&&O))return;U||$e();const t=e.resolution,n=z/O;if(j=n>=1?t:Math.max(8,Math.round(t*n)),K=n>=1?Math.max(8,Math.round(t/n)):t,N=!!X&&X.resize(j,K),N)return void(J=0);const r=()=>{qe();for(let e=0;e<2;e++){const e=ze(A.LINEAR);A.texImage2D(A.TEXTURE_2D,0,L?A.RGBA8:A.RGBA16F,j,K,0,A.RGBA,L?A.UNSIGNED_BYTE:A.HALF_FLOAT,null);const t=A.createFramebuffer();A.bindFramebuffer(A.FRAMEBUFFER,t),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT0,A.TEXTURE_2D,e,0),B.push(e),I.push(t)}return A.checkFramebufferStatus(A.FRAMEBUFFER)===A.FRAMEBUFFER_COMPLETE};if(!r()){if(L)throw new Error("The glyph field could not allocate its fluid buffers.");L=!0,Ke(),$e(),r()}for(const e of I)A.bindFramebuffer(A.FRAMEBUFFER,e),A.viewport(0,0,j,K),A.clearColor(L?.5:0,L?.5:0,0,1),A.clear(A.COLOR_BUFFER_BIT);A.bindFramebuffer(A.FRAMEBUFFER,null),J=0};function Ke(){k&&A.deleteProgram(k.program),C&&A.deleteProgram(C.program),Oe(),k=Ve((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount;\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${e(t)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  float index=min(uCount-1.,floor(tone*(uCount-1.)+.5)+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Halftone keeps the tone for the dot size; glyphs keep their atlas index, exact in 8 bits.\n  outInk=vec4(ink,uMark==1?(tone>.003?tone:0.):index/255.);\n  outUnder=vec4(under,underAlpha);\n}`)(L)),C=Ve("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale;\nuniform int uMark;\nout vec4 outColor;\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else {\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  }\n  outColor=vec4(ink.rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),_||He(!0)}const Je=()=>`${v.fontWeight} ${Math.max(1,q.height*v.glyphScale)}px ${v.font}`,Qe=()=>{const e=p(v.charset);$=e.length,q=T(v.cellSize,v.cellAspect,W,$),Y=W;const t=document.createElement("canvas");t.width=q.atlasWidth,t.height=q.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=Je();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||q.height*v.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=(q.height+i-o)/2;e.forEach((e,t)=>{const r=t%q.columns*q.width+q.width/2,i=Math.floor(t/q.columns)*q.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-q.width/2,i-a,q.width,q.height),n.clip(),n.translate(r,i),o>.96*q.width&&n.scale(.96*q.width/o,1),n.fillText(e,0,0),n.restore()}),A.bindTexture(A.TEXTURE_2D,S),A.pixelStorei(A.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,A.RGBA,A.UNSIGNED_BYTE,t),t.width=t.height=1,he=!0},Ze="undefined"==typeof document?void 0:document.fonts,et=()=>{if(!Ze?.load)return;const e=Je();Ze.load(e,p(v.charset).join("")).then(()=>{de||me||Je()!==e||(Qe(),Tt())},()=>{})},tt=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),nt=e=>{const t=e.fontfaces??[],n=v.font.split(",").map(tt);t.some(e=>n.includes(tt(e.family)))&&et()},rt=()=>{if(le=[0,1],Q&&"none"!==v.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});Q===re&&(t.imageSmoothingQuality="medium"),t.drawImage(Q,0,0,64,64),le=b(t.getImageData(0,0,64,64).data)}catch{le=[0,1]}},it=()=>{if(!Q)return;const e=performance.now();Q instanceof HTMLVideoElement&&!(e-ue>1500)||(rt(),ue=e),A.bindTexture(A.TEXTURE_2D,D),A.pixelStorei(A.UNPACK_FLIP_Y_WEBGL,!1),A.pixelStorei(A.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,A.RGBA,A.UNSIGNED_BYTE,Q),A.generateMipmap(A.TEXTURE_2D)}catch(e){Xe(e)}},ot=()=>{L=!A.getExtension("EXT_color_buffer_float")&&!A.getExtension("EXT_color_buffer_half_float"),Ke(),V=A.createVertexArray(),S=ze(A.NEAREST),D=ze(A.LINEAR_MIPMAP_LINEAR),A.bindTexture(A.TEXTURE_2D,D),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,1,1,0,A.RGBA,A.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),A.generateMipmap(A.TEXTURE_2D),z=O=0,Y=0,at(),et(),Q&&it()};function at(){const e=t.clientWidth||t.clientHeight?{width:t.clientWidth,height:t.clientHeight}:t.getBoundingClientRect(),n=Math.min(globalThis.devicePixelRatio||1,v.maxPixelRatio),r=Math.max(1,Math.round(e.width*n)),i=Math.max(1,Math.round(e.height*n));if(r===z&&i===O&&n===W)return!1;const o=!z||Math.abs(r/i-z/O)>.01;return W=n,z=r,O=i,t.width=z,t.height=O,Y!==W&&Qe(),(o||Ye()&&!B.length&&!N)&&je(),he=!0,!0}let lt=null,ut=[0,0,0],st=[1,1,1],ct=[0,0,0,0],ft=E(1,1,1,1,"cover"),ht=null,dt=0,mt=0,vt=0,gt=0;const pt=()=>{lt!==v&&(lt=v,ut=y(v.ink),st=y("auto"===v.highlight?"#ffffff":v.highlight),ct="transparent"===v.background?[0,0,0,0]:[...y(v.background),1]),ht===v&&dt===z&&mt===O&&vt===ee&&gt===te||(ht=v,dt=z,mt=O,vt=ee,gt=te,ft=E(z,O,ee||1,te||1,v.fit,v.focus));const e=v.fluid,t=Q&&ie?q.height/O*ie*ft.scale[1]:1,n=(()=>{const[e,t]=We(),n=Math.ceil(z/e-1e-4),r=Math.ceil(O/t-1e-4);if(P&&P.columns===n&&P.rows===r)return P;Oe();const i=()=>{const e=ze(A.NEAREST);return A.texStorage2D(A.TEXTURE_2D,1,L?A.RGBA8:A.RGBA16F,n,r),e},o=i(),a=i(),l=A.createFramebuffer();return A.bindFramebuffer(A.FRAMEBUFFER,l),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT0,A.TEXTURE_2D,o,0),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT1,A.TEXTURE_2D,a,0),A.drawBuffers([A.COLOR_ATTACHMENT0,A.COLOR_ATTACHMENT1]),P={ink:o,under:a,buffer:l,columns:n,rows:r}})(),r=k.locations,i=C.locations,o=w(v),a=!Ue();A.bindFramebuffer(A.FRAMEBUFFER,n.buffer),A.viewport(0,0,n.columns,n.rows),A.useProgram(k.program),A.activeTexture(A.TEXTURE0),A.bindTexture(A.TEXTURE_2D,D),A.uniform1i(r.uSource,0),A.activeTexture(A.TEXTURE2),A.bindTexture(A.TEXTURE_2D,(N?X?.velocity:B[J])??D),A.uniform1i(r.uFluid,2),A.activeTexture(A.TEXTURE3),A.bindTexture(A.TEXTURE_2D,_e??D),A.uniform1i(r.uTrailMap,3),A.uniform1f(r.uFluidMode,N?1:0),A.uniform1i(r.uHoverMode,"fluid"===o?1:"lantern"===o?2:"trail"===o&&Se?3:0),A.uniform1f(r.uTrailAmount,v.trail.strength),A.uniform3f(r.uLight,Fe.at?.[0]??-1,Fe.at?.[1]??-1,"lantern"===o?Fe.strength:0),A.uniform3fv(r.uTrail,Ae),A.uniform1f(r.uLightRadius,v.lantern.radius),A.uniform1f(r.uLightGain,v.lantern.strength),A.uniform1f(r.uClock,performance.now()/1e3),A.uniform1f(r.uFlicker,a?1:0),A.uniform2f(r.uFluidTexel,1/Math.max(1,j),1/Math.max(1,K)),A.uniform2f(r.uResolution,z,O);const[l,u]=We();A.uniform2f(r.uCell,l,u),A.uniform1f(r.uCount,$),A.uniform4f(r.uSourceMap,ft.scale[0],ft.scale[1],ft.offset[0],ft.offset[1]),A.uniform1i(r.uScene,Q?0:"flow"===v.scene?1:"orb"===v.scene?2:"drift"===v.scene?4:3),A.uniform1i(r.uMark,"dot"===v.mark?1:0),A.uniform1f(r.uScale,v.scale);const s=v.clear;A.uniform4f(r.uClear,s?s.x:0,s?s.y:0,s?s.width:0,s?s.height:0),A.uniform1f(r.uClearFeather,s?s.feather:.1),A.uniform1f(r.uClearShape,s&&"rect"===s.shape?1:0);const c=performance.now();Me.fill(0);for(let e=0;e<we.length;e++){const t=we[e],n=4*e;Me[n]=t.x,Me[n+1]=t.y,Me[n+2]=(c-t.born)/1e3,Me[n+3]=t.strength}A.uniform4fv(r.uPulse,Me),A.uniform3fv(r.uInk,ut),A.uniform3fv(r.uHighlight,st),A.uniform1f(r.uHighlightAuto,"auto"===v.highlight?1:0),A.uniform4fv(r.uBackground,ct),A.uniform1f(r.uBrightness,v.brightness),A.uniform1f(r.uContrast,v.contrast),A.uniform1f(r.uGamma,v.gamma),A.uniform1f(r.uInvert,v.invert?1:0),A.uniform1f(r.uVignette,v.vignette),A.uniform1f(r.uSourceColor,"source"===v.color?1:0),A.uniform1f(r.uRefraction,e?e.refraction*(a?1:.25):0),A.uniform1f(r.uGlow,e?e.glow:0),A.uniform1f(r.uTime,fe),A.uniform1f(r.uDrift,a?v.drift:0),A.uniform1f(r.uFluidOn,e&&"fluid"===o&&(B.length||N)?1:0),A.uniform1f(r.uLod,Math.max(0,Math.log2(Math.max(1,t))-.5)),A.uniform1f(r.uSaturation,v.saturation),A.uniform1f(r.uShade,v.shade),A.uniform1f(r.uBackdrop,Q?v.backdrop:0),A.uniform2f(r.uLevels,Q&&"auto"===v.levels?le[0]:0,Q&&"auto"===v.levels?le[1]:1),A.bindVertexArray(V),A.drawArrays(A.TRIANGLES,0,3),A.bindFramebuffer(A.FRAMEBUFFER,null),A.viewport(0,0,z,O),A.useProgram(C.program),A.activeTexture(A.TEXTURE1),A.bindTexture(A.TEXTURE_2D,S),A.uniform1i(i.uAtlas,1),A.activeTexture(A.TEXTURE4),A.bindTexture(A.TEXTURE_2D,n.ink),A.uniform1i(i.uCells,4),A.activeTexture(A.TEXTURE5),A.bindTexture(A.TEXTURE_2D,n.under),A.uniform1i(i.uUnder,5),A.uniform2f(i.uResolution,z,O),A.uniform2f(i.uCell,q.width,q.height),A.uniform2f(i.uPitch,l,u),A.uniform1f(i.uColumns,q.columns),A.uniform1f(i.uDotScale,v.dotScale),A.uniform1i(i.uMark,"dot"===v.mark?1:0),A.drawArrays(A.TRIANGLES,0,3)},xt=()=>!de&&!me&&!ve&&(pe||Ie)&&!("undefined"!=typeof document&&document.hidden),Et=e=>{if(se=0,!xt())return;const t=(e-ce)/1e3,n=Math.min(1/30,Math.max(1/480,t));ce=e,Te=.9*Te+.1*Math.min(t,.25),ye=Te>1/24?ye+1:0;try{ye>45&&be<2&&(ye=0,be++,1===be&&W>1?(v={...v,maxPixelRatio:1},at()):be=2);const t=He(),r=!(ge||be>=2&&!(Q instanceof HTMLVideoElement)||(!(Q instanceof HTMLVideoElement)||Q.paused||Q.ended)&&(Ue()||!(!Q&&"none"!==v.scene||v.drift>0)));r&&(fe+=n*v.speed),Q instanceof HTMLVideoElement&&Q.readyState>=2&&oe&&(oe=!("requestVideoFrameCallback"in Q),it(),he=!0);const i=w(v);let o="fluid"===i&&(null!==Ee||e<ke);if(o?((e,t)=>{const n=v.fluid;if(!n||!I.length&&!N)return;if(N?!X?.ready():!U||!Ge(U))return;const r=z/O,i=Ee;if(Ee=null,N&&X){const o=5200*n.force*(Ue()?.35:1);return i&&(ke=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void X.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Ue()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,ke=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=U.locations;A.bindFramebuffer(A.FRAMEBUFFER,I[1-J]),A.viewport(0,0,j,K),A.useProgram(U.program),A.activeTexture(A.TEXTURE0),A.bindTexture(A.TEXTURE_2D,B[J]),A.uniform1i(l.uPrevious,0),A.uniform2f(l.uSize,j,K),A.uniform1f(l.uAspect,r),A.uniform1f(l.uDt,e),A.uniform1f(l.uDecay,n.dissipation),A.uniform1f(l.uEnergyDecay,1.1*n.dissipation),A.uniform1f(l.uRadius,n.radius),A.uniform1f(l.uSplat,i?1:0),A.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),A.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),A.uniform2f(l.uForce,o,a),A.drawArrays(A.TRIANGLES,0,3),J=1-J})(n,e):Ee=null,"lantern"===i&&(o=((e,t)=>{const n=v.lantern,r=Fe.target;if(r){const i=Fe.at;if(i)if(Ue())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Fe.at=[r[0],r[1]];const o=Fe.at,a=Fe.trail[Fe.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Fe.trail.push({x:o[0],y:o[1],born:t}),Fe.trail.length>12&&Fe.trail.shift())}Fe.strength+=((r?1:0)-Fe.strength)*(1-Math.exp(-e*(r?9:5)));const i=Fe.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);Ae.fill(0);for(let e=0;e<i.length;e++){const r=i[e];Ae[3*e]=r.x,Ae[3*e+1]=r.y,Ae[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Fe.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!Le?.active;o=(e=>{const t=De();return!(!t||!t.active||(t.step(e),A.bindTexture(A.TEXTURE_2D,_e),A.texSubImage2D(A.TEXTURE_2D,0,0,0,t.width,t.height,A.RGBA,A.UNSIGNED_BYTE,t.pixels),Se=!0,0))})(n)||o,e&&!Le?.active&&(he=!0)}if(we.length){for(let t=we.length-1;t>=0;t--)e-we[t].born>=2400&&we.splice(t,1);o=!0,we.length||(he=!0)}t&&(r||o||he)&&(pt(),he=!1,!Ie||ne&&!Q||(Ie=!1,Pe())),(r||o||Ee||!t)&&(se=requestAnimationFrame(Et))}catch(e){ve=!0,Xe(e)}};function Tt(){!se&&xt()&&(ce=performance.now(),se=requestAnimationFrame(Et))}const yt=(e,n)=>{const r=t.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(n-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},bt=e=>{const t=w(v);if("none"===t||ge)return xe=null,void(Fe.target=null);if("lantern"===t)return Fe.target=e?[e[0],1-e[1]]:null,xe=null,void Tt();if("trail"===t){const t=De();if(!t)return;return e?t.move(e[0],1-e[1],v.trail.radius,performance.now()):t.leave(),xe=null,void Tt()}e?(xe&&(Ee=Ee?{from:Ee.from,to:e}:{from:xe,to:e}),xe=e,Tt()):xe=null},wt=e=>bt(yt(e.clientX,e.clientY)),Mt=()=>{xe=null,Le?.leave(),Fe.target&&(Fe.target=null,Tt())},Rt=f.interactionTarget??window;Rt.addEventListener("pointermove",wt,{passive:!0}),Rt.addEventListener("pointerdown",wt,{passive:!0}),document.addEventListener("pointerleave",Mt),Rt!==window&&Rt.addEventListener("pointerleave",Mt);const Ft="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=at();Re(),(e||he)&&Tt()}):null;Ft?.observe(t),m&&Ft?.observe(m.element);const At="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{pe=e.isIntersecting,pe&&(he=!0,Tt())},{rootMargin:"120px"}):null;At?.observe(t);const Lt=()=>{document.hidden||(he=!0,Tt())};document.addEventListener("visibilitychange",Lt);const _t=()=>{he=!0,Tt()};Ce?.addEventListener?.("change",_t),Ze?.addEventListener?.("loadingdone",nt);const St=e=>{e.preventDefault(),me=!0,se&&cancelAnimationFrame(se),se=0},Dt=()=>{me=!1,H.length=0,G=null,k=C=U=null,P=null,B=[],I=[],X=null,N=!1,_e=null,Le=null,Se=!1;try{ot(),he=!0,Tt()}catch(e){Xe(e)}};t.addEventListener("webglcontextlost",St),t.addEventListener("webglcontextrestored",Dt);const kt=()=>{Z&&(Z.pause(),Z.removeAttribute("src"),Z.load(),Z=null),ae&&Q instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in Q&&Q.cancelVideoFrameCallback(ae),ae=0},Ct=()=>{re?.close(),re=null},Ut=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,z,O,q.height,v.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Pt=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),Bt=async e=>{const t=++ne;if(!e)return kt(),Ct(),Q=null,ee=te=ie=0,he=!0,void Tt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(F.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Pt(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Pt(e)}if(!/svg/i.test(t.type))try{return await Ut(t)}catch{}const n=URL.createObjectURL(t);try{return await Pt(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(de||t!==ne)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());kt(),Ct(),Z=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(re=r),Q=r,ie=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,ee=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),te=n.natural?.[1]??ie,oe=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{de||Q!==e||(oe=!0,Tt(),ae=t.requestVideoFrameCallback(n))};ae=t.requestVideoFrameCallback(n)})(r),me||it(),he=!0,Tt()}catch(e){Ie&&t===ne&&(Ie=!1,Pe()),Xe(e)}};ot(),Re();const It=f.source??null;return It?(ne=1,Bt(It)):Tt(),{canvas:t,ready:Be,get settings(){return v},update(e){const n=v,{element:r,rest:i}=d(e);"clear"in e&&(m&&m.element!==r?.element&&Ft?.unobserve(m.element),m=r,r&&Ft?.observe(r.element)),v=x(r?{...i,clear:v.clear}:i,v),Re(),e.label&&t.setAttribute("aria-label",e.label),v.maxPixelRatio!==n.maxPixelRatio&&at(),v.charset===n.charset&&v.cellSize===n.cellSize&&v.cellAspect===n.cellAspect&&v.font===n.font&&v.fontWeight===n.fontWeight&&v.glyphScale===n.glyphScale||(Qe(),et()),v.levels!==n.levels&&rt();((!!n.fluid&&"fluid"===w(n))!==Ye()||v.fluid&&n.fluid&&v.fluid.resolution!==n.fluid.resolution)&&je(),"source"in e&&Bt(e.source??null),he=!0,Tt()},setSource:Bt,pointer(e,n=0){if(null===e)return void bt(null);const r=t.getBoundingClientRect();bt(yt(r.left+e,r.top+n))},redraw(){if(!(de||me||ve)&&z)try{He(!0)&&pt()}catch(e){ve=!0,Xe(e)}},pulse(e={}){if(de||Ue())return;const n=t.getBoundingClientRect();if(!n.width||!n.height)return;let r=e.x??n.width/2,i=e.y??n.height/2;if(e.element){const t=e.element.getBoundingClientRect();r=t.left+t.width/2-n.left,i=t.top+t.height/2-n.top}const o=Math.max(0,Math.min(2,e.strength??1));we=[...we,{x:r/n.width,y:i/n.height,born:performance.now(),strength:o}].slice(-4),Tt()},play(){ge=!1,Q instanceof HTMLVideoElement&&Q.play().catch(()=>{}),he=!0,Tt()},pause(){ge=!0,Q instanceof HTMLVideoElement&&Q.pause()},resize(){at()&&Tt()},destroy(){if(!de&&(de=!0,se&&cancelAnimationFrame(se),Rt.removeEventListener("pointermove",wt),Rt.removeEventListener("pointerdown",wt),document.removeEventListener("pointerleave",Mt),Rt.removeEventListener("pointerleave",Mt),document.removeEventListener("visibilitychange",Lt),Ce?.removeEventListener?.("change",_t),Ze?.removeEventListener?.("loadingdone",nt),t.removeEventListener("webglcontextlost",St),t.removeEventListener("webglcontextrestored",Dt),Ft?.disconnect(),At?.disconnect(),kt(),Ct(),Q=null,!me)){qe(),Oe(),A.deleteTexture(S),A.deleteTexture(D);for(const e of[k,C,U])e&&A.deleteProgram(e.program);X?.dispose(),_e&&A.deleteTexture(_e),H.forEach(e=>A.deleteShader(e)),V&&A.deleteVertexArray(V)}}}},exports.normalizeFieldSettings=x;//# sourceMappingURL=field.cjs.map
+"use strict";var e=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",t="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",n=t+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",r=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",i=t+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",o=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",a=t+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",l=t+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=t+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",s=t+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var c=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const u=Math.min(this.width,this.height),s=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/u/s),f=1-Math.exp(-c/2.2),h=u*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,p=a/l,g=-p,x=v,E=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),u=Math.min(this.width-2,Math.ceil(o+3*h)),s=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=s;e<=c;e++)for(let t=l;t<=u;t++){const n=((t-o)*v+(e-a)*p)/h,r=((t-o)*g+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const u=1-r*r*.55,s=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*u+g*s)*i*E)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(p*u+x*s)*i*E))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,u=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),s=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|u,f=0|s,h=u-c,d=s-f,m=f*n+c,v=(1-h)*(1-d),p=h*(1-d),g=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*p+this.u[m+n]*g+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*p+this.v[m+n]*g+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*p+this.ink[m+n]*g+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,u=this.curl[i]*e*10,s=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*u,this.v[i]-=o/l*u;const c=Math.min(1,s/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},f={radius:.13,strength:.5,trail:.45,follow:12},h={strength:.55,radius:.45},d={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},m={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",blend:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:d,lantern:f,trail:h,maxPixelRatio:2,respectReducedMotion:!0},v=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,p=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function g(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function x(e={},t=m){const n="string"==typeof e.charset&&g(e.charset).length>=2?e.charset:t.charset,r=t.fluid||d,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:v(e.radius,.005,.5,d.radius),force:v(e.force,0,8,d.force),dissipation:v(e.dissipation,.05,20,d.dissipation),refraction:v(e.refraction,0,.5,d.refraction),glow:v(e.glow,0,2,d.glow),resolution:Math.round(v(e.resolution,16,512,d.resolution)),curl:v(e.curl,0,80,d.curl)}})(),a="none"===e.scene||"flow"===e.scene||"orb"===e.scene||"drift"===e.scene?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),u=void 0===e.clear||l?t.clear:e.clear,s=!!u&&{x:v(u.x,-.5,1.5,.25),y:v(u.y,-.5,1.5,.3),width:v(u.width,0,2,.5),height:v(u.height,0,2,.4),feather:v(u.feather,.005,1,.12),shape:"rect"===u.shape?"rect":"ellipse"};return{charset:n,cellSize:v(e.cellSize,3,96,t.cellSize),cellAspect:v(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(v(e.fontWeight,100,900,t.fontWeight)),glyphScale:v(e.glyphScale,.3,1.6,t.glyphScale),mark:"dot"===e.mark||"glyph"===e.mark?e.mark:t.mark,dotScale:v(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:p(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":p(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":p(e.background,t.background),brightness:v(e.brightness,-1,1,t.brightness),contrast:v(e.contrast,0,4,t.contrast),gamma:v(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,blend:"auto"===e.blend||"coarse"===e.blend||"on"===e.blend||"off"===e.blend?e.blend:t.blend,saturation:v(e.saturation,0,3,t.saturation),shade:v(e.shade,0,1,t.shade),backdrop:v(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:v(e.focus?.x,0,1,t.focus.x),y:v(e.focus?.y,0,1,t.focus.y)},vignette:v(e.vignette,0,1,t.vignette),drift:v(e.drift,0,2,t.drift),scene:a,scale:v(e.scale,.2,6,t.scale),clear:s,speed:v(e.speed,0,5,t.speed),hover:"fluid"===e.hover||"lantern"===e.hover||"trail"===e.hover||"none"===e.hover?e.hover:t.hover,fluid:o,lantern:{radius:v(e.lantern?.radius,.02,.6,t.lantern.radius),strength:v(e.lantern?.strength,0,1.5,t.lantern.strength),trail:v(e.lantern?.trail,0,3,t.lantern.trail),follow:v(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:v(e.trail?.strength,0,1,t.trail.strength),radius:v(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:v(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function E(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,u=l>a,s="cover"===i?u?[a/l,1]:[1,l/a]:u?[1,l/a]:[a/l,1];return{scale:s,offset:"cover"===i?[(1-s[0])*o.x,(1-s[1])*o.y]:[.5*(1-s[0]),.5*(1-s[1])]}}function T(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function y(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function b(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var w=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function M(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var R,F=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,A=/swiftshader|llvmpipe|softpipe|software|basic render/i;function L(){if(R)return R;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return R="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return R="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),R=A.test(n)?"software":"gpu"}catch{return R="none"}}exports.DEFAULT_FIELD_FLUID=d,exports.DEFAULT_FIELD_LANTERN=f,exports.DEFAULT_FIELD_SETTINGS=m,exports.DEFAULT_FIELD_TRAIL=h,exports.FIELD_HOVERS=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],exports.activeFieldHover=w,exports.fieldCellLayout=T,exports.fieldClearFromRects=M,exports.fieldGlyphs=g,exports.fieldLevels=b,exports.fieldSourceRect=E,exports.glyphFieldTier=L,exports.isGlyphFieldSupported=function(e={}){const t=L();return"gpu"===t||"software"===t&&!!e.allowSoftware},exports.mountGlyphField=function(t,f={}){const h=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,d=e=>{const t=e.clear;return h(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&h(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let m=d(f).element,v=x(d(f).rest);const p=f.onError,R=t.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!R)throw new Error("WebGL2 is not available for the glyph field.");const A=R;t.setAttribute("role","img"),t.setAttribute("aria-label",f.label??"ASCII artwork"),t.dataset.renderer="glyph-field";let L=!1;const _=A.getExtension("KHR_parallel_shader_compile");let S,D,k=null,C=null,U=null,P=null,B=[],I=[],X=null,N=!1,V=null,G=null;const H=[];let z=0,O=0,W=1,Y=0,q=T(v.cellSize,v.cellAspect,1,2),$=2,j=0,K=0,J=0,Q=null,Z=!1,ee=null,te=0,ne=0,re=0,ie=null,oe=0,ae=!0,le=0,ue=[0,1],se=-1/0,ce=0,fe=0,he=0,de=!0,me=!1,ve=!1,pe=!1,ge=!1,xe=!0,Ee=null,Te=null,ye=1/60,be=0,we=0,Me=[];const Re=new Float32Array(16),Fe=()=>{if(!m)return;const{element:e,padding:n=32,feather:r=.16,shape:i="rect"}=m,o=M(t.getBoundingClientRect(),e.getBoundingClientRect(),n,r,i),a=v.clear;JSON.stringify(a)!==JSON.stringify(o)&&(v={...v,clear:o},de=!0)},Ae={target:null,at:null,strength:0,trail:[]},Le=new Float32Array(36);let _e=null,Se=null,De=!1;const ke=()=>{if(!z||!O)return null;const e=z/O,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return _e&&_e.width===t&&_e.height===n||(_e=new c(t,n),Se||(Se=Oe(A.LINEAR)),A.bindTexture(A.TEXTURE_2D,Se),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,t,n,0,A.RGBA,A.UNSIGNED_BYTE,_e.pixels),De=!0),_e};let Ce=0;const Ue="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Pe=()=>v.respectReducedMotion&&!!Ue?.matches;let Be;const Ie=new Promise(e=>{Be=e});let Xe=!0;const Ne=e=>p?.(e instanceof Error?e:new Error(String(e))),Ve=(e,t)=>{const n=A.createShader(e);return H.push(n),A.shaderSource(n,t),A.compileShader(n),n},Ge=e=>{G??(G=Ve(A.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=A.createProgram(),n=Ve(A.FRAGMENT_SHADER,e);return A.attachShader(t,G),A.attachShader(t,n),A.linkProgram(t),{program:t,locations:null,fragment:n}},He=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&_&&!A.getProgramParameter(n,_.COMPLETION_STATUS_KHR))return!1;if(!A.getProgramParameter(n,A.LINK_STATUS)){if(A.isContextLost())return!1;throw new Error(A.getShaderInfoLog(r)||A.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=A.getProgramParameter(n,A.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=A.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=A.getUniformLocation(n,t)}return e.locations=i,!0},ze=(e=!1)=>!!k&&!!C&&He(k,e)&&He(C,e),Oe=e=>{const t=A.createTexture();return A.bindTexture(A.TEXTURE_2D,t),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_MIN_FILTER,e),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_MAG_FILTER,e===A.LINEAR_MIPMAP_LINEAR?A.LINEAR:e),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_WRAP_S,A.CLAMP_TO_EDGE),A.texParameteri(A.TEXTURE_2D,A.TEXTURE_WRAP_T,A.CLAMP_TO_EDGE),t},We=()=>{P&&(A.deleteTexture(P.ink),A.deleteTexture(P.under),A.deleteFramebuffer(P.buffer),P=null)},Ye=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,u=l*n;return[i/Math.max(1,Math.floor(i/u+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(v.cellFit,v.cellSize,v.cellAspect,W,z,O,q),qe=()=>!!v.fluid&&"fluid"===w(v),$e=()=>{X?.release(),N=!1,B.forEach(e=>A.deleteTexture(e)),I.forEach(e=>A.deleteFramebuffer(e)),B=[],I=[]};function je(){U&&A.deleteProgram(U.program),U=Ge((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${e(t)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(L)),X?.dispose(),X=L?null:function(e,t,c){const f={splat:t(n),curl:t(r),vorticity:t(i),divergence:t(o),fade:t(a),pressure:t(l),gradient:t(u),advect:t(s)},h=Object.values(f);let d=0,m=0,v=[],p=[],g=null,x=null;const E=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},T=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},y=()=>{[...v,...p,g,x].forEach(T),v=[],p=[],g=x=null},b=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},w=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){y(),d=t,m=n;const r=[E(e.LINEAR),E(e.LINEAR),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(T),!1):(v=[r[0],r[1]],p=[r[2],r[3]],g=r[4],x=r[5],!0)},ready:()=>h.every(c),step(t,n){if(!v.length||!g||!x)return;let r;e.viewport(0,0,d,m),t&&(r=b(f.splat,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=b(f.curl,x),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.vorticity,v[1]),w(r,"uVelocity",0,v[0].texture),w(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=b(f.divergence,g),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.fade,p[1]),w(r,"uSource",0,p[0].texture),e.uniform1f(r.uAmount,.8),M(),R(p);for(let e=0;e<20;e++)r=b(f.pressure,p[1]),w(r,"uPressure",0,p[0].texture),w(r,"uDivergence",1,g.texture),M(),R(p);r=b(f.gradient,v[1]),w(r,"uPressure",0,p[0].texture),w(r,"uVelocity",1,v[0].texture),M(),R(v),r=b(f.advect,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:y,dispose(){y(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(A,Ge,e=>He(e))}const Ke=()=>{$e();const e=v.fluid;if(!(e&&qe()&&z&&O))return;U||je();const t=e.resolution,n=z/O;if(j=n>=1?t:Math.max(8,Math.round(t*n)),K=n>=1?Math.max(8,Math.round(t/n)):t,N=!!X&&X.resize(j,K),N)return void(J=0);const r=()=>{$e();for(let e=0;e<2;e++){const e=Oe(A.LINEAR);A.texImage2D(A.TEXTURE_2D,0,L?A.RGBA8:A.RGBA16F,j,K,0,A.RGBA,L?A.UNSIGNED_BYTE:A.HALF_FLOAT,null);const t=A.createFramebuffer();A.bindFramebuffer(A.FRAMEBUFFER,t),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT0,A.TEXTURE_2D,e,0),B.push(e),I.push(t)}return A.checkFramebufferStatus(A.FRAMEBUFFER)===A.FRAMEBUFFER_COMPLETE};if(!r()){if(L)throw new Error("The glyph field could not allocate its fluid buffers.");L=!0,Je(),je(),r()}for(const e of I)A.bindFramebuffer(A.FRAMEBUFFER,e),A.viewport(0,0,j,K),A.clearColor(L?.5:0,L?.5:0,0,1),A.clear(A.COLOR_BUFFER_BIT);A.bindFramebuffer(A.FRAMEBUFFER,null),J=0};function Je(){k&&A.deleteProgram(k.program),C&&A.deleteProgram(C.program),We(),k=Ge((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount, uBlend;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${e(t)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  // Blend: a shade between two characters takes the upper one in the share of cells a 4x4 Bayer pattern gives it.\n  float level=tone*(uCount-1.),upper=fract(level)>=.5?1.:0.;\n  if(uBlend>.5&&tone>.02&&tone<.98){\n    ivec2 q=ivec2(mod(gl_FragCoord.xy,4.));\n    upper=fract(level)>(BAYER[q.y*4+q.x]+.5)/16.?1.:0.;\n  }\n  float index=min(uCount-1.,floor(level)+upper+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Halftone keeps the tone for the dot size; glyphs keep their atlas index, exact in 8 bits.\n  outInk=vec4(ink,uMark==1?(tone>.003?tone:0.):index/255.);\n  outUnder=vec4(under,underAlpha);\n}`)(L)),C=Ge("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale;\nuniform int uMark;\nout vec4 outColor;\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else {\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  }\n  outColor=vec4(ink.rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),_||ze(!0)}const Qe=()=>`${v.fontWeight} ${Math.max(1,q.height*v.glyphScale)}px ${v.font}`,Ze=()=>{const e=g(v.charset);$=e.length,q=T(v.cellSize,v.cellAspect,W,$),Y=W;const t=document.createElement("canvas");t.width=q.atlasWidth,t.height=q.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=Qe();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||q.height*v.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=(q.height+i-o)/2;e.forEach((e,t)=>{const r=t%q.columns*q.width+q.width/2,i=Math.floor(t/q.columns)*q.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-q.width/2,i-a,q.width,q.height),n.clip(),n.translate(r,i),o>.96*q.width&&n.scale(.96*q.width/o,1),n.fillText(e,0,0),n.restore()}),A.bindTexture(A.TEXTURE_2D,S),A.pixelStorei(A.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,A.RGBA,A.UNSIGNED_BYTE,t),t.width=t.height=1,de=!0},et="undefined"==typeof document?void 0:document.fonts,tt=()=>{if(!et?.load)return;const e=Qe();et.load(e,g(v.charset).join("")).then(()=>{me||ve||Qe()!==e||(Ze(),yt())},()=>{})},nt=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),rt=e=>{const t=e.fontfaces??[],n=v.font.split(",").map(nt);t.some(e=>n.includes(nt(e.family)))&&tt()},it=()=>{if(ue=[0,1],Q&&"none"!==v.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});Q===ie&&(t.imageSmoothingQuality="medium"),t.drawImage(Q,0,0,64,64),ue=b(t.getImageData(0,0,64,64).data)}catch{ue=[0,1]}},ot=()=>{if(!Q)return;const e=performance.now();Q instanceof HTMLVideoElement&&!(e-se>1500)||(it(),se=e),A.bindTexture(A.TEXTURE_2D,D),A.pixelStorei(A.UNPACK_FLIP_Y_WEBGL,!1),A.pixelStorei(A.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,A.RGBA,A.UNSIGNED_BYTE,Q),A.generateMipmap(A.TEXTURE_2D)}catch(e){Ne(e)}},at=()=>{L=!A.getExtension("EXT_color_buffer_float")&&!A.getExtension("EXT_color_buffer_half_float"),Je(),V=A.createVertexArray(),S=Oe(A.NEAREST),D=Oe(A.LINEAR_MIPMAP_LINEAR),A.bindTexture(A.TEXTURE_2D,D),A.texImage2D(A.TEXTURE_2D,0,A.RGBA8,1,1,0,A.RGBA,A.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),A.generateMipmap(A.TEXTURE_2D),z=O=0,Y=0,lt(),tt(),Q&&ot()};function lt(){const e=t.clientWidth||t.clientHeight?{width:t.clientWidth,height:t.clientHeight}:t.getBoundingClientRect(),n=Math.min(globalThis.devicePixelRatio||1,v.maxPixelRatio),r=Math.max(1,Math.round(e.width*n)),i=Math.max(1,Math.round(e.height*n));if(r===z&&i===O&&n===W)return!1;const o=!z||Math.abs(r/i-z/O)>.01;return W=n,z=r,O=i,t.width=z,t.height=O,Y!==W&&Ze(),(o||qe()&&!B.length&&!N)&&Ke(),de=!0,!0}let ut=null,st=[0,0,0],ct=[1,1,1],ft=[0,0,0,0],ht=E(1,1,1,1,"cover"),dt=null,mt=0,vt=0,pt=0,gt=0;const xt=()=>{ut!==v&&(ut=v,st=y(v.ink),ct=y("auto"===v.highlight?"#ffffff":v.highlight),ft="transparent"===v.background?[0,0,0,0]:[...y(v.background),1]),dt===v&&mt===z&&vt===O&&pt===te&&gt===ne||(dt=v,mt=z,vt=O,pt=te,gt=ne,ht=E(z,O,te||1,ne||1,v.fit,v.focus));const e=v.fluid,t=Q&&oe?q.height/O*oe*ht.scale[1]:1,n=(()=>{const[e,t]=Ye(),n=Math.ceil(z/e-1e-4),r=Math.ceil(O/t-1e-4);if(P&&P.columns===n&&P.rows===r)return P;We();const i=()=>{const e=Oe(A.NEAREST);return A.texStorage2D(A.TEXTURE_2D,1,L?A.RGBA8:A.RGBA16F,n,r),e},o=i(),a=i(),l=A.createFramebuffer();return A.bindFramebuffer(A.FRAMEBUFFER,l),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT0,A.TEXTURE_2D,o,0),A.framebufferTexture2D(A.FRAMEBUFFER,A.COLOR_ATTACHMENT1,A.TEXTURE_2D,a,0),A.drawBuffers([A.COLOR_ATTACHMENT0,A.COLOR_ATTACHMENT1]),P={ink:o,under:a,buffer:l,columns:n,rows:r}})(),r=k.locations,i=C.locations,o=w(v),a=!Pe();A.bindFramebuffer(A.FRAMEBUFFER,n.buffer),A.viewport(0,0,n.columns,n.rows),A.useProgram(k.program),A.activeTexture(A.TEXTURE0),A.bindTexture(A.TEXTURE_2D,D),A.uniform1i(r.uSource,0),A.activeTexture(A.TEXTURE2),A.bindTexture(A.TEXTURE_2D,(N?X?.velocity:B[J])??D),A.uniform1i(r.uFluid,2),A.activeTexture(A.TEXTURE3),A.bindTexture(A.TEXTURE_2D,Se??D),A.uniform1i(r.uTrailMap,3),A.uniform1f(r.uFluidMode,N?1:0),A.uniform1i(r.uHoverMode,"fluid"===o?1:"lantern"===o?2:"trail"===o&&De?3:0),A.uniform1f(r.uTrailAmount,v.trail.strength),A.uniform3f(r.uLight,Ae.at?.[0]??-1,Ae.at?.[1]??-1,"lantern"===o?Ae.strength:0),A.uniform3fv(r.uTrail,Le),A.uniform1f(r.uLightRadius,v.lantern.radius),A.uniform1f(r.uLightGain,v.lantern.strength),A.uniform1f(r.uClock,performance.now()/1e3),A.uniform1f(r.uFlicker,a?1:0),A.uniform2f(r.uFluidTexel,1/Math.max(1,j),1/Math.max(1,K)),A.uniform2f(r.uResolution,z,O);const[l,u]=Ye();A.uniform2f(r.uCell,l,u),A.uniform1f(r.uCount,$),A.uniform1f(r.uBlend,"on"===v.blend||$<=9&&("coarse"===v.blend||"auto"===v.blend&&Z)?1:0),A.uniform4f(r.uSourceMap,ht.scale[0],ht.scale[1],ht.offset[0],ht.offset[1]),A.uniform1i(r.uScene,Q?0:"flow"===v.scene?1:"orb"===v.scene?2:"drift"===v.scene?4:3),A.uniform1i(r.uMark,"dot"===v.mark?1:0),A.uniform1f(r.uScale,v.scale);const s=v.clear;A.uniform4f(r.uClear,s?s.x:0,s?s.y:0,s?s.width:0,s?s.height:0),A.uniform1f(r.uClearFeather,s?s.feather:.1),A.uniform1f(r.uClearShape,s&&"rect"===s.shape?1:0);const c=performance.now();Re.fill(0);for(let e=0;e<Me.length;e++){const t=Me[e],n=4*e;Re[n]=t.x,Re[n+1]=t.y,Re[n+2]=(c-t.born)/1e3,Re[n+3]=t.strength}A.uniform4fv(r.uPulse,Re),A.uniform3fv(r.uInk,st),A.uniform3fv(r.uHighlight,ct),A.uniform1f(r.uHighlightAuto,"auto"===v.highlight?1:0),A.uniform4fv(r.uBackground,ft),A.uniform1f(r.uBrightness,v.brightness),A.uniform1f(r.uContrast,v.contrast),A.uniform1f(r.uGamma,v.gamma),A.uniform1f(r.uInvert,v.invert?1:0),A.uniform1f(r.uVignette,v.vignette),A.uniform1f(r.uSourceColor,"source"===v.color?1:0),A.uniform1f(r.uRefraction,e?e.refraction*(a?1:.25):0),A.uniform1f(r.uGlow,e?e.glow:0),A.uniform1f(r.uTime,he),A.uniform1f(r.uDrift,a?v.drift:0),A.uniform1f(r.uFluidOn,e&&"fluid"===o&&(B.length||N)?1:0),A.uniform1f(r.uLod,Math.max(0,Math.log2(Math.max(1,t))-.5)),A.uniform1f(r.uSaturation,v.saturation),A.uniform1f(r.uShade,v.shade),A.uniform1f(r.uBackdrop,Q?v.backdrop:0),A.uniform2f(r.uLevels,Q&&"auto"===v.levels?ue[0]:0,Q&&"auto"===v.levels?ue[1]:1),A.bindVertexArray(V),A.drawArrays(A.TRIANGLES,0,3),A.bindFramebuffer(A.FRAMEBUFFER,null),A.viewport(0,0,z,O),A.useProgram(C.program),A.activeTexture(A.TEXTURE1),A.bindTexture(A.TEXTURE_2D,S),A.uniform1i(i.uAtlas,1),A.activeTexture(A.TEXTURE4),A.bindTexture(A.TEXTURE_2D,n.ink),A.uniform1i(i.uCells,4),A.activeTexture(A.TEXTURE5),A.bindTexture(A.TEXTURE_2D,n.under),A.uniform1i(i.uUnder,5),A.uniform2f(i.uResolution,z,O),A.uniform2f(i.uCell,q.width,q.height),A.uniform2f(i.uPitch,l,u),A.uniform1f(i.uColumns,q.columns),A.uniform1f(i.uDotScale,v.dotScale),A.uniform1i(i.uMark,"dot"===v.mark?1:0),A.drawArrays(A.TRIANGLES,0,3)},Et=()=>!me&&!ve&&!pe&&(xe||Xe)&&!("undefined"!=typeof document&&document.hidden),Tt=e=>{if(ce=0,!Et())return;const t=(e-fe)/1e3,n=Math.min(1/30,Math.max(1/480,t));fe=e,ye=.9*ye+.1*Math.min(t,.25),be=ye>1/24?be+1:0;try{be>45&&we<2&&(be=0,we++,1===we&&W>1?(v={...v,maxPixelRatio:1},lt()):we=2);const t=ze(),r=!(ge||we>=2&&!(Q instanceof HTMLVideoElement)||(!(Q instanceof HTMLVideoElement)||Q.paused||Q.ended)&&(Pe()||!(!Q&&"none"!==v.scene||v.drift>0)));r&&(he+=n*v.speed),Q instanceof HTMLVideoElement&&Q.readyState>=2&&ae&&(ae=!("requestVideoFrameCallback"in Q),ot(),de=!0);const i=w(v);let o="fluid"===i&&(null!==Te||e<Ce);if(o?((e,t)=>{const n=v.fluid;if(!n||!I.length&&!N)return;if(N?!X?.ready():!U||!He(U))return;const r=z/O,i=Te;if(Te=null,N&&X){const o=5200*n.force*(Pe()?.35:1);return i&&(Ce=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void X.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Pe()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,Ce=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=U.locations;A.bindFramebuffer(A.FRAMEBUFFER,I[1-J]),A.viewport(0,0,j,K),A.useProgram(U.program),A.activeTexture(A.TEXTURE0),A.bindTexture(A.TEXTURE_2D,B[J]),A.uniform1i(l.uPrevious,0),A.uniform2f(l.uSize,j,K),A.uniform1f(l.uAspect,r),A.uniform1f(l.uDt,e),A.uniform1f(l.uDecay,n.dissipation),A.uniform1f(l.uEnergyDecay,1.1*n.dissipation),A.uniform1f(l.uRadius,n.radius),A.uniform1f(l.uSplat,i?1:0),A.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),A.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),A.uniform2f(l.uForce,o,a),A.drawArrays(A.TRIANGLES,0,3),J=1-J})(n,e):Te=null,"lantern"===i&&(o=((e,t)=>{const n=v.lantern,r=Ae.target;if(r){const i=Ae.at;if(i)if(Pe())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Ae.at=[r[0],r[1]];const o=Ae.at,a=Ae.trail[Ae.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Ae.trail.push({x:o[0],y:o[1],born:t}),Ae.trail.length>12&&Ae.trail.shift())}Ae.strength+=((r?1:0)-Ae.strength)*(1-Math.exp(-e*(r?9:5)));const i=Ae.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);Le.fill(0);for(let e=0;e<i.length;e++){const r=i[e];Le[3*e]=r.x,Le[3*e+1]=r.y,Le[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Ae.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!_e?.active;o=(e=>{const t=ke();return!(!t||!t.active||(t.step(e),A.bindTexture(A.TEXTURE_2D,Se),A.texSubImage2D(A.TEXTURE_2D,0,0,0,t.width,t.height,A.RGBA,A.UNSIGNED_BYTE,t.pixels),De=!0,0))})(n)||o,e&&!_e?.active&&(de=!0)}if(Me.length){for(let t=Me.length-1;t>=0;t--)e-Me[t].born>=2400&&Me.splice(t,1);o=!0,Me.length||(de=!0)}t&&(r||o||de)&&(xt(),de=!1,!Xe||re&&!Q||(Xe=!1,Be())),(r||o||Te||!t)&&(ce=requestAnimationFrame(Tt))}catch(e){pe=!0,Ne(e)}};function yt(){!ce&&Et()&&(fe=performance.now(),ce=requestAnimationFrame(Tt))}const bt=(e,n)=>{const r=t.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(n-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},wt=e=>{const t=w(v);if("none"===t||ge)return Ee=null,void(Ae.target=null);if("lantern"===t)return Ae.target=e?[e[0],1-e[1]]:null,Ee=null,void yt();if("trail"===t){const t=ke();if(!t)return;return e?t.move(e[0],1-e[1],v.trail.radius,performance.now()):t.leave(),Ee=null,void yt()}e?(Ee&&(Te=Te?{from:Te.from,to:e}:{from:Ee,to:e}),Ee=e,yt()):Ee=null},Mt=e=>wt(bt(e.clientX,e.clientY)),Rt=()=>{Ee=null,_e?.leave(),Ae.target&&(Ae.target=null,yt())},Ft=f.interactionTarget??window;Ft.addEventListener("pointermove",Mt,{passive:!0}),Ft.addEventListener("pointerdown",Mt,{passive:!0}),document.addEventListener("pointerleave",Rt),Ft!==window&&Ft.addEventListener("pointerleave",Rt);const At="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=lt();Fe(),(e||de)&&yt()}):null;At?.observe(t),m&&At?.observe(m.element);const Lt="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{xe=e.isIntersecting,xe&&(de=!0,yt())},{rootMargin:"120px"}):null;Lt?.observe(t);const _t=()=>{document.hidden||(de=!0,yt())};document.addEventListener("visibilitychange",_t);const St=()=>{de=!0,yt()};Ue?.addEventListener?.("change",St),et?.addEventListener?.("loadingdone",rt);const Dt=e=>{e.preventDefault(),ve=!0,ce&&cancelAnimationFrame(ce),ce=0},kt=()=>{ve=!1,H.length=0,G=null,k=C=U=null,P=null,B=[],I=[],X=null,N=!1,Se=null,_e=null,De=!1;try{at(),de=!0,yt()}catch(e){Ne(e)}};t.addEventListener("webglcontextlost",Dt),t.addEventListener("webglcontextrestored",kt);const Ct=()=>{ee&&(ee.pause(),ee.removeAttribute("src"),ee.load(),ee=null),le&&Q instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in Q&&Q.cancelVideoFrameCallback(le),le=0},Ut=()=>{ie?.close(),ie=null},Pt=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,z,O,q.height,v.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Bt=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),It=async e=>{const t=++re;if(!e)return Ct(),Ut(),Q=null,te=ne=oe=0,Z=!1,de=!0,void yt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(F.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Bt(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Bt(e)}if(!/svg/i.test(t.type))try{return await Pt(t)}catch{}const n=URL.createObjectURL(t);try{return await Bt(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(me||t!==re)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());Ct(),Ut(),ee=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(ie=r),Q=r,Z="string"==typeof e||e instanceof HTMLImageElement||e instanceof HTMLVideoElement,oe=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,te=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),ne=n.natural?.[1]??oe,ae=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{me||Q!==e||(ae=!0,yt(),le=t.requestVideoFrameCallback(n))};le=t.requestVideoFrameCallback(n)})(r),ve||ot(),de=!0,yt()}catch(e){Xe&&t===re&&(Xe=!1,Be()),Ne(e)}};at(),Fe();const Xt=f.source??null;return Xt?(re=1,It(Xt)):yt(),{canvas:t,ready:Ie,get settings(){return v},update(e){const n=v,{element:r,rest:i}=d(e);"clear"in e&&(m&&m.element!==r?.element&&At?.unobserve(m.element),m=r,r&&At?.observe(r.element)),v=x(r?{...i,clear:v.clear}:i,v),Fe(),e.label&&t.setAttribute("aria-label",e.label),v.maxPixelRatio!==n.maxPixelRatio&&lt(),v.charset===n.charset&&v.cellSize===n.cellSize&&v.cellAspect===n.cellAspect&&v.font===n.font&&v.fontWeight===n.fontWeight&&v.glyphScale===n.glyphScale||(Ze(),tt()),v.levels!==n.levels&&it();((!!n.fluid&&"fluid"===w(n))!==qe()||v.fluid&&n.fluid&&v.fluid.resolution!==n.fluid.resolution)&&Ke(),"source"in e&&It(e.source??null),de=!0,yt()},setSource:It,pointer(e,n=0){if(null===e)return void wt(null);const r=t.getBoundingClientRect();wt(bt(r.left+e,r.top+n))},redraw(){if(!(me||ve||pe)&&z)try{ze(!0)&&xt()}catch(e){pe=!0,Ne(e)}},pulse(e={}){if(me||Pe())return;const n=t.getBoundingClientRect();if(!n.width||!n.height)return;let r=e.x??n.width/2,i=e.y??n.height/2;if(e.element){const t=e.element.getBoundingClientRect();r=t.left+t.width/2-n.left,i=t.top+t.height/2-n.top}const o=Math.max(0,Math.min(2,e.strength??1));Me=[...Me,{x:r/n.width,y:i/n.height,born:performance.now(),strength:o}].slice(-4),yt()},play(){ge=!1,Q instanceof HTMLVideoElement&&Q.play().catch(()=>{}),de=!0,yt()},pause(){ge=!0,Q instanceof HTMLVideoElement&&Q.pause()},resize(){lt()&&yt()},destroy(){if(!me&&(me=!0,ce&&cancelAnimationFrame(ce),Ft.removeEventListener("pointermove",Mt),Ft.removeEventListener("pointerdown",Mt),document.removeEventListener("pointerleave",Rt),Ft.removeEventListener("pointerleave",Rt),document.removeEventListener("visibilitychange",_t),Ue?.removeEventListener?.("change",St),et?.removeEventListener?.("loadingdone",rt),t.removeEventListener("webglcontextlost",Dt),t.removeEventListener("webglcontextrestored",kt),At?.disconnect(),Lt?.disconnect(),Ct(),Ut(),Q=null,!ve)){$e(),We(),A.deleteTexture(S),A.deleteTexture(D);for(const e of[k,C,U])e&&A.deleteProgram(e.program);X?.dispose(),Se&&A.deleteTexture(Se),H.forEach(e=>A.deleteShader(e)),V&&A.deleteVertexArray(V)}}}},exports.normalizeFieldSettings=x;//# sourceMappingURL=field.cjs.map

package/dist/field.d.cts

@@ -97,6 +97,13 @@ interface GlyphFieldSettings {
     invert: boolean;
     /** Stretch the source's tonal range so the whole charset is used. */
     levels: 'auto' | 'none';
+    /**
+     * Shades between two characters, drawn by mixing them across neighbouring cells in a fixed 4x4 pattern, as print
+     * halftones do. 'auto' turns it on for photo and video sources drawn in nine or fewer characters, whose steps are coarse;
+     * drawn interface shapes stay crisp, and ramps of ten and more are left as they are. 'coarse' does the same for any
+     * source, for a canvas that paints photos. The pattern is locked to the grid, so it never shimmers.
+     */
+    blend: 'auto' | 'coarse' | 'on' | 'off';
     /** Glyph color saturation in source color mode. */
     saturation: number;
     /** How far darker tones dim the ink, so same-density glyphs such as words still carry the image. 0 is one flat ink. */

package/dist/field.d.ts

@@ -97,6 +97,13 @@ interface GlyphFieldSettings {
     invert: boolean;
     /** Stretch the source's tonal range so the whole charset is used. */
     levels: 'auto' | 'none';
+    /**
+     * Shades between two characters, drawn by mixing them across neighbouring cells in a fixed 4x4 pattern, as print
+     * halftones do. 'auto' turns it on for photo and video sources drawn in nine or fewer characters, whose steps are coarse;
+     * drawn interface shapes stay crisp, and ramps of ten and more are left as they are. 'coarse' does the same for any
+     * source, for a canvas that paints photos. The pattern is locked to the grid, so it never shimmers.
+     */
+    blend: 'auto' | 'coarse' | 'on' | 'off';
     /** Glyph color saturation in source color mode. */
     saturation: number;
     /** How far darker tones dim the ink, so same-density glyphs such as words still carry the image. 0 is one flat ink. */

package/dist/field.js

@@ -1 +1 @@
-var e=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",t="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",n=t+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",r=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",i=t+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",o=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",a=t+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",l=t+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=t+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",s=t+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var c=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const u=Math.min(this.width,this.height),s=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/u/s),f=1-Math.exp(-c/2.2),h=u*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,g=a/l,p=-g,x=v,E=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),u=Math.min(this.width-2,Math.ceil(o+3*h)),s=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=s;e<=c;e++)for(let t=l;t<=u;t++){const n=((t-o)*v+(e-a)*g)/h,r=((t-o)*p+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const u=1-r*r*.55,s=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*u+p*s)*i*E)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(g*u+x*s)*i*E))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,u=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),s=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|u,f=0|s,h=u-c,d=s-f,m=f*n+c,v=(1-h)*(1-d),g=h*(1-d),p=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*g+this.u[m+n]*p+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*g+this.v[m+n]*p+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*g+this.ink[m+n]*p+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,u=this.curl[i]*e*10,s=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*u,this.v[i]-=o/l*u;const c=Math.min(1,s/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},f=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],h={radius:.13,strength:.5,trail:.45,follow:12},d={strength:.55,radius:.45},m={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},v={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:m,lantern:h,trail:d,maxPixelRatio:2,respectReducedMotion:!0},g=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,p=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function x(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function E(e={},t=v){const n="string"==typeof e.charset&&x(e.charset).length>=2?e.charset:t.charset,r=t.fluid||m,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:g(e.radius,.005,.5,m.radius),force:g(e.force,0,8,m.force),dissipation:g(e.dissipation,.05,20,m.dissipation),refraction:g(e.refraction,0,.5,m.refraction),glow:g(e.glow,0,2,m.glow),resolution:Math.round(g(e.resolution,16,512,m.resolution)),curl:g(e.curl,0,80,m.curl)}})(),a="none"===e.scene||"flow"===e.scene||"orb"===e.scene||"drift"===e.scene?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),u=void 0===e.clear||l?t.clear:e.clear,s=!!u&&{x:g(u.x,-.5,1.5,.25),y:g(u.y,-.5,1.5,.3),width:g(u.width,0,2,.5),height:g(u.height,0,2,.4),feather:g(u.feather,.005,1,.12),shape:"rect"===u.shape?"rect":"ellipse"};return{charset:n,cellSize:g(e.cellSize,3,96,t.cellSize),cellAspect:g(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(g(e.fontWeight,100,900,t.fontWeight)),glyphScale:g(e.glyphScale,.3,1.6,t.glyphScale),mark:"dot"===e.mark||"glyph"===e.mark?e.mark:t.mark,dotScale:g(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:p(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":p(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":p(e.background,t.background),brightness:g(e.brightness,-1,1,t.brightness),contrast:g(e.contrast,0,4,t.contrast),gamma:g(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,saturation:g(e.saturation,0,3,t.saturation),shade:g(e.shade,0,1,t.shade),backdrop:g(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:g(e.focus?.x,0,1,t.focus.x),y:g(e.focus?.y,0,1,t.focus.y)},vignette:g(e.vignette,0,1,t.vignette),drift:g(e.drift,0,2,t.drift),scene:a,scale:g(e.scale,.2,6,t.scale),clear:s,speed:g(e.speed,0,5,t.speed),hover:"fluid"===e.hover||"lantern"===e.hover||"trail"===e.hover||"none"===e.hover?e.hover:t.hover,fluid:o,lantern:{radius:g(e.lantern?.radius,.02,.6,t.lantern.radius),strength:g(e.lantern?.strength,0,1.5,t.lantern.strength),trail:g(e.lantern?.trail,0,3,t.lantern.trail),follow:g(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:g(e.trail?.strength,0,1,t.trail.strength),radius:g(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:g(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function T(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,u=l>a,s="cover"===i?u?[a/l,1]:[1,l/a]:u?[1,l/a]:[a/l,1];return{scale:s,offset:"cover"===i?[(1-s[0])*o.x,(1-s[1])*o.y]:[.5*(1-s[0]),.5*(1-s[1])]}}function y(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function b(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function w(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var M=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function R(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var F,A=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,L=/swiftshader|llvmpipe|softpipe|software|basic render/i;function _(){if(F)return F;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return F="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return F="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),F=L.test(n)?"software":"gpu"}catch{return F="none"}}function k(e={}){const t=_();return"gpu"===t||"software"===t&&!!e.allowSoftware}function S(t,f={}){const h=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,d=e=>{const t=e.clear;return h(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&h(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let m=d(f).element,v=E(d(f).rest);const g=f.onError,p=t.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!p)throw new Error("WebGL2 is not available for the glyph field.");const F=p;t.setAttribute("role","img"),t.setAttribute("aria-label",f.label??"ASCII artwork"),t.dataset.renderer="glyph-field";let L=!1;const _=F.getExtension("KHR_parallel_shader_compile");let k,S,C=null,D=null,U=null,P=null,B=[],I=[],X=null,N=!1,V=null,G=null;const H=[];let z=0,O=0,W=1,Y=0,q=y(v.cellSize,v.cellAspect,1,2),$=2,j=0,K=0,J=0,Q=null,Z=null,ee=0,te=0,ne=0,re=null,ie=0,oe=!0,ae=0,le=[0,1],ue=-1/0,se=0,ce=0,fe=0,he=!0,de=!1,me=!1,ve=!1,ge=!1,pe=!0,xe=null,Ee=null,Te=1/60,ye=0,be=0,we=[];const Me=new Float32Array(16),Re=()=>{if(!m)return;const{element:e,padding:n=32,feather:r=.16,shape:i="rect"}=m,o=R(t.getBoundingClientRect(),e.getBoundingClientRect(),n,r,i),a=v.clear;JSON.stringify(a)!==JSON.stringify(o)&&(v={...v,clear:o},he=!0)},Fe={target:null,at:null,strength:0,trail:[]},Ae=new Float32Array(36);let Le=null,_e=null,ke=!1;const Se=()=>{if(!z||!O)return null;const e=z/O,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return Le&&Le.width===t&&Le.height===n||(Le=new c(t,n),_e||(_e=ze(F.LINEAR)),F.bindTexture(F.TEXTURE_2D,_e),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,t,n,0,F.RGBA,F.UNSIGNED_BYTE,Le.pixels),ke=!0),Le};let Ce=0;const De="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Ue=()=>v.respectReducedMotion&&!!De?.matches;let Pe;const Be=new Promise(e=>{Pe=e});let Ie=!0;const Xe=e=>g?.(e instanceof Error?e:new Error(String(e))),Ne=(e,t)=>{const n=F.createShader(e);return H.push(n),F.shaderSource(n,t),F.compileShader(n),n},Ve=e=>{G??(G=Ne(F.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=F.createProgram(),n=Ne(F.FRAGMENT_SHADER,e);return F.attachShader(t,G),F.attachShader(t,n),F.linkProgram(t),{program:t,locations:null,fragment:n}},Ge=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&_&&!F.getProgramParameter(n,_.COMPLETION_STATUS_KHR))return!1;if(!F.getProgramParameter(n,F.LINK_STATUS)){if(F.isContextLost())return!1;throw new Error(F.getShaderInfoLog(r)||F.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=F.getProgramParameter(n,F.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=F.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=F.getUniformLocation(n,t)}return e.locations=i,!0},He=(e=!1)=>!!C&&!!D&&Ge(C,e)&&Ge(D,e),ze=e=>{const t=F.createTexture();return F.bindTexture(F.TEXTURE_2D,t),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_MIN_FILTER,e),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_MAG_FILTER,e===F.LINEAR_MIPMAP_LINEAR?F.LINEAR:e),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_WRAP_S,F.CLAMP_TO_EDGE),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_WRAP_T,F.CLAMP_TO_EDGE),t},Oe=()=>{P&&(F.deleteTexture(P.ink),F.deleteTexture(P.under),F.deleteFramebuffer(P.buffer),P=null)},We=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,u=l*n;return[i/Math.max(1,Math.floor(i/u+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(v.cellFit,v.cellSize,v.cellAspect,W,z,O,q),Ye=()=>!!v.fluid&&"fluid"===M(v),qe=()=>{X?.release(),N=!1,B.forEach(e=>F.deleteTexture(e)),I.forEach(e=>F.deleteFramebuffer(e)),B=[],I=[]};function $e(){U&&F.deleteProgram(U.program),U=Ve((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${e(t)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(L)),X?.dispose(),X=L?null:function(e,t,c){const f={splat:t(n),curl:t(r),vorticity:t(i),divergence:t(o),fade:t(a),pressure:t(l),gradient:t(u),advect:t(s)},h=Object.values(f);let d=0,m=0,v=[],g=[],p=null,x=null;const E=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},T=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},y=()=>{[...v,...g,p,x].forEach(T),v=[],g=[],p=x=null},b=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},w=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){y(),d=t,m=n;const r=[E(e.LINEAR),E(e.LINEAR),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(T),!1):(v=[r[0],r[1]],g=[r[2],r[3]],p=r[4],x=r[5],!0)},ready:()=>h.every(c),step(t,n){if(!v.length||!p||!x)return;let r;e.viewport(0,0,d,m),t&&(r=b(f.splat,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=b(f.curl,x),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.vorticity,v[1]),w(r,"uVelocity",0,v[0].texture),w(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=b(f.divergence,p),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.fade,g[1]),w(r,"uSource",0,g[0].texture),e.uniform1f(r.uAmount,.8),M(),R(g);for(let e=0;e<20;e++)r=b(f.pressure,g[1]),w(r,"uPressure",0,g[0].texture),w(r,"uDivergence",1,p.texture),M(),R(g);r=b(f.gradient,v[1]),w(r,"uPressure",0,g[0].texture),w(r,"uVelocity",1,v[0].texture),M(),R(v),r=b(f.advect,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:y,dispose(){y(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(F,Ve,e=>Ge(e))}const je=()=>{qe();const e=v.fluid;if(!(e&&Ye()&&z&&O))return;U||$e();const t=e.resolution,n=z/O;if(j=n>=1?t:Math.max(8,Math.round(t*n)),K=n>=1?Math.max(8,Math.round(t/n)):t,N=!!X&&X.resize(j,K),N)return void(J=0);const r=()=>{qe();for(let e=0;e<2;e++){const e=ze(F.LINEAR);F.texImage2D(F.TEXTURE_2D,0,L?F.RGBA8:F.RGBA16F,j,K,0,F.RGBA,L?F.UNSIGNED_BYTE:F.HALF_FLOAT,null);const t=F.createFramebuffer();F.bindFramebuffer(F.FRAMEBUFFER,t),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT0,F.TEXTURE_2D,e,0),B.push(e),I.push(t)}return F.checkFramebufferStatus(F.FRAMEBUFFER)===F.FRAMEBUFFER_COMPLETE};if(!r()){if(L)throw new Error("The glyph field could not allocate its fluid buffers.");L=!0,Ke(),$e(),r()}for(const e of I)F.bindFramebuffer(F.FRAMEBUFFER,e),F.viewport(0,0,j,K),F.clearColor(L?.5:0,L?.5:0,0,1),F.clear(F.COLOR_BUFFER_BIT);F.bindFramebuffer(F.FRAMEBUFFER,null),J=0};function Ke(){C&&F.deleteProgram(C.program),D&&F.deleteProgram(D.program),Oe(),C=Ve((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount;\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${e(t)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  float index=min(uCount-1.,floor(tone*(uCount-1.)+.5)+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Halftone keeps the tone for the dot size; glyphs keep their atlas index, exact in 8 bits.\n  outInk=vec4(ink,uMark==1?(tone>.003?tone:0.):index/255.);\n  outUnder=vec4(under,underAlpha);\n}`)(L)),D=Ve("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale;\nuniform int uMark;\nout vec4 outColor;\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else {\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  }\n  outColor=vec4(ink.rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),_||He(!0)}const Je=()=>`${v.fontWeight} ${Math.max(1,q.height*v.glyphScale)}px ${v.font}`,Qe=()=>{const e=x(v.charset);$=e.length,q=y(v.cellSize,v.cellAspect,W,$),Y=W;const t=document.createElement("canvas");t.width=q.atlasWidth,t.height=q.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=Je();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||q.height*v.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=(q.height+i-o)/2;e.forEach((e,t)=>{const r=t%q.columns*q.width+q.width/2,i=Math.floor(t/q.columns)*q.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-q.width/2,i-a,q.width,q.height),n.clip(),n.translate(r,i),o>.96*q.width&&n.scale(.96*q.width/o,1),n.fillText(e,0,0),n.restore()}),F.bindTexture(F.TEXTURE_2D,k),F.pixelStorei(F.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,F.RGBA,F.UNSIGNED_BYTE,t),t.width=t.height=1,he=!0},Ze="undefined"==typeof document?void 0:document.fonts,et=()=>{if(!Ze?.load)return;const e=Je();Ze.load(e,x(v.charset).join("")).then(()=>{de||me||Je()!==e||(Qe(),Tt())},()=>{})},tt=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),nt=e=>{const t=e.fontfaces??[],n=v.font.split(",").map(tt);t.some(e=>n.includes(tt(e.family)))&&et()},rt=()=>{if(le=[0,1],Q&&"none"!==v.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});Q===re&&(t.imageSmoothingQuality="medium"),t.drawImage(Q,0,0,64,64),le=w(t.getImageData(0,0,64,64).data)}catch{le=[0,1]}},it=()=>{if(!Q)return;const e=performance.now();Q instanceof HTMLVideoElement&&!(e-ue>1500)||(rt(),ue=e),F.bindTexture(F.TEXTURE_2D,S),F.pixelStorei(F.UNPACK_FLIP_Y_WEBGL,!1),F.pixelStorei(F.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,F.RGBA,F.UNSIGNED_BYTE,Q),F.generateMipmap(F.TEXTURE_2D)}catch(e){Xe(e)}},ot=()=>{L=!F.getExtension("EXT_color_buffer_float")&&!F.getExtension("EXT_color_buffer_half_float"),Ke(),V=F.createVertexArray(),k=ze(F.NEAREST),S=ze(F.LINEAR_MIPMAP_LINEAR),F.bindTexture(F.TEXTURE_2D,S),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,1,1,0,F.RGBA,F.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),F.generateMipmap(F.TEXTURE_2D),z=O=0,Y=0,at(),et(),Q&&it()};function at(){const e=t.clientWidth||t.clientHeight?{width:t.clientWidth,height:t.clientHeight}:t.getBoundingClientRect(),n=Math.min(globalThis.devicePixelRatio||1,v.maxPixelRatio),r=Math.max(1,Math.round(e.width*n)),i=Math.max(1,Math.round(e.height*n));if(r===z&&i===O&&n===W)return!1;const o=!z||Math.abs(r/i-z/O)>.01;return W=n,z=r,O=i,t.width=z,t.height=O,Y!==W&&Qe(),(o||Ye()&&!B.length&&!N)&&je(),he=!0,!0}let lt=null,ut=[0,0,0],st=[1,1,1],ct=[0,0,0,0],ft=T(1,1,1,1,"cover"),ht=null,dt=0,mt=0,vt=0,gt=0;const pt=()=>{lt!==v&&(lt=v,ut=b(v.ink),st=b("auto"===v.highlight?"#ffffff":v.highlight),ct="transparent"===v.background?[0,0,0,0]:[...b(v.background),1]),ht===v&&dt===z&&mt===O&&vt===ee&&gt===te||(ht=v,dt=z,mt=O,vt=ee,gt=te,ft=T(z,O,ee||1,te||1,v.fit,v.focus));const e=v.fluid,t=Q&&ie?q.height/O*ie*ft.scale[1]:1,n=(()=>{const[e,t]=We(),n=Math.ceil(z/e-1e-4),r=Math.ceil(O/t-1e-4);if(P&&P.columns===n&&P.rows===r)return P;Oe();const i=()=>{const e=ze(F.NEAREST);return F.texStorage2D(F.TEXTURE_2D,1,L?F.RGBA8:F.RGBA16F,n,r),e},o=i(),a=i(),l=F.createFramebuffer();return F.bindFramebuffer(F.FRAMEBUFFER,l),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT0,F.TEXTURE_2D,o,0),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT1,F.TEXTURE_2D,a,0),F.drawBuffers([F.COLOR_ATTACHMENT0,F.COLOR_ATTACHMENT1]),P={ink:o,under:a,buffer:l,columns:n,rows:r}})(),r=C.locations,i=D.locations,o=M(v),a=!Ue();F.bindFramebuffer(F.FRAMEBUFFER,n.buffer),F.viewport(0,0,n.columns,n.rows),F.useProgram(C.program),F.activeTexture(F.TEXTURE0),F.bindTexture(F.TEXTURE_2D,S),F.uniform1i(r.uSource,0),F.activeTexture(F.TEXTURE2),F.bindTexture(F.TEXTURE_2D,(N?X?.velocity:B[J])??S),F.uniform1i(r.uFluid,2),F.activeTexture(F.TEXTURE3),F.bindTexture(F.TEXTURE_2D,_e??S),F.uniform1i(r.uTrailMap,3),F.uniform1f(r.uFluidMode,N?1:0),F.uniform1i(r.uHoverMode,"fluid"===o?1:"lantern"===o?2:"trail"===o&&ke?3:0),F.uniform1f(r.uTrailAmount,v.trail.strength),F.uniform3f(r.uLight,Fe.at?.[0]??-1,Fe.at?.[1]??-1,"lantern"===o?Fe.strength:0),F.uniform3fv(r.uTrail,Ae),F.uniform1f(r.uLightRadius,v.lantern.radius),F.uniform1f(r.uLightGain,v.lantern.strength),F.uniform1f(r.uClock,performance.now()/1e3),F.uniform1f(r.uFlicker,a?1:0),F.uniform2f(r.uFluidTexel,1/Math.max(1,j),1/Math.max(1,K)),F.uniform2f(r.uResolution,z,O);const[l,u]=We();F.uniform2f(r.uCell,l,u),F.uniform1f(r.uCount,$),F.uniform4f(r.uSourceMap,ft.scale[0],ft.scale[1],ft.offset[0],ft.offset[1]),F.uniform1i(r.uScene,Q?0:"flow"===v.scene?1:"orb"===v.scene?2:"drift"===v.scene?4:3),F.uniform1i(r.uMark,"dot"===v.mark?1:0),F.uniform1f(r.uScale,v.scale);const s=v.clear;F.uniform4f(r.uClear,s?s.x:0,s?s.y:0,s?s.width:0,s?s.height:0),F.uniform1f(r.uClearFeather,s?s.feather:.1),F.uniform1f(r.uClearShape,s&&"rect"===s.shape?1:0);const c=performance.now();Me.fill(0);for(let e=0;e<we.length;e++){const t=we[e],n=4*e;Me[n]=t.x,Me[n+1]=t.y,Me[n+2]=(c-t.born)/1e3,Me[n+3]=t.strength}F.uniform4fv(r.uPulse,Me),F.uniform3fv(r.uInk,ut),F.uniform3fv(r.uHighlight,st),F.uniform1f(r.uHighlightAuto,"auto"===v.highlight?1:0),F.uniform4fv(r.uBackground,ct),F.uniform1f(r.uBrightness,v.brightness),F.uniform1f(r.uContrast,v.contrast),F.uniform1f(r.uGamma,v.gamma),F.uniform1f(r.uInvert,v.invert?1:0),F.uniform1f(r.uVignette,v.vignette),F.uniform1f(r.uSourceColor,"source"===v.color?1:0),F.uniform1f(r.uRefraction,e?e.refraction*(a?1:.25):0),F.uniform1f(r.uGlow,e?e.glow:0),F.uniform1f(r.uTime,fe),F.uniform1f(r.uDrift,a?v.drift:0),F.uniform1f(r.uFluidOn,e&&"fluid"===o&&(B.length||N)?1:0),F.uniform1f(r.uLod,Math.max(0,Math.log2(Math.max(1,t))-.5)),F.uniform1f(r.uSaturation,v.saturation),F.uniform1f(r.uShade,v.shade),F.uniform1f(r.uBackdrop,Q?v.backdrop:0),F.uniform2f(r.uLevels,Q&&"auto"===v.levels?le[0]:0,Q&&"auto"===v.levels?le[1]:1),F.bindVertexArray(V),F.drawArrays(F.TRIANGLES,0,3),F.bindFramebuffer(F.FRAMEBUFFER,null),F.viewport(0,0,z,O),F.useProgram(D.program),F.activeTexture(F.TEXTURE1),F.bindTexture(F.TEXTURE_2D,k),F.uniform1i(i.uAtlas,1),F.activeTexture(F.TEXTURE4),F.bindTexture(F.TEXTURE_2D,n.ink),F.uniform1i(i.uCells,4),F.activeTexture(F.TEXTURE5),F.bindTexture(F.TEXTURE_2D,n.under),F.uniform1i(i.uUnder,5),F.uniform2f(i.uResolution,z,O),F.uniform2f(i.uCell,q.width,q.height),F.uniform2f(i.uPitch,l,u),F.uniform1f(i.uColumns,q.columns),F.uniform1f(i.uDotScale,v.dotScale),F.uniform1i(i.uMark,"dot"===v.mark?1:0),F.drawArrays(F.TRIANGLES,0,3)},xt=()=>!de&&!me&&!ve&&(pe||Ie)&&!("undefined"!=typeof document&&document.hidden),Et=e=>{if(se=0,!xt())return;const t=(e-ce)/1e3,n=Math.min(1/30,Math.max(1/480,t));ce=e,Te=.9*Te+.1*Math.min(t,.25),ye=Te>1/24?ye+1:0;try{ye>45&&be<2&&(ye=0,be++,1===be&&W>1?(v={...v,maxPixelRatio:1},at()):be=2);const t=He(),r=!(ge||be>=2&&!(Q instanceof HTMLVideoElement)||(!(Q instanceof HTMLVideoElement)||Q.paused||Q.ended)&&(Ue()||!(!Q&&"none"!==v.scene||v.drift>0)));r&&(fe+=n*v.speed),Q instanceof HTMLVideoElement&&Q.readyState>=2&&oe&&(oe=!("requestVideoFrameCallback"in Q),it(),he=!0);const i=M(v);let o="fluid"===i&&(null!==Ee||e<Ce);if(o?((e,t)=>{const n=v.fluid;if(!n||!I.length&&!N)return;if(N?!X?.ready():!U||!Ge(U))return;const r=z/O,i=Ee;if(Ee=null,N&&X){const o=5200*n.force*(Ue()?.35:1);return i&&(Ce=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void X.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Ue()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,Ce=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=U.locations;F.bindFramebuffer(F.FRAMEBUFFER,I[1-J]),F.viewport(0,0,j,K),F.useProgram(U.program),F.activeTexture(F.TEXTURE0),F.bindTexture(F.TEXTURE_2D,B[J]),F.uniform1i(l.uPrevious,0),F.uniform2f(l.uSize,j,K),F.uniform1f(l.uAspect,r),F.uniform1f(l.uDt,e),F.uniform1f(l.uDecay,n.dissipation),F.uniform1f(l.uEnergyDecay,1.1*n.dissipation),F.uniform1f(l.uRadius,n.radius),F.uniform1f(l.uSplat,i?1:0),F.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),F.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),F.uniform2f(l.uForce,o,a),F.drawArrays(F.TRIANGLES,0,3),J=1-J})(n,e):Ee=null,"lantern"===i&&(o=((e,t)=>{const n=v.lantern,r=Fe.target;if(r){const i=Fe.at;if(i)if(Ue())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Fe.at=[r[0],r[1]];const o=Fe.at,a=Fe.trail[Fe.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Fe.trail.push({x:o[0],y:o[1],born:t}),Fe.trail.length>12&&Fe.trail.shift())}Fe.strength+=((r?1:0)-Fe.strength)*(1-Math.exp(-e*(r?9:5)));const i=Fe.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);Ae.fill(0);for(let e=0;e<i.length;e++){const r=i[e];Ae[3*e]=r.x,Ae[3*e+1]=r.y,Ae[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Fe.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!Le?.active;o=(e=>{const t=Se();return!(!t||!t.active||(t.step(e),F.bindTexture(F.TEXTURE_2D,_e),F.texSubImage2D(F.TEXTURE_2D,0,0,0,t.width,t.height,F.RGBA,F.UNSIGNED_BYTE,t.pixels),ke=!0,0))})(n)||o,e&&!Le?.active&&(he=!0)}if(we.length){for(let t=we.length-1;t>=0;t--)e-we[t].born>=2400&&we.splice(t,1);o=!0,we.length||(he=!0)}t&&(r||o||he)&&(pt(),he=!1,!Ie||ne&&!Q||(Ie=!1,Pe())),(r||o||Ee||!t)&&(se=requestAnimationFrame(Et))}catch(e){ve=!0,Xe(e)}};function Tt(){!se&&xt()&&(ce=performance.now(),se=requestAnimationFrame(Et))}const yt=(e,n)=>{const r=t.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(n-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},bt=e=>{const t=M(v);if("none"===t||ge)return xe=null,void(Fe.target=null);if("lantern"===t)return Fe.target=e?[e[0],1-e[1]]:null,xe=null,void Tt();if("trail"===t){const t=Se();if(!t)return;return e?t.move(e[0],1-e[1],v.trail.radius,performance.now()):t.leave(),xe=null,void Tt()}e?(xe&&(Ee=Ee?{from:Ee.from,to:e}:{from:xe,to:e}),xe=e,Tt()):xe=null},wt=e=>bt(yt(e.clientX,e.clientY)),Mt=()=>{xe=null,Le?.leave(),Fe.target&&(Fe.target=null,Tt())},Rt=f.interactionTarget??window;Rt.addEventListener("pointermove",wt,{passive:!0}),Rt.addEventListener("pointerdown",wt,{passive:!0}),document.addEventListener("pointerleave",Mt),Rt!==window&&Rt.addEventListener("pointerleave",Mt);const Ft="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=at();Re(),(e||he)&&Tt()}):null;Ft?.observe(t),m&&Ft?.observe(m.element);const At="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{pe=e.isIntersecting,pe&&(he=!0,Tt())},{rootMargin:"120px"}):null;At?.observe(t);const Lt=()=>{document.hidden||(he=!0,Tt())};document.addEventListener("visibilitychange",Lt);const _t=()=>{he=!0,Tt()};De?.addEventListener?.("change",_t),Ze?.addEventListener?.("loadingdone",nt);const kt=e=>{e.preventDefault(),me=!0,se&&cancelAnimationFrame(se),se=0},St=()=>{me=!1,H.length=0,G=null,C=D=U=null,P=null,B=[],I=[],X=null,N=!1,_e=null,Le=null,ke=!1;try{ot(),he=!0,Tt()}catch(e){Xe(e)}};t.addEventListener("webglcontextlost",kt),t.addEventListener("webglcontextrestored",St);const Ct=()=>{Z&&(Z.pause(),Z.removeAttribute("src"),Z.load(),Z=null),ae&&Q instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in Q&&Q.cancelVideoFrameCallback(ae),ae=0},Dt=()=>{re?.close(),re=null},Ut=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,z,O,q.height,v.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Pt=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),Bt=async e=>{const t=++ne;if(!e)return Ct(),Dt(),Q=null,ee=te=ie=0,he=!0,void Tt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(A.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Pt(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Pt(e)}if(!/svg/i.test(t.type))try{return await Ut(t)}catch{}const n=URL.createObjectURL(t);try{return await Pt(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(de||t!==ne)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());Ct(),Dt(),Z=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(re=r),Q=r,ie=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,ee=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),te=n.natural?.[1]??ie,oe=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{de||Q!==e||(oe=!0,Tt(),ae=t.requestVideoFrameCallback(n))};ae=t.requestVideoFrameCallback(n)})(r),me||it(),he=!0,Tt()}catch(e){Ie&&t===ne&&(Ie=!1,Pe()),Xe(e)}};ot(),Re();const It=f.source??null;return It?(ne=1,Bt(It)):Tt(),{canvas:t,ready:Be,get settings(){return v},update(e){const n=v,{element:r,rest:i}=d(e);"clear"in e&&(m&&m.element!==r?.element&&Ft?.unobserve(m.element),m=r,r&&Ft?.observe(r.element)),v=E(r?{...i,clear:v.clear}:i,v),Re(),e.label&&t.setAttribute("aria-label",e.label),v.maxPixelRatio!==n.maxPixelRatio&&at(),v.charset===n.charset&&v.cellSize===n.cellSize&&v.cellAspect===n.cellAspect&&v.font===n.font&&v.fontWeight===n.fontWeight&&v.glyphScale===n.glyphScale||(Qe(),et()),v.levels!==n.levels&&rt();((!!n.fluid&&"fluid"===M(n))!==Ye()||v.fluid&&n.fluid&&v.fluid.resolution!==n.fluid.resolution)&&je(),"source"in e&&Bt(e.source??null),he=!0,Tt()},setSource:Bt,pointer(e,n=0){if(null===e)return void bt(null);const r=t.getBoundingClientRect();bt(yt(r.left+e,r.top+n))},redraw(){if(!(de||me||ve)&&z)try{He(!0)&&pt()}catch(e){ve=!0,Xe(e)}},pulse(e={}){if(de||Ue())return;const n=t.getBoundingClientRect();if(!n.width||!n.height)return;let r=e.x??n.width/2,i=e.y??n.height/2;if(e.element){const t=e.element.getBoundingClientRect();r=t.left+t.width/2-n.left,i=t.top+t.height/2-n.top}const o=Math.max(0,Math.min(2,e.strength??1));we=[...we,{x:r/n.width,y:i/n.height,born:performance.now(),strength:o}].slice(-4),Tt()},play(){ge=!1,Q instanceof HTMLVideoElement&&Q.play().catch(()=>{}),he=!0,Tt()},pause(){ge=!0,Q instanceof HTMLVideoElement&&Q.pause()},resize(){at()&&Tt()},destroy(){if(!de&&(de=!0,se&&cancelAnimationFrame(se),Rt.removeEventListener("pointermove",wt),Rt.removeEventListener("pointerdown",wt),document.removeEventListener("pointerleave",Mt),Rt.removeEventListener("pointerleave",Mt),document.removeEventListener("visibilitychange",Lt),De?.removeEventListener?.("change",_t),Ze?.removeEventListener?.("loadingdone",nt),t.removeEventListener("webglcontextlost",kt),t.removeEventListener("webglcontextrestored",St),Ft?.disconnect(),At?.disconnect(),Ct(),Dt(),Q=null,!me)){qe(),Oe(),F.deleteTexture(k),F.deleteTexture(S);for(const e of[C,D,U])e&&F.deleteProgram(e.program);X?.dispose(),_e&&F.deleteTexture(_e),H.forEach(e=>F.deleteShader(e)),V&&F.deleteVertexArray(V)}}}}export{m as DEFAULT_FIELD_FLUID,h as DEFAULT_FIELD_LANTERN,v as DEFAULT_FIELD_SETTINGS,d as DEFAULT_FIELD_TRAIL,f as FIELD_HOVERS,M as activeFieldHover,y as fieldCellLayout,R as fieldClearFromRects,x as fieldGlyphs,w as fieldLevels,T as fieldSourceRect,_ as glyphFieldTier,k as isGlyphFieldSupported,S as mountGlyphField,E as normalizeFieldSettings};//# sourceMappingURL=field.js.map
+var e=e=>e?"\nconst float VSCALE=6.;\nvec4 decodeFluid(vec4 t){return vec4((t.xy*2.-1.)*VSCALE,t.z,t.w);}\nvec4 encodeFluid(vec4 v){return vec4(clamp(v.xy/VSCALE*.5+.5,0.,1.),clamp(v.z,0.,1.),1.);}":"\nvec4 decodeFluid(vec4 t){return t;}\nvec4 encodeFluid(vec4 v){return vec4(v.xyz,1.);}",t="#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform vec2 uTexel;\nout vec4 outColor;\nvec2 here(){return gl_FragCoord.xy*uTexel;}\n",n=t+"\nuniform sampler2D uVelocity;\nuniform vec2 uFrom, uTo, uForce;\nuniform float uAspect, uRadius;\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=here(),scale=vec2(uAspect,1.);\n  float d=segment(uv*scale,uFrom*scale,uTo*scale);\n  outColor=vec4(texture(uVelocity,uv).xy+uForce*exp(-d*d/(uRadius*uRadius)),0.,1.);\n}",r=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).y,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).y;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).x,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(.5*(r-l-t+b),0.,0.,1.);\n}",i=t+"\nuniform sampler2D uVelocity, uCurl;\nuniform float uStrength, uDt;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uCurl,uv-vec2(uTexel.x,0.)).x,r=texture(uCurl,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uCurl,uv+vec2(0.,uTexel.y)).x,b=texture(uCurl,uv-vec2(0.,uTexel.y)).x,c=texture(uCurl,uv).x;\n  vec2 force=.5*vec2(abs(t)-abs(b),abs(r)-abs(l));\n  force=force/(length(force)+1e-4)*uStrength*c;\n  force.y=-force.y;\n  outColor=vec4(clamp(texture(uVelocity,uv).xy+force*uDt,-1000.,1000.),0.,1.);\n}",o=t+"\nuniform sampler2D uVelocity;\nvoid main(){\n  vec2 uv=here(),c=texture(uVelocity,uv).xy;\n  float l=texture(uVelocity,uv-vec2(uTexel.x,0.)).x,r=texture(uVelocity,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uVelocity,uv+vec2(0.,uTexel.y)).y,b=texture(uVelocity,uv-vec2(0.,uTexel.y)).y;\n  if(uv.x-uTexel.x<0.)l=-c.x;\n  if(uv.x+uTexel.x>1.)r=-c.x;\n  if(uv.y+uTexel.y>1.)t=-c.y;\n  if(uv.y-uTexel.y<0.)b=-c.y;\n  outColor=vec4(.5*(r-l+t-b),0.,0.,1.);\n}",a=t+"\nuniform sampler2D uSource;\nuniform float uAmount;\nvoid main(){outColor=vec4(texture(uSource,here()).x*uAmount,0.,0.,1.);}",l=t+"\nuniform sampler2D uPressure, uDivergence;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4((l+r+b+t-texture(uDivergence,uv).x)*.25,0.,0.,1.);\n}",u=t+"\nuniform sampler2D uPressure, uVelocity;\nvoid main(){\n  vec2 uv=here();\n  float l=texture(uPressure,uv-vec2(uTexel.x,0.)).x,r=texture(uPressure,uv+vec2(uTexel.x,0.)).x;\n  float t=texture(uPressure,uv+vec2(0.,uTexel.y)).x,b=texture(uPressure,uv-vec2(0.,uTexel.y)).x;\n  outColor=vec4(texture(uVelocity,uv).xy-vec2(r-l,t-b),0.,1.);\n}",s=t+"\nuniform sampler2D uVelocity;\nuniform float uDt, uDissipation;\nvoid main(){\n  vec2 uv=here();\n  vec2 back=uv-uDt*texture(uVelocity,uv).xy*uTexel;\n  outColor=vec4(texture(uVelocity,back).xy/(1.+uDissipation*uDt),0.,1.);\n}";var c=class{constructor(e,t){this.previous=null,this.peak=0,this.width=e,this.height=t;const n=e*t;this.pixels=new Uint8Array(4*n),this.signal=new Float32Array(n),this.offsetX=new Float32Array(n),this.offsetY=new Float32Array(n),this.driftX=new Float32Array(n),this.driftY=new Float32Array(n),this.u=new Float32Array(n),this.v=new Float32Array(n),this.ink=new Float32Array(n),this.a=new Float32Array(n),this.b=new Float32Array(n),this.c=new Float32Array(n),this.pressure=new Float32Array(n),this.pressureNext=new Float32Array(n),this.divergence=new Float32Array(n),this.curl=new Float32Array(n)}get active(){return this.peak>2e-4}clear(){for(const e of[this.u,this.v,this.ink,this.a,this.b,this.c,this.pressure,this.pressureNext,this.divergence,this.curl,this.signal,this.pixels,this.offsetX,this.offsetY,this.driftX,this.driftY])e.fill(0);this.previous=null,this.peak=0}leave(){this.previous=null}move(e,t,n,r=performance.now()){if(!Number.isFinite(e+t+n+r))return;e=Math.max(0,Math.min(1,e)),t=Math.max(0,Math.min(1,t)),n=Math.max(.1,Math.min(1,n));const i=this.previous;if(this.previous={x:e,y:t,time:r},!i)return;const o=(e-i.x)*(this.width-1),a=(t-i.y)*(this.height-1),l=Math.hypot(o,a);if(l<.001)return;const u=Math.min(this.width,this.height),s=r>i.time?Math.max(1/240,(r-i.time)/1e3):1/60,c=Math.min(12,l/u/s),f=1-Math.exp(-c/2.2),h=u*(.022+.075*n)*(.65+.95*f),d=Math.min(128,Math.max(1,Math.ceil(l/(.4*h)))),m=l/h*(.32+.22*f)/d,v=o/l,g=a/l,p=-g,x=v,E=l*(2+18*f)/d;for(let n=0;n<d;n++){const r=(n+.5)/d,o=(i.x+(e-i.x)*r)*(this.width-1),a=(i.y+(t-i.y)*r)*(this.height-1),l=Math.max(1,Math.floor(o-3*h)),u=Math.min(this.width-2,Math.ceil(o+3*h)),s=Math.max(1,Math.floor(a-3*h)),c=Math.min(this.height-2,Math.ceil(a+3*h));for(let e=s;e<=c;e++)for(let t=l;t<=u;t++){const n=((t-o)*v+(e-a)*g)/h,r=((t-o)*p+(e-a)*x)/h,i=Math.exp(-n*n*.65-r*r*1.7),l=e*this.width+t;this.ink[l]=1-(1-this.ink[l])*Math.exp(-i*m);const u=1-r*r*.55,s=n*r*.7;this.u[l]=Math.max(-80,Math.min(80,this.u[l]+(v*u+p*s)*i*E)),this.v[l]=Math.max(-80,Math.min(80,this.v[l]+(g*u+x*s)*i*E))}}this.peak=1}read(e,t,n){const r=0|(t=Math.max(.5,Math.min(this.width-1.5,t))),i=0|(n=Math.max(.5,Math.min(this.height-1.5,n))),o=t-r,a=n-i,l=i*this.width+r;return(e[l]*(1-o)+e[l+1]*o)*(1-a)+(e[l+this.width]*(1-o)+e[l+this.width+1]*o)*a}sample(e,t){return this.read(this.signal,e*(this.width-1),t*(this.height-1))}displacement(e,t,n){n[0]=this.read(this.offsetX,e*(this.width-1),t*(this.height-1)),n[1]=this.read(this.offsetY,e*(this.width-1),t*(this.height-1))}step(e){if(!this.active||!Number.isFinite(e))return;let t=Math.max(0,Math.min(.05,e));const n=this.width,r=this.height;for(;t>1e-7;){const e=Math.min(1/60,t);t-=e;const i=Math.exp(-1.9*e),o=Math.exp(-3.2*e);for(let t=1;t<r-1;t++)for(let a=1;a<n-1;a++){const l=t*n+a,u=Math.max(.5,Math.min(n-1.5,a-this.u[l]*e)),s=Math.max(.5,Math.min(r-1.5,t-this.v[l]*e)),c=0|u,f=0|s,h=u-c,d=s-f,m=f*n+c,v=(1-h)*(1-d),g=h*(1-d),p=(1-h)*d,x=h*d;this.a[l]=(this.u[m]*v+this.u[m+1]*g+this.u[m+n]*p+this.u[m+n+1]*x)*i,this.b[l]=(this.v[m]*v+this.v[m+1]*g+this.v[m+n]*p+this.v[m+n+1]*x)*i,this.c[l]=(this.ink[m]*v+this.ink[m+1]*g+this.ink[m+n]*p+this.ink[m+n+1]*x)*o}[this.u,this.a]=[this.a,this.u],[this.v,this.b]=[this.b,this.v],[this.ink,this.c]=[this.c,this.ink];for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.curl[r]=.5*(this.v[r+1]-this.v[r-1]-this.u[r+n]+this.u[r-n])}for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r,o=Math.abs(this.curl[i+1])-Math.abs(this.curl[i-1]),a=Math.abs(this.curl[i+n])-Math.abs(this.curl[i-n]),l=Math.hypot(o,a)+1e-4,u=this.curl[i]*e*10,s=Math.hypot(this.u[i],this.v[i]);this.u[i]+=a/l*u,this.v[i]-=o/l*u;const c=Math.min(1,s/(Math.hypot(this.u[i],this.v[i])+1e-6));this.u[i]*=c,this.v[i]*=c,this.divergence[i]=-.5*(this.u[i+1]-this.u[i-1]+this.v[i+n]-this.v[i-n])}this.pressure.fill(0);for(let e=0;e<4;e++){for(let e=1;e<r-1;e++)for(let t=1;t<n-1;t++){const r=e*n+t;this.pressureNext[r]=.25*(this.divergence[r]+this.pressure[r-1]+this.pressure[r+1]+this.pressure[r-n]+this.pressure[r+n])}[this.pressure,this.pressureNext]=[this.pressureNext,this.pressure]}let a=0;for(let t=1;t<r-1;t++)for(let r=1;r<n-1;r++){const i=t*n+r;this.u[i]=Math.max(-80,Math.min(80,this.u[i]-.5*(this.pressure[i+1]-this.pressure[i-1]))),this.v[i]=Math.max(-80,Math.min(80,this.v[i]-.5*(this.pressure[i+n]-this.pressure[i-n]))),this.driftX[i]+=(3.6*this.u[i]-58*this.offsetX[i]-12*this.driftX[i])*e,this.driftY[i]+=(3.6*this.v[i]-58*this.offsetY[i]-12*this.driftY[i])*e,this.offsetX[i]=Math.max(-2,Math.min(2,this.offsetX[i]+this.driftX[i]*e)),this.offsetY[i]=Math.max(-2,Math.min(2,this.offsetY[i]+this.driftY[i]*e)),this.signal[i]=1-Math.exp(.06*-Math.hypot(this.u[i],this.v[i])-.16*this.ink[i]),a=Math.max(a,this.signal[i])}this.peak=a}if(this.active)for(let e=0;e<this.ink.length;e++){const t=Math.round(65535*Math.min(1,this.signal[e]));this.pixels[4*e]=t>>>8,this.pixels[4*e+1]=255&t,this.pixels[4*e+2]=Math.round(128+63.5*this.offsetX[e]),this.pixels[4*e+3]=Math.round(128+63.5*this.offsetY[e])}else this.clear()}},f=[{value:"fluid",label:"Fluid",description:"An ink-in-water wake that bends the image and swirls the characters."},{value:"lantern",label:"Lantern",description:"A soft light follows the pointer and lifts the characters it passes, without distortion."},{value:"trail",label:"Trail",description:"The Asciify Trail: in the wake, sparse characters fill in and dense ones open up, then settle. No distortion."},{value:"none",label:"Off",description:"The field stays still under the pointer."}],h={radius:.13,strength:.5,trail:.45,follow:12},d={strength:.55,radius:.45},m={radius:.075,force:1,dissipation:1.6,refraction:.03,glow:.55,resolution:128,curl:24},v={charset:" .,:-=+*#%@",cellSize:12,cellAspect:1,cellFit:"pixel",font:'ui-monospace, "SF Mono", Menlo, Consolas, monospace',fontWeight:500,glyphScale:.8,mark:"glyph",dotScale:.9,color:"ink",ink:"#f3ba32",highlight:"auto",background:"transparent",brightness:0,contrast:1,gamma:1,invert:!1,levels:"auto",blend:"auto",saturation:1.1,shade:.5,backdrop:0,fit:"cover",focus:{x:.5,y:.5},vignette:0,drift:0,scene:"flow",scale:1,clear:!1,speed:1,hover:"fluid",fluid:m,lantern:h,trail:d,maxPixelRatio:2,respectReducedMotion:!0},g=(e,t,n,r)=>"number"==typeof e&&Number.isFinite(e)?Math.min(n,Math.max(t,e)):r,p=(e,t)=>"string"==typeof e&&/^#([\da-f]{3}|[\da-f]{6})$/i.test(e.trim())?e.trim().toLowerCase():t;function x(e){const t=Intl.Segmenter;return(t?Array.from(new t(void 0,{granularity:"grapheme"}).segment(e),e=>e.segment):Array.from(e)).filter(e=>"\n"!==e&&"\r"!==e&&"\t"!==e).slice(0,256)}function E(e={},t=v){const n="string"==typeof e.charset&&x(e.charset).length>=2?e.charset:t.charset,r=t.fluid||m,i=void 0===e.fluid?t.fluid:e.fluid,o=!1!==i&&(()=>{const e=!0!==i&&i?{...r,...i}:r;return{radius:g(e.radius,.005,.5,m.radius),force:g(e.force,0,8,m.force),dissipation:g(e.dissipation,.05,20,m.dissipation),refraction:g(e.refraction,0,.5,m.refraction),glow:g(e.glow,0,2,m.glow),resolution:Math.round(g(e.resolution,16,512,m.resolution)),curl:g(e.curl,0,80,m.curl)}})(),a="none"===e.scene||"flow"===e.scene||"orb"===e.scene||"drift"===e.scene?e.scene:t.scene,l=!!e.clear&&"object"==typeof e.clear&&("element"in e.clear||"nodeType"in e.clear),u=void 0===e.clear||l?t.clear:e.clear,s=!!u&&{x:g(u.x,-.5,1.5,.25),y:g(u.y,-.5,1.5,.3),width:g(u.width,0,2,.5),height:g(u.height,0,2,.4),feather:g(u.feather,.005,1,.12),shape:"rect"===u.shape?"rect":"ellipse"};return{charset:n,cellSize:g(e.cellSize,3,96,t.cellSize),cellAspect:g(e.cellAspect,.3,2,t.cellAspect),cellFit:"fill"===e.cellFit||"pixel"===e.cellFit?e.cellFit:t.cellFit,font:"string"==typeof e.font&&e.font.trim()?e.font:t.font,fontWeight:Math.round(g(e.fontWeight,100,900,t.fontWeight)),glyphScale:g(e.glyphScale,.3,1.6,t.glyphScale),mark:"dot"===e.mark||"glyph"===e.mark?e.mark:t.mark,dotScale:g(e.dotScale,.1,1.4,t.dotScale),color:"source"===e.color||"ink"===e.color?e.color:t.color,ink:p(e.ink,t.ink),highlight:"auto"===e.highlight?"auto":p(e.highlight,t.highlight),background:"transparent"===e.background?"transparent":p(e.background,t.background),brightness:g(e.brightness,-1,1,t.brightness),contrast:g(e.contrast,0,4,t.contrast),gamma:g(e.gamma,.2,5,t.gamma),invert:"boolean"==typeof e.invert?e.invert:t.invert,levels:"none"===e.levels||"auto"===e.levels?e.levels:t.levels,blend:"auto"===e.blend||"coarse"===e.blend||"on"===e.blend||"off"===e.blend?e.blend:t.blend,saturation:g(e.saturation,0,3,t.saturation),shade:g(e.shade,0,1,t.shade),backdrop:g(e.backdrop,0,1,t.backdrop),fit:"contain"===e.fit||"cover"===e.fit?e.fit:t.fit,focus:{x:g(e.focus?.x,0,1,t.focus.x),y:g(e.focus?.y,0,1,t.focus.y)},vignette:g(e.vignette,0,1,t.vignette),drift:g(e.drift,0,2,t.drift),scene:a,scale:g(e.scale,.2,6,t.scale),clear:s,speed:g(e.speed,0,5,t.speed),hover:"fluid"===e.hover||"lantern"===e.hover||"trail"===e.hover||"none"===e.hover?e.hover:t.hover,fluid:o,lantern:{radius:g(e.lantern?.radius,.02,.6,t.lantern.radius),strength:g(e.lantern?.strength,0,1.5,t.lantern.strength),trail:g(e.lantern?.trail,0,3,t.lantern.trail),follow:g(e.lantern?.follow,1,60,t.lantern.follow)},trail:{strength:g(e.trail?.strength,0,1,t.trail.strength),radius:g(e.trail?.radius,.1,1,t.trail.radius)},maxPixelRatio:g(e.maxPixelRatio,.5,4,t.maxPixelRatio),respectReducedMotion:"boolean"==typeof e.respectReducedMotion?e.respectReducedMotion:t.respectReducedMotion}}function T(e,t,n,r,i,o={x:.5,y:.5}){if(!(e>0&&t>0&&n>0&&r>0))return{scale:[1,1],offset:[0,0]};const a=e/t,l=n/r,u=l>a,s="cover"===i?u?[a/l,1]:[1,l/a]:u?[1,l/a]:[a/l,1];return{scale:s,offset:"cover"===i?[(1-s[0])*o.x,(1-s[1])*o.y]:[.5*(1-s[0]),.5*(1-s[1])]}}function y(e,t,n,r){const i=Math.max(2,Math.round(e*n)),o=Math.max(2,Math.round(i*t)),a=Math.min(16,Math.max(1,r)),l=Math.ceil(r/a);return{width:o,height:i,columns:a,rows:l,atlasWidth:a*o,atlasHeight:l*i}}function b(e){const t=e.replace("#",""),n=3===t.length?t.split("").map(e=>e+e).join(""):t,r=Number.parseInt(n,16);return Number.isFinite(r)&&6===n.length?[(r>>16&255)/255,(r>>8&255)/255,(255&r)/255]:[0,0,0]}function w(e){const t=new Uint32Array(256);let n=0;for(let r=0;r+3<e.length;r+=4)e[r+3]<8||(t[Math.round(.2126*e[r]+.7152*e[r+1]+.0722*e[r+2])]++,n++);if(!n)return[0,1];const r=e=>{let r=0;for(let i=0;i<256;i++)if(r+=t[i],r>=n*e)return i/255;return 1},i=r(.02),o=r(.98);return o-i<.08?[0,1]:[i,o]}var M=e=>"fluid"!==e.hover||e.fluid?e.hover:"none";function R(e,t,n=24,r=.12,i="ellipse"){return e.width>0&&e.height>0&&{x:(t.left-n-e.left)/e.width,y:(t.top-n-e.top)/e.height,width:(t.width+2*n)/e.width,height:(t.height+2*n)/e.height,feather:r,shape:i}}var F,A=/\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i,L=/swiftshader|llvmpipe|softpipe|software|basic render/i;function _(){if(F)return F;if("undefined"==typeof document||void 0===globalThis.WebGL2RenderingContext)return F="none";try{const e=document.createElement("canvas").getContext("webgl2");if(!e)return F="none";const t=e.getExtension("WEBGL_debug_renderer_info"),n=String(e.getParameter(t?t.UNMASKED_RENDERER_WEBGL:e.RENDERER)??"");return e.getExtension("WEBGL_lose_context")?.loseContext(),F=L.test(n)?"software":"gpu"}catch{return F="none"}}function k(e={}){const t=_();return"gpu"===t||"software"===t&&!!e.allowSoftware}function S(t,f={}){const h=e=>"undefined"!=typeof HTMLElement&&e instanceof HTMLElement,d=e=>{const t=e.clear;return h(t)?{element:{element:t},rest:{...e,clear:void 0}}:t&&"object"==typeof t&&h(t.element)?{element:t,rest:{...e,clear:void 0}}:{element:null,rest:e}};let m=d(f).element,v=E(d(f).rest);const g=f.onError,p=t.getContext("webgl2",{alpha:!0,antialias:!1,depth:!1,stencil:!1,premultipliedAlpha:!0,powerPreference:"high-performance"});if(!p)throw new Error("WebGL2 is not available for the glyph field.");const F=p;t.setAttribute("role","img"),t.setAttribute("aria-label",f.label??"ASCII artwork"),t.dataset.renderer="glyph-field";let L=!1;const _=F.getExtension("KHR_parallel_shader_compile");let k,S,C=null,D=null,U=null,P=null,B=[],I=[],X=null,N=!1,V=null,H=null;const G=[];let z=0,O=0,W=1,Y=0,q=y(v.cellSize,v.cellAspect,1,2),$=2,j=0,K=0,J=0,Q=null,Z=!1,ee=null,te=0,ne=0,re=0,ie=null,oe=0,ae=!0,le=0,ue=[0,1],se=-1/0,ce=0,fe=0,he=0,de=!0,me=!1,ve=!1,ge=!1,pe=!1,xe=!0,Ee=null,Te=null,ye=1/60,be=0,we=0,Me=[];const Re=new Float32Array(16),Fe=()=>{if(!m)return;const{element:e,padding:n=32,feather:r=.16,shape:i="rect"}=m,o=R(t.getBoundingClientRect(),e.getBoundingClientRect(),n,r,i),a=v.clear;JSON.stringify(a)!==JSON.stringify(o)&&(v={...v,clear:o},de=!0)},Ae={target:null,at:null,strength:0,trail:[]},Le=new Float32Array(36);let _e=null,ke=null,Se=!1;const Ce=()=>{if(!z||!O)return null;const e=z/O,t=Math.round(e>=1?128:128*e),n=Math.round(e>=1?128/e:128);return _e&&_e.width===t&&_e.height===n||(_e=new c(t,n),ke||(ke=Oe(F.LINEAR)),F.bindTexture(F.TEXTURE_2D,ke),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,t,n,0,F.RGBA,F.UNSIGNED_BYTE,_e.pixels),Se=!0),_e};let De=0;const Ue="function"==typeof matchMedia?matchMedia("(prefers-reduced-motion: reduce)"):null,Pe=()=>v.respectReducedMotion&&!!Ue?.matches;let Be;const Ie=new Promise(e=>{Be=e});let Xe=!0;const Ne=e=>g?.(e instanceof Error?e:new Error(String(e))),Ve=(e,t)=>{const n=F.createShader(e);return G.push(n),F.shaderSource(n,t),F.compileShader(n),n},He=e=>{H??(H=Ve(F.VERTEX_SHADER,"#version 300 es\nvoid main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}"));const t=F.createProgram(),n=Ve(F.FRAGMENT_SHADER,e);return F.attachShader(t,H),F.attachShader(t,n),F.linkProgram(t),{program:t,locations:null,fragment:n}},Ge=(e,t=!1)=>{if(e.locations)return!0;const{program:n,fragment:r}=e;if(!t&&_&&!F.getProgramParameter(n,_.COMPLETION_STATUS_KHR))return!1;if(!F.getProgramParameter(n,F.LINK_STATUS)){if(F.isContextLost())return!1;throw new Error(F.getShaderInfoLog(r)||F.getProgramInfoLog(n)||"Glyph field program failed to link.")}const i={};for(let e=F.getProgramParameter(n,F.ACTIVE_UNIFORMS)-1;e>=0;e--){const t=F.getActiveUniform(n,e).name.replace(/\[0\]$/,"");i[t]=F.getUniformLocation(n,t)}return e.locations=i,!0},ze=(e=!1)=>!!C&&!!D&&Ge(C,e)&&Ge(D,e),Oe=e=>{const t=F.createTexture();return F.bindTexture(F.TEXTURE_2D,t),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_MIN_FILTER,e),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_MAG_FILTER,e===F.LINEAR_MIPMAP_LINEAR?F.LINEAR:e),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_WRAP_S,F.CLAMP_TO_EDGE),F.texParameteri(F.TEXTURE_2D,F.TEXTURE_WRAP_T,F.CLAMP_TO_EDGE),t},We=()=>{P&&(F.deleteTexture(P.ink),F.deleteTexture(P.under),F.deleteFramebuffer(P.buffer),P=null)},Ye=()=>function(e,t,n,r,i,o,a){if("fill"!==e||!(i>0&&o>0))return[a.width,a.height];const l=t*r,u=l*n;return[i/Math.max(1,Math.floor(i/u+1e-6)),o/Math.max(1,Math.floor(o/l+1e-6))]}(v.cellFit,v.cellSize,v.cellAspect,W,z,O,q),qe=()=>!!v.fluid&&"fluid"===M(v),$e=()=>{X?.release(),N=!1,B.forEach(e=>F.deleteTexture(e)),I.forEach(e=>F.deleteFramebuffer(e)),B=[],I=[]};function je(){U&&F.deleteProgram(U.program),U=He((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uPrevious;\nuniform vec2 uSize;\nuniform float uAspect, uDt, uDecay, uEnergyDecay, uRadius, uSplat;\nuniform vec2 uFrom, uTo, uForce;\nout vec4 outColor;\n${e(t)}\nfloat segment(vec2 p,vec2 a,vec2 b){vec2 pa=p-a,ba=b-a;float h=clamp(dot(pa,ba)/max(dot(ba,ba),1e-8),0.,1.);return length(pa-ba*h);}\nvoid main(){\n  vec2 uv=gl_FragCoord.xy/uSize;\n  vec4 here=decodeFluid(texture(uPrevious,uv));\n  vec4 state=decodeFluid(texture(uPrevious,uv-uDt*here.xy*vec2(1./uAspect,1.)));\n  state.xy*=exp(-uDt*uDecay);\n  state.z*=exp(-uDt*uEnergyDecay);\n  if(uSplat>.5){\n    vec2 scale=vec2(uAspect,1.);\n    float d=segment(uv*scale,uFrom*scale,uTo*scale);\n    float g=exp(-d*d/(uRadius*uRadius));\n    state.xy+=uForce*g;\n    state.z=min(1.,state.z+g*min(1.,length(uForce)*.5+.08));\n  }\n  float speed=length(state.xy);\n  if(speed>5.)state.xy*=5./speed;\n  outColor=encodeFluid(state);\n}`)(L)),X?.dispose(),X=L?null:function(e,t,c){const f={splat:t(n),curl:t(r),vorticity:t(i),divergence:t(o),fade:t(a),pressure:t(l),gradient:t(u),advect:t(s)},h=Object.values(f);let d=0,m=0,v=[],g=[],p=null,x=null;const E=t=>{const n=e.createTexture();e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA16F,d,m,0,e.RGBA,e.HALF_FLOAT,null);const r=e.createFramebuffer();return e.bindFramebuffer(e.FRAMEBUFFER,r),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,n,0),e.checkFramebufferStatus(e.FRAMEBUFFER)!==e.FRAMEBUFFER_COMPLETE?(e.deleteFramebuffer(r),e.deleteTexture(n),null):(e.viewport(0,0,d,m),e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),{texture:n,buffer:r})},T=t=>{t&&(e.deleteTexture(t.texture),e.deleteFramebuffer(t.buffer))},y=()=>{[...v,...g,p,x].forEach(T),v=[],g=[],p=x=null},b=(t,n)=>{const r=t.locations;return e.useProgram(t.program),e.bindFramebuffer(e.FRAMEBUFFER,n.buffer),e.uniform2f(r.uTexel,1/d,1/m),r},w=(t,n,r,i)=>{e.activeTexture(e.TEXTURE0+r),e.bindTexture(e.TEXTURE_2D,i),e.uniform1i(t[n],r)},M=()=>e.drawArrays(e.TRIANGLES,0,3),R=e=>{const t=e[0];e[0]=e[1],e[1]=t};return{resize(t,n){y(),d=t,m=n;const r=[E(e.LINEAR),E(e.LINEAR),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST),E(e.NEAREST)];return e.bindFramebuffer(e.FRAMEBUFFER,null),r.some(e=>!e)?(r.forEach(T),!1):(v=[r[0],r[1]],g=[r[2],r[3]],p=r[4],x=r[5],!0)},ready:()=>h.every(c),step(t,n){if(!v.length||!p||!x)return;let r;e.viewport(0,0,d,m),t&&(r=b(f.splat,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform2f(r.uFrom,t.from[0],t.from[1]),e.uniform2f(r.uTo,t.to[0],t.to[1]),e.uniform2f(r.uForce,t.force[0],t.force[1]),e.uniform1f(r.uAspect,n.aspect),e.uniform1f(r.uRadius,n.radius),M(),R(v)),n.curl>0&&(r=b(f.curl,x),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.vorticity,v[1]),w(r,"uVelocity",0,v[0].texture),w(r,"uCurl",1,x.texture),e.uniform1f(r.uStrength,n.curl),e.uniform1f(r.uDt,n.dt),M(),R(v)),r=b(f.divergence,p),w(r,"uVelocity",0,v[0].texture),M(),r=b(f.fade,g[1]),w(r,"uSource",0,g[0].texture),e.uniform1f(r.uAmount,.8),M(),R(g);for(let e=0;e<20;e++)r=b(f.pressure,g[1]),w(r,"uPressure",0,g[0].texture),w(r,"uDivergence",1,p.texture),M(),R(g);r=b(f.gradient,v[1]),w(r,"uPressure",0,g[0].texture),w(r,"uVelocity",1,v[0].texture),M(),R(v),r=b(f.advect,v[1]),w(r,"uVelocity",0,v[0].texture),e.uniform1f(r.uDt,n.dt),e.uniform1f(r.uDissipation,n.dissipation),M(),R(v),e.bindFramebuffer(e.FRAMEBUFFER,null)},get velocity(){return v[0]?.texture??null},get size(){return[d,m]},release:y,dispose(){y(),h.forEach(({program:t})=>e.deleteProgram(t))}}}(F,He,e=>Ge(e))}const Ke=()=>{$e();const e=v.fluid;if(!(e&&qe()&&z&&O))return;U||je();const t=e.resolution,n=z/O;if(j=n>=1?t:Math.max(8,Math.round(t*n)),K=n>=1?Math.max(8,Math.round(t/n)):t,N=!!X&&X.resize(j,K),N)return void(J=0);const r=()=>{$e();for(let e=0;e<2;e++){const e=Oe(F.LINEAR);F.texImage2D(F.TEXTURE_2D,0,L?F.RGBA8:F.RGBA16F,j,K,0,F.RGBA,L?F.UNSIGNED_BYTE:F.HALF_FLOAT,null);const t=F.createFramebuffer();F.bindFramebuffer(F.FRAMEBUFFER,t),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT0,F.TEXTURE_2D,e,0),B.push(e),I.push(t)}return F.checkFramebufferStatus(F.FRAMEBUFFER)===F.FRAMEBUFFER_COMPLETE};if(!r()){if(L)throw new Error("The glyph field could not allocate its fluid buffers.");L=!0,Je(),je(),r()}for(const e of I)F.bindFramebuffer(F.FRAMEBUFFER,e),F.viewport(0,0,j,K),F.clearColor(L?.5:0,L?.5:0,0,1),F.clear(F.COLOR_BUFFER_BIT);F.bindFramebuffer(F.FRAMEBUFFER,null),J=0};function Je(){C&&F.deleteProgram(C.program),D&&F.deleteProgram(D.program),We(),C=He((t=>`#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uSource, uFluid;\nuniform vec2 uResolution, uCell;\nuniform float uCount, uBlend;\nconst float BAYER[16]=float[16](0.,8.,2.,10.,12.,4.,14.,6.,3.,11.,1.,9.,15.,7.,13.,5.);\nuniform vec4 uSourceMap;\nuniform int uScene;\nuniform vec3 uInk, uHighlight;\nuniform vec4 uBackground;\nuniform float uBrightness, uContrast, uGamma, uInvert, uVignette, uSourceColor;\nuniform float uRefraction, uGlow, uTime, uDrift, uFluidOn, uLod, uSaturation, uBackdrop, uShade, uHighlightAuto, uFluidMode;\nuniform vec2 uFluidTexel;\nuniform int uHoverMode;\nuniform vec3 uLight;\nuniform vec3 uTrail[12];\nuniform float uLightRadius, uLightGain, uClock, uFlicker, uTrailAmount;\nuniform sampler2D uTrailMap;\nuniform vec2 uLevels;\nuniform int uMark;\nuniform float uScale, uClearFeather, uClearShape;\nuniform vec4 uClear;\nuniform vec4 uPulse[4];\nlayout(location=0) out vec4 outInk;\nlayout(location=1) out vec4 outUnder;\n${e(t)}\nfloat hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);\n  return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}\nfloat fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}\nvec3 generated(vec2 uv,float aspect){\n  vec2 p=(uv-.5)*vec2(aspect,1.)*uScale;\n  if(uScene==1){\n    float t=uTime*.08;\n    vec2 q=vec2(fbm(p*1.6+t),fbm(p*1.6-t+3.1));\n    return vec3(smoothstep(.28,.86,fbm(p*1.8+q*1.6+vec2(t*.6,-t*.4))));\n  }\n  if(uScene==2){\n    float r=.36,d=length(p),a=uTime*.25;\n    vec3 l=normalize(vec3(cos(a)*.8,.55,sin(a)*.6+.6));\n    if(d<r){\n      vec3 n=normalize(vec3(p.x,-p.y,sqrt(r*r-d*d)));\n      float diffuse=max(dot(n,l),0.),rim=pow(1.-n.z,2.5);\n      float lon=atan(n.x,n.z)+uTime*.35,lat=asin(clamp(n.y,-1.,1.));\n      float bands=.5+.25*sin(lat*14.)+.25*sin(lon*6.);\n      return vec3(clamp(diffuse*.85+rim*.5+bands*.12,0.,1.));\n    }\n    return vec3(exp(-pow((d-r)*9.,2.))*.35);\n  }\n  if(uScene==4){\n    // Drift: a few broad lobes that wander slowly. Built for halftone, where large soft shapes read best.\n    float t=uTime*.045;\n    vec2 q=p*1.15;\n    vec2 w=vec2(fbm(q*.7+vec2(t,-t*.7)),fbm(q*.7+vec2(4.3-t*.8,t+1.7)));\n    float n=fbm(q+w*1.3+vec2(t*.4,t*.25));\n    return vec3(smoothstep(.36,.74,n));\n  }\n  return vec3(0.);\n}\nvoid main(){\n  vec2 cell=floor(gl_FragCoord.xy);\n  vec2 uv=(cell+.5)*uCell/uResolution;\n  float aspect=uResolution.x/uResolution.y;\n  vec4 fluid=vec4(0.);\n  // lift: signed tone change. The solver's flow brightens one side of each eddy and opens the other into gaps.\n  float lift=0.,wake=0.,bend=1.,swirl=0.,speed=0.;\n  if(uFluidOn>.5){\n    vec4 raw=texture(uFluid,vec2(uv.x,1.-uv.y));\n    if(uFluidMode>.5){\n      vec2 v=raw.xy*uFluidTexel*vec2(aspect,1.);\n      fluid=vec4(v,0.,1.);\n      swirl=clamp(dot(v,vec2(.4,.65))*uGlow*.32,-.65,.65);\n      speed=clamp(length(v)*uGlow*.055,0.,.38);\n      bend=.4;\n    } else {\n      fluid=decodeFluid(raw);\n      wake=clamp(fluid.z*uGlow,0.,1.);\n      lift=wake*.55;\n    }\n  }\n  vec2 drift=uDrift*.006*vec2(sin(uv.y*5.3+uTime*.6),cos(uv.x*4.1-uTime*.5));\n  vec2 sampleAt=uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend+drift;\n  vec3 rgb,glow=vec3(0.);\n  if(uScene==0){\n    vec2 s=sampleAt*uSourceMap.xy+uSourceMap.zw;\n    bool inside=!(s.x<0.||s.y<0.||s.x>1.||s.y>1.);\n    rgb=inside?textureLod(uSource,s,uLod).rgb:vec3(0.);\n    if(uBackdrop>0.){\n      vec2 b=(uv-vec2(fluid.x/aspect,-fluid.y)*uRefraction*bend*.5)*uSourceMap.xy+uSourceMap.zw;\n      glow=(b.x<0.||b.y<0.||b.x>1.||b.y>1.)?vec3(0.):textureLod(uSource,b,uLod+3.).rgb*uBackdrop;\n    }\n  } else rgb=generated(sampleAt,aspect);\n  float tone=dot(rgb,vec3(.2126,.7152,.0722));\n  tone=clamp((tone-uLevels.x)/max(uLevels.y-uLevels.x,.01),0.,1.);\n  tone=clamp((tone-.5)*uContrast+.5+uBrightness,0.,1.);\n  tone=pow(tone,1./uGamma);\n  if(uInvert>.5)tone=1.-tone;\n  float flick=0.,trailFold=0.;\n  if(uHoverMode==2){\n    // Lantern: a soft light and its fading tail lift the characters they pass. Nothing moves the image.\n    vec2 ap=vec2(aspect,1.),d=(uv-uLight.xy)*ap;\n    float r2=uLightRadius*uLightRadius,glowL=uLight.z*exp(-dot(d,d)/r2);\n    for(int i=0;i<12;i++){vec2 e=(uv-uTrail[i].xy)*ap;glowL+=uTrail[i].z*exp(-dot(e,e)/(r2*.55));}\n    glowL=min(glowL,1.);\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=glowL*uLightGain*(.7+.6*grain);\n    wake=glowL*.4;\n    // A few letters at the light's rim step up the ramp and back, as if being retyped.\n    flick=uFlicker*step(.9,fract(grain*13.7+floor(uClock*7.+grain*5.)*.37))*glowL*(1.-glowL)*4.;\n  }\n  if(uHoverMode==3){\n    // Trail: the studio's ink field, as a 16-bit density. Sparse marks fill in, dense marks open up.\n    vec4 ink=texture(uTrailMap,uv);\n    float density=(ink.r*65280.+ink.g*255.)/65535.*uTrailAmount;\n    float t=clamp(density/.38,0.,1.);\n    trailFold=t*t*(3.-2.*t);\n  }\n  if(uFluidMode>.5&&uHoverMode==1){\n    // Dark ground: any motion lights the characters. Lit ground: the flow lights one side of each eddy and opens the other.\n    // A little cell-to-cell grain keeps the lit area a shimmer of letters rather than a solid block.\n    float grain=fract(sin(dot(cell,vec2(12.9898,78.233)))*43758.5453);\n    lift=mix(abs(swirl)*.5+speed,swirl+speed*.35,smoothstep(.12,.55,tone))*(.65+.7*grain);\n    wake=clamp(lift*1.6,0.,1.);\n  }\n  tone=clamp(tone+lift,0.,1.);\n  tone+=(1.-2.*tone)*trailFold;\n  // Pulses: rings sent by the interface (field.pulse()), e.g. on a save or a notification.\n  for(int i=0;i<4;i++){\n    if(uPulse[i].w<=0.)continue;\n    float dist=length((uv-uPulse[i].xy)*vec2(aspect,1.)),front=uPulse[i].z*.95;\n    float ring=exp(-pow((dist-front)/.1,2.))*uPulse[i].w*exp(-uPulse[i].z*.85);\n    tone=clamp(tone+ring*.85,0.,1.);\n  }\n  tone*=1.-uVignette*smoothstep(.35,1.05,length((uv-.5)*vec2(min(aspect,1.8),1.)*2.));\n  if(uClear.z>0.){\n    // Clear zone: the field fades out around content so text above it stays readable.\n    vec2 half_=uClear.zw*.5*vec2(aspect,1.),q=(uv-uClear.xy-uClear.zw*.5)*vec2(aspect,1.);\n    float dz;\n    if(uClearShape>.5){vec2 e=abs(q)-half_;dz=length(max(e,0.))+min(max(e.x,e.y),0.);}\n    else dz=(length(q/max(half_,vec2(1e-4)))-1.)*min(half_.x,half_.y);\n    tone*=smoothstep(0.,uClearFeather,dz);\n  }\n  // Blend: a shade between two characters takes the upper one in the share of cells a 4x4 Bayer pattern gives it.\n  float level=tone*(uCount-1.),upper=fract(level)>=.5?1.:0.;\n  if(uBlend>.5&&tone>.02&&tone<.98){\n    ivec2 q=ivec2(mod(gl_FragCoord.xy,4.));\n    upper=fract(level)>(BAYER[q.y*4+q.x]+.5)/16.?1.:0.;\n  }\n  float index=min(uCount-1.,floor(level)+upper+(flick>.5&&tone>.02?1.:0.));\n  vec3 hue=rgb/max(max(rgb.r,rgb.g),max(rgb.b,.03));\n  hue=mix(vec3(dot(hue,vec3(.2126,.7152,.0722))),hue,uSaturation);\n  vec3 ink=mix(uInk*mix(1.,.3+.7*tone,uShade),clamp(hue*(.38+.62*tone),0.,1.),uSourceColor);\n  vec3 lifted=uHighlightAuto>.5?ink/max(max(ink.r,ink.g),max(ink.b,.06)):uHighlight;\n  ink=mix(ink,lifted,wake*.7);\n  float underAlpha=max(uBackground.a,min(1.,max(glow.r,max(glow.g,glow.b))));\n  vec3 under=min(uBackground.rgb*uBackground.a+glow,vec3(underAlpha));\n  // Halftone keeps the tone for the dot size; glyphs keep their atlas index, exact in 8 bits.\n  outInk=vec4(ink,uMark==1?(tone>.003?tone:0.):index/255.);\n  outUnder=vec4(under,underAlpha);\n}`)(L)),D=He("#version 300 es\nprecision highp float;\nprecision highp sampler2D;\nuniform sampler2D uAtlas, uCells, uUnder;\nuniform vec2 uResolution, uCell, uPitch;\nuniform float uColumns, uDotScale;\nuniform int uMark;\nout vec4 outColor;\nvoid main(){\n  vec2 frag=vec2(gl_FragCoord.x,uResolution.y-gl_FragCoord.y);\n  // The pitch is the atlas cell, or a fractional one under cellFit 'fill', where each glyph sits centred in its stretched cell.\n  vec2 cell=floor(frag/uPitch);\n  vec4 ink=texelFetch(uCells,ivec2(cell),0),under=texelFetch(uUnder,ivec2(cell),0);\n  vec2 local=frag-cell*uPitch;\n  float coverage;\n  if(uMark==1){\n    // Halftone: dot area follows tone, so midtones read true; edges are antialiased to one device pixel.\n    float r=sqrt(ink.a)*min(uPitch.x,uPitch.y)*.5*uDotScale;\n    coverage=ink.a>.003?clamp(r-length(local-uPitch*.5)+.5,0.,1.):0.;\n  } else {\n    float index=floor(ink.a*255.+.5);\n    ivec2 tile=ivec2(int(mod(index,uColumns)),int(floor(index/uColumns)));\n    vec2 texel=floor(local-floor((uPitch-uCell)*.5));\n    coverage=all(greaterThanEqual(texel,vec2(0.)))&&all(lessThan(texel,uCell))?texelFetch(uAtlas,tile*ivec2(uCell)+ivec2(texel),0).a:0.;\n  }\n  outColor=vec4(ink.rgb*coverage+under.rgb*(1.-coverage),coverage+under.a*(1.-coverage));\n}"),_||ze(!0)}const Qe=()=>`${v.fontWeight} ${Math.max(1,q.height*v.glyphScale)}px ${v.font}`,Ze=()=>{const e=x(v.charset);$=e.length,q=y(v.cellSize,v.cellAspect,W,$),Y=W;const t=document.createElement("canvas");t.width=q.atlasWidth,t.height=q.atlasHeight;const n=t.getContext("2d");n.fillStyle="#fff",n.textAlign="center",n.textBaseline="alphabetic",n.font=Qe();const r=n.measureText("M"),i=r.actualBoundingBoxAscent||q.height*v.glyphScale*.7,o=r.actualBoundingBoxDescent||0,a=(q.height+i-o)/2;e.forEach((e,t)=>{const r=t%q.columns*q.width+q.width/2,i=Math.floor(t/q.columns)*q.height+a,o=n.measureText(e).width;n.save(),n.beginPath(),n.rect(r-q.width/2,i-a,q.width,q.height),n.clip(),n.translate(r,i),o>.96*q.width&&n.scale(.96*q.width/o,1),n.fillText(e,0,0),n.restore()}),F.bindTexture(F.TEXTURE_2D,k),F.pixelStorei(F.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,F.RGBA,F.UNSIGNED_BYTE,t),t.width=t.height=1,de=!0},et="undefined"==typeof document?void 0:document.fonts,tt=()=>{if(!et?.load)return;const e=Qe();et.load(e,x(v.charset).join("")).then(()=>{me||ve||Qe()!==e||(Ze(),yt())},()=>{})},nt=e=>e.trim().replace(/^["']|["']$/g,"").toLowerCase(),rt=e=>{const t=e.fontfaces??[],n=v.font.split(",").map(nt);t.some(e=>n.includes(nt(e.family)))&&tt()},it=()=>{if(ue=[0,1],Q&&"none"!==v.levels)try{const e=document.createElement("canvas");e.width=e.height=64;const t=e.getContext("2d",{willReadFrequently:!0});Q===ie&&(t.imageSmoothingQuality="medium"),t.drawImage(Q,0,0,64,64),ue=w(t.getImageData(0,0,64,64).data)}catch{ue=[0,1]}},ot=()=>{if(!Q)return;const e=performance.now();Q instanceof HTMLVideoElement&&!(e-se>1500)||(it(),se=e),F.bindTexture(F.TEXTURE_2D,S),F.pixelStorei(F.UNPACK_FLIP_Y_WEBGL,!1),F.pixelStorei(F.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1);try{F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,F.RGBA,F.UNSIGNED_BYTE,Q),F.generateMipmap(F.TEXTURE_2D)}catch(e){Ne(e)}},at=()=>{L=!F.getExtension("EXT_color_buffer_float")&&!F.getExtension("EXT_color_buffer_half_float"),Je(),V=F.createVertexArray(),k=Oe(F.NEAREST),S=Oe(F.LINEAR_MIPMAP_LINEAR),F.bindTexture(F.TEXTURE_2D,S),F.texImage2D(F.TEXTURE_2D,0,F.RGBA8,1,1,0,F.RGBA,F.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])),F.generateMipmap(F.TEXTURE_2D),z=O=0,Y=0,lt(),tt(),Q&&ot()};function lt(){const e=t.clientWidth||t.clientHeight?{width:t.clientWidth,height:t.clientHeight}:t.getBoundingClientRect(),n=Math.min(globalThis.devicePixelRatio||1,v.maxPixelRatio),r=Math.max(1,Math.round(e.width*n)),i=Math.max(1,Math.round(e.height*n));if(r===z&&i===O&&n===W)return!1;const o=!z||Math.abs(r/i-z/O)>.01;return W=n,z=r,O=i,t.width=z,t.height=O,Y!==W&&Ze(),(o||qe()&&!B.length&&!N)&&Ke(),de=!0,!0}let ut=null,st=[0,0,0],ct=[1,1,1],ft=[0,0,0,0],ht=T(1,1,1,1,"cover"),dt=null,mt=0,vt=0,gt=0,pt=0;const xt=()=>{ut!==v&&(ut=v,st=b(v.ink),ct=b("auto"===v.highlight?"#ffffff":v.highlight),ft="transparent"===v.background?[0,0,0,0]:[...b(v.background),1]),dt===v&&mt===z&&vt===O&&gt===te&&pt===ne||(dt=v,mt=z,vt=O,gt=te,pt=ne,ht=T(z,O,te||1,ne||1,v.fit,v.focus));const e=v.fluid,t=Q&&oe?q.height/O*oe*ht.scale[1]:1,n=(()=>{const[e,t]=Ye(),n=Math.ceil(z/e-1e-4),r=Math.ceil(O/t-1e-4);if(P&&P.columns===n&&P.rows===r)return P;We();const i=()=>{const e=Oe(F.NEAREST);return F.texStorage2D(F.TEXTURE_2D,1,L?F.RGBA8:F.RGBA16F,n,r),e},o=i(),a=i(),l=F.createFramebuffer();return F.bindFramebuffer(F.FRAMEBUFFER,l),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT0,F.TEXTURE_2D,o,0),F.framebufferTexture2D(F.FRAMEBUFFER,F.COLOR_ATTACHMENT1,F.TEXTURE_2D,a,0),F.drawBuffers([F.COLOR_ATTACHMENT0,F.COLOR_ATTACHMENT1]),P={ink:o,under:a,buffer:l,columns:n,rows:r}})(),r=C.locations,i=D.locations,o=M(v),a=!Pe();F.bindFramebuffer(F.FRAMEBUFFER,n.buffer),F.viewport(0,0,n.columns,n.rows),F.useProgram(C.program),F.activeTexture(F.TEXTURE0),F.bindTexture(F.TEXTURE_2D,S),F.uniform1i(r.uSource,0),F.activeTexture(F.TEXTURE2),F.bindTexture(F.TEXTURE_2D,(N?X?.velocity:B[J])??S),F.uniform1i(r.uFluid,2),F.activeTexture(F.TEXTURE3),F.bindTexture(F.TEXTURE_2D,ke??S),F.uniform1i(r.uTrailMap,3),F.uniform1f(r.uFluidMode,N?1:0),F.uniform1i(r.uHoverMode,"fluid"===o?1:"lantern"===o?2:"trail"===o&&Se?3:0),F.uniform1f(r.uTrailAmount,v.trail.strength),F.uniform3f(r.uLight,Ae.at?.[0]??-1,Ae.at?.[1]??-1,"lantern"===o?Ae.strength:0),F.uniform3fv(r.uTrail,Le),F.uniform1f(r.uLightRadius,v.lantern.radius),F.uniform1f(r.uLightGain,v.lantern.strength),F.uniform1f(r.uClock,performance.now()/1e3),F.uniform1f(r.uFlicker,a?1:0),F.uniform2f(r.uFluidTexel,1/Math.max(1,j),1/Math.max(1,K)),F.uniform2f(r.uResolution,z,O);const[l,u]=Ye();F.uniform2f(r.uCell,l,u),F.uniform1f(r.uCount,$),F.uniform1f(r.uBlend,"on"===v.blend||$<=9&&("coarse"===v.blend||"auto"===v.blend&&Z)?1:0),F.uniform4f(r.uSourceMap,ht.scale[0],ht.scale[1],ht.offset[0],ht.offset[1]),F.uniform1i(r.uScene,Q?0:"flow"===v.scene?1:"orb"===v.scene?2:"drift"===v.scene?4:3),F.uniform1i(r.uMark,"dot"===v.mark?1:0),F.uniform1f(r.uScale,v.scale);const s=v.clear;F.uniform4f(r.uClear,s?s.x:0,s?s.y:0,s?s.width:0,s?s.height:0),F.uniform1f(r.uClearFeather,s?s.feather:.1),F.uniform1f(r.uClearShape,s&&"rect"===s.shape?1:0);const c=performance.now();Re.fill(0);for(let e=0;e<Me.length;e++){const t=Me[e],n=4*e;Re[n]=t.x,Re[n+1]=t.y,Re[n+2]=(c-t.born)/1e3,Re[n+3]=t.strength}F.uniform4fv(r.uPulse,Re),F.uniform3fv(r.uInk,st),F.uniform3fv(r.uHighlight,ct),F.uniform1f(r.uHighlightAuto,"auto"===v.highlight?1:0),F.uniform4fv(r.uBackground,ft),F.uniform1f(r.uBrightness,v.brightness),F.uniform1f(r.uContrast,v.contrast),F.uniform1f(r.uGamma,v.gamma),F.uniform1f(r.uInvert,v.invert?1:0),F.uniform1f(r.uVignette,v.vignette),F.uniform1f(r.uSourceColor,"source"===v.color?1:0),F.uniform1f(r.uRefraction,e?e.refraction*(a?1:.25):0),F.uniform1f(r.uGlow,e?e.glow:0),F.uniform1f(r.uTime,he),F.uniform1f(r.uDrift,a?v.drift:0),F.uniform1f(r.uFluidOn,e&&"fluid"===o&&(B.length||N)?1:0),F.uniform1f(r.uLod,Math.max(0,Math.log2(Math.max(1,t))-.5)),F.uniform1f(r.uSaturation,v.saturation),F.uniform1f(r.uShade,v.shade),F.uniform1f(r.uBackdrop,Q?v.backdrop:0),F.uniform2f(r.uLevels,Q&&"auto"===v.levels?ue[0]:0,Q&&"auto"===v.levels?ue[1]:1),F.bindVertexArray(V),F.drawArrays(F.TRIANGLES,0,3),F.bindFramebuffer(F.FRAMEBUFFER,null),F.viewport(0,0,z,O),F.useProgram(D.program),F.activeTexture(F.TEXTURE1),F.bindTexture(F.TEXTURE_2D,k),F.uniform1i(i.uAtlas,1),F.activeTexture(F.TEXTURE4),F.bindTexture(F.TEXTURE_2D,n.ink),F.uniform1i(i.uCells,4),F.activeTexture(F.TEXTURE5),F.bindTexture(F.TEXTURE_2D,n.under),F.uniform1i(i.uUnder,5),F.uniform2f(i.uResolution,z,O),F.uniform2f(i.uCell,q.width,q.height),F.uniform2f(i.uPitch,l,u),F.uniform1f(i.uColumns,q.columns),F.uniform1f(i.uDotScale,v.dotScale),F.uniform1i(i.uMark,"dot"===v.mark?1:0),F.drawArrays(F.TRIANGLES,0,3)},Et=()=>!me&&!ve&&!ge&&(xe||Xe)&&!("undefined"!=typeof document&&document.hidden),Tt=e=>{if(ce=0,!Et())return;const t=(e-fe)/1e3,n=Math.min(1/30,Math.max(1/480,t));fe=e,ye=.9*ye+.1*Math.min(t,.25),be=ye>1/24?be+1:0;try{be>45&&we<2&&(be=0,we++,1===we&&W>1?(v={...v,maxPixelRatio:1},lt()):we=2);const t=ze(),r=!(pe||we>=2&&!(Q instanceof HTMLVideoElement)||(!(Q instanceof HTMLVideoElement)||Q.paused||Q.ended)&&(Pe()||!(!Q&&"none"!==v.scene||v.drift>0)));r&&(he+=n*v.speed),Q instanceof HTMLVideoElement&&Q.readyState>=2&&ae&&(ae=!("requestVideoFrameCallback"in Q),ot(),de=!0);const i=M(v);let o="fluid"===i&&(null!==Te||e<De);if(o?((e,t)=>{const n=v.fluid;if(!n||!I.length&&!N)return;if(N?!X?.ready():!U||!Ge(U))return;const r=z/O,i=Te;if(Te=null,N&&X){const o=5200*n.force*(Pe()?.35:1);return i&&(De=t+1e3*Math.min(9,6/Math.max(.3,n.dissipation))),void X.step(i?{from:i.from,to:i.to,force:[(i.to[0]-i.from[0])*o,(i.to[1]-i.from[1])*o]}:null,{dt:Math.min(e,1/60),radius:1.1*n.radius,curl:n.curl,dissipation:n.dissipation,aspect:r})}let o=0,a=0;if(i){const e=(Pe()?1:3)*n.force;o=(i.to[0]-i.from[0])*r*e*4,a=(i.to[1]-i.from[1])*e*4,De=t+7/Math.min(n.dissipation,1.1*n.dissipation)*1e3}const l=U.locations;F.bindFramebuffer(F.FRAMEBUFFER,I[1-J]),F.viewport(0,0,j,K),F.useProgram(U.program),F.activeTexture(F.TEXTURE0),F.bindTexture(F.TEXTURE_2D,B[J]),F.uniform1i(l.uPrevious,0),F.uniform2f(l.uSize,j,K),F.uniform1f(l.uAspect,r),F.uniform1f(l.uDt,e),F.uniform1f(l.uDecay,n.dissipation),F.uniform1f(l.uEnergyDecay,1.1*n.dissipation),F.uniform1f(l.uRadius,n.radius),F.uniform1f(l.uSplat,i?1:0),F.uniform2f(l.uFrom,i?.from[0]??0,i?.from[1]??0),F.uniform2f(l.uTo,i?.to[0]??0,i?.to[1]??0),F.uniform2f(l.uForce,o,a),F.drawArrays(F.TRIANGLES,0,3),J=1-J})(n,e):Te=null,"lantern"===i&&(o=((e,t)=>{const n=v.lantern,r=Ae.target;if(r){const i=Ae.at;if(i)if(Pe())i[0]=r[0],i[1]=r[1];else{const t=1-Math.exp(-n.follow*e);i[0]+=(r[0]-i[0])*t,i[1]+=(r[1]-i[1])*t}else Ae.at=[r[0],r[1]];const o=Ae.at,a=Ae.trail[Ae.trail.length-1];n.trail>0&&(!a||t-a.born>28&&Math.hypot(o[0]-a.x,o[1]-a.y)>.004)&&(Ae.trail.push({x:o[0],y:o[1],born:t}),Ae.trail.length>12&&Ae.trail.shift())}Ae.strength+=((r?1:0)-Ae.strength)*(1-Math.exp(-e*(r?9:5)));const i=Ae.trail;for(let e=i.length-1;e>=0;e--)n.trail>0&&t-i[e].born<4e3*n.trail||i.splice(e,1);Le.fill(0);for(let e=0;e<i.length;e++){const r=i[e];Le[3*e]=r.x,Le[3*e+1]=r.y,Le[3*e+2]=.55*Math.exp(-(t-r.born)/1e3/Math.max(.01,n.trail))}return Ae.strength>.003||i.length>0})(n,e)||o),"trail"===i){const e=!!_e?.active;o=(e=>{const t=Ce();return!(!t||!t.active||(t.step(e),F.bindTexture(F.TEXTURE_2D,ke),F.texSubImage2D(F.TEXTURE_2D,0,0,0,t.width,t.height,F.RGBA,F.UNSIGNED_BYTE,t.pixels),Se=!0,0))})(n)||o,e&&!_e?.active&&(de=!0)}if(Me.length){for(let t=Me.length-1;t>=0;t--)e-Me[t].born>=2400&&Me.splice(t,1);o=!0,Me.length||(de=!0)}t&&(r||o||de)&&(xt(),de=!1,!Xe||re&&!Q||(Xe=!1,Be())),(r||o||Te||!t)&&(ce=requestAnimationFrame(Tt))}catch(e){ge=!0,Ne(e)}};function yt(){!ce&&Et()&&(fe=performance.now(),ce=requestAnimationFrame(Tt))}const bt=(e,n)=>{const r=t.getBoundingClientRect();if(!r.width||!r.height)return null;const i=(e-r.left)/r.width,o=(n-r.top)/r.height;return i<-.05||i>1.05||o<-.05||o>1.05?null:[i,1-o]},wt=e=>{const t=M(v);if("none"===t||pe)return Ee=null,void(Ae.target=null);if("lantern"===t)return Ae.target=e?[e[0],1-e[1]]:null,Ee=null,void yt();if("trail"===t){const t=Ce();if(!t)return;return e?t.move(e[0],1-e[1],v.trail.radius,performance.now()):t.leave(),Ee=null,void yt()}e?(Ee&&(Te=Te?{from:Te.from,to:e}:{from:Ee,to:e}),Ee=e,yt()):Ee=null},Mt=e=>wt(bt(e.clientX,e.clientY)),Rt=()=>{Ee=null,_e?.leave(),Ae.target&&(Ae.target=null,yt())},Ft=f.interactionTarget??window;Ft.addEventListener("pointermove",Mt,{passive:!0}),Ft.addEventListener("pointerdown",Mt,{passive:!0}),document.addEventListener("pointerleave",Rt),Ft!==window&&Ft.addEventListener("pointerleave",Rt);const At="function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=lt();Fe(),(e||de)&&yt()}):null;At?.observe(t),m&&At?.observe(m.element);const Lt="function"==typeof IntersectionObserver?new IntersectionObserver(([e])=>{xe=e.isIntersecting,xe&&(de=!0,yt())},{rootMargin:"120px"}):null;Lt?.observe(t);const _t=()=>{document.hidden||(de=!0,yt())};document.addEventListener("visibilitychange",_t);const kt=()=>{de=!0,yt()};Ue?.addEventListener?.("change",kt),et?.addEventListener?.("loadingdone",rt);const St=e=>{e.preventDefault(),ve=!0,ce&&cancelAnimationFrame(ce),ce=0},Ct=()=>{ve=!1,G.length=0,H=null,C=D=U=null,P=null,B=[],I=[],X=null,N=!1,ke=null,_e=null,Se=!1;try{at(),de=!0,yt()}catch(e){Ne(e)}};t.addEventListener("webglcontextlost",St),t.addEventListener("webglcontextrestored",Ct);const Dt=()=>{ee&&(ee.pause(),ee.removeAttribute("src"),ee.load(),ee=null),le&&Q instanceof HTMLVideoElement&&"cancelVideoFrameCallback"in Q&&Q.cancelVideoFrameCallback(le),le=0},Ut=()=>{ie?.close(),ie=null},Pt=async e=>{const t=await createImageBitmap(e,{premultiplyAlpha:"none"}),n=[t.width,t.height],r=function(e,t,n,r,i,o,a=8){if(!(n>=16&&r>=16&&e>0&&t>0&&i>0))return 1;const l=a/i/("cover"===o?Math.min(e/n,t/r):Math.max(e/n,t/r));return l>.5?1:2**-Math.floor(Math.log2(1/l))}(t.width,t.height,z,O,q.height,v.fit);if(1===r)return{element:t,owned:!0,natural:n};try{return{element:await createImageBitmap(t,{resizeWidth:Math.max(1,Math.round(t.width*r)),resizeHeight:Math.max(1,Math.round(t.height*r)),resizeQuality:"medium",premultiplyAlpha:"none"}),owned:!0,natural:n}}finally{t.close()}},Bt=e=>new Promise((t,n)=>{const r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=()=>t({element:r,owned:!1}),r.onerror=()=>n(new Error("The glyph field could not load this image.")),r.src=e}),It=async e=>{const t=++re;if(!e)return Dt(),Ut(),Q=null,te=ne=oe=0,Z=!1,de=!0,void yt();try{const n=await(async e=>{if("string"!=typeof e)return e instanceof HTMLImageElement&&!e.complete?e.decode().then(()=>({element:e,owned:!1})):e instanceof HTMLVideoElement&&e.readyState<2?new Promise((t,n)=>{e.addEventListener("loadeddata",()=>t({element:e,owned:!1}),{once:!0}),e.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0})}):{element:e,owned:!1};if(A.test(e))return new Promise((t,n)=>{const r=document.createElement("video");r.crossOrigin="anonymous",r.muted=!0,r.loop=!0,r.playsInline=!0,r.preload="auto",r.addEventListener("loadeddata",()=>{r.play().catch(()=>{}),t({element:r,owned:!0})},{once:!0}),r.addEventListener("error",()=>n(new Error("The glyph field could not load this video.")),{once:!0}),r.src=e});if("function"!=typeof createImageBitmap||"function"!=typeof fetch)return Bt(e);let t;try{t=await(await fetch(e).then(e=>{if(!e.ok)throw new Error("The glyph field could not load this image.");return e})).blob()}catch(t){if(t instanceof Error&&t.message.startsWith("The glyph field"))throw t;return Bt(e)}if(!/svg/i.test(t.type))try{return await Pt(t)}catch{}const n=URL.createObjectURL(t);try{return await Bt(n)}finally{URL.revokeObjectURL(n)}})(e),{element:r,owned:i}=n;if(me||t!==re)return void(i&&r instanceof HTMLVideoElement?(r.pause(),r.removeAttribute("src"),r.load()):i&&r.close());Dt(),Ut(),ee=i&&r instanceof HTMLVideoElement?r:null,!i||r instanceof HTMLVideoElement||(ie=r),Q=r,Z="string"==typeof e||e instanceof HTMLImageElement||e instanceof HTMLVideoElement,oe=r instanceof HTMLVideoElement?r.videoHeight:r instanceof HTMLImageElement?r.naturalHeight:r.height,te=n.natural?.[0]??(r instanceof HTMLVideoElement?r.videoWidth:r instanceof HTMLImageElement?r.naturalWidth:r.width),ne=n.natural?.[1]??oe,ae=!0,r instanceof HTMLVideoElement&&(e=>{const t=e;if(!t.requestVideoFrameCallback)return;const n=()=>{me||Q!==e||(ae=!0,yt(),le=t.requestVideoFrameCallback(n))};le=t.requestVideoFrameCallback(n)})(r),ve||ot(),de=!0,yt()}catch(e){Xe&&t===re&&(Xe=!1,Be()),Ne(e)}};at(),Fe();const Xt=f.source??null;return Xt?(re=1,It(Xt)):yt(),{canvas:t,ready:Ie,get settings(){return v},update(e){const n=v,{element:r,rest:i}=d(e);"clear"in e&&(m&&m.element!==r?.element&&At?.unobserve(m.element),m=r,r&&At?.observe(r.element)),v=E(r?{...i,clear:v.clear}:i,v),Fe(),e.label&&t.setAttribute("aria-label",e.label),v.maxPixelRatio!==n.maxPixelRatio&&lt(),v.charset===n.charset&&v.cellSize===n.cellSize&&v.cellAspect===n.cellAspect&&v.font===n.font&&v.fontWeight===n.fontWeight&&v.glyphScale===n.glyphScale||(Ze(),tt()),v.levels!==n.levels&&it();((!!n.fluid&&"fluid"===M(n))!==qe()||v.fluid&&n.fluid&&v.fluid.resolution!==n.fluid.resolution)&&Ke(),"source"in e&&It(e.source??null),de=!0,yt()},setSource:It,pointer(e,n=0){if(null===e)return void wt(null);const r=t.getBoundingClientRect();wt(bt(r.left+e,r.top+n))},redraw(){if(!(me||ve||ge)&&z)try{ze(!0)&&xt()}catch(e){ge=!0,Ne(e)}},pulse(e={}){if(me||Pe())return;const n=t.getBoundingClientRect();if(!n.width||!n.height)return;let r=e.x??n.width/2,i=e.y??n.height/2;if(e.element){const t=e.element.getBoundingClientRect();r=t.left+t.width/2-n.left,i=t.top+t.height/2-n.top}const o=Math.max(0,Math.min(2,e.strength??1));Me=[...Me,{x:r/n.width,y:i/n.height,born:performance.now(),strength:o}].slice(-4),yt()},play(){pe=!1,Q instanceof HTMLVideoElement&&Q.play().catch(()=>{}),de=!0,yt()},pause(){pe=!0,Q instanceof HTMLVideoElement&&Q.pause()},resize(){lt()&&yt()},destroy(){if(!me&&(me=!0,ce&&cancelAnimationFrame(ce),Ft.removeEventListener("pointermove",Mt),Ft.removeEventListener("pointerdown",Mt),document.removeEventListener("pointerleave",Rt),Ft.removeEventListener("pointerleave",Rt),document.removeEventListener("visibilitychange",_t),Ue?.removeEventListener?.("change",kt),et?.removeEventListener?.("loadingdone",rt),t.removeEventListener("webglcontextlost",St),t.removeEventListener("webglcontextrestored",Ct),At?.disconnect(),Lt?.disconnect(),Dt(),Ut(),Q=null,!ve)){$e(),We(),F.deleteTexture(k),F.deleteTexture(S);for(const e of[C,D,U])e&&F.deleteProgram(e.program);X?.dispose(),ke&&F.deleteTexture(ke),G.forEach(e=>F.deleteShader(e)),V&&F.deleteVertexArray(V)}}}}export{m as DEFAULT_FIELD_FLUID,h as DEFAULT_FIELD_LANTERN,v as DEFAULT_FIELD_SETTINGS,d as DEFAULT_FIELD_TRAIL,f as FIELD_HOVERS,M as activeFieldHover,y as fieldCellLayout,R as fieldClearFromRects,x as fieldGlyphs,w as fieldLevels,T as fieldSourceRect,_ as glyphFieldTier,k as isGlyphFieldSupported,S as mountGlyphField,E as normalizeFieldSettings};//# sourceMappingURL=field.js.map