05曜日ごとに一本ずつ伸ばす勤務時間バー

<main class="stage">
  <div class="wh is-demo">
    <div class="wh__scale" aria-hidden="true">
      <span class="wh__pad"></span>
      <span class="wh__marks"><span>0</span><span>6</span><span>12</span><span>18</span><span>24</span></span>
      <span class="wh__pad"></span>
    </div>

    <div class="wh__row" data-d="mon" data-s="18" data-e="36" style="--s:.375;--e:.75">
      <span class="wh__day"><span class="wh__full" id="wh-d1">月曜日</span><span class="wh__ab" aria-hidden="true">月</span></span>
      <div class="wh__axis" role="group" aria-labelledby="wh-d1">
        <span class="wh__rail" aria-hidden="true"></span>
        <span class="wh__pos" aria-hidden="true"><span class="wh__bar"></span></span>
        <span class="wh__h wh__h--s"><span class="wh__grip" role="slider" tabindex="0" aria-label="開始" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="540" aria-valuetext="09:00"></span></span>
        <span class="wh__h wh__h--e"><span class="wh__grip" role="slider" tabindex="0" aria-label="終了" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="1080" aria-valuetext="18:00"></span></span>
      </div>
      <span class="wh__read"><span data-k="1">09:00–18:00</span></span>
    </div>

    <div class="wh__row" data-d="tue" data-s="18" data-e="36" style="--s:.375;--e:.75">
      <span class="wh__day"><span class="wh__full" id="wh-d2">火曜日</span><span class="wh__ab" aria-hidden="true">火</span></span>
      <div class="wh__axis" role="group" aria-labelledby="wh-d2">
        <span class="wh__rail" aria-hidden="true"></span>
        <span class="wh__pos" aria-hidden="true"><span class="wh__bar"></span></span>
        <span class="wh__h wh__h--s"><span class="wh__grip" role="slider" tabindex="0" aria-label="開始" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="540" aria-valuetext="09:00"></span></span>
        <span class="wh__h wh__h--e"><span class="wh__grip" role="slider" tabindex="0" aria-label="終了" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="1080" aria-valuetext="18:00"></span></span>
      </div>
      <span class="wh__read"><span data-k="1">09:00–18:00</span></span>
    </div>

    <div class="wh__row" data-d="wed" data-s="20" data-e="38" style="--s:.41667;--e:.79167">
      <span class="wh__day"><span class="wh__full" id="wh-d3">水曜日</span><span class="wh__ab" aria-hidden="true">水</span></span>
      <div class="wh__axis" role="group" aria-labelledby="wh-d3">
        <span class="wh__rail" aria-hidden="true"></span>
        <span class="wh__pos" aria-hidden="true"><span class="wh__bar"></span></span>
        <span class="wh__h wh__h--s"><span class="wh__grip" role="slider" tabindex="0" aria-label="開始" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="600" aria-valuetext="10:00"></span></span>
        <span class="wh__h wh__h--e"><span class="wh__grip" role="slider" tabindex="0" aria-label="終了" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="1140" aria-valuetext="19:00"></span></span>
      </div>
      <span class="wh__read"><span data-k="1">10:00–19:00</span><span data-k="2" aria-hidden="true">10:00–22:00</span></span>
    </div>

    <div class="wh__row" data-d="thu" data-s="18" data-e="35" style="--s:.375;--e:.72917">
      <span class="wh__day"><span class="wh__full" id="wh-d4">木曜日</span><span class="wh__ab" aria-hidden="true">木</span></span>
      <div class="wh__axis" role="group" aria-labelledby="wh-d4">
        <span class="wh__rail" aria-hidden="true"></span>
        <span class="wh__pos" aria-hidden="true"><span class="wh__bar"></span></span>
        <span class="wh__h wh__h--s"><span class="wh__grip" role="slider" tabindex="0" aria-label="開始" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="540" aria-valuetext="09:00"></span></span>
        <span class="wh__h wh__h--e"><span class="wh__grip" role="slider" tabindex="0" aria-label="終了" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="1050" aria-valuetext="17:30"></span></span>
      </div>
      <span class="wh__read"><span data-k="1">09:00–17:30</span></span>
    </div>

    <div class="wh__row" data-d="fri" data-s="18" data-e="32" style="--s:.375;--e:.66667">
      <span class="wh__day"><span class="wh__full" id="wh-d5">金曜日</span><span class="wh__ab" aria-hidden="true">金</span></span>
      <div class="wh__axis" role="group" aria-labelledby="wh-d5">
        <span class="wh__rail" aria-hidden="true"></span>
        <span class="wh__pos" aria-hidden="true"><span class="wh__bar"></span></span>
        <span class="wh__h wh__h--s"><span class="wh__grip" role="slider" tabindex="0" aria-label="開始" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="540" aria-valuetext="09:00"></span></span>
        <span class="wh__h wh__h--e"><span class="wh__grip" role="slider" tabindex="0" aria-label="終了" aria-valuemin="0" aria-valuemax="1440" aria-valuenow="960" aria-valuetext="16:00"></span></span>
      </div>
      <span class="wh__read"><span data-k="1">09:00–16:00</span></span>
    </div>
  </div>
</main>

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

$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-mint;

@include stage($stage-ink);

.wh {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: $sp-2;
  width: min(420px, 90vw);
  overflow: hidden; // 손잡이 레이어가 축 폭만큼 밀려도 문서가 안 넘치게
  color: $subject-cream;
}

.wh__scale,
.wh__row {
  display: grid;
  grid-template-columns: clamp(16px, 6vw, 40px) minmax(0, 1fr) clamp(62px, 22vw, 84px);
  gap: $sp-2;
  align-items: center;
}

.wh__marks {
  display: flex;
  justify-content: space-between;
}
.wh__marks span {
  font-size: clamp(8px, 2.4vw, 10px);
  line-height: 12px;
  font-weight: 500;
  color: rgba($subject-cream, .55);
}

.wh__day {
  font-size: clamp(9px, 3vw, 12px);
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.wh__ab { display: none; }

.wh__axis {
  position: relative;
  height: clamp(20px, 6.5vw, 26px);
}

.wh__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: clamp(10px, 3.4vw, 14px);
  translate: 0 -50%;
  border-radius: $r-pill;
  background-color: rgba($subject-cream, .14);
  background-image: repeating-linear-gradient(90deg, rgba($subject-cream, .34) 0 1px, rgba($subject-cream, 0) 1px 25%);
}

// 막대는 자리를 translateX 로, 길이를 폭으로 — 늘여도 알약 모서리가 찌그러지지 않는다
.wh__pos {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: translateX(calc(var(--s) * 100%));
}
.wh__bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc((var(--e) - var(--s)) * 100%);
  height: clamp(10px, 3.4vw, 14px);
  translate: 0 -50%;
  border-radius: $r-pill;
  background-color: $color;
}

.wh__h {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.wh__h--s { transform: translateX(calc(var(--s) * 100%)); }
.wh__h--e { transform: translateX(calc(var(--e) * 100%)); }

.wh__grip {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(12px, 4vw, 16px);
  height: clamp(12px, 4vw, 16px);
  translate: -50% -50%;
  border-radius: 50%;
  background-color: $subject-cream;
  box-shadow: $shadow-press;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.wh__grip:focus-visible { outline: 3px solid $color; outline-offset: 2px; }

.wh__read {
  position: relative;
  height: 14px;
}
.wh__read span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: clamp(8px, 2.6vw, 11px);
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba($subject-cream, .88);
}
.wh__read span[data-k="2"] { opacity: 0; }

// ── 자동 루프: 수요일 끝 손잡이가 늘어났다 줄고, 나머지 줄은 시차로 밝아진다 ──
.wh.is-demo .wh__row[data-d="wed"] .wh__bar,
.wh.is-demo .wh__row[data-d="wed"] .wh__h--e {
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.wh.is-demo .wh__row[data-d="wed"] .wh__bar { animation-name: wh-grow; }
.wh.is-demo .wh__row[data-d="wed"] .wh__h--e { animation-name: wh-end; }

@keyframes wh-grow {
  0%, 10%   { width: 37.5%; }
  36%, 52%  { width: 50%; }
  78%, 100% { width: 37.5%; }
}
@keyframes wh-end {
  0%, 10%   { transform: translateX(79.167%) scale(1); }
  36%       { transform: translateX(91.667%) scale(1.18); }
  42%, 52%  { transform: translateX(91.667%) scale(1); }
  78%, 100% { transform: translateX(79.167%) scale(1); }
}

// 끄는 동안 다시 계산된 숫자는 한 프레임에 컷으로 갈린다
.wh.is-demo .wh__row[data-d="wed"] .wh__read span {
  animation-duration: $duration;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.wh.is-demo .wh__row[data-d="wed"] .wh__read span[data-k="1"] { animation-name: wh-t1; }
.wh.is-demo .wh__row[data-d="wed"] .wh__read span[data-k="2"] { animation-name: wh-t2; }
@keyframes wh-t1 { 0% { opacity: 1; } 36% { opacity: 0; } 78% { opacity: 1; } 100% { opacity: 1; } }
@keyframes wh-t2 { 0% { opacity: 0; } 36% { opacity: 1; } 78% { opacity: 0; } 100% { opacity: 0; } }

.wh.is-demo .wh__row:not([data-d="wed"]) {
  animation-name: wh-glow;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.wh.is-demo .wh__row[data-d="tue"] { animation-delay: 120ms; }
.wh.is-demo .wh__row[data-d="thu"] { animation-delay: 240ms; }
.wh.is-demo .wh__row[data-d="fri"] { animation-delay: 360ms; }
@keyframes wh-glow {
  0%        { opacity: .55; }
  22%       { opacity: 1; }
  48%, 100% { opacity: .55; }
}

@media (max-width: 340px) {
  .wh { gap: $sp-1; }
  .wh__scale,
  .wh__row { gap: $sp-1; }
  .wh__full {
    display: inline-block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .wh__ab { display: inline; }
  .wh__read { height: 12px; }
  .wh__read span { line-height: 12px; }
  .wh__marks span { line-height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wh.is-demo .wh__row,
  .wh.is-demo .wh__bar,
  .wh.is-demo .wh__h--e,
  .wh.is-demo .wh__read span { animation: none !important; }
  .wh.is-demo .wh__read span[data-k="2"] { opacity: 0; }
}

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

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

.wh {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, 90vw);
  overflow: hidden;
  color: #fff7e6;
}

.wh__scale,
.wh__row {
  display: grid;
  grid-template-columns: clamp(16px, 6vw, 40px) minmax(0, 1fr) clamp(62px, 22vw, 84px);
  gap: 8px;
  align-items: center;
}

.wh__marks {
  display: flex;
  justify-content: space-between;
}

.wh__marks span {
  font-size: clamp(8px, 2.4vw, 10px);
  line-height: 12px;
  font-weight: 500;
  color: rgba(255, 247, 230, 0.55);
}

.wh__day {
  font-size: clamp(9px, 3vw, 12px);
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.wh__ab {
  display: none;
}

.wh__axis {
  position: relative;
  height: clamp(20px, 6.5vw, 26px);
}

.wh__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: clamp(10px, 3.4vw, 14px);
  translate: 0 -50%;
  border-radius: 999px;
  background-color: rgba(255, 247, 230, 0.14);
  background-image: repeating-linear-gradient(90deg, rgba(255, 247, 230, 0.34) 0 1px, rgba(255, 247, 230, 0) 1px 25%);
}

.wh__pos {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: translateX(calc(var(--s) * 100%));
}

.wh__bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc((var(--e) - var(--s)) * 100%);
  height: clamp(10px, 3.4vw, 14px);
  translate: 0 -50%;
  border-radius: 999px;
  background-color: #4cd4a6;
}

.wh__h {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}

.wh__h--s {
  transform: translateX(calc(var(--s) * 100%));
}

.wh__h--e {
  transform: translateX(calc(var(--e) * 100%));
}

.wh__grip {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(12px, 4vw, 16px);
  height: clamp(12px, 4vw, 16px);
  translate: -50% -50%;
  border-radius: 50%;
  background-color: #fff7e6;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.wh__grip:focus-visible {
  outline: 3px solid #4cd4a6;
  outline-offset: 2px;
}

.wh__read {
  position: relative;
  height: 14px;
}

.wh__read span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: clamp(8px, 2.6vw, 11px);
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 247, 230, 0.88);
}

.wh__read span[data-k="2"] {
  opacity: 0;
}

.wh.is-demo .wh__row[data-d=wed] .wh__bar,
.wh.is-demo .wh__row[data-d=wed] .wh__h--e {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.wh.is-demo .wh__row[data-d=wed] .wh__bar {
  animation-name: wh-grow;
}

.wh.is-demo .wh__row[data-d=wed] .wh__h--e {
  animation-name: wh-end;
}

@keyframes wh-grow {
  0%, 10% {
    width: 37.5%;
  }
  36%, 52% {
    width: 50%;
  }
  78%, 100% {
    width: 37.5%;
  }
}
@keyframes wh-end {
  0%, 10% {
    transform: translateX(79.167%) scale(1);
  }
  36% {
    transform: translateX(91.667%) scale(1.18);
  }
  42%, 52% {
    transform: translateX(91.667%) scale(1);
  }
  78%, 100% {
    transform: translateX(79.167%) scale(1);
  }
}
.wh.is-demo .wh__row[data-d=wed] .wh__read span {
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.wh.is-demo .wh__row[data-d=wed] .wh__read span[data-k="1"] {
  animation-name: wh-t1;
}

.wh.is-demo .wh__row[data-d=wed] .wh__read span[data-k="2"] {
  animation-name: wh-t2;
}

@keyframes wh-t1 {
  0% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wh-t2 {
  0% {
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.wh.is-demo .wh__row:not([data-d=wed]) {
  animation-name: wh-glow;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.wh.is-demo .wh__row[data-d=tue] {
  animation-delay: 120ms;
}

.wh.is-demo .wh__row[data-d=thu] {
  animation-delay: 240ms;
}

.wh.is-demo .wh__row[data-d=fri] {
  animation-delay: 360ms;
}

@keyframes wh-glow {
  0% {
    opacity: 0.55;
  }
  22% {
    opacity: 1;
  }
  48%, 100% {
    opacity: 0.55;
  }
}
@media (max-width: 340px) {
  .wh {
    gap: 4px;
  }
  .wh__scale,
  .wh__row {
    gap: 4px;
  }
  .wh__full {
    display: inline-block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .wh__ab {
    display: inline;
  }
  .wh__read {
    height: 12px;
  }
  .wh__read span {
    line-height: 12px;
  }
  .wh__marks span {
    line-height: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wh.is-demo .wh__row,
  .wh.is-demo .wh__bar,
  .wh.is-demo .wh__h--e,
  .wh.is-demo .wh__read span {
    animation: none !important;
  }
  .wh.is-demo .wh__read span[data-k="2"] {
    opacity: 0;
  }
}

(function () {
  var root = document.querySelector('.wh');
  var rows = [].slice.call(root.querySelectorAll('.wh__row'));
  var drag = null;
  function clamp(x, lo, hi) { return Math.min(Math.max(x, lo), hi); }      // 축 밖으로 못 나간다
  function fmt(t) { var h = t / 2 | 0; return (h < 10 ? '0' : '') + h + ':' + (t % 2 ? '30' : '00'); }
  function draw(r) {
    var s = +r.dataset.s, e = +r.dataset.e, g = r.querySelectorAll('.wh__grip');
    r.style.setProperty('--s', s / 48); r.style.setProperty('--e', e / 48);
    g[0].setAttribute('aria-valuenow', s * 30); g[0].setAttribute('aria-valuetext', fmt(s));
    g[1].setAttribute('aria-valuenow', e * 30); g[1].setAttribute('aria-valuetext', fmt(e));
    r.querySelector('.wh__read [data-k="1"]').textContent = fmt(s) + '–' + fmt(e);
  }
  function set(r, i, t) {                                                  // 30分 한 칸
    if (i) r.dataset.e = clamp(t, +r.dataset.s + 1, 48);
    else r.dataset.s = clamp(t, 0, +r.dataset.e - 1);
    draw(r);
  }
  function at(r, e) {
    var b = r.querySelector('.wh__axis').getBoundingClientRect();
    return Math.round((e.clientX - b.left) / b.width * 48);
  }
  function grip(e) { return e.target.closest ? e.target.closest('.wh__grip') : null; }
  function side(g) { return g.parentNode.classList.contains('wh__h--e') ? 1 : 0; }
  root.addEventListener('pointerdown', function (e) {
    var g = grip(e); if (!g) return;
    root.classList.remove('is-demo');
    drag = { r: g.closest('.wh__row'), i: side(g) };
    g.setPointerCapture(e.pointerId); g.focus({ preventScroll: true }); e.preventDefault();
  });
  root.addEventListener('pointermove', function (e) { if (drag) set(drag.r, drag.i, at(drag.r, e)); });
  root.addEventListener('pointerup', function () { drag = null; });
  root.addEventListener('keydown', function (e) {
    var g = grip(e); if (!g) return;
    var d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
    if (!d && e.key !== 'Home' && e.key !== 'End') return;
    root.classList.remove('is-demo'); e.preventDefault();
    var r = g.closest('.wh__row'), i = side(g);
    set(r, i, e.key === 'Home' ? 0 : e.key === 'End' ? 48 : (i ? +r.dataset.e : +r.dataset.s) + d);
  });
  rows.forEach(draw);
})();

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

export type WorkingHoursDayBarsProps = {
  labels?: { full: string[]; abbr: string[]; start: string; end: string; marks: string[] };
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type RowVars = CSSProperties & { "--s"?: string; "--e"?: string };
type PtrEvt = {
  clientX: number; pointerId: number; preventDefault(): void;
  currentTarget: { setPointerCapture(id: number): void };
};
type KeyEvt = { key: string; preventDefault(): void };
type Row = { key: string; s: number; e: number };

const START: Row[] = [
  { key: "mon", s: 18, e: 36 },
  { key: "tue", s: 18, e: 36 },
  { key: "wed", s: 20, e: 38 },
  { key: "thu", s: 18, e: 35 },
  { key: "fri", s: 18, e: 32 },
];

function clamp(x: number, lo: number, hi: number): number { return Math.min(Math.max(x, lo), hi); }
function fmt(t: number): string {                                   // 30분 한 칸
  const h = Math.floor(t / 2);
  return (h < 10 ? "0" : "") + h + ":" + (t % 2 ? "30" : "00");
}

export default function WorkingHoursDayBars({
  labels = {
    full: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    abbr: ["Mo", "Tu", "We", "Th", "Fr"],
    start: "Start",
    end: "End",
    marks: ["0", "6", "12", "18", "24"],
  },
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#4cd4a6",
}: WorkingHoursDayBarsProps) {
  const [demo, setDemo] = useState(true);
  const [rows, setRows] = useState<Row[]>(START);
  const axes = useRef<(HTMLDivElement | null)[]>([]);
  const drag = useRef<{ r: number; i: number } | null>(null);
  const vars: Vars = { "--duration": duration + "ms", "--easing": easing, "--color": color };

  function set(r: number, i: number, t: number) {
    setRows((p) => p.map((row, n) => {
      if (n !== r) return row;
      return i ? { ...row, e: clamp(t, row.s + 1, 48) } : { ...row, s: clamp(t, 0, row.e - 1) };
    }));
  }
  function at(r: number, e: PtrEvt): number {
    const list = axes.current;
    const el = list ? list[r] : null;
    if (!el) return 0;
    const b = el.getBoundingClientRect();
    return Math.round(((e.clientX - b.left) / b.width) * 48);
  }
  function down(r: number, i: number) {
    return (e: PtrEvt) => {
      setDemo(false);
      drag.current = { r, i };
      e.currentTarget.setPointerCapture(e.pointerId);       // 손가락이 축을 벗어나도 계속 따라온다
      e.preventDefault();
    };
  }
  function move(e: PtrEvt) {
    const d = drag.current;
    if (d) set(d.r, d.i, at(d.r, e));
  }
  function up() { drag.current = null; }
  function key(r: number, i: number) {
    return (e: KeyEvt) => {
      const d = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
      if (!d && e.key !== "Home" && e.key !== "End") return;
      setDemo(false);
      e.preventDefault();
      const row = rows[r];
      const t = e.key === "Home" ? 0 : e.key === "End" ? 48 : (i ? row.e : row.s) + d;
      set(r, i, t);
    };
  }

  return (
    <div className={styles.wh + (demo ? " " + styles.isDemo : "")} style={vars}>
      <div className={styles.scale} aria-hidden="true">
        <span />
        <span className={styles.marks}>{labels.marks.map((m) => <span key={m}>{m}</span>)}</span>
        <span />
      </div>
      {rows.map((row, r) => {
        const rv: RowVars = { "--s": String(row.s / 48), "--e": String(row.e / 48) };
        return (
          <div className={styles.row} data-d={row.key} key={row.key} style={rv}>
            <span className={styles.day}>
              <span className={styles.full} id={"wh-d" + r}>{labels.full[r]}</span>
              <span className={styles.ab} aria-hidden="true">{labels.abbr[r]}</span>
            </span>
            <div className={styles.axis} role="group" aria-labelledby={"wh-d" + r}
                 ref={(el: HTMLDivElement | null) => { if (axes.current) axes.current[r] = el; }}>
              <span className={styles.rail} aria-hidden="true" />
              <span className={styles.pos} aria-hidden="true"><span className={styles.bar} /></span>
              {[0, 1].map((i) => (
                <span key={i} className={styles.h + " " + (i ? styles.hE : styles.hS)}>
                  <span
                    className={styles.grip}
                    role="slider"
                    tabIndex={0}
                    aria-label={i ? labels.end : labels.start}
                    aria-valuemin={0}
                    aria-valuemax={1440}
                    aria-valuenow={(i ? row.e : row.s) * 30}
                    aria-valuetext={fmt(i ? row.e : row.s)}
                    onPointerDown={down(r, i)}
                    onPointerMove={move}
                    onPointerUp={up}
                    onKeyDown={key(r, i)}
                  />
                </span>
              ))}
            </div>
            <span className={styles.read}>
              <span data-k="1">{fmt(row.s) + "–" + fmt(row.e)}</span>
              {row.key === "wed" ? <span data-k="2" aria-hidden="true">{fmt(row.s) + "–" + fmt(44)}</span> : null}
            </span>
          </div>
        );
      })}
    </div>
  );
}