layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/components/Chart.svelte

@@ -1,47 +1,40 @@
 <script lang="ts" module>
-  import { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';
-  import { type Accessor, accessor, chartDataArray } from '../utils/common.js';
-  import { printDebug } from '../utils/debug.js';
-  import { filterObject } from '../utils/filterObject.js';
-  import {
-    createScale,
-    getRange,
-    isScaleBand,
-    makeAccessor,
-    type AnyScale,
-    type DomainType,
-  } from '../utils/scales.svelte.js';
-  import { Context, useDebounce } from 'runed';
+  import { type ComponentProps, type Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { TimeInterval } from 'd3-time';
+  import type { HierarchyNode } from 'd3-hierarchy';
+  import type { SankeyGraph } from 'd3-sankey';
+
+  import { getObjectOrNull, type Accessor } from '../utils/common.js';
+  import type { MotionProp } from '../utils/motion.svelte.js';
+  import { type AnyScale, type DomainType, isScaleBand } from '../utils/scales.svelte.js';
   import type {
-    AxisKey,
     BaseRange,
-    DataType,
-    Extents,
     Nice,
-    Padding,
     PaddingArray,
+    Without,
     XRangeWithScale,
     YRangeWithScale,
   } from '../utils/types.js';
+  import type { GeoStateProps } from '../states/geo.svelte.js';
+  import TooltipContext from './tooltip/TooltipContext.svelte';
+
+  import TransformContext from './TransformContext.svelte';
+  // BrushContext (used only when `brush` prop is set) is lazy-loaded inline
+  // via `{#await import(...)}` so non-brush charts don't pay for it.
+  import type BrushContext from './BrushContext.svelte';
   import {
-    calcDomain,
-    calcScaleExtents,
-    createGetter,
-    createChartScale,
-  } from '../utils/chart.js';
-  import { onMount, type ComponentProps, type Snippet } from 'svelte';
-  import GeoContext, { type GeoContextValue } from './GeoContext.svelte';
-  import TooltipContext, { type TooltipContextValue } from './tooltip/TooltipContext.svelte';
-  import { extent, max, min } from 'd3-array';
-  import type { HierarchyNode } from 'd3-hierarchy';
-  import type { SankeyGraph } from 'd3-sankey';
-  import { unique } from '@layerstack/utils';
-  import { geoFitObjectTransform } from '../utils/geo.js';
-  import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
-  import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
-  import { layerClass } from '../utils/attributes.js';
+    type BrushDomainType,
+    type BrushState,
+    expandBandBrushDomain,
+  } from '../states/brush.svelte.js';
+
+  import { setChartContext } from '../contexts/chart.js';
+  import { ChartState } from '../states/chart.svelte.js';
+  import type { StackLayout } from '../states/series.svelte.js';
 
-  const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
+  import type { ChartChildrenProps } from './ChartChildren.svelte';
+  import type { SeriesData } from './charts/types.js';
 
   export type ChartResizeDetail = {
     width: number;
@@ -79,83 +72,6 @@
     | 'y1Range'
   >;
 
-  export type ChartContextValue<
-    T = any,
-    XScale extends AnyScale = AnyScale,
-    YScale extends AnyScale = AnyScale,
-  > = {
-    activeGetters: Record<AxisKey, (d: T) => any>;
-    width: number;
-    height: number;
-    percentRange: boolean;
-    aspectRatio: number;
-    containerRef: HTMLElement | undefined;
-    containerWidth: number;
-    containerHeight: number;
-    config: PreservedChartConfig<T, XScale, YScale>;
-    x: (d: T) => any;
-    y: (d: T) => any;
-    z: (d: T) => any;
-    r: (d: T) => any;
-    x1: (d: T) => any;
-    y1: (d: T) => any;
-    c: (d: T) => any;
-    data: DataType<T>;
-    xNice: Nice;
-    yNice: Nice;
-    zNice: Nice;
-    rNice: Nice;
-    xDomainSort: boolean;
-    yDomainSort: boolean;
-    zDomainSort: boolean;
-    rDomainSort: boolean;
-    xReverse: boolean;
-    yReverse: boolean;
-    zReverse: boolean;
-    rReverse: boolean;
-    xPadding: PaddingArray;
-    yPadding: PaddingArray;
-    zPadding: PaddingArray;
-    rPadding: PaddingArray;
-    padding: Padding;
-    flatData: T[];
-    extents: Extents;
-    xDomain: number[];
-    yDomain: number[];
-    zDomain: DomainType;
-    rDomain: DomainType;
-    cDomain: DomainType;
-    x1Domain: DomainType;
-    y1Domain: DomainType;
-    xRange: any[];
-    yRange: any[];
-    zRange: any[];
-    rRange: any[];
-    cRange: readonly string[] | string[] | undefined;
-    x1Range: XRangeWithScale<XScale> | undefined;
-    y1Range: YRangeWithScale<YScale> | undefined;
-    meta: Record<string, any>;
-    xScale: AnyScale;
-    yScale: AnyScale;
-    zScale: AnyScale;
-    rScale: AnyScale;
-    cScale: AnyScale | null;
-    x1Scale: AnyScale | null;
-    y1Scale: AnyScale | null;
-    yGet: (d: T) => any;
-    xGet: (d: T) => any;
-    zGet: (d: T) => any;
-    rGet: (d: T) => any;
-    cGet: (d: T) => any;
-    x1Get: (d: T) => any;
-    y1Get: (d: T) => any;
-    radial: boolean;
-    tooltip: TooltipContextValue<T>;
-    geo: GeoContextValue;
-    brush: BrushContextValue;
-    transform: TransformContextValue;
-  };
-
   export type LayerChartInternalMeta = {
     /**
      * The current chart type.
@@ -171,37 +87,6 @@
       | 'simplified-scatter';
   };
 
-  const _ChartContext = new Context<ChartContextValue<any, AnyScale, AnyScale>>('ChartContext');
-
-  export function getChartContext<
-    T,
-    XScale extends AnyScale = AnyScale,
-    YScale extends AnyScale = AnyScale,
-  >(): ChartContextValue<T, XScale, YScale> {
-    return _ChartContext.getOr({} as ChartContextValue<T, XScale, YScale>);
-  }
-
-  export function setChartContext<
-    T,
-    XScale extends AnyScale = AnyScale,
-    YScale extends AnyScale = AnyScale,
-  >(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale> {
-    // @ts-expect-error - shh
-    return _ChartContext.set(context);
-  }
-
-  export type RenderContext = 'svg' | 'canvas' | 'html';
-
-  const _RenderContext = new Context<RenderContext>('RenderContext');
-
-  export function getRenderContext(): RenderContext {
-    return _RenderContext.get();
-  }
-
-  export function setRenderContext(context: RenderContext): RenderContext {
-    return _RenderContext.set(context);
-  }
-
   export type ChartPropsWithoutHTML<
     T,
     XScale extends AnyScale = AnyScale,
@@ -417,21 +302,21 @@
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     xScale?: XScale;
 
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     yScale?: YScale;
 
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     zScale?: AnyScale;
 
@@ -445,14 +330,14 @@
     /**
      * The D3 scale that should be used for the x1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     x1Scale?: AnyScale;
 
     /**
      * The D3 scale that should be used for the y1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     y1Scale?: AnyScale;
 
@@ -640,7 +525,22 @@
      */
     yBaseline?: number | null;
 
-    /* Props passed to ChartContext */
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
+
+    /**
+     * The axis that represents the value dimension, typically based on the type and orientation of the chart
+     *
+     * @default 'y'
+     */
+    valueAxis?: 'x' | 'y';
 
     /**
      * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.
@@ -651,726 +551,643 @@
      */
     radial?: boolean;
 
-    children?: Snippet<[{ context: ChartContextValue<T, XScale, YScale> }]>;
+    children?: Snippet<[{ context: ChartState<T, XScale, YScale> }]>;
 
     /**
      * A bindable reference to the chart context.
      */
-    context?: ChartContextValue<T, XScale, YScale>;
+    context?: ChartState<T, XScale, YScale>;
 
     /**
-     * Props passed to GeoContext
+     * Props passed to GeoState
      */
-    geo?: Partial<ComponentProps<typeof GeoContext>>;
+    geo?: Partial<GeoStateProps>;
 
     /**
      * Props passed to the `TooltipContext` component.
      */
-    tooltip?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+    tooltipContext?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
 
     /**
-     * Props passed to TransformContext
-     */
-    transform?: Partial<ComponentProps<typeof TransformContext>>;
+     * Props passed to TransformContext, with optional domain-space constraints.
+     */
+    transform?: Partial<ComponentProps<typeof TransformContext>> & {
+      /**
+       * Controls which projection properties are updated by transform state in `mode: 'projection'`.
+       * Auto-detected from the projection type when not specified:
+       * - Globe projections (e.g. `geoOrthographic`): `{ rotation: true, scale: false, translate: false }`
+       * - Flat maps (e.g. `geoMercator`): `{ rotation: false, scale: true, translate: true }`
+       *
+       * `rotation` and `translate` are mutually exclusive.
+       */
+      apply?: {
+        /** Apply transform translate as projection rotation (yaw/pitch). */
+        rotation?: boolean;
+        /** Apply transform scale to projection scale. */
+        scale?: boolean;
+        /** Apply transform translate to projection translate. */
+        translate?: boolean;
+      };
+
+      /**
+       * Domain-space constraints for pan/zoom in `mode: 'domain'`.
+       * Expressed in data units (numbers, Dates) rather than pixel-space.
+       * Converted internally to a `constrain` function on TransformState.
+       */
+      domainExtent?: {
+        x?: {
+          /** Minimum domain value. `'data'` = initial data bounds. */
+          min?: number | Date | 'data';
+          /** Maximum domain value. `'data'` = initial data bounds. */
+          max?: number | Date | 'data';
+          /** Minimum visible range (max zoom in). In data units (e.g., ms for dates). */
+          minRange?: number;
+        };
+        y?: {
+          min?: number | Date | 'data';
+          max?: number | Date | 'data';
+          minRange?: number;
+        };
+      };
+    };
 
     /** Props passed to BrushContext */
-    brush?: Partial<ComponentProps<typeof BrushContext>> | boolean;
+    brush?:
+      | (Partial<ComponentProps<typeof BrushContext>> & {
+          /**
+           * Zoom the chart domain to the brushed area on brush end.
+           *
+           * @default false
+           */
+          zoomOnBrush?: boolean;
+        })
+      | boolean;
+
+    /** Series definitions for multi-series charts */
+    series?: SeriesData<T, any>[];
+
+    /** Layout mode for series: 'overlap', 'group', 'stack', 'stackExpand', 'stackDiverging' */
+    seriesLayout?: StackLayout | 'group';
+
+    /**
+     * Padding between primary bands (e.g. bars), applied to the category axis scaleBand().padding().
+     * When set, the category axis (opposite of valueAxis) automatically uses a scaleBand with this padding.
+     */
+    bandPadding?: number;
+
+    /**
+     * Padding between group/series items when using seriesLayout="group", applied to the x1/y1 scaleBand().padding().
+     * @default 0
+     */
+    groupPadding?: number;
 
     /**
      * A callback function that is called when the chart is resized.
      */
     onResize?: (e: ChartResizeDetail) => void;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the container.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
+    /**
+     * Animate scale domain transitions with spring or tween motion.
+     * Applies to all domain changes (data updates, brush zoom, transform, etc.)
+     */
+    motion?: MotionProp;
+
     // TransformContext callback events
     ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
     ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
     onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
-  };
+
+    /** Sets width of the chart container.  Uses parent width if not set (bind:clientWidth) */
+    width?: number;
+
+    /** Sets height of the chart container.  Uses parent height if not set (bind:clientHeight) */
+    height?: number;
+  } & ChartChildrenProps<T, XScale, YScale>;
+
+  export type ChartProps<
+    T,
+    XScale extends AnyScale = AnyScale,
+    YScale extends AnyScale = AnyScale,
+  > = ChartPropsWithoutHTML<T, XScale, YScale> &
+    Without<HTMLAttributes<HTMLDivElement>, ChartPropsWithoutHTML<T, XScale, YScale>>;
 </script>
 
 <script
   lang="ts"
   generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
 >
+  import { setGeoContext } from '../contexts/geo.js';
+  import { getSettings } from '../contexts/settings.js';
+  import ChartChildren from './ChartChildren.svelte';
+
+  let {
+    ref: refProp = $bindable(),
+    context: contextProp = $bindable(),
+    ...props
+  }: ChartProps<TData, XScale, YScale> = $props();
+
   let {
     ssr = false,
     pointerEvents = true,
+    width,
+    height,
     position = 'relative',
-    percentRange = false,
-    ref: refProp = $bindable(),
-    x: xProp,
-    y: yProp,
-    z: zProp,
-    r: rProp,
-    data = [],
-    xDomain: xDomainProp,
-    yDomain: yDomainProp,
-    zDomain: zDomainProp,
-    rDomain: rDomainProp,
-    xNice = false,
-    yNice = false,
-    zNice = false,
-    rNice = false,
-    xPadding,
-    yPadding,
-    zPadding,
-    rPadding,
-    // @ts-expect-error shh
-    xScale: xScaleProp = scaleLinear(),
-    // @ts-expect-error shh
-    yScale: yScaleProp = scaleLinear(),
-    zScale: zScaleProp = scaleLinear(),
-    rScale: rScaleProp = scaleSqrt(),
-    flatData: flatDataProp,
-    padding: paddingProp = {},
-    verbose = true,
-    debug = false,
-    extents: extentsProp = {},
-    xDomainSort = false,
-    yDomainSort = false,
-    zDomainSort = false,
-    rDomainSort = false,
-    xReverse = false,
-    zReverse = false,
-    rReverse = false,
-    yRange: _yRangeProp,
-    zRange: zRangeProp,
-    rRange: rRangeProp,
-    xBaseline = null,
-    yBaseline = null,
-    meta = {},
-    children: _children,
-    radial = false,
-    xRange: _xRangeProp,
-    x1: x1Prop,
-    x1Domain: x1DomainProp,
-    x1Range: x1RangeProp,
-    x1Scale: x1ScaleProp,
-    y1: y1Prop,
-    y1Domain: y1DomainProp,
-    y1Range: y1RangeProp,
-    y1Scale: y1ScaleProp,
-    c: cProp,
-    cScale: cScaleProp,
-    cDomain: cDomainProp,
-    cRange: cRangeProp,
-    onResize,
+    children,
     geo,
-    context: contextProp = $bindable(),
-    tooltip,
+    tooltipContext,
     transform,
     onTransform,
     ondragend,
     ondragstart,
     brush,
-  }: ChartPropsWithoutHTML<TData, XScale, YScale> = $props();
+    motion,
+    debug = false,
+    clip = false,
+    onTooltipClick,
+    class: className,
+    ...restProps
+  } = $derived(props);
+
+  let brushXDomain = $state<BrushDomainType>();
+  let brushYDomain = $state<BrushDomainType>();
+
+  const chartState = new ChartState<TData, XScale, YScale>(() => ({
+    ref: refProp,
+    context: contextProp,
+    ...props,
+    xDomain: brushXDomain ?? props.xDomain,
+    yDomain: brushYDomain ?? props.yDomain,
+  }));
 
   let ref = $state<HTMLElement>();
-
   $effect.pre(() => {
     refProp = ref;
+    chartState.containerRef = ref;
   });
 
-  const xRangeProp = $derived(_xRangeProp ? _xRangeProp : radial ? [0, 2 * Math.PI] : undefined);
+  // Update bindable
+  contextProp = chartState;
 
-  let containerWidth = $state(100);
-  let containerHeight = $state(100);
+  setChartContext(chartState);
+  setGeoContext(chartState.geoState);
 
-  const logDebug = useDebounce(printDebug, 200);
-
-  const _xDomain: DomainType | undefined = $derived.by(() => {
-    if (xDomainProp !== undefined) return xDomainProp;
-    if (xBaseline != null && Array.isArray(data)) {
-      const xValues = data.flatMap(accessor(xProp));
-      return [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
-    }
+  const settings = getSettings();
+  $effect(() => {
+    settings.debug = debug;
   });
 
-  const _yDomain: DomainType | undefined = $derived.by(() => {
-    if (yDomainProp !== undefined) return yDomainProp;
-    if (yBaseline != null && Array.isArray(data)) {
-      const yValues = data.flatMap(accessor(yProp));
-      return [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
-    }
-  });
+  // Resolve which projection properties the transform state applies to
+  const resolvedApply = $derived.by(() => {
+    if (transform?.mode !== 'projection')
+      return { rotation: false, scale: false, translate: false };
 
-  const yRangeProp = $derived(
-    _yRangeProp ?? (radial ? ({ height }: { height: number }) => [0, height / 2] : undefined)
-  );
-
-  const yReverse = $derived(yScaleProp ? !isScaleBand(yScaleProp) : true);
-
-  const x = $derived(makeAccessor(xProp));
-  const y = $derived(makeAccessor(yProp));
-  const z = $derived(makeAccessor(zProp));
-  const r = $derived(makeAccessor(rProp));
-  const c = $derived(accessor(cProp));
-  const x1 = $derived(accessor(x1Prop));
-  const y1 = $derived(accessor(y1Prop));
+    // Auto-detect globe projections from clipAngle (flat projections return 0, globes return > 0)
+    let isGlobe = false;
+    if (geo?.projection) {
+      const proj = geo.projection();
+      isGlobe = (proj.clipAngle?.() ?? 0) > 0;
+    }
 
-  const flatData = $derived(flatDataProp ?? data) as TData[];
+    const defaults = isGlobe
+      ? { rotation: true, scale: true, translate: false }
+      : { rotation: false, scale: true, translate: true };
 
-  const filteredExtents = $derived(filterObject($state.snapshot(extentsProp)));
+    // User overrides win; enforce mutual exclusion
+    const result = { ...defaults, ...transform?.apply };
+    if (transform?.apply?.rotation === true && transform?.apply?.translate == null) {
+      result.translate = false;
+    }
+    if (transform?.apply?.translate === true && transform?.apply?.rotation == null) {
+      result.rotation = false;
+    }
 
-  const activeGetters = $derived({
-    x,
-    y,
-    z,
-    r,
+    return result;
   });
 
-  const padding = $derived.by(() => {
-    if (typeof paddingProp === 'number') {
-      return {
-        ...defaultPadding,
-        top: paddingProp,
-        right: paddingProp,
-        bottom: paddingProp,
-        left: paddingProp,
-      };
+  $effect.pre(() => {
+    if (chartState.geoState) {
+      chartState.geoState.transformApply = resolvedApply;
     }
-    return { ...defaultPadding, ...paddingProp };
   });
 
-  let isMounted = $state(false);
-
-  const box = $derived.by(() => {
-    const top = padding.top;
-    const right = containerWidth - padding.right;
-    const bottom = containerHeight - padding.bottom;
-    const left = padding.left;
-    const width = right - left;
-    const height = bottom - top;
-    if (verbose === true) {
-      if (width <= 0 && isMounted === true) {
-        console.warn(
-          '[LayerChart] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
-        );
-      }
-      if (height <= 0 && isMounted === true) {
-        console.warn(
-          '[LayerChart] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
-        );
-      }
+  const initialTransform = $derived.by(() => {
+    if (
+      transform?.mode !== 'projection' ||
+      !(resolvedApply.translate || resolvedApply.scale) ||
+      !geo?.fitGeojson ||
+      !geo?.projection
+    ) {
+      return undefined;
     }
-
-    return {
-      top,
-      left,
-      bottom,
-      right,
-      width,
-      height,
-    };
+    // Inlined to avoid pulling `$lib/utils/geo.js` (and its d3-geo imports)
+    // into Chart's static graph for non-geo charts.
+    const fitted = geo.projection().fitSize([chartState.width, chartState.height], geo.fitGeojson);
+    const t = fitted.translate();
+    return { translate: { x: t[0], y: t[1] }, scale: fitted.scale() };
   });
 
-  const width = $derived(box.width);
-  const height = $derived(box.height);
-
-  interface ScaleEntry {
-    scale: AnyScale;
-    sort?: boolean;
-  }
-
-  /* --------------------------------------------
-   * Calculate extents by taking the extent of the data
-   * and filling that in with anything set by the user
-   * Note that this is different from an "extent" passed
-   * in as a domain, which can be a partial domain
-   */
-  const extents: Extents = $derived.by(() => {
-    const scaleLookup: Record<string, ScaleEntry> = {
-      x: { scale: xScaleProp, sort: xDomainSort },
-      y: { scale: yScaleProp, sort: yDomainSort },
-      z: { scale: zScaleProp, sort: zDomainSort },
-      r: { scale: rScaleProp, sort: rDomainSort },
-    };
-
-    const getters = filterObject(activeGetters, filteredExtents);
-    const activeScales: Record<string, ScaleEntry> = Object.fromEntries(
-      Object.keys(getters).map((k) => [k, scaleLookup[k]])
-    );
-
-    if (Object.keys(getters).length > 0) {
-      const calculatedExtents = calcScaleExtents(flatData, getters, activeScales);
-      return { ...calculatedExtents, ...filteredExtents };
-    } else {
-      return {};
+  const processTranslate = $derived.by(() => {
+    if (resolvedApply.rotation && chartState.geoState?.projection) {
+      return (x: number, y: number, deltaX: number, deltaY: number) => {
+        // When applying transform as rotation, invert `y` values and reduce sensitivity based on projection scale
+        // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
+        const projectionScale = chartState.geoState.projection!.scale() ?? 0;
+        const sensitivity = 75;
+        return {
+          x: x + deltaX * (sensitivity / projectionScale),
+          y: y + deltaY * (sensitivity / projectionScale) * -1,
+        };
+      };
     }
+    return undefined;
   });
 
-  const xDomain = $derived(calcDomain('x', extents, _xDomain));
-  const yDomain = $derived(calcDomain('y', extents, _yDomain));
-  const zDomain = $derived(calcDomain('z', extents, zDomainProp));
-  const rDomain = $derived(calcDomain('r', extents, rDomainProp));
-
-  const x1Domain = $derived(x1DomainProp ?? extent(chartDataArray(data), x1));
-  const y1Domain = $derived(y1DomainProp ?? extent(chartDataArray(data), y1));
-  const cDomain = $derived(cDomainProp ?? unique(chartDataArray(data).map(c)));
-
-  const snappedPadding = $derived($state.snapshot(xPadding));
-  const snappedExtents = $derived($state.snapshot(extents));
-
-  const xScale = $derived(
-    createChartScale('x', {
-      scale: xScaleProp,
-      domain: xDomain,
-      padding: snappedPadding,
-      nice: xNice,
-      reverse: xReverse,
-      percentRange,
-      range: xRangeProp,
-      height,
-      width,
-      extents: snappedExtents,
-    })
-  );
-
-  const xGet = $derived(createGetter(x, xScale));
-
-  const yScale = $derived(
-    createChartScale('y', {
-      scale: yScaleProp,
-      domain: yDomain,
-      padding: yPadding,
-      nice: yNice,
-      reverse: yReverse,
-      percentRange,
-      range: yRangeProp,
-      height,
-      width,
-      extents: filteredExtents,
-    })
-  );
+  // Convert domainExtent to a constrain function on TransformState
+  const domainExtentConstrain = $derived.by(() => {
+    const de = transform?.domainExtent;
+    if (!de) return undefined;
+
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      let { scale, translate } = t;
+
+      // Helper to resolve 'data' to base domain values
+      const resolveValue = (
+        val: number | Date | 'data' | undefined,
+        baseDomainValue: unknown
+      ): number | undefined => {
+        if (val === undefined) return undefined;
+        if (val === 'data') {
+          if (baseDomainValue instanceof Date) return baseDomainValue.getTime();
+          return baseDomainValue as number;
+        }
+        if (val instanceof Date) return val.getTime();
+        return val;
+      };
 
-  const yGet = $derived(createGetter(y, yScale));
-
-  const zScale = $derived(
-    createChartScale('z', {
-      scale: zScaleProp,
-      domain: zDomain,
-      padding: zPadding,
-      nice: zNice,
-      reverse: zReverse,
-      percentRange,
-      range: zRangeProp,
-      height,
-      width,
-      extents: filteredExtents,
-    })
-  );
-  const zGet = $derived(createGetter(z, zScale));
-
-  const rScale = $derived(
-    createChartScale('r', {
-      scale: rScaleProp,
-      domain: rDomain,
-      padding: rPadding,
-      nice: rNice,
-      reverse: rReverse,
-      percentRange,
-      range: rRangeProp,
-      height,
-      width,
-      extents: filteredExtents,
-    })
-  );
+      // Constrain a single axis. Normalizes reversed domains (e.g. [500, 0])
+      // to ascending order, applies constraints, then maps back.
+      const constrainAxis = (
+        axisTranslate: number,
+        axisScale: number,
+        dimension: number,
+        baseDomain: number[],
+        extent:
+          | { min?: number | Date | 'data'; max?: number | Date | 'data'; minRange?: number }
+          | undefined
+      ): number => {
+        if (!extent || baseDomain.length < 2 || dimension <= 0) return axisTranslate;
+
+        const d0 = baseDomain[0] as unknown;
+        const d1 = baseDomain[1] as unknown;
+
+        // Skip domain extent constraint for categorical scales (range clamping handles boundaries)
+        if (typeof d0 === 'string') return axisTranslate;
+        const isDate = d0 instanceof Date;
+        const rawD0 = isDate ? (d0 as Date).getTime() : (d0 as number);
+        const rawD1 = isDate ? (d1 as Date).getTime() : (d1 as number);
+        const range = Math.abs(rawD1 - rawD0);
+        if (!isFinite(range) || range === 0) return axisTranslate;
+
+        // Normalize reversed domains by flipping the translate
+        const reversed = rawD0 > rawD1;
+        const normTranslate = reversed
+          ? dimension * axisScale - axisTranslate - dimension
+          : axisTranslate;
+        const numMin = Math.min(rawD0, rawD1);
+
+        const rawMinVal = resolveValue(extent.min, baseDomain[0]);
+        const rawMaxVal = resolveValue(extent.max, baseDomain[1]);
+        const minVal =
+          rawMinVal != null && rawMaxVal != null ? Math.min(rawMinVal, rawMaxVal) : rawMinVal;
+        const maxVal =
+          rawMinVal != null && rawMaxVal != null ? Math.max(rawMinVal, rawMaxVal) : rawMaxVal;
+
+        // Current visible domain from translate/scale
+        const f0 = -normTranslate / axisScale / dimension;
+        const f1 = (dimension - normTranslate) / axisScale / dimension;
+        let visMin = numMin + f0 * range;
+        let visMax = numMin + f1 * range;
+        const visRange = visMax - visMin;
+
+        // Enforce minRange (max zoom in limit)
+        if (extent.minRange != null && visRange < extent.minRange) {
+          const center = (visMin + visMax) / 2;
+          visMin = center - extent.minRange / 2;
+          visMax = center + extent.minRange / 2;
+        }
+
+        // Enforce domain min/max (pan boundaries)
+        if (minVal != null && visMin < minVal) {
+          visMin = minVal;
+          visMax =
+            visMin +
+            (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
+        }
+        if (maxVal != null && visMax > maxVal) {
+          visMax = maxVal;
+          visMin =
+            visMax -
+            (extent.minRange != null && visRange < extent.minRange ? extent.minRange : visRange);
+          if (minVal != null && visMin < minVal) visMin = minVal;
+        }
+
+        // Back-compute translate from corrected visible domain
+        const newF0 = (visMin - numMin) / range;
+        const result = -newF0 * axisScale * dimension;
+        return reversed ? dimension * axisScale - result - dimension : result;
+      };
 
-  const rGet = $derived(createGetter(r, rScale));
+      const transformAxis = transform?.axis ?? 'both';
+
+      if (de.x && (transformAxis === 'x' || transformAxis === 'both') && chartState.width > 0) {
+        // Also enforce minRange via scale clamping
+        if (de.x.minRange != null && chartState._baseXDomain.length >= 2) {
+          const d0 = chartState._baseXDomain[0] as unknown;
+          const d1 = chartState._baseXDomain[1] as unknown;
+          const isDate = d0 instanceof Date;
+          const numD0 = isDate ? (d0 as Date).getTime() : (d0 as number);
+          const numD1 = isDate ? (d1 as Date).getTime() : (d1 as number);
+          const fullRange = Math.abs(numD1 - numD0);
+          if (fullRange > 0) {
+            const maxScale = fullRange / de.x.minRange;
+            scale = Math.min(scale, maxScale);
+          }
+        }
+        translate = {
+          ...translate,
+          x: constrainAxis(translate.x, scale, chartState.width, chartState._baseXDomain, de.x),
+        };
+      }
 
-  const x1Scale = $derived(
-    x1ScaleProp && x1RangeProp
-      ? createScale(x1ScaleProp, x1Domain, x1RangeProp, {
-          xScale: xScale,
-          width,
-          height,
-        })
-      : null
-  );
+      if (de.y && (transformAxis === 'y' || transformAxis === 'both') && chartState.height > 0) {
+        if (de.y.minRange != null && chartState._baseYDomain.length >= 2) {
+          const d0 = chartState._baseYDomain[0] as unknown;
+          const d1 = chartState._baseYDomain[1] as unknown;
+          const isDate = d0 instanceof Date;
+          const numD0 = isDate ? (d0 as Date).getTime() : (d0 as number);
+          const numD1 = isDate ? (d1 as Date).getTime() : (d1 as number);
+          const fullRange = Math.abs(numD1 - numD0);
+          if (fullRange > 0) {
+            const maxScale = fullRange / de.y.minRange;
+            scale = Math.min(scale, maxScale);
+          }
+        }
+        translate = {
+          ...translate,
+          y: constrainAxis(translate.y, scale, chartState.height, chartState._baseYDomain, de.y),
+        };
+      }
 
-  const x1Get = $derived(createGetter(x1, x1Scale));
+      return { scale, translate };
+    };
+  });
 
-  const y1Scale = $derived(
-    y1ScaleProp && y1RangeProp
-      ? createScale(y1ScaleProp, y1Domain, y1RangeProp, {
-          yScale: yScale,
-          width,
-          height,
-        })
-      : null
+  // Whether this is a band scale domain transform (affects scaleExtent and constrain defaults)
+  const isBandDomainTransform = $derived(
+    transform?.mode === 'domain' &&
+      (((transform.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp)) ||
+        ((transform.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp)))
   );
 
-  const y1Get = $derived(createGetter(y1, y1Scale));
-
-  const cScale = $derived(
-    cRangeProp
-      ? createScale(cScaleProp ?? scaleOrdinal(), cDomain, cRangeProp, { width, height })
-      : null
-  );
+  // For projection mode, scaleExtent is relative to the initial fitted scale (like d3-zoom).
+  // e.g. [0.5, 8] means 0.5x to 8x of the fitted projection scale.
+  // For band scale domain transforms, enforce minimum of 1 (can't zoom out past initial view).
+  const resolvedScaleExtent = $derived.by(() => {
+    if (transform?.mode === 'projection' && transform?.scaleExtent && initialTransform) {
+      const baseScale = initialTransform.scale;
+      return [transform.scaleExtent[0] * baseScale, transform.scaleExtent[1] * baseScale] as [
+        number,
+        number,
+      ];
+    }
+    if (!isBandDomainTransform) return transform?.scaleExtent;
+    const userExtent = transform?.scaleExtent;
+    return [Math.max(1, userExtent?.[0] ?? 1), userExtent?.[1] ?? Infinity] as [number, number];
+  });
 
-  const cGet = $derived((d: any) => cScale?.(c(d)));
-
-  const xDomainPossiblyNice = $derived(xScale.domain());
-  const yDomainPossiblyNice = $derived(yScale.domain());
-  const zDomainPossiblyNice = $derived(zScale.domain());
-  const rDomainPossiblyNice = $derived(rScale.domain());
-
-  const xRange = $derived(getRange(xScale));
-  const yRange = $derived(getRange(yScale));
-  const zRange = $derived(getRange(zScale));
-  const rRange = $derived(getRange(rScale));
-
-  const aspectRatio = $derived(width / height);
-
-  const config: PreservedChartConfig<TData, XScale, YScale> = $derived({
-    x: xProp,
-    y: yProp,
-    z: zProp,
-    r: rProp,
-    c: cProp,
-    x1: x1Prop,
-    y1: y1Prop,
-    xDomain: _xDomain,
-    yDomain: _yDomain,
-    zDomain: zDomainProp,
-    rDomain: rDomainProp,
-    x1Domain: x1DomainProp,
-    y1Domain: y1DomainProp,
-    cDomain: cDomainProp,
-    xRange: _xRangeProp,
-    yRange: _yRangeProp,
-    zRange: zRangeProp,
-    rRange: rRangeProp,
-    cRange: cRangeProp,
-    x1Range: x1RangeProp,
-    y1Range: y1RangeProp,
+  // For projection mode with flat projections, translateExtent defines the pannable world bounds
+  // at the initial (1x) zoom level, similar to d3-zoom. The allowed translate range scales with
+  // the zoom ratio so you can pan more when zoomed in.
+  // For rotation mode (globes), translateExtent is passed through as degrees (yaw/pitch).
+  const resolvedTranslateExtent = $derived.by(() => {
+    if (transform?.mode === 'projection' && transform?.translateExtent) {
+      if (resolvedApply.rotation) {
+        // Rotation mode: values are degrees (yaw/pitch), pass through as-is
+        return transform.translateExtent;
+      }
+      // Flat projection translate mode: handled via projectionTranslateConstrain below
+      return undefined;
+    }
+    return transform?.translateExtent;
   });
 
-  let geoContext = $state<GeoContextValue>(null!);
-  let transformContext = $state<TransformContextValue>(null!);
-  let tooltipContext = $state<TooltipContextValue>(null!);
-  let brushContext = $state<BrushContextValue>(null!);
-
-  const context: ChartContextValue<TData, XScale, YScale> = {
-    get activeGetters() {
-      return activeGetters;
-    },
-    get config() {
-      return config;
-    },
-    get width() {
-      return width;
-    },
-    get height() {
-      return height;
-    },
-    get percentRange() {
-      return percentRange;
-    },
-    get aspectRatio() {
-      return aspectRatio;
-    },
-    get containerWidth() {
-      return containerWidth;
-    },
-    get containerHeight() {
-      return containerHeight;
-    },
-    get x() {
-      return x;
-    },
-    get y() {
-      return y;
-    },
-    get z() {
-      return z;
-    },
-    get r() {
-      return r;
-    },
-    get c() {
-      return c;
-    },
-    get x1() {
-      return x1;
-    },
-    get y1() {
-      return y1;
-    },
-    get data() {
-      return data;
-    },
-    get xNice() {
-      return xNice;
-    },
-    get yNice() {
-      return yNice;
-    },
-    get zNice() {
-      return zNice;
-    },
-    get rNice() {
-      return rNice;
-    },
-    get xDomainSort() {
-      return xDomainSort;
-    },
-    get yDomainSort() {
-      return yDomainSort;
-    },
-    get zDomainSort() {
-      return zDomainSort;
-    },
-    get rDomainSort() {
-      return rDomainSort;
-    },
-    get xReverse() {
-      return xReverse;
-    },
-    get yReverse() {
-      return yReverse;
-    },
-    get zReverse() {
-      return zReverse;
-    },
-    get rReverse() {
-      return rReverse;
-    },
-    get xPadding() {
-      return xPadding;
-    },
-    get yPadding() {
-      return yPadding;
-    },
-    get zPadding() {
-      return zPadding;
-    },
-    get rPadding() {
-      return rPadding;
-    },
-    get padding() {
-      return padding;
-    },
-    get flatData() {
-      return flatData;
-    },
-    get extents() {
-      return extents;
-    },
-    get xDomain() {
-      return xDomainPossiblyNice;
-    },
-    get yDomain() {
-      return yDomainPossiblyNice;
-    },
-    get zDomain() {
-      return zDomainPossiblyNice;
-    },
-    get rDomain() {
-      return rDomainPossiblyNice;
-    },
-    get cDomain() {
-      return cDomain;
-    },
-    get x1Domain() {
-      return x1Domain;
-    },
-    get y1Domain() {
-      return y1Domain;
-    },
-    get xRange() {
-      return xRange;
-    },
-    get yRange() {
-      return yRange;
-    },
-    get zRange() {
-      return zRange;
-    },
-    get rRange() {
-      return rRange;
-    },
-    get cRange() {
-      return cRangeProp;
-    },
-    get x1Range() {
-      return x1RangeProp;
-    },
-    get y1Range() {
-      return y1RangeProp;
-    },
-    get meta() {
-      return meta;
-    },
-    set meta(v: Record<string, any>) {
-      meta = v;
-    },
-    get xScale() {
-      return xScale;
-    },
-    get yScale() {
-      return yScale;
-    },
-    get zScale() {
-      return zScale;
-    },
-    get rScale() {
-      return rScale;
-    },
-    get yGet() {
-      return yGet;
-    },
-    get xGet() {
-      return xGet;
-    },
-    get zGet() {
-      return zGet;
-    },
-    get rGet() {
-      return rGet;
-    },
-    get cGet() {
-      return cGet;
-    },
-    get x1Get() {
-      return x1Get;
-    },
-    get y1Get() {
-      return y1Get;
-    },
-    get cScale() {
-      return cScale;
-    },
-    get x1Scale() {
-      return x1Scale;
-    },
-    get y1Scale() {
-      return y1Scale;
-    },
-    get radial() {
-      return radial;
-    },
-    get containerRef() {
-      return ref;
-    },
-    get geo() {
-      return geoContext;
-    },
-    get transform() {
-      return transformContext;
-    },
-    get tooltip() {
-      return tooltipContext;
-    },
-    get brush() {
-      return brushContext;
-    },
-  };
+  // For flat projection mode, implement d3-zoom-style translate constraining:
+  // The viewport (at current zoom) must overlap with the translateExtent world bounds.
+  // As zoom increases, the allowed translate range grows proportionally.
+  const projectionTranslateConstrain = $derived.by(() => {
+    if (
+      transform?.mode !== 'projection' ||
+      !transform?.translateExtent ||
+      !initialTransform ||
+      resolvedApply.rotation
+    ) {
+      return undefined;
+    }
 
-  contextProp = context;
+    const baseScale = initialTransform.scale;
+    const baseTranslate = initialTransform.translate;
+    const [[x0, y0], [x1, y1]] = transform.translateExtent;
 
-  setChartContext(context);
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      let { scale, translate } = t;
+      // Zoom ratio relative to fitted scale
+      const k = scale / baseScale;
 
-  $effect(() => {
-    isMounted = true;
-  });
+      // Allowed translate range scales with zoom ratio
+      translate = {
+        x: Math.max(baseTranslate.x + x0 * k, Math.min(baseTranslate.x + x1 * k, translate.x)),
+        y: Math.max(baseTranslate.y + y0 * k, Math.min(baseTranslate.y + y1 * k, translate.y)),
+      };
 
-  onMount(() => {
-    if (box && debug === true && (ssr === true || typeof window !== 'undefined')) {
-      logDebug({
-        data,
-        flatData: typeof flatData !== 'undefined' ? flatData : null,
-        boundingBox: box,
-        activeGetters,
-        x: xProp,
-        y: yProp,
-        z: zProp,
-        r: rProp,
-        xScale,
-        yScale,
-        zScale,
-        rScale,
-      });
-    }
+      return { scale, translate };
+    };
   });
 
-  $effect(() => {
-    if (!isMounted) return;
-    onResize?.({
-      width: context.width,
-      height: context.height,
-      containerWidth: context.containerWidth,
-      containerHeight: context.containerHeight,
-    });
+  // Default constrain for band scale domain transforms: prevent panning past data boundaries
+  const bandScaleConstrain = $derived.by(() => {
+    if (!isBandDomainTransform) return undefined;
+    const xIsBand = (transform!.axis ?? 'both') !== 'y' && isScaleBand(chartState._xScaleProp);
+    const yIsBand = (transform!.axis ?? 'both') !== 'x' && isScaleBand(chartState._yScaleProp);
+
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      let { scale, translate } = t;
+      let tx = translate.x;
+      let ty = translate.y;
+      if (xIsBand) {
+        // translate.x must be in [width * (1 - scale), 0]
+        tx = Math.max(chartState.width * (1 - scale), Math.min(0, tx));
+      }
+      if (yIsBand) {
+        ty = Math.max(chartState.height * (1 - scale), Math.min(0, ty));
+      }
+      return { scale, translate: { x: tx, y: ty } };
+    };
   });
 
-  const initialTransform = $derived(
-    geo?.applyTransform?.includes('translate') && geo?.fitGeojson && geo?.projection
-      ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
-      : undefined
-  );
-
-  const processTranslate = $derived.by(() => {
-    if (!geo) return undefined;
-    return (x: number, y: number, deltaX: number, deltaY: number) => {
-      if (geo.applyTransform?.includes('rotate') && geoContext?.projection) {
-        // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
-        // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
-        const projectionScale = geoContext.projection.scale() ?? 0;
-        const sensitivity = 75;
-        return {
-          x: x + deltaX * (sensitivity / projectionScale),
-          y: y + deltaY * (sensitivity / projectionScale) * -1,
-        };
-      } else {
-        // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
-        return { x: x + deltaX, y: y + deltaY };
+  // Compose user-provided constrain with domainExtent constrain and band scale constrain
+  const composedConstrain = $derived.by(() => {
+    const userConstrain = transform?.constrain;
+    const constrains = [
+      bandScaleConstrain,
+      domainExtentConstrain,
+      projectionTranslateConstrain,
+      userConstrain,
+    ].filter(Boolean) as Array<
+      (t: { scale: number; translate: { x: number; y: number } }) => {
+        scale: number;
+        translate: { x: number; y: number };
       }
+    >;
+    if (constrains.length === 0) return undefined;
+    if (constrains.length === 1) return constrains[0];
+    return (t: { scale: number; translate: { x: number; y: number } }) => {
+      return constrains.reduce((acc, fn) => fn(acc), t);
     };
   });
 
-  const brushProps = $derived(typeof brush === 'object' ? brush : { disabled: !brush });
-  const tooltipProps = $derived(typeof tooltip === 'object' ? tooltip : {});
+  const enhancedBrushProps = $derived.by(() => {
+    if (!brush) return { disabled: true };
+    const userProps = typeof brush === 'object' ? brush : {};
+
+    const userOnBrushEnd = userProps.onBrushEnd;
+    const zoomOnBrush = 'zoomOnBrush' in userProps ? userProps.zoomOnBrush : false;
+    const needsEnhancement = transform?.mode === 'domain' || zoomOnBrush;
+    if (!needsEnhancement) return userProps;
+
+    return {
+      ...userProps,
+      onBrushEnd: (e: { brush: BrushState }) => {
+        if (e.brush.active) {
+          if (transform?.mode === 'domain') {
+            chartState.zoomToBrush(e.brush, userProps.axis ?? 'x');
+          } else if (zoomOnBrush) {
+            const axis = userProps.axis ?? 'x';
+            if (axis === 'x' || axis === 'both') {
+              brushXDomain = expandBandBrushDomain(e.brush.x, chartState._baseXDomain);
+            }
+            if (axis === 'y' || axis === 'both') {
+              brushYDomain = expandBandBrushDomain(e.brush.y, chartState._baseYDomain);
+            }
+          }
+          userOnBrushEnd?.(e);
+          e.brush.reset();
+        } else {
+          // Brush was cleared (click-to-reset) — reset transform/domain too
+          if (transform?.mode === 'domain') {
+            chartState.transform.reset();
+          } else if (zoomOnBrush) {
+            brushXDomain = undefined;
+            brushYDomain = undefined;
+          }
+          userOnBrushEnd?.(e);
+        }
+      },
+    };
+  });
 </script>
 
 {#if ssr === true || typeof window !== 'undefined'}
   <div
     bind:this={ref}
     style:position
-    style:top={position === 'absolute' ? '0' : null}
-    style:right={position === 'absolute' ? '0' : null}
-    style:bottom={position === 'absolute' ? '0' : null}
-    style:left={position === 'absolute' ? '0' : null}
+    style:top={position === 'absolute' ? 0 : null}
+    style:right={position === 'absolute' ? 0 : null}
+    style:bottom={position === 'absolute' ? 0 : null}
+    style:left={position === 'absolute' ? 0 : null}
     style:pointer-events={pointerEvents === false ? 'none' : null}
-    bind:clientWidth={containerWidth}
-    bind:clientHeight={containerHeight}
-    class={layerClass('root-container')}
+    style:overflow={clip ? 'hidden' : null}
+    style:width={width ? `${width}px` : '100%'}
+    style:height={height ? `${height}px` : '100%'}
+    bind:clientWidth={chartState._containerWidth}
+    bind:clientHeight={chartState._containerHeight}
+    class={['lc-root-container', className]}
+    {...restProps}
   >
-    {#key isMounted}
+    {#key chartState.isMounted}
       <!-- svelte-ignore ownership_invalid_binding -->
+      {@const {
+        domainExtent: _de,
+        constrain: _uc,
+        apply: _apply,
+        scaleExtent: _se,
+        translateExtent: _te,
+        ...transformProps
+      } = transform ?? {}}
       <TransformContext
-        bind:transformContext
-        mode={(transform?.mode ?? geo?.applyTransform?.length) ? 'manual' : 'none'}
-        initialTranslate={initialTransform?.translate}
-        initialScale={initialTransform?.scale}
+        bind:state={chartState.transformState}
+        mode={transform?.mode ?? 'none'}
+        initialTranslate={resolvedApply.translate ? initialTransform?.translate : undefined}
+        initialScale={resolvedApply.scale ? initialTransform?.scale : undefined}
         {processTranslate}
-        {...transform}
+        {...transformProps}
+        scaleExtent={resolvedScaleExtent}
+        translateExtent={resolvedTranslateExtent}
+        constrain={composedConstrain}
+        disablePointer={brush === true ||
+          (typeof brush === 'object' && !brush.disabled) ||
+          transform?.disablePointer}
         {ondragstart}
         {onTransform}
         {ondragend}
       >
-        <!-- svelte-ignore ownership_invalid_binding -->
-        <GeoContext {...geo} bind:geoContext>
-          <!-- svelte-ignore ownership_invalid_binding -->
-          <BrushContext {...brushProps} bind:brushContext>
+        {#if brush}
+          {#await import('./BrushContext.svelte')}
+            <!--
+              Pending: render the chart subtree immediately so the chart paints
+              before the BrushContext chunk arrives (avoids a perceived hang on
+              slow networks). The subtree re-mounts once `{:then}` resolves —
+              acceptable because it happens before user interaction, brush is
+              an opt-in feature, and any chart state at that point is empty.
+            -->
             <!-- svelte-ignore ownership_invalid_binding -->
-            <TooltipContext {...tooltipProps} bind:tooltipContext>
-              {@render _children?.({
-                context,
-              })}
+            <TooltipContext
+              onclick={onTooltipClick}
+              {...getObjectOrNull(tooltipContext)}
+              bind:state={chartState.tooltipState}
+            >
+              <ChartChildren {children} {tooltipContext} {...restProps} />
             </TooltipContext>
-          </BrushContext>
-        </GeoContext>
+          {:then { default: BrushContext }}
+            <!-- svelte-ignore ownership_invalid_binding -->
+            <BrushContext {...enhancedBrushProps} bind:state={chartState.brushState}>
+              <!-- svelte-ignore ownership_invalid_binding -->
+              <TooltipContext
+                onclick={onTooltipClick}
+                {...getObjectOrNull(tooltipContext)}
+                bind:state={chartState.tooltipState}
+              >
+                <ChartChildren {children} {tooltipContext} {...restProps} />
+              </TooltipContext>
+            </BrushContext>
+          {/await}
+        {:else}
+          <!-- svelte-ignore ownership_invalid_binding -->
+          <TooltipContext
+            onclick={onTooltipClick}
+            {...getObjectOrNull(tooltipContext)}
+            bind:state={chartState.tooltipState}
+          >
+            <ChartChildren {children} {tooltipContext} {...restProps} />
+          </TooltipContext>
+        {/if}
       </TransformContext>
     {/key}
   </div>
@@ -1381,8 +1198,4 @@
   .lc-root-container :global(*) {
     box-sizing: border-box;
   }
-  .lc-root-container {
-    width: 100%;
-    height: 100%;
-  }
 </style>