@taylorwong/ichartjs 2.0.1

package/src/project.mjs

@@ -0,0 +1,370 @@
+/**
+ * Project-management and process visualization scene builders.
+ * Covers Gantt, timeline, milestone, burndown, flow, and swimlane views.
+ */
+import { Scene } from './scene.mjs';
+import { normalizeData } from './data.mjs';
+import { layoutDiagram, normalizeDiagramData, routeEdge } from './diagram.mjs';
+import { analyzeBurndownSeries, analyzeSchedule } from './project-analytics.mjs';
+import { createLinkedProjectState, filterProjectRows, linkedRecordId } from './project-linking.mjs';
+import { contrastRatio, resolveTheme } from './theme.mjs';
+
+export const projectTypes = ['gantt', 'timeline', 'milestone', 'burndown', 'flow', 'swimlane'];
+const day = 86400000;
+export const timestamp = value => value == null || value === '' ? NaN : new Date(value).getTime();
+const dateLabel = value => new Date(value).toISOString().slice(0, 10);
+const dependencyId = dependency => typeof dependency === 'string' ? dependency : dependency?.id || null;
+const markText = (theme, background) => (contrastRatio(theme.text, background) || 0) >= (contrastRatio(theme.background, background) || 0) ? theme.text : theme.background;
+
+function text(scene, id, content, x, y, style = {}) {
+  scene.add({ id, type: 'text', geometry: { text: String(content), x, y }, style: { fill: scene.theme?.text || '#334155', font: scene.theme?.typography?.label?.font || '12px system-ui', ...style }, zIndex: 4 });
+}
+
+function arrow(scene, id, points, reference, critical = false) {
+  const color = critical ? scene.theme?.status?.danger || '#dc2626' : scene.theme?.axis || '#64748b';
+  const tip = points.at(-1), previous = points.at(-2);
+  const angle = Math.atan2(tip.y - previous.y, tip.x - previous.x), size = 7;
+  scene.add({ id, type: 'path', geometry: { points }, style: { fill: 'none', stroke: color, strokeWidth: critical ? 2.5 : 1.5 }, dataRef: reference, zIndex: 1 });
+  scene.add({ id: id.startsWith('dependency-') ? id.replace('dependency-', 'dependency-arrow-') : `${id}-arrow`, type: 'path', geometry: { points: [tip, { x: tip.x - size * Math.cos(angle - Math.PI / 6), y: tip.y - size * Math.sin(angle - Math.PI / 6) }, { x: tip.x - size * Math.cos(angle + Math.PI / 6), y: tip.y - size * Math.sin(angle + Math.PI / 6) }, tip] }, style: { fill: color, stroke: color }, zIndex: 3 });
+}
+
+function timeAxis(scene, plot, min, max) {
+  const map = value => plot.x + (timestamp(value) - min) / (max - min || day) * plot.width;
+  const ticks = Math.max(2, Math.min(5, Math.floor(plot.width / 100)));
+  for (let index = 0; index < ticks; index += 1) {
+    const time = min + (max - min) * index / (ticks - 1), x = map(time);
+    scene.add({ id: `project-grid-${index}`, type: 'line', geometry: { x1: x, y1: plot.y, x2: x, y2: plot.y + plot.height }, style: { stroke: scene.theme?.grid || '#e2e8f0' } });
+    text(scene, `project-tick-${index}`, dateLabel(time), x, plot.y + plot.height + 22, { fill: scene.theme?.muted, textAnchor: index === 0 ? 'start' : index === ticks - 1 ? 'end' : 'middle', font: scene.theme?.typography?.axis?.font || '11px system-ui' });
+  }
+  return map;
+}
+
+function projectConfig(spec) {
+  return spec.project || {};
+}
+
+function projectOverlays(spec) {
+  const project = projectConfig(spec);
+  return {
+    criticalPath: project.overlays?.criticalPath !== false,
+    slack: Boolean(project.overlays?.slack),
+    baseline: Boolean(project.overlays?.baseline),
+    actual: Boolean(project.overlays?.actual),
+    variance: Boolean(project.overlays?.variance)
+  };
+}
+
+function projectSelection(spec, state) {
+  const linked = state.linked || createLinkedProjectState([], {});
+  return new Set(linked.selection);
+}
+
+function rowWindow(row) {
+  const values = [
+    row.start, row.end, row.date,
+    row.baselineStart, row.baselineEnd, row.baselineDate, row.baseline,
+    row.actualStart, row.actualEnd, row.actualDate
+  ].map(timestamp).filter(Number.isFinite);
+  return values;
+}
+
+function taskDatum(row, analytics, recordId) {
+  return {
+    ...row,
+    ...(analytics ? {
+      critical: analytics.critical,
+      float: analytics.float,
+      slack: analytics.slack,
+      adjustedStart: analytics.adjustedStart,
+      adjustedEnd: analytics.adjustedEnd,
+      baselineVarianceDays: analytics.baselineVarianceDays,
+      startVarianceDays: analytics.startVarianceDays,
+      endVarianceDays: analytics.endVarianceDays
+    } : {}),
+    recordId
+  };
+}
+
+export function criticalSchedule(rows, options = {}) {
+  const analysis = analyzeSchedule(rows, options);
+  if (analysis.warnings.some(item => item.code === 'CYCLIC_DEPENDENCY')) throw new Error('Cyclic task dependencies');
+  return {
+    duration: analysis.duration,
+    criticalIds: analysis.criticalIds,
+    criticalEdges: analysis.criticalEdges,
+    tasks: analysis.tasks.map(task => ({
+      id: task.id,
+      dependencies: task.dependencies.map(dependencyId).filter(Boolean),
+      earliestStart: task.earliestStart,
+      earliestFinish: task.earliestFinish,
+      latestStart: task.latestStart,
+      latestFinish: task.latestFinish,
+      float: task.float,
+      critical: task.critical
+    })),
+    calendar: analysis.calendar,
+    assumptions: analysis.assumptions,
+    warnings: analysis.warnings
+  };
+}
+
+export function analyzeBurndown(rows, options = {}) {
+  return analyzeBurndownSeries(rows, options);
+}
+
+function tasksScene(scene, spec, rows, state) {
+  const plot = state.plot;
+  const overlays = projectOverlays(spec);
+  const values = rows.flatMap(rowWindow);
+  let min = Math.min(...(values.length ? values : [Date.now()])), max = Math.max(...(values.length ? values : [Date.now() + day]));
+  if (min === max) { min -= day; max += day; }
+  const map = timeAxis(scene, plot, min, max), positions = new Map();
+  const analyticsMap = new Map((state.schedule?.tasks || []).map(task => [task.id, task]));
+  const highlighted = new Set(spec.criticalPath === false || !overlays.criticalPath ? [] : Array.isArray(spec.criticalPath) ? spec.criticalPath : state.schedule?.criticalIds || []);
+  const selected = projectSelection(spec, state);
+  const rowHeight = Math.max(32, plot.height / Math.max(1, rows.length));
+  rows.forEach((row, index) => {
+    const analytics = analyticsMap.get(row.id);
+    const recordId = linkedRecordId(row, index);
+    const startValue = row.start ?? row.date ?? row.end;
+    const endValue = row.end ?? row.date ?? row.start;
+    const baselineStart = row.baselineStart || row.baselineDate || row.baseline || null;
+    const baselineEnd = row.baselineEnd || row.baselineDate || baselineStart;
+    const actualStart = row.actualStart || row.actualDate || null;
+    const actualEnd = row.actualEnd || row.actualDate || actualStart;
+    const start = map(startValue), end = map(endValue);
+    const y = plot.y + (index + 0.5) * rowHeight;
+    const milestone = spec.type === 'milestone' || row.milestone || start === end;
+    if (overlays.baseline && baselineStart) {
+      const baselineStartX = map(baselineStart), baselineEndX = map(baselineEnd || baselineStart);
+      if (milestone) scene.add({ id: `project-baseline-${index}`, type: 'circle', geometry: { cx: baselineStartX, cy: y, r: 4 }, bounds: { x: baselineStartX - 4, y: y - 4, width: 8, height: 8 }, style: { fill: spec.theme.background, stroke: spec.theme.axis, strokeWidth: 1.5 }, zIndex: 1 });
+      else scene.add({ id: `project-baseline-${index}`, type: 'rect', geometry: { x: baselineStartX, y: y - 14, width: Math.max(2, baselineEndX - baselineStartX), height: 6 }, style: { fill: spec.theme.border }, zIndex: 1 });
+    }
+    if (overlays.actual && actualStart) {
+      const actualStartX = map(actualStart), actualEndX = map(actualEnd || actualStart);
+      if (milestone) scene.add({ id: `project-actual-${index}`, type: 'circle', geometry: { cx: actualStartX, cy: y, r: 3 }, bounds: { x: actualStartX - 3, y: y - 3, width: 6, height: 6 }, style: { fill: spec.theme.text }, zIndex: 3 });
+      else scene.add({ id: `project-actual-${index}`, type: 'rect', geometry: { x: actualStartX, y: y + 8, width: Math.max(2, actualEndX - actualStartX), height: 4 }, style: { fill: spec.theme.text, opacity: 0.35 }, zIndex: 3 });
+    }
+    const geometry = milestone ? { cx: start, cy: y, r: 7 } : { x: start, y: y - 10, width: Math.max(2, end - start), height: 20 };
+    const bounds = milestone ? { x: start - 8, y: y - 8, width: 16, height: 16 } : { ...geometry };
+    const datum = taskDatum(row, analytics, recordId);
+    scene.add({
+      id: `project-item-${index}`,
+      type: milestone ? 'circle' : 'rect',
+      geometry,
+      bounds,
+      style: {
+        fill: highlighted.has(row.id) ? spec.theme.status.danger : row.status === 'done' ? spec.theme.status.success : spec.colors[index % spec.colors.length],
+        stroke: selected.has(recordId) ? spec.theme.selection : spec.theme.background,
+        strokeWidth: selected.has(recordId) ? 2 : 1
+      },
+      dataRef: { dataIndex: index, taskId: row.id, recordId, datum },
+      interactive: true,
+      zIndex: 2
+    });
+    positions.set(row.id || recordId, { start, end, y });
+    const label = row.name || row.title || row.label || row.id || `Item ${index + 1}`;
+    text(scene, `project-label-${index}`, label.length > 17 ? `${label.slice(0, 16)}…` : label, plot.x - 12, y + 4, { textAnchor: 'end' });
+    if (row.progress != null && !milestone) scene.add({ id: `project-progress-${index}`, type: 'rect', geometry: { ...geometry, width: geometry.width * (row.progress > 1 ? row.progress / 100 : row.progress) }, style: { fill: spec.theme.text, opacity: 0.25 }, zIndex: 3 });
+    if (overlays.slack && analytics?.latestFinish && !milestone) {
+      const latestEnd = map(analytics.latestFinish);
+      scene.add({ id: `project-slack-${index}`, type: 'line', geometry: { x1: end, y1: y, x2: latestEnd, y2: y }, style: { stroke: spec.theme.status.warning, strokeWidth: 1.5, opacity: 0.9 } });
+    }
+    if (overlays.variance) {
+      const variance = analytics?.endVarianceDays ?? analytics?.baselineVarianceDays ?? null;
+      if (variance != null) text(scene, `project-variance-${index}`, `${variance > 0 ? '+' : ''}${variance}d`, milestone ? start + 12 : end + 8, y - 12, { font: spec.theme.typography.axis.font, fill: variance > 0 ? spec.theme.status.danger : variance < 0 ? spec.theme.status.info : spec.theme.muted });
+    }
+  });
+  rows.forEach((row, index) => (row.dependencies || []).forEach((dependency, dependencyIndex) => {
+    const fromId = dependencyId(dependency), toId = row.id;
+    const from = positions.get(fromId), to = positions.get(toId);
+    if (!from || !to) return;
+    const critical = highlighted.has(fromId) && highlighted.has(toId) && state.schedule?.criticalEdges?.some(edge => edge.from === fromId && edge.to === toId);
+    const bend = from.end + 12;
+    arrow(scene, `dependency-${index}-${dependencyIndex}`, [{ x: from.end, y: from.y }, { x: bend, y: from.y }, { x: bend, y: to.y - 15 }, { x: to.start - 10, y: to.y - 15 }, { x: to.start - 10, y: to.y }, { x: to.start, y: to.y }], { from: fromId, to: toId, critical }, critical);
+  }));
+  state.timeDomain = [min, max];
+}
+
+function burndownScene(scene, spec, rows, state) {
+  const analysis = analyzeBurndown(rows, projectConfig(spec).burndown || spec.burndown || {});
+  const { samples, forecast } = analysis;
+  const plot = state.plot;
+  state.burndown = analysis;
+  state.projectAnalytics = { ...(state.projectAnalytics || {}), burndown: analysis };
+  const min = Math.min(analysis.start, samples[0]?.time || analysis.start || Date.now());
+  const max = Math.max(analysis.end, samples.at(-1)?.time || analysis.end || min + day, forecast.time || 0, min + day);
+  const map = timeAxis(scene, plot, min, max);
+  const maxValue = Math.max(1, ...samples.flatMap(sample => [sample.remaining, sample.ideal, sample.scope]));
+  const mapY = value => plot.y + plot.height - value / maxValue * plot.height;
+  const selected = projectSelection(spec, state);
+  const series = [['remaining', 'actual', spec.colors[0]], ['ideal', 'ideal', spec.theme.axis], ['scope', 'scope-total', spec.theme.status.warning]];
+  series.forEach(([field, id, color]) => scene.add({ id: `burndown-${id}`, type: 'path', geometry: { points: samples.map(sample => ({ x: map(sample.time), y: mapY(sample[field]) })) }, style: { fill: 'none', stroke: color, strokeWidth: 2 } }));
+  for (let index = 0; index <= 2; index += 1) text(scene, `burndown-y-${index}`, Number((maxValue * index / 2).toFixed(1)), plot.x - 12, mapY(maxValue * index / 2) + 4, { textAnchor: 'end' });
+  samples.forEach(sample => {
+    const x = map(sample.time), y = mapY(sample.remaining), index = sample.dataIndex;
+    const recordId = linkedRecordId(sample, index);
+    if (sample.scopeChange) scene.add({ id: `burndown-scope-${index}`, type: 'line', geometry: { x1: x, y1: plot.y, x2: x, y2: plot.y + plot.height }, style: { stroke: spec.theme.status.warning } });
+    scene.add({ id: `burndown-item-${index}`, type: 'circle', geometry: { cx: x, cy: y, r: 5 }, bounds: { x: x - 8, y: y - 8, width: 16, height: 16 }, style: { fill: spec.colors[0], stroke: selected.has(recordId) ? spec.theme.selection : spec.theme.background, strokeWidth: selected.has(recordId) ? 2 : 1 }, dataRef: { dataIndex: index, recordId, datum: { ...sample, forecast: forecast.date, forecastReason: forecast.reason } }, interactive: true, zIndex: 2 });
+  });
+  if (forecast.reason === 'estimated') {
+    const last = samples.at(-1);
+    scene.add({ id: 'burndown-forecast', type: 'path', geometry: { points: [{ x: map(last.time), y: mapY(last.remaining) }, { x: map(forecast.time), y: mapY(0) }] }, style: { fill: 'none', stroke: spec.theme.status.danger, strokeWidth: 2 } });
+  }
+  text(scene, 'burndown-projected', forecast.date ? `Estimated finish: ${forecast.date}` : `Forecast unavailable: ${forecast.reason}`, plot.x, plot.y - 16, { font: spec.theme.typography.axis.font });
+}
+
+function diagramScene(scene, spec, rows, state) {
+  const diagramSpec = normalizeDiagramData(spec);
+  const plot = state.plot, edges = diagramSpec.edges, lanes = diagramSpec.lanes, groups = diagramSpec.groups, layout = layoutDiagram(diagramSpec, plot);
+  rows = diagramSpec.nodes;
+  const collapsedGroups = new Set(groups.filter(group => group.collapsed).map(group => group.id));
+  const ranks = new Map(rows.map(row => [row.id, 0]));
+  const pending = new Map(rows.map(row => [row.id, edges.filter(edge => edge.to === row.id).length]));
+  const queue = rows.filter(row => pending.get(row.id) === 0).map(row => row.id);
+  for (let index = 0; index < queue.length; index += 1) edges.filter(edge => edge.from === queue[index]).forEach(edge => {
+    ranks.set(edge.to, Math.max(ranks.get(edge.to), ranks.get(edge.from) + 1));
+    pending.set(edge.to, pending.get(edge.to) - 1);
+    if (!pending.get(edge.to)) queue.push(edge.to);
+  });
+  rows.filter(row => !queue.includes(row.id)).forEach((row, index) => ranks.set(row.id, queue.length + index));
+  const columns = Math.max(1, ...[...ranks.values()].map(rank => rank + 1));
+  const gapX = Math.max(144, plot.width / columns), laneHeight = Math.max(80, plot.height / Math.max(1, lanes.length));
+  const positions = new Map(), slots = new Map();
+  lanes.forEach((lane, index) => {
+    scene.add({ id: `lane-${index}`, type: 'rect', geometry: { x: plot.x, y: plot.y + index * laneHeight, width: Math.max(plot.width, columns * gapX), height: laneHeight }, style: { fill: index % 2 ? spec.theme.surface : spec.theme.background, stroke: spec.theme.border }, zIndex: -1 });
+    text(scene, `lane-label-${index}`, lane.label || lane.id, plot.x - 12, plot.y + index * laneHeight + 20, { textAnchor: 'end' });
+  });
+  rows.forEach((row, index) => {
+    const rank = ranks.get(row.id), lane = Math.max(0, lanes.findIndex(item => item.id === row.laneId));
+    const slotKey = `${lane}:${rank}`, slot = slots.get(slotKey) || 0;
+    slots.set(slotKey, slot + 1);
+    const sameCell = rows.filter(item => ranks.get(item.id) === rank && (!lanes.length || item.laneId === row.laneId)).length;
+    const generated = layout[row.id];
+    const geometry = { x: row.position?.x ?? generated?.x ?? plot.x + rank * gapX + 12, y: row.position?.y ?? generated?.y ?? plot.y + (lanes.length ? lane * laneHeight : 0) + (slot + 0.5) * (lanes.length ? laneHeight : Math.max(plot.height, sameCell * 64)) / sameCell - 18, width: row.size?.width || 112, height: row.size?.height || 36 };
+    positions.set(row.id, geometry);
+    if (collapsedGroups.has(row.groupId)) return;
+    scene.add({ id: `node-${row.id}`, type: 'rect', geometry, bounds: { ...geometry }, style: { fill: spec.colors[lane % spec.colors.length] }, dataRef: { nodeId: row.id, dataIndex: index, datum: row, groupId: row.groupId || null }, interactive: true, zIndex: 2 });
+    (row.ports || []).forEach(port => {
+      const point = port.side === 'left' ? { x: geometry.x, y: geometry.y + geometry.height * (port.offset ?? 0.5) } : port.side === 'top' ? { x: geometry.x + geometry.width * (port.offset ?? 0.5), y: geometry.y } : port.side === 'bottom' ? { x: geometry.x + geometry.width * (port.offset ?? 0.5), y: geometry.y + geometry.height } : { x: geometry.x + geometry.width, y: geometry.y + geometry.height * (port.offset ?? 0.5) };
+      scene.add({ id: `port-${row.id}-${port.id}`, type: 'circle', geometry: { cx: point.x, cy: point.y, r: 4 }, bounds: { x: point.x - 6, y: point.y - 6, width: 12, height: 12 }, style: { fill: spec.theme.background, stroke: spec.theme.text, strokeWidth: 1.5 }, dataRef: { nodeId: row.id, portId: port.id, groupId: row.groupId || null }, interactive: true, zIndex: 4 });
+    });
+    text(scene, `node-label-${row.id}`, row.label || row.id, geometry.x + geometry.width / 2, geometry.y + geometry.height / 2 + 5, { fill: markText(spec.theme, spec.colors[lane % spec.colors.length]), textAnchor: 'middle' });
+  });
+  const groupBoxes = new Map();
+  groups.forEach(group => {
+    const boxes = rows.filter(row => row.groupId === group.id).map(row => positions.get(row.id)).filter(Boolean);
+    if (!boxes.length) return;
+    const padding = typeof group.padding === 'number' ? { left: group.padding, right: group.padding, top: group.padding, bottom: group.padding } : { left: group.padding?.left ?? 16, right: group.padding?.right ?? 16, top: group.padding?.top ?? 24, bottom: group.padding?.bottom ?? 16 };
+    const left = Math.min(...boxes.map(box => box.x)) - padding.left, top = Math.min(...boxes.map(box => box.y)) - padding.top, right = Math.max(...boxes.map(box => box.x + box.width)) + padding.right, bottom = Math.max(...boxes.map(box => box.y + box.height)) + padding.bottom;
+    const geometry = { x: left, y: top, width: right - left, height: bottom - top };
+    groupBoxes.set(group.id, geometry);
+    scene.add({ id: `group-${group.id}`, type: 'rect', geometry, bounds: { ...geometry }, style: { fill: group.collapsed ? spec.theme.surface : 'none', stroke: group.collapsed ? spec.theme.focus : spec.theme.axis, strokeWidth: group.collapsed ? 2 : 1.5, opacity: 0.9 }, dataRef: { groupId: group.id, collapsed: Boolean(group.collapsed) }, interactive: false, zIndex: 0 });
+    text(scene, `group-label-${group.id}`, group.collapsed ? `${group.label || group.id} (${boxes.length})` : group.label || group.id, left + 8, top + 15, { font: spec.theme.typography.legend.font });
+    const label = scene.find(`group-label-${group.id}`);
+    if (label) { label.bounds = { x: left, y: top, width: right - left, height: 20 }; label.dataRef = { groupId: group.id, collapsed: Boolean(group.collapsed) }; label.interactive = true; }
+  });
+  edges.forEach((edge, index) => {
+    const fromNode = rows.find(row => row.id === edge.from), toNode = rows.find(row => row.id === edge.to);
+    if (!fromNode || !toNode) return;
+    if (fromNode.groupId && fromNode.groupId === toNode.groupId && collapsedGroups.has(fromNode.groupId)) return;
+    const from = fromNode.groupId && collapsedGroups.has(fromNode.groupId) ? groupBoxes.get(fromNode.groupId) : positions.get(edge.from);
+    const to = toNode.groupId && collapsedGroups.has(toNode.groupId) ? groupBoxes.get(toNode.groupId) : positions.get(edge.to);
+    if (!from || !to) return;
+    const obstacles = [...positions.entries()].filter(([id]) => id !== edge.from && id !== edge.to && !collapsedGroups.has(rows.find(row => row.id === id)?.groupId)).map(([, box]) => box);
+    const points = routeEdge({ ...edge, grid: spec.diagram?.grid || 8, obstacles, fromPortDefinition: fromNode.groupId && collapsedGroups.has(fromNode.groupId) ? null : fromNode?.ports?.find(port => port.id === edge.fromPort), toPortDefinition: toNode.groupId && collapsedGroups.has(toNode.groupId) ? null : toNode?.ports?.find(port => port.id === edge.toPort) }, from, to, edge.routing || spec.diagram?.routing || 'orthogonal');
+    arrow(scene, `edge-${index}`, points, { from: edge.from, to: edge.to, edgeId: edge.id || `edge-${index}`, status: edge.status, routing: edge.routing || spec.diagram?.routing || 'orthogonal', fromGroupId: fromNode.groupId || null, toGroupId: toNode.groupId || null }, edge.critical === true);
+    if (edge.label) {
+      const middle = points[Math.floor(points.length / 2)];
+      text(scene, `edge-label-${index}`, edge.label, middle.x, middle.y - 8, { textAnchor: 'middle', font: spec.theme.typography.axis.font });
+    }
+  });
+  state.nodePositions = Object.fromEntries(positions);
+  state.groupBoxes = Object.fromEntries(groupBoxes);
+}
+
+export function projectView(spec) {
+  const view = spec.view || {};
+  return { scale: Math.max(0.25, Math.min(8, Number(view.scale) || 1)), offsetX: Number(view.offsetX) || 0, offsetY: Number(view.offsetY) || 0 };
+}
+
+export function buildProjectScene(spec) {
+  const theme = spec.theme && typeof spec.theme === 'object' && spec.theme.typography ? spec.theme : resolveTheme(spec.theme, spec);
+  spec = { ...spec, theme, colors: spec.colors || theme.colors, background: spec.background || theme.background, padding: spec.padding || theme.layout.padding };
+  const diagram = ['flow', 'swimlane'].includes(spec.type);
+  const rawRows = diagram ? spec.nodes ?? spec.data.nodes ?? [] : spec.data.values;
+  const sourceRows = rawRows.map(row => ({ ...row }));
+  const linked = createLinkedProjectState(sourceRows, projectConfig(spec).linked || {});
+  const visibleRows = diagram ? sourceRows : filterProjectRows(sourceRows, projectConfig(spec).linked || {});
+  const data = { ...normalizeData(visibleRows), rows: visibleRows.map(row => ({ ...row })), sourceRows: sourceRows.map(row => ({ ...row })) };
+  const scene = new Scene(spec.width, spec.height);
+  scene.theme = spec.theme;
+  const left = ['gantt', 'timeline', 'milestone', 'swimlane'].includes(spec.type) ? Math.min(150, spec.width * 0.32) : spec.padding.left;
+  const plotTop = Math.max(spec.padding.top, spec.title?.subtitle ? 72 : spec.title?.text ? 56 : spec.padding.top) + (spec.type === 'burndown' ? 16 : 0);
+  const state = { plot: { x: left, y: plotTop, width: Math.max(1, spec.width - left - spec.padding.right), height: Math.max(1, spec.height - plotTop - spec.padding.bottom - 16) }, linked, projectAnalytics: { linked } };
+  if (spec.type === 'gantt') {
+    state.schedule = analyzeSchedule(data.rows, { calendar: projectConfig(spec).calendar || {} });
+    state.projectAnalytics.schedule = state.schedule;
+    state.projectAnalytics.assumptions = state.schedule.assumptions;
+    state.projectAnalytics.warnings = state.schedule.warnings;
+  }
+  if (!data.rows.length) text(scene, 'empty', sourceRows.length && linked.visibleCount === 0 ? 'No matching data' : spec.emptyText || 'No data', spec.width / 2, spec.height / 2, { textAnchor: 'middle' });
+  else if (diagram) diagramScene(scene, spec, data.rows, state);
+  else if (spec.type === 'burndown') burndownScene(scene, spec, data.rows, state);
+  else tasksScene(scene, spec, data.rows, state);
+  const view = projectView(spec), mapX = value => value * view.scale + view.offsetX, mapY = value => value * view.scale + view.offsetY;
+  scene.walk(node => {
+    const geometry = node.geometry;
+    ['x', 'x1', 'x2', 'cx'].forEach(key => { if (geometry[key] != null) geometry[key] = mapX(geometry[key]); });
+    ['y', 'y1', 'y2', 'cy'].forEach(key => { if (geometry[key] != null) geometry[key] = mapY(geometry[key]); });
+    ['width', 'height', 'r'].forEach(key => { if (geometry[key] != null) geometry[key] *= view.scale; });
+    if (geometry.points) geometry.points = geometry.points.map(point => ({ x: mapX(point.x), y: mapY(point.y) }));
+    if (node.bounds) node.bounds = { x: mapX(node.bounds.x), y: mapY(node.bounds.y), width: node.bounds.width * view.scale, height: node.bounds.height * view.scale };
+  });
+  if (spec.title?.text) text(scene, 'title', spec.title.text, spec.width / 2, 22, { fill: spec.theme.text, font: spec.theme.typography.title.font, textAnchor: 'middle' });
+  if (spec.title?.subtitle) text(scene, 'subtitle', spec.title.subtitle, spec.width / 2, 40, { fill: spec.theme.muted, font: spec.theme.typography.subtitle.font, textAnchor: 'middle' });
+  state.view = view;
+  return { scene, data, state };
+}
+
+export function projectTooltip(type, row) {
+  if (!row) return '';
+  if (type === 'burndown') return [
+    `Date: ${row.date}`,
+    `Remaining: ${row.remaining ?? row.actual ?? row.value}`,
+    `Scope change: ${row.scopeChange || 0}`,
+    row.scope != null ? `Total scope: ${row.scope}` : null,
+    row.completed != null ? `Completed: ${row.completed}` : null,
+    row.forecast ? `Estimated finish: ${row.forecast}` : `Forecast: ${row.forecastReason || 'unavailable'}`
+  ].filter(Boolean).join('\n');
+  const dependencies = (row.dependencies || []).map(dependencyId).filter(Boolean);
+  const variance = row.endVarianceDays ?? row.baselineVarianceDays ?? null;
+  return [
+    row.name || row.title || row.label || row.id,
+    row.start ? `${row.start} → ${row.end || row.start}` : row.date,
+    row.progress != null ? `Progress: ${row.progress <= 1 ? Math.round(row.progress * 100) : row.progress}%` : null,
+    row.status ? `Status: ${row.status}` : null,
+    row.owner || row.resource ? `Owner: ${row.owner || row.resource}` : null,
+    dependencies.length ? `Depends on: ${dependencies.join(', ')}` : null,
+    row.critical != null ? `Critical: ${row.critical ? 'yes' : 'no'} · Float: ${row.float ?? row.slack ?? 0} days` : null,
+    variance != null ? `Variance: ${variance > 0 ? '+' : ''}${variance} days` : null,
+    row.laneId ? `Lane: ${row.laneId}` : null,
+    row.description
+  ].filter(value => value != null && value !== '').join('\n');
+}
+
+export function rerouteDiagramScene(scene) {
+  scene.walk(node => {
+    if (!node.id.startsWith('edge-') || !node.dataRef?.from || !node.dataRef?.to) return;
+    const source = scene.find(`node-${node.dataRef.from}`), destination = scene.find(`node-${node.dataRef.to}`);
+    if (!source || !destination) return;
+    const start = { x: source.geometry.x + source.geometry.width, y: source.geometry.y + source.geometry.height / 2 }, end = { x: destination.geometry.x, y: destination.geometry.y + destination.geometry.height / 2 };
+    const middle = (start.x + end.x) / 2;
+    node.geometry.points = node.dataRef.routing === 'straight' ? [start, end] : node.dataRef.routing === 'curved' ? [start, { x: start.x + Math.max(30, Math.abs(end.x - start.x) * 0.4), y: start.y }, { x: end.x - Math.max(30, Math.abs(end.x - start.x) * 0.4), y: end.y }, end] : [start, { x: middle, y: start.y }, { x: middle, y: end.y }, end];
+    const arrowNode = scene.find(`${node.id}-arrow`), beforeTip = node.geometry.points.at(-2);
+    if (arrowNode) arrowNode.geometry.points = [end, { x: end.x - 7 * Math.cos(Math.atan2(end.y - beforeTip.y, end.x - beforeTip.x) - Math.PI / 6), y: end.y - 7 * Math.sin(Math.atan2(end.y - beforeTip.y, end.x - beforeTip.x) - Math.PI / 6) }, { x: end.x - 7 * Math.cos(Math.atan2(end.y - beforeTip.y, end.x - beforeTip.x) + Math.PI / 6), y: end.y - 7 * Math.sin(Math.atan2(end.y - beforeTip.y, end.x - beforeTip.x) + Math.PI / 6) }, end];
+    const edgeIndex = Number(node.id.slice(5)), label = scene.find(`edge-label-${edgeIndex}`), labelPoint = node.geometry.points[Math.floor(node.geometry.points.length / 2)];
+    if (label && labelPoint) { label.geometry.x = labelPoint.x; label.geometry.y = labelPoint.y - 8; }
+  });
+  return scene;
+}

package/src/recipes.mjs

@@ -0,0 +1,18 @@
+/**
+ * Agent Recipe validation against runtime capabilities and business schemas.
+ * Recipes remain declarative and do not execute external side effects.
+ */
+import { copyJSON, validateDataSchema } from './schema.mjs';
+import { validateCommand } from './command.mjs';
+
+export function validateRecipe(recipe, capabilities) {
+  const errors = [];
+  try { recipe = copyJSON(recipe); } catch (error) { return { valid: false, errors: [{ code: 'INVALID_RECIPE', path: 'recipe', message: error.message }] }; }
+  if (!recipe || typeof recipe !== 'object') errors.push({ code: 'INVALID_RECIPE', path: 'recipe', message: 'Recipe must be an object.' });
+  if (recipe?.spec) {
+    if (!capabilities?.chartTypes?.includes(recipe.spec.type) && !capabilities?.projectManagement?.includes(recipe.spec.type) && !capabilities?.diagrams?.includes(recipe.spec.type)) errors.push({ code: 'RECIPE_TYPE', path: 'recipe.spec.type', message: `Recipe type is not declared in capabilities: ${recipe.spec.type}.` });
+  }
+  if (recipe?.schema) errors.push(...validateDataSchema(recipe.schema).errors);
+  if (recipe?.command) errors.push(...validateCommand(recipe.command).errors);
+  return { valid: errors.length === 0, errors, recipe };
+}

package/src/renderer.mjs

@@ -0,0 +1,77 @@
+/**
+ * Canvas and SVG renderer implementations for the shared Scene Graph.
+ * Rendering is intentionally separate from chart layout and data semantics.
+ */
+export class BaseRenderer {
+  constructor(options = {}) { this.options = options; this.container = null; }
+  mount(container) { this.container = typeof container === 'string' ? document.querySelector(container) : container; if (!this.container) throw new Error('Chart container was not found.'); return this; }
+  resize() {}
+  clear() {}
+  render() { throw new Error('Renderer.render() must be implemented.'); }
+  destroy() { this.clear(); this.container = null; }
+}
+
+function color(style, key, fallback) { return style && style[key] != null ? style[key] : fallback; }
+
+export class CanvasRenderer extends BaseRenderer {
+  mount(container) { super.mount(container); this.canvas = this.container.tagName === 'CANVAS' ? this.container : document.createElement('canvas'); if (this.canvas !== this.container) { this.container.innerHTML = ''; this.container.appendChild(this.canvas); } this.canvas.style.background = this.options.background || '#ffffff'; this.ctx = this.canvas.getContext('2d'); return this; }
+  resize(width, height, pixelRatio = window.devicePixelRatio || 1) { this.width = width; this.height = height; this.pixelRatio = pixelRatio; this.canvas.width = Math.round(width * pixelRatio); this.canvas.height = Math.round(height * pixelRatio); this.canvas.style.width = `${width}px`; this.canvas.style.height = `${height}px`; this.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); }
+  clear() { if (this.ctx) this.ctx.clearRect(0, 0, this.width, this.height); }
+  render(scene) { this.clear(); const ctx = this.ctx; const draw = node => { if (!node.visible) return; const g = node.geometry || {}; const s = node.style || {}; ctx.save(); ctx.globalAlpha = s.opacity == null ? 1 : s.opacity; ctx.fillStyle = color(s, 'fill', node.highlighted || node.selected ? '#1d4ed8' : '#2563eb'); ctx.strokeStyle = color(s, 'stroke', 'transparent'); ctx.lineWidth = s.strokeWidth || 1; if (node.type === 'rect') { ctx.fillRect(g.x, g.y, g.width, g.height); if (s.stroke) ctx.strokeRect(g.x, g.y, g.width, g.height); } else if (node.type === 'line') { ctx.beginPath(); ctx.moveTo(g.x1, g.y1); ctx.lineTo(g.x2, g.y2); ctx.stroke(); } else if (node.type === 'path') { ctx.beginPath(); g.points.forEach((point, index) => index ? ctx.lineTo(point.x, point.y) : ctx.moveTo(point.x, point.y)); if (g.closed) ctx.closePath(); ctx.stroke(); if (s.fill) ctx.fill(); } else if (node.type === 'circle') { ctx.beginPath(); ctx.arc(g.cx, g.cy, g.r, 0, Math.PI * 2); ctx.fill(); if (s.stroke) ctx.stroke(); } else if (node.type === 'arc') { ctx.beginPath(); ctx.arc(g.cx, g.cy, g.r, g.start, g.end); if (g.innerR > 0) { ctx.arc(g.cx, g.cy, g.innerR, g.end, g.start, true); } else ctx.lineTo(g.cx, g.cy); ctx.closePath(); ctx.fill(); if (s.stroke) ctx.stroke(); } else if (node.type === 'text') { ctx.font = s.font || '12px system-ui'; const align = s.textAlign || (s.textAnchor === 'end' ? 'end' : s.textAnchor === 'middle' || s.textAnchor === 'center' ? 'center' : s.textAnchor === 'start' ? 'start' : 'left'); ctx.textAlign = align; ctx.textBaseline = s.textBaseline || s.baseline || 'alphabetic'; ctx.fillText(g.text, g.x, g.y); } node.children.slice().sort((a, b) => a.zIndex - b.zIndex).forEach(draw); ctx.restore(); }; draw(scene.root); }
+  exportImage(type = 'image/png') { return this.canvas.toDataURL(type); }
+}
+
+export class SVGRenderer extends BaseRenderer {
+  constructor(options = {}) {
+    super(options);
+    if (typeof document !== 'undefined') {
+      const w = Number(options.width ?? 640), h = Number(options.height ?? 360);
+      this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      this.svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      this.svg.setAttribute('width', w);
+      this.svg.setAttribute('height', h);
+      this.svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+      this.width = w; this.height = h;
+    } else {
+      this.svg = null;
+      this.width = Number(options.width ?? 640);
+      this.height = Number(options.height ?? 360);
+    }
+  }
+  mount(container) {
+    super.mount(container);
+    if (!this.svg && typeof document !== 'undefined') {
+      this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      this.svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+    const containerIsSvg = this.container.tagName && this.container.tagName.toLowerCase() === 'svg';
+    if (containerIsSvg) {
+      this.svg = this.container;
+    } else {
+      this.container.innerHTML = '';
+      this.container.appendChild(this.svg);
+    }
+    this.svg.style.background = this.options.background || '#ffffff';
+    return this;
+  }
+  resize(width, height) {
+    this.width = width; this.height = height;
+    if (!this.svg) return;
+    this.svg.setAttribute('width', width); this.svg.setAttribute('height', height); this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  }
+  clear() { if (!this.svg) return; while (this.svg.firstChild) this.svg.removeChild(this.svg.firstChild); }
+  render(scene) {
+    if (!this.svg) {
+      if (typeof document === 'undefined') return;
+      const w = Number(this.options?.width ?? this.width ?? 640);
+      const h = Number(this.options?.height ?? this.height ?? 360);
+      this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      this.svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      this.svg.setAttribute('width', w);
+      this.svg.setAttribute('height', h);
+      this.svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+      this.width = w; this.height = h;
+    }
+    this.clear(); const renderNode = node => { if (!node.visible || node.type === 'root') { node.children.slice().sort((a, b) => a.zIndex - b.zIndex).forEach(renderNode); return; } const g = node.geometry || {}, s = node.style || {}; const element = document.createElementNS('http://www.w3.org/2000/svg', node.type === 'path' || node.type === 'arc' ? 'path' : node.type === 'text' ? 'text' : node.type); element.setAttribute('id', node.id); element.setAttribute('data-node-id', node.id); if (node.dataRef) element.dataset.dataRef = JSON.stringify(node.dataRef); if (node.type === 'rect') { element.setAttribute('x', g.x); element.setAttribute('y', g.y); element.setAttribute('width', g.width); element.setAttribute('height', g.height); } else if (node.type === 'line') { ['x1', 'y1', 'x2', 'y2'].forEach(key => element.setAttribute(key, g[key])); } else if (node.type === 'circle') { element.setAttribute('cx', g.cx); element.setAttribute('cy', g.cy); element.setAttribute('r', g.r); } else if (node.type === 'arc') { const large = g.end - g.start > Math.PI ? 1 : 0, outerStart = `${g.cx + g.r * Math.cos(g.start)} ${g.cy + g.r * Math.sin(g.start)}`, outerEnd = `${g.cx + g.r * Math.cos(g.end)} ${g.cy + g.r * Math.sin(g.end)}`; const p = g.innerR > 0 ? [`M ${outerStart}`, `A ${g.r} ${g.r} 0 ${large} 1 ${outerEnd}`, `L ${g.cx + g.innerR * Math.cos(g.end)} ${g.cy + g.innerR * Math.sin(g.end)}`, `A ${g.innerR} ${g.innerR} 0 ${large} 0 ${g.cx + g.innerR * Math.cos(g.start)} ${g.cy + g.innerR * Math.sin(g.start)}`, 'Z'] : [`M ${g.cx} ${g.cy}`, `L ${outerStart}`, `A ${g.r} ${g.r} 0 ${large} 1 ${outerEnd}`, 'Z']; element.setAttribute('d', p.join(' ')); } else if (node.type === 'path') element.setAttribute('d', `${g.points.map((p, i) => `${i ? 'L' : 'M'} ${p.x} ${p.y}`).join(' ')}${g.closed ? ' Z' : ''}`); else if (node.type === 'text') { element.setAttribute('x', g.x); element.setAttribute('y', g.y); element.textContent = g.text; const anchor = s.textAnchor || (s.textAlign === 'end' ? 'end' : s.textAlign === 'center' ? 'middle' : s.textAlign === 'right' ? 'end' : s.textAlign === 'left' ? 'start' : 'start'); if (anchor) element.setAttribute('text-anchor', anchor); const baseline = s.textBaseline || s.baseline || 'alphabetic'; if (baseline === 'top') { element.setAttribute('dominant-baseline', 'text-before-edge'); element.setAttribute('alignment-baseline', 'before-edge'); } else if (baseline === 'middle' || baseline === 'central') { element.setAttribute('dominant-baseline', 'middle'); element.setAttribute('alignment-baseline', 'middle'); } else if (baseline === 'bottom' || baseline === 'hanging') { element.setAttribute('dominant-baseline', 'text-after-edge'); element.setAttribute('alignment-baseline', 'after-edge'); } else { element.setAttribute('dominant-baseline', 'alphabetic'); element.setAttribute('alignment-baseline', 'alphabetic'); } if (s.font) { const raw = String(s.font).trim(); element.setAttribute('font', raw); const sizeMatch = raw.match(/\b(\d+(?:\.\d+)?)\s*(px|em|rem|pt|%)/i); const size = sizeMatch ? `${sizeMatch[1]}${sizeMatch[2].toLowerCase()}` : ''; if (size) element.style.fontSize = size; const weightMatch = raw.match(/^\s*(\d{3}|normal|bold|lighter|bolder)\b/i); if (weightMatch) element.style.fontWeight = weightMatch[1]; const family = raw.replace(/^\s*(?:(?:normal|italic|oblique)(?:\s+[^0-9\s]+)?\s+)?(?:\d{3}|normal|bold|lighter|bolder)\s+/i, '').replace(/\b\d+(?:\.\d+)?\s*(?:px|em|rem|pt|%)(?:\s*\/\s*\S+)?\s*/i, '').trim(); if (family) element.style.fontFamily = family; } } if (node.type === 'path' && !s.fill) element.setAttribute('fill', 'none'); else if (s.fill) element.setAttribute('fill', s.fill); if (s.stroke) element.setAttribute('stroke', s.stroke); if (s.strokeWidth) element.setAttribute('stroke-width', s.strokeWidth); if (s.opacity != null) element.setAttribute('opacity', node.highlighted || node.selected ? 1 : s.opacity); if (node.highlighted || node.selected) element.setAttribute('filter', 'brightness(1.2)'); if (node.interactive) element.style.cursor = 'pointer'; if (s.pointerEvents === 'none') element.style.pointerEvents = 'none'; if (s.ariaHidden === 'true') element.setAttribute('aria-hidden', 'true'); if (s.role === 'presentation') element.setAttribute('role', 'presentation'); if (node.decorative) { element.setAttribute('aria-hidden', 'true'); element.setAttribute('role', 'presentation'); element.style.pointerEvents = 'none'; element.style.userSelect = 'none'; } this.svg.appendChild(element); node.children.slice().sort((a, b) => a.zIndex - b.zIndex).forEach(renderNode); }; scene.root.children.slice().sort((a, b) => a.zIndex - b.zIndex).forEach(renderNode); }
+  exportString() { if (!this.svg) return ''; return new XMLSerializer().serializeToString(this.svg); }
+}

package/src/scale.mjs

@@ -0,0 +1,9 @@
+/**
+ * Coordinate scale primitives for category, linear, time, and logarithmic axes.
+ * Scales map normalized values to plot coordinates and generate ticks.
+ */
+export class Scale {
+  constructor({ type = 'linear', domain = [0, 1], range = [0, 1], categories = [] } = {}) { this.type = type; this.domain = domain; this.range = range; this.categories = categories; }
+  map(value) { if (this.type === 'category') { const index = this.categories.indexOf(String(value)); return this.range[0] + (index + 0.5) * (this.range[1] - this.range[0]) / Math.max(1, this.categories.length); } const logarithmic = this.type === 'log'; const numeric = this.type === 'time' ? new Date(value).getTime() : logarithmic ? Math.log10(Math.max(0.000001, Number(value))) : Number(value); const start = this.type === 'time' ? new Date(this.domain[0]).getTime() : logarithmic ? Math.log10(Math.max(0.000001, Number(this.domain[0]))) : Number(this.domain[0]); const end = this.type === 'time' ? new Date(this.domain[1]).getTime() : logarithmic ? Math.log10(Math.max(0.000001, Number(this.domain[1]))) : Number(this.domain[1]); return this.range[0] + ((numeric - start) / ((end - start) || 1)) * (this.range[1] - this.range[0]); }
+  ticks(count = 5) { if (this.type === 'category') return this.categories.slice(); if (this.type === 'log') { const start = Math.ceil(Math.log10(Math.max(0.000001, Number(this.domain[0])))), end = Math.floor(Math.log10(Math.max(0.000001, Number(this.domain[1])))); return Array.from({ length: Math.max(1, end - start + 1) }, (_, index) => 10 ** (start + index)); } const start = Number(this.domain[0]), end = Number(this.domain[1]), step = (end - start) / Math.max(1, count - 1); return Array.from({ length: count }, (_, index) => start + index * step); }
+}

package/src/scene.mjs

@@ -0,0 +1,18 @@
+/**
+ * Renderer-independent Scene Graph nodes, traversal, lookup, and hit testing.
+ * Scene nodes carry geometry, style, data references, and interaction state.
+ */
+export class SceneNode {
+  constructor(config = {}) {
+    Object.assign(this, { id: '', type: 'group', geometry: {}, style: {}, children: [], dataRef: null, bounds: null, zIndex: 0, visible: true, interactive: false, selected: false, highlighted: false }, config);
+  }
+  add(node) { this.children.push(node instanceof SceneNode ? node : new SceneNode(node)); return node; }
+}
+
+export class Scene {
+  constructor(width, height) { this.width = width; this.height = height; this.root = new SceneNode({ id: 'root', type: 'group' }); }
+  add(node) { return this.root.add(node); }
+  walk(fn, node = this.root) { fn(node); node.children.forEach(child => this.walk(fn, child)); }
+  find(id) { let found; this.walk(node => { if (node.id === id) found = node; }); return found; }
+  hit(x, y) { const hits = []; this.walk(node => { if (node.visible && node.interactive && node.bounds && x >= node.bounds.x && x <= node.bounds.x + node.bounds.width && y >= node.bounds.y && y <= node.bounds.y + node.bounds.height) hits.push(node); }); return hits.sort((a, b) => b.zIndex - a.zIndex)[0] || null; }
+}