@7365admin1/layer-common 4.98.0 → 4.99.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.99.1
+
+### Patch Changes
+
+- 1e71b4c: Provider change dialog: only the newest preview is shown (typing a date could leave an older "Straight away" preview on screen), and "On a date" without a date asks for the date. Inventory quantity boxes show "1 pc" / "2 pcs" (the suffix follows the number).
+
+## 4.99.0
+
+### Minor Changes
+
+- cf10e71: Vehicle QR stickers: shaped codes no longer show a square. The pattern now fills the whole shape right up to the real code, on the same grid and in the same dot style and density, so the shape reads as one continuous code; only the three corner eyes keep a small paper ring (scanners find the code by them). The plate number moved out of the shape onto a paper tab under it, and a new "Text" choice can leave the text off (the shape alone is the sticker). Sizes, cutting layout and the print-at-100% info follow the new geometry. Every shape x size x style x colour still decodes with ZXing, jsQR and ZBar under the camera conditions plus simulated phone photos.
+
 ## 4.98.0
 
 ### Minor Changes
@@ -2963,11 +2975,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/InventoryItemDetail.vue

@@ -40,7 +40,7 @@
           <AppCard class="pa-4">
             <div class="text-subtitle-2 mb-2">How many are on the shelf right now?</div>
             <div class="d-flex flex-wrap ga-2">
-              <v-text-field v-model.number="counted" type="number" min="0" label="Counted" :suffix="item.unit" density="comfortable" style="max-width: 160px" :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 0) || 'Enter a whole number']" />
+              <v-text-field v-model.number="counted" type="number" min="0" label="Counted" :suffix="unitWord(counted, item.unit)" density="comfortable" style="max-width: 160px" :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 0) || 'Enter a whole number']" />
               <v-text-field v-model="reason" label="Reason for the difference" density="comfortable" class="flex-grow-1" :rules="[requiredRule]" placeholder="e.g. 2 broken, found extra box" />
               <v-btn class="text-none screen-btn-primary" variant="flat" :loading="saving" @click="saveCount">Save count</v-btn>
             </div>
@@ -93,7 +93,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { receiptRefText } from "../utils/inventory-receiving";
-import { availableText, inventoryStepsLive, lowStockAlertText, qtyUnit, writeOffLabel } from "../utils/inventory-ack";
+import { availableText, inventoryStepsLive, lowStockAlertText, qtyUnit, unitWord, writeOffLabel } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({

package/components/InventoryLinesDialog.vue

@@ -71,7 +71,7 @@
               density="comfortable"
               style="max-width: 110px"
               :rules="[qtyRule(line)]"
-              :suffix="unitOf(line.item)"
+              :suffix="unitWord(line.qty, unitOf(line.item))"
             />
             <v-text-field
               v-if="mode === 'receive' && receivingType !== 'CASH'"
@@ -171,7 +171,7 @@
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { normaliseUsedBy, usedByChips, usedByText } from "../utils/inventory-used-by";
-import { availableQty, availableText as availableTextOf, qtyUnit } from "../utils/inventory-ack";
+import { availableQty, availableText as availableTextOf, qtyUnit, unitWord } from "../utils/inventory-ack";
 import { RECEIVING_TYPES, receivingFields, receivingProblem, type TReceivingType } from "../utils/inventory-receiving";
 
 type TMode = "receive" | "issue" | "request" | "return";

package/components/InventoryMyStockTab.vue

@@ -170,7 +170,7 @@
               type="number"
               min="1"
               density="comfortable"
-              :suffix="give.holding?.unit"
+              :suffix="unitWord(give.qty, give.holding?.unit)"
               :rules="[giveQtyRule]"
               hint="Counted in the unit the store issues it in."
               persistent-hint
@@ -201,7 +201,7 @@
               type="number"
               min="1"
               density="comfortable"
-              :suffix="ret.holding.unit"
+              :suffix="unitWord(ret.qty, ret.holding.unit)"
               style="max-width: 200px"
               :rules="[retQtyRule]"
             />
@@ -237,7 +237,7 @@ import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
 import { inventoryControls } from "../utils/inventory-presets";
 import { colleagueDraftText, draftCardText } from "../utils/inventory-usage";
-import { ackText, holdText, inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
+import { ackText, holdText, inventoryStepsLive, qtyUnit, unitWord } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },

package/components/InventoryUsageDialog.vue

@@ -22,7 +22,7 @@
             type="number"
             min="1"
             :max="maxQty"
-            :suffix="holding.unit"
+            :suffix="unitWord(qty, holding.unit)"
             density="comfortable"
             style="max-width: 200px"
             :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 1 && Number(v) <= maxQty) || `1 to ${maxQty}`]"
@@ -134,7 +134,7 @@
 <script setup lang="ts">
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
-import { inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
+import { inventoryStepsLive, qtyUnit, unitWord } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({

package/components/InventoryWriteOffDialog.vue

@@ -23,7 +23,7 @@
             min="1"
             :max="max"
             density="comfortable"
-            :suffix="unit"
+            :suffix="unitWord(qty, unit)"
             style="max-width: 200px"
             :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 1) || 'Enter a whole number', (v: any) => Number(v) <= max || `You can write off up to ${max}`]"
           />
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import useInventory from "../composables/useInventory";
-import { qtyUnit, WRITE_OFF_REASONS, writeOffDefaultReason, writeOffLabel, writeOffProblem } from "../utils/inventory-ack";
+import { qtyUnit, unitWord, WRITE_OFF_REASONS, writeOffDefaultReason, writeOffLabel, writeOffProblem } from "../utils/inventory-ack";
 
 /** Write-off (owner 2026-10-03): from the person's own stock (`holding`) or, for a store keeper, from the shelf (`store`). */
 const show = defineModel<boolean>({ default: false });

package/components/SiteProviderChange.vue

@@ -218,18 +218,31 @@ function body() {
   };
 }
 
+/** Only the newest preview may land: typing a date fires several, and they can answer out of order. */
+let previewSeq = 0;
 async function refresh() {
   if (!from.value) return;
+  const mine = ++previewSeq;
+  // "On a date" without a date would preview as "Straight away" - ask for the date instead.
+  if (when.value === "date" && !endDate.value) {
+    preview.value = null;
+    loading.value = false;
+    error.value = "Pick the date for this change.";
+    return;
+  }
   loading.value = true;
   error.value = "";
   try {
-    preview.value = await previewProviderChange(body());
-    replacements.value = preview.value?.replacements ?? [];
+    const res = await previewProviderChange(body());
+    if (mine !== previewSeq) return;
+    preview.value = res;
+    replacements.value = res?.replacements ?? [];
   } catch (e: any) {
+    if (mine !== previewSeq) return;
     preview.value = null;
     error.value = message(e);
   } finally {
-    loading.value = false;
+    if (mine === previewSeq) loading.value = false;
   }
 }
 

package/components/VehicleQrStickerDialog.vue

@@ -83,8 +83,8 @@
           </p>
           <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.
+            In a shaped code the dots fill the whole shape right up to the code, so no square shows. The plate number goes
+            under the shape, or leave the text off.
           </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"
@@ -113,7 +113,11 @@
               <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">
+            <v-col v-if="design.shape !== 'square'" cols="12" sm="6" md="4">
+              <v-select v-model="design.text" :items="TEXT_OPTIONS" label="Text" density="compact" hide-details
+                data-test="vehicle-qr-text" />
+            </v-col>
+            <v-col v-if="design.shape === 'square' || design.text !== 'none'" 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>
@@ -187,6 +191,7 @@ import {
   QR_SHAPE_OPTIONS,
   QR_ECC,
   STICKER_THEMES,
+  TEXT_OPTIONS,
   frameOptionsFor,
   normalizeDesign,
   sizeOptionsFor,
@@ -269,7 +274,7 @@ watch(
 // 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],
+  () => [design.shape, design.frame, design.size, design.text],
   () => {
     const fixed = normalizeDesign(design);
     if (!sizeOptionsFor(fixed, STICKER_QR_MODULES).some((o) => o.value === fixed.size)) fixed.size = "standard";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.98.0",
+  "version": "4.99.1",
   "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/inventory-ack.ts

@@ -20,11 +20,15 @@ const UNIT_FORMS: Record<string, [string, string]> = {
   metre: ["metre", "metres"], metres: ["metre", "metres"],
 };
 
+/** The unit word for a quantity: "pc" for 1, "pcs" otherwise; kg and unknown units unchanged. */
+export function unitWord(qty: number | string | null | undefined, unit?: string | null) {
+  const forms = UNIT_FORMS[String(unit ?? "").trim().toLowerCase()];
+  return forms ? forms[Math.abs(Number(qty)) === 1 ? 0 : 1] : (unit ?? "");
+}
+
 /** "1 pc", "2 pcs", "1 box", "3 boxes"; kg and unknown units unchanged. */
 export function qtyUnit(qty: number | string | null | undefined, unit?: string | null) {
-  const forms = UNIT_FORMS[String(unit ?? "").trim().toLowerCase()];
-  const word = forms ? forms[Math.abs(Number(qty)) === 1 ? 0 : 1] : (unit ?? "");
-  return `${qty ?? ""} ${word}`.trim();
+  return `${qty ?? ""} ${unitWord(qty, unit)}`.trim();
 }
 
 /** "you hold 2 pcs" or, while some still wait for Received, "you hold 2 pcs (2 waiting for you to tap Received)". */

package/utils/vehicle-qr-design.ts

@@ -7,12 +7,14 @@
  *
  * - 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).
+ *   real QR (same ECC Q) sits in the middle; the rest of the shape is filled
+ *   with extra modules on the same grid, in the same dot style and density,
+ *   right up to the code's edge - so no square shows. Only the three corner
+ *   eyes keep a one-module paper ring (a scanner finds the code by them). 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 plate number sits
+ *   under the shape, not in it.
  *
  * 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.
@@ -42,6 +44,8 @@ export type QrShape = "square" | SilhouetteShape;
 export type FrameShape = "none" | "rounded" | "square" | "soft" | "arch" | "ticket";
 export type SizeChoice = "small" | "standard" | "large";
 export type LabelChoice = "app" | "verify" | "scanme" | "site" | "none";
+/** Shaped codes: the plate number on a tab under the shape, or no text at all. */
+export type TextChoice = "below" | "none";
 
 export type StickerTheme = { id: string; title: string; ink: string; eye: string; paper: string };
 
@@ -54,6 +58,8 @@ export type StickerDesign = {
   frame: FrameShape;
   size: SizeChoice;
   label: LabelChoice;
+  /** Shaped codes only: plate number under the shape, or none (only the shape). */
+  text: TextChoice;
   /** A thin grey line around each sticker to cut along. */
   cutLines?: boolean;
 };
@@ -119,6 +125,11 @@ export function isSilhouette(shape: unknown): shape is SilhouetteShape {
   return SILHOUETTE_OPTIONS.some((o) => o.value === shape);
 }
 
+export const TEXT_OPTIONS: { value: TextChoice; title: string }[] = [
+  { value: "below", title: "Plate number under the shape" },
+  { value: "none", title: "No text (only the shape)" },
+];
+
 export const LABEL_OPTIONS: { value: LabelChoice; title: string }[] = [
   { value: "app", title: "Scan with iSecure365 / iMA365" },
   { value: "verify", title: "Scan to verify vehicle" },
@@ -146,6 +157,7 @@ export const DEFAULT_STICKER_DESIGN: StickerDesign = {
   frame: "rounded",
   size: "standard",
   label: "app",
+  text: "below",
   cutLines: true,
 };
 
@@ -167,6 +179,7 @@ export function normalizeDesign(raw: unknown): StickerDesign {
     frame,
     size: pick(r.size, SIZE_OPTIONS, d.size),
     label: pick(r.label, LABEL_OPTIONS, d.label),
+    text: pick(r.text, TEXT_OPTIONS, d.text),
     cutLines: typeof r.cutLines === "boolean" ? r.cutLines : true,
   };
 }
@@ -200,10 +213,19 @@ export const QUIET_MODULES = 4;
  */
 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%.
+ * Room kept round a shaped code inside the shape, in modules: the paper ring
+ * round each corner eye has to stay on the sticker. The pattern fills this
+ * room everywhere else.
  */
-export const QR_RING = 2;
+export const QR_RING = 1;
+/**
+ * Paper round each corner eye (finder), in modules: a scanner finds the code by
+ * the eye's dark-light-dark rings. 1 missed 16 of 9261 reads on ZXing, 2 read
+ * all once the edge margin was 1.5 mm. The pattern is full-strength ink: a
+ * lighter tint for the pattern (tried 55% paper, near the code only or
+ * everywhere) read worse on ZXing and made the square show again.
+ */
+export const FINDER_CLEAR = 2;
 const STROKE = 0.35;
 
 /** A rectangle with per-corner radii [tl, tr, br, bl], or concave cut corners. */
@@ -220,17 +242,19 @@ export type Paint = { shape: Shape; hole?: Shape; fill: string };
 export const SHAPE_W = 62;
 export const SHAPE_H = 58;
 /** 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;
+export const SHAPE_EDGE_MARGIN = 1.5;
 /** 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.
+ * The plate tab: a paper tab under the shape (text "below"), plate number (and
+ * the optional words) in ink. The shape sits above it and just touches it, so
+ * shape and tab cut out as one piece and the pattern has no hole in it.
  */
 export const PLATE_TAG = { x: 14, y: 50, w: 34, h: 8 };
+/** How far the tab reaches up into the shape's bottom edge, mm. */
+const TAB_OVERLAP = 0.5;
 /** 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;
+const PATTERN_DENSITY = 0.8;
 
 type Pt = [number, number];
 const MID = SHAPE_W / 2;
@@ -383,29 +407,29 @@ export function rectInside(pts: Pt[], 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>();
+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<string, SilhouetteLayout>();
 
-/** Tops where a code square of side s fits inside the shape and above the plate tag. */
+/** Tops where a code square of side s fits inside the shape. */
 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) {
+  for (let top = e; top + s + e <= SHAPE_H; top += 0.25) {
     if (rectInside(pts, MID - s / 2 - e, top - e, s + 2 * e, s + 2 * e)) tops.push(top);
   }
   return tops;
 }
 
 /**
- * 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.
+ * The biggest code that fits the shape, keeping SHAPE_EDGE_MARGIN of paper to
+ * the edge. Bigger code = bigger modules = easier to scan; the pattern fills
+ * what is left. With the plate below, the shape is shrunk to sit above the tab.
  */
-export function silhouetteLayout(shape: SilhouetteShape): SilhouetteLayout {
-  const cached = layoutCache.get(shape);
+export function silhouetteLayout(shape: SilhouetteShape, text: TextChoice = "below"): SilhouetteLayout {
+  const key = `${shape}:${text}`;
+  const cached = layoutCache.get(key);
   if (cached) return cached;
-  // 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 k = text === "none" ? 1 : (PLATE_TAG.y + TAB_OVERLAP) / 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;
@@ -414,12 +438,14 @@ export function silhouetteLayout(shape: SilhouetteShape): SilhouetteLayout {
     if (fits(pts, s).length) lo = s;
     else hi = s;
   }
-  const s = Math.floor(lo * 20) / 20;
+  // With no text the shape is bigger, but the code keeps its plate-below size and the
+  // pattern fills the extra room: a bigger code read worse on ZXing close up (tested).
+  const s = text === "none" ? silhouetteLayout(shape, "below").qr.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);
+  const layout = { pts, qr: { x: MID - s / 2, y: top, s }, band: text === "none" ? undefined : { ...PLATE_TAG } };
+  layoutCache.set(key, layout);
   return layout;
 }
 
@@ -438,7 +464,7 @@ export type StickerGeometry = {
   /** The shape (or card) on paper, mm. */
   shapeW: number;
   shapeH: number;
-  /** Shaped codes: outline and plate tag, already placed on the face. */
+  /** Shaped codes: outline and plate tab (none when the text is off), 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. */
@@ -456,7 +482,7 @@ export function stickerGeometry(design: StickerDesign, n: number): StickerGeomet
       dataMm: n * m * scale, shapeW: CARD_W * scale, shapeH: CARD_H * scale, qrTop: top,
     };
   }
-  const L = silhouetteLayout(design.shape);
+  const L = silhouetteLayout(design.shape, design.text);
   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);
@@ -468,7 +494,7 @@ export function stickerGeometry(design: StickerDesign, n: number): StickerGeomet
     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 },
+    pts, band: L.band && { ...L.band, x: L.band.x + pad, y: L.band.y + pad },
   };
 }
 
@@ -493,31 +519,49 @@ function seedOf(text: string): number {
 
 /**
  * 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
+ * outline, right up to the code but off the paper ring round each corner eye
+ * and off the plate tab. A cell stays light if, together with the cells
+ * already dark round it - the code's own modules included, so nothing forms
+ * across the code's edge - it would make a 2 x 2 dark block (no solid centre =
+ * nothing a scanner can take for a QR corner or alignment square), a run of 3
+ * dark in a row or column (no corner-eye-like stripe) or a
  * dark-light-dark-light-dark run (a timing line).
  */
-export function patternCells(g: StickerGeometry, n: number, seed = ""): Set<string> {
+export function patternCells(g: StickerGeometry, matrix: QrMatrix, seed = ""): Set<string> {
   const { m, ox, oy, pts, band } = g;
+  const n = matrix.size;
   const cells = new Set<string>();
-  if (!pts || !band) return cells;
+  if (!pts) 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}`);
+  const has = (r: number, c: number) =>
+    r >= 0 && r < n && c >= 0 && c < n ? !!matrix.get(r, c) : cells.has(`${r},${c}`);
+  /** Would (r, c) dark complete a scanner-like pattern along direction (dr, dc)? */
+  const line = (r: number, c: number, dr: number, dc: number) => {
+    const at = (k: number) => k === 0 || has(r + k * dr, c + k * dc);
+    for (let k = -2; k <= 0; k++) if (at(k) && at(k + 1) && at(k + 2)) return true; // run of 3
+    for (const st of [0, -2, -4]) {
+      if (at(st) && at(st + 2) && at(st + 4) && !at(st + 1) && !at(st + 3)) return true; // timing run
+    }
+    return false;
+  };
+  /** Would (r, c) dark complete a 2 x 2 block? */
+  const block = (r: number, c: number) =>
+    [[-1, -1], [-1, 0], [0, -1], [0, 0]].some(([a, b]) =>
+      [[0, 0], [0, 1], [1, 0], [1, 1]].every(([i, j]) => (a + i === 0 && b + j === 0) || has(r + a + i, c + b + j)),
+    );
   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 (row >= 0 && row < n && col >= 0 && col < n) continue;
+      if (nearFinder(n, row, col)) 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;
+      if (band && 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;
+      if (block(row, col) || line(row, col, 0, 1) || line(row, col, 1, 0)) continue;
       cells.add(`${row},${col}`);
     }
   }
@@ -548,6 +592,12 @@ function isFinder(n: number, row: number, col: number): boolean {
   return (row < 7 && col < 7) || (row < 7 && col >= n - 7) || (row >= n - 7 && col < 7);
 }
 
+/** Within FINDER_CLEAR modules of a corner eye (the eye's own paper ring, outside the code). */
+function nearFinder(n: number, row: number, col: number): boolean {
+  const k = FINDER_CLEAR;
+  return [[0, 0], [0, n - 7], [n - 7, 0]].some(([fr, fc]) => row >= fr - k && row < fr + 7 + k && col >= fc - k && col < fc + 7 + k);
+}
+
 /** 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);
@@ -564,7 +614,7 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign, seed
     }
   }
   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 });
+  if (g.band) paints.push({ shape: box(g.band.x, g.band.y, g.band.w, g.band.h, 2), fill: theme.paper });
 
   // 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.
@@ -573,7 +623,7 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign, seed
   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;
 
-  const pattern = patternCells(g, n, seed);
+  const pattern = patternCells(g, matrix, 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}`);
@@ -705,8 +755,8 @@ export function paintsToSvg(
 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;
+  // A shaped code with no card is cut round the shape and its plate tab together.
+  const cutShapes = g.pts && design.frame === "none" ? (g.band ? [paints[0].shape, paints[1].shape] : [paints[0].shape]) : undefined;
   return paintsToSvg(paints, { w: g.w, h: g.h, scale: g.scale, cutLine: design.cutLines !== false, cutShapes });
 }
 

package/utils/vehicle-qr-sticker.ts

@@ -89,13 +89,14 @@ export function stickerSizeInfo(design: StickerDesign, n = STICKER_QR_MODULES):
   const l = sheetLayout(design);
   const cut = design.cutLines !== false ? 2 * CUT_LINE_GAP : 0;
   const bare = isSilhouette(design.shape) && design.frame === "none";
+  // a bare shape is cut round the shape and its plate tab (if any); anything else round the card
+  const ys = bare ? [...g.pts!.map((p) => p[1]), ...(g.band ? [g.band.y + g.band.h] : [])] : [0, g.h];
   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),
+    stickerH: mm((Math.max(...ys) - Math.min(...ys)) * g.scale + cut),
     perSheet: perSheet(l),
     gap: l.gap,
   };
@@ -348,20 +349,23 @@ export function buildStickerDocument(
 ): string {
   const design = opts.design ?? DEFAULT_STICKER_DESIGN;
   const n = opts.modules ?? STICKER_QR_MODULES;
-  const { ink, paper } = stickerTheme(design.theme);
+  const { ink } = stickerTheme(design.theme);
   const label = stickerLabel(design, opts.siteName);
   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.
+  // Shaped codes: plate (and words) in ink on the paper tab under the shape - or no text at all.
+  const shaped = !!g.pts;
   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 bare = shaped && 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);
-    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}">` +
+    const words = shaped && !tag
+      ? ""
+      : tag
+      ? `<div class="words band" style="left:${tag.x}mm;right:auto;top:${tag.y}mm;width:${tag.w}mm;height:${tag.h}mm">` +
         `<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>`