layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/Text.svelte

@@ -1,19 +1,40 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  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 TextPropsWithoutHTML = {
     /**
-     * text value
+     * 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;
-
-    /**
-     * The fill color of the text
-     */
-    fill?: string;
+    value?: string | number | ((d: any) => string | number);
 
     /**
      * Maximum width to occupy (approximate as words are not split)
@@ -21,28 +42,36 @@
     width?: number;
 
     /**
-     * x position of the text
+     * 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;
+    x?: string | number | ((d: any) => any);
 
     /**
-     * Initial x position of the text
+     * Initial x position of the text (pixel mode only).
      *
      * @default x
      */
     initialX?: string | number;
 
     /**
-     * y position of the text
+     * 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;
+    y?: string | number | ((d: any) => any);
 
     /**
-     * Initial y position of the text
+     * Initial y position of the text (pixel mode only).
      *
      * @default y
      */
@@ -97,6 +126,20 @@
      */
     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
      */
@@ -120,6 +163,14 @@
      * @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;
 
     /**
@@ -146,7 +197,20 @@
      * @default '0%'
      */
     startOffset?: string | number;
-  } & CommonStyleProps;
+
+    /**
+     * 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>;
@@ -165,41 +229,32 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { cls } from '@layerstack/tailwind';
-  import { merge } from 'lodash-es';
+  import { merge, format as formatValue } from '@layerstack/utils';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { registerCanvasComponent } from './layout/Canvas.svelte';
+  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 { layerClass } from '../utils/attributes.js';
   import { degreesToRadians } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
 
-  /*
-    TODO:
-      - [ ] Handle styled text (use <slot /> to measure?)
-			- [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-			  - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-				- https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-    Reference:
-    - https://bl.ocks.org/mbostock/7555321
-    - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-      - https://airbnb.io/visx/text
-      - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-  */
-
   const uid = $props.id();
 
   let {
     value,
     x = 0,
-    initialX = x,
+    initialX,
     y = 0,
-    initialY = y,
+    initialY,
     dx = 0,
     dy = 0,
     lineHeight = '1em',
@@ -208,12 +263,14 @@
     scaleToFit = false,
     textAnchor = 'start',
     verticalAnchor = 'end',
+    dominantBaseline = 'auto',
     rotate,
     opacity = 1,
     strokeWidth = 0,
     stroke,
     fill,
     fillOpacity,
+    format,
     motion,
     svgRef: svgRefProp = $bindable(),
     ref: refProp = $bindable(),
@@ -224,9 +281,85 @@
     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>();
@@ -241,6 +374,10 @@
 
   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({
@@ -260,49 +397,73 @@
     };
   });
 
-  const rawText = $derived(value != null ? value.toString() : '');
+  // 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 renderCtx = getRenderContext();
+  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
 
-  const words = $derived(textValue ? textValue.split(/(?:(?!\u00A0+)\s+)/) : []);
+  const wordsByLines = $derived.by(() => {
+    // Split by newlines to preserve explicit line breaks
+    const lines = textValue.split('\n');
 
-  const wordsWithWidth = $derived(
-    words.map((word) => ({
-      word,
-      width: getStringWidth(word, style) || 0,
-    }))
-  );
+    return lines.flatMap((line) => {
+      // Split each line into words
+      const words = line.split(/(?:(?!\u00A0+)\s+)/);
 
-  const spaceWidth = $derived(getStringWidth('\u00A0', style) || 0);
-
-  const wordsByLines = $derived(
-    wordsWithWidth.reduce((result: { words: string[]; width?: number }[], item) => {
-      const currentLine = result[result.length - 1];
-
-      if (
-        currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)
-      ) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
+      if (width == null) {
+        // No width specified, only use explicit line breaks (if used)
+        return [{ words }];
       } else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
+        // 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;
+        }, []);
       }
+    });
+  });
 
-      return result;
-    }, [])
-  );
-
-  const lines = $derived(wordsByLines.length);
+  const lineCount = $derived(wordsByLines.length);
 
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
@@ -327,28 +488,29 @@
 
   const startDy = $derived.by(() => {
     if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
+      return getPixelValue(lineHeight);
     } else if (verticalAnchor === 'middle') {
-      return ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+      return ((lineCount - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
     } else {
-      return (lines - 1) * -getPixelValue(lineHeight);
+      return (lineCount - 1) * -getPixelValue(lineHeight) - getPixelValue(capHeight) / 2;
     }
   });
 
-  const pathStartDy = $derived.by(() => {
+  // startDy for data mode (single line per item)
+  const dataModeStartDy = $derived.by(() => {
     if (verticalAnchor === 'start') {
-      return getPixelValue(capHeight);
+      return getPixelValue(lineHeight);
     } else if (verticalAnchor === 'middle') {
-      return (0 / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
+      return getPixelValue(capHeight) / 2;
     } else {
-      return 0 * -getPixelValue(lineHeight);
+      return -getPixelValue(capHeight) / 2;
     }
   });
 
   const scaleTransform = $derived.by(() => {
     if (
       scaleToFit &&
-      lines > 0 &&
+      lineCount > 0 &&
       typeof x == 'number' &&
       typeof y == 'number' &&
       typeof width == 'number'
@@ -376,87 +538,146 @@
     );
   }
 
-  const motionX = createMotion(initialX, () => x, motion);
-  const motionY = createMotion(initialY, () => y, motion);
+  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
+  );
 
   function render(
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    const effectiveLineHeight = getPixelValue(lineHeight);
-    const baseY = getPixelValue(motionY.current) + getPixelValue(dy) + getPixelValue(startDy);
-    const baseX = getPixelValue(motionX.current) + getPixelValue(dx);
+    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,
+          };
+    }
 
-    ctx.save();
+    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);
 
-    if (rotate !== undefined) {
-      const centerX = getPixelValue(x);
-      const centerY = getPixelValue(y);
-      const radians = degreesToRadians(rotate);
+      ctx.save();
 
-      ctx.translate(centerX, centerY);
-      ctx.rotate(radians);
-      ctx.translate(-centerX, -centerY);
-    }
+      if (rotate !== undefined) {
+        const centerX = getPixelValue(typeof x === 'function' ? 0 : x);
+        const centerY = getPixelValue(typeof y === 'function' ? 0 : y);
+        const radians = degreesToRadians(rotate);
 
-    const styles = styleOverrides
-      ? merge({ styles: { strokeWidth } }, styleOverrides)
-      : {
-          styles: {
-            fill,
-            fillOpacity,
-            stroke,
-            strokeWidth,
-            opacity,
-            paintOrder: 'stroke',
-            textAnchor,
-          },
-          classes: cls(fill === undefined && 'fill-surface-content', className),
-        };
-
-    const computedStyles = getComputedStyles(ctx.canvas, styles);
-
-    ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`;
-
-    const textAlign = textAnchor === 'middle' ? 'center' : textAnchor === 'end' ? 'end' : 'start';
-    ctx.textAlign = textAlign;
-
-    for (let index = 0; index < wordsByLines.length; index++) {
-      const line = wordsByLines[index];
-      const text = line.words.join(' ');
-
-      // no need to manually adjust x for textAnchor since ctx.textAlign handles it
-      const xPos = baseX;
-      const yPos = baseY + index * effectiveLineHeight;
-
-      renderText(
-        ctx,
-        text,
-        {
-          x: xPos,
-          y: yPos,
-        },
-        styles
-      );
-    }
+        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;
+
+      for (let index = 0; index < wordsByLines.length; index++) {
+        const line = wordsByLines[index];
+        const text = line.words.join(' ');
 
-    ctx.restore();
+        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(() => fill);
-  const strokeKey = createKey(() => stroke);
-
-  if (renderCtx === 'canvas') {
-    registerCanvasComponent({
-      name: 'Text',
+  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,
         motionX.current,
         motionY.current,
-        fillKey.current,
-        strokeKey.current,
+        fillKey!.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,
@@ -466,72 +687,184 @@
         textAnchor,
         verticalAnchor,
       ],
-    });
-  }
+    } : undefined,
+  });
 </script>
 
-{#if renderCtx === 'svg'}
-  <!-- `overflow: visible` allow contents to be shown outside element -->
-  <!-- `paint-order: stroke` supports stroke outlining text  -->
-  <svg
-    x={dx}
-    y={dy}
-    {...svgProps}
-    class={cls(layerClass('text-svg'), 'overflow-visible [paint-order:stroke]', 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}
-        fill-opacity={fillOpacity}
-        {stroke}
-        stroke-width={strokeWidth}
-        {opacity}
-        transform={transformProp}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
-      >
-        <textPath
-          style="text-anchor: {textAnchor};"
-          href="#{pathId}"
-          {startOffset}
-          class={cls(layerClass('text-path'))}
+{#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]}
         >
-          {wordsByLines.map((line) => line.words.join(' ')).join()}
-        </textPath>
-      </text>
-    {:else if isValidXOrY(x) && isValidXOrY(y)}
-      <text
-        bind:this={ref}
-        x={motionX.current}
-        y={motionY.current}
-        {transform}
-        text-anchor={textAnchor}
-        {...restProps}
-        {fill}
-        fill-opacity={fillOpacity}
-        {stroke}
-        stroke-width={strokeWidth}
-        {opacity}
-        class={cls(layerClass('text'), fill === undefined && 'fill-surface-content', className)}
-      >
-        {#each wordsByLines as line, index}
           <tspan
-            x={motionX.current}
-            dy={index === 0 ? startDy : lineHeight}
-            class={layerClass('text-tspan')}
+            x={item.x}
+            dy={dataModeStartDy}
+            class="lc-text-tspan"
           >
-            {line.words.join(' ')}
+            {text}
           </tspan>
-        {/each}
-      </text>
-    {/if}
-  </svg>
+        </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={fill as string}
+          fill-opacity={fillOpacity as number}
+          stroke={stroke as string}
+          stroke-width={strokeWidth as number}
+          opacity={opacity as number}
+          transform={transformProp}
+          class={['lc-text', className as string]}
+        >
+          <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={fill as string}
+          fill-opacity={fillOpacity as number}
+          stroke={stroke as string}
+          stroke-width={strokeWidth as number}
+          opacity={opacity as number}
+          class={['lc-text', className as string]}
+        >
+          {#each wordsByLines as line, index}
+            <tspan
+              x={motionX.current}
+              dy={index === 0 ? startDy : getPixelValue(lineHeight)}
+              class="lc-text-tspan"
+            >
+              {line.words.join(' ')}
+            </tspan>
+          {/each}
+        </text>
+      {/if}
+    </svg>
+  {/if}
+{:else if layerCtx === 'html'}
+  {#if dataMode}
+    {#each resolvedItems as item (item.key)}
+      {@const text = resolveTextValue(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}
+        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}
+      class={['lc-text', className as string]}
+    >
+      {textValue}
+    </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>