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

package/utils/occupancy-role.ts

@@ -0,0 +1,109 @@
+/**
+ * OWNER / OCCUPANT / PERSON IN CHARGE - the three standings a business
+ * tenancy has, and everything the product says about them.
+ *
+ * One list, because three screens read it: the form that asks the question
+ * (`PeopleFormMgmt`), the list and preview that print the answer back, and
+ * the row menu that reassigns it (`people-mgmt`). The values are the ones the
+ * server stores and validates - `OccupancyRoles` in core's `person.model.ts`
+ * - so a value added on one side has to be added on the other.
+ */
+export const OCCUPANCY_ROLE_OPTIONS: TOccupancyRoleOption[] = [
+  {
+    value: "owner",
+    title: "Owner",
+    action: "Assign Owner",
+    prompt: "Assign Owner",
+    description:
+      "The legal titleholder or primary deed owner of the property.",
+  },
+  {
+    value: "occupant",
+    title: "Occupant",
+    action: "Assign Occupant",
+    prompt: "Assign Occupant",
+    description:
+      "The person currently living in, renting, or utilizing the physical unit.",
+  },
+  {
+    value: "person-in-charge",
+    title: "Person in Charge",
+    action: "Assign Person in Charge",
+    prompt: "Assign Person in Charge (PIC)",
+    description:
+      "The designated manager responsible for maintenance, emergencies, and daily operations.",
+  },
+];
+
+/**
+ * The same three, in the order the ROW MENU draws them, which is not the
+ * order the form's radio does. Derived rather than re-typed so the wording
+ * cannot drift between the two.
+ */
+export const OCCUPANCY_ROLE_ACTIONS: TOccupancyRoleOption[] = (
+  ["person-in-charge", "owner", "occupant"] as TOccupancyRole[]
+).map(
+  (value) =>
+    OCCUPANCY_ROLE_OPTIONS.find(
+      (option) => option.value === value,
+    ) as TOccupancyRoleOption,
+);
+
+/**
+ * The label for a stored role, or "" for a person who was never asked - which
+ * is everyone on a residential site and everyone saved before the question
+ * existed. Callers decide what to print instead; nobody should print a raw
+ * `person-in-charge` at a user.
+ */
+export function occupancyRoleLabel(role?: string | null): string {
+  return (
+    OCCUPANCY_ROLE_OPTIONS.find((option) => option.value === role)?.title ?? ""
+  );
+}
+
+/**
+ * Does this person hold OWNER at their unit?
+ *
+ * The role when there is one, `isOwner` when there is not - the same test the
+ * server applies (`holdsUnitOwner` in core's `unit-owner.util.ts`). A person
+ * recorded before the role existed carries only the flag, and the people list
+ * already prints them as "Owner".
+ */
+export function holdsUnitOwner(person?: {
+  occupancyRole?: string | null;
+  isOwner?: boolean;
+}): boolean {
+  if (!person) return false;
+
+  if (person.occupancyRole) return person.occupancyRole === "owner";
+
+  return person.isOwner === true;
+}
+
+/**
+ * MUST THIS PERSON HAND THE UNIT OVER BEFORE THEY CAN BE DEACTIVATED?
+ *
+ * The owner of a unit does not leave while they still own it - the standing
+ * moves to another tenant at the same block, level and unit first.
+ *
+ * Keyed to the ROLE and never to `isOwner`, exactly as the server keys it
+ * (`mustHandOverBeforeDeactivating` in core): the flag is on every resident in
+ * the estate, and no residential screen can change it, so a rule keyed to it
+ * would trap records that can never satisfy it.
+ */
+export function mustHandOverBeforeDeactivating(person?: {
+  occupancyRole?: string | null;
+}): boolean {
+  return person?.occupancyRole === "owner";
+}
+
+/**
+ * Why a deactivation was held back. The SERVER carries the enforcing copy of
+ * this rule and of these words (core `unit-owner.util.ts`); this one exists so
+ * the console can say it before the round trip rather than after.
+ */
+export function ownerHandoverRequiredMessage(name?: string): string {
+  const who = name?.trim() ? `"${name.trim()}"` : "This person";
+
+  return `${who} is the owner of this unit. Assign the owner role to another tenant at the same block, level and unit before deactivating them.`;
+}

package/utils/service-type.ts

@@ -0,0 +1,30 @@
+/**
+ * A SERVICE PROVIDER'S LINE OF BUSINESS, AS PEOPLE NAME IT.
+ *
+ * `/api/service-providers` returns the service CODE (`mechanical_electrical_services`),
+ * which is a database value, not something to show an operator. This is the same
+ * mapping `API-core src/utils/converter.ts spmServiceNewToOld` applies — copied
+ * rather than imported, because that is a server package this layer does not
+ * depend on.
+ *
+ * NOT the same labels as `utils/module-applications.ts APPLICATIONS`. Those name
+ * the seven role-permission applications ("Mechanical & electrical", "Pest
+ * control") and are keyed `mechanical-electrical`, not `*_services`. These are
+ * the shorter names the service-provider screens use ("M&E", "Pest Control").
+ *
+ * An unknown code is returned untouched: a new service type shows as its raw
+ * code, which is visibly odd, rather than vanishing from the row.
+ */
+const SERVICE_TYPE_LABELS: Readonly<Record<string, string>> = Object.freeze({
+  security_agency: "Security",
+  cleaning_services: "Cleaning",
+  pool_maintenance_services: "Pool Maintenance",
+  pest_control_services: "Pest Control",
+  landscaping_services: "Landscape",
+  mechanical_electrical_services: "Mechanical & Electrical",
+});
+
+export function serviceTypeLabel(service: string | null | undefined): string {
+  const code = String(service ?? "");
+  return SERVICE_TYPE_LABELS[code] ?? code;
+}

package/utils/vehicle-qr-design.ts

@@ -13,12 +13,31 @@ export type QrMatrix = { size: number; get(row: number, col: number): number | b
 
 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";
+/** Cut-out shapes: the QR sits whole inside, the rest of the shape is a dot pattern. */
+export type SilhouetteShape =
+  | "circle"
+  | "heart"
+  | "star"
+  | "hexagon"
+  | "octagon"
+  | "shield"
+  | "bubble"
+  | "roundsquare"
+  | "car";
+export type FrameShape = "rounded" | "square" | "soft" | "arch" | "ticket" | SilhouetteShape;
+export type LabelChoice = "app" | "verify" | "scanme" | "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 type StickerDesign = {
+  dots: DotShape;
+  eyes: EyeShape;
+  theme: string;
+  frame: FrameShape;
+  label: LabelChoice;
+  /** A thin grey line around each sticker to cut along. */
+  cutLines?: boolean;
+};
 
 export const DOT_OPTIONS: { value: DotShape; title: string }[] = [
   { value: "square", title: "Squares (classic)" },
@@ -40,9 +59,29 @@ export const FRAME_OPTIONS: { value: FrameShape; title: string }[] = [
   { value: "ticket", title: "Ticket (cut corners)" },
 ];
 
+export const SILHOUETTE_OPTIONS: { value: SilhouetteShape; title: string }[] = [
+  { value: "circle", title: "Circle" },
+  { value: "heart", title: "Heart" },
+  { value: "star", title: "Star badge" },
+  { value: "hexagon", title: "Hexagon" },
+  { value: "octagon", title: "Octagon" },
+  { value: "shield", title: "Shield" },
+  { value: "bubble", title: "Speech bubble" },
+  { value: "roundsquare", title: "Rounded square" },
+  { 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 function isSilhouette(frame: unknown): frame is SilhouetteShape {
+  return SILHOUETTE_OPTIONS.some((o) => o.value === frame);
+}
+
 export const LABEL_OPTIONS: { value: LabelChoice; title: string }[] = [
   { value: "app", title: "Scan with iSecure365 / iMA365" },
   { value: "verify", title: "Scan to verify vehicle" },
+  { value: "scanme", title: "Scan me" },
   { value: "site", title: "Site name" },
   { value: "none", title: "No extra words" },
 ];
@@ -64,6 +103,7 @@ export const DEFAULT_STICKER_DESIGN: StickerDesign = {
   theme: "black",
   frame: "rounded",
   label: "app",
+  cutLines: true,
 };
 
 /** A saved or typed-in design with anything unknown replaced by the default. */
@@ -76,8 +116,9 @@ export function normalizeDesign(raw: unknown): StickerDesign {
     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),
+    frame: pick(r.frame, SHAPE_OPTIONS, d.frame),
     label: pick(r.label, LABEL_OPTIONS, d.label),
+    cutLines: typeof r.cutLines === "boolean" ? r.cutLines : true,
   };
 }
 
@@ -110,15 +151,203 @@ 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 closed outline, points in mm (the cut-out 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) ---------------------
+
+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. */
+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;
+
+type Pt = [number, number];
+const MID = SHAPE_W / 2;
+
+function arcPts(cx: number, cy: number, r: number, a0: number, a1: number, steps = 24): Pt[] {
+  return Array.from({ length: steps + 1 }, (_, i) => {
+    const a = a0 + ((a1 - a0) * i) / steps;
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)] as Pt;
+  });
+}
+
+/** Right half (top middle -> bottom middle, clockwise) plus its mirror image = the whole outline. */
+const mirror = (half: Pt[]): Pt[] => [...half, ...half.slice().reverse().map(([x, y]) => [SHAPE_W - x, y] as Pt)];
+
+function roundRectPts(x: number, y: number, w: number, h: number, r: number): Pt[] {
+  const q = Math.PI / 2;
+  return [
+    ...arcPts(x + r, y + r, r, 2 * q, 3 * q, 8),
+    ...arcPts(x + w - r, y + r, r, 3 * q, 4 * q, 8),
+    ...arcPts(x + w - r, y + h - r, r, 0, q, 8),
+    ...arcPts(x + r, y + h - r, r, q, 2 * q, 8),
+  ];
+}
+
+function regularPts(sides: number, r: number, cx: number, cy: number, start: number): Pt[] {
+  return Array.from({ length: sides }, (_, i) => {
+    const a = start + (i * 2 * Math.PI) / sides;
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)] as Pt;
+  });
+}
+
+function bezierPts(p0: Pt, c: Pt, p1: Pt, steps = 20): Pt[] {
+  return Array.from({ length: steps + 1 }, (_, i) => {
+    const t = i / steps;
+    const u = 1 - t;
+    return [u * u * p0[0] + 2 * u * t * c[0] + t * t * p1[0], u * u * p0[1] + 2 * u * t * c[1] + t * t * p1[1]] as Pt;
+  });
+}
+
+function heartPts(): Pt[] {
+  // Two round lobes and a point; lobes wide enough that the 32 mm QR fits between them.
+  const c = 11;
+  const r = 20;
+  const cx = MID + c;
+  const tip: Pt = [MID, SHAPE_H];
+  const base = Math.atan2(tip[1] - r, tip[0] - cx);
+  const tangent = base - Math.acos(r / Math.hypot(tip[0] - cx, tip[1] - r));
+  const dip = Math.atan2(-Math.sqrt(r * r - c * c), -c);
+  return mirror([...arcPts(cx, r, r, dip, tangent, 48), tip]);
+}
+
+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.
+  const R = SHAPE_H / 2;
+  return Array.from({ length: 28 }, (_, i) => {
+    const a = -Math.PI / 2 + (i * Math.PI) / 14;
+    const k = i % 2 ? 0.88 * R : R;
+    return [MID + k * Math.cos(a), R + k * Math.sin(a)] as Pt;
+  });
+}
+
+function bubblePts(): Pt[] {
+  // Rounded box with a tail at the bottom left.
+  const [x, y, w, h, r] = [1, 1, 60, 47, 9];
+  const box = roundRectPts(x, y, w, h, r);
+  const split = 27; // first point of the bottom-left corner arc
+  const tail: Pt[] = [[25, y + h], [12, SHAPE_H], [17, y + h]];
+  return [...box.slice(0, split), ...tail, ...box.slice(split)];
+}
+
+function carPts(): Pt[] {
+  // Front view: roof, windscreen, wing mirrors, body and the two front wheels.
+  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],
+  ]);
+}
+
+const SILHOUETTE_BUILDERS: Record<SilhouetteShape, () => Pt[]> = {
+  circle: () => arcPts(MID, SHAPE_H / 2, SHAPE_H / 2, 0, 2 * Math.PI, 144).slice(0, -1),
+  heart: heartPts,
+  star: starPts,
+  hexagon: () => regularPts(6, MID, MID, SHAPE_H / 2, 0),
+  octagon: () => regularPts(8, SHAPE_H / 2 / Math.cos(Math.PI / 8), MID, SHAPE_H / 2, Math.PI / 8),
+  shield: () =>
+    mirror([
+      [MID, 1],
+      [56, 1],
+      ...arcPts(56, 5, 4, -Math.PI / 2, 0, 6).slice(1),
+      [60, 28],
+      ...bezierPts([60, 28], [60, 48], [MID, SHAPE_H]).slice(1),
+    ]),
+  bubble: bubblePts,
+  roundsquare: () => roundRectPts(2, 0, 58, 58, 14),
+  car: carPts,
+};
+
+export function pointInPoly(pts: Pt[], x: number, y: number): boolean {
+  let inside = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const [xi, yi] = pts[i];
+    const [xj, yj] = pts[j];
+    if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
+
+/** True when the rectangle (edge sampled every 0.5 mm) is inside the outline and no point of the outline pokes into it. */
+export function rectInside(pts: Pt[], x: number, y: number, w: number, h: number): boolean {
+  if (pts.some(([px, py]) => px > x && px < x + w && py > y && py < y + h)) return false;
+  const steps = Math.ceil(Math.max(w, h) / 0.5);
+  for (let i = 0; i <= steps; i++) {
+    const tx = x + (w * i) / steps;
+    const ty = y + (h * i) / steps;
+    if (!pointInPoly(pts, tx, y) || !pointInPoly(pts, tx, y + h) || !pointInPoly(pts, x, ty) || !pointInPoly(pts, x + w, ty)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export type SilhouetteLayout = { pts: Pt[]; qrTop: number; band: { x: number; y: number; w: number; h: number } };
+const layoutCache = new Map<SilhouetteShape, SilhouetteLayout>();
+
+/**
+ * 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.
+ */
+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);
+  }
+  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 } };
+  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);
+  h = Math.imul(h ^ (h >>> 16), 0x85ebca6b);
+  h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967296 < PATTERN_DENSITY;
+}
+
 function cardBox(frame: FrameShape, inset: number): Box {
   const x = inset;
   const w = CARD_W - inset * 2;
@@ -147,28 +376,58 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Pain
   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 ox = (cardSize(design.frame).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 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 });
+      }
+    }
+  } else {
+    paints.push(
+      { 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] });
 
+  // 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.
+  // ponytail: versions 2-6 only (one alignment square); the sticker payload is version 3.
+  const version = (n - 17) / 4;
+  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)) continue;
+      if (!matrix.get(row, col) || isFinder(n, row, col) || inAlign(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 });
+        paints.push({ shape: { t: "circle", cx: x + m / 2, cy: y + m / 2, r: m * 0.48 }, fill: theme.ink });
       } else {
         // 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)) end++;
-        paints.push({ shape: box(x, y, (end - col + 1) * m, m), fill: theme.ink });
+        while (end + 1 < n && matrix.get(row, end + 1) && !isFinder(n, row, end + 1) && !inAlign(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;
       }
     }
@@ -192,6 +451,12 @@ export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Pain
       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;
+    const y = oy + (align - 2) * m;
+    paints.push({ shape: box(x, y, 5 * m, 5 * m, 1.2 * m), hole: box(x + m, y + m, 3 * m, 3 * m, 0.6 * m), fill: theme.ink });
+    paints.push({ shape: { t: "circle", cx: x + 2.5 * m, cy: y + 2.5 * m, r: 0.55 * m }, fill: theme.ink });
+  }
   return paints;
 }
 
@@ -222,13 +487,31 @@ function boxPath(b: Box): string {
 
 function shapePath(s: Shape): string {
   if (s.t === "box") return boxPath(s);
+  if (s.t === "poly") return `M${s.pts.map(([x, y]) => `${f(x)} ${f(y)}`).join("L")}Z`;
   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 {
+/** Gap between the sticker's edge and its grey cut line, mm. */
+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.
+ */
+export function paintsToSvg(paints: Paint[], opts: { w?: number; h?: number; cutLine?: boolean } = {}): string {
+  const w = opts.w ?? CARD_W;
+  const h = opts.h ?? CARD_H;
   const out: string[] = [];
+  if (opts.cutLine && paints[0]) {
+    const edge = shapePath(paints[0].shape);
+    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}"/>`,
+    );
+  }
   let fill = "";
   let d = "";
   const flush = () => d && out.push(`<path fill="${fill}" d="${d}"/>`);
@@ -249,20 +532,21 @@ export function paintsToSvg(paints: Paint[]): string {
   }
   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">` +
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}" width="${w}mm" height="${h}mm" overflow="visible">` +
     out.join("") +
     `</svg>`
   );
 }
 
 export function stickerFaceSvg(matrix: QrMatrix, design: StickerDesign): string {
-  return paintsToSvg(stickerFacePaints(matrix, design));
+  return paintsToSvg(stickerFacePaints(matrix, design), { ...cardSize(design.frame), cutLine: design.cutLines !== false });
 }
 
 /** 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 === "scanme") return "Scan me";
   if (design.label === "site") return String(siteName ?? "").trim();
   return "Scan with iSecure365 / iMA365";
 }