File Tab Copy Block

<!-- File Tab Copy Block — filename tab bar with a copy button that swaps to a confirmed check + label -->
<div class="nuda-ct2-file-copy">
  <div class="nuda-ct2-file-copy__bar">
    <span class="nuda-ct2-file-copy__file">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M14 3 L14 8 L19 8" />
        <path d="M6 3 L14 3 L19 8 L19 21 L6 21 Z" />
      </svg>
      index.ts
    </span>
    <button class="nuda-ct2-file-copy__btn" type="button" aria-label="Copy code">
      <svg class="nuda-ct2-file-copy__icon nuda-ct2-file-copy__icon--copy" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="8" y="8" width="13" height="13" rx="2" />
        <path d="M16 8 L16 5 A 2 2 0 0 0 14 3 L5 3 A 2 2 0 0 0 3 5 L3 14 A 2 2 0 0 0 5 16 L8 16" />
      </svg>
      <svg class="nuda-ct2-file-copy__icon nuda-ct2-file-copy__icon--check" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
      <span class="nuda-ct2-file-copy__msg">Copied</span>
    </button>
  </div>
  <pre class="nuda-ct2-file-copy__code"><code><span class="nuda-ct2-file-copy__kw">export const</span> sum = (a, b) =&gt; a + b;</code></pre>
</div>

/* File Tab Copy Block — copies the code block's text, then toggles .is-copied for ~1.6s */

(function () {
  document.querySelectorAll('.nuda-ct2-file-copy__btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var block = btn.closest('.nuda-ct2-file-copy');
      var code = block ? block.querySelector('.nuda-ct2-file-copy__code') : null;
      var text = code ? code.textContent : '';

      navigator.clipboard.writeText(text).then(function () {
        btn.classList.add('is-copied');
        setTimeout(function () { btn.classList.remove('is-copied'); }, 1600);
      });
    });
  });
})();

.nuda-ct2-file-copy {
  width: 290px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  font: 500 11px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.nuda-ct2-file-copy__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  background: #161616;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-ct2-file-copy__file {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cfcfcf;
}

.nuda-ct2-file-copy__file svg {
  width: 12px;
  height: 12px;
  color: #e4ff54;
  flex-shrink: 0;
}

.nuda-ct2-file-copy__btn {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 26px;
  padding: 4px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #a1a1aa;
  border-radius: 5px;
  cursor: pointer;
  font: 600 9px ui-sans-serif,system-ui;
  transition: background .2s,color .2s,border-color .2s;
}

.nuda-ct2-file-copy__btn:hover {
  background: rgba(228,255,84,.08);
  color: #e4ff54;
  border-color: rgba(228,255,84,.3);
}

.nuda-ct2-file-copy__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-ct2-file-copy__icon {
  width: 12px;
  height: 12px;
  transition: transform .25s,opacity .2s;
}

.nuda-ct2-file-copy__icon--check {
  position: absolute;
  left: 8px;
  color: #e4ff54;
  transform: scale(0);
  opacity: 0;
}

.nuda-ct2-file-copy__msg {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .2s;
}

.nuda-ct2-file-copy__btn.is-copied .nuda-ct2-file-copy__icon--copy {
  opacity: 0;
  transform: scale(.4);
}

.nuda-ct2-file-copy__btn.is-copied .nuda-ct2-file-copy__icon--check {
  transform: scale(1);
  opacity: 1;
  animation: _nuda-ct2filecopypop .4s cubic-bezier(.34,1.56,.64,1);
}

.nuda-ct2-file-copy__btn.is-copied .nuda-ct2-file-copy__msg {
  opacity: 1;
  max-width: 50px;
  margin-left: 12px;
  color: #e4ff54;
}

.nuda-ct2-file-copy__code {
  margin: 0;
  padding: 10px;
  color: #fafafa;
}

.nuda-ct2-file-copy__kw {
  color: #a78bfa;
}

@keyframes _nuda-ct2filecopypop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ct2-file-copy__btn.is-copied .nuda-ct2-file-copy__icon--check {
    animation: none;
  }
  .nuda-ct2-file-copy__icon,.nuda-ct2-file-copy__msg {
    transition: none;
  }
}