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

package/dist/components/Text.svelte

@@ -1,959 +0,0 @@
-<script lang="ts" module>
-  import type { Without } from '../utils/types.js';
-  import type { DataDrivenStyleProps } from '../utils/dataProp.js';
-  import type { SVGAttributes } from 'svelte/elements';
-  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
-  import type { FormatType, FormatConfig } from '@layerstack/utils';
-
-  /**
-   * Check if a string looks like a CSS/SVG value (percentage, em, px, etc.)
-   * rather than a data property accessor.
-   */
-  function isCSSValue(value: string): boolean {
-    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: any): boolean {
-    if (typeof value === 'function') return true;
-    if (typeof value === 'string' && !isCSSValue(value)) return true;
-    return false;
-  }
-
-  export type TextSegment = {
-    value: string | number;
-    class?: string;
-  };
-
-  export type TextPropsWithoutHTML = {
-    /**
-     * Text value to render.
-     * - `number`: direct value
-     * - `string`: in data mode, treated as a data property name (e.g. `"label"` → `d.label`);
-     *   in pixel mode, used as literal text
-     * - `function(d)`: accessor called per data item to get the text value
-     *
-     * @default 0
-     */
-    value?: string | number | ((d: any) => string | number);
-
-    /**
-     * Array of styled text segments for inline mixed styling.
-     * Each segment has its own value and optional class.
-     * Mutually exclusive with `value`.
-     */
-    segments?: TextSegment[];
-
-    /**
-     * Maximum width to occupy (approximate as words are not split)
-     */
-    width?: number;
-
-    /**
-     * x position of the text.
-     * - `number`: pixel value (direct)
-     * - `string` (CSS value like "50%"): SVG position value
-     * - `string` (property name like "date"): data property, resolved via xScale
-     * - `function(d)`: accessor called per data item, result passed through xScale
-     *
-     * @default 0
-     */
-    x?: string | number | ((d: any) => any);
-
-    /**
-     * Initial x position of the text (pixel mode only).
-     *
-     * @default x
-     */
-    initialX?: string | number;
-
-    /**
-     * y position of the text.
-     * - `number`: pixel value (direct)
-     * - `string` (CSS value like "50%"): SVG position value
-     * - `string` (property name like "value"): data property, resolved via yScale
-     * - `function(d)`: accessor called per data item, result passed through yScale
-     *
-     * @default 0
-     */
-    y?: string | number | ((d: any) => any);
-
-    /**
-     * Initial y position of the text (pixel mode only).
-     *
-     * @default y
-     */
-    initialY?: string | number;
-
-    /**
-     * dx offset of the text
-     *
-     * @default 0
-     */
-    dx?: string | number;
-
-    /**
-     * dy offset of the text
-     *
-     * @default 0
-     */
-    dy?: string | number;
-
-    /**
-     * Desired "line height" of the text, implemented as y offsets
-     *
-     * @default "1em"
-     */
-    lineHeight?: string;
-
-    /**
-     * Cap height of the text
-     * @default '0.71em'
-     */
-    capHeight?: string;
-
-    /**
-     * Whether to scale the fontSize to accommodate the specified width
-     *
-     * @default false
-     */
-
-    scaleToFit?: boolean;
-
-    /**
-     * Horizontal text anchor
-     *
-     * @default 'start'
-     */
-    textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-
-    /**
-     * Vertical text anchor
-     *
-     * @default 'end'
-     */
-    verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-
-    /**
-     * The dominant baseline of the text.  Useful for aligning text to the baseline of the axis.
-     *
-     * @default 'auto'
-     */
-    dominantBaseline?:
-      | 'auto'
-      | 'text-before-edge'
-      | 'text-after-edge'
-      | 'middle'
-      | 'hanging'
-      | 'ideographic'
-      | 'mathematical';
-
-    /**
-     * Rotational angle of the text
-     */
-    rotate?: number;
-
-    /**
-     * A bindable reference to the wrapping `<svg>` element.
-     *
-     * @bindable
-     */
-    svgRef?: SVGElement;
-
-    /**
-     * Props to pass to the wrapping `<svg>` element.
-     */
-    svgProps?: Omit<SVGAttributes<SVGElement>, 'children'>;
-
-    /**
-     * A bindable reference to the inner `<text>` element
-     *
-     * @bindable
-     */
-    ref?: SVGTextElement;
-
-    /**
-     * Format the displayed value. When set with `motion` and a numeric `value`,
-     * the number will tween smoothly and be formatted for display.
-     */
-    format?: FormatType | FormatConfig;
-
-    /** Motion configuration (pixel mode only). */
-    motion?: MotionProp;
-
-    /**
-     * Whether to enable text truncation
-     */
-    truncate?: boolean | TruncateTextOptions;
-
-    /**
-     * A unique identifier for the SVG path element.
-     * One is generated by default if not provided.
-     *
-     */
-    pathId?: string;
-
-    /**
-     * The path to render the text along.
-     */
-    path?: string | null;
-
-    /**
-     * Specify the offset for the start of the text along the path.
-     * Can be a percentage ('50%') or a length value.
-     *
-     * @default '0%'
-     */
-    startOffset?: string | 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;
-  } & DataDrivenStyleProps;
-
-  export type TextProps = TextPropsWithoutHTML &
-    Without<SVGAttributes<SVGTextElement>, TextPropsWithoutHTML>;
-
-  function getPathLength(pathRef: SVGPathElement | undefined) {
-    if (pathRef && typeof pathRef.getTotalLength === 'function') {
-      try {
-        return pathRef.getTotalLength();
-      } catch (e) {
-        console.error('Error getting path length:', e);
-        return 0;
-      }
-    }
-    return 0;
-  }
-</script>
-
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
-  import { merge, format as formatValue } from '@layerstack/utils';
-
-  import { getLayerContext } from '../contexts/layer.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import { createDataMotionMap } from '../utils/motion.svelte.js';
-  import { getStringWidth, truncateText, type TruncateTextOptions } from '../utils/string.js';
-  import { getComputedStyles, renderText, type ComputedStylesOptions } from '../utils/canvas.js';
-  import {
-    resolveDataProp,
-    resolveColorProp,
-    resolveGeoDataPair,
-    resolveStyleProp,
-  } from '../utils/dataProp.js';
-  import { getGeoContext } from '../contexts/geo.js';
-  import { get } from '@layerstack/utils';
-  import { chartDataArray } from '../utils/common.js';
-
-  import { createKey } from '../utils/key.svelte.js';
-  import { degreesToRadians } from '../utils/math.js';
-  import { createId } from '../utils/createId.js';
-
-  const uid = $props.id();
-
-  let {
-    value,
-    segments,
-    x = 0,
-    initialX,
-    y = 0,
-    initialY,
-    dx = 0,
-    dy = 0,
-    lineHeight = '1em',
-    capHeight = '0.71em',
-    width,
-    scaleToFit = false,
-    textAnchor = 'start',
-    verticalAnchor = 'end',
-    dominantBaseline = 'auto',
-    rotate,
-    opacity = 1,
-    strokeWidth = 0,
-    stroke,
-    fill,
-    fillOpacity,
-    format,
-    motion,
-    svgRef: svgRefProp = $bindable(),
-    ref: refProp = $bindable(),
-    class: className,
-    svgProps = {},
-    truncate = false,
-    path,
-    pathId = createId('text-path', uid),
-    startOffset = '0%',
-    transform: transformProp,
-    data: dataProp,
-    key: keyFn = (_: any, i: number) => i,
-    ...restProps
-  }: TextProps = $props();
-
-  // Data mode detection
-  const dataMode = $derived(isTextDataProp(x) || isTextDataProp(y));
-
-  // Chart context
-  const chartCtx = getChartContext();
-  const geo = getGeoContext();
-
-  // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
-
-  // Resolve position for a data item
-  function resolveTextPosition(d: any) {
-    if (geo.projection) {
-      const [projX, projY] = resolveGeoDataPair(x as any, y as any, d, geo.projection);
-      return { x: projX, y: projY };
-    }
-    return {
-      x: resolveDataProp(x as any, d, chartCtx.xScale, 0),
-      y: resolveDataProp(y as any, d, chartCtx.yScale, 0),
-    };
-  }
-
-  // Resolve text value for a data item
-  function resolveTextValue(d: any): string {
-    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) : '';
-  }
-
-  // --- Data mode motion ---
-  const dataMotionMap = createDataMotionMap(motion);
-
-  if (dataMotionMap) {
-    $effect(() => {
-      if (!dataMode) return;
-      const activeKeys = new Set<any>();
-      for (let i = 0; i < resolvedData.length; i++) {
-        const d = resolvedData[i];
-        const key = keyFn(d, i);
-        activeKeys.add(key);
-        const resolved = resolveTextPosition(d);
-        untrack(() => dataMotionMap.update(key, resolved));
-      }
-      untrack(() => dataMotionMap.cleanup(activeKeys));
-    });
-  }
-
-  // Single source of truth: resolved values with animated overlay
-  const resolvedItems = $derived.by(() => {
-    if (!dataMode) return [];
-    return resolvedData.map((d, i) => {
-      const key = keyFn(d, i);
-      const resolved = resolveTextPosition(d);
-      const animated = dataMotionMap?.get(key);
-      return {
-        d,
-        key,
-        x: animated?.x ?? resolved.x,
-        y: animated?.y ?? resolved.y,
-      };
-    });
-  });
-
-  const layerCtx = getLayerContext();
-
-  // --- Pixel mode ---
-  let ref = $state<SVGTextElement>();
-  let svgRef = $state<SVGElement>();
-  let pathRef = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    refProp = ref;
-  });
-
-  $effect.pre(() => {
-    svgRefProp = svgRef;
-  });
-
-  let style = $state<CSSStyleDeclaration>(); // TODO: read from DOM?
-
-  // Use defaults that work for both pixel and data modes
-  const _initialX: string | number = initialX ?? (typeof x === 'function' ? 0 : x);
-  const _initialY: string | number = initialY ?? (typeof y === 'function' ? 0 : y);
-
-  const resolvedWidth = $derived(path ? getPathLength(pathRef) : width);
-
-  const defaultTruncateOptions: TruncateTextOptions = $derived({
-    maxChars: undefined,
-    position: 'end',
-    maxWidth: resolvedWidth,
-  });
-
-  const truncateConfig: TruncateTextOptions | boolean = $derived.by(() => {
-    if (typeof truncate === 'boolean') {
-      if (truncate) return defaultTruncateOptions;
-      return false;
-    }
-    return {
-      ...defaultTruncateOptions,
-      ...truncate,
-    };
-  });
-
-  // Tween numeric values when motion is configured
-  const motionValue = createMotion(
-    typeof value === 'number' ? value : 0,
-    () => (typeof value === 'number' ? value : 0),
-    typeof value === 'number' && motion
-      ? typeof motion === 'object' && 'type' in motion
-        ? motion
-        : undefined
-      : undefined
-  );
-
-  // Handle null and convert `\n` strings back to newline characters
-  const rawText = $derived.by(() => {
-    if (typeof value === 'function' || value == null) return '';
-    if (typeof value === 'number' && motion) {
-      const v = 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');
-  });
-
-  const textValue = $derived.by(() => {
-    if (!truncateConfig) return rawText;
-    return truncateText(rawText, truncateConfig);
-  });
-
-  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
-
-  const wordsByLines = $derived.by(() => {
-    // Split by newlines to preserve explicit line breaks
-    const lines = textValue.split('\n');
-
-    return lines.flatMap((line) => {
-      // Split each line into words
-      const words = line.split(/(?:(?!\u00A0+)\s+)/);
-
-      if (width == null) {
-        // No width specified, only use explicit line breaks (if used)
-        return [{ words }];
-      } else {
-        // Handle word wrapping within each line
-        return words.reduce((result: { words: string[]; width?: number }[], item) => {
-          const currentLine = result[result.length - 1];
-          const itemWidth = getStringWidth(item, style) || 0;
-
-          if (
-            currentLine &&
-            (width == null ||
-              scaleToFit ||
-              (currentLine.width || 0) + itemWidth + spaceWidth < width)
-          ) {
-            // Word can be added to an existing line
-            currentLine.words.push(item);
-            currentLine.width = currentLine.width || 0;
-            currentLine.width += itemWidth + spaceWidth;
-          } else {
-            // Add first word to line or word is too long to scaleToFit on existing line
-            const newLine = { words: [item], width: itemWidth };
-            result.push(newLine);
-          }
-
-          return result;
-        }, []);
-      }
-    });
-  });
-
-  const lineCount = $derived(wordsByLines.length);
-
-  /**
-   * Convert css value to pixel value (ex. 0.71em => 11.36)
-   */
-  function getPixelValue(cssValue: number | string) {
-    // 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;
-    }
-  }
-
-  const startDy = $derived.by(() => {
-    if (verticalAnchor === 'start') {
-      return getPixelValue(lineHeight);
-    } else if (verticalAnchor === 'middle') {
-      return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-    } else {
-      return (lineCount - 1) * -getPixelValue(lineHeight) - getPixelValue(capHeight) / 2;
-    }
-  });
-
-  // startDy for data mode (single line per item)
-  const dataModeStartDy = $derived.by(() => {
-    if (verticalAnchor === 'start') {
-      return getPixelValue(lineHeight);
-    } else if (verticalAnchor === 'middle') {
-      return getPixelValue(capHeight) / 2;
-    } else {
-      return -getPixelValue(capHeight) / 2;
-    }
-  });
-
-  const scaleTransform = $derived.by(() => {
-    if (
-      scaleToFit &&
-      lineCount > 0 &&
-      typeof x == 'number' &&
-      typeof y == 'number' &&
-      typeof width == 'number'
-    ) {
-      const lineWidth = 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})`;
-    } else {
-      return '';
-    }
-  });
-
-  const rotateTransform = $derived(rotate ? `rotate(${rotate}, ${x}, ${y})` : '');
-  const transform = $derived(transformProp ?? `${scaleTransform} ${rotateTransform}`);
-
-  function isValidXOrY(xOrY: string | number | undefined) {
-    return (
-      // number that is not NaN or Infinity
-      (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
-      // for percentage
-      typeof xOrY === 'string'
-    );
-  }
-
-  const motionX = createMotion(
-    _initialX,
-    () => (typeof x === 'number' || typeof x === 'string' ? x : 0),
-    motion
-  );
-  const motionY = createMotion(
-    _initialY,
-    () => (typeof y === 'number' || typeof y === 'string' ? y : 0),
-    motion
-  );
-
-  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
-  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
-  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
-  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
-  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
-  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
-
-  function render(
-    ctx: CanvasRenderingContext2D,
-    styleOverrides: ComputedStylesOptions | undefined
-  ) {
-    function getTextStyles(
-      itemFill?: string | undefined,
-      itemStroke?: string | undefined,
-      itemFillOpacity?: number | undefined,
-      itemStrokeWidth?: number | undefined,
-      itemOpacity?: number | undefined,
-      itemClass?: string | undefined
-    ) {
-      return styleOverrides
-        ? merge(
-            {
-              styles: {
-                strokeWidth:
-                  itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
-              },
-            },
-            styleOverrides
-          )
-        : {
-            styles: {
-              fill: itemFill ?? fill,
-              fillOpacity:
-                itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
-              stroke: itemStroke ?? stroke,
-              strokeWidth:
-                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
-              opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
-              paintOrder: 'stroke',
-              // Only include textAnchor in constantStyles when explicitly non-default,
-              // so that CSS class-based text-anchor (e.g. [text-anchor:middle]) can take effect
-              ...(textAnchor !== 'start' ? { textAnchor } : {}),
-            },
-            classes: cls(
-              'lc-text',
-              itemClass ?? (typeof className === 'string' ? className : undefined)
-            ),
-            style: restProps.style as string | undefined,
-          };
-    }
-
-    if (dataMode) {
-      const baseStyles = getTextStyles();
-      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 resolvedItems) {
-        const text = resolveTextValue(item.d);
-        const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale);
-        const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale);
-        const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d);
-        const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
-        const resolvedOpacity = resolveStyleProp(opacity, item.d);
-        const resolvedClass = resolveStyleProp(className, item.d);
-        const itemStyles = getTextStyles(
-          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) + dataModeStartDy },
-          itemStyles
-        );
-        ctx.restore();
-      }
-    } else {
-      const styles = getTextStyles();
-      const effectiveLineHeight = getPixelValue(lineHeight);
-      const baseY = getPixelValue(motionY.current) + getPixelValue(dy) + getPixelValue(startDy);
-      const baseX = getPixelValue(motionX.current) + getPixelValue(dx);
-
-      ctx.save();
-
-      if (rotate !== undefined) {
-        const centerX = getPixelValue(typeof x === 'function' ? 0 : x);
-        const centerY = getPixelValue(typeof y === 'function' ? 0 : y);
-        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 (segments) {
-        let xOffset = baseX;
-        for (const segment of segments) {
-          const segStyles = getTextStyles(
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            segment.class
-          );
-          const text = String(segment.value);
-          // Set font before rendering and measuring so width is accurate
-          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 < wordsByLines.length; index++) {
-          const line = 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 = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
-  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
-
-  chartCtx.registerComponent({
-    name: 'Text',
-    kind: 'mark',
-    markInfo: () => {
-      if (!dataMode) return {};
-      return {
-        data: dataProp,
-        x: typeof x === 'string' ? x : undefined,
-        y: typeof y === 'string' ? y : undefined,
-        color: typeof fill === 'string' ? fill : undefined,
-      };
-    },
-    canvasRender:
-      layerCtx === 'canvas'
-        ? {
-            render,
-            deps: () => [
-              dataMode,
-              dataMode ? resolvedItems : null,
-              value,
-              segments,
-              motionX.current,
-              motionY.current,
-              fillKey!.current,
-              strokeKey!.current,
-              strokeWidth,
-              opacity,
-              className,
-              truncateConfig,
-              rotate,
-              lineHeight,
-              textAnchor,
-              verticalAnchor,
-            ],
-          }
-        : undefined,
-  });
-</script>
-
-{#if layerCtx === 'svg'}
-  {#if dataMode}
-    {#each resolvedItems as item (item.key)}
-      {@const text = resolveTextValue(item.d)}
-      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
-      {@const resolvedStroke = resolveColorProp(stroke, item.d, chartCtx.cScale)}
-      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
-      {@const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d)}
-      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
-      {@const resolvedClass = resolveStyleProp(className, item.d)}
-      {@const dataRotateTransform = rotate ? `rotate(${rotate}, ${item.x}, ${item.y})` : ''}
-      <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]}>
-        <text
-          x={item.x}
-          y={item.y}
-          transform={transformProp ?? dataRotateTransform}
-          text-anchor={textAnchor}
-          dominant-baseline={dominantBaseline}
-          {...restProps}
-          fill={resolvedFill}
-          fill-opacity={resolvedFillOpacity}
-          stroke={resolvedStroke}
-          stroke-width={resolvedStrokeWidth}
-          opacity={resolvedOpacity}
-          class={['lc-text', resolvedClass]}
-        >
-          <tspan x={item.x} dy={dataModeStartDy} class="lc-text-tspan">
-            {text}
-          </tspan>
-        </text>
-      </svg>
-    {/each}
-  {:else}
-    <!-- `overflow: visible` allow contents to be shown outside element -->
-    <!-- `paint-order: stroke` supports stroke outlining text  -->
-    <svg x={dx} y={dy} {...svgProps} class={['lc-text-svg', svgProps?.class]} bind:this={svgRef}>
-      {#if path}
-        <defs>
-          {#key path}
-            <path bind:this={pathRef} id={pathId} d={path} />
-          {/key}
-        </defs>
-        <text
-          bind:this={ref}
-          {dy}
-          {...restProps}
-          fill={staticFill}
-          fill-opacity={staticFillOpacity}
-          stroke={staticStroke}
-          stroke-width={staticStrokeWidth}
-          opacity={staticOpacity}
-          transform={transformProp}
-          class={['lc-text', staticClassName]}
-        >
-          <textPath
-            style="text-anchor: {textAnchor};"
-            dominant-baseline={dominantBaseline}
-            href="#{pathId}"
-            {startOffset}
-            class="lc-text-path"
-          >
-            {wordsByLines.map((line) => line.words.join(' ')).join()}
-          </textPath>
-        </text>
-      {:else if isValidXOrY(typeof x === 'function' ? undefined : x) && isValidXOrY(typeof y === 'function' ? undefined : y)}
-        <text
-          bind:this={ref}
-          x={motionX.current}
-          y={motionY.current}
-          {transform}
-          text-anchor={textAnchor}
-          dominant-baseline={dominantBaseline}
-          {...restProps}
-          fill={staticFill}
-          fill-opacity={staticFillOpacity}
-          stroke={staticStroke}
-          stroke-width={staticStrokeWidth}
-          opacity={staticOpacity}
-          class={['lc-text', staticClassName]}
-        >
-          {#if segments}
-            {#each segments as segment, index (index)}
-              <tspan dy={index === 0 ? startDy : 0} class={['lc-text-tspan', segment.class]}>
-                {segment.value}
-              </tspan>
-            {/each}
-          {:else}
-            {#each wordsByLines as line, index (index)}
-              <tspan
-                x={motionX.current}
-                dy={index === 0 ? startDy : getPixelValue(lineHeight)}
-                class="lc-text-tspan"
-              >
-                {line.words.join(' ')}
-              </tspan>
-            {/each}
-          {/if}
-        </text>
-      {/if}
-    </svg>
-  {/if}
-{:else if layerCtx === 'html'}
-  {#if dataMode}
-    {#each resolvedItems as item (item.key)}
-      {@const text = resolveTextValue(item.d)}
-      {@const resolvedFill = resolveColorProp(fill, item.d, chartCtx.cScale)}
-      {@const resolvedFillOpacity = resolveStyleProp(fillOpacity, item.d)}
-      {@const resolvedOpacity = resolveStyleProp(opacity, item.d)}
-      {@const resolvedClass = resolveStyleProp(className, item.d)}
-      {@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(dx) + item.x}px"
-        style:top="{getPixelValue(dy) + item.y}px"
-        style:transform="translate({translateX}, {translateY}) rotate({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={lineHeight}
-        style:color={resolvedFill}
-        style:opacity={resolvedOpacity ?? resolvedFillOpacity}
-        class={['lc-text', resolvedClass]}
-      >
-        {text}
-      </div>
-    {/each}
-  {:else}
-    {@const translateX = textAnchor === 'middle' ? '-50%' : textAnchor === 'end' ? '-100%' : '0%'}
-    {@const translateY =
-      verticalAnchor === 'middle' ? '-50%' : verticalAnchor === 'end' ? '-100%' : '0%'}
-    <div
-      style:position="absolute"
-      style:left="{dx + motionX.current}px"
-      style:top="{dy + motionY.current}px"
-      style:transform="translate({translateX}, {translateY}) rotate({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={lineHeight}
-      style:color={staticFill}
-      style:opacity={staticOpacity ?? staticFillOpacity}
-      class={['lc-text', staticClassName]}
-    >
-      {#if segments}
-        {#each segments as segment}
-          <span class={segment.class}>{segment.value}</span>
-        {/each}
-      {:else}
-        {textValue}
-      {/if}
-    </div>
-  {/if}
-{/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);
-    }
-
-    /* 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>