kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine glass workbench rail and theme colors

Browse Source
This commit is contained in:
kang
2026-05-21 12:37:27 +08:00
parent a48c2965d9
commit 36da23beb2
3 changed files with 284 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/source-analysis.html
View File

File diff suppressed because one or more lines are too long

262
web/app/globals.css
View File

@@ -491,11 +491,20 @@ nextjs-portal {
--skg-glass-bg: rgba(255, 255, 255, 0.1);
--skg-glass-bg-soft: rgba(255, 255, 255, 0.055);
--skg-rail: #383838;
--skg-wave-bg: rgba(0, 0, 0, 0.35);
--skg-wave-fill: rgba(209, 213, 219, 0.74);
--skg-wave-stroke-1: rgba(229, 231, 235, 0.7);
--skg-wave-stroke-2: rgba(229, 231, 235, 0.52);
--skg-wave-grid: rgba(255, 255, 255, 0.14);
--skg-wave-marker: rgba(255, 255, 255, 0.12);
--skg-wave-hover: rgba(207, 250, 254, 0.7);
--skg-wave-playhead: #a7f3d0;
--skg-wave-playhead-shadow: rgba(110, 231, 183, 0.85);
color: var(--skg-text-1);
background:
radial-gradient(circle at 20% 18%, rgba(162, 198, 56, 0.11), transparent 28%),
radial-gradient(circle at 86% 78%, rgba(200, 205, 25, 0.12), transparent 28%),
linear-gradient(120deg, #202020 0%, #242424 48%, #171717 100%);
radial-gradient(circle at 20% 18%, rgba(162, 198, 56, 0.09), transparent 28%),
radial-gradient(circle at 86% 78%, rgba(200, 205, 25, 0.1), transparent 28%),
linear-gradient(120deg, #171717 0%, #202020 48%, #101010 100%);
}
.skg-board-theme::before {
@@ -518,8 +527,8 @@ nextjs-portal {
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(0, 0, 0, 0.38)),
linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 36%, rgba(0, 0, 0, 0.2));
linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 45%, rgba(0, 0, 0, 0.42)),
linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 36%, rgba(0, 0, 0, 0.22));
}
.skg-board-ambient {
@@ -532,17 +541,17 @@ nextjs-portal {
.skg-board-panel {
border-color: var(--skg-border) !important;
background:
radial-gradient(circle at 88% 22%, rgba(162, 198, 56, 0.08), transparent 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.052)),
rgba(36, 36, 36, 0.68) !important;
radial-gradient(circle at 88% 22%, rgba(162, 198, 56, 0.06), transparent 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
rgba(30, 30, 30, 0.78) !important;
box-shadow: var(--skg-shadow-card);
backdrop-filter: blur(5px);
}
.skg-board-topbar {
background:
linear-gradient(100deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045) 58%, rgba(162, 198, 56, 0.08)),
rgba(38, 38, 38, 0.72) !important;
linear-gradient(100deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.038) 58%, rgba(162, 198, 56, 0.07)),
rgba(28, 28, 28, 0.84) !important;
}
.skg-board-theme input:focus,
@@ -566,16 +575,21 @@ nextjs-portal {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
rgba(26, 26, 26, 0.58);
linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)),
rgba(18, 18, 18, 0.72);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(8px);
}
.skg-board-rail {
width: 65px;
min-height: 514px;
overflow: hidden;
height: 448px;
min-height: 448px;
align-self: flex-start;
top: 96px;
margin-top: clamp(72px, 13vh, 116px);
z-index: 30;
overflow: visible;
transition: width 220ms ease;
}
@@ -585,10 +599,14 @@ nextjs-portal {
.skg-board-rail__strip {
width: 65px;
min-height: 514px;
height: 448px;
min-height: 448px;
border: 1px solid #383838;
border-radius: 0 70px 70px 0;
background: #383838;
background:
radial-gradient(circle at 86% 18%, rgba(162, 198, 56, 0.1), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
#383838;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: width 220ms ease, border-radius 220ms ease;
@@ -601,6 +619,7 @@ nextjs-portal {
.skg-board-rail__iconbar {
width: 65px;
height: 100%;
}
.skg-board-rail__logo {
@@ -626,9 +645,16 @@ nextjs-portal {
}
.skg-board-rail__drawer {
height: 100%;
animation: skgRailDrawerIn 220ms ease both;
}
.skg-board-rail__drawer .skg-board-panel {
height: 100%;
min-height: 0 !important;
border-radius: 0 30px 30px 0;
}
@keyframes skgRailDrawerIn {
from {
opacity: 0;
@@ -644,9 +670,9 @@ nextjs-portal {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
background:
radial-gradient(circle at 80% 86%, rgba(162, 198, 56, 0.18), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.052)),
rgba(56, 56, 56, 0.62);
radial-gradient(circle at 80% 86%, rgba(162, 198, 56, 0.13), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.034)),
rgba(38, 38, 38, 0.76);
box-shadow: var(--skg-shadow-card);
backdrop-filter: blur(5px);
}
@@ -654,8 +680,30 @@ nextjs-portal {
.skg-glass-card--flat {
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
rgba(24, 24, 24, 0.52);
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
rgba(18, 18, 18, 0.62);
}
.skg-audio-waveform {
border-color: rgba(255, 255, 255, 0.1) !important;
background: var(--skg-wave-bg) !important;
}
.skg-audio-waveform__center {
background: var(--skg-wave-grid);
}
.skg-audio-waveform__segment {
background: var(--skg-wave-marker);
}
.skg-audio-waveform__hover {
background: var(--skg-wave-hover);
}
.skg-audio-waveform__playhead {
background: var(--skg-wave-playhead);
box-shadow: 0 0 16px var(--skg-wave-playhead-shadow);
}
.skg-status-orb {
@@ -673,22 +721,31 @@ nextjs-portal {
}
.skg-board-theme--light {
--skg-bg-1: #faf8f4;
--skg-bg-2: #ffffff;
--skg-bg-1: #f4f1e8;
--skg-bg-2: #fbfaf5;
--skg-bg-3: rgba(0, 0, 0, 0.03);
--skg-border: rgba(0, 0, 0, 0.08);
--skg-text-1: #0a0a0a;
--skg-text-2: rgba(0, 0, 0, 0.62);
--skg-text-3: rgba(0, 0, 0, 0.34);
--skg-border: rgba(72, 78, 56, 0.14);
--skg-text-1: #20241b;
--skg-text-2: rgba(32, 36, 27, 0.68);
--skg-text-3: rgba(32, 36, 27, 0.42);
--skg-success: #059669;
--skg-warn: #b7791f;
--skg-danger: #e11d48;
--skg-info: #0891b2;
--skg-wave-bg: rgba(255, 255, 255, 0.74);
--skg-wave-fill: rgba(80, 90, 70, 0.42);
--skg-wave-stroke-1: rgba(47, 57, 44, 0.46);
--skg-wave-stroke-2: rgba(47, 57, 44, 0.3);
--skg-wave-grid: rgba(72, 78, 56, 0.16);
--skg-wave-marker: rgba(72, 78, 56, 0.14);
--skg-wave-hover: rgba(23, 96, 111, 0.52);
--skg-wave-playhead: #10b981;
--skg-wave-playhead-shadow: rgba(16, 185, 129, 0.36);
color: var(--skg-text-1);
background:
radial-gradient(circle at 50% 0%, rgba(232, 212, 168, 0.18), transparent 31%),
radial-gradient(circle at 4% 100%, rgba(214, 179, 106, 0.12), transparent 28%),
linear-gradient(126deg, #faf8f4 0%, #f4efe5 48%, #ffffff 100%);
radial-gradient(circle at 50% 0%, rgba(232, 212, 168, 0.16), transparent 31%),
radial-gradient(circle at 4% 100%, rgba(143, 176, 113, 0.1), transparent 28%),
linear-gradient(126deg, #f5f2e9 0%, #ece7dc 48%, #fbfaf5 100%);
}
.skg-board-theme--light::before {
@@ -715,17 +772,50 @@ nextjs-portal {
.skg-board-theme--light .skg-board-panel {
border-color: rgba(82, 93, 62, 0.16) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
rgba(249, 246, 236, 0.7) !important;
radial-gradient(circle at 88% 18%, rgba(143, 176, 113, 0.12), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(249, 247, 239, 0.64)),
rgba(246, 243, 234, 0.84) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 18px 48px rgba(65, 55, 30, 0.1);
0 18px 48px rgba(65, 55, 30, 0.12);
}
.skg-board-theme--light .skg-board-topbar {
background:
linear-gradient(100deg, rgba(214, 179, 106, 0.14), rgba(143, 176, 113, 0.08) 42%, rgba(255, 255, 255, 0.58)),
rgba(252, 249, 241, 0.82) !important;
linear-gradient(100deg, rgba(214, 179, 106, 0.1), rgba(143, 176, 113, 0.07) 42%, rgba(255, 255, 255, 0.72)),
rgba(250, 248, 241, 0.9) !important;
}
.skg-board-theme--light .skg-board-shell {
border-color: rgba(72, 78, 56, 0.14);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 243, 235, 0.62)),
rgba(246, 243, 235, 0.74);
box-shadow: 0 24px 70px rgba(74, 68, 44, 0.13);
}
.skg-board-theme--light .skg-board-rail__strip {
border-color: #3f4239;
background:
radial-gradient(circle at 86% 18%, rgba(162, 198, 56, 0.12), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
#3f4239;
box-shadow: 10px 10px 26px rgba(74, 68, 44, 0.18);
}
.skg-board-theme--light .skg-glass-card {
border-color: rgba(72, 78, 56, 0.16);
background:
radial-gradient(circle at 80% 86%, rgba(143, 176, 113, 0.12), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(246, 243, 235, 0.64)),
rgba(250, 248, 241, 0.82);
box-shadow: 0 16px 42px rgba(74, 68, 44, 0.12);
}
.skg-board-theme--light .skg-glass-card--flat {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 243, 235, 0.5)),
rgba(255, 255, 255, 0.54);
}
.skg-board-theme--light .skg-board-theme-toggle {
@@ -862,9 +952,15 @@ nextjs-portal {
}
.skg-stat-card {
--skg-stat-glow:
radial-gradient(circle at 92% 86%, rgba(162, 198, 56, 0.22), transparent 48%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
position: relative;
isolation: isolate;
overflow: hidden;
background:
var(--skg-stat-glow),
linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
rgba(0, 0, 0, 0.16);
color: #ffffff;
@@ -872,6 +968,36 @@ nextjs-portal {
backdrop-filter: blur(5px);
}
.skg-stat-card--violet {
--skg-stat-glow:
radial-gradient(circle at 94% 82%, rgba(126, 87, 194, 0.74), transparent 48%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%);
}
.skg-stat-card--lime {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(200, 205, 25, 0.72), transparent 48%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%);
}
.skg-stat-card--gold {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(214, 179, 106, 0.7), transparent 48%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%);
}
.skg-stat-card--teal {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(68, 162, 150, 0.7), transparent 48%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%);
}
.skg-stat-card--green {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(84, 190, 104, 0.72), transparent 48%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 32%);
}
.skg-stat-card__label {
color: rgba(255, 255, 255, 0.48);
}
@@ -943,27 +1069,75 @@ nextjs-portal {
}
.skg-board-theme--light .skg-stat-card {
background: #0a0a0a;
color: #fff;
box-shadow: 0 10px 24px -12px rgba(133, 96, 21, 0.38);
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(143, 176, 113, 0.2), transparent 50%);
border-color: rgba(72, 78, 56, 0.14);
background:
var(--skg-stat-glow),
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 243, 235, 0.58)),
rgba(255, 255, 255, 0.56);
color: #20241b;
box-shadow: 0 12px 28px rgba(74, 68, 44, 0.1);
}
.skg-board-theme--light .skg-stat-card--violet {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(126, 87, 194, 0.22), transparent 50%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.5), transparent 34%);
}
.skg-board-theme--light .skg-stat-card--lime {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(200, 205, 25, 0.28), transparent 50%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.5), transparent 34%);
}
.skg-board-theme--light .skg-stat-card--gold {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(214, 179, 106, 0.26), transparent 50%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.5), transparent 34%);
}
.skg-board-theme--light .skg-stat-card--teal {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(68, 162, 150, 0.24), transparent 50%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.5), transparent 34%);
}
.skg-board-theme--light .skg-stat-card--green {
--skg-stat-glow:
radial-gradient(circle at 94% 84%, rgba(84, 190, 104, 0.24), transparent 50%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.5), transparent 34%);
}
.skg-board-theme--light .skg-stat-card__label {
color: rgba(255, 255, 255, 0.54);
color: rgba(32, 36, 27, 0.48);
}
.skg-board-theme--light .skg-stat-card__value {
color: #fff;
color: #20241b;
}
.skg-board-theme--light .skg-primary-action {
background: #0a0a0a;
color: #fff;
box-shadow: 0 10px 24px -12px rgba(133, 96, 21, 0.42);
background: linear-gradient(135deg, #c8cd19, #a2c638);
color: #10140d;
box-shadow: 0 12px 28px rgba(128, 144, 37, 0.2);
}
.skg-board-theme--light .skg-primary-action:hover {
background: #252525;
background: linear-gradient(135deg, #d6db25, #b0d83d);
}
.skg-board-theme--light .skg-secondary-action {
border-color: rgba(72, 78, 56, 0.16);
background: rgba(255, 255, 255, 0.5);
color: rgba(32, 36, 27, 0.72);
}
.skg-board-theme--light .skg-secondary-action:hover {
border-color: rgba(143, 176, 113, 0.38);
background: rgba(143, 176, 113, 0.12);
color: #20241b;
}
.skg-board-theme--light .skg-empty-state {

59
web/components/ad-recreation-board.tsx
View File

@@ -2515,11 +2515,11 @@ export function AdRecreationBoard({
<p className="mt-2 truncate text-[12px] text-white/42">源视频分析、转换层确认、主体套图、逐句分镜和视频候选集中生产。</p>
</div>
<div className="grid min-w-[440px] grid-cols-5 gap-2 text-[11px]">
<Metric label="素材" value={`${jobs.length}`} />
<Metric label="当前" value={shortId(activeJobId)} />
<Metric label="视频" value={job?.video_url ? "ready" : "-"} />
<Metric label="文案段" value={`${transcriptCount}`} />
<Metric label="背景音" value={backgroundReady ? "ready" : "-"} />
<Metric label="素材" value={`${jobs.length}`} variant="violet" />
<Metric label="当前" value={shortId(activeJobId)} variant="lime" />
<Metric label="视频" value={job?.video_url ? "ready" : "-"} variant="gold" />
<Metric label="文案段" value={`${transcriptCount}`} variant="teal" />
<Metric label="背景音" value={backgroundReady ? "ready" : "-"} variant="green" />
</div>
</header>
@@ -2599,27 +2599,38 @@ function WorkbenchRail({
boardTheme: BoardThemeMode
materialPanel: ReactNode
}) {
const [hoverOpen, setHoverOpen] = useState(false)
const railOpen = materialOpen || hoverOpen
return (
<aside className={`skg-board-rail sticky top-4 flex shrink-0 items-stretch ${materialOpen ? "is-open" : ""}`} aria-label="工作台工具栏">
<aside
className={`skg-board-rail sticky flex shrink-0 items-stretch ${railOpen ? "is-open" : ""}`}
aria-label="工作台工具栏"
onMouseEnter={() => setHoverOpen(true)}
onMouseLeave={() => setHoverOpen(false)}
onFocus={() => setHoverOpen(true)}
onBlur={(event) => {
const nextTarget = event.relatedTarget
if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) setHoverOpen(false)
}}
>
<div className="skg-board-rail__strip flex shrink-0 items-stretch gap-3" aria-label="工作台导航与素材输入">
<div className="skg-board-rail__iconbar flex shrink-0 flex-col items-center py-5" aria-label="工作台导航">
<div className="skg-board-rail__logo mb-8 flex h-9 w-9 items-center justify-center rounded-full text-[12px] font-semibold" title="SKG Marketing Studio">
S
</div>
<nav className="flex flex-1 flex-col items-center gap-4">
<nav className="flex flex-col items-center gap-4">
<button
type="button"
onClick={onToggleMaterial}
className={`skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full ${materialOpen ? "is-active" : ""}`}
className={`skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full ${railOpen ? "is-active" : ""}`}
title={jobsCount ? `素材任务 · ${jobsCount}` : "素材任务"}
aria-label="素材任务"
aria-expanded={materialOpen}
aria-expanded={railOpen}
aria-controls="skg-material-rail-panel"
>
<Link2 className="h-[18px] w-[18px]" />
</button>
</nav>
<div className="mt-8 flex flex-col items-center gap-3">
<button
type="button"
onClick={onOpenLibrary}
@@ -2638,10 +2649,10 @@ function WorkbenchRail({
>
{boardTheme === "dark" ? <Sun className="h-[18px] w-[18px]" /> : <Moon className="h-[18px] w-[18px]" />}
</button>
</div>
</nav>
</div>
{materialOpen ? (
{railOpen ? (
<div id="skg-material-rail-panel" className="skg-board-rail__drawer w-[320px] shrink-0">
{materialPanel}
</div>
@@ -7330,7 +7341,7 @@ function AudioWaveform({
}, [features])
return (
<div
className="relative h-24 cursor-pointer overflow-hidden rounded-md border border-white/10 bg-black/35 px-2"
className="skg-audio-waveform relative h-24 cursor-pointer overflow-hidden rounded-md border px-2"
aria-label="音频响度波形"
onClick={(event) => {
const rect = event.currentTarget.getBoundingClientRect()
@@ -7348,24 +7359,24 @@ function AudioWaveform({
{status === "failed" ? "audio.wav 解码失败" : status === "loading" ? "正在解码 audio.wav" : "等待音频文件"}
</div>
)}
<div className="absolute inset-x-0 top-1/2 h-px bg-white/14" />
<div className="skg-audio-waveform__center absolute inset-x-0 top-1/2 h-px" />
{hasFeatures && (
<svg className="pointer-events-none absolute inset-0 h-full w-full overflow-visible" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon
points={envelopePoints}
fill="rgba(209,213,219,0.74)"
fill="var(--skg-wave-fill)"
/>
<polyline
points={topPoints}
fill="none"
stroke="rgba(229,231,235,0.7)"
stroke="var(--skg-wave-stroke-1)"
strokeWidth="0.55"
vectorEffect="non-scaling-stroke"
/>
<polyline
points={bottomPoints}
fill="none"
stroke="rgba(229,231,235,0.52)"
stroke="var(--skg-wave-stroke-2)"
strokeWidth="0.55"
vectorEffect="non-scaling-stroke"
/>
@@ -7375,18 +7386,18 @@ function AudioWaveform({
{segments.map((segment, index) => (
<div
key={`${segment.start}-${index}`}
className="absolute inset-y-0 w-px bg-white/12"
className="skg-audio-waveform__segment absolute inset-y-0 w-px"
style={{ left: `${clampNumber((segment.start / Math.max(duration, 1)) * 100, 0, 100)}%` }}
/>
))}
{hoverPct !== null && (
<div
className="pointer-events-none absolute inset-y-0 w-px bg-cyan-100/70"
className="skg-audio-waveform__hover pointer-events-none absolute inset-y-0 w-px"
style={{ left: `${hoverPct}%` }}
/>
)}
<div
className="pointer-events-none absolute inset-y-0 w-[2px] bg-emerald-200 shadow-[0_0_16px_rgba(110,231,183,0.85)] will-change-[left]"
className="skg-audio-waveform__playhead pointer-events-none absolute inset-y-0 w-[2px] will-change-[left]"
style={{ left: `${pointerPct}%` }}
/>
</div>
@@ -7990,9 +8001,11 @@ function MaterialCard({
)
}
function Metric({ label, value, compact }: { label: string; value: string; compact?: boolean }) {
type MetricVariant = "violet" | "lime" | "gold" | "teal" | "green"
function Metric({ label, value, compact, variant }: { label: string; value: string; compact?: boolean; variant?: MetricVariant }) {
return (
<div className={`skg-stat-card ${compact ? "px-2 py-1" : "px-2.5 py-1.5"}`}>
<div className={`skg-stat-card ${variant ? `skg-stat-card--${variant}` : ""} ${compact ? "px-2 py-1" : "px-2.5 py-1.5"}`}>
<div className="skg-stat-card__label">{label}</div>
<div className="skg-stat-card__value mt-0.5 truncate font-mono text-[13px] font-semibold">{value}</div>
</div>