@antv/gpt-vis 0.6.1 → 1.0.0-beta.2

package/dist/cjs/vis/word-cloud/index.js

@@ -0,0 +1,90 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/word-cloud/index.ts
+var word_cloud_exports = {};
+__export(word_cloud_exports, {
+  WordCloud: () => WordCloud
+});
+module.exports = __toCommonJS(word_cloud_exports);
+var import_g2 = require("@antv/g2");
+var import_theme = require("../../util/theme");
+var WordCloud = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let chart = null;
+  const render = (config) => {
+    const { data = [], theme = chartTheme, title, style = {} } = config;
+    if (chart) {
+      chart.destroy();
+    }
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    chart = new import_g2.Chart({
+      container,
+      width,
+      height,
+      autoFit: true
+    });
+    const chartOptions = {
+      animate: false,
+      type: "wordCloud",
+      data,
+      title: title ?? "",
+      layout: {
+        fontSize: [8, 42]
+      },
+      encode: {
+        text: "text",
+        color: "text",
+        value: "value"
+      },
+      scale: {
+        color: { range: colors }
+      },
+      legend: false,
+      tooltip: {
+        items: [
+          (d) => ({
+            name: d.text,
+            value: d.value
+          })
+        ]
+      },
+      viewStyle: {
+        viewFill: backgroundColor
+      },
+      theme: (0, import_theme.getThemeObject)(theme)
+    };
+    chart.options(chartOptions);
+    chart.render();
+  };
+  const destroy = () => {
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+  };
+  return {
+    render,
+    destroy
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WordCloud
+});

package/dist/cjs/vis-wrapper/icons.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create SVG icon elements for the wrapper UI
+ */
+export declare function createCopyIcon(size?: number, fill?: string): string;
+export declare function createCheckIcon(size?: number, fill?: string): string;
+export declare function createDownloadIcon(size?: number, fill?: string): string;
+export declare function createZoomInIcon(size?: number, fill?: string): string;
+export declare function createZoomOutIcon(size?: number, fill?: string): string;

package/dist/cjs/vis-wrapper/icons.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis-wrapper/icons.ts
+var icons_exports = {};
+__export(icons_exports, {
+  createCheckIcon: () => createCheckIcon,
+  createCopyIcon: () => createCopyIcon,
+  createDownloadIcon: () => createDownloadIcon,
+  createZoomInIcon: () => createZoomInIcon,
+  createZoomOutIcon: () => createZoomOutIcon
+});
+module.exports = __toCommonJS(icons_exports);
+function createCopyIcon(size = 14, fill = "#707070") {
+  return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+    <path d="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"></path>
+  </svg>`;
+}
+function createCheckIcon(size = 14, fill = "#707070") {
+  return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+    <path d="M380.416 822.144c-10.432 0-20.864-3.968-28.8-11.968L75.968 534.592c-15.936-15.936-15.936-41.664 0-57.6 15.872-15.872 41.664-15.872 57.536 0L380.416 723.84l510.08-510.016c15.872-15.936 41.664-15.936 57.536 0 15.936 15.936 15.936 41.664 0 57.6L409.216 810.24c-7.936 7.936-18.368 11.904-28.8 11.904z"></path>
+  </svg>`;
+}
+function createDownloadIcon(size = 14, fill = "#707070") {
+  return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+    <path d="M512 165.93q13.645 0 23.31 9.666t9.665 23.31V580.77L653.37 472.103q9.517-9.517 23.434-9.517 14.164 0 23.558 9.394t9.393 23.557q0 13.917-9.517 23.434L535.434 683.774q-9.517 9.517-23.434 9.517t-23.434-9.517L323.763 518.971q-9.517-10.036-9.517-23.434 0-13.645 9.665-23.31t23.31-9.665q13.917 0 23.434 9.516L479.05 580.744V198.881q0-13.645 9.665-23.31t23.31-9.665z m329.582 461.435q13.645 0 23.31 9.665t9.665 23.31v131.828q0 41.207-28.575 69.782-29.095 29.095-69.536 29.095H248.32q-40.416 0-70.03-28.848-28.847-29.613-28.847-70.03V660.34q0-13.645 9.665-23.31t23.31-9.665 23.31 9.665 9.666 23.31v131.828q0 13.645 9.665 23.31t23.31 9.665h528.127q13.398 0 22.791-9.665t9.393-23.31V660.34q0-13.645 9.666-23.31t23.31-9.665z"></path>
+  </svg>`;
+}
+function createZoomInIcon(size = 18, fill = "#707070") {
+  return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+    <path d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"></path>
+    <path d="M555 418.3h-99.8v-99.8c0-14-11.4-25.4-25.4-25.4s-25.4 11.4-25.4 25.4v99.8h-99.8c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4h99.8v99.8c0 14 11.4 25.4 25.4 25.4s25.4-11.4 25.4-25.4v-99.8H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
+  </svg>`;
+}
+function createZoomOutIcon(size = 18, fill = "#707070") {
+  return `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+    <path d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"></path>
+    <path d="M555 418.3H304.7c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"></path>
+  </svg>`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCheckIcon,
+  createCopyIcon,
+  createDownloadIcon,
+  createZoomInIcon,
+  createZoomOutIcon
+});

package/dist/cjs/vis-wrapper/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Wrapper configuration options
+ */
+export interface WrapperConfig {
+    chartType?: string;
+    syntax?: string | object;
+    locale?: string;
+    onChartReady?: (chart: any) => void;
+}
+/**
+ * Wrapper instance that provides control over the wrapper UI
+ */
+export interface WrapperInstance {
+    chartContainer: HTMLElement;
+    destroy: () => void;
+    setChartRef: (chart: any) => void;
+    update: (syntax: string | object) => void;
+}
+/**
+ * Create a wrapper container with tabs, buttons, and controls
+ * @param container - The parent container element or selector
+ * @param config - Wrapper configuration options
+ * @returns A wrapper instance with the chart container and controls
+ */
+export declare function createVisWrapper(container: string | HTMLElement, config?: WrapperConfig): WrapperInstance;

package/dist/cjs/vis-wrapper/index.js

@@ -0,0 +1,242 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis-wrapper/index.ts
+var vis_wrapper_exports = {};
+__export(vis_wrapper_exports, {
+  createVisWrapper: () => createVisWrapper
+});
+module.exports = __toCommonJS(vis_wrapper_exports);
+var import_snapdom = require("@zumer/snapdom");
+var import_icons = require("./icons");
+var import_styles = require("./styles");
+var DEFAULT_LABELS = {
+  "zh-CN": {
+    chartTab: "图表",
+    codeTab: "代码",
+    download: "下载",
+    copy: "复制",
+    copied: "完成"
+  },
+  "en-US": {
+    chartTab: "Chart",
+    codeTab: "Code",
+    download: "Download",
+    copy: "Copy",
+    copied: "Copied"
+  }
+};
+function createVisWrapper(container, config = {}) {
+  (0, import_styles.injectWrapperStyles)();
+  const containerElement = typeof container === "string" ? document.querySelector(container) : container;
+  if (!containerElement) {
+    throw new Error("Container element not found");
+  }
+  const { chartType = "", syntax = "", locale = "zh-CN" } = config;
+  const syntaxString = typeof syntax === "string" ? syntax : JSON.stringify(syntax, null, 2);
+  const labels = DEFAULT_LABELS[locale] || DEFAULT_LABELS["en-US"];
+  let chartRef = null;
+  let copyTimeout;
+  const zoomButtonsHTML = `
+      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide"
+              data-action="zoom-out"
+              aria-label="Zoom out"
+              title="Zoom out">
+        ${(0, import_icons.createZoomOutIcon)(18)}
+      </button>
+      <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-zoom-button gpt-vis-wrapper-tab-hide"
+              data-action="zoom-in"
+              aria-label="Zoom in"
+              title="Zoom in">
+        ${(0, import_icons.createZoomInIcon)(18)}
+      </button>
+      <div class="gpt-vis-wrapper-divider gpt-vis-wrapper-tab-hide"></div>
+    `;
+  const wrapperHTML = `
+    <div class="gpt-vis-wrapper-container">
+      <div class="gpt-vis-wrapper-header">
+        <div class="gpt-vis-wrapper-tab-left">
+          <button class="gpt-vis-wrapper-tab-button active" 
+                  data-tab="chart"
+                  role="tab" 
+                  aria-selected="true" 
+                  aria-controls="chart-panel">
+            ${labels.chartTab}
+          </button>
+          <button class="gpt-vis-wrapper-tab-button" 
+                  data-tab="code"
+                  role="tab" 
+                  aria-selected="false" 
+                  aria-controls="code-panel">
+            ${labels.codeTab}
+          </button>
+        </div>
+        <div class="gpt-vis-wrapper-tab-right">
+          ${zoomButtonsHTML}
+          <button class="gpt-vis-wrapper-text-button" 
+                  data-action="download"
+                  aria-label="${labels.download}">
+            ${(0, import_icons.createDownloadIcon)(16)} <span>${labels.download}</span>
+          </button>
+          <button class="gpt-vis-wrapper-text-button gpt-vis-wrapper-tab-hide" 
+                  data-action="copy"
+                  aria-label="${labels.copy}">
+            ${(0, import_icons.createCopyIcon)()} <span>${labels.copy}</span>
+          </button>
+        </div>
+      </div>
+      <div class="gpt-vis-wrapper-content">
+        <div class="gpt-vis-wrapper-chart">
+          <div class="gpt-vis-wrapper-chart-container"></div>
+        </div>
+        <div class="gpt-vis-wrapper-code gpt-vis-wrapper-tab-hide">${syntaxString}</div>
+      </div>
+    </div>
+  `;
+  containerElement.innerHTML = wrapperHTML;
+  const wrapperContainer = containerElement.querySelector(".gpt-vis-wrapper-container");
+  const chartTabButton = wrapperContainer.querySelector('[data-tab="chart"]');
+  const codeTabButton = wrapperContainer.querySelector('[data-tab="code"]');
+  const chartWrapper = wrapperContainer.querySelector(".gpt-vis-wrapper-chart");
+  const codeContainer = wrapperContainer.querySelector(".gpt-vis-wrapper-code");
+  const chartContainer = wrapperContainer.querySelector(
+    ".gpt-vis-wrapper-chart-container"
+  );
+  const downloadButton = wrapperContainer.querySelector(
+    '[data-action="download"]'
+  );
+  const copyButton = wrapperContainer.querySelector('[data-action="copy"]');
+  const zoomInButton = wrapperContainer.querySelector(
+    '[data-action="zoom-in"]'
+  );
+  const zoomOutButton = wrapperContainer.querySelector(
+    '[data-action="zoom-out"]'
+  );
+  const divider = wrapperContainer.querySelector(".gpt-vis-wrapper-divider");
+  function switchTab(tab) {
+    const hasZoomSupport = chartRef && typeof chartRef.zoomTo === "function";
+    if (tab === "chart") {
+      chartTabButton.classList.add("active");
+      chartTabButton.setAttribute("aria-selected", "true");
+      codeTabButton.classList.remove("active");
+      codeTabButton.setAttribute("aria-selected", "false");
+      chartWrapper.classList.remove("gpt-vis-wrapper-tab-hide");
+      codeContainer.classList.add("gpt-vis-wrapper-tab-hide");
+      downloadButton.classList.remove("gpt-vis-wrapper-tab-hide");
+      copyButton.classList.add("gpt-vis-wrapper-tab-hide");
+      if (hasZoomSupport && zoomInButton && zoomOutButton && divider) {
+        zoomInButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        zoomOutButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        divider.classList.remove("gpt-vis-wrapper-tab-hide");
+      }
+    } else {
+      chartTabButton.classList.remove("active");
+      chartTabButton.setAttribute("aria-selected", "false");
+      codeTabButton.classList.add("active");
+      codeTabButton.setAttribute("aria-selected", "true");
+      chartWrapper.classList.add("gpt-vis-wrapper-tab-hide");
+      codeContainer.classList.remove("gpt-vis-wrapper-tab-hide");
+      downloadButton.classList.add("gpt-vis-wrapper-tab-hide");
+      copyButton.classList.remove("gpt-vis-wrapper-tab-hide");
+      if (hasZoomSupport && zoomInButton && zoomOutButton && divider) {
+        zoomInButton.classList.add("gpt-vis-wrapper-tab-hide");
+        zoomOutButton.classList.add("gpt-vis-wrapper-tab-hide");
+        divider.classList.add("gpt-vis-wrapper-tab-hide");
+      }
+    }
+  }
+  function handleZoomIn() {
+    var _a;
+    if (chartRef && typeof chartRef.zoomTo === "function") {
+      const currentZoom = ((_a = chartRef.getZoom) == null ? void 0 : _a.call(chartRef)) || 1;
+      const newZoom = Math.min(currentZoom * 1.15, 5);
+      chartRef.zoomTo(newZoom);
+    }
+  }
+  function handleZoomOut() {
+    var _a;
+    if (chartRef && typeof chartRef.zoomTo === "function") {
+      const currentZoom = ((_a = chartRef.getZoom) == null ? void 0 : _a.call(chartRef)) || 1;
+      const newZoom = Math.max(currentZoom / 1.15, 0.1);
+      chartRef.zoomTo(newZoom);
+    }
+  }
+  async function handleDownload() {
+    try {
+      if (chartContainer) {
+        const result = await (0, import_snapdom.snapdom)(chartContainer, { scale: 2 });
+        await result.download({
+          format: "png",
+          filename: `chart-${chartType}-${Date.now()}`
+        });
+      }
+    } catch (error) {
+      console.error("Download image failed:", error);
+    }
+  }
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(syntaxString);
+      copyButton.innerHTML = `${(0, import_icons.createCheckIcon)()} <span>${labels.copied}</span>`;
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+      copyTimeout = window.setTimeout(() => {
+        copyButton.innerHTML = `${(0, import_icons.createCopyIcon)()} <span>${labels.copy}</span>`;
+      }, 1e3);
+    } catch (error) {
+      console.error("Copy failed:", error);
+    }
+  }
+  chartTabButton.onclick = () => switchTab("chart");
+  codeTabButton.onclick = () => switchTab("code");
+  downloadButton.onclick = handleDownload;
+  copyButton.onclick = handleCopy;
+  if (zoomInButton)
+    zoomInButton.onclick = handleZoomIn;
+  if (zoomOutButton)
+    zoomOutButton.onclick = handleZoomOut;
+  return {
+    chartContainer,
+    update: (newSyntax) => {
+      const newSyntaxString = typeof newSyntax === "string" ? newSyntax : JSON.stringify(newSyntax, null, 2);
+      codeContainer.textContent = newSyntaxString;
+    },
+    setChartRef: (chart) => {
+      chartRef = chart;
+      if (chart && typeof chart.zoomTo === "function") {
+        if (zoomInButton)
+          zoomInButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        if (zoomOutButton)
+          zoomOutButton.classList.remove("gpt-vis-wrapper-tab-hide");
+        if (divider)
+          divider.classList.remove("gpt-vis-wrapper-tab-hide");
+      }
+    },
+    destroy: () => {
+      if (copyTimeout) {
+        clearTimeout(copyTimeout);
+      }
+      containerElement.innerHTML = "";
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createVisWrapper
+});

package/dist/cjs/vis-wrapper/styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS styles for the wrapper component
+ */
+export declare const wrapperStyles = "\n.gpt-vis-wrapper-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.gpt-vis-wrapper-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #f5f5f5;\n  padding: 6px 14px 6px 6px;\n  gap: 2px;\n  position: relative;\n  z-index: 10;\n}\n\n.gpt-vis-wrapper-tab-left {\n  display: flex;\n  gap: 2px;\n}\n\n.gpt-vis-wrapper-tab-right {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.gpt-vis-wrapper-tab-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  border-radius: 8px;\n  height: 26px;\n  width: 52px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.gpt-vis-wrapper-tab-button.active {\n  background: #fff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.gpt-vis-wrapper-tab-button:hover,\n.gpt-vis-wrapper-tab-button:focus {\n  color: #494949;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):hover,\n.gpt-vis-wrapper-tab-button:not(.active):focus {\n  background: #f0f0f0;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n\n.gpt-vis-wrapper-tab-button.active:hover,\n.gpt-vis-wrapper-tab-button.active:focus {\n  background: #fff;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n}\n\n.gpt-vis-wrapper-tab-button:active {\n  transform: scale(0.96);\n  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.gpt-vis-wrapper-tab-button.active:active {\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.gpt-vis-wrapper-tab-button:not(.active):active {\n  background: #e8e8e8;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.gpt-vis-wrapper-text-button {\n  border: none;\n  box-shadow: none;\n  background: transparent;\n  color: #494949;\n  height: 26px;\n  padding: 0 8px;\n  font-size: 12px;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  transform: scale(1);\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  cursor: pointer;\n  outline: none;\n  font-family: inherit;\n}\n\n.gpt-vis-wrapper-text-button:hover,\n.gpt-vis-wrapper-text-button:focus {\n  color: #666;\n  background: #e8e8e8;\n  transform: scale(1.02);\n}\n\n.gpt-vis-wrapper-text-button:active {\n  background: #e8e8e8;\n  transform: scale(0.98);\n}\n\n.gpt-vis-wrapper-zoom-button {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n}\n\n.gpt-vis-wrapper-divider {\n  width: 1px;\n  height: 16px;\n  background-color: #d9d9d9;\n  margin: 0 8px;\n  flex-shrink: 0;\n}\n\n.gpt-vis-wrapper-content {\n  overflow: hidden;\n  position: relative;\n  background: #fafafa;\n}\n\n.gpt-vis-wrapper-chart {\n  min-width: 300px;\n  max-width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.gpt-vis-wrapper-chart--g6 {\n  min-height: 400px;\n}\n\n.gpt-vis-wrapper-chart-container {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.gpt-vis-wrapper-chart--g6 .gpt-vis-wrapper-chart-container {\n  min-height: 360px;\n}\n\n.gpt-vis-wrapper-chart-container::-webkit-scrollbar {\n  display: none;\n}\n\n.gpt-vis-wrapper-code {\n  max-height: 500px;\n  overflow: auto;\n  padding: 16px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;\n  font-size: 12px;\n  line-height: 1.6;\n  color: #333;\n  background: #fafafa;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.gpt-vis-wrapper-tab-hide {\n  display: none;\n}\n";
+/**
+ * Inject styles into the document head
+ */
+export declare function injectWrapperStyles(): void;

package/dist/cjs/vis-wrapper/styles.js

@@ -0,0 +1,221 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis-wrapper/styles.ts
+var styles_exports = {};
+__export(styles_exports, {
+  injectWrapperStyles: () => injectWrapperStyles,
+  wrapperStyles: () => wrapperStyles
+});
+module.exports = __toCommonJS(styles_exports);
+var wrapperStyles = `
+.gpt-vis-wrapper-container {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.gpt-vis-wrapper-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f5f5f5;
+  padding: 6px 14px 6px 6px;
+  gap: 2px;
+  position: relative;
+  z-index: 10;
+}
+
+.gpt-vis-wrapper-tab-left {
+  display: flex;
+  gap: 2px;
+}
+
+.gpt-vis-wrapper-tab-right {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.gpt-vis-wrapper-tab-button {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: #494949;
+  border-radius: 8px;
+  height: 26px;
+  width: 52px;
+  font-size: 12px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transform: scale(1);
+  cursor: pointer;
+  outline: none;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gpt-vis-wrapper-tab-button.active {
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.gpt-vis-wrapper-tab-button:hover,
+.gpt-vis-wrapper-tab-button:focus {
+  color: #494949;
+  transform: scale(1.02);
+}
+
+.gpt-vis-wrapper-tab-button:not(.active):hover,
+.gpt-vis-wrapper-tab-button:not(.active):focus {
+  background: #f0f0f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.gpt-vis-wrapper-tab-button.active:hover,
+.gpt-vis-wrapper-tab-button.active:focus {
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.gpt-vis-wrapper-tab-button:active {
+  transform: scale(0.96);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.gpt-vis-wrapper-tab-button.active:active {
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.gpt-vis-wrapper-tab-button:not(.active):active {
+  background: #e8e8e8;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.gpt-vis-wrapper-text-button {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: #494949;
+  height: 26px;
+  padding: 0 8px;
+  font-size: 12px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transform: scale(1);
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  outline: none;
+  font-family: inherit;
+}
+
+.gpt-vis-wrapper-text-button:hover,
+.gpt-vis-wrapper-text-button:focus {
+  color: #666;
+  background: #e8e8e8;
+  transform: scale(1.02);
+}
+
+.gpt-vis-wrapper-text-button:active {
+  background: #e8e8e8;
+  transform: scale(0.98);
+}
+
+.gpt-vis-wrapper-zoom-button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+
+.gpt-vis-wrapper-divider {
+  width: 1px;
+  height: 16px;
+  background-color: #d9d9d9;
+  margin: 0 8px;
+  flex-shrink: 0;
+}
+
+.gpt-vis-wrapper-content {
+  overflow: hidden;
+  position: relative;
+  background: #fafafa;
+}
+
+.gpt-vis-wrapper-chart {
+  min-width: 300px;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.gpt-vis-wrapper-chart--g6 {
+  min-height: 400px;
+}
+
+.gpt-vis-wrapper-chart-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.gpt-vis-wrapper-chart--g6 .gpt-vis-wrapper-chart-container {
+  min-height: 360px;
+}
+
+.gpt-vis-wrapper-chart-container::-webkit-scrollbar {
+  display: none;
+}
+
+.gpt-vis-wrapper-code {
+  max-height: 500px;
+  overflow: auto;
+  padding: 16px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #333;
+  background: #fafafa;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.gpt-vis-wrapper-tab-hide {
+  display: none;
+}
+`;
+function injectWrapperStyles() {
+  const styleId = "gpt-vis-wrapper-styles";
+  if (document.getElementById(styleId)) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = styleId;
+  styleElement.textContent = wrapperStyles;
+  document.head.appendChild(styleElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  injectWrapperStyles,
+  wrapperStyles
+});