layerchart 2.0.0-next.60 → 2.0.0-next.61

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;

package/dist/components/ClipPath/ClipPath.canvas.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    invert = false,
+    children,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, invert, children, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+
+  // Cache the Path2D so `ctx.clip()` gets a stable reference per `path` change.
+  const canvasPath = $derived(c.effectivePath ? new Path2D(c.effectivePath) : undefined);
+
+  c.chartCtx.registerComponent({
+    name: 'ClipPath',
+    kind: 'group',
+    canvasRender: {
+      render: (ctx) => {
+        if (!disabled && canvasPath) {
+          ctx.clip(canvasPath, invert ? 'evenodd' : 'nonzero');
+        }
+      },
+      deps: () => [disabled, canvasPath, invert],
+    },
+  });
+</script>
+
+{#if children}
+  {@render children({ id, url, useId })}
+{/if}

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

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

package/dist/components/ClipPath/ClipPath.html.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    invert = false,
+    children,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, invert, children, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+</script>
+
+{#if children}
+  {#if disabled || !c.effectivePath}
+    {@render children({ id, url, useId })}
+  {:else}
+    <div
+      class="lc-clip-path-div"
+      style:position="absolute"
+      style:inset="0"
+      style:clip-path={invert
+        ? `path(evenodd, "${c.effectivePath}")`
+        : `path("${c.effectivePath}")`}
+    >
+      {@render children({ id, url, useId })}
+    </div>
+  {/if}
+{/if}

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

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

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+export type ClipPathPropsWithoutHTML = {
+    /** A unique id for the clipPath. */
+    id?: string;
+    /** Use existing path or shape (by id) for clipPath */
+    useId?: string;
+    /** Whether to disable clipping (show all). @default false */
+    disabled?: boolean;
+    /**
+     * Invert the clip — content renders *outside* the shape instead of inside.
+     * @default false
+     */
+    invert?: boolean;
+    /**
+     * SVG path `d` string describing the clip shape. Drives all three layers.
+     */
+    path?: string;
+    /** A snippet to insert custom SVG content into the `<clipPath>`. */
+    clip?: Snippet<[{
+        id: string;
+    }]>;
+    /** Children to render. */
+    children?: Snippet<[{
+        id: string;
+        url: string;
+        useId?: string;
+    }]>;
+};
+export type ClipPathProps = ClipPathPropsWithoutHTML & Without<SVGAttributes<SVGClipPathElement>, ClipPathPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer ClipPath variant.
+ */
+export declare class ClipPathState {
+    #private;
+    chartCtx: ChartState;
+    outerRect: string;
+    /** Effective path used for canvas + html layers when inverting. */
+    effectivePath: string | undefined;
+    constructor(getProps: () => ClipPathProps);
+}

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

@@ -0,0 +1,19 @@
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer ClipPath variant.
+ */
+export class ClipPathState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    // Outer rect covering the chart bounds — combined with the clip shape under
+    // even-odd fill rule to invert the clip.
+    outerRect = $derived(`M0,0 H${this.chartCtx.width} V${this.chartCtx.height} H0 Z`);
+    /** Effective path used for canvas + html layers when inverting. */
+    effectivePath = $derived.by(() => {
+        const props = this.#getProps();
+        return props.invert && props.path ? `${this.outerRect} ${props.path}` : props.path;
+    });
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+}

package/dist/components/ClipPath/ClipPath.svelte

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

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

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

package/dist/components/ClipPath/ClipPath.svg.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  export type { ClipPathProps, ClipPathPropsWithoutHTML } from './ClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { createId } from '../../utils/createId.js';
+  import { ClipPathState, type ClipPathProps } from './ClipPath.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    id = createId('clipPath-', uid),
+    useId,
+    disabled = false,
+    children,
+    clip,
+    ...rest
+  }: ClipPathProps = $props();
+
+  const c = new ClipPathState(
+    () => ({ id, useId, disabled, children, clip, ...rest }) as ClipPathProps
+  );
+
+  const url = $derived(`url(#${id})`);
+</script>
+
+<defs>
+  <clipPath {id} {...rest}>
+    {#if clip}
+      {@render clip({ id })}
+    {:else if c.effectivePath}
+      <path d={c.effectivePath} clip-rule={rest.invert ? 'evenodd' : undefined} />
+    {/if}
+
+    {#if useId}
+      <use href="#{useId}" />
+    {/if}
+  </clipPath>
+</defs>
+
+{#if children}
+  {#if disabled}
+    {@render children({ id, url, useId })}
+  {:else}
+    <g style:clip-path={url} class="lc-clip-path-g">
+      {@render children({ id, url, useId })}
+    </g>
+  {/if}
+{/if}

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

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