open-grid 0.2.0

package/dist/open-grid-themes.css

@@ -0,0 +1,630 @@
+/* ============================================================
+   OPEN_GRID — 12가지 테마 정의
+   사용법: <div data-og-theme="ocean"> 또는 grid.setTheme('ocean')
+   ============================================================ */
+
+/* ──────────────────────────────────────────────────────────
+   1. default  (Light Blue — 기본)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="default"],
+:root {
+  --og-primary:            #1976d2;
+  --og-primary-light:      #e3f2fd;
+  --og-primary-dark:       #1565c0;
+  --og-header-bg:          #f5f5f5;
+  --og-header-color:       #333333;
+  --og-header-hover-bg:    #ebebeb;
+  --og-header-sort-color:  #1976d2;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #fafafa;
+  --og-row-hover-bg:       #e3f2fd;
+  --og-row-color:          #212121;
+  --og-row-selected-bg:    #bbdefb;
+  --og-row-selected-color: #0d47a1;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #b71c1c;
+  --og-group-bg:           #e8eaf6;
+  --og-group-color:        #283593;
+  --og-group-border:       #c5cae9;
+  --og-tree-toggle-color:  #555555;
+  --og-tree-line-color:    #d0d0d0;
+  --og-tree-folder-color:  #f9a825;
+  --og-tree-file-color:    #78909c;
+  --og-tree-indent-guide:  #e0e0e0;
+  --og-merge-bg:           #fff9c4;
+  --og-merge-border:       #f9a825;
+  --og-border-color:       #e0e0e0;
+  --og-focus-border:       #1976d2;
+  --og-pagination-bg:      #ffffff;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#333333;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #212121;
+  --og-input-border:       #1976d2;
+  --og-filter-bg:          #ffffff;
+  --og-filter-color:       #212121;
+}
+
+/* ──────────────────────────────────────────────────────────
+   2. dark  (다크)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="dark"] {
+  --og-primary:            #90caf9;
+  --og-primary-light:      #1a237e;
+  --og-primary-dark:       #42a5f5;
+  --og-header-bg:          #1e1e1e;
+  --og-header-color:       #e0e0e0;
+  --og-header-hover-bg:    #2a2a2a;
+  --og-header-sort-color:  #90caf9;
+  --og-row-bg:             #2d2d2d;
+  --og-row-alt-bg:         #252525;
+  --og-row-hover-bg:       #3a3a5c;
+  --og-row-color:          #e0e0e0;
+  --og-row-selected-bg:    #283593;
+  --og-row-selected-color: #e3f2fd;
+  --og-row-added-bg:       #1b5e20;
+  --og-row-added-color:    #a5d6a7;
+  --og-row-edited-bg:      #4e342e;
+  --og-row-edited-color:   #ffcc80;
+  --og-row-removed-bg:     #b71c1c;
+  --og-row-removed-color:  #ffcdd2;
+  --og-group-bg:           #1a237e;
+  --og-group-color:        #c5cae9;
+  --og-group-border:       #283593;
+  --og-tree-toggle-color:  #90caf9;
+  --og-tree-line-color:         #555555;
+  --og-tree-folder-color:       #ffca28;  /* 열림: bright amber */
+  --og-tree-folder-closed-color: #546e7a;  /* 닫힘: dark blue-gray */
+  --og-tree-file-color:    #90a4ae;
+  --og-tree-indent-guide:  #555555;
+  --og-merge-bg:           #3e2723;
+  --og-merge-border:       #ff8f00;
+  --og-border-color:       #444444;
+  --og-focus-border:       #90caf9;
+  --og-pagination-bg:      #1e1e1e;
+  --og-pagination-btn-bg:  #2d2d2d;
+  --og-pagination-btn-color:#e0e0e0;
+  --og-input-bg:           #1e1e1e;
+  --og-input-color:        #e0e0e0;
+  --og-input-border:       #90caf9;
+  --og-filter-bg:          #2d2d2d;
+  --og-filter-color:       #e0e0e0;
+}
+[data-og-theme="dark"] .og-empty-message  { color: #757575; }
+[data-og-theme="dark"] .og-loading-mask   { background: rgba(30,30,30,0.75); }
+[data-og-theme="dark"] { --og-spinner-track: rgba(255,255,255,0.15); }
+
+/* ──────────────────────────────────────────────────────────
+   3. ocean  (오션 — 깊은 파란 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="ocean"] {
+  --og-primary:            #0288d1;
+  --og-primary-light:      #e1f5fe;
+  --og-primary-dark:       #0277bd;
+  --og-header-bg:          #e1f5fe;
+  --og-header-color:       #01579b;
+  --og-header-hover-bg:    #b3e5fc;
+  --og-header-sort-color:  #0277bd;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #f0f9ff;
+  --og-row-hover-bg:       #b3e5fc;
+  --og-row-color:          #01579b;
+  --og-row-selected-bg:    #0288d1;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e0f2f1;
+  --og-row-added-color:    #004d40;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #fce4ec;
+  --og-row-removed-color:  #880e4f;
+  --og-group-bg:           #b3e5fc;
+  --og-group-color:        #01579b;
+  --og-group-border:       #81d4fa;
+  --og-tree-toggle-color:  #0288d1;
+  --og-tree-line-color:    #b3e5fc;
+  --og-tree-indent-guide:  #b3e5fc;
+  --og-merge-bg:           #e0f7fa;
+  --og-merge-border:       #00acc1;
+  --og-border-color:       #b3e5fc;
+  --og-focus-border:       #0288d1;
+  --og-pagination-bg:      #e1f5fe;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#01579b;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #01579b;
+  --og-input-border:       #0288d1;
+  --og-filter-bg:          #e1f5fe;
+  --og-filter-color:       #01579b;
+}
+
+/* ──────────────────────────────────────────────────────────
+   4. forest  (포레스트 — 녹색 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="forest"] {
+  --og-primary:            #388e3c;
+  --og-primary-light:      #e8f5e9;
+  --og-primary-dark:       #2e7d32;
+  --og-header-bg:          #e8f5e9;
+  --og-header-color:       #1b5e20;
+  --og-header-hover-bg:    #c8e6c9;
+  --og-header-sort-color:  #2e7d32;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #f1f8f1;
+  --og-row-hover-bg:       #c8e6c9;
+  --og-row-color:          #1b5e20;
+  --og-row-selected-bg:    #388e3c;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #dcedc8;
+  --og-row-added-color:    #33691e;
+  --og-row-edited-bg:      #fff9c4;
+  --og-row-edited-color:   #f57f17;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #c62828;
+  --og-group-bg:           #c8e6c9;
+  --og-group-color:        #1b5e20;
+  --og-group-border:       #a5d6a7;
+  --og-tree-toggle-color:  #388e3c;
+  --og-tree-line-color:    #c8e6c9;
+  --og-tree-indent-guide:  #c8e6c9;
+  --og-merge-bg:           #f9fbe7;
+  --og-merge-border:       #aed581;
+  --og-border-color:       #c8e6c9;
+  --og-focus-border:       #388e3c;
+  --og-pagination-bg:      #e8f5e9;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#1b5e20;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #1b5e20;
+  --og-input-border:       #388e3c;
+  --og-filter-bg:          #e8f5e9;
+  --og-filter-color:       #1b5e20;
+}
+
+/* ──────────────────────────────────────────────────────────
+   5. sunset  (선셋 — 주황/따뜻한 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="sunset"] {
+  --og-primary:            #f4511e;
+  --og-primary-light:      #fbe9e7;
+  --og-primary-dark:       #d84315;
+  --og-header-bg:          #fbe9e7;
+  --og-header-color:       #bf360c;
+  --og-header-hover-bg:    #ffccbc;
+  --og-header-sort-color:  #d84315;
+  --og-row-bg:             #fffdf9;
+  --og-row-alt-bg:         #fff8f5;
+  --og-row-hover-bg:       #ffe0b2;
+  --og-row-color:          #4e2a12;
+  --og-row-selected-bg:    #f4511e;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #f9fbe7;
+  --og-row-added-color:    #558b2f;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #fce4ec;
+  --og-row-removed-color:  #880e4f;
+  --og-group-bg:           #ffe0b2;
+  --og-group-color:        #bf360c;
+  --og-group-border:       #ffcc80;
+  --og-tree-toggle-color:  #f4511e;
+  --og-tree-line-color:    #ffe0b2;
+  --og-tree-indent-guide:  #ffe0b2;
+  --og-merge-bg:           #fff9c4;
+  --og-merge-border:       #ffa000;
+  --og-border-color:       #ffccbc;
+  --og-focus-border:       #f4511e;
+  --og-pagination-bg:      #fbe9e7;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#bf360c;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #4e2a12;
+  --og-input-border:       #f4511e;
+  --og-filter-bg:          #fbe9e7;
+  --og-filter-color:       #bf360c;
+}
+
+/* ──────────────────────────────────────────────────────────
+   6. purple  (퍼플 — 보라 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="purple"] {
+  --og-primary:            #7b1fa2;
+  --og-primary-light:      #f3e5f5;
+  --og-primary-dark:       #6a1b9a;
+  --og-header-bg:          #f3e5f5;
+  --og-header-color:       #4a148c;
+  --og-header-hover-bg:    #e1bee7;
+  --og-header-sort-color:  #6a1b9a;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #fdf5ff;
+  --og-row-hover-bg:       #e1bee7;
+  --og-row-color:          #311b44;
+  --og-row-selected-bg:    #7b1fa2;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #b71c1c;
+  --og-group-bg:           #e1bee7;
+  --og-group-color:        #4a148c;
+  --og-group-border:       #ce93d8;
+  --og-tree-toggle-color:  #7b1fa2;
+  --og-tree-line-color:    #e1bee7;
+  --og-tree-indent-guide:  #e1bee7;
+  --og-merge-bg:           #fce4ec;
+  --og-merge-border:       #ad1457;
+  --og-border-color:       #e1bee7;
+  --og-focus-border:       #7b1fa2;
+  --og-pagination-bg:      #f3e5f5;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#4a148c;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #311b44;
+  --og-input-border:       #7b1fa2;
+  --og-filter-bg:          #f3e5f5;
+  --og-filter-color:       #4a148c;
+}
+
+/* ──────────────────────────────────────────────────────────
+   7. rose  (로즈 — 분홍/핑크 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="rose"] {
+  --og-primary:            #e91e63;
+  --og-primary-light:      #fce4ec;
+  --og-primary-dark:       #c2185b;
+  --og-header-bg:          #fce4ec;
+  --og-header-color:       #880e4f;
+  --og-header-hover-bg:    #f8bbd0;
+  --og-header-sort-color:  #c2185b;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #fff5f8;
+  --og-row-hover-bg:       #f8bbd0;
+  --og-row-color:          #4a0021;
+  --og-row-selected-bg:    #e91e63;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #fce4ec;
+  --og-row-removed-color:  #880e4f;
+  --og-group-bg:           #f8bbd0;
+  --og-group-color:        #880e4f;
+  --og-group-border:       #f48fb1;
+  --og-tree-toggle-color:  #e91e63;
+  --og-tree-line-color:    #f8bbd0;
+  --og-tree-indent-guide:  #f8bbd0;
+  --og-merge-bg:           #fff3e0;
+  --og-merge-border:       #fb8c00;
+  --og-border-color:       #f8bbd0;
+  --og-focus-border:       #e91e63;
+  --og-pagination-bg:      #fce4ec;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#880e4f;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #4a0021;
+  --og-input-border:       #e91e63;
+  --og-filter-bg:          #fce4ec;
+  --og-filter-color:       #880e4f;
+}
+
+/* ──────────────────────────────────────────────────────────
+   8. teal  (틸 — 청록 계열)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="teal"] {
+  --og-primary:            #00897b;
+  --og-primary-light:      #e0f2f1;
+  --og-primary-dark:       #00695c;
+  --og-header-bg:          #e0f2f1;
+  --og-header-color:       #004d40;
+  --og-header-hover-bg:    #b2dfdb;
+  --og-header-sort-color:  #00695c;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #f0faf9;
+  --og-row-hover-bg:       #b2dfdb;
+  --og-row-color:          #00251a;
+  --og-row-selected-bg:    #00897b;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #f9fbe7;
+  --og-row-added-color:    #33691e;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #b71c1c;
+  --og-group-bg:           #b2dfdb;
+  --og-group-color:        #004d40;
+  --og-group-border:       #80cbc4;
+  --og-tree-toggle-color:  #00897b;
+  --og-tree-line-color:    #b2dfdb;
+  --og-tree-indent-guide:  #b2dfdb;
+  --og-merge-bg:           #e0f7fa;
+  --og-merge-border:       #0097a7;
+  --og-border-color:       #b2dfdb;
+  --og-focus-border:       #00897b;
+  --og-pagination-bg:      #e0f2f1;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#004d40;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #00251a;
+  --og-input-border:       #00897b;
+  --og-filter-bg:          #e0f2f1;
+  --og-filter-color:       #004d40;
+}
+
+/* ──────────────────────────────────────────────────────────
+   9. indigo  (인디고 — 짙은 남색)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="indigo"] {
+  --og-primary:            #3949ab;
+  --og-primary-light:      #e8eaf6;
+  --og-primary-dark:       #283593;
+  --og-header-bg:          #e8eaf6;
+  --og-header-color:       #1a237e;
+  --og-header-hover-bg:    #c5cae9;
+  --og-header-sort-color:  #283593;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #f5f6ff;
+  --og-row-hover-bg:       #c5cae9;
+  --og-row-color:          #1a237e;
+  --og-row-selected-bg:    #3949ab;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #b71c1c;
+  --og-group-bg:           #c5cae9;
+  --og-group-color:        #1a237e;
+  --og-group-border:       #9fa8da;
+  --og-tree-toggle-color:  #3949ab;
+  --og-tree-line-color:    #c5cae9;
+  --og-tree-indent-guide:  #c5cae9;
+  --og-merge-bg:           #ede7f6;
+  --og-merge-border:       #7e57c2;
+  --og-border-color:       #c5cae9;
+  --og-focus-border:       #3949ab;
+  --og-pagination-bg:      #e8eaf6;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#1a237e;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #1a237e;
+  --og-input-border:       #3949ab;
+  --og-filter-bg:          #e8eaf6;
+  --og-filter-color:       #1a237e;
+}
+
+/* ──────────────────────────────────────────────────────────
+   10. amber  (앰버 — 황금/호박색)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="amber"] {
+  --og-primary:            #ffa000;
+  --og-primary-light:      #fff8e1;
+  --og-primary-dark:       #ff8f00;
+  --og-header-bg:          #fff8e1;
+  --og-header-color:       #6d4c00;
+  --og-header-hover-bg:    #ffecb3;
+  --og-header-sort-color:  #ff8f00;
+  --og-row-bg:             #fffdf5;
+  --og-row-alt-bg:         #fffbee;
+  --og-row-hover-bg:       #ffecb3;
+  --og-row-color:          #4e3300;
+  --og-row-selected-bg:    #ffa000;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #ffe082;
+  --og-row-edited-color:   #5d4037;
+  --og-row-removed-bg:     #ffebee;
+  --og-row-removed-color:  #b71c1c;
+  --og-group-bg:           #ffecb3;
+  --og-group-color:        #6d4c00;
+  --og-group-border:       #ffe082;
+  --og-tree-toggle-color:  #ffa000;
+  --og-tree-line-color:    #ffecb3;
+  --og-tree-indent-guide:  #ffecb3;
+  --og-merge-bg:           #fff3e0;
+  --og-merge-border:       #fb8c00;
+  --og-border-color:       #ffecb3;
+  --og-focus-border:       #ffa000;
+  --og-pagination-bg:      #fff8e1;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#6d4c00;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #4e3300;
+  --og-input-border:       #ffa000;
+  --og-filter-bg:          #fff8e1;
+  --og-filter-color:       #6d4c00;
+}
+
+/* ──────────────────────────────────────────────────────────
+   11. slate  (슬레이트 — 어두운 회색, 다크 변형)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="slate"] {
+  --og-primary:            #546e7a;
+  --og-primary-light:      #90a4ae;
+  --og-primary-dark:       #37474f;
+  --og-header-bg:          #263238;
+  --og-header-color:       #eceff1;
+  --og-header-hover-bg:    #37474f;
+  --og-header-sort-color:  #80cbc4;
+  --og-row-bg:             #37474f;
+  --og-row-alt-bg:         #2e3d44;
+  --og-row-hover-bg:       #455a64;
+  --og-row-color:          #eceff1;
+  --og-row-selected-bg:    #546e7a;
+  --og-row-selected-color: #eceff1;
+  --og-row-added-bg:       #1b5e20;
+  --og-row-added-color:    #a5d6a7;
+  --og-row-edited-bg:      #4e342e;
+  --og-row-edited-color:   #ffcc80;
+  --og-row-removed-bg:     #b71c1c;
+  --og-row-removed-color:  #ffcdd2;
+  --og-group-bg:           #263238;
+  --og-group-color:        #b0bec5;
+  --og-group-border:       #37474f;
+  --og-tree-toggle-color:  #80cbc4;
+  --og-tree-line-color:    #546e7a;
+  --og-tree-indent-guide:  #546e7a;
+  --og-merge-bg:           #3e2723;
+  --og-merge-border:       #ff8f00;
+  --og-border-color:       #455a64;
+  --og-focus-border:       #80cbc4;
+  --og-pagination-bg:      #263238;
+  --og-pagination-btn-bg:  #37474f;
+  --og-pagination-btn-color:#eceff1;
+  --og-input-bg:           #263238;
+  --og-input-color:        #eceff1;
+  --og-input-border:       #80cbc4;
+  --og-filter-bg:          #37474f;
+  --og-filter-color:       #eceff1;
+}
+[data-og-theme="slate"] .og-loading-mask { background: rgba(38,50,56,0.8); }
+[data-og-theme="slate"] { --og-spinner-track: rgba(255,255,255,0.15); }
+
+/* ──────────────────────────────────────────────────────────
+   12. crimson  (크림슨 — 진한 빨강)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="crimson"] {
+  --og-primary:            #c62828;
+  --og-primary-light:      #ffebee;
+  --og-primary-dark:       #b71c1c;
+  --og-header-bg:          #ffebee;
+  --og-header-color:       #7f0000;
+  --og-header-hover-bg:    #ffcdd2;
+  --og-header-sort-color:  #b71c1c;
+  --og-row-bg:             #ffffff;
+  --og-row-alt-bg:         #fff5f5;
+  --og-row-hover-bg:       #ffcdd2;
+  --og-row-color:          #4a0000;
+  --og-row-selected-bg:    #c62828;
+  --og-row-selected-color: #ffffff;
+  --og-row-added-bg:       #e8f5e9;
+  --og-row-added-color:    #1b5e20;
+  --og-row-edited-bg:      #fff8e1;
+  --og-row-edited-color:   #e65100;
+  --og-row-removed-bg:     #b71c1c;
+  --og-row-removed-color:  #ffcdd2;
+  --og-group-bg:           #ffcdd2;
+  --og-group-color:        #7f0000;
+  --og-group-border:       #ef9a9a;
+  --og-tree-toggle-color:  #c62828;
+  --og-tree-line-color:    #ffcdd2;
+  --og-tree-indent-guide:  #ffcdd2;
+  --og-merge-bg:           #fce4ec;
+  --og-merge-border:       #ad1457;
+  --og-border-color:       #ffcdd2;
+  --og-focus-border:       #c62828;
+  --og-pagination-bg:      #ffebee;
+  --og-pagination-btn-bg:  #ffffff;
+  --og-pagination-btn-color:#7f0000;
+  --og-input-bg:           #ffffff;
+  --og-input-color:        #4a0000;
+  --og-input-border:       #c62828;
+  --og-filter-bg:          #ffebee;
+  --og-filter-color:       #7f0000;
+}
+
+/* ──────────────────────────────────────────────────────────
+   13. executive  (다크 네이비 + 골드 — 프리미엄/럭셔리)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="executive"] {
+  --og-primary:                #c9a227;
+  --og-primary-light:          #1e2d4a;
+  --og-primary-dark:           #a87d1a;
+  --og-header-bg:              #0d1b2e;
+  --og-header-color:           #d4c5a0;
+  --og-header-hover-bg:        #162338;
+  --og-header-sort-color:      #c9a227;
+  --og-row-bg:                 #0f2035;
+  --og-row-alt-bg:             #0b1a2c;
+  --og-row-hover-bg:           #183047;
+  --og-row-color:              #cdd5e0;
+  --og-row-selected-bg:        #2a3d5c;
+  --og-row-selected-color:     #e8d5a0;
+  --og-row-added-bg:           #1a3a25;
+  --og-row-added-color:        #8bc98f;
+  --og-row-edited-bg:          #3b2c12;
+  --og-row-edited-color:       #f5c97b;
+  --og-row-removed-bg:         #3b1515;
+  --og-row-removed-color:      #e8a0a0;
+  --og-group-bg:               #162338;
+  --og-group-color:            #c9a227;
+  --og-group-border:           #2a3d5c;
+  --og-tree-toggle-color:      #c9a227;
+  --og-tree-line-color:        #2a3d5c;
+  --og-tree-folder-color:      #c9a227;
+  --og-tree-folder-closed-color: #5a7a9a;
+  --og-tree-file-color:        #6b8ba4;
+  --og-tree-hover-bg:          rgba(201,162,39,0.10);
+  --og-tree-indent-guide:      #2a3d5c;
+  --og-merge-bg:               #2a1f0e;
+  --og-merge-border:           #c9a227;
+  --og-border-color:           #1e3050;
+  --og-focus-border:           #c9a227;
+  --og-pagination-bg:          #0d1b2e;
+  --og-pagination-btn-bg:      #0f2035;
+  --og-pagination-btn-color:   #cdd5e0;
+  --og-input-bg:               #0f2035;
+  --og-input-color:            #cdd5e0;
+  --og-input-border:           #c9a227;
+  --og-filter-bg:              #0d1b2e;
+  --og-filter-color:           #cdd5e0;
+  --og-shadow-sm:              0 1px 4px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30);
+  --og-shadow-md:              0 4px 16px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
+  --og-spinner-track:          rgba(255,255,255,0.12);
+}
+[data-og-theme="executive"] .og-empty-message { color: #3a5272; }
+[data-og-theme="executive"] .og-loading-mask  { background: rgba(13,27,46,0.80); }
+
+/* ──────────────────────────────────────────────────────────
+   14. modern  (Tailwind Slate — 클린·미니멀 블루그레이)
+   ────────────────────────────────────────────────────────── */
+[data-og-theme="modern"] {
+  --og-primary:                #2563eb;
+  --og-primary-light:          #eff6ff;
+  --og-primary-dark:           #1d4ed8;
+  --og-header-bg:              #f8fafc;
+  --og-header-color:           #0f172a;
+  --og-header-hover-bg:        #f1f5f9;
+  --og-header-sort-color:      #2563eb;
+  --og-row-bg:                 #ffffff;
+  --og-row-alt-bg:             #f8fafc;
+  --og-row-hover-bg:           #eff6ff;
+  --og-row-color:              #0f172a;
+  --og-row-selected-bg:        #dbeafe;
+  --og-row-selected-color:     #1e3a8a;
+  --og-row-added-bg:           #f0fdf4;
+  --og-row-added-color:        #14532d;
+  --og-row-edited-bg:          #fffbeb;
+  --og-row-edited-color:       #92400e;
+  --og-row-removed-bg:         #fef2f2;
+  --og-row-removed-color:      #7f1d1d;
+  --og-group-bg:               #eff6ff;
+  --og-group-color:            #1e3a8a;
+  --og-group-border:           #bfdbfe;
+  --og-tree-toggle-color:      #2563eb;
+  --og-tree-line-color:        #e2e8f0;
+  --og-tree-folder-color:      #f59e0b;
+  --og-tree-folder-closed-color: #94a3b8;
+  --og-tree-file-color:        #94a3b8;
+  --og-tree-hover-bg:          rgba(37,99,235,0.06);
+  --og-tree-indent-guide:      #e2e8f0;
+  --og-merge-bg:               #fefce8;
+  --og-merge-border:           #eab308;
+  --og-border-color:           #e2e8f0;
+  --og-focus-border:           #2563eb;
+  --og-pagination-bg:          #ffffff;
+  --og-pagination-btn-bg:      #ffffff;
+  --og-pagination-btn-color:   #334155;
+  --og-input-bg:               #ffffff;
+  --og-input-color:            #0f172a;
+  --og-input-border:           #2563eb;
+  --og-filter-bg:              #ffffff;
+  --og-filter-color:           #0f172a;
+}

package/dist/open-grid-vue.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),p=require("./OpenGrid-CAodJLLm.cjs"),h=a.defineComponent({__name:"OpenGrid",props:{data:{default:()=>[]},columns:{},height:{default:400},width:{default:"100%"},editable:{type:Boolean,default:!1},sortable:{type:Boolean,default:!0},filterable:{type:Boolean,default:!0},rowNumber:{type:Boolean,default:!1},checkColumn:{type:Boolean,default:!1},stateColumn:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},frozenColumns:{default:0},theme:{default:"default"},options:{}},emits:["update:data","ready","cell-click","row-click","edit-end","sort-change","filter-change","row-check"],setup(r,{expose:c,emit:u}){const e=r,n=u,d=a.ref(),o=a.shallowRef(null);let i=null;const f=a.computed(()=>({height:typeof e.height=="number"?`${e.height}px`:e.height,width:typeof e.width=="number"?`${e.width}px`:e.width}));return a.onMounted(()=>{if(!d.value)return;const l={columns:e.columns,height:"100%",width:"100%",editable:e.editable,sortable:e.sortable,filterable:e.filterable,rowNumber:e.rowNumber,checkColumn:e.checkColumn,stateColumn:e.stateColumn,draggable:e.draggable,frozenColumns:e.frozenColumns,theme:e.theme,...e.options,onReady:t=>{var s;(s=e.data)!=null&&s.length&&t.setData(e.data),n("ready",t)},onCellClick:t=>n("cell-click",t),onRowClick:t=>n("row-click",t),onEditEnd:t=>n("edit-end",t),onSortChange:t=>n("sort-change",t),onFilterChange:t=>n("filter-change",t),onDataChange:t=>{i=t,n("update:data",t)}};o.value=new p.OpenGrid(d.value,l)}),a.watch(()=>e.data,l=>{!o.value||!l||l!==i&&o.value.setData(l)},{deep:!1}),a.watch(()=>e.theme,l=>{o.value&&l&&o.value.setTheme(l)}),a.watch(()=>e.columns,l=>{o.value&&o.value.applyColumns(l)},{deep:!1}),a.onUnmounted(()=>{var l;(l=o.value)==null||l.destroy(),o.value=null}),c({grid:o}),(l,t)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"containerRef",ref:d,class:"og-vue-wrapper",style:a.normalizeStyle(f.value)},null,4))}}),m=(r,c)=>{const u=r.__vccOpts||r;for(const[e,n]of c)u[e]=n;return u},g=m(h,[["__scopeId","data-v-0a49d4fc"]]);exports.OpenGrid=g;
+//# sourceMappingURL=open-grid-vue.cjs.map

package/dist/open-grid-vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-grid-vue.cjs","sources":["../src/vue/OpenGrid.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" class=\"og-vue-wrapper\" :style=\"containerStyle\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, shallowRef, computed } from 'vue';\nimport { OpenGrid } from '../core/OpenGrid.js';\nimport type { GridOptions, OpenGridInstance } from '../core/types.js';\nimport type { OpenGridProps, OpenGridEmits } from './types.js';\nimport '../styles/base.css';\n\nconst props = withDefaults(defineProps<OpenGridProps>(), {\n  data: () => [],\n  height: 400,\n  width: '100%',\n  editable: false,\n  sortable: true,\n  filterable: true,\n  rowNumber: false,\n  checkColumn: false,\n  stateColumn: false,\n  draggable: false,\n  frozenColumns: 0,\n  theme: 'default',\n});\n\nconst emit = defineEmits<OpenGridEmits>();\n\nconst containerRef = ref<HTMLElement>();\nconst gridInstance = shallowRef<OpenGridInstance | null>(null);\n\n// dataChange 루프 방지: 그리드에서 발행한 데이터를 watch가 다시 setData하지 않도록 추적\nlet _lastEmittedData: any[] | null = null;\n\nconst containerStyle = computed(() => ({\n  height: typeof props.height === 'number' ? `${props.height}px` : props.height,\n  width: typeof props.width === 'number' ? `${props.width}px` : props.width,\n}));\n\nonMounted(() => {\n  if (!containerRef.value) return;\n\n  const options: GridOptions = {\n    columns: props.columns,\n    height: '100%',\n    width: '100%',\n    editable: props.editable,\n    sortable: props.sortable,\n    filterable: props.filterable,\n    rowNumber: props.rowNumber,\n    checkColumn: props.checkColumn,\n    stateColumn: props.stateColumn,\n    draggable: props.draggable,\n    frozenColumns: props.frozenColumns,\n    theme: props.theme,\n    ...props.options,\n\n    onReady: (grid) => {\n      if (props.data?.length) grid.setData(props.data);\n      emit('ready', grid);\n    },\n    onCellClick: (e) => emit('cell-click', e),\n    onRowClick: (e) => emit('row-click', e),\n    onEditEnd: (e) => emit('edit-end', e),\n    onSortChange: (e) => emit('sort-change', e),\n    onFilterChange: (e) => emit('filter-change', e),\n    onDataChange: (data) => {\n      _lastEmittedData = data;\n      emit('update:data', data);\n    },\n  };\n\n  gridInstance.value = new OpenGrid(containerRef.value, options);\n});\n\n// data prop 변경 감지 → 그리드 갱신 (그리드 자신이 발행한 데이터는 무시하여 루프 방지)\nwatch(() => props.data, (newData) => {\n  if (!gridInstance.value || !newData) return;\n  if (newData === _lastEmittedData) return;\n  gridInstance.value.setData(newData);\n}, { deep: false });\n\n// theme prop 변경 감지 → setTheme 호출\nwatch(() => props.theme, (newTheme) => {\n  if (gridInstance.value && newTheme) {\n    gridInstance.value.setTheme(newTheme);\n  }\n});\n\n// columns 변경 감지\nwatch(() => props.columns, (newCols) => {\n  if (gridInstance.value) {\n    gridInstance.value.applyColumns(newCols);\n  }\n}, { deep: false });\n\nonUnmounted(() => {\n  gridInstance.value?.destroy();\n  gridInstance.value = null;\n});\n\n// 그리드 인스턴스 외부 노출\ndefineExpose({ grid: gridInstance });\n</script>\n\n<style scoped>\n.og-vue-wrapper {\n  display: block;\n  box-sizing: border-box;\n}\n</style>\n"],"names":["props","__props","emit","__emit","containerRef","ref","gridInstance","shallowRef","_lastEmittedData","containerStyle","computed","onMounted","options","grid","_a","e","data","OpenGrid","watch","newData","newTheme","newCols","onUnmounted","__expose","_createElementBlock"],"mappings":"6sBAWA,MAAMA,EAAQC,EAeRC,EAAOC,EAEPC,EAAeC,EAAAA,IAAA,EACfC,EAAeC,EAAAA,WAAoC,IAAI,EAG7D,IAAIC,EAAiC,KAErC,MAAMC,EAAiBC,EAAAA,SAAS,KAAO,CACrC,OAAQ,OAAOV,EAAM,QAAW,SAAW,GAAGA,EAAM,MAAM,KAAOA,EAAM,OACvE,MAAO,OAAOA,EAAM,OAAU,SAAW,GAAGA,EAAM,KAAK,KAAOA,EAAM,KAAA,EACpE,EAEFW,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,EAAa,MAAO,OAEzB,MAAMQ,EAAuB,CAC3B,QAASZ,EAAM,QACf,OAAQ,OACR,MAAO,OACP,SAAUA,EAAM,SAChB,SAAUA,EAAM,SAChB,WAAYA,EAAM,WAClB,UAAWA,EAAM,UACjB,YAAaA,EAAM,YACnB,YAAaA,EAAM,YACnB,UAAWA,EAAM,UACjB,cAAeA,EAAM,cACrB,MAAOA,EAAM,MACb,GAAGA,EAAM,QAET,QAAUa,GAAS,QACbC,EAAAd,EAAM,OAAN,MAAAc,EAAY,QAAQD,EAAK,QAAQb,EAAM,IAAI,EAC/CE,EAAK,QAASW,CAAI,CACpB,EACA,YAAcE,GAAMb,EAAK,aAAca,CAAC,EACxC,WAAaA,GAAMb,EAAK,YAAaa,CAAC,EACtC,UAAYA,GAAMb,EAAK,WAAYa,CAAC,EACpC,aAAeA,GAAMb,EAAK,cAAea,CAAC,EAC1C,eAAiBA,GAAMb,EAAK,gBAAiBa,CAAC,EAC9C,aAAeC,GAAS,CACtBR,EAAmBQ,EACnBd,EAAK,cAAec,CAAI,CAC1B,CAAA,EAGFV,EAAa,MAAQ,IAAIW,EAAAA,SAASb,EAAa,MAAOQ,CAAO,CAC/D,CAAC,EAGDM,EAAAA,MAAM,IAAMlB,EAAM,KAAOmB,GAAY,CAC/B,CAACb,EAAa,OAAS,CAACa,GACxBA,IAAYX,GAChBF,EAAa,MAAM,QAAQa,CAAO,CACpC,EAAG,CAAE,KAAM,GAAO,EAGlBD,EAAAA,MAAM,IAAMlB,EAAM,MAAQoB,GAAa,CACjCd,EAAa,OAASc,GACxBd,EAAa,MAAM,SAASc,CAAQ,CAExC,CAAC,EAGDF,EAAAA,MAAM,IAAMlB,EAAM,QAAUqB,GAAY,CAClCf,EAAa,OACfA,EAAa,MAAM,aAAae,CAAO,CAE3C,EAAG,CAAE,KAAM,GAAO,EAElBC,EAAAA,YAAY,IAAM,QAChBR,EAAAR,EAAa,QAAb,MAAAQ,EAAoB,UACpBR,EAAa,MAAQ,IACvB,CAAC,EAGDiB,EAAa,CAAE,KAAMjB,EAAc,wBArGjCkB,EAAAA,mBAAyE,MAAA,SAAhE,eAAJ,IAAIpB,EAAe,MAAM,iBAAkB,uBAAOK,EAAA,KAAc,CAAA"}