aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
201 lines (198 loc) • 8.18 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
const DEFAULT_LAYERS = [{
id: "canopy",
name: "Canopy Habitat",
health: 82,
trend: 4,
biodiversity: 0.76,
status: "thriving",
description: "Tree canopy health and migratory activity."
}, {
id: "understory",
name: "Understory",
health: 68,
trend: 2,
biodiversity: 0.64,
status: "stable",
description: "Shade adaptable flora and night fauna patterns."
}, {
id: "forest-floor",
name: "Forest Floor",
health: 54,
trend: -3,
biodiversity: 0.49,
status: "recovering",
description: "Nutrient cycling, soil moisture, decomposer signals."
}, {
id: "riparian",
name: "Riparian Basin",
health: 38,
trend: -6,
biodiversity: 0.41,
status: "critical",
description: "Water table oscillations and aquatic biomes."
}];
const statusAccent = {
thriving: "glass-surface-green/40 border-green-400/40",
stable: "glass-surface-blue/30 border-blue-400/30",
recovering: "glass-surface-amber/30 border-amber-400/30",
critical: "glass-surface-red/30 border-red-400/40"
};
const statusLabel = {
thriving: "Thriving",
stable: "Stable",
recovering: "Recovering",
critical: "Critical"
};
const clamp = value => Math.max(0, Math.min(100, value));
function LivingEcosystemSimulator({
className,
title = "Living Ecosystem Simulator",
layers = DEFAULT_LAYERS,
onSelectLayer,
highlightThreshold = 45
}) {
const normalizedLayers = useMemo(() => {
const usable = layers.length > 0 ? layers : DEFAULT_LAYERS;
return usable.map(layer => ({
...layer,
health: clamp(layer.health),
biodiversity: layer.biodiversity !== undefined ? Math.max(0, Math.min(1, layer.biodiversity)) : undefined,
status: layer.status ?? (layer.health >= 75 ? "thriving" : layer.health >= 55 ? "stable" : layer.health >= 40 ? "recovering" : "critical")
}));
}, [layers]);
const aggregate = useMemo(() => {
const total = normalizedLayers.reduce((acc, layer) => {
acc.health += layer.health;
acc.biodiversity += layer.biodiversity ?? 0;
acc.count += 1;
if (layer.status === "critical") acc.critical += 1;
return acc;
}, {
health: 0,
biodiversity: 0,
count: 0,
critical: 0
});
return {
averageHealth: total.count ? Math.round(total.health / total.count) : 0,
averageBiodiversity: total.count ? total.biodiversity / total.count : 0,
criticalZones: total.critical
};
}, [normalizedLayers]);
return jsxs(OptimizedGlassCore, {
role: "region",
"aria-label": title,
className: cn("glass-radius-3xl glass-border glass-border-soft glass-backdrop-grid glass-p-6 space-y-6", "bg-gradient-to-br from-slate-900/80 via-slate-900/60 to-slate-900/40", className),
children: [jsxs("header", {
className: "glass-flex glass-flex-wrap glass-items-end glass-justify-between glass-gap-4",
children: [jsxs("div", {
children: [jsx("h2", {
className: 'glass-text-xl font-semibold text-primary',
children: title
}), jsx("p", {
className: 'glass-text-sm text-primary/70',
children: "Real-time biosphere telemetry across layered habitats."
})]
}), jsxs("dl", {
className: 'glass-flex glass-gap-6 glass-text-sm text-primary/80',
children: [jsxs("div", {
children: [jsx("dt", {
className: 'uppercase tracking-wide glass-text-xs text-primary/50',
children: "Avg. Health"
}), jsxs("dd", {
className: 'glass-text-lg font-semibold text-primary',
children: [aggregate.averageHealth, "%"]
})]
}), jsxs("div", {
children: [jsx("dt", {
className: 'uppercase tracking-wide glass-text-xs text-primary/50',
children: "Bio-Diversity"
}), jsxs("dd", {
className: 'glass-text-lg font-semibold text-primary',
children: [(aggregate.averageBiodiversity * 100).toFixed(0), "%"]
})]
}), jsxs("div", {
children: [jsx("dt", {
className: 'uppercase tracking-wide glass-text-xs text-primary/50',
children: "Critical Zones"
}), jsx("dd", {
className: cn("text-lg font-semibold", aggregate.criticalZones > 0 ? "text-red-400" : "text-primary"),
children: aggregate.criticalZones
})]
})]
})]
}), jsx("div", {
className: 'glass-grid glass-gap-4 md:grid-cols-2',
children: normalizedLayers.map(layer => {
const isCritical = layer.health <= highlightThreshold;
return jsxs("button", {
type: "button",
onClick: () => onSelectLayer?.(layer),
className: cn("w-full text-left glass-radius-2xl border glass-border-soft p-4 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 glass-focus glass-touch-target glass-contrast-guard", statusAccent[layer.status ?? "stable"], isCritical ? "shadow-[0_0_30px_-10px_rgba(248,113,113,0.7)]" : "hover:border-white/40", isCritical ? "ring-1 ring-red-400/40" : undefined),
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between glass-gap-4",
children: [jsxs("div", {
children: [jsx("h3", {
className: 'glass-text-lg font-medium text-primary',
children: layer.name
}), jsx("p", {
className: 'glass-text-xs text-primary/60 max-w-xs',
children: layer.description
})]
}), jsx("span", {
className: 'glass-text-sm font-semibold text-primary/90',
children: statusLabel[layer.status ?? "stable"]
})]
}), jsxs("div", {
className: 'mt-4 space-y-3',
children: [jsxs("div", {
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between glass-text-xs text-primary/60',
children: [jsx("span", {
children: "Habitat Health"
}), jsxs("span", {
className: cn("font-semibold", isCritical ? "text-red-300" : "text-primary"),
children: [layer.health, "%"]
})]
}), jsx("div", {
className: 'mt-2 h-2 glass-w-full overflow-hidden glass-radius-full glass-surface-subtle/10',
children: jsx("div", {
className: cn("h-full rounded-full transition-all", isCritical ? "bg-red-400/80" : "bg-cyan-400/80"),
style: {
width: `${layer.health}%`
}
})
})]
}), layer.biodiversity !== undefined && jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between glass-text-xs text-primary/60',
children: [jsx("span", {
children: "Biodiversity Index"
}), jsxs("span", {
className: 'font-semibold text-primary/80',
children: [(layer.biodiversity * 100).toFixed(0), "%"]
})]
}), typeof layer.trend === "number" && jsxs("div", {
className: 'glass-text-xs text-primary/60',
children: ["Trend:", " ", jsxs("span", {
className: layer.trend >= 0 ? "text-emerald-300" : "text-red-300",
children: [layer.trend >= 0 ? "+" : "", layer.trend]
}), " ", "pts"]
})]
})]
}, layer.id);
})
})]
});
}
export { LivingEcosystemSimulator, LivingEcosystemSimulator as default };
//# sourceMappingURL=LivingEcosystemSimulator.js.map