@mogura/moguchart-core 1.3.0 → 1.4.0

package/CHANGELOG.ja.md

@@ -5,6 +5,54 @@ 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.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
+
+- **読み取り専用モードにおける進捗率リサイズの制御を修正**:
+  - `readOnly: true` が有効な場合でも、タスク単位で `progressResizable: true` が指定されている場合に、進捗率のリサイズ・変更操作が反映されるよう修正
+  - `task.progressResizable === false` が明示指定されたタスクについて、進捗率の変更操作が確実に無効化されるガード処理を追加
+
+---
+
 ## [1.3.0] - 2026-09-27
 
 ### Added
@@ -469,6 +517,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,53 @@ 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.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
+
+- **Fix Task Progress Resize Control in Read-Only Mode**:
+  - Allowed task progress changes when `task.progressResizable` is explicitly set to `true`, even if `readOnly` mode is enabled.
+  - Added a guard to prevent progress changes if `task.progressResizable` is explicitly `false`.
+
+---
+
 ## [1.3.0] - 2026-09-27
 
 ### Added
@@ -500,6 +547,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,34 @@ 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`）関数
 - ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでのタスク/依存関係線削除・Undo/Redo・ズームショートカット
 
 ## パッケージ一覧（エコシステム）
@@ -716,6 +728,55 @@ 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}日`)
+```
+
 ### パブリックメソッド
 
 #### selectTask
@@ -740,6 +801,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`）として提供されており、必要な場合のみ導入することでコア本体を超軽量に保てます。

package/README.md

@@ -23,7 +23,7 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Marquee selection (rubberband drag selection) for batch task selection (with Shift / Ctrl / Cmd additive selection support)
   - Multi-task selection and synchronized batch dragging (Ctrl / Cmd + click, marquee selection)
   - Safe drag cancellation and snapback when cursor exits chart boundaries
-  - Double-click and right-click event handling
+  - Double-click (exposing row name DOM container via `contentTarget`) and right-click event handling
 - 🎨 **Highly Customizable**:
   - Custom rendering for task bars, row headers, row header tooltips, tooltips, and drag info overlays
   - Light / Dark / System theme switching + custom color palettes
@@ -42,7 +42,7 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Custom holiday detection logic
   - Configurable week start day
   - Built-in internationalization (Japanese, English, and custom locale extensibility)
-- 🔤 **Font Scaling (`fontScale`)**: Scale all text font sizes throughout the Gantt chart uniformly via `fontScale` option or `--moguchart-font-scale` CSS variable, ideal for responsive zooming and high-density views.
+- 🔤 **Font Scaling (`fontScale`)**: Scale all text font sizes throughout the Gantt chart uniformly via `fontScale` option or `--moguchart-font-scale` CSS variable; calendar headers, task bars, as well as WBS tree toggle buttons and spacers scale dynamically to guarantee optimal layouts across display densities.
 - 🏁 **Milestones**: Display key milestones with vertical markers and customizable badges.
 - 📍 **Markers**: Place labeled triangle marker indicators on individual row timelines.
 - 🗺️ **Overview Minimap**: Floating bird's-eye canvas preview of the entire chart, interactive pan & scroll synchronization, click-to-jump, drag-to-move, edge drag-resizing, opacity slider, and collapsible window state.
@@ -54,14 +54,16 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - `task-progress-change` custom event
   - Progress calculation utility functions (simple & duration-weighted row/project averages)
   - Automatic progress visualization on the overview minimap
-- 🧩 **Plugin Architecture**: Modular architecture keeping the core bundle ultra-lightweight (tens of KBs) while allowing rich extensions like PNG/PDF exports.
-- 📷 **Export Plugin**: Full Gantt chart PNG image and multi-page PDF export powered by `@mogura/moguchart-plugin-export` (with automatic zoom normalization `normalizeZoom`, scroll position preservation, and auto-download support).
+- 🧩 **Plugin Architecture**: Modular architecture keeping the core bundle ultra-lightweight (tens of KBs) while allowing rich extensions like exports.
+- 📷 **Image & PDF Export Plugin**: Full Gantt chart PNG image and multi-page PDF export powered by `@mogura/moguchart-plugin-export` (with automatic zoom normalization `normalizeZoom`, scroll position preservation, and auto-download support).
+- 📊 **Excel Spreadsheet Export Plugin**: Styled Excel (.xlsx) schedule and timeline export powered by `@mogura/moguchart-plugin-excel` (multi-language support `ja`/`en`/`zh`, WBS hierarchy preservation, cell-shaded task duration bars, and holiday formatting).
 - ✨ **Advanced Integration**:
   - External drag & drop for task creation
   - Task move / copy modes
   - Snap feature (time unit grid snapping, automatic monthly boundary snap in month view)
   - `hitTest` method for calculating row ID and datetime from screen coordinates
   - Programmatic task selection + auto-scroll (`selectTask`)
+  - Smooth programmatic scroll to any specific task (`scrollToTask`)
   - Row layout coordinates inspection (`getRowPositions`)
 - 🌳 **WBS (Hierarchical Tree & Collapsible Rows)**:
   - Unlimited parent-child hierarchy via `parentId`
@@ -70,9 +72,18 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Configurable summary task bar colors (chart default `summaryColor` and row-level `summaryColor` overrides)
   - Coexistence of summary task bars and normal tasks within parent rows (two-lane rendering)
   - Configurable progress label display on summary task bars (`showSummaryLabel`)
+  - Automated opacity & dimmed styling linking when all child tasks are filtered out
   - Collapsing seamlessly integrated with virtual scrolling and overview minimap
   - Safe drag & drop reordering preserving hierarchy (prevents circular nesting, moves subtrees together)
   - Programmatic expand/collapse methods (`toggleRowCollapse`, `collapseAll`, `expandAll`)
+- 📈 **Baseline & Schedule Variance Tracking (Plan vs. Actual)**:
+  - Concurrent rendering of planned baseline schedules (`task.baseline`) and actual timelines within each row lane
+  - Three versatile placement layouts: smart split below actual bar (`bottom`), above (`top`), or behind (`overlay`)
+  - Delay highlighting: automatically marks delayed tasks (`task.end > baseline.end`) with an accent line indicator (`.task-delayed`)
+  - Rich tooltip integration with planned duration, progress, and delay/early schedule variance badges
+  - WBS parent summary aggregation of descendant task baselines
+  - Synchronized bird's-eye rendering on the overview minimap (2D Canvas)
+  - Helper functions for individual task variance (`calculateTaskDelay`) and project-wide statistics (`calculateProjectBaselineSummary`)
 - ⌨️ **Keyboard Navigation & Shortcuts**: Arrow key navigation & selection, Shift + Arrow task movement, Delete / Backspace task & dependency deletion, Undo / Redo (`Ctrl+Z` / `Ctrl+Y`), and zoom controls.
 
 ## Packages (Ecosystem)
@@ -735,6 +746,55 @@ chart.addEventListener('row-toggle-collapse', (e) => {
 })
 ```
 
+### Baseline & Variance Tracking (Plan vs. Actual Comparison)
+
+Configure baseline schedules on tasks (`task.baseline`) to compare planned dates and progress against actual performance side-by-side.
+The layout seamlessly adapts without altering overall row heights or impacting virtual scrolling performance.
+
+```javascript
+import { calculateTaskDelay, calculateProjectBaselineSummary } from '@mogura/moguchart-core'
+
+const rows = [
+  {
+    id: 'row-1',
+    name: 'Feature Engineering',
+    tasks: [
+      {
+        id: 'task-1',
+        name: 'UI Implementation',
+        start: new Date('2026-04-01'),
+        end: new Date('2026-04-14'), // Actual: extended to April 14
+        progress: 80,
+        baseline: {
+          start: new Date('2026-04-01'),
+          end: new Date('2026-04-10'), // Planned: scheduled for April 10 (4 days delay)
+          progress: 100,
+        },
+      },
+    ],
+  },
+]
+
+const option = {
+  baseline: {
+    enabled: true, // Enable baseline rendering (default: false)
+    position: 'bottom', // 'bottom' (split below) | 'top' (above) | 'overlay' (layered behind)
+    highlightDelay: true, // Highlight tasks where actual end exceeds baseline end (default: true)
+    delayColor: '#ef4444', // Highlight color for delayed tasks
+    showTooltip: true, // Show baseline dates and delay variance in tooltips (default: true)
+    autoSummary: true, // Automatically aggregate child baselines in WBS parent summary rows (default: true)
+  },
+}
+
+// Calculate delay or early completion for an individual task
+const delayInfo = calculateTaskDelay(rows[0].tasks[0])
+console.log(`Is delayed: ${delayInfo.isDelayed}, Delay in days: ${delayInfo.delayDays}`)
+
+// Aggregate project-wide baseline statistics
+const summary = calculateProjectBaselineSummary(rows)
+console.log(`Total: ${summary.totalBaselineTasks}, Delayed: ${summary.delayedTasksCount}, Max delay: ${summary.maxDelayDays} days`)
+```
+
 ### Public Methods
 
 #### selectTask
@@ -759,6 +819,26 @@ document.addEventListener('mousemove', (e) => {
 })
 ```
 
+#### scrollToTask
+
+Smoothly scrolls the Gantt chart container so that the specified task comes into view (centered vertically, with row header width and an extra 40px margin applied horizontally).
+
+```javascript
+chart.scrollToTask('task-1')
+```
+
+#### scrollToPosition / resetScroll
+
+Scrolls to specific coordinates or resets scroll back to origin.
+
+```javascript
+// Smooth scroll to position
+chart.scrollToPosition({ left: 400, top: 200, behavior: 'smooth' })
+
+// Reset scroll to top-left (0, 0)
+chart.resetScroll()
+```
+
 #### Export Plugin (`@mogura/moguchart-plugin-export`)
 
 Export the entire Gantt chart to a PNG image or PDF document. The export feature is packaged as a dedicated modular plugin (`@mogura/moguchart-plugin-export`) to keep the core bundle ultra-lightweight.

package/dist/components/gantt-bar.d.ts

@@ -35,6 +35,8 @@ export declare class GanttBarElement extends LitElement {
     private onMouseMoveOnBar;
     private onMouseEnter;
     private onMouseLeave;
+    private onBaselineMouseEnter;
+    private onBaselineMouseLeave;
     private onDblClick;
     private onClick;
     private onConnectorDragStart;

package/dist/core/i18n.d.ts

@@ -33,6 +33,14 @@ export interface MoguchartLocale {
         duration: (days: number) => string;
         /** 進捗率の表示 (例: 75 → "進捗: 75%" / "Progress: 75%") (オプション) */
         progress?: (percent: number) => string;
+        /** ベースラインの表示 (例: "計画: 2024/1/1 - 2024/1/10 (10日)") */
+        baseline?: (startStr: string, endStr: string, days: number) => string;
+        /** 遅延の表示 (例: "+3日遅れ" / "+3 days delay") */
+        delay?: (days: number) => string;
+        /** 前倒しの表示 (例: "-2日前倒し" / "2 days ahead") */
+        ahead?: (days: number) => string;
+        /** 計画通りの表示 (例: "計画通り" / "On schedule") */
+        onSchedule?: string;
     };
     /** ドラッグオーバーレイの文字列 */
     dragOverlay: {

package/dist/core/types.d.ts

@@ -47,6 +47,23 @@ export interface GanttMarker {
     /** マーカーのカスタムスタイル (CSS文字列) */
     style?: string;
 }
+/**
+ * タスクの当初計画（ベースライン）を表すインターフェース
+ */
+export interface GanttTaskBaseline {
+    /** 計画開始日時 */
+    start: Date;
+    /** 計画終了日時 */
+    end: Date;
+    /** 計画進捗率 (0〜100、省略可能) */
+    progress?: number;
+    /** ベースラインバーのカスタムスタイル (CSS文字列) */
+    style?: string;
+    /** ベースラインバーのカスタム色 (CSSカラー文字列) */
+    color?: string;
+    /** ベースライン名またはメモ（省略可能） */
+    name?: string;
+}
 /**
  * ガントチャート上の個々のタスクを表すインターフェース
  */
@@ -87,6 +104,8 @@ export interface GanttTask {
     progressResizable?: boolean;
     /** タスクの種別 ('task': 通常, 'summary': 親サマリー集計バー, 'milestone': マイルストーン) */
     type?: 'task' | 'summary' | 'milestone';
+    /** 当初計画（ベースライン）の日程情報 */
+    baseline?: GanttTaskBaseline;
 }
 /**
  * ガントチャートの行を表すインターフェース
@@ -418,6 +437,36 @@ export interface GanttChartOption {
     plugins?: GanttPlugin[];
     /** 操作履歴・Undo/Redoの設定 */
     history?: GanttChartOptionHistory;
+    /** 予実管理（ベースライン）の設定 */
+    baseline?: GanttChartOptionBaseline;
+}
+/**
+ * ベースライン（予実管理）機能に関するオプション
+ */
+export interface GanttChartOptionBaseline {
+    /** ベースライン表示を有効にするかどうか (デフォルト: false) */
+    enabled?: boolean;
+    /**
+     * ベースラインバーの配置位置
+     * - 'bottom': 実績タスクバーの下部に配置（デフォルト）
+     * - 'top': 実績タスクバーの上部に配置
+     * - 'overlay': 実績タスクバーと重なるように背後に配置
+     */
+    position?: 'bottom' | 'top' | 'overlay';
+    /** ベースラインバーの高さ (px)。未指定時は自動計算（bottom/top時は 6px程度、overlay時は barHeight と同等） */
+    height?: number;
+    /** ベースラインバーのデフォルト色 (CSSカラー文字列、デフォルト: '#94a3b8'） */
+    color?: string;
+    /** ベースラインバーの角丸半径 (px)。未指定時は 2px */
+    cornerRadius?: number;
+    /** 遅延タスク（実績終了日 > 計画終了日）のハイライトを行うかどうか (デフォルト: true) */
+    highlightDelay?: boolean;
+    /** 遅延ハイライト時の強調色 (CSSカラー文字列、デフォルト: '#ef4444'） */
+    delayColor?: string;
+    /** ツールチップに計画日程と遅延日数を表示するかどうか (デフォルト: true) */
+    showTooltip?: boolean;
+    /** サマリータスク（親行）のベースラインを配下タスクから自動計算するかどうか (デフォルト: true) */
+    autoSummary?: boolean;
 }
 /**
  * ズーム機能に関するオプション
@@ -725,6 +774,8 @@ export interface RowHeaderDblClickEventDetail {
     event: MouseEvent;
     /** ダブルクリックされたヘッダー要素 */
     target: HTMLElement;
+    /** ダブルクリックされた行名コンテンツ要素（インデントやトグルアイコンを除いた領域） */
+    contentTarget?: HTMLElement;
 }
 /**
  * 行ヘッダー右クリックイベントの詳細

package/dist/core/utils.d.ts

@@ -82,3 +82,30 @@ export declare function calculateWeightedRowProgress(rowOrTasks: GanttRow | Gant
  * @returns プロジェクト全体の加重平均進捗率 (0〜100)
  */
 export declare function calculateProjectProgress(rows: GanttRow[]): number;
+/**
+ * タスクの当初計画（ベースライン）に対する遅延・前倒し状況を計算します。
+ *
+ * @param task 対象タスク
+ * @returns 遅延状況オブジェクト
+ */
+export declare function calculateTaskDelay(task: GanttTask): {
+    isDelayed: boolean;
+    delayMs: number;
+    delayDays: number;
+    isAhead: boolean;
+    aheadMs: number;
+    aheadDays: number;
+};
+/**
+ * プロジェクト全体（全行）のベースラインに対する進捗・遅延の要約を計算します。
+ *
+ * @param rows ガントチャートの全行
+ * @returns 要約統計オブジェクト
+ */
+export declare function calculateProjectBaselineSummary(rows: GanttRow[]): {
+    totalBaselineTasks: number;
+    delayedTasksCount: number;
+    aheadTasksCount: number;
+    onScheduleTasksCount: number;
+    maxDelayDays: number;
+};

package/dist/index.d.ts

@@ -9,6 +9,6 @@ export * from './core/patterns';
 export * from './core/i18n';
 export * from './core/plugin';
 export * from './core/history';
-export { clampProgress, calculateRowProgress, calculateWeightedRowProgress, calculateProjectProgress, getThemeColors, } from './core/utils';
+export { clampProgress, calculateRowProgress, calculateWeightedRowProgress, calculateProjectProgress, calculateTaskDelay, calculateProjectBaselineSummary, getThemeColors, } from './core/utils';
 export { computeCriticalPath } from './core/critical-path';
 export { computeRowLevels, computeRowWbsCodes, computeChildRowIds, computeVisibleTreeRows, computeSummaryTask, canDropRow, } from './core/wbs';