/* global React */
const { useRef, useEffect, useState } = React;
/* ---------- Inline icon set (Lucide-style, 1.75 stroke) ---------- */
const ICON_PATHS = {
arrow: '',
database: '',
cpu: '',
gauge: '',
shield: '',
network: '',
spark: '',
compass: '',
server: '',
grid: '',
megaphone: '',
user: '',
chart: '',
lock: '',
scale: '',
calendar: '',
check: '',
menu: '',
close: '',
sun: '',
moon: '',
quote: '',
};
function Icon({ name, size = 22, color = 'currentColor', stroke = 1.75, style }) {
return ;
}
/* ---------- Eyebrow / kicker ---------- */
function Eyebrow({ children, color, style }) {
return {children};
}
/* ---------- Button ---------- */
function Button({ children, variant = 'primary', onClick, icon, size = 'md', as = 'button', href }) {
const cls = `ds-btn ds-btn-${variant} ds-btn-${size}`;
const inner = <>{children}{icon && };
if (as === 'a') return {inner};
return ;
}
/* ---------- Badge ---------- */
function Badge({ children, tone = 'magenta', solid = false }) {
return {children};
}
/* ---------- IconBadge (gradient-soft tile) ---------- */
function IconBadge({ name, color = '#FF1893', tint = 'rgba(255,24,147,.12)' }) {
return ;
}
/* ---------- Animated constellation background (canvas) ---------- */
function Constellation({ density = 0.00012, className, style }) {
const ref = useRef(null);
useEffect(() => {
const canvas = ref.current; if (!canvas) return;
const ctx = canvas.getContext('2d');
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let w, h, nodes = [], raf, t = 0;
const COLORS = ['#9C64FF', '#FF1893', '#49EEF4'];
function resize() {
const r = canvas.parentElement.getBoundingClientRect();
w = canvas.width = r.width * devicePixelRatio;
h = canvas.height = r.height * devicePixelRatio;
canvas.style.width = r.width + 'px'; canvas.style.height = r.height + 'px';
const count = Math.max(26, Math.min(70, Math.floor(r.width * r.height * density)));
nodes = Array.from({ length: count }, () => ({
x: Math.random() * w, y: Math.random() * h,
vx: (Math.random() - .5) * 0.12 * devicePixelRatio,
vy: (Math.random() - .5) * 0.12 * devicePixelRatio,
c: COLORS[Math.floor(Math.random() * COLORS.length)],
ph: Math.random() * Math.PI * 2,
}));
}
resize();
const ro = new ResizeObserver(resize); ro.observe(canvas.parentElement);
const LINK = 150 * devicePixelRatio;
function draw() {
t += 0.016;
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < nodes.length; i++) {
const a = nodes[i];
for (let j = i + 1; j < nodes.length; j++) {
const b = nodes[j];
const dx = a.x - b.x, dy = a.y - b.y, d = Math.hypot(dx, dy);
if (d < LINK) {
const o = (1 - d / LINK) * 0.5;
ctx.strokeStyle = a.c; ctx.globalAlpha = o; ctx.lineWidth = 1 * devicePixelRatio;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
for (const n of nodes) {
if (!reduced) { n.x += n.vx; n.y += n.vy;
if (n.x < 0 || n.x > w) n.vx *= -1;
if (n.y < 0 || n.y > h) n.vy *= -1; }
const tw = 0.6 + 0.4 * Math.sin(t * 1.2 + n.ph);
ctx.fillStyle = n.c; ctx.globalAlpha = tw;
ctx.beginPath(); ctx.arc(n.x, n.y, 2.1 * devicePixelRatio, 0, 7); ctx.fill();
ctx.globalAlpha = tw * 0.28;
ctx.beginPath(); ctx.arc(n.x, n.y, 6 * devicePixelRatio, 0, 7); ctx.fill();
}
ctx.globalAlpha = 1;
raf = requestAnimationFrame(draw);
}
draw();
return () => { cancelAnimationFrame(raf); ro.disconnect(); };
}, []);
return ;
}
Object.assign(window, { Icon, Eyebrow, Button, Badge, IconBadge, Constellation });