gantt-lib 0.3.3 → 0.4.0

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;
@@ -257,254 +271,6 @@
   --gantt-dependency-cycle-color: #ef4444;
   --gantt-expired-color: #ef4444;
 }
-.gantt-container {
-  width: 100%;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
-  border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
-  background-color: var(--gantt-cell-background, #ffffff);
-}
-.gantt-scrollContainer {
-  overflow: auto;
-}
-.gantt-stickyHeader {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: var(--gantt-cell-background, #ffffff);
-  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
-}
-.gantt-taskArea {
-  position: relative;
-  background-color: var(--gantt-cell-background, #ffffff);
-}
-.gantt-tr-row {
-  position: relative;
-  width: 100%;
-  border-bottom: 1px solid var(--gantt-grid-line-color);
-  box-sizing: border-box;
-}
-.gantt-tr-row:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.gantt-tr-taskBar {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: var(--gantt-task-bar-border-radius);
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: visible;
-  cursor: grab;
-}
-.gantt-tr-taskBar:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-.gantt-tr-taskBar.gantt-tr-dragging {
-  cursor: grabbing;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  opacity: 1;
-  transition: none !important;
-}
-.gantt-tr-taskName {
-  color: var(--gantt-task-bar-text-color);
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-.gantt-tr-taskDuration {
-  color: var(--gantt-task-bar-text-color);
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  margin-right: 4px;
-}
-.gantt-tr-taskNameHidden {
-  visibility: hidden;
-}
-.gantt-tr-rightLabels {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  pointer-events: none;
-}
-.gantt-tr-dateLabelRight {
-  position: static;
-  margin-right: 0;
-}
-.gantt-tr-externalTaskName {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: #00389f;
-  white-space: nowrap;
-  user-select: none;
-  margin-left: 4px;
-}
-.gantt-tr-resizeHandle {
-  position: absolute;
-  top: 0;
-  width: 8px;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
-  cursor: ew-resize;
-}
-.gantt-tr-resizeHandleLeft {
-  left: 0;
-}
-.gantt-tr-resizeHandleRight {
-  right: 0;
-}
-.gantt-tr-resizeZoneLeft {
-  cursor: ew-resize;
-}
-.gantt-tr-resizeZoneRight {
-  cursor: ew-resize;
-}
-.gantt-tr-taskContainer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.gantt-tr-leftLabels {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-.gantt-tr-dateLabel {
-  font-size: 0.85rem;
-  color: #666666;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-.gantt-tr-dateLabelLeft {
-  position: absolute;
-  right: 100%;
-  margin-right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.gantt-tsh-header {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--gantt-cell-background);
-  border-bottom: var(--gantt-week-separator-width, 1px) solid var(--gantt-week-separator-color, #374151);
-  box-sizing: border-box;
-}
-.gantt-tsh-monthRow {
-  display: flex;
-  border-bottom: var(--gantt-day-line-width, 1px) solid var(--gantt-day-line-color, #f3f4f6);
-  align-items: center;
-}
-.gantt-tsh-monthCell {
-  box-sizing: border-box;
-  padding: 0.1rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #1f2937;
-  border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
-  text-align: left;
-}
-.gantt-tsh-monthCell:first-child {
-  border-left: none;
-}
-.gantt-tsh-dayRow {
-  display: grid;
-  box-sizing: border-box;
-}
-.gantt-tsh-dayCell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.gantt-tsh-monthBoundary {
-  border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
-}
-.gantt-tsh-dayLabel {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #374151;
-}
-.gantt-tsh-weekendDay {
-  background-color: var(--gantt-weekend-background, #fee2e2);
-}
-.gantt-tsh-weekendDay .gantt-tsh-dayLabel {
-  color: #dc2626;
-}
-.gantt-tsh-today {
-  background-color: #dc2626;
-  border-radius: 0 4px 4px 0;
-}
-.gantt-tsh-today .gantt-tsh-dayLabel {
-  color: #ffffff;
-}
-.gantt-gb-gridBackground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-.gantt-gb-weekendBlock {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-color: var(--gantt-weekend-background, #fee2e2);
-}
-.gantt-gb-gridLine {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-color: var(--gantt-day-line-color, #f3f4f6);
-}
-.gantt-gb-monthSeparator {
-  width: var(--gantt-month-separator-width, 2px);
-  background-color: var(--gantt-month-separator-color, #374151);
-}
-.gantt-gb-weekSeparator {
-  width: var(--gantt-week-separator-width, 1px);
-  background-color: var(--gantt-week-separator-color, #d1d5db);
-}
-.gantt-gb-dayLine {
-  width: var(--gantt-day-line-width, 1px);
-  background-color: var(--gantt-day-line-color, #f3f4f6);
-}
-.gantt-ti-indicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 5;
-  pointer-events: none;
-}
-.gantt-dgl-guideLine {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background-color: var(--gantt-drag-guide-line-color, #3b82f6);
-  z-index: 20;
-  pointer-events: none;
-  opacity: 0.6;
-}
 
 /* src/components/TimeScaleHeader/TimeScaleHeader.css */
 .gantt-tsh-header {
@@ -527,6 +293,8 @@
   color: #1f2937;
   border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
   text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 .gantt-tsh-monthCell:first-child {
   border-left: none;
@@ -550,20 +318,23 @@
   color: #374151;
 }
 .gantt-tsh-weekendDay {
-  background-color: var(--gantt-weekend-background, #fee2e2);
+  background-color: var(--gantt-weekend-background, #fef3f2);
 }
 .gantt-tsh-weekendDay .gantt-tsh-dayLabel {
-  color: #dc2626;
+  color: #ef4444;
 }
 .gantt-tsh-today {
   background-color: #dc2626;
-  border-radius: 0 4px 4px 0;
+  border-radius: 4px 4px 4px 0;
 }
 .gantt-tsh-today .gantt-tsh-dayLabel {
   color: #ffffff;
 }
 
 /* src/components/TaskRow/TaskRow.css */
+:root {
+  --gantt-task-bar-border-radius: 6px;
+}
 .gantt-tr-row {
   position: relative;
   width: 100%;
@@ -571,7 +342,7 @@
   box-sizing: border-box;
 }
 .gantt-tr-row:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(59, 130, 246, 0.04);
 }
 .gantt-tr-taskBar {
   position: absolute;
@@ -584,9 +355,11 @@
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
+  transition: box-shadow 0.15s ease;
   cursor: grab;
 }
 .gantt-tr-taskBar:hover {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }
 .gantt-tr-taskBar.gantt-tr-dragging {
   cursor: grabbing;
@@ -617,7 +390,7 @@
 .gantt-tr-externalTaskName {
   font-size: 0.9rem;
   font-weight: 500;
-  color: #00389f;
+  color: #2563eb;
   white-space: nowrap;
   user-select: none;
   margin-left: 4px;
@@ -625,9 +398,8 @@
 .gantt-tr-resizeHandle {
   position: absolute;
   top: 0;
-  width: 8px;
+  width: 20px;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
   cursor: ew-resize;
   pointer-events: auto;
   z-index: 10;
@@ -661,7 +433,7 @@
 }
 .gantt-tr-dateLabel {
   font-size: 0.85rem;
-  color: #666666;
+  color: #6b7280;
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
@@ -705,7 +477,7 @@
 .gantt-tr-externalProgress {
   font-size: 0.85rem;
   font-weight: 500;
-  color: #666666;
+  color: #6b7280;
   white-space: nowrap;
   margin-right: 4px;
   margin-left: 4px;
@@ -718,7 +490,7 @@
   left: 0;
   width: 100%;
   height: 0;
-  border-top: 1px solid #999;
+  border-top: 1px solid var(--gantt-grid-line-color, #d1d5db);
   pointer-events: none;
   z-index: 0;
 }
@@ -732,7 +504,7 @@
 /* src/components/TodayIndicator/TodayIndicator.css */
 .gantt-ti-indicator {
   position: absolute;
-  top: 0;
+  top: -1px;
   bottom: 0;
   z-index: 5;
   pointer-events: none;
@@ -855,7 +627,7 @@
   padding: 0 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #1f2937;
+  color: #6b7280;
   box-sizing: border-box;
   border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
 }
@@ -871,9 +643,10 @@
   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(0, 0, 0, 0.05);
+  background-color: rgba(59, 130, 246, 0.04);
 }
 .gantt-tl-row-selected {
   background-color: rgba(59, 130, 246, 0.15);
@@ -896,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;
@@ -929,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;
@@ -968,23 +733,64 @@
 .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;
   gap: 2px;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #1f2937;
+  color: #6b7280;
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1033,7 +839,7 @@
   gap: 1px;
   background-color: rgba(59, 130, 246, 0.12);
   border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 4px 4px;
   font-size: 0.7rem;
   color: #1d4ed8;
@@ -1096,7 +902,7 @@
   align-items: center;
   background-color: rgba(107, 114, 128, 0.12);
   border: 1px solid rgba(107, 114, 128, 0.3);
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 4px 4px;
   font-size: 0.7rem;
   color: #6b7280;
@@ -1146,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;
@@ -1157,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;
@@ -1169,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;
@@ -1221,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 {
@@ -1234,6 +1075,8 @@
     sans-serif;
   border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   background-color: var(--gantt-cell-background, #ffffff);
+  border-radius: var(--gantt-container-border-radius, 10px);
+  overflow: hidden;
 }
 .gantt-scrollContainer {
   overflow: auto;

package/package.json

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