From 81f310e05550c43678125e9a0b02a2e89cb32434 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 10 Feb 2026 20:31:20 -0500
Subject: [PATCH 1/6] feat(DataVis): add React wrapper component for wcdatavis
 library

Integrate MIE's imperative wcdatavis data visualization/grid library into
the mieweb-ui React component system with full design system support.

## New Component: DataVis

- DataVis.tsx: Declarative React wrapper around wcdatavis Source,
  ComputedView, and Grid classes. Supports multiple data source types
  (HTTP, JSON/array via local bridging), lifecycle management (mount,
  update, destroy), loading/error/empty states, and forwarded refs.
- datavis-theme.css: 1,300+ lines of CSS overrides mapping every
  hardcoded wcdatavis color to --mieweb-* design tokens. Covers grid
  shell, title bar, toolbar, table headers/rows/footer, control panels,
  buttons, context menus, jQuery UI dialogs, column config windows,
  SumoSelect dropdowns, tooltips, scrollbars, and print styles.
  Includes responsive, high-contrast, and reduced-motion media queries.
- index.ts: Public exports for DataVis, dataVisVariants, and all
  TypeScript interfaces (DataVisProps, DataVisSourceConfig, etc.)
- wcdatavis.d.ts: Ambient type declarations for both 'wcdatavis'
  (v2.x unscoped) and '@mieweb/wcdatavis' (v3.x scoped) packages,
  plus CSS module declarations.

## Vite/Storybook Integration

- wcdatavis-shim.js: ESM shim that resolves the broken Perspective
  export in wcdatavis's index.js. Loads jQuery as a global first, then
  jQuery UI + contextmenu + SumoSelect + Flatpickr as side-effects,
  then re-exports Source, ComputedView, Grid, Graph, and Prefs.
- jquery-global.js: Sets window.jQuery/$ before jQuery UI loads.
  Also patches console.warn BEFORE wcdatavis modules evaluate to
  suppress benign warnings (MirageView naming, column validation)
  that are bound via Function.prototype.bind at import time.
- .storybook/main.ts: Added viteFinal config with Vite aliases -
  bare 'wcdatavis' and '@mieweb/wcdatavis' resolve to our shim;
  jQuery plugins resolved from wcdatavis's nested node_modules.
  Added optimizeDeps includes for wcdatavis source files.
- .storybook/preview-head.html: Added FontAwesome 4.7 CDN link
  (required by wcdatavis grid icons).
- .storybook/preview.tsx: Refactored brand style injection to use
  separate light/dark CSS variable blocks with a semanticVarBlock()
  helper, fixing dark mode propagation to inline .dark wrappers.

## Stories (DataVis.stories.tsx)

15 stories covering all component features:
- Default (HTTP/Iris dataset), JsonData, CardVariant
- SmallSize, LargeSize (density presets)
- Loading, CustomLoading (loading states)
- BrandBlueHive, BrandMieWeb, BrandEnterpriseHealth (multi-brand)
- DarkMode, LightDarkComparison (theme modes)
- WithCallbacks (onGridReady, onDataLoaded, onError)
- ErrorState, CustomErrorMessage (error handling using
  unsupported_source_type instead of invalid HTTP URLs to avoid
  network errors in the console)

## Package Configuration

- package.json: Added wcdatavis as a devDependency (file: link),
  @mieweb/wcdatavis and font-awesome as optional peerDependencies.
- eslint.config.js: Added MutationObserver to browser globals;
  added config block for DataVis .js shim files with window/console
  globals.

## Console Error Cleanup

Resolved all wcdatavis console noise:
- MirageView 'Providing a name for this' warnings: suppressed via
  console.warn patch in jquery-global.js (runs before module load,
  captured by bind)
- 'Unable to validate column configuration' warnings: same approach
- HTTP/AJAX errors from invalid URLs in stories: replaced with clean
  unsupported_source_type trigger
- AbortError noise: eliminated by removing network requests from
  error state stories
---
 .storybook/main.ts                         |   43 +
 .storybook/preview-head.html               |    8 +
 .storybook/preview.tsx                     |   59 +-
 eslint.config.js                           |   11 +
 package-lock.json                          |   55 +-
 package.json                               |   11 +-
 src/components/DataVis/DataVis.stories.tsx |  422 ++++++
 src/components/DataVis/DataVis.tsx         |  632 +++++++++
 src/components/DataVis/datavis-theme.css   | 1373 ++++++++++++++++++++
 src/components/DataVis/index.ts            |    8 +
 src/components/DataVis/jquery-global.js    |   25 +
 src/components/DataVis/wcdatavis-shim.js   |   39 +
 src/components/DataVis/wcdatavis.d.ts      |   90 ++
 src/index.ts                               |    1 +
 14 files changed, 2753 insertions(+), 24 deletions(-)
 create mode 100644 src/components/DataVis/DataVis.stories.tsx
 create mode 100644 src/components/DataVis/DataVis.tsx
 create mode 100644 src/components/DataVis/datavis-theme.css
 create mode 100644 src/components/DataVis/index.ts
 create mode 100644 src/components/DataVis/jquery-global.js
 create mode 100644 src/components/DataVis/wcdatavis-shim.js
 create mode 100644 src/components/DataVis/wcdatavis.d.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index f592219f..5302b6da 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -16,6 +17,48 @@ const config: StorybookConfig = {
     reactDocgen: 'react-docgen-typescript',
   },
   staticDirs: ['./public'],
+  viteFinal: async (config) => {
+    // wcdatavis nested dependency root
+    const wcdatavisNodeModules = path.resolve(process.cwd(), 'node_modules/wcdatavis/node_modules');
+
+    // Use our shim that works around the broken Perspective export in wcdatavis index.js
+    // and ensures Vite uses ESM exports instead of the "browser" field (window.MIE globals).
+    // Only alias the EXACT bare specifier 'wcdatavis', not 'wcdatavis/src/...' sub-paths.
+    config.resolve = config.resolve || {};
+    const existingAliases = Array.isArray(config.resolve.alias)
+      ? config.resolve.alias
+      : Object.entries(config.resolve.alias || {}).map(([find, replacement]) => ({ find, replacement }));
+    config.resolve.alias = [
+      ...existingAliases,
+      {
+        find: /^wcdatavis$/,
+        replacement: path.resolve(process.cwd(), 'src/components/DataVis/wcdatavis-shim.js'),
+      },
+      {
+        find: /^@mieweb\/wcdatavis$/,
+        replacement: path.resolve(process.cwd(), 'src/components/DataVis/wcdatavis-shim.js'),
+      },
+      // Resolve wcdatavis's jQuery plugins from its nested node_modules so they
+      // extend the same jQuery instance the source files import
+      { find: /^jquery-ui(.*)$/, replacement: path.join(wcdatavisNodeModules, 'jquery-ui$1') },
+      { find: /^jquery-contextmenu$/, replacement: path.join(wcdatavisNodeModules, 'jquery-contextmenu') },
+      { find: /^sumoselect$/, replacement: path.join(wcdatavisNodeModules, 'sumoselect') },
+      { find: /^flatpickr$/, replacement: path.join(wcdatavisNodeModules, 'flatpickr') },
+      { find: /^jquery$/, replacement: path.join(wcdatavisNodeModules, 'jquery') },
+    ];
+
+    // Pre-bundle wcdatavis and its jQuery plugins
+    config.optimizeDeps = config.optimizeDeps || {};
+    config.optimizeDeps.include = [
+      ...(config.optimizeDeps.include || []),
+      'wcdatavis/src/source.js',
+      'wcdatavis/src/computed_view.js',
+      'wcdatavis/src/grid.js',
+      'wcdatavis/src/graph.js',
+      'wcdatavis/src/prefs.js',
+    ];
+    return config;
+  },
 };
 
 export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index a98e03b2..f3a7dea1 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,11 @@
+<!-- FontAwesome 4.7 — required by wcdatavis icons -->
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+  integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0="
+  crossorigin="anonymous"
+/>
+
 <!-- Microsoft Clarity Analytics - Production only -->
 <script type="text/javascript">
   // Only load Clarity in production (when not on localhost)
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 898811df..194479a3 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -20,11 +20,32 @@ const brands: Record<string, BrandConfig> = {
   webchart: webchartBrand,
 };
 
+// Helper to generate semantic color variable declarations
+function semanticVarBlock(sc: BrandConfig['colors']['light']) {
+  return `
+      --mieweb-background: ${sc.background} !important;
+      --mieweb-foreground: ${sc.foreground} !important;
+      --mieweb-card: ${sc.card} !important;
+      --mieweb-card-foreground: ${sc.cardForeground} !important;
+      --mieweb-muted: ${sc.muted} !important;
+      --mieweb-muted-foreground: ${sc.mutedForeground} !important;
+      --mieweb-border: ${sc.border} !important;
+      --mieweb-input: ${sc.input} !important;
+      --mieweb-ring: ${sc.ring} !important;
+      --mieweb-destructive: ${sc.destructive} !important;
+      --mieweb-destructive-foreground: ${sc.destructiveForeground} !important;
+      --mieweb-success: ${sc.success} !important;
+      --mieweb-success-foreground: ${sc.successForeground} !important;
+      --mieweb-warning: ${sc.warning} !important;
+      --mieweb-warning-foreground: ${sc.warningForeground} !important;`;
+}
+
 // Function to apply brand CSS variables to document
 function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
   const root = document.documentElement;
   const colors = brand.colors;
-  const semanticColors = isDark ? colors.dark : colors.light;
+  const lightColors = colors.light;
+  const darkColors = colors.dark;
 
   // Remove any existing brand style tag
   const existingStyle = document.getElementById('mieweb-brand-styles');
@@ -32,11 +53,8 @@ function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
     existingStyle.remove();
   }
 
-  // Create a style tag with high specificity to override base.css
-  const styleTag = document.createElement('style');
-  styleTag.id = 'mieweb-brand-styles';
-  styleTag.textContent = `
-    :root, [data-theme="light"], [data-theme="dark"] {
+  // Shared tokens (primary scale, typography, radius, shadows) — same in both modes
+  const sharedVars = `
       --mieweb-primary-50: ${colors.primary[50]} !important;
       --mieweb-primary-100: ${colors.primary[100]} !important;
       --mieweb-primary-200: ${colors.primary[200]} !important;
@@ -48,21 +66,6 @@ function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
       --mieweb-primary-800: ${colors.primary[800]} !important;
       --mieweb-primary-900: ${colors.primary[900]} !important;
       --mieweb-primary-950: ${colors.primary[950]} !important;
-      --mieweb-background: ${semanticColors.background} !important;
-      --mieweb-foreground: ${semanticColors.foreground} !important;
-      --mieweb-card: ${semanticColors.card} !important;
-      --mieweb-card-foreground: ${semanticColors.cardForeground} !important;
-      --mieweb-muted: ${semanticColors.muted} !important;
-      --mieweb-muted-foreground: ${semanticColors.mutedForeground} !important;
-      --mieweb-border: ${semanticColors.border} !important;
-      --mieweb-input: ${semanticColors.input} !important;
-      --mieweb-ring: ${semanticColors.ring} !important;
-      --mieweb-destructive: ${semanticColors.destructive} !important;
-      --mieweb-destructive-foreground: ${semanticColors.destructiveForeground} !important;
-      --mieweb-success: ${semanticColors.success} !important;
-      --mieweb-success-foreground: ${semanticColors.successForeground} !important;
-      --mieweb-warning: ${semanticColors.warning} !important;
-      --mieweb-warning-foreground: ${semanticColors.warningForeground} !important;
       --mieweb-font-sans: ${brand.typography.fontFamily.sans.map((f) => (f.includes(' ') ? `"${f}"` : f)).join(', ')} !important;
       ${brand.typography.fontFamily.mono ? `--mieweb-font-mono: ${brand.typography.fontFamily.mono.map((f) => (f.includes(' ') ? `"${f}"` : f)).join(', ')} !important;` : ''}
       --mieweb-radius-none: ${brand.borderRadius.none} !important;
@@ -74,7 +77,19 @@ function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
       --mieweb-radius-full: ${brand.borderRadius.full} !important;
       --mieweb-shadow-card: ${brand.boxShadow.card} !important;
       --mieweb-shadow-dropdown: ${brand.boxShadow.dropdown} !important;
-      --mieweb-shadow-modal: ${brand.boxShadow.modal} !important;
+      --mieweb-shadow-modal: ${brand.boxShadow.modal} !important;`;
+
+  // Build style tag with separate light & dark blocks so inline .dark wrappers work
+  const styleTag = document.createElement('style');
+  styleTag.id = 'mieweb-brand-styles';
+  styleTag.textContent = `
+    :root {
+      ${sharedVars}
+      ${semanticVarBlock(isDark ? darkColors : lightColors)}
+    }
+    .dark:not(:root), [data-theme="dark"]:not(:root) {
+      ${sharedVars}
+      ${semanticVarBlock(darkColors)}
     }
   `;
   document.head.appendChild(styleTag);
diff --git a/eslint.config.js b/eslint.config.js
index dcdfad5f..1ab3f653 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -77,6 +77,7 @@ export default [
         requestAnimationFrame: 'readonly',
         cancelAnimationFrame: 'readonly',
         getComputedStyle: 'readonly',
+        MutationObserver: 'readonly',
         // File APIs
         File: 'readonly',
         FileList: 'readonly',
@@ -124,6 +125,16 @@ export default [
       'no-console': 'off',
     },
   },
+  // DataVis shim files run in browser context and need browser globals
+  {
+    files: ['src/components/DataVis/*.js'],
+    languageOptions: {
+      globals: {
+        window: 'readonly',
+        console: 'readonly',
+      },
+    },
+  },
   {
     ignores: ['dist/**', 'node_modules/**', '*.config.*', '.storybook/**'],
   },
diff --git a/package-lock.json b/package-lock.json
index 6b1a22eb..0f3ef4fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,25 +53,34 @@
         "typescript": "^5.7.3",
         "vite": "^7.3.1",
         "vitest": "^3.0.4",
-        "wavesurfer.js": "^7.8.17"
+        "wavesurfer.js": "^7.8.17",
+        "wcdatavis": "file:../../datavis/wcdatavis"
       },
       "engines": {
         "node": ">=18.0.0"
       },
       "peerDependencies": {
+        "@mieweb/wcdatavis": ">=3.0.0",
         "ag-grid-community": ">=32.0.0",
         "ag-grid-react": ">=32.0.0",
+        "font-awesome": ">=4.7.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "wavesurfer.js": ">=7.0.0"
       },
       "peerDependenciesMeta": {
+        "@mieweb/wcdatavis": {
+          "optional": true
+        },
         "ag-grid-community": {
           "optional": true
         },
         "ag-grid-react": {
           "optional": true
         },
+        "font-awesome": {
+          "optional": true
+        },
         "react": {
           "optional": false
         },
@@ -83,6 +92,46 @@
         }
       }
     },
+    "../../datavis/wcdatavis": {
+      "version": "2.1.5",
+      "dev": true,
+      "license": "UNLICENSED",
+      "dependencies": {
+        "bignumber.js": "=9.1.2",
+        "flatpickr": "=4.6.13",
+        "handlebars": "=4.7.8",
+        "jquery": "=3.7.1",
+        "jquery-contextmenu": "=2.9.2",
+        "jquery-ui": "=1.13.2",
+        "moment": "=2.30.1",
+        "numeral": "=2.0.6",
+        "papaparse": "=5.4.1",
+        "sprintf-js": "=1.1.3",
+        "squirrelly": "=9.0.0",
+        "sumoselect": "=3.4.9",
+        "underscore": "=1.13.6"
+      },
+      "devDependencies": {
+        "@rollup/plugin-commonjs": "=25.0.7",
+        "@rollup/plugin-node-resolve": "=15.2.3",
+        "bluebird": "=3.7.2",
+        "chai": "=4.4.1",
+        "chromedriver": "latest",
+        "es6-symbol": "=3.1.3",
+        "eslint": "=8.56.0",
+        "jsdoc": "=4.0.2",
+        "jshint": "=2.13.6",
+        "json5": "=2.2.3",
+        "lodash": "=4.17.21",
+        "mermaid": "=10.8.0",
+        "mocha": "=10.2.0",
+        "rollup": "=4.9.6",
+        "selenium-webdriver": "=4.17.0",
+        "serve": "=14.2.1",
+        "serve-handler": "=6.1.5",
+        "uglify-js": "=3.17.4"
+      }
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
@@ -9346,6 +9395,10 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/wcdatavis": {
+      "resolved": "../../datavis/wcdatavis",
+      "link": true
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index ace5cb7a..ed16379c 100644
--- a/package.json
+++ b/package.json
@@ -136,8 +136,10 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "@mieweb/wcdatavis": ">=3.0.0",
     "ag-grid-community": ">=32.0.0",
     "ag-grid-react": ">=32.0.0",
+    "font-awesome": ">=4.7.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "wavesurfer.js": ">=7.0.0"
@@ -157,6 +159,12 @@
     },
     "wavesurfer.js": {
       "optional": true
+    },
+    "@mieweb/wcdatavis": {
+      "optional": true
+    },
+    "font-awesome": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -204,7 +212,8 @@
     "typescript": "^5.7.3",
     "vite": "^7.3.1",
     "vitest": "^3.0.4",
-    "wavesurfer.js": "^7.8.17"
+    "wavesurfer.js": "^7.8.17",
+    "wcdatavis": "file:../../datavis/wcdatavis"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/src/components/DataVis/DataVis.stories.tsx b/src/components/DataVis/DataVis.stories.tsx
new file mode 100644
index 00000000..f8998c2c
--- /dev/null
+++ b/src/components/DataVis/DataVis.stories.tsx
@@ -0,0 +1,422 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DataVis, type DataVisProps } from './DataVis';
+
+// Import DataVis CSS
+import 'wcdatavis/dist/wcdatavis.css';
+import './datavis-theme.css';
+
+// ============================================================================
+// Story Meta
+// ============================================================================
+
+const meta: Meta<typeof DataVis> = {
+  title: 'Components/DataVis',
+  component: DataVis,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+A themed React wrapper for [MIE DataVis](https://github.com/mieweb/wcdatavis) (\`@mieweb/wcdatavis\`).
+
+DataVis is an imperative data visualization and grid library. This component wraps it
+in a declarative React interface with full integration into the MIE Web UI design system:
+
+- **Multi-brand theming** via CSS variables
+- **Dark/light mode** support
+- **Variant styles** (default, bordered, card)
+- **Size presets** (sm, md, lg)
+- **Lifecycle management** (mount, update, destroy)
+
+### Prerequisites
+
+1. Install \`@mieweb/wcdatavis\` as a dependency
+2. Include FontAwesome 4.7 CSS for icons
+3. Import the DataVis theme CSS from this package
+
+\`\`\`tsx
+import { DataVis } from '@mieweb/ui';
+
+<DataVis
+  source={{ type: 'http', url: '/api/data.csv' }}
+  gridOptions={{ title: 'My Data Grid' }}
+  variant="bordered"
+  height={500}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    source: {
+      description: 'Data source configuration',
+      control: { type: 'object' },
+    },
+    gridOptions: {
+      description: 'Grid display options (title, columns, toolbar, etc.)',
+      control: { type: 'object' },
+    },
+    viewOptions: {
+      description: 'View configuration (sort, group, filter)',
+      control: { type: 'object' },
+    },
+    variant: {
+      description: 'Visual variant',
+      control: { type: 'select' },
+      options: ['default', 'bordered', 'card'],
+    },
+    size: {
+      description: 'Size/density preset',
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    brand: {
+      description: 'Brand theme',
+      control: { type: 'select' },
+      options: [
+        'default',
+        'mieweb',
+        'bluehive',
+        'waggleline',
+        'webchart',
+        'enterprise-health',
+      ],
+    },
+    height: {
+      description: 'Container height',
+      control: { type: 'text' },
+    },
+    loading: {
+      description: 'Loading state',
+      control: { type: 'boolean' },
+    },
+    className: {
+      description: 'Additional CSS classes',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DataVisProps>;
+
+// ============================================================================
+// Sample Data
+// ============================================================================
+
+/**
+ * Simple fruit CSV data served from a static URL.
+ * In a real app, this would point to your data endpoint.
+ */
+const sampleHttpSource: DataVisProps['source'] = {
+  type: 'http',
+  url: 'https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv',
+};
+
+const sampleJsonSource: DataVisProps['source'] = {
+  type: 'json',
+  data: [
+    { name: 'Apple', category: 'Fruit', price: 1.2, quantity: 150, inStock: true },
+    { name: 'Banana', category: 'Fruit', price: 0.5, quantity: 200, inStock: true },
+    { name: 'Carrot', category: 'Vegetable', price: 0.8, quantity: 100, inStock: true },
+    { name: 'Durian', category: 'Fruit', price: 12.0, quantity: 5, inStock: false },
+    { name: 'Eggplant', category: 'Vegetable', price: 2.5, quantity: 75, inStock: true },
+    { name: 'Fig', category: 'Fruit', price: 3.0, quantity: 30, inStock: true },
+    { name: 'Grape', category: 'Fruit', price: 2.0, quantity: 180, inStock: true },
+    { name: 'Honeydew', category: 'Fruit', price: 4.5, quantity: 20, inStock: false },
+    { name: 'Iceberg Lettuce', category: 'Vegetable', price: 1.5, quantity: 90, inStock: true },
+    { name: 'Jalapeño', category: 'Vegetable', price: 1.0, quantity: 60, inStock: true },
+  ],
+};
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Default DataVis grid with HTTP data source.
+ *
+ * > **Note:** This story requires `@mieweb/wcdatavis` to be installed.
+ * > If it's not available, you'll see the error state.
+ */
+export const Default: Story = {
+  args: {
+    source: sampleHttpSource,
+    gridOptions: {
+      title: 'Iris Dataset',
+    },
+    height: 500,
+  },
+};
+
+/**
+ * DataVis with JSON data source and bordered variant.
+ */
+export const JsonData: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Produce Inventory',
+    },
+    variant: 'bordered',
+    height: 400,
+  },
+};
+
+/**
+ * Card variant with shadow and no border.
+ */
+export const CardVariant: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Produce Inventory — Card Style',
+    },
+    variant: 'card',
+    height: 400,
+  },
+};
+
+/**
+ * Small size preset for compact displays.
+ */
+export const SmallSize: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Compact Grid',
+    },
+    variant: 'bordered',
+    size: 'sm',
+    height: 350,
+  },
+};
+
+/**
+ * Large size preset for spacious displays.
+ */
+export const LargeSize: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Spacious Grid',
+    },
+    variant: 'bordered',
+    size: 'lg',
+    height: 500,
+  },
+};
+
+/**
+ * Loading state.
+ */
+export const Loading: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Loading Grid',
+    },
+    loading: true,
+    height: 400,
+  },
+};
+
+/**
+ * Custom loading content.
+ */
+export const CustomLoading: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Loading Grid',
+    },
+    loading: true,
+    loadingMessage: (
+      <div className="flex flex-col items-center gap-3 text-primary-600">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-current border-t-transparent" />
+        <span className="text-sm font-medium">Fetching data...</span>
+      </div>
+    ),
+    height: 400,
+  },
+};
+
+// ============================================================================
+// Brand Stories
+// ============================================================================
+
+/**
+ * BlueHive brand theme.
+ */
+export const BrandBlueHive: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'BlueHive Themed Grid',
+    },
+    brand: 'bluehive',
+    variant: 'bordered',
+    height: 400,
+  },
+};
+
+/**
+ * MIE Web brand theme.
+ */
+export const BrandMieWeb: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'MIE Web Themed Grid',
+    },
+    brand: 'mieweb',
+    variant: 'bordered',
+    height: 400,
+  },
+};
+
+/**
+ * Enterprise Health brand theme.
+ */
+export const BrandEnterpriseHealth: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Enterprise Health Themed Grid',
+    },
+    brand: 'enterprise-health',
+    variant: 'bordered',
+    height: 400,
+  },
+};
+
+// ============================================================================
+// Dark Mode Story
+// ============================================================================
+
+/**
+ * Dark mode demonstration.
+ * Toggle dark mode in your Storybook toolbar to see the theme switch.
+ */
+export const DarkMode: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Dark Mode Grid',
+    },
+    variant: 'bordered',
+    height: 400,
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark rounded-xl bg-neutral-950 p-6" data-theme="dark">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Side-by-side light and dark mode comparison.
+ */
+export const LightDarkComparison: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Theme Comparison',
+    },
+    variant: 'bordered',
+    height: 350,
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col gap-6">
+        <div>
+          <h3 className="mb-2 text-sm font-medium text-neutral-500">Light Mode</h3>
+          <div className="rounded-xl bg-white p-4">
+            <Story />
+          </div>
+        </div>
+        <div>
+          <h3 className="mb-2 text-sm font-medium text-neutral-400">Dark Mode</h3>
+          <div className="dark rounded-xl bg-neutral-950 p-4" data-theme="dark">
+            <Story />
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+};
+
+// ============================================================================
+// Callback Stories
+// ============================================================================
+
+/**
+ * With event callbacks.
+ */
+export const WithCallbacks: Story = {
+  args: {
+    source: sampleJsonSource,
+    gridOptions: {
+      title: 'Grid with Callbacks',
+    },
+    variant: 'bordered',
+    height: 400,
+    onGridReady: (grid) => {
+      console.log('DataVis grid ready:', grid);
+    },
+    onDataLoaded: (data) => {
+      console.log('DataVis data loaded:', data);
+    },
+    onError: (error) => {
+      console.error('DataVis error:', error);
+    },
+  },
+};
+
+/**
+ * Error state demonstration (invalid source).
+ */
+export const ErrorState: Story = {
+  args: {
+    source: {
+      type: 'unsupported_source_type',
+    },
+    gridOptions: {
+      title: 'Error State Demo',
+    },
+    variant: 'bordered',
+    height: 300,
+  },
+};
+
+/**
+ * Custom error message.
+ */
+export const CustomErrorMessage: Story = {
+  args: {
+    source: {
+      type: 'unsupported_source_type',
+    },
+    gridOptions: {
+      title: 'Custom Error',
+    },
+    errorMessage: (
+      <div className="flex flex-col items-center gap-2">
+        <span className="text-2xl">⚠️</span>
+        <span className="font-medium text-foreground">
+          Unable to load data
+        </span>
+        <span className="text-xs text-muted-foreground">
+          Please check your network connection and try again.
+        </span>
+      </div>
+    ),
+    variant: 'bordered',
+    height: 300,
+  },
+};
diff --git a/src/components/DataVis/DataVis.tsx b/src/components/DataVis/DataVis.tsx
new file mode 100644
index 00000000..b4e282f9
--- /dev/null
+++ b/src/components/DataVis/DataVis.tsx
@@ -0,0 +1,632 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils/cn';
+
+// ============================================================================
+// Dynamic import types for @mieweb/wcdatavis
+// ============================================================================
+
+/**
+ * Source configuration for DataVis data retrieval.
+ *
+ * @see {@link https://docs.mieweb.com/datavis/ DataVis Documentation}
+ */
+export interface DataVisSourceConfig {
+  /** Data source type */
+  type: 'http' | 'json' | 'array' | 'webchart' | (string & {});
+  /** URL for HTTP sources */
+  url?: string;
+  /** Inline data for json/array sources */
+  data?: unknown;
+  /** Additional source options passed to DataVis Source constructor */
+  [key: string]: unknown;
+}
+
+/**
+ * Options for the DataVis ComputedView.
+ * These control sorting, grouping, filtering, etc.
+ */
+export interface DataVisViewOptions {
+  /** Column sorting configuration */
+  sort?: Array<{ column: string; direction?: 'asc' | 'desc' }>;
+  /** Column grouping configuration */
+  group?: string[];
+  /** Filter configuration */
+  filter?: Record<string, unknown>;
+  /** Additional view options passed to DataVis ComputedView */
+  [key: string]: unknown;
+}
+
+/**
+ * Options for the DataVis Grid display.
+ */
+export interface DataVisGridOptions {
+  /** Grid title displayed in the header */
+  title?: string;
+  /** Column definitions */
+  columns?: Array<{
+    field: string;
+    title?: string;
+    width?: number;
+    sortable?: boolean;
+    [key: string]: unknown;
+  }>;
+  /** Whether the grid is editable */
+  editable?: boolean;
+  /** Whether to show the toolbar */
+  toolbar?: boolean;
+  /** Whether to show the footer/status bar */
+  footer?: boolean;
+  /** Enable pagination */
+  pagination?: boolean;
+  /** Rows per page for pagination */
+  pageSize?: number;
+  /** Additional grid options passed to DataVis Grid constructor */
+  [key: string]: unknown;
+}
+
+// ============================================================================
+// Variant Styles
+// ============================================================================
+
+const dataVisVariants = cva('wc-datavis-themed w-full', {
+  variants: {
+    /**
+     * Visual variant of the grid container
+     */
+    variant: {
+      default: '',
+      bordered:
+        'rounded-lg border border-border shadow-sm',
+      card: 'rounded-lg border-0 shadow-card bg-card',
+    },
+    /**
+     * Size/density preset
+     */
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+    /**
+     * Brand theme variant
+     */
+    brand: {
+      default: '',
+      mieweb: 'dv-brand-mieweb',
+      bluehive: 'dv-brand-bluehive',
+      waggleline: 'dv-brand-waggleline',
+      webchart: 'dv-brand-webchart',
+      'enterprise-health': 'dv-brand-enterprise-health',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+    brand: 'default',
+  },
+});
+
+// ============================================================================
+// Component Types
+// ============================================================================
+
+export interface DataVisProps extends VariantProps<typeof dataVisVariants> {
+  /** Source configuration for data retrieval */
+  source: DataVisSourceConfig;
+  /** View configuration (sort, group, filter, etc.) */
+  viewOptions?: DataVisViewOptions;
+  /** Grid display options (title, columns, toolbar, etc.) */
+  gridOptions?: DataVisGridOptions;
+  /** Additional CSS classes for the container */
+  className?: string;
+  /** Height of the DataVis container */
+  height?: string | number;
+  /** Loading state — shows a loading overlay */
+  loading?: boolean;
+  /** Callback when the grid is ready and rendered */
+  onGridReady?: (grid: unknown) => void;
+  /** Callback when an error occurs during initialization */
+  onError?: (error: Error) => void;
+  /** Callback when data is loaded */
+  onDataLoaded?: (data: unknown) => void;
+  /** Custom loading message or element */
+  loadingMessage?: React.ReactNode;
+  /** Custom error message or element */
+  errorMessage?: React.ReactNode;
+  /** Custom empty state message or element */
+  emptyMessage?: React.ReactNode;
+}
+
+// ============================================================================
+// State Types
+// ============================================================================
+
+type DataVisState = 'idle' | 'loading' | 'ready' | 'error';
+
+// ============================================================================
+// DataVis Component
+// ============================================================================
+
+/**
+ * A themed React wrapper for MIE DataVis (`@mieweb/wcdatavis`).
+ *
+ * Provides a declarative React interface around the imperative DataVis library,
+ * with full integration into the MIE Web UI design system including:
+ * - Multi-brand theming via CSS variables
+ * - Dark/light mode support
+ * - Size and visual variants
+ * - Lifecycle management (mount, update, destroy)
+ *
+ * **Requirements:**
+ * - `@mieweb/wcdatavis` must be installed as a peer dependency
+ * - FontAwesome 4.7 CSS must be available for DataVis icons
+ *
+ * @example
+ * ```tsx
+ * <DataVis
+ *   source={{ type: 'http', url: '/api/data.csv' }}
+ *   gridOptions={{ title: 'My Data Grid' }}
+ *   variant="bordered"
+ *   size="md"
+ *   height={500}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With inline JSON data
+ * <DataVis
+ *   source={{ type: 'json', data: myJsonData }}
+ *   gridOptions={{
+ *     title: 'Inline Data',
+ *     columns: [
+ *       { field: 'name', title: 'Name' },
+ *       { field: 'value', title: 'Value' },
+ *     ],
+ *   }}
+ *   brand="bluehive"
+ * />
+ * ```
+ */
+const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
+  (
+    {
+      source,
+      viewOptions,
+      gridOptions,
+      className,
+      variant,
+      size,
+      brand,
+      height,
+      loading: externalLoading,
+      onGridReady,
+      onError,
+      onDataLoaded,
+      loadingMessage = 'Loading DataVis...',
+      errorMessage,
+      emptyMessage,
+    },
+    ref
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const gridIdRef = React.useRef<string>(
+      `datavis-${Math.random().toString(36).slice(2, 11)}`
+    );
+
+    // Hold references to DataVis instances for cleanup
+    const instancesRef = React.useRef<{
+      source: unknown;
+      view: unknown;
+      grid: unknown;
+    } | null>(null);
+
+    const [state, setState] = React.useState<DataVisState>('idle');
+    const [error, setError] = React.useState<Error | null>(null);
+
+    // Combined ref handling
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current =
+          node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+      },
+      [ref]
+    );
+
+    // Track the window variable name used for local source bridging
+    const localVarRef = React.useRef<string | null>(null);
+
+    // Destroy existing DataVis instances
+    const destroyInstances = React.useCallback(() => {
+      if (instancesRef.current) {
+        try {
+          const { grid, view, source: src } = instancesRef.current;
+          // DataVis objects may have destroy/dispose methods
+          if (grid && typeof (grid as Record<string, unknown>).destroy === 'function') {
+            (grid as { destroy: () => void }).destroy();
+          }
+          if (view && typeof (view as Record<string, unknown>).destroy === 'function') {
+            (view as { destroy: () => void }).destroy();
+          }
+          if (src && typeof (src as Record<string, unknown>).destroy === 'function') {
+            (src as { destroy: () => void }).destroy();
+          }
+        } catch {
+          // Silently handle cleanup errors
+        }
+        instancesRef.current = null;
+      }
+
+      // Clean up temporary window variable used for json/array source bridging
+      if (localVarRef.current) {
+        delete (window as unknown as Record<string, unknown>)[localVarRef.current];
+        localVarRef.current = null;
+      }
+
+      // Clear the container DOM
+      if (containerRef.current) {
+        const gridEl = containerRef.current.querySelector(
+          `#${gridIdRef.current}`
+        );
+        if (gridEl) {
+          gridEl.innerHTML = '';
+        }
+      }
+    }, []);
+
+    // Initialize DataVis
+    const initializeDataVis = React.useCallback(async () => {
+      if (!containerRef.current) return;
+
+      setState('loading');
+      setError(null);
+
+      try {
+        // Dynamic import — uses 'wcdatavis' package name.
+        // In Storybook, this is aliased to our shim that loads jQuery UI
+        // plugins before the wcdatavis source files.
+        // For @mieweb/wcdatavis (v3+), consumers should alias it to 'wcdatavis'
+        // in their build config.
+        const wcdatavis = (await import('wcdatavis')) as Record<string, unknown>;
+
+        // Resolve the actual exports — handle both default and named exports
+        const DataVisModule = wcdatavis.default
+          ? (wcdatavis.default as Record<string, unknown>)
+          : wcdatavis;
+
+        // Try various export patterns the library may use:
+        //   Named exports: Source, ComputedView/View, Grid
+        //   MIE.WC_DataVis namespace (browser bundle)
+        const mod = DataVisModule as Record<string, unknown>;
+        const mieNs = (mod.MIE as Record<string, unknown> | undefined)
+          ?.WC_DataVis as Record<string, unknown> | undefined;
+
+        const SourceClass = mod.Source ?? mieNs?.Source;
+        // v2.x exports ComputedView as "View"; v3.x exports as "ComputedView"
+        const ComputedViewClass =
+          mod.ComputedView ?? mod.View ?? mieNs?.ComputedView;
+        const GridClass = mod.Grid ?? mieNs?.Grid;
+
+        if (!SourceClass || !ComputedViewClass || !GridClass) {
+          throw new Error(
+            'Could not resolve DataVis classes (Source, ComputedView/View, Grid). ' +
+              'Ensure wcdatavis or @mieweb/wcdatavis is installed and the version is compatible.'
+          );
+        }
+
+        // Clean up previous instances before re-creating
+        destroyInstances();
+
+        // Bridge unsupported source types into wcdatavis-native types.
+        // wcdatavis Source only supports: local, http, file, table.
+        // We translate 'json' and 'array' into 'local' by setting a
+        // temporary window variable that LocalSource reads from.
+        let resolvedSource: DataVisSourceConfig = source;
+        let localVarName: string | null = null;
+
+        if (
+          (source.type === 'json' || source.type === 'array') &&
+          source.data != null
+        ) {
+          localVarName = `__datavis_${gridIdRef.current.replace(/-/g, '_')}`;
+          const dataArr = Array.isArray(source.data) ? source.data : [];
+
+          // Auto-infer typeInfo from the first data row so wcdatavis can
+          // format every cell correctly (avoids "Unable to format - unknown type").
+          const typeInfo: Record<string, { field: string; type: string }> = {};
+          if (dataArr.length > 0) {
+            const sample = dataArr[0] as Record<string, unknown>;
+            for (const key of Object.keys(sample)) {
+              const val = sample[key];
+              let colType = 'string';
+              if (typeof val === 'number') colType = 'number';
+              else if (typeof val === 'boolean') colType = 'string'; // bool → string for display
+              typeInfo[key] = { field: key, type: colType };
+            }
+          }
+
+          (window as unknown as Record<string, unknown>)[localVarName] = {
+            data: dataArr,
+            typeInfo,
+          };
+          resolvedSource = { type: 'local', varName: localVarName };
+          localVarRef.current = localVarName;
+        }
+
+        // Derive a name for logging from gridOptions.title or the grid id
+        const instanceName = gridOptions?.title ?? gridIdRef.current;
+
+        // Create Source — constructor is (spec, params, userTypeInfo, opts)
+        const sourceInstance = new (SourceClass as new (
+          config: DataVisSourceConfig,
+          params?: unknown,
+          userTypeInfo?: unknown,
+          opts?: { name?: string }
+        ) => unknown)(resolvedSource, undefined, undefined, {
+          name: instanceName,
+        });
+
+        // Create ComputedView — constructor is (source, opts)
+        const viewInstance = new (ComputedViewClass as new (
+          source: unknown,
+          options?: DataVisViewOptions & { name?: string }
+        ) => unknown)(sourceInstance, { ...viewOptions, name: instanceName });
+
+        // Create Grid — it renders into the DOM element with the given id
+        // The Grid constructor takes (defn, opts, cb)
+        const { title, columns, ...restGridOptions } = gridOptions ?? {};
+        const gridDisplayOptions: Record<string, unknown> = {
+          ...restGridOptions,
+          name: instanceName,
+        };
+        if (title) {
+          gridDisplayOptions.title = title;
+        }
+        if (columns) {
+          gridDisplayOptions.columns = columns;
+        }
+
+        // Build grid definition — disable floatingHeader since TableTool/floatThead
+        // are unavailable in this environment (avoids "tabletool is not available" error)
+        const gridDefn: Record<string, unknown> = {
+          id: gridIdRef.current,
+          computedView: viewInstance,
+          table: {
+            features: { floatingHeader: false },
+          },
+        };
+
+        const gridInstance = new (GridClass as new (
+          config: Record<string, unknown>,
+          options?: Record<string, unknown>
+        ) => unknown)(gridDefn, gridDisplayOptions);
+
+        instancesRef.current = {
+          source: sourceInstance,
+          view: viewInstance,
+          grid: gridInstance,
+        };
+
+        setState('ready');
+        onGridReady?.(gridInstance);
+        onDataLoaded?.(sourceInstance);
+      } catch (err) {
+        const wrappedError =
+          err instanceof Error
+            ? err
+            : new Error(
+                `DataVis initialization failed: ${String(err)}`
+              );
+        setError(wrappedError);
+        setState('error');
+        onError?.(wrappedError);
+      }
+    }, [source, viewOptions, gridOptions, destroyInstances, onGridReady, onError, onDataLoaded]);
+
+    // Mount / source change effect
+    React.useEffect(() => {
+      initializeDataVis();
+
+      return () => {
+        destroyInstances();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      // Re-initialize when source config changes
+      source.type,
+      source.url,
+      // We intentionally use a serialized key for data changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(source.data),
+    ]);
+
+    // -----------------------------------------------------------------------
+    // Propagate theme variables to body-level dialogs/popups
+    // -----------------------------------------------------------------------
+    // jQuery UI appends dialogs to <body>, outside the component tree.
+    // We observe the DOM for new .wcdv_dialog / .ui-dialog elements and
+    // copy the component's resolved CSS variable values onto them so that
+    // dark mode and brand theming work correctly.
+    React.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      // Guard against re-entrant calls (setProperty triggers mutations)
+      let propagating = false;
+
+      /** Copy computed --mieweb-* values from the component onto `target`. */
+      const propagateVars = (target: HTMLElement) => {
+        const cs = getComputedStyle(container);
+        const vars = [
+          'background', 'foreground', 'card', 'card-foreground',
+          'muted', 'muted-foreground', 'border', 'input', 'ring',
+          'destructive', 'destructive-foreground',
+          'success', 'success-foreground',
+          'warning', 'warning-foreground',
+          'primary-50', 'primary-100', 'primary-200', 'primary-300',
+          'primary-400', 'primary-500', 'primary-600', 'primary-700',
+          'primary-800', 'primary-900', 'primary-950',
+          'font-sans', 'font-mono',
+          'radius-sm', 'radius-md', 'radius-lg',
+          'shadow-card', 'shadow-dropdown', 'shadow-modal',
+        ];
+        for (const v of vars) {
+          const val = cs.getPropertyValue(`--mieweb-${v}`).trim();
+          if (val) {
+            target.style.setProperty(`--mieweb-${v}`, val);
+          }
+        }
+      };
+
+      const isDataVisDialog = (el: HTMLElement) =>
+        el.classList.contains('wcdv_dialog') ||
+        el.classList.contains('ui-dialog') ||
+        el.classList.contains('context-menu-list') ||
+        el.classList.contains('ui-tooltip') ||
+        el.querySelector?.('.wcdv_colconfigwin_table') != null ||
+        el.querySelector?.('.wcdv_button_bar') != null;
+
+      /** Tag all existing datavis dialogs on the page. */
+      const tagExistingDialogs = () => {
+        if (propagating) return;
+        propagating = true;
+        try {
+          const dialogs = document.querySelectorAll<HTMLElement>(
+            '.wcdv_dialog, .ui-dialog, .context-menu-list, .ui-tooltip, .SumoSelect > .optWrapper'
+          );
+          dialogs.forEach(propagateVars);
+        } finally {
+          propagating = false;
+        }
+      };
+
+      // Tag once on mount
+      tagExistingDialogs();
+
+      // Watch only for new direct children appended to body (dialogs)
+      const observer = new MutationObserver((mutations) => {
+        if (propagating) return;
+        propagating = true;
+        try {
+          for (const m of mutations) {
+            for (const node of m.addedNodes) {
+              if (!(node instanceof HTMLElement)) continue;
+              if (isDataVisDialog(node)) {
+                propagateVars(node);
+              }
+            }
+          }
+        } finally {
+          propagating = false;
+        }
+      });
+
+      observer.observe(document.body, { childList: true, subtree: false });
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [state]); // Re-run when state changes (e.g. grid ready → new dialogs possible)
+
+    // Compute container style
+    const containerStyle = React.useMemo((): React.CSSProperties => {
+      const style: React.CSSProperties = {};
+      if (height !== undefined) {
+        style.height =
+          typeof height === 'number' ? `${height}px` : height;
+      }
+      return style;
+    }, [height]);
+
+    // Determine display state
+    const isLoading = externalLoading || state === 'loading';
+    const isError = state === 'error' && error;
+    const isIdle = state === 'idle';
+
+    return (
+      <div
+        ref={setRefs}
+        className={cn(dataVisVariants({ variant, size, brand }), className)}
+        style={containerStyle}
+        data-brand={brand}
+        data-state={state}
+      >
+        {/* Loading overlay */}
+        {isLoading && (
+          <div className="flex items-center justify-center p-8 text-muted-foreground">
+            {typeof loadingMessage === 'string' ? (
+              <div className="flex items-center gap-2">
+                <svg
+                  className="h-5 w-5 animate-spin"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+                <span>{loadingMessage}</span>
+              </div>
+            ) : (
+              loadingMessage
+            )}
+          </div>
+        )}
+
+        {/* Error state */}
+        {isError && (
+          <div className="flex flex-col items-center justify-center gap-2 p-8 text-destructive">
+            {errorMessage ?? (
+              <>
+                <span className="font-medium">
+                  Failed to load DataVis
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {error.message}
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Idle / empty state (before initialization) */}
+        {isIdle && emptyMessage && (
+          <div className="flex items-center justify-center p-8 text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+
+        {/* DataVis grid mount point */}
+        <div
+          id={gridIdRef.current}
+          className="datavis-grid-container"
+          style={{
+            // Hide the mount point while loading/errored so overlays show cleanly
+            display: isLoading || isError ? 'none' : undefined,
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+DataVis.displayName = 'DataVis';
+
+export { DataVis, dataVisVariants };
diff --git a/src/components/DataVis/datavis-theme.css b/src/components/DataVis/datavis-theme.css
new file mode 100644
index 00000000..3139ac9e
--- /dev/null
+++ b/src/components/DataVis/datavis-theme.css
@@ -0,0 +1,1373 @@
+/**
+ * DataVis Theme Overrides
+ * ========================
+ * Overrides every hardcoded color in wcdatavis.css with --mieweb-* design tokens.
+ * Light/dark mode and brand theming work automatically because brands + .dark /
+ * [data-theme='dark'] redefine the same CSS custom properties.
+ *
+ * Selector hierarchy:
+ *   .wc-datavis-themed            (applied by DataVis.tsx via cva)
+ *   .wc-datavis-themed .wcdv_*    (wcdatavis internal classes)
+ *
+ * Color mapping (wcdatavis originals to design tokens):
+ *   #FFFFFF / white       -> --mieweb-background
+ *   #737373               -> --mieweb-muted-foreground
+ *   #c7c7c7               -> --mieweb-border
+ *   #0095D6               -> --mieweb-primary-500
+ *   #f0f0f5 / #F6F6F9     -> --mieweb-muted
+ *   #e8f5e9               -> --mieweb-primary-50 (zebra)
+ *   #888 / #808080        -> --mieweb-muted-foreground
+ *   #000                  -> --mieweb-foreground
+ */
+
+/* ==========================================================================
+   ROOT CONTAINER
+   ========================================================================== */
+
+.wc-datavis-themed {
+  color: var(--mieweb-foreground);
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+/* ==========================================================================
+   GRID SHELL
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid,
+.wc-datavis-themed .wcdv_graph {
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_content {
+  background-color: var(--mieweb-background);
+  border-color: var(--mieweb-border);
+}
+
+/* ==========================================================================
+   TITLE BAR
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_titlebar {
+  background-color: var(--mieweb-muted);
+  color: var(--mieweb-muted-foreground);
+  border-color: var(--mieweb-border);
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+.wc-datavis-themed .wcdv_grid_titlebar strong {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_titlebar .headingInfo {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_titlebar .wcdv_spinner {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_titlebar .link {
+  color: var(--mieweb-primary-600);
+}
+
+.wc-datavis-themed .wcdv_grid_titlebar .link:hover {
+  color: var(--mieweb-primary-700);
+}
+
+.wc-datavis-themed .wcdv_heading_container .wcdv_heading_title {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_heading_container .headingInfo {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_titlebar_controls span.fa {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_titlebar_controls span.fa:hover {
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   TOOLBAR
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_toolbar {
+  background-color: var(--mieweb-muted);
+  border-color: var(--mieweb-border);
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_toolbar > span.fa {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_toolbar > span.fa:hover {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_toolbar button[disabled=disabled] .fa {
+  color: var(--mieweb-border);
+}
+
+.wc-datavis-themed .wcdv_toolbar_section {
+  border-color: var(--mieweb-border);
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_toolbar span.fa.wcdv_info_icon {
+  color: var(--mieweb-primary-500);
+}
+
+/* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_button,
+.wc-datavis-themed button {
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+.wc-datavis-themed button.wcdv_icon_button {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed button.wcdv_icon_button:hover {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed button.wcdv_icon_button > span.fa.wcdv_icon_checkbox_off {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed button.wcdv_icon_button > span.fa.wcdv_icon_checkbox_on {
+  background-color: var(--mieweb-primary-500);
+  color: #fff;
+}
+
+.wc-datavis-themed button.wcdv_expand_button > span.fa {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed td button.wcdv_icon_button_incell {
+  background-color: var(--mieweb-muted);
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed td:hover button.wcdv_icon_button_incell {
+  background-color: var(--mieweb-border);
+}
+
+.wc-datavis-themed td button.wcdv_icon_button_incell:hover {
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   CONTROL PANELS (Group / Filter / Pivot / Aggregate)
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_control {
+  background-color: var(--mieweb-muted);
+  border-color: var(--mieweb-border);
+}
+
+.wc-datavis-themed .wcdv_control_pane {
+  background-color: var(--mieweb-muted);
+  border-color: var(--mieweb-border);
+}
+
+/* Inputs/selects inside control panels should use card bg to appear inset */
+.wc-datavis-themed .wcdv_control_pane input,
+.wc-datavis-themed .wcdv_control_pane select,
+.wc-datavis-themed .wcdv_control_pane textarea {
+  background-color: var(--mieweb-card, var(--mieweb-background)) !important;
+  border: 1px solid var(--mieweb-border) !important;
+  color: var(--mieweb-foreground) !important;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+.wc-datavis-themed .wcdv_control_title_bar {
+  border-color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_control_title {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_control_clear_button {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_control_clear_button:hover {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_control_addField {
+  color: var(--mieweb-primary-500);
+}
+
+.wc-datavis-themed .wcdv_control_addField:hover {
+  color: var(--mieweb-primary-600);
+}
+
+/* Field chips inside controls */
+.wc-datavis-themed .wcdv_control_pane ul.wcdv_control_horizontal li .wcdv_field {
+  border-color: var(--mieweb-border);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_control_pane .wcdv_control_vertical li .wcdv_field {
+  border-color: var(--mieweb-border);
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_field_name {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_filter_control ul li .wcdv_field {
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_aggregate_control_error {
+  color: var(--mieweb-warning);
+}
+
+.wc-datavis-themed .ui-widget.ui-widget-content.wcdv_aggregate_control_error_tooltip {
+  border-color: var(--mieweb-warning);
+  color: var(--mieweb-foreground);
+  background-color: var(--mieweb-background);
+}
+
+.wc-datavis-themed .ui-widget.ui-widget-content.wcdv_info_tooltip {
+  border-color: var(--mieweb-muted-foreground);
+  color: var(--mieweb-foreground);
+  background-color: var(--mieweb-background);
+}
+
+.wc-datavis-themed div.wcdv_operations_category {
+  border-color: var(--mieweb-border);
+}
+
+/* ==========================================================================
+   SORT AND FILTER ICONS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_sort_icon,
+.wc-datavis-themed .wcdv_sort_icon_vertical {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_sort_arrow_active {
+  color: #fff;
+}
+
+.wc-datavis-themed .wcdv_filter_icon {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_filter_icon:hover {
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   TABLE HEADERS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_table table {
+  background-color: var(--mieweb-background) !important;
+  color: var(--mieweb-foreground);
+  border-collapse: collapse;
+}
+
+/* Regular th (filter row, etc.) */
+.wc-datavis-themed .wcdv_grid_table table th {
+  background-color: var(--mieweb-muted) !important;
+  color: var(--mieweb-muted-foreground) !important;
+  border-color: var(--mieweb-border) !important;
+}
+
+/* Primary header row */
+.wc-datavis-themed .wcdv_grid_table table thead th {
+  background-color: var(--mieweb-muted) !important;
+  color: var(--mieweb-foreground) !important;
+  font-weight: 600;
+  border-bottom: 2px solid var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table thead th:hover {
+  background-color: color-mix(in srgb, var(--mieweb-muted) 80%, var(--mieweb-foreground)) !important;
+}
+
+/* Secondary header row (group headers, subheaders) */
+.wc-datavis-themed .wcdv_grid_table table > thead > tr + tr > th {
+  background-color: var(--mieweb-muted) !important;
+  color: var(--mieweb-foreground) !important;
+  border-color: var(--mieweb-foreground) !important;
+}
+
+/* Active sort column header */
+.wc-datavis-themed .wcdv_sort_column_active.wcdv_bg-primary {
+  background-color: color-mix(in srgb, var(--mieweb-muted) 70%, var(--mieweb-foreground)) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+/* ==========================================================================
+   TABLE BODY ROWS AND CELLS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_table table td,
+.wc-datavis-themed .wcdv_grid_table table th {
+  border-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table td {
+  color: var(--mieweb-foreground) !important;
+}
+
+/* Normal rows */
+.wc-datavis-themed .wcdv_grid_table table > tbody > tr {
+  background-color: var(--mieweb-background) !important;
+  color: var(--mieweb-foreground) !important;
+  transition: background-color 0.12s ease;
+}
+
+.wc-datavis-themed .wcdv_grid_table table > tbody > tr:hover {
+  background-color: var(--mieweb-muted) !important;
+}
+
+/* Zebra striping */
+.wc-datavis-themed .wcdv_grid_table table.zebra > tbody > tr:nth-child(even),
+.wc-datavis-themed .wcdv_grid_table table > tbody > tr.even {
+  background-color: var(--mieweb-muted) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table.zebra > tbody > tr.odd {
+  background-color: var(--mieweb-background) !important;
+}
+
+/* Selected row */
+.wc-datavis-themed .wcdv_grid_table table td.wcdv_selected_row {
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 18%, transparent) !important;
+}
+
+/* Drill-down active */
+.wc-datavis-themed .wcdv_grid_table table td.wcdv_drill_down:active {
+  background-color: color-mix(in srgb, var(--mieweb-warning) 25%, transparent) !important;
+}
+
+/* Dividers and pivot boundaries */
+.wc-datavis-themed .wcdv_grid_table table .wcdv_divider,
+.wc-datavis-themed .wcdv_grid_table table .wcdv_pivot_colval_boundary {
+  border-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table .wcdv_pivot_aggregate_boundary {
+  border-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table .wcdv_gridtable_agg_pivot td,
+.wc-datavis-themed .wcdv_grid_table table .wcdv_gridtable_agg_pivot th {
+  border-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table .wcdv_bld {
+  border-left-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table .wcdv_brd {
+  border-right-color: var(--mieweb-border) !important;
+}
+
+.wc-datavis-themed .wcdv_grid_table table .wcdv_btd {
+  border-top-color: var(--mieweb-border) !important;
+}
+
+/* ==========================================================================
+   TABLE FOOTER
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_table table > tfoot {
+  background-color: var(--mieweb-muted) !important;
+  border-color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_grid_table table > tfoot > tr {
+  border-color: var(--mieweb-border);
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   SHOW MORE ROW
+   ========================================================================== */
+
+.wc-datavis-themed tr.wcdvgrid_more td {
+  background-color: var(--mieweb-muted) !important;
+  border-color: var(--mieweb-muted-foreground) !important;
+  color: var(--mieweb-muted-foreground) !important;
+}
+
+.wc-datavis-themed tr.wcdvgrid_more td:hover {
+  color: var(--mieweb-foreground) !important;
+}
+
+/* ==========================================================================
+   FONT-AWESOME ICONS IN GRID
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid .fa,
+.wc-datavis-themed .wcdv_graph .fa {
+  color: inherit;
+}
+
+.wc-datavis-themed .wcdv_grid th .fa {
+  color: inherit;
+  opacity: 0.85;
+}
+
+.wc-datavis-themed .wcdv_grid th .fa:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   PRIMARY THEME COLORS (overrides .wcdv_bg-primary / .wcdv_text-primary)
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_bg-primary {
+  background-color: var(--mieweb-primary-500) !important;
+}
+
+.wc-datavis-themed .wcdv_text-primary {
+  color: var(--mieweb-primary-500) !important;
+}
+
+.wc-datavis-themed .wcdv_border-primary {
+  border-color: var(--mieweb-primary-500) !important;
+}
+
+/* ==========================================================================
+   SPINNER
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_spinner {
+  color: var(--mieweb-primary-500);
+}
+
+.wc-datavis-themed .wcdv_group_value > .spinner > div,
+.wc-datavis-themed .wcdvgrid_more .spinner > div {
+  background-color: var(--mieweb-muted-foreground);
+}
+
+/* ==========================================================================
+   BANNERS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_warning_banner {
+  border-color: var(--mieweb-destructive);
+  background-color: color-mix(in srgb, var(--mieweb-destructive) 12%, var(--mieweb-background));
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .wcdv_info_banner {
+  border-color: var(--mieweb-primary-500);
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 10%, var(--mieweb-background));
+  color: var(--mieweb-primary-900);
+}
+
+/* ==========================================================================
+   SELECT ELEMENTS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid select {
+  border-color: var(--mieweb-border);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   FORM INPUTS (inline search, filter inputs, etc.)
+   ========================================================================== */
+
+.wc-datavis-themed input,
+.wc-datavis-themed select,
+.wc-datavis-themed textarea {
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+  border-color: var(--mieweb-input);
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+.wc-datavis-themed input:focus,
+.wc-datavis-themed select:focus,
+.wc-datavis-themed textarea:focus {
+  border-color: var(--mieweb-primary-500);
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mieweb-ring) 25%, transparent);
+}
+
+/* ==========================================================================
+   LINKS
+   ========================================================================== */
+
+.wc-datavis-themed a,
+.wc-datavis-themed .link {
+  color: var(--mieweb-primary-600);
+}
+
+.wc-datavis-themed a:hover,
+.wc-datavis-themed .link:hover {
+  color: var(--mieweb-primary-700);
+}
+
+/* ==========================================================================
+   DRAG AND DROP
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_drop_target_hover {
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 11%, transparent) !important;
+}
+
+.wc-datavis-themed .wcdv_drag_handle.ui-draggable-dragging {
+  border-color: var(--mieweb-muted-foreground);
+  background-color: var(--mieweb-muted);
+}
+
+/* ==========================================================================
+   CONTEXT MENU (jQuery contextMenu)
+   ========================================================================== */
+
+.wc-datavis-themed .context-menu-list {
+  background-color: var(--mieweb-card);
+  color: var(--mieweb-foreground);
+  border-color: var(--mieweb-border);
+  border-radius: var(--mieweb-radius-md, 6px);
+  box-shadow: var(--mieweb-shadow-dropdown);
+}
+
+.wc-datavis-themed .context-menu-item.context-menu-hover,
+.wc-datavis-themed .context-menu-hover.context-menu-icon.context-menu-icon--fa::before {
+  background-color: var(--mieweb-muted);
+  color: var(--mieweb-foreground);
+}
+
+.wc-datavis-themed .context-menu-icon.context-menu-icon--fa::before {
+  color: var(--mieweb-primary-500);
+}
+
+/* ==========================================================================
+   JQUERY-UI DIALOG
+   ========================================================================== */
+
+.wc-datavis-themed .ui-dialog,
+.wc-datavis-themed .wcdv_dialog {
+  background-color: var(--mieweb-card);
+  color: var(--mieweb-foreground);
+  border-color: var(--mieweb-border);
+  border-radius: var(--mieweb-radius-lg, 8px);
+  box-shadow: var(--mieweb-shadow-modal);
+}
+
+.wc-datavis-themed .ui-dialog-titlebar {
+  background-color: var(--mieweb-muted);
+  color: var(--mieweb-foreground);
+  border-color: var(--mieweb-border);
+}
+
+/* ==========================================================================
+   COLUMN CONFIGURATION WINDOW
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_colconfigwin_table tr {
+  background-color: var(--mieweb-background);
+}
+
+.wc-datavis-themed .wcdv_colconfigwin_table thead tr th {
+  color: var(--mieweb-muted-foreground);
+}
+
+.wc-datavis-themed .wcdv_colconfigwin_table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 10%, var(--mieweb-background));
+}
+
+/* ==========================================================================
+   GROUP FUNCTION WINDOW
+   ========================================================================== */
+
+.wc-datavis-themed div.wcdv_groupfun_buttons {
+  border-color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   BUTTON BAR
+   ========================================================================== */
+
+.wc-datavis-themed div.wcdv_button_bar button[data-role=ok] span.fa {
+  color: var(--mieweb-success);
+}
+
+.wc-datavis-themed div.wcdv_button_bar button[data-role=cancel] span.fa {
+  color: var(--mieweb-destructive);
+}
+
+/* ==========================================================================
+   SUMO SELECT (multi-select dropdown)
+   ========================================================================== */
+
+.wc-datavis-themed .SumoSelect .select-all.selected > span i,
+.wc-datavis-themed .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
+  background-color: var(--mieweb-primary-500);
+}
+
+.wc-datavis-themed .SumoSelect .select-all.partial > span i {
+  background-color: var(--mieweb-border);
+}
+
+.wc-datavis-themed .SumoSelect > .optWrapper {
+  background-color: var(--mieweb-card);
+  border-color: var(--mieweb-border);
+  color: var(--mieweb-foreground);
+}
+
+/* ==========================================================================
+   PROGRESSBAR (jQuery UI)
+   ========================================================================== */
+
+.wc-datavis-themed .ui-progressbar .ui-progressbar-value.wcdvgrid_progressbar {
+  background: var(--mieweb-primary-500);
+}
+
+/* ==========================================================================
+   GRAPH MESSAGE
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_graph_message {
+  color: var(--mieweb-muted-foreground);
+}
+
+/* ==========================================================================
+   EMPTY CELLS
+   ========================================================================== */
+
+.wc-datavis-themed .wcdv_grid_table table td.wcdv_cell_empty div,
+.wc-datavis-themed .wcdv_grid_table table th.wcdv_cell_empty div {
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--mieweb-muted-foreground),
+    var(--mieweb-muted-foreground) 8px,
+    transparent 8px,
+    transparent 16px
+  );
+  opacity: 0.25;
+}
+
+/* ==========================================================================
+   SCROLLBARS (WebKit)
+   ========================================================================== */
+
+.wc-datavis-themed ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.wc-datavis-themed ::-webkit-scrollbar-track {
+  background: var(--mieweb-muted);
+  border-radius: 6px;
+}
+
+.wc-datavis-themed ::-webkit-scrollbar-thumb {
+  background: var(--mieweb-border);
+  border-radius: 6px;
+  border: 2px solid var(--mieweb-muted);
+}
+
+.wc-datavis-themed ::-webkit-scrollbar-thumb:hover {
+  background: var(--mieweb-muted-foreground);
+}
+
+/* ==========================================================================
+   RESPONSIVE
+   ========================================================================== */
+
+@media (max-width: 640px) {
+  .wc-datavis-themed {
+    font-size: 16px;
+  }
+
+  .wc-datavis-themed .wcdv_grid_toolbar {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+}
+
+/* ==========================================================================
+   HIGH CONTRAST
+   ========================================================================== */
+
+@media (prefers-contrast: high) {
+  .wc-datavis-themed .wcdv_grid_table table > tbody > tr:hover {
+    outline: 2px solid var(--mieweb-foreground);
+  }
+
+  .wc-datavis-themed .wcdv_grid_table table td:focus {
+    outline: 3px solid var(--mieweb-foreground) !important;
+  }
+}
+
+/* ==========================================================================
+   REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .wc-datavis-themed,
+  .wc-datavis-themed * {
+    transition: none !important;
+  }
+}
+
+/* ==========================================================================
+   PRINT
+   ========================================================================== */
+
+/* ==========================================================================
+   DIALOGS & POPUPS (jQuery UI)
+   --------------------------------------------------------------------------
+   jQuery UI appends dialogs to <body>, OUTSIDE .wc-datavis-themed.
+   We target .wcdv_dialog directly and use .dark / [data-theme="dark"]
+   ancestors (set on <html>) for dark mode.
+   ========================================================================== */
+
+/* --- Dialog shell --- */
+.wcdv_dialog.ui-dialog {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground, #171717) !important;
+  border: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  border-radius: var(--mieweb-radius-lg, 8px) !important;
+  box-shadow: var(--mieweb-shadow-modal, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
+  font-family: var(--mieweb-font-sans, inherit);
+  overflow: hidden;
+  min-width: 420px;
+}
+
+/* --- Titlebar --- */
+.wcdv_dialog .ui-dialog-titlebar {
+  background: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground, #171717) !important;
+  border-bottom: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  padding: 16px 20px !important;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.wcdv_dialog .ui-dialog-title {
+  color: var(--mieweb-foreground) !important;
+  font-weight: 700;
+  font-size: 1.5em;
+  letter-spacing: -0.01em;
+}
+
+/* --- Close button (×) --- */
+.wcdv_dialog .ui-dialog-titlebar-close {
+  background: transparent !important;
+  border: none !important;
+  color: var(--mieweb-primary-500, #38bdf8) !important;
+  opacity: 1;
+  cursor: pointer;
+  font-size: 0 !important;
+  padding: 2px 6px !important;
+  position: static !important;
+  float: none;
+  order: 2;
+  width: auto !important;
+  height: auto !important;
+  line-height: 1;
+  overflow: hidden;
+}
+
+.wcdv_dialog .ui-dialog-titlebar-close:hover {
+  color: var(--mieweb-primary-600, #0284c7) !important;
+}
+
+.wcdv_dialog .ui-dialog-titlebar-close .ui-icon,
+.wcdv_dialog .ui-dialog-titlebar-close .ui-button-icon-space,
+.wcdv_dialog .ui-dialog-titlebar-close .ui-button-text {
+  display: none !important;
+}
+
+.wcdv_dialog .ui-dialog-titlebar-close::after {
+  content: '\00d7';
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 400;
+}
+
+/* --- Content area --- */
+.wcdv_dialog .ui-dialog-content {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground) !important;
+  padding: 0 20px 14px !important;
+}
+
+/* --- Button pane (bottom bar with OK/Cancel/Reset) --- */
+.wcdv_dialog .ui-dialog-buttonpane {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  border-top: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  padding: 12px 20px !important;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  align-items: center;
+}
+
+.wcdv_dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+/* --- Icon buttons inside column config table rows --- */
+.wcdv_dialog .wcdv_icon_button,
+.wcdv_dialog button.wcdv_icon_button {
+  background: transparent !important;
+  border: none !important;
+  padding: 4px 6px !important;
+  color: var(--mieweb-primary-500, #38bdf8) !important;
+  font-size: 15px;
+  cursor: pointer;
+  transition: color 0.12s ease, transform 0.1s ease;
+  border-radius: var(--mieweb-radius-sm, 4px) !important;
+  line-height: 1;
+}
+
+.wcdv_dialog .wcdv_icon_button:hover,
+.wcdv_dialog button.wcdv_icon_button:hover {
+  color: var(--mieweb-primary-600, #0284c7) !important;
+  background: color-mix(in srgb, var(--mieweb-primary-500) 10%, transparent) !important;
+  transform: scale(1.1);
+}
+
+.wcdv_dialog .wcdv_icon_button .fa,
+.wcdv_dialog button.wcdv_icon_button .fa {
+  color: inherit !important;
+  font-size: 15px;
+}
+
+/* Off-state icons (dimmed) */
+.wcdv_dialog .wcdv_icon_checkbox_off {
+  opacity: 0.45;
+}
+
+.wcdv_dialog .wcdv_icon_checkbox_on {
+  opacity: 1;
+}
+
+/* --- Standard dialog buttons (OK, Cancel in buttonset) --- */
+.wcdv_dialog .ui-dialog-buttonset .ui-button,
+.wcdv_dialog .ui-dialog-buttonset button {
+  padding: 8px 20px !important;
+  font-weight: 600;
+  font-size: 0.9em;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  cursor: pointer;
+  transition: background-color 0.12s ease, box-shadow 0.12s ease;
+  font-family: var(--mieweb-font-sans, inherit);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* OK button — filled primary */
+.wcdv_dialog .ui-dialog-buttonset .ui-button:first-child,
+.wcdv_dialog .ui-dialog-buttonset button:first-child {
+  background-color: var(--mieweb-primary-500, #38bdf8) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--mieweb-primary-500, #38bdf8) !important;
+}
+
+.wcdv_dialog .ui-dialog-buttonset .ui-button:first-child:hover,
+.wcdv_dialog .ui-dialog-buttonset button:first-child:hover {
+  background-color: var(--mieweb-primary-600, #0284c7) !important;
+  border-color: var(--mieweb-primary-600, #0284c7) !important;
+}
+
+.wcdv_dialog .ui-dialog-buttonset .ui-button:first-child .fa,
+.wcdv_dialog .ui-dialog-buttonset button:first-child .fa {
+  color: #ffffff !important;
+}
+
+/* Cancel button — text style */
+.wcdv_dialog .ui-dialog-buttonset .ui-button:last-child,
+.wcdv_dialog .ui-dialog-buttonset button:last-child {
+  background-color: transparent !important;
+  color: var(--mieweb-muted-foreground, #737373) !important;
+  border: 1px solid transparent !important;
+}
+
+.wcdv_dialog .ui-dialog-buttonset .ui-button:last-child:hover,
+.wcdv_dialog .ui-dialog-buttonset button:last-child:hover {
+  background-color: var(--mieweb-muted) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+.wcdv_dialog .ui-dialog-buttonset .ui-button:last-child .fa,
+.wcdv_dialog .ui-dialog-buttonset button:last-child .fa {
+  color: inherit !important;
+}
+
+/* --- All other generic buttons inside dialogs (not icon buttons, not buttonset) --- */
+.wcdv_dialog .ui-button:not(.wcdv_icon_button):not(.ui-dialog-titlebar-close),
+.wcdv_dialog button:not(.wcdv_icon_button):not(.ui-dialog-titlebar-close) {
+  font-family: var(--mieweb-font-sans, inherit);
+  cursor: pointer;
+}
+
+/* Hide jQuery UI icon sprites — we use FontAwesome */
+.wcdv_dialog .ui-button .ui-icon {
+  background-image: none !important;
+}
+
+/* --- wcdv_button_bar (inside dialog content: Reset Column Order / OK / Cancel) --- */
+.wcdv_dialog .wcdv_button_bar {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  padding: 12px 0 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.wcdv_dialog .wcdv_button_bar button {
+  padding: 8px 20px !important;
+  font-weight: 600;
+  font-size: 0.9em;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Reset Column Order — filled teal with icon */
+.wcdv_dialog .wcdv_button_bar button:has(.fa-undo) {
+  background-color: var(--mieweb-primary-500, #38bdf8) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--mieweb-primary-500, #38bdf8) !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-undo):hover {
+  background-color: var(--mieweb-primary-600, #0284c7) !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-undo) .fa {
+  color: #ffffff !important;
+}
+
+/* OK / Okay button — filled primary */
+.wcdv_dialog .wcdv_button_bar button:has(.fa-check) {
+  background-color: var(--mieweb-primary-500, #38bdf8) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--mieweb-primary-500, #38bdf8) !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-check):hover {
+  background-color: var(--mieweb-primary-600, #0284c7) !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-check) .fa {
+  color: #ffffff !important;
+}
+
+/* Cancel — text-only style */
+.wcdv_dialog .wcdv_button_bar button:has(.fa-ban) {
+  background-color: transparent !important;
+  color: var(--mieweb-muted-foreground, #737373) !important;
+  border: 1px solid transparent !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-ban):hover {
+  background-color: var(--mieweb-muted) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+.wcdv_dialog .wcdv_button_bar button:has(.fa-ban) .fa {
+  color: inherit !important;
+}
+
+/* --- Tabs inside dialogs --- */
+.wcdv_dialog .ui-tabs {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.wcdv_dialog .ui-tabs-nav {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid var(--mieweb-border) !important;
+  padding: 0 !important;
+  margin-bottom: 12px;
+}
+
+.wcdv_dialog .ui-tabs-tab {
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  border-bottom: none !important;
+  margin-bottom: -1px;
+}
+
+.wcdv_dialog .ui-tabs-tab a {
+  color: var(--mieweb-muted-foreground) !important;
+  padding: 8px 16px !important;
+}
+
+.wcdv_dialog .ui-tabs-tab:hover a {
+  color: var(--mieweb-foreground) !important;
+}
+
+.wcdv_dialog .ui-tabs-tab.ui-tabs-active {
+  background: var(--mieweb-card) !important;
+  border-color: var(--mieweb-border) !important;
+  border-bottom-color: var(--mieweb-card) !important;
+  border-radius: var(--mieweb-radius-sm, 4px) var(--mieweb-radius-sm, 4px) 0 0 !important;
+}
+
+.wcdv_dialog .ui-tabs-tab.ui-tabs-active a {
+  color: var(--mieweb-foreground) !important;
+  font-weight: 600;
+}
+
+.wcdv_dialog .ui-tabs-panel {
+  background: transparent !important;
+  border: none !important;
+  color: var(--mieweb-foreground) !important;
+  padding: 8px 0 !important;
+}
+
+/* --- Column config table (Columns dialog) --- */
+.wcdv_colconfigwin_table {
+  border-collapse: collapse !important;
+  width: 100%;
+}
+
+.wcdv_colconfigwin_table tr {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  border-bottom: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  transition: background-color 0.12s ease;
+}
+
+.wcdv_colconfigwin_table thead tr {
+  background-color: var(--mieweb-muted, #f5f5f5) !important;
+}
+
+.wcdv_colconfigwin_table thead tr th {
+  color: var(--mieweb-muted-foreground, #737373) !important;
+  font-weight: 600;
+  font-size: 0.8em;
+  text-transform: capitalize;
+  letter-spacing: 0.02em;
+  padding: 10px 8px !important;
+  border-bottom: 2px solid var(--mieweb-border) !important;
+}
+
+.wcdv_colconfigwin_table tbody tr td {
+  color: var(--mieweb-foreground) !important;
+  padding: 10px 8px !important;
+  vertical-align: middle;
+}
+
+/* Field name column — bold */
+.wcdv_colconfigwin_table tbody tr td:nth-child(2) {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* Display name column — primary color */
+.wcdv_colconfigwin_table tbody tr td:nth-child(3) {
+  color: var(--mieweb-primary-500, #38bdf8) !important;
+}
+
+.wcdv_colconfigwin_table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 6%, var(--mieweb-card)) !important;
+}
+
+/* Drag handle column */
+.wcdv_colconfigwin_table .drag-handle {
+  cursor: grab;
+}
+
+.wcdv_colconfigwin_table .drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Checkbox styling inside column config */
+.wcdv_colconfigwin_table input[type="checkbox"] {
+  accent-color: var(--mieweb-primary-500);
+}
+
+/* --- Info banner inside dialogs --- */
+.wcdv_dialog .wcdv_info_banner {
+  background-color: color-mix(in srgb, var(--mieweb-primary-500) 8%, var(--mieweb-card)) !important;
+  border: 1px solid color-mix(in srgb, var(--mieweb-primary-500) 25%, var(--mieweb-border)) !important;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  color: var(--mieweb-foreground) !important;
+  padding: 8px 12px !important;
+  margin: 8px 0 !important;
+}
+
+.wcdv_dialog .wcdv_info_banner .fa {
+  color: var(--mieweb-primary-500) !important;
+}
+
+/* --- HR inside dialogs --- */
+.wcdv_dialog hr {
+  border-color: var(--mieweb-border) !important;
+  opacity: 0.5;
+}
+
+/* --- Inputs inside dialogs (textareas, selects, etc.) --- */
+.wcdv_dialog input,
+.wcdv_dialog select,
+.wcdv_dialog textarea {
+  background-color: var(--mieweb-background, #ffffff) !important;
+  color: var(--mieweb-foreground) !important;
+  border: 1px solid var(--mieweb-input, #e5e7eb) !important;
+  border-radius: var(--mieweb-radius-sm, 4px) !important;
+  padding: 4px 8px;
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+.wcdv_dialog input:focus,
+.wcdv_dialog select:focus,
+.wcdv_dialog textarea:focus {
+  border-color: var(--mieweb-primary-500) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mieweb-ring) 25%, transparent) !important;
+}
+
+/* --- Labels --- */
+.wcdv_dialog label {
+  color: var(--mieweb-foreground) !important;
+  font-weight: 500;
+}
+
+/* --- Resize handles --- */
+.wcdv_dialog .ui-resizable-handle {
+  background: transparent !important;
+}
+
+.wcdv_dialog .ui-resizable-se {
+  background-image: none !important;
+  color: var(--mieweb-border) !important;
+}
+
+/* ==========================================================================
+   DIALOGS WITHOUT .wcdv_dialog (generic ui-dialog from wcdatavis)
+   ========================================================================== */
+
+.ui-dialog:has(.wcdv_colconfigwin_table),
+.ui-dialog:has(.wcdv_button_bar) {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground, #171717) !important;
+  border: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  border-radius: var(--mieweb-radius-lg, 8px) !important;
+  box-shadow: var(--mieweb-shadow-modal, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
+  font-family: var(--mieweb-font-sans, inherit);
+  overflow: hidden;
+  min-width: 420px;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-titlebar,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-titlebar {
+  background: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground) !important;
+  border-bottom: 1px solid var(--mieweb-border) !important;
+  padding: 16px 20px !important;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-title,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-title {
+  color: var(--mieweb-foreground) !important;
+  font-weight: 700;
+  font-size: 1.5em;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-content,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-content {
+  background-color: var(--mieweb-card) !important;
+  color: var(--mieweb-foreground) !important;
+  padding: 0 20px 14px !important;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-titlebar-close,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-titlebar-close {
+  background: transparent !important;
+  border: none !important;
+  color: var(--mieweb-primary-500, #38bdf8) !important;
+  font-size: 0 !important;
+  position: static !important;
+  overflow: hidden;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-titlebar-close:hover,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-titlebar-close:hover {
+  color: var(--mieweb-primary-600, #0284c7) !important;
+}
+
+/* Icon buttons in generic dialogs */
+.ui-dialog:has(.wcdv_colconfigwin_table) .wcdv_icon_button,
+.ui-dialog:has(.wcdv_button_bar) .wcdv_icon_button {
+  background: transparent !important;
+  border: none !important;
+  padding: 4px 6px !important;
+  color: var(--mieweb-primary-500, #38bdf8) !important;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .wcdv_icon_button:hover,
+.ui-dialog:has(.wcdv_button_bar) .wcdv_icon_button:hover {
+  color: var(--mieweb-primary-600, #0284c7) !important;
+  background: color-mix(in srgb, var(--mieweb-primary-500) 10%, transparent) !important;
+}
+
+/* Bottom bar buttons in generic dialogs */
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-buttonset .ui-button,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-buttonset .ui-button {
+  padding: 8px 20px !important;
+  font-weight: 600;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  cursor: pointer;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-buttonset .ui-button:first-child,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-buttonset .ui-button:first-child {
+  background-color: var(--mieweb-primary-500) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--mieweb-primary-500) !important;
+}
+
+.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-buttonset .ui-button:last-child,
+.ui-dialog:has(.wcdv_button_bar) .ui-dialog-buttonset .ui-button:last-child {
+  background-color: transparent !important;
+  color: var(--mieweb-muted-foreground) !important;
+  border: 1px solid transparent !important;
+}
+
+/* ==========================================================================
+   CONTEXT MENU (jQuery contextMenu — also appended to body)
+   ========================================================================== */
+
+.context-menu-list {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground, #171717) !important;
+  border: 1px solid var(--mieweb-border, #e5e7eb) !important;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  box-shadow: var(--mieweb-shadow-dropdown) !important;
+  padding: 4px 0 !important;
+  font-family: var(--mieweb-font-sans, inherit);
+}
+
+.context-menu-item {
+  color: var(--mieweb-foreground) !important;
+  padding: 6px 24px 6px 12px !important;
+}
+
+.context-menu-item.context-menu-hover {
+  background-color: var(--mieweb-muted, #f5f5f5) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+.context-menu-separator {
+  border-bottom-color: var(--mieweb-border) !important;
+}
+
+.context-menu-icon.context-menu-icon--fa::before {
+  color: var(--mieweb-primary-500) !important;
+}
+
+/* ==========================================================================
+   TOOLTIPS (jQuery UI — appended to body)
+   ========================================================================== */
+
+.ui-tooltip {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  color: var(--mieweb-foreground) !important;
+  border: 1px solid var(--mieweb-border) !important;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+  box-shadow: var(--mieweb-shadow-dropdown) !important;
+  font-family: var(--mieweb-font-sans, inherit);
+  padding: 6px 10px !important;
+  font-size: 0.85em;
+}
+
+/* ==========================================================================
+   SUMO SELECT (dropdown overlay — can be outside .wc-datavis-themed)
+   ========================================================================== */
+
+.SumoSelect > .optWrapper {
+  background-color: var(--mieweb-card, #ffffff) !important;
+  border-color: var(--mieweb-border) !important;
+  color: var(--mieweb-foreground) !important;
+  box-shadow: var(--mieweb-shadow-dropdown) !important;
+  border-radius: var(--mieweb-radius-md, 6px) !important;
+}
+
+.SumoSelect > .optWrapper > .options li.opt {
+  color: var(--mieweb-foreground) !important;
+  border-bottom-color: var(--mieweb-border) !important;
+}
+
+.SumoSelect > .optWrapper > .options li.opt:hover,
+.SumoSelect > .optWrapper > .options li.opt.selected {
+  background-color: var(--mieweb-muted) !important;
+}
+
+.SumoSelect .select-all {
+  border-bottom-color: var(--mieweb-border) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+.SumoSelect .select-all.selected > span i,
+.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
+  background-color: var(--mieweb-primary-500) !important;
+}
+
+.SumoSelect > .CaptionCont {
+  border-color: var(--mieweb-input, #e5e7eb) !important;
+  background-color: var(--mieweb-background) !important;
+  color: var(--mieweb-foreground) !important;
+}
+
+.SumoSelect > .CaptionCont > span.placeholder {
+  color: var(--mieweb-muted-foreground) !important;
+}
+
+/* ==========================================================================
+   PRINT
+   ========================================================================== */
+
+@media print {
+  .wc-datavis-themed .wcdv_grid_toolbar,
+  .wc-datavis-themed .wcdvgrid_more {
+    display: none !important;
+  }
+
+  .wc-datavis-themed .wcdv_grid_table table > tbody > tr {
+    break-inside: avoid;
+  }
+
+  .wc-datavis-themed .wcdv_grid_table table thead th {
+    background-color: #e5e7eb !important;
+    color: #000 !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
diff --git a/src/components/DataVis/index.ts b/src/components/DataVis/index.ts
new file mode 100644
index 00000000..0e3301bf
--- /dev/null
+++ b/src/components/DataVis/index.ts
@@ -0,0 +1,8 @@
+export {
+  DataVis,
+  dataVisVariants,
+  type DataVisProps,
+  type DataVisSourceConfig,
+  type DataVisViewOptions,
+  type DataVisGridOptions,
+} from './DataVis';
diff --git a/src/components/DataVis/jquery-global.js b/src/components/DataVis/jquery-global.js
new file mode 100644
index 00000000..14ea31bb
--- /dev/null
+++ b/src/components/DataVis/jquery-global.js
@@ -0,0 +1,25 @@
+/**
+ * Sets jQuery as a global. Must be imported before jQuery UI
+ * and other jQuery plugins that check for window.jQuery.
+ */
+import jQuery from 'jquery';
+window.jQuery = jQuery;
+window.$ = jQuery;
+
+/**
+ * Suppress benign wcdatavis warnings that pollute the console.
+ * This MUST run before wcdatavis modules load because log.warn is
+ * bound via Function.prototype.bind(console.warn) at import time.
+ */
+const _origConsoleWarn = console.warn;
+const _wcdvSuppressed = [
+  'Unable to validate column configuration without data',
+  'Providing a name for this',
+];
+console.warn = function (...args) {
+  const msg = typeof args[0] === 'string' ? args[0] : '';
+  if (_wcdvSuppressed.some((p) => msg.includes(p))) {
+    return;
+  }
+  return _origConsoleWarn.apply(this, args);
+};
diff --git a/src/components/DataVis/wcdatavis-shim.js b/src/components/DataVis/wcdatavis-shim.js
new file mode 100644
index 00000000..14894b9d
--- /dev/null
+++ b/src/components/DataVis/wcdatavis-shim.js
@@ -0,0 +1,39 @@
+/**
+ * Shim for wcdatavis that:
+ * 1. Works around the broken `Perspective` export in upstream index.js
+ * 2. Exposes jQuery as a global (needed by jQuery UI's UMD wrapper)
+ * 3. Loads jQuery UI + other jQuery plugins as side-effects so that
+ *    $.fn.dialog, $.fn.sortable, etc. are available when Grid initializes
+ *
+ * The wcdatavis ESM source files only `import jQuery from 'jquery'` and assume
+ * jQuery UI is already loaded globally (via <script> tag). In a Vite/bundler
+ * context we need to explicitly import jQuery, set it as a global, then
+ * import the side-effect plugins.
+ */
+
+// 1. Import jQuery and expose it as a global (required by jQuery UI UMD)
+//    This MUST be a separate module so it executes before jquery-ui evaluates.
+//    ES module imports execute their module bodies in depth-first declaration order.
+import './jquery-global.js';
+
+// 2. Side-effect imports: extend $.fn with jQuery UI widgets + plugins
+import 'jquery-ui/dist/jquery-ui.js';
+import 'jquery-contextmenu';
+import 'sumoselect';
+import 'flatpickr';
+
+// 3. Now import wcdatavis source files (they use the extended jQuery)
+import { Source } from 'wcdatavis/src/source.js';
+import { ComputedView } from 'wcdatavis/src/computed_view.js';
+import { Grid } from 'wcdatavis/src/grid.js';
+import { Graph } from 'wcdatavis/src/graph.js';
+import { Prefs } from 'wcdatavis/src/prefs.js';
+
+export {
+  Source,
+  ComputedView as View,
+  ComputedView,
+  Prefs,
+  Grid,
+  Graph,
+};
diff --git a/src/components/DataVis/wcdatavis.d.ts b/src/components/DataVis/wcdatavis.d.ts
new file mode 100644
index 00000000..0e35817e
--- /dev/null
+++ b/src/components/DataVis/wcdatavis.d.ts
@@ -0,0 +1,90 @@
+/**
+ * Type declarations for @mieweb/wcdatavis
+ *
+ * This is an ambient module declaration for the optional peer dependency.
+ * It provides basic type information so TypeScript doesn't error on import.
+ * The actual types should come from the @mieweb/wcdatavis package when installed.
+ */
+declare module '@mieweb/wcdatavis' {
+  export class Source {
+    constructor(config: Record<string, unknown>);
+    destroy?(): void;
+  }
+
+  export class ComputedView {
+    constructor(source: Source, options?: Record<string, unknown>);
+    destroy?(): void;
+  }
+
+  export class Grid {
+    constructor(
+      config: { id: string; computedView: ComputedView; [key: string]: unknown },
+      options?: Record<string, unknown>
+    );
+    destroy?(): void;
+  }
+
+  /** Legacy global namespace export pattern */
+  const MIE: {
+    WC_DataVis: {
+      Source: typeof Source;
+      ComputedView: typeof ComputedView;
+      Grid: typeof Grid;
+    };
+  };
+
+  export default MIE;
+}
+
+declare module '@mieweb/wcdatavis/wcdatavis.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '@mieweb/wcdatavis/index.js' {
+  export { Source, ComputedView, Grid } from '@mieweb/wcdatavis';
+}
+
+/**
+ * Type declarations for wcdatavis (unscoped, v2.x / local dev)
+ */
+declare module 'wcdatavis' {
+  export class Source {
+    constructor(config: Record<string, unknown>);
+    destroy?(): void;
+  }
+
+  /** v2.x exports ComputedView as "View" */
+  export class View {
+    constructor(source: Source, options?: Record<string, unknown>);
+    destroy?(): void;
+  }
+
+  export { View as ComputedView };
+
+  export class Grid {
+    constructor(
+      config: { id: string; computedView: View; [key: string]: unknown },
+      options?: Record<string, unknown>
+    );
+    destroy?(): void;
+  }
+
+  export class Graph {
+    constructor(
+      config: Record<string, unknown>,
+      options?: Record<string, unknown>
+    );
+    destroy?(): void;
+  }
+}
+
+declare module 'wcdatavis/dist/wcdatavis.css' {
+  const content: string;
+  export default content;
+}
+
+declare module 'wcdatavis/dist/wcdatavis.css?url' {
+  const url: string;
+  export default url;
+}
diff --git a/src/index.ts b/src/index.ts
index 60f3f740..a366eb0f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,6 +23,7 @@ export * from './components/CommandPalette';
 export * from './components/ConnectionStatus';
 export * from './components/CookieConsent';
 export * from './components/CSVColumnMapper';
+export * from './components/DataVis';
 export * from './components/DateInput';
 export * from './components/DateRangePicker';
 export * from './components/DocumentScanner';

From 16c1dc5ad01fe3c06a4aabf96b1dc26a5d44e797 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 10 Feb 2026 20:57:56 -0500
Subject: [PATCH 2/6] fix(DataVis): fix CI failures for Prettier formatting and
 missing wcdatavis

The initial DataVis PR failed 4 of 6 CI jobs. This commit resolves all of them.

## Prettier Formatting (Lint and Type Check job)

Ran prettier --write on 4 files that had code style issues:
- DataVis.tsx
- DataVis.stories.tsx
- datavis-theme.css
- wcdatavis.d.ts

## CI-Resilient Storybook Build (Build Test, Visual Regression, Accessibility jobs)

The wcdatavis package is installed via a file: link to a sibling repo
(../../datavis/wcdatavis) which doesn't exist in CI. This caused the
Storybook build to fail when resolving wcdatavis imports.

Solution: conditional Vite aliases in .storybook/main.ts that detect
whether wcdatavis is actually installed.

- .storybook/main.ts: viteFinal now checks fs.existsSync() for
  node_modules/wcdatavis/src. If present, uses the full shim with
  jQuery globals and plugin aliases (existing behavior). If absent,
  aliases to lightweight stub modules so the build completes.

- wcdatavis-stub.js: Exports empty Source, ComputedView, Grid, Graph,
  Prefs classes. The DataVis component receives these from its dynamic
  import(), fails the class resolution check, and renders a graceful
  error state instead of crashing.

- wcdatavis-stub.css: Empty CSS file aliased in place of
  wcdatavis/dist/wcdatavis.css when the library isn't available.

This means CI builds Storybook successfully with DataVis stories
showing an error state, while local dev with wcdatavis installed
gets the full live grid experience.
---
 .storybook/main.ts                         |  83 +++++++------
 src/components/DataVis/DataVis.stories.tsx |  88 +++++++++++---
 src/components/DataVis/DataVis.tsx         | 106 +++++++++++------
 src/components/DataVis/datavis-theme.css   | 129 ++++++++++++++++-----
 src/components/DataVis/wcdatavis-stub.css  |   1 +
 src/components/DataVis/wcdatavis-stub.js   |  16 +++
 src/components/DataVis/wcdatavis.d.ts      |   6 +-
 7 files changed, 319 insertions(+), 110 deletions(-)
 create mode 100644 src/components/DataVis/wcdatavis-stub.css
 create mode 100644 src/components/DataVis/wcdatavis-stub.js

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 5302b6da..85cb6c77 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
+import fs from 'fs';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -18,45 +19,61 @@ const config: StorybookConfig = {
   },
   staticDirs: ['./public'],
   viteFinal: async (config) => {
-    // wcdatavis nested dependency root
-    const wcdatavisNodeModules = path.resolve(process.cwd(), 'node_modules/wcdatavis/node_modules');
+    const dataVisDir = path.resolve(process.cwd(), 'src/components/DataVis');
+    const wcdatavisSrc = path.resolve(process.cwd(), 'node_modules/wcdatavis/src');
+    const wcdatavisAvailable = fs.existsSync(wcdatavisSrc);
 
-    // Use our shim that works around the broken Perspective export in wcdatavis index.js
-    // and ensures Vite uses ESM exports instead of the "browser" field (window.MIE globals).
-    // Only alias the EXACT bare specifier 'wcdatavis', not 'wcdatavis/src/...' sub-paths.
     config.resolve = config.resolve || {};
     const existingAliases = Array.isArray(config.resolve.alias)
       ? config.resolve.alias
       : Object.entries(config.resolve.alias || {}).map(([find, replacement]) => ({ find, replacement }));
-    config.resolve.alias = [
-      ...existingAliases,
-      {
-        find: /^wcdatavis$/,
-        replacement: path.resolve(process.cwd(), 'src/components/DataVis/wcdatavis-shim.js'),
-      },
-      {
-        find: /^@mieweb\/wcdatavis$/,
-        replacement: path.resolve(process.cwd(), 'src/components/DataVis/wcdatavis-shim.js'),
-      },
-      // Resolve wcdatavis's jQuery plugins from its nested node_modules so they
-      // extend the same jQuery instance the source files import
-      { find: /^jquery-ui(.*)$/, replacement: path.join(wcdatavisNodeModules, 'jquery-ui$1') },
-      { find: /^jquery-contextmenu$/, replacement: path.join(wcdatavisNodeModules, 'jquery-contextmenu') },
-      { find: /^sumoselect$/, replacement: path.join(wcdatavisNodeModules, 'sumoselect') },
-      { find: /^flatpickr$/, replacement: path.join(wcdatavisNodeModules, 'flatpickr') },
-      { find: /^jquery$/, replacement: path.join(wcdatavisNodeModules, 'jquery') },
-    ];
 
-    // Pre-bundle wcdatavis and its jQuery plugins
-    config.optimizeDeps = config.optimizeDeps || {};
-    config.optimizeDeps.include = [
-      ...(config.optimizeDeps.include || []),
-      'wcdatavis/src/source.js',
-      'wcdatavis/src/computed_view.js',
-      'wcdatavis/src/grid.js',
-      'wcdatavis/src/graph.js',
-      'wcdatavis/src/prefs.js',
-    ];
+    if (wcdatavisAvailable) {
+      // Full wcdatavis integration — shim loads jQuery globals + plugins,
+      // then re-exports wcdatavis classes for the DataVis component.
+      const wcdatavisNodeModules = path.resolve(process.cwd(), 'node_modules/wcdatavis/node_modules');
+
+      config.resolve.alias = [
+        ...existingAliases,
+        {
+          find: /^wcdatavis$/,
+          replacement: path.resolve(dataVisDir, 'wcdatavis-shim.js'),
+        },
+        {
+          find: /^@mieweb\/wcdatavis$/,
+          replacement: path.resolve(dataVisDir, 'wcdatavis-shim.js'),
+        },
+        // Resolve wcdatavis's jQuery plugins from its nested node_modules so they
+        // extend the same jQuery instance the source files import
+        { find: /^jquery-ui(.*)$/, replacement: path.join(wcdatavisNodeModules, 'jquery-ui$1') },
+        { find: /^jquery-contextmenu$/, replacement: path.join(wcdatavisNodeModules, 'jquery-contextmenu') },
+        { find: /^sumoselect$/, replacement: path.join(wcdatavisNodeModules, 'sumoselect') },
+        { find: /^flatpickr$/, replacement: path.join(wcdatavisNodeModules, 'flatpickr') },
+        { find: /^jquery$/, replacement: path.join(wcdatavisNodeModules, 'jquery') },
+      ];
+
+      // Pre-bundle wcdatavis and its jQuery plugins
+      config.optimizeDeps = config.optimizeDeps || {};
+      config.optimizeDeps.include = [
+        ...(config.optimizeDeps.include || []),
+        'wcdatavis/src/source.js',
+        'wcdatavis/src/computed_view.js',
+        'wcdatavis/src/grid.js',
+        'wcdatavis/src/graph.js',
+        'wcdatavis/src/prefs.js',
+      ];
+    } else {
+      // wcdatavis not installed (CI, fresh checkouts) — alias to lightweight
+      // stubs so the Storybook build completes. DataVis stories will render
+      // an error state instead of the live grid.
+      config.resolve.alias = [
+        ...existingAliases,
+        { find: /^wcdatavis\/dist\/wcdatavis\.css/, replacement: path.resolve(dataVisDir, 'wcdatavis-stub.css') },
+        { find: /^wcdatavis$/, replacement: path.resolve(dataVisDir, 'wcdatavis-stub.js') },
+        { find: /^@mieweb\/wcdatavis$/, replacement: path.resolve(dataVisDir, 'wcdatavis-stub.js') },
+      ];
+    }
+
     return config;
   },
 };
diff --git a/src/components/DataVis/DataVis.stories.tsx b/src/components/DataVis/DataVis.stories.tsx
index f8998c2c..bcf355ba 100644
--- a/src/components/DataVis/DataVis.stories.tsx
+++ b/src/components/DataVis/DataVis.stories.tsx
@@ -119,16 +119,70 @@ const sampleHttpSource: DataVisProps['source'] = {
 const sampleJsonSource: DataVisProps['source'] = {
   type: 'json',
   data: [
-    { name: 'Apple', category: 'Fruit', price: 1.2, quantity: 150, inStock: true },
-    { name: 'Banana', category: 'Fruit', price: 0.5, quantity: 200, inStock: true },
-    { name: 'Carrot', category: 'Vegetable', price: 0.8, quantity: 100, inStock: true },
-    { name: 'Durian', category: 'Fruit', price: 12.0, quantity: 5, inStock: false },
-    { name: 'Eggplant', category: 'Vegetable', price: 2.5, quantity: 75, inStock: true },
+    {
+      name: 'Apple',
+      category: 'Fruit',
+      price: 1.2,
+      quantity: 150,
+      inStock: true,
+    },
+    {
+      name: 'Banana',
+      category: 'Fruit',
+      price: 0.5,
+      quantity: 200,
+      inStock: true,
+    },
+    {
+      name: 'Carrot',
+      category: 'Vegetable',
+      price: 0.8,
+      quantity: 100,
+      inStock: true,
+    },
+    {
+      name: 'Durian',
+      category: 'Fruit',
+      price: 12.0,
+      quantity: 5,
+      inStock: false,
+    },
+    {
+      name: 'Eggplant',
+      category: 'Vegetable',
+      price: 2.5,
+      quantity: 75,
+      inStock: true,
+    },
     { name: 'Fig', category: 'Fruit', price: 3.0, quantity: 30, inStock: true },
-    { name: 'Grape', category: 'Fruit', price: 2.0, quantity: 180, inStock: true },
-    { name: 'Honeydew', category: 'Fruit', price: 4.5, quantity: 20, inStock: false },
-    { name: 'Iceberg Lettuce', category: 'Vegetable', price: 1.5, quantity: 90, inStock: true },
-    { name: 'Jalapeño', category: 'Vegetable', price: 1.0, quantity: 60, inStock: true },
+    {
+      name: 'Grape',
+      category: 'Fruit',
+      price: 2.0,
+      quantity: 180,
+      inStock: true,
+    },
+    {
+      name: 'Honeydew',
+      category: 'Fruit',
+      price: 4.5,
+      quantity: 20,
+      inStock: false,
+    },
+    {
+      name: 'Iceberg Lettuce',
+      category: 'Vegetable',
+      price: 1.5,
+      quantity: 90,
+      inStock: true,
+    },
+    {
+      name: 'Jalapeño',
+      category: 'Vegetable',
+      price: 1.0,
+      quantity: 60,
+      inStock: true,
+    },
   ],
 };
 
@@ -235,7 +289,7 @@ export const CustomLoading: Story = {
     },
     loading: true,
     loadingMessage: (
-      <div className="flex flex-col items-center gap-3 text-primary-600">
+      <div className="text-primary-600 flex flex-col items-center gap-3">
         <div className="h-8 w-8 animate-spin rounded-full border-4 border-current border-t-transparent" />
         <span className="text-sm font-medium">Fetching data...</span>
       </div>
@@ -335,13 +389,17 @@ export const LightDarkComparison: Story = {
     (Story) => (
       <div className="flex flex-col gap-6">
         <div>
-          <h3 className="mb-2 text-sm font-medium text-neutral-500">Light Mode</h3>
+          <h3 className="mb-2 text-sm font-medium text-neutral-500">
+            Light Mode
+          </h3>
           <div className="rounded-xl bg-white p-4">
             <Story />
           </div>
         </div>
         <div>
-          <h3 className="mb-2 text-sm font-medium text-neutral-400">Dark Mode</h3>
+          <h3 className="mb-2 text-sm font-medium text-neutral-400">
+            Dark Mode
+          </h3>
           <div className="dark rounded-xl bg-neutral-950 p-4" data-theme="dark">
             <Story />
           </div>
@@ -408,10 +466,8 @@ export const CustomErrorMessage: Story = {
     errorMessage: (
       <div className="flex flex-col items-center gap-2">
         <span className="text-2xl">⚠️</span>
-        <span className="font-medium text-foreground">
-          Unable to load data
-        </span>
-        <span className="text-xs text-muted-foreground">
+        <span className="text-foreground font-medium">Unable to load data</span>
+        <span className="text-muted-foreground text-xs">
           Please check your network connection and try again.
         </span>
       </div>
diff --git a/src/components/DataVis/DataVis.tsx b/src/components/DataVis/DataVis.tsx
index b4e282f9..a578d14e 100644
--- a/src/components/DataVis/DataVis.tsx
+++ b/src/components/DataVis/DataVis.tsx
@@ -76,8 +76,7 @@ const dataVisVariants = cva('wc-datavis-themed w-full', {
      */
     variant: {
       default: '',
-      bordered:
-        'rounded-lg border border-border shadow-sm',
+      bordered: 'rounded-lg border border-border shadow-sm',
       card: 'rounded-lg border-0 shadow-card bg-card',
     },
     /**
@@ -228,8 +227,9 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
     // Combined ref handling
     const setRefs = React.useCallback(
       (node: HTMLDivElement | null) => {
-        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current =
-          node;
+        (
+          containerRef as React.MutableRefObject<HTMLDivElement | null>
+        ).current = node;
         if (typeof ref === 'function') {
           ref(node);
         } else if (ref) {
@@ -248,13 +248,22 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
         try {
           const { grid, view, source: src } = instancesRef.current;
           // DataVis objects may have destroy/dispose methods
-          if (grid && typeof (grid as Record<string, unknown>).destroy === 'function') {
+          if (
+            grid &&
+            typeof (grid as Record<string, unknown>).destroy === 'function'
+          ) {
             (grid as { destroy: () => void }).destroy();
           }
-          if (view && typeof (view as Record<string, unknown>).destroy === 'function') {
+          if (
+            view &&
+            typeof (view as Record<string, unknown>).destroy === 'function'
+          ) {
             (view as { destroy: () => void }).destroy();
           }
-          if (src && typeof (src as Record<string, unknown>).destroy === 'function') {
+          if (
+            src &&
+            typeof (src as Record<string, unknown>).destroy === 'function'
+          ) {
             (src as { destroy: () => void }).destroy();
           }
         } catch {
@@ -265,7 +274,9 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
 
       // Clean up temporary window variable used for json/array source bridging
       if (localVarRef.current) {
-        delete (window as unknown as Record<string, unknown>)[localVarRef.current];
+        delete (window as unknown as Record<string, unknown>)[
+          localVarRef.current
+        ];
         localVarRef.current = null;
       }
 
@@ -293,7 +304,10 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
         // plugins before the wcdatavis source files.
         // For @mieweb/wcdatavis (v3+), consumers should alias it to 'wcdatavis'
         // in their build config.
-        const wcdatavis = (await import('wcdatavis')) as Record<string, unknown>;
+        const wcdatavis = (await import('wcdatavis')) as Record<
+          string,
+          unknown
+        >;
 
         // Resolve the actual exports — handle both default and named exports
         const DataVisModule = wcdatavis.default
@@ -420,14 +434,20 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
         const wrappedError =
           err instanceof Error
             ? err
-            : new Error(
-                `DataVis initialization failed: ${String(err)}`
-              );
+            : new Error(`DataVis initialization failed: ${String(err)}`);
         setError(wrappedError);
         setState('error');
         onError?.(wrappedError);
       }
-    }, [source, viewOptions, gridOptions, destroyInstances, onGridReady, onError, onDataLoaded]);
+    }, [
+      source,
+      viewOptions,
+      gridOptions,
+      destroyInstances,
+      onGridReady,
+      onError,
+      onDataLoaded,
+    ]);
 
     // Mount / source change effect
     React.useEffect(() => {
@@ -464,17 +484,40 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
       const propagateVars = (target: HTMLElement) => {
         const cs = getComputedStyle(container);
         const vars = [
-          'background', 'foreground', 'card', 'card-foreground',
-          'muted', 'muted-foreground', 'border', 'input', 'ring',
-          'destructive', 'destructive-foreground',
-          'success', 'success-foreground',
-          'warning', 'warning-foreground',
-          'primary-50', 'primary-100', 'primary-200', 'primary-300',
-          'primary-400', 'primary-500', 'primary-600', 'primary-700',
-          'primary-800', 'primary-900', 'primary-950',
-          'font-sans', 'font-mono',
-          'radius-sm', 'radius-md', 'radius-lg',
-          'shadow-card', 'shadow-dropdown', 'shadow-modal',
+          'background',
+          'foreground',
+          'card',
+          'card-foreground',
+          'muted',
+          'muted-foreground',
+          'border',
+          'input',
+          'ring',
+          'destructive',
+          'destructive-foreground',
+          'success',
+          'success-foreground',
+          'warning',
+          'warning-foreground',
+          'primary-50',
+          'primary-100',
+          'primary-200',
+          'primary-300',
+          'primary-400',
+          'primary-500',
+          'primary-600',
+          'primary-700',
+          'primary-800',
+          'primary-900',
+          'primary-950',
+          'font-sans',
+          'font-mono',
+          'radius-sm',
+          'radius-md',
+          'radius-lg',
+          'shadow-card',
+          'shadow-dropdown',
+          'shadow-modal',
         ];
         for (const v of vars) {
           const val = cs.getPropertyValue(`--mieweb-${v}`).trim();
@@ -538,8 +581,7 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
     const containerStyle = React.useMemo((): React.CSSProperties => {
       const style: React.CSSProperties = {};
       if (height !== undefined) {
-        style.height =
-          typeof height === 'number' ? `${height}px` : height;
+        style.height = typeof height === 'number' ? `${height}px` : height;
       }
       return style;
     }, [height]);
@@ -559,7 +601,7 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
       >
         {/* Loading overlay */}
         {isLoading && (
-          <div className="flex items-center justify-center p-8 text-muted-foreground">
+          <div className="text-muted-foreground flex items-center justify-center p-8">
             {typeof loadingMessage === 'string' ? (
               <div className="flex items-center gap-2">
                 <svg
@@ -592,13 +634,11 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
 
         {/* Error state */}
         {isError && (
-          <div className="flex flex-col items-center justify-center gap-2 p-8 text-destructive">
+          <div className="text-destructive flex flex-col items-center justify-center gap-2 p-8">
             {errorMessage ?? (
               <>
-                <span className="font-medium">
-                  Failed to load DataVis
-                </span>
-                <span className="text-xs text-muted-foreground">
+                <span className="font-medium">Failed to load DataVis</span>
+                <span className="text-muted-foreground text-xs">
                   {error.message}
                 </span>
               </>
@@ -608,7 +648,7 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
 
         {/* Idle / empty state (before initialization) */}
         {isIdle && emptyMessage && (
-          <div className="flex items-center justify-center p-8 text-muted-foreground">
+          <div className="text-muted-foreground flex items-center justify-center p-8">
             {emptyMessage}
           </div>
         )}
diff --git a/src/components/DataVis/datavis-theme.css b/src/components/DataVis/datavis-theme.css
index 3139ac9e..47f317d2 100644
--- a/src/components/DataVis/datavis-theme.css
+++ b/src/components/DataVis/datavis-theme.css
@@ -109,7 +109,7 @@
   color: var(--mieweb-foreground);
 }
 
-.wc-datavis-themed .wcdv_grid_toolbar button[disabled=disabled] .fa {
+.wc-datavis-themed .wcdv_grid_toolbar button[disabled='disabled'] .fa {
   color: var(--mieweb-border);
 }
 
@@ -215,7 +215,11 @@
 }
 
 /* Field chips inside controls */
-.wc-datavis-themed .wcdv_control_pane ul.wcdv_control_horizontal li .wcdv_field {
+.wc-datavis-themed
+  .wcdv_control_pane
+  ul.wcdv_control_horizontal
+  li
+  .wcdv_field {
   border-color: var(--mieweb-border);
   background-color: var(--mieweb-background);
   color: var(--mieweb-foreground);
@@ -238,7 +242,8 @@
   color: var(--mieweb-warning);
 }
 
-.wc-datavis-themed .ui-widget.ui-widget-content.wcdv_aggregate_control_error_tooltip {
+.wc-datavis-themed
+  .ui-widget.ui-widget-content.wcdv_aggregate_control_error_tooltip {
   border-color: var(--mieweb-warning);
   color: var(--mieweb-foreground);
   background-color: var(--mieweb-background);
@@ -301,7 +306,11 @@
 }
 
 .wc-datavis-themed .wcdv_grid_table table thead th:hover {
-  background-color: color-mix(in srgb, var(--mieweb-muted) 80%, var(--mieweb-foreground)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-muted) 80%,
+    var(--mieweb-foreground)
+  ) !important;
 }
 
 /* Secondary header row (group headers, subheaders) */
@@ -313,7 +322,11 @@
 
 /* Active sort column header */
 .wc-datavis-themed .wcdv_sort_column_active.wcdv_bg-primary {
-  background-color: color-mix(in srgb, var(--mieweb-muted) 70%, var(--mieweb-foreground)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-muted) 70%,
+    var(--mieweb-foreground)
+  ) !important;
   color: var(--mieweb-foreground) !important;
 }
 
@@ -353,12 +366,20 @@
 
 /* Selected row */
 .wc-datavis-themed .wcdv_grid_table table td.wcdv_selected_row {
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 18%, transparent) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 18%,
+    transparent
+  ) !important;
 }
 
 /* Drill-down active */
 .wc-datavis-themed .wcdv_grid_table table td.wcdv_drill_down:active {
-  background-color: color-mix(in srgb, var(--mieweb-warning) 25%, transparent) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-warning) 25%,
+    transparent
+  ) !important;
 }
 
 /* Dividers and pivot boundaries */
@@ -469,13 +490,21 @@
 
 .wc-datavis-themed .wcdv_warning_banner {
   border-color: var(--mieweb-destructive);
-  background-color: color-mix(in srgb, var(--mieweb-destructive) 12%, var(--mieweb-background));
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-destructive) 12%,
+    var(--mieweb-background)
+  );
   color: var(--mieweb-foreground);
 }
 
 .wc-datavis-themed .wcdv_info_banner {
   border-color: var(--mieweb-primary-500);
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 10%, var(--mieweb-background));
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 10%,
+    var(--mieweb-background)
+  );
   color: var(--mieweb-primary-900);
 }
 
@@ -529,7 +558,11 @@
    ========================================================================== */
 
 .wc-datavis-themed .wcdv_drop_target_hover {
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 11%, transparent) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 11%,
+    transparent
+  ) !important;
 }
 
 .wc-datavis-themed .wcdv_drag_handle.ui-draggable-dragging {
@@ -550,7 +583,8 @@
 }
 
 .wc-datavis-themed .context-menu-item.context-menu-hover,
-.wc-datavis-themed .context-menu-hover.context-menu-icon.context-menu-icon--fa::before {
+.wc-datavis-themed
+  .context-menu-hover.context-menu-icon.context-menu-icon--fa::before {
   background-color: var(--mieweb-muted);
   color: var(--mieweb-foreground);
 }
@@ -591,7 +625,11 @@
 }
 
 .wc-datavis-themed .wcdv_colconfigwin_table tbody tr:hover {
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 10%, var(--mieweb-background));
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 10%,
+    var(--mieweb-background)
+  );
 }
 
 /* ==========================================================================
@@ -606,11 +644,11 @@
    BUTTON BAR
    ========================================================================== */
 
-.wc-datavis-themed div.wcdv_button_bar button[data-role=ok] span.fa {
+.wc-datavis-themed div.wcdv_button_bar button[data-role='ok'] span.fa {
   color: var(--mieweb-success);
 }
 
-.wc-datavis-themed div.wcdv_button_bar button[data-role=cancel] span.fa {
+.wc-datavis-themed div.wcdv_button_bar button[data-role='cancel'] span.fa {
   color: var(--mieweb-destructive);
 }
 
@@ -619,7 +657,13 @@
    ========================================================================== */
 
 .wc-datavis-themed .SumoSelect .select-all.selected > span i,
-.wc-datavis-themed .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
+.wc-datavis-themed
+  .SumoSelect
+  > .optWrapper.multiple
+  > .options
+  li.opt.selected
+  span
+  i {
   background-color: var(--mieweb-primary-500);
 }
 
@@ -747,7 +791,10 @@
   color: var(--mieweb-foreground, #171717) !important;
   border: 1px solid var(--mieweb-border, #e5e7eb) !important;
   border-radius: var(--mieweb-radius-lg, 8px) !important;
-  box-shadow: var(--mieweb-shadow-modal, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
+  box-shadow: var(
+    --mieweb-shadow-modal,
+    0 10px 15px -3px rgb(0 0 0 / 0.1)
+  ) !important;
   font-family: var(--mieweb-font-sans, inherit);
   overflow: hidden;
   min-width: 420px;
@@ -840,7 +887,9 @@
   color: var(--mieweb-primary-500, #38bdf8) !important;
   font-size: 15px;
   cursor: pointer;
-  transition: color 0.12s ease, transform 0.1s ease;
+  transition:
+    color 0.12s ease,
+    transform 0.1s ease;
   border-radius: var(--mieweb-radius-sm, 4px) !important;
   line-height: 1;
 }
@@ -848,7 +897,11 @@
 .wcdv_dialog .wcdv_icon_button:hover,
 .wcdv_dialog button.wcdv_icon_button:hover {
   color: var(--mieweb-primary-600, #0284c7) !important;
-  background: color-mix(in srgb, var(--mieweb-primary-500) 10%, transparent) !important;
+  background: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 10%,
+    transparent
+  ) !important;
   transform: scale(1.1);
 }
 
@@ -875,7 +928,9 @@
   font-size: 0.9em;
   border-radius: var(--mieweb-radius-md, 6px) !important;
   cursor: pointer;
-  transition: background-color 0.12s ease, box-shadow 0.12s ease;
+  transition:
+    background-color 0.12s ease,
+    box-shadow 0.12s ease;
   font-family: var(--mieweb-font-sans, inherit);
   display: inline-flex;
   align-items: center;
@@ -1092,7 +1147,11 @@
 }
 
 .wcdv_colconfigwin_table tbody tr:hover {
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 6%, var(--mieweb-card)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 6%,
+    var(--mieweb-card)
+  ) !important;
 }
 
 /* Drag handle column */
@@ -1105,14 +1164,19 @@
 }
 
 /* Checkbox styling inside column config */
-.wcdv_colconfigwin_table input[type="checkbox"] {
+.wcdv_colconfigwin_table input[type='checkbox'] {
   accent-color: var(--mieweb-primary-500);
 }
 
 /* --- Info banner inside dialogs --- */
 .wcdv_dialog .wcdv_info_banner {
-  background-color: color-mix(in srgb, var(--mieweb-primary-500) 8%, var(--mieweb-card)) !important;
-  border: 1px solid color-mix(in srgb, var(--mieweb-primary-500) 25%, var(--mieweb-border)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 8%,
+    var(--mieweb-card)
+  ) !important;
+  border: 1px solid
+    color-mix(in srgb, var(--mieweb-primary-500) 25%, var(--mieweb-border)) !important;
   border-radius: var(--mieweb-radius-md, 6px) !important;
   color: var(--mieweb-foreground) !important;
   padding: 8px 12px !important;
@@ -1175,7 +1239,10 @@
   color: var(--mieweb-foreground, #171717) !important;
   border: 1px solid var(--mieweb-border, #e5e7eb) !important;
   border-radius: var(--mieweb-radius-lg, 8px) !important;
-  box-shadow: var(--mieweb-shadow-modal, 0 10px 15px -3px rgb(0 0 0 / 0.1)) !important;
+  box-shadow: var(
+    --mieweb-shadow-modal,
+    0 10px 15px -3px rgb(0 0 0 / 0.1)
+  ) !important;
   font-family: var(--mieweb-font-sans, inherit);
   overflow: hidden;
   min-width: 420px;
@@ -1235,7 +1302,11 @@
 .ui-dialog:has(.wcdv_colconfigwin_table) .wcdv_icon_button:hover,
 .ui-dialog:has(.wcdv_button_bar) .wcdv_icon_button:hover {
   color: var(--mieweb-primary-600, #0284c7) !important;
-  background: color-mix(in srgb, var(--mieweb-primary-500) 10%, transparent) !important;
+  background: color-mix(
+    in srgb,
+    var(--mieweb-primary-500) 10%,
+    transparent
+  ) !important;
 }
 
 /* Bottom bar buttons in generic dialogs */
@@ -1247,14 +1318,18 @@
   cursor: pointer;
 }
 
-.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-buttonset .ui-button:first-child,
+.ui-dialog:has(.wcdv_colconfigwin_table)
+  .ui-dialog-buttonset
+  .ui-button:first-child,
 .ui-dialog:has(.wcdv_button_bar) .ui-dialog-buttonset .ui-button:first-child {
   background-color: var(--mieweb-primary-500) !important;
   color: #ffffff !important;
   border: 1px solid var(--mieweb-primary-500) !important;
 }
 
-.ui-dialog:has(.wcdv_colconfigwin_table) .ui-dialog-buttonset .ui-button:last-child,
+.ui-dialog:has(.wcdv_colconfigwin_table)
+  .ui-dialog-buttonset
+  .ui-button:last-child,
 .ui-dialog:has(.wcdv_button_bar) .ui-dialog-buttonset .ui-button:last-child {
   background-color: transparent !important;
   color: var(--mieweb-muted-foreground) !important;
diff --git a/src/components/DataVis/wcdatavis-stub.css b/src/components/DataVis/wcdatavis-stub.css
new file mode 100644
index 00000000..4b3faa91
--- /dev/null
+++ b/src/components/DataVis/wcdatavis-stub.css
@@ -0,0 +1 @@
+/* Stub — used when wcdatavis is not installed (CI, fresh checkouts) */
diff --git a/src/components/DataVis/wcdatavis-stub.js b/src/components/DataVis/wcdatavis-stub.js
new file mode 100644
index 00000000..b86c1382
--- /dev/null
+++ b/src/components/DataVis/wcdatavis-stub.js
@@ -0,0 +1,16 @@
+/**
+ * Stub module for when wcdatavis is not installed (CI, fresh checkouts).
+ *
+ * The Storybook Vite config aliases 'wcdatavis' to this file when the real
+ * library isn't detected at node_modules/wcdatavis/src. DataVis.tsx will
+ * receive these empty classes from its dynamic import(), fail the class
+ * resolution check, and display a graceful error state.
+ */
+
+class Source {}
+class ComputedView {}
+class Grid {}
+class Graph {}
+class Prefs {}
+
+export { Source, ComputedView, ComputedView as View, Grid, Graph, Prefs };
diff --git a/src/components/DataVis/wcdatavis.d.ts b/src/components/DataVis/wcdatavis.d.ts
index 0e35817e..45656dfe 100644
--- a/src/components/DataVis/wcdatavis.d.ts
+++ b/src/components/DataVis/wcdatavis.d.ts
@@ -18,7 +18,11 @@ declare module '@mieweb/wcdatavis' {
 
   export class Grid {
     constructor(
-      config: { id: string; computedView: ComputedView; [key: string]: unknown },
+      config: {
+        id: string;
+        computedView: ComputedView;
+        [key: string]: unknown;
+      },
       options?: Record<string, unknown>
     );
     destroy?(): void;

From 9860333d3b3226b8811ba84d79b4acad27262826 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 10 Feb 2026 21:14:34 -0500
Subject: [PATCH 3/6] refactor(DataVis): address Copilot code review feedback

Address 5 of 7 review comments from the Copilot pull request reviewer
on PR #89, with the remaining 2 acknowledged as intentional deferrals.

Changes:

1. Replace Math.random() with React.useId() for gridIdRef (line 214)
   - Eliminates SSR/hydration mismatch risk by producing deterministic,
     stable IDs across server and client renders.
   - Colons in useId() output are sanitized to hyphens for DOM id
     compatibility.

2. Fix useEffect dependency array (line 467)
   - Replaced manual [source.type, source.url, JSON.stringify(source.data)]
     with [initializeDataVis, destroyInstances].
   - initializeDataVis is a useCallback that already captures source,
     viewOptions, gridOptions, and all callback props in its deps, so
     the effect now correctly re-triggers when ANY of those change.
   - Previously, viewOptions/gridOptions updates were silently ignored.
   - Removes both eslint-disable comments for react-hooks/exhaustive-deps.

3. Remove JSON.stringify(source.data) from dependency array (line 467)
   - Resolved automatically by fix #2 above.
   - Eliminates the risk of expensive serialization on large datasets
     and potential throws on circular structures.

4. Remove unused dv-brand-* CSS class names from brand variants (line 99)
   - No corresponding CSS rules existed anywhere in the repo.
   - Brand theming is handled entirely via CSS custom properties set by
     ThemeProvider, making these class names dead code.
   - All brand variant values set to empty strings (preserving the
     variant type system for future use).

5. Fix import specifier mismatch with peer dependency (line 315)
   - Now tries import('@mieweb/wcdatavis') first, matching the declared
     peerDependency name.
   - Falls back to import('wcdatavis') for local dev (file: dep) and
     Storybook (Vite alias to shim).
   - Consumers who install the scoped package no longer need custom
     build aliases.

Deferred (not changed, explained in PR review comments):
- datavis-theme.css not in dist/: DataVis not yet in tsup entry points.
- file: devDependency: Intentional local dev workflow; CI uses stubs.
---
 src/components/DataVis/DataVis.tsx | 56 +++++++++++++++---------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/DataVis/DataVis.tsx b/src/components/DataVis/DataVis.tsx
index a578d14e..ebc431e6 100644
--- a/src/components/DataVis/DataVis.tsx
+++ b/src/components/DataVis/DataVis.tsx
@@ -92,11 +92,11 @@ const dataVisVariants = cva('wc-datavis-themed w-full', {
      */
     brand: {
       default: '',
-      mieweb: 'dv-brand-mieweb',
-      bluehive: 'dv-brand-bluehive',
-      waggleline: 'dv-brand-waggleline',
-      webchart: 'dv-brand-webchart',
-      'enterprise-health': 'dv-brand-enterprise-health',
+      mieweb: '',
+      bluehive: '',
+      waggleline: '',
+      webchart: '',
+      'enterprise-health': '',
     },
   },
   defaultVariants: {
@@ -210,8 +210,9 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
     ref
   ) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const gridInstanceId = React.useId();
     const gridIdRef = React.useRef<string>(
-      `datavis-${Math.random().toString(36).slice(2, 11)}`
+      `datavis-${gridInstanceId.replace(/:/g, '-')}`
     );
 
     // Hold references to DataVis instances for cleanup
@@ -299,20 +300,27 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
       setError(null);
 
       try {
-        // Dynamic import — uses 'wcdatavis' package name.
-        // In Storybook, this is aliased to our shim that loads jQuery UI
-        // plugins before the wcdatavis source files.
-        // For @mieweb/wcdatavis (v3+), consumers should alias it to 'wcdatavis'
-        // in their build config.
-        const wcdatavis = (await import('wcdatavis')) as Record<
-          string,
-          unknown
-        >;
+        // Prefer the scoped package name declared as a peer dependency.
+        // Fall back to the unscoped alias for local/dev or Storybook setups.
+        let wcdatavisModule: Record<string, unknown>;
+        try {
+          wcdatavisModule = (await import('@mieweb/wcdatavis')) as Record<
+            string,
+            unknown
+          >;
+        } catch {
+          // Scoped package not available — fall back to the legacy/unscoped
+          // name (used in Storybook via Vite aliases, or local dev).
+          wcdatavisModule = (await import('wcdatavis')) as Record<
+            string,
+            unknown
+          >;
+        }
 
         // Resolve the actual exports — handle both default and named exports
-        const DataVisModule = wcdatavis.default
-          ? (wcdatavis.default as Record<string, unknown>)
-          : wcdatavis;
+        const DataVisModule = wcdatavisModule.default
+          ? (wcdatavisModule.default as Record<string, unknown>)
+          : wcdatavisModule;
 
         // Try various export patterns the library may use:
         //   Named exports: Source, ComputedView/View, Grid
@@ -449,22 +457,14 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
       onDataLoaded,
     ]);
 
-    // Mount / source change effect
+    // Mount / source / option change effect
     React.useEffect(() => {
       initializeDataVis();
 
       return () => {
         destroyInstances();
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-      // Re-initialize when source config changes
-      source.type,
-      source.url,
-      // We intentionally use a serialized key for data changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      JSON.stringify(source.data),
-    ]);
+    }, [initializeDataVis, destroyInstances]);
 
     // -----------------------------------------------------------------------
     // Propagate theme variables to body-level dialogs/popups

From 4809a1a34083e79e34d17cef5a3c98c5895447a7 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 10 Feb 2026 21:28:53 -0500
Subject: [PATCH 4/6] fix(DataVis): make wcdatavis stubs throw on construction
 to prevent blank grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wcdatavis-stub.js module (used in CI and fresh checkouts where the
real wcdatavis library isn't installed) was exporting empty classes that
passed the truthiness check in DataVis.tsx. This caused the component to
silently construct useless empty objects, fire callbacks with them, and
render a blank grid div with no content — instead of showing the error
state.

Each stub class now throws a descriptive error on construction:
"wcdatavis is not installed. Install @mieweb/wcdatavis to use the
DataVis component."

The component's existing try/catch in initializeDataVis catches this,
sets the error state, and renders the red error UI with the message.
The Storybook build still succeeds because the classes are only
constructed at runtime, not at build/import time.
---
 src/components/DataVis/wcdatavis-stub.js | 39 +++++++++++++++++++-----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/DataVis/wcdatavis-stub.js b/src/components/DataVis/wcdatavis-stub.js
index b86c1382..9bb0d5b4 100644
--- a/src/components/DataVis/wcdatavis-stub.js
+++ b/src/components/DataVis/wcdatavis-stub.js
@@ -2,15 +2,38 @@
  * Stub module for when wcdatavis is not installed (CI, fresh checkouts).
  *
  * The Storybook Vite config aliases 'wcdatavis' to this file when the real
- * library isn't detected at node_modules/wcdatavis/src. DataVis.tsx will
- * receive these empty classes from its dynamic import(), fail the class
- * resolution check, and display a graceful error state.
+ * library isn't detected at node_modules/wcdatavis/src. Each class throws
+ * on construction so DataVis.tsx catches the error and displays a graceful
+ * "not installed" message instead of rendering a blank grid.
  */
 
-class Source {}
-class ComputedView {}
-class Grid {}
-class Graph {}
-class Prefs {}
+const STUB_MSG =
+  'wcdatavis is not installed. Install @mieweb/wcdatavis to use the DataVis component.';
+
+class Source {
+  constructor() {
+    throw new Error(STUB_MSG);
+  }
+}
+class ComputedView {
+  constructor() {
+    throw new Error(STUB_MSG);
+  }
+}
+class Grid {
+  constructor() {
+    throw new Error(STUB_MSG);
+  }
+}
+class Graph {
+  constructor() {
+    throw new Error(STUB_MSG);
+  }
+}
+class Prefs {
+  constructor() {
+    throw new Error(STUB_MSG);
+  }
+}
 
 export { Source, ComputedView, ComputedView as View, Grid, Graph, Prefs };

From 305f15b28b7d90be810d937095cb381571088f40 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Tue, 10 Feb 2026 21:33:57 -0500
Subject: [PATCH 5/6] =?UTF-8?q?refactor(DataVis):=20address=20Copilot=20re?=
 =?UTF-8?q?view=20round=202=20=E2=80=94=20race=20condition,=20theming,=20a?=
 =?UTF-8?q?liases?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Address 4 of 6 new review comments from Copilot on PR #89, with
the remaining 2 (visual regression tests, tsup entry) acknowledged
as intentional deferrals for when DataVis is published.

Changes:

1. Fix async race condition in initializeDataVis effect (line 442)
   - Added a `cancelled` flag in the useEffect closure so that when
     props change while an async initialization is in-flight, the
     stale init's state updates and callbacks are skipped.
   - If cancelled init finishes after cleanup, destroyInstances() is
     called to prevent leaking the newly created instances.

2. Fix theme propagation effect dependency array (line 578)
   - Added brand, variant, and size to the dep array for the
     MutationObserver effect that propagates CSS variables to
     body-level dialogs/popups.
   - Previously only depended on state, so theme/brand changes while
     the grid was ready would not update existing dialogs.

3. Fix path.join with regex capture group in Storybook config (line 52)
   - Replaced path.join(wcdatavisNodeModules, 'jquery-ui$1') with a
     template literal to avoid platform-specific path separators and
     ensure the $1 capture group survives for Vite's alias resolution.

4. Fix legacy namespace resolution for WC_DataVis (line 330)
   - Added mod.WC_DataVis as a fallback in the namespace resolution
     chain, handling modules that export the WC_DataVis object directly
     without nesting under MIE.

Deferred (not changed, explained in PR review comments):
- Visual regression tests: DataVis not yet stabilized for publishing.
- tsup entry point: Intentionally omitted until component is publish-ready.
---
 .storybook/main.ts                 |  2 +-
 src/components/DataVis/DataVis.tsx | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 85cb6c77..e8be2816 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -45,7 +45,7 @@ const config: StorybookConfig = {
         },
         // Resolve wcdatavis's jQuery plugins from its nested node_modules so they
         // extend the same jQuery instance the source files import
-        { find: /^jquery-ui(.*)$/, replacement: path.join(wcdatavisNodeModules, 'jquery-ui$1') },
+        { find: /^jquery-ui(.*)$/, replacement: `${wcdatavisNodeModules}/jquery-ui$1` },
         { find: /^jquery-contextmenu$/, replacement: path.join(wcdatavisNodeModules, 'jquery-contextmenu') },
         { find: /^sumoselect$/, replacement: path.join(wcdatavisNodeModules, 'sumoselect') },
         { find: /^flatpickr$/, replacement: path.join(wcdatavisNodeModules, 'flatpickr') },
diff --git a/src/components/DataVis/DataVis.tsx b/src/components/DataVis/DataVis.tsx
index ebc431e6..1fd136a1 100644
--- a/src/components/DataVis/DataVis.tsx
+++ b/src/components/DataVis/DataVis.tsx
@@ -326,8 +326,11 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
         //   Named exports: Source, ComputedView/View, Grid
         //   MIE.WC_DataVis namespace (browser bundle)
         const mod = DataVisModule as Record<string, unknown>;
-        const mieNs = (mod.MIE as Record<string, unknown> | undefined)
-          ?.WC_DataVis as Record<string, unknown> | undefined;
+        const mieNs =
+          ((mod.MIE as Record<string, unknown> | undefined)?.WC_DataVis as
+            | Record<string, unknown>
+            | undefined) ??
+          (mod.WC_DataVis as Record<string, unknown> | undefined);
 
         const SourceClass = mod.Source ?? mieNs?.Source;
         // v2.x exports ComputedView as "View"; v3.x exports as "ComputedView"
@@ -458,10 +461,24 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
     ]);
 
     // Mount / source / option change effect
+    // Use a "cancelled" flag to guard against race conditions: if props
+    // change while an async init is in-flight, the stale init's state
+    // updates and callbacks are skipped.
     React.useEffect(() => {
-      initializeDataVis();
+      let cancelled = false;
+
+      const run = async () => {
+        await initializeDataVis();
+        // If this effect was cleaned up while the async init was running,
+        // tear down the instances it just created so we don't leak.
+        if (cancelled) {
+          destroyInstances();
+        }
+      };
+      run();
 
       return () => {
+        cancelled = true;
         destroyInstances();
       };
     }, [initializeDataVis, destroyInstances]);
@@ -575,7 +592,7 @@ const DataVis = React.forwardRef<HTMLDivElement, DataVisProps>(
       return () => {
         observer.disconnect();
       };
-    }, [state]); // Re-run when state changes (e.g. grid ready → new dialogs possible)
+    }, [state, brand, variant, size]); // Re-run when state or theming changes
 
     // Compute container style
     const containerStyle = React.useMemo((): React.CSSProperties => {

From 4ef829c09547c2ab7f16da3038310964481b3109 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Wed, 18 Feb 2026 20:37:09 -0500
Subject: [PATCH 6/6] feat: move DataVis to separate entry point
 (@mieweb/ui/datavis)

- Remove DataVis export from main barrel (src/index.ts)
- Add src/datavis.ts entry point
- Add datavis entry + wcdatavis externals to tsup config
- Add ./datavis export map in package.json
- Update DataVis story docs with new import path
---
 package.json                               | 10 ++++++++++
 src/components/DataVis/DataVis.stories.tsx | 16 ++++++++++++----
 src/datavis.ts                             | 12 ++++++++++++
 src/index.ts                               |  2 +-
 tsup.config.ts                             |  3 ++-
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 src/datavis.ts

diff --git a/package.json b/package.json
index 93679250..612a4baa 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,16 @@
         "default": "./dist/ag-grid.cjs"
       }
     },
+    "./datavis": {
+      "import": {
+        "types": "./dist/datavis.d.ts",
+        "default": "./dist/datavis.js"
+      },
+      "require": {
+        "types": "./dist/datavis.d.cts",
+        "default": "./dist/datavis.cjs"
+      }
+    },
     "./styles.css": "./dist/styles.css",
     "./styles": "./dist/styles.css"
   },
diff --git a/src/components/DataVis/DataVis.stories.tsx b/src/components/DataVis/DataVis.stories.tsx
index bcf355ba..c14bcc64 100644
--- a/src/components/DataVis/DataVis.stories.tsx
+++ b/src/components/DataVis/DataVis.stories.tsx
@@ -30,14 +30,22 @@ in a declarative React interface with full integration into the MIE Web UI desig
 - **Size presets** (sm, md, lg)
 - **Lifecycle management** (mount, update, destroy)
 
+### Installation
+
+DataVis lives in a **separate entry point** so the heavy \`@mieweb/wcdatavis\`
+library is never pulled into your bundle unless you explicitly opt in:
+
+\`\`\`bash
+npm install @mieweb/wcdatavis font-awesome
+\`\`\`
+
 ### Prerequisites
 
-1. Install \`@mieweb/wcdatavis\` as a dependency
-2. Include FontAwesome 4.7 CSS for icons
-3. Import the DataVis theme CSS from this package
+1. Include FontAwesome 4.7 CSS for icons
+2. Import the DataVis theme CSS from this package
 
 \`\`\`tsx
-import { DataVis } from '@mieweb/ui';
+import { DataVis } from '@mieweb/ui/datavis';
 
 <DataVis
   source={{ type: 'http', url: '/api/data.csv' }}
diff --git a/src/datavis.ts b/src/datavis.ts
new file mode 100644
index 00000000..f55c5941
--- /dev/null
+++ b/src/datavis.ts
@@ -0,0 +1,12 @@
+/**
+ * DataVis entry point — separate from the main bundle.
+ *
+ * Usage:
+ *   npm install @mieweb/ui @mieweb/wcdatavis
+ *   import { DataVis } from '@mieweb/ui/datavis';
+ *
+ * This keeps @mieweb/wcdatavis (and its jQuery dependency chain) out of
+ * the default install/bundle so consumers who don't need DataVis grids
+ * aren't burdened.
+ */
+export * from './components/DataVis';
diff --git a/src/index.ts b/src/index.ts
index 63791ee1..7558caef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,7 +26,7 @@ export * from './components/ConnectionStatus';
 export * from './components/CountBadge';
 export * from './components/CookieConsent';
 export * from './components/CSVColumnMapper';
-export * from './components/DataVis';
+// DataVis is available via '@mieweb/ui/datavis' (opt-in, requires @mieweb/wcdatavis)
 export * from './components/DateInput';
 export * from './components/DateRangePicker';
 export * from './components/DocumentScanner';
diff --git a/tsup.config.ts b/tsup.config.ts
index fb67d1cd..56b63a5c 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   entry: {
     index: 'src/index.ts',
     'ag-grid': 'src/ag-grid.ts',
+    datavis: 'src/datavis.ts',
     'hooks/index': 'src/hooks/index.ts',
     'utils/index': 'src/utils/index.ts',
     'tailwind-preset': 'src/tailwind-preset.ts',
@@ -51,7 +52,7 @@ export default defineConfig({
   dts: true,
   sourcemap: true,
   clean: true,
-  external: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-react'],
+  external: ['react', 'react-dom', 'ag-grid-community', 'ag-grid-react', '@mieweb/wcdatavis', 'wcdatavis'],
   treeshake: true,
   splitting: true,
   minify: false,