animl 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,6 @@
+import type { DrawFrame, DrawPaint } from 'animl';
+export type CanvasSourceHook = (paint: DrawPaint, context: CanvasRenderingContext2D, render: (frame: DrawFrame, width: number, height: number) => HTMLCanvasElement) => CanvasPattern | undefined;
+export type CanvasSourceHost = typeof import('../../../packages/web/src/index.js').AnimaIcon & {
+    canvasSources?: CanvasSourceHook[];
+    canvasShapes?: ((ctx: CanvasRenderingContext2D, node: import('animl').DrawNode, brush: (paint: DrawPaint) => string | CanvasGradient | CanvasPattern) => boolean)[];
+};

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

@@ -0,0 +1,15 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { DrawColor } from '../../../packages/core/src/draw.js';
+export interface ColorMix {
+    a: DrawColor;
+    b: DrawColor;
+    t: number;
+}
+declare module '../../../packages/core/src/draw.ts' {
+    interface DrawPaint {
+        mix?: ColorMix;
+    }
+}
+/** CSS color-mix(in srgb) interpolates premultiplied alpha, unlike colour tracks. */
+export declare function mixColor(a: string, b: string, t: number): string;
+export declare const colormix: Module;

package/modules/colormix/core/index.js

@@ -0,0 +1,115 @@
+import { drawColor } from "../../../packages/core/src/draw.js";
+import { parseHex, formatHex } from "../../../packages/core/src/color.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { after } from "../manifest.js";
+function mixColor(a, b, t) {
+  const x = parseHex(a), y = parseHex(b);
+  const alpha = x[3] * (1 - t) + y[3] * t;
+  const rgb = [0, 1, 2].map(
+    (i) => alpha ? Math.round((x[i] * x[3] * (1 - t) + y[i] * y[3] * t) / alpha) : 0
+  );
+  return formatHex([...rgb, Math.round(alpha)]);
+}
+const shape = {
+  k: "obj",
+  element: "colorMix",
+  p: { a: { k: "str" }, b: { k: "str" }, t: { k: "num" } },
+  req: ["a", "b", "t"]
+};
+const colormix = {
+  name: "colormix",
+  after,
+  entries: ["fill", "stroke"].map((target) => ({
+    target,
+    shapes: { mix: shape },
+    required: [],
+    ...target === "fill" ? {
+      elements: {
+        colorMix: {
+          shape,
+          target: {
+            attribute: "paint",
+            default: "fill",
+            choices: ["fill", "stroke"],
+            path: ["mix"]
+          }
+        }
+      }
+    } : {}
+  })),
+  model(n, key) {
+    const m = /^(fill|stroke)\.mix\.t$/.exec(key);
+    if (!m) return;
+    const paint = n.raw[m[1]];
+    if (paint?.mix)
+      return { prop: { type: "number", min: 0, max: 1, feature: "colormix" }, rest: paint.mix.t };
+  },
+  load(model, _raw, d) {
+    const paths = [], counts = /* @__PURE__ */ new Map();
+    model.nodes.forEach((n, i) => {
+      const j = counts.get(n.parent) ?? 0;
+      counts.set(n.parent, j + 1);
+      paths[i] = (n.parent < 0 ? "/nodes" : paths[n.parent] + "/children") + "/" + j;
+      const validate = (paint, at) => {
+        if (!paint) return;
+        const mix = paint.mix;
+        if (!mix) {
+          if (paint.color === void 0 && paint.type === void 0 && paint.paint === void 0)
+            d.err("missing-key", at, V && "paint needs a colour source", V && "add color or mix");
+          return;
+        }
+        if (["color", "type", "paint"].some((k) => paint[k] !== void 0))
+          d.err(
+            "colormix-source",
+            at + "/mix",
+            V && "mix cannot accompany another paint source",
+            V && "remove color, type or paint"
+          );
+        for (const k of ["a", "b"]) {
+          const c = mix[k], literal = parseHex(c), fallback = model.colors[c];
+          if (!literal && (!Object.hasOwn(model.colors, c) || !parseHex(fallback)))
+            d.err(
+              "colormix-color",
+              at + "/mix/" + k,
+              V && "mix needs a hex colour or a slot with a hex default",
+              V && "use #rgb, #rrggbb, #rrggbbaa or declare a slot with a hex default"
+            );
+        }
+        if (mix.t < 0 || mix.t > 1)
+          d.err(
+            "colormix-range",
+            at + "/mix/t",
+            V && "mix weight is outside 0..1",
+            V && "use a number from 0 to 1"
+          );
+      };
+      for (const kind of ["fill", "stroke"]) validate(n.raw[kind], paths[i] + "/" + kind);
+      n.raw.paints?.forEach((p, j2) => {
+        for (const kind of ["fill", "stroke"])
+          if (p[kind]?.mix)
+            d.err(
+              "colormix-source",
+              paths[i] + "/paints/" + j2 + "/" + kind + "/mix",
+              V && "mix uses the node fill or stroke",
+              V && "move mix to fill or stroke on its own node"
+            );
+      });
+    });
+  },
+  draw: {
+    frame(p, i, data) {
+      for (const paint of data.paints) {
+        const key = paint.key ?? paint.kind;
+        const raw = key.split(".").reduce((o, k) => o?.[k], p.model.nodes[i].raw);
+        if (!raw?.mix) continue;
+        const { a, b } = raw.mix, t = p.num(i, key + ".mix.t", raw.mix.t);
+        paint.mix = { a: drawColor(p, a), b: drawColor(p, b), t };
+        paint.color = mixColor(p.model.colors[a] ?? a, p.model.colors[b] ?? b, t);
+      }
+    }
+  }
+};
+export {
+  colormix,
+  mixColor
+};

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

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

package/modules/colormix/core/svg.js

@@ -0,0 +1,19 @@
+import { paintColor } from "../../../packages/core/src/svg.js";
+import { fmt } from "../../../packages/core/src/draw.js";
+import { parseHex } from "../../../packages/core/src/color.js";
+import { mixColor } from "./index.js";
+const colormixSVG = {
+  attrs(f, el, slots, _id, a) {
+    if (el.role !== "shape" && !(el.role === "module:composite" && ["fill-only", "stroke-only"].includes(el.key)))
+      return;
+    const paints = f.nodes[el.node].paints;
+    for (const paint of paints) {
+      if (!paint.mix || a[paint.kind] === "none") continue;
+      const { a: x, b: y, t } = paint.mix, c = paintColor(x, slots), d = paintColor(y, slots);
+      a[paint.kind] = parseHex(c) && parseHex(d) ? mixColor(c, d, t) : `color-mix(in srgb, ${c}, ${d} ${fmt(t * 100)}%)`;
+    }
+  }
+};
+export {
+  colormixSVG
+};

package/modules/colormix/manifest.d.ts

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

package/modules/colormix/manifest.js

@@ -0,0 +1,42 @@
+const after = ["paint", "composite", "surface"];
+var manifest_default = {
+  name: "colormix",
+  summary: "Colour mixing: a fill or stroke colour that mixes two colours or slots by an animatable amount.",
+  after,
+  core: {
+    entry: "core/index.ts",
+    export: "colormix",
+    svg: "core/svg.ts",
+    svgExport: "colormixSVG"
+  },
+  web: [
+    { name: "colormix", budget: 3072 },
+    { name: "markup-colormix", budget: 512, over: "index", authoring: true }
+  ],
+  adapters: {
+    "packages/core/src/modules/colormix/index.ts": "core/index.ts",
+    "packages/core/src/modules/colormix/svg.ts": "core/svg.ts",
+    "packages/web/src/colormix.ts": "web/index.ts",
+    "packages/web/src/markup-colormix.ts": "web/markup.ts",
+    "packages/markup/src/colormix.ts": "markup/index.ts"
+  },
+  exports: {
+    "core:./colormix": "packages/core/src/modules/colormix/index.ts",
+    "web:./colormix": "packages/web/src/colormix.ts",
+    "web:./markup-colormix": "packages/web/src/markup-colormix.ts",
+    "markup:./colormix": "packages/markup/src/colormix.ts"
+  },
+  tests: [
+    "modules/colormix/test/**/*.test.ts",
+    "packages/markup/test/compile.test.ts",
+    "packages/markup/test/corpus.test.ts",
+    "packages/markup/test/decompile.test.ts",
+    "packages/markup/test/names.test.ts"
+  ],
+  conformance: [],
+  docs: ["spec/SPEC.md"]
+};
+export {
+  after,
+  manifest_default as default
+};

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

@@ -0,0 +1 @@
+export { paintMarkup as colormixMarkup } from '../../paint/markup/index.js';

package/modules/colormix/markup/index.js

@@ -0,0 +1,4 @@
+import { paintMarkup } from "../../paint/markup/index.js";
+export {
+  paintMarkup as colormixMarkup
+};

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

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

package/modules/colormix/web/index.js

@@ -0,0 +1,49 @@
+import { colormix } from "../core/index.js";
+import { colormixSVG } from "../core/svg.js";
+import { paintColor } from "../../../packages/core/src/svg.js";
+import { fmt } from "../../../packages/core/src/draw.js";
+import "../../../packages/web/src/index.js";
+const Icon = customElements.get("anima-icon");
+Icon.registerModule(colormix);
+Icon.registerSVGBackend("colormix", colormixSVG);
+let style;
+let factory = Icon.renderers.canvas;
+const wrap = (make) => make && ((icon) => {
+  const renderer = make(icon), draw = renderer.draw.bind(renderer);
+  renderer.draw = (frame, force) => {
+    if (!icon.player?.model.doc.requires?.includes("colormix")) return draw(frame, force);
+    const prev = style;
+    style = getComputedStyle(icon);
+    try {
+      draw(frame, force);
+    } finally {
+      style = prev;
+    }
+  };
+  return renderer;
+});
+Object.defineProperty(Icon.renderers, "canvas", {
+  configurable: true,
+  get: () => wrap(factory),
+  set: (next) => {
+    factory = next;
+  }
+});
+const tile = document.createElement("canvas");
+tile.width = tile.height = 1;
+const ctx = tile.getContext("2d");
+(Icon.canvasSources ??= []).push((paint, target) => {
+  if (!paint.mix) return;
+  const { a, b, t } = paint.mix;
+  const slots = {
+    slot: (name, fallback) => style?.getPropertyValue("--anima-" + name).trim() || fallback
+  };
+  const resolve = (c) => {
+    const value = paintColor(c, slots);
+    return value === "currentColor" ? style?.color ?? "#000" : value;
+  };
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = `color-mix(in srgb, ${resolve(a)}, ${resolve(b)} ${fmt(t * 100)}%)`;
+  ctx.fillRect(0, 0, 1, 1);
+  return target.createPattern(tile, "repeat");
+});

package/modules/colormix/web/markup.d.ts

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

package/modules/colormix/web/markup.js

@@ -0,0 +1,3 @@
+import { colormixMarkup } from "../markup/index.js";
+import "../../../packages/web/src/index.js";
+customElements.get("anima-icon").registerMarkup("paint", colormixMarkup);

package/modules/componentpaint/capabilities/drawing-paint-paint-artboard/registry.d.ts

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

package/modules/componentpaint/capabilities/drawing-paint-paint-artboard/registry.js

@@ -0,0 +1,9 @@
+const entries = [
+  {
+    target: "fill",
+    shapes: { paint: { k: "str", markup: "paint" } }
+  }
+];
+export {
+  entries
+};

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

@@ -0,0 +1,17 @@
+import type { Module } from '../../../packages/core/src/modules.js';
+import type { Model } from '../../../packages/core/src/load.js';
+import { type DrawTree } from '../../../packages/core/src/draw.js';
+declare module '../../../packages/core/src/draw.ts' {
+    interface DrawPaint {
+        component?: DrawFrame;
+    }
+}
+export type ComponentResource = DrawTree['resources'][number] & {
+    tree: DrawTree;
+    order?: number[];
+};
+declare const plans: WeakMap<Model, Map<number, Model>>;
+export declare const componentpaint: Module & {
+    sources: typeof plans;
+};
+export {};

package/modules/componentpaint/core/index.js

@@ -0,0 +1,241 @@
+import { drawFrame, drawTree } from "../../../packages/core/src/draw.js";
+import { ptr } from "../../../packages/core/src/diag.js";
+import { VERBOSE as V } from "../../../packages/core/src/flags.js";
+import { entries } from "../capabilities/drawing-paint-paint-artboard/registry.js";
+import { after } from "../manifest.js";
+const plans = /* @__PURE__ */ new WeakMap();
+const children = /* @__PURE__ */ new WeakMap();
+const stack = /* @__PURE__ */ new Set();
+const name = /^component:([a-z][a-zA-Z0-9-]*)$/;
+const componentpaint = {
+  name: "componentpaint",
+  after,
+  entries,
+  // seam: asset loaders resolve paint-source catalogs like component placements.
+  sources: plans,
+  init(_registry, shared) {
+    const fork = _registry.get("components");
+    if (fork) {
+      const previous = fork.forkModel;
+      fork.forkModel = (source, target) => {
+        previous(source, target);
+        const plan = plans.get(source);
+        if (plan) plans.set(target, plan);
+      };
+    }
+    return {
+      ...componentpaint,
+      resolve(model, d) {
+        if (!model.doc.requires?.includes("componentpaint")) return;
+        const sources = /* @__PURE__ */ new Map();
+        plans.set(model, sources);
+        const paths = [], counts = /* @__PURE__ */ new Map();
+        model.nodes.forEach((n, i) => {
+          const j = counts.get(n.parent) ?? 0;
+          counts.set(n.parent, j + 1);
+          paths[i] = (n.parent < 0 ? "/nodes" : paths[n.parent] + "/children") + "/" + j;
+          for (const [j2, paint] of (n.raw.paints ?? []).entries())
+            if (paint.fill?.paint !== void 0)
+              d.err(
+                "component-paint",
+                paths[i] + "/paints/" + j2 + "/fill/paint",
+                V && "component paint uses the shape fill",
+                V && "use fill.paint instead of an ordered paint source"
+              );
+          if (n.raw.fill?.paint === void 0) return;
+          const at = paths[i] + "/fill/paint";
+          const error = (code, message, hint) => d.err(code, at, V && message, V && hint);
+          const match = name.exec(n.raw.fill?.paint);
+          if (!match) {
+            error(
+              "component-paint",
+              V && "paint must name a component source",
+              V && 'use paint="component:row"'
+            );
+            return;
+          }
+          if (!model.doc.requires.includes("components") || !model.doc.requires.includes("paint")) {
+            error(
+              "undeclared-feature",
+              V && "component paint needs components and paint",
+              V && "add components and paint to requires"
+            );
+            return;
+          }
+          if (n.raw.fill.color !== void 0 || n.raw.fill.type !== void 0 || n.raw.paints) {
+            error(
+              "component-paint",
+              V && "component paint cannot also supply color, type or ordered paints",
+              V && "remove color/type/paints; an ordinary stroke may remain"
+            );
+            return;
+          }
+          const definition = model.doc.components?.[match[1]];
+          if (!definition || match[1] === "$comment") {
+            error(
+              "unknown-component",
+              V && "unknown paint component",
+              V && "declare the named component in components"
+            );
+            return;
+          }
+          if (stack.has(definition) || stack.size >= 16) {
+            error(
+              "component-cycle",
+              V && "component paint source is cyclic or exceeds depth 16",
+              V && "remove recursive sources or reduce nesting"
+            );
+            return;
+          }
+          stack.add(definition);
+          try {
+            const definitions = model.doc.components ?? {}, used = /* @__PURE__ */ new Set();
+            const visit = (name2) => {
+              if (used.has(name2) || !Object.hasOwn(definitions, name2)) return;
+              used.add(name2);
+              scan(definitions[name2]);
+            };
+            const scan = (value) => {
+              if (!value || typeof value !== "object") return;
+              for (const [key, v] of Object.entries(value)) {
+                if (key === "component") {
+                  for (const ref of typeof v === "object" && v ? Object.values(v) : [v])
+                    if (typeof ref === "string") {
+                      if (ref.startsWith("$")) Object.keys(definitions).forEach(visit);
+                      else visit(ref);
+                    }
+                } else if (key === "paint" && typeof v === "string" && name.test(v))
+                  visit(v.slice(10));
+                scan(v);
+              }
+            };
+            scan(definition);
+            const result = shared.load({
+              ...definition,
+              anima: "0.1",
+              name: match[1],
+              requires: model.doc.requires,
+              components: Object.fromEntries([...used].map((name2) => [name2, definitions[name2]])),
+              // Asset names resolve locally, then in the enclosing catalog (SPEC assets scope).
+              ...model.doc.assets && {
+                assets: { ...model.doc.assets, ...definition.assets }
+              }
+            });
+            for (const diag of result.diagnostics)
+              if (diag.severity === "error")
+                d.err(
+                  diag.code,
+                  diag.pointer.startsWith("/components/") ? diag.pointer : ptr("/components", match[1]) + diag.pointer,
+                  diag.message,
+                  diag.hint
+                );
+            if (result.model) sources.set(i, result.model);
+          } finally {
+            stack.delete(definition);
+          }
+        });
+      },
+      load(model) {
+        const sources = plans.get(model);
+        if (!sources?.size) return;
+        const previous = model.nesting;
+        model.nesting = (p) => {
+          const inputModel = p.model;
+          const base = previous?.(p);
+          const tree = drawTree(p.model);
+          const draw = p.model === inputModel ? { ...tree, resources: tree.resources.map((r) => ({ ...r })) } : tree;
+          draw.resources = draw.resources.map((r) => ({ ...r }));
+          const clone = { ...p.model, draw };
+          const compiled = _registry.get("data")?.compiled;
+          const data = compiled?.get(p.model);
+          if (data) compiled.set(clone, data);
+          const assets = _registry.get("assets")?.resolvedAssets;
+          const images = assets?.get(p.model) ?? assets?.get(inputModel);
+          if (images) assets.set(clone, images);
+          const components = _registry.get(
+            "components"
+          );
+          components.forkModel(p.model, clone);
+          Object.defineProperty(p, "model", { value: clone });
+          const players = new Map(
+            [...sources].map(([i, m]) => [
+              i,
+              new shared.Player(m, { reducedMotion: p.reducedMotion })
+            ])
+          );
+          children.set(p, players);
+          for (const [i, child] of players) {
+            const r = draw.resources.find(
+              (r2) => r2.node === i && r2.kind === "componentpaint"
+            );
+            const frame = drawFrame(child);
+            r.tree = frame.tree;
+            r.order = frame.order;
+          }
+          const collect = (method) => Object.fromEntries(
+            [...players].flatMap(
+              ([i, child]) => Object.entries(method(child)).map(([k, v]) => [
+                p.model.nodes[i].id + "/paint/" + k,
+                v
+              ])
+            )
+          );
+          const extension = {
+            ...base,
+            // seam: hosts give source players their own resource catalogs, like nested players.
+            sources: players,
+            input: (...args) => base?.input(...args) ?? false,
+            get: (key) => base?.get(key),
+            pointer: (...args) => base?.pointer(...args),
+            hits: (...args) => base?.hits(...args),
+            inspect: () => base?.inspect() ?? [],
+            values: () => ({ ...base?.values(), ...collect((child) => child.values()) }),
+            states: () => ({ ...base?.states(), ...collect((child) => child.states()) }),
+            step(dt) {
+              const result = base?.step(dt) ?? { events: [], settled: true };
+              for (const [i, child] of players) {
+                child.reducedMotion = p.reducedMotion;
+                const revision = child.drawRevision, next = child.step(dt);
+                result.settled &&= next.settled;
+                if (revision !== child.drawRevision) p.drawVersions[i] = ++p.drawRevision;
+              }
+              return result;
+            }
+          };
+          return extension;
+        };
+      }
+    };
+  },
+  draw: {
+    tree(model, tree) {
+      for (const [node, child] of plans.get(model) ?? [])
+        tree.resources.push({
+          node,
+          kind: "componentpaint",
+          pointer: (tree.nodes[node].pointer ?? "/nodes/" + node) + "/fill/paint",
+          tree: drawTree(child)
+        });
+    },
+    end(p, f) {
+      for (const [i, child] of children.get(p) ?? []) {
+        const component = drawFrame(child), n = f.nodes[i];
+        const paint = n.paints.find((p2) => p2.kind === "fill");
+        paint.component = component;
+        paint.color = void 0;
+        const index = f.tree.resources.findIndex(
+          (r) => r.node === i && r.kind === "componentpaint"
+        );
+        f.tree.resources[index] = {
+          ...f.tree.resources[index],
+          tree: component.tree,
+          order: component.order
+        };
+        f.changed.push(i);
+      }
+    }
+  }
+};
+export {
+  componentpaint
+};

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

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

package/modules/componentpaint/core/svg.js

@@ -0,0 +1,67 @@
+import { fmt } from "../../../packages/core/src/draw.js";
+import { sceneTree } from "../../../packages/core/src/svg.js";
+const originals = /* @__PURE__ */ new WeakMap();
+const componentpaintSVG = {
+  tree(draw, tree) {
+    for (const resource of draw.resources) {
+      if (resource.kind !== "componentpaint") continue;
+      const r = resource, node = r.node;
+      let source;
+      try {
+        source = sceneTree({ draw: r.tree });
+      } catch (error) {
+        if (error instanceof Error && "code" in error && error.code === "unsupported-render")
+          throw Object.assign(new Error("component paint source: " + error.message), {
+            code: "unsupported-render",
+            pointer: r.pointer,
+            hint: "use the canvas renderer for this source feature"
+          });
+        throw error;
+      }
+      const order = (list) => {
+        for (const el of list) el.kids = order(el.kids);
+        return new Set(list.map((el) => el.node)).size === list.length ? list.sort((a, b) => (r.order?.[a.node] ?? a.node) - (r.order?.[b.node] ?? b.node)) : list;
+      };
+      source.root = order(source.root);
+      const wrap = (el) => {
+        const copy = { ...el, role: "module:componentpaint-source", node, kids: el.kids.map(wrap) };
+        originals.set(copy, el);
+        return copy;
+      };
+      tree.defs.push({
+        tag: "pattern",
+        role: "module:componentpaint",
+        node,
+        kids: [
+          ...source.defs.map(wrap),
+          { tag: "svg", role: "module:componentpaint-box", node, kids: source.root.map(wrap) }
+        ]
+      });
+    }
+  },
+  attrs(frame, el, paint, id, a, render) {
+    const source = frame.nodes[el.node]?.paints.find((p) => p.component)?.component;
+    if (!source) return;
+    const prefix = `${id}cp${el.node}`;
+    if (el.role === "shape" && a.fill !== "none") a.fill = `url(#${prefix})`;
+    if (el.role === "module:componentpaint" || el.role === "module:componentpaint-box") {
+      const [x, y, w, h] = source.viewBox;
+      Object.assign(a, { x: fmt(x), y: fmt(y), width: fmt(w), height: fmt(h) });
+      if (el.role === "module:componentpaint")
+        Object.assign(a, { id: prefix, patternUnits: "userSpaceOnUse" });
+      else
+        Object.assign(a, {
+          x: "0",
+          y: "0",
+          viewBox: source.viewBox.map(fmt).join(" "),
+          overflow: "hidden",
+          style: `width:${fmt(w)}px;height:${fmt(h)}px;overflow:hidden`
+        });
+    }
+    const original = originals.get(el);
+    if (original) Object.assign(a, render(source, original, paint, prefix + "-"));
+  }
+};
+export {
+  componentpaintSVG
+};