@prosopo/icon-order-assets 0.2.5 → 0.2.6

package/.turbo/turbo-build$colon$cjs.log

@@ -10,15 +10,16 @@ ViteCommonJSConfig: .
 vite v8.1.6 building ssr environment for production...
 Bundle build started
 
-✓ 7 modules transformed.
+✓ 8 modules transformed.
 rendering chunks...
 computing gzip size...
 dist/cjs/shuffle.cjs                     0.44 kB │ gzip: 0.29 kB
+dist/cjs/compose.cjs                     0.83 kB │ gzip: 0.41 kB
 dist/cjs/_virtual/_rolldown/runtime.cjs  1.00 kB │ gzip: 0.50 kB
 dist/cjs/glyphs.cjs                      1.56 kB │ gzip: 0.77 kB
 dist/cjs/place.cjs                       2.46 kB │ gzip: 1.12 kB
-dist/cjs/index.cjs                       2.69 kB │ gzip: 1.12 kB
-dist/cjs/background.cjs                  4.09 kB │ gzip: 1.42 kB
-dist/cjs/compose.cjs                     4.69 kB │ gzip: 2.02 kB
+dist/cjs/index.cjs                       2.70 kB │ gzip: 1.11 kB
+dist/cjs/background.cjs                  4.11 kB │ gzip: 1.43 kB
+dist/cjs/markup.cjs                      4.32 kB │ gzip: 1.89 kB
 
-✓ built in 54ms
+✓ built in 44ms

package/.turbo/turbo-build$colon$esm.log

@@ -10,15 +10,17 @@ ViteEsmConfig: .
 vite v8.1.6 building ssr environment for production...
 Bundle build started
 
-✓ 7 modules transformed.
+✓ 9 modules transformed.
 rendering chunks...
 computing gzip size...
 dist/esm/_virtual/_rolldown/runtime.js  0.04 kB │ gzip: 0.06 kB
 dist/esm/shuffle.js                     0.43 kB │ gzip: 0.29 kB
+dist/esm/compose.js                     0.64 kB │ gzip: 0.35 kB
+dist/esm/browser.js                     1.02 kB │ gzip: 0.54 kB
 dist/esm/glyphs.js                      1.51 kB │ gzip: 0.76 kB
-dist/esm/index.js                       2.21 kB │ gzip: 1.03 kB
+dist/esm/index.js                       2.20 kB │ gzip: 1.02 kB
 dist/esm/place.js                       2.38 kB │ gzip: 1.11 kB
-dist/esm/background.js                  4.03 kB │ gzip: 1.40 kB
-dist/esm/compose.js                     4.35 kB │ gzip: 1.92 kB
+dist/esm/background.js                  4.04 kB │ gzip: 1.41 kB
+dist/esm/markup.js                      4.11 kB │ gzip: 1.86 kB
 
-✓ built in 46ms
+✓ built in 224ms

package/.turbo/turbo-build$colon$tsc.log

@@ -1,14 +1,14 @@
 $ tsc --build --verbose
-10:55:01 AM - Projects in this build: 
+10:05:54 AM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../puzzle-assets/tsconfig.json
     * tsconfig.json
 
-10:55:02 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/modifyExportsFiles.test.ts' is older than output '../../dev/config/dist/tsc/tsconfig.tsbuildinfo'
+10:05:54 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/dist/tsc/tsconfig.tsbuildinfo'
 
-10:55:02 AM - Project '../puzzle-assets/tsconfig.json' is up to date because newest input '../puzzle-assets/src/types.ts' is older than output '../puzzle-assets/dist/tsc/tsconfig.tsbuildinfo'
+10:05:54 AM - Project '../puzzle-assets/tsconfig.json' is up to date because newest input '../puzzle-assets/src/types.ts' is older than output '../puzzle-assets/dist/tsc/tsconfig.tsbuildinfo'
 
-10:55:02 AM - Project 'tsconfig.json' is out of date because output file 'dist/tsc/tsconfig.tsbuildinfo' does not exist
+10:05:54 AM - Project 'tsconfig.json' is out of date because output file 'dist/tsc/tsconfig.tsbuildinfo' does not exist
 
-10:55:02 AM - Building project '/home/runner/work/captcha/captcha/packages/icon-order-assets/tsconfig.json'...
+10:05:54 AM - Building project '/home/runner/work/captcha/captcha/packages/icon-order-assets/tsconfig.json'...
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @prosopo/icon-order-assets
 
+## 0.2.6
+### Patch Changes
+
+- e1cb7f4: Icon order challenges can now be redrawn exactly, the way puzzle challenges already can.
+  
+  - The provider saves what it needs to redraw each icon order challenge on its record: the render seed, the frame geometry and the render settings (`render`).
+  - `@prosopo/icon-order-assets/browser` is a new entry that rebuilds a challenge from those inputs without `sharp`, so the portal can show the image a visitor was served. It returns the frame and the target strip as SVG plus the grain to lay over the frame. Rasterised the same way, the frame matches the served one byte for byte.
+  - `@prosopo/puzzle-assets/browser` also exports `hslToRgb` and the `Prng` type, which the new entry uses.
+  
+  The seed regenerates the answer too, so like the puzzle seeds it is never sent to a client.
+- Updated dependencies [e1cb7f4]
+  - @prosopo/puzzle-assets@0.2.7
+
 ## 0.2.5
 ### Patch Changes
 

package/dist/cjs/background.cjs

@@ -1,4 +1,4 @@
-let _prosopo_puzzle_assets = require("@prosopo/puzzle-assets");
+let _prosopo_puzzle_assets_browser = require("@prosopo/puzzle-assets/browser");
 //#region src/background.ts
 /**
 * A hard-edged collage rather than a smooth gradient: on a gradient every icon
@@ -7,7 +7,7 @@ let _prosopo_puzzle_assets = require("@prosopo/puzzle-assets");
 */
 var round = (value) => Math.round(value * 100) / 100;
 var rgb = (hue, saturation, lightness) => {
-	const { r, g, b } = (0, _prosopo_puzzle_assets.hslToRgb)(hue, saturation, lightness);
+	const { r, g, b } = (0, _prosopo_puzzle_assets_browser.hslToRgb)(hue, saturation, lightness);
 	return `rgb(${r},${g},${b})`;
 };
 var panels = (prng, geometry, hues, count) => {

package/dist/cjs/compose.cjs

@@ -1,108 +1,18 @@
 const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
-const require_background = require("./background.cjs");
-const require_glyphs = require("./glyphs.cjs");
-const require_shuffle = require("./shuffle.cjs");
-let _prosopo_puzzle_assets = require("@prosopo/puzzle-assets");
+const require_markup = require("./markup.cjs");
 let sharp = require("sharp");
 sharp = require_runtime.__toESM(sharp, 1);
 //#region src/compose.ts
-/** Glyph path data is authored in this box; see glyphs.ts. */
-var GLYPH_BOX = 100;
-/**
-* Width of the dark outline stroke relative to the bright one. Narrower and
-* icons vanish over light regions; wider and the halo becomes the strongest
-* edge in the frame, which is what a solver looks for.
-*/
-var HALO_WIDTH_MULTIPLE = 2.4;
-var HALO_COLOUR = "rgb(12,14,22)";
-var LEGEND_CHIP_COLOUR = "rgb(24,27,38)";
-var LEGEND_GAP = 6;
-var LEGEND_GLYPH_INSET = .62;
-var round = (value) => Math.round(value * 100) / 100;
-var strokeColour = (hue) => {
-	const { r, g, b } = (0, _prosopo_puzzle_assets.hslToRgb)(hue, .86, .64);
-	return `rgb(${r},${g},${b})`;
-};
-/**
-* Converts a frame-pixel stroke width into glyph-box units, so line weight
-* does not vary with (and so leak) the icon's size.
-*/
-var strokeUnits = (widthPx, size) => widthPx * GLYPH_BOX / size;
-var glyphMarkup = (placement, settings, rotationOverride) => {
-	const scale = placement.size / GLYPH_BOX;
-	const rotation = rotationOverride ?? placement.rotation;
-	const inner = strokeUnits(settings.strokeWidth, placement.size);
-	const halo = inner * HALO_WIDTH_MULTIPLE;
-	const path = require_glyphs.glyphPath(placement.kind);
-	return [
-		`<g transform="${[
-			`translate(${round(placement.x)} ${round(placement.y)})`,
-			`rotate(${round(rotation)})`,
-			`scale(${round(scale)})`,
-			`translate(${-GLYPH_BOX / 2} ${-GLYPH_BOX / 2})`
-		].join(" ")}" fill="none" stroke-linecap="round" stroke-linejoin="round">`,
-		`<path d="${path}" stroke="${HALO_COLOUR}" stroke-opacity="${round(settings.haloOpacity)}" stroke-width="${round(halo)}"/>`,
-		`<path d="${path}" stroke="${strokeColour(placement.hue)}" stroke-opacity="${round(settings.iconOpacity)}" stroke-width="${round(inner)}"/>`,
-		"</g>"
-	].join("");
-};
-var svgDocument = (width, height, body) => Buffer.from(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`);
-/**
-* Draw order is shuffled here because callers hold targets and decoys as
-* separate lists, and concatenating them would paint every target on top
-* wherever icons overlap — a tell that needs no shape recognition.
-*/
-var compositeIcons = async (prng, icons, geometry, settings) => {
-	const body = require_shuffle.shuffle(prng, icons).map((placement) => glyphMarkup(placement, settings)).join("");
-	const document = svgDocument(geometry.width, geometry.height, require_background.collageMarkup(prng, geometry, settings.backgroundClutter) + body);
-	const { data, info } = await (0, sharp.default)(document).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
-	return addGrain(prng, {
-		data,
-		width: info.width,
-		height: info.height
-	});
-};
-/**
-* Noise over the flat vector fills, so region boundaries are not perfectly
-* clean input for an edge detector.
-*/
-var GRAIN_AMPLITUDE = 6;
-var addGrain = (prng, image) => {
-	const { data } = image;
-	for (let i = 0; i < data.length; i += 4) {
-		const noise = Math.round((prng.next() - .5) * 2 * GRAIN_AMPLITUDE);
-		for (let channel = 0; channel < 3; channel++) {
-			const value = (data[i + channel] ?? 0) + noise;
-			data[i + channel] = value < 0 ? 0 : value > 255 ? 255 : value;
-		}
-	}
-	return image;
-};
-/**
-* Legend glyphs are drawn upright whatever their rotation on the frame, so a
-* template-matching solver is not handed a rotation-aligned crib. The hue is
-* kept: it helps a human and a solver already has it from the pixels.
-*/
-var renderLegend = async (targets, legendIconSize, settings) => {
-	const step = legendIconSize + LEGEND_GAP;
-	const width = Math.max(legendIconSize, targets.length * step - (targets.length > 0 ? LEGEND_GAP : 0));
-	const radius = legendIconSize / 2;
-	const body = targets.map((target, index) => {
-		const cx = index * step + radius;
-		return `<circle cx="${round(cx)}" cy="${round(radius)}" r="${round(radius)}" fill="${LEGEND_CHIP_COLOUR}"/>` + glyphMarkup({
-			...target,
-			x: cx,
-			y: radius,
-			size: legendIconSize * LEGEND_GLYPH_INSET
-		}, settings, 0);
-	}).join("");
-	const { data, info } = await (0, sharp.default)(svgDocument(width, legendIconSize, body)).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+var rasterise = async (svg) => {
+	const { data, info } = await (0, sharp.default)(Buffer.from(svg)).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
 	return {
 		data,
 		width: info.width,
 		height: info.height
 	};
 };
+var compositeIcons = async (prng, icons, geometry, settings) => require_markup.addGrain(prng, await rasterise(require_markup.frameMarkup(prng, icons, geometry, settings)));
+var renderLegend = (targets, legendIconSize, settings) => rasterise(require_markup.legendMarkup(targets, legendIconSize, settings));
 //#endregion
 exports.compositeIcons = compositeIcons;
 exports.renderLegend = renderLegend;

package/dist/cjs/index.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_glyphs = require("./glyphs.cjs");
+const require_markup = require("./markup.cjs");
 const require_compose = require("./compose.cjs");
 const require_place = require("./place.cjs");
 let _prosopo_puzzle_assets = require("@prosopo/puzzle-assets");
@@ -19,15 +20,13 @@ var DEFAULT_RENDER_SETTINGS = {
 	haloOpacity: .7,
 	backgroundClutter: 8
 };
-/** Fixed because the widget lays the legend out against its own header. */
-var LEGEND_ICON_SIZE = 26;
 /**
 * The background is drawn fresh per call and never reused: two layouts on the
 * same background could be diffed to read both answers. The returned
 * `targets` are the answer and must never be serialised into a response.
 */
-var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_RENDER_SETTINGS) => {
-	const prng = (0, _prosopo_puzzle_assets.createPrng)((0, _prosopo_puzzle_assets.createSeed)());
+var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_RENDER_SETTINGS, seed = (0, _prosopo_puzzle_assets.createSeed)()) => {
+	const prng = (0, _prosopo_puzzle_assets.createPrng)(seed);
 	const { targets, decoys } = require_place.placeIcons(prng, geometry, settings.targetCount, settings.decoyCount);
 	const composited = await require_compose.compositeIcons(prng, [...targets, ...decoys], geometry, settings);
 	const legend = await require_compose.renderLegend(targets, 26, settings);
@@ -36,7 +35,8 @@ var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_REN
 		background: backgroundWebp,
 		legend: legendWebp,
 		legendIconSize: 26,
-		targets
+		targets,
+		seed: seed.toString("hex")
 	};
 };
 /**
@@ -55,7 +55,7 @@ exports.DEFAULT_GEOMETRY = DEFAULT_GEOMETRY;
 exports.DEFAULT_RENDER_SETTINGS = DEFAULT_RENDER_SETTINGS;
 exports.GLYPH_KINDS = require_glyphs.GLYPH_KINDS;
 exports.GlyphKind = require_glyphs.GlyphKind;
-exports.LEGEND_ICON_SIZE = LEGEND_ICON_SIZE;
+exports.LEGEND_ICON_SIZE = require_markup.LEGEND_ICON_SIZE;
 exports.compositeIcons = require_compose.compositeIcons;
 exports.glyphPath = require_glyphs.glyphPath;
 exports.gradeClicks = gradeClicks;

package/dist/cjs/markup.cjs

@@ -0,0 +1,97 @@
+const require_background = require("./background.cjs");
+const require_glyphs = require("./glyphs.cjs");
+const require_shuffle = require("./shuffle.cjs");
+let _prosopo_puzzle_assets_browser = require("@prosopo/puzzle-assets/browser");
+//#region src/markup.ts
+/** Glyph path data is authored in this box; see glyphs.ts. */
+var GLYPH_BOX = 100;
+/**
+* Width of the dark outline stroke relative to the bright one. Narrower and
+* icons vanish over light regions; wider and the halo becomes the strongest
+* edge in the frame, which is what a solver looks for.
+*/
+var HALO_WIDTH_MULTIPLE = 2.4;
+var HALO_COLOUR = "rgb(12,14,22)";
+/** Fixed because the widget lays the legend out against its own header. */
+var LEGEND_ICON_SIZE = 26;
+var LEGEND_CHIP_COLOUR = "rgb(24,27,38)";
+var LEGEND_GAP = 6;
+var LEGEND_GLYPH_INSET = .62;
+var round = (value) => Math.round(value * 100) / 100;
+var strokeColour = (hue) => {
+	const { r, g, b } = (0, _prosopo_puzzle_assets_browser.hslToRgb)(hue, .86, .64);
+	return `rgb(${r},${g},${b})`;
+};
+/**
+* Converts a frame-pixel stroke width into glyph-box units, so line weight
+* does not vary with (and so leak) the icon's size.
+*/
+var strokeUnits = (widthPx, size) => widthPx * GLYPH_BOX / size;
+var glyphMarkup = (placement, settings, rotationOverride) => {
+	const scale = placement.size / GLYPH_BOX;
+	const rotation = rotationOverride ?? placement.rotation;
+	const inner = strokeUnits(settings.strokeWidth, placement.size);
+	const halo = inner * HALO_WIDTH_MULTIPLE;
+	const path = require_glyphs.glyphPath(placement.kind);
+	return [
+		`<g transform="${[
+			`translate(${round(placement.x)} ${round(placement.y)})`,
+			`rotate(${round(rotation)})`,
+			`scale(${round(scale)})`,
+			`translate(${-GLYPH_BOX / 2} ${-GLYPH_BOX / 2})`
+		].join(" ")}" fill="none" stroke-linecap="round" stroke-linejoin="round">`,
+		`<path d="${path}" stroke="${HALO_COLOUR}" stroke-opacity="${round(settings.haloOpacity)}" stroke-width="${round(halo)}"/>`,
+		`<path d="${path}" stroke="${strokeColour(placement.hue)}" stroke-opacity="${round(settings.iconOpacity)}" stroke-width="${round(inner)}"/>`,
+		"</g>"
+	].join("");
+};
+var svgDocument = (width, height, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`;
+/**
+* Draw order is shuffled here because callers hold targets and decoys as
+* separate lists, and concatenating them would paint every target on top
+* wherever icons overlap — a tell that needs no shape recognition.
+*/
+var frameMarkup = (prng, icons, geometry, settings) => {
+	const body = require_shuffle.shuffle(prng, icons).map((placement) => glyphMarkup(placement, settings)).join("");
+	return svgDocument(geometry.width, geometry.height, require_background.collageMarkup(prng, geometry, settings.backgroundClutter) + body);
+};
+/**
+* Noise over the flat vector fills, so region boundaries are not perfectly
+* clean input for an edge detector.
+*/
+var GRAIN_AMPLITUDE = 6;
+var addGrain = (prng, image) => {
+	const { data } = image;
+	for (let i = 0; i < data.length; i += 4) {
+		const noise = Math.round((prng.next() - .5) * 2 * GRAIN_AMPLITUDE);
+		for (let channel = 0; channel < 3; channel++) {
+			const value = (data[i + channel] ?? 0) + noise;
+			data[i + channel] = value < 0 ? 0 : value > 255 ? 255 : value;
+		}
+	}
+	return image;
+};
+/**
+* Legend glyphs are drawn upright whatever their rotation on the frame, so a
+* template-matching solver is not handed a rotation-aligned crib. The hue is
+* kept: it helps a human and a solver already has it from the pixels.
+*/
+var legendMarkup = (targets, legendIconSize, settings) => {
+	const step = legendIconSize + LEGEND_GAP;
+	const width = Math.max(legendIconSize, targets.length * step - (targets.length > 0 ? LEGEND_GAP : 0));
+	const radius = legendIconSize / 2;
+	return svgDocument(width, legendIconSize, targets.map((target, index) => {
+		const cx = index * step + radius;
+		return `<circle cx="${round(cx)}" cy="${round(radius)}" r="${round(radius)}" fill="${LEGEND_CHIP_COLOUR}"/>` + glyphMarkup({
+			...target,
+			x: cx,
+			y: radius,
+			size: legendIconSize * LEGEND_GLYPH_INSET
+		}, settings, 0);
+	}).join(""));
+};
+//#endregion
+exports.LEGEND_ICON_SIZE = LEGEND_ICON_SIZE;
+exports.addGrain = addGrain;
+exports.frameMarkup = frameMarkup;
+exports.legendMarkup = legendMarkup;

package/dist/esm/background.js

@@ -1,4 +1,4 @@
-import { hslToRgb } from "@prosopo/puzzle-assets";
+import { hslToRgb } from "@prosopo/puzzle-assets/browser";
 //#region src/background.ts
 /**
 * A hard-edged collage rather than a smooth gradient: on a gradient every icon

package/dist/esm/browser.js

@@ -0,0 +1,24 @@
+import "./_virtual/_rolldown/runtime.js";
+import { GLYPH_KINDS, GlyphKind, glyphPath } from "./glyphs.js";
+import { LEGEND_ICON_SIZE, addGrain, frameMarkup, legendMarkup } from "./markup.js";
+import { placeIcons } from "./place.js";
+import { createPrng } from "@prosopo/puzzle-assets/browser";
+//#region src/browser.ts
+/**
+* Rebuilds what the provider drew for `seed`. A browser rasterises SVG a
+* little differently from sharp, so the result matches the served image
+* closely rather than pixel for pixel.
+*/
+var redrawIconOrder = (seed, geometry, settings) => {
+	const prng = createPrng(Buffer.from(seed, "hex"));
+	const { targets, decoys } = placeIcons(prng, geometry, settings.targetCount, settings.decoyCount);
+	return {
+		frame: frameMarkup(prng, [...targets, ...decoys], geometry, settings),
+		legend: legendMarkup(targets, 26, settings),
+		legendIconSize: 26,
+		targets,
+		addGrain: (image) => addGrain(prng, image)
+	};
+};
+//#endregion
+export { GLYPH_KINDS, GlyphKind, LEGEND_ICON_SIZE, glyphPath, redrawIconOrder };

package/dist/esm/compose.js

@@ -1,103 +1,15 @@
-import { collageMarkup } from "./background.js";
-import { glyphPath } from "./glyphs.js";
-import { shuffle } from "./shuffle.js";
-import { hslToRgb } from "@prosopo/puzzle-assets";
+import { addGrain, frameMarkup, legendMarkup } from "./markup.js";
 import sharp from "sharp";
 //#region src/compose.ts
-/** Glyph path data is authored in this box; see glyphs.ts. */
-var GLYPH_BOX = 100;
-/**
-* Width of the dark outline stroke relative to the bright one. Narrower and
-* icons vanish over light regions; wider and the halo becomes the strongest
-* edge in the frame, which is what a solver looks for.
-*/
-var HALO_WIDTH_MULTIPLE = 2.4;
-var HALO_COLOUR = "rgb(12,14,22)";
-var LEGEND_CHIP_COLOUR = "rgb(24,27,38)";
-var LEGEND_GAP = 6;
-var LEGEND_GLYPH_INSET = .62;
-var round = (value) => Math.round(value * 100) / 100;
-var strokeColour = (hue) => {
-	const { r, g, b } = hslToRgb(hue, .86, .64);
-	return `rgb(${r},${g},${b})`;
-};
-/**
-* Converts a frame-pixel stroke width into glyph-box units, so line weight
-* does not vary with (and so leak) the icon's size.
-*/
-var strokeUnits = (widthPx, size) => widthPx * GLYPH_BOX / size;
-var glyphMarkup = (placement, settings, rotationOverride) => {
-	const scale = placement.size / GLYPH_BOX;
-	const rotation = rotationOverride ?? placement.rotation;
-	const inner = strokeUnits(settings.strokeWidth, placement.size);
-	const halo = inner * HALO_WIDTH_MULTIPLE;
-	const path = glyphPath(placement.kind);
-	return [
-		`<g transform="${[
-			`translate(${round(placement.x)} ${round(placement.y)})`,
-			`rotate(${round(rotation)})`,
-			`scale(${round(scale)})`,
-			`translate(${-GLYPH_BOX / 2} ${-GLYPH_BOX / 2})`
-		].join(" ")}" fill="none" stroke-linecap="round" stroke-linejoin="round">`,
-		`<path d="${path}" stroke="${HALO_COLOUR}" stroke-opacity="${round(settings.haloOpacity)}" stroke-width="${round(halo)}"/>`,
-		`<path d="${path}" stroke="${strokeColour(placement.hue)}" stroke-opacity="${round(settings.iconOpacity)}" stroke-width="${round(inner)}"/>`,
-		"</g>"
-	].join("");
-};
-var svgDocument = (width, height, body) => Buffer.from(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`);
-/**
-* Draw order is shuffled here because callers hold targets and decoys as
-* separate lists, and concatenating them would paint every target on top
-* wherever icons overlap — a tell that needs no shape recognition.
-*/
-var compositeIcons = async (prng, icons, geometry, settings) => {
-	const body = shuffle(prng, icons).map((placement) => glyphMarkup(placement, settings)).join("");
-	const { data, info } = await sharp(svgDocument(geometry.width, geometry.height, collageMarkup(prng, geometry, settings.backgroundClutter) + body)).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
-	return addGrain(prng, {
-		data,
-		width: info.width,
-		height: info.height
-	});
-};
-/**
-* Noise over the flat vector fills, so region boundaries are not perfectly
-* clean input for an edge detector.
-*/
-var GRAIN_AMPLITUDE = 6;
-var addGrain = (prng, image) => {
-	const { data } = image;
-	for (let i = 0; i < data.length; i += 4) {
-		const noise = Math.round((prng.next() - .5) * 2 * GRAIN_AMPLITUDE);
-		for (let channel = 0; channel < 3; channel++) {
-			const value = (data[i + channel] ?? 0) + noise;
-			data[i + channel] = value < 0 ? 0 : value > 255 ? 255 : value;
-		}
-	}
-	return image;
-};
-/**
-* Legend glyphs are drawn upright whatever their rotation on the frame, so a
-* template-matching solver is not handed a rotation-aligned crib. The hue is
-* kept: it helps a human and a solver already has it from the pixels.
-*/
-var renderLegend = async (targets, legendIconSize, settings) => {
-	const step = legendIconSize + LEGEND_GAP;
-	const width = Math.max(legendIconSize, targets.length * step - (targets.length > 0 ? LEGEND_GAP : 0));
-	const radius = legendIconSize / 2;
-	const { data, info } = await sharp(svgDocument(width, legendIconSize, targets.map((target, index) => {
-		const cx = index * step + radius;
-		return `<circle cx="${round(cx)}" cy="${round(radius)}" r="${round(radius)}" fill="${LEGEND_CHIP_COLOUR}"/>` + glyphMarkup({
-			...target,
-			x: cx,
-			y: radius,
-			size: legendIconSize * LEGEND_GLYPH_INSET
-		}, settings, 0);
-	}).join(""))).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+var rasterise = async (svg) => {
+	const { data, info } = await sharp(Buffer.from(svg)).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
 	return {
 		data,
 		width: info.width,
 		height: info.height
 	};
 };
+var compositeIcons = async (prng, icons, geometry, settings) => addGrain(prng, await rasterise(frameMarkup(prng, icons, geometry, settings)));
+var renderLegend = (targets, legendIconSize, settings) => rasterise(legendMarkup(targets, legendIconSize, settings));
 //#endregion
 export { compositeIcons, renderLegend };

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import "./_virtual/_rolldown/runtime.js";
 import { GLYPH_KINDS, GlyphKind, glyphPath } from "./glyphs.js";
+import { LEGEND_ICON_SIZE } from "./markup.js";
 import { compositeIcons, renderLegend } from "./compose.js";
 import { placeIcons } from "./place.js";
 import { createPrng, createSeed, encodeBackground, encodePiece } from "@prosopo/puzzle-assets";
@@ -19,15 +20,13 @@ var DEFAULT_RENDER_SETTINGS = {
 	haloOpacity: .7,
 	backgroundClutter: 8
 };
-/** Fixed because the widget lays the legend out against its own header. */
-var LEGEND_ICON_SIZE = 26;
 /**
 * The background is drawn fresh per call and never reused: two layouts on the
 * same background could be diffed to read both answers. The returned
 * `targets` are the answer and must never be serialised into a response.
 */
-var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_RENDER_SETTINGS) => {
-	const prng = createPrng(createSeed());
+var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_RENDER_SETTINGS, seed = createSeed()) => {
+	const prng = createPrng(seed);
 	const { targets, decoys } = placeIcons(prng, geometry, settings.targetCount, settings.decoyCount);
 	const composited = await compositeIcons(prng, [...targets, ...decoys], geometry, settings);
 	const legend = await renderLegend(targets, 26, settings);
@@ -36,7 +35,8 @@ var renderIconOrder = async (geometry = DEFAULT_GEOMETRY, settings = DEFAULT_REN
 		background: backgroundWebp,
 		legend: legendWebp,
 		legendIconSize: 26,
-		targets
+		targets,
+		seed: seed.toString("hex")
 	};
 };
 /**

package/dist/esm/markup.js

@@ -0,0 +1,94 @@
+import { collageMarkup } from "./background.js";
+import { glyphPath } from "./glyphs.js";
+import { shuffle } from "./shuffle.js";
+import { hslToRgb } from "@prosopo/puzzle-assets/browser";
+//#region src/markup.ts
+/** Glyph path data is authored in this box; see glyphs.ts. */
+var GLYPH_BOX = 100;
+/**
+* Width of the dark outline stroke relative to the bright one. Narrower and
+* icons vanish over light regions; wider and the halo becomes the strongest
+* edge in the frame, which is what a solver looks for.
+*/
+var HALO_WIDTH_MULTIPLE = 2.4;
+var HALO_COLOUR = "rgb(12,14,22)";
+/** Fixed because the widget lays the legend out against its own header. */
+var LEGEND_ICON_SIZE = 26;
+var LEGEND_CHIP_COLOUR = "rgb(24,27,38)";
+var LEGEND_GAP = 6;
+var LEGEND_GLYPH_INSET = .62;
+var round = (value) => Math.round(value * 100) / 100;
+var strokeColour = (hue) => {
+	const { r, g, b } = hslToRgb(hue, .86, .64);
+	return `rgb(${r},${g},${b})`;
+};
+/**
+* Converts a frame-pixel stroke width into glyph-box units, so line weight
+* does not vary with (and so leak) the icon's size.
+*/
+var strokeUnits = (widthPx, size) => widthPx * GLYPH_BOX / size;
+var glyphMarkup = (placement, settings, rotationOverride) => {
+	const scale = placement.size / GLYPH_BOX;
+	const rotation = rotationOverride ?? placement.rotation;
+	const inner = strokeUnits(settings.strokeWidth, placement.size);
+	const halo = inner * HALO_WIDTH_MULTIPLE;
+	const path = glyphPath(placement.kind);
+	return [
+		`<g transform="${[
+			`translate(${round(placement.x)} ${round(placement.y)})`,
+			`rotate(${round(rotation)})`,
+			`scale(${round(scale)})`,
+			`translate(${-GLYPH_BOX / 2} ${-GLYPH_BOX / 2})`
+		].join(" ")}" fill="none" stroke-linecap="round" stroke-linejoin="round">`,
+		`<path d="${path}" stroke="${HALO_COLOUR}" stroke-opacity="${round(settings.haloOpacity)}" stroke-width="${round(halo)}"/>`,
+		`<path d="${path}" stroke="${strokeColour(placement.hue)}" stroke-opacity="${round(settings.iconOpacity)}" stroke-width="${round(inner)}"/>`,
+		"</g>"
+	].join("");
+};
+var svgDocument = (width, height, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`;
+/**
+* Draw order is shuffled here because callers hold targets and decoys as
+* separate lists, and concatenating them would paint every target on top
+* wherever icons overlap — a tell that needs no shape recognition.
+*/
+var frameMarkup = (prng, icons, geometry, settings) => {
+	const body = shuffle(prng, icons).map((placement) => glyphMarkup(placement, settings)).join("");
+	return svgDocument(geometry.width, geometry.height, collageMarkup(prng, geometry, settings.backgroundClutter) + body);
+};
+/**
+* Noise over the flat vector fills, so region boundaries are not perfectly
+* clean input for an edge detector.
+*/
+var GRAIN_AMPLITUDE = 6;
+var addGrain = (prng, image) => {
+	const { data } = image;
+	for (let i = 0; i < data.length; i += 4) {
+		const noise = Math.round((prng.next() - .5) * 2 * GRAIN_AMPLITUDE);
+		for (let channel = 0; channel < 3; channel++) {
+			const value = (data[i + channel] ?? 0) + noise;
+			data[i + channel] = value < 0 ? 0 : value > 255 ? 255 : value;
+		}
+	}
+	return image;
+};
+/**
+* Legend glyphs are drawn upright whatever their rotation on the frame, so a
+* template-matching solver is not handed a rotation-aligned crib. The hue is
+* kept: it helps a human and a solver already has it from the pixels.
+*/
+var legendMarkup = (targets, legendIconSize, settings) => {
+	const step = legendIconSize + LEGEND_GAP;
+	const width = Math.max(legendIconSize, targets.length * step - (targets.length > 0 ? LEGEND_GAP : 0));
+	const radius = legendIconSize / 2;
+	return svgDocument(width, legendIconSize, targets.map((target, index) => {
+		const cx = index * step + radius;
+		return `<circle cx="${round(cx)}" cy="${round(radius)}" r="${round(radius)}" fill="${LEGEND_CHIP_COLOUR}"/>` + glyphMarkup({
+			...target,
+			x: cx,
+			y: radius,
+			size: legendIconSize * LEGEND_GLYPH_INSET
+		}, settings, 0);
+	}).join(""));
+};
+//#endregion
+export { LEGEND_ICON_SIZE, addGrain, frameMarkup, legendMarkup };

package/dist/tsc/background.d.ts

@@ -1,4 +1,4 @@
-import { type Prng } from "@prosopo/puzzle-assets";
+import { type Prng } from "@prosopo/puzzle-assets/browser";
 import type { IconOrderGeometry } from "./types.js";
 export declare const collageMarkup: (prng: Prng, geometry: IconOrderGeometry, clutter: number) => string;
 //# sourceMappingURL=background.d.ts.map

package/dist/tsc/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../src/background.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,IAAI,EAAY,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA6GpD,eAAO,MAAM,aAAa,SACnB,IAAI,YACA,iBAAiB,WAClB,MAAM,KACb,MA0BF,CAAC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../src/background.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,IAAI,EAAY,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA6GpD,eAAO,MAAM,aAAa,SACnB,IAAI,YACA,iBAAiB,WAClB,MAAM,KACb,MA0BF,CAAC"}

package/dist/tsc/background.js

@@ -1,4 +1,4 @@
-import { hslToRgb } from "@prosopo/puzzle-assets";
+import { hslToRgb } from "@prosopo/puzzle-assets/browser";
 const round = (value) => Math.round(value * 100) / 100;
 const rgb = (hue, saturation, lightness) => {
     const { r, g, b } = hslToRgb(hue, saturation, lightness);