@basementuniverse/image-font 1.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2025 Gordon Larrigan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,209 @@
+# Game Component: Image Font
+
+Render text using image fonts in your game.
+
+## Installation
+
+```bash
+npm install @basementuniverse/image-font
+```
+
+## How to use
+
+![Image Font Example](./image-font-example.png)
+
+We can initialise an image font with a texture atlas and some configuration data:
+
+```ts
+import { textureAtlas } from '@basementuniverse/texture-atlas';
+import { ImageFont } from '@basementuniverse/image-font';
+
+let font: ImageFont | null = null;
+
+const image = new Image();
+image.src = './image-font.png';
+image.onload = () => {
+  const atlas = textureAtlas(
+    image,
+    {
+      relative: true,
+      width: 8,
+      height: 5,
+      regions: {
+        'A': { x: 0, y: 0 },
+        'B': { x: 1, y: 0 },
+        'C': { x: 2, y: 0 },
+        // ...etc.
+      },
+    }
+  );
+
+  font = new ImageFont(
+    atlas,
+    {
+      defaultCharacterConfig: {
+        offset: { x: 14, y: 8 },
+        width: 32,
+        height: 48,
+      },
+      characters: {
+        'A': { width: 37 },
+        'B': { width: 37 },
+        'C': { width: 33 },
+        // ...etc.
+      }
+    }
+  );
+};
+```
+
+Or we can use a content processor:
+
+```ts
+import { imageFontContentProcessor } from '@basementuniverse/image-font';
+import ContentManager from '@basementuniverse/content-manager';
+
+ContentManager.initialise({
+  processors: {
+    imageFont: imageFontContentProcessor,
+  },
+});
+
+ContentManager.load([
+  {
+    name: 'font-spritesheet',
+    type: 'image',
+    args: ['./image-font.png'],
+  },
+  {
+    name: 'font',
+    type: 'json',
+    args: [
+
+    ],
+    processors: [
+      {
+        name: 'imageFont',
+        args: ['font-spritesheet'],
+      },
+    ],
+  },
+]);
+
+// ContentManager.get('font') returns an ImageFont instance
+```
+
+Then we can use the `ImageFont` instance to measure and render text:
+
+```ts
+// Measure text
+const textSize = font.measureText('ABC', options);
+
+// Render text
+font.drawText(context, 'ABC', 0, 0, options);
+```
+
+See './example/example.html' for a full example.
+
+## ImageFont configuration
+
+```ts
+type ImageFontConfig = {
+  /**
+   * Global offset applied to all characters from top-left of the texture atlas
+   * tile, measured in pixels
+   */
+  offset?: vec2;
+
+  /**
+   * Optional scaling factor for the font
+   */
+  scale?: number;
+
+  /**
+   * Default character configuration, used for characters that do not have
+   * a specific configuration defined, or for undefined characters
+   */
+  defaultCharacterConfig?: ImageFontCharacterConfig;
+
+  /**
+   * Per-character configuration
+   */
+  characters: Record<string, ImageFontCharacterConfig>;
+};
+
+type ImageFontCharacterConfig = {
+  /**
+   * Offset from the top-left of the texture atlas tile, measured in pixels
+   */
+  offset?: vec2;
+
+  /**
+   * Width of the character in pixels, used for kerning
+   *
+   * If not specified, use the default width, or the width of the texture atlas
+   * tile
+   */
+  width?: number;
+
+  /**
+   * Height of the character in pixels, used for measuring text
+   *
+   * If not specified, use the default height, or the height of the texture
+   * atlas tile
+   */
+  height?: number;
+};
+```
+
+## Image Font content data
+
+When using a content processor, the configuration data for an image font is the same as the `ImageFontConfig` type, but with an additional `textureAtlasSize: vec2` property, containing the size of the texture atlas in tiles.
+
+Also, each character configuration should have a `textureAtlasPosition: vec2` property, containing the tile address of the character in the texture atlas.
+
+## Rendering and measuring options
+
+```ts
+type ImageFontRenderingOptions = {
+  /**
+   * The scale factor to apply to the font when rendering
+   */
+  scale?: number;
+
+  /**
+   * Whether to disable per-character width and draw every character with the
+   * same spacing
+   *
+   * If this is true, the kerning value will be used and measured in pixels
+   *
+   * If this is true and the kerning value is undefined, use the pixel width
+   * of each texture atlas tile
+   */
+  monospace?: boolean;
+
+  /**
+   * The amount of kerning to apply between characters
+   *
+   * 0 means no spacing between characters, 1 means normal spacing, 2 means
+   * double spacing, etc.
+   *
+   * Default is 1
+   */
+  kerning?: number;
+
+  /**
+   * Horizontal alignment of the text relative to the x position
+   *
+   * Default is 'left'
+   */
+  align?: 'left' | 'center' | 'right';
+
+  /**
+   * Verticle alignment of the text relative to the baseline
+   *
+   * Default is 'top'
+   */
+  baseLine?: 'top' | 'middle' | 'bottom';
+};
+```

package/build/index.d.ts

@@ -0,0 +1,134 @@
+import { TextureAtlasMap } from '@basementuniverse/texture-atlas';
+import { vec2 } from '@basementuniverse/vec';
+export type ImageFontConfigData = Omit<ImageFontConfig, 'characters'> & {
+    /**
+     * The size of the texture atlas, measured in tiles
+     */
+    textureAtlasSize: vec2;
+    /**
+     * Per-character configuration
+     */
+    characters: Record<string, ImageFontCharacterConfigData>;
+};
+export type ImageFontConfig = {
+    /**
+     * Global offset applied to all characters from top-left of the texture atlas
+     * tile, measured in pixels
+     */
+    offset?: vec2;
+    /**
+     * Optional scaling factor for the font
+     */
+    scale?: number;
+    /**
+     * Default character configuration, used for characters that do not have
+     * a specific configuration defined, or for undefined characters
+     */
+    defaultCharacterConfig?: Omit<ImageFontCharacterConfig, 'textureAtlasPosition'>;
+    /**
+     * Per-character configuration
+     */
+    characters: Record<string, ImageFontCharacterConfig>;
+};
+export type ImageFontCharacterConfigData = ImageFontCharacterConfig & {
+    /**
+     * The tile position of this character in the texture atlas, measured in tiles
+     */
+    textureAtlasPosition: vec2;
+};
+export type ImageFontCharacterConfig = {
+    /**
+     * Offset from the top-left of the texture atlas tile, measured in pixels
+     */
+    offset?: vec2;
+    /**
+     * Width of the character in pixels, used for kerning
+     *
+     * If not specified, use the default width, or the width of the texture atlas
+     * tile
+     */
+    width?: number;
+    /**
+     * Height of the character in pixels, used for measuring text
+     *
+     * If not specified, use the default height, or the height of the texture
+     * atlas tile
+     */
+    height?: number;
+};
+export type ImageFontRenderingOptions = {
+    /**
+     * The scale factor to apply to the font when rendering
+     */
+    scale?: number;
+    /**
+     * Whether to disable per-character width and draw every character with the
+     * same spacing
+     *
+     * If this is true, the kerning value will be used and measured in pixels
+     *
+     * If this is true and the kerning value is undefined, use the pixel width
+     * of each texture atlas tile
+     */
+    monospace?: boolean;
+    /**
+     * The amount of kerning to apply between characters
+     *
+     * 0 means no spacing between characters, 1 means normal spacing, 2 means
+     * double spacing, etc.
+     *
+     * Default is 1
+     */
+    kerning?: number;
+    /**
+     * Horizontal alignment of the text relative to the x position
+     *
+     * Default is 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Verticle alignment of the text relative to the baseline
+     *
+     * Default is 'top'
+     */
+    baseLine?: 'top' | 'middle' | 'bottom';
+};
+export declare function isImageFontConfigData(value: unknown): value is ImageFontConfigData;
+export declare class ImageFont {
+    private static readonly DEFAULT_CONFIG;
+    private textures;
+    private config;
+    constructor(textures: TextureAtlasMap, config: ImageFontConfig);
+    /**
+     * Calculate the width of a single character when rendered with this font
+     */
+    private measureCharacterWidth;
+    /**
+     * Calculate the height of a single character when rendered with this font
+     */
+    private measureCharacterHeight;
+    /**
+     * Get the width of a string of text when rendered with this font
+     */
+    measureText(text: string, options?: ImageFontRenderingOptions): vec2;
+    /**
+     * Draw text on a canvas using this font
+     */
+    drawText(context: CanvasRenderingContext2D, text: string, x: number, y: number, options?: ImageFontRenderingOptions): void;
+}
+/**
+ * Content Manager Processor for loading image fonts
+ *
+ * @see https://www.npmjs.com/package/@basementuniverse/content-manager
+ */
+export declare function imageFontContentProcessor(content: Record<string, {
+    name: string;
+    type: string;
+    content: any;
+    status: string;
+}>, data: {
+    name: string;
+    type: string;
+    content: any;
+    status: string;
+}, imageName: string): Promise<void>;

package/build/index.js

@@ -0,0 +1,89 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else {
+		var a = factory();
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(self, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./index.ts":
+/*!******************!*\
+  !*** ./index.ts ***!
+  \******************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.imageFontContentProcessor = exports.ImageFont = exports.isImageFontConfigData = void 0;\nconst texture_atlas_1 = __webpack_require__(/*! @basementuniverse/texture-atlas */ \"./node_modules/@basementuniverse/texture-atlas/build/index.js\");\nconst vec_1 = __webpack_require__(/*! @basementuniverse/vec */ \"./node_modules/@basementuniverse/vec/vec.js\");\n// -----------------------------------------------------------------------------\n// TYPE GUARDS\n// -----------------------------------------------------------------------------\nfunction isImageFontConfigData(value) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (!('textureAtlasSize' in value) ||\n        typeof value.textureAtlasSize !== 'object' ||\n        value.textureAtlasSize === null) {\n        return false;\n    }\n    if (!('x' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.x !== 'number') {\n        return false;\n    }\n    if (!('y' in value.textureAtlasSize) ||\n        typeof value.textureAtlasSize.y !== 'number') {\n        return false;\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('scale' in value && typeof value.scale !== 'number') {\n        return false;\n    }\n    if ('defaultCharacterConfig' in value) {\n        if (typeof value.defaultCharacterConfig !== 'object' ||\n            value.defaultCharacterConfig === null) {\n            return false;\n        }\n        if (!isImageFontCharacterConfigData(value.defaultCharacterConfig, false)) {\n            return false;\n        }\n    }\n    if (!('characters' in value) ||\n        typeof value.characters !== 'object' ||\n        value.characters === null) {\n        return false;\n    }\n    for (const [char, config] of Object.entries(value.characters)) {\n        if (typeof char !== 'string' || char.length !== 1) {\n            return false; // Character keys must be single characters\n        }\n        if (!isImageFontCharacterConfigData(config)) {\n            return false;\n        }\n    }\n    return true;\n}\nexports.isImageFontConfigData = isImageFontConfigData;\nfunction isImageFontCharacterConfigData(value, includeTextureAtlasPosition = true) {\n    if (typeof value !== 'object' || value === null) {\n        return false;\n    }\n    if (includeTextureAtlasPosition) {\n        if (!('textureAtlasPosition' in value) ||\n            typeof value.textureAtlasPosition !== 'object' ||\n            value.textureAtlasPosition === null) {\n            return false;\n        }\n        if (!('x' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.textureAtlasPosition) ||\n            typeof value.textureAtlasPosition.y !== 'number') {\n            return false;\n        }\n    }\n    if ('offset' in value) {\n        if (typeof value.offset !== 'object' || value.offset === null) {\n            return false;\n        }\n        if (!('x' in value.offset) || typeof value.offset.x !== 'number') {\n            return false;\n        }\n        if (!('y' in value.offset) || typeof value.offset.y !== 'number') {\n            return false;\n        }\n    }\n    if ('width' in value && typeof value.width !== 'number') {\n        return false;\n    }\n    if ('height' in value && typeof value.height !== 'number') {\n        return false;\n    }\n    return true;\n}\n// -----------------------------------------------------------------------------\n// IMAGE FONT CLASS\n// -----------------------------------------------------------------------------\nclass ImageFont {\n    constructor(textures, config) {\n        this.textures = textures;\n        this.config = {\n            ...ImageFont.DEFAULT_CONFIG,\n            ...config,\n            defaultCharacterConfig: {\n                ...ImageFont.DEFAULT_CONFIG.defaultCharacterConfig,\n                ...config.defaultCharacterConfig,\n            },\n            characters: {\n                ...ImageFont.DEFAULT_CONFIG.characters,\n                ...config.characters,\n            },\n        };\n    }\n    /**\n     * Calculate the width of a single character when rendered with this font\n     */\n    measureCharacterWidth(character, options) {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        const texture = this.textures[character];\n        let width = 0;\n        if (options === null || options === void 0 ? void 0 : options.monospace) {\n            if ((options === null || options === void 0 ? void 0 : options.kerning) !== undefined) {\n                width = options.kerning;\n            }\n            else {\n                width =\n                    (_e = (_d = (_c = this.config.defaultCharacterConfig) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _e !== void 0 ? _e : 0;\n            }\n        }\n        else {\n            width =\n                ((_j = (_h = (_f = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.width) !== null && _f !== void 0 ? _f : (_g = this.config.defaultCharacterConfig) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : texture === null || texture === void 0 ? void 0 : texture.width) !== null && _j !== void 0 ? _j : 0) * ((_k = options === null || options === void 0 ? void 0 : options.kerning) !== null && _k !== void 0 ? _k : 1);\n        }\n        return width * actualScale;\n    }\n    /**\n     * Calculate the height of a single character when rendered with this font\n     */\n    measureCharacterHeight(character, options) {\n        var _a, _b, _c, _d, _e;\n        const characterConfig = this.config.characters[character];\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        return (((_e = (_c = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.height) !== null && _c !== void 0 ? _c : (_d = this.config.defaultCharacterConfig) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0) * actualScale);\n    }\n    /**\n     * Get the width of a string of text when rendered with this font\n     */\n    measureText(text, options) {\n        // When calculating the total width, ignore kerning for the last character\n        const lastCharacterWidth = this.measureCharacterWidth(text[text.length - 1], {\n            scale: options === null || options === void 0 ? void 0 : options.scale,\n        });\n        const width = text\n            .split('')\n            .slice(0, text.length - 1)\n            .reduce((width, character) => width + this.measureCharacterWidth(character, options), 0) + lastCharacterWidth;\n        const height = Math.max(...text\n            .split('')\n            .map(character => this.measureCharacterHeight(character, options)));\n        return (0, vec_1.vec2)(width, height);\n    }\n    /**\n     * Draw text on a canvas using this font\n     */\n    drawText(context, text, x, y, options) {\n        var _a, _b, _c, _d, _e, _f;\n        const size = this.measureText(text, options);\n        let currentX = x;\n        switch (options === null || options === void 0 ? void 0 : options.align) {\n            case 'center':\n                currentX -= size.x / 2;\n                break;\n            case 'right':\n                currentX -= size.x;\n                break;\n        }\n        const actualScale = ((_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 1) * ((_b = this.config.scale) !== null && _b !== void 0 ? _b : 1);\n        let actualY = y;\n        switch (options === null || options === void 0 ? void 0 : options.baseLine) {\n            case 'middle':\n                actualY = y - size.y / 2;\n                break;\n            case 'bottom':\n                actualY = y - size.y;\n                break;\n        }\n        for (const character of text) {\n            const characterWidth = this.measureCharacterWidth(character, options);\n            const texture = this.textures[character];\n            if (!texture) {\n                currentX += characterWidth;\n                continue;\n            }\n            const characterConfig = this.config.characters[character];\n            const offset = vec_1.vec2.add((_c = this.config.offset) !== null && _c !== void 0 ? _c : (0, vec_1.vec2)(), (_f = (_d = characterConfig === null || characterConfig === void 0 ? void 0 : characterConfig.offset) !== null && _d !== void 0 ? _d : (_e = this.config.defaultCharacterConfig) === null || _e === void 0 ? void 0 : _e.offset) !== null && _f !== void 0 ? _f : (0, vec_1.vec2)());\n            context.drawImage(texture, currentX - offset.x * actualScale, actualY - offset.y * actualScale, texture.width * actualScale, texture.height * actualScale);\n            currentX += characterWidth;\n        }\n    }\n}\nexports.ImageFont = ImageFont;\nImageFont.DEFAULT_CONFIG = {\n    offset: (0, vec_1.vec2)(),\n    scale: 1,\n    defaultCharacterConfig: {\n        offset: (0, vec_1.vec2)(),\n    },\n    characters: {},\n};\n// -----------------------------------------------------------------------------\n// CONTENT PROCESSOR\n// -----------------------------------------------------------------------------\n/**\n * Content Manager Processor for loading image fonts\n *\n * @see https://www.npmjs.com/package/@basementuniverse/content-manager\n */\nasync function imageFontContentProcessor(content, data, imageName) {\n    var _a;\n    if (!isImageFontConfigData(data.content)) {\n        throw new Error('Invalid image font config');\n    }\n    const image = (_a = content[imageName]) === null || _a === void 0 ? void 0 : _a.content;\n    if (!image) {\n        throw new Error(`Image '${imageName}' not found`);\n    }\n    // Create the texture atlas\n    const atlas = (0, texture_atlas_1.textureAtlas)(image, {\n        relative: true,\n        width: data.content.textureAtlasSize.x,\n        height: data.content.textureAtlasSize.y,\n        regions: Object.fromEntries(Object.entries(data.content.characters).map(([char, config]) => [\n            char,\n            {\n                x: config.textureAtlasPosition.x,\n                y: config.textureAtlasPosition.y,\n            },\n        ])),\n    });\n    // Create the image font\n    const font = new ImageFont(atlas, data.content);\n    // Store the font in the content manager\n    content[data.name] = {\n        name: data.name,\n        type: 'json',\n        content: font,\n        status: 'processed',\n    };\n}\nexports.imageFontContentProcessor = imageFontContentProcessor;\n\n\n//# sourceURL=webpack://@basementuniverse/image-font/./index.ts?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/@basementuniverse/texture-atlas/build/index.js":
+/*!*********************************************************************!*\
+  !*** ./node_modules/@basementuniverse/texture-atlas/build/index.js ***!
+  \*********************************************************************/
+/***/ ((module) => {
+
+eval("{/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(true)\n\t\tmodule.exports = factory();\n\telse // removed by dead control flow\n{ var i, a; }\n})(self, () => {\nreturn /******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ \"./index.ts\":\n/*!******************!*\\\n  !*** ./index.ts ***!\n  \\******************/\n/***/ ((__unused_webpack_module, exports) => {\n\neval(\"\\nObject.defineProperty(exports, \\\"__esModule\\\", ({ value: true }));\\nexports.textureAtlasContentProcessor = exports.textureAtlas = exports.isTextureAtlasRegion = exports.isTextureAtlasOptions = void 0;\\nfunction isTextureAtlasOptions(value) {\\n    if (!value || typeof value !== 'object') {\\n        return false;\\n    }\\n    if (!('relative' in value) || typeof value.relative !== 'boolean') {\\n        return false;\\n    }\\n    if (!('width' in value) || typeof value.width !== 'number') {\\n        return false;\\n    }\\n    if (!('height' in value) || typeof value.height !== 'number') {\\n        return false;\\n    }\\n    if (!('regions' in value) || typeof value.regions !== 'object') {\\n        return false;\\n    }\\n    for (const [key, region] of Object.entries(value.regions)) {\\n        if (typeof key !== 'string') {\\n            return false;\\n        }\\n        if (!isTextureAtlasRegion(region)) {\\n            return false;\\n        }\\n    }\\n    if (!('cellMargin' in value) || typeof value.cellMargin !== 'number') {\\n        return false;\\n    }\\n    return true;\\n}\\nexports.isTextureAtlasOptions = isTextureAtlasOptions;\\nfunction isTextureAtlasRegion(value) {\\n    if (!value || typeof value !== 'object') {\\n        return false;\\n    }\\n    if (!('x' in value) || typeof value.x !== 'number') {\\n        return false;\\n    }\\n    if (!('y' in value) || typeof value.y !== 'number') {\\n        return false;\\n    }\\n    if ('width' in value && typeof value.width !== 'number') {\\n        return false;\\n    }\\n    if ('height' in value && typeof value.height !== 'number') {\\n        return false;\\n    }\\n    if ('repeat' in value && typeof value.repeat !== 'number') {\\n        return false;\\n    }\\n    if ('repeatOffset' in value) {\\n        const repeatOffset = value.repeatOffset;\\n        if (!repeatOffset || typeof repeatOffset !== 'object') {\\n            return false;\\n        }\\n        if (!('x' in repeatOffset) || typeof repeatOffset.x !== 'number') {\\n            return false;\\n        }\\n        if (!('y' in repeatOffset) || typeof repeatOffset.y !== 'number') {\\n            return false;\\n        }\\n    }\\n    if ('repeatNameFormat' in value &&\\n        typeof value.repeatNameFormat !== 'string') {\\n        return false;\\n    }\\n    return true;\\n}\\nexports.isTextureAtlasRegion = isTextureAtlasRegion;\\nconst DEFAULT_REPEATING_REGION_NAME_FORMAT = '{name}-{n}';\\nconst DEFAULT_OPTIONS = {\\n    relative: true,\\n    width: 1,\\n    height: 1,\\n    regions: {\\n        default: {\\n            x: 0,\\n            y: 0,\\n        },\\n    },\\n    cellMargin: 0,\\n};\\n/**\\n * Takes an image and some texture atlas options and returns a dictionary\\n * of canvases indexed by region name\\n */\\nfunction textureAtlas(image, options) {\\n    var _a, _b, _c, _d;\\n    const actualOptions = Object.assign({}, DEFAULT_OPTIONS, options !== null && options !== void 0 ? options : {});\\n    if (actualOptions.width <= 0 || actualOptions.height <= 0) {\\n        throw new Error('Width and height must be greater than 0');\\n    }\\n    if (Object.keys(actualOptions.regions).length === 0) {\\n        throw new Error('No regions defined');\\n    }\\n    let cellWidth = 1;\\n    let cellHeight = 1;\\n    if (actualOptions.relative) {\\n        let imageWidth = image.width;\\n        let imageHeight = image.height;\\n        if (actualOptions.cellMargin > 0) {\\n            imageWidth -= actualOptions.cellMargin;\\n            imageHeight -= actualOptions.cellMargin;\\n        }\\n        cellWidth = Math.ceil(imageWidth / actualOptions.width);\\n        cellHeight = Math.ceil(imageHeight / actualOptions.height);\\n    }\\n    const map = {};\\n    for (const [name, region] of Object.entries(actualOptions.regions)) {\\n        let absoluteX = Math.floor(region.x * cellWidth);\\n        let absoluteY = Math.floor(region.y * cellHeight);\\n        let absoluteWidth = Math.ceil(region.width\\n            ? (actualOptions.relative\\n                ? region.width * cellWidth\\n                : region.width)\\n            : (actualOptions.relative\\n                ? cellWidth\\n                : image.width - absoluteX));\\n        let absoluteHeight = Math.ceil(region.height\\n            ? (actualOptions.relative\\n                ? region.height * cellHeight\\n                : region.height)\\n            : (actualOptions.relative\\n                ? cellHeight\\n                : image.height - absoluteY));\\n        if (actualOptions.relative && actualOptions.cellMargin > 0) {\\n            absoluteX += actualOptions.cellMargin;\\n            absoluteY += actualOptions.cellMargin;\\n            absoluteWidth -= actualOptions.cellMargin;\\n            absoluteHeight -= actualOptions.cellMargin;\\n        }\\n        if (region.repeat && region.repeat > 0) {\\n            for (let i = 0; i < region.repeat; i++) {\\n                const repeatName = getRepeatingRegionName(name, i + 1, region.repeatNameFormat);\\n                let repeatOffsetX = Math.floor((((_a = region.repeatOffset) === null || _a === void 0 ? void 0 : _a.x) !== undefined &&\\n                    ((_b = region.repeatOffset) === null || _b === void 0 ? void 0 : _b.x) !== null)\\n                    ? (actualOptions.relative\\n                        ? region.repeatOffset.x * cellWidth\\n                        : region.repeatOffset.x)\\n                    : cellWidth);\\n                let repeatOffsetY = Math.floor((((_c = region.repeatOffset) === null || _c === void 0 ? void 0 : _c.y) !== undefined &&\\n                    ((_d = region.repeatOffset) === null || _d === void 0 ? void 0 : _d.y) !== null)\\n                    ? (actualOptions.relative\\n                        ? region.repeatOffset.y * cellHeight\\n                        : region.repeatOffset.y)\\n                    : 0);\\n                map[repeatName] = chopRegion(image, absoluteX + repeatOffsetX * i, absoluteY + repeatOffsetY * i, absoluteWidth, absoluteHeight);\\n            }\\n        }\\n        else {\\n            map[name] = chopRegion(image, absoluteX, absoluteY, absoluteWidth, absoluteHeight);\\n        }\\n    }\\n    return map;\\n}\\nexports.textureAtlas = textureAtlas;\\n/**\\n * Chop a rectangular region from an image into a new canvas\\n */\\nfunction chopRegion(image, x, y, width, height) {\\n    const canvas = document.createElement('canvas');\\n    const context = canvas.getContext('2d');\\n    canvas.width = width;\\n    canvas.height = height;\\n    if (!context) {\\n        throw new Error('Failed to get 2D context');\\n    }\\n    context.drawImage(image, x, y, width, height, 0, 0, width, height);\\n    return canvas;\\n}\\n/**\\n * Get the name of a repeating region\\n */\\nfunction getRepeatingRegionName(regionName, repetitionIndex, regionNameFormat) {\\n    return (regionNameFormat !== null && regionNameFormat !== void 0 ? regionNameFormat : DEFAULT_REPEATING_REGION_NAME_FORMAT)\\n        .replace('{name}', regionName)\\n        .replace('{n}', repetitionIndex.toString());\\n}\\n/**\\n * Content Manager Processor wrapper which allows the textureAtlas function\\n * to be used as a processor in a Content Manager\\n *\\n * @see https://www.npmjs.com/package/@basementuniverse/content-manager\\n */\\nasync function textureAtlasContentProcessor(content, data, imageName) {\\n    var _a;\\n    if (!isTextureAtlasOptions(data.content)) {\\n        throw new Error('Invalid texture atlas options');\\n    }\\n    const image = (_a = content[imageName]) === null || _a === void 0 ? void 0 : _a.content;\\n    if (!image) {\\n        throw new Error(`Image '${imageName}' not found`);\\n    }\\n    const map = textureAtlas(image, data.content);\\n    for (const [name, canvas] of Object.entries(map)) {\\n        content[name] = {\\n            name,\\n            type: 'image',\\n            content: canvas,\\n            status: 4,\\n        };\\n    }\\n}\\nexports.textureAtlasContentProcessor = textureAtlasContentProcessor;\\n\\n\\n//# sourceURL=webpack://@basementuniverse/texture-atlas/./index.ts?\");\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/ \t// This entry module can't be inlined because the eval devtool is used.\n/******/ \tvar __nested_webpack_exports__ = {};\n/******/ \t__webpack_modules__[\"./index.ts\"](0, __nested_webpack_exports__);\n/******/ \t\n/******/ \treturn __nested_webpack_exports__;\n/******/ })()\n;\n});\n\n//# sourceURL=webpack://@basementuniverse/image-font/./node_modules/@basementuniverse/texture-atlas/build/index.js?\n}");
+
+/***/ }),
+
+/***/ "./node_modules/@basementuniverse/vec/vec.js":
+/*!***************************************************!*\
+  !*** ./node_modules/@basementuniverse/vec/vec.js ***!
+  \***************************************************/
+/***/ ((module) => {
+
+eval("{/**\n * @overview A small vector and matrix library\n * @author Gordon Larrigan\n */\n\nconst _vec_times = (f, n) => Array(n).fill(0).map((_, i) => f(i));\nconst _vec_chunk = (a, n) => _vec_times(i => a.slice(i * n, i * n + n), Math.ceil(a.length / n));\nconst _vec_dot = (a, b) => a.reduce((n, v, i) => n + v * b[i], 0);\nconst _vec_is_vec2 = a => typeof a === 'object' && 'x' in a && 'y' in a;\nconst _vec_is_vec3 = a => typeof a === 'object' && 'x' in a && 'y' in a && 'z' in a;\n\n/**\n * A 2d vector\n * @typedef {Object} vec2\n * @property {number} x The x component of the vector\n * @property {number} y The y component of the vector\n */\n\n/**\n * Create a new 2d vector\n * @param {number|vec2} [x] The x component of the vector, or a vector to copy\n * @param {number} [y] The y component of the vector\n * @return {vec2} A new 2d vector\n * @example <caption>various ways to initialise a vector</caption>\n * let a = vec2(3, 2); // (3, 2)\n * let b = vec2(4);    // (4, 4)\n * let c = vec2(a);    // (3, 2)\n * let d = vec2();     // (0, 0)\n */\nconst vec2 = (x, y) => {\n  if (!x && !y) {\n    return { x: 0, y: 0 };\n  }\n  if (_vec_is_vec2(x)) {\n    return { x: x.x || 0, y: x.y || 0 };\n  }\n  return { x: x, y: y ?? x };\n};\n\n/**\n * Get the components of a vector as an array\n * @param {vec2} a The vector to get components from\n * @return {Array<number>} The vector components as an array\n */\nvec2.components = a => [a.x, a.y];\n\n/**\n * Create a vector from an array of components\n * @param {Array<number>} components The components of the vector\n * @return {vec2} A new vector\n */\nvec2.fromComponents = components => vec2(...components.slice(0, 2));\n\n/**\n * Return a unit vector (1, 0)\n * @return {vec2} A unit vector (1, 0)\n */\nvec2.ux = () => vec2(1, 0);\n\n/**\n * Return a unit vector (0, 1)\n * @return {vec2} A unit vector (0, 1)\n */\nvec2.uy = () => vec2(0, 1);\n\n/**\n * Add vectors\n * @param {vec2} a Vector a\n * @param {vec2|number} b Vector or scalar b\n * @return {vec2} a + b\n */\nvec2.add = (a, b) => ({ x: a.x + (b.x ?? b), y: a.y + (b.y ?? b) });\n\n/**\n * Subtract vectors\n * @param {vec2} a Vector a\n * @param {vec2|number} b Vector or scalar b\n * @return {vec2} a - b\n */\nvec2.sub = (a, b) => ({ x: a.x - (b.x ?? b), y: a.y - (b.y ?? b) });\n\n/**\n * Scale a vector\n * @param {vec2} a Vector a\n * @param {vec2|number} b Vector or scalar b\n * @return {vec2} a * b\n */\nvec2.mul = (a, b) => ({ x: a.x * (b.x ?? b), y: a.y * (b.y ?? b) });\n\n/**\n * Scale a vector by a scalar, alias for vec2.mul\n * @param {vec2} a Vector a\n * @param {number} b Scalar b\n * @return {vec2} a * b\n */\nvec2.scale = (a, b) => vec2.mul(a, b);\n\n/**\n * Divide a vector\n * @param {vec2} a Vector a\n * @param {vec2|number} b Vector or scalar b\n * @return {vec2} a / b\n */\nvec2.div = (a, b) => ({ x: a.x / (b.x ?? b), y: a.y / (b.y ?? b) });\n\n/**\n * Get the length of a vector\n * @param {vec2} a Vector a\n * @return {number} |a|\n */\nvec2.len = a => Math.sqrt(a.x * a.x + a.y * a.y);\n\n/**\n * Get the length of a vector using taxicab geometry\n * @param {vec2} a Vector a\n * @return {number} |a|\n */\nvec2.manhattan = a => Math.abs(a.x) + Math.abs(a.y);\n\n/**\n * Normalise a vector\n * @param {vec2} a The vector to normalise\n * @return {vec2} ^a\n */\nvec2.nor = a => {\n  let len = vec2.len(a);\n  return len ? { x: a.x / len, y: a.y / len } : vec2();\n};\n\n/**\n * Get a dot product of vectors\n * @param {vec2} a Vector a\n * @param {vec2} b Vector b\n * @return {number} a ∙ b\n */\nvec2.dot = (a, b) => a.x * b.x + a.y * b.y;\n\n/**\n * Rotate a vector by r radians\n * @param {vec2} a The vector to rotate\n * @param {number} r The angle to rotate by, measured in radians\n * @return {vec2} A rotated vector\n */\nvec2.rot = (a, r) => {\n  let s = Math.sin(r),\n    c = Math.cos(r);\n  return { x: c * a.x - s * a.y, y: s * a.x + c * a.y };\n};\n\n/**\n * Fast method to rotate a vector by -90, 90 or 180 degrees\n * @param {vec2} a The vector to rotate\n * @param {number} r 1 for 90 degrees (cw), -1 for -90 degrees (ccw), 2 or -2 for 180 degrees\n * @return {vec2} A rotated vector\n */\nvec2.rotf = (a, r) => {\n  switch (r) {\n    case 1: return vec2(a.y, -a.x);\n    case -1: return vec2(-a.y, a.x);\n    case 2: case -2: return vec2(-a.x, -a.y);\n    default: return a;\n  }\n};\n\n/**\n * Scalar cross product of two vectors\n * @param {vec2} a Vector a\n * @param {vec2} b Vector b\n * @return {number} a × b\n */\nvec2.cross = (a, b) => {\n  return a.x * b.y - a.y * b.x;\n};\n\n/**\n * Check if two vectors are equal\n * @param {vec2} a Vector a\n * @param {vec2} b Vector b\n * @return {boolean} True if vectors a and b are equal, false otherwise\n */\nvec2.eq = (a, b) => a.x === b.x && a.y === b.y;\n\n/**\n * Get the angle of a vector\n * @param {vec2} a Vector a\n * @return {number} The angle of vector a in radians\n */\nvec2.rad = a => Math.atan2(a.y, a.x);\n\n/**\n * Copy a vector\n * @param {vec2} a The vector to copy\n * @return {vec2} A copy of vector a\n */\nvec2.cpy = a => vec2(a);\n\n/**\n * A function to call on each component of a 2d vector\n * @callback vec2MapCallback\n * @param {number} value The component value\n * @param {'x' | 'y'} label The component label (x or y)\n * @return {number} The mapped component\n */\n\n/**\n * Call a function on each component of a vector and build a new vector from the results\n * @param {vec2} a Vector a\n * @param {vec2MapCallback} f The function to call on each component of the vector\n * @return {vec2} Vector a mapped through f\n */\nvec2.map = (a, f) => ({ x: f(a.x, 'x'), y: f(a.y, 'y') });\n\n/**\n * Convert a vector into a string\n * @param {vec2} a The vector to convert\n * @param {string} [s=', '] The separator string\n * @return {string} A string representation of the vector\n */\nvec2.str = (a, s = ', ') => `${a.x}${s}${a.y}`;\n\n/**\n * Swizzle a vector with a string of component labels\n *\n * The string can contain:\n * - `x` or `y`\n * - `u` or `v` (aliases for `x` and `y`, respectively)\n * - `X`, `Y`, `U`, `V` (negated versions of the above)\n * - `0` or `1` (these will be passed through unchanged)\n * - `.` to return the component that would normally be at this position (or 0)\n *\n * Any other characters will default to 0\n * @param {vec2} a The vector to swizzle\n * @param {string} [s='..'] The swizzle string\n * @return {Array<number>} The swizzled components\n * @example <caption>swizzling a vector</caption>\n * let a = vec2(3, -2);\n * vec2.swiz(a, 'x');    // [3]\n * vec2.swiz(a, 'yx');   // [-2, 3]\n * vec2.swiz(a, 'xY');   // [3, 2]\n * vec2.swiz(a, 'Yy');   // [2, -2]\n * vec2.swiz(a, 'x.x');  // [3, -2, 3]\n * vec2.swiz(a, 'y01x'); // [-2, 0, 1, 3]\n */\nvec2.swiz = (a, s = '..') => {\n  const result = [];\n  s.split('').forEach((c, i) => {\n    switch (c) {\n      case 'x': case 'u': result.push(a.x); break;\n      case 'y': case 'v': result.push(a.y); break;\n      case 'X': case 'U': result.push(-a.x); break;\n      case 'Y': case 'V': result.push(-a.y); break;\n      case '0': result.push(0); break;\n      case '1': result.push(1); break;\n      case '.': result.push([a.x, a.y][i] ?? 0); break;\n      default: result.push(0);\n    }\n  });\n  return result;\n};\n\n/**\n * Polar coordinates for a 2d vector\n * @typedef {Object} polarCoordinates2d\n * @property {number} r The magnitude (radius) of the vector\n * @property {number} theta The angle of the vector\n */\n\n/**\n * Convert a vector into polar coordinates\n * @param {vec2} a The vector to convert\n * @return {polarCoordinates2d} The magnitude and angle of the vector\n */\nvec2.polar = a => ({ r: vec2.len(a), theta: Math.atan2(a.y, a.x) });\n\n/**\n * Convert polar coordinates into a vector\n * @param {number} r The magnitude (radius) of the vector\n * @param {number} theta The angle of the vector\n * @return {vec2} A vector with the given angle and magnitude\n */\nvec2.fromPolar = (r, theta) => vec2(r * Math.cos(theta), r * Math.sin(theta));\n\n/**\n * A 3d vector\n * @typedef {Object} vec3\n * @property {number} x The x component of the vector\n * @property {number} y The y component of the vector\n * @property {number} z The z component of the vector\n */\n\n/**\n * Create a new 3d vector\n * @param {number|vec3|vec2} [x] The x component of the vector, or a vector to copy\n * @param {number} [y] The y component of the vector, or the z component if x is a vec2\n * @param {number} [z] The z component of the vector\n * @return {vec3} A new 3d vector\n * @example <caption>various ways to initialise a vector</caption>\n * let a = vec3(3, 2, 1);       // (3, 2, 1)\n * let b = vec3(4, 5);          // (4, 5, 0)\n * let c = vec3(6);             // (6, 6, 6)\n * let d = vec3(a);             // (3, 2, 1)\n * let e = vec3();              // (0, 0, 0)\n * let f = vec3(vec2(1, 2), 3); // (1, 2, 3)\n * let g = vec3(vec2(4, 5));    // (4, 5, 0)\n */\nconst vec3 = (x, y, z) => {\n  if (!x && !y && !z) {\n    return { x: 0, y: 0, z: 0 };\n  }\n  if (_vec_is_vec3(x)) {\n    return { x: x.x || 0, y: x.y || 0, z: x.z || 0 };\n  }\n  if (_vec_is_vec2(x)) {\n    return { x: x.x || 0, y: x.y || 0, z: y || 0 };\n  }\n  return { x: x, y: y ?? x, z: z ?? x };\n};\n\n/**\n * Get the components of a vector as an array\n * @param {vec3} a The vector to get components from\n * @return {Array<number>} The vector components as an array\n */\nvec3.components = a => [a.x, a.y, a.z];\n\n/**\n * Create a vector from an array of components\n * @param {Array<number>} components The components of the vector\n * @return {vec3} A new vector\n */\nvec3.fromComponents = components => vec3(...components.slice(0, 3));\n\n/**\n * Return a unit vector (1, 0, 0)\n * @return {vec3} A unit vector (1, 0, 0)\n */\nvec3.ux = () => vec3(1, 0, 0);\n\n/**\n * Return a unit vector (0, 1, 0)\n * @return {vec3} A unit vector (0, 1, 0)\n */\nvec3.uy = () => vec3(0, 1, 0);\n\n/**\n * Return a unit vector (0, 0, 1)\n * @return {vec3} A unit vector (0, 0, 1)\n */\nvec3.uz = () => vec3(0, 0, 1);\n\n/**\n * Add vectors\n * @param {vec3} a Vector a\n * @param {vec3|number} b Vector or scalar b\n * @return {vec3} a + b\n */\nvec3.add = (a, b) => ({ x: a.x + (b.x ?? b), y: a.y + (b.y ?? b), z: a.z + (b.z ?? b) });\n\n/**\n * Subtract vectors\n * @param {vec3} a Vector a\n * @param {vec3|number} b Vector or scalar b\n * @return {vec3} a - b\n */\nvec3.sub = (a, b) => ({ x: a.x - (b.x ?? b), y: a.y - (b.y ?? b), z: a.z - (b.z ?? b) });\n\n/**\n * Scale a vector\n * @param {vec3} a Vector a\n * @param {vec3|number} b Vector or scalar b\n * @return {vec3} a * b\n */\nvec3.mul = (a, b) => ({ x: a.x * (b.x ?? b), y: a.y * (b.y ?? b), z: a.z * (b.z ?? b) });\n\n/**\n * Scale a vector by a scalar, alias for vec3.mul\n * @param {vec3} a Vector a\n * @param {number} b Scalar b\n * @return {vec3} a * b\n */\nvec3.scale = (a, b) => vec3.mul(a, b);\n\n/**\n * Divide a vector\n * @param {vec3} a Vector a\n * @param {vec3|number} b Vector or scalar b\n * @return {vec3} a / b\n */\nvec3.div = (a, b) => ({ x: a.x / (b.x ?? b), y: a.y / (b.y ?? b), z: a.z / (b.z ?? b) });\n\n/**\n * Get the length of a vector\n * @param {vec3} a Vector a\n * @return {number} |a|\n */\nvec3.len = a => Math.sqrt(a.x * a.x + a.y * a.y + a.z * a.z);\n\n/**\n * Get the length of a vector using taxicab geometry\n * @param {vec3} a Vector a\n * @return {number} |a|\n */\nvec3.manhattan = a => Math.abs(a.x) + Math.abs(a.y) + Math.abs(a.z);\n\n/**\n * Normalise a vector\n * @param {vec3} a The vector to normalise\n * @return {vec3} ^a\n */\nvec3.nor = a => {\n  let len = vec3.len(a);\n  return len ? { x: a.x / len, y: a.y / len, z: a.z / len } : vec3();\n};\n\n/**\n * Get a dot product of vectors\n * @param {vec3} a Vector a\n * @param {vec3} b Vector b\n * @return {number} a ∙ b\n */\nvec3.dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;\n\n/**\n * Rotate a vector using a rotation matrix\n * @param {vec3} a The vector to rotate\n * @param {mat} m The rotation matrix\n * @return {vec3} A rotated vector\n */\nvec3.rot = (a, m) => vec3(\n  vec3.dot(vec3.fromComponents(mat.row(m, 1)), a),\n  vec3.dot(vec3.fromComponents(mat.row(m, 2)), a),\n  vec3.dot(vec3.fromComponents(mat.row(m, 3)), a)\n);\n\n/**\n * Rotate a vector by r radians around the x axis\n * @param {vec3} a The vector to rotate\n * @param {number} r The angle to rotate by, measured in radians\n * @return {vec3} A rotated vector\n */\nvec3.rotx = (a, r) => vec3(\n  a.x,\n  a.y * Math.cos(r) - a.z * Math.sin(r),\n  a.y * Math.sin(r) + a.z * Math.cos(r)\n);\n\n/**\n * Rotate a vector by r radians around the y axis\n * @param {vec3} a The vector to rotate\n * @param {number} r The angle to rotate by, measured in radians\n * @return {vec3} A rotated vector\n */\nvec3.roty = (a, r) => vec3(\n  a.x * Math.cos(r) + a.z * Math.sin(r),\n  a.y,\n  -a.x * Math.sin(r) + a.z * Math.cos(r)\n);\n\n/**\n * Rotate a vector by r radians around the z axis\n * @param {vec3} a The vector to rotate\n * @param {number} r The angle to rotate by, measured in radians\n * @return {vec3} A rotated vector\n */\nvec3.rotz = (a, r) => vec3(\n  a.x * Math.cos(r) - a.y * Math.sin(r),\n  a.x * Math.sin(r) + a.y * Math.cos(r),\n  a.z\n);\n\n/**\n * Rotate a vector using a quaternion\n * @param {vec3} a The vector to rotate\n * @param {Array<number>} q The quaternion to rotate by\n * @return {vec3} A rotated vector\n */\nvec3.rotq = (v, q) => {\n  if (q.length !== 4) {\n    return vec3();\n  }\n\n  const d = Math.sqrt(q[0] * q[0] + q[1] * q[1] + q[2] * q[2] + q[3] * q[3]);\n  if (d === 0) {\n    return vec3();\n  }\n\n  const uq = [q[0] / d, q[1] / d, q[2] / d, q[3] / d];\n  const u = vec3(...uq.slice(0, 3));\n  const s = uq[3];\n  return vec3.add(\n    vec3.add(\n      vec3.mul(u, 2 * vec3.dot(u, v)),\n      vec3.mul(v, s * s - vec3.dot(u, u))\n    ),\n    vec3.mul(vec3.cross(u, v), 2 * s)\n  );\n};\n\n/**\n * Rotate a vector using Euler angles\n * @param {vec3} a The vector to rotate\n * @param {vec3} e The Euler angles to rotate by\n * @return {vec3} A rotated vector\n */\nvec3.rota = (a, e) => vec3.rotz(vec3.roty(vec3.rotx(a, e.x), e.y), e.z);\n\n/**\n * Get the cross product of vectors\n * @param {vec3} a Vector a\n * @param {vec3} b Vector b\n * @return {vec3} a × b\n */\nvec3.cross = (a, b) => vec3(\n  a.y * b.z - a.z * b.y,\n  a.z * b.x - a.x * b.z,\n  a.x * b.y - a.y * b.x\n);\n\n/**\n * Check if two vectors are equal\n * @param {vec3} a Vector a\n * @param {vec3} b Vector b\n * @return {boolean} True if vectors a and b are equal, false otherwise\n */\nvec3.eq = (a, b) => a.x === b.x && a.y === b.y && a.z === b.z;\n\n/**\n * Get the angle of a vector from the x axis\n * @param {vec3} a Vector a\n * @return {number} The angle of vector a in radians\n */\nvec3.radx = a => Math.atan2(a.z, a.y);\n\n/**\n * Get the angle of a vector from the y axis\n * @param {vec3} a Vector a\n * @return {number} The angle of vector a in radians\n */\nvec3.rady = a => Math.atan2(a.x, a.y);\n\n/**\n * Get the angle of a vector from the z axis\n * @param {vec3} a Vector a\n * @return {number} The angle of vector a in radians\n */\nvec3.radz = a => Math.atan2(a.y, a.z);\n\n/**\n * Copy a vector\n * @param {vec3} a The vector to copy\n * @return {vec3} A copy of vector a\n */\nvec3.cpy = a => vec3(a);\n\n/**\n * A function to call on each component of a 3d vector\n * @callback vec3MapCallback\n * @param {number} value The component value\n * @param {'x' | 'y' | 'z'} label The component label (x, y or z)\n * @return {number} The mapped component\n */\n\n/**\n * Call a function on each component of a vector and build a new vector from the results\n * @param {vec3} a Vector a\n * @param {vec3MapCallback} f The function to call on each component of the vector\n * @return {vec3} Vector a mapped through f\n */\nvec3.map = (a, f) => ({ x: f(a.x, 'x'), y: f(a.y, 'y'), z: f(a.z, 'z') });\n\n/**\n * Convert a vector into a string\n * @param {vec3} a The vector to convert\n * @param {string} [s=', '] The separator string\n * @return {string} A string representation of the vector\n */\nvec3.str = (a, s = ', ') => `${a.x}${s}${a.y}${s}${a.z}`;\n\n/**\n * Swizzle a vector with a string of component labels\n *\n * The string can contain:\n * - `x`, `y` or `z`\n * - `u`, `v` or `w` (aliases for `x`, `y` and `z`, respectively)\n * - `r`, `g` or `b` (aliases for `x`, `y` and `z`, respectively)\n * - `X`, `Y`, `Z`, `U`, `V`, `W`, `R`, `G`, `B` (negated versions of the above)\n * - `0` or `1` (these will be passed through unchanged)\n * - `.` to return the component that would normally be at this position (or 0)\n *\n * Any other characters will default to 0\n * @param {vec3} a The vector to swizzle\n * @param {string} [s='...'] The swizzle string\n * @return {Array<number>} The swizzled components\n * @example <caption>swizzling a vector</caption>\n * let a = vec3(3, -2, 1);\n * vec3.swiz(a, 'x');     // [3]\n * vec3.swiz(a, 'zyx');   // [1, -2, 3]\n * vec3.swiz(a, 'xYZ');   // [3, 2, -1]\n * vec3.swiz(a, 'Zzx');   // [-1, 1, 3]\n * vec3.swiz(a, 'x.x');   // [3, -2, 3]\n * vec3.swiz(a, 'y01zx'); // [-2, 0, 1, 1, 3]\n */\nvec3.swiz = (a, s = '...') => {\n  const result = [];\n  s.split('').forEach((c, i) => {\n    switch (c) {\n      case 'x': case 'u': case 'r': result.push(a.x); break;\n      case 'y': case 'v': case 'g': result.push(a.y); break;\n      case 'z': case 'w': case 'b': result.push(a.z); break;\n      case 'X': case 'U': case 'R': result.push(-a.x); break;\n      case 'Y': case 'V': case 'G': result.push(-a.y); break;\n      case 'Z': case 'W': case 'B': result.push(-a.z); break;\n      case '0': result.push(0); break;\n      case '1': result.push(1); break;\n      case '.': result.push([a.x, a.y, a.z][i] ?? 0); break;\n      default: result.push(0);\n    }\n  });\n  return result;\n};\n\n/**\n * Polar coordinates for a 3d vector\n * @typedef {Object} polarCoordinates3d\n * @property {number} r The magnitude (radius) of the vector\n * @property {number} theta The tilt angle of the vector\n * @property {number} phi The pan angle of the vector\n */\n\n/**\n * Convert a vector into polar coordinates\n * @param {vec3} a The vector to convert\n * @return {polarCoordinates3d} The magnitude, tilt and pan of the vector\n */\nvec3.polar = a => {\n  let r = vec3.len(a),\n    theta = Math.acos(a.y / r),\n    phi = Math.atan2(a.z, a.x);\n  return { r, theta, phi };\n};\n\n/**\n * Convert polar coordinates into a vector\n * @param {number} r The magnitude (radius) of the vector\n * @param {number} theta The tilt of the vector\n * @param {number} phi The pan of the vector\n * @return {vec3} A vector with the given angle and magnitude\n */\nvec3.fromPolar = (r, theta, phi) => {\n  const sinTheta = Math.sin(theta);\n  return vec3(\n    r * sinTheta * Math.cos(phi),\n    r * Math.cos(theta),\n    r * sinTheta * Math.sin(phi)\n  );\n};\n\n/**\n * A matrix\n * @typedef {Object} mat\n * @property {number} m The number of rows in the matrix\n * @property {number} n The number of columns in the matrix\n * @property {Array<number>} entries The matrix values\n */\n\n/**\n * Create a new matrix\n * @param {number} [m=4] The number of rows\n * @param {number} [n=4] The number of columns\n * @param {Array<number>} [entries=[]] Matrix values in reading order\n * @return {mat} A new matrix\n */\nconst mat = (m = 4, n = 4, entries = []) => ({\n  m, n,\n  entries: entries.concat(Array(m * n).fill(0)).slice(0, m * n)\n});\n\n/**\n * Get an identity matrix of size n\n * @param {number} n The size of the matrix\n * @return {mat} An identity matrix\n */\nmat.identity = n => mat(n, n, Array(n * n).fill(0).map((v, i) => +(Math.floor(i / n) === i % n)));\n\n/**\n * Get an entry from a matrix\n * @param {mat} a Matrix a\n * @param {number} i The row offset\n * @param {number} j The column offset\n * @return {number} The value at position (i, j) in matrix a\n */\nmat.get = (a, i, j) => a.entries[(j - 1) + (i - 1) * a.n];\n\n/**\n * Set an entry of a matrix\n * @param {mat} a Matrix a\n * @param {number} i The row offset\n * @param {number} j The column offset\n * @param {number} v The value to set in matrix a\n */\nmat.set = (a, i, j, v) => { a.entries[(j - 1) + (i - 1) * a.n] = v; };\n\n/**\n * Get a row from a matrix as an array\n * @param {mat} a Matrix a\n * @param {number} m The row offset\n * @return {Array<number>} Row m from matrix a\n */\nmat.row = (a, m) => {\n  const s = (m - 1) * a.n;\n  return a.entries.slice(s, s + a.n);\n};\n\n/**\n * Get a column from a matrix as an array\n * @param {mat} a Matrix a\n * @param {number} n The column offset\n * @return {Array<number>} Column n from matrix a\n */\nmat.col = (a, n) => _vec_times(i => mat.get(a, (i + 1), n), a.m);\n\n/**\n * Add matrices\n * @param {mat} a Matrix a\n * @param {mat} b Matrix b\n * @return {mat} a + b\n */\nmat.add = (a, b) => a.m === b.m && a.n === b.n && mat.map(a, (v, i) => v + b.entries[i]);\n\n/**\n * Subtract matrices\n * @param {mat} a Matrix a\n * @param {mat} b Matrix b\n * @return {mat} a - b\n */\nmat.sub = (a, b) => a.m === b.m && a.n === b.n && mat.map(a, (v, i) => v - b.entries[i]);\n\n/**\n * Multiply matrices\n * @param {mat} a Matrix a\n * @param {mat} b Matrix b\n * @return {mat|false} ab or false if the matrices cannot be multiplied\n */\nmat.mul = (a, b) => {\n  if (a.n !== b.m) { return false; }\n  const result = mat(a.m, b.n);\n  for (let i = 1; i <= a.m; i++) {\n    for (let j = 1; j <= b.n; j++) {\n      mat.set(result, i, j, _vec_dot(mat.row(a, i), mat.col(b, j)));\n    }\n  }\n  return result;\n};\n\n/**\n * Multiply a matrix by a vector\n * @param {mat} a Matrix a\n * @param {vec2|vec3|number[]} b Vector b\n * @return {vec2|vec3|number[]|false} ab or false if the matrix and vector cannot be multiplied\n */\nmat.mulv = (a, b) => {\n  let n, bb, rt;\n  if (_vec_is_vec3(b)) {\n    bb = vec3.components(b);\n    n = 3;\n    rt = vec3.fromComponents;\n  } else if (_vec_is_vec2(b)) {\n    bb = vec2.components(b);\n    n = 2;\n    rt = vec2.fromComponents;\n  } else {\n    bb = b;\n    n = b.length ?? 0;\n    rt = v => v;\n  }\n  if (a.n !== n) { return false; }\n  const result = [];\n  for (let i = 1; i <= a.m; i++) {\n    result.push(_vec_dot(mat.row(a, i), bb));\n  }\n  return rt(result);\n}\n\n/**\n * Scale a matrix\n * @param {mat} a Matrix a\n * @param {number} b Scalar b\n * @return {mat} a * b\n */\nmat.scale = (a, b) => mat.map(a, v => v * b);\n\n/**\n * Transpose a matrix\n * @param {mat} a The matrix to transpose\n * @return {mat} A transposed matrix\n */\nmat.trans = a => mat(a.n, a.m, _vec_times(i => mat.col(a, (i + 1)), a.n).flat());\n\n/**\n * Get the minor of a matrix\n * @param {mat} a Matrix a\n * @param {number} i The row offset\n * @param {number} j The column offset\n * @return {mat|false} The (i, j) minor of matrix a or false if the matrix is not square\n */\nmat.minor = (a, i, j) => {\n  if (a.m !== a.n) { return false; }\n  const entries = [];\n  for (let ii = 1; ii <= a.m; ii++) {\n    if (ii === i) { continue; }\n    for (let jj = 1; jj <= a.n; jj++) {\n      if (jj === j) { continue; }\n      entries.push(mat.get(a, ii, jj));\n    }\n  }\n  return mat(a.m - 1, a.n - 1, entries);\n};\n\n/**\n * Get the determinant of a matrix\n * @param {mat} a Matrix a\n * @return {number|false} |a| or false if the matrix is not square\n */\nmat.det = a => {\n  if (a.m !== a.n) { return false; }\n  if (a.m === 1) {\n    return a.entries[0];\n  }\n  if (a.m === 2) {\n    return a.entries[0] * a.entries[3] - a.entries[1] * a.entries[2];\n  }\n  let total = 0, sign = 1;\n  for (let j = 1; j <= a.n; j++) {\n    total += sign * a.entries[j - 1] * mat.det(mat.minor(a, 1, j));\n    sign *= -1;\n  }\n  return total;\n};\n\n/**\n * Normalise a matrix\n * @param {mat} a The matrix to normalise\n * @return {mat|false} ^a or false if the matrix is not square\n */\nmat.nor = a => {\n  if (a.m !== a.n) { return false; }\n  const d = mat.det(a);\n  return mat.map(a, i => i * d);\n};\n\n/**\n * Get the adjugate of a matrix\n * @param {mat} a The matrix from which to get the adjugate\n * @return {mat} The adjugate of a\n */\nmat.adj = a => {\n  const minors = mat(a.m, a.n);\n  for (let i = 1; i <= a.m; i++) {\n    for (let j = 1; j <= a.n; j++) {\n      mat.set(minors, i, j, mat.det(mat.minor(a, i, j)));\n    }\n  }\n  const cofactors = mat.map(minors, (v, i) => v * (i % 2 ? -1 : 1));\n  return mat.trans(cofactors);\n};\n\n/**\n * Get the inverse of a matrix\n * @param {mat} a The matrix to invert\n * @return {mat|false} a^-1 or false if the matrix has no inverse\n */\nmat.inv = a => {\n  if (a.m !== a.n) { return false; }\n  const d = mat.det(a);\n  if (d === 0) { return false; }\n  return mat.scale(mat.adj(a), 1 / d);\n};\n\n/**\n * Check if two matrices are equal\n * @param {mat} a Matrix a\n * @param {mat} b Matrix b\n * @return {boolean} True if matrices a and b are identical, false otherwise\n */\nmat.eq = (a, b) => a.m === b.m && a.n === b.n && mat.str(a) === mat.str(b);\n\n/**\n * Copy a matrix\n * @param {mat} a The matrix to copy\n * @return {mat} A copy of matrix a\n */\nmat.cpy = a => mat(a.m, a.n, [...a.entries]);\n\n/**\n * A function to call on each entry of a matrix\n * @callback matrixMapCallback\n * @param {number} value The entry value\n * @param {number} index The entry index\n * @param {Array<number>} entries The array of matrix entries\n * @return {number} The mapped entry\n */\n\n/**\n * Call a function on each entry of a matrix and build a new matrix from the results\n * @param {mat} a Matrix a\n * @param {matrixMapCallback} f The function to call on each entry of the matrix\n * @return {mat} Matrix a mapped through f\n */\nmat.map = (a, f) => mat(a.m, a.n, a.entries.map(f));\n\n/**\n * Convert a matrix into a string\n * @param {mat} a The matrix to convert\n * @param {string} [ms=', '] The separator string for columns\n * @param {string} [ns='\\n'] The separator string for rows\n * @return {string} A string representation of the matrix\n */\nmat.str = (a, ms = ', ', ns = '\\n') => _vec_chunk(a.entries, a.n).map(r => r.join(ms)).join(ns);\n\nif (true) {\n  module.exports = { vec2, vec3, mat };\n}\n\n\n//# sourceURL=webpack://@basementuniverse/image-font/./node_modules/@basementuniverse/vec/vec.js?\n}");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./index.ts");
+/******/ 	
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@basementuniverse/image-font",
+  "version": "1.0.0",
+  "description": "A component for rendering text using image fonts",
+  "author": "Gordon Larrigan <gordonlarrigan@gmail.com> (https://gordonlarrigan.com)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/basementuniverse/image-font.git"
+  },
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch"
+  },
+  "dependencies": {
+    "@basementuniverse/texture-atlas": "^1.2.0",
+    "@basementuniverse/vec": "^2.3.4"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.12",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "ts-loader": "^8.0.7",
+    "typescript": "^4.9.4",
+    "webpack": "^5.3.2",
+    "webpack-cli": "^4.1.0"
+  }
+}