@opendata-ai/openchart-vanilla 6.4.1 → 6.5.1

package/src/table-mount.ts

@@ -20,6 +20,7 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { getBreakpoint } from '@opendata-ai/openchart-core';
 import { compileTable } from '@opendata-ai/openchart-engine';
+import { setupTableAnimationCleanup } from './animation';
 import { observeResize } from './resize-observer';
 import { attachKeyboardNav } from './table-keyboard';
 import { renderTable } from './table-renderer';
@@ -117,6 +118,8 @@ export function createTable(
   let wrapperElement: HTMLElement | null = null;
   let disconnectResize: (() => void) | null = null;
   let cleanupKeyboard: (() => void) | null = null;
+  let cleanupAnimations: (() => void) | null = null;
+  let isFirstRender = true;
   let destroyed = false;
 
   // Internal state (used in uncontrolled mode)
@@ -193,7 +196,7 @@ export function createTable(
    */
   function announce(message: string): void {
     if (!wrapperElement) return;
-    const liveRegion = wrapperElement.querySelector('.viz-table-live-region');
+    const liveRegion = wrapperElement.querySelector('.oc-table-live-region');
     if (liveRegion) {
       liveRegion.textContent = message;
     }
@@ -210,10 +213,10 @@ export function createTable(
     const bp = getBreakpoint(width);
 
     if (bp === 'compact' || bp === 'medium') {
-      wrapperElement.classList.add('viz-table--compact');
+      wrapperElement.classList.add('oc-table--compact');
     } else if (!currentLayout?.compact) {
       // Only remove compact if the spec didn't explicitly request it
-      wrapperElement.classList.remove('viz-table--compact');
+      wrapperElement.classList.remove('oc-table--compact');
     }
   }
 
@@ -221,6 +224,12 @@ export function createTable(
     if (destroyed) return;
 
     try {
+      // Cancel any in-flight animations before re-rendering
+      if (cleanupAnimations) {
+        cleanupAnimations();
+        cleanupAnimations = null;
+      }
+
       // Clean up previous keyboard nav
       if (cleanupKeyboard) {
         cleanupKeyboard();
@@ -234,14 +243,23 @@ export function createTable(
       }
 
       currentLayout = compile();
-      wrapperElement = renderTable(currentLayout, container);
+      const shouldAnimate = isFirstRender && !!currentLayout.animation?.enabled;
+      wrapperElement = renderTable(currentLayout, container, { animate: shouldAnimate });
+
+      // Set up animation cleanup on first animated render
+      if (shouldAnimate && wrapperElement) {
+        cleanupAnimations = setupTableAnimationCleanup(wrapperElement);
+      }
+      if (isFirstRender) {
+        isFirstRender = false;
+      }
 
       // Apply dark mode class
       const isDark = resolveDarkMode(options?.darkMode);
       if (isDark) {
-        container.classList.add('viz-dark');
+        container.classList.add('oc-dark');
       } else {
-        container.classList.remove('viz-dark');
+        container.classList.remove('oc-dark');
       }
 
       // Apply responsive breakpoint
@@ -249,7 +267,7 @@ export function createTable(
 
       // Add clickable class if onRowClick is provided
       if (options?.onRowClick) {
-        wrapperElement.classList.add('viz-table--clickable');
+        wrapperElement.classList.add('oc-table--clickable');
       }
 
       // Wire up event handlers
@@ -301,7 +319,7 @@ export function createTable(
 
     // Search input
     const searchInput = wrapperElement.querySelector(
-      '.viz-table-search input',
+      '.oc-table-search input',
     ) as HTMLInputElement | null;
     if (searchInput) {
       searchInput.addEventListener('input', handleSearchInput);
@@ -403,7 +421,7 @@ export function createTable(
 
     // Capture current search input state before re-render
     const searchInput = wrapperElement?.querySelector(
-      '.viz-table-search input',
+      '.oc-table-search input',
     ) as HTMLInputElement | null;
     const hadFocus = searchInput && document.activeElement === searchInput;
     const selectionStart = searchInput?.selectionStart ?? 0;
@@ -414,7 +432,7 @@ export function createTable(
     // Restore search focus after re-render
     if (hadFocus) {
       const newInput = wrapperElement?.querySelector(
-        '.viz-table-search input',
+        '.oc-table-search input',
       ) as HTMLInputElement | null;
       if (newInput) {
         newInput.focus();
@@ -431,6 +449,7 @@ export function createTable(
 
   function resize(): void {
     if (destroyed) return;
+    if (cleanupAnimations) return; // Skip resize during entrance animation
     render();
   }
 
@@ -480,6 +499,10 @@ export function createTable(
     if (destroyed) return;
     destroyed = true;
 
+    if (cleanupAnimations) {
+      cleanupAnimations();
+      cleanupAnimations = null;
+    }
     if (cleanupKeyboard) {
       cleanupKeyboard();
       cleanupKeyboard = null;
@@ -500,7 +523,7 @@ export function createTable(
       wrapperElement.parentNode.removeChild(wrapperElement);
       wrapperElement = null;
     }
-    container.classList.remove('viz-dark');
+    container.classList.remove('oc-dark');
   }
 
   // Initial render

package/src/table-renderer.ts

@@ -8,8 +8,21 @@
 
 import type { ResolvedColumn, TableLayout, TableRow } from '@opendata-ai/openchart-core';
 import { BRAND_FONT_SIZE } from '@opendata-ai/openchart-core';
+import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
 import { renderCell } from './renderers/table-cells';
 
+/** Options for renderTable(). */
+export interface TableRenderOptions {
+  /** Whether to apply entrance animation on this render. */
+  animate?: boolean;
+}
+
+/** CSS easing preset map for animation custom properties. */
+const EASE_VAR_MAP: Record<string, string> = {
+  smooth: 'var(--oc-ease-smooth)',
+  snappy: 'var(--oc-ease-snappy)',
+};
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -31,17 +44,17 @@ function renderChromeBlock(
     if (!chrome.title && !chrome.subtitle) return null;
 
     const div = document.createElement('div');
-    div.className = 'viz-chrome';
+    div.className = 'oc-chrome';
 
     if (chrome.title) {
       const h = document.createElement('div');
-      h.className = 'viz-table-title';
+      h.className = 'oc-table-title';
       h.textContent = chrome.title.text;
       div.appendChild(h);
     }
     if (chrome.subtitle) {
       const sub = document.createElement('div');
-      sub.className = 'viz-table-subtitle';
+      sub.className = 'oc-table-subtitle';
       sub.textContent = chrome.subtitle.text;
       div.appendChild(sub);
     }
@@ -53,17 +66,17 @@ function renderChromeBlock(
   if (!chrome.source && !chrome.footer) return null;
 
   const div = document.createElement('div');
-  div.className = 'viz-chrome viz-chrome-footer';
+  div.className = 'oc-chrome oc-chrome-footer';
 
   if (chrome.source) {
     const src = document.createElement('div');
-    src.className = 'viz-table-source';
+    src.className = 'oc-table-source';
     src.textContent = chrome.source.text;
     div.appendChild(src);
   }
   if (chrome.footer) {
     const foot = document.createElement('div');
-    foot.className = 'viz-table-footer-text';
+    foot.className = 'oc-table-footer-text';
     foot.textContent = chrome.footer.text;
     div.appendChild(foot);
   }
@@ -105,7 +118,7 @@ function renderThead(
     // Sort button
     if (col.sortable) {
       const btn = document.createElement('button');
-      btn.className = 'viz-table-sort-btn';
+      btn.className = 'oc-table-sort-btn';
       btn.setAttribute('aria-label', `Sort by ${col.label}`);
       btn.setAttribute('data-sort-column', col.key);
       btn.type = 'button';
@@ -131,6 +144,7 @@ function renderTbody(rows: TableRow[], columns: ResolvedColumn[]): HTMLTableSect
     const tr = document.createElement('tr');
     tr.setAttribute('role', 'row');
     tr.setAttribute('data-row-id', row.id);
+    tr.style.setProperty('--oc-row-index', String(r));
 
     for (let c = 0; c < columns.length; c++) {
       const cell = row.cells[c];
@@ -156,7 +170,7 @@ function renderSearchBar(layout: TableLayout): HTMLDivElement | null {
   if (!layout.search.enabled) return null;
 
   const div = document.createElement('div');
-  div.className = 'viz-table-search';
+  div.className = 'oc-table-search';
 
   const input = document.createElement('input');
   input.type = 'search';
@@ -178,10 +192,10 @@ function renderPagination(layout: TableLayout): HTMLDivElement | null {
   const { page, pageSize, totalRows, totalPages } = layout.pagination;
 
   const div = document.createElement('div');
-  div.className = 'viz-table-pagination';
+  div.className = 'oc-table-pagination';
 
   const info = document.createElement('span');
-  info.className = 'viz-table-pagination-info';
+  info.className = 'oc-table-pagination-info';
 
   if (totalRows === 0) {
     info.textContent = 'No results';
@@ -194,7 +208,7 @@ function renderPagination(layout: TableLayout): HTMLDivElement | null {
   div.appendChild(info);
 
   const btnGroup = document.createElement('span');
-  btnGroup.className = 'viz-table-pagination-btns';
+  btnGroup.className = 'oc-table-pagination-btns';
 
   const prevBtn = document.createElement('button');
   prevBtn.setAttribute('aria-label', 'Previous page');
@@ -220,7 +234,7 @@ function renderPagination(layout: TableLayout): HTMLDivElement | null {
 
 function renderEmptyState(message: string): HTMLDivElement {
   const div = document.createElement('div');
-  div.className = 'viz-table-empty';
+  div.className = 'oc-table-empty';
   div.setAttribute('aria-live', 'polite');
   div.textContent = message;
   return div;
@@ -237,53 +251,57 @@ function renderEmptyState(message: string): HTMLDivElement {
  * @param container - The container element to render into.
  * @returns The wrapper element that was created.
  */
-export function renderTable(layout: TableLayout, container: HTMLElement): HTMLElement {
+export function renderTable(
+  layout: TableLayout,
+  container: HTMLElement,
+  opts?: TableRenderOptions,
+): HTMLElement {
   const wrapper = document.createElement('div');
-  wrapper.className = 'viz-table-wrapper';
+  wrapper.className = 'oc-table-wrapper';
 
   // Apply theme colors as CSS custom properties so table CSS picks them up.
   // Without this, dark-background themes show invisible text since the
-  // CSS defaults (--viz-text etc.) are light-mode values.
+  // CSS defaults (--oc-text etc.) are light-mode values.
   const { theme, chrome } = layout;
   if (theme) {
     const s = wrapper.style;
-    s.setProperty('--viz-bg', theme.colors.background);
-    s.setProperty('--viz-text', theme.colors.text);
-    s.setProperty('--viz-text-secondary', theme.colors.axis ?? theme.colors.text);
-    s.setProperty('--viz-text-muted', theme.colors.axis ?? theme.colors.text);
-    s.setProperty('--viz-gridline', theme.colors.gridline);
-    s.setProperty('--viz-border', theme.colors.gridline);
-    s.setProperty('--viz-font-family', theme.fonts.family);
+    s.setProperty('--oc-bg', theme.colors.background);
+    s.setProperty('--oc-text', theme.colors.text);
+    s.setProperty('--oc-text-secondary', theme.colors.axis ?? theme.colors.text);
+    s.setProperty('--oc-text-muted', theme.colors.axis ?? theme.colors.text);
+    s.setProperty('--oc-gridline', theme.colors.gridline);
+    s.setProperty('--oc-border', theme.colors.gridline);
+    s.setProperty('--oc-font-family', theme.fonts.family);
     s.fontFamily = theme.fonts.family;
   }
 
   // Set computed chrome CSS custom properties so chrome elements pick up
-  // theme-resolved values via CSS fallbacks (e.g. --viz-title-computed-size).
+  // theme-resolved values via CSS fallbacks (e.g. --oc-title-computed-size).
   {
     const s = wrapper.style;
     if (chrome.title) {
-      s.setProperty('--viz-title-computed-size', `${chrome.title.style.fontSize}px`);
-      s.setProperty('--viz-title-computed-weight', String(chrome.title.style.fontWeight));
-      s.setProperty('--viz-title-computed-color', chrome.title.style.fill);
+      s.setProperty('--oc-title-computed-size', `${chrome.title.style.fontSize}px`);
+      s.setProperty('--oc-title-computed-weight', String(chrome.title.style.fontWeight));
+      s.setProperty('--oc-title-computed-color', chrome.title.style.fill);
     }
     if (chrome.subtitle) {
-      s.setProperty('--viz-subtitle-computed-size', `${chrome.subtitle.style.fontSize}px`);
-      s.setProperty('--viz-subtitle-computed-weight', String(chrome.subtitle.style.fontWeight));
-      s.setProperty('--viz-subtitle-computed-color', chrome.subtitle.style.fill);
+      s.setProperty('--oc-subtitle-computed-size', `${chrome.subtitle.style.fontSize}px`);
+      s.setProperty('--oc-subtitle-computed-weight', String(chrome.subtitle.style.fontWeight));
+      s.setProperty('--oc-subtitle-computed-color', chrome.subtitle.style.fill);
     }
     if (chrome.source) {
-      s.setProperty('--viz-source-computed-size', `${chrome.source.style.fontSize}px`);
-      s.setProperty('--viz-source-computed-color', chrome.source.style.fill);
+      s.setProperty('--oc-source-computed-size', `${chrome.source.style.fontSize}px`);
+      s.setProperty('--oc-source-computed-color', chrome.source.style.fill);
     }
     if (chrome.footer) {
-      s.setProperty('--viz-footer-computed-size', `${chrome.footer.style.fontSize}px`);
-      s.setProperty('--viz-footer-computed-color', chrome.footer.style.fill);
+      s.setProperty('--oc-footer-computed-size', `${chrome.footer.style.fontSize}px`);
+      s.setProperty('--oc-footer-computed-color', chrome.footer.style.fill);
     }
   }
 
   // Apply class modifiers
   if (layout.compact) {
-    wrapper.classList.add('viz-table--compact');
+    wrapper.classList.add('oc-table--compact');
   }
 
   // Header chrome
@@ -305,7 +323,7 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
   } else {
     // Scroll container
     const scroll = document.createElement('div');
-    scroll.className = 'viz-table-scroll';
+    scroll.className = 'oc-table-scroll';
 
     // Table
     const table = document.createElement('table');
@@ -313,13 +331,13 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
     table.setAttribute('aria-label', layout.a11y.caption);
 
     if (layout.stickyFirstColumn) {
-      table.classList.add('viz-table--sticky');
+      table.classList.add('oc-table--sticky');
     }
 
     // Caption (screen reader only – inline styles ensure hiding even without
     // the external stylesheet, e.g. CDN / esm.sh usage)
     const caption = document.createElement('caption');
-    caption.className = 'viz-sr-only';
+    caption.className = 'oc-sr-only';
     caption.style.position = 'absolute';
     caption.style.width = '1px';
     caption.style.height = '1px';
@@ -356,7 +374,7 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
 
   // Live region for screen reader announcements (sort changes, search results)
   const liveRegion = document.createElement('div');
-  liveRegion.className = 'viz-table-live-region viz-sr-only';
+  liveRegion.className = 'oc-table-live-region oc-sr-only';
   liveRegion.style.position = 'absolute';
   liveRegion.style.width = '1px';
   liveRegion.style.height = '1px';
@@ -374,7 +392,7 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
   // Brand watermark
   const brandColor = theme ? theme.colors.axis : '#999999';
   const brand = document.createElement('div');
-  brand.className = 'viz-table-ref';
+  brand.className = 'oc-table-ref';
   brand.style.cssText = 'text-align: right; padding: 4px 8px;';
   const brandLink = document.createElement('a');
   brandLink.href = BRAND_URL;
@@ -385,6 +403,19 @@ export function renderTable(layout: TableLayout, container: HTMLElement): HTMLEl
   brand.appendChild(brandLink);
   wrapper.appendChild(brand);
 
+  // Animation: stamp CSS custom properties and add oc-animate class BEFORE
+  // DOM insertion to avoid a flash of final state.
+  if (opts?.animate && layout.animation?.enabled) {
+    const anim = layout.animation;
+    const rowCount = layout.rows.length;
+    const stagger = clampStaggerDelay(anim.staggerDelay, rowCount);
+    const s = wrapper.style;
+    s.setProperty('--oc-animation-duration', `${anim.duration}ms`);
+    s.setProperty('--oc-animation-stagger', `${stagger}ms`);
+    s.setProperty('--oc-animation-ease', EASE_VAR_MAP[anim.ease] || EASE_VAR_MAP.smooth);
+    wrapper.classList.add('oc-animate');
+  }
+
   container.appendChild(wrapper);
   return wrapper;
 }

package/src/tooltip.ts

@@ -32,7 +32,7 @@ const TOOLTIP_OFFSET = 12;
  */
 export function createTooltipManager(container: HTMLElement): TooltipManager {
   const tooltip = document.createElement('div');
-  tooltip.className = 'viz-tooltip';
+  tooltip.className = 'oc-tooltip';
   tooltip.setAttribute('role', 'tooltip');
 
   container.style.position = container.style.position || 'relative';
@@ -63,21 +63,21 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
       // Title row: optional color dot + title text
       if (content.title) {
         const titleColor = content.fields.find((f) => f.color)?.color;
-        html += '<div class="viz-tooltip-header">';
+        html += '<div class="oc-tooltip-header">';
         if (titleColor) {
-          html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+          html += `<span class="oc-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
         }
-        html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+        html += `<span class="oc-tooltip-title">${esc(content.title)}</span>`;
         html += '</div>';
       }
 
       // Field rows
       if (content.fields.length > 0) {
-        html += '<div class="viz-tooltip-body">';
+        html += '<div class="oc-tooltip-body">';
         for (const field of content.fields) {
-          html += '<div class="viz-tooltip-row">';
-          html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
-          html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+          html += '<div class="oc-tooltip-row">';
+          html += `<span class="oc-tooltip-label">${esc(field.label)}</span>`;
+          html += `<span class="oc-tooltip-value">${esc(field.value)}</span>`;
           html += '</div>';
         }
         html += '</div>';