@fmsim/board 2.0.0-beta.62 → 2.0.0-beta.64

package/dist/src/ox-playback-controls.js

@@ -4,14 +4,41 @@ import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-const ONE_HOUR = 3600000;
+/**
+ * Window-length presets shown in the range dropdown. Values are durations
+ * in milliseconds; `'Range'` is the sentinel for "user picks both bounds
+ * directly". The fixed presets cap at 2H — same as the explicit Range
+ * mode max gap — so any preset switch produces a window already inside
+ * the allowed envelope.
+ */
+const RANGE_DURATIONS = {
+    '10m': 10 * 60 * 1000,
+    '30m': 30 * 60 * 1000,
+    '1H': 60 * 60 * 1000,
+    '2H': 2 * 60 * 60 * 1000
+};
+const ONE_HOUR = RANGE_DURATIONS['1H'];
+const MAX_GAP_MS = RANGE_DURATIONS['2H']; // 2H upper bound on (to − from)
+const MIN_GAP_MS = RANGE_DURATIONS['10m']; // 10m lower bound (prevents reversal / zero-window)
 /**
  * 플레이백 컨트롤 오버레이 바 (2행 구조)
  *
- * 1행: 시작 시점 설정 (datetime + ±1h 버튼) + 배속 선택
- * 2행: 재생 제어 (play/pause/stop) + 1시간 범위 시크바 + 닫기
+ * 1행 (config): Range 선택 (10m / 30m / 1H / 2H / Range) + ←/→ shift
+ *   + FROM/TO datetime 입력 (date 캘린더 + time 키인) + Apply 버튼
+ *   + 배속 (×1 ×2 ×4)
+ *
+ *   - Fixed presets: TO 가 anchor (←/→ 로 shift), FROM = TO − range.
+ *     입력 disabled. 초기 TO = 현재시간.
+ *   - Range mode: 양쪽 직접 입력. 2H cap, 10m min, future clamp,
+ *     마지막 편집한 쪽이 anchor.
+ *   - 상단 변경은 PENDING tier 만 갱신 — Apply 누르기 전에는 하단
+ *     슬라이더/엔진에 영향 없음.
  *
- * @fires playback-start - 플레이백 시작 요청 { fromTime, speed }
+ * 2행 (control): play / pause / 시크바 (적용된 range 만큼 span) /
+ *   현재 재생 시각 / 닫기.
+ *
+ * @fires playback-start - 플레이백 시작 요청 { fromTime, toTime, speed }
+ *   toTime 은 window END — 엔진이 chunked fetch 의 상한으로 사용.
  * @fires playback-pause - 일시정지 요청
  * @fires playback-resume - 재개 요청
  * @fires playback-stop - 중지 요청
@@ -32,7 +59,37 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
             from: new Date(Date.now() - ONE_HOUR),
             to: new Date()
         };
-        this._startTime = PlaybackControls_1._floorToHour(new Date(Date.now() - ONE_HOUR));
+        /**
+         * Two-tier state model:
+         *
+         *   PENDING (`_pendingRange`, `_pendingFrom`, `_pendingTo`)
+         *     The upper bar's draft. User edits these via the range dropdown,
+         *     ←/→ shift, or direct date/time inputs (Range mode only). The
+         *     lower seekbar is NOT driven by these — they only become live
+         *     when the user clicks "적용".
+         *
+         *   APPLIED (`_appliedFrom`, `_appliedTo`)
+         *     The window the seekbar visualizes and the engine fetches data
+         *     for. Updated only by `_onApply()`, which mirrors pending values
+         *     here and dispatches a `playback-start` to refresh the engine
+         *     with the new window (when playing/paused).
+         *
+         * Splitting these prevents mid-edit churn: typing into the time input
+         * doesn't refetch on every keystroke, and the slider doesn't jiggle
+         * while the user picks a date.
+         */
+        this._pendingRange = '1H';
+        this._pendingFrom = new Date(Date.now() - ONE_HOUR);
+        this._pendingTo = new Date();
+        /**
+         * Which side did the user touch most recently in Range mode? Anchors
+         * the auto-adjust when the resulting gap violates min/max — the
+         * unedited side is what gets pushed to a legal value, so the user's
+         * latest intent is preserved.
+         */
+        this._lastEdited = 'to';
+        this._appliedFrom = new Date(Date.now() - ONE_HOUR);
+        this._appliedTo = new Date();
         this._seeking = false;
         this._seekPreviewTime = null;
         this._speeds = [1, 2, 4];
@@ -41,17 +98,18 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         /** 가장 최근에 실제 emit 한 preview 시각 (dedupe 용) */
         this._lastEmittedPreviewTime = null;
     }
-    get _endTime() {
-        return new Date(this._startTime.getTime() + ONE_HOUR);
-    }
-    static _floorToHour(date) {
-        const d = new Date(date);
-        d.setMinutes(0, 0, 0);
-        return d;
-    }
     connectedCallback() {
         super.connectedCallback();
-        this._startTime = PlaybackControls_1._floorToHour(this.timeRange.from);
+        // Initialize both pending and applied from the incoming timeRange.
+        // Default range = 1H (matches the previous fixed-window behavior),
+        // so the seekbar covers a 1H window from the start.
+        const initFrom = new Date(this.timeRange.from);
+        const initTo = new Date(this.timeRange.to);
+        this._appliedFrom = initFrom;
+        this._appliedTo = initTo;
+        this._pendingFrom = new Date(initFrom);
+        this._pendingTo = new Date(initTo);
+        this._pendingRange = this._inferRangeKey(initTo.getTime() - initFrom.getTime());
         this._seekValue = 0;
         this._currentPlayTime = null;
     }
@@ -61,7 +119,12 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
     }
     updated(changes) {
         if (changes.has('timeRange') && this.timeRange) {
-            this._startTime = PlaybackControls_1._floorToHour(this.timeRange.from);
+            // Resync both tiers from the externally-supplied window.
+            this._appliedFrom = new Date(this.timeRange.from);
+            this._appliedTo = new Date(this.timeRange.to);
+            this._pendingFrom = new Date(this._appliedFrom);
+            this._pendingTo = new Date(this._appliedTo);
+            this._pendingRange = this._inferRangeKey(this._appliedTo.getTime() - this._appliedFrom.getTime());
         }
         // 엔진 프레임(currentTime 프로프 변경)이 유일한 시간 소스.
         // drag 중에는 _seeking 가 true 이므로 엔진 업데이트 무시 (스크러빙 중 UI 튐 방지).
@@ -69,51 +132,84 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
             this._syncFromEngine();
         }
     }
+    /**
+     * Map a millisecond gap to the matching preset key, or `'Range'` if
+     * the gap doesn't match any preset (custom window already in effect).
+     */
+    _inferRangeKey(gapMs) {
+        for (const k of ['10m', '30m', '1H', '2H']) {
+            if (RANGE_DURATIONS[k] === gapMs)
+                return k;
+        }
+        return 'Range';
+    }
     render() {
         const isPlaying = this.playbackState === 'playing';
         const isPaused = this.playbackState === 'paused';
         const isActive = isPlaying || isPaused;
+        const isRangeMode = this._pendingRange === 'Range';
+        const isDirty = this._pendingFrom.getTime() !== this._appliedFrom.getTime() ||
+            this._pendingTo.getTime() !== this._appliedTo.getTime();
         return html `
       <div class="control-bar">
-        <!-- 1행: 시점 설정 + 배속 -->
+        <!-- 1행 (config): Range 선택 + ←/→ shift + datetime 입력 + Apply -->
         <div class="row-time">
-          <md-icon-button @click=${this._shiftTime(-1)} title="-1h">
+          <select class="range-select" .value=${this._pendingRange} @change=${this._onRangeChange}>
+            ${['10m', '30m', '1H', '2H', 'Range'].map(k => html `<option value=${k} ?selected=${this._pendingRange === k}>${k}</option>`)}
+          </select>
+
+          <button
+            class="shift-btn"
+            @click=${this._shiftPending(-1)}
+            ?disabled=${isRangeMode}
+            title="이전 ${this._pendingRange}"
+          >
             <md-icon>chevron_left</md-icon>
-          </md-icon-button>
+          </button>
+          <button
+            class="shift-btn"
+            @click=${this._shiftPending(1)}
+            ?disabled=${isRangeMode}
+            title="다음 ${this._pendingRange}"
+          >
+            <md-icon>chevron_right</md-icon>
+          </button>
 
+          <!-- FROM datetime — single compact widget (date via calendar
+               popup, time via key-in, browser-native). In Fixed mode
+               disabled (derived from to − range); in Range mode editable. -->
           <input
-            type="date"
-            class="date-input"
-            .value=${this._toDateString(this._startTime)}
-            @change=${this._onDateChange}
+            type="datetime-local"
+            step="1"
+            lang="ko-KR"
+            class="datetime-input"
+            .value=${this._toDatetimeLocalString(this._pendingFrom)}
+            ?disabled=${!isRangeMode}
+            @change=${(e) => this._onPendingDatetimeChange('from', e)}
           />
 
-          <select class="hour-select" .value=${String(this._startTime.getHours())} @change=${this._onHourChange}>
-            ${Array.from({ length: 24 }, (_, i) => html `
-              <option value=${i} ?selected=${this._startTime.getHours() === i}>
-                ${String(i).padStart(2, '0')}:00
-              </option>
-            `)}
-          </select>
+          <span class="time-label">~</span>
 
-          <md-icon-button @click=${this._shiftTime(1)} title="+1h">
-            <md-icon>chevron_right</md-icon>
-          </md-icon-button>
+          <!-- TO datetime. In Fixed mode disabled (←/→ moves it).
+               In Range mode editable. -->
+          <input
+            type="datetime-local"
+            step="1"
+            lang="ko-KR"
+            class="datetime-input"
+            .value=${this._toDatetimeLocalString(this._pendingTo)}
+            ?disabled=${!isRangeMode}
+            @change=${(e) => this._onPendingDatetimeChange('to', e)}
+          />
 
-          <span class="time-label">~ ${String(this._endTime.getHours()).padStart(2, '0')}:00</span>
+          <button class="apply-btn ${isDirty ? 'dirty' : ''}" ?disabled=${!isDirty} @click=${this._onApply}>
+            적용
+          </button>
 
           <span class="spacer"></span>
-
-          <div class="speed-group">
-            ${this._speeds.map(s => html `
-                <button class="speed-btn ${this.speed === s ? 'active' : ''}" @click=${() => this._onSpeedChange(s)}>
-                  ×${s}
-                </button>
-              `)}
-          </div>
         </div>
 
-        <!-- 2행: 재생 제어 + 시크바 + 닫기 -->
+        <!-- 2행: 재생 제어 + 시크바 + 배속 + 닫기 -->
         <div class="row-seek">
           <md-icon-button class="primary" @click=${isActive ? this._onTogglePlayPause : this._onStart}>
             <md-icon>${isPlaying ? 'pause' : 'play_arrow'}</md-icon>
@@ -134,8 +230,8 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
               />
             </div>
             <div class="seek-labels">
-              <span>${this._formatTime(this._startTime)}</span>
-              <span>${this._formatTime(this._endTime)}</span>
+              <span>${this._formatTime(this._appliedFrom)}</span>
+              <span>${this._formatTime(this._appliedTo)}</span>
             </div>
           </div>
 
@@ -145,6 +241,14 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
             : this._currentPlayTime ? this._formatTime(this._currentPlayTime) : '--:--:--'}
           </span>
 
+          <div class="speed-group">
+            ${this._speeds.map(s => html `
+                <button class="speed-btn ${this.speed === s ? 'active' : ''}" @click=${() => this._onSpeedChange(s)}>
+                  ×${s}
+                </button>
+              `)}
+          </div>
+
           <md-icon-button @click=${this._onStop}>
             <md-icon>close</md-icon>
           </md-icon-button>
@@ -159,6 +263,19 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         const pad = (n) => String(n).padStart(2, '0');
         return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
     }
+    /** "HH:MM:SS" — what `<input type="time" step="1">` reads/writes. */
+    _toTimeString(date) {
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+    }
+    /**
+     * "YYYY-MM-DDTHH:MM:SS" — what `<input type="datetime-local" step="1">`
+     * reads/writes. Local time (no Z suffix), matches the input element's
+     * own convention.
+     */
+    _toDatetimeLocalString(date) {
+        return `${this._toDateString(date)}T${this._toTimeString(date)}`;
+    }
     /**
      * 엔진 프레임(currentTime 프로프) 을 유일한 시간 소스로 사용하여
      * _currentPlayTime 및 _seekValue 동기화.
@@ -170,67 +287,144 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         if (!Number.isFinite(currentMs))
             return;
         this._currentPlayTime = new Date(currentMs);
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
         const range = to - from;
         if (range <= 0)
             return;
         this._seekValue = Math.max(0, Math.min(1000, Math.round(((currentMs - from) / range) * 1000)));
     }
-    _onDateChange(e) {
-        const value = e.target.value;
-        if (!value)
+    // ── Pending-tier handlers (upper config bar) ──────────────────────
+    _onRangeChange(e) {
+        const newKey = e.target.value;
+        this._pendingRange = newKey;
+        if (newKey === 'Range') {
+            // Switching to Range: keep current pending bounds, just unlock the
+            // inputs. Auto-adjust will kick in when the user edits one side.
             return;
-        const [year, month, day] = value.split('-').map(Number);
-        const newStart = new Date(this._startTime);
-        newStart.setFullYear(year, month - 1, day);
-        this._shiftStartTime(newStart);
-    }
-    _onHourChange(e) {
-        const hour = Number(e.target.value);
-        const newStart = new Date(this._startTime);
-        newStart.setHours(hour, 0, 0, 0);
-        this._shiftStartTime(newStart);
-    }
-    _shiftTime(hours) {
+        }
+        // Fixed preset: end stays where it is (clamped to now), start = end − range.
+        const dur = RANGE_DURATIONS[newKey];
+        const now = Date.now();
+        const newTo = Math.min(this._pendingTo.getTime(), now);
+        this._pendingTo = new Date(newTo);
+        this._pendingFrom = new Date(newTo - dur);
+        this._lastEdited = 'to';
+    }
+    _shiftPending(direction) {
         return () => {
-            const newStart = new Date(this._startTime.getTime() + hours * ONE_HOUR);
-            this._shiftStartTime(newStart);
+            // Only meaningful in Fixed mode — Range mode disables the buttons.
+            if (this._pendingRange === 'Range')
+                return;
+            const dur = RANGE_DURATIONS[this._pendingRange];
+            const now = Date.now();
+            let newToMs = this._pendingTo.getTime() + direction * dur;
+            newToMs = Math.min(newToMs, now); // future clamp on forward shift
+            this._pendingTo = new Date(newToMs);
+            this._pendingFrom = new Date(newToMs - dur);
+            this._lastEdited = 'to';
         };
     }
+    _onPendingDatetimeChange(side, e) {
+        // value is "YYYY-MM-DDTHH:MM:SS" (datetime-local with step=1).
+        // Parsed as LOCAL time — `new Date(...)` on this format is local
+        // (intentional, user picks wall-clock time, not UTC).
+        const value = e.target.value;
+        if (!value)
+            return;
+        const next = new Date(value);
+        if (Number.isNaN(next.getTime()))
+            return;
+        this._writePendingSide(side, next);
+    }
+    /**
+     * Commit a side's new value, then enforce the gap envelope.
+     *
+     * Rules (per spec):
+     *   - `to` clamped to now (no future).
+     *   - `to − from ≥ 10m` (no zero/negative window).
+     *   - `to − from ≤ 2h`.
+     *   - The side just edited (`side`) is the anchor; the OTHER side
+     *     gets pushed to satisfy the envelope.
+     *   - If anchoring `from` would push `to` past now, fall back to
+     *     anchoring `to = now` and shrink `from`.
+     */
+    _writePendingSide(side, next) {
+        this._lastEdited = side;
+        const now = Date.now();
+        if (side === 'to') {
+            const toMs = Math.min(next.getTime(), now);
+            this._pendingTo = new Date(toMs);
+            const fromMs = this._pendingFrom.getTime();
+            const gap = toMs - fromMs;
+            if (gap < MIN_GAP_MS)
+                this._pendingFrom = new Date(toMs - MIN_GAP_MS);
+            else if (gap > MAX_GAP_MS)
+                this._pendingFrom = new Date(toMs - MAX_GAP_MS);
+        }
+        else {
+            const fromMs = next.getTime();
+            this._pendingFrom = new Date(fromMs);
+            const toMs = this._pendingTo.getTime();
+            const gap = toMs - fromMs;
+            if (gap < MIN_GAP_MS) {
+                let adj = fromMs + MIN_GAP_MS;
+                if (adj > now) {
+                    // Pushing `to` would land in the future — re-anchor on `to=now`
+                    // and shrink `from` instead.
+                    adj = now;
+                    this._pendingFrom = new Date(adj - MIN_GAP_MS);
+                }
+                this._pendingTo = new Date(adj);
+            }
+            else if (gap > MAX_GAP_MS) {
+                let adj = fromMs + MAX_GAP_MS;
+                if (adj > now) {
+                    adj = now;
+                    this._pendingFrom = new Date(adj - MAX_GAP_MS);
+                }
+                this._pendingTo = new Date(adj);
+            }
+        }
+    }
     /**
-     * 시작 시간 변경 시: 재생/일시정지 중이면 새 시간에서 재시작.
-     * 정지 상태면 시간만 변경.
+     * "적용" — copy pending → applied, reset seek to window start, and
+     * (re)start the engine so it refetches data for the new window.
+     *
+     * Behavior by prior state:
+     *   - playing: dispatch `playback-start` → engine restarts in new window.
+     *   - paused : same — engine refetches; we leave the user in 'playing'
+     *     state because the alternative (carry "paused" through a window
+     *     change) ends up showing stale buffered data while the new fetch
+     *     completes, which reads as a stuck UI.
+     *   - idle   : window updated silently; no engine activity until user
+     *     presses play.
      */
-    _shiftStartTime(newStart) {
-        const wasPlaying = this.playbackState === 'playing';
-        const wasPaused = this.playbackState === 'paused';
-        this._startTime = newStart;
+    _onApply() {
+        this._appliedFrom = new Date(this._pendingFrom);
+        this._appliedTo = new Date(this._pendingTo);
         this._seekValue = 0;
-        this._currentPlayTime = new Date(newStart);
-        if (wasPlaying) {
-            // play 중: 새 시간에서 자동 재시작
+        this._currentPlayTime = new Date(this._appliedFrom);
+        this._seekPreviewTime = null;
+        if (this.playbackState === 'playing' || this.playbackState === 'paused') {
             this._onStart();
         }
-        else if (wasPaused) {
-            // pause 중: 엔진에 새 시간 전달 + 데이터 fetch, 하지만 자동 재생 안 함
-            this.dispatchEvent(new CustomEvent('playback-seek', {
-                detail: { toTime: new Date(newStart) },
-                bubbles: true,
-                composed: true
-            }));
-        }
     }
     _onStart() {
         // 현재 seekbar 위치에서 재생 시작 (_seekValue 가 유일한 슬라이더 위치 소스)
         const ratio = this._seekValue / 1000;
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
         const fromTime = new Date(from + (to - from) * ratio);
+        const toTime = new Date(to);
         this._currentPlayTime = fromTime;
         this.playbackState = 'playing';
+        // toTime is the window END (= _appliedTo), NOT a hardcoded
+        // fromTime + 1h. The engine uses it as the chunked-fetch upper
+        // bound — without it, variable ranges (10m / 30m / Range mode)
+        // would silently overshoot the user-selected window.
         this.dispatchEvent(new CustomEvent('playback-start', {
-            detail: { fromTime, speed: this.speed },
+            detail: { fromTime, toTime, speed: this.speed },
             bubbles: true,
             composed: true
         }));
@@ -259,8 +453,8 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         this._seekValue = Number(e.target.value);
         // 드래그 중 preview 시간 계산 + UI 표시
         const ratio = this._seekValue / 1000;
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
         const previewTime = new Date(from + (to - from) * ratio);
         this._seekPreviewTime = previewTime;
         this._latestPreviewTime = previewTime;
@@ -311,8 +505,8 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         this._seeking = false;
         this._cancelPreviewThrottle();
         const ratio = Number(e.target.value) / 1000;
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
         const targetTime = new Date(from + (to - from) * ratio);
         this._seekPreviewTime = null;
         this._currentPlayTime = targetTime;
@@ -334,8 +528,8 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         var _a;
         if (!((_a = this.bufferedRanges) === null || _a === void 0 ? void 0 : _a.length))
             return '';
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
         const range = to - from;
         if (range <= 0)
             return '';
@@ -404,10 +598,49 @@ PlaybackControls.styles = css `
       border-radius: 50%;
     }
 
-    .row-time md-icon-button {
-      --md-icon-button-icon-size: 18px;
-      --md-icon-button-container-width: 32px;
-      --md-icon-button-container-height: 32px;
+    /*
+     * shift 버튼 (←/→) — Material Web 의 md-icon-button 은 shadow DOM
+     * 내 ripple/focus-ring/touch-target 영역이 visible 32px 컨테이너
+     * 너머로 hit area 를 확장해서 인접 버튼끼리 호버 영역이 겹친다.
+     * (사용자 보고: > 의 hover 가 < 의 오른쪽 영역까지 침범) plain
+     * <button> 으로 교체해 hit area 를 정확히 32×32px 로 한정.
+     */
+    .shift-btn {
+      width: 22px;
+      height: 28px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      flex-shrink: 0;
+    }
+
+    /*
+     * shift 버튼 묶음 — 두 chevron 이 시각적으로 한 쌍으로 보이도록
+     * 사이 여백을 완전히 제거 (row-time 의 6px gap 전체를 negative
+     * margin 으로 상쇄). 양쪽 인접 요소와의 간격은 row gap 으로 유지.
+     */
+    .shift-btn + .shift-btn {
+      margin-left: -6px;
+    }
+
+    .shift-btn md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .shift-btn:hover:not(:disabled) {
+      color: #ffb766;
+    }
+
+    .shift-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
     }
 
     .date-input {
@@ -426,7 +659,8 @@ PlaybackControls.styles = css `
       border-color: rgba(255, 255, 255, 0.6);
     }
 
-    .hour-select {
+    .hour-select,
+    .range-select {
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.3);
       border-radius: 6px;
@@ -438,10 +672,92 @@ PlaybackControls.styles = css `
       cursor: pointer;
     }
 
-    .hour-select:focus {
+    .hour-select:focus,
+    .range-select:focus {
       border-color: rgba(255, 255, 255, 0.6);
     }
 
+    .range-select {
+      min-width: 64px;
+    }
+
+    .datetime-input {
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 6px;
+      color: #fff;
+      font-size: 12px;
+      padding: 4px 6px;
+      outline: none;
+      color-scheme: dark;
+      font-family: inherit;
+      /*
+       * 브라우저 기본 너비가 컨텐츠 (YYYY-MM-DD HH:MM:SS + 캘린더
+       * 아이콘) 보다 넓게 잡혀서 우측에 빈 공간이 생긴다. content
+       * 폭에 거의 fit 시키는 명시 너비. 12px 폰트 기준 19자 + 캘린더
+       * 아이콘 공간 ≈ 170px (실측 기준).
+       */
+      width: 170px;
+      box-sizing: border-box;
+    }
+
+    /*
+     * inner sub-fields (YYYY/MM/DD/HH/MM/SS) 사이 spacing 도 일부
+     * Chromium 빌드에서 과하게 잡혀 있어 0으로 줄여 합본 시각적
+     * 폭을 더 줄임. 다른 엔진은 selector 무시.
+     */
+    .datetime-input::-webkit-datetime-edit-fields-wrapper {
+      padding: 0;
+    }
+    .datetime-input::-webkit-datetime-edit-text {
+      padding: 0 1px;
+    }
+
+    .datetime-input:focus {
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+
+    /*
+     * 24시간제 강제 — lang="ko-KR" 만으로 안 먹는 브라우저(Chrome/Edge 일부
+     * 버전, OS locale 우선) 대비, AM/PM 필드를 CSS 레벨에서 비표시.
+     * Chromium/WebKit 의 -webkit-datetime-edit shadow DOM 만 이름이
+     * 노출되어 있어 다른 엔진은 자동으로 무시 (no-op).
+     */
+    .datetime-input::-webkit-datetime-edit-ampm-field {
+      display: none;
+    }
+
+    .datetime-input:disabled,
+    .date-input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .apply-btn {
+      padding: 4px 12px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      background: transparent;
+      color: #fff;
+      font-size: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .apply-btn.dirty {
+      background: rgba(255, 165, 0, 0.4);
+      border-color: rgba(255, 165, 0, 0.8);
+    }
+
+    .apply-btn:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .apply-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
     .time-label {
       font-size: 12px;
       opacity: 0.7;
@@ -596,7 +912,22 @@ __decorate([
 ], PlaybackControls.prototype, "timeRange", void 0);
 __decorate([
     state()
-], PlaybackControls.prototype, "_startTime", void 0);
+], PlaybackControls.prototype, "_pendingRange", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_pendingFrom", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_pendingTo", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_lastEdited", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_appliedFrom", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_appliedTo", void 0);
 __decorate([
     state()
 ], PlaybackControls.prototype, "_seekValue", void 0);