animl 0.0.0-stage → 0.1.0

package/modules/fonts/core/opentype/variation.js

@@ -0,0 +1,164 @@
+import { VERBOSE as V } from "../../../../packages/core/src/flags.js";
+import { Bytes, fault } from "./binary.js";
+function varyPoints(font, glyph, points, contourLengths, axes) {
+  for (const value of Object.values(axes))
+    if (!Number.isFinite(value)) fault(V ? "nonfinite variation coordinate" : "");
+  const coords = font.axes.map((a) => {
+    const x = Math.max(a.min, Math.min(a.max, axes[a.tag] ?? a.default));
+    return x === a.default ? 0 : x < a.default ? (x - a.default) / (a.default - a.min) : (x - a.default) / (a.max - a.default);
+  });
+  if (coords.every((x) => x === 0)) return points;
+  if (font.tables.has("avar")) {
+    const a = font.table("avar");
+    if (a.u16(6) !== coords.length) fault(V ? "avar axis count mismatch" : "");
+    let p = 8;
+    coords.forEach((v, i) => {
+      const n2 = a.u16(p);
+      p += 2;
+      let lastX = -1, lastY = -1;
+      for (let j = 0; j < n2; j++) {
+        const x = a.i16(p) / 16384, y = a.i16(p + 2) / 16384;
+        p += 4;
+        if (v >= lastX && v <= x) {
+          coords[i] = x === lastX ? y : lastY + (v - lastX) / (x - lastX) * (y - lastY);
+        }
+        lastX = x;
+        lastY = y;
+      }
+    });
+  }
+  const b = font.table("gvar"), n = b.u16(4);
+  if (n !== coords.length || b.u16(12) !== font.glyphCount)
+    fault(V ? "gvar axis/glyph count mismatch" : "");
+  const long = !!(b.u16(14) & 1), offset = (id) => long ? b.u32(20 + id * 4) : b.u16(20 + id * 2) * 2;
+  const start = b.u32(16) + offset(glyph), end = b.u32(16) + offset(glyph + 1);
+  if (start === end) return points;
+  const g = new Bytes(b.slice(start, end - start)), count = g.u16(0), tuples = count & 4095;
+  if (tuples * points.length > 8e6)
+    fault(V ? "glyph variation operation limit" : "", "font-limit");
+  let header = 4, data = g.u16(2);
+  const tuple = (p) => coords.map((_, i) => g.i16(p + i * 2) / 16384);
+  const headers = [];
+  for (let i = 0; i < tuples; i++) {
+    const size = g.u16(header), flags = g.u16(header + 2);
+    header += 4;
+    let peak;
+    if (flags & 32768) {
+      peak = tuple(header);
+      header += n * 2;
+    } else {
+      const index = flags & 4095;
+      if (index >= b.u16(6)) fault(V ? "invalid gvar shared tuple" : "");
+      peak = coords.map((_, j) => b.i16(b.u32(8) + (index * n + j) * 2) / 16384);
+    }
+    let lower, upper;
+    if (flags & 16384) {
+      lower = tuple(header);
+      header += n * 2;
+      upper = tuple(header);
+      header += n * 2;
+    }
+    headers.push({ size, flags, peak, start: lower, end: upper });
+  }
+  if (header > data) fault(V ? "overlapping gvar headers" : "");
+  const packedPoints = (r, cursor) => {
+    let count2 = r.u8(cursor.p++);
+    if (!count2) return void 0;
+    if (count2 & 128) count2 = (count2 & 127) << 8 | r.u8(cursor.p++);
+    if (count2 > points.length) fault(V ? "too many gvar points" : "");
+    const out = [];
+    let point = 0;
+    while (out.length < count2) {
+      const control = r.u8(cursor.p++), run = (control & 127) + 1;
+      if (out.length + run > count2) fault(V ? "invalid gvar point run" : "");
+      for (let i = 0; i < run; i++) {
+        point += control & 128 ? r.u16(cursor.p) : r.u8(cursor.p);
+        cursor.p += control & 128 ? 2 : 1;
+        if (point >= points.length) fault(V ? "gvar point out of range" : "");
+        out.push(point);
+      }
+    }
+    return out;
+  };
+  let shared;
+  if (count & 32768) {
+    const cursor = { p: data };
+    shared = packedPoints(g, cursor);
+    data = cursor.p;
+  }
+  const output = points.map((p) => ({ ...p }));
+  for (const h of headers) {
+    const t = new Bytes(g.slice(data, h.size));
+    data += h.size;
+    let scalar = 1;
+    coords.forEach((c, i) => {
+      const peak = h.peak[i];
+      if (!peak) return;
+      if (h.start && h.end) {
+        const lo = h.start[i], hi = h.end[i];
+        if (lo > peak || peak > hi || lo < 0 && hi > 0) return;
+        if (c < lo || c > hi) scalar = 0;
+        else if (c < peak) scalar *= (c - lo) / (peak - lo);
+        else if (c > peak) scalar *= (hi - c) / (hi - peak);
+      } else if (c === 0 || c * peak < 0) scalar = 0;
+      else if (Math.abs(c) < Math.abs(peak)) scalar *= c / peak;
+    });
+    const cursor = { p: 0 }, indices = h.flags & 8192 ? packedPoints(t, cursor) : shared, number = indices?.length ?? points.length;
+    const unpack = () => {
+      const deltas = [];
+      while (deltas.length < number) {
+        const control = t.u8(cursor.p++), run = (control & 63) + 1;
+        if (deltas.length + run > number) fault(V ? "invalid gvar delta run" : "");
+        for (let i = 0; i < run; i++) {
+          deltas.push(control & 128 ? 0 : control & 64 ? t.i16(cursor.p) : t.i8(cursor.p));
+          if (!(control & 128)) cursor.p += control & 64 ? 2 : 1;
+        }
+      }
+      return deltas;
+    };
+    const dx = unpack(), dy = unpack();
+    if (!scalar) continue;
+    const delta = Array(points.length);
+    for (let i = 0; i < number; i++) delta[indices?.[i] ?? i] = [dx[i], dy[i]];
+    if (indices) {
+      let first = 0;
+      for (const length of contourLengths) {
+        const touched = [];
+        for (let i = first; i < first + length; i++) if (delta[i]) touched.push(i);
+        if (touched.length === 1) {
+          for (let i = first; i < first + length; i++) delta[i] = delta[touched[0]];
+        } else if (touched.length > 1) {
+          for (let j = 0; j < touched.length; j++) {
+            const a = touched[j], z = touched[(j + 1) % touched.length];
+            let i = first + (a - first + 1) % length;
+            while (i !== z) {
+              const d = [0, 0];
+              for (const [k, key] of ["x", "y"].entries()) {
+                let c1 = points[a][key], c2 = points[z][key], v1 = delta[a][k], v2 = delta[z][k];
+                if (c1 > c2) {
+                  [c1, c2] = [c2, c1];
+                  [v1, v2] = [v2, v1];
+                }
+                const c = points[i][key];
+                d[k] = c1 === c2 ? v1 === v2 ? v1 : 0 : c <= c1 ? v1 : c >= c2 ? v2 : v1 + (c - c1) / (c2 - c1) * (v2 - v1);
+              }
+              delta[i] = d;
+              i = first + (i - first + 1) % length;
+            }
+          }
+        }
+        first += length;
+      }
+    }
+    delta.forEach((d, i) => {
+      if (d) {
+        output[i].x += d[0] * scalar;
+        output[i].y += d[1] * scalar;
+      }
+    });
+  }
+  return output;
+}
+export {
+  varyPoints
+};

package/modules/fonts/core/options.d.ts

@@ -0,0 +1,6 @@
+import type { FontModule } from './index.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { LayoutInput } from '../../text/core/layout.js';
+/** Resolve numeric axis slots before layout/signature calculation, including in headless tools. */
+export declare function resolveAxes(player: Player, input: LayoutInput): void;
+export declare function installOptions(fonts: FontModule): void;

package/modules/fonts/core/options.js

@@ -0,0 +1,34 @@
+const installed = /* @__PURE__ */ new WeakSet();
+function resolveAxes(player, input) {
+  const i = player.model.nodes.findIndex(
+    (n) => n.raw.id === input.id
+  );
+  if (i < 0) return;
+  for (const [id, style] of Object.entries(input.styles))
+    if (style.axes)
+      style.axes = Object.fromEntries(
+        Object.entries(style.axes).map(([tag, rest]) => [
+          tag,
+          player.prop(i, `styles.${id}.axes.${tag}`) ?? rest
+        ])
+      );
+}
+function installOptions(fonts) {
+  fonts.model = (node, key) => {
+    const m = /^styles\.([\w-]+)\.axes\.([a-zA-Z0-9 ]{4})$/.exec(key);
+    const rest = m && node.raw.styles?.[m[1]]?.axes?.[m[2]];
+    if (String(node.type) === "text" && typeof rest === "number")
+      return { prop: { type: "number", feature: "fonts" }, rest };
+  };
+  const prepare = fonts.prepareText;
+  if (prepare && installed.has(prepare)) return;
+  fonts.prepareText = (player, input) => {
+    resolveAxes(player, input);
+    return prepare?.(player, input);
+  };
+  installed.add(fonts.prepareText);
+}
+export {
+  installOptions,
+  resolveAxes
+};

package/modules/fonts/core/svg.d.ts

@@ -0,0 +1,2 @@
+import type { SVGBackend } from '../../../packages/core/src/svg.js';
+export declare const fontsSVG: SVGBackend;

package/modules/fonts/core/svg.js

@@ -0,0 +1,13 @@
+import { cssFont } from "./css.js";
+const fontsSVG = {
+  attrs(frame, el, _paint, _id, attrs) {
+    if (el.role !== "module:text-run") return;
+    const c = frame.nodes[el.node].text?.layout.lines[el.index]?.clusters[+el.key];
+    if (!c) return;
+    const css = cssFont(c.font);
+    attrs.style = `font-variation-settings:${css.fontVariationSettings};font-feature-settings:${css.fontFeatureSettings}`;
+  }
+};
+export {
+  fontsSVG
+};

package/modules/fonts/manifest.d.ts

@@ -0,0 +1,51 @@
+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?: undefined;
+        heavy?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        heavy?: undefined;
+    } | {
+        name: string;
+        budget: number;
+        over: string;
+        heavy: boolean;
+    })[];
+    adapters: {
+        'packages/core/src/modules/fonts/index.ts': string;
+        'packages/core/src/modules/fonts/svg.ts': string;
+        'packages/markup/src/fonts.ts': string;
+        'packages/web/src/fonts.ts': string;
+        'packages/web/src/fonts-text.ts': string;
+        'packages/web/src/fonts-options.ts': string;
+        'packages/web/src/fonts-info.ts': string;
+        'packages/core/src/modules/fonts/info.ts': string;
+    };
+    exports: {
+        'core:./fonts': string;
+        'markup:./fonts': string;
+        'web:./fonts': string;
+        'web:./fonts-text': string;
+        'web:./fonts-options': string;
+        'web:./fonts-info': string;
+        'core:./fonts-info': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/fonts/manifest.js

@@ -0,0 +1,61 @@
+const after = ["assets", "host", "host-edit"];
+var manifest_default = {
+  ...{
+    name: "fonts",
+    summary: "Fonts: font assets, font formats, glyph subsets and fallback for text.",
+    after: [],
+    core: { entry: "core/index.ts", export: "fonts", svg: "core/svg.ts", svgExport: "fontsSVG" },
+    web: [
+      { name: "fonts", budget: 2048 },
+      // Reset by the P3c rule (measured × 1.10, 64 B steps) after the review fixes, 2026-11-09.
+      { name: "fonts-text", budget: 896, over: "fonts" },
+      { name: "fonts-options", budget: 4096, over: "text" },
+      // Heavy: ships a font-file reader to the page for metrics, coverage and glyph paths (niche).
+      { name: "fonts-info", budget: 8192, over: "fonts", heavy: true }
+    ],
+    adapters: {
+      "packages/core/src/modules/fonts/index.ts": "core/index.ts",
+      "packages/core/src/modules/fonts/svg.ts": "core/svg.ts",
+      "packages/markup/src/fonts.ts": "markup/index.ts",
+      "packages/web/src/fonts.ts": "web/index.ts",
+      "packages/web/src/fonts-text.ts": "web/consumer.ts",
+      "packages/web/src/fonts-options.ts": "web/options.ts",
+      "packages/web/src/fonts-info.ts": "web/info.ts",
+      "packages/core/src/modules/fonts/info.ts": "core/info.ts"
+    },
+    exports: {
+      "core:./fonts": "packages/core/src/modules/fonts/index.ts",
+      "markup:./fonts": "packages/markup/src/fonts.ts",
+      "web:./fonts": "packages/web/src/fonts.ts",
+      "web:./fonts-text": "packages/web/src/fonts-text.ts",
+      "web:./fonts-options": "packages/web/src/fonts-options.ts",
+      "web:./fonts-info": "packages/web/src/fonts-info.ts",
+      "core:./fonts-info": "packages/core/src/modules/fonts/info.ts"
+    },
+    tests: [
+      "modules/fonts/test/**/*.test.ts",
+      "packages/markup/test/corpus.test.ts",
+      "packages/markup/test/names.test.ts"
+    ],
+    conformance: [
+      "assets-font",
+      "assets-host-decode-font",
+      "assets-replacement-scope-font",
+      "data-host-font",
+      "host-api-data-font",
+      "host-api-font-fallback",
+      "text-font-fallback",
+      "text-font-assets",
+      "text-font-decoding",
+      "text-variable-axes",
+      "text-opentype-features",
+      "text-font-metrics"
+    ],
+    docs: ["spec/SPEC.md", "modules/fonts/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

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

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

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

package/modules/fonts/web/canvas.js

@@ -0,0 +1,37 @@
+import { applyCanvasFont } from "./settings.js";
+const Icon = customElements.get("anima-icon");
+(Icon.canvasShapes ??= []).unshift((ctx, node, brush) => {
+  const data = node.text;
+  if (!data || data.backgrounds) 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("");
+      applyCanvasFont(ctx, first.font);
+      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/fonts/web/consumer.d.ts

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

package/modules/fonts/web/consumer.js

@@ -0,0 +1,90 @@
+import "./index.js";
+import { prepareText } from "./text.js";
+const Icon = customElements.get("anima-icon");
+const fonts = Icon.modules.get("fonts");
+if (!fonts.prepareText) {
+  const eachPlayer = (player, visit) => {
+    visit(player);
+    const nested = player.nested?.players;
+    const lists = Icon.modules.get("lists");
+    for (const child of [
+      ...nested?.values() ?? [],
+      ...lists?.listState(player)?.runs.flatMap((r) => r.items.map((i) => i.player)) ?? []
+    ])
+      eachPlayer(child, visit);
+  };
+  fonts.refreshText = (player) => eachPlayer(player, (p) => {
+    Icon.modules.get("layout")?.refresh?.(p);
+    p.drawVersions.fill(++p.drawRevision);
+  });
+  const parked = /* @__PURE__ */ new WeakMap();
+  const snapshot = (s) => {
+    const families = new Map(s.families), faces = [...s.faces], fallback = [...s.fallback], fallbackFaces = new Set(s.fallbackFaces), children = [...s.children].map(([m, c]) => [m, c, snapshot(c)]);
+    return () => {
+      for (const face of faces) s.retain(face);
+      s.families = new Map([...families, ...s.families]);
+      if (!s.fallback.length) {
+        s.fallback = fallback;
+        s.fallbackFaces = fallbackFaces;
+      }
+      for (const [m, c, restore] of children) {
+        s.children.set(m, c);
+        restore();
+      }
+    };
+  };
+  const proto = Object.getPrototypeOf(Reflect.get(Icon.prototype, "fonts", {}));
+  for (const name of ["forModel", "cssFont"]) {
+    const method = proto[name];
+    proto[name] = function(arg) {
+      const root = this.icon.fonts;
+      parked.get(root)?.();
+      parked.delete(root);
+      return method.call(this, arg);
+    };
+  }
+  const clear = proto.clear;
+  proto.clear = function(keep) {
+    const player = this.icon.player, restore = snapshot(this), previous2 = parked.get(this);
+    if (!keep) parked.delete(this);
+    else if (this.faces.size || this.families.size || !previous2)
+      parked.set(this, () => {
+        if (player && this.icon.player === player) restore();
+        previous2?.();
+      });
+    return clear.call(this, keep);
+  };
+  const hosts = /* @__PURE__ */ new Set();
+  const seen = /* @__PURE__ */ new WeakSet();
+  const previousHook = Icon.eventHook;
+  Icon.eventHook = (icon, kind, info) => {
+    if (!seen.has(icon)) {
+      seen.add(icon);
+      hosts.add(new WeakRef(icon));
+    }
+    previousHook?.(icon, kind, info);
+  };
+  const owners = /* @__PURE__ */ new WeakMap();
+  const previous = Icon.loadAssets;
+  Icon.loadAssets = async (icon, model) => {
+    const prior = await previous?.(icon, model);
+    if (!model.doc.requires?.includes("fonts")) return prior;
+    return (player) => {
+      owners.set(player, icon);
+      return prior?.(player) ?? false;
+    };
+  };
+  fonts.prepareText = prepareText(
+    (player) => {
+      if (!owners.has(player))
+        for (const ref of hosts) {
+          const host = ref.deref();
+          if (!host) hosts.delete(ref);
+          else if (host.player) eachPlayer(host.player, (p) => owners.set(p, host));
+        }
+      return owners.get(player);
+    },
+    Icon,
+    (player) => fonts.refreshText(player)
+  );
+}

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

@@ -0,0 +1,53 @@
+import '../../../packages/web/src/index.js';
+import { type FontStyle } from '../core/css.js';
+import type { AnimaIcon } from '../../../packages/web/src/index.js';
+import type { Player } from '../../../packages/core/src/player.js';
+export { cssFont, type FontStyle } from '../core/css.js';
+export declare class FontController {
+    private children;
+    forModel(model: Player['model']): FontController;
+    capture(): (target: FontController) => void;
+    private families;
+    private faces;
+    private fallback;
+    private versions;
+    private epoch;
+    revision: number;
+    private fallbackFaces;
+    get generation(): number;
+    private icon;
+    constructor(icon: AnimaIcon);
+    cssFont(spec: FontStyle): {
+        font: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        fontStyle: "normal" | "italic";
+        letterSpacing: string;
+        fontVariationSettings: string;
+        fontFeatureSettings: string;
+    };
+    ready(spec: FontStyle, text?: string): Promise<void>;
+    decode(source: ArrayBuffer | string, descriptors?: FontFaceDescriptors): Promise<FontFace>;
+    add(face: FontFace, options?: {
+        weight?: number | string;
+    }): Promise<void>;
+    set(name: string, source: FontFace | ArrayBuffer | string, descriptors?: FontFaceDescriptors): Promise<void>;
+    private retain;
+    private release;
+    private wake;
+    private warn;
+    clear(preserveFallback?: boolean): void;
+}
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        readonly fonts: FontController;
+    }
+}
+declare module '../../host/core/api.ts' {
+    interface HostData {
+        font(path: string): import('../../host/core/api.js').DataHandle<string> & {
+            set(value: FontFace): void | Promise<void>;
+        };
+    }
+}