@energy8platform/platform-core 0.30.8 → 0.30.10
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/README.md +61 -5
- package/dist/index.cjs.js +48 -30
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +17 -3
- package/dist/index.esm.js +48 -30
- package/dist/index.esm.js.map +1 -1
- package/dist/loading.cjs.js +48 -30
- package/dist/loading.cjs.js.map +1 -1
- package/dist/loading.d.ts +17 -3
- package/dist/loading.esm.js +48 -30
- package/dist/loading.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/loading/logo.ts +49 -29
- package/src/loading/variants/energy8.ts +1 -1
package/src/loading/logo.ts
CHANGED
|
@@ -1,43 +1,60 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Shared Energy8 SVG logo with
|
|
2
|
+
* Shared Energy8 SVG logo with a loader bar underneath.
|
|
3
3
|
*
|
|
4
|
-
* The
|
|
4
|
+
* The wordmark is the official ENERGY8 artwork as vector outlines, kept at its
|
|
5
|
+
* native coordinates (836.01 × 185.55). Two deviations from the Illustrator
|
|
6
|
+
* export:
|
|
7
|
+
*
|
|
8
|
+
* - Fourteen zero-area `<path d="M…"/>` stubs are dropped (export artifacts),
|
|
9
|
+
* same as in splash.ts.
|
|
10
|
+
* - The export gives every shape its own `<linearGradient>` even though they
|
|
11
|
+
* collapse to two distinct ramps — one over the letters that sit on the
|
|
12
|
+
* baseline (y 0..160.85), one over the two that descend (y 0..185.55).
|
|
13
|
+
* Colours are attributes rather than a `<style>` block on purpose: inlining
|
|
14
|
+
* the export's `<style>` would leak rules for the generic `.st0` selector
|
|
15
|
+
* into the host page.
|
|
16
|
+
*
|
|
17
|
+
* The loader bar is NOT part of the artwork — it is a pill drawn below the
|
|
18
|
+
* wordmark, with the fill controlled via a `<clipPath>` whose `<rect>` width
|
|
5
19
|
* is animatable. Different consumers customise gradient IDs and the clip
|
|
6
20
|
* element's ID/class to avoid collisions when both CSSPreloader and
|
|
7
21
|
* LoadingScene appear in the same DOM.
|
|
8
22
|
*/
|
|
9
23
|
|
|
10
|
-
/**
|
|
24
|
+
/** Full width of the artwork in SVG units — the bar spans it edge to edge. */
|
|
25
|
+
const LOGO_WIDTH = 836.01;
|
|
26
|
+
/** Loader bar geometry, in SVG units, below the wordmark's 185.55 baseline. */
|
|
27
|
+
const BAR_Y = 215;
|
|
28
|
+
const BAR_H = 24;
|
|
29
|
+
|
|
30
|
+
/** SVG path data for the Energy8 wordmark, in reading order: E N E R G Y 8 */
|
|
11
31
|
const WORDMARK_PATHS = `
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
<path d="
|
|
16
|
-
<
|
|
32
|
+
<polygon points="133.44 0 34.47 0 0 160.84 98.96 160.89 106.94 123.69 45.07 123.72 50.37 98.97 87.48 99.01 95.46 61.78 58.31 61.89 63.63 37.09 125.48 37.15 133.44 0" fill="url(#GID0)"/>
|
|
33
|
+
<polygon points="205.08 185.4 176.15 185.55 164.37 86.6 148.43 161.13 111.28 161.1 145.81 0 182.93 0 191.76 74.24 207.67 0 244.79 0 205.08 185.4" fill="url(#GID1)"/>
|
|
34
|
+
<polygon points="356.14 0 257.15 0 222.7 160.82 321.67 160.8 329.64 123.59 267.78 123.61 273.07 98.96 310.18 98.94 318.16 61.73 281.02 61.84 286.34 37.02 348.18 37.14 356.14 0" fill="url(#GID0)"/>
|
|
35
|
+
<path d="M455.1,0h-86.6c-11.53,53.8-22.93,107.03-34.46,160.82h37.12l13.24-61.85h12.38s-.88,61.86-.88,61.86l37.12-.04.88-61.83,15.02-12.37,15.91-74.24L455.1,0ZM417.1,61.87l-24.74-.03c1.76-8.22,6.2-28.9,7.96-37.12l24.76-.06-7.97,37.21Z" fill="url(#GID0)"/>
|
|
36
|
+
<polygon points="457.75 160.84 455.99 111.33 477.21 12.3 492.22 0 578.83 0 588.59 12.19 580.6 49.49 543.46 49.53 546.13 37.08 509.01 37.11 490.46 123.69 527.57 123.7 532.87 98.98 520.5 98.96 525.8 74.24 575.31 74.2 559.4 148.42 544.35 160.9 457.75 160.84" fill="url(#GID0)"/>
|
|
37
|
+
<polygon points="624.78 74.24 603.58 0 640.69 0 654.85 49.4 690.17 0 727.3 0 656.6 98.95 643.37 160.81 600.95 185.55 624.78 74.24" fill="url(#GID1)"/>
|
|
38
|
+
<path d="M836.01,12.37L826.27,0h-74.23s-15.02,12.36-15.02,12.36l-13.23,61.84,15.9,6.69-18.56,5.71-13.25,61.84,9.72,12.37h74.23s15.03-12.39,15.03-12.39l13.25-61.82-18.56-5.76,21.2-6.6,13.26-61.87ZM772.38,136.13l-24.73-.04c1.76-8.22,6.19-28.89,7.95-37.1h24.74s-7.96,37.14-7.96,37.14ZM788.29,61.86l-24.74-.02c1.76-8.21,6.19-28.88,7.95-37.09l24.75-.02-7.96,37.13Z" fill="url(#GID0)"/>`;
|
|
17
39
|
|
|
18
|
-
/**
|
|
40
|
+
/**
|
|
41
|
+
* Gradient definitions template (gradient IDs are replaced per-consumer).
|
|
42
|
+
* GID0/GID1 are the wordmark's two vertical ramps — bottom-to-top, so y1 is
|
|
43
|
+
* the shape's baseline and y2 its top. GID2 is the cyan loader fill.
|
|
44
|
+
*/
|
|
19
45
|
const GRADIENT_DEFS = `
|
|
20
|
-
<linearGradient id="GID0" x1="
|
|
21
|
-
<stop stop-color="#
|
|
46
|
+
<linearGradient id="GID0" x1="0" x2="0" y1="160.85" y2="0" gradientUnits="userSpaceOnUse">
|
|
47
|
+
<stop stop-color="#892ebf"/><stop stop-color="#862fbf" offset=".23"/><stop stop-color="#7f35c1" offset=".36"/><stop stop-color="#7539be" offset=".67"/><stop stop-color="#7139b7" offset=".72"/><stop stop-color="#6c3aae" offset=".83"/><stop stop-color="#6b3bac" offset="1"/>
|
|
22
48
|
</linearGradient>
|
|
23
|
-
<linearGradient id="GID1" x1="
|
|
24
|
-
<stop stop-color="#
|
|
49
|
+
<linearGradient id="GID1" x1="0" x2="0" y1="185.55" y2="0" gradientUnits="userSpaceOnUse">
|
|
50
|
+
<stop stop-color="#892ebf"/><stop stop-color="#862fbf" offset=".23"/><stop stop-color="#7f35c1" offset=".36"/><stop stop-color="#7539be" offset=".67"/><stop stop-color="#7139b7" offset=".72"/><stop stop-color="#6c3aae" offset=".83"/><stop stop-color="#6b3bac" offset="1"/>
|
|
25
51
|
</linearGradient>
|
|
26
|
-
<linearGradient id="GID2" x1="
|
|
27
|
-
<stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
|
|
28
|
-
</linearGradient>
|
|
29
|
-
<linearGradient id="GID3" x1="79.96" x2="79.96" y1="81.75" y2="141.8" gradientUnits="userSpaceOnUse">
|
|
30
|
-
<stop stop-color="#663BA6"/><stop stop-color="#7939C2" offset=".349"/><stop stop-color="#8A2FC0" offset=".6615"/><stop stop-color="#791BA3" offset="1"/>
|
|
31
|
-
</linearGradient>
|
|
32
|
-
<linearGradient id="GID4" x1="36.18" x2="212.5" y1="156.6" y2="156.6" gradientUnits="userSpaceOnUse">
|
|
33
|
-
<stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
|
|
34
|
-
</linearGradient>
|
|
35
|
-
<linearGradient id="GID5" x1="40.27" x2="208.2" y1="156.4" y2="156.4" gradientUnits="userSpaceOnUse">
|
|
52
|
+
<linearGradient id="GID2" x1="0" x2="${LOGO_WIDTH}" y1="${BAR_Y}" y2="${BAR_Y}" gradientUnits="userSpaceOnUse">
|
|
36
53
|
<stop stop-color="#316FB0"/><stop stop-color="#1FCDE6" offset=".5"/><stop stop-color="#29FEE7" offset="1"/>
|
|
37
54
|
</linearGradient>`;
|
|
38
55
|
|
|
39
56
|
/** Max width of the loader bar in SVG units */
|
|
40
|
-
export const LOADER_BAR_MAX_WIDTH =
|
|
57
|
+
export const LOADER_BAR_MAX_WIDTH = LOGO_WIDTH;
|
|
41
58
|
|
|
42
59
|
interface LogoSVGOptions {
|
|
43
60
|
/** Prefix for gradient/clip IDs to avoid collisions (e.g. 'pl' or 'ls') */
|
|
@@ -72,7 +89,7 @@ export function buildLogoSVG(opts: LogoSVGOptions): string {
|
|
|
72
89
|
const defs = GRADIENT_DEFS.replace(/GID(\d)/g, `${idPrefix}$1`);
|
|
73
90
|
|
|
74
91
|
const clipId = `${idPrefix}-loader-clip`;
|
|
75
|
-
const fillGradientId = `${idPrefix}
|
|
92
|
+
const fillGradientId = `${idPrefix}2`;
|
|
76
93
|
|
|
77
94
|
const classAttr = svgClass ? ` class="${svgClass}"` : '';
|
|
78
95
|
const styleAttr = svgStyle ? ` style="${svgStyle}"` : '';
|
|
@@ -81,13 +98,16 @@ export function buildLogoSVG(opts: LogoSVGOptions): string {
|
|
|
81
98
|
const txtIdAttr = textId ? ` id="${textId}"` : '';
|
|
82
99
|
const txtClassAttr = textClass ? ` class="${textClass}"` : '';
|
|
83
100
|
|
|
84
|
-
|
|
101
|
+
const bar = `x="0" y="${BAR_Y}" width="${LOGO_WIDTH}" height="${BAR_H}" rx="${BAR_H / 2}"`;
|
|
102
|
+
|
|
103
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${LOGO_WIDTH} 310" fill="none"${classAttr}${styleAttr}>
|
|
85
104
|
${paths}
|
|
86
105
|
<clipPath id="${clipId}">
|
|
87
|
-
<rect${rectIdAttr} x="
|
|
106
|
+
<rect${rectIdAttr} x="0" y="${BAR_Y}" width="0" height="${BAR_H}"${rectClassAttr}/>
|
|
88
107
|
</clipPath>
|
|
89
|
-
<
|
|
90
|
-
<
|
|
108
|
+
<rect ${bar} fill="url(#${fillGradientId})" opacity=".18"/>
|
|
109
|
+
<rect ${bar} fill="url(#${fillGradientId})" clip-path="url(#${clipId})"/>
|
|
110
|
+
<text${txtIdAttr} x="${LOGO_WIDTH / 2}" y="294" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" font-size="26" font-weight="600" letter-spacing="5"${txtClassAttr}>${textContent ?? 'Loading...'}</text>
|
|
91
111
|
<defs>
|
|
92
112
|
${defs}
|
|
93
113
|
</defs>
|