@unmade/text-renderer 1.0.0 → 1.1.1

package/dist/node/loading/createLoadedFont.d.ts

@@ -0,0 +1,53 @@
+import { Face, Font } from 'harfbuzzjs';
+export interface SVGGlyphData {
+    svg: string;
+    viewbox: string;
+}
+export interface LoadedFont {
+    unitsPerEm: number;
+    names: {
+        fontFamily: string;
+    };
+    svgGlyphs?: Map<number, SVGGlyphData>;
+    charToGlyph(char: string): {
+        index: number;
+        advanceWidth: number;
+        name: string;
+        getBoundingBox(): {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+    };
+    getPath(text: string, x: number, y: number, fontSize: number, options?: {
+        drawSVG?: boolean;
+    }): {
+        getBoundingBox(): {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        toPathData(decimals?: number): string;
+    };
+    getPaths(text: string, x: number, y: number, fontSize: number, options?: {
+        drawSVG?: boolean;
+    }): Array<{
+        getBoundingBox(): {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        toPathData(decimals?: number): string;
+    }>;
+}
+export declare function boundsFromPath(pathData: string): {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+} | null;
+export declare function transformPath(pathData: string, scaleX: number, scaleY: number, dx: number): string;
+export declare function createLoadedFont(face: Face, font: Font, familyName: string, svgGlyphs?: Map<number, SVGGlyphData>): LoadedFont;

package/dist/node/loading/index.d.ts

@@ -0,0 +1,4 @@
+import { createLoadedFont, LoadedFont } from './createLoadedFont';
+export { createLoadedFont, type LoadedFont };
+export declare const getFontCache: () => Map<string, LoadedFont>;
+export declare const loadFont: (fontUrl: string, fetchSVGGlyphs?: boolean) => Promise<LoadedFont>;

package/dist/node/measuring/conversion.d.ts

@@ -0,0 +1,2 @@
+export declare function millimetersToInches(value: number): number;
+export declare function inchesToMillimeters(value: number): number;

package/dist/node/measuring/index.d.ts

@@ -0,0 +1,28 @@
+import { LoadedFont } from '../loading';
+import { BoxDimensions, PhysicalSize, TextSpacing } from '../types';
+export interface GetFontSizeFromPhysicalSizeOptions {
+    font: LoadedFont;
+    boxDimensions: BoxDimensions;
+    physicalSize: PhysicalSize;
+    spacing?: TextSpacing;
+}
+export interface GetTextMetricsAtFontSizeOptions {
+    font: LoadedFont;
+    text: string;
+    fontSize: number;
+    spacing?: TextSpacing;
+}
+/**
+ * This is the character we use to calculate font sizes
+ * when fixed physical text height is set for a placement.
+ *
+ * The 'I' character is used because of its flat top and bottom.
+ * https://en.wikipedia.org/wiki/Cap_height
+ */
+export declare const getStandardCharacter: (font: LoadedFont) => string;
+export declare const getFontSizeFromPhysicalSize: ({ font, boxDimensions, physicalSize, spacing, }: GetFontSizeFromPhysicalSizeOptions) => number;
+export declare const getTextMetricsAtFontSize: ({ font, text, fontSize, spacing, }: GetTextMetricsAtFontSizeOptions) => {
+    width: number;
+    height: number;
+    baseline: number;
+};

package/dist/node/renderText.d.ts

@@ -0,0 +1,5 @@
+import { RenderTextOptions } from './types';
+/**
+ * Synchronous text renderer. Requires a pre-loaded font.
+ */
+export declare const renderText: (options: RenderTextOptions) => string;

package/dist/node/rendering/index.d.ts

@@ -0,0 +1,42 @@
+import { LoadedFont } from '../loading';
+import { ColourMap, GlyphFill, HorizontalTextAlignmentValues, TextSpacing } from '../types';
+export interface SvgGlyphEntry {
+    content: string;
+    viewBox: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    glyphIndex: number;
+}
+export interface PathEntry {
+    attributes: {
+        d: string;
+        'data-character': string;
+        transform: string;
+    };
+    path: unknown;
+    matrix: DOMMatrix;
+    glyphData: {
+        index: number;
+        bbox: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+    };
+    svgGlyph?: SvgGlyphEntry;
+    fills?: GlyphFill[];
+}
+export declare const fontUnitsToPixels: (value: number, fontSize: number, unitsPerEm: number) => number;
+export interface GetTextAsPathDataOptions {
+    font: LoadedFont;
+    baselinePath: string;
+    text: string;
+    fontSize: number;
+    spacing?: TextSpacing;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    colourMap?: ColourMap;
+}
+export declare const getTextAsPathData: ({ font, baselinePath, text, fontSize, spacing, horizontalAlignment, colourMap, }: GetTextAsPathDataOptions) => PathEntry[];

package/dist/node/svg/index.d.ts

@@ -0,0 +1,11 @@
+import { PathEntry } from '../rendering';
+import { BoxDimensions, ColourInfo, TextSpacing } from '../types';
+export interface AssembleSvgOptions {
+    boxDimensions: BoxDimensions;
+    paths: PathEntry[];
+    spacing?: TextSpacing;
+    fontSize?: number;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+}
+export declare const assembleSvg: ({ boxDimensions, paths, spacing, fontSize, fillColour, strokeColour, }: AssembleSvgOptions) => string;

package/dist/node/types.d.ts

@@ -0,0 +1,72 @@
+import { LoadedFont } from './loading';
+export type MeasurementUnits = 'mm' | 'in';
+export type BoxDimensions = {
+    width: number;
+    height: number;
+    physicalWidth: number;
+    physicalHeight: number;
+    physicalUnits: MeasurementUnits;
+};
+export type VerticalTextAlignmentValues = 'centre' | 'top' | 'bottom';
+export type HorizontalTextAlignmentValues = 'left' | 'centre' | 'right' | 'distributed';
+export type PhysicalSize = [height: number, units: MeasurementUnits];
+export type BaselineType = 'flat' | 'curved';
+export type BaselineConfig = {
+    type: 'flat';
+} | {
+    type: 'curved';
+} | {
+    type: 'custom';
+    path: string;
+};
+export interface ColourInfo {
+    readonly hex: string;
+    readonly reference?: string;
+}
+export interface GlyphFill {
+    readonly pathData: string;
+    readonly colour: ColourInfo;
+}
+/** Maps original hex colour → replacement ColourInfo. */
+export type ColourMap = Readonly<Record<string, ColourInfo>>;
+export interface TextSpacing {
+    readonly outlineWidth: number;
+    readonly letterSpacing: number;
+    readonly letterSpacingOutline: number;
+}
+/** Options for synchronous renderText (font already loaded). */
+export interface RenderTextOptions {
+    text: string;
+    font: LoadedFont;
+    physicalSize: PhysicalSize;
+    /** When provided, bypasses the physicalSize → font size calculation. */
+    fontSize?: number;
+    boxDimensions: BoxDimensions;
+    spacing?: TextSpacing;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    baseline?: BaselineType | BaselineConfig;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+    colourMap?: ColourMap;
+}
+/** Options for async getRenderedText (loads font from URL). */
+export interface GetRenderedTextOptions {
+    text: string;
+    fontUrl: string;
+    physicalSize: PhysicalSize;
+    /**
+     * Fallback font size (in pixels) to use if the calculated size causes a
+     * TOO_WIDE error. Useful when the caller has an authoritative size (e.g.
+     * from the CE) that avoids floating-point rounding issues.
+     */
+    fontSizeFallback?: number;
+    boxDimensions: BoxDimensions;
+    spacing?: TextSpacing;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    baseline?: BaselineType | BaselineConfig;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+    colourMap?: ColourMap;
+}

package/dist/renderText.d.ts

@@ -0,0 +1,5 @@
+import { RenderTextOptions } from './types';
+/**
+ * Synchronous text renderer. Requires a pre-loaded font.
+ */
+export declare const renderText: (options: RenderTextOptions) => string;

package/dist/rendering/index.d.ts

@@ -0,0 +1,42 @@
+import { LoadedFont } from '../loading';
+import { ColourMap, GlyphFill, HorizontalTextAlignmentValues, TextSpacing } from '../types';
+export interface SvgGlyphEntry {
+    content: string;
+    viewBox: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    glyphIndex: number;
+}
+export interface PathEntry {
+    attributes: {
+        d: string;
+        'data-character': string;
+        transform: string;
+    };
+    path: unknown;
+    matrix: DOMMatrix;
+    glyphData: {
+        index: number;
+        bbox: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+    };
+    svgGlyph?: SvgGlyphEntry;
+    fills?: GlyphFill[];
+}
+export declare const fontUnitsToPixels: (value: number, fontSize: number, unitsPerEm: number) => number;
+export interface GetTextAsPathDataOptions {
+    font: LoadedFont;
+    baselinePath: string;
+    text: string;
+    fontSize: number;
+    spacing?: TextSpacing;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    colourMap?: ColourMap;
+}
+export declare const getTextAsPathData: ({ font, baselinePath, text, fontSize, spacing, horizontalAlignment, colourMap, }: GetTextAsPathDataOptions) => PathEntry[];

package/dist/svg/index.d.ts

@@ -0,0 +1,11 @@
+import { PathEntry } from '../rendering';
+import { BoxDimensions, ColourInfo, TextSpacing } from '../types';
+export interface AssembleSvgOptions {
+    boxDimensions: BoxDimensions;
+    paths: PathEntry[];
+    spacing?: TextSpacing;
+    fontSize?: number;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+}
+export declare const assembleSvg: ({ boxDimensions, paths, spacing, fontSize, fillColour, strokeColour, }: AssembleSvgOptions) => string;

package/dist/types.d.ts

@@ -0,0 +1,72 @@
+import { LoadedFont } from './loading';
+export type MeasurementUnits = 'mm' | 'in';
+export type BoxDimensions = {
+    width: number;
+    height: number;
+    physicalWidth: number;
+    physicalHeight: number;
+    physicalUnits: MeasurementUnits;
+};
+export type VerticalTextAlignmentValues = 'centre' | 'top' | 'bottom';
+export type HorizontalTextAlignmentValues = 'left' | 'centre' | 'right' | 'distributed';
+export type PhysicalSize = [height: number, units: MeasurementUnits];
+export type BaselineType = 'flat' | 'curved';
+export type BaselineConfig = {
+    type: 'flat';
+} | {
+    type: 'curved';
+} | {
+    type: 'custom';
+    path: string;
+};
+export interface ColourInfo {
+    readonly hex: string;
+    readonly reference?: string;
+}
+export interface GlyphFill {
+    readonly pathData: string;
+    readonly colour: ColourInfo;
+}
+/** Maps original hex colour → replacement ColourInfo. */
+export type ColourMap = Readonly<Record<string, ColourInfo>>;
+export interface TextSpacing {
+    readonly outlineWidth: number;
+    readonly letterSpacing: number;
+    readonly letterSpacingOutline: number;
+}
+/** Options for synchronous renderText (font already loaded). */
+export interface RenderTextOptions {
+    text: string;
+    font: LoadedFont;
+    physicalSize: PhysicalSize;
+    /** When provided, bypasses the physicalSize → font size calculation. */
+    fontSize?: number;
+    boxDimensions: BoxDimensions;
+    spacing?: TextSpacing;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    baseline?: BaselineType | BaselineConfig;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+    colourMap?: ColourMap;
+}
+/** Options for async getRenderedText (loads font from URL). */
+export interface GetRenderedTextOptions {
+    text: string;
+    fontUrl: string;
+    physicalSize: PhysicalSize;
+    /**
+     * Fallback font size (in pixels) to use if the calculated size causes a
+     * TOO_WIDE error. Useful when the caller has an authoritative size (e.g.
+     * from the CE) that avoids floating-point rounding issues.
+     */
+    fontSizeFallback?: number;
+    boxDimensions: BoxDimensions;
+    spacing?: TextSpacing;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    baseline?: BaselineType | BaselineConfig;
+    horizontalAlignment?: HorizontalTextAlignmentValues;
+    fillColour?: ColourInfo;
+    strokeColour?: ColourInfo;
+    colourMap?: ColourMap;
+}

package/dist/worker/baselines/index.d.ts

@@ -0,0 +1,40 @@
+import { BaselineConfig, BaselineType, BoxDimensions, VerticalTextAlignmentValues } from '../types';
+/**
+ * Normalise a baseline option (string shorthand or object) into a BaselineConfig.
+ */
+export declare const normaliseBaselineOption: (baseline: BaselineType | BaselineConfig | undefined) => BaselineConfig;
+/**
+ * Validate a custom baseline SVG path string.
+ */
+export declare const validateCustomBaselinePath: (path: string) => void;
+export interface GenerateFlatBaselineOptions {
+    boxDimensions: BoxDimensions;
+    totalTextHeight: number;
+    baseline: number;
+    lineHeight: number;
+    verticalAlignment?: VerticalTextAlignmentValues;
+    lineNumber?: number;
+}
+/**
+ * Generate a path as a baseline for straight text
+ * This can be called multiple times for multiline text by incrementing the lineNumber parameter
+ *
+ * @returns an SVG path command to draw the baseline
+ */
+export declare const generateFlatBaseline: ({ boxDimensions, totalTextHeight, baseline, lineHeight, verticalAlignment, lineNumber, }: GenerateFlatBaselineOptions) => string;
+export interface GenerateCurvedBaselineOptions {
+    boxDimensions: BoxDimensions;
+    baseline: number;
+    textHeight: number;
+    verticalAlignment: VerticalTextAlignmentValues;
+}
+/**
+ * Generate a path command to curve text and align that text to the top of the box.
+ * Uses two quadratic bezier curves — one from the bottom left to the peak, and a
+ * second mirrored from the peak to the end.
+ *
+ * Curved text is not currently supported for multiline text.
+ *
+ * @returns an SVG path command to draw the curve
+ */
+export declare const generateCurvedBaseline: ({ boxDimensions, baseline, textHeight, verticalAlignment, }: GenerateCurvedBaselineOptions) => string;

package/dist/worker/ce-adapter/ce-types.d.ts

@@ -0,0 +1,171 @@
+/**
+ * Type declarations for @unmade/configuration-engine
+ *
+ * CE doesn't ship .d.ts files. These types cover the subset of the
+ * factory API and editor shape that the CE adapter needs.
+ */
+export interface EditorPaletteColour {
+    id: number;
+    hex: string;
+    name: string;
+    display_name?: string;
+    reference?: string | null;
+    extra?: object | null;
+    categories?: string[];
+    lab?: [number, number, number];
+}
+export interface EditorPalette {
+    id: number;
+    name: string;
+    slug: string;
+    colours: EditorPaletteColour[];
+    extended_palette_id?: number;
+    extendedPalette?: EditorPalette;
+    categories?: string[];
+}
+export interface EditorGarment {
+    slug: string;
+    size: string;
+    name?: string;
+    panels_svg?: string;
+    embellishment_positions?: EmbellishmentPosition[];
+}
+export interface EmbellishmentPosition {
+    placement: string;
+    width: number;
+    height: number;
+    physical_width?: number;
+    physical_height?: number;
+    physical_width_decimal: number;
+    physical_height_decimal: number;
+    physical_size_units: string;
+    baseline_path?: string;
+    rotation: number;
+    variant?: string;
+}
+export interface TextLibraryItemFont {
+    id: number;
+    font_url: string;
+    font_family: string;
+    letter_spacing?: number;
+    letter_spacing_outline?: number;
+    outline_width?: number;
+    fixed_colours?: Record<string, {
+        reference: string;
+        hex: string;
+        id: string;
+        text: string;
+    }>;
+}
+export interface TextLibraryItem {
+    id: string;
+    type: 'text';
+    fonts: TextLibraryItemFont[];
+    palette?: number;
+}
+export interface PlacementLibraryItem {
+    id: string;
+    type: string;
+    palette?: number;
+}
+export interface BasePlacementSettings {
+    manufacturing_methods?: {
+        name: string;
+    }[];
+    vertical_alignment?: string;
+    horizontal_alignment?: string;
+}
+export interface PlacementsSettings {
+    byId: Record<string, BasePlacementSettings>;
+    library: Record<string, PlacementLibraryItem | TextLibraryItem>;
+}
+export interface CombinedEditorSettings {
+    editor: string;
+    mixins: string[];
+    garments: EditorGarment[];
+    palettes: number[];
+    allPalettes: Record<number, EditorPalette>;
+    endpoints: {
+        palettes: string;
+        [key: string]: string | undefined;
+    };
+    placements?: PlacementsSettings;
+    embellishments?: PlacementsSettings;
+    [key: string]: unknown;
+}
+export interface BasePlacementState {
+    type: string;
+    libraryItemID: string;
+    meta?: Record<string, unknown>;
+}
+export interface EditorStateVals {
+    placements?: Record<string, BasePlacementState>;
+    embellishments?: Record<string, BasePlacementState>;
+    [key: string]: unknown;
+}
+export interface EditorState {
+    garment?: string;
+    vals?: EditorStateVals;
+    [key: string]: unknown;
+}
+export interface Palettes {
+    byId: Record<string, unknown>;
+    getColours(paletteId: number): EditorPaletteColour[];
+    getUsedColours(paletteId: number, ids: (number | null)[]): (EditorPaletteColour | null)[];
+    getExtendedColours(paletteId: number): EditorPaletteColour[];
+}
+export interface PlacementPositionResult {
+    placement: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    dimensionsForCanvas: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    variant: string;
+    panel: string;
+    rotation: boolean;
+    physical_width: number;
+    physical_height: number;
+    physical_width_decimal: string;
+    physical_height_decimal: string;
+    physical_size_units: string;
+}
+export interface EditorVariant {
+    name: string;
+    placements: string[];
+}
+/**
+ * Editor instance returned by CE's factory.
+ *
+ * The exact shape depends on which mixins are applied at runtime.
+ * We type the parts the CE adapter needs and treat the rest as opaque.
+ * Uses Element rather than SVGElement for cross-environment compatibility.
+ */
+export interface ConfigEditor {
+    getState(): EditorState & {
+        vals: NonNullable<EditorState['vals']>;
+    };
+    palettes: Palettes;
+    settings: CombinedEditorSettings;
+    placements?: {
+        initialise(): Promise<void>;
+        getAssetsAsSVGElements(state: EditorState, manufacturingMethod: string): Promise<Record<string, {
+            asset: Element;
+            position: PlacementPositionResult;
+        }>>;
+    };
+    embellishments?: {
+        initialise(): Promise<void>;
+        getAssetsAsSVGElements(state: EditorState, manufacturingMethod: string): Promise<Record<string, {
+            asset: Element;
+            position: PlacementPositionResult;
+        }>>;
+    };
+    getVariants?(): EditorVariant[];
+    getCurrentVariant?(): string;
+}

package/dist/worker/ce-adapter/extractTextPlacements.d.ts

@@ -0,0 +1,11 @@
+import { ConfigEditor } from './ce-types';
+import { LoadedTextPlacement } from './types';
+/**
+ * Extract text placements from a loaded config editor instance.
+ *
+ * Reads the editor state, resolves fonts and colours from settings and
+ * palettes, and returns a structured array of text placements ready for
+ * rendering or comparison. Processes both the placements and embellishments
+ * buckets.
+ */
+export declare function extractTextPlacements(editor: ConfigEditor): LoadedTextPlacement[];

package/dist/worker/ce-adapter/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CE Adapter for @unmade/text-renderer
+ *
+ * Utilities for extracting text placement state from a loaded
+ * @unmade/configuration-engine editor instance and mapping it to
+ * renderer options. Intended for use in server-side comparison pipelines
+ * and any environment that bridges CE state to the text-renderer.
+ */
+export { extractTextPlacements } from './extractTextPlacements';
+export { mapStateToRendererOptions } from './mapStateToRendererOptions';
+export type { BasePlacementSettings, BasePlacementState, CombinedEditorSettings, ConfigEditor, EditorGarment, EditorPalette, EditorPaletteColour, EditorState, EditorStateVals, EditorVariant, EmbellishmentPosition, Palettes, PlacementLibraryItem, PlacementPositionResult, PlacementsSettings, TextLibraryItem, TextLibraryItemFont, } from './ce-types';
+export type { LoadedTextPlacement, TextPlacementFont, TextPlacementPosition, TextPlacementSpacing, } from './types';

package/dist/worker/ce-adapter/mapStateToRendererOptions.d.ts

@@ -0,0 +1,13 @@
+import { GetRenderedTextOptions } from '../types';
+import { LoadedTextPlacement } from './types';
+/**
+ * Map a LoadedTextPlacement to GetRenderedTextOptions for the text-renderer.
+ *
+ * Handles the key differences between config-engine and text-renderer:
+ * - American to British English ('center' -> 'centre')
+ * - isDistributed flag -> horizontalAlignment: 'distributed'
+ * - isCurved flag -> baseline: 'curved'
+ * - baselinePath -> baseline: { type: 'custom', path }
+ * - snake_case spacing -> camelCase spacing
+ */
+export declare function mapStateToRendererOptions(placement: LoadedTextPlacement): GetRenderedTextOptions;

package/dist/worker/ce-adapter/types.d.ts

@@ -0,0 +1,56 @@
+import { EditorPaletteColour } from './ce-types';
+export interface TextPlacementPosition {
+    width: number;
+    height: number;
+    physicalWidth: number;
+    physicalHeight: number;
+    physicalUnits: string;
+    baselinePath?: string;
+    rotation: number;
+}
+export interface TextPlacementFont {
+    id: number;
+    fontUrl: string;
+    fontFamily: string;
+    letterSpacing: number;
+    letterSpacingOutline: number;
+    outlineWidth: number;
+    fixedColours?: Record<string, {
+        reference: string;
+        hex: string;
+        id: string;
+        text: string;
+    }>;
+}
+export interface TextPlacementSpacing {
+    letter_spacing: number;
+    letter_spacing_outline: number;
+    line_height?: number;
+}
+export interface LoadedTextPlacement {
+    placementId: string;
+    displayName: string;
+    source: 'placements' | 'embellishments';
+    text: string;
+    font: TextPlacementFont;
+    isCurved: boolean;
+    isDistributed: boolean;
+    verticalAlignment: string;
+    horizontalAlignment: string;
+    rotation: number;
+    spacing: TextPlacementSpacing | null;
+    fillColour: EditorPaletteColour | null;
+    outlineColour: EditorPaletteColour | null;
+    position: TextPlacementPosition;
+    userSetPhysicalSize: [number, string] | null;
+    fontMetrics: {
+        size: number;
+        height: number;
+        baseline: number;
+        width: number;
+        physicalHeight?: number;
+        physicalUnits?: string;
+        physicalFontSize?: [number, 'mm' | 'in'];
+    };
+    manufacturingMethod: string;
+}

package/dist/worker/constants.d.ts

@@ -0,0 +1,5 @@
+import { TextSpacing } from './types';
+export declare const DEFAULT_OUTLINE_FACTOR = 0.03125;
+export declare const LINE_HEIGHT = 1.1;
+export declare const CURVE_DEPTH = 0.2;
+export declare const DEFAULT_SPACING: TextSpacing;