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/06-component-variants.html DELETED Viewed

@@ -1,605 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Birchline — Card Variant Matrix</title>
-<style>
-  :root {
-    --ivory: #FAF9F5;
-    --slate: #141413;
-    --clay: #D97757;
-    --oat: #E3DACC;
-    --olive: #788C5D;
-    --gray-100: #F0EEE6;
-    --gray-300: #D1CFC5;
-    --gray-500: #87867F;
-    --gray-700: #3D3D3A;
-    --white: #FFFFFF;
-    --serif: ui-serif, Georgia, serif;
-    --sans: system-ui, -apple-system, sans-serif;
-    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
-    /* live-controlled tokens */
-    --card-pad: 20px;
-    --card-border: 1.5px solid var(--gray-300);
-    --card-shadow: 0 4px 14px rgba(20, 20, 19, 0.08);
-  }
-  * { box-sizing: border-box; }
-  body {
-    margin: 0;
-    background: var(--ivory);
-    color: var(--slate);
-    font-family: var(--sans);
-    font-size: 15px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-  }
-  .page {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 28px 80px;
-  }
-  header {
-    padding: 48px 0 20px;
-  }
-  header h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 36px;
-    letter-spacing: -0.01em;
-    margin: 0 0 6px;
-  }
-  header p {
-    color: var(--gray-500);
-    font-size: 14px;
-    margin: 0;
-    max-width: 640px;
-  }
-  /* ---------- Toolbar ---------- */
-  .toolbar {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 28px;
-    padding: 16px 20px;
-    margin: 24px 0 36px;
-    background: var(--white);
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-  }
-  .control {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  .control-label {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-700);
-  }
-  .control-value {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-    min-width: 36px;
-  }
-  input[type="range"] {
-    appearance: none;
-    width: 140px;
-    height: 4px;
-    background: var(--gray-300);
-    border-radius: 2px;
-    outline: none;
-  }
-  input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    width: 16px; height: 16px;
-    background: var(--clay);
-    border-radius: 50%;
-    cursor: pointer;
-  }
-  input[type="range"]::-moz-range-thumb {
-    width: 16px; height: 16px;
-    background: var(--clay);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-  .radio-group {
-    display: inline-flex;
-    border: 1.5px solid var(--gray-300);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  .radio-group label {
-    padding: 6px 12px;
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-    color: var(--gray-700);
-    border-right: 1px solid var(--gray-300);
-  }
-  .radio-group label:last-child { border-right: none; }
-  .radio-group input { display: none; }
-  .radio-group input:checked + span {
-    color: var(--slate);
-  }
-  .radio-group label:has(input:checked) {
-    background: var(--gray-100);
-  }
-  .check {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-  }
-  .check input {
-    appearance: none;
-    width: 16px; height: 16px;
-    border: 1.5px solid var(--gray-300);
-    border-radius: 4px;
-    margin: 0;
-    cursor: pointer;
-    position: relative;
-  }
-  .check input:checked {
-    background: var(--clay);
-    border-color: var(--clay);
-  }
-  .check input:checked::after {
-    content: "";
-    position: absolute;
-    left: 4px; top: 0;
-    width: 4px; height: 9px;
-    border: solid var(--white);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-  }
-  /* ---------- Grid ---------- */
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 28px;
-  }
-  @media (max-width: 960px) {
-    .grid { grid-template-columns: repeat(2, 1fr); }
-  }
-  @media (max-width: 640px) {
-    .grid { grid-template-columns: 1fr; }
-  }
-  .cell {}
-  .variant-label {
-    display: inline-flex;
-    align-items: center;
-    height: 22px;
-    padding: 0 9px;
-    font-family: var(--mono);
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--gray-700);
-    background: var(--gray-100);
-    border-radius: 999px;
-    margin-bottom: 10px;
-  }
-  .variant-note {
-    font-size: 12px;
-    color: var(--gray-500);
-    margin-top: 10px;
-  }
-  /* ---------- Card base ---------- */
-  .card {
-    border-radius: 12px;
-    padding: var(--card-pad);
-    transition: padding 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
-    cursor: pointer;
-  }
-  .card:hover { outline: 2px solid var(--clay); outline-offset: 2px; }
-  .card-head {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
-  .avatar {
-    width: 36px; height: 36px;
-    border-radius: 50%;
-    background: var(--oat);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--gray-700);
-  }
-  .card-titles { min-width: 0; }
-  .card-title {
-    font-family: var(--serif);
-    font-size: 17px;
-    font-weight: 500;
-    margin: 0 0 2px;
-    line-height: 1.3;
-  }
-  .card-sub {
-    font-size: 13px;
-    color: var(--gray-500);
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .chips {
-    display: flex;
-    gap: 6px;
-    margin-bottom: 14px;
-  }
-  .chip {
-    display: inline-flex;
-    align-items: center;
-    height: 20px;
-    padding: 0 8px;
-    font-size: 11px;
-    font-weight: 500;
-    border-radius: 999px;
-    background: var(--gray-100);
-    color: var(--gray-700);
-  }
-  .chip.olive { background: rgba(120,140,93,0.16); color: var(--olive); }
-  .ghost-btn {
-    display: inline-flex;
-    align-items: center;
-    height: 30px;
-    padding: 0 12px;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--gray-700);
-    background: transparent;
-    border: 1.5px solid var(--gray-300);
-    border-radius: 8px;
-    cursor: pointer;
-  }
-  .ghost-btn:hover { background: var(--gray-100); }
-  /* ---------- Variant treatments ---------- */
-  .v-flat {
-    background: var(--white);
-    border: none;
-    box-shadow: none;
-  }
-  .v-outlined {
-    background: var(--white);
-    border: var(--card-border);
-    box-shadow: none;
-  }
-  .v-elevated {
-    background: var(--white);
-    border: none;
-    box-shadow: var(--card-shadow);
-  }
-  .v-stripe {
-    background: var(--white);
-    border: var(--card-border);
-    box-shadow: none;
-    position: relative;
-    overflow: hidden;
-  }
-  .v-stripe::before {
-    content: "";
-    position: absolute;
-    left: 0; right: 0; top: 0;
-    height: 4px;
-    background: var(--clay);
-  }
-  .v-inset {
-    background: var(--oat);
-    border: none;
-    box-shadow: none;
-  }
-  .v-inset .chip { background: rgba(255,255,255,0.6); }
-  .v-inset .ghost-btn { border-color: rgba(20,20,19,0.15); }
-  .v-inset .avatar { background: var(--white); }
-  .v-horizontal {
-    background: var(--white);
-    border: var(--card-border);
-    box-shadow: none;
-    display: flex;
-    align-items: center;
-    gap: 14px;
-  }
-  .v-horizontal .card-head { margin: 0; flex: 1; min-width: 0; }
-  .v-horizontal .chips { margin: 0; }
-  .v-horizontal .card-sub { display: none; }
-  .v-horizontal .ghost-btn { flex-shrink: 0; }
-  /* ---------- Snippet panel ---------- */
-  .snippet-panel {
-    margin-top: 40px;
-    border: 1.5px solid var(--gray-300);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-  .snippet-head {
-    padding: 10px 16px;
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--gray-500);
-    background: var(--gray-100);
-    border-bottom: 1px solid var(--gray-300);
-  }
-  pre#snippet {
-    margin: 0;
-    padding: 20px;
-    background: var(--slate);
-    color: var(--ivory);
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.6;
-    overflow-x: auto;
-    min-height: 120px;
-  }
-</style>
-</head>
-<body>
-<div class="page">
-  <header>
-    <h1>Card variant matrix</h1>
-    <p>Six structural treatments of the Birchline <code style="font-family:var(--mono);font-size:13px">&lt;Card /&gt;</code> component. Adjust density and emphasis with the controls, hover a variant to see its prop combo.</p>
-  </header>
-  <!-- ---------- Toolbar ---------- -->
-  <div class="toolbar">
-    <div class="control">
-      <span class="control-label">Padding</span>
-      <input id="ctl-pad" type="range" min="12" max="32" value="20" step="2">
-      <span class="control-value" id="pad-out">20px</span>
-    </div>
-    <div class="control">
-      <span class="control-label">Border</span>
-      <div class="radio-group">
-        <label><input type="radio" name="border" value="none"><span>none</span></label>
-        <label><input type="radio" name="border" value="hairline" checked><span>hairline</span></label>
-        <label><input type="radio" name="border" value="solid"><span>solid</span></label>
-      </div>
-    </div>
-    <div class="control">
-      <label class="check">
-        <input id="ctl-shadow" type="checkbox" checked>
-        Show shadow
-      </label>
-    </div>
-  </div>
-  <!-- ---------- Grid ---------- -->
-  <div class="grid" id="grid">
-    <!-- A: Flat -->
-    <div class="cell">
-      <span class="variant-label">A &middot; Flat</span>
-      <div class="card v-flat"
-           data-snippet='<Card variant="flat" padding={PAD}>
-  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: dense lists on tinted backgrounds</p>
-    </div>
-    <!-- B: Outlined -->
-    <div class="cell">
-      <span class="variant-label">B &middot; Outlined</span>
-      <div class="card v-outlined"
-           data-snippet='<Card variant="outlined" padding={PAD} border="BORDER">
-  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: default content cards on ivory</p>
-    </div>
-    <!-- C: Elevated -->
-    <div class="cell">
-      <span class="variant-label">C &middot; Elevated</span>
-      <div class="card v-elevated"
-           data-snippet='<Card variant="elevated" padding={PAD} shadow="md">
-  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: draggable items, popovers</p>
-    </div>
-    <!-- D: Accent stripe -->
-    <div class="cell">
-      <span class="variant-label">D &middot; Accent stripe</span>
-      <div class="card v-stripe"
-           data-snippet='<Card variant="outlined" accent="clay" padding={PAD} border="BORDER">
-  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: pinned or priority items</p>
-    </div>
-    <!-- E: Inset / filled -->
-    <div class="cell">
-      <span class="variant-label">E &middot; Inset</span>
-      <div class="card v-inset"
-           data-snippet='<Card variant="filled" tone="oat" padding={PAD}>
-  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: nested cards inside white panels</p>
-    </div>
-    <!-- F: Horizontal / compact -->
-    <div class="cell">
-      <span class="variant-label">F &middot; Horizontal</span>
-      <div class="card v-horizontal"
-           data-snippet='<Card variant="outlined" layout="row" padding={PAD} border="BORDER">
-  <Card.Header avatar title="Weekly planning" />
-  <Card.Meta tags={["Q2", "Roadmap"]} />
-  <Button variant="ghost">Open</Button>
-</Card>'>
-        <div class="card-head">
-          <div class="avatar">WP</div>
-          <div class="card-titles">
-            <p class="card-title">Weekly planning</p>
-            <p class="card-sub">12 tasks &middot; due Friday</p>
-          </div>
-        </div>
-        <div class="chips">
-          <span class="chip">Q2</span>
-          <span class="chip olive">Roadmap</span>
-        </div>
-        <button class="ghost-btn">Open</button>
-      </div>
-      <p class="variant-note">best for: compact row lists, sidebars</p>
-    </div>
-  </div>
-  <!-- ---------- Snippet ---------- -->
-  <div class="snippet-panel">
-    <div class="snippet-head">JSX &mdash; hover a variant above</div>
-    <pre id="snippet">// hover a card to preview its props</pre>
-  </div>
-</div>
-<script>
-  (function () {
-    var root = document.documentElement;
-    var pad = document.getElementById('ctl-pad');
-    var padOut = document.getElementById('pad-out');
-    var shadow = document.getElementById('ctl-shadow');
-    var snippet = document.getElementById('snippet');
-    var currentBorder = 'hairline';
-    var borderMap = {
-      none: 'none',
-      hairline: '1px solid var(--gray-300)',
-      solid: '1.5px solid var(--gray-300)'
-    };
-    function applyPad() {
-      root.style.setProperty('--card-pad', pad.value + 'px');
-      padOut.textContent = pad.value + 'px';
-    }
-    function applyBorder(v) {
-      currentBorder = v;
-      root.style.setProperty('--card-border', borderMap[v]);
-    }
-    function applyShadow() {
-      root.style.setProperty('--card-shadow',
-        shadow.checked ? '0 4px 14px rgba(20,20,19,0.08)' : 'none');
-    }
-    pad.addEventListener('input', applyPad);
-    shadow.addEventListener('change', applyShadow);
-    document.querySelectorAll('input[name="border"]').forEach(function (r) {
-      r.addEventListener('change', function () { applyBorder(r.value); });
-    });
-    document.querySelectorAll('.card').forEach(function (card) {
-      card.addEventListener('mouseenter', function () {
-        var raw = card.getAttribute('data-snippet') || '';
-        snippet.textContent = raw
-          .replace(/PAD/g, pad.value)
-          .replace(/BORDER/g, currentBorder);
-      });
-    });
-    applyPad(); applyBorder('hairline'); applyShadow();
-  })();
-</script>
-</body>
-</html>