@realnation/builder-shared-sdk 2.4.0 → 2.4.1

package/dist/souvenir/index.d.ts

@@ -13,14 +13,7 @@ export * from './imageFit.js';
 export { wrapText, tokenize, layoutLines, type MeasureText, type TextAlign, type TextVAlign, type PlacedLine, } from './text.js';
 export { renderSouvenir, drawOrder, pageHasOpaqueBackground, souvenirSignature, loadSouvenirImage, } from './render.js';
 import { type SouvenirOptions, type SouvenirPage, type SouvenirResult, type SouvenirValues } from './types.js';
-/**
- * Element ids for output-bound elements are `outputs@@nodeId@@key[@@tab@@rand]`.
- * Modules know field keys; the page knows element ids. This bridges the two.
- */
-export declare function parseSouvenirOutputId(eid: string): {
-    nodeId: string;
-    key: string;
-} | null;
+export { parseSouvenirOutputId } from './outputId.js';
 /**
  * Spreads `{ fieldKey: value }` over every element on the page bound to that
  * field, so a module never has to know how element ids are built.

package/dist/souvenir/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/souvenir/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,UAAU,GAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,cAAc,EACd,SAAS,EACT,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,YAAY,CAAC;AAKpB;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAKzF;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EACtD,MAAM,CAAC,EAAE,MAAM,GACd,cAAc,CAUhB;AAYD;;;;;;GAMG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,cAAc,CAAC,CAqBzB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,GAAE,cAAmB,GAAG,MAAM,CAEnF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/souvenir/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,UAAU,GAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,cAAc,EACd,SAAS,EACT,uBAAuB,EACvB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,YAAY,EAClB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EACtD,MAAM,CAAC,EAAE,MAAM,GACd,cAAc,CAUhB;AAYD;;;;;;GAMG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,cAAc,CAAC,CAqBzB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,GAAE,cAAmB,GAAG,MAAM,CAEnF"}

package/dist/souvenir/index.js

@@ -14,20 +14,8 @@ export { wrapText, tokenize, layoutLines, } from './text.js';
 export { renderSouvenir, drawOrder, pageHasOpaqueBackground, souvenirSignature, loadSouvenirImage, } from './render.js';
 import { pageHasOpaqueBackground, renderSouvenir, souvenirSignature } from './render.js';
 import { SouvenirError, } from './types.js';
-const OUTPUT_SEPARATOR = '@@';
-const OUTPUT_PREFIX = 'outputs';
-/**
- * Element ids for output-bound elements are `outputs@@nodeId@@key[@@tab@@rand]`.
- * Modules know field keys; the page knows element ids. This bridges the two.
- */
-export function parseSouvenirOutputId(eid) {
-    if (!eid.startsWith(OUTPUT_PREFIX + OUTPUT_SEPARATOR))
-        return null;
-    const parts = eid.split(OUTPUT_SEPARATOR);
-    if (parts.length < 3)
-        return null;
-    return { nodeId: parts[1], key: parts[2] };
-}
+import { parseSouvenirOutputId } from './outputId.js';
+export { parseSouvenirOutputId } from './outputId.js';
 /**
  * Spreads `{ fieldKey: value }` over every element on the page bound to that
  * field, so a module never has to know how element ids are built.

package/dist/souvenir/outputId.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Element ids for output-bound elements are `outputs@@nodeId@@key[@@tab@@rand]`.
+ * Modules know field keys; the page knows element ids. This bridges the two.
+ */
+export declare function parseSouvenirOutputId(eid: string): {
+    nodeId: string;
+    key: string;
+} | null;
+//# sourceMappingURL=outputId.d.ts.map

package/dist/souvenir/outputId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outputId.d.ts","sourceRoot":"","sources":["../../src/souvenir/outputId.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAKzF"}

package/dist/souvenir/outputId.js

@@ -0,0 +1,14 @@
+const OUTPUT_SEPARATOR = '@@';
+const OUTPUT_PREFIX = 'outputs';
+/**
+ * Element ids for output-bound elements are `outputs@@nodeId@@key[@@tab@@rand]`.
+ * Modules know field keys; the page knows element ids. This bridges the two.
+ */
+export function parseSouvenirOutputId(eid) {
+    if (!eid.startsWith(OUTPUT_PREFIX + OUTPUT_SEPARATOR))
+        return null;
+    const parts = eid.split(OUTPUT_SEPARATOR);
+    if (parts.length < 3)
+        return null;
+    return { nodeId: parts[1], key: parts[2] };
+}

package/dist/souvenir/render.d.ts

@@ -9,7 +9,22 @@
  * mirrors the runner's `elementStyle`, which is what the operator sees in the
  * editor and the preview.
  */
-import { type SouvenirOptions, type SouvenirPage, type SouvenirValues } from './types.js';
+import { type SouvenirOptions, type SouvenirPage, type SouvenirProperty, type SouvenirValues } from './types.js';
+/**
+ * An element bound to a Data field whose field has no value is left out, the
+ * way the runner hides it on a live page. Falling back to what the Builder
+ * stored for it would draw the field's name (such as "Message") into the image.
+ */
+export declare function isUnfilledOutput(eid: string, values: SouvenirValues): boolean;
+/**
+ * The border the runner shows for an element, or null when it shows none:
+ * border style None, no width, or a transparent colour. Shapes and every other
+ * element share these rules, as they share the runner's `elementStyle`.
+ */
+export declare function borderOf(property: SouvenirProperty): {
+    width: number;
+    color: string;
+} | null;
 /** Loads one image with EXIF orientation applied, or throws a SouvenirError. */
 export declare function loadSouvenirImage(url: string, crossOrigin: string | null | undefined): Promise<CanvasImageSource & {
     width: number;

package/dist/souvenir/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/souvenir/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AAkRpB,gFAAgF;AAChF,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAAC,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBhE;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,EAAE,CAOtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAYnE;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,CAMpF;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,iBAAiB,CAAC,CAoE5B"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/souvenir/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AA6CpB;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,GAAG,OAAO,CAI7E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAO5F;AA6ND,gFAAgF;AAChF,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAAC,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBhE;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,EAAE,CAOtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAYnE;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,CAMpF;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,iBAAiB,CAAC,CAsE5B"}

package/dist/souvenir/render.js

@@ -10,6 +10,7 @@
  * editor and the preview.
  */
 import { computeImageFitDrawRect, hashSignature, normalizeImageFit } from './imageFit.js';
+import { parseSouvenirOutputId } from './outputId.js';
 import { layoutLines, wrapText } from './text.js';
 import { isSouvenirSizeAllowed, SouvenirError, SOUVENIR_ELEMENT_TYPES, } from './types.js';
 const DEFAULT_LINE_HEIGHT = 1.2;
@@ -40,6 +41,33 @@ function geometryOf(property) {
 function isHidden(property) {
     return property['display'] === 'off';
 }
+/**
+ * An element bound to a Data field whose field has no value is left out, the
+ * way the runner hides it on a live page. Falling back to what the Builder
+ * stored for it would draw the field's name (such as "Message") into the image.
+ */
+export function isUnfilledOutput(eid, values) {
+    if (!parseSouvenirOutputId(eid))
+        return false;
+    const value = values[eid];
+    return value === undefined || value === null || String(value) === '';
+}
+/**
+ * The border the runner shows for an element, or null when it shows none:
+ * border style None, no width, or a transparent colour. Shapes and every other
+ * element share these rules, as they share the runner's `elementStyle`.
+ */
+export function borderOf(property) {
+    if (property['border-style'] === 'none')
+        return null;
+    const width = num(property['border-width']);
+    if (width <= 0)
+        return null;
+    const raw = typeof property['border-color'] === 'string' ? property['border-color'].trim() : '';
+    if (raw === TRANSPARENT)
+        return null;
+    return { width, color: raw || '#94a3b8' };
+}
 function roundedRectPath(ctx, x, y, width, height, radius) {
     const r = Math.max(0, Math.min(radius, Math.min(width, height) / 2));
     ctx.beginPath();
@@ -95,21 +123,16 @@ function fillBackground(ctx, property, width, height, radius, ellipse) {
  * size the operator gave it, at the cost of half a border width along the edge.
  */
 function strokeBorder(ctx, property, width, height, radius, ellipse) {
-    if (property['border-style'] === 'none')
-        return;
-    const borderWidth = num(property['border-width']);
-    if (borderWidth <= 0)
+    const border = borderOf(property);
+    if (!border)
         return;
-    const color = colorOf(property['border-color']) || '#94a3b8';
-    if (!color)
-        return;
-    const inset = borderWidth / 2;
+    const inset = border.width / 2;
     if (ellipse)
-        ellipsePath(ctx, inset, inset, width - borderWidth, height - borderWidth);
+        ellipsePath(ctx, inset, inset, width - border.width, height - border.width);
     else
-        roundedRectPath(ctx, inset, inset, width - borderWidth, height - borderWidth, Math.max(0, radius - inset));
-    ctx.lineWidth = borderWidth;
-    ctx.strokeStyle = color;
+        roundedRectPath(ctx, inset, inset, width - border.width, height - border.width, Math.max(0, radius - inset));
+    ctx.lineWidth = border.width;
+    ctx.strokeStyle = border.color;
     ctx.stroke();
 }
 function fontOf(property, fontSize) {
@@ -207,18 +230,9 @@ function drawShape(ctx, type, property, geo) {
             c.fillStyle = fill;
             c.fill();
         }
-        const strokeWidth = num(property['stroke-width'], 0) || num(property['border-width'], 0);
-        const strokeColor = colorOf(property['stroke-color']) || colorOf(property['border-color']);
-        if (strokeWidth > 0 && strokeColor) {
-            const inset = strokeWidth / 2;
-            if (ellipse)
-                ellipsePath(c, inset, inset, width - strokeWidth, height - strokeWidth);
-            else
-                roundedRectPath(c, inset, inset, width - strokeWidth, height - strokeWidth, Math.max(0, geo.radius - inset));
-            c.lineWidth = strokeWidth;
-            c.strokeStyle = strokeColor;
-            c.stroke();
-        }
+        // Rectangles and ellipses take their outline from the border settings, like
+        // on a live page; a new shape stores a 1px grey border with style None.
+        strokeBorder(c, property, width, height, geo.radius, ellipse);
     });
 }
 /** Loads one image with EXIF orientation applied, or throws a SouvenirError. */
@@ -317,6 +331,8 @@ export async function renderSouvenir(page, values = {}, options = {}) {
         const type = page.elements[eid]?.type;
         if (type !== 'image' && type !== 'image-frame' && type !== 'bg')
             return;
+        if (isUnfilledOutput(eid, values))
+            return;
         const property = page.properties?.[eid] ?? {};
         const url = (values[eid] ?? property['source'] ?? '').toString().trim();
         if (!url)
@@ -335,6 +351,8 @@ export async function renderSouvenir(page, values = {}, options = {}) {
         const geo = geometryOf(property);
         if (geo.width <= 0 || geo.height <= 0)
             continue;
+        if (isUnfilledOutput(eid, values))
+            continue;
         if (type === 'text') {
             const content = (values[eid] ?? property['content'] ?? '').toString();
             drawText(ctx, property, geo, content);

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "@realnation/builder-shared-sdk",
-  "version": "2.4.0",
-  "type": "module",
-  "private": false,
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./runtime": {
-      "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.js"
-    },
-    "./runtime/vue": {
-      "types": "./dist/runtime/vue/index.d.ts",
-      "import": "./dist/runtime/vue/index.js"
-    },
-    "./interaction": {
-      "types": "./dist/interaction/index.d.ts",
-      "import": "./dist/interaction/index.js"
-    },
-    "./interaction/vue": {
-      "types": "./dist/interaction/vue.d.ts",
-      "import": "./dist/interaction/vue.js"
-    },
-    "./souvenir": {
-      "types": "./dist/souvenir/index.d.ts",
-      "import": "./dist/souvenir/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "clean": "rimraf dist",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run clean && npm run test && npm run build",
-    "prepare": "npm run clean && npm run build"
-  },
-  "dependencies": {
-    "ali-oss": "^6.23.0",
-    "axios": "^1.7.7"
-  },
-  "peerDependencies": {
-    "vue": "^3.4.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/ali-oss": "^6.16.11",
-    "@types/node": "^26.1.2",
-    "rimraf": "^5.0.5",
-    "typescript": "^5.4.5",
-    "vitest": "^2.1.0",
-    "vue": "^3.4.0"
-  }
-}
+{
+  "name": "@realnation/builder-shared-sdk",
+  "version": "2.4.1",
+  "type": "module",
+  "private": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./runtime/vue": {
+      "types": "./dist/runtime/vue/index.d.ts",
+      "import": "./dist/runtime/vue/index.js"
+    },
+    "./interaction": {
+      "types": "./dist/interaction/index.d.ts",
+      "import": "./dist/interaction/index.js"
+    },
+    "./interaction/vue": {
+      "types": "./dist/interaction/vue.d.ts",
+      "import": "./dist/interaction/vue.js"
+    },
+    "./souvenir": {
+      "types": "./dist/souvenir/index.d.ts",
+      "import": "./dist/souvenir/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run clean && npm run test && npm run build",
+    "prepare": "npm run clean && npm run build"
+  },
+  "dependencies": {
+    "ali-oss": "^6.23.0",
+    "axios": "^1.7.7"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/ali-oss": "^6.16.11",
+    "@types/node": "^26.1.2",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.5",
+    "vitest": "^2.1.0",
+    "vue": "^3.4.0"
+  }
+}