layerchart 2.0.0-next.54 → 2.0.0-next.56

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));
 
@@ -215,6 +227,15 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
+  );
 
   // Style options (shared between pixel and data mode)
   function getStyleOptions(
@@ -250,7 +271,13 @@
             '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 +355,7 @@
               opacity,
               className,
               restProps.style,
+              dashArrayAttr,
             ],
           }
         : undefined,
@@ -352,6 +380,7 @@
         stroke={resolvedStroke}
         stroke-width={resolvedStrokeWidth}
         opacity={resolvedOpacity}
+        stroke-dasharray={dashArrayAttr}
         class={cls('lc-circle', resolvedClass)}
         {...restProps}
       />
@@ -367,6 +396,7 @@
       stroke={staticStroke}
       stroke-width={staticStrokeWidth}
       opacity={staticOpacity}
+      stroke-dasharray={dashArrayAttr}
       class={cls('lc-circle', staticClassName)}
       {...restProps}
     />
@@ -380,6 +410,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <div
         style:position="absolute"
         style:left="{item.cx}px"
@@ -387,11 +423,12 @@
         style:width="{item.r * 2}px"
         style:height="{item.r * 2}px"
         style:border-radius="50%"
-        style:background-color={resolvedFill}
+        style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width={resolvedStrokeWidth}
+        style:border-width={resolvedBorderWidth}
         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}
@@ -405,11 +442,12 @@
       style:width="{motionR.current * 2}px"
       style:height="{motionR.current * 2}px"
       style:border-radius="50%"
-      style:background-color={staticFill}
+      style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
-      style:border-width={staticStrokeWidth}
+      style:border-width={staticBorderWidth}
       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}
@@ -435,8 +473,12 @@
     }
 
     /* Html layers */
-    :global(:where(.lc-layout-html .lc-circle):not([background-color])) {
-      background-color: var(--fill-color);
+    :global(:where(.lc-layout-html .lc-circle)) {
+      /* Match SVG sizing (visual extent equals `r * 2`, border on outer edge) */
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([background])) {
+      background: var(--fill-color);
     }
     :global(:where(.lc-layout-html .lc-circle):not([border-color])) {
       border-color: var(--stroke-color);

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,29 @@
   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: () => [disabled, ...(canvasClipDeps?.() ?? [])],
+        deps: () => [disabled, canvasPath, invert],
       },
     });
   }
@@ -93,7 +115,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 +129,22 @@
 {/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';

package/dist/components/Ellipse.svelte

@@ -310,6 +310,15 @@
   const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
   const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
   const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  // Match SVG's implicit `stroke-width: 1` default: if `stroke` is set but
+  // `strokeWidth` is not, render a 1px border so HTML matches SVG/Canvas layers.
+  const staticBorderWidth = $derived(
+    typeof strokeWidth === 'number'
+      ? `${strokeWidth}px`
+      : typeof stroke === 'string'
+        ? '1px'
+        : undefined
+  );
 
   chartCtx.registerComponent({
     name: 'Ellipse',
@@ -401,6 +410,12 @@
       {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
       {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
       {@const resolvedClass = resolveStyleProp(className, item.d)}
+      {@const resolvedBorderWidth =
+        resolvedStrokeWidth != null
+          ? `${resolvedStrokeWidth}px`
+          : resolvedStroke != null
+            ? '1px'
+            : undefined}
       <div
         style:position="absolute"
         style:left="{item.cx}px"
@@ -408,9 +423,10 @@
         style:width="{item.rx * 2}px"
         style:height="{item.ry * 2}px"
         style:border-radius="50%"
-        style:background-color={resolvedFill}
+        style:background={resolvedFill}
+        style:background-origin="border-box"
         style:opacity={resolvedOpacity}
-        style:border-width={resolvedStrokeWidth}
+        style:border-width={resolvedBorderWidth}
         style:border-color={resolvedStroke}
         style:border-style="solid"
         style:transform="translate(-50%, -50%)"
@@ -426,9 +442,10 @@
       style:width="{motionRx.current * 2}px"
       style:height="{motionRy.current * 2}px"
       style:border-radius="50%"
-      style:background-color={staticFill}
+      style:background={staticFill}
+      style:background-origin="border-box"
       style:opacity={staticOpacity}
-      style:border-width={staticStrokeWidth}
+      style:border-width={staticBorderWidth}
       style:border-color={staticStroke}
       style:border-style="solid"
       style:transform="translate(-50%, -50%)"
@@ -454,8 +471,12 @@
     }
 
     /* Html layers */
-    :global(:where(.lc-layout-html .lc-ellipse):not([background-color])) {
-      background-color: var(--fill-color);
+    :global(:where(.lc-layout-html .lc-ellipse)) {
+      /* Match SVG sizing (visual extent equals `rx * 2`×`ry * 2`, border on outer edge) */
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-ellipse):not([background])) {
+      background: var(--fill-color);
     }
     :global(:where(.lc-layout-html .lc-ellipse):not([border-color])) {
       border-color: var(--stroke-color);

package/dist/components/GeoClipPath.svelte

@@ -24,6 +24,13 @@
      */
     disabled?: boolean;
 
+    /**
+     * Invert the clip — content renders *outside* the geojson shape.
+     *
+     * @default false
+     */
+    invert?: boolean;
+
     /**
      * The children snippet to render content inside the clipPath.
      */
@@ -40,9 +47,7 @@
   import { geoPath as d3GeoPath } from 'd3-geo';
 
   import ClipPath from './ClipPath.svelte';
-  import GeoPath from './GeoPath.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
   import { getGeoContext } from '../contexts/geo.js';
 
   const uid = $props.id();
@@ -51,25 +56,17 @@
     id = createId('clipPath-', uid),
     geojson,
     disabled = false,
+    invert = false,
     children,
-    ...restProps
   }: GeoClipPathProps = $props();
 
   const geo = getGeoContext();
 
-  function canvasClip(ctx: CanvasRenderingContext2D) {
-    if (!geo.projection || !geojson) return;
-    const pathGen = d3GeoPath(geo.projection, ctx);
-    pathGen(geojson);
-  }
-
-  function canvasClipDeps() {
-    return [geojson, geo.projection];
-  }
+  // d3-geo-path emits an SVG path `d` string that Path2D and
+  // `clip-path: path()` also accept — single source of truth for all layers.
+  const path = $derived(
+    geo.projection && geojson ? (d3GeoPath(geo.projection)(geojson) ?? undefined) : undefined
+  );
 </script>
 
-<ClipPath {id} {disabled} {children} {canvasClip} {canvasClipDeps}>
-  {#snippet clip()}
-    <GeoPath {geojson} class="stroke-none" {...extractLayerProps(restProps, 'lc-clip-path-geo')} />
-  {/snippet}
-</ClipPath>
+<ClipPath {id} {disabled} {invert} {children} {path} />

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

@@ -17,6 +17,12 @@ export type BaseGeoClipPathPropsWithoutHTML = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the geojson shape.
+     *
+     * @default false
+     */
+    invert?: boolean;
     /**
      * The children snippet to render content inside the clipPath.
      */

package/dist/components/GeoLegend.svelte

@@ -258,9 +258,7 @@
   const width = $derived(Math.ceil(barWidth) + padding * 2);
   const svgHeight = $derived(titleHeight + height + tickLabelHeight + padding * 2 + 3);
   const barY = $derived(
-    labelPlacement === 'top'
-      ? titleHeight + padding + tickLabelHeight
-      : titleHeight + padding
+    labelPlacement === 'top' ? titleHeight + padding + tickLabelHeight : titleHeight + padding
   );
   const tickLabelY = $derived(
     labelPlacement === 'top'