@7365admin1/layer-common 4.110.2 → 4.111.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.111.0
+
+### Minor Changes
+
+- 0ba99c0: Vehicle QR blank (pre-generated) stickers: the Print QR stickers dialog gets "Blank stickers (link later)" (count 1-500, same designs, shapes, sizes, print / save sheet / PNG-JPEG; the printed code sits in the plate slot with a cut-off "not linked yet" strip), and each vehicle row gets "Link QR sticker" (type the printed code - case, spaces and dashes ignored; replace confirm when the vehicle already has a sticker) and "Remove QR sticker". useVehicle: getBlankVehicleQrStickers, linkVehicleQr, unlinkVehicleQr.
+
 ## 4.110.2
 
 ### Patch Changes

package/components/VehicleManagement.vue

@@ -101,6 +101,10 @@
                 </v-list-subheader>
                 <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
                   @click="askReissue(plate as TPlateNumber)" />
+                <v-list-item v-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                  @click="askLink(plate as TPlateNumber)" />
+                <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                  @click="askUnlink(plate as TPlateNumber)" />
                 <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
                   :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
                   @click="runVehicleAction(action.key, plate as TPlateNumber)" />
@@ -227,6 +231,10 @@
                           <v-list density="compact">
                             <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
                               @click="askReissue(plateNumberItem as TPlateNumber)" />
+                            <v-list-item v-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                              @click="askLink(plateNumberItem as TPlateNumber)" />
+                            <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                              @click="askUnlink(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
                               :key="action.key" :title="action.title" :prepend-icon="action.icon"
@@ -371,6 +379,48 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <v-dialog v-model="dialog.qrLink" width="460">
+      <v-card data-test="vehicle-qr-link-dialog">
+        <v-card-title>Link QR sticker</v-card-title>
+        <v-card-text>
+          Type the code printed on the sticker. It will show {{ qrPlate?.plateNumber }} when scanned.
+          <v-text-field v-model="qrLinkCode" label="Sticker code" placeholder="ABCD-EFGH-JKMN-PQRS-TVWX-YZ01" density="compact"
+            variant="outlined" class="mt-3" autofocus :disabled="qrBusy" :hint="qrLinkHint" persistent-hint
+            data-test="vehicle-qr-link-code" @keyup.enter="confirmLink(false)" />
+          <v-alert v-if="qrLinkAskReplace" type="warning" variant="tonal" density="compact" class="mt-3">
+            {{ qrError }} Link it anyway?
+          </v-alert>
+          <v-alert v-else-if="qrError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrLink = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrBusy" :disabled="!qrLinkCode.trim()"
+            data-test="vehicle-qr-link-go" @click="confirmLink(qrLinkAskReplace)">
+            {{ qrLinkAskReplace ? "Link and stop the old sticker" : "Link" }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialog.qrUnlink" width="460">
+      <v-card data-test="vehicle-qr-unlink-dialog">
+        <v-card-title>Remove QR sticker?</v-card-title>
+        <v-card-text>
+          The QR sticker on {{ qrPlate?.plateNumber }} will stop working. Scanning it will no longer show this vehicle.
+          <v-alert v-if="qrError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrUnlink = false">Cancel</v-btn>
+          <v-btn color="error" variant="flat" class="text-none" :loading="qrBusy" data-test="vehicle-qr-unlink-go"
+            @click="confirmUnlink">
+            Remove
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -389,6 +439,7 @@ import {
 // `error.message` put ofetch's own developer string in the delete dialog:
 // `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`.
 import { errorConverter } from '../utils/data';
+import { stickerCodeHint } from '../utils/vehicle-qr-blank';
 import { isPermissionRefusalError } from '../utils/permission-refusal';
 
 
@@ -490,7 +541,7 @@ const activeTab = ref<TVehicleTab>("residents");
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr, linkVehicleQr, unlinkVehicleQr } = useVehicle();
 
 // Vehicle QR stickers: the site's switch (Settings) decides whether the print
 // and re-issue actions exist; only people who may update vehicles get them.
@@ -510,6 +561,63 @@ async function loadQrSetting() {
 }
 onMounted(loadQrSetting);
 
+// Link a blank (pre-printed) sticker to a vehicle, or take a sticker off one.
+const qrPlate = ref<TPlateNumber | null>(null);
+const qrLinkCode = ref("");
+const qrLinkAskReplace = ref(false);
+const qrBusy = ref(false);
+const qrError = ref("");
+// a gentle hint once something is typed, never a block - the server has the final say
+const qrLinkHint = computed(() => (qrLinkCode.value.trim() ? stickerCodeHint(qrLinkCode.value) : ""));
+
+function askLink(plate: TPlateNumber) {
+  qrPlate.value = plate || null;
+  qrLinkCode.value = "";
+  qrLinkAskReplace.value = false;
+  qrError.value = "";
+  dialog.qrLink = true;
+}
+
+async function confirmLink(replace: boolean) {
+  const id = qrPlate.value?._id;
+  if (!id || !qrLinkCode.value.trim()) return;
+  qrBusy.value = true;
+  qrError.value = "";
+  try {
+    await linkVehicleQr(qrLinkCode.value.trim(), String(id), replace);
+    dialog.qrLink = false;
+    showMessage(`QR sticker linked to ${qrPlate.value?.plateNumber}`, "success");
+  } catch (e: any) {
+    qrError.value = errorConverter(e);
+    // the vehicle already has a sticker: ask, then resend with replace
+    qrLinkAskReplace.value = !replace && /already has a QR sticker/i.test(qrError.value);
+  } finally {
+    qrBusy.value = false;
+  }
+}
+
+function askUnlink(plate: TPlateNumber) {
+  qrPlate.value = plate || null;
+  qrError.value = "";
+  dialog.qrUnlink = true;
+}
+
+async function confirmUnlink() {
+  const id = qrPlate.value?._id;
+  if (!id) return;
+  qrBusy.value = true;
+  qrError.value = "";
+  try {
+    await unlinkVehicleQr(String(id));
+    dialog.qrUnlink = false;
+    showMessage(`QR sticker removed from ${qrPlate.value?.plateNumber}`, "success");
+  } catch (e: any) {
+    qrError.value = errorConverter(e);
+  } finally {
+    qrBusy.value = false;
+  }
+}
+
 function openStickerDialog(ids: string[] = []) {
   qrVehicleIds.value = ids;
   dialog.qrStickers = true;
@@ -622,6 +730,8 @@ const dialog = reactive({
   bulkVehicle: false,
   qrStickers: false,
   qrReissue: false,
+  qrLink: false,
+  qrUnlink: false,
 });
 
 

package/components/VehicleQrStickerDialog.vue

@@ -13,7 +13,22 @@
 
         <!-- Step 1: choose vehicles -->
         <template v-if="step === 'select'">
-          <div class="d-flex flex-wrap align-center ga-2 mb-2">
+          <v-btn-toggle v-model="mode" mandatory density="compact" color="primary" variant="outlined" divided class="mb-3"
+            data-test="vehicle-qr-mode">
+            <v-btn value="vehicles" class="text-none" data-test="vehicle-qr-mode-vehicles">For vehicles</v-btn>
+            <v-btn value="blank" class="text-none" data-test="vehicle-qr-mode-blank">Blank stickers (link later)</v-btn>
+          </v-btn-toggle>
+          <div v-if="mode === 'blank'" data-test="vehicle-qr-blank">
+            <p class="text-body-2 mb-3">
+              Make QR stickers before you know which car each is for. Each sticker has its own code printed on it. Paste it
+              on a car, then link it to that vehicle in Vehicles &gt; Link QR sticker - or scan it with iMA365 / iSecure365
+              and pick the vehicle there. Until it is linked, scanning it shows "not linked yet".
+            </p>
+            <v-text-field v-model.number="blankQty" type="number" :min="1" :max="BLANK_MAX_COUNT" label="How many stickers?"
+              density="compact" variant="outlined" style="max-width: 240px" :hint="`1 to ${BLANK_MAX_COUNT} at a time`"
+              persistent-hint data-test="vehicle-qr-blank-count" />
+          </div>
+          <div v-if="mode === 'vehicles'" class="d-flex flex-wrap align-center ga-2 mb-2">
             <v-checkbox-btn :model-value="allOnPageTicked" :indeterminate="someOnPageTicked && !allOnPageTicked"
               aria-label="Select all on this page" @update:model-value="(v: any) => tickGroup(plates.map((p) => p.id), !!v)" />
             <span class="text-body-2">Select all on this page</span>
@@ -22,7 +37,7 @@
               Select all matching the current tab and search
             </v-btn>
           </div>
-          <v-table density="compact" fixed-header height="360">
+          <v-table v-if="mode === 'vehicles'" density="compact" fixed-header height="360">
             <thead>
               <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Status</th></tr>
             </thead>
@@ -38,7 +53,7 @@
               <tr v-if="!plates.length"><td colspan="5" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
             </tbody>
           </v-table>
-          <p class="text-caption text-medium-emphasis mt-2 mb-0">
+          <p v-if="mode === 'vehicles'" class="text-caption text-medium-emphasis mt-2 mb-0">
             Up to {{ STICKER_MAX_PER_REQUEST }} stickers at a time. Ticked: {{ selected.length }}.
           </p>
         </template>
@@ -53,12 +68,18 @@
           </v-alert>
           <v-table density="compact" fixed-header height="220">
             <thead>
-              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Check</th></tr>
+              <tr v-if="isBlank"><th style="width: 48px" /><th>Code</th><th>Note</th></tr>
+              <tr v-else><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Check</th></tr>
             </thead>
             <tbody>
               <tr v-for="it in items" :key="it.vehicleId">
                 <td><v-checkbox-btn :model-value="ticked.includes(it.vehicleId)" :aria-label="`Print ${it.plateNumber}`"
                     @update:model-value="(v: any) => (ticked = setIds(ticked, [it.vehicleId], !!v))" /></td>
+                <template v-if="isBlank">
+                  <td class="font-weight-bold">{{ it.plateNumber }}</td>
+                  <td class="text-medium-emphasis">{{ BLANK_STRIP_NOTE }}</td>
+                </template>
+                <template v-else>
                 <td>{{ installerLine(it).place || "-" }}</td>
                 <td>{{ installerLine(it).owner || "-" }}</td>
                 <td class="font-weight-bold">{{ it.plateNumber }}</td>
@@ -69,10 +90,20 @@
                   </v-chip>
                   <span v-else class="text-medium-emphasis">OK</span>
                 </td>
+                </template>
               </tr>
             </tbody>
           </v-table>
-          <p class="text-caption text-medium-emphasis my-2">
+          <v-alert v-if="isBlank && design.shape !== 'square' && design.text === 'none'" type="warning" variant="tonal"
+            density="compact" class="my-2" data-test="vehicle-qr-blank-notext">
+            With "No text" the sticker's code is not printed on it, so these stickers can only be linked by scanning them with
+            iMA365 / iSecure365 - Vehicles &gt; Link QR sticker needs the printed code. Pick another Text option to print it.
+          </v-alert>
+          <p v-if="isBlank" class="text-caption text-medium-emphasis my-2">
+            Each sticker has a cut-off strip under the dashed line saying it is not linked yet - cut it off before pasting
+            the sticker on the car. The code on the sticker is what you type in Vehicles &gt; Link QR sticker.
+          </p>
+          <p v-else class="text-caption text-medium-emphasis my-2">
             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>
@@ -157,9 +188,10 @@
         <v-btn v-if="step === 'review' && !fromReissue" variant="text" class="text-none" @click="step = 'select'">Back</v-btn>
         <v-spacer />
         <v-btn variant="text" class="text-none" @click="close(false)">Cancel</v-btn>
-        <v-btn v-if="step === 'select'" color="primary" variant="flat" class="text-none" :disabled="!selected.length"
-          :loading="loading" @click="goReview">
-          Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}
+        <v-btn v-if="step === 'select'" color="primary" variant="flat" class="text-none"
+          :disabled="mode === 'blank' ? !blankCount(blankQty) : !selected.length" :loading="loading" @click="goReview">
+          <template v-if="mode === 'blank'">Preview {{ blankCount(blankQty) }} blank sticker{{ blankCount(blankQty) === 1 ? "" : "s" }}</template>
+          <template v-else>Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}</template>
         </v-btn>
         <template v-if="step === 'review'">
           <v-btn variant="tonal" class="text-none" prepend-icon="mdi-content-save" :disabled="!ticked.length || !docHtml"
@@ -192,6 +224,7 @@
 <script lang="ts" setup>
 import QRCode from "qrcode";
 import useVehicle from "../composables/useVehicle";
+import { BLANK_DEFAULT_COUNT, BLANK_MAX_COUNT, BLANK_STRIP_NOTE, blankCount, blankStickerItems } from "../utils/vehicle-qr-blank";
 import { errorConverter } from "../utils/data";
 import { saveFile, stickerBundleName, stickerFileNames, svgToImage, zipFiles, type ImageFormat } from "../utils/vehicle-qr-export";
 import {
@@ -240,7 +273,12 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 
-const { getVehicles, getVehicleQrStickers } = useVehicle();
+const { getVehicles, getVehicleQrStickers, getBlankVehicleQrStickers } = useVehicle();
+
+// "vehicles" = stickers for chosen vehicles; "blank" = codes made in advance, linked to a vehicle later.
+const mode = ref<"vehicles" | "blank">("vehicles");
+const blankQty = ref<number | string>(BLANK_DEFAULT_COUNT);
+const isBlank = ref(false); // the mode the shown review was made in
 
 const step = ref<"select" | "review">("select");
 const plates = ref<StickerPlateRow[]>([]);
@@ -339,6 +377,8 @@ watch(
     items.value = [];
     docHtml.value = "";
     step.value = "select";
+    mode.value = "vehicles";
+    isBlank.value = false;
     plates.value = stickerPlateRows(props.rows);
     selected.value = defaultPlateIds(plates.value);
     if (props.vehicleIds.length) {
@@ -376,6 +416,18 @@ async function goReview() {
   loading.value = true;
   error.value = "";
   try {
+    if (mode.value === "blank" && !props.vehicleIds.length) {
+      const blank = await getBlankVehicleQrStickers(props.site, blankCount(blankQty.value));
+      items.value = blankStickerItems(blank?.items ?? []);
+      siteName.value = String(blank?.site?.name ?? "");
+      missing.value = [];
+      dropped.value = 0;
+      ticked.value = items.value.map((i) => i.vehicleId);
+      isBlank.value = true;
+      step.value = "review";
+      return;
+    }
+    isBlank.value = false;
     const { ids, dropped: over } = idsForRequest(selected.value);
     const res = await getVehicleQrStickers(props.site, ids);
     items.value = (res?.items ?? []) as StickerItem[];

package/composables/useVehicle.ts

@@ -306,6 +306,27 @@ function getSpecificVehicleById(id: string){
     );
   }
 
+  // Blank (pre-generated) stickers: print codes first, link them to vehicles later.
+  function getBlankVehicleQrStickers(site: string, count: number) {
+    return useNuxtApp().$api<{
+      site: { _id: string; name: string };
+      items: Array<{ token: string; qr: string; code: string }>;
+    }>("/api/vehicles/qr/blank-stickers", { method: "POST", body: { site, count } });
+  }
+
+  // `token` is sent as typed - the server ignores case, spaces and dashes.
+  function linkVehicleQr(token: string, vehicleId: string, replace?: boolean) {
+    return useNuxtApp().$api<Record<string, any>>("/api/vehicles/qr/link", {
+      method: "POST",
+      body: { token, vehicleId, ...(replace ? { replace: true } : {}) },
+    });
+  }
+
+  function unlinkVehicleQr(id: string) {
+    return useNuxtApp().$api<{ vehicleId: string; linked: boolean }>(`/api/vehicles/qr/unlink/id/${id}`, {
+      method: "PUT",
+    });
+  }
 
   return {
     getVehicles,
@@ -330,5 +351,8 @@ function getSpecificVehicleById(id: string){
     setVehicleQrSettings,
     getVehicleQrStickers,
     regenerateVehicleQr,
+    getBlankVehicleQrStickers,
+    linkVehicleQr,
+    unlinkVehicleQr,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.110.2",
+  "version": "4.111.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-blank.ts

@@ -0,0 +1,54 @@
+/**
+ * Blank (pre-generated) vehicle QR stickers - the pure parts: turn the
+ * server's blank codes into sticker items, and check a code typed by staff.
+ * Kept free of Vue so `node --test` can run it.
+ */
+
+import type { StickerItem } from "./vehicle-qr-sticker.ts";
+
+/** Most blank stickers per request (server: POST /api/vehicles/qr/blank-stickers). */
+export const BLANK_MAX_COUNT = 500;
+export const BLANK_DEFAULT_COUNT = 20;
+/** Characters in a blank sticker token (Crockford base32, 120 bits). */
+export const BLANK_TOKEN_LENGTH = 24;
+
+/** What the installer strip says under a blank sticker. */
+export const BLANK_STRIP_NOTE = "Not linked yet - link it in Vehicles > Link QR sticker, or scan it with iMA365 / iSecure365";
+
+export type BlankItem = { token: string; qr: string; code: string };
+
+/** A whole number 1..500, or 0 when the field is empty or not a number. */
+export function blankCount(value: unknown): number {
+  const n = Math.floor(Number(value));
+  return Number.isFinite(n) && n >= 1 ? Math.min(n, BLANK_MAX_COUNT) : 0;
+}
+
+/** Sticker items for the normal sticker flow: token = the unique key, the code is printed in the plate slot. */
+export function blankStickerItems(items: BlankItem[]): StickerItem[] {
+  return items.map((i) => ({ vehicleId: i.token, qr: i.qr, token: i.token, plateNumber: i.code, status: "active", blank: true }));
+}
+
+/** What staff type, as the server reads it: no spaces or dashes, capitals, I/L as 1, O as 0. A pasted "S365V:" is ignored. */
+export function normalizeStickerCode(input: unknown): string {
+  return String(input ?? "")
+    .replace(/^\s*S365V:/i, "")
+    .replace(/[^0-9A-Za-z]/g, "")
+    .toUpperCase()
+    .replace(/[IL]/g, "1")
+    .replace(/O/g, "0");
+}
+
+/** "" when the typed code looks right, else a gentle hint (the server has the final say). */
+export function stickerCodeHint(input: unknown): string {
+  const code = normalizeStickerCode(input);
+  if (code.length === BLANK_TOKEN_LENGTH && /^[0-9A-HJKMNP-TV-Z]+$/.test(code)) return "";
+  return "Sticker codes look like ABCD-EFGH-JKMN-PQRS-TVWX-YZ01 (24 letters and numbers, printed under the QR code).";
+}
+
+/** A blank sticker's printed code, "ABCD-EFGH-JKMN-PQRS-TVWX-YZ01"? */
+export const isBlankCode = (plate: unknown): boolean => /^([0-9A-Z]{4}-){5}[0-9A-Z]{4}$/.test(String(plate ?? ""));
+
+/** Two lines for a blank code so the letters can be big enough to read; anything else is one line. */
+export function plateLines(plate: string): string[] {
+  return isBlankCode(plate) ? [plate.slice(0, 14), plate.slice(15)] : [plate];
+}

package/utils/vehicle-qr-sticker.ts

@@ -18,6 +18,7 @@ import {
   stickerTheme,
   type StickerDesign,
 } from "./vehicle-qr-design.ts";
+import { BLANK_STRIP_NOTE, plateLines } from "./vehicle-qr-blank.ts";
 
 /** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
 export const STICKER_MAX_PER_REQUEST = 500;
@@ -170,6 +171,8 @@ export type StickerItem = {
   plateNumber?: string;
   ownerName?: string;
   status?: string;
+  /** A blank (pre-generated) sticker: `plateNumber` holds its printed code and it is not linked to a vehicle yet. */
+  blank?: boolean;
 };
 
 export type StickerPlateRow = {
@@ -304,6 +307,7 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .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: 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.blank { font-size: 5pt; line-height: 1.15; }
 .cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .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; }
@@ -342,7 +346,7 @@ function plateSizeMm(plate: string, boxW: number, max = 4.6): number {
  * `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.
  */
-type CardContext = { ink: string; label: string; layout: SheetLayout; k: number; shaped: boolean; bare: boolean; wordsTop: number; tag: { x: number; y: number; w: number; h: number } | null };
+type CardContext = { cardW: number; ink: string; label: string; layout: SheetLayout; k: number; shaped: boolean; bare: boolean; wordsTop: number; tag: { x: number; y: number; w: number; h: number } | null };
 
 function cardContext(design: StickerDesign, siteName: string | undefined, n: number): CardContext {
   const g = stickerGeometry(design, n);
@@ -350,6 +354,7 @@ function cardContext(design: StickerDesign, siteName: string | undefined, n: num
   // Shaped codes: plate (and words) in ink on the paper tab under the shape - or no text at all.
   const shaped = !!g.pts;
   return {
+    cardW: sheetLayout(design).cellW,
     ink: stickerTheme(design.theme).ink,
     label: stickerLabel(design, siteName),
     layout: sheetLayout(design),
@@ -363,17 +368,20 @@ function cardContext(design: StickerDesign, siteName: string | undefined, n: num
 
 /** The sticker itself (frame + QR + plate words) - what goes on the car. */
 function cardHtml(item: StickerItem, face: string, c: CardContext): string {
-  const plate = escapeHtml(item.plateNumber);
-  const label = c.label ? `<div class="hint">${escapeHtml(c.label)}</div>` : "";
+  const lines = plateLines(text(item.plateNumber));
+  const plate = lines.map(escapeHtml).join("<br>");
+  const longest = lines.reduce((a, l) => (l.length > a.length ? l : a), "");
+  // a two-line code has no room for the words under it inside the tag
+  const label = c.label && !(c.tag && lines.length > 1) ? `<div class="hint">${escapeHtml(c.label)}</div>` : "";
   const words = c.shaped && !c.tag
     ? ""
     : c.tag
     ? `<div class="words band" style="left:${c.tag.x}mm;right:auto;top:${c.tag.y}mm;width:${c.tag.w}mm;height:${c.tag.h}mm">` +
-      `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), c.tag.w, 4.6 * c.k)}mm">${plate}</div>` +
+      `<div class="plate" style="font-size:${plateSizeMm(longest, c.tag.w, 4.6 * c.k)}mm">${plate}</div>` +
       label +
       `</div>`
     : `<div class="words" style="top:${c.wordsTop}mm">` +
-      `<div class="plate">${plate}</div>` +
+      `<div class="plate"${lines.length > 1 ? ` style="font-size:${plateSizeMm(longest, c.cardW - 6, 4.6)}mm"` : ""}>${plate}</div>` +
       label +
       `<div class="brand"><span class="mark" style="background:${c.ink}">7</span>Powered by Seven365</div>` +
       `</div>`;
@@ -395,10 +403,13 @@ export function buildStickerDocument(
   const c = cardContext(design, opts.siteName, n);
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
+    const [noteHead, noteRest] = BLANK_STRIP_NOTE.split(" - ");
+    const strip = item.blank
+      ? `<div class="cut${c.bare ? " free" : ""} blank"><div><b>${escapeHtml(noteHead)}</b></div><div>${escapeHtml(noteRest)}</div></div>`
+      : `<div class="cut${c.bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div><div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div>`;
     return (
       `<div class="cell">${cardHtml(item, faceSvgs[i] ?? "", c)}` +
-      `<div class="cut${c.bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
-      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div></div>`
+      `${strip}</div>`
     );
   });
   const marks = cropMarksSvg(c.layout);