// StrikeSimple — Split diagrams: the wheel's two entry splits, cut out of the wheel
// (assets/diagrams/wheel-state-graph.svg) at its own coordinates, for the Primitives section's
// Wing and Anchor. CallSplit: T splits into T − CALL S0 (the Upside Anchor) and +CALL S0 (the
// Upside Wing). PutSplit: Cash splits into Cash − PUT S0 (the Downside Anchor) and +PUT S0 (the
// Downside Wing). The edges that run on into the rest of the wheel are kept as short stubs that
// fade out (a mask over the edges and beams), and the comet beams run as in the wheel. Each block
// is hover-shiny in its product colour and swaps its label to the product token, as in the wheel;
// `highlight` lists the blocks (by id, see SPLIT_NODES) to light up in the beam's lavender. Dark
// only, like the wheel. Exposes window.CallSplit and window.PutSplit.
// Block (keyed by its rect's x, as in WheelGraph) → { palette p, token t shown on hover, id }.
const SPLIT_NODES = {
"289": { p: "sun", t: "call_n", id: "call-s0" }, // +CALL S0
"414": { p: "flame", t: "call_p", id: "t-call-s0" }, // T − CALL S0
"793": { p: "cobalt", t: "put_p", id: "cash-put-s0" }, // Cash − PUT S0
"888": { p: "azure", t: "put_n", id: "put-s0" }, // +PUT S0
};
// Each split: its window onto the wheel (`box`, the viewBox — both the same size, so switching
// between them doesn't move anything), its `edges` (the wheel's paths, whole, so the beams keep the
// wheel's pace), the mask that shows them — `keep` (x, y, w, h) shown in full, `stubs` (x, y, w, h,
// direction) fading out in that direction — and its arrow and blocks, as the wheel draws them.
const SPLITS = {
call: {
label: "T splits into T − CALL S0 and +CALL S0",
box: [121, 318, 556, 312],
edges: [
"M255,540 L414,540", // T → T − CALL S0
"M172,520 L172,403 L289,403", // T → +CALL S0
"M436,678 L172,678 L172,560", // stubs: into T, from the wheel's T
"M380,374 L380,299", // +CALL S0 → CALL S0 − CALL S1
"M467,403 L551,403", // +CALL S0 → +CALL S1
"M620,540 L816,540", // T − CALL S0 → Cash
"M520,573 L520,635", // T − CALL S0 → T
],
keep: [[248, 528, 174, 24], [160, 391, 136, 133]],
stubs: [[158, 560, 28, 48, "down"], [366, 326, 28, 48, "up"], [471, 389, 48, 28, "right"], [620, 526, 48, 28, "right"], [506, 574, 28, 48, "down"]],
body: `
T
+CALLS0
T − CALLS0
`,
},
put: {
label: "Cash splits into Cash − PUT S0 and +PUT S0",
box: [732, 589, 556, 312],
edges: [
"M1150,678 L1011,678", // Cash → Cash − PUT S0
"M1228,700 L1228,815 L1056,815", // Cash → +PUT S0
"M978,540 L1228,540 L1228,656", // stubs: into Cash, from the wheel's Cash
"M900,645 L900,581", // Cash − PUT S0 → Cash
"M793,678 L606,678", // Cash − PUT S0 → T
"M888,815 L804,815", // +PUT S0 → +PUT S1
"M970,844 L970,919", // +PUT S0 → PUT S0 − PUT S1
],
keep: [[1004, 666, 153, 24], [1049, 696, 191, 131]],
stubs: [[1214, 608, 28, 48, "up"], [886, 597, 28, 48, "up"], [745, 664, 48, 28, "left"], [840, 801, 48, 28, "left"], [956, 844, 28, 48, "down"]],
body: `
Cash
Cash − PUTS0
+PUTS0
`,
},
};
// A stub's gradient (x1 y1 x2 y2, in its rect): opaque where it leaves its block, clear at the end.
const SPLIT_FADES = { up: "0 1 0 0", down: "0 0 0 1", left: "1 0 0 0", right: "0 0 1 0" };
// The wheel's comet beam: 6 layered dashes sharing one moving head (see the wheel's SVG).
const SPLIT_BEAMS = [28, 21, 15, 10, 6, 3];
// The SVG for split `s`, its ids prefixed with `uid` (two can be mounted at once while one fades out).
const splitSvg = (s, uid) => {
const [bx, by, bw, bh] = s.box;
const rect = ([x, y, w, h], fill) => ``;
const paths = (extra) => s.edges.map((d) => ``).join("");
return `
`;
};
let splitSeq = 0;
function SplitGraph({ side, style, highlight }) {
const ref = React.useRef(null);
const [svg] = React.useState(() => splitSvg(SPLITS[side], `sg${++splitSeq}`));
const hl = (highlight || []).join(" ");
// 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:not(mask rect)").forEach((r) => {
const node = SPLIT_NODES[r.getAttribute("x")];
if (!node) return;
r.classList.add("sg-node", "sg-" + node.p);
r.dataset.node = node.id;
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: the entry arrow shines neutral; its label stays.
root.querySelectorAll("polygon").forEach((el) => el.classList.add("sg-node", "sg-neutral"));
return () => cleanups.forEach((fn) => fn());
}, []);
// Light up the `highlight`ed blocks.
React.useLayoutEffect(() => {
const root = ref.current && ref.current.querySelector("svg");
if (!root) return;
const ids = hl.split(" ");
root.querySelectorAll("rect[data-node]").forEach((r) => r.classList.toggle("is-hl", ids.includes(r.dataset.node)));
}, [hl]);
return (
);
}
const CallSplit = (props) => ;
const PutSplit = (props) => ;
window.CallSplit = CallSplit;
window.PutSplit = PutSplit;