@opendata-ai/openchart-vanilla 6.4.1 → 6.5.0

package/src/__tests__/table-mount.test.ts

@@ -199,7 +199,7 @@ describe('createTable', () => {
       const spec = makeSpec({ search: true });
       const table = createTable(container, spec);
 
-      const input = container.querySelector('.viz-table-search input') as HTMLInputElement;
+      const input = container.querySelector('.oc-table-search input') as HTMLInputElement;
       expect(input).not.toBeNull();
 
       // Type in a search query
@@ -223,7 +223,7 @@ describe('createTable', () => {
     const table = createTable(container, paginatedSpec);
 
     // Should show page 1 of 5 (10 per page, 50 total)
-    const info = container.querySelector('.viz-table-pagination-info');
+    const info = container.querySelector('.oc-table-pagination-info');
     expect(info?.textContent).toContain('Showing 1-10 of 50');
 
     const rows = container.querySelectorAll('tbody tr');
@@ -234,7 +234,7 @@ describe('createTable', () => {
     expect(nextBtn).not.toBeNull();
     nextBtn.dispatchEvent(new Event('click', { bubbles: true }));
 
-    const infoAfter = container.querySelector('.viz-table-pagination-info');
+    const infoAfter = container.querySelector('.oc-table-pagination-info');
     expect(infoAfter?.textContent).toContain('Showing 11-20 of 50');
 
     // Previous button should be enabled
@@ -248,7 +248,7 @@ describe('createTable', () => {
     const table = createTable(container, stickySpec);
 
     const tableEl = container.querySelector('table');
-    expect(tableEl?.classList.contains('viz-table--sticky')).toBe(true);
+    expect(tableEl?.classList.contains('oc-table--sticky')).toBe(true);
 
     table.destroy();
   });
@@ -272,7 +272,7 @@ describe('createTable', () => {
     const table = createTable(container, sparklineSpec);
 
     // Sparkline cells should be rendered with the sparkline class
-    const sparklineCells = container.querySelectorAll('.viz-table-sparkline');
+    const sparklineCells = container.querySelectorAll('.oc-table-sparkline');
     expect(sparklineCells.length).toBeGreaterThan(0);
 
     const svg = sparklineCells[0]?.querySelector('svg');
@@ -288,11 +288,11 @@ describe('createTable', () => {
   it('bar cells have proportional fill div', () => {
     const table = createTable(container, barSpec);
 
-    const barFills = container.querySelectorAll('.viz-table-bar-fill');
+    const barFills = container.querySelectorAll('.oc-table-bar-fill');
     expect(barFills.length).toBe(3);
 
     // The bar values should have width proportional to their data
-    const barValues = container.querySelectorAll('.viz-table-bar-value');
+    const barValues = container.querySelectorAll('.oc-table-bar-value');
     expect(barValues.length).toBe(3);
 
     table.destroy();
@@ -331,14 +331,14 @@ describe('createTable', () => {
       const table = createTable(container, spec);
 
       // Search for something that doesn't match any data
-      const input = container.querySelector('.viz-table-search input') as HTMLInputElement;
+      const input = container.querySelector('.oc-table-search input') as HTMLInputElement;
       input.value = 'zzzznonexistent';
       input.dispatchEvent(new Event('input', { bubbles: true }));
 
       // Advance past the 200ms debounce
       vi.advanceTimersByTime(200);
 
-      const empty = container.querySelector('.viz-table-empty');
+      const empty = container.querySelector('.oc-table-empty');
       expect(empty).not.toBeNull();
       expect(empty?.textContent).toBe('No results found');
 
@@ -421,21 +421,21 @@ describe('createTable', () => {
     table.destroy();
   });
 
-  it('compact mode applies viz-table--compact class', () => {
+  it('compact mode applies oc-table--compact class', () => {
     const spec = makeSpec({ compact: true });
     const table = createTable(container, spec);
 
-    const wrapper = container.querySelector('.viz-table-wrapper');
-    expect(wrapper?.classList.contains('viz-table--compact')).toBe(true);
+    const wrapper = container.querySelector('.oc-table-wrapper');
+    expect(wrapper?.classList.contains('oc-table--compact')).toBe(true);
 
     table.destroy();
   });
 
-  it('dark mode applies viz-dark class', () => {
+  it('dark mode applies oc-dark class', () => {
     const spec = makeSpec();
     const table = createTable(container, spec, { darkMode: 'force' });
 
-    expect(container.classList.contains('viz-dark')).toBe(true);
+    expect(container.classList.contains('oc-dark')).toBe(true);
 
     table.destroy();
   });
@@ -445,8 +445,8 @@ describe('createTable', () => {
     const spec = makeSpec();
     const table = createTable(container, spec, { onRowClick: onClick });
 
-    const wrapper = container.querySelector('.viz-table-wrapper');
-    expect(wrapper?.classList.contains('viz-table--clickable')).toBe(true);
+    const wrapper = container.querySelector('.oc-table-wrapper');
+    expect(wrapper?.classList.contains('oc-table--clickable')).toBe(true);
 
     // Click first row
     const firstRow = container.querySelector('tbody tr');
@@ -462,7 +462,7 @@ describe('createTable', () => {
     const spec = makeSpec();
     const table = createTable(container, spec);
 
-    const title = container.querySelector('.viz-table-title');
+    const title = container.querySelector('.oc-table-title');
     expect(title).not.toBeNull();
     expect(title?.textContent).toBe('People');
 
@@ -481,4 +481,125 @@ describe('createTable', () => {
 
     table.destroy();
   });
+
+  // -------------------------------------------------------------------------
+  // Animation lifecycle
+  // -------------------------------------------------------------------------
+
+  describe('animation', () => {
+    it('adds oc-animate class on first render when animation is enabled', () => {
+      const spec = makeSpec({ animation: true });
+      const table = createTable(container, spec);
+
+      const wrapper = container.querySelector('.oc-table-wrapper');
+      expect(wrapper?.classList.contains('oc-animate')).toBe(true);
+
+      table.destroy();
+    });
+
+    it('does not add oc-animate when animation is not set', () => {
+      const table = createTable(container, makeSpec());
+
+      const wrapper = container.querySelector('.oc-table-wrapper');
+      expect(wrapper?.classList.contains('oc-animate')).toBe(false);
+
+      table.destroy();
+    });
+
+    it('sets --oc-animation-duration CSS custom property', () => {
+      const spec = makeSpec({ animation: { enter: { duration: 800 } } });
+      const table = createTable(container, spec);
+
+      const wrapper = container.querySelector('.oc-table-wrapper') as HTMLElement;
+      expect(wrapper.style.getPropertyValue('--oc-animation-duration')).toBe('800ms');
+
+      table.destroy();
+    });
+
+    it('sets --oc-animation-stagger CSS custom property', () => {
+      const spec = makeSpec({ animation: true });
+      const table = createTable(container, spec);
+
+      const wrapper = container.querySelector('.oc-table-wrapper') as HTMLElement;
+      const stagger = wrapper.style.getPropertyValue('--oc-animation-stagger');
+      expect(stagger).toMatch(/^\d+ms$/);
+
+      table.destroy();
+    });
+
+    it('stamps --oc-row-index on each tbody tr', () => {
+      const spec = makeSpec({ animation: true });
+      const table = createTable(container, spec);
+
+      const rows = container.querySelectorAll('tbody tr');
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as HTMLElement;
+        expect(row.style.getPropertyValue('--oc-row-index')).toBe(String(i));
+      }
+
+      table.destroy();
+    });
+
+    it('does not re-animate on sort (only first render)', () => {
+      const spec = makeSpec({ animation: true });
+      const table = createTable(container, spec);
+
+      // Trigger sort via click
+      const sortBtn = container.querySelector('[data-sort-column]');
+      if (sortBtn) {
+        sortBtn.dispatchEvent(new Event('click', { bubbles: true }));
+      }
+
+      const wrapper = container.querySelector('.oc-table-wrapper');
+      expect(wrapper?.classList.contains('oc-animate')).toBe(false);
+
+      table.destroy();
+    });
+
+    it('does not re-animate on update()', () => {
+      const spec = makeSpec({ animation: true });
+      const table = createTable(container, spec);
+
+      table.update(makeSpec({ animation: true }));
+
+      const wrapper = container.querySelector('.oc-table-wrapper');
+      expect(wrapper?.classList.contains('oc-animate')).toBe(false);
+
+      table.destroy();
+    });
+
+    it('removes oc-animate after cleanup timeout', () => {
+      vi.useFakeTimers();
+      try {
+        const spec = makeSpec({ animation: true });
+        const table = createTable(container, spec);
+
+        const wrapper = container.querySelector('.oc-table-wrapper');
+        expect(wrapper?.classList.contains('oc-animate')).toBe(true);
+
+        // Advance past total animation time
+        vi.advanceTimersByTime(5000);
+
+        expect(wrapper?.classList.contains('oc-animate')).toBe(false);
+
+        table.destroy();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('destroy cancels animation cleanup without error', () => {
+      vi.useFakeTimers();
+      try {
+        const spec = makeSpec({ animation: true });
+        const table = createTable(container, spec);
+        table.destroy();
+
+        // Should not throw after timer fires
+        vi.advanceTimersByTime(5000);
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
 });

package/src/__tests__/tooltip.test.ts

@@ -56,7 +56,7 @@ describe('createTooltipManager lifecycle', () => {
     const container = createContainer();
     createTooltipManager(container);
 
-    const tooltip = container.querySelector('.viz-tooltip');
+    const tooltip = container.querySelector('.oc-tooltip');
     expect(tooltip).not.toBeNull();
     expect(tooltip!.getAttribute('role')).toBe('tooltip');
   });
@@ -67,7 +67,7 @@ describe('createTooltipManager lifecycle', () => {
 
     manager.show({ title: 'Point A', fields: [{ label: 'Value', value: '42' }] }, 100, 100);
 
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.style.display).toBe('block');
   });
 
@@ -87,7 +87,7 @@ describe('createTooltipManager lifecycle', () => {
       100,
     );
 
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.innerHTML).toContain('2021-Q1');
     expect(tooltip.innerHTML).toContain('Revenue');
     expect(tooltip.innerHTML).toContain('$1.2M');
@@ -108,7 +108,7 @@ describe('createTooltipManager lifecycle', () => {
       50,
     );
 
-    const dot = container.querySelector('.viz-tooltip-dot') as HTMLElement;
+    const dot = container.querySelector('.oc-tooltip-dot') as HTMLElement;
     expect(dot).not.toBeNull();
     expect(dot.style.background).toBe('#ff0000');
   });
@@ -120,7 +120,7 @@ describe('createTooltipManager lifecycle', () => {
     manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 100);
     manager.hide();
 
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.style.display).toBe('none');
   });
 
@@ -129,11 +129,11 @@ describe('createTooltipManager lifecycle', () => {
     const manager = createTooltipManager(container);
 
     // Verify it exists
-    expect(container.querySelector('.viz-tooltip')).not.toBeNull();
+    expect(container.querySelector('.oc-tooltip')).not.toBeNull();
 
     manager.destroy();
 
-    expect(container.querySelector('.viz-tooltip')).toBeNull();
+    expect(container.querySelector('.oc-tooltip')).toBeNull();
   });
 
   it('show() updates content when called again', () => {
@@ -142,12 +142,12 @@ describe('createTooltipManager lifecycle', () => {
 
     manager.show({ title: 'First', fields: [{ label: 'A', value: '1' }] }, 50, 50);
 
-    let tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    let tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.innerHTML).toContain('First');
 
     manager.show({ title: 'Second', fields: [{ label: 'B', value: '2' }] }, 100, 100);
 
-    tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.innerHTML).toContain('Second');
     // First content should be replaced
     expect(tooltip.innerHTML).not.toContain('First');
@@ -190,7 +190,7 @@ describe('tooltip positioning', () => {
     expect(rect.height).toBe(0);
 
     // Position should be applied from computePosition result
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     expect(tooltip.style.left).toContain('px');
     expect(tooltip.style.top).toContain('px');
 
@@ -239,7 +239,7 @@ describe('tooltip positioning', () => {
     });
     await flushPositioning();
 
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     const posAfterSecond = tooltip.style.left;
 
     // Now resolve the first (stale) - should be discarded
@@ -297,7 +297,7 @@ describe('tooltip content escaping', () => {
       50,
     );
 
-    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    const tooltip = container.querySelector('.oc-tooltip') as HTMLElement;
     // Should not contain raw HTML tags - the <script> should be escaped
     expect(tooltip.innerHTML).not.toContain('<script>');
     // Should contain escaped versions of angle brackets and ampersands

package/src/animation.ts

@@ -0,0 +1,75 @@
+/**
+ * Animation runtime for entrance animations.
+ *
+ * All animations are CSS-driven (keyframes + clip-path + transforms + opacity).
+ * This module handles lifecycle: cleanup after completion, cancellation on update.
+ * No WAAPI needed since clip-path handles line/area drawing.
+ */
+
+/**
+ * Cancel entrance animations and clean up.
+ * Called when update() is invoked during animation, or on destroy.
+ */
+export function cancelAnimations(svg: SVGElement | null): void {
+  if (svg) {
+    svg.classList.remove('oc-animate');
+  }
+}
+
+/**
+ * Set up animation cleanup that removes oc-animate after all animations complete.
+ *
+ * Uses the computed total animation time (duration + stagger * elementCount + annotation delay)
+ * rather than animationend events, because animationend fires per-element and the first
+ * element to finish would prematurely kill staggered animations still in progress.
+ */
+export function setupAnimationCleanup(svg: SVGElement): () => void {
+  // Read the animation timing from the CSS custom properties set by the renderer
+  const style = svg.style;
+  const duration = parseFloat(style.getPropertyValue('--oc-animation-duration')) || 600;
+  const stagger = parseFloat(style.getPropertyValue('--oc-animation-stagger')) || 0;
+  const annotationDelay = parseFloat(style.getPropertyValue('--oc-annotation-delay')) || 200;
+
+  // Count animated elements to compute total stagger span
+  const animatedElements = svg.querySelectorAll('[data-animation-index]').length;
+  const totalStagger = stagger * Math.max(0, animatedElements - 1);
+
+  // Total time: last element's stagger delay + its duration + annotation delay + buffer
+  const totalTime = totalStagger + duration + annotationDelay + 500;
+
+  const timer = setTimeout(() => {
+    svg.classList.remove('oc-animate');
+  }, totalTime);
+
+  return () => {
+    clearTimeout(timer);
+    cancelAnimations(svg);
+  };
+}
+
+/**
+ * Set up animation cleanup for table entrance animations.
+ *
+ * Same timeout-based approach as chart animations: compute total time from
+ * CSS custom properties and row count, then remove oc-animate after completion.
+ */
+export function setupTableAnimationCleanup(wrapper: HTMLElement): () => void {
+  const style = wrapper.style;
+  const duration = parseFloat(style.getPropertyValue('--oc-animation-duration')) || 500;
+  const stagger = parseFloat(style.getPropertyValue('--oc-animation-stagger')) || 0;
+
+  const rows = wrapper.querySelectorAll('tbody tr').length;
+  const totalStagger = stagger * Math.max(0, rows - 1);
+
+  // Total: last row stagger + duration + buffer
+  const totalTime = totalStagger + duration + 300;
+
+  const timer = setTimeout(() => {
+    wrapper.classList.remove('oc-animate');
+  }, totalTime);
+
+  return () => {
+    clearTimeout(timer);
+    wrapper.classList.remove('oc-animate');
+  };
+}

package/src/graph/__tests__/graph-mount.test.ts

@@ -91,30 +91,30 @@ describe('createGraph', () => {
     const graph = createGraph(container, basicSpec);
 
     // Wrapper
-    const wrapper = container.querySelector('.viz-graph-wrapper');
+    const wrapper = container.querySelector('.oc-graph-wrapper');
     expect(wrapper).not.toBeNull();
 
     // Canvas
-    const canvas = container.querySelector('.viz-graph-canvas');
+    const canvas = container.querySelector('.oc-graph-canvas');
     expect(canvas).not.toBeNull();
     expect(canvas?.tagName.toLowerCase()).toBe('canvas');
 
     // Chrome
-    const chrome = container.querySelector('.viz-graph-chrome');
+    const chrome = container.querySelector('.oc-graph-chrome');
     expect(chrome).not.toBeNull();
 
     // Title
-    const title = container.querySelector('.viz-title');
+    const title = container.querySelector('.oc-title');
     expect(title).not.toBeNull();
     expect(title?.textContent).toBe('Test Graph');
 
     // Subtitle
-    const subtitle = container.querySelector('.viz-subtitle');
+    const subtitle = container.querySelector('.oc-subtitle');
     expect(subtitle).not.toBeNull();
     expect(subtitle?.textContent).toBe('A simple test graph');
 
     // Legend exists (even if hidden for non-community graphs)
-    const legend = container.querySelector('.viz-graph-legend');
+    const legend = container.querySelector('.oc-graph-legend');
     expect(legend).not.toBeNull();
 
     graph.destroy();
@@ -124,12 +124,12 @@ describe('createGraph', () => {
     container = makeContainer();
     const graph = createGraph(container, basicSpec);
 
-    expect(container.querySelector('.viz-graph-wrapper')).not.toBeNull();
+    expect(container.querySelector('.oc-graph-wrapper')).not.toBeNull();
 
     graph.destroy();
 
-    expect(container.querySelector('.viz-graph-wrapper')).toBeNull();
-    expect(container.querySelector('.viz-graph-canvas')).toBeNull();
+    expect(container.querySelector('.oc-graph-wrapper')).toBeNull();
+    expect(container.querySelector('.oc-graph-canvas')).toBeNull();
 
     // Calling destroy again should not throw
     expect(() => graph.destroy()).not.toThrow();
@@ -146,12 +146,12 @@ describe('createGraph', () => {
     container = makeContainer();
     const graph = createGraph(container, basicSpec);
 
-    const titleBefore = container.querySelector('.viz-title');
+    const titleBefore = container.querySelector('.oc-title');
     expect(titleBefore?.textContent).toBe('Test Graph');
 
     graph.update(communitySpec);
 
-    const titleAfter = container.querySelector('.viz-title');
+    const titleAfter = container.querySelector('.oc-title');
     expect(titleAfter?.textContent).toBe('Community Graph');
 
     graph.destroy();
@@ -161,10 +161,10 @@ describe('createGraph', () => {
     container = makeContainer();
     const graph = createGraph(container, communitySpec);
 
-    const legend = container.querySelector('.viz-graph-legend');
+    const legend = container.querySelector('.oc-graph-legend');
     expect(legend).not.toBeNull();
     // Community graph should have visible legend items
-    const items = container.querySelectorAll('.viz-graph-legend-item');
+    const items = container.querySelectorAll('.oc-graph-legend-item');
     expect(items.length).toBeGreaterThan(0);
 
     graph.destroy();
@@ -190,14 +190,14 @@ describe('createGraph', () => {
     graph.destroy();
   });
 
-  it('applies viz-dark class in dark mode', () => {
+  it('applies oc-dark class in dark mode', () => {
     container = makeContainer();
     const graph = createGraph(container, basicSpec, { darkMode: 'force' });
 
-    expect(container.classList.contains('viz-dark')).toBe(true);
+    expect(container.classList.contains('oc-dark')).toBe(true);
 
     graph.destroy();
-    expect(container.classList.contains('viz-dark')).toBe(false);
+    expect(container.classList.contains('oc-dark')).toBe(false);
   });
 
   it('onSelectionChange callback fires on selectNode', () => {

package/src/graph-mount.ts

@@ -264,35 +264,35 @@ export function createGraph(
 
     // Wrapper
     wrapper = document.createElement('div');
-    wrapper.className = isDark ? 'viz-graph-wrapper viz-dark' : 'viz-graph-wrapper';
+    wrapper.className = isDark ? 'oc-graph-wrapper oc-dark' : 'oc-graph-wrapper';
     if (isDark) {
-      container.classList.add('viz-dark');
+      container.classList.add('oc-dark');
     } else {
-      container.classList.remove('viz-dark');
+      container.classList.remove('oc-dark');
     }
 
     // Apply theme colors as CSS custom properties so chrome HTML picks them up.
     // Without this, consumer-supplied theme.colors.text only affects canvas-drawn
-    // labels but not the HTML title/subtitle which read from --viz-text.
+    // labels but not the HTML title/subtitle which read from --oc-text.
     const resolvedTheme = compilation.theme;
     if (resolvedTheme) {
       const s = wrapper.style;
-      s.setProperty('--viz-bg', resolvedTheme.colors.background);
-      s.setProperty('--viz-text', resolvedTheme.colors.text);
-      s.setProperty('--viz-text-secondary', resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
-      s.setProperty('--viz-font-family', resolvedTheme.fonts.family);
+      s.setProperty('--oc-bg', resolvedTheme.colors.background);
+      s.setProperty('--oc-text', resolvedTheme.colors.text);
+      s.setProperty('--oc-text-secondary', resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
+      s.setProperty('--oc-font-family', resolvedTheme.fonts.family);
       s.fontFamily = resolvedTheme.fonts.family;
     }
 
     // Chrome (title, subtitle)
     chromeEl = document.createElement('div');
-    chromeEl.className = 'viz-graph-chrome';
+    chromeEl.className = 'oc-graph-chrome';
     renderChrome();
     wrapper.appendChild(chromeEl);
 
     // Canvas
     canvas = document.createElement('canvas');
-    canvas.className = 'viz-graph-canvas';
+    canvas.className = 'oc-graph-canvas';
     canvas.setAttribute('role', 'img');
     if (compilation.a11y?.altText) {
       canvas.setAttribute('aria-label', compilation.a11y.altText);
@@ -302,7 +302,7 @@ export function createGraph(
     // Legend
     if (options?.legend !== false) {
       legendEl = document.createElement('div');
-      legendEl.className = 'viz-graph-legend';
+      legendEl.className = 'oc-graph-legend';
       renderLegend();
       wrapper.appendChild(legendEl);
     }
@@ -321,10 +321,10 @@ export function createGraph(
     let html = '';
 
     if (compilation.chrome.title) {
-      html += `<h2 class="viz-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
+      html += `<h2 class="oc-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
     }
     if (compilation.chrome.subtitle) {
-      html += `<p class="viz-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
+      html += `<p class="oc-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
     }
 
     chromeEl.innerHTML = html;
@@ -349,8 +349,8 @@ export function createGraph(
     legendEl.style.display = '';
     let html = '';
     for (const entry of entries) {
-      html += '<div class="viz-graph-legend-item">';
-      html += `<span class="viz-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
+      html += '<div class="oc-graph-legend-item">';
+      html += `<span class="oc-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
       html += `<span>${escapeHtml(entry.label)}</span>`;
       html += '</div>';
     }
@@ -588,14 +588,14 @@ export function createGraph(
         const x = node?.x ?? 0;
         const y = node?.y ?? 0;
         simulation?.pinNode(nodeId, x, y);
-        canvas?.classList.add('viz-graph-canvas--dragging');
+        canvas?.classList.add('oc-graph-canvas--dragging');
       },
       onNodeDrag(nodeId, x, y) {
         simulation?.dragNode(nodeId, x, y);
       },
       onNodeDragEnd(nodeId) {
         simulation?.unpinNode(nodeId);
-        canvas?.classList.remove('viz-graph-canvas--dragging');
+        canvas?.classList.remove('oc-graph-canvas--dragging');
       },
       onDoubleClick(nodeId) {
         options?.onNodeDoubleClick?.(nodeDataById(nodeId));
@@ -821,7 +821,7 @@ export function createGraph(
     legendEl = null;
     renderer = null;
 
-    container.classList.remove('viz-dark');
+    container.classList.remove('oc-dark');
   }
 
   // ---------------------------------------------------------------------------