@factorialco/f0-react 1.391.0 → 1.392.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1937 @@
1
+ import { jsx as q, jsxs as le } from "react/jsx-runtime";
2
+ import { useInsertionEffect as ze, createContext as Xe, useContext as Ye, useRef as B, useEffect as ie, useState as Ue, useCallback as $e, useMemo as qe } from "react";
3
+ import { G as He, J as Ke, K as je, M as Qe, N as Me, Q as Je, R as Ze, V as et, W as tt, X as nt, Y as Ne, Z as rt, _ as ot, $ as it, a0 as st, a1 as at, a2 as ct, a3 as ut, a4 as se, a5 as lt, a6 as ft, a7 as ht, a8 as dt, a9 as mt, aa as pt, ab as fe, ac as gt } from "./F0AiChat-h8gS_RRF.js";
4
+ import { useTrackVolume as vt } from "@livekit/components-react";
5
+ function wt(t, e, n) {
6
+ ze(() => t.on(e, n), [t, e, n]);
7
+ }
8
+ function ue(t) {
9
+ return typeof t == "object" && !Array.isArray(t);
10
+ }
11
+ function Oe(t, e, n, r) {
12
+ return typeof t == "string" && ue(e) ? He(t, n, r) : t instanceof NodeList ? Array.from(t) : Array.isArray(t) ? t : [t];
13
+ }
14
+ function Tt(t, e, n) {
15
+ return t * (e + 1);
16
+ }
17
+ function he(t, e, n, r) {
18
+ return typeof e == "number" ? e : e.startsWith("-") || e.startsWith("+") ? Math.max(0, t + parseFloat(e)) : e === "<" ? n : r.get(e) ?? t;
19
+ }
20
+ const yt = (t, e, n) => {
21
+ const r = e - t;
22
+ return ((n - t) % r + r) % r + t;
23
+ };
24
+ function Be(t, e) {
25
+ return Ke(t) ? t[yt(0, t.length, e)] : t;
26
+ }
27
+ function Et(t, e, n) {
28
+ for (let r = 0; r < t.length; r++) {
29
+ const o = t[r];
30
+ o.at > e && o.at < n && (Qe(t, o), r--);
31
+ }
32
+ }
33
+ function bt(t, e, n, r, o, c) {
34
+ Et(t, o, c);
35
+ for (let m = 0; m < e.length; m++)
36
+ t.push({
37
+ value: e[m],
38
+ at: je(o, c, r[m]),
39
+ easing: Be(n, m)
40
+ });
41
+ }
42
+ function At(t, e) {
43
+ for (let n = 0; n < t.length; n++)
44
+ t[n] = t[n] / (e + 1);
45
+ }
46
+ function Rt(t, e) {
47
+ return t.at === e.at ? t.value === null ? 1 : e.value === null ? -1 : 0 : t.at - e.at;
48
+ }
49
+ const xt = "easeInOut", St = 20;
50
+ function Lt(t, { defaultTransition: e = {}, ...n } = {}, r, o) {
51
+ const c = e.duration || 0.3, m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map(), g = {}, R = /* @__PURE__ */ new Map();
52
+ let p = 0, v = 0, x = 0;
53
+ for (let l = 0; l < t.length; l++) {
54
+ const T = t[l];
55
+ if (typeof T == "string") {
56
+ R.set(T, v);
57
+ continue;
58
+ } else if (!Array.isArray(T)) {
59
+ R.set(T.name, he(v, T.at, p, R));
60
+ continue;
61
+ }
62
+ let [F, d, S = {}] = T;
63
+ S.at !== void 0 && (v = he(v, S.at, p, R));
64
+ let I = 0;
65
+ const U = (y, w, _, P = 0, V = 0) => {
66
+ const A = It(y), { delay: f = 0, times: C = Je(A), type: O = "keyframes", repeat: W, repeatType: k, repeatDelay: H = 0, ...z } = w;
67
+ let { ease: M = e.ease || "easeOut", duration: L } = w;
68
+ const N = typeof f == "function" ? f(P, V) : f, K = A.length, Z = tt(O) ? O : o?.[O];
69
+ if (K <= 2 && Z) {
70
+ let j = 100;
71
+ if (K === 2 && Ft(A)) {
72
+ const J = A[1] - A[0];
73
+ j = Math.abs(J);
74
+ }
75
+ const Q = { ...z };
76
+ L !== void 0 && (Q.duration = nt(L));
77
+ const ee = Ze(Q, j, Z);
78
+ M = ee.ease, L = ee.duration;
79
+ }
80
+ L ?? (L = c);
81
+ const $ = v + N;
82
+ C.length === 1 && C[0] === 0 && (C[1] = 1);
83
+ const ne = C.length - A.length;
84
+ if (ne > 0 && et(C, ne), A.length === 1 && A.unshift(null), W) {
85
+ Ne(W < St, "Repeat count too high, must be less than 20"), L = Tt(L, W);
86
+ const j = [...A], Q = [...C];
87
+ M = Array.isArray(M) ? [...M] : [M];
88
+ const ee = [...M];
89
+ for (let J = 0; J < W; J++) {
90
+ A.push(...j);
91
+ for (let i = 0; i < j.length; i++)
92
+ C.push(Q[i] + (J + 1)), M.push(i === 0 ? "linear" : Be(ee, i - 1));
93
+ }
94
+ At(C, W);
95
+ }
96
+ const re = $ + L;
97
+ bt(_, A, M, C, $, re), I = Math.max(N + L, I), x = Math.max(re, x);
98
+ };
99
+ if (Me(F)) {
100
+ const y = de(F, E);
101
+ U(d, S, me("default", y));
102
+ } else {
103
+ const y = Oe(F, d, r, g), w = y.length;
104
+ for (let _ = 0; _ < w; _++) {
105
+ d = d, S = S;
106
+ const P = y[_], V = de(P, E);
107
+ for (const A in d)
108
+ U(d[A], _t(S, A), me(A, V), _, w);
109
+ }
110
+ }
111
+ p = v, v += I;
112
+ }
113
+ return E.forEach((l, T) => {
114
+ for (const F in l) {
115
+ const d = l[F];
116
+ d.sort(Rt);
117
+ const S = [], I = [], U = [];
118
+ for (let w = 0; w < d.length; w++) {
119
+ const { at: _, value: P, easing: V } = d[w];
120
+ S.push(P), I.push(rt(0, x, _)), U.push(V || "easeOut");
121
+ }
122
+ I[0] !== 0 && (I.unshift(0), S.unshift(S[0]), U.unshift(xt)), I[I.length - 1] !== 1 && (I.push(1), S.push(null)), m.has(T) || m.set(T, {
123
+ keyframes: {},
124
+ transition: {}
125
+ });
126
+ const y = m.get(T);
127
+ y.keyframes[F] = S, y.transition[F] = {
128
+ ...e,
129
+ duration: x,
130
+ ease: U,
131
+ times: I,
132
+ ...n
133
+ };
134
+ }
135
+ }), m;
136
+ }
137
+ function de(t, e) {
138
+ return !e.has(t) && e.set(t, {}), e.get(t);
139
+ }
140
+ function me(t, e) {
141
+ return e[t] || (e[t] = []), e[t];
142
+ }
143
+ function It(t) {
144
+ return Array.isArray(t) ? t : [t];
145
+ }
146
+ function _t(t, e) {
147
+ return t && t[e] ? {
148
+ ...t,
149
+ ...t[e]
150
+ } : { ...t };
151
+ }
152
+ const Ct = (t) => typeof t == "number", Ft = (t) => t.every(Ct);
153
+ function Pt(t, e) {
154
+ return t in e;
155
+ }
156
+ class Ut extends ot {
157
+ constructor() {
158
+ super(...arguments), this.type = "object";
159
+ }
160
+ readValueFromInstance(e, n) {
161
+ if (Pt(n, e)) {
162
+ const r = e[n];
163
+ if (typeof r == "string" || typeof r == "number")
164
+ return r;
165
+ }
166
+ }
167
+ getBaseTargetFromProps() {
168
+ }
169
+ removeValueFromRenderState(e, n) {
170
+ delete n.output[e];
171
+ }
172
+ measureInstanceViewportBox() {
173
+ return it();
174
+ }
175
+ build(e, n) {
176
+ Object.assign(e.output, n);
177
+ }
178
+ renderInstance(e, { output: n }) {
179
+ Object.assign(e, n);
180
+ }
181
+ sortInstanceNodePosition() {
182
+ return 0;
183
+ }
184
+ }
185
+ function Mt(t) {
186
+ const e = {
187
+ presenceContext: null,
188
+ props: {},
189
+ visualState: {
190
+ renderState: {
191
+ transform: {},
192
+ transformOrigin: {},
193
+ style: {},
194
+ vars: {},
195
+ attrs: {}
196
+ },
197
+ latestValues: {}
198
+ }
199
+ }, n = st(t) && !at(t) ? new ct(e) : new ut(e);
200
+ n.mount(t), se.set(t, n);
201
+ }
202
+ function Nt(t) {
203
+ const e = {
204
+ presenceContext: null,
205
+ props: {},
206
+ visualState: {
207
+ renderState: {
208
+ output: {}
209
+ },
210
+ latestValues: {}
211
+ }
212
+ }, n = new Ut(e);
213
+ n.mount(t), se.set(t, n);
214
+ }
215
+ function Ot(t, e) {
216
+ return Me(t) || typeof t == "number" || typeof t == "string" && !ue(e);
217
+ }
218
+ function Ve(t, e, n, r) {
219
+ const o = [];
220
+ if (Ot(t, e))
221
+ o.push(lt(t, ue(e) && e.default || e, n && (n.default || n)));
222
+ else {
223
+ const c = Oe(t, e, r), m = c.length;
224
+ Ne(!!m, "No valid elements provided.");
225
+ for (let E = 0; E < m; E++) {
226
+ const g = c[E], R = g instanceof Element ? Mt : Nt;
227
+ se.has(g) || R(g);
228
+ const p = se.get(g), v = { ...n };
229
+ "delay" in v && typeof v.delay == "function" && (v.delay = v.delay(E, m)), o.push(...ft(p, { ...e, transition: v }, {}));
230
+ }
231
+ }
232
+ return o;
233
+ }
234
+ function Bt(t, e, n) {
235
+ const r = [];
236
+ return Lt(t, e, n, { spring: ht }).forEach(({ keyframes: c, transition: m }, E) => {
237
+ r.push(...Ve(E, c, m));
238
+ }), r;
239
+ }
240
+ class Vt {
241
+ constructor(e) {
242
+ this.stop = () => this.runAll("stop"), this.animations = e.filter(Boolean);
243
+ }
244
+ get finished() {
245
+ return Promise.all(this.animations.map((e) => e.finished));
246
+ }
247
+ /**
248
+ * TODO: Filter out cancelled or stopped animations before returning
249
+ */
250
+ getAll(e) {
251
+ return this.animations[0][e];
252
+ }
253
+ setAll(e, n) {
254
+ for (let r = 0; r < this.animations.length; r++)
255
+ this.animations[r][e] = n;
256
+ }
257
+ attachTimeline(e) {
258
+ const n = this.animations.map((r) => r.attachTimeline(e));
259
+ return () => {
260
+ n.forEach((r, o) => {
261
+ r && r(), this.animations[o].stop();
262
+ });
263
+ };
264
+ }
265
+ get time() {
266
+ return this.getAll("time");
267
+ }
268
+ set time(e) {
269
+ this.setAll("time", e);
270
+ }
271
+ get speed() {
272
+ return this.getAll("speed");
273
+ }
274
+ set speed(e) {
275
+ this.setAll("speed", e);
276
+ }
277
+ get state() {
278
+ return this.getAll("state");
279
+ }
280
+ get startTime() {
281
+ return this.getAll("startTime");
282
+ }
283
+ get duration() {
284
+ let e = 0;
285
+ for (let n = 0; n < this.animations.length; n++)
286
+ e = Math.max(e, this.animations[n].duration);
287
+ return e;
288
+ }
289
+ runAll(e) {
290
+ this.animations.forEach((n) => n[e]());
291
+ }
292
+ play() {
293
+ this.runAll("play");
294
+ }
295
+ pause() {
296
+ this.runAll("pause");
297
+ }
298
+ cancel() {
299
+ this.runAll("cancel");
300
+ }
301
+ complete() {
302
+ this.runAll("complete");
303
+ }
304
+ }
305
+ class Dt extends Vt {
306
+ then(e, n) {
307
+ return this.finished.finally(e).then(() => {
308
+ });
309
+ }
310
+ }
311
+ function Gt(t) {
312
+ return Array.isArray(t) && t.some(Array.isArray);
313
+ }
314
+ function kt(t) {
315
+ function e(n, r, o) {
316
+ let c = [];
317
+ return Gt(n) ? c = Bt(n, r, t) : c = Ve(n, r, o, t), new Dt(c);
318
+ }
319
+ return e;
320
+ }
321
+ const Wt = kt(), yn = ["xs", "sm", "md", "lg"], En = [
322
+ "inProgress",
323
+ "executing",
324
+ "completed"
325
+ ], bn = {
326
+ ai: {
327
+ openChat: "Open Chat with One AI",
328
+ closeChat: "Close Chat with One AI",
329
+ startNewChat: "Start new chat",
330
+ scrollToBottom: "Scroll to bottom",
331
+ welcome: "Ask or create with One",
332
+ defaultInitialMessage: "How can I help you today?",
333
+ inputPlaceholder: "Ask about time, people, or company info and a lot of other things...",
334
+ stopAnswerGeneration: "Stop generating",
335
+ responseStopped: "You stopped this response",
336
+ sendMessage: "Send message",
337
+ thoughtsGroupTitle: "Reflection",
338
+ resourcesGroupTitle: "Resources",
339
+ thinking: "Thinking...",
340
+ feedbackModal: {
341
+ positive: {
342
+ title: "What did you like about this response?",
343
+ label: "Your feedback helps us make Factorial AI better",
344
+ placeholder: "Share what worked well"
345
+ },
346
+ negative: {
347
+ title: "What could have been better?",
348
+ label: "Your feedback helps us improve future answers",
349
+ placeholder: "Share what didn't work"
350
+ }
351
+ },
352
+ dataDownloadPreview: "Preview {{shown}} of {{total}} rows — download the Excel to see all data.",
353
+ expandChat: "Expand chat",
354
+ collapseChat: "Collapse chat",
355
+ ask: "Ask One",
356
+ viewProfile: "View profile",
357
+ tools: "Tools"
358
+ }
359
+ }, De = Xe(null);
360
+ function An({
361
+ children: t,
362
+ translations: e
363
+ }) {
364
+ return /* @__PURE__ */ q(De.Provider, { value: e, children: t });
365
+ }
366
+ function Rn() {
367
+ const t = Ye(De);
368
+ if (t === null)
369
+ throw new Error(
370
+ "useAiChatTranslations must be used within an AiChatTranslationsProvider"
371
+ );
372
+ return t;
373
+ }
374
+ function pe(t, e, n, r) {
375
+ const o = Math.max(1, Math.min(t, e)), c = Math.min(n, 20), E = Math.min(c + r, o), g = Math.min(E, Math.floor(t / 2)), R = Math.min(E, Math.floor(e / 2)), p = ($) => $ / t * 2 - 1, v = ($) => $ / e * 2 - 1, x = 0, l = t, T = 0, F = e, d = g, S = t - g, I = R, U = e - R, y = p(x), w = p(l), _ = v(T), P = v(F), V = p(d), A = p(S), f = v(I), C = v(U), O = 0, W = 0, k = 1, H = 1, z = g / t, M = 1 - g / t, L = R / e, N = 1 - R / e, K = new Float32Array([
376
+ // Top strip
377
+ y,
378
+ _,
379
+ w,
380
+ _,
381
+ y,
382
+ f,
383
+ y,
384
+ f,
385
+ w,
386
+ _,
387
+ w,
388
+ f,
389
+ // Bottom strip
390
+ y,
391
+ C,
392
+ w,
393
+ C,
394
+ y,
395
+ P,
396
+ y,
397
+ P,
398
+ w,
399
+ C,
400
+ w,
401
+ P,
402
+ // Left strip
403
+ y,
404
+ f,
405
+ V,
406
+ f,
407
+ y,
408
+ C,
409
+ y,
410
+ C,
411
+ V,
412
+ f,
413
+ V,
414
+ C,
415
+ // Right strip
416
+ A,
417
+ f,
418
+ w,
419
+ f,
420
+ A,
421
+ C,
422
+ A,
423
+ C,
424
+ w,
425
+ f,
426
+ w,
427
+ C
428
+ ]), Z = new Float32Array([
429
+ // Top strip
430
+ O,
431
+ W,
432
+ k,
433
+ W,
434
+ O,
435
+ L,
436
+ O,
437
+ L,
438
+ k,
439
+ W,
440
+ k,
441
+ L,
442
+ // Bottom strip
443
+ O,
444
+ N,
445
+ k,
446
+ N,
447
+ O,
448
+ H,
449
+ O,
450
+ H,
451
+ k,
452
+ N,
453
+ k,
454
+ H,
455
+ // Left strip
456
+ O,
457
+ L,
458
+ z,
459
+ L,
460
+ O,
461
+ N,
462
+ O,
463
+ N,
464
+ z,
465
+ L,
466
+ z,
467
+ N,
468
+ // Right strip
469
+ M,
470
+ L,
471
+ k,
472
+ L,
473
+ M,
474
+ N,
475
+ M,
476
+ N,
477
+ k,
478
+ L,
479
+ k,
480
+ N
481
+ ]);
482
+ return { positions: K, uvs: Z };
483
+ }
484
+ function ge(t, e, n) {
485
+ const r = t.createShader(e);
486
+ if (!r) throw new Error("Failed to create shader");
487
+ if (t.shaderSource(r, n), t.compileShader(r), !t.getShaderParameter(r, t.COMPILE_STATUS)) {
488
+ const o = t.getShaderInfoLog(r) || "Unknown shader error";
489
+ throw t.deleteShader(r), new Error(o);
490
+ }
491
+ return r;
492
+ }
493
+ function zt(t, e, n) {
494
+ const r = ge(t, t.VERTEX_SHADER, e), o = ge(t, t.FRAGMENT_SHADER, n), c = t.createProgram();
495
+ if (!c) throw new Error("Failed to create program");
496
+ if (t.attachShader(c, r), t.attachShader(c, o), t.linkProgram(c), !t.getProgramParameter(c, t.LINK_STATUS)) {
497
+ const m = t.getProgramInfoLog(c) || "Unknown link error";
498
+ throw t.deleteProgram(c), t.deleteShader(r), t.deleteShader(o), new Error(m);
499
+ }
500
+ return t.deleteShader(r), t.deleteShader(o), c;
501
+ }
502
+ const Xt = `#version 300 es
503
+ precision lowp float;
504
+
505
+ in vec2 vUV;
506
+ out vec4 outColor;
507
+
508
+ uniform vec2 uResolution;
509
+ uniform float uTime;
510
+ uniform float uBorderWidth;
511
+ uniform float uGlowWidth;
512
+ uniform float uBorderRadius;
513
+ uniform vec3 uColors[4];
514
+
515
+ // dark/light mode
516
+ uniform float uGlowExponent;
517
+ uniform float uGlowFactor;
518
+
519
+ const float PI = 3.14159265359;
520
+ const float TWO_PI = 2.0 * PI;
521
+ const float HALF_PI = 0.5 * PI;
522
+
523
+ // Light source parameters (constants)
524
+ const vec4 startPositions = vec4(0.0, PI, HALF_PI, 1.5 * PI);
525
+ const vec4 speeds = vec4(-1.9, -1.9, -1.5, 2.1);
526
+ const vec4 innerRadius = vec4(PI * 0.8, PI * 0.7, PI * 0.3, PI * 0.1);
527
+ const vec4 outerRadius = vec4(PI * 1.2, PI * 0.9, PI * 0.6, PI * 0.4);
528
+
529
+ /**
530
+ * @brief Generates a random float value based on the input 2D coordinates.
531
+ * @param st The input 2D coordinates.
532
+ * @return float A random float value.
533
+ */
534
+ float random(vec2 st) {
535
+ return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
536
+ }
537
+
538
+ vec2 random2(vec2 st) {
539
+ return vec2(random(st), random(st + 1.0));
540
+ }
541
+
542
+ /**
543
+ * Derivative-based Anti-aliasing
544
+ */
545
+ float aaStep(float edge, float d) {
546
+ // Calculate the width of the anti-aliasing transition
547
+ // This is the distance the value changes over one pixel.
548
+ float width = fwidth(d);
549
+ return smoothstep(edge - width * 0.5, edge + width * 0.5, d);
550
+ }
551
+
552
+ /**
553
+ * @brief Provides an anti-aliased version of fract().
554
+ * @param x The input value.
555
+ * @return float The anti-aliased fractional part of x.
556
+ */
557
+ float aaFract(float x) {
558
+ float f = fract(x);
559
+ float w = fwidth(x); // Get the width of the transition band for one pixel.
560
+
561
+ // Use smoothstep to fade the line out as it approaches the 1.0 boundary.
562
+ // The fade happens over a distance equal to the pixel width 'w'.
563
+ float smooth_f = f * (1.0 - smoothstep(1.0 - w, 1.0, f));
564
+
565
+ return smooth_f;
566
+ }
567
+
568
+ /**
569
+ * @name sdRoundedBox
570
+ * @description Calculates the signed distance from a point to a rounded rectangle.
571
+ * @param {vec2} p - The point coordinates.
572
+ * @param {vec2} b - Half the size of the rectangle (half width and half height).
573
+ * @param {float} r - The corner radius.
574
+ * @returns {float} - Signed distance to the surface of the rounded rectangle.
575
+ */
576
+ float sdRoundedBox(in vec2 p, in vec2 b, in float r) {
577
+ vec2 q = abs(p) - b + r;
578
+ return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
579
+ }
580
+
581
+ /**
582
+ * @brief Calculates the smooth inner glow intensity for a rectangle.
583
+ * @param p The current pixel coordinate, centered at (0,0).
584
+ * @param b The half-dimensions of the rectangle.
585
+ * @param radius The radius of the glow/blur.
586
+ * @return float The glow intensity, from 0.0 to 1.0.
587
+ */
588
+ float getInnerGlow(vec2 p, vec2 b, float radius) {
589
+ // Check if the pixel is outside the rectangle.
590
+ // vec2 d_out = abs(p) - b;
591
+ // if (max(d_out.x, d_out.y) > 0.0) {
592
+ // return 0.0;
593
+ // }
594
+
595
+ // Calculate the distance to the nearest vertical and horizontal edges (positive inwards).
596
+ float dist_x = b.x - abs(p.x);
597
+ float dist_y = b.y - abs(p.y);
598
+
599
+ // Calculate the horizontal and vertical glow intensities independently.
600
+ float glow_x = smoothstep(radius, 0.0, dist_x);
601
+ float glow_y = smoothstep(radius, 0.0, dist_y);
602
+
603
+ // Combine the two directional glows using a screen blend mode: 1.0 - (1.0 - a) * (1.0 - b).
604
+ return 1.0 - (1.0 - glow_x) * (1.0 - glow_y);
605
+ }
606
+
607
+ float getVignette(vec2 uv) {
608
+ vec2 vignetteUv = uv;
609
+ vignetteUv = vignetteUv * (1.0 - vignetteUv);
610
+ float vignette = vignetteUv.x * vignetteUv.y * 25.0; // multiply with sth for intensity
611
+ vignette = pow(vignette, 0.16); // change pow for modifying the extend of the vignette
612
+ // vignette = smoothstep(0.0, 0.7, vignette); // smoothstep to avoid hard edges
613
+ vignette = 1.0 - vignette;
614
+
615
+ return vignette;
616
+ }
617
+
618
+ /**
619
+ * Convert UV coordinates to angle (0 to 2π) around the border
620
+ */
621
+ float uvToAngle(vec2 uv) {
622
+ vec2 center = vec2(0.5);
623
+ vec2 dir = uv - center;
624
+ return atan(dir.y, dir.x) + PI;
625
+ }
626
+
627
+ /**
628
+ * Get current light center position (angle) based on start position, speed and time
629
+ */
630
+ // float getLightCenter(float startPos, float speed, float time) {
631
+ // return mod(startPos + speed * time, TWO_PI);
632
+ // }
633
+
634
+ void main() {
635
+ vec2 uv = vUV;
636
+ vec2 pos = uv * uResolution;
637
+ vec2 centeredPos = pos - uResolution * 0.5;
638
+ vec2 size = uResolution - uBorderWidth;
639
+ vec2 halfSize = size * 0.5;
640
+
641
+ // Calculate the signed distance from the rounded rectangle
642
+ float dBorderBox = sdRoundedBox(centeredPos, halfSize, uBorderRadius);
643
+ float border = aaStep(0.0, dBorderBox);
644
+
645
+ // This will create a gradient mask to safely fade out from borders to inner edges.
646
+ float glow = getInnerGlow(centeredPos, halfSize, uGlowWidth);
647
+ // glow = smoothstep(0.0, 0.5, glow);
648
+ // glow = aaFract(glow * 10.0);
649
+
650
+ float vignette = getVignette(uv);
651
+ glow *= vignette;
652
+
653
+ float posAngle = uvToAngle(uv);
654
+
655
+ // vec4 lightCenter = vec4(
656
+ // getLightCenter(startPositions.x, speeds.x, uTime),
657
+ // getLightCenter(startPositions.y, speeds.y, uTime),
658
+ // getLightCenter(startPositions.z, speeds.z, uTime),
659
+ // getLightCenter(startPositions.w, speeds.w, uTime)
660
+ // );
661
+ vec4 lightCenter = mod(startPositions + speeds * uTime, TWO_PI);
662
+
663
+ vec4 angleDist = abs(posAngle - lightCenter);
664
+
665
+ // Calculate shortest angular distance (considering wrap-around)
666
+ vec4 disToLight = min(angleDist, TWO_PI - angleDist) / TWO_PI;
667
+
668
+ float intensityBorder[4];
669
+ intensityBorder[0] = 1.0;
670
+ intensityBorder[1] = smoothstep(0.4, 0.0, disToLight.y);
671
+ intensityBorder[2] = smoothstep(0.4, 0.0, disToLight.z);
672
+ intensityBorder[3] = smoothstep(0.2, 0.0, disToLight.w) * 0.5;
673
+
674
+ // mix these 4 colors with distance
675
+ vec3 borderColor = vec3(0.0);
676
+ for(int i = 0; i < 4; i++) {
677
+ borderColor = mix(borderColor, uColors[i], intensityBorder[i]);
678
+ }
679
+ borderColor *= 1.1;
680
+
681
+ borderColor = clamp(borderColor, 0.0, 1.0);
682
+
683
+ float intensityGlow[4];
684
+ intensityGlow[0] = smoothstep(0.9, 0.0, disToLight.x);
685
+ intensityGlow[1] = smoothstep(0.7, 0.0, disToLight.y);
686
+ intensityGlow[2] = smoothstep(0.4, 0.0, disToLight.z);
687
+ intensityGlow[3] = smoothstep(0.1, 0.0, disToLight.w) * 0.7;
688
+
689
+ // timely breathing effect
690
+ vec4 breath = smoothstep(0.0, 1.0, sin(uTime * 1.0 + startPositions * PI) * 0.2 + 0.8);
691
+
692
+ vec3 glowColor = vec3(0.0);
693
+ glowColor += uColors[0] * intensityGlow[0] * breath.x;
694
+ glowColor += uColors[1] * intensityGlow[1] * breath.y;
695
+ glowColor += uColors[2] * intensityGlow[2] * breath.z;
696
+ glowColor += uColors[3] * intensityGlow[3] * breath.w * glow; // fade it a little bit
697
+
698
+ glow = pow(glow, uGlowExponent);
699
+ glow *= random(pos + uTime) * 0.1 + 1.0;
700
+ glowColor *= glow * uGlowFactor;
701
+ glowColor = clamp(glowColor, 0.0, 1.0);
702
+
703
+ vec3 color = mix(glowColor, borderColor + glowColor * 0.2, border);
704
+
705
+ float alpha = mix(glow, 1.0, border);
706
+
707
+ outColor = vec4(color, alpha);
708
+ }`, Yt = `#version 300 es
709
+
710
+ in vec2 aPosition;
711
+ in vec2 aUV;
712
+ out vec2 vUV;
713
+ void main() {
714
+ vUV = aUV;
715
+ gl_Position = vec4(aPosition, 0.0, 1.0);
716
+ }`, $t = [
717
+ "rgb(57, 182, 255)",
718
+ "rgb(189, 69, 251)",
719
+ "rgb(255, 87, 51)",
720
+ "rgb(255, 214, 0)"
721
+ ];
722
+ function qt(t) {
723
+ const e = t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
724
+ if (!e)
725
+ throw new Error(`Invalid color format: ${t}`);
726
+ const [, n, r, o] = e;
727
+ return [parseInt(n) / 255, parseInt(r) / 255, parseInt(o) / 255];
728
+ }
729
+ class xn {
730
+ element;
731
+ canvas;
732
+ options;
733
+ running = !1;
734
+ disposed = !1;
735
+ startTime = 0;
736
+ lastTime = 0;
737
+ rafId = null;
738
+ glr;
739
+ observer;
740
+ constructor(e = {}) {
741
+ this.options = {
742
+ width: e.width ?? 600,
743
+ height: e.height ?? 600,
744
+ ratio: e.ratio ?? window.devicePixelRatio ?? 1,
745
+ borderWidth: e.borderWidth ?? 8,
746
+ glowWidth: e.glowWidth ?? 200,
747
+ borderRadius: e.borderRadius ?? 8,
748
+ mode: e.mode ?? "light",
749
+ ...e
750
+ }, this.canvas = document.createElement("canvas"), this.options.classNames && (this.canvas.className = this.options.classNames), this.options.styles && Object.assign(this.canvas.style, this.options.styles), this.canvas.style.display = "block", this.canvas.style.transformOrigin = "center", this.canvas.style.pointerEvents = "none", this.element = this.canvas, this.setupGL();
751
+ }
752
+ start() {
753
+ if (this.disposed) throw new Error("Mask instance has been disposed.");
754
+ if (this.running) return;
755
+ if (!this.glr) {
756
+ console.error("WebGL resources are not initialized.");
757
+ return;
758
+ }
759
+ this.running = !0, this.startTime = performance.now(), this.resize(
760
+ this.options.width ?? 600,
761
+ this.options.height ?? 600,
762
+ this.options.ratio
763
+ ), this.glr.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.glr.gl.useProgram(this.glr.program), this.glr.gl.uniform2f(
764
+ this.glr.uResolution,
765
+ this.canvas.width,
766
+ this.canvas.height
767
+ ), this.checkGLError(this.glr.gl, "start: after initial setup");
768
+ const e = () => {
769
+ if (!this.running || !this.glr) return;
770
+ this.rafId = requestAnimationFrame(e);
771
+ const n = performance.now();
772
+ if (n - this.lastTime < 1e3 / 32) return;
773
+ this.lastTime = n;
774
+ const o = (n - this.startTime) * 1e-3;
775
+ this.render(o);
776
+ };
777
+ this.rafId = requestAnimationFrame(e);
778
+ }
779
+ pause() {
780
+ if (this.disposed) throw new Error("Mask instance has been disposed.");
781
+ this.running = !1, this.rafId !== null && cancelAnimationFrame(this.rafId);
782
+ }
783
+ dispose() {
784
+ if (this.disposed) return;
785
+ this.disposed = !0, this.running = !1, this.rafId !== null && cancelAnimationFrame(this.rafId);
786
+ const { gl: e, vao: n, positionBuffer: r, uvBuffer: o, program: c } = this.glr;
787
+ n && e.deleteVertexArray(n), r && e.deleteBuffer(r), o && e.deleteBuffer(o), e.deleteProgram(c), this.observer && this.observer.disconnect(), this.canvas.remove();
788
+ }
789
+ resize(e, n, r) {
790
+ if (this.disposed) throw new Error("Mask instance has been disposed.");
791
+ if (this.options.width = e, this.options.height = n, r && (this.options.ratio = r), !this.running) return;
792
+ const { gl: o, program: c, vao: m, positionBuffer: E, uvBuffer: g, uResolution: R } = this.glr, p = r ?? this.options.ratio ?? window.devicePixelRatio ?? 1, v = Math.max(1, Math.floor(e * p)), x = Math.max(1, Math.floor(n * p));
793
+ this.canvas.style.width = `${e}px`, this.canvas.style.height = `${n}px`, (this.canvas.width !== v || this.canvas.height !== x) && (this.canvas.width = v, this.canvas.height = x), o.viewport(0, 0, this.canvas.width, this.canvas.height), this.checkGLError(o, "resize: after viewport setup");
794
+ const { positions: l, uvs: T } = pe(
795
+ this.canvas.width,
796
+ this.canvas.height,
797
+ this.options.borderWidth * p,
798
+ this.options.glowWidth * p
799
+ );
800
+ o.bindVertexArray(m), o.bindBuffer(o.ARRAY_BUFFER, E), o.bufferData(o.ARRAY_BUFFER, l, o.STATIC_DRAW);
801
+ const F = o.getAttribLocation(c, "aPosition");
802
+ o.enableVertexAttribArray(F), o.vertexAttribPointer(F, 2, o.FLOAT, !1, 0, 0), this.checkGLError(o, "resize: after position buffer update"), o.bindBuffer(o.ARRAY_BUFFER, g), o.bufferData(o.ARRAY_BUFFER, T, o.STATIC_DRAW);
803
+ const d = o.getAttribLocation(c, "aUV");
804
+ o.enableVertexAttribArray(d), o.vertexAttribPointer(d, 2, o.FLOAT, !1, 0, 0), this.checkGLError(o, "resize: after UV buffer update"), o.useProgram(c), o.uniform2f(R, this.canvas.width, this.canvas.height), o.uniform1f(this.glr.uBorderWidth, this.options.borderWidth * p), o.uniform1f(this.glr.uGlowWidth, this.options.glowWidth * p), o.uniform1f(this.glr.uBorderRadius, this.options.borderRadius * p), this.checkGLError(o, "resize: after uniform updates");
805
+ const S = performance.now();
806
+ this.lastTime = S;
807
+ const I = (S - this.startTime) * 1e-3;
808
+ this.render(I);
809
+ }
810
+ /**
811
+ * Automatically resizes the canvas to match the dimensions of the given element.
812
+ * @note using ResizeObserver
813
+ */
814
+ autoResize(e) {
815
+ this.observer && this.observer.disconnect(), this.observer = new ResizeObserver(() => {
816
+ const n = e.getBoundingClientRect();
817
+ this.resize(n.width, n.height);
818
+ }), this.observer.observe(e);
819
+ }
820
+ fadeIn() {
821
+ if (this.disposed) throw new Error("Mask instance has been disposed.");
822
+ return new Promise((e, n) => {
823
+ const r = this.canvas.animate(
824
+ [
825
+ { opacity: 0, transform: "scale(1.2)" },
826
+ { opacity: 1, transform: "scale(1)" }
827
+ ],
828
+ { duration: 300, easing: "ease-out", fill: "forwards" }
829
+ );
830
+ r.onfinish = () => e(), r.oncancel = () => n("canceled");
831
+ });
832
+ }
833
+ fadeOut() {
834
+ if (this.disposed) throw new Error("Mask instance has been disposed.");
835
+ return new Promise((e, n) => {
836
+ const r = this.canvas.animate(
837
+ [
838
+ { opacity: 1, transform: "scale(1)" },
839
+ { opacity: 0, transform: "scale(1.2)" }
840
+ ],
841
+ { duration: 300, easing: "ease-in", fill: "forwards" }
842
+ );
843
+ r.onfinish = () => e(), r.oncancel = () => n("canceled");
844
+ });
845
+ }
846
+ checkGLError(e, n) {
847
+ let r = e.getError();
848
+ if (r !== e.NO_ERROR)
849
+ for (console.error(`WebGL Error in ${n}`); r !== e.NO_ERROR; ) {
850
+ const o = this.getGLErrorName(e, r);
851
+ console.error(`${o} (0x${r.toString(16)})`), r = e.getError();
852
+ }
853
+ }
854
+ getGLErrorName(e, n) {
855
+ switch (n) {
856
+ case e.INVALID_ENUM:
857
+ return "INVALID_ENUM";
858
+ case e.INVALID_VALUE:
859
+ return "INVALID_VALUE";
860
+ case e.INVALID_OPERATION:
861
+ return "INVALID_OPERATION";
862
+ case e.INVALID_FRAMEBUFFER_OPERATION:
863
+ return "INVALID_FRAMEBUFFER_OPERATION";
864
+ case e.OUT_OF_MEMORY:
865
+ return "OUT_OF_MEMORY";
866
+ case e.CONTEXT_LOST_WEBGL:
867
+ return "CONTEXT_LOST_WEBGL";
868
+ default:
869
+ return "UNKNOWN_ERROR";
870
+ }
871
+ }
872
+ setupGL() {
873
+ const e = this.canvas.getContext("webgl2", {
874
+ antialias: !1,
875
+ alpha: !0
876
+ });
877
+ if (!e)
878
+ throw new Error("WebGL2 is required but not available.");
879
+ const n = zt(e, Yt, Xt);
880
+ this.checkGLError(e, "setupGL: after createProgram");
881
+ const r = e.createVertexArray();
882
+ e.bindVertexArray(r), this.checkGLError(e, "setupGL: after VAO creation");
883
+ const o = this.canvas.width || 2, c = this.canvas.height || 2, { positions: m, uvs: E } = pe(
884
+ o,
885
+ c,
886
+ this.options.borderWidth,
887
+ this.options.glowWidth
888
+ ), g = e.createBuffer();
889
+ e.bindBuffer(e.ARRAY_BUFFER, g), e.bufferData(e.ARRAY_BUFFER, m, e.STATIC_DRAW);
890
+ const R = e.getAttribLocation(n, "aPosition");
891
+ e.enableVertexAttribArray(R), e.vertexAttribPointer(R, 2, e.FLOAT, !1, 0, 0), this.checkGLError(e, "setupGL: after position buffer setup");
892
+ const p = e.createBuffer();
893
+ e.bindBuffer(e.ARRAY_BUFFER, p), e.bufferData(e.ARRAY_BUFFER, E, e.STATIC_DRAW);
894
+ const v = e.getAttribLocation(n, "aUV");
895
+ e.enableVertexAttribArray(v), e.vertexAttribPointer(v, 2, e.FLOAT, !1, 0, 0), this.checkGLError(e, "setupGL: after UV buffer setup");
896
+ const x = e.getUniformLocation(n, "uResolution"), l = e.getUniformLocation(n, "uTime"), T = e.getUniformLocation(n, "uBorderWidth"), F = e.getUniformLocation(n, "uGlowWidth"), d = e.getUniformLocation(n, "uBorderRadius"), S = e.getUniformLocation(n, "uColors"), I = e.getUniformLocation(n, "uGlowExponent"), U = e.getUniformLocation(n, "uGlowFactor");
897
+ e.useProgram(n), e.uniform1f(T, this.options.borderWidth), e.uniform1f(F, this.options.glowWidth), e.uniform1f(d, this.options.borderRadius), this.options.mode === "dark" ? (e.uniform1f(I, 2), e.uniform1f(U, 1.8)) : (e.uniform1f(I, 1), e.uniform1f(U, 1));
898
+ const y = (this.options.colors || $t).map(qt);
899
+ for (let w = 0; w < y.length; w++)
900
+ e.uniform3f(
901
+ e.getUniformLocation(n, `uColors[${w}]`),
902
+ ...y[w]
903
+ );
904
+ this.checkGLError(e, "setupGL: after uniform setup"), e.bindVertexArray(null), e.bindBuffer(e.ARRAY_BUFFER, null), this.glr = {
905
+ gl: e,
906
+ program: n,
907
+ vao: r,
908
+ positionBuffer: g,
909
+ uvBuffer: p,
910
+ uResolution: x,
911
+ uTime: l,
912
+ uBorderWidth: T,
913
+ uGlowWidth: F,
914
+ uBorderRadius: d,
915
+ uColors: S
916
+ };
917
+ }
918
+ render(e) {
919
+ if (!this.glr) return;
920
+ const { gl: n, program: r, vao: o, uTime: c } = this.glr;
921
+ n.useProgram(r), n.bindVertexArray(o), n.uniform1f(c, e), n.disable(n.DEPTH_TEST), n.disable(n.CULL_FACE), n.disable(n.BLEND), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT), n.drawArrays(n.TRIANGLES, 0, 24), this.checkGLError(n, "render: after draw call"), n.bindVertexArray(null);
922
+ }
923
+ }
924
+ const ve = ["lowp", "mediump", "highp"], Ht = `
925
+ void main(void){
926
+ vec4 color = vec4(0.0,0.0,0.0,1.0);
927
+ mainImage( color, gl_FragCoord.xy );
928
+ gl_FragColor = color;
929
+ }`, Kt = `void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
930
+ vec2 uv = fragCoord/iResolution.xy;
931
+ vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
932
+ fragColor = vec4(col,1.0);
933
+ }`, we = `attribute vec3 aVertexPosition;
934
+ void main(void) {
935
+ gl_Position = vec4(aVertexPosition, 1.0);
936
+ }`, Te = "iTime", ye = "iTimeDelta", Ee = "iDate", be = "iFrame", Ae = "iMouse", Re = "iResolution", jt = "iChannel", xe = "iChannelResolution", Se = "iDeviceOrientation";
937
+ function Qt(t, e) {
938
+ return t.includes("Matrix") && Array.isArray(e);
939
+ }
940
+ function Jt(t, e) {
941
+ return t.includes("v") && Array.isArray(e) && e.length > Number.parseInt(t.charAt(0));
942
+ }
943
+ function Zt(t, e) {
944
+ return !t.includes("v") && Array.isArray(e) && e.length > Number.parseInt(t.charAt(0));
945
+ }
946
+ const en = (t, e, n, r) => {
947
+ if (Zt(n, r))
948
+ switch (n) {
949
+ case "2f":
950
+ return t.uniform2f(e, r[0], r[1]);
951
+ case "3f":
952
+ return t.uniform3f(e, r[0], r[1], r[2]);
953
+ case "4f":
954
+ return t.uniform4f(e, r[0], r[1], r[2], r[3]);
955
+ case "2i":
956
+ return t.uniform2i(e, r[0], r[1]);
957
+ case "3i":
958
+ return t.uniform3i(e, r[0], r[1], r[2]);
959
+ case "4i":
960
+ return t.uniform4i(e, r[0], r[1], r[2], r[3]);
961
+ }
962
+ if (typeof r == "number")
963
+ return n === "1i" ? t.uniform1i(e, r) : t.uniform1f(e, r);
964
+ switch (n) {
965
+ case "1iv":
966
+ return t.uniform1iv(e, r);
967
+ case "2iv":
968
+ return t.uniform2iv(e, r);
969
+ case "3iv":
970
+ return t.uniform3iv(e, r);
971
+ case "4iv":
972
+ return t.uniform4iv(e, r);
973
+ case "1fv":
974
+ return t.uniform1fv(e, r);
975
+ case "2fv":
976
+ return t.uniform2fv(e, r);
977
+ case "3fv":
978
+ return t.uniform3fv(e, r);
979
+ case "4fv":
980
+ return t.uniform4fv(e, r);
981
+ case "Matrix2fv":
982
+ return t.uniformMatrix2fv(e, !1, r);
983
+ case "Matrix3fv":
984
+ return t.uniformMatrix3fv(e, !1, r);
985
+ case "Matrix4fv":
986
+ return t.uniformMatrix4fv(e, !1, r);
987
+ }
988
+ }, tn = (t) => {
989
+ switch (t) {
990
+ case "1f":
991
+ return "float";
992
+ case "2f":
993
+ return "vec2";
994
+ case "3f":
995
+ return "vec3";
996
+ case "4f":
997
+ return "vec4";
998
+ case "1i":
999
+ return "int";
1000
+ case "2i":
1001
+ return "ivec2";
1002
+ case "3i":
1003
+ return "ivec3";
1004
+ case "4i":
1005
+ return "ivec4";
1006
+ case "1iv":
1007
+ return "int";
1008
+ case "2iv":
1009
+ return "ivec2";
1010
+ case "3iv":
1011
+ return "ivec3";
1012
+ case "4iv":
1013
+ return "ivec4";
1014
+ case "1fv":
1015
+ return "float";
1016
+ case "2fv":
1017
+ return "vec2";
1018
+ case "3fv":
1019
+ return "vec3";
1020
+ case "4fv":
1021
+ return "vec4";
1022
+ case "Matrix2fv":
1023
+ return "mat2";
1024
+ case "Matrix3fv":
1025
+ return "mat3";
1026
+ case "Matrix4fv":
1027
+ return "mat4";
1028
+ default:
1029
+ console.error(
1030
+ Y(
1031
+ `The uniform type "${t}" is not valid, please make sure your uniform type is valid`
1032
+ )
1033
+ );
1034
+ }
1035
+ }, ce = 9729, Le = 9728, nn = 9987, Ie = 33071, _e = 10497;
1036
+ class rn {
1037
+ gl;
1038
+ url;
1039
+ wrapS;
1040
+ wrapT;
1041
+ minFilter;
1042
+ magFilter;
1043
+ source;
1044
+ pow2canvas;
1045
+ isLoaded = !1;
1046
+ isVideo = !1;
1047
+ flipY = -1;
1048
+ width = 0;
1049
+ height = 0;
1050
+ _webglTexture = null;
1051
+ constructor(e) {
1052
+ this.gl = e;
1053
+ }
1054
+ updateTexture = (e, n, r) => {
1055
+ const { gl: o } = this, c = 0, m = o.RGBA, E = o.RGBA, g = o.UNSIGNED_BYTE;
1056
+ o.bindTexture(o.TEXTURE_2D, e), o.pixelStorei(o.UNPACK_FLIP_Y_WEBGL, r), o.texImage2D(
1057
+ o.TEXTURE_2D,
1058
+ c,
1059
+ m,
1060
+ E,
1061
+ g,
1062
+ n
1063
+ );
1064
+ };
1065
+ setupVideo = (e) => {
1066
+ const n = document.createElement("video");
1067
+ let r = !1, o = !1;
1068
+ n.autoplay = !0, n.muted = !0, n.loop = !0, n.crossOrigin = "anonymous";
1069
+ const c = () => {
1070
+ r && o && (this.isLoaded = !0);
1071
+ };
1072
+ return n.addEventListener(
1073
+ "playing",
1074
+ () => {
1075
+ r = !0, this.width = n.videoWidth || 0, this.height = n.videoHeight || 0, c();
1076
+ },
1077
+ !0
1078
+ ), n.addEventListener(
1079
+ "timeupdate",
1080
+ () => {
1081
+ o = !0, c();
1082
+ },
1083
+ !0
1084
+ ), n.src = e, n;
1085
+ };
1086
+ makePowerOf2 = (e) => e instanceof HTMLImageElement || e instanceof HTMLCanvasElement || e instanceof ImageBitmap ? (this.pow2canvas === void 0 && (this.pow2canvas = document.createElement("canvas")), this.pow2canvas.width = 2 ** Math.floor(Math.log(e.width) / Math.LN2), this.pow2canvas.height = 2 ** Math.floor(Math.log(e.height) / Math.LN2), this.pow2canvas.getContext("2d")?.drawImage(
1087
+ e,
1088
+ 0,
1089
+ 0,
1090
+ this.pow2canvas.width,
1091
+ this.pow2canvas.height
1092
+ ), console.warn(
1093
+ Y(
1094
+ `Image is not power of two ${e.width} x ${e.height}. Resized to ${this.pow2canvas.width} x ${this.pow2canvas.height};`
1095
+ )
1096
+ ), this.pow2canvas) : e;
1097
+ load = async (e) => {
1098
+ const { gl: n } = this, {
1099
+ url: r,
1100
+ wrapS: o,
1101
+ wrapT: c,
1102
+ minFilter: m,
1103
+ magFilter: E,
1104
+ flipY: g = -1
1105
+ } = e;
1106
+ if (!r)
1107
+ return Promise.reject(
1108
+ new Error(
1109
+ Y(
1110
+ "Missing url, please make sure to pass the url of your texture { url: ... }"
1111
+ )
1112
+ )
1113
+ );
1114
+ const R = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i.exec(r), p = /(\.mp4|\.3gp|\.webm|\.ogv)$/i.exec(r);
1115
+ if (R === null && p === null)
1116
+ return Promise.reject(
1117
+ new Error(
1118
+ Y(
1119
+ `Please upload a video or an image with a valid format (url: ${r})`
1120
+ )
1121
+ )
1122
+ );
1123
+ Object.assign(this, { url: r, wrapS: o, wrapT: c, minFilter: m, magFilter: E, flipY: g });
1124
+ const v = 0, x = n.RGBA, l = 1, T = 1, F = 0, d = n.RGBA, S = n.UNSIGNED_BYTE, I = new Uint8Array([255, 255, 255, 0]), U = n.createTexture();
1125
+ if (n.bindTexture(n.TEXTURE_2D, U), n.texImage2D(
1126
+ n.TEXTURE_2D,
1127
+ v,
1128
+ x,
1129
+ l,
1130
+ T,
1131
+ F,
1132
+ d,
1133
+ S,
1134
+ I
1135
+ ), p) {
1136
+ const P = this.setupVideo(r);
1137
+ return n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), this._webglTexture = U, this.source = P, this.isVideo = !0, P.play().then(() => this);
1138
+ }
1139
+ async function y() {
1140
+ return new Promise((P, V) => {
1141
+ const A = new Image();
1142
+ A.crossOrigin = "anonymous", A.onload = () => {
1143
+ P(A);
1144
+ }, A.onerror = () => {
1145
+ V(new Error(Y(`failed loading url: ${r}`)));
1146
+ }, A.src = r ?? "";
1147
+ });
1148
+ }
1149
+ let w = await y(), _ = (w.width & w.width - 1) === 0 && (w.height & w.height - 1) === 0;
1150
+ return (e.wrapS !== Ie || e.wrapT !== Ie || e.minFilter !== Le && e.minFilter !== ce) && !_ && (w = this.makePowerOf2(w), _ = !0), n.bindTexture(n.TEXTURE_2D, U), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, g), n.texImage2D(
1151
+ n.TEXTURE_2D,
1152
+ v,
1153
+ x,
1154
+ d,
1155
+ S,
1156
+ w
1157
+ ), _ && e.minFilter !== Le && e.minFilter !== ce && n.generateMipmap(n.TEXTURE_2D), n.texParameteri(
1158
+ n.TEXTURE_2D,
1159
+ n.TEXTURE_WRAP_S,
1160
+ this.wrapS || _e
1161
+ ), n.texParameteri(
1162
+ n.TEXTURE_2D,
1163
+ n.TEXTURE_WRAP_T,
1164
+ this.wrapT || _e
1165
+ ), n.texParameteri(
1166
+ n.TEXTURE_2D,
1167
+ n.TEXTURE_MIN_FILTER,
1168
+ this.minFilter || nn
1169
+ ), n.texParameteri(
1170
+ n.TEXTURE_2D,
1171
+ n.TEXTURE_MAG_FILTER,
1172
+ this.magFilter || ce
1173
+ ), this._webglTexture = U, this.source = w, this.isVideo = !1, this.isLoaded = !0, this.width = w.width || 0, this.height = w.height || 0, this;
1174
+ };
1175
+ }
1176
+ const Y = (t) => `react-shaders: ${t}`, Ce = (t) => {
1177
+ if ("changedTouches" in t) {
1178
+ const e = t.changedTouches[0];
1179
+ return [e?.clientX ?? 0, e?.clientY ?? 0];
1180
+ }
1181
+ return [t.clientX, t.clientY];
1182
+ }, Fe = (t, e, n) => t * (1 - n) + e * n, on = (t, e, n) => n > 0 ? t.substring(0, n) + e + t.substring(n, t.length) : e + t;
1183
+ function sn({
1184
+ fs: t,
1185
+ vs: e = we,
1186
+ textures: n = [],
1187
+ uniforms: r,
1188
+ clearColor: o = [0, 0, 0, 1],
1189
+ precision: c = "highp",
1190
+ style: m,
1191
+ contextAttributes: E = {},
1192
+ lerp: g = 1,
1193
+ devicePixelRatio: R = 1,
1194
+ onDoneLoadingTextures: p,
1195
+ onError: v = console.error,
1196
+ onWarning: x = console.warn
1197
+ }) {
1198
+ const l = B(null), T = B(null), F = B(null), d = B(null), S = B(void 0), I = B(void 0), U = B(!1), y = B(void 0), w = B(0), _ = B([0, 0]), P = B([]), V = B(0), A = B(void 0), f = B({
1199
+ [Te]: { type: "float", isNeeded: !1, value: 0 },
1200
+ [ye]: { type: "float", isNeeded: !1, value: 0 },
1201
+ [Ee]: { type: "vec4", isNeeded: !1, value: [0, 0, 0, 0] },
1202
+ [Ae]: { type: "vec4", isNeeded: !1, value: [0, 0, 0, 0] },
1203
+ [Re]: { type: "vec2", isNeeded: !1, value: [0, 0] },
1204
+ [be]: { type: "int", isNeeded: !1, value: 0 },
1205
+ [Se]: {
1206
+ type: "vec4",
1207
+ isNeeded: !1,
1208
+ value: [0, 0, 0, 0]
1209
+ }
1210
+ }), C = B(r), O = (i, a) => {
1211
+ const s = "width" in i ? i.width ?? 0 : 0, h = "height" in i ? i.height ?? 0 : 0, u = f.current.iChannelResolution;
1212
+ if (!u) return;
1213
+ const b = Array.isArray(u.value) ? u.value : u.value = [];
1214
+ b[a * 3] = s * R, b[a * 3 + 1] = h * R, b[a * 3 + 2] = 0;
1215
+ }, W = () => {
1216
+ l.current && (T.current = l.current.getContext("webgl", E) || l.current.getContext(
1217
+ "experimental-webgl",
1218
+ E
1219
+ ), T.current?.getExtension("OES_standard_derivatives"), T.current?.getExtension("EXT_shader_texture_lod"));
1220
+ }, k = () => {
1221
+ const i = T.current;
1222
+ F.current = i?.createBuffer() ?? null, i?.bindBuffer(i.ARRAY_BUFFER, F.current);
1223
+ const a = [
1224
+ 1,
1225
+ 1,
1226
+ 0,
1227
+ -1,
1228
+ 1,
1229
+ 0,
1230
+ 1,
1231
+ -1,
1232
+ 0,
1233
+ -1,
1234
+ -1,
1235
+ 0
1236
+ ];
1237
+ i?.bufferData(i.ARRAY_BUFFER, new Float32Array(a), i.STATIC_DRAW);
1238
+ }, H = ({
1239
+ alpha: i,
1240
+ beta: a,
1241
+ gamma: s
1242
+ }) => {
1243
+ f.current.iDeviceOrientation.value = [
1244
+ i ?? 0,
1245
+ a ?? 0,
1246
+ s ?? 0,
1247
+ window.orientation ?? 0
1248
+ ];
1249
+ }, z = (i) => {
1250
+ const [a = 0, s = 0] = Ce(i), h = a - (y.current?.left ?? 0) - window.pageXOffset, u = (y.current?.height ?? 0) - s - (y.current?.top ?? 0) - window.pageYOffset;
1251
+ U.current = !0;
1252
+ const b = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
1253
+ b && (b[2] = h, b[3] = u), _.current[0] = h, _.current[1] = u;
1254
+ }, M = (i) => {
1255
+ y.current = l.current?.getBoundingClientRect();
1256
+ const [a = 0, s = 0] = Ce(i), h = a - (y.current?.left ?? 0), u = (y.current?.height ?? 0) - s - (y.current?.top ?? 0);
1257
+ if (g !== 1)
1258
+ _.current[0] = h, _.current[1] = u;
1259
+ else {
1260
+ const b = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
1261
+ b && (b[0] = h, b[1] = u);
1262
+ }
1263
+ }, L = () => {
1264
+ const i = Array.isArray(f.current.iMouse?.value) ? f.current.iMouse.value : void 0;
1265
+ i && (i[2] = 0, i[3] = 0);
1266
+ }, N = () => {
1267
+ const i = T.current;
1268
+ if (!i) return;
1269
+ y.current = l.current?.getBoundingClientRect();
1270
+ const a = R, s = Math.floor(
1271
+ (y.current?.width ?? 1) * a
1272
+ ), h = Math.floor(
1273
+ (y.current?.height ?? 1) * a
1274
+ );
1275
+ if (i.canvas.width = s, i.canvas.height = h, f.current.iResolution?.isNeeded && d.current) {
1276
+ const u = i.getUniformLocation(
1277
+ d.current,
1278
+ Re
1279
+ );
1280
+ i.uniform2fv(u, [i.canvas.width, i.canvas.height]);
1281
+ }
1282
+ }, K = (i, a) => {
1283
+ const s = T.current;
1284
+ if (!s) return null;
1285
+ const h = s.createShader(i);
1286
+ if (!h) return null;
1287
+ if (s.shaderSource(h, a), s.compileShader(h), !s.getShaderParameter(h, s.COMPILE_STATUS)) {
1288
+ x?.(Y(`Error compiling the shader:
1289
+ ${a}`));
1290
+ const u = s.getShaderInfoLog(h);
1291
+ s.deleteShader(h), v?.(Y(`Shader compiler log: ${u}`));
1292
+ }
1293
+ return h;
1294
+ }, Z = (i, a) => {
1295
+ const s = T.current;
1296
+ if (!s) return;
1297
+ const h = K(s.FRAGMENT_SHADER, i), u = K(s.VERTEX_SHADER, a);
1298
+ if (d.current = s.createProgram(), !(!d.current || !u || !h)) {
1299
+ if (s.attachShader(d.current, u), s.attachShader(d.current, h), s.linkProgram(d.current), !s.getProgramParameter(d.current, s.LINK_STATUS)) {
1300
+ v?.(
1301
+ Y(
1302
+ `Unable to initialize the shader program: ${s.getProgramInfoLog(
1303
+ d.current
1304
+ )}`
1305
+ )
1306
+ );
1307
+ return;
1308
+ }
1309
+ s.useProgram(d.current), S.current = s.getAttribLocation(
1310
+ d.current,
1311
+ "aVertexPosition"
1312
+ ), s.enableVertexAttribArray(S.current);
1313
+ }
1314
+ }, $ = () => {
1315
+ if (r)
1316
+ for (const i of Object.keys(r)) {
1317
+ const a = r[i];
1318
+ if (!a) continue;
1319
+ const { value: s, type: h } = a, u = tn(h);
1320
+ if (!u) continue;
1321
+ const b = {};
1322
+ if (Qt(h, s)) {
1323
+ const D = h.length, X = Number.parseInt(h.charAt(D - 3)), te = Math.floor(s.length / (X * X));
1324
+ s.length > X * X && (b.arraySize = `[${te}]`);
1325
+ } else Jt(h, s) && (b.arraySize = `[${Math.floor(s.length / Number.parseInt(h.charAt(0)))}]`);
1326
+ f.current[i] = {
1327
+ type: u,
1328
+ isNeeded: !1,
1329
+ value: s,
1330
+ ...b
1331
+ };
1332
+ }
1333
+ }, ne = () => {
1334
+ const i = T.current;
1335
+ if (i)
1336
+ if (n && n.length > 0) {
1337
+ f.current[`${xe}`] = {
1338
+ type: "vec3",
1339
+ isNeeded: !1,
1340
+ arraySize: `[${n.length}]`,
1341
+ value: []
1342
+ };
1343
+ const a = n.map(
1344
+ (s, h) => (f.current[`${jt}${h}`] = {
1345
+ type: "sampler2D",
1346
+ isNeeded: !1
1347
+ }, O(s, h), P.current[h] = new rn(i), P.current[h]?.load(s).then((u) => {
1348
+ O(u, h);
1349
+ }))
1350
+ );
1351
+ Promise.all(a).then(() => {
1352
+ p && p();
1353
+ }).catch((s) => {
1354
+ v?.(s), p && p();
1355
+ });
1356
+ } else p && p();
1357
+ }, re = (i) => {
1358
+ const a = ve.includes(c ?? "highp"), s = `precision ${a ? c : ve[1]} float;
1359
+ `;
1360
+ a || x?.(
1361
+ Y(
1362
+ `wrong precision type ${c}, please make sure to pass one of a valid precision lowp, mediump, highp, by default you shader precision will be set to highp.`
1363
+ )
1364
+ );
1365
+ let h = s.concat(`#define DPR ${R.toFixed(1)}
1366
+ `).concat(i.replace(/texture\(/g, "texture2D("));
1367
+ for (const b of Object.keys(f.current))
1368
+ if (i.includes(b)) {
1369
+ const D = f.current[b];
1370
+ if (!D) continue;
1371
+ h = on(
1372
+ h,
1373
+ `uniform ${D.type} ${b}${D.arraySize || ""};
1374
+ `,
1375
+ h.lastIndexOf(s) + s.length
1376
+ ), D.isNeeded = !0;
1377
+ }
1378
+ return i.includes("mainImage") && (h = h.concat(Ht)), h;
1379
+ }, j = (i) => {
1380
+ const a = T.current;
1381
+ if (!a || !d.current) return;
1382
+ const s = V.current ? (i - V.current) / 1e3 : 0;
1383
+ V.current = i;
1384
+ const h = C.current;
1385
+ if (h)
1386
+ for (const u of Object.keys(h)) {
1387
+ const b = h[u];
1388
+ if (b && f.current[u]?.isNeeded) {
1389
+ if (!d.current) return;
1390
+ const D = a.getUniformLocation(
1391
+ d.current,
1392
+ u
1393
+ );
1394
+ if (!D) return;
1395
+ en(
1396
+ a,
1397
+ D,
1398
+ b.type,
1399
+ b.value
1400
+ );
1401
+ }
1402
+ }
1403
+ if (f.current.iMouse?.isNeeded) {
1404
+ const u = a.getUniformLocation(
1405
+ d.current,
1406
+ Ae
1407
+ );
1408
+ a.uniform4fv(u, f.current.iMouse.value);
1409
+ }
1410
+ if (f.current.iChannelResolution?.isNeeded) {
1411
+ const u = a.getUniformLocation(
1412
+ d.current,
1413
+ xe
1414
+ );
1415
+ a.uniform3fv(
1416
+ u,
1417
+ f.current.iChannelResolution.value
1418
+ );
1419
+ }
1420
+ if (f.current.iDeviceOrientation?.isNeeded) {
1421
+ const u = a.getUniformLocation(
1422
+ d.current,
1423
+ Se
1424
+ );
1425
+ a.uniform4fv(
1426
+ u,
1427
+ f.current.iDeviceOrientation.value
1428
+ );
1429
+ }
1430
+ if (f.current.iTime?.isNeeded) {
1431
+ const u = a.getUniformLocation(
1432
+ d.current,
1433
+ Te
1434
+ );
1435
+ a.uniform1f(u, w.current += s);
1436
+ }
1437
+ if (f.current.iTimeDelta?.isNeeded) {
1438
+ const u = a.getUniformLocation(
1439
+ d.current,
1440
+ ye
1441
+ );
1442
+ a.uniform1f(u, s);
1443
+ }
1444
+ if (f.current.iDate?.isNeeded) {
1445
+ const u = /* @__PURE__ */ new Date(), b = u.getMonth() + 1, D = u.getDate(), X = u.getFullYear(), te = u.getHours() * 60 * 60 + u.getMinutes() * 60 + u.getSeconds() + u.getMilliseconds() * 1e-3, ae = a.getUniformLocation(
1446
+ d.current,
1447
+ Ee
1448
+ );
1449
+ a.uniform4fv(ae, [X, b, D, te]);
1450
+ }
1451
+ if (f.current.iFrame?.isNeeded) {
1452
+ const u = a.getUniformLocation(
1453
+ d.current,
1454
+ be
1455
+ ), b = f.current.iFrame.value;
1456
+ a.uniform1i(u, b), f.current.iFrame.value = b + 1;
1457
+ }
1458
+ if (P.current.length > 0)
1459
+ for (let u = 0; u < P.current.length; u++) {
1460
+ const b = P.current[u];
1461
+ if (!b) return;
1462
+ const { isVideo: D, _webglTexture: X, source: te, flipY: ae, isLoaded: ke } = b;
1463
+ if (!ke || !X || !te) return;
1464
+ if (f.current[`iChannel${u}`]?.isNeeded) {
1465
+ if (!d.current) return;
1466
+ const We = a.getUniformLocation(
1467
+ d.current,
1468
+ `iChannel${u}`
1469
+ );
1470
+ a.activeTexture(a.TEXTURE0 + u), a.bindTexture(a.TEXTURE_2D, X), a.uniform1i(We, u), D && b.updateTexture(
1471
+ X,
1472
+ te,
1473
+ ae
1474
+ );
1475
+ }
1476
+ }
1477
+ }, Q = (i) => {
1478
+ const a = T.current;
1479
+ if (!a) return;
1480
+ a.viewport(0, 0, a.drawingBufferWidth, a.drawingBufferHeight), a.clear(a.COLOR_BUFFER_BIT | a.DEPTH_BUFFER_BIT), a.bindBuffer(a.ARRAY_BUFFER, F.current), a.vertexAttribPointer(
1481
+ S.current ?? 0,
1482
+ 3,
1483
+ a.FLOAT,
1484
+ !1,
1485
+ 0,
1486
+ 0
1487
+ ), j(i), a.drawArrays(a.TRIANGLE_STRIP, 0, 4);
1488
+ const s = f.current.iMouse?.value;
1489
+ if (f.current.iMouse?.isNeeded && g !== 1 && Array.isArray(s)) {
1490
+ const h = s[0] ?? 0, u = s[1] ?? 0;
1491
+ s[0] = Fe(h, _.current[0] ?? 0, g), s[1] = Fe(u, _.current[1] ?? 0, g);
1492
+ }
1493
+ I.current = requestAnimationFrame(Q);
1494
+ }, ee = () => {
1495
+ const i = { passive: !0 };
1496
+ f.current.iMouse?.isNeeded && l.current && (l.current.addEventListener("mousemove", M, i), l.current.addEventListener("mouseout", L, i), l.current.addEventListener("mouseup", L, i), l.current.addEventListener("mousedown", z, i), l.current.addEventListener("touchmove", M, i), l.current.addEventListener("touchend", L, i), l.current.addEventListener("touchstart", z, i)), f.current.iDeviceOrientation?.isNeeded && window.addEventListener(
1497
+ "deviceorientation",
1498
+ H,
1499
+ i
1500
+ ), l.current && (A.current = new ResizeObserver(N), A.current.observe(l.current), window.addEventListener("resize", N, i));
1501
+ }, J = () => {
1502
+ const i = { passive: !0 };
1503
+ f.current.iMouse?.isNeeded && l.current && (l.current.removeEventListener("mousemove", M, i), l.current.removeEventListener("mouseout", L, i), l.current.removeEventListener("mouseup", L, i), l.current.removeEventListener("mousedown", z, i), l.current.removeEventListener("touchmove", M, i), l.current.removeEventListener("touchend", L, i), l.current.removeEventListener("touchstart", z, i)), f.current.iDeviceOrientation?.isNeeded && window.removeEventListener(
1504
+ "deviceorientation",
1505
+ H,
1506
+ i
1507
+ ), A.current && (A.current.disconnect(), window.removeEventListener("resize", N, i));
1508
+ };
1509
+ return ie(() => {
1510
+ C.current = r;
1511
+ }, [r]), ie(() => {
1512
+ const i = P.current;
1513
+ function a() {
1514
+ W();
1515
+ const s = T.current;
1516
+ s && l.current && (s.clearColor(...o), s.clearDepth(1), s.enable(s.DEPTH_TEST), s.depthFunc(s.LEQUAL), s.viewport(0, 0, l.current.width, l.current.height), l.current.height = l.current.clientHeight, l.current.width = l.current.clientWidth, $(), ne(), Z(re(t || Kt), e || we), k(), requestAnimationFrame(Q), ee(), N());
1517
+ }
1518
+ return requestAnimationFrame(a), () => {
1519
+ const s = T.current;
1520
+ if (s) {
1521
+ if (s.getExtension("WEBGL_lose_context")?.loseContext(), s.useProgram(null), s.deleteProgram(d.current ?? null), i.length > 0)
1522
+ for (const h of i)
1523
+ s.deleteTexture(h._webglTexture);
1524
+ d.current = null;
1525
+ }
1526
+ J(), cancelAnimationFrame(I.current ?? 0);
1527
+ };
1528
+ }, []), /* @__PURE__ */ q(
1529
+ "canvas",
1530
+ {
1531
+ ref: l,
1532
+ style: { height: "100%", width: "100%", ...m }
1533
+ }
1534
+ );
1535
+ }
1536
+ const an = `
1537
+ const float TAU = 6.283185;
1538
+
1539
+ // Noise for dithering
1540
+ vec2 randFibo(vec2 p) {
1541
+ p = fract(p * vec2(443.897, 441.423));
1542
+ p += dot(p, p.yx + 19.19);
1543
+ return fract((p.xx + p.yx) * p.xy);
1544
+ }
1545
+
1546
+ // Tonemap
1547
+ vec3 Tonemap(vec3 x) {
1548
+ x *= 4.0;
1549
+ return x / (1.0 + x);
1550
+ }
1551
+
1552
+ // Luma for alpha
1553
+ float luma(vec3 color) {
1554
+ return dot(color, vec3(0.299, 0.587, 0.114));
1555
+ }
1556
+
1557
+ // RGB to HSV
1558
+ vec3 rgb2hsv(vec3 c) {
1559
+ vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
1560
+ vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
1561
+ vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
1562
+ float d = q.x - min(q.w, q.y);
1563
+ float e = 1.0e-10;
1564
+ return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
1565
+ }
1566
+
1567
+ // HSV to RGB
1568
+ vec3 hsv2rgb(vec3 c) {
1569
+ vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
1570
+ vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
1571
+ return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
1572
+ }
1573
+
1574
+ // SDF shapes
1575
+ float sdCircle(vec2 st, float r) {
1576
+ return length(st) - r;
1577
+ }
1578
+
1579
+ float sdLine(vec2 p, float r) {
1580
+ float halfLen = r * 2.0;
1581
+ vec2 a = vec2(-halfLen, 0.0);
1582
+ vec2 b = vec2(halfLen, 0.0);
1583
+ vec2 pa = p - a;
1584
+ vec2 ba = b - a;
1585
+ float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
1586
+ return length(pa - ba * h);
1587
+ }
1588
+
1589
+ float getSdf(vec2 st) {
1590
+ if(uShape == 1.0) return sdCircle(st, uScale);
1591
+ else if(uShape == 2.0) return sdLine(st, uScale);
1592
+ return sdCircle(st, uScale); // Default
1593
+ }
1594
+
1595
+ vec2 turb(vec2 pos, float t, float it) {
1596
+ // Initial rotation matrix for swirl direction
1597
+ mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
1598
+ // Secondary rotation applied each iteration (approx 53 degree rotation)
1599
+ mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
1600
+
1601
+ float frequency = mix(2.0, 15.0, uFrequency);
1602
+ float amplitude = uAmplitude;
1603
+ float frequencyGrowth = 1.4;
1604
+ float animTime = t * 0.1 * uSpeed;
1605
+
1606
+ const int LAYERS = 4;
1607
+ for(int i = 0; i < LAYERS; i++) {
1608
+ // Calculate wave displacement for this layer
1609
+ vec2 rotatedPos = pos * rotation;
1610
+ vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
1611
+
1612
+ // Apply displacement along rotation direction
1613
+ pos += (amplitude / frequency) * rotation[0] * wave;
1614
+
1615
+ // Evolve parameters for next layer
1616
+ rotation *= layerRotation;
1617
+ amplitude *= mix(1.0, max(wave.x, wave.y), uVariance);
1618
+ frequency *= frequencyGrowth;
1619
+ }
1620
+
1621
+ return pos;
1622
+ }
1623
+
1624
+ const float ITERATIONS = 36.0;
1625
+
1626
+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
1627
+ vec2 uv = fragCoord / iResolution.xy;
1628
+
1629
+ vec3 pp = vec3(0.0);
1630
+ vec3 bloom = vec3(0.0);
1631
+ float t = iTime * 0.5;
1632
+ vec2 pos = uv - 0.5;
1633
+
1634
+ vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
1635
+ float spacing = mix(1.0, TAU, uSpacing);
1636
+
1637
+ for(float i = 1.0; i < ITERATIONS + 1.0; i++) {
1638
+ float iter = i / ITERATIONS;
1639
+ vec2 st = turb(pos, t, iter * spacing);
1640
+ float d = abs(getSdf(st));
1641
+ float pd = distance(st, prevPos);
1642
+ prevPos = st;
1643
+ float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
1644
+ float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d);
1645
+
1646
+ // Shift color based on iteration using uColorScale
1647
+ vec3 color = uColor;
1648
+ if(uColorShift > 0.01) {
1649
+ vec3 hsv = rgb2hsv(color);
1650
+ // Shift hue by iteration
1651
+ hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3);
1652
+ color = hsv2rgb(hsv);
1653
+ }
1654
+
1655
+ float invd = 1.0 / max(d + dynamicBlur, 0.001);
1656
+ pp += (ds - 1.0) * color;
1657
+ bloom += clamp(invd, 0.0, 250.0) * color;
1658
+ }
1659
+
1660
+ pp *= 1.0 / ITERATIONS;
1661
+
1662
+ vec3 color;
1663
+
1664
+ // Dark mode (default)
1665
+ if(uMode < 0.5) {
1666
+ // use bloom effect
1667
+ bloom = bloom / (bloom + 2e4);
1668
+ color = (-pp + bloom * 3.0 * uBloom) * 1.2;
1669
+ color += (randFibo(fragCoord).x - 0.5) / 255.0;
1670
+ color = Tonemap(color);
1671
+ float alpha = luma(color) * uMix;
1672
+ fragColor = vec4(color * uMix, alpha);
1673
+ }
1674
+
1675
+ // Light mode
1676
+ else {
1677
+ // no bloom effect
1678
+ color = -pp;
1679
+ color += (randFibo(fragCoord).x - 0.5) / 255.0;
1680
+
1681
+ // Preserve hue by tone mapping brightness only
1682
+ float brightness = length(color);
1683
+ vec3 direction = brightness > 0.0 ? color / brightness : color;
1684
+
1685
+ // Reinhard on brightness
1686
+ float factor = 2.0;
1687
+ float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
1688
+ color = direction * mappedBrightness;
1689
+
1690
+ // Boost saturation to compensate for white background bleed-through
1691
+ // When alpha < 1.0, white bleeds through making colors look desaturated
1692
+ // So we increase saturation to maintain vibrant appearance
1693
+ float gray = dot(color, vec3(0.2, 0.5, 0.1));
1694
+ float saturationBoost = 3.0;
1695
+ color = mix(vec3(gray), color, saturationBoost);
1696
+
1697
+ // Clamp between 0-1
1698
+ color = clamp(color, 0.0, 1.0);
1699
+
1700
+ float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0);
1701
+ fragColor = vec4(color, alpha);
1702
+ }
1703
+ }`, cn = 10, un = 2, ln = 0.5, fn = 0.2, hn = 1.5, G = {
1704
+ duration: 0.5,
1705
+ ease: "easeOut"
1706
+ }, Pe = {
1707
+ duration: 0.35,
1708
+ ease: "easeOut",
1709
+ repeat: 1 / 0,
1710
+ repeatType: "mirror"
1711
+ };
1712
+ function oe(t) {
1713
+ const [e, n] = Ue(t), r = dt(t), o = B(null);
1714
+ wt(r, "change", (m) => n(m));
1715
+ const c = $e(
1716
+ (m, E) => {
1717
+ o.current = Wt(r, m, E);
1718
+ },
1719
+ [r]
1720
+ );
1721
+ return { value: e, motionValue: r, controls: o, animate: c };
1722
+ }
1723
+ function dn(t, e) {
1724
+ const [n, r] = Ue(cn), {
1725
+ value: o,
1726
+ animate: c,
1727
+ motionValue: m
1728
+ } = oe(fn), { value: E, animate: g } = oe(un), { value: R, animate: p } = oe(ln), { value: v, animate: x } = oe(hn), l = vt(e, {
1729
+ fftSize: 512,
1730
+ smoothingTimeConstant: 0.55
1731
+ });
1732
+ return ie(() => {
1733
+ switch (t) {
1734
+ case "idle":
1735
+ case "failed":
1736
+ case "disconnected":
1737
+ r(10), c(0.2, G), g(1.2, G), p(0.4, G), x(1, G);
1738
+ return;
1739
+ case "listening":
1740
+ case "pre-connect-buffering":
1741
+ r(20), c(0.3, { type: "spring", duration: 1, bounce: 0.35 }), g(1, G), p(0.7, G), x([1.5, 2], Pe);
1742
+ return;
1743
+ case "thinking":
1744
+ case "connecting":
1745
+ case "initializing":
1746
+ r(30), c(0.3, G), g(0.5, G), p(1, G), x([0.5, 2.5], Pe);
1747
+ return;
1748
+ case "speaking":
1749
+ r(70), c(0.3, G), g(0.75, G), p(1.25, G), x(1.5, G);
1750
+ return;
1751
+ }
1752
+ }, [
1753
+ t,
1754
+ c,
1755
+ g,
1756
+ p,
1757
+ x
1758
+ ]), ie(() => {
1759
+ t === "speaking" && l > 0 && !m.isAnimating() && c(0.2 + 0.2 * l, { duration: 0 });
1760
+ }, [
1761
+ t,
1762
+ l,
1763
+ m,
1764
+ c,
1765
+ g,
1766
+ p,
1767
+ x
1768
+ ]), {
1769
+ speed: n,
1770
+ scale: o,
1771
+ amplitude: E,
1772
+ frequency: R,
1773
+ brightness: v
1774
+ };
1775
+ }
1776
+ const mn = pt({
1777
+ base: "aspect-square",
1778
+ variants: {
1779
+ size: {
1780
+ icon: "h-[24px]",
1781
+ sm: "h-[56px]",
1782
+ md: "h-[112px]",
1783
+ lg: "h-[224px]",
1784
+ xl: "h-[448px]"
1785
+ }
1786
+ },
1787
+ defaultVariants: {
1788
+ size: "lg"
1789
+ }
1790
+ });
1791
+ function pn(t) {
1792
+ const e = t.match(
1793
+ /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
1794
+ );
1795
+ if (e) {
1796
+ const [, n, r, o] = e;
1797
+ return [n, r, o].map((m = "00") => parseInt(m, 16) / 255);
1798
+ }
1799
+ }
1800
+ function Ge({
1801
+ shape: t = 1,
1802
+ speed: e = 1,
1803
+ amplitude: n = 0.5,
1804
+ frequency: r = 0.5,
1805
+ scale: o = 0.2,
1806
+ blur: c = 1,
1807
+ color: m = "#FF355E",
1808
+ colorShift: E = 1,
1809
+ brightness: g = 1,
1810
+ themeMode: R = typeof window < "u" && document.documentElement.classList.contains("dark") ? "dark" : "light",
1811
+ ref: p,
1812
+ className: v,
1813
+ ...x
1814
+ }) {
1815
+ const l = qe(() => pn(m), [m]);
1816
+ return /* @__PURE__ */ q("div", { ref: p, className: v, ...x, children: /* @__PURE__ */ q(
1817
+ sn,
1818
+ {
1819
+ fs: an,
1820
+ devicePixelRatio: globalThis.devicePixelRatio ?? 1,
1821
+ uniforms: {
1822
+ // Aurora wave speed
1823
+ uSpeed: { type: "1f", value: e },
1824
+ // Edge blur/softness
1825
+ uBlur: { type: "1f", value: c },
1826
+ // Shape scale
1827
+ uScale: { type: "1f", value: o },
1828
+ // Shape type: 1=circle, 2=line
1829
+ uShape: { type: "1f", value: t },
1830
+ // Wave frequency and complexity
1831
+ uFrequency: { type: "1f", value: r },
1832
+ // Turbulence amplitude
1833
+ uAmplitude: { type: "1f", value: n },
1834
+ // Light intensity (bloom)
1835
+ uBloom: { type: "1f", value: 0 },
1836
+ // Brightness of the aurora (0-1)
1837
+ uMix: { type: "1f", value: g },
1838
+ // Color variation across layers (0-1)
1839
+ uSpacing: { type: "1f", value: 0.5 },
1840
+ // Color palette offset - shifts colors along the gradient (0-1)
1841
+ uColorShift: { type: "1f", value: E },
1842
+ // Color variation across layers (0-1)
1843
+ uVariance: { type: "1f", value: 0.1 },
1844
+ // Smoothing of the aurora (0-1)
1845
+ uSmoothing: { type: "1f", value: 1 },
1846
+ // Display mode: 0=dark background, 1=light background
1847
+ uMode: { type: "1f", value: R === "light" ? 1 : 0 },
1848
+ // Color
1849
+ uColor: { type: "3fv", value: l ?? [0, 0.7, 1] }
1850
+ },
1851
+ onError: (T) => {
1852
+ console.error("Shader error:", T);
1853
+ },
1854
+ onWarning: (T) => {
1855
+ console.warn("Shader warning:", T);
1856
+ },
1857
+ style: { width: "100%", height: "100%" }
1858
+ }
1859
+ ) });
1860
+ }
1861
+ Ge.displayName = "AuraShader";
1862
+ function Sn({
1863
+ size: t = "lg",
1864
+ state: e,
1865
+ color: n,
1866
+ colorShift: r = 0.05,
1867
+ audioTrack: o,
1868
+ themeMode: c,
1869
+ className: m,
1870
+ ref: E,
1871
+ ...g
1872
+ }) {
1873
+ const { speed: R, scale: p, amplitude: v, frequency: x, brightness: l } = dn(e, o);
1874
+ return /* @__PURE__ */ q(
1875
+ Ge,
1876
+ {
1877
+ ref: E,
1878
+ blur: 0.2,
1879
+ color: n,
1880
+ colorShift: r,
1881
+ speed: R,
1882
+ scale: p,
1883
+ themeMode: c,
1884
+ amplitude: v,
1885
+ frequency: x,
1886
+ brightness: l,
1887
+ className: mt(
1888
+ mn({ size: t }),
1889
+ "overflow-hidden rounded-full",
1890
+ m
1891
+ ),
1892
+ ...g
1893
+ }
1894
+ );
1895
+ }
1896
+ const Ln = ({
1897
+ text: t,
1898
+ confirmationText: e,
1899
+ onConfirm: n,
1900
+ cancelText: r,
1901
+ onCancel: o
1902
+ }) => /* @__PURE__ */ le("div", { className: "flex flex-col gap-2", children: [
1903
+ t && /* @__PURE__ */ q("p", { children: t }),
1904
+ /* @__PURE__ */ le("div", { className: "flex gap-2", children: [
1905
+ /* @__PURE__ */ q(
1906
+ fe,
1907
+ {
1908
+ type: "button",
1909
+ variant: "outline",
1910
+ size: "sm",
1911
+ icon: gt,
1912
+ onClick: n,
1913
+ label: e
1914
+ }
1915
+ ),
1916
+ /* @__PURE__ */ q(
1917
+ fe,
1918
+ {
1919
+ type: "button",
1920
+ variant: "ghost",
1921
+ size: "sm",
1922
+ onClick: o,
1923
+ label: r
1924
+ }
1925
+ )
1926
+ ] })
1927
+ ] });
1928
+ export {
1929
+ An as A,
1930
+ xn as F,
1931
+ bn as a,
1932
+ En as b,
1933
+ Sn as c,
1934
+ Ln as d,
1935
+ yn as o,
1936
+ Rn as u
1937
+ };