feat(Spline): Add value prop to startContent/endContent snippets

.changeset/cruel-rats-taste.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Spline): Add `value` to `startContent` and `endContent` snippets to easily access the `x` and `y` data values

packages/layerchart/src/lib/components/Spline.svelte

@@ -87,16 +87,16 @@
     /**
      * Add additional content at the start of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    startContent?: Snippet<[{ point: DOMPoint }]>;
+    startContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * Add additional content at the end of the line.
      *
-     * Receives `{ point: DOMPoint }` as a snippet prop.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
      */
-    endContent?: Snippet<[{ point: DOMPoint }]>;
+    endContent?: Snippet<[{ point: DOMPoint; value: { x: number; y: number } }]>;
 
     /**
      * A reference to the `<path>` element.
@@ -385,13 +385,25 @@
 
     {#if startContent && startPoint}
       <Group x={startPoint.x} y={startPoint.y} class={layerClass('spline-g-start')}>
-        {@render startContent({ point: startPoint })}
+        {@render startContent({
+          point: startPoint,
+          value: {
+            x: ctx.xScale?.invert?.(startPoint.x),
+            y: ctx.yScale?.invert?.(startPoint.y),
+          },
+        })}
       </Group>
     {/if}
 
     {#if endContent && endPoint.current}
       <Group x={endPoint.current.x} y={endPoint.current.y} class={layerClass('spline-g-end')}>
-        {@render endContent({ point: endPoint.current })}
+        {@render endContent({
+          point: endPoint.current,
+          value: {
+            x: ctx.xScale?.invert?.(endPoint.current.x),
+            y: ctx.yScale?.invert?.(endPoint.current.y),
+          },
+        })}
       </Group>
     {/if}
   {/key}

packages/layerchart/src/routes/docs/components/Spline/+page.svelte

@@ -8,6 +8,7 @@
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
+  import { format } from '@layerstack/utils';
 
   let pointCount = $state(100);
   let showPoints = $state(false);
@@ -284,6 +285,43 @@
   </Preview>
 </Toggle>
 
+<h2>end slot with draw with value</h2>
+
+<Toggle on let:on={show} let:toggle>
+  <div class="grid grid-cols-[auto_1fr_1fr_1fr] gap-2 mb-2">
+    <Field label="Show" let:id>
+      <Switch checked={show} on:change={toggle} {id} size="md" />
+    </Field>
+    <PathDataMenuField bind:value={pathGenerator} {amplitude} {frequency} {phase} />
+    <CurveMenuField bind:value={curve} />
+    <RangeField label="Points" bind:value={pointCount} min={2} />
+  </div>
+
+  <Preview {data}>
+    <div class="h-[300px] p-4 border rounded-sm">
+      <Chart {data} x="x" y="y" yNice padding={{ left: 16, right: 40, bottom: 24 }}>
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+          {#if show}
+            <Spline {curve} draw={{ duration: 3000 }} class="stroke-primary stroke-2">
+              {#snippet endContent({ value })}
+                <Circle r={5} class="fill-primary" />
+                <Text
+                  value={format(value.y, 'decimal')}
+                  textAnchor="start"
+                  verticalAnchor="middle"
+                  dx={8}
+                />
+              {/snippet}
+            </Spline>
+          {/if}
+        </Svg>
+      </Chart>
+    </div>
+  </Preview>
+</Toggle>
+
 <h2>Canvas</h2>
 
 <Toggle on let:on={show} let:toggle>