liqAt * 0.7 ? "var(--accent)" : "var(--ink)"),
}}
/>
{labels && (
LTV {ltv.toFixed(1)}%
liq · {liqAt}%
)}
);
}
/* ─── Sparkline ─── */
function Spark({ points, w = 96, h = 28, color = "var(--ink)" }) {
const max = Math.max(...points), min = Math.min(...points);
const range = max - min || 1;
const step = w / (points.length - 1);
const path = points
.map((p, i) => `${i ? "L" : "M"}${(i * step).toFixed(1)},${(h - ((p - min) / range) * (h - 4) - 2).toFixed(1)}`)
.join(" ");
return (
);
}
/* ─── Tag ─── */
function Tag({ children, tone = "default" }) {
const tones = {
default: { bg: "var(--paper-2)", c: "var(--ink-2)", b: "var(--hairline)" },
accent: { bg: "var(--accent-soft)", c: "var(--accent-ink)", b: "var(--accent)" },
positive: { bg: "var(--positive-soft)", c: "var(--positive)", b: "var(--positive)" },
danger: { bg: "var(--danger-soft)", c: "var(--danger)", b: "var(--danger)" },
ink: { bg: "var(--ink)", c: "var(--paper)", b: "var(--ink)" },
}[tone] || {};
return (
{children}
);
}
/* ─── Stat ─── */
function Stat({ kicker, value, sub, locked, size = "lg" }) {
return (
);
}
/* ─────────────────────────────────────────────────────────────────────
MasterDetail · the single layout primitive for every product screen.
Children pattern: pass `list` and `detail` as render props.
───────────────────────────────────────────────────────────────────── */
/* MasterDetail full-bleed variant: no padding, no scroll on detail body */
function MasterDetail({ listHeader, listBody, detailHeader, detailBody, detailFullBleed, collapseKey }) {
const [listOpen, setListOpen] = useState(true);
const [detailFs, setDetailFs] = useState(false);
const frameRef = useRef(null);
// Restore collapsed state from localStorage
useEffect(() => {
if (!collapseKey) return;
try {
const saved = localStorage.getItem("fheforge:md:" + collapseKey);
if (saved === "0") setListOpen(false);
} catch {}
}, [collapseKey]);
useEffect(() => {
if (!collapseKey) return;
try { localStorage.setItem("fheforge:md:" + collapseKey, listOpen ? "1" : "0"); } catch {}
}, [listOpen, collapseKey]);
// ⌘B toggles the list rail · J/K cycles list items · Enter clicks selected
useEffect(() => {
const onKey = (e) => {
if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.tagName === "SELECT") return;
if ((e.metaKey || e.ctrlKey) && e.key === "b") {
e.preventDefault();
setListOpen(o => !o);
return;
}
// J/K vim-style list navigation (also ↓ / ↑ as fallback)
if (e.key === "j" || e.key === "k" || e.key === "ArrowDown" || e.key === "ArrowUp") {
const items = frameRef.current?.querySelectorAll(".md-list-body .md-item");
if (!items?.length) return;
e.preventDefault();
const arr = Array.from(items);
const currentIdx = arr.findIndex(el => el.classList.contains("selected"));
const forward = e.key === "j" || e.key === "ArrowDown";
const nextIdx = currentIdx === -1
? (forward ? 0 : arr.length - 1)
: forward
? (currentIdx + 1) % arr.length
: (currentIdx - 1 + arr.length) % arr.length;
arr[nextIdx].click();
arr[nextIdx].scrollIntoView({ block: "nearest", behavior: "smooth" });
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
return (
{listHeader && {listHeader}
}
{listBody}
{detailHeader && {detailHeader}
}
{detailBody}
setListOpen(o => !o)}
title={listOpen ? "Hide list · ⌘B" : "Show list · ⌘B"}
aria-label={listOpen ? "Hide list panel" : "Show list panel"}
aria-expanded={listOpen}
>
{listOpen ? "‹" : "›"}
);
}
/* List item used inside md-list-body */
function MDItem({ idx, title, sub, right, selected, onClick }) {
return (
{idx !== undefined && (
{idx}
)}
{title}
{sub && (
{sub}
)}
{right && {right}
}
);
}
/* List group header */
function MDGroup({ children }) {
return
{children}
;
}
/* ─── Modal shell ─── */
function Modal({ open, onClose, children, width = 720 }) {
const shellRef = useRef(null);
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === "Escape") { onClose(); return; }
if (e.key === "Tab" && shellRef.current) {
const focusable = shellRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (!focusable.length) return;
const first = focusable[0], last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
};
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
requestAnimationFrame(() => {
const first = shellRef.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (first) first.focus();
});
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()} style={{ width: `min(${width}px, 100%)` }}>
{children}
);
}
/* ─── TopBar ─── */
function TopBar({ route, setRoute, ctx, onPermitClick, onWalletClick, theme, setTheme }) {
const NAV = [
["home", "Home"],
["portfolio", "Portfolio"],
["lend", "Lend"],
["strategies", "Strategies"],
["governance", "Governance"],
];
return (
setRoute("home")}>
{NAV.map(([k, label]) => (
setRoute(k)}
aria-current={route === k ? "page" : undefined}
style={{
border: 0,
padding: "8px 10px",
color: route === k ? "var(--ink)" : "var(--muted)",
background: "transparent",
borderBottom: route === k ? "1px solid var(--ink)" : "1px solid transparent",
borderRadius: 0,
fontFamily: "var(--sans)", fontWeight: 500, fontSize: 14,
cursor: "pointer",
whiteSpace: "nowrap",
transition: "color var(--t-feedback) var(--ease), border-color var(--t-feedback) var(--ease)",
}}
>
{label}
))}
{ctx.connected ? (
<>
) : (
Connect →
)}
);
}
/* Mobile bottom nav (kept for ≤720px) */
function MobileNav({ route, setRoute }) {
const NAV = [
["portfolio", "Folio"],
["lend", "Lend"],
["strategies", "Build"],
["governance", "Gov"],
];
return (
{NAV.map(([k, label]) => (
setRoute(k)}
aria-current={route === k ? "page" : undefined}
style={{
border: 0, background: "transparent",
padding: "12px 16px",
fontFamily: "var(--mono)", fontSize: 13, textTransform: "uppercase",
letterSpacing: 0.08,
color: route === k ? "var(--ink)" : "var(--muted)",
borderTop: route === k ? "1.5px solid var(--ink)" : "1.5px solid transparent",
cursor: "pointer",
}}
>
{label}
))}
);
}
Object.assign(window, {
Cipher, PermitChip, WalletChip, AssetGlyph, LtvGauge, Spark,
Tag, Stat, MasterDetail, MDItem, MDGroup, Modal, TopBar, MobileNav, ThemeToggle,
});