@crewlethq/icons 0.8.1 → 0.9.0

package/README.md

@@ -11,6 +11,7 @@ All three are React components compiled from SVG files that ship in the package.
 | Vendor marks | `@crewlethq/icons` | `<VendorMark vendor="slack" />` |
 | Signature illustrations | `@crewlethq/icons` | `<AgentReading />`, `<Icon name="AgentReading" />` |
 | The Crewlet character | `@crewlethq/icons` | `<CrewletFigure motion="wave" />` |
+| The thirty agent characters | `@crewlethq/icons/characters` | `<CrewletCharacter character="hexlet" />` |
 
 ## Glyphs
 
@@ -152,6 +153,25 @@ import { CrewletFigure } from '@crewlethq/icons';
 
 The figure is sized in `em` like the icons (set `font-size` or pass `width` and `height`) and is `aria-hidden`; give the surrounding element an accessible name when the figure carries meaning. Every motion stops when the user prefers reduced motion. The geometry lives in `src/crewletParts.ts` and the motions in `src/CrewletFigure.css`, which the component imports.
 
+### CrewletCharacter
+
+`CrewletCharacter` draws one of the thirty Crewlet characters an agent can be drawn as, in the current text colour:
+
+```tsx
+import { CrewletCharacter, CREWLET_CHARACTERS, isCrewletCharacter } from '@crewlethq/icons/characters';
+
+<CrewletCharacter character="hexlet" style={{ fontSize: 64, color: 'var(--color-node-cyan)' }} />
+```
+
+| 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. |
+
+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.
+
+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.
+
 ## Stylesheets
 
 Two components carry rules, and each imports its own stylesheet as a side effect, so a bundler emits the CSS beside the JavaScript and a consumer gets it without being told to. Nothing here depends on `@crewlethq/tokens`: a rule that wants a token reads it with the literal value as a fallback.

package/dist/characters.d.ts

@@ -0,0 +1,104 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * The Crewlet characters: thirty silhouettes an agent can be drawn as, cut
+ * from the mark's own rules so every one of them reads as a Crewlet.
+ *
+ * FOUR RULES, carried from the mark and never varied by a character:
+ *
+ * - THE 45 DEGREE CUT. Every outer corner is chamfered along both of its
+ *   edges, as the mark's crown and shoulders are, so the family has no curve
+ *   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).
+ * - 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.
+ * - THE CROWN AND STANCE. A V notch cut into every flat crown, and block legs
+ *   under every flat base that stands on them.
+ *
+ * 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.
+ *
+ * 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.
+ */
+/** 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. */
+type CrewletCharacterId = (typeof CREWLET_CHARACTERS)[number];
+/** Whether a value read off the wire names a character this build draws. */
+declare const isCrewletCharacter: (value: unknown) => value is CrewletCharacterId;
+/** A box on the character stage, in its units. */
+interface CharacterBox {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+interface Described {
+    /** The character's name, for a label: `Hexlet`. */
+    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. */
+    readonly bounds: CharacterBox;
+}
+/** A character drawn from polygons on the stage. */
+interface DrawnCharacter extends Described {
+    readonly kind: 'drawn';
+    /** Its outlines, one path each, every one clockwise so the overlaps fill as one union. */
+    readonly shapes: readonly string[];
+    /** What is cut out of its body besides the face: a fold, wheel wells, a mark. */
+    readonly holes: readonly string[];
+    /** The visor band the eyes are measured from. */
+    readonly visor: CharacterBox;
+    /** Where the crown's V notch is cut, or null for a crown with no flat top. */
+    readonly notch: readonly [number, number] | null;
+}
+/** The original Crewlet, drawn from the mark's own paths. */
+interface MarkCharacter extends Described {
+    readonly kind: 'mark';
+    /** Places the mark's own units on the stage. */
+    readonly transform: string;
+    /** The keyline ring, drawn at full detail only. */
+    readonly keyline: string;
+    /** The body and the visor, with the face already cut through them. */
+    readonly body: readonly string[];
+}
+type CrewletCharacterGeometry = DrawnCharacter | MarkCharacter;
+declare const CREWLET_CHARACTER_GEOMETRY: Readonly<Record<CrewletCharacterId, CrewletCharacterGeometry>>;
+
+/**
+ * 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.
+ */
+type CrewletCharacterDetail = 'full' | 'compact';
+interface CrewletCharacterProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'viewBox'> {
+    /** Which character to draw. */
+    character: CrewletCharacterId;
+    /** Defaults to `full`. */
+    detail?: CrewletCharacterDetail | undefined;
+}
+/**
+ * One Crewlet character, in the current text colour, centred in a square.
+ *
+ * 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.
+ */
+declare const CrewletCharacter: ({ character, detail, ...rest }: CrewletCharacterProps) => react.JSX.Element;
+
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, type CharacterBox, CrewletCharacter, type CrewletCharacterDetail, type CrewletCharacterGeometry, type CrewletCharacterId, type CrewletCharacterProps, isCrewletCharacter };

package/dist/characters.js

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

package/dist/chunk-7RRFA6BN.js

@@ -0,0 +1,761 @@
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/CrewletCharacter.tsx
+
+// 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 }
+};
+
+// src/crewletCharacters.ts
+var CREWLET_CHARACTERS = [
+  "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"
+];
+var isCrewletCharacter = (value) => typeof value === "string" && CREWLET_CHARACTERS.includes(value);
+var GROUND = 96;
+var KEYLINE_LINE = 1.35;
+var KEYLINE_GAP = 0.9;
+var VISOR_GAP = 1.3;
+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;
+function cut(points, chamfer) {
+  const out = [];
+  points.forEach((vertex, i) => {
+    const size = typeof chamfer === "number" ? chamfer : chamfer[i] ?? 0;
+    if (!size) {
+      out.push(vertex);
+      return;
+    }
+    const along = (to) => {
+      const dx = to[0] - vertex[0];
+      const dy = to[1] - vertex[1];
+      const t = Math.min(size / Math.hypot(dx, dy), 0.45);
+      return [vertex[0] + dx * t, vertex[1] + dy * t];
+    };
+    out.push(along(points[(i - 1 + points.length) % points.length]), along(points[(i + 1) % points.length]));
+  });
+  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);
+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));
+}
+var rect = (x, y, width, height, chamfer = 0) => poly(
+  [
+    [x, y],
+    [x + width, y],
+    [x + width, y + height],
+    [x, y + height]
+  ],
+  chamfer
+);
+var legs = (left, right, top, width = 10) => [
+  rect(left, top, width, GROUND - top),
+  rect(right, top, width, GROUND - top)
+];
+function gear(cx, cy, outer, inner, teeth) {
+  const points = [];
+  for (let k = 0; k < teeth; k += 1) {
+    const angle = (k * 360 / teeth - 90) * (Math.PI / 180);
+    for (const [radius, degrees] of [
+      [inner, -15],
+      [outer, -8.5],
+      [outer, 8.5],
+      [inner, 15]
+    ]) {
+      const a = angle + degrees * (Math.PI / 180);
+      points.push([cx + radius * Math.cos(a), cy + radius * Math.sin(a)]);
+    }
+  }
+  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 };
+}
+var box = ([x, y, width, height]) => ({ x, y, width, height });
+function drawn(spec) {
+  return {
+    kind: "drawn",
+    name: spec.name,
+    shape: spec.shape,
+    shapes: spec.shapes,
+    holes: spec.holes ?? [],
+    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)
+  };
+}
+var MARK_SCALE = 0.095;
+var MARK_CENTRE = 760;
+var MARK_FEET = 869;
+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);
+  return {
+    kind: "mark",
+    name: "Crewlet",
+    shape: "The original mark, arms raised",
+    transform: `translate(50 ${GROUND}) scale(${MARK_SCALE}) translate(${-MARK_CENTRE} ${-MARK_FEET})`,
+    keyline: paths[0],
+    body: [paths[1], paths[2]],
+    bounds: { x: left, y: top, width: right - left, height: bottom - top }
+  };
+}
+var CREWLET_CHARACTER_GEOMETRY = {
+  crewlet: mark(),
+  hexlet: drawn({
+    name: "Hexlet",
+    shape: "Hexagon with pointed flanks",
+    shapes: [
+      poly(
+        [
+          [30, 22],
+          [70, 22],
+          [86, 54],
+          [70, 86],
+          [30, 86],
+          [14, 54]
+        ],
+        [5, 5, 4, 4, 4, 4]
+      ),
+      ...legs(34, 56, 84)
+    ],
+    visor: [28, 38, 44, 20],
+    notch: 22
+  }),
+  peaklet: drawn({
+    name: "Peaklet",
+    shape: "Pentagon with a peaked roof",
+    shapes: [
+      poly(
+        [
+          [50, 12],
+          [82, 36],
+          [82, 86],
+          [18, 86],
+          [18, 36]
+        ],
+        [6, 5, 4, 4, 5]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    visor: [26, 44, 48, 20]
+  }),
+  prismlet: drawn({
+    name: "Prismlet",
+    shape: "Triangle with cut tips",
+    shapes: [
+      poly(
+        [
+          [50, 10],
+          [90, 86],
+          [10, 86]
+        ],
+        [9, 8, 8]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    visor: [31, 54, 38, 18]
+  }),
+  towerlet: drawn({
+    name: "Towerlet",
+    shape: "Tall pillar, narrow stance",
+    shapes: [rect(32, 12, 36, 74, [8, 8, 4, 4]), ...legs(35, 55, 84)],
+    visor: [36, 24, 28, 16],
+    notch: 12
+  }),
+  bricklet: drawn({
+    name: "Bricklet",
+    shape: "Wide, low slab",
+    shapes: [rect(10, 42, 80, 44, [9, 9, 6, 6]), ...legs(22, 68, 84)],
+    visor: [21, 50, 58, 19],
+    notch: 42
+  }),
+  gemlet: drawn({
+    name: "Gemlet",
+    shape: "Diamond on its point",
+    shapes: [
+      poly(
+        [
+          [50, 6],
+          [90, 48],
+          [50, 90],
+          [10, 48]
+        ],
+        [7, 7, 16, 7]
+      ),
+      ...legs(40, 52, 76, 8)
+    ],
+    visor: [27, 38, 46, 20]
+  }),
+  coglet: drawn({
+    name: "Coglet",
+    shape: "Eight-tooth gear",
+    shapes: [gear(50, 52, 37, 31, 8), ...legs(36, 54, 78)],
+    visor: [30, 40, 40, 18]
+  }),
+  pluslet: drawn({
+    name: "Pluslet",
+    shape: "Cross with squared arms",
+    shapes: [rect(34, 14, 32, 72, [7, 7, 0, 0]), rect(10, 34, 80, 30, 7), ...legs(37, 53, 84)],
+    visor: [20, 40, 60, 18],
+    notch: 14
+  }),
+  shieldlet: drawn({
+    name: "Shieldlet",
+    shape: "Flat crown, pointed base",
+    shapes: [
+      poly(
+        [
+          [16, 16],
+          [84, 16],
+          [84, 54],
+          [50, 92],
+          [16, 54]
+        ],
+        [9, 9, 5, 14, 5]
+      ),
+      ...legs(41, 51, 79, 8)
+    ],
+    visor: [26, 28, 48, 20],
+    notch: 16
+  }),
+  stacklet: drawn({
+    name: "Stacklet",
+    shape: "Stepped crown, square base",
+    shapes: [
+      poly(
+        [
+          [34, 12],
+          [66, 12],
+          [66, 26],
+          [82, 26],
+          [82, 86],
+          [18, 86],
+          [18, 26],
+          [34, 26]
+        ],
+        [4, 4, 0, 5, 4, 4, 5, 0]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    visor: [26, 40, 48, 20],
+    notch: 12
+  }),
+  sparklet: drawn({
+    name: "Sparklet",
+    shape: "Faceted drop",
+    shapes: [
+      poly(
+        [
+          [50, 8],
+          [80, 48],
+          [78, 74],
+          [64, 86],
+          [36, 86],
+          [22, 74],
+          [20, 48]
+        ],
+        [6, 4, 2, 2, 2, 2, 4]
+      ),
+      ...legs(36, 54, 84)
+    ],
+    visor: [30, 48, 40, 18]
+  }),
+  cloudlet: drawn({
+    name: "Cloudlet",
+    shape: "Three-lobed cloud",
+    shapes: [
+      rect(14, 44, 72, 42, [0, 0, 8, 8]),
+      rect(16, 30, 32, 32, 9),
+      rect(33, 18, 34, 34, 10),
+      rect(56, 32, 30, 30, 9),
+      ...legs(30, 60, 84)
+    ],
+    visor: [24, 48, 52, 18],
+    notch: 18
+  }),
+  foxlet: drawn({
+    name: "Foxlet",
+    shape: "Square body, pointed ears",
+    shapes: [
+      rect(18, 34, 64, 52, 6),
+      poly(
+        [
+          [20, 36],
+          [26, 12],
+          [44, 36]
+        ],
+        [0, 4, 0]
+      ),
+      poly(
+        [
+          [56, 36],
+          [74, 12],
+          [80, 36]
+        ],
+        [0, 4, 0]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    visor: [26, 46, 48, 20]
+  }),
+  rocketlet: drawn({
+    name: "Rocketlet",
+    shape: "Nose cone and swept fins",
+    shapes: [
+      poly(
+        [
+          [50, 6],
+          [66, 26],
+          [66, 80],
+          [34, 80],
+          [34, 26]
+        ],
+        [5, 3, 3, 3, 3]
+      ),
+      poly(
+        [
+          [34, 54],
+          [34, 80],
+          [18, 90],
+          [18, 70]
+        ],
+        [0, 0, 3, 3]
+      ),
+      poly(
+        [
+          [66, 54],
+          [82, 70],
+          [82, 90],
+          [66, 80]
+        ],
+        [0, 3, 3, 0]
+      ),
+      ...legs(37, 55, 80, 8)
+    ],
+    visor: [37, 32, 26, 16]
+  }),
+  crownlet: drawn({
+    name: "Crownlet",
+    shape: "Three-point crown",
+    shapes: [
+      rect(18, 40, 64, 46, [0, 0, 6, 6]),
+      poly(
+        [
+          [18, 44],
+          [18, 18],
+          [34, 32],
+          [50, 12],
+          [66, 32],
+          [82, 18],
+          [82, 44]
+        ],
+        [0, 3, 0, 3, 0, 3, 0]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    visor: [27, 48, 46, 20]
+  }),
+  cactlet: drawn({
+    name: "Cactlet",
+    shape: "Trunk with two raised arms",
+    shapes: [
+      rect(32, 12, 36, 74, [10, 10, 0, 0]),
+      rect(16, 50, 18, 9, [0, 0, 0, 3]),
+      rect(16, 28, 9, 31, [4.5, 4.5, 0, 3]),
+      rect(66, 58, 18, 9, [0, 0, 3, 0]),
+      rect(75, 38, 9, 29, [4.5, 4.5, 3, 0]),
+      ...legs(36, 54, 84)
+    ],
+    visor: [37, 26, 26, 16],
+    notch: 12
+  }),
+  wisplet: drawn({
+    name: "Wisplet",
+    shape: "Tall ghost with a zigzag hem",
+    shapes: [
+      poly(
+        [
+          [16, 10],
+          [84, 10],
+          [84, 92],
+          [72.5, 82],
+          [61, 92],
+          [50, 82],
+          [39, 92],
+          [27.5, 82],
+          [16, 92]
+        ],
+        [14, 14, 2, 0, 2, 0, 2, 0, 2]
+      )
+    ],
+    visor: [26, 28, 48, 20],
+    notch: 10
+  }),
+  heartlet: drawn({
+    name: "Heartlet",
+    shape: "Faceted heart",
+    shapes: [
+      poly(
+        [
+          [50, 26],
+          [62, 14],
+          [78, 14],
+          [90, 26],
+          [90, 44],
+          [50, 84],
+          [10, 44],
+          [10, 26],
+          [22, 14],
+          [38, 14]
+        ],
+        [0, 3, 3, 3, 4, 6, 4, 3, 3, 3]
+      ),
+      ...legs(41, 51, 74, 8)
+    ],
+    visor: [23, 30, 54, 18]
+  }),
+  flasklet: drawn({
+    name: "Flasklet",
+    shape: "Lab flask with a narrow neck",
+    shapes: [
+      rect(35, 6, 30, 7, 2),
+      rect(40, 10, 20, 22),
+      poly(
+        [
+          [40, 28],
+          [60, 28],
+          [86, 80],
+          [86, 86],
+          [14, 86],
+          [14, 80]
+        ],
+        [0, 0, 6, 3, 3, 6]
+      ),
+      ...legs(26, 64, 84)
+    ],
+    visor: [33, 54, 34, 14],
+    notch: 6
+  }),
+  chiplet: drawn({
+    name: "Chiplet",
+    shape: "Square chip with pins",
+    shapes: [
+      rect(24, 20, 52, 60, 6),
+      ...[31, 47, 63].map((x) => rect(x, 11, 6, 10)),
+      ...[32, 47, 62].map((y) => rect(15, y, 10, 6)),
+      ...[32, 47, 62].map((y) => rect(75, y, 10, 6)),
+      ...[31, 47, 63].map((x) => rect(x, 78, 6, 18))
+    ],
+    holes: [rect(29, 70, 5, 5)],
+    visor: [31, 34, 38, 18]
+  }),
+  duolet: drawn({
+    name: "Duolet",
+    shape: "Small head on a wide body",
+    shapes: [rect(30, 10, 40, 34, 8), rect(18, 40, 64, 46, 6), ...legs(28, 62, 84)],
+    visor: [36, 19, 28, 15],
+    notch: 10
+  }),
+  chatlet: drawn({
+    name: "Chatlet",
+    shape: "Speech bubble with a tail",
+    shapes: [
+      rect(14, 22, 72, 54, 8),
+      poly(
+        [
+          [26, 72],
+          [46, 72],
+          [22, 94]
+        ],
+        [0, 0, 2]
+      )
+    ],
+    visor: [24, 34, 52, 22],
+    notch: 22
+  }),
+  pagelet: drawn({
+    name: "Pagelet",
+    shape: "Page with a folded corner",
+    shapes: [
+      poly(
+        [
+          [20, 10],
+          [64, 10],
+          [80, 26],
+          [80, 86],
+          [20, 86]
+        ],
+        [4, 0, 0, 4, 4]
+      ),
+      ...legs(28, 62, 84)
+    ],
+    // The fold: two hairline cuts that set the folded corner off the page.
+    holes: [rect(63.3, 10, 1.4, 17.4), rect(63.3, 25.3, 17, 1.4)],
+    visor: [27, 36, 46, 20],
+    notch: 10
+  }),
+  archlet: drawn({
+    name: "Archlet",
+    shape: "Gate with built-in legs",
+    shapes: [
+      poly(
+        [
+          [16, 18],
+          [84, 18],
+          [84, 96],
+          [64, 96],
+          [64, 74],
+          [36, 74],
+          [36, 96],
+          [16, 96]
+        ],
+        [8, 8, 0, 0, 4, 4, 0, 0]
+      )
+    ],
+    visor: [25, 30, 50, 22],
+    notch: 18
+  }),
+  dashlet: drawn({
+    name: "Dashlet",
+    shape: "Body leaning forward",
+    shapes: [
+      poly(
+        [
+          [29, 14],
+          [87, 14],
+          [71, 86],
+          [13, 86]
+        ],
+        6
+      ),
+      ...legs(20, 48, 84)
+    ],
+    visor: [31.5, 28, 42, 20],
+    // A leaning crown's middle is not the stage's.
+    notch: 14,
+    notchX: 58
+  }),
+  octlet: drawn({
+    name: "Octlet",
+    shape: "Regular octagon",
+    shapes: [rect(16, 16, 68, 68, 20), ...legs(35, 55, 81)],
+    visor: [26, 36, 48, 22],
+    notch: 16
+  }),
+  conelet: drawn({
+    name: "Conelet",
+    shape: "Narrow crown, wide base",
+    shapes: [
+      poly(
+        [
+          [30, 12],
+          [70, 12],
+          [88, 84],
+          [12, 84]
+        ],
+        [6, 6, 5, 5]
+      ),
+      ...legs(26, 64, 82)
+    ],
+    visor: [28, 40, 44, 20],
+    notch: 12
+  }),
+  hivelet: drawn({
+    name: "Hivelet",
+    shape: "Upright honeycomb cell",
+    shapes: [
+      poly(
+        [
+          [50, 6],
+          [84, 24],
+          [84, 72],
+          [50, 90],
+          [16, 72],
+          [16, 24]
+        ],
+        [6, 4, 4, 6, 4, 4]
+      ),
+      ...legs(40, 52, 80, 8)
+    ],
+    visor: [25, 36, 50, 20]
+  }),
+  folderlet: drawn({
+    name: "Folderlet",
+    shape: "Folder with a tab",
+    shapes: [
+      poly(
+        [
+          [12, 14],
+          [38, 14],
+          [50, 26],
+          [88, 26],
+          [88, 84],
+          [12, 84]
+        ],
+        [4, 0, 0, 6, 5, 5]
+      ),
+      ...legs(26, 64, 82)
+    ],
+    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(" ");
+}
+function Drawn({ geometry, detail, id }) {
+  const { shapes, holes, 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" })
+  ] });
+}
+var CrewletCharacter = ({ character, detail = "full", ...rest }) => {
+  const id = `crewlet-character-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const geometry = CREWLET_CHARACTER_GEOMETRY[character];
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: viewBoxOf(geometry.bounds),
+      width: "1em",
+      height: "1em",
+      "aria-hidden": "true",
+      focusable: "false",
+      "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 })
+    }
+  );
+};
+var CrewletCharacter_default = CrewletCharacter;
+
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default, isCrewletCharacter };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { SVGProps } from 'react';
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CharacterBox, CrewletCharacter, CrewletCharacterDetail, CrewletCharacterGeometry, CrewletCharacterId, CrewletCharacterProps, isCrewletCharacter } from './characters.js';
 import { G as GlyphSize } from './Glyph-0ZR8lPCf.js';
 
 declare const AgentError: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;

package/dist/index.js

@@ -1,3 +1,4 @@
+export { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY, CrewletCharacter_default as CrewletCharacter, isCrewletCharacter } from './chunk-7RRFA6BN.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.8.1",
+  "version": "0.9.0",
   "description": "Crewlet signature illustrated icons, vendor marks, and the Lucide glyph set as React components.",
   "license": "MIT AND ISC",
   "repository": {
@@ -32,6 +32,10 @@
       "types": "./dist/glyphs-registry.d.ts",
       "import": "./dist/glyphs-registry.js"
     },
+    "./characters": {
+      "types": "./dist/characters.d.ts",
+      "import": "./dist/characters.js"
+    },
     "./favicon/*": "./favicon/*",
     "./glyphs/*": "./glyphs/*",
     "./svg/*": "./svg/*"