grailwind 0.6.0 → 0.8.0

package/ordinaries.js

@@ -2,8 +2,21 @@
  * Grailwind CSS: ordinaries, e.g. `fess-or`.
  */
 import plugin from "tailwindcss/plugin";
-import { BETWEEN, FURS, OF_THE_FIRST, ON, REVERSIBLE, TINCTURES, VOIDABLE } from "./data.js";
+import {
+  BETWEEN,
+  BETWEEN_LINED,
+  FURS,
+  LINES as LINE_NAMES,
+  lineOrdinaries,
+  OF_THE_FIRST,
+  ON,
+  ON_SCALE,
+  REVERSIBLE,
+  TINCTURES,
+  VOIDABLE,
+} from "./data.js";
 import { furBackground } from "./furs.js";
+import { PATHS } from "./paths.js";
 
 // prettier-ignore
 const ORDINARIES = {
@@ -18,21 +31,23 @@ const ORDINARIES = {
   ],
   bend: [[0, 0], [20, 0], [100, 80], [100, 100], [80, 100], [0, 20]],
   "bend-sinister": [[100, 0], [80, 0], [0, 80], [0, 100], [20, 100], [100, 20]],
-  chevron: [[50, 25], [100, 75], [100, 95], [50, 45], [0, 95], [0, 75]],
+  chevron: [[50, 22], [100, 72], [100, 98], [50, 48], [0, 98], [0, 72]],
   cross: [
-    [40, 0], [60, 0], [60, 35], [100, 35], [100, 55], [60, 55],
-    [60, 100], [40, 100], [40, 55], [0, 55], [0, 35], [40, 35],
+    [38, 0], [62, 0], [62, 35], [100, 35], [100, 55], [62, 55],
+    [62, 100], [38, 100], [38, 55], [0, 55], [0, 35], [38, 35],
   ],
+  // Its centre lines run from the top corners through the fess point, reaching the flanks at 90%.
   saltire: [
-    [0, 0], [15, 0], [50, 35], [85, 0], [100, 0], [100, 15], [65, 50], [100, 85],
-    [100, 100], [85, 100], [50, 65], [15, 100], [0, 100], [0, 85], [35, 50], [0, 15],
+    [0, 0], [16.35, 0], [50, 30.28], [83.65, 0], [100, 0], [100, 14.72], [66.35, 45], [100, 75.28],
+    [100, 100], [94.76, 100], [50, 59.72], [5.24, 100], [0, 100], [0, 75.28], [33.65, 45], [0, 14.72],
   ],
+  // Its arms and foot are 24 across, the arms' centre lines running from the top corners to (50, 40).
   pall: [
-    [0, 0], [15, 0], [50, 35], [85, 0], [100, 0], [100, 15],
-    [60, 55], [60, 100], [40, 100], [40, 55], [0, 15],
+    [0, 0], [17.33, 0], [50, 26.14], [82.67, 0], [100, 0], [100, 13.86],
+    [62, 44.26], [62, 100], [38, 100], [38, 44.26], [0, 13.86],
   ],
   chief: [[0, 0], [100, 0], [100, 30], [0, 30]],
-  pile: [[20, 0], [80, 0], [50, 85]],
+  pile: [[17, 0], [83, 0], [50, 85]],
 };
 // signedArea() follows the flip's winding, so the order stays.
 for (const ordinary of REVERSIBLE) {
@@ -143,14 +158,32 @@ const widenedPolygon = (vertices) => {
 // The ordinary's tincture, top layer first. `x`/`y` bands run between two x or y
 // values in %; `u-v`/`u+v` are diagonal, between values of x − y or x + y.
 // A `tile` [x0, y0, x1, y1] confines a layer to part of the box (square, if
-// diagonal). Stripes repaint the fimbriation where one arm's band runs on into
-// another's.
+// diagonal, unless `half` or `diagonal` gives its stops). Stripes repaint the
+// fimbriation where one arm's band runs on into another's.
 const S = 12;
 const band = (kind, from, to, tile) => ({ kind, from, to, tile });
 const stripe = (kind, from, to, tile) => ({ kind, from, to, tile, stripe: true });
-// Half a tile, split on its diagonal, as gradient stops: 0–50% or 50–100%. The one diagonal band
-// a tile that isn't square can take, as its diagonal isn't a line of constant x ± y.
+// Half a tile, split on its diagonal, as gradient stops: 0–50% or 50–100%. For a tile that isn't
+// square, whose diagonal isn't a line of constant x ± y.
 const half = (kind, end, tile) => ({ kind, tile, stops: end === "start" ? [0, 50] : [50, 100] });
+// A band `halfWidth` real units either side of a tile's diagonal, for an arm that isn't a line of
+// constant x ± y: `u-v` runs from the tile's top left, `u+v` from its top right.
+const diagonal = (kind, halfWidth, tile) => {
+  const [w, h] = real([tile[2] - tile[0], tile[3] - tile[1]]);
+  const length = (2 * w * h) / Math.hypot(w, h);
+  const offset = (halfWidth / length) * 100;
+
+  return {
+    kind,
+    tile,
+    stops: [50 - offset, 50 + offset],
+  };
+};
+// The saltire's arms are the diagonals of a tile as tall as the shield, sloping through (50, 45).
+const SALTIRE_TILE = (100 * 50) / 45;
+// The pall's arms are the diagonals of a tile reaching down to the foot's corners, through (50, 40).
+const PALL_TILE_H = 44.26;
+const PALL_TILE_W = (PALL_TILE_H * 50) / 40;
 // A 2px strip down the centre, from the top to `bottom`, where two tiles meet mid-pixel and
 // would let the fimbriation show between them. Unsoftened, as it lies on its own tincture.
 const seam = (bottom) => ({ kind: "x", tile: [0, 0, 100, bottom], seam: true });
@@ -164,24 +197,23 @@ const BANDS = {
   bend: [band("u-v", -20, 20)],
   "bend-sinister": [band("u+v", 80, 120)],
   chevron: [
-    stripe("u+v", 75 - S, 75),
-    stripe("u-v", 25, 25 + S),
-    band("u+v", 75, 95),
-    band("u-v", 5, 25),
+    stripe("u+v", 72 - S, 72),
+    stripe("u-v", 28, 28 + S),
+    band("u+v", 72, 98),
+    band("u-v", 2, 28),
+  ],
+  cross: [band("x", 38, 62), band("y", 35, 55)],
+  saltire: [
+    diagonal("u-v", 12, [0, 0, SALTIRE_TILE, 100]),
+    diagonal("u+v", 12, [100 - SALTIRE_TILE, 0, 100, 100]),
   ],
-  cross: [band("x", 40, 60), band("y", 35, 55)],
-  saltire: [band("u-v", -15, 15), band("u+v", 85, 115)],
   pall: [
-    stripe("x", 60, 60 + S, [0, 55, 100, 100]),
-    stripe("x", 40 - S, 40, [0, 55, 100, 100]),
-    stripe("u+v", 115, 115 + S, [60, 30, 100, 70]),
-    stripe("u-v", -15 - S, -15, [0, 30, 40, 70]),
-    band("u-v", -15, 15),
-    band("u+v", 85, 115),
-    band("x", 40, 60, [0, 55, 100, 100]),
+    diagonal("u-v", 12, [0, 0, PALL_TILE_W, PALL_TILE_H]),
+    diagonal("u+v", 12, [100 - PALL_TILE_W, 0, 100, PALL_TILE_H]),
+    band("x", 38, 62, [0, 40, 100, 100]),
   ],
   // Each slanted side is its tile's diagonal.
-  pile: [half("u-v", "end", [20, 0, 50, 85]), half("u+v", "start", [50, 0, 80, 85]), seam(83)],
+  pile: [half("u-v", "end", [17, 0, 50, 85]), half("u+v", "start", [50, 0, 83, 85]), seam(83)],
 };
 
 // The bands upside down. A diagonal swaps kind, as x − y becomes x + (100 − y) − 100. A half's
@@ -267,17 +299,27 @@ const bands = (layers, colour) => ({
 // box is shorter, so they are slightly squashed.
 const SCALLOP = 14;
 const SCALLOPS = { chevron: 10 };
+// Wavy half-waves, longer where the default reads as beads: the bend, cross and cornered ordinaries.
+// prettier-ignore
+const WAVES = {
+  bend: 21, "bend-sinister": 21, cross: 20,
+  chevron: 28, saltire: 28, pall: 28,
+};
+const LENGTHS = { wavy: WAVES };
 
 // A quarter of the ordinary's width, in real units. The pile tapers, so its is set by eye.
 // prettier-ignore
 const VOIDS = {
   pale: 7.5, fess: 9, bar: 4.2, bend: 7.7, "bend-sinister": 7.7,
-  chevron: 3.8, cross: 5, saltire: 5.8, pall: 5, pile: 8,
+  chevron: 5, cross: 6, saltire: 6, pall: 6, pile: 8.8,
 };
 for (const ordinary of REVERSIBLE) {
   if (SCALLOPS[ordinary]) {
     SCALLOPS[`${ordinary}-reversed`] = SCALLOPS[ordinary];
   }
+  if (WAVES[ordinary]) {
+    WAVES[`${ordinary}-reversed`] = WAVES[ordinary];
+  }
   VOIDS[`${ordinary}-reversed`] = VOIDS[ordinary];
 }
 const DEPTH = 0.35;
@@ -297,10 +339,135 @@ const arcs = (a, b, scallop, sweep) => {
   });
 };
 
-// Each line maps an edge to arcs; `inward` is the sweep that bulges into the ordinary.
+const WAVE_DEPTH = 0.2;
+
+// Which way half-wave `index` bulges, for an edge walked along the shared axis (`forward`) or
+// against it. Along the axis, `cw` bulges to its left: up for a horizontal edge.
+const waveSweep = (index, forward) => {
+  return forward === (index % 2 === 0) ? "cw" : "ccw";
+};
+
+// The edge a→b cut at every multiple of `period` along a shared axis, so the parallel edges of a
+// band are cut at the same places whichever way the polygon walks them. Each piece runs from
+// `start` to `end` (fractions of the edge) and lies in period `index`.
+const stations = (a, b, period) => {
+  const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+  const length = Math.hypot(dx, dy);
+  // Right, or down for a vertical edge, whichever way the polygon walks it.
+  const forward = Math.abs(dx) > 1e-9 ? dx > 0 : dy > 0;
+  const axis = (forward ? [dx, dy] : [-dx, -dy]).map((d) => d / length);
+  const station = (p) => p[0] * axis[0] + p[1] * axis[1];
+  const [from, to] = [station(a), station(b)];
+
+  const ts = [0, 1];
+  const [low, high] = [Math.min(from, to), Math.max(from, to)];
+  for (let cut = Math.ceil(low / period); cut * period < high; cut++) {
+    const t = (cut * period - from) / (to - from);
+    if (t > 1e-6 && t < 1 - 1e-6) {
+      ts.push(t);
+    }
+  }
+  ts.sort((x, y) => x - y);
+
+  const pieces = ts.slice(1).map((end, i) => {
+    const middle = (ts[i] + end) / 2;
+    return { start: ts[i], end, index: Math.floor((from + (to - from) * middle) / period) };
+  });
+  return { forward, axis, length, pieces };
+};
+
+// One arc per half-wave, phased by position along a shared axis rather than from the edge's
+// start, so the two edges of a band crest together.
+const wavy = (a, b, halfWave) => {
+  const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+  const { forward, length, pieces } = stations(a, b, halfWave);
+  return pieces.map(({ start, end, index }) => {
+    const chord = length * (end - start);
+    // As high as a default wave whatever the length, so a longer wave is gentler, not deeper.
+    const depth = chord * WAVE_DEPTH * (SCALLOP / halfWave);
+    return {
+      to: [a[0] + dx * end, a[1] + dy * end],
+      r: (chord * chord) / (8 * depth) + depth / 2,
+      sweep: waveSweep(index, forward),
+    };
+  });
+};
+
+// The unit normal of a→b pointing into the ordinary. An arc swept `inward` bulges that way.
+const intoOrdinary = (a, b, inward) => {
+  const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+  const length = Math.hypot(dx, dy);
+  return inward === "cw" ? [dy / length, -dx / length] : [-dy / length, dx / length];
+};
+
+const INDENT_DEPTH = 0.5;
+// Seven whole teeth across the shield, so both ends land on the same kind of turn.
+const TOOTH = W / 7;
+
+// A zigzag centred on the edge, its turns at the shared stations, so a band's two edges run in
+// phase, point opposite notch (FD Figs. 91, 106). At 0.5 deep the teeth are right-angled.
+const indented = (a, b, scallop) => {
+  const half = scallop / 2;
+  const { axis, pieces } = stations(a, b, half);
+  const normal = [-axis[1], axis[0]];
+  const height = (scallop * INDENT_DEPTH) / 2;
+  // Even turns sit on one side and odd ones on the other; between them the zigzag is straight.
+  const turnSide = (turn) => (turn % 2 === 0 ? height : -height);
+  const onZigzag = (t) => {
+    const p = [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+    const position = (p[0] * axis[0] + p[1] * axis[1]) / half;
+    const before = Math.floor(position);
+    const blend = position - before;
+    const side = turnSide(before) * (1 - blend) + turnSide(before + 1) * blend;
+    return { to: [p[0] + normal[0] * side, p[1] + normal[1] * side] };
+  };
+  // Start and end on the zigzag itself, not on the plain line, so it meets the shield's edge at
+  // its true angle.
+  return [onZigzag(0), ...pieces.map(({ end }) => onZigzag(end)), { to: b }];
+};
+
+// A merlon or crenel's width, and the battlements' height, in real units. An odd number across
+// the shield's width, so a fess or chief has a merlon at both ends.
+const BATTLEMENT = W / 15;
+const BATTLEMENT_HEIGHT = 6;
+// Embattled on the upper edge only (FD p. 93); the rest on every edge.
+// prettier-ignore
+const UPPER_ONLY = [
+  "fess", "bar", "two-bars", "three-bars", "bend", "bend-sinister", "chevron", "chevron-reversed",
+];
+
+// Battlements centred on the edge, in phase across a band like `wavy`, but merlon opposite
+// merlon: a piece's side is taken from the ordinary, not from the shield.
+const embattled = (a, b, merlon, inward, ordinary) => {
+  const into = intoOrdinary(a, b, inward);
+  // Upper-only ordinaries keep the edges whose outside doesn't face up plain.
+  if (UPPER_ONLY.includes(ordinary) && into[1] < 1e-8) {
+    return [{ to: b }];
+  }
+  const { pieces } = stations(a, b, merlon);
+  const along = (t, [ox, oy]) => [a[0] + (b[0] - a[0]) * t + ox, a[1] + (b[1] - a[1]) * t + oy];
+  // Even pieces are merlons, out of the ordinary; odd ones crenels, into it.
+  const offset = (index) => {
+    const shift = (index % 2 === 0 ? -1 : 1) * (BATTLEMENT_HEIGHT / 2);
+    return [into[0] * shift, into[1] * shift];
+  };
+  return [
+    ...pieces.flatMap(({ start, end, index }) => {
+      const off = offset(index);
+      return [{ to: along(start, off) }, { to: along(end, off) }];
+    }),
+    { to: b },
+  ];
+};
+
+// Each line maps an edge to segments, arcs or straight; `inward` is the sweep that bulges into
+// the ordinary.
 const LINES = {
   engrailed: (a, b, scallop, inward) => arcs(a, b, scallop, inward),
   invected: (a, b, scallop, inward) => arcs(a, b, scallop, inward === "cw" ? "ccw" : "cw"),
+  wavy: (a, b, scallop) => wavy(a, b, scallop),
+  indented: (a, b) => indented(a, b, TOOTH),
+  embattled: (a, b, scallop, inward, ordinary) => embattled(a, b, BATTLEMENT, inward, ordinary),
 };
 
 const side = (a, b, p) => (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
@@ -327,8 +494,8 @@ const crossing = (a, v, b, first, second) => {
     : null;
 };
 
-// `extend` moves the sides on the shield's edge out, as `outer` does; the lined sides stay put.
-const shape = (vertices, line, scallop, extend) => {
+// The lined edges of `vertices` as arcs and lines in real units, and where the shape starts.
+const outline = (vertices, line, scallop) => {
   const inward = signedArea(vertices) > 0 ? "ccw" : "cw";
   const pts = vertices.map(real);
   const straight = vertices.map((v, i) => onShieldEdge(v, vertices[(i + 1) % vertices.length]));
@@ -356,7 +523,12 @@ const shape = (vertices, line, scallop, extend) => {
       start = p;
     }
   });
+  return { pts, straight, edges, start };
+};
 
+// `extend` moves the sides on the shield's edge out, as `outer` does; the lined sides stay put.
+const shape = (vertices, line, scallop, extend) => {
+  const { pts, straight, edges, start } = outline(vertices, line, scallop);
   const commands = edges.flatMap((edge, i) => {
     const segments = edge.map(({ to, r, sweep }) =>
       r
@@ -377,6 +549,89 @@ const shape = (vertices, line, scallop, extend) => {
   return `shape(from ${from}, ${commands.join(", ")}, close)`;
 };
 
+// An outline as an SVG path, in real units. y points down in both, so cw is sweep-flag 1.
+const svgPath = ({ edges, start }) => {
+  const parts = [`M ${num(start[0])} ${num(start[1])}`];
+  for (const { to, r, sweep } of edges.flat()) {
+    const [x, y] = [num(to[0]), num(to[1])];
+    parts.push(r ? `A ${num(r)} ${num(r)} 0 0 ${sweep === "cw" ? 1 : 0} ${x} ${y}` : `L ${x} ${y}`);
+  }
+  return `${parts.join(" ")} Z`;
+};
+
+// The generator's lined ordinary, e.g. `generated("pile", "engrailed")`: the arguments for
+// `outline()` and `shape()`.
+const generated = (ordinary, name) => [
+  ORDINARIES[ordinary],
+  (a, b, scallop, inward) => LINES[name](a, b, scallop, inward, ordinary),
+  (LENGTHS[name] ?? SCALLOPS)[ordinary] ?? SCALLOP,
+];
+const draftOutline = (ordinary, name) => outline(...generated(ordinary, name));
+const generatedShape = (ordinary, name) => shape(...generated(ordinary, name));
+
+// Drawn shapes are segments in real units: ["M", x, y], ["L", x, y], ["C", x1, y1, x2, y2, x, y],
+// ["A", rx, ry, rotation, large, sweep, x, y] and ["Z"].
+const pathShape = (segments) => {
+  const [, startX, startY] = segments[0];
+  const commands = segments.slice(1).map(([command, ...n]) => {
+    switch (command) {
+      case "L":
+        return `line to ${at([n[0], n[1]])}`;
+      case "C":
+        return `curve to ${at([n[4], n[5]])} with ${at([n[0], n[1]])} / ${at([n[2], n[3]])}`;
+      case "A": {
+        const [rx, ry, rotation, large, sweep, x, y] = n;
+        return [
+          `arc to ${at([x, y])} of ${pct((rx * 100) / W)} ${pct((ry * 100) / H)}`,
+          sweep ? "cw" : "ccw",
+          large ? "large" : "",
+          rotation ? `rotate ${rotation}deg` : "",
+        ]
+          .filter(Boolean)
+          .join(" ");
+      }
+      case "Z":
+        return "close";
+      default:
+        throw new Error(`unknown path command ${command}`);
+    }
+  });
+  const last = commands.pop();
+  if (last !== "close") {
+    throw new Error("a drawn path must end with Z");
+  }
+  return `shape(from ${at([startX, startY])}, ${commands.join(", ")}, close)`;
+};
+
+// The same shape upside down, for an ordinary's reversed form.
+const flipPath = (segments) =>
+  segments.map(([command, ...n]) => {
+    switch (command) {
+      case "M":
+      case "L":
+        return [command, n[0], H - n[1]];
+      case "C":
+        return [command, n[0], H - n[1], n[2], H - n[3], n[4], H - n[5]];
+      case "A":
+        return [command, n[0], n[1], n[2] ? -n[2] : 0, n[3], n[4] ? 0 : 1, n[5], H - n[6]];
+      default:
+        return [command];
+    }
+  });
+
+// Drawn shapes by `ordinary-line`, each reversible one also upside down as `ordinary-reversed-line`
+// unless it was drawn too. Upper-only battlements would flip onto the lower edges, so those aren't.
+const DRAWN = { ...PATHS };
+for (const key of Object.keys(PATHS)) {
+  const name = LINE_NAMES.find((line) => key.endsWith(`-${line}`));
+  const ordinary = key.slice(0, -name.length - 1);
+  const reversedKey = `${ordinary}-reversed-${name}`;
+  const upperOnly = name === "embattled" && UPPER_ONLY.includes(ordinary);
+  if (REVERSIBLE.includes(ordinary) && !upperOnly && !(reversedKey in PATHS)) {
+    DRAWN[reversedKey] = flipPath(PATHS[key]);
+  }
+}
+
 const betweenVars = ({ size, points, counts = {} }) => {
   const vars = { "--between-size": `${size}%` };
   points.forEach(([left, top], i) => {
@@ -395,8 +650,15 @@ const betweenVars = ({ size, points, counts = {} }) => {
   return vars;
 };
 
-const onVars = ({ size, counts }) => {
-  const vars = { "--on-size": `${size}%` };
+// The plain ordinary's `between` layout, with a line's overrides on top.
+const mergeLined = (ordinary, line) => {
+  const plain = BETWEEN[ordinary];
+  const lined = BETWEEN_LINED[ordinary]?.[line];
+  return lined ? { ...plain, ...lined, counts: { ...plain.counts, ...lined.counts } } : plain;
+};
+
+const onVars = ({ size, counts }, scale = 1) => {
+  const vars = { "--on-size": `${+(size * scale).toFixed(2)}%` };
   for (const [count, points] of Object.entries(counts)) {
     points.forEach(([left, top], i) => {
       vars[`--on-${count}-${i + 1}-x`] = `${left}%`;
@@ -415,6 +677,12 @@ const layoutVars = () => {
     allVars.push(...Object.keys(vars));
   }
 
+  for (const [ordinary, lines] of Object.entries(BETWEEN_LINED)) {
+    for (const line of Object.keys(lines)) {
+      allVars.push(...Object.keys(betweenVars(mergeLined(ordinary, line))));
+    }
+  }
+
   for (const division of Object.values(ON)) {
     const vars = onVars(division);
     allVars.push(...Object.keys(vars));
@@ -432,6 +700,8 @@ const PAINTS = [
   [OF_THE_FIRST, "var(--the-first, transparent)"],
 ];
 
+export { draftOutline, DRAWN, flipPath, generatedShape, ORDINARIES, pathShape, svgPath };
+
 export default plugin(({ addBase, addUtilities, theme }) => {
   // Unset on an inescutcheon, a canton or a part of a divided shield, so it can't inherit its
   // shield's layout. In the base layer, so an ordinary on it still sets its own.
@@ -451,11 +721,11 @@ export default plugin(({ addBase, addUtilities, theme }) => {
 
   // Isolated, so an ordinary in a quarter paints under the shield's own ordinary.
   // The chief's ::after stays unraised, so charges on it stay on top.
-  const ordinaryRules = (ordinary, pseudo) => ({
+  const ordinaryRules = (ordinary, pseudo, line) => ({
     position: "relative",
     isolation: "isolate",
-    ...(BETWEEN[ordinary] && betweenVars(BETWEEN[ordinary])),
-    ...(ON[ordinary] && onVars(ON[ordinary])),
+    ...(BETWEEN[ordinary] && betweenVars(mergeLined(ordinary, line))),
+    ...(ON[ordinary] && onVars(ON[ordinary], ON_SCALE[line] ?? 1)),
     // With a chief, everything else is drawn in the field below it.
     ...(ordinary === "chief" && {
       "--field-top": "30%",
@@ -478,12 +748,18 @@ export default plugin(({ addBase, addUtilities, theme }) => {
       ? `polygon(${vertices.map(outer).join(", ")}) content-box`
       : polygon(vertices);
     // Browsers without shape() keep the straight polygon.
-    const lined = (line) => [
-      plain,
-      chief
-        ? `${shape(vertices, line, SCALLOP, outer)} content-box`
-        : shape(vertices, line, SCALLOPS[ordinary] ?? SCALLOP),
-    ];
+    const lined = (name, line) => {
+      const edge = (a, b, scallop, inward) => line(a, b, scallop, inward, ordinary);
+      const drawn = DRAWN[`${ordinary}-${name}`];
+      return [
+        plain,
+        chief
+          ? `${shape(vertices, edge, SCALLOP, outer)} content-box`
+          : drawn
+            ? pathShape(drawn)
+            : shape(vertices, edge, (LENGTHS[name] ?? SCALLOPS)[ordinary] ?? SCALLOP),
+      ];
+    };
 
     // Covers the whole shield, so the swapped field lines up with the real one,
     // and the clip moves the ordinary below any chief instead.
@@ -527,11 +803,18 @@ export default plugin(({ addBase, addUtilities, theme }) => {
       });
       // Not fimbriated.
       for (const [name, line] of Object.entries(LINES)) {
-        utilities[`.${ordinary}-${name}-${tincture}`] = ordinaryRules(ordinary, {
-          ...placed,
-          "background-color": colour,
-          "clip-path": lined(line),
-        });
+        if (!lineOrdinaries(name).includes(ordinary)) {
+          continue;
+        }
+        utilities[`.${ordinary}-${name}-${tincture}`] = ordinaryRules(
+          ordinary,
+          {
+            ...placed,
+            "background-color": colour,
+            "clip-path": lined(name, line),
+          },
+          name,
+        );
       }
     }
 
@@ -543,10 +826,17 @@ export default plugin(({ addBase, addUtilities, theme }) => {
         "clip-path": plain,
       });
       for (const [name, line] of Object.entries(LINES)) {
-        utilities[`.${ordinary}-${name}-${fur}`] = ordinaryRules(ordinary, {
-          ...pseudo,
-          "clip-path": lined(line),
-        });
+        if (!lineOrdinaries(name).includes(ordinary)) {
+          continue;
+        }
+        utilities[`.${ordinary}-${name}-${fur}`] = ordinaryRules(
+          ordinary,
+          {
+            ...pseudo,
+            "clip-path": lined(name, line),
+          },
+          name,
+        );
       }
     }
 

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "grailwind",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "scripts": {
     "build": "tailwindcss -i docs/app.css -o docs/site.css",
     "dev": "tailwindcss -i docs/app.css -o docs/site.css --watch",
-    "test": "node test/modes.mjs && npm test -w packages/eslint-plugin",
+    "test": "node test/modes.mjs && node test/drawings.mjs && node test/docs.mjs && npm run drawings -- --check && npm test -w packages/eslint-plugin",
+    "drawings": "node drawings/build.mjs",
     "test:render": "node test/render.mjs",
     "dev:watch": "tailwindcss -i docs/app.css -o docs/site.css --watch=always & python3 -m http.server ${PORT:-8000} -d docs",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "prepare": "husky"
   },
   "keywords": [
     "tailwindcss",
@@ -26,10 +28,12 @@
   "license": "MIT",
   "description": "Heraldic blazon for Tailwind CSS: tinctures, divisions, ordinaries and charges",
   "devDependencies": {
-    "@grailwind/eslint-plugin": "^0.1.0-beta.2",
+    "@grailwind/eslint-plugin": "^0.1.0-beta.4",
     "@html-eslint/parser": "^0.67.0",
     "@tailwindcss/cli": "^4.3.3",
     "eslint": "^10.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.6.0",
     "playwright": "~1.64.1",
     "prettier": "^3.9.10",
     "tailwindcss": "^4.3.3"
@@ -57,6 +61,7 @@
     "ordinaries.js",
     "charges.js",
     "furs.js",
+    "paths.js",
     "strict.css",
     "palette-reset.css",
     "CHANGELOG.md"
@@ -71,5 +76,8 @@
   },
   "bugs": {
     "url": "https://github.com/pafirmin/grailwind/issues"
+  },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown"
   }
 }