@7365admin1/layer-common 4.94.0 → 4.95.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.95.0
+
+### Minor Changes
+
+- 1456f7a: Vehicle QR stickers: choose a sticker design before printing - QR dot shape, corner shape, colour theme (dark on light only), sticker shape and the words under the plate. Every design is decode-tested; the QR content, size (32 mm), error correction and quiet zone are unchanged. The last choice is remembered in the browser.
+
 ## 4.94.0
 
 ### Minor Changes
@@ -2060,11 +2066,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                    GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                    GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                    owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                    staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/VehicleQrStickerDialog.vue

@@ -76,7 +76,34 @@
             Expired, blocklisted and inactive vehicles start unticked. Each sticker has a cut-off strip under the
             dashed line saying which unit and owner it is for - cut it off before pasting the sticker on the car.
           </p>
-          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview" />
+          <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.
+          </p>
+          <v-row dense data-test="vehicle-qr-design">
+            <v-col cols="12" sm="6" md="4" lg>
+              <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-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-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-select v-model="design.frame" :items="FRAME_OPTIONS" label="Sticker shape" density="compact" hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg>
+              <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>
+          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
 
@@ -114,6 +141,18 @@ import {
   type StickerItem,
   type StickerPlateRow,
 } from "../utils/vehicle-qr-sticker";
+import {
+  DEFAULT_STICKER_DESIGN,
+  DOT_OPTIONS,
+  EYE_OPTIONS,
+  FRAME_OPTIONS,
+  LABEL_OPTIONS,
+  QR_ECC,
+  STICKER_THEMES,
+  normalizeDesign,
+  stickerFaceSvg,
+  type StickerDesign,
+} from "../utils/vehicle-qr-design";
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -143,6 +182,29 @@ const error = ref("");
 const docHtml = ref("");
 const frame = ref<HTMLIFrameElement | null>(null);
 const fromReissue = computed(() => props.vehicleIds.length > 0);
+const siteName = ref("");
+
+// The last design chosen in this browser. Storage can be blocked (private
+// window): then it is simply the standard look each time.
+const DESIGN_KEY = "vehicleQrStickerDesign";
+function loadDesign(): StickerDesign {
+  try {
+    return normalizeDesign(JSON.parse(localStorage.getItem(DESIGN_KEY) || "null"));
+  } catch {
+    return { ...DEFAULT_STICKER_DESIGN };
+  }
+}
+const design = reactive<StickerDesign>(loadDesign());
+watch(design, (d) => {
+  try {
+    localStorage.setItem(DESIGN_KEY, JSON.stringify(d));
+  } catch {
+    /* not saved - nothing else to do */
+  }
+});
+function resetDesign() {
+  Object.assign(design, DEFAULT_STICKER_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)));
@@ -203,6 +265,7 @@ async function goReview() {
     const { ids, dropped: over } = idsForRequest(selected.value);
     const res = await getVehicleQrStickers(props.site, ids);
     items.value = (res?.items ?? []) as StickerItem[];
+    siteName.value = String((res as any)?.site?.name ?? "");
     missing.value = res?.missing ?? [];
     dropped.value = over;
     ticked.value = defaultStickerIds(items.value);
@@ -214,21 +277,25 @@ async function goReview() {
   }
 }
 
-// The same document is the preview and the print job. Error correction Q and a
-// 4-module quiet zone; the QR is drawn at 32 mm so it scans from arm's length.
-let renderToken = 0;
-watch([items, ticked], async () => {
-  const mine = ++renderToken;
-  const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
-  if (!chosen.length) {
-    docHtml.value = "";
-    return;
-  }
-  const svgs = await Promise.all(
-    chosen.map((i) => QRCode.toString(i.qr, { type: "svg", errorCorrectionLevel: "Q", margin: 4 })),
-  );
-  if (mine === renderToken) docHtml.value = buildStickerDocument(chosen, svgs);
-});
+// 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.
+watch(
+  [items, ticked, design, siteName],
+  () => {
+    const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
+    if (!chosen.length) {
+      docHtml.value = "";
+      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 });
+  },
+  { deep: true },
+);
 
 function print() {
   const win = frame.value?.contentWindow;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.94.0",
+  "version": "4.95.0",
   "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

@@ -0,0 +1,268 @@
+/**
+ * Vehicle QR sticker designs - the sticker face (frame + QR) 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.
+ */
+
+export type QrMatrix = { size: number; get(row: number, col: number): number | boolean };
+
+export type DotShape = "square" | "rounded" | "dots";
+export type EyeShape = "square" | "rounded" | "circle";
+export type FrameShape = "rounded" | "square" | "soft" | "arch" | "ticket";
+export type LabelChoice = "app" | "verify" | "site" | "none";
+
+export type StickerTheme = { id: string; title: string; ink: string; eye: string; paper: string };
+
+export type StickerDesign = { dots: DotShape; eyes: EyeShape; theme: string; frame: FrameShape; label: LabelChoice };
+
+export const DOT_OPTIONS: { value: DotShape; title: string }[] = [
+  { value: "square", title: "Squares (classic)" },
+  { value: "rounded", title: "Rounded squares" },
+  { value: "dots", title: "Round dots" },
+];
+
+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 LABEL_OPTIONS: { value: LabelChoice; title: string }[] = [
+  { value: "app", title: "Scan with iSecure365 / iMA365" },
+  { value: "verify", title: "Scan to verify vehicle" },
+  { value: "site", title: "Site name" },
+  { value: "none", title: "No extra words" },
+];
+
+// Dark ink on light paper only - never inverted, never pale. Checked by test.
+export const STICKER_THEMES: StickerTheme[] = [
+  { id: "black", title: "Black on white", ink: "#000000", eye: "#000000", paper: "#ffffff" },
+  { id: "navy", title: "Navy blue", ink: "#0b2545", eye: "#0b2545", paper: "#ffffff" },
+  { id: "navy-red", title: "Navy with red corners", ink: "#0b2545", eye: "#8b1a1a", paper: "#ffffff" },
+  { id: "green", title: "Dark green on mint", ink: "#14462b", eye: "#14462b", paper: "#f2faf4" },
+  { id: "maroon", title: "Maroon on cream", ink: "#5c0f1d", eye: "#5c0f1d", paper: "#fff8ee" },
+  { id: "purple", title: "Deep purple", ink: "#33105c", eye: "#33105c", paper: "#ffffff" },
+  { id: "charcoal", title: "Charcoal on cream", ink: "#222222", eye: "#222222", paper: "#fffbea" },
+];
+
+export const DEFAULT_STICKER_DESIGN: StickerDesign = {
+  dots: "square",
+  eyes: "square",
+  theme: "black",
+  frame: "rounded",
+  label: "app",
+};
+
+/** A saved or typed-in design with anything unknown replaced by the default. */
+export function normalizeDesign(raw: unknown): StickerDesign {
+  const r = (raw && typeof raw === "object" ? raw : {}) as Record<string, unknown>;
+  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;
+  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, FRAME_OPTIONS, d.frame),
+    label: pick(r.label, LABEL_OPTIONS, d.label),
+  };
+}
+
+export function stickerTheme(id: string): StickerTheme {
+  return STICKER_THEMES.find((t) => t.id === id) ?? STICKER_THEMES[0];
+}
+
+/** WCAG relative luminance of "#rrggbb". */
+export function stickerLuminance(hex: string): number {
+  const n = parseInt(hex.slice(1), 16);
+  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * lin(((n >> 16) & 255) / 255) + 0.7152 * lin(((n >> 8) & 255) / 255) + 0.0722 * lin((n & 255) / 255);
+}
+
+export function stickerContrast(a: string, b: string): number {
+  const [hi, lo] = [stickerLuminance(a), stickerLuminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+// ---- geometry (all in mm; the card is 47 x 58) ----------------------------
+
+export const CARD_W = 47;
+export const CARD_H = 58;
+export const QR_MM = 32; // the whole QR including its quiet zone
+export const QUIET_MODULES = 4;
+/** Error correction on every design (no centre logo, so Q stays enough). */
+export const QR_ECC = "Q";
+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 };
+export type Shape = Box | Circle;
+/** 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 {
+  return frame === "arch" ? 7 : 2.5;
+}
+
+function cardBox(frame: FrameShape, inset: number): Box {
+  const x = inset;
+  const w = CARD_W - inset * 2;
+  const h = CARD_H - inset * 2;
+  const r = (v: number) => Math.max(0, v - inset);
+  switch (frame) {
+    case "square":
+      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)] };
+    case "arch":
+      return { t: "box", x, y: x, w, h, r: [w / 2, w / 2, r(3), r(3)] };
+    case "ticket":
+      return { t: "box", x, y: x, w, h, notch: 4 + inset };
+    default:
+      return { t: "box", x, y: x, w, h, r: [r(3), r(3), r(3), r(3)] };
+  }
+}
+
+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[] {
+  const theme = stickerTheme(design.theme);
+  const n = matrix.size;
+  const m = QR_MM / (n + QUIET_MODULES * 2);
+  const ox = (CARD_W - QR_MM) / 2 + QUIET_MODULES * m;
+  const oy = qrTop(design.frame) + QUIET_MODULES * m;
+  const paints: Paint[] = [
+    { shape: cardBox(design.frame, 0), fill: theme.paper },
+    { shape: cardBox(design.frame, 0), hole: cardBox(design.frame, STROKE), 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] });
+
+  for (let row = 0; row < n; row++) {
+    for (let col = 0; col < n; col++) {
+      if (!matrix.get(row, col) || isFinder(n, row, col)) continue;
+      const x = ox + col * m;
+      const y = oy + row * m;
+      if (design.dots === "dots") {
+        paints.push({ shape: { t: "circle", cx: x + m / 2, cy: y + m / 2, r: m * 0.45 }, fill: theme.ink });
+      } else if (design.dots === "rounded") {
+        paints.push({ shape: box(x, y, m, m, m * 0.3), fill: theme.ink });
+      } else {
+        // ponytail: one rect per horizontal run, so adjacent squares never show a hairline seam
+        let end = col;
+        while (end + 1 < n && matrix.get(row, end + 1) && !isFinder(n, row, end + 1)) end++;
+        paints.push({ shape: box(x, y, (end - col + 1) * m, m), 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 });
+    }
+  }
+  return paints;
+}
+
+// ---- drawing ---------------------------------------------------------------
+
+const f = (v: number) => String(Math.round(v * 1000) / 1000);
+
+function boxPath(b: Box): string {
+  const { x, y, w, h } = b;
+  if (b.notch) {
+    const k = b.notch;
+    return (
+      `M${f(x + k)} ${f(y)}H${f(x + w - k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + w)} ${f(y + k)}` +
+      `V${f(y + h - k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + w - k)} ${f(y + h)}` +
+      `H${f(x + k)}A${f(k)} ${f(k)} 0 0 0 ${f(x)} ${f(y + h - k)}` +
+      `V${f(y + k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + k)} ${f(y)}Z`
+    );
+  }
+  const [tl, tr, br, bl] = b.r ?? [0, 0, 0, 0];
+  const arc = (r: number, ex: number, ey: number) => (r ? `A${f(r)} ${f(r)} 0 0 1 ${f(ex)} ${f(ey)}` : "");
+  return (
+    `M${f(x + tl)} ${f(y)}H${f(x + w - tr)}${arc(tr, x + w, y + tr)}` +
+    `V${f(y + h - br)}${arc(br, x + w - br, y + h)}` +
+    `H${f(x + bl)}${arc(bl, x, y + h - bl)}` +
+    `V${f(y + tl)}${arc(tl, x + tl, y)}Z`
+  );
+}
+
+function shapePath(s: Shape): string {
+  if (s.t === "box") return boxPath(s);
+  const { cx, cy, r } = s;
+  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`;
+}
+
+/** The face as one SVG, 47 x 58 mm. Runs of same-colour shapes share one path. */
+export function paintsToSvg(paints: Paint[]): string {
+  const out: string[] = [];
+  let fill = "";
+  let d = "";
+  const flush = () => d && out.push(`<path fill="${fill}" d="${d}"/>`);
+  for (const p of paints) {
+    if (p.hole) {
+      // A ring is its own evenodd path, so its hole never cuts a neighbour.
+      flush();
+      d = "";
+      out.push(`<path fill="${p.fill}" fill-rule="evenodd" d="${shapePath(p.shape)}${shapePath(p.hole)}"/>`);
+      continue;
+    }
+    if (p.fill !== fill) {
+      flush();
+      fill = p.fill;
+      d = "";
+    }
+    d += shapePath(p.shape);
+  }
+  flush();
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CARD_W} ${CARD_H}" width="${CARD_W}mm" height="${CARD_H}mm">` +
+    out.join("") +
+    `</svg>`
+  );
+}
+
+export function stickerFaceSvg(matrix: QrMatrix, design: StickerDesign): string {
+  return paintsToSvg(stickerFacePaints(matrix, design));
+}
+
+/** The words under the plate for this design ("" = none). */
+export function stickerLabel(design: StickerDesign, siteName = ""): string {
+  if (design.label === "none") return "";
+  if (design.label === "verify") return "Scan to verify vehicle";
+  if (design.label === "site") return String(siteName ?? "").trim();
+  return "Scan with iSecure365 / iMA365";
+}

package/utils/vehicle-qr-sticker.ts

@@ -8,6 +8,8 @@
  * pasted on the car.
  */
 
+import { DEFAULT_STICKER_DESIGN, QR_MM, qrTop, stickerLabel, stickerTheme, 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;
 
@@ -146,13 +148,13 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .page { display: grid; grid-template-columns: repeat(${STICKER_COLUMNS}, 47mm); gap: 2mm; justify-content: center; align-content: start; width: 198mm; height: 285mm; margin: 0 auto; break-after: page; }
 .page:last-child { break-after: auto; }
 .cell { width: 47mm; break-inside: avoid; }
-.card { width: 47mm; height: 58mm; border: 0.3mm solid #1a1a1a; border-radius: 3mm; padding: 2mm 2mm 1.6mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
-.qr { width: 32mm; height: 32mm; display: block; }
-.qr svg { width: 100%; height: 100%; display: block; }
+.card { position: relative; width: 47mm; height: 58mm; }
+.face, .face svg { position: absolute; inset: 0; width: 47mm; height: 58mm; display: block; }
+.words { position: absolute; left: 3mm; right: 3mm; bottom: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
 .plate { font-size: 13pt; font-weight: 800; letter-spacing: 0.3mm; line-height: 1.1; }
-.hint { font-size: 5.8pt; color: #333; line-height: 1.2; }
-.brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; color: #222; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
-.mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; background: #111; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
+.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; min-height: 8mm; }
 .cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cut .note { color: #666; font-size: 5.5pt; }
@@ -160,20 +162,29 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 `;
 
 /**
- * One full HTML document: A4 sheets of stickers. `qrSvgs` is parallel to
- * `items` (the QR for each, already drawn). Every value is HTML-escaped - an
- * owner name is typed by a person.
+ * One full HTML document: A4 sheets of stickers. `faceSvgs` is parallel to
+ * `items` (each sticker's frame + QR, already drawn for the chosen design).
+ * Every value is HTML-escaped - an owner or site name is typed by a person.
  */
-export function buildStickerDocument(items: StickerItem[], qrSvgs: string[]): string {
+export function buildStickerDocument(
+  items: StickerItem[],
+  faceSvgs: string[],
+  opts: { design?: StickerDesign; siteName?: string } = {},
+): string {
+  const design = opts.design ?? DEFAULT_STICKER_DESIGN;
+  const { ink } = stickerTheme(design.theme);
+  const label = stickerLabel(design, opts.siteName);
+  const wordsTop = qrTop(design.frame) + QR_MM + 0.8;
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
     return (
-      `<div class="cell"><div class="card">` +
-      `<div class="qr">${qrSvgs[i] ?? ""}</div>` +
+      `<div class="cell"><div class="card" style="color:${ink}">` +
+      `<div class="face">${faceSvgs[i] ?? ""}</div>` +
+      `<div class="words" style="top:${wordsTop}mm">` +
       `<div class="plate">${escapeHtml(item.plateNumber)}</div>` +
-      `<div class="hint">Scan with iSecure365 / iMA365</div>` +
-      `<div class="brand"><span class="mark">7</span>Powered by Seven365</div>` +
-      `</div>` +
+      (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
+      `<div class="brand"><span class="mark" style="background:${ink}">7</span>Powered by Seven365</div>` +
+      `</div></div>` +
       `<div class="cut"><div><b>${escapeHtml(place || "-")}</b></div>` +
       `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div>` +
       `<div class="note">Installer: cut here, then paste on this car</div></div></div>`