@mogura/moguchart-core 0.7.0 → 0.8.0

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

@@ -41,6 +41,10 @@ export declare class GanttRowElement extends LitElement {
      * マーカーのSVGパスを生成する
      */
     private getMarkerPath;
+    /**
+     * マーカーのフォントサイズ名をpx値に変換する
+     */
+    private resolveMarkerFontSize;
     /**
      * マーカーの表示幅を推定する（アイコン＋ラベル）
      */
@@ -58,6 +62,10 @@ export declare class GanttRowElement extends LitElement {
     private handleHeaderClick;
     private handleHeaderContextMenu;
     private handleHeaderDblClick;
+    private _rowHeaderTooltipEl;
+    private _rowHeaderTooltipTimer;
+    private handleHeaderMouseEnter;
+    private handleHeaderMouseLeave;
     protected updated(changedProperties: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/core/types.d.ts

@@ -20,6 +20,10 @@ export type MarkerType = 'triangle-up' | 'triangle-down' | 'triangle-left' | 'tr
  * マーカーのアンカー位置
  */
 export type AnchorType = 'start' | 'end' | 'center';
+/**
+ * マーカーのフォントサイズ
+ */
+export type MarkerFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * マーカーの設定
  */
@@ -36,6 +40,8 @@ export interface GanttMarker {
     type: MarkerType;
     /** マーカーの色 (CSS color string) */
     color?: string;
+    /** マーカーのラベルのフォントサイズ ('xs'=極小, 'sm'=小, 'md'=中, 'lg'=大, 'xl'=特大) */
+    fontSize?: MarkerFontSize;
     /** マーカーのカスタムスタイル (CSS文字列) */
     style?: string;
 }
@@ -82,6 +88,8 @@ export interface GanttRow {
     tasks: GanttTask[];
     /** マーカーの配列 */
     markers?: GanttMarker[];
+    /** 現在選択中（編集中）のマーカーID */
+    selectedMarkerId?: string;
     /** 行を表示するかどうか (デフォルト: true) */
     visible?: boolean;
 }
@@ -285,6 +293,8 @@ export interface GanttChartOptionCustomRendering {
     calendarHourContent?: (context: CalendarHourCellContext) => string | unknown;
     /** ガントチャート部の背景セルをレンダリングする関数。各日のセルごとに呼ばれ、HTML文字列またはTemplateResultを返す */
     chartBackground?: (context: ChartBackgroundCellContext) => string | unknown;
+    /** 行ヘッダーのツールチップコンテンツをレンダリングする関数。マウスホバー時に呼ばれる */
+    rowHeaderTooltip?: (row: GanttRow) => string | HTMLElement | unknown;
 }
 /**
  * チャート背景右クリックイベントの詳細データ
@@ -618,6 +628,28 @@ export interface DependencyClickEventDetail {
     /** 元のマウスイベント */
     event: MouseEvent;
 }
+/**
+ * マーカーダブルクリックイベントの詳細データ
+ */
+export interface MarkerDblClickEventDetail {
+    /** 対象のマーカー */
+    marker: GanttMarker;
+    /** マーカーが属する行ID */
+    rowId: string;
+    /** 元のマウスイベント */
+    event: MouseEvent;
+}
+/**
+ * マーカー右クリック（コンテキストメニュー）イベントの詳細データ
+ */
+export interface MarkerContextMenuEventDetail {
+    /** 対象のマーカー */
+    marker: GanttMarker;
+    /** マーカーが属する行ID */
+    rowId: string;
+    /** 元のマウスイベント */
+    event: MouseEvent;
+}
 /**
  * タスク削除イベントの詳細データ
  */

package/dist/moguchart-core.mjs

@@ -1019,6 +1019,9 @@ var H = class extends e {
       transition: opacity 0.2s ease;
       cursor: default;
     }
+    .milestone-badge.milestone-hovered {
+      z-index: 200;
+    }
     .milestone-connector {
       position: absolute;
       top: 19px;
@@ -1029,6 +1032,9 @@ var H = class extends e {
       transition: opacity 0.2s ease;
       cursor: default;
     }
+    .milestone-connector.milestone-hovered {
+      z-index: 199;
+    }
   `;
 	}
 	getDateX(e) {
@@ -1297,7 +1303,7 @@ var H = class extends e {
             ` : ""}
         ${(this.option.calendar.milestones ?? []).map((e) => n`
             <div
-              class="milestone-connector"
+              class="milestone-connector ${this.hoveredMilestoneId === e.id ? "milestone-hovered" : ""}"
               style="
                 left: ${this.getDateX(e.start) + 1}px;
                 width: ${e.width ?? 2}px;
@@ -1320,7 +1326,7 @@ var H = class extends e {
 		}}"
             ></div>
             <div
-              class="milestone-badge"
+              class="milestone-badge ${this.hoveredMilestoneId === e.id ? "milestone-hovered" : ""}"
               style="
                 left: ${this.getDateX(e.start)}px;
                 background-color: ${e.color};
@@ -1427,7 +1433,7 @@ B([s({ type: Object })], U.prototype, "option", void 0), B([s({ type: String })]
 //#region src/components/gantt-row.ts
 var W = class extends e {
 	constructor(...e) {
-		super(...e), this.isDragTarget = !1, this.draggingTask = null, this.draggingTaskIds = [], this.multiDragDx = 0, this.multiDragDy = 0, this.multiDragSameRow = !1, this.externalDragTask = null, this.theme = "light", this.isSelected = !1, this.dropPosition = null, this.selectedTaskIds = [], this.focusedTaskId = null, this.isExporting = !1, this.criticalPathTaskIds = [], this._cachedMonthGridLines = null, this._cachedMonthGridStartTime = 0, this._cachedMonthGridEndTime = 0, this._cachedMonthGridPxPerDay = 0, this._cachedMonthGridPxPerMonth = 0;
+		super(...e), this.isDragTarget = !1, this.draggingTask = null, this.draggingTaskIds = [], this.multiDragDx = 0, this.multiDragDy = 0, this.multiDragSameRow = !1, this.externalDragTask = null, this.theme = "light", this.isSelected = !1, this.dropPosition = null, this.selectedTaskIds = [], this.focusedTaskId = null, this.isExporting = !1, this.criticalPathTaskIds = [], this._cachedMonthGridLines = null, this._cachedMonthGridStartTime = 0, this._cachedMonthGridEndTime = 0, this._cachedMonthGridPxPerDay = 0, this._cachedMonthGridPxPerMonth = 0, this._rowHeaderTooltipEl = null;
 	}
 	getDateX(e) {
 		return M(e, this.option.calendar.start, this.option.calendar.pxPerDay, this.option.calendar.pxPerMonth);
@@ -1444,26 +1450,28 @@ var W = class extends e {
 			default: return `M 0 ${t} L ${n} 0 L ${t} ${t} Z`;
 		}
 	}
+	resolveMarkerFontSize(e) {
+		switch (e) {
+			case "xs": return 8;
+			case "sm": return 10;
+			case "md": return 12;
+			case "lg": return 14;
+			case "xl": return 18;
+			default: return 10;
+		}
+	}
 	estimateMarkerWidth(e, t) {
-		let n = e.name ? e.name.length * 7 + 4 : 0;
-		return e.anchor === "center" ? t : t + n;
+		let n = this.resolveMarkerFontSize(e.fontSize) * .7, r = e.name ? e.name.length * n + 4 : 0;
+		return e.anchor === "center" ? t : t + r;
 	}
 	getMarkerXRange(e, t) {
-		let n = this.getDateX(e.date), r = this.estimateMarkerWidth(e, t), i = e.anchor === "center", a = e.anchor === "end", o;
-		if (o = e.anchor === "start" ? n : e.anchor === "end" ? n - t : n - t / 2, i) return {
-			left: o,
-			right: o + t
-		};
-		if (a) {
-			let e = r - t;
-			return {
-				left: o - e,
-				right: o + t
-			};
-		}
-		return {
-			left: o,
-			right: o + r
+		let n = this.getDateX(e.date), r = this.estimateMarkerWidth(e, t), i = e.anchor === "center", a;
+		return a = e.anchor === "start" ? n : e.anchor === "end" ? n - r : n - t / 2, i ? {
+			left: a,
+			right: a + t
+		} : {
+			left: a,
+			right: a + r
 		};
 	}
 	calculateMarkerLanes(e, t) {
@@ -1549,6 +1557,33 @@ var W = class extends e {
       flex: none;
       position: relative;
     }
+    .marker-wrapper {
+      transition: transform 0.15s ease, filter 0.15s ease;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .marker-wrapper.marker-anchor-end {
+      transform: translateX(-100%);
+    }
+    .marker-wrapper:hover {
+      transform: scale(1.3);
+      filter: brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,255,255,0.5));
+      z-index: 10 !important;
+    }
+    .marker-wrapper.marker-anchor-end:hover {
+      transform: translateX(-100%) scale(1.3);
+    }
+    .marker-wrapper.marker-selected {
+      filter: brightness(1.2) drop-shadow(0 0 6px rgba(59,130,246,0.7)) drop-shadow(0 0 10px rgba(59,130,246,0.4));
+      z-index: 10 !important;
+    }
+    .marker-wrapper.marker-selected .marker-icon {
+      animation: marker-pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes marker-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.65; }
+    }
     .grid-background {
       position: absolute;
       top: 0;
@@ -1560,7 +1595,7 @@ var W = class extends e {
   `;
 	}
 	handleDragStart(e) {
-		if (this.isSelected || this.dispatchEvent(new CustomEvent("row-clicked", {
+		if (this.handleHeaderMouseLeave(), this.isSelected || this.dispatchEvent(new CustomEvent("row-clicked", {
 			detail: {
 				rowId: this.row.id,
 				event: e
@@ -1626,6 +1661,26 @@ var W = class extends e {
 			composed: !0
 		}));
 	}
+	handleHeaderMouseEnter(e) {
+		let t = this.option.customRendering?.rowHeaderTooltip;
+		if (!t) return;
+		let n = this.option.tooltipDelay ?? 500, i = e.currentTarget, a = () => {
+			let e = t(this.row);
+			if (!e) return;
+			let n = document.createElement("div");
+			n.style.position = "fixed", n.style.zIndex = "9999", n.style.pointerEvents = "none", n.style.opacity = "0", n.style.transition = "opacity 0.15s ease", n.style.maxWidth = "360px", n.style.borderRadius = "8px", n.style.padding = "8px 12px", n.style.fontSize = "12px", n.style.lineHeight = "1.5", n.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+			let a = F(this.theme, this.option.customTheme);
+			n.style.backgroundColor = a.tooltipBg, n.style.color = a.tooltipText, typeof e == "string" ? n.textContent = e : e instanceof HTMLElement ? n.appendChild(e) : r(e, n), document.body.appendChild(n), this._rowHeaderTooltipEl = n;
+			let o = i.getBoundingClientRect(), s = n.getBoundingClientRect(), c = o.right + 6, l = o.top;
+			c + s.width > window.innerWidth - 6 && (c = o.left - s.width - 6), l + s.height > window.innerHeight - 6 && (l = window.innerHeight - s.height - 6), l < 6 && (l = 6), n.style.left = `${c}px`, n.style.top = `${l}px`, requestAnimationFrame(() => {
+				n.style.opacity = "1";
+			});
+		};
+		n > 0 ? this._rowHeaderTooltipTimer = window.setTimeout(a, n) : a();
+	}
+	handleHeaderMouseLeave() {
+		this._rowHeaderTooltipTimer !== void 0 && (window.clearTimeout(this._rowHeaderTooltipTimer), this._rowHeaderTooltipTimer = void 0), this._rowHeaderTooltipEl &&= (this._rowHeaderTooltipEl.remove(), null);
+	}
 	updated(e) {
 		if (super.updated(e), !(e.has("row") || e.has("option") || e.has("isSelected") || e.has("theme"))) return;
 		let t = this.shadowRoot?.querySelector(".row-header-content");
@@ -1762,6 +1817,8 @@ var W = class extends e {
           @click="${this.handleHeaderClick}"
           @dblclick="${this.handleHeaderDblClick}"
           @contextmenu="${this.handleHeaderContextMenu}"
+          @mouseenter="${this.handleHeaderMouseEnter}"
+          @mouseleave="${this.handleHeaderMouseLeave}"
         >
           <div
             class="row-header-content"
@@ -1806,41 +1863,63 @@ var W = class extends e {
               `;
 		})}
           ${f.map(({ marker: e, lane: t }) => {
-			let r = this.getDateX(e.date), i = e.color ?? "#ef4444", a = e.anchor === "center", o = (a ? m / 2 - l : (m - l) / 2) + t * d, s = e.anchor === "start" ? r : e.anchor === "end" ? r - l : r - l / 2, c = e.anchor === "end";
+			let r = this.getDateX(e.date), i = e.color ?? "#ef4444", a = this.resolveMarkerFontSize(e.fontSize), s = Math.min(o, Math.max(8, Math.round(a * 1.2))), c = e.anchor === "center", l = (c ? m / 2 - s : (m - s) / 2) + t * d, u = e.anchor === "start" || e.anchor === "end" ? r : r - s / 2, f = e.anchor === "end", p = f;
 			return n`
               <div
-                class="marker-wrapper"
+                class="marker-wrapper${this.row.selectedMarkerId === e.id ? " marker-selected" : ""}${f ? " marker-anchor-end" : ""}"
                 style="
                   position: absolute;
-                  left: ${s}px;
-                  top: ${o}px;
+                  left: ${u}px;
+                  top: ${l}px;
                   z-index: 2;
                   display: flex;
-                  ${a ? `flex-direction: column; align-items: center; width: ${l}px; overflow: visible;` : `align-items: center; ${c ? "flex-direction: row-reverse;" : ""}`}
+                  ${c ? `flex-direction: column; align-items: center; width: ${s}px; overflow: visible;` : `align-items: center; ${p ? "flex-direction: row-reverse;" : ""}`}
                   pointer-events: auto;
-                  cursor: default;
+                  cursor: pointer;
                   white-space: nowrap;
                 "
                 title="${e.name ?? ""}"
+                @dblclick="${(t) => {
+				t.preventDefault(), t.stopPropagation(), window.getSelection()?.removeAllRanges(), this.dispatchEvent(new CustomEvent("marker-dblclick", {
+					detail: {
+						marker: e,
+						rowId: this.row.id,
+						event: t
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			}}"
+                @contextmenu="${(t) => {
+				t.preventDefault(), t.stopPropagation(), this.dispatchEvent(new CustomEvent("marker-contextmenu", {
+					detail: {
+						marker: e,
+						rowId: this.row.id,
+						event: t
+					},
+					bubbles: !0,
+					composed: !0
+				}));
+			}}"
               >
                 <svg
                   class="marker-icon"
-                  width="${l}"
-                  height="${l}"
-                  viewBox="0 0 ${l} ${l}"
+                  width="${s}"
+                  height="${s}"
+                  viewBox="0 0 ${s} ${s}"
                   style="
                     flex-shrink: 0;
                     filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
                     ${e.style ?? ""}
                   "
                 >
-                  <path d="${this.getMarkerPath(e.type, l)}" fill="${i}" />
+                  <path d="${this.getMarkerPath(e.type, s)}" fill="${i}" />
                 </svg>
                 ${e.name ? n`<span style="
-                      font-size: 10px;
+                      font-size: ${a}px;
                       color: ${i};
                       line-height: 1;
-                      ${a ? "padding: 1px 0 0 0;" : "padding: 0 2px;"}
+                      ${c ? "padding: 1px 0 0 0;" : "padding: 0 2px;"}
                     ">${e.name}</span>` : ""}
               </div>
             `;
@@ -2024,9 +2103,12 @@ var K = t`
     position: absolute;
     z-index: 59;
     pointer-events: auto;
-    transition: opacity 0.2s ease;
+    transition: opacity 0.2s ease, z-index 0s;
     cursor: default;
   }
+  .milestone-line.milestone-hovered {
+    z-index: 200;
+  }
   .cursor-line {
     position: absolute;
     width: 2px;
@@ -2387,6 +2469,8 @@ var Z = class extends e {
                 <div class="tooltip-row">${t.tooltip.duration(a)}</div>
               `, e);
 				}
+				let i = e.getBoundingClientRect(), a = this.tooltip.x, o = this.tooltip.y;
+				i.right > window.innerWidth - 6 && (a = window.innerWidth - 6 - i.width / 2), i.left < 6 && (a = 6 + i.width / 2), i.top < 6 && (e.style.transform = "translate(-50%, 0)", e.style.marginTop = "6px"), (a !== this.tooltip.x || o !== this.tooltip.y) && (e.style.left = `${a}px`, e.style.top = `${o}px`);
 			}
 		}
 	}
@@ -3397,7 +3481,7 @@ var Z = class extends e {
             ` : ""}
         ${(this.option.calendar.milestones ?? []).map((e) => n`
             <div
-              class="milestone-line"
+              class="milestone-line ${this.hoveredMilestoneId === e.id ? "milestone-hovered" : ""}"
               style="
                 top: ${this.calendarHeight}px;
                 left: ${this.getDateX(e.start) + o}px;

package/dist/moguchart-core.umd.js

@@ -359,6 +359,9 @@
       transition: opacity 0.2s ease;
       cursor: default;
     }
+    .milestone-badge.milestone-hovered {
+      z-index: 200;
+    }
     .milestone-connector {
       position: absolute;
       top: 19px;
@@ -369,6 +372,9 @@
       transition: opacity 0.2s ease;
       cursor: default;
     }
+    .milestone-connector.milestone-hovered {
+      z-index: 199;
+    }
   `}getDateX(e){return P(e,this.option.calendar.start,this.option.calendar.pxPerDay,this.option.calendar.pxPerMonth)}formatTime(e){return`${e.getHours().toString().padStart(2,`0`)}:${e.getMinutes().toString().padStart(2,`0`)}`}_buildWeeks(e,t){let n=e=>{let n=new Date(e.getTime());n.setHours(0,0,0,0);let r=(n.getDay()-t+7)%7,i=new Date(n.getTime());i.setDate(i.getDate()-r);let a=new Date(i.getFullYear(),0,1),o=Math.floor((i.getTime()-a.getTime())/864e5);return Math.floor(o/7)+1},r=[];return e.forEach(e=>{let i=e.getDay()===t,a=r[r.length-1];a&&!i?a.count++:r.push({weekNumber:n(e),startDate:new Date(e),count:1})}),r}render(){let e=L(this.theme,this.option.customTheme),n=this.option.calendar.start.getTime(),i=this.option.calendar.end.getTime(),a=this.option.calendar.pxPerDay,o=this.option.calendar.pxPerMonth,s=this.option.calendar.weekStartDay??1,c=!this._cachedDays||n!==this._cachedStartTime||i!==this._cachedEndTime,l=a!==this._cachedPxPerDay||o!==this._cachedPxPerMonth;if(c){this._cachedStartTime=n,this._cachedEndTime=i,this._cachedPxPerDay=a,this._cachedPxPerMonth=o;let e=Array.from({length:Math.ceil(this.totalDays)},(e,t)=>{let n=new Date(this.option.calendar.start);return n.setDate(n.getDate()+t),n});this._cachedDays=e;let t=[];e.forEach(e=>{let n=e.getFullYear(),r=e.getMonth(),i=t[t.length-1];if(i&&i.year===n&&i.month===r)i.count++,i.end=new Date(e),i.end.setDate(i.end.getDate()+1);else{let i=new Date(e);i.setHours(0,0,0,0);let a=new Date(e);a.setDate(a.getDate()+1),t.push({year:n,month:r,count:1,start:i,end:a})}}),t.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedMonths=t;let r=[];e.forEach(e=>{let t=e.getFullYear(),n=r[r.length-1];if(n&&n.year===t)n.count++,n.end=new Date(e),n.end.setDate(n.end.getDate()+1);else{let n=new Date(e);n.setHours(0,0,0,0);let i=new Date(e);i.setDate(i.getDate()+1),r.push({year:t,count:1,start:n,end:i})}}),r.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedYears=r,this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(e,s)}else l?(this._cachedPxPerDay=a,this._cachedPxPerMonth=o,this._cachedMonths.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),this._cachedYears.forEach(e=>{e.start&&e.end&&(e.width=this.getDateX(e.end)-this.getDateX(e.start))}),s!==this._cachedWeekStartDay&&(this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(this._cachedDays,s))):s!==this._cachedWeekStartDay&&(this._cachedWeekStartDay=s,this._cachedWeeks=this._buildWeeks(this._cachedDays,s));let u=this._cachedDays,d=this._cachedMonths,f=this._cachedYears,p=`
       background-image: linear-gradient(90deg, transparent ${this.option.calendar.pxPerDay-1}px, ${e.border} ${this.option.calendar.pxPerDay-1}px);
       background-size: ${this.option.calendar.pxPerDay}px 100%;
@@ -508,7 +514,7 @@
             `:``}
         ${(this.option.calendar.milestones??[]).map(e=>t.html`
             <div
-              class="milestone-connector"
+              class="milestone-connector ${this.hoveredMilestoneId===e.id?`milestone-hovered`:``}"
               style="
                 left: ${this.getDateX(e.start)+1}px;
                 width: ${e.width??2}px;
@@ -519,7 +525,7 @@
               @mouseleave="${()=>{this.dispatchEvent(new CustomEvent(`milestone-hover-change`,{detail:{milestoneId:null},bubbles:!0,composed:!0}))}}"
             ></div>
             <div
-              class="milestone-badge"
+              class="milestone-badge ${this.hoveredMilestoneId===e.id?`milestone-hovered`:``}"
               style="
                 left: ${this.getDateX(e.start)}px;
                 background-color: ${e.color};
@@ -561,7 +567,7 @@
       ${this._cachedCells.map(({width:e,color:n})=>t.html`<div
         style="width: ${e}px; background-color: ${n}; flex-shrink: 0;"
       ></div>`)}
-    `}};H([(0,n.property)({type:Object})],G.prototype,`option`,void 0),H([(0,n.property)({type:String})],G.prototype,`theme`,void 0),H([(0,n.property)({type:String})],G.prototype,`rowId`,void 0),G=H([(0,n.customElement)(`gantt-row-background`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.isDragTarget=!1,this.draggingTask=null,this.draggingTaskIds=[],this.multiDragDx=0,this.multiDragDy=0,this.multiDragSameRow=!1,this.externalDragTask=null,this.theme=`light`,this.isSelected=!1,this.dropPosition=null,this.selectedTaskIds=[],this.focusedTaskId=null,this.isExporting=!1,this.criticalPathTaskIds=[],this._cachedMonthGridLines=null,this._cachedMonthGridStartTime=0,this._cachedMonthGridEndTime=0,this._cachedMonthGridPxPerDay=0,this._cachedMonthGridPxPerMonth=0}getDateX(e){return P(e,this.option.calendar.start,this.option.calendar.pxPerDay,this.option.calendar.pxPerMonth)}getMarkerPath(e,t){let n=t/2;switch(e){case`triangle-up`:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`;case`triangle-down`:return`M 0 0 L ${t} 0 L ${n} ${t} Z`;case`triangle-left`:return`M ${t} 0 L 0 ${n} L ${t} ${t} Z`;case`triangle-right`:return`M 0 0 L ${t} ${n} L 0 ${t} Z`;case`diamond`:return`M ${n} 0 L ${t} ${n} L ${n} ${t} L 0 ${n} Z`;case`square`:return`M 0 0 L ${t} 0 L ${t} ${t} L 0 ${t} Z`;default:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`}}estimateMarkerWidth(e,t){let n=e.name?e.name.length*7+4:0;return e.anchor===`center`?t:t+n}getMarkerXRange(e,t){let n=this.getDateX(e.date),r=this.estimateMarkerWidth(e,t),i=e.anchor===`center`,a=e.anchor===`end`,o;if(o=e.anchor===`start`?n:e.anchor===`end`?n-t:n-t/2,i)return{left:o,right:o+t};if(a){let e=r-t;return{left:o-e,right:o+t}}return{left:o,right:o+r}}calculateMarkerLanes(e,t){if(!e.length)return[];let n=e.map(e=>({marker:e,range:this.getMarkerXRange(e,t)})).sort((e,t)=>e.range.left-t.range.left),r=[],i=[];for(let e of n){let t=-1;for(let n=0;n<r.length;n++)if(e.range.left>=r[n]+2){r[n]=e.range.right,t=n;break}t===-1&&(r.push(e.range.right),t=r.length-1),i.push({marker:e.marker,lane:t})}return i}static{this.styles=t.css`
+    `}};H([(0,n.property)({type:Object})],G.prototype,`option`,void 0),H([(0,n.property)({type:String})],G.prototype,`theme`,void 0),H([(0,n.property)({type:String})],G.prototype,`rowId`,void 0),G=H([(0,n.customElement)(`gantt-row-background`)],G);var K=class extends t.LitElement{constructor(...e){super(...e),this.isDragTarget=!1,this.draggingTask=null,this.draggingTaskIds=[],this.multiDragDx=0,this.multiDragDy=0,this.multiDragSameRow=!1,this.externalDragTask=null,this.theme=`light`,this.isSelected=!1,this.dropPosition=null,this.selectedTaskIds=[],this.focusedTaskId=null,this.isExporting=!1,this.criticalPathTaskIds=[],this._cachedMonthGridLines=null,this._cachedMonthGridStartTime=0,this._cachedMonthGridEndTime=0,this._cachedMonthGridPxPerDay=0,this._cachedMonthGridPxPerMonth=0,this._rowHeaderTooltipEl=null}getDateX(e){return P(e,this.option.calendar.start,this.option.calendar.pxPerDay,this.option.calendar.pxPerMonth)}getMarkerPath(e,t){let n=t/2;switch(e){case`triangle-up`:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`;case`triangle-down`:return`M 0 0 L ${t} 0 L ${n} ${t} Z`;case`triangle-left`:return`M ${t} 0 L 0 ${n} L ${t} ${t} Z`;case`triangle-right`:return`M 0 0 L ${t} ${n} L 0 ${t} Z`;case`diamond`:return`M ${n} 0 L ${t} ${n} L ${n} ${t} L 0 ${n} Z`;case`square`:return`M 0 0 L ${t} 0 L ${t} ${t} L 0 ${t} Z`;default:return`M 0 ${t} L ${n} 0 L ${t} ${t} Z`}}resolveMarkerFontSize(e){switch(e){case`xs`:return 8;case`sm`:return 10;case`md`:return 12;case`lg`:return 14;case`xl`:return 18;default:return 10}}estimateMarkerWidth(e,t){let n=this.resolveMarkerFontSize(e.fontSize)*.7,r=e.name?e.name.length*n+4:0;return e.anchor===`center`?t:t+r}getMarkerXRange(e,t){let n=this.getDateX(e.date),r=this.estimateMarkerWidth(e,t),i=e.anchor===`center`,a;return a=e.anchor===`start`?n:e.anchor===`end`?n-r:n-t/2,i?{left:a,right:a+t}:{left:a,right:a+r}}calculateMarkerLanes(e,t){if(!e.length)return[];let n=e.map(e=>({marker:e,range:this.getMarkerXRange(e,t)})).sort((e,t)=>e.range.left-t.range.left),r=[],i=[];for(let e of n){let t=-1;for(let n=0;n<r.length;n++)if(e.range.left>=r[n]+2){r[n]=e.range.right,t=n;break}t===-1&&(r.push(e.range.right),t=r.length-1),i.push({marker:e.marker,lane:t})}return i}static{this.styles=t.css`
     :host {
       display: block;
       width: fit-content;
@@ -624,6 +630,33 @@
       flex: none;
       position: relative;
     }
+    .marker-wrapper {
+      transition: transform 0.15s ease, filter 0.15s ease;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .marker-wrapper.marker-anchor-end {
+      transform: translateX(-100%);
+    }
+    .marker-wrapper:hover {
+      transform: scale(1.3);
+      filter: brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,255,255,0.5));
+      z-index: 10 !important;
+    }
+    .marker-wrapper.marker-anchor-end:hover {
+      transform: translateX(-100%) scale(1.3);
+    }
+    .marker-wrapper.marker-selected {
+      filter: brightness(1.2) drop-shadow(0 0 6px rgba(59,130,246,0.7)) drop-shadow(0 0 10px rgba(59,130,246,0.4));
+      z-index: 10 !important;
+    }
+    .marker-wrapper.marker-selected .marker-icon {
+      animation: marker-pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes marker-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.65; }
+    }
     .grid-background {
       position: absolute;
       top: 0;
@@ -632,7 +665,7 @@
       height: 100%;
       pointer-events: none;
     }
-  `}handleDragStart(e){if(this.isSelected||this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.dataTransfer){e.dataTransfer.setData(`text/plain`,this.row.id),e.dataTransfer.effectAllowed=`move`;let t=L(this.theme,this.option.customTheme),n=document.createElement(`div`);n.style.position=`absolute`,n.style.top=`-1000px`,n.style.left=`-1000px`,n.style.display=`flex`,n.style.flexDirection=`column`,n.style.zIndex=`9999`,n.style.width=`fit-content`,n.style.boxShadow=`0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,n.style.border=`1px solid ${t.border}`,n.style.borderRadius=`4px`,n.style.overflow=`hidden`;let r=[];if(this.isSelected){let e=this.getRootNode(),t=Array.from(e.querySelectorAll(`gantt-row[isselected]`));r=t.length>0?t:[this]}else r=[this];let i=r.slice(0,10);if(i.forEach((e,r)=>{let a=e.shadowRoot?.querySelector(`.row-header`);if(a){let o=a.cloneNode(!0),s=window.getComputedStyle(a);o.style.width=s.width,o.style.minWidth=s.minWidth,o.style.height=`${e.offsetHeight}px`,o.style.boxSizing=s.boxSizing,o.style.background=s.backgroundColor,o.style.color=s.color,o.style.fontSize=s.fontSize,o.style.display=s.display,o.style.alignItems=s.alignItems,o.style.padding=s.padding,o.style.border=`none`,o.style.borderBottom=r<i.length-1?`1px solid ${t.border}`:`none`,o.style.cursor=`grabbing`,n.appendChild(o)}}),r.length>10){let e=document.createElement(`div`);e.style.padding=`4px 8px`,e.style.background=t.bg,e.style.color=t.text,e.style.fontSize=`11px`,e.style.textAlign=`center`,e.textContent=`+ ${r.length-10} more`,n.appendChild(e)}document.body.appendChild(n),e.dataTransfer.setDragImage(n,0,0),setTimeout(()=>{document.body.removeChild(n)},0)}}handleHeaderClick(e){this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.stopPropagation()}handleHeaderContextMenu(e){e.preventDefault(),this.dispatchEvent(new CustomEvent(`row-header-contextmenu`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}handleHeaderDblClick(e){this.dispatchEvent(new CustomEvent(`row-header-dblclick`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}updated(e){if(super.updated(e),!(e.has(`row`)||e.has(`option`)||e.has(`isSelected`)||e.has(`theme`)))return;let n=this.shadowRoot?.querySelector(`.row-header-content`);n&&(0,t.render)(this.option.customRendering?.rowHeaderContent?this.option.customRendering.rowHeaderContent(this.row):this.row.name,n)}render(){let e=L(this.theme,this.option.customTheme),n=[...this.row.tasks];if(this.externalDragTask){let e={...this.externalDragTask.task,start:this.externalDragTask.currentStart,end:this.externalDragTask.currentEnd,style:`${this.externalDragTask.task.style||``}; opacity: 0.6; pointer-events: none;`};n=[...n,e]}let r,a,o=this.row.tasks.find(e=>this.draggingTask&&e.id===this.draggingTask.id);if(this.draggingTask?.mode===`copy`&&o){let e=n.filter(e=>e.id!==this.draggingTask.id);e.push({...o,id:`${o.id}-static`,movable:`none`,resizable:!1,style:`${o.style||``}; opacity: 0.5;`});let t=I(e);r=t.tasksWithLanes,a=t.laneCount;let i=r.find(e=>e.id===`${o.id}-static`);i&&r.push({...o,lane:i.lane})}else{let e=I(n);r=e.tasksWithLanes,a=e.laneCount}let s=this.option.bar?.height??28,c=this.option.bar?.margin??4,l=this.row.markers??[],u=Math.min(s,12),d=u+2,f=this.calculateMarkerLanes(l,u),p=f.length>0?Math.max(...f.map(e=>e.lane))+1:0,m=a*(s+c)+c,h=m+(p>1?(p-1)*d:0);this.style.height=`${h}px`;let g=``,_=null,v=this.option.calendar.start.getTime(),y=this.option.calendar.end.getTime(),b=this.option.calendar.pxPerDay,x=this.option.calendar.pxPerMonth??0;if(!this._cachedMonthGridLines||v!==this._cachedMonthGridStartTime||y!==this._cachedMonthGridEndTime||b!==this._cachedMonthGridPxPerDay||x!==this._cachedMonthGridPxPerMonth){this._cachedMonthGridStartTime=v,this._cachedMonthGridEndTime=y,this._cachedMonthGridPxPerDay=b,this._cachedMonthGridPxPerMonth=x;let e=new Date(this.option.calendar.start),t=this.getDateX(e),n=this.option.calendar.end,r=new Date(n.getFullYear(),n.getMonth()+1,1),i=this.option.calendar.pxPerMonth===void 0?this.getDateX(n):this.getDateX(r),a=[],o=new Date(e);for(o.setDate(1),o.setHours(0,0,0,0);o<=r;){let e=this.getDateX(o);if(e>t&&e<=i){let t=o.getMonth()===0;a.push({left:e,isYearBoundary:t})}o.setMonth(o.getMonth()+1)}this._cachedMonthGridLines=a}if(_=this._cachedMonthGridLines,this.option.calendar.showMonthsRow)g=``;else if(this.option.calendar.showTime){let t=this.option.calendar.pxPerDay/24,n=this.option.snapDuration??60,r=this.option.calendar.pxPerDay/1440*n,i=this.option.calendar.pxPerDay,a=this.option.customTheme?.showTimeDateLine??e.monthGridLine??e.gridLine,o=this.option.calendar.start,s=(o.getHours()*60*60*1e3+o.getMinutes()*60*1e3+o.getSeconds()*1e3)/(1440*60*1e3)*i,c=s%t,l=s%r,u=s===0?`0px 0`:`${-s}px 0`,d=c===0?`0px 0`:`${-c}px 0`,f=l===0?`0px 0`:`${-l}px 0`,p=[`linear-gradient(90deg, transparent ${i-1}px, ${a} ${i-1}px)`,`linear-gradient(90deg, transparent ${t-1}px, ${e.gridLine} ${t-1}px)`,`linear-gradient(90deg, transparent ${r-1}px, ${e.subGridLine} ${r-1}px)`],m=[`${i}px 100%`,`${t}px 100%`,`${r}px 100%`],h=[u,d,f];g=`
+  `}handleDragStart(e){if(this.handleHeaderMouseLeave(),this.isSelected||this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.dataTransfer){e.dataTransfer.setData(`text/plain`,this.row.id),e.dataTransfer.effectAllowed=`move`;let t=L(this.theme,this.option.customTheme),n=document.createElement(`div`);n.style.position=`absolute`,n.style.top=`-1000px`,n.style.left=`-1000px`,n.style.display=`flex`,n.style.flexDirection=`column`,n.style.zIndex=`9999`,n.style.width=`fit-content`,n.style.boxShadow=`0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,n.style.border=`1px solid ${t.border}`,n.style.borderRadius=`4px`,n.style.overflow=`hidden`;let r=[];if(this.isSelected){let e=this.getRootNode(),t=Array.from(e.querySelectorAll(`gantt-row[isselected]`));r=t.length>0?t:[this]}else r=[this];let i=r.slice(0,10);if(i.forEach((e,r)=>{let a=e.shadowRoot?.querySelector(`.row-header`);if(a){let o=a.cloneNode(!0),s=window.getComputedStyle(a);o.style.width=s.width,o.style.minWidth=s.minWidth,o.style.height=`${e.offsetHeight}px`,o.style.boxSizing=s.boxSizing,o.style.background=s.backgroundColor,o.style.color=s.color,o.style.fontSize=s.fontSize,o.style.display=s.display,o.style.alignItems=s.alignItems,o.style.padding=s.padding,o.style.border=`none`,o.style.borderBottom=r<i.length-1?`1px solid ${t.border}`:`none`,o.style.cursor=`grabbing`,n.appendChild(o)}}),r.length>10){let e=document.createElement(`div`);e.style.padding=`4px 8px`,e.style.background=t.bg,e.style.color=t.text,e.style.fontSize=`11px`,e.style.textAlign=`center`,e.textContent=`+ ${r.length-10} more`,n.appendChild(e)}document.body.appendChild(n),e.dataTransfer.setDragImage(n,0,0),setTimeout(()=>{document.body.removeChild(n)},0)}}handleHeaderClick(e){this.dispatchEvent(new CustomEvent(`row-clicked`,{detail:{rowId:this.row.id,event:e},bubbles:!0,composed:!0})),e.stopPropagation()}handleHeaderContextMenu(e){e.preventDefault(),this.dispatchEvent(new CustomEvent(`row-header-contextmenu`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}handleHeaderDblClick(e){this.dispatchEvent(new CustomEvent(`row-header-dblclick`,{detail:{rowId:this.row.id,row:this.row,event:e,target:e.currentTarget},bubbles:!0,composed:!0}))}handleHeaderMouseEnter(e){let n=this.option.customRendering?.rowHeaderTooltip;if(!n)return;let r=this.option.tooltipDelay??500,i=e.currentTarget,a=()=>{let e=n(this.row);if(!e)return;let r=document.createElement(`div`);r.style.position=`fixed`,r.style.zIndex=`9999`,r.style.pointerEvents=`none`,r.style.opacity=`0`,r.style.transition=`opacity 0.15s ease`,r.style.maxWidth=`360px`,r.style.borderRadius=`8px`,r.style.padding=`8px 12px`,r.style.fontSize=`12px`,r.style.lineHeight=`1.5`,r.style.boxShadow=`0 4px 12px rgba(0,0,0,0.15)`;let a=L(this.theme,this.option.customTheme);r.style.backgroundColor=a.tooltipBg,r.style.color=a.tooltipText,typeof e==`string`?r.textContent=e:e instanceof HTMLElement?r.appendChild(e):(0,t.render)(e,r),document.body.appendChild(r),this._rowHeaderTooltipEl=r;let o=i.getBoundingClientRect(),s=r.getBoundingClientRect(),c=o.right+6,l=o.top;c+s.width>window.innerWidth-6&&(c=o.left-s.width-6),l+s.height>window.innerHeight-6&&(l=window.innerHeight-s.height-6),l<6&&(l=6),r.style.left=`${c}px`,r.style.top=`${l}px`,requestAnimationFrame(()=>{r.style.opacity=`1`})};r>0?this._rowHeaderTooltipTimer=window.setTimeout(a,r):a()}handleHeaderMouseLeave(){this._rowHeaderTooltipTimer!==void 0&&(window.clearTimeout(this._rowHeaderTooltipTimer),this._rowHeaderTooltipTimer=void 0),this._rowHeaderTooltipEl&&=(this._rowHeaderTooltipEl.remove(),null)}updated(e){if(super.updated(e),!(e.has(`row`)||e.has(`option`)||e.has(`isSelected`)||e.has(`theme`)))return;let n=this.shadowRoot?.querySelector(`.row-header-content`);n&&(0,t.render)(this.option.customRendering?.rowHeaderContent?this.option.customRendering.rowHeaderContent(this.row):this.row.name,n)}render(){let e=L(this.theme,this.option.customTheme),n=[...this.row.tasks];if(this.externalDragTask){let e={...this.externalDragTask.task,start:this.externalDragTask.currentStart,end:this.externalDragTask.currentEnd,style:`${this.externalDragTask.task.style||``}; opacity: 0.6; pointer-events: none;`};n=[...n,e]}let r,a,o=this.row.tasks.find(e=>this.draggingTask&&e.id===this.draggingTask.id);if(this.draggingTask?.mode===`copy`&&o){let e=n.filter(e=>e.id!==this.draggingTask.id);e.push({...o,id:`${o.id}-static`,movable:`none`,resizable:!1,style:`${o.style||``}; opacity: 0.5;`});let t=I(e);r=t.tasksWithLanes,a=t.laneCount;let i=r.find(e=>e.id===`${o.id}-static`);i&&r.push({...o,lane:i.lane})}else{let e=I(n);r=e.tasksWithLanes,a=e.laneCount}let s=this.option.bar?.height??28,c=this.option.bar?.margin??4,l=this.row.markers??[],u=Math.min(s,12),d=u+2,f=this.calculateMarkerLanes(l,u),p=f.length>0?Math.max(...f.map(e=>e.lane))+1:0,m=a*(s+c)+c,h=m+(p>1?(p-1)*d:0);this.style.height=`${h}px`;let g=``,_=null,v=this.option.calendar.start.getTime(),y=this.option.calendar.end.getTime(),b=this.option.calendar.pxPerDay,x=this.option.calendar.pxPerMonth??0;if(!this._cachedMonthGridLines||v!==this._cachedMonthGridStartTime||y!==this._cachedMonthGridEndTime||b!==this._cachedMonthGridPxPerDay||x!==this._cachedMonthGridPxPerMonth){this._cachedMonthGridStartTime=v,this._cachedMonthGridEndTime=y,this._cachedMonthGridPxPerDay=b,this._cachedMonthGridPxPerMonth=x;let e=new Date(this.option.calendar.start),t=this.getDateX(e),n=this.option.calendar.end,r=new Date(n.getFullYear(),n.getMonth()+1,1),i=this.option.calendar.pxPerMonth===void 0?this.getDateX(n):this.getDateX(r),a=[],o=new Date(e);for(o.setDate(1),o.setHours(0,0,0,0);o<=r;){let e=this.getDateX(o);if(e>t&&e<=i){let t=o.getMonth()===0;a.push({left:e,isYearBoundary:t})}o.setMonth(o.getMonth()+1)}this._cachedMonthGridLines=a}if(_=this._cachedMonthGridLines,this.option.calendar.showMonthsRow)g=``;else if(this.option.calendar.showTime){let t=this.option.calendar.pxPerDay/24,n=this.option.snapDuration??60,r=this.option.calendar.pxPerDay/1440*n,i=this.option.calendar.pxPerDay,a=this.option.customTheme?.showTimeDateLine??e.monthGridLine??e.gridLine,o=this.option.calendar.start,s=(o.getHours()*60*60*1e3+o.getMinutes()*60*1e3+o.getSeconds()*1e3)/(1440*60*1e3)*i,c=s%t,l=s%r,u=s===0?`0px 0`:`${-s}px 0`,d=c===0?`0px 0`:`${-c}px 0`,f=l===0?`0px 0`:`${-l}px 0`,p=[`linear-gradient(90deg, transparent ${i-1}px, ${a} ${i-1}px)`,`linear-gradient(90deg, transparent ${t-1}px, ${e.gridLine} ${t-1}px)`,`linear-gradient(90deg, transparent ${r-1}px, ${e.subGridLine} ${r-1}px)`],m=[`${i}px 100%`,`${t}px 100%`,`${r}px 100%`],h=[u,d,f];g=`
         background-image: ${p.join(`, `)};
         background-size: ${m.join(`, `)};
         background-position: ${h.join(`, `)};
@@ -691,6 +724,8 @@
           @click="${this.handleHeaderClick}"
           @dblclick="${this.handleHeaderDblClick}"
           @contextmenu="${this.handleHeaderContextMenu}"
+          @mouseenter="${this.handleHeaderMouseEnter}"
+          @mouseleave="${this.handleHeaderMouseLeave}"
         >
           <div
             class="row-header-content"
@@ -718,40 +753,42 @@
                   .isCriticalPath="${this.criticalPathTaskIds.includes(e.id)}"
                 />
               `})}
-          ${f.map(({marker:e,lane:n})=>{let r=this.getDateX(e.date),i=e.color??`#ef4444`,a=e.anchor===`center`,o=(a?m/2-u:(m-u)/2)+n*d,s=e.anchor===`start`?r:e.anchor===`end`?r-u:r-u/2,c=e.anchor===`end`;return t.html`
+          ${f.map(({marker:e,lane:n})=>{let r=this.getDateX(e.date),i=e.color??`#ef4444`,a=this.resolveMarkerFontSize(e.fontSize),o=Math.min(s,Math.max(8,Math.round(a*1.2))),c=e.anchor===`center`,l=(c?m/2-o:(m-o)/2)+n*d,u=e.anchor===`start`||e.anchor===`end`?r:r-o/2,f=e.anchor===`end`,p=f;return t.html`
               <div
-                class="marker-wrapper"
+                class="marker-wrapper${this.row.selectedMarkerId===e.id?` marker-selected`:``}${f?` marker-anchor-end`:``}"
                 style="
                   position: absolute;
-                  left: ${s}px;
-                  top: ${o}px;
+                  left: ${u}px;
+                  top: ${l}px;
                   z-index: 2;
                   display: flex;
-                  ${a?`flex-direction: column; align-items: center; width: ${u}px; overflow: visible;`:`align-items: center; ${c?`flex-direction: row-reverse;`:``}`}
+                  ${c?`flex-direction: column; align-items: center; width: ${o}px; overflow: visible;`:`align-items: center; ${p?`flex-direction: row-reverse;`:``}`}
                   pointer-events: auto;
-                  cursor: default;
+                  cursor: pointer;
                   white-space: nowrap;
                 "
                 title="${e.name??``}"
+                @dblclick="${t=>{t.preventDefault(),t.stopPropagation(),window.getSelection()?.removeAllRanges(),this.dispatchEvent(new CustomEvent(`marker-dblclick`,{detail:{marker:e,rowId:this.row.id,event:t},bubbles:!0,composed:!0}))}}"
+                @contextmenu="${t=>{t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent(`marker-contextmenu`,{detail:{marker:e,rowId:this.row.id,event:t},bubbles:!0,composed:!0}))}}"
               >
                 <svg
                   class="marker-icon"
-                  width="${u}"
-                  height="${u}"
-                  viewBox="0 0 ${u} ${u}"
+                  width="${o}"
+                  height="${o}"
+                  viewBox="0 0 ${o} ${o}"
                   style="
                     flex-shrink: 0;
                     filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
                     ${e.style??``}
                   "
                 >
-                  <path d="${this.getMarkerPath(e.type,u)}" fill="${i}" />
+                  <path d="${this.getMarkerPath(e.type,o)}" fill="${i}" />
                 </svg>
                 ${e.name?t.html`<span style="
-                      font-size: 10px;
+                      font-size: ${a}px;
                       color: ${i};
                       line-height: 1;
-                      ${a?`padding: 1px 0 0 0;`:`padding: 0 2px;`}
+                      ${c?`padding: 1px 0 0 0;`:`padding: 0 2px;`}
                     ">${e.name}</span>`:``}
               </div>
             `})}
@@ -886,9 +923,12 @@
     position: absolute;
     z-index: 59;
     pointer-events: auto;
-    transition: opacity 0.2s ease;
+    transition: opacity 0.2s ease, z-index 0s;
     cursor: default;
   }
+  .milestone-line.milestone-hovered {
+    z-index: 200;
+  }
   .cursor-line {
     position: absolute;
     width: 2px;
@@ -954,7 +994,7 @@
                   ${n.dateFormat(this.tooltip.task.start)} - ${n.dateFormat(this.tooltip.task.end)}
                 </div>
                 <div class="tooltip-row">${n.tooltip.duration(i)}</div>
-              `,e)}}}}updateDragOverlay(){if(!this.dragOverlayInfo||this.option.showDragInfoOverlay===!1)return;let e=L(this.theme,this.option.customTheme),n=this.shadowRoot?.querySelector(`.drag-info-overlay`);if(!n)return;n.classList.toggle(`visible`,this.dragOverlayInfo.visible);let{targetRow:r}=this.dragOverlayInfo,i=this.option.customRendering?.dragInfo?this.option.customRendering.dragInfo({id:this.dragOverlayInfo.id,name:this.dragOverlayInfo.name,start:this.dragOverlayInfo.start,end:this.dragOverlayInfo.end},this.dragOverlayInfo.currentStart,this.dragOverlayInfo.currentEnd,r):void 0;if(i)(0,t.render)(i,n);else{let i=this.option.locale??j,a=!!this.option.calendar.pxPerMonth,o,s;if(a){let e=new Date(this.dragOverlayInfo.currentEnd);e.setMonth(e.getMonth()-1),o=i.yearMonthFormat(this.dragOverlayInfo.currentStart),s=i.yearMonthFormat(e)}else o=i.dateTimeFormat(this.dragOverlayInfo.currentStart),s=i.dateTimeFormat(this.dragOverlayInfo.currentEnd);(0,t.render)(t.html`
+              `,e)}let r=e.getBoundingClientRect(),i=this.tooltip.x,a=this.tooltip.y;r.right>window.innerWidth-6&&(i=window.innerWidth-6-r.width/2),r.left<6&&(i=6+r.width/2),r.top<6&&(e.style.transform=`translate(-50%, 0)`,e.style.marginTop=`6px`),(i!==this.tooltip.x||a!==this.tooltip.y)&&(e.style.left=`${i}px`,e.style.top=`${a}px`)}}}updateDragOverlay(){if(!this.dragOverlayInfo||this.option.showDragInfoOverlay===!1)return;let e=L(this.theme,this.option.customTheme),n=this.shadowRoot?.querySelector(`.drag-info-overlay`);if(!n)return;n.classList.toggle(`visible`,this.dragOverlayInfo.visible);let{targetRow:r}=this.dragOverlayInfo,i=this.option.customRendering?.dragInfo?this.option.customRendering.dragInfo({id:this.dragOverlayInfo.id,name:this.dragOverlayInfo.name,start:this.dragOverlayInfo.start,end:this.dragOverlayInfo.end},this.dragOverlayInfo.currentStart,this.dragOverlayInfo.currentEnd,r):void 0;if(i)(0,t.render)(i,n);else{let i=this.option.locale??j,a=!!this.option.calendar.pxPerMonth,o,s;if(a){let e=new Date(this.dragOverlayInfo.currentEnd);e.setMonth(e.getMonth()-1),o=i.yearMonthFormat(this.dragOverlayInfo.currentStart),s=i.yearMonthFormat(e)}else o=i.dateTimeFormat(this.dragOverlayInfo.currentStart),s=i.dateTimeFormat(this.dragOverlayInfo.currentEnd);(0,t.render)(t.html`
           <div style="font-weight: bold;">
             ${this.dragOverlayInfo.name||i.dragOverlay.noTitle}
           </div>
@@ -1076,7 +1116,7 @@
             `:``}
         ${(this.option.calendar.milestones??[]).map(e=>t.html`
             <div
-              class="milestone-line"
+              class="milestone-line ${this.hoveredMilestoneId===e.id?`milestone-hovered`:``}"
               style="
                 top: ${this.calendarHeight}px;
                 left: ${this.getDateX(e.start)+o}px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mogura/moguchart-core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A lightweight, framework-agnostic Gantt chart Web Component built with Lit. Works with Vue, React, Angular, Svelte, and more.",
   "license": "MIT",
   "author": "Murakami Hiroyuki",
@@ -41,18 +41,6 @@
       "require": "./dist/moguchart-core.umd.js"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && pnpm exec tsc -p tsconfig.build.json",
-    "build:demo": "BUILD_MODE=demo vite build && pnpm exec tsc",
-    "preview": "vite preview",
-    "prepublishOnly": "pnpm run build",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage",
-    "refresh:packages": "rm -rf node_modules pnpm-lock.yaml && pnpm i"
-  },
   "devDependencies": {
     "@holiday-jp/holiday_jp": "^2.5.1",
     "@types/lodash-es": "^4.17.12",
@@ -72,5 +60,16 @@
     "html2canvas-pro": "^2.0.2",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && pnpm exec tsc -p tsconfig.build.json",
+    "build:demo": "BUILD_MODE=demo vite build && pnpm exec tsc",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "refresh:packages": "rm -rf node_modules pnpm-lock.yaml && pnpm i"
   }
 }