@fmsim/board 2.0.0-beta.10 → 2.0.0-beta.102

package/dist/src/scene-monitor-renderer.js

@@ -0,0 +1,226 @@
+/*
+ * SceneMonitorRenderer — fmsim 커스텀 로딩 오버레이 표현.
+ *
+ * things-scene 의 LoadingOverlay 렌더러 시임(LoadingOverlayRenderer)을 구현해,
+ * 로딩 단계(phaseHistory)를 Network / CPU 카테고리로 묶어 소요시간을 보여준다.
+ * 코어(수명주기·데이터·M키·자동표시·타이머)는 things-scene 이 그대로 담당하고,
+ * 이 클래스는 표현(DOM)만 담당한다 — 코어를 fork 하지 않는다.
+ *
+ *   this._loadingOverlay.renderer = new SceneMonitorRenderer()
+ */
+/** 로딩 phase → 표시 라벨. */
+const PHASE_LABEL = {
+    fetch: 'Fetching model',
+    assets: 'Loading assets',
+    data: 'Waiting for data',
+    parse: 'Parsing model',
+    compile: 'Building components',
+    render: 'Rendering',
+    init: 'Initializing'
+};
+/* 인라인 SVG 아이콘 — stroke=currentColor 라 감싸는 span 색(카테고리색)으로 틴팅된다. */
+const ICON_NETWORK = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
+    + '<circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/>'
+    + '<path d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9z"/></svg>';
+/** CPU = microchip(칩) — 둥근 사각 + 내부 사각 + 8핀(원본 이미지 형태). */
+const ICON_CPU = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
+    + '<rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/>'
+    + '<line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/>'
+    + '<line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/>'
+    + '<line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/>'
+    + '<line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>';
+/** 카테고리 정의(표시 순서). Network=파랑, CPU=주황(아이콘도 카테고리색으로 틴팅). */
+const CATEGORIES = [
+    { key: 'network', label: 'Network', icon: ICON_NETWORK, color: '#4a9eff', phases: ['fetch', 'assets', 'data'] },
+    { key: 'cpu', label: 'CPU', icon: ICON_CPU, color: '#ff9f40', phases: ['parse', 'compile', 'render', 'init'] }
+];
+function fmt(ms) {
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+const DIR_META = {
+    leading: { word: 'LEAD', arrow: '◂', color: '#3ddc84' },
+    lagging: { word: 'LAG', arrow: '▸', color: '#ff5a5a' },
+    ontrack: { word: 'SYNC', arrow: '≈', color: '#aab0b6' }
+};
+const LAG_LEVEL_COLORS = { warn: '#ff4040', critical: '#ff1f1f' };
+const MIN_LAG_RADIUS_MS = 1000;
+function fmtLag(ms) {
+    const a = Math.abs(ms);
+    return a < 1000 ? `${Math.round(a)}ms` : `${(a / 1000).toFixed(1)}s`;
+}
+/** 정확값(ms, 천단위 구분) — 반올림 손실 없이 그대로. */
+function fmtMs(ms) {
+    return `${Math.round(ms).toLocaleString()}ms`;
+}
+/** 부호 있는 정확한 차이(drift) — +뒤처짐 / −앞섬 / ±동일. 부호는 반올림 ms 기준. */
+function fmtDrift(ms) {
+    const r = Math.round(ms);
+    const sign = r > 0 ? '+' : r < 0 ? '−' : '±';
+    return `${sign}${Math.abs(r).toLocaleString()}ms`;
+}
+/** drift 부호(반올림 ms)로 삼분 — LAG(>0)/LEAD(<0)/SYNC(=0). deadzone 없음. */
+function lagDirection(s) {
+    const d = Math.round(s.drift);
+    return d > 0 ? 'lagging' : d < 0 ? 'leading' : 'ontrack';
+}
+/** 방향색 — lagging 은 level(warn/critical)로 더 진한 적색, leading 녹색, ontrack 회색. */
+function dirColor(direction, level) {
+    if (direction === 'lagging')
+        return LAG_LEVEL_COLORS[level] || DIR_META.lagging.color;
+    return DIR_META[direction].color;
+}
+function lagGauge(s) {
+    const { current, baseline, min, max } = s;
+    const clamp = (x, lo, hi) => (x < lo ? lo : x > hi ? hi : x);
+    const R = Math.max(baseline - min, max - baseline, MIN_LAG_RADIUS_MS);
+    const pos = (v) => 50 + 50 * clamp((v - baseline) / R, -1, 1);
+    return { curPct: pos(current), minPct: pos(min), maxPct: pos(max) };
+}
+function lagFill(pct) {
+    return pct >= 50
+        ? `left:50%;width:${(pct - 50).toFixed(2)}%`
+        : `left:${pct.toFixed(2)}%;width:${(50 - pct).toFixed(2)}%`;
+}
+/** 방향 배지(pill) — 색·단어·화살표 + 정확한 차이(부호 있는 drift)로 Lag/Lead 를 즉시 구분. */
+function dirPill(direction, drift, color) {
+    const m = DIR_META[direction];
+    const diff = fmtDrift(drift);
+    const label = direction === 'lagging' ? `${m.word} ${diff} ${m.arrow}` : `${m.arrow} ${m.word} ${diff}`;
+    return `<span style="display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;`
+        + `background:${color}22;color:${color};border:1px solid ${color}66;`
+        + `font-size:11px;font-weight:700;letter-spacing:0.3px;white-space:nowrap">${label}</span>`;
+}
+/** Data Lag 섹션 HTML — baseline 중심 게이지 + 방향 배지 + min/max 눈금 + cur 점. */
+function lagSectionHtml(s) {
+    const direction = lagDirection(s);
+    const { curPct, minPct, maxPct } = lagGauge(s);
+    const color = dirColor(direction, s.level);
+    const tick = (p) => `<div style="position:absolute;left:${p}%;top:-1px;width:1px;height:8px;background:rgba(255,255,255,0.28);transform:translateX(-50%)"></div>`;
+    return `<div style="display:flex;align-items:center;gap:8px;padding:7px 0 4px;border-top:1px solid rgba(255,255,255,0.07);margin-top:5px">`
+        + `<span style="color:rgba(232,234,237,0.6);font-size:12px;flex:1">Data Lag</span>`
+        + `<span style="color:rgba(232,234,237,0.5);font-size:11px">cur ${fmtMs(s.current)}</span>`
+        + dirPill(direction, s.drift, color)
+        + `</div>`
+        + `<div style="position:relative;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;margin:3px 0 3px">`
+        + `<div style="position:absolute;left:50%;top:-3px;width:1px;height:12px;background:rgba(255,255,255,0.45);transform:translateX(-50%)"></div>`
+        + tick(minPct) + tick(maxPct)
+        + `<div style="position:absolute;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;background:${color};opacity:0.55;${lagFill(curPct)}"></div>`
+        + `<div style="position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:${color};box-shadow:0 0 0 2px rgba(0,0,0,0.35);transform:translate(-50%,-50%);left:${curPct}%"></div>`
+        + `</div>`
+        + `<div style="display:flex;align-items:center;font-size:10px;color:rgba(232,234,237,0.4)">`
+        + `<span style="flex:1">◂ ahead · min ${fmtLag(s.min)}</span>`
+        + `<span style="flex:1;text-align:center;color:rgba(232,234,237,0.3)">base ${fmtLag(s.baseline)} · n ${s.sampleCount}</span>`
+        + `<span style="flex:1;text-align:right">max ${fmtLag(s.max)} · behind ▸</span>`
+        + `</div>`;
+}
+export class SceneMonitorRenderer {
+    build(container, host) {
+        const card = document.createElement('div');
+        card.style.cssText = [
+            'position:absolute',
+            'top:50%',
+            'left:50%',
+            'transform:translate(-50%,-50%)',
+            'display:flex',
+            'flex-direction:column',
+            'gap:6px',
+            'min-width:340px',
+            'max-width:460px',
+            'padding:14px 18px',
+            'background:#16191d',
+            'border:1px solid rgba(255,255,255,0.08)',
+            'border-radius:10px',
+            'box-shadow:0 8px 28px rgba(0,0,0,0.45)',
+            'pointer-events:auto',
+            'user-select:none',
+            'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+            'color:#e8eaed'
+        ].join(';');
+        // 헤더: "Scene Monitor" + X
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.07)';
+        const title = document.createElement('span');
+        title.style.cssText = 'font-weight:700;font-size:15px;color:#f1f3f5';
+        title.textContent = 'Scene Monitor';
+        this._titleEl = title;
+        header.appendChild(title);
+        const close = document.createElement('button');
+        close.textContent = '✕';
+        close.title = 'Close';
+        close.style.cssText = 'background:none;border:none;color:rgba(255,255,255,0.55);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:4px';
+        close.addEventListener('mouseenter', () => { close.style.color = 'rgba(255,255,255,0.95)'; });
+        close.addEventListener('mouseleave', () => { close.style.color = 'rgba(255,255,255,0.55)'; });
+        close.addEventListener('click', () => host.hide());
+        header.appendChild(close);
+        card.appendChild(header);
+        // 본문: 카테고리별 그룹(매 tick 재구성 — 소량이라 저렴)
+        const body = document.createElement('div');
+        body.style.cssText = 'display:flex;flex-direction:column;gap:2px;padding-top:4px';
+        this._bodyEl = body;
+        card.appendChild(body);
+        // 하부 Data Lag 섹션 — state.lag 있을 때만 채워짐(없으면 숨김).
+        const lag = document.createElement('div');
+        lag.style.display = 'none';
+        this._lagEl = lag;
+        card.appendChild(lag);
+        container.appendChild(card);
+        this._card = card;
+    }
+    update(state) {
+        var _a, _b;
+        if (this._titleEl) {
+            this._titleEl.textContent = state.isComplete ? 'Scene Monitor' : 'Scene Monitor';
+        }
+        if (!this._bodyEl)
+            return;
+        // phase → duration(ms). 완료 phase 는 duration, 진행 중은 경과.
+        const now = performance.now();
+        const durByPhase = new Map();
+        for (const r of state.phaseHistory) {
+            if (r.phase === 'complete')
+                continue;
+            const d = r.duration !== undefined ? r.duration : Math.max(0, now - r.timestamp);
+            durByPhase.set(r.phase, ((_a = durByPhase.get(r.phase)) !== null && _a !== void 0 ? _a : 0) + d);
+        }
+        let html = '';
+        for (const cat of CATEGORIES) {
+            const present = cat.phases.filter(p => durByPhase.has(p));
+            if (present.length === 0)
+                continue;
+            const total = present.reduce((s, p) => { var _a; return s + ((_a = durByPhase.get(p)) !== null && _a !== void 0 ? _a : 0); }, 0);
+            // 카테고리 헤더
+            html += `<div style="display:flex;align-items:center;gap:6px;padding:5px 0 2px">`
+                + `<span style="display:inline-flex;align-items:center;color:${cat.color}">${cat.icon}</span>`
+                + `<span style="flex:1;font-weight:600;font-size:13px;color:${cat.color}">${cat.label}</span>`
+                + `<span style="font-weight:700;font-size:13px;color:${cat.color}">${fmt(total)}</span>`
+                + `</div>`;
+            // 하위 단계
+            for (const p of present) {
+                const label = PHASE_LABEL[p] || p;
+                html += `<div style="display:flex;align-items:center;padding:1px 0 1px 22px">`
+                    + `<span style="flex:1;font-size:12.5px;color:rgba(232,234,237,0.82)">${label}</span>`
+                    + `<span style="font-size:12.5px;color:rgba(232,234,237,0.55)">${fmt((_b = durByPhase.get(p)) !== null && _b !== void 0 ? _b : 0)}</span>`
+                    + `</div>`;
+            }
+        }
+        this._bodyEl.innerHTML = html;
+        // 하부 Data Lag — 표본 있으면 표시, 없으면 숨김.
+        if (this._lagEl) {
+            if (state.lag) {
+                this._lagEl.style.display = '';
+                this._lagEl.innerHTML = lagSectionHtml(state.lag);
+            }
+            else {
+                this._lagEl.style.display = 'none';
+                this._lagEl.innerHTML = '';
+            }
+        }
+    }
+    destroy() {
+        this._card = undefined;
+        this._titleEl = undefined;
+        this._bodyEl = undefined;
+        this._lagEl = undefined;
+    }
+}
+//# sourceMappingURL=scene-monitor-renderer.js.map

package/dist/src/scene-monitor-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene-monitor-renderer.js","sourceRoot":"","sources":["../../src/scene-monitor-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SceneMonitorRenderer — fmsim 커스텀 로딩 오버레이 표현.\n *\n * things-scene 의 LoadingOverlay 렌더러 시임(LoadingOverlayRenderer)을 구현해,\n * 로딩 단계(phaseHistory)를 Network / CPU 카테고리로 묶어 소요시간을 보여준다.\n * 코어(수명주기·데이터·M키·자동표시·타이머)는 things-scene 이 그대로 담당하고,\n * 이 클래스는 표현(DOM)만 담당한다 — 코어를 fork 하지 않는다.\n *\n *   this._loadingOverlay.renderer = new SceneMonitorRenderer()\n */\n\nimport type { LoadingOverlayRenderer, LoadingOverlayState, LoadingOverlayHost, LagStats } from '@hatiolab/things-scene'\n\n/** 로딩 phase → 표시 라벨. */\nconst PHASE_LABEL: Record<string, string> = {\n  fetch: 'Fetching model',\n  assets: 'Loading assets',\n  data: 'Waiting for data',\n  parse: 'Parsing model',\n  compile: 'Building components',\n  render: 'Rendering',\n  init: 'Initializing'\n}\n\ninterface Category {\n  key: string\n  label: string\n  icon: string\n  color: string\n  phases: string[]\n}\n\n/* 인라인 SVG 아이콘 — stroke=currentColor 라 감싸는 span 색(카테고리색)으로 틴팅된다. */\nconst ICON_NETWORK =\n  '<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">'\n  + '<circle cx=\"12\" cy=\"12\" r=\"9\"/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/>'\n  + '<path d=\"M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9z\"/></svg>'\n/** CPU = microchip(칩) — 둥근 사각 + 내부 사각 + 8핀(원본 이미지 형태). */\nconst ICON_CPU =\n  '<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">'\n  + '<rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" ry=\"2\"/><rect x=\"9\" y=\"9\" width=\"6\" height=\"6\"/>'\n  + '<line x1=\"9\" y1=\"1\" x2=\"9\" y2=\"4\"/><line x1=\"15\" y1=\"1\" x2=\"15\" y2=\"4\"/>'\n  + '<line x1=\"9\" y1=\"20\" x2=\"9\" y2=\"23\"/><line x1=\"15\" y1=\"20\" x2=\"15\" y2=\"23\"/>'\n  + '<line x1=\"20\" y1=\"9\" x2=\"23\" y2=\"9\"/><line x1=\"20\" y1=\"14\" x2=\"23\" y2=\"14\"/>'\n  + '<line x1=\"1\" y1=\"9\" x2=\"4\" y2=\"9\"/><line x1=\"1\" y1=\"14\" x2=\"4\" y2=\"14\"/></svg>'\n\n/** 카테고리 정의(표시 순서). Network=파랑, CPU=주황(아이콘도 카테고리색으로 틴팅). */\nconst CATEGORIES: Category[] = [\n  { key: 'network', label: 'Network', icon: ICON_NETWORK, color: '#4a9eff', phases: ['fetch', 'assets', 'data'] },\n  { key: 'cpu', label: 'CPU', icon: ICON_CPU, color: '#ff9f40', phases: ['parse', 'compile', 'render', 'init'] }\n]\n\nfunction fmt(ms: number): string {\n  return `${(ms / 1000).toFixed(1)}s`\n}\n\n// ── Data Lag 게이지(하부 — state.lag 있을 때만 표시) ──\n// baseline(초기 평균) 대비 현재 지연을 상태 + 부호 있는 정확한 차이로 표시한다:\n//   LAG  = 기준보다 지연(drift>0, 뒤처짐)   → 적색(▸, level 로 진해짐)\n//   LEAD = 기준보다 신선(drift<0, 따라잡음) → 녹색(◂)\n//   SYNC = 기준과 동일(drift≈0, ±0ms)       → 중립 회색(≈)  ※ deadzone 없음, 반올림 0ms 일 때만\n// 배지 예: \"LAG +1,234ms ▸\". knob·채움·배지가 방향색을 공유.\ntype LagDirection = 'leading' | 'lagging' | 'ontrack'\nconst DIR_META: Record<LagDirection, { word: string; arrow: string; color: string }> = {\n  leading: { word: 'LEAD', arrow: '◂', color: '#3ddc84' },\n  lagging: { word: 'LAG', arrow: '▸', color: '#ff5a5a' },\n  ontrack: { word: 'SYNC', arrow: '≈', color: '#aab0b6' }\n}\nconst LAG_LEVEL_COLORS: Record<string, string> = { warn: '#ff4040', critical: '#ff1f1f' }\nconst MIN_LAG_RADIUS_MS = 1000\n\nfunction fmtLag(ms: number): string {\n  const a = Math.abs(ms)\n  return a < 1000 ? `${Math.round(a)}ms` : `${(a / 1000).toFixed(1)}s`\n}\n\n/** 정확값(ms, 천단위 구분) — 반올림 손실 없이 그대로. */\nfunction fmtMs(ms: number): string {\n  return `${Math.round(ms).toLocaleString()}ms`\n}\n\n/** 부호 있는 정확한 차이(drift) — +뒤처짐 / −앞섬 / ±동일. 부호는 반올림 ms 기준. */\nfunction fmtDrift(ms: number): string {\n  const r = Math.round(ms)\n  const sign = r > 0 ? '+' : r < 0 ? '−' : '±'\n  return `${sign}${Math.abs(r).toLocaleString()}ms`\n}\n\n/** drift 부호(반올림 ms)로 삼분 — LAG(>0)/LEAD(<0)/SYNC(=0). deadzone 없음. */\nfunction lagDirection(s: LagStats): LagDirection {\n  const d = Math.round(s.drift)\n  return d > 0 ? 'lagging' : d < 0 ? 'leading' : 'ontrack'\n}\n\n/** 방향색 — lagging 은 level(warn/critical)로 더 진한 적색, leading 녹색, ontrack 회색. */\nfunction dirColor(direction: LagDirection, level: string): string {\n  if (direction === 'lagging') return LAG_LEVEL_COLORS[level] || DIR_META.lagging.color\n  return DIR_META[direction].color\n}\n\nfunction lagGauge(s: LagStats): { curPct: number; minPct: number; maxPct: number } {\n  const { current, baseline, min, max } = s\n  const clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi : x)\n  const R = Math.max(baseline - min, max - baseline, MIN_LAG_RADIUS_MS)\n  const pos = (v: number) => 50 + 50 * clamp((v - baseline) / R, -1, 1)\n  return { curPct: pos(current), minPct: pos(min), maxPct: pos(max) }\n}\n\nfunction lagFill(pct: number): string {\n  return pct >= 50\n    ? `left:50%;width:${(pct - 50).toFixed(2)}%`\n    : `left:${pct.toFixed(2)}%;width:${(50 - pct).toFixed(2)}%`\n}\n\n/** 방향 배지(pill) — 색·단어·화살표 + 정확한 차이(부호 있는 drift)로 Lag/Lead 를 즉시 구분. */\nfunction dirPill(direction: LagDirection, drift: number, color: string): string {\n  const m = DIR_META[direction]\n  const diff = fmtDrift(drift)\n  const label = direction === 'lagging' ? `${m.word} ${diff} ${m.arrow}` : `${m.arrow} ${m.word} ${diff}`\n  return `<span style=\"display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;`\n    + `background:${color}22;color:${color};border:1px solid ${color}66;`\n    + `font-size:11px;font-weight:700;letter-spacing:0.3px;white-space:nowrap\">${label}</span>`\n}\n\n/** Data Lag 섹션 HTML — baseline 중심 게이지 + 방향 배지 + min/max 눈금 + cur 점. */\nfunction lagSectionHtml(s: LagStats): string {\n  const direction = lagDirection(s)\n  const { curPct, minPct, maxPct } = lagGauge(s)\n  const color = dirColor(direction, s.level)\n  const tick = (p: number) =>\n    `<div style=\"position:absolute;left:${p}%;top:-1px;width:1px;height:8px;background:rgba(255,255,255,0.28);transform:translateX(-50%)\"></div>`\n  return `<div style=\"display:flex;align-items:center;gap:8px;padding:7px 0 4px;border-top:1px solid rgba(255,255,255,0.07);margin-top:5px\">`\n      + `<span style=\"color:rgba(232,234,237,0.6);font-size:12px;flex:1\">Data Lag</span>`\n      + `<span style=\"color:rgba(232,234,237,0.5);font-size:11px\">cur ${fmtMs(s.current)}</span>`\n      + dirPill(direction, s.drift, color)\n      + `</div>`\n    + `<div style=\"position:relative;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;margin:3px 0 3px\">`\n      + `<div style=\"position:absolute;left:50%;top:-3px;width:1px;height:12px;background:rgba(255,255,255,0.45);transform:translateX(-50%)\"></div>`\n      + tick(minPct) + tick(maxPct)\n      + `<div style=\"position:absolute;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;background:${color};opacity:0.55;${lagFill(curPct)}\"></div>`\n      + `<div style=\"position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:${color};box-shadow:0 0 0 2px rgba(0,0,0,0.35);transform:translate(-50%,-50%);left:${curPct}%\"></div>`\n      + `</div>`\n    + `<div style=\"display:flex;align-items:center;font-size:10px;color:rgba(232,234,237,0.4)\">`\n      + `<span style=\"flex:1\">◂ ahead · min ${fmtLag(s.min)}</span>`\n      + `<span style=\"flex:1;text-align:center;color:rgba(232,234,237,0.3)\">base ${fmtLag(s.baseline)} · n ${s.sampleCount}</span>`\n      + `<span style=\"flex:1;text-align:right\">max ${fmtLag(s.max)} · behind ▸</span>`\n      + `</div>`\n}\n\nexport class SceneMonitorRenderer implements LoadingOverlayRenderer {\n  private _card?: HTMLElement\n  private _titleEl?: HTMLElement\n  private _bodyEl?: HTMLElement\n  private _lagEl?: HTMLElement\n\n  build(container: HTMLElement, host: LoadingOverlayHost): void {\n    const card = document.createElement('div')\n    card.style.cssText = [\n      'position:absolute',\n      'top:50%',\n      'left:50%',\n      'transform:translate(-50%,-50%)',\n      'display:flex',\n      'flex-direction:column',\n      'gap:6px',\n      'min-width:340px',\n      'max-width:460px',\n      'padding:14px 18px',\n      'background:#16191d',\n      'border:1px solid rgba(255,255,255,0.08)',\n      'border-radius:10px',\n      'box-shadow:0 8px 28px rgba(0,0,0,0.45)',\n      'pointer-events:auto',\n      'user-select:none',\n      'font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif',\n      'color:#e8eaed'\n    ].join(';')\n\n    // 헤더: \"Scene Monitor\" + X\n    const header = document.createElement('div')\n    header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.07)'\n\n    const title = document.createElement('span')\n    title.style.cssText = 'font-weight:700;font-size:15px;color:#f1f3f5'\n    title.textContent = 'Scene Monitor'\n    this._titleEl = title\n    header.appendChild(title)\n\n    const close = document.createElement('button')\n    close.textContent = '✕'\n    close.title = 'Close'\n    close.style.cssText = 'background:none;border:none;color:rgba(255,255,255,0.55);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:4px'\n    close.addEventListener('mouseenter', () => { close.style.color = 'rgba(255,255,255,0.95)' })\n    close.addEventListener('mouseleave', () => { close.style.color = 'rgba(255,255,255,0.55)' })\n    close.addEventListener('click', () => host.hide())\n    header.appendChild(close)\n\n    card.appendChild(header)\n\n    // 본문: 카테고리별 그룹(매 tick 재구성 — 소량이라 저렴)\n    const body = document.createElement('div')\n    body.style.cssText = 'display:flex;flex-direction:column;gap:2px;padding-top:4px'\n    this._bodyEl = body\n    card.appendChild(body)\n\n    // 하부 Data Lag 섹션 — state.lag 있을 때만 채워짐(없으면 숨김).\n    const lag = document.createElement('div')\n    lag.style.display = 'none'\n    this._lagEl = lag\n    card.appendChild(lag)\n\n    container.appendChild(card)\n    this._card = card\n  }\n\n  update(state: LoadingOverlayState): void {\n    if (this._titleEl) {\n      this._titleEl.textContent = state.isComplete ? 'Scene Monitor' : 'Scene Monitor'\n    }\n    if (!this._bodyEl) return\n\n    // phase → duration(ms). 완료 phase 는 duration, 진행 중은 경과.\n    const now = performance.now()\n    const durByPhase = new Map<string, number>()\n    for (const r of state.phaseHistory) {\n      if (r.phase === 'complete') continue\n      const d = r.duration !== undefined ? r.duration : Math.max(0, now - r.timestamp)\n      durByPhase.set(r.phase, (durByPhase.get(r.phase) ?? 0) + d)\n    }\n\n    let html = ''\n    for (const cat of CATEGORIES) {\n      const present = cat.phases.filter(p => durByPhase.has(p))\n      if (present.length === 0) continue\n\n      const total = present.reduce((s, p) => s + (durByPhase.get(p) ?? 0), 0)\n\n      // 카테고리 헤더\n      html += `<div style=\"display:flex;align-items:center;gap:6px;padding:5px 0 2px\">`\n        + `<span style=\"display:inline-flex;align-items:center;color:${cat.color}\">${cat.icon}</span>`\n        + `<span style=\"flex:1;font-weight:600;font-size:13px;color:${cat.color}\">${cat.label}</span>`\n        + `<span style=\"font-weight:700;font-size:13px;color:${cat.color}\">${fmt(total)}</span>`\n        + `</div>`\n\n      // 하위 단계\n      for (const p of present) {\n        const label = PHASE_LABEL[p] || p\n        html += `<div style=\"display:flex;align-items:center;padding:1px 0 1px 22px\">`\n          + `<span style=\"flex:1;font-size:12.5px;color:rgba(232,234,237,0.82)\">${label}</span>`\n          + `<span style=\"font-size:12.5px;color:rgba(232,234,237,0.55)\">${fmt(durByPhase.get(p) ?? 0)}</span>`\n          + `</div>`\n      }\n    }\n\n    this._bodyEl.innerHTML = html\n\n    // 하부 Data Lag — 표본 있으면 표시, 없으면 숨김.\n    if (this._lagEl) {\n      if (state.lag) {\n        this._lagEl.style.display = ''\n        this._lagEl.innerHTML = lagSectionHtml(state.lag)\n      } else {\n        this._lagEl.style.display = 'none'\n        this._lagEl.innerHTML = ''\n      }\n    }\n  }\n\n  destroy(): void {\n    this._card = undefined\n    this._titleEl = undefined\n    this._bodyEl = undefined\n    this._lagEl = undefined\n  }\n}\n"]}

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

@@ -37,7 +37,10 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
         }
 
         .card[selected] {
-          border: red solid;
+          border: 3px solid var(--md-sys-color-primary, #6750a4);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 30%, transparent), 0 4px 12px rgba(0, 0, 0, 0.25);
+          transform: scale(1.02);
+          transition: all 0.2s ease;
         }
 
         .card.create {
@@ -161,6 +164,14 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
         if (changed.has('group')) {
             this.refreshBoards();
         }
+        // 선택된 카드로 자동 스크롤
+        if (changed.has('boards') || changed.has('value')) {
+            await this.updateComplete;
+            const selected = this.renderRoot.querySelector('.card[selected]');
+            if (selected) {
+                selected.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
     }
     onClickSelect(board) {
         this.dispatchEvent(new CustomEvent('board-selected', {

package/dist/src/selector/ox-board-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-board-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { createBoard, fetchBoardList, fetchGroupList } from '@fmsim/api'\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter > div {\n          float: right;\n          margin-left: 10px;\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: String }) group?: string\n  // @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 50\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <div>\n          <label for=\"group\">Group</label>\n          <select\n            id=\"group\"\n            @change=${(e: Event) => {\n              this.group = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n          </select>\n        </div>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-board-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n              ></ox-board-creation-card>\n            `\n          : html``}\n        ${this.boards.map(\n          board => html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n              <img src=${board.thumbnail} />\n              <div class=\"name\">${board.name}</div>\n              <div class=\"description\">${board.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendBoards()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshBoards()\n    }\n  }\n\n  onClickSelect(board: any) {\n    this.dispatchEvent(\n      new CustomEvent('board-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          board\n        }\n      })\n    )\n  }\n\n  async onCreateBoard(e: CustomEvent) {\n    const { name, description, groupId } = e.detail\n\n    await this.createBoard(name, description, groupId)\n    this.refreshBoards()\n  }\n\n  async refreshGroups() {\n    const fetched = await fetchGroupList()\n\n    const groups = 'groups' in fetched /* graphql */ ? fetched.groups.items : fetched.data.groups\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshBoards() {\n    const boards = await this.getBoards()\n    this.boards = [...boards]\n\n    const creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendBoards() {\n    const boards = await this.getBoards({ page: this._page + 1 })\n    this.boards = [...this.boards, ...boards]\n  }\n\n  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    const filters = []\n    const sortings = [] as any[]\n    const pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    const variables = {\n      filters,\n      sortings,\n      pagination\n      // inherited: this.inherited || InheritedValueType.Include\n    }\n\n    const fetched = await fetchBoardList(variables)\n\n    if ('boards' in fetched /* graphql */) {\n      const { total, items } = fetched.boards\n\n      this._total = total\n      this._page = page\n\n      return items\n    } else {\n      const { boards } = fetched.data\n      this._total = boards.length\n      this._page = 1\n\n      return boards\n    }\n  }\n\n  async createBoard(name: string, description: string, groupId: string) {\n    const model = JSON.stringify({\n      width: 1600,\n      height: 1200,\n      fillStyle: 'white'\n    })\n\n    const { data } = await createBoard({\n      name,\n      description,\n      groupId,\n      model\n    })\n\n    return data\n  }\n}\n"]}
+{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-board-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { createBoard, fetchBoardList, fetchGroupList } from '@fmsim/api'\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: 3px solid var(--md-sys-color-primary, #6750a4);\n          box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 30%, transparent), 0 4px 12px rgba(0, 0, 0, 0.25);\n          transform: scale(1.02);\n          transition: all 0.2s ease;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: #fff;\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter > div {\n          float: right;\n          margin-left: 10px;\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) boards: any[] = []\n  @property({ type: String }) group?: string\n  // @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 50\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <div>\n          <label for=\"group\">Group</label>\n          <select\n            id=\"group\"\n            @change=${(e: Event) => {\n              this.group = (e.currentTarget as any)?.value\n              this.requestUpdate()\n            }}\n          >\n            <option value=\"\">${i18next.t('label.all')}</option>\n            ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n          </select>\n        </div>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-board-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n              ></ox-board-creation-card>\n            `\n          : html``}\n        ${this.boards.map(\n          board => html`\n            <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n              <img src=${board.thumbnail} />\n              <div class=\"name\">${board.name}</div>\n              <div class=\"description\">${board.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendBoards()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshBoards()\n    }\n\n    // 선택된 카드로 자동 스크롤\n    if (changed.has('boards') || changed.has('value')) {\n      await this.updateComplete\n      const selected = this.renderRoot.querySelector('.card[selected]') as HTMLElement\n      if (selected) {\n        selected.scrollIntoView({ behavior: 'smooth', block: 'center' })\n      }\n    }\n  }\n\n  onClickSelect(board: any) {\n    this.dispatchEvent(\n      new CustomEvent('board-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          board\n        }\n      })\n    )\n  }\n\n  async onCreateBoard(e: CustomEvent) {\n    const { name, description, groupId } = e.detail\n\n    await this.createBoard(name, description, groupId)\n    this.refreshBoards()\n  }\n\n  async refreshGroups() {\n    const fetched = await fetchGroupList()\n\n    const groups = 'groups' in fetched /* graphql */ ? fetched.groups.items : fetched.data.groups\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshBoards() {\n    const boards = await this.getBoards()\n    this.boards = [...boards]\n\n    const creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendBoards() {\n    const boards = await this.getBoards({ page: this._page + 1 })\n    this.boards = [...this.boards, ...boards]\n  }\n\n  async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    const filters = []\n    const sortings = [] as any[]\n    const pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    const variables = {\n      filters,\n      sortings,\n      pagination\n      // inherited: this.inherited || InheritedValueType.Include\n    }\n\n    const fetched = await fetchBoardList(variables)\n\n    if ('boards' in fetched /* graphql */) {\n      const { total, items } = fetched.boards\n\n      this._total = total\n      this._page = page\n\n      return items\n    } else {\n      const { boards } = fetched.data\n      this._total = boards.length\n      this._page = 1\n\n      return boards\n    }\n  }\n\n  async createBoard(name: string, description: string, groupId: string) {\n    const model = JSON.stringify({\n      width: 1600,\n      height: 1200,\n      fillStyle: 'white'\n    })\n\n    const { data } = await createBoard({\n      name,\n      description,\n      groupId,\n      model\n    })\n\n    return data\n  }\n}\n"]}