npm - claude-dev-env - Versions diffs - 1.82.0 → 1.84.0 - Mend

claude-dev-env 1.82.0 → 1.84.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 (217) hide show

package/skills/doc-gist/references/examples/10-svg-illustrations.html DELETED Viewed

@@ -1,492 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Background jobs — header illustrations</title>
-<style>
-  :root {
-    --ivory:   #FAF9F5;
-    --slate:   #141413;
-    --clay:    #D97757;
-    --oat:     #E3DACC;
-    --olive:   #788C5D;
-    --gray-150:#F0EEE6;
-    --gray-300:#D1CFC5;
-    --gray-500:#87867F;
-    --gray-700:#3D3D3A;
-    --serif: ui-serif, Georgia, "Times New Roman", serif;
-    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    background: var(--ivory);
-    color: var(--slate);
-    font-family: var(--sans);
-    -webkit-font-smoothing: antialiased;
-    padding: 64px 24px 96px;
-  }
-  .sheet {
-    max-width: 760px;
-    margin: 0 auto;
-  }
-  header { margin-bottom: 56px; }
-  h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 34px;
-    letter-spacing: -0.01em;
-    margin-bottom: 10px;
-  }
-  .lead {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--gray-700);
-    max-width: 560px;
-  }
-  .meta {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    margin-top: 18px;
-  }
-  /* ---------------------------------------------------------------- */
-  figure {
-    margin: 0 0 72px 0;
-  }
-  .canvas {
-    border: 1px solid var(--gray-300);
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--ivory);
-  }
-  .canvas svg { display: block; width: 100%; height: auto; }
-  figcaption {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 24px;
-    padding: 18px 4px 0;
-  }
-  .cap-text { flex: 1; }
-  .cap-title {
-    font-family: var(--serif);
-    font-size: 19px;
-    font-weight: 500;
-    margin-bottom: 4px;
-  }
-  .cap-sub {
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--gray-500);
-  }
-  .dl {
-    flex-shrink: 0;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--slate);
-    background: var(--gray-150);
-    border: 1px solid var(--gray-300);
-    border-radius: 6px;
-    padding: 7px 12px;
-    cursor: pointer;
-  }
-  .dl:hover { background: var(--oat); }
-  .dl:active { transform: translateY(1px); }
-  /* ----------------------------------------------------------------
-     Palette reference strip
-     ---------------------------------------------------------------- */
-  .palette {
-    border-top: 1px solid var(--gray-300);
-    padding-top: 36px;
-    margin-top: 8px;
-  }
-  .palette h2 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 19px;
-    margin-bottom: 18px;
-  }
-  .swatches {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
-    gap: 10px;
-    margin-bottom: 32px;
-  }
-  .swatch {
-    border: 1px solid var(--gray-300);
-    border-radius: 8px;
-    overflow: hidden;
-    background: #fff;
-  }
-  .swatch-chip {
-    height: 44px;
-  }
-  .swatch-meta {
-    padding: 8px 10px 10px;
-  }
-  .swatch-name {
-    font-size: 12px;
-    color: var(--gray-700);
-  }
-  .swatch-hex {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--gray-500);
-  }
-  .notes {
-    font-size: 13px;
-    line-height: 1.7;
-    color: var(--gray-700);
-    list-style: none;
-  }
-  .notes li {
-    padding-left: 18px;
-    position: relative;
-    margin-bottom: 6px;
-  }
-  .notes li::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0.65em;
-    width: 8px;
-    height: 1px;
-    background: var(--gray-500);
-  }
-</style>
-</head>
-<body>
-<div class="sheet">
-  <header>
-    <h1>Background jobs — header illustrations</h1>
-    <p class="lead">
-      Three 720×320 hand-drawn SVGs for the Birchline docs section on
-      background jobs. Flat fills, 1.5–2px strokes, palette-locked. Each
-      exports standalone via the button below it.
-    </p>
-    <div class="meta">720 × 320 · inline SVG · no external assets</div>
-  </header>
-  <!-- ============================================================
-       A — Queue
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-queue" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          <style>
-            .m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-            .s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-          </style>
-          <marker id="qa" markerWidth="10" markerHeight="10" refX="8" refY="4" orient="auto" markerUnits="userSpaceOnUse">
-            <path d="M0,0 L0,8 L8,4 z" fill="#87867F"/>
-          </marker>
-        </defs>
-        <rect width="720" height="320" fill="#FAF9F5"/>
-        <!-- queue label -->
-        <text x="60" y="96" class="s" fill="#87867F">queue</text>
-        <!-- five job rects -->
-        <g>
-          <rect x="60"  y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="95"  y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 5</text>
-          <rect x="140" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="175" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 4</text>
-          <rect x="220" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="255" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 3</text>
-          <rect x="300" y="110" width="70" height="100" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="335" y="164" text-anchor="middle" class="m" fill="#3D3D3A">job 2</text>
-          <!-- head of queue, highlighted -->
-          <rect x="380" y="110" width="70" height="100" rx="10" fill="#D97757" stroke="#141413" stroke-width="2"/>
-          <text x="415" y="164" text-anchor="middle" class="m" fill="#FAF9F5">job 1</text>
-        </g>
-        <!-- arrow to worker -->
-        <line x1="458" y1="160" x2="522" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#qa)"/>
-        <!-- worker -->
-        <rect x="530" y="90" width="130" height="140" rx="10" fill="#E3DACC" stroke="#141413" stroke-width="2"/>
-        <text x="595" y="156" text-anchor="middle" class="m" fill="#141413">worker</text>
-        <text x="595" y="172" text-anchor="middle" class="m" fill="#87867F">pool=4</text>
-        <!-- annotations -->
-        <text x="415" y="234" text-anchor="middle" class="s" fill="#87867F">next to run</text>
-        <text x="60"  y="258" class="s" fill="#87867F">Jobs are pulled FIFO; the worker leases one at a time.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Queue</div>
-        <div class="cap-sub">For "How jobs are picked up" — intro page header.</div>
-      </div>
-      <button class="dl" data-target="ill-queue" data-filename="birchline-jobs-queue.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-  <!-- ============================================================
-       B — Retry with backoff
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-retry" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          <style>
-            .m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-            .s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-          </style>
-        </defs>
-        <rect width="720" height="320" fill="#FAF9F5"/>
-        <!-- timeline axis -->
-        <line x1="60" y1="190" x2="660" y2="190" stroke="#D1CFC5" stroke-width="1.5"/>
-        <text x="60" y="214" class="s" fill="#87867F">t = 0</text>
-        <text x="660" y="214" text-anchor="end" class="s" fill="#87867F">time →</text>
-        <!-- attempts: exponential spacing at x = 100, 170, 310, 590 -->
-        <!-- attempt 1 (fail) -->
-        <circle cx="100" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="96" y1="186" x2="104" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="104" y1="186" x2="96" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="100" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 1</text>
-        <!-- attempt 2 (fail) -->
-        <circle cx="170" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="166" y1="186" x2="174" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="174" y1="186" x2="166" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="170" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 2</text>
-        <!-- attempt 3 (fail) -->
-        <circle cx="310" cy="190" r="8" fill="#FAF9F5" stroke="#D97757" stroke-width="2"/>
-        <line x1="306" y1="186" x2="314" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <line x1="314" y1="186" x2="306" y2="194" stroke="#D97757" stroke-width="1.5"/>
-        <text x="310" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 3</text>
-        <!-- attempt 4 (success) -->
-        <circle cx="590" cy="190" r="9" fill="#788C5D" stroke="#141413" stroke-width="1.5"/>
-        <path d="M585,190 L589,194 L596,185" fill="none" stroke="#FAF9F5" stroke-width="1.5" stroke-linecap="round"/>
-        <text x="590" y="222" text-anchor="middle" class="m" fill="#3D3D3A">try 4</text>
-        <!-- dashed backoff arcs (loop back over the gap) -->
-        <path d="M 100 182 Q 135 130 170 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="135" y="124" text-anchor="middle" class="m" fill="#87867F">+1s</text>
-        <path d="M 170 182 Q 240 110 310 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="240" y="104" text-anchor="middle" class="m" fill="#87867F">+2s</text>
-        <path d="M 310 182 Q 450 80 590 182" fill="none" stroke="#87867F" stroke-width="1.5" stroke-dasharray="4 4"/>
-        <text x="450" y="74" text-anchor="middle" class="m" fill="#87867F">+4s</text>
-        <!-- annotation -->
-        <text x="60" y="262" class="s" fill="#87867F">Each failure waits twice as long before re-queuing; jitter not pictured.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Retry with backoff</div>
-        <div class="cap-sub">For "Handling failures" — retry policy header.</div>
-      </div>
-      <button class="dl" data-target="ill-retry" data-filename="birchline-jobs-retry.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-  <!-- ============================================================
-       C — Fan-out
-       ============================================================ -->
-  <figure>
-    <div class="canvas">
-      <svg id="ill-fanout" xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320">
-        <defs>
-          <style>
-            .m { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; }
-            .s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 12px; }
-          </style>
-          <marker id="fa" markerWidth="9" markerHeight="9" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse">
-            <path d="M0,0 L0,7 L7,3.5 z" fill="#87867F"/>
-          </marker>
-        </defs>
-        <rect width="720" height="320" fill="#FAF9F5"/>
-        <!-- source -->
-        <rect x="60" y="128" width="110" height="64" rx="10" fill="#E3DACC" stroke="#141413" stroke-width="2"/>
-        <text x="115" y="158" text-anchor="middle" class="m" fill="#141413">enqueue</text>
-        <text x="115" y="172" text-anchor="middle" class="m" fill="#87867F">batch()</text>
-        <!-- fan-out arrows: from (170,160) to four shard boxes at x=300 -->
-        <line x1="170" y1="160" x2="296" y2="64"  stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="128" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="192" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="170" y1="160" x2="296" y2="256" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <!-- four shard boxes -->
-        <g>
-          <rect x="300" y="44"  width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="69"  text-anchor="middle" class="m" fill="#3D3D3A">shard 0</text>
-          <rect x="300" y="108" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="133" text-anchor="middle" class="m" fill="#3D3D3A">shard 1</text>
-          <rect x="300" y="172" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="197" text-anchor="middle" class="m" fill="#3D3D3A">shard 2</text>
-          <rect x="300" y="236" width="120" height="40" rx="10" fill="#F0EEE6" stroke="#3D3D3A" stroke-width="1.5"/>
-          <text x="360" y="261" text-anchor="middle" class="m" fill="#3D3D3A">shard 3</text>
-        </g>
-        <!-- converge arrows to merge -->
-        <line x1="420" y1="64"  x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="128" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="192" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <line x1="420" y1="256" x2="546" y2="160" stroke="#87867F" stroke-width="1.5" marker-end="url(#fa)"/>
-        <!-- merge box -->
-        <rect x="550" y="128" width="110" height="64" rx="10" fill="#788C5D" stroke="#141413" stroke-width="2"/>
-        <text x="605" y="158" text-anchor="middle" class="m" fill="#FAF9F5">merge</text>
-        <text x="605" y="172" text-anchor="middle" class="m" fill="#E3DACC">await all</text>
-        <!-- annotations -->
-        <text x="232" y="42"  class="s" fill="#87867F">fan-out</text>
-        <text x="486" y="42"  text-anchor="end" class="s" fill="#87867F">fan-in</text>
-        <text x="60"  y="300" class="s" fill="#87867F">Parent job spawns N children, then blocks on a completion barrier.</text>
-      </svg>
-    </div>
-    <figcaption>
-      <div class="cap-text">
-        <div class="cap-title">Fan-out / fan-in</div>
-        <div class="cap-sub">For "Batch and parallel work" — fan-out pattern header.</div>
-      </div>
-      <button class="dl" data-target="ill-fanout" data-filename="birchline-jobs-fanout.svg">Download SVG</button>
-    </figcaption>
-  </figure>
-  <!-- ============================================================
-       Palette + usage notes
-       ============================================================ -->
-  <section class="palette">
-    <h2>Palette &amp; rules</h2>
-    <div class="swatches">
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#FAF9F5"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">ivory</div>
-          <div class="swatch-hex">#FAF9F5</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#141413"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">slate</div>
-          <div class="swatch-hex">#141413</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#D97757"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">clay</div>
-          <div class="swatch-hex">#D97757</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#788C5D"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">olive</div>
-          <div class="swatch-hex">#788C5D</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#E3DACC"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">oat</div>
-          <div class="swatch-hex">#E3DACC</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#F0EEE6"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-150</div>
-          <div class="swatch-hex">#F0EEE6</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#D1CFC5"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-300</div>
-          <div class="swatch-hex">#D1CFC5</div>
-        </div>
-      </div>
-      <div class="swatch">
-        <div class="swatch-chip" style="background:#87867F"></div>
-        <div class="swatch-meta">
-          <div class="swatch-name">gray-500</div>
-          <div class="swatch-hex">#87867F</div>
-        </div>
-      </div>
-    </div>
-    <ul class="notes">
-      <li>Strokes are 1.5px for neutral boxes, 2px for emphasised containers.</li>
-      <li>All rectangles use <code>rx="10"</code>; no drop shadows or gradients.</li>
-      <li>Labels inside boxes are 11px mono; annotations outside are 12px sans, gray-500.</li>
-      <li>Clay marks "the thing in focus"; olive marks "success / done".</li>
-      <li>Each SVG carries its own <code>&lt;style&gt;</code> block so the download stands alone.</li>
-    </ul>
-  </section>
-</div>
-<script>
-  document.querySelectorAll('.dl').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      var svg  = document.getElementById(btn.dataset.target);
-      var src  = new XMLSerializer().serializeToString(svg);
-      var blob = new Blob([src], { type: 'image/svg+xml;charset=utf-8' });
-      var url  = URL.createObjectURL(blob);
-      var a    = document.createElement('a');
-      a.href = url;
-      a.download = btn.dataset.filename || 'illustration.svg';
-      a.click();
-      setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
-    });
-  });
-</script>
-</body>
-</html>