@viglet/viglet-design-system 2026.2.50 → 2026.2.51
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-D-qHiVGv.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-D-qHiVGv.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);function n(){let[t,n]=(0,e.useState)(1);return(0,e.useEffect)(()=>{let e=()=>{let e=window.innerWidth;return e<480?.25:e<640?.35:e<768?.5:e<1024?.7:1},t=()=>n(e());return t(),window.addEventListener(`resize`,t,{passive:!0}),()=>window.removeEventListener(`resize`,t)},[]),t}var r=`H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂SO₄.Fe₂O₃.CaCO₃.C₂H₅OH.HCl.NaOH.KMnO₄.N₂.SiO₂.Al₂O₃.MgO.ZnSO₄.Cu.H₂O₂.SO₃.PbO₂.BaSO₄.AgNO₃.K₂Cr₂O₇.Na₂CO₃.Mg(OH)₂.FeCl₃.CuSO₄.Ca(OH)₂.HNO₃.P₄O₁₀.Cl₂.Br₂`.split(`.`),i=[`ff-drift-a`,`ff-drift-b`,`ff-drift-c`,`ff-drift-d`,`ff-drift-e`],a=[{top:`8%`,left:`6%`,size:80,duration:18,delay:-2,drift:`ff-drift-b`,opacity:.3,path:`M10,40 L40,20 L70,40 M40,20 L40,5 M40,20 L25,8 M40,20 L55,8`},{top:`22%`,left:`75%`,size:100,duration:22,delay:-5,drift:`ff-drift-a`,opacity:.25,path:`M20,50 L50,30 L80,50 M50,30 L50,10 M20,50 L20,70 M80,50 L80,70 M50,30 L35,15 M50,30 L65,15`},{top:`60%`,left:`85%`,size:70,duration:16,delay:-1,drift:`ff-drift-b`,opacity:.28,path:`M15,35 L35,15 L55,35 L35,55 Z M35,15 L35,5 M55,35 L65,35`},{top:`70%`,left:`12%`,size:90,duration:20,delay:-4,drift:`ff-drift-a`,opacity:.25,path:`M10,45 L45,25 L80,45 M45,25 L45,5 M10,45 L10,65 M80,45 L80,65`},{top:`5%`,left:`42%`,size:60,duration:15,delay:-3,drift:`ff-drift-c`,opacity:.22,path:`M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40`},{top:`45%`,left:`3%`,size:75,duration:19,delay:-6,drift:`ff-drift-a`,opacity:.25,path:`M20,40 L40,20 L60,40 M40,20 L40,5 M20,40 L5,50 M60,40 L75,50 M40,5 L30,0 M40,5 L50,0`},{top:`78%`,left:`52%`,size:85,duration:21,delay:-2,drift:`ff-drift-b`,opacity:.22,path:`M15,45 L42,20 L70,45 M42,20 L42,5 M15,45 L30,60 M70,45 L55,60`},{top:`32%`,left:`92%`,size:65,duration:17,delay:-5,drift:`ff-drift-a`,opacity:.25,path:`M10,35 L32,15 L55,35 M32,15 L32,3 M10,35 L10,50`},{top:`15%`,left:`28%`,size:70,duration:19,delay:-1,drift:`ff-drift-c`,opacity:.25,path:`M10,35 L35,10 L60,35 M35,10 L35,0 M10,35 L0,50 M60,35 L70,50`},{top:`50%`,left:`35%`,size:65,duration:16,delay:-7,drift:`ff-drift-b`,opacity:.2,path:`M10,30 L30,10 L50,30 L30,50 Z M30,10 L30,0`},{top:`40%`,left:`60%`,size:80,duration:20,delay:-3,drift:`ff-drift-a`,opacity:.22,path:`M15,40 L40,15 L65,40 M40,15 L40,3 M15,40 L5,55 M65,40 L75,55 M40,15 L28,5 M40,15 L52,5`},{top:`85%`,left:`78%`,size:60,duration:15,delay:-6,drift:`ff-drift-b`,opacity:.22,path:`M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40`}];function o(e){let t=e;return()=>(t=(t*16807+0)%2147483647,(t-1)/2147483646)}function s(e){let t=new Set;for(let n of e)for(let e of n.split(/[\s_-]+/)){let n=e.trim();n.length>0&&t.add(n)}return Array.from(t)}function c(e){if(!e)return null;let t=/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());if(t){let[,e,n,r]=t;return`${Number.parseInt(e+e,16)}, ${Number.parseInt(n+n,16)}, ${Number.parseInt(r+r,16)}`}let n=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e.trim());if(n){let[,e,t,r]=n;return`${Number.parseInt(e,16)}, ${Number.parseInt(t,16)}, ${Number.parseInt(r,16)}`}return null}function l(e){return e<.4?1:e<.8?2:3}function u(e,t){let n=o(Date.now()%1e5);return[...e].sort(()=>n()-.5).slice(0,t).map(e=>({text:e,top:`${n()*85+2}%`,left:`${n()*88+2}%`,size:.8+n()*1.2,duration:10+n()*20,delay:-(n()*20),drift:i[Math.floor(n()*i.length)],opacity:.2+n()*.35}))}function d({itemCount:i=35,extraTokens:o,color:d,colorDark:f,withFormulas:p=!0,withBonds:m=!0,withOrbs:h=!0,withLightning:g=!1,withExplosion:_=!1,withGrid:v=!0,className:y}){let b=n(),x=Math.max(4,Math.round(i*b)),S=(0,e.useMemo)(()=>a.slice(0,Math.max(2,Math.round(a.length*b))),[b]),C=l(b),w=(0,e.useMemo)(()=>u([...r,...o?s(o):[]],x),[x,o]),T={};d&&(T[`--ff-color`]=d),f?T[`--ff-color-dark`]=f:d&&(T[`--ff-color-dark`]=d);let E=c(d);E&&(T[`--ff-color-rgb`]=E);let D=c(f)??E;return D&&(T[`--ff-color-dark-rgb`]=D),(0,t.jsxs)(`div`,{className:`absolute inset-0 pointer-events-none overflow-hidden ${y??``}`,style:T,"aria-hidden":`true`,children:[g&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a3`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--b1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--b2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c3`}),_&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--nuke`}),(0,t.jsx)(`div`,{className:`ff-lightning--flood`})]})]}),h&&(0,t.jsxs)(t.Fragment,{children:[C>=1&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--1`}),C>=2&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--2`}),C>=3&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--3`})]}),v&&(0,t.jsx)(`div`,{className:`ff-grid`}),m&&S.map(e=>(0,t.jsxs)(`svg`,{className:`ff-bond ${e.drift}`,width:e.size,height:e.size,viewBox:`0 0 ${e.size} ${e.size}`,style:{top:e.top,left:e.left,animationDuration:`${e.duration}s`,animationDelay:`${e.delay}s`,opacity:e.opacity},children:[(0,t.jsx)(`path`,{d:e.path,fill:`none`,className:`ff-bond-line`,strokeWidth:`1.5`,strokeLinecap:`round`}),Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map(e=>(0,t.jsx)(`circle`,{cx:e[1],cy:e[2],r:`2.5`,className:`ff-bond-node`},`node-${e[1]}-${e[2]}`))]},`bond-${e.top}-${e.left}`)),p&&w.map(e=>(0,t.jsx)(`span`,{className:`ff-term ${e.drift}`,style:{top:e.top,left:e.left,fontSize:`${e.size}rem`,animationDuration:`${e.duration}s`,animationDelay:`${e.delay}s`,opacity:e.opacity},children:e.text},`f-${e.text}-${e.top}-${e.left}`))]})}exports.FloatingFormulasBg=d;
|
|
@@ -53,6 +53,15 @@
|
|
|
53
53
|
.dark .ff-orb--2 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.25), transparent 70%); }
|
|
54
54
|
.dark .ff-orb--3 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.18), transparent 70%); }
|
|
55
55
|
|
|
56
|
+
/* Mobile GPUs choke on blur(100px); shrink radius + orb size to stop flicker. */
|
|
57
|
+
@media (max-width: 767px) {
|
|
58
|
+
.ff-orb { filter: blur(40px); }
|
|
59
|
+
.ff-orb--1 { width: 260px; height: 260px; }
|
|
60
|
+
.ff-orb--2 { width: 220px; height: 220px; }
|
|
61
|
+
.ff-orb--3 { width: 200px; height: 200px; }
|
|
62
|
+
.ff-grid { background-size: 24px 24px; }
|
|
63
|
+
}
|
|
64
|
+
|
|
56
65
|
@keyframes ff-orb-float-1 {
|
|
57
66
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
58
67
|
50% { transform: translate(-30px, 20px) scale(1.05); }
|
|
@@ -1,13 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Fragment as
|
|
1
|
+
import { useEffect as e, useMemo as t, useState as n } from "react";
|
|
2
|
+
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/ui/floating-formulas-bg.tsx
|
|
4
|
-
|
|
4
|
+
function o() {
|
|
5
|
+
let [t, r] = n(1);
|
|
6
|
+
return e(() => {
|
|
7
|
+
let e = () => {
|
|
8
|
+
let e = window.innerWidth;
|
|
9
|
+
return e < 480 ? .25 : e < 640 ? .35 : e < 768 ? .5 : e < 1024 ? .7 : 1;
|
|
10
|
+
}, t = () => r(e());
|
|
11
|
+
return t(), window.addEventListener("resize", t, { passive: !0 }), () => window.removeEventListener("resize", t);
|
|
12
|
+
}, []), t;
|
|
13
|
+
}
|
|
14
|
+
var s = /* @__PURE__ */ "H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂SO₄.Fe₂O₃.CaCO₃.C₂H₅OH.HCl.NaOH.KMnO₄.N₂.SiO₂.Al₂O₃.MgO.ZnSO₄.Cu.H₂O₂.SO₃.PbO₂.BaSO₄.AgNO₃.K₂Cr₂O₇.Na₂CO₃.Mg(OH)₂.FeCl₃.CuSO₄.Ca(OH)₂.HNO₃.P₄O₁₀.Cl₂.Br₂".split("."), c = [
|
|
5
15
|
"ff-drift-a",
|
|
6
16
|
"ff-drift-b",
|
|
7
17
|
"ff-drift-c",
|
|
8
18
|
"ff-drift-d",
|
|
9
19
|
"ff-drift-e"
|
|
10
|
-
],
|
|
20
|
+
], l = [
|
|
11
21
|
{
|
|
12
22
|
top: "8%",
|
|
13
23
|
left: "6%",
|
|
@@ -129,11 +139,11 @@ var i = /* @__PURE__ */ "H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂S
|
|
|
129
139
|
path: "M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40"
|
|
130
140
|
}
|
|
131
141
|
];
|
|
132
|
-
function
|
|
142
|
+
function u(e) {
|
|
133
143
|
let t = e;
|
|
134
144
|
return () => (t = (t * 16807 + 0) % 2147483647, (t - 1) / 2147483646);
|
|
135
145
|
}
|
|
136
|
-
function
|
|
146
|
+
function d(e) {
|
|
137
147
|
let t = /* @__PURE__ */ new Set();
|
|
138
148
|
for (let n of e) for (let e of n.split(/[\s_-]+/)) {
|
|
139
149
|
let n = e.trim();
|
|
@@ -141,7 +151,7 @@ function c(e) {
|
|
|
141
151
|
}
|
|
142
152
|
return Array.from(t);
|
|
143
153
|
}
|
|
144
|
-
function
|
|
154
|
+
function f(e) {
|
|
145
155
|
if (!e) return null;
|
|
146
156
|
let t = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());
|
|
147
157
|
if (t) {
|
|
@@ -155,8 +165,11 @@ function l(e) {
|
|
|
155
165
|
}
|
|
156
166
|
return null;
|
|
157
167
|
}
|
|
158
|
-
function
|
|
159
|
-
|
|
168
|
+
function p(e) {
|
|
169
|
+
return e < .4 ? 1 : e < .8 ? 2 : 3;
|
|
170
|
+
}
|
|
171
|
+
function m(e, t) {
|
|
172
|
+
let n = u(Date.now() % 1e5);
|
|
160
173
|
return [...e].sort(() => n() - .5).slice(0, t).map((e) => ({
|
|
161
174
|
text: e,
|
|
162
175
|
top: `${n() * 85 + 2}%`,
|
|
@@ -164,39 +177,39 @@ function u(e, t) {
|
|
|
164
177
|
size: .8 + n() * 1.2,
|
|
165
178
|
duration: 10 + n() * 20,
|
|
166
179
|
delay: -(n() * 20),
|
|
167
|
-
drift:
|
|
180
|
+
drift: c[Math.floor(n() * c.length)],
|
|
168
181
|
opacity: .2 + n() * .35
|
|
169
182
|
}));
|
|
170
183
|
}
|
|
171
|
-
function
|
|
172
|
-
let
|
|
173
|
-
|
|
174
|
-
let
|
|
175
|
-
|
|
176
|
-
let
|
|
177
|
-
return
|
|
178
|
-
className: `absolute inset-0 pointer-events-none overflow-hidden ${
|
|
179
|
-
style:
|
|
184
|
+
function h({ itemCount: e = 35, extraTokens: n, color: c, colorDark: u, withFormulas: h = !0, withBonds: g = !0, withOrbs: _ = !0, withLightning: v = !1, withExplosion: y = !1, withGrid: b = !0, className: x }) {
|
|
185
|
+
let S = o(), C = Math.max(4, Math.round(e * S)), w = t(() => l.slice(0, Math.max(2, Math.round(l.length * S))), [S]), T = p(S), E = t(() => m([...s, ...n ? d(n) : []], C), [C, n]), D = {};
|
|
186
|
+
c && (D["--ff-color"] = c), u ? D["--ff-color-dark"] = u : c && (D["--ff-color-dark"] = c);
|
|
187
|
+
let O = f(c);
|
|
188
|
+
O && (D["--ff-color-rgb"] = O);
|
|
189
|
+
let k = f(u) ?? O;
|
|
190
|
+
return k && (D["--ff-color-dark-rgb"] = k), /* @__PURE__ */ a("div", {
|
|
191
|
+
className: `absolute inset-0 pointer-events-none overflow-hidden ${x ?? ""}`,
|
|
192
|
+
style: D,
|
|
180
193
|
"aria-hidden": "true",
|
|
181
194
|
children: [
|
|
182
|
-
|
|
183
|
-
/* @__PURE__ */
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
/* @__PURE__ */
|
|
186
|
-
/* @__PURE__ */
|
|
187
|
-
/* @__PURE__ */
|
|
188
|
-
/* @__PURE__ */
|
|
189
|
-
/* @__PURE__ */
|
|
190
|
-
/* @__PURE__ */
|
|
191
|
-
|
|
195
|
+
v && /* @__PURE__ */ a(r, { children: [
|
|
196
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a1" }),
|
|
197
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a2" }),
|
|
198
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a3" }),
|
|
199
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--b1" }),
|
|
200
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--b2" }),
|
|
201
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c1" }),
|
|
202
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c2" }),
|
|
203
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c3" }),
|
|
204
|
+
y && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--nuke" }), /* @__PURE__ */ i("div", { className: "ff-lightning--flood" })] })
|
|
192
205
|
] }),
|
|
193
|
-
|
|
194
|
-
/* @__PURE__ */
|
|
195
|
-
/* @__PURE__ */
|
|
196
|
-
/* @__PURE__ */
|
|
206
|
+
_ && /* @__PURE__ */ a(r, { children: [
|
|
207
|
+
T >= 1 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--1" }),
|
|
208
|
+
T >= 2 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--2" }),
|
|
209
|
+
T >= 3 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--3" })
|
|
197
210
|
] }),
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
b && /* @__PURE__ */ i("div", { className: "ff-grid" }),
|
|
212
|
+
g && w.map((e) => /* @__PURE__ */ a("svg", {
|
|
200
213
|
className: `ff-bond ${e.drift}`,
|
|
201
214
|
width: e.size,
|
|
202
215
|
height: e.size,
|
|
@@ -208,20 +221,20 @@ function d({ itemCount: a = 35, extraTokens: s, color: d, colorDark: f, withForm
|
|
|
208
221
|
animationDelay: `${e.delay}s`,
|
|
209
222
|
opacity: e.opacity
|
|
210
223
|
},
|
|
211
|
-
children: [/* @__PURE__ */
|
|
224
|
+
children: [/* @__PURE__ */ i("path", {
|
|
212
225
|
d: e.path,
|
|
213
226
|
fill: "none",
|
|
214
227
|
className: "ff-bond-line",
|
|
215
228
|
strokeWidth: "1.5",
|
|
216
229
|
strokeLinecap: "round"
|
|
217
|
-
}), Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map((e) => /* @__PURE__ */
|
|
230
|
+
}), Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map((e) => /* @__PURE__ */ i("circle", {
|
|
218
231
|
cx: e[1],
|
|
219
232
|
cy: e[2],
|
|
220
233
|
r: "2.5",
|
|
221
234
|
className: "ff-bond-node"
|
|
222
235
|
}, `node-${e[1]}-${e[2]}`))]
|
|
223
236
|
}, `bond-${e.top}-${e.left}`)),
|
|
224
|
-
|
|
237
|
+
h && E.map((e) => /* @__PURE__ */ i("span", {
|
|
225
238
|
className: `ff-term ${e.drift}`,
|
|
226
239
|
style: {
|
|
227
240
|
top: e.top,
|
|
@@ -237,4 +250,4 @@ function d({ itemCount: a = 35, extraTokens: s, color: d, colorDark: f, withForm
|
|
|
237
250
|
});
|
|
238
251
|
}
|
|
239
252
|
//#endregion
|
|
240
|
-
export {
|
|
253
|
+
export { h as FloatingFormulasBg };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-formulas-bg.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/floating-formulas-bg.tsx"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"floating-formulas-bg.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/floating-formulas-bg.tsx"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAC;AA8JpC,MAAM,WAAW,uBAAuB;IACtC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,WAAW,EACX,KAAK,EACL,SAAS,EACT,YAAmB,EACnB,SAAgB,EAChB,QAAe,EACf,aAAqB,EACrB,aAAqB,EACrB,QAAe,EACf,SAAS,GACV,EAAE,QAAQ,CAAC,uBAAuB,CAAC,2CA4GnC"}
|