npm - @litfamily/litcodex - Versions diffs - 1.0.0 - Mend

@litfamily/litcodex 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1252) hide show

package/marketplace/plugins/litcodex/skills/lit-comprehend/assets/explainer-scaffold.html ADDED Viewed

@@ -0,0 +1,231 @@
+<!doctype html>
+<!--
+  LitCodex comprehend — explainer scaffold.
+  Copy this file, replace __TITLE__, __SUBTITLE__, __TOC__ and __CONTENT__.
+  Everything here is inline on purpose: the artifact must open with no network.
+  Do not add external <script src>, <link rel=stylesheet>, @import, or fetch().
+-->
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__TITLE__</title>
+<style>
+  :root{
+    --bg:#fbfaf8; --fg:#1c1b19; --muted:#6b6862; --rule:#e2ded7;
+    --accent:#8a5a2b; --accent-bg:#f5efe6;
+    --ok:#2f6b3d; --ok-bg:#eaf3ec; --warn:#8a5a2b; --warn-bg:#faf1e4;
+    --bad:#9c3328; --bad-bg:#f9ebe9; --code-bg:#f3f1ec;
+    --add:#e6f2e8; --del:#fbeceb;
+  }
+  @media (prefers-color-scheme:dark){
+    :root{
+      --bg:#171614; --fg:#e8e5df; --muted:#9d9890; --rule:#33302b;
+      --accent:#d9a066; --accent-bg:#241f18;
+      --ok:#7fbf8d; --ok-bg:#18241a; --warn:#d9a066; --warn-bg:#241f18;
+      --bad:#e08b80; --bad-bg:#2a1a18; --code-bg:#201e1b;
+      --add:#1a2a1d; --del:#2a1b1a;
+    }
+  }
+  *{box-sizing:border-box}
+  body{
+    margin:0; background:var(--bg); color:var(--fg);
+    font:16.5px/1.72 -apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",
+      "Noto Sans KR",Roboto,"Helvetica Neue",Arial,sans-serif;
+    word-break:keep-all; overflow-wrap:break-word;
+  }
+  .wrap{max-width:47rem; margin:0 auto; padding:3rem 1.25rem 6rem}
+  header.doc{border-bottom:2px solid var(--fg); padding-bottom:1.25rem; margin-bottom:2rem}
+  header.doc h1{font-size:1.9rem; line-height:1.3; margin:0 0 .5rem; letter-spacing:-.02em}
+  header.doc .sub{color:var(--muted); font-size:.95rem; margin:0}
+  h2{
+    font-size:1.35rem; margin:3.5rem 0 1rem; padding-top:.6rem;
+    border-top:1px solid var(--rule); letter-spacing:-.01em;
+  }
+  h3{font-size:1.06rem; margin:2rem 0 .6rem; color:var(--fg)}
+  p{margin:0 0 1rem}
+  a{color:var(--accent)}
+  ul,ol{margin:0 0 1rem; padding-left:1.3rem}
+  li{margin:.3rem 0}
+  small,.muted{color:var(--muted); font-size:.9rem}
+  /* table of contents */
+  nav.toc{
+    background:var(--accent-bg); border:1px solid var(--rule);
+    border-radius:.5rem; padding:1rem 1.25rem; margin-bottom:2.5rem;
+  }
+  nav.toc strong{display:block; font-size:.8rem; letter-spacing:.09em;
+    text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
+  nav.toc ol{margin:0; padding-left:1.2rem}
+  nav.toc a{text-decoration:none}
+  nav.toc a:hover{text-decoration:underline}
+  /* code */
+  pre{
+    background:var(--code-bg); border:1px solid var(--rule); border-radius:.4rem;
+    padding:.85rem 1rem; overflow-x:auto; white-space:pre;
+    font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+    margin:0 0 1rem;
+  }
+  pre[data-src]::before{
+    content:attr(data-src); display:block; color:var(--muted);
+    font-size:11.5px; letter-spacing:.04em; margin-bottom:.5rem;
+    border-bottom:1px solid var(--rule); padding-bottom:.35rem;
+  }
+  pre .add{background:var(--add); display:block}
+  pre .del{background:var(--del); display:block; opacity:.8}
+  code{
+    background:var(--code-bg); border-radius:.25rem; padding:.1em .35em;
+    font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+  }
+  pre code{background:none; padding:0; font-size:inherit}
+  /* callouts */
+  .note{
+    border-left:3px solid var(--accent); background:var(--accent-bg);
+    padding:.85rem 1rem; border-radius:0 .4rem .4rem 0; margin:0 0 1.25rem;
+  }
+  .note.ok{border-color:var(--ok); background:var(--ok-bg)}
+  .note.warn{border-color:var(--warn); background:var(--warn-bg)}
+  .note.bad{border-color:var(--bad); background:var(--bad-bg)}
+  .note .label{
+    display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
+    color:var(--muted); margin-bottom:.3rem; font-weight:600;
+  }
+  .note :last-child{margin-bottom:0}
+  .skippable{border-left:3px dashed var(--rule); padding-left:1rem; color:var(--muted)}
+  /* diagrams: pipeline / before-after / state */
+  figure{margin:1.5rem 0; padding:0}
+  figcaption{color:var(--muted); font-size:.87rem; margin-top:.6rem; text-align:center}
+  .pipe{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; justify-content:center}
+  .box{
+    border:1.5px solid var(--fg); border-radius:.4rem; padding:.5rem .75rem;
+    background:var(--bg); font-size:.87rem; text-align:center; min-width:5.5rem;
+  }
+  .box .t{font-weight:600; display:block}
+  .box .d{color:var(--muted); font-size:.78rem; display:block; margin-top:.15rem}
+  .box.hi{border-color:var(--accent); background:var(--accent-bg); border-width:2.5px}
+  .box.ghost{border-style:dashed; color:var(--muted)}
+  .arrow{color:var(--muted); font-size:1.15rem; padding:0 .1rem}
+  .ba{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
+  .ba .side{border:1px solid var(--rule); border-radius:.5rem; padding:.9rem}
+  .ba .side h4{margin:0 0 .6rem; font-size:.8rem; letter-spacing:.09em;
+    text-transform:uppercase; color:var(--muted)}
+  .ba .side.after{border-color:var(--accent)}
+  @media (max-width:33rem){ .ba{grid-template-columns:1fr} }
+  /* tables */
+  table{border-collapse:collapse; width:100%; margin:0 0 1.25rem; font-size:.92rem}
+  th,td{border:1px solid var(--rule); padding:.5rem .65rem; text-align:left; vertical-align:top}
+  th{background:var(--code-bg); font-size:.82rem; letter-spacing:.03em}
+  td code{font-size:12.5px}
+  .scroll-x{overflow-x:auto}
+  /* micro-world */
+  .world{
+    border:1.5px solid var(--accent); border-radius:.55rem;
+    background:var(--accent-bg); padding:1.1rem; margin:0 0 1.25rem;
+  }
+  .world .label{
+    display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
+    color:var(--muted); margin-bottom:.7rem; font-weight:600;
+  }
+  .world input[type=text],.world textarea,.world select{
+    width:100%; padding:.45rem .6rem; border:1px solid var(--rule); border-radius:.3rem;
+    background:var(--bg); color:var(--fg); font:13.5px ui-monospace,Menlo,monospace;
+  }
+  .world input[type=range]{width:100%; accent-color:var(--accent)}
+  .world .out{
+    background:var(--bg); border:1px solid var(--rule); border-radius:.3rem;
+    padding:.6rem .75rem; margin-top:.7rem; white-space:pre-wrap;
+    font:13px/1.6 ui-monospace,Menlo,monospace; min-height:2.4rem;
+  }
+  .world button{
+    background:var(--fg); color:var(--bg); border:0; border-radius:.3rem;
+    padding:.4rem .85rem; font-size:.86rem; cursor:pointer; margin-top:.55rem;
+  }
+  .world .row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
+  /* quiz */
+  .quiz-q{border:1px solid var(--rule); border-radius:.5rem; padding:1.1rem; margin:0 0 1.1rem}
+  .quiz-q .q{font-weight:600; margin:0 0 .8rem}
+  .quiz-q .q .n{color:var(--muted); font-weight:400; margin-right:.4rem}
+  .quiz-q .opt{
+    display:block; width:100%; text-align:left; background:var(--bg);
+    border:1px solid var(--rule); border-radius:.35rem; padding:.55rem .75rem;
+    margin:0 0 .45rem; font:inherit; font-size:.94rem; color:var(--fg); cursor:pointer;
+  }
+  .quiz-q .opt:hover{border-color:var(--accent)}
+  .quiz-q .opt.correct{border-color:var(--ok); background:var(--ok-bg)}
+  .quiz-q .opt.wrong{border-color:var(--bad); background:var(--bad-bg)}
+  .quiz-q .fb{
+    display:none; font-size:.9rem; padding:.6rem .75rem; border-radius:.35rem;
+    margin:0 0 .5rem; background:var(--code-bg); border-left:3px solid var(--rule);
+  }
+  .quiz-q .fb.show{display:block}
+  .quiz-q .fb.good{border-color:var(--ok)}
+  .quiz-q .fb.bad{border-color:var(--bad)}
+  .quiz-score{color:var(--muted); font-size:.9rem; margin-top:1rem}
+</style>
+</head>
+<body>
+<div class="wrap">
+<header class="doc">
+  <h1>__TITLE__</h1>
+  <p class="sub">__SUBTITLE__</p>
+</header>
+<nav class="toc">
+  <strong>목차</strong>
+  <ol>__TOC__</ol>
+</nav>
+__CONTENT__
+</div>
+<script>
+// Quiz engine. Each question is:
+//   <div class="quiz-q" data-answer="2">
+//     <p class="q"><span class="n">1.</span> ...</p>
+//     <button class="opt" data-i="0">…</button> …
+//     <div class="fb" data-i="0">…</div> …
+//   </div>
+// Every option needs a matching .fb. Feedback explains why, including for the
+// correct one — a wrong click is the most teachable moment in the document.
+(function () {
+  var answered = 0, correct = 0;
+  var qs = document.querySelectorAll('.quiz-q');
+  qs.forEach(function (q) {
+    var ans = parseInt(q.getAttribute('data-answer'), 10);
+    q.querySelectorAll('.opt').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var i = parseInt(btn.getAttribute('data-i'), 10);
+        var was = q.getAttribute('data-done') === '1';
+        var fb = q.querySelector('.fb[data-i="' + i + '"]');
+        q.querySelectorAll('.fb').forEach(function (f) { f.classList.remove('show'); });
+        if (fb) {
+          fb.classList.add('show');
+          fb.classList.toggle('good', i === ans);
+          fb.classList.toggle('bad', i !== ans);
+        }
+        btn.classList.toggle('correct', i === ans);
+        btn.classList.toggle('wrong', i !== ans);
+        if (!was) {
+          q.setAttribute('data-done', '1');
+          answered++;
+          if (i === ans) correct++;
+          var s = document.getElementById('quiz-score');
+          if (s) {
+            s.textContent = '— ' + answered + '/' + qs.length +
+              ' 응답, ' + correct + '개 정답. ' +
+              '틀린 문항이 바로 다시 볼 곳입니다.';
+          }
+        }
+      });
+    });
+  });
+})();
+</script>
+</body>
+</html>

package/marketplace/plugins/litcodex/skills/lit-comprehend/references/artifact-template.md ADDED Viewed

@@ -0,0 +1,211 @@
+# Artifact template — sections, diagrams, quiz markup
+Read this when composing the explainer. It pairs with
+`assets/explainer-scaffold.html`, which already contains the CSS, the quiz
+engine, and the diagram classes referenced below. Copy the scaffold, replace
+`__TITLE__`, `__SUBTITLE__`, `__TOC__`, and `__CONTENT__`, and write only the
+content — reinventing the boilerplate per invocation wastes tokens and produces
+a different-looking artifact every time.
+```bash
+SKILL_DIR="$(dirname "$0")/.."            # or the resolved skill path
+OUT=~/.litcodex/lit-comprehend/$(date +%F)-<slug>.html
+mkdir -p ~/.litcodex/lit-comprehend
+cp "$SKILL_DIR/assets/explainer-scaffold.html" "$OUT"
+# then edit $OUT, replacing the four placeholders
+```
+The TOC is an `<ol>` of `<li><a href="#s1">한눈에</a></li>` entries; give each
+`<h2>` a matching `id`.
+## Section contract
+Headers are byte-identical across every LitFamily harness. Keep the Korean
+header text exactly as written even when the body is English.
+### 1. 한눈에
+One tight paragraph, then a confidence line. The reader should be able to stop
+here and still be better off. Say what changed, why it was done, and what to
+look at first. Then a `.note` callout stating how much of this is verified:
+```html
+<div class="note ok">
+  <span class="label">신뢰도</span>
+  <p>동작 확인: 테스트 3건 통과 · 실제 실행 1건. 코드만 읽고 추론한 부분: 2건 (아래 확인 안 된 것 참고).</p>
+</div>
+```
+### 2. 이미 알고 있던 것
+The delta anchor. Restate, in the reader's own terms, the objective they set and
+the state the system was in when they last had a clear picture. Quote the
+objective from `goals.json` verbatim — it is literally their sentence.
+If the change required machinery the reader has genuinely not met, introduce it
+here inside `.skippable`, so someone who already knows it can move past without
+wondering what they missed:
+```html
+<div class="skippable">
+  <p><strong>배경 (이미 아는 내용이면 건너뛰세요)</strong> — …</p>
+</div>
+```
+### 3. 직관
+One subsection per theme. Essence before mechanism: the problem, one concrete
+piece of toy data moving through, and why the obvious alternative fails. Reuse
+the same toy data across the whole document.
+### 4. 바뀐 것
+The literate walkthrough, in conceptual order. Prose leads; each excerpt lands
+where the reader has just been given a reason to care.
+Every code block carries `data-src` so the verifier can confirm the quote is
+real. Add a line anchor when it helps the reader navigate:
+```html
+<pre data-src="src/ledger.ts:88-104">export function appendEvent(event: LedgerEvent) {
+  const line = JSON.stringify(event) + '\n';
+  <span class="add">const tmp = LEDGER + '.tmp';
+  writeFileSync(tmp, readIfExists(LEDGER) + line);
+  renameSync(tmp, LEDGER);</span>
+}</pre>
+```
+`.add` and `.del` shade inserted and removed lines. The verifier skips `.del`
+content when checking quotes against the current file, since deleted lines are
+correctly absent.
+### 5. 직접 만져보기
+The micro-world. See `references/micro-worlds.md`. Omit the section for purely
+structural changes rather than inventing a pointless widget.
+### 6. 확인 안 된 것
+The honesty ledger. Concrete lines, not hedging prose. Use `.note warn` or
+`.note bad` for anything that could bite:
+```html
+<div class="note warn">
+  <span class="label">실행되지 않음</span>
+  <p><code>plugins/litcodex/components/lit-loop/src/codex-hook.ts</code>의 새 분기는
+     작성되었지만 이번 세션에서 한 번도 실행되지 않았습니다. 라우트가 실제로 닿는지 확인 전.</p>
+</div>
+```
+### 7. 증거
+A table mapping claim to proof. Wrap it in `.scroll-x` so it never forces the
+page to scroll sideways.
+```html
+<div class="scroll-x"><table>
+  <tr><th>주장</th><th>근거</th><th>확인 방법</th><th>결과</th></tr>
+  <tr>
+    <td>원장이 중간 크래시에도 손상되지 않음</td>
+    <td><code>test/ledger-atomic.test.ts</code></td>
+    <td><code>npm run test -- ledger-atomic</code></td>
+    <td>3 pass</td>
+  </tr>
+</table></div>
+```
+A row whose 결과 column would be "미확인" belongs in 확인 안 된 것 instead.
+### 8. 퀴즈
+Five questions (three for a small change). Open with one sentence framing it as
+a throttle, not a grade, and include the score element the engine updates:
+```html
+<div class="quiz-q" data-answer="2">
+  <p class="q"><span class="n">1.</span> 원장 쓰기가 rename 기반으로 바뀐 뒤,
+     쓰기 도중 프로세스가 죽으면 <code>ledger.jsonl</code>은 어떤 상태인가?</p>
+  <button class="opt" data-i="0">마지막 줄이 잘린 채 남는다</button>
+  <button class="opt" data-i="1">빈 파일이 된다</button>
+  <button class="opt" data-i="2">직전 상태 그대로 남는다</button>
+  <button class="opt" data-i="3">tmp 파일과 함께 병합된다</button>
+  <div class="fb" data-i="0">이전 구현의 동작입니다. append 중 죽으면 부분 줄이 남았고, 그게 이 변경의 이유입니다.</div>
+  <div class="fb" data-i="1">쓰기는 tmp에서 일어나므로 원본은 비워지지 않습니다.</div>
+  <div class="fb" data-i="2">정답입니다. rename은 원자적이라 성공 아니면 무변경 둘 중 하나입니다.</div>
+  <div class="fb" data-i="3">병합 로직은 없습니다. tmp는 고아로 남고 원본은 그대로입니다.</div>
+</div>
+<p class="quiz-score" id="quiz-score">— 문항을 눌러 확인하세요.</p>
+```
+Two tells to design out:
+- **위치** — vary the correct slot; never three in a row in the same position.
+  The verifier fails the artifact for this.
+- **길이** — keep all options within a similar length. If the correct option is
+  the longest every time, that is the answer key.
+Every option gets feedback, including the correct one, and each explains *why*.
+### 9. 다음
+Three concrete entry points — a file to open, a question worth asking, a risk
+worth closing. Not "consider adding tests"; name the test.
+## Diagram families
+Pick two or three and reuse them. A new visual language per section costs the
+reader more than it teaches.
+**Pipeline** — stages and data flow. Always show the example datum changing.
+```html
+<figure>
+  <div class="pipe">
+    <div class="box"><span class="t">입력</span><span class="d">{id:7}</span></div>
+    <span class="arrow">→</span>
+    <div class="box hi"><span class="t">정규화</span><span class="d">신규</span></div>
+    <span class="arrow">→</span>
+    <div class="box"><span class="t">원장</span><span class="d">1줄 추가</span></div>
+  </div>
+  <figcaption>이벤트 하나가 원장에 닿기까지. 강조된 단계가 이번에 추가됐습니다.</figcaption>
+</figure>
+```
+**Before / after** — usually the right first diagram. Same structure twice, only
+the changed element highlighted.
+```html
+<figure>
+  <div class="ba">
+    <div class="side"><h4>이전</h4>
+      <div class="pipe"><div class="box">append</div><span class="arrow">→</span><div class="box ghost">부분 줄</div></div>
+    </div>
+    <div class="side after"><h4>이후</h4>
+      <div class="pipe"><div class="box">tmp 쓰기</div><span class="arrow">→</span><div class="box hi">rename</div></div>
+    </div>
+  </div>
+  <figcaption>실패 지점이 "쓰는 중"에서 "이름 바꾸기 직전"으로 옮겨갔습니다.</figcaption>
+</figure>
+```
+**State / timeline** — for anything ordering-sensitive.
+**Simplified UI** — a stripped rendering of what the user sees.
+Never ASCII art. It collapses on wrap, cannot carry color or emphasis, and the
+verifier fails on box-drawing characters outside code blocks.
+## Language
+Korean prose by default; English on `--en` or an English request. Headers stay
+Korean either way. Technical tokens — paths, commands, identifiers, versions,
+error strings — stay verbatim in every mode. Never translate an error message;
+the reader needs to be able to grep for it.
+## Markdown fallback
+`--md`, or any environment where HTML cannot be opened. Same nine headers as
+`##` sections. Quizzes become `<details>` blocks with the answer and all
+per-option feedback inside. Micro-worlds become a worked example that shows
+every intermediate value, since the reader cannot poke it. Keep `data-src`
+information as a path line above each fenced block so quotes stay traceable.

package/marketplace/plugins/litcodex/skills/lit-comprehend/references/micro-worlds.md ADDED Viewed

@@ -0,0 +1,190 @@
+# Micro-worlds — patterns for making behavior touchable
+A micro-world is a small interactive thing that exists for one reason: so the
+reader can develop a feel for a mechanism instead of taking your word for it.
+Reading "the retry backs off exponentially and gives up after five attempts"
+produces a sentence the reader can repeat. Watching the delays stretch out and
+the fifth one turn red produces an intuition they can reason with.
+Build it inside the scaffold's `.world` container; the CSS is already there.
+Keep it under about forty lines of JavaScript — this is a teaching aid, not a
+second implementation, and every line beyond the idea is a line that can drift
+from the real code.
+## Choosing a pattern
+| The thing you are teaching | Pattern |
+| --- | --- |
+| A function's input/output relationship | Faithful miniature |
+| Sensitivity to one number or threshold | Slider |
+| A multi-stage pipeline, or ordering | Step-through |
+| A behavior change, where old vs new is the point | Old/new toggle |
+| A pure rename, a move, a formatting pass | None — skip the section |
+## 1. Faithful miniature
+The strongest form. Port the changed logic to a few lines of JavaScript, wire it
+to an editable input, and let the reader poke it until it stops surprising them.
+```html
+<div class="world">
+  <span class="label">직접 해보기 — 슬러그 생성기</span>
+  <input type="text" id="mw-in" value="Ledger: atomic rename (v2)">
+  <div class="out" id="mw-out"></div>
+  <p class="muted" style="margin:.6rem 0 0">
+    실제 <code>slugify()</code>를 단순화한 모형입니다. 유니코드 정규화는 생략했습니다.
+  </p>
+</div>
+<script>
+(function () {
+  var inp = document.getElementById('mw-in'), out = document.getElementById('mw-out');
+  function slugify(s) {
+    return s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40);
+  }
+  function run() { out.textContent = slugify(inp.value) || '(빈 문자열)'; }
+  inp.addEventListener('input', run); run();
+})();
+</script>
+```
+The caption is not decoration. A reader who mistakes the miniature for the real
+implementation will later be confident about behavior that does not exist, which
+is worse than the confusion you started with. Always name what you simplified.
+## 2. Slider
+For a threshold, a timeout, a batch size — any number where the interesting
+thing is how output responds as it moves.
+```html
+<div class="world">
+  <span class="label">직접 해보기 — 재시도 백오프</span>
+  <div class="row">
+    <label for="mw-n">시도 횟수</label>
+    <input type="range" id="mw-n" min="1" max="8" value="5" style="flex:1">
+    <output id="mw-n-v">5</output>
+  </div>
+  <div class="out" id="mw-delays"></div>
+</div>
+<script>
+(function () {
+  var n = document.getElementById('mw-n'), v = document.getElementById('mw-n-v'),
+      out = document.getElementById('mw-delays');
+  function run() {
+    var k = +n.value, rows = [], total = 0;
+    for (var i = 0; i < k; i++) {
+      var d = Math.min(200 * Math.pow(2, i), 5000);
+      total += d;
+      rows.push((i + 1) + '회 → ' + d + 'ms' + (d === 5000 ? '  (상한)' : ''));
+    }
+    v.textContent = k;
+    out.textContent = rows.join('\n') + '\n총 대기 ' + (total / 1000).toFixed(1) + '초';
+  }
+  n.addEventListener('input', run); run();
+})();
+</script>
+```
+Set the initial value to whatever the code actually uses, so the default view
+shows real behavior and moving the slider explores alternatives.
+## 3. Step-through
+For pipelines and anything ordering-sensitive. One button advances one stage and
+shows the state after it. The reader controls the pace.
+```html
+<div class="world">
+  <span class="label">직접 해보기 — 이벤트가 원장에 닿기까지</span>
+  <div class="out" id="mw-state"></div>
+  <button id="mw-next">다음 단계</button>
+  <button id="mw-reset">처음부터</button>
+</div>
+<script>
+(function () {
+  var steps = [
+    ['입력',      'event = {id:7, kind:"evidence"}'],
+    ['정규화',    'event.ts = "2026-08-01T09:00:00Z" 추가'],
+    ['tmp 쓰기',  'ledger.jsonl.tmp = 기존 12줄 + 신규 1줄'],
+    ['rename',    'ledger.jsonl ← tmp   (원자적)'],
+    ['완료',      'ledger.jsonl 13줄. 크래시해도 12줄 또는 13줄, 중간 없음'],
+  ];
+  var i = -1, st = document.getElementById('mw-state');
+  function draw() {
+    st.textContent = i < 0
+      ? '시작 전: ledger.jsonl 12줄'
+      : steps.slice(0, i + 1).map(function (s, n) {
+          return (n === i ? '▶ ' : '  ') + s[0] + ': ' + s[1];
+        }).join('\n');
+  }
+  document.getElementById('mw-next').addEventListener('click', function () {
+    if (i < steps.length - 1) i++; draw();
+  });
+  document.getElementById('mw-reset').addEventListener('click', function () { i = -1; draw(); });
+  draw();
+})();
+</script>
+```
+## 4. Old / new toggle
+When the change itself is the lesson, run the same input through both and show
+them side by side. This is the interactive form of the before/after diagram.
+```html
+<div class="world">
+  <span class="label">직접 해보기 — 크래시 지점 바꿔보기</span>
+  <div class="row">
+    <label><input type="radio" name="mw-impl" value="old" checked> 이전 (append)</label>
+    <label><input type="radio" name="mw-impl" value="new"> 이후 (tmp + rename)</label>
+  </div>
+  <div class="row" style="margin-top:.5rem">
+    <label for="mw-crash">크래시 시점</label>
+    <input type="range" id="mw-crash" min="0" max="100" value="50" style="flex:1">
+  </div>
+  <div class="out" id="mw-result"></div>
+</div>
+<script>
+(function () {
+  var pct = document.getElementById('mw-crash'), out = document.getElementById('mw-result');
+  function impl() {
+    var r = document.querySelector('input[name="mw-impl"]:checked');
+    return r ? r.value : 'old';
+  }
+  function run() {
+    var p = +pct.value, line = '{"id":7,"kind":"evidence"}';
+    if (impl() === 'old') {
+      var kept = line.slice(0, Math.round(line.length * p / 100));
+      out.textContent = p >= 100
+        ? '12줄 + 완전한 13번째 줄 — 정상'
+        : '12줄 + 잘린 줄: ' + kept + '\n→ 다음 읽기에서 JSON 파싱 실패';
+    } else {
+      out.textContent = p >= 100
+        ? '13줄 — rename 완료'
+        : '12줄 — rename 전이라 원본 무변경. tmp 파일만 고아로 남음';
+    }
+  }
+  pct.addEventListener('input', run);
+  document.querySelectorAll('input[name="mw-impl"]').forEach(function (r) {
+    r.addEventListener('change', run);
+  });
+  run();
+})();
+</script>
+```
+## Rules that keep a micro-world honest
+- **Label it as a model.** Every micro-world states what it simplified.
+- **Be faithful on the dimension you are teaching.** Simplify anything else
+  freely, but if the reader will walk away with a rule about backoff timing,
+  the timing must match the real code.
+- **Use the document's toy data.** The same three rows and one malformed record
+  that appear in 직관 should appear here.
+- **Show the interesting range by default.** A slider parked where nothing
+  changes teaches nothing; start it where the behavior is about to break.
+- **No network, no dependencies.** Inline everything. The artifact has to work
+  on a plane and in two years.
+- **Degrade honestly in `--md` mode.** A micro-world becomes a worked example
+  with every intermediate value written out, not a description of a widget the
+  reader cannot use.