layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/Chart.svelte

@@ -1,497 +1,1388 @@
-<script lang="ts" context="module">
-  import { getContext, setContext } from 'svelte';
-
-  export const renderContextKey = Symbol();
-
-  type RenderContext = 'canvas' | 'svg' | 'html';
-
-  /** Get render context.  Useful to conditionally render components based on the render context. */
-  export function getRenderContext() {
-    return getContext<RenderContext>(renderContextKey);
+<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 {
+    AxisKey,
+    BaseRange,
+    DataType,
+    Extents,
+    Nice,
+    Padding,
+    PaddingArray,
+    XRangeWithScale,
+    YRangeWithScale,
+  } from '../utils/types.js';
+  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';
+
+  const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
+
+  export type ChartResizeDetail = {
+    width: number;
+    height: number;
+    containerWidth: number;
+    containerHeight: number;
+  };
+
+  export type PreservedChartConfig<
+    T,
+    XScale extends AnyScale = AnyScale,
+    YScale extends AnyScale = AnyScale,
+  > = Pick<
+    ChartPropsWithoutHTML<T, XScale, YScale>,
+    | 'x'
+    | 'y'
+    | 'z'
+    | 'r'
+    | 'c'
+    | 'x1'
+    | 'y1'
+    | 'xRange'
+    | 'yRange'
+    | 'cDomain'
+    | 'zDomain'
+    | 'xDomain'
+    | 'yDomain'
+    | 'rDomain'
+    | 'x1Domain'
+    | 'y1Domain'
+    | 'zRange'
+    | 'rRange'
+    | 'cRange'
+    | 'x1Range'
+    | '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.
+     * The default is `'default'` which is any chart being composed
+     * that isn't a "simplified chart".
+     */
+    type:
+      | 'default'
+      | 'simplified-area'
+      | 'simplified-bar'
+      | 'simplified-line'
+      | 'simplified-pie'
+      | '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>);
   }
 
-  /** Set by Canavs, Html, or Svg render/layout component */
-  export function setRenderContext(context: RenderContext) {
-    setContext(renderContextKey, context);
+  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);
   }
-</script>
 
-<script lang="ts" generics="TData">
-  import { onMount, type ComponentProps } from 'svelte';
-  import { LayerCake } from 'layercake';
-  import type { HierarchyNode } from 'd3-hierarchy';
-  import type { SankeyGraph } from 'd3-sankey';
-  import { max, min } from 'd3-array';
+  export type RenderContext = 'svg' | 'canvas' | 'html';
 
-  import ChartContext from './ChartContext.svelte';
-  import GeoContext from './GeoContext.svelte';
-  import TooltipContext from './tooltip/TooltipContext.svelte';
-  import TransformContext from './TransformContext.svelte';
-  import BrushContext from './BrushContext.svelte';
+  const _RenderContext = new Context<RenderContext>('RenderContext');
 
-  import { accessor, type Accessor } from '../utils/common.js';
-  import { isScaleBand, type AnyScale, type DomainType } from '../utils/scales.js';
-  import { geoFitObjectTransform } from '../utils/geo.js';
+  export function getRenderContext(): RenderContext {
+    return _RenderContext.get();
+  }
 
-  type LayerCakeProps = ComponentProps<LayerCake>;
+  export function setRenderContext(context: RenderContext): RenderContext {
+    return _RenderContext.set(context);
+  }
 
-  interface $$Props {
-    /** Whether this chart should be rendered server side. @default false */
+  export type ChartPropsWithoutHTML<
+    T,
+    XScale extends AnyScale = AnyScale,
+    YScale extends AnyScale = AnyScale,
+  > = {
+    /**
+     * Whether this chart should be rendered server side
+     *
+     * @default false
+     */
     ssr?: boolean;
 
-    /** Whether to allow pointer events via CSS. Set this to `false` to set `pointer-events: none;` on all components, disabling all mouse interaction. @default true */
+    /**
+     * Whether to allow pointer events via CSS.
+     * Set this to `false` to set `pointer-events: none;` on all components, disabling
+     * all mouse interactions.
+     *
+     * @default true
+     */
     pointerEvents?: boolean;
 
-    /** Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes. @default 'relative' */
+    /**
+     * Determine the positioning of the wrapper div.
+     * Set this to `'absolute'` when you want to stack layers.
+     *
+     * @default 'relative'
+     */
     position?: string;
 
-    /** If `true`, set all scale ranges to `[0, 100]`. Ranges reversed via `xReverse`, `yReverse`, `zReverse` or `rReverse` props will continue to be reversed as usual. @default false */
+    /**
+     * If `true`, set all scale ranges to `[0, 100]`.
+     * Ranges reversed via `xReverse`, `yReverse`, or `rReverse` props will
+     * continue to be reversed as usual.
+     * @default false
+     */
     percentRange?: boolean;
 
-    /** Override the automated width.  */
-    width?: number;
-    /** Override the automated height.  */
-    height?: number;
-
-    /** The bound container width. */
-    containerWidth?: number;
-    /**The bound container height. */
-    containerHeight?: number;
-
-    /**	The .layercake-container `<div>` tag. Useful for bindings. */
-    element?: HTMLDivElement;
-
-    /** If `data` is not a flat array of objects and you want to use any of the scales, set a flat version of the data via the `flatData` prop. */
-    data?: typeof data;
-
-    /** A flat version of data. */
-    flatData?: any[];
-
-    /** The x accessor. The key in each row of data that corresponds to the x-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    x?: Accessor<TData>;
-    /** The y accessor. The key in each row of data that corresponds to the y-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    y?: Accessor<TData>;
-    /** The z accessor. The key in each row of data that corresponds to the z-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    z?: Accessor<TData>;
-    /** The r accessor. The key in each row of data that corresponds to the r-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    r?: Accessor<TData>;
-    /** The x1 accessor. The key in each row of data that corresponds to the x1-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    x1?: Accessor<TData>;
-    /** The y1 accessor. The key in each row of data that corresponds to the y1-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-    y1?: Accessor<TData>;
-    /** The c (color) accessor. The key in each row of data that corresponds to the color. This can be a string or an accessor function. This property gets converted to a function when you access it through the context. */
-    c?: Accessor<TData>;
-
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+    /**
+     * A bindable reference to the root container element.
+     */
+    ref?: HTMLElement;
+
+    /**
+     * If `data` is not a flat array of objects and you want to use any of the scales, set a flat
+     * version of the data via the `flatData` prop.
+     */
+    data?: T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>;
+
+    /**
+     * A flat version of data.
+     */
+    flatData?: T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>;
+
+    /**
+     * The x accessor. The key in each row of data that corresponds to the x-field. This can be a
+     * string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    x?: Accessor<T>;
+
+    /**
+     * The y accessor. The key in each row of data that corresponds to the y-field. This can be a
+     * string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    y?: Accessor<T>;
+
+    /**
+     * The z accessor. The key in each row of data that corresponds to the z-field. This can be a
+     * string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    z?: Accessor<T>;
+
+    /**
+     * The r accessor. The key in each row of data that corresponds to the r-field. This can be a
+     * string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    r?: Accessor<T>;
+
+    /**
+     * The x1 accessor. The key in each row of data that corresponds to the x1-field. This can be a
+     * string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    x1?: Accessor<T>;
+
+    /**
+     * The y1 accessor. The key in each row of data that corresponds to the y1-field. This can be
+     * a string, an accessor function, a number or an array of any combination of those types. This
+     * property gets converted to a function when you access it through the context.
+     */
+    y1?: Accessor<T>;
+
+    /**
+     * The c (color) accessor. The key in each row of data that corresponds to the color. This can
+     * be a string or an accessor function. This property gets converted to a function when you
+     * access it through the context.
+     */
+    c?: Accessor<T>;
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     xDomain?: DomainType;
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`.  Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     yDomain?: DomainType;
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     zDomain?: DomainType;
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     rDomain?: DomainType;
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     x1Domain?: DomainType;
-    /** Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
+
+    /**
+     * Set a min or max. For linear scales, if you want to inherit the value from the data's
+     * extent, set that value to `null`. This value can also be an array because sometimes your
+     * scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of
+     * discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales),
+     * useful for color series. Set it to a function that receives the computed domain and lets you
+     * return a modified domain, useful for sorting values.
+     */
     y1Domain?: DomainType;
-    /** Set the list of color values. */
+
+    /**
+     * Set the list of color values.
+     */
     cDomain?: DomainType;
 
-    /** Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. @default false */
-    xNice?: boolean | number;
-    /** Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. @default false */
-    yNice?: boolean | number;
-    /**  Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. @default false */
-    zNice?: boolean | number;
-    /**  Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. @default false */
-    rNice?: boolean | number;
-
-    /** Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-    xPadding?: [number, number];
-    /** Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-    yPadding?: [number, number];
-    /** Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-    zPadding?: [number, number];
-    /** Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-    rPadding?: [number, number];
-
-    /** 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 */
-    xScale?: AnyScale;
-    /** 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 */
-    yScale?: AnyScale;
-    /** 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 */
+    /**
+     * Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain.
+     * @default false
+     */
+    xNice?: Nice;
+
+    /**
+     * Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain.
+     * @default false
+     */
+    yNice?: Nice;
+
+    /**
+     * Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain.
+     * @default false
+     */
+    zNice?: Nice;
+
+    /**
+     * Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain.
+     * @default false
+     */
+    rNice?: Nice;
+
+    /**
+     * Assign a pixel value to add to the min or max of the scale. This will increase the scales
+     * domain by the scale unit equivalent of the provided pixels.
+     */
+    xPadding?: PaddingArray;
+    /**
+     * Assign a pixel value to add to the min or max of the scale. This will increase the scales
+     * domain by the scale unit equivalent of the provided pixels.
+     */
+    yPadding?: PaddingArray;
+    /**
+     * Assign a pixel value to add to the min or max of the scale. This will increase the scales
+     * domain by the scale unit equivalent of the provided pixels.
+     */
+    zPadding?: PaddingArray;
+    /**
+     * Assign a pixel value to add to the min or max of the scale. This will increase the scales
+     * domain by the scale unit equivalent of the provided pixels.
+     */
+    rPadding?: PaddingArray;
+
+    /**
+     * 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
+     */
+    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
+     */
+    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
+     */
     zScale?: AnyScale;
-    /** 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 scaleSqrt */
+
+    /**
+     * 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 scaleSqrt
+     */
     rScale?: AnyScale;
-    /** 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 */
+
+    /**
+     * 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
+     */
     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 */
+
+    /**
+     * 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
+     */
     y1Scale?: AnyScale;
-    /** The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleOrdinal */
+
+    /**
+     * The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale
+     * if you want to override the default or you want to extra options.
+     * @default scaleOrdinal
+     */
     cScale?: AnyScale;
 
-    /** Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    xRange?:
-      | number[]
-      | string[]
-      | ((args: { width: number; height: number }) => number[] | string[]);
-    /** Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    yRange?:
-      | number[]
-      | string[]
-      | ((args: { width: number; height: number }) => number[] | string[]);
-    /** Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    zRange?:
-      | number[]
-      | string[]
-      | ((args: { width: number; height: number }) => number[] | string[]);
-    /** Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    rRange?:
-      | number[]
-      | string[]
-      | ((args: { width: number; height: number }) => number[] | string[]);
-    /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    x1Range?:
-      | number[]
-      | string[]
-      | ((args: { xScale: AnyScale; width: number; height: number }) => number[] | string[]);
-    /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-    y1Range?:
-      | number[]
-      | string[]
-      | ((args: { yScale: AnyScale; width: number; height: number }) => number[] | string[]);
-    /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
+    /** Override the default x range of `[0, width]` by setting an array or function with argument
+     * `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can
+     * also be a list of numbers or strings for scales with discrete ranges like
+     * [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    xRange?: BaseRange;
+
+    /**
+     * Override the default y range of `[0, height]` by setting an array or function with argument
+     * `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can
+     * also be a list of numbers or strings for scales with discrete ranges like
+     * [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    yRange?: BaseRange;
+
+    /** Override the default z range of `[0, width]` by setting an array or function with argument
+     * `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can
+     * also be a list of numbers or strings for scales with discrete ranges like
+     * [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    zRange?: BaseRange;
+
+    /** Override the default r range of `[1, 25]` by setting an array or function with argument
+     * `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can
+     * also be a list of numbers or strings for scales with discrete ranges like
+     * [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    rRange?: BaseRange;
+
+    /**
+     * Set the x1 range by setting an array or function with argument `({ xScale, width, height})`
+     * that returns an array. This can also be a list of numbers or strings for scales with
+     * discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    x1Range?: XRangeWithScale<XScale>;
+
+    /**
+     * Set the y1 range by setting an array or function with argument `({ yScale, width, height})`
+     * that returns an array. This can also be a list of numbers or strings for scales with
+     * discrete ranges like [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
+    y1Range?: YRangeWithScale<YScale>;
+
+    /**
+     * Override the default y1 range of `[0, width]` by setting an array or function with argument
+     * `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`.
+     * This can also be a list of numbers or strings for scales with discrete ranges like
+     * [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+     * [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+     */
     cRange?: string[] | readonly string[];
 
-    /** Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. @default false */
+    /**
+     * Reverse the default x range. By default this is `false` and the range is `[0, width]`.
+     * Ignored if you set the xRange prop.
+     * @default false
+     */
     xReverse?: boolean;
-    /** Reverse the default y range. By default this is `true` and the range is `[height, 0]` unless using an ordinal scale with a `.bandwidth` method for `yScale`. Ignored if you set the `yRange` prop. @default true */
+
+    /**
+     * Reverse the default y range. By default this is `true` and the range is `[height, 0]` unless
+     * using an ordinal scale with a `.bandwidth` method for `yScale`.
+     * Ignored if you set the `yRange` prop.
+     * @default true
+     */
     yReverse?: boolean;
-    /** Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. @default false */
+
+    /**
+     * Reverse the default z range. By default this is `false` and the range is `[0, width]`.
+     * Ignored if you set the zRange prop.
+     * @default false
+     */
     zReverse?: boolean;
-    /** Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. @default false */
+
+    /**
+     * Reverse the default r range. By default this is `false` and the range is `[1, 25]`.
+     * Ignored if you set the rRange prop.
+     * @default false
+     */
     rReverse?: boolean;
 
-    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    /**
+     * ***Only used when scale is ordinal.***
+     * Set whether the calculated unique items come back sorted.
+     *
+     * @default false
+     */
     xDomainSort?: boolean;
-    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+
+    /**
+     * ***Only used when scale is ordinal.***
+     * Set whether the calculated unique items come back sorted.
+     *
+     * @default false
+     */
     yDomainSort?: boolean;
-    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+
+    /**
+     * ***Only used when scale is ordinal.***
+     * Set whether the calculated unique items come back sorted.
+     *
+     * @default false
+     */
     zDomainSort?: boolean;
-    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
-    rDomainSort?: boolean;
 
-    /** The amount of padding to put around your chart. It operates like CSS box-sizing: border-box; where values are subtracted from the parent container's width and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563). */
-    padding?: { top?: Number; right?: Number; bottom?: Number; left?: Number };
+    /**
+     * ***Only used when scale is ordinal.***
+     * Set whether the calculated unique items come back sorted.
+     *
+     * @default false
+     */
+    rDomainSort?: boolean;
 
-    /** Manually set the extents of the x, y or r scale as a two-dimensional array of the min and max you want. Setting values here will skip any dynamic extent calculation of the data for that dimension. */
+    /**
+     * The amount of padding to put around your chart. It operates like CSS
+     * box-sizing: border-box; where values are subtracted from the parent container's width
+     * and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563).
+     *
+     * If a number is passed, it will be applied to all sides.
+     */
+    padding?: { top?: number; right?: number; bottom?: number; left?: number } | number;
+
+    /**
+     * Manually set the extents of the x, y or r scale as a two-dimensional array of the min and
+     * max you want. Setting values here will skip any dynamic extent calculation of the data for
+     * that dimension.
+     */
     extents?: {
-      x?: [min: Number, max: Number];
-      y?: [min: Number, max: Number];
-      r?: [min: Number, max: Number];
-      z?: [min: Number, max: Number];
+      x?: [min: number, max: number];
+      y?: [min: number, max: number];
+      r?: [min: number, max: number];
+      z?: [min: number, max: number];
     };
 
-    /** Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
-    custom?: Record<string, any>;
-
-    /** Enable debug printing to the console. Useful to inspect your scales and dimensions. */
+    /**
+     * Any extra configuration values you want available on the Chart context.
+     * This could be useful for color lookups or additional constants.
+     */
+    meta?: Record<string, any>;
+
+    /**
+     * Enable debug printing to the console.
+     * Useful to inspect your scales and dimensions.
+     *
+     * @default false
+     */
     debug?: boolean;
 
-    /** Show warnings in the console. */
+    /**
+     * Show warnings in the console.
+     *
+     * @default true
+     */
     verbose?: boolean;
 
-    /** x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values */
-    xBaseline?: typeof xBaseline;
-
-    /** y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values */
-    yBaseline?: typeof xBaseline;
+    /**
+     * x value guaranteed to be visible in xDomain.  Useful with optional negative values since
+     * `xDomain={[0, null]}` would ignore negative values
+     *
+     * @default null
+     */
+    xBaseline?: number | null;
+
+    /**
+     * y value guaranteed to be visible in yDomain.  Useful with optional negative values since
+     * `yDomain={[0, null]}` would ignore negative values
+     *
+     * @default null
+     */
+    yBaseline?: number | null;
 
     /* Props passed to ChartContext */
-    /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-    radial?: typeof radial;
-
-    /** Props passed to GeoContext */
-    geo?: typeof geo;
-
-    /** Exposed via bind: to support `bind:geoProjection` for external access */
-    geoProjection?: typeof geoProjection;
-
-    /** Props passed to TooltipContext */
-    tooltip?: typeof tooltip;
-
-    /** Exposed via bind: to support `bind:tooltipContext` for external access (ex. `tooltipContext.data) */
-    tooltipContext?: typeof tooltipContext;
-
-    /** Props passed to TransformContext */
-    transform?: typeof transform;
 
-    /** Expose to support `bind:transformContext` for imperative control (`transformContext.translate(...)`) */
-    transformContext?: typeof transformContext;
+    /**
+     * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.
+     * Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`)
+     * to change the origin
+     *
+     * @default false
+     */
+    radial?: boolean;
+
+    children?: Snippet<[{ context: ChartContextValue<T, XScale, YScale> }]>;
+
+    /**
+     * A bindable reference to the chart context.
+     */
+    context?: ChartContextValue<T, XScale, YScale>;
+
+    /**
+     * Props passed to GeoContext
+     */
+    geo?: Partial<ComponentProps<typeof GeoContext>>;
+
+    /**
+     * Props passed to the `TooltipContext` component.
+     */
+    tooltip?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+
+    /**
+     * Props passed to TransformContext
+     */
+    transform?: Partial<ComponentProps<typeof TransformContext>>;
 
     /** Props passed to BrushContext */
-    brush?: typeof brush;
+    brush?: Partial<ComponentProps<typeof BrushContext>> | boolean;
 
-    /** Exposed via bind: to support `bind:brushContext` for external access (ex. `brushContext.xDomain) */
-    brushContext?: typeof brushContext;
-
-    // ChartContext callback events
-    onresize?: typeof onresize;
+    /**
+     * A callback function that is called when the chart is resized.
+     */
+    onResize?: (e: ChartResizeDetail) => void;
 
     // TransformContext callback events
-    ondragstart?: typeof ondragstart;
-    ondragend?: typeof ondragend;
-    ontransform?: typeof ontransform;
-  }
+    ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
+    ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
+    onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
+  };
+</script>
 
-  export let data: TData[] | HierarchyNode<TData> | SankeyGraph<any, any> = [];
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  let {
+    ssr = false,
+    pointerEvents = true,
+    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,
+    geo,
+    context: contextProp = $bindable(),
+    tooltip,
+    transform,
+    onTransform,
+    ondragend,
+    ondragstart,
+    brush,
+  }: ChartPropsWithoutHTML<TData, XScale, YScale> = $props();
+
+  let ref = $state<HTMLElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  export let x: Accessor<TData> = undefined;
-  export let xRange: $$Props['xRange'] = undefined;
+  const xRangeProp = $derived(_xRangeProp ? _xRangeProp : radial ? [0, 2 * Math.PI] : undefined);
 
-  export let y: Accessor<TData> = undefined;
-  export let yScale: AnyScale | undefined = undefined;
-  export let yRange: $$Props['yRange'] = undefined;
+  let containerWidth = $state(100);
+  let containerHeight = $state(100);
 
-  export let x1: $$Props['x1'] = undefined;
-  export let x1Scale: $$Props['x1Scale'] = undefined;
-  export let x1Domain: $$Props['x1Domain'] = undefined;
-  export let x1Range: $$Props['x1Range'] = undefined;
+  const logDebug = useDebounce(printDebug, 200);
 
-  export let y1: $$Props['y1'] = undefined;
-  export let y1Scale: $$Props['y1Scale'] = undefined;
-  export let y1Domain: $$Props['y1Domain'] = undefined;
-  export let y1Range: $$Props['y1Range'] = undefined;
+  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])];
+    }
+  });
 
-  export let c: $$Props['c'] = undefined;
-  export let cScale: $$Props['cScale'] = undefined;
-  export let cDomain: $$Props['cDomain'] = undefined;
-  export let cRange: $$Props['cRange'] = undefined;
+  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])];
+    }
+  });
 
-  /**
-   * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
-   */
-  export let xBaseline: number | null = null;
+  const yRangeProp = $derived(
+    _yRangeProp ?? (radial ? ({ height }: { height: number }) => [0, height / 2] : undefined)
+  );
 
-  let xDomain: [number, number] | undefined = undefined;
-  $: if (xBaseline != null && Array.isArray(data)) {
-    const xValues = data.flatMap(accessor(x));
-    xDomain = [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
-  }
+  const yReverse = $derived(yScaleProp ? !isScaleBand(yScaleProp) : true);
 
-  /**
-   * y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values
-   */
-  export let yBaseline: number | null = null;
+  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));
 
-  let yDomain: [number, number] | undefined = undefined;
-  $: if (yBaseline != null && Array.isArray(data)) {
-    const yValues = data.flatMap(accessor(y));
-    yDomain = [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
-  }
+  const flatData = $derived(flatDataProp ?? data) as TData[];
 
-  /**
-   * Reverse the default y range ([0, height] becomes [height, 0]). By default this is `true` unless using scaleBand y scale.
-   * see: https://layercake.graphics/guide#yreverse
-   * see: https://github.com/mhkeller/layercake/issues/83
-   */
-  $: yReverse = yScale ? !isScaleBand(yScale) : true;
+  const filteredExtents = $derived(filterObject($state.snapshot(extentsProp)));
 
-  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-  export let radial = false;
+  const activeGetters = $derived({
+    x,
+    y,
+    z,
+    r,
+  });
 
-  /** Props passed to GeoContext */
-  export let geo: Partial<ComponentProps<GeoContext>> | undefined = undefined;
+  const padding = $derived.by(() => {
+    if (typeof paddingProp === 'number') {
+      return {
+        ...defaultPadding,
+        top: paddingProp,
+        right: paddingProp,
+        bottom: paddingProp,
+        left: paddingProp,
+      };
+    }
+    return { ...defaultPadding, ...paddingProp };
+  });
 
-  /** Expose bound geo projection context */
-  export let geoProjection: ComponentProps<GeoContext>['geo'] = undefined;
+  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?'
+        );
+      }
+    }
+
+    return {
+      top,
+      left,
+      bottom,
+      right,
+      width,
+      height,
+    };
+  });
 
-  /** Props passed to TooltipContext */
-  export let tooltip: Partial<ComponentProps<TooltipContext>> | boolean | undefined = undefined;
+  const width = $derived(box.width);
+  const height = $derived(box.height);
 
-  /** Expose bound tooltip context */
-  export let tooltipContext: ComponentProps<TooltipContext>['tooltip'] = undefined;
+  interface ScaleEntry {
+    scale: AnyScale;
+    sort?: boolean;
+  }
 
-  /** Props passed to TransformContext */
-  export let transform: Partial<ComponentProps<TransformContext>> | undefined = undefined;
-  // @ts-expect-error will only be undefined until bind:transformContext runs
-  export let transformContext: TransformContext = undefined;
+  /* --------------------------------------------
+   * 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 },
+    };
 
-  /** Props passed to BrushContext */
-  export let brush: Partial<ComponentProps<BrushContext>> | boolean | undefined = undefined;
+    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 {};
+    }
+  });
 
-  /** Expose bound brush context */
-  export let brushContext: ComponentProps<BrushContext>['brush'] = 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,
+    })
+  );
+
+  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,
+    })
+  );
+
+  const rGet = $derived(createGetter(r, rScale));
+
+  const x1Scale = $derived(
+    x1ScaleProp && x1RangeProp
+      ? createScale(x1ScaleProp, x1Domain, x1RangeProp, {
+          xScale: xScale,
+          width,
+          height,
+        })
+      : null
+  );
+
+  const x1Get = $derived(createGetter(x1, x1Scale));
+
+  const y1Scale = $derived(
+    y1ScaleProp && y1RangeProp
+      ? createScale(y1ScaleProp, y1Domain, y1RangeProp, {
+          yScale: yScale,
+          width,
+          height,
+        })
+      : null
+  );
+
+  const y1Get = $derived(createGetter(y1, y1Scale));
+
+  const cScale = $derived(
+    cRangeProp
+      ? createScale(cScaleProp ?? scaleOrdinal(), cDomain, cRangeProp, { width, height })
+      : null
+  );
+
+  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,
+  });
 
-  export let onresize: ComponentProps<ChartContext<TData>>['onresize'] = undefined;
-  export let ondragstart: ComponentProps<TransformContext>['ondragstart'] = undefined;
-  export let ondragend: ComponentProps<TransformContext>['ondragend'] = undefined;
-  export let ontransform: ComponentProps<TransformContext>['ontransform'] = undefined;
+  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;
+    },
+  };
+
+  contextProp = context;
+
+  setChartContext(context);
+
+  $effect(() => {
+    isMounted = true;
+  });
 
-  // Track when mounted since LayerCake initializes width/height with `100` until bound `clientWidth`/`clientWidth` can run
-  // Useful to key/remount TransformContext with correct `initialTranslate` / `initialScale` values
-  let isMounted = false;
   onMount(() => {
-    isMounted = true;
+    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,
+      });
+    }
   });
 
-  // TODO: Hacks until LayerCake has better typings (`Accessor<TData>`)
-  $: _x = x as LayerCakeProps['x'];
-  $: _y = y as LayerCakeProps['y'];
-  $: _yRange =
-    yRange ??
-    ((radial
-      ? ({ height }: { height: number }) => [0, height / 2]
-      : undefined) as LayerCakeProps['yRange']);
-</script>
+  $effect(() => {
+    if (!isMounted) return;
+    onResize?.({
+      width: context.width,
+      height: context.height,
+      containerWidth: context.containerWidth,
+      containerHeight: context.containerHeight,
+    });
+  });
 
-<!-- Remove domain sorting by default: https://github.com/mhkeller/layercake/issues/147  -->
-<LayerCake
-  {data}
-  x={_x}
-  {xDomain}
-  xRange={xRange ?? (radial ? [0, 2 * Math.PI] : undefined)}
-  y={_y}
-  {yScale}
-  {yDomain}
-  yRange={_yRange}
-  {yReverse}
-  xDomainSort={false}
-  yDomainSort={false}
-  zDomainSort={false}
-  rDomainSort={false}
-  {...$$restProps}
-  let:aspectRatio
-  let:containerHeight
-  let:containerWidth
-  let:height
-  let:width
-  let:element
-  let:x
-  let:xScale
-  let:xGet
-  let:y
-  let:yScale
-  let:yGet
-  let:z
-  let:zScale
-  let:zGet
-  let:r
-  let:rScale
-  let:rGet
-  let:padding
->
-  <!-- Apply `fitGeojson` using TransformContext instead of GeoContext if `applyTransform` is used -->
-  {@const initialTransform =
+  const initialTransform = $derived(
     geo?.applyTransform?.includes('translate') && geo?.fitGeojson && geo?.projection
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
-      : undefined}
-
-  <ChartContext
-    {data}
-    {radial}
-    {x1}
-    {x1Scale}
-    {x1Domain}
-    {x1Range}
-    {y1}
-    {y1Scale}
-    {y1Domain}
-    {y1Range}
-    {c}
-    {cScale}
-    {cDomain}
-    {cRange}
-    let:data
-    let:flatData
-    let:config
-    let:x1
-    let:x1Scale
-    let:x1Get
-    let:y1
-    let:y1Scale
-    let:y1Get
-    let:c
-    let:cScale
-    let:cGet
-    {onresize}
+      : 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 };
+      }
+    };
+  });
+
+  const brushProps = $derived(typeof brush === 'object' ? brush : { disabled: !brush });
+  const tooltipProps = $derived(typeof tooltip === 'object' ? tooltip : {});
+</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:pointer-events={pointerEvents === false ? 'none' : null}
+    bind:clientWidth={containerWidth}
+    bind:clientHeight={containerHeight}
+    class={layerClass('root-container')}
   >
     {#key isMounted}
+      <!-- svelte-ignore ownership_invalid_binding -->
       <TransformContext
-        bind:this={transformContext}
+        bind:transformContext
         mode={(transform?.mode ?? geo?.applyTransform?.length) ? 'manual' : 'none'}
         initialTranslate={initialTransform?.translate}
         initialScale={initialTransform?.scale}
-        processTranslate={geo
-          ? (x, y, deltaX, deltaY) => {
-              if (geo.applyTransform?.includes('rotate')) {
-                // 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
-                // @ts-expect-error
-                const projectionScale = $geoProjection.scale();
-                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 };
-              }
-            }
-          : undefined}
+        {processTranslate}
         {...transform}
-        let:transform={_transform}
         {ondragstart}
-        {ontransform}
+        {onTransform}
         {ondragend}
       >
-        <GeoContext {...geo} bind:geo={geoProjection} let:projection>
-          {@const brushProps = typeof brush === 'object' ? brush : { disabled: !brush }}
-          <BrushContext {...brushProps} bind:brush={brushContext} let:brush>
-            {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-            <TooltipContext {...tooltipProps} bind:tooltip={tooltipContext} let:tooltip>
-              <slot
-                {aspectRatio}
-                {containerHeight}
-                {containerWidth}
-                {height}
-                {width}
-                {element}
-                {projection}
-                transform={_transform}
-                {tooltip}
-                {brush}
-                {x}
-                {xScale}
-                {xGet}
-                {y}
-                {yScale}
-                {yGet}
-                {z}
-                {zScale}
-                {zGet}
-                {r}
-                {rScale}
-                {rGet}
-                {x1}
-                {x1Scale}
-                {x1Get}
-                {y1}
-                {y1Scale}
-                {y1Get}
-                {c}
-                {cScale}
-                {cGet}
-                {padding}
-                {data}
-                {flatData}
-                {config}
-              />
+        <!-- svelte-ignore ownership_invalid_binding -->
+        <GeoContext {...geo} bind:geoContext>
+          <!-- svelte-ignore ownership_invalid_binding -->
+          <BrushContext {...brushProps} bind:brushContext>
+            <!-- svelte-ignore ownership_invalid_binding -->
+            <TooltipContext {...tooltipProps} bind:tooltipContext>
+              {@render _children?.({
+                context,
+              })}
             </TooltipContext>
           </BrushContext>
         </GeoContext>
       </TransformContext>
     {/key}
-  </ChartContext>
-</LayerCake>
+  </div>
+{/if}
+
+<style>
+  .lc-root-container,
+  .lc-root-container :global(*) {
+    box-sizing: border-box;
+  }
+  .lc-root-container {
+    width: 100%;
+    height: 100%;
+  }
+</style>