// strikeX — Put ladder diagram (light). Inlined from guidelines/wheel-put-light.card.html
// so the BPSR put-rung ladder renders inside the Strategy section's put cards (Cash-Secured
// Put, Bull Put Spread). Modeled on WheelGraph: a fading comet beam runs every edge (6 layered
// #pl-beamPaths dashes), and each block is hover-shiny in its product-palette color, swapping
// its label to the product token (e.g. PUT_N) on hover. Glow id namespaced (pl-glow) so it
// never collides with the other inline SVGs. Exposes window.PutLadder.
// Block (keyed by its rect's x) → { palette p, token t shown on hover }. PUT legs run cold.
const PL_NODES = {
"638": { p: "azure", t: "put_n" }, "888": { p: "azure", t: "put_n" }, // +PUT legs
"268": { p: "azure", t: "put_n" },
"853": { p: "indigo", t: "put_np" }, "233": { p: "indigo", t: "put_np" }, // PUT−PUT spreads
};
const PUT_LADDER_SVG = `
`;
function PutLadder({ 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 = PL_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); });
});
return () => cleanups.forEach((fn) => fn());
}, []);
return (
);
}
window.PutLadder = PutLadder;