layerchart 2.0.0-next.53 → 2.0.0-next.55

package/dist/components/Arc.svelte

@@ -254,7 +254,10 @@
   const ctx = getChartContext();
 
   const endAngle = $derived(
-    endAngleProp ?? degreesToRadians(ctx.xRange ? max(ctx.xRange) : max(range))
+    endAngleProp ??
+      degreesToRadians(
+        (ctx.config.xRange ? max(ctx.config.xRange as number[]) : max(range))!
+      )
   );
 
   const motionEndAngle = createMotion(initialValue, () => value, motion);
@@ -279,13 +282,11 @@
     }
   }
 
-  const outerRadius = $derived(
-    getOuterRadius(outerRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-  );
+  const chartRadius = $derived((Math.min(ctx.width, ctx.height) ?? 0) / 2);
+
+  const outerRadius = $derived(getOuterRadius(outerRadiusProp, chartRadius));
   const trackOuterRadius = $derived(
-    trackOuterRadiusProp
-      ? getOuterRadius(trackOuterRadiusProp, (Math.min(ctx.xRange[1], ctx.yRange[0]) ?? 0) / 2)
-      : outerRadius
+    trackOuterRadiusProp ? getOuterRadius(trackOuterRadiusProp, chartRadius) : outerRadius
   );
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {

package/dist/components/Arc.svelte.test.js

@@ -383,7 +383,7 @@ describe(`Arc`, () => {
             const el = page.getByTestId(componentTestId);
             await expect.element(el).toBeInTheDocument();
             const transform = el.element()?.getAttribute('transform');
-            expect(transform).toContain('translate(-4.539904997395462, 8.91006524188368)');
+            expect(transform).toContain('translate(1.2246467991473533e-15, 10)');
         });
         it('should apply zero offset by default', async () => {
             render(TestHarness, {

package/dist/components/ArcLabel.svelte

@@ -222,7 +222,7 @@
           y: offsetCentroid[1],
           textAnchor: 'middle' as const,
           verticalAnchor: 'middle' as const,
-          transform: `rotate(${centroidRotation}, ${offsetCentroid[0]}, ${offsetCentroid[1]})`,
+          rotate: centroidRotation,
         };
       }
       return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};

package/dist/components/Axis.svelte

@@ -33,10 +33,18 @@
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
 
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?:
+      | boolean
+      | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+          stroke?: string;
+          strokeWidth?: number;
+          opacity?: number;
+          dashArray?: number | number[] | string;
+        });
 
     /**
      * Control the number of ticks

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

@@ -28,10 +28,16 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     rule?: boolean | Partial<ComponentProps<typeof Rule>>;
     /**
-     * Draw grid lines
+     * Draw grid lines. Pass props (class, style, stroke, strokeWidth, opacity,
+     * dashArray) to forward onto the underlying grid line.
      * @default false
      */
-    grid?: boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>;
+    grid?: boolean | (Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+        stroke?: string;
+        strokeWidth?: number;
+        opacity?: number;
+        dashArray?: number | number[] | string;
+    });
     /**
      * Control the number of ticks
      */

package/dist/components/Bar.svelte

@@ -105,14 +105,13 @@
   import { greatestAbs } from '@layerstack/utils';
 
   import Rect from './Rect.svelte';
-  import Path from './Path.svelte';
 
   import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from '../contexts/chart.js';
   import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
+  import { type MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
 
   const ctx = getChartContext();
@@ -254,12 +253,14 @@
   const topRight = $derived(['all', 'top', 'right', 'top-right'].includes(rounded));
   const bottomLeft = $derived(['all', 'bottom', 'left', 'bottom-left'].includes(rounded));
   const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
-  const width = $derived(dimensions.width);
-  const height = $derived(dimensions.height);
 
-  // Clamp radius to prevent extending beyond bounding box
-  const r = $derived(Math.min(radius, width / 2, height / 2));
-  const diameter = $derived(2 * r);
+  // Per-corner radii: [tl, tr, br, bl], matching CSS `border-radius` shorthand.
+  const corners = $derived<[number, number, number, number]>([
+    topLeft ? radius : 0,
+    topRight ? radius : 0,
+    bottomRight ? radius : 0,
+    bottomLeft ? radius : 0,
+  ]);
 
   // Auto-compute initial values for mount animation when motion is configured
   const resolvedInitialY = $derived(
@@ -275,20 +276,6 @@
     initialWidth ?? (motion && ctx.valueAxis === 'x' ? 0 : undefined)
   );
 
-  const pathData = $derived(
-    `M${dimensions.x + r},${dimensions.y} h${width - diameter}
-      ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
-      v${height - diameter}
-      ${bottomRight ? `a${r},${r} 0 0 1 ${-r},${r}` : `v${r}h${-r}`}
-      h${diameter - width}
-      ${bottomLeft ? `a${r},${r} 0 0 1 ${-r},${-r}` : `h${-r}v${-r}`}
-      v${diameter - height}
-      ${topLeft ? `a${r},${r} 0 0 1 ${r},${-r}` : `v${-r}h${r}`}
-      z`
-      .split('\n')
-      .join('')
-  );
-
   const onPointerEnter: PointerEventHandler<Element> = (e) => {
     onpointerenter?.(e);
     if (tooltip) ctx.tooltip.show(e, data);
@@ -322,14 +309,14 @@
     onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
-{:else if rounded === 'all' || rounded === 'none' || radius === 0}
+{:else}
   <Rect
     {fill}
     {fillOpacity}
     {stroke}
     {strokeWidth}
     {opacity}
-    rx={rounded === 'none' ? 0 : radius}
+    {corners}
     {motion}
     initialX={resolvedInitialX}
     initialY={resolvedInitialY}
@@ -341,19 +328,4 @@
     onpointerleave={onPointerLeave}
     {...extractLayerProps(restProps, 'lc-bar')}
   />
-{:else}
-  {@const tweenMotion = extractTweenConfig(motion)}
-  <Path
-    {pathData}
-    {fill}
-    {fillOpacity}
-    {stroke}
-    {strokeWidth}
-    {opacity}
-    motion={tweenMotion}
-    onpointerenter={onPointerEnter}
-    onpointermove={onPointerMove}
-    onpointerleave={onPointerLeave}
-    {...extractLayerProps(restProps, 'lc-bar')}
-  />
 {/if}

package/dist/components/Circle.svelte

@@ -78,6 +78,13 @@
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
 
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
+
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
   } & DataDrivenStyleProps;
@@ -106,6 +113,7 @@
   import { chartDataArray } from '../utils/common.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
+  import { parseDashArray } from '../utils/path.js';
 
   let {
     cx = 0,
@@ -124,10 +132,14 @@
     opacity,
     class: className,
     ref: refProp = $bindable(),
+    dashArray,
     children,
     ...restProps
   }: CircleProps = $props();
 
+  const dashArrayResolved = $derived(parseDashArray(dashArray));
+  const dashArrayAttr = $derived(dashArrayResolved ? dashArrayResolved.join(' ') : undefined);
+
   // Data mode detection: if any positional prop is a string or function
   const dataMode = $derived(hasAnyDataProp(cx, cy, r));
 
@@ -250,7 +262,12 @@
             'lc-circle',
             itemClass ?? (typeof className === 'string' ? className : undefined)
           ),
-          style: restProps.style as string | undefined,
+          style: [
+            restProps.style as string | undefined,
+            dashArrayAttr ? `stroke-dasharray: ${dashArrayAttr}` : undefined,
+          ]
+            .filter(Boolean)
+            .join('; ') || undefined,
         };
   }
 
@@ -328,6 +345,7 @@
               opacity,
               className,
               restProps.style,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -352,6 +370,7 @@
         stroke={resolvedStroke}
         stroke-width={resolvedStrokeWidth}
         opacity={resolvedOpacity}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-circle', resolvedClass)}
         {...restProps}
       />
@@ -367,6 +386,7 @@
       stroke={staticStroke}
       stroke-width={staticStrokeWidth}
       opacity={staticOpacity}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-circle', staticClassName)}
       {...restProps}
     />
@@ -391,7 +411,7 @@
         style:opacity={resolvedOpacity}
         style:border-width={resolvedStrokeWidth}
         style:border-color={resolvedStroke}
-        style:border-style="solid"
+        style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
         style:transform="translate(-50%, -50%)"
         class={cls('lc-circle', resolvedClass)}
         {...restProps}
@@ -409,7 +429,7 @@
       style:opacity={staticOpacity}
       style:border-width={staticStrokeWidth}
       style:border-color={staticStroke}
-      style:border-style="solid"
+      style:border-style={dashArrayResolved ? 'dashed' : 'solid'}
       style:transform="translate(-50%, -50%)"
       class={cls('lc-circle', staticClassName)}
       {...restProps}

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

@@ -66,6 +66,12 @@ export type CirclePropsWithoutHTML = {
     ref?: SVGCircleElement;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
+    /**
+     * Dashed-border pattern. Accepts a number (single dash length), a
+     * `[dash, gap, ...]` array, or a string (same syntax as SVG
+     * `stroke-dasharray`). HTML layer approximates via `border-style: dashed`.
+     */
+    dashArray?: number | number[] | string;
     /** Children content to render.  Note: Only works for Html layers */
     children?: Snippet;
 } & DataDrivenStyleProps;

package/dist/components/CircleClipPath.svelte

@@ -36,6 +36,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the circle.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * A bindable reference to the underlying `<circle>` element'
      *
@@ -53,9 +60,7 @@
 </script>
 
 <script lang="ts">
-  import Circle from './Circle.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -64,38 +69,15 @@
     cx = 0,
     cy = 0,
     r,
-    motion,
     disabled = false,
-    ref: refProp = $bindable(),
+    invert = false,
     children,
-    ...restProps
   }: CircleClipPathPropsWithoutHTML = $props();
 
-  let ref = $state<SVGCircleElement>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  function canvasClip(ctx: CanvasRenderingContext2D) {
-    ctx.beginPath();
-    ctx.arc(cx, cy, r, 0, Math.PI * 2);
-  }
-
-  function canvasClipDeps() {
-    return [cx, cy, r];
-  }
+  // Two 180° arcs produce a full circle that Path2D / `clip-path: path()` accept.
+  const path = $derived(
+    `M${cx - r},${cy} a${r},${r} 0 1,0 ${2 * r},0 a${r},${r} 0 1,0 ${-2 * r},0 Z`
+  );
 </script>
 
-<ClipPath {id} {disabled} {children} {canvasClip} {canvasClipDeps}>
-  {#snippet clip()}
-    <Circle
-      {cx}
-      {cy}
-      {r}
-      {motion}
-      {...extractLayerProps(restProps, 'lc-clip-path-circle')}
-      bind:ref
-    />
-  {/snippet}
-</ClipPath>
+<ClipPath {id} {disabled} {invert} {children} {path} />

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

@@ -29,6 +29,12 @@ export type CircleClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the circle.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * A bindable reference to the underlying `<circle>` element'
      *
@@ -41,6 +47,6 @@ export type CircleClipPathPropsWithoutHTML = {
     children?: ClipPathPropsWithoutHTML['children'];
     motion?: MotionProp;
 };
-declare const CircleClipPath: import("svelte").Component<CircleClipPathPropsWithoutHTML, {}, "ref">;
+declare const CircleClipPath: import("svelte").Component<CircleClipPathPropsWithoutHTML, {}, "">;
 type CircleClipPath = ReturnType<typeof CircleClipPath>;
 export default CircleClipPath;

package/dist/components/ClipPath.svelte

@@ -26,26 +26,37 @@
     disabled?: boolean;
 
     /**
-     * A snippet to insert content into the clipPath.
-     * Provides the id for the clipPath as a snippet prop.
+     * Invert the clip — content renders *outside* the shape instead of inside.
+     * Implemented by combining the shape with an outer rect covering the chart
+     * bounds and applying the even-odd fill rule.
+     *
+     * @default false
      */
-    clip?: Snippet<[{ id: string }]>;
+    invert?: boolean;
 
     /**
-     * Children to render in the `<g>` element that links to the clipPath (if not disabled).
-     * Provides the id, url, and useId for the clipPath as snippet props.
+     * SVG path `d` string describing the clip shape. When provided, this single
+     * value drives all three layers:
+     * - SVG: rendered as `<path d={path}>` inside the `<clipPath>`
+     * - Canvas: wrapped in `Path2D` and applied via `ctx.clip(...)`
+     * - HTML: emitted as CSS `clip-path: path("...")` on a wrapper `<div>`
+     *
+     * For shapes that can't be expressed as an SVG path (or for advanced
+     * per-layer customization), use the `clip` snippet (SVG) alongside `path`.
      */
-    children?: Snippet<[{ id: string; url: string; useId?: string }]>;
+    path?: string;
+
     /**
-     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
-     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
+     * A snippet to insert custom SVG content into the `<clipPath>`. When
+     * omitted and `path` is set, a `<path d={path}>` is rendered automatically.
      */
-    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
+    clip?: Snippet<[{ id: string }]>;
+
     /**
-     * Reactive deps for canvas clip invalidation. Return array of values that,
-     * when changed, should trigger a canvas redraw.
+     * Children to render in the `<g>` element that links to the clipPath (if not disabled).
+     * Provides the id, url, and useId for the clipPath as snippet props.
      */
-    canvasClipDeps?: () => any[];
+    children?: Snippet<[{ id: string; url: string; useId?: string }]>;
   };
 
   export type ClipPathProps = ClipPathPropsWithoutHTML &
@@ -61,10 +72,10 @@
     id = createId('clipPath-', uid),
     useId,
     disabled = false,
+    invert = false,
     children,
     clip,
-    canvasClip,
-    canvasClipDeps,
+    path,
     ...restProps
   }: ClipPathPropsWithoutHTML = $props();
 
@@ -73,18 +84,33 @@
   const layerCtx = getLayerContext();
   const chartCtx = getChartContext();
 
+  // Outer rect covering the chart bounds — combined with the clip shape under
+  // the even-odd fill rule to invert the clip.
+  const outerRect = $derived(
+    `M0,0 H${chartCtx.width} V${chartCtx.height} H0 Z`
+  );
+
+  // Effective path used for canvas + html layers when inverting.
+  const effectivePath = $derived(
+    invert && path ? `${outerRect} ${path}` : path
+  );
+
+  // Cache the Path2D so `ctx.clip()` gets a stable reference per `path` change.
+  const canvasPath = $derived(
+    layerCtx === 'canvas' && effectivePath ? new Path2D(effectivePath) : undefined
+  );
+
   if (layerCtx === 'canvas') {
     chartCtx.registerComponent({
       name: 'ClipPath',
       kind: 'group',
       canvasRender: {
         render: (ctx) => {
-          if (!disabled && canvasClip) {
-            canvasClip(ctx);
-            ctx.clip();
+          if (!disabled && canvasPath) {
+            ctx.clip(canvasPath, invert ? 'evenodd' : 'nonzero');
           }
         },
-        deps: () => canvasClipDeps?.() ?? [],
+        deps: () => [disabled, canvasPath, invert],
       },
     });
   }
@@ -93,7 +119,11 @@
 {#if layerCtx === 'svg'}
   <defs>
     <clipPath {id} {...restProps}>
-      {@render clip?.({ id })}
+      {#if clip}
+        {@render clip({ id })}
+      {:else if effectivePath}
+        <path d={effectivePath} clip-rule={invert ? 'evenodd' : undefined} />
+      {/if}
 
       {#if useId}
         <use href="#{useId}" />
@@ -103,11 +133,24 @@
 {/if}
 
 {#if children}
-  {#if disabled || layerCtx !== 'svg'}
+  {#if disabled}
     {@render children({ id, url, useId })}
-  {:else}
+  {:else if layerCtx === 'svg'}
     <g style:clip-path={url} class="lc-clip-path-g">
       {@render children({ id, url, useId })}
     </g>
+  {:else if layerCtx === 'html' && effectivePath}
+    <div
+      class="lc-clip-path-div"
+      style:position="absolute"
+      style:inset="0"
+      style:clip-path={invert
+        ? `path(evenodd, "${effectivePath}")`
+        : `path("${effectivePath}")`}
+    >
+      {@render children({ id, url, useId })}
+    </div>
+  {:else}
+    {@render children({ id, url, useId })}
   {/if}
 {/if}

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

@@ -19,8 +19,27 @@ export type ClipPathPropsWithoutHTML = {
      */
     disabled?: boolean;
     /**
-     * A snippet to insert content into the clipPath.
-     * Provides the id for the clipPath as a snippet prop.
+     * Invert the clip — content renders *outside* the shape instead of inside.
+     * Implemented by combining the shape with an outer rect covering the chart
+     * bounds and applying the even-odd fill rule.
+     *
+     * @default false
+     */
+    invert?: boolean;
+    /**
+     * SVG path `d` string describing the clip shape. When provided, this single
+     * value drives all three layers:
+     * - SVG: rendered as `<path d={path}>` inside the `<clipPath>`
+     * - Canvas: wrapped in `Path2D` and applied via `ctx.clip(...)`
+     * - HTML: emitted as CSS `clip-path: path("...")` on a wrapper `<div>`
+     *
+     * For shapes that can't be expressed as an SVG path (or for advanced
+     * per-layer customization), use the `clip` snippet (SVG) alongside `path`.
+     */
+    path?: string;
+    /**
+     * A snippet to insert custom SVG content into the `<clipPath>`. When
+     * omitted and `path` is set, a `<path d={path}>` is rendered automatically.
      */
     clip?: Snippet<[{
         id: string;
@@ -34,16 +53,6 @@ export type ClipPathPropsWithoutHTML = {
         url: string;
         useId?: string;
     }]>;
-    /**
-     * Canvas clip path function. When provided and in canvas mode, sets up a canvas
-     * clip region by drawing a path and calling `ctx.clip()` before rendering children.
-     */
-    canvasClip?: (ctx: CanvasRenderingContext2D) => void;
-    /**
-     * Reactive deps for canvas clip invalidation. Return array of values that,
-     * when changed, should trigger a canvas redraw.
-     */
-    canvasClipDeps?: () => any[];
 };
 export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
 declare const ClipPath: import("svelte").Component<ClipPathPropsWithoutHTML, {}, "">;

package/dist/components/Connector.svelte

@@ -46,6 +46,12 @@
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
+
+    /**
+     * Interpret `source`/`target` as polar coordinates (`x` = angle, `y` = radius)
+     * and render the path in radial space. Defaults to `ctx.radial` when unset.
+     */
+    radial?: boolean;
   } & PathPropsWithoutHTML;
 
   export type ConnectorProps = ConnectorPropsWithoutHTML &
@@ -57,10 +63,13 @@
   import {
     getConnectorD3Path,
     getConnectorPresetPath,
+    getConnectorRadialD3Path,
+    getConnectorRadialPresetPath,
     type ConnectorCoords,
     type ConnectorSweep,
     type ConnectorType,
   } from '../utils/connectorUtils.js';
+  import { getChartContext } from '../contexts/chart.js';
   import Path, { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
   import type { Without } from '../utils/types.js';
   import { createId } from '../utils/createId.js';
@@ -82,6 +91,7 @@
     type = 'rounded',
     radius = 20,
     curve = curveLinear,
+    radial: radialProp,
     pathRef = $bindable(),
     pathData: pathDataProp,
     marker,
@@ -92,6 +102,9 @@
     ...restProps
   }: ConnectorProps = $props();
 
+  const ctx = getChartContext();
+  const radial = $derived(radialProp ?? ctx.radial ?? false);
+
   const sweep = $derived.by(() => {
     if (sweepProp) return sweepProp;
     if (type === 'd3') return 'none';
@@ -116,6 +129,11 @@
 
   const pathData = $derived.by(() => {
     if (pathDataProp) return pathDataProp;
+    if (radial) {
+      return type === 'd3'
+        ? getConnectorRadialD3Path({ source, target, curve })
+        : getConnectorRadialPresetPath({ source, target, type, radius });
+    }
     if (type === 'd3') {
       return getConnectorD3Path({
         source,

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

@@ -40,6 +40,11 @@ export type ConnectorPropsWithoutHTML = {
      * @default `d3.curveLinear`
      */
     curve?: CurveFactory;
+    /**
+     * Interpret `source`/`target` as polar coordinates (`x` = angle, `y` = radius)
+     * and render the path in radial space. Defaults to `ctx.radial` when unset.
+     */
+    radial?: boolean;
 } & PathPropsWithoutHTML;
 export type ConnectorProps = ConnectorPropsWithoutHTML & Without<PathProps, ConnectorPropsWithoutHTML>;
 import { type CurveFactory } from 'd3-shape';