animl 0.0.0-stage → 0.1.0

package/modules/text/manifest.js

@@ -0,0 +1,96 @@
+const after = ["paint", "data", "components", "lists"];
+var manifest_default = {
+  ...{
+    name: "text",
+    summary: "Text: styled, data-bound text with fonts, wrapping, alignment and measured layout.",
+    after: [],
+    core: { entry: "core/index.ts", export: "text", svg: "core/svg.ts", svgExport: "textSVG" },
+    web: [
+      { name: "text", budget: 6144 },
+      { name: "text-overflow", budget: 768, over: "text" },
+      { name: "text-canvas", budget: 768, over: "index", heavy: true },
+      { name: "text-hit", budget: 1024, over: "index" },
+      { name: "text-host", budget: 1024, over: "index" },
+      { name: "markup-text", budget: 1024, over: "markup", authoring: true }
+    ],
+    adapters: {
+      "packages/core/src/modules/text/index.ts": "core/index.ts",
+      "packages/core/src/modules/text/svg.ts": "core/svg.ts",
+      "packages/core/src/modules/text/host.ts": "core/host.ts",
+      "packages/core/src/modules/text/hit.ts": "core/hit.ts",
+      "packages/markup/src/text.ts": "markup/index.ts",
+      "packages/web/src/text.ts": "web/index.ts",
+      "packages/web/src/text-overflow.ts": "web/overflow.ts",
+      "packages/web/src/text-canvas.ts": "web/canvas.ts",
+      "packages/web/src/text-host.ts": "web/host.ts",
+      "packages/web/src/text-hit.ts": "web/hit.ts",
+      "packages/web/src/markup-text.ts": "web/markup.ts"
+    },
+    exports: {
+      "core:./text": "packages/core/src/modules/text/index.ts",
+      "core:./text-hit": "packages/core/src/modules/text/hit.ts",
+      "core:./text-host": "packages/core/src/modules/text/host.ts",
+      "markup:./text": "packages/markup/src/text.ts",
+      "web:./text": "packages/web/src/text.ts",
+      "web:./text-overflow": "packages/web/src/text-overflow.ts",
+      "web:./text-canvas": "packages/web/src/text-canvas.ts",
+      "web:./text-hit": "packages/web/src/text-hit.ts",
+      "web:./text-host": "packages/web/src/text-host.ts",
+      "web:./markup-text": "packages/web/src/markup-text.ts"
+    },
+    tests: [
+      "modules/text/test/**/*.test.ts",
+      "modules/a11y/test/core/text-hit.test.ts",
+      "modules/a11y-dom/test/web/text-hit.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts",
+      "packages/markup/test/compile.test.ts",
+      "packages/markup/test/decompile.test.ts"
+    ],
+    conformance: [
+      "text-wrap",
+      "data-bind-text",
+      "data-property-text-style",
+      "host-api-nested-text-run",
+      "host-api-text-run",
+      "text-fit-baseline",
+      "text-fit-layout-measure",
+      "text-font-size",
+      "text-horizontal-alignment",
+      "text-line-spacing",
+      "text-origin",
+      "text-overflow-clipped",
+      "text-overflow-ellipsis",
+      "text-overflow-fit",
+      "text-overflow-fit-font-size",
+      "text-overflow-hidden",
+      "text-overflow-visible",
+      "text-paint",
+      "text-paragraph-spacing",
+      "text-rich-runs",
+      "text-run-list",
+      "text-sizing-auto-height",
+      "text-sizing-auto-width",
+      "text-sizing-fixed",
+      "text-style-reference",
+      "text-tracking",
+      "text-vertical-alignment",
+      "text-vertical-trim",
+      "text-word-break",
+      "text-script-hit-testing",
+      "text-flatten"
+    ],
+    docs: ["spec/SPEC.md", "modules/text/SPEC.md"],
+    markupHook: {
+      slot: "textCompiler",
+      type: "textMarkup",
+      value: "textMarkup",
+      browserName: "text"
+    }
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/text/markup/index.d.ts

@@ -0,0 +1,6 @@
+import type { Compiler } from '../../../packages/markup/src/compile.js';
+import type { Element } from '../../../packages/markup/src/xml.js';
+export declare const textMarkup: {
+    rootChild(compiler: Compiler, c: Element, o: Record<string, unknown>, p: string): boolean;
+    node(compiler: Compiler, _el: Element, children: Element[], o: Record<string, unknown>, p: string): Element[];
+};

package/modules/text/markup/index.js

@@ -0,0 +1,51 @@
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { ptr } from "../../../packages/core/src/diag.js";
+function putStyle(compiler, map, key, value, p, c) {
+  if (Object.hasOwn(map, key))
+    compiler.error(
+      "duplicate-name",
+      ptr(p, key),
+      c.at,
+      V ? "text style declared twice" : "",
+      V ? "use a unique style id" : ""
+    );
+  else compiler.put(map, key, value, p, c.at);
+}
+const textMarkup = {
+  rootChild(compiler, c, o, p) {
+    const form = compiler.elements[c.name];
+    if (!form?.root || !form.mapKey) return false;
+    const built = compiler.build(c, p + "/" + form.root);
+    const key = String(built[form.mapKey]);
+    Reflect.deleteProperty(built, form.mapKey);
+    putStyle(
+      compiler,
+      compiler.container(o, form.root, p, c.at),
+      key,
+      built,
+      p + "/" + form.root,
+      c
+    );
+    return true;
+  },
+  node(compiler, _el, children, o, p) {
+    return children.filter((c) => {
+      const target = compiler.elements[c.name]?.target;
+      if (!target || !target.mapKey && !(target.array && !target.wrapper)) return true;
+      const key = target.default;
+      if (target.mapKey) {
+        const built = compiler.build(c, ptr(p, key));
+        const name = String(built[target.mapKey]);
+        Reflect.deleteProperty(built, target.mapKey);
+        putStyle(compiler, compiler.container(o, key, p, c.at), name, built, ptr(p, key), c);
+      } else {
+        const list = o[key] ??= [];
+        list.push(compiler.build(c, ptr(ptr(p, key), list.length)));
+      }
+      return false;
+    });
+  }
+};
+export {
+  textMarkup
+};

package/modules/text/web/canvas.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/text/web/canvas.js

@@ -0,0 +1,39 @@
+import "../../../packages/web/src/index.js";
+import { cssFont } from "./css.js";
+const Icon = customElements.get("anima-icon");
+(Icon.canvasShapes ??= []).push((ctx, node, brush) => {
+  const data = node.text;
+  if (!data) return false;
+  const { layout } = data;
+  ctx.save();
+  if (layout.clip) {
+    ctx.beginPath();
+    ctx.rect(...layout.clip);
+    ctx.clip();
+  }
+  ctx.scale(layout.scale, layout.scale);
+  for (const line of layout.lines)
+    for (let ci = 0; ci < line.clusters.length; ) {
+      const first = line.clusters[ci], start = ci;
+      while (ci < line.clusters.length && line.clusters[ci].run === first.run) ci++;
+      const text = line.clusters.slice(start, ci).map((c) => c.text).join("");
+      ctx.font = cssFont(first.font);
+      ctx.fontKerning = "normal";
+      ctx.textRendering = "geometricPrecision";
+      ctx.letterSpacing = first.font.tracking + "px";
+      for (const p of data.paints[first.run]) {
+        if (p.kind === "fill") {
+          ctx.fillStyle = brush(p);
+          ctx.fillText(text, first.x / layout.scale, first.y / layout.scale);
+        } else {
+          ctx.strokeStyle = brush(p);
+          ctx.lineWidth = p.width ?? 1;
+          ctx.lineCap = p.cap;
+          ctx.lineJoin = p.join;
+          ctx.strokeText(text, first.x / layout.scale, first.y / layout.scale);
+        }
+      }
+    }
+  ctx.restore();
+  return true;
+});

package/modules/text/web/css.d.ts

@@ -0,0 +1,2 @@
+import type { FontSpec } from '../core/measure.js';
+export declare const cssFont: (f: FontSpec) => string;

package/modules/text/web/css.js

@@ -0,0 +1,4 @@
+const cssFont = (f) => `${f.style} ${f.weight} ${f.size}px ${f.family}`;
+export {
+  cssFont
+};

package/modules/text/web/hit.d.ts

@@ -0,0 +1,9 @@
+import '../../../packages/web/src/index.js';
+import { type TextBox } from '../core/hit.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        textHit(node: string, x: number, y: number): number | undefined;
+        textCaret(node: string, index: number): TextBox | undefined;
+        textSelection(node: string, start: number, end: number): TextBox[] | undefined;
+    }
+}

package/modules/text/web/hit.js

@@ -0,0 +1,22 @@
+import "../../../packages/web/src/index.js";
+import { installTextHit, textHit, textSelection, textSource } from "../core/hit.js";
+const Icon = customElements.get("anima-icon");
+for (const key of ["textHit", "textCaret", "textSelection"])
+  Object.defineProperty(Icon.prototype, key, {
+    configurable: true,
+    value(node, a, b) {
+      const p = this.player, text2 = Icon.modules.get("text");
+      const i = p?.model.ids.get(node);
+      if (!p || !text2 || i === void 0 || String(p.model.nodes[i].type) !== "text") return;
+      const layout = text2.textLayout(p, i), source = textSource(text2, p, i);
+      return key === "textHit" ? textHit(layout, source, a, b) : key === "textCaret" ? textSelection(layout, source, a)[0] : textSelection(layout, source, a, b);
+    }
+  });
+const previous = Icon.eventHook;
+Icon.eventHook = (icon, kind, info) => {
+  previous?.(icon, kind, info);
+  const text2 = Icon.modules.get("text");
+  if (text2 && !text2.hitTest) installTextHit(text2);
+};
+const text = Icon.modules.get("text");
+if (text) installTextHit(text);

package/modules/text/web/host.d.ts

@@ -0,0 +1,6 @@
+import '../../../packages/web/src/index.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        textRun(node: string, run: string | number, value?: string): string | undefined;
+    }
+}

package/modules/text/web/host.js

@@ -0,0 +1,14 @@
+import "../../../packages/web/src/index.js";
+import { createTextRunAccess } from "../core/host.js";
+const Icon = customElements.get("anima-icon");
+Object.defineProperty(Icon.prototype, "textRun", {
+  configurable: true,
+  value(node, run, value) {
+    const text = Icon.modules.get("text");
+    if (!this.player || !text) return;
+    const result = createTextRunAccess(text)(this.player, node, run, value);
+    if (value !== void 0)
+      this.attributeChangedCallback("renderer", null, this.getAttribute("renderer"));
+    return result;
+  }
+});

package/modules/text/web/index.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/index.js';

package/modules/text/web/index.js

@@ -0,0 +1,72 @@
+import { text } from "../core/index.js";
+import { registerTextMeasurer } from "../core/measure.js";
+import { textSVG, textElements, textAttrs } from "../core/svg.js";
+import { browserMeasurer } from "./measure.js";
+import { cssSlots } from "../../../packages/core/src/svg.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(text);
+Icon.registerSVGBackend("text", textSVG);
+registerTextMeasurer(browserMeasurer());
+let previous = Icon.orderSVG;
+const signatures = /* @__PURE__ */ new WeakMap();
+const paints = /* @__PURE__ */ new WeakMap();
+const order = (frame, elements) => {
+  previous?.(frame, elements);
+  for (const [el, dom] of elements) {
+    if (el.role !== "module:text") continue;
+    const data = frame.nodes[el.node].text;
+    const paint = data && JSON.stringify(data.paints);
+    if (!data || signatures.get(dom) === data.layout && paints.get(dom) === paint) continue;
+    const svg = dom.closest("svg");
+    if (!svg) continue;
+    const id = signatures.get(svg) ?? "text-" + serial++;
+    signatures.set(svg, id);
+    const make = (e) => {
+      const d = document.createElementNS("http://www.w3.org/2000/svg", e.tag);
+      const attrs = {};
+      textAttrs(frame, e, cssSlots, id, attrs);
+      for (const [k, v] of Object.entries(attrs)) if (v !== null) d.setAttribute(k, v);
+      if (e.text !== void 0) d.textContent = e.text;
+      else d.append(...e.kids.map(make));
+      return d;
+    };
+    dom.replaceChildren(...textElements(frame, el.node).map(make));
+    signatures.set(dom, data.layout);
+    paints.set(dom, paint);
+  }
+};
+Object.defineProperty(Icon, "orderSVG", {
+  configurable: true,
+  get: () => order,
+  set: (next) => {
+    if (next !== order) previous = next;
+  }
+});
+let serial = 0;
+const previousEvent = Icon.eventHook;
+Icon.eventHook = (icon, kind, info) => {
+  previousEvent?.(icon, kind, info);
+  if (kind === "draw" && icon.player && !signatures.has(icon)) {
+    signatures.set(icon, true);
+    active.add(new WeakRef(icon));
+  }
+};
+const active = /* @__PURE__ */ new Set();
+document.fonts?.addEventListener(
+  "loadingdone",
+  () => (
+    // Next task: every listener (including measurer cache clears) has run and the face is usable.
+    setTimeout(() => {
+      registerTextMeasurer();
+      for (const ref of active) {
+        const icon = ref.deref();
+        if (!icon) active.delete(ref);
+        else if (icon.player) {
+          text.invalidateText(icon.player);
+          icon.attributeChangedCallback("renderer", null, icon.getAttribute("renderer"));
+        }
+      }
+    })
+  )
+);

package/modules/text/web/markup.d.ts

@@ -0,0 +1 @@
+import '../../../packages/web/src/markup.js';

package/modules/text/web/markup.js

@@ -0,0 +1,10 @@
+import "../../../packages/web/src/markup.js";
+import { structuralForms, paintMarkup } from "../../paint/markup/index.js";
+import { textMarkup } from "../markup/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerMarkup("paint", {
+  ...Icon.markupHooks.paint,
+  ...structuralForms,
+  nodes: paintMarkup.nodes
+});
+Icon.registerMarkup("text", textMarkup);

package/modules/text/web/measure.d.ts

@@ -0,0 +1,4 @@
+import { type TextMeasurer } from '../core/measure.js';
+export { cssFont } from './css.js';
+/** Prefix measurement retains the browser's kerning and ligature widths. Cache is bounded. */
+export declare function browserMeasurer(): TextMeasurer;

package/modules/text/web/measure.js

@@ -0,0 +1,40 @@
+import { graphemes } from "../core/measure.js";
+import { cssFont } from "./css.js";
+import { cssFont as cssFont2 } from "./css.js";
+function browserMeasurer() {
+  const context = document.createElement("canvas").getContext("2d");
+  const cache = /* @__PURE__ */ new Map();
+  document.fonts?.addEventListener("loadingdone", () => cache.clear());
+  return {
+    measure(font, text) {
+      const key = JSON.stringify([font, text]);
+      let result = cache.get(key);
+      if (result) return result;
+      context.font = cssFont(font);
+      context.fontKerning = "normal";
+      context.textRendering = "geometricPrecision";
+      const advances = Float64Array.from(
+        [...graphemes.segment(text)],
+        (g) => context.measureText(text.slice(0, g.index + g.segment.length)).width
+      );
+      const scale = font.size / 1e3;
+      context.font = cssFont({ ...font, size: 1e3 });
+      const metrics = context.measureText("Hx");
+      result = {
+        advances,
+        ascent: (metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent) * scale,
+        descent: (metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent) * scale,
+        capHeight: context.measureText("H").actualBoundingBoxAscent * scale,
+        xHeight: context.measureText("x").actualBoundingBoxAscent * scale,
+        lineGap: 0
+      };
+      if (cache.size >= 512) cache.clear();
+      cache.set(key, result);
+      return result;
+    }
+  };
+}
+export {
+  browserMeasurer,
+  cssFont2 as cssFont
+};

package/modules/text/web/overflow.d.ts

@@ -0,0 +1 @@
+import './index.js';

package/modules/text/web/overflow.js

@@ -0,0 +1,4 @@
+import "./index.js";
+import { overflowText } from "../core/overflow.js";
+const Icon = customElements.get("anima-icon");
+Icon.modules.get("text").overflow = overflowText;

package/modules/text-effects/core/evaluate.d.ts

@@ -0,0 +1,52 @@
+import type { DrawColor } from '../../../packages/core/src/draw.js';
+import { type Mat } from '../../../packages/core/src/geom.js';
+import type { TextDrawing } from '../../text/core/index.js';
+import type { Cluster } from '../../text/core/layout.js';
+export interface Range {
+    start?: number;
+    end?: number;
+    units?: 'glyphs' | 'words' | 'lines';
+    falloff?: number;
+    ease?: string;
+    combine?: string;
+    run?: string;
+}
+export interface Effect extends Range {
+    x?: number;
+    y?: number;
+    rotate?: number;
+    scaleX?: number;
+    scaleY?: number;
+    opacity?: number;
+    originX?: number;
+    originY?: number;
+    amount?: number;
+    axes?: Record<string, number>;
+    followPath?: string;
+    pathOffset?: number;
+    ranges?: Range[];
+}
+export interface EffectCluster extends Cluster {
+    matrix: Mat;
+    alpha: number;
+}
+export type BackgroundStyle = string | {
+    color: string;
+    radius?: number;
+};
+export interface Background {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: DrawColor;
+    radius?: number;
+}
+export interface EffectDrawing extends TextDrawing {
+    effected?: boolean;
+    direction?: 'auto' | 'ltr' | 'rtl';
+    backgrounds?: Background[];
+}
+/** Internal polyline arc-length sampler. Cubics use core's fixed 12-subdivision flattening. */
+export declare function pathSampler(path: string): (distance: number) => [number, number, number];
+export declare function applyEffects(data: TextDrawing, effects: Effect[], background?: Record<string, BackgroundStyle>): EffectDrawing;

package/modules/text-effects/core/evaluate.js

@@ -0,0 +1,144 @@
+import { parseEase } from "../../../packages/core/src/ease.js";
+import { flatten, parsePath } from "../../../packages/core/src/path.js";
+import { mul, IDENTITY } from "../../../packages/core/src/geom.js";
+import { words } from "../../text/core/measure.js";
+function pathSampler(path) {
+  const segments = [];
+  let length = 0;
+  for (const { pts, closed } of flatten(parsePath(path))) {
+    const points = closed ? [...pts, pts[0], pts[1]] : pts;
+    for (let i = 2; i < points.length; i += 2) {
+      const x = points[i - 2], y = points[i - 1], dx = points[i] - x, dy = points[i + 1] - y;
+      const size = Math.hypot(dx, dy);
+      if (size) {
+        segments.push([length, size, x, y, dx, dy]);
+        length += size;
+      }
+    }
+  }
+  return (distance) => {
+    const at = Math.max(0, Math.min(length, distance));
+    const s = segments.find((s2) => at <= s2[0] + s2[1]) ?? segments.at(-1);
+    if (!s) return [0, 0, 0];
+    const t = (at - s[0]) / s[1];
+    return [s[2] + s[4] * t, s[3] + s[5] * t, Math.atan2(s[5], s[4])];
+  };
+}
+function applyEffects(data, effects, background = {}) {
+  const all = data.layout.lines.flatMap((l) => l.clusters);
+  const effectsByRange = /* @__PURE__ */ new Map();
+  const weights = (r) => {
+    let result = effectsByRange.get(r);
+    if (result) return result;
+    result = /* @__PURE__ */ new Map();
+    effectsByRange.set(r, result);
+    const scoped = all.filter((c) => r.run === void 0 || data.runs[c.run]?.id === r.run);
+    let sourceOffset = 0, scopedOffset = 0;
+    const offsets = data.runs.map((run) => {
+      const selected = r.run === void 0 || run.id === r.run;
+      const offset = scopedOffset - sourceOffset;
+      sourceOffset += run.text.length;
+      if (selected) scopedOffset += run.text.length;
+      return offset;
+    });
+    const string = data.runs.filter((run) => r.run === void 0 || run.id === r.run).map((r2) => r2.text).join("");
+    const segments = [...words.segment(string)];
+    const ease = parseEase(r.ease ?? "linear");
+    const lineIds = /* @__PURE__ */ new Map();
+    scoped.forEach((c, i) => {
+      const li = data.layout.lines.findIndex((l) => l.clusters.includes(c));
+      if (!lineIds.has(li)) lineIds.set(li, lineIds.size);
+      const offset = c.index + offsets[c.run];
+      const word = segments.findIndex(
+        (w2) => offset >= w2.index && offset < w2.index + w2.segment.length
+      );
+      const wi = word < 0 || !segments[word].isWordLike ? -1 : segments.slice(0, word).filter((w2) => w2.isWordLike).length;
+      const unit = r.units === "lines" ? lineIds.get(li) : r.units === "words" ? wi : i;
+      let w = unit < 0 ? 0 : unit >= (r.start ?? 0) && unit < (r.end ?? Infinity) ? 1 : 0;
+      if (unit >= 0 && r.falloff) {
+        const distance = Math.max((r.start ?? 0) - unit, unit - (r.end ?? Infinity) + 1, 0);
+        w = Math.max(0, 1 - distance / r.falloff);
+      }
+      result.set(c, typeof ease === "function" ? Math.max(0, Math.min(1, ease(w))) : w);
+    });
+    return result;
+  };
+  const paths = effects.map((e) => e.followPath ? pathSampler(e.followPath) : void 0);
+  const layout = {
+    ...data.layout,
+    lines: data.layout.lines.map((line) => ({
+      ...line,
+      clusters: line.clusters.map((c) => {
+        const out = {
+          ...c,
+          matrix: IDENTITY,
+          alpha: 1,
+          font: { ...c.font, axes: { ...c.font.axes } }
+        };
+        effects.forEach((e, ei) => {
+          let w = 0;
+          for (const [ri, r] of [e, ...e.ranges ?? []].entries()) {
+            const v = weights(r).get(c) ?? 0;
+            w = ri === 0 ? v : r.combine === "intersect" ? w * v : r.combine === "subtract" ? w * (1 - v) : r.combine === "replace" ? v : r.combine === "max" ? Math.max(w, v) : Math.min(1, w + v);
+          }
+          w *= e.amount ?? 1;
+          if (!w) return;
+          let x = (e.x ?? 0) * w, y = (e.y ?? 0) * w, angle = (e.rotate ?? 0) * Math.PI / 180 * w;
+          if (paths[ei]) {
+            const [px, py, tangent] = paths[ei](c.x + (e.pathOffset ?? 0));
+            x += (px - c.x) * w;
+            y += (py - c.y) * w;
+            angle += tangent * w;
+          }
+          const sx = 1 + ((e.scaleX ?? 1) - 1) * w, sy = 1 + ((e.scaleY ?? 1) - 1) * w;
+          const a = Math.cos(angle) * sx, b = Math.sin(angle) * sx, cc = -Math.sin(angle) * sy, d = Math.cos(angle) * sy;
+          const ox = c.x + (e.originX ?? 0), oy = c.y + (e.originY ?? 0);
+          out.matrix = mul(out.matrix, [
+            a,
+            b,
+            cc,
+            d,
+            x + ox - a * ox - cc * oy,
+            y + oy - b * ox - d * oy
+          ]);
+          out.alpha *= 1 + ((e.opacity ?? 1) - 1) * w;
+          for (const [axis, target] of Object.entries(e.axes ?? {})) {
+            const rest = out.font.axes[axis] ?? (axis === "wght" ? c.font.weight : 0);
+            out.font.axes[axis] = rest + (target - rest) * w;
+          }
+        });
+        return out;
+      })
+    }))
+  };
+  const backgrounds = [];
+  for (const line of data.layout.lines) {
+    for (let i = 0; i < line.clusters.length; ) {
+      const c = line.clusters[i], start = i;
+      while (i < line.clusters.length && line.clusters[i].run === c.run) i++;
+      const style = background[data.runs[c.run]?.id ?? String(c.run)];
+      const color = typeof style === "string" ? style : style?.color;
+      if (color) {
+        let x = c.x, end = c.x;
+        for (let j = start; j < i; j++) {
+          const g = line.clusters[j];
+          x = Math.min(x, g.x, g.x + g.advance);
+          end = Math.max(end, g.x, g.x + g.advance);
+        }
+        backgrounds.push({
+          x,
+          y: c.y - line.ascent * data.layout.scale,
+          width: end - x,
+          height: (line.ascent + line.descent) * data.layout.scale,
+          color,
+          radius: typeof style === "object" ? style.radius : void 0
+        });
+      }
+    }
+  }
+  return { ...data, layout, effected: effects.length > 0, backgrounds };
+}
+export {
+  applyEffects,
+  pathSampler
+};

package/modules/text-effects/core/index.d.ts

@@ -0,0 +1,4 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+export { applyEffects } from './evaluate.js';
+export type { EffectDrawing, EffectCluster } from './evaluate.js';
+export declare const textEffects: Module;