@crewlethq/icons 0.15.0 → 0.15.1

package/README.md

@@ -166,11 +166,15 @@ import { CrewletCharacter, CREWLET_CHARACTERS, isCrewletCharacter } from '@crewl
 | Prop | Type | Default | Purpose |
 | ---- | ---- | ------- | ------- |
 | `character` | `CrewletCharacterId`, one of `CREWLET_CHARACTERS` | required | Which character to draw. `crewlet`, the first, is the mark itself. |
-| `detail` | `'full' \| 'compact'` | `'full'` | `full` draws the keyline floating off the body and the gap round the visor; `compact` leaves both out and opens the eyes, for a character too small for a hairline gap to read. |
+| `detail` | `'full' \| 'compact'` | `'full'` | `full` draws the keyline floating off the body and the gap round the visor; `compact` leaves both out, with every other cut as fine as them (the page's fold), and opens the eyes, for a character too small for a hairline gap to read. |
 
-Every character is cut from the mark's own rules: every corner chamfered at 45 degrees, a keyline at the mark's own proportions, a visor with two upright slits measured from the visor itself, a V notch on a flat crown and block legs under a flat base. A character is framed square and centred on what it draws, so it sits in the middle of any box it is given. Its face and holes are cut out of the body with a mask rather than painted over it, so it is transparent where it is cut and stands on any ground; every instance takes its own mask ids.
+Every character is cut from the mark's own rules: every corner chamfered at 45 degrees, a keyline at the mark's own proportions, a visor with two upright slits measured from the visor itself, a V notch on a flat crown and block legs under a flat base.
 
-An id is what a configuration stores, so the set is a contract: `CREWLET_CHARACTERS` lists the ids in the order a picker offers them, `CREWLET_CHARACTER_GEOMETRY` gives each one's name and a few words on its shape, and `isCrewletCharacter` tells an id this build draws from anything else read off the wire. The geometry lives in `src/crewletCharacters.ts`; the original Crewlet is drawn from `svg/crewlet-icon.svg` itself, which `test/characters.test.mjs` holds. `@crewlethq/ui`'s `Avatar` draws a character on a plate in an agent's hue.
+A character is framed square on its optical centre: the point halfway between the middle of its bounding box and the centre of area of its silhouette, in the smallest square round that point that holds everything it draws, the keyline's mitred corners included. A symmetric silhouette is centred geometrically; a heart over thin legs, a speech bubble over its tail or a triangle over its apex moves half the way toward its mass, so it sits in the middle of any box it is given.
+
+Its face and holes are cut into its own paths, wound against the outline round them, and never painted or masked. A cut shows whatever the character stands on (a badge's plate, a chart's card, a hovered row) in every colour and theme, and nothing a host stylesheet does to the paths in its zone can fill one. It carries no mask and no id, so any number of copies, rendered together or apart, can share a page.
+
+An id is what a configuration stores, so the set is a contract: `CREWLET_CHARACTERS` lists the ids in the order a picker offers them, `CREWLET_CHARACTER_GEOMETRY` gives each one's name and a few words on its shape, and `isCrewletCharacter` tells an id this build draws from anything else read off the wire. The geometry lives in `src/crewletCharacters.ts`, the union and the cuts in `src/region.ts` and the frame and the face in `src/characterDrawing.ts`; the original Crewlet is drawn from `svg/crewlet-icon.svg` itself, which `test/characters.test.mjs` holds. `@crewlethq/ui`'s `Avatar` draws a character on a plate in an agent's hue.
 
 ## Stylesheets
 

package/dist/characters.d.ts

@@ -12,7 +12,7 @@ import { SVGProps } from 'react';
  *   in it. `cut` is that rule as a function.
  * - THE KEYLINE. An outline floats off the body with a transparent gap, as the
  *   mark is drawn: a line of KEYLINE_LINE at KEYLINE_GAP, the mark's own
- *   proportions. It is drawn at full detail only (see CrewletCharacter).
+ *   proportions. It is drawn at full detail only (see characterDrawing.ts).
  * - THE VISOR. One band with two upright slits, each slit's size and place
  *   measured from the band itself (EYE), so every face matches the mark's at
  *   whatever body it sits on.
@@ -22,14 +22,19 @@ import { SVGProps } from 'react';
  * THIS FILE IS THE GEOMETRY'S ONE SOURCE. Nothing regenerates it, so an edit
  * here is the edit. Every outline is a polygon on a stage 100 units wide whose
  * ground is at GROUND, written clockwise with the chamfer each corner takes;
- * the paths are computed once, when the module loads. The original Crewlet
- * is the exception: it IS the mark, so it is drawn from the mark's own paths
- * (generated from svg/crewlet-icon.svg at build) placed on the same stage.
+ * the polygons are computed when the module loads, and everything measured
+ * off them (the union, the keyline, the box) the first time it is asked for.
+ * The original Crewlet is the exception: it IS the mark, so it is drawn from
+ * the mark's own paths (generated from svg/crewlet-icon.svg at build) placed
+ * on the same stage.
  *
- * Every outline of one character is drawn as ONE union: the parts overlap and
- * share a winding, so a leg under a body fills as part of it, and the keyline
- * goes round the whole figure rather than round each part.
+ * Every outline of one character is drawn as ONE union (see region.ts): the
+ * parts overlap, so a leg under a body fills as part of it, and the keyline
+ * goes round the whole figure rather than round each part. The face and the
+ * holes are cut out of that union as geometry, never painted over it (see
+ * characterDrawing.ts).
  */
+
 /** The characters, in the order a picker offers them. The first is the mark. */
 declare const CREWLET_CHARACTERS: readonly ["crewlet", "hexlet", "peaklet", "prismlet", "towerlet", "bricklet", "gemlet", "coglet", "pluslet", "shieldlet", "stacklet", "sparklet", "cloudlet", "foxlet", "rocketlet", "crownlet", "cactlet", "wisplet", "heartlet", "flasklet", "chiplet", "duolet", "chatlet", "pagelet", "archlet", "dashlet", "octlet", "conelet", "hivelet", "folderlet"];
 /** One character's id, which is what a configuration stores. */
@@ -48,7 +53,7 @@ interface Described {
     readonly name: string;
     /** What its outline is, in a few words, for a description: `Hexagon with pointed flanks`. */
     readonly shape: string;
-    /** Everything it draws, keyline included, which is what a frame centres on. */
+    /** Everything it draws, keyline included, which is what its frame has to hold. */
     readonly bounds: CharacterBox;
 }
 /** A character drawn from polygons on the stage. */
@@ -80,10 +85,10 @@ declare const CREWLET_CHARACTER_GEOMETRY: Readonly<Record<CrewletCharacterId, Cr
  * How much of a character is drawn.
  *
  * `full` is the mark's own drawing: the keyline floating off the body, and the
- * gap round the visor. `compact` leaves both out and opens the eyes a little,
- * for a character drawn too small for a hairline gap to read (an avatar under
- * 56px): at that size the keyline turns into a blur round the body rather
- * than a line.
+ * gap round the visor. `compact` leaves both out, with every other cut as fine
+ * as them, and opens the eyes a little, for a character drawn too small for a
+ * hairline gap to read (an avatar under 56px): at that size the keyline turns
+ * into a blur round the body rather than a line.
  */
 type CrewletCharacterDetail = 'full' | 'compact';
 interface CrewletCharacterProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'> {
@@ -95,6 +100,12 @@ interface CrewletCharacterProps extends Omit<SVGProps<SVGSVGElement>, 'children'
 /**
  * One Crewlet character, in the current text colour, centred in a square.
  *
+ * It is framed on its optical centre and its face and holes are cut through
+ * it (see `characterDrawing.ts`), so it sits in the middle of whatever box a
+ * consumer puts it in and shows that box's ground through every cut. It
+ * carries no mask and no id, so nothing a host stylesheet paints reaches a
+ * hole and any number of copies can share a page.
+ *
  * It is a picture and says nothing on its own: it is hidden from assistive
  * technology, and whatever draws it beside a name (an avatar, a picker's
  * option) carries that name. Colour it with CSS `color` on it or any ancestor.

package/dist/characters.js

@@ -1 +1 @@
-export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default as CrewletCharacter, isCrewletCharacter } from './chunk-7RRFA6BN.js';
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default as CrewletCharacter, isCrewletCharacter } from './chunk-X7FKGFKM.js';

package/dist/{chunk-7RRFA6BN.js → chunk-X7FKGFKM.js}

@@ -1,14 +1,264 @@
-import { useId } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/CrewletCharacter.tsx
+import { jsx } from 'react/jsx-runtime';
 
 // src/generated/crewletMark.ts
 var CREWLET_MARK = {
   paths: ["M543.42 868.92 l-34.44 -0.24 0 -58.77 0 -58.77 -28.92 0 -28.80 0 -40.20 -39.61 c-119.78 -118.25 -181.49 -179.97 -204.30 -204.30 -15.87 -16.93 -82.75 -96.74 -92.51 -110.38 l-3.76 -5.17 26.80 -18.46 c14.69 -10.11 34.09 -23.51 43.14 -29.86 55.25 -38.32 70.29 -48.43 71.12 -47.49 0.47 0.47 11.64 13.87 24.69 29.74 13.17 15.87 27.98 33.62 32.80 39.50 4.94 5.88 21.63 26.10 37.15 44.90 15.52 18.81 28.56 34.21 29.15 34.21 0.47 0.12 0.82 -30.44 0.82 -67.83 l0 -68.06 37.26 -34.56 c43.38 -40.20 61.83 -57.13 75.11 -69 l9.52 -8.46 261.78 0 261.90 0 47.14 45.73 c25.98 25.16 52.43 51.02 58.66 57.36 l11.52 11.52 0.24 67.94 0.35 67.83 31.74 -40.79 c17.51 -22.33 34.91 -45.02 38.91 -50.19 15.16 -20.34 44.32 -57.72 45.14 -58.07 0.71 -0.24 104.97 75.82 126.83 92.51 2.23 1.65 4.58 3.41 5.17 3.76 1.65 1.18 -7.99 14.22 -46.08 62.07 -35.38 44.32 -49.84 61.13 -92.39 106.97 -19.28 20.81 -38.91 41.73 -148.70 157.40 l-34.68 36.56 -26.45 0.12 c-19.04 0 -26.92 0.35 -27.98 1.41 -1.06 1.06 -1.41 15.05 -1.41 55.72 l0 54.31 -34.91 0.47 c-19.28 0.24 -53.72 0.24 -76.41 0 l-41.49 -0.47 0 -55.72 0 -55.72 -99.33 0 -99.33 0 -0.24 56.19 -0.35 56.07 -39.97 0 c-21.98 0 -55.48 -0.12 -74.29 -0.35z m94.74 -13.87 l7.17 -0.82 0 -54.89 c0 -49.02 0.24 -55.13 1.88 -55.72 1.06 -0.35 51.84 -0.71 112.85 -0.71 l110.97 0 0 55.84 0 55.84 62.89 0 62.89 0 0 -55.84 0 -55.84 31.50 0 31.50 0 14.69 -14.93 c30.80 -31.50 113.20 -118.49 144.47 -152.58 48.66 -53.01 81.34 -90.28 104.85 -119.43 22.80 -28.45 44.43 -56.42 44.43 -57.48 0 -0.59 -2 -2.47 -4.35 -4.23 -2.47 -1.76 -7.05 -5.17 -10.34 -7.64 -3.17 -2.35 -16.93 -12.34 -30.56 -22.22 -13.52 -9.87 -33.50 -24.57 -44.43 -32.68 -16.34 -12.11 -19.98 -14.34 -21.39 -13.17 -0.94 0.82 -5.88 6.82 -10.81 13.40 -4.94 6.47 -13.99 18.46 -20.10 26.57 -6.23 8.11 -26.57 34.44 -45.37 58.54 -18.81 24.10 -36.56 47.02 -39.50 50.78 -5.29 7.05 -5.29 7.05 -11.40 7.05 l-6.23 0 0 -79.58 0 -79.58 -37.85 -37.03 c-20.92 -20.45 -45.14 -44.08 -53.95 -52.66 l-15.99 -15.63 -256.84 0 -256.73 0 -47.49 44.20 c-26.21 24.33 -51.13 47.49 -55.60 51.37 l-7.88 7.05 0 79.11 0 79.23 -6.35 0 -6.35 0 -48.66 -58.54 c-26.80 -32.09 -55.95 -67.24 -64.89 -78.17 -8.93 -10.81 -16.69 -19.63 -17.16 -19.63 -0.94 0 -8.58 5.17 -34.32 22.92 -34.21 23.74 -46.08 31.86 -62.65 43.26 -10.34 7.05 -19.28 13.28 -19.87 13.87 -0.59 0.47 2.35 5.05 6.47 10.11 13.87 16.93 53.13 63.12 66.77 78.40 21.86 24.57 83.81 87.69 145.41 148.23 31.62 31.03 68.65 67.36 82.28 80.76 l24.69 24.45 33.50 0.24 33.38 0.35 0.35 59.13 0.24 59.01 53.37 0 c29.27 0 56.54 -0.35 60.54 -0.71z", "M535.78 783.81 l-0.35 -59.13 -36.67 0 -36.67 0 -6.82 -6.47 c-48.78 -46.43 -176.91 -173.03 -210.41 -207.82 -24.69 -25.74 -75.70 -81.70 -93.69 -102.85 -3.29 -3.88 -5.29 -7.17 -4.70 -7.76 1.29 -1.06 58.30 -40.32 82.05 -56.42 l16.34 -11.05 3.64 4.47 c11.05 13.87 76.99 92.51 98.98 118.14 l25.74 29.97 15.63 0.35 15.52 0.35 0 -82.87 0 -82.75 50.55 -46.67 c27.86 -25.74 50.55 -47.14 50.55 -47.72 0 -0.59 46.78 -1.06 111.55 -1.06 l111.55 0 15.52 14.81 c15.28 14.58 15.52 14.69 17.98 12.58 1.29 -1.18 8.46 -7.76 15.75 -14.58 l13.40 -12.46 17.75 -0.71 c9.76 -0.47 58.77 -0.82 108.85 -0.82 l90.98 0 14.34 13.75 c7.76 7.64 24.57 23.86 37.15 36.20 12.58 12.34 29.15 28.45 36.67 35.85 l13.87 13.40 0.24 82.87 0.35 82.99 14.22 0.35 14.34 0.35 4.47 -5.64 c2.47 -3.06 11.52 -14.11 19.98 -24.45 8.46 -10.34 30.56 -38.32 49.14 -62.30 43.85 -56.42 46.20 -59.36 48.43 -59.36 2.12 0 4.82 1.88 47.96 33.27 43.02 31.27 45.37 33.03 45.37 34.09 0 0.82 -39.03 46.20 -62.42 72.53 -62.42 70.29 -106.50 117.67 -184.08 197.60 l-50.78 52.43 -13.28 0.71 c-7.29 0.47 -23.98 0.82 -37.03 0.82 l-23.86 0 0 57.01 0 57.01 -49.37 0 -49.37 0 0 -56.42 0 -56.42 -114.37 0 c-63.01 0 -120.13 0.35 -126.95 0.82 l-12.58 0.71 0 55.72 0 55.60 -47.61 0 -47.61 0 -0.24 -59.01z m443.16 -373.22 l-0.35 -119.66 -223.93 0.12 -223.93 0.12 -0.35 119.43 -0.24 119.55 224.52 0 224.52 0 -0.24 -119.55z", "M546.36 516.39 c-0.24 -0.59 -0.47 -4.94 -0.35 -9.76 0 -4.82 0.12 -52.54 0.35 -106.15 l0.24 -97.21 209.59 0.24 209.47 0.35 0.35 106.73 0.24 106.62 -209.71 0 c-115.43 0 -209.94 -0.35 -210.18 -0.82z m121.07 -100.50 l-0.35 -66.18 -34.32 -0.35 -34.44 -0.24 0 66.41 0 66.41 34.68 0 34.68 0 -0.24 -66.06z m260.96 0 l-0.35 -66.18 -34.09 0 -34.09 0 0 10.93 c0 5.88 0.12 35.62 0.35 66.06 l0.24 55.25 34.09 0 34.09 0 -0.24 -66.06z"],
-  box: { left: 110.48999999999992, top: 196.30999999999992, right: 1389.0800000000002, bottom: 869.2899999999998 }
+  box: { left: 110.48999999999992, top: 196.30999999999992, right: 1389.0800000000002, bottom: 869.2899999999998 },
+  centroid: { x: 755.6746766446299, y: 497.3295661269271 }
 };
 
+// src/region.ts
+var twiceArea = (ring) => ring.reduce((sum, p, i) => {
+  const q = ring[(i + 1) % ring.length];
+  return sum + p[0] * q[1] - q[0] * p[1];
+}, 0);
+function collect(rings, add, into) {
+  for (const ring of rings) {
+    ring.forEach((p, i) => {
+      const q = ring[(i + 1) % ring.length];
+      if (p[1] === q[1]) return;
+      into.push(
+        p[1] < q[1] ? { x0: p[0], y0: p[1], x1: q[0], y1: q[1], wind: 1, add } : { x0: q[0], y0: q[1], x1: p[0], y1: p[1], wind: -1, add }
+      );
+    });
+  }
+}
+var xAt = (e, y) => y === e.y0 ? e.x0 : y === e.y1 ? e.x1 : e.x0 + (y - e.y0) * (e.x1 - e.x0) / (e.y1 - e.y0);
+function heights(edges) {
+  const ys = /* @__PURE__ */ new Set();
+  for (const e of edges) {
+    ys.add(e.y0);
+    ys.add(e.y1);
+  }
+  for (let i = 0; i < edges.length; i += 1) {
+    const a = edges[i];
+    for (let j = i + 1; j < edges.length && edges[j].y0 < a.y1; j += 1) {
+      const b = edges[j];
+      const top = Math.max(a.y0, b.y0);
+      const bottom = Math.min(a.y1, b.y1);
+      if (bottom <= top) continue;
+      const above = xAt(a, top) - xAt(b, top);
+      const below = xAt(a, bottom) - xAt(b, bottom);
+      if (above * below < 0) ys.add(top + (bottom - top) * above / (above - below));
+    }
+  }
+  return [...ys].sort((p, q) => p - q);
+}
+var SNAP = 1e-9;
+function snapper() {
+  const seen = /* @__PURE__ */ new Map();
+  return (y, x) => {
+    let xs = seen.get(y);
+    if (!xs) seen.set(y, xs = []);
+    for (const known of xs) if (Math.abs(known - x) <= SNAP) return known;
+    xs.push(x);
+    return x;
+  };
+}
+function spansOf(active, top, bottom, snap) {
+  const at = active.map((e) => ({ e, a: snap(top, xAt(e, top)), b: snap(bottom, xAt(e, bottom)) })).sort((p, q) => p.a + p.b - (q.a + q.b));
+  const spans = [];
+  let added = 0;
+  let removed = 0;
+  let inside = false;
+  let from = [0, 0];
+  for (let i = 0; i < at.length; ) {
+    const { a, b } = at[i];
+    for (; i < at.length && at[i].a === a && at[i].b === b; i += 1) {
+      const { e } = at[i];
+      if (e.add) added += e.wind;
+      else removed += e.wind;
+    }
+    const now = added !== 0 && removed === 0;
+    if (now && !inside) from = [a, b];
+    else if (!now && inside) spans.push({ left: from, right: [a, b] });
+    inside = now;
+  }
+  return spans;
+}
+function minus(a, b) {
+  const out = [];
+  let j = 0;
+  for (const [start, end] of a) {
+    let from = start;
+    while (j < b.length && b[j][1] <= from) j += 1;
+    for (let k = j; k < b.length && b[k][0] < end && from < end; k += 1) {
+      const [bStart, bEnd] = b[k];
+      if (bStart > from) out.push([from, bStart]);
+      from = Math.max(from, bEnd);
+    }
+    if (from < end) out.push([from, end]);
+  }
+  return out;
+}
+function boundaryOf(ys, slabs) {
+  const out = [];
+  slabs.forEach((spans, k) => {
+    const top = ys[k];
+    const bottom = ys[k + 1];
+    for (const { left, right } of spans) {
+      out.push([
+        [right[0], top],
+        [right[1], bottom]
+      ]);
+      out.push([
+        [left[1], bottom],
+        [left[0], top]
+      ]);
+    }
+  });
+  ys.forEach((y, k) => {
+    const above = k > 0 ? slabs[k - 1].map(({ left, right }) => [left[1], right[1]]) : [];
+    const below = k < slabs.length ? slabs[k].map(({ left, right }) => [left[0], right[0]]) : [];
+    for (const [a, b] of minus(below, above)) {
+      out.push([
+        [a, y],
+        [b, y]
+      ]);
+    }
+    for (const [a, b] of minus(above, below)) {
+      out.push([
+        [b, y],
+        [a, y]
+      ]);
+    }
+  });
+  return out.filter(([a, b]) => a[0] !== b[0] || a[1] !== b[1]);
+}
+var EPSILON = 1e-9;
+function simplify(ring) {
+  let points = [...ring];
+  let changed = true;
+  while (changed && points.length >= 3) {
+    changed = false;
+    const kept = [];
+    for (let i = 0; i < points.length; i += 1) {
+      const prev = kept.length > 0 ? kept[kept.length - 1] : points[points.length - 1];
+      const p = points[i];
+      const next = points[(i + 1) % points.length];
+      const ux = p[0] - prev[0];
+      const uy = p[1] - prev[1];
+      const vx = next[0] - p[0];
+      const vy = next[1] - p[1];
+      const short = Math.hypot(ux, uy) < EPSILON;
+      const straight = Math.abs(ux * vy - uy * vx) < EPSILON;
+      if (short || straight) {
+        changed = true;
+        continue;
+      }
+      kept.push(p);
+    }
+    points = kept;
+  }
+  return points;
+}
+function chain(segments) {
+  const key = (p) => `${p[0]} ${p[1]}`;
+  const from = /* @__PURE__ */ new Map();
+  segments.forEach(([a], i) => {
+    const list = from.get(key(a));
+    if (list) list.push(i);
+    else from.set(key(a), [i]);
+  });
+  const used = new Uint8Array(segments.length);
+  const rings = [];
+  segments.forEach((first, i) => {
+    if (used[i]) return;
+    const ring = [];
+    let at = i;
+    while (at !== void 0) {
+      used[at] = 1;
+      const [a, b] = segments[at];
+      ring.push(a);
+      if (b[0] === first[0][0] && b[1] === first[0][1]) break;
+      at = from.get(key(b))?.find((n) => !used[n]);
+    }
+    rings.push(ring);
+  });
+  return rings.map(simplify).filter((ring) => ring.length >= 3 && Math.abs(twiceArea(ring)) > EPSILON);
+}
+function region(add, remove = []) {
+  const edges = [];
+  collect(add, true, edges);
+  collect(remove, false, edges);
+  edges.sort((p, q) => p.y0 - q.y0);
+  const ys = heights(edges);
+  const snap = snapper();
+  const slabs = [];
+  let next = 0;
+  let active = [];
+  for (let k = 0; k + 1 < ys.length; k += 1) {
+    const top = ys[k];
+    const bottom = ys[k + 1];
+    while (next < edges.length && edges[next].y0 <= top) active.push(edges[next++]);
+    active = active.filter((e) => e.y1 > top);
+    slabs.push(spansOf(active, top, bottom, snap));
+  }
+  return chain(boundaryOf(ys, slabs));
+}
+var areaOf = (rings) => rings.reduce((sum, ring) => sum + twiceArea(ring), 0) / 2;
+function centroidOf(rings) {
+  let x = 0;
+  let y = 0;
+  for (const ring of rings) {
+    ring.forEach((p, i) => {
+      const q = ring[(i + 1) % ring.length];
+      const cross = p[0] * q[1] - q[0] * p[1];
+      x += (p[0] + q[0]) * cross;
+      y += (p[1] + q[1]) * cross;
+    });
+  }
+  const six = 6 * areaOf(rings);
+  return [x / six, y / six];
+}
+var clockwise = (ring) => twiceArea(ring) < 0 ? ring.reverse() : ring;
+function strokeBand(rings, distance, miterLimit = 4) {
+  const pieces = [];
+  for (const ring of rings) {
+    ring.forEach((p, i) => {
+      const q = ring[(i + 1) % ring.length];
+      const r = ring[(i + 2) % ring.length];
+      const length = Math.hypot(q[0] - p[0], q[1] - p[1]);
+      const nx = (q[1] - p[1]) / length;
+      const ny = -(q[0] - p[0]) / length;
+      const onward = Math.hypot(r[0] - q[0], r[1] - q[1]);
+      const mx = (r[1] - q[1]) / onward;
+      const my = -(r[0] - q[0]) / onward;
+      const d = distance;
+      pieces.push(
+        clockwise([
+          [p[0] + nx * d, p[1] + ny * d],
+          [q[0] + nx * d, q[1] + ny * d],
+          [q[0] - nx * d, q[1] - ny * d],
+          [p[0] - nx * d, p[1] - ny * d]
+        ])
+      );
+      const turn = (q[0] - p[0]) * (r[1] - q[1]) - (q[1] - p[1]) * (r[0] - q[0]);
+      if (turn === 0) return;
+      const side = turn > 0 ? 1 : -1;
+      const a = [q[0] + side * nx * d, q[1] + side * ny * d];
+      const b = [q[0] + side * mx * d, q[1] + side * my * d];
+      const sx = nx + mx;
+      const sy = ny + my;
+      const reach = sx * sx + sy * sy;
+      if (reach > 0 && 2 / Math.sqrt(reach) <= miterLimit) {
+        const tip = [q[0] + side * sx * 2 * d / reach, q[1] + side * sy * 2 * d / reach];
+        pieces.push(clockwise([q, a, tip, b]));
+      } else {
+        pieces.push(clockwise([q, a, b]));
+      }
+    });
+  }
+  return pieces;
+}
+var round = (n) => Math.round(n * 100) / 100;
+function pathOfRings(rings) {
+  return rings.map((ring) => {
+    const points = ring.map(([x, y]) => `${round(x)} ${round(y)}`).filter((p, i, all) => p !== all[i - 1]);
+    return `M${points.join("L")}Z`;
+  }).join("");
+}
+
 // src/crewletCharacters.ts
 var CREWLET_CHARACTERS = [
   "crewlet",
@@ -47,13 +297,14 @@ var GROUND = 96;
 var KEYLINE_LINE = 1.35;
 var KEYLINE_GAP = 0.9;
 var VISOR_GAP = 1.3;
+var HAIRLINE = 2;
 var EYE = {
   full: { width: 0.164, height: 0.62 },
   compact: { width: 0.19, height: 0.68 },
   offset: 0.312
 };
 var NOTCH = { half: 3.2, depth: 2.6 };
-var round = (n) => Math.round(n * 100) / 100;
+var round2 = (n) => Math.round(n * 100) / 100;
 function cut(points, chamfer) {
   const out = [];
   points.forEach((vertex, i) => {
@@ -72,14 +323,10 @@ function cut(points, chamfer) {
   });
   return out;
 }
-var pathOf = (points) => `M${points.map(([x, y]) => `${round(x)} ${round(y)}`).join("L")}Z`;
-var area = (points) => points.reduce((sum, p, i) => {
-  const q = points[(i + 1) % points.length];
-  return sum + p[0] * q[1] - q[0] * p[1];
-}, 0);
+var pathOf = (points) => `M${points.map(([x, y]) => `${round2(x)} ${round2(y)}`).join("L")}Z`;
 function poly(points, chamfer = 0) {
   const chamfers = typeof chamfer === "number" ? points.map(() => chamfer) : chamfer;
-  return area(points) < 0 ? pathOf(cut([...points].reverse(), [...chamfers].reverse())) : pathOf(cut(points, chamfers));
+  return twiceArea(points) < 0 ? cut([...points].reverse(), [...chamfers].reverse()) : cut(points, chamfers);
 }
 var rect = (x, y, width, height, chamfer = 0) => poly(
   [
@@ -110,45 +357,56 @@ function gear(cx, cy, outer, inner, teeth) {
   }
   return poly(points);
 }
-function boxOf(paths, grow) {
-  const numbers = paths.join(" ").match(/-?\d*\.?\d+/g).map(Number);
-  let left = Infinity;
-  let top = Infinity;
-  let right = -Infinity;
-  let bottom = -Infinity;
-  for (let i = 0; i < numbers.length; i += 2) {
-    left = Math.min(left, numbers[i]);
-    right = Math.max(right, numbers[i]);
-    top = Math.min(top, numbers[i + 1]);
-    bottom = Math.max(bottom, numbers[i + 1]);
-  }
-  return { x: left - grow, y: top - grow, width: right - left + 2 * grow, height: bottom - top + 2 * grow };
+function boxOf(rings) {
+  const points = rings.flat();
+  const xs = points.map(([x]) => x);
+  const ys = points.map(([, y]) => y);
+  const left = Math.min(...xs);
+  const top = Math.min(...ys);
+  return { x: left, y: top, width: Math.max(...xs) - left, height: Math.max(...ys) - top };
 }
 var box = ([x, y, width, height]) => ({ x, y, width, height });
+var RINGS = /* @__PURE__ */ new WeakMap();
 function drawn(spec) {
-  return {
+  const holes = spec.holes ?? [];
+  let bounds;
+  const geometry = {
     kind: "drawn",
     name: spec.name,
     shape: spec.shape,
-    shapes: spec.shapes,
-    holes: spec.holes ?? [],
+    shapes: spec.shapes.map(pathOf),
+    holes: holes.map(pathOf),
     visor: box(spec.visor),
     notch: spec.notch === void 0 ? null : [spec.notchX ?? 50, spec.notch],
-    // The keyline reaches its gap plus its line past the outline.
-    bounds: boxOf(spec.shapes, KEYLINE_GAP + KEYLINE_LINE)
+    // It takes the union, so it is measured the first time it is asked for.
+    get bounds() {
+      return bounds ??= boxOf([...silhouetteOf(geometry), ...keylineReachOf(geometry)]);
+    }
   };
+  RINGS.set(geometry, { parts: spec.shapes, holes });
+  return geometry;
+}
+var ringsOf = (geometry) => RINGS.get(geometry);
+function silhouetteOf(geometry) {
+  const rings = ringsOf(geometry);
+  return rings.silhouette ??= region(rings.parts);
+}
+function keylineReachOf(geometry) {
+  const rings = ringsOf(geometry);
+  return rings.reach ??= strokeBand(silhouetteOf(geometry), KEYLINE_GAP + KEYLINE_LINE);
 }
 var MARK_SCALE = 0.095;
 var MARK_CENTRE = 760;
 var MARK_FEET = 869;
+var markOnStage = (x, y) => [
+  50 + (x - MARK_CENTRE) * MARK_SCALE,
+  GROUND + (y - MARK_FEET) * MARK_SCALE
+];
+var MARK_CENTROID = markOnStage(CREWLET_MARK.centroid.x, CREWLET_MARK.centroid.y);
 function mark() {
   const { paths, box: own } = CREWLET_MARK;
-  const onStage = (x, y) => [
-    50 + (x - MARK_CENTRE) * MARK_SCALE,
-    GROUND + (y - MARK_FEET) * MARK_SCALE
-  ];
-  const [left, top] = onStage(own.left, own.top);
-  const [right, bottom] = onStage(own.right, own.bottom);
+  const [left, top] = markOnStage(own.left, own.top);
+  const [right, bottom] = markOnStage(own.right, own.bottom);
   return {
     kind: "mark",
     name: "Crewlet",
@@ -659,89 +917,103 @@ var CREWLET_CHARACTER_GEOMETRY = {
     visor: [24, 40, 52, 22]
   })
 };
-var round2 = (n) => Math.round(n * 100) / 100;
-function viewBoxOf({ x, y, width, height }) {
-  const side = Math.max(width, height);
-  return [x + width / 2 - side / 2, y + height / 2 - side / 2, side, side].map(round2).join(" ");
+
+// src/characterDrawing.ts
+var OPTICAL_PULL = 0.5;
+var rect2 = (x, y, width, height) => [
+  [x, y],
+  [x + width, y],
+  [x + width, y + height],
+  [x, y + height]
+];
+function widthOf(ring) {
+  let least = Infinity;
+  ring.forEach((p, i) => {
+    const q = ring[(i + 1) % ring.length];
+    const length = Math.hypot(q[0] - p[0], q[1] - p[1]);
+    if (length === 0) return;
+    const depth = Math.max(
+      ...ring.map((r) => Math.abs((q[0] - p[0]) * (r[1] - p[1]) - (q[1] - p[1]) * (r[0] - p[0])) / length)
+    );
+    least = Math.min(least, depth);
+  });
+  return least;
 }
-function Drawn({ geometry, detail, id }) {
-  const { shapes, holes, visor, notch } = geometry;
+function cutsOf(geometry, detail) {
+  const { visor, notch } = geometry;
   const full = detail === "full";
-  const d = shapes.join("");
   const eye = full ? EYE.full : EYE.compact;
   const eyeWidth = visor.width * eye.width;
   const eyeHeight = visor.height * eye.height;
   const eyeTop = visor.y + (visor.height - eyeHeight) / 2;
   const middle = visor.x + visor.width / 2;
   const offset = visor.width * EYE.offset;
-  const reach = { x: -40, y: -40, width: 180, height: 180 };
-  const face = `${id}-face`;
-  const ring = `${id}-ring`;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("mask", { id: face, maskUnits: "userSpaceOnUse", ...reach, children: [
-        /* @__PURE__ */ jsx("rect", { ...reach, fill: "#fff" }),
-        /* @__PURE__ */ jsxs("g", { fill: "#000", children: [
-          [middle - offset, middle + offset].map((centre) => /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: round2(centre - eyeWidth / 2),
-              y: round2(eyeTop),
-              width: round2(eyeWidth),
-              height: round2(eyeHeight)
-            },
-            centre
-          )),
-          notch && /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: `M${round2(notch[0] - NOTCH.half)} ${round2(notch[1] - 1)}L${round2(notch[0] + NOTCH.half)} ${round2(
-                notch[1] - 1
-              )}L${round2(notch[0])} ${round2(notch[1] + NOTCH.depth)}Z`
-            }
-          ),
-          holes.map((hole) => /* @__PURE__ */ jsx("path", { d: hole }, hole))
-        ] }),
-        full && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: visor.x,
-            y: visor.y,
-            width: visor.width,
-            height: visor.height,
-            fill: "none",
-            stroke: "#000",
-            strokeWidth: VISOR_GAP
-          }
-        )
-      ] }),
-      full && /* @__PURE__ */ jsxs("mask", { id: ring, maskUnits: "userSpaceOnUse", ...reach, children: [
-        /* @__PURE__ */ jsx("rect", { ...reach, fill: "#fff" }),
-        /* @__PURE__ */ jsx("path", { d, fill: "#000", stroke: "#000", strokeWidth: KEYLINE_GAP * 2, strokeLinejoin: "miter" })
-      ] })
-    ] }),
-    full && /* @__PURE__ */ jsx(
-      "path",
-      {
-        d,
-        mask: `url(#${ring})`,
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: (KEYLINE_GAP + KEYLINE_LINE) * 2,
-        strokeLinejoin: "miter"
-      }
-    ),
-    /* @__PURE__ */ jsx("path", { d, mask: `url(#${face})`, fill: "currentColor" })
-  ] });
+  const cuts = [middle - offset, middle + offset].map(
+    (centre) => rect2(centre - eyeWidth / 2, eyeTop, eyeWidth, eyeHeight)
+  );
+  if (notch) {
+    cuts.push([
+      [notch[0] - NOTCH.half, notch[1] - 1],
+      [notch[0] + NOTCH.half, notch[1] - 1],
+      [notch[0], notch[1] + NOTCH.depth]
+    ]);
+  }
+  for (const hole of ringsOf(geometry).holes) if (full || widthOf(hole) > HAIRLINE) cuts.push(hole);
+  if (full) {
+    const half = VISOR_GAP / 2;
+    cuts.push(rect2(visor.x - half, visor.y - half, visor.width + VISOR_GAP, visor.height + VISOR_GAP));
+    cuts.push([...rect2(visor.x + half, visor.y + half, visor.width - VISOR_GAP, visor.height - VISOR_GAP)].reverse());
+  }
+  return cuts;
+}
+function frameOf(bounds, centroid) {
+  const boxX = bounds.x + bounds.width / 2;
+  const boxY = bounds.y + bounds.height / 2;
+  const x = boxX + OPTICAL_PULL * (centroid[0] - boxX);
+  const y = boxY + OPTICAL_PULL * (centroid[1] - boxY);
+  const side = Math.max(bounds.width + 2 * Math.abs(x - boxX), bounds.height + 2 * Math.abs(y - boxY));
+  return { x: x - side / 2, y: y - side / 2, width: side, height: side };
+}
+function drawnDrawing(geometry) {
+  const { parts } = ringsOf(geometry);
+  const silhouette = silhouetteOf(geometry);
+  const made = {};
+  const body = (detail) => pathOfRings(region(parts, cutsOf(geometry, detail)));
+  const keyline = () => pathOfRings(
+    region([...silhouette, ...keylineReachOf(geometry)], [...silhouette, ...strokeBand(silhouette, KEYLINE_GAP)])
+  );
+  return {
+    frame: frameOf(geometry.bounds, centroidOf(silhouette)),
+    paths: (detail) => made[detail] ??= detail === "full" ? [keyline(), body("full")] : [body("compact")]
+  };
+}
+var drawings = /* @__PURE__ */ new Map();
+function drawingOf(character) {
+  let drawing = drawings.get(character);
+  if (drawing) return drawing;
+  const geometry = CREWLET_CHARACTER_GEOMETRY[character];
+  if (geometry.kind === "mark") {
+    const full = [geometry.keyline, ...geometry.body];
+    drawing = {
+      frame: frameOf(geometry.bounds, MARK_CENTROID),
+      paths: (detail) => detail === "full" ? full : geometry.body
+    };
+  } else {
+    drawing = drawnDrawing(geometry);
+  }
+  drawings.set(character, drawing);
+  return drawing;
 }
+var round3 = (n) => Math.round(n * 100) / 100;
 var CrewletCharacter = ({ character, detail = "full", ...rest }) => {
-  const id = `crewlet-character-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
   const geometry = CREWLET_CHARACTER_GEOMETRY[character];
+  const { frame, paths } = drawingOf(character);
+  const drawn2 = paths(detail).map((d) => /* @__PURE__ */ jsx("path", { d }, d));
   return /* @__PURE__ */ jsx(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: viewBoxOf(geometry.bounds),
+      viewBox: [frame.x, frame.y, frame.width, frame.height].map(round3).join(" "),
       width: "1em",
       height: "1em",
       "aria-hidden": "true",
@@ -749,10 +1021,7 @@ var CrewletCharacter = ({ character, detail = "full", ...rest }) => {
       "data-character": character,
       "data-detail": detail,
       ...rest,
-      children: geometry.kind === "mark" ? /* @__PURE__ */ jsxs("g", { transform: geometry.transform, fill: "currentColor", children: [
-        detail === "full" && /* @__PURE__ */ jsx("path", { d: geometry.keyline }),
-        geometry.body.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
-      ] }) : /* @__PURE__ */ jsx(Drawn, { geometry, detail, id })
+      children: /* @__PURE__ */ jsx("g", { fill: "currentColor", transform: geometry.kind === "mark" ? geometry.transform : void 0, children: drawn2 })
     }
   );
 };

package/dist/index.js

@@ -1,4 +1,4 @@
-export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default as CrewletCharacter, isCrewletCharacter } from './chunk-7RRFA6BN.js';
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default as CrewletCharacter, isCrewletCharacter } from './chunk-X7FKGFKM.js';
 import { cssLength } from './chunk-TOSJN7HA.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './CrewletFigure-4PMMCAFG.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/icons",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Crewlet signature illustrated icons, vendor marks, and the Lucide glyph set as React components.",
   "license": "MIT AND ISC",
   "repository": {