@ganttloom/gantt-core 0.2.0

package/dist/styles.css

@@ -0,0 +1,167 @@
+/*
+ * Color fallbacks below are used only until GanttChart sets its resolved
+ * theme as inline --gantt-* custom properties on .gantt-root (which happens
+ * on first render and wins once present). They exist so the chart still
+ * looks correct in dark mode before JS runs, and so a consumer can theme
+ * purely via CSS (no JS theme object) by overriding these variables directly.
+ */
+.gantt-root {
+  --gantt-background-color: #ffffff;
+  --gantt-text-color: #1f2937;
+  --gantt-grid-color: #e5e7eb;
+  --gantt-weekend-color: #f3f4f6;
+  --gantt-today-color: #ef4444;
+  --gantt-bar-color: #3b82f6;
+  --gantt-bar-progress-color: #2563eb;
+  --gantt-group-bar-color: #64748b;
+  --gantt-link-color: #94a3b8;
+  --gantt-critical-color: #dc2626;
+  --gantt-baseline-color: #9ca3af;
+  --gantt-deadline-color: #f59e0b;
+  --gantt-marker-color: #8b5cf6;
+  --gantt-selection-color: #0ea5e9;
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  background: var(--gantt-background-color);
+  color: var(--gantt-text-color);
+  font-family: var(--gantt-font-family, sans-serif);
+  font-size: var(--gantt-font-size, 12px);
+  border: 1px solid var(--gantt-grid-color);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .gantt-root:not([data-gantt-theme="light"]) {
+    --gantt-background-color: #181c24;
+    --gantt-text-color: #e5e7eb;
+    --gantt-grid-color: #2d3341;
+    --gantt-weekend-color: #252a35;
+    --gantt-today-color: #f87171;
+    --gantt-bar-color: #60a5fa;
+    --gantt-bar-progress-color: #3b82f6;
+    --gantt-group-bar-color: #94a3b8;
+    --gantt-link-color: #64748b;
+    --gantt-critical-color: #f87171;
+    --gantt-baseline-color: #4b5563;
+    --gantt-deadline-color: #fbbf24;
+    --gantt-marker-color: #a78bfa;
+    --gantt-selection-color: #38bdf8;
+  }
+}
+
+.gantt-root[data-gantt-theme="dark"] {
+  --gantt-background-color: #181c24;
+  --gantt-text-color: #e5e7eb;
+  --gantt-grid-color: #2d3341;
+  --gantt-weekend-color: #252a35;
+  --gantt-today-color: #f87171;
+  --gantt-bar-color: #60a5fa;
+  --gantt-bar-progress-color: #3b82f6;
+  --gantt-group-bar-color: #94a3b8;
+  --gantt-link-color: #64748b;
+  --gantt-critical-color: #f87171;
+  --gantt-baseline-color: #4b5563;
+  --gantt-deadline-color: #fbbf24;
+  --gantt-marker-color: #a78bfa;
+  --gantt-selection-color: #38bdf8;
+}
+
+.gantt-grid-panel {
+  flex: 0 0 var(--gantt-grid-panel-width, 260px);
+  width: var(--gantt-grid-panel-width, 260px);
+  border-right: 1px solid var(--gantt-grid-color, #e5e7eb);
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  background: var(--gantt-background-color, #ffffff);
+}
+
+.gantt-grid-header-row {
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  background: var(--gantt-background-color, #ffffff);
+  border-bottom: 1px solid var(--gantt-grid-color, #e5e7eb);
+  font-weight: 600;
+  z-index: 2;
+}
+
+.gantt-grid-header-cell,
+.gantt-grid-cell {
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+.gantt-grid-body {
+  position: relative;
+}
+
+.gantt-grid-row {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border-bottom: 1px solid var(--gantt-grid-color, #e5e7eb);
+  box-sizing: border-box;
+}
+
+.gantt-grid-row:hover {
+  background: color-mix(in srgb, var(--gantt-grid-color, #e5e7eb) 40%, transparent);
+}
+
+.gantt-indent {
+  display: inline-block;
+  flex: 0 0 auto;
+}
+
+.gantt-toggle {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  font-size: inherit;
+  padding: 0 4px;
+  flex: 0 0 auto;
+}
+
+.gantt-rename-input {
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  border: 1px solid var(--gantt-bar-color, #3b82f6);
+  border-radius: 2px;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+
+.gantt-timeline-scroll {
+  flex: 1 1 auto;
+  overflow: auto;
+  position: relative;
+}
+
+.gantt-svg {
+  display: block;
+}
+
+.gantt-bar rect {
+  transition: fill 0.15s ease;
+}
+
+.gantt-bar:focus {
+  outline: 2px solid var(--gantt-bar-color, #3b82f6);
+  outline-offset: 2px;
+}
+
+.gantt-temp-link {
+  pointer-events: none;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ganttloom/gantt-core",
+  "version": "0.2.0",
+  "description": "Framework-agnostic, fully customizable Gantt chart engine: grouping, drag-drop, dependency linking, expand/collapse, theming.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "gantt",
+    "chart",
+    "gantt-chart",
+    "scheduling",
+    "timeline",
+    "project-management"
+  ],
+  "license": "MIT",
+  "author": "Santhoshkumar Hariharan",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/santhoshkumarhari/ganttLoom.git",
+    "directory": "packages/gantt-core"
+  },
+  "homepage": "https://github.com/santhoshkumarhari/ganttLoom/tree/master/packages/gantt-core#readme",
+  "bugs": "https://github.com/santhoshkumarhari/ganttLoom/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "cpy-cli": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --sourcemap --clean && cpy src/styles.css dist --flat",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  }
+}