@viglet/viglet-design-system 2026.2.49 → 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.
- package/dist/floating-formulas-bg.cjs.js +1 -1
- package/dist/floating-formulas-bg.css +9 -0
- package/dist/floating-formulas-bg.es.js +52 -39
- package/dist/src/components/ui/floating-formulas-bg.d.ts.map +1 -1
- package/dist/src/vite/boot-loader.d.ts +77 -0
- package/dist/src/vite/boot-loader.d.ts.map +1 -0
- package/dist/src/vite/index.d.ts +2 -0
- package/dist/src/vite/index.d.ts.map +1 -0
- package/dist/viglet-design-system.css +1 -1
- package/dist/vite.cjs.js +223 -0
- package/dist/vite.es.js +282 -0
- package/package.json +22 -10
|
@@ -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"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
/**
|
|
3
|
+
* Options for {@link vigletBootLoader}.
|
|
4
|
+
*
|
|
5
|
+
* Only `title`, `subtitle` and `color` are required. Everything else has a
|
|
6
|
+
* sensible Viglet default so most products can keep their `vite.config.ts`
|
|
7
|
+
* short:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* vigletBootLoader({
|
|
11
|
+
* title: "Viglet Turing ES",
|
|
12
|
+
* subtitle: "Enterprise Search Intelligence",
|
|
13
|
+
* color: "#4169E1",
|
|
14
|
+
* prefix: "turing",
|
|
15
|
+
* });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export interface VigletBootLoaderOptions {
|
|
19
|
+
/** Product title shown under the orb, e.g. `"Viglet Turing ES"`. */
|
|
20
|
+
title: string;
|
|
21
|
+
/** Uppercase subtitle under the title, e.g. `"Enterprise Search Intelligence"`. */
|
|
22
|
+
subtitle: string;
|
|
23
|
+
/** Accent hex color (light mode), e.g. `"#4169E1"`. */
|
|
24
|
+
color: string;
|
|
25
|
+
/** Accent hex color in dark mode. Defaults to `color`. */
|
|
26
|
+
colorDark?: string;
|
|
27
|
+
/**
|
|
28
|
+
* CSS class prefix applied to every rule and keyframe to avoid collisions
|
|
29
|
+
* (rings, mark, molecules, gas, progress, etc). Default: `"viglet"`.
|
|
30
|
+
*
|
|
31
|
+
* Must be a valid CSS identifier fragment — letters, digits and `-`.
|
|
32
|
+
*/
|
|
33
|
+
prefix?: string;
|
|
34
|
+
/** `localStorage` key used to detect the stored theme. Default: `"vite-ui-theme"`. */
|
|
35
|
+
storageKey?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Global variable name read by the app's `main.tsx` to bail out of
|
|
38
|
+
* `createRoot().render()` when `?loading=1` is present, which holds the
|
|
39
|
+
* loader visible for design/regression testing.
|
|
40
|
+
*
|
|
41
|
+
* Default: `"__VIGLET_LOADING_TEST__"`.
|
|
42
|
+
*/
|
|
43
|
+
testFlag?: string;
|
|
44
|
+
/**
|
|
45
|
+
* HTML comment that the plugin replaces with the boot-loader markup. Put
|
|
46
|
+
* it inside `<div id="root">` in your `index.html` (or `marketing.html`).
|
|
47
|
+
*
|
|
48
|
+
* Default: `"<!--viglet-boot-loader-->"`. If not found, the plugin falls
|
|
49
|
+
* back to injecting right after the opening `<div id="root">` tag.
|
|
50
|
+
*/
|
|
51
|
+
placeholder?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Vite plugin that injects the shared Viglet boot loader into `index.html` at
|
|
55
|
+
* build/dev time. Every product (Turing, Shio, Dumont, Cloud Marketing)
|
|
56
|
+
* consumes this plugin so the loader visuals stay identical across the
|
|
57
|
+
* ecosystem and there's a single place to evolve the design.
|
|
58
|
+
*
|
|
59
|
+
* What the plugin injects:
|
|
60
|
+
*
|
|
61
|
+
* 1. A `<style>` tag in `<head>` with every rule and keyframe used by the
|
|
62
|
+
* loader (rings, orb, gas cloud, molecule cycle, progress, fade-in,
|
|
63
|
+
* reduced-motion fallback, test-mode badge).
|
|
64
|
+
* 2. A `<script>` tag in `<head>` that runs BEFORE the React module and:
|
|
65
|
+
* - Picks the light/dark theme from `localStorage`.
|
|
66
|
+
* - Sets `globalThis.<testFlag> = true` if the URL has `?loading=1`.
|
|
67
|
+
* - Injects a visible "TEST MODE" badge when the flag is on.
|
|
68
|
+
* 3. The loader markup (rings + mark + 6-molecule SVG + title + subtitle +
|
|
69
|
+
* progress) wherever the `<!--viglet-boot-loader-->` placeholder sits
|
|
70
|
+
* inside `<div id="root">`.
|
|
71
|
+
*
|
|
72
|
+
* The consuming app's `main.tsx` should look at `globalThis.<testFlag>` and
|
|
73
|
+
* skip mounting React when the flag is set — this is what keeps the loader
|
|
74
|
+
* visible indefinitely during testing.
|
|
75
|
+
*/
|
|
76
|
+
export declare function vigletBootLoader(options: VigletBootLoaderOptions): Plugin;
|
|
77
|
+
//# sourceMappingURL=boot-loader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"boot-loader.d.ts","sourceRoot":"","sources":["../../../src/vite/boot-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4B,MAAM,EAAE,MAAM,MAAM,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,MAAM,CAsCzE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC"}
|