animl 0.0.0-stage → 0.1.1

package/modules/assetio/web/index.js

@@ -0,0 +1,97 @@
+import "../../../packages/web/src/index.js";
+import { assetCatalogs, resolvedAssets, imagePixels } from "../../assets/core/index.js";
+const Icon = customElements.get("anima-icon");
+const policies = /* @__PURE__ */ new WeakMap();
+Object.defineProperty(Icon.prototype, "assetPolicy", {
+  get() {
+    return policies.get(this) ?? "local";
+  },
+  set(value) {
+    if (value !== "local" && value !== "any")
+      throw new RangeError("assetPolicy must be local or any");
+    policies.set(this, value);
+  }
+});
+Icon.prototype.resolveAsset = async function(name, info) {
+  const resolver = this.assets;
+  const resolved = resolver ? await resolver.call(this, name, structuredClone(info)) : info.source;
+  if (resolved instanceof Blob) return resolved;
+  const base = this.getAttribute("src");
+  const url = new URL(resolved, base ? new URL(base, document.baseURI).href : document.baseURI);
+  if (!resolver && (!["http:", "https:", "data:", "blob:"].includes(url.protocol) || this.assetPolicy !== "any" && url.protocol !== "data:" && url.origin !== location.origin))
+    throw new Error("asset policy rejects source; use a resolver or assetPolicy=any");
+  return url.href;
+};
+const previousLoader = Icon.loadAssets;
+Icon.loadAssets = async (icon, model) => {
+  const prior = await previousLoader?.(icon, model);
+  const seen = /* @__PURE__ */ new Map();
+  const load = async (model2) => {
+    if (seen.has(model2.doc)) return;
+    const records = Object.fromEntries(
+      Object.entries(model2.doc.assets ?? {}).map(([k, a]) => [
+        k,
+        { ...a }
+      ])
+    );
+    seen.set(model2.doc, records);
+    resolvedAssets.set(model2, records);
+    await Promise.all(
+      Object.entries(records).map(async ([name, asset]) => {
+        if (asset.type !== "image") return;
+        let objectURL;
+        try {
+          const resolved = await icon.resolveAsset(name, asset);
+          const source = resolved instanceof Blob ? objectURL = URL.createObjectURL(resolved) : resolved;
+          const image = new Image();
+          image.src = source;
+          await image.decode();
+          imagePixels.set(asset, [image.naturalWidth, image.naturalHeight]);
+          asset.source = resolved instanceof Blob ? await new Promise((res, rej) => {
+            const reader = new FileReader();
+            reader.onload = () => res(String(reader.result));
+            reader.onerror = rej;
+            reader.readAsDataURL(resolved);
+          }) : source;
+          asset.width ??= image.naturalWidth;
+          asset.height ??= image.naturalHeight;
+        } catch {
+          throw [
+            {
+              code: "asset-load",
+              severity: "error",
+              pointer: "/assets/" + name.replace(/~/g, "~0").replace(/\//g, "~1") + "/source",
+              message: `cannot load image asset ${name}`,
+              hint: "check the source or icon.assets resolver"
+            }
+          ];
+        } finally {
+          if (objectURL) URL.revokeObjectURL(objectURL);
+        }
+      })
+    );
+    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() ?? []]),
+        ...Icon.modules.get("componentpaint")?.sources.get(model2)?.values() ?? []
+      ].map(load)
+    );
+  };
+  await load(model);
+  const own = initialize(seen);
+  return prior ? (player) => {
+    const initialized = own(player);
+    return prior(player) || initialized;
+  } : own;
+};
+function initialize(records) {
+  return (player) => {
+    assetCatalogs.set(player, records);
+    if (resolvedAssets.has(player)) return false;
+    resolvedAssets.set(player, records.get(player.model.doc));
+    return true;
+  };
+}

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

@@ -0,0 +1,32 @@
+import type { Geometry } from '../../../packages/core/src/draw.js';
+import type { Module } from '../../../packages/core/src/modules.js';
+export interface Asset {
+    type: 'image' | 'font' | 'audio' | 'blob';
+    source: string;
+    storage?: 'embedded' | 'referenced';
+    width?: number;
+    height?: number;
+    size?: number;
+    mime?: string;
+    duration?: number;
+    start?: number;
+    end?: number;
+    encode?: 'png' | 'jpeg' | 'webp';
+    quality?: number;
+    export?: boolean;
+    metadata?: Record<string, unknown>;
+}
+/** Decoded dimensions are tied to resource identity, never authored layout or JSON. */
+export declare const imagePixels: WeakMap<Asset, [number, number]>;
+export type ImageResource = NonNullable<Geometry['image']> & {
+    pixels?: [number, number];
+};
+export declare const fits: string[];
+export declare const aligns: string[];
+export declare function validDataURI(s: string): boolean;
+export declare const resolvedAssets: WeakMap<object, Record<string, Asset>>;
+export declare const assetCatalogs: WeakMap<object, Map<object, Record<string, Asset>>>;
+export declare const assets: Module & {
+    resolvedAssets: typeof resolvedAssets;
+    catalogs: typeof assetCatalogs;
+};

package/modules/assets/core/index.js

@@ -0,0 +1,255 @@
+import { after } from "../manifest.js";
+import { NAME } from "../../../packages/core/src/registry.js";
+import { ptr } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+const imagePixels = /* @__PURE__ */ new WeakMap();
+const asset = {
+  k: "obj",
+  p: {
+    type: { k: "str", of: ["image", "font", "audio", "blob"] },
+    source: { k: "str", markup: "src" },
+    storage: { k: "str", of: ["embedded", "referenced"] },
+    width: { k: "num", gt: 0 },
+    height: { k: "num", gt: 0 },
+    size: { k: "num", min: 0, int: true },
+    mime: { k: "str" },
+    duration: { k: "num", min: 0 },
+    start: { k: "num", min: 0 },
+    end: { k: "num", gt: 0 },
+    encode: { k: "str", of: ["png", "jpeg", "webp"] },
+    quality: { k: "num", min: 0, max: 1 },
+    export: { k: "bool" },
+    metadata: { k: "map", of: { k: "any" }, markup: "metadata" }
+  },
+  req: ["type", "source"]
+};
+const fits = [
+  "contain",
+  "cover",
+  "fill",
+  "resize",
+  "none",
+  "scale-down",
+  "fit-width",
+  "fit-height"
+];
+const aligns = [
+  "center",
+  "top-left",
+  "top",
+  "top-right",
+  "left",
+  "right",
+  "bottom-left",
+  "bottom",
+  "bottom-right"
+];
+function validDataURI(s) {
+  const m = /^data:([^,]*),(.*)$/s.exec(s);
+  if (!m || !m[2]) return false;
+  if (m[1].endsWith(";base64"))
+    return /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(m[2]);
+  return !/%(?![0-9a-fA-F]{2})/.test(m[2]);
+}
+const resolvedAssets = /* @__PURE__ */ new WeakMap();
+const assetCatalogs = /* @__PURE__ */ new WeakMap();
+const assets = {
+  catalogs: assetCatalogs,
+  resolvedAssets,
+  name: "assets",
+  after,
+  init(registry) {
+    const components = registry.get("components");
+    if (components) {
+      const previous = components.loadComponent;
+      const key = components.componentKey;
+      const catalogs = /* @__PURE__ */ new WeakMap();
+      let serial = 0;
+      components.componentKey = (model, name) => {
+        const catalog = model.doc.assets ?? model.doc;
+        if (!catalogs.has(catalog)) catalogs.set(catalog, ++serial);
+        return (key?.(model, name) ?? name) + ":" + catalogs.get(catalog);
+      };
+      components.loadComponent = (parent, name, doc, shares, run, itemModel) => {
+        if (parent.doc.assets) doc = { ...doc, assets: { ...parent.doc.assets, ...doc.assets } };
+        return previous ? previous(parent, name, doc, shares, run, itemModel) : run(doc);
+      };
+    }
+    return { ...this, init: void 0 };
+  },
+  entries: [
+    {
+      target: "document",
+      shapes: { assets: { k: "map", of: asset, key: NAME } },
+      elements: {
+        asset: {
+          shape: {
+            ...asset,
+            p: { name: { k: "str", re: NAME }, ...asset.p },
+            req: ["name", ...asset.req]
+          }
+        }
+      }
+    },
+    {
+      target: "image",
+      node: {},
+      shapes: {
+        asset: { k: "str", re: NAME },
+        x0: { ...{ k: "num" }, markup: "x0" },
+        y0: { k: "num" },
+        width: { k: "num", gt: 0 },
+        height: { k: "num", gt: 0 },
+        fit: { k: "str", of: fits },
+        align: { k: "str", of: aligns },
+        sampling: { k: "str", of: ["bilinear", "nearest"] }
+      },
+      props: {
+        width: { type: "number", min: 0 },
+        height: { type: "number", min: 0 }
+      },
+      required: ["id", "type", "asset", "x0", "y0", "width", "height"]
+    }
+  ],
+  model(node, key) {
+    if (String(node.type) === "image" && key === "asset")
+      return { prop: { type: "string", feature: "assets", discrete: true }, rest: node.raw.asset };
+  },
+  prepare(model) {
+    if (model.doc.requires?.includes("assets")) model.doc.assets ??= {};
+  },
+  outline(p, i) {
+    const n = p.model.nodes[i];
+    if (String(n.type) !== "image") return;
+    const x = n.raw.x0, y = n.raw.y0;
+    const right = x + p.num(i, "width", n.raw.width);
+    const bottom = y + p.num(i, "height", n.raw.height);
+    return [{ pts: [x, y, right, y, right, bottom, x, bottom], closed: true }];
+  },
+  fillContains(p, i, polys, x, y) {
+    if (String(p.model.nodes[i].type) !== "image") return;
+    const [left, top, right, , , bottom] = polys[0].pts;
+    return x >= left && x <= right && y >= top && y <= bottom;
+  },
+  load(_model, raw, d) {
+    const records = raw.assets ?? {};
+    for (const [name, a] of Object.entries(records)) {
+      const p = ptr("/assets", name);
+      for (const key of ["start", "end", "duration", "encode", "quality"]) {
+        if (a[key] === void 0) continue;
+        const image = key === "encode" || key === "quality";
+        if (a.type !== (image ? "image" : "audio"))
+          d.err(
+            "asset-option",
+            p + "/" + key,
+            V && "option is not valid for this asset type",
+            V && "use image encoding options on images and clip times on audio"
+          );
+      }
+      if (a.quality !== void 0 && !a.encode)
+        d.err(
+          "asset-option",
+          p + "/quality",
+          V && "quality needs encode",
+          V && "choose jpeg, webp or png encoding"
+        );
+      if (a.end !== void 0 && (a.end <= (a.start ?? 0) || a.duration !== void 0 && a.end > a.duration))
+        d.err(
+          "asset-clip",
+          p + "/end",
+          V && "clip end must follow start and fit the source duration",
+          V && "use 0 <= start < end <= duration"
+        );
+      if (a.start !== void 0 && a.duration !== void 0 && a.start >= a.duration)
+        d.err(
+          "asset-clip",
+          p + "/start",
+          V && "clip start is outside source duration",
+          V && "use a start smaller than duration"
+        );
+      if (!a.source.trim())
+        d.err(
+          "missing-source",
+          p + "/source",
+          V && "asset source is empty",
+          V && "provide a data URI or URL"
+        );
+      else if (a.source.startsWith("data:") && !validDataURI(a.source))
+        d.err(
+          "bad-data-uri",
+          p + "/source",
+          V && "invalid data URI",
+          V && "use a valid percent-encoded or base64 data URI"
+        );
+      else if (a.storage && a.storage === "embedded" !== a.source.startsWith("data:"))
+        d.err(
+          "asset-storage",
+          p + "/storage",
+          V && "storage disagrees with source",
+          V && "embedded uses data:; referenced uses a URL"
+        );
+    }
+    const visit = (nodes, base) => nodes.forEach((n, i) => {
+      const p = base + "/" + i;
+      if (n.type === "image") {
+        if (!raw.requires?.includes("paint"))
+          d.err(
+            "undeclared-feature",
+            p + "/type",
+            V && "image needs paint",
+            V && 'add "paint" to requires'
+          );
+        const a = Object.hasOwn(records, n.asset) ? records[n.asset] : void 0;
+        if (!a)
+          d.err(
+            "unknown-asset",
+            p + "/asset",
+            V && "unknown image asset",
+            V && "declare it in assets"
+          );
+        else if (a.type !== "image")
+          d.err(
+            "asset-type",
+            p + "/asset",
+            V && "image node needs an image asset",
+            V && "use an asset with type image"
+          );
+      }
+      if (n.children) visit(n.children, p + "/children");
+    });
+    visit(raw.nodes, "/nodes");
+  },
+  draw: {
+    frame(p, i, data) {
+      const n = p.model.nodes[i];
+      if (String(n.type) !== "image") return;
+      const r = n.raw, id = String(p.prop(i, "asset") ?? r.asset), catalog = resolvedAssets.get(p) ?? resolvedAssets.get(p.model) ?? p.model.doc.assets, a = catalog[id]?.type === "image" ? catalog[id] : catalog[r.asset];
+      data.geometry = {
+        kind: "image",
+        x: r.x0,
+        y: r.y0,
+        width: p.num(i, "width", r.width),
+        height: p.num(i, "height", r.height),
+        image: {
+          asset: id,
+          source: a.source,
+          width: a.width,
+          height: a.height,
+          fit: r.fit ?? "contain",
+          align: r.align ?? "center",
+          sampling: r.sampling ?? "bilinear",
+          pixels: imagePixels.get(a)
+        }
+      };
+    }
+  }
+};
+export {
+  aligns,
+  assetCatalogs,
+  assets,
+  fits,
+  imagePixels,
+  resolvedAssets,
+  validDataURI
+};

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

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

package/modules/assets/core/svg.js

@@ -0,0 +1,53 @@
+import { fmt } from "../../../packages/core/src/draw.js";
+const assetsSVG = {
+  tree(draw, tree) {
+    const visit = (els) => {
+      for (const el of els) {
+        if (el.role === "shape" && draw.nodes[el.node].kind === "image") {
+          el.tag = "svg";
+          el.role = "module:image-box";
+          el.kids = [{ tag: "image", role: "module:image", node: el.node, kids: [] }];
+        } else visit(el.kids);
+      }
+    };
+    visit(tree.defs);
+    visit(tree.root);
+  },
+  attrs(f, el, _paint, _id, a) {
+    if (!el.role.startsWith("module:image")) return;
+    const g = f.nodes[el.node]?.geometry;
+    if (!g?.image) return;
+    const image = g.image;
+    const w = g.width, h = g.height;
+    if (el.role === "module:image-box") {
+      Object.assign(a, {
+        x: fmt(g.x),
+        y: fmt(g.y),
+        width: fmt(w),
+        height: fmt(h),
+        viewBox: `0 0 ${fmt(w)} ${fmt(h)}`,
+        overflow: "hidden",
+        preserveAspectRatio: "none"
+      });
+      return;
+    }
+    const iw = image.width ?? w, ih = image.height ?? h;
+    const sx = w / iw, sy = h / ih;
+    const scale = image.fit === "cover" ? Math.max(sx, sy) : image.fit === "none" ? 1 : image.fit === "scale-down" ? Math.min(1, sx, sy) : image.fit === "fit-width" ? sx : image.fit === "fit-height" ? sy : Math.min(sx, sy);
+    const fill = image.fit === "fill" || image.fit === "resize";
+    const dw = fill ? w : iw * scale, dh = fill ? h : ih * scale;
+    const factor = (lo, hi) => image.align.includes(lo) ? 0 : image.align.includes(hi) ? 1 : 0.5;
+    Object.assign(a, {
+      href: image.source,
+      x: fmt((w - dw) * factor("left", "right")),
+      y: fmt((h - dh) * factor("top", "bottom")),
+      width: fmt(dw),
+      height: fmt(dh),
+      preserveAspectRatio: "none",
+      "image-rendering": image.sampling === "nearest" ? "pixelated" : "auto"
+    });
+  }
+};
+export {
+  assetsSVG
+};

package/modules/assets/manifest.d.ts

@@ -0,0 +1,34 @@
+export declare const after: string[];
+declare const _default: {
+    name: string;
+    summary: string;
+    after: string[];
+    core: {
+        entry: string;
+        export: string;
+        svg: string;
+        svgExport: string;
+    };
+    web: {
+        name: string;
+        buildOrder: number;
+        sizeOrder: number;
+        budget: number;
+        over: string;
+    }[];
+    adapters: {
+        'packages/core/src/modules/assets/index.ts': string;
+        'packages/core/src/modules/assets/svg.ts': string;
+        'packages/web/src/assets.ts': string;
+    };
+    exports: {
+        'core:./assets': string;
+        'core:./assets-svg': string;
+        'web:./assets': string;
+    };
+    markupHook: null;
+    tests: string[];
+    conformance: string[];
+    docs: string[];
+};
+export default _default;

package/modules/assets/manifest.js

@@ -0,0 +1,82 @@
+const after = ["bind", "components"];
+var manifest_default = {
+  name: "assets",
+  summary: "Images and other assets: an assets map, image nodes, fit and alignment, and image draw data.",
+  after,
+  core: {
+    entry: "core/index.ts",
+    export: "assets",
+    svg: "core/svg.ts",
+    svgExport: "assetsSVG"
+  },
+  web: [
+    {
+      name: "assets",
+      buildOrder: 7,
+      sizeOrder: 9,
+      budget: 1984,
+      over: "assetio"
+    }
+  ],
+  adapters: {
+    "packages/core/src/modules/assets/index.ts": "core/index.ts",
+    "packages/core/src/modules/assets/svg.ts": "core/svg.ts",
+    "packages/web/src/assets.ts": "web/index.ts"
+  },
+  exports: {
+    "core:./assets": "packages/core/src/modules/assets/index.ts",
+    "core:./assets-svg": "packages/core/src/modules/assets/svg.ts",
+    "web:./assets": "packages/web/src/assets.ts"
+  },
+  markupHook: null,
+  tests: [
+    "modules/assets/test/**/*.test.ts",
+    "packages/markup/test/compile.test.ts",
+    "packages/markup/test/corpus.test.ts",
+    "packages/markup/test/decompile.test.ts",
+    "packages/markup/test/format.test.ts",
+    "packages/markup/test/invalid.test.ts",
+    "packages/markup/test/names.test.ts"
+  ],
+  conformance: [
+    "assets-",
+    "assets-audio",
+    "assets-audio-clip",
+    "assets-audio-export-source",
+    "assets-audio-import-flac",
+    "assets-audio-import-mp3",
+    "assets-audio-import-wav",
+    "assets-blob",
+    "assets-cdn-disable",
+    "assets-exclude-export",
+    "assets-host-decode-audio",
+    "assets-image-encoding-jpeg",
+    "assets-image-encoding-png",
+    "assets-image-encoding-webp",
+    "assets-image-export-controls",
+    "assets-image-filter-bilinear",
+    "assets-image-filter-nearest",
+    "assets-image-import-jpeg",
+    "assets-image-import-jpg",
+    "assets-image-import-png",
+    "assets-image-import-webp",
+    "assets-image-wrap-x-clamp",
+    "assets-image-wrap-x-mirror",
+    "assets-image-wrap-x-repeat",
+    "assets-image-wrap-y-clamp",
+    "assets-image-wrap-y-mirror",
+    "assets-image-wrap-y-repeat",
+    "assets-lottie-import",
+    "assets-metadata",
+    "assets-replacement-scope-image",
+    "assets-svg-import",
+    "host-api-asset-cdn-policy",
+    "host-api-asset-loader",
+    "host-api-asset-metadata"
+  ],
+  docs: ["spec/SPEC.md", "spec/ANIML.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1,10 @@
+import '../../assetio/web/index.js';
+import { type Asset } from 'animl/assets';
+import '../../../packages/web/src/index.js';
+declare module '../../../packages/web/src/index.ts' {
+    interface AnimaIcon {
+        assetPolicy: 'local' | 'any';
+        resolveAsset(name: string, info: Readonly<Asset>): Promise<string | Blob>;
+        assets?: (name: string, info: Readonly<Asset>) => string | Blob | Promise<string | Blob>;
+    }
+}

package/modules/assets/web/index.js

@@ -0,0 +1,7 @@
+import "../../assetio/web/index.js";
+import { assets } from "animl/assets";
+import { assetsSVG } from "animl/assets-svg";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(assets);
+Icon.registerSVGBackend("assets", assetsSVG);

package/modules/bind/capabilities/data-bind-listener-actions/registry.d.ts

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

package/modules/bind/capabilities/data-bind-listener-actions/registry.js

@@ -0,0 +1,28 @@
+import { NAME } from "../../../../packages/core/src/registry.js";
+const names = {
+  k: "alt",
+  of: [
+    { k: "str", re: NAME },
+    { k: "arr", of: { k: "str", re: NAME } }
+  ]
+};
+const action = {
+  k: "obj",
+  p: {
+    fire: names,
+    toggle: names,
+    emit: { k: "str", re: NAME },
+    set: {
+      k: "map",
+      key: NAME,
+      of: { k: "alt", of: [{ k: "num" }, { k: "bool" }, { k: "str" }] }
+    }
+  }
+};
+const entries = [
+  { target: "state", shapes: { entry: action, exit: action } },
+  { target: "transition", shapes: { actions: action } }
+];
+export {
+  entries
+};

package/modules/bind/core/expression.d.ts

@@ -0,0 +1,25 @@
+import type { Value } from '../../../packages/core/src/load.js';
+export type BindType = 'number' | 'bool' | 'color' | 'string';
+export declare const functions: Map<string, {
+    arity: number;
+    run: ((...args: number[]) => number) & {
+        enabled?: () => boolean;
+    };
+}>;
+export declare function registerFunction(name: string, arity: number, run: (...args: number[]) => number): void;
+export type InputScope = ReadonlyMap<string, import('../../../packages/core/src/load.js').Value>;
+export interface Expression {
+    type: BindType;
+    at: number;
+    inputs: Set<string>;
+    evaluate(scope: InputScope): Value;
+}
+export declare class BindError extends Error {
+    code: string;
+    at: number;
+    constructor(code: string, at: number, message: string);
+}
+/** Positions are zero-based UTF-16 offsets; names resolve against the supplied input types. */
+export declare function expression(source: string, types: ReadonlyMap<string, string>): Expression;
+/** Reusable for component input bindings. Non-finite arithmetic resolves to zero. */
+export declare function evaluate(e: Expression, scope: InputScope): Value;