layerchart 2.0.0-next.60 → 2.0.0-next.62

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/Trail.base.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { TrailProps } from './Trail.shared.svelte.js';
+
+  export type TrailBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type TrailBaseProps = TrailProps & TrailBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { max } from 'd3-array';
+  import { interpolatePath } from 'd3-interpolate-path';
+  import { cls } from '@layerstack/tailwind';
+
+  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,
+    seriesKey,
+    defined,
+    r,
+    curve,
+    cap,
+    tension,
+    resolution,
+    fill,
+    fillOpacity,
+    opacity,
+    motion,
+    class: className,
+    ...restProps
+  }: TrailBaseProps = $props();
+
+  let series = $derived(ctx.series.series.find((s) => s.key === seriesKey));
+  let seriesAccessor = $derived(series?.value ?? (series?.data ? undefined : series?.key));
+
+  const xAccessor = $derived(
+    accessor(x ?? (ctx.valueAxis === 'x' ? seriesAccessor : undefined) ?? ctx.x)
+  );
+  const yAccessor = $derived(
+    accessor(y ?? (ctx.valueAxis === 'y' ? seriesAccessor : undefined) ?? ctx.y)
+  );
+
+  const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
+  const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
+
+  function getScaleValue(
+    data: any,
+    scale: typeof ctx.xScale | typeof ctx.yScale,
+    accessorFn: Function
+  ) {
+    let value = accessorFn(data);
+    if (Array.isArray(value)) value = max(value);
+    if (scale.domain().length) return scale(value);
+    return value;
+  }
+
+  const resolvedR = $derived(r ?? (ctx.config.r as DataProp | undefined));
+
+  const trailPath = $derived.by(() => {
+    const resolvedData = data ?? series?.data ?? ctx.data;
+    const definedFn = defined ?? ((d: any) => xAccessor(d) != null && yAccessor(d) != null);
+
+    const points = resolvedData
+      .filter((d: any, i: number) => definedFn(d, i, resolvedData))
+      .map((d: any) => ({
+        x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
+        y: getScaleValue(d, ctx.yScale, yAccessor) + yOffset,
+        r:
+          resolvedR != null
+            ? resolveDataProp(
+                resolvedR,
+                d,
+                ctx.rScale,
+                typeof resolvedR === 'number' ? resolvedR : 4
+              )
+            : 4,
+      }));
+
+    return computeTrailPath(points, { curve, cap, tension, resolution });
+  });
+
+  function defaultPathData() {
+    if (!extractTweenConfig(motion)) return '';
+
+    if (ctx.config.x) {
+      const resolvedData = data ?? series?.data ?? ctx.data;
+      const definedFn = defined ?? ((d: any) => xAccessor(d) != null && yAccessor(d) != null);
+      const baseline = Math.min(ctx.yScale(0) ?? ctx.yRange[0], ctx.yRange[0]);
+
+      const points = resolvedData
+        .filter((d: any, i: number) => definedFn(d, i, resolvedData))
+        .map((d: any) => ({
+          x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
+          y: baseline,
+          r:
+            resolvedR != null
+              ? resolveDataProp(
+                  resolvedR,
+                  d,
+                  ctx.rScale,
+                  typeof resolvedR === 'number' ? resolvedR : 4
+                )
+              : 4,
+        }));
+
+      return computeTrailPath(points, { curve, cap, tension, resolution });
+    }
+
+    return '';
+  }
+
+  // Only allocate the tween container when the user opts into a tween via
+  // `motion`; otherwise the template reads `trailPath` directly.
+  const tweenState =
+    extractTweenConfig(motion) != null
+      ? createMotion(defaultPathData(), () => trailPath, {
+          type: 'tween',
+          interpolate: interpolatePath,
+        })
+      : null;
+
+  ctx.registerComponent({
+    name: 'Trail',
+    kind: 'mark',
+    markInfo: () => ({ data, x, y, seriesKey, curve }),
+  });
+</script>
+
+<Path
+  pathData={tweenState ? tweenState.current : trailPath}
+  {fill}
+  {fillOpacity}
+  {opacity}
+  stroke="none"
+  class={cls('lc-trail', className)}
+  {...restProps}
+/>
+
+<style>
+  @layer base {
+    :global(:where(.lc-trail)) {
+      --fill-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-layout-svg .lc-trail, svg.lc-trail):not([fill])) {
+      fill: var(--fill-color);
+    }
+  }
+</style>

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',

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

@@ -1,132 +1,19 @@
 <script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { Without } from '../utils/types.js';
-  import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-  import type { VectorAnchor } from '../utils/path.js';
+  import type { Component } from 'svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
 
-  export type VectorShape = 'arrow' | 'arrow-filled' | 'spike';
+  export type VectorBaseLayerComponents = {
+    Path: Component<any>;
+  };
 
-  export type VectorPropsWithoutHTML = {
-    /**
-     * The x position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    x?: DataProp;
-
-    /**
-     * The initial x position (pixel mode only).
-     * @default x
-     */
-    initialX?: number;
-
-    /**
-     * The y position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    y?: DataProp;
-
-    /**
-     * The initial y position (pixel mode only).
-     * @default y
-     */
-    initialY?: number;
-
-    /**
-     * The length of the vector in pixels.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 12
-     */
-    length?: DataProp;
-
-    /**
-     * The initial length of the vector (pixel mode only).
-     * @default length
-     */
-    initialLength?: number;
-
-    /**
-     * The rotation angle in degrees, clockwise from north (up).
-     * - `number`: direct degree value
-     * - `string`: data property name (raw value extracted, no scale)
-     * - `function(d)`: accessor called per data item (raw value, no scale)
-     *
-     * @default 0
-     */
-    rotate?: DataProp;
-
-    /**
-     * The shape of the vector.
-     * - `"arrow"`: a line with a V-shaped arrowhead at the tip (stroke-based)
-     * - `"arrow-filled"`: a solid arrow with a tapered tail and triangular arrowhead (fill-based)
-     * - `"spike"`: a thin filled triangle
-     *
-     * @default 'arrow'
-     */
-    shape?: VectorShape;
-
-    /**
-     * Where the position (x, y) is relative to the vector.
-     * - `"start"`: base of the vector is at the position
-     * - `"middle"`: center of the vector is at the position
-     * - `"end"`: tip of the vector is at the position
-     *
-     * Defaults to `"middle"` for arrow shape and `"start"` for spike shape.
-     */
-    anchor?: VectorAnchor;
-
-    /**
-     * Width of the vector shape in pixels (arrowhead wingspan or spike base).
-     * When not set, scales proportionally with length (~25% of length).
-     */
-    width?: number;
-
-    /**
-     * Data array to iterate over in data mode.
-     * Falls back to chart context data when not provided.
-     */
-    data?: any[];
-
-    /**
-     * Key function for keyed {#each} rendering in data mode.
-     * @default (d, i) => i
-     */
-    key?: (d: any, index: number) => any;
-
-    /** Motion configuration (pixel mode only). */
-    motion?: MotionProp;
-
-    /**
-     * Custom content to render inside the vector's positioned/rotated coordinate space.
-     * When provided, replaces the default shape rendering.
-     * The snippet receives `{ length, d }` where `d` is the data item (data mode only).
-     * Content is rendered at the origin, rotated so "up" (negative y) points in the vector direction.
-     */
-    children?: Snippet<[{ length: number; d?: any }]>;
-  } & DataDrivenStyleProps;
-
-  export type VectorProps = VectorPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, VectorPropsWithoutHTML>;
+  export type VectorBaseProps = VectorProps & VectorBaseLayerComponents;
 </script>
 
 <script lang="ts">
   import { untrack } from 'svelte';
-
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { getLayerContext } from '../contexts/layer.js';
-  import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
   import {
     hasAnyDataProp,
     resolveDataProp,
@@ -134,18 +21,18 @@
     resolveGeoDataPair,
     resolveStyleProp,
     resolveColorProp,
-  } from '../utils/dataProp.js';
-  import { chartDataArray } from '../utils/common.js';
+  } from '../../utils/dataProp.js';
+  import { chartDataArray } from '../../utils/common.js';
   import { cls } from '@layerstack/tailwind';
   import {
     vectorArrowPath,
     vectorArrowFilledPath,
     vectorSpikePath,
     transformVectorPath,
-  } from '../utils/path.js';
-  import Path from './Path.svelte';
+  } from '../../utils/path.js';
 
   let {
+    Path,
     x = 0,
     initialX: initialXProp,
     y = 0,
@@ -167,18 +54,13 @@
     opacity,
     class: className,
     ...restProps
-  }: VectorProps = $props();
+  }: VectorBaseProps = $props();
 
-  // Filled shapes use fill instead of stroke for their default styling
   const isFilled = $derived(shape === 'spike' || shape === 'arrow-filled');
-
-  // Resolve anchor default based on shape
   const resolvedAnchor = $derived(anchor ?? (isFilled ? 'start' : 'middle'));
 
-  // Data mode detection
   const dataMode = $derived(hasAnyDataProp(x, y, lengthProp, rotateProp));
 
-  // Per-item style mode: when any style prop is a function, we must render individual paths
   const hasPerItemStyles = $derived(
     typeof fill === 'function' ||
       typeof stroke === 'function' ||
@@ -188,25 +70,21 @@
       typeof className === 'function'
   );
 
-  // Contexts
   const chartCtx = getChartContext();
   const geo = getGeoContext();
-  const layerCtx = getLayerContext();
 
-  // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
+  const resolvedData: any[] = $derived(
+    dataMode ? dataProp ?? chartDataArray(chartCtx.data) : []
+  );
 
-  // Resolve a single data item to pixel coordinates and values
   function resolveVector(d: any) {
     let resolvedX: number, resolvedY: number;
-
     if (geo.projection) {
       [resolvedX, resolvedY] = resolveGeoDataPair(x, y, d, geo.projection);
     } else {
       resolvedX = resolveDataProp(x, d, chartCtx.xScale, 0);
       resolvedY = resolveDataProp(y, d, chartCtx.yScale, 0);
     }
-
     return {
       x: resolvedX,
       y: resolvedY,
@@ -217,11 +95,10 @@
         typeof lengthProp === 'number' ? lengthProp : 12
       ),
       rotate:
-        typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
+        typeof rotateProp === 'number' ? rotateProp : extractRawDataValue(rotateProp, d) ?? 0,
     };
   }
 
-  // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
   if (dataMotionMap) {
@@ -239,7 +116,6 @@
     });
   }
 
-  // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
     if (!dataMode) return [];
     return resolvedData.map((d, i) => {
@@ -257,7 +133,6 @@
     });
   });
 
-  // --- Anchor offset for custom children ---
   function getAnchorOffset(len: number) {
     switch (resolvedAnchor) {
       case 'start':
@@ -270,8 +145,6 @@
     }
   }
 
-  // --- Path generation ---
-  // Generate local path data (at origin, pointing up)
   function getLocalPathData(len: number) {
     const w = width ?? len * 0.25;
     if (shape === 'spike') {
@@ -283,12 +156,10 @@
     return vectorArrowPath({ length: len, anchor: resolvedAnchor, width: w });
   }
 
-  // Generate absolute path data with position and rotation baked in
   function getAbsolutePathData(itemX: number, itemY: number, len: number, rot: number) {
     return transformVectorPath(getLocalPathData(len), itemX, itemY, rot);
   }
 
-  // --- Combined path for all items (single Path element for SVG + Canvas) ---
   const combinedPathData = $derived.by(() => {
     if (dataMode) {
       return resolvedItems
@@ -298,7 +169,6 @@
     return null;
   });
 
-  // --- Pixel mode ---
   const initialX = initialXProp ?? (typeof x === 'number' ? x : 0);
   const initialY = initialYProp ?? (typeof y === 'number' ? y : 0);
   const initialLength = initialLengthProp ?? (typeof lengthProp === 'number' ? lengthProp : 12);
@@ -319,7 +189,6 @@
 </script>
 
 {#if children}
-  <!-- Custom children: use <g> with transform for positioning/rotation -->
   {#if dataMode}
     {#each resolvedItems as item (item.key)}
       {@const offset = getAnchorOffset(item.length)}
@@ -339,7 +208,6 @@
     </g>
   {/if}
 {:else if dataMode && hasPerItemStyles}
-  <!-- Data mode with per-item styles: render individual paths -->
   {#each resolvedItems as item (item.key)}
     {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
     {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
@@ -358,7 +226,6 @@
     />
   {/each}
 {:else}
-  <!-- Built-in shapes: single Path element handles SVG + Canvas -->
   <Path
     pathData={dataMode ? combinedPathData : pixelPathData}
     fill={fill as string}
@@ -380,7 +247,6 @@
       stroke-linejoin: round;
     }
 
-    /* Stroked shapes (arrow): stroke defaults to currentColor, fill to none */
     :global(:where(.lc-layout-svg .lc-vector-stroked, svg.lc-vector-stroked):not([stroke])) {
       stroke: var(--color-surface-content, currentColor);
     }
@@ -388,7 +254,6 @@
       fill: none;
     }
 
-    /* Filled shapes (spike, arrow-filled): fill defaults to currentColor, stroke to none */
     :global(:where(.lc-layout-svg .lc-vector-filled, svg.lc-vector-filled):not([fill])) {
       fill: var(--color-surface-content, currentColor);
     }