gantt-lib 0.3.4 → 0.4.1

package/dist/styles.css

@@ -227,6 +227,19 @@
 .gantt-day-btn.disabled:hover {
   background: transparent;
 }
+.gantt-cal-nav {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  border-top: 1px solid var(--gantt-input-border);
+  margin-top: 4px;
+}
+.gantt-cal-nav .gantt-btn {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.8rem;
+  padding: 0 8px;
+}
 
 /* src/styles.css */
 :root {
@@ -236,6 +249,7 @@
   --gantt-row-height: 30px;
   --gantt-header-height: 40px;
   --gantt-day-width: 30px;
+  --gantt-container-border-radius: 10px;
   --gantt-task-bar-default-color: #3b82f6;
   --gantt-task-bar-text-color: #ffffff;
   --gantt-task-bar-border-radius: 4px;
@@ -629,6 +643,7 @@
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   box-sizing: border-box;
   cursor: pointer;
+  position: relative;
 }
 .gantt-tl-row:hover {
   background-color: rgba(59, 130, 246, 0.04);
@@ -654,26 +669,16 @@
   flex-shrink: 0;
   cursor: pointer;
 }
-.gantt-tl-num-icon {
-  display: none;
-  color: #6b7280;
-}
-.gantt-tl-cell-number:hover .gantt-tl-num-label {
-  display: none;
-}
-.gantt-tl-cell-number:hover .gantt-tl-num-icon {
-  display: block;
-}
 .gantt-tl-headerCell.gantt-tl-cell-name {
   padding-left: 4px;
 }
 .gantt-tl-cell-name {
   flex: 1;
-  min-width: 0;
+  min-width: 150px;
   position: relative;
   overflow: visible;
   align-items: center;
-  padding: 0;
+  padding: 0 4px;
 }
 .gantt-tl-cell-date {
   width: 68px;
@@ -687,26 +692,28 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding: 0 0.2rem;
+  position: absolute;
+  inset: 0;
+  padding: 0 4px;
   font-size: 0.8rem;
   line-height: 1.2;
   font-family: inherit;
   color: #374151;
   background: transparent;
   border: none;
-  cursor: text;
+  cursor: pointer;
   text-align: left;
   user-select: none;
   white-space: normal;
   word-break: break-word;
   box-sizing: border-box;
-  min-height: 100%;
 }
 .gantt-tl-name-trigger:hover {
   background-color: rgba(59, 130, 246, 0.1);
 }
+.gantt-tl-name-trigger:active {
+  background-color: rgba(59, 130, 246, 0.2);
+}
 .gantt-tl-name-input {
   position: absolute;
   top: 0;
@@ -726,16 +733,57 @@
 .gantt-tl-name-locked {
   cursor: default !important;
 }
+.gantt-tl-name-actions {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.gantt-tl-name-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+.gantt-tl-row:hover .gantt-tl-name-action-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
 .gantt-tl-cell-deps {
-  width: 120px;
+  width: 90px;
   flex-shrink: 0;
   flex-wrap: wrap;
   gap: 2px;
   padding: 2px 4px;
   align-items: center;
-  overflow: visible;
+  overflow: hidden;
   position: relative;
 }
+.gantt-tl-action-insert {
+  background-color: #22c55e;
+  color: white;
+}
+.gantt-tl-action-insert:hover {
+  background-color: #16a34a;
+}
+.gantt-tl-action-delete {
+  background-color: #ef4444;
+  color: white;
+}
+.gantt-tl-action-delete:hover {
+  background-color: #dc2626;
+}
 .gantt-tl-dep-type-trigger {
   display: flex;
   align-items: center;
@@ -904,7 +952,7 @@
   align-items: center;
   justify-content: center;
   background: transparent;
-  border: 1px dashed rgba(59, 130, 246, 0.4);
+  border: 1px solid rgba(59, 130, 246, 0.4);
   border-radius: 4px;
   width: 23px;
   height: 23px;
@@ -915,6 +963,18 @@
   font-family: inherit;
   flex-shrink: 0;
 }
+.gantt-tl-dep-add-hover {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.gantt-tl-row:hover .gantt-tl-dep-add-hover {
+  opacity: 1;
+  pointer-events: auto;
+}
+.gantt-tl-dep-add-hidden {
+  display: none !important;
+}
 .gantt-tl-dep-add:hover {
   background-color: rgba(59, 130, 246, 0.1);
   border-color: #3b82f6;
@@ -927,14 +987,14 @@
   background-color: rgba(59, 130, 246, 0.15);
 }
 .gantt-tl-row-picking-self .gantt-tl-cell-deps {
-  cursor: not-allowed;
+  cursor: pointer;
 }
 .gantt-tl-dep-source-hint {
   font-size: 0.75rem;
   color: #6b7280;
   font-style: italic;
   pointer-events: none;
-  white-space: nowrap;
+  white-space: normal;
 }
 .gantt-tl-dep-delete-label {
   display: inline-flex;
@@ -979,6 +1039,29 @@
   z-index: 10;
   white-space: nowrap;
 }
+.gantt-tl-add-btn {
+  width: 100%;
+  padding: 6px 12px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-top: 1px dashed var(--gantt-grid-line-color, #e0e0e0);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--gantt-text-muted, #9ca3af);
+  transition: background 0.15s ease, color 0.15s ease;
+  font-family: inherit;
+}
+.gantt-tl-add-btn:hover {
+  background: var(--gantt-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--gantt-text-color, #374151);
+}
+.gantt-tl-row-new {
+  border-top: 1px dashed var(--gantt-grid-line-color, #e0e0e0);
+}
+.gantt-tl-cell-new-name {
+  padding: 2px 4px;
+}
 
 /* src/components/GanttChart/GanttChart.css */
 .gantt-container {
@@ -992,7 +1075,7 @@
     sans-serif;
   border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   background-color: var(--gantt-cell-background, #ffffff);
-  border-radius: 10px;
+  border-radius: var(--gantt-container-border-radius, 10px);
   overflow: hidden;
 }
 .gantt-scrollContainer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {