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

package/dist/components/{Vector.svelte → Vector/Vector.base.svelte}

@@ -1,132 +1,19 @@
 <script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { Without } from '../utils/types.js';
-  import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
-  import type { VectorAnchor } from '../utils/path.js';
+  import type { Component } from 'svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
 
-  export type VectorShape = 'arrow' | 'arrow-filled' | 'spike';
+  export type VectorBaseLayerComponents = {
+    Path: Component<any>;
+  };
 
-  export type VectorPropsWithoutHTML = {
-    /**
-     * The x position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    x?: DataProp;
-
-    /**
-     * The initial x position (pixel mode only).
-     * @default x
-     */
-    initialX?: number;
-
-    /**
-     * The y position of the vector.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    y?: DataProp;
-
-    /**
-     * The initial y position (pixel mode only).
-     * @default y
-     */
-    initialY?: number;
-
-    /**
-     * The length of the vector in pixels.
-     * - `number`: pixel value (direct)
-     * - `string`: data property name, resolved via rScale
-     * - `function(d)`: accessor called per data item, result passed through rScale
-     *
-     * @default 12
-     */
-    length?: DataProp;
-
-    /**
-     * The initial length of the vector (pixel mode only).
-     * @default length
-     */
-    initialLength?: number;
-
-    /**
-     * The rotation angle in degrees, clockwise from north (up).
-     * - `number`: direct degree value
-     * - `string`: data property name (raw value extracted, no scale)
-     * - `function(d)`: accessor called per data item (raw value, no scale)
-     *
-     * @default 0
-     */
-    rotate?: DataProp;
-
-    /**
-     * The shape of the vector.
-     * - `"arrow"`: a line with a V-shaped arrowhead at the tip (stroke-based)
-     * - `"arrow-filled"`: a solid arrow with a tapered tail and triangular arrowhead (fill-based)
-     * - `"spike"`: a thin filled triangle
-     *
-     * @default 'arrow'
-     */
-    shape?: VectorShape;
-
-    /**
-     * Where the position (x, y) is relative to the vector.
-     * - `"start"`: base of the vector is at the position
-     * - `"middle"`: center of the vector is at the position
-     * - `"end"`: tip of the vector is at the position
-     *
-     * Defaults to `"middle"` for arrow shape and `"start"` for spike shape.
-     */
-    anchor?: VectorAnchor;
-
-    /**
-     * Width of the vector shape in pixels (arrowhead wingspan or spike base).
-     * When not set, scales proportionally with length (~25% of length).
-     */
-    width?: number;
-
-    /**
-     * Data array to iterate over in data mode.
-     * Falls back to chart context data when not provided.
-     */
-    data?: any[];
-
-    /**
-     * Key function for keyed {#each} rendering in data mode.
-     * @default (d, i) => i
-     */
-    key?: (d: any, index: number) => any;
-
-    /** Motion configuration (pixel mode only). */
-    motion?: MotionProp;
-
-    /**
-     * Custom content to render inside the vector's positioned/rotated coordinate space.
-     * When provided, replaces the default shape rendering.
-     * The snippet receives `{ length, d }` where `d` is the data item (data mode only).
-     * Content is rendered at the origin, rotated so "up" (negative y) points in the vector direction.
-     */
-    children?: Snippet<[{ length: number; d?: any }]>;
-  } & DataDrivenStyleProps;
-
-  export type VectorProps = VectorPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, VectorPropsWithoutHTML>;
+  export type VectorBaseProps = VectorProps & VectorBaseLayerComponents;
 </script>
 
 <script lang="ts">
   import { untrack } from 'svelte';
-
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { getLayerContext } from '../contexts/layer.js';
-  import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
   import {
     hasAnyDataProp,
     resolveDataProp,
@@ -134,18 +21,18 @@
     resolveGeoDataPair,
     resolveStyleProp,
     resolveColorProp,
-  } from '../utils/dataProp.js';
-  import { chartDataArray } from '../utils/common.js';
+  } from '../../utils/dataProp.js';
+  import { chartDataArray } from '../../utils/common.js';
   import { cls } from '@layerstack/tailwind';
   import {
     vectorArrowPath,
     vectorArrowFilledPath,
     vectorSpikePath,
     transformVectorPath,
-  } from '../utils/path.js';
-  import Path from './Path.svelte';
+  } from '../../utils/path.js';
 
   let {
+    Path,
     x = 0,
     initialX: initialXProp,
     y = 0,
@@ -167,18 +54,13 @@
     opacity,
     class: className,
     ...restProps
-  }: VectorProps = $props();
+  }: VectorBaseProps = $props();
 
-  // Filled shapes use fill instead of stroke for their default styling
   const isFilled = $derived(shape === 'spike' || shape === 'arrow-filled');
-
-  // Resolve anchor default based on shape
   const resolvedAnchor = $derived(anchor ?? (isFilled ? 'start' : 'middle'));
 
-  // Data mode detection
   const dataMode = $derived(hasAnyDataProp(x, y, lengthProp, rotateProp));
 
-  // Per-item style mode: when any style prop is a function, we must render individual paths
   const hasPerItemStyles = $derived(
     typeof fill === 'function' ||
       typeof stroke === 'function' ||
@@ -188,25 +70,21 @@
       typeof className === 'function'
   );
 
-  // Contexts
   const chartCtx = getChartContext();
   const geo = getGeoContext();
-  const layerCtx = getLayerContext();
 
-  // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
+  const resolvedData: any[] = $derived(
+    dataMode ? dataProp ?? chartDataArray(chartCtx.data) : []
+  );
 
-  // Resolve a single data item to pixel coordinates and values
   function resolveVector(d: any) {
     let resolvedX: number, resolvedY: number;
-
     if (geo.projection) {
       [resolvedX, resolvedY] = resolveGeoDataPair(x, y, d, geo.projection);
     } else {
       resolvedX = resolveDataProp(x, d, chartCtx.xScale, 0);
       resolvedY = resolveDataProp(y, d, chartCtx.yScale, 0);
     }
-
     return {
       x: resolvedX,
       y: resolvedY,
@@ -217,11 +95,10 @@
         typeof lengthProp === 'number' ? lengthProp : 12
       ),
       rotate:
-        typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
+        typeof rotateProp === 'number' ? rotateProp : extractRawDataValue(rotateProp, d) ?? 0,
     };
   }
 
-  // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
   if (dataMotionMap) {
@@ -239,7 +116,6 @@
     });
   }
 
-  // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
     if (!dataMode) return [];
     return resolvedData.map((d, i) => {
@@ -257,7 +133,6 @@
     });
   });
 
-  // --- Anchor offset for custom children ---
   function getAnchorOffset(len: number) {
     switch (resolvedAnchor) {
       case 'start':
@@ -270,8 +145,6 @@
     }
   }
 
-  // --- Path generation ---
-  // Generate local path data (at origin, pointing up)
   function getLocalPathData(len: number) {
     const w = width ?? len * 0.25;
     if (shape === 'spike') {
@@ -283,12 +156,10 @@
     return vectorArrowPath({ length: len, anchor: resolvedAnchor, width: w });
   }
 
-  // Generate absolute path data with position and rotation baked in
   function getAbsolutePathData(itemX: number, itemY: number, len: number, rot: number) {
     return transformVectorPath(getLocalPathData(len), itemX, itemY, rot);
   }
 
-  // --- Combined path for all items (single Path element for SVG + Canvas) ---
   const combinedPathData = $derived.by(() => {
     if (dataMode) {
       return resolvedItems
@@ -298,7 +169,6 @@
     return null;
   });
 
-  // --- Pixel mode ---
   const initialX = initialXProp ?? (typeof x === 'number' ? x : 0);
   const initialY = initialYProp ?? (typeof y === 'number' ? y : 0);
   const initialLength = initialLengthProp ?? (typeof lengthProp === 'number' ? lengthProp : 12);
@@ -319,7 +189,6 @@
 </script>
 
 {#if children}
-  <!-- Custom children: use <g> with transform for positioning/rotation -->
   {#if dataMode}
     {#each resolvedItems as item (item.key)}
       {@const offset = getAnchorOffset(item.length)}
@@ -339,7 +208,6 @@
     </g>
   {/if}
 {:else if dataMode && hasPerItemStyles}
-  <!-- Data mode with per-item styles: render individual paths -->
   {#each resolvedItems as item (item.key)}
     {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
     {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
@@ -358,7 +226,6 @@
     />
   {/each}
 {:else}
-  <!-- Built-in shapes: single Path element handles SVG + Canvas -->
   <Path
     pathData={dataMode ? combinedPathData : pixelPathData}
     fill={fill as string}
@@ -380,7 +247,6 @@
       stroke-linejoin: round;
     }
 
-    /* Stroked shapes (arrow): stroke defaults to currentColor, fill to none */
     :global(:where(.lc-layout-svg .lc-vector-stroked, svg.lc-vector-stroked):not([stroke])) {
       stroke: var(--color-surface-content, currentColor);
     }
@@ -388,7 +254,6 @@
       fill: none;
     }
 
-    /* Filled shapes (spike, arrow-filled): fill defaults to currentColor, stroke to none */
     :global(:where(.lc-layout-svg .lc-vector-filled, svg.lc-vector-filled):not([fill])) {
       fill: var(--color-surface-content, currentColor);
     }

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { VectorProps } from './Vector.shared.svelte.js';
+export type VectorBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type VectorBaseProps = VectorProps & VectorBaseLayerComponents;
+declare const Vector: Component<VectorBaseProps, {}, "">;
+type Vector = ReturnType<typeof Vector>;
+export default Vector;

package/dist/components/Vector/Vector.canvas.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import VectorBase from './Vector.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  let props: VectorProps = $props();
+</script>
+
+<VectorBase {Path} {...props} />

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

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

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import type { VectorAnchor } from '../../utils/path.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+export type VectorShape = 'arrow' | 'arrow-filled' | 'spike';
+export type VectorPropsWithoutHTML = {
+    /** @default 0 */
+    x?: DataProp;
+    /** @default x */
+    initialX?: number;
+    /** @default 0 */
+    y?: DataProp;
+    /** @default y */
+    initialY?: number;
+    /** @default 12 */
+    length?: DataProp;
+    /** @default length */
+    initialLength?: number;
+    /** @default 0 */
+    rotate?: DataProp;
+    /** @default 'arrow' */
+    shape?: VectorShape;
+    anchor?: VectorAnchor;
+    /** Width of the vector shape in pixels. */
+    width?: number;
+    data?: any[];
+    /** @default (d, i) => i */
+    key?: (d: any, index: number) => any;
+    motion?: MotionProp;
+    children?: Snippet<[{
+        length: number;
+        d?: any;
+    }]>;
+} & DataDrivenStyleProps;
+export type VectorProps = VectorPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, VectorPropsWithoutHTML>;

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

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

package/dist/components/Vector/Vector.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import VectorSvg from './Vector.svg.svelte';
+  import VectorCanvas from './Vector.canvas.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: VectorProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <VectorSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <VectorCanvas {...props} />
+{/if}

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

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

package/dist/components/Vector/Vector.svg.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+  export type { VectorProps, VectorPropsWithoutHTML, VectorShape } from './Vector.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import VectorBase from './Vector.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import type { VectorProps } from './Vector.shared.svelte.js';
+
+  let props: VectorProps = $props();
+</script>
+
+<VectorBase {Path} {...props} />

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

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

package/dist/components/{Violin.svelte → Violin/Violin.base.svelte}

@@ -1,80 +1,34 @@
 <script lang="ts" module>
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { CurveFactory } from 'd3-shape';
-  import type { CommonStyleProps, CommonEvents, Without } from '../utils/types.js';
-  import type { Accessor } from '../utils/common.js';
-
-  export type ViolinPropsWithoutHTML = {
-    /** Data item containing violin data */
-    data: Object;
-
-    /**
-     * Pre-computed density data accessor. Should resolve to an array of `[value, density]` pairs.
-     * Use this when you want full control over the density estimation.
-     */
-    density?: Accessor;
-
-    /**
-     * Raw values accessor. If provided, KDE (kernel density estimation) is computed automatically.
-     * The accessor should resolve to an array of numbers.
-     */
-    values?: Accessor;
-
-    /** KDE bandwidth. Auto-computed via Silverman's rule of thumb if not specified. */
-    bandwidth?: number;
-
-    /** Number of evaluation points for KDE. @default 50 */
-    thresholds?: number;
-
-    /** Fixed width of the violin in pixels. Defaults to 80% of band scale bandwidth, or 40px. */
-    width?: number;
-
-    /** Curve interpolation for the violin shape. @default curveCardinal */
-    curve?: CurveFactory;
-
-    /**
-     * Show a median line inside the violin.
-     * Requires `values` prop to compute the median.
-     * @default false
-     */
-    median?: boolean;
-
-    /**
-     * Show an inner box (Q1-Q3 range) inside the violin.
-     * Pass `true` for defaults or `{ width: number }` to customize box width.
-     * Requires `values` prop to compute quartiles.
-     * @default false
-     */
-    box?: boolean | { width?: number };
-
-    /** Setup pointer events to show tooltip for this data item. */
-    tooltip?: boolean;
-  } & CommonStyleProps;
-
-  export type ViolinProps = ViolinPropsWithoutHTML &
-    Without<SVGAttributes<SVGPathElement>, ViolinPropsWithoutHTML> &
-    CommonEvents;
+  import type { Component } from 'svelte';
+  import type { ViolinProps } from './Violin.shared.svelte.js';
+
+  export type ViolinBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+    Rect: Component<any>;
+    Line: Component<any>;
+  };
+
+  export type ViolinBaseProps = ViolinProps & ViolinBaseLayerComponents;
 </script>
 
 <script lang="ts">
   import type { PointerEventHandler } from 'svelte/elements';
-  import { area as d3Area } from 'd3-shape';
-  import { curveCardinal } from 'd3-shape';
+  import { area as d3Area, curveCardinal } from 'd3-shape';
   import { quantile, ascending, deviation, max as d3Max } from 'd3-array';
-
   import { cls } from '@layerstack/tailwind';
 
-  import Group from './Group.svelte';
-  import Path from './Path.svelte';
-  import Rect from './Rect.svelte';
-  import Line from './Line.svelte';
-  import { accessor } from '../utils/common.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { accessor } from '../../utils/common.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { isScaleBand } from '../../utils/scales.svelte.js';
 
   const ctx = getChartContext();
 
   let {
+    Group,
+    Path,
+    Rect,
+    Line,
     data,
     density: densityProp,
     values: valuesProp,
@@ -95,17 +49,12 @@
     onpointerleave,
     class: className,
     ...restProps
-  }: ViolinProps = $props();
+  }: ViolinBaseProps = $props();
 
-  // Register as composite mark (shields child marks from domain calculation)
-  ctx.registerComponent({
-    name: 'Violin',
-    kind: 'composite-mark',
-  });
+  ctx.registerComponent({ name: 'Violin', kind: 'composite-mark' });
 
   const isVertical = $derived(ctx.valueAxis === 'y');
 
-  // Category position: center of the band for this data item
   const categoryPos = $derived.by(() => {
     const catAccessor = isVertical ? ctx.x : ctx.y;
     const catScale = isVertical ? ctx.xScale : ctx.yScale;
@@ -114,17 +63,14 @@
     return pos + bandwidth / 2;
   });
 
-  // Violin width: derived from band scale or explicit prop
   const violinWidth = $derived.by(() => {
     if (widthProp != null) return widthProp;
     const catScale = isVertical ? ctx.xScale : ctx.yScale;
     return isScaleBand(catScale) ? catScale.bandwidth() * 0.8 : 40;
   });
 
-  // Value scale for mapping data values to pixel positions
   const valueScale = $derived(isVertical ? ctx.yScale : ctx.xScale);
 
-  // Epanechnikov kernel
   function epanechnikov(bw: number) {
     return (x: number) => {
       const u = x / bw;
@@ -132,7 +78,6 @@
     };
   }
 
-  // Compute density data from raw values via KDE, or use pre-computed density
   const densityData = $derived.by<[number, number][]>(() => {
     if (densityProp) {
       return accessor(densityProp)(data);
@@ -147,7 +92,6 @@
     const sorted = [...raw].sort(ascending);
     const ext: [number, number] = [sorted[0], sorted[sorted.length - 1]];
 
-    // Silverman's rule of thumb for bandwidth
     const bw = bandwidthProp ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
 
     const kernelFn = epanechnikov(bw);
@@ -162,7 +106,6 @@
     });
   });
 
-  // Compute quartile stats for optional box/median overlays
   const stats = $derived.by(() => {
     if (!showMedian && !showBox) return null;
     if (!valuesProp) return null;
@@ -179,13 +122,9 @@
     };
   });
 
-  // Max density for scaling width
   const maxDensity = $derived(d3Max(densityData, (d) => d[1]) ?? 1);
-
-  // Map density value to half-width in pixels
   const densityToWidth = $derived.by(() => (d: number) => (d / maxDensity) * (violinWidth / 2));
 
-  // Generate the mirrored area SVG path for the violin shape
   const pathData = $derived.by(() => {
     if (densityData.length === 0) return '';
 
@@ -208,12 +147,10 @@
     }
   });
 
-  // Inner box width
   const innerBoxWidth = $derived(
     typeof showBox === 'object' && showBox.width != null ? showBox.width : violinWidth * 0.15
   );
 
-  // Tooltip event handlers
   const onPointerEnter: PointerEventHandler<Element> = (e) => {
     onpointerenter?.(e);
     if (tooltip) ctx.tooltip.show(e, data);
@@ -236,7 +173,6 @@
     onpointermove={onPointerMove}
     onpointerleave={onPointerLeave}
   >
-    <!-- Violin shape (mirrored density area) -->
     <Path
       {pathData}
       {fill}
@@ -247,7 +183,6 @@
     />
 
     {#if showBox && stats}
-      <!-- Inner box (Q1-Q3) -->
       {#if isVertical}
         <Rect
           x={categoryPos - innerBoxWidth / 2}
@@ -274,7 +209,6 @@
     {/if}
 
     {#if showMedian && stats}
-      <!-- Median line -->
       {#if isVertical}
         <Line
           x1={categoryPos - violinWidth * 0.15}

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

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+import type { ViolinProps } from './Violin.shared.svelte.js';
+export type ViolinBaseLayerComponents = {
+    Group: Component<any>;
+    Path: Component<any>;
+    Rect: Component<any>;
+    Line: Component<any>;
+};
+export type ViolinBaseProps = ViolinProps & ViolinBaseLayerComponents;
+declare const Violin: Component<ViolinBaseProps, {}, "">;
+type Violin = ReturnType<typeof Violin>;
+export default Violin;

package/dist/components/Violin/Violin.canvas.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { ViolinProps, ViolinPropsWithoutHTML } from './Violin.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ViolinBase from './Violin.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import type { ViolinProps } from './Violin.shared.svelte.js';
+
+  let props: ViolinProps = $props();
+</script>
+
+<ViolinBase {Group} {Path} {Rect} {Line} {...props} />

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

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