Adom Gantt

@@ -30,7 +30,7 @@ Interactive Gantt chart viewer for project timelines. Data-driven, dark by defau  **Light mode.** Dark by default. The Light toggle switches to a print-friendly theme with deepened bar colors, and printing always uses it whatever the screen is set to. -**Brand phase colors.** A phase with no explicit `color` follows the Adom ramp: teal, purple, blue, then a second step of each. The ramp is theme-aware, so the same plan is on-brand on screen and legible on paper.+**Brand phase colors.** A phase with no explicit `color` cycles the three Adom hues: teal, purple, blue. Section bands are neutral grey rather than colour tints, so colour on the chart means exactly one thing: which phase a bar belongs to. The hues are theme-aware, so the same plan is on-brand on screen and legible on paper.  **Move the whole plan.** The project start sits in the header. Change it and every task, milestone and phase shifts by the same number of days, so durations and the gaps between them survive. Revert puts the plan back to the data file's own start. It is one undo step and one changelog entry, not 26. 

@@ -136,20 +136,18 @@ The ramp is teal, purple, blue, then a second step of each:  | Phase | Dark (default) | Light / print | |-------|----------------|---------------|-| 1 | `#00b8b1` teal | `#00a49d` |-| 2 | `#8c6bf7` purple | `#8c6bf7` |-| 3 | `#64abff` blue | `#3b95ff` |-| 4 | `#a8f7f0` pale teal | `#00595a` deep teal |-| 5 | `#d3bcff` pale purple | `#4b21c9` deep purple |-| 6 | `#c7e0ff` pale blue | `#0b3f8f` deep blue |+| 1, 4, 7 ... | `#00b8b1` teal | `#00a49d` |+| 2, 5, 8 ... | `#8c6bf7` purple | `#8c6bf7` |+| 3, 6, 9 ... | `#64abff` blue | `#3b95ff` | -The second triad steps away from its primary in whichever direction the background-allows: lighter on dark, darker on paper. Every pair in the ramp is at least 27 CIELAB-deltaE apart, so no two phases read as the same colour. An earlier ramp put the teal-pair only 11 apart, which looked like one colour on screen.+The ramp cycles the three brand hues rather than inventing lighter or darker fourths.+On a dark ground a second teal has to be lighter to be told apart, and a pale teal+reads as off-brand. Sections are separated by the neutral grey banding and the group+header instead, so a repeat three rows down is not confusing. Adjacent phases are+always different. -Phase 7 wraps back to phase 1. The light values are deepened so each clears 3:1-on white; the dark values are the brand tokens exactly.+Phase bands are neutral: alternating sections get a subtle lighter grey, never a+colour tint, so colour on the chart means one thing only, which phase a bar belongs to.  Green, red and yellow are deliberately absent. In the Adom design system those mean success, destructive and warning, so a phase colored red reads as a problem

@@ -25,11 +25,10 @@   --grid-line: rgba(48,54,61,0.18);   --weekend: rgba(255,255,255,0.022);   --row-hover: rgba(255,255,255,0.04);-  --phase-bg-alpha: 0.05;   /* Phase ramp: teal -> purple -> blue, then a lighter step of each.      Used when a phase declares no explicit colour. */   --ph1: #00b8b1; --ph2: #8c6bf7; --ph3: #64abff;-  --ph4: #a8f7f0; --ph5: #d3bcff; --ph6: #c7e0ff;+  --band: rgba(255,255,255,0.032);   --bar-opacity: 0.82;   color-scheme: dark; }@@ -42,10 +41,9 @@   --grid-line: rgba(31,35,40,0.10);   --weekend: rgba(31,35,40,0.04);   --row-hover: rgba(31,35,40,0.04);-  --phase-bg-alpha: 0.10;   /* Deepened for paper: each clears 3:1 on white while holding its hue. */   --ph1: #00a49d; --ph2: #8c6bf7; --ph3: #3b95ff;-  --ph4: #00595a; --ph5: #4b21c9; --ph6: #0b3f8f;+  --band: rgba(31,35,40,0.045);   --bar-opacity: 1;   color-scheme: light; }@@ -54,8 +52,8 @@   :root { --bg:#ffffff; --surface:#ffffff; --elevated:#ffffff; --overlay:#ffffff;     --border:#d0d7de; --border-muted:#d8dee4;     --text:#1f2328; --text-body:#24292f; --text2:#59636e; --text3:#8c959f;-    --accent:#00857f; --today:#00857f; --grid-line:rgba(31,35,40,0.10); --weekend:rgba(31,35,40,0.04); --phase-bg-alpha:0.10;-    --ph1:#00a49d; --ph2:#8c6bf7; --ph3:#3b95ff; --ph4:#00595a; --ph5:#4b21c9; --ph6:#0b3f8f;+    --accent:#00857f; --today:#00857f; --grid-line:rgba(31,35,40,0.10); --weekend:rgba(31,35,40,0.04);+    --ph1:#00a49d; --ph2:#8c6bf7; --ph3:#3b95ff; --band:rgba(31,35,40,0.045);     color-scheme: light; }   html, body { overflow: visible !important; height: auto !important; }   .labels-col, .timeline-col { overflow: visible !important; }@@ -186,7 +184,8 @@ header .act-btn svg { width: 14px; height: 14px; } :root[data-ms="line"] .label-row.ms::before { content: '\00a6\00a0'; } .today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--today); z-index: 8; pointer-events: none; box-shadow: 0 0 6px rgba(0,184,176,0.3); } .today-tag { position: absolute; top: 4px; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--today); background: var(--bg); padding: 1px 4px; border-radius: 3px; border: 1px solid rgba(0,184,176,0.25); pointer-events: none; z-index: 9; white-space: nowrap; }-.phase-bg { position: absolute; top: 0; bottom: 0; opacity: var(--phase-bg-alpha); pointer-events: none; }+.phase-bg { position: absolute; top: 0; bottom: 0; pointer-events: none; background: var(--band); }+.phase-bg.alt { background: transparent; } .dep-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4; overflow: visible; } .dep-svg path { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.5; transition: opacity 0.15s; } .dep-svg polygon { fill: var(--accent); opacity: 0.5; transition: opacity 0.15s; }@@ -451,12 +450,15 @@ $('hdr').innerHTML = `     <button class="act-btn" id="btnHelp" style="font-family:'Familjen Grotesk',sans-serif;font-size:14px;font-weight:600;padding:4px 9px">?</button>   </div>`; -// A phase with no explicit colour follows the Adom ramp: teal, purple, blue,-// then a second step of each. Returning the CSS var (not a resolved hex) is what-// lets a theme switch recolour every bar without rebuilding the chart.+// The brand has three hues, so the ramp cycles them rather than inventing lighter+// or darker fourths. On a dark ground a second teal has to be lighter to be told+// apart, and a pale teal reads as off-brand. Sections are separated by the grey+// banding and the group header instead, so a repeat three rows down is not confusing.+// Returning the CSS var (not a resolved hex) is what lets a theme switch recolour+// every bar without rebuilding the chart. function phaseColor(i){   const p = phases[i];-  return (p && p.color) ? p.color : `var(--ph${(i % 6) + 1})`;+  return (p && p.color) ? p.color : `var(--ph${(i % 3) + 1})`; }  // ── State ──@@ -658,7 +660,8 @@ function buildPhaseBands(){     const endLast=new Date(ey,em,0);     const r=toX(isoDay(endLast));     bg.style.left=l+'px';bg.style.width=Math.max(2,r-l)+'px';-    bg.style.background=phaseColor(i);bgLayer.appendChild(bg);phaseBgEls.push(bg);+    if(i%2)bg.classList.add('alt');+    bgLayer.appendChild(bg);phaseBgEls.push(bg);   }); } function buildGridLines(){

@@ -2,7 +2,7 @@   "slug": "adom-gantt",   "title": "Adom Gantt",   "type": "app",-  "version": "0.4.1",+  "version": "0.5.0",   "description": "Interactive Gantt chart viewer for project timelines. Data-driven, dark by default with a print-friendly light mode, and fully editable in the browser: drag bars to move or resize, multi-select and batch-shift dates, manage dependency arrows inline, reorder rows, filter by phase, and undo. Every edit is recorded in an append-only changelog so an AI can read what a human changed and build on it. Imports JSON, CSV, MS Project XML and Jira CSV; exports JSON, CSV, SVG and a self-contained HTML snapshot.",   "main": "server.js",   "bin": {

@@ -2,7 +2,7 @@   "slug": "adom-gantt",   "title": "Adom Gantt",   "type": "app",-  "version": "0.4.1",+  "version": "0.5.0",   "description": "Interactive Gantt chart viewer for project timelines. Data-driven, dark by default with a print-friendly light mode, and fully editable in the browser: drag bars to move or resize, multi-select and batch-shift dates, manage dependency arrows inline, reorder rows, filter by phase, and undo. Every edit is recorded in an append-only changelog so an AI can read what a human changed and build on it. Imports JSON, CSV, MS Project XML and Jira CSV; exports JSON, CSV, SVG and a self-contained HTML snapshot.",   "main": "server.js",   "bin": {