animl 0.0.0-stage → 0.1.1

package/modules/lists/core/index.js

@@ -0,0 +1,506 @@
+import { nodePointer as pointer } from "../../components/core/node-pointer.js";
+import { drawFrame, drawTree } from "../../../packages/core/src/draw.js";
+import { apply, invert, mul } from "../../../packages/core/src/geom.js";
+import { entries } from "../capabilities/components-list/registry.js";
+import { after } from "../manifest.js";
+import { install, bindContext, inherited, parents, error } from "./context.js";
+const states = /* @__PURE__ */ new WeakMap();
+const listState = (p) => states.get(p);
+const dynamicTrees = /* @__PURE__ */ new WeakSet();
+const lists = {
+  name: "lists",
+  after,
+  entries,
+  listState,
+  parents,
+  dynamicTrees,
+  init(registry, shared) {
+    const data = registry.get("data");
+    const components = registry.get("components");
+    if (!data || !components) return lists;
+    install(data, components);
+    components.externalDrawing = (model) => !!model.doc.requires?.includes("lists");
+    components.placementContext = (model, node, key) => {
+      if (!model.doc.requires?.includes("lists")) return;
+      const c = data.compiled.get(model);
+      if (node.type === "repeat")
+        return key && key !== "*" ? key : property(data, model, node.raw.list ?? "")?.of;
+      if (node.raw.data) {
+        const value = readDefault(data, model, node.raw.data);
+        if (value && typeof value === "object") return c?.modelOf.get(value);
+      }
+    };
+    return {
+      ...lists,
+      resolve(model, d) {
+        resolve(
+          model,
+          d,
+          data,
+          components,
+          shared.Player,
+          registry.get("assets")
+        );
+      },
+      draw: {
+        tree(model, tree) {
+          if (!model.doc.requires?.includes("lists")) return;
+          for (const [i, n] of model.nodes.entries()) {
+            tree.nodes[i].id = n.id;
+            if (n.type === "repeat" || n.type === "instance")
+              tree.nodes[i].kind = "group";
+          }
+        },
+        end: render
+      }
+    };
+  }
+};
+function count(v) {
+  return Math.max(0, Math.min(256, Math.floor(Number(v) || 0)));
+}
+const drawings = /* @__PURE__ */ new WeakMap();
+function render(p, frame) {
+  const state = states.get(p), drawing = drawings.get(p);
+  if (!state || !drawing) return;
+  const tree = frame.tree;
+  const entries2 = [];
+  const players = drawing.players;
+  for (const [id, child] of players ?? [])
+    entries2.push({ player: child, parent: p.model.ids.get(id), id });
+  for (const run of state.runs)
+    for (const item of run.items)
+      entries2.push({
+        player: item.player,
+        parent: run.spec.node,
+        id: p.model.nodes[run.spec.node].id + "/" + item.index,
+        index: item.index
+      });
+  const active = new Set(entries2.map((e) => e.player));
+  for (const [player, m] of drawing.mappings)
+    if (!active.has(player)) {
+      drawing.free.push(m.group, ...m.nodes);
+      for (const n of [m.group, ...m.nodes]) {
+        frame.nodes[n].visible = false;
+        frame.changed.push(n);
+      }
+      drawing.mappings.delete(player);
+    }
+  for (const n of p.model.nodes)
+    if (n.type === "repeat" || n.type === "instance")
+      tree.nodes[p.model.ids.get(n.id)].children = [];
+  tree.resources = [...drawing.resources];
+  const allocate = () => drawing.free.pop() ?? tree.nodes.length++;
+  for (const entry of entries2) {
+    const child = drawFrame(entry.player);
+    let mapping = drawing.mappings.get(entry.player);
+    if (!mapping) {
+      mapping = { group: allocate(), nodes: [] };
+      drawing.mappings.set(entry.player, mapping);
+    }
+    while (mapping.nodes.length < child.tree.nodes.length) mapping.nodes.push(allocate());
+    const group = mapping.group, shift = (n) => mapping.nodes[n];
+    const raw = p.model.nodes[entry.parent].raw;
+    const transform = [
+      1,
+      0,
+      0,
+      1,
+      (raw.dx ?? 0) * (entry.index ?? 0),
+      (raw.dy ?? 0) * (entry.index ?? 0)
+    ];
+    tree.nodes[group] = {
+      node: group,
+      kind: "group",
+      id: entry.id,
+      parent: entry.parent,
+      children: child.tree.roots.map(shift)
+    };
+    tree.nodes[entry.parent].children.push(group);
+    frame.nodes[group] = { transform, opacity: 1, visible: true, paints: [] };
+    frame.changed.push(group);
+    (frame.order ??= [])[group] = entry.index ?? group;
+    const world = mul(p.world(entry.parent), transform);
+    frame.nodes[group].world = world;
+    child.tree.nodes.forEach((n, i) => {
+      const source = child.nodes[i];
+      tree.nodes[shift(i)] = {
+        ...n,
+        node: shift(i),
+        id: entry.id + "/" + (n.id ?? entry.player.model.nodes[n.node]?.id),
+        parent: n.parent < 0 ? group : shift(n.parent),
+        children: n.children.map(shift),
+        dependencies: void 0,
+        mask: n.mask ? { ...n.mask, source: shift(n.mask.source) } : void 0,
+        clip: n.clip ? { ...n.clip, source: shift(n.clip.source) } : void 0
+      };
+      frame.nodes[shift(i)] = {
+        ...source,
+        world: source.world ? mul(world, source.world) : void 0,
+        mask: source.mask ? { ...source.mask, source: shift(source.mask.source) } : void 0,
+        clip: source.clip ? { ...source.clip, source: shift(source.clip.source) } : void 0
+      };
+      frame.changed.push(shift(i));
+      (frame.order ??= [])[shift(i)] = child.order?.[i] ?? i;
+    });
+    for (const r of child.tree.resources)
+      tree.resources.push({
+        ...r,
+        node: shift(r.node),
+        source: r.source === void 0 ? void 0 : shift(r.source)
+      });
+  }
+}
+function resolve(model, d, data, components, Child, assets) {
+  if (!model.doc.requires?.includes("lists")) return;
+  if (!model.doc.requires?.includes("components") || !model.doc.requires?.includes("data")) {
+    error(
+      d,
+      "undeclared-feature",
+      "/requires",
+      "lists need components and data",
+      "add components and data to requires"
+    );
+    return;
+  }
+  const c = data.compiled.get(model);
+  if (!c) {
+    error(
+      d,
+      "list-source",
+      "/data",
+      "lists need a data model",
+      "declare a model and its list or count source"
+    );
+    return;
+  }
+  const plans = [];
+  for (const [ni, node] of model.nodes.entries()) {
+    const raw = node.raw, at = pointer(model, ni);
+    if (node.type !== "repeat") {
+      if (node.type === "instance" && raw.data) {
+        const value = readDefault(data, model, raw.data);
+        const child = components.placements.get(node)?.get("*"), cc = child && data.compiled.get(child);
+        const expected = cc?.document.instances?.[cc.defaultName]?.model;
+        const actual = value && c.modelOf.get(value);
+        if (!value || typeof value !== "object")
+          error(
+            d,
+            "data-instance",
+            at + "/data",
+            "unknown component data context",
+            "use a model reference or named instance"
+          );
+        else if (expected && actual !== expected)
+          error(
+            d,
+            "data-type",
+            at + "/data",
+            "component context model does not match",
+            "use the component public model"
+          );
+      }
+      continue;
+    }
+    if (!!raw.list === !!raw.count)
+      error(
+        d,
+        "list-source",
+        at,
+        "repeat needs exactly one list or count",
+        'provide list="$items" or count="$n"'
+      );
+    const initial = readDefault(data, model, raw.list ?? raw.count ?? "");
+    if (Array.isArray(initial) && initial.length > 256 || raw.count && Number(initial) > 256)
+      error(
+        d,
+        "limit-exceeded",
+        at,
+        "repeat exceeds 256 instances",
+        "use at most 256 instances across the component tree"
+      );
+    const path = raw.list ?? raw.count ?? "$invalid";
+    const prop = property(data, model, path);
+    if (raw.count ? model.inputs.get(path)?.type !== "number" : prop?.type !== "list")
+      error(
+        d,
+        "list-source",
+        at + (raw.count ? "/count" : "/list"),
+        "repeat source is not a readable " + (raw.count ? "number" : "list"),
+        'use list="$items" or count with a numeric data path, including $items.length'
+      );
+    const choices = /* @__PURE__ */ new Map();
+    for (const [key] of typeof raw.component === "string" ? [["*", raw.component]] : Object.entries(raw.component)) {
+      const child = components.placements.get(node)?.get(key);
+      if (child) choices.set(key, child);
+      if (key !== "*" && !c.document.models[key])
+        error(
+          d,
+          "list-map",
+          at + "/component",
+          "unknown model in component map",
+          "use declared model names"
+        );
+    }
+    if (prop?.of && !choices.has("*") && !choices.has(prop.of))
+      error(
+        d,
+        "list-map",
+        at + "/component",
+        "component map has no entry for " + prop.of,
+        "add the list model to the component map"
+      );
+    for (const [key, child] of choices) {
+      const cc = data.compiled.get(child), expected = cc?.document.instances?.[cc.defaultName]?.model;
+      if (expected && !inherited.has(child) && (key === "*" ? prop?.of : key) && expected !== (key === "*" ? prop?.of : key))
+        error(
+          d,
+          "data-type",
+          at + "/component",
+          "repeat item and component model differ",
+          "use a component for the item model"
+        );
+    }
+    for (const child of new Set(choices.values()))
+      for (const [name, input] of child.inputs)
+        if (!name.startsWith("$") && !name.includes("."))
+          for (let i = 0; i < 256; i++) {
+            const address = node.id + "." + i + "." + name;
+            const old = model.inputs.get(address);
+            if (old && old.type !== input.type)
+              error(
+                d,
+                "data-type",
+                at + "/component",
+                "mapped component input types differ",
+                "use consistent input types across mapped components"
+              );
+            model.inputs.set(address, { ...input, name: address });
+          }
+    plans.push({ node: ni, path, count: !!raw.count, choices, of: prop?.of });
+  }
+  const oldBind = model.bindData;
+  model.bindData = (p, child, node) => {
+    oldBind?.(p, child, node);
+    const value = node.raw.data ? read(data, p, node.raw.data) : inherited.has(child.model) ? data.dataState(p)?.instances[c.defaultName] : void 0;
+    bindContext(data, p, child, value);
+  };
+  const previous = model.nesting;
+  model.nesting = (p) => {
+    const base = previous?.(p);
+    const state = { runs: plans.map((spec) => ({ spec, items: [] })), warnings: [] };
+    const tree = drawTree(model);
+    const draw = {
+      ...tree,
+      nodes: tree.nodes.map((n) => ({ ...n, children: [...n.children] })),
+      roots: [...tree.roots],
+      resources: [...tree.resources]
+    };
+    const clone = { ...model, draw };
+    if (inherited.has(model)) inherited.add(clone);
+    const previousStep = model.afterStep;
+    clone.afterStep = (p2) => {
+      previousStep?.(p2);
+      drawFrame(p2);
+      lists.beforeDraw?.(p2);
+    };
+    Object.defineProperty(p, "model", { value: clone });
+    components.forkModel(model, clone);
+    const resources = assets?.resolvedAssets.get(model);
+    if (resources) assets.resolvedAssets.set(clone, resources);
+    data.compiled.set(clone, c);
+    dynamicTrees.add(draw);
+    drawings.set(p, {
+      mappings: /* @__PURE__ */ new Map(),
+      free: [],
+      resources: [...draw.resources],
+      players: base?.players
+    });
+    states.set(p, state);
+    return extend(p, base, state, data, Child);
+  };
+}
+function readDefault(data, model, path) {
+  const c = data.compiled.get(model);
+  if (!c) return;
+  const m = /^\$(?:([\w-]+):)?(.+)$/.exec(path);
+  if (!m) return c.defaults[path];
+  let v = c.defaults[m[1] ?? c.defaultName];
+  for (const k of m[2].split(".")) v = v && v[k];
+  return v;
+}
+function read(data, p, path) {
+  const s = data.dataState(p);
+  return path.startsWith("$") ? s.read(path) : s.instances[path];
+}
+function property(data, model, path) {
+  const c = data.compiled.get(model);
+  if (!c) return;
+  const m = /^\$(?:([\w-]+):)?(.+)$/.exec(path);
+  if (!m) return;
+  let name = c.document.instances?.[m[1] ?? c.defaultName]?.model;
+  let prop;
+  for (const key of m[2].split(".")) {
+    prop = c.document.models[name ?? ""]?.properties[key];
+    name = prop?.model ?? prop?.of;
+  }
+  return prop;
+}
+let depth = 0, expanded = 0;
+function extend(p, base, state, data, Child) {
+  const each = () => state.runs.flatMap(
+    (r) => r.items.map((item) => ({
+      ...item,
+      run: r,
+      id: p.model.nodes[r.spec.node].id + "." + item.index
+    }))
+  );
+  const target = (name) => {
+    const e = each().find((i) => name.startsWith(i.id + "."));
+    return e && { ...e, key: name.slice(e.id.length + 1) };
+  };
+  const collect = (fn) => Object.fromEntries(
+    each().flatMap(
+      (i) => Object.entries(fn(i.player)).map(([k, v]) => [i.id.replaceAll(".", "/") + "/" + k, v])
+    )
+  );
+  let initializing = true;
+  const extension = {
+    ...base,
+    input(op, name, value) {
+      const t = target(name);
+      if (!t) return base?.input(op, name, value) ?? false;
+      if (op === "set") t.player.set(t.key, value);
+      else if (op === "fire") t.player.fire(t.key);
+      else t.player.toggle(t.key);
+      return true;
+    },
+    get(name) {
+      const t = target(name);
+      return t ? t.player.get(t.key) : base?.get(name);
+    },
+    states: () => ({ ...base?.states(), ...collect((p2) => p2.states()) }),
+    values: () => ({
+      ...base?.values(),
+      ...collect((p2) => ({
+        ...Object.fromEntries(
+          [...p2.model.inputs].filter(([n, i]) => !n.startsWith("$") && !n.includes(".") && i.type !== "trigger").map(([n]) => [n, p2.get(n)])
+        ),
+        ...p2.values()
+      }))
+    }),
+    inspect: () => [
+      ...base?.inspect() ?? [],
+      ...each().flatMap(
+        (i) => i.player.inspect().map((l) => ({ ...l, layer: i.id.replaceAll(".", "/") + "/" + l.layer }))
+      )
+    ],
+    hits: (node, x, y) => base?.hits(node, x, y),
+    pointer(kind, x, y) {
+      base?.pointer(kind, x, y);
+      for (const i of each()) {
+        const raw = p.model.nodes[i.run.spec.node].raw, inv = invert(p.world(i.run.spec.node));
+        const [lx, ly] = inv ? apply(inv, x, y) : [0, 0];
+        i.player.pointer(
+          inv && p.visible(i.run.spec.node) ? kind : "leave",
+          lx - (raw.dx ?? 0) * i.index,
+          ly - (raw.dy ?? 0) * i.index
+        );
+      }
+    },
+    step(dt) {
+      if (!initializing) {
+        if (!depth) expanded = 0;
+        else if (++expanded > 256) throw limit(p, state.runs[0]?.spec.node);
+        depth++;
+      }
+      try {
+        const scope = initializing ? [] : [...p.model.inputs.keys()].filter((n) => n[0] === "$").map((n) => [n, JSON.stringify(p.get(n))]);
+        const result = (initializing ? void 0 : base?.step(dt)) ?? { events: [], settled: true };
+        let total = 0;
+        for (const run of state.runs) {
+          const raw = p.model.nodes[run.spec.node].raw;
+          const source = read(data, p, run.spec.path);
+          const items = run.spec.count ? Array.from({ length: count(source) }, (_, i) => i) : Array.isArray(source) ? source : [];
+          if (total + items.length > 256 || run.spec.count && Number(source) > 256)
+            throw limit(p, run.spec.node);
+          total += items.length;
+          const available = /* @__PURE__ */ new Map();
+          for (const i of run.items) available.set(i.key, [...available.get(i.key) ?? [], i]);
+          run.items = items.flatMap((key, index) => {
+            const type = typeof key === "object" && key ? itemType(data, p, key) ?? run.spec.of : void 0;
+            const model = run.spec.choices.get(type ?? "") ?? run.spec.choices.get("*");
+            if (!model) {
+              if (!state.warnings.some((w) => w.code === "list-map"))
+                state.warnings.push({
+                  code: "list-map",
+                  severity: "warning",
+                  pointer: pointer(p.model, run.spec.node) + "/component",
+                  message: "item model has no component mapping",
+                  hint: "add a mapping for " + type
+                });
+              return [];
+            }
+            let item = available.get(key)?.shift();
+            const created = !item || item.model !== model;
+            if (created)
+              item = {
+                key,
+                model,
+                index,
+                player: new Child(model, { reducedMotion: p.reducedMotion })
+              };
+            if (!item) throw Error("anima: list instance");
+            if (created && raw.size && !item.player.model.doc.hit) {
+              const hits = item.player.hits.bind(item.player), size = raw.size;
+              item.player.hits = (l, x, y) => l.target < 0 ? x >= -l.pad && y >= -l.pad && x <= size[0] + l.pad && y <= size[1] + l.pad : hits(l, x, y);
+            }
+            item.index = index;
+            const scope2 = data.dataState(p);
+            const value = typeof key === "object" ? key : inherited.has(item.player.model) ? scope2.instances[scope2.compiled.defaultName] : void 0;
+            bindContext(data, p, item.player, value, index);
+            item.player.reducedMotion = p.reducedMotion;
+            const r = initializing ? { events: [], settled: true } : item.player.step(dt);
+            result.settled &&= r.settled;
+            for (const e of r.events)
+              result.events.push({
+                ...e,
+                name: raw.id + "." + index + "." + e.name,
+                layer: e.layer === null ? null : raw.id + "/" + index + "/" + e.layer
+              });
+            return [item];
+          });
+          p.drawVersions[run.spec.node] = ++p.drawRevision;
+        }
+        for (const [n, v] of scope) if (v !== JSON.stringify(p.get(n))) result.settled = false;
+        return result;
+      } finally {
+        if (!initializing) depth--;
+      }
+    }
+  };
+  extension.step(0);
+  drawFrame(p);
+  initializing = false;
+  return extension;
+}
+function limit(p, node) {
+  return Object.assign(new Error("anima: limit-exceeded repeat instances"), {
+    code: "limit-exceeded",
+    pointer: node === void 0 ? "/nodes" : pointer(p.model, node),
+    hint: "use at most 256 instances across the component tree"
+  });
+}
+function itemType(data, player, value) {
+  let scope = player;
+  while (scope) {
+    const name = data.dataState(scope)?.modelTypes?.get(value);
+    if (name) return name;
+    scope = parents.get(scope);
+  }
+}
+export {
+  dynamicTrees,
+  listState,
+  lists
+};

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

@@ -0,0 +1 @@
+export { componentsSVG as listsSVG } from '../../components/core/svg.js';

package/modules/lists/core/svg.js

@@ -0,0 +1,4 @@
+import { componentsSVG } from "../../components/core/svg.js";
+export {
+  componentsSVG as listsSVG
+};

package/modules/lists/manifest.d.ts

@@ -0,0 +1,31 @@
+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;
+    }[];
+    adapters: {
+        'packages/core/src/modules/lists/index.ts': string;
+        'packages/core/src/modules/lists/svg.ts': string;
+        'packages/markup/src/lists.ts': string;
+        'packages/web/src/lists.ts': string;
+    };
+    exports: {
+        'core:./lists': string;
+        'markup:./lists': string;
+        'web:./lists': string;
+    };
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/lists/manifest.js

@@ -0,0 +1,46 @@
+const after = ["components", "data", "bind", "convert", "derive"];
+var manifest_default = {
+  ...{
+    name: "lists",
+    summary: "Lists: repeat a component for each item of a data list, keeping each row\u2019s state across edits.",
+    after: [],
+    core: { entry: "core/index.ts", export: "lists", svg: "core/svg.ts", svgExport: "listsSVG" },
+    web: [{ name: "lists", budget: 5120 }],
+    adapters: {
+      "packages/core/src/modules/lists/index.ts": "core/index.ts",
+      "packages/core/src/modules/lists/svg.ts": "core/svg.ts",
+      "packages/markup/src/lists.ts": "markup/index.ts",
+      "packages/web/src/lists.ts": "web/index.ts"
+    },
+    exports: {
+      "core:./lists": "packages/core/src/modules/lists/index.ts",
+      "markup:./lists": "packages/markup/src/lists.ts",
+      "web:./lists": "packages/web/src/lists.ts"
+    },
+    tests: [
+      "modules/lists/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",
+      "packages/cli/test/authoring.test.ts"
+    ],
+    conformance: [
+      "lists-",
+      "components-list",
+      "components-list-map",
+      "components-list-size-override",
+      "components-explicit-context",
+      "components-inherited-context",
+      "data-binding-relative",
+      "data-property-symbol-list-index",
+      "data-converter-number-to-list"
+    ],
+    docs: ["modules/lists/SPEC.md"]
+  },
+  after
+};
+export {
+  after,
+  manifest_default as default
+};

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

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

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

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

package/modules/lists/web/index.js

@@ -0,0 +1,72 @@
+import { lists } from "../core/index.js";
+import { listsSVG } from "../core/svg.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(lists);
+Icon.registerSVGBackend("lists", listsSVG);
+let previous = Icon.orderSVG;
+const views = /* @__PURE__ */ new WeakMap();
+const hosts = /* @__PURE__ */ new WeakMap();
+const token = (el) => [el.node, el.role, el.key, el.index].join(":");
+const order = (frame, elements) => {
+  if (!Icon.modules.get("lists").dynamicTrees.has(frame.tree)) {
+    previous?.(frame, elements);
+    return;
+  }
+  const svg = elements[0]?.[1].closest("svg");
+  const icon = svg?.getRootNode() instanceof ShadowRoot ? svg.getRootNode().host : void 0;
+  if (!svg || !icon) return;
+  if (icon.player) hosts.set(icon.player, icon);
+  const signature = JSON.stringify([frame.tree.nodes, frame.tree.resources]);
+  let view = views.get(icon);
+  if (!view || view.signature !== signature) {
+    view = { signature, retained: [...elements], elements };
+    views.set(icon, view);
+    icon.attributeChangedCallback("renderer", null, icon.getAttribute("renderer"));
+    return;
+  }
+  view.elements = elements;
+  if (view.retained) {
+    const retained = view.retained;
+    view.retained = void 0;
+    const index = (records) => {
+      const nodes = new Map(records.map((r) => [r[1], r]));
+      const path = (dom) => {
+        const rec = nodes.get(dom);
+        return (dom.parentElement ? path(dom.parentElement) : "") + "/" + (rec ? token(rec[0]) : dom.localName);
+      };
+      return new Map(records.map((r) => [path(r[1]), r]));
+    };
+    const old = index(retained), fresh = index(elements);
+    const keys = new Map([...fresh].map(([key, record]) => [record[1], key]));
+    const restore = (dom) => {
+      const children = [...dom.children].map(restore);
+      const key = keys.get(dom), record = key && fresh.get(key), match = key && old.get(key);
+      if (!record || !match || match[1].localName !== dom.localName) {
+        dom.replaceChildren(...children);
+        return dom;
+      }
+      const target = match[1];
+      for (const attr of [...target.attributes])
+        if (!dom.hasAttribute(attr.name)) target.removeAttribute(attr.name);
+      for (const attr of [...dom.attributes]) target.setAttribute(attr.name, attr.value);
+      target.replaceChildren(...children);
+      record[1] = target;
+      return target;
+    };
+    svg.replaceChildren(...[...svg.children].map(restore));
+  }
+  previous?.(frame, elements);
+};
+Object.defineProperty(Icon, "orderSVG", {
+  configurable: true,
+  get: () => order,
+  set: (next) => {
+    if (next !== order) previous = next;
+  }
+});
+lists.beforeDraw = (player) => {
+  const icon = hosts.get(player), view = icon && views.get(icon), frame = player.drawData;
+  if (icon && view && frame && view.signature !== JSON.stringify([frame.tree.nodes, frame.tree.resources]))
+    order(frame, view.elements);
+};

package/modules/machine/core/index.d.ts

@@ -0,0 +1,3 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+export type { Actions, StateOptions, TransitionOptions } from './types.js';
+export declare const machine: Module;