layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/Threshold/Threshold.svelte

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

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

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

package/dist/components/Threshold/Threshold.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ThresholdProps, ThresholdSnippetProps } from './Threshold.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ThresholdBase from './Threshold.base.svelte';
+  import Area from '../Area/Area.svg.svelte';
+  import ClipPath from '../ClipPath/ClipPath.svg.svelte';
+  import type { ThresholdProps } from './Threshold.shared.svelte.js';
+
+  let props: ThresholdProps = $props();
+</script>
+
+<ThresholdBase {Area} {ClipPath} {...props} />

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

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

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

@@ -1,107 +1,12 @@
 <script lang="ts" module>
-  import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+  import type { Component } from 'svelte';
+  import type { TrailProps } from './Trail.shared.svelte.js';
 
-  import { accessor, type Accessor } from '../utils/common.js';
-  import type { MotionProp } from '../utils/motion.svelte.js';
-  import type { DataProp } from '../utils/dataProp.js';
-  import type { TrailCap } from '../utils/trail.js';
-  import type { PathProps } from './Path.svelte';
-
-  export type TrailPropsWithoutHTML = {
-    /**
-     * Override data instead of using context
-     */
-    data?: any;
-
-    /**
-     * Override `x` accessor from Chart context
-     */
-    x?: Accessor;
-
-    /**
-     * Override `y` accessor from Chart context
-     */
-    y?: Accessor;
-
-    /**
-     * Series key to use for accessor. Only applicable if `<Chart>` uses `series` and `x`/`y` are not set.
-     */
-    seriesKey?: string;
-
-    /**
-     * Function to determine if a point is defined
-     *
-     * @example
-     * <Trail defined={(d) => d.value !== null} />
-     */
-    defined?: Parameters<Line<any>['defined']>[0];
-
-    /**
-     * Width at each point. Falls back to Chart's `r` accessor if not set.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 4 (when Chart `r` is also not set)
-     */
-    r?: DataProp;
-
-    /**
-     * Curve interpolation applied to the trail centerline.
-     * @example
-     * import { curveNatural } from 'd3-shape';
-     * <Trail curve={curveNatural} />
-     */
-    curve?: CurveFactory | CurveFactoryLineOnly;
-
-    /**
-     * Cap style for trail endpoints.
-     * - 'round' (default): semicircular end caps
-     * - 'butt': flat ends with polygon offset outline
-     * @default 'round'
-     */
-    cap?: TrailCap;
-
-    /**
-     * Tension parameter for applicable curve factories (0–1).
-     * Applied via curveCardinal.tension(), curveCatmullRom.alpha(), or curveBundle.beta().
-     */
-    tension?: number;
-
-    /**
-     * Number of interpolated samples per segment for curve resampling.
-     * Auto-estimated when omitted.
-     */
-    resolution?: number;
-
-    /**
-     * Fill color
-     */
-    fill?: string;
-
-    /**
-     * Fill opacity
-     */
-    fillOpacity?: number;
-
-    /**
-     * Opacity
-     */
-    opacity?: number;
-
-    /**
-     * CSS class
-     */
-    class?: string;
-
-    /**
-     * Whether to animate the path using tweened interpolation.
-     */
-    motion?: MotionProp;
+  export type TrailBaseLayerComponents = {
+    Path: Component<any>;
   };
 
-  export type TrailProps = TrailPropsWithoutHTML &
-    Omit<PathProps, keyof TrailPropsWithoutHTML | 'r'>;
+  export type TrailBaseProps = TrailProps & TrailBaseLayerComponents;
 </script>
 
 <script lang="ts">
@@ -109,16 +14,17 @@
   import { interpolatePath } from 'd3-interpolate-path';
   import { cls } from '@layerstack/tailwind';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
-  import { resolveDataProp } from '../utils/dataProp.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { computeTrailPath } from '../utils/trail.js';
-  import { createMotion, extractTweenConfig } from '../utils/motion.svelte.js';
-  import Path from './Path.svelte';
+  import { isScaleBand } from '../../utils/scales.svelte.js';
+  import { resolveDataProp, type DataProp } from '../../utils/dataProp.js';
+  import { accessor } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { computeTrailPath } from '../../utils/trail.js';
+  import { createMotion, extractTweenConfig } from '../../utils/motion.svelte.js';
 
   const ctx = getChartContext();
 
   let {
+    Path,
     data,
     x,
     y,
@@ -135,7 +41,7 @@
     motion,
     class: className,
     ...restProps
-  }: TrailProps = $props();
+  }: TrailBaseProps = $props();
 
   let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
   let seriesAccessor = $derived(series?.value ?? (series?.data ? undefined : series?.key));
@@ -153,22 +59,14 @@
   function getScaleValue(
     data: any,
     scale: typeof ctx.xScale | typeof ctx.yScale,
-    accessor: Function
+    accessorFn: Function
   ) {
-    let value = accessor(data);
-
-    if (Array.isArray(value)) {
-      value = max(value);
-    }
-
-    if (scale.domain().length) {
-      return scale(value);
-    } else {
-      return value;
-    }
+    let value = accessorFn(data);
+    if (Array.isArray(value)) value = max(value);
+    if (scale.domain().length) return scale(value);
+    return value;
   }
 
-  /** Resolve r per data point: prop > Chart r accessor > default 4 */
   const resolvedR = $derived(r ?? (ctx.config.r as DataProp | undefined));
 
   const trailPath = $derived.by(() => {
@@ -194,12 +92,7 @@
     return computeTrailPath(points, { curve, cap, tension, resolution });
   });
 
-  /**
-   * Provide initial baseline trail so it animates up from y=0 on mount.
-   * Computes a trail path with all y-values at baseline.
-   */
   function defaultPathData() {
-    // Skip baseline computation when motion is not initially enabled (faster initial render)
     if (!extractTweenConfig(motion)) return '';
 
     if (ctx.config.x) {
@@ -229,13 +122,11 @@
     return '';
   }
 
-  // Always create tween motion so it's ready when motion is toggled on
   const tweenState = createMotion(defaultPathData(), () => trailPath, {
     type: 'tween',
     interpolate: interpolatePath,
   });
 
-  /** Reactively check whether motion is enabled */
   const isTweened = $derived(extractTweenConfig(motion) != null);
 
   ctx.registerComponent({

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { TrailProps } from './Trail.shared.svelte.js';
+export type TrailBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type TrailBaseProps = TrailProps & TrailBaseLayerComponents;
+declare const Trail: Component<TrailBaseProps, {}, "">;
+type Trail = ReturnType<typeof Trail>;
+export default Trail;

package/dist/components/Trail/Trail.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { TrailProps, TrailPropsWithoutHTML } from './Trail.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import TrailBase from './Trail.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import type { TrailProps } from './Trail.shared.svelte.js';
+
+  let props: TrailProps = $props();
+</script>
+
+<TrailBase {Path} {...props} />

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

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

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

@@ -0,0 +1,26 @@
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import type { Accessor } from '../../utils/common.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+import type { DataProp } from '../../utils/dataProp.js';
+import type { TrailCap } from '../../utils/trail.js';
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+export type TrailPropsWithoutHTML = {
+    data?: any;
+    x?: Accessor;
+    y?: Accessor;
+    seriesKey?: string;
+    defined?: Parameters<Line<any>['defined']>[0];
+    /** Width at each point. @default 4 */
+    r?: DataProp;
+    curve?: CurveFactory | CurveFactoryLineOnly;
+    /** @default 'round' */
+    cap?: TrailCap;
+    tension?: number;
+    resolution?: number;
+    fill?: string;
+    fillOpacity?: number;
+    opacity?: number;
+    class?: string;
+    motion?: MotionProp;
+};
+export type TrailProps = TrailPropsWithoutHTML & Omit<PathProps, keyof TrailPropsWithoutHTML | 'r'>;

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

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

package/dist/components/Trail/Trail.svelte

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

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

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

package/dist/components/Trail/Trail.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { TrailProps, TrailPropsWithoutHTML } from './Trail.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import TrailBase from './Trail.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import type { TrailProps } from './Trail.shared.svelte.js';
+
+  let props: TrailProps = $props();
+</script>
+
+<TrailBase {Path} {...props} />

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

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

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

@@ -57,7 +57,10 @@ describe('TransformContext', () => {
             });
             await vi.waitFor(() => expect(chartContext).toBeDefined());
             // Orthographic is a globe — processTranslate should be a function
-            expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            // (TransformContext is lazy-loaded, so wait for it to resolve)
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            });
             // Switch to Mercator (flat)
             chartProps.geo = {
                 projection: geoMercator,
@@ -88,8 +91,9 @@ describe('TransformContext', () => {
                 },
             });
             await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // TransformContext is lazy-loaded, so wait for fitSize to apply
+            await vi.waitFor(() => expect(chartContext.transform.scale).toBeGreaterThan(1));
             const initialScale = chartContext.transform.scale;
-            expect(initialScale).toBeGreaterThan(1); // fitSize should give a scale > 1
             // Simulate zoom in
             chartContext.transform.setScale(initialScale * 2, { instant: true });
             await tick();
@@ -119,8 +123,9 @@ describe('TransformContext', () => {
                 },
             });
             await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // TransformContext is lazy-loaded, so wait for fitSize to apply
+            await vi.waitFor(() => expect(chartContext.transform.scale).toBeGreaterThan(10));
             const initialScale = chartContext.transform.scale;
-            expect(initialScale).toBeGreaterThan(10); // Mercator fitSize scale is typically large
             // Try to zoom way beyond 2x — should be clamped to 2x initial
             chartContext.transform.setScale(initialScale * 5, { instant: true });
             await tick();
@@ -151,7 +156,10 @@ describe('TransformContext', () => {
                 },
             });
             await vi.waitFor(() => expect(chartContext).toBeDefined());
-            expect(chartContext.transform.disablePointer).toBe(false);
+            // TransformContext is lazy-loaded, so wait for it to resolve
+            await vi.waitFor(() => {
+                expect(chartContext.transform.disablePointer).toBe(false);
+            });
             // Enable disablePointer
             chartProps.transform = {
                 mode: 'canvas',