@7365admin1/layer-common 4.97.1-staging.501 → 4.97.1-staging.503

package/components/VehicleQrStickerDialog.vue

@@ -78,48 +78,66 @@
           </p>
           <div class="text-subtitle-2 mt-3 mb-1">Sticker design</div>
           <p class="text-caption text-medium-emphasis mb-2">
-            Pick a look for the stickers. Every choice here has been tested to scan with iSecure365 and iMA365, and the
-            QR code stays the same size. Your choice is remembered on this computer.
+            Pick a look for the stickers. Every choice here has been tested to scan with iSecure365 and iMA365. Your
+            choice is remembered on this computer.
           </p>
-          <v-row dense data-test="vehicle-qr-design">
-            <v-col cols="12" sm="6" md="4" lg>
+          <div class="text-body-2 mb-1">QR code shape</div>
+          <p class="text-caption text-medium-emphasis mb-1">
+            In a shaped code the dots fill the whole shape - the real code sits in the middle with a thin white ring round
+            it, and the plate number goes on the dark tag at the bottom.
+          </p>
+          <div class="shape-picker" role="radiogroup" aria-label="QR code shape" data-test="vehicle-qr-shapes">
+            <button v-for="s in shapeThumbs" :key="s.value" type="button" role="radio" class="shape-option"
+              :class="{ 'shape-option--on': design.shape === s.value }" :aria-checked="design.shape === s.value"
+              :data-shape="s.value" @click="design.shape = s.value">
+              <img class="shape-thumb" :src="s.src" alt="" />
+              <span class="text-caption">{{ s.title }}</span>
+            </button>
+          </div>
+          <v-row dense class="mt-2" data-test="vehicle-qr-design">
+            <v-col cols="12" sm="6" md="4">
+              <v-select v-model="design.size" :items="sizeItems" label="Sticker size" density="compact" hide-details
+                data-test="vehicle-qr-size" />
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
+              <v-select v-model="design.frame" :items="frameItems" label="Frame" density="compact" hide-details
+                data-test="vehicle-qr-frame" />
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.dots" :items="DOT_OPTIONS" label="QR dots" density="compact" hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.eyes" :items="EYE_OPTIONS" label="QR corners" density="compact" hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.theme" :items="STICKER_THEMES" item-value="id" label="Colours" density="compact"
                 hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.label" :items="LABEL_OPTIONS" label="Words under the plate" density="compact"
                 hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg="auto" class="d-flex align-center">
-              <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
-            </v-col>
           </v-row>
-          <div class="text-body-2 mt-3 mb-1">Sticker shape</div>
-          <div class="shape-picker" role="radiogroup" aria-label="Sticker shape" data-test="vehicle-qr-shapes">
-            <button v-for="s in shapeThumbs" :key="s.value" type="button" role="radio" class="shape-option"
-              :class="{ 'shape-option--on': design.frame === s.value }" :aria-checked="design.frame === s.value"
-              :data-shape="s.value" @click="design.frame = s.value">
-              <img class="shape-thumb" :src="s.src" alt="" />
-              <span class="text-caption">{{ s.title }}</span>
-            </button>
+          <div class="d-flex align-center flex-wrap">
+            <v-switch v-model="design.cutLines" label="Show cut lines" color="primary" density="compact" hide-details
+              inset class="mt-1 mr-4" data-test="vehicle-qr-cut-lines" />
+            <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
           </div>
-          <v-switch v-model="design.cutLines" label="Show cut lines" color="primary" density="compact" hide-details inset
-            class="mt-1" data-test="vehicle-qr-cut-lines" />
-          <v-alert type="info" variant="tonal" density="compact" class="mt-1" data-test="vehicle-qr-cut-guide">
-            <div class="font-weight-medium">{{ sheetSummary(design.frame) }}.</div>
-            <div>Print at 100% ("Actual size" in the print window), not "Fit to page", so the QR code stays full size.</div>
+          <v-alert type="warning" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-size-info">
+            <div class="font-weight-medium">Sizes - check before you print</div>
+            <ul class="size-list">
+              <li v-for="line in sizeLines" :key="line">{{ line }}</li>
+            </ul>
             <div>
-              How to cut: first cut the sheet into pieces through the middle of the gaps (the small + marks show where),
-              then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
-              or a cutting machine. Cut off the strip with the unit and owner before pasting.
+              Every sheet also has a small "Size check" bar at the bottom that must measure exactly 10 mm with a ruler. If
+              it does not, the printer shrank or stretched the page - print again at 100%.
             </div>
           </v-alert>
+          <v-alert type="info" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-cut-guide">
+            How to cut: first cut the sheet into pieces through the middle of the gaps (the small + marks show where),
+            then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
+            or a cutting machine. Cut off the strip with the unit and owner before pasting.
+          </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
@@ -152,9 +170,11 @@ import {
   defaultStickerIds,
   idsForRequest,
   installerLine,
+  STICKER_QR_MODULES,
   setIds,
-  sheetSummary,
   stickerPlateRows,
+  stickerSizeInfo,
+  stickerSizeLines,
   stickerWarning,
   type StickerItem,
   type StickerPlateRow,
@@ -164,10 +184,12 @@ import {
   DOT_OPTIONS,
   EYE_OPTIONS,
   LABEL_OPTIONS,
-  SHAPE_OPTIONS,
+  QR_SHAPE_OPTIONS,
   QR_ECC,
   STICKER_THEMES,
+  frameOptionsFor,
   normalizeDesign,
+  sizeOptionsFor,
   stickerFaceSvg,
   type StickerDesign,
 } from "../utils/vehicle-qr-design";
@@ -224,17 +246,46 @@ function resetDesign() {
   Object.assign(design, DEFAULT_STICKER_DESIGN);
 }
 
-// A small live picture of every shape in the current dots / corners / colours.
-const sampleCode = QRCode.create("S365V:SamplePreviewToken0000", {
-  errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel,
-}).modules;
+// A small live picture of every QR shape in the current dots / corners / colours.
+const SAMPLE = "S365V:SamplePreviewToken00000";
+const sampleCode = QRCode.create(SAMPLE, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules;
 const shapeThumbs = computed(() => {
   const look = normalizeDesign(design);
-  return SHAPE_OPTIONS.map((o) => ({
-    ...o,
-    src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(stickerFaceSvg(sampleCode, { ...look, frame: o.value, cutLines: false }))}`,
-  }));
+  return QR_SHAPE_OPTIONS.map((o) => {
+    const frame = o.value === "square" ? (look.shape === "square" ? look.frame : "rounded") : "none";
+    const svg = stickerFaceSvg(sampleCode, { ...look, shape: o.value, frame, size: "standard", cutLines: false }, SAMPLE);
+    return { ...o, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` };
+  });
+});
+
+// Picking a shaped code makes the shape the sticker (no card); back to the
+// square brings the standard card. The frame can still be changed after.
+watch(
+  () => design.shape,
+  (now, before) => {
+    if ((now === "square") !== (before === "square")) design.frame = now === "square" ? DEFAULT_STICKER_DESIGN.frame : "none";
+  },
+);
+// A shape change can leave a frame or size that shape does not offer (the badge
+// frame, or a size whose QR would print under 25 mm): fall back to one it does.
+watch(
+  () => [design.shape, design.frame, design.size],
+  () => {
+    const fixed = normalizeDesign(design);
+    if (!sizeOptionsFor(fixed, STICKER_QR_MODULES).some((o) => o.value === fixed.size)) fixed.size = "standard";
+    if (fixed.frame !== design.frame) design.frame = fixed.frame;
+    if (fixed.size !== design.size) design.size = fixed.size;
+  },
+);
+const frameItems = computed(() => frameOptionsFor(design.shape));
+const sizeItems = computed(() => {
+  const look = normalizeDesign(design);
+  return sizeOptionsFor(look, STICKER_QR_MODULES).map((o) => {
+    const info = stickerSizeInfo({ ...look, size: o.value });
+    return { value: o.value, title: `${o.title} - ${Math.round(info.shapeW)} mm wide, QR ${Math.round(info.qrMm)} mm` };
+  });
 });
+const sizeLines = computed(() => stickerSizeLines(normalizeDesign(design)));
 
 const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
 const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
@@ -307,9 +358,9 @@ async function goReview() {
   }
 }
 
-// The same document is the preview and the print job. The QR content, error
-// correction (Q), 4-module quiet zone and 32 mm size are the same on every
-// design; only the look of the dots, corners, colours and frame changes.
+// The same document is the preview and the print job. The QR content and error
+// correction (Q) are the same on every design; the shape, size and look change,
+// and every sheet carries the sizes and a 10 mm size check.
 watch(
   [items, ticked, design, siteName],
   () => {
@@ -319,10 +370,9 @@ watch(
       return;
     }
     const look = normalizeDesign(design);
-    const faces = chosen.map((i) =>
-      stickerFaceSvg(QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules, look),
-    );
-    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value });
+    const codes = chosen.map((i) => QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules);
+    const faces = chosen.map((i, k) => stickerFaceSvg(codes[k], look, i.qr));
+    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value, modules: codes[0].size });
   },
   { deep: true },
 );
@@ -336,6 +386,9 @@ function print() {
 </script>
 
 <style scoped>
+.size-list {
+  margin: 2px 0 4px 18px;
+}
 .shape-picker {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.97.1-staging.501",
+  "version": "4.97.1-staging.503",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

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). */

package/utils/vehicle-qr-sticker.ts

@@ -9,58 +9,118 @@
  */
 
 import {
+  CUT_LINE_GAP,
   DEFAULT_STICKER_DESIGN,
   QR_MM,
-  cardSize,
   isSilhouette,
-  qrTop,
-  silhouetteLayout,
+  stickerGeometry,
   stickerLabel,
   stickerTheme,
-  type FrameShape,
   type StickerDesign,
 } from "./vehicle-qr-design.ts";
 
 /** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
 export const STICKER_MAX_PER_REQUEST = 500;
 
-/** A4 sheet with the classic cards: 4 columns x 4 rows of 47 mm cells. */
-export const STICKER_COLUMNS = 4;
-export const STICKER_ROWS = 4;
-export const STICKERS_PER_PAGE = STICKER_COLUMNS * STICKER_ROWS;
+/** Modules across the sticker QR: "S365V:" + a 22-character token at ECC Q is always version 3. */
+export const STICKER_QR_MODULES = 29;
+
+/** The classic card sheet at Standard size: 4 columns x 4 rows. */
+export const STICKERS_PER_PAGE = 16;
 
 /** Printer margin on every side of the A4 sheet, mm. */
 export const SHEET_MARGIN = 5;
 const PAGE_W = 210 - SHEET_MARGIN * 2;
 const PAGE_H = 297 - SHEET_MARGIN * 2;
+/** Strip at the foot of every sheet: the sizes, the print-at-100% reminder and the 10 mm size check. */
+export const INFO_H = 11;
+/** The size-check bar printed on every sheet, mm. */
+export const SIZE_CHECK_MM = 10;
 
 /**
  * How stickers sit on the A4 sheet. A cell = the sticker + the installer strip
  * under it; `gap` is the empty cutting gap between cells (no ink in it except
- * the small + cut marks in its middle).
+ * the small + cut marks in its middle). As many as fit above the info strip.
  */
 export type SheetLayout = { cols: number; rows: number; cellW: number; cardH: number; stripH: number; gap: number };
 
-export function sheetLayout(frame: FrameShape): SheetLayout {
-  // Cut-out shapes are 62 mm wide: 3 across. Cards stay 4 x 4 = 16.
-  return isSilhouette(frame)
-    ? { cols: 3, rows: 4, cellW: cardSize(frame).w, cardH: cardSize(frame).h, stripH: 10, gap: 4 }
-    : { cols: STICKER_COLUMNS, rows: STICKER_ROWS, cellW: cardSize(frame).w, cardH: cardSize(frame).h, stripH: 11, gap: 3 };
+const mm = (v: number) => Math.round(v * 100) / 100;
+
+export function sheetLayout(design: StickerDesign): SheetLayout {
+  const g = stickerGeometry(design, STICKER_QR_MODULES);
+  const cellW = mm(g.w * g.scale);
+  const cardH = mm(g.h * g.scale);
+  const stripH = 8;
+  const gap = isSilhouette(design.shape) ? 4 : 3;
+  return {
+    cols: Math.max(1, Math.floor((PAGE_W + gap) / (cellW + gap))),
+    rows: Math.max(1, Math.floor((PAGE_H - INFO_H + gap) / (cardH + stripH + gap))),
+    cellW,
+    cardH,
+    stripH,
+    gap,
+  };
 }
 
 export const perSheet = (l: SheetLayout) => l.cols * l.rows;
 
 /** "12 stickers per A4 sheet with 4 mm cutting gaps" */
-export function sheetSummary(frame: FrameShape): string {
-  const l = sheetLayout(frame);
+export function sheetSummary(design: StickerDesign): string {
+  const l = sheetLayout(design);
   return `${perSheet(l)} stickers per A4 sheet with ${l.gap} mm cutting gaps`;
 }
 
+export type StickerSizeInfo = {
+  /** The QR code's data area (what a scanner reads), mm square. */
+  qrMm: number;
+  /** The shape (shaped code) or the card, mm. */
+  shapeW: number;
+  shapeH: number;
+  /** The piece in your hand after cutting (on the grey line when it is shown), mm. */
+  stickerW: number;
+  stickerH: number;
+  perSheet: number;
+  gap: number;
+};
+
+/** Every size the person printing needs to know, before printing. */
+export function stickerSizeInfo(design: StickerDesign, n = STICKER_QR_MODULES): StickerSizeInfo {
+  const g = stickerGeometry(design, n);
+  const l = sheetLayout(design);
+  const cut = design.cutLines !== false ? 2 * CUT_LINE_GAP : 0;
+  const bare = isSilhouette(design.shape) && design.frame === "none";
+  return {
+    qrMm: mm(g.dataMm),
+    shapeW: mm(g.shapeW),
+    shapeH: mm(g.shapeH),
+    // a bare shape is cut round the shape and its plate tag; anything else round the card
+    stickerW: mm((bare ? g.shapeW : g.w * g.scale) + cut),
+    stickerH: mm(g.h * g.scale + cut),
+    perSheet: perSheet(l),
+    gap: l.gap,
+  };
+}
+
+const n1 = (v: number) => String(Math.round(v * 10) / 10);
+
+/** The same size lines in the print preview and at the foot of every sheet. */
+export function stickerSizeLines(design: StickerDesign, n = STICKER_QR_MODULES): string[] {
+  const i = stickerSizeInfo(design, n);
+  const shaped = isSilhouette(design.shape);
+  return [
+    `QR code: ${n1(i.qrMm)} x ${n1(i.qrMm)} mm`,
+    shaped ? `Shape: ${n1(i.shapeW)} x ${n1(i.shapeH)} mm` : `Card: ${n1(i.shapeW)} x ${n1(i.shapeH)} mm`,
+    `Sticker after cutting: ${n1(i.stickerW)} x ${n1(i.stickerH)} mm`,
+    `${i.perSheet} per A4 sheet, ${i.gap} mm gaps`,
+    `Print at 100% ("Actual size") - do not use "Fit to page"`,
+  ];
+}
+
 /** Top-left of the sticker grid inside the printable area, so it sits in the middle of the sheet. */
 function gridOrigin(l: SheetLayout): { x: number; y: number; w: number; h: number } {
   const w = l.cols * l.cellW + (l.cols - 1) * l.gap;
   const h = l.rows * (l.cardH + l.stripH) + (l.rows - 1) * l.gap;
-  return { x: (PAGE_W - w) / 2, y: (PAGE_H - h) / 2, w, h };
+  return { x: mm((PAGE_W - w) / 2), y: mm((PAGE_H - INFO_H - h) / 2), w, h };
 }
 
 /**
@@ -241,18 +301,39 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .hint { font-size: 5.8pt; line-height: 1.2; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
 .brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
 .mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
-.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 1mm; font-size: 6.5pt; line-height: 1.25; color: #111; height: ${l.stripH - 1.2}mm; overflow: hidden; }
+.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 0.8mm; font-size: 6.5pt; line-height: 1.2; color: #111; height: ${l.stripH - 1.2}mm; overflow: hidden; }
 .cut.free { margin-top: 1.6mm; border-top: 0; padding-top: 0; height: ${l.stripH - 1.6}mm; }
 .cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cut .note { color: #666; font-size: 5.5pt; }
+.info { position: absolute; left: 0; right: 0; bottom: 0; height: ${INFO_H}mm; border-top: 0.2mm solid #bbb; padding-top: 1mm; font-size: 6.5pt; line-height: 1.3; color: #333; display: flex; gap: 3mm; align-items: flex-start; }
+.info .sizes { flex: 1; }
+.info b { color: #000; }
+.info .check { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
+.info svg { display: block; margin-top: 0.6mm; }
 @media screen { body { background: #e9e9e9; zoom: 0.75; padding: 4mm 0; } .page { background: #fff; margin-bottom: 4mm; box-shadow: 0 0 2mm rgba(0,0,0,.25); } }
 `;
 }
 
+/**
+ * The foot of every sheet: the sizes, the print-at-100% reminder and a black
+ * bar that must measure exactly 10 mm - if it does not, the printer scaled the page.
+ */
+function sheetInfoHtml(design: StickerDesign, n: number): string {
+  const lines = stickerSizeLines(design, n);
+  const bar = SIZE_CHECK_MM;
+  const ticks = Array.from({ length: bar + 1 }, (_, i) => `<line x1="${i}" y1="${i % 5 ? 1.2 : 0}" x2="${i}" y2="2.4"/>`).join("");
+  return (
+    `<div class="info"><div class="sizes"><b>Sizes:</b> ${lines.slice(0, 4).map(escapeHtml).join(" &middot; ")}` +
+    `<br><b>${escapeHtml(lines[4])}.</b> Installer: cut out each sticker; the strip under it says which car.</div>` +
+    `<div class="check"><b>Size check: this bar must measure ${bar} mm</b>` +
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 0 ${bar + 0.4} 3.4" width="${bar + 0.4}mm" height="3.4mm">` +
+    `<rect x="0" y="2.4" width="${bar}" height="1" fill="#000"/><g stroke="#000" stroke-width="0.15">${ticks}</g></svg></div></div>`
+  );
+}
+
 /** Plate font size (mm) that fits the cut-out shape's plate box. */
-function plateSizeMm(plate: string, boxW: number): number {
+function plateSizeMm(plate: string, boxW: number, max = 4.6): number {
   // bold capitals are about 0.74 em wide, plus 0.3 mm letter spacing each
-  return Math.round(Math.min(4.6, (boxW / Math.max(plate.length, 1) - 0.3) / 0.74) * 100) / 100;
+  return Math.round(Math.min(max, (boxW / Math.max(plate.length, 1) - 0.3) / 0.74) * 100) / 100;
 }
 
 /**
@@ -263,21 +344,25 @@ function plateSizeMm(plate: string, boxW: number): number {
 export function buildStickerDocument(
   items: StickerItem[],
   faceSvgs: string[],
-  opts: { design?: StickerDesign; siteName?: string } = {},
+  opts: { design?: StickerDesign; siteName?: string; modules?: number } = {},
 ): string {
   const design = opts.design ?? DEFAULT_STICKER_DESIGN;
-  const { ink } = stickerTheme(design.theme);
+  const n = opts.modules ?? STICKER_QR_MODULES;
+  const { ink, paper } = stickerTheme(design.theme);
   const label = stickerLabel(design, opts.siteName);
-  const layout = sheetLayout(design.frame);
-  const shape = isSilhouette(design.frame) ? silhouetteLayout(design.frame) : null;
-  const wordsTop = qrTop(design.frame) + QR_MM + 0.8;
+  const layout = sheetLayout(design);
+  const g = stickerGeometry(design, n);
+  const k = g.scale;
+  // Shaped codes: plate (and words) in paper colour on the ink tag at the bottom.
+  const tag = g.band ? { x: mm(g.band.x * k), y: mm(g.band.y * k), w: mm(g.band.w * k), h: mm(g.band.h * k) } : null;
+  const bare = !!tag && design.frame === "none";
+  const wordsTop = mm(((g.qrTop ?? 0) + QR_MM + 0.8) * k);
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
     const plate = escapeHtml(item.plateNumber);
-    // Cut-out shapes: plate (and words) in the box under the QR; no brand line - there is no room.
-    const words = shape
-      ? `<div class="words band" style="left:${shape.band.x}mm;right:auto;top:${shape.band.y}mm;width:${shape.band.w}mm;height:${shape.band.h}mm">` +
-        `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), shape.band.w)}mm">${plate}</div>` +
+    const words = tag
+      ? `<div class="words band" style="left:${tag.x}mm;right:auto;top:${tag.y}mm;width:${tag.w}mm;height:${tag.h}mm;color:${paper}">` +
+        `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), tag.w, 4.6 * k)}mm">${plate}</div>` +
         (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
         `</div>`
       : `<div class="words" style="top:${wordsTop}mm">` +
@@ -290,12 +375,12 @@ export function buildStickerDocument(
       `<div class="face">${faceSvgs[i] ?? ""}</div>` +
       words +
       `</div>` +
-      `<div class="cut${shape ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
-      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div>` +
-      `<div class="note">${shape ? "Installer: cut out the sticker, then paste on this car" : "Installer: cut here, then paste on this car"}</div></div></div>`
+      `<div class="cut${bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div></div>`
     );
   });
   const marks = cropMarksSvg(layout);
-  const pages = stickerPages(cells, perSheet(layout)).map((p) => `<div class="page">${marks}${p.join("")}</div>`);
+  const info = sheetInfoHtml(design, n);
+  const pages = stickerPages(cells, perSheet(layout)).map((p) => `<div class="page">${marks}${p.join("")}${info}</div>`);
   return `<!doctype html><html><head><meta charset="utf-8"><title>Vehicle QR stickers</title><style>${printCss(layout)}</style></head><body>${pages.join("")}</body></html>`;
 }