layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/ClipPath/ClipPath.canvas.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    invert = false,
+    children,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, invert, children, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+
+  // Cache the Path2D so `ctx.clip()` gets a stable reference per `path` change.
+  const canvasPath = $derived(c.effectivePath ? new Path2D(c.effectivePath) : undefined);
+
+  c.chartCtx.registerComponent({
+    name: 'ClipPath',
+    kind: 'group',
+    canvasRender: {
+      render: (ctx) => {
+        if (!disabled && canvasPath) {
+          ctx.clip(canvasPath, invert ? 'evenodd' : 'nonzero');
+        }
+      },
+      deps: () => [disabled, canvasPath, invert],
+    },
+  });
+</script>
+
+{#if children}
+  {@render children({ id, url, useId })}
+{/if}

package/dist/components/ClipPath/ClipPath.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+import { type ClipPathProps } from './ClipPath.shared.svelte.js';
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/ClipPath/ClipPath.html.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    invert = false,
+    children,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, invert, children, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+</script>
+
+{#if children}
+  {#if disabled || !c.effectivePath}
+    {@render children({ id, url, useId })}
+  {:else}
+    <div
+      class="lc-clip-path-div"
+      style:position="absolute"
+      style:inset="0"
+      style:clip-path={invert
+        ? `path(evenodd, "${c.effectivePath}")`
+        : `path("${c.effectivePath}")`}
+    >
+      {@render children({ id, url, useId })}
+    </div>
+  {/if}
+{/if}

package/dist/components/ClipPath/ClipPath.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+import { type ClipPathProps } from './ClipPath.shared.svelte.js';
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/ClipPath/ClipPath.shared.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+export type ClipPathPropsWithoutHTML = {
+    /** A unique id for the clipPath. */
+    id?: string;
+    /** Use existing path or shape (by id) for clipPath */
+    useId?: string;
+    /** Whether to disable clipping (show all). @default false */
+    disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the shape instead of inside.
+     * @default false
+     */
+    invert?: boolean;
+    /**
+     * SVG path `d` string describing the clip shape. Drives all three layers.
+     */
+    path?: string;
+    /** A snippet to insert custom SVG content into the `<clipPath>`. */
+    clip?: Snippet<[{
+        id: string;
+    }]>;
+    /** Children to render. */
+    children?: Snippet<[{
+        id: string;
+        url: string;
+        useId?: string;
+    }]>;
+};
+export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer ClipPath variant.
+ */
+export declare class ClipPathState {
+    #private;
+    chartCtx: ChartState;
+    outerRect: string;
+    /** Effective path used for canvas + html layers when inverting. */
+    effectivePath: string | undefined;
+    constructor(getProps: () => ClipPathProps);
+}

package/dist/components/ClipPath/ClipPath.shared.svelte.js

@@ -0,0 +1,19 @@
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer ClipPath variant.
+ */
+export class ClipPathState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    // Outer rect covering the chart bounds — combined with the clip shape under
+    // even-odd fill rule to invert the clip.
+    outerRect = $derived(`M0,0 H${this.chartCtx.width} V${this.chartCtx.height} H0 Z`);
+    /** Effective path used for canvas + html layers when inverting. */
+    effectivePath = $derived.by(() => {
+        const props = this.#getProps();
+        return props.invert && props.path ? `${this.outerRect} ${props.path}` : props.path;
+    });
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+}

package/dist/components/ClipPath/ClipPath.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ClipPathSvg from './ClipPath.svg.svelte';
+  import ClipPathCanvas from './ClipPath.canvas.svelte';
+  import ClipPathHtml from './ClipPath.html.svelte';
+  import type { ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: ClipPathProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ClipPathSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <ClipPathCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <ClipPathHtml {...props} />
+{/if}

package/dist/components/ClipPath/ClipPath.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+import type { ClipPathProps } from './ClipPath.shared.svelte.js';
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/ClipPath/ClipPath.svg.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    children,
+    clip,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, children, clip, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+</script>
+
+<defs>
+  <clipPath {id} {...rest}>
+    {#if clip}
+      {@render clip({ id })}
+    {:else if c.effectivePath}
+      <path d={c.effectivePath} clip-rule={rest.invert ? 'evenodd' : undefined} />
+    {/if}
+
+    {#if useId}
+      <use href="#{useId}" />
+    {/if}
+  </clipPath>
+</defs>
+
+{#if children}
+  {#if disabled}
+    {@render children({ id, url, useId })}
+  {:else}
+    <g style:clip-path={url} class="lc-clip-path-g">
+      {@render children({ id, url, useId })}
+    </g>
+  {/if}
+{/if}

package/dist/components/ClipPath/ClipPath.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+import { type ClipPathProps } from './ClipPath.shared.svelte.js';
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/{Contour.svelte → Contour/Contour.base.svelte}

@@ -1,57 +1,13 @@
 <script lang="ts" module>
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { Accessor } from '../utils/common.js';
-  import type { InterpolateMethod } from '../utils/rasterInterpolate.js';
-
-  export type ContourPropsWithoutHTML = {
-    /**
-     * Input data. Interpretation depends on other props:
-     * - With `width`/`height`: flat array of grid values (row-major order)
-     * - With `value` accessor: array of objects with x/y/value properties (scattered data)
-     * - Without: uses chart context data for scattered interpolation
-     */
-    data?: number[] | Float64Array | any[];
-    /** Grid width (columns). When set, `data` is treated as a flat grid array. */
-    width?: number;
-    /** Grid height (rows). When set, `data` is treated as a flat grid array. */
-    height?: number;
-
-    /** Left bound of the raster in data coordinates. Defaults to `0` in grid mode. */
-    x1?: number;
-    /** Top bound of the raster in data coordinates. Defaults to `0` in grid mode. */
-    y1?: number;
-    /** Right bound of the raster in data coordinates. Defaults to `width` in grid mode. */
-    x2?: number;
-    /** Bottom bound of the raster in data coordinates. Defaults to `height` in grid mode. */
-    y2?: number;
-
-    /**
-     * Value channel. Interpretation depends on the type:
-     * - `(x, y) => number`: continuous function evaluated at each pixel (function sampling mode)
-     * - `string | number | (d) => any`: accessor for scattered data interpolation
-     * @default 'value'
-     */
-    value?: Accessor | ((x: number, y: number) => number);
-
-    /** X accessor for scattered data. Defaults to chart context. */
-    x?: Accessor;
-    /** Y accessor for scattered data. Defaults to chart context. */
-    y?: Accessor;
-
-    /** Interpolation method for scattered data. @default 'barycentric' */
-    interpolate?: InterpolateMethod;
-
-    /** Number of contour thresholds or explicit threshold values. @default 10 */
-    thresholds?: number | number[];
-    /** Gaussian blur radius applied to grid values. @default 0 */
-    blur?: number;
-    /** Whether to smooth contour lines. @default true */
-    smooth?: boolean;
-  } & CommonStyleProps;
-
-  export type ContourProps = ContourPropsWithoutHTML &
-    Without<SVGAttributes<SVGGElement>, ContourPropsWithoutHTML>;
+  import type { Component } from 'svelte';
+  import type { ContourProps } from './Contour.shared.svelte.js';
+
+  export type ContourBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+  };
+
+  export type ContourBaseProps = ContourProps & ContourBaseLayerComponents;
 </script>
 
 <script lang="ts">
@@ -62,23 +18,23 @@
   import { interpolateYlGnBu } from 'd3-scale-chromatic';
   import { max, min } from 'd3-array';
 
-  import Group from './Group.svelte';
-  import Path from './Path.svelte';
-  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
+  import { accessor as resolveAccessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
   import {
     blurGridIgnoringNaN,
     gridCellCenterToBounds,
     gridPointToBounds,
     resolveRasterBounds,
-  } from '../utils/index.js';
-  import { interpolateGrid } from '../utils/rasterInterpolate.js';
+  } from '../../utils/index.js';
+  import { interpolateGrid } from '../../utils/rasterInterpolate.js';
 
   const ctx = getChartContext();
   const geo = getGeoContext();
 
   let {
+    Group,
+    Path,
     data: dataProp,
     width: widthProp,
     height: heightProp,
@@ -100,9 +56,8 @@
     opacity,
     class: className,
     ...restProps
-  }: ContourProps = $props();
+  }: ContourBaseProps = $props();
 
-  // Detect grid mode: data + width/height
   const isGridMode = $derived(!!(dataProp && widthProp && heightProp));
   const hasExplicitBounds = $derived(
     x1Prop !== undefined || y1Prop !== undefined || x2Prop !== undefined || y2Prop !== undefined
@@ -111,7 +66,6 @@
     resolveRasterBounds(widthProp ?? 0, heightProp ?? 0, x1Prop, y1Prop, x2Prop, y2Prop)
   );
 
-  // Register as composite-mark with markInfo for grid mode domain participation
   ctx.registerComponent({
     name: 'Contour',
     kind: 'composite-mark',
@@ -128,27 +82,24 @@
     },
   });
 
-  // Grid dimensions: use provided, or derive from chart size
   const gridW = $derived(widthProp ?? Math.min(Math.ceil(ctx.width), 200));
   const gridH = $derived(heightProp ?? Math.min(Math.ceil(ctx.height), 200));
 
-  // Scale factors from grid coordinates to chart pixel coordinates
   const scaleX = $derived(ctx.width / gridW);
   const scaleY = $derived(ctx.height / gridH);
   const contourScaleX = $derived(gridW / ctx.width);
   const contourScaleY = $derived(gridH / ctx.height);
   const useProjectedGridSampling = $derived(!!(geo.projection && isGridMode && hasExplicitBounds));
 
-  // Resolve grid values from one of three input modes
   const gridValues = $derived.by(() => {
     if (!ctx.width || !ctx.height) return new Float64Array(0);
 
-    // Mode 1: Grid data (flat array + width/height)
     if (isGridMode) {
-      return dataProp instanceof Float64Array ? dataProp : Float64Array.from(dataProp as number[]);
+      return dataProp instanceof Float64Array
+        ? dataProp
+        : Float64Array.from(dataProp as number[]);
     }
 
-    // Mode 2: Continuous function — evaluate at each grid cell
     if (typeof valueProp === 'function' && valueProp.length >= 2) {
       const fn = valueProp as (x: number, y: number) => number;
       const grid = new Float64Array(gridW * gridH);
@@ -166,7 +117,6 @@
       return grid;
     }
 
-    // Mode 3: Scattered data — interpolate onto grid
     const chartData = dataProp ? (dataProp as any[]) : chartDataArray(ctx.data);
     if (!chartData || chartData.length === 0) return new Float64Array(0);
 
@@ -208,17 +158,14 @@
     if (useProjectedGridSampling) {
       return interpolateGrid(projectedGridPoints, gridW, gridH, interpolateMethod);
     }
-
     return gridValues;
   });
 
-  // Apply optional blur
   const blurredValues = $derived.by(() => {
     if (!blurRadius || contourGridValues.length === 0) return contourGridValues;
     return blurGridIgnoringNaN(contourGridValues, gridW, gridH, blurRadius);
   });
 
-  // Run d3 contour generator
   const contourData = $derived.by(() => {
     if (blurredValues.length === 0) return [];
     const generator = d3Contours().size([gridW, gridH]).smooth(smooth);
@@ -226,7 +173,6 @@
     return generator(Array.from(blurredValues));
   });
 
-  // Path generator that maps contour geometry into either data or geo space.
   const pathGenerator = $derived.by(() => {
     if (useProjectedGridSampling) {
       return geoPath(
@@ -259,7 +205,6 @@
     );
   });
 
-  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
   const colorScale = $derived.by(() => {
     if (fill) return null;
     const minValue = min(contourData, (d) => d.value) ?? 0;

package/dist/components/Contour/Contour.base.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { ContourProps } from './Contour.shared.svelte.js';
+export type ContourBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+};
+export type ContourBaseProps = ContourProps & ContourBaseLayerComponents;
+declare const Contour: Component<ContourBaseProps, {}, "">;
+type Contour = ReturnType<typeof Contour>;
+export default Contour;

package/dist/components/Contour/Contour.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ContourBase from './Contour.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import type { ContourProps } from './Contour.shared.svelte.js';
+
+  let props: ContourProps = $props();
+</script>
+
+<ContourBase {Group} {Path} {...props} />

package/dist/components/Contour/Contour.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+import type { ContourProps } from './Contour.shared.svelte.js';
+declare const Contour: import("svelte").Component<ContourProps, {}, "">;
+type Contour = ReturnType<typeof Contour>;
+export default Contour;

package/dist/components/Contour/Contour.shared.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { Accessor } from '../../utils/common.js';
+import type { InterpolateMethod } from '../../utils/rasterInterpolate.js';
+export type ContourPropsWithoutHTML = {
+    data?: number[] | Float64Array | any[];
+    width?: number;
+    height?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    /** @default 'value' */
+    value?: Accessor | ((x: number, y: number) => number);
+    x?: Accessor;
+    y?: Accessor;
+    /** @default 'barycentric' */
+    interpolate?: InterpolateMethod;
+    /** @default 10 */
+    thresholds?: number | number[];
+    /** @default 0 */
+    blur?: number;
+    /** @default true */
+    smooth?: boolean;
+} & CommonStyleProps;
+export type ContourProps = ContourPropsWithoutHTML & Without<SVGAttributes<SVGGElement>, ContourPropsWithoutHTML>;

package/dist/components/Contour/Contour.shared.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Contour/Contour.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ContourSvg from './Contour.svg.svelte';
+  import ContourCanvas from './Contour.canvas.svelte';
+  import type { ContourProps } from './Contour.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: ContourProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ContourSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <ContourCanvas {...props} />
+{/if}

package/dist/components/Contour/Contour.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+import type { ContourProps } from './Contour.shared.svelte.js';
+declare const Contour: import("svelte").Component<ContourProps, {}, "">;
+type Contour = ReturnType<typeof Contour>;
+export default Contour;

package/dist/components/Contour/Contour.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ContourBase from './Contour.base.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import type { ContourProps } from './Contour.shared.svelte.js';
+
+  let props: ContourProps = $props();
+</script>
+
+<ContourBase {Group} {Path} {...props} />

package/dist/components/Contour/Contour.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ContourProps, ContourPropsWithoutHTML } from './Contour.shared.svelte.js';
+import type { ContourProps } from './Contour.shared.svelte.js';
+declare const Contour: import("svelte").Component<ContourProps, {}, "">;
+type Contour = ReturnType<typeof Contour>;
+export default Contour;

package/dist/components/{Density.svelte → Density/Density.base.svelte}

@@ -1,25 +1,13 @@
 <script lang="ts" module>
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { Accessor } from '../utils/common.js';
-
-  export type DensityPropsWithoutHTML = {
-    /** Override chart data. Defaults to chart context data. */
-    data?: any[];
-    /** X accessor. Defaults to chart context x accessor. */
-    x?: Accessor;
-    /** Y accessor. Defaults to chart context y accessor. */
-    y?: Accessor;
-    /** Weight accessor for weighted density estimation. */
-    weight?: Accessor;
-    /** KDE bandwidth in pixels. @default 20 */
-    bandwidth?: number;
-    /** Number of contour thresholds. @default 20 */
-    thresholds?: number;
-  } & CommonStyleProps;
-
-  export type DensityProps = DensityPropsWithoutHTML &
-    Without<SVGAttributes<SVGGElement>, DensityPropsWithoutHTML>;
+  import type { Component } from 'svelte';
+  import type { DensityProps } from './Density.shared.svelte.js';
+
+  export type DensityBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+  };
+
+  export type DensityBaseProps = DensityProps & DensityBaseLayerComponents;
 </script>
 
 <script lang="ts">
@@ -30,16 +18,16 @@
   import { interpolateYlGnBu } from 'd3-scale-chromatic';
   import { max } from 'd3-array';
 
-  import Group from './Group.svelte';
-  import Path from './Path.svelte';
-  import { accessor as resolveAccessor, chartDataArray } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
+  import { accessor as resolveAccessor, chartDataArray } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
 
   const ctx = getChartContext();
   const geo = getGeoContext();
 
   let {
+    Group,
+    Path,
     data: dataProp,
     x: xProp,
     y: yProp,
@@ -53,12 +41,9 @@
     opacity,
     class: className,
     ...restProps
-  }: DensityProps = $props();
+  }: DensityBaseProps = $props();
 
-  ctx.registerComponent({
-    name: 'Density',
-    kind: 'composite-mark',
-  });
+  ctx.registerComponent({ name: 'Density', kind: 'composite-mark' });
 
   const xAccessor = $derived(xProp ? resolveAccessor(xProp) : ctx.x);
   const yAccessor = $derived(yProp ? resolveAccessor(yProp) : ctx.y);
@@ -66,7 +51,6 @@
 
   const data = $derived(dataProp ?? chartDataArray(ctx.data));
 
-  // Compute density contours in pixel space
   const contours = $derived.by(() => {
     if (!data || data.length === 0 || !ctx.width || !ctx.height) return [];
 
@@ -95,7 +79,6 @@
       density.weight((d: any) => weightAccessor(d));
     }
 
-    // Filter out data that doesn't project (e.g. points outside projection bounds)
     const filteredData = projection
       ? data.filter((d: any) => projection([xAccessor(d), yAccessor(d)]) !== null)
       : data;
@@ -103,10 +86,8 @@
     return density(filteredData as any);
   });
 
-  // Identity geoPath for pixel-coordinate contours
   const pathGenerator = $derived(geoPath());
 
-  // Color scale: use chart's cScale (with auto-computed domain) or fall back to default
   const colorScale = $derived.by(() => {
     if (fill) return null;
     const maxValue = max(contours, (d) => d.value) ?? 1;

package/dist/components/Density/Density.base.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { DensityProps } from './Density.shared.svelte.js';
+export type DensityBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+};
+export type DensityBaseProps = DensityProps & DensityBaseLayerComponents;
+declare const Density: Component<DensityBaseProps, {}, "">;
+type Density = ReturnType<typeof Density>;
+export default Density;