08その場で名前を変える

<main class="stage">
  <div class="rn is-demo" id="rn">
    <div class="rn__head">
      <span class="rn__title">プロジェクトファイル</span>
      <button class="rn__add" type="button" id="rn-add" aria-label="新しいファイルを追加"><svg viewBox="0 0 256 256" width="11" height="11"><g fill="currentColor"><path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8"/></g></svg><span>ファイル追加</span></button>
    </div>
    <ul class="rn__tree" id="rn-tree" role="tree" aria-label="プロジェクトファイル" tabindex="0" aria-activedescendant="rn-2">
      <li class="rn__item" id="rn-1" role="treeitem" aria-level="1">
        <div class="rn__row" data-hit><span class="rn__ico rn__ico--folder" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span><span class="rn__name">src</span></div>
      </li>
      <li class="rn__item is-edit" id="rn-2" role="treeitem" aria-level="1" aria-label="notes.md">
        <div class="rn__row" data-hit>
          <span class="rn__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v128a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM144 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m-40-48v56a8 8 0 0 1-16 0v-30.62l-13.45 19.21a8 8 0 0 1-13.1 0L48 177.38V208a8 8 0 0 1-16 0v-56a8 8 0 0 1 14.55-4.59L68 178.05l21.45-30.64A8 8 0 0 1 104 152"/></g></svg></span>
          <span class="rn__stack" aria-hidden="true">
            <span class="rn__lab rn__lab--1">notes.md</span>
            <span class="rn__lab rn__lab--2">release-notes.md</span>
            <span class="rn__field"><span class="rn__fv rn__fv--1">notes.md</span><span class="rn__fv rn__fv--2">release-notes.md</span><span class="rn__caret"></span></span>
          </span>
          <span class="rn__ok" aria-hidden="true"><svg viewBox="0 0 256 256" width="12" height="12"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
        </div>
      </li>
      <li class="rn__item" id="rn-3" role="treeitem" aria-level="1">
        <div class="rn__row" data-hit><span class="rn__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v120h-24a8 8 0 0 0 0 16h24a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160Zm-12.19 145a20.82 20.82 0 0 1-9.19 15.23C133.43 215 127 216 121.13 216a61 61 0 0 1-15.13-2a8 8 0 1 1 4.3-15.41c4.38 1.2 15 2.7 19.55-.36c.88-.59 1.83-1.52 2.14-3.93c.35-2.67-.71-4.1-12.78-7.59c-9.35-2.7-25-7.23-23-23.11a20.56 20.56 0 0 1 9-14.95c11.84-8 30.71-3.31 32.83-2.76a8 8 0 0 1-4.07 15.48c-4.49-1.17-15.23-2.56-19.83.56a4.54 4.54 0 0 0-2 3.67c-.12.9-.14 1.09 1.11 1.9c2.31 1.49 6.45 2.68 10.45 3.84c9.79 2.83 26.35 7.66 24.11 24.97M80 152v38a26 26 0 0 1-52 0a8 8 0 0 1 16 0a10 10 0 0 0 20 0v-38a8 8 0 0 1 16 0"/></g></svg></span><span class="rn__name">app.js</span></div>
      </li>
      <li class="rn__item" id="rn-4" role="treeitem" aria-level="1">
        <div class="rn__row" data-hit><span class="rn__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z"/></g></svg></span><span class="rn__name">bundle.zip</span></div>
      </li>
    </ul>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-quick;
$easing: $ease-pop;
$color: $subject-blue;

@include stage($stage-paper);

.rn {
  box-sizing: border-box;
  width: min(276px, 88vw);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: $stage-ink;
}
.rn__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 $sp-2;
}
.rn__title {
  font-size: 10px; line-height: 12px; font-weight: 700;
  letter-spacing: .04em;
  color: rgba(23, 20, 26, .72);
}
.rn__add {
  display: inline-flex; align-items: center; gap: $sp-1;
  height: 20px;
  padding: 0 $sp-2;
  border: 1px solid rgba(23, 20, 26, .16);
  border-radius: $r-pill;
  background: #fff;
  font-family: inherit;
  font-size: 10px; line-height: 20px; font-weight: 800;
  color: $stage-ink;
  cursor: pointer;
}
.rn__add:hover { border-color: $color; color: $color; }
.rn__add svg { color: $color; }

.rn__tree { list-style: none; margin: 0; padding: 0; }
.rn__tree:focus-visible { outline: none; }
.rn__row {
  box-sizing: border-box;
  height: 26px;
  display: flex; align-items: center; gap: $sp-2;
  padding: 0 $sp-2;
  margin-bottom: $sp-1;
  border-radius: $r-xs;
  font-size: 12px; font-weight: 600;
  cursor: default;
  user-select: none;
}
.rn__row:hover { background: rgba(23, 20, 26, .05); }
.rn__ico { display: inline-flex; flex: 0 0 auto; color: $stage-ink; }
.rn__ico--folder { color: $color; }
.rn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn__ok {
  margin-left: auto;
  display: inline-flex; flex: 0 0 auto;
  color: $subject-mint;
  opacity: 0;
}
.rn__ok.is-flash { animation-name: rn-ok; animation-duration: 480ms; animation-timing-function: $ease-pop; animation-iteration-count: 1; }
@keyframes rn-ok { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

// 이름과 입력칸을 같은 자리에 겹쳐 둔다 — 교체는 컷
.rn__stack { position: relative; display: block; flex: 1; height: 26px; min-width: 0; }
.rn__lab {
  position: absolute; left: 0; top: 0;
  line-height: 26px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0;
}
.rn__field {
  position: absolute; left: -4px; top: 1px; right: 0;
  height: 24px;
  display: none; align-items: center;
  padding: 0 $sp-2;
  border: 1px solid $color;
  border-radius: $r-xs;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 109, 246, .18);
  opacity: 0;
}
.rn__fv { font-size: 12px; font-weight: 600; white-space: nowrap; }
.rn__fv--1 { background: rgba(47, 109, 246, .18); }
.rn__caret {
  display: inline-block;
  width: 1px; height: 14px;
  margin-left: 0;
  background: $color;
}
.rn__live { display: inline-flex; flex: 1; min-width: 0; }
.rn__edit {
  box-sizing: border-box;
  width: 100%; height: 22px;
  padding: 0 $sp-2;
  border: 1px solid $color;
  border-radius: $r-xs;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 109, 246, .18);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  color: $stage-ink;
  outline: none;
}

// ── 자동 루프: 두 번 눌러 열고 → 치고 → Enter ──
.rn.is-demo .rn__lab--1 {
  animation-name: rn-l1;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-l1 { 0% { opacity: 1; } 8% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rn.is-demo .rn__lab--2 {
  animation-name: rn-l2;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-l2 { 0% { opacity: 0; } 52% { opacity: 1; } 82% { opacity: 1; } 82.01%, 100% { opacity: 0; } }
.rn.is-demo .rn__field {
  display: flex;
  animation-name: rn-f;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-f { 0% { opacity: 0; } 8% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
.rn.is-demo .rn__fv--1 {
  animation-name: rn-v1;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-v1 { 0%, 7.9% { opacity: 0; } 8% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
.rn.is-demo .rn__fv--2 {
  animation-name: rn-v2;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-v2 { 0%, 35.9% { opacity: 0; } 36% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
.rn.is-demo .rn__caret {
  animation-name: rn-caret;
  animation-duration: $dur-loop;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes rn-caret {
  0%, 7.9% { opacity: 0; }
  8% { opacity: 1; } 16% { opacity: 0; } 24% { opacity: 1; } 32% { opacity: 0; } 40% { opacity: 1; }
  48% { opacity: 0; } 52%, 100% { opacity: 0; }
}
.rn.is-demo .rn__ok {
  animation-name: rn-oka;
  animation-duration: $dur-loop;
  animation-timing-function: $ease-pop;
  animation-iteration-count: infinite;
}
@keyframes rn-oka {
  0%, 51.9% { opacity: 0; transform: scale(.5); }
  56% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.5); }
}

@media (max-width: 340px) {
  .rn__row { height: 22px; font-size: 11px; }
  .rn__lab { line-height: 22px; }
  .rn__field { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rn.is-demo .rn__lab, .rn.is-demo .rn__field, .rn.is-demo .rn__fv, .rn.is-demo .rn__caret, .rn.is-demo .rn__ok { animation: none !important; }
  .rn.is-demo .rn__lab--1 { opacity: 1; }
  .rn.is-demo .rn__field { display: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.rn {
  box-sizing: border-box;
  width: min(276px, 88vw);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: #17141a;
}

.rn__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

.rn__title {
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(23, 20, 26, 0.72);
}

.rn__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(23, 20, 26, 0.16);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 10px;
  line-height: 20px;
  font-weight: 800;
  color: #17141a;
  cursor: pointer;
}

.rn__add:hover {
  border-color: #2f6df6;
  color: #2f6df6;
}

.rn__add svg {
  color: #2f6df6;
}

.rn__tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rn__tree:focus-visible {
  outline: none;
}

.rn__row {
  box-sizing: border-box;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}

.rn__row:hover {
  background: rgba(23, 20, 26, 0.05);
}

.rn__ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: #17141a;
}

.rn__ico--folder {
  color: #2f6df6;
}

.rn__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rn__ok {
  margin-left: auto;
  display: inline-flex;
  flex: 0 0 auto;
  color: #4cd4a6;
  opacity: 0;
}

.rn__ok.is-flash {
  animation-name: rn-ok;
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: 1;
}

@keyframes rn-ok {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.rn__stack {
  position: relative;
  display: block;
  flex: 1;
  height: 26px;
  min-width: 0;
}

.rn__lab {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0;
}

.rn__field {
  position: absolute;
  left: -4px;
  top: 1px;
  right: 0;
  height: 24px;
  display: none;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #2f6df6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 109, 246, 0.18);
  opacity: 0;
}

.rn__fv {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.rn__fv--1 {
  background: rgba(47, 109, 246, 0.18);
}

.rn__caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: 0;
  background: #2f6df6;
}

.rn__live {
  display: inline-flex;
  flex: 1;
  min-width: 0;
}

.rn__edit {
  box-sizing: border-box;
  width: 100%;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #2f6df6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 109, 246, 0.18);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #17141a;
  outline: none;
}

.rn.is-demo .rn__lab--1 {
  animation-name: rn-l1;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-l1 {
  0% {
    opacity: 1;
  }
  8% {
    opacity: 0;
  }
  94% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.rn.is-demo .rn__lab--2 {
  animation-name: rn-l2;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-l2 {
  0% {
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  82.01%, 100% {
    opacity: 0;
  }
}
.rn.is-demo .rn__field {
  display: flex;
  animation-name: rn-f;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-f {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.rn.is-demo .rn__fv--1 {
  animation-name: rn-v1;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-v1 {
  0%, 7.9% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.rn.is-demo .rn__fv--2 {
  animation-name: rn-v2;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-v2 {
  0%, 35.9% {
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.rn.is-demo .rn__caret {
  animation-name: rn-caret;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes rn-caret {
  0%, 7.9% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  16% {
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  52%, 100% {
    opacity: 0;
  }
}
.rn.is-demo .rn__ok {
  animation-name: rn-oka;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite;
}

@keyframes rn-oka {
  0%, 51.9% {
    opacity: 0;
    transform: scale(0.5);
  }
  56% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@media (max-width: 340px) {
  .rn__row {
    height: 22px;
    font-size: 11px;
  }
  .rn__lab {
    line-height: 22px;
  }
  .rn__field {
    height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rn.is-demo .rn__lab, .rn.is-demo .rn__field, .rn.is-demo .rn__fv, .rn.is-demo .rn__caret, .rn.is-demo .rn__ok {
    animation: none !important;
  }
  .rn.is-demo .rn__lab--1 {
    opacity: 1;
  }
  .rn.is-demo .rn__field {
    display: none;
  }
}

// 실제 동작: 두 번 누르거나 F2 로 그 자리에서 고치고, + 로 새 줄을 넣는다.
var root = document.querySelector('.rn');
var tree = document.getElementById('rn-tree');
function edit(li, startName) {
  root.classList.remove('is-demo');
  li.querySelector('.rn__stack').style.display = 'none';
  var name = li.querySelector('.rn__name') || li.querySelector('.rn__stack');
  var holder = document.createElement('span');
  holder.className = 'rn__live';
  var inp = document.createElement('input');
  inp.type = 'text'; inp.className = 'rn__edit';
  inp.value = startName != null ? startName : (li.getAttribute('aria-label') || 'notes.md');
  inp.setAttribute('aria-label', 'ファイル名');
  holder.appendChild(inp);
  li.querySelector('.rn__row').insertBefore(holder, li.querySelector('.rn__ok'));
  inp.focus({ preventScroll: true });
  inp.select();
  function done(save) {
    var v = inp.value.trim();
    if (save && v) {
      var stack = li.querySelector('.rn__stack');
      if (stack) {
        stack.remove();
        var n = document.createElement('span');
        n.className = 'rn__name';
        n.textContent = v;
        li.querySelector('.rn__row').insertBefore(n, holder);
        li.setAttribute('aria-label', v);
      } else {
        var nm = li.querySelector('.rn__name');
        if (nm) { nm.textContent = v; nm.style.visibility = ''; }
      }
      var ok = li.querySelector('.rn__ok');
      if (ok) { ok.classList.add('is-flash'); setTimeout(function () { ok.classList.remove('is-flash'); }, 480); }
    } else {
      var nm2 = li.querySelector('.rn__name');
      if (nm2) nm2.style.visibility = '';
      var st2 = li.querySelector('.rn__stack');
      if (st2) st2.style.display = '';
    }
    holder.remove();
    tree.focus({ preventScroll: true });
  }
  inp.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { done(true); e.preventDefault(); }
    else if (e.key === 'Escape') { done(false); e.preventDefault(); }
  });
}
tree.querySelectorAll('.rn__item').forEach(function (li) {
  li.querySelector('.rn__row').addEventListener('click', function () {
    tree.setAttribute('aria-activedescendant', li.id);
  });
  li.querySelector('.rn__row').addEventListener('dblclick', function () {
    if (li.classList.contains('is-edit')) { edit(li); return; }
    var nm = li.querySelector('.rn__name');
    if (nm) { edit(li, nm.textContent); nm.style.visibility = 'hidden'; }
  });
});
tree.addEventListener('keydown', function (e) {
  var li = document.getElementById(tree.getAttribute('aria-activedescendant'));
  if ((e.key === 'F2' || e.key === 'Enter') && li) {
    var nm = li.querySelector('.rn__name');
    if (li.classList.contains('is-edit')) edit(li);
    else if (nm) { edit(li, nm.textContent); nm.style.visibility = 'hidden'; }
    e.preventDefault();
  }
});
document.getElementById('rn-add').addEventListener('click', function () {
  root.classList.remove('is-demo');
  var li = document.createElement('li');
  li.className = 'rn__item';
  li.id = 'rn-new-' + Date.now();
  li.setAttribute('role', 'treeitem');
  li.setAttribute('aria-level', '1');
  li.innerHTML = '<div class="rn__row"><span class="rn__ico"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v128a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM144 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m-40-48v56a8 8 0 0 1-16 0v-30.62l-13.45 19.21a8 8 0 0 1-13.1 0L48 177.38V208a8 8 0 0 1-16 0v-56a8 8 0 0 1 14.55-4.59L68 178.05l21.45-30.64A8 8 0 0 1 104 152"/></g></svg></span><span class="rn__name">new-file.md</span><span class="rn__ok"></span></div>';
  tree.appendChild(li);
  tree.setAttribute('aria-activedescendant', li.id);
  li.querySelector('.rn__row').addEventListener('click', function () { tree.setAttribute('aria-activedescendant', li.id); });
  edit(li, 'new-file.md');
});

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./InlineRenameTree.module.scss";

export type RenameNode = { id: string; name: string; kind?: "file" | "folder" };

export type InlineRenameTreeProps = {
  title?: string;
  addLabel?: string;
  newName?: string;
  nodes?: RenameNode[];
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type KeyEvt = { key: string; preventDefault: () => void };
type ChangeEvt = { target: { value: string } };

const DEFAULT_NODES: RenameNode[] = [
  { id: "rn-1", name: "src", kind: "folder" },
  { id: "rn-2", name: "notes.md" },
  { id: "rn-3", name: "app.js" },
  { id: "rn-4", name: "bundle.zip" },
];

function folderIcon() {
  return (
    <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true">
      <g fill="currentColor">
        <path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2" />
        <path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z" />
      </g>
    </svg>
  );
}

function fileIcon() {
  return (
    <svg viewBox="0 0 256 256" width="13" height="13" aria-hidden="true">
      <g fill="currentColor">
        <path d="M208 88h-56V32Z" opacity=".2" />
        <path d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v128a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM144 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m-40-48v56a8 8 0 0 1-16 0v-30.62l-13.45 19.21a8 8 0 0 1-13.1 0L48 177.38V208a8 8 0 0 1-16 0v-56a8 8 0 0 1 14.55-4.59L68 178.05l21.45-30.64A8 8 0 0 1 104 152" />
      </g>
    </svg>
  );
}

function plusIcon() {
  return (
    <svg viewBox="0 0 256 256" width="11" height="11" aria-hidden="true">
      <g fill="currentColor">
        <path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2" />
        <path d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8" />
      </g>
    </svg>
  );
}

function okIcon() {
  return (
    <svg viewBox="0 0 256 256" width="12" height="12" aria-hidden="true">
      <g fill="currentColor">
        <path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2" />
        <path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32" />
      </g>
    </svg>
  );
}

export default function InlineRenameTree({
  title = "프로젝트 파일",
  addLabel = "파일 추가",
  newName = "new-file.md",
  nodes = DEFAULT_NODES,
  duration = 220,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#2f6df6",
}: InlineRenameTreeProps) {
  const [list, setList] = useState<RenameNode[]>(nodes);
  const [at, setAt] = useState(nodes.length > 1 ? nodes[1].id : nodes[0].id);
  const [editing, setEditing] = useState<string | null>(null);
  const [draft, setDraft] = useState("");
  const [flash, setFlash] = useState<string | null>(null);
  const treeRef = useRef<HTMLUListElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const seq = useRef<number>(0);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 입력칸이 뜨면 그 자리로 포커스 + 기존 이름 전체선택
  useEffect(() => {
    if (!editing) return;
    const input = inputRef.current;
    if (!input) return;
    input.focus({ preventScroll: true });
    input.select();
  }, [editing]);

  // 저장 뒤 체크 표시 한 번 (vanilla 의 is-flash 480ms 와 같은 길이)
  useEffect(() => {
    if (!flash) return;
    const t = window.setTimeout(() => setFlash(null), 480);
    return () => window.clearTimeout(t);
  }, [flash]);

  function edit(id: string, name: string) {
    setAt(id);
    setDraft(name);
    setEditing(id);
  }

  function done(save: boolean) {
    const id = editing;
    if (!id) return;
    const v = draft.trim();
    if (save && v) {
      setList((ns) => ns.map((n) => (n.id === id ? { id: n.id, name: v, kind: n.kind } : n)));
      setFlash(id);
    }
    setEditing(null);
    treeRef.current?.focus({ preventScroll: true });
  }

  function onInputKeyDown(e: KeyEvt) {
    if (e.key === "Enter") { done(true); e.preventDefault(); }
    else if (e.key === "Escape") { done(false); e.preventDefault(); }
  }

  function onTreeKeyDown(e: KeyEvt) {
    if (editing) return;
    if (e.key === "F2" || e.key === "Enter") {
      const n = list.filter((x) => x.id === at)[0];
      if (n) edit(n.id, n.name);
      e.preventDefault();
    }
  }

  function add() {
    const k = (seq.current || 0) + 1;
    seq.current = k;
    const id = `rn-new-${k}`;
    setList((ns) => ns.concat([{ id, name: newName }]));
    edit(id, newName);
  }

  return (
    <div className={styles.rn} style={vars}>
      <div className={styles.head}>
        <span className={styles.title} id="rn-title">{title}</span>
        <button className={styles.add} type="button" aria-label={addLabel} onClick={add}>
          {plusIcon()}
          <span>{addLabel}</span>
        </button>
      </div>
      <ul
        ref={treeRef}
        className={styles.tree}
        role="tree"
        aria-labelledby="rn-title"
        tabIndex={0}
        aria-activedescendant={at}
        onKeyDown={onTreeKeyDown}
      >
        {list.map((n) => (
          <li key={n.id} id={n.id} className={styles.item} role="treeitem" aria-level={1} aria-label={n.name}>
            <div
              className={`${styles.row} ${at === n.id ? styles.isAt : ""}`}
              onClick={() => setAt(n.id)}
              onDoubleClick={() => edit(n.id, n.name)}
            >
              <span className={`${styles.ico} ${n.kind === "folder" ? styles.icoFolder : ""}`}>
                {n.kind === "folder" ? folderIcon() : fileIcon()}
              </span>
              {editing === n.id ? (
                <span className={styles.live}>
                  <input
                    ref={inputRef}
                    className={styles.edit}
                    type="text"
                    aria-label="파일 이름"
                    value={draft}
                    onChange={(e: ChangeEvt) => setDraft(e.target.value)}
                    onKeyDown={onInputKeyDown}
                  />
                </span>
              ) : (
                <span className={styles.name}>{n.name}</span>
              )}
              <span className={`${styles.ok} ${flash === n.id ? styles.isFlash : ""}`} aria-hidden="true">
                {okIcon()}
              </span>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}