@7365admin1/layer-common 4.97.1-staging.500 → 4.97.1-staging.502

package/utils/vehicle-qr-design.ts

@@ -1,19 +1,30 @@
 /**
- * Vehicle QR sticker designs - the sticker face (frame + QR) as plain shapes.
+ * Vehicle QR sticker designs - the sticker face as plain shapes.
  *
  * The QR library only gives us the dark/light module grid; we draw it here so
- * the look can change while the code itself does not: same payload, same error
- * correction (Q), a 4-module quiet zone and a 32 mm QR on every design. The
- * shapes are kept as data (`stickerFacePaints`) so the test can draw them to
- * pixels and decode them - every design must still scan. Colours are dark ink
- * on light paper only; the test checks each theme's contrast.
+ * the look can change while the code itself does not: same payload ("S365V:" +
+ * token). Two kinds of sticker:
+ *
+ * - Square (classic): the 32 mm QR (ECC Q, 4-module quiet zone) on a card.
+ * - Shaped QR: the code itself takes the shape (heart, circle, car ...). The
+ *   real QR (same ECC Q) sits in the middle with a thin paper ring round it; the rest
+ *   of the shape is filled with extra modules in the same dot style, so the
+ *   whole shape reads as one QR code. The extra modules are seeded by the token
+ *   (same sticker every print) and can never form the patterns a scanner hunts
+ *   for (no 2 x 2 dark block, so no QR corner; no dark-light-dark-light-dark
+ *   timing run).
+ *
+ * The shapes are kept as data (`stickerFacePaints`) so the tests can draw them
+ * to pixels and decode them - every shape x size x style must still scan.
+ * Colours are dark ink on light paper only; the test checks each theme.
  */
 
 export type QrMatrix = { size: number; get(row: number, col: number): number | boolean };
 
 export type DotShape = "square" | "rounded" | "dots";
-export type EyeShape = "square" | "rounded" | "circle";
-/** Cut-out shapes: the QR sits whole inside, the rest of the shape is a dot pattern. */
+// ponytail: round "circle" corners were dropped - ZBar (a stand-in for phone readers) missed them whenever the sticker was tilted.
+export type EyeShape = "square" | "rounded";
+/** QR shapes other than the classic square: the modules fill this outline. */
 export type SilhouetteShape =
   | "circle"
   | "heart"
@@ -23,8 +34,13 @@ export type SilhouetteShape =
   | "shield"
   | "bubble"
   | "roundsquare"
+  | "blob"
+  | "droplet"
   | "car";
-export type FrameShape = "rounded" | "square" | "soft" | "arch" | "ticket" | SilhouetteShape;
+export type QrShape = "square" | SilhouetteShape;
+/** The card round the QR; "none" = no card - a shaped QR is then the sticker itself. */
+export type FrameShape = "none" | "rounded" | "square" | "soft" | "arch" | "ticket";
+export type SizeChoice = "small" | "standard" | "large";
 export type LabelChoice = "app" | "verify" | "scanme" | "site" | "none";
 
 export type StickerTheme = { id: string; title: string; ink: string; eye: string; paper: string };
@@ -33,7 +49,10 @@ export type StickerDesign = {
   dots: DotShape;
   eyes: EyeShape;
   theme: string;
+  /** The shape of the QR code itself. */
+  shape: QrShape;
   frame: FrameShape;
+  size: SizeChoice;
   label: LabelChoice;
   /** A thin grey line around each sticker to cut along. */
   cutLines?: boolean;
@@ -48,15 +67,6 @@ export const DOT_OPTIONS: { value: DotShape; title: string }[] = [
 export const EYE_OPTIONS: { value: EyeShape; title: string }[] = [
   { value: "square", title: "Square" },
   { value: "rounded", title: "Rounded" },
-  { value: "circle", title: "Circle" },
-];
-
-export const FRAME_OPTIONS: { value: FrameShape; title: string }[] = [
-  { value: "rounded", title: "Rounded corners" },
-  { value: "square", title: "Square corners" },
-  { value: "soft", title: "Extra round" },
-  { value: "arch", title: "Badge (round top)" },
-  { value: "ticket", title: "Ticket (cut corners)" },
 ];
 
 export const SILHOUETTE_OPTIONS: { value: SilhouetteShape; title: string }[] = [
@@ -68,14 +78,45 @@ export const SILHOUETTE_OPTIONS: { value: SilhouetteShape; title: string }[] = [
   { value: "shield", title: "Shield" },
   { value: "bubble", title: "Speech bubble" },
   { value: "roundsquare", title: "Rounded square" },
+  { value: "blob", title: "Blob" },
+  { value: "droplet", title: "Droplet" },
   { value: "car", title: "Car" },
 ];
 
-/** Every shape the user can pick: the cards first, then the cut-out shapes. */
-export const SHAPE_OPTIONS: { value: FrameShape; title: string }[] = [...FRAME_OPTIONS, ...SILHOUETTE_OPTIONS];
+export const QR_SHAPE_OPTIONS: { value: QrShape; title: string }[] = [
+  { value: "square", title: "Square (classic)" },
+  ...SILHOUETTE_OPTIONS,
+];
+
+export const FRAME_OPTIONS: { value: FrameShape; title: string }[] = [
+  { value: "none", title: "None (the shape is the sticker)" },
+  { value: "rounded", title: "Card, rounded corners" },
+  { value: "square", title: "Card, square corners" },
+  { value: "soft", title: "Card, extra round" },
+  { value: "arch", title: "Badge (round top)" },
+  { value: "ticket", title: "Ticket (cut corners)" },
+];
+
+/** The badge's round top would cut into a shaped code, so shaped codes skip it. */
+export function frameOptionsFor(shape: QrShape): { value: FrameShape; title: string }[] {
+  return shape === "square"
+    ? FRAME_OPTIONS.map((o) => (o.value === "none" ? { value: o.value, title: "None (no frame line)" } : o))
+    : FRAME_OPTIONS.filter((o) => o.value !== "arch");
+}
+
+export const SIZE_OPTIONS: { value: SizeChoice; title: string; scale: number }[] = [
+  { value: "small", title: "Small", scale: 0.8 },
+  { value: "standard", title: "Standard", scale: 1 },
+  { value: "large", title: "Large", scale: 1.2 },
+];
+
+export const sizeScale = (size: SizeChoice) => SIZE_OPTIONS.find((o) => o.value === size)?.scale ?? 1;
+
+/** The printed QR code (its data area, without the quiet zone) is never smaller than this. */
+export const MIN_QR_DATA_MM = 25;
 
-export function isSilhouette(frame: unknown): frame is SilhouetteShape {
-  return SILHOUETTE_OPTIONS.some((o) => o.value === frame);
+export function isSilhouette(shape: unknown): shape is SilhouetteShape {
+  return SILHOUETTE_OPTIONS.some((o) => o.value === shape);
 }
 
 export const LABEL_OPTIONS: { value: LabelChoice; title: string }[] = [
@@ -101,7 +142,9 @@ export const DEFAULT_STICKER_DESIGN: StickerDesign = {
   dots: "square",
   eyes: "square",
   theme: "black",
+  shape: "square",
   frame: "rounded",
+  size: "standard",
   label: "app",
   cutLines: true,
 };
@@ -112,11 +155,17 @@ export function normalizeDesign(raw: unknown): StickerDesign {
   const pick = <T extends string>(v: unknown, list: { value: T }[], d: T): T =>
     list.some((o) => o.value === v) ? (v as T) : d;
   const d = DEFAULT_STICKER_DESIGN;
+  // Saved before shaped codes: a cut-out shape was stored as the frame.
+  const legacy = isSilhouette(r.frame) ? r.frame : null;
+  const shape = legacy ?? pick(r.shape, QR_SHAPE_OPTIONS, d.shape);
+  const frame = legacy ? "none" : pick(r.frame, frameOptionsFor(shape), shape === "square" ? d.frame : "none");
   return {
     dots: pick(r.dots, DOT_OPTIONS, d.dots),
     eyes: pick(r.eyes, EYE_OPTIONS, d.eyes),
     theme: STICKER_THEMES.some((t) => t.id === r.theme) ? String(r.theme) : d.theme,
-    frame: pick(r.frame, SHAPE_OPTIONS, d.frame),
+    shape,
+    frame,
+    size: pick(r.size, SIZE_OPTIONS, d.size),
     label: pick(r.label, LABEL_OPTIONS, d.label),
     cutLines: typeof r.cutLines === "boolean" ? r.cutLines : true,
   };
@@ -138,48 +187,50 @@ export function stickerContrast(a: string, b: string): number {
   return (hi + 0.05) / (lo + 0.05);
 }
 
-// ---- geometry (all in mm; the card is 47 x 58) ----------------------------
+// ---- geometry (mm at Standard size; Small / Large scale the whole face) -------
 
 export const CARD_W = 47;
 export const CARD_H = 58;
-export const QR_MM = 32; // the whole QR including its quiet zone
+export const QR_MM = 32; // classic: the whole QR including its quiet zone
 export const QUIET_MODULES = 4;
-/** Error correction on every design (no centre logo, so Q stays enough). */
+/**
+ * Error correction on every design, shaped codes too. H was tried for shapes:
+ * its code needs 33 modules instead of 29, so each module prints ~12% smaller,
+ * and ZBar then missed tilted stickers; Q read 100% on ZXing, jsQR and ZBar.
+ */
 export const QR_ECC = "Q";
+/**
+ * Paper ring between a shaped code and its pattern, in modules. 0 never read;
+ * 1 missed a few tilted large hexagons; 2 is the smallest that read 100%.
+ */
+export const QR_RING = 2;
 const STROKE = 0.35;
 
 /** A rectangle with per-corner radii [tl, tr, br, bl], or concave cut corners. */
 export type Box = { t: "box"; x: number; y: number; w: number; h: number; r?: number[]; notch?: number };
 export type Circle = { t: "circle"; cx: number; cy: number; r: number };
-/** A closed outline, points in mm (the cut-out shapes). */
+/** A closed outline, points in mm (the shapes). */
 export type Poly = { t: "poly"; pts: [number, number][] };
 export type Shape = Box | Circle | Poly;
 /** A filled shape; `hole` is cut out of it (rings, the frame line). */
 export type Paint = { shape: Shape; hole?: Shape; fill: string };
 
-/** Top of the QR on the card: lower on the badge so the round top keeps clear of the code. */
-export function qrTop(frame: FrameShape): number {
-  if (isSilhouette(frame)) return silhouetteLayout(frame).qrTop;
-  return frame === "arch" ? 7 : 2.5;
-}
-
-/** Size of the sticker face in mm. */
-export function cardSize(frame: FrameShape): { w: number; h: number } {
-  return isSilhouette(frame) ? { w: SHAPE_W, h: SHAPE_H } : { w: CARD_W, h: CARD_H };
-}
-
-// ---- cut-out shapes (all in mm; each fits a 62 x 58 box) ---------------------
+// ---- shaped codes (all in mm; each fits a 62 x 58 box at Standard size) ------
 
 export const SHAPE_W = 62;
 export const SHAPE_H = 58;
-/** The 32 mm QR square keeps at least this much paper to the shape's edge, so a slightly-off cut never eats the quiet zone. */
+/** The code + ring keeps at least this much paper to the shape's edge, so a slightly-off cut never reaches the code. */
 export const SHAPE_EDGE_MARGIN = 1;
-/** The box under the QR for the plate number (and the optional words). */
-export const BAND_H = 8.5;
-const BAND_MIN_W = 24;
-const BAND_MAX_W = 36;
-/** Share of the allowed (chessboard) pattern cells that get a dot. */
-const PATTERN_DENSITY = 0.7;
+/** Card round a shaped code (frame other than "none"): this much card on every side. */
+export const FRAME_PAD = 2.5;
+/**
+ * The plate tag: a solid ink box along the bottom of a shaped code, plate number
+ * (and the optional words) in paper colour. The code sits above it; the pattern
+ * fills round it, so the shape stays solid code with a name tag, not a hole.
+ */
+export const PLATE_TAG = { x: 14, y: 50, w: 34, h: 8 };
+/** Chance a pattern cell is tried; after the no-block / no-timing rules about half the cells are dark, like the code. */
+const PATTERN_DENSITY = 0.62;
 
 type Pt = [number, number];
 const MID = SHAPE_W / 2;
@@ -219,8 +270,15 @@ function bezierPts(p0: Pt, c: Pt, p1: Pt, steps = 20): Pt[] {
   });
 }
 
+/** From `tip`, along the tangent, round the circle (cx, cy, r) and back: right half only. */
+function tipAndCircleHalf(tip: Pt, cx: number, cy: number, r: number, endAngle: number, steps = 48): Pt[] {
+  const base = Math.atan2(tip[1] - cy, tip[0] - cx);
+  const tangent = base + Math.acos(r / Math.hypot(tip[0] - cx, tip[1] - cy));
+  return [tip, ...arcPts(cx, cy, r, tangent, endAngle, steps)];
+}
+
 function heartPts(): Pt[] {
-  // Two round lobes and a point; lobes wide enough that the 32 mm QR fits between them.
+  // Two round lobes and a point; lobes wide enough that the code fits between them.
   const c = 11;
   const r = 20;
   const cx = MID + c;
@@ -233,7 +291,7 @@ function heartPts(): Pt[] {
 
 function starPts(): Pt[] {
   // A star badge (seal): 14 short points round a circle. A thin five-point
-  // star has no room for a whole 32 mm code at this size.
+  // star has no room for a code of at least 25 mm at this size.
   const R = SHAPE_H / 2;
   return Array.from({ length: 28 }, (_, i) => {
     const a = -Math.PI / 2 + (i * Math.PI) / 14;
@@ -251,13 +309,31 @@ function bubblePts(): Pt[] {
   return [...box.slice(0, split), ...tail, ...box.slice(split)];
 }
 
+function blobPts(): Pt[] {
+  // A soft, slightly lumpy round shape.
+  const wob = (a: number) => (1 + 0.045 * Math.sin(3 * a + 0.6) + 0.03 * Math.cos(5 * a)) / 1.075;
+  return Array.from({ length: 144 }, (_, i) => {
+    const a = (i * 2 * Math.PI) / 144;
+    return [MID + 30.5 * wob(a) * Math.cos(a), SHAPE_H / 2 + 28.5 * wob(a) * Math.sin(a)] as Pt;
+  });
+}
+
+function dropletPts(): Pt[] {
+  // A water drop, point up.
+  const r = 27.5;
+  const cy = SHAPE_H - r;
+  const half = tipAndCircleHalf([MID, 0.3], MID, cy, r, Math.PI / 2);
+  return mirror(half);
+}
+
 function carPts(): Pt[] {
-  // Front view: roof, windscreen, wing mirrors, body and the two front wheels.
+  // Front view: roof, windscreen, wing mirrors, body and the two front wheels (the plate tag sits between them).
   return mirror([
     [MID, 2.5], [44.5, 2.5], [46.8, 3.2], [47.8, 4.6], [54, 20.5],
     [56, 20.2], [60.6, 19.2], [61.6, 21], [61.4, 23], [59.4, 24.2],
     [60.6, 26], [61.5, 29.5], [61.5, 47], [60.2, 49],
-    [58.5, 49], [58.5, 56.2], [57.6, 57.4], [49.4, 57.4], [48.5, 56.2], [48.5, 49.8], [MID, 49.8],
+    // wheels joined by the bumper line, so the plate tag closes the bottom with no gap to cut round
+    [58.5, 49], [58.5, 56.2], [57.6, 57.4], [MID, 57.4],
   ]);
 }
 
@@ -277,6 +353,8 @@ const SILHOUETTE_BUILDERS: Record<SilhouetteShape, () => Pt[]> = {
     ]),
   bubble: bubblePts,
   roundsquare: () => roundRectPts(2, 0, 58, 58, 14),
+  blob: blobPts,
+  droplet: dropletPts,
   car: carPts,
 };
 
@@ -304,57 +382,156 @@ export function rectInside(pts: Pt[], x: number, y: number, w: number, h: number
   return true;
 }
 
-export type SilhouetteLayout = { pts: Pt[]; qrTop: number; band: { x: number; y: number; w: number; h: number } };
+/** Where the code goes in a shape: `qr` is the code + its paper ring (a square, side `s`); `band` is the plate tag. */
+export type SilhouetteLayout = { pts: Pt[]; qr: { x: number; y: number; s: number }; band: { x: number; y: number; w: number; h: number } };
 const layoutCache = new Map<SilhouetteShape, SilhouetteLayout>();
 
+/** Tops where a code square of side s fits inside the shape and above the plate tag. */
+function fits(pts: Pt[], s: number): number[] {
+  const e = SHAPE_EDGE_MARGIN;
+  const tops: number[] = [];
+  for (let top = e; top + s + e <= PLATE_TAG.y; top += 0.25) {
+    if (rectInside(pts, MID - s / 2 - e, top - e, s + 2 * e, s + 2 * e)) tops.push(top);
+  }
+  return tops;
+}
+
 /**
- * Where the 32 mm QR and the plate box go inside a cut-out shape: the widest
- * plate box that fits, then the middle of the heights where both fit. The QR
- * keeps SHAPE_EDGE_MARGIN of paper to the edge; the plate box 0.5 mm.
+ * The biggest code that fits the shape above the plate tag, keeping
+ * SHAPE_EDGE_MARGIN of paper to the edge. Bigger code = bigger modules =
+ * easier to scan; the pattern fills what is left.
  */
 export function silhouetteLayout(shape: SilhouetteShape): SilhouetteLayout {
   const cached = layoutCache.get(shape);
   if (cached) return cached;
-  const pts = SILHOUETTE_BUILDERS[shape]();
-  const e = SHAPE_EDGE_MARGIN;
-  const x0 = (SHAPE_W - QR_MM) / 2;
-  let best = { w: 0, tops: [] as number[] };
-  for (let top = e; top + QR_MM + BAND_H <= SHAPE_H; top += 0.25) {
-    if (!rectInside(pts, x0 - e, top - e, QR_MM + 2 * e, QR_MM + 2 * e)) continue;
-    let w = BAND_MAX_W;
-    while (w >= BAND_MIN_W && !rectInside(pts, MID - w / 2 - 0.5, top + QR_MM - 0.5, w + 1, BAND_H + 1)) w -= 1;
-    if (w < BAND_MIN_W || w < best.w) continue;
-    if (w > best.w) best = { w, tops: [] };
-    best.tops.push(top);
+  // The whole shape sits above the plate tag (overlapping it 1.5 mm, so shape and tag cut out as one piece).
+  const k = (PLATE_TAG.y + 1.5) / SHAPE_H;
+  const pts = SILHOUETTE_BUILDERS[shape]().map(([x, y]) => [MID + (x - MID) * k, y * k] as Pt);
+  let lo = 10;
+  let hi = PLATE_TAG.y;
+  while (hi - lo > 0.05) {
+    const s = (lo + hi) / 2;
+    if (fits(pts, s).length) lo = s;
+    else hi = s;
   }
-  if (!best.tops.length) throw new Error(`QR does not fit the ${shape} shape`);
-  const top = best.tops[Math.floor(best.tops.length / 2)];
-  const layout = { pts, qrTop: top, band: { x: MID - best.w / 2, y: top + QR_MM, w: best.w, h: BAND_H } };
+  const s = Math.floor(lo * 20) / 20;
+  const tops = fits(pts, s);
+  if (!tops.length) throw new Error(`QR does not fit the ${shape} shape`);
+  const top = tops[Math.floor(tops.length / 2)];
+  const layout = { pts, qr: { x: MID - s / 2, y: top, s }, band: { ...PLATE_TAG } };
   layoutCache.set(shape, layout);
   return layout;
 }
 
-/**
- * Same dots every time for a cell (a fixed hash, no randomness between prints).
- * Dots only sit on every other cell, like a chessboard, so no two ever touch
- * side by side: even blurred, a row of them never joins into the solid bars a
- * scanner takes for a QR corner.
- */
-function patternDot(row: number, col: number): boolean {
-  if ((row + col) % 2 !== 0) return false;
-  let h = Math.imul(row + 1000, 73856093) ^ Math.imul(col + 1000, 19349663);
+/** Everything about where things sit on one sticker face (mm at Standard size; times `scale` on paper). */
+export type StickerGeometry = {
+  scale: number;
+  /** The face (card or shape) - the SVG viewBox. */
+  w: number;
+  h: number;
+  /** Module size and the top-left of the code's first module. */
+  m: number;
+  ox: number;
+  oy: number;
+  /** The QR code on paper: its data area (no quiet zone / ring), mm. */
+  dataMm: number;
+  /** The shape (or card) on paper, mm. */
+  shapeW: number;
+  shapeH: number;
+  /** Shaped codes: outline and plate tag, already placed on the face. */
+  pts?: Pt[];
+  band?: { x: number; y: number; w: number; h: number };
+  /** Classic: top of the 32 mm QR on the card. */
+  qrTop?: number;
+};
+
+export function stickerGeometry(design: StickerDesign, n: number): StickerGeometry {
+  const scale = sizeScale(design.size);
+  if (!isSilhouette(design.shape)) {
+    const m = QR_MM / (n + QUIET_MODULES * 2);
+    const top = design.frame === "arch" ? 7 : 2.5;
+    return {
+      scale, w: CARD_W, h: CARD_H, m,
+      ox: (CARD_W - QR_MM) / 2 + QUIET_MODULES * m, oy: top + QUIET_MODULES * m,
+      dataMm: n * m * scale, shapeW: CARD_W * scale, shapeH: CARD_H * scale, qrTop: top,
+    };
+  }
+  const L = silhouetteLayout(design.shape);
+  const pad = design.frame === "none" ? 0 : FRAME_PAD;
+  const m = L.qr.s / (n + QR_RING * 2);
+  const pts = L.pts.map(([x, y]) => [x + pad, y + pad] as Pt);
+  const xs = pts.map((p) => p[0]);
+  const ys = pts.map((p) => p[1]);
+  return {
+    scale, w: SHAPE_W + 2 * pad, h: SHAPE_H + 2 * pad, m,
+    ox: L.qr.x + pad + QR_RING * m, oy: L.qr.y + pad + QR_RING * m,
+    dataMm: n * m * scale,
+    shapeW: (Math.max(...xs) - Math.min(...xs)) * scale,
+    shapeH: (Math.max(...ys) - Math.min(...ys)) * scale,
+    pts, band: { ...L.band, x: L.band.x + pad, y: L.band.y + pad },
+  };
+}
+
+/** Sizes that keep the printed code at least MIN_QR_DATA_MM. */
+export function sizeOptionsFor(design: StickerDesign, n: number) {
+  return SIZE_OPTIONS.filter((o) => stickerGeometry({ ...design, size: o.value }, n).dataMm >= MIN_QR_DATA_MM - 1e-9);
+}
+
+/** Same number for the same text + cell every time (no randomness between prints). */
+function hashCell(seed: number, row: number, col: number): number {
+  let h = seed ^ Math.imul(row + 1000, 73856093) ^ Math.imul(col + 1000, 19349663);
   h = Math.imul(h ^ (h >>> 16), 0x85ebca6b);
   h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);
-  return ((h ^ (h >>> 16)) >>> 0) / 4294967296 < PATTERN_DENSITY;
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
 }
 
-function cardBox(frame: FrameShape, inset: number): Box {
+function seedOf(text: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 0x01000193);
+  return h >>> 0;
+}
+
+/**
+ * The pattern round a shaped code: cells on the code's grid, whole inside the
+ * outline, off the ring and the plate tag. Placed row by row; a cell stays
+ * light if it would close a 2 x 2 dark block (no solid centre = nothing a
+ * scanner can take for a QR corner or alignment square) or end a
+ * dark-light-dark-light-dark run (a timing line).
+ */
+export function patternCells(g: StickerGeometry, n: number, seed = ""): Set<string> {
+  const { m, ox, oy, pts, band } = g;
+  const cells = new Set<string>();
+  if (!pts || !band) return cells;
+  const s = seedOf(seed);
+  const near = 0.4; // mm of paper kept inside the edge
+  const clear = 0.6; // mm of paper kept round the plate tag
+  const has = (r: number, c: number) => cells.has(`${r},${c}`);
+  for (let row = Math.floor(-oy / m) - 1; oy + row * m < g.h; row++) {
+    for (let col = Math.floor(-ox / m) - 1; ox + col * m < g.w; col++) {
+      if (row >= -QR_RING && row < n + QR_RING && col >= -QR_RING && col < n + QR_RING) continue;
+      if (hashCell(s, row, col) >= PATTERN_DENSITY) continue;
+      const x = ox + col * m;
+      const y = oy + row * m;
+      if (x + m > band.x - clear && x < band.x + band.w + clear && y + m > band.y - clear && y < band.y + band.h + clear) continue;
+      const corners: Pt[] = [[x - near, y - near], [x + m + near, y - near], [x - near, y + m + near], [x + m + near, y + m + near]];
+      if (!corners.every(([px, py]) => pointInPoly(pts, px, py))) continue;
+      if (has(row - 1, col) && has(row, col - 1) && has(row - 1, col - 1)) continue;
+      if (has(row, col - 2) && has(row, col - 4) && !has(row, col - 1) && !has(row, col - 3)) continue;
+      if (has(row - 2, col) && has(row - 4, col) && !has(row - 1, col) && !has(row - 3, col)) continue;
+      cells.add(`${row},${col}`);
+    }
+  }
+  return cells;
+}
+
+function cardBox(frame: FrameShape, inset: number, W = CARD_W, H = CARD_H): Box {
   const x = inset;
-  const w = CARD_W - inset * 2;
-  const h = CARD_H - inset * 2;
+  const w = W - inset * 2;
+  const h = H - inset * 2;
   const r = (v: number) => Math.max(0, v - inset);
   switch (frame) {
     case "square":
+    case "none":
       return { t: "box", x, y: x, w, h, r: [r(0.8), r(0.8), r(0.8), r(0.8)] };
     case "soft":
       return { t: "box", x, y: x, w, h, r: [r(8), r(8), r(8), r(8)] };
@@ -371,42 +548,23 @@ function isFinder(n: number, row: number, col: number): boolean {
   return (row < 7 && col < 7) || (row < 7 && col >= n - 7) || (row >= n - 7 && col < 7);
 }
 
-/** Every shape on the sticker face, painted in order. */
-export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Paint[] {
+/** Every shape on the sticker face, painted in order. `seed` (the payload) picks the pattern round a shaped code. */
+export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign, seed = ""): Paint[] {
   const theme = stickerTheme(design.theme);
   const n = matrix.size;
-  const m = QR_MM / (n + QUIET_MODULES * 2);
-  const ox = (cardSize(design.frame).w - QR_MM) / 2 + QUIET_MODULES * m;
-  const oy = qrTop(design.frame) + QUIET_MODULES * m;
+  const g = stickerGeometry(design, n);
+  const { m, ox, oy } = g;
   const paints: Paint[] = [];
-  if (isSilhouette(design.frame)) {
-    const { pts, band } = silhouetteLayout(design.frame);
-    paints.push({ shape: { t: "poly", pts }, fill: theme.paper });
-    // The rest of the shape: small round dots on the QR's grid, kept off the
-    // quiet zone, the plate box and the edge. Small separate dots never join
-    // into the solid bars a scanner looks for in a QR corner.
-    const near = 0.4; // mm of paper kept inside the edge
-    const clear = 1.2; // mm of paper kept round the plate box
-    const clearRing = QUIET_MODULES + 3; // pattern starts three modules beyond the quiet zone
-    for (let row = Math.floor(-oy / m) - 1; oy + row * m < SHAPE_H; row++) {
-      for (let col = Math.floor(-ox / m) - 1; ox + col * m < SHAPE_W; col++) {
-        if (row >= -clearRing && row < n + clearRing && col >= -clearRing && col < n + clearRing) continue;
-        if (!patternDot(row, col)) continue;
-        const x = ox + col * m;
-        const y = oy + row * m;
-        if (x + m > band.x - clear && x < band.x + band.w + clear && y + m > band.y - clear && y < band.y + band.h + clear) continue;
-        const corners: Pt[] = [[x - near, y - near], [x + m + near, y - near], [x - near, y + m + near], [x + m + near, y + m + near]];
-        if (!corners.every(([px, py]) => pointInPoly(pts, px, py))) continue;
-        paints.push({ shape: { t: "circle", cx: x + m / 2, cy: y + m / 2, r: m * 0.28 }, fill: theme.ink });
-      }
-    }
+  if (g.pts && design.frame === "none") {
+    paints.push({ shape: { t: "poly", pts: g.pts }, fill: theme.paper });
   } else {
-    paints.push(
-      { shape: cardBox(design.frame, 0), fill: theme.paper },
-      { shape: cardBox(design.frame, 0), hole: cardBox(design.frame, STROKE), fill: theme.ink },
-    );
+    paints.push({ shape: cardBox(design.frame, 0, g.w, g.h), fill: theme.paper });
+    if (design.frame !== "none") {
+      paints.push({ shape: cardBox(design.frame, 0, g.w, g.h), hole: cardBox(design.frame, STROKE, g.w, g.h), fill: theme.ink });
+    }
   }
   const box = (x: number, y: number, w: number, h: number, rad = 0): Box => ({ t: "box", x, y, w, h, r: [rad, rad, rad, rad] });
+  if (g.band) paints.push({ shape: box(g.band.x, g.band.y, g.band.w, g.band.h, 2), fill: theme.ink });
 
   // Round dots break the small alignment square (bottom right) into a ring of
   // separate dots that some readers miss, so with dots it is drawn solid.
@@ -415,9 +573,17 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Pain
   const align = design.dots === "dots" && version >= 2 && version <= 6 ? n - 7 : -1;
   const inAlign = (row: number, col: number) => align > 0 && Math.abs(row - align) <= 2 && Math.abs(col - align) <= 2;
 
-  for (let row = 0; row < n; row++) {
-    for (let col = 0; col < n; col++) {
-      if (!matrix.get(row, col) || isFinder(n, row, col) || inAlign(row, col)) continue;
+  const pattern = patternCells(g, n, seed);
+  const inCode = (row: number, col: number) => row >= 0 && col >= 0 && row < n && col < n;
+  const dark = (row: number, col: number) =>
+    inCode(row, col) ? !!matrix.get(row, col) && !isFinder(n, row, col) && !inAlign(row, col) : pattern.has(`${row},${col}`);
+  const [r0, r1, c0, c1] = g.pts
+    ? [Math.floor(-oy / m) - 1, Math.ceil((g.h - oy) / m), Math.floor(-ox / m) - 1, Math.ceil((g.w - ox) / m)]
+    : [0, n - 1, 0, n - 1];
+
+  for (let row = r0; row <= r1; row++) {
+    for (let col = c0; col <= c1; col++) {
+      if (!dark(row, col)) continue;
       const x = ox + col * m;
       const y = oy + row * m;
       if (design.dots === "dots") {
@@ -426,30 +592,23 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Pain
         // ponytail: one rect per horizontal run, so adjacent squares never show a hairline seam
         // (rounded: a run is one pill, no notches between neighbours for a camera to trip on)
         let end = col;
-        while (end + 1 < n && matrix.get(row, end + 1) && !isFinder(n, row, end + 1) && !inAlign(row, end + 1)) end++;
+        while (end + 1 <= c1 && dark(row, end + 1)) end++;
         paints.push({ shape: box(x, y, (end - col + 1) * m, m, design.dots === "rounded" ? m * 0.3 : 0), fill: theme.ink });
         col = end;
       }
     }
   }
 
-  for (const [r0, c0] of [[0, 0], [0, n - 7], [n - 7, 0]]) {
-    const x = ox + c0 * m;
-    const y = oy + r0 * m;
-    if (design.eyes === "circle") {
-      const cx = x + 3.5 * m;
-      const cy = y + 3.5 * m;
-      paints.push({ shape: { t: "circle", cx, cy, r: 3.5 * m }, hole: { t: "circle", cx, cy, r: 2.5 * m }, fill: theme.eye });
-      paints.push({ shape: { t: "circle", cx, cy, r: 1.5 * m }, fill: theme.eye });
-    } else {
-      const round = design.eyes === "rounded";
-      paints.push({
-        shape: box(x, y, 7 * m, 7 * m, round ? 2 * m : 0),
-        hole: box(x + m, y + m, 5 * m, 5 * m, round ? 1.2 * m : 0),
-        fill: theme.eye,
-      });
-      paints.push({ shape: box(x + 2 * m, y + 2 * m, 3 * m, 3 * m, round ? 0.9 * m : 0), fill: theme.eye });
-    }
+  for (const [fr, fc] of [[0, 0], [0, n - 7], [n - 7, 0]]) {
+    const x = ox + fc * m;
+    const y = oy + fr * m;
+    const round = design.eyes === "rounded";
+    paints.push({
+      shape: box(x, y, 7 * m, 7 * m, round ? 2 * m : 0),
+      hole: box(x + m, y + m, 5 * m, 5 * m, round ? 1.2 * m : 0),
+      fill: theme.eye,
+    });
+    paints.push({ shape: box(x + 2 * m, y + 2 * m, 3 * m, 3 * m, round ? 0.9 * m : 0), fill: theme.eye });
   }
   if (align > 0) {
     const x = ox + (align - 2) * m;
@@ -492,24 +651,29 @@ function shapePath(s: Shape): string {
   return `M${f(cx - r)} ${f(cy)}A${f(r)} ${f(r)} 0 1 0 ${f(cx + r)} ${f(cy)}A${f(r)} ${f(r)} 0 1 0 ${f(cx - r)} ${f(cy)}Z`;
 }
 
-/** Gap between the sticker's edge and its grey cut line, mm. */
+/** Gap between the sticker's edge and its grey cut line, mm on paper. */
 export const CUT_LINE_GAP = 1;
 
 /**
- * The face as one SVG (47 x 58 mm card, 62 x 58 mm cut-out shape). Runs of
- * same-colour shapes share one path. `cutLine` adds a thin grey line
- * CUT_LINE_GAP outside the edge: a wide grey stroke under a white one, so it
- * follows any outline, with rounded corners that are easy to cut.
+ * The face as one SVG. `w` x `h` is the drawing (mm at Standard size), printed
+ * `scale` times that. Runs of same-colour shapes share one path. `cutLine` adds
+ * a thin grey line CUT_LINE_GAP outside the edge: a wide grey stroke under a
+ * white one, so it follows any outline, with rounded corners that are easy to cut.
  */
-export function paintsToSvg(paints: Paint[], opts: { w?: number; h?: number; cutLine?: boolean } = {}): string {
+export function paintsToSvg(
+  paints: Paint[],
+  opts: { w?: number; h?: number; scale?: number; cutLine?: boolean; cutShapes?: Shape[] } = {},
+): string {
   const w = opts.w ?? CARD_W;
   const h = opts.h ?? CARD_H;
+  const k = opts.scale ?? 1;
   const out: string[] = [];
   if (opts.cutLine && paints[0]) {
-    const edge = shapePath(paints[0].shape);
+    // One outline round everything listed (a shaped code + its plate tag), drawn under the fills.
+    const edge = (opts.cutShapes ?? [paints[0].shape]).map(shapePath).join("");
     out.push(
-      `<path fill="none" stroke="#8c8c8c" stroke-linejoin="round" stroke-width="${f(CUT_LINE_GAP * 2 + 0.5)}" d="${edge}"/>`,
-      `<path fill="none" stroke="#ffffff" stroke-linejoin="round" stroke-width="${f(CUT_LINE_GAP * 2)}" d="${edge}"/>`,
+      `<path fill="none" stroke="#8c8c8c" stroke-linejoin="round" stroke-width="${f((CUT_LINE_GAP * 2 + 0.5) / k)}" d="${edge}"/>`,
+      `<path fill="none" stroke="#ffffff" stroke-linejoin="round" stroke-width="${f((CUT_LINE_GAP * 2) / k)}" d="${edge}"/>`,
     );
   }
   let fill = "";
@@ -532,14 +696,18 @@ export function paintsToSvg(paints: Paint[], opts: { w?: number; h?: number; cut
   }
   flush();
   return (
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}mm" height="${h}mm" overflow="visible">` +
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${f(w * k)}mm" height="${f(h * k)}mm" overflow="visible">` +
     out.join("") +
     `</svg>`
   );
 }
 
-export function stickerFaceSvg(matrix: QrMatrix, design: StickerDesign): string {
-  return paintsToSvg(stickerFacePaints(matrix, design), { ...cardSize(design.frame), cutLine: design.cutLines !== false });
+export function stickerFaceSvg(matrix: QrMatrix, design: StickerDesign, seed = ""): string {
+  const g = stickerGeometry(design, matrix.size);
+  const paints = stickerFacePaints(matrix, design, seed);
+  // A shaped code with no card is cut round the shape and its plate tag together.
+  const cutShapes = g.pts && design.frame === "none" ? [paints[0].shape, paints[1].shape] : undefined;
+  return paintsToSvg(paints, { w: g.w, h: g.h, scale: g.scale, cutLine: design.cutLines !== false, cutShapes });
 }
 
 /** The words under the plate for this design ("" = none). */