Framingtype

How one frame shows a flag, measured so that no frame misrepresents it (pnpm data:framing): a frame keeps a flag's colours when every colour covering at least 5% of the flag still covers at least half that share.

• own: the flag is that shape already.
• adapted: a drawing made for that shape by hand, by flag-icons (MIT): Canada's square, with narrower bars. It is its own module, /flags/<code>.1x1 or /flags/<code>.4x3; round uses the square one in a circle.
• cover: the flag cropped from the centre, which keeps its colours.
• crop: the flag cropped at the side a person chose for it (crop.at), keeping its colours: the United States' canton and a slice of its stripes, kept at the left. See crop for why.
• contain: the whole flag, with clear bands (on a neutral disc when round), because a crop would lose a colour or misrepresent the flag.

import type { Framing } from "@johnmorrisdotca/hata/manifest";

interface Framing {
    method: "own" | "adapted" | "cover" | "crop" | "contain";
    fit: "cover" | "crop" | "contain";
    crop: FramingCrop;
    source: "flag-icons" | null;
    file: string | null;
    page: string | null;
    bytes: number | null;
    coverLoses: string[];
}

import { manifest, type Framing } from "@johnmorrisdotca/hata/manifest";

const square: Framing | undefined = manifest("CA")?.framings["1:1"];
console.log(square?.method); // "adapted"
console.log(square?.fit);    // "contain": what frame() does with the flag's own SVG, which cannot use the adapted drawing

const us = manifest("US")?.framings["1:1"];
console.log(us?.fit);         // "crop"
console.log(us?.crop);        // { rule: "curated", at: "left", why: "An emblem sits in a canton at the hoist …", loses: [] }

adapted
contain
crop
{
  rule: 'curated',
  at: 'left',
  why: "An emblem sits in a canton at the hoist and the flag's body runs on from it, so a crop from the left keeps the emblem and a slice of the body, as a hand-drawn square of the flag does; the centre crop shows only the body.",
  loses: []
}