@operato/property-panel 10.0.0-beta.7 → 10.1.0

package/dist/src/property-panel/inspector/inspector-tree-view.js

@@ -0,0 +1,61 @@
+import { html, nothing } from 'lit';
+import { matchesQuery } from './inspector-model.js';
+import { highlight } from './inspector-highlight.js';
+/** 컴포넌트 자신 또는 자손 중 검색 매치가 있으면 표시 대상. */
+function shouldBeShown(component, terms) {
+    if (matchesQuery(component, terms))
+        return true;
+    const children = component.isContainer() ? component.components : [];
+    return children.some(child => shouldBeShown(child, terms));
+}
+/** 검색 매치 개수(루트 포함, 전체 트리) — ROOT 노드 count 표시용. */
+export function countMatches(component, terms) {
+    let n = matchesQuery(component, terms) ? 1 : 0;
+    const children = component.isContainer() ? component.components : [];
+    for (const child of children)
+        n += countMatches(child, terms);
+    return n;
+}
+function renderNode(component, depth, ctx) {
+    if (!component || !shouldBeShown(component, ctx.terms)) {
+        return html ``;
+    }
+    const children = component.isContainer() ? component.components : [];
+    const extended = ctx.isExtended(component) ? children.filter(child => shouldBeShown(child, ctx.terms)) : [];
+    const { type, id, tag, class: clazz } = component.state;
+    const label = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '');
+    return html `
+    <div
+      class="component"
+      ?selected=${ctx.selected.indexOf(component) > -1}
+      .component=${component}
+      ?sortable=${component.isContainer()}
+    >
+      <span>
+        ${depth > 0
+        ? html `
+              <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
+              <md-icon class="lock" ?locked=${!!component.get('locked')}
+                >${component.get('locked') ? 'lock' : 'lock_open'}</md-icon
+              >
+              <pre>${' '.repeat(Math.max(0, depth - 1))}</pre>
+            `
+        : html ` <pre>${' '.repeat(depth + 1)}</pre> `}
+
+        <span class=${ctx.nodeHandleClass(component)}> </span>
+
+        <span class="type">${depth == 0 ? html `ROOT(count: ${ctx.count})` : highlight(type, ctx.terms)}</span>
+        ${label ? html ` <span class="name">${highlight(label, ctx.terms)}</span> ` : nothing}
+      </span>
+
+      ${extended.map(child => renderNode(child, depth + 1, ctx))}
+    </div>
+  `;
+}
+/** scene.root 부터 트리를 렌더한다. */
+export function renderInspectorTree(root, ctx) {
+    if (!root)
+        return html ``;
+    return renderNode(root, 0, ctx);
+}
+//# sourceMappingURL=inspector-tree-view.js.map

package/dist/src/property-panel/inspector/inspector-tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector-tree-view.js","sourceRoot":"","sources":["../../../../src/property-panel/inspector/inspector-tree-view.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAc,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAcpD,wCAAwC;AACxC,SAAS,aAAa,CAAC,SAAoB,EAAE,KAAmB;IAC9D,IAAI,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAC/C,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAE,SAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACnF,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,YAAY,CAAC,SAAoB,EAAE,KAAmB;IACpE,IAAI,CAAC,GAAG,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9C,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAE,SAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACnF,KAAK,MAAM,KAAK,IAAI,QAAQ;QAAE,CAAC,IAAI,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC7D,OAAO,CAAC,CAAA;AACV,CAAC;AAED,SAAS,UAAU,CAAC,SAAoB,EAAE,KAAa,EAAE,GAAoB;IAC3E,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QACvD,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;IAED,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAE,SAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IACnF,MAAM,QAAQ,GAAG,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3G,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;IACvD,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAE1F,OAAO,IAAI,CAAA;;;kBAGK,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;mBACnC,SAAS;kBACV,SAAS,CAAC,WAAW,EAAE;;;UAG/B,KAAK,GAAG,CAAC;QACT,CAAC,CAAC,IAAI,CAAA;qCACqB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY;8CAChD,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;mBACpD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW;;qBAE5C,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;aAC1C;QACH,CAAC,CAAC,IAAI,CAAA,SAAS,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,SAAS;;sBAEjC,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC;;6BAEvB,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC;UAC5F,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;;;QAGpF,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;;GAE7D,CAAA;AACH,CAAC;AAED,8BAA8B;AAC9B,MAAM,UAAU,mBAAmB,CAAC,IAA2B,EAAE,GAAoB;IACnF,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA,EAAE,CAAA;IACxB,OAAO,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,CAAA;AACjC,CAAC","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Scene Inspector 트리 뷰 렌더러.\n *\n * 계층(Container/Group) 구조를 재귀로 그린다. SceneInspector 의 shadow root 에 직접 렌더되며\n * (클릭 위임이 `.component` 프로퍼티/classList 에 의존하므로 별도 커스텀엘리먼트로 분리하지 않는다),\n * 순수 렌더 함수로 컨트롤러/상태를 주입받는다.\n */\nimport { Component, Container } from '@hatiolab/things-scene'\nimport { html, nothing, TemplateResult } from 'lit'\n\nimport { matchesQuery, SearchTerm } from './inspector-model.js'\nimport { highlight } from './inspector-highlight.js'\n\n/** 트리 렌더에 필요한 컨텍스트(호스트/컨트롤러가 주입). */\nexport interface TreeViewContext {\n  /** 현재 선택 컴포넌트 목록. */\n  selected: Component[]\n  /** 파싱된 검색어(AND). */\n  terms: SearchTerm[]\n  /** ROOT 노드에 표시할 매치 개수. */\n  count: number\n  isExtended: (c: Component) => boolean\n  nodeHandleClass: (c: Component) => string\n}\n\n/** 컴포넌트 자신 또는 자손 중 검색 매치가 있으면 표시 대상. */\nfunction shouldBeShown(component: Component, terms: SearchTerm[]): boolean {\n  if (matchesQuery(component, terms)) return true\n  const children = component.isContainer() ? (component as Container).components : []\n  return children.some(child => shouldBeShown(child, terms))\n}\n\n/** 검색 매치 개수(루트 포함, 전체 트리) — ROOT 노드 count 표시용. */\nexport function countMatches(component: Component, terms: SearchTerm[]): number {\n  let n = matchesQuery(component, terms) ? 1 : 0\n  const children = component.isContainer() ? (component as Container).components : []\n  for (const child of children) n += countMatches(child, terms)\n  return n\n}\n\nfunction renderNode(component: Component, depth: number, ctx: TreeViewContext): TemplateResult {\n  if (!component || !shouldBeShown(component, ctx.terms)) {\n    return html``\n  }\n\n  const children = component.isContainer() ? (component as Container).components : []\n  const extended = ctx.isExtended(component) ? children.filter(child => shouldBeShown(child, ctx.terms)) : []\n  const { type, id, tag, class: clazz } = component.state\n  const label = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')\n\n  return html`\n    <div\n      class=\"component\"\n      ?selected=${ctx.selected.indexOf(component) > -1}\n      .component=${component}\n      ?sortable=${component.isContainer()}\n    >\n      <span>\n        ${depth > 0\n          ? html`\n              <md-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>\n              <md-icon class=\"lock\" ?locked=${!!component.get('locked')}\n                >${component.get('locked') ? 'lock' : 'lock_open'}</md-icon\n              >\n              <pre>${' '.repeat(Math.max(0, depth - 1))}</pre>\n            `\n          : html` <pre>${' '.repeat(depth + 1)}</pre> `}\n\n        <span class=${ctx.nodeHandleClass(component)}> </span>\n\n        <span class=\"type\">${depth == 0 ? html`ROOT(count: ${ctx.count})` : highlight(type, ctx.terms)}</span>\n        ${label ? html` <span class=\"name\">${highlight(label, ctx.terms)}</span> ` : nothing}\n      </span>\n\n      ${extended.map(child => renderNode(child, depth + 1, ctx))}\n    </div>\n  `\n}\n\n/** scene.root 부터 트리를 렌더한다. */\nexport function renderInspectorTree(root: Component | undefined, ctx: TreeViewContext): TemplateResult {\n  if (!root) return html``\n  return renderNode(root, 0, ctx)\n}\n"]}

package/dist/src/property-panel/inspector/inspector.d.ts

@@ -1,27 +1,32 @@
 import '@operato/input/ox-input-search.js';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { Component, Scene } from '@hatiolab/things-scene';
+import { Scene } from '@hatiolab/things-scene';
 export declare class SceneInspector extends LitElement {
     static styles: import("lit").CSSResult[];
     scene?: Scene;
     private searchText;
-    private _extendedMap;
+    private viewMode;
+    private controller;
     private show;
-    private count;
-    disconnectScene(scene?: Scene): void;
+    /** reveal(스크롤) 판정용 직전 선택. */
+    private _lastSelected;
     disconnectedCallback(): void;
     render(): TemplateResult<1>;
+    private _renderResult;
+    private _setViewMode;
+    private _collapseGroups;
+    private _expandGroups;
     firstUpdated(): void;
+    /** 외부에서 강제 재렌더용(기존 공개 메쏘드 유지). */
     refresh(): void;
     updated(change: PropertyValues<this>): void;
+    /**
+     * 선택이 바뀌면(캔버스 등) 해당 항목을 리스트에 노출한다 — 그룹 뷰면 그룹을 펼친 뒤 스크롤.
+     * scrollIntoView({block:'nearest'}) 라 이미 보이는 경우(인스펙터 클릭 등)엔 사실상 no-op.
+     */
+    private _maybeReveal;
+    /** 이벤트 타겟에서 상위로 올라가며 `.component` 를 가진 요소를 찾는다. */
+    private _resolveComponent;
     _onclick(e: MouseEvent): void;
     _ondblclick(e: MouseEvent): void;
-    get extendedMap(): any;
-    getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
-    isExtended(component: Component): boolean;
-    toggleExtended(component: Component): void;
-    toggleHidden(component: Component): void;
-    selectComponent(component: Component, append?: boolean): void;
-    shouldBeShown(component: Component, counting?: boolean): boolean;
-    renderComponent(component: Component, depth: number): TemplateResult;
 }

package/dist/src/property-panel/inspector/inspector.js

@@ -1,33 +1,65 @@
 import { __decorate } from "tslib";
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * SceneInspector — 속성패널 inspector 탭 호스트.
+ *
+ * 얇은 호스트: 검색 상태 + 클릭 위임만 담당하고, scene 상호작용은 InspectorController,
+ * 렌더는 뷰 렌더러(현재 트리)로 위임한다. (아키텍처 리팩터 P0 — 동작은 기존과 동일)
+ */
 import '@operato/input/ox-input-search.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-// TODO test Sortable
-// import Sortable from 'sortablejs'
 import { i18next } from '@operato/i18n';
 import { InspectorStyles } from '@operato/styles/inspector-styles.js';
+import { parseQuery } from './inspector-model.js';
+import { InspectorController } from './inspector-controller.js';
+import { countMatches, renderInspectorTree } from './inspector-tree-view.js';
+import { renderInspectorGroupView } from './inspector-group-view.js';
+/** 뷰 모드 선호를 세션 간 유지(localStorage). 전역 사용자 선호. */
+const VIEW_MODE_STORAGE_KEY = 'scene-inspector.view-mode';
+function readStoredViewMode() {
+    try {
+        const v = localStorage.getItem(VIEW_MODE_STORAGE_KEY);
+        return v === 'group' || v === 'tree' ? v : 'tree';
+    }
+    catch (_a) {
+        return 'tree';
+    }
+}
+function writeStoredViewMode(mode) {
+    try {
+        localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode);
+    }
+    catch (_a) {
+        /* localStorage 미가용(SSR/프라이빗 등) — 무시 */
+    }
+}
 export class SceneInspector extends LitElement {
     constructor() {
         super(...arguments);
         this.searchText = '';
+        this.viewMode = readStoredViewMode();
+        this.controller = new InspectorController();
         this.show = false;
-        this.count = -1;
-    }
-    disconnectScene(scene) {
-        if (scene) {
-            scene.off('selected', undefined, this);
-            scene.off('execute', undefined, this);
-            scene.off('undo', undefined, this);
-            scene.off('redo', undefined, this);
-        }
+        /** reveal(스크롤) 판정용 직전 선택. */
+        this._lastSelected = [];
+        this._collapseGroups = () => {
+            this.controller.collapseAllGroups();
+            this.requestUpdate();
+        };
+        this._expandGroups = () => {
+            const index = this.controller.index;
+            if (index)
+                this.controller.expandAllGroups([...index.byType.keys()]);
+            this.requestUpdate();
+        };
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.disconnectScene(this.scene);
-        delete this._extendedMap;
+        this.controller.unbind();
     }
     render() {
-        this.count = 0;
         return html `
       <ox-input-search
         .placeholder=${i18next.t('text.search with type, id or tag')}
@@ -35,73 +67,93 @@ export class SceneInspector extends LitElement {
         @change=${(e) => (this.searchText = (e.target.value || '').toLowerCase())}
       ></ox-input-search>
 
-      <div result>${!this.scene ? html `` : this.renderComponent(this.scene.root, 0)}</div>
+      <div toolbar>
+        <md-icon class="view-btn" ?selected=${this.viewMode === 'tree'} title="Tree view" @click=${() => this._setViewMode('tree')}>account_tree</md-icon>
+        <md-icon class="view-btn" ?selected=${this.viewMode === 'group'} title="Group by type" @click=${() => this._setViewMode('group')}>category</md-icon>
+        <span class="spacer"></span>
+        ${this.viewMode === 'group'
+            ? html `
+              <md-icon title="Expand all groups" @click=${this._expandGroups}>unfold_more</md-icon>
+              <md-icon title="Collapse to group level" @click=${this._collapseGroups}>unfold_less</md-icon>
+            `
+            : nothing}
+      </div>
+
+      <div result>${this._renderResult()}</div>
     `;
     }
+    _renderResult() {
+        if (!this.scene)
+            return html ``;
+        const terms = parseQuery(this.searchText);
+        if (this.viewMode === 'group') {
+            return renderInspectorGroupView(this.controller.index, {
+                selected: this.controller.selected,
+                terms,
+                isGroupExpanded: (type) => this.controller.isGroupExpanded(type),
+                isTypeDimmed: (type) => this.controller.isTypeDimmed(type),
+                isTypeHidden: (type) => this.controller.isTypeHidden(type)
+            });
+        }
+        return renderInspectorTree(this.scene.root, {
+            selected: this.controller.selected,
+            terms,
+            count: countMatches(this.scene.root, terms),
+            isExtended: (c) => this.controller.isExtended(c),
+            nodeHandleClass: (c) => this.controller.nodeHandleClass(c)
+        });
+    }
+    _setViewMode(mode) {
+        if (this.viewMode === mode)
+            return;
+        this.viewMode = mode;
+        writeStoredViewMode(mode); // 세션 간 유지
+    }
     firstUpdated() {
         dispatchEvent(new Event('resize'));
         this.renderRoot.addEventListener('click', this._onclick.bind(this));
         this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
     }
+    /** 외부에서 강제 재렌더용(기존 공개 메쏘드 유지). */
     refresh() {
-        var _a;
-        let selected = ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected) || [];
-        selected.forEach((component) => {
-            let parent = component.parent;
-            while (parent && !this.extendedMap.get(parent)) {
-                this.extendedMap.set(parent, true);
-                parent = parent.parent;
-            }
-        });
         this.requestUpdate();
     }
     updated(change) {
         if (change.has('scene')) {
-            let oldScene = change.get('scene');
-            if (oldScene) {
-                this.disconnectScene(oldScene);
-                delete this._extendedMap;
-            }
-            if (this.scene && this.scene.root) {
-                this.scene.on('selected', this.refresh, this);
-                this.scene.on('execute', this.refresh, this);
-                this.scene.on('undo', this.refresh, this);
-                this.scene.on('redo', this.refresh, this);
-                this.refresh();
+            this.controller.bind(this.scene, () => this.requestUpdate());
+        }
+        this._maybeReveal();
+    }
+    /**
+     * 선택이 바뀌면(캔버스 등) 해당 항목을 리스트에 노출한다 — 그룹 뷰면 그룹을 펼친 뒤 스크롤.
+     * scrollIntoView({block:'nearest'}) 라 이미 보이는 경우(인스펙터 클릭 등)엔 사실상 no-op.
+     */
+    _maybeReveal() {
+        const selected = this.controller.selected;
+        const changed = selected.length !== this._lastSelected.length || selected.some((c, i) => c !== this._lastSelected[i]);
+        if (!changed)
+            return;
+        if (selected.length === 0) {
+            this._lastSelected = selected;
+            return;
+        }
+        if (this.viewMode === 'group') {
+            const types = [...new Set(selected.map(c => c.state.type))];
+            if (types.some(t => !this.controller.isGroupExpanded(t))) {
+                this.controller.expandAllGroups(types);
+                return; // _lastSelected 미갱신 → 다음 updated 에서 changed 유지 → 그때 스크롤
             }
         }
-        // TODO test Sortable
-        // this.updateComplete.then(() => {
-        //   this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
-        //     new Sortable(sortable as HTMLElement, this.sortableConfig)
-        //   })
-        // })
+        this._lastSelected = selected;
+        this.updateComplete.then(() => {
+            const el = this.renderRoot.querySelector('.component[selected]');
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+        });
     }
-    // TODO test Sortable
-    // sortableConfig: Sortable.Options = {
-    //   group: 'inspector',
-    //   animation: 150,
-    //   draggable: '.component',
-    //   swapThreshold: 1,
-    //   onSort: this.onSort.bind(this)
-    // }
-    // TODO test Sortable
-    // onSort(e: Sortable.SortableEvent) {
-    //   if (!this.scene) return
-    //   var component = (e.item as HTMLElement & { component: Component }).component
-    //   var to_container = (e.to as HTMLElement & { component: Component }).component as Container
-    //   var to_index = e.newIndex! - 1
-    //   this.scene.move(component, to_container, to_index)
-    //   this.show = false
-    //   this.updateComplete.then(() => {
-    //     this.show = true
-    //   })
-    // }
-    _onclick(e) {
-        e.stopPropagation();
-        var targetElement = e.target;
-        var classList = targetElement.classList;
-        var component;
+    /** 이벤트 타겟에서 상위로 올라가며 `.component` 를 가진 요소를 찾는다. */
+    _resolveComponent(e) {
+        let targetElement = e.target;
+        let component;
         while (!component && targetElement) {
             component = targetElement.component;
             if (component)
@@ -110,14 +162,56 @@ export class SceneInspector extends LitElement {
             if (!targetElement || targetElement === this.renderRoot)
                 break;
         }
+        return component;
+    }
+    _onclick(e) {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        const target = e.target;
+        // 그룹 hidden 아이콘 클릭 → 그룹(타입) 전원 hidden 토글 (헤더 펼침보다 먼저 처리)
+        if (target.classList.contains('group-hidden')) {
+            const type = (_b = (_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-group-type]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-group-type');
+            if (type != null)
+                this.controller.toggleTypeHidden(type);
+            this.requestUpdate();
+            return;
+        }
+        // 그룹 dim-out 아이콘 클릭 → 그룹(타입) 포커스 dim 토글 (헤더 펼침보다 먼저 처리)
+        if (target.classList.contains('group-dim')) {
+            const type = (_d = (_c = target.closest) === null || _c === void 0 ? void 0 : _c.call(target, '[data-group-type]')) === null || _d === void 0 ? void 0 : _d.getAttribute('data-group-type');
+            if (type != null)
+                this.controller.toggleTypeDim(type);
+            this.requestUpdate();
+            return;
+        }
+        // 타입 그룹 헤더 클릭 → 그룹 펼침/접힘 (멤버 행은 헤더의 자손이 아니므로 여기 안 걸림)
+        const header = (_e = target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '[data-group-type]');
+        if (header) {
+            const type = header.getAttribute('data-group-type');
+            if (type != null)
+                this.controller.toggleGroup(type);
+            this.requestUpdate();
+            return;
+        }
+        const classList = e.target.classList;
+        const component = this._resolveComponent(e);
         if (component) {
             if (classList.contains('eye')) {
-                this.toggleHidden(component);
+                this.controller.toggleHidden(component);
+            }
+            else if (classList.contains('lock')) {
+                this.controller.toggleLocked(component);
             }
             else if (classList.contains('extended') || classList.contains('collapsed')) {
-                this.toggleExtended(component);
+                this.controller.toggleExtended(component);
+            }
+            // shift = 범위(볼륨) 선택/블록 해제, ctrl/cmd = 개별 토글, 그 외 = 단일 선택
+            if (e.shiftKey) {
+                this.controller.selectRange(component, parseQuery(this.searchText));
+            }
+            else {
+                this.controller.select(component, e.metaKey || e.ctrlKey);
             }
-            this.selectComponent(component, e.shiftKey);
         }
         else {
             if (classList.contains('inspector')) {
@@ -129,117 +223,16 @@ export class SceneInspector extends LitElement {
     }
     _ondblclick(e) {
         e.stopPropagation();
-        var targetElement = e.target;
-        var component;
-        while (!component && targetElement) {
-            component = targetElement.component;
-            if (component)
-                break;
-            targetElement = targetElement.parentNode;
-            if (!targetElement || targetElement === this.renderRoot)
-                break;
-        }
-        if (component && component.isContainer()) {
-            this.toggleExtended(component);
-        }
-        this.requestUpdate();
-    }
-    get extendedMap() {
-        if (!this._extendedMap) {
-            this._extendedMap = new WeakMap();
-        }
-        return this._extendedMap;
-    }
-    getNodeHandleClass(component) {
-        if (component.isContainer() && component.components.length > 0) {
-            return !!this.extendedMap.get(component) ? 'extended' : 'collapsed';
-        }
-        else {
-            return 'collapsespace';
-        }
-    }
-    isExtended(component) {
-        return !!this.extendedMap.get(component);
-    }
-    toggleExtended(component) {
-        var extended = this.isExtended(component);
-        if (extended) {
-            this.extendedMap.delete(component);
-        }
-        else {
-            this.extendedMap.set(component, !extended);
-        }
-        this.requestUpdate();
-    }
-    toggleHidden(component) {
-        component.set('hidden', !component.hidden);
-        this.requestUpdate();
-    }
-    selectComponent(component, append = false) {
-        const selected = this.scene.selected;
-        if (append) {
-            const idx = selected.findIndex((s) => s === component);
-            if (idx != -1) {
-                selected.splice(idx, 1);
-                this.scene.selected = [...selected];
-            }
-            else {
-                this.scene.selected = [...selected, component];
+        const component = this._resolveComponent(e);
+        if (component) {
+            if (component.isContainer()) {
+                this.controller.toggleExtended(component);
             }
+            // 캔버스를 해당 컴포넌트로 센터 이동(줌).
+            this.controller.centerTo(component);
         }
-        else {
-            this.scene.selected = [component];
-        }
-        component.trigger('reactionreset');
-        component.trigger('reaction');
         this.requestUpdate();
     }
-    shouldBeShown(component, counting = false) {
-        const { type, name, id, tag } = component.state;
-        const found = !this.searchText || `${type} ${name || ''} ${id || ''} ${tag || ''}`.toLowerCase().search(this.searchText) > -1;
-        if (counting && found) {
-            this.count++;
-        }
-        const foundChildren = (component.isContainer() ? component.components : []).filter((child) => this.shouldBeShown(child, counting)).length;
-        return !!(found || foundChildren > 0);
-    }
-    renderComponent(component, depth) {
-        var _a;
-        if (!component) {
-            return html ``;
-        }
-        if (!this.shouldBeShown(component, depth == 0)) {
-            return html ``;
-        }
-        const children = component.isContainer() ? component.components : [];
-        const extended = this.isExtended(component) ? children.filter((child) => this.shouldBeShown(child)) : [];
-        const { type, id, tag, class: clazz } = component.state;
-        const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '');
-        return html `
-      <div
-        class="component"
-        ?selected=${(((_a = this.scene) === null || _a === void 0 ? void 0 : _a.selected) || []).indexOf(component) > -1}
-        .component=${component}
-        ?sortable=${component.isContainer()}
-      >
-        <span>
-          ${depth > 0
-            ? html `
-                <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
-                <pre>${' '.repeat(depth)}</pre>
-              `
-            : html ` <pre>${' '.repeat(depth + 2)}</pre> `}
-
-          <span class=${this.getNodeHandleClass(component)}> </span>
-
-          <span class="type">${depth == 0 ? html `ROOT(count: ${this.count})` : type}</span>
-          ${name ? html ` <span class="name">${name}</span> ` : html ``}
-        </span>
-
-        ${extended.map((child) => this.renderComponent(child, depth + 1))}
-      </div>
-    `;
-    }
 }
 SceneInspector.styles = [
     InspectorStyles,
@@ -306,15 +299,121 @@ SceneInspector.styles = [
       }
 
       .eye {
-        margin: 0 0 0 5px;
+        margin: 0 0 0 4px;
         vertical-align: middle;
         opacity: 0.7;
-        font-size: 1.1em;
+        font-size: 1em;
+        width: 1em;
         color: var(--scene-inspector-eye-icon-color);
+        cursor: pointer;
+      }
+
+      .lock {
+        margin: 0;
+        vertical-align: middle;
+        opacity: 0.3;
+        font-size: 1em;
+        width: 1em;
+        cursor: pointer;
+      }
+      .lock[locked] {
+        opacity: 0.9;
+        color: var(--md-sys-color-error, #d9534f);
       }
 
       pre {
         display: inline;
+        /* 트리 인덴트(수직라인까지의 간격) 최소화 — depth 당 좁은 폭 */
+        font-size: 0.6em;
+        margin: 0;
+      }
+
+      /* 뷰 모드 툴바 */
+      div[toolbar] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px 4px;
+      }
+      div[toolbar] .spacer {
+        flex: 1;
+      }
+      div[toolbar] md-icon {
+        cursor: pointer;
+        opacity: 0.5;
+        font-size: 18px;
+        border-radius: 4px;
+        padding: 2px;
+      }
+      div[toolbar] md-icon:hover {
+        opacity: 0.9;
+      }
+      div[toolbar] md-icon[selected] {
+        opacity: 1;
+        color: var(--md-sys-color-primary, #4a9eff);
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      /* 타입 그룹 뷰 */
+      .group-header {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 2px 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      }
+      .group-header:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+      .group-count {
+        margin-left: auto;
+        font-size: 0.72em;
+        font-weight: normal;
+        background: var(--scene-inspector-name-background-color);
+        color: #fff;
+        border-radius: 999px;
+        padding: 0 6px;
+      }
+      .group-hidden,
+      .group-dim {
+        font-size: 1em;
+        opacity: 0.35;
+        cursor: pointer;
+      }
+      .group-hidden {
+        margin: 0 2px 0 6px;
+      }
+      .group-dim {
+        margin: 0 4px 0 2px;
+      }
+      .group-hidden:hover,
+      .group-dim:hover {
+        opacity: 0.8;
+      }
+      .group-header[hidden-group] .group-hidden,
+      .group-header[dimmed] .group-dim {
+        opacity: 0.95;
+        color: var(--md-sys-color-primary, #4a9eff);
+      }
+      .group-header[dimmed] .group-type {
+        opacity: 0.45;
+      }
+      .group-member {
+        padding-left: 8px;
+      }
+      .muted {
+        opacity: 0.4;
+        font-style: italic;
+      }
+      /* 검색 매치 하이라이트 */
+      mark {
+        background: var(--md-sys-color-tertiary-container, #ffe082);
+        color: inherit;
+        border-radius: 2px;
+        padding: 0 1px;
       }
     `
 ];
@@ -324,4 +423,7 @@ __decorate([
 __decorate([
     state()
 ], SceneInspector.prototype, "searchText", void 0);
+__decorate([
+    state()
+], SceneInspector.prototype, "viewMode", void 0);
 //# sourceMappingURL=inspector.js.map