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

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

@@ -0,0 +1,319 @@
+import { untrack } from 'svelte';
+import { resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
+import { get } from '@layerstack/utils';
+import { format as formatValue } from '@layerstack/utils';
+import { getStringWidth, truncateText } from '../../utils/string.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+/**
+ * Check if a string looks like a CSS/SVG value (percentage, em, px, etc.)
+ * rather than a data property accessor.
+ */
+function isCSSValue(value) {
+    return /^-?[\d.]+(%|em|rem|px|pt|cm|mm|in)?$/.test(value);
+}
+/**
+ * Check if a Text prop value is a data-space prop.
+ * Functions are always data props.
+ * Strings are data props unless they look like CSS values (e.g. "50%", "1em").
+ */
+export function isTextDataProp(value) {
+    if (typeof value === 'function')
+        return true;
+    if (typeof value === 'string' && !isCSSValue(value))
+        return true;
+    return false;
+}
+const defaultKey = (_, i) => i;
+export function getPathLength(pathRef) {
+    if (pathRef && typeof pathRef.getTotalLength === 'function') {
+        try {
+            return pathRef.getTotalLength();
+        }
+        catch (e) {
+            console.error('Error getting path length:', e);
+            return 0;
+        }
+    }
+    return 0;
+}
+/**
+ * Convert css value to pixel value (ex. 0.71em => 11.36)
+ */
+export function getPixelValue(cssValue) {
+    // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
+    if (typeof cssValue === 'number')
+        return cssValue;
+    const result = cssValue.match(/([\d.]+)(\D+)/);
+    const number = Number(result?.[1]);
+    switch (result?.[2]) {
+        case 'px':
+            return number;
+        case 'em':
+        case 'rem':
+            return number * 16;
+        default:
+            return 0;
+    }
+}
+export function isValidXOrY(xOrY) {
+    return ((typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+        typeof xOrY === 'string');
+}
+/** Build the standard `markInfo` payload used by every Text variant. */
+export function textMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.x === 'string' ? props.x : undefined,
+        y: typeof props.y === 'string' ? props.y : undefined,
+        color: typeof props.fill === 'string' ? props.fill : undefined,
+    };
+}
+/**
+ * Reactive state shared by every per-layer Text variant. Instantiate from
+ * each `Text.svg.svelte` / `Text.canvas.svelte` / `Text.html.svelte`
+ * component setup, passing a getter for the props.
+ *
+ * Per-layer specific bits (SVG `bind:this` refs, canvas's `render` function,
+ * canvas-specific style measurement) stay in their respective `.svelte` files.
+ */
+export class TextState {
+    #getProps = () => ({});
+    // Contexts
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    // Path measurement (only meaningful for SVG layer where the textPath element exists)
+    pathRef = $state();
+    // Data mode detection
+    dataMode = $derived(isTextDataProp(this.#getProps().x) || isTextDataProp(this.#getProps().y));
+    // Data resolution
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    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 = this.resolveTextPosition(d);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                x: animated?.x ?? resolved.x,
+                y: animated?.y ?? resolved.y,
+            };
+        });
+    });
+    resolveTextPosition(d) {
+        const props = this.#getProps();
+        if (this.geo.projection) {
+            const [projX, projY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
+            return { x: projX, y: projY };
+        }
+        return {
+            x: resolveDataProp(props.x, d, this.chartCtx.xScale, 0),
+            y: resolveDataProp(props.y, d, this.chartCtx.yScale, 0),
+        };
+    }
+    resolveTextValue(d) {
+        const value = this.#getProps().value;
+        if (typeof value === 'function') {
+            const v = value(d);
+            return v != null ? String(v) : '';
+        }
+        if (typeof value === 'string') {
+            const v = get(d, value);
+            return v != null ? String(v) : '';
+        }
+        return value != null ? String(value) : '';
+    }
+    #dataMotionMap = null;
+    // Pixel-mode motion sources
+    #motionX;
+    #motionY;
+    #motionValue;
+    get motionX() {
+        return this.#motionX.current;
+    }
+    get motionY() {
+        return this.#motionY.current;
+    }
+    // Resolved width: for path text, defer to the (SVG-bound) pathRef length
+    resolvedWidth = $derived(this.#getProps().path ? getPathLength(this.pathRef) : this.#getProps().width);
+    #defaultTruncateOptions = $derived({
+        maxChars: undefined,
+        position: 'end',
+        maxWidth: this.resolvedWidth,
+    });
+    truncateConfig = $derived.by(() => {
+        const truncate = this.#getProps().truncate;
+        if (typeof truncate === 'boolean') {
+            if (truncate)
+                return this.#defaultTruncateOptions;
+            return false;
+        }
+        return { ...this.#defaultTruncateOptions, ...(truncate ?? {}) };
+    });
+    // Numeric value tweening
+    rawText = $derived.by(() => {
+        const value = this.#getProps().value;
+        const motion = this.#getProps().motion;
+        const format = this.#getProps().format;
+        if (typeof value === 'function' || value == null)
+            return '';
+        if (typeof value === 'number' && motion) {
+            const v = this.#motionValue.current;
+            // @ts-expect-error - improve format types
+            return format ? formatValue(v, format) : String(v);
+        }
+        // @ts-expect-error - improve format types
+        const text = format ? formatValue(value, format) : value.toString();
+        return text.replace(/\\n/g, '\n');
+    });
+    textValue = $derived.by(() => {
+        const cfg = this.truncateConfig;
+        if (!cfg || cfg === true)
+            return this.rawText;
+        return truncateText(this.rawText, cfg);
+    });
+    // Word-wrapping (depends on style measurement; SVG/canvas-only)
+    // Note: `style` is a placeholder — never assigned in the original component
+    // either, so spaceWidth always falls back to 0. Preserved for behavior parity.
+    #spaceWidth = $derived(getStringWidth(' ', undefined) || 0);
+    wordsByLines = $derived.by(() => {
+        const props = this.#getProps();
+        const width = props.width;
+        const scaleToFit = props.scaleToFit ?? false;
+        const lines = this.textValue.split('\n');
+        return lines.flatMap((line) => {
+            const words = line.split(/(?:(?! +)\s+)/);
+            if (width == null) {
+                return [{ words }];
+            }
+            return words.reduce((result, item) => {
+                const currentLine = result[result.length - 1];
+                const itemWidth = getStringWidth(item, undefined) || 0;
+                if (currentLine &&
+                    (width == null ||
+                        scaleToFit ||
+                        (currentLine.width || 0) + itemWidth + this.#spaceWidth < width)) {
+                    currentLine.words.push(item);
+                    currentLine.width = currentLine.width || 0;
+                    currentLine.width += itemWidth + this.#spaceWidth;
+                }
+                else {
+                    const newLine = { words: [item], width: itemWidth };
+                    result.push(newLine);
+                }
+                return result;
+            }, []);
+        });
+    });
+    lineCount = $derived(this.wordsByLines.length);
+    // Vertical positioning
+    startDy = $derived.by(() => {
+        const props = this.#getProps();
+        const verticalAnchor = props.verticalAnchor ?? 'end';
+        const lineHeight = props.lineHeight ?? '1em';
+        const capHeight = props.capHeight ?? '0.71em';
+        if (verticalAnchor === 'start') {
+            return getPixelValue(lineHeight);
+        }
+        else if (verticalAnchor === 'middle') {
+            return ((this.lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+        }
+        return (this.lineCount - 1) * -getPixelValue(lineHeight) - getPixelValue(capHeight) / 2;
+    });
+    dataModeStartDy = $derived.by(() => {
+        const props = this.#getProps();
+        const verticalAnchor = props.verticalAnchor ?? 'end';
+        const lineHeight = props.lineHeight ?? '1em';
+        const capHeight = props.capHeight ?? '0.71em';
+        if (verticalAnchor === 'start')
+            return getPixelValue(lineHeight);
+        if (verticalAnchor === 'middle')
+            return getPixelValue(capHeight) / 2;
+        return -getPixelValue(capHeight) / 2;
+    });
+    scaleTransform = $derived.by(() => {
+        const props = this.#getProps();
+        const x = props.x;
+        const y = props.y;
+        const width = props.width;
+        const scaleToFit = props.scaleToFit ?? false;
+        if (scaleToFit &&
+            this.lineCount > 0 &&
+            typeof x === 'number' &&
+            typeof y === 'number' &&
+            typeof width === 'number') {
+            const lineWidth = this.wordsByLines[0].width || 1;
+            const sx = width / lineWidth;
+            const sy = sx;
+            const originX = x - sx * x;
+            const originY = y - sy * y;
+            return `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
+        }
+        return '';
+    });
+    rotateTransform = $derived.by(() => {
+        const props = this.#getProps();
+        return props.rotate ? `rotate(${props.rotate}, ${props.x}, ${props.y})` : '';
+    });
+    transform = $derived(this.#getProps().transform ??
+        `${this.scaleTransform} ${this.rotateTransform}`);
+    // Static (non-data-driven) values
+    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 _initialX = initial.initialX ?? (typeof initial.x === 'function' ? 0 : (initial.x ?? 0));
+        const _initialY = initial.initialY ?? (typeof initial.y === 'function' ? 0 : (initial.y ?? 0));
+        this.#motionX = createMotion(_initialX, () => {
+            const x = getProps().x;
+            return typeof x === 'number' || typeof x === 'string' ? x : 0;
+        }, initial.motion);
+        this.#motionY = createMotion(_initialY, () => {
+            const y = getProps().y;
+            return typeof y === 'number' || typeof y === 'string' ? y : 0;
+        }, initial.motion);
+        // Tween numeric values when motion is configured
+        this.#motionValue = createMotion(typeof initial.value === 'number' ? initial.value : 0, () => (typeof getProps().value === 'number' ? getProps().value : 0), typeof initial.value === 'number' && initial.motion
+            ? typeof initial.motion === 'object' && 'type' in initial.motion
+                ? initial.motion
+                : undefined
+            : undefined);
+        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 = this.resolveTextPosition(d);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Text/Text.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  // Re-export so existing `import type { TextProps } from '../../index.js'` keeps working.
+  export type {
+    TextProps,
+    TextPropsWithoutHTML,
+    TextSegment,
+  } from './Text.shared.svelte.js';
+  export { isTextDataProp } from './Text.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import TextSvg from './Text.svg.svelte';
+  import TextCanvas from './Text.canvas.svelte';
+  import TextHtml from './Text.html.svelte';
+  import type { TextProps } from './Text.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: TextProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <TextSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <TextCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <TextHtml {...props} />
+{/if}

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

@@ -0,0 +1,6 @@
+export type { TextProps, TextPropsWithoutHTML, TextSegment, } from './Text.shared.svelte.js';
+export { isTextDataProp } from './Text.shared.svelte.js';
+import type { TextProps } from './Text.shared.svelte.js';
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

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

package/dist/components/{Text.svelte.test.js → Text/Text.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 Text from './Text.svelte';
 describe('Text', () => {
     describe('pixel mode', () => {

package/dist/components/Text/Text.svg.svelte

@@ -0,0 +1,193 @@
+<script lang="ts" module>
+  export type {
+    TextProps,
+    TextPropsWithoutHTML,
+    TextSegment,
+  } from './Text.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createId } from '../../utils/createId.js';
+  import {
+    TextState,
+    textMarkInfo,
+    getPixelValue,
+    type TextProps,
+  } from './Text.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    svgRef: svgRefProp = $bindable(),
+    ref: refProp = $bindable(),
+    pathId = createId('text-path', uid),
+    // Pull out props that collide with SVG `<text>`/`<svg>` attribute names
+    // — we use these internally for layout and transforms, not as raw DOM
+    // attrs. Without this, `{...rest}` spread would set
+    // `<text rotate="..." dx="..." dy="...">` (which SVG interprets per
+    // glyph, not on the whole text).
+    rotate,
+    dx,
+    dy,
+    ...rest
+  }: TextProps = $props();
+
+  const c = new TextState(() => ({ rotate, dx, dy, ...rest } as TextProps));
+
+  let ref = $state<SVGTextElement>();
+  let svgRef = $state<SVGElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  $effect.pre(() => {
+    svgRefProp = svgRef;
+  });
+
+  c.chartCtx.registerComponent({
+    name: 'Text',
+    kind: 'mark',
+    markInfo: () => textMarkInfo(rest as TextProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const text = c.resolveTextValue(item.d)}
+    {@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)}
+    {@const dataRotateTransform = rotate
+      ? `rotate(${rotate}, ${item.x}, ${item.y})`
+      : ''}
+    <svg
+      x={dx ?? 0}
+      y={dy ?? 0}
+      {...rest.svgProps}
+      class={['lc-text-svg', rest.svgProps?.class]}
+    >
+      <text
+        {...rest as any}
+        x={item.x}
+        y={item.y}
+        transform={(rest.transform as string | undefined) ?? dataRotateTransform}
+        text-anchor={rest.textAnchor ?? 'start'}
+        dominant-baseline={rest.dominantBaseline ?? 'auto'}
+        fill={resolvedFill}
+        fill-opacity={resolvedFillOpacity}
+        stroke={resolvedStroke}
+        stroke-width={resolvedStrokeWidth}
+        opacity={resolvedOpacity}
+        class={['lc-text', resolvedClass]}
+      >
+        <tspan x={item.x} dy={c.dataModeStartDy} class="lc-text-tspan">
+          {text}
+        </tspan>
+      </text>
+    </svg>
+  {/each}
+{:else}
+  <svg
+    x={dx ?? 0}
+    y={dy ?? 0}
+    {...rest.svgProps}
+    class={['lc-text-svg', rest.svgProps?.class]}
+    bind:this={svgRef}
+  >
+    {#if rest.path}
+      <defs>
+        {#key rest.path}
+          <path bind:this={c.pathRef} id={pathId} d={rest.path} />
+        {/key}
+      </defs>
+      <text
+        {...rest as any}
+        bind:this={ref}
+        dy={dy ?? 0}
+        fill={c.staticFill}
+        fill-opacity={c.staticFillOpacity}
+        stroke={c.staticStroke}
+        stroke-width={c.staticStrokeWidth}
+        opacity={c.staticOpacity}
+        transform={rest.transform as string | undefined}
+        class={['lc-text', c.staticClassName]}
+      >
+        <textPath
+          style="text-anchor: {rest.textAnchor ?? 'start'};"
+          dominant-baseline={rest.dominantBaseline ?? 'auto'}
+          href="#{pathId}"
+          startOffset={rest.startOffset ?? '0%'}
+          class="lc-text-path"
+        >
+          {c.wordsByLines.map((line) => line.words.join(' ')).join()}
+        </textPath>
+      </text>
+    {:else}
+      <!-- `motionX` / `motionY` default to 0 when `x` / `y` aren't set, matching
+           SVG's natural "missing coord = 0" behavior. This lets `<Text>` work
+           inside positioned parents like `<Group>` or `<Arc>` even without
+           explicit coordinates (matching `Text.canvas` / `Text.html`). -->
+      <text
+        {...rest as any}
+        bind:this={ref}
+        x={c.motionX}
+        y={c.motionY}
+        transform={c.transform}
+        text-anchor={rest.textAnchor ?? 'start'}
+        dominant-baseline={rest.dominantBaseline ?? 'auto'}
+        fill={c.staticFill}
+        fill-opacity={c.staticFillOpacity}
+        stroke={c.staticStroke}
+        stroke-width={c.staticStrokeWidth}
+        opacity={c.staticOpacity}
+        class={['lc-text', c.staticClassName]}
+      >
+        {#if rest.segments}
+          {#each rest.segments as segment, index (index)}
+            <tspan dy={index === 0 ? c.startDy : 0} class={['lc-text-tspan', segment.class]}>
+              {segment.value}
+            </tspan>
+          {/each}
+        {:else}
+          {#each c.wordsByLines as line, index (index)}
+            <tspan
+              x={c.motionX}
+              dy={index === 0 ? c.startDy : getPixelValue(rest.lineHeight ?? '1em')}
+              class="lc-text-tspan"
+            >
+              {line.words.join(' ')}
+            </tspan>
+          {/each}
+        {/if}
+      </text>
+    {/if}
+  </svg>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-text)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    :global(:where(.lc-text-svg)) {
+      overflow: visible;
+      paint-order: stroke;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([fill])) {
+      color: var(--fill-color);
+      fill: currentColor;
+    }
+    :global(:where(.lc-layout-svg .lc-text, svg.lc-text):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+export type { TextProps, TextPropsWithoutHTML, TextSegment, } from './Text.shared.svelte.js';
+import { type TextProps } from './Text.shared.svelte.js';
+declare const Text: import("svelte").Component<TextProps, {}, "ref" | "svgRef">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/Threshold/Threshold.base.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { ThresholdProps } from './Threshold.shared.svelte.js';
+
+  export type ThresholdBaseLayerComponents = {
+    Area: Component<any>;
+    ClipPath: Component<any>;
+  };
+
+  export type ThresholdBaseProps = ThresholdProps & ThresholdBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { min, max } from 'd3-array';
+  import { getChartContext } from '../../contexts/chart.js';
+
+  const ctx = getChartContext();
+
+  // Mark as composite so child Areas don't register
+  ctx.registerComponent({ name: 'Threshold', kind: 'composite-mark' });
+
+  let { Area, ClipPath, curve, defined, below, above, children }: ThresholdBaseProps = $props();
+</script>
+
+{#key curve}
+  <ClipPath>
+    {#snippet clip()}
+      <Area y0={(d: any) => ctx.y(d)[1]} y1={(d: any) => max(ctx.yDomain)} {curve} {defined} />
+    {/snippet}
+    {@render above?.({ curve, defined })}
+  </ClipPath>
+
+  <ClipPath>
+    {#snippet clip()}
+      <Area y0={(d: any) => min(ctx.yDomain)} y1={(d: any) => ctx.y(d)[1]} {curve} {defined} />
+    {/snippet}
+
+    {@render below?.({ curve, defined })}
+  </ClipPath>
+
+  {@render children?.({ curve, defined })}
+{/key}

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { ThresholdProps } from './Threshold.shared.svelte.js';
+export type ThresholdBaseLayerComponents = {
+    Area: Component<any>;
+    ClipPath: Component<any>;
+};
+export type ThresholdBaseProps = ThresholdProps & ThresholdBaseLayerComponents;
+declare const Threshold: Component<ThresholdBaseProps, {}, "">;
+type Threshold = ReturnType<typeof Threshold>;
+export default Threshold;

package/dist/components/Threshold/Threshold.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ThresholdProps, ThresholdSnippetProps } from './Threshold.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ThresholdBase from './Threshold.base.svelte';
+  import Area from '../Area/Area.canvas.svelte';
+  import ClipPath from '../ClipPath/ClipPath.canvas.svelte';
+  import type { ThresholdProps } from './Threshold.shared.svelte.js';
+
+  let props: ThresholdProps = $props();
+</script>
+
+<ThresholdBase {Area} {ClipPath} {...props} />

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

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

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

@@ -1,31 +1,18 @@
 import type { ComponentProps, Snippet } from 'svelte';
 import type { CurveFactory } from 'd3-shape';
+import type Area from '../Area/Area.svelte';
 export type ThresholdSnippetProps = {
     curve?: CurveFactory;
     defined?: ComponentProps<typeof Area>['defined'];
 };
 export type ThresholdProps = {
-    /**
-     * The curve factory to use for the area.
-     *
-     */
+    /** The curve factory to use for the area. */
     curve?: CurveFactory;
-    /**
-     * Function to determine if a point is defined.
-     *
-     */
+    /** Function to determine if a point is defined. */
     defined?: ComponentProps<typeof Area>['defined'];
-    /**
-     * Content to render above the threshold area.
-     */
+    /** Content to render above the threshold area. */
     above?: Snippet<[ThresholdSnippetProps]>;
-    /**
-     * Content to render below the threshold area.
-     */
+    /** Content to render below the threshold area. */
     below?: Snippet<[ThresholdSnippetProps]>;
     children?: Snippet<[ThresholdSnippetProps]>;
 };
-import Area from './Area.svelte';
-declare const Threshold: import("svelte").Component<ThresholdProps, {}, "">;
-type Threshold = ReturnType<typeof Threshold>;
-export default Threshold;

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

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