animl 0.0.0-stage → 0.1.0

package/modules/host-edit/core/index.d.ts

@@ -0,0 +1,57 @@
+import type { Module, ModuleRegistry } from '../../../packages/core/src/modules.js';
+import type { Model } from '../../../packages/core/src/load.js';
+import type { Player } from '../../../packages/core/src/player.js';
+import { type RGBA } from '../../../packages/core/src/color.js';
+import type { HostData, DataHandle, DataInstance, Color } from '../../host/core/api.js';
+export interface ColorHandle extends DataHandle<Color> {
+    readonly rgba: RGBA;
+    readonly hex: string;
+}
+export interface EnumHandle extends DataHandle<string> {
+    readonly values: string[];
+    index: number;
+}
+export interface ItemHandle {
+    get(path: string): unknown;
+    number(path: string): DataHandle<number>;
+    string(path: string): DataHandle<string>;
+    boolean(path: string): DataHandle<boolean>;
+    color(path: string): ColorHandle;
+    enum(path: string): EnumHandle;
+    component(path: string): DataHandle<string>;
+    list(path: string): ListHandle;
+}
+export interface ListHandle extends DataHandle<unknown[]> {
+    readonly length: number;
+    at(index: number): ItemHandle;
+    add(values?: Record<string, unknown> | DataInstance): void;
+    insert(index: number, values?: Record<string, unknown> | DataInstance): void;
+    remove(item: number | ItemHandle | DataInstance): void;
+    swap(a: number, b: number): void;
+}
+export type ImageHandle = DataHandle<string> & {
+    set(value: string | object): void | Promise<void>;
+};
+export type ImageReplacement = (api: HostData, path: string, value: unknown) => Promise<void>;
+export declare function queueEdit(api: HostData, write: () => void): void;
+declare module '../../host/core/api.ts' {
+    interface HostData {
+        color(path: string): ColorHandle;
+        enum(path: string): EnumHandle;
+        list(path: string): ListHandle;
+        image(path: string): ImageHandle;
+        defaultInstance(): DataInstance;
+        instance(name: string): DataInstance;
+        globals(): DataInstance[];
+        setGlobal(name: string, instance: DataInstance): void;
+    }
+}
+declare const roots: WeakMap<Model, Map<string, Model>>;
+export declare const hostEdit: Module & {
+    roots: typeof roots;
+    resourceType?: (player: Player, name: string) => string | undefined;
+    replaceImage?: ImageReplacement;
+    assigned?: (api: HostData, path: string) => void;
+    compile?: ModuleRegistry['load'];
+};
+export {};

package/modules/host-edit/core/index.js

@@ -0,0 +1,266 @@
+import { formatHex } from "../../../packages/core/src/color.js";
+import { fail } from "../../host/core/errors.js";
+import { after } from "../manifest.js";
+const extended = /* @__PURE__ */ new WeakSet();
+function queueEdit(api, write) {
+  api.enqueue(write);
+}
+const items = /* @__PURE__ */ new WeakMap();
+function extend(api, state) {
+  if (extended.has(api)) return;
+  extended.add(api);
+  const player = api.player;
+  api.resourceType = (name) => hostEdit.resourceType?.(player, name);
+  const canonical = (path) => path.startsWith("$") ? path : "$" + path;
+  const types = state.modelTypes ??= /* @__PURE__ */ new WeakMap();
+  const indexTypes = (raw, live) => {
+    if (!raw || !live || typeof raw !== "object" || typeof live !== "object") return;
+    const model = state.compiled.modelOf.get(raw);
+    if (model) types.set(live, model);
+    for (const key of Object.keys(raw))
+      indexTypes(raw[key], live[key]);
+  };
+  indexTypes(state.compiled.defaults, state.instances);
+  let bound = state.compiled.defaultName;
+  const bind = api.bind.bind(api);
+  const probe = [...state.compiled.refs.keys()].find((key) => !key.includes(":"));
+  if (probe) bound = state.ref(probe)?.instance ?? bound;
+  api.bind = (instance) => {
+    bind(instance);
+    bound = typeof instance === "string" ? instance : instance.name;
+  };
+  const address = (path) => {
+    path = canonical(path);
+    api.get(path);
+    const match = /^\$(?:([\w-]+):)?([\w.-]+)$/.exec(path);
+    const name = match[1] ?? bound;
+    const record = api.instances().find((i) => i.name === name);
+    let properties = state.compiled.document.models[record.model].properties;
+    let value = state.instances[name];
+    let property;
+    const keys = match[2].split(".");
+    for (let i = 0; i < keys.length; i++) {
+      property = properties[keys[i]];
+      value = value[keys[i]];
+      if (i === keys.length - 1) break;
+      if (property.type === "list") {
+        value = value[+keys[++i]];
+        const model = property.of ?? state.modelTypes?.get(value) ?? types.get(value);
+        if (!model) fail("model", path, "list item has no discoverable model");
+        properties = state.compiled.document.models[model].properties;
+      } else properties = state.compiled.document.models[property.model].properties;
+    }
+    return { property, value, path: "$" + name + ":" + match[2] };
+  };
+  const projected = /* @__PURE__ */ new Map();
+  const enqueue = (write) => api.enqueue(() => {
+    projected.clear();
+    write();
+  });
+  const color = api.color.bind(api);
+  api.color = (path) => Object.defineProperties(color(path), {
+    rgba: { get: () => color(path).value },
+    hex: { get: () => formatHex(color(path).value) }
+  });
+  const enumeration = api.enum.bind(api);
+  api.enum = (path) => {
+    const handle = enumeration(path);
+    const values = () => [...address(path).property.values];
+    return Object.defineProperties(handle, {
+      values: { get: values },
+      index: {
+        get: () => values().indexOf(handle.value),
+        set: (i) => {
+          if (!Number.isInteger(i) || i < 0 || i >= values().length)
+            fail("enum", path, "enum index is out of range");
+          handle.set(values()[i]);
+        }
+      }
+    });
+  };
+  api.defaultInstance = () => api.instance(state.compiled.defaultName);
+  api.instance = (name) => {
+    const instance = api.instances().find((i) => i.name === name);
+    if (!instance) fail("instance", String(name), "unknown data instance");
+    return instance;
+  };
+  api.globals = () => api.instances().filter(
+    (i) => state.compiled.document.instances?.[i.name] && state.compiled.document.models[i.model]?.global
+  );
+  api.setGlobal = (name, instance) => {
+    if (!api.globals().some((i) => i.name === name))
+      fail("instance", String(name), "unknown global instance");
+    api.rebindInstance(name, instance);
+  };
+  const image = api.image.bind(api);
+  api.image = (path) => {
+    const handle = image(path);
+    const set = handle.set;
+    handle.set = (value) => {
+      if (typeof value !== "string" && (!value || typeof value !== "object"))
+        fail("type", path, "image replacement must be an asset name, URL or Blob");
+      if (typeof value === "string" && (value === "" || player.model.doc.assets?.[value] || api.resourceType?.(value) === "image")) {
+        hostEdit.assigned?.(api, path);
+        return set(value);
+      }
+      if (!hostEdit.replaceImage)
+        fail("asset", path, "image replacement requires the web host-edit entry");
+      return hostEdit.replaceImage(api, path, value);
+    };
+    return handle;
+  };
+  const list = api.list.bind(api);
+  api.list = (path) => {
+    const handle = list(path);
+    const current = () => address(path).value;
+    const projection = () => api.project(path);
+    const commit = (values) => {
+      const a = address(path);
+      projected.set(a.value, values);
+      api.project(a.path, values);
+      enqueue(() => {
+        const target = address(a.path).value;
+        target.splice(0, target.length, ...values);
+      });
+    };
+    const check = (i, length) => {
+      if (!Number.isInteger(i) || i < 0 || i >= length)
+        fail("path", path, "list index is out of range");
+    };
+    const at = (i) => {
+      const values = current();
+      check(i, values.length);
+      const item = values[i];
+      const target = (key) => {
+        const index = current().indexOf(item);
+        if (index < 0) fail("path", path, "list item has been removed");
+        return canonical(path) + "." + index + "." + key.replace(/^\$/, "");
+      };
+      const nested = {
+        get: (key) => api.get(target(key)),
+        number: (key) => api.number(target(key)),
+        string: (key) => api.string(target(key)),
+        boolean: (key) => api.boolean(target(key)),
+        color: (key) => api.color(target(key)),
+        enum: (key) => api.enum(target(key)),
+        component: (key) => api.component(target(key)),
+        list: (key) => api.list(target(key))
+      };
+      items.set(nested, item);
+      return nested;
+    };
+    const insert = (i, values = {}) => {
+      if (!values || typeof values !== "object" || Array.isArray(values))
+        fail("type", path, "list values must be a property map or instance record");
+      const a = address(path);
+      const value = a.value;
+      const next = [...projection()];
+      check(i, next.length + 1);
+      let instance;
+      if (api.owns(values)) {
+        instance = api.instance(String(values.name));
+        if (instance.model !== values.model)
+          fail("instance", path, "instance model does not match");
+      } else {
+        if (!a.property.of) fail("model", path, "mixed lists require an explicit instance");
+        instance = api.create(a.property.of, values);
+      }
+      if (a.property.of && instance.model !== a.property.of)
+        fail("type", path, "list item model does not match");
+      const item = state.instances[instance.name];
+      types.set(item, instance.model);
+      const seen = /* @__PURE__ */ new Set();
+      const cycle = (v) => {
+        if (!v || typeof v !== "object" || seen.has(v)) return false;
+        if (v === value) return true;
+        seen.add(v);
+        return Object.values(Array.isArray(v) ? projected.get(v) ?? v : v).some(cycle);
+      };
+      if (cycle(item)) fail("cycle", path, "list mutation would create a data cycle");
+      next.splice(i, 0, item);
+      commit(next);
+    };
+    return Object.defineProperty(
+      Object.assign(handle, {
+        at,
+        insert,
+        add: (values) => insert(projection().length, values),
+        remove: (item) => {
+          if (typeof item !== "number" && (!item || typeof item !== "object"))
+            fail("type", path, "remove requires an index or item");
+          const values = [...projection()];
+          const index = typeof item === "number" ? item : values.indexOf(
+            items.get(item) ?? (api.owns(item) ? state.instances[item.name] : fail("instance", path, "unknown or foreign instance record"))
+          );
+          check(index, values.length);
+          values.splice(index, 1);
+          commit(values);
+        },
+        swap: (a, b) => {
+          const next = [...projection()];
+          check(a, next.length);
+          check(b, next.length);
+          [next[a], next[b]] = [next[b], next[a]];
+          commit(next);
+        }
+      }),
+      "length",
+      { get: () => current().length }
+    );
+  };
+}
+const roots = /* @__PURE__ */ new WeakMap();
+let compiling;
+const hostEdit = {
+  roots,
+  name: "hostedit",
+  after,
+  entries: [],
+  init(registry, shared) {
+    hostEdit.compile = shared.load;
+    const components = registry.get("components");
+    if (components) {
+      const fork = components.forkModel;
+      components.forkModel = (source, target) => {
+        fork(source, target);
+        const family = roots.get(source);
+        if (family) roots.set(target, family);
+      };
+      const previous = components.loadComponent;
+      components.loadComponent = (parent, name, doc, inherit, run, itemModel) => {
+        const outer = compiling;
+        const family = compiling ??= roots.get(parent) ?? /* @__PURE__ */ new Map();
+        roots.set(parent, family);
+        try {
+          const result = previous ? previous(parent, name, doc, inherit, run, itemModel) : run(doc);
+          if (result.model) {
+            family.set(name, result.model);
+            roots.set(result.model, family);
+            result.model.doc.name = name;
+          }
+          return result;
+        } finally {
+          compiling = outer;
+        }
+      };
+    }
+    if (!registry.has("host")) return hostEdit;
+    const get = Object.getOwnPropertyDescriptor(shared.Player.prototype, "data").get;
+    const data = registry.get("data");
+    Object.defineProperty(shared.Player.prototype, "data", {
+      configurable: true,
+      get() {
+        const state = data.dataState(this);
+        if (state) state.modelTypes ??= /* @__PURE__ */ new WeakMap();
+        const api = get.call(this);
+        extend(api, state);
+        return api;
+      }
+    });
+    return hostEdit;
+  }
+};
+export {
+  hostEdit,
+  queueEdit
+};

package/modules/host-edit/manifest.d.ts

@@ -0,0 +1,28 @@
+export declare const after: string[];
+declare const _default: {
+    name: string;
+    summary: string;
+    after: string[];
+    core: {
+        entry: string;
+        export: string;
+    };
+    web: {
+        name: string;
+        budget: number;
+    }[];
+    adapters: {
+        'packages/core/src/modules/host-edit/index.ts': string;
+        'packages/web/src/host-edit.ts': string;
+        'packages/web/src/hostedit.ts': string;
+    };
+    exports: {
+        'core:./host-edit': string;
+        'web:./host-edit': string;
+        'web:./hostedit': string;
+    };
+    tests: string[];
+    conformance: never[];
+    docs: string[];
+};
+export default _default;

package/modules/host-edit/manifest.js

@@ -0,0 +1,25 @@
+const after = ["host", "data"];
+var manifest_default = {
+  name: "host-edit",
+  summary: "Host data API: edit scene data from page scripts.",
+  after,
+  core: { entry: "core/index.ts", export: "hostEdit" },
+  web: [{ name: "host-edit", budget: 4032 }],
+  adapters: {
+    "packages/core/src/modules/host-edit/index.ts": "core/index.ts",
+    "packages/web/src/host-edit.ts": "web/index.ts",
+    "packages/web/src/hostedit.ts": "web/index.ts"
+  },
+  exports: {
+    "core:./host-edit": "packages/core/src/modules/host-edit/index.ts",
+    "web:./host-edit": "packages/web/src/host-edit.ts",
+    "web:./hostedit": "packages/web/src/hostedit.ts"
+  },
+  tests: ["modules/host-edit/test/**/*.test.ts"],
+  conformance: [],
+  docs: ["modules/host-edit/SPEC.md", "modules/host-edit/AUTHORING.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

package/modules/host-edit/web/index.d.ts

@@ -0,0 +1,14 @@
+import type { Player } from '../../../packages/core/src/player.js';
+import type { AnimaIcon as IconType } from '../../../packages/web/src/index.js';
+import '../../../packages/web/src/index.js';
+declare const Icon: typeof IconType;
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        instance(id: string): Player;
+    }
+}
+/** The registered constructor with the optional preload promise typed. */
+export declare const AnimaIcon: typeof Icon & {
+    readonly ready: Promise<void>;
+};
+export {};

package/modules/host-edit/web/index.js

@@ -0,0 +1,204 @@
+import { componentNames } from "../../components/core/names.js";
+import { hostEdit, queueEdit } from "../core/index.js";
+import { fail } from "../../host/core/errors.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(hostEdit);
+const owners = /* @__PURE__ */ new WeakMap();
+const children = /* @__PURE__ */ new WeakSet();
+const priorHook = Icon.eventHook;
+Icon.eventHook = (icon, kind, detail) => {
+  if (icon.player) owners.set(icon.player, icon);
+  priorHook?.(icon, kind, detail);
+};
+const versions = /* @__PURE__ */ new WeakMap();
+const replacementIds = /* @__PURE__ */ new WeakMap();
+hostEdit.resourceType = (player, name) => Icon.modules.get("assets")?.resolvedAssets.get(player)?.[name]?.type;
+hostEdit.assigned = (api, path) => {
+  const pending = versions.get(api.player), target = api.canonical(path);
+  pending?.set(target, (pending.get(target) ?? 0) + 1);
+};
+hostEdit.replaceImage = async (api, path, value) => {
+  const icon = owners.get(api.player);
+  const root = icon?.player;
+  const target = api.canonical(path);
+  const id = api.image(path).value;
+  const assetsModule = Icon.modules.get("assets");
+  const records = assetsModule?.resolvedAssets.get(api.player) ?? assetsModule?.resolvedAssets.get(api.player.model);
+  const record = records?.[id];
+  if (!icon || !root || !record || record.type !== "image")
+    fail("asset", path, "image property must point at a loaded image asset");
+  if (!(value instanceof Blob) && typeof value !== "string")
+    fail("type", path, "image replacement must be an asset name, URL or Blob");
+  let pending = versions.get(api.player);
+  if (!pending) versions.set(api.player, pending = /* @__PURE__ */ new Map());
+  const revision = (pending.get(target) ?? 0) + 1;
+  pending.set(target, revision);
+  try {
+    const source = value instanceof Blob ? await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result));
+      reader.onerror = () => reject(Error("image blob read failed"));
+      reader.readAsDataURL(value);
+    }) : new URL(value, new URL(icon.getAttribute("src") ?? "", document.baseURI)).href;
+    const url = new URL(source);
+    const policy = icon.assetPolicy;
+    if (url.protocol !== "data:" && url.origin !== location.origin && policy !== "any")
+      fail("asset", path, "external image URL requires assetPolicy any");
+    if (!["data:", "http:", "https:", "blob:"].includes(url.protocol))
+      fail("asset", path, "unsupported image URL protocol");
+    const image = new Image();
+    image.src = source;
+    await image.decode();
+    queueEdit(api, () => {
+      if (pending.get(target) !== revision || icon.player !== root) return;
+      const local = { ...assetsModule.resolvedAssets.get(api.player) ?? records };
+      assetsModule.resolvedAssets.set(api.player, local);
+      let ids = replacementIds.get(api.player);
+      if (!ids) replacementIds.set(api.player, ids = /* @__PURE__ */ new Map());
+      const replacement = {
+        id: "@" + target + ":" + revision,
+        source: ids.get(target)?.source ?? id
+      };
+      ids.set(target, replacement);
+      local[replacement.id] = {
+        ...record,
+        source,
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      };
+      const match = /^\$([^:]+):(.+)$/.exec(target);
+      const keys = match[2].split(".");
+      let values = api.record(match[1]).values;
+      for (const key of keys.slice(0, -1)) values = values[key];
+      values[keys.at(-1)] = replacement.id;
+      if (!api.player.addrs.some((address) => address.endsWith(".asset")))
+        local[replacement.source] = local[replacement.id];
+      for (let i = 0; i < api.player.model.nodes.length; i++)
+        api.player.drawVersions[i] = ++api.player.drawRevision;
+    });
+  } catch {
+    fail("asset", path, "cannot decode replacement image");
+  }
+};
+Object.defineProperty(Icon, "ready", {
+  configurable: true,
+  get: () => Promise.resolve().then(() => {
+  })
+});
+Icon.prototype.instance = function(id) {
+  if (typeof id !== "string") fail("type", String(id), "component instance id must be a string");
+  let player = this.player;
+  for (const key of id.split(".")) {
+    player = player?.nested?.players?.get(key);
+    if (!player) fail("instance", id, "unknown component instance");
+  }
+  owners.set(player, this);
+  if (!children.has(player)) {
+    children.add(player);
+    const child = player;
+    const set = child.set.bind(child), fire = child.fire.bind(child);
+    child.set = (...args) => {
+      set(...args);
+      owners.get(child)?.player?.onChange?.();
+    };
+    child.fire = (...args) => {
+      fire(...args);
+      owners.get(child)?.player?.onChange?.();
+    };
+  }
+  player.onChange = () => this.player?.onChange?.();
+  return player;
+};
+Icon.selectModel = (icon, source) => {
+  prepareAssets();
+  const name = icon.getAttribute("component");
+  if (!name) return { model: source, diagnostics: [] };
+  const matches = componentNames(source.doc, name);
+  const model = matches.length === 1 ? hostEdit.roots.get(source)?.get(matches[0]) : void 0;
+  return model ? { model, diagnostics: [] } : {
+    diagnostics: [
+      {
+        code: matches.length > 1 ? "ambiguous-component" : "unknown-component",
+        severity: "error",
+        pointer: "/component",
+        message: `${matches.length > 1 ? "ambiguous" : "no exported"} component "${name}"`,
+        hint: "available components: " + Object.keys(source.doc.components ?? {}).filter((n) => n !== "$comment").join(", ")
+      }
+    ]
+  };
+};
+const load = Icon.prototype.load;
+Icon.prototype.load = function(source, markup = false) {
+  if (source?.inputs instanceof Map) {
+    this.loadModel(source);
+    return [];
+  }
+  return load.call(this, source, markup);
+};
+const AnimaIcon = Icon;
+const defaultResolver = () => "";
+const documents = /* @__PURE__ */ new Map();
+Icon.sourceLoader = async (_icon, source) => {
+  prepareAssets();
+  const url = new URL(source, document.baseURI).href;
+  const cache = documents;
+  const key = JSON.stringify([url, Icon.registration]);
+  let result = cache.get(key);
+  if (!result) {
+    result = (async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw Error("cannot fetch document");
+      const text = await response.text();
+      let parsed;
+      try {
+        parsed = /\.animl(?:[?#]|$)/.test(url) ? await (Icon.compilerAsync?.(text, url) ?? Icon.compiler?.(text)) : { doc: JSON.parse(text), diagnostics: [] };
+      } catch {
+        return text;
+      }
+      if (!parsed?.doc) return text;
+      const compiled = Icon.compile(parsed.doc);
+      if (!compiled.model) return text;
+      return compiled.model;
+    })();
+    cache.set(key, result);
+    if (cache.size > 16) cache.delete(cache.keys().next().value);
+    result.then(
+      (value) => {
+        if (typeof value === "string") cache.delete(key);
+      },
+      () => cache.delete(key)
+    );
+  } else {
+    cache.delete(key);
+    cache.set(key, result);
+  }
+  return result;
+};
+const decoded = /* @__PURE__ */ new WeakMap();
+let installed;
+function prepareAssets() {
+  if (Icon.loadAssets === installed) return;
+  const loadAssets = Icon.loadAssets;
+  installed = Icon.loadAssets = async (icon, model) => {
+    if (model.doc.requires?.includes("fonts")) return loadAssets?.(icon, model);
+    const assetsModule = Icon.modules.get("assets");
+    if (!assetsModule || !loadAssets) return loadAssets?.(icon, model);
+    let resolvers = decoded.get(model);
+    if (!resolvers) decoded.set(model, resolvers = /* @__PURE__ */ new WeakMap());
+    let cache = resolvers.get(icon.assets ?? defaultResolver);
+    if (!cache) resolvers.set(icon.assets ?? defaultResolver, cache = /* @__PURE__ */ new Map());
+    const key = JSON.stringify([icon.assetPolicy, new URL(icon.src ?? "", document.baseURI).href]);
+    let result = cache.get(key);
+    if (!result) {
+      result = loadAssets(icon, model);
+      cache.set(key, result);
+      if (cache.size > 16) cache.delete(cache.keys().next().value);
+      result.catch(() => cache.delete(key));
+    }
+    return result;
+  };
+}
+export {
+  AnimaIcon
+};

package/modules/host-fit/web/index.d.ts

@@ -0,0 +1,12 @@
+export interface HostLayoutPlayer {
+    layoutSize?: [number, number];
+    layoutBox?: (id: string) => unknown;
+}
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        fit: string;
+        alignment: string;
+        size: [number, number];
+        resetSize(): void;
+    }
+}

package/modules/host-fit/web/index.js

@@ -0,0 +1,71 @@
+import { contentBox } from "../../../packages/web/src/content-box.js";
+import { sizes, refresh } from "./size.js";
+const Icon = customElements.get("anima-icon");
+const observers = /* @__PURE__ */ new WeakMap();
+if (!Object.getOwnPropertyDescriptor(Icon.prototype, "fit")) {
+  const previous = Icon.eventHook;
+  Icon.eventHook = (icon, kind, detail) => {
+    previous?.(icon, kind, detail);
+    if (kind === "cleanup") {
+      observers.get(icon)?.disconnect();
+      observers.delete(icon);
+    }
+  };
+  for (const name of ["fit", "alignment"])
+    Object.defineProperty(Icon.prototype, name, {
+      get() {
+        return this.getAttribute(name) ?? (name === "fit" ? "contain" : "center");
+      },
+      set(value) {
+        this.setAttribute(name, value);
+      }
+    });
+  Icon.viewBox = (icon, svg) => {
+    const m = icon.player?.model;
+    if (!m) return;
+    if (!observers.has(icon) && icon.isConnected) {
+      const observer = new ResizeObserver(() => refresh(icon));
+      observers.set(icon, observer);
+      observer.observe(icon);
+    }
+    const fit = icon.getAttribute("fit");
+    const { width, height, left, top } = contentBox(icon);
+    if (!(width > 0 && height > 0)) return;
+    const [x, y, w, h] = m.viewBox;
+    const player = icon.player;
+    const target = fit === "layout" ? [width, height] : sizes.get(icon);
+    if (String(target) !== String(player.layoutSize)) {
+      player.layoutSize = target;
+      if (player.layoutBox) {
+        player.step(0);
+        icon.invalidate();
+      }
+    }
+    if (!fit && !sizes.has(icon) && !icon.hasAttribute("alignment") && !icon.hasAttribute("align")) {
+      svg?.setAttribute("viewBox", m.viewBox.join(" "));
+      return;
+    }
+    const [sw, sh] = target ?? [w, h];
+    let sx = width / sw, sy = height / sh;
+    if (fit !== "fill")
+      sx = sy = fit === "none" || fit === "layout" ? 1 : fit === "fit-width" ? sx : fit === "fit-height" ? sy : fit === "scale-down" ? Math.min(1, sx, sy) : (fit === "cover" ? Math.max : Math.min)(sx, sy);
+    const requested = icon.getAttribute("alignment") ?? icon.getAttribute("align") ?? "center";
+    const alignment = /^(?:(?:top|center|bottom)-(?:left|center|right)|center|top|bottom|left|right)$/.test(
+      requested
+    ) ? requested : "center";
+    const factor = (lo, hi) => alignment.includes(lo) ? 0 : alignment.includes(hi) ? 1 : 0.5;
+    const box = [
+      x - (width / sx - sw) * factor("left", "right"),
+      y - (height / sy - sh) * factor("top", "bottom"),
+      width / sx,
+      height / sy
+    ];
+    if (svg) {
+      svg.style.cssText = `left:${left}px;top:${top}px;width:${width}px;height:${height}px;overflow:hidden`;
+      svg.setAttribute("viewBox", box.join(" "));
+      svg.setAttribute("preserveAspectRatio", "none");
+    }
+    return box;
+  };
+  for (const icon of document.querySelectorAll("anima-icon")) refresh(icon);
+}