From bcd19f96c471de0031a15e886a3736a72bba0851 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 2 Jun 2025 21:23:26 -0400
Subject: [PATCH] feat(Spline): Add `value` to `startContent` and `endContent`
 snippets to easily access the `x` and `y` data values

---
 .changeset/cruel-rats-taste.md                |  5 +++
 .../src/lib/components/Spline.svelte          | 24 +++++++++---
 .../docs/components/Spline/+page.svelte       | 38 +++++++++++++++++++
 3 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cruel-rats-taste.md

diff --git a/.changeset/cruel-rats-taste.md b/.changeset/cruel-rats-taste.md
new file mode 100644
index 000000000..076131b31
--- /dev/null
+++ b/.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
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index 53862a303..9e36d155c 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/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}
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index 662ae27ce..81f5a6f2d 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/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>