/* tb-approach-b.jsx — Inline Annotations */
const { useState, useRef, useEffect } = React;
const {
TB_CODE, TB_STEPS, REF_COLORS, syntaxHL, renderDesc,
TBStepControls, secLabelStyle,
} = window;
/* ── Annotation Callout ── */
function AnnotationCallout({ annotation, evalSteps, lineY }) {
if (!annotation && !evalSteps) return null;
return (
{evalSteps ? (
{evalSteps.map((s, i) => (
{i > 0 && →}
{s}
))}
) : (
{annotation}
)}
);
}
/* ── Memory Chip Bar ── */
function MemoryChipBar({ stepData, style }) {
const { stack, heap } = stepData;
return (
Memory
{stack.length === 0 && (
(empty)
)}
{stack.map(v => (
{v.name}
=
{v.ref ? (
) : (
{v.value}
)}
))}
{heap.map(obj => {
const rc = REF_COLORS[obj.id] || {};
return (
{Array.isArray(obj.display)
? `[${obj.display.map((v, i) =>
obj.changed?.includes(i) ? `*${v}*` : v
).join(', ')}]`
: obj.display}
);
})}
);
}
/* ── Approach B: Code + Inline Annotations ── */
function ApproachB() {
const [step, setStep] = useState(0);
const maxStep = TB_STEPS.length - 1;
const s = TB_STEPS[step];
const LH = 21;
/* Annotation data per line */
const annotations = {
0: step === 1 ? 'a ← 10 (value type)' : null,
1: step === 2 ? null : null, // uses eval chain instead
2: step === 3 ? 'msg → heap ref' : null,
3: step === 4 ? 'arr → heap ref' : null,
4: step === 5 ? null : null, // uses eval chain instead
};
return (
{/* Description bar */}
Step {step}
{renderDesc(s.desc)}
{/* Code + Annotations area */}
{/* Code */}
Program.cs
{TB_CODE.map((line, i) => {
const isActive = i === s.line;
const isFuture = s.line >= 0 && i > s.line;
return (
{i + 1}
{isActive && (
◀
)}
);
})}
{/* Annotation panel */}
{/* Active annotation */}
{s.line >= 0 && (
{s.eval ? (
Evaluation
{s.eval.map((e, i) => (
{i > 0 && →}
{e}
))}
) : annotations[s.line] ? (
{annotations[s.line]}
) : (
{s.stack.find(v => v.isNew) ? (
{s.stack.find(v => v.isNew).name}
{' added to stack'}
) : 'Executing...'}
)}
)}
{s.line < 0 && (
Step through code to see annotations
)}
{/* Bottom: compact memory + controls */}