gantt-lib 0.135.8 → 0.136.0

package/dist/styles.css

@@ -473,11 +473,12 @@
 }
 .gantt-tr-row:hover,
 .gantt-tr-row-hovered {
-  background-color: var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
+  box-shadow: inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
 }
 .gantt-tr-row.gantt-tr-row-filter-match:hover,
 .gantt-tr-row.gantt-tr-row-filter-match.gantt-tr-row-hovered {
   background-color: rgba(250, 204, 21, 0.3);
+  box-shadow: inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
 }
 .gantt-tr-taskBar {
   position: absolute;
@@ -494,6 +495,137 @@
   transition: box-shadow 0.15s ease;
   cursor: grab;
 }
+.gantt-tr-compositePreview {
+  position: fixed;
+  z-index: 10000;
+  width: 220px;
+  max-height: 340px;
+  overflow: hidden;
+  padding: 4px 12px 10px;
+  border: 1px solid var(--gantt-grid-line-color, #ddd);
+  border-radius: 8px;
+  background: var(--gantt-background, #fff);
+  color: var(--gantt-text-color, #222);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
+  pointer-events: none;
+  font-size: 12px;
+}
+.gantt-tr-compositePreviewRow {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+  white-space: nowrap;
+}
+.gantt-tr-compositePreviewAxis {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 3px 68px;
+  color: #64748b;
+  font-size: 10px;
+}
+.gantt-tr-compositePreviewTrack {
+  position: relative;
+  height: 10px;
+  border-radius: 2px;
+  background: #f1f5f9;
+}
+.gantt-tr-compositePreviewBar {
+  position: absolute;
+  top: 1px;
+  height: 8px;
+  border-radius: 2px;
+}
+.gantt-tr-compositeBar {
+  border-radius: var(--gantt-task-bar-border-radius);
+  overflow: hidden;
+}
+.gantt-tr-compositeSegments {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.gantt-tr-compositeSegment {
+  position: absolute;
+  box-sizing: border-box;
+  border-right: 2px solid rgba(255, 255, 255, .85);
+  background: rgba(255, 255, 255, .14);
+}
+.gantt-tr-compositeHoverChevron {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  padding: 0;
+  border-radius: 4px;
+  background: rgba(24, 16, 45, .48);
+  color: white;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+.gantt-tr-compositeBar:hover .gantt-tr-compositeHoverChevron,
+.gantt-tr-compositeBar:focus-visible .gantt-tr-compositeHoverChevron {
+  opacity: 1;
+}
+.gantt-tr-compositeChevron {
+  width: 14px;
+  height: 14px;
+  transition: transform 140ms ease;
+}
+.gantt-tr-compositeChevron-open {
+  transform: rotate(90deg);
+}
+.gantt-tr-externalDuration.gantt-tr-compositeDuration {
+  font-size: 0.72rem;
+}
+.gantt-tr-durationBeforeBar {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  width: 40px;
+  padding-right: 4px;
+  transform: translateY(-50%);
+  text-align: right;
+  pointer-events: none;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+.gantt-tr-compositeBar .gantt-tr-resizeHandle {
+  width: 6px;
+}
+.gantt-tr-row-compositeDetail {
+  background-color: color-mix(in srgb, var(--gantt-tr-composite-detail-color) 8%, transparent);
+}
+.gantt-tr-row-compositeDetail:hover,
+.gantt-tr-row-compositeDetail.gantt-tr-row-hovered {
+  box-shadow: inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
+}
+.gantt-tr-row-compositeDetail .gantt-tr-taskBar {
+  border-radius: 4px;
+  opacity: .88;
+}
+.gantt-tr-row-compositeDetail .gantt-tr-leftLabels {
+  display: none;
+}
+.gantt-tr-row-compositeDetail .gantt-tr-externalTaskName {
+  font-size: 0.72rem;
+}
+.gantt-tr-row-compositeDetail .gantt-tr-progressText {
+  display: none;
+}
+.gantt-tr-row-compositeDetail .gantt-tr-externalProgress {
+  display: none;
+}
 .gantt-tr-milestone {
   border-radius: 2px;
   overflow: visible;
@@ -555,6 +687,27 @@
 .gantt-tr-resizeHandleRight {
   right: 0;
 }
+.gantt-tr-resizeHandle::before {
+  content: "";
+  position: absolute;
+  top: 22%;
+  bottom: 22%;
+  width: 3px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.65);
+  opacity: 0;
+  transition: opacity 140ms ease;
+  pointer-events: none;
+}
+.gantt-tr-resizeHandleLeft::before {
+  left: 4px;
+}
+.gantt-tr-resizeHandleRight::before {
+  right: 4px;
+}
+.gantt-tr-row:hover .gantt-tr-resizeHandle::before {
+  opacity: 1;
+}
 .gantt-tr-resizeZoneLeft {
   cursor: ew-resize;
 }
@@ -576,15 +729,11 @@
   height: var(--gantt-dependency-port-height, var(--gantt-task-bar-height, 28px));
   padding: 0;
   border: 0;
-  border-radius: 8px;
   background: transparent;
   transform: translateY(-50%);
   cursor: crosshair;
   opacity: 0;
-  transition:
-    opacity 140ms ease,
-    background-color 140ms ease,
-    transform 140ms ease;
+  transition: opacity 150ms ease;
 }
 .gantt-tr-row:hover .gantt-tr-dependencyPort,
 .gantt-tr-dependencyPort:focus-visible,
@@ -597,33 +746,28 @@
   top: 50%;
   width: 8px;
   height: 8px;
-  border: 2px solid var(--gantt-dependency-port-color, #7c3aed);
   border-radius: 50%;
-  background: var(--gantt-cell-background, #fff);
-  transform: translateY(-50%) scale(.75);
-  transition: transform 140ms cubic-bezier(.2, 0, 0, 1), background-color 140ms ease;
+  background: var(--gantt-dependency-port-color, #7c3aed);
+  box-shadow: 0 0 0 2px var(--gantt-cell-background, #fff);
+  transform: translateY(-50%) scale(.8);
+  transition: transform 160ms cubic-bezier(.2, 0, 0, 1), box-shadow 160ms ease;
+  pointer-events: none;
 }
 .gantt-tr-dependencyPort:hover,
 .gantt-tr-dependencyPort:focus-visible {
-  background: color-mix(in srgb, var(--gantt-dependency-port-color, #7c3aed) 12%, transparent);
   outline: none;
 }
 .gantt-tr-dependencyPort:hover::after,
 .gantt-tr-dependencyPort:focus-visible::after,
 .gantt-tr-dependencyPortDragActive::after {
   transform: translateY(-50%) scale(1);
-  background: var(--gantt-dependency-port-color, #7c3aed);
-}
-.gantt-tr-dependencyPortLeft {
-}
-.gantt-tr-dependencyPort::after {
-  pointer-events: none;
+  box-shadow: 0 0 0 2px var(--gantt-cell-background, #fff), 0 0 0 5px color-mix(in srgb, var(--gantt-dependency-port-color, #7c3aed) 24%, transparent);
 }
 .gantt-tr-dependencyPortLeft::after {
   left: 12px;
 }
 .gantt-tr-dependencyPortRight::after {
-  left: 0;
+  left: 4px;
 }
 .gantt-tr-dependencyPortMilestone {
   height: var(--gantt-dependency-port-height, 14px);
@@ -633,9 +777,6 @@
   height: var(--gantt-parent-bar-height, 14px);
   transform: translateY(-50%);
 }
-.gantt-tr-dependencyPortDragActive {
-  background: color-mix(in srgb, var(--gantt-dependency-port-color, #7c3aed) 10%, transparent);
-}
 @media (max-width: 640px), (hover: none), (pointer: coarse) {
   .gantt-tr-dependencyPort {
     display: none;
@@ -1294,6 +1435,89 @@
 .gantt-tl-row-child {
   padding-left: 0;
 }
+.gantt-tl-row-composite-detail {
+  --gantt-tl-name-actions-bg: color-mix(in srgb, var(--gantt-tl-composite-detail-color) 9%, var(--gantt-cell-background, #fff));
+  background: color-mix(in srgb, var(--gantt-tl-composite-detail-color) 9%, var(--gantt-cell-background, #fff));
+  font-size: 12px;
+}
+.gantt-tl-row-composite-detail .gantt-tl-cell:not(.gantt-tl-cell-name):not(.gantt-tl-cell-number):not(.gantt-tl-cell-progress) {
+  visibility: hidden;
+}
+.gantt-tl-row-composite-detail .gantt-tl-cell-name {
+  color: #5b4b83;
+}
+.gantt-tl-compositeToggle {
+  position: absolute;
+  top: 50%;
+  z-index: 3;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--gantt-text-color, #374151);
+  cursor: pointer;
+}
+.gantt-tl-compositeToggle:hover {
+  background: var(--gantt-control-hover-background, rgba(15, 23, 42, .08));
+}
+.gantt-tl-compositeToggle:focus-visible,
+.gantt-tl-collapse-btn:focus-visible {
+  outline: 2px solid var(--gantt-focus-ring-color, #64748b);
+  outline-offset: 1px;
+}
+.gantt-tl-compositeToggle svg {
+  width: 13px;
+  height: 13px;
+  transform-origin: center;
+}
+.gantt-tl-compositeToggle .gantt-tl-compositeGlyph-composite-opening-outgoing {
+  animation: gantt-tl-composite-out-open 120ms ease-in-out forwards;
+}
+.gantt-tl-compositeToggle .gantt-tl-compositeGlyph-down-opening-incoming {
+  animation: gantt-tl-composite-in-open 120ms ease-in-out forwards;
+}
+.gantt-tl-compositeToggle .gantt-tl-compositeGlyph-down-closing-outgoing {
+  animation: gantt-tl-composite-out-close 120ms ease-in-out forwards;
+}
+.gantt-tl-compositeToggle .gantt-tl-compositeGlyph-composite-closing-incoming {
+  animation: gantt-tl-composite-in-close 120ms ease-in-out forwards;
+}
+@keyframes gantt-tl-composite-out-open {
+  to {
+    transform: rotate(90deg);
+  }
+}
+@keyframes gantt-tl-composite-in-open {
+  from {
+    transform: rotate(-90deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+@keyframes gantt-tl-composite-out-close {
+  to {
+    transform: rotate(-90deg);
+  }
+}
+@keyframes gantt-tl-composite-in-close {
+  from {
+    transform: rotate(90deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gantt-tl-compositeToggle [class*=gantt-tl-compositeGlyph-] {
+    animation-duration: 1ms;
+  }
+}
 .gantt-tl-row-parent {
   font-weight: 600;
   --gantt-tl-name-actions-bg: inherit;
@@ -1329,8 +1553,8 @@
   top: 50%;
   transform: translateY(-50%);
   z-index: 2;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   border: none;
   background: transparent;
   border-radius: 4px;
@@ -1343,7 +1567,7 @@
   transition: background-color 0.15s ease;
 }
 .gantt-tl-collapse-btn:hover {
-  background-color: transparent;
+  background-color: var(--gantt-control-hover-background, rgba(15, 23, 42, .08));
 }
 .gantt-tl-collapse-btn svg {
   transition: transform 0.15s ease;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.135.8",
+  "version": "0.136.0",
   "description": "React scheduling UI library for Gantt charts, resource planners, and table-matrix views",
   "license": "MIT",
   "repository": {