8 files changed, 490 insertions, 0 deletions
diff --git a/dist/configuration.d.ts b/dist/configuration.d.ts
new file mode 100644
index 0000000..af84a53
--- /dev/null
+++ b/dist/configuration.d.ts
@@ -0,0 +1,179 @@
+/**
+ * Returns a configuration by extending the defaults with the user overrides.
+ *
+ * @param {tConfiguration} [overrides={}] - User overrides.
+ * @returns {tConfiguration} The extended configuration.
+ */
+export function extendConfiguration(overrides?: tConfiguration): tConfiguration;
+/**
+ * The configuration options to control the render.
+ */
+export type tConfiguration = {
+    /**
+     * - Options that control how the map is rendered.
+     */
+    options: tConfigurationOptions;
+    /**
+     * - Options that control the look of the map.
+     */
+    theme: tConfigurationTheme;
+};
+/**
+ * Options that control how the map is rendered
+ */
+export type tConfigurationOptions = {
+    /**
+     * - Whether to render the background patterns.
+     */
+    showBackground: boolean;
+    /**
+     * - Whether to activate smart label positioning.
+     */
+    smartLabelPositioning: boolean;
+};
+/**
+ * Options that control how the map is rendered
+ */
+export type tConfigurationTheme = {
+    /**
+     * - The colors of map elements.
+     */
+    colors: tConfigurationThemeColors;
+    /**
+     * - The sizes of map elements.
+     */
+    sizes: tConfigurationThemeSizes;
+    /**
+     * - The font family and sizes.
+     */
+    fonts: tConfigurationThemeFonts;
+    /**
+     * - The line heights of map text.
+     */
+    lineHeights: tConfigurationThemeLineHeights;
+    /**
+     * - Opacity of map elements.
+     */
+    opacity: tConfigurationThemeOpacity;
+};
+/**
+ * The colors of map elements
+ */
+export type tConfigurationThemeColors = {
+    /**
+     * - The color of the background.
+     */
+    background: string;
+    /**
+     * : - The color of the axis lines at the edge of the map.
+     */
+    axis: string;
+    /**
+     * - The color of component shapes.
+     */
+    vertex: string;
+    /**
+     * - The color of component labels.
+     */
+    label: string;
+    /**
+     * - The first color of the stage bitmap when the background is drawn.
+     */
+    stageForeground: string;
+    /**
+     * - The second color of the stage bitmap when the background is drawn.
+     */
+    stageBackground: string;
+    /**
+     * - The color of the inertia element.
+     */
+    inertia: string;
+    /**
+     * - The color of the evolution arrow.
+     */
+    evolution: string;
+    /**
+     * - A list of colors to use for groups.
+     */
+    groups: Array<string>;
+};
+/**
+ * The sizes of map elements
+ */
+export type tConfigurationThemeSizes = {
+    /**
+     * - The width of the map.
+     */
+    mapWidth: number;
+    /**
+     * - The height of the map.
+     */
+    mapHeight: number;
+    /**
+     * - The padding around the map for axis labels.
+     */
+    padding: number;
+    /**
+     * - The default line width.
+     */
+    lineWidth: number;
+    /**
+     * - Width of component shapes.
+     */
+    vertexWidth: number;
+    /**
+     * - Height of component shapes.
+     */
+    vertexHeight: number;
+    /**
+     * - Size of arrowheads.
+     */
+    arrowheadSize: number;
+    /**
+     * - Height of stage lines.
+     */
+    stageHeight: number;
+};
+/**
+ * The sizes of map elements
+ */
+export type tConfigurationThemeFonts = {
+    /**
+     * - The font family to use, in CSS form.
+     */
+    family: string;
+    /**
+     * - Font size of the axis labels.
+     */
+    axisLabel: number;
+    /**
+     * - Font size of vertex labels.
+     */
+    vertexLabel: number;
+    /**
+     * - Font size of note text.
+     */
+    note: number;
+};
+/**
+ * The line heights of map text
+ */
+export type tConfigurationThemeLineHeights = {
+    /**
+     * - Line height of vertex labels.
+     */
+    vertexLabel: number;
+    /**
+     * - Line height of note text.
+     */
+    note: number;
+};
+/**
+ * The opacity of map elements.
+ */
+export type tConfigurationThemeOpacity = {
+    /**
+     * - Opacity of the color in groups
+     */
+    groups: number;
+};
diff --git a/dist/image_type.d.ts b/dist/image_type.d.ts
new file mode 100644
index 0000000..93aa767
--- /dev/null
+++ b/dist/image_type.d.ts
@@ -0,0 +1,9 @@
+/**
+ * ImageType
+ */
+export type ImageType = string;
+export namespace ImageType {
+    let PNG: string;
+    let JPEG: string;
+    let PDF: string;
+}
diff --git a/dist/index.d.ts b/dist/index.d.ts
new file mode 100644
index 0000000..5aa1192
--- /dev/null
+++ b/dist/index.d.ts
@@ -0,0 +1,71 @@
+/**
+ * @typedef {import('./configuration.js').tConfiguration} tConfiguration
+ * @typedef {import('./image_type.js').ImageType} ImageType
+ * @typedef {import('./stage_type.js').StageType} StageType
+ * @typedef {import('wmap-parser').Map} ParsedMap
+ * @typedef {import('canvas').Canvas} Canvas
+ */
+/**
+ * Render a parsed Wardley map to a canvas element
+ * Works in both browser and Node.js environments
+ *
+ * @param {ParsedMap} map - Parsed map object from wmap-parser
+ * @param {HTMLCanvasElement|Canvas} canvas - Canvas element (browser) or Canvas instance (Node.js)
+ * @param {StageType} [stageType=StageType.ACTIVITIES] - The labels to use for each stage in the map.
+ * @param {tConfiguration} overrides - User configuration overrides
+ * @returns {Promise<void>}
+ *
+ * @example
+ * // Browser
+ * import { parse } from 'wmap-parser';
+ * import { renderToCanvas } from 'wmap-renderer-canvas';
+ *
+ * const map = parse(wmapSource);
+ * const canvas = document.getElementById('myCanvas');
+ * await renderToCanvas(map, canvas);
+ *
+ * @example
+ * // Node.js
+ * import { createCanvas } from 'canvas';
+ * import { parse } from 'wmap-parser';
+ * import { renderToCanvas } from 'wmap-renderer-canvas';
+ *
+ * const map = parse(wmapSource);
+ * const canvas = createCanvas(1384, 1084);
+ * await renderToCanvas(map, canvas);
+ */
+export function renderToCanvas(map: ParsedMap, canvas: HTMLCanvasElement | Canvas, stageType?: StageType, overrides?: tConfiguration): Promise<void>;
+/**
+ * Render a parsed Wardley map to an image stream
+ * Only available in Node.js environments
+ *
+ * @param {ParsedMap} map - Parsed map object from wmap-parser
+ * @param {ImageType} imageType - Output image format ('png', 'jpeg', or 'pdf')
+ * @param {StageType} [stageType=StageType.ACTIVITIES] - The labels to use for each stage in the map.
+ * @param {tConfiguration} overrides - User configuration overrides
+ * @returns {Promise<Stream>} Stream of the rendered image
+ *
+ * @throws {Error} If not in Node.js environment
+ * @throws {Error} If canvas module is not available
+ * @throws {Error} If imageType is not supported
+ *
+ * @example
+ * import { parse } from 'wmap-parser';
+ * import { renderToImage } from 'wmap-renderer-canvas';
+ * import fs from 'fs';
+ *
+ * const map = parse(wmapSource);
+ * const stream = await renderToImage(map, 'png');
+ * const out = fs.createWriteStream('map.png');
+ * stream.pipe(out);
+ */
+export function renderToImage(map: ParsedMap, imageType?: ImageType, stageType?: StageType, overrides?: tConfiguration): Promise<Stream>;
+export type ImageType = import("./image_type.js").ImageType;
+export { ImageType } from "./image_type.js";
+export type StageType = import("./stage_type.js").StageType;
+export { StageType } from "./stage_type.js";
+export type tConfiguration = import("./configuration.js").tConfiguration;
+export type ParsedMap = import("wmap-parser").Map;
+export type Canvas = import("canvas").Canvas;
+import { StageType } from "./stage_type.js";
+import { ImageType } from "./image_type.js";
diff --git a/dist/patterns.d.ts b/dist/patterns.d.ts
new file mode 100644
index 0000000..bf5188a
--- /dev/null
+++ b/dist/patterns.d.ts
@@ -0,0 +1,16 @@
+/**
+ * Create a canvas pattern from a pattern definition
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {Array<number>} patternData - 8x8 pattern array
+ * @param {number} pixelSize - Size of each pattern pixel
+ * @param {string} fgColor - Foreground color (for 0 values)
+ * @param {string} bgColor - Background color (for 1 values)
+ * @returns {Promise<CanvasPattern>} Canvas pattern
+ */
+export function createPattern(ctx: CanvasRenderingContext2D, patternData: Array<number>, pixelSize: number, fgColor: string, bgColor: string): Promise<CanvasPattern>;
+export namespace patterns {
+    let stitch: number[];
+    let shingles: number[];
+    let shadowGrid: number[];
+    let wicker: number[];
+}
diff --git a/dist/renderer.d.ts b/dist/renderer.d.ts
new file mode 100644
index 0000000..eb4102a
--- /dev/null
+++ b/dist/renderer.d.ts
@@ -0,0 +1,12 @@
+/**
+ * Render a parsed Wardley map to a canvas context
+ * @param {ParsedMap} map - Parsed map object from wmap-parser
+ * @param {CanvasRenderingContext2D} ctx - Canvas context to render to
+ * @param {StageType} stageType - The labels to use for each stage in the map.
+ * @param {tConfiguration} configuration - Configuration object
+ * @returns {Promise<void>}
+ */
+export function render(map: ParsedMap, ctx: CanvasRenderingContext2D, stageType: StageType, configuration: tConfiguration): Promise<void>;
+export type tConfiguration = import("./configuration.js").tConfiguration;
+export type StageType = import("./stage_type.js").StageType;
+export type ParsedMap = import("wmap-parser").Map;
diff --git a/dist/smart-label-positioning.d.ts b/dist/smart-label-positioning.d.ts
new file mode 100644
index 0000000..32ba4fd
--- /dev/null
+++ b/dist/smart-label-positioning.d.ts
@@ -0,0 +1,33 @@
+/**
+ * Calculate optimal label position for a component
+ * @param {Object} component - Component object with label and coordinates
+ * @param {Object} mapData - Map data containing all components, edges, notes, etc.
+ * @param {Object} config - Configuration object
+ * @param {CanvasRenderingContext2D} ctx - Canvas context for text measurement
+ * @param {Array} allLines - Pre-collected lines from edges, evolutions, etc.
+ * @param {Array} noteRects - Pre-collected note rectangles
+ * @param {Array} inertiaRects - Pre-collected inertia rectangles
+ * @returns {Object} Position object with x, y coordinates in pixels
+ */
+export function calculateOptimalLabelPosition(component: any, mapData: any, config: any, ctx: CanvasRenderingContext2D, allLines: any[], noteRects: any[], inertiaRects: any[]): any;
+/**
+ * Collect all lines from edges, evolutions, inertias, and axes
+ */
+export function collectAllLines(mapData: any, config: any, componentMap: any): {
+    start: {
+        x: number;
+        y: any;
+    };
+    end: {
+        x: any;
+        y: any;
+    };
+}[];
+/**
+ * Collect all note rectangles
+ */
+export function collectNoteRects(mapData: any, config: any, ctx: any): any;
+/**
+ * Collect all inertia rectangles
+ */
+export function collectInertiaRects(mapData: any, config: any, componentMap: any): any;
diff --git a/dist/stage_type.d.ts b/dist/stage_type.d.ts
new file mode 100644
index 0000000..24a5e77
--- /dev/null
+++ b/dist/stage_type.d.ts
@@ -0,0 +1,149 @@
+/**
+ * StageType
+ */
+export type StageType = tStageType;
+export namespace StageType {
+    namespace BEHAVIOR {
+        let name: string;
+        let stages: string[];
+    }
+    namespace CERTAINTY {
+        let name_1: string;
+        export { name_1 as name };
+        let stages_1: string[];
+        export { stages_1 as stages };
+    }
+    namespace COMPARISON {
+        let name_2: string;
+        export { name_2 as name };
+        let stages_2: string[];
+        export { stages_2 as stages };
+    }
+    namespace CYNEFIN {
+        let name_3: string;
+        export { name_3 as name };
+        let stages_3: string[];
+        export { stages_3 as stages };
+    }
+    namespace DATA {
+        let name_4: string;
+        export { name_4 as name };
+        let stages_4: string[];
+        export { stages_4 as stages };
+    }
+    namespace DECISION_DRIVERS {
+        let name_5: string;
+        export { name_5 as name };
+        let stages_5: string[];
+        export { stages_5 as stages };
+    }
+    namespace EFFICIENCY {
+        let name_6: string;
+        export { name_6 as name };
+        let stages_6: string[];
+        export { stages_6 as stages };
+    }
+    namespace FAILURE {
+        let name_7: string;
+        export { name_7 as name };
+        let stages_7: string[];
+        export { stages_7 as stages };
+    }
+    namespace FOCUS_OF_VALUE {
+        let name_8: string;
+        export { name_8 as name };
+        let stages_8: string[];
+        export { stages_8 as stages };
+    }
+    namespace ACTIVITIES {
+        let name_9: string;
+        export { name_9 as name };
+        let stages_9: string[];
+        export { stages_9 as stages };
+    }
+    namespace KNOWLEDGE_MANAGEMENT {
+        let name_10: string;
+        export { name_10 as name };
+        let stages_10: string[];
+        export { stages_10 as stages };
+    }
+    namespace KNOWLEDGE {
+        let name_11: string;
+        export { name_11 as name };
+        let stages_11: string[];
+        export { stages_11 as stages };
+    }
+    namespace MARKET_ACTION {
+        let name_12: string;
+        export { name_12 as name };
+        let stages_12: string[];
+        export { stages_12 as stages };
+    }
+    namespace MARKET_PERCEPTION {
+        let name_13: string;
+        export { name_13 as name };
+        let stages_13: string[];
+        export { stages_13 as stages };
+    }
+    namespace MARKET {
+        let name_14: string;
+        export { name_14 as name };
+        let stages_14: string[];
+        export { stages_14 as stages };
+    }
+    namespace PERCEPTION_IN_INDUSTRY {
+        let name_15: string;
+        export { name_15 as name };
+        let stages_15: string[];
+        export { stages_15 as stages };
+    }
+    namespace EVOLUTION_STAGE {
+        let name_16: string;
+        export { name_16 as name };
+        let stages_16: string[];
+        export { stages_16 as stages };
+    }
+    namespace PRACTICE {
+        let name_17: string;
+        export { name_17 as name };
+        let stages_17: string[];
+        export { stages_17 as stages };
+    }
+    namespace PUBLICATION_TYPES {
+        let name_18: string;
+        export { name_18 as name };
+        let stages_18: string[];
+        export { stages_18 as stages };
+    }
+    namespace UBIQUITY {
+        let name_19: string;
+        export { name_19 as name };
+        let stages_19: string[];
+        export { stages_19 as stages };
+    }
+    namespace UNDERSTANDING {
+        let name_20: string;
+        export { name_20 as name };
+        let stages_20: string[];
+        export { stages_20 as stages };
+    }
+    namespace USER_PERCEPTION {
+        let name_21: string;
+        export { name_21 as name };
+        let stages_21: string[];
+        export { stages_21 as stages };
+    }
+}
+/**
+ * The definition of a stage type used to analyze different aspects of a map.
+ */
+export type tStageType = {
+    /**
+     * - The name of the stage type
+     */
+    name: string;
+    /**
+     * - The four stages
+     */
+    stages: [string, string, string, string];
+};
diff --git a/dist/utils.d.ts b/dist/utils.d.ts
new file mode 100644
index 0000000..7769666
--- /dev/null
+++ b/dist/utils.d.ts
@@ -0,0 +1,21 @@
+/**
+ * Convert percentage to pixel size
+ * @param {number} percentage - Percentage value (can be negative)
+ * @param {number} dimension - Dimension in pixels
+ * @returns {number} Pixel value
+ */
+export function percentToPixel(percentage: number, dimension: number): number;
+/**
+ * Get stage values from parsed map or use defaults
+ * @param {Array} stageOverrides - Stage overrides from parsed map
+ * @returns {Array<number>} Array of 3 stage values
+ */
+export function getStageValues(stageOverrides: any[]): Array<number>;
+/**
+ * Creates a render-friendly component map.
+ * @param {Array<Object>} The list of components
+ * @param {number} mapWidth - Map width in pixels
+ * @param {number} mapHeight - Map height in pixels
+ * @returns {Map} Pixel value
+ */
+export function createComponentMap(components: any, width: any, height: any): Map<any, any>;