// Shared UI primitives for the Assurix directory prototype.
// Brand tokens locked to the real Assurix site (Montserrat, #071e47 navy, etc.)
const { useMemo } = React;
// Brand tokens
window.ASX = {
navy: "#071e47",
blue: "#0b3885",
teal: "#2a9d8f",
tealDark: "#238477",
lime: "#b8d645", // hsl(75 70% 45%)
limeContrast: "#9fba3d",
ink: "#071e47",
muted: "#6b7280",
line: "#e5e7eb",
bg: "#ffffff",
bgSoft: "#f5f7fa",
bgMuted: "#f3f4f6",
font: "'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif",
mono: "'JetBrains Mono', ui-monospace, monospace",
};
// ---------- Hex grid background ---------------------------------------------
function HexPattern({ opacity = 0.06, stroke = "#071e47", id = "hex-bg" }) {
return (
);
}
// ---------- Logo (wordmark) --------------------------------------------------
function Logo({ color = "#071e47", size = 22 }) {
// Assurix uses a plain wordmark in the nav.
return (
Assurix
);
}
// ---------- BlockMark trustmark ---------------------------------------------
// Hex-shaped badge. For the canonical "Assurix" mark, renders the real
// PNG asset. For per-MSP badges, renders an SVG with the MSP's name
// slotted into the same template.
function BlockMark({ variant = "trusted", size = 200, name = "Assurix", verified = true, blockmarkId }) {
const isTrusted = variant === "trusted";
const lime = window.ASX.lime;
const teal = window.ASX.teal;
// Real asset aspect ratio: 2048x2563 ≈ 0.799 w/h → h = w * 1.2515
const svgW = size;
const svgH = size * 1.2515;
// Trusted tier — always the canonical PNG trustmark
if (isTrusted) {
return (
{blockmarkId && (
{blockmarkId}
)}
);
}
// On the Journey tier — use the canonical Journey image
return (
{blockmarkId && (
{blockmarkId}
)}
);
}
// --- (legacy SVG BlockMark — kept below in case we need the procedural variant) ---
function _BlockMarkSVG({ variant, size, svgW, svgH, verified, blockmarkId, lime, teal, isTrusted }) {
return (
{blockmarkId && (
{blockmarkId}
)}
);
}
function truncateName(name, max) {
if (!name) return "";
if (name.length <= max) return name;
return name.slice(0, max - 1) + "…";
}
// Baseline for the MSP name — shifts up slightly when font is large so it
// doesn't collide with the silver band.
function nameBaseline(name) {
const n = (name || "").length;
if (n <= 9) return 108;
if (n <= 13) return 110;
return 112;
}
// Scale the MSP name to fit inside the hex body (~180 usable px of width).
function nameFontSize(name) {
const n = (name || "").length;
if (n <= 6) return 40;
if (n <= 8) return 34;
if (n <= 10) return 28;
if (n <= 13) return 24;
if (n <= 16) return 20;
if (n <= 19) return 17;
return 15;
}
// ---------- Status chip -----------------------------------------------------
// Mirrors the real product statuses: ACTIVE, AT_RISK, SUSPENDED, EXPIRED,
// plus ON_JOURNEY for MSPs still being onboarded.
function StatusBadge({ status, small = false }) {
const map = {
trusted: { bg:"#dcfce7", fg:"#166534", dot:"#16a34a", label:"Verified Active" },
journey: { bg:"#f4fbe0", fg:"#3f5f07", dot:"#84a516", label:"On the Journey" },
at_risk: { bg:"#fef3c7", fg:"#854d0e", dot:"#d97706", label:"At Risk" },
suspended: { bg:"#fee2e2", fg:"#991b1b", dot:"#dc2626", label:"Suspended" },
expired: { bg:"#f3f4f6", fg:"#4b5563", dot:"#9ca3af", label:"Expired" },
};
const s = map[status] || map.trusted;
return (
{s.label}
);
}
// Back-compat export (older files may still reference StageChip)
const StageChip = StatusBadge;
// ---------- Founding 50 badge ----------------------------------------------
// Small lime chip with a star glyph. Native title tooltip on hover.
function FoundingBadge({ small = false }) {
return (
Founding 50
);
}
// ---------- Misc icons ------------------------------------------------------
function Icon({ name, size = 16, color = "currentColor", strokeWidth = 1.8 }) {
const p = { width:size, height:size, viewBox:"0 0 24 24", fill:"none", stroke:color, strokeWidth, strokeLinecap:"round", strokeLinejoin:"round"};
switch (name) {
case "search": return ();
case "arrow-right": return ();
case "arrow-up-right": return ();
case "check": return ();
case "shield": return ();
case "map-pin": return ();
case "users": return ();
case "building": return ();
case "calendar": return ();
case "phone": return ();
case "mail": return ();
case "globe": return ();
case "filter": return ();
case "grid": return ();
case "list": return ();
case "map": return ();
case "chevron-down": return ();
case "chevron-right": return ();
case "x": return ();
case "sliders": return ();
case "external": return ();
case "copy": return ();
case "trending-up": return ();
case "zap": return ();
case "share": return ();
case "alert": return ();
case "help": return ();
default: return null;
}
}
// ---------- Logo placeholder for MSP ----------------------------------------
function MspMark({ msp, size = 44, rounded = 10 }) {
const initials = msp.name.split(" ").map(w=>w[0]).slice(0,2).join("");
return (