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

package/dist/components/Path/Path.shared.svelte.d.ts

@@ -0,0 +1,83 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { MarkerOptions } from '../MarkerWrapper.svelte';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { draw as _drawTransition } from 'svelte/transition';
+export type PathPropsWithoutHTML = {
+    /**
+     * The `d` attribute of the rendered `<path>`.
+     *
+     * Accepts either a value (resolved at call site) or a function that
+     * returns the current value. Passing a function lets the parent avoid
+     * re-rendering its own template on every change to the path data —
+     * useful when a parent like `Link` / `Spline` / `Area` updates the
+     * path on every animation tick across hundreds of instances.
+     */
+    pathData?: string | undefined | null | (() => string | undefined | null);
+    /**
+     * Whether to animate the drawing of the path over time.
+     * Pass either `true` or an object with transition options to
+     * enable the transition.
+     *
+     * Works best with `tweened` disabled.
+     */
+    draw?: boolean | Parameters<typeof _drawTransition>[1];
+    /** Marker to attach to both start and end points of the line */
+    marker?: MarkerOptions;
+    /** Marker to attach to the middle point of the line */
+    markerMid?: MarkerOptions;
+    /** Marker to attach to the start point of the line */
+    markerStart?: MarkerOptions;
+    /** Marker to attach to the end point of the line */
+    markerEnd?: MarkerOptions;
+    /**
+     * Add additional content at the start of the line.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
+     */
+    startContent?: Snippet<[{
+        point: DOMPoint;
+        value: {
+            x: number;
+            y: number;
+        };
+    }]>;
+    /**
+     * Add additional content at the end of the line.
+     * Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop.
+     */
+    endContent?: Snippet<[{
+        point: DOMPoint;
+        value: {
+            x: number;
+            y: number;
+        };
+    }]>;
+    /**
+     * A reference to the `<path>` element.
+     *
+     * @bindable
+     */
+    pathRef?: SVGPathElement;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type PathProps = PathPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, PathPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer Path variant.
+ */
+export declare class PathState {
+    #private;
+    chartCtx: ChartState;
+    get tweenedPathData(): any;
+    drawKey: symbol;
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData: () => PathProps['pathData'], getProps?: () => PathProps);
+}

package/dist/components/Path/Path.shared.svelte.js

@@ -0,0 +1,68 @@
+import { interpolatePath } from 'd3-interpolate-path';
+import { flattenPathData } from '../../utils/path.js';
+import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/** Resolve `pathData` whether it was passed as a value or a getter function. */
+function resolvePathData(v) {
+    return typeof v === 'function' ? v() : v;
+}
+/**
+ * Reactive state shared by every per-layer Path variant.
+ */
+export class PathState {
+    // Hot-path getter: reads only `pathData` (or invokes the function-getter form).
+    // Kept separate from the full-props getter so that the `<path d=...>` template
+    // updater does not subscribe to every Path prop on every read — critical for
+    // mark-heavy scenes (force-simulation graphs with hundreds of links updating
+    // per tick) where pre-fix each tween read re-evaluated all 15+ props.
+    #getPathData;
+    // Contexts
+    chartCtx = getChartContext();
+    // Path data tween source — the actual `d` attribute / canvas render input
+    #tweenedState;
+    get tweenedPathData() {
+        return this.#tweenedState.current;
+    }
+    // Re-key trigger for draw transitions
+    drawKey = $state(Symbol());
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData, getProps = () => ({})) {
+        this.#getPathData = () => resolvePathData(getPathData());
+        const initial = getProps();
+        const extractedTween = extractTweenConfig(initial.motion);
+        const tweenedOptions = extractedTween
+            ? {
+                type: extractedTween.type,
+                options: { interpolate: interpolatePath, ...extractedTween.options },
+            }
+            : undefined;
+        // Provide initial `0` baseline; only set on initial mount
+        const defaultPathData = (() => {
+            if (!tweenedOptions) {
+                // Fast initial render when not tweened
+                return '';
+            }
+            const resolved = resolvePathData(getPathData());
+            if (resolved) {
+                return flattenPathData(resolved, Math.min(this.chartCtx.yScale(0) ?? this.chartCtx.yRange[0], this.chartCtx.yRange[0]));
+            }
+            return '';
+        })();
+        this.#tweenedState = createMotion(defaultPathData, this.#getPathData, tweenedOptions);
+        // Re-trigger draw transition when path data changes
+        $effect(() => {
+            if (!getProps().draw)
+                return;
+            // Touch dependency (resolves getter form too)
+            void this.#getPathData();
+            this.drawKey = Symbol();
+        });
+    }
+}

package/dist/components/Path/Path.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  // Re-export so existing `import type { PathProps } from '../../index.js'` keeps working.
+  export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import PathSvg from './Path.svg.svelte';
+  import PathCanvas from './Path.canvas.svelte';
+  import type { PathProps } from './Path.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { pathRef = $bindable(), ...rest }: PathProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <PathSvg bind:pathRef {...rest} />
+{:else if layerCtx === 'canvas'}
+  <PathCanvas {...rest} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+import type { PathProps } from './Path.shared.svelte.js';
+declare const Path: import("svelte").Component<PathProps, {}, "pathRef">;
+type Path = ReturnType<typeof Path>;
+export default Path;

package/dist/components/Path/Path.svg.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" module>
+  export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { draw as _drawTransition } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
+  import { cls } from '@layerstack/tailwind';
+  import { createControlledMotion } from '../../utils/motion.svelte.js';
+  import { createId } from '../../utils/createId.js';
+  import Group from '../Group/Group.svelte';
+  import MarkerWrapper from '../MarkerWrapper.svelte';
+  import { PathState, type PathProps } from './Path.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    pathRef = $bindable(),
+    marker,
+    markerStart: markerStartProp,
+    markerMid: markerMidProp,
+    markerEnd: markerEndProp,
+    startContent,
+    endContent,
+    draw,
+    motion,
+    // Extracted out of `rest` so the `<path>` element's `{...rest}`
+    // spread doesn't re-evaluate on every frame in mark-heavy scenes
+    // (force-simulation graphs with hundreds of links updating per tick).
+    // - `pathData`: changes every frame
+    // - `class`: parents typically pass `cls(...)` which produces a new
+    //   string reference per parent render
+    // - styling props: explicit on the <path> element below, no need to
+    //   leak them through the spread
+    pathData: _pathData,
+    class: classProp,
+    fill: fillProp,
+    fillOpacity: fillOpacityProp,
+    stroke: strokeProp,
+    strokeOpacity: strokeOpacityProp,
+    strokeWidth: strokeWidthProp,
+    opacity: opacityProp,
+    ...rest
+  }: PathProps = $props();
+
+  // Pass `pathData` as its own getter so the hot-path tween read only subscribes
+  // to `pathData` (which changes per tick on force sims) and not to every other
+  // Path prop. Pre-fix the per-tick `<path d=...>` updater re-read all 15+ props
+  // through `getProps()` on each force-sim tick × hundreds of paths.
+  const c = new PathState(
+    () => _pathData,
+    () => ({ draw, motion }) as PathProps
+  );
+
+  const markerStart = $derived(markerStartProp ?? marker);
+  const markerMid = $derived(markerMidProp ?? marker);
+  const markerEnd = $derived(markerEndProp ?? marker);
+
+  const markerStartId = $derived(markerStart ? createId('marker-start', uid) : '');
+  const markerMidId = $derived(markerMid ? createId('marker-mid', uid) : '');
+  const markerEndId = $derived(markerEnd ? createId('marker-end', uid) : '');
+
+  const drawTransition = $derived(draw ? _drawTransition : () => ({}));
+  let startPoint = $state<DOMPoint | undefined>();
+
+  const endPointDuration = $derived.by(() => {
+    if (
+      typeof draw === 'object' &&
+      draw.duration !== undefined &&
+      typeof draw.duration !== 'function'
+    ) {
+      return draw.duration;
+    }
+    return 800;
+  });
+
+  // Only allocate the controlled motion container when `draw` is configured;
+  // otherwise the per-Path `MotionNone` × hundreds of paths was a measurable
+  // mount-time cost in mark-heavy scenes.
+  const endPoint = draw
+    ? createControlledMotion<DOMPoint | undefined>(undefined, {
+        type: 'tween',
+        duration: () => endPointDuration,
+        easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
+        interpolate() {
+          return (t: number) => {
+            const totalLength = pathRef?.getTotalLength() ?? 0;
+            const point = pathRef?.getPointAtLength(totalLength * t);
+            return point;
+          };
+        },
+      })
+    : null;
+
+  // Only set up path-end tracking when startContent/endContent require it.
+  if (startContent || endContent) {
+    $effect(() => {
+      // Track path data changes
+      void c.tweenedPathData;
+      if (!pathRef) return;
+
+      tick().then(() => {
+        if (!pathRef) return;
+        const totalLength = pathRef.getTotalLength();
+        if (!totalLength) return;
+        startPoint = pathRef.getPointAtLength(0);
+        if (endPoint) {
+          endPoint.target = pathRef.getPointAtLength(totalLength);
+        }
+      });
+    });
+  }
+</script>
+
+{#key c.drawKey}
+  <path
+    {...rest as any}
+    d={c.tweenedPathData}
+    fill={fillProp}
+    fill-opacity={fillOpacityProp}
+    stroke={strokeProp}
+    stroke-opacity={strokeOpacityProp}
+    stroke-width={strokeWidthProp}
+    opacity={opacityProp}
+    class={cls('lc-path', classProp as string | undefined)}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+    in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
+    bind:this={pathRef}
+  />
+  {#if markerStart}
+    <MarkerWrapper id={markerStartId} marker={markerStart} />
+  {/if}
+  {#if markerMid}
+    <MarkerWrapper id={markerMidId} marker={markerMid} />
+  {/if}
+  {#if markerEnd}
+    <MarkerWrapper id={markerEndId} marker={markerEnd} />
+  {/if}
+
+  {#if startContent && startPoint}
+    <Group x={startPoint.x} y={startPoint.y} class="lc-path-g-start">
+      {@render startContent({
+        point: startPoint,
+        value: {
+          x: c.chartCtx.xScale?.invert?.(startPoint.x),
+          y: c.chartCtx.yScale?.invert?.(startPoint.y),
+        },
+      })}
+    </Group>
+  {/if}
+
+  {#if endContent && endPoint?.current}
+    <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-path-g-end">
+      {@render endContent({
+        point: endPoint.current,
+        value: {
+          x: c.chartCtx.xScale?.invert?.(endPoint.current.x),
+          y: c.chartCtx.yScale?.invert?.(endPoint.current.y),
+        },
+      })}
+    </Group>
+  {/if}
+{/key}
+
+<style>
+  @layer base {
+    :global(:where(.lc-path)) {
+      --fill-color: transparent;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-layout-svg .lc-path, svg.lc-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-path, svg.lc-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Path/Path.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { PathProps, PathPropsWithoutHTML } from './Path.shared.svelte.js';
+import { type PathProps } from './Path.shared.svelte.js';
+declare const Path: import("svelte").Component<PathProps, {}, "pathRef">;
+type Path = ReturnType<typeof Path>;
+export default Path;

package/dist/components/Pattern/Pattern.canvas.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+  export type {
+    PatternProps,
+    PatternPropsWithoutHTML,
+  } from './Pattern.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { asAny } from '../../utils/types.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { createPattern } from '../../utils/canvas.js';
+  import { createId } from '../../utils/createId.js';
+  import { buildPatternShapes, type PatternProps } from './Pattern.shared.svelte.js';
+
+  const chartCtx = getChartContext();
+  const uid = $props.id();
+
+  let {
+    id = createId('pattern-', uid),
+    size = 4,
+    width = size,
+    height = size,
+    lines: linesProp,
+    circles: circlesProp,
+    background,
+    children,
+  }: PatternProps = $props();
+
+  const shapes = $derived(buildPatternShapes(linesProp, circlesProp, size, width, height));
+
+  let canvasPattern = $state<CanvasPattern | null>(null);
+
+  function render(_ctx: CanvasRenderingContext2D) {
+    const pattern = createPattern(_ctx, width, height, shapes, background);
+    canvasPattern = pattern;
+  }
+
+  chartCtx.registerComponent({
+    name: 'Pattern',
+    kind: 'group',
+    canvasRender: {
+      render,
+      deps: () => [width, height, shapes, background],
+    },
+  });
+</script>
+
+{@render children?.({ id, pattern: asAny(canvasPattern) })}

package/dist/components/Pattern/Pattern.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { PatternProps, PatternPropsWithoutHTML, } from './Pattern.shared.svelte.js';
+import { type PatternProps } from './Pattern.shared.svelte.js';
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/Pattern/Pattern.html.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+  export type {
+    PatternProps,
+    PatternPropsWithoutHTML,
+  } from './Pattern.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import type { PatternProps } from './Pattern.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('pattern-', uid),
+    size = 4,
+    width = size,
+    height = size,
+    lines: linesProp,
+    circles: circlesProp,
+    background,
+    children,
+  }: PatternProps = $props();
+
+  function withOpacity(color: string, opacity: number) {
+    return opacity === 1 ? color : `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`;
+  }
+
+  function createCSSPattern(): string {
+    const layers: string[] = [];
+
+    if (linesProp) {
+      const lineDefs = Array.isArray(linesProp)
+        ? linesProp
+        : linesProp === true
+          ? [{}]
+          : [linesProp];
+      for (const line of lineDefs) {
+        const color = withOpacity(
+          line.color ?? 'var(--color-surface-content, currentColor)',
+          line.opacity ?? 1
+        );
+        const sw = line.width ?? 1;
+
+        let rotate = Math.round(line.rotate ?? 0) % 360;
+        if (rotate > 180) rotate = rotate - 360;
+        else if (rotate > 90) rotate = rotate - 180;
+        else if (rotate < -180) rotate = rotate + 360;
+        else if (rotate < -90) rotate = rotate + 180;
+
+        let angle: number;
+        let period: number;
+        if (rotate === 0) {
+          angle = 0;
+          period = height;
+        } else if (rotate === 90) {
+          angle = 90;
+          period = width;
+        } else if (rotate > 0) {
+          angle = 45;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        } else {
+          angle = 135;
+          period = (width * height) / Math.sqrt(width * width + height * height);
+        }
+
+        layers.push(
+          `repeating-linear-gradient(${angle}deg, ${color} 0 ${sw}px, transparent ${sw}px ${period}px)`
+        );
+      }
+    }
+
+    if (circlesProp) {
+      const circleDefs = Array.isArray(circlesProp)
+        ? circlesProp
+        : circlesProp === true
+          ? [{}]
+          : [circlesProp];
+      for (const circle of circleDefs) {
+        const color = withOpacity(
+          circle.color ?? 'var(--color-surface-content, currentColor)',
+          circle.opacity ?? 1
+        );
+        const r = circle.radius ?? 1;
+
+        if (circle.stagger) {
+          layers.push(
+            `radial-gradient(circle at 25% 25%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`,
+            `radial-gradient(circle at 75% 75%, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        } else {
+          layers.push(
+            `radial-gradient(circle at center, ${color} ${r}px, transparent ${r}px) 0 0 / ${size}px ${size}px`
+          );
+        }
+      }
+    }
+
+    const isImage = background != null && /gradient\(|url\(/i.test(background);
+    if (isImage) layers.push(`${background} 0 0 / ${width}px ${height}px`);
+
+    if (layers.length === 0) return background ?? 'transparent';
+    return !isImage && background ? `${layers.join(', ')}, ${background}` : layers.join(', ');
+  }
+</script>
+
+{@render children?.({ id, pattern: createCSSPattern() })}

package/dist/components/Pattern/Pattern.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { PatternProps, PatternPropsWithoutHTML, } from './Pattern.shared.svelte.js';
+import type { PatternProps } from './Pattern.shared.svelte.js';
+declare const Pattern: import("svelte").Component<PatternProps, {}, "">;
+type Pattern = ReturnType<typeof Pattern>;
+export default Pattern;

package/dist/components/Pattern/Pattern.shared.svelte.d.ts

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+export type PatternLineDef = {
+    /** The width of the line @default 1 */
+    width?: string;
+    /** The rotation of the line @default 0 */
+    rotate?: number;
+    /** The color of the line @default 'var(--color-surface-content)' */
+    color?: string;
+    /** The opacity of the line @default 1 */
+    opacity?: number;
+};
+export type PatternCircleDef = {
+    /** The radius of the circle @default 1 */
+    radius?: number;
+    /** Stagger the circle layout @default false */
+    stagger?: boolean;
+    /** The color of the circle @default 'var(--color-surface-content)' */
+    color?: string;
+    /** The opacity of the circle @default 1 */
+    opacity?: number;
+};
+export type PatternPropsWithoutHTML = {
+    /** The id of the pattern */
+    id?: string;
+    /** The size of the pattern (sets `width` and `height` as same value). */
+    size?: number;
+    /** The width of the pattern for custom patterns (set by `lines`, etc) */
+    width?: number;
+    /** The height of the pattern for custom patterns (set by `lines`, etc) */
+    height?: number;
+    /** The number of lines to render */
+    lines?: boolean | PatternLineDef | PatternLineDef[];
+    /** The number of circles to render */
+    circles?: boolean | PatternCircleDef | PatternCircleDef[];
+    /** The background color of the pattern */
+    background?: string;
+    /** Render as a child of the pattern. Note: only supported on the `<Svg>` layer. */
+    patternContent?: Snippet;
+    children?: Snippet<[{
+        id: string;
+        pattern: string;
+    }]>;
+};
+export type PatternProps = PatternPropsWithoutHTML & Without<SVGAttributes<SVGPatternElement>, PatternPropsWithoutHTML>;
+export type CircleShape = {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill: string;
+    opacity: number;
+};
+export type LineShape = {
+    type: 'line';
+    path: string;
+    stroke: string;
+    strokeWidth: string | number;
+    opacity: number;
+};
+export type PatternShape = CircleShape | LineShape;
+/**
+ * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
+ * Pure function — no reactivity.
+ */
+export declare function buildPatternShapes(linesProp: PatternPropsWithoutHTML['lines'], circlesProp: PatternPropsWithoutHTML['circles'], size: number, width: number, height: number): PatternShape[];

package/dist/components/Pattern/Pattern.shared.svelte.js

@@ -0,0 +1,71 @@
+/**
+ * Build the SVG/canvas shape descriptors for a pattern's lines/circles.
+ * Pure function — no reactivity.
+ */
+export function buildPatternShapes(linesProp, circlesProp, size, width, height) {
+    const shapes = [];
+    if (linesProp) {
+        const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
+        for (const line of lineDefs) {
+            const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
+            const strokeWidth = line.width ?? 1;
+            const opacity = line.opacity ?? 1;
+            let rotate = Math.round(line.rotate ?? 0) % 360;
+            if (rotate > 180)
+                rotate = rotate - 360;
+            else if (rotate > 90)
+                rotate = rotate - 180;
+            else if (rotate < -180)
+                rotate = rotate + 360;
+            else if (rotate < -90)
+                rotate = rotate + 180;
+            let path = '';
+            if (rotate === 0) {
+                path = `
+        M 0 0 L ${width} 0
+        M 0 ${height} L ${width} ${height}
+    `;
+            }
+            else if (rotate === 90) {
+                path = `
+        M 0 0 L 0 ${height}
+        M ${width} 0 L ${width} ${height}
+    `;
+            }
+            else if (rotate > 0) {
+                path = `
+          M 0 ${-height} L ${width * 2} ${height}
+          M ${-width} ${-height} L ${width} ${height}
+          M ${-width} 0 L ${width} ${height * 2}
+      `;
+            }
+            else {
+                path = `
+          M ${-width} ${height} L ${width} ${-height}
+          M ${-width} ${height * 2} L ${width * 2} ${-height}
+          M 0 ${height * 2} L ${width * 2} 0
+      `;
+            }
+            shapes.push({ type: 'line', path, stroke, strokeWidth, opacity });
+        }
+    }
+    if (circlesProp) {
+        const circleDefs = Array.isArray(circlesProp)
+            ? circlesProp
+            : circlesProp === true
+                ? [{}]
+                : [circlesProp];
+        for (const circle of circleDefs) {
+            const fill = circle.color ?? 'var(--color-surface-content, currentColor)';
+            const opacity = circle.opacity ?? 1;
+            const r = circle.radius ?? 1;
+            if (circle.stagger) {
+                shapes.push({ type: 'circle', cx: size / 4, cy: size / 4, r, fill, opacity }, { type: 'circle', cx: (size * 3) / 4, cy: (size * 3) / 4, r, fill, opacity });
+            }
+            else {
+                shapes.push({ type: 'circle', cx: size / 2, cy: size / 2, r, fill, opacity });
+            }
+        }
+    }
+    return shapes;
+}