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

package/dist/components/Circle/Circle.html.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import {
+    CircleState,
+    circleMarkInfo,
+    type CircleProps,
+  } from './Circle.shared.svelte.js';
+
+  let {
+    children,
+    ...rest
+  }: CircleProps = $props();
+
+  const c = new CircleState(() => rest as CircleProps);
+
+  // HTML-only: derive a border-width that mimics SVG's implicit `stroke-width: 1`
+  // when `stroke` is set but `strokeWidth` is not.
+  const staticBorderWidth = $derived(
+    typeof rest.strokeWidth === 'number'
+      ? `${rest.strokeWidth}px`
+      : typeof rest.stroke === 'string'
+        ? '1px'
+        : undefined
+  );
+
+  c.chartCtx.registerComponent({
+    name: 'Circle',
+    kind: 'mark',
+    markInfo: () => circleMarkInfo(rest as CircleProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    {@const resolvedBorderWidth =
+      resolvedStrokeWidth != null
+        ? `${resolvedStrokeWidth}px`
+        : resolvedStroke != null
+          ? '1px'
+          : undefined}
+    <div
+      {...rest as any}
+      style:position="absolute"
+      style:left="{item.cx}px"
+      style:top="{item.cy}px"
+      style:width="{item.r * 2}px"
+      style:height="{item.r * 2}px"
+      style:border-radius="50%"
+      style:background={resolvedFill}
+      style:background-origin="border-box"
+      style:opacity={resolvedOpacity}
+      style:border-width={resolvedBorderWidth}
+      style:border-color={resolvedStroke}
+      style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+      style:transform="translate(-50%, -50%)"
+      class={cls('lc-circle', resolvedClass)}
+    ></div>
+  {/each}
+{:else}
+  <div
+    {...rest as any}
+    style:position="absolute"
+    style:left="{c.motionCx}px"
+    style:top="{c.motionCy}px"
+    style:width="{c.motionR * 2}px"
+    style:height="{c.motionR * 2}px"
+    style:border-radius="50%"
+    style:background={c.staticFill}
+    style:background-origin="border-box"
+    style:opacity={c.staticOpacity}
+    style:border-width={staticBorderWidth}
+    style:border-color={c.staticStroke}
+    style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+    style:transform="translate(-50%, -50%)"
+    class={cls('lc-circle', c.staticClassName)}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-circle)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Html layers */
+    :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);
+    }
+  }
+</style>

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

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

package/dist/components/{Circle.svelte.d.ts → Circle/Circle.shared.svelte.d.ts}

@@ -1,6 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { Without } from '../utils/types.js';
-import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
 export type CirclePropsWithoutHTML = {
     /**
      * The center x position of the circle.
@@ -76,8 +80,63 @@ export type CirclePropsWithoutHTML = {
     children?: Snippet;
 } & DataDrivenStyleProps;
 export type CircleProps = CirclePropsWithoutHTML & Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
-import { type MotionProp } from '../utils/motion.svelte.js';
-import type { SVGAttributes } from 'svelte/elements';
-declare const Circle: import("svelte").Component<CircleProps, {}, "ref">;
-type Circle = ReturnType<typeof Circle>;
-export default Circle;
+/**
+ * Resolve the cx/cy/r values for a single data item, going through
+ * either the geo projection or the chart's x/y/r scales.
+ */
+export declare function resolveCircle(d: any, props: {
+    cx?: DataProp;
+    cy?: DataProp;
+    r?: DataProp;
+}, chartCtx: ChartState, geo: GeoState): {
+    cx: number;
+    cy: number;
+    r: number;
+};
+/**
+ * Reactive state shared by every per-layer Circle variant. Instantiate from
+ * each `Circle.svg.svelte` / `Circle.canvas.svelte` / `Circle.html.svelte`
+ * component setup, passing a getter for the props. Exposes the derived
+ * computations + motion sources every layer needs.
+ *
+ * Per-layer specific bits (e.g. SVG's `bind:this` ref, HTML's
+ * `staticBorderWidth`, canvas's `render` function and canvas registration)
+ * stay in their respective `.svelte` files.
+ */
+export declare class CircleState {
+    #private;
+    chartCtx: ChartState<unknown, import("../../index.js").AnyScale, import("../../index.js").AnyScale>;
+    geo: GeoState;
+    dashArrayResolved: number[] | null;
+    dashArrayAttr: string | undefined;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        cx: number;
+        cy: number;
+        r: number;
+    }[];
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    constructor(getProps: () => CircleProps);
+    get motionCx(): any;
+    get motionCy(): any;
+    get motionR(): any;
+}
+/** Build the standard `markInfo` payload used by every Circle variant. */
+export declare function circleMarkInfo(props: CircleProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | undefined;
+};

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

@@ -0,0 +1,138 @@
+import { untrack } from 'svelte';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { parseDashArray } from '../../utils/path.js';
+import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+/**
+ * Resolve the cx/cy/r values for a single data item, going through
+ * either the geo projection or the chart's x/y/r scales.
+ */
+export function resolveCircle(d, props, chartCtx, geo) {
+    if (geo.projection) {
+        const [projX, projY] = resolveGeoDataPair(props.cx, props.cy, d, geo.projection);
+        return {
+            cx: projX,
+            cy: projY,
+            r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+        };
+    }
+    return {
+        cx: resolveDataProp(props.cx, d, chartCtx.xScale, 0),
+        cy: resolveDataProp(props.cy, d, chartCtx.yScale, 0),
+        r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+    };
+}
+/**
+ * Reactive state shared by every per-layer Circle variant. Instantiate from
+ * each `Circle.svg.svelte` / `Circle.canvas.svelte` / `Circle.html.svelte`
+ * component setup, passing a getter for the props. Exposes the derived
+ * computations + motion sources every layer needs.
+ *
+ * Per-layer specific bits (e.g. SVG's `bind:this` ref, HTML's
+ * `staticBorderWidth`, canvas's `render` function and canvas registration)
+ * stay in their respective `.svelte` files.
+ */
+export class CircleState {
+    // Default initializer so derived class fields below can safely call this
+    // before the constructor body sets the real getter.
+    #getProps = () => ({});
+    // Contexts (must be read inside a Svelte component setup, which is where
+    // CircleState is instantiated).
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    // Reactive derivations
+    dashArrayResolved = $derived(parseDashArray(this.#getProps().dashArray));
+    dashArrayAttr = $derived(this.dashArrayResolved ? this.dashArrayResolved.join(' ') : undefined);
+    dataMode = $derived(hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().r));
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    // Per-key motion tracking (only created when motion is configured)
+    #dataMotionMap = null;
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.#resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            const resolved = resolveCircle(d, props, this.chartCtx, this.geo);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                cx: animated?.cx ?? resolved.cx,
+                cy: animated?.cy ?? resolved.cy,
+                r: animated?.r ?? resolved.r,
+            };
+        });
+    });
+    // Pixel-mode motion sources. Initial values are captured at construction;
+    // subsequent updates come from the prop getters.
+    #motionCx;
+    #motionCy;
+    #motionR;
+    // Static (non-data-driven) values used by SVG/HTML branches in pixel mode.
+    staticFill = $derived(typeof this.#getProps().fill === 'string' ? this.#getProps().fill : undefined);
+    staticFillOpacity = $derived(typeof this.#getProps().fillOpacity === 'number'
+        ? this.#getProps().fillOpacity
+        : undefined);
+    staticStroke = $derived(typeof this.#getProps().stroke === 'string' ? this.#getProps().stroke : undefined);
+    staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
+        ? this.#getProps().strokeWidth
+        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
+        ? this.#getProps().opacity
+        : undefined);
+    staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialCx = initial.initialCx ?? (typeof initial.cx === 'number' ? initial.cx : 0);
+        const initialCy = initial.initialCy ?? (typeof initial.cy === 'number' ? initial.cy : 0);
+        const initialR = initial.initialR ?? (typeof initial.r === 'number' ? initial.r : 1);
+        this.#motionCx = createMotion(initialCx, () => (typeof getProps().cx === 'number' ? getProps().cx : 0), initial.motion);
+        this.#motionCy = createMotion(initialCy, () => (typeof getProps().cy === 'number' ? getProps().cy : 0), initial.motion);
+        this.#motionR = createMotion(initialR, () => (typeof getProps().r === 'number' ? getProps().r : 1), initial.motion);
+        this.#dataMotionMap = createDataMotionMap(initial.motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.#resolvedData.length; i++) {
+                    const d = this.#resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    const resolved = resolveCircle(d, props, this.chartCtx, this.geo);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+    get motionCx() {
+        return this.#motionCx.current;
+    }
+    get motionCy() {
+        return this.#motionCy.current;
+    }
+    get motionR() {
+        return this.#motionR.current;
+    }
+}
+/** Build the standard `markInfo` payload used by every Circle variant. */
+export function circleMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.cx === 'string' ? props.cx : undefined,
+        y: typeof props.cy === 'string' ? props.cy : undefined,
+        color: typeof props.fill === 'string' ? props.fill : undefined,
+    };
+}

package/dist/components/Circle/Circle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  // Re-export types from the shared module so existing
+  // `import type { CircleProps } from '../../index.js'` keeps working.
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import CircleSvg from './Circle.svg.svelte';
+  import CircleCanvas from './Circle.canvas.svelte';
+  import CircleHtml from './Circle.html.svelte';
+  import type { CircleProps } from './Circle.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: CircleProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <CircleSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <CircleCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <CircleHtml {...props} />
+{/if}

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

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

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

@@ -0,0 +1 @@
+export {};

package/dist/components/{Circle.svelte.test.js → Circle/Circle.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
 import Circle from './Circle.svelte';
 describe('Circle', () => {
     describe('pixel mode', () => {

package/dist/components/Circle/Circle.svg.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import {
+    CircleState,
+    circleMarkInfo,
+    type CircleProps,
+  } from './Circle.shared.svelte.js';
+
+  let {
+    ref: refProp = $bindable(),
+    ...rest
+  }: CircleProps = $props();
+
+  const c = new CircleState(() => rest as CircleProps);
+
+  let ref = $state<SVGCircleElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  c.chartCtx.registerComponent({
+    name: 'Circle',
+    kind: 'mark',
+    markInfo: () => circleMarkInfo(rest as CircleProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    <circle
+      {...rest as any}
+      cx={item.cx}
+      cy={item.cy}
+      r={item.r}
+      fill={resolvedFill}
+      fill-opacity={resolvedFillOpacity}
+      stroke={resolvedStroke}
+      stroke-width={resolvedStrokeWidth}
+      opacity={resolvedOpacity}
+      stroke-dasharray={c.dashArrayAttr}
+      class={cls('lc-circle', resolvedClass)}
+    />
+  {/each}
+{:else}
+  <circle
+    {...rest as any}
+    bind:this={ref}
+    cx={c.motionCx}
+    cy={c.motionCy}
+    r={c.motionR}
+    fill={c.staticFill}
+    fill-opacity={c.staticFillOpacity}
+    stroke={c.staticStroke}
+    stroke-width={c.staticStrokeWidth}
+    opacity={c.staticOpacity}
+    stroke-dasharray={c.dashArrayAttr}
+    class={cls('lc-circle', c.staticClassName)}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-circle)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

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

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

package/dist/components/CircleClipPath/CircleClipPath.base.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+
+  export type CircleClipPathBaseLayerComponents = {
+    ClipPath: Component<any>;
+  };
+
+  export type CircleClipPathBaseProps = CircleClipPathPropsWithoutHTML &
+    CircleClipPathBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+
+  const uid = $props.id();
+
+  let {
+    ClipPath,
+    id = createId('clipPath-', uid),
+    cx = 0,
+    cy = 0,
+    r,
+    disabled = false,
+    invert = false,
+    children,
+  }: CircleClipPathBaseProps = $props();
+
+  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} {invert} {children} {path} />

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+export type CircleClipPathBaseLayerComponents = {
+    ClipPath: Component<any>;
+};
+export type CircleClipPathBaseProps = CircleClipPathPropsWithoutHTML & CircleClipPathBaseLayerComponents;
+declare const CircleClipPath: Component<CircleClipPathBaseProps, {}, "">;
+type CircleClipPath = ReturnType<typeof CircleClipPath>;
+export default CircleClipPath;

package/dist/components/CircleClipPath/CircleClipPath.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import CircleClipPathBase from './CircleClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.canvas.svelte';
+  import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+
+  let props: CircleClipPathPropsWithoutHTML = $props();
+</script>
+
+<CircleClipPathBase {ClipPath} {...props} />

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

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

package/dist/components/CircleClipPath/CircleClipPath.html.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import CircleClipPathBase from './CircleClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.html.svelte';
+  import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+
+  let props: CircleClipPathPropsWithoutHTML = $props();
+</script>
+
+<CircleClipPathBase {ClipPath} {...props} />

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

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

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

@@ -0,0 +1,20 @@
+import type { MotionProp } from '../../utils/motion.svelte.js';
+import type { ClipPathPropsWithoutHTML } from '../ClipPath/ClipPath.shared.svelte.js';
+export type CircleClipPathPropsWithoutHTML = {
+    /** A unique id for the clipPath. */
+    id?: string;
+    /** The center x position of the circle. @default 0 */
+    cx?: number;
+    /** The center y position of the circle. @default 0 */
+    cy?: number;
+    /** The radius of the circle. @required */
+    r: number;
+    /** Whether to disable clipping (show all). @default false */
+    disabled?: boolean;
+    /** Invert the clip — content renders *outside* the circle. @default false */
+    invert?: boolean;
+    /** A bindable reference to the underlying `<circle>` element @bindable */
+    ref?: SVGCircleElement;
+    children?: ClipPathPropsWithoutHTML['children'];
+    motion?: MotionProp;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/components/CircleClipPath/CircleClipPath.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import CircleClipPathSvg from './CircleClipPath.svg.svelte';
+  import CircleClipPathCanvas from './CircleClipPath.canvas.svelte';
+  import CircleClipPathHtml from './CircleClipPath.html.svelte';
+  import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: CircleClipPathPropsWithoutHTML = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <CircleClipPathSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <CircleClipPathCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <CircleClipPathHtml {...props} />
+{/if}

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

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

package/dist/components/CircleClipPath/CircleClipPath.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import CircleClipPathBase from './CircleClipPath.base.svelte';
+  import ClipPath from '../ClipPath/ClipPath.svg.svelte';
+  import type { CircleClipPathPropsWithoutHTML } from './CircleClipPath.shared.svelte.js';
+
+  let props: CircleClipPathPropsWithoutHTML = $props();
+</script>
+
+<CircleClipPathBase {ClipPath} {...props} />

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

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