@fmsim/board 2.0.0-beta.81 → 2.0.0-beta.82

package/dist/src/layers/mcs-mouse-event-handler.js

@@ -1,38 +1,48 @@
 import { EventMap } from '@hatiolab/things-scene';
 function dispatchFetchLvModelDataByMouseEvent(type, event, target) {
+    var _a, _b, _c;
     const parent = target.parentObject;
+    // 플레이백 모드에서는 외부 백엔드 fetch 트리거 (fetchLvModelDataByMouseEvent
+    // window 이벤트) 를 차단. 사용자가 보는 시점은 과거이므로 현재 시점 fetch 가
+    // 의미 정합성을 깸. realTarget 결정 (parent escalation) 은 그대로 — popup /
+    // highlight 등 클릭 후속 동작에는 영향 없음.
+    const playbackMode = !!((_c = (_b = (_a = target === null || target === void 0 ? void 0 : target.root) === null || _a === void 0 ? void 0 : _a.app) === null || _b === void 0 ? void 0 : _b.scene) === null || _c === void 0 ? void 0 : _c.playbackMode);
     if (target.getState('id')) {
-        window.dispatchEvent(new CustomEvent('fetchLvModelDataByMouseEvent', {
-            detail: {
-                value: {
-                    type,
-                    event,
-                    model: {
-                        ...target.state,
-                        parentObject: parent
-                            ? {
-                                id: parent.get('id'),
-                                type: parent.get('type')
-                            }
-                            : null
-                    },
-                    data: target.data
+        if (!playbackMode) {
+            window.dispatchEvent(new CustomEvent('fetchLvModelDataByMouseEvent', {
+                detail: {
+                    value: {
+                        type,
+                        event,
+                        model: {
+                            ...target.state,
+                            parentObject: parent
+                                ? {
+                                    id: parent.get('id'),
+                                    type: parent.get('type')
+                                }
+                                : null
+                        },
+                        data: target.data
+                    }
                 }
-            }
-        }));
+            }));
+        }
         return parent || target;
     }
     else if (parent && parent.getState('id')) {
-        window.dispatchEvent(new CustomEvent('fetchLvModelDataByMouseEvent', {
-            detail: {
-                value: {
-                    type,
-                    event,
-                    model: parent.state,
-                    data: parent.data
+        if (!playbackMode) {
+            window.dispatchEvent(new CustomEvent('fetchLvModelDataByMouseEvent', {
+                detail: {
+                    value: {
+                        type,
+                        event,
+                        model: parent.state,
+                        data: parent.data
+                    }
                 }
-            }
-        }));
+            }));
+        }
         return parent;
     }
 }

package/dist/src/layers/mcs-mouse-event-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcs-mouse-event-handler.js","sourceRoot":"","sources":["../../../src/layers/mcs-mouse-event-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAE5D,SAAS,oCAAoC,CAC3C,IAAoC,EACpC,KAAiB,EACjB,MAAgD;IAEhD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAA;IAElC,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1B,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE;wBACL,GAAG,MAAM,CAAC,KAAK;wBACf,YAAY,EAAE,MAAM;4BAClB,CAAC,CAAC;gCACE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;gCACpB,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;6BACzB;4BACH,CAAC,CAAC,IAAI;qBACT;oBACD,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,IAAI,MAAM,CAAA;IACzB,CAAC;SAAM,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,CAAA;IACf,CAAC;AACH,CAAC;AAED,wDAAwD;AACxD,+BAA+B;AAE/B,4BAA4B;AAE5B,iEAAiE;AACjE,IAAI;AAEJ,SAAS,OAAO,CAAC,KAAiB,EAAE,IAAS;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACvC,MAAM,UAAU,GAAG,oCAAoC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YAE/E,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE,UAAU,IAAI,MAAM;aAC7B,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,SAAS,UAAU,CAAC,KAAiB,EAAE,IAAS;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAA;IAEP,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,YAAY,GAAG,UAAU,CAAA;IAEhC,oCAAoC,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AACjE,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,EAAE;IACrC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,6CAA6C;YAC7C,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { Component, EventMap } from '@hatiolab/things-scene'\n\nfunction dispatchFetchLvModelDataByMouseEvent(\n  type: 'hover' | 'click' | 'dblclick',\n  event: MouseEvent,\n  target: Component & { parentObject?: Component }\n): Component | undefined {\n  const parent = target.parentObject\n\n  if (target.getState('id')) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: {\n              ...target.state,\n              parentObject: parent\n                ? {\n                    id: parent.get('id'),\n                    type: parent.get('type')\n                  }\n                : null\n            },\n            data: target.data\n          }\n        }\n      })\n    )\n\n    return parent || target\n  } else if (parent && parent.getState('id')) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: parent.state,\n            data: parent.data\n          }\n        }\n      })\n    )\n\n    return parent\n  }\n}\n\n// function onmouseenter(event: MouseEvent, hint: any) {\n//   const target = hint.origin\n\n//   event.stopPropagation()\n\n//   dispatchFetchLvModelDataByMouseEvent('hover', event, target)\n// }\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      const realTarget = dispatchFetchLvModelDataByMouseEvent('click', event, target)\n\n      window.dispatchEvent(\n        new CustomEvent('clickComponent', {\n          detail: realTarget || target\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n\n  dispatchFetchLvModelDataByMouseEvent('dblclick', event, target)\n}\n\nEventMap.register('mcs-event-handler', {\n  'model-layer': {\n    '(all)': {\n      // mouseenter: onmouseenter, /* 사용되지 않고 있음 */\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}
+{"version":3,"file":"mcs-mouse-event-handler.js","sourceRoot":"","sources":["../../../src/layers/mcs-mouse-event-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventMap } from '@hatiolab/things-scene'\n\nfunction dispatchFetchLvModelDataByMouseEvent(\n  type: 'hover' | 'click' | 'dblclick',\n  event: MouseEvent,\n  target: Component & { parentObject?: Component }\n): Component | undefined {\n  const parent = target.parentObject\n\n  // 플레이백 모드에서는 외부 백엔드 fetch 트리거 (fetchLvModelDataByMouseEvent\n  // window 이벤트) 를 차단. 사용자가 보는 시점은 과거이므로 현재 시점 fetch 가\n  // 의미 정합성을 깸. realTarget 결정 (parent escalation) 은 그대로 — popup /\n  // highlight 등 클릭 후속 동작에는 영향 없음.\n  const playbackMode = !!(target as any)?.root?.app?.scene?.playbackMode\n\n  if (target.getState('id')) {\n    if (!playbackMode) {\n      window.dispatchEvent(\n        new CustomEvent('fetchLvModelDataByMouseEvent', {\n          detail: {\n            value: {\n              type,\n              event,\n              model: {\n                ...target.state,\n                parentObject: parent\n                  ? {\n                      id: parent.get('id'),\n                      type: parent.get('type')\n                    }\n                  : null\n              },\n              data: target.data\n            }\n          }\n        })\n      )\n    }\n\n    return parent || target\n  } else if (parent && parent.getState('id')) {\n    if (!playbackMode) {\n      window.dispatchEvent(\n        new CustomEvent('fetchLvModelDataByMouseEvent', {\n          detail: {\n            value: {\n              type,\n              event,\n              model: parent.state,\n              data: parent.data\n            }\n          }\n        })\n      )\n    }\n\n    return parent\n  }\n}\n\n// function onmouseenter(event: MouseEvent, hint: any) {\n//   const target = hint.origin\n\n//   event.stopPropagation()\n\n//   dispatchFetchLvModelDataByMouseEvent('hover', event, target)\n// }\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      const realTarget = dispatchFetchLvModelDataByMouseEvent('click', event, target)\n\n      window.dispatchEvent(\n        new CustomEvent('clickComponent', {\n          detail: realTarget || target\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n\n  dispatchFetchLvModelDataByMouseEvent('dblclick', event, target)\n}\n\nEventMap.register('mcs-event-handler', {\n  'model-layer': {\n    '(all)': {\n      // mouseenter: onmouseenter, /* 사용되지 않고 있음 */\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}

package/dist/src/ox-board-viewer.d.ts

@@ -75,6 +75,37 @@ export declare class BoardViewer extends LitElement {
     showScene(boardId: string, bindingData?: any): Promise<void>;
     private resizeHandler;
     bindSceneEvents(): void;
+    /**
+     * Tracker fallback resolver — 플레이백 시각의 carrier 위치를 컴포넌트로 변환.
+     * NA / 정보 없음 / 머신 미존재 → null (Tracker 가 highlight 없이 추적만 유지).
+     *
+     * 매 1초 polling 마다 호출되며, 결과 target 이 직전과 동일하면 로그 skip.
+     */
+    private _resolveCarrierFallback;
+    /**
+     * deco-arrow 라이프사이클 — 이전 target 끄고 새 target 에 bouncing arrow 부착.
+     * 둘 다 null 가능 (해제만, 부착만).
+     */
+    private _setFallbackArrow;
+    /**
+     * 1초 polling — 화살표 부착 대상을 결정.
+     *   1) 플레이백 종료 / 추적 ID 없음 → 화살표 해제
+     *   2) carrier 가 scene 에 직접 존재 → **carrier 자체에 화살표 부착**
+     *      (things-scene Tracker 가 carrier 발견 시 fallback 콜백 호출을 멈춰
+     *       resolver 경로로는 우리가 모름. monitor 에서 직접 책임)
+     *   3) carrier 없음 + resolver 가 3초 이상 호출 안 됨 → 화살표 해제
+     *      (그 외엔 resolver 의 logIfChanged 가 fallback target 으로 부착 중)
+     */
+    private _startFallbackArrowMonitor;
+    private _stopFallbackArrowMonitor;
+    /** 부착된 deco-arrow 강제 해제 + dedupe 상태 초기화. */
+    private _clearFallbackArrow;
+    /**
+     * onSearchSubmit hook — 영구추적 carrierName 이 설정되는 순간.
+     * 플레이백 윈도우가 잡혀 있으면 즉시 store 충전. 윈도우가 없으면
+     * 플레이백 시작 시 (_onPlaybackStart) 에 충전.
+     */
+    private _onCarrierTrackingSubmit;
     unbindSceneEvents(scene: any): void;
     transientShowButtons(stop?: boolean): void;
     onTapNext(): void;
@@ -83,6 +114,23 @@ export declare class BoardViewer extends LitElement {
     onTapToggle3D(): void;
     private _dataSubscriptionProvider;
     private _playbackEngine?;
+    /**
+     * 영구추적 fallback 데이터 캐시 — 플레이백 윈도우 × carrierName 단위로
+     * carrier 위치 이력을 보관. carrier 가 scene 에 직접 안 보일 때
+     * Tracker fallback 콜백이 lookupAt 으로 머신/유닛을 찾아 반환.
+     */
+    private _carrierTrackingStore;
+    /** 마지막으로 시작한 플레이백 윈도우 (carrier store load 트리거용). */
+    private _playbackWindow?;
+    /**
+     * fallback 결과(target 컴포넌트) dedupe — 직전과 동일한 target 일 땐 로그 skip
+     * + deco-arrow 라이프사이클 (target 변경 시 이전 끄고 새로 부착).
+     */
+    private _lastFallbackTarget;
+    /** _resolveCarrierFallback 마지막 호출 timestamp — carrier 발견 감지용. */
+    private _lastFallbackResolvedAt;
+    /** carrier 발견 감지 / deco-arrow 자동 해제용 1초 polling 타이머. */
+    private _fallbackArrowMonitor?;
     onTapPlayback(): void;
     private _onPlaybackStart;
     private _onPlaybackPause;

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

@@ -9,11 +9,18 @@ import './ox-playback-controls.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 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';
+// 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;
@@ -198,6 +205,19 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         };
         // ── 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;
@@ -231,139 +251,21 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
                 class="sub-fab"
                 @click=${() => { this._fabExpanded = false; this.onTapPlayback(); }}
                 title=${this._playbackActive ? 'stop playback' : 'start playback'}
-              >${this._playbackActive
-                ? html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
-                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
-                      <g transform="translate(-5, 0)">
-                        <path
-                          d="M 52,22 A 28,28 0 1,1 30,40"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 52,12 L 37,24 L 55,33 Z" fill="#F87171" />
-                      </g>
-                      <rect
-                        x="36"
-                        y="36"
-                        width="28"
-                        height="28"
-                        rx="3"
-                        fill="#F87171"
-                        stroke="#F87171"
-                        stroke-width="3"
-                        stroke-linejoin="round"
-                      />
-                      <text
-                        x="50"
-                        y="53.5"
-                        font-family="Verdana, sans-serif"
-                        font-size="9"
-                        font-weight="900"
-                        fill="#ffffff"
-                        text-anchor="middle"
-                      >OFF</text>
-                    </svg>`
-                : html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
-                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
-                      <g transform="translate(-5, 0)">
-                        <path
-                          d="M 52,22 A 28,28 0 1,1 30,40"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 52,12 L 37,24 L 55,33 Z" fill="#F87171" />
-                      </g>
-                      <path
-                        d="M 42,35 L 65,50 L 42,65 Z"
-                        fill="#F87171"
-                        stroke="#F87171"
-                        stroke-width="3"
-                        stroke-linejoin="round"
-                      />
-                      <text
-                        x="49.5"
-                        y="53"
-                        font-family="Verdana, sans-serif"
-                        font-size="9"
-                        font-weight="900"
-                        fill="#ffffff"
-                        text-anchor="middle"
-                      >RE:</text>
-                    </svg>`}</md-fab>
+              ><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'}
-              >${this._is3dMode
-                ? html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
-                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
-                      <g transform="rotate(55, 50, 50)">
-                        <path
-                          d="M 72,32 A 30,30 0 0,0 38,28"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
-                      </g>
-                      <g transform="rotate(235, 50, 50)">
-                        <path
-                          d="M 72,32 A 30,30 0 0,0 38,28"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
-                      </g>
-                      <text
-                        x="50"
-                        y="57.5"
-                        font-family="Verdana, sans-serif"
-                        font-size="20"
-                        font-weight="900"
-                        fill="#F87171"
-                        text-anchor="middle"
-                      >2D</text>
-                    </svg>`
-                : html `<svg slot="icon" width="48" height="48" viewBox="0 0 100 100" style="display: block;">
-                      <circle cx="50" cy="50" r="50" fill="#F9EBEA" />
-                      <g transform="rotate(55, 50, 50)">
-                        <path
-                          d="M 72,32 A 30,30 0 0,0 38,28"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
-                      </g>
-                      <g transform="rotate(235, 50, 50)">
-                        <path
-                          d="M 72,32 A 30,30 0 0,0 38,28"
-                          fill="none"
-                          stroke="#F87171"
-                          stroke-width="5"
-                          stroke-linecap="round"
-                        />
-                        <path d="M 38,20 L 22,30 L 38,40 Z" fill="#F87171" />
-                      </g>
-                      <text
-                        x="50"
-                        y="57.5"
-                        font-family="Verdana, sans-serif"
-                        font-size="20"
-                        font-weight="900"
-                        fill="#F87171"
-                        text-anchor="middle"
-                      >3D</text>
-                    </svg>`}</md-fab>
+              ><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
@@ -472,6 +374,10 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
             (_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;
@@ -635,7 +541,203 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         // VIEW 모드 SearchOverlay 디폴트 = 영구 추적 (things-scene 자동 처리).
         // application 은 trackerOptions (color/fallback 등) 또는 onSearchSubmit/onSearchClose
         // hook (디폴트 override) 만 제공.
-        this._scene.trackerOptions = { color: BoardViewer_1.TRACKING_COLOR };
+        //
+        // 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);
@@ -779,6 +881,7 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         }
     }
     async _onPlaybackStart(e) {
+        var _a, _b;
         const { fromTime, toTime, speed } = e.detail;
         if (!this._playbackEngine)
             return;
@@ -790,6 +893,15 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         const endTime = toTime instanceof Date ? toTime : new Date(fromTime.getTime() + 3600000);
         if (this._scene)
             this._scene.playbackMode = true;
+        // 플레이백 윈도우 기록 + 영구추적 활성 시 carrier history 충전.
+        // 윈도우 변경 (재시작) 시에도 같은 경로 — store.load 가 key 비교로
+        // 동일 (carrierName, from, to) 이면 no-op.
+        this._playbackWindow = { from: fromTime, to: endTime };
+        const carrierName = (_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.tracker) === null || _b === void 0 ? void 0 : _b.trackingId;
+        if (carrierName) {
+            this._carrierTrackingStore.load(carrierName, fromTime, endTime);
+        }
+        this._startFallbackArrowMonitor();
         try {
             await this._playbackEngine.startChunked(fromTime, endTime, speed);
         }
@@ -812,6 +924,10 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         (_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;
             scene.playbackMode = false;
@@ -1131,19 +1247,46 @@ BoardViewer.styles = [
       }
 
       [fab-group] md-fab.sub-fab {
-        --md-fab-container-width: 40px;
-        --md-fab-container-height: 40px;
-        --md-icon-size: 20px;
+        --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;
       }
 
-      /* SVG icon 은 fab 전체 크기로 — 자체 원이 fab 표면을 대체. */
+      /* 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: 40px;
-        height: 40px;
+        width: 48px;
+        height: 48px;
         display: block;
+        transform: scale(1.15);
+        transform-origin: center;
       }
 
       [fab-group][expanded] md-fab.sub-fab {