@y14e/splitter 0.0.0-stage → 4.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yusuke Kamiyamane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,59 @@
-# Temporary Holding Version
+# Splitter
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Flexible text splitting utility for CSS animations. Supports complex [line breaking rules](https://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages) (ja: 禁則処理).
+
+## Install
+
+```bash
+npm i @y14e/splitter
+```
+
+```ts
+// npm
+import { createSplitter } from '@y14e/splitter';
+
+// CDNs
+import { createSplitter } from 'https://esm.sh/@y14e/splitter@<x.x.x>';
+// or
+import { createSplitter } from 'https://cdn.jsdelivr.net/npm/@y14e/splitter@<x.x.x>/dist/index.js';
+// or
+import { createSplitter } from 'https://esm.unpkg.com/@y14e/splitter@<x.x.x>';
+```
+
+## 📦 APIs
+
+```ts
+const cleanup = createSplitter(root, options);
+// => () => void
+//
+// root: HTMLElement
+// options (optional): SplitterOptions
+```
+
+## 🪄 Options
+
+```ts
+interface SplitterOptions {
+  concatChar: boolean;          // default: false
+  noInlineStyle: boolean;       // default: false
+  noLineBreakingRules: boolean; // default: false
+  wordSegmenter: boolean;       // default: false
+}
+```
+
+### `concatChar`
+
+If `true`, enables concatenation at the character level.
+
+### `noLineBreakingRules`
+
+If `true`, disables line breaking rules.
+
+### `wordSegmenter`
+
+If `true`, uses `Intl.Segmenter` with the `{ granularity: 'word' }` option; useful for CJK (Chinese, Japanese, and Korean) text.
+
+## Demo
+
+- https://y14e.github.io/splitter/
+- https://y14e.github.io/splitter/test.html

package/dist/index.cjs

@@ -0,0 +1,296 @@
+'use strict';
+
+// src/constants.ts
+var NOBR_RE = /[[[\P{scx=Han}]&&[\P{scx=Hang}]&&[\P{scx=Hira}]&&[\P{scx=Kana}]&&[\p{L}]]!-,.->@\[-`\{-~\u00A0]+/gv;
+var LBR_PROHIBIT_START_RE = /^[[[\p{Pd}]--[―]]\p{Pe}\p{Pf}\p{Po}\u00A0々〵〻ぁぃぅぇぉっゃゅょゎゕゖ゛-ゞァィゥェォッャュョヮヵヶー-ヾㇰ-ㇿ]|\p{Pi}/v;
+var LBR_PROHIBIT_END_RE = /[\p{Pf}\p{Pi}\p{Ps}\p{Sc}\u00A0]$/u;
+var LBR_INSEPARATABLE_RE = /[―‥…]/u;
+var VISUALLY_HIDDEN_CSS = "border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;";
+
+// src/options.ts
+function resolveOptions(options) {
+  let {
+    concatChar = false,
+    noInlineStyle = false,
+    noLineBreakingRules = false,
+    wordSegmenter = false
+  } = options;
+  if (typeof concatChar !== "boolean") {
+    console.warn(`Invalid concatChar option. Fallback: false.`);
+    concatChar = false;
+  }
+  if (typeof noInlineStyle !== "boolean") {
+    console.warn(`Invalid noInlineStyle option. Fallback: false.`);
+    noInlineStyle = false;
+  }
+  if (typeof noLineBreakingRules !== "boolean") {
+    console.warn(`Invalid noLineBreakingRules option. Fallback: false.`);
+    noLineBreakingRules = false;
+  }
+  if (typeof wordSegmenter !== "boolean") {
+    console.warn(`Invalid wordSegmenter option. Fallback: false.`);
+    wordSegmenter = false;
+  }
+  return {
+    concatChar,
+    noInlineStyle,
+    noLineBreakingRules,
+    wordSegmenter
+  };
+}
+
+// src/index.ts
+function createSplitter(root, options = {}) {
+  if (!(root instanceof HTMLElement)) {
+    console.warn("Invalid root element");
+    return () => {
+    };
+  }
+  const instance = new Splitter(root, options);
+  return () => instance.destroy();
+}
+var Splitter = class {
+  #rootElement;
+  #settings;
+  #wordElements = [];
+  #charElements = [];
+  #original;
+  #fragment = null;
+  #segmenter = new Intl.Segmenter();
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    this.#rootElement = root;
+    this.#settings = resolveOptions(options);
+    this.#original = this.#rootElement.innerHTML;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#rootElement.removeAttribute("data-moji-splitter-initialized");
+    this.#rootElement.innerHTML = this.#original ?? "";
+    const style = this.#rootElement.style;
+    style.removeProperty("--word-count");
+    style.removeProperty("--char-count");
+    this.#cleanup();
+    this.#original = null;
+  }
+  #initialize() {
+    const children = this.#rootElement.childNodes;
+    this.#fragment = new DocumentFragment();
+    for (const child of children) {
+      this.#fragment.appendChild(child.cloneNode(true));
+    }
+    this.#applyNonBreakingRules();
+    this.#split("word");
+    const { concatChar, noInlineStyle, noLineBreakingRules } = this.#settings;
+    !concatChar && !noLineBreakingRules && this.#applyLineBreakingRules("word");
+    this.#split("char");
+    concatChar && !noLineBreakingRules && this.#applyLineBreakingRules("char");
+    this.#charElements.forEach((char, i) => {
+      char.setAttribute("aria-hidden", "true");
+      char.style.setProperty("--char-index", String(i));
+    });
+    if (!noInlineStyle) {
+      const spans = this.#fragment.querySelectorAll(
+        ":is([data-word], [data-char]):not([data-whitespace])"
+      );
+      for (const span of spans) {
+        const { style: style2 } = span;
+        style2.setProperty("display", "inline-block");
+        [...(this.#segmenter ?? new Intl.Segmenter()).segment(span.textContent)].length && style2.setProperty("white-space", "nowrap");
+      }
+    }
+    this.#wordElements.forEach((word, i) => {
+      word.translate = false;
+      word.style.setProperty("--word-index", String(i));
+      if (!word.hasAttribute("data-whitespace")) {
+        const alt = document.createElement("span");
+        alt.setAttribute("data-alt", "");
+        if (!this.#settings.noInlineStyle) {
+          alt.style.cssText += VISUALLY_HIDDEN_CSS;
+        }
+        alt.textContent = word.textContent;
+        word.append(alt);
+      }
+    });
+    this.#rootElement.replaceChildren(...this.#fragment.childNodes);
+    const { style } = this.#rootElement;
+    style.setProperty("--word-count", String(this.#wordElements.length));
+    style.setProperty("--char-count", String(this.#charElements.length));
+    const whitespaces = this.#rootElement.querySelectorAll(
+      ":scope > :not([data-word]) [data-char][data-whitespace]"
+    );
+    for (const whitespace of whitespaces) {
+      if (window.getComputedStyle(whitespace).getPropertyValue("display") !== "inline") {
+        whitespace.innerHTML = " ";
+      }
+    }
+    this.#cleanup();
+    this.#rootElement.setAttribute("data-moji-splitter-initialized", "");
+  }
+  #applyNonBreakingRules(node = this.#fragment ?? new DocumentFragment()) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent;
+      if (!text || !NOBR_RE.test(text)) {
+        return;
+      }
+      NOBR_RE.lastIndex = 0;
+      let lastIndex = 0;
+      const fragment = document.createDocumentFragment();
+      for (const match of text.matchAll(NOBR_RE)) {
+        const index = match.index;
+        index > lastIndex && fragment.append(text.slice(lastIndex, index));
+        const span = document.createElement("span");
+        span.setAttribute("data-_nobr", "");
+        const matched = match[0];
+        span.textContent = matched;
+        fragment.append(span);
+        lastIndex = index + matched.length;
+      }
+      lastIndex < text.length && fragment.append(text.slice(lastIndex));
+      if (!(node instanceof Text)) {
+        return;
+      }
+      node.replaceWith(fragment);
+      return;
+    }
+    let child = node.firstChild;
+    while (child) {
+      const next = child.nextSibling;
+      this.#applyNonBreakingRules(child);
+      child = next;
+    }
+  }
+  #split(granularity, node = this.#fragment ?? new DocumentFragment()) {
+    let child = node.firstChild;
+    const items = granularity === "word" ? this.#wordElements : this.#charElements;
+    while (child) {
+      const next = child.nextSibling;
+      if (child.nodeType === Node.TEXT_NODE) {
+        const segmenter = this.#getSegmenter(granularity, child.parentNode);
+        if (!segmenter) {
+          return;
+        }
+        const fragment = document.createDocumentFragment();
+        for (const segment of segmenter.segment(
+          (child.textContent ?? "").replace(/[\r\n\t]/g, "").replace(/\s{2,}/g, " ")
+        )) {
+          const span = document.createElement("span");
+          const text = segment.segment;
+          span.textContent = text;
+          text.charCodeAt(0) === 32 && span.setAttribute("data-whitespace", "");
+          span.setAttribute(`data-${granularity}`, text);
+          items.push(span);
+          fragment.append(span);
+        }
+        child.replaceWith(fragment);
+      } else if (granularity === "word" && child instanceof HTMLElement && child.hasAttribute("data-_nobr")) {
+        child.removeAttribute("data-_nobr");
+        const text = child.textContent ?? "";
+        child.setAttribute("data-word", text);
+        items.push(child);
+      } else if (child.hasChildNodes()) {
+        this.#split(granularity, child);
+      }
+      child = next;
+    }
+  }
+  #applyLineBreakingRules(granularity) {
+    let count = 0;
+    const items = granularity === "word" ? this.#wordElements : this.#charElements;
+    let previous = null;
+    while (count < items.length) {
+      const item = items[count];
+      if (!item) {
+        count++;
+        continue;
+      }
+      let text = item.textContent ?? "";
+      if (previous?.textContent?.trim() && LBR_PROHIBIT_START_RE.test(text)) {
+        text = (previous.textContent ?? "") + text;
+        previous.textContent = text;
+        previous.setAttribute(`data-${granularity}`, text);
+        item.remove();
+        items.splice(count, 1);
+        continue;
+      }
+      previous = item;
+      count++;
+    }
+    function concat(index, re) {
+      const item = items[index];
+      if (!item) {
+        return;
+      }
+      const offset = index + 1;
+      let text = item.textContent ?? "";
+      while (offset < items.length) {
+        const next = items[offset];
+        if (!next) {
+          break;
+        }
+        const nextText = next.textContent ?? "";
+        if (!re.test(nextText)) {
+          break;
+        }
+        text += nextText;
+        next.remove();
+        items.splice(offset, 1);
+      }
+      item.textContent = text;
+      item.setAttribute(`data-${granularity}`, text);
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const text = item?.textContent ?? "";
+      if (LBR_PROHIBIT_END_RE.test(text)) {
+        concat(i, LBR_PROHIBIT_END_RE);
+        const next = items[i + 1];
+        if (next?.textContent?.trim()) {
+          const text2 = (items[i]?.textContent ?? "") + next.textContent;
+          next.textContent = text2;
+          next.setAttribute(`data-${granularity}`, text2);
+          items[i]?.remove();
+          items.splice(i, 1);
+          i--;
+        }
+        continue;
+      }
+      LBR_INSEPARATABLE_RE.test(text) && concat(i, LBR_INSEPARATABLE_RE);
+    }
+    if (granularity === "char") {
+      for (const span of (this.#fragment ?? new DocumentFragment()).querySelectorAll("[data-word]:not([data-whitespace])")) {
+        const text = span.textContent;
+        text ? span.setAttribute("data-word", text) : span.remove();
+      }
+    }
+  }
+  #cleanup() {
+    this.#wordElements.length = 0;
+    this.#charElements.length = 0;
+    this.#fragment = null;
+    this.#segmenter = null;
+  }
+  #getSegmenter(granularity, parent) {
+    if (granularity === "word" && this.#settings.wordSegmenter) {
+      const root = parent?.nodeType === Node.ELEMENT_NODE ? parent : this.#rootElement;
+      if (!(root instanceof HTMLElement)) {
+        return this.#segmenter;
+      }
+      const closest = root.closest("[lang]");
+      return new Intl.Segmenter(
+        closest?.lang || document.documentElement.lang || "en",
+        {
+          granularity: "word"
+        }
+      );
+    } else {
+      return this.#segmenter;
+    }
+  }
+};
+
+exports.createSplitter = createSplitter;

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+interface SplitterOptions {
+    concatChar: boolean;
+    noInlineStyle: boolean;
+    noLineBreakingRules: boolean;
+    wordSegmenter: boolean;
+}
+
+declare function createSplitter(root: HTMLElement, options?: Partial<SplitterOptions>): () => void;
+
+export { type SplitterOptions, createSplitter };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+interface SplitterOptions {
+    concatChar: boolean;
+    noInlineStyle: boolean;
+    noLineBreakingRules: boolean;
+    wordSegmenter: boolean;
+}
+
+declare function createSplitter(root: HTMLElement, options?: Partial<SplitterOptions>): () => void;
+
+export { type SplitterOptions, createSplitter };

package/dist/index.js

@@ -0,0 +1,294 @@
+// src/constants.ts
+var NOBR_RE = /[[[\P{scx=Han}]&&[\P{scx=Hang}]&&[\P{scx=Hira}]&&[\P{scx=Kana}]&&[\p{L}]]!-,.->@\[-`\{-~\u00A0]+/gv;
+var LBR_PROHIBIT_START_RE = /^[[[\p{Pd}]--[―]]\p{Pe}\p{Pf}\p{Po}\u00A0々〵〻ぁぃぅぇぉっゃゅょゎゕゖ゛-ゞァィゥェォッャュョヮヵヶー-ヾㇰ-ㇿ]|\p{Pi}/v;
+var LBR_PROHIBIT_END_RE = /[\p{Pf}\p{Pi}\p{Ps}\p{Sc}\u00A0]$/u;
+var LBR_INSEPARATABLE_RE = /[―‥…]/u;
+var VISUALLY_HIDDEN_CSS = "border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;";
+
+// src/options.ts
+function resolveOptions(options) {
+  let {
+    concatChar = false,
+    noInlineStyle = false,
+    noLineBreakingRules = false,
+    wordSegmenter = false
+  } = options;
+  if (typeof concatChar !== "boolean") {
+    console.warn(`Invalid concatChar option. Fallback: false.`);
+    concatChar = false;
+  }
+  if (typeof noInlineStyle !== "boolean") {
+    console.warn(`Invalid noInlineStyle option. Fallback: false.`);
+    noInlineStyle = false;
+  }
+  if (typeof noLineBreakingRules !== "boolean") {
+    console.warn(`Invalid noLineBreakingRules option. Fallback: false.`);
+    noLineBreakingRules = false;
+  }
+  if (typeof wordSegmenter !== "boolean") {
+    console.warn(`Invalid wordSegmenter option. Fallback: false.`);
+    wordSegmenter = false;
+  }
+  return {
+    concatChar,
+    noInlineStyle,
+    noLineBreakingRules,
+    wordSegmenter
+  };
+}
+
+// src/index.ts
+function createSplitter(root, options = {}) {
+  if (!(root instanceof HTMLElement)) {
+    console.warn("Invalid root element");
+    return () => {
+    };
+  }
+  const instance = new Splitter(root, options);
+  return () => instance.destroy();
+}
+var Splitter = class {
+  #rootElement;
+  #settings;
+  #wordElements = [];
+  #charElements = [];
+  #original;
+  #fragment = null;
+  #segmenter = new Intl.Segmenter();
+  #isDestroyed = false;
+  constructor(root, options = {}) {
+    this.#rootElement = root;
+    this.#settings = resolveOptions(options);
+    this.#original = this.#rootElement.innerHTML;
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#rootElement.removeAttribute("data-moji-splitter-initialized");
+    this.#rootElement.innerHTML = this.#original ?? "";
+    const style = this.#rootElement.style;
+    style.removeProperty("--word-count");
+    style.removeProperty("--char-count");
+    this.#cleanup();
+    this.#original = null;
+  }
+  #initialize() {
+    const children = this.#rootElement.childNodes;
+    this.#fragment = new DocumentFragment();
+    for (const child of children) {
+      this.#fragment.appendChild(child.cloneNode(true));
+    }
+    this.#applyNonBreakingRules();
+    this.#split("word");
+    const { concatChar, noInlineStyle, noLineBreakingRules } = this.#settings;
+    !concatChar && !noLineBreakingRules && this.#applyLineBreakingRules("word");
+    this.#split("char");
+    concatChar && !noLineBreakingRules && this.#applyLineBreakingRules("char");
+    this.#charElements.forEach((char, i) => {
+      char.setAttribute("aria-hidden", "true");
+      char.style.setProperty("--char-index", String(i));
+    });
+    if (!noInlineStyle) {
+      const spans = this.#fragment.querySelectorAll(
+        ":is([data-word], [data-char]):not([data-whitespace])"
+      );
+      for (const span of spans) {
+        const { style: style2 } = span;
+        style2.setProperty("display", "inline-block");
+        [...(this.#segmenter ?? new Intl.Segmenter()).segment(span.textContent)].length && style2.setProperty("white-space", "nowrap");
+      }
+    }
+    this.#wordElements.forEach((word, i) => {
+      word.translate = false;
+      word.style.setProperty("--word-index", String(i));
+      if (!word.hasAttribute("data-whitespace")) {
+        const alt = document.createElement("span");
+        alt.setAttribute("data-alt", "");
+        if (!this.#settings.noInlineStyle) {
+          alt.style.cssText += VISUALLY_HIDDEN_CSS;
+        }
+        alt.textContent = word.textContent;
+        word.append(alt);
+      }
+    });
+    this.#rootElement.replaceChildren(...this.#fragment.childNodes);
+    const { style } = this.#rootElement;
+    style.setProperty("--word-count", String(this.#wordElements.length));
+    style.setProperty("--char-count", String(this.#charElements.length));
+    const whitespaces = this.#rootElement.querySelectorAll(
+      ":scope > :not([data-word]) [data-char][data-whitespace]"
+    );
+    for (const whitespace of whitespaces) {
+      if (window.getComputedStyle(whitespace).getPropertyValue("display") !== "inline") {
+        whitespace.innerHTML = " ";
+      }
+    }
+    this.#cleanup();
+    this.#rootElement.setAttribute("data-moji-splitter-initialized", "");
+  }
+  #applyNonBreakingRules(node = this.#fragment ?? new DocumentFragment()) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent;
+      if (!text || !NOBR_RE.test(text)) {
+        return;
+      }
+      NOBR_RE.lastIndex = 0;
+      let lastIndex = 0;
+      const fragment = document.createDocumentFragment();
+      for (const match of text.matchAll(NOBR_RE)) {
+        const index = match.index;
+        index > lastIndex && fragment.append(text.slice(lastIndex, index));
+        const span = document.createElement("span");
+        span.setAttribute("data-_nobr", "");
+        const matched = match[0];
+        span.textContent = matched;
+        fragment.append(span);
+        lastIndex = index + matched.length;
+      }
+      lastIndex < text.length && fragment.append(text.slice(lastIndex));
+      if (!(node instanceof Text)) {
+        return;
+      }
+      node.replaceWith(fragment);
+      return;
+    }
+    let child = node.firstChild;
+    while (child) {
+      const next = child.nextSibling;
+      this.#applyNonBreakingRules(child);
+      child = next;
+    }
+  }
+  #split(granularity, node = this.#fragment ?? new DocumentFragment()) {
+    let child = node.firstChild;
+    const items = granularity === "word" ? this.#wordElements : this.#charElements;
+    while (child) {
+      const next = child.nextSibling;
+      if (child.nodeType === Node.TEXT_NODE) {
+        const segmenter = this.#getSegmenter(granularity, child.parentNode);
+        if (!segmenter) {
+          return;
+        }
+        const fragment = document.createDocumentFragment();
+        for (const segment of segmenter.segment(
+          (child.textContent ?? "").replace(/[\r\n\t]/g, "").replace(/\s{2,}/g, " ")
+        )) {
+          const span = document.createElement("span");
+          const text = segment.segment;
+          span.textContent = text;
+          text.charCodeAt(0) === 32 && span.setAttribute("data-whitespace", "");
+          span.setAttribute(`data-${granularity}`, text);
+          items.push(span);
+          fragment.append(span);
+        }
+        child.replaceWith(fragment);
+      } else if (granularity === "word" && child instanceof HTMLElement && child.hasAttribute("data-_nobr")) {
+        child.removeAttribute("data-_nobr");
+        const text = child.textContent ?? "";
+        child.setAttribute("data-word", text);
+        items.push(child);
+      } else if (child.hasChildNodes()) {
+        this.#split(granularity, child);
+      }
+      child = next;
+    }
+  }
+  #applyLineBreakingRules(granularity) {
+    let count = 0;
+    const items = granularity === "word" ? this.#wordElements : this.#charElements;
+    let previous = null;
+    while (count < items.length) {
+      const item = items[count];
+      if (!item) {
+        count++;
+        continue;
+      }
+      let text = item.textContent ?? "";
+      if (previous?.textContent?.trim() && LBR_PROHIBIT_START_RE.test(text)) {
+        text = (previous.textContent ?? "") + text;
+        previous.textContent = text;
+        previous.setAttribute(`data-${granularity}`, text);
+        item.remove();
+        items.splice(count, 1);
+        continue;
+      }
+      previous = item;
+      count++;
+    }
+    function concat(index, re) {
+      const item = items[index];
+      if (!item) {
+        return;
+      }
+      const offset = index + 1;
+      let text = item.textContent ?? "";
+      while (offset < items.length) {
+        const next = items[offset];
+        if (!next) {
+          break;
+        }
+        const nextText = next.textContent ?? "";
+        if (!re.test(nextText)) {
+          break;
+        }
+        text += nextText;
+        next.remove();
+        items.splice(offset, 1);
+      }
+      item.textContent = text;
+      item.setAttribute(`data-${granularity}`, text);
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const text = item?.textContent ?? "";
+      if (LBR_PROHIBIT_END_RE.test(text)) {
+        concat(i, LBR_PROHIBIT_END_RE);
+        const next = items[i + 1];
+        if (next?.textContent?.trim()) {
+          const text2 = (items[i]?.textContent ?? "") + next.textContent;
+          next.textContent = text2;
+          next.setAttribute(`data-${granularity}`, text2);
+          items[i]?.remove();
+          items.splice(i, 1);
+          i--;
+        }
+        continue;
+      }
+      LBR_INSEPARATABLE_RE.test(text) && concat(i, LBR_INSEPARATABLE_RE);
+    }
+    if (granularity === "char") {
+      for (const span of (this.#fragment ?? new DocumentFragment()).querySelectorAll("[data-word]:not([data-whitespace])")) {
+        const text = span.textContent;
+        text ? span.setAttribute("data-word", text) : span.remove();
+      }
+    }
+  }
+  #cleanup() {
+    this.#wordElements.length = 0;
+    this.#charElements.length = 0;
+    this.#fragment = null;
+    this.#segmenter = null;
+  }
+  #getSegmenter(granularity, parent) {
+    if (granularity === "word" && this.#settings.wordSegmenter) {
+      const root = parent?.nodeType === Node.ELEMENT_NODE ? parent : this.#rootElement;
+      if (!(root instanceof HTMLElement)) {
+        return this.#segmenter;
+      }
+      const closest = root.closest("[lang]");
+      return new Intl.Segmenter(
+        closest?.lang || document.documentElement.lang || "en",
+        {
+          granularity: "word"
+        }
+      );
+    } else {
+      return this.#segmenter;
+    }
+  }
+};
+
+export { createSplitter };

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@y14e/splitter",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.1",
+  "description": "Flexible text splitting utility for CSS animations",
+  "keywords": [
+    "animation",
+    "character",
+    "css",
+    "grapheme",
+    "intl-segmenter",
+    "line-breaking",
+    "kinsoku",
+    "segmenter",
+    "split",
+    "splitter",
+    "splitting",
+    "text",
+    "typescript",
+    "utility",
+    "word"
+  ],
+  "homepage": "https://github.com/y14e/splitter#readme",
+  "bugs": {
+    "url": "https://github.com/y14e/splitter/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/y14e/splitter.git"
+  },
+  "license": "MIT",
+  "author": "Yusuke Kamiyamane",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "bun-types": "latest",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "allowScripts": {
+    "esbuild": true
+  }
+}