@vmscloud/moz-ui-grid-vue 0.1.41

package/dist/legacy/utils/excel/ExcelImportUtil.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Smart Editor용 엑셀 임포트 공통 함수
+ * @param params.tableID 테이블 ID
+ * @param params.flexGrid Grid 인스턴스 (FlexGrid / PureSheet 등)
+ * @param params.primaryKeyColumns 기본 키 컬럼 배열
+ * @param params.usePreclear true면 기존 데이터 삭제 후 임포트(덮어쓰기), false면 추가 임포트(추가하기)
+ * @param params.setUploadMessage 업로드 메시지 설정 함수 (optional)
+ * @param params.additionalColumns 추가 컬럼 데이터 (optional)
+ * @param params.targetStorage 스토리지 백엔드 (optional, 'iceberg' | 'postgresql')
+ */
+export declare const handleSmartEditorImportExcel: (params: {
+    tableID: string;
+    flexGrid: any;
+    primaryKeyColumns: string[];
+    usePreclear?: boolean;
+    setUploadMessage?: (message: string) => void;
+    additionalColumns?: Record<string, any>;
+    targetStorage?: "iceberg" | "postgresql";
+    refreshKey?: string;
+    propExclusionMessage?: string;
+}) => void;
+/**
+ * Smart Editor용 엑셀 임포트 wrapper 함수 (통합 버전)
+ */
+export declare const createSmartEditorImporter: (params: {
+    tableID: string;
+    flexGrid: () => any;
+    primaryKeyColumns: () => string[];
+    setUploadMessage?: (message: string) => void;
+    additionalColumns?: () => Record<string, any>;
+    targetStorage?: "iceberg" | "postgresql";
+    refreshKey?: string;
+    propExclusionMessage?: string;
+}) => (usePreclear: boolean) => void;

package/dist/legacy/utils/excel/ExcelQueueManager.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ExcelQueueManager Store
+ * - defineStore를 사용하여 Vue 컨텍스트에서 projectInfo 초기화
+ */
+export declare const useExcelQueueStore: import('pinia').StoreDefinition<"excelQueue", Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+}, never>, Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+}, "tenantID" | "userID">, Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+}, never>>;
+/**
+ * ExcelQueueManager (Legacy singleton pattern)
+ * - 단일 탭 인메모리 큐만 사용 (다운로드/업로드)
+ * - 새로고침/크로스 탭 동기화 없음
+ */
+declare class ExcelQueueManager {
+    private static instance;
+    private inMemoryUploadQueue;
+    private inMemoryDownloadQueue;
+    private initialized;
+    static getInstance(): ExcelQueueManager;
+    /**
+     * 초기화 훅 (단일 탭 모드에서는 실질 동작 없음)
+     */
+    private initSubscriptions;
+    /** 현재 다운로드 큐 스냅샷 반환 */
+    private loadQueue;
+    /** 다운로드 큐 저장 */
+    private saveQueue;
+    /** 다운로드 작업 추가 후 즉시 실행 시도 */
+    enqueueDownload(param: any): number;
+    /** 다운로드 큐 길이 */
+    getQueueLength(): number;
+    /** 업로드 큐 길이 */
+    getUploadQueueLength(): number;
+    /** 전체 큐 길이 (다운로드+업로드) */
+    getTotalQueueLength(): number;
+    /** 업로드 작업 추가 후 즉시 실행 시도 */
+    enqueueUpload(start: () => Promise<void> | void, fileName?: string): number;
+    /**
+     * 큐에서 특정 client_id(download) 항목 제거
+     */
+    /**
+     * 큐에서 특정 client_id(download) 항목 제거
+     */
+    removeDownloadByClientId(clientId: string): void;
+    /**
+     * 다음 작업 실행 시도 (다운로드 우선순위: 생성시각)
+     */
+    tryStartNext(): Promise<void>;
+}
+export declare const queue: ExcelQueueManager;
+export default ExcelQueueManager;

package/dist/legacy/utils/excel/ExcelTaskRunner.d.ts

@@ -0,0 +1,17 @@
+import { ExcelNotificationOperationType } from '../../../contracts/notification.contract';
+/**
+ * Excel Task Store
+ * - defineStore를 사용하여 Vue 컨텍스트에서 projectInfo 초기화
+ */
+export declare const useExcelTaskStore: import('pinia').StoreDefinition<"excelTask", Pick<{
+    startDownloadTask: (param?: any) => Promise<any>;
+    cancelExcelTask: (sessionId: string, operation: ExcelNotificationOperationType, cancelFn?: (sessionId: string) => Promise<void>) => Promise<void>;
+}, never>, Pick<{
+    startDownloadTask: (param?: any) => Promise<any>;
+    cancelExcelTask: (sessionId: string, operation: ExcelNotificationOperationType, cancelFn?: (sessionId: string) => Promise<void>) => Promise<void>;
+}, never>, Pick<{
+    startDownloadTask: (param?: any) => Promise<any>;
+    cancelExcelTask: (sessionId: string, operation: ExcelNotificationOperationType, cancelFn?: (sessionId: string) => Promise<void>) => Promise<void>;
+}, "startDownloadTask" | "cancelExcelTask">>;
+export declare const startDownloadTask: (param?: any) => Promise<any>;
+export declare const cancelExcelTask: (sessionId: string, operation: ExcelNotificationOperationType, cancelFn?: (sessionId: string) => Promise<void>) => Promise<void>;

package/dist/legacy/utils/excel/ExcelTimeoutManager.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ExcelTimeoutManager Store
+ * - defineStore를 사용하여 Vue 컨텍스트에서 projectInfo 초기화
+ */
+export declare const useExcelTimeoutStore: import('pinia').StoreDefinition<"excelTimeout", Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+    timeoutMessage: import('vue').ComputedRef<string>;
+}, never>, Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+    timeoutMessage: import('vue').ComputedRef<string>;
+}, "tenantID" | "userID" | "timeoutMessage">, Pick<{
+    tenantID: import('vue').ComputedRef<string>;
+    userID: import('vue').ComputedRef<string>;
+    timeoutMessage: import('vue').ComputedRef<string>;
+}, never>>;
+/**
+ * ExcelTimeoutManager
+ * - 각 세션별 타이머를 인메모리로 관리하여 타임아웃 시 로컬 상태를 에러로 정리합니다.
+ */
+declare class ExcelTimeoutManager {
+    private static instance;
+    private timers;
+    private timeoutMs;
+    static getInstance(): ExcelTimeoutManager;
+    /** 지정 세션의 타이머 해제 */
+    clear(sessionId: string): void;
+    /**
+     * 타임아웃 타이머 시작
+     * @param sessionId 세션 ID
+     * @param timeoutMs 타임아웃 시간 (기본 1분)
+     */
+    start(sessionId: string, timeoutMs?: number): void;
+}
+export declare const excelTimeoutManager: ExcelTimeoutManager;
+export default ExcelTimeoutManager;

package/dist/legacy/utils/file.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 파일 입출력 헬퍼
+ *
+ * 클라이언트 사이드 엑셀 import/export 등에서 사용하는
+ * 파일 선택 / 다운로드 유틸리티.
+ */
+/**
+ * 파일 선택 다이얼로그를 열고 사용자가 선택한 파일을 반환합니다.
+ *
+ * @param accept - input의 accept 속성 (예: '.xlsx', '.csv,.xlsx')
+ * @returns 선택한 파일. 사용자가 취소한 경우 null
+ *
+ * @example
+ * ```ts
+ * const file = await pickFile('.xlsx');
+ * if (file) {
+ *   await grid.io.fromExcel(file);
+ * }
+ * ```
+ */
+export declare function pickFile(accept?: string): Promise<File | null>;
+/**
+ * Blob을 파일로 다운로드합니다.
+ *
+ * @param blob - 다운로드할 Blob
+ * @param filename - 저장 파일명 (확장자 포함)
+ *
+ * @example
+ * ```ts
+ * const blob = await grid.io.toExcel({ scope: 'all' });
+ * downloadBlob(blob, 'export_20260415.xlsx');
+ * ```
+ */
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/legacy/utils/http/rest.d.ts

@@ -0,0 +1,5 @@
+import { AxiosRequestConfig, AxiosResponse, Method } from 'axios';
+import { FileParameter, StreamingParameter } from '../../types';
+export declare function request(url: string, method?: Method, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<any>>;
+export declare const requestStream: (url: string, method: Method | undefined, data: StreamingParameter) => Promise<void>;
+export declare function responseStream(url: string, data: FileParameter, param?: any, _method?: Method): Promise<void>;

package/dist/legacy/utils/id/generator.d.ts

@@ -0,0 +1,2 @@
+export declare const generateGUID: () => string;
+export declare const generateUUID: () => string;

package/dist/legacy/utils/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Excel 모듈이 사용하는 유틸리티 barrel.
+ * - 원본 moz-wijmo-grid의 utils/index.ts를 최소화하여
+ *   엑셀 모듈이 필요로 하는 함수들만 export 합니다.
+ */
+export { generateGUID, generateUUID } from './id/generator';
+export { encodeUnescapeBtoa, decodeEscapeAtob } from './crypto/crypto';
+export { request, requestStream, responseStream } from './http/rest';
+export { showMessage, showConfirm, showDialog } from './dialog/dialog';
+export { debounce } from './async/debounce';

package/dist/store.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("pinia");const e=require("./chunks/index-D5KJLBGW.cjs");exports.dataTypeToString=e.dataTypeToString,exports.useExcelDownloadStore=e.useExcelDownloadStore,exports.useExcelStore=e.useExcelStore,exports.useExcelUploadStore=e.useExcelUploadStore;

package/dist/store.js

@@ -0,0 +1,8 @@
+import "pinia";
+import { d, u, a, b } from "./chunks/index-BDQ0HlwR.js";
+export {
+  d as dataTypeToString,
+  u as useExcelDownloadStore,
+  a as useExcelStore,
+  b as useExcelUploadStore
+};

package/dist/stories/ColumnLockVisible.stories.d.ts

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * 컬럼 가시성 잠금 (`lockVisible`) 데모 — ITSM-2026-001098
+ *
+ * `FieldDef.lockVisible: true` 는 그 컬럼의 **현재 가시성 상태를 고정**하는 하드 불변식이다.
+ * 컬럼 옵션 패널의 체크박스가 비활성화되고, 전체표시 토글의 대상에서도 빠지며,
+ * **프로그램적 API**(`columns.hide` / `show` / `setHidden` / `toggle` / `update({hidden})`)도 거부된다.
+ *
+ * 초기 상태는 `hidden` 과 조합해 정한다.
+ *  - `hidden: false`(기본) + 잠금 → **항상 표시** (패널에서 체크된 채 비활성화)
+ *  - `hidden: true` + 잠금 → **항상 숨김** (패널에서 체크 해제된 채 비활성화)
+ *
+ * 잠기는 것은 **가시성뿐**이다 — 순서·너비·고정(pin)·서식은 그대로 바꿀 수 있다.
+ *
+ * > AG Grid 의 동명 옵션은 UI 만 막고 API 는 통과시키지만(`"API will still work"`),
+ * > moz-ui-grid 에서는 소비처가 기대하는 불변식이 "그 컬럼은 반드시 보인다/숨는다" 이므로
+ * > UI·API 를 가리지 않는 하드 불변식으로 정의했다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * 기본 데모 — 툴바의 컬럼 옵션(⚙) 을 열어 잠금 컬럼의 체크박스가 비활성화된 것을 확인한다.
+ *
+ * 확인 포인트
+ *  1. `ID` — 체크된 채 회색(항상 표시). 클릭해도 안 바뀐다.
+ *  2. `이메일(내부전용)` — 체크 해제된 채 회색(항상 숨김).
+ *  3. 상단 **전체표시** 체크박스를 꺼도 잠금 컬럼 2개는 상태가 그대로다.
+ *  4. 아래 버튼으로 **프로그램적 API** 를 호출해도 거부된다(개발자도구 콘솔에 경고).
+ */
+export declare const LockedColumns: Story;
+/**
+ * 잠금이 **소비처의 `fields` 갱신(updateFields)** 을 넘어 유지되는지 확인하는 스토리.
+ *
+ * 조회할 때마다 `fields` 를 새로 만들어 넘기는 소비처(예: DP ForecastGrid)에서, core 는
+ * `updateFields` 로 ColumnDef 를 전량 재생성한다. 이때 잠금 컬럼의 가시성은 **새 fields 의
+ * 선언값이 이긴다** — 사용자가 이전에 바꿔둔 값이나 옛 state 로 덮이지 않는다.
+ *
+ * [fields 교체] 를 눌러 헤더 텍스트가 바뀐 뒤에도 잠금/가시성이 그대로인지 확인한다.
+ */
+export declare const LockSurvivesFieldsUpdate: Story;

package/dist/stories/DateBooleanFilter.stories.d.ts

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * 날짜·불리언 컬럼 필터 — ITSM-2026-000531
+ *
+ * ## 왜 이 스토리가 있나
+ *
+ * 필터 팝업은 `dataType` 에 따라 연산자와 값 입력을 바꾼다(`operatorsForType`).
+ * 그런데 **날짜 크기비교**와 **불리언 같다/다르다**가 오랫동안 아무것도 걸러내지 못했다:
+ *
+ * | 조건 | 고치기 전 | 원인 |
+ * |---|---|---|
+ * | `입사일 > 2024-01-05` | 항상 0건 | `Number('2024-01-05')` = `NaN` → NaN 비교는 항상 false |
+ * | `재직중 = TRUE` | 항상 0건 | select 는 `'TRUE'` **문자열**, 셀은 `true` **불리언** → 엄격 비교 실패 |
+ * | `재직중 ≠ TRUE` | 항상 전체 | 위와 같은 이유(필터를 안 건 것과 동일) |
+ *
+ * 실패가 **에러가 아니라 빈 결과/전체 결과**로 나타나서 버그로 인지되기 어려웠다.
+ * 회귀가 나면 화면에서 바로 드러나도록 두 모드(플랫·피벗) 데모를 둔다.
+ *
+ * ⚠️ 플랫 경로와 피벗 경로가 **서로 다른 평가기**를 쓰고 있었다(피벗은 날짜가 정상이었다).
+ *    지금은 `filterUtils` 공용 헬퍼로 합쳐졌으므로, 두 스토리에서 **같은 조건이 같은 결과**를
+ *    내야 한다. 다르면 그 통합이 깨진 것이다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * 플랫 그리드 — 헤더 필터 아이콘 또는 툴박스 필터에서 조건을 건다.
+ *
+ * 날짜 컬럼은 값 입력이 날짜 선택기, 불리언 컬럼은 TRUE/FALSE 드롭다운으로 바뀐다.
+ */
+export declare const Flat: Story;
+/**
+ * 피벗 그리드 — 같은 데이터를 행 [팀] × 열 [재직중] 으로 집계한다.
+ *
+ * 날짜(`입사일`)와 불리언(`재직중`)을 **차원**으로 쓰므로, 필터를 걸면 소계/총합계까지
+ * 다시 계산된다. 플랫과 **같은 조건이 같은 행 집합**을 남기는지 비교하는 것이 요점이다
+ * (두 모드가 다른 평가기를 쓰던 시절엔 날짜에서 갈렸다).
+ *
+ * 피벗의 필터 진입점은 툴박스 필터 창이다(헤더 클릭은 피벗 옵션 바를 연다).
+ */
+export declare const Pivot: Story;

package/dist/stories/DisplayedRowApi.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * Displayed Row API 데모 (ITSM-2026-001222)
+ *
+ * `visible`(필터/정렬 후, 그룹/트리 collapse 미반영 — 접힌 자식 포함)과 구분되는
+ * `displayed` 좌표계(collapse 반영, 접힌 자식·구조행 제외) 공개 API를 인터랙티브로 확인.
+ *
+ * - 배열 조회: `grid.getDisplayedData()` / `grid.getDisplayedRowIds()`
+ * - 인덱싱(traversal): `grid.rows.displayedCount()` / `getByDisplayedIndex(i)` / `getDisplayedIndexById(id)`
+ *
+ * grid 인스턴스(core PureSheet)는 `@ready` 이벤트로 전달됩니다. (Vue ref로는 `ref.grid`)
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * 배열 조회 API — getDisplayedData / getDisplayedRowIds.
+ * 그룹을 접으면 접힌 자식이 displayed 결과에서 빠지는 것을 확인.
+ * (동시에 getVisibleData는 접힌 자식을 그대로 포함 — 하위 호환)
+ */
+export declare const DisplayedArray: Story;
+/**
+ * 인덱싱 traversal API — 다음/이전 버튼.
+ * displayedCount / getByDisplayedIndex / getDisplayedIndexById 로 "현재 선택의 다음/이전
+ * data 행"으로 이동. 그룹 헤더 행은 건너뛰고, 접힌 그룹의 자식은 좌표계에 없어 자동 스킵.
+ */
+export declare const DisplayedTraversal: Story;

package/dist/stories/FieldId.stories.d.ts

@@ -0,0 +1,113 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * # id ≠ field — 같은 원본을 여러 컬럼으로 보여주기
+ *
+ * ## 두 이름의 역할
+ *
+ * | | 무엇 | 어디에 쓰이나 |
+ * |---|---|---|
+ * | `id` | 컬럼을 **가리키는** 이름 | 정렬/필터 상태, 컬럼 폭 저장, 그룹 설정, DOM 속성 |
+ * | `field` | 원본 데이터 객체의 **키** | 값을 읽을 때만 (`row[field]`) |
+ *
+ * `field` 를 생략하면 `id` 와 같은 값으로 채워지므로, 기존 설정은 그대로 동작한다.
+ *
+ * ## 왜 나눠야 하나
+ *
+ * **같은 원본 컬럼을 화면에 여러 번 보여줘야 할 때** 필요하다. 예를 들어 같은 금액을
+ * 원화와 달러로 나란히 두거나, 같은 값을 다른 서식으로 두 번 보여주는 경우다.
+ *
+ * ```ts
+ * fields: [
+ *   { id: 'amount_krw', field: 'amount', header: '금액(원)' },
+ *   { id: 'amount_usd', field: 'amount', header: '금액($)' },  // 같은 원본, 다른 컬럼
+ * ]
+ * ```
+ *
+ * `field` 만 있으면 두 컬럼을 **구분할 수 없다** — 정렬 화살표를 어디에 그릴지, 어느 폭을
+ * 저장할지 알 수 없다. 그래서 상태는 항상 `id` 로 기록하고, 값을 읽을 때만 `field` 를 쓴다.
+ *
+ * ## 이 카테고리의 스토리들
+ *
+ * 파생 기능마다 이 규칙이 지켜지는지 눈으로 확인할 수 있게 나눠 두었다.
+ * 각 스토리에서 **정렬·필터·그룹·편집**을 걸어 보고, 같은 원본을 쓰는 컬럼끼리
+ * 서로 영향을 주지 않는지 확인한다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * ## 플랫 그리드 — 같은 금액을 원/달러 두 컬럼으로
+ *
+ * `amount` 하나를 `amount_krw`, `amount_usd` 두 컬럼으로 보여준다.
+ *
+ * ### 확인할 것
+ * - **정렬**: 한 컬럼 헤더를 클릭하면 그 컬럼에만 화살표가 뜨는가?
+ * - **필터**: `금액(원)` 에 필터를 걸면 `금액($)` 은 그대로인가? (같은 원본이라 행은 같이 걸러진다)
+ * - **컬럼 폭**: 한쪽 폭을 바꿔도 다른 쪽은 유지되는가?
+ */
+export declare const Flat: Story;
+/**
+ * ## 행 그룹 — 그룹 컬럼과 소계가 `id` 로 지목된다
+ *
+ * `rowGroup.columns` 와 `subtotals` 는 **컬럼 식별자**로 지정한다.
+ * 소계는 `amount_krw` 하나에만 걸어 두었다.
+ *
+ * ### 확인할 것
+ * - 그룹이 지역별로 묶이는가?
+ * - **소계가 `금액(원)` 열에만** 뜨고 `금액($)` 열은 비어 있는가?
+ *   (같은 원본이지만 소계 대상은 `id` 로 구분된다)
+ */
+export declare const RowGroup: Story;
+/**
+ * ## 트리 그리드 — `treeConfig` 는 원본 데이터 키다
+ *
+ * ⚠️ 헷갈리기 쉬운 지점: `treeConfig.idField` / `parentField` 는 이름에 `field` 가 붙어
+ * 있지만 **컬럼 식별자가 아니라 원본 데이터의 키**다. `row.parentId` 를 직접 읽는다.
+ * 그래서 컬럼을 어떻게 나누든 이 설정은 원본 키를 그대로 쓴다.
+ *
+ * 반면 `treeColumn`(펼침 아이콘을 붙일 컬럼)은 **컬럼 식별자**다.
+ *
+ * ### 확인할 것
+ * - 트리 구조가 만들어지는가?
+ * - `금액(원)` 헤더로 정렬하면 **형제끼리** 재정렬되고 계층은 유지되는가?
+ */
+export declare const Tree: Story;
+/**
+ * ## 컬럼 그룹 — `children` 이 컬럼 식별자를 나열한다
+ *
+ * 헤더 그룹의 `children` 은 **컬럼 식별자** 목록이다. 같은 원본을 쓰는 두 컬럼을
+ * 한 그룹으로 묶을 수 있다.
+ *
+ * ### 확인할 것
+ * - `금액` 그룹 아래에 원/달러 두 컬럼이 묶이는가?
+ * - 그룹을 접었다 펴도 각 컬럼이 제자리를 지키는가?
+ */
+export declare const ColumnGroup: Story;
+/**
+ * ## 피벗 — 같은 원본을 합계·평균 두 값 필드로
+ *
+ * 피벗 값 영역은 **같은 원본을 여러 번 배치**하는 게 일상적이다(합계 + 평균).
+ * 이때 `id` 가 없으면 어느 배치인지 가리킬 수 없다.
+ *
+ * ### 확인할 것
+ * - 옵션바에서 **`매출 합계` 칩만** 클릭했을 때 그 칩에만 정렬 화살표가 붙는가?
+ * - 조건부 서식(셀 스타일)에서 `[매출 합계]` 로 규칙을 저장한 뒤 다시 열면
+ *   **`[매출 합계]` 그대로** 인가? (`[매출 평균]` 으로 바뀌면 안 된다)
+ */
+export declare const Pivot: Story;
+/**
+ * ## 편집 · 입출력 — 어느 이름으로 오가는가
+ *
+ * | 동작 | 쓰는 이름 | 이유 |
+ * |---|---|---|
+ * | 셀 편집 | `field` | 결국 원본 데이터를 고치는 일이다 |
+ * | 엑셀/CSV 내보내기 | `id` | **화면에 보이는 대로** 나가야 한다 |
+ * | 클립보드 복사 | `id` | 내보내기와 같다 |
+ * | 가져오기 헤더 해석 | `field` | 가져온 행이 곧 데이터가 된다 |
+ *
+ * ### 확인할 것
+ * - `금액(원)` 셀을 편집하면 **`금액($)` 도 같이 바뀌는가?** (같은 원본이므로 그래야 정상)
+ * - 내보내기 파일의 헤더가 화면 헤더와 같은가?
+ */
+export declare const EditAndIO: Story;

package/dist/stories/GroupPanelWithoutToolbox.stories.d.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * 툴박스 없는 화면의 rowGroup 표시 규칙 — ITSM-2026-001434
+ *
+ * `useToolBox: false` 인 화면은 툴박스(⚙ 보기 설정)가 없어 그룹 패널을 켜고 끌 UI 자체가 없다.
+ * 이 스토리는 그 화면에서 rowGroup 을 지정했을 때의 **두 가지 규칙**을 데모한다.
+ *
+ * 1. **rowGroup 지정이 그룹 패널을 강제로 켜지 않는다.**
+ *    표시 조건은 보기 설정(`setGroupPanelVisible`) 하나뿐이다.
+ *    (AG Grid `rowGroupPanelShow` 기본값 `'never'` / legacy `GroupPanel.vue` 의 `v-if="visible"` 과 동일.
+ *     이전에는 그룹이 걸리면 무조건 표시돼, 이 화면에서는 끌 방법이 아예 없었다.)
+ * 2. **위쪽 크롬이 전부 숨겨지면 그리드 상단 테두리가 2px 로 겹치지 않는다.**
+ *    `.mzc-grid-body` 의 `border-top` 은 "위쪽 크롬 ↔ 그리드" 구분선이므로,
+ *    툴박스·그룹패널·알림 호스트가 모두 비어 있을 때는 제거되고 `.mzc-grid-pane` 테두리만 남는다.
+ *    그룹 패널을 켜면 구분선이 다시 살아난다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * 확인 포인트
+ *  1. 초기 화면 — 부서로 그룹이 걸려 있지만 **그룹 패널이 보이지 않는다**(강제 활성화 없음).
+ *  2. 초기 화면 — 그리드 상단 테두리가 **1px**(2px 이중선 아님). 아래 [테두리 실측] 로 확인.
+ *  3. [그룹 패널 표시] 를 누르면 칩(`부서`)이 있는 점선 패널이 나타나고 구분선이 살아난다.
+ *  4. 다시 누르면 사라진다 — 툴박스가 없는 화면에서도 API 로 켜고 끌 수 있다.
+ */
+export declare const NoToolboxWithRowGroup: Story;

package/dist/stories/GroupRowRecycle.stories.d.ts

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * 그룹 행 재활용 시 lifecycle cellRenderer stale 잔존 (fix #589, commit b43a6d3) 시각 회귀 스토리.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * 배경 (실사용 결함: v-itsm ITSM-2026-001136)
+ * ─────────────────────────────────────────────────────────────────────────────
+ * RowPool 은 성능을 위해 **동일한 물리 셀 DOM 을 데이터 행 ↔ 그룹(소계) 행 variant 로 재활용**한다.
+ * MozGrid 의 `<CellTemplate>` 슬롯은 fieldBuilder 가 **lifecycle cellRenderer(arity 2)** 로 변환해
+ * 셀마다 독립 Vue app 을 mount/update/destroy 한다.
+ *
+ * 문제는 **값이 없는 UI 전용 컬럼**(예: 즐겨찾기/액션 버튼)이다. 이런 컬럼은 데이터 행에서도,
+ * 그룹 행 합성 data 에서도 `value === undefined` 라, core 의 value 기반 dirty-check/Fast-Path 가
+ * 데이터 행 → 그룹 행 전환을 **감지하지 못한다**. 그 결과 이전 데이터 행에 mount 된 버튼(그리고
+ * 그 행의 `rowData.id` 를 문 클릭 핸들러)이 destroy 되지 않고 **그룹 행 셀에 그대로 잔존**한다.
+ * 사용자가 그룹(소계) 행의 그 자리를 클릭하면 **엉뚱한 이전 티켓의 즐겨찾기가 토글**됐다.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * 수정 (commit b43a6d3)
+ * ─────────────────────────────────────────────────────────────────────────────
+ * `CellMeta.renderedAsGroupRow` 를 1급 신호로 캐시하고, `renderedAsGroupRow !== groupRow` 이면
+ * value 유무와 무관하게 lifecycle 인스턴스를 `disposeCellRenderer`(destroy + meta reset)로 정리한
+ * 뒤 새 컨텍스트로 재마운트한다. (판별은 `isLifecycleRenderer` 헬퍼로 단일화 — arity 오추론 차단.)
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * 수동 검증 방법 (이 스토리)
+ * ─────────────────────────────────────────────────────────────────────────────
+ * 1. 그리드가 부서(department)별로 그룹핑돼 있고, 맨 왼쪽 `★` 즐겨찾기 컬럼이 lifecycle 셀 렌더러다.
+ * 2. 각 즐겨찾기 버튼은 **자기 행의 사번(id)** 을 클로저로 물고 있어, 클릭하면 그 id 를 토글하고
+ *    상단 로그 패널에 `toggled #<id>` 를 남긴다.
+ * 3. **접기/펼치기 반복** 버튼(또는 그룹 행 좌측 ▸/▾ 토글)으로 그룹을 여러 번 접었다 편다 —
+ *    이때 RowPool 이 데이터 행 셀을 그룹(소계) 행으로 재활용한다.
+ * 4. **[핵심 검증]** 그룹(소계) 행의 `★` 컬럼 자리(부서명이 있는 굵은 행)에 **버튼이 남아 있으면 안 된다.**
+ *    - fix 적용본: 그룹 행의 즐겨찾기 셀은 **비어 있다**(버튼 없음). 클릭해도 아무 id 도 토글되지 않는다.
+ *    - 결함 재현본(fix 이전): 그룹 행에 이전 데이터 행의 버튼이 남아, 클릭 시 `toggled #<엉뚱한 id>` 로그.
+ * 5. 데이터 행으로 다시 펼쳐지면 각 버튼이 **자기 사번**으로 정상 재마운트되는지(라벨/토글 대상 일치) 확인.
+ *
+ * ▶ '전체 접기' → '전체 펼치기' 를 빠르게 여러 번 눌러 pool 재활용을 강제한 뒤,
+ *   그룹 행 즐겨찾기 셀이 항상 비어 있는지 관찰하는 것이 가장 확실한 재현/검증 절차다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+export declare const GroupedFavoriteColumn: Story;

package/dist/stories/GroupTreeExpandNav.stories.d.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * Group / Tree / Master-Detail 네비게이션 데모
+ *
+ * displayed 좌표계 traversal(다음/이전)이 접힘·구조행을 올바르게 다루는지, 그리고
+ * 접힌 조상 때문에 숨은 행으로 이동하는 방법을 인터랙티브로 확인한다.
+ *
+ * - `grid.group.expandToRow(rowId)` — 접힌 조상 그룹을 모두 펼쳐 숨은 행을 보이게
+ * - `grid.tree.expandPath(nodeId)` — tree 조상 펼침(대칭)
+ * - `grid.rows.getByDisplayedIndex(i)` / `getDisplayedIndexById(id)` / `selectRowsByIds([id])`
+ *
+ * 공통 패턴: "다음/이전"은 현재 선택의 displayed 인덱스를 구해 ±1 방향으로 data 행을
+ * 찾아 selectRowsByIds 로 선택 이동한다. group-row/디테일 구조행·접힌 자식은 자동 스킵된다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/**
+ * 예제 1 — group.expandToRow: 접힌 조상 그룹의 숨은 행으로 이동
+ *
+ * 부서로 그룹핑 후 특정 그룹을 접으면 그 자식들이 displayed 좌표계에서 사라진다.
+ * "숨은 행으로 이동" 버튼은 getDisplayedIndexById가 -1이면 group.expandToRow로 조상을
+ * 펼친 뒤 selectRowsByIds 로 이동한다.
+ */
+export declare const GroupExpandToRow: Story;
+/**
+ * 예제 2 — Tree traversal: 접힌 자손을 건너뛰는 다음/이전
+ *
+ * 트리 모드에서 [다음]/[이전]은 표시되는(접히지 않은) tree 노드만 순회한다.
+ * 특정 노드를 접으면 그 자손은 displayed에서 사라져 traversal에서 자동 스킵된다.
+ * [숨은 노드로 이동]은 tree.expandPath로 조상을 펼친 뒤 이동한다.
+ */
+export declare const TreeTraversal: Story;
+/**
+ * 예제 3 — Master-Detail traversal: 디테일 구조행을 건너뛰는 다음/이전
+ *
+ * 디테일 패널을 확장하면 displayed 좌표계에 구조행이 삽입된다. [다음]/[이전]은
+ * data 행만 순회하며 디테일 구조행은 자동 스킵한다(getDisplayedIndexById 삽입 오프셋 보정).
+ */
+export declare const MasterDetailTraversal: Story;

package/dist/stories/LargeData.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * 대량 데이터 + CRUD (MozGrid)
+ *
+ * 500만 건 데이터를 가상 스크롤로 로딩한 뒤, 행 추가/삭제·실행취소/다시실행·커밋/폐기까지
+ * 편집(dirty) 라이프사이클을 검증한다. 레거시 `Performance/LargeData`(MozGridVue) 스토리를
+ * 새 `MozGrid.vue`(vanilla GridChrome 위임) API 로 이식한 것.
+ *
+ * 이식 매핑:
+ *  - `:editable` / `:data` / `:fields` 개별 prop → `v-model:coreConfig` 통객체(`MozGridCoreProps`).
+ *  - `useFilter` prop 은 신 wrapper 에 없음(필터는 툴박스 내장) → 제거.
+ *  - `@ready` 페이로드는 동일한 `PureSheet` → CRUD API(`rows`/`changes`/`undoManager`) 그대로 사용.
+ *
+ * 데이터 생성은 Web Worker 가 아닌 메인 스레드에서 수행되므로 초기 로딩 시 잠시 멈출 수 있다.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+export declare const FiveMillionRowsWithCrud: Story;

package/dist/stories/MozGrid.stories.d.ts

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MozGrid } from '../MozGrid.vue';
+/**
+ * MozGrid (피벗 모드) — vanilla GridChrome(@vmscloud/moz-ui-grid-wrapper) 를 Vue 가 얇게 소비.
+ *
+ * API: `coreConfig` 만 **통객체 양방향**(`v-model:coreConfig`). 피벗 필드 패널/옵션 모달에서 행·열·값 필드,
+ * 집계, 형식, 원본값병기, 표시방식(showValueAs) 등을 바꾸면 그 변경이 `coreConfig` 로 역류해 위 라이브 JSON 이
+ * 실시간 갱신된다. wrapper 옵션(sourceFields/usePivot/useChart/height 등)은 입력값이라 **개별 props**.
+ */
+declare const meta: Meta<typeof MozGrid>;
+export default meta;
+type Story = StoryObj<typeof MozGrid>;
+/** 플랫 그리드: 직원 데이터 + fields 정의. 필터/정렬/조건부서식/컬럼 옵션 등 기본 크롬 사용. */
+export declare const Flat: Story;
+/** 기본 피벗: 지역 × 분기 매출 합계. 피벗 설정(톱니바퀴)에서 필드/형식 바꾸면 coreConfig 가 실시간 갱신됨. */
+export declare const Basic: Story;
+/**
+ * 대량 데이터 피벗 (10만 건) — 필터/정렬 통합(차원=사전 재집계 / 값=사후 source 재집계) 수동 검증용.
+ *
+ * 구성: 행 [지역 > 제품] · 열 [연도 > 분기] · 값 [매출 합계 + 이익 평균] · 소계/총합계 전부 ON · trackSourceRows.
+ * 카디널리티 5×5×4×2 = 200 조합에 10만 행 → 조합당 ~500행 (재집계 모수 충분).
+ *
+ * ▶ 검증 포인트 (툴박스 필터/정렬 또는 헤더 메뉴):
+ *  1. **차원 필터(사전)** — 지역/제품/연도/분기를 필터하면 소계·총합계가 **줄어든 모수로 재집계**(Excel식).
+ *     열(연도/분기)을 필터하면 해당 열이 통째로 사라지고 헤더트리·총계가 다시 그려진다.
+ *  2. **값 필터(사후+source 재집계)** — 매출/이익에 `>`,`<` 필터 → 통과한 행만 남고 **소계·총합계가
+ *     살아남은 원본으로 재집계**. 특히 **이익 평균(비가산)**이 "평균의 평균"이 아니라 원본 재평균인지 확인.
+ *  3. **정렬** — 기본 정렬은 피벗 행/열 재정렬(집계 불변). (mode:'pre' first/last 는 API 레벨 기능.)
+ *  10만 행 재집계 체감 속도도 함께 확인.
+ */
+export declare const LargePivot: Story;
+/**
+ * 원본 500만 건 피벗 — 대용량 재집계/필터 검증.
+ *
+ * 구성: 행 [지역 > 제품] · 열 [연도 > 분기] · 값 [매출 합계 + 이익 평균] · 소계/총합계 전부 ON.
+ * 카디널리티 5×5×4×2 = 200 조합에 500만 행 → 조합당 ~2.5만 행 (재집계 모수 충분).
+ *
+ * ▶ 이 스토리가 보여주는 것 (툴박스 필터 또는 헤더 우클릭 메뉴):
+ *  1. **`trackSourceRows` 없이 재집계** — 값 필터(매출 `>`/이익 `<`)를 걸면 소계·총합계가 살아남은
+ *     원본으로 재집계되는데, **소스 인덱스 맵을 만들지 않는다**(roll-up O(cells) + 키-필터 재스캔).
+ *     500만 행에서도 메모리 추가 ~0 으로 동작하는지 확인.
+ *  2. **열 필터 = post 재집계** — 연도(2024)나 분기(Q1)를 필터하면 해당 열만 남고 **소계·총합계가
+ *     남은 열 기준으로 다시 집계**된다(과거: 트리만 잘리고 총계 stale). `연도=2024 OR 연도=2025`
+ *     (열 OR 열)도 둘 다 표시. 존재하지 않는 값 → 데이터 컬럼 0 + 총합계만.
+ *  3. **비가산 집계** — 이익 **평균**이 "평균의 평균"이 아니라 원본 재평균(roll-up {sum,count} companion)인지.
+ *
+ * 데이터는 메인 스레드에서 생성하므로 오픈 직후 잠깐 멈출 수 있다(생성 시간 표시).
+ */
+export declare const FiveMillionRowsPivot: Story;
+/** 다중 값 + 차트: 매출·비용·수량 집계 + 차트 버튼. 값 필드 추가/삭제·형식 변경이 coreConfig 로 역류. */
+export declare const MultiValueWithChart: Story;