@heyiam/ui 0.0.1 → 0.0.3

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@heyiam/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Shared visualization components for heyi.am",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/DirectoryHeatmap.tsx

@@ -0,0 +1,172 @@
+import { Fragment } from 'react';
+import type { Session } from './types';
+
+// ── Directory Heatmap ──────────────────────────────────────────
+
+interface FileEditData {
+  path: string;
+  editCount: number;
+}
+
+function stripProjectRoot(filePath: string, projectDirName: string, cwd?: string): string {
+  if (cwd && filePath.startsWith(cwd)) {
+    const relative = filePath.slice(cwd.length).replace(/^\//, '');
+    return relative || filePath;
+  }
+  const root = projectDirName.replace(/^-/, '/').replace(/-/g, '/');
+  if (filePath.startsWith(root)) {
+    const relative = filePath.slice(root.length).replace(/^\//, '');
+    return relative || filePath;
+  }
+  return filePath;
+}
+
+function extractDirectory(filePath: string): string {
+  const segments = filePath.split('/').filter(Boolean);
+  if (segments.length <= 1) return '/';
+  const depth = Math.min(segments.length - 1, 2);
+  return segments.slice(0, depth).join('/') + '/';
+}
+
+interface HeatmapData {
+  directories: string[];
+  grid: Map<string, number>;
+  maxEdits: number;
+  files: FileEditData[];
+  totalFiles: number;
+}
+
+function buildHeatmapData(sessions: Session[], projectDirName: string): HeatmapData {
+  const dirSessionMap = new Map<string, Map<string, number>>();
+  const dirTotals = new Map<string, number>();
+  const fileMap = new Map<string, number>();
+
+  for (const session of sessions) {
+    if (!session.filesChanged) continue;
+    for (const fc of session.filesChanged) {
+      if (!fc.path || typeof fc.path !== 'string') continue;
+      const edits = fc.editCount ?? (fc.additions + fc.deletions);
+      const relativePath = stripProjectRoot(fc.path, projectDirName, session.cwd);
+      const dir = extractDirectory(relativePath);
+
+      if (!dirSessionMap.has(dir)) dirSessionMap.set(dir, new Map());
+      const sessionMap = dirSessionMap.get(dir)!;
+      sessionMap.set(session.id, (sessionMap.get(session.id) ?? 0) + edits);
+      dirTotals.set(dir, (dirTotals.get(dir) ?? 0) + edits);
+      fileMap.set(relativePath, (fileMap.get(relativePath) ?? 0) + edits);
+    }
+  }
+
+  const directories = Array.from(dirTotals.entries())
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([dir]) => dir);
+
+  const grid = new Map<string, number>();
+  let maxEdits = 0;
+  for (const dir of directories) {
+    const sessionMap = dirSessionMap.get(dir);
+    if (!sessionMap) continue;
+    for (const session of sessions) {
+      const edits = sessionMap.get(session.id) ?? 0;
+      grid.set(`${dir}|${session.id}`, edits);
+      if (edits > maxEdits) maxEdits = edits;
+    }
+  }
+
+  const files = Array.from(fileMap.entries())
+    .map(([path, editCount]) => ({ path, editCount }))
+    .sort((a, b) => b.editCount - a.editCount)
+    .slice(0, 10);
+
+  return { directories, grid, maxEdits, files, totalFiles: fileMap.size };
+}
+
+function getCellOpacity(editCount: number, maxEdits: number): number {
+  if (editCount === 0) return 0.02;
+  if (maxEdits === 0) return 0.05;
+  const ratio = editCount / maxEdits;
+  return 0.05 + ratio * 0.65;
+}
+
+function truncateTitle(title: string, maxLen: number = 15): string {
+  if (title.length <= maxLen) return title;
+  return title.slice(0, maxLen - 1) + '\u2026';
+}
+
+/** @internal Exported for testing */
+export function DirectoryHeatmap({ sessions, projectDirName }: { sessions: Session[]; projectDirName: string }) {
+  const { directories, grid, maxEdits, files, totalFiles } = buildHeatmapData(sessions, projectDirName);
+
+  if (directories.length === 0) {
+    return (
+      <div className="dir-heatmap">
+        <div className="project-preview__timeline-heading">EDIT HEATMAP BY DIRECTORY</div>
+        <p className="dir-heatmap__empty">No file data available</p>
+      </div>
+    );
+  }
+
+  const sessionCount = sessions.length;
+
+  return (
+    <div className="dir-heatmap">
+      <div className="project-preview__timeline-heading">EDIT HEATMAP BY DIRECTORY</div>
+      <div
+        className="dir-heatmap__grid"
+        style={{ gridTemplateColumns: `150px repeat(${sessionCount}, 1fr)` }}
+        role="table"
+        aria-label="Directory edit heatmap"
+      >
+        <div className="dir-heatmap__corner" role="columnheader" />
+        {sessions.map((s) => (
+          <div key={s.id} className="dir-heatmap__session-label" role="columnheader" title={s.title}>
+            {truncateTitle(s.title)}
+          </div>
+        ))}
+
+        {directories.map((dir) => (
+          <Fragment key={dir}>
+            <div className="dir-heatmap__dir-label" role="rowheader" title={dir}>{dir}</div>
+            {sessions.map((s) => {
+              const edits = grid.get(`${dir}|${s.id}`) ?? 0;
+              const opacity = getCellOpacity(edits, maxEdits);
+              return (
+                <div
+                  key={s.id}
+                  className="dir-heatmap__cell"
+                  style={{ background: `rgba(8,68,113,${opacity})` }}
+                  role="cell"
+                  title={`${dir} in ${s.title}: ${edits} edits`}
+                  aria-label={`${dir} in ${s.title}: ${edits} edits`}
+                />
+              );
+            })}
+          </Fragment>
+        ))}
+      </div>
+
+      <div className="dir-heatmap__legend" aria-hidden="true">
+        <span>Intensity = edit count</span>
+        <span style={{ display: 'inline-block', width: 12, height: 12, background: 'rgba(8,68,113,0.05)', borderRadius: 2 }} />
+        <span style={{ display: 'inline-block', width: 12, height: 12, background: 'rgba(8,68,113,0.35)', borderRadius: 2 }} />
+        <span style={{ display: 'inline-block', width: 12, height: 12, background: 'rgba(8,68,113,0.7)', borderRadius: 2 }} />
+        <span>low &rarr; high</span>
+      </div>
+
+      <details className="dir-heatmap__top-files">
+        <summary className="dir-heatmap__top-files-summary">
+          Top {files.length} most-edited files (of {totalFiles} total) &rarr;
+        </summary>
+        <div role="list" aria-label="Most edited files">
+          {files.map((f) => (
+            <div key={f.path} className="dir-heatmap__file-row" role="listitem">
+              <span className="dir-heatmap__file-path" title={f.path}>{f.path}</span>
+              <span className="dir-heatmap__file-count">{f.editCount} edits</span>
+            </div>
+          ))}
+        </div>
+      </details>
+    </div>
+  );
+}

package/src/GrowthChart.tsx

@@ -0,0 +1,404 @@
+import { Fragment } from 'react';
+import type { Session } from './types';
+
+// ── Growth Chart ─────────────────────────────────────────────────
+
+interface GrowthChartProps {
+  sessions: Session[];
+  totalLoc: number;
+  totalFiles: number;
+  onSessionClick?: (session: Session) => void;
+}
+
+/** A point on the cumulative LOC time series */
+export interface GrowthPoint {
+  /** Visual x position in ms (after gap compression) */
+  visualTime: number;
+  /** Cumulative LOC at this point */
+  cumulativeLoc: number;
+  /** Which session this point belongs to (index in sorted array) */
+  sessionIndex: number;
+}
+
+/** Session boundary marker for vertical dashed lines */
+export interface SessionBoundary {
+  visualTime: number;
+  title: string;
+  sessionIndex: number;
+}
+
+function formatLoc(loc: number): string {
+  if (loc < 1000) return String(loc);
+  return `${(loc / 1000).toFixed(1)}k`;
+}
+
+/** @internal Exported for testing */
+export function formatLocAxis(n: number): string {
+  if (n === 0) return '0';
+  if (n >= 1000) return `${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k`;
+  return String(n);
+}
+
+/** @internal Exported for testing */
+export function formatLocDelta(n: number): string {
+  if (n >= 1000) return `+${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k`;
+  return `+${n}`;
+}
+
+/** @internal Exported for testing */
+export function computeAxisTicks(maxVal: number): number[] {
+  if (maxVal <= 0) return [0];
+  const rawStep = maxVal / 4;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+  const nice = [1, 2, 2.5, 5, 10];
+  let step = magnitude;
+  for (const n of nice) {
+    if (n * magnitude >= rawStep) {
+      step = n * magnitude;
+      break;
+    }
+  }
+  const ticks: number[] = [];
+  for (let v = 0; v <= maxVal + step * 0.1; v += step) {
+    ticks.push(Math.round(v));
+  }
+  if (ticks[ticks.length - 1] < maxVal) {
+    ticks.push(ticks[ticks.length - 1] + Math.round(step));
+  }
+  return ticks;
+}
+
+const FIVE_MINUTES_MS = 5 * 60 * 1000;
+const GAP_COMPRESS_THRESHOLD_MS = 60 * 60 * 1000;
+const COMPRESSED_GAP_MS = 10 * 60 * 1000;
+
+function bucketTurns(
+  turns: Array<{ timestamp: string }>,
+  sessionStart: number,
+  sessionEnd: number,
+  locPerTurn: number,
+): Array<{ time: number; locDelta: number }> {
+  const turnTimes = turns
+    .map((t) => new Date(t.timestamp).getTime())
+    .filter((t) => !isNaN(t) && t >= sessionStart && t <= sessionEnd + FIVE_MINUTES_MS)
+    .sort((a, b) => a - b);
+
+  if (turnTimes.length === 0) {
+    return [{ time: sessionEnd, locDelta: locPerTurn * turns.length }];
+  }
+
+  const buckets = new Map<number, number>();
+  for (const t of turnTimes) {
+    const bucketStart = sessionStart + Math.floor((t - sessionStart) / FIVE_MINUTES_MS) * FIVE_MINUTES_MS;
+    buckets.set(bucketStart, (buckets.get(bucketStart) ?? 0) + 1);
+  }
+
+  return Array.from(buckets.entries())
+    .sort(([a], [b]) => a - b)
+    .map(([time, count]) => ({
+      time: time + FIVE_MINUTES_MS / 2,
+      locDelta: count * locPerTurn,
+    }));
+}
+
+/** @internal Exported for testing */
+export function buildGrowthTimeSeries(
+  sessions: Session[],
+): { points: GrowthPoint[]; boundaries: SessionBoundary[]; totalVisualTime: number } {
+  const sorted = [...sessions]
+    .filter((s) => s.date)
+    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+  if (sorted.length === 0) return { points: [], boundaries: [], totalVisualTime: 0 };
+
+  interface RawPoint {
+    realTime: number;
+    cumulativeLoc: number;
+    sessionIndex: number;
+  }
+
+  const rawPoints: RawPoint[] = [];
+  const rawBoundaries: { realTime: number; title: string; sessionIndex: number }[] = [];
+  let cumulativeLoc = 0;
+
+  for (let si = 0; si < sorted.length; si++) {
+    const session = sorted[si];
+    const sessionStart = new Date(session.date).getTime();
+    const sessionEnd = session.endTime
+      ? new Date(session.endTime).getTime()
+      : sessionStart + session.durationMinutes * 60 * 1000;
+    const sessionLoc = Math.max(0, session.linesOfCode);
+
+    rawBoundaries.push({ realTime: sessionStart, title: session.title, sessionIndex: si });
+    rawPoints.push({ realTime: sessionStart, cumulativeLoc, sessionIndex: si });
+
+    if (sessionLoc === 0) {
+      rawPoints.push({ realTime: sessionEnd, cumulativeLoc, sessionIndex: si });
+      continue;
+    }
+
+    const timeline = session.turnTimeline;
+    if (!timeline || timeline.length === 0) {
+      cumulativeLoc += sessionLoc;
+      rawPoints.push({ realTime: sessionEnd, cumulativeLoc, sessionIndex: si });
+      continue;
+    }
+
+    const editTurns = timeline.filter(
+      (t) =>
+        t.type === 'tool' &&
+        t.tools &&
+        t.tools.some((tool) => /edit|write/i.test(tool)),
+    );
+
+    const activeTurns = editTurns.length > 0
+      ? editTurns
+      : timeline.filter((t) => t.type === 'tool' && t.timestamp);
+
+    if (activeTurns.length === 0) {
+      cumulativeLoc += sessionLoc;
+      rawPoints.push({ realTime: sessionEnd, cumulativeLoc, sessionIndex: si });
+      continue;
+    }
+
+    const locPerTurn = sessionLoc / activeTurns.length;
+    const buckets = bucketTurns(activeTurns, sessionStart, sessionEnd, locPerTurn);
+    for (const bucket of buckets) {
+      cumulativeLoc += bucket.locDelta;
+      rawPoints.push({ realTime: bucket.time, cumulativeLoc, sessionIndex: si });
+    }
+  }
+
+  if (rawPoints.length === 0) return { points: [], boundaries: [], totalVisualTime: 0 };
+
+  let visualTime = 0;
+  let prevRealTime = rawPoints[0].realTime;
+  const realToVisual = new Map<number, number>();
+
+  for (const rp of rawPoints) {
+    const gap = rp.realTime - prevRealTime;
+    if (gap > GAP_COMPRESS_THRESHOLD_MS) {
+      visualTime += COMPRESSED_GAP_MS;
+    } else {
+      visualTime += Math.max(0, gap);
+    }
+    realToVisual.set(rp.realTime, visualTime);
+    prevRealTime = rp.realTime;
+  }
+
+  const points: GrowthPoint[] = rawPoints.map((rp) => ({
+    visualTime: realToVisual.get(rp.realTime) ?? 0,
+    cumulativeLoc: rp.cumulativeLoc,
+    sessionIndex: rp.sessionIndex,
+  }));
+
+  const boundaries: SessionBoundary[] = rawBoundaries.map((b) => {
+    let bestVisual = 0;
+    let bestDist = Infinity;
+    for (const [real, vis] of realToVisual.entries()) {
+      const dist = Math.abs(real - b.realTime);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestVisual = vis;
+      }
+    }
+    return { visualTime: bestVisual, title: b.title, sessionIndex: b.sessionIndex };
+  });
+
+  return { points, boundaries, totalVisualTime: visualTime };
+}
+
+/**
+ * Build a smooth cubic bezier SVG path through the given points.
+ * @internal Exported for testing
+ */
+export function buildSmoothPath(
+  coords: Array<{ x: number; y: number }>,
+): string {
+  if (coords.length === 0) return '';
+  if (coords.length === 1) return `M${coords[0].x.toFixed(1)},${coords[0].y.toFixed(1)}`;
+  if (coords.length === 2) {
+    return `M${coords[0].x.toFixed(1)},${coords[0].y.toFixed(1)} L${coords[1].x.toFixed(1)},${coords[1].y.toFixed(1)}`;
+  }
+
+  const tension = 0.3;
+  let path = `M${coords[0].x.toFixed(1)},${coords[0].y.toFixed(1)}`;
+
+  for (let i = 0; i < coords.length - 1; i++) {
+    const p0 = coords[Math.max(0, i - 1)];
+    const p1 = coords[i];
+    const p2 = coords[i + 1];
+    const p3 = coords[Math.min(coords.length - 1, i + 2)];
+
+    const cp1x = p1.x + (p2.x - p0.x) * tension;
+    const cp1y = p1.y + (p2.y - p0.y) * tension;
+    const cp2x = p2.x - (p3.x - p1.x) * tension;
+    const cp2y = p2.y - (p3.y - p1.y) * tension;
+
+    path += ` C${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${p2.x.toFixed(1)},${p2.y.toFixed(1)}`;
+  }
+
+  return path;
+}
+
+function truncTitle(t: string, max: number = 14): string {
+  return t.length > max ? t.slice(0, max - 1) + '\u2026' : t;
+}
+
+/** @internal Exported for testing */
+export function GrowthChart({ sessions, totalLoc, totalFiles, onSessionClick }: GrowthChartProps) {
+  if (sessions.length === 0) {
+    return (
+      <div className="growth-chart">
+        <div className="growth-chart__svg-container">
+          <p style={{ color: 'var(--on-surface-variant)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+            No session data available for growth chart.
+          </p>
+        </div>
+        <div className="growth-chart__summary">
+          <div className="growth-chart__total-value">0</div>
+          <div className="growth-chart__total-label">LINES OF CODE</div>
+        </div>
+      </div>
+    );
+  }
+
+  const dated = sessions.filter((s) => s.date);
+  if (dated.length === 0) {
+    return (
+      <div className="growth-chart">
+        <div className="growth-chart__svg-container">
+          <p style={{ color: 'var(--on-surface-variant)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+            No dated sessions available for growth chart.
+          </p>
+        </div>
+        <div className="growth-chart__summary">
+          <div className="growth-chart__total-value">{formatLoc(totalLoc)}</div>
+          <div className="growth-chart__total-label">LINES OF CODE</div>
+        </div>
+      </div>
+    );
+  }
+
+  const sortedSessions = [...dated].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+  const { points, boundaries, totalVisualTime } = buildGrowthTimeSeries(dated);
+
+  if (points.length === 0) {
+    return (
+      <div className="growth-chart">
+        <div className="growth-chart__svg-container">
+          <p style={{ color: 'var(--on-surface-variant)', fontFamily: 'var(--font-mono)', fontSize: '0.75rem' }}>
+            No dated sessions available for growth chart.
+          </p>
+        </div>
+        <div className="growth-chart__summary">
+          <div className="growth-chart__total-value">{formatLoc(totalLoc)}</div>
+          <div className="growth-chart__total-label">LINES OF CODE</div>
+        </div>
+      </div>
+    );
+  }
+
+  const maxLoc = Math.max(...points.map((p) => p.cumulativeLoc), 1);
+  const ticks = computeAxisTicks(maxLoc);
+  const axisMax = ticks[ticks.length - 1] || 1;
+
+  const baseWidth = 600;
+  const widthPerMinute = 0.8;
+  const svgWidth = Math.max(baseWidth, Math.round(totalVisualTime / 60000 * widthPerMinute) + 120);
+  const svgHeight = 260;
+  const padLeft = 48;
+  const padRight = 16;
+  const padTop = 32;
+  const padBottom = 48;
+  const chartW = svgWidth - padLeft - padRight;
+  const chartH = svgHeight - padTop - padBottom;
+
+  const maxVisualTime = totalVisualTime || 1;
+  const toX = (vt: number) => padLeft + (vt / maxVisualTime) * chartW;
+  const toY = (val: number) => padTop + chartH - (val / axisMax) * chartH;
+
+  const coords = points.map((p) => ({ x: toX(p.visualTime), y: toY(p.cumulativeLoc) }));
+  const linePath = buildSmoothPath(coords);
+
+  const lastCoord = coords[coords.length - 1];
+  const firstCoord = coords[0];
+  const areaPath =
+    linePath +
+    ` L${lastCoord.x.toFixed(1)},${(padTop + chartH).toFixed(1)}` +
+    ` L${firstCoord.x.toFixed(1)},${(padTop + chartH).toFixed(1)} Z`;
+
+  const uniqueBoundaries = boundaries.filter(
+    (b, i) => i === 0 || Math.abs(b.visualTime - boundaries[i - 1].visualTime) > 0.001,
+  );
+
+  const sessionCount = dated.length;
+  const isScrollable = svgWidth > baseWidth;
+
+  return (
+    <div className="growth-chart">
+      <div
+        className="growth-chart__svg-container"
+        style={isScrollable ? { overflowX: 'auto' } : undefined}
+      >
+        <svg
+          viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+          width={isScrollable ? svgWidth : '100%'}
+          height={isScrollable ? svgHeight : undefined}
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          aria-label={`Growth chart showing cumulative lines of code across ${sessionCount} sessions`}
+        >
+          {ticks.map((tick) => (
+            <g key={`y-${tick}`}>
+              <line x1={padLeft} y1={toY(tick)} x2={svgWidth - padRight} y2={toY(tick)} stroke="var(--outline-variant)" strokeWidth="0.5" strokeDasharray="4,4" />
+              <text x={padLeft - 8} y={toY(tick) + 3} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" fill="var(--on-surface-variant)">{formatLocAxis(tick)}</text>
+            </g>
+          ))}
+
+          {uniqueBoundaries.map((b, i) => {
+            const clickable = onSessionClick && sortedSessions[b.sessionIndex];
+            return (
+              <g key={`boundary-${i}`} style={clickable ? { cursor: 'pointer' } : undefined} onClick={clickable ? () => onSessionClick(sortedSessions[b.sessionIndex]) : undefined}>
+                <line x1={toX(b.visualTime)} y1={padTop} x2={toX(b.visualTime)} y2={padTop + chartH} stroke="var(--outline-variant)" strokeWidth="0.5" strokeDasharray="3,3" />
+                <text x={toX(b.visualTime)} y={padTop + chartH + 16} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill={clickable ? 'var(--primary)' : 'var(--on-surface-variant)'} textDecoration={clickable ? 'underline' : undefined}>{truncTitle(b.title)}</text>
+              </g>
+            );
+          })}
+
+          <path d={areaPath} fill="rgba(8,68,113,0.06)" />
+          <path d={linePath} fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+
+          {uniqueBoundaries.map((b, i) => {
+            const sessionPts = points.filter((p) => p.sessionIndex === b.sessionIndex);
+            if (sessionPts.length === 0) return null;
+            const lastPt = sessionPts[sessionPts.length - 1];
+            const firstPt = sessionPts[0];
+            const delta = lastPt.cumulativeLoc - firstPt.cumulativeLoc +
+              (firstPt === points[0] ? firstPt.cumulativeLoc : 0);
+            return (
+              <g key={`dot-${i}`}>
+                <circle cx={toX(lastPt.visualTime)} cy={toY(lastPt.cumulativeLoc)} r="3" fill="var(--secondary)" />
+                {delta > 0 && (
+                  <text x={toX(lastPt.visualTime)} y={toY(lastPt.cumulativeLoc) - 8} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill="var(--secondary)">{formatLocDelta(delta)}</text>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+      <div className="growth-chart__summary">
+        <div className="growth-chart__total-value">{formatLoc(totalLoc)}</div>
+        <div className="growth-chart__total-label">LINES OF CODE</div>
+        <div className="growth-chart__stat">
+          <div className="growth-chart__stat-value">{totalFiles}</div>
+          <div className="growth-chart__stat-label">FILES TOUCHED</div>
+        </div>
+        <div className="growth-chart__stat">
+          <div className="growth-chart__stat-value">{sessionCount}</div>
+          <div className="growth-chart__stat-label">SESSIONS</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -1,5 +1,11 @@
 export { WorkTimeline, computeSegments } from './WorkTimeline';
 export type { WorkTimelineProps } from './WorkTimeline';
+
+export { GrowthChart, buildGrowthTimeSeries, buildSmoothPath, formatLocAxis, formatLocDelta, computeAxisTicks } from './GrowthChart';
+export type { GrowthPoint, SessionBoundary } from './GrowthChart';
+
+export { DirectoryHeatmap } from './DirectoryHeatmap';
+
 export type {
   Session,
   ChildSessionSummary,