/* eslint-disable */
// Shared primitives and tiny utilities used across the Alamelu workspace.
const { useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect, Fragment } = React;
/* ---------- icons (hand-tuned monoline, 1.5px stroke, currentColor) ---------- */
function Icon({ d, size = 16, stroke = 1.5, fill = "none", style, viewBox = "0 0 24 24", children }) {
return (
);
}
const I = {
Chat: (p) => {},
File: (p) => {<>},
Activity: (p) => ,
Wallet: (p) => {<>},
Routes: (p) => {<>},
Dashboard: (p) => {<>},
Markets: (p) => ,
Briefcase: (p) => {<>},
Orders: (p) => {<>},
Bell: (p) => {<>},
Strategy: (p) => {<>},
Send: (p) => ,
Plus: (p) => ,
Refresh: (p) => {<>},
Search: (p) => {<>},
Sparkles: (p) => {<>},
Eye: (p) => {<>},
Edit: (p) => ,
Save: (p) => {<>},
Lock: (p) => {<>},
Warn: (p) => {<>},
Dot: (p) => ,
Drag: (p) => {<>},
Trash: (p) => {<>},
Settings: (p) => {<>},
Clock: (p) => {<>},
Check: (p) => ,
X: (p) => ,
Up: (p) => ,
Down: (p) => ,
};
/* ---------- atoms ---------- */
function Pill({ tone = "neutral", children, soft = true, style }) {
const map = {
good: { fg: "var(--good)", bg: "var(--good-soft)" },
warn: { fg: "var(--warn)", bg: "var(--warn-soft)" },
bad: { fg: "var(--bad)", bg: "var(--bad-soft)" },
info: { fg: "var(--info)", bg: "var(--info-soft)" },
accent: { fg: "var(--accent)", bg: "var(--accent-soft)" },
neutral: { fg: "var(--text-2)", bg: "oklch(0.30 0.025 245 / 0.5)" },
};
const t = map[tone] || map.neutral;
return (
{children}
);
}
function StatusDot({ tone = "good", size = 8, pulse = true }) {
const colorMap = {
good: "var(--good)", warn: "var(--warn)", bad: "var(--bad)",
info: "var(--info)", accent: "var(--accent)", muted: "var(--text-3)"
};
return (
);
}
function Card({ title, subtitle, right, padding = 18, children, style, bodyStyle, headerStyle }) {
return (
{(title || right) && (
{title &&
{title}
}
{subtitle &&
{subtitle}
}
{right}
}
)}
{children}
);
}
function IconButton({ children, onClick, title, active, style }) {
return (
);
}
function Btn({ kind = "ghost", size = "md", icon, children, onClick, disabled, style }) {
const base = {
display: "inline-flex", alignItems: "center", gap: 8,
fontWeight: 600,
border: "1px solid transparent",
borderRadius: "var(--r-sm)",
transition: "all 140ms ease",
whiteSpace: "nowrap",
};
const sizes = {
sm: { fontSize: 12, padding: "5px 10px" },
md: { fontSize: 13, padding: "7px 12px" },
lg: { fontSize: 14, padding: "9px 16px" },
};
const kinds = {
primary: {
background: "var(--accent)",
color: "oklch(0.18 0.04 170)",
boxShadow: "0 1px 0 0 oklch(1 0 0 / 0.2) inset, 0 6px 14px -8px var(--accent)",
},
ghost: {
background: "transparent",
color: "var(--text-2)",
border: "1px solid var(--border-m)",
},
subtle: {
background: "var(--bg-2)",
color: "var(--text-1)",
border: "1px solid var(--border-s)",
},
danger: {
background: "var(--bad-soft)",
color: "var(--bad)",
border: "1px solid oklch(0.700 0.200 25 / 0.4)",
},
};
return (
);
}
/* ---------- sparkline ---------- */
function Sparkline({ data, color = "var(--accent)", height = 36, width = "100%", fill = true, animate = true }) {
const ref = useRef(null);
const [w, setW] = useState(0);
useLayoutEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const min = Math.min(...data);
const max = Math.max(...data);
const span = max - min || 1;
const W = w || 200;
const H = height;
const pad = 2;
const step = (W - pad * 2) / (data.length - 1);
const pts = data.map((v, i) => [pad + i * step, H - pad - ((v - min) / span) * (H - pad * 2)]);
const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
const area = path + ` L ${pts[pts.length-1][0].toFixed(1)} ${H} L ${pts[0][0].toFixed(1)} ${H} Z`;
const gradId = useMemo(() => "spg-" + Math.random().toString(36).slice(2,9), []);
return (
{w > 0 && (
)}