argent-grid 0.1.0 → 0.3.0

package/src/lib/rendering/render/lines.ts

@@ -4,7 +4,7 @@
  * Draws grid lines (borders) efficiently.
  */
 
-import { Column, IRowNode } from '../../types/ag-grid-types';
+import { Column, GridApi } from '../../types/ag-grid-types';
 import { GridTheme, Rectangle } from './types';
 
 // ============================================================================
@@ -22,9 +22,14 @@ export function drawCrispLine(
   y2: number
 ): void {
   ctx.beginPath();
-  // Add 0.5 to pixel coordinates for crisp 1px lines
-  ctx.moveTo(Math.floor(x1) + 0.5, Math.floor(y1) + 0.5);
-  ctx.lineTo(Math.floor(x2) + 0.5, Math.floor(y2) + 0.5);
+  // For 1px lines, we want the center of the line to be at X.5
+  const snapX1 = Math.floor(x1) + 0.5;
+  const snapY1 = Math.floor(y1) + 0.5;
+  const snapX2 = Math.floor(x2) + 0.5;
+  const snapY2 = Math.floor(y2) + 0.5;
+
+  ctx.moveTo(snapX1, snapY1);
+  ctx.lineTo(snapX2, snapY2);
   ctx.stroke();
 }
 
@@ -66,7 +71,8 @@ export function drawRowLines(
   rowHeight: number,
   scrollTop: number,
   viewportWidth: number,
-  theme: GridTheme
+  theme: GridTheme,
+  api?: GridApi
 ): void {
   ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
   ctx.lineWidth = 1;
@@ -74,9 +80,12 @@ export function drawRowLines(
   ctx.beginPath();
 
   for (let row = startRow; row <= endRow; row++) {
-    const y = Math.floor(row * rowHeight - scrollTop) + 0.5;
-    ctx.moveTo(0, y);
-    ctx.lineTo(viewportWidth, y);
+    const y = Math.floor(api ? api.getRowY(row) - scrollTop : row * rowHeight - scrollTop);
+    // Draw border at the bottom of the row (y-0.5) to match DOM border-bottom
+    const borderY = y - 0.5;
+    if (borderY < 0) continue; // Skip top border if it's outside
+    ctx.moveTo(0, borderY);
+    ctx.lineTo(viewportWidth, borderY);
   }
 
   ctx.stroke();
@@ -97,7 +106,9 @@ export function drawColumnLines(
   theme: GridTheme,
   startRow: number = 0,
   endRow: number = 0,
-  rowHeight: number = 32
+  rowHeight: number = 32,
+  api?: GridApi,
+  availableWidth?: number
 ): void {
   ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
   ctx.lineWidth = 1;
@@ -107,17 +118,20 @@ export function drawColumnLines(
     scrollX,
     viewportWidth,
     leftPinnedWidth,
-    rightPinnedWidth
+    rightPinnedWidth,
+    availableWidth
   );
 
   // Calculate Y range for drawing
-  const drawY1 = Math.max(0, Math.floor(startRow * rowHeight - scrollTop));
-  const drawY2 = Math.min(viewportHeight, Math.floor(endRow * rowHeight - scrollTop));
+  const drawY1 = Math.floor(
+    api ? api.getRowY(startRow) - scrollTop : startRow * rowHeight - scrollTop
+  );
+  const drawY2 = Math.floor(api ? api.getRowY(endRow) - scrollTop : endRow * rowHeight - scrollTop);
 
   ctx.beginPath();
 
   for (const x of columnPositions) {
-    const borderX = Math.floor(x) + 0.5;
+    const borderX = Math.floor(x) - 0.5;
     ctx.moveTo(borderX, drawY1);
     ctx.lineTo(borderX, drawY2);
   }
@@ -133,35 +147,39 @@ export function getColumnBorderPositions(
   scrollX: number,
   viewportWidth: number,
   leftPinnedWidth: number,
-  rightPinnedWidth: number
+  rightPinnedWidth: number,
+  availableWidth?: number
 ): number[] {
   const positions: number[] = [];
 
-  const leftPinned = columns.filter(c => c.pinned === 'left');
-  const rightPinned = columns.filter(c => c.pinned === 'right');
-  const centerColumns = columns.filter(c => !c.pinned);
+  const leftPinned = columns.filter((c) => c.pinned === 'left');
+  const rightPinned = columns.filter((c) => c.pinned === 'right');
+  const centerColumns = columns.filter((c) => !c.pinned);
+
+  const effectiveWidth = availableWidth ?? viewportWidth;
 
   // Left pinned column borders
   let x = 0;
   for (const col of leftPinned) {
-    x += col.width;
+    x += Math.floor(col.width);
     positions.push(x);
   }
 
   // Center column borders
-  x = leftPinnedWidth - scrollX;
+  x = Math.floor(leftPinnedWidth) - scrollX;
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
   for (const col of centerColumns) {
-    x += col.width;
-    // Only include if visible
-    if (x > leftPinnedWidth && x < viewportWidth - rightPinnedWidth) {
+    x += Math.floor(col.width);
+    // Only include if visible in the center area
+    if (x > leftPinnedWidth && x < centerEndX) {
       positions.push(x);
     }
   }
 
   // Right pinned column borders
-  x = viewportWidth - rightPinnedWidth;
+  x = centerEndX;
   for (const col of rightPinned) {
-    x += col.width;
+    x += Math.floor(col.width);
     positions.push(x);
   }
 
@@ -183,10 +201,11 @@ export function drawGridLines(
   viewportHeight: number,
   leftPinnedWidth: number,
   rightPinnedWidth: number,
-  theme: GridTheme
+  theme: GridTheme,
+  api?: GridApi
 ): void {
   // Draw horizontal lines
-  drawRowLines(ctx, startRow, endRow, rowHeight, scrollTop, viewportWidth, theme);
+  drawRowLines(ctx, startRow, endRow, rowHeight, scrollTop, viewportWidth, theme, api);
 
   // Draw vertical lines
   drawColumnLines(
@@ -201,7 +220,8 @@ export function drawGridLines(
     theme,
     startRow,
     endRow,
-    rowHeight
+    rowHeight,
+    api
   );
 }
 
@@ -261,11 +281,7 @@ export function drawRangeSelectionBorder(
     lineWidth?: number;
   } = {}
 ): void {
-  const {
-    color = '#1976d2',
-    fillColor = 'rgba(25, 118, 210, 0.1)',
-    lineWidth = 1
-  } = options;
+  const { color = '#1976d2', fillColor = 'rgba(25, 118, 210, 0.1)', lineWidth = 1 } = options;
 
   // Draw fill
   if (fillColor) {
@@ -304,7 +320,7 @@ export function drawPinnedRegionBorders(
   // Left pinned border
   if (leftPinnedWidth > 0) {
     ctx.beginPath();
-    const x = Math.floor(leftPinnedWidth) + 0.5;
+    const x = Math.floor(leftPinnedWidth) - 0.5;
     ctx.moveTo(x, 0);
     ctx.lineTo(x, viewportHeight);
     ctx.stroke();
@@ -313,7 +329,7 @@ export function drawPinnedRegionBorders(
   // Right pinned border
   if (rightPinnedWidth > 0) {
     ctx.beginPath();
-    const x = Math.floor(viewportWidth - rightPinnedWidth) + 0.5;
+    const x = Math.floor(viewportWidth - rightPinnedWidth) - 0.5;
     ctx.moveTo(x, 0);
     ctx.lineTo(x, viewportHeight);
     ctx.stroke();
@@ -332,12 +348,7 @@ export function drawPinnedRegionShadows(
 ): void {
   // Left shadow (on the right edge of left pinned)
   if (leftPinnedWidth > 0) {
-    const gradient = ctx.createLinearGradient(
-      leftPinnedWidth,
-      0,
-      leftPinnedWidth + 4,
-      0
-    );
+    const gradient = ctx.createLinearGradient(leftPinnedWidth, 0, leftPinnedWidth + 4, 0);
     gradient.addColorStop(0, 'rgba(0, 0, 0, 0.1)');
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
 
@@ -348,16 +359,11 @@ export function drawPinnedRegionShadows(
   // Right shadow (on the left edge of right pinned)
   if (rightPinnedWidth > 0) {
     const shadowX = viewportWidth - rightPinnedWidth;
-    const gradient = ctx.createLinearGradient(
-      shadowX - 4,
-      0,
-      shadowX,
-      0
-    );
+    const gradient = ctx.createLinearGradient(shadowX - 4, 0, shadowX, 0);
     gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0.1)');
 
     ctx.fillStyle = gradient;
     ctx.fillRect(shadowX - 4, 0, 4, viewportHeight);
   }
-}
+}

package/src/lib/rendering/render/primitives.ts

@@ -0,0 +1,423 @@
+/**
+ * Rendering Primitives for Canvas Renderer
+ *
+ * Provides specialized drawing functions for grid UI elements:
+ * - Checkboxes
+ * - Group indicators (expand/collapse)
+ * - Sparklines
+ */
+
+import {
+  BadgeOptions,
+  ButtonOptions,
+  ProgressOptions,
+  RatingOptions,
+  SparklineOptions,
+} from '../../types/ag-grid-types';
+import { GridTheme } from './types';
+
+/**
+ * Draw a grid checkbox
+ */
+export function drawCheckbox(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  size: number,
+  checked: boolean,
+  theme: GridTheme
+): void {
+  // Draw checkbox border - Use a more obvious color than the standard grid border
+  ctx.strokeStyle = '#94a3b8'; // Slate-400 for better visibility
+  ctx.lineWidth = 1.5;
+  ctx.strokeRect(Math.floor(x) + 0.5, Math.floor(y) + 0.5, size, size);
+
+  // Draw checkmark if checked
+  if (checked) {
+    // Fill background when checked for even better visibility
+    ctx.fillStyle = '#3b82f6'; // Blue-500
+    ctx.fillRect(Math.floor(x) + 0.5, Math.floor(y) + 0.5, size, size);
+
+    ctx.strokeStyle = '#ffffff'; // White checkmark on blue background
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    const padding = 3;
+    const checkX = x + padding;
+    const checkY = y + size / 2;
+    const checkWidth = size - padding * 2;
+
+    // Draw checkmark
+    ctx.moveTo(checkX, checkY);
+    ctx.lineTo(checkX + checkWidth / 3, checkY + checkWidth / 3);
+    ctx.lineTo(checkX + checkWidth, checkY - checkWidth / 3);
+    ctx.stroke();
+  }
+}
+
+/**
+ * Draw a group expand/collapse indicator
+ */
+export function drawGroupIndicator(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  rowHeight: number,
+  expanded: boolean,
+  theme: GridTheme
+): void {
+  ctx.beginPath();
+  ctx.strokeStyle = theme.textCell;
+  ctx.lineWidth = 1;
+  const centerY = Math.floor(y + rowHeight / 2);
+  const size = theme.groupIndicatorSize;
+
+  if (expanded) {
+    // Expanded: horizontal line
+    ctx.moveTo(Math.floor(x), centerY);
+    ctx.lineTo(Math.floor(x + size), centerY);
+  } else {
+    // Collapsed: plus sign
+    const halfSize = size / 2;
+    ctx.moveTo(Math.floor(x), centerY);
+    ctx.lineTo(Math.floor(x + size), centerY);
+    ctx.moveTo(Math.floor(x + halfSize), centerY - halfSize);
+    ctx.lineTo(Math.floor(x + halfSize), centerY + halfSize);
+  }
+  ctx.stroke();
+}
+
+/**
+ * Draw a button within a cell.
+ * Returns the bounding box so callers can perform hit-testing.
+ */
+export function drawButton<TData = any>(
+  ctx: CanvasRenderingContext2D,
+  label: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: ButtonOptions<TData> = { label }
+): { bx: number; by: number; bw: number; bh: number } {
+  const variant = options.variant ?? 'primary';
+  const borderRadius = options.borderRadius ?? 4;
+  const paddingX = options.paddingX ?? 12;
+  const fontSize = options.fontSize ?? 12;
+
+  // Variant colour defaults
+  const VARIANTS: Record<string, { fill: string; text: string; border?: string }> = {
+    primary: { fill: '#3b82f6', text: '#ffffff' },
+    secondary: { fill: '#f3f4f6', text: '#374151', border: '#9ca3af' },
+    danger: { fill: '#ef4444', text: '#ffffff' },
+    ghost: { fill: '#f9fafb', text: '#6b7280', border: '#d1d5db' },
+  };
+  const defaults = VARIANTS[variant] ?? VARIANTS.primary;
+  const fillColor = options.fill ?? defaults.fill;
+  const textColor = options.textColor ?? defaults.text;
+  const borderColor = options.borderColor ?? defaults.border;
+
+  ctx.save();
+  ctx.font = `500 ${fontSize}px sans-serif`;
+  const textW = ctx.measureText(label).width;
+  const bw = Math.min(textW + paddingX * 2, width - 8);
+  const bh = fontSize + 10;
+  const bx = Math.floor(x + (width - bw) / 2);
+  const by = Math.floor(y + (height - bh) / 2);
+
+  // Background
+  if (fillColor && fillColor !== 'transparent') {
+    ctx.fillStyle = fillColor;
+    ctx.beginPath();
+    ctx.roundRect(bx, by, bw, bh, borderRadius);
+    ctx.fill();
+  }
+
+  // Border (secondary / ghost)
+  if (borderColor) {
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.roundRect(bx + 0.5, by + 0.5, bw - 1, bh - 1, borderRadius);
+    ctx.stroke();
+  }
+
+  // Label
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+  ctx.fillText(label, bx + bw / 2, by + bh / 2);
+
+  ctx.restore();
+  return { bx, by, bw, bh };
+}
+
+/**
+ * Draw a badge/pill within a cell
+ */
+export function drawBadge(
+  ctx: CanvasRenderingContext2D,
+  value: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: BadgeOptions = {}
+): void {
+  const colorMap = options.colorMap ?? {};
+  const defaultColors = options.defaultColors ?? { fill: '#f3f4f6', text: '#6b7280' };
+  const { fill: bgColor, text: textColor } = colorMap[value] ?? defaultColors;
+  const borderRadius = options.borderRadius ?? 9999;
+  const paddingX = options.paddingX ?? 8;
+  const fontSize = options.fontSize ?? 11;
+
+  ctx.save();
+  ctx.font = `500 ${fontSize}px sans-serif`;
+  const textWidth = ctx.measureText(value).width;
+  const badgeWidth = textWidth + paddingX * 2;
+  const badgeHeight = fontSize + 8;
+  const bx = Math.floor(x + (width - badgeWidth) / 2);
+  const by = Math.floor(y + (height - badgeHeight) / 2);
+
+  // Draw background pill
+  ctx.fillStyle = bgColor;
+  ctx.beginPath();
+  ctx.roundRect(bx, by, badgeWidth, badgeHeight, Math.min(borderRadius, badgeHeight / 2));
+  ctx.fill();
+
+  // Draw text
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+  ctx.fillText(value, bx + badgeWidth / 2, by + badgeHeight / 2);
+
+  ctx.restore();
+}
+
+/**
+ * Draw a progress bar within a cell
+ */
+export function drawProgressBar(
+  ctx: CanvasRenderingContext2D,
+  value: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: ProgressOptions = {}
+): void {
+  const min = options.min ?? 0;
+  const max = options.max ?? 100;
+  const barHeight = options.barHeight ?? 8;
+  const borderRadius = options.borderRadius ?? 4;
+  const trackColor = options.trackColor ?? '#e5e7eb';
+  const showLabel = options.showLabel !== false;
+
+  const pct = Math.min(1, Math.max(0, (value - min) / (max - min)));
+
+  // Layout: bar + optional label
+  const labelWidth = showLabel ? 40 : 0;
+  const labelGap = showLabel ? 8 : 0;
+  const trackWidth = width - labelWidth - labelGap - 8; // 8px left padding
+  const trackX = x + 4;
+  const trackY = Math.floor(y + (height - barHeight) / 2);
+
+  ctx.save();
+
+  // Draw track
+  ctx.fillStyle = trackColor;
+  ctx.beginPath();
+  ctx.roundRect(trackX, trackY, trackWidth, barHeight, borderRadius);
+  ctx.fill();
+
+  // Resolve fill color
+  let fillColor: string;
+  if (typeof options.fill === 'function') {
+    fillColor = options.fill(value);
+  } else if (options.fill) {
+    fillColor = options.fill;
+  } else {
+    // Default traffic-light coloring
+    fillColor = pct >= 0.8 ? '#22c55e' : pct >= 0.6 ? '#eab308' : '#ef4444';
+  }
+
+  // Draw filled portion
+  if (pct > 0) {
+    ctx.fillStyle = fillColor;
+    ctx.beginPath();
+    ctx.roundRect(
+      trackX,
+      trackY,
+      Math.max(borderRadius * 2, trackWidth * pct),
+      barHeight,
+      borderRadius
+    );
+    ctx.fill();
+  }
+
+  // Draw label
+  if (showLabel) {
+    const label = options.labelFormatter ? options.labelFormatter(value) : `${value}%`;
+    ctx.fillStyle = fillColor;
+    ctx.font = 'bold 11px sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    ctx.fillText(label, trackX + trackWidth + labelGap, y + height / 2);
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Draw a rating (stars) within a cell
+ */
+export function drawRating(
+  ctx: CanvasRenderingContext2D,
+  value: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: RatingOptions = {}
+): void {
+  const max = options.max ?? 5;
+  const size = options.size ?? 14;
+  const color = options.color ?? '#ffb400';
+  const emptyColor = options.emptyColor ?? '#e5e7eb';
+  const gap = 2;
+
+  const totalWidth = max * size + (max - 1) * gap;
+  const startX = x + (width - totalWidth) / 2;
+  const centerY = y + height / 2;
+
+  ctx.save();
+
+  for (let i = 0; i < max; i++) {
+    const starX = startX + i * (size + gap);
+    const isFilled = i < Math.round(value);
+
+    ctx.fillStyle = isFilled ? color : emptyColor;
+    drawStar(ctx, starX + size / 2, centerY, 5, size / 2, size / 4);
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Helper to draw a star shape
+ */
+function drawStar(
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  spikes: number,
+  outerRadius: number,
+  innerRadius: number
+): void {
+  let rot = (Math.PI / 2) * 3;
+  let x = cx;
+  let y = cy;
+  const step = Math.PI / spikes;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - outerRadius);
+
+  for (let i = 0; i < spikes; i++) {
+    x = cx + Math.cos(rot) * outerRadius;
+    y = cy + Math.sin(rot) * outerRadius;
+    ctx.lineTo(x, y);
+    rot += step;
+
+    x = cx + Math.cos(rot) * innerRadius;
+    y = cy + Math.sin(rot) * innerRadius;
+    ctx.lineTo(x, y);
+    rot += step;
+  }
+
+  ctx.lineTo(cx, cy - outerRadius);
+  ctx.closePath();
+}
+
+/**
+ * Draw a sparkline within a cell
+ */
+export function drawSparkline(
+  ctx: CanvasRenderingContext2D,
+  data: any[],
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: SparklineOptions
+): void {
+  if (!Array.isArray(data) || data.length === 0) return;
+
+  const padding = options.padding || { top: 4, bottom: 4, left: 4, right: 4 };
+  const drawX = x + (padding.left || 0);
+  const drawY = y + (padding.top || 0);
+  const drawWidth = width - (padding.left || 0) - (padding.right || 0);
+  const drawHeight = height - (padding.top || 0) - (padding.bottom || 0);
+
+  if (drawWidth <= 0 || drawHeight <= 0) return;
+
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+
+  const type = options.type || 'line';
+
+  ctx.save();
+
+  if (type === 'line' || type === 'area') {
+    ctx.beginPath();
+    for (let i = 0; i < data.length; i++) {
+      const px = drawX + (i / (data.length - 1)) * drawWidth;
+      const py = drawY + drawHeight - ((data[i] - min) / range) * drawHeight;
+
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+
+    if (type === 'area') {
+      const areaOptions = options.area || {};
+      ctx.lineTo(drawX + drawWidth, drawY + drawHeight);
+      ctx.lineTo(drawX, drawY + drawHeight);
+      ctx.closePath();
+      ctx.fillStyle = areaOptions.fill || 'rgba(33, 150, 243, 0.3)';
+      ctx.fill();
+
+      // Stroke the top line
+      ctx.beginPath();
+      for (let i = 0; i < data.length; i++) {
+        const px = drawX + (i / (data.length - 1)) * drawWidth;
+        const py = drawY + drawHeight - ((data[i] - min) / range) * drawHeight;
+        if (i === 0) ctx.moveTo(px, py);
+        else ctx.lineTo(px, py);
+      }
+    }
+
+    const lineOptions = (type === 'area' ? options.area : options.line) || {};
+    ctx.strokeStyle = lineOptions.stroke || '#2196f3';
+    ctx.lineWidth = lineOptions.strokeWidth || 1.5;
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.stroke();
+  } else if (type === 'column' || type === 'bar') {
+    const colOptions = (type === 'bar' ? options.bar || options.column : options.column) || {};
+    const colPadding = colOptions.padding || 0.1;
+    const colWidth = drawWidth / data.length;
+    const barWidth = colWidth * (1 - colPadding);
+
+    ctx.fillStyle = colOptions.fill || '#2196f3';
+
+    for (let i = 0; i < data.length; i++) {
+      const px = drawX + i * colWidth + (colWidth * colPadding) / 2;
+      const valHeight = ((data[i] - min) / range) * drawHeight;
+      const py = drawY + drawHeight - valHeight;
+
+      ctx.fillRect(Math.floor(px), Math.floor(py), Math.floor(barWidth), Math.ceil(valHeight));
+    }
+  }
+
+  ctx.restore();
+}

package/src/lib/rendering/render/theme.spec.ts

@@ -5,17 +5,17 @@
  */
 
 import {
-  DEFAULT_THEME,
+  createTheme,
   DARK_THEME,
-  THEME_PRESETS,
-  mergeTheme,
+  DEFAULT_THEME,
+  getCellBackgroundColor,
   getFontFromTheme,
   getRowTheme,
-  getCellBackgroundColor,
   getThemePreset,
-  createTheme,
+  mergeTheme,
+  THEME_PRESETS,
 } from './theme';
-import { GridTheme, PartialTheme } from './types';
+import { GridTheme } from './types';
 
 describe('Theme System', () => {
   describe('DEFAULT_THEME', () => {
@@ -86,11 +86,7 @@ describe('Theme System', () => {
     });
 
     it('should apply multiple overrides in order', () => {
-      const result = mergeTheme(
-        DEFAULT_THEME,
-        { bgCell: '#ff0000' },
-        { bgCell: '#00ff00' }
-      );
+      const result = mergeTheme(DEFAULT_THEME, { bgCell: '#ff0000' }, { bgCell: '#00ff00' });
 
       expect(result.bgCell).toBe('#00ff00');
     });
@@ -279,4 +275,4 @@ describe('Theme System', () => {
       expect(comfortableFull.fontSize).toBeGreaterThan(DEFAULT_THEME.fontSize);
     });
   });
-});
+});