/* =====================================================
Betting Tracker — shared brand primitives (React)
Renders the Doinp "Soft Dark" markup: .glass panels,
tactile pills, inset wells, hairline tables.
Exports to window for the other babel scripts.
===================================================== */
const { useState, useEffect, useRef, useCallback, createContext, useContext } = React;
/* ---- context: state, dispatch, lang, t ---- */
const TrackerCtx = createContext(null);
const useTracker = () => useContext(TrackerCtx);
/* ---- Portal: render overlays at so position:fixed is always
viewport-relative (never trapped by an ancestor's stacking/containing block) ---- */
function Portal({ children }) {
return ReactDOM.createPortal(children, document.body);
}
/* ---- icons: 24-box, 1.8 stroke, round, currentColor ---- */
const ICONS = {
dashboard: "M4 13h7V4H4v9Zm9 7h7V4h-7v16ZM4 20h7v-5H4v5Z",
bets: "M4 6h16M4 12h16M4 18h10",
bankroll: "M3 7h18v10H3zM3 11h18M7 15h2",
analytics: "M4 19V5m0 14h16M8 15l3-4 3 3 4-6",
plus: "M12 5v14M5 12h14",
close: "M6 6l12 12M18 6L6 18",
save: "M5 4h11l3 3v13H5zM8 4v5h7V4M8 20v-6h8v6",
download: "M12 4v11m0 0l-4-4m4 4l4-4M5 20h14",
upload: "M12 20V9m0 0l-4 4m4-4l4 4M5 4h14",
file: "M6 3h8l4 4v14H6zM14 3v4h4",
filter: "M4 5h16l-6 8v5l-4 2v-7z",
search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM20 20l-4-4",
edit: "M4 20h4l10-10-4-4L4 16v4ZM14 6l4 4",
trash: "M5 7h14M9 7V4h6v3M6 7l1 13h10l1-13",
shield: "M12 3l8 3v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z",
lock: "M6 11h12v9H6zM8 11V8a4 4 0 0 1 8 0v3",
wifi: "M2 8.5a15 15 0 0 1 20 0M5 12a10 10 0 0 1 14 0M8.5 15.5a5 5 0 0 1 7 0M12 19h.01",
arrowRight: "M5 12h14M13 6l6 6-6 6",
check: "M5 12l5 5L20 6",
chevron: "M9 6l6 6-6 6",
wallet: "M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1V7Zm0 0l0-1a1 1 0 0 1 1-1h11M17 13h.01",
chart: "M4 20V4M4 20h16M9 16l3-5 3 2 4-7",
target: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
layers: "M12 3l9 5-9 5-9-5 9-5ZM3 13l9 5 9-5",
sliders: "M4 8h9M17 8h3M4 16h3M11 16h9M15 5v6M9 13v6",
copy: "M9 9h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1ZM5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1",
history: "M3 12a9 9 0 1 0 3-6.7L3 8M3 4v4h4M12 8v4l3 2",
gear: "M12 9.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6ZM10.7 3h2.6l.35 2.3 1.6.93 2.16-.9 1.84 1.84-1.2 1.98.6 1.72 2.35.43v2.6l-2.35.43-.6 1.72 1.2 1.98-1.84 1.84-2.16-.9-1.6.93-.35 2.3h-2.6l-.35-2.3-1.6-.93-2.16.9-1.84-1.84 1.2-1.98-.6-1.72L2 13.3v-2.6l2.35-.43.6-1.72-1.2-1.98 1.84-1.84 2.16.9 1.6-.93z"
};
function Icon({ name, size = 18, style }) {
const d = ICONS[name] || "";
return (
);
}
/* ---- Panel (.glass) ---- */
function Panel({ children, className = "", style, pad = 24, hover = false }) {
return (
{children}
);
}
/* ---- KPI stat ---- */
function Stat({ label, value, tone, sub, big }) {
const cls = tone === "pos" ? "is-pos" : tone === "neg" ? "is-neg" : "";
return (
{label}
{value}
{sub != null &&
{sub}
}
);
}
/* ---- eyebrow / section head ---- */
function SectionHead({ title, sub, right }) {
return (
);
}
/* ---- Tag chip ---- */
function Tag({ children, tone }) {
return {children};
}
/* ---- Result badge ---- */
function ResultBadge({ result, t }) {
const tone = (result === "won" || result === "half-won") ? "pos"
: (result === "lost" || result === "half-lost") ? "neg"
: result === "pending" ? "wait"
: result === "cashout" ? "cash" : "mute";
return {t ? t("res." + result) : result};
}
/* ---- Segmented control ---- */
function Segmented({ options, value, onChange, size }) {
return (
{options.map((o) => (
))}
);
}
/* ---- Toggle ---- */
function Toggle({ checked, onChange, label }) {
return (
);
}
/* ---- Buttons ---- */
function Btn({ children, variant = "ghost", icon, onClick, type = "button", disabled, className = "", size }) {
return (
);
}
/* ---- Form fields ---- */
function Field({ label, hint, children, span }) {
return (
);
}
function Input(props) {
return ;
}
function Select({ value, onChange, options, placeholder }) {
return (
);
}
/* ---- Modal (centered dialog) ---- */
function Modal({ open, onClose, title, children, footer, width = 520 }) {
useEffect(() => {
if (!open) return;
const h = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
{title && (
{title}
)}
{children}
{footer &&
{footer}
}
);
}
/* ---- Drawer (right slide-in, for the bet form) ---- */
function Drawer({ open, onClose, title, children, footer }) {
useEffect(() => {
if (!open) return;
const h = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [open, onClose]);
return (
);
}
/* ---- Empty state ---- */
function EmptyState({ icon = "bets", title, sub, action }) {
return (
{title}
{sub &&
{sub}
}
{action &&
{action}
}
);
}
/* ---- striped placeholder (DS guidance for imagery) ---- */
function Placeholder({ label, height = 120 }) {
return (
{label}
);
}
Object.assign(window, {
TrackerCtx, useTracker, Portal, Icon, Panel, Stat, SectionHead, Tag, ResultBadge,
Segmented, Toggle, Btn, Field, Input, Select, Modal, Drawer, EmptyState, Placeholder
});