diff --git a/.storybook/main.ts b/.storybook/main.ts
index f592219f..e8be2816 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,4 +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)'],
@@ -16,6 +18,64 @@ const config: StorybookConfig = {
     reactDocgen: 'react-docgen-typescript',
   },
   staticDirs: ['./public'],
+  viteFinal: async (config) => {
+    const dataVisDir = path.resolve(process.cwd(), 'src/components/DataVis');
+    const wcdatavisSrc = path.resolve(process.cwd(), 'node_modules/wcdatavis/src');
+    const wcdatavisAvailable = fs.existsSync(wcdatavisSrc);
+
+    config.resolve = config.resolve || {};
+    const existingAliases = Array.isArray(config.resolve.alias)
+      ? config.resolve.alias
+      : Object.entries(config.resolve.alias || {}).map(([find, replacement]) => ({ find, replacement }));
+
+    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: `${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;
+  },
 };
 
 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 9128bf4d..c9b73cf1 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -21,6 +21,26 @@ 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;`;
+}
+
 /*
  * Global theme listener — ensures data-theme and brand styles are applied
  * even on docs-only MDX pages (like Introduction) where no story decorator runs.
@@ -78,7 +98,8 @@ try {
 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');
@@ -86,11 +107,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;
@@ -102,21 +120,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;
@@ -128,7 +131,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 993f163a..31ef2de8 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",
@@ -9209,6 +9258,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 84aedc0e..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"
   },
@@ -147,8 +157,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"
@@ -168,6 +180,12 @@
     },
     "wavesurfer.js": {
       "optional": true
+    },
+    "@mieweb/wcdatavis": {
+      "optional": true
+    },
+    "font-awesome": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -215,7 +233,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..c14bcc64
--- /dev/null
+++ b/src/components/DataVis/DataVis.stories.tsx
@@ -0,0 +1,486 @@
+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)
+
+### 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. Include FontAwesome 4.7 CSS for icons
+2. Import the DataVis theme CSS from this package
+
+\`\`\`tsx
+import { DataVis } from '@mieweb/ui/datavis';
+
+<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="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>
+    ),
+    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="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>
+    ),
+    variant: 'bordered',
+    height: 300,
+  },
+};
diff --git a/src/components/DataVis/DataVis.tsx b/src/components/DataVis/DataVis.tsx
new file mode 100644
index 00000000..1fd136a1
--- /dev/null
+++ b/src/components/DataVis/DataVis.tsx
@@ -0,0 +1,689 @@
+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: '',
+      bluehive: '',
+      waggleline: '',
+      webchart: '',
+      '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 gridInstanceId = React.useId();
+    const gridIdRef = React.useRef<string>(
+      `datavis-${gridInstanceId.replace(/:/g, '-')}`
+    );
+
+    // 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 {
+        // 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 = wcdatavisModule.default
+          ? (wcdatavisModule.default as Record<string, unknown>)
+          : wcdatavisModule;
+
+        // 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) ??
+          (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"
+        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 / 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(() => {
+      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]);
+
+    // -----------------------------------------------------------------------
+    // 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, brand, variant, size]); // Re-run when state or theming changes
+
+    // 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="text-muted-foreground flex items-center justify-center p-8">
+            {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="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-muted-foreground text-xs">
+                  {error.message}
+                </span>
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Idle / empty state (before initialization) */}
+        {isIdle && emptyMessage && (
+          <div className="text-muted-foreground flex items-center justify-center p-8">
+            {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..47f317d2
--- /dev/null
+++ b/src/components/DataVis/datavis-theme.css
@@ -0,0 +1,1448 @@
+/**
+ * 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-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..9bb0d5b4
--- /dev/null
+++ b/src/components/DataVis/wcdatavis-stub.js
@@ -0,0 +1,39 @@
+/**
+ * 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. Each class throws
+ * on construction so DataVis.tsx catches the error and displays a graceful
+ * "not installed" message instead of rendering a blank grid.
+ */
+
+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 };
diff --git a/src/components/DataVis/wcdatavis.d.ts b/src/components/DataVis/wcdatavis.d.ts
new file mode 100644
index 00000000..45656dfe
--- /dev/null
+++ b/src/components/DataVis/wcdatavis.d.ts
@@ -0,0 +1,94 @@
+/**
+ * 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/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 658fb8f8..7558caef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,6 +26,7 @@ export * from './components/ConnectionStatus';
 export * from './components/CountBadge';
 export * from './components/CookieConsent';
 export * from './components/CSVColumnMapper';
+// 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,