@mogura/moguchart-core 1.3.1 → 1.5.0

package/CHANGELOG.ja.md

@@ -5,6 +5,89 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2026-10-17
+
+### Added
+
+- **マルチカラムデータグリッド対応（Multi-Column Data Grid / WBS テーブル）**:
+  - 行ヘッダー領域を本格的な複数カラムのテーブルとして表示・操作できる新オプション `option.grid` を追加
+  - **標準組み込みカラムプリセット**:
+    - `wbs`: WBS階層コード（例: 1, 1.1, 1.2.1）
+    - `name`: タスク名・行名（階層ツリーインデント＋展開・折りたたみボタン内包）
+    - `startDate` / `startMonth` / `startDateTime`: タスク開始日・開始月・開始日時（単一タスクは開始日時、サマリー行・複数タスク行は最小開始日時を自動集計）
+    - `endDate` / `endMonth` / `endDateTime`: タスク終了日・終了月・終了日時（単一タスクは終了日時、サマリー行・複数タスク行は最大終了日時を自動集計）
+    - `duration`: 期間・工数（カレンダー日数スパン、時間単位モード時は時間・分フォーマット）
+    - `progress`: 進捗率（サマリー行・複数タスク行は期間加重平均進捗率を自動算出）
+  - **表示モードに応じた自動カラム適応**:
+    - 月単位モード（`pxPerMonth` 指定時）では `startDate` / `endDate` のヘッダーが自動的に「開始月」「終了月」（`Start Month` / `End Month`）に切り替わり、`YYYY/M` 形式で表示（終了月は前月表記に自動調整）
+    - 時間単位モード（`showTime: true` 時）では `startDate` / `endDate` のヘッダーが自動的に「開始日時」「終了日時」（`Start Date/Time` / `End Date/Time`）に切り替わり、時刻付き表示および時間単位の期間表示に連動
+  - **グリッドセルのインライン編集機能 (`option.grid.editable`, `cell-edit`)**:
+    - セルのダブルクリック（またはクリック：`editTrigger: 'dblclick' | 'click'`）による直感的なインライン編集に対応
+    - 組み込みエディタ種別（`text`, `number`, `date`, `datetime`, `month`, `select`）および独自の `HTMLElement` をマウントできるカスタムエディタ関数（`editor: (context) => HTMLElement`）をサポート
+    - セレクトボックス用選択肢（`editorOptions`）、数値入力の最小・最大・ステップ値（`editorMin`, `editorMax`, `editorStep`）、行・タスクごとの編集可否判定（`editable`）、カスタムセッター（`valueSetter`）に対応
+    - 単一タスクの `resizable`（`false` 時は日付・期間編集不可）、`movable`（`'none'` 時は日付・期間編集不可）、`progressResizable`（`false` 時は進捗率編集不可）の設定を考慮したセル編集可否判定に対応
+    - **編集可能セルと読み取り専用セルの視覚的区別**: インライン編集有効時、編集可能なセル（`.grid-cell-editable`: テキストカーソル・ホバーハイライト）と編集不可のセル（`.grid-cell-readonly`: サマリー行・複数タスク行の集計セルやWBS番号セル等のグレーアウト背景・半透明表示）を視覚的に区別（画像・PDFエクスポート時は自動的に通常表示へ正規化）
+    - グリッド有効時は行のドラッグ並び替えおよび行ヘッダーツールチップの表示対象をタスク名（ツリー）セル（`.grid-cell-name`, `.grid-tree-cell`）に限定し、インライン編集中は行のドラッグ並び替えを一時的に無効化することで入力欄内でのテキスト選択操作がスムーズに行えるよう改善
+    - 編集確定時に `cell-edit` および `rows-change` イベントを発火し、操作履歴（Undo / Redo: `command.type === 'cell-edit'`）と完全連動
+    - プログラムからセル編集を制御するパブリックメソッド `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()` を追加
+  - **`cornerContent` とグリッドヘッダーの2段レイアウト共存**:
+    - グリッド有効時に `customRendering.cornerContent` が指定されている場合、左上コーナー領域を上段（`cornerContent`）と下段（グリッドカラムヘッダー）の2段構成で同時表示するよう対応
+  - **カスタムカラム & 自由なデータマッピング**:
+    - `field` による任意オブジェクトプロパティのバインド、および `valueGetter(row, tasks, wbsCode)` / `valueSetter(row, newValue, tasks, column)` による高度なカスタム値の取得・更新に対応
+    - `formatter` による文字列整形、および `renderCell(value, row, tasks, locale)` による `HTMLElement` / HTML 文字列のカスタムレンダリングに対応
+  - **カラム幅のドラッグリサイズ (`column-resize`)**:
+    - カラムヘッダー右端のドラッグ操作により、各カラムの幅を直感的に個別リサイズ可能。リサイズ中・完了時に `column-resize` カスタムイベントを発火し、行クリックやオプション更新時もユーザーのリサイズ幅を保持しつつ、`option.grid.columns` からの明示的な列幅変更にも追従
+  - **スプリッターリサイズ ＆ グリッド内独立横スクロール同期**:
+    - グリッド領域とタイムライン領域を仕切るスプリッターリサイズを完全サポート
+    - カラム合計幅が表示枠を超える場合、トラックパッド横スワイプ、`Shift + ホイール`、またはグリッドヘッダー上のマウスホイール操作による独立横スクロールに対応。ヘッダーセルと各行セルが1pxのズレもなく同期して横スクロール
+  - **React / Vue ラッパーおよび公開ユーティリティの拡充**:
+    - `@mogura/moguchart-react` に `onColumnResize`, `onCellEdit`, `onRowsChange` イベント Props を追加
+    - `@mogura/moguchart-vue` に `@column-resize`, `@cell-edit`, `@rows-change` イベントおよび `startCellEdit`, `commitCellEdit`, `cancelCellEdit` 公開メソッドを追加
+    - グリッド計算・編集用ヘルパー関数（`calculateRowSummaryDates`, `normalizeGridColumns`, `getGridCellValue`, `formatGridCellValue`, `resolveColumnEditorType`, `isGridCellEditable`, `formatGridCellEditValue`, `applyGridCellEdit`）をエクスポート
+  - **多言語（i18n）自動連動 & 完全な後方互換性**:
+    - 日本語（`jaLocale`）および英語（`enLocale`）の言語切り替えと標準カラム名・期間単位が自動連動
+    - `option.grid` 未指定時は、従来の単一ヘッダー表示（`row.name`）として完全互換動作
+
+---
+
+## [1.4.0] - 2026-10-11
+
+### Added
+
+- **予実管理機能（Baseline / 計画 vs 実績の比較可視化）**:
+  - タスクに当初計画（`task.baseline: GanttTaskBaseline`）を持たせることで、計画日程と現在の実績日程を同一レーン上に同時描画・比較できる機能を追加
+  - **3つの柔軟な配置レイアウト (`option.baseline.position`)**:
+    - `'bottom'` (デフォルト): 実績バーの下部にスマート分割して配置。行の高さや仮想スクロールのキャッシュ計算を壊さず、滑らかに表示
+    - `'top'`: 実績バーの上部に配置
+    - `'overlay'`: 実績バーの背後に同一高さで重ねて描画
+  - **遅延ハイライト可視化 (`highlightDelay`, `delayColor`)**:
+    - 実績終了日が計画終了日を超過（`task.end > baseline.end`）しているタスクを自動検知し、遅延アクセント線（`.task-delayed`）で視覚的に強調
+  - **ツールチップの予実連携**:
+    - タスクバーおよびベースラインバーへのホバー時、ツールチップに計画日程（期間・進捗率）および遅延/前倒し状況（「3日遅延」「2日前倒し」等）を多言語（日本語・英語）で自動表示
+  - **サマリータスク（WBS階層）のベースライン自動集計 (`autoSummary`)**:
+    - 配下の子タスク群が持つベースライン日程（最小開始日〜最大終了日）および加重平均進捗率を親のサマリータスクへ自動集計
+  - **ミニマップ（Minimap）描画の完全同期**:
+    - 全体鳥瞰ミニマップ（2D Canvas）にもベースラインバーを同期描画
+  - **公開ユーティリティ関数**:
+    - `calculateTaskDelay(task: GanttTask)`: 個別タスクの遅延・前倒しミリ秒/日数を計算
+    - `calculateProjectBaselineSummary(rows: GanttRow[])`: プロジェクト全体の計画タスク数、遅延タスク数、前倒しタスク数、最大遅延日数等の統計を集計
+- **行ヘッダーダブルクリック時のコンテンツ要素提供 (`contentTarget`)**:
+  - `row-header-dblclick` イベントの detail に `contentTarget?: HTMLElement` を追加
+  - インデントスペーサーやツリートグルアイコンを除いた行名表示領域のDOM要素を直接取得可能にし、行名のインライン編集入力欄の配置やカスタムポップオーバーの配置を容易に改善
+- **フォント倍率に応じたWBSツリーUIの連動スケーリング (`--moguchart-font-scale`)**:
+  - CSS変数 `--moguchart-font-scale`（`option.fontScale`）の値に応じて、ツリートグルボタン（`.tree-toggle-btn`）およびスペーサー（`.tree-toggle-spacer`）の幅、高さ、マージン、角丸、アイコンフォントサイズが動的にスケールするよう改善
+- **WBSサマリータスクへの半透明・フィルタアウト状態の自動連動**:
+  - サマリー行（親行）配下のタスクがフィルタ等で全て半透明化（`_isFilteredOut === true` または `style` に `opacity: 0.x`）されている場合、親のサマリータスク（およびそのベースラインバー）に対しても自動的に半透明スタイル（`opacity: 0.2`）および `labelStyle: 'opacity: 0.2;'` を適用
+  - 遅延ハイライト線（`.task-delayed`）やバーラベル、進捗ラベルも半透明表示（`.filtered-out`）に連動
+- **`scrollToTask` スクロール挙動の最適化 & Vue ラッパーへの公開**:
+  - `packages/vue` の `GanttChart` コンポーネントの公開 API（`GanttChartPublicApi`）に `scrollToTask(taskId: string): void` を追加し、`ref` から目的のタスクへ直接スクロール可能に改善
+  - `scrollToTask` のスクロール挙動を最適化：縦方向と横方向のスクロールが必要な場合に単一の `container.scrollTo` を呼び出し、滑らかに同時スクロール（`behavior: 'smooth'`）するよう改善
+  - 横スクロール時、行ヘッダー幅に加えて左側マージン（40px）を確保し、タスクの開始位置が明瞭に見えるよう視認性を向上
+- **デモ画面へのコントロール追加**:
+  - デモページの操作パネルにベースライン表示切替（ON/OFF）、遅延ハイライト切替（ON/OFF）、配置位置（下部 / 上部 / 重ねて表示）のリアルタイム操作UIを追加
+
+---
+
 ## [1.3.1] - 2026-10-01
 
 ### Fixed
@@ -479,6 +562,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - UMD / ESM 両形式のビルド出力
 - TypeScript 型定義の同梱
 
+[1.4.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.3.1...v1.4.0
+[1.3.1]: https://github.com/hiro-murakami/moguchart-core/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/hiro-murakami/moguchart-core/compare/v1.1.0...v1.1.1

package/CHANGELOG.md

@@ -5,6 +5,88 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2026-10-17
+
+### Added
+
+- **Multi-Column Data Grid Support (WBS Table)**:
+  - Added new option `option.grid` to display and interact with the row header area as a full-featured multi-column data table.
+  - **Built-in Standard Columns**:
+    - `wbs`: WBS hierarchical numbering code (e.g. 1, 1.1, 1.2.1).
+    - `name`: Task / row title with embedded hierarchical tree indentation and expand/collapse toggle.
+    - `startDate` / `startMonth` / `startDateTime`: Task start date, month, or date/time (automatically computes earliest start date for summary rows and multi-task rows).
+    - `endDate` / `endMonth` / `endDateTime`: Task end date, month, or date/time (automatically computes latest end date for summary rows and multi-task rows).
+    - `duration`: Duration / work span in calendar days (or formatted hours/minutes in hourly view mode).
+    - `progress`: Task progress percentage (automatically computes duration-weighted average progress for summary rows and multi-task rows).
+  - **Automatic View-Mode Column Adaptation**:
+    - In Monthly mode (`pxPerMonth` specified), `startDate` / `endDate` headers automatically switch to `Start Month` / `End Month` (`開始月` / `終了月`) and format values as `YYYY/M` (automatically adjusting exclusive end boundary dates to display the previous month).
+    - In Hourly / Time mode (`showTime: true`), `startDate` / `endDate` headers automatically switch to `Start Date/Time` / `End Date/Time` (`開始日時` / `終了日時`), displaying timestamps and time-based duration spans.
+  - **Inline Cell Editing (`option.grid.editable`, `cell-edit`)**:
+    - Support interactive inline cell editing triggered by double-click or single-click (`editTrigger: 'dblclick' | 'click'`).
+    - Built-in editor types (`'text'`, `'number'`, `'date'`, `'datetime'`, `'month'`, `'select'`) as well as custom DOM editor factories (`editor: (context) => HTMLElement`).
+    - Configurable select options (`editorOptions`), numeric bounds (`editorMin`, `editorMax`, `editorStep`), per-row/task editability predicates (`editable`), and custom value setters (`valueSetter`).
+    - Automatic linkage with single-task editability settings (`task.resizable === false` or `task.movable === 'none'` disables date/duration editing; `task.progressResizable === false` disables progress editing).
+    - Visual distinction between editable cells (`.grid-cell-editable`: text cursor and hover highlight) and read-only cells (`.grid-cell-readonly`: dimmed background and semi-transparent text for summary/multi-task aggregated cells and WBS codes; automatically normalized during PNG/PDF export).
+    - Restricts row drag-and-drop reordering and row header tooltips in grid mode to the task name / tree cell (`.grid-cell-name`, `.grid-tree-cell`), and temporarily suppresses row reordering while inline cell editing is active to allow smooth mouse drag text selection.
+    - Dispatches `cell-edit` and `rows-change` custom events upon committing changes, with full Undo / Redo history integration (`command.type === 'cell-edit'`).
+    - Added programmatic editing control methods: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, and `cancelCellEdit()`.
+  - **Custom Columns & Flexible Data Mapping**:
+    - Bind arbitrary row properties using `field`, or extract and update custom values using `valueGetter(row, tasks, wbsCode)` and `valueSetter(row, newValue, tasks, column)`.
+    - Format text outputs with `formatter(value, row, tasks, locale)`, or render rich `HTMLElement` / HTML strings with `renderCell(value, row, tasks, locale)`.
+  - **Two-Tier Corner Header Coexistence**:
+    - When both `option.grid` and `customRendering.cornerContent` are configured, the top-left corner automatically renders in a 2-tier layout with `cornerContent` in the upper row and grid column headers in the lower row.
+  - **Interactive Column Drag Resizing (`column-resize`)**:
+    - Intuitive drag-to-resize handles on column headers. Fires `column-resize` custom events during and upon completing resize operations, preserving user-resized widths across row interactions while also tracking programmatic `option.grid.columns` width updates.
+  - **Splitter Resizing & Synchronized Independent Grid Horizontal Scrolling**:
+    - Seamlessly works with the split pane resizer dividing the grid and timeline areas.
+    - When column widths exceed the grid area width, independent horizontal scrolling activates via trackpad swipe, `Shift + wheel`, or vertical wheel scrolling over the grid header area, with pixel-perfect synchronization (`transform: translateX(-gridScrollLeft)`) across header and row cells.
+  - **React / Vue Wrapper & Exported Utility Enhancements**:
+    - Added `onColumnResize`, `onCellEdit`, and `onRowsChange` event props to `@mogura/moguchart-react`.
+    - Added `@column-resize`, `@cell-edit`, and `@rows-change` emits plus `startCellEdit`, `commitCellEdit`, and `cancelCellEdit` public methods to `@mogura/moguchart-vue`.
+    - Exported grid calculation and editing helper utilities (`calculateRowSummaryDates`, `normalizeGridColumns`, `getGridCellValue`, `formatGridCellValue`, `resolveColumnEditorType`, `isGridCellEditable`, `formatGridCellEditValue`, `applyGridCellEdit`).
+  - **Multi-language (i18n) Synchronization & Complete Backward Compatibility**:
+    - Built-in Japanese (`jaLocale`) and English (`enLocale`) column headers and duration units adapt automatically to the active chart locale.
+    - When `option.grid` is omitted or disabled, the chart operates in classic single-header row name mode with zero breaking changes.
+
+---
+
+## [1.4.0] - 2026-10-11
+
+### Added
+
+- **Baseline & Schedule Variance Tracking (Plan vs. Actual Comparison)**:
+  - Added support for baseline schedules (`task.baseline: GanttTaskBaseline`) allowing concurrent rendering and variance tracking of planned vs. actual project timelines within each row lane.
+  - **Flexible Layout Positions (`option.baseline.position`)**:
+    - `'bottom'` (default): Smartly splits the lane height to render the baseline bar underneath the actual bar without affecting row heights or virtual scrolling performance.
+    - `'top'`: Renders the baseline bar above the actual task bar.
+    - `'overlay'`: Renders the baseline bar directly behind the actual task bar with full height.
+  - **Delay & Variance Highlighting (`highlightDelay`, `delayColor`)**:
+    - Automatically identifies delayed tasks (`task.end > baseline.end`) and displays a distinctive delay accent indicator line (`.task-delayed`).
+  - **Interactive Tooltip Integration**:
+    - Hovering over actual or baseline bars displays the baseline duration span, planned progress, and schedule variance badges (e.g. "+3 days delayed", "2 days ahead") with multi-language support (English and Japanese).
+  - **WBS Parent Summary Aggregation (`autoSummary`)**:
+    - Parent summary rows automatically aggregate earliest start date, latest end date, and duration-weighted average progress from all descendant task baselines.
+  - **Minimap 2D Canvas Synchronization**:
+    - Baseline bars are rendered smoothly onto the bird's-eye overview minimap canvas.
+  - **Exported Utility Functions**:
+    - `calculateTaskDelay(task: GanttTask)`: Calculates schedule variance (delay/ahead in ms and days) for an individual task.
+    - `calculateProjectBaselineSummary(rows: GanttRow[])`: Aggregates project-wide statistics including total baseline tasks, delayed tasks count, ahead tasks count, and max delay days.
+- **Row Header Double-Click Content Target (`contentTarget`)**:
+  - Added `contentTarget?: HTMLElement` to the `row-header-dblclick` event detail, exposing the specific row name content DOM element (excluding indentation spacers and collapse toggle icons) to simplify positioning inline rename inputs and custom floating popovers.
+- **WBS Tree Toggle & Spacer Font Scaling (`--moguchart-font-scale`)**:
+  - Improved `.tree-toggle-btn` and `.tree-toggle-spacer` dimensions, margins, border radius, and icon font size to dynamically scale with the CSS variable `--moguchart-font-scale` (`option.fontScale`), providing proportional WBS tree layouts under custom display scales.
+- **WBS Parent Summary Opacity & Filter State Linking**:
+  - When all leaf/child tasks of a summary row are filtered out (marked with `_isFilteredOut === true` or styled with `opacity: 0.x`), the parent summary task (and its baseline bar) automatically inherits a dimmed semi-transparent style (`opacity: 0.2`) and `labelStyle: 'opacity: 0.2;'`.
+  - Delay accent lines (`.task-delayed`) and progress/task labels also respect the semi-transparent state (`.filtered-out`).
+- **`scrollToTask` Optimization & Vue Wrapper Exposure**:
+  - Added `scrollToTask(taskId: string): void` to the public API (`GanttChartPublicApi`) of `@mogura/moguchart-vue`, enabling direct programmatic scrolling to any task via template `ref`.
+  - Optimized `scrollToTask` scrolling behavior by consolidating simultaneous vertical and horizontal scrolls into a single `container.scrollTo({ behavior: 'smooth' })` call, eliminating scroll stutter.
+  - Added a 40px left-side margin alongside row header width during horizontal scroll for improved task visibility.
+- **Interactive Demo Controls**:
+  - Added live toggle controls to the demo page for Baseline visibility (ON/OFF), Delay Highlighting (ON/OFF), and Placement Position (`bottom` / `top` / `overlay`).
+
+---
+
 ## [1.3.1] - 2026-10-01
 
 ### Fixed
@@ -510,6 +592,8 @@ This milestone introduces comprehensive support for **WBS (Hierarchical Tree Str
 - UMD and ESM dual bundle outputs.
 - Bundled TypeScript type definitions.
 
+[1.4.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.3.1...v1.4.0
+[1.3.1]: https://github.com/hiro-murakami/moguchart-core/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/hiro-murakami/moguchart-core/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/hiro-murakami/moguchart-core/compare/v1.1.0...v1.1.1

package/README.ja.md

@@ -22,7 +22,7 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - 列ヘッダーの幅リサイズ
   - 矩形範囲選択（ラバーバンドドラッグ選択）による複数タスク一括選択（Shift/Ctrl/Cmdキーでの追加選択対応）
   - 複数タスクの選択＆一括ドラッグ（Ctrl/Cmd + クリック、矩形選択）
-  - ダブルクリックや右クリックイベントのハンドリング
+  - ダブルクリック（`contentTarget` で行名DOM要素の直接参照に対応）や右クリックイベントのハンドリング
 - 🎨 **高度なカスタマイズ**:
   - タスクバー、行ヘッダー、ツールチップ、ドラッグ情報のコンテンツを自由にレンダリング可能
   - ライト/ダーク/システムテーマの切り替え＋カスタムカラーテーマ
@@ -40,7 +40,7 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - 祝日判定のカスタムロジック
   - 週の始まり曜日の設定
   - ロケール対応（日本語・英語、カスタムロケールも可能）
-- 🔤 **フォントサイズ倍率 (`fontScale`)**: `fontScale` オプションや CSS 変数 `--moguchart-font-scale` でチャート全体のフォントサイズを一括スケーリング。表示倍率や画面解像度に合わせた文字サイズの最適化に対応
+- 🔤 **フォントサイズ倍率 (`fontScale`)**: `fontScale` オプションや CSS 変数 `--moguchart-font-scale` でチャート全体のフォントサイズを一括スケーリング。カレンダーヘッダーやタスクバーだけでなく、WBSツリートグルボタンやスペーサーの寸法も連動し、高DPIや高密度表示に最適化
 - 🏁 **マイルストーン**: チャート上にマイルストーン（縦線＋名前バッジ）を表示
 - 📍 **マーカー**: 行のタイムライン上に三角形アイコンとラベルで目印を表示
 - 🗺️ **ミニマップ（Overview Minimap）**: チャート全体の鳥瞰プレビュー表示、ドラッグによるスクロール同期・パン操作、クリックジャンプ、ドラッグ移動・リサイズ、折りたたみ対応
@@ -51,22 +51,42 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - サマリータスク（親集計バー）への進捗ラベル自動表示および専用カスタム色（`summaryColor`）対応
   - 進捗変更イベント（`task-progress-change`）の発火
   - 行・プロジェクト全体の進捗率計算ユーティリティ関数
-- 🧩 **プラグインアーキテクチャ**: コア本体を超軽量（数十KB）に保ちつつ、画像・PDFエクスポート等の機能をプラグインとして柔軟に拡張可能
-- 📷 **エクスポート（プラグイン）**: `@mogura/moguchart-plugin-export` による PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、エクスポート時のズーム正規化 `normalizeZoom`、スクロール位置保持）
+- 🧩 **プラグインアーキテクチャ**: コア本体を超軽量（数十KB）に保ちつつ、エクスポート等の機能をプラグインとして柔軟に拡張可能
+- 📷 **画像・PDFエクスポート（プラグイン）**: `@mogura/moguchart-plugin-export` による PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、エクスポート時のズーム正規化 `normalizeZoom`、スクロール位置保持）
+- 📊 **Excelタイムラインエクスポート（プラグイン）**: `@mogura/moguchart-plugin-excel` によるカレンダー日付列にタスク期間が色塗りされた工程表・タイムライン付き Excel (.xlsx) エクスポート（多言語対応 `ja`/`en`/`zh`、WBS階層構造保持、土日祝日の色分け）
+- ✨ **高度なインテグレーション**:
   - 外部からのドラッグ＆ドロップによるタスク作成
   - タスクの移動/コピーモード
   - スナップ機能（時間単位でのグリッドスナップ）
   - 座標から行・日時を取得する `hitTest` メソッド
   - プログラムによるタスク選択＋自動スクロール (`selectTask`)
+  - 目的のタスクへスムーズに移動するスクロールメソッド (`scrollToTask`)
 - 🌳 **WBS（階層ツリー・展開/折りたたみ）**:
   - `parentId` による無制限の親子階層構造
   - インデント表示と開閉トグルボタン（▶/▼）
   - 配下の子タスクから自動計算されるサマリータスクバー（ブラケット形状）
   - サマリータスクバーの色設定（プロジェクト既定色および行単位の個別色指定）
   - 親行におけるサマリータスクと通常タスクの共存・同時描画
+  - 子タスクの半透明化（フィルタアウト）に連動したサマリータスク・ベースラインの自動半透明化
   - 仮想スクロールやミニマップと完全に連動する折りたたみ
   - 階層を壊さない安全なD&D並び替え（子タスクのブロック連動移動・循環参照防止）
   - プログラムからの開閉操作（`toggleRowCollapse`, `collapseAll`, `expandAll`）
+- 📈 **予実管理（Baseline / 計画 vs 実績）**:
+  - タスクの当初計画（`task.baseline`）と実績日程を同一レーン上に同時描画
+  - 3つの配置レイアウト（下部分割 `bottom` / 上部 `top` / 重ねて表示 `overlay`）
+  - 遅延タスク（実績終了日 > 計画終了日）の自動検知と遅延アクセント線（`.task-delayed`）でのハイライト表示
+  - ツールチップでの計画期間・進捗率および遅延/前倒し状況（多言語対応）の表示
+  - WBSサマリータスクにおける配下子タスクの計画日程・進捗率の自動集計
+  - 全体鳥瞰ミニマップ（2D Canvas）との同期描画
+  - タスク遅延計算（`calculateTaskDelay`）およびプロジェクト予実統計集計（`calculateProjectBaselineSummary`）関数
+- 📋 **マルチカラムデータグリッド（WBS テーブル）**:
+  - 行ヘッダー領域を本格的な複数列のテーブルとして表示・操作
+  - 標準組み込みカラム（WBS番号 `wbs`、タスク名 `name`、開始日・開始月・開始日時 `startDate`/`startMonth`/`startDateTime`、終了日・終了月・終了日時 `endDate`/`endMonth`/`endDateTime`、期間 `duration`、進捗率 `progress`）および表示モード（日・週・月・時間）に応じた自動ヘッダー名・フォーマット切り替え
+  - サマリー行・複数タスク行の最小開始日〜最大終了日、カレンダー期間、加重平均進捗率を自動算出
+  - **インラインセル編集**（`option.grid.editable: true`）：ダブルクリックまたはクリックによる直接編集、`text` / `number` / `date` / `datetime` / `month` / `select` の組み込みエディタおよびカスタムエディタ関数、単一タスクの `movable` / `resizable` / `progressResizable` 設定との自動連動、編集可能セル（`.grid-cell-editable`）と読み取り専用セル（`.grid-cell-readonly`）の視覚的区別、Undo/Redo 履歴連動、`cell-edit` イベントに対応
+  - カスタムカラム（`field`、`valueGetter`、`valueSetter`、`formatter`、`renderCell` によるHTML/DOMの直接描画）および `customRendering.cornerContent` との上下2段レイアウト共存
+  - カラム境界ドラッグによる幅のリサイズ（`column-resize` イベント）
+  - グリッド領域とタイムライン領域のスプリッターリサイズ＆グリッド内独立横スクロール同期（トラックパッド横スワイプ、Shift+ホイール、ヘッダー上のホイールに対応）
 - ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでのタスク/依存関係線削除・Undo/Redo・ズームショートカット
 
 ## パッケージ一覧（エコシステム）
@@ -716,6 +736,121 @@ chart.addEventListener('row-toggle-collapse', (e) => {
 })
 ```
 
+### 予実管理（Baseline / 計画 vs 実績の比較可視化）
+
+タスクに当初計画（`task.baseline`）を設定することで、計画日程と現在の実績日程を視覚的に比較できます。
+行の高さや仮想スクロールのキャッシュ計算を崩さず、実績バーの下部または上部・背後にスマートにレイアウトされます。
+
+```javascript
+import { calculateTaskDelay, calculateProjectBaselineSummary } from '@mogura/moguchart-core'
+
+const rows = [
+  {
+    id: 'row-1',
+    name: '機能開発',
+    tasks: [
+      {
+        id: 'task-1',
+        name: 'UIコンポーネント実装',
+        start: new Date('2026-04-01'),
+        end: new Date('2026-04-14'), // 実績: 4/14まで延長
+        progress: 80,
+        baseline: {
+          start: new Date('2026-04-01'),
+          end: new Date('2026-04-10'), // 計画: 4/10完了予定だった（4日遅延）
+          progress: 100,
+        },
+      },
+    ],
+  },
+]
+
+const option = {
+  baseline: {
+    enabled: true, // ベースライン表示を有効化 (デフォルト: false)
+    position: 'bottom', // 'bottom' (下部分割) | 'top' (上部) | 'overlay' (重ねて表示)
+    highlightDelay: true, // 実績が計画を超過した場合にハイライト表示 (デフォルト: true)
+    delayColor: '#ef4444', // 遅延ハイライト色
+    showTooltip: true, // ツールチップに計画日程と遅延日数を表示 (デフォルト: true)
+    autoSummary: true, // WBS親タスクに子タスクの計画日程を自動集計 (デフォルト: true)
+  },
+}
+
+// 個別タスクの遅延・前倒し計算
+const delayInfo = calculateTaskDelay(rows[0].tasks[0])
+console.log(`遅延判定: ${delayInfo.isDelayed}, 遅延日数: ${delayInfo.delayDays}日`)
+
+// プロジェクト全体の予実統計サマリー
+const summary = calculateProjectBaselineSummary(rows)
+console.log(`計画タスク数: ${summary.totalBaselineTasks}, 遅延タスク数: ${summary.delayedTasksCount}, 最大遅延: ${summary.maxDelayDays}日`)
+```
+
+### マルチカラムデータグリッド（WBSテーブル ＆ インライン編集）
+
+行ヘッダー領域を本格的な複数カラムのテーブルとして表示できます。WBS階層コード、タスク名、期間、進捗率、カスタム列を柔軟に構成できるほか、`editable: true` を設定することでセルのダブルクリック（またはクリック）によるインライン編集が可能です（編集可能セルには `.grid-cell-editable`、サマリー行や複数タスク行の集計セル・`wbs` 列などの読み取り専用セルには `.grid-cell-readonly` クラスが付与され視覚的に区別されます。単一タスク行の日付・期間・進捗セルはタスクの `movable` / `resizable` / `progressResizable` 設定とも自動連動します）。
+
+表示モードに応じて、`startDate` / `endDate` の列タイトルや表示フォーマット・エディタ種別は自動的に切り替わります（月単位モード時は「開始月」「終了月」、時間単位モード時は「開始日時」「終了日時」）。また、`customRendering.cornerContent` と併用した場合は、左上コーナー領域の上段に `cornerContent`、下段にグリッドカラムヘッダーが2段構成で表示されます。
+
+```javascript
+const option = {
+  // グリッド表示設定
+  grid: {
+    enabled: true, // グリッド表示を有効化 (デフォルト: columns 指定時は true)
+    width: 700, // グリッド領域全体の初期幅 (px)
+    splitterResizable: true, // スプリッターによるグリッド幅変更を許可 (デフォルト: true)
+    showBorders: true, // セル罫線を表示 (デフォルト: true)
+    editable: true, // セルのインライン編集を有効化 (デフォルト: false)
+    editTrigger: 'dblclick', // 編集開始トリガー ('dblclick' | 'click'、デフォルト: 'dblclick')
+    columns: [
+      { id: 'wbs', width: 60 }, // WBS番号 (1, 1.1, 1.2 など)
+      { id: 'name', width: 220 }, // タスク名 (ツリー開閉トグル付き・テキスト編集)
+      { id: 'startDate', width: 125 }, // 開始日 (日/月/日時エディタに自動連動)
+      { id: 'endDate', width: 125 }, // 終了日 (日/月/日時エディタに自動連動)
+      { id: 'duration', width: 80 }, // 期間 (数値エディタ)
+      { id: 'progress', width: 70 }, // 進捗率 (0〜100% 数値エディタ)
+      {
+        id: 'assignee',
+        title: '担当者',
+        width: 100,
+        field: 'assignee', // row.assignee を参照・更新
+        editor: 'select', // 'text' | 'number' | 'date' | 'datetime' | 'month' | 'select' またはカスタム関数
+        editorOptions: [
+          { label: '山田', value: '山田' },
+          { label: '佐藤', value: '佐藤' },
+          { label: '鈴木', value: '鈴木' },
+        ],
+        renderCell: (value) => {
+          // カスタムDOM要素のレンダリング
+          const badge = document.createElement('span')
+          badge.className = 'badge'
+          badge.textContent = value || '未設定'
+          return badge
+        },
+      },
+    ],
+  },
+}
+
+// セルのインライン編集確定イベントの購読
+chart.addEventListener('cell-edit', (event) => {
+  const { rowId, columnId, oldValue, newValue, row, rows } = event.detail
+  console.log(`行 ${rowId} の ${columnId} が更新されました:`, oldValue, '->', newValue)
+})
+
+// カラム幅リサイズイベントの購読
+chart.addEventListener('column-resize', (event) => {
+  const { columnId, width, previousWidth, isFinal } = event.detail
+  if (isFinal) {
+    console.log(`カラム ${columnId} の幅が ${width}px に変更されました`)
+  }
+})
+
+// プログラムからのセル編集制御
+chart.startCellEdit('row-1', 'name') // 編集開始
+chart.commitCellEdit('新しいタスク名') // 編集確定
+chart.cancelCellEdit() // 編集キャンセル
+```
+
 ### パブリックメソッド
 
 #### selectTask
@@ -740,6 +875,26 @@ document.addEventListener('mousemove', (e) => {
 })
 ```
 
+#### scrollToTask
+
+指定したIDのタスクが表示領域外にある場合、タスクが見える位置までスムーズにスクロールします（縦方向は中央付近、横方向は行ヘッダー幅とマージンを考慮）。
+
+```javascript
+chart.scrollToTask('task-1')
+```
+
+#### scrollToPosition / resetScroll
+
+指定したスクロール座標への移動や、スクロール位置の初期化を行います。
+
+```javascript
+// スムーズスクロール
+chart.scrollToPosition({ left: 400, top: 200, behavior: 'smooth' })
+
+// 左上 (0, 0) にリセット
+chart.resetScroll()
+```
+
 #### エクスポートプラグイン (`@mogura/moguchart-plugin-export`)
 
 ガントチャート全体を PNG 画像または PDF 形式でエクスポートします。エクスポート機能はプラグイン（`@mogura/moguchart-plugin-export`）として提供されており、必要な場合のみ導入することでコア本体を超軽量に保てます。
@@ -927,6 +1082,18 @@ import {
   calculateRowProgress,
   calculateWeightedRowProgress,
   calculateProjectProgress,
+  // 予実管理（ベースライン）計算
+  calculateTaskDelay,
+  calculateProjectBaselineSummary,
+  // マルチカラムグリッド計算・インライン編集ヘルパー
+  calculateRowSummaryDates,
+  normalizeGridColumns,
+  getGridCellValue,
+  formatGridCellValue,
+  resolveColumnEditorType,
+  isGridCellEditable,
+  formatGridCellEditValue,
+  applyGridCellEdit,
 } from '@mogura/moguchart-core'
 
 // 1. 各行のツリー階層レベル（深さ）の計算
@@ -950,6 +1117,9 @@ const isSafe = canDropRow('source-row-id', 'target-row-id', rows) // boolean
 
 // 7. クリティカルパス（最長依存関係チェーン）の計算
 const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
+
+// 8. 行内のタスク配列から最小開始日・最大終了日・期間日数を算出
+const summaryDates = calculateRowSummaryDates(rows[0].tasks) // { start, end, durationDays }
 ```
 
 ### キーボード操作