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

package/dist/components/Image/Image.svg.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+  export type {
+    ImageProps,
+    ImagePropsWithoutHTML,
+  } from './Image.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { createId } from '../../utils/createId.js';
+  import { ImageState, imageMarkInfo, type ImageProps } from './Image.shared.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    href,
+    ref: refProp = $bindable(),
+    preserveAspectRatio = 'xMidYMid meet',
+    crossOrigin,
+    imageRendering,
+    class: className,
+    // Pull out props that collide with `<image>` SVG attribute names so spread
+    // doesn't clobber our explicit attrs.
+    x,
+    y,
+    width,
+    height,
+    r,
+    rotate,
+    initialX,
+    initialY,
+    initialWidth,
+    initialHeight,
+    data,
+    key,
+    motion,
+    opacity,
+    ...rest
+  }: ImageProps = $props();
+
+  const c = new ImageState(
+    () =>
+      ({
+        href,
+        x,
+        y,
+        width,
+        height,
+        r,
+        rotate,
+        initialX,
+        initialY,
+        initialWidth,
+        initialHeight,
+        data,
+        key,
+        motion,
+        opacity,
+        ...rest,
+      }) as ImageProps
+  );
+
+  const clipId = createId('image-clip', uid);
+
+  let ref = $state<SVGImageElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  c.chartCtx.registerComponent({
+    name: 'Image',
+    kind: 'mark',
+    markInfo: () => imageMarkInfo({ x, y, data, ...rest } as ImageProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item, i (item.key)}
+    {@const resolvedHrefValue = c.resolveHref(item.d)}
+    {@const renderX = item.x - item.width / 2}
+    {@const renderY = item.y - item.height / 2}
+    {#if item.r !== undefined}
+      <defs>
+        <clipPath id="{clipId}-{i}">
+          <circle cx={item.x} cy={item.y} r={item.r} />
+        </clipPath>
+      </defs>
+    {/if}
+    <image
+      {...rest as any}
+      href={resolvedHrefValue}
+      x={renderX}
+      y={renderY}
+      width={item.width}
+      height={item.height}
+      clip-path={item.r !== undefined ? `url(#${clipId}-${i})` : undefined}
+      transform={item.rotate ? `rotate(${item.rotate}, ${item.x}, ${item.y})` : undefined}
+      {preserveAspectRatio}
+      crossorigin={crossOrigin}
+      image-rendering={imageRendering}
+      {opacity}
+      class={cls('lc-image', className)}
+    />
+  {/each}
+{:else}
+  {#if c.pixelR !== undefined}
+    <defs>
+      <clipPath id={clipId}>
+        <circle cx={c.motionX} cy={c.motionY} r={c.pixelR} />
+      </clipPath>
+    </defs>
+  {/if}
+  <image
+    {...rest as any}
+    bind:this={ref}
+    href={typeof href === 'string' ? href : undefined}
+    x={c.motionX - c.motionWidth / 2}
+    y={c.motionY - c.motionHeight / 2}
+    width={c.motionWidth}
+    height={c.motionHeight}
+    clip-path={c.pixelR !== undefined ? `url(#${clipId})` : undefined}
+    transform={c.pixelRotate ? `rotate(${c.pixelRotate}, ${c.motionX}, ${c.motionY})` : undefined}
+    {preserveAspectRatio}
+    crossorigin={crossOrigin}
+    image-rendering={imageRendering}
+    {opacity}
+    class={cls('lc-image', className)}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-image)) {
+      pointer-events: none;
+    }
+  }
+</style>

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

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

package/dist/components/Labels/Labels.base.svelte

@@ -0,0 +1,92 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { LabelsProps } from './Labels.shared.svelte.js';
+
+  export type LabelsBaseLayerComponents = {
+    Text: Component<any>;
+    Group: Component<any>;
+    Points: Component<any>;
+  };
+
+  export type LabelsBaseProps<T = any> = LabelsProps<T> & LabelsBaseLayerComponents;
+</script>
+
+<script lang="ts" generics="TData = any">
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { LabelsState } from './Labels.shared.svelte.js';
+  import type { Point } from '../Points/Points.shared.svelte.js';
+
+  let {
+    Text,
+    Group,
+    Points,
+    data,
+    value,
+    x,
+    y,
+    seriesKey,
+    placement = 'outside',
+    offset = placement === 'center' || placement === 'middle' ? 0 : 4,
+    format,
+    key = (_: any, i: number) => i,
+    children: childrenProp,
+    class: className,
+    fill,
+    opacity,
+    ...restProps
+  }: LabelsBaseProps<TData> = $props();
+
+  const c = new LabelsState<TData>(
+    () =>
+      ({
+        data,
+        value,
+        x,
+        y,
+        seriesKey,
+        placement,
+        offset,
+        format,
+        fill,
+        opacity,
+      }) as LabelsProps<TData>
+  );
+</script>
+
+<Group class="lc-labels-g" opacity={c.derivedOpacity as number}>
+  <Points {data} {x} {y} {seriesKey}>
+    {#snippet children({ points }: { points: Point[] })}
+      {#each points as point, i (key(point.data, i))}
+        {@const baseProps = c.getTextProps(point, points, i)}
+        {@const textProps = extractLayerProps(baseProps, 'lc-labels-text')}
+        {#if childrenProp}
+          {@render childrenProp({ data: point, textProps })}
+        {:else}
+          <Text
+            data-placement={placement}
+            {...textProps}
+            {...restProps}
+            {...extractLayerProps(baseProps, 'lc-labels-text', className ?? '')}
+          />
+        {/if}
+      {/each}
+    {/snippet}
+  </Points>
+</Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-labels-text)) {
+      font-size: 12px;
+
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: var(--color-surface-100, light-dark(white, black));
+
+      &[data-placement='inside'],
+      &[data-placement='center'] {
+        --fill-color: var(--color-surface-100, light-dark(white, black));
+        --stroke-color: var(--color-surface-content, currentColor);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { Component } from 'svelte';
+import type { LabelsProps } from './Labels.shared.svelte.js';
+export type LabelsBaseLayerComponents = {
+    Text: Component<any>;
+    Group: Component<any>;
+    Points: Component<any>;
+};
+export type LabelsBaseProps<T = any> = LabelsProps<T> & LabelsBaseLayerComponents;
+declare function $$render<TData = any>(): {
+    props: LabelsBaseProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<TData = any> = InstanceType<typeof Labels<TData>>;
+export default Labels;

package/dist/components/Labels/Labels.canvas.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData = any">
+  import LabelsBase from './Labels.base.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Points from '../Points/Points.canvas.svelte';
+
+  import type { LabelsProps } from './Labels.shared.svelte.js';
+
+  let props: LabelsProps<TData> = $props();
+</script>
+
+<LabelsBase {Text} {Group} {Points} {...props} />

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

@@ -0,0 +1,26 @@
+export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+import type { LabelsProps } from './Labels.shared.svelte.js';
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<TData = any> = InstanceType<typeof Labels<TData>>;
+export default Labels;

package/dist/components/Labels/Labels.html.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData = any">
+  import LabelsBase from './Labels.base.svelte';
+  import Text from '../Text/Text.html.svelte';
+  import Group from '../Group/Group.html.svelte';
+  import Points from '../Points/Points.html.svelte';
+
+  import type { LabelsProps } from './Labels.shared.svelte.js';
+
+  let props: LabelsProps<TData> = $props();
+</script>
+
+<LabelsBase {Text} {Group} {Points} {...props} />

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

@@ -0,0 +1,26 @@
+export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+import type { LabelsProps } from './Labels.shared.svelte.js';
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<TData = any> = InstanceType<typeof Labels<TData>>;
+export default Labels;

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
+import type { Without } from '../../utils/types.js';
+import { type Accessor } from '../../utils/common.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { TextProps } from '../Text/Text.shared.svelte.js';
+import type { Point } from '../Points/Points.shared.svelte.js';
+export type LabelsPropsWithoutHTML<T = any> = {
+    /** Override data instead of using context */
+    data?: T;
+    /** Override display value accessor. By default, uses `y` unless yScale is band scale */
+    value?: Accessor<T>;
+    /** The fill color of the label, string or accessor */
+    fill?: string | Accessor<T>;
+    /** Override `x` accessor from Chart context */
+    x?: Accessor<T>;
+    /** Override `y` accessor from Chart context */
+    y?: Accessor<T>;
+    /** Series key to use for accessor. */
+    seriesKey?: string;
+    /** @default 'outside' */
+    placement?: 'inside' | 'outside' | 'middle' | 'center' | 'smart';
+    /** @default placement === 'center' || placement === 'middle' ? 0 : 4 */
+    offset?: number;
+    /** The format of the label */
+    format?: FormatType | FormatConfig;
+    /** @default (d, index) => index */
+    key?: (d: T, index: number) => any;
+    children?: Snippet<[{
+        data: Point;
+        textProps: TextProps;
+    }]>;
+};
+export type LabelsProps<T = any> = LabelsPropsWithoutHTML<T> & Without<TextProps, LabelsPropsWithoutHTML<T>>;
+/**
+ * Reactive state shared by every per-layer Labels variant. Holds the
+ * `getTextProps(point, points, i)` helper that computes per-point label
+ * positioning + opacity, plus the resolved opacity.
+ */
+export declare class LabelsState<T = any> {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => LabelsProps<T>);
+    getDimensions: (item: any) => {
+        x: any;
+        y: any;
+        width: number;
+        height: number;
+    } | undefined;
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    derivedOpacity: number;
+    getTextProps(point: Point, points?: Point[], i?: number): TextProps;
+}

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

@@ -0,0 +1,167 @@
+import { format as formatValue } from '@layerstack/utils';
+import { accessor } from '../../utils/common.js';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { createDimensionGetter } from '../../utils/rect.svelte.js';
+/**
+ * Reactive state shared by every per-layer Labels variant. Holds the
+ * `getTextProps(point, points, i)` helper that computes per-point label
+ * positioning + opacity, plus the resolved opacity.
+ */
+export class LabelsState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        this.ctx.registerComponent({ name: 'Labels', kind: 'composite-mark' });
+    }
+    getDimensions = $derived(createDimensionGetter(this.ctx, () => ({
+        x: this.#getProps().x,
+        y: this.#getProps().y,
+    })));
+    series = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey ? this.ctx.series.series.find((s) => s.key === seriesKey) : undefined;
+    });
+    derivedOpacity = $derived.by(() => {
+        const opacity = this.#getProps().opacity;
+        return (opacity ??
+            (this.series?.key == null ||
+                this.ctx.series.visibleSeries.length <= 1 ||
+                this.ctx.series.isHighlighted(this.series.key, true)
+                ? 1
+                : 0.1));
+    });
+    getTextProps(point, points, i) {
+        const props = this.#getProps();
+        const placement = props.placement ?? 'outside';
+        const offset = props.offset ?? (placement === 'center' || placement === 'middle' ? 0 : 4);
+        const pointValue = isScaleBand(this.ctx.yScale) ? point.xValue : point.yValue;
+        const isLowEdge = point.edgeIndex != null ? point.edgeIndex === 0 : pointValue < 0;
+        const fillValue = typeof props.fill === 'function' ? accessor(props.fill)(point.data) : props.fill;
+        const displayValue = props.value
+            ? accessor(props.value)(point.data)
+            : isScaleBand(this.ctx.yScale)
+                ? point.xValue
+                : point.yValue;
+        const formattedValue = formatValue(displayValue, 
+        // @ts-expect-error - improve types
+        props.format ??
+            (props.value
+                ? undefined
+                : isScaleBand(this.ctx.yScale)
+                    ? this.ctx.xScale.tickFormat?.()
+                    : this.ctx.yScale.tickFormat?.()));
+        let result;
+        if (isScaleBand(this.ctx.yScale)) {
+            if (placement === 'center') {
+                const dims = this.getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: dims.x + dims.width / 2,
+                    y: dims.y + dims.height / 2,
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                    capHeight: '.6rem',
+                };
+            }
+            else if (isLowEdge) {
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: point.x + (placement === 'outside' ? -offset : offset),
+                    y: point.y,
+                    textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+                    verticalAnchor: 'middle',
+                    capHeight: '.6rem',
+                };
+            }
+            else {
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: point.x + (placement === 'outside' ? offset : -offset),
+                    y: point.y,
+                    textAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+                    verticalAnchor: 'middle',
+                    capHeight: '.6rem',
+                };
+            }
+        }
+        else {
+            if (placement === 'center') {
+                const dims = this.getDimensions(point.data) ?? { x: point.x, y: point.y, width: 0, height: 0 };
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: dims.x + dims.width / 2,
+                    y: dims.y + dims.height / 2,
+                    capHeight: '.6rem',
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                };
+            }
+            else if (isLowEdge) {
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: point.x,
+                    y: point.y + (placement === 'outside' ? offset : -offset),
+                    capHeight: '.6rem',
+                    textAnchor: 'middle',
+                    verticalAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'start' : 'end',
+                };
+            }
+            else {
+                result = {
+                    value: formattedValue,
+                    fill: fillValue,
+                    x: point.x,
+                    y: point.y + (placement === 'outside' ? -offset : offset),
+                    capHeight: '.6rem',
+                    textAnchor: 'middle',
+                    verticalAnchor: placement === 'middle' ? 'middle' : placement === 'outside' ? 'end' : 'start',
+                };
+            }
+        }
+        if (placement === 'smart' && points != null && i != null) {
+            const getValue = (p) => isScaleBand(this.ctx.yScale) ? p.xValue : p.yValue;
+            const curr = getValue(point);
+            const prev = i > 0 ? getValue(points[i - 1]) : curr;
+            const next = i < points.length - 1 ? getValue(points[i + 1]) : curr;
+            const xPrevTight = Math.abs(prev - curr) < offset;
+            const xNextTight = Math.abs(curr - next) < offset;
+            const isPeak = (prev <= curr && curr >= next) || (xPrevTight && xNextTight);
+            const isTrough = (prev >= curr && curr <= next) || (xPrevTight && xNextTight);
+            const isRising = !isPeak && !isTrough && prev < curr;
+            const isFalling = !isPeak && !isTrough && prev >= curr;
+            return {
+                ...result,
+                x: point.x,
+                y: point.y,
+                dx: isRising
+                    ? xPrevTight
+                        ? offset
+                        : -offset
+                    : isFalling
+                        ? xNextTight
+                            ? -offset
+                            : offset
+                        : 0,
+                dy: isPeak ? -offset : isTrough ? offset : 0,
+                textAnchor: isRising
+                    ? xPrevTight
+                        ? 'start'
+                        : 'end'
+                    : isFalling
+                        ? xNextTight
+                            ? 'end'
+                            : 'start'
+                        : 'middle',
+                verticalAnchor: isPeak ? 'end' : isTrough ? 'start' : 'middle',
+            };
+        }
+        return result;
+    }
+}

package/dist/components/Labels/Labels.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData = any">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import LabelsSvg from './Labels.svg.svelte';
+  import LabelsCanvas from './Labels.canvas.svelte';
+  import LabelsHtml from './Labels.html.svelte';
+  import type { LabelsProps } from './Labels.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: LabelsProps<TData> = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <LabelsSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <LabelsCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <LabelsHtml {...props} />
+{/if}

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

@@ -0,0 +1,26 @@
+export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+import type { LabelsProps } from './Labels.shared.svelte.js';
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<TData = any> = InstanceType<typeof Labels<TData>>;
+export default Labels;

package/dist/components/Labels/Labels.svg.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData = any">
+  import LabelsBase from './Labels.base.svelte';
+  import Text from '../Text/Text.svg.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Points from '../Points/Points.svg.svelte';
+
+  import type { LabelsProps } from './Labels.shared.svelte.js';
+
+  let props: LabelsProps<TData> = $props();
+</script>
+
+<LabelsBase {Text} {Group} {Points} {...props} />

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

@@ -0,0 +1,26 @@
+export type { LabelsProps, LabelsPropsWithoutHTML } from './Labels.shared.svelte.js';
+import type { LabelsProps } from './Labels.shared.svelte.js';
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Labels: $$IsomorphicComponent;
+type Labels<TData = any> = InstanceType<typeof Labels<TData>>;
+export default Labels;