@editora/ui-core 0.1.12 → 0.1.14

package/dist/gantt.esm.js

@@ -1,214 +1,1164 @@
-import { E as w } from "./ElementBase-909688f3.mjs";
-const d = `
+import { E as At } from "./ElementBase-909688f3.mjs";
+const I = 24 * 60 * 60 * 1e3, $ = 42, _ = 62, J = 376, N = 28, Lt = 15, wt = Lt * Math.SQRT2 / 2, ht = {
+  day: 36,
+  week: 13,
+  month: 4.4,
+  quarter: 2.2,
+  year: 1.15
+}, mt = `
   :host {
-    --ui-gantt-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-gantt-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-gantt-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-gantt-panel: var(--ui-color-surface, #ffffff);
+    --ui-gantt-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-gantt-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 56%, transparent);
     --ui-gantt-text: var(--ui-color-text, #0f172a);
     --ui-gantt-muted: var(--ui-color-muted, #64748b);
     --ui-gantt-accent: var(--ui-color-primary, #2563eb);
-
+    --ui-gantt-selected: color-mix(in srgb, var(--ui-gantt-accent) 10%, transparent);
     display: block;
     min-inline-size: 0;
     color-scheme: light dark;
     font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   .frame {
     border: 1px solid var(--ui-gantt-border);
-    border-radius: 14px;
+    border-radius: 12px;
     background: var(--ui-gantt-bg);
-    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
-    padding: 12px;
-    display: grid;
-    gap: 10px;
+    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
+    overflow: hidden;
   }
 
-  .header {
+  .toolbar {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    font-size: 12px;
+    gap: 12px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--ui-gantt-border);
+    background: color-mix(in srgb, var(--ui-gantt-panel) 92%, transparent);
+  }
+
+  .title {
+    min-inline-size: 0;
+    font-size: 13px;
+    font-weight: 750;
+    color: var(--ui-gantt-text);
+  }
+
+  .meta {
     color: var(--ui-gantt-muted);
+    font-weight: 600;
+    margin-inline-start: 8px;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  .control,
+  .select,
+  .zoom-button {
+    border: 1px solid var(--ui-gantt-border);
+    background: var(--ui-gantt-panel);
+    color: var(--ui-gantt-text);
+    border-radius: 7px;
+    min-block-size: 30px;
+    font: inherit;
+    font-size: 12px;
+  }
+
+  .control {
+    inline-size: min(220px, 34vw);
+    padding: 0 9px;
+  }
+
+  .select {
+    padding: 0 28px 0 9px;
+    min-inline-size: 118px;
+  }
+
+  .zoom-button {
+    padding: 0 9px;
+    cursor: pointer;
+  }
+
+  .zoom-button[aria-pressed="true"] {
+    border-color: color-mix(in srgb, var(--ui-gantt-accent) 46%, var(--ui-gantt-border));
+    background: color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel));
+    color: var(--ui-gantt-accent);
+  }
+
+  .viewport {
+    overflow: auto;
+    max-block-size: var(--ui-gantt-max-height, 620px);
   }
 
-  .rows {
+  .surface {
     display: grid;
-    gap: 8px;
+    grid-template-columns: ${J}px minmax(640px, 1fr);
+    min-inline-size: 100%;
+  }
+
+  .grid-head,
+  .timeline-head {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+    min-block-size: 62px;
+    background: color-mix(in srgb, var(--ui-gantt-panel) 96%, transparent);
+    border-bottom: 1px solid var(--ui-gantt-border);
   }
 
-  .row {
+  .grid-head {
+    left: 0;
+    z-index: 5;
     display: grid;
-    grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
-    gap: 10px;
+    grid-template-columns: minmax(170px, 1fr) 82px 80px 44px;
+    border-right: 1px solid var(--ui-gantt-border);
+  }
+
+  .grid-head span,
+  .head-button,
+  .grid-cell {
+    display: flex;
     align-items: center;
+    min-inline-size: 0;
+    padding: 0 10px;
+    border-right: 1px solid color-mix(in srgb, var(--ui-gantt-border) 62%, transparent);
   }
 
-  .label {
-    font-size: 12px;
+  .grid-head span {
+    font-size: 11px;
+    font-weight: 750;
+    color: var(--ui-gantt-muted);
+    text-transform: uppercase;
+    letter-spacing: 0;
+  }
+
+  .head-button {
+    border: 0;
+    background: transparent;
+    color: var(--ui-gantt-muted);
+    cursor: pointer;
+    font: inherit;
+    font-size: 11px;
+    font-weight: 750;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0;
+  }
+
+  .head-button:hover,
+  .head-button[aria-sort]:not([aria-sort="none"]) {
+    color: var(--ui-gantt-accent);
+  }
+
+  .grid-head span:last-child,
+  .grid-cell:last-child {
+    border-right: 0;
+  }
+
+  .timeline-head {
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+  }
+
+  .scale {
+    position: relative;
+    min-block-size: 62px;
+  }
+
+  .tick {
+    position: absolute;
+    inset-block: 0;
+    border-left: 1px solid var(--ui-gantt-grid);
+    padding: 9px 8px;
+    color: var(--ui-gantt-muted);
+    font-size: 11px;
+    font-weight: 650;
+    white-space: nowrap;
+  }
+
+  .grid-body {
+    position: sticky;
+    left: 0;
+    z-index: 3;
+    background: var(--ui-gantt-panel);
+    border-right: 1px solid var(--ui-gantt-border);
+  }
+
+  .timeline-body {
+    position: relative;
+    background:
+      linear-gradient(to right, var(--ui-gantt-grid) 1px, transparent 1px) 0 0 / var(--day-width) 100%,
+      color-mix(in srgb, var(--ui-gantt-panel) 98%, transparent);
+  }
+
+  .grid-row,
+  .timeline-row {
+    block-size: ${$}px;
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-gantt-border) 56%, transparent);
+  }
+
+  .grid-row {
+    display: grid;
+    grid-template-columns: minmax(170px, 1fr) 82px 80px 44px;
     color: var(--ui-gantt-text);
-    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .grid-row.selected,
+  .timeline-row.selected {
+    background: var(--ui-gantt-selected);
+  }
+
+  .task-name {
+    gap: 7px;
+    font-weight: 650;
+  }
+
+  .expander {
+    flex: 0 0 22px;
+    inline-size: 22px;
+    block-size: 22px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--ui-gantt-muted);
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    font-size: 13px;
+  }
+
+  .expander:hover {
+    background: color-mix(in srgb, var(--ui-gantt-accent) 9%, transparent);
+    color: var(--ui-gantt-accent);
+  }
+
+  .name-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .track {
+  .badge {
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+    color: var(--ui-gantt-muted);
+    font-size: 11px;
+  }
+
+  .timeline-row {
     position: relative;
-    border: 1px solid color-mix(in srgb, var(--ui-gantt-border) 72%, transparent);
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-gantt-bg) 90%, transparent);
-    min-block-size: 14px;
   }
 
   .bar {
     position: absolute;
-    top: 1px;
-    bottom: 1px;
-    border-radius: 999px;
-    background: var(--tone, var(--ui-gantt-accent));
-    box-shadow: 0 6px 14px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 26%, transparent);
+    top: 12px;
+    block-size: 18px;
+    min-inline-size: 10px;
+    border: 0;
+    border-radius: 4px;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 22%, transparent), transparent 42%),
+      var(--tone, var(--ui-gantt-accent));
+    box-shadow:
+      0 4px 10px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 18%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent);
+    cursor: grab;
     overflow: hidden;
+    outline: 0;
+    touch-action: none;
+    transition: box-shadow 140ms ease, filter 140ms ease, transform 140ms ease;
+    will-change: left, width;
+  }
+
+  .bar:hover,
+  .bar.dragging {
+    filter: saturate(1.08);
+    box-shadow:
+      0 6px 14px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 26%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 30%, transparent);
+  }
+
+  .bar.dragging {
+    cursor: grabbing;
+    z-index: 5;
+    transform: translateY(-1px);
+  }
+
+  .bar:focus-visible {
+    outline: 2px solid var(--ui-gantt-accent);
+    outline-offset: 2px;
+  }
+
+  .bar.critical {
+    --tone: var(--ui-color-danger, #dc2626);
+    box-shadow:
+      0 5px 12px color-mix(in srgb, var(--ui-color-danger, #dc2626) 24%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
+  }
+
+  .bar.split {
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  .bar.split .progress {
+    display: none;
+  }
+
+  .split-segment {
+    position: absolute;
+    inset-block: 0;
+    border-radius: 4px;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 22%, transparent), transparent 42%),
+      var(--tone, var(--ui-gantt-accent));
+    box-shadow:
+      0 4px 10px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 18%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 24%, transparent);
+  }
+
+  .baseline {
+    position: absolute;
+    top: 33px;
+    block-size: 4px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-gantt-muted) 54%, transparent);
+    z-index: 1;
+  }
+
+  .bar.summary {
+    block-size: 9px;
+    top: 17px;
+    border-radius: 3px;
+    background: color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 82%, #0f172a);
+  }
+
+  .bar.milestone {
+    inline-size: 28px !important;
+    min-inline-size: 28px;
+    block-size: 28px;
+    top: 7px;
+    border-radius: 8px;
+    background: transparent;
+    box-shadow: none;
+    cursor: grab;
+    overflow: visible;
+    display: grid;
+    place-items: center;
+  }
+
+  .bar.milestone:hover,
+  .bar.milestone.dragging {
+    box-shadow: none;
+  }
+
+  .milestone-shape {
+    inline-size: 15px;
+    block-size: 15px;
+    border-radius: 4px;
+    background:
+      linear-gradient(135deg, color-mix(in srgb, #ffffff 24%, transparent), transparent 48%),
+      var(--tone, var(--ui-gantt-accent));
+    box-shadow:
+      0 7px 18px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 28%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 34%, transparent);
+    transform: rotate(45deg);
+    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+  }
+
+  .bar.milestone:hover .milestone-shape,
+  .bar.milestone.dragging .milestone-shape {
+    filter: saturate(1.1);
+    transform: rotate(45deg) scale(1.08);
+    box-shadow:
+      0 10px 24px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 36%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 44%, transparent);
+  }
+
+  .bar.milestone .progress,
+  .bar.milestone .handle,
+  .bar.summary .handle {
+    display: none;
   }
 
   .progress {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    background: linear-gradient(90deg, color-mix(in srgb, #000 22%, transparent), transparent);
+    opacity: 0.3;
+    inline-size: var(--progress, 0%);
+  }
+
+  .handle {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 14px;
+    cursor: ew-resize;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  .handle.start {
+    inset-inline-start: 0;
+  }
+
+  .handle.end {
+    inset-inline-end: 0;
+  }
+
+  .handle::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 4px;
+    block-size: 11px;
+    border-radius: 999px;
+    background: color-mix(in srgb, #ffffff 82%, transparent);
+    transform: translateY(-50%);
+  }
+
+  .handle.start::after {
+    inset-inline-start: 4px;
+  }
+
+  .handle.end::after {
+    inset-inline-end: 4px;
+  }
+
+  .bar:hover .handle,
+  .bar.dragging .handle {
+    opacity: 1;
+  }
+
+  .drag-tip {
+    position: absolute;
+    z-index: 6;
+    inset-block-start: -28px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: 4px 7px;
+    border-radius: 6px;
+    background: #0f172a;
+    color: #f8fafc;
+    font-size: 11px;
+    font-weight: 700;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .bar.dragging .drag-tip {
+    opacity: 1;
+  }
+
+  :host([bar-variant="soft"]) .bar.task {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 38%, transparent), transparent 46%),
+      color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 22%, var(--ui-gantt-panel));
+    color: var(--ui-gantt-text);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 34%, transparent),
+      0 6px 15px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 14%, transparent);
+  }
+
+  :host([bar-variant="soft"]) .milestone-shape {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, #ffffff 42%, transparent), transparent 52%),
+      color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 28%, var(--ui-gantt-panel));
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 42%, transparent),
+      0 7px 16px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 16%, transparent);
+  }
+
+  :host([bar-variant="striped"]) .bar.task {
+    background:
+      repeating-linear-gradient(135deg, color-mix(in srgb, #ffffff 24%, transparent) 0 7px, transparent 7px 14px),
+      var(--tone, var(--ui-gantt-accent));
+  }
+
+  :host([bar-variant="striped"]) .milestone-shape {
+    background:
+      repeating-linear-gradient(135deg, color-mix(in srgb, #ffffff 28%, transparent) 0 5px, transparent 5px 10px),
+      var(--tone, var(--ui-gantt-accent));
+  }
+
+  :host([bar-variant="outline"]) .bar.task {
+    background: color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 8%, var(--ui-gantt-panel));
+    box-shadow:
+      inset 0 0 0 1.5px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 72%, transparent),
+      0 6px 15px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 10%, transparent);
+  }
+
+  :host([bar-variant="outline"]) .bar.task .progress {
+    background: color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 28%, transparent);
+    opacity: 1;
+  }
+
+  :host([bar-variant="outline"]) .milestone-shape {
+    background: color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 10%, var(--ui-gantt-panel));
+    box-shadow:
+      inset 0 0 0 2px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 72%, transparent),
+      0 7px 16px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 10%, transparent);
+  }
+
+  :host([bar-variant="glass"]) .bar.task {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 50%, transparent), color-mix(in srgb, #ffffff 10%, transparent)),
+      color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 72%, transparent);
+    backdrop-filter: blur(8px);
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, #ffffff 48%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, #ffffff 26%, transparent),
+      0 10px 24px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 20%, transparent);
+  }
+
+  :host([bar-variant="glass"]) .milestone-shape {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, #ffffff 52%, transparent), color-mix(in srgb, #ffffff 8%, transparent)),
+      color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 74%, transparent);
+    backdrop-filter: blur(8px);
+  }
+
+  .today {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 2px;
+    background: var(--ui-color-danger, #dc2626);
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .today::before {
+    content: "Today";
+    position: absolute;
+    inset-block-start: 4px;
+    inset-inline-start: 6px;
+    color: var(--ui-color-danger, #dc2626);
+    font-size: 11px;
+    font-weight: 750;
+  }
+
+  .links {
     position: absolute;
     inset: 0;
-    background: linear-gradient(90deg, color-mix(in srgb, #000 18%, transparent), transparent);
-    opacity: 0.28;
-    width: var(--progress, 0%);
+    overflow: visible;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .links path {
+    fill: none;
+    stroke: color-mix(in srgb, var(--ui-gantt-muted) 82%, transparent);
+    stroke-width: 1.35;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+    marker-end: url(#ui-gantt-arrow);
+  }
+
+  .links .link-hit {
+    stroke: transparent;
+    stroke-width: 10;
+    marker-end: none;
+    pointer-events: stroke;
+    cursor: pointer;
+  }
+
+  .links path:not(.link-hit) {
+    pointer-events: none;
+  }
+
+  .links marker path {
+    fill: color-mix(in srgb, var(--ui-gantt-muted) 82%, transparent);
+    stroke: none;
+  }
+
+  .empty {
+    padding: 28px;
+    color: var(--ui-gantt-muted);
+    font-size: 13px;
   }
 
   :host([variant="contrast"]) {
     --ui-gantt-bg: #0f172a;
+    --ui-gantt-panel: #111827;
     --ui-gantt-border: #334155;
+    --ui-gantt-grid: #263449;
     --ui-gantt-text: #e2e8f0;
     --ui-gantt-muted: #93a4bd;
-    --ui-gantt-accent: #93c5fd;
+    --ui-gantt-accent: #60a5fa;
+    --ui-gantt-selected: rgba(96, 165, 250, 0.13);
+  }
+
+  :host([readonly]) .bar {
+    cursor: pointer;
   }
 
   :host([headless]) .frame {
     display: none;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .bar,
-    .progress {
-      transition: none !important;
+  @media (max-width: 760px) {
+    .surface {
+      grid-template-columns: 270px minmax(560px, 1fr);
     }
-  }
 
-  @media (prefers-contrast: more) {
-    .frame {
-      box-shadow: none;
+    .grid-head,
+    .grid-row {
+      grid-template-columns: minmax(150px, 1fr) 64px 56px;
+    }
+
+    .grid-head span:nth-child(3),
+    .grid-cell:nth-child(3) {
+      display: none;
     }
+  }
 
-    .track {
-      border-width: 2px;
+  @media (prefers-reduced-motion: reduce) {
+    .bar,
+    .progress {
+      transition: none !important;
     }
   }
 
   @media (forced-colors: active) {
     :host {
       --ui-gantt-bg: Canvas;
+      --ui-gantt-panel: Canvas;
       --ui-gantt-border: CanvasText;
+      --ui-gantt-grid: CanvasText;
       --ui-gantt-text: CanvasText;
       --ui-gantt-muted: CanvasText;
       --ui-gantt-accent: Highlight;
+      --ui-gantt-selected: Highlight;
     }
 
     .frame,
-    .track,
+    .grid-head,
+    .timeline-head,
+    .grid-body,
     .bar,
-    .progress {
+    .select,
+    .control,
+    .zoom-button {
       forced-color-adjust: none;
       box-shadow: none;
-      border-color: CanvasText;
-    }
-
-    .frame,
-    .track {
-      background: Canvas;
-      color: CanvasText;
-    }
-
-    .bar {
-      background: Highlight;
     }
   }
-`, u = {
+`, ft = {
   default: "var(--ui-color-primary, #2563eb)",
   info: "var(--ui-color-info, #0891b2)",
   success: "var(--ui-color-success, #16a34a)",
   warning: "var(--ui-color-warning, #d97706)",
   danger: "var(--ui-color-danger, #dc2626)"
 };
-function s(o) {
-  const e = Date.parse(o);
-  return Number.isFinite(e) ? e : null;
+function b(n) {
+  return String(n ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function x(n) {
+  if (n instanceof Date) {
+    const a = n.getTime();
+    return Number.isFinite(a) ? D(a) : null;
+  }
+  const r = String(n || "").trim(), d = /^(\d{4})-(\d{2})-(\d{2})$/.exec(r);
+  if (d) {
+    const a = Number(d[1]), e = Number(d[2]), i = Number(d[3]), g = new Date(a, e - 1, i).getTime();
+    return Number.isFinite(g) ? D(g) : null;
+  }
+  const l = Date.parse(r);
+  return Number.isFinite(l) ? D(l) : null;
+}
+function D(n) {
+  const r = new Date(n);
+  return r.setHours(0, 0, 0, 0), r.getTime();
+}
+function w(n, r) {
+  return D(n + r * I);
+}
+function S(n) {
+  const r = new Date(n), d = r.getFullYear(), l = String(r.getMonth() + 1).padStart(2, "0"), a = String(r.getDate()).padStart(2, "0");
+  return `${d}-${l}-${a}`;
+}
+function O(n) {
+  return new Intl.DateTimeFormat(void 0, { month: "short", day: "numeric" }).format(new Date(n));
+}
+function bt(n) {
+  return n === "day" || n === "month" || n === "quarter" || n === "year" ? n : "week";
+}
+function j(n) {
+  return n === "start" || n === "end" || n === "label" || n === "progress" ? n : "none";
+}
+function Ft(n) {
+  return n === "soft" || n === "striped" || n === "outline" || n === "glass" ? n : "solid";
 }
-function y(o) {
-  if (!o)
+function Dt(n, r) {
+  if (!n)
     return [];
   try {
-    const e = JSON.parse(o);
-    return Array.isArray(e) ? e.map((t) => {
-      if (!t || typeof t != "object")
+    const d = JSON.parse(n);
+    return Array.isArray(d) ? d.map((l, a) => {
+      if (!l || typeof l != "object")
         return null;
-      const i = String(t.label || "").trim(), a = String(t.start || "").trim(), n = String(t.end || "").trim();
-      return !i || !a || !n || s(a) == null || s(n) == null ? null : {
-        id: t.id ? String(t.id) : void 0,
+      const e = l, i = String(e.label || e.text || "").trim(), s = x(e.start), g = Number(e.duration);
+      let c = x(e.end);
+      if (c == null && s != null && Number.isFinite(g) && (c = w(s, Math.max(0, g))), !i || s == null)
+        return null;
+      const o = e.type === "summary" || e.type === "milestone" ? e.type : "task", u = o === "milestone" ? s : Math.max(c ?? w(s, 1), w(s, 1)), p = String(e.id || `task-${a + 1}`), m = r.get(p) || {};
+      return {
+        id: p,
         label: i,
-        start: a,
-        end: n,
-        progress: Number.isFinite(Number(t.progress)) ? Number(t.progress) : void 0,
-        tone: t.tone
+        start: m.start || S(s),
+        end: m.end || S(u),
+        progress: Number.isFinite(Number(e.progress)) ? Math.max(0, Math.min(100, Number(e.progress))) : void 0,
+        tone: typeof e.tone == "string" ? e.tone : void 0,
+        type: o,
+        parent: e.parent != null ? String(e.parent) : void 0,
+        open: e.open !== !1,
+        assignee: e.assignee != null ? String(e.assignee) : e.owner != null ? String(e.owner) : void 0,
+        readonly: e.readonly === !0,
+        baselineStart: e.baselineStart != null ? String(e.baselineStart) : void 0,
+        baselineEnd: e.baselineEnd != null ? String(e.baselineEnd) : void 0,
+        critical: e.critical === !0,
+        segments: Array.isArray(e.segments) ? e.segments : void 0
       };
     }).filter(Boolean) : [];
   } catch {
     return [];
   }
 }
-class k extends w {
+function Rt(n) {
+  if (!n)
+    return [];
+  try {
+    const r = JSON.parse(n);
+    return Array.isArray(r) ? r.map((d, l) => {
+      if (!d || typeof d != "object")
+        return null;
+      const a = d, e = String(a.source || "").trim(), i = String(a.target || "").trim();
+      if (!e || !i)
+        return null;
+      const s = a.type === "s2s" || a.type === "e2e" || a.type === "s2e" ? a.type : "e2s";
+      return { id: String(a.id || `link-${l + 1}`), source: e, target: i, type: s };
+    }).filter(Boolean) : [];
+  } catch {
+    return [];
+  }
+}
+function qt(n, r) {
+  return r === "none" ? n : [...n].sort((d, l) => {
+    if (r === "label")
+      return d.label.localeCompare(l.label);
+    if (r === "progress")
+      return Number(l.progress ?? 0) - Number(d.progress ?? 0);
+    const a = x(r === "start" ? d.start : d.end) ?? 0, e = x(r === "start" ? l.start : l.end) ?? 0;
+    return a - e;
+  });
+}
+function Nt(n, r, d, l) {
+  const a = /* @__PURE__ */ new Map(), e = new Map(n.map((o) => [o.id, o]));
+  n.forEach((o) => {
+    const u = o.parent && e.has(o.parent) ? o.parent : "__root__", p = a.get(u) || [];
+    p.push(o), a.set(u, p);
+  });
+  const i = d.trim().toLowerCase(), s = (o) => !i || o.label.toLowerCase().includes(i) || (o.assignee || "").toLowerCase().includes(i) ? !0 : (a.get(o.id) || []).some(s), g = [], c = (o, u) => {
+    qt(a.get(o) || [], l).forEach((p) => {
+      if (!s(p))
+        return;
+      const m = x(p.start), h = x(p.end);
+      if (m == null || h == null)
+        return;
+      const f = (a.get(p.id) || []).length > 0;
+      g.push({ ...p, depth: u, hasChildren: f, startMs: m, endMs: h }), f && !r.has(p.id) && c(p.id, u + 1);
+    });
+  };
+  return c("__root__", 0), g;
+}
+function Ht(n, r, d, l, a = 0, e = Number.POSITIVE_INFINITY) {
+  const i = Math.max(1, Math.ceil((r - n) / I)), s = l === "day" ? 1 : l === "week" ? 7 : l === "month" ? 30 : l === "quarter" ? 91 : 365, g = Math.max(0, Math.floor(Math.max(0, a - 480) / d / s) * s), c = Math.min(i, Math.ceil((a + e + 960) / d / s) * s), o = [];
+  for (let u = g; u <= c; u += s) {
+    const p = u * d, m = w(n, u), h = l === "day" ? O(m) : new Intl.DateTimeFormat(void 0, { month: "short", year: l === "week" || l === "month" ? void 0 : "numeric" }).format(new Date(m));
+    o.push(`<span class="tick" style="left:${p.toFixed(2)}px">${b(h)}</span>`);
+  }
+  return o.join("");
+}
+function H(n) {
+  return n.type === "summary" || n.hasChildren ? "summary" : n.type === "milestone" || n.startMs === n.endMs ? "milestone" : "task";
+}
+function xt(n) {
+  const r = H(n);
+  return r === "summary" ? 17 + 9 / 2 : r === "milestone" ? 7 + N / 2 : 12 + 18 / 2;
+}
+function Vt(n, r) {
+  return H(n) === "milestone" ? r(n.startMs) - wt : r(n.startMs);
+}
+function Wt(n, r) {
+  return H(n) === "milestone" ? r(n.startMs) + wt : r(n.endMs);
+}
+function vt(n, r, d) {
+  return r === "start" ? Vt(n, d) : Wt(n, d);
+}
+function _t(n = "e2s") {
+  return n === "s2s" ? { source: "start", target: "start" } : n === "e2e" ? { source: "end", target: "end" } : n === "s2e" ? { source: "start", target: "end" } : { source: "end", target: "start" };
+}
+function jt(n, r, d, l, a, e) {
+  const i = _t(a), s = i.source === "start" ? -1 : 1, g = i.target === "start" ? 1 : -1, c = vt(n, i.source, e), o = vt(d, i.target, e), u = r * $ + xt(n), p = l * $ + xt(d), m = 22, h = c + s * m, f = o - g * m, v = 26;
+  let y = (h + f) / 2;
+  if (s === g) {
+    const T = s === 1 ? Math.max(h, f, c, o) + v : Math.min(h, f, c, o) - v;
+    y = (s === 1 ? f > h + v : f < h - v) ? y : T;
+  } else
+    (s === 1 ? f < h : f > h) && (y = s === 1 ? Math.max(h, c, o) + v : Math.min(h, c, o) - v);
+  const A = Math.abs(p - u) < 1 ? i.target === "start" ? p - 16 : p + 16 : p > u ? p - $ / 2 + 3 : p + $ / 2 - 3;
+  return [[c, u], [h, u], [y, u], [y, A], [f, A], [f, p], [o, p]].map(([T, R], P) => `${P === 0 ? "M" : "L"} ${T.toFixed(1)} ${R.toFixed(1)}`).join(" ");
+}
+class Ot extends At {
+  constructor() {
+    super(...arguments), this.collapsed = /* @__PURE__ */ new Set(), this.overrides = /* @__PURE__ */ new Map(), this.drag = null, this.selectedId = null, this.internalFilter = "", this.viewportTop = 0, this.viewportLeft = 0, this.viewportWidth = 1800, this.viewportHeight = 620, this.renderedFirstRow = 0, this.renderedLastRow = 0, this.scrollFrame = null, this.overridesVersion = 0, this.taskCacheRaw = null, this.taskCacheVersion = -1, this.taskCache = [], this.linkCacheRaw = null, this.linkCache = [], this.visibleCacheKey = "", this.visibleCache = [];
+  }
   static get observedAttributes() {
-    return ["tasks", "variant", "headless"];
+    return ["tasks", "links", "zoom", "filter", "sort", "bar-variant", "variant", "readonly", "show-toolbar", "show-today", "headless"];
   }
   render() {
-    const e = y(this.getAttribute("tasks"));
-    if (!e.length) {
+    const r = this.getTasks(), d = this.getLinks(), l = bt(this.getAttribute("zoom")), a = j(this.getAttribute("sort")), e = Ft(this.getAttribute("bar-variant")), i = this.getAttribute("filter") ?? this.internalFilter, s = this.getVisibleTasks(r, i, a), g = this.hasAttribute("readonly"), c = this.getAttribute("show-toolbar") !== "false", o = this.getAttribute("show-today") !== "false";
+    if (!r.length) {
       this.setContent(`
-        <style>${d}</style>
+        <style>${mt}</style>
         <section class="frame" part="frame">
-          <div class="header">No tasks in this range</div>
+          <div class="empty" part="empty">No tasks in this range</div>
         </section>
       `);
       return;
     }
-    const t = e.map((r) => s(r.start) || 0), i = e.map((r) => s(r.end) || 0), a = Math.min(...t), n = Math.max(...i), c = Math.max(1, n - a), p = e.map((r) => {
-      const l = s(r.start) || a, b = s(r.end) || l, f = (l - a) / c * 100, x = Math.max(2, (Math.max(b, l) - l) / c * 100), v = Math.max(0, Math.min(100, Number(r.progress ?? 0))), h = u[r.tone || "default"] || u.default;
+    const u = r.map((t) => x(t.start)).filter((t) => t != null), p = r.map((t) => x(t.end)).filter((t) => t != null), m = w(Math.min(...u), -2), h = w(Math.max(...p), 3), f = Math.max(7, Math.ceil((h - m) / I)), v = ht[l], y = Math.max(680, f * v), A = Math.max(s.length * $, $), z = this.getAttribute("virtualized") !== "false" && s.length > 240, T = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - _) / $)), R = 160, P = Math.max(0, this.viewportTop - _), yt = Math.max(0, Math.floor(P / $)), X = Math.max(180, T * 4), L = z ? Math.max(0, Math.floor(yt / X) * X - R) : 0, B = z ? Math.min(s.length, L + T + R * 2 + X) : s.length, K = s.slice(L, B), V = L * $, W = Math.max(0, (s.length - B) * $);
+    this.renderedFirstRow = L, this.renderedLastRow = B;
+    const Q = new Map(s.map((t, M) => [t.id, { task: t, index: M }])), tt = new Set(K.map((t) => t.id)), C = (t) => (t - m) / I * v, kt = K.map((t, M) => {
+      const E = L + M, k = this.selectedId === t.id ? " selected" : "", F = H(t), G = t.progress == null ? "-" : `${Math.round(t.progress)}%`, U = F === "milestone" ? O(t.startMs) : `${O(t.startMs)} - ${O(t.endMs)}`;
       return `
-          <article class="row" part="row">
-            <span class="label" title="${r.label}">${r.label}</span>
-            <div class="track">
-              <div class="bar" style="left:${f.toFixed(2)}%;width:${x.toFixed(2)}%;--tone:${h}">
-                <span class="progress" style="--progress:${v.toFixed(2)}%"></span>
-              </div>
-            </div>
-          </article>
-        `;
-    }).join(""), g = new Date(a).toLocaleDateString(), m = new Date(n).toLocaleDateString();
+        <article class="grid-row${k}" part="grid-row" data-task-id="${b(t.id)}" role="row" aria-rowindex="${E + 2}" aria-level="${t.depth + 1}" ${t.hasChildren ? `aria-expanded="${!this.collapsed.has(t.id)}"` : ""}>
+          <div class="grid-cell task-name" role="gridcell" style="padding-left:${10 + t.depth * 18}px">
+            ${t.hasChildren ? `<button class="expander" data-action="toggle" data-task-id="${b(t.id)}" aria-label="${this.collapsed.has(t.id) ? "Expand" : "Collapse"} ${b(t.label)}">${this.collapsed.has(t.id) ? "›" : "⌄"}</button>` : '<span style="inline-size:22px"></span>'}
+            <span class="name-text" title="${b(t.label)}">${b(t.label)}</span>
+          </div>
+          <div class="grid-cell badge" role="gridcell">${b(t.assignee || F)}</div>
+          <div class="grid-cell badge" role="gridcell">${b(U)}</div>
+          <div class="grid-cell badge" role="gridcell">${b(G)}</div>
+        </article>
+      `;
+    }).join(""), $t = K.map((t, M) => {
+      var st;
+      const E = L + M, k = H(t), F = this.selectedId === t.id ? " selected" : "", G = this.selectedId === t.id || !this.selectedId && E === 0, U = ft[t.tone || (k === "summary" ? "info" : "default")] || ft.default, rt = k === "milestone" ? C(t.startMs) - N / 2 : C(t.startMs), zt = C(k === "milestone" ? t.startMs : t.endMs), Ct = k === "milestone" ? N : Math.max(12, zt - rt), Tt = Math.max(0, Math.min(100, Number(t.progress ?? 0))), at = !g && !t.readonly && k !== "summary", nt = at && k === "task", it = k === "task" && ((st = t.segments) != null && st.length) ? t.segments.map((ot) => {
+        const lt = x(ot.start), dt = x(ot.end);
+        if (lt == null || dt == null)
+          return "";
+        const ct = Math.max(I, t.endMs - t.startMs), Z = Math.max(t.startMs, lt), pt = Math.min(t.endMs, dt);
+        if (pt <= Z)
+          return "";
+        const ut = Math.max(0, Math.min(100, (Z - t.startMs) / ct * 100)), It = (pt - Z) / ct * 100, gt = Math.min(100 - ut, Math.max(1, It));
+        return gt <= 0 ? "" : `<span class="split-segment" style="left:${ut.toFixed(2)}%;width:${gt.toFixed(2)}%"></span>`;
+      }).join("") : "";
+      return `
+        <article class="timeline-row${F}" part="timeline-row" data-task-id="${b(t.id)}" role="row" aria-rowindex="${E + 2}">
+          ${t.baselineStart && t.baselineEnd ? `<span class="baseline" style="left:${C(x(t.baselineStart) || t.startMs).toFixed(2)}px;width:${Math.max(4, C(x(t.baselineEnd) || t.endMs) - C(x(t.baselineStart) || t.startMs)).toFixed(2)}px"></span>` : ""}
+          <button
+            class="bar ${k}${t.critical ? " critical" : ""}${it ? " split" : ""}"
+            part="bar ${k}"
+            data-task-id="${b(t.id)}"
+            data-kind="${k}"
+            role="gridcell"
+            tabindex="${G ? "0" : "-1"}"
+            aria-selected="${this.selectedId === t.id}"
+            aria-colindex="5"
+            style="left:${rt.toFixed(2)}px;width:${Ct.toFixed(2)}px;--tone:${U};--progress:${Tt.toFixed(2)}%"
+            aria-label="${b(t.label)}"
+            ${at ? 'data-draggable="true"' : ""}
+          >
+            ${nt ? '<span class="handle start" data-mode="resize-start"></span>' : ""}
+            <span class="progress"></span>
+            ${it}
+            ${k === "milestone" ? '<span class="milestone-shape"></span>' : ""}
+            <span class="drag-tip"></span>
+            ${nt ? '<span class="handle end" data-mode="resize-end"></span>' : ""}
+          </button>
+        </article>
+      `;
+    }).join(""), et = d.map((t) => {
+      const M = Q.get(t.source), E = Q.get(t.target);
+      if (!M || !E || z && !tt.has(t.source) && !tt.has(t.target))
+        return "";
+      const k = jt(M.task, M.index, E.task, E.index, t.type, C), F = `${M.task.label} dependency to ${E.task.label}`;
+      return `<path class="link-hit" d="${k}" data-link-id="${b(t.id)}" data-source-id="${b(t.source)}" data-target-id="${b(t.target)}" data-link-type="${b(t.type || "e2s")}" aria-label="${b(F)}" /><path d="${k}" />`;
+    }).join(""), Mt = et ? '<defs><marker id="ui-gantt-arrow" markerWidth="9" markerHeight="9" refX="8.5" refY="4.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M 0.5 0.75 L 8.5 4.5 L 0.5 8.25 z" /></marker></defs>' : "", Y = D(Date.now()), Et = C(Y), St = o && Y >= m && Y <= h ? `<div class="today" part="today" style="left:${Et.toFixed(2)}px"></div>` : "";
     this.setContent(`
-      <style>${d}</style>
-      <section class="frame" part="frame">
-        <header class="header" part="header"><span>${g}</span><span>${m}</span></header>
-        <div class="rows" part="rows">${p}</div>
+      <style>${mt}</style>
+      <section class="frame" part="frame" data-bar-variant="${e}">
+        ${c ? `
+          <header class="toolbar" part="toolbar">
+            <div class="title">Project schedule <span class="meta">${s.length}/${r.length} tasks</span></div>
+            <div class="controls">
+              <input class="control" value="${b(i)}" placeholder="Filter tasks" aria-label="Filter tasks" />
+              <select class="select" aria-label="Sort tasks">
+                ${[
+      ["none", "Manual"],
+      ["start", "Start date"],
+      ["end", "End date"],
+      ["label", "Name"],
+      ["progress", "Progress"]
+    ].map(([t, M]) => `<option value="${t}" ${a === t ? "selected" : ""}>${M}</option>`).join("")}
+              </select>
+              ${["day", "week", "month", "quarter", "year"].map((t) => `<button class="zoom-button" data-zoom="${t}" aria-pressed="${l === t}">${t}</button>`).join("")}
+            </div>
+          </header>
+        ` : ""}
+        <div class="viewport" part="viewport">
+          <div class="surface" part="surface" style="--day-width:${v}px;grid-template-columns:${J}px ${y.toFixed(2)}px;inline-size:max(100%, ${(J + y).toFixed(2)}px)">
+            <header class="grid-head" part="grid-head" role="row">
+              <button class="head-button" data-sort="label" role="columnheader" aria-sort="${a === "label" ? "ascending" : "none"}">Task</button>
+              <span role="columnheader">Owner</span>
+              <button class="head-button" data-sort="start" role="columnheader" aria-sort="${a === "start" ? "ascending" : "none"}">Dates</button>
+              <button class="head-button" data-sort="progress" role="columnheader" aria-sort="${a === "progress" ? "descending" : "none"}">%</button>
+            </header>
+            <header class="timeline-head" part="timeline-head">
+              <div class="scale" style="width:${y.toFixed(2)}px">${Ht(m, h, v, l, this.viewportLeft, this.viewportWidth)}</div>
+            </header>
+            <div class="grid-body" part="grid-body" role="treegrid" aria-rowcount="${s.length + 1}" aria-colcount="4">
+              ${z && V ? `<div style="height:${V}px"></div>` : ""}
+              ${kt || '<div class="empty">No matching tasks</div>'}
+              ${z && W ? `<div style="height:${W}px"></div>` : ""}
+            </div>
+            <div class="timeline-body" part="timeline-body" style="width:${y.toFixed(2)}px;min-height:${A}px">
+              <svg class="links" width="${y.toFixed(0)}" height="${A}" viewBox="0 0 ${y.toFixed(0)} ${A}" aria-hidden="true">${Mt}${et}</svg>
+              ${St}
+              ${z && V ? `<div style="height:${V}px"></div>` : ""}
+              ${$t}
+              ${z && W ? `<div style="height:${W}px"></div>` : ""}
+            </div>
+          </div>
+        </div>
       </section>
     `);
+    const q = this.root.querySelector(".viewport");
+    q && (q.scrollTop = this.viewportTop, q.scrollLeft = this.viewportLeft, this.viewportWidth = q.clientWidth || this.viewportWidth, this.viewportHeight = q.clientHeight || this.viewportHeight), this.bindEvents();
+  }
+  bindEvents() {
+    var r, d, l;
+    this.root.querySelectorAll("[data-task-id]").forEach((a) => {
+      a.addEventListener("click", (e) => {
+        var o;
+        const i = e.target, s = e.currentTarget;
+        if (!s.classList.contains("bar") && i.closest(".bar"))
+          return;
+        if ((o = this.drag) != null && o.moved) {
+          e.stopPropagation();
+          return;
+        }
+        const c = e.currentTarget.dataset.taskId;
+        c && (i.closest('[data-action="toggle"]') || (s.classList.contains("bar") && e.stopPropagation(), this.selectTask(c)));
+      });
+    }), this.root.querySelectorAll('[data-action="toggle"]').forEach((a) => {
+      a.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const i = a.dataset.taskId;
+        i && (this.collapsed.has(i) ? this.collapsed.delete(i) : this.collapsed.add(i), this.requestRender());
+      });
+    }), this.root.querySelectorAll("[data-zoom]").forEach((a) => {
+      a.addEventListener("click", () => {
+        const e = a.dataset.zoom || "week";
+        this.setAttribute("zoom", e), this.dispatchEvent(new CustomEvent("zoomchange", { detail: { zoom: e }, bubbles: !0, composed: !0 }));
+      });
+    }), this.root.querySelectorAll(".head-button[data-sort]").forEach((a) => {
+      a.addEventListener("click", () => {
+        const e = j(a.dataset.sort || null);
+        e === "none" ? this.removeAttribute("sort") : this.setAttribute("sort", e), this.dispatchEvent(new CustomEvent("sortchange", { detail: { sort: e }, bubbles: !0, composed: !0 }));
+      });
+    }), (r = this.root.querySelector(".viewport")) == null || r.addEventListener("scroll", (a) => {
+      const e = a.currentTarget, i = e.scrollTop, s = e.scrollLeft, g = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - _) / $)), c = Math.max(0, Math.floor(Math.max(0, i - _) / $)), o = c < this.renderedFirstRow + 64 || c + g > this.renderedLastRow - 64, u = Math.abs(s - this.viewportLeft) >= Math.max(480, this.viewportWidth * 0.6);
+      this.viewportTop = i, this.viewportLeft = s, !(!o && !u) && this.scrollFrame == null && (this.scrollFrame = window.setTimeout(() => {
+        this.scrollFrame = null, this.requestRender();
+      }, 24));
+    }, { passive: !0 }), (d = this.root.querySelector(".control")) == null || d.addEventListener("input", (a) => {
+      this.internalFilter = a.currentTarget.value, this.dispatchEvent(new CustomEvent("filterchange", { detail: { filter: this.internalFilter }, bubbles: !0, composed: !0 })), this.requestRender();
+    }), (l = this.root.querySelector(".select")) == null || l.addEventListener("change", (a) => {
+      const e = j(a.currentTarget.value);
+      e === "none" ? this.removeAttribute("sort") : this.setAttribute("sort", e), this.dispatchEvent(new CustomEvent("sortchange", { detail: { sort: e }, bubbles: !0, composed: !0 }));
+    }), this.root.querySelectorAll(".link-hit").forEach((a) => {
+      a.addEventListener("click", (e) => {
+        e.stopPropagation(), this.dispatchEvent(new CustomEvent("linkselect", {
+          detail: {
+            id: a.dataset.linkId || "",
+            source: a.dataset.sourceId || "",
+            target: a.dataset.targetId || "",
+            type: a.dataset.linkType || "e2s"
+          },
+          bubbles: !0,
+          composed: !0
+        }));
+      });
+    }), !this.hasAttribute("readonly") && this.root.querySelectorAll('.bar[data-draggable="true"]').forEach((a) => {
+      a.addEventListener("pointerdown", (i) => {
+        if (i.button !== 0)
+          return;
+        const s = a.dataset.taskId;
+        if (!s)
+          return;
+        const c = this.getTasks().find((y) => y.id === s), o = x(c == null ? void 0 : c.start), u = x(c == null ? void 0 : c.end);
+        if (!c || o == null || u == null)
+          return;
+        i.preventDefault();
+        const p = a.dataset.kind || "task", m = i.target.dataset.mode || "move", h = p === "milestone" ? "move" : m, f = bt(this.getAttribute("zoom")), v = this.selectedId !== s;
+        this.selectedId = s, this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: s }, bubbles: !0, composed: !0 })), this.drag = {
+          taskId: s,
+          mode: h,
+          startX: i.clientX,
+          originalStart: o,
+          originalEnd: u,
+          kind: p,
+          rangeMin: this.rangeMin(),
+          dayWidth: ht[f],
+          latestStart: o,
+          latestEnd: u,
+          frame: null,
+          bar: a,
+          moved: !1,
+          selectedChanged: v
+        }, a.classList.add("dragging"), a.setPointerCapture(i.pointerId);
+      }), a.addEventListener("pointermove", (i) => {
+        if (!this.drag || this.drag.taskId !== a.dataset.taskId)
+          return;
+        i.preventDefault();
+        const s = i.clientX - this.drag.startX;
+        Math.abs(s) > 2 && (this.drag.moved = !0);
+        let g = this.drag.originalStart, c = this.drag.originalEnd;
+        if (this.drag.mode === "move") {
+          const o = Math.round(s / this.drag.dayWidth);
+          g = w(this.drag.originalStart, o), c = this.drag.kind === "milestone" ? g : w(this.drag.originalEnd, o);
+        } else if (this.drag.mode === "resize-start") {
+          const o = Math.round(s / this.drag.dayWidth);
+          g = Math.min(w(this.drag.originalStart, o), w(c, -1));
+        } else {
+          const o = Math.round(s / this.drag.dayWidth);
+          c = Math.max(w(this.drag.originalEnd, o), w(g, 1));
+        }
+        this.drag.latestStart = g, this.drag.latestEnd = c, this.drag.frame == null && (this.drag.frame = requestAnimationFrame(() => {
+          if (!this.drag)
+            return;
+          this.drag.frame = null;
+          const o = (this.drag.latestStart - this.drag.rangeMin) / I * this.drag.dayWidth - (this.drag.kind === "milestone" ? N / 2 : 0), u = this.drag.kind === "milestone" ? N : Math.max(12, (this.drag.latestEnd - this.drag.latestStart) / I * this.drag.dayWidth);
+          this.drag.bar.style.left = `${o.toFixed(2)}px`, this.drag.bar.style.width = `${u.toFixed(2)}px`;
+          const p = this.drag.bar.querySelector(".drag-tip");
+          p && (p.textContent = this.drag.kind === "milestone" ? S(this.drag.latestStart) : `${S(this.drag.latestStart)} - ${S(this.drag.latestEnd)}`);
+        }));
+      });
+      const e = () => {
+        if (!this.drag)
+          return;
+        this.drag.frame != null && cancelAnimationFrame(this.drag.frame);
+        const i = this.drag;
+        if (i.bar.classList.remove("dragging"), this.drag = null, !i.moved) {
+          i.selectedChanged && this.requestRender();
+          return;
+        }
+        const s = {
+          id: i.taskId,
+          start: S(i.latestStart),
+          end: S(i.latestEnd)
+        };
+        this.overrides.set(i.taskId, { start: s.start, end: s.end }), this.bumpOverrides(), this.dispatchEvent(new CustomEvent("taskchange", {
+          detail: s,
+          bubbles: !0,
+          composed: !0
+        })), this.requestRender();
+      };
+      a.addEventListener("pointerup", e), a.addEventListener("pointercancel", e), a.addEventListener("keydown", (i) => {
+        const s = a.dataset.taskId;
+        if (!s)
+          return;
+        if (i.key === "Delete" || i.key === "Backspace") {
+          i.preventDefault(), this.dispatchEvent(new CustomEvent("taskdelete", { detail: { id: s }, bubbles: !0, composed: !0 }));
+          return;
+        }
+        if (i.key === "Enter" || i.key === " ") {
+          i.preventDefault(), this.selectTask(s);
+          return;
+        }
+        if (i.key === "ArrowUp" || i.key === "ArrowDown") {
+          i.preventDefault(), this.selectAdjacentTask(s, i.key === "ArrowDown" ? 1 : -1);
+          return;
+        }
+        if (i.key !== "ArrowLeft" && i.key !== "ArrowRight")
+          return;
+        const c = this.getTasks().find((y) => y.id === s), o = x(c == null ? void 0 : c.start), u = x(c == null ? void 0 : c.end);
+        if (!c || o == null || u == null)
+          return;
+        i.preventDefault();
+        const p = i.key === "ArrowLeft" ? -1 : 1, m = a.dataset.kind === "milestone", h = i.shiftKey && !m ? o : w(o, p), f = m ? h : i.shiftKey ? Math.max(w(u, p), w(o, 1)) : w(u, p), v = { id: s, start: S(h), end: S(f) };
+        this.overrides.set(s, { start: v.start, end: v.end }), this.bumpOverrides(), this.dispatchEvent(new CustomEvent("taskchange", { detail: v, bubbles: !0, composed: !0 })), this.requestRender();
+      });
+    });
+  }
+  rangeMin() {
+    const d = this.getTasks().map((l) => x(l.start)).filter((l) => l != null);
+    return d.length ? w(Math.min(...d), -2) : D(Date.now());
+  }
+  selectTask(r) {
+    if (this.captureViewport(), this.selectedId === r) {
+      this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: r }, bubbles: !0, composed: !0 }));
+      return;
+    }
+    this.selectedId = r, this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: r }, bubbles: !0, composed: !0 })), this.requestRender();
+  }
+  selectAdjacentTask(r, d) {
+    const l = this.getVisibleTasks(
+      this.getTasks(),
+      this.getAttribute("filter") ?? this.internalFilter,
+      j(this.getAttribute("sort"))
+    ), a = l.findIndex((i) => i.id === r), e = l[Math.max(0, Math.min(l.length - 1, a + d))];
+    !e || e.id === r || (this.selectedId = e.id, this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: e.id }, bubbles: !0, composed: !0 })), this.requestRender(), window.requestAnimationFrame(() => {
+      var i;
+      (i = this.root.querySelector(`.bar[data-task-id="${CSS.escape(e.id)}"]`)) == null || i.focus();
+    }));
+  }
+  captureViewport() {
+    const r = this.root.querySelector(".viewport");
+    r && (this.viewportTop = r.scrollTop, this.viewportLeft = r.scrollLeft, this.viewportWidth = r.clientWidth || this.viewportWidth, this.viewportHeight = r.clientHeight || this.viewportHeight);
+  }
+  getTasks() {
+    const r = this.getAttribute("tasks");
+    return r === this.taskCacheRaw && this.taskCacheVersion === this.overridesVersion ? this.taskCache : (this.taskCacheRaw = r, this.taskCacheVersion = this.overridesVersion, this.taskCache = Dt(r, this.overrides), this.visibleCacheKey = "", this.taskCache);
+  }
+  getLinks() {
+    const r = this.getAttribute("links");
+    return r === this.linkCacheRaw ? this.linkCache : (this.linkCacheRaw = r, this.linkCache = Rt(r), this.linkCache);
+  }
+  getVisibleTasks(r, d, l) {
+    const a = Array.from(this.collapsed).sort().join(","), e = `${this.taskCacheRaw || ""}|${this.overridesVersion}|${d}|${l}|${a}`;
+    return e === this.visibleCacheKey ? this.visibleCache : (this.visibleCacheKey = e, this.visibleCache = Nt(r, this.collapsed, d, l), this.visibleCache);
+  }
+  bumpOverrides() {
+    this.overridesVersion += 1, this.taskCacheVersion = -1, this.visibleCacheKey = "";
   }
-  shouldRenderOnAttributeChange(e, t, i) {
-    return !0;
+  shouldRenderOnAttributeChange(r, d, l) {
+    return r === "tasks" && (this.overrides.clear(), this.bumpOverrides(), this.viewportTop = 0, this.viewportLeft = 0), r === "links" && (this.linkCacheRaw = null), !0;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-gantt") && customElements.define("ui-gantt", k);
+typeof customElements < "u" && !customElements.get("ui-gantt") && customElements.define("ui-gantt", Ot);
 export {
-  k as UIGantt
+  Ot as UIGantt
 };