layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/components/Blur.svelte

@@ -1,18 +1,48 @@
+<script lang="ts" module>
+  export type BlurProps = {
+    /**
+     * A unique id for the filter.
+     */
+    id?: string;
+
+    /**
+     * The standard deviation for the blur effect.
+     *
+     * @default 5
+     */
+    stdDeviation?: number;
+
+    /**
+     * The default children snippet which provides
+     * the id and url for the filter.
+     */
+    children?: Snippet<[{ id: string; url: string }]>;
+  };
+</script>
+
 <script lang="ts">
-  import { uniqueId } from '@layerstack/utils';
+  import type { Snippet } from 'svelte';
+  import { getRenderContext } from './Chart.svelte';
+  import { createId } from '../utils/createId.js';
+  import { layerClass } from '../utils/attributes.js';
+
+  const uid = $props.id();
+
+  let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
 
-  export let id: string = uniqueId('blur-');
-  export let stdDeviation = 5;
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <filter {id}>
-    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-  </filter>
-</defs>
+{#if renderContext === 'svg'}
+  <defs>
+    <filter {id} class={layerClass('blur-filter')}>
+      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+    </filter>
+  </defs>
 
-{#if $$slots.default}
-  <g filter="url(#{id})">
-    <slot {id} url="url(#{id})" />
-  </g>
+  {#if children}
+    <g filter="url(#{id})" class={layerClass('blur-g')}>
+      {@render children({ id, url: `url(#${id})` })}
+    </g>
+  {/if}
 {/if}

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

@@ -1,22 +1,24 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string;
-        stdDeviation?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            id: string;
-            url: string;
-        };
-    };
+export type BlurProps = {
+    /**
+     * A unique id for the filter.
+     */
+    id?: string;
+    /**
+     * The standard deviation for the blur effect.
+     *
+     * @default 5
+     */
+    stdDeviation?: number;
+    /**
+     * The default children snippet which provides
+     * the id and url for the filter.
+     */
+    children?: Snippet<[{
+        id: string;
+        url: string;
+    }]>;
 };
-export type BlurProps = typeof __propDef.props;
-export type BlurEvents = typeof __propDef.events;
-export type BlurSlots = typeof __propDef.slots;
-export default class Blur extends SvelteComponentTyped<BlurProps, BlurEvents, BlurSlots> {
-}
-export {};
+import type { Snippet } from 'svelte';
+declare const Blur: import("svelte").Component<BlurProps, {}, "">;
+type Blur = ReturnType<typeof Blur>;
+export default Blur;

package/dist/components/Bounds.svelte

@@ -1,26 +1,38 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { MotionProp } from '../utils/motion.svelte.js';
+
+  export type BoundsExtents = Partial<{ x0: number; y0: number; x1: number; y1: number }>;
+  export type BoundsExtentsAccessor = (dimensions: {
+    width: number;
+    height: number;
+  }) => BoundsExtents;
+
+  export type BoundsProps = {
+    domain?: BoundsExtents | BoundsExtentsAccessor | null;
+    range?: BoundsExtents | BoundsExtentsAccessor | null;
+    children?: Snippet<[{ xScale: AnyScale; yScale: AnyScale }]>;
+    motion?: MotionProp;
+  };
+</script>
+
 <script lang="ts">
   import { scaleLinear } from 'd3-scale';
 
-  import { chartContext } from './ChartContext.svelte';
-  import { motionScale } from '../utils/scales.js';
-
-  const { width, height } = chartContext();
+  import { getChartContext } from './Chart.svelte';
+  import { createMotionScale, type AnyScale } from '../utils/scales.svelte.js';
 
-  type Extents = Partial<{ x0: number; y0: number; x1: number; y1: number }>;
-  type ExtentsAcccessor = (dimensions: { width: number; height: number }) => Extents;
+  let { domain, range, motion, children }: BoundsProps = $props();
 
-  export let domain: Extents | ExtentsAcccessor | null | undefined = undefined;
-  export let range: Extents | ExtentsAcccessor | null | undefined = undefined;
-  export let spring: boolean | Parameters<typeof motionScale>[1]['spring'] = undefined;
-  export let tweened: boolean | Parameters<typeof motionScale>[1]['tweened'] = undefined;
+  const ctx = getChartContext();
 
   function getExtents(
-    extents: Extents | ExtentsAcccessor | null | undefined,
+    extents: BoundsExtents | BoundsExtentsAccessor | null | undefined,
     axis: 'x' | 'y',
     fallback: number
   ) {
     const resolvedExtents =
-      typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+      typeof extents === 'function' ? extents({ width: ctx.width, height: ctx.height }) : extents;
 
     return [
       // @ts-expect-error
@@ -30,13 +42,31 @@
     ];
   }
 
-  const xScale = motionScale(scaleLinear as any, { spring, tweened });
-  $: xScale.domain(getExtents(domain, 'x', $width));
-  $: xScale.range(getExtents(range, 'x', $width));
+  const xScale = createMotionScale(scaleLinear as any, motion, {
+    defaultDomain: getExtents(domain, 'x', ctx.width),
+    defaultRange: getExtents(range, 'x', ctx.width),
+  });
+
+  $effect(() => {
+    xScale.domain(getExtents(domain, 'x', ctx.width));
+  });
+
+  $effect(() => {
+    xScale.range(getExtents(range, 'x', ctx.width));
+  });
+
+  const yScale = createMotionScale(scaleLinear as any, motion, {
+    defaultDomain: getExtents(domain, 'y', ctx.height),
+    defaultRange: getExtents(range, 'y', ctx.height),
+  });
+
+  $effect(() => {
+    yScale.domain(getExtents(domain, 'y', ctx.height));
+  });
 
-  const yScale = motionScale(scaleLinear as any, { spring, tweened });
-  $: yScale.domain(getExtents(domain, 'y', $height));
-  $: yScale.range(getExtents(range, 'y', $height));
+  $effect(() => {
+    yScale.range(getExtents(range, 'y', ctx.height));
+  });
 </script>
 
-<slot xScale={$xScale} yScale={$yScale} />
+{@render children?.({ xScale: xScale.current, yScale: yScale.current })}

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

@@ -1,51 +1,25 @@
-import { SvelteComponentTyped } from "svelte";
-import { motionScale } from '../utils/scales.js';
-declare const __propDef: {
-    props: {
-        domain?: Partial<{
-            x0: number;
-            y0: number;
-            x1: number;
-            y1: number;
-        }> | ((dimensions: {
-            width: number;
-            height: number;
-        }) => Partial<{
-            x0: number;
-            y0: number;
-            x1: number;
-            y1: number;
-        }>) | null | undefined;
-        range?: Partial<{
-            x0: number;
-            y0: number;
-            x1: number;
-            y1: number;
-        }> | ((dimensions: {
-            width: number;
-            height: number;
-        }) => Partial<{
-            x0: number;
-            y0: number;
-            x1: number;
-            y1: number;
-        }>) | null | undefined;
-        spring?: boolean | Parameters<typeof motionScale>[1]["spring"];
-        tweened?: boolean | Parameters<typeof motionScale>[1]["tweened"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            xScale: any;
-            yScale: any;
-        };
-    };
+import type { Snippet } from 'svelte';
+import type { MotionProp } from '../utils/motion.svelte.js';
+export type BoundsExtents = Partial<{
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+}>;
+export type BoundsExtentsAccessor = (dimensions: {
+    width: number;
+    height: number;
+}) => BoundsExtents;
+export type BoundsProps = {
+    domain?: BoundsExtents | BoundsExtentsAccessor | null;
+    range?: BoundsExtents | BoundsExtentsAccessor | null;
+    children?: Snippet<[{
+        xScale: AnyScale;
+        yScale: AnyScale;
+    }]>;
+    motion?: MotionProp;
 };
-export type BoundsProps = typeof __propDef.props;
-export type BoundsEvents = typeof __propDef.events;
-export type BoundsSlots = typeof __propDef.slots;
-export default class Bounds extends SvelteComponentTyped<BoundsProps, BoundsEvents, BoundsSlots> {
-}
-export {};
+import { type AnyScale } from '../utils/scales.svelte.js';
+declare const Bounds: import("svelte").Component<BoundsProps, {}, "">;
+type Bounds = ReturnType<typeof Bounds>;
+export default Bounds;