animl 0.0.0-stage → 0.1.0

package/modules/fonts/web/index.js

@@ -0,0 +1,240 @@
+import "../../../packages/web/src/index.js";
+import { fonts } from "../core/index.js";
+import { cssFont } from "../core/css.js";
+import { cssFont as cssFont2 } from "../core/css.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(fonts);
+const controllers = /* @__PURE__ */ new WeakMap();
+const owners = /* @__PURE__ */ new WeakMap();
+let serial = 0;
+const refs = /* @__PURE__ */ new Map();
+const external = /* @__PURE__ */ new WeakSet();
+const alias = (face) => JSON.stringify(face.family.replace(/^['"]|['"]$/g, ""));
+class FontController {
+  children = /* @__PURE__ */ new Map();
+  forModel(model) {
+    if (model === this.icon.player?.model) return this;
+    let child = this.children.get(model);
+    if (!child) this.children.set(model, child = new FontController(this.icon));
+    return child;
+  }
+  // seam(P7-7): a host value captures faces without retaining the source controller/host.
+  capture() {
+    const families = new Map(this.families), faces = new Set(this.faces), fallback = [...this.fallback], fallbackFaces = new Set(this.fallbackFaces);
+    return (target) => {
+      for (const face of faces) target.retain(face);
+      target.families = new Map(families);
+      target.fallback = [...fallback];
+      target.fallbackFaces = new Set(fallbackFaces);
+      target.revision++;
+    };
+  }
+  families = /* @__PURE__ */ new Map();
+  faces = /* @__PURE__ */ new Set();
+  fallback = [];
+  versions = /* @__PURE__ */ new Map();
+  epoch = 0;
+  revision = 0;
+  fallbackFaces = /* @__PURE__ */ new Set();
+  get generation() {
+    return this.epoch;
+  }
+  icon;
+  constructor(icon) {
+    this.icon = icon;
+  }
+  cssFont(spec) {
+    const root = this.icon.fonts;
+    for (const scope of root === this ? [this] : [this, root])
+      for (const face of scope.fallbackFaces) scope.retain(face);
+    const family = (spec.family.match(/"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|[^,]+/g) ?? []).map((name) => {
+      const key = name.trim().replace(/^['"]|['"]$/g, "");
+      return this.families.get(key) ?? name.trim();
+    }).concat(this.fallback, root === this ? [] : root.fallback).join(", ");
+    return cssFont({ ...spec, family });
+  }
+  async ready(spec, text = "BESbswy") {
+    try {
+      await document.fonts.load(this.cssFont(spec).font, text);
+    } catch {
+      this.warn(spec.family);
+    }
+  }
+  async decode(source, descriptors = {}) {
+    if (typeof source === "string") {
+      const resolved = await this.icon.resolveAsset("", { type: "font", source });
+      source = resolved instanceof Blob ? await resolved.arrayBuffer() : resolved;
+    }
+    return new FontFace(
+      "anima-font-" + ++serial,
+      typeof source === "string" ? `url(${JSON.stringify(source)})` : source,
+      { weight: "1 1000", ...descriptors }
+    ).load();
+  }
+  async add(face, options = {}) {
+    const epoch = this.epoch;
+    if (options.weight !== void 0) face.weight = String(options.weight);
+    await face.load();
+    if (epoch !== this.epoch) return;
+    this.retain(face);
+    this.fallbackFaces.add(face);
+    const family = alias(face);
+    if (!this.fallback.includes(family)) this.fallback.push(family);
+    this.wake();
+  }
+  async set(name, source, descriptors = {}) {
+    const epoch = this.epoch;
+    const version = (this.versions.get(name) ?? 0) + 1;
+    this.versions.set(name, version);
+    try {
+      const face = source instanceof FontFace ? await source.load() : await this.decode(source, descriptors);
+      if (epoch !== this.epoch || this.versions.get(name) !== version) return;
+      this.retain(face);
+      const old = this.families.get(name);
+      this.families.set(name, alias(face));
+      await document.fonts.load(
+        `${face.style} ${face.weight.split(" ")[0]} 16px ${this.families.get(name)}`
+      );
+      if (![...this.families.values()].includes(old)) {
+        for (const f of this.faces) if (alias(f) === old) this.release(f);
+      }
+      this.wake();
+    } catch {
+      this.warn(name);
+    }
+  }
+  retain(face) {
+    if (this.faces.has(face)) return;
+    this.faces.add(face);
+    if (!refs.has(face)) {
+      if (document.fonts.has(face)) external.add(face);
+      else document.fonts.add(face);
+      refs.set(face, 0);
+    }
+    refs.set(face, refs.get(face) + 1);
+  }
+  release(face) {
+    this.faces.delete(face);
+    const count = refs.get(face) - 1;
+    if (count) refs.set(face, count);
+    else {
+      refs.delete(face);
+      if (!external.has(face)) document.fonts.delete(face);
+    }
+  }
+  wake() {
+    this.revision++;
+    if (this.icon.fonts !== this) this.icon.fonts.revision++;
+    const p = this.icon.player;
+    if (p) {
+      for (let i = 0; i < p.model.nodes.length; i++) p.drawVersions[i] = ++p.drawRevision;
+      fonts.refreshText?.(p);
+      p.onChange?.();
+    }
+  }
+  warn(name) {
+    this.icon.dispatchEvent(
+      new CustomEvent("anima:warning", {
+        detail: [
+          {
+            code: "font-load",
+            severity: "warning",
+            pointer: "/assets/" + name.replace(/~/g, "~0").replace(/\//g, "~1") + "/source",
+            message: "cannot load font " + name,
+            hint: "check the font bytes, source and asset policy; CSS fallback is used"
+          }
+        ]
+      })
+    );
+  }
+  clear(preserveFallback = false) {
+    this.revision++;
+    this.epoch++;
+    for (const child of this.children.values()) child.clear();
+    this.children.clear();
+    for (const face of this.faces) this.release(face);
+    this.families.clear();
+    if (!preserveFallback) {
+      this.fallback = [];
+      this.fallbackFaces.clear();
+    }
+    this.versions.clear();
+  }
+}
+if (!Object.getOwnPropertyDescriptor(Icon.prototype, "fonts")) {
+  Object.defineProperty(Icon.prototype, "fonts", {
+    get() {
+      let controller = controllers.get(this);
+      if (!controller) controllers.set(this, controller = new FontController(this));
+      return controller;
+    }
+  });
+  const previous = Icon.loadAssets;
+  Icon.loadAssets = async (icon, model) => {
+    const controller = icon.fonts;
+    const generation = controller.generation;
+    const prior = await previous?.(icon, model);
+    if (icon.fonts !== controller || generation !== controller.generation) return prior;
+    const root = model;
+    const seen = /* @__PURE__ */ new Set();
+    const load = async (model2) => {
+      if (seen.has(model2)) return;
+      seen.add(model2);
+      const target = model2 === root ? controller : controller.forModel(model2);
+      await Promise.all(
+        Object.entries(model2.doc.assets ?? {}).map(async ([name, asset]) => {
+          if (!model2.doc.requires?.includes("fonts") || asset.type !== "font") return;
+          try {
+            const source = await icon.resolveAsset(name, asset);
+            const response = source instanceof Blob ? source : await fetch(source);
+            if (response instanceof Response && !response.ok) throw Error("font fetch failed");
+            const bytes = await response.arrayBuffer();
+            if (icon.fonts === controller && generation === controller.generation)
+              await target.set(name, bytes);
+          } catch {
+            if (icon.fonts === controller && generation === controller.generation)
+              await target.set(name, new ArrayBuffer(0));
+          }
+        })
+      );
+      const components = Icon.modules.get("components");
+      await Promise.all(
+        // seam(P7-7): host-assignable unused definitions need resolved resources too.
+        [
+          ...components?.catalog.get(model2)?.values() ?? [],
+          ...model2.nodes.flatMap((n) => [...components?.placements.get(n)?.values() ?? []])
+        ].map(load)
+      );
+    };
+    await load(model);
+    return prior;
+  };
+  const previousHook = Icon.eventHook;
+  Icon.eventHook = (icon, kind, detail) => {
+    if (kind === "cleanup") {
+      controllers.get(icon)?.clear(true);
+    } else if (icon.player) owners.set(icon.player, icon);
+    previousHook?.(icon, kind, detail);
+  };
+  fonts.accepts = (face) => face instanceof FontFace;
+  fonts.assign = async (api, path, face) => {
+    const icon = owners.get(api.player);
+    if (!icon || !(face instanceof FontFace)) throw new TypeError("expected a loaded FontFace");
+    const handle = api.font(path);
+    const id = "font-" + ++serial;
+    await icon.fonts.forModel(api.player.model).set(id, face);
+    const module = Icon.modules.get("assets");
+    const records = {
+      ...module.resolvedAssets.get(api.player) ?? module.resolvedAssets.get(api.player.model) ?? api.player.model.doc.assets
+    };
+    records[id] = { type: "font", source: "" };
+    module.resolvedAssets.set(api.player, records);
+    const prior = api.resourceType;
+    api.resourceType = (name) => records[name]?.type ?? prior?.(name);
+    handle.set(id);
+  };
+}
+export {
+  FontController,
+  cssFont2 as cssFont
+};

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

@@ -0,0 +1,8 @@
+import './index.js';
+import { type FontInfo } from '../core/info.js';
+export { decodeFont, FontInfo, type FontOptions } from '../core/info.js';
+declare module './index.ts' {
+    interface FontController {
+        info(source: FontFace | ArrayBuffer | string): Promise<FontInfo>;
+    }
+}

package/modules/fonts/web/info.js

@@ -0,0 +1,40 @@
+import "./index.js";
+import { decodeFont } from "../core/info.js";
+import { fault } from "../core/opentype/binary.js";
+import { decodeFont as decodeFont2, FontInfo } from "../core/info.js";
+async function bytes(controller, source) {
+  if (typeof source !== "string") return source.slice(0);
+  const icon = controller.icon;
+  const resolved = await icon.resolveAsset("", { type: "font", source });
+  try {
+    const response = resolved instanceof Blob ? resolved : await fetch(resolved);
+    if (response instanceof Response && !response.ok) throw Error();
+    return await response.arrayBuffer();
+  } catch {
+    return fault("font fetch failed; check the source URL and asset policy", "font-source");
+  }
+}
+const prototype = Object.getPrototypeOf(
+  document.createElement("anima-icon").fonts
+);
+if (!prototype.info) {
+  const sources = /* @__PURE__ */ new WeakMap();
+  const decode = prototype.decode;
+  prototype.decode = async function(source, descriptors) {
+    const snapshot = await bytes(this, source);
+    const face = await decode.call(this, snapshot, descriptors);
+    sources.set(face, snapshot);
+    return face;
+  };
+  prototype.info = async function(source) {
+    const snapshot = source instanceof FontFace ? sources.get(source) ?? fault(
+      "font bytes are unavailable; decode through this controller or supply SFNT bytes",
+      "font-source"
+    ) : await bytes(this, source);
+    return decodeFont(new Uint8Array(snapshot));
+  };
+}
+export {
+  FontInfo,
+  decodeFont2 as decodeFont
+};

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

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

package/modules/fonts/web/measure.js

@@ -0,0 +1,37 @@
+import { graphemes } from "../../text/core/measure.js";
+import { applyCanvasFont } from "./settings.js";
+function optionsMeasurer() {
+  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;
+      applyCanvasFont(context, font);
+      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;
+      applyCanvasFont(context, { ...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 {
+  optionsMeasurer
+};

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

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

package/modules/fonts/web/options.js

@@ -0,0 +1,60 @@
+import "./consumer.js";
+import "../../text/web/index.js";
+import { fontsSVG } from "../core/svg.js";
+import { installOptions } from "../core/options.js";
+import { cssFont } from "../core/css.js";
+import { optionsMeasurer } from "./measure.js";
+import "./canvas.js";
+const Icon = customElements.get("anima-icon");
+installOptions(Icon.modules.get("fonts"));
+Icon.modules.get("fonts").setMeasurer(optionsMeasurer());
+Icon.registerSVGBackend("fonts", fontsSVG);
+const previous = Icon.eventHook;
+Icon.eventHook = (icon, kind, info) => {
+  previous?.(icon, kind, info);
+  if (kind !== "draw" || !icon.player) return;
+  for (const [el, dom, frame] of roots.get(icon) ?? []) {
+    const data = frame.nodes[el.node].text;
+    if (!data) continue;
+    let ci = 0;
+    for (const line of dom.querySelectorAll(":scope > g > text, :scope > g > g")) {
+      const clusters = data.layout.lines[ci++]?.clusters;
+      if (!clusters) continue;
+      let index = 0;
+      for (const run of line.children) {
+        const c = clusters[index];
+        if (!c) continue;
+        Object.assign(run.style, {
+          fontVariationSettings: cssFont(c.font).fontVariationSettings,
+          fontFeatureSettings: cssFont(c.font).fontFeatureSettings
+        });
+        index += [
+          ...new Intl.Segmenter("und", { granularity: "grapheme" }).segment(run.textContent ?? "")
+        ].length;
+      }
+    }
+  }
+};
+const roots = /* @__PURE__ */ new WeakMap();
+let previousOrder = Icon.orderSVG;
+const order = (frame, elements) => {
+  previousOrder?.(frame, elements);
+  for (const [el, dom] of elements) {
+    if (el.role !== "module:text") continue;
+    const icon = dom.getRootNode().host;
+    if (icon)
+      roots.set(icon, [
+        ...(roots.get(icon) ?? []).filter(
+          ([, d]) => d !== dom && d.getRootNode() === icon.shadowRoot
+        ),
+        [el, dom, frame]
+      ]);
+  }
+};
+Object.defineProperty(Icon, "orderSVG", {
+  configurable: true,
+  get: () => order,
+  set: (next) => {
+    if (next !== order) previousOrder = next;
+  }
+});

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

@@ -0,0 +1,3 @@
+import { type FontStyle } from '../core/css.js';
+/** Native settings are optional; assigning an invented property would hide a missing API. */
+export declare function applyCanvasFont(context: CanvasRenderingContext2D, font: FontStyle): void;

package/modules/fonts/web/settings.js

@@ -0,0 +1,15 @@
+import { cssFont } from "../core/css.js";
+function applyCanvasFont(context, font) {
+  const ctx = context;
+  const css = cssFont(font);
+  ctx.font = cssFont({
+    ...font,
+    weight: Math.max(1, Math.min(1e3, font.axes?.wght ?? font.weight))
+  }).font;
+  if ("fontVariationSettings" in ctx) ctx.fontVariationSettings = css.fontVariationSettings;
+  if ("fontFeatureSettings" in ctx) ctx.fontFeatureSettings = css.fontFeatureSettings;
+  ctx.fontKerning = font.features?.kern === 0 ? "none" : "normal";
+}
+export {
+  applyCanvasFont
+};

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

@@ -0,0 +1,5 @@
+import type { AnimaIcon } from '../../../packages/web/src/index.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { FontModule } from '../core/index.js';
+/** Optional consumer hook: no text implementation is imported by the fonts entry. */
+export declare function prepareText(owner: (player: Player) => AnimaIcon | undefined, Icon: typeof AnimaIcon, refresh: (player: Player) => void): NonNullable<FontModule['prepareText']>;

package/modules/fonts/web/text.js

@@ -0,0 +1,54 @@
+function prepareText(owner, Icon, refresh) {
+  const spec = (style = {}) => ({
+    family: style.font ?? "sans-serif",
+    size: style.size ?? 1,
+    weight: style.weight ?? 400,
+    style: style.style ?? "normal",
+    tracking: 0,
+    axes: style.axes,
+    features: style.features
+  });
+  const states = /* @__PURE__ */ new WeakMap();
+  const empty = {
+    lines: [],
+    width: 0,
+    height: 0,
+    contentWidth: 0,
+    contentHeight: 0,
+    fittedSize: 0,
+    scale: 1
+  };
+  return (player, input) => {
+    if (!player.model.doc.requires?.includes("fonts")) return;
+    const icon = owner(player);
+    if (!icon) return;
+    const controller = Icon.modules.get("fonts").controller?.(player) ?? icon.fonts.forModel(player.model);
+    input.styles[""] ??= {};
+    const key = JSON.stringify([controller.revision, icon.fonts.revision, input]);
+    let state = states.get(player);
+    if (!state) states.set(player, state = /* @__PURE__ */ new Map());
+    if (!state.has(key)) {
+      if (state.size > 64) state.clear();
+      state.set(key, false);
+      const specs = input.runs.map((run) => spec(input.styles[run.style ?? ""]));
+      void Promise.all(specs.map((spec2, i) => controller.ready(spec2, input.runs[i].text))).then(
+        () => {
+          if (!state.has(key) || !icon.player) return;
+          state.set(key, true);
+          Icon.modules.get("text").invalidateText(player);
+          refresh(icon.player);
+          icon.attributeChangedCallback("renderer", null, icon.getAttribute("renderer"));
+        }
+      );
+    }
+    for (const style of Object.values(input.styles))
+      style.font = controller.cssFont(spec(style)).fontFamily;
+    return {
+      revision: controller.revision + icon.fonts.revision,
+      layout: state.get(key) ? void 0 : empty
+    };
+  };
+}
+export {
+  prepareText
+};

package/modules/host/core/api.d.ts

@@ -0,0 +1,97 @@
+import type { Model } from '../../../packages/core/src/load.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import type { DataState } from '../../data/core/storage.js';
+import type { ModuleRegistry } from '../../../packages/core/src/modules.js';
+import type { HostValues } from '../../host-values/core/index.js';
+export { DataError } from './errors.js';
+export interface DataInstance {
+    readonly name: string;
+    readonly model: string;
+}
+export interface DataHandle<T> {
+    readonly value: T;
+    set(value: T): void;
+    on(event: 'change', callback: (value: T) => void): () => void;
+}
+export type PropertyHandle = {
+    [K in keyof HandleValues]: DataHandle<HandleValues[K]> & {
+        readonly type: K;
+    };
+}[keyof HandleValues];
+interface HandleValues {
+    number: number;
+    string: string;
+    boolean: boolean;
+    color: Color;
+    enum: string;
+    image: string;
+    font: string;
+    audio: string;
+    blob: string;
+    component: string;
+    'text-style': string;
+    list: unknown[];
+    'model-ref': Record<string, unknown>;
+    trigger: undefined;
+}
+export interface TriggerHandle extends DataHandle<undefined> {
+    fire(): void;
+}
+export type Color = string | [number, number, number, number];
+export interface ModelInfo {
+    name: string;
+    global?: boolean;
+    properties: {
+        name: string;
+        type: string;
+        values?: string[];
+        assetType?: string;
+    }[];
+}
+export interface RecordInstance extends DataInstance {
+    values: Record<string, unknown>;
+}
+export declare function observe(model: Model): void;
+export declare function install(shared: ModuleRegistry, state: (p: Player) => DataState | undefined, Values: typeof HostValues, children: (p: Player) => Player[]): void;
+export declare class HostData {
+    #private;
+    /** Optional runtime resource catalog supplied by the host image editor. */
+    resourceType?: (name: string) => string | undefined;
+    readonly player: Player;
+    private scope;
+    private children;
+    constructor(player: Player, scope: DataState, shared: ModuleRegistry, state: (p: Player) => DataState | undefined, Values: typeof HostValues, children: (p: Player) => Player[]);
+    signal(name: string): void;
+    /** Called only by the chained model.afterStep hook. */
+    notify(): void;
+    get(path: string): unknown;
+    /** Canonical identity for optional editors; retained aliases follow the current binding. */
+    canonical(path: string): string;
+    /** Internal live projection shared with optional identity-preserving editors. */
+    project(path: string, ...value: [] | [unknown]): unknown;
+    enqueue(write: () => void): void;
+    wake(): void;
+    /** Resolve a nested path to its declared scalar handle. */
+    at(path: string): PropertyHandle;
+    exportedInstances(): DataInstance[];
+    number(path: string): DataHandle<number>;
+    string(path: string): DataHandle<string>;
+    boolean(path: string): DataHandle<boolean>;
+    textStyle(path: string): DataHandle<string>;
+    component(path: string): DataHandle<string>;
+    trigger(path: string): TriggerHandle;
+    instances(): DataInstance[];
+    create(model: string, values?: Record<string, unknown>): DataInstance;
+    bind(instance: DataInstance | string): void;
+    /** Whether this player issued the instance handle (list editors reject foreign/forged records). */
+    owns(instance: unknown): boolean;
+    record(name: string): RecordInstance | undefined;
+    rebindInstance(name: string, instance: DataInstance): void;
+    models(): ModelInfo[];
+    batch<T>(fn: () => T): T;
+}
+declare module '../../../packages/core/src/player.ts' {
+    interface Player {
+        readonly data: HostData;
+    }
+}