@unmade/text-renderer 0.1.11 → 0.2.0

package/README.md

@@ -0,0 +1,115 @@
+# @unmade/text-renderer
+
+Pure function SVG text renderer. No side effects, all dependencies injected explicitly. Web worker compatible.
+
+## Public API
+
+```typescript
+import { getRenderedText } from '@unmade/text-renderer';
+
+const svg = await getRenderedText({
+  text: 'HELLO',
+  fontUrl: 'https://example.com/font.ttf',
+  physicalSize: [40, 'mm'],
+  boxDimensions: {
+    width: 500,
+    height: 200,
+    physicalWidth: 100,
+    physicalHeight: 40,
+    physicalUnits: 'mm',
+  },
+  spacing: { outlineWidth: 0, letterSpacing: 0, letterSpacingOutline: 0 },
+  baseline: 'flat', // or 'curved', or { type: 'custom', path: '...' }
+  horizontalAlignment: 'centre', // 'left' | 'centre' | 'right' | 'distributed'
+  verticalAlignment: 'centre',   // 'top' | 'centre' | 'bottom'
+  fillColour: { hex: '#000000' },
+});
+```
+
+### Import paths
+
+```typescript
+import { getRenderedText } from '@unmade/text-renderer';        // Browser
+import { getRenderedText } from '@unmade/text-renderer/node';   // Node.js
+import { getRenderedText } from '@unmade/text-renderer/worker'; // Web Worker
+```
+
+## Configuration Engine adapter
+
+The `ce-adapter` sub-package bridges CE (Configuration Engine) editor state to renderer options:
+
+```typescript
+import { extractTextPlacements, mapStateToRendererOptions } from '@unmade/text-renderer/ce-adapter';
+
+const placements = extractTextPlacements(editor);            // LoadedTextPlacement[]
+const options    = mapStateToRendererOptions(placements[0]); // GetRenderedTextOptions
+const svg        = await getRenderedText(options);
+```
+
+`extractTextPlacements` reads an editor instance and returns one `LoadedTextPlacement` per text placement, resolving fonts, colours, and position data from the CE state.
+
+`mapStateToRendererOptions` converts a `LoadedTextPlacement` into the `GetRenderedTextOptions` shape that `getRenderedText` accepts — including alignment normalisation (CE uses American English, TR uses British English).
+
+## Comparison system
+
+The `packages/tr-comparison` package provides a pipeline for validating TR output against the CE's own rendering for real production designs.
+
+### How it works
+
+1. A design URL is POSTed to the comparison Lambda
+2. The Lambda loads the design via the CE factory, extracts all text placements, and renders each one with both CE and TR
+3. Both outputs are rasterised to PNG and diffed pixel-by-pixel with pixelmatch
+4. Results (match score, images, state) are stored in S3 and indexed in DynamoDB
+5. A browser comparison is also run via Puppeteer against the deployed demo app
+6. The comparison dashboard at `packages/tr-comparison/src` displays all results
+
+### Stored S3 artefacts
+
+For each placement comparison:
+
+```
+comparisons/{designUrlHash}/{timestamp}/{placementId}/
+  ce.png                # Config Engine render
+  tr.png                # Text Renderer render
+  diff.png              # Pixel difference heatmap
+  state.json            # LoadedTextPlacement (CE state passed to the adapter)
+  renderer-options.json # GetRenderedTextOptions (mapped TR input)
+```
+
+## Regression tests
+
+Regression tests live in `__tests__/regression.test.ts` and use fixture pairs in `__tests__/fixtures/regression/`:
+
+| File | Contents |
+|------|----------|
+| `{name}.json` | Fixture metadata + `LoadedTextPlacement` |
+| `{name}.png`  | Reference PNG (expected TR render) |
+
+The test pipeline for each fixture:
+
+```
+LoadedTextPlacement
+  → mapStateToRendererOptions()
+  → getRenderedText()
+  → SVG → PNG (resvg-js)
+  → pixelmatch diff against {name}.png
+  → fail if diff > 1%
+```
+
+### Adding a fixture
+
+1. Run a comparison in the dashboard against a design URL
+2. Select the record and click **Save as fixture** in the detail panel
+3. Enter a descriptive name (e.g. `curved-jersey-40mm`) — two files download
+4. Place both files in `__tests__/fixtures/regression/`
+5. Run `npm test` to confirm the fixture passes, then commit
+
+### Updating fixtures after an intentional change
+
+```bash
+UPDATE_FIXTURES=true npm test
+```
+
+This re-renders all fixtures and overwrites the stored PNGs. Review the diffs, then commit.
+
+> Regression tests require network access to fetch fonts from their CDN URLs.

package/dist/ce-adapter/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function C(t){return t.type==="text"}function P(t){const i=t.getState().garment;return t.settings.garments.find(s=>s.slug===i)}function M(t,o){if(t.embellishment_positions)return t.embellishment_positions.find(i=>i.placement===o)}function w(t,o){const i=t.fonts.find(s=>s.id===o);if(i)return{id:i.id,fontUrl:i.font_url,fontFamily:i.font_family,letterSpacing:i.letter_spacing??0,letterSpacingOutline:i.letter_spacing_outline??0,outlineWidth:i.outline_width??0,fixedColours:i.fixed_colours}}function v(t,o,i,s,a){const{library:h}=a,u=[];for(const[l,g]of Object.entries(s)){if(g.type!=="text")continue;const d=g,{meta:e}=d;if(!e?.text)continue;const{libraryItemID:y}=d,c=h[y];if(!c||!C(c))continue;const f=e.font;if(f===void 0)continue;const S=w(c,f);if(!S)continue;const r=M(o,l);if(!r)continue;let x=null,b=null;if(e.colours&&c.palette!=null)try{const n=t.palettes.getUsedColours(c.palette,e.colours);x=n[0]??null,b=n[1]??null}catch(n){console.warn(`[extractTextPlacements] Colour resolution failed for ${l}:`,n)}const m=a.byId?.[l],p={vertical:"top",horizontal:"left"};if(m){const n=m;n.vertical_alignment&&(p.vertical=n.vertical_alignment),n.horizontal_alignment&&(p.horizontal=n.horizontal_alignment)}u.push({placementId:l,displayName:l,source:i,text:e.text,font:S,isCurved:e.isCurved??!1,isDistributed:e.isDistributed??!1,verticalAlignment:e.verticalAlignment??p.vertical,horizontalAlignment:e.horizontalAlignment??p.horizontal,rotation:e.rotation??0,spacing:e.spacing??null,fillColour:x,outlineColour:b,position:{width:r.width,height:r.height,physicalWidth:r.physical_width_decimal,physicalHeight:r.physical_height_decimal,physicalUnits:r.physical_size_units,baselinePath:r.baseline_path,rotation:r.rotation},userSetPhysicalSize:e.retainedPhysicalSize??null,fontMetrics:(()=>{const n=e.fontMetrics??{size:0,height:0,baseline:0,width:0},_=n.physicalFontSize||(n.physicalHeight!=null&&n.physicalHeight>0&&n.physicalUnits!=null?[n.physicalHeight,n.physicalUnits]:void 0);return{...n,physicalFontSize:_}})(),manufacturingMethod:e.manufacturing_method??""})}return u}function U(t){const o=t.getState(),i=P(t);if(!i)return console.warn("[extractTextPlacements] No matching garment found"),[];const s=[],a=o.vals?.placements,h=t.settings.placements;a&&h&&s.push(...v(t,i,"placements",a,h));const u=o.vals?.embellishments,l=t.settings.embellishments;return u&&l&&s.push(...v(t,i,"embellishments",u,l)),s.length===0&&console.warn("[extractTextPlacements] No text entries found in either placements or embellishments"),s}function z(t){return t==="center"?"centre":t}function A(t){let o=z(t.horizontalAlignment);t.isDistributed&&(o="distributed");let i;t.position.baselinePath?i={type:"custom",path:t.position.baselinePath}:t.isCurved?i="curved":i="flat";const s=t.userSetPhysicalSize?[t.userSetPhysicalSize[0],t.userSetPhysicalSize[1]]:t.fontMetrics.physicalFontSize!=null?t.fontMetrics.physicalFontSize:[t.position.physicalHeight,t.position.physicalUnits],h=!t.userSetPhysicalSize&&t.fontMetrics.physicalFontSize!=null&&!t.isCurved&&t.fontMetrics.physicalHeight!=null&&t.fontMetrics.physicalUnits===t.position.physicalUnits&&t.fontMetrics.height>0?t.position.height/t.fontMetrics.height*t.fontMetrics.physicalHeight:t.position.physicalHeight,l={outlineWidth:t.outlineColour!=null?t.font.outlineWidth:0,letterSpacing:t.spacing?.letter_spacing??0,letterSpacingOutline:t.spacing?.letter_spacing_outline??0},g=t.fillColour?{hex:t.fillColour.hex,reference:t.fillColour.reference??void 0}:void 0,d=t.outlineColour?{hex:t.outlineColour.hex,reference:t.outlineColour.reference??void 0}:void 0;let e;if(t.font.fixedColours){const y={};for(const[c,f]of Object.entries(t.font.fixedColours))y[c]={hex:f.hex,reference:f.reference};e=y}return{text:t.text,fontUrl:t.font.fontUrl,physicalSize:s,fontSizeFallback:t.fontMetrics.size,boxDimensions:{width:t.position.width,height:t.position.height,physicalWidth:t.position.physicalWidth,physicalHeight:h,physicalUnits:t.position.physicalUnits},spacing:l,verticalAlignment:z(t.verticalAlignment),horizontalAlignment:o,baseline:i,fillColour:g,strokeColour:d,colourMap:e}}exports.extractTextPlacements=U;exports.mapStateToRendererOptions=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function C(t){return t.type==="text"}function P(t){const i=t.getState().garment;return t.settings.garments.find(s=>s.slug===i)}function w(t,o){if(t.embellishment_positions)return t.embellishment_positions.find(i=>i.placement===o)}function A(t,o){const i=t.fonts.find(s=>s.id===o);if(i)return{id:i.id,fontUrl:i.font_url,fontFamily:i.font_family,letterSpacing:i.letter_spacing??0,letterSpacingOutline:i.letter_spacing_outline??0,outlineWidth:i.outline_width??0,fixedColours:i.fixed_colours}}function v(t,o,i,s,c){const{library:u}=c,a=[];for(const[l,h]of Object.entries(s)){if(h.type!=="text")continue;const f=h,{meta:n}=f;if(!n?.text)continue;const{libraryItemID:d}=f,g=u[d];if(!g||!C(g))continue;const y=n.font;if(y===void 0)continue;const m=A(g,y);if(!m)continue;const r=w(o,l);if(!r)continue;let x=null,b=null;if(n.colours&&g.palette!=null)try{const e=t.palettes.getUsedColours(g.palette,n.colours);x=e[0]??null,b=e[1]??null}catch(e){console.warn(`[extractTextPlacements] Colour resolution failed for ${l}:`,e)}const S=c.byId?.[l],p={vertical:"top",horizontal:"left"};if(S){const e=S;e.vertical_alignment&&(p.vertical=e.vertical_alignment),e.horizontal_alignment&&(p.horizontal=e.horizontal_alignment)}a.push({placementId:l,displayName:l,source:i,text:n.text,font:m,isCurved:n.isCurved??!1,isDistributed:n.isDistributed??!1,verticalAlignment:n.verticalAlignment??p.vertical,horizontalAlignment:n.horizontalAlignment??p.horizontal,rotation:n.rotation??0,spacing:n.spacing??null,fillColour:x,outlineColour:b,position:{width:r.width,height:r.height,physicalWidth:r.physical_width_decimal,physicalHeight:r.physical_height_decimal,physicalUnits:r.physical_size_units,baselinePath:r.baseline_path,rotation:r.rotation},userSetPhysicalSize:n.retainedPhysicalSize??null,fontMetrics:(()=>{const e=n.fontMetrics??{size:0,height:0,baseline:0,width:0},z=e.physicalFontSize||(e.physicalHeight!=null&&e.physicalHeight>0&&e.physicalUnits!=null?[e.physicalHeight,e.physicalUnits]:void 0);return{...e,physicalFontSize:z}})(),manufacturingMethod:n.manufacturing_method??""})}return a}function U(t){const o=t.getState(),i=P(t);if(!i)return console.warn("[extractTextPlacements] No matching garment found"),[];const s=[],c=o.vals?.placements,u=t.settings.placements;c&&u&&s.push(...v(t,i,"placements",c,u));const a=o.vals?.embellishments,l=t.settings.embellishments;return a&&l&&s.push(...v(t,i,"embellishments",a,l)),s.length===0&&console.warn("[extractTextPlacements] No text entries found in either placements or embellishments"),s}function _(t){return t==="center"?"centre":t}function O(t){let o=_(t.horizontalAlignment);t.isDistributed&&(o="distributed");let i;t.position.baselinePath?i={type:"custom",path:t.position.baselinePath}:t.isCurved?i="curved":i="flat";const s=t.userSetPhysicalSize?[t.userSetPhysicalSize[0],t.userSetPhysicalSize[1]]:t.fontMetrics.physicalFontSize!=null?t.fontMetrics.physicalFontSize:[t.position.physicalHeight,t.position.physicalUnits],u={outlineWidth:t.outlineColour!=null?t.font.outlineWidth:0,letterSpacing:t.spacing?.letter_spacing??0,letterSpacingOutline:t.spacing?.letter_spacing_outline??0},a=t.fillColour?{hex:t.fillColour.hex,reference:t.fillColour.reference??void 0}:void 0,l=t.outlineColour?{hex:t.outlineColour.hex,reference:t.outlineColour.reference??void 0}:void 0;let h;if(t.font.fixedColours){const f={};for(const[n,d]of Object.entries(t.font.fixedColours))f[n]={hex:d.hex,reference:d.reference};h=f}return{text:t.text,fontUrl:t.font.fontUrl,physicalSize:s,fontSizeFallback:t.fontMetrics.size,boxDimensions:{width:t.position.width,height:t.position.height,physicalWidth:t.position.physicalWidth,physicalHeight:t.position.physicalHeight,physicalUnits:t.position.physicalUnits},spacing:u,verticalAlignment:_(t.verticalAlignment),horizontalAlignment:o,baseline:i,fillColour:a,strokeColour:l,colourMap:h}}exports.extractTextPlacements=U;exports.mapStateToRendererOptions=O;

package/dist/ce-adapter/index.js

@@ -3,16 +3,16 @@ function C(t) {
 }
 function P(t) {
   const i = t.getState().garment;
-  return t.settings.garments.find((o) => o.slug === i);
+  return t.settings.garments.find((s) => s.slug === i);
 }
-function M(t, s) {
+function w(t, o) {
   if (t.embellishment_positions)
     return t.embellishment_positions.find(
-      (i) => i.placement === s
+      (i) => i.placement === o
     );
 }
-function w(t, s) {
-  const i = t.fonts.find((o) => o.id === s);
+function A(t, o) {
+  const i = t.fonts.find((s) => s.id === o);
   if (i)
     return {
       id: i.id,
@@ -24,51 +24,51 @@ function w(t, s) {
       fixedColours: i.fixed_colours
     };
 }
-function z(t, s, i, o, h) {
-  const { library: a } = h, u = [];
-  for (const [l, g] of Object.entries(o)) {
-    if (g.type !== "text") continue;
-    const d = g, { meta: e } = d;
-    if (!e?.text) continue;
-    const { libraryItemID: y } = d, c = a[y];
-    if (!c || !C(c)) continue;
-    const f = e.font;
-    if (f === void 0) continue;
-    const S = w(c, f);
-    if (!S) continue;
-    const r = M(s, l);
+function v(t, o, i, s, c) {
+  const { library: u } = c, a = [];
+  for (const [l, h] of Object.entries(s)) {
+    if (h.type !== "text") continue;
+    const f = h, { meta: n } = f;
+    if (!n?.text) continue;
+    const { libraryItemID: d } = f, g = u[d];
+    if (!g || !C(g)) continue;
+    const y = n.font;
+    if (y === void 0) continue;
+    const m = A(g, y);
+    if (!m) continue;
+    const r = w(o, l);
     if (!r) continue;
     let x = null, b = null;
-    if (e.colours && c.palette != null)
+    if (n.colours && g.palette != null)
       try {
-        const n = t.palettes.getUsedColours(
-          c.palette,
-          e.colours
+        const e = t.palettes.getUsedColours(
+          g.palette,
+          n.colours
         );
-        x = n[0] ?? null, b = n[1] ?? null;
-      } catch (n) {
-        console.warn(`[extractTextPlacements] Colour resolution failed for ${l}:`, n);
+        x = e[0] ?? null, b = e[1] ?? null;
+      } catch (e) {
+        console.warn(`[extractTextPlacements] Colour resolution failed for ${l}:`, e);
       }
-    const m = h.byId?.[l], p = {
+    const S = c.byId?.[l], p = {
       vertical: "top",
       horizontal: "left"
     };
-    if (m) {
-      const n = m;
-      n.vertical_alignment && (p.vertical = n.vertical_alignment), n.horizontal_alignment && (p.horizontal = n.horizontal_alignment);
+    if (S) {
+      const e = S;
+      e.vertical_alignment && (p.vertical = e.vertical_alignment), e.horizontal_alignment && (p.horizontal = e.horizontal_alignment);
     }
-    u.push({
+    a.push({
       placementId: l,
       displayName: l,
       source: i,
-      text: e.text,
-      font: S,
-      isCurved: e.isCurved ?? !1,
-      isDistributed: e.isDistributed ?? !1,
-      verticalAlignment: e.verticalAlignment ?? p.vertical,
-      horizontalAlignment: e.horizontalAlignment ?? p.horizontal,
-      rotation: e.rotation ?? 0,
-      spacing: e.spacing ?? null,
+      text: n.text,
+      font: m,
+      isCurved: n.isCurved ?? !1,
+      isDistributed: n.isDistributed ?? !1,
+      verticalAlignment: n.verticalAlignment ?? p.vertical,
+      horizontalAlignment: n.horizontalAlignment ?? p.horizontal,
+      rotation: n.rotation ?? 0,
+      spacing: n.spacing ?? null,
       fillColour: x,
       outlineColour: b,
       position: {
@@ -80,78 +80,78 @@ function z(t, s, i, o, h) {
         baselinePath: r.baseline_path,
         rotation: r.rotation
       },
-      userSetPhysicalSize: e.retainedPhysicalSize ?? null,
+      userSetPhysicalSize: n.retainedPhysicalSize ?? null,
       fontMetrics: (() => {
-        const n = e.fontMetrics ?? { size: 0, height: 0, baseline: 0, width: 0 }, _ = n.physicalFontSize || (n.physicalHeight != null && n.physicalHeight > 0 && n.physicalUnits != null ? [n.physicalHeight, n.physicalUnits] : void 0);
-        return { ...n, physicalFontSize: _ };
+        const e = n.fontMetrics ?? { size: 0, height: 0, baseline: 0, width: 0 }, z = e.physicalFontSize || (e.physicalHeight != null && e.physicalHeight > 0 && e.physicalUnits != null ? [e.physicalHeight, e.physicalUnits] : void 0);
+        return { ...e, physicalFontSize: z };
       })(),
-      manufacturingMethod: e.manufacturing_method ?? ""
+      manufacturingMethod: n.manufacturing_method ?? ""
     });
   }
-  return u;
+  return a;
 }
 function U(t) {
-  const s = t.getState(), i = P(t);
+  const o = t.getState(), i = P(t);
   if (!i)
     return console.warn("[extractTextPlacements] No matching garment found"), [];
-  const o = [], h = s.vals?.placements, a = t.settings.placements;
-  h && a && o.push(...z(t, i, "placements", h, a));
-  const u = s.vals?.embellishments, l = t.settings.embellishments;
-  return u && l && o.push(...z(t, i, "embellishments", u, l)), o.length === 0 && console.warn("[extractTextPlacements] No text entries found in either placements or embellishments"), o;
+  const s = [], c = o.vals?.placements, u = t.settings.placements;
+  c && u && s.push(...v(t, i, "placements", c, u));
+  const a = o.vals?.embellishments, l = t.settings.embellishments;
+  return a && l && s.push(...v(t, i, "embellishments", a, l)), s.length === 0 && console.warn("[extractTextPlacements] No text entries found in either placements or embellishments"), s;
 }
-function v(t) {
+function _(t) {
   return t === "center" ? "centre" : t;
 }
-function A(t) {
-  let s = v(t.horizontalAlignment);
-  t.isDistributed && (s = "distributed");
+function F(t) {
+  let o = _(t.horizontalAlignment);
+  t.isDistributed && (o = "distributed");
   let i;
   t.position.baselinePath ? i = { type: "custom", path: t.position.baselinePath } : t.isCurved ? i = "curved" : i = "flat";
-  const o = t.userSetPhysicalSize ? [
+  const s = t.userSetPhysicalSize ? [
     t.userSetPhysicalSize[0],
     t.userSetPhysicalSize[1]
-  ] : t.fontMetrics.physicalFontSize != null ? t.fontMetrics.physicalFontSize : [t.position.physicalHeight, t.position.physicalUnits], a = !t.userSetPhysicalSize && t.fontMetrics.physicalFontSize != null && !t.isCurved && t.fontMetrics.physicalHeight != null && t.fontMetrics.physicalUnits === t.position.physicalUnits && t.fontMetrics.height > 0 ? t.position.height / t.fontMetrics.height * t.fontMetrics.physicalHeight : t.position.physicalHeight, l = {
+  ] : t.fontMetrics.physicalFontSize != null ? t.fontMetrics.physicalFontSize : [t.position.physicalHeight, t.position.physicalUnits], u = {
     outlineWidth: t.outlineColour != null ? t.font.outlineWidth : 0,
     letterSpacing: t.spacing?.letter_spacing ?? 0,
     letterSpacingOutline: t.spacing?.letter_spacing_outline ?? 0
-  }, g = t.fillColour ? {
+  }, a = t.fillColour ? {
     hex: t.fillColour.hex,
     reference: t.fillColour.reference ?? void 0
-  } : void 0, d = t.outlineColour ? {
+  } : void 0, l = t.outlineColour ? {
     hex: t.outlineColour.hex,
     reference: t.outlineColour.reference ?? void 0
   } : void 0;
-  let e;
+  let h;
   if (t.font.fixedColours) {
-    const y = {};
-    for (const [c, f] of Object.entries(t.font.fixedColours))
-      y[c] = { hex: f.hex, reference: f.reference };
-    e = y;
+    const f = {};
+    for (const [n, d] of Object.entries(t.font.fixedColours))
+      f[n] = { hex: d.hex, reference: d.reference };
+    h = f;
   }
   return {
     text: t.text,
     fontUrl: t.font.fontUrl,
-    physicalSize: o,
+    physicalSize: s,
     fontSizeFallback: t.fontMetrics.size,
     boxDimensions: {
       width: t.position.width,
       height: t.position.height,
       physicalWidth: t.position.physicalWidth,
-      physicalHeight: a,
+      physicalHeight: t.position.physicalHeight,
       physicalUnits: t.position.physicalUnits
     },
-    spacing: l,
-    verticalAlignment: v(
+    spacing: u,
+    verticalAlignment: _(
       t.verticalAlignment
     ),
-    horizontalAlignment: s,
+    horizontalAlignment: o,
     baseline: i,
-    fillColour: g,
-    strokeColour: d,
-    colourMap: e
+    fillColour: a,
+    strokeColour: l,
+    colourMap: h
   };
 }
 export {
   U as extractTextPlacements,
-  A as mapStateToRendererOptions
+  F as mapStateToRendererOptions
 };