layerchart 2.0.0-next.61 → 2.0.0-next.62

package/dist/canvas.d.ts

@@ -124,8 +124,8 @@ export { default as Graticule } from './components/geo/Graticule/Graticule.canva
 export type { GraticuleProps, GraticulePropsWithoutHTML, } from './components/geo/Graticule/Graticule.shared.svelte.js';
 export { default as Ribbon } from './components/graph/Ribbon/Ribbon.canvas.svelte';
 export type { RibbonProps, RibbonPropsWithoutHTML, } from './components/graph/Ribbon/Ribbon.shared.svelte.js';
-export { default as Blur } from './components/Blur.svelte';
-export * from './components/Blur.svelte';
+export { default as Blur } from './components/Blur/Blur.svelte';
+export * from './components/Blur/Blur.svelte';
 export { default as Bounds } from './components/Bounds.svelte';
 export * from './components/Bounds.svelte';
 export { default as BrushContext } from './components/BrushContext.svelte';

package/dist/canvas.js

@@ -75,8 +75,8 @@ export { default as Ribbon } from './components/graph/Ribbon/Ribbon.canvas.svelt
 // helpers, context providers, or composite chart wrappers). Re-exported here
 // so the per-layer sub-path has a complete API.
 // Helpers / context providers
-export { default as Blur } from './components/Blur.svelte';
-export * from './components/Blur.svelte';
+export { default as Blur } from './components/Blur/Blur.svelte';
+export * from './components/Blur/Blur.svelte';
 export { default as Bounds } from './components/Bounds.svelte';
 export * from './components/Bounds.svelte';
 export { default as BrushContext } from './components/BrushContext.svelte';

package/dist/components/Arc/Arc.base.svelte

@@ -20,24 +20,66 @@
     Path,
     ref: refProp = $bindable(),
     trackRef: trackRefProp = $bindable(),
-    fill,
-    fillOpacity,
+    // Override the `.lc-path` CSS stroke default so arcs don't get a visible outline
     stroke = 'none',
-    strokeWidth,
-    opacity,
+    // Arc-specific config — extracted out of `...restProps` so it doesn't
+    // leak onto `<Path>`. `motion` in particular would otherwise make Path
+    // also tween the path-string on top of the end-angle tween that
+    // `ArcState` already drives, producing visibly wrong arcs.
+    motion,
+    value,
+    initialValue,
+    domain,
+    range,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    padAngle,
+    trackStartAngle,
+    trackEndAngle,
+    trackInnerRadius,
+    trackOuterRadius,
+    trackCornerRadius,
+    trackPadAngle,
+    offset,
+    // Pointer / tooltip wiring
     data,
+    tooltip,
+    track = false,
     onpointerenter = () => {},
     onpointermove = () => {},
     onpointerleave = () => {},
     ontouchmove = () => {},
-    tooltip,
-    track = false,
     children,
     class: className,
     ...restProps
   }: ArcBaseProps = $props();
 
-  const c = new ArcState(() => ({ ...restProps, fill, fillOpacity, stroke, strokeWidth, opacity, data, tooltip, track }) as ArcProps);
+  const c = new ArcState(
+    () =>
+      ({
+        motion,
+        value,
+        initialValue,
+        domain,
+        range,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        padAngle,
+        trackStartAngle,
+        trackEndAngle,
+        trackInnerRadius,
+        trackOuterRadius,
+        trackCornerRadius,
+        trackPadAngle,
+        offset,
+      }) as ArcProps
+  );
 
   let ref = $state<SVGPathElement>();
 
@@ -78,11 +120,7 @@
   bind:pathRef={ref}
   pathData={c.arc()}
   transform="translate({c.xOffset}, {c.yOffset})"
-  {fill}
-  {fillOpacity}
   {stroke}
-  {strokeWidth}
-  {opacity}
   {...restProps}
   class={cls('lc-arc-line', className)}
   onpointerenter={onPointerEnter}

package/dist/components/{ArcLabel.svelte.test.js → ArcLabel/ArcLabel.svelte.test.js}

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
-import Arc from './Arc/Arc.svelte';
-import ArcLabel from './ArcLabel/ArcLabel.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
+import Arc from '../Arc/Arc.svelte';
+import ArcLabel from './ArcLabel.svelte';
 const defaultArcProps = {
     fill: 'currentColor',
     value: 50,

package/dist/components/Blur/Blur.canvas.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  let { stdDeviation = 5, children }: BlurProps = $props();
+
+  const chartCtx = getChartContext();
+
+  chartCtx.registerComponent({
+    name: 'Blur',
+    kind: 'group',
+    canvasRender: {
+      render: (ctx) => {
+        ctx.filter = `blur(${stdDeviation}px)`;
+      },
+      deps: () => [stdDeviation],
+    },
+  });
+</script>
+
+{@render children?.()}

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

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

package/dist/components/Blur/Blur.html.svelte

@@ -0,0 +1,11 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  let { children }: BlurProps = $props();
+</script>
+
+{@render children?.()}

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

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

package/dist/components/{Blur.svelte.d.ts → Blur/Blur.shared.svelte.d.ts}

@@ -1,4 +1,5 @@
-export type BlurProps = {
+import type { Snippet } from 'svelte';
+export type BlurPropsWithoutHTML = {
     /**
      * A unique id for the filter.
      */
@@ -15,7 +16,4 @@ export type BlurProps = {
      */
     children?: Snippet;
 };
-import type { Snippet } from 'svelte';
-declare const Blur: import("svelte").Component<BlurProps, {}, "">;
-type Blur = ReturnType<typeof Blur>;
-export default Blur;
+export type BlurProps = BlurPropsWithoutHTML;

package/dist/components/Blur/Blur.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import BlurSvg from './Blur.svg.svelte';
+  import BlurCanvas from './Blur.canvas.svelte';
+  import BlurHtml from './Blur.html.svelte';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: BlurProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <BlurSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <BlurCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <BlurHtml {...props} />
+{/if}

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

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

package/dist/components/Blur/Blur.svg.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type { BlurProps, BlurPropsWithoutHTML } from './Blur.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { BlurProps } from './Blur.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+</script>
+
+<defs>
+  <filter {id} class="lc-blur-filter">
+    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+  </filter>
+</defs>
+
+{#if children}
+  <g filter="url(#{id})" class="lc-blur-g">
+    {@render children()}
+  </g>
+{/if}

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

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

package/dist/components/Chart/Chart.base.svelte

@@ -29,6 +29,7 @@
   import { getSettings } from '../../contexts/settings.js';
   import { setChartContext } from '../../contexts/chart.js';
   import { ChartState } from '../../states/chart.svelte.js';
+  import type { ChartPropsWithoutHTML } from './Chart.shared.svelte.js';
   import { isScaleBand } from '../../utils/scales.svelte.js';
   import { getObjectOrNull } from '../../utils/common.js';
   import {
@@ -71,13 +72,18 @@
   let brushXDomain = $state<BrushDomainType>();
   let brushYDomain = $state<BrushDomainType>();
 
-  const chartState = new ChartState<TData, XScale, YScale>(() => ({
-    ref: refProp,
-    context: contextProp,
-    ...props,
-    xDomain: brushXDomain ?? props.xDomain,
-    yDomain: brushYDomain ?? props.yDomain,
-  }));
+  // Pass the `$props()` proxy directly — `props.X` reads stay reactive and
+  // don't pay the cost of an `{...props}` spread (recursive `ownKeys` across
+  // nested rest/spread proxies). Brush selections are supplied as getters so
+  // the chart's domain calculation can layer them on top of `props.xDomain`
+  // / `props.yDomain` at the read sites.
+  const chartState = new ChartState<TData, XScale, YScale>(
+    props as ChartPropsWithoutHTML<TData, XScale, YScale>,
+    {
+      brushXDomain: () => brushXDomain,
+      brushYDomain: () => brushYDomain,
+    }
+  );
 
   let ref = $state<HTMLElement>();
   $effect.pre(() => {

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

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

package/dist/components/{ChartCore.svelte.test.js → Chart/ChartCore.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { tick } from 'svelte';
-import ChartCoreTestHarness from './tests/ChartCoreTestHarness.svelte';
+import ChartCoreTestHarness from '../tests/ChartCoreTestHarness.svelte';
 const data = [
     { x: 0, y: 10 },
     { x: 1, y: 20 },

package/dist/components/Link/Link.base.svelte

@@ -18,7 +18,6 @@
     getLinkRadialPresetPath,
   } from '../../utils/linkUtils.js';
   import { getChartContext } from '../../contexts/chart.js';
-  import { extractLayerProps } from '../../utils/attributes.js';
   import { accessor, type Accessor } from '../../utils/common.js';
   import { cls } from '@layerstack/tailwind';
   import {
@@ -203,11 +202,20 @@
       }
     : undefined;
 
-  const motionPath = createMotion(
-    '',
-    () => singlePathData,
-    tweenOptions ? tweenOptions : { type: 'none' }
-  );
+  // Pass `tweenOptions` (possibly undefined) so `createMotion` takes its
+  // fast-path passthrough when no tween is configured — avoids allocating
+  // a MotionNone container + per-instance `$effect` that fires on every
+  // x1/y1/x2/y2 change. Critical for force-simulation graphs which can
+  // have hundreds of links updating on every tick.
+  const motionPath = createMotion('', () => singlePathData, tweenOptions);
+
+  // Stable getter handed to `<Path>` instead of `motionPath.current`.
+  // Reading `motionPath.current` directly in the template would subscribe
+  // *this* component's template to per-tick updates, forcing the entire
+  // `<Path>` block to re-evaluate (and re-spread props) on every change.
+  // By passing a function reference, the per-tick `current` read happens
+  // inside `<Path>`'s own template — the parent stays stable.
+  const getPathData = () => motionPath.current;
 
   const arrayRows = $derived(isArrayMode ? data ?? ctx.data ?? [] : []);
 
@@ -237,7 +245,6 @@
       {markerStart}
       {markerMid}
       {markerEnd}
-      {...extractLayerProps(restProps, 'lc-link')}
       {...restProps}
       stroke={resolvedStroke}
       fill={resolvePerDatum(fillProp, d)}
@@ -247,13 +254,12 @@
   {/each}
 {:else}
   <Path
-    pathData={motionPath.current}
+    pathData={getPathData}
     bind:pathRef
     {marker}
     {markerStart}
     {markerMid}
     {markerEnd}
-    {...extractLayerProps(restProps, 'lc-link')}
     {...restProps}
     class={cls('lc-link', typeof classProp === 'string' ? classProp : undefined)}
   />