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

package/dist/components/charts/BarChart.svelte.test.js

@@ -319,9 +319,14 @@ describe('BarChart', () => {
             });
             const initialWidths = getBarWidths();
             const initialBarWidth = initialWidths[0];
-            // Click a legend button to select only that series (exclusive select)
-            const legendButtons = container.querySelectorAll('.lc-legend-swatch-button');
-            expect(legendButtons.length).toBe(4);
+            // Click a legend button to select only that series (exclusive select).
+            // `Legend` is lazy-loaded inside `ChartChildren`, so wait for the buttons
+            // to mount before interacting.
+            let legendButtons = container.querySelectorAll('.lc-legend-swatch-button');
+            await vi.waitFor(() => {
+                legendButtons = container.querySelectorAll('.lc-legend-swatch-button');
+                expect(legendButtons.length).toBe(4);
+            });
             legendButtons[1].click();
             // After selecting one series, only that series' bars should remain and be wider
             await vi.waitFor(() => {

package/dist/components/charts/DefaultTooltip.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  // Shared tooltip logic across simplified chart components
+  // Shared tooltip logic across simplified chart components.
+  // Use explicit named imports instead of `import * as Tooltip from '../tooltip/index.js'`
+  // so this dynamically-imported chunk doesn't drag in `TooltipContext.svelte`
+  // (which is already in the static graph via Chart.svelte and would otherwise
+  // bloat the lazy chunk and trip Vite dev-server compilation in CI).
   import { sum } from 'd3-array';
   import { getChartContext } from '../../contexts/chart.js';
-  import * as Tooltip from '../tooltip/index.js';
+  import Root from '../tooltip/Tooltip.svelte';
+  import Header from '../tooltip/TooltipHeader.svelte';
+  import List from '../tooltip/TooltipList.svelte';
+  import Item from '../tooltip/TooltipItem.svelte';
+  import Separator from '../tooltip/TooltipSeparator.svelte';
+  const Tooltip = { Root, Header, List, Item, Separator };
   import { format } from '@layerstack/utils';
   import type { ChartChildrenProps } from '../ChartChildren.svelte';
 

package/dist/components/charts/DefaultTooltip.svelte.test.js

@@ -33,6 +33,17 @@ function triggerTooltip(el) {
     el.dispatchEvent(new PointerEvent('pointerenter', eventInit));
     el.dispatchEvent(new PointerEvent('pointermove', eventInit));
 }
+/**
+ * Trigger the tooltip and wait for it to render. Retries the dispatch until
+ * the lazy DefaultTooltip + (when in quadtree mode) d3-quadtree chunks have
+ * resolved — both happen in the background after mount.
+ */
+async function dispatchAndWaitForTooltip(el) {
+    await vi.waitFor(() => {
+        triggerTooltip(el);
+        expect(document.querySelector('.lc-tooltip-item-root')).not.toBeNull();
+    });
+}
 function triggerPointerEvent(el, type) {
     el.dispatchEvent(new PointerEvent(type, { bubbles: true }));
 }
@@ -48,7 +59,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 // Should have a header (portaled to body)
                 const header = document.querySelector('.lc-tooltip-header');
@@ -73,7 +84,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const colorDots = document.querySelectorAll('.lc-tooltip-item-color');
                 expect(colorDots.length).toBe(3);
@@ -91,7 +102,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const items = document.querySelectorAll('.lc-tooltip-item-root');
                 expect(items.length).toBe(4);
@@ -131,7 +142,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // 1 series item, no total
@@ -150,7 +161,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const header = document.querySelector('.lc-tooltip-header');
                 expect(header).not.toBeNull();
@@ -174,7 +185,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // Should show x and y items
@@ -194,7 +205,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 const items = document.querySelectorAll('.lc-tooltip-item-root');
                 // Should show x, y, and r items
@@ -216,7 +227,7 @@ describe('DefaultTooltip', () => {
             });
             const tooltipCtx = container.querySelector('.lc-tooltip-context');
             await expect.element(tooltipCtx).toBeInTheDocument();
-            triggerTooltip(tooltipCtx);
+            await dispatchAndWaitForTooltip(tooltipCtx);
             await vi.waitFor(() => {
                 // Should show a header with the series name
                 const header = document.querySelector('.lc-tooltip-header');

package/dist/components/charts/LineChart.svelte.test.js

@@ -30,9 +30,12 @@ describe('LineChart', () => {
             clientX: rect.x + rect.width / 2,
             clientY: rect.y + rect.height / 2,
         };
-        tooltipRect.dispatchEvent(new PointerEvent('pointerenter', eventInit));
-        tooltipRect.dispatchEvent(new PointerEvent('pointermove', eventInit));
+        // Retry the dispatch inside vi.waitFor — DefaultTooltip is lazy-loaded
+        // by ChartChildren so the first pointer event may fire before its chunk
+        // resolves.
         await vi.waitFor(() => {
+            tooltipRect.dispatchEvent(new PointerEvent('pointerenter', eventInit));
+            tooltipRect.dispatchEvent(new PointerEvent('pointermove', eventInit));
             const colorDot = document.querySelector('.lc-tooltip-item-color');
             expect(colorDot).not.toBeNull();
             const color = colorDot.style.getPropertyValue('--color');

package/dist/components/force/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ForceSimulation } from './ForceSimulation.svelte';
+export * from './ForceSimulation.svelte';

package/dist/components/force/index.js

@@ -0,0 +1,2 @@
+export { default as ForceSimulation } from './ForceSimulation.svelte';
+export * from './ForceSimulation.svelte';

package/dist/components/{GeoCircle.svelte → geo/GeoCircle.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
   export type GeoCirclePropsWithoutHTML = {
     /**
      * The radius of the circle in degrees.
@@ -27,7 +27,7 @@
 
 <script lang="ts">
   import { geoCircle } from 'd3-geo';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let { radius = 90, center = [0, 0], precision = 6, ...restProps }: GeoCircleProps = $props();
 

package/dist/components/{GeoCircle.svelte.d.ts → geo/GeoCircle.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { type GeoPathProps } from './GeoPath.svelte';
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 export type GeoCirclePropsWithoutHTML = {
     /**
      * The radius of the circle in degrees.

package/dist/components/{GeoClipPath.svelte → geo/GeoClipPath.svelte}

@@ -2,9 +2,9 @@
   import type { GeoPermissibleObjects } from 'd3-geo';
   import type { Snippet } from 'svelte';
 
-  import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+  import type { ClipPathPropsWithoutHTML } from '../ClipPath.svelte';
   import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
 
   export type BaseGeoClipPathPropsWithoutHTML = {
     /**
@@ -46,9 +46,9 @@
 <script lang="ts">
   import { geoPath as d3GeoPath } from 'd3-geo';
 
-  import ClipPath from './ClipPath.svelte';
-  import { createId } from '../utils/createId.js';
-  import { getGeoContext } from '../contexts/geo.js';
+  import ClipPath from '../ClipPath.svelte';
+  import { createId } from '../../utils/createId.js';
+  import { getGeoContext } from '../../contexts/geo.js';
 
   const uid = $props.id();
 

package/dist/components/{GeoClipPath.svelte.d.ts → geo/GeoClipPath.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { GeoPermissibleObjects } from 'd3-geo';
-import type { ClipPathPropsWithoutHTML } from './ClipPath.svelte';
+import type { ClipPathPropsWithoutHTML } from '../ClipPath.svelte';
 import type { GeoPathPropsWithoutHTML } from './GeoPath.svelte';
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 export type BaseGeoClipPathPropsWithoutHTML = {
     /**
      * A unique id for the clipPath.

package/dist/components/{GeoEdgeFade.svelte → geo/GeoEdgeFade.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
 
   export type GeoEdgeFadePropsWithoutHTML = {
     link: { source: [number, number]; target: [number, number] };
@@ -21,9 +21,9 @@
   import { scaleLinear } from 'd3-scale';
   import { geoDistance } from 'd3-geo';
 
-  import { getGeoContext } from '../contexts/geo.js';
-  import Group, { type GroupProps } from './Group.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import Group, { type GroupProps } from '../Group.svelte';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
     link,

package/dist/components/{GeoEdgeFade.svelte.d.ts → geo/GeoEdgeFade.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 export type GeoEdgeFadePropsWithoutHTML = {
     link: {
         source: [number, number];
@@ -13,7 +13,7 @@ export type GeoEdgeFadePropsWithoutHTML = {
     children?: Snippet;
 };
 export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML & Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
-import { type GroupProps } from './Group.svelte';
+import { type GroupProps } from '../Group.svelte';
 declare const GeoEdgeFade: import("svelte").Component<GeoEdgeFadeProps, {}, "ref">;
 type GeoEdgeFade = ReturnType<typeof GeoEdgeFade>;
 export default GeoEdgeFade;

package/dist/components/{GeoLegend.svelte → geo/GeoLegend.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-  import type { Placement } from './types.js';
-  import { asAny, type Without } from '../utils/types.js';
+  import type { Placement } from '../types.js';
+  import { asAny, type Without } from '../../utils/types.js';
 
   export type GeoLegendUnits = 'km' | 'mi';
 
@@ -139,7 +139,7 @@
   import { format, type FormatType, type FormatConfig } from '@layerstack/utils';
 
   import { cls } from '@layerstack/tailwind';
-  import { getChartContext } from '../contexts/chart.js';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let {
     units = 'mi',

package/dist/components/{GeoLegend.svelte.d.ts → geo/GeoLegend.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { Placement } from './types.js';
-import { type Without } from '../utils/types.js';
+import type { Placement } from '../types.js';
+import { type Without } from '../../utils/types.js';
 export type GeoLegendUnits = 'km' | 'mi';
 export type GeoLegendVariant = 'bracket' | 'alternating';
 export type GeoLegendPropsWithoutHTML = {

package/dist/components/{GeoPath.svelte → geo/GeoPath.svelte}

@@ -11,8 +11,8 @@
   } from 'd3-geo';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 
-  import type { CommonStyleProps, Without } from '../utils/types.js';
-  import type { PathProps } from './Path.svelte';
+  import type { CommonStyleProps, Without } from '../../utils/types.js';
+  import type { PathProps } from '../Path.svelte';
 
   export type GeoPathPropsWithoutHTML = {
     /**
@@ -79,10 +79,10 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
 
-  import { geoCurvePath } from '../utils/geo.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import Path from './Path.svelte';
+  import { geoCurvePath } from '../../utils/geo.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import Path from '../Path.svelte';
 
   let {
     geoTransform,

package/dist/components/{GeoPath.svelte.d.ts → geo/GeoPath.svelte.d.ts}

@@ -2,8 +2,8 @@ import type { Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { PathProps } from './Path.svelte';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { PathProps } from '../Path.svelte';
 export type GeoPathPropsWithoutHTML = {
     /**
      * GeoJSON data to render
@@ -45,7 +45,7 @@ export type GeoPathPropsWithoutHTML = {
     }]>;
 } & CommonStyleProps & Pick<PathProps, 'motion' | 'draw' | 'marker' | 'markerStart' | 'markerMid' | 'markerEnd' | 'startContent' | 'endContent'>;
 export type GeoPathProps = GeoPathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, GeoPathPropsWithoutHTML>;
-import { geoCurvePath } from '../utils/geo.js';
+import { geoCurvePath } from '../../utils/geo.js';
 declare const GeoPath: import("svelte").Component<GeoPathProps, {}, "ref">;
 type GeoPath = ReturnType<typeof GeoPath>;
 export default GeoPath;

package/dist/components/{GeoPoint.svelte → geo/GeoPoint.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import Circle, { type CircleProps } from './Circle.svelte';
-  import type { Without } from '../utils/types.js';
+  import Circle, { type CircleProps } from '../Circle.svelte';
+  import type { Without } from '../../utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {
     /**
@@ -30,10 +30,10 @@
 </script>
 
 <script lang="ts">
-  import Group from './Group.svelte';
-  import { getLayerContext } from '../contexts/layer.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import Group from '../Group.svelte';
+  import { getLayerContext } from '../../contexts/layer.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
     lat,

package/dist/components/{GeoPoint.svelte.d.ts → geo/GeoPoint.svelte.d.ts}

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import { type CircleProps } from './Circle.svelte';
-import type { Without } from '../utils/types.js';
+import { type CircleProps } from '../Circle.svelte';
+import type { Without } from '../../utils/types.js';
 export type GeoPointPropsWithoutHTML = {
     /**
      * Latitude of the point.

package/dist/components/{GeoProjection.svelte → geo/GeoProjection.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import { GeoState, type GeoStateProps } from '../states/geo.svelte.js';
+  import { GeoState, type GeoStateProps } from '../../states/geo.svelte.js';
 
   export type GeoProjectionProps = GeoStateProps & {
     children: Snippet;
@@ -8,8 +8,8 @@
 </script>
 
 <script lang="ts">
-  import { setGeoContext } from '../contexts/geo.js';
-  import { getChartContext } from '../contexts/chart.js';
+  import { setGeoContext } from '../../contexts/geo.js';
+  import { getChartContext } from '../../contexts/chart.js';
 
   let { children, ...props }: GeoProjectionProps = $props();
 

package/dist/components/{GeoProjection.svelte.d.ts → geo/GeoProjection.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type GeoStateProps } from '../states/geo.svelte.js';
+import { type GeoStateProps } from '../../states/geo.svelte.js';
 export type GeoProjectionProps = GeoStateProps & {
     children: Snippet;
 };

package/dist/components/{GeoRaster.svelte → geo/GeoRaster.svelte}

@@ -70,9 +70,9 @@
   import { untrack } from 'svelte';
   import { geoPath } from 'd3-geo';
 
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { getLayerContext } from '../contexts/layer.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { getLayerContext } from '../../contexts/layer.js';
 
   let {
     image,

package/dist/components/{GeoSpline.svelte → geo/GeoSpline.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import { curveNatural, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-  import type { Without } from '../utils/types.js';
-  import type { PathProps } from './Path.svelte';
+  import type { Without } from '../../utils/types.js';
+  import type { PathProps } from '../Path.svelte';
 
   export type GeoSplinePropsWithoutHTML = {
     /**
@@ -36,9 +36,9 @@
   import { geoOrthographic, geoInterpolate } from 'd3-geo';
   import { line as d3Line } from 'd3-shape';
 
-  import { getGeoContext } from '../contexts/geo.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import Path from './Path.svelte';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import Path from '../Path.svelte';
 
   let { link, loft = 1.0, curve = curveNatural, ...restProps }: GeoSplineProps = $props();
 

package/dist/components/{GeoSpline.svelte.d.ts → geo/GeoSpline.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
-import type { Without } from '../utils/types.js';
-import type { PathProps } from './Path.svelte';
+import type { Without } from '../../utils/types.js';
+import type { PathProps } from '../Path.svelte';
 export type GeoSplinePropsWithoutHTML = {
     /**
      * Link between two points on the globe.

package/dist/components/{GeoTile.svelte → geo/GeoTile.svelte}

@@ -44,12 +44,12 @@
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { getLayerContext } from '../contexts/layer.js';
-  import Group from './Group.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { getLayerContext } from '../../contexts/layer.js';
+  import Group from '../Group.svelte';
   import TileImage from './TileImage.svelte';
-  import { extractLayerProps } from '../utils/attributes.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
     url,

package/dist/components/{GeoTile.svelte.d.ts → geo/GeoTile.svelte.d.ts}

@@ -33,7 +33,7 @@ export type GeoTilePropsWithoutHTML = {
         tiles: any[];
     }]>;
 };
-import Group from './Group.svelte';
+import Group from '../Group.svelte';
 declare const GeoTile: import("svelte").Component<GeoTilePropsWithoutHTML, {}, "">;
 type GeoTile = ReturnType<typeof GeoTile>;
 export default GeoTile;

package/dist/components/{GeoVisible.svelte → geo/GeoVisible.svelte}

@@ -11,8 +11,8 @@
 </script>
 
 <script lang="ts">
-  import { isVisible } from '../utils/geo.js';
-  import { getGeoContext } from '../contexts/geo.js';
+  import { isVisible } from '../../utils/geo.js';
+  import { getGeoContext } from '../../contexts/geo.js';
 
   let { lat, long, children }: GeoVisibleProps = $props();
   const geo = getGeoContext();

package/dist/components/{Graticule.svelte → geo/Graticule.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '../utils/types.js';
+  import type { Without } from '../../utils/types.js';
   import type { ComponentProps } from 'svelte';
   import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
 
@@ -16,8 +16,8 @@
 
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import Group from './Group.svelte';
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import Group from '../Group.svelte';
 
   let { lines, outline, stepX = 10, stepY = 10, ...restProps }: GraticuleProps = $props();
 

package/dist/components/{Graticule.svelte.d.ts → geo/Graticule.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { Without } from '../utils/types.js';
+import type { Without } from '../../utils/types.js';
 import type { ComponentProps } from 'svelte';
 import GeoPath, { type GeoPathProps } from './GeoPath.svelte';
 export type GraticulePropsWithoutHTML = {