@antv/gpt-vis 1.0.0-beta.1 → 1.0.0

package/dist/esm/vis/organization-chart/index.d.ts

@@ -0,0 +1,64 @@
+import type { TreeGraphData, VisualizationOptions } from '../../types';
+export type OrganizationChartData = TreeGraphData;
+/**
+ * OrganizationChartConfig defines the configuration for rendering the organization chart.
+ */
+export interface OrganizationChartConfig {
+    type?: 'organization-chart';
+    data: OrganizationChartData;
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * OrganizationChartInstance represents a chart instance with render and destroy methods.
+ */
+export interface OrganizationChartInstance {
+    render: (config: OrganizationChartConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/**
+ * OrganizationChart component using G6 5.0.
+ * - dagre (TB) layout for hierarchical structure
+ * - custom rect node with name + description labels
+ * - depth-based color cycling
+ *
+ * @example
+ * ```ts
+ * const chart = OrganizationChart({ container: '#container', width: 600, height: 400 });
+ *
+ * chart.render({
+ *   type: 'organization-chart',
+ *   data: {
+ *     name: 'Alice Johnson',
+ *     description: 'Chief Technology Officer',
+ *     children: [
+ *       {
+ *         name: 'Bob Smith',
+ *         description: 'Senior Software Engineer',
+ *         children: [
+ *           { name: 'Charlie Brown', description: 'Software Engineer' },
+ *           { name: 'Diana White',   description: 'Software Engineer' },
+ *         ],
+ *       },
+ *       {
+ *         name: 'Eve Black',
+ *         description: 'IT Support Department Head',
+ *         children: [
+ *           { name: 'Frank Green', description: 'IT Support Specialist' },
+ *           { name: 'Grace Blue',  description: 'IT Support Specialist' },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * });
+ *
+ * chart.destroy();
+ * ```
+ */
+export declare const OrganizationChart: (options: VisualizationOptions) => OrganizationChartInstance;

package/dist/esm/vis/organization-chart/index.js

@@ -0,0 +1,271 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { Graph } from '@antv/g6';
+import { getBackgroundColor, getTheme, normalizePalette } from "../../util/theme";
+
+/**
+ * OrganizationChartConfig defines the configuration for rendering the organization chart.
+ */
+
+/**
+ * OrganizationChartInstance represents a chart instance with render and destroy methods.
+ */
+
+var NODE_WIDTH = 160;
+// Keep stable layout height when description exists.
+var NODE_HEIGHT_WITH_DESC = 72;
+var NODE_HEIGHT_NO_DESC = 40;
+var FONT_FAMILY = 'system-ui,-apple-system,BlinkMacSystemFont,sans-serif';
+var LABEL_MAX_WIDTH = NODE_WIDTH - 16; // padding
+
+/** Business data stored in each G6 node's `data` field. */
+
+/** Shorthand for the G6 node style callback argument shape. */
+
+/**
+ * Recursively flatten a tree into flat nodes and edges arrays for G6.
+ * Uses path-index IDs instead of names to prevent duplicate-name collisions.
+ */
+function flattenTree(node, depth, pathId, nodes, edges) {
+  var _node$children;
+  nodes.push({
+    id: pathId,
+    name: node.name,
+    description: node.description,
+    depth: depth
+  });
+  ((_node$children = node.children) !== null && _node$children !== void 0 ? _node$children : []).forEach(function (child, index) {
+    // Use an underscore separator to avoid ambiguity with auto-generated edge IDs.
+    // Some render/layout internals may derive edge IDs by concatenating source/target with "-",
+    // and using "-" inside node IDs can lead to collisions in rare cases.
+    var childId = "".concat(pathId, "_").concat(index);
+    edges.push({
+      source: pathId,
+      target: childId
+    });
+    flattenTree(child, depth + 1, childId, nodes, edges);
+  });
+}
+
+/**
+ * OrganizationChart component using G6 5.0.
+ * - dagre (TB) layout for hierarchical structure
+ * - custom rect node with name + description labels
+ * - depth-based color cycling
+ *
+ * @example
+ * ```ts
+ * const chart = OrganizationChart({ container: '#container', width: 600, height: 400 });
+ *
+ * chart.render({
+ *   type: 'organization-chart',
+ *   data: {
+ *     name: 'Alice Johnson',
+ *     description: 'Chief Technology Officer',
+ *     children: [
+ *       {
+ *         name: 'Bob Smith',
+ *         description: 'Senior Software Engineer',
+ *         children: [
+ *           { name: 'Charlie Brown', description: 'Software Engineer' },
+ *           { name: 'Diana White',   description: 'Software Engineer' },
+ *         ],
+ *       },
+ *       {
+ *         name: 'Eve Black',
+ *         description: 'IT Support Department Head',
+ *         children: [
+ *           { name: 'Frank Green', description: 'IT Support Specialist' },
+ *           { name: 'Grace Blue',  description: 'IT Support Specialist' },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * });
+ *
+ * chart.destroy();
+ * ```
+ */
+export var OrganizationChart = function OrganizationChart(options) {
+  var container = options.container,
+    width = options.width,
+    height = options.height,
+    _options$theme = options.theme,
+    chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
+  var graph = null;
+  var render = function render(config) {
+    var data = config.data,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? chartTheme : _config$theme,
+      title = config.title,
+      _config$style = config.style,
+      style = _config$style === void 0 ? {} : _config$style;
+    if (!data || !data.name) {
+      throw new Error('OrganizationChart: data with a name field is required');
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    var containerEl = typeof container === 'string' ? document.querySelector(container) : container;
+    if (!containerEl) {
+      throw new Error('OrganizationChart: container element not found');
+    }
+    containerEl.innerHTML = '';
+    var colors = normalizePalette(style.palette, theme);
+    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var isDark = theme === 'dark';
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = '4px';
+    containerEl.style.overflow = 'hidden';
+
+    // Flatten tree structure into G6 flat nodes + edges
+    var flatNodes = [];
+    var flatEdges = [];
+    flattenTree(data, 0, '0', flatNodes, flatEdges);
+
+    // Store node business data in the `data` field so style functions can access it via d.data.*
+    var nodeData = flatNodes.map(function (node) {
+      return {
+        id: node.id,
+        data: {
+          name: node.name,
+          description: node.description,
+          depth: node.depth
+        }
+      };
+    });
+    var edgeData = flatEdges.map(function (edge) {
+      return {
+        id: "e__".concat(edge.source, "__").concat(edge.target),
+        source: edge.source,
+        target: edge.target
+      };
+    });
+    graph = new Graph({
+      animation: false,
+      container: containerEl,
+      width: width,
+      height: height,
+      autoFit: 'view',
+      autoResize: true,
+      theme: getTheme(theme),
+      padding: title ? [46, 20, 20, 20] : 20,
+      data: {
+        nodes: nodeData,
+        edges: edgeData
+      },
+      plugins: [{
+        type: 'tooltip',
+        trigger: 'hover',
+        enable: function enable(e) {
+          return (e === null || e === void 0 ? void 0 : e.targetType) === 'node';
+        },
+        offset: [10, 10],
+        getContent: function getContent(e, items) {
+          var _biz$name;
+          var item = items === null || items === void 0 ? void 0 : items[0];
+          var biz = item === null || item === void 0 ? void 0 : item.data;
+          if (!biz) return '';
+          var name = escapeHtml(String((_biz$name = biz.name) !== null && _biz$name !== void 0 ? _biz$name : ''));
+          var desc = biz.description ? escapeHtml(String(biz.description)) : '';
+          return "\n              <div style=\"max-width:260px;font-family:".concat(FONT_FAMILY, ";\">\n                <div style=\"font-weight:700;font-size:12px;line-height:1.2;margin-bottom:").concat(desc ? '4px' : '0', ";\">\n                  ").concat(name, "\n                </div>\n                ").concat(desc ? "<div style=\"font-size:12px;line-height:1.35;opacity:".concat(isDark ? '0.86' : '0.78', ";\">").concat(desc, "</div>") : '', "\n              </div>\n            ");
+        },
+        style: {
+          '.tooltip': {
+            background: isDark ? 'rgba(20,20,20,0.92)' : 'rgba(255,255,255,0.96)',
+            color: isDark ? '#f2f2f2' : '#1f1f1f',
+            border: "1px solid ".concat(isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.10)'),
+            borderRadius: 8,
+            boxShadow: '0 12px 28px rgba(0,0,0,0.16)',
+            padding: '8px 10px',
+            pointerEvents: 'none'
+          }
+        }
+      }].concat(_toConsumableArray(title ? [{
+        key: 'title',
+        type: 'title',
+        title: title,
+        titleFill: isDark ? '#e0e6ed' : '#000',
+        titleFontFamily: 'sans-serif'
+      }] : [])),
+      node: {
+        type: 'rect',
+        style: {
+          // size: [width, height] is the correct API for rect nodes in G6 v5
+          size: function size(d) {
+            return [NODE_WIDTH, d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC];
+          },
+          fill: function fill(d) {
+            return colors[d.data.depth % colors.length];
+          },
+          stroke: isDark ? '#555' : '#e8ebf0',
+          lineWidth: 1,
+          radius: theme === 'academy' ? 0 : 8,
+          // Use official label wrapping/ellipsis for BOTH name & description.
+          // 1 line name + up to 2 lines description => total maxLines = 3.
+          labelText: function labelText(d) {
+            return d.data.description ? "".concat(d.data.name, "\n").concat(d.data.description) : d.data.name;
+          },
+          labelFill: '#ffffff',
+          labelFontSize: 12,
+          labelFontWeight: 600,
+          labelWordWrap: true,
+          labelWordWrapWidth: LABEL_MAX_WIDTH,
+          labelMaxLines: function labelMaxLines(d) {
+            return d.data.description ? 3 : 1;
+          },
+          labelLineHeight: 14,
+          labelPlacement: 'center'
+        }
+      },
+      edge: {
+        // Use a tree-friendly edge type that does not depend on node ports.
+        type: 'cubic-vertical',
+        style: {
+          stroke: isDark ? '#4a4a4a' : '#d0d7e0',
+          lineWidth: 1.5,
+          endArrow: false,
+          startArrow: false
+        }
+      },
+      layout: {
+        type: 'dagre',
+        rankdir: 'TB',
+        nodesep: 40,
+        ranksep: 60,
+        // Dynamic nodeSize lets dagre calculate accurate per-node spacing
+        nodeSize: function nodeSize(d) {
+          return [NODE_WIDTH, d.data.description ? NODE_HEIGHT_WITH_DESC : NODE_HEIGHT_NO_DESC];
+        }
+      },
+      behaviors: ['drag-canvas']
+    });
+    graph.render();
+  };
+  var destroy = function destroy() {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render: render,
+    destroy: destroy,
+    zoomTo: function zoomTo(zoom) {
+      var _graph;
+      return (_graph = graph) === null || _graph === void 0 ? void 0 : _graph.zoomTo(zoom);
+    },
+    getZoom: function getZoom() {
+      var _graph2;
+      return (_graph2 = graph) === null || _graph2 === void 0 ? void 0 : _graph2.getZoom();
+    }
+  };
+};
+function escapeHtml(input) {
+  return String(input).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+}

package/dist/esm/vis/pie/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * PieDataItem is the type for each data item in the pie chart.
@@ -68,7 +68,7 @@ export var Pie = function Pie(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Calculate sum for percentage labels
@@ -88,6 +88,7 @@ export var Pie = function Pie(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase (e.g., Radar component)
     var chartOptions = {
+      animate: false,
       type: 'interval',
       data: data,
       title: title !== null && title !== void 0 ? title : '',
@@ -141,12 +142,7 @@ export var Pie = function Pie(options) {
       viewStyle: {
         viewFill: backgroundColor
       },
-      theme: getThemeObject(theme),
-      animate: {
-        enter: {
-          type: 'waveIn'
-        }
-      }
+      theme: getThemeObject(theme)
     };
     chart.options(chartOptions);
     chart.render();

package/dist/esm/vis/radar/index.d.ts

@@ -14,6 +14,7 @@ export interface RadarConfig {
     type?: 'radar';
     data: RadarDataItem[];
     title?: string;
+    align?: boolean;
     theme?: 'default' | 'academy' | 'dark';
     style?: {
         backgroundColor?: string;

package/dist/esm/vis/radar/index.js

@@ -1,4 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,7 +15,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * RadarDataItem is the type for each data item in the radar chart.
@@ -104,6 +108,8 @@ export var Radar = function Radar(options) {
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
+      _config$align = config.align,
+      align = _config$align === void 0 ? false : _config$align,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
 
@@ -113,7 +119,7 @@ export var Radar = function Radar(options) {
     }
     var _style$lineWidth = style.lineWidth,
       lineWidth = _style$lineWidth === void 0 ? 2 : _style$lineWidth;
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Transform data to parallel format
@@ -134,6 +140,7 @@ export var Radar = function Radar(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'line',
       data: parallelData,
       title: title !== null && title !== void 0 ? title : '',
@@ -148,10 +155,19 @@ export var Radar = function Radar(options) {
       scale: _objectSpread(_objectSpread({}, Object.fromEntries(Array.from({
         length: position.length
       }, function (_, i) {
-        return ["position".concat(i === 0 ? '' : i), {
+        var scaleConfig = {
           domainMin: 0,
           nice: true
-        }];
+        };
+        if (align) {
+          var allValues = data.map(function (d) {
+            return d.value;
+          }).filter(function (v) {
+            return v != null;
+          });
+          scaleConfig.domainMax = Math.max.apply(Math, _toConsumableArray(allValues));
+        }
+        return ["position".concat(i === 0 ? '' : i), scaleConfig];
       }))), {}, {
         color: {
           range: colors

package/dist/esm/vis/sankey/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * SankeyDataItem is the type for each data item in the sankey chart.
@@ -66,7 +66,7 @@ export var Sankey = function Sankey(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
@@ -81,6 +81,7 @@ export var Sankey = function Sankey(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'sankey',
       data: {
         value: data,

package/dist/esm/vis/scatter/index.d.ts

@@ -14,6 +14,8 @@ export interface ScatterConfig {
     type?: 'scatter';
     data: ScatterDataItem[];
     title?: string;
+    axisXTitle?: string;
+    axisYTitle?: string;
     theme?: 'default' | 'academy' | 'dark';
     style?: {
         backgroundColor?: string;

package/dist/esm/vis/scatter/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeColors, getThemeObject } from "../../util/theme";
+import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * ScatterDataItem is the type for each data item in the scatter chart.
@@ -55,6 +55,8 @@ export var Scatter = function Scatter(options) {
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
+      axisXTitle = config.axisXTitle,
+      axisYTitle = config.axisYTitle,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
 
@@ -64,7 +66,7 @@ export var Scatter = function Scatter(options) {
     }
 
     // Get colors from style.palette or theme defaults
-    var colors = style.palette || getThemeColors(theme);
+    var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Check if data has group field
@@ -108,6 +110,7 @@ export var Scatter = function Scatter(options) {
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
     var chartOptions = {
+      animate: false,
       type: 'point',
       data: data,
       title: title !== null && title !== void 0 ? title : '',
@@ -118,6 +121,14 @@ export var Scatter = function Scatter(options) {
         }
       } : false,
       scale: scaleConfig,
+      axis: {
+        x: {
+          title: axisXTitle !== null && axisXTitle !== void 0 ? axisXTitle : 'x'
+        },
+        y: {
+          title: axisYTitle !== null && axisYTitle !== void 0 ? axisYTitle : 'y'
+        }
+      },
       style: {
         lineWidth: 1
       },
@@ -127,10 +138,10 @@ export var Scatter = function Scatter(options) {
         },
         items: [{
           channel: 'x',
-          name: 'x'
+          name: axisXTitle !== null && axisXTitle !== void 0 ? axisXTitle : 'x'
         }, {
           channel: 'y',
-          name: 'y'
+          name: axisYTitle !== null && axisYTitle !== void 0 ? axisYTitle : 'y'
         }]
       },
       viewStyle: {

package/dist/esm/vis/summary/index.js

@@ -1,4 +1,5 @@
 import { Text } from '@antv/t8';
+import { getBackgroundColor } from "../../util/theme";
 
 /**
  * SummaryConfig is a T8 Syntax string for narrative text visualization.
@@ -37,7 +38,7 @@ import { Text } from '@antv/t8';
  * ```
  */
 export var Summary = function Summary(options) {
-  // T8 only supports 'light' and 'dark', so map 'academy' to 'light'
+  // T8 only supports 'light' and 'dark', so map 'academy'/'default' to 'light'
   var _options$theme = options.theme,
     theme = _options$theme === void 0 ? 'light' : _options$theme;
   if (theme === 'academy' || theme === 'default') theme = 'light';
@@ -45,10 +46,16 @@ export var Summary = function Summary(options) {
   if (!container) {
     throw new Error('Container not found');
   }
+
+  // Create a wrapper element for padding and theme background
+  var wrapper = document.createElement('div');
+  wrapper.className = 'gpt-vis-summary';
+  container.appendChild(wrapper);
   var text = null;
 
   /**
    * Render the summary with the given T8 syntax string.
+   * Supports an optional `theme <value>` line in the syntax to override the theme.
    */
   var render = function render(syntax) {
     // Clean up previous instance if exists
@@ -56,12 +63,23 @@ export var Summary = function Summary(options) {
       text.unmount();
     }
 
+    // Extract optional `theme <value>` line from syntax
+    var activeTheme = theme;
+    var cleanedSyntax = syntax.replace(/^theme\s+(light|dark)\s*$/im, function (_, t) {
+      activeTheme = t;
+      return '';
+    });
+
     // Create T8 Text instance
-    text = new Text(container);
+    text = new Text(wrapper);
+
+    // Set background color and padding on the wrapper
+    wrapper.style.backgroundColor = activeTheme === 'dark' ? getBackgroundColor('dark') : '';
+    wrapper.style.padding = '16px';
 
     // Set theme and render syntax
-    text.theme(theme);
-    text.render(syntax);
+    text.theme(activeTheme);
+    text.render(cleanedSyntax.trim());
   };
 
   /**
@@ -72,6 +90,9 @@ export var Summary = function Summary(options) {
       text.unmount();
       text = null;
     }
+    if (wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
   };
   return {
     render: render,

package/dist/esm/vis/table/index.d.ts

@@ -6,6 +6,7 @@ export interface TableConfig {
     type?: 'table';
     data: Record<string, any>[];
     title?: string;
+    theme?: 'default' | 'dark';
 }
 /**
  * TableInstance represents a table instance with render and destroy methods.

package/dist/esm/vis/table/index.js

@@ -14,7 +14,7 @@ var CELL_PADDING = 16; // 8px * 2
 var MIN_WIDTH_MULTIPLIER = 1.1;
 
 // CSS styles for the table component
-var TABLE_STYLES = "\n  .".concat(SCOPE_ID, " {\n    font-family: ").concat(FONT_FAMILY, ";\n    overflow: auto;\n    height: 100%;\n  }\n\n  .").concat(SCOPE_ID, " .table-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: #1d2129;\n  }\n\n  .").concat(SCOPE_ID, " table {\n    border-collapse: separate;\n    border-spacing: 0;\n    background: #fff;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .").concat(SCOPE_ID, " th,\n  .").concat(SCOPE_ID, " td {\n    border-bottom: 1px solid #f0f0f0;\n    padding: 8px;\n    text-align: left;\n    font-size: 14px;\n    color: #333;\n    white-space: nowrap;\n  }\n\n  .").concat(SCOPE_ID, " th {\n    background: #f5f5f5;\n    font-weight: 600;\n    color: #000000e0;\n    position: relative;\n  }\n\n  .").concat(SCOPE_ID, " th:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 25%;\n    right: 0;\n    width: 1px;\n    height: 50%;\n    background: #e0e0e0;\n  }\n\n  .").concat(SCOPE_ID, " tr {\n    transition: background 0.2s;\n  }\n\n  .").concat(SCOPE_ID, " tbody tr:hover {\n    background: #f5f5f5;\n    cursor: pointer;\n  }\n");
+var TABLE_STYLES = "\n  .".concat(SCOPE_ID, " {\n    font-family: ").concat(FONT_FAMILY, ";\n    overflow: auto;\n    height: 100%;\n    padding: 16px;\n  }\n\n  .").concat(SCOPE_ID, " .table-title {\n    font-size: 16px;\n    font-weight: 500;\n    margin-bottom: 12px;\n    color: #1d2129;\n  }\n\n  .").concat(SCOPE_ID, " table {\n    border-collapse: separate;\n    border-spacing: 0;\n    background: #fff;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .").concat(SCOPE_ID, " th,\n  .").concat(SCOPE_ID, " td {\n    border-bottom: 1px solid #f0f0f0;\n    padding: 8px;\n    text-align: left;\n    font-size: 14px;\n    color: #333;\n    white-space: nowrap;\n  }\n\n  .").concat(SCOPE_ID, " th {\n    background: #f5f5f5;\n    font-weight: 600;\n    color: #000000e0;\n    position: relative;\n  }\n\n  .").concat(SCOPE_ID, " th:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 25%;\n    right: 0;\n    width: 1px;\n    height: 50%;\n    background: #e0e0e0;\n  }\n\n  .").concat(SCOPE_ID, " tr {\n    transition: background 0.2s;\n  }\n\n  .").concat(SCOPE_ID, " tbody tr:hover {\n    background: #f5f5f5;\n    cursor: pointer;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] {\n    background: #000;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] .table-title {\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] table {\n    background: #141414;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th,\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] td {\n    border-bottom: 1px solid #303030;\n    color: #ffffffd9;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th {\n    background: #1f1f1f;\n    color: #ffffffa6;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] th:not(:last-child)::after {\n    background: #303030;\n  }\n\n  .").concat(SCOPE_ID, "[data-theme=\"dark\"] tbody tr:hover {\n    background: #1f1f1f;\n  }\n");
 
 /**
  * Calculate the minimum width needed for a table based on its data.
@@ -90,6 +90,8 @@ var injectStyles = function injectStyles() {
  * ```
  */
 export var Table = function Table(options) {
+  var _options$theme = options.theme,
+    chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var container = typeof options.container === 'string' ? document.querySelector(options.container) : options.container;
   if (!container) {
     throw new Error('Container not found');
@@ -102,7 +104,9 @@ export var Table = function Table(options) {
   var render = function render(config) {
     var _config$data = config.data,
       data = _config$data === void 0 ? [] : _config$data,
-      title = config.title;
+      title = config.title,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? chartTheme : _config$theme;
 
     // Inject styles if not already present
     injectStyles();
@@ -115,6 +119,9 @@ export var Table = function Table(options) {
     // Create wrapper element
     tableWrapper = document.createElement('div');
     tableWrapper.className = SCOPE_ID;
+    if (theme === 'dark') {
+      tableWrapper.setAttribute('data-theme', 'dark');
+    }
 
     // Handle empty data case
     if (data.length === 0) {