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

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;
@@ -45,16 +52,16 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         };
         // 모니터링에서 Movement Data를 보여준다.
         this.fmbShowMovementHandler = (e) => {
-            var _a, _b;
+            var _a, _b, _c;
             // 플레이백 중에는 외부 모니터링이 보내는 실시간 반송 정보를 그리지 않는다 —
             // 사용자가 플레이백 시점의 *과거 상태* 를 보고 있는데 실시간 화살표가 겹치면
             // 혼란을 줌. (백엔드 상세 정보 요청은 ox-board-component-info.ts:225 에서
             // 같은 playbackMode 가드로 이미 차단됨.)
-            if ((_a = this._scene) === null || _a === void 0 ? void 0 : _a.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 = (_b = this._scene) === null || _b === void 0 ? void 0 : _b.findById(`movement-layer`);
+            const movementLayer = (_c = this._scene) === null || _c === void 0 ? void 0 : _c.findById(`movement-layer`);
             if (!movementLayer) {
                 return;
             }
@@ -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);
@@ -727,7 +829,7 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         }
     }
     onTapPlayback() {
-        var _a;
+        var _a, _b;
         if (this._playbackActive) {
             this._onPlaybackStop();
         }
@@ -740,6 +842,11 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
             // 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 }) => {
@@ -779,6 +886,7 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         }
     }
     async _onPlaybackStart(e) {
+        var _a, _b, _c;
         const { fromTime, toTime, speed } = e.detail;
         if (!this._playbackEngine)
             return;
@@ -788,8 +896,19 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
         // 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);
-        if (this._scene)
-            this._scene.playbackMode = true;
+        // 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);
         }
@@ -812,9 +931,14 @@ 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;
+            if (scene.rootContainer)
+                scene.rootContainer.playbackMode = false;
         }
         // UI 신호 + fullscreen 해제
         this.dispatchEvent(new CustomEvent('playback-toggle', {
@@ -1040,8 +1164,11 @@ let BoardViewer = BoardViewer_1 = class BoardViewer extends LitElement {
             this.popup = popup;
         }
         if (this.popup) {
-            this.popup.component = component;
+            // playbackMode 를 component 보다 먼저 set — BoardComponentInfo 의 updated()
+            // 가 component 변경을 보는 시점에 playbackMode 가 반드시 최신값이어야
+            // detailInfo() 백엔드 호출 가드가 일관 동작.
             this.popup.playbackMode = this._playbackActive;
+            this.popup.component = component;
         }
     }
     hidePopup() {
@@ -1131,19 +1258,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 {