// strikeX — Core loop diagram (light). Inlined from guidelines/wheel-core-light.card.html
// so the CC/CSP center loop renders inside the Strategy section's Wheel card. Modeled on
// WheelGraph: a fading comet beam runs every edge (6 layered #co-beamPaths dashes), and each
// block is hover-shiny in its product-palette color, swapping its label to the product token
// (e.g. CALL_P) on hover; the T/Cash state nodes shine neutral and keep their label. Glow id
// namespaced (co-glow) so it never collides with the other inline SVGs. Exposes window.CoreLoop.
// Block (keyed by its rect's x) → { palette p, token t shown on hover }. The two combined
// legs run warm (CALL_P) and cold (PUT_P); the T/Cash state circles + arrows shine neutral.
const CO_NODES = {
"414": { p: "flame", t: "call_p" }, // T − CALL_S0
"793": { p: "cobalt", t: "put_p" }, // Cash − PUT_S0
};
const CORE_LOOP_SVG = `
`;
function CoreLoop({ style }) {
const ref = React.useRef(null);
// Tag each block with its palette class (CSS :hover shine) and, on hover, crossfade its
// label to the product token — reverting on mouse-leave. Mirrors WheelGraph.
React.useLayoutEffect(() => {
const root = ref.current && ref.current.querySelector("svg");
if (!root) return;
const texts = Array.from(root.querySelectorAll("text"));
const labelInside = (r) => {
const x = +r.getAttribute("x"), y = +r.getAttribute("y");
const w = +r.getAttribute("width"), h = +r.getAttribute("height");
return texts.find((t) => {
const tx = +t.getAttribute("x"), ty = +t.getAttribute("y");
return tx >= x && tx <= x + w && ty >= y && ty <= y + h;
});
};
const cleanups = [];
root.querySelectorAll("rect").forEach((r) => {
const node = CO_NODES[r.getAttribute("x")];
if (!node) return;
r.classList.add("hv-node", "hv-" + node.p);
const label = labelInside(r);
if (!label) return;
const original = label.innerHTML;
label.style.transition = "opacity .14s ease";
let timer;
const swap = (apply) => {
clearTimeout(timer);
label.style.opacity = "0";
timer = setTimeout(() => { apply(); label.style.opacity = "1"; }, 140);
};
const enter = () => swap(() => { label.textContent = node.t.toUpperCase(); });
const leave = () => swap(() => { label.innerHTML = original; });
r.addEventListener("mouseenter", enter);
r.addEventListener("mouseleave", leave);
cleanups.push(() => { clearTimeout(timer); r.removeEventListener("mouseenter", enter); r.removeEventListener("mouseleave", leave); });
});
// T & Cash state nodes (circles + entry arrows) shine neutral; their labels stay.
root.querySelectorAll("ellipse, polygon").forEach((el) => el.classList.add("hv-node", "hv-neutral"));
return () => cleanups.forEach((fn) => fn());
}, []);
return (
);
}
window.CoreLoop = CoreLoop;