@ninebone/table 0.0.5 → 0.0.7

package/dist/nine-table.js

@@ -1,163 +1,111 @@
-var j = Object.defineProperty;
-var B = (i) => {
-  throw TypeError(i);
+var B = Object.defineProperty;
+var w = (n) => {
+  throw TypeError(n);
 };
-var l = (i, e) => j(i, "name", { value: e, configurable: !0 });
-var v = (i, e, t) => e.has(i) || B("Cannot " + t);
-var n = (i, e, t) => (v(i, e, "read from private field"), t ? t.call(i) : e.get(i)), r = (i, e, t) => e.has(i) ? B("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), h = (i, e, t, o) => (v(i, e, "write to private field"), o ? o.call(i, t) : e.set(i, t), t), p = (i, e, t) => (v(i, e, "access private method"), t);
-import { trace as N } from "@ninebone/util";
-const q = class q extends N.constructor {
+var r = (n, e) => B(n, "name", { value: e, configurable: !0 });
+var f = (n, e, t) => e.has(n) || w("Cannot " + t);
+var s = (n, e, t) => (f(n, e, "read from private field"), t ? t.call(n) : e.get(n)), b = (n, e, t) => e.has(n) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), p = (n, e, t, a) => (f(n, e, "write to private field"), a ? a.call(n, t) : e.set(n, t), t), c = (n, e, t) => (f(n, e, "access private method"), t);
+import { trace as T } from "@ninebone/util";
+const g = class g extends T.constructor {
   constructor() {
     super(), this.init("nine-table", "green");
   }
 };
-l(q, "Trace");
-let k = q;
-const u = new k();
-var g, d, s, b, H, R;
-const T = class T {
-  constructor(e, t) {
-    r(this, b);
-    r(this, g);
-    r(this, d);
-    r(this, s);
-    h(this, g, e), h(this, d, t), h(this, s, e.shadowRoot);
-  }
-  init() {
-    p(this, b, H).call(this), p(this, b, R).call(this), n(this, d).length > 0 && this.renderTable(0), u.log("TableView initialized with nine-table-analysis component.");
+r(g, "Trace");
+let u = g;
+const k = new u();
+var o, i, l, E, S, $;
+const x = class x {
+  constructor(e) {
+    b(this, l);
+    b(this, o);
+    b(this, i, []);
+    p(this, o, e);
   }
-  renderTable(e) {
-    if (!n(this, d)[e]) return;
-    this.tabBar.innerHTML = "", n(this, d).forEach((w, a) => {
-      const c = document.createElement("div");
-      c.className = `nine-tab-item ${a === e ? "active" : ""}`, c.textContent = `Sheet ${a + 1}`, c.addEventListener("click", () => this.renderTable(a)), this.tabBar.appendChild(c);
-    }), this.sheetsBody.innerHTML = "";
-    const t = n(this, d)[e].cloneNode(!0);
-    this.sheetsBody.appendChild(t);
-    const o = t.querySelectorAll("tbody tr").length;
-    this.rowCountEl && (this.rowCountEl.textContent = o.toLocaleString()), u.log(`Rendered sheets tab index: ${e}`);
+  render() {
+    s(this, o).host.querySelectorAll("table").forEach((t) => {
+      s(this, i).push(t), t.style.display = "none";
+    }), c(this, l, E).call(this), c(this, l, S).call(this), c(this, l, $).call(this), s(this, i).length > 0 && this.switchTab(0);
   }
-  destroy() {
-    n(this, s).innerHTML = "", u.log("TableView destroyed.");
+  switchTab(e) {
+    s(this, i)[e] && (this.tabBar.querySelectorAll(".nine-tab-item").forEach((t, a) => {
+      t.classList.toggle("active", a === e);
+    }), this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, a) => {
+      t.classList.toggle("active", a === e);
+    }));
   }
 };
-g = new WeakMap(), d = new WeakMap(), s = new WeakMap(), b = new WeakSet(), H = /* @__PURE__ */ l(function() {
-  n(this, s).innerHTML = `
+o = new WeakMap(), i = new WeakMap(), l = new WeakSet(), E = /* @__PURE__ */ r(function() {
+  const e = s(this, i).map((q, h) => `
+            <nine-table-sheet class="${h === 0 ? "active" : ""}" data-index="${h}"></nine-table-sheet>
+        `).join(""), t = s(this, i).map((q, h) => `
+            <div class="nine-tab-item ${h === 0 ? "active" : ""}" data-index="${h}">Sheet ${h + 1}</div>
+        `).join(""), a = s(this, i)[0] ? s(this, i)[0].querySelectorAll("tbody tr").length : 0;
+  s(this, o).innerHTML = `
             <style>
-                :host { display: block; position: relative; overflow: hidden; height: 100%; }
-                
-                /* 최외곽 루트 구조: 상단 - 바디 - 하단 */
-                .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
-                
+                :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
                 nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
-                
-                /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */
                 nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
-                
-                nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }
-                
-                /* 중앙 시트 컨테이너 영역 */
-                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
-                
+                nine-table-summary { display: none; }
+                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }
                 nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
                 
-                /* 하단 탭 버튼 및 카운터 영역 */
+                nine-table-sheet { display: none; width: 100%; height: 100%; }
+                nine-table-sheet.active { display: block; }
+
                 nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }
-                
                 .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
                 .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }
                 .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
-
                 .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
-
-                nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }
-                
-                /* 최하단 전체 상태 바 */
-                nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }
-
-                table { border-collapse: collapse; width: 100%; table-layout: fixed; }
-                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
+                nine-table-analysis { display: none; }
+                nine-table-footer { display: none; }
             </style>
             
-            <div class="nine-table-root">
-                <!-- 1. 상단 컴포넌트 -->
-                <nine-table-header></nine-table-header>
-
-                <!-- 2. 메인 바디 컴포넌트 -->
-                <nine-table-body>
-                    <nine-table-summary></nine-table-summary>
-                    
-                    <nine-table-sheets>
-                        <nine-table-sheets-body></nine-table-sheets-body>
-                        <nine-table-sheets-footer>
-                            <div class="nine-tab-bar"></div>
-                            <div class="sheets-counter">Total : <span id="row-count">0</span></div>
-                        </nine-table-sheets-footer>
-                    </nine-table-sheets>
-                    
-                    <nine-table-analysis></nine-table-analysis>
-                </nine-table-body>
-
-                <!-- 3. 하단 컴포넌트 -->
-                <nine-table-footer>
-                    <div class="footer-left">Ready</div>
-                    <div class="footer-right">Status: OK</div>
-                </nine-table-footer>
-            </div>
+            <nine-table-header></nine-table-header>
+            <nine-table-body>
+                <nine-table-summary></nine-table-summary>
+                <nine-table-sheets>
+                    <nine-table-sheets-body>
+                        ${e}
+                    </nine-table-sheets-body>
+                    <nine-table-sheets-footer>
+                        <div class="nine-tab-bar">
+                            ${t}
+                        </div>
+                        <div class="sheets-counter">Total : <span id="row-count">${a.toLocaleString()}</span></div>
+                    </nine-table-sheets-footer>
+                </nine-table-sheets>
+                <nine-table-analysis></nine-table-analysis>
+            </nine-table-body>
+            <nine-table-footer></nine-table-footer>
         `;
-}, "#renderShell"), R = /* @__PURE__ */ l(function() {
-  this.sidebarLeft = n(this, s).querySelector("nine-table-summary"), this.sheetsBody = n(this, s).querySelector("nine-table-sheets-body"), this.sidebarRight = n(this, s).querySelector("nine-table-analysis"), this.tabBar = n(this, s).querySelector(".nine-tab-bar"), this.rowCountEl = n(this, s).querySelector("#row-count");
-}, "#bindElements"), l(T, "TableView");
-let S = T;
-var m, f, A, $;
-const L = class L {
-  constructor(e) {
-    r(this, f);
-    r(this, m);
-    h(this, m, e);
-  }
-  // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
-  initializeTable(e) {
-    return p(this, f, A).call(this, e), p(this, f, $).call(this, e), e.classList.add("nine-table-element"), e;
-  }
-};
-m = new WeakMap(), f = new WeakSet(), // [Private] colgroup 보정
-A = /* @__PURE__ */ l(function(e) {
-  var a;
-  if (e.querySelector("colgroup")) return;
-  const t = ((a = e.querySelector("tbody tr")) == null ? void 0 : a.querySelectorAll("th, td").length) || 1, o = document.createElement("colgroup"), w = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
-  for (let c = 0; c < t; c++) {
-    const M = document.createElement("col");
-    M.setAttribute("width", w), o.appendChild(M);
-  }
-  e.prepend(o);
-}, "#ensureColgroup"), // [Private] thead 보정
-$ = /* @__PURE__ */ l(function(e) {
-  if (e.querySelector("thead")) return;
-  const t = document.createElement("thead"), o = e.querySelector("colgroup");
-  o ? o.after(t) : e.prepend(t);
-}, "#ensureThead"), l(L, "TableInitializer");
-let E = L;
-var y, x;
-const z = class z extends HTMLElement {
+}, "#renderLayoutShell"), S = /* @__PURE__ */ r(function() {
+  this.sheetsBody = s(this, o).querySelector("nine-table-sheets-body"), this.tabBar = s(this, o).querySelector(".nine-tab-bar"), this.tabBar.addEventListener("click", (e) => {
+    const t = e.target.closest(".nine-tab-item");
+    t && this.switchTab(parseInt(t.dataset.index, 10));
+  });
+}, "#bindElements"), $ = /* @__PURE__ */ r(function() {
+  this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, a) => {
+    s(this, i)[a] && t.init(s(this, i)[a]);
+  });
+}, "#initSheets"), r(x, "LayoutManager");
+let y = x;
+var d;
+const v = class v extends HTMLElement {
   constructor() {
     super();
-    r(this, y, !1);
-    r(this, x, []);
+    b(this, d, !1);
     this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    if (n(this, y)) return;
-    this.querySelectorAll("table").forEach((o) => {
-      const a = new E(this).initializeTable(o);
-      n(this, x).push(a), o.style.display = "none";
-    }), this.view = new S(this, n(this, x)), this.view.init(), h(this, y, !0), u.log("NineTable connected and layout initialized."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
+    s(this, d) || (this.layoutManager = new y(this.shadowRoot), this.layoutManager.render(), p(this, d, !0), k.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
   }
   disconnectedCallback() {
-    this.view && this.view.destroy(), u.log("NineTable disconnected.");
+    k.log("NineTable disconnected.");
   }
 };
-y = new WeakMap(), x = new WeakMap(), l(z, "NineTable");
-let C = z;
-customElements.get("nine-table") || customElements.define("nine-table", C);
+d = new WeakMap(), r(v, "NineTable");
+let m = v;
+customElements.get("nine-table") || customElements.define("nine-table", m);
 //# sourceMappingURL=nine-table.js.map

package/dist/nine-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","import {trace} from \"@nopeer\";\n\nexport class TableView {\n    #container;\n    #layouts;\n    #shadowRoot;\n\n    constructor(container, layouts) {\n        this.#container = container;\n        this.#layouts = layouts;\n        this.#shadowRoot = container.shadowRoot;\n    }\n\n    init() {\n        this.#renderShell();\n        this.#bindElements();\n\n        if (this.#layouts.length > 0) {\n            this.renderTable(0);\n        }\n        trace.log('TableView initialized with nine-table-analysis component.');\n    }\n\n    #renderShell() {\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: block; position: relative; overflow: hidden; height: 100%; }\n                \n                /* 최외곽 루트 구조: 상단 - 바디 - 하단 */\n                .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n                \n                nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n                \n                /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */\n                nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n                \n                nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n                \n                /* 중앙 시트 컨테이너 영역 */\n                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n                \n                nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n                \n                /* 하단 탭 버튼 및 카운터 영역 */\n                nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n                \n                .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n                .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n                .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n\n                .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n                nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n                \n                /* 최하단 전체 상태 바 */\n                nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }\n\n                table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n            </style>\n            \n            <div class=\"nine-table-root\">\n                <!-- 1. 상단 컴포넌트 -->\n                <nine-table-header></nine-table-header>\n\n                <!-- 2. 메인 바디 컴포넌트 -->\n                <nine-table-body>\n                    <nine-table-summary></nine-table-summary>\n                    \n                    <nine-table-sheets>\n                        <nine-table-sheets-body></nine-table-sheets-body>\n                        <nine-table-sheets-footer>\n                            <div class=\"nine-tab-bar\"></div>\n                            <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n                        </nine-table-sheets-footer>\n                    </nine-table-sheets>\n                    \n                    <nine-table-analysis></nine-table-analysis>\n                </nine-table-body>\n\n                <!-- 3. 하단 컴포넌트 -->\n                <nine-table-footer>\n                    <div class=\"footer-left\">Ready</div>\n                    <div class=\"footer-right\">Status: OK</div>\n                </nine-table-footer>\n            </div>\n        `;\n    }\n\n    #bindElements() {\n        this.sidebarLeft = this.#shadowRoot.querySelector('nine-table-summary');\n        this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n        this.sidebarRight = this.#shadowRoot.querySelector('nine-table-analysis');\n        this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n        this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n    }\n\n    renderTable(index) {\n        if (!this.#layouts[index]) return;\n\n        this.tabBar.innerHTML = '';\n        this.#layouts.forEach((_, idx) => {\n            const tab = document.createElement('div');\n            tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n            tab.textContent = `Sheet ${idx + 1}`;\n            tab.addEventListener('click', () => this.renderTable(idx));\n            this.tabBar.appendChild(tab);\n        });\n\n        this.sheetsBody.innerHTML = '';\n        const currentTable = this.#layouts[index].cloneNode(true);\n        this.sheetsBody.appendChild(currentTable);\n\n        const rowCount = currentTable.querySelectorAll('tbody tr').length;\n        if (this.rowCountEl) {\n            this.rowCountEl.textContent = rowCount.toLocaleString();\n        }\n\n        trace.log(`Rendered sheets tab index: ${index}`);\n    }\n\n    destroy() {\n        this.#shadowRoot.innerHTML = '';\n        trace.log('TableView destroyed.');\n    }\n}","export class TableInitializer {\n    #container;\n\n    constructor(container) {\n        this.#container = container;\n    }\n\n    // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n    initializeTable(tbl) {\n        this.#ensureColgroup(tbl);\n        this.#ensureThead(tbl);\n\n        tbl.classList.add('nine-table-element');\n        return tbl;\n    }\n\n    // [Private] colgroup 보정\n    #ensureColgroup(tbl) {\n        if (tbl.querySelector('colgroup')) return;\n\n        const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n        const colgroup = document.createElement('colgroup');\n        const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n        for (let i = 0; i < colCount; i++) {\n            const col = document.createElement('col');\n            col.setAttribute('width', defaultWidth);\n            colgroup.appendChild(col);\n        }\n        tbl.prepend(colgroup);\n    }\n\n    // [Private] thead 보정\n    #ensureThead(tbl) {\n        if (tbl.querySelector('thead')) return;\n\n        const thead = document.createElement('thead');\n        const colgroup = tbl.querySelector('colgroup');\n        if (colgroup) {\n            colgroup.after(thead);\n        } else {\n            tbl.prepend(thead);\n        }\n    }\n}","import {trace} from \"@nopeer\";\nimport { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n    #layouts = [];\n\n    constructor() {\n        super();\n        // 최외곽 컴포넌트에만 Shadow DOM 적용\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // 1. 컴포넌트 내부의 원본 table 태그들 수집\n        const tables = this.querySelectorAll('table');\n        tables.forEach(tbl => {\n            const initializer = new TableInitializer(this);\n            const processedTbl = initializer.initializeTable(tbl);\n            this.#layouts.push(processedTbl);\n            tbl.style.display = 'none'; // 원본 숨김\n        });\n\n        // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n        this.view = new TableView(this, this.#layouts);\n        this.view.init();\n\n        this.#created = true;\n        trace.log('NineTable connected and layout initialized.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        if (this.view) {\n            this.view.destroy();\n        }\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}
+{"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","//import './nine-table-sheet.js';\n\nexport class LayoutManager {\n    #shadowRoot;\n    #tables = [];\n\n    constructor(shadowRoot) {\n        this.#shadowRoot = shadowRoot;\n    }\n\n    render() {\n        // shadowRoot 내부(또는 호스트 범위)에서 table 태그들을 수집 후 숨김 처리\n        const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n        rawTables.forEach(tbl => {\n            this.#tables.push(tbl);\n            tbl.style.display = 'none';\n        });\n\n        this.#renderLayoutShell();\n        this.#bindElements();\n        this.#initSheets();\n\n        if (this.#tables.length > 0) {\n            this.switchTab(0);\n        }\n    }\n\n    #renderLayoutShell() {\n        const sheetsHtml = this.#tables.map((_, idx) => `\n            <nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>\n        `).join('');\n\n        const tabsHtml = this.#tables.map((_, idx) => `\n            <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n        `).join('');\n\n        const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n                nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n                nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n                nine-table-summary { display: none; }\n                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n                nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n                \n                nine-table-sheet { display: none; width: 100%; height: 100%; }\n                nine-table-sheet.active { display: block; }\n\n                nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n                .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n                .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n                .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n                .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n                nine-table-analysis { display: none; }\n                nine-table-footer { display: none; }\n            </style>\n            \n            <nine-table-header></nine-table-header>\n            <nine-table-body>\n                <nine-table-summary></nine-table-summary>\n                <nine-table-sheets>\n                    <nine-table-sheets-body>\n                        ${sheetsHtml}\n                    </nine-table-sheets-body>\n                    <nine-table-sheets-footer>\n                        <div class=\"nine-tab-bar\">\n                            ${tabsHtml}\n                        </div>\n                        <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n                    </nine-table-sheets-footer>\n                </nine-table-sheets>\n                <nine-table-analysis></nine-table-analysis>\n            </nine-table-body>\n            <nine-table-footer></nine-table-footer>\n        `;\n    }\n\n    #bindElements() {\n        this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n        this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n        this.tabBar.addEventListener('click', (e) => {\n            const tabItem = e.target.closest('.nine-tab-item');\n            if (!tabItem) return;\n            this.switchTab(parseInt(tabItem.dataset.index, 10));\n        });\n    }\n\n    #initSheets() {\n        const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n        sheetElements.forEach((sheetEl, idx) => {\n            if (this.#tables[idx]) {\n                sheetEl.init(this.#tables[idx]);\n            }\n        });\n    }\n\n    switchTab(index) {\n        if (!this.#tables[index]) return;\n\n        this.tabBar.querySelectorAll('.nine-tab-item').forEach((tab, idx) => {\n            tab.classList.toggle('active', idx === index);\n        });\n\n        this.sheetsBody.querySelectorAll('nine-table-sheet').forEach((sheet, idx) => {\n            sheet.classList.toggle('active', idx === index);\n        });\n    }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n        this.layoutManager = new LayoutManager(this.shadowRoot);\n        this.layoutManager.render();\n\n        this.#created = true;\n        trace.log('NineTable connected.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_LayoutManager","shadowRoot","__privateAdd","_LayoutManager_instances","_shadowRoot","_tables","__privateSet","__privateGet","tbl","__privateMethod","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}

package/dist/nine-table.umd.js

@@ -1,64 +1,44 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(require("@ninebone/util")):typeof define=="function"&&define.amd?define(["@ninebone/util"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.NineboneUtil))})(this,function(e){"use strict";var N=Object.defineProperty;var B=e=>{throw TypeError(e)};var a=(e,t)=>N(e,"name",{value:t,configurable:!0});var z=(e,t,n)=>t.has(e)||B("Cannot "+n);var o=(e,t,n)=>(z(e,t,"read from private field"),n?n.call(e):t.get(e)),d=(e,t,n)=>t.has(e)?B("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,n),y=(e,t,n,f)=>(z(e,t,"write to private field"),f?f.call(e,n):t.set(e,n),n),m=(e,t,n)=>(z(e,t,"access private method"),n);var w,c,s,u,H,R,v,p,A,j,x,g;const E=class E extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};a(E,"Trace");let t=E;const n=new t,C=class C{constructor(i,l){d(this,u);d(this,w);d(this,c);d(this,s);y(this,w,i),y(this,c,l),y(this,s,i.shadowRoot)}init(){m(this,u,H).call(this),m(this,u,R).call(this),o(this,c).length>0&&this.renderTable(0),n.log("TableView initialized with nine-table-analysis component.")}renderTable(i){if(!o(this,c)[i])return;this.tabBar.innerHTML="",o(this,c).forEach((L,h)=>{const b=document.createElement("div");b.className=`nine-tab-item ${h===i?"active":""}`,b.textContent=`Sheet ${h+1}`,b.addEventListener("click",()=>this.renderTable(h)),this.tabBar.appendChild(b)}),this.sheetsBody.innerHTML="";const l=o(this,c)[i].cloneNode(!0);this.sheetsBody.appendChild(l);const r=l.querySelectorAll("tbody tr").length;this.rowCountEl&&(this.rowCountEl.textContent=r.toLocaleString()),n.log(`Rendered sheets tab index: ${i}`)}destroy(){o(this,s).innerHTML="",n.log("TableView destroyed.")}};w=new WeakMap,c=new WeakMap,s=new WeakMap,u=new WeakSet,H=a(function(){o(this,s).innerHTML=`
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(require("@ninebone/util")):typeof define=="function"&&define.amd?define(["@ninebone/util"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.NineboneUtil))})(this,function(e){"use strict";var $=Object.defineProperty;var k=e=>{throw TypeError(e)};var d=(e,t)=>$(e,"name",{value:t,configurable:!0});var v=(e,t,n)=>t.has(e)||k("Cannot "+n);var i=(e,t,n)=>(v(e,t,"read from private field"),n?n.call(e):t.get(e)),p=(e,t,n)=>t.has(e)?k("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,n),w=(e,t,n,b)=>(v(e,t,"write to private field"),b?b.call(e,n):t.set(e,n),n),u=(e,t,n)=>(v(e,t,"access private method"),n);var l,o,r,E,S,q,f;const m=class m extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};d(m,"Trace");let t=m;const n=new t,g=class g{constructor(a){p(this,r);p(this,l);p(this,o,[]);w(this,l,a)}render(){i(this,l).host.querySelectorAll("table").forEach(s=>{i(this,o).push(s),s.style.display="none"}),u(this,r,E).call(this),u(this,r,S).call(this),u(this,r,q).call(this),i(this,o).length>0&&this.switchTab(0)}switchTab(a){i(this,o)[a]&&(this.tabBar.querySelectorAll(".nine-tab-item").forEach((s,h)=>{s.classList.toggle("active",h===a)}),this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((s,h)=>{s.classList.toggle("active",h===a)}))}};l=new WeakMap,o=new WeakMap,r=new WeakSet,E=d(function(){const a=i(this,o).map((T,c)=>`
+            <nine-table-sheet class="${c===0?"active":""}" data-index="${c}"></nine-table-sheet>
+        `).join(""),s=i(this,o).map((T,c)=>`
+            <div class="nine-tab-item ${c===0?"active":""}" data-index="${c}">Sheet ${c+1}</div>
+        `).join(""),h=i(this,o)[0]?i(this,o)[0].querySelectorAll("tbody tr").length:0;i(this,l).innerHTML=`
             <style>
-                :host { display: block; position: relative; overflow: hidden; height: 100%; }
-                
-                /* 최외곽 루트 구조: 상단 - 바디 - 하단 */
-                .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
-                
+                :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
                 nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
-                
-                /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */
                 nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
-                
-                nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }
-                
-                /* 중앙 시트 컨테이너 영역 */
-                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
-                
+                nine-table-summary { display: none; }
+                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }
                 nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
                 
-                /* 하단 탭 버튼 및 카운터 영역 */
+                nine-table-sheet { display: none; width: 100%; height: 100%; }
+                nine-table-sheet.active { display: block; }
+
                 nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }
-                
                 .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
                 .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }
                 .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
-
                 .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
-
-                nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }
-                
-                /* 최하단 전체 상태 바 */
-                nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }
-
-                table { border-collapse: collapse; width: 100%; table-layout: fixed; }
-                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
+                nine-table-analysis { display: none; }
+                nine-table-footer { display: none; }
             </style>
             
-            <div class="nine-table-root">
-                <!-- 1. 상단 컴포넌트 -->
-                <nine-table-header></nine-table-header>
-
-                <!-- 2. 메인 바디 컴포넌트 -->
-                <nine-table-body>
-                    <nine-table-summary></nine-table-summary>
-                    
-                    <nine-table-sheets>
-                        <nine-table-sheets-body></nine-table-sheets-body>
-                        <nine-table-sheets-footer>
-                            <div class="nine-tab-bar"></div>
-                            <div class="sheets-counter">Total : <span id="row-count">0</span></div>
-                        </nine-table-sheets-footer>
-                    </nine-table-sheets>
-                    
-                    <nine-table-analysis></nine-table-analysis>
-                </nine-table-body>
-
-                <!-- 3. 하단 컴포넌트 -->
-                <nine-table-footer>
-                    <div class="footer-left">Ready</div>
-                    <div class="footer-right">Status: OK</div>
-                </nine-table-footer>
-            </div>
-        `},"#renderShell"),R=a(function(){this.sidebarLeft=o(this,s).querySelector("nine-table-summary"),this.sheetsBody=o(this,s).querySelector("nine-table-sheets-body"),this.sidebarRight=o(this,s).querySelector("nine-table-analysis"),this.tabBar=o(this,s).querySelector(".nine-tab-bar"),this.rowCountEl=o(this,s).querySelector("#row-count")},"#bindElements"),a(C,"TableView");let f=C;const q=class q{constructor(i){d(this,p);d(this,v);y(this,v,i)}initializeTable(i){return m(this,p,A).call(this,i),m(this,p,j).call(this,i),i.classList.add("nine-table-element"),i}};v=new WeakMap,p=new WeakSet,A=a(function(i){var h;if(i.querySelector("colgroup"))return;const l=((h=i.querySelector("tbody tr"))==null?void 0:h.querySelectorAll("th, td").length)||1,r=document.createElement("colgroup"),L=Math.max(Math.floor((i.clientWidth||600)/l),100);for(let b=0;b<l;b++){const M=document.createElement("col");M.setAttribute("width",L),r.appendChild(M)}i.prepend(r)},"#ensureColgroup"),j=a(function(i){if(i.querySelector("thead"))return;const l=document.createElement("thead"),r=i.querySelector("colgroup");r?r.after(l):i.prepend(l)},"#ensureThead"),a(q,"TableInitializer");let k=q;const T=class T extends HTMLElement{constructor(){super();d(this,x,!1);d(this,g,[]);this.attachShadow({mode:"open"})}connectedCallback(){if(o(this,x))return;this.querySelectorAll("table").forEach(r=>{const h=new k(this).initializeTable(r);o(this,g).push(h),r.style.display="none"}),this.view=new f(this,o(this,g)),this.view.init(),y(this,x,!0),n.log("NineTable connected and layout initialized."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}}))}disconnectedCallback(){this.view&&this.view.destroy(),n.log("NineTable disconnected.")}};x=new WeakMap,g=new WeakMap,a(T,"NineTable");let S=T;customElements.get("nine-table")||customElements.define("nine-table",S)});
+            <nine-table-header></nine-table-header>
+            <nine-table-body>
+                <nine-table-summary></nine-table-summary>
+                <nine-table-sheets>
+                    <nine-table-sheets-body>
+                        ${a}
+                    </nine-table-sheets-body>
+                    <nine-table-sheets-footer>
+                        <div class="nine-tab-bar">
+                            ${s}
+                        </div>
+                        <div class="sheets-counter">Total : <span id="row-count">${h.toLocaleString()}</span></div>
+                    </nine-table-sheets-footer>
+                </nine-table-sheets>
+                <nine-table-analysis></nine-table-analysis>
+            </nine-table-body>
+            <nine-table-footer></nine-table-footer>
+        `},"#renderLayoutShell"),S=d(function(){this.sheetsBody=i(this,l).querySelector("nine-table-sheets-body"),this.tabBar=i(this,l).querySelector(".nine-tab-bar"),this.tabBar.addEventListener("click",a=>{const s=a.target.closest(".nine-tab-item");s&&this.switchTab(parseInt(s.dataset.index,10))})},"#bindElements"),q=d(function(){this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((s,h)=>{i(this,o)[h]&&s.init(i(this,o)[h])})},"#initSheets"),d(g,"LayoutManager");let b=g;const x=class x extends HTMLElement{constructor(){super();p(this,f,!1);this.attachShadow({mode:"open"})}connectedCallback(){i(this,f)||(this.layoutManager=new b(this.shadowRoot),this.layoutManager.render(),w(this,f,!0),n.log("NineTable connected."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}})))}disconnectedCallback(){n.log("NineTable disconnected.")}};f=new WeakMap,d(x,"NineTable");let y=x;customElements.get("nine-table")||customElements.define("nine-table",y)});
 //# sourceMappingURL=nine-table.umd.js.map

package/dist/nine-table.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","import {trace} from \"@nopeer\";\n\nexport class TableView {\n    #container;\n    #layouts;\n    #shadowRoot;\n\n    constructor(container, layouts) {\n        this.#container = container;\n        this.#layouts = layouts;\n        this.#shadowRoot = container.shadowRoot;\n    }\n\n    init() {\n        this.#renderShell();\n        this.#bindElements();\n\n        if (this.#layouts.length > 0) {\n            this.renderTable(0);\n        }\n        trace.log('TableView initialized with nine-table-analysis component.');\n    }\n\n    #renderShell() {\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: block; position: relative; overflow: hidden; height: 100%; }\n                \n                /* 최외곽 루트 구조: 상단 - 바디 - 하단 */\n                .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n                \n                nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n                \n                /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */\n                nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n                \n                nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n                \n                /* 중앙 시트 컨테이너 영역 */\n                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n                \n                nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n                \n                /* 하단 탭 버튼 및 카운터 영역 */\n                nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n                \n                .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n                .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n                .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n\n                .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n                nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n                \n                /* 최하단 전체 상태 바 */\n                nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }\n\n                table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n            </style>\n            \n            <div class=\"nine-table-root\">\n                <!-- 1. 상단 컴포넌트 -->\n                <nine-table-header></nine-table-header>\n\n                <!-- 2. 메인 바디 컴포넌트 -->\n                <nine-table-body>\n                    <nine-table-summary></nine-table-summary>\n                    \n                    <nine-table-sheets>\n                        <nine-table-sheets-body></nine-table-sheets-body>\n                        <nine-table-sheets-footer>\n                            <div class=\"nine-tab-bar\"></div>\n                            <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n                        </nine-table-sheets-footer>\n                    </nine-table-sheets>\n                    \n                    <nine-table-analysis></nine-table-analysis>\n                </nine-table-body>\n\n                <!-- 3. 하단 컴포넌트 -->\n                <nine-table-footer>\n                    <div class=\"footer-left\">Ready</div>\n                    <div class=\"footer-right\">Status: OK</div>\n                </nine-table-footer>\n            </div>\n        `;\n    }\n\n    #bindElements() {\n        this.sidebarLeft = this.#shadowRoot.querySelector('nine-table-summary');\n        this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n        this.sidebarRight = this.#shadowRoot.querySelector('nine-table-analysis');\n        this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n        this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n    }\n\n    renderTable(index) {\n        if (!this.#layouts[index]) return;\n\n        this.tabBar.innerHTML = '';\n        this.#layouts.forEach((_, idx) => {\n            const tab = document.createElement('div');\n            tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n            tab.textContent = `Sheet ${idx + 1}`;\n            tab.addEventListener('click', () => this.renderTable(idx));\n            this.tabBar.appendChild(tab);\n        });\n\n        this.sheetsBody.innerHTML = '';\n        const currentTable = this.#layouts[index].cloneNode(true);\n        this.sheetsBody.appendChild(currentTable);\n\n        const rowCount = currentTable.querySelectorAll('tbody tr').length;\n        if (this.rowCountEl) {\n            this.rowCountEl.textContent = rowCount.toLocaleString();\n        }\n\n        trace.log(`Rendered sheets tab index: ${index}`);\n    }\n\n    destroy() {\n        this.#shadowRoot.innerHTML = '';\n        trace.log('TableView destroyed.');\n    }\n}","export class TableInitializer {\n    #container;\n\n    constructor(container) {\n        this.#container = container;\n    }\n\n    // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n    initializeTable(tbl) {\n        this.#ensureColgroup(tbl);\n        this.#ensureThead(tbl);\n\n        tbl.classList.add('nine-table-element');\n        return tbl;\n    }\n\n    // [Private] colgroup 보정\n    #ensureColgroup(tbl) {\n        if (tbl.querySelector('colgroup')) return;\n\n        const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n        const colgroup = document.createElement('colgroup');\n        const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n        for (let i = 0; i < colCount; i++) {\n            const col = document.createElement('col');\n            col.setAttribute('width', defaultWidth);\n            colgroup.appendChild(col);\n        }\n        tbl.prepend(colgroup);\n    }\n\n    // [Private] thead 보정\n    #ensureThead(tbl) {\n        if (tbl.querySelector('thead')) return;\n\n        const thead = document.createElement('thead');\n        const colgroup = tbl.querySelector('colgroup');\n        if (colgroup) {\n            colgroup.after(thead);\n        } else {\n            tbl.prepend(thead);\n        }\n    }\n}","import {trace} from \"@nopeer\";\nimport { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n    #layouts = [];\n\n    constructor() {\n        super();\n        // 최외곽 컴포넌트에만 Shadow DOM 적용\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // 1. 컴포넌트 내부의 원본 table 태그들 수집\n        const tables = this.querySelectorAll('table');\n        tables.forEach(tbl => {\n            const initializer = new TableInitializer(this);\n            const processedTbl = initializer.initializeTable(tbl);\n            this.#layouts.push(processedTbl);\n            tbl.style.display = 'none'; // 원본 숨김\n        });\n\n        // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n        this.view = new TableView(this, this.#layouts);\n        this.view.init();\n\n        this.#created = true;\n        trace.log('NineTable connected and layout initialized.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        if (this.view) {\n            this.view.destroy();\n        }\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"8tBAEO,MAAMA,EAAN,MAAMA,UAAcC,EAAAA,MAAY,WAAY,CAC/C,aAAc,CACV,MAAK,EACL,KAAK,KAAK,aAAc,OAAO,CACnC,CACJ,EALmDC,EAAAF,EAAA,SAA5C,IAAMG,EAANH,EAOA,MAAMI,EAAQ,IAAID,ECPZE,EAAN,MAAMA,CAAU,CAKnB,YAAYC,EAAWC,EAAS,CAL7BC,EAAA,KAAAC,GACHD,EAAA,KAAAE,GACAF,EAAA,KAAAG,GACAH,EAAA,KAAAI,GAGIC,EAAA,KAAKH,EAAaJ,GAClBO,EAAA,KAAKF,EAAWJ,GAChBM,EAAA,KAAKD,EAAcN,EAAU,WACjC,CAEA,MAAO,CACHQ,EAAA,KAAKL,EAAAM,GAAL,WACAD,EAAA,KAAKL,EAAAO,GAAL,WAEIC,EAAA,KAAKN,GAAS,OAAS,GACvB,KAAK,YAAY,CAAC,EAEtBP,EAAM,IAAI,2DAA2D,CACzE,CA4EA,YAAYc,EAAO,CACf,GAAI,CAACD,EAAA,KAAKN,GAASO,CAAK,EAAG,OAE3B,KAAK,OAAO,UAAY,GACxBD,EAAA,KAAKN,GAAS,QAAQ,CAACQ,EAAGC,IAAQ,CAC9B,MAAMC,EAAM,SAAS,cAAc,KAAK,EACxCA,EAAI,UAAY,iBAAiBD,IAAQF,EAAQ,SAAW,EAAE,GAC9DG,EAAI,YAAc,SAASD,EAAM,CAAC,GAClCC,EAAI,iBAAiB,QAAS,IAAM,KAAK,YAAYD,CAAG,CAAC,EACzD,KAAK,OAAO,YAAYC,CAAG,CAC/B,CAAC,EAED,KAAK,WAAW,UAAY,GAC5B,MAAMC,EAAeL,EAAA,KAAKN,GAASO,CAAK,EAAE,UAAU,EAAI,EACxD,KAAK,WAAW,YAAYI,CAAY,EAExC,MAAMC,EAAWD,EAAa,iBAAiB,UAAU,EAAE,OACvD,KAAK,aACL,KAAK,WAAW,YAAcC,EAAS,eAAc,GAGzDnB,EAAM,IAAI,8BAA8Bc,CAAK,EAAE,CACnD,CAEA,SAAU,CACND,EAAA,KAAKL,GAAY,UAAY,GAC7BR,EAAM,IAAI,sBAAsB,CACpC,CACJ,EA1HIM,EAAA,YACAC,EAAA,YACAC,EAAA,YAHGH,EAAA,YAqBHM,EAAYb,EAAA,UAAG,CACXe,EAAA,KAAKL,GAAY,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA+DjC,EAhEY,gBAkEZI,EAAad,EAAA,UAAG,CACZ,KAAK,YAAce,EAAA,KAAKL,GAAY,cAAc,oBAAoB,EACtE,KAAK,WAAaK,EAAA,KAAKL,GAAY,cAAc,wBAAwB,EACzE,KAAK,aAAeK,EAAA,KAAKL,GAAY,cAAc,qBAAqB,EACxE,KAAK,OAASK,EAAA,KAAKL,GAAY,cAAc,eAAe,EAC5D,KAAK,WAAaK,EAAA,KAAKL,GAAY,cAAc,YAAY,CACjE,EANa,iBAvFMV,EAAAG,EAAA,aAAhB,IAAMmB,EAANnB,ECFA,MAAMoB,EAAN,MAAMA,CAAiB,CAG1B,YAAYnB,EAAW,CAHpBE,EAAA,KAAAkB,GACHlB,EAAA,KAAAE,GAGIG,EAAA,KAAKH,EAAaJ,EACtB,CAGA,gBAAgBqB,EAAK,CACjB,OAAAb,EAAA,KAAKY,EAAAE,GAAL,UAAqBD,GACrBb,EAAA,KAAKY,EAAAG,GAAL,UAAkBF,GAElBA,EAAI,UAAU,IAAI,oBAAoB,EAC/BA,CACX,CA8BJ,EA3CIjB,EAAA,YADGgB,EAAA,YAiBHE,EAAe1B,EAAA,SAACyB,EAAK,OACjB,GAAIA,EAAI,cAAc,UAAU,EAAG,OAEnC,MAAMG,IAAWC,EAAAJ,EAAI,cAAc,UAAU,IAA5B,YAAAI,EAA+B,iBAAiB,UAAU,SAAU,EAC/EC,EAAW,SAAS,cAAc,UAAU,EAC5CC,EAAe,KAAK,IAAI,KAAK,OAAON,EAAI,aAAe,KAAOG,CAAQ,EAAG,GAAG,EAElF,QAASI,EAAI,EAAGA,EAAIJ,EAAUI,IAAK,CAC/B,MAAMC,EAAM,SAAS,cAAc,KAAK,EACxCA,EAAI,aAAa,QAASF,CAAY,EACtCD,EAAS,YAAYG,CAAG,CAC5B,CACAR,EAAI,QAAQK,CAAQ,CACxB,EAbe,mBAgBfH,EAAY3B,EAAA,SAACyB,EAAK,CACd,GAAIA,EAAI,cAAc,OAAO,EAAG,OAEhC,MAAMS,EAAQ,SAAS,cAAc,OAAO,EACtCJ,EAAWL,EAAI,cAAc,UAAU,EACzCK,EACAA,EAAS,MAAMI,CAAK,EAEpBT,EAAI,QAAQS,CAAK,CAEzB,EAVY,gBAjCclC,EAAAuB,EAAA,oBAAvB,IAAMY,EAANZ,ECIQ,MAAMa,EAAN,MAAMA,UAAkB,WAAY,CAI/C,aAAc,CACV,MAAK,EAJT9B,EAAA,KAAA+B,EAAW,IACX/B,EAAA,KAAAG,EAAW,CAAA,GAKP,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,CACtC,CAEA,mBAAoB,CAChB,GAAIM,EAAA,KAAKsB,GAAU,OAGJ,KAAK,iBAAiB,OAAO,EACrC,QAAQZ,GAAO,CAElB,MAAMa,EADc,IAAIH,EAAiB,IAAI,EACZ,gBAAgBV,CAAG,EACpDV,EAAA,KAAKN,GAAS,KAAK6B,CAAY,EAC/Bb,EAAI,MAAM,QAAU,MACxB,CAAC,EAGD,KAAK,KAAO,IAAIH,EAAU,KAAMP,EAAA,KAAKN,EAAQ,EAC7C,KAAK,KAAK,KAAI,EAEdE,EAAA,KAAK0B,EAAW,IAChBnC,EAAM,IAAI,6CAA6C,EAEvD,KAAK,cAAc,IAAI,YAAY,OAAQ,CAAE,QAAS,GAAM,OAAQ,CAAE,OAAQ,IAAI,CAAE,CAAE,CAAC,CAC3F,CAEA,sBAAuB,CACf,KAAK,MACL,KAAK,KAAK,QAAO,EAErBA,EAAM,IAAI,yBAAyB,CACvC,CACJ,EArCImC,EAAA,YACA5B,EAAA,YAF+CT,EAAAoC,EAAA,aAApC,IAAMG,EAANH,EAwCV,eAAe,IAAI,YAAY,GAChC,eAAe,OAAO,aAAcG,CAAS"}
+{"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","//import './nine-table-sheet.js';\n\nexport class LayoutManager {\n    #shadowRoot;\n    #tables = [];\n\n    constructor(shadowRoot) {\n        this.#shadowRoot = shadowRoot;\n    }\n\n    render() {\n        // shadowRoot 내부(또는 호스트 범위)에서 table 태그들을 수집 후 숨김 처리\n        const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n        rawTables.forEach(tbl => {\n            this.#tables.push(tbl);\n            tbl.style.display = 'none';\n        });\n\n        this.#renderLayoutShell();\n        this.#bindElements();\n        this.#initSheets();\n\n        if (this.#tables.length > 0) {\n            this.switchTab(0);\n        }\n    }\n\n    #renderLayoutShell() {\n        const sheetsHtml = this.#tables.map((_, idx) => `\n            <nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>\n        `).join('');\n\n        const tabsHtml = this.#tables.map((_, idx) => `\n            <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n        `).join('');\n\n        const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n                nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n                nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n                nine-table-summary { display: none; }\n                nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n                nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n                \n                nine-table-sheet { display: none; width: 100%; height: 100%; }\n                nine-table-sheet.active { display: block; }\n\n                nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n                .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n                .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n                .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n                .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n                nine-table-analysis { display: none; }\n                nine-table-footer { display: none; }\n            </style>\n            \n            <nine-table-header></nine-table-header>\n            <nine-table-body>\n                <nine-table-summary></nine-table-summary>\n                <nine-table-sheets>\n                    <nine-table-sheets-body>\n                        ${sheetsHtml}\n                    </nine-table-sheets-body>\n                    <nine-table-sheets-footer>\n                        <div class=\"nine-tab-bar\">\n                            ${tabsHtml}\n                        </div>\n                        <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n                    </nine-table-sheets-footer>\n                </nine-table-sheets>\n                <nine-table-analysis></nine-table-analysis>\n            </nine-table-body>\n            <nine-table-footer></nine-table-footer>\n        `;\n    }\n\n    #bindElements() {\n        this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n        this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n        this.tabBar.addEventListener('click', (e) => {\n            const tabItem = e.target.closest('.nine-tab-item');\n            if (!tabItem) return;\n            this.switchTab(parseInt(tabItem.dataset.index, 10));\n        });\n    }\n\n    #initSheets() {\n        const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n        sheetElements.forEach((sheetEl, idx) => {\n            if (this.#tables[idx]) {\n                sheetEl.init(this.#tables[idx]);\n            }\n        });\n    }\n\n    switchTab(index) {\n        if (!this.#tables[index]) return;\n\n        this.tabBar.querySelectorAll('.nine-tab-item').forEach((tab, idx) => {\n            tab.classList.toggle('active', idx === index);\n        });\n\n        this.sheetsBody.querySelectorAll('nine-table-sheet').forEach((sheet, idx) => {\n            sheet.classList.toggle('active', idx === index);\n        });\n    }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n        this.layoutManager = new LayoutManager(this.shadowRoot);\n        this.layoutManager.render();\n\n        this.#created = true;\n        trace.log('NineTable connected.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_LayoutManager","shadowRoot","__privateAdd","_LayoutManager_instances","_shadowRoot","_tables","__privateSet","__privateGet","tbl","__privateMethod","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","e","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninebone/table",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Grid component for real-time collaboration (Vanilla JS based)",
   "type": "module",
   "main": "./dist/nine-table.umd.js",