layerchart 2.0.0-next.59 → 2.0.0-next.60

package/dist/bench/GeoBench.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Chart from '../components/Chart.svelte';
   import Layer from '../components/layers/Layer.svelte';
-  import GeoPath from '../components/GeoPath.svelte';
+  import GeoPath from '../components/geo/GeoPath.svelte';
 
   type Props = {
     features: any[];

package/dist/components/AnnotationLine.svelte

@@ -70,9 +70,7 @@
 
   const ctx = getChartContext();
 
-  const isVertical = $derived(
-    x != null || (x1Prop != null && x2Prop != null && x1Prop === x2Prop)
-  );
+  const isVertical = $derived(x != null || (x1Prop != null && x2Prop != null && x1Prop === x2Prop));
 
   const line = $derived({
     x1: x1Prop != null ? ctx.xScale(x1Prop) : x != null ? ctx.xScale(x) : ctx.xRange[0],

package/dist/components/AnnotationPoint.svelte

@@ -81,7 +81,9 @@
     }
     return {
       x: x ? ctx.xScale(x) + (isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0) : 0,
-      y: y ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0) : ctx.height,
+      y: y
+        ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0)
+        : ctx.height,
     };
   });
 
@@ -116,16 +118,8 @@
   const linkEndpoints = $derived.by(() => {
     if (!link) return null;
 
-    const dirX = labelPlacement.includes('left')
-      ? -1
-      : labelPlacement.includes('right')
-        ? 1
-        : 0;
-    const dirY = labelPlacement.includes('top')
-      ? -1
-      : labelPlacement.includes('bottom')
-        ? 1
-        : 0;
+    const dirX = labelPlacement.includes('left') ? -1 : labelPlacement.includes('right') ? 1 : 0;
+    const dirY = labelPlacement.includes('top') ? -1 : labelPlacement.includes('bottom') ? 1 : 0;
     if (dirX === 0 && dirY === 0) return null; // labelPlacement='center' — no line
 
     const mag = Math.hypot(dirX, dirY);

package/dist/components/BrushContext.svelte.test.js

@@ -30,6 +30,13 @@ function getBrushElements(container) {
         handles: container.querySelectorAll('.lc-brush-handle'),
     };
 }
+// BrushContext is lazy-loaded inside Chart, so tests that enable brush must
+// wait for the dynamic import to resolve before querying brush DOM.
+async function awaitBrushReady(container) {
+    await vi.waitFor(() => {
+        expect(container.querySelector('.lc-brush-context')).not.toBeNull();
+    });
+}
 describe('BrushContext', () => {
     describe('rendering', () => {
         it('should not render brush UI when brush is disabled', async () => {
@@ -46,7 +53,7 @@ describe('BrushContext', () => {
                 ...defaultChartProps,
                 brush: true,
             });
-            await tick();
+            await awaitBrushReady(container);
             const { context } = getBrushElements(container);
             expect(context).not.toBeNull();
         });
@@ -55,7 +62,7 @@ describe('BrushContext', () => {
                 ...defaultChartProps,
                 brush: true,
             });
-            await tick();
+            await awaitBrushReady(container);
             const { range, handles } = getBrushElements(container);
             expect(range).toBeNull();
             expect(handles.length).toBe(0);
@@ -73,7 +80,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             let { range } = getBrushElements(container);
             expect(range).toBeNull();
             chartContext.brush.move({ x: [2, 8] });
@@ -93,7 +100,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             chartContext.brush.move({ x: [2, 5] });
             await tick();
             const { range } = getBrushElements(container);
@@ -116,7 +123,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             chartContext.brush.move({ x: [2, 5] });
             await tick();
             let { range } = getBrushElements(container);
@@ -138,7 +145,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             chartContext.brush.move({ x: [2, 8] });
             await tick();
             let { range } = getBrushElements(container);
@@ -159,7 +166,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             chartContext.brush.selectAll();
             await tick();
             const { range } = getBrushElements(container);
@@ -180,7 +187,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             chartContext.brush.move({ y: [20, 80] });
             await tick();
             const { range } = getBrushElements(container);
@@ -207,7 +214,7 @@ describe('BrushContext', () => {
                     chartContext = ctx;
                 },
             });
-            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            await vi.waitFor(() => expect(chartContext?.brush).not.toBeNull());
             const brushEl = container.querySelector('.lc-brush-context');
             const rect = brushEl.getBoundingClientRect();
             // Simulate a brush drag: pointerdown → pointermove → pointerup
@@ -236,7 +243,7 @@ describe('BrushContext', () => {
                     x: [3, 7],
                 },
             });
-            await tick();
+            await awaitBrushReady(container);
             const { range } = getBrushElements(container);
             expect(range).not.toBeNull();
         });
@@ -247,7 +254,7 @@ describe('BrushContext', () => {
                     x: [0, 10],
                 },
             });
-            await tick();
+            await awaitBrushReady(container);
             const { range } = getBrushElements(container);
             expect(range).toBeNull();
         });
@@ -258,7 +265,7 @@ describe('BrushContext', () => {
                     x: null,
                 },
             });
-            await tick();
+            await awaitBrushReady(container);
             const { range } = getBrushElements(container);
             expect(range).toBeNull();
         });
@@ -270,7 +277,7 @@ describe('BrushContext', () => {
                 },
             });
             const { container } = render(Chart, props);
-            await tick();
+            await awaitBrushReady(container);
             let { range } = getBrushElements(container);
             expect(range).not.toBeNull();
             const initialWidth = parseFloat(range.style.width);
@@ -289,7 +296,7 @@ describe('BrushContext', () => {
                 },
             });
             const { container } = render(Chart, props);
-            await tick();
+            await awaitBrushReady(container);
             let { range } = getBrushElements(container);
             expect(range).not.toBeNull();
             props.brush = { x: [null, null] };

package/dist/components/Chart.svelte

@@ -19,9 +19,10 @@
   import type { GeoStateProps } from '../states/geo.svelte.js';
   import TooltipContext from './tooltip/TooltipContext.svelte';
 
-  import { geoFitObjectTransform } from '../utils/geo.js';
   import TransformContext from './TransformContext.svelte';
-  import BrushContext from './BrushContext.svelte';
+  // BrushContext (used only when `brush` prop is set) is lazy-loaded inline
+  // via `{#await import(...)}` so non-brush charts don't pay for it.
+  import type BrushContext from './BrushContext.svelte';
   import {
     type BrushDomainType,
     type BrushState,
@@ -777,18 +778,21 @@
     }
   });
 
-  const initialTransform = $derived(
-    transform?.mode === 'projection' &&
-      (resolvedApply.translate || resolvedApply.scale) &&
-      geo?.fitGeojson &&
-      geo?.projection
-      ? geoFitObjectTransform(
-          geo.projection(),
-          [chartState.width, chartState.height],
-          geo.fitGeojson
-        )
-      : undefined
-  );
+  const initialTransform = $derived.by(() => {
+    if (
+      transform?.mode !== 'projection' ||
+      !(resolvedApply.translate || resolvedApply.scale) ||
+      !geo?.fitGeojson ||
+      !geo?.projection
+    ) {
+      return undefined;
+    }
+    // Inlined to avoid pulling `$lib/utils/geo.js` (and its d3-geo imports)
+    // into Chart's static graph for non-geo charts.
+    const fitted = geo.projection().fitSize([chartState.width, chartState.height], geo.fitGeojson);
+    const t = fitted.translate();
+    return { translate: { x: t[0], y: t[1] }, scale: fitted.scale() };
+  });
 
   const processTranslate = $derived.by(() => {
     if (resolvedApply.rotation && chartState.geoState?.projection) {
@@ -1144,8 +1148,37 @@
         {onTransform}
         {ondragend}
       >
-        <!-- svelte-ignore ownership_invalid_binding -->
-        <BrushContext {...enhancedBrushProps} bind:state={chartState.brushState}>
+        {#if brush}
+          {#await import('./BrushContext.svelte')}
+            <!--
+              Pending: render the chart subtree immediately so the chart paints
+              before the BrushContext chunk arrives (avoids a perceived hang on
+              slow networks). The subtree re-mounts once `{:then}` resolves —
+              acceptable because it happens before user interaction, brush is
+              an opt-in feature, and any chart state at that point is empty.
+            -->
+            <!-- svelte-ignore ownership_invalid_binding -->
+            <TooltipContext
+              onclick={onTooltipClick}
+              {...getObjectOrNull(tooltipContext)}
+              bind:state={chartState.tooltipState}
+            >
+              <ChartChildren {children} {tooltipContext} {...restProps} />
+            </TooltipContext>
+          {:then { default: BrushContext }}
+            <!-- svelte-ignore ownership_invalid_binding -->
+            <BrushContext {...enhancedBrushProps} bind:state={chartState.brushState}>
+              <!-- svelte-ignore ownership_invalid_binding -->
+              <TooltipContext
+                onclick={onTooltipClick}
+                {...getObjectOrNull(tooltipContext)}
+                bind:state={chartState.tooltipState}
+              >
+                <ChartChildren {children} {tooltipContext} {...restProps} />
+              </TooltipContext>
+            </BrushContext>
+          {/await}
+        {:else}
           <!-- svelte-ignore ownership_invalid_binding -->
           <TooltipContext
             onclick={onTooltipClick}
@@ -1154,7 +1187,7 @@
           >
             <ChartChildren {children} {tooltipContext} {...restProps} />
           </TooltipContext>
-        </BrushContext>
+        {/if}
       </TransformContext>
     {/key}
   </div>

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

@@ -10,7 +10,7 @@ import type { BaseRange, Nice, PaddingArray, Without, XRangeWithScale, YRangeWit
 import type { GeoStateProps } from '../states/geo.svelte.js';
 import TooltipContext from './tooltip/TooltipContext.svelte';
 import TransformContext from './TransformContext.svelte';
-import BrushContext from './BrushContext.svelte';
+import type BrushContext from './BrushContext.svelte';
 import { ChartState } from '../states/chart.svelte.js';
 import type { StackLayout } from '../states/series.svelte.js';
 import type { ChartChildrenProps } from './ChartChildren.svelte';

package/dist/components/ChartChildren.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { ComponentProps, Snippet } from 'svelte';
-  import TooltipContext from './tooltip/TooltipContext.svelte';
+  import type TooltipContext from './tooltip/TooltipContext.svelte';
   import type Tooltip from './tooltip/Tooltip.svelte';
   import type TooltipHeader from './tooltip/TooltipHeader.svelte';
   import type TooltipList from './tooltip/TooltipList.svelte';
@@ -133,27 +133,37 @@
   import { asAny } from '../utils/types.js';
   import { getObjectOrNull } from '../utils/common.js';
 
-  import Area from './Area.svelte';
-  import Arc from './Arc.svelte';
+  import type Area from './Area.svelte';
+  import type Arc from './Arc.svelte';
   import Axis from './Axis.svelte';
-  import Bars from './Bars.svelte';
-  import BrushContext from './BrushContext.svelte';
-  import ChartAnnotations from './charts/ChartAnnotations.svelte';
+  import type Bars from './Bars.svelte';
+  import type BrushContext from './BrushContext.svelte';
   import ChartClipPath from './ChartClipPath.svelte';
-  import DefaultTooltip from './charts/DefaultTooltip.svelte';
+  // DefaultTooltip is lazy-loaded inline (only when `tooltipContext` is set
+  // and no custom `tooltip` snippet is provided).
+  import type DefaultTooltip from './charts/DefaultTooltip.svelte';
   import Grid from './Grid.svelte';
-  import Group from './Group.svelte';
+  import type Group from './Group.svelte';
   import Highlight from './Highlight.svelte';
-  import Points from './Points.svelte';
-  import Labels from './Labels.svelte';
-  import Legend from './Legend.svelte';
-  import Line from './Line.svelte';
-  import Pie from './Pie.svelte';
+  import type Line from './Line.svelte';
+  import type Pie from './Pie.svelte';
   import Rule from './Rule.svelte';
-  import Spline from './Spline.svelte';
+  import type Spline from './Spline.svelte';
   import type { Canvas, Svg } from './index.js';
   import type { ChartAnnotations as ChartAnnotationsType } from './charts/types.js';
 
+  // ChartAnnotations, Labels, Legend, and Points are dynamically imported
+  // inline in the markup via `{#await import(...)}` so composed
+  // `<Chart><Svg>...</Svg></Chart>` users (no auto-render props) don't pay
+  // for them. The bundler turns each `import()` into a separate chunk. The
+  // type-only imports below keep `ComponentProps<typeof X>` working in the
+  // `props` prop type definition.
+  // Note: lazy-only deps must be added to `vite.config.js`'s `optimizeDeps.include`
+  // (e.g. `d3-interpolate` from Legend) so Vite doesn't reload mid-test in CI.
+  import type Labels from './Labels.svelte';
+  import type Legend from './Legend.svelte';
+  import type Points from './Points.svelte';
+
   const context = getChartContext<TData, XScale, YScale>();
   const settings = getSettings();
 
@@ -204,7 +214,11 @@
     {/if}
 
     <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'}>
-      <ChartAnnotations {annotations} layer="below" />
+      {#if annotations.length > 0}
+        {#await import('./charts/ChartAnnotations.svelte') then { default: ChartAnnotations }}
+          <ChartAnnotations {annotations} layer="below" />
+        {/await}
+      {/if}
 
       {@render belowMarks?.(snippetProps)}
       {@render marks?.(snippetProps)}
@@ -263,23 +277,27 @@
       {#if typeof points === 'function'}
         {@render points(snippetProps)}
       {:else if points}
-        {#each context.series.visibleSeries as s, i (s.key)}
-          <Points
-            seriesKey={s.key}
-            stroke="var(--color-surface-100, light-dark(white, black))"
-            {...getObjectOrNull(points)}
-            {...props.points}
-          />
-        {/each}
+        {#await import('./Points.svelte') then { default: Points }}
+          {#each context.series.visibleSeries as s, i (s.key)}
+            <Points
+              seriesKey={s.key}
+              stroke="var(--color-surface-100, light-dark(white, black))"
+              {...getObjectOrNull(points)}
+              {...props.points}
+            />
+          {/each}
+        {/await}
       {/if}
 
       {#if typeof labels === 'function'}
         {@render labels(snippetProps)}
       {:else if labels}
-        {@const labelSeriesKey = typeof labels === 'object' ? labels.seriesKey : undefined}
-        {#each context.series.visibleSeries.filter((s) => !labelSeriesKey || s.key === labelSeriesKey) as s, i (s.key)}
-          <Labels seriesKey={s.key} {...getObjectOrNull(labels)} {...props.labels} />
-        {/each}
+        {#await import('./Labels.svelte') then { default: Labels }}
+          {@const labelSeriesKey = typeof labels === 'object' ? labels.seriesKey : undefined}
+          {#each context.series.visibleSeries.filter((s) => !labelSeriesKey || s.key === labelSeriesKey) as s, i (s.key)}
+            <Labels seriesKey={s.key} {...getObjectOrNull(labels)} {...props.labels} />
+          {/each}
+        {/await}
       {/if}
 
       {#if typeof highlight === 'function'}
@@ -288,7 +306,11 @@
         <Highlight {...typeof highlight === 'object' ? highlight : {}} {...props.highlight} />
       {/if}
 
-      <ChartAnnotations {annotations} layer="above" />
+      {#if annotations.length > 0}
+        {#await import('./charts/ChartAnnotations.svelte') then { default: ChartAnnotations }}
+          <ChartAnnotations {annotations} layer="above" />
+        {/await}
+      {/if}
     </ChartClipPath>
   </Layer>
 
@@ -297,12 +319,16 @@
   {#if typeof legend === 'function'}
     {@render legend(snippetProps)}
   {:else if legend}
-    <Legend placement="bottom" {...getObjectOrNull(legend)} {...props.legend} />
+    {#await import('./Legend.svelte') then { default: Legend }}
+      <Legend placement="bottom" {...getObjectOrNull(legend)} {...props.legend} />
+    {/await}
   {/if}
 
   {#if typeof tooltip === 'function'}
     {@render tooltip(snippetProps)}
   {:else if tooltipContext}
-    <DefaultTooltip tooltipProps={props.tooltip} canHaveTotal />
+    {#await import('./charts/DefaultTooltip.svelte') then { default: DefaultTooltip }}
+      <DefaultTooltip tooltipProps={props.tooltip} canHaveTotal />
+    {/await}
   {/if}
 {/if}

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

@@ -1,5 +1,5 @@
 import type { ComponentProps, Snippet } from 'svelte';
-import TooltipContext from './tooltip/TooltipContext.svelte';
+import type TooltipContext from './tooltip/TooltipContext.svelte';
 import type Tooltip from './tooltip/Tooltip.svelte';
 import type TooltipHeader from './tooltip/TooltipHeader.svelte';
 import type TooltipList from './tooltip/TooltipList.svelte';
@@ -104,23 +104,23 @@ export type ChartChildrenProps<TData, XScale extends AnyScale = AnyScale, YScale
 };
 import { type ChartState } from '../contexts/chart.js';
 import type { AnyScale } from '../utils/scales.svelte.js';
-import Area from './Area.svelte';
-import Arc from './Arc.svelte';
+import type Area from './Area.svelte';
+import type Arc from './Arc.svelte';
 import Axis from './Axis.svelte';
-import Bars from './Bars.svelte';
-import BrushContext from './BrushContext.svelte';
+import type Bars from './Bars.svelte';
+import type BrushContext from './BrushContext.svelte';
 import Grid from './Grid.svelte';
-import Group from './Group.svelte';
+import type Group from './Group.svelte';
 import Highlight from './Highlight.svelte';
-import Points from './Points.svelte';
-import Labels from './Labels.svelte';
-import Legend from './Legend.svelte';
-import Line from './Line.svelte';
-import Pie from './Pie.svelte';
+import type Line from './Line.svelte';
+import type Pie from './Pie.svelte';
 import Rule from './Rule.svelte';
-import Spline from './Spline.svelte';
+import type Spline from './Spline.svelte';
 import type { Canvas, Svg } from './index.js';
 import type { ChartAnnotations as ChartAnnotationsType } from './charts/types.js';
+import type Labels from './Labels.svelte';
+import type Legend from './Legend.svelte';
+import type Points from './Points.svelte';
 declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
     props: ChartChildrenProps<TData, XScale, YScale>;
     exports: {};

package/dist/components/ComputedStyles.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-  import { computedStyles } from '@layerstack/svelte-actions';
+  import { computedStyles } from '@layerstack/svelte-actions/styles';
   import { cls } from '@layerstack/tailwind';
 
   let { class: className, children }: ComputedStylesProps = $props();

package/dist/components/Grid.svelte

@@ -113,7 +113,8 @@
   import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
-  import Spline from './Spline.svelte';
+  // Spline (used only for radial linear grid lines) is lazy-loaded inline
+  // via `{#await import(...)}` so non-radial grids don't pay for it.
   import { getChartContext } from '../contexts/chart.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
@@ -232,16 +233,18 @@
               class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
             />
           {:else}
-            <Spline
-              data={xTickVals.map((x) => ({ x, y }))}
-              x="x"
-              y="y"
-              {stroke}
-              motion={tweenConfig}
-              curve={curveLinearClosed}
-              {...splineProps}
-              class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
-            />
+            {#await import('./Spline.svelte') then { default: Spline }}
+              <Spline
+                data={xTickVals.map((x) => ({ x, y }))}
+                x="x"
+                y="y"
+                {stroke}
+                motion={tweenConfig}
+                curve={curveLinearClosed}
+                {...splineProps}
+                class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
+              />
+            {/await}
           {/if}
         {:else}
           <Line

package/dist/components/Highlight.svelte

@@ -2,7 +2,7 @@
   import type { ComponentProps, Snippet } from 'svelte';
   import Circle from './Circle.svelte';
   import Line from './Line.svelte';
-  import Bar from './Bar.svelte';
+  import type Bar from './Bar.svelte';
   import Rect from './Rect.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
 
@@ -660,13 +660,15 @@
     {#if typeof bar === 'function'}
       {@render bar()}
     {:else}
-      <Bar
-        motion={motion === 'spring' ? 'spring' : undefined}
-        data={highlightData}
-        {opacity}
-        {...extractLayerProps(bar, 'lc-highlight-bar')}
-        onclick={onBarClick && ((e) => onBarClick(e, { data: highlightData }))}
-      />
+      {#await import('./Bar.svelte') then { default: Bar }}
+        <Bar
+          motion={motion === 'spring' ? 'spring' : undefined}
+          data={highlightData}
+          {opacity}
+          {...extractLayerProps(bar, 'lc-highlight-bar')}
+          onclick={onBarClick && ((e) => onBarClick(e, { data: highlightData }))}
+        />
+      {/await}
     {/if}
   {/if}
 

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

@@ -1,7 +1,7 @@
 import type { ComponentProps, Snippet } from 'svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
-import Bar from './Bar.svelte';
+import type Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { type Accessor } from '../utils/common.js';
 export type HighlightPointData = {

package/dist/components/Hull.svelte

@@ -60,7 +60,7 @@
   import { curveLinearClosed } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import GeoPath from './GeoPath.svelte';
+  import GeoPath from './geo/GeoPath.svelte';
   import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from '../contexts/chart.js';

package/dist/components/Link.svelte

@@ -187,7 +187,10 @@
 
   // Array/data mode: any of x1/y1/x2/y2 is a string or function
   const isArrayMode = $derived(
-    isAccessorAccessor(x1) || isAccessorAccessor(y1) || isAccessorAccessor(x2) || isAccessorAccessor(y2)
+    isAccessorAccessor(x1) ||
+      isAccessorAccessor(y1) ||
+      isAccessorAccessor(x2) ||
+      isAccessorAccessor(y2)
   );
 
   // Pixel mode: any of x1/y1/x2/y2 is a number (and not array mode)
@@ -320,7 +323,7 @@
   );
 
   // --- Array mode paths ---
-  const arrayRows = $derived(isArrayMode ? ((data ?? ctx.data) ?? []) : []);
+  const arrayRows = $derived(isArrayMode ? (data ?? ctx.data ?? []) : []);
 
   function resolvePerDatum<T>(value: T | ((d: any) => T) | undefined, d: any): T | undefined {
     return typeof value === 'function' ? (value as (d: any) => T)(d) : (value as T | undefined);
@@ -334,7 +337,9 @@
   // each per row in array mode (e.g. stroke={(d) => colorScale(...)})
   const strokeProp = $derived((restProps as any).stroke);
   const fillProp = $derived((restProps as any).fill);
-  const strokeWidthProp = $derived((restProps as any)['stroke-width'] ?? (restProps as any).strokeWidth);
+  const strokeWidthProp = $derived(
+    (restProps as any)['stroke-width'] ?? (restProps as any).strokeWidth
+  );
 </script>
 
 {#if isArrayMode}

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

@@ -17,6 +17,6 @@ type TransformContextPropsWithoutHTML = TransformStateOptions & {
 type TransformContextProps = TransformContextPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TransformContextPropsWithoutHTML>;
 import type { Snippet } from 'svelte';
 import type { Without } from '../utils/types.js';
-declare const TransformContext: import("svelte").Component<TransformContextProps, {}, "ref" | "state">;
+declare const TransformContext: import("svelte").Component<TransformContextProps, {}, "state" | "ref">;
 type TransformContext = ReturnType<typeof TransformContext>;
 export default TransformContext;

package/dist/components/Voronoi.svelte

@@ -75,7 +75,7 @@
   import { pointRadial } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import GeoPath from './GeoPath.svelte';
+  import GeoPath from './geo/GeoPath.svelte';
   import Group, { type GroupProps } from './Group.svelte';
   import Path from './Path.svelte';
   import { getChartContext } from '../contexts/chart.js';