layerchart 2.0.0-next.62 → 2.0.0-next.64

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

@@ -0,0 +1,300 @@
+import { accessor, chartDataArray } from '../../utils/common.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { createDimensionGetter } from '../../utils/rect.svelte.js';
+/**
+ * Shared reactive state for Waffle. Resolves accessors, computes per-datum
+ * dimensions and waffle layouts (pattern tile size, polygon path, centroid),
+ * and exposes them via `items`.
+ */
+export class WaffleState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.ctx.registerComponent({
+            name: 'Waffle',
+            kind: 'mark',
+            markInfo: () => {
+                const p = getProps();
+                return {
+                    data: p.data,
+                    seriesKey: p.seriesKey,
+                    color: p.fill,
+                };
+            },
+        });
+    }
+    axis = $derived(this.#getProps().axis ?? this.ctx.valueAxis);
+    unit = $derived(Math.max(0, this.#getProps().unit ?? 1));
+    gap = $derived(+(this.#getProps().gap ?? 1));
+    round = $derived(maybeRound(this.#getProps().round));
+    multipleProp = $derived(maybeMultiple(this.#getProps().multiple));
+    series = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey ? this.ctx.series.series.find((s) => s.key === seriesKey) : undefined;
+    });
+    /** Opacity multiplier — fades to 0.1 when another series is highlighted. */
+    seriesOpacity = $derived.by(() => {
+        if (this.series?.key == null ||
+            this.ctx.series.visibleSeries.length <= 1 ||
+            this.ctx.series.isHighlighted(this.series.key, true)) {
+            return 1;
+        }
+        return 0.1;
+    });
+    seriesAccessor = $derived(this.series
+        ? (this.series.value ?? (this.series.data ? undefined : this.series.key))
+        : undefined);
+    stackAccessors = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey && this.ctx.series.isStacked
+            ? this.ctx.series.getStackAccessors(seriesKey)
+            : null;
+    });
+    data = $derived.by(() => {
+        const dataProp = this.#getProps().data;
+        if (dataProp)
+            return dataProp;
+        return this.series?.data ?? chartDataArray(this.ctx.data);
+    });
+    x = $derived.by(() => {
+        const xProp = this.#getProps().x;
+        return (xProp ??
+            (this.ctx.valueAxis === 'x'
+                ? (this.stackAccessors?.value ?? this.seriesAccessor)
+                : undefined) ??
+            this.ctx.x);
+    });
+    y = $derived.by(() => {
+        const yProp = this.#getProps().y;
+        return (yProp ??
+            (this.ctx.valueAxis === 'y'
+                ? (this.stackAccessors?.value ?? this.seriesAccessor)
+                : undefined) ??
+            this.ctx.y);
+    });
+    getDimensions = $derived(createDimensionGetter(this.ctx, () => ({
+        x: this.x,
+        y: this.y,
+        x1: this.#getProps().x1,
+        y1: this.#getProps().y1,
+        insets: this.#getProps().insets,
+    })));
+    /** Pixel slope of the value-axis scale (signed). */
+    pixelsPerUnit = $derived.by(() => {
+        const scale = this.axis === 'y' ? this.ctx.yScale : this.ctx.xScale;
+        if (typeof scale !== 'function')
+            return 0;
+        const a = Number(scale(0));
+        const b = Number(scale(1));
+        if (!Number.isFinite(a) || !Number.isFinite(b))
+            return 0;
+        return b - a;
+    });
+    /** Pixel position of value=0 along the value axis. */
+    valueZero = $derived.by(() => {
+        const scale = this.axis === 'y' ? this.ctx.yScale : this.ctx.xScale;
+        if (typeof scale !== 'function')
+            return 0;
+        return Number(scale(0)) || 0;
+    });
+    items = $derived.by(() => {
+        const props = this.#getProps();
+        const axis = this.axis;
+        const unit = this.unit;
+        const round = this.round;
+        const gap = this.gap;
+        const multipleProp = this.multipleProp;
+        const data = this.data;
+        const pixelsPerUnit = this.pixelsPerUnit;
+        const valueZero = this.valueZero;
+        if (!data || data.length === 0)
+            return [];
+        if (!Number.isFinite(pixelsPerUnit) || pixelsPerUnit === 0 || unit <= 0)
+            return [];
+        const result = [];
+        const cellPixels = unit * Math.abs(pixelsPerUnit); // pixels per cell along value axis
+        // Determine value range accessor — for stacked series, reads [v1, v2] arrays
+        // produced by the chart's stack series; otherwise treats value as [0, v].
+        const valueAccessorFn = accessor(axis === 'y'
+            ? (this.stackAccessors?.value ?? this.seriesAccessor ?? this.#getProps().y ?? this.ctx.y)
+            : (this.stackAccessors?.value ?? this.seriesAccessor ?? this.#getProps().x ?? this.ctx.x));
+        for (let i = 0; i < data.length; i++) {
+            const d = data[i];
+            const dim = this.getDimensions(d);
+            if (!dim)
+                continue;
+            let { x, y, width, height } = dim;
+            // Width override
+            if (props.width != null && axis === 'y') {
+                x = x + (width - props.width) / 2;
+                width = props.width;
+            }
+            if (props.height != null && axis === 'x') {
+                y = y + (height - props.height) / 2;
+                height = props.height;
+            }
+            const barSize = axis === 'y' ? width : height;
+            const barStart = axis === 'y' ? x : y;
+            if (barSize <= 0)
+                continue;
+            const rawValue = valueAccessorFn(d);
+            let v1 = 0;
+            let v2;
+            if (Array.isArray(rawValue)) {
+                v1 = Number(rawValue[0]) || 0;
+                v2 = Number(rawValue[1]) || 0;
+            }
+            else {
+                v2 = Number(rawValue) || 0;
+            }
+            const i1 = round(v1 / unit);
+            const i2 = round(v2 / unit);
+            if (i1 === i2)
+                continue;
+            // Default `multiple` from Plot: keep cells approximately square.
+            const multiple = multipleProp ?? Math.max(1, Math.floor(Math.sqrt(barSize / cellPixels)));
+            // Outer cell tile size (along anchor and dodge axes).
+            const cx = Math.min(barSize / multiple, cellPixels * multiple);
+            const cy = cellPixels * multiple;
+            // Center the cell grid within the bar.
+            const tx0 = barStart + (barSize - multiple * cx) / 2;
+            // Cells grow away from baseline toward positive values. Sign of
+            // `pixelsPerUnit` encodes the screen direction of value growth, so the
+            // same transform works for both inverted (typical svg y) and
+            // non-inverted scales.
+            const valueDir = pixelsPerUnit < 0 ? -1 : 1;
+            const polyPoints = wafflePoints(i1, i2, multiple);
+            // Pop centroid (last point) before mapping to path string.
+            const centroid = polyPoints.pop();
+            const transformPoint = axis === 'y'
+                ? ([col, row]) => [col * cx, valueDir * row * cy]
+                : ([col, row]) => [valueDir * row * cy, col * cx];
+            const pts = polyPoints.map(transformPoint);
+            const pathData = pts.length === 0 ? '' : 'M' + pts.map((p) => `${p[0]},${p[1]}`).join('L') + 'Z';
+            const cPx = transformPoint(centroid);
+            const tx = axis === 'y' ? tx0 : valueZero;
+            const ty = axis === 'y' ? valueZero : tx0;
+            // Resolve fill: explicit `fill` prop > series color > color scale > null
+            const fillProp = props.fill;
+            let fill = null;
+            if (typeof fillProp === 'string')
+                fill = fillProp;
+            else if (this.series?.color)
+                fill = this.series.color;
+            else if (this.ctx.config.c)
+                fill = String(this.ctx.cGet(d) ?? '') || null;
+            result.push({
+                data: d,
+                index: i,
+                pathData,
+                tx,
+                ty,
+                cx,
+                cy,
+                centroid: { x: tx + cPx[0], y: ty + cPx[1] },
+                fill,
+            });
+        }
+        return result;
+    });
+    /** Resolved gap. */
+    resolvedGap = $derived(this.gap);
+}
+function maybeMultiple(multiple) {
+    return multiple === undefined ? undefined : Math.max(1, Math.floor(multiple));
+}
+function maybeRound(round) {
+    if (round === undefined || round === false)
+        return Number;
+    if (round === true)
+        return Math.round;
+    if (typeof round !== 'function') {
+        throw new Error(`invalid round: ${round}`);
+    }
+    return round;
+}
+/**
+ * Generate the polygon outline of a waffle covering the cell interval
+ * `[i1, i2)` on a grid of `columns` columns. The shape is approximately
+ * rectangular but may have one or two corner cuts when the start or end
+ * value is not aligned to a row boundary, plus extra cuts for fractional
+ * intervals. The last point is the centroid (popped by callers for tooltips
+ * and tip placement).
+ *
+ * Coordinate space is `(column, row)` in cell units — callers transform to
+ * pixel space (and may negate the row axis for screen y).
+ *
+ * @see https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ */
+export function wafflePoints(i1, i2, columns) {
+    if (i2 < i1)
+        return wafflePoints(i2, i1, columns);
+    if (i1 < 0) {
+        return wafflePointsOffset(i1, i2, columns, Math.ceil(-Math.min(i1, i2) / columns));
+    }
+    const x1f = Math.floor(i1 % columns);
+    const x1c = Math.ceil(i1 % columns);
+    const x2f = Math.floor(i2 % columns);
+    const x2c = Math.ceil(i2 % columns);
+    const y1f = Math.floor(i1 / columns);
+    const y1c = Math.ceil(i1 / columns);
+    const y2f = Math.floor(i2 / columns);
+    const y2c = Math.ceil(i2 / columns);
+    const points = [];
+    if (y2c > y1c)
+        points.push([0, y1c]);
+    points.push([x1f, y1c], [x1f, y1f + (i1 % 1)], [x1c, y1f + (i1 % 1)]);
+    if (!(i1 % columns > columns - 1)) {
+        points.push([x1c, y1f]);
+        if (y2f > y1f)
+            points.push([columns, y1f]);
+    }
+    if (y2f > y1f)
+        points.push([columns, y2f]);
+    points.push([x2c, y2f], [x2c, y2f + (i2 % 1)], [x2f, y2f + (i2 % 1)]);
+    if (!(i2 % columns < 1)) {
+        points.push([x2f, y2c]);
+        if (y2c > y1c)
+            points.push([0, y2c]);
+    }
+    points.push(waffleCentroid(i1, i2, columns));
+    return points;
+}
+function wafflePointsOffset(i1, i2, columns, k) {
+    return wafflePoints(i1 + k * columns, i2 + k * columns, columns).map(([x, y]) => [x, y - k]);
+}
+function waffleCentroid(i1, i2, columns) {
+    const r = Math.floor(i2 / columns) - Math.floor(i1 / columns);
+    if (r === 0)
+        return waffleRowCentroid(i1, i2, columns);
+    if (r === 1) {
+        if (Math.floor(i2 % columns) > Math.ceil(i1 % columns)) {
+            return [(Math.floor(i2 % columns) + Math.ceil(i1 % columns)) / 2, Math.floor(i2 / columns)];
+        }
+        if (i2 % columns > columns - (i1 % columns)) {
+            return waffleRowCentroid(i2 - (i2 % columns), i2, columns);
+        }
+        return waffleRowCentroid(i1, columns * Math.ceil(i1 / columns), columns);
+    }
+    return [columns / 2, (Math.round(i1 / columns) + Math.round(i2 / columns)) / 2];
+}
+function waffleRowCentroid(i1, i2, columns) {
+    const c = Math.floor(i2) - Math.floor(i1);
+    if (c === 0) {
+        return [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (((i1 + i2) / 2) % 1)];
+    }
+    if (c === 1) {
+        if ((i2 % 1) - (i1 % 1) > 0.5) {
+            return [Math.ceil(i1 % columns), Math.floor(i2 / columns) + ((i1 % 1) + (i2 % 1)) / 2];
+        }
+        if (i2 % 1 > 1 - (i1 % 1)) {
+            return [Math.floor(i2 % columns) + 0.5, Math.floor(i2 / columns) + (i2 % 1) / 2];
+        }
+        return [Math.floor(i1 % columns) + 0.5, Math.floor(i1 / columns) + (1 + (i1 % 1)) / 2];
+    }
+    return [
+        Math.ceil(i1 % columns) + Math.ceil(Math.floor(i2) - Math.ceil(i1)) / 2,
+        Math.floor(i1 / columns) + (i2 >= 1 + i1 ? 0.5 : ((i1 + i2) / 2) % 1),
+    ];
+}

package/dist/components/Waffle/Waffle.svelte

@@ -0,0 +1,148 @@
+<script lang="ts" module>
+  export type { WaffleProps, WafflePropsWithoutHTML } from './Waffle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+
+  import Group from '../Group/Group.svelte';
+  import Path from '../Path/Path.svelte';
+  import Pattern from '../Pattern/Pattern.svelte';
+
+  import { WaffleState, type WaffleProps } from './Waffle.shared.svelte.js';
+
+  let {
+    data: dataProp,
+    x: xProp,
+    y: yProp,
+    x1: x1Prop,
+    y1: y1Prop,
+    axis,
+    unit,
+    multiple,
+    gap,
+    round,
+    rx,
+    ry,
+    seriesKey,
+    insets,
+    width,
+    height,
+    key = (_, i) => i,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeWidth,
+    opacity,
+    class: className,
+    tooltip,
+    onWaffleClick,
+    onpointerenter,
+    onpointermove,
+    onpointerleave,
+    onclick,
+    symbol,
+    ...rest
+  }: WaffleProps = $props();
+
+  const c = new WaffleState(
+    () =>
+      ({
+        data: dataProp,
+        x: xProp,
+        y: yProp,
+        x1: x1Prop,
+        y1: y1Prop,
+        axis,
+        unit,
+        multiple,
+        gap,
+        round,
+        rx,
+        ry,
+        seriesKey,
+        insets,
+        width,
+        height,
+        fill,
+      }) as WaffleProps
+  );
+</script>
+
+{#each c.items as item (key(item.data, item.index))}
+  {@const onItemEnter = (e: PointerEvent) => {
+    onpointerenter?.(e as any);
+    if (tooltip) c.ctx.tooltip.show(e, item.data);
+  }}
+  {@const onItemMove = (e: PointerEvent) => {
+    onpointermove?.(e as any);
+    if (tooltip) c.ctx.tooltip.show(e, item.data);
+  }}
+  {@const onItemLeave = (e: PointerEvent) => {
+    onpointerleave?.(e as any);
+    if (tooltip) c.ctx.tooltip.hide();
+  }}
+  {@const onItemClick = (e: MouseEvent) => {
+    onclick?.(e as any);
+    onWaffleClick?.(e, { data: item.data });
+  }}
+  {@const cellInset = c.gap / 2}
+  {@const innerWidth = Math.max(0, item.cx - 2 * cellInset)}
+  {@const innerHeight = Math.max(0, item.cy - 2 * cellInset)}
+  {@const color = item.fill ?? (typeof fill === 'string' ? fill : undefined) ?? 'currentColor'}
+  {#snippet symbolPatternContent()}
+    <g transform={`translate(${cellInset},${cellInset})`} {color}>
+      {@render symbol?.({
+        width: innerWidth,
+        height: innerHeight,
+        datum: item.data,
+        color,
+      })}
+    </g>
+  {/snippet}
+  <Group
+    x={item.tx}
+    y={item.ty}
+    class={cls('lc-waffle', className)}
+    opacity={(opacity ?? 1) * c.seriesOpacity}
+  >
+    <Pattern
+      width={item.cx}
+      height={item.cy}
+      rects={[
+        {
+          inset: cellInset,
+          color: item.fill ?? (typeof fill === 'string' ? fill : undefined),
+          opacity: fillOpacity,
+          rx,
+          ry,
+        },
+      ]}
+      patternContent={symbol ? symbolPatternContent : undefined}
+    >
+      {#snippet children({ pattern })}
+        <Path
+          pathData={item.pathData}
+          fill={pattern}
+          stroke={stroke as string | undefined}
+          strokeWidth={strokeWidth as number | undefined}
+          class="lc-waffle-cell"
+          onpointerenter={onItemEnter}
+          onpointermove={onItemMove}
+          onpointerleave={onItemLeave}
+          onclick={onItemClick}
+          {...rest}
+        />
+      {/snippet}
+    </Pattern>
+  </Group>
+{/each}
+
+<style>
+  @layer components {
+    :global(:where(.lc-waffle-cell)) {
+      --fill-color: var(--color-primary, currentColor);
+      --stroke-color: none;
+    }
+  }
+</style>

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

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

package/dist/components/charts/ArcChart/ArcChart.base.svelte

@@ -213,6 +213,7 @@
     bottom: legend === true || getObjectOrNull(legend)?.placement?.includes('bottom') ? 32 : 0,
   }}
   axis={false}
+  grid={false}
   {...restProps}
   tooltipContext={tooltipContext === false
     ? false

package/dist/components/index.d.ts

@@ -49,6 +49,8 @@ export { default as Contour } from './Contour/Contour.svelte';
 export * from './Contour/Contour.svelte';
 export { default as Density } from './Density/Density.svelte';
 export * from './Density/Density.svelte';
+export { default as Dodge } from './Dodge/Dodge.svelte';
+export * from './Dodge/Dodge.svelte';
 export { default as Ellipse } from './Ellipse/Ellipse.svelte';
 export * from './Ellipse/Ellipse.svelte';
 export { default as Frame } from './Frame/Frame.svelte';
@@ -125,5 +127,7 @@ export { default as Violin } from './Violin/Violin.svelte';
 export * from './Violin/Violin.svelte';
 export { default as Voronoi } from './Voronoi/Voronoi.svelte';
 export * from './Voronoi/Voronoi.svelte';
+export { default as Waffle } from './Waffle/Waffle.svelte';
+export * from './Waffle/Waffle.svelte';
 export { default as WebGL } from './layers/WebGL.svelte';
 export * from './layers/WebGL.svelte';

package/dist/components/index.js

@@ -49,6 +49,8 @@ export { default as Contour } from './Contour/Contour.svelte';
 export * from './Contour/Contour.svelte';
 export { default as Density } from './Density/Density.svelte';
 export * from './Density/Density.svelte';
+export { default as Dodge } from './Dodge/Dodge.svelte';
+export * from './Dodge/Dodge.svelte';
 export { default as Ellipse } from './Ellipse/Ellipse.svelte';
 export * from './Ellipse/Ellipse.svelte';
 export { default as Frame } from './Frame/Frame.svelte';
@@ -125,5 +127,7 @@ export { default as Violin } from './Violin/Violin.svelte';
 export * from './Violin/Violin.svelte';
 export { default as Voronoi } from './Voronoi/Voronoi.svelte';
 export * from './Voronoi/Voronoi.svelte';
+export { default as Waffle } from './Waffle/Waffle.svelte';
+export * from './Waffle/Waffle.svelte';
 export { default as WebGL } from './layers/WebGL.svelte';
 export * from './layers/WebGL.svelte';

package/dist/html.d.ts

@@ -114,3 +114,7 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';

package/dist/html.js

@@ -91,3 +91,7 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';

package/dist/states/chart.svelte.js

@@ -656,11 +656,15 @@ export class ChartState {
                         extraMarkValues.push(...info.data.flatMap(accessor(markAccessor)));
                     }
                 }
-                const allValues = [...seriesValues, ...extraMarkValues];
-                if (baseline != null) {
-                    return [min([baseline, ...allValues]), max([baseline, ...allValues])];
+                const allValues = [...seriesValues, ...extraMarkValues].filter((v) => v != null);
+                if (allValues.length > 0) {
+                    if (baseline != null) {
+                        return [min([baseline, ...allValues]), max([baseline, ...allValues])];
+                    }
+                    return extent(allValues);
                 }
-                return extent(allValues);
+                // Series are metadata-only (e.g. categorical legend with no per-series
+                // values on the axis) — fall through to other resolution paths.
             }
         }
         // Interval-based domain: extend to the next interval offset

package/dist/states/chart.svelte.test.js

@@ -893,6 +893,59 @@ describe('ChartState implicit series domain update on visibility toggle', () =>
         }
     });
 });
+describe('ChartState metadata-only series', () => {
+    it('should not produce [undefined, undefined] domain when items lack series-key properties', () => {
+        const data = [
+            { date: '2024-01', category: 'svelte' },
+            { date: '2024-02', category: 'sveltekit' },
+            { date: '2024-03', category: 'ecosystem' },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            valueAxis: 'y',
+            series: [
+                { key: 'svelte', color: 'red' },
+                { key: 'sveltekit', color: 'orange' },
+                { key: 'ecosystem', color: 'blue' },
+            ],
+        });
+        try {
+            expect(state._yDomain).toBeUndefined();
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should remain stable across visibility toggles instead of throwing', () => {
+        const data = [
+            { date: '2024-01', category: 'svelte' },
+            { date: '2024-02', category: 'sveltekit' },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            valueAxis: 'y',
+            series: [
+                { key: 'svelte', color: 'red' },
+                { key: 'sveltekit', color: 'orange' },
+            ],
+            motion: { type: 'spring' },
+        });
+        try {
+            expect(state._yDomain).toBeUndefined();
+            expect(() => {
+                state.seriesState.selectedKeys.toggle('svelte');
+                flushSync();
+            }).not.toThrow();
+            expect(state._yDomain).toBeUndefined();
+            expect(state.seriesState.visibleSeries).toHaveLength(1);
+        }
+        finally {
+            cleanup();
+        }
+    });
+});
 describe('ChartState degenerate domain', () => {
     it('should expand degenerate y domain [0, 0] to [0, 1]', () => {
         const data = [

package/dist/svg.d.ts

@@ -168,6 +168,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';
 export { default as GeoRaster } from './components/geo/GeoRaster/GeoRaster.svelte';

package/dist/svg.js

@@ -121,6 +121,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 // Geo helpers (no per-layer rendering)
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';