@fmsim/board 1.0.88 → 2.0.0-beta.101

package/dist/src/ox-board-viewer.js

@@ -1,17 +1,27 @@
+var BoardViewer_1;
 import { __decorate } from "tslib";
-import '@material/mwc-fab';
-import '@material/mwc-icon';
+import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
 import './layers/movement-layer.js';
 import './ox-board-component-info.js';
 import './layers/mcs-mouse-event-handler.js';
-import { css, html, LitElement } from 'lit';
+import './ox-playback-controls.js';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
-import { isIOS, togglefullscreen } from '@operato/utils';
+import { PlaybackEngine } from './playback/playback-engine.js';
+import { CarrierTrackingStore } from './playback/carrier-tracking-store.js';
+import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
+import { isIOS, fullscreen, exitfullscreen, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
 import { DataStorage } from './data-storage/data-storage.js';
 import { runScenario, startScenario, DataSubscriptionProviderImpl, isRestfulAvailable } from '@fmsim/api';
-let BoardViewer = class BoardViewer extends LitElement {
+// FAB 아이콘 — packages/board/icons/fab/ 의 외부 SVG asset 로 분리.
+// 기존엔 inline SVG 였으나 (a) 가독성 향상, (b) 디자이너 단독 수정, (c) 캐시 활용 목적.
+const ICON_FAB_PLAYBACK_PLAY = new URL('../../icons/fab/playback-play.svg', import.meta.url).href;
+const ICON_FAB_PLAYBACK_STOP = new URL('../../icons/fab/playback-stop.svg', import.meta.url).href;
+const ICON_FAB_MODE_2D = new URL('../../icons/fab/mode-2d.svg', import.meta.url).href;
+const ICON_FAB_MODE_3D = new URL('../../icons/fab/mode-3d.svg', import.meta.url).href;
+let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
     constructor() {
         var _a;
         super(...arguments);
@@ -24,6 +34,8 @@ let BoardViewer = class BoardViewer extends LitElement {
         this._forward = [];
         this._backward = [];
         this._oldtarget = null;
+        this._fabExpanded = false;
+        this._playbackActive = false;
         this.currentBoardId = (_a = this.board) === null || _a === void 0 ? void 0 : _a.id;
         this.popup = null;
         this.lastComponent = null;
@@ -33,7 +45,6 @@ let BoardViewer = class BoardViewer extends LitElement {
             const id = e.detail.value;
             const components = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAll(`#${id}`);
             if (!components || components.length == 0) {
-                console.log('No equipment was found.');
                 return;
             }
             window.dispatchEvent(new CustomEvent('clickComponent', { detail: components[0] }));
@@ -41,9 +52,16 @@ let BoardViewer = class BoardViewer extends LitElement {
         };
         // 모니터링에서 Movement Data를 보여준다.
         this.fmbShowMovementHandler = (e) => {
-            var _a;
+            var _a, _b, _c;
+            // 플레이백 중에는 외부 모니터링이 보내는 실시간 반송 정보를 그리지 않는다 —
+            // 사용자가 플레이백 시점의 *과거 상태* 를 보고 있는데 실시간 화살표가 겹치면
+            // 혼란을 줌. (백엔드 상세 정보 요청은 ox-board-component-info.ts:225 에서
+            // 같은 playbackMode 가드로 이미 차단됨.)
+            if ((_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.rootContainer) === null || _b === void 0 ? void 0 : _b.playbackMode) {
+                return;
+            }
             const movement = e.detail.value;
-            const movementLayer = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findById(`movement-layer`);
+            const movementLayer = (_c = this._scene) === null || _c === void 0 ? void 0 : _c.findById(`movement-layer`);
             if (!movementLayer) {
                 return;
             }
@@ -107,32 +125,31 @@ let BoardViewer = class BoardViewer extends LitElement {
                 floatingContainer.hidden = true;
             }
         };
-        // BoardComponentInfo popup을 보여준다.
+        // BoardComponentInfo popup 을 보여주고 deco-border 로 selected highlight.
+        // 영구 추적과는 독립 — query-submit 핸들러 (onQuerySubmit) 가 별도로 담당.
         this.clickComponentHandler = (e) => {
-            var _a, _b;
             const component = e.detail;
             const { type } = component.state;
             if (type == 'model-layer') {
-                (_a = this.lastComponent) === null || _a === void 0 ? void 0 : _a.trigger('deco-border-off');
-                // this.lastComponent?.trigger('deco-arrow-reset')
+                this._clearClickHighlight();
                 this.hidePopup();
                 return;
             }
             if ('isLVComponent' in component) {
-                (_b = this.lastComponent) === null || _b === void 0 ? void 0 : _b.trigger('deco-border-off');
-                // this.lastComponent?.trigger('deco-arrow-reset')
+                this._clearClickHighlight();
                 this.lastComponent = component;
                 component.trigger('deco-border', { distance: 8, lineWidth: 4, color: '#f007' });
-                // component.trigger('deco-arrow', { color: 'red', animation: true, size: 20 })
                 this.togglePopup(component);
             }
         };
+        // 영구 추적 라이프사이클은 things-scene 의 Scene.tracker 가 일괄 관리.
+        // (polling, deco-border 부착/해제, 3D outline 색 동기화, centerTo)
         this.fmbStartAnimation = (e) => {
             var _a;
             const { target, animation, decorator, border, arrow } = e.detail || {};
             const { id, type } = target || {};
             if (id) {
-                (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id).filter(component => !type || component.getState('type') == type).forEach(component => {
+                (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id).filter((component) => !type || component.getState('type') == type).forEach((component) => {
                     if (animation) {
                         component.resetAnimation();
                         component.setState('animation', {
@@ -160,7 +177,7 @@ let BoardViewer = class BoardViewer extends LitElement {
             const { target } = e.detail || {};
             const { id, type } = target || {};
             if (id) {
-                (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id).filter(component => !type || component.getState('type') == type).forEach(component => {
+                (_a = this._scene) === null || _a === void 0 ? void 0 : _a.findAllById(id).filter((component) => !type || component.getState('type') == type).forEach((component) => {
                     component.trigger('deco-off');
                     component.resetAnimation();
                     component.setState('animation', {
@@ -173,118 +190,234 @@ let BoardViewer = class BoardViewer extends LitElement {
             var _a;
             (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.trigger('deco-reset');
         };
+        /**
+         * 스토커 게이지 표시 모드 전환 (런타임 전용, 비영속).
+         * 외부: window.dispatchEvent(new CustomEvent('fmbSetStockerGaugeMode', { detail: { mode } }))
+         * mode: 'capacity'(기본) | 'carrier' | 'abnormal'. RootContainer.stockerGaugeMode setter 가
+         * 2D 리드로우 + 3D 게이지 재빌드를 트리거한다(fmsim/machine root-container-override).
+         * 미지값은 무시 — state 오염 방지(render 는 미지값을 capacity 로 폴백하지만 명시 게이트).
+         *
+         * 반드시 rootContainer(=RootContainer, isRoot()===true)에 설정해야 한다. scene.root 는
+         * model_layer(Layer)라 override 가 없고, 컴포넌트의 this.root 는 RootContainer 로 해석되므로
+         * scene.root 에 쓰면 죽은 속성만 박히고 게이지에 반영되지 않는다.
+         */
+        this.fmbSetStockerGaugeModeHandler = (e) => {
+            var _a, _b;
+            const mode = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.mode;
+            if (mode !== 'capacity' && mode !== 'carrier' && mode !== 'abnormal') {
+                return;
+            }
+            const rootContainer = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.rootContainer;
+            if (rootContainer) {
+                rootContainer.stockerGaugeMode = mode;
+            }
+        };
+        this._pointerMoveHandler = () => this.transientShowButtons();
+        /**
+         * playback 모드는 전체화면 모드와 한 몸 — 어떤 경로로든 전체화면이 해제되면
+         * playback 도 함께 종료. (단독 전체화면 토글은 기존처럼 동작하도록 `_playbackActive` 가드.)
+         */
+        this._fullscreenChangeHandler = () => {
+            if (!document.fullscreenElement && this._playbackActive) {
+                this._onPlaybackStop();
+            }
+        };
         this.resizeHandler = () => {
             this._scene && this._scene.fit();
         };
+        // ── Data Subscription ──
+        this._dataSubscriptionProvider = isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl();
+        /**
+         * 영구추적 fallback 데이터 캐시 — 플레이백 윈도우 × carrierName 단위로
+         * carrier 위치 이력을 보관. carrier 가 scene 에 직접 안 보일 때
+         * Tracker fallback 콜백이 lookupAt 으로 머신/유닛을 찾아 반환.
+         */
+        this._carrierTrackingStore = new CarrierTrackingStore();
+        /**
+         * fallback 결과(target 컴포넌트) dedupe — 직전과 동일한 target 일 땐 로그 skip
+         * + deco-arrow 라이프사이클 (target 변경 시 이전 끄고 새로 부착).
+         */
+        this._lastFallbackTarget = null;
+        /** _resolveCarrierFallback 마지막 호출 timestamp — carrier 발견 감지용. */
+        this._lastFallbackResolvedAt = 0;
+    }
+    get _is3dMode() {
+        var _a, _b, _c;
+        return !!((_c = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel) === null || _c === void 0 ? void 0 : _c.is3dMode);
     }
     render() {
-        var fullscreen = !isIOS() && !this.hideFullscreen
-            ? html `
-            <mwc-fab
-              id="fullscreen"
-              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
-              @click=${(e) => this.onTapFullscreen()}
+        var _a, _b;
+        var fabGroup = this.hideFullscreen
+            ? html ``
+            : html `
+            <div
+              fab-group
+              ?expanded=${this._fabExpanded}
               @mouseover=${(e) => this.transientShowButtons(true)}
               @mouseout=${(e) => this.transientShowButtons()}
-              title="fullscreen"
-            ></mwc-fab>
-          `
-            : html ``;
+            >
+              <md-fab
+                class="main-fab"
+                ?expanded=${this._fabExpanded}
+                @click=${() => { this._fabExpanded = !this._fabExpanded; }}
+                title="menu"
+              ><md-icon slot="icon">add</md-icon></md-fab>
+
+              ${isIOS() ? nothing : html `<md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapFullscreen(); }}
+                title="fullscreen"
+              ><md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon></md-fab>`}
+
+              <md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapPlayback(); }}
+                title=${this._playbackActive ? 'stop playback' : 'start playback'}
+              ><span slot="icon" class="fab-icon-wrap"><img
+                class="fab-icon"
+                src=${this._playbackActive ? ICON_FAB_PLAYBACK_STOP : ICON_FAB_PLAYBACK_PLAY}
+                alt=${this._playbackActive ? 'stop playback' : 'start playback'}
+              /></span></md-fab>
+
+              <md-fab
+                class="sub-fab"
+                @click=${() => { this._fabExpanded = false; this.onTapToggle3D(); }}
+                title=${this._is3dMode ? '2D mode' : '3D mode'}
+              ><span slot="icon" class="fab-icon-wrap"><img
+                class="fab-icon"
+                src=${this._is3dMode ? ICON_FAB_MODE_2D : ICON_FAB_MODE_3D}
+                alt=${this._is3dMode ? '2D mode' : '3D mode'}
+              /></span></md-fab>
+            </div>
+          `;
         var prev = !this.hideNavigation
             ? html `
-          <mwc-icon
+          <md-icon
             id="prev"
             @click=${(e) => this.onTapPrev()}
             @mouseover=${(e) => this.transientShowButtons(true)}
             @mouseout=${(e) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_left</mwc-icon
+            >keyboard_arrow_left</md-icon
           >
         `
             : html ``;
         var next = !this.hideNavigation
             ? html `
-          <mwc-icon
+          <md-icon
             id="next"
             @click=${(e) => this.onTapNext()}
             @mouseover=${(e) => this.transientShowButtons(true)}
             @mouseout=${(e) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_right</mwc-icon
+            >keyboard_arrow_right</md-icon
           >
         `
             : html ``;
         return html `
       ${prev}
 
-      <div
-        id="target"
-        @touchstart=${(e) => this.transientShowButtons()}
-        @mousemove=${(e) => this.transientShowButtons()}
-      ></div>
+      <div id="target"></div>
 
       <slot></slot>
-      ${next} ${fullscreen}
+      ${next} ${fabGroup}
+
+      ${this._playbackActive
+            ? html `<ox-playback-controls
+            .playbackState=${((_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.state) === 'playing' ? 'playing' : ((_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.state) === 'paused' ? 'paused' : 'idle'}
+            @playback-start=${this._onPlaybackStart}
+            @playback-pause=${this._onPlaybackPause}
+            @playback-resume=${this._onPlaybackResume}
+            @playback-stop=${this._onPlaybackStop}
+            @playback-seek=${this._onPlaybackSeek}
+            @playback-seek-start=${this._onPlaybackSeekStart}
+            @playback-seek-preview=${this._onPlaybackSeekPreview}
+            @playback-speed=${this._onPlaybackSpeed}
+          ></ox-playback-controls>`
+            : nothing}
     `;
     }
+    /** 마우스 클릭/popup 의 selected highlight 해제. */
+    _clearClickHighlight() {
+        if (this.lastComponent) {
+            this.lastComponent.trigger('deco-border-off');
+            this.lastComponent = null;
+        }
+    }
+    /** connect/disconnect 시 일괄 등록/해제할 window 이벤트 목록 (모니터링 연동) */
+    get _monitoringEvents() {
+        return [
+            ['fetchIFactsData', this.fetchIFactsDataHandler], // 장비 아이디 object를 캔버스 가운데로
+            ['fmbShowMovement', this.fmbShowMovementHandler], // Movement Data 표시
+            ['fmbMonitoringInit', this.fmbMonitoringInitHandler], // 보드 상태 정사이즈 복원
+            ['clickComponent', this.clickComponentHandler], // BoardComponentInfo popup
+            ['fmbStartAnimation', this.fmbStartAnimation], // AnimatedIcon 추가/제거
+            ['fmbStopAnimation', this.fmbStopAnimation],
+            ['fmbResetAnimation', this.fmbResetAnimation],
+            ['fmbShowLegend', this.fmbShowLegendHandler], // 범례 표시
+            ['fmbHideLegend', this.fmbHideLegendHandler],
+            ['fmbShowPopup', this.fmbShowPopupHandler], // 팝업 표시
+            ['fmbHidePopup', this.fmbHidePopupHandler],
+            ['fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler], // FloatingContainer
+            ['fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler],
+            ['fmbSetStockerGaugeMode', this.fmbSetStockerGaugeModeHandler] // 스토커 게이지 모드 전환
+        ];
+    }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('resize', this.resizeHandler);
+        // 3D 모드에서도 마우스 움직임 감지 (document 레벨, capture phase)
+        document.addEventListener('pointermove', this._pointerMoveHandler, true);
+        document.addEventListener('fullscreenchange', this._fullscreenChangeHandler);
+        document.addEventListener('webkitfullscreenchange', this._fullscreenChangeHandler);
         this.renderRoot.addEventListener('close-scene', e => {
             e.preventDefault();
             this.onTapPrev();
         }, false);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.addEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.addEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.addEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.addEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon 을 추가하거나 제거한다.
-        window.addEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.addEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.addEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.addEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.addEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.addEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.addEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.addEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.addEventListener(type, handler);
+        }
     }
     disconnectedCallback() {
+        var _a, _b, _c, _d, _e;
         super.disconnectedCallback();
         window.removeEventListener('resize', this.resizeHandler);
-        // 모니터링에서 장비 아이디에 해당하는 object를 찾아 캔버스 가운데 위치하도록 조정한다.
-        window.removeEventListener('fetchIFactsData', this.fetchIFactsDataHandler);
-        // 모니터링에서 Movement Data를 보여준다.
-        window.removeEventListener('fmbShowMovement', this.fmbShowMovementHandler);
-        // 모니터링에서 보드 상태를 원래상태 (정사이즈)로 돌려놓는다.
-        window.removeEventListener('fmbMonitoringInit', this.fmbMonitoringInitHandler);
-        // BoardComponentInfo popup을 보여준다.
-        window.removeEventListener('clickComponent', this.clickComponentHandler);
-        // AnimatedIcon을 추가하거나 제거한다.
-        window.removeEventListener('fmbStartAnimation', this.fmbStartAnimation);
-        window.removeEventListener('fmbStopAnimation', this.fmbStopAnimation);
-        window.removeEventListener('fmbResetAnimation', this.fmbResetAnimation);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowLegend', this.fmbShowLegendHandler);
-        window.removeEventListener('fmbHideLegend', this.fmbHideLegendHandler);
-        // 모니터링에서 범례를 보여준다.
-        window.removeEventListener('fmbShowPopup', this.fmbShowPopupHandler);
-        window.removeEventListener('fmbHidePopup', this.fmbHidePopupHandler);
-        // 모니터링에서 FloatingContainer를 보여준다.
-        window.removeEventListener('fmbShowFloatingContainer', this.fmbShowFloatingContainerHandler);
-        window.removeEventListener('fmbHideFloatingContainer', this.fmbHideFloatingContainerHandler);
-        this.lastComponent = null;
+        document.removeEventListener('pointermove', this._pointerMoveHandler, true);
+        document.removeEventListener('fullscreenchange', this._fullscreenChangeHandler);
+        document.removeEventListener('webkitfullscreenchange', this._fullscreenChangeHandler);
+        for (const [type, handler] of this._monitoringEvents) {
+            window.removeEventListener(type, handler);
+        }
+        this._clearClickHighlight();
+        (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.tracker) === null || _b === void 0 ? void 0 : _b.stop();
+        // 플레이백이 활성 상태면 명시적 stop (provider resume 포함)
+        if (this._playbackActive) {
+            (_c = this._playbackEngine) === null || _c === void 0 ? void 0 : _c.stop();
+            (_d = this._playbackEngine) === null || _d === void 0 ? void 0 : _d.detachScene();
+            (_e = this._dataSubscriptionProvider) === null || _e === void 0 ? void 0 : _e.resume();
+            this._playbackActive = false;
+        }
+        this._playbackWindow = undefined;
+        this._carrierTrackingStore.clear();
+        this._clearFallbackArrow();
+        this._stopFallbackArrowMonitor();
+        if (this._playbackEngine) {
+            this._playbackEngine.dispose();
+            this._playbackEngine = undefined;
+        }
         this.closeScene();
     }
     updated(changes) {
+        // loadTracker가 외부에서 전달되면 즉시 overlay 연결 (fetch 중에도 표시)
+        if (changes.has('loadTracker') && this.loadTracker) {
+            this._ensureOverlay(this.loadTracker);
+        }
         if (changes.has('board')) {
+            // tracker: 외부에서 안 왔으면 여기서 생성
+            if (!this.loadTracker) {
+                this.loadTracker = new LoadTracker();
+                this._ensureOverlay(this.loadTracker);
+            }
             this.hidePopup();
             this.closeScene();
             if (this.board && this.board.id) {
@@ -304,33 +437,47 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
     }
     async initSceneAsync() {
-        if (!this.board || !this.board.id)
+        if (!this.board || !this.board.id || !this.provider)
             return;
-        this._scene = await this.provider.create(this.board.id);
-        this.setupScene({ id: this.board.id, scene: this._scene });
+        try {
+            this._scene = await this.provider.create(this.board.id);
+            this.setupScene({ id: this.board.id, scene: this._scene });
+        }
+        catch (e) {
+            console.error('Failed to load scene:', this.board.id, e);
+        }
     }
     initScene() {
-        if (!this.board || !this.board.id) {
+        if (!this.board || !this.board.id || !this.board.model) {
             return;
         }
         this._scene = create({
-            model: {
-                ...this.board.model
-            },
+            model: JSON.parse(JSON.stringify(this.board.model)),
             style: this.board.style,
             mode: SCENE_MODE.VIEW,
             handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'waypoint-handler'],
             layers: [{ type: 'scroll-layer' }, { type: 'movement-layer', id: 'movement-layer' }],
             refProvider: this.provider,
             dataStorage: this.board.id !== 'preview' ? new DataStorage(this.board.id) : undefined,
-            dataSubscriptionProvider: isRestfulAvailable() ? undefined : new DataSubscriptionProviderImpl()
+            dataSubscriptionProvider: this._dataSubscriptionProvider,
+            loading: this.loadTracker ? { tracker: this.loadTracker } : undefined
         });
         if (this.baseUrl) {
             this._scene.baseUrl = this.baseUrl;
         }
         this.setupScene({ id: this.board.id, scene: this._scene });
     }
+    _ensureOverlay(tracker) {
+        if (!this._loadingOverlay) {
+            this._loadingOverlay = new LoadingOverlay();
+        }
+        this._loadingOverlay.attach(this.renderRoot, tracker);
+    }
     closeScene() {
+        var _a, _b;
+        // scene 교체/종료 시 highlight 상태도 함께 정리. tracking watcher 누수 방지.
+        this._clearClickHighlight();
+        (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.tracker) === null || _b === void 0 ? void 0 : _b.stop();
         if (this._scene) {
             this.unbindSceneEvents(this._scene);
             this._scene.target = null;
@@ -349,6 +496,10 @@ let BoardViewer = class BoardViewer extends LitElement {
     }
     setupScene({ id, scene }) {
         var _a;
+        // 플레이백 리셋
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
         this._scene = scene;
         const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
         if (typeof backgroundColor === 'string') {
@@ -372,7 +523,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         this.transientShowButtons();
     }
     async showScene(boardId, bindingData) {
-        if (!boardId)
+        if (!boardId || !this.provider)
             return;
         try {
             var scene = await this.provider.get(boardId, true);
@@ -410,6 +561,206 @@ let BoardViewer = class BoardViewer extends LitElement {
         this._scene.on('run-scenario', this.onRunScenario, this);
         this._scene.on('legend-toggle', this.onLegendToggle, this);
         this._scene.on('open-popup', this.onOpenPopup, this);
+        // VIEW 모드 SearchOverlay 디폴트 = 영구 추적 (things-scene 자동 처리).
+        // application 은 trackerOptions (color/fallback 등) 또는 onSearchSubmit/onSearchClose
+        // hook (디폴트 override) 만 제공.
+        //
+        // fallback: 원본 carrier 컴포넌트가 scene 에 없을 때 호출 (Tracker 1s polling).
+        // 플레이백 중이면 carrier-location history 에서 현재 시각의 머신/유닛을 lookup 해
+        // 해당 컴포넌트를 highlight 대상으로 반환. 플레이백 비활성 / 시간 정보 없음 /
+        // NA / 보드에 머신 없음 → null 반환해서 highlight 없이 추적만 유지.
+        this._scene.trackerOptions = {
+            color: BoardViewer_1.TRACKING_COLOR,
+            fallback: (_id, scene) => this._resolveCarrierFallback(scene)
+        };
+        // SearchOverlay submit/close hook — carrier-location store 의 충전/정리 트리거.
+        // 디폴트 동작 (tracker.start/stop) 은 그대로 위임 (return undefined).
+        this._scene.onSearchSubmit = (detail) => {
+            this._onCarrierTrackingSubmit(detail === null || detail === void 0 ? void 0 : detail.query);
+        };
+        this._scene.onSearchClose = () => {
+            this._carrierTrackingStore.clear();
+        };
+    }
+    /**
+     * Tracker fallback resolver — 플레이백 시각의 carrier 위치를 컴포넌트로 변환.
+     * NA / 정보 없음 / 머신 미존재 → null (Tracker 가 highlight 없이 추적만 유지).
+     *
+     * 매 1초 polling 마다 호출되며, 결과 target 이 직전과 동일하면 로그 skip.
+     */
+    _resolveCarrierFallback(scene) {
+        var _a, _b, _c, _d;
+        if (!this._playbackActive)
+            return null;
+        const currentTime = (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.currentTime;
+        if (!currentTime)
+            return null;
+        const timeMs = Date.parse(currentTime.replace(' ', 'T'));
+        if (!Number.isFinite(timeMs))
+            return null;
+        const carrier = (_d = (_c = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.tracker) === null || _c === void 0 ? void 0 : _c.trackingId) !== null && _d !== void 0 ? _d : '?';
+        const loc = this._carrierTrackingStore.lookupAt(timeMs);
+        this._lastFallbackResolvedAt = Date.now();
+        const logIfChanged = (target, msg) => {
+            if (target === this._lastFallbackTarget)
+                return;
+            // 이전 target 의 bouncing arrow 해제 + 새 target 에 부착 (가시성 강화).
+            // deco-border 는 things-scene Tracker 가 처리하므로 우리는 deco-arrow 만 관리.
+            this._setFallbackArrow(this._lastFallbackTarget, null);
+            this._setFallbackArrow(null, target);
+            this._lastFallbackTarget = target;
+            console.log(msg);
+        };
+        if (!loc) {
+            logIfChanged(null, `[CarrierTracking] fallback: history miss (carrier=${carrier}, t=${currentTime})`);
+            return null;
+        }
+        if (loc.machineName === 'NA') {
+            logIfChanged(null, `[CarrierTracking] fallback: NA (carrier=${carrier}, t=${currentTime})`);
+            return null;
+        }
+        // unitName 우선 (더 정밀), 없으면 machineName 으로 폴백.
+        // 같은 id 컴포넌트가 여러 개일 수 있어 (예: 머신 본체 + 부착된 게이지) findAllById
+        // 로 후보 모두 가져온 뒤, mcs-mouse-event-handler 의 클릭 dispatch 와 동일한
+        // 패턴으로 머신 본체로 수렴:
+        //   - 'isLVComponent' 후보 선택
+        //   - parentObject 가 있으면 그쪽으로 escalate (게이지·바 → 머신 본체)
+        //   - 없으면 자기 자신 사용
+        const resolveLVById = (id) => {
+            var _a, _b;
+            const candidates = (((_a = scene === null || scene === void 0 ? void 0 : scene.findAllById) === null || _a === void 0 ? void 0 : _a.call(scene, id)) || []);
+            const c = candidates.find(c => 'isLVComponent' in c);
+            if (!c)
+                return null;
+            return (_b = c.parentObject) !== null && _b !== void 0 ? _b : c;
+        };
+        let target = null;
+        let hitVia = null;
+        if (loc.unitName) {
+            const t = resolveLVById(loc.unitName);
+            if (t) {
+                target = t;
+                hitVia = 'unit';
+            }
+        }
+        if (!target && loc.machineName) {
+            const t = resolveLVById(loc.machineName);
+            if (t) {
+                target = t;
+                hitVia = 'machine';
+            }
+        }
+        if (hitVia === 'unit') {
+            logIfChanged(target, `[CarrierTracking] fallback applied via unit=${loc.unitName} ` +
+                `(machine=${loc.machineName} not tried) (carrier=${carrier}, t=${currentTime})`);
+        }
+        else if (hitVia === 'machine') {
+            logIfChanged(target, `[CarrierTracking] fallback applied via machine=${loc.machineName} ` +
+                `(unit=${loc.unitName} miss) (carrier=${carrier}, t=${currentTime})`);
+        }
+        else {
+            logIfChanged(target, `[CarrierTracking] fallback: scene 미존재 — unit=${loc.unitName} (miss), ` +
+                `machine=${loc.machineName} (miss) (carrier=${carrier}, t=${currentTime})`);
+        }
+        return target;
+    }
+    /**
+     * deco-arrow 라이프사이클 — 이전 target 끄고 새 target 에 bouncing arrow 부착.
+     * 둘 다 null 가능 (해제만, 부착만).
+     */
+    _setFallbackArrow(off, on) {
+        var _a, _b, _c, _d;
+        if (off) {
+            try {
+                (_b = (_a = off).trigger) === null || _b === void 0 ? void 0 : _b.call(_a, 'deco-arrow-off');
+            }
+            catch (_e) { }
+        }
+        if (on) {
+            try {
+                ;
+                (_d = (_c = on).trigger) === null || _d === void 0 ? void 0 : _d.call(_c, 'deco-arrow', {
+                    animation: true,
+                    repeat: true,
+                    size: 0.75,
+                    // TRACKING_COLOR(#00aaff7f) 의 색조는 유지하되 알파(7f) 만 제거해 불투명.
+                    color: BoardViewer_1.TRACKING_COLOR.slice(0, 7),
+                    duration: 5000
+                });
+            }
+            catch (_f) { }
+        }
+    }
+    /**
+     * 1초 polling — 화살표 부착 대상을 결정.
+     *   1) 플레이백 종료 / 추적 ID 없음 → 화살표 해제
+     *   2) carrier 가 scene 에 직접 존재 → **carrier 자체에 화살표 부착**
+     *      (things-scene Tracker 가 carrier 발견 시 fallback 콜백 호출을 멈춰
+     *       resolver 경로로는 우리가 모름. monitor 에서 직접 책임)
+     *   3) carrier 없음 + resolver 가 3초 이상 호출 안 됨 → 화살표 해제
+     *      (그 외엔 resolver 의 logIfChanged 가 fallback target 으로 부착 중)
+     */
+    _startFallbackArrowMonitor() {
+        if (this._fallbackArrowMonitor != null)
+            return;
+        this._fallbackArrowMonitor = window.setInterval(() => {
+            var _a, _b, _c, _d, _e;
+            // 1) 플레이백 종료 / 추적 ID 해제
+            const trackingId = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.tracker) === null || _b === void 0 ? void 0 : _b.trackingId;
+            if (!this._playbackActive || !trackingId) {
+                this._clearFallbackArrow();
+                return;
+            }
+            // 2) carrier 가 scene 에 직접 존재 — carrier(또는 parentObject)에 화살표 부착
+            const carrierComp = (((_d = (_c = this._scene) === null || _c === void 0 ? void 0 : _c.findAllById) === null || _d === void 0 ? void 0 : _d.call(_c, trackingId)) || [])
+                .find(c => 'isLVComponent' in c);
+            if (carrierComp) {
+                const arrowTarget = (_e = carrierComp.parentObject) !== null && _e !== void 0 ? _e : carrierComp;
+                if (arrowTarget !== this._lastFallbackTarget) {
+                    this._setFallbackArrow(this._lastFallbackTarget, null);
+                    this._setFallbackArrow(null, arrowTarget);
+                    this._lastFallbackTarget = arrowTarget;
+                }
+                return;
+            }
+            // 3) resolver 가 일정 시간 호출되지 않음 — Tracker 가 추적 중단했을 가능성
+            if (this._lastFallbackTarget && Date.now() - this._lastFallbackResolvedAt > 3000) {
+                this._clearFallbackArrow();
+            }
+        }, 1000);
+    }
+    _stopFallbackArrowMonitor() {
+        if (this._fallbackArrowMonitor != null) {
+            clearInterval(this._fallbackArrowMonitor);
+            this._fallbackArrowMonitor = undefined;
+        }
+    }
+    /** 부착된 deco-arrow 강제 해제 + dedupe 상태 초기화. */
+    _clearFallbackArrow() {
+        if (this._lastFallbackTarget) {
+            this._setFallbackArrow(this._lastFallbackTarget, null);
+            this._lastFallbackTarget = null;
+        }
+    }
+    /**
+     * onSearchSubmit hook — 영구추적 carrierName 이 설정되는 순간.
+     * 플레이백 윈도우가 잡혀 있으면 즉시 store 충전. 윈도우가 없으면
+     * 플레이백 시작 시 (_onPlaybackStart) 에 충전.
+     */
+    _onCarrierTrackingSubmit(carrierName) {
+        this._clearFallbackArrow(); // 새 carrier — 기존 화살표/dedupe 정리
+        if (!carrierName) {
+            this._carrierTrackingStore.clear();
+            return;
+        }
+        const win = this._playbackWindow;
+        if (this._playbackActive && win) {
+            this._carrierTrackingStore.load(carrierName, win.from, win.to);
+        }
+        else {
+            // 플레이백 비활성 — 윈도우 정해질 때까지 대기. 캐시는 비워둠.
+            this._carrierTrackingStore.clear();
+        }
     }
     unbindSceneEvents(scene) {
         scene.off('run', this.onRunBoard, this);
@@ -425,7 +776,7 @@ let BoardViewer = class BoardViewer extends LitElement {
     transientShowButtons(stop) {
         var buttons = [];
         !this.hideNavigation && buttons.push(this._next, this._prev);
-        !this.hideFullscreen && buttons.push(this._fullscreen);
+        !this.hideFullscreen && buttons.push(this._fabGroup);
         if (buttons.length == 0) {
             return;
         }
@@ -448,7 +799,7 @@ let BoardViewer = class BoardViewer extends LitElement {
         }
         this._forward.length <= 0 ? this._next.setAttribute('hidden', '') : this._next.removeAttribute('hidden');
         this._backward.length <= 0 ? this._prev.setAttribute('hidden', '') : this._prev.removeAttribute('hidden');
-        this._fullscreen && this._fullscreen.removeAttribute('hidden');
+        this._fabGroup && this._fabGroup.removeAttribute('hidden');
         this._fade_animations.forEach(animation => {
             animation.cancel();
             if (stop)
@@ -486,6 +837,264 @@ let BoardViewer = class BoardViewer extends LitElement {
     onTapFullscreen() {
         togglefullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
     }
+    onTapToggle3D() {
+        var _a, _b, _c;
+        const modelLayer = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.rootModel;
+        if (!(modelLayer === null || modelLayer === void 0 ? void 0 : modelLayer.toggleThreeD))
+            return;
+        const entering3D = !modelLayer.is3dMode;
+        modelLayer.toggleThreeD();
+        this.requestUpdate();
+        // fmsim: 3D 진입 시 자동 회전
+        if (entering3D && ((_c = modelLayer._threeCapability) === null || _c === void 0 ? void 0 : _c.isInitialized)) {
+            modelLayer._threeCapability.controlsManager.reset();
+            modelLayer._threeCapability.controlsManager.setAutoRotate(true);
+        }
+    }
+    onTapPlayback() {
+        var _a, _b;
+        if (this._playbackActive) {
+            this._onPlaybackStop();
+        }
+        else {
+            // 플레이백 시작 시 팝업 닫기
+            this.hidePopup();
+            // 1) 라이브 데이터 구독 실제 종료
+            (_a = this._dataSubscriptionProvider) === null || _a === void 0 ? void 0 : _a.pause();
+            this._unsubscribeSceneData();
+            // 2) 라이브 데이터 초기화 (깨끗한 상태에서 playback 시작)
+            this._resetSceneData();
+            this._playbackActive = true;
+            // playbackMode 를 "라이브 아님" 의미로 통일 — 준비 단계부터 set 해서
+            // FAB 클릭 직후 ~ Play 누르기 전 사이의 갭에서도 가드 (mouse handler,
+            // movement layer, restful subscription) 가 작동하도록.
+            if ((_b = this._scene) === null || _b === void 0 ? void 0 : _b.rootContainer)
+                this._scene.rootContainer.playbackMode = true;
+            if (!this._playbackEngine) {
+                this._playbackEngine = new PlaybackEngine();
+                this._playbackEngine.on('frame', ({ time }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.currentTime = time;
+                });
+                this._playbackEngine.on('state-change', (state) => {
+                    if (state === 'stopped') {
+                        const controls = this.renderRoot.querySelector('ox-playback-controls');
+                        if (controls)
+                            controls.playbackState = 'stopped';
+                    }
+                    this.requestUpdate();
+                });
+                this._playbackEngine.on('buffer-update', ({ bufferedRanges }) => {
+                    const controls = this.renderRoot.querySelector('ox-playback-controls');
+                    if (controls)
+                        controls.bufferedRanges = bufferedRanges;
+                });
+                if (this._fetchPlaybackData) {
+                    this._playbackEngine.setFetchFunction(this._fetchPlaybackData);
+                }
+            }
+            if (this._scene) {
+                this._playbackEngine.attachScene(this._scene);
+            }
+            this.dispatchEvent(new CustomEvent('playback-toggle', {
+                bubbles: true,
+                composed: true,
+                detail: { active: true }
+            }));
+            // playback 은 전체화면에서만 동작 — 이미 전체화면이면 그대로 유지
+            if (!document.fullscreenElement && !isIOS()) {
+                fullscreen(this, () => this.requestUpdate(), () => this.requestUpdate());
+            }
+        }
+    }
+    async _onPlaybackStart(e) {
+        var _a, _b, _c;
+        const { fromTime, toTime, speed } = e.detail;
+        if (!this._playbackEngine)
+            return;
+        // toTime is the user-selected window END (= controls' _appliedTo).
+        // The previous hardcoded `fromTime + 1h` ignored the controls'
+        // range selection, so 10m / 30m / Range modes silently played past
+        // the requested window. Falling back to `+1h` only if toTime was
+        // omitted (legacy callers).
+        const endTime = toTime instanceof Date ? toTime : new Date(fromTime.getTime() + 3600000);
+        // playbackMode 는 onTapPlayback (준비 단계) 에서 이미 set — idempotent
+        // 재설정으로 안전망 유지.
+        if ((_a = this._scene) === null || _a === void 0 ? void 0 : _a.rootContainer)
+            this._scene.rootContainer.playbackMode = true;
+        // 플레이백 윈도우 기록 + 영구추적 활성 시 carrier history 충전.
+        // 윈도우 변경 (재시작) 시에도 같은 경로 — store.load 가 key 비교로
+        // 동일 (carrierName, from, to) 이면 no-op.
+        this._playbackWindow = { from: fromTime, to: endTime };
+        const carrierName = (_c = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.tracker) === null || _c === void 0 ? void 0 : _c.trackingId;
+        if (carrierName) {
+            this._carrierTrackingStore.load(carrierName, fromTime, endTime);
+        }
+        this._startFallbackArrowMonitor();
+        try {
+            await this._playbackEngine.startChunked(fromTime, endTime, speed);
+        }
+        catch (ex) {
+            console.error('[Playback] load failed:', ex);
+        }
+    }
+    _onPlaybackPause() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    _onPlaybackResume() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.resume();
+    }
+    async _onPlaybackStop() {
+        var _a, _b, _c;
+        const scene = this._scene; // 비동기 구간 scene 교체 감지용 캡처
+        // 1) 즉시: 엔진 정지 + 애니메이션 억제 ON (in-flight 애니메이션 즉시 종료)
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.detachScene();
+        (_b = this._playbackEngine) === null || _b === void 0 ? void 0 : _b.stop();
+        this._playbackActive = false;
+        this._playbackWindow = undefined;
+        this._carrierTrackingStore.clear();
+        this._clearFallbackArrow();
+        this._stopFallbackArrowMonitor();
+        if (scene) {
+            scene.suppressAnimations = true;
+            if (scene.rootContainer)
+                scene.rootContainer.playbackMode = false;
+        }
+        // UI 신호 + fullscreen 해제
+        this.dispatchEvent(new CustomEvent('playback-toggle', {
+            bubbles: true,
+            composed: true,
+            detail: { active: false }
+        }));
+        if (document.fullscreenElement) {
+            exitfullscreen();
+        }
+        // 2) 1초 후: 보드 리셋 + live 구독 재개
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (this._playbackActive || this._scene !== scene)
+            return;
+        if (!scene)
+            return;
+        this._resetSceneData();
+        this._resubscribeSceneData();
+        (_c = this._dataSubscriptionProvider) === null || _c === void 0 ? void 0 : _c.resume();
+        // 3) 2초 후 (추가 1초): 억제 해제 — 첫 live batch 가 instant 배치된 뒤 정상 애니메이션 복원
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        if (this._scene === scene) {
+            scene.suppressAnimations = false;
+        }
+    }
+    /**
+     * 플레이백 시작 시: RESTful data-subscription 컴포넌트의 WebSocket 을 실제 disconnect.
+     * GraphQL 경로는 _dataSubscriptionProvider.pause() 에서 일괄 처리.
+     */
+    _unsubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — 자체 WebSocket disconnect
+            if (c.subscription) {
+                try {
+                    c.subscription.unsubscribe();
+                }
+                catch (_a) { }
+                c.subscription = null;
+            }
+            if (c.client) {
+                try {
+                    c.client.unsubscribeAll();
+                    c.client.close(true);
+                }
+                catch (_b) { }
+                c.client = null;
+            }
+        });
+    }
+    /**
+     * 플레이백 종료 시: RESTful data-subscription 컴포넌트의 WebSocket 을 재연결.
+     * GraphQL 경로는 _dataSubscriptionProvider.resume() 에서 일괄 처리.
+     */
+    _resubscribeSceneData() {
+        var _a;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // RESTful data-subscription 컴포넌트 — WebSocket 재연결
+            if (typeof c.requestData === 'function' && !c.client) {
+                c.requestData();
+            }
+        });
+    }
+    _resetSceneData() {
+        var _a, _b, _c, _d;
+        const root = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root;
+        if (!root || typeof root.traverse !== 'function')
+            return;
+        root.traverse((c) => {
+            if (!c || c === root)
+                return;
+            // null 대신 {} 로 리셋 — typeof null === 'object' 함정 회피 + destructuring 안전 +
+            // statusColor 등 data?.X 형태 getter 가 자연스럽게 default 로 폴백
+            try {
+                if ('data' in c)
+                    c.data = {};
+            }
+            catch (_a) { }
+            // 차량 등의 위치 캐시 초기화 — 없으면 이전 waypoint 경로로 스냅백되는 잔상 발생
+            if ('lastWaypoint' in c)
+                c.lastWaypoint = undefined;
+        });
+        // vehicle 의 waypoint 이동 애니메이션 전체 중단
+        // (Animation.stepAnimation 의 suppress 체크만으로는 WaypointHandler 의 animatorMap 이
+        //  완전히 비워지지 않을 수 있어 명시적 reset)
+        if ((_b = root.waypointHandler) === null || _b === void 0 ? void 0 : _b.reset)
+            root.waypointHandler.reset();
+        // 모든 decorator 제거 — bouncing-arrow/border-highlighting 같은 SVG 애니메이션 decorator 는
+        // decorator-registry 가 붙잡고 있어 data=null 만으로는 제거되지 않음. 명시적 reset 필요.
+        try {
+            root.trigger('deco-reset');
+        }
+        catch (_e) { }
+        if ((_c = root.carrierManager) === null || _c === void 0 ? void 0 : _c.dispose)
+            root.carrierManager.dispose();
+        if ((_d = root.transitionEffect) === null || _d === void 0 ? void 0 : _d.dispose)
+            root.transitionEffect.dispose();
+    }
+    _onPlaybackSeek(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekTo(e.detail.toTime);
+    }
+    /**
+     * 드래그 시작 신호 — 엔진의 재생 타이머 정지해서 스크러빙 동안
+     * scene 이 엔진 시간으로 독립 갱신되지 않도록 함. _state 는 유지되므로
+     * 드래그 종료 시 seekTo 가 원래 재생/일시정지 상태로 복원.
+     */
+    _onPlaybackSeekStart() {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.pauseForSeek();
+    }
+    /**
+     * 드래그 중 디바운스된 seek preview. 해당 시간의 snapshot 만 scene 에 적용.
+     * 보드 리셋 없음, 애니메이션 억제.
+     */
+    _onPlaybackSeekPreview(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.seekPreview(e.detail.toTime);
+    }
+    _onPlaybackSpeed(e) {
+        var _a;
+        (_a = this._playbackEngine) === null || _a === void 0 ? void 0 : _a.setSpeed(e.detail.speed);
+    }
     onRunBoard() {
         this.dispatchEvent(new CustomEvent('run-board', { bubbles: true, composed: true, detail: this.board.id }));
     }
@@ -578,6 +1187,10 @@ let BoardViewer = class BoardViewer extends LitElement {
             this.popup = popup;
         }
         if (this.popup) {
+            // playbackMode 를 component 보다 먼저 set — BoardComponentInfo 의 updated()
+            // 가 component 변경을 보는 시점에 playbackMode 가 반드시 최신값이어야
+            // detailInfo() 백엔드 호출 가드가 일관 동작.
+            this.popup.playbackMode = this._playbackActive;
             this.popup.component = component;
         }
     }
@@ -611,8 +1224,8 @@ BoardViewer.styles = [
         outline: 0;
       }
 
-      /* navigation buttons */
-      mwc-icon {
+      /* navigation buttons (standalone only, not inside md-fab) */
+      md-icon:not([slot]) {
         z-index: 10;
         position: absolute;
         top: 45%;
@@ -624,14 +1237,14 @@ BoardViewer.styles = [
         color: #fff;
         user-select: none;
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
       }
 
-      mwc-icon[hidden] {
+      md-icon[hidden] {
         display: none;
       }
 
-      mwc-icon:hover {
+      md-icon:not([slot]):hover {
         background-color: rgba(0, 0, 0, 0.2);
         border-radius: 50%;
       }
@@ -644,10 +1257,85 @@ BoardViewer.styles = [
         right: 5px;
       }
 
-      #fullscreen {
+      [fab-group] {
         position: absolute;
         bottom: 15px;
         right: 16px;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        gap: 12px;
+        z-index: 1000;
+      }
+
+      [fab-group] md-fab {
+        transition: transform 0.2s ease, opacity 0.2s ease;
+      }
+
+      [fab-group] md-fab.main-fab md-icon {
+        transition: transform 0.3s ease;
+      }
+
+      [fab-group] md-fab.main-fab[expanded] md-icon {
+        transform: rotate(45deg);
+      }
+
+      [fab-group] md-fab.sub-fab {
+        --md-fab-container-width: 48px;
+        --md-fab-container-height: 48px;
+        /* fab 표면 색 = image 의 자체 원형 배경 (#F9EBEA) 과 일치.
+         * 이렇게 하면 md-fab 의 내부 padding 영역도 같은 색이라
+         * 시각적으로 사라짐 — 세 버튼 모두 visible 48px 컨테이너 통일. */
+        --md-fab-container-color: #F9EBEA;
+        --md-fab-icon-color: #F87171;
+        --md-icon-size: 36px;
+        transform: scale(0);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* visible 영역은 컨테이너(48px) 그대로 — fullscreen 버튼과 동일.
+       * img 자체는 48px 박스이고 transform scale 로 내부 그래픽만 확대.
+       * wrap 의 overflow:hidden + border-radius:50% 가 fab 원형 밖으로
+       * 넘치는 영역을 잘라내어 외형 크기는 변하지 않음. */
+      [fab-group] md-fab.sub-fab .fab-icon-wrap {
+        width: 48px;
+        height: 48px;
+        display: block;
+        overflow: hidden;
+        border-radius: 50%;
+      }
+
+      [fab-group] md-fab.sub-fab .fab-icon-wrap img.fab-icon {
+        width: 48px;
+        height: 48px;
+        display: block;
+        transform: scale(1.15);
+        transform-origin: center;
+      }
+
+      /* legacy inline svg 경로 — 동일하게 box 48 유지 + scale 로 그래픽만 확대. */
+      [fab-group] md-fab.sub-fab svg[slot="icon"] {
+        width: 48px;
+        height: 48px;
+        display: block;
+        transform: scale(1.15);
+        transform-origin: center;
+      }
+
+      [fab-group][expanded] md-fab.sub-fab {
+        transform: scale(1);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      [fab-group] md-fab.sub-fab[disabled] {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+
+      ox-playback-controls {
+        transition: opacity 0.3s ease;
       }
 
       [hidden] {
@@ -666,18 +1354,22 @@ BoardViewer.styles = [
         z-index: 1000;
       }
 
-      mwc-fab {
+      md-fab {
         z-index: 1000;
+        --md-icon-size: 24px;
       }
 
       @media print {
-        mwc-fab,
-        mwc-icon {
+        md-fab,
+        md-icon {
           display: none;
         }
       }
     `
 ];
+/** SearchOverlay 의 query-submit 시 사용할 추적 색깔. things-scene 의 Scene.tracker
+ *  가 폴링/데코/3D outline 색 동기화 일괄 관리. */
+BoardViewer.TRACKING_COLOR = '#00aaff7f';
 __decorate([
     property({ type: String })
 ], BoardViewer.prototype, "baseUrl", void 0);
@@ -693,6 +1385,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], BoardViewer.prototype, "values", void 0);
+__decorate([
+    property({ type: Object })
+], BoardViewer.prototype, "loadTracker", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hide-fullscreen' })
 ], BoardViewer.prototype, "hideFullscreen", void 0);
@@ -701,19 +1396,10 @@ __decorate([
 ], BoardViewer.prototype, "hideNavigation", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_scene", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_forward", void 0);
+], BoardViewer.prototype, "_fabExpanded", void 0);
 __decorate([
     state()
-], BoardViewer.prototype, "_backward", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_oldtarget", void 0);
-__decorate([
-    state()
-], BoardViewer.prototype, "_fade_animations", void 0);
+], BoardViewer.prototype, "_playbackActive", void 0);
 __decorate([
     query('#target')
 ], BoardViewer.prototype, "_target", void 0);
@@ -724,9 +1410,12 @@ __decorate([
     query('#next')
 ], BoardViewer.prototype, "_next", void 0);
 __decorate([
-    query('#fullscreen')
-], BoardViewer.prototype, "_fullscreen", void 0);
-BoardViewer = __decorate([
+    query('[fab-group]')
+], BoardViewer.prototype, "_fabGroup", void 0);
+__decorate([
+    property({ attribute: false })
+], BoardViewer.prototype, "_fetchPlaybackData", void 0);
+BoardViewer = BoardViewer_1 = __decorate([
     customElement('ox-board-viewer')
 ], BoardViewer);
 export { BoardViewer };