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

@litfamily/lithermes 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 (557) hide show

package/assets/lithermes-plugin/skills/lit-comprehend/assets/explainer-scaffold.html ADDED Viewed

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>__TITLE__</title>
+<style>
+:root {
+  --bg: #fafafa; --fg: #1a1a2e; --muted: #6b7280;
+  --border: #e5e7eb; --accent: #2563eb; --accent-bg: #eff6ff;
+  --ok: #059669; --ok-bg: #ecfdf5; --warn: #d97706; --warn-bg: #fffbeb;
+  --bad: #dc2626; --bad-bg: #fef2f2;
+  --add-bg: #dcfce7; --del-bg: #fee2e2;
+  --code-bg: #f3f4f6; --pre-bg: #f8fafc;
+  --quiz-btn: #e5e7eb; --quiz-correct: #059669; --quiz-wrong: #dc2626;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f172a; --fg: #e2e8f0; --muted: #94a3b8;
+    --border: #334155; --accent: #60a5fa; --accent-bg: #1e293b;
+    --ok: #34d399; --ok-bg: #064e3b; --warn: #fbbf24; --warn-bg: #451a03;
+    --bad: #f87171; --bad-bg: #450a0a;
+    --add-bg: #064e3b; --del-bg: #450a0a;
+    --code-bg: #1e293b; --pre-bg: #1e293b;
+    --quiz-btn: #334155; --quiz-correct: #34d399; --quiz-wrong: #f87171;
+  }
+}
+*, *::before, *::after { box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg); color: var(--fg);
+  max-width: 52rem; margin: 0 auto; padding: 1.5rem;
+  line-height: 1.7;
+}
+h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
+h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; border-bottom: 2px solid var(--border); padding-bottom: 0.4rem; }
+h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
+h4 { font-size: 1rem; margin: 1rem 0 0.25rem; color: var(--muted); }
+header.doc { margin-bottom: 2rem; }
+header.doc .subtitle { color: var(--muted); font-size: 0.95rem; }
+nav.toc { background: var(--accent-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
+nav.toc ol { margin: 0; padding-left: 1.25rem; }
+nav.toc li { margin: 0.25rem 0; }
+nav.toc a { color: var(--accent); text-decoration: none; }
+nav.toc a:hover { text-decoration: underline; }
+code { background: var(--code-bg); padding: 0.15em 0.35em; border-radius: 3px; font-size: 0.9em; }
+pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; overflow-x: auto; white-space: pre-wrap; font-size: 0.88em; line-height: 1.5; }
+pre code { background: none; padding: 0; }
+.add { background: var(--add-bg); }
+.del { background: var(--del-bg); text-decoration: line-through; }
+.note { border-radius: 6px; padding: 0.75rem 1rem; margin: 0.75rem 0; font-size: 0.92em; }
+.note.ok { background: var(--ok-bg); border-left: 4px solid var(--ok); }
+.note.warn { background: var(--warn-bg); border-left: 4px solid var(--warn); }
+.note.bad { background: var(--bad-bg); border-left: 4px solid var(--bad); }
+.skippable { border: 1px dashed var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin: 0.5rem 0; color: var(--muted); }
+.skippable summary { cursor: pointer; font-weight: 600; color: var(--fg); }
+.scroll-x { overflow-x: auto; }
+table { border-collapse: collapse; width: 100%; min-width: 30rem; }
+th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
+th { background: var(--accent-bg); font-weight: 600; }
+.pipe { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin: 1rem 0; }
+.box { background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 6px; padding: 0.5rem 1rem; font-weight: 600; white-space: nowrap; }
+.arrow { width: 2rem; height: 2px; background: var(--accent); position: relative; margin: 0 0.25rem; }
+.arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left-color: var(--accent); }
+.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
+.side { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; }
+.side h4 { margin-top: 0; }
+@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } }
+.world { background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 8px; padding: 1.25rem; margin: 1rem 0; }
+.world input[type="text"], .world input[type="number"] { padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95em; background: var(--bg); color: var(--fg); }
+.world button { padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); cursor: pointer; }
+.world button:hover { background: var(--accent-bg); }
+.quiz-q { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; }
+.quiz-q p { margin: 0 0 0.75rem; font-weight: 600; }
+.opt { display: block; width: 100%; text-align: left; padding: 0.6rem 0.8rem; margin: 0.3rem 0; border: 1px solid var(--border); border-radius: 4px; background: var(--quiz-btn); color: var(--fg); cursor: pointer; font-size: 0.95em; }
+.opt:hover { border-color: var(--accent); }
+.opt.correct { border-color: var(--quiz-correct); background: var(--ok-bg); }
+.opt.wrong { border-color: var(--quiz-wrong); background: var(--bad-bg); }
+.fb { display: none; padding: 0.5rem 0.8rem; margin: 0.2rem 0; border-radius: 4px; font-size: 0.9em; }
+.fb.show { display: block; background: var(--accent-bg); }
+.ui-mock { border: 2px solid var(--border); border-radius: 8px; overflow: hidden; margin: 1rem 0; }
+.mock-header { background: var(--accent-bg); padding: 0.5rem 1rem; font-weight: 600; border-bottom: 1px solid var(--border); }
+.mock-body { padding: 1rem; }
+</style>
+</head>
+<body>
+<header class="doc">
+  <h1>__TITLE__</h1>
+  <p class="subtitle">__SUBTITLE__</p>
+</header>
+<nav class="toc">
+  <strong>목차</strong>
+  __TOC__
+</nav>
+__CONTENT__
+<script>
+(function() {
+  document.querySelectorAll('.quiz-q').forEach(function(q) {
+    var answer = parseInt(q.dataset.answer, 10);
+    var answered = false;
+    q.querySelectorAll('.opt').forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        if (answered) return;
+        answered = true;
+        var chosen = parseInt(btn.dataset.i, 10);
+        btn.classList.add(chosen === answer ? 'correct' : 'wrong');
+        q.querySelectorAll('.opt').forEach(function(b) {
+          if (parseInt(b.dataset.i, 10) === answer) b.classList.add('correct');
+        });
+        var fb = q.querySelector('.fb[data-i="' + chosen + '"]');
+        if (fb) fb.classList.add('show');
+        var correctFb = q.querySelector('.fb[data-i="' + answer + '"]');
+        if (correctFb && chosen !== answer) correctFb.classList.add('show');
+      });
+    });
+  });
+})();
+</script>
+</body>
+</html>

package/assets/lithermes-plugin/skills/lit-comprehend/references/artifact-template.md ADDED Viewed

@@ -0,0 +1,205 @@
+# Explainer artifact template
+Section-by-section contract for the comprehend artifact. Each section names
+its Korean header, its purpose, and the HTML patterns to use.
+## 한눈에
+One paragraph orienting the reader: what changed, in what scope, with what
+confidence level.
+```html
+<section id="overview">
+  <h2>한눈에</h2>
+  <p>...</p>
+  <div class="note ok">신뢰도: 높음 — 모든 결과가 명령 실행으로 확인됨</div>
+</section>
+```
+Confidence levels: `ok` (verified by commands), `warn` (partially verified),
+`bad` (significant unknowns or missing artifacts).
+## 이미 알고 있던 것
+The delta anchor. State what the reader already knew — their objective, the
+brief they wrote, the context they started from. Wrap optional background in
+a skippable block so experienced readers can collapse it.
+```html
+<section id="anchor">
+  <h2>이미 알고 있던 것</h2>
+  <p>목표: ...</p>
+  <div class="skippable">
+    <summary>배경 (이미 아는 사람은 건너뛰기)</summary>
+    <p>...</p>
+  </div>
+</section>
+```
+## 직관
+Essence of each theme. Introduce toy data here and reuse it through the
+whole document. Place 2-3 diagrams from these families:
+### Pipeline diagram
+```html
+<div class="pipe">
+  <div class="box">입력</div>
+  <div class="arrow"></div>
+  <div class="box">처리</div>
+  <div class="arrow"></div>
+  <div class="box">출력</div>
+</div>
+```
+### Before/after diagram
+```html
+<div class="ba">
+  <div class="side">
+    <h4>이전</h4>
+    <pre>...</pre>
+  </div>
+  <div class="side">
+    <h4>이후</h4>
+    <pre>...</pre>
+  </div>
+</div>
+```
+### State/timeline table
+```html
+<div class="scroll-x">
+  <table>
+    <thead><tr><th>단계</th><th>상태</th><th>변경</th></tr></thead>
+    <tbody>...</tbody>
+  </table>
+</div>
+```
+### Simplified UI mockup
+```html
+<div class="ui-mock">
+  <div class="mock-header">제목</div>
+  <div class="mock-body">...</div>
+</div>
+```
+## 바뀐 것
+Literate walkthrough in conceptual order. Each theme gets a subsection.
+Code quotes carry `data-src` for verifier tracing.
+```html
+<section id="changes">
+  <h2>바뀐 것</h2>
+  <h3>테마 1: 라우팅 통합</h3>
+  <p>설명...</p>
+  <pre data-src="src/router.py">
+def route(message):
+    ...
+  </pre>
+  <p>추가된 줄은 <span class="add">초록</span>,
+     삭제된 줄은 <span class="del">빨강</span>으로 표시.</p>
+</section>
+```
+## 직접 만져보기
+Micro-world interactive widget. See `micro-worlds.md` for patterns.
+Always label it as a simplified model. Omit for structural-only changes.
+```html
+<section id="hands-on">
+  <h2>직접 만져보기</h2>
+  <p class="note warn">아래는 실제 코드가 아닌 단순화된 모델입니다.</p>
+  <div class="world" id="demo">
+    <!-- widget markup -->
+  </div>
+</section>
+```
+## 확인 안 된 것
+Honesty ledger. Must contain substantive content (verifier warns if under
+120 characters). Categories:
+- **명령으로 확인됨**: list what was verified by running a command.
+- **읽기만 한 코드**: code that exists but was never executed.
+- **미완료 작업**: work the objective asked for that did not happen.
+- **누락/오래된 증거**: cited artifacts that are missing or stale.
+- **불확실한 점**: explicit uncertainty.
+```html
+<section id="unverified">
+  <h2>확인 안 된 것</h2>
+  <ul>
+    <li><strong>읽기만 함</strong>: core_routing.py의 detect_lit_mode — 이 세션에서 실행하지 않음</li>
+    <li><strong>미완료</strong>: 성능 벤치마크는 요청되었으나 수행되지 않음</li>
+  </ul>
+</section>
+```
+## 증거
+Claim-to-artifact evidence table in a scrollable container.
+```html
+<section id="evidence">
+  <h2>증거</h2>
+  <div class="scroll-x">
+    <table>
+      <thead><tr><th>주장</th><th>증거 경로</th><th>명령</th><th>결과</th></tr></thead>
+      <tbody>
+        <tr>
+          <td>테스트 통과</td>
+          <td>test/output.log</td>
+          <td><code>npm test</code></td>
+          <td>347 pass, 0 fail</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+```
+## 퀴즈
+Interactive quiz with feedback for every option.
+```html
+<section id="quiz">
+  <h2>퀴즈</h2>
+  <div class="quiz-q" data-answer="2">
+    <p>1. 라우터가 메시지를 어떻게 분류하는가?</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">머신러닝 분류기 사용</button>
+    <div class="fb" data-i="0">정규식 하나로는 모드 간 충돌을 해결할 수 없습니다.</div>
+    <div class="fb" data-i="1">파일 확장자는 라우팅이 아닌 이벤트 감지에 사용됩니다.</div>
+    <div class="fb" data-i="2">맞습니다. 토큰 경계를 확인한 후 각 모드 매처로 분기합니다.</div>
+    <div class="fb" data-i="3">외부 의존성 없이 규칙 기반으로 동작합니다.</div>
+  </div>
+</section>
+```
+Rules:
+- 5 questions (3 for small changes).
+- Every option has a feedback `<div class="fb">`.
+- Vary the correct-answer position (`data-answer`): no positional tell.
+- Keep option text lengths roughly even: no length tell.
+## 다음
+Three concrete next entry points for the reader.
+```html
+<section id="next">
+  <h2>다음</h2>
+  <ol>
+    <li>...</li>
+    <li>...</li>
+    <li>...</li>
+  </ol>
+</section>
+```

package/assets/lithermes-plugin/skills/lit-comprehend/references/micro-worlds.md ADDED Viewed

@@ -0,0 +1,139 @@
+# Micro-world patterns
+A micro-world is a small interactive widget embedded in the explainer artifact
+so the reader can **feel** the behavior rather than just read about it. It is
+always a simplified model, never the real code.
+## When to include
+Include a micro-world when the change has observable behavior: a new algorithm,
+a routing decision, a threshold, a state machine, a UI flow. Omit for purely
+structural changes (renames, file moves, dependency bumps).
+## Rules
+1. **Label as simplified model** — the opening line must say this is not the
+   real implementation.
+2. **Faithful on the teaching dimension** — the widget must correctly
+   demonstrate the concept it claims to show, even though it simplifies
+   everything else.
+3. **Reuse the document's toy data** — do not invent new examples; use the
+   same data introduced in 직관.
+4. **Show an interesting range by default** — set initial values so the
+   widget demonstrates non-trivial behavior without requiring user interaction.
+5. **No network, no external dependencies** — everything inlined.
+6. **Degrade to a worked example in `--md` mode** — when Markdown output is
+   requested, replace the interactive widget with a static worked example
+   showing the same concept.
+## Pattern 1: Faithful miniature
+Port the core logic to JavaScript, wire it to editable input fields.
+```html
+<div class="world" id="miniature">
+  <p class="note warn">단순화된 모델입니다. 실제 구현과 다릅니다.</p>
+  <label>입력: <input type="text" id="mini-input" value="lit plan build"></label>
+  <button onclick="runMini()">실행</button>
+  <pre id="mini-output"></pre>
+</div>
+<script>
+function runMini() {
+  const input = document.getElementById('mini-input').value;
+  const output = document.getElementById('mini-output');
+  // Simplified logic faithful to the teaching dimension
+  const tokens = input.trim().split(/\s+/);
+  let mode = 'unknown';
+  if (tokens[0] === 'lit' && tokens[1]) mode = tokens[1];
+  output.textContent = `mode: ${mode}`;
+}
+runMini();
+</script>
+```
+## Pattern 2: Slider
+Use an `<input type="range">` for continuous parameters like thresholds,
+timeouts, or budgets.
+```html
+<div class="world" id="slider">
+  <p class="note warn">단순화된 모델입니다.</p>
+  <label>임계값: <input type="range" id="threshold" min="0" max="100" value="50"
+    oninput="updateSlider()"></label>
+  <span id="threshold-val">50</span>
+  <div id="slider-result"></div>
+</div>
+<script>
+function updateSlider() {
+  const val = document.getElementById('threshold').value;
+  document.getElementById('threshold-val').textContent = val;
+  const result = document.getElementById('slider-result');
+  result.textContent = Number(val) > 70 ? 'activated' : 'below threshold';
+}
+updateSlider();
+</script>
+```
+## Pattern 3: Step-through
+Next/reset buttons showing state at each stage of a pipeline or algorithm.
+```html
+<div class="world" id="stepper">
+  <p class="note warn">단순화된 모델입니다.</p>
+  <button onclick="stepNext()">다음 단계</button>
+  <button onclick="stepReset()">초기화</button>
+  <pre id="step-state"></pre>
+</div>
+<script>
+(function() {
+  const stages = [
+    { label: '1. 입력 파싱', state: '{ raw: "lit plan build" }' },
+    { label: '2. 토큰 추출', state: '{ tokens: ["lit", "plan", "build"] }' },
+    { label: '3. 모드 결정', state: '{ mode: "lit-plan", objective: "build" }' },
+  ];
+  let step = 0;
+  window.stepNext = function() {
+    if (step < stages.length) {
+      document.getElementById('step-state').textContent =
+        stages[step].label + '\n' + stages[step].state;
+      step++;
+    }
+  };
+  window.stepReset = function() {
+    step = 0;
+    document.getElementById('step-state').textContent = '(초기화됨)';
+  };
+  stepReset();
+})();
+</script>
+```
+## Pattern 4: Old/new toggle
+Radio buttons or tabs switching between the old and new behavior with the
+same input.
+```html
+<div class="world" id="toggle">
+  <p class="note warn">단순화된 모델입니다.</p>
+  <label><input type="radio" name="version" value="old" checked
+    onchange="toggleVersion()"> 이전</label>
+  <label><input type="radio" name="version" value="new"
+    onchange="toggleVersion()"> 이후</label>
+  <pre id="toggle-output"></pre>
+</div>
+<script>
+function toggleVersion() {
+  const isNew = document.querySelector('input[name="version"][value="new"]').checked;
+  const output = document.getElementById('toggle-output');
+  if (isNew) {
+    output.textContent = 'New behavior: bounded routing with token boundaries';
+  } else {
+    output.textContent = 'Old behavior: substring match (false positives)';
+  }
+}
+toggleVersion();
+</script>
+```