@timeplus/vistral 0.1.1

package/dist/index.js

@@ -0,0 +1,4850 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var require$$0 = require('react');
+var g2 = require('@antv/g2');
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production_min = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production_min;
+
+function requireReactJsxRuntime_production_min () {
+	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+	hasRequiredReactJsxRuntime_production_min = 1;
+var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	return reactJsxRuntime_production_min;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	var React = require$$0;
+
+	// ATTENTION
+	// When adding new symbols to this file,
+	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+	// The Symbol used to tag the ReactElement-like types.
+	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+	var REACT_MEMO_TYPE = Symbol.for('react.memo');
+	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+	var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+	var FAUX_ITERATOR_SYMBOL = '@@iterator';
+	function getIteratorFn(maybeIterable) {
+	  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+	    return null;
+	  }
+
+	  var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+	  if (typeof maybeIterator === 'function') {
+	    return maybeIterator;
+	  }
+
+	  return null;
+	}
+
+	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+	function error(format) {
+	  {
+	    {
+	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+	        args[_key2 - 1] = arguments[_key2];
+	      }
+
+	      printWarning('error', format, args);
+	    }
+	  }
+	}
+
+	function printWarning(level, format, args) {
+	  // When changing this logic, you might want to also
+	  // update consoleWithStackDev.www.js as well.
+	  {
+	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+	    var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+	    if (stack !== '') {
+	      format += '%s';
+	      args = args.concat([stack]);
+	    } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+	    var argsWithFormat = args.map(function (item) {
+	      return String(item);
+	    }); // Careful: RN currently depends on this prefix
+
+	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+	    // breaks IE9: https://github.com/facebook/react/issues/13610
+	    // eslint-disable-next-line react-internal/no-production-logging
+
+	    Function.prototype.apply.call(console[level], console, argsWithFormat);
+	  }
+	}
+
+	// -----------------------------------------------------------------------------
+
+	var enableScopeAPI = false; // Experimental Create Event Handle API.
+	var enableCacheElement = false;
+	var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+	// stuff. Intended to enable React core members to more easily debug scheduling
+	// issues in DEV builds.
+
+	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+	var REACT_MODULE_REFERENCE;
+
+	{
+	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+	}
+
+	function isValidElementType(type) {
+	  if (typeof type === 'string' || typeof type === 'function') {
+	    return true;
+	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+	    return true;
+	  }
+
+	  if (typeof type === 'object' && type !== null) {
+	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+	    // types supported by any Flight configuration anywhere since
+	    // we don't know which Flight build this will end up being used
+	    // with.
+	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+	      return true;
+	    }
+	  }
+
+	  return false;
+	}
+
+	function getWrappedName(outerType, innerType, wrapperName) {
+	  var displayName = outerType.displayName;
+
+	  if (displayName) {
+	    return displayName;
+	  }
+
+	  var functionName = innerType.displayName || innerType.name || '';
+	  return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+	} // Keep in sync with react-reconciler/getComponentNameFromFiber
+
+
+	function getContextName(type) {
+	  return type.displayName || 'Context';
+	} // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+
+
+	function getComponentNameFromType(type) {
+	  if (type == null) {
+	    // Host root, text node or just invalid type.
+	    return null;
+	  }
+
+	  {
+	    if (typeof type.tag === 'number') {
+	      error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
+	    }
+	  }
+
+	  if (typeof type === 'function') {
+	    return type.displayName || type.name || null;
+	  }
+
+	  if (typeof type === 'string') {
+	    return type;
+	  }
+
+	  switch (type) {
+	    case REACT_FRAGMENT_TYPE:
+	      return 'Fragment';
+
+	    case REACT_PORTAL_TYPE:
+	      return 'Portal';
+
+	    case REACT_PROFILER_TYPE:
+	      return 'Profiler';
+
+	    case REACT_STRICT_MODE_TYPE:
+	      return 'StrictMode';
+
+	    case REACT_SUSPENSE_TYPE:
+	      return 'Suspense';
+
+	    case REACT_SUSPENSE_LIST_TYPE:
+	      return 'SuspenseList';
+
+	  }
+
+	  if (typeof type === 'object') {
+	    switch (type.$$typeof) {
+	      case REACT_CONTEXT_TYPE:
+	        var context = type;
+	        return getContextName(context) + '.Consumer';
+
+	      case REACT_PROVIDER_TYPE:
+	        var provider = type;
+	        return getContextName(provider._context) + '.Provider';
+
+	      case REACT_FORWARD_REF_TYPE:
+	        return getWrappedName(type, type.render, 'ForwardRef');
+
+	      case REACT_MEMO_TYPE:
+	        var outerName = type.displayName || null;
+
+	        if (outerName !== null) {
+	          return outerName;
+	        }
+
+	        return getComponentNameFromType(type.type) || 'Memo';
+
+	      case REACT_LAZY_TYPE:
+	        {
+	          var lazyComponent = type;
+	          var payload = lazyComponent._payload;
+	          var init = lazyComponent._init;
+
+	          try {
+	            return getComponentNameFromType(init(payload));
+	          } catch (x) {
+	            return null;
+	          }
+	        }
+
+	      // eslint-disable-next-line no-fallthrough
+	    }
+	  }
+
+	  return null;
+	}
+
+	var assign = Object.assign;
+
+	// Helpers to patch console.logs to avoid logging during side-effect free
+	// replaying on render function. This currently only patches the object
+	// lazily which won't cover if the log function was extracted eagerly.
+	// We could also eagerly patch the method.
+	var disabledDepth = 0;
+	var prevLog;
+	var prevInfo;
+	var prevWarn;
+	var prevError;
+	var prevGroup;
+	var prevGroupCollapsed;
+	var prevGroupEnd;
+
+	function disabledLog() {}
+
+	disabledLog.__reactDisabledLog = true;
+	function disableLogs() {
+	  {
+	    if (disabledDepth === 0) {
+	      /* eslint-disable react-internal/no-production-logging */
+	      prevLog = console.log;
+	      prevInfo = console.info;
+	      prevWarn = console.warn;
+	      prevError = console.error;
+	      prevGroup = console.group;
+	      prevGroupCollapsed = console.groupCollapsed;
+	      prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+	      var props = {
+	        configurable: true,
+	        enumerable: true,
+	        value: disabledLog,
+	        writable: true
+	      }; // $FlowFixMe Flow thinks console is immutable.
+
+	      Object.defineProperties(console, {
+	        info: props,
+	        log: props,
+	        warn: props,
+	        error: props,
+	        group: props,
+	        groupCollapsed: props,
+	        groupEnd: props
+	      });
+	      /* eslint-enable react-internal/no-production-logging */
+	    }
+
+	    disabledDepth++;
+	  }
+	}
+	function reenableLogs() {
+	  {
+	    disabledDepth--;
+
+	    if (disabledDepth === 0) {
+	      /* eslint-disable react-internal/no-production-logging */
+	      var props = {
+	        configurable: true,
+	        enumerable: true,
+	        writable: true
+	      }; // $FlowFixMe Flow thinks console is immutable.
+
+	      Object.defineProperties(console, {
+	        log: assign({}, props, {
+	          value: prevLog
+	        }),
+	        info: assign({}, props, {
+	          value: prevInfo
+	        }),
+	        warn: assign({}, props, {
+	          value: prevWarn
+	        }),
+	        error: assign({}, props, {
+	          value: prevError
+	        }),
+	        group: assign({}, props, {
+	          value: prevGroup
+	        }),
+	        groupCollapsed: assign({}, props, {
+	          value: prevGroupCollapsed
+	        }),
+	        groupEnd: assign({}, props, {
+	          value: prevGroupEnd
+	        })
+	      });
+	      /* eslint-enable react-internal/no-production-logging */
+	    }
+
+	    if (disabledDepth < 0) {
+	      error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+	    }
+	  }
+	}
+
+	var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+	var prefix;
+	function describeBuiltInComponentFrame(name, source, ownerFn) {
+	  {
+	    if (prefix === undefined) {
+	      // Extract the VM specific prefix used by each line.
+	      try {
+	        throw Error();
+	      } catch (x) {
+	        var match = x.stack.trim().match(/\n( *(at )?)/);
+	        prefix = match && match[1] || '';
+	      }
+	    } // We use the prefix to ensure our stacks line up with native stack frames.
+
+
+	    return '\n' + prefix + name;
+	  }
+	}
+	var reentry = false;
+	var componentFrameCache;
+
+	{
+	  var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+	  componentFrameCache = new PossiblyWeakMap();
+	}
+
+	function describeNativeComponentFrame(fn, construct) {
+	  // If something asked for a stack inside a fake render, it should get ignored.
+	  if ( !fn || reentry) {
+	    return '';
+	  }
+
+	  {
+	    var frame = componentFrameCache.get(fn);
+
+	    if (frame !== undefined) {
+	      return frame;
+	    }
+	  }
+
+	  var control;
+	  reentry = true;
+	  var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+
+	  Error.prepareStackTrace = undefined;
+	  var previousDispatcher;
+
+	  {
+	    previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+	    // for warnings.
+
+	    ReactCurrentDispatcher.current = null;
+	    disableLogs();
+	  }
+
+	  try {
+	    // This should throw.
+	    if (construct) {
+	      // Something should be setting the props in the constructor.
+	      var Fake = function () {
+	        throw Error();
+	      }; // $FlowFixMe
+
+
+	      Object.defineProperty(Fake.prototype, 'props', {
+	        set: function () {
+	          // We use a throwing setter instead of frozen or non-writable props
+	          // because that won't throw in a non-strict mode function.
+	          throw Error();
+	        }
+	      });
+
+	      if (typeof Reflect === 'object' && Reflect.construct) {
+	        // We construct a different control for this case to include any extra
+	        // frames added by the construct call.
+	        try {
+	          Reflect.construct(Fake, []);
+	        } catch (x) {
+	          control = x;
+	        }
+
+	        Reflect.construct(fn, [], Fake);
+	      } else {
+	        try {
+	          Fake.call();
+	        } catch (x) {
+	          control = x;
+	        }
+
+	        fn.call(Fake.prototype);
+	      }
+	    } else {
+	      try {
+	        throw Error();
+	      } catch (x) {
+	        control = x;
+	      }
+
+	      fn();
+	    }
+	  } catch (sample) {
+	    // This is inlined manually because closure doesn't do it for us.
+	    if (sample && control && typeof sample.stack === 'string') {
+	      // This extracts the first frame from the sample that isn't also in the control.
+	      // Skipping one frame that we assume is the frame that calls the two.
+	      var sampleLines = sample.stack.split('\n');
+	      var controlLines = control.stack.split('\n');
+	      var s = sampleLines.length - 1;
+	      var c = controlLines.length - 1;
+
+	      while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+	        // We expect at least one stack frame to be shared.
+	        // Typically this will be the root most one. However, stack frames may be
+	        // cut off due to maximum stack limits. In this case, one maybe cut off
+	        // earlier than the other. We assume that the sample is longer or the same
+	        // and there for cut off earlier. So we should find the root most frame in
+	        // the sample somewhere in the control.
+	        c--;
+	      }
+
+	      for (; s >= 1 && c >= 0; s--, c--) {
+	        // Next we find the first one that isn't the same which should be the
+	        // frame that called our sample function and the control.
+	        if (sampleLines[s] !== controlLines[c]) {
+	          // In V8, the first line is describing the message but other VMs don't.
+	          // If we're about to return the first line, and the control is also on the same
+	          // line, that's a pretty good indicator that our sample threw at same line as
+	          // the control. I.e. before we entered the sample frame. So we ignore this result.
+	          // This can happen if you passed a class to function component, or non-function.
+	          if (s !== 1 || c !== 1) {
+	            do {
+	              s--;
+	              c--; // We may still have similar intermediate frames from the construct call.
+	              // The next one that isn't the same should be our match though.
+
+	              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+	                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+	                var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+	                // but we have a user-provided "displayName"
+	                // splice it in to make the stack more readable.
+
+
+	                if (fn.displayName && _frame.includes('<anonymous>')) {
+	                  _frame = _frame.replace('<anonymous>', fn.displayName);
+	                }
+
+	                {
+	                  if (typeof fn === 'function') {
+	                    componentFrameCache.set(fn, _frame);
+	                  }
+	                } // Return the line we found.
+
+
+	                return _frame;
+	              }
+	            } while (s >= 1 && c >= 0);
+	          }
+
+	          break;
+	        }
+	      }
+	    }
+	  } finally {
+	    reentry = false;
+
+	    {
+	      ReactCurrentDispatcher.current = previousDispatcher;
+	      reenableLogs();
+	    }
+
+	    Error.prepareStackTrace = previousPrepareStackTrace;
+	  } // Fallback to just using the name if we couldn't make it throw.
+
+
+	  var name = fn ? fn.displayName || fn.name : '';
+	  var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+
+	  {
+	    if (typeof fn === 'function') {
+	      componentFrameCache.set(fn, syntheticFrame);
+	    }
+	  }
+
+	  return syntheticFrame;
+	}
+	function describeFunctionComponentFrame(fn, source, ownerFn) {
+	  {
+	    return describeNativeComponentFrame(fn, false);
+	  }
+	}
+
+	function shouldConstruct(Component) {
+	  var prototype = Component.prototype;
+	  return !!(prototype && prototype.isReactComponent);
+	}
+
+	function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+
+	  if (type == null) {
+	    return '';
+	  }
+
+	  if (typeof type === 'function') {
+	    {
+	      return describeNativeComponentFrame(type, shouldConstruct(type));
+	    }
+	  }
+
+	  if (typeof type === 'string') {
+	    return describeBuiltInComponentFrame(type);
+	  }
+
+	  switch (type) {
+	    case REACT_SUSPENSE_TYPE:
+	      return describeBuiltInComponentFrame('Suspense');
+
+	    case REACT_SUSPENSE_LIST_TYPE:
+	      return describeBuiltInComponentFrame('SuspenseList');
+	  }
+
+	  if (typeof type === 'object') {
+	    switch (type.$$typeof) {
+	      case REACT_FORWARD_REF_TYPE:
+	        return describeFunctionComponentFrame(type.render);
+
+	      case REACT_MEMO_TYPE:
+	        // Memo may contain any component type so we recursively resolve it.
+	        return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+
+	      case REACT_LAZY_TYPE:
+	        {
+	          var lazyComponent = type;
+	          var payload = lazyComponent._payload;
+	          var init = lazyComponent._init;
+
+	          try {
+	            // Lazy may contain any component type so we recursively resolve it.
+	            return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+	          } catch (x) {}
+	        }
+	    }
+	  }
+
+	  return '';
+	}
+
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+	var loggedTypeFailures = {};
+	var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+
+	function setCurrentlyValidatingElement(element) {
+	  {
+	    if (element) {
+	      var owner = element._owner;
+	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+	      ReactDebugCurrentFrame.setExtraStackFrame(stack);
+	    } else {
+	      ReactDebugCurrentFrame.setExtraStackFrame(null);
+	    }
+	  }
+	}
+
+	function checkPropTypes(typeSpecs, values, location, componentName, element) {
+	  {
+	    // $FlowFixMe This is okay but Flow doesn't know it.
+	    var has = Function.call.bind(hasOwnProperty);
+
+	    for (var typeSpecName in typeSpecs) {
+	      if (has(typeSpecs, typeSpecName)) {
+	        var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+	        // fail the render phase where it didn't fail before. So we log it.
+	        // After these have been cleaned up, we'll let them throw.
+
+	        try {
+	          // This is intentionally an invariant that gets caught. It's the same
+	          // behavior as without this statement except with a better message.
+	          if (typeof typeSpecs[typeSpecName] !== 'function') {
+	            // eslint-disable-next-line react-internal/prod-error-codes
+	            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+	            err.name = 'Invariant Violation';
+	            throw err;
+	          }
+
+	          error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+	        } catch (ex) {
+	          error$1 = ex;
+	        }
+
+	        if (error$1 && !(error$1 instanceof Error)) {
+	          setCurrentlyValidatingElement(element);
+
+	          error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+
+	          setCurrentlyValidatingElement(null);
+	        }
+
+	        if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+	          // Only monitor this failure once because there tends to be a lot of the
+	          // same error.
+	          loggedTypeFailures[error$1.message] = true;
+	          setCurrentlyValidatingElement(element);
+
+	          error('Failed %s type: %s', location, error$1.message);
+
+	          setCurrentlyValidatingElement(null);
+	        }
+	      }
+	    }
+	  }
+	}
+
+	var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+	function isArray(a) {
+	  return isArrayImpl(a);
+	}
+
+	/*
+	 * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+	 * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+	 *
+	 * The functions in this module will throw an easier-to-understand,
+	 * easier-to-debug exception with a clear errors message message explaining the
+	 * problem. (Instead of a confusing exception thrown inside the implementation
+	 * of the `value` object).
+	 */
+	// $FlowFixMe only called in DEV, so void return is not possible.
+	function typeName(value) {
+	  {
+	    // toStringTag is needed for namespaced types like Temporal.Instant
+	    var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+	    var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+	    return type;
+	  }
+	} // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+	function willCoercionThrow(value) {
+	  {
+	    try {
+	      testStringCoercion(value);
+	      return false;
+	    } catch (e) {
+	      return true;
+	    }
+	  }
+	}
+
+	function testStringCoercion(value) {
+	  // If you ended up here by following an exception call stack, here's what's
+	  // happened: you supplied an object or symbol value to React (as a prop, key,
+	  // DOM attribute, CSS property, string ref, etc.) and when React tried to
+	  // coerce it to a string using `'' + value`, an exception was thrown.
+	  //
+	  // The most common types that will cause this exception are `Symbol` instances
+	  // and Temporal objects like `Temporal.Instant`. But any object that has a
+	  // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+	  // exception. (Library authors do this to prevent users from using built-in
+	  // numeric operators like `+` or comparison operators like `>=` because custom
+	  // methods are needed to perform accurate arithmetic or comparison.)
+	  //
+	  // To fix the problem, coerce this object or symbol value to a string before
+	  // passing it to React. The most reliable way is usually `String(value)`.
+	  //
+	  // To find which value is throwing, check the browser or debugger console.
+	  // Before this exception was thrown, there should be `console.error` output
+	  // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+	  // problem and how that type was used: key, atrribute, input value prop, etc.
+	  // In most cases, this console output also shows the component and its
+	  // ancestor components where the exception happened.
+	  //
+	  // eslint-disable-next-line react-internal/safe-string-coercion
+	  return '' + value;
+	}
+	function checkKeyStringCoercion(value) {
+	  {
+	    if (willCoercionThrow(value)) {
+	      error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+	      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+	    }
+	  }
+	}
+
+	var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+	var RESERVED_PROPS = {
+	  key: true,
+	  ref: true,
+	  __self: true,
+	  __source: true
+	};
+	var specialPropKeyWarningShown;
+	var specialPropRefWarningShown;
+	var didWarnAboutStringRefs;
+
+	{
+	  didWarnAboutStringRefs = {};
+	}
+
+	function hasValidRef(config) {
+	  {
+	    if (hasOwnProperty.call(config, 'ref')) {
+	      var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+
+	      if (getter && getter.isReactWarning) {
+	        return false;
+	      }
+	    }
+	  }
+
+	  return config.ref !== undefined;
+	}
+
+	function hasValidKey(config) {
+	  {
+	    if (hasOwnProperty.call(config, 'key')) {
+	      var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+
+	      if (getter && getter.isReactWarning) {
+	        return false;
+	      }
+	    }
+	  }
+
+	  return config.key !== undefined;
+	}
+
+	function warnIfStringRefCannotBeAutoConverted(config, self) {
+	  {
+	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+	      var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
+
+	      if (!didWarnAboutStringRefs[componentName]) {
+	        error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
+
+	        didWarnAboutStringRefs[componentName] = true;
+	      }
+	    }
+	  }
+	}
+
+	function defineKeyPropWarningGetter(props, displayName) {
+	  {
+	    var warnAboutAccessingKey = function () {
+	      if (!specialPropKeyWarningShown) {
+	        specialPropKeyWarningShown = true;
+
+	        error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+	      }
+	    };
+
+	    warnAboutAccessingKey.isReactWarning = true;
+	    Object.defineProperty(props, 'key', {
+	      get: warnAboutAccessingKey,
+	      configurable: true
+	    });
+	  }
+	}
+
+	function defineRefPropWarningGetter(props, displayName) {
+	  {
+	    var warnAboutAccessingRef = function () {
+	      if (!specialPropRefWarningShown) {
+	        specialPropRefWarningShown = true;
+
+	        error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+	      }
+	    };
+
+	    warnAboutAccessingRef.isReactWarning = true;
+	    Object.defineProperty(props, 'ref', {
+	      get: warnAboutAccessingRef,
+	      configurable: true
+	    });
+	  }
+	}
+	/**
+	 * Factory method to create a new React element. This no longer adheres to
+	 * the class pattern, so do not use new to call it. Also, instanceof check
+	 * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+	 * if something is a React Element.
+	 *
+	 * @param {*} type
+	 * @param {*} props
+	 * @param {*} key
+	 * @param {string|object} ref
+	 * @param {*} owner
+	 * @param {*} self A *temporary* helper to detect places where `this` is
+	 * different from the `owner` when React.createElement is called, so that we
+	 * can warn. We want to get rid of owner and replace string `ref`s with arrow
+	 * functions, and as long as `this` and owner are the same, there will be no
+	 * change in behavior.
+	 * @param {*} source An annotation object (added by a transpiler or otherwise)
+	 * indicating filename, line number, and/or other information.
+	 * @internal
+	 */
+
+
+	var ReactElement = function (type, key, ref, self, source, owner, props) {
+	  var element = {
+	    // This tag allows us to uniquely identify this as a React Element
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    // Built-in properties that belong on the element
+	    type: type,
+	    key: key,
+	    ref: ref,
+	    props: props,
+	    // Record the component responsible for creating this element.
+	    _owner: owner
+	  };
+
+	  {
+	    // The validation flag is currently mutative. We put it on
+	    // an external backing store so that we can freeze the whole object.
+	    // This can be replaced with a WeakMap once they are implemented in
+	    // commonly used development environments.
+	    element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+	    // the validation flag non-enumerable (where possible, which should
+	    // include every environment we run tests in), so the test framework
+	    // ignores it.
+
+	    Object.defineProperty(element._store, 'validated', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: true,
+	      value: false
+	    }); // self and source are DEV only properties.
+
+	    Object.defineProperty(element, '_self', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: false,
+	      value: self
+	    }); // Two elements created in two different places should be considered
+	    // equal for testing purposes and therefore we hide it from enumeration.
+
+	    Object.defineProperty(element, '_source', {
+	      configurable: false,
+	      enumerable: false,
+	      writable: false,
+	      value: source
+	    });
+
+	    if (Object.freeze) {
+	      Object.freeze(element.props);
+	      Object.freeze(element);
+	    }
+	  }
+
+	  return element;
+	};
+	/**
+	 * https://github.com/reactjs/rfcs/pull/107
+	 * @param {*} type
+	 * @param {object} props
+	 * @param {string} key
+	 */
+
+	function jsxDEV(type, config, maybeKey, source, self) {
+	  {
+	    var propName; // Reserved names are extracted
+
+	    var props = {};
+	    var key = null;
+	    var ref = null; // Currently, key can be spread in as a prop. This causes a potential
+	    // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+	    // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+	    // but as an intermediary step, we will use jsxDEV for everything except
+	    // <div {...props} key="Hi" />, because we aren't currently able to tell if
+	    // key is explicitly declared to be undefined or not.
+
+	    if (maybeKey !== undefined) {
+	      {
+	        checkKeyStringCoercion(maybeKey);
+	      }
+
+	      key = '' + maybeKey;
+	    }
+
+	    if (hasValidKey(config)) {
+	      {
+	        checkKeyStringCoercion(config.key);
+	      }
+
+	      key = '' + config.key;
+	    }
+
+	    if (hasValidRef(config)) {
+	      ref = config.ref;
+	      warnIfStringRefCannotBeAutoConverted(config, self);
+	    } // Remaining properties are added to a new props object
+
+
+	    for (propName in config) {
+	      if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+	        props[propName] = config[propName];
+	      }
+	    } // Resolve default props
+
+
+	    if (type && type.defaultProps) {
+	      var defaultProps = type.defaultProps;
+
+	      for (propName in defaultProps) {
+	        if (props[propName] === undefined) {
+	          props[propName] = defaultProps[propName];
+	        }
+	      }
+	    }
+
+	    if (key || ref) {
+	      var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+	      if (key) {
+	        defineKeyPropWarningGetter(props, displayName);
+	      }
+
+	      if (ref) {
+	        defineRefPropWarningGetter(props, displayName);
+	      }
+	    }
+
+	    return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+	  }
+	}
+
+	var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+	var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+
+	function setCurrentlyValidatingElement$1(element) {
+	  {
+	    if (element) {
+	      var owner = element._owner;
+	      var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+	      ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+	    } else {
+	      ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+	    }
+	  }
+	}
+
+	var propTypesMisspellWarningShown;
+
+	{
+	  propTypesMisspellWarningShown = false;
+	}
+	/**
+	 * Verifies the object is a ReactElement.
+	 * See https://reactjs.org/docs/react-api.html#isvalidelement
+	 * @param {?object} object
+	 * @return {boolean} True if `object` is a ReactElement.
+	 * @final
+	 */
+
+
+	function isValidElement(object) {
+	  {
+	    return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	  }
+	}
+
+	function getDeclarationErrorAddendum() {
+	  {
+	    if (ReactCurrentOwner$1.current) {
+	      var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
+
+	      if (name) {
+	        return '\n\nCheck the render method of `' + name + '`.';
+	      }
+	    }
+
+	    return '';
+	  }
+	}
+
+	function getSourceInfoErrorAddendum(source) {
+	  {
+	    if (source !== undefined) {
+	      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+	      var lineNumber = source.lineNumber;
+	      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+	    }
+
+	    return '';
+	  }
+	}
+	/**
+	 * Warn if there's no key explicitly set on dynamic arrays of children or
+	 * object keys are not valid. This allows us to keep track of children between
+	 * updates.
+	 */
+
+
+	var ownerHasKeyUseWarning = {};
+
+	function getCurrentComponentErrorInfo(parentType) {
+	  {
+	    var info = getDeclarationErrorAddendum();
+
+	    if (!info) {
+	      var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+
+	      if (parentName) {
+	        info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+	      }
+	    }
+
+	    return info;
+	  }
+	}
+	/**
+	 * Warn if the element doesn't have an explicit key assigned to it.
+	 * This element is in an array. The array could grow and shrink or be
+	 * reordered. All children that haven't already been validated are required to
+	 * have a "key" property assigned to it. Error statuses are cached so a warning
+	 * will only be shown once.
+	 *
+	 * @internal
+	 * @param {ReactElement} element Element that requires a key.
+	 * @param {*} parentType element's parent's type.
+	 */
+
+
+	function validateExplicitKey(element, parentType) {
+	  {
+	    if (!element._store || element._store.validated || element.key != null) {
+	      return;
+	    }
+
+	    element._store.validated = true;
+	    var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+
+	    if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+	      return;
+	    }
+
+	    ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+	    // property, it may be the creator of the child that's responsible for
+	    // assigning it a key.
+
+	    var childOwner = '';
+
+	    if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+	      // Give the component that originally created this child.
+	      childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
+	    }
+
+	    setCurrentlyValidatingElement$1(element);
+
+	    error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+
+	    setCurrentlyValidatingElement$1(null);
+	  }
+	}
+	/**
+	 * Ensure that every element either is passed in a static location, in an
+	 * array with an explicit keys property defined, or in an object literal
+	 * with valid key property.
+	 *
+	 * @internal
+	 * @param {ReactNode} node Statically passed child of any type.
+	 * @param {*} parentType node's parent's type.
+	 */
+
+
+	function validateChildKeys(node, parentType) {
+	  {
+	    if (typeof node !== 'object') {
+	      return;
+	    }
+
+	    if (isArray(node)) {
+	      for (var i = 0; i < node.length; i++) {
+	        var child = node[i];
+
+	        if (isValidElement(child)) {
+	          validateExplicitKey(child, parentType);
+	        }
+	      }
+	    } else if (isValidElement(node)) {
+	      // This element was passed in a valid location.
+	      if (node._store) {
+	        node._store.validated = true;
+	      }
+	    } else if (node) {
+	      var iteratorFn = getIteratorFn(node);
+
+	      if (typeof iteratorFn === 'function') {
+	        // Entry iterators used to provide implicit keys,
+	        // but now we print a separate warning for them later.
+	        if (iteratorFn !== node.entries) {
+	          var iterator = iteratorFn.call(node);
+	          var step;
+
+	          while (!(step = iterator.next()).done) {
+	            if (isValidElement(step.value)) {
+	              validateExplicitKey(step.value, parentType);
+	            }
+	          }
+	        }
+	      }
+	    }
+	  }
+	}
+	/**
+	 * Given an element, validate that its props follow the propTypes definition,
+	 * provided by the type.
+	 *
+	 * @param {ReactElement} element
+	 */
+
+
+	function validatePropTypes(element) {
+	  {
+	    var type = element.type;
+
+	    if (type === null || type === undefined || typeof type === 'string') {
+	      return;
+	    }
+
+	    var propTypes;
+
+	    if (typeof type === 'function') {
+	      propTypes = type.propTypes;
+	    } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
+	    // Inner props are checked in the reconciler.
+	    type.$$typeof === REACT_MEMO_TYPE)) {
+	      propTypes = type.propTypes;
+	    } else {
+	      return;
+	    }
+
+	    if (propTypes) {
+	      // Intentionally inside to avoid triggering lazy initializers:
+	      var name = getComponentNameFromType(type);
+	      checkPropTypes(propTypes, element.props, 'prop', name, element);
+	    } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+	      propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+
+	      var _name = getComponentNameFromType(type);
+
+	      error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+	    }
+
+	    if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+	      error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+	    }
+	  }
+	}
+	/**
+	 * Given a fragment, validate that it can only be provided with fragment props
+	 * @param {ReactElement} fragment
+	 */
+
+
+	function validateFragmentProps(fragment) {
+	  {
+	    var keys = Object.keys(fragment.props);
+
+	    for (var i = 0; i < keys.length; i++) {
+	      var key = keys[i];
+
+	      if (key !== 'children' && key !== 'key') {
+	        setCurrentlyValidatingElement$1(fragment);
+
+	        error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+
+	        setCurrentlyValidatingElement$1(null);
+	        break;
+	      }
+	    }
+
+	    if (fragment.ref !== null) {
+	      setCurrentlyValidatingElement$1(fragment);
+
+	      error('Invalid attribute `ref` supplied to `React.Fragment`.');
+
+	      setCurrentlyValidatingElement$1(null);
+	    }
+	  }
+	}
+
+	var didWarnAboutKeySpread = {};
+	function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+	  {
+	    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+	    // succeed and there will likely be errors in render.
+
+	    if (!validType) {
+	      var info = '';
+
+	      if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+	        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+	      }
+
+	      var sourceInfo = getSourceInfoErrorAddendum(source);
+
+	      if (sourceInfo) {
+	        info += sourceInfo;
+	      } else {
+	        info += getDeclarationErrorAddendum();
+	      }
+
+	      var typeString;
+
+	      if (type === null) {
+	        typeString = 'null';
+	      } else if (isArray(type)) {
+	        typeString = 'array';
+	      } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+	        typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
+	        info = ' Did you accidentally export a JSX literal instead of a component?';
+	      } else {
+	        typeString = typeof type;
+	      }
+
+	      error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
+	    }
+
+	    var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+	    // TODO: Drop this when these are no longer allowed as the type argument.
+
+	    if (element == null) {
+	      return element;
+	    } // Skip key warning if the type isn't valid since our key validation logic
+	    // doesn't expect a non-string/function type and can throw confusing errors.
+	    // We don't want exception behavior to differ between dev and prod.
+	    // (Rendering will throw with a helpful message and as soon as the type is
+	    // fixed, the key warnings will appear.)
+
+
+	    if (validType) {
+	      var children = props.children;
+
+	      if (children !== undefined) {
+	        if (isStaticChildren) {
+	          if (isArray(children)) {
+	            for (var i = 0; i < children.length; i++) {
+	              validateChildKeys(children[i], type);
+	            }
+
+	            if (Object.freeze) {
+	              Object.freeze(children);
+	            }
+	          } else {
+	            error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
+	          }
+	        } else {
+	          validateChildKeys(children, type);
+	        }
+	      }
+	    }
+
+	    {
+	      if (hasOwnProperty.call(props, 'key')) {
+	        var componentName = getComponentNameFromType(type);
+	        var keys = Object.keys(props).filter(function (k) {
+	          return k !== 'key';
+	        });
+	        var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
+
+	        if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+	          var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+
+	          error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
+
+	          didWarnAboutKeySpread[componentName + beforeExample] = true;
+	        }
+	      }
+	    }
+
+	    if (type === REACT_FRAGMENT_TYPE) {
+	      validateFragmentProps(element);
+	    } else {
+	      validatePropTypes(element);
+	    }
+
+	    return element;
+	  }
+	} // These two functions exist to still get child warnings in dev
+	// even with the prod transform. This means that jsxDEV is purely
+	// opt-in behavior for better messages but that we won't stop
+	// giving you warnings if you use production apis.
+
+	function jsxWithValidationStatic(type, props, key) {
+	  {
+	    return jsxWithValidation(type, props, key, true);
+	  }
+	}
+	function jsxWithValidationDynamic(type, props, key) {
+	  {
+	    return jsxWithValidation(type, props, key, false);
+	  }
+	}
+
+	var jsx =  jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+	// for now we can ship identical prod functions
+
+	var jsxs =  jsxWithValidationStatic ;
+
+	reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_development.jsx = jsx;
+	reactJsxRuntime_development.jsxs = jsxs;
+	  })();
+	}
+	return reactJsxRuntime_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  jsxRuntime.exports = requireReactJsxRuntime_production_min();
+} else {
+  jsxRuntime.exports = requireReactJsxRuntime_development();
+}
+
+var jsxRuntimeExports = jsxRuntime.exports;
+
+/**
+ * Color palettes for stream visualization
+ */
+// Single color palettes (monochromatic)
+const singleColorPalettes = [
+    {
+        label: 'red',
+        keyColor: 5,
+        keyColorValue: '#FF3B65',
+        values: [
+            '#FFD2D9',
+            '#FFB0BF',
+            '#FF90A2',
+            '#FF6780',
+            '#FF3B65',
+            '#D12D50',
+            '#A31E3B',
+            '#751025',
+            '#470110',
+            '#35010E',
+        ],
+    },
+    {
+        label: 'pink',
+        keyColor: 5,
+        keyColorValue: '#D53C97',
+        values: [
+            '#F5D2E3',
+            '#EDB0CF',
+            '#E590BD',
+            '#D967A4',
+            '#D53C97',
+            '#B52D7F',
+            '#961F68',
+            '#761050',
+            '#560238',
+            '#330124',
+        ],
+    },
+    {
+        label: 'purple',
+        keyColor: 5,
+        keyColorValue: '#AC1BB5',
+        values: [
+            '#EACAEA',
+            '#DAA6DA',
+            '#CB81CC',
+            '#B553BA',
+            '#AC1BB5',
+            '#911698',
+            '#75127C',
+            '#5A0E5F',
+            '#3E0942',
+            '#250528',
+        ],
+    },
+    {
+        label: 'blue',
+        keyColor: 5,
+        keyColorValue: '#664CFC',
+        values: [
+            '#D9D3FC',
+            '#BEB4F9',
+            '#A395F8',
+            '#806DF4',
+            '#664CFC',
+            '#523DCE',
+            '#3F2F9F',
+            '#2B2171',
+            '#171242',
+            '#0E0E35',
+        ],
+    },
+    {
+        label: 'green',
+        keyColor: 5,
+        keyColorValue: '#52FFDB',
+        values: [
+            '#D5FFF6',
+            '#B8FFF0',
+            '#99FEE9',
+            '#73FEE0',
+            '#52FFDB',
+            '#43D2B4',
+            '#34A68D',
+            '#23AD8F',
+            '#1F8D77',
+            '#113027',
+        ],
+    },
+    {
+        label: 'orange',
+        keyColor: 2,
+        keyColorValue: '#F97316',
+        values: ['#FDBA74', '#FB923C', '#F97316'],
+    },
+    {
+        label: 'yellow',
+        keyColor: 2,
+        keyColorValue: '#EAB308',
+        values: ['#FDE047', '#FACC15', '#EAB308'],
+    },
+    {
+        label: 'cyan',
+        keyColor: 2,
+        keyColorValue: '#06B6D4',
+        values: ['#67E8F9', '#22D3EE', '#06B6D4'],
+    },
+    {
+        label: 'gray',
+        keyColor: 2,
+        keyColorValue: '#71717A',
+        values: ['#A1A1AA', '#71717A', '#52525B'],
+    },
+];
+// Multi-color palettes for categorical data
+const multiColorPalettes = [
+    {
+        label: 'Dawn',
+        keyColor: 0,
+        keyColorValue: '#EC4899',
+        values: [
+            '#EC4899', // pink-400
+            '#FACC15', // yellow-400
+            '#DA4B36',
+            '#9A1563',
+            '#F87171', // red-400
+            '#EF4444', // red-500
+            '#A855F7', // purple-500
+            '#DB2777', // pink-500
+            '#F7775A',
+            '#8B5CF6', // purple-500
+        ],
+    },
+    {
+        label: 'Morning',
+        keyColor: 0,
+        keyColorValue: '#3B82F6',
+        values: [
+            '#3B82F6', // blue-500
+            '#FB923C', // orange-400
+            '#F87171', // red-400
+            '#22D3EE', // cyan-400
+            '#C084FC', // purple-400
+            '#FACC15', // yellow-400
+            '#F472B6', // pink-400
+            '#4ADE80', // green-400
+            '#EC4899', // pink-500
+            '#4E5ADF',
+        ],
+    },
+    {
+        label: 'Midnight',
+        keyColor: 0,
+        keyColorValue: '#4E5ADF',
+        values: [
+            '#4E5ADF',
+            '#A855F7', // purple-500
+            '#3B82F6', // blue-500
+            '#084B8A',
+            '#22C55E', // green-500
+            '#C084FC', // purple-400
+            '#244E47',
+            '#0891B2', // cyan-600
+            '#6626A3',
+            '#2563EB', // blue-600
+        ],
+    },
+    {
+        label: 'Ocean',
+        keyColor: 0,
+        keyColorValue: '#0EA5E9',
+        values: [
+            '#0EA5E9', // sky-500
+            '#06B6D4', // cyan-500
+            '#14B8A6', // teal-500
+            '#22C55E', // green-500
+            '#3B82F6', // blue-500
+            '#6366F1', // indigo-500
+            '#8B5CF6', // violet-500
+            '#0284C7', // sky-600
+            '#0891B2', // cyan-600
+            '#0D9488', // teal-600
+        ],
+    },
+    {
+        label: 'Sunset',
+        keyColor: 0,
+        keyColorValue: '#F97316',
+        values: [
+            '#F97316', // orange-500
+            '#EF4444', // red-500
+            '#EC4899', // pink-500
+            '#F59E0B', // amber-500
+            '#FACC15', // yellow-500
+            '#FB923C', // orange-400
+            '#F87171', // red-400
+            '#F472B6', // pink-400
+            '#FBBF24', // amber-400
+            '#FDE047', // yellow-400
+        ],
+    },
+];
+// All palettes combined
+const allPalettes = [...multiColorPalettes, ...singleColorPalettes];
+// Default palette
+const DEFAULT_PALETTE = multiColorPalettes[0];
+/**
+ * Find a color palette by its values array
+ */
+function findPaletteByValues(values, defaultPalette = DEFAULT_PALETTE) {
+    return (allPalettes.find((palette) => palette.values.join(',') === values.join(',')) || defaultPalette);
+}
+/**
+ * Find a color palette by label
+ */
+function findPaletteByLabel(label, defaultPalette = DEFAULT_PALETTE) {
+    return allPalettes.find((palette) => palette.label === label) || defaultPalette;
+}
+/**
+ * Get the key color from a palette with optional opacity
+ */
+function getPaletteKeyColor(label, opacity = 1) {
+    const palette = findPaletteByLabel(label);
+    if (!palette)
+        return '';
+    if (opacity === 1)
+        return palette.keyColorValue;
+    const hex = palette.keyColorValue;
+    const alpha = Math.floor(opacity * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `${hex}${alpha}`;
+}
+/**
+ * Generate colors for a given number of series from a palette
+ */
+function getSeriesColors(palette, count) {
+    const colors = [];
+    for (let i = 0; i < count; i++) {
+        colors.push(palette.values[i % palette.values.length]);
+    }
+    return colors;
+}
+const darkTheme = {
+    backgroundColor: 'transparent',
+    textColor: '#E5E5E5',
+    gridColor: '#374151',
+    axisColor: '#6B7280',
+    tooltipBackground: '#1F2937',
+    tooltipTextColor: '#E5E5E5',
+    fontFamily: 'Inter, system-ui, sans-serif',
+};
+const lightTheme = {
+    backgroundColor: 'transparent',
+    textColor: '#1F2937',
+    gridColor: '#E5E7EB',
+    axisColor: '#9CA3AF',
+    tooltipBackground: '#FFFFFF',
+    tooltipTextColor: '#1F2937',
+    fontFamily: 'Inter, system-ui, sans-serif',
+};
+function getTheme(name) {
+    return name === 'dark' ? darkTheme : lightTheme;
+}
+
+/**
+ * VistralSpec — declarative grammar types for streaming visualizations.
+ *
+ * These types define a renderer-agnostic specification that can be compiled
+ * down to AntV G2 options (or other backends in the future).
+ */
+// ---------------------------------------------------------------------------
+// Streaming
+// ---------------------------------------------------------------------------
+/** Default maximum number of data items kept in memory for streaming charts. */
+const DEFAULT_MAX_ITEMS = 1000;
+
+/**
+ * Utility functions for stream visualization
+ */
+// Type detection constants
+const NUMBER_TYPES = [
+    'int8', 'int16', 'int32', 'int64', 'int128', 'int256',
+    'uint8', 'uint16', 'uint32', 'uint64', 'uint128', 'uint256',
+    'float32', 'float64', 'float', 'double',
+    'decimal', 'decimal32', 'decimal64', 'decimal128', 'decimal256',
+    'number'
+];
+const DATETIME_TYPES = ['datetime', 'datetime64', 'date', 'date32', 'timestamp'];
+const STRING_TYPES = ['string', 'fixedstring', 'text', 'varchar', 'char'];
+/**
+ * Check if a column type is numeric
+ */
+function isNumericColumn(type) {
+    const upperType = type.toUpperCase();
+    return NUMBER_TYPES.some((t) => upperType.startsWith(t.toUpperCase()));
+}
+/**
+ * Check if a column type is datetime
+ */
+function isDateTimeColumn(type) {
+    const upperType = type.toUpperCase();
+    return DATETIME_TYPES.some((t) => upperType.startsWith(t.toUpperCase()));
+}
+/**
+ * Check if a column type is string
+ */
+function isStringColumn(type) {
+    const upperType = type.toUpperCase();
+    return STRING_TYPES.some((t) => upperType.startsWith(t.toUpperCase()));
+}
+/**
+ * Check if a column type is boolean
+ */
+function isBooleanColumn(type) {
+    const upperType = type.toUpperCase();
+    return upperType === 'BOOL' || upperType === 'BOOLEAN';
+}
+/**
+ * Determine automatic time format mask based on domain range
+ */
+function getTimeMask(domainMin, domainMax) {
+    const date1 = new Date(domainMin);
+    const date2 = new Date(domainMax);
+    const y1 = date1.getFullYear();
+    const m1 = date1.getMonth();
+    const d1 = date1.getDate();
+    const h1 = date1.getHours();
+    const min1 = date1.getMinutes();
+    const s1 = date1.getSeconds();
+    const y2 = date2.getFullYear();
+    const m2 = date2.getMonth();
+    const d2 = date2.getDate();
+    const h2 = date2.getHours();
+    const min2 = date2.getMinutes();
+    const s2 = date2.getSeconds();
+    if (y1 !== y2)
+        return 'YY/MM/DD';
+    if (m1 !== m2)
+        return 'MM/DD';
+    if (d1 !== d2) {
+        return Math.abs(d1 - d2) > 1 ? 'MM/DD' : 'MM/DD HH:mm:ss';
+    }
+    if (h1 !== h2 || min1 !== min2 || s1 !== s2)
+        return 'HH:mm:ss';
+    return 'HH:mm:ss';
+}
+/**
+ * Clamp a number between min and max values
+ */
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Truncate a string with ellipsis if too long
+ */
+function truncateWithEllipsis(str, maxLength) {
+    if (!str || str.length <= maxLength)
+        return str;
+    return `${str.slice(0, maxLength)}...`;
+}
+/**
+ * Format a number with locale formatting
+ */
+function formatNumber(num, digits = 2) {
+    if (isNaN(num))
+        return '-';
+    return num.toLocaleString('en-US', { maximumFractionDigits: digits });
+}
+/**
+ * Format a large number with abbreviation (k, m, b, t)
+ */
+function abbreviateNumber(num, decPlaces = 2) {
+    if (isNaN(num))
+        return '-';
+    const abbrev = ['', 'k', 'm', 'b', 't'];
+    let tier = 0;
+    let scaledNum = num;
+    while (Math.abs(scaledNum) >= 1000 && tier < abbrev.length - 1) {
+        scaledNum /= 1000;
+        tier++;
+    }
+    return `${scaledNum.toFixed(tier > 0 ? decPlaces : 0)}${abbrev[tier]}`;
+}
+/**
+ * Format duration from milliseconds to human readable
+ */
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    if (ms < 3600000)
+        return `${(ms / 60000).toFixed(1)}m`;
+    return `${(ms / 3600000).toFixed(1)}h`;
+}
+/**
+ * Format bytes to human readable size
+ */
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0)
+        return '0 B';
+    if (isNaN(bytes))
+        return '-';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
+}
+/**
+ * Debounce function execution
+ */
+function debounce(func, wait) {
+    let timeout = null;
+    return function (...args) {
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    };
+}
+/**
+ * Get value from a data row by column index or name
+ */
+function getRowValue(row, column) {
+    if (Array.isArray(row)) {
+        return typeof column === 'number' ? row[column] : row[parseInt(column, 10)];
+    }
+    return row[column];
+}
+/**
+ * Convert a row to array format if it's an object
+ */
+function rowToArray(row, columns) {
+    if (Array.isArray(row))
+        return row;
+    return columns.map((col) => row[col.name]);
+}
+/**
+ * Find column index by name
+ */
+function findColumnIndex(columns, name) {
+    return columns.findIndex((col) => col.name === name);
+}
+/**
+ * Get filtered columns by type
+ */
+function getColumnsByType(columns, filter) {
+    switch (filter) {
+        case 'numeric':
+            return columns.filter((col) => isNumericColumn(col.type));
+        case 'datetime':
+            return columns.filter((col) => isDateTimeColumn(col.type));
+        case 'string':
+            return columns.filter((col) => isStringColumn(col.type));
+        case 'boolean':
+            return columns.filter((col) => isBooleanColumn(col.type));
+        default:
+            return columns;
+    }
+}
+/**
+ * Calculate statistics for a numeric column
+ */
+function calculateColumnStats(data, columnIndex) {
+    let min = Infinity;
+    let max = -Infinity;
+    let sum = 0;
+    let count = 0;
+    for (const row of data) {
+        const value = Array.isArray(row) ? row[columnIndex] : Object.values(row)[columnIndex];
+        if (typeof value === 'number' && !isNaN(value)) {
+            min = Math.min(min, value);
+            max = Math.max(max, value);
+            sum += value;
+            count++;
+        }
+    }
+    return {
+        min: min === Infinity ? 0 : min,
+        max: max === -Infinity ? 0 : max,
+        sum,
+        count,
+        avg: count > 0 ? sum / count : 0,
+    };
+}
+/**
+ * Get unique values for a column (for categorical data)
+ */
+function getUniqueValues(data, columnIndex) {
+    const values = new Set();
+    for (const row of data) {
+        const value = Array.isArray(row) ? row[columnIndex] : Object.values(row)[columnIndex];
+        if (value !== null && value !== undefined) {
+            values.add(String(value));
+        }
+    }
+    return Array.from(values);
+}
+/**
+ * Parse datetime value to timestamp
+ */
+function parseDateTime(value) {
+    if (typeof value === 'number')
+        return value;
+    if (value instanceof Date)
+        return value.getTime();
+    if (typeof value === 'string') {
+        const parsed = Date.parse(value);
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    return 0;
+}
+/**
+ * Process data source into internal format for charts
+ */
+function processDataSource(source, xKey, yKey, zKey) {
+    const { columns, data } = source;
+    const xIndex = findColumnIndex(columns, xKey);
+    const yIndex = findColumnIndex(columns, yKey);
+    const zIndex = zKey ? findColumnIndex(columns, zKey) : -1;
+    const isXTime = xIndex >= 0 && isDateTimeColumn(columns[xIndex].type);
+    // Calculate statistics
+    let xMin = Infinity;
+    let xMax = -Infinity;
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    const zValues = [];
+    for (const row of data) {
+        const arr = rowToArray(row, columns);
+        // X stats
+        if (xIndex >= 0) {
+            const xVal = isXTime ? parseDateTime(arr[xIndex]) : Number(arr[xIndex]);
+            if (!isNaN(xVal)) {
+                xMin = Math.min(xMin, xVal);
+                xMax = Math.max(xMax, xVal);
+            }
+        }
+        // Y stats
+        if (yIndex >= 0) {
+            const yVal = Number(arr[yIndex]);
+            if (!isNaN(yVal)) {
+                yMin = Math.min(yMin, yVal);
+                yMax = Math.max(yMax, yVal);
+            }
+        }
+        // Z categories
+        if (zIndex >= 0) {
+            const zVal = String(arr[zIndex] ?? '');
+            if (zVal && !zValues.includes(zVal)) {
+                zValues.push(zVal);
+            }
+        }
+    }
+    // Transform function for x-axis
+    const xTransform = isXTime ? (v) => parseDateTime(v) : (v) => v;
+    return {
+        data: data.map((row) => rowToArray(row, columns)),
+        header: columns,
+        x: {
+            index: xIndex,
+            isTime: isXTime,
+            min: xMin === Infinity ? 0 : xMin,
+            max: xMax === -Infinity ? 0 : xMax,
+            offset: 0,
+        },
+        y: {
+            index: yIndex,
+            min: yMin === Infinity ? 0 : yMin,
+            max: yMax === -Infinity ? 0 : yMax,
+        },
+        z: {
+            index: zIndex,
+            values: zValues,
+        },
+        xTransform,
+    };
+}
+/**
+ * Merge deep objects (like lodash merge)
+ */
+function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (!source)
+        return target;
+    for (const key in source) {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (isObject(sourceValue) && isObject(targetValue)) {
+            target[key] = mergeDeep({ ...targetValue }, sourceValue);
+        }
+        else if (sourceValue !== undefined) {
+            target[key] = sourceValue;
+        }
+    }
+    return mergeDeep(target, ...sources);
+}
+function isObject(item) {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+/**
+ * Generate unique ID
+ */
+function generateId(prefix = 'stream-viz') {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+// ============================================================
+// Temporal Binding Utilities
+// ============================================================
+/**
+ * Filter data by latest timestamp (frame-bound mode)
+ * Keeps only rows with the maximum timestamp value
+ */
+function filterByLatestTimestamp(data, timeIndex) {
+    if (data.length === 0 || timeIndex < 0)
+        return data;
+    // Find the maximum timestamp
+    let maxTimestamp = -Infinity;
+    for (const row of data) {
+        const ts = parseDateTime(row[timeIndex]);
+        if (ts > maxTimestamp) {
+            maxTimestamp = ts;
+        }
+    }
+    // Filter to only rows with the max timestamp
+    return data.filter((row) => parseDateTime(row[timeIndex]) === maxTimestamp);
+}
+/**
+ * Filter data by unique key (key-bound mode)
+ * Keeps only the latest row for each unique key value
+ */
+/**
+ * Filter data by unique key (key-bound mode)
+ * Keeps only the latest row for each unique key value
+ */
+function filterByKey(data, keyIndex) {
+    const indices = Array.isArray(keyIndex) ? keyIndex : [keyIndex];
+    if (data.length === 0 || indices.some(idx => idx < 0))
+        return data;
+    // Use a map to keep the latest value for each key
+    const groups = new Map();
+    for (const row of data) {
+        // specific composite key generation
+        const key = indices.map(idx => String(row[idx] ?? '')).join('::');
+        groups.set(key, row);
+    }
+    return Array.from(groups.values());
+}
+/**
+ * Apply temporal filtering based on configuration
+ */
+function applyTemporalFilter(data, columns, temporal) {
+    // Handle single or multiple fields
+    const fields = Array.isArray(temporal.field) ? temporal.field : [temporal.field];
+    const fieldIndices = fields.map(f => findColumnIndex(columns, f));
+    // If any field is not found, return original data
+    if (fieldIndices.some(idx => idx < 0))
+        return data;
+    const primaryIndex = fieldIndices[0]; // Used for frame/axis checking usually, but frame mode handles single index
+    switch (temporal.mode) {
+        case 'frame':
+            // Frame mode currently assumes single time field
+            return filterByLatestTimestamp(data, primaryIndex);
+        case 'key':
+            // Key mode supports multiple fields
+            return filterByKey(data, Array.isArray(temporal.field) ? fieldIndices : primaryIndex);
+        case 'axis':
+            // Axis mode filtering is handled by the chart component itself
+            // (e.g., through domain clamping in TimeSeriesChart)
+            return data;
+        default:
+            return data;
+    }
+}
+
+/**
+ * React hooks for stream visualization
+ */
+/**
+ * Hook to manage AntV G2 chart instance
+ */
+function useChart(options) {
+    const chartRef = require$$0.useRef(null);
+    const [chart, setChart] = require$$0.useState(null);
+    const [isMouseOver, setIsMouseOver] = require$$0.useState(false);
+    const [activeColor, setActiveColor] = require$$0.useState(-1);
+    require$$0.useEffect(() => {
+        if (!chartRef.current)
+            return;
+        const chartInstance = new g2.Chart({
+            container: chartRef.current,
+            autoFit: true,
+            height: options?.height,
+            padding: options?.padding,
+            marginBottom: 0,
+        });
+        // Set up mouse tracking
+        const container = chartInstance.getContainer();
+        const handleMouseOver = () => setIsMouseOver(true);
+        const handleMouseLeave = () => setIsMouseOver(false);
+        container.addEventListener('mouseover', handleMouseOver);
+        container.addEventListener('mouseleave', handleMouseLeave);
+        // Initialize with empty data
+        chartInstance.data([]);
+        setChart(chartInstance);
+        return () => {
+            container.removeEventListener('mouseover', handleMouseOver);
+            container.removeEventListener('mouseleave', handleMouseLeave);
+            chartInstance.destroy();
+            setChart(null);
+        };
+    }, [options?.height, options?.padding]);
+    return {
+        chart,
+        chartRef,
+        isMouseOver,
+        activeColor,
+        setActiveColor,
+    };
+}
+/**
+ * Hook to process streaming data source
+ */
+function useDataSource(source, xKey, yKey, zKey) {
+    const [processedData, setProcessedData] = require$$0.useState(null);
+    require$$0.useEffect(() => {
+        if (!source || !yKey) {
+            setProcessedData(null);
+            return;
+        }
+        const processed = processDataSource(source, xKey, yKey, zKey);
+        setProcessedData(processed);
+    }, [source, xKey, yKey, zKey]);
+    return processedData;
+}
+/**
+ * Hook to track streaming data updates
+ */
+function useStreamingData(initialData, maxItems = DEFAULT_MAX_ITEMS) {
+    const [data, setData] = require$$0.useState(initialData);
+    const append = require$$0.useCallback((items) => {
+        setData((prev) => {
+            const newItems = Array.isArray(items) ? items : [items];
+            const combined = [...prev, ...newItems];
+            // Keep only the last maxItems
+            return combined.slice(-maxItems);
+        });
+    }, [maxItems]);
+    const replace = require$$0.useCallback((items) => {
+        setData(items.slice(-maxItems));
+    }, [maxItems]);
+    const clear = require$$0.useCallback(() => {
+        setData([]);
+    }, []);
+    return { data, append, replace, clear };
+}
+/**
+ * Hook to handle resize detection
+ */
+function useResizeObserver(callback) {
+    const ref = require$$0.useRef(null);
+    require$$0.useEffect(() => {
+        if (!ref.current)
+            return;
+        let timeout = null;
+        const debouncedCallback = (entry) => {
+            if (timeout)
+                clearTimeout(timeout);
+            timeout = setTimeout(() => callback(entry), 200);
+        };
+        const observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => debouncedCallback(entry));
+        });
+        observer.observe(ref.current);
+        return () => {
+            if (timeout)
+                clearTimeout(timeout);
+            observer.disconnect();
+        };
+    }, [callback]);
+    return ref;
+}
+/**
+ * Hook to manage chart theme
+ */
+function useChartTheme(theme = 'dark') {
+    const [currentTheme, setCurrentTheme] = require$$0.useState(theme);
+    const toggleTheme = require$$0.useCallback(() => {
+        setCurrentTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    }, []);
+    return {
+        theme: currentTheme,
+        setTheme: setCurrentTheme,
+        toggleTheme,
+        isDark: currentTheme === 'dark',
+    };
+}
+/**
+ * Hook to track last update time
+ */
+function useLastUpdated(data) {
+    const [lastUpdated, setLastUpdated] = require$$0.useState(null);
+    require$$0.useEffect(() => {
+        if (data.length > 0) {
+            setLastUpdated(new Date());
+        }
+    }, [data]);
+    return lastUpdated;
+}
+/**
+ * Hook for sparkline data management
+ */
+function useSparklineData(value, limit = 20) {
+    const [data, setData] = require$$0.useState([]);
+    require$$0.useEffect(() => {
+        if (value === null || isNaN(value))
+            return;
+        setData((prev) => {
+            const next = [...prev, { value }];
+            return next.slice(-limit);
+        });
+    }, [value, limit]);
+    const trend = data.length >= 2
+        ? data[data.length - 1].value > data[data.length - 2].value
+            ? 'up'
+            : data[data.length - 1].value < data[data.length - 2].value
+                ? 'down'
+                : 'stable'
+        : 'stable';
+    return { data, trend };
+}
+/**
+ * Hook to manage chart animation state
+ */
+function useChartAnimation(enabled = true) {
+    const [isAnimating, setIsAnimating] = require$$0.useState(false);
+    const startAnimation = require$$0.useCallback(() => {
+        if (enabled)
+            setIsAnimating(true);
+    }, [enabled]);
+    const stopAnimation = require$$0.useCallback(() => {
+        setIsAnimating(false);
+    }, []);
+    return {
+        isAnimating,
+        startAnimation,
+        stopAnimation,
+        animationEnabled: enabled,
+    };
+}
+/**
+ * Hook to debounce a value
+ */
+function useDebouncedValue(value, delay = 300) {
+    const [debouncedValue, setDebouncedValue] = require$$0.useState(value);
+    require$$0.useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
+/**
+ * Hook to track previous value
+ */
+function usePrevious(value) {
+    const ref = require$$0.useRef();
+    require$$0.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+/**
+ * Hook to determine default chart configuration based on data schema
+ */
+function useAutoConfig(columns) {
+    return require$$0.useCallback(() => {
+        const dateCol = columns.find((c) => ['datetime', 'datetime64', 'date', 'timestamp'].some((t) => c.type.toLowerCase().includes(t)));
+        const numericCols = columns.filter((c) => ['int', 'float', 'double', 'decimal', 'number'].some((t) => c.type.toLowerCase().includes(t)));
+        const stringCols = columns.filter((c) => ['string', 'varchar', 'text', 'char'].some((t) => c.type.toLowerCase().includes(t)));
+        return {
+            suggestedXAxis: dateCol?.name || stringCols[0]?.name || columns[0]?.name,
+            suggestedYAxis: numericCols[0]?.name || columns[1]?.name,
+            suggestedColor: stringCols[0]?.name,
+            hasTimeSeries: !!dateCol && numericCols.length > 0,
+            hasCategorical: stringCols.length > 0 && numericCols.length > 0,
+        };
+    }, [columns]);
+}
+
+/**
+ * Find color palette by name
+ */
+function findColorByName(name) {
+    return singleColorPalettes.find((c) => c.label === name);
+}
+/**
+ * Get default configuration for single value chart
+ */
+function getSingleValueDefaults(columns) {
+    const numericCol = columns.find(({ type }) => ['int', 'float', 'double', 'decimal', 'number'].some((t) => type.toLowerCase().includes(t)));
+    if (!numericCol)
+        return null;
+    return {
+        chartType: 'singleValue',
+        yAxis: numericCol.name,
+        fontSize: 64,
+        color: 'blue',
+        fractionDigits: 2,
+        sparkline: false,
+        sparklineColor: 'purple',
+        delta: false,
+        increaseColor: 'green',
+        decreaseColor: 'red',
+        unit: { position: 'left', value: '' },
+    };
+}
+/**
+ * Animated number display component
+ */
+const AnimatedNumber = ({ value, decimals, duration = 500 }) => {
+    const [displayValue, setDisplayValue] = require$$0.useState(value);
+    const previousValue = require$$0.useRef(value);
+    require$$0.useEffect(() => {
+        if (isNaN(value))
+            return;
+        const startValue = previousValue.current;
+        const startTime = Date.now();
+        const animate = () => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            // Easing function (ease-out)
+            const easeOut = 1 - Math.pow(1 - progress, 3);
+            const current = startValue + (value - startValue) * easeOut;
+            setDisplayValue(current);
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            }
+            else {
+                previousValue.current = value;
+            }
+        };
+        requestAnimationFrame(animate);
+    }, [value, duration]);
+    return (jsxRuntimeExports.jsx("span", { children: isNaN(displayValue) ? '-' : displayValue.toLocaleString('en-US', {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        }) }));
+};
+/**
+ * Mini Sparkline Component
+ */
+const MiniSparkline = ({ data, color, width = 200, height = 60 }) => {
+    const { chart, chartRef } = useChart({ height });
+    require$$0.useEffect(() => {
+        if (!chart || data.length === 0)
+            return;
+        chart.clear();
+        const indexedData = data.map((d, i) => ({ index: i, value: d.value }));
+        chart
+            .line()
+            .data(indexedData)
+            .animate(false)
+            .encode('x', 'index')
+            .encode('y', 'value')
+            .style('stroke', color)
+            .style('lineWidth', 2)
+            .style('shape', 'smooth')
+            .scale({
+            x: { type: 'linear', range: [0, 1] },
+            y: { type: 'linear', nice: true },
+        })
+            .axis(false)
+            .tooltip(false);
+        chart.render();
+    }, [chart, data, color]);
+    return (jsxRuntimeExports.jsx("div", { ref: chartRef, style: { width: `${width}px`, height: `${height}px` } }));
+};
+/**
+ * Single Value Chart Component
+ */
+const SingleValueChart = ({ config: configRaw, data: dataSource, theme = 'dark', className, style, }) => {
+    // Merge with defaults
+    const defaults = getSingleValueDefaults(dataSource.columns);
+    const config = require$$0.useMemo(() => ({
+        ...defaults,
+        ...configRaw,
+    }), [configRaw, defaults]);
+    // Get colors
+    const mainColor = findColorByName(config.color || 'blue')?.keyColorValue || '#3B82F6';
+    const sparklineColor = findColorByName(config.sparklineColor || 'purple')?.keyColorValue || '#8B5CF6';
+    const increaseColor = findColorByName(config.increaseColor || 'green')?.keyColorValue || '#22C55E';
+    const decreaseColor = findColorByName(config.decreaseColor || 'red')?.keyColorValue || '#EF4444';
+    // Process data source
+    const source = useDataSource(dataSource, '', config.yAxis, '');
+    // Get current value
+    const currentValue = require$$0.useMemo(() => {
+        if (!source || source.y.index < 0 || source.data.length === 0)
+            return NaN;
+        const lastRow = source.data[source.data.length - 1];
+        return Number(lastRow[source.y.index]);
+    }, [source]);
+    // Track sparkline data and previous value for delta
+    const { data: sparklineData } = useSparklineData(currentValue, 20);
+    const [previousValue, setPreviousValue] = require$$0.useState(NaN);
+    require$$0.useEffect(() => {
+        if (!isNaN(currentValue)) {
+            const timer = setTimeout(() => {
+                setPreviousValue(currentValue);
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [currentValue]);
+    // Calculate delta and keep last non-zero value
+    const [displayedDelta, setDisplayedDelta] = require$$0.useState(0);
+    require$$0.useEffect(() => {
+        if (isNaN(currentValue) || isNaN(previousValue))
+            return;
+        const newDelta = currentValue - previousValue;
+        // Only update displayed delta if it's non-zero
+        if (newDelta !== 0) {
+            setDisplayedDelta(newDelta);
+        }
+    }, [currentValue, previousValue]);
+    // Decimal places
+    const decimals = clamp(config.fractionDigits || 0, 0, 10);
+    const fontSize = config.fontSize || 64;
+    // Loading state
+    if (isNaN(currentValue)) {
+        return (jsxRuntimeExports.jsxs("div", { className: className, style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme === 'dark' ? '#9CA3AF' : '#6B7280',
+                ...style,
+            }, "data-testid": "single-value-chart", children: [jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'spin 1s linear infinite' }, children: [jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }), jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })] }), jsxRuntimeExports.jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })] }));
+    }
+    // Unit rendering
+    const renderUnit = (position) => {
+        const unit = config.unit;
+        if (!unit?.value || unit.position !== position)
+            return null;
+        return (jsxRuntimeExports.jsx("span", { style: {
+                fontSize: position === 'left' ? fontSize : fontSize / 2,
+                fontWeight: 'bold',
+                fontFamily: 'Menlo, Monaco, monospace',
+                color: mainColor,
+                paddingRight: position === 'left' ? '4px' : 0,
+                paddingLeft: position === 'right' ? '4px' : 0,
+            }, children: unit.value }));
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: className, style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px',
+            ...style,
+        }, "data-testid": "single-value-chart", children: [jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'baseline' }, children: [renderUnit('left'), jsxRuntimeExports.jsx("span", { style: {
+                            fontSize: `${fontSize}px`,
+                            fontWeight: 'bold',
+                            fontFamily: 'Menlo, Monaco, monospace',
+                            color: mainColor,
+                        }, children: jsxRuntimeExports.jsx(AnimatedNumber, { value: currentValue, decimals: decimals }) }), renderUnit('right')] }), config.delta && (jsxRuntimeExports.jsxs("div", { style: {
+                    fontSize: `${Math.ceil(fontSize / 3)}px`,
+                    fontWeight: 'bold',
+                    fontFamily: 'Menlo, Monaco, monospace',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '4px',
+                    color: displayedDelta > 0 ? increaseColor : displayedDelta < 0 ? decreaseColor : theme === 'dark' ? '#6B7280' : '#9CA3AF',
+                    marginTop: '8px',
+                    minHeight: `${Math.ceil(fontSize / 3) + 4}px`,
+                }, children: [jsxRuntimeExports.jsx("span", { style: {
+                            width: 0,
+                            height: 0,
+                            borderStyle: 'solid',
+                            borderWidth: displayedDelta >= 0 ? '0 4px 8px 4px' : '8px 4px 0 4px',
+                            borderColor: displayedDelta >= 0
+                                ? `transparent transparent ${displayedDelta > 0 ? increaseColor : (theme === 'dark' ? '#6B7280' : '#9CA3AF')} transparent`
+                                : `${decreaseColor} transparent transparent transparent`,
+                        } }), jsxRuntimeExports.jsxs("span", { children: [displayedDelta >= 0 ? '+' : '', displayedDelta.toLocaleString('en-US', {
+                                minimumFractionDigits: decimals,
+                                maximumFractionDigits: decimals,
+                            })] })] })), config.sparkline && sparklineData.length > 1 && (jsxRuntimeExports.jsx("div", { style: { marginTop: '16px', width: '80%', maxWidth: '300px' }, children: jsxRuntimeExports.jsx(MiniSparkline, { data: sparklineData, color: sparklineColor, height: 60 }) }))] }));
+};
+
+/**
+ * Get default table configuration
+ */
+function getTableDefaults(columns) {
+    const tableStyles = {};
+    columns.forEach((col) => {
+        tableStyles[col.name] = {
+            name: col.name,
+            show: true,
+            width: 150,
+            miniChart: 'none',
+            color: { type: 'none' },
+        };
+    });
+    return {
+        chartType: 'table',
+        tableStyles,
+        tableWrap: false,
+    };
+}
+/**
+ * Mini Sparkline for table cells
+ */
+const CellSparkline = ({ data, width = 80, height = 30, }) => {
+    const { chart, chartRef } = useChart({ height });
+    require$$0.useEffect(() => {
+        if (!chart || data.length === 0)
+            return;
+        chart.clear();
+        const indexedData = data.map((d, i) => ({ index: i, value: d }));
+        chart
+            .line()
+            .data(indexedData)
+            .animate(false)
+            .encode('x', 'index')
+            .encode('y', 'value')
+            .style('stroke', '#8B5CF6')
+            .style('lineWidth', 1)
+            .style('shape', 'smooth')
+            .scale({
+            x: { type: 'linear', range: [0, 1] },
+            y: { type: 'linear', nice: true },
+        })
+            .axis(false)
+            .tooltip(false);
+        chart.render();
+    }, [chart, data]);
+    return jsxRuntimeExports.jsx("div", { ref: chartRef, style: { width, height } });
+};
+/**
+ * Get cell background color based on conditions
+ */
+function getCellBackgroundColor(value, colorConfig) {
+    if (!colorConfig || colorConfig.type === 'none')
+        return undefined;
+    if (colorConfig.type === 'condition' && colorConfig.conditions) {
+        const numValue = Number(value);
+        if (isNaN(numValue))
+            return undefined;
+        for (const condition of colorConfig.conditions) {
+            let matches = false;
+            switch (condition.operator) {
+                case 'gt':
+                    matches = numValue > condition.value;
+                    break;
+                case 'lt':
+                    matches = numValue < condition.value;
+                    break;
+                case 'eq':
+                    matches = numValue === condition.value;
+                    break;
+                case 'gte':
+                    matches = numValue >= condition.value;
+                    break;
+                case 'lte':
+                    matches = numValue <= condition.value;
+                    break;
+            }
+            if (matches)
+                return condition.color;
+        }
+    }
+    return undefined;
+}
+/**
+ * Table Cell Component
+ */
+const TableCell = ({ value, isNumeric, miniChart, sparklineData = [], color, wrap, theme }) => {
+    const bgColor = getCellBackgroundColor(value, color);
+    const displayValue = isNumeric ? formatNumber(Number(value)) : String(value ?? '');
+    return (jsxRuntimeExports.jsx("td", { style: {
+            padding: '8px 12px',
+            borderBottom: `1px solid ${theme === 'dark' ? '#374151' : '#E5E7EB'}`,
+            textAlign: isNumeric ? 'right' : 'left',
+            backgroundColor: bgColor,
+            whiteSpace: wrap ? 'normal' : 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: '200px',
+        }, title: String(value ?? ''), children: jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [miniChart === 'sparkline' && sparklineData.length > 0 && (jsxRuntimeExports.jsx(CellSparkline, { data: sparklineData })), jsxRuntimeExports.jsx("span", { children: displayValue })] }) }));
+};
+/**
+ * Table Header Cell Component
+ */
+const TableHeaderCell = ({ column, displayName, width, onResize, theme }) => {
+    const resizeRef = require$$0.useRef(null);
+    const [isResizing, setIsResizing] = require$$0.useState(false);
+    const handleMouseDown = require$$0.useCallback((e) => {
+        e.preventDefault();
+        setIsResizing(true);
+        const startX = e.clientX;
+        const startWidth = width;
+        const handleMouseMove = (moveEvent) => {
+            const diff = moveEvent.clientX - startX;
+            const newWidth = Math.max(50, startWidth + diff);
+            onResize(newWidth);
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [width, onResize]);
+    return (jsxRuntimeExports.jsxs("th", { style: {
+            position: 'relative',
+            padding: '12px',
+            borderBottom: `2px solid ${theme === 'dark' ? '#374151' : '#E5E7EB'}`,
+            backgroundColor: theme === 'dark' ? '#1F2937' : '#F3F4F6',
+            textAlign: 'left',
+            fontWeight: 600,
+            width: `${width}px`,
+            minWidth: `${width}px`,
+            userSelect: 'none',
+        }, children: [jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [jsxRuntimeExports.jsx("span", { style: {
+                            fontSize: '10px',
+                            padding: '2px 4px',
+                            borderRadius: '4px',
+                            backgroundColor: theme === 'dark' ? '#374151' : '#E5E7EB',
+                            color: theme === 'dark' ? '#9CA3AF' : '#6B7280',
+                        }, children: column.type }), jsxRuntimeExports.jsx("span", { children: displayName || column.name })] }), jsxRuntimeExports.jsx("div", { ref: resizeRef, onMouseDown: handleMouseDown, style: {
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: '8px',
+                    cursor: 'col-resize',
+                    backgroundColor: isResizing ? (theme === 'dark' ? '#3B82F6' : '#2563EB') : 'transparent',
+                    transition: 'background-color 0.2s',
+                }, onMouseEnter: (e) => {
+                    if (!isResizing) {
+                        e.currentTarget.style.backgroundColor = theme === 'dark' ? '#4B5563' : '#D1D5DB';
+                    }
+                }, onMouseLeave: (e) => {
+                    if (!isResizing) {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                    }
+                } })] }));
+};
+/**
+ * Streaming Data Table Component
+ */
+const DataTable = ({ config: configRaw, data: dataSource, theme = 'dark', className, style, onConfigChange, maxRows = DEFAULT_MAX_ITEMS, }) => {
+    // Merge with defaults
+    const defaults = getTableDefaults(dataSource.columns);
+    const config = require$$0.useMemo(() => ({
+        ...defaults,
+        ...configRaw,
+    }), [configRaw, defaults]);
+    // Column widths state
+    const [columnWidths, setColumnWidths] = require$$0.useState(() => {
+        const widths = {};
+        dataSource.columns.forEach((col) => {
+            widths[col.name] = config.tableStyles?.[col.name]?.width || 150;
+        });
+        return widths;
+    });
+    // Track sparkline data per row/column using ref to avoid infinite loops
+    const sparklineHistoryRef = require$$0.useRef({});
+    // Version counter to trigger re-renders when sparkline data changes
+    const [, setSparklineVersion] = require$$0.useState(0);
+    // Process data for display
+    const displayData = require$$0.useMemo(() => {
+        const { columns, data } = dataSource;
+        const { temporal } = config;
+        let processedData = data.map((row) => rowToArray(row, columns));
+        // Apply temporal filtering if configured
+        if (temporal) {
+            processedData = applyTemporalFilter(processedData, columns, temporal);
+        }
+        // Limit rows
+        return processedData.slice(-maxRows);
+    }, [dataSource, config, maxRows]);
+    // Update sparkline history - use ref to avoid infinite loop
+    const prevDataLengthRef = require$$0.useRef(0);
+    require$$0.useEffect(() => {
+        if (!config.tableStyles)
+            return;
+        const sparklineCols = Object.entries(config.tableStyles)
+            .filter(([_, style]) => style?.miniChart === 'sparkline')
+            .map(([name]) => name);
+        // Only update if we have sparkline columns and data changed
+        if (sparklineCols.length === 0)
+            return;
+        if (displayData.length === prevDataLengthRef.current && displayData.length > 0)
+            return;
+        prevDataLengthRef.current = displayData.length;
+        let hasChanges = false;
+        displayData.forEach((row, rowIndex) => {
+            sparklineCols.forEach((colName) => {
+                const colIndex = dataSource.columns.findIndex((c) => c.name === colName);
+                if (colIndex >= 0) {
+                    const key = `${rowIndex}-${colName}`;
+                    const value = Number(row[colIndex]);
+                    if (!isNaN(value)) {
+                        const existing = sparklineHistoryRef.current[key] || [];
+                        const lastValue = existing[existing.length - 1];
+                        if (lastValue !== value || existing.length === 0) {
+                            sparklineHistoryRef.current[key] = [...existing, value].slice(-20);
+                            hasChanges = true;
+                        }
+                    }
+                }
+            });
+        });
+        // Only trigger re-render if there were actual changes
+        if (hasChanges) {
+            setSparklineVersion((v) => v + 1);
+        }
+    }, [displayData, config.tableStyles, dataSource.columns]);
+    // Handle column resize
+    const handleColumnResize = require$$0.useCallback((columnName, width) => {
+        setColumnWidths((prev) => ({ ...prev, [columnName]: width }));
+        if (onConfigChange) {
+            const newConfig = {
+                ...config,
+                tableStyles: {
+                    ...config.tableStyles,
+                    [columnName]: {
+                        ...config.tableStyles?.[columnName],
+                        width,
+                    },
+                },
+            };
+            onConfigChange(newConfig);
+        }
+    }, [config, onConfigChange]);
+    // Visible columns
+    const visibleColumns = require$$0.useMemo(() => dataSource.columns.filter((col) => {
+        const style = config.tableStyles?.[col.name];
+        return style?.show !== false;
+    }), [dataSource.columns, config.tableStyles]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, style: {
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+            backgroundColor: theme === 'dark' ? '#111827' : '#FFFFFF',
+            color: theme === 'dark' ? '#F3F4F6' : '#1F2937',
+            ...style,
+        }, "data-testid": "data-table", children: [jsxRuntimeExports.jsxs("table", { style: {
+                    width: '100%',
+                    borderCollapse: 'collapse',
+                    fontSize: '14px',
+                }, children: [jsxRuntimeExports.jsx("thead", { style: { position: 'sticky', top: 0, zIndex: 10 }, children: jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { style: {
+                                        padding: '12px 8px',
+                                        borderBottom: `2px solid ${theme === 'dark' ? '#374151' : '#E5E7EB'}`,
+                                        backgroundColor: theme === 'dark' ? '#1F2937' : '#F3F4F6',
+                                        textAlign: 'center',
+                                        fontWeight: 600,
+                                        width: '40px',
+                                        minWidth: '40px',
+                                        color: theme === 'dark' ? '#9CA3AF' : '#6B7280',
+                                    }, children: "No." }), visibleColumns.map((col) => (jsxRuntimeExports.jsx(TableHeaderCell, { column: col, displayName: config.tableStyles?.[col.name]?.name, width: columnWidths[col.name] || 150, onResize: (width) => handleColumnResize(col.name, width), theme: theme }, col.name)))] }) }), jsxRuntimeExports.jsx("tbody", { children: displayData.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { style: {
+                                backgroundColor: rowIndex % 2 === 0
+                                    ? 'transparent'
+                                    : theme === 'dark'
+                                        ? 'rgba(55, 65, 81, 0.3)'
+                                        : 'rgba(243, 244, 246, 0.5)',
+                            }, children: [jsxRuntimeExports.jsx("td", { style: {
+                                        padding: '8px',
+                                        borderBottom: `1px solid ${theme === 'dark' ? '#374151' : '#E5E7EB'}`,
+                                        textAlign: 'center',
+                                        color: theme === 'dark' ? '#6B7280' : '#9CA3AF',
+                                        fontWeight: 500,
+                                    }, children: rowIndex + 1 }), visibleColumns.map((col) => {
+                                    const colIndex = dataSource.columns.findIndex((c) => c.name === col.name);
+                                    const value = row[colIndex];
+                                    const colStyle = config.tableStyles?.[col.name];
+                                    const sparklineKey = `${rowIndex}-${col.name}`;
+                                    return (jsxRuntimeExports.jsx(TableCell, { value: value, isNumeric: isNumericColumn(col.type), miniChart: colStyle?.miniChart, sparklineData: sparklineHistoryRef.current[sparklineKey], color: colStyle?.color, wrap: config.tableWrap, theme: theme }, col.name));
+                                })] }, rowIndex))) })] }), displayData.length === 0 && (jsxRuntimeExports.jsx("div", { style: {
+                    padding: '48px',
+                    textAlign: 'center',
+                    color: theme === 'dark' ? '#6B7280' : '#9CA3AF',
+                }, children: "No data available" }))] }));
+};
+
+// Tile providers
+const TILE_PROVIDERS = {
+    'openstreetmap': 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+    'cartodb-dark': 'https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+    'cartodb-light': 'https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+};
+// Tile cache to avoid re-fetching
+const tileCache = new Map();
+/**
+ * Load a map tile image
+ */
+function loadTile(url) {
+    if (tileCache.has(url)) {
+        return Promise.resolve(tileCache.get(url));
+    }
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            tileCache.set(url, img);
+            resolve(img);
+        };
+        img.onerror = reject;
+        img.src = url;
+    });
+}
+/**
+ * Get tile URL for a given tile coordinate
+ */
+function getTileUrl(provider, x, y, z) {
+    const template = TILE_PROVIDERS[provider] || TILE_PROVIDERS['cartodb-dark'];
+    return template
+        .replace('{x}', String(x))
+        .replace('{y}', String(y))
+        .replace('{z}', String(z))
+        .replace('{s}', ['a', 'b', 'c'][Math.floor(Math.random() * 3)]);
+}
+/**
+ * Get default configuration for geo chart
+ */
+function getGeoChartDefaults(columns) {
+    // Look for lat/lng columns
+    const latNames = ['lat', 'latitude', 'y'];
+    const lngNames = ['lng', 'lon', 'longitude', 'x'];
+    const latCol = columns.find(({ name }) => latNames.some((n) => name.toLowerCase().includes(n)));
+    const lngCol = columns.find(({ name }) => lngNames.some((n) => name.toLowerCase().includes(n)));
+    if (!latCol || !lngCol)
+        return null;
+    return {
+        chartType: 'geo',
+        latitude: latCol.name,
+        longitude: lngCol.name,
+        zoom: 2,
+        tileProvider: 'cartodb-dark',
+        showZoomControl: true,
+        pointOpacity: 0.8,
+        pointColor: '#3B82F6',
+    };
+}
+/**
+ * Convert lat/lng to tile coordinates
+ */
+function latLngToTile(lat, lng, zoom) {
+    const n = Math.pow(2, zoom);
+    const x = ((lng + 180) / 360) * n;
+    const latRad = (lat * Math.PI) / 180;
+    const y = ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n;
+    return { x, y };
+}
+/**
+ * Convert tile coordinates to pixel position
+ */
+function tileToPixel(tileX, tileY, centerTileX, centerTileY, width, height, tileSize = 256) {
+    const pixelX = (tileX - centerTileX) * tileSize + width / 2;
+    const pixelY = (tileY - centerTileY) * tileSize + height / 2;
+    return { x: pixelX, y: pixelY };
+}
+/**
+ * Convert lat/lng to pixel position
+ */
+function latLngToPixel(lat, lng, center, zoom, width, height) {
+    const tile = latLngToTile(lat, lng, zoom);
+    const centerTile = latLngToTile(center[0], center[1], zoom);
+    return tileToPixel(tile.x, tile.y, centerTile.x, centerTile.y, width, height);
+}
+/**
+ * Get color for a category value
+ */
+function getCategoryColor(value, categories, colors) {
+    const index = categories.indexOf(value);
+    return colors[index % colors.length];
+}
+/**
+ * GeoChart Component
+ */
+const GeoChart = ({ config: configRaw, data: dataSource, theme = 'dark', className, style, maxItems, }) => {
+    const canvasRef = require$$0.useRef(null);
+    const containerRef = require$$0.useRef(null);
+    const [dimensions, setDimensions] = require$$0.useState({ width: 0, height: 0 });
+    const [zoom, setZoom] = require$$0.useState(configRaw.zoom || 2);
+    const [center, setCenter] = require$$0.useState(configRaw.center || [0, 0]);
+    const [isDragging, setIsDragging] = require$$0.useState(false);
+    const dragStart = require$$0.useRef(null);
+    // Merge with defaults
+    const defaults = getGeoChartDefaults(dataSource.columns);
+    const config = require$$0.useMemo(() => ({
+        ...defaults,
+        ...configRaw,
+    }), [configRaw, defaults]);
+    // Get column indices
+    const latIndex = findColumnIndex(dataSource.columns, config.latitude);
+    const lngIndex = findColumnIndex(dataSource.columns, config.longitude);
+    const colorIndex = config.color ? findColumnIndex(dataSource.columns, config.color) : -1;
+    const sizeIndex = config.size?.key ? findColumnIndex(dataSource.columns, config.size.key) : -1;
+    // Process data points
+    const points = require$$0.useMemo(() => {
+        if (latIndex < 0 || lngIndex < 0)
+            return [];
+        const { columns, data } = dataSource;
+        const { temporal } = config;
+        // Convert data to array format and apply temporal filtering
+        let processedData = data.map((row) => rowToArray(row, columns));
+        // Apply temporal filtering if configured
+        if (temporal) {
+            processedData = applyTemporalFilter(processedData, columns, temporal);
+        }
+        // Limit data to maxItems
+        const effectiveMaxItems = maxItems ?? config.maxItems ?? DEFAULT_MAX_ITEMS;
+        processedData = processedData.slice(-effectiveMaxItems);
+        const result = [];
+        // Get unique color values for categorical coloring
+        const colorValues = [];
+        if (colorIndex >= 0) {
+            processedData.forEach((arr) => {
+                const val = String(arr[colorIndex] ?? '');
+                if (!colorValues.includes(val)) {
+                    colorValues.push(val);
+                }
+            });
+        }
+        // Get color palette
+        const palette = multiColorPalettes[0]?.values || ['#3B82F6'];
+        // Calculate size range if needed
+        let sizeMin = Infinity;
+        let sizeMax = -Infinity;
+        if (sizeIndex >= 0) {
+            processedData.forEach((arr) => {
+                const val = Number(arr[sizeIndex]);
+                if (!isNaN(val)) {
+                    sizeMin = Math.min(sizeMin, val);
+                    sizeMax = Math.max(sizeMax, val);
+                }
+            });
+        }
+        processedData.forEach((arr) => {
+            const lat = Number(arr[latIndex]);
+            const lng = Number(arr[lngIndex]);
+            if (isNaN(lat) || isNaN(lng))
+                return;
+            let color = config.pointColor || '#3B82F6';
+            if (colorIndex >= 0) {
+                const colorVal = String(arr[colorIndex] ?? '');
+                color = getCategoryColor(colorVal, colorValues, palette);
+            }
+            let size = 6;
+            if (sizeIndex >= 0) {
+                const sizeVal = Number(arr[sizeIndex]);
+                if (!isNaN(sizeVal) && sizeMax > sizeMin) {
+                    const normalized = (sizeVal - sizeMin) / (sizeMax - sizeMin);
+                    const minSize = config.size?.min || 4;
+                    const maxSize = config.size?.max || 20;
+                    size = minSize + normalized * (maxSize - minSize);
+                }
+            }
+            result.push({ lat, lng, color, size, row: arr });
+        });
+        return result;
+    }, [dataSource, latIndex, lngIndex, colorIndex, sizeIndex, config]);
+    // Set initial center from first point if not specified
+    require$$0.useEffect(() => {
+        if (!configRaw.center && points.length > 0 && center[0] === 0 && center[1] === 0) {
+            setCenter([points[0].lat, points[0].lng]);
+        }
+    }, [points, configRaw.center, center]);
+    // Handle resize
+    require$$0.useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                setDimensions({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            }
+        });
+        resizeObserver.observe(container);
+        return () => resizeObserver.disconnect();
+    }, []);
+    // Draw the map and points
+    require$$0.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || dimensions.width === 0 || dimensions.height === 0)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const { width, height } = dimensions;
+        canvas.width = width;
+        canvas.height = height;
+        // Clear canvas with background color
+        ctx.fillStyle = theme === 'dark' ? '#1a1a2e' : '#F3F4F6';
+        ctx.fillRect(0, 0, width, height);
+        const tileSize = 256;
+        const zoomInt = Math.floor(zoom);
+        const scale = Math.pow(2, zoom - zoomInt);
+        // Calculate center tile
+        const centerTile = latLngToTile(center[0], center[1], zoomInt);
+        // Calculate how many tiles we need to cover the viewport
+        const tilesX = Math.ceil(width / (tileSize * scale)) + 2;
+        const tilesY = Math.ceil(height / (tileSize * scale)) + 2;
+        // Calculate the top-left tile
+        const startTileX = Math.floor(centerTile.x - tilesX / 2);
+        const startTileY = Math.floor(centerTile.y - tilesY / 2);
+        // Get tile provider
+        const provider = config.tileProvider || (theme === 'dark' ? 'cartodb-dark' : 'cartodb-light');
+        // Load and draw tiles
+        const tilePromises = [];
+        const maxTile = Math.pow(2, zoomInt);
+        for (let dx = 0; dx < tilesX; dx++) {
+            for (let dy = 0; dy < tilesY; dy++) {
+                let tileX = startTileX + dx;
+                let tileY = startTileY + dy;
+                // Wrap X coordinate
+                while (tileX < 0)
+                    tileX += maxTile;
+                while (tileX >= maxTile)
+                    tileX -= maxTile;
+                // Skip invalid Y tiles
+                if (tileY < 0 || tileY >= maxTile)
+                    continue;
+                const url = getTileUrl(provider, tileX, tileY, zoomInt);
+                // Calculate pixel position for this tile
+                const pixelX = (startTileX + dx - centerTile.x) * tileSize * scale + width / 2;
+                const pixelY = (startTileY + dy - centerTile.y) * tileSize * scale + height / 2;
+                const promise = loadTile(url)
+                    .then((img) => {
+                    ctx.drawImage(img, pixelX, pixelY, tileSize * scale, tileSize * scale);
+                })
+                    .catch(() => {
+                    // Draw placeholder for failed tiles
+                    ctx.fillStyle = theme === 'dark' ? '#2d2d44' : '#E5E7EB';
+                    ctx.fillRect(pixelX, pixelY, tileSize * scale, tileSize * scale);
+                });
+                tilePromises.push(promise);
+            }
+        }
+        // After all tiles are loaded, draw points on top
+        Promise.all(tilePromises).then(() => {
+            // Draw points
+            const opacity = config.pointOpacity || 0.8;
+            points.forEach((point) => {
+                const pos = latLngToPixel(point.lat, point.lng, center, zoom, width, height);
+                // Skip points outside viewport
+                if (pos.x < -50 || pos.x > width + 50 || pos.y < -50 || pos.y > height + 50) {
+                    return;
+                }
+                const pointSize = point.size ?? 6;
+                const pointColor = point.color ?? '#3B82F6';
+                ctx.beginPath();
+                ctx.arc(pos.x, pos.y, pointSize, 0, Math.PI * 2);
+                // Parse color and add opacity
+                const hexColor = pointColor.startsWith('#') ? pointColor : '#3B82F6';
+                const r = parseInt(hexColor.slice(1, 3), 16);
+                const g = parseInt(hexColor.slice(3, 5), 16);
+                const b = parseInt(hexColor.slice(5, 7), 16);
+                ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+                ctx.fill();
+                // Draw border
+                ctx.strokeStyle = theme === 'dark' ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.3)';
+                ctx.lineWidth = 1.5;
+                ctx.stroke();
+            });
+        });
+    }, [dimensions, points, center, zoom, theme, config.pointOpacity, config.tileProvider]);
+    // Mouse event handlers for panning
+    const handleMouseDown = require$$0.useCallback((e) => {
+        setIsDragging(true);
+        dragStart.current = { x: e.clientX, y: e.clientY, center: [...center] };
+    }, [center]);
+    const handleMouseMove = require$$0.useCallback((e) => {
+        if (!isDragging || !dragStart.current)
+            return;
+        const dx = e.clientX - dragStart.current.x;
+        const dy = e.clientY - dragStart.current.y;
+        // Convert pixel delta to lat/lng delta
+        const scale = Math.pow(2, zoom) * 256;
+        const lngDelta = (-dx / scale) * 360;
+        const latDelta = (dy / scale) * 180;
+        setCenter([
+            Math.max(-85, Math.min(85, dragStart.current.center[0] + latDelta)),
+            dragStart.current.center[1] + lngDelta,
+        ]);
+    }, [isDragging, zoom]);
+    const handleMouseUp = require$$0.useCallback(() => {
+        setIsDragging(false);
+        dragStart.current = null;
+    }, []);
+    const handleWheel = require$$0.useCallback((e) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.5 : 0.5;
+        setZoom((z) => Math.max(1, Math.min(18, z + delta)));
+    }, []);
+    // Zoom controls
+    const handleZoomIn = require$$0.useCallback(() => {
+        setZoom((z) => Math.min(18, z + 1));
+    }, []);
+    const handleZoomOut = require$$0.useCallback(() => {
+        setZoom((z) => Math.max(1, z - 1));
+    }, []);
+    const buttonStyle = {
+        width: '32px',
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme === 'dark' ? '#374151' : '#FFFFFF',
+        color: theme === 'dark' ? '#F3F4F6' : '#1F2937',
+        border: `1px solid ${theme === 'dark' ? '#4B5563' : '#E5E7EB'}`,
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '18px',
+        fontWeight: 'bold',
+    };
+    return (jsxRuntimeExports.jsxs("div", { ref: containerRef, className: className, style: {
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            backgroundColor: theme === 'dark' ? '#1F2937' : '#F3F4F6',
+            ...style,
+        }, "data-testid": "geo-chart", children: [jsxRuntimeExports.jsx("canvas", { ref: canvasRef, style: {
+                    width: '100%',
+                    height: '100%',
+                    cursor: isDragging ? 'grabbing' : 'grab',
+                }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel }), config.showZoomControl !== false && (jsxRuntimeExports.jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '10px',
+                    right: '10px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '4px',
+                }, children: [jsxRuntimeExports.jsx("button", { style: buttonStyle, onClick: handleZoomIn, children: "+" }), jsxRuntimeExports.jsx("button", { style: buttonStyle, onClick: handleZoomOut, children: "\u2212" })] })), config.showCenterDisplay && (jsxRuntimeExports.jsxs("div", { style: {
+                    position: 'absolute',
+                    bottom: '10px',
+                    left: '10px',
+                    padding: '4px 8px',
+                    backgroundColor: theme === 'dark' ? 'rgba(55, 65, 81, 0.9)' : 'rgba(255, 255, 255, 0.9)',
+                    color: theme === 'dark' ? '#F3F4F6' : '#1F2937',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    fontFamily: 'monospace',
+                }, children: [center[0].toFixed(4), ", ", center[1].toFixed(4), " | Zoom: ", zoom.toFixed(1)] })), jsxRuntimeExports.jsxs("div", { style: {
+                    position: 'absolute',
+                    bottom: '10px',
+                    right: '10px',
+                    padding: '4px 8px',
+                    backgroundColor: theme === 'dark' ? 'rgba(55, 65, 81, 0.9)' : 'rgba(255, 255, 255, 0.9)',
+                    color: theme === 'dark' ? '#9CA3AF' : '#6B7280',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                }, children: [points.length, " points"] }), points.length === 0 && (jsxRuntimeExports.jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '8px',
+                    color: theme === 'dark' ? '#9CA3AF' : '#6B7280',
+                }, children: [jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'spin 1s linear infinite' }, children: [jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }), jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })] }), jsxRuntimeExports.jsx("span", { children: "Waiting for data..." }), jsxRuntimeExports.jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })] }))] }));
+};
+
+/**
+ * Core chart utilities and base functionality
+ */
+// Chart axis configuration constants
+const AXIS_HEIGHT_WITH_TITLE = 70;
+const AXIS_HEIGHT_WITHOUT_TITLE = 40;
+const MAX_LEGEND_ITEMS = 30;
+/**
+ * Horizontal axis label transformation configuration
+ */
+const horizontalAxisLabelConfig = {
+    labelAutoHide: {
+        type: 'hide',
+        keepHeader: true,
+        keepTail: true,
+    },
+    labelAutoRotate: false,
+    labelAutoEllipsis: {
+        type: 'ellipsis',
+        minLength: 100,
+        maxLength: 150,
+    },
+};
+/**
+ * Vertical axis label transformation configuration
+ */
+const verticalAxisLabelConfig = {
+    transform: [
+        {
+            margin: [1, 1, 1, 1],
+            type: 'hide',
+        },
+    ],
+};
+/**
+ * Apply color encoding to a chart mark
+ */
+function applyColorEncoding(node, config) {
+    const { values, keyColor } = config.colors;
+    const domain = config.domain ?? [];
+    // Generate colors for each domain value
+    const colorRange = domain.map((_, index) => {
+        const color = values[index % values.length];
+        // Apply transparency if there's an active selection and this isn't it
+        if (config.activeIndex !== undefined && config.activeIndex >= 0) {
+            return index === config.activeIndex ? color : `${color}30`;
+        }
+        return color;
+    });
+    if (config.zIndex >= 0) {
+        return node.encode('color', `${config.zIndex}`).scale('color', {
+            type: 'ordinal',
+            domain,
+            range: colorRange,
+        });
+    }
+    // Single color mode based on mark type
+    switch (node.type) {
+        case 'area':
+            return node.style('stroke', values[keyColor]).style('fill', values[keyColor]);
+        case 'line':
+            return node.style('stroke', values[keyColor]);
+        case 'interval':
+            return node.style('fill', values[keyColor]);
+        case 'point':
+            return node.style('stroke', values[keyColor]);
+        default:
+            return node;
+    }
+}
+/**
+ * Apply legend configuration to a chart mark
+ */
+function applyLegend(node, enabled, onItemClick, values, theme = 'dark') {
+    if (!enabled || !values || values.length > MAX_LEGEND_ITEMS) {
+        return node.legend(false);
+    }
+    const themeColors = getChartThemeColors(theme);
+    return node.legend('color', {
+        position: 'bottom',
+        layout: {
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+        },
+        itemLabelFill: themeColors.text,
+        itemValueFill: themeColors.text,
+        titleFill: themeColors.text,
+        // Additional label styling for G2 5.x
+        label: {
+            fill: themeColors.text,
+            fontSize: 12,
+        },
+        itemLabel: {
+            style: {
+                fill: themeColors.text,
+                fontSize: 12,
+            },
+        },
+        itemName: {
+            style: {
+                fill: themeColors.text,
+            },
+        },
+        click: onItemClick
+            ? (e) => {
+                const index = e?.__data__?.index;
+                if (index !== undefined) {
+                    onItemClick(index);
+                }
+            }
+            : undefined,
+    });
+}
+/**
+ * Apply data label configuration to a chart mark
+ */
+function applyDataLabel(node, config) {
+    if (!config.enabled)
+        return node;
+    const { unit, yIndex, fractionDigits = 0, showAll = false, textAlign = 'center', textBaseline = 'alphabetic' } = config;
+    return node.label({
+        textAlign,
+        textBaseline,
+        text: (d) => {
+            const v = Number.parseFloat(String(d?.[yIndex] ?? 0)).toFixed(fractionDigits);
+            if (unit?.position === 'right') {
+                return `${v}${unit.value}`;
+            }
+            return `${unit?.value ?? ''}${v}`;
+        },
+        transform: [{ type: 'overlapHide' }],
+        ...(showAll ? {} : { selector: 'last' }),
+    });
+}
+/**
+ * Truncate label with ellipsis
+ */
+function truncateLabel(value, maxChar) {
+    if (maxChar === null || !value)
+        return value;
+    const result = value.slice(0, maxChar);
+    return result === value ? result : `${result}...`;
+}
+/**
+ * Render chart with standard interactions
+ */
+async function renderChart(chart, theme = 'dark') {
+    const themeColors = getChartThemeColors(theme);
+    chart.interaction('tooltip', {
+        mount: document.body,
+        css: {
+            '.g2-tooltip': {
+                'z-index': '10000',
+                'background-color': 'rgba(0, 0, 0, 0.8)',
+                color: '#fff',
+                'border-radius': '4px',
+                padding: '8px 12px',
+                'font-size': '12px',
+            },
+        },
+    });
+    chart.interaction('legendFilter', false);
+    await chart.render();
+    // Apply CSS-based legend text styling after render
+    // This ensures legend text is visible regardless of G2's default styling
+    const container = chart.getContainer();
+    if (container) {
+        // Query for legend text elements using various possible selectors
+        const legendSelectors = [
+            'g[class*="bindClick"] text',
+            'g[class*="bindChange"] text',
+            'g[class*="legend"] text',
+            'g[class*="Legend"] text',
+            // G2 5.x legend item selectors
+            '[class*="category"] text',
+            '[class*="item-label"] text',
+            '[class*="itemLabel"] text',
+        ];
+        legendSelectors.forEach((selector) => {
+            try {
+                const elements = container.querySelectorAll(selector);
+                elements.forEach((el) => {
+                    if (el instanceof SVGElement) {
+                        el.setAttribute('fill', themeColors.text);
+                    }
+                });
+            }
+            catch {
+                // Ignore invalid selectors
+            }
+        });
+        // Also inject a style element for broader coverage
+        const styleId = 'vistral-legend-style';
+        let styleEl = container.querySelector(`#${styleId}`);
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = styleId;
+            container.appendChild(styleEl);
+        }
+        styleEl.textContent = `
+      g[bindClick] text,
+      g[bindChange] text,
+      [class*="legend"] text,
+      [class*="Legend"] text {
+        fill: ${themeColors.text} !important;
+      }
+    `;
+    }
+}
+/**
+ * Configure tooltip for a chart mark
+ */
+function applyTooltip(node, enabled, config) {
+    if (!enabled) {
+        return node.tooltip(false);
+    }
+    const { xIndex, yIndex, zIndex = -1, zValues = [], colors, fractionDigits = 0, yLabel = '' } = config;
+    return node.tooltip({
+        title: (d) => String(d[xIndex] ?? ''),
+        items: [
+            (d) => {
+                const colorValueIndex = zValues.indexOf(String(d[zIndex] ?? ''));
+                const color = colors.values[colorValueIndex % colors.values.length] ?? colors.values[0];
+                return {
+                    name: zIndex >= 0 ? String(d[zIndex]) : yLabel,
+                    value: Number.parseFloat(String(d[yIndex] ?? 0)).toFixed(fractionDigits),
+                    color,
+                };
+            },
+        ],
+    });
+}
+/**
+ * Create default chart configuration based on data source
+ */
+function createDefaultConfig(source, chartType) {
+    const { header, x, y, z } = source;
+    const baseConfig = {
+        chartType,
+        xAxis: x.index >= 0 ? header[x.index].name : '',
+        yAxis: y.index >= 0 ? header[y.index].name : '',
+        color: z.index >= 0 ? header[z.index].name : '',
+        colors: DEFAULT_PALETTE.values,
+    };
+    switch (chartType) {
+        case 'line':
+        case 'area':
+            return {
+                ...baseConfig,
+                xTitle: '',
+                yTitle: '',
+                legend: z.values.length > 0,
+                dataLabel: false,
+                gridlines: false,
+                points: false,
+                lineStyle: 'curve',
+                fractionDigits: 2,
+                xRange: 'Infinity',
+                yRange: { min: null, max: null },
+            };
+        case 'bar':
+        case 'column':
+            return {
+                ...baseConfig,
+                xTitle: '',
+                yTitle: '',
+                legend: z.values.length > 0,
+                dataLabel: false,
+                gridlines: false,
+                fractionDigits: 2,
+                groupType: 'stack',
+            };
+        case 'singleValue':
+            return {
+                chartType,
+                yAxis: y.index >= 0 ? header[y.index].name : '',
+                fontSize: 64,
+                color: 'blue',
+                fractionDigits: 2,
+                sparkline: false,
+                delta: false,
+            };
+        default:
+            return baseConfig;
+    }
+}
+/**
+ * Get theme colors for charts
+ */
+function getChartThemeColors(theme) {
+    return theme === 'dark'
+        ? {
+            text: '#E5E5E5', // Matches darkTheme.textColor
+            textSecondary: '#9CA3AF',
+            line: '#6B7280', // Matches darkTheme.axisColor (was #374151 which is very dark)
+            gridline: '#374151', // Matches darkTheme.gridColor
+            background: 'transparent',
+        }
+        : {
+            text: '#000000',
+            textSecondary: '#374151',
+            line: '#4B5563',
+            gridline: '#9CA3AF',
+            background: 'transparent',
+        };
+}
+/**
+ * Apply chart theme
+ */
+function applyChartTheme(chart, theme = 'dark') {
+    const colors = getChartThemeColors(theme);
+    const themeConfig = {
+        view: { viewFill: colors.background },
+        // Data labels on points/bars
+        label: {
+            fill: colors.text,
+            fontSize: 11,
+        },
+        // Axis configuration
+        axis: {
+            x: {
+                line: { stroke: colors.line },
+                tick: { stroke: colors.line },
+                label: { fill: colors.text, fontSize: 11 },
+                title: { fill: colors.text, fontSize: 12, fontWeight: 500 },
+                grid: { stroke: colors.gridline },
+            },
+            y: {
+                line: { stroke: colors.line },
+                tick: { stroke: colors.line },
+                label: { fill: colors.text, fontSize: 11 },
+                title: { fill: colors.text, fontSize: 12, fontWeight: 500 },
+                grid: { stroke: colors.gridline },
+            },
+        },
+        // Legend configuration
+        legend: {
+            label: { fill: colors.text, fontSize: 12 },
+            title: { fill: colors.text, fontSize: 12 },
+            marker: { size: 8 },
+            itemLabel: { fill: colors.text, fontSize: 12 },
+            itemName: { fill: colors.text, fontSize: 12 },
+            itemValue: { fill: colors.textSecondary, fontSize: 12 },
+        },
+        // Legend category specific
+        legendCategory: {
+            itemLabel: { fill: colors.text },
+            itemName: { fill: colors.text },
+        },
+        // Title configuration
+        title: {
+            fill: colors.text,
+            fontSize: 14,
+            fontWeight: 600,
+        },
+    };
+    chart.theme(themeConfig);
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Spec Engine — converts VistralSpec + data into renderable configuration.
+ *
+ * This module is the heart of the declarative pipeline. It takes a
+ * VistralSpec and the current data snapshot and produces transforms,
+ * scales, and other derived configuration that downstream renderers
+ * (e.g. AntV G2) can consume.
+ */
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Returns the maximum parsed timestamp across all rows for the given field.
+ * If data is empty, returns `Date.now()` as a sensible fallback.
+ */
+function getMaxTimestamp(data, field) {
+    if (data.length === 0)
+        return Date.now();
+    let max = -Infinity;
+    for (const row of data) {
+        const ts = parseDateTime(row[field]);
+        if (ts > max) {
+            max = ts;
+        }
+    }
+    return max === -Infinity ? Date.now() : max;
+}
+// ---------------------------------------------------------------------------
+// G2 Spec Translation
+// ---------------------------------------------------------------------------
+/**
+ * Translate a CoordinateSpec to G2 format.
+ * Renames `transforms` to `transform`.
+ */
+function translateCoordinate(coord) {
+    const { transforms, ...rest } = coord;
+    const result = { ...rest };
+    if (transforms) {
+        result.transform = transforms;
+    }
+    return result;
+}
+/**
+ * Translate an AxisChannelSpec to G2 axis channel format.
+ */
+function translateAxisChannel(axis, colors) {
+    const result = {};
+    if (axis.title !== undefined) {
+        result.title = axis.title;
+        result.titleFill = colors.text;
+        result.titleFillOpacity = 1;
+    }
+    if (axis.grid !== undefined) {
+        result.grid = axis.grid;
+        result.gridStroke = colors.gridline;
+        result.gridStrokeOpacity = 1;
+    }
+    if (axis.line !== undefined) {
+        result.line = axis.line;
+        result.lineStroke = colors.line;
+        result.lineStrokeOpacity = 1;
+    }
+    // Force tick visibility and color
+    result.tick = true;
+    result.tickStroke = colors.line;
+    result.tickStrokeOpacity = 1;
+    // Force label color
+    result.labelFill = colors.text;
+    result.labelFillOpacity = 1;
+    if (axis.labels) {
+        if (axis.labels.format !== undefined) {
+            result.labelFormatter = axis.labels.format;
+        }
+        if (axis.labels.rotate !== undefined) {
+            result.labelTransform = [{ type: 'rotate', angle: axis.labels.rotate }];
+        }
+    }
+    return result;
+}
+/**
+ * Translate AxesSpec to G2 axis format.
+ */
+function translateAxes(axes, theme = 'dark') {
+    const result = {};
+    const colors = getChartThemeColors(theme);
+    for (const channel of ['x', 'y']) {
+        const value = axes[channel];
+        if (value === undefined)
+            continue;
+        if (value === false) {
+            result[channel] = false;
+        }
+        else {
+            result[channel] = translateAxisChannel(value, colors);
+        }
+    }
+    return result;
+}
+/**
+ * Translate a LabelSpec to G2 label format.
+ * Converts `overlapHide` to `transform: [{ type: 'overlapHide' }]`.
+ */
+function translateLabel(label) {
+    const { overlapHide, ...rest } = label;
+    const result = { ...rest };
+    if (overlapHide) {
+        result.transform = [{ type: 'overlapHide' }];
+    }
+    return result;
+}
+/**
+ * Translate an AnnotationSpec to a G2 child entry.
+ */
+function translateAnnotation(annotation) {
+    const child = {
+        type: annotation.type,
+    };
+    if (annotation.encode) {
+        child.encode = annotation.encode;
+    }
+    if (annotation.style) {
+        child.style = annotation.style;
+    }
+    if (annotation.value !== undefined) {
+        child.data = [annotation.value];
+    }
+    if (annotation.label !== undefined) {
+        child.labels = [{ text: annotation.label }];
+    }
+    return child;
+}
+/**
+ * Translate a single MarkSpec to a G2 child entry.
+ */
+function translateMark(mark, spec) {
+    const child = {
+        type: mark.type,
+    };
+    // Encode
+    if (mark.encode) {
+        child.encode = { ...mark.encode };
+    }
+    // Scale: merge top-level scales with per-mark scales (per-mark wins)
+    const topScales = spec.scales ?? {};
+    const markScales = mark.scales ?? {};
+    const mergedScales = { ...topScales, ...markScales };
+    // --- Interval Mark Safety ---
+    // If the mark is 'interval' (bar/column), G2 strictly requires a 'band' scale
+    // for the categorical axis to calculate bandwidth. 'ordinal' (point) scales cause crashes.
+    if (mark.type === 'interval') {
+        // Detect which axis is likely categorical (band).
+        // Usually X for column chart, Y for bar chart.
+        // Heuristic: check if the scale type is explicitly 'ordinal'.
+        for (const channel in mergedScales) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (mergedScales.hasOwnProperty(channel)) {
+                const sc = mergedScales[channel];
+                if (sc?.type === 'ordinal') {
+                    // Coerce to 'band'
+                    mergedScales[channel] = { ...sc, type: 'band' };
+                }
+            }
+        }
+    }
+    if (Object.keys(mergedScales).length > 0) {
+        child.scale = mergedScales;
+    }
+    // Transforms: prepend top-level transforms before mark transforms
+    const topTransforms = spec.transforms ?? [];
+    const markTransforms = mark.transforms ?? [];
+    const allTransforms = [...topTransforms, ...markTransforms];
+    if (allTransforms.length > 0) {
+        child.transform = allTransforms;
+    }
+    // Style
+    if (mark.style) {
+        child.style = mark.style;
+    }
+    // Labels
+    if (mark.labels) {
+        child.labels = mark.labels.map(translateLabel);
+    }
+    // Tooltip
+    if (mark.tooltip !== undefined) {
+        child.tooltip = mark.tooltip === false ? false : mark.tooltip;
+    }
+    // Animate: per-mark overrides top-level
+    const animate = mark.animate ?? spec.animate;
+    if (animate !== undefined) {
+        child.animate = animate;
+    }
+    return child;
+}
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+/**
+ * Translate a VistralSpec into a G2-compatible options object.
+ *
+ * This is a **pure function** — no G2 imports, no DOM access, no side effects.
+ * It produces a plain object that can be handed to `chart.options(result)`.
+ */
+function translateToG2Spec(spec) {
+    const g2 = {
+        type: 'view',
+    };
+    // Pre-analysis for Horizontal Bar Chart (Interval with X=Continuous, Y=Discrete)
+    let shouldSwapAxes = false;
+    if (!spec.coordinate) {
+        const topScales = spec.scales ?? {};
+        for (const mark of spec.marks) {
+            if (mark.type === 'interval') {
+                const markScales = mark.scales ?? {};
+                const mergedScales = { ...topScales, ...markScales };
+                const xScaleType = mergedScales.x?.type || 'linear';
+                const yScaleType = mergedScales.y?.type || 'linear';
+                const isXContinuous = ['linear', 'time', 'log', 'pow', 'sqrt'].includes(xScaleType);
+                // check 'ordinal' too because we coerce it later, but here we detect intent
+                const isYDiscrete = ['band', 'ordinal', 'point'].includes(yScaleType);
+                if (isXContinuous && isYDiscrete) {
+                    shouldSwapAxes = true;
+                    break;
+                }
+            }
+        }
+    }
+    // Coordinate
+    if (spec.coordinate) {
+        g2.coordinate = translateCoordinate(spec.coordinate);
+    }
+    else if (shouldSwapAxes) {
+        g2.coordinate = { transform: [{ type: 'transpose' }] };
+    }
+    // Axes
+    if (spec.axes) {
+        // If swapping axes, we must swap the axis configuration too
+        const effectiveAxes = shouldSwapAxes
+            ? { ...spec.axes, x: spec.axes.y, y: spec.axes.x }
+            : spec.axes;
+        g2.axis = translateAxes(effectiveAxes, spec.theme);
+    }
+    // Legend
+    if (spec.legend !== undefined) {
+        if (spec.legend === false) {
+            g2.legend = false;
+        }
+        else {
+            const colors = getChartThemeColors(spec.theme ?? 'dark');
+            g2.legend = {
+                color: {
+                    position: spec.legend.position,
+                    // Explicitly inject colors to override G2 defaults/dimming
+                    itemLabelFill: colors.text,
+                    itemLabelFillOpacity: 1,
+                    itemNameFill: colors.text,
+                    itemNameFillOpacity: 1,
+                    titleFill: colors.text,
+                    titleFillOpacity: 1,
+                    // G2 5.0+ specific style overrides
+                    itemLabel: {
+                        fill: colors.text,
+                        fillOpacity: 1,
+                        fontSize: 12,
+                    },
+                    itemName: {
+                        fill: colors.text,
+                        fillOpacity: 1,
+                        fontSize: 12,
+                    },
+                },
+            };
+        }
+    }
+    // Interactions: array → object map
+    if (spec.interactions) {
+        const interaction = {};
+        for (const { type, ...options } of spec.interactions) {
+            interaction[type] = options;
+        }
+        g2.interaction = interaction;
+    }
+    // Children: marks + annotations
+    const children = spec.marks.map((mark) => {
+        // If we are swapping axes, we need to swap the mark's encoding and scales 
+        // BEFORE passing to translateMark (or inside it).
+        // Let's create a "swapped" mark definition to pass down.
+        if (shouldSwapAxes && mark.type === 'interval') {
+            const swappedMark = { ...mark };
+            // Swap Encodes
+            if (mark.encode) {
+                swappedMark.encode = { ...mark.encode };
+                const oldX = swappedMark.encode.x;
+                const oldY = swappedMark.encode.y;
+                if (oldX)
+                    swappedMark.encode.y = oldX;
+                else
+                    delete swappedMark.encode.y;
+                if (oldY)
+                    swappedMark.encode.x = oldY;
+                else
+                    delete swappedMark.encode.x;
+            }
+            // Swap Scales
+            if (mark.scales) {
+                swappedMark.scales = { ...mark.scales };
+                const oldX = swappedMark.scales.x;
+                const oldY = swappedMark.scales.y;
+                if (oldX)
+                    swappedMark.scales.y = oldX;
+                else
+                    delete swappedMark.scales.y;
+                if (oldY)
+                    swappedMark.scales.x = oldY;
+                else
+                    delete swappedMark.scales.x;
+            }
+            // Note: top-level scales also need swapping but `translateMark` retrieves them from `spec.scales`.
+            // We need `translateMark` to use SWAPPED top-level scales.
+            // So we pass a "virtual spec" to translateMark.
+            const swappedSpec = { ...spec };
+            if (spec.scales) {
+                swappedSpec.scales = { ...spec.scales };
+                const oldX = swappedSpec.scales.x;
+                const oldY = swappedSpec.scales.y;
+                if (oldX)
+                    swappedSpec.scales.y = oldX;
+                else
+                    delete swappedSpec.scales.y;
+                if (oldY)
+                    swappedSpec.scales.x = oldY;
+                else
+                    delete swappedSpec.scales.x;
+            }
+            return translateMark(swappedMark, swappedSpec);
+        }
+        return translateMark(mark, spec);
+    });
+    if (spec.annotations) {
+        for (const annotation of spec.annotations) {
+            children.push(translateAnnotation(annotation));
+        }
+    }
+    g2.children = children;
+    return g2;
+}
+// ---------------------------------------------------------------------------
+// Theme
+// ---------------------------------------------------------------------------
+/**
+ * Build a G2 theme configuration object from a Vistral theme name.
+ * Defaults to 'dark' when the theme argument is undefined.
+ */
+function applySpecTheme(theme) {
+    const colors = getChartThemeColors(theme ?? 'dark');
+    return {
+        view: { viewFill: colors.background },
+        label: { fill: colors.text, fontSize: 11, fillOpacity: 1 },
+        axis: {
+            x: {
+                line: { stroke: colors.line, strokeOpacity: 1 },
+                tick: { stroke: colors.line, strokeOpacity: 1 },
+                label: { fill: colors.text, fontSize: 11, fillOpacity: 1 },
+                title: { fill: colors.text, fontSize: 12, fontWeight: 500, fillOpacity: 1 },
+                grid: { stroke: colors.gridline },
+            },
+            y: {
+                line: { stroke: colors.line, strokeOpacity: 1 },
+                tick: { stroke: colors.line, strokeOpacity: 1 },
+                label: { fill: colors.text, fontSize: 11, fillOpacity: 1 },
+                title: { fill: colors.text, fontSize: 12, fontWeight: 500, fillOpacity: 1 },
+                grid: { stroke: colors.gridline },
+            },
+        },
+        legend: {
+            label: { fill: colors.text, fontSize: 12, fillOpacity: 1 },
+            title: { fill: colors.text, fontSize: 12, fillOpacity: 1 },
+            itemLabel: { fill: colors.text, fontSize: 12, fillOpacity: 1 },
+            itemName: { fill: colors.text, fontSize: 12, fillOpacity: 1 },
+            itemValue: { fill: colors.textSecondary, fontSize: 12, fillOpacity: 1 },
+        },
+        legendCategory: {
+            itemLabel: { fill: colors.text, fillOpacity: 1 },
+            itemName: { fill: colors.text, fillOpacity: 1 },
+        },
+    };
+}
+// ---------------------------------------------------------------------------
+// Temporal data filtering (in JavaScript)
+// ---------------------------------------------------------------------------
+/**
+ * Apply temporal filtering and sorting to data **in JavaScript** rather than
+ * relying on G2 data transforms.  This is the preferred approach for the
+ * declarative `chart.options()` API because G2 mark-level `transform` is
+ * intended for visual transforms (stackY, dodgeX, …) — not data filtering.
+ *
+ * Returns a new array; the input is never mutated.
+ */
+function filterDataByTemporal(spec, data) {
+    const { temporal } = spec;
+    if (!temporal || data.length === 0)
+        return data;
+    const { mode, field } = temporal;
+    let result = data;
+    switch (mode) {
+        case 'axis': {
+            const { range } = temporal;
+            // Time-window filter
+            if (typeof range === 'number' && range !== Infinity) {
+                const timeField = Array.isArray(field) ? field[0] : field;
+                const maxTs = getMaxTimestamp(data, timeField);
+                const windowMs = range * 60000;
+                const minTs = maxTs - windowMs;
+                result = result.filter((d) => {
+                    const ts = parseDateTime(d[timeField]);
+                    return ts >= minTs && ts <= maxTs;
+                });
+            }
+            // Sort by temporal field
+            const sortField = Array.isArray(field) ? field[0] : field;
+            result = [...result].sort((a, b) => parseDateTime(a[sortField]) - parseDateTime(b[sortField]));
+            break;
+        }
+        case 'frame': {
+            const timeField = Array.isArray(field) ? field[0] : field;
+            const maxTs = getMaxTimestamp(data, timeField);
+            result = result.filter((d) => parseDateTime(d[timeField]) === maxTs);
+            break;
+        }
+        case 'key': {
+            // In 'key' mode, the `field` property represents the categorical Key (e.g. 'server').
+            const keyFields = Array.isArray(temporal.field) ? temporal.field : [temporal.field];
+            let timeField = 'timestamp'; // default guess
+            // We need to find the timestamp field to determine "latest".
+            // Heuristic: check for common names or first date-like field.
+            if (data.length > 0) {
+                const row = data[0];
+                if (Object.prototype.hasOwnProperty.call(row, 'timestamp'))
+                    timeField = 'timestamp';
+                else if (Object.prototype.hasOwnProperty.call(row, 'time'))
+                    timeField = 'time';
+                else if (Object.prototype.hasOwnProperty.call(row, 'date'))
+                    timeField = 'date';
+                else {
+                    // Scan for a value that looks like a timestamp
+                    for (const k in row) {
+                        if (keyFields.includes(k))
+                            continue;
+                        if (parseDateTime(row[k]) > 0) {
+                            timeField = k;
+                            break;
+                        }
+                    }
+                }
+            }
+            const latestByKey = new Map();
+            for (const row of data) {
+                const key = keyFields.map(f => String(row[f] ?? '')).join('::');
+                const ts = parseDateTime(row[timeField]);
+                const prev = latestByKey.get(key);
+                if (prev === undefined || ts > prev) {
+                    latestByKey.set(key, ts);
+                }
+            }
+            result = result.filter((d) => {
+                const key = keyFields.map(f => String(d[f] ?? '')).join('::');
+                const ts = parseDateTime(d[timeField]);
+                return latestByKey.get(key) === ts;
+            });
+            break;
+        }
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Pipeline helpers
+// ---------------------------------------------------------------------------
+/**
+ * Collect the set of data-field names that are encoded to a channel whose
+ * scale `type` is `'time'`.  G2 needs Date objects (or epoch numbers) for
+ * time scales — raw ISO strings are not parsed automatically.
+ */
+function collectTimeFields(spec) {
+    const timeFields = new Set();
+    const topScales = spec.scales ?? {};
+    for (const mark of spec.marks) {
+        const markScales = mark.scales ?? {};
+        const merged = { ...topScales, ...markScales };
+        for (const [channel, scaleConfig] of Object.entries(merged)) {
+            if (scaleConfig?.type === 'time') {
+                const fieldName = mark.encode?.[channel];
+                if (typeof fieldName === 'string') {
+                    timeFields.add(fieldName);
+                }
+            }
+        }
+    }
+    // The temporal field is usually a date...
+    // BUT if it is encoded to a 'band' scale (e.g. in a Bar Chart), 
+    // we must NOT convert it to a Date object, otherwise G2 will override the band scale with a time scale.
+    if (spec.temporal?.field) {
+        // In 'key' mode, the fields is the KEY, not the time.
+        if (spec.temporal.mode === 'key') {
+            return timeFields;
+        }
+        const fields = Array.isArray(spec.temporal.field) ? spec.temporal.field : [spec.temporal.field];
+        let isBand = false;
+        for (const mark of spec.marks) {
+            const markScales = mark.scales ?? {};
+            const merged = { ...topScales, ...markScales };
+            for (const [channel, encodedField] of Object.entries(mark.encode ?? {})) {
+                if (fields.includes(encodedField)) {
+                    const type = merged[channel]?.type;
+                    if (type === 'band') {
+                        isBand = true;
+                    }
+                }
+            }
+        }
+        if (!isBand) {
+            fields.forEach(f => timeFields.add(f));
+        }
+    }
+    return timeFields;
+}
+/**
+ * If any area or line mark uses a `color` encoding (multi-series), return the
+ * field name so the pipeline can apply a stable secondary sort.  This prevents
+ * the visual stacking order from flipping when series values cross each other.
+ */
+function getSeriesFieldForStableSort(spec) {
+    for (const mark of spec.marks) {
+        if ((mark.type === 'area' || mark.type === 'line') && mark.encode?.color) {
+            const colorField = mark.encode.color;
+            if (typeof colorField === 'string')
+                return colorField;
+        }
+    }
+    return null;
+}
+/**
+ * Find the time/x field from the spec — either from temporal config or from
+ * the first mark's x encoding that uses a time scale.
+ */
+function getTimeFieldFromSpec(spec) {
+    // 1. From temporal config
+    if (spec.temporal?.field) {
+        const f = spec.temporal.field;
+        return Array.isArray(f) ? f[0] : f;
+    }
+    // 2. From marks' x encoding with time scale
+    const topScales = spec.scales ?? {};
+    for (const mark of spec.marks) {
+        const markScales = mark.scales ?? {};
+        const merged = { ...topScales, ...markScales };
+        if (merged.x?.type === 'time' && typeof mark.encode?.x === 'string') {
+            return mark.encode.x;
+        }
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Pipeline
+// ---------------------------------------------------------------------------
+/**
+ * Main pipeline — combines temporal data filtering, G2 spec translation, and
+ * theme application into a single G2-ready options object.
+ *
+ * 1. `filterDataByTemporal(spec, data)` — filter/sort data in JavaScript
+ * 2. `translateToG2Spec(spec)` — produce G2 options (no visual transforms)
+ * 3. `applySpecTheme(spec.theme)` — attach theme configuration
+ * 4. Attach filtered data + sliding time domain to each child mark
+ *
+ * The returned object is ready for `chart.options(result)`.
+ */
+function buildG2Options(spec, data) {
+    // Filter/sort data in JS — do NOT inject temporal transforms into G2
+    let filteredData = filterDataByTemporal(spec, data);
+    // --- Stable sort by color/series field for area/line marks -----------------
+    // For stacked or overlapping area/line charts with a color encoding, the
+    // data rows within each time group must be in a consistent order.  Without
+    // this, the visual stacking order flips when series values cross each other.
+    const seriesField = getSeriesFieldForStableSort(spec);
+    if (seriesField && filteredData.length > 0) {
+        // Find the time/x field for the primary sort key
+        const timeField = getTimeFieldFromSpec(spec);
+        if (timeField) {
+            // Combined sort: primary by time, secondary by series (stable)
+            filteredData = [...filteredData].sort((a, b) => {
+                const ta = parseDateTime(a[timeField]);
+                const tb = parseDateTime(b[timeField]);
+                if (ta !== tb)
+                    return ta - tb;
+                // Same time — sort by series name for consistent stack order
+                const sa = String(a[seriesField] ?? '');
+                const sb = String(b[seriesField] ?? '');
+                return sa < sb ? -1 : sa > sb ? 1 : 0;
+            });
+        }
+        else {
+            // No time field — just sort by series for consistent order
+            filteredData = [...filteredData].sort((a, b) => {
+                const sa = String(a[seriesField] ?? '');
+                const sb = String(b[seriesField] ?? '');
+                return sa < sb ? -1 : sa > sb ? 1 : 0;
+            });
+        }
+    }
+    // --- Convert time-scale fields to Date objects ----------------------------
+    // G2's time scale cannot parse ISO 8601 strings directly; it needs Date
+    // objects (or epoch numbers).  Collect every data field that is encoded to a
+    // channel whose scale `type` is `'time'` and convert those field values.
+    const timeFields = collectTimeFields(spec);
+    if (timeFields.size > 0 && filteredData.length > 0) {
+        filteredData = filteredData.map((row) => {
+            const newRow = { ...row };
+            for (const f of timeFields) {
+                if (newRow[f] !== undefined) {
+                    newRow[f] = new Date(parseDateTime(newRow[f]));
+                }
+            }
+            return newRow;
+        });
+    }
+    // Translate spec to G2 (only visual transforms like stackY/dodgeX reach G2)
+    const g2Spec = translateToG2Spec(spec);
+    g2Spec.theme = applySpecTheme(spec.theme);
+    // Attach filtered data at the view level.  Child marks inherit from the
+    // view; annotations that already carry their own `data` (set by
+    // translateAnnotation) keep it — G2 lets child-level data override.
+    g2Spec.data = filteredData;
+    // --- Axis-mode temporal: set sliding time domain on appropriate scale ---
+    // This makes the axis scroll forward as new data arrives.
+    if (spec.temporal?.mode === 'axis' && filteredData.length > 0) {
+        const field = spec.temporal.field;
+        const timeField = Array.isArray(field) ? field[0] : field;
+        const maxTs = getMaxTimestamp(filteredData, timeField);
+        const range = spec.temporal.range;
+        let minTs;
+        if (typeof range === 'number' && range !== Infinity) {
+            minTs = maxTs - range * 60000;
+        }
+        else {
+            // No finite range — span the full data extent
+            minTs = maxTs;
+            for (const row of filteredData) {
+                const ts = parseDateTime(row[timeField]);
+                if (ts < minTs)
+                    minTs = ts;
+            }
+        }
+        // Auto-detect a suitable time format mask
+        // Check both axes for mask config, though usually it's on the temporal axis
+        const xMask = spec.scales?.x?.mask;
+        const yMask = spec.scales?.y?.mask;
+        const mask = (xMask || yMask) ?? getTimeMask(minTs, maxTs);
+        if (g2Spec.children) {
+            for (const child of g2Spec.children) {
+                if (!child.scale)
+                    child.scale = {};
+                // Interval marks (bars) usually require a 'band' scale for width calculation.
+                // Forcing 'time' scale can cause internal G2 crashes (getBandWidth error).
+                // Since data is already filtered by time, we can skip enforcing time scale here.
+                if (child.type === 'interval') {
+                    continue;
+                }
+                // Find which channel is using the temporal field
+                let targetChannel = null;
+                // Check local encode first
+                if (child.encode) {
+                    if (child.encode.x === timeField)
+                        targetChannel = 'x';
+                    else if (child.encode.y === timeField)
+                        targetChannel = 'y';
+                }
+                // If not found in local mark, could rely on defaults but Vistral requires explicit encode usually.
+                // If we found a target channel, update its scale.
+                if (targetChannel) {
+                    // Don't override an explicit 'band' scale with 'time'
+                    const existingType = child.scale[targetChannel]?.type || spec.scales?.[targetChannel]?.type;
+                    if (existingType === 'band') {
+                        continue;
+                    }
+                    child.scale[targetChannel] = {
+                        ...(child.scale[targetChannel] ?? {}),
+                        type: 'time',
+                        domainMin: new Date(minTs),
+                        domainMax: new Date(maxTs),
+                        mask,
+                    };
+                }
+            }
+        }
+    }
+    return g2Spec;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Normalise a `StreamDataSource` into an array of `Record<string, unknown>`.
+ *
+ * Rows that are already objects are kept as-is. Array rows are mapped using
+ * the column definitions so that `row[i]` becomes `{ [columns[i].name]: v }`.
+ */
+function normaliseData(source) {
+    if (!source || !source.data || source.data.length === 0)
+        return [];
+    const { columns, data } = source;
+    return data.map((row) => {
+        if (Array.isArray(row)) {
+            return arrayRowToObject(row, columns);
+        }
+        return row;
+    });
+}
+/**
+ * Convert a single array-style row to an object using column definitions.
+ */
+function arrayRowToObject(row, columns) {
+    const obj = {};
+    for (let i = 0; i < columns.length; i++) {
+        obj[columns[i].name] = row[i];
+    }
+    return obj;
+}
+/**
+ * Normalise raw rows (which may be arrays or objects) into objects.
+ * When array rows are encountered without column info we fall back to
+ * positional keys ("col_0", "col_1", ...).
+ */
+function normaliseRows(rows, columns) {
+    return rows.map((row) => {
+        if (Array.isArray(row)) {
+            if (columns && columns.length > 0) {
+                return arrayRowToObject(row, columns);
+            }
+            // Fallback: positional keys
+            const obj = {};
+            for (let i = 0; i < row.length; i++) {
+                obj[`col_${i}`] = row[i];
+            }
+            return obj;
+        }
+        return row;
+    });
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * `VistralChart` renders a VistralSpec declaratively. It manages the G2
+ * chart lifecycle and exposes an imperative `ChartHandle` via ref for
+ * streaming updates.
+ */
+const VistralChart = require$$0.forwardRef(function VistralChart(props, ref) {
+    const { spec, source, width, height, className, style, onReady } = props;
+    // DOM container
+    const containerRef = require$$0.useRef(null);
+    // G2 chart instance
+    const chartRef = require$$0.useRef(null);
+    // Internal data buffer
+    const dataRef = require$$0.useRef([]);
+    // Column definitions (kept from source for array-row normalisation)
+    const columnsRef = require$$0.useRef([]);
+    // Throttle timer
+    const throttleTimerRef = require$$0.useRef(null);
+    const pendingRenderRef = require$$0.useRef(false);
+    // Track whether onReady has been called
+    const [readyFired, setReadyFired] = require$$0.useState(false);
+    // ----- Render helper -----
+    const renderChart = require$$0.useCallback(() => {
+        const chart = chartRef.current;
+        if (!chart)
+            return;
+        const data = dataRef.current;
+        // Skip rendering when there is no data — avoids putting G2 into a
+        // broken empty state that prevents subsequent renders from showing.
+        if (data.length === 0)
+            return;
+        const g2Options = buildG2Options(spec, data);
+        // Apply explicit dimensions if provided
+        if (width !== undefined)
+            g2Options.width = width;
+        if (height !== undefined)
+            g2Options.height = height;
+        chart.options(g2Options);
+        chart.render();
+    }, [spec, width, height]);
+    /**
+     * Schedule a render, respecting the optional throttle interval.
+     */
+    const scheduleRender = require$$0.useCallback(() => {
+        const throttle = spec.streaming?.throttle ?? 0;
+        if (throttle <= 0) {
+            renderChart();
+            return;
+        }
+        // If a timer is already running, mark as pending
+        if (throttleTimerRef.current !== null) {
+            pendingRenderRef.current = true;
+            return;
+        }
+        renderChart();
+        throttleTimerRef.current = setTimeout(() => {
+            throttleTimerRef.current = null;
+            if (pendingRenderRef.current) {
+                pendingRenderRef.current = false;
+                renderChart();
+            }
+        }, throttle);
+    }, [renderChart, spec.streaming?.throttle]);
+    // ----- Imperative handle -----
+    const maxItems = spec.streaming?.maxItems ?? DEFAULT_MAX_ITEMS;
+    const handleRef = require$$0.useRef({
+        append: () => { },
+        replace: () => { },
+        clear: () => { },
+        g2: null,
+    });
+    // Keep handle methods up-to-date
+    handleRef.current.append = (rows) => {
+        const normalised = normaliseRows(rows, columnsRef.current);
+        const buffer = dataRef.current;
+        buffer.push(...normalised);
+        // Trim to maxItems
+        if (buffer.length > maxItems) {
+            dataRef.current = buffer.slice(buffer.length - maxItems);
+        }
+        scheduleRender();
+    };
+    handleRef.current.replace = (rows) => {
+        const normalised = normaliseRows(rows, columnsRef.current);
+        dataRef.current = normalised.slice(-maxItems);
+        scheduleRender();
+    };
+    handleRef.current.clear = () => {
+        dataRef.current = [];
+        scheduleRender();
+    };
+    handleRef.current.g2 = chartRef.current;
+    require$$0.useImperativeHandle(ref, () => handleRef.current, []);
+    // ----- Chart lifecycle: create / destroy -----
+    require$$0.useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const chart = new g2.Chart({
+            container: containerRef.current,
+            autoFit: true,
+        });
+        chartRef.current = chart;
+        handleRef.current.g2 = chart;
+        // Fire onReady after the chart instance is created.  This happens
+        // synchronously inside the effect so the handle is available by the
+        // time any sibling effects or the caller's own effects run.
+        if (!readyFired && onReady) {
+            onReady(handleRef.current);
+            setReadyFired(true);
+        }
+        return () => {
+            // Cleanup throttle timer
+            if (throttleTimerRef.current !== null) {
+                clearTimeout(throttleTimerRef.current);
+                throttleTimerRef.current = null;
+            }
+            chart.destroy();
+            chartRef.current = null;
+            handleRef.current.g2 = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // ----- React to source / spec changes -----
+    require$$0.useEffect(() => {
+        if (source) {
+            columnsRef.current = source.columns;
+            dataRef.current = normaliseData(source);
+        }
+        scheduleRender();
+    }, [source, scheduleRender]);
+    // ----- Render -----
+    const containerStyle = {
+        width: width !== undefined ? width : '100%',
+        height: height !== undefined ? height : '100%',
+        ...style,
+    };
+    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: className, style: containerStyle }));
+});
+
+/**
+ * Config Compilers — bridge between legacy chart configs and VistralSpec.
+ *
+ * These functions convert the existing high-level chart configuration
+ * objects (TimeSeriesConfig, BarColumnConfig) into the declarative
+ * VistralSpec grammar.
+ */
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Map the legacy TemporalConfig to a TemporalSpec.
+ * Falls back to the given `defaultField` when the config's field is empty.
+ */
+function mapTemporal(temporal, defaultField) {
+    if (!temporal)
+        return undefined;
+    return {
+        mode: temporal.mode,
+        field: temporal.field || defaultField,
+        range: temporal.range,
+    };
+}
+// ---------------------------------------------------------------------------
+// compileTimeSeriesConfig
+// ---------------------------------------------------------------------------
+/**
+ * Compile a `TimeSeriesConfig` into a `VistralSpec`.
+ *
+ * Mapping summary:
+ * - `chartType` -> mark type ('line' | 'area')
+ * - `xAxis` / `yAxis` / `color` -> encode channels
+ * - `lineStyle: 'curve'` -> style.shape: 'smooth', else 'line'
+ * - Always adds style.connect: true
+ * - `points: true` -> adds second point mark (tooltip: false)
+ * - `dataLabel: true` -> adds label; if showAll is false, selector: 'last'
+ * - area + color -> transforms: [{ type: 'stackY' }]
+ * - scales.x: time scale with optional mask from xFormat
+ * - scales.y: linear, nice, optional domain from yRange
+ * - temporal -> maps to TemporalSpec
+ * - streaming: { maxItems: config.maxItems ?? DEFAULT_MAX_ITEMS }
+ * - axes, legend, theme, animate configured per defaults
+ */
+function compileTimeSeriesConfig(config, theme = 'dark') {
+    const { chartType, xAxis, yAxis, color } = config;
+    // -- Primary mark ----------------------------------------------------------
+    const mark = {
+        type: chartType, // 'line' | 'area'
+        encode: {
+            x: xAxis,
+            y: yAxis,
+            ...(color ? { color } : {}),
+        },
+        style: {
+            connect: true,
+            ...(config.chartType === 'line'
+                ? { shape: config.lineStyle === 'curve' ? 'smooth' : 'line' }
+                : {}),
+            ...(config.chartType === 'area' && config.lineStyle === 'curve'
+                ? { shape: 'smooth' }
+                : {}),
+        },
+    };
+    // Labels
+    if (config.dataLabel) {
+        const label = {
+            text: yAxis,
+            overlapHide: true,
+        };
+        if (config.showAll === false) {
+            label.selector = 'last';
+        }
+        mark.labels = [label];
+    }
+    // -- Marks array -----------------------------------------------------------
+    const marks = [mark];
+    if (config.points) {
+        marks.push({
+            type: 'point',
+            encode: {
+                x: xAxis,
+                y: yAxis,
+                ...(color ? { color } : {}),
+            },
+            tooltip: false,
+        });
+    }
+    // -- Transforms ------------------------------------------------------------
+    const transforms = [];
+    if (chartType === 'area' && color) {
+        transforms.push({ type: 'stackY' });
+    }
+    // -- Scales ----------------------------------------------------------------
+    const xScale = { type: 'time' };
+    if (config.xFormat) {
+        xScale.mask = config.xFormat;
+    }
+    const yScale = { type: 'linear', nice: true };
+    if (config.yRange &&
+        config.yRange.min != null &&
+        config.yRange.max != null) {
+        yScale.domain = [config.yRange.min, config.yRange.max];
+    }
+    // -- Temporal --------------------------------------------------------------
+    // Default to axis-bound sliding window for time series charts
+    const temporal = mapTemporal(config.temporal, xAxis)
+        ?? { mode: 'axis', field: xAxis, range: 2 };
+    // -- Axes ------------------------------------------------------------------
+    const gridY = config.gridlines ?? true;
+    // -- Legend ----------------------------------------------------------------
+    const legend = config.legend === false
+        ? false
+        : { position: 'bottom', interactive: true };
+    // -- Assemble spec ---------------------------------------------------------
+    const spec = {
+        marks,
+        scales: {
+            x: xScale,
+            y: yScale,
+        },
+        ...(transforms.length > 0 ? { transforms } : {}),
+        ...(temporal ? { temporal } : {}),
+        streaming: { maxItems: config.maxItems ?? DEFAULT_MAX_ITEMS },
+        axes: {
+            x: { title: config.xTitle || false, grid: false },
+            y: { title: config.yTitle || false, grid: gridY },
+        },
+        legend,
+        theme: theme,
+        animate: false,
+    };
+    return spec;
+}
+// ---------------------------------------------------------------------------
+// compileBarColumnConfig
+// ---------------------------------------------------------------------------
+/**
+ * Compile a `BarColumnConfig` into a `VistralSpec`.
+ *
+ * Mapping summary:
+ * - mark type is always 'interval'
+ * - `chartType 'bar'` -> coordinate: { transforms: [{ type: 'transpose' }] }
+ * - `color` set -> transforms: stackY (if groupType==='stack') or dodgeX
+ * - `dataLabel: true` -> label with text: yAxis, overlapHide: true
+ * - scales: x with padding 0.5, y linear with nice
+ * - Same streaming/axes/legend/theme/animate defaults as time series
+ */
+function compileBarColumnConfig(config, theme = 'dark') {
+    const { xAxis, yAxis, color, chartType } = config;
+    const isBar = chartType === 'bar';
+    // Standard Mapping:
+    // xAxis -> Independent Variable (Category) -> x channel (Band scale)
+    // yAxis -> Dependent Variable (Value)    -> y channel (Linear scale)
+    //
+    // For Bar Charts, we apply 'transpose' to flip the visual axes.
+    // -- Primary mark ----------------------------------------------------------
+    const mark = {
+        type: 'interval',
+        encode: {
+            x: xAxis,
+            y: yAxis,
+            ...(color ? { color } : {}),
+        },
+    };
+    // Labels: Always display the VALUE (yAxis)
+    if (config.dataLabel) {
+        mark.labels = [
+            {
+                text: yAxis,
+                overlapHide: true,
+            },
+        ];
+    }
+    // -- Transforms ------------------------------------------------------------
+    const transforms = [];
+    if (color) {
+        transforms.push({
+            type: config.groupType === 'stack' ? 'stackY' : 'dodgeX',
+        });
+    }
+    // -- Coordinate ------------------------------------------------------------
+    const coordinate = isBar
+        ? { transforms: [{ type: 'transpose' }] }
+        : undefined;
+    // -- Scales ----------------------------------------------------------------
+    // G2 Interval Mark expects 'x' to be the discrete (band) axis.
+    // We use Transpose for Bar Charts to flip it to the vertical axis.
+    const scales = {
+        x: { type: 'band', padding: 0.5 },
+        y: { type: 'linear', nice: true },
+    };
+    // -- Temporal --------------------------------------------------------------
+    // Default temporal field is the Category field (xAxis)
+    const temporal = mapTemporal(config.temporal, xAxis);
+    // -- Axes ------------------------------------------------------------------
+    const gridY = config.gridlines ?? true;
+    // -- Legend ----------------------------------------------------------------
+    const legend = config.legend === false
+        ? false
+        : { position: 'bottom', interactive: true };
+    // -- Assemble spec ---------------------------------------------------------
+    const spec = {
+        marks: [mark],
+        scales,
+        ...(transforms.length > 0 ? { transforms } : {}),
+        ...(coordinate ? { coordinate } : {}),
+        ...(temporal ? { temporal } : {}),
+        streaming: { maxItems: config.maxItems ?? DEFAULT_MAX_ITEMS },
+        axes: {
+            x: { title: config.xTitle || false, grid: false },
+            y: { title: config.yTitle || false, grid: gridY },
+        },
+        legend,
+        theme: theme,
+        animate: false,
+    };
+    return spec;
+}
+
+/**
+ * Check if configuration is for a time series chart
+ */
+function isTimeSeriesConfig(config) {
+    return config.chartType === 'line' || config.chartType === 'area';
+}
+/**
+ * Check if configuration is for a bar/column chart
+ */
+function isBarColumnConfig(config) {
+    return config.chartType === 'bar' || config.chartType === 'column';
+}
+/**
+ * Check if configuration is for a single value chart
+ */
+function isSingleValueConfig(config) {
+    return config.chartType === 'singleValue';
+}
+/**
+ * Check if configuration is for a table
+ */
+function isTableConfig(config) {
+    return config.chartType === 'table';
+}
+/**
+ * Check if configuration is for a geo chart
+ */
+function isGeoConfig(config) {
+    return config.chartType === 'geo';
+}
+/**
+ * Error Boundary for chart rendering errors
+ */
+class ChartErrorBoundary extends require$$0.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    render() {
+        if (this.state.hasError) {
+            const { theme } = this.props;
+            return (jsxRuntimeExports.jsxs("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '24px',
+                    textAlign: 'center',
+                    color: theme === 'dark' ? '#F87171' : '#DC2626',
+                    backgroundColor: theme === 'dark' ? 'rgba(127, 29, 29, 0.1)' : 'rgba(254, 226, 226, 0.5)',
+                    borderRadius: '8px',
+                }, children: [jsxRuntimeExports.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), jsxRuntimeExports.jsx("p", { style: { marginTop: '16px', fontWeight: 500 }, children: "Chart rendering error" }), jsxRuntimeExports.jsx("p", { style: {
+                            marginTop: '8px',
+                            fontSize: '12px',
+                            color: theme === 'dark' ? '#FCA5A5' : '#F87171',
+                        }, children: this.state.error?.message || 'Unknown error' })] }));
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Placeholder for unsupported chart types
+ */
+const UnsupportedChart = ({ chartType, theme, }) => (jsxRuntimeExports.jsxs("div", { style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '24px',
+        textAlign: 'center',
+        color: theme === 'dark' ? '#FCD34D' : '#D97706',
+        backgroundColor: theme === 'dark' ? 'rgba(120, 53, 15, 0.1)' : 'rgba(254, 243, 199, 0.5)',
+        borderRadius: '8px',
+    }, children: [jsxRuntimeExports.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" }), jsxRuntimeExports.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" })] }), jsxRuntimeExports.jsxs("p", { style: { marginTop: '16px', fontWeight: 500 }, children: ["Unsupported chart type: \"", chartType, "\""] }), jsxRuntimeExports.jsx("p", { style: {
+                marginTop: '8px',
+                fontSize: '12px',
+                color: theme === 'dark' ? '#FDE68A' : '#F59E0B',
+            }, children: "Supported types: line, area, bar, column, singleValue, table, geo" })] }));
+/**
+ * StreamChart Component
+ *
+ * Universal chart component for streaming data visualization.
+ * Automatically renders the appropriate chart based on the config.chartType property.
+ *
+ * @example
+ * ```tsx
+ * <StreamChart
+ *   config={{
+ *     chartType: 'line',
+ *     xAxis: 'timestamp',
+ *     yAxis: 'value',
+ *     legend: true,
+ *   }}
+ *   data={{
+ *     columns: [
+ *       { name: 'timestamp', type: 'datetime64' },
+ *       { name: 'value', type: 'float64' },
+ *     ],
+ *     data: [...],
+ *   }}
+ *   theme="dark"
+ * />
+ * ```
+ */
+const StreamChart = ({ config, data, theme = 'dark', showTable = false, className, style, onConfigChange, }) => {
+    // If showTable is true, always render as table
+    if (showTable) {
+        const tableConfig = {
+            chartType: 'table',
+            tableStyles: {},
+            tableWrap: false,
+        };
+        return (jsxRuntimeExports.jsx(ChartErrorBoundary, { theme: theme, children: jsxRuntimeExports.jsx(DataTable, { config: tableConfig, data: data, theme: theme, className: className, style: style, onConfigChange: onConfigChange, maxRows: config.maxItems }) }));
+    }
+    // Render appropriate chart based on config type
+    const chartComponent = require$$0.useMemo(() => {
+        // Phase 2: Use Grammar Abstraction for Time Series
+        if (isTimeSeriesConfig(config)) {
+            const spec = compileTimeSeriesConfig(config, theme);
+            return (jsxRuntimeExports.jsx(VistralChart, { spec: spec, source: data, className: className, style: style }));
+        }
+        // Phase 2: Use Grammar Abstraction for Bar/Column
+        if (isBarColumnConfig(config)) {
+            const spec = compileBarColumnConfig(config, theme);
+            return (jsxRuntimeExports.jsx(VistralChart, { spec: spec, source: data, className: className, style: style }));
+        }
+        if (isSingleValueConfig(config)) {
+            return (jsxRuntimeExports.jsx(SingleValueChart, { config: config, data: data, theme: theme, className: className, style: style }));
+        }
+        if (isTableConfig(config)) {
+            return (jsxRuntimeExports.jsx(DataTable, { config: config, data: data, theme: theme, className: className, style: style, onConfigChange: onConfigChange, maxRows: config.maxItems }));
+        }
+        if (isGeoConfig(config)) {
+            return (jsxRuntimeExports.jsx(GeoChart, { config: config, data: data, theme: theme, className: className, style: style, maxItems: config.maxItems }));
+        }
+        // Unsupported chart type
+        return jsxRuntimeExports.jsx(UnsupportedChart, { chartType: config.chartType, theme: theme });
+    }, [config, data, theme, className, style, onConfigChange]);
+    return jsxRuntimeExports.jsx(ChartErrorBoundary, { theme: theme, children: chartComponent });
+};
+
+exports.AXIS_HEIGHT_WITHOUT_TITLE = AXIS_HEIGHT_WITHOUT_TITLE;
+exports.AXIS_HEIGHT_WITH_TITLE = AXIS_HEIGHT_WITH_TITLE;
+exports.DEFAULT_MAX_ITEMS = DEFAULT_MAX_ITEMS;
+exports.DEFAULT_PALETTE = DEFAULT_PALETTE;
+exports.DataTable = DataTable;
+exports.GeoChart = GeoChart;
+exports.MAX_LEGEND_ITEMS = MAX_LEGEND_ITEMS;
+exports.SingleValueChart = SingleValueChart;
+exports.StreamChart = StreamChart;
+exports.VistralChart = VistralChart;
+exports.abbreviateNumber = abbreviateNumber;
+exports.allPalettes = allPalettes;
+exports.applyChartTheme = applyChartTheme;
+exports.applyColorEncoding = applyColorEncoding;
+exports.applyDataLabel = applyDataLabel;
+exports.applyLegend = applyLegend;
+exports.applyTemporalFilter = applyTemporalFilter;
+exports.applyTooltip = applyTooltip;
+exports.calculateColumnStats = calculateColumnStats;
+exports.clamp = clamp;
+exports.compileBarColumnConfig = compileBarColumnConfig;
+exports.compileTimeSeriesConfig = compileTimeSeriesConfig;
+exports.createDefaultConfig = createDefaultConfig;
+exports.darkTheme = darkTheme;
+exports.debounce = debounce;
+exports.default = StreamChart;
+exports.filterByKey = filterByKey;
+exports.filterByLatestTimestamp = filterByLatestTimestamp;
+exports.findColumnIndex = findColumnIndex;
+exports.findPaletteByLabel = findPaletteByLabel;
+exports.findPaletteByValues = findPaletteByValues;
+exports.formatBytes = formatBytes;
+exports.formatDuration = formatDuration;
+exports.formatNumber = formatNumber;
+exports.generateId = generateId;
+exports.getChartThemeColors = getChartThemeColors;
+exports.getColumnsByType = getColumnsByType;
+exports.getGeoChartDefaults = getGeoChartDefaults;
+exports.getPaletteKeyColor = getPaletteKeyColor;
+exports.getRowValue = getRowValue;
+exports.getSeriesColors = getSeriesColors;
+exports.getSingleValueDefaults = getSingleValueDefaults;
+exports.getTableDefaults = getTableDefaults;
+exports.getTheme = getTheme;
+exports.getTimeMask = getTimeMask;
+exports.getUniqueValues = getUniqueValues;
+exports.horizontalAxisLabelConfig = horizontalAxisLabelConfig;
+exports.isBooleanColumn = isBooleanColumn;
+exports.isDateTimeColumn = isDateTimeColumn;
+exports.isNumericColumn = isNumericColumn;
+exports.isStringColumn = isStringColumn;
+exports.lightTheme = lightTheme;
+exports.mergeDeep = mergeDeep;
+exports.multiColorPalettes = multiColorPalettes;
+exports.parseDateTime = parseDateTime;
+exports.processDataSource = processDataSource;
+exports.renderChart = renderChart;
+exports.rowToArray = rowToArray;
+exports.singleColorPalettes = singleColorPalettes;
+exports.truncateLabel = truncateLabel;
+exports.truncateWithEllipsis = truncateWithEllipsis;
+exports.useAutoConfig = useAutoConfig;
+exports.useChart = useChart;
+exports.useChartAnimation = useChartAnimation;
+exports.useChartTheme = useChartTheme;
+exports.useDataSource = useDataSource;
+exports.useDebouncedValue = useDebouncedValue;
+exports.useLastUpdated = useLastUpdated;
+exports.usePrevious = usePrevious;
+exports.useResizeObserver = useResizeObserver;
+exports.useSparklineData = useSparklineData;
+exports.useStreamingData = useStreamingData;
+exports.verticalAxisLabelConfig = verticalAxisLabelConfig;
+//# sourceMappingURL=index.js.map