text-slicer 1.5.0-dev.5 → 2.0.0

package/README.md

@@ -1,174 +1,133 @@
-<p align="center"><strong>text-slicer</strong></p>
+# text-slicer
 
-<div align="center">
+Split text inside an HTML element into words and/or characters, wrapping each fragment in its own span.
 
 [![npm](https://img.shields.io/npm/v/text-slicer.svg?colorB=brightgreen)](https://www.npmjs.com/package/text-slicer)
-[![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/text-slicer.svg)](https://github.com/ux-ui-pro/text-slicer)
-[![NPM Downloads](https://img.shields.io/npm/dm/text-slicer.svg?style=flat)](https://www.npmjs.org/package/text-slicer)
+[![NPM Downloads](https://img.shields.io/npm/dm/text-slicer.svg?style=flat)](https://www.npmjs.com/package/text-slicer)
 
-</div>
+[Demo](https://codepen.io/ux-ui/full/vYMoGoG)
 
-<p align="center">Split text inside an HTML element into words and/or characters, wrapping each in a dedicated <code>&lt;span&gt;</code>. Built for robust animation pipelines and i18n-safe rendering.</p>
-<p align="center"><a href="https://codepen.io/ux-ui/full/vYMoGoG">Demo</a></p>
-<br>
+---
 
-## Install
+- Split by words, characters, or both (`splitMode`).
+- Optional CSS variables (`--word-index`, `--char-index`, `--word-total`, `--char-total`, `--container-height`).
+- Optional `data-word` / `data-char` attributes for styling or scripting.
+- Lifecycle helpers: `init`, `reinit`, `clear`, `split`, `destroy`, `updateOptions`, `lockHeight`, `unlockHeight`.
+- `onAfterRender` callback with word/char totals and timestamp.
+- ~1.5kB gzipped.
+
+---
+
+## Installation
 
 ```bash
-yarn add text-slicer
-# or
-npm i text-slicer
+npm install text-slicer
+```
+
+## Quick Start
+
+HTML:
+
+```html
+<p class="text-slicer">Hello world</p>
 ```
-<br>
 
-## Quick start
+JavaScript:
 
 ```ts
 import { TextSlicer } from 'text-slicer';
 
-const slicer = new TextSlicer({ container: '.text-slicer' });
+const textSlicer = new TextSlicer({ container: '.text-slicer' });
 
-slicer.init();
+textSlicer.init();
 ```
 
-Initialize per element:
+With options and a callback:
 
 ```ts
-document.querySelectorAll('.text-slicer').forEach((el) => {
-  const slicer = new TextSlicer({ container: el });
+document.addEventListener('DOMContentLoaded', () => {
+  const textSlicer = new TextSlicer(
+    {
+      container: '.text-slicer',
+      splitMode: 'both',
+      cssVariables: true,
+      dataAttributes: true,
+    },
+    {
+      onAfterRender: (metrics) => console.log(metrics),
+    },
+  );
 
-  slicer.init();
+  textSlicer.init();
 });
 ```
-<br>
-
-## API
 
-### Types
+Apply to every matching element on the page:
 
 ```ts
-export type SplitMode = 'words' | 'chars' | 'both';
-
-export interface TextSlicerOptions {
-  container?: HTMLElement | string;
-  splitMode?: SplitMode;
-  cssVariables?: boolean;
-  dataAttributes?: boolean;
-  /** Keep dedicated whitespace nodes between words (for precise animations). Default: true */
-  keepWhitespaceNodes?: boolean;
-  /** Freeze measured word widths to avoid reflow jitter on responsive layouts. Default: false */
-  freezeWordWidths?: boolean;
-}
-
-export interface TextSlicerMetrics {
-  wordTotal: number;
-  charTotal: number;
-  renderedAt: number;
-}
-
-export interface TextSlicerCallbacks {
-  onAfterRender?: (metrics: TextSlicerMetrics) => void;
-}
-```
-
-### Classnames & CSS vars
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.text-slicer').forEach((element) => {
+    const textSlicer = new TextSlicer({ container: element });
 
-```ts
-import { CLASSNAMES } from 'text-slicer';
-
-// Classes applied to generated spans
-CLASSNAMES.word       // 'ts-word'
-CLASSNAMES.char       // 'ts-char'
-CLASSNAMES.whitespace // 'ts-whitespace'
-
-// CSS variables placed on container and items (when cssVariables: true)
---word-total
---char-total
---word-index
---char-index
+    textSlicer.init();
+  });
+});
 ```
 
-### Constructor
+## API
+
+Named exports:
 
 ```ts
-new TextSlicer(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks)
+import { TextSlicer, CLASSNAMES } from 'text-slicer';
 ```
 
-### Methods
+- `TextSlicer` — main class.
+- `CLASSNAMES` — BEM-style class map (`word`, `char`, `whitespace`).
+- Types: `SplitMode`, `TextSlicerOptions`, `TextSlicerMetrics`, `TextSlicerCallbacks`.
 
-- `init(): void` – Perform initial split.
-- `reinit(newText?: string, nextOpts?: Partial<TextSlicerOptions>): void` – Update text and/or options and re-split.
-- `updateOptions(next: Partial<TextSlicerOptions>): void` – Merge options and re-split (if mounted).
-- `clear(): void` – Remove generated nodes and unfreeze widths.
-- `split(): void` – (Re)build DOM (called internally by `init`/`reinit`/`updateOptions`).
-- `destroy(): void` – Detach observers, clear DOM, and mark unmounted.
-- `get metrics(): TextSlicerMetrics` – Read-only metrics collected on the last render.
+Constructor: `new TextSlicer(options?, callbacks?)`.
 
-### Options in detail
+## Options
 
-- `splitMode` – `'words' | 'chars' | 'both'`. When `'both'`, each word is wrapped and further split into graphemes.
-- `cssVariables` – When `true`, indexes and totals are exposed as CSS custom properties for stagger animations.
-- `dataAttributes` – When `true`, adds `data-word` / `data-char` attributes.
-- `keepWhitespaceNodes` – When `true`, explicit whitespace nodes are inserted between words (class `ts-whitespace`).
-- `freezeWordWidths` – When `true`, measured widths of `.ts-word` nodes are frozen (after fonts load + next frame) and
-  kept in sync on container/window resize to prevent layout jitter during animations.
+| Option                | Type                    | Default     | Description                                                                 |
+|:----------------------|:------------------------|:-----------:|:----------------------------------------------------------------------------|
+| `container`           | `HTMLElement \| string` | `undefined` | Target element or selector for text splitting.                              |
+| `splitMode`           | `'words' \| 'chars' \| 'both'` | `both` | Split by words, characters, or both.                                        |
+| `cssVariables`        | `boolean`               | `false`     | Sets `--word-index`, `--char-index`, `--word-total`, `--char-total` on spans. |
+| `dataAttributes`      | `boolean`               | `false`     | Adds `data-word` and `data-char` attributes.                                |
+| `keepWhitespaceNodes` | `boolean`               | `true`      | When `false`, whitespace nodes are ignored in character mode.               |
+| `containerHeightVar`  | `boolean`               | `false`     | Sets dynamic `--container-height` via `ResizeObserver`.                     |
 
-### i18n-friendly grapheme splitting
+## Callbacks
 
-Characters are split using `Intl.Segmenter` (when available) with `{ granularity: 'grapheme' }`, so compound emoji and
-grapheme clusters render as expected. Environments without `Intl.Segmenter` gracefully fall back to `Array.from(text)`.
+| Callback        | Arguments           | Description                                                              |
+|-----------------|---------------------|--------------------------------------------------------------------------|
+| `onAfterRender` | `TextSlicerMetrics` | Called after render; provides `wordTotal`, `charTotal`, `renderedAt`.      |
 
-### Callbacks
+## Methods
 
-```ts
-const slicer = new TextSlicer(
-  { container: '.title', cssVariables: true },
-  {
-    onAfterRender(metrics) {
-      // e.g. attach animation based on metrics.charTotal
-      console.log(metrics);
-    },
-  }
-);
-slicer.init();
-```
+| Method                         | Description                                              |
+|--------------------------------|----------------------------------------------------------|
+| `init()`                       | Initializes and renders text splitting.                  |
+| `reinit(newText?, options?)`   | Re-initializes with optional new text and updated options. |
+| `clear()`                      | Clears all content inside the container.                 |
+| `split()`                      | Manually triggers splitting and rendering.               |
+| `destroy()`                    | Cleans up instance, observers, and styles.               |
+| `updateOptions(options)`       | Updates options at runtime; re-renders if mounted.       |
+| `lockHeight()`                 | Locks container height to its measured value.            |
+| `unlockHeight()`               | Unlocks container height.                                |
+| `metrics` (getter)             | Returns `wordTotal`, `charTotal`, and `renderedAt`.      |
 
-### Responsive width freezing
+## Styling
 
-```ts
-const slicer = new TextSlicer({
-  container: '.headline',
-  splitMode: 'both',
-  freezeWordWidths: true,
-});
-slicer.init();
-```
+Exported `CLASSNAMES`:
 
-When enabled, widths are measured after fonts are ready and then frozen (`flex: 0 0 auto; width: <px>`). A `ResizeObserver`
-watches the container and a `resize` handler remeasures on viewport changes.
-<br>
-
-## CSS usage example
-
-```css
-.ts-char {
-  display: inline-block;
-  transform: translateY(0.75em);
-  opacity: 0;
-  transition: transform 400ms ease, opacity 400ms ease;
-}
-
-.ts-char.appear {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-/* stagger via CSS variables */
-.ts-char {
-  transition-delay: calc(var(--char-index, 0) * 10ms);
-}
-```
-<br>
+- `ts-word` — word wrapper (when splitting includes words).
+- `ts-char` — character span.
+- `ts-whitespace` — whitespace span.
+
+When `cssVariables: true`, spans receive `--word-index`, `--char-index`; the container may receive `--word-total`, `--char-total`, and (with `containerHeightVar`) `--container-height`.
 
 ## License
 

package/dist/index.cjs

@@ -0,0 +1,212 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/index.ts
+const DEFAULT_OPTIONS = {
+	splitMode: "both",
+	cssVariables: false,
+	dataAttributes: false,
+	keepWhitespaceNodes: true,
+	containerHeightVar: false
+};
+const CLASSNAMES = Object.freeze({
+	word: "ts-word",
+	char: "ts-char",
+	whitespace: "ts-whitespace"
+});
+const SPACE = " ";
+const CSS_VAR_WORD_TOTAL = "--word-total";
+const CSS_VAR_CHAR_TOTAL = "--char-total";
+const CSS_VAR_WORD_INDEX = "--word-index";
+const CSS_VAR_CHAR_INDEX = "--char-index";
+const CSS_VAR_CONTAINER_HEIGHT = "--container-height";
+const MEASURING_CLASS = "ts-measuring";
+const canUseDOM = () => typeof window !== "undefined" && typeof document !== "undefined";
+const resolveContainer = (container) => {
+	if (!canUseDOM()) return null;
+	if (!container) return null;
+	return typeof container === "string" ? document.querySelector(container) : container;
+};
+const splitIntoGraphemes = (text) => {
+	const Seg = Intl.Segmenter;
+	if (typeof Seg === "function") {
+		const segmenter = new Seg("en", { granularity: "grapheme" });
+		return Array.from(segmenter.segment(text), (s) => s.segment);
+	}
+	return Array.from(text);
+};
+const splitIntoWords = (text) => text.split(SPACE);
+const emptyElement = (el) => {
+	el.replaceChildren();
+};
+const isHTMLElement = (el) => !!el && typeof HTMLElement !== "undefined" && el instanceof HTMLElement;
+const omitUndefined = (obj) => {
+	const out = {};
+	Object.keys(obj).forEach((key) => {
+		const val = obj[key];
+		if (val !== void 0) out[key] = val;
+	});
+	return out;
+};
+var TextSlicer = class {
+	el;
+	original;
+	opts;
+	callbacks;
+	charIndex;
+	mounted;
+	resizeObserver;
+	constructor(options = {}, callbacks) {
+		const el = resolveContainer(options.container);
+		this.el = el;
+		this.original = isHTMLElement(el) ? el.textContent?.toString() ?? "" : "";
+		this.opts = {
+			...DEFAULT_OPTIONS,
+			...omitUndefined(options)
+		};
+		this.callbacks = callbacks;
+		this.charIndex = 0;
+		this.mounted = false;
+	}
+	get metrics() {
+		const text = this.original;
+		return {
+			wordTotal: text.length ? splitIntoWords(text).length : 0,
+			charTotal: text.length,
+			renderedAt: Date.now()
+		};
+	}
+	init() {
+		if (!this.el) return;
+		this.mounted = true;
+		this.split();
+		if (this.opts.containerHeightVar) this.initHeightObserver();
+	}
+	reinit(newText, next) {
+		if (!this.el) return;
+		if (typeof newText === "string") this.original = newText;
+		if (next) this.opts = {
+			...this.opts,
+			...omitUndefined(next)
+		};
+		this.split();
+	}
+	clear() {
+		if (!this.el) return;
+		emptyElement(this.el);
+	}
+	split() {
+		if (!this.el) return;
+		this.clear();
+		this.charIndex = 0;
+		const text = this.original;
+		const fragment = document.createDocumentFragment();
+		const words = splitIntoWords(text);
+		if (this.opts.splitMode === "chars") this.appendChars(fragment, text);
+		else this.appendWords(fragment, words);
+		this.el.appendChild(fragment);
+		if (this.opts.cssVariables) {
+			this.el.style.setProperty(CSS_VAR_WORD_TOTAL, String(words.length));
+			this.el.style.setProperty(CSS_VAR_CHAR_TOTAL, String(text.length));
+		}
+		this.callbacks?.onAfterRender?.(this.metrics);
+	}
+	destroy() {
+		if (!this.el) return;
+		this.clear();
+		this.unlockHeight();
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+		}
+		if (this.opts.containerHeightVar) this.el.style.removeProperty(CSS_VAR_CONTAINER_HEIGHT);
+		this.mounted = false;
+	}
+	updateOptions(next) {
+		this.opts = {
+			...this.opts,
+			...omitUndefined(next)
+		};
+		if (this.mounted) this.split();
+	}
+	lockHeight() {
+		if (!this.el) return;
+		const h = this.measureHeight();
+		if (h > 0) this.el.style.height = `${h}px`;
+	}
+	unlockHeight() {
+		if (!this.el) return;
+		this.el.style.removeProperty("height");
+	}
+	appendWords(fragment, words) {
+		words.forEach((word, wordIndex) => {
+			if (this.opts.splitMode === "both") {
+				const wordSpan = this.createWordSpan(wordIndex, word);
+				for (const ch of splitIntoGraphemes(word)) {
+					const charSpan = this.createCharSpan(ch);
+					wordSpan.append(charSpan);
+				}
+				fragment.append(wordSpan);
+			} else {
+				const wordSpan = this.createWordSpan(wordIndex);
+				wordSpan.append(document.createTextNode(word));
+				fragment.append(wordSpan);
+			}
+			if (wordIndex < words.length - 1) fragment.append(this.createSpaceSpan());
+		});
+	}
+	appendChars(fragment, text) {
+		for (const ch of splitIntoGraphemes(text)) {
+			const span = this.createCharSpan(ch);
+			fragment.append(span);
+		}
+	}
+	createWordSpan(index, word = "") {
+		const span = document.createElement("span");
+		span.classList.add(CLASSNAMES.word);
+		if (this.opts.dataAttributes && word) span.setAttribute("data-word", word);
+		if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_WORD_INDEX, String(index));
+		return span;
+	}
+	createCharSpan(ch) {
+		const span = document.createElement("span");
+		span.textContent = ch;
+		if (this.opts.dataAttributes) span.setAttribute("data-char", ch);
+		if (ch === SPACE) {
+			span.classList.add(CLASSNAMES.whitespace);
+			if (!this.opts.keepWhitespaceNodes) span.textContent = SPACE;
+		} else {
+			span.classList.add(CLASSNAMES.char);
+			if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));
+			this.charIndex += 1;
+		}
+		return span;
+	}
+	createSpaceSpan() {
+		const span = document.createElement("span");
+		span.classList.add(CLASSNAMES.whitespace);
+		span.textContent = SPACE;
+		return span;
+	}
+	measureHeight() {
+		if (!this.el) return 0;
+		this.el.classList.add(MEASURING_CLASS);
+		this.el.offsetHeight;
+		let h = this.el.offsetHeight || this.el.clientHeight || 0;
+		if (!h) h = Math.round(this.el.getBoundingClientRect().height);
+		this.el.classList.remove(MEASURING_CLASS);
+		return Math.max(0, Math.ceil(h));
+	}
+	initHeightObserver() {
+		if (!this.el) return;
+		this.resizeObserver = new ResizeObserver(() => {
+			const h = this.measureHeight();
+			if (h > 0) this.el?.style.setProperty(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);
+		});
+		this.resizeObserver.observe(this.el);
+	}
+};
+
+//#endregion
+exports.CLASSNAMES = CLASSNAMES;
+exports.TextSlicer = TextSlicer;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["export type SplitMode = 'words' | 'chars' | 'both';\n\nexport interface TextSlicerOptions {\n  container?: HTMLElement | string;\n  splitMode?: SplitMode;\n  cssVariables?: boolean;\n  dataAttributes?: boolean;\n  keepWhitespaceNodes?: boolean;\n  containerHeightVar?: boolean;\n}\n\nexport interface TextSlicerMetrics {\n  wordTotal: number;\n  charTotal: number;\n  renderedAt: number;\n}\n\nexport interface TextSlicerCallbacks {\n  onAfterRender?: (metrics: TextSlicerMetrics) => void;\n}\n\ntype RuntimeOptions = Required<Omit<TextSlicerOptions, 'container'>>;\n\nconst DEFAULT_OPTIONS: RuntimeOptions = {\n  splitMode: 'both',\n  cssVariables: false,\n  dataAttributes: false,\n  keepWhitespaceNodes: true,\n  containerHeightVar: false,\n};\n\nexport const CLASSNAMES = Object.freeze({\n  word: 'ts-word',\n  char: 'ts-char',\n  whitespace: 'ts-whitespace',\n});\n\nconst SPACE = ' ';\nconst CSS_VAR_WORD_TOTAL = '--word-total';\nconst CSS_VAR_CHAR_TOTAL = '--char-total';\nconst CSS_VAR_WORD_INDEX = '--word-index';\nconst CSS_VAR_CHAR_INDEX = '--char-index';\nconst CSS_VAR_CONTAINER_HEIGHT = '--container-height';\nconst MEASURING_CLASS = 'ts-measuring';\n\nconst canUseDOM = (): boolean => typeof window !== 'undefined' && typeof document !== 'undefined';\n\nconst resolveContainer = (container?: HTMLElement | string): HTMLElement | null => {\n  if (!canUseDOM()) return null;\n  if (!container) return null;\n\n  return typeof container === 'string' ? document.querySelector(container) : container;\n};\n\ntype IntlWithSegmenter = typeof Intl & {\n  Segmenter?: new (locales?: string | string[], options?: Intl.SegmenterOptions) => Intl.Segmenter;\n};\n\nconst splitIntoGraphemes = (text: string): string[] => {\n  const Seg = (Intl as IntlWithSegmenter).Segmenter;\n\n  if (typeof Seg === 'function') {\n    const segmenter = new Seg('en', { granularity: 'grapheme' });\n    return Array.from(segmenter.segment(text), (s: Intl.SegmentData) => s.segment);\n  }\n\n  return Array.from(text);\n};\n\nconst splitIntoWords = (text: string): string[] => text.split(SPACE);\n\nconst emptyElement = (el: HTMLElement): void => {\n  el.replaceChildren();\n};\n\nconst isHTMLElement = (el: unknown): el is HTMLElement =>\n  !!el && typeof HTMLElement !== 'undefined' && el instanceof HTMLElement;\n\ntype NonUndefined<T> = T extends undefined ? never : T;\ntype OmitUndefined<T extends Record<string, unknown>> = {\n  [K in keyof T as T[K] extends undefined ? never : K]: NonUndefined<T[K]>;\n};\n\nconst omitUndefined = <T extends Record<string, unknown>>(obj: T): OmitUndefined<T> => {\n  const out = {} as OmitUndefined<T>;\n\n  (Object.keys(obj) as Array<keyof T>).forEach((key) => {\n    const val = obj[key];\n\n    if (val !== undefined) {\n      (out as Record<string, unknown>)[key as string] = val as unknown;\n    }\n  });\n\n  return out;\n};\n\nexport class TextSlicer {\n  private readonly el: HTMLElement | null;\n  private original: string;\n  private opts: RuntimeOptions;\n  private callbacks: TextSlicerCallbacks | undefined;\n  private charIndex: number;\n  private mounted: boolean;\n  private resizeObserver?: ResizeObserver;\n\n  constructor(options: TextSlicerOptions = {}, callbacks?: TextSlicerCallbacks) {\n    const el = resolveContainer(options.container);\n    this.el = el;\n    this.original = isHTMLElement(el) ? (el.textContent?.toString() ?? '') : '';\n    this.opts = {\n      ...DEFAULT_OPTIONS,\n      ...omitUndefined<Omit<TextSlicerOptions, 'container'>>(options),\n    } as RuntimeOptions;\n\n    this.callbacks = callbacks;\n    this.charIndex = 0;\n    this.mounted = false;\n  }\n\n  get metrics(): TextSlicerMetrics {\n    const text = this.original;\n\n    return {\n      wordTotal: text.length ? splitIntoWords(text).length : 0,\n      charTotal: text.length,\n      renderedAt: Date.now(),\n    };\n  }\n\n  init(): void {\n    if (!this.el) return;\n\n    this.mounted = true;\n    this.split();\n\n    if (this.opts.containerHeightVar) {\n      this.initHeightObserver();\n    }\n  }\n\n  reinit(newText?: string, next?: Partial<TextSlicerOptions>): void {\n    if (!this.el) return;\n    if (typeof newText === 'string') this.original = newText;\n    if (next) this.opts = { ...this.opts, ...omitUndefined(next) } as RuntimeOptions;\n\n    this.split();\n  }\n\n  clear(): void {\n    if (!this.el) return;\n\n    emptyElement(this.el);\n  }\n\n  split(): void {\n    if (!this.el) return;\n\n    this.clear();\n    this.charIndex = 0;\n\n    const text = this.original;\n    const fragment = document.createDocumentFragment();\n    const words = splitIntoWords(text);\n\n    if (this.opts.splitMode === 'chars') {\n      this.appendChars(fragment, text);\n    } else {\n      this.appendWords(fragment, words);\n    }\n\n    this.el.appendChild(fragment);\n\n    if (this.opts.cssVariables) {\n      this.el.style.setProperty(CSS_VAR_WORD_TOTAL, String(words.length));\n      this.el.style.setProperty(CSS_VAR_CHAR_TOTAL, String(text.length));\n    }\n\n    this.callbacks?.onAfterRender?.(this.metrics);\n  }\n\n  destroy(): void {\n    if (!this.el) return;\n\n    this.clear();\n    this.unlockHeight();\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n\n    if (this.opts.containerHeightVar) {\n      this.el.style.removeProperty(CSS_VAR_CONTAINER_HEIGHT);\n    }\n\n    this.mounted = false;\n  }\n\n  updateOptions(next: Partial<TextSlicerOptions>): void {\n    this.opts = { ...this.opts, ...omitUndefined(next) } as RuntimeOptions;\n\n    if (this.mounted) this.split();\n  }\n\n  lockHeight(): void {\n    if (!this.el) return;\n\n    const h = this.measureHeight();\n\n    if (h > 0) {\n      this.el.style.height = `${h}px`;\n    }\n  }\n\n  unlockHeight(): void {\n    if (!this.el) return;\n\n    this.el.style.removeProperty('height');\n  }\n\n  private appendWords(fragment: DocumentFragment, words: string[]): void {\n    words.forEach((word, wordIndex) => {\n      if (this.opts.splitMode === 'both') {\n        const wordSpan = this.createWordSpan(wordIndex, word);\n\n        for (const ch of splitIntoGraphemes(word)) {\n          const charSpan = this.createCharSpan(ch);\n\n          wordSpan.append(charSpan);\n        }\n\n        fragment.append(wordSpan);\n      } else {\n        const wordSpan = this.createWordSpan(wordIndex);\n\n        wordSpan.append(document.createTextNode(word));\n        fragment.append(wordSpan);\n      }\n\n      if (wordIndex < words.length - 1) {\n        fragment.append(this.createSpaceSpan());\n      }\n    });\n  }\n\n  private appendChars(fragment: DocumentFragment, text: string): void {\n    for (const ch of splitIntoGraphemes(text)) {\n      const span = this.createCharSpan(ch);\n\n      fragment.append(span);\n    }\n  }\n\n  private createWordSpan(index: number, word: string = ''): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.classList.add(CLASSNAMES.word);\n\n    if (this.opts.dataAttributes && word) {\n      span.setAttribute('data-word', word);\n    }\n\n    if (this.opts.cssVariables) {\n      span.style.setProperty(CSS_VAR_WORD_INDEX, String(index));\n    }\n\n    return span;\n  }\n\n  private createCharSpan(ch: string): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.textContent = ch;\n\n    if (this.opts.dataAttributes) span.setAttribute('data-char', ch);\n\n    if (ch === SPACE) {\n      span.classList.add(CLASSNAMES.whitespace);\n\n      if (!this.opts.keepWhitespaceNodes) span.textContent = SPACE;\n    } else {\n      span.classList.add(CLASSNAMES.char);\n\n      if (this.opts.cssVariables) {\n        span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));\n      }\n\n      this.charIndex += 1;\n    }\n\n    return span;\n  }\n\n  private createSpaceSpan(): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.classList.add(CLASSNAMES.whitespace);\n    span.textContent = SPACE;\n\n    return span;\n  }\n\n  private measureHeight(): number {\n    if (!this.el) return 0;\n\n    this.el.classList.add(MEASURING_CLASS);\n    void this.el.offsetHeight;\n\n    let h = this.el.offsetHeight || this.el.clientHeight || 0;\n\n    if (!h) {\n      h = Math.round(this.el.getBoundingClientRect().height);\n    }\n\n    this.el.classList.remove(MEASURING_CLASS);\n\n    return Math.max(0, Math.ceil(h));\n  }\n\n  private initHeightObserver(): void {\n    if (!this.el) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      const h = this.measureHeight();\n\n      if (h > 0) {\n        this.el?.style.setProperty(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);\n      }\n    });\n\n    this.resizeObserver.observe(this.el);\n  }\n}\n"],"mappings":";;;AAuBA,MAAM,kBAAkC;CACtC,WAAW;CACX,cAAc;CACd,gBAAgB;CAChB,qBAAqB;CACrB,oBAAoB;AACtB;AAEA,MAAa,aAAa,OAAO,OAAO;CACtC,MAAM;CACN,MAAM;CACN,YAAY;AACd,CAAC;AAED,MAAM,QAAQ;AACd,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;AAExB,MAAM,kBAA2B,OAAO,WAAW,eAAe,OAAO,aAAa;AAEtF,MAAM,oBAAoB,cAAyD;CACjF,IAAI,CAAC,UAAU,GAAG,OAAO;CACzB,IAAI,CAAC,WAAW,OAAO;CAEvB,OAAO,OAAO,cAAc,WAAW,SAAS,cAAc,SAAS,IAAI;AAC7E;AAMA,MAAM,sBAAsB,SAA2B;CACrD,MAAM,MAAO,KAA2B;CAExC,IAAI,OAAO,QAAQ,YAAY;EAC7B,MAAM,YAAY,IAAI,IAAI,MAAM,EAAE,aAAa,WAAW,CAAC;EAC3D,OAAO,MAAM,KAAK,UAAU,QAAQ,IAAI,IAAI,MAAwB,EAAE,OAAO;CAC/E;CAEA,OAAO,MAAM,KAAK,IAAI;AACxB;AAEA,MAAM,kBAAkB,SAA2B,KAAK,MAAM,KAAK;AAEnE,MAAM,gBAAgB,OAA0B;CAC9C,GAAG,gBAAgB;AACrB;AAEA,MAAM,iBAAiB,OACrB,CAAC,CAAC,MAAM,OAAO,gBAAgB,eAAe,cAAc;AAO9D,MAAM,iBAAoD,QAA6B;CACrF,MAAM,MAAM,CAAC;CAEb,AAAC,OAAO,KAAK,GAAG,CAAC,CAAoB,SAAS,QAAQ;EACpD,MAAM,MAAM,IAAI;EAEhB,IAAI,QAAQ,QACV,AAAC,IAAgC,OAAiB;CAEtD,CAAC;CAED,OAAO;AACT;AAEA,IAAa,aAAb,MAAwB;CACtB,AAAiB;CACjB,AAAQ;CACR,AAAQ;CACR,AAAQ;CACR,AAAQ;CACR,AAAQ;CACR,AAAQ;CAER,YAAY,UAA6B,CAAC,GAAG,WAAiC;EAC5E,MAAM,KAAK,iBAAiB,QAAQ,SAAS;EAC7C,KAAK,KAAK;EACV,KAAK,WAAW,cAAc,EAAE,IAAK,GAAG,aAAa,SAAS,KAAK,KAAM;EACzE,KAAK,OAAO;GACV,GAAG;GACH,GAAG,cAAoD,OAAO;EAChE;EAEA,KAAK,YAAY;EACjB,KAAK,YAAY;EACjB,KAAK,UAAU;CACjB;CAEA,IAAI,UAA6B;EAC/B,MAAM,OAAO,KAAK;EAElB,OAAO;GACL,WAAW,KAAK,SAAS,eAAe,IAAI,CAAC,CAAC,SAAS;GACvD,WAAW,KAAK;GAChB,YAAY,KAAK,IAAI;EACvB;CACF;CAEA,OAAa;EACX,IAAI,CAAC,KAAK,IAAI;EAEd,KAAK,UAAU;EACf,KAAK,MAAM;EAEX,IAAI,KAAK,KAAK,oBACZ,KAAK,mBAAmB;CAE5B;CAEA,OAAO,SAAkB,MAAyC;EAChE,IAAI,CAAC,KAAK,IAAI;EACd,IAAI,OAAO,YAAY,UAAU,KAAK,WAAW;EACjD,IAAI,MAAM,KAAK,OAAO;GAAE,GAAG,KAAK;GAAM,GAAG,cAAc,IAAI;EAAE;EAE7D,KAAK,MAAM;CACb;CAEA,QAAc;EACZ,IAAI,CAAC,KAAK,IAAI;EAEd,aAAa,KAAK,EAAE;CACtB;CAEA,QAAc;EACZ,IAAI,CAAC,KAAK,IAAI;EAEd,KAAK,MAAM;EACX,KAAK,YAAY;EAEjB,MAAM,OAAO,KAAK;EAClB,MAAM,WAAW,SAAS,uBAAuB;EACjD,MAAM,QAAQ,eAAe,IAAI;EAEjC,IAAI,KAAK,KAAK,cAAc,SAC1B,KAAK,YAAY,UAAU,IAAI;OAE/B,KAAK,YAAY,UAAU,KAAK;EAGlC,KAAK,GAAG,YAAY,QAAQ;EAE5B,IAAI,KAAK,KAAK,cAAc;GAC1B,KAAK,GAAG,MAAM,YAAY,oBAAoB,OAAO,MAAM,MAAM,CAAC;GAClE,KAAK,GAAG,MAAM,YAAY,oBAAoB,OAAO,KAAK,MAAM,CAAC;EACnE;EAEA,KAAK,WAAW,gBAAgB,KAAK,OAAO;CAC9C;CAEA,UAAgB;EACd,IAAI,CAAC,KAAK,IAAI;EAEd,KAAK,MAAM;EACX,KAAK,aAAa;EAElB,IAAI,KAAK,gBAAgB;GACvB,KAAK,eAAe,WAAW;GAC/B,KAAK,iBAAiB;EACxB;EAEA,IAAI,KAAK,KAAK,oBACZ,KAAK,GAAG,MAAM,eAAe,wBAAwB;EAGvD,KAAK,UAAU;CACjB;CAEA,cAAc,MAAwC;EACpD,KAAK,OAAO;GAAE,GAAG,KAAK;GAAM,GAAG,cAAc,IAAI;EAAE;EAEnD,IAAI,KAAK,SAAS,KAAK,MAAM;CAC/B;CAEA,aAAmB;EACjB,IAAI,CAAC,KAAK,IAAI;EAEd,MAAM,IAAI,KAAK,cAAc;EAE7B,IAAI,IAAI,GACN,KAAK,GAAG,MAAM,SAAS,GAAG,EAAE;CAEhC;CAEA,eAAqB;EACnB,IAAI,CAAC,KAAK,IAAI;EAEd,KAAK,GAAG,MAAM,eAAe,QAAQ;CACvC;CAEA,AAAQ,YAAY,UAA4B,OAAuB;EACrE,MAAM,SAAS,MAAM,cAAc;GACjC,IAAI,KAAK,KAAK,cAAc,QAAQ;IAClC,MAAM,WAAW,KAAK,eAAe,WAAW,IAAI;IAEpD,KAAK,MAAM,MAAM,mBAAmB,IAAI,GAAG;KACzC,MAAM,WAAW,KAAK,eAAe,EAAE;KAEvC,SAAS,OAAO,QAAQ;IAC1B;IAEA,SAAS,OAAO,QAAQ;GAC1B,OAAO;IACL,MAAM,WAAW,KAAK,eAAe,SAAS;IAE9C,SAAS,OAAO,SAAS,eAAe,IAAI,CAAC;IAC7C,SAAS,OAAO,QAAQ;GAC1B;GAEA,IAAI,YAAY,MAAM,SAAS,GAC7B,SAAS,OAAO,KAAK,gBAAgB,CAAC;EAE1C,CAAC;CACH;CAEA,AAAQ,YAAY,UAA4B,MAAoB;EAClE,KAAK,MAAM,MAAM,mBAAmB,IAAI,GAAG;GACzC,MAAM,OAAO,KAAK,eAAe,EAAE;GAEnC,SAAS,OAAO,IAAI;EACtB;CACF;CAEA,AAAQ,eAAe,OAAe,OAAe,IAAqB;EACxE,MAAM,OAAO,SAAS,cAAc,MAAM;EAE1C,KAAK,UAAU,IAAI,WAAW,IAAI;EAElC,IAAI,KAAK,KAAK,kBAAkB,MAC9B,KAAK,aAAa,aAAa,IAAI;EAGrC,IAAI,KAAK,KAAK,cACZ,KAAK,MAAM,YAAY,oBAAoB,OAAO,KAAK,CAAC;EAG1D,OAAO;CACT;CAEA,AAAQ,eAAe,IAA6B;EAClD,MAAM,OAAO,SAAS,cAAc,MAAM;EAE1C,KAAK,cAAc;EAEnB,IAAI,KAAK,KAAK,gBAAgB,KAAK,aAAa,aAAa,EAAE;EAE/D,IAAI,OAAO,OAAO;GAChB,KAAK,UAAU,IAAI,WAAW,UAAU;GAExC,IAAI,CAAC,KAAK,KAAK,qBAAqB,KAAK,cAAc;EACzD,OAAO;GACL,KAAK,UAAU,IAAI,WAAW,IAAI;GAElC,IAAI,KAAK,KAAK,cACZ,KAAK,MAAM,YAAY,oBAAoB,OAAO,KAAK,SAAS,CAAC;GAGnE,KAAK,aAAa;EACpB;EAEA,OAAO;CACT;CAEA,AAAQ,kBAAmC;EACzC,MAAM,OAAO,SAAS,cAAc,MAAM;EAE1C,KAAK,UAAU,IAAI,WAAW,UAAU;EACxC,KAAK,cAAc;EAEnB,OAAO;CACT;CAEA,AAAQ,gBAAwB;EAC9B,IAAI,CAAC,KAAK,IAAI,OAAO;EAErB,KAAK,GAAG,UAAU,IAAI,eAAe;EACrC,AAAK,KAAK,GAAG;EAEb,IAAI,IAAI,KAAK,GAAG,gBAAgB,KAAK,GAAG,gBAAgB;EAExD,IAAI,CAAC,GACH,IAAI,KAAK,MAAM,KAAK,GAAG,sBAAsB,CAAC,CAAC,MAAM;EAGvD,KAAK,GAAG,UAAU,OAAO,eAAe;EAExC,OAAO,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC;CACjC;CAEA,AAAQ,qBAA2B;EACjC,IAAI,CAAC,KAAK,IAAI;EAEd,KAAK,iBAAiB,IAAI,qBAAqB;GAC7C,MAAM,IAAI,KAAK,cAAc;GAE7B,IAAI,IAAI,GACN,KAAK,IAAI,MAAM,YAAY,0BAA0B,GAAG,EAAE,GAAG;EAEjE,CAAC;EAED,KAAK,eAAe,QAAQ,KAAK,EAAE;CACrC;AACF"}

package/dist/index.d.cts

@@ -0,0 +1,52 @@
+//#region src/index.d.ts
+type SplitMode = 'words' | 'chars' | 'both';
+interface TextSlicerOptions {
+  container?: HTMLElement | string;
+  splitMode?: SplitMode;
+  cssVariables?: boolean;
+  dataAttributes?: boolean;
+  keepWhitespaceNodes?: boolean;
+  containerHeightVar?: boolean;
+}
+interface TextSlicerMetrics {
+  wordTotal: number;
+  charTotal: number;
+  renderedAt: number;
+}
+interface TextSlicerCallbacks {
+  onAfterRender?: (metrics: TextSlicerMetrics) => void;
+}
+declare const CLASSNAMES: Readonly<{
+  word: "ts-word";
+  char: "ts-char";
+  whitespace: "ts-whitespace";
+}>;
+declare class TextSlicer {
+  private readonly el;
+  private original;
+  private opts;
+  private callbacks;
+  private charIndex;
+  private mounted;
+  private resizeObserver?;
+  constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
+  get metrics(): TextSlicerMetrics;
+  init(): void;
+  reinit(newText?: string, next?: Partial<TextSlicerOptions>): void;
+  clear(): void;
+  split(): void;
+  destroy(): void;
+  updateOptions(next: Partial<TextSlicerOptions>): void;
+  lockHeight(): void;
+  unlockHeight(): void;
+  private appendWords;
+  private appendChars;
+  private createWordSpan;
+  private createCharSpan;
+  private createSpaceSpan;
+  private measureHeight;
+  private initHeightObserver;
+}
+//#endregion
+export { CLASSNAMES, SplitMode, TextSlicer, TextSlicerCallbacks, TextSlicerMetrics, TextSlicerOptions };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -1,49 +1,52 @@
-export type SplitMode = 'words' | 'chars' | 'both';
-export interface TextSlicerOptions {
-    container?: HTMLElement | string;
-    splitMode?: SplitMode;
-    cssVariables?: boolean;
-    dataAttributes?: boolean;
-    keepWhitespaceNodes?: boolean;
-    containerHeightVar?: boolean;
+//#region src/index.d.ts
+type SplitMode = 'words' | 'chars' | 'both';
+interface TextSlicerOptions {
+  container?: HTMLElement | string;
+  splitMode?: SplitMode;
+  cssVariables?: boolean;
+  dataAttributes?: boolean;
+  keepWhitespaceNodes?: boolean;
+  containerHeightVar?: boolean;
 }
-export interface TextSlicerMetrics {
-    wordTotal: number;
-    charTotal: number;
-    renderedAt: number;
+interface TextSlicerMetrics {
+  wordTotal: number;
+  charTotal: number;
+  renderedAt: number;
 }
-export interface TextSlicerCallbacks {
-    onAfterRender?: (metrics: TextSlicerMetrics) => void;
+interface TextSlicerCallbacks {
+  onAfterRender?: (metrics: TextSlicerMetrics) => void;
 }
-export declare const CLASSNAMES: Readonly<{
-    word: "ts-word";
-    char: "ts-char";
-    whitespace: "ts-whitespace";
+declare const CLASSNAMES: Readonly<{
+  word: "ts-word";
+  char: "ts-char";
+  whitespace: "ts-whitespace";
 }>;
-export declare class TextSlicer {
-    private readonly el;
-    private original;
-    private opts;
-    private callbacks;
-    private charIndex;
-    private mounted;
-    private heightLocked;
-    private resizeObserver?;
-    constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
-    get metrics(): TextSlicerMetrics;
-    init(): void;
-    reinit(newText?: string, next?: Partial<TextSlicerOptions>): void;
-    clear(): void;
-    split(): void;
-    destroy(): void;
-    updateOptions(next: Partial<TextSlicerOptions>): void;
-    lockHeight(): void;
-    unlockHeight(): void;
-    private appendWords;
-    private appendChars;
-    private createWordSpan;
-    private createCharSpan;
-    private createSpaceSpan;
-    private measureHeight;
-    private initHeightObserver;
+declare class TextSlicer {
+  private readonly el;
+  private original;
+  private opts;
+  private callbacks;
+  private charIndex;
+  private mounted;
+  private resizeObserver?;
+  constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
+  get metrics(): TextSlicerMetrics;
+  init(): void;
+  reinit(newText?: string, next?: Partial<TextSlicerOptions>): void;
+  clear(): void;
+  split(): void;
+  destroy(): void;
+  updateOptions(next: Partial<TextSlicerOptions>): void;
+  lockHeight(): void;
+  unlockHeight(): void;
+  private appendWords;
+  private appendChars;
+  private createWordSpan;
+  private createCharSpan;
+  private createSpaceSpan;
+  private measureHeight;
+  private initHeightObserver;
 }
+//#endregion
+export { CLASSNAMES, SplitMode, TextSlicer, TextSlicerCallbacks, TextSlicerMetrics, TextSlicerOptions };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,209 @@
+//#region src/index.ts
+const DEFAULT_OPTIONS = {
+	splitMode: "both",
+	cssVariables: false,
+	dataAttributes: false,
+	keepWhitespaceNodes: true,
+	containerHeightVar: false
+};
+const CLASSNAMES = Object.freeze({
+	word: "ts-word",
+	char: "ts-char",
+	whitespace: "ts-whitespace"
+});
+const SPACE = " ";
+const CSS_VAR_WORD_TOTAL = "--word-total";
+const CSS_VAR_CHAR_TOTAL = "--char-total";
+const CSS_VAR_WORD_INDEX = "--word-index";
+const CSS_VAR_CHAR_INDEX = "--char-index";
+const CSS_VAR_CONTAINER_HEIGHT = "--container-height";
+const MEASURING_CLASS = "ts-measuring";
+const canUseDOM = () => typeof window !== "undefined" && typeof document !== "undefined";
+const resolveContainer = (container) => {
+	if (!canUseDOM()) return null;
+	if (!container) return null;
+	return typeof container === "string" ? document.querySelector(container) : container;
+};
+const splitIntoGraphemes = (text) => {
+	const Seg = Intl.Segmenter;
+	if (typeof Seg === "function") {
+		const segmenter = new Seg("en", { granularity: "grapheme" });
+		return Array.from(segmenter.segment(text), (s) => s.segment);
+	}
+	return Array.from(text);
+};
+const splitIntoWords = (text) => text.split(SPACE);
+const emptyElement = (el) => {
+	el.replaceChildren();
+};
+const isHTMLElement = (el) => !!el && typeof HTMLElement !== "undefined" && el instanceof HTMLElement;
+const omitUndefined = (obj) => {
+	const out = {};
+	Object.keys(obj).forEach((key) => {
+		const val = obj[key];
+		if (val !== void 0) out[key] = val;
+	});
+	return out;
+};
+var TextSlicer = class {
+	el;
+	original;
+	opts;
+	callbacks;
+	charIndex;
+	mounted;
+	resizeObserver;
+	constructor(options = {}, callbacks) {
+		const el = resolveContainer(options.container);
+		this.el = el;
+		this.original = isHTMLElement(el) ? el.textContent?.toString() ?? "" : "";
+		this.opts = {
+			...DEFAULT_OPTIONS,
+			...omitUndefined(options)
+		};
+		this.callbacks = callbacks;
+		this.charIndex = 0;
+		this.mounted = false;
+	}
+	get metrics() {
+		const text = this.original;
+		return {
+			wordTotal: text.length ? splitIntoWords(text).length : 0,
+			charTotal: text.length,
+			renderedAt: Date.now()
+		};
+	}
+	init() {
+		if (!this.el) return;
+		this.mounted = true;
+		this.split();
+		if (this.opts.containerHeightVar) this.initHeightObserver();
+	}
+	reinit(newText, next) {
+		if (!this.el) return;
+		if (typeof newText === "string") this.original = newText;
+		if (next) this.opts = {
+			...this.opts,
+			...omitUndefined(next)
+		};
+		this.split();
+	}
+	clear() {
+		if (!this.el) return;
+		emptyElement(this.el);
+	}
+	split() {
+		if (!this.el) return;
+		this.clear();
+		this.charIndex = 0;
+		const text = this.original;
+		const fragment = document.createDocumentFragment();
+		const words = splitIntoWords(text);
+		if (this.opts.splitMode === "chars") this.appendChars(fragment, text);
+		else this.appendWords(fragment, words);
+		this.el.appendChild(fragment);
+		if (this.opts.cssVariables) {
+			this.el.style.setProperty(CSS_VAR_WORD_TOTAL, String(words.length));
+			this.el.style.setProperty(CSS_VAR_CHAR_TOTAL, String(text.length));
+		}
+		this.callbacks?.onAfterRender?.(this.metrics);
+	}
+	destroy() {
+		if (!this.el) return;
+		this.clear();
+		this.unlockHeight();
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = void 0;
+		}
+		if (this.opts.containerHeightVar) this.el.style.removeProperty(CSS_VAR_CONTAINER_HEIGHT);
+		this.mounted = false;
+	}
+	updateOptions(next) {
+		this.opts = {
+			...this.opts,
+			...omitUndefined(next)
+		};
+		if (this.mounted) this.split();
+	}
+	lockHeight() {
+		if (!this.el) return;
+		const h = this.measureHeight();
+		if (h > 0) this.el.style.height = `${h}px`;
+	}
+	unlockHeight() {
+		if (!this.el) return;
+		this.el.style.removeProperty("height");
+	}
+	appendWords(fragment, words) {
+		words.forEach((word, wordIndex) => {
+			if (this.opts.splitMode === "both") {
+				const wordSpan = this.createWordSpan(wordIndex, word);
+				for (const ch of splitIntoGraphemes(word)) {
+					const charSpan = this.createCharSpan(ch);
+					wordSpan.append(charSpan);
+				}
+				fragment.append(wordSpan);
+			} else {
+				const wordSpan = this.createWordSpan(wordIndex);
+				wordSpan.append(document.createTextNode(word));
+				fragment.append(wordSpan);
+			}
+			if (wordIndex < words.length - 1) fragment.append(this.createSpaceSpan());
+		});
+	}
+	appendChars(fragment, text) {
+		for (const ch of splitIntoGraphemes(text)) {
+			const span = this.createCharSpan(ch);
+			fragment.append(span);
+		}
+	}
+	createWordSpan(index, word = "") {
+		const span = document.createElement("span");
+		span.classList.add(CLASSNAMES.word);
+		if (this.opts.dataAttributes && word) span.setAttribute("data-word", word);
+		if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_WORD_INDEX, String(index));
+		return span;
+	}
+	createCharSpan(ch) {
+		const span = document.createElement("span");
+		span.textContent = ch;
+		if (this.opts.dataAttributes) span.setAttribute("data-char", ch);
+		if (ch === SPACE) {
+			span.classList.add(CLASSNAMES.whitespace);
+			if (!this.opts.keepWhitespaceNodes) span.textContent = SPACE;
+		} else {
+			span.classList.add(CLASSNAMES.char);
+			if (this.opts.cssVariables) span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));
+			this.charIndex += 1;
+		}
+		return span;
+	}
+	createSpaceSpan() {
+		const span = document.createElement("span");
+		span.classList.add(CLASSNAMES.whitespace);
+		span.textContent = SPACE;
+		return span;
+	}
+	measureHeight() {
+		if (!this.el) return 0;
+		this.el.classList.add(MEASURING_CLASS);
+		this.el.offsetHeight;
+		let h = this.el.offsetHeight || this.el.clientHeight || 0;
+		if (!h) h = Math.round(this.el.getBoundingClientRect().height);
+		this.el.classList.remove(MEASURING_CLASS);
+		return Math.max(0, Math.ceil(h));
+	}
+	initHeightObserver() {
+		if (!this.el) return;
+		this.resizeObserver = new ResizeObserver(() => {
+			const h = this.measureHeight();
+			if (h > 0) this.el?.style.setProperty(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);
+		});
+		this.resizeObserver.observe(this.el);
+	}
+};
+
+//#endregion
+export { CLASSNAMES, TextSlicer };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export type SplitMode = 'words' | 'chars' | 'both';\n\nexport interface TextSlicerOptions {\n  container?: HTMLElement | string;\n  splitMode?: SplitMode;\n  cssVariables?: boolean;\n  dataAttributes?: boolean;\n  keepWhitespaceNodes?: boolean;\n  containerHeightVar?: boolean;\n}\n\nexport interface TextSlicerMetrics {\n  wordTotal: number;\n  charTotal: number;\n  renderedAt: number;\n}\n\nexport interface TextSlicerCallbacks {\n  onAfterRender?: (metrics: TextSlicerMetrics) => void;\n}\n\ntype RuntimeOptions = Required<Omit<TextSlicerOptions, 'container'>>;\n\nconst DEFAULT_OPTIONS: RuntimeOptions = {\n  splitMode: 'both',\n  cssVariables: false,\n  dataAttributes: false,\n  keepWhitespaceNodes: true,\n  containerHeightVar: false,\n};\n\nexport const CLASSNAMES = Object.freeze({\n  word: 'ts-word',\n  char: 'ts-char',\n  whitespace: 'ts-whitespace',\n});\n\nconst SPACE = ' ';\nconst CSS_VAR_WORD_TOTAL = '--word-total';\nconst CSS_VAR_CHAR_TOTAL = '--char-total';\nconst CSS_VAR_WORD_INDEX = '--word-index';\nconst CSS_VAR_CHAR_INDEX = '--char-index';\nconst CSS_VAR_CONTAINER_HEIGHT = '--container-height';\nconst MEASURING_CLASS = 'ts-measuring';\n\nconst canUseDOM = (): boolean => typeof window !== 'undefined' && typeof document !== 'undefined';\n\nconst resolveContainer = (container?: HTMLElement | string): HTMLElement | null => {\n  if (!canUseDOM()) return null;\n  if (!container) return null;\n\n  return typeof container === 'string' ? document.querySelector(container) : container;\n};\n\ntype IntlWithSegmenter = typeof Intl & {\n  Segmenter?: new (locales?: string | string[], options?: Intl.SegmenterOptions) => Intl.Segmenter;\n};\n\nconst splitIntoGraphemes = (text: string): string[] => {\n  const Seg = (Intl as IntlWithSegmenter).Segmenter;\n\n  if (typeof Seg === 'function') {\n    const segmenter = new Seg('en', { granularity: 'grapheme' });\n    return Array.from(segmenter.segment(text), (s: Intl.SegmentData) => s.segment);\n  }\n\n  return Array.from(text);\n};\n\nconst splitIntoWords = (text: string): string[] => text.split(SPACE);\n\nconst emptyElement = (el: HTMLElement): void => {\n  el.replaceChildren();\n};\n\nconst isHTMLElement = (el: unknown): el is HTMLElement =>\n  !!el && typeof HTMLElement !== 'undefined' && el instanceof HTMLElement;\n\ntype NonUndefined<T> = T extends undefined ? never : T;\ntype OmitUndefined<T extends Record<string, unknown>> = {\n  [K in keyof T as T[K] extends undefined ? never : K]: NonUndefined<T[K]>;\n};\n\nconst omitUndefined = <T extends Record<string, unknown>>(obj: T): OmitUndefined<T> => {\n  const out = {} as OmitUndefined<T>;\n\n  (Object.keys(obj) as Array<keyof T>).forEach((key) => {\n    const val = obj[key];\n\n    if (val !== undefined) {\n      (out as Record<string, unknown>)[key as string] = val as unknown;\n    }\n  });\n\n  return out;\n};\n\nexport class TextSlicer {\n  private readonly el: HTMLElement | null;\n  private original: string;\n  private opts: RuntimeOptions;\n  private callbacks: TextSlicerCallbacks | undefined;\n  private charIndex: number;\n  private mounted: boolean;\n  private resizeObserver?: ResizeObserver;\n\n  constructor(options: TextSlicerOptions = {}, callbacks?: TextSlicerCallbacks) {\n    const el = resolveContainer(options.container);\n    this.el = el;\n    this.original = isHTMLElement(el) ? (el.textContent?.toString() ?? '') : '';\n    this.opts = {\n      ...DEFAULT_OPTIONS,\n      ...omitUndefined<Omit<TextSlicerOptions, 'container'>>(options),\n    } as RuntimeOptions;\n\n    this.callbacks = callbacks;\n    this.charIndex = 0;\n    this.mounted = false;\n  }\n\n  get metrics(): TextSlicerMetrics {\n    const text = this.original;\n\n    return {\n      wordTotal: text.length ? splitIntoWords(text).length : 0,\n      charTotal: text.length,\n      renderedAt: Date.now(),\n    };\n  }\n\n  init(): void {\n    if (!this.el) return;\n\n    this.mounted = true;\n    this.split();\n\n    if (this.opts.containerHeightVar) {\n      this.initHeightObserver();\n    }\n  }\n\n  reinit(newText?: string, next?: Partial<TextSlicerOptions>): void {\n    if (!this.el) return;\n    if (typeof newText === 'string') this.original = newText;\n    if (next) this.opts = { ...this.opts, ...omitUndefined(next) } as RuntimeOptions;\n\n    this.split();\n  }\n\n  clear(): void {\n    if (!this.el) return;\n\n    emptyElement(this.el);\n  }\n\n  split(): void {\n    if (!this.el) return;\n\n    this.clear();\n    this.charIndex = 0;\n\n    const text = this.original;\n    const fragment = document.createDocumentFragment();\n    const words = splitIntoWords(text);\n\n    if (this.opts.splitMode === 'chars') {\n      this.appendChars(fragment, text);\n    } else {\n      this.appendWords(fragment, words);\n    }\n\n    this.el.appendChild(fragment);\n\n    if (this.opts.cssVariables) {\n      this.el.style.setProperty(CSS_VAR_WORD_TOTAL, String(words.length));\n      this.el.style.setProperty(CSS_VAR_CHAR_TOTAL, String(text.length));\n    }\n\n    this.callbacks?.onAfterRender?.(this.metrics);\n  }\n\n  destroy(): void {\n    if (!this.el) return;\n\n    this.clear();\n    this.unlockHeight();\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = undefined;\n    }\n\n    if (this.opts.containerHeightVar) {\n      this.el.style.removeProperty(CSS_VAR_CONTAINER_HEIGHT);\n    }\n\n    this.mounted = false;\n  }\n\n  updateOptions(next: Partial<TextSlicerOptions>): void {\n    this.opts = { ...this.opts, ...omitUndefined(next) } as RuntimeOptions;\n\n    if (this.mounted) this.split();\n  }\n\n  lockHeight(): void {\n    if (!this.el) return;\n\n    const h = this.measureHeight();\n\n    if (h > 0) {\n      this.el.style.height = `${h}px`;\n    }\n  }\n\n  unlockHeight(): void {\n    if (!this.el) return;\n\n    this.el.style.removeProperty('height');\n  }\n\n  private appendWords(fragment: DocumentFragment, words: string[]): void {\n    words.forEach((word, wordIndex) => {\n      if (this.opts.splitMode === 'both') {\n        const wordSpan = this.createWordSpan(wordIndex, word);\n\n        for (const ch of splitIntoGraphemes(word)) {\n          const charSpan = this.createCharSpan(ch);\n\n          wordSpan.append(charSpan);\n        }\n\n        fragment.append(wordSpan);\n      } else {\n        const wordSpan = this.createWordSpan(wordIndex);\n\n        wordSpan.append(document.createTextNode(word));\n        fragment.append(wordSpan);\n      }\n\n      if (wordIndex < words.length - 1) {\n        fragment.append(this.createSpaceSpan());\n      }\n    });\n  }\n\n  private appendChars(fragment: DocumentFragment, text: string): void {\n    for (const ch of splitIntoGraphemes(text)) {\n      const span = this.createCharSpan(ch);\n\n      fragment.append(span);\n    }\n  }\n\n  private createWordSpan(index: number, word: string = ''): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.classList.add(CLASSNAMES.word);\n\n    if (this.opts.dataAttributes && word) {\n      span.setAttribute('data-word', word);\n    }\n\n    if (this.opts.cssVariables) {\n      span.style.setProperty(CSS_VAR_WORD_INDEX, String(index));\n    }\n\n    return span;\n  }\n\n  private createCharSpan(ch: string): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.textContent = ch;\n\n    if (this.opts.dataAttributes) span.setAttribute('data-char', ch);\n\n    if (ch === SPACE) {\n      span.classList.add(CLASSNAMES.whitespace);\n\n      if (!this.opts.keepWhitespaceNodes) span.textContent = SPACE;\n    } else {\n      span.classList.add(CLASSNAMES.char);\n\n      if (this.opts.cssVariables) {\n        span.style.setProperty(CSS_VAR_CHAR_INDEX, String(this.charIndex));\n      }\n\n      this.charIndex += 1;\n    }\n\n    return span;\n  }\n\n  private createSpaceSpan(): HTMLSpanElement {\n    const span = document.createElement('span');\n\n    span.classList.add(CLASSNAMES.whitespace);\n    span.textContent = SPACE;\n\n    return span;\n  }\n\n  private measureHeight(): number {\n    if (!this.el) return 0;\n\n    this.el.classList.add(MEASURING_CLASS);\n    void this.el.offsetHeight;\n\n    let h = this.el.offsetHeight || this.el.clientHeight || 0;\n\n    if (!h) {\n      h = Math.round(this.el.getBoundingClientRect().height);\n    }\n\n    this.el.classList.remove(MEASURING_CLASS);\n\n    return Math.max(0, Math.ceil(h));\n  }\n\n  private initHeightObserver(): void {\n    if (!this.el) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      const h = this.measureHeight();\n\n      if (h > 0) {\n        this.el?.style.setProperty(CSS_VAR_CONTAINER_HEIGHT, `${h}px`);\n      }\n    });\n\n    this.resizeObserver.observe(this.el);\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.5.0-dev.5",
+  "version": "2.0.0",
   "description": "TextSlicer is designed to split text within an HTML element into separate words and/or characters, wrapping each word and/or character in separate span elements.",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -13,46 +13,58 @@
   },
   "homepage": "https://github.com/ux-ui-pro/text-slicer",
   "sideEffects": false,
+  "type": "module",
+  "packageManager": "npm@10.9.3",
+  "engines": {
+    "node": ">=20.19.0"
+  },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "vite build",
-    "lint:ts": "eslint src/**/*.ts",
-    "lint:fix:ts": "eslint src/**/*.ts --fix",
-    "format:ts": "prettier --write src/**/*.ts",
-    "lint:fix": "yarn lint:fix:ts && yarn format:ts"
+    "build": "tsdown",
+    "verify": "npm run lint && npm run typecheck && npm run build && npm run test:smoke && npm run pack:check",
+    "lint": "biome check src tests tsdown.config.ts",
+    "lint:fix": "biome check --write src tests tsdown.config.ts",
+    "format": "biome format --write src tests tsdown.config.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test:smoke": "node --test \"tests/**/*.js\"",
+    "pack:check": "npm pack --dry-run && publint && attw --pack . --profile node16",
+    "prepublishOnly": "npm run clean && npm run verify"
   },
   "source": "src/index.ts",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "browser": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs.js",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.umd.js"
-    },
-    "./dist/*": "./dist/*"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
   },
   "files": [
-    "dist/"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
-    "@eslint/js": "9.34.0",
-    "@rollup/plugin-terser": "0.4.4",
-    "@types/node": "24.3.0",
-    "@typescript-eslint/eslint-plugin": "8.40.0",
-    "@typescript-eslint/parser": "8.40.0",
-    "eslint": "9.34.0",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-typescript": "4.4.4",
-    "eslint-plugin-import": "2.32.0",
-    "globals": "16.3.0",
-    "prettier": "3.6.2",
-    "rimraf": "6.0.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.3",
-    "vite-plugin-dts": "4.5.4"
+    "@arethetypeswrong/cli": "^0.18.3",
+    "@biomejs/biome": "2.4.16",
+    "@types/node": "25.9.2",
+    "@ux-ui/biome-config": "^0.1.0",
+    "@ux-ui/tsconfig-base": "^0.1.0",
+    "@ux-ui/tsdown-config": "^0.1.0",
+    "publint": "^0.3.21",
+    "rimraf": "6.1.3",
+    "tsdown": "0.22.3",
+    "typescript": "6.0.3"
   },
   "keywords": [
     "text",

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},n=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),h=" ",a="--container-height",c="ts-measuring",m=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,l=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),i=>i.segment)}return Array.from(t)},d=t=>t.split(h),o=t=>{const e={};return Object.keys(t).forEach(s=>{const i=t[s];i!==void 0&&(e[s]=i)}),e};exports.CLASSNAMES=n,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;resizeObserver;constructor(t={},e){const s=m(t.container);this.el=s,this.original=(i=>!!i&&typeof HTMLElement<"u"&&i instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...u,...o(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const t=this.original;return{wordTotal:t.length?d(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split(),this.opts.containerHeightVar&&this.initHeightObserver())}reinit(t,e){this.el&&(typeof t=="string"&&(this.original=t),e&&(this.opts={...this.opts,...o(e)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=d(t);this.opts.splitMode==="chars"?this.appendChars(e,t):this.appendWords(e,s),this.el.appendChild(e),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(t.length))),this.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.opts.containerHeightVar&&this.el.style.removeProperty(a),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...o(t)},this.mounted&&this.split()}lockHeight(){if(!this.el)return;const t=this.measureHeight();t>0&&(this.el.style.height=`${t}px`,this.heightLocked=!0)}unlockHeight(){this.el&&(this.el.style.removeProperty("height"),this.heightLocked=!1)}appendWords(t,e){e.forEach((s,i)=>{if(this.opts.splitMode==="both"){const r=this.createWordSpan(i,s);for(const p of l(s)){const g=this.createCharSpan(p);r.append(g)}t.append(r)}else{const r=this.createWordSpan(i);r.append(document.createTextNode(s)),t.append(r)}i<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of l(e)){const i=this.createCharSpan(s);t.append(i)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(n.word),this.opts.dataAttributes&&e&&s.setAttribute("data-word",e),this.opts.cssVariables&&s.style.setProperty("--word-index",String(t)),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.opts.dataAttributes&&e.setAttribute("data-char",t),t===h?(e.classList.add(n.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=h)):(e.classList.add(n.char),this.opts.cssVariables&&e.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),e}createSpaceSpan(){const t=document.createElement("span");return t.classList.add(n.whitespace),t.textContent=h,t}measureHeight(){if(!this.el)return 0;this.el.classList.add(c),this.el.offsetHeight;let t=this.el.offsetHeight||this.el.clientHeight||0;return t||(t=Math.round(this.el.getBoundingClientRect().height)),this.el.classList.remove(c),Math.max(0,Math.ceil(t))}initHeightObserver(){this.el&&(this.resizeObserver=new ResizeObserver(()=>{const t=this.measureHeight();t>0&&this.el.style.setProperty(a,`${t}px`)}),this.resizeObserver.observe(this.el))}};

package/dist/index.es.js

@@ -1,111 +0,0 @@
-const m = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, containerHeightVar: !1 }, h = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), a = " ", c = "--container-height", l = "ts-measuring", f = (i) => typeof window > "u" || typeof document > "u" ? null : i ? typeof i == "string" ? document.querySelector(i) : i : null, p = (i) => {
-  const t = Intl.Segmenter;
-  if (typeof t == "function") {
-    const e = new t("en", { granularity: "grapheme" });
-    return Array.from(e.segment(i), (s) => s.segment);
-  }
-  return Array.from(i);
-}, d = (i) => i.split(a), o = (i) => {
-  const t = {};
-  return Object.keys(i).forEach((e) => {
-    const s = i[e];
-    s !== void 0 && (t[e] = s);
-  }), t;
-};
-class y {
-  el;
-  original;
-  opts;
-  callbacks;
-  charIndex;
-  mounted;
-  heightLocked;
-  resizeObserver;
-  constructor(t = {}, e) {
-    const s = f(t.container);
-    this.el = s, this.original = ((r) => !!r && typeof HTMLElement < "u" && r instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...m, ...o(t) }, this.callbacks = e, this.charIndex = 0, this.mounted = !1, this.heightLocked = !1;
-  }
-  get metrics() {
-    const t = this.original;
-    return { wordTotal: t.length ? d(t).length : 0, charTotal: t.length, renderedAt: Date.now() };
-  }
-  init() {
-    this.el && (this.mounted = !0, this.split(), this.opts.containerHeightVar && this.initHeightObserver());
-  }
-  reinit(t, e) {
-    this.el && (typeof t == "string" && (this.original = t), e && (this.opts = { ...this.opts, ...o(e) }), this.split());
-  }
-  clear() {
-    this.el && this.el.replaceChildren();
-  }
-  split() {
-    if (!this.el) return;
-    this.clear(), this.charIndex = 0;
-    const t = this.original, e = document.createDocumentFragment(), s = d(t);
-    this.opts.splitMode === "chars" ? this.appendChars(e, t) : this.appendWords(e, s), this.el.appendChild(e), this.opts.cssVariables && (this.el.style.setProperty("--word-total", String(s.length)), this.el.style.setProperty("--char-total", String(t.length))), this.callbacks?.onAfterRender?.(this.metrics);
-  }
-  destroy() {
-    this.el && (this.clear(), this.unlockHeight(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.opts.containerHeightVar && this.el.style.removeProperty(c), this.mounted = !1);
-  }
-  updateOptions(t) {
-    this.opts = { ...this.opts, ...o(t) }, this.mounted && this.split();
-  }
-  lockHeight() {
-    if (!this.el) return;
-    const t = this.measureHeight();
-    t > 0 && (this.el.style.height = `${t}px`, this.heightLocked = !0);
-  }
-  unlockHeight() {
-    this.el && (this.el.style.removeProperty("height"), this.heightLocked = !1);
-  }
-  appendWords(t, e) {
-    e.forEach((s, r) => {
-      if (this.opts.splitMode === "both") {
-        const n = this.createWordSpan(r, s);
-        for (const g of p(s)) {
-          const u = this.createCharSpan(g);
-          n.append(u);
-        }
-        t.append(n);
-      } else {
-        const n = this.createWordSpan(r);
-        n.append(document.createTextNode(s)), t.append(n);
-      }
-      r < e.length - 1 && t.append(this.createSpaceSpan());
-    });
-  }
-  appendChars(t, e) {
-    for (const s of p(e)) {
-      const r = this.createCharSpan(s);
-      t.append(r);
-    }
-  }
-  createWordSpan(t, e = "") {
-    const s = document.createElement("span");
-    return s.classList.add(h.word), this.opts.dataAttributes && e && s.setAttribute("data-word", e), this.opts.cssVariables && s.style.setProperty("--word-index", String(t)), s;
-  }
-  createCharSpan(t) {
-    const e = document.createElement("span");
-    return e.textContent = t, this.opts.dataAttributes && e.setAttribute("data-char", t), t === a ? (e.classList.add(h.whitespace), this.opts.keepWhitespaceNodes || (e.textContent = a)) : (e.classList.add(h.char), this.opts.cssVariables && e.style.setProperty("--char-index", String(this.charIndex)), this.charIndex += 1), e;
-  }
-  createSpaceSpan() {
-    const t = document.createElement("span");
-    return t.classList.add(h.whitespace), t.textContent = a, t;
-  }
-  measureHeight() {
-    if (!this.el) return 0;
-    this.el.classList.add(l), this.el.offsetHeight;
-    let t = this.el.offsetHeight || this.el.clientHeight || 0;
-    return t || (t = Math.round(this.el.getBoundingClientRect().height)), this.el.classList.remove(l), Math.max(0, Math.ceil(t));
-  }
-  initHeightObserver() {
-    this.el && (this.resizeObserver = new ResizeObserver(() => {
-      const t = this.measureHeight();
-      t > 0 && this.el.style.setProperty(c, `${t}px`);
-    }), this.resizeObserver.observe(this.el));
-  }
-}
-export {
-  h as CLASSNAMES,
-  y as TextSlicer
-};

package/dist/index.umd.js

@@ -1 +0,0 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):n((r=typeof globalThis<"u"?globalThis:r||self).TextSlicer={})})(this,function(r){"use strict";const n={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},o=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),a=" ",l="--container-height",d="ts-measuring",g=e=>typeof window>"u"||typeof document>"u"?null:e?typeof e=="string"?document.querySelector(e):e:null,p=e=>{const t=Intl.Segmenter;if(typeof t=="function"){const s=new t("en",{granularity:"grapheme"});return Array.from(s.segment(e),i=>i.segment)}return Array.from(e)},u=e=>e.split(a),c=e=>{const t={};return Object.keys(e).forEach(s=>{const i=e[s];i!==void 0&&(t[s]=i)}),t};r.CLASSNAMES=o,r.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;resizeObserver;constructor(e={},t){const s=g(e.container);this.el=s,this.original=(i=>!!i&&typeof HTMLElement<"u"&&i instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...n,...c(e)},this.callbacks=t,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const e=this.original;return{wordTotal:e.length?u(e).length:0,charTotal:e.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split(),this.opts.containerHeightVar&&this.initHeightObserver())}reinit(e,t){this.el&&(typeof e=="string"&&(this.original=e),t&&(this.opts={...this.opts,...c(t)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const e=this.original,t=document.createDocumentFragment(),s=u(e);this.opts.splitMode==="chars"?this.appendChars(t,e):this.appendWords(t,s),this.el.appendChild(t),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(e.length))),this.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.opts.containerHeightVar&&this.el.style.removeProperty(l),this.mounted=!1)}updateOptions(e){this.opts={...this.opts,...c(e)},this.mounted&&this.split()}lockHeight(){if(!this.el)return;const e=this.measureHeight();e>0&&(this.el.style.height=`${e}px`,this.heightLocked=!0)}unlockHeight(){this.el&&(this.el.style.removeProperty("height"),this.heightLocked=!1)}appendWords(e,t){t.forEach((s,i)=>{if(this.opts.splitMode==="both"){const h=this.createWordSpan(i,s);for(const f of p(s)){const m=this.createCharSpan(f);h.append(m)}e.append(h)}else{const h=this.createWordSpan(i);h.append(document.createTextNode(s)),e.append(h)}i<t.length-1&&e.append(this.createSpaceSpan())})}appendChars(e,t){for(const s of p(t)){const i=this.createCharSpan(s);e.append(i)}}createWordSpan(e,t=""){const s=document.createElement("span");return s.classList.add(o.word),this.opts.dataAttributes&&t&&s.setAttribute("data-word",t),this.opts.cssVariables&&s.style.setProperty("--word-index",String(e)),s}createCharSpan(e){const t=document.createElement("span");return t.textContent=e,this.opts.dataAttributes&&t.setAttribute("data-char",e),e===a?(t.classList.add(o.whitespace),this.opts.keepWhitespaceNodes||(t.textContent=a)):(t.classList.add(o.char),this.opts.cssVariables&&t.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),t}createSpaceSpan(){const e=document.createElement("span");return e.classList.add(o.whitespace),e.textContent=a,e}measureHeight(){if(!this.el)return 0;this.el.classList.add(d),this.el.offsetHeight;let e=this.el.offsetHeight||this.el.clientHeight||0;return e||(e=Math.round(this.el.getBoundingClientRect().height)),this.el.classList.remove(d),Math.max(0,Math.ceil(e))}initHeightObserver(){this.el&&(this.resizeObserver=new ResizeObserver(()=>{const e=this.measureHeight();e>0&&this.el.style.setProperty(l,`${e}px`)}),this.resizeObserver.observe(this.el))}},Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});