snice 4.9.0 → 4.10.0

package/dist/cdn/funnel/snice-funnel.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.8.0
+ * snice v4.9.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/funnel/snice-funnel.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.8.0
+ * snice v4.9.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/gantt/README.md

@@ -0,0 +1,27 @@
+# Snice Gantt - CDN Build
+
+CDN build of the Snice gantt component. Requires the Snice runtime (`snice-runtime.min.js`) to be loaded first.
+
+## Usage
+
+```html
+<script src="snice-runtime.min.js"></script>
+<script src="snice-gantt.min.js"></script>
+<snice-gantt></snice-gantt>
+```
+
+## Size
+- Minified: 16.3 KB
+- Gzipped: 4.6 KB
+
+## Theme
+For proper styling, link the Snice theme CSS:
+```html
+<link rel="stylesheet" href="https://unpkg.com/snice/dist/components/theme/theme.css">
+```
+
+## Documentation
+https://snice.dev
+
+## License
+MIT

package/dist/cdn/gantt/snice-gantt.js

@@ -0,0 +1,436 @@
+/*!
+ * snice v4.9.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-gantt.min.js");}
+var SniceGantt = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var ganttStyles = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.gantt-container{background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden}.gantt-header{display:flex;align-items:center;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));background:var(--snice-color-background-element,rgb(252 251 249))}.gantt-zoom-toggle{display:flex;gap:0;margin-left:auto}.gantt-zoom-btn{background:0 0;border:1px solid var(--snice-color-border,rgb(226 226 226));cursor:pointer;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background-color var(--snice-transition-fast, 150ms) ease}.gantt-zoom-btn:first-child{border-radius:var(--snice-border-radius-md,.25rem) 0 0 var(--snice-border-radius-md,.25rem)}.gantt-zoom-btn:last-child{border-radius:0 var(--snice-border-radius-md,.25rem) var(--snice-border-radius-md,.25rem) 0;border-left:none}.gantt-zoom-btn:not(:first-child):not(:last-child){border-left:none}.gantt-zoom-btn.active{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.gantt-body{display:flex;overflow:hidden}.gantt-task-list{width:12.5rem;flex-shrink:0;border-right:1px solid var(--snice-color-border,rgb(226 226 226));overflow-y:auto}.gantt-task-list-header{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-secondary,rgb(82 82 82));background:var(--snice-color-background-element,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));height:2rem;display:flex;align-items:center}.gantt-task-name{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text,rgb(23 23 23));height:2.25rem;display:flex;align-items:center;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease}.gantt-task-name:hover{background:var(--snice-color-background-hover,rgb(241 241 241))}.gantt-group-header{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-primary,rgb(37 99 235));background:var(--snice-color-primary-subtle,rgb(239 246 255));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));text-transform:uppercase;letter-spacing:.05em}.gantt-timeline{flex:1;overflow-x:auto;overflow-y:auto;position:relative}.gantt-timeline-header{display:flex;background:var(--snice-color-background-element,rgb(252 251 249));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));height:2rem;position:sticky;top:0;z-index:2}.gantt-timeline-cell{flex-shrink:0;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-tertiary,rgb(115 115 115));border-right:1px solid var(--snice-color-border,rgb(226 226 226));display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}.gantt-timeline-cell--today{background:var(--snice-color-primary-subtle,rgb(239 246 255));font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-primary,rgb(37 99 235))}.gantt-timeline-rows{position:relative}.gantt-timeline-row{height:2.25rem;position:relative;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.gantt-bar{position:absolute;top:.375rem;height:1.5rem;border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-primary,rgb(37 99 235));cursor:pointer;display:flex;align-items:center;overflow:hidden;transition:opacity var(--snice-transition-fast, 150ms) ease;z-index:1}.gantt-bar:hover{opacity:.85}.gantt-bar-progress{height:100%;background:rgb(0 0 0 / .15);border-radius:var(--snice-border-radius-md,.25rem) 0 0 var(--snice-border-radius-md,.25rem)}.gantt-bar-label{position:absolute;left:var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-inverse,rgb(250 250 250));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 1rem);pointer-events:none}.gantt-bar-handle{position:absolute;top:0;width:.375rem;height:100%;cursor:col-resize;z-index:2}.gantt-bar-handle--left{left:0}.gantt-bar-handle--right{right:0}.gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--snice-color-danger,rgb(220 38 38));z-index:3;pointer-events:none}.gantt-dependencies{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.gantt-dependency-arrow{fill:none;stroke:var(--snice-color-text-tertiary,rgb(115 115 115));stroke-width:1.5}.gantt-dependency-arrowhead{fill:var(--snice-color-text-tertiary,rgb(115 115 115))}.gantt-grid-line{position:absolute;top:0;bottom:0;width:1px;background:var(--snice-color-border,rgb(226 226 226));opacity:.5;pointer-events:none}.gantt-timeline::-webkit-scrollbar{height:.5rem;width:.5rem}.gantt-timeline::-webkit-scrollbar-track{background:var(--snice-color-background-element,rgb(252 251 249))}.gantt-timeline::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:9999px}";
+
+  const DAY_MS = 86400000;
+  let SniceGantt = (() => {
+      let _classDecorators = [snice.element('snice-gantt')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _tasks_decorators;
+      let _tasks_initializers = [];
+      let _tasks_extraInitializers = [];
+      let _zoom_decorators;
+      let _zoom_initializers = [];
+      let _zoom_extraInitializers = [];
+      let _showDependencies_decorators;
+      let _showDependencies_initializers = [];
+      let _showDependencies_extraInitializers = [];
+      let _timelineElement_decorators;
+      let _timelineElement_initializers = [];
+      let _timelineElement_extraInitializers = [];
+      let _componentStyles_decorators;
+      let _handleTasksChange_decorators;
+      let _handleZoomChange_decorators;
+      let _renderGantt_decorators;
+      let _emitTaskClick_decorators;
+      let _emitTaskResize_decorators;
+      let _emitTaskMove_decorators;
+      let _emitTaskLink_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _tasks_decorators = [snice.property({ type: Array })];
+              _zoom_decorators = [snice.property()];
+              _showDependencies_decorators = [snice.property({ type: Boolean, attribute: 'show-dependencies' })];
+              _timelineElement_decorators = [snice.query('.gantt-timeline')];
+              _componentStyles_decorators = [snice.styles()];
+              _handleTasksChange_decorators = [snice.watch('tasks')];
+              _handleZoomChange_decorators = [snice.watch('zoom')];
+              _renderGantt_decorators = [snice.render()];
+              _emitTaskClick_decorators = [snice.dispatch('task-click', { bubbles: true, composed: true })];
+              _emitTaskResize_decorators = [snice.dispatch('task-resize', { bubbles: true, composed: true })];
+              _emitTaskMove_decorators = [snice.dispatch('task-move', { bubbles: true, composed: true })];
+              _emitTaskLink_decorators = [snice.dispatch('task-link', { bubbles: true, composed: true })];
+              __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleTasksChange_decorators, { kind: "method", name: "handleTasksChange", static: false, private: false, access: { has: obj => "handleTasksChange" in obj, get: obj => obj.handleTasksChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleZoomChange_decorators, { kind: "method", name: "handleZoomChange", static: false, private: false, access: { has: obj => "handleZoomChange" in obj, get: obj => obj.handleZoomChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _renderGantt_decorators, { kind: "method", name: "renderGantt", static: false, private: false, access: { has: obj => "renderGantt" in obj, get: obj => obj.renderGantt }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitTaskClick_decorators, { kind: "method", name: "emitTaskClick", static: false, private: false, access: { has: obj => "emitTaskClick" in obj, get: obj => obj.emitTaskClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitTaskResize_decorators, { kind: "method", name: "emitTaskResize", static: false, private: false, access: { has: obj => "emitTaskResize" in obj, get: obj => obj.emitTaskResize }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitTaskMove_decorators, { kind: "method", name: "emitTaskMove", static: false, private: false, access: { has: obj => "emitTaskMove" in obj, get: obj => obj.emitTaskMove }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitTaskLink_decorators, { kind: "method", name: "emitTaskLink", static: false, private: false, access: { has: obj => "emitTaskLink" in obj, get: obj => obj.emitTaskLink }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _tasks_decorators, { kind: "field", name: "tasks", static: false, private: false, access: { has: obj => "tasks" in obj, get: obj => obj.tasks, set: (obj, value) => { obj.tasks = value; } }, metadata: _metadata }, _tasks_initializers, _tasks_extraInitializers);
+              __esDecorate(null, null, _zoom_decorators, { kind: "field", name: "zoom", static: false, private: false, access: { has: obj => "zoom" in obj, get: obj => obj.zoom, set: (obj, value) => { obj.zoom = value; } }, metadata: _metadata }, _zoom_initializers, _zoom_extraInitializers);
+              __esDecorate(null, null, _showDependencies_decorators, { kind: "field", name: "showDependencies", static: false, private: false, access: { has: obj => "showDependencies" in obj, get: obj => obj.showDependencies, set: (obj, value) => { obj.showDependencies = value; } }, metadata: _metadata }, _showDependencies_initializers, _showDependencies_extraInitializers);
+              __esDecorate(null, null, _timelineElement_decorators, { kind: "field", name: "timelineElement", static: false, private: false, access: { has: obj => "timelineElement" in obj, get: obj => obj.timelineElement, set: (obj, value) => { obj.timelineElement = value; } }, metadata: _metadata }, _timelineElement_initializers, _timelineElement_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          componentStyles() {
+              return snice.css `${ganttStyles}`;
+          }
+          handleTasksChange() {
+              this.computeTimeline();
+          }
+          handleZoomChange() {
+              this.computeTimeline();
+          }
+          computeTimeline() {
+              if (this.tasks.length === 0) {
+                  this.timelineStart = new Date();
+                  this.timelineEnd = new Date();
+                  return;
+              }
+              let minDate = Infinity;
+              let maxDate = -Infinity;
+              for (const task of this.tasks) {
+                  const start = new Date(task.start).getTime();
+                  const end = new Date(task.end).getTime();
+                  if (start < minDate)
+                      minDate = start;
+                  if (end > maxDate)
+                      maxDate = end;
+              }
+              const padding = this.zoom === 'day' ? DAY_MS * 2 : this.zoom === 'week' ? DAY_MS * 7 : DAY_MS * 14;
+              this.timelineStart = new Date(minDate - padding);
+              this.timelineEnd = new Date(maxDate + padding);
+              this.cellWidth = this.zoom === 'day' ? 40 : this.zoom === 'week' ? 28 : 12;
+          }
+          getTimelineDays() {
+              const days = [];
+              const current = new Date(this.timelineStart);
+              current.setHours(0, 0, 0, 0);
+              while (current <= this.timelineEnd) {
+                  days.push(new Date(current));
+                  current.setDate(current.getDate() + 1);
+              }
+              return days;
+          }
+          getHeaderCells() {
+              const days = this.getTimelineDays();
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              if (this.zoom === 'day') {
+                  return days.map(d => ({
+                      label: String(d.getDate()),
+                      span: 1,
+                      isToday: d.getTime() === today.getTime(),
+                  }));
+              }
+              if (this.zoom === 'week') {
+                  return days.map(d => ({
+                      label: d.getDay() === 1 ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : String(d.getDate()),
+                      span: 1,
+                      isToday: d.getTime() === today.getTime(),
+                  }));
+              }
+              const cells = [];
+              let currentMonth = -1;
+              for (const d of days) {
+                  if (d.getMonth() !== currentMonth) {
+                      currentMonth = d.getMonth();
+                      cells.push({
+                          label: d.toLocaleDateString(undefined, { month: 'short', year: 'numeric' }),
+                          span: 1,
+                          isToday: false,
+                      });
+                  }
+                  else {
+                      cells[cells.length - 1].span++;
+                  }
+              }
+              return cells;
+          }
+          dateToX(date) {
+              const d = typeof date === 'string' ? new Date(date) : date;
+              const diff = d.getTime() - this.timelineStart.getTime();
+              const totalDays = diff / DAY_MS;
+              return totalDays * this.cellWidth;
+          }
+          getOrderedTasks() {
+              const groups = new Map();
+              const ungrouped = [];
+              for (const task of this.tasks) {
+                  if (task.group) {
+                      if (!groups.has(task.group))
+                          groups.set(task.group, []);
+                      groups.get(task.group).push(task);
+                  }
+                  else {
+                      ungrouped.push(task);
+                  }
+              }
+              const result = [];
+              for (const [group, tasks] of groups) {
+                  result.push({ __group: group });
+                  result.push(...tasks);
+              }
+              result.push(...ungrouped);
+              return result;
+          }
+          renderGantt() {
+              this.computeTimeline();
+              const headerCells = this.getHeaderCells();
+              const orderedItems = this.getOrderedTasks();
+              const days = this.getTimelineDays();
+              const totalWidth = days.length * this.cellWidth;
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              const todayX = this.dateToX(today);
+              const todayVisible = todayX >= 0 && todayX <= totalWidth;
+              const isDay = this.zoom === 'day';
+              const isWeek = this.zoom === 'week';
+              const isMonth = this.zoom === 'month';
+              const taskItems = this.tasks;
+              let taskRowIndex = 0;
+              const taskRowMap = new Map();
+              for (const item of orderedItems) {
+                  if ('__group' in item) {
+                      taskRowIndex++;
+                  }
+                  else {
+                      taskRowMap.set(item.id, taskRowIndex);
+                      taskRowIndex++;
+                  }
+              }
+              return snice.html `
+      <div class="gantt-container">
+        <div class="gantt-header">
+          <div class="gantt-zoom-toggle">
+            <button class="gantt-zoom-btn ${isDay ? 'active' : ''}" @click=${() => { this.zoom = 'day'; }}>Day</button>
+            <button class="gantt-zoom-btn ${isWeek ? 'active' : ''}" @click=${() => { this.zoom = 'week'; }}>Week</button>
+            <button class="gantt-zoom-btn ${isMonth ? 'active' : ''}" @click=${() => { this.zoom = 'month'; }}>Month</button>
+          </div>
+        </div>
+
+        <div class="gantt-body">
+          <div class="gantt-task-list">
+            <div class="gantt-task-list-header">Task</div>
+            ${orderedItems.map(item => {
+                if ('__group' in item) {
+                    return snice.html `<div class="gantt-group-header">${item.__group}</div>`;
+                }
+                return snice.html `
+                <div class="gantt-task-name" @click=${() => this.emitTaskClick(item)}>${item.name}</div>
+              `;
+            })}
+          </div>
+
+          <div class="gantt-timeline">
+            <div class="gantt-timeline-header" style="width: ${totalWidth}px">
+              ${headerCells.map(cell => snice.html `
+                <div
+                  class="gantt-timeline-cell ${cell.isToday ? 'gantt-timeline-cell--today' : ''}"
+                  style="width: ${cell.span * this.cellWidth}px"
+                >${cell.label}</div>
+              `)}
+            </div>
+
+            <div class="gantt-timeline-rows" style="width: ${totalWidth}px; height: ${taskRowIndex * 2.25}rem">
+              ${taskItems.map(task => {
+                const left = this.dateToX(task.start);
+                const right = this.dateToX(task.end);
+                const width = Math.max(right - left, this.cellWidth / 2);
+                const rowIdx = taskRowMap.get(task.id) || 0;
+                const top = rowIdx * 2.25;
+                const bgColor = task.color || 'var(--snice-color-primary, rgb(37 99 235))';
+                const progress = task.progress || 0;
+                const hasProgress = progress > 0;
+                return snice.html `
+                  <div
+                    class="gantt-bar"
+                    style="left: ${left}px; width: ${width}px; top: calc(${top}rem + 0.375rem); background: ${bgColor}"
+                    @click=${() => this.emitTaskClick(task)}
+                    @mousedown=${(e) => this.handleBarMouseDown(e, task, 'move')}
+                  >
+                    <if ${hasProgress}>
+                      <div class="gantt-bar-progress" style="width: ${progress}%"></div>
+                    </if>
+                    <span class="gantt-bar-label">${task.name}</span>
+                    <div class="gantt-bar-handle gantt-bar-handle--left" @mousedown=${(e) => { e.stopPropagation(); this.handleBarMouseDown(e, task, 'resize-left'); }}></div>
+                    <div class="gantt-bar-handle gantt-bar-handle--right" @mousedown=${(e) => { e.stopPropagation(); this.handleBarMouseDown(e, task, 'resize-right'); }}></div>
+                  </div>
+                `;
+            })}
+
+              <if ${todayVisible}>
+                <div class="gantt-today-line" style="left: ${todayX}px"></div>
+              </if>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+          }
+          // --- Public Methods ---
+          scrollToDate(date) {
+              if (!this.timelineElement)
+                  return;
+              const x = this.dateToX(date);
+              this.timelineElement.scrollLeft = Math.max(0, x - this.timelineElement.clientWidth / 2);
+          }
+          scrollToTask(id) {
+              const task = this.tasks.find(t => t.id === id);
+              if (task) {
+                  this.scrollToDate(task.start);
+              }
+          }
+          // --- Drag handlers ---
+          handleBarMouseDown(e, task, type) {
+              e.preventDefault();
+              this.dragState = {
+                  taskId: task.id,
+                  type,
+                  startX: e.clientX,
+                  origStart: task.start,
+                  origEnd: task.end,
+              };
+              const onMouseMove = (ev) => this.handleDragMove(ev);
+              const onMouseUp = () => {
+                  document.removeEventListener('mousemove', onMouseMove);
+                  document.removeEventListener('mouseup', onMouseUp);
+                  this.handleDragEnd();
+              };
+              document.addEventListener('mousemove', onMouseMove);
+              document.addEventListener('mouseup', onMouseUp);
+          }
+          handleDragMove(e) {
+              if (!this.dragState)
+                  return;
+              const dx = e.clientX - this.dragState.startX;
+              const daysDelta = Math.round(dx / this.cellWidth);
+              if (daysDelta === 0)
+                  return;
+              const task = this.tasks.find(t => t.id === this.dragState.taskId);
+              if (!task)
+                  return;
+              const origStart = new Date(this.dragState.origStart);
+              const origEnd = new Date(this.dragState.origEnd);
+              if (this.dragState.type === 'move') {
+                  task.start = new Date(origStart.getTime() + daysDelta * DAY_MS).toISOString().split('T')[0];
+                  task.end = new Date(origEnd.getTime() + daysDelta * DAY_MS).toISOString().split('T')[0];
+              }
+              else if (this.dragState.type === 'resize-left') {
+                  const newStart = new Date(origStart.getTime() + daysDelta * DAY_MS);
+                  if (newStart < origEnd) {
+                      task.start = newStart.toISOString().split('T')[0];
+                  }
+              }
+              else if (this.dragState.type === 'resize-right') {
+                  const newEnd = new Date(origEnd.getTime() + daysDelta * DAY_MS);
+                  if (newEnd > origStart) {
+                      task.end = newEnd.toISOString().split('T')[0];
+                  }
+              }
+              this.tasks = [...this.tasks];
+          }
+          handleDragEnd() {
+              if (!this.dragState)
+                  return;
+              const task = this.tasks.find(t => t.id === this.dragState.taskId);
+              if (task) {
+                  if (this.dragState.type === 'move') {
+                      this.emitTaskMove(task);
+                  }
+                  else {
+                      this.emitTaskResize(task);
+                  }
+              }
+              this.dragState = null;
+          }
+          // --- Events ---
+          emitTaskClick(task) {
+              return { task };
+          }
+          emitTaskResize(task) {
+              return { task, start: task.start, end: task.end };
+          }
+          emitTaskMove(task) {
+              return { task, start: task.start, end: task.end };
+          }
+          emitTaskLink(source, target) {
+              return { source, target };
+          }
+          constructor() {
+              super(...arguments);
+              this.tasks = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _tasks_initializers, []));
+              this.zoom = (__runInitializers(this, _tasks_extraInitializers), __runInitializers(this, _zoom_initializers, 'week'));
+              this.showDependencies = (__runInitializers(this, _zoom_extraInitializers), __runInitializers(this, _showDependencies_initializers, true));
+              this.timelineStart = (__runInitializers(this, _showDependencies_extraInitializers), new Date());
+              this.timelineEnd = new Date();
+              this.cellWidth = 40;
+              this.dragState = null;
+              this.timelineElement = __runInitializers(this, _timelineElement_initializers, void 0);
+              __runInitializers(this, _timelineElement_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceGantt = SniceGantt;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-gantt.js.map