@hellkite/pipkin 0.6.2 → 0.7.0

package/build/src/lib/utils/placeImage.js

@@ -9,30 +9,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.placeImage = void 0;
+exports.prepareImage = exports.placeImage = void 0;
 const virtual_dom_1 = require("virtual-dom");
 const toPx_1 = require("./toPx");
 const types_1 = require("../types");
-const htmlToImage_1 = require("./htmlToImage");
-const placeImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ image, box, backgroundSize, options, }) {
-    const imageBase64 = yield image.getBase64('image/png');
-    const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[options.scale];
-    const document = (0, virtual_dom_1.h)('div', {
+const placeImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ image, box, options, }) {
+    return (0, virtual_dom_1.h)('div', {
         style: Object.assign({ display: 'flex', position: 'absolute', scale: 1, justifyContent: options.justifyContent, alignItems: options.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
-    }, [
-        (0, virtual_dom_1.h)('img', {
-            style: {
-                objectFit,
-                flex: '1 1 auto',
-                minWidth: 0,
-                minHeight: 0,
-                maxWidth: '100%',
-                maxHeight: '100%',
-            },
-            src: imageBase64,
-        }, []),
-    ]);
-    return (0, htmlToImage_1.htmlToImage)(document, backgroundSize);
+    }, [yield (0, exports.prepareImage)({ image, options })]);
 });
 exports.placeImage = placeImage;
+const prepareImage = (_a) => __awaiter(void 0, [_a], void 0, function* ({ image, options, }) {
+    const imageBase64 = yield image.getBase64('image/png');
+    const objectFit = types_1.SCALE_MODE_TO_OBJECT_FIT[options.scale];
+    return (0, virtual_dom_1.h)('img', {
+        style: {
+            objectFit,
+            flex: '1 1 auto',
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: '100%',
+            maxHeight: '100%',
+        },
+        src: imageBase64,
+    }, []);
+});
+exports.prepareImage = prepareImage;
 //# sourceMappingURL=placeImage.js.map

package/build/src/lib/utils/placeImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"placeImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/placeImage.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAAgC;AAChC,iCAAyC;AACzC,oCAKkB;AAClB,+CAA4C;AAUrC,MAAM,UAAU,GAAG,KAKyB,EAAE,4CALsB,EACvE,KAAK,EACL,GAAG,EACH,cAAc,EACd,OAAO,GACkB;IACzB,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,gCAAwB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,IAAA,eAAC,EACd,KAAK,EACL;QACI,KAAK,kBACD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,CAAC,EAER,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,UAAU,EAAE,OAAO,CAAC,UAAU,IAE3B,IAAA,sBAAe,EAAC,GAAG,CAAC,CAC1B;KACJ,EACD;QACI,IAAA,eAAC,EACG,KAAK,EACL;YACI,KAAK,EAAE;gBACH,SAAS;gBACT,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,CAAC;gBACX,SAAS,EAAE,CAAC;gBACZ,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;aACpB;YACD,GAAG,EAAE,WAAW;SACnB,EACD,EAAE,CACL;KACJ,CACJ,CAAC;IAEF,OAAO,IAAA,yBAAW,EAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AACjD,CAAC,CAAA,CAAA;AA3CY,QAAA,UAAU,cA2CtB"}
+{"version":3,"file":"placeImage.js","sourceRoot":"","sources":["../../../../src/lib/utils/placeImage.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAAgC;AAChC,iCAAyC;AACzC,oCAOkB;AASX,MAAM,UAAU,GAAG,KAIyB,EAAE,4CAJsB,EACvE,KAAK,EACL,GAAG,EACH,OAAO,GACkB;IACzB,OAAO,IAAA,eAAC,EACJ,KAAK,EACL;QACI,KAAK,kBACD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,CAAC,EAER,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,UAAU,EAAE,OAAO,CAAC,UAAU,IAE3B,IAAA,sBAAe,EAAC,GAAG,CAAC,CAC1B;KACJ,EACD,CAAC,MAAM,IAAA,oBAAY,EAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAC3C,CAAC;AACN,CAAC,CAAA,CAAC;AArBW,QAAA,UAAU,cAqBrB;AAOK,MAAM,YAAY,GAAG,KAGyB,EAAE,4CAHsB,EACzE,KAAK,EACL,OAAO,GACoB;IAC3B,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,gCAAwB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,IAAA,eAAC,EACJ,KAAK,EACL;QACI,KAAK,EAAE;YACH,SAAS;YACT,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,CAAC;YACX,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,MAAM;SACpB;QACD,GAAG,EAAE,WAAW;KACnB,EACD,EAAE,CACL,CAAC;AACN,CAAC,CAAA,CAAC;AAtBW,QAAA,YAAY,gBAsBvB"}

package/build/src/lib/utils/placeText.d.ts

@@ -0,0 +1,14 @@
+import { BoundingBox, TextLayerOptions, HyperNode, TextLayerSpecificOptions } from '../types';
+import { RequiredDeep } from 'type-fest';
+type PlaceTextProps<EntryType extends Record<string, string>> = {
+    text: string;
+    box: BoundingBox;
+    options: RequiredDeep<TextLayerOptions<EntryType>>;
+};
+export declare const placeText: <EntryType extends Record<string, string>>({ text, box, options, }: PlaceTextProps<EntryType>) => Promise<HyperNode>;
+type PrepareTextProps<EntryType extends Record<string, string>> = {
+    text: string;
+    options: RequiredDeep<TextLayerSpecificOptions<EntryType>>;
+};
+export declare const prepareText: <EntryType extends Record<string, string>>({ text, options, }: PrepareTextProps<EntryType>) => Promise<HyperNode>;
+export {};

package/build/src/lib/utils/placeText.js

@@ -0,0 +1,69 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prepareText = exports.placeText = void 0;
+const virtual_dom_1 = require("virtual-dom");
+const toPx_1 = require("./toPx");
+const placeText = (_a) => __awaiter(void 0, [_a], void 0, function* ({ text, box, options, }) {
+    return (0, virtual_dom_1.h)('div', {
+        style: Object.assign({ display: 'flex', overflow: 'visible', position: 'absolute', justifyContent: options.justifyContent, alignItems: options.alignItems }, (0, toPx_1.boundingBoxToPx)(box)),
+    }, [
+        yield (0, exports.prepareText)({
+            text,
+            options,
+        }),
+    ]);
+});
+exports.placeText = placeText;
+const prepareText = (_a) => __awaiter(void 0, [_a], void 0, function* ({ text, options, }) {
+    let textChildren = [text];
+    for (const [word, image] of Object.entries(options.replacement)) {
+        const regex = new RegExp(word, 'gi');
+        const imageBase64 = yield image.getBase64('image/png');
+        let tmpChildren = [];
+        for (const textSegment of textChildren) {
+            if (typeof textSegment !== 'string') {
+                continue;
+            }
+            const parts = textSegment.split(regex);
+            for (let index = 0; index < parts.length; index++) {
+                if (index > 0) {
+                    tmpChildren.push((0, virtual_dom_1.h)('img', {
+                        style: {
+                            display: 'inline',
+                            verticalAlign: 'middle',
+                            height: (0, toPx_1.toPx)(options.font.size),
+                            width: 'auto',
+                        },
+                        src: imageBase64,
+                    }, []));
+                }
+                tmpChildren.push(parts[index]);
+            }
+        }
+        textChildren = tmpChildren;
+    }
+    return (0, virtual_dom_1.h)('div', {
+        style: {
+            overflow: 'visible',
+            overflowWrap: 'word-wrap',
+            whiteSpace: 'normal',
+            color: options.color,
+            fontFamily: options.font.family,
+            fontSize: options.font.size,
+            fontStyle: options.font.italic ? 'italic' : undefined,
+            fontWeight: options.font.bold ? 'bold' : undefined,
+            '-webkit-text-stroke': `${options.border.width}px ${options.border.color}`,
+        },
+    }, textChildren);
+});
+exports.prepareText = prepareText;
+//# sourceMappingURL=placeText.js.map

package/build/src/lib/utils/placeText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeText.js","sourceRoot":"","sources":["../../../../src/lib/utils/placeText.ts"],"names":[],"mappings":"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"}

package/build/src/test.js

@@ -17,7 +17,7 @@ const lib_1 = require("./lib");
     const result = yield lib_1.Template.new({
         defaultFontFamily: 'branela',
         defaultAssetsPath: 'assets',
-        color: 0xC3C3C3FF,
+        color: 0xc3c3c3ff,
     })
         .text({ key: 'title' }, {
         left: 25,
@@ -47,9 +47,9 @@ const lib_1 = require("./lib");
         color: 'pink',
         border: {
             width: 2,
-            color: 'purple'
+            color: 'purple',
         },
-        skip: (entry) => entry.title.toLowerCase() === 'luigi'
+        skip: entry => entry.title.toLowerCase() === 'luigi',
     })
         .font('assets/branela.otf', 'branela')
         .image({ pathFn: entry => `${entry.title.toLowerCase()}.png` }, { left: 25, top: 225, width: 700, height: 700 }, {
@@ -69,7 +69,12 @@ const lib_1 = require("./lib");
             .replace(['Fireball'], fireball)
             .build(),
     })
-        .hbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
+        .hbox(() => __awaiter(void 0, void 0, void 0, function* () {
+        return [
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') }, options: { scale: 'keep-ratio' } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') }, options: { scale: 'keep-ratio' } },
+        ];
+    }), {
         left: 25,
         top: 25,
         width: 300,
@@ -77,7 +82,12 @@ const lib_1 = require("./lib");
     }, {
         gap: 100,
     })
-        .vbox(() => Promise.resolve([luigi.clone(), luigi.clone()]), {
+        .vbox(() => __awaiter(void 0, void 0, void 0, function* () {
+        return [
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') }, options: { scale: 'stretch' } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') }, options: { scale: 'stretch' } },
+        ];
+    }), {
         left: 25,
         top: 325,
         width: 100,
@@ -86,11 +96,19 @@ const lib_1 = require("./lib");
         scale: 'stretch',
         gap: 50,
     })
-        .grid(() => Promise.resolve([
-        luigi.clone(), luigi.clone(), luigi.clone(),
-        luigi.clone(), luigi.clone(), luigi.clone(),
-        luigi.clone(), luigi.clone(), luigi.clone(),
-    ]), {
+        .grid(() => __awaiter(void 0, void 0, void 0, function* () {
+        return [
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+            { image: { buffer: yield luigi.clone().getBuffer('image/png') } },
+        ];
+    }), {
         left: 300,
         top: 325,
         width: 400,

package/build/src/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hellkite/pipkin",
-    "version": "0.6.2",
+    "version": "0.7.0",
     "description": "Library for board game card generation",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",
@@ -20,6 +20,7 @@
         "lodash.camelcase": "^4.3.0",
         "lodash.chunk": "^4.2.0",
         "lodash.concat": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
         "lodash.merge": "^4.6.2",
         "node-html-to-image": "^5.0.0",
         "papaparse": "^5.5.2",
@@ -30,6 +31,7 @@
         "@types/lodash.camelcase": "^4.3.9",
         "@types/lodash.chunk": "^4.2.9",
         "@types/lodash.concat": "^4.5.9",
+        "@types/lodash.flatten": "^4.4.9",
         "@types/lodash.merge": "^4.6.9",
         "@types/node": "^22.7.5",
         "@types/papaparse": "^5.3.15",

package/roadmap.md

@@ -9,11 +9,12 @@
 
 ### Bugfixes
 - [x] Broken custom fonts
+- [ ] keep-ration scale option seem broken
 
 ### Optimizations
 - [ ] Optional image registry that reduce repeating loading of same images
 - [ ] Stream processing support
-- [ ] Overlay the entire card in HTML and render to image only once
+- [x] Overlay the entire card in HTML and render to image only once
 
 
 ### Quality of Life Improvements

package/src/lib/template.ts

@@ -3,15 +3,17 @@ import { parse as parseCsv } from 'papaparse';
 import { Jimp, rgbaToInt } from 'jimp';
 import camelCase from 'lodash.camelcase';
 import concat from 'lodash.concat';
-import { registerFont } from 'canvas';
 import path from 'path';
 import {
-    drawBoundingBox,
+    placeBoundingBox,
     gridPackingFn,
     hboxPackingFn,
+    htmlToImage,
     placeImage,
-    renderText,
+    placeText,
     vboxPackingFn,
+    prepareText,
+    prepareImage,
 } from './utils';
 import {
     DirectionContainerOptions,
@@ -31,9 +33,15 @@ import {
     LayerOptions,
     ContainerOptions,
     DEFAULT_CONTAINER_OPTIONS,
+    HyperNode,
+    ElementsFn,
+    ElementRef,
+    ImageLayerSpecificOptions,
 } from './types';
 import merge from 'lodash.merge';
 import { RequiredDeep } from 'type-fest';
+import { h } from 'virtual-dom';
+import flatten from 'lodash.flatten';
 
 type RequiredTemplateOptions = {
     height: number;
@@ -61,7 +69,7 @@ export type LayerFnContext = {
 export type LayerFn<EntryType> = (
     entry: EntryType,
     context: LayerFnContext,
-) => Promise<ImageType | undefined>;
+) => Promise<Array<HyperNode>>;
 
 export type TemplateLayerFn<EntryType extends Record<string, string>> = (
     template: Template<EntryType>,
@@ -102,13 +110,6 @@ export class Template<EntryType extends Record<string, string>> {
         });
     }
 
-    private shadowBackground(): ImageType {
-        return new Jimp({
-            width: this.background.width,
-            height: this.background.height,
-        });
-    }
-
     private get backgroundSize(): Size {
         return {
             width: this.background.width,
@@ -122,13 +123,24 @@ export class Template<EntryType extends Record<string, string>> {
     }
 
     template = (fn: TemplateLayerFn<EntryType>): this =>
-        this.layer(entry => {
+        this.layer(async entry => {
             const template = fn(this.shadowTemplate());
-            return template.render(entry);
+            const image = await template.render(entry);
+            return [
+                await placeImage({
+                    image,
+                    box: {
+                        left: 0,
+                        top: 0,
+                        ...this.backgroundSize,
+                    },
+                    options: DEFAULT_IMAGE_LAYER_OPTIONS,
+                }),
+            ];
         });
 
     container = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         packingFn: PackingFn,
         options?: ContainerOptions<EntryType>,
@@ -137,45 +149,39 @@ export class Template<EntryType extends Record<string, string>> {
             const mergedOptions: RequiredDeep<ContainerOptions<EntryType>> =
                 merge({}, DEFAULT_CONTAINER_OPTIONS, options);
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
-            const images = await imagesFn(entry);
-            const result = await packingFn(
-                box,
-                this.shadowBackground(),
-                images,
-            );
+            const elementRefs = await elementsFn(entry);
+            const elements = await Promise.all(elementRefs.map(elementRef => this.elementFromElementRef(entry, elementRef)))
+            const result = await packingFn(box, elements);
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     hbox = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: DirectionContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, hboxPackingFn(options), options);
+    ): this => this.container(elementsFn, box, hboxPackingFn(options), options);
 
     vbox = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: DirectionContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, vboxPackingFn(options), options);
+    ): this => this.container(elementsFn, box, vboxPackingFn(options), options);
 
     grid = (
-        imagesFn: (entry: EntryType) => Promise<Array<ImageType>>,
+        elementsFn: ElementsFn,
         box: BoundingBox,
         options?: GridContainerOptions<EntryType>,
-    ): this => this.container(imagesFn, box, gridPackingFn(options), options);
+    ): this => this.container(elementsFn, box, gridPackingFn(options), options);
 
     image = (
         ref: ImageRef<EntryType>,
@@ -191,10 +197,10 @@ export class Template<EntryType extends Record<string, string>> {
                     options,
                 );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
-            const image = await this.pathFromImageRef(
+            const image = await this.imageFromImageRef(
                 entry,
                 ref,
                 mergedOptions,
@@ -202,20 +208,16 @@ export class Template<EntryType extends Record<string, string>> {
             const result = await placeImage({
                 image,
                 box,
-                backgroundSize: this.backgroundSize,
                 options: mergedOptions,
             });
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     loadImage = async (imagePath: string | Buffer): Promise<ImageType> => {
@@ -240,28 +242,23 @@ export class Template<EntryType extends Record<string, string>> {
                 options,
             );
             if (this.shouldSkipLayerForEntry(entry, mergedOptions)) {
-                return undefined;
+                return [];
             }
 
             const text = this.textFromTextRef(entry, ref);
-            const result = await renderText(
+            const result = await placeText({
                 text,
                 box,
-                this.backgroundSize,
-                mergedOptions,
-                this.fonts,
-            );
+                options: mergedOptions,
+            });
 
             // debug mode
             if (debugMode) {
-                const debugImage = await drawBoundingBox(
-                    box,
-                    this.backgroundSize,
-                );
-                return debugImage.composite(result);
+                const debugImage = await placeBoundingBox(box);
+                return [result, debugImage];
             }
 
-            return result;
+            return [result];
         });
 
     font(path: fs.PathLike, name: string): this {
@@ -275,7 +272,7 @@ export class Template<EntryType extends Record<string, string>> {
         return this;
     }
 
-    private async renderLayers(entry: EntryType): Promise<Array<ImageType>> {
+    async render(entry: EntryType): Promise<ImageType> {
         const results = await Promise.all(
             this.layers.map(layerFn =>
                 layerFn(entry, {
@@ -283,18 +280,28 @@ export class Template<EntryType extends Record<string, string>> {
                 }),
             ),
         );
-        return results.filter(result => !!result);
-    }
-
-    async render(
-        entry: EntryType,
-        options?: RenderOptions<EntryType>,
-    ): Promise<ImageType> {
-        const renderedLayers = await this.renderLayers(entry);
-        return renderedLayers.reduce(
-            (acc, layerRender) => acc.composite(layerRender),
-            this.background.clone(),
-        );
+        const document = h('html', [
+            h('head', [
+                h(
+                    'style',
+                    Object.entries(this.fonts)
+                        .map(
+                            ([name, data]) =>
+                                `@font-face {
+                                        font-family: '${name}';
+                                        src: url(data:font/ttf;base64,${data}) format('truetype');
+                                    }`,
+                        )
+                        .join('\n'),
+                ),
+            ]),
+            h(
+                'body',
+                flatten(results),
+            ),
+        ]);
+        const renderedLayers = await htmlToImage(document, this.backgroundSize);
+        return this.background.clone().composite(renderedLayers);
     }
 
     async renderAll(
@@ -305,7 +312,7 @@ export class Template<EntryType extends Record<string, string>> {
             entries.map(
                 entry =>
                     new Promise<Array<ImageType>>(resolve =>
-                        this.render(entry, options).then(image => {
+                        this.render(entry).then(image => {
                             if (!options?.duplication) {
                                 return resolve([image]);
                             }
@@ -353,10 +360,10 @@ export class Template<EntryType extends Record<string, string>> {
         });
     }
 
-    private pathFromImageRef = async (
+    private imageFromImageRef = async (
         entry: EntryType,
         ref: ImageRef<EntryType>,
-        options: RequiredDeep<ImageLayerOptions<EntryType>>,
+        options: RequiredDeep<ImageLayerSpecificOptions<EntryType>>,
     ): Promise<ImageType> => {
         const pathSegments = [];
         if (options.assetsPath) {
@@ -395,6 +402,29 @@ export class Template<EntryType extends Record<string, string>> {
         }
     };
 
+    private elementFromElementRef = async (
+        entry: EntryType,
+        ref: ElementRef<EntryType>,
+    ): Promise<HyperNode> => {
+        if ('text' in ref) {
+            const options = merge({}, DEFAULT_TEXT_LAYER_OPTIONS, ref.options);
+            return prepareText({
+                text: this.textFromTextRef(entry, ref.text),
+                options,
+            });
+        } else if ('image' in ref) {
+            const options = merge({}, DEFAULT_IMAGE_LAYER_OPTIONS, ref.options);
+            return prepareImage({
+                image: await this.imageFromImageRef(entry, ref.image, options),
+                options,
+            });
+        } else if ('node' in ref) {
+            return ref.node
+        } else {
+            throw new Error('Unknown TextRef variant');
+        }
+    };
+
     private shouldSkipLayerForEntry = (
         entry: EntryType,
         options: LayerOptions<EntryType>,

package/src/lib/types/containers.ts

@@ -1,8 +1,10 @@
 import { RequiredDeep } from 'type-fest';
 import { BoundingBox } from './boundingBox';
-import { ImageType } from './image';
+import { ImageLayerSpecificOptions, ImageRef, ImageType } from './image';
 import { ScaleMode } from './scale';
 import { LayerOptions } from './layer';
+import { HyperNode } from './hypernode';
+import { TextLayerSpecificOptions, TextRef } from './text';
 
 export type ContainerOptions<EntryType extends Record<string, string>> =
     LayerOptions<EntryType> & {
@@ -65,8 +67,24 @@ export const DEFAULT_GRID_CONTAINER_OPTIONS: RequiredDeep<
     direction: 'rows',
 };
 
+export type ElementRef<EntryType extends Record<string, string>> =
+    | {
+          image: ImageRef<EntryType>;
+          options?: ImageLayerSpecificOptions<EntryType>;
+      }
+    | {
+          text: TextRef<EntryType>;
+          options?: TextLayerSpecificOptions<EntryType>;
+      }
+    | {
+          node: HyperNode;
+      };
+
+export type ElementsFn = <EntryType extends Record<string, string>>(
+    entry: EntryType,
+) => Promise<Array<ElementRef<EntryType>>>;
+
 export type PackingFn = (
     box: BoundingBox,
-    background: ImageType,
-    images: Array<ImageType>,
-) => Promise<ImageType>;
+    elements: Array<HyperNode>,
+) => Promise<HyperNode>;

package/src/lib/types/hypernode.ts

@@ -0,0 +1,4 @@
+import { VNode } from "virtual-dom";
+
+export type HyperNode = VNode;
+