animl 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,127 @@
+import { ptr } from "../../../packages/core/src/diag.js";
+import { nodePointer } from "../../components/core/node-pointer.js";
+import { parseEase } from "../../../packages/core/src/ease.js";
+import { drawColor } from "../../../packages/core/src/draw.js";
+import { parseHex } from "../../../packages/core/src/color.js";
+import { parsePath } from "../../../packages/core/src/path.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { after } from "../manifest.js";
+import { entries, effectShape, rangeShape } from "./registry.js";
+import { applyEffects } from "./evaluate.js";
+import { applyEffects as applyEffects2 } from "./evaluate.js";
+const textEffects = {
+  name: "texteffects",
+  after,
+  entries,
+  init(registry) {
+    return { ...textEffects, entries: registry.has("text") ? entries : [] };
+  },
+  model(node, key) {
+    const axis = /^effects\.(\d+)\.axes\.([\x20-\x7e]{4})$/.exec(key);
+    if (String(node.type) === "text" && axis && node.raw.effects?.[+axis[1]]?.axes?.[axis[2]] !== void 0)
+      return {
+        prop: { type: "number", feature: "texteffects" },
+        rest: node.raw.effects[+axis[1]].axes[axis[2]]
+      };
+    const m = /^effects\.(\d+)\.(?:(ranges)\.(\w+)\.)?(\w+)$/.exec(key);
+    if (String(node.type) !== "text" || !m) return;
+    let e = node.raw.effects?.[+m[1]];
+    const field = m[4];
+    if (m[2] === "ranges") e = e?.ranges?.[Number(m[3])];
+    const shape = (m[2] ? rangeShape : effectShape).p[field];
+    if (!e || shape?.k !== "num") return;
+    return {
+      prop: { type: "number", min: shape.min, max: shape.max, feature: "texteffects" },
+      // An omitted range end stays unbounded at rest (spec: omitted fields keep their defaults);
+      // a finite bound keeps crossfades from rest NaN-free.
+      rest: e[field] ?? (field === "end" ? Number.MAX_SAFE_INTEGER : ["scaleX", "scaleY", "opacity", "amount"].includes(field) ? 1 : 0)
+    };
+  },
+  resolve(model, d) {
+    for (const [i, node] of model.nodes.entries()) {
+      if (String(node.type) !== "text") continue;
+      const at = nodePointer(model, i);
+      const fail = (p, code, message, hint) => d.err(code, at + p, V && message, V && hint);
+      const run = (id) => Array.isArray(node.raw.runs) && node.raw.runs.some((r) => r.id === id);
+      const range = (r, p) => {
+        if ((r.end ?? Infinity) < (r.start ?? 0))
+          fail(p + "/end", "text-range", "range end precedes start", "use start \u2264 end");
+        if (r.run !== void 0 && typeof node.raw.runs !== "string" && !run(r.run))
+          fail(p + "/run", "text-effect-run", "unknown run id", "name an authored run id");
+        if (r.ease && typeof parseEase(r.ease) !== "function")
+          fail(
+            p + "/ease",
+            "bad-ease",
+            "invalid range easing",
+            "use a core easing such as linear or cubic(0.2,0,0.8,1)"
+          );
+      };
+      for (const [id, style] of Object.entries(node.raw.background ?? {})) {
+        const color = typeof style === "string" ? style : style.color;
+        if (typeof node.raw.runs !== "string" && !run(id) && !(String(+id) === id && node.raw.runs[+id]))
+          fail(
+            ptr("/background", id),
+            "text-effect-run",
+            "unknown background run",
+            "name a run id or its decimal index"
+          );
+        if (color !== "currentColor" && !model.colors[color] && !parseHex(color))
+          fail(
+            ptr("/background", id),
+            "text-background-color",
+            "invalid background color",
+            "use a hex color, currentColor or declared color slot"
+          );
+      }
+      (node.raw.effects ?? []).forEach((e, ei) => {
+        const p = "/effects/" + ei;
+        range(e, p);
+        e.ranges?.forEach((r, ri) => range(r, p + "/ranges/" + ri));
+        if (e.followPath)
+          try {
+            if (parsePath(e.followPath).some((p2) => !p2.segs.every(Number.isFinite))) throw Error();
+          } catch {
+            fail(p + "/followPath", "text-effect-path", "invalid follow path", "use SVG path data");
+          }
+      });
+    }
+  },
+  draw: {
+    frame(p, i, node) {
+      const data = node.text;
+      if (!data) return;
+      const raw = p.model.nodes[i].raw;
+      if (!raw.effects && !raw.background && !raw.direction) return;
+      const read = (e, prefix) => Object.fromEntries(
+        [
+          .../* @__PURE__ */ new Set([
+            ...Object.keys(e),
+            ...Object.keys(effectShape.p).filter((k) => effectShape.p[k]?.k === "num")
+          ])
+        ].map((k) => {
+          const v = e[k];
+          return [
+            k,
+            Array.isArray(v) ? v.map((r, ri) => read(r, `${prefix}.${k}.${ri}`)) : k === "axes" && v ? Object.fromEntries(
+              Object.entries(v).map(([axis, rest]) => [
+                axis,
+                p.prop(i, `${prefix}.axes.${axis}`) ?? rest
+              ])
+            ) : p.prop(i, `${prefix}.${k}`) ?? v
+          ];
+        })
+      );
+      const effects = (raw.effects ?? []).map(
+        (e, ei) => read(e, `effects.${ei}`)
+      );
+      const drawing = applyEffects(data, effects, raw.background);
+      drawing.direction = raw.direction;
+      for (const b of drawing.backgrounds ?? []) b.color = drawColor(p, b.color);
+      node.text = drawing;
+    }
+  }
+};
+export {
+  applyEffects2 as applyEffects,
+  textEffects
+};

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

@@ -0,0 +1,5 @@
+import type { ModuleEntry } from '../../../packages/core/src/modules.js';
+import type { ObjShape } from '../../../packages/core/src/registry.js';
+export declare const rangeShape: ObjShape;
+export declare const effectShape: ObjShape;
+export declare const entries: ModuleEntry[];

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

@@ -0,0 +1,60 @@
+const n = (min, max) => ({ k: "num", min, max });
+const s = (of, markup) => ({ k: "str", of, markup });
+const rangeShape = {
+  k: "obj",
+  element: "text-range",
+  p: {
+    start: n(0),
+    end: n(0),
+    units: s(["glyphs", "words", "lines"]),
+    falloff: n(0),
+    ease: s(),
+    combine: s(["add", "intersect", "subtract", "max", "replace"]),
+    run: s()
+  }
+};
+const effectShape = {
+  k: "obj",
+  element: "text-effect",
+  p: {
+    ...rangeShape.p,
+    x: n(),
+    y: n(),
+    rotate: n(),
+    scaleX: { ...n(), markup: "scale-x" },
+    scaleY: { ...n(), markup: "scale-y" },
+    opacity: n(0, 1),
+    amount: n(0, 1),
+    originX: { ...n(), markup: "origin-x" },
+    originY: { ...n(), markup: "origin-y" },
+    axes: { k: "map", of: n(), key: /^[\x20-\x7e]{4}$/ },
+    followPath: { ...s(), markup: "follow-path" },
+    pathOffset: { ...n(), markup: "path-offset" },
+    ranges: { k: "arr", of: rangeShape }
+  }
+};
+const entries = [
+  {
+    target: "text",
+    shapes: {
+      effects: { k: "arr", of: effectShape, markup: "text-effects" },
+      background: {
+        k: "map",
+        of: { k: "alt", of: [s(), { k: "obj", req: ["color"], p: { color: s(), radius: n(0) } }] }
+      },
+      direction: s(["auto", "ltr", "rtl"])
+    },
+    elements: {
+      "text-effect": {
+        shape: effectShape,
+        target: { attribute: "target", default: "effects", choices: ["effects"], array: true }
+      },
+      "text-range": { shape: rangeShape }
+    }
+  }
+];
+export {
+  effectShape,
+  entries,
+  rangeShape
+};

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

@@ -0,0 +1,5 @@
+import type { SVGBackend, El, Attrs, Paint } from '../../../packages/core/src/svg.js';
+import type { DrawFrame } from '../../../packages/core/src/draw.js';
+export declare function effectElements(f: DrawFrame, node: number): El[];
+export declare function effectAttrs(f: DrawFrame, el: El, a: Attrs, paint: Paint): void;
+export declare const textEffectsSVG: SVGBackend;

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

@@ -0,0 +1,69 @@
+import { paintColor } from "../../../packages/core/src/svg.js";
+import { fmt } from "../../../packages/core/src/draw.js";
+import { textElements } from "../../text/core/svg.js";
+function effectElements(f, node) {
+  const els = textElements(f, node);
+  const data = f.nodes[node].text;
+  const content = els.at(-1);
+  if (data.effected)
+    content.kids.forEach((line, li) => {
+      line.tag = "g";
+      line.kids = data.layout.lines[li].clusters.map((c, ci) => ({
+        tag: "text",
+        role: "module:text-run",
+        node,
+        index: li,
+        key: String(ci),
+        text: c.text,
+        kids: []
+      }));
+    });
+  content.kids.unshift(
+    ...(data.backgrounds ?? []).map((_b, index) => ({
+      tag: "rect",
+      role: "module:text-background",
+      node,
+      index,
+      kids: []
+    }))
+  );
+  return els;
+}
+function effectAttrs(f, el, a, paint) {
+  const data = f.nodes[el.node].text;
+  if (!data) return;
+  if (el.role === "module:text-line" && data.direction) {
+    a.direction = data.direction === "auto" ? null : data.direction;
+    a["unicode-bidi"] = data.direction === "auto" ? "plaintext" : "embed";
+  }
+  if (el.role === "module:text-background") {
+    const b = data.backgrounds[el.index];
+    Object.assign(a, {
+      x: fmt(b.x),
+      y: fmt(b.y),
+      width: fmt(b.width),
+      height: fmt(b.height),
+      fill: paintColor(b.color, paint),
+      rx: fmt(b.radius ?? 0)
+    });
+  }
+  if (el.role !== "module:text-run" || !data.effected) return;
+  const c = data.layout.lines[el.index].clusters[+el.key];
+  const s = data.layout.scale;
+  a.transform = `matrix(${c.matrix.map(fmt).join(" ")})` + (s === 1 ? "" : ` scale(${fmt(s)})`);
+  a.opacity = fmt(c.alpha);
+  a.style = (a.style ? a.style + ";" : "") + "font-variation-settings:" + Object.entries(c.font.axes ?? {}).map(([k, v]) => `"${k}" ${v}`).join(",");
+}
+const textEffectsSVG = {
+  attrs(f, el, paint, _id, a) {
+    if (!el.role.startsWith("module:text")) return;
+    if (el.role === "module:text" && f.nodes[el.node].text?.backgrounds)
+      el.kids = effectElements(f, el.node);
+    effectAttrs(f, el, a, paint);
+  }
+};
+export {
+  effectAttrs,
+  effectElements,
+  textEffectsSVG
+};

package/modules/text-effects/manifest.d.ts

@@ -0,0 +1,42 @@
+export declare const after: string[];
+declare const _default: {
+    after: string[];
+    name: string;
+    summary: string;
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: ({
+        name: string;
+        budget: number;
+        over: string;
+        authoring?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        authoring: boolean;
+    })[];
+    adapters: {
+        'packages/core/src/modules/text-effects/index.ts': string;
+        'packages/core/src/modules/text-effects/svg.ts': string;
+        'packages/markup/src/text-effects.ts': string;
+        'packages/web/src/text-effects.ts': string;
+        'packages/web/src/texteffects.ts': string;
+        'packages/web/src/markup-text-effects.ts': string;
+    };
+    exports: {
+        'core:./text-effects': string;
+        'markup:./text-effects': string;
+        'web:./text-effects': string;
+        'web:./texteffects': string;
+        'web:./markup-text-effects': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/text-effects/manifest.js

@@ -0,0 +1,61 @@
+const after = ["text"];
+var manifest_default = {
+  ...{
+    name: "text-effects",
+    summary: "Text effects: per-character modifiers (offset, opacity, follow path) over animated ranges.",
+    core: {
+      entry: "core/index.ts",
+      export: "textEffects",
+      svg: "core/svg.ts",
+      svgExport: "textEffectsSVG"
+    },
+    web: [
+      { name: "text-effects", budget: 4096, over: "text" },
+      { name: "markup-text-effects", budget: 256, over: "markup-text", authoring: true }
+    ],
+    adapters: {
+      "packages/core/src/modules/text-effects/index.ts": "core/index.ts",
+      "packages/core/src/modules/text-effects/svg.ts": "core/svg.ts",
+      "packages/markup/src/text-effects.ts": "markup/index.ts",
+      "packages/web/src/text-effects.ts": "web/index.ts",
+      "packages/web/src/texteffects.ts": "web/index.ts",
+      "packages/web/src/markup-text-effects.ts": "web/markup.ts"
+    },
+    exports: {
+      "core:./text-effects": "packages/core/src/modules/text-effects/index.ts",
+      "markup:./text-effects": "packages/markup/src/text-effects.ts",
+      "web:./text-effects": "packages/web/src/text-effects.ts",
+      "web:./texteffects": "packages/web/src/texteffects.ts",
+      "web:./markup-text-effects": "packages/web/src/markup-text-effects.ts"
+    },
+    tests: [
+      "modules/text-effects/test/**/*.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-modifier-translation",
+      "text-modifier-rotation",
+      "text-modifier-scale",
+      "text-modifier-opacity",
+      "text-modifier-origin",
+      "text-modifier-variation",
+      "text-modifier-follow-path",
+      "text-range-units",
+      "text-range-falloff",
+      "text-range-easing",
+      "text-range-combine",
+      "text-range-run",
+      "text-background",
+      "text-script-direction"
+    ],
+    docs: ["spec/SPEC.md", "modules/text-effects/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1 @@
+export {};

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

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

package/modules/text-effects/web/index.js

@@ -0,0 +1,119 @@
+import { effectElements, effectAttrs, textEffectsSVG } from "../core/svg.js";
+import { textAttrs } from "../../text/core/svg.js";
+import { cssSlots } from "../../../packages/core/src/svg.js";
+import "../../text/web/index.js";
+import { textEffects } from "../core/index.js";
+import { applyCanvasFont } from "../../fonts/web/settings.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(textEffects);
+Icon.registerSVGBackend("text-effects", textEffectsSVG);
+const roots = /* @__PURE__ */ new WeakMap();
+let serial = 0, previousOrder = Icon.orderSVG;
+const order = (frame, elements) => {
+  previousOrder?.(frame, elements);
+  for (const [el, dom] of elements) {
+    if (el.role !== "module:text" || !frame.nodes[el.node].text?.backgrounds)
+      continue;
+    const icon = dom.getRootNode().host;
+    if (!icon) continue;
+    let map = roots.get(icon);
+    if (!map) roots.set(icon, map = /* @__PURE__ */ new Map());
+    const old = map.get(dom);
+    map.set(dom, {
+      frame,
+      node: el.node,
+      id: old?.id ?? "effect-" + serial++ + "-",
+      layout: old?.layout,
+      first: old?.first
+    });
+  }
+};
+Object.defineProperty(Icon, "orderSVG", {
+  configurable: true,
+  get: () => order,
+  set: (next) => {
+    if (next !== order) previousOrder = next;
+  }
+});
+const previousEvent = Icon.eventHook;
+Icon.eventHook = (icon, kind, info) => {
+  if (kind === "draw")
+    for (const [dom, root] of roots.get(icon) ?? []) {
+      if (dom.getRootNode() !== icon.shadowRoot) {
+        roots.get(icon).delete(dom);
+        continue;
+      }
+      const data = root.frame.nodes[root.node].text;
+      if (root.layout === data.layout && root.first === dom.firstChild) continue;
+      const make = (el) => {
+        const d = document.createElementNS("http://www.w3.org/2000/svg", el.tag);
+        const attrs = {};
+        textAttrs(root.frame, el, cssSlots, root.id, attrs);
+        effectAttrs(root.frame, el, attrs, cssSlots);
+        for (const [k, v] of Object.entries(attrs)) if (v !== null) d.setAttribute(k, v);
+        if (el.text !== void 0) d.textContent = el.text;
+        else d.append(...el.kids.map(make));
+        return d;
+      };
+      dom.replaceChildren(...effectElements(root.frame, root.node).map(make));
+      root.layout = data.layout;
+      root.first = dom.firstChild;
+    }
+  previousEvent?.(icon, kind, info);
+};
+(Icon.canvasShapes ??= []).unshift((ctx, node, brush) => {
+  const data = node.text;
+  if (!data?.backgrounds) return false;
+  const { layout } = data;
+  ctx.save();
+  if (layout.clip) {
+    ctx.beginPath();
+    ctx.rect(...layout.clip);
+    ctx.clip();
+  }
+  for (const b of data.backgrounds) {
+    ctx.fillStyle = brush({ kind: "fill", color: b.color, visible: true });
+    ctx.beginPath();
+    ctx.roundRect(b.x, b.y, b.width, b.height, Math.min(b.radius ?? 0, b.width / 2, b.height / 2));
+    ctx.fill();
+  }
+  const canvas = ctx.canvas, dir = canvas.dir, content = canvas.textContent;
+  canvas.dir = data.direction ?? "auto";
+  canvas.textContent = data.runs.map((r) => r.text).join("");
+  ctx.direction = canvas.matches(":dir(rtl)") ? "rtl" : "ltr";
+  canvas.dir = dir;
+  canvas.textContent = content;
+  ctx.scale(layout.scale, layout.scale);
+  for (const line of layout.lines)
+    for (let ci = 0; ci < line.clusters.length; ) {
+      const c = line.clusters[ci];
+      const start = ci++;
+      if (!data.effected)
+        while (ci < line.clusters.length && line.clusters[ci].run === c.run) ci++;
+      const string = line.clusters.slice(start, ci).map((c2) => c2.text).join("");
+      ctx.save();
+      if (data.effected) {
+        const [a, b, cc, d, x, y] = c.matrix;
+        ctx.transform(a, b, cc, d, x / layout.scale, y / layout.scale);
+        ctx.globalAlpha *= c.alpha;
+      }
+      applyCanvasFont(ctx, c.font);
+      ctx.textRendering = "geometricPrecision";
+      ctx.letterSpacing = c.font.tracking + "px";
+      for (const p of data.paints[c.run]) {
+        if (p.kind === "fill") {
+          ctx.fillStyle = brush(p);
+          ctx.fillText(string, c.x / layout.scale, c.y / layout.scale);
+        } else {
+          ctx.strokeStyle = brush(p);
+          ctx.lineWidth = p.width ?? 1;
+          ctx.lineCap = p.cap;
+          ctx.lineJoin = p.join;
+          ctx.strokeText(string, c.x / layout.scale, c.y / layout.scale);
+        }
+      }
+      ctx.restore();
+    }
+  ctx.restore();
+  return true;
+});

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

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

package/modules/text-effects/web/markup.js

@@ -0,0 +1 @@
+import "../../text/web/markup.js";

package/modules/text-input/core/extra.d.ts

@@ -0,0 +1,3 @@
+import type { Player } from '../../../packages/core/src/player.js';
+import type { Field, FieldConfig, FieldNode } from './index.js';
+export declare function enhanceField(p: Player, i: number, node: FieldNode, c: FieldConfig, f: Field): void;

package/modules/text-input/core/extra.js

@@ -0,0 +1,66 @@
+const offsets = /* @__PURE__ */ new WeakMap();
+function enhanceField(p, i, node, c, f) {
+  const drawing = node.text;
+  if (!drawing) return;
+  const layout = drawing.layout, boxes = node.fieldBoxes;
+  const width = p.prop(i, "width"), height = p.prop(i, "height");
+  const origin = p.model.nodes[i].raw.origin;
+  const x = Array.isArray(origin) ? -origin[0] * width : 0;
+  const y = Array.isArray(origin) ? -origin[1] * height : origin === "baseline" ? -(layout.lines[0]?.baseline ?? 0) : 0;
+  const cw = f.start === f.end ? 0.06 : 0;
+  let [dx, dy] = offsets.get(f) ?? [0, 0];
+  const gs = layout.lines.flatMap((l) => l.clusters);
+  const next = gs.find((g) => g.index >= f.end), last = gs.at(-1);
+  const line = layout.lines.find(
+    (l) => next ? l.clusters.includes(next) : l === layout.lines.at(-1)
+  );
+  const cx = next?.x ?? (last ? last.x + last.advance : line?.x ?? x);
+  const cy = line ? line.baseline - line.ascent * layout.scale : y;
+  const ch = line ? (line.ascent + line.descent) * layout.scale : 0;
+  if (p.focused === p.model.nodes[i].id) {
+    const caret = f.start === f.end ? boxes.at(-1) : void 0;
+    const left = caret?.x ?? cx, top = caret?.y ?? cy, h = caret?.height ?? ch;
+    if (c.multiline) {
+      dy = Math.max(top + h - height - y, Math.min(dy, top - y));
+      dx = 0;
+    } else {
+      dx = Math.max(left + cw - width - x, Math.min(dx, left - x));
+      dy = 0;
+    }
+  }
+  dx = Math.max(
+    0,
+    Math.min(dx, Math.max(0, Math.max(layout.contentWidth + x, cx) + cw - x - width))
+  );
+  dy = Math.max(0, Math.min(dy, Math.max(0, layout.contentHeight - height)));
+  offsets.set(f, [dx, dy]);
+  drawing.layout = {
+    ...layout,
+    clip: [x, y, width, height],
+    lines: layout.lines.map((l) => ({
+      ...l,
+      baseline: l.baseline - dy,
+      x: (l.x ?? 0) - dx,
+      clusters: l.clusters.map((g) => ({ ...g, x: g.x - dx, y: g.y - dy }))
+    }))
+  };
+  node.fieldBoxes = boxes.flatMap((b) => {
+    if (f.caretHidden && f.start === f.end) return [];
+    if (c.multiline && f.start === f.end)
+      b = { ...b, x: Math.max(x, Math.min(b.x, x + width - b.width)) };
+    const left = Math.max(x, b.x - dx), top = Math.max(y, b.y - dy);
+    const right = Math.min(x + width, b.x - dx + b.width), bottom = Math.min(y + height, b.y - dy + b.height);
+    return right > left && bottom > top ? [
+      {
+        ...b,
+        x: left,
+        y: top,
+        width: b.x - dx >= x && b.x - dx + b.width <= x + width ? b.width : right - left,
+        height: b.y - dy >= y && b.y - dy + b.height <= y + height ? b.height : bottom - top
+      }
+    ] : [];
+  });
+}
+export {
+  enhanceField
+};

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

@@ -0,0 +1,54 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { TextDrawNode } from '../../text/core/index.js';
+import { enhanceField } from './extra.js';
+export interface FieldConfig {
+    editable?: boolean;
+    multiline?: boolean;
+    obscured?: boolean;
+    caretBlink?: boolean;
+    selectionTextColor?: string;
+    placeholder?: string;
+    placeholderColor?: string;
+    selectOnFocus?: boolean;
+    maxLength?: number;
+    maxLines?: number;
+    writeText?: string;
+    label?: string;
+    caretColor?: string;
+    selectionColor?: string;
+    selectedTextColor?: string;
+    selectedTextStyle?: string;
+    selectionRadius?: number;
+}
+export interface Field {
+    value: string;
+    committed: string;
+    start: number;
+    end: number;
+    composing: boolean;
+    revision?: number;
+    caretHidden?: boolean;
+}
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    radius: number;
+}
+export type FieldNode = TextDrawNode & {
+    fieldBoxes?: Box[];
+};
+export declare const config: (p: Player, i: number) => FieldConfig | undefined;
+export declare function field(p: Player, id: string): Field | undefined;
+export declare function edit(p: Player, id: string, value: string, start?: number, end?: number, composing?: boolean): Field | undefined;
+export declare function select(p: Player, id: string, start: number, end?: number): Field | undefined;
+export declare const textinput: Module & {
+    field: typeof field;
+    edit: typeof edit;
+    select: typeof select;
+    enhance?: typeof enhanceField;
+    setEnhancer: (fn: typeof enhanceField) => void;
+};