Trace three return rules to one need and inspect the transition that would violate the reference requirement

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Does the transition preserve the reference?</title><style>*{box-sizing:border-box}body{margin:0;background:#edf0f8;color:#2c3350;font:16px/1.6 system-ui,sans-serif}main{max-width:940px;margin:auto;padding:24px}h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.2}h2{font-size:1.35rem}.eyebrow{font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#5f6792}.panel{padding:22px;border:1px solid #c7cde3;border-radius:10px;background:#fff;margin:18px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}button,input,textarea{font:inherit}button{padding:10px 14px;min-height:44px;cursor:pointer;border:1px solid #707eaf;background:white;color:#394b83;border-radius:6px}button[aria-pressed=true],button.primary{background:#4d5e99;color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b0621a;outline-offset:3px}.notice{padding:14px;background:#ecedfc;border-left:4px solid #7582c0}dt{font-weight:750;margin-top:12px}dd{margin:4px 0}.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.flow div{background:#eef0fa;padding:14px;border-radius:6px}code{overflow-wrap:anywhere}label{display:block;font-weight:650;margin-top:16px}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #8d97b7;border-radius:6px;margin-top:5px}textarea{min-height:90px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:16px}.flow{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">Need → transition → data consistency</p><h1>Does the transition preserve the reference?</h1><p>Original fictional equipment-return register. This page walks through specified model outcomes before implementation; it is not a production test or UAT result.</p><section class="panel"><h2>The originating need and invariant</h2><p><strong>N1:</strong> Distinguish outstanding items from returned items.</p><p><strong>Fields:</strong> <code>itemID</code>, <code>status</code>, <code>returnReference</code>. States: CheckedOut or Returned.</p><p class="notice"><strong>Invariant:</strong> Returned requires a returnReference.</p><div class="actions"><button type="button" id="r1" aria-pressed="true">R1 · New return</button><button type="button" id="r2" aria-pressed="false">R2 · Repeated return</button><button type="button" id="r3" aria-pressed="false">R3 · Unknown item</button></div><h3 id="ruleTitle">R1 · Record the new return</h3><dl><dt>Trace to need</dt><dd>N1 — distinguish outstanding and returned items.</dd><dt>Input and current state</dt><dd id="inputState">Known item, CheckedOut; valid event supplies a nonempty return reference.</dd><dt>Processing and output</dt><dd id="processing">Record the supplied reference and report the return outcome.</dd><dt>Next state and data</dt><dd id="nextState">Returned, with the supplied reference recorded.</dd></dl><p>Message labels describe required outcomes; exact wording is unagreed. Missing-reference behavior for a new return remains an open requirements question.</p></section>
<section class="panel"><h2>Three fixed specification walkthroughs</h2><div class="actions"><button type="button" id="f1">F1 · E17</button><button type="button" id="f2">F2 · E18</button><button type="button" id="f3">F3 · E99</button></div><div class="flow"><div><strong>Before / input</strong><p id="before">E17 · CheckedOut · no reference. Event supplies RET-01.</p></div><div><strong>Applicable rule</strong><p id="fixtureRule">R1 from N1.</p></div><div><strong>Specified outcome</strong><p id="outcome">E17 · Returned · RET-01. Invariant preserved in the specified outcome.</p></div></div><p id="walkNotice" role="status">Expected model outcomes only. No application has been executed.</p></section>
<section class="panel"><h2>Compare R1's data effect</h2><div class="actions"><button type="button" id="incomplete">Incomplete R1</button><button type="button" id="complete">Completed R1</button></div><p id="comparison" class="notice">F1 comparison: incomplete R1 changes status to Returned but does not record RET-01. The description violates its own Returned-requires-reference invariant.</p></section>
<section class="panel"><h2>Draft a traceable requirement</h2><label for="need">Originating need · required</label><input id="need"><label for="rule">Input, state, processing, and output rule · required</label><textarea id="rule"></textarea><label for="data">Data fields and invariant</label><textarea id="data"></textarea><label for="notes">Verification example and open behavior</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build" class="primary">Build requirement record</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">State what must happen and which data condition must remain true.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear the practice requirement?</p><button type="button" id="cancel">Keep requirement</button> <button type="button" id="confirm">Clear requirement</button></div></section></main><script>
'use strict';const $=s=>document.querySelector(s);const rules={r1:['R1 · Record the new return','Known item, CheckedOut; valid event supplies a nonempty return reference.','Record the supplied reference and report the return outcome.','Returned, with the supplied reference recorded.'],r2:['R2 · Preserve the original return','Known item already Returned; a duplicate return event arrives.','Report Already returned; do not overwrite the original reference.','Returned, original reference unchanged.'],r3:['R3 · Do not create an unknown item','Unknown item ID in a return event.','Report an unknown-item outcome; do not create a returned item.','No new item or returned record.']};for(const id of Object.keys(rules))$('#'+id).addEventListener('click',()=>{['ruleTitle','inputState','processing','nextState'].forEach((key,n)=>$('#'+key).textContent=rules[id][n]);for(const key of Object.keys(rules))$('#'+key).setAttribute('aria-pressed',String(key===id))});const fixtures={f1:['E17 · CheckedOut · no reference. Event supplies RET-01.','R1 from N1.','E17 · Returned · RET-01. Invariant preserved in the specified outcome.'],f2:['E18 · Returned · RET-00. Repeated event offers RET-02.','R2 from N1.','Already returned. E18 remains Returned with original RET-00; RET-02 does not replace it.'],f3:['E99 is absent. Return event offers RET-03.','R3 from N1.','Unknown item. E99 is not created; no returned record or reference is added.']};for(const id of Object.keys(fixtures))$('#'+id).addEventListener('click',()=>{['before','fixtureRule','outcome'].forEach((key,n)=>$('#'+key).textContent=fixtures[id][n]);$('#walkNotice').textContent='Walkthrough '+id.toUpperCase()+': specified model outcome, not an actual product test.'});$('#incomplete').addEventListener('click',()=>{$('#comparison').textContent='F1 comparison: incomplete R1 changes status to Returned but does not record RET-01. The description violates its own Returned-requires-reference invariant.'});$('#complete').addEventListener('click',()=>{$('#comparison').textContent='F1 comparison: completed R1 records RET-01 together with Returned status. This resolves the specification inconsistency; it does not prove an implementation passed. Missing-reference behavior remains open.'});const ids=['need','rule','data','notes'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Requirement record is stale; build again.':'Requirement entries changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['need','Originating need'],['rule','Input/state/process/output rule']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='REQUIREMENT RECORD — not an implementation test\nNeed: '+$('#need').value+'\nRule: '+$('#rule').value+'\nData/invariant: '+($('#data').value||'To specify')+'\nVerification/open behavior: '+($('#notes').value||'To define');$('#output').hidden=false;$('#notice').textContent='Requirement record built. Check consistency with the data invariant; no implementation approval.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep the requirement.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Requirement entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice requirement cleared. N1, R1–R3, and fixed fixtures remain unchanged.'});
</script></body></html>