@fmsim/board 2.0.0-beta.11 → 2.0.0-beta.111

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

@@ -4,18 +4,47 @@ 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 - 중지 요청
- * @fires playback-seek - 시크 요청 { toTime }
+ * @fires playback-seek - 드래그 릴리즈 시 시크 요청 { toTime }
+ * @fires playback-seek-start - 드래그 첫 input 시 즉시 발행 (엔진 타이머·애니메이션 정지 신호, detail 없음)
+ * @fires playback-seek-preview - 드래그 중 throttle (leading+trailing, 200ms) 된 스크러빙 요청 { toTime }
  * @fires playback-speed - 배속 변경 요청 { speed }
  */
 let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitElement {
@@ -24,110 +53,261 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
         this.playbackState = 'idle';
         this.speed = 1;
         this.currentTime = '';
+        this.bufferedRanges = [];
         /** 외부에서 전달받은 초기 시간 범위 (from만 사용, to는 from+1h로 자동 계산) */
         this.timeRange = {
             from: new Date(Date.now() - ONE_HOUR),
             to: new Date()
         };
-        this._startTime = PlaybackControls_1._floorToHour(new Date(Date.now() - ONE_HOUR));
-        this._speeds = [1, 2, 4, 8];
-    }
-    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;
+        /**
+         * 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];
+        /** 드래그 중 가장 최근 seekbar 위치 시각 */
+        this._latestPreviewTime = null;
+        /** 가장 최근에 실제 emit 한 preview 시각 (dedupe 용) */
+        this._lastEmittedPreviewTime = null;
     }
     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;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._stopTimer();
+        this._cancelPreviewThrottle();
     }
     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());
         }
-        if (changes.has('currentTime') && this.currentTime) {
-            this._updateSeekPosition();
+        // 엔진 프레임(currentTime 프로프 변경)이 유일한 시간 소스.
+        // drag 중에는 _seeking 가 true 이므로 엔진 업데이트 무시 (스크러빙 중 UI 튐 방지).
+        if (changes.has('currentTime') && this.currentTime && !this._seeking) {
+            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">
-            <md-icon>chevron_left</md-icon>
-          </md-icon-button>
-
-          <input
-            type="date"
-            class="date-input"
-            .value=${this._toDateString(this._startTime)}
-            @change=${this._onDateChange}
-          />
-
-          <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 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>
 
-          <md-icon-button @click=${this._shiftTime(1)} title="+1h">
+          <button
+            class="shift-btn"
+            @click=${this._shiftPending(-1)}
+            ?disabled=${isRangeMode}
+            title="이전 ${this._pendingRange}"
+          >
+            <md-icon>chevron_left</md-icon>
+          </button>
+          <button
+            class="shift-btn"
+            @click=${this._shiftPending(1)}
+            ?disabled=${isRangeMode}
+            title="다음 ${this._pendingRange}"
+          >
             <md-icon>chevron_right</md-icon>
-          </md-icon-button>
+          </button>
 
-          <span class="time-label">~ ${String(this._endTime.getHours()).padStart(2, '0')}:00</span>
+          <!-- FROM composite datetime -->
+          <div class="composite-datetime ${!isRangeMode ? 'disabled' : ''}">
+            <input
+              type="date"
+              class="inner-date"
+              .value=${this._toDateString(this._pendingFrom)}
+              ?disabled=${!isRangeMode}
+              @change=${(e) => this._onCompositeChange('from', 'date', e)}
+            />
+            &nbsp;
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingFrom.getHours())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('from', 'h', e)}
+              @input=${(e) => this._onTimeInput('h', e)}
+              @change=${(e) => this._onCompositeChange('from', 'h', e)}
+            />:
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingFrom.getMinutes())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('from', 'm', e)}
+              @input=${(e) => this._onTimeInput('m', e)}
+              @change=${(e) => this._onCompositeChange('from', 'm', e)}
+            />:
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingFrom.getSeconds())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('from', 's', e)}
+              @input=${(e) => this._onTimeInput('s', e)}
+              @change=${(e) => this._onCompositeChange('from', 's', e)}
+            />
+          </div>
 
-          <span class="spacer"></span>
+          <span class="time-label">~</span>
 
-          <div class="speed-group">
-            ${this._speeds.map(s => html `
-                <button class="speed-btn ${this.speed === s ? 'active' : ''}" @click=${() => this._onSpeedChange(s)}>
-                  ×${s}
-                </button>
-              `)}
+          <!-- TO composite datetime -->
+          <div class="composite-datetime ${!isRangeMode ? 'disabled' : ''}">
+            <input
+              type="date"
+              class="inner-date"
+              .value=${this._toDateString(this._pendingTo)}
+              ?disabled=${!isRangeMode}
+              @change=${(e) => this._onCompositeChange('to', 'date', e)}
+            />
+            &nbsp;
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingTo.getHours())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('to', 'h', e)}
+              @input=${(e) => this._onTimeInput('h', e)}
+              @change=${(e) => this._onCompositeChange('to', 'h', e)}
+            />:
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingTo.getMinutes())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('to', 'm', e)}
+              @input=${(e) => this._onTimeInput('m', e)}
+              @change=${(e) => this._onCompositeChange('to', 'm', e)}
+            />:
+            <input
+              type="text"
+              class="inner-time"
+              maxlength="2"
+              .value=${this._pad(this._pendingTo.getSeconds())}
+              ?disabled=${!isRangeMode}
+              @keydown=${(e) => this._onTimeKeydown('to', 's', e)}
+              @input=${(e) => this._onTimeInput('s', e)}
+              @change=${(e) => this._onCompositeChange('to', 's', e)}
+            />
           </div>
+
+          <button class="apply-btn ${isDirty ? 'dirty' : ''}" ?disabled=${!isDirty} @click=${this._onApply}>
+            적용
+          </button>
+
+          <span class="spacer"></span>
         </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>
           </md-icon-button>
 
           <div class="timeline">
-            <input
-              type="range"
-              class="seek-bar"
-              min="0"
-              max="1000"
-              .value=${String(this._seekValue)}
-              @input=${this._onSeekInput}
-              @change=${this._onSeekChange}
-            />
+            <div class="seek-track">
+              <div class="seek-rail"></div>
+              ${this._renderBufferBars()}
+              <input
+                type="range"
+                class="seek-bar"
+                min="0"
+                max="1000"
+                .value=${String(this._seekValue)}
+                @input=${this._onSeekInput}
+                @change=${this._onSeekChange}
+              />
+            </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>
 
           <span class="current-time">
-            ${this._currentPlayTime ? this._formatTime(this._currentPlayTime) : '--:--:--'}
+            ${this._seeking && this._seekPreviewTime
+            ? this._formatTime(this._seekPreviewTime)
+            : 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>
@@ -142,64 +322,230 @@ 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())}`;
     }
-    _updateSeekPosition() {
-        if (!this.currentTime)
+    /** "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 동기화.
+     */
+    _syncFromEngine() {
+        if (!this.currentTime || this._seeking)
+            return;
+        const currentMs = new Date(this.currentTime).getTime();
+        if (!Number.isFinite(currentMs))
             return;
-        const current = new Date(this.currentTime).getTime();
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
+        this._currentPlayTime = new Date(currentMs);
+        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(((current - from) / range) * 1000)));
+        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';
         };
     }
+    _pad(n) {
+        return String(n).padStart(2, '0');
+    }
+    _onTimeKeydown(side, part, e) {
+        const el = e.target;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            const current = side === 'from' ? this._pendingFrom : this._pendingTo;
+            const next = new Date(current);
+            let num = parseInt(el.value, 10);
+            if (isNaN(num))
+                num = 0;
+            const step = e.key === 'ArrowUp' ? 1 : -1;
+            num += step;
+            const max = part === 'h' ? 23 : 59;
+            if (num < 0)
+                num = max;
+            if (num > max)
+                num = 0;
+            if (part === 'h')
+                next.setHours(num);
+            if (part === 'm')
+                next.setMinutes(num);
+            if (part === 's')
+                next.setSeconds(num);
+            this._writePendingSide(side, next);
+            return;
+        }
+        if (!/^[0-9]$/.test(e.key) &&
+            !['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Enter'].includes(e.key) &&
+            !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+        }
+    }
+    _onTimeInput(part, e) {
+        const el = e.target;
+        let val = el.value.replace(/[^0-9]/g, '');
+        if (val.length > 0) {
+            let num = parseInt(val, 10);
+            const max = part === 'h' ? 23 : 59;
+            if (num > max) {
+                val = String(max);
+            }
+        }
+        el.value = val;
+    }
+    _onCompositeChange(side, part, e) {
+        const el = e.target;
+        const current = side === 'from' ? this._pendingFrom : this._pendingTo;
+        const next = new Date(current);
+        if (part === 'date') {
+            const value = el.value;
+            if (!value)
+                return;
+            const [y, m, d] = value.split('-').map(Number);
+            next.setFullYear(y, m - 1, d);
+        }
+        else {
+            let num = parseInt(el.value, 10);
+            if (isNaN(num))
+                num = 0;
+            if (part === 'h')
+                next.setHours(Math.max(0, Math.min(23, num)));
+            if (part === 'm')
+                next.setMinutes(Math.max(0, Math.min(59, num)));
+            if (part === 's')
+                next.setSeconds(Math.max(0, Math.min(59, num)));
+            // 패딩 강제 적용하여 UI 보정
+            el.value = this._pad(num);
+        }
+        if (Number.isNaN(next.getTime()))
+            return;
+        this._writePendingSide(side, next);
+    }
     /**
-     * 시작 시간 변경 시 현재 재생 시간도 같은 offset만큼 이동.
-     * 재생 중이면 타이머 유지.
+     * 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`.
      */
-    _shiftStartTime(newStart) {
-        const delta = newStart.getTime() - this._startTime.getTime();
-        this._startTime = newStart;
-        if (this._currentPlayTime) {
-            const shifted = new Date(this._currentPlayTime.getTime() + delta);
-            const end = this._endTime;
-            // 새 범위 안에 있으면 이동, 밖이면 시작점으로
-            if (shifted.getTime() >= newStart.getTime() && shifted.getTime() <= end.getTime()) {
-                this._currentPlayTime = shifted;
+    _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 {
-                this._currentPlayTime = new Date(newStart);
+            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);
             }
-            this._updateSeekFromPlayTime();
+        }
+    }
+    /**
+     * "적용" — 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.
+     */
+    _onApply() {
+        this._appliedFrom = new Date(this._pendingFrom);
+        this._appliedTo = new Date(this._pendingTo);
+        this._seekValue = 0;
+        this._currentPlayTime = new Date(this._appliedFrom);
+        this._seekPreviewTime = null;
+        if (this.playbackState === 'playing' || this.playbackState === 'paused') {
+            this._onStart();
         }
     }
     _onStart() {
-        this._currentPlayTime = new Date(this._startTime);
+        // 현재 seekbar 위치에서 재생 시작 (_seekValue 가 유일한 슬라이더 위치 소스)
+        const ratio = this._seekValue / 1000;
+        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';
-        this._startTimer();
+        // 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: this._startTime, speed: this.speed },
+            detail: { fromTime, toTime, speed: this.speed },
             bubbles: true,
             composed: true
         }));
@@ -207,46 +553,113 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
     _onTogglePlayPause() {
         if (this.playbackState === 'playing') {
             this.playbackState = 'paused';
-            this._stopTimer();
             this.dispatchEvent(new CustomEvent('playback-pause', { bubbles: true, composed: true }));
         }
         else {
             this.playbackState = 'playing';
-            this._startTimer();
             this.dispatchEvent(new CustomEvent('playback-resume', { bubbles: true, composed: true }));
         }
     }
     _onStop() {
-        this._stopTimer();
+        this._cancelPreviewThrottle();
         this._currentPlayTime = null;
         this._seekValue = 0;
         this.playbackState = 'idle';
         this.dispatchEvent(new CustomEvent('playback-stop', { bubbles: true, composed: true }));
     }
     _onSeekInput(e) {
+        // 드래그 시작(첫 input) 탐지
+        const justStartedDrag = !this._seeking;
+        this._seeking = true;
         this._seekValue = Number(e.target.value);
-        // 드래그 중 현재 시간 업데이트 (비주얼 피드백)
+        // 드래그 중 preview 시간 계산 + UI 표시
         const ratio = this._seekValue / 1000;
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
-        this._currentPlayTime = new Date(from + (to - from) * ratio);
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
+        const previewTime = new Date(from + (to - from) * ratio);
+        this._seekPreviewTime = previewTime;
+        this._latestPreviewTime = previewTime;
+        if (justStartedDrag) {
+            // 즉시 이벤트 — 재생 타이머 정지
+            this.dispatchEvent(new CustomEvent('playback-seek-start', {
+                bubbles: true,
+                composed: true
+            }));
+        }
+        // throttle: leading-edge 에서 즉시 emit, 이후 200ms 내 input 은 latest 만 갱신.
+        // throttle 만료 시점에 latest 가 마지막 emit 과 다르면 trailing emit.
+        if (this._previewThrottle === undefined) {
+            // leading emit
+            this._emitPreview();
+            // trailing 예약
+            this._previewThrottle = window.setTimeout(() => {
+                var _a;
+                this._previewThrottle = undefined;
+                // 드래그가 끝났거나 (_seeking=false) 새 throttle 이 이미 있으면 스킵
+                if (!this._seeking)
+                    return;
+                // latest 가 마지막 emit 과 같으면 중복 skip
+                const latest = this._latestPreviewTime;
+                if (latest && latest.getTime() !== ((_a = this._lastEmittedPreviewTime) === null || _a === void 0 ? void 0 : _a.getTime())) {
+                    this._emitPreview();
+                }
+            }, PlaybackControls_1.PREVIEW_THROTTLE_MS);
+        }
+        // else: 이미 throttle 진행 중 → _latestPreviewTime 만 업데이트됨 (위에서 처리됨)
+    }
+    /** latest 위치 시각으로 playback-seek-preview 를 발행 (dedupe). */
+    _emitPreview() {
+        var _a;
+        const time = this._latestPreviewTime;
+        if (!time)
+            return;
+        if (((_a = this._lastEmittedPreviewTime) === null || _a === void 0 ? void 0 : _a.getTime()) === time.getTime())
+            return;
+        this._lastEmittedPreviewTime = time;
+        this.dispatchEvent(new CustomEvent('playback-seek-preview', {
+            detail: { toTime: time },
+            bubbles: true,
+            composed: true
+        }));
     }
     _onSeekChange(e) {
+        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;
         this.dispatchEvent(new CustomEvent('playback-seek', {
             detail: { toTime: targetTime },
             bubbles: true,
             composed: true
         }));
-        // 재생 중이었으면 새 시점에서 타이머 계속
-        if (this.playbackState === 'playing') {
-            this._stopTimer();
-            this._startTimer();
+    }
+    _cancelPreviewThrottle() {
+        if (this._previewThrottle != null) {
+            clearTimeout(this._previewThrottle);
+            this._previewThrottle = undefined;
         }
+        this._latestPreviewTime = null;
+        this._lastEmittedPreviewTime = null;
+    }
+    _renderBufferBars() {
+        var _a;
+        if (!((_a = this.bufferedRanges) === null || _a === void 0 ? void 0 : _a.length))
+            return '';
+        const from = this._appliedFrom.getTime();
+        const to = this._appliedTo.getTime();
+        const range = to - from;
+        if (range <= 0)
+            return '';
+        return this.bufferedRanges.map(r => {
+            const left = Math.max(0, (r.from - from) / range) * 100;
+            const right = Math.min(1, (r.to - from) / range) * 100;
+            const width = right - left;
+            return html `<div class="buffer-bar" style="left:${left}%;width:${width}%"></div>`;
+        });
     }
     _onSpeedChange(speed) {
         this.speed = speed;
@@ -255,49 +668,6 @@ let PlaybackControls = PlaybackControls_1 = class PlaybackControls extends LitEl
             bubbles: true,
             composed: true
         }));
-        // 재생 중이면 타이머 재시작 (새 속도 반영)
-        if (this.playbackState === 'playing') {
-            this._stopTimer();
-            this._startTimer();
-        }
-    }
-    // --- 타이머: 초 단위 진행 ---
-    _startTimer() {
-        this._stopTimer();
-        const intervalMs = 1000 / this.speed;
-        this._timer = window.setInterval(() => {
-            if (!this._currentPlayTime)
-                return;
-            const next = new Date(this._currentPlayTime.getTime() + 1000);
-            // 종료 시점 초과 시 정지
-            if (next.getTime() > this._endTime.getTime()) {
-                this._onStop();
-                return;
-            }
-            this._currentPlayTime = next;
-            this._updateSeekFromPlayTime();
-            this.dispatchEvent(new CustomEvent('playback-tick', {
-                detail: { currentTime: this._currentPlayTime },
-                bubbles: true,
-                composed: true
-            }));
-        }, intervalMs);
-    }
-    _stopTimer() {
-        if (this._timer) {
-            clearInterval(this._timer);
-            this._timer = undefined;
-        }
-    }
-    _updateSeekFromPlayTime() {
-        if (!this._currentPlayTime)
-            return;
-        const from = this._startTime.getTime();
-        const to = this._endTime.getTime();
-        const range = to - from;
-        if (range <= 0)
-            return;
-        this._seekValue = Math.max(0, Math.min(1000, Math.round(((this._currentPlayTime.getTime() - from) / range) * 1000)));
     }
 };
 PlaybackControls.styles = css `
@@ -349,10 +719,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 {
@@ -371,7 +780,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;
@@ -383,10 +793,113 @@ PlaybackControls.styles = css `
       cursor: pointer;
     }
 
-    .hour-select:focus {
+    /*
+     * Windows + Chrome: select 의 color/background 가 native popup option 에
+     * 일관되게 적용 안 됨 (option 텍스트는 white 상속, popup 배경은 OS 기본 흰색
+     * → invisible). option 요소에 명시적으로 dark 컬러 박아 모든 OS 에서 가독.
+     */
+    .hour-select option,
+    .range-select option {
+      background-color: #1a1d22;
+      color: #fff;
+    }
+
+    .hour-select:focus,
+    .range-select:focus {
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+
+    .range-select {
+      min-width: 64px;
+    }
+
+    .composite-datetime {
+      display: inline-flex;
+      align-items: center;
+      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;
+      box-sizing: border-box;
+      transition: border-color 0.2s, opacity 0.2s;
+    }
+
+    .composite-datetime:focus-within {
       border-color: rgba(255, 255, 255, 0.6);
     }
 
+    .composite-datetime.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .inner-date {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-family: inherit;
+      font-size: inherit;
+      outline: none;
+      color-scheme: dark;
+      padding: 0;
+      cursor: text;
+    }
+
+    .inner-date::-webkit-calendar-picker-indicator,
+    .inner-date::-webkit-inner-spin-button,
+    .inner-date::-webkit-clear-button {
+      display: none;
+      -webkit-appearance: none;
+    }
+
+    .inner-time {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-family: inherit;
+      font-size: inherit;
+      outline: none;
+      width: 16px;
+      text-align: center;
+      padding: 0;
+    }
+
+    .inner-time::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+    }
+
+    .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;
@@ -441,6 +954,10 @@ PlaybackControls.styles = css `
       --md-icon-button-container-height: 40px;
     }
 
+    .row-seek md-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
     .timeline {
       flex: 1;
       display: flex;
@@ -449,15 +966,50 @@ PlaybackControls.styles = css `
       min-width: 0;
     }
 
-    .seek-bar {
+    .seek-track {
+      position: relative;
       width: 100%;
+      height: 12px;
+    }
+
+    .seek-rail {
+      position: absolute;
+      top: 4px;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 2px;
+    }
+
+    .buffer-bar {
+      position: absolute;
+      top: 4px;
       height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 2px;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .seek-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 12px;
       -webkit-appearance: none;
       appearance: none;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 2px;
+      background: transparent;
       outline: none;
       cursor: pointer;
+      z-index: 2;
+      margin: 0;
+    }
+
+    .seek-bar::-webkit-slider-runnable-track {
+      height: 12px;
+      background: transparent;
     }
 
     .seek-bar::-webkit-slider-thumb {
@@ -484,6 +1036,7 @@ PlaybackControls.styles = css `
       text-align: center;
     }
   `;
+PlaybackControls.PREVIEW_THROTTLE_MS = 200;
 __decorate([
     property({ type: String })
 ], PlaybackControls.prototype, "playbackState", void 0);
@@ -493,18 +1046,42 @@ __decorate([
 __decorate([
     property({ type: String })
 ], PlaybackControls.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: Array })
+], PlaybackControls.prototype, "bufferedRanges", void 0);
 __decorate([
     property({ type: Object })
 ], 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);
 __decorate([
     state()
 ], PlaybackControls.prototype, "_currentPlayTime", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_seeking", void 0);
+__decorate([
+    state()
+], PlaybackControls.prototype, "_seekPreviewTime", void 0);
 PlaybackControls = PlaybackControls_1 = __decorate([
     customElement('ox-playback-controls')
 ], PlaybackControls);