// ─────────────────────────────────────────────────────────────────────────
// Meridian — shared library
// Icon shim, layout primitives, finance widgets, theme-aware Chart.js
// wrappers, and the async-data hook. Exported to window for Babel scopes.
// ─────────────────────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ── Lucide icon shim ─────────────────────────────────────────────────────── */
function Icon({ name, size = 16, className = "", style, strokeWidth = 1.75 }) {
const ref = useRef(null);
useEffect(() => {
if (!ref.current || !window.lucide) return;
ref.current.innerHTML = "";
const node = window.lucide[toPascal(name)] || window.lucide.Circle;
try {
const el = window.lucide.createElement(node);
el.setAttribute("width", size);
el.setAttribute("height", size);
el.setAttribute("stroke-width", strokeWidth);
el.setAttribute("class", "lucide" + (className ? " " + className : ""));
ref.current.appendChild(el);
} catch (e) { /* unknown icon — leave empty */ }
}, [name, size, className, strokeWidth]);
return {children}
;
}
function Col({ children, gap = 8, style, className = "", ...rest }) {
return {children}
;
}
function Card({ children, hover = false, className = "", style, ...rest }) {
return {children}
;
}
function SectionTitle({ children, action, icon }) {
return (
{icon && {children}
{action}
);
}
function PageHeader({ title, subtitle, actions }) {
return (
{title}
{subtitle &&
{subtitle}
}
{actions && {actions}
}
);
}
/* ── Brand mark ───────────────────────────────────────────────────────────── */
function Logo({ size = 30, withText = false }) {
const mark = (
);
if (!withText) return mark;
return (
{mark}
Meridian
Personal investing
);
}
/* ── Finance widgets ──────────────────────────────────────────────────────── */
function Delta({ value, kind = "eur", showArrow = true, size, weight = 500, style }) {
const v = (typeof value === "number" && isFinite(value)) ? value : 0;
const pos = v >= 0;
const text = kind === "pct" ? fmt.sPct(v) : kind === "eur" ? fmt.sEur(v) : (pos ? "+" : "−") + fmt.num(Math.abs(v));
return (
{showArrow &&
);
}
function SignalBadge({ signal, size = "" }) {
const map = { buy: "Buy", hold: "Hold", sell: "Sell" };
const s = map[signal] ? signal : "hold";
return {map[s]} ;
}
function ClassBadge({ kind }) {
const map = { signal: "Signal", mixed: "Mixed", hype: "Hype", uncertain: "Uncertain" };
return {map[kind] || kind} ;
}
function aaqsColor(s) {
if (s == null) return "var(--fg-3)";
if (s >= 8) return "var(--sage-700)";
if (s >= 6) return "var(--mixed-accent)";
return "var(--hype-accent)";
}
function AaqsMeter({ score, showVal = true, width = 56 }) {
if (score == null) return — ;
const c = aaqsColor(score);
return (
{showVal && {fmt.num(score)} }
);
}
// fair-value gap. positive = undervalued (good, to the right)
function FvBar({ gap, width = 64, showVal = true }) {
if (gap == null) return — ;
const under = gap >= 0;
const mag = Math.min(Math.abs(gap), 40) / 40;
const color = under ? "var(--pos-fg)" : "var(--neg-fg)";
return (
{showVal && {fmt.sPct(gap)} }
);
}
function Avatar({ initials, size = "", gradient }) {
return {initials}
;
}
// Company logo for a stock. Pulls a free SVG from Parqet by ISIN (preferred)
// or ticker symbol — no API key. On any load error, or when neither ISIN nor
// ticker is known, it falls back to the original 2-letter initials box in the
// exact prior optic (var(--bg-tint), mono, var(--fg-2)).
function StockLogo({ isin, ticker, name, size = 34, radius, initialsFontSize, style }) {
const [failed, setFailed] = useState(false);
const r = radius != null ? radius : Math.round(size * 0.25);
const src = isin
? "https://assets.parqet.com/logos/isin/" + encodeURIComponent(isin)
: ticker ? "https://assets.parqet.com/logos/symbol/" + encodeURIComponent(ticker) : null;
// Reset the error state when we point at a different stock (the detail header
// reuses one instance across navigations).
useEffect(() => { setFailed(false); }, [src]);
if (!src || failed) {
return (
{String(name || ticker || "").slice(0, 2).toUpperCase()}
);
}
return (
);
}
/* ── Chart.js helpers ─────────────────────────────────────────────────────── */
function cssVar(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
function resolveColor(c) {
if (!c) return c;
c = String(c).trim();
if (c.startsWith("var(")) { const n = c.slice(4, -1).trim(); return cssVar(n) || c; }
return c;
}
function LineChart({ data, height = 260, theme, color, fill = true, euro = true, valueFmt }) {
const ref = useRef(null);
const chart = useRef(null);
useEffect(() => {
if (!ref.current || !window.Chart || !data || data.length === 0) return;
const ctx = ref.current.getContext("2d");
const line = resolveColor(color) || cssVar("--sage-600") || "#557D65";
const grid = cssVar("--border-1");
const tick = cssVar("--fg-3");
const surf = cssVar("--bg-surface");
const ink = cssVar("--fg-1");
const muted = cssVar("--fg-2");
const g = ctx.createLinearGradient(0, 0, 0, height);
g.addColorStop(0, hexA(line, 0.18));
g.addColorStop(1, hexA(line, 0.0));
if (chart.current) chart.current.destroy();
chart.current = new window.Chart(ctx, {
type: "line",
data: {
labels: data.map((d) => d.t),
datasets: [{
data: data.map((d) => d.v),
borderColor: line, borderWidth: 2,
backgroundColor: fill ? g : "transparent",
fill, tension: 0.28, pointRadius: 0, pointHoverRadius: 4,
pointHoverBackgroundColor: line, pointHoverBorderColor: surf, pointHoverBorderWidth: 2,
}],
},
options: {
responsive: true, maintainAspectRatio: false,
interaction: { mode: "index", intersect: false },
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: surf, titleColor: muted, bodyColor: ink,
borderColor: grid, borderWidth: 1, padding: 10, cornerRadius: 10,
displayColors: false, titleFont: { family: "Geist Mono", size: 11 },
bodyFont: { family: "Geist Mono", size: 13, weight: "600" },
callbacks: {
title: (it) => fmt.date(it[0].label),
label: (it) => valueFmt ? valueFmt(it.parsed.y) : (euro ? fmt.eur0(it.parsed.y) : fmt.num(it.parsed.y)),
},
},
},
scales: {
x: { display: false, grid: { display: false } },
y: {
position: "right",
grid: { color: grid, drawTicks: false },
border: { display: false },
ticks: { color: tick, font: { family: "Geist Mono", size: 10 }, maxTicksLimit: 5, padding: 8,
callback: (v) => euro ? "€" + (v >= 1000 ? (v / 1000).toFixed(0) + "k" : v) : fmt.num0(v) },
},
},
},
});
return () => { if (chart.current) chart.current.destroy(); };
}, [data, theme, color]);
if (!data || data.length === 0) return No data
;
return
;
}
function Donut({ slices, height = 220, theme, centerLabel, centerValue }) {
const ref = useRef(null);
const chart = useRef(null);
useEffect(() => {
if (!ref.current || !window.Chart || !slices || slices.length === 0) return;
const ctx = ref.current.getContext("2d");
const surf = cssVar("--bg-surface");
const ink = cssVar("--fg-1");
const muted = cssVar("--fg-2");
const grid = cssVar("--border-1");
if (chart.current) chart.current.destroy();
chart.current = new window.Chart(ctx, {
type: "doughnut",
data: {
labels: slices.map((s) => s.label),
datasets: [{
data: slices.map((s) => s.value),
backgroundColor: slices.map((s) => resolveColor(s.color)),
borderColor: surf, borderWidth: 2.5, hoverBorderWidth: 2.5, hoverOffset: 6,
}],
},
options: {
responsive: true, maintainAspectRatio: false, cutout: "68%",
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: surf, titleColor: ink, bodyColor: muted,
borderColor: grid, borderWidth: 1, padding: 10, cornerRadius: 10,
displayColors: true, boxWidth: 8, boxHeight: 8, usePointStyle: true,
titleFont: { family: "Geist", size: 13, weight: "600" },
bodyFont: { family: "Geist Mono", size: 12 },
callbacks: { label: (it) => " " + fmt.eur0(it.parsed) + " · " + fmt.pct(slices[it.dataIndex].pct) },
},
},
},
});
return () => { if (chart.current) chart.current.destroy(); };
}, [slices, theme]);
return (
{slices && slices.length > 0 ?
:
No data
}
{centerValue && (
{centerLabel}
{centerValue}
)}
{title}
{body && {body}
}
{action}
);
}
function Skel({ w = "100%", h = 14, r = 6, style }) {
return
;
}
// a card-shaped loading block
function SkelCard({ lines = 3, h = 120 }) {
return (
);
}
/* relative time vs real now */
function relTime(iso) {
if (!iso) return "—";
const d = new Date(iso), now = new Date();
if (isNaN(d)) return "—";
const m = Math.round((now - d) / 60000);
if (m < 1) return "just now";
if (m < 60) return m + " min ago";
const h = Math.round(m / 60);
if (h < 24) return h + " h ago";
return fmt.date(d);
}
/* ── async data hook ─────────────────────────────────────────────────────── */
// useAsync(fn, deps) → { data, loading, error, reload }
function useAsync(fn, deps = []) {
const [state, setState] = useState({ data: null, loading: true, error: null });
const fnRef = useRef(fn); fnRef.current = fn;
const run = useCallback(() => {
let live = true;
setState((s) => ({ ...s, loading: true, error: null }));
Promise.resolve().then(fnRef.current).then(
(data) => { if (live) setState({ data, loading: false, error: null }); },
(error) => { if (live) setState({ data: null, loading: false, error }); }
);
return () => { live = false; };
}, deps);
useEffect(run, deps);
return { ...state, reload: run };
}
Object.assign(window, {
// React hooks — exposed so every Babel screen scope can reference them
useState, useEffect, useRef, useMemo, useCallback,
Icon, Row, Col, Card, SectionTitle, PageHeader, Logo,
Delta, SignalBadge, ClassBadge, AaqsMeter, FvBar, Avatar, StockLogo, Sparkline,
LineChart, Donut, StackBar, EmptyState, Skel, SkelCard, relTime, useAsync,
cssVar, hexA, resolveColor, aaqsColor, CHART_PALETTE,
});