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

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

@@ -0,0 +1,174 @@
+import { line as d3Line, lineRadial } from 'd3-shape';
+import { geoPath as d3GeoPath } from 'd3-geo';
+import { max } from 'd3-array';
+import { interpolatePath } from 'd3-interpolate-path';
+import { accessor } from '../../utils/common.js';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+/**
+ * Reactive state shared by every per-layer Spline variant. Holds the
+ * computed `d` (path data), `segments` (per-style-grouped paths when
+ * stroke/fill/opacity are functions), and tween state.
+ */
+export class SplineState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    geo = getGeoContext();
+    #tweenState;
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        this.ctx.registerComponent({
+            name: 'Spline',
+            kind: 'mark',
+            markInfo: () => {
+                const p = getProps();
+                return {
+                    data: p.data,
+                    x: p.x,
+                    y: p.y,
+                    seriesKey: p.seriesKey,
+                    color: typeof p.stroke === 'string' ? p.stroke : undefined,
+                };
+            },
+        });
+        this.#tweenState = createMotion(this.#defaultPathData(), () => this.d, {
+            type: 'tween',
+            interpolate: interpolatePath,
+        });
+    }
+    #getScaleValue(data, scale, accessorFn) {
+        let value = accessorFn(data);
+        if (Array.isArray(value))
+            value = max(value);
+        if (scale.domain().length)
+            return scale(value);
+        return value;
+    }
+    series = $derived(this.ctx.series.series.find((s) => s.key === this.#getProps().seriesKey));
+    seriesAccessor = $derived(this.series?.value ?? (this.series?.data ? undefined : this.series?.key));
+    xAccessor = $derived(accessor(this.#getProps().x ??
+        (this.ctx.valueAxis === 'x' ? this.seriesAccessor : undefined) ??
+        this.ctx.x));
+    yAccessor = $derived(accessor(this.#getProps().y ??
+        (this.ctx.valueAxis === 'y' ? this.seriesAccessor : undefined) ??
+        this.ctx.y));
+    xOffset = $derived(isScaleBand(this.ctx.xScale) ? this.ctx.xScale.bandwidth() / 2 : 0);
+    yOffset = $derived(isScaleBand(this.ctx.yScale) ? this.ctx.yScale.bandwidth() / 2 : 0);
+    #buildPath(resolvedData) {
+        const props = this.#getProps();
+        const path = this.ctx.radial
+            ? lineRadial()
+                .angle((d) => this.#getScaleValue(d, this.ctx.xScale, this.xAccessor) + 0)
+                .radius((d) => this.#getScaleValue(d, this.ctx.yScale, this.yAccessor) + this.yOffset)
+            : d3Line()
+                .x((d) => this.#getScaleValue(d, this.ctx.xScale, this.xAccessor) + this.xOffset)
+                .y((d) => this.#getScaleValue(d, this.ctx.yScale, this.yAccessor) + this.yOffset);
+        path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.yAccessor(d) != null));
+        if (props.curve)
+            path.curve(props.curve);
+        return path(resolvedData) ?? '';
+    }
+    hasAnyStyleFn = $derived.by(() => {
+        const p = this.#getProps();
+        return (typeof p.stroke === 'function' ||
+            typeof p.fill === 'function' ||
+            typeof p.opacity === 'function');
+    });
+    d = $derived.by(() => {
+        const props = this.#getProps();
+        if (this.hasAnyStyleFn && !this.geo.projection)
+            return '';
+        const resolvedData = props.data ?? this.series?.data ?? this.ctx.data;
+        if (this.geo.projection) {
+            const coordinates = resolvedData
+                .filter((d) => {
+                if (props.defined)
+                    return props.defined(d, 0, resolvedData);
+                return this.xAccessor(d) != null && this.yAccessor(d) != null;
+            })
+                .map((d) => [this.xAccessor(d), this.yAccessor(d)]);
+            const lineString = { type: 'LineString', coordinates };
+            return d3GeoPath(this.geo.projection)(lineString) ?? '';
+        }
+        return this.#buildPath(resolvedData);
+    });
+    segments = $derived.by(() => {
+        if (!this.hasAnyStyleFn)
+            return null;
+        const props = this.#getProps();
+        const resolvedData = props.data ?? this.series?.data ?? this.ctx.data;
+        if (this.geo.projection)
+            return null;
+        const groups = groupConsecutive(resolvedData, (d, i, arr) => {
+            const s = resolveColorProp(props.stroke, d, this.ctx.cScale, i, arr);
+            const f = resolveColorProp(props.fill, d, this.ctx.cScale, i, arr);
+            const o = resolveStyleProp(props.opacity, d, i, arr);
+            return { key: `${s}\0${f}\0${o}`, style: { stroke: s, fill: f, opacity: o } };
+        });
+        return groups.map((group) => ({
+            ...group.style,
+            d: this.#buildPath(group.data),
+        }));
+    });
+    #defaultPathData() {
+        const props = this.#getProps();
+        if (!extractTweenConfig(props.motion))
+            return '';
+        if (this.ctx.config.x) {
+            const resolvedData = props.data ?? this.series?.data ?? this.ctx.data;
+            const baseline = Math.min(this.ctx.yScale(0) ?? this.ctx.yRange[0], this.ctx.yRange[0]);
+            const path = this.ctx.radial
+                ? lineRadial()
+                    .angle((d) => this.#getScaleValue(d, this.ctx.xScale, this.xAccessor) + 0)
+                    .radius(() => baseline)
+                : d3Line()
+                    .x((d) => this.#getScaleValue(d, this.ctx.xScale, this.xAccessor) + this.xOffset)
+                    .y(() => baseline);
+            path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.yAccessor(d) != null));
+            if (props.curve)
+                path.curve(props.curve);
+            return path(resolvedData) ?? '';
+        }
+        return '';
+    }
+    isTweened = $derived(extractTweenConfig(this.#getProps().motion) != null);
+    get tweenedPath() {
+        return this.#tweenState.current;
+    }
+    seriesOpacity = $derived.by(() => {
+        if (this.series?.key == null ||
+            this.ctx.series.visibleSeries.length <= 1 ||
+            this.ctx.series.isHighlighted(this.series.key, true)) {
+            return 1;
+        }
+        return 0.1;
+    });
+}
+/**
+ * Groups consecutive data points by a composite key derived from function-valued style props.
+ * The key at index `i` determines the style for the segment from point `i` to point `i+1`.
+ * Each group includes an overlap of 1 point at boundaries for curve continuity.
+ */
+function groupConsecutive(data, keyFn) {
+    if (data.length < 2)
+        return [];
+    const groups = [];
+    let current = keyFn(data[0], 0, data);
+    let startIdx = 0;
+    for (let i = 1; i < data.length; i++) {
+        const next = keyFn(data[i], i, data);
+        if (next.key !== current.key) {
+            groups.push({ style: current.style, data: data.slice(startIdx, i + 1) });
+            startIdx = i;
+            current = next;
+        }
+    }
+    if (data.length - startIdx >= 2) {
+        groups.push({ style: current.style, data: data.slice(startIdx) });
+    }
+    return groups;
+}

package/dist/components/Spline/Spline.svelte

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

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

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

package/dist/components/Spline/Spline.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { SplineProps, SplinePropsWithoutHTML } from './Spline.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import SplineBase from './Spline.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+
+  import type { SplineProps } from './Spline.shared.svelte.js';
+
+  let props: SplineProps = $props();
+</script>
+
+<SplineBase {Path} {...props} />

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

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

package/dist/components/Text/Text.canvas.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" module>
+  export type {
+    TextProps,
+    TextPropsWithoutHTML,
+    TextSegment,
+  } from './Text.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { getComputedStyles, renderText, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import { degreesToRadians } from '../../utils/math.js';
+  import {
+    TextState,
+    textMarkInfo,
+    getPixelValue,
+    type TextProps,
+  } from './Text.shared.svelte.js';
+
+  let { ...rest }: TextProps = $props();
+
+  const c = new TextState(() => rest as TextProps);
+
+  function getTextStyles(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge(
+          {
+            styles: { strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth },
+          },
+          styleOverrides
+        )
+      : {
+          // Use raw `rest.fill` / `rest.stroke` (not `staticFill`) so canvas
+          // accepts non-string values like `CanvasPattern` / `CanvasGradient`.
+          styles: {
+            fill: itemFill ?? (rest.fill as any),
+            fillOpacity: itemFillOpacity ?? c.staticFillOpacity,
+            stroke: itemStroke ?? (rest.stroke as any),
+            strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
+            opacity: itemOpacity ?? c.staticOpacity,
+            paintOrder: 'stroke',
+            ...((rest.textAnchor ?? 'start') !== 'start'
+              ? { textAnchor: rest.textAnchor }
+              : {}),
+          },
+          classes: cls('lc-text', itemClass ?? c.staticClassName),
+          style: (rest as any).style as string | undefined,
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    const textAnchor = rest.textAnchor ?? 'start';
+    const verticalAnchor = rest.verticalAnchor ?? 'end';
+    const lineHeight = rest.lineHeight ?? '1em';
+    const dx = rest.dx ?? 0;
+    const dy = rest.dy ?? 0;
+    const rotate = rest.rotate;
+    const x = rest.x;
+    const y = rest.y;
+
+    if (c.dataMode) {
+      const baseStyles = getTextStyles(styleOverrides);
+      const computedStyles = getComputedStyles(ctx.canvas, baseStyles);
+      ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
+      const textAlign =
+        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      ctx.textAlign = textAlign;
+
+      for (const item of c.resolvedItems) {
+        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 itemStyles = getTextStyles(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        ctx.save();
+        if (rotate !== undefined) {
+          const radians = degreesToRadians(rotate);
+          ctx.translate(item.x, item.y);
+          ctx.rotate(radians);
+          ctx.translate(-item.x, -item.y);
+        }
+        renderText(
+          ctx,
+          text,
+          { x: item.x + getPixelValue(dx), y: item.y + getPixelValue(dy) + c.dataModeStartDy },
+          itemStyles
+        );
+        ctx.restore();
+      }
+    } else {
+      const styles = getTextStyles(styleOverrides);
+      const effectiveLineHeight = getPixelValue(lineHeight);
+      const baseY = getPixelValue(c.motionY) + getPixelValue(dy) + getPixelValue(c.startDy);
+      const baseX = getPixelValue(c.motionX) + getPixelValue(dx);
+
+      ctx.save();
+
+      if (rotate !== undefined) {
+        const centerX = getPixelValue(typeof x === 'function' ? 0 : (x ?? 0));
+        const centerY = getPixelValue(typeof y === 'function' ? 0 : (y ?? 0));
+        const radians = degreesToRadians(rotate);
+        ctx.translate(centerX, centerY);
+        ctx.rotate(radians);
+        ctx.translate(-centerX, -centerY);
+      }
+
+      const computedStyles = getComputedStyles(ctx.canvas, styles);
+      ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
+
+      const textAlign =
+        textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
+      ctx.textAlign = textAlign;
+
+      if (rest.segments) {
+        let xOffset = baseX;
+        for (const segment of rest.segments) {
+          const segStyles = getTextStyles(
+            styleOverrides,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            segment.class
+          );
+          const text = String(segment.value);
+          const segComputedStyles = getComputedStyles(ctx.canvas, segStyles);
+          const fontWeight = segComputedStyles.fontWeight || '';
+          const fontSize = segComputedStyles.fontSize || '10px';
+          const fontFamily = segComputedStyles.fontFamily || 'sans-serif';
+          ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`.trim();
+          renderText(ctx, text, { x: xOffset, y: baseY }, segStyles);
+          xOffset += ctx.measureText(text).width;
+        }
+      } else {
+        for (let index = 0; index < c.wordsByLines.length; index++) {
+          const line = c.wordsByLines[index];
+          const text = line.words.join(' ');
+          const xPos = baseX;
+          const yPos = baseY + index * effectiveLineHeight;
+          renderText(ctx, text, { x: xPos, y: yPos }, styles);
+        }
+      }
+
+      ctx.restore();
+    }
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Text',
+    kind: 'mark',
+    markInfo: () => textMarkInfo(rest as TextProps, c.dataMode),
+    canvasRender: {
+      render,
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        rest.value,
+        rest.segments,
+        c.motionX,
+        c.motionY,
+        fillKey.current,
+        strokeKey.current,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+        c.truncateConfig,
+        rest.rotate,
+        rest.lineHeight,
+        rest.textAnchor,
+        rest.verticalAnchor,
+      ],
+    },
+  });
+</script>

package/dist/components/Text/Text.canvas.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, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/Text/Text.html.svelte

@@ -0,0 +1,106 @@
+<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 { getPixelValue, TextState, textMarkInfo, type TextProps } from './Text.shared.svelte.js';
+
+  let { ...rest }: TextProps = $props();
+
+  const c = new TextState(() => rest as TextProps);
+
+  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 resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    {@const textAnchor = rest.textAnchor ?? 'start'}
+    {@const verticalAnchor = rest.verticalAnchor ?? 'end'}
+    {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+    {@const translateY =
+      verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+    <div
+      style:position="absolute"
+      style:left="{getPixelValue(rest.dx ?? 0) + item.x}px"
+      style:top="{getPixelValue(rest.dy ?? 0) + item.y}px"
+      style:transform="translate({translateX}, {translateY}) rotate({rest.rotate ?? 0}deg)"
+      style:transform-origin="{verticalAnchor === 'middle'
+        ? 'center'
+        : verticalAnchor === 'end'
+          ? 'bottom'
+          : 'top'}
+      {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+      style:white-space="pre-wrap"
+      style:line-height={rest.lineHeight ?? '1em'}
+      style:color={resolvedFill}
+      style:opacity={resolvedOpacity ?? resolvedFillOpacity}
+      class={['lc-text', resolvedClass]}
+    >
+      {text}
+    </div>
+  {/each}
+{:else}
+  {@const textAnchor = rest.textAnchor ?? 'start'}
+  {@const verticalAnchor = rest.verticalAnchor ?? 'end'}
+  {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
+  {@const translateY =
+    verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
+  <div
+    style:position="absolute"
+    style:left="{(typeof rest.dx === 'number' ? rest.dx : 0) +
+      (typeof c.motionX === 'number' ? c.motionX : 0)}px"
+    style:top="{(typeof rest.dy === 'number' ? rest.dy : 0) +
+      (typeof c.motionY === 'number' ? c.motionY : 0)}px"
+    style:transform="translate({translateX}, {translateY}) rotate({rest.rotate ?? 0}deg)"
+    style:transform-origin="{verticalAnchor === 'middle'
+      ? 'center'
+      : verticalAnchor === 'end'
+        ? 'bottom'
+        : 'top'}
+    {textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'right' : 'left'}"
+    style:white-space="pre-wrap"
+    style:line-height={rest.lineHeight ?? '1em'}
+    style:color={c.staticFill}
+    style:opacity={c.staticOpacity ?? c.staticFillOpacity}
+    class={['lc-text', c.staticClassName]}
+  >
+    {#if rest.segments}
+      {#each rest.segments as segment}
+        <span class={segment.class}>{segment.value}</span>
+      {/each}
+    {:else}
+      {c.textValue}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-text)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-text):not([background-color])) {
+      color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-text):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Text/Text.html.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, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

@@ -1,8 +1,11 @@
-import type { Without } from '../utils/types.js';
-import type { DataDrivenStyleProps } from '../utils/dataProp.js';
 import type { SVGAttributes } from 'svelte/elements';
-import { type MotionProp } from '../utils/motion.svelte.js';
-import type { FormatType, FormatConfig } from '@layerstack/utils';
+import type { Without } from '../../utils/types.js';
+import type { DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
+import { type TruncateTextOptions } from '../../utils/string.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
 /**
  * Check if a Text prop value is a data-space prop.
  * Functions are always data props.
@@ -174,7 +177,71 @@ export type TextPropsWithoutHTML = {
     key?: (d: any, index: number) => any;
 } & DataDrivenStyleProps;
 export type TextProps = TextPropsWithoutHTML & Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
-import { type TruncateTextOptions } from '../utils/string.js';
-declare const Text: import("svelte").Component<TextProps, {}, "ref" | "svgRef">;
-type Text = ReturnType<typeof Text>;
-export default Text;
+export declare function getPathLength(pathRef: SVGPathElement | undefined): number;
+/**
+ * Convert css value to pixel value (ex. 0.71em => 11.36)
+ */
+export declare function getPixelValue(cssValue: number | string): number;
+export declare function isValidXOrY(xOrY: string | number | undefined): boolean;
+/** Build the standard `markInfo` payload used by every Text variant. */
+export declare function textMarkInfo(props: TextProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | 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 declare class TextState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    pathRef: SVGPathElement | undefined;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        x: number;
+        y: number;
+    }[];
+    resolveTextPosition(d: any): {
+        x: number;
+        y: number;
+    };
+    resolveTextValue(d: any): string;
+    get motionX(): any;
+    get motionY(): any;
+    resolvedWidth: number | undefined;
+    truncateConfig: TruncateTextOptions | boolean;
+    rawText: string;
+    textValue: string;
+    wordsByLines: {
+        words: string[];
+        width?: number;
+    }[];
+    lineCount: number;
+    startDy: number;
+    dataModeStartDy: number;
+    scaleTransform: string;
+    rotateTransform: string;
+    transform: string;
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    constructor(getProps: () => TextProps);
+}
+export type { TruncateTextOptions } from '../../utils/string.js';