@brunosouzas/design-system 0.4.0 → 0.5.1

package/README.md

@@ -25,7 +25,7 @@ The visual identity of [brunosouzas.com](https://brunosouzas.com): design tokens
 
 ## Status
 
-Early. The first change of the [roadmap](docs/roadmap.md) is implemented: the token source and its CSS, TypeScript and JSON exports, the motion components, and the circuit-breaker state machine as the first catalogue scene (16:9 and 4:5, Portuguese and English), with commands to render its stills and videos. The first variety scene, `publish-subscribe`, is implemented with independent message copies, Publish acceptance, two ACKs and a local invoice NACK. Its owner stills/video approval is pending; implementation is not visual approval. The illustration pieces (roadmap item 3), the metro and diagram pieces (item 6) stackledger's map markers, zones and icons (AB#167, 0.3.0) and the body diagram pieces (AB#141, 0.3.2) are implemented: the static drawing library that covers, banners, diagrams and scenes share, with a command that builds a blog cover from a JSON spec. The published covers are not ported to it yet (item 5).
+Early. The first change of the [roadmap](docs/roadmap.md) is implemented: the token source and its CSS, TypeScript and JSON exports, the motion components, and the circuit-breaker state machine as the first catalogue scene (16:9 and 4:5, Portuguese and English), with commands to render its stills and videos. The first variety scene, `publish-subscribe`, is implemented with independent message copies, Publish acceptance, two ACKs and a local invoice NACK. Its owner stills/video approval is pending; implementation is not visual approval. The illustration pieces (roadmap item 3), the metro and diagram pieces (item 6) stackledger's map markers, zones and icons (AB#167, 0.3.0) and the body diagram pieces (AB#141, 0.3.2) are implemented: the static drawing library that covers, banners, diagrams and scenes share, with a command that builds a blog cover from a JSON spec. The published covers are not ported to it yet (item 5). The cast of mascots and the emotes (AB#152, 0.5.0) are pieces too, with the approved cast motion test in the Studio; new videos are language-neutral by default ([ADR 0005](docs/adr/0005-neutral-videos-and-the-cast.md)).
 
 ## What it is
 
@@ -34,7 +34,8 @@ The blog's articles explain how systems behave: a circuit breaker opening, a pip
 - **Design tokens, one source.** Colours with fixed meanings (green healthy, orange blocked, yellow transitional, red the failure path), the Lato type scale, the thick ink outline, the hard offset shadow, radii, and motion timings. Exported as CSS variables for the site, TypeScript for the animations and JSON for anything else (the SVG generators of the static diagrams).
 - **Motion components.** React components for [Remotion](https://www.remotion.dev): an ink block with a hard shadow, a pill label, an arrow that draws itself, a token travelling along a transition, call-result squares, a countdown ring. Flow primitives in `src/brand/flow-components.tsx` add a white hexagonal `Exchange`, rail-ended `Queue`, yellow-tab `TaggedContainer` and persistent `PositionedToken` (stationary or path-positioned). Copy identities, splits and ACK/NACK rules belong to scenes, not to a generic message engine.
 - **Illustration pieces.** The objects the blog's covers and diagrams draw again and again (pill label, sheet, code panel, robot, server stack, gear, road, the 26 EIP icons and more), each a pure TypeScript function that returns an SVG node tree from the tokens. The same tree becomes an SVG file for a cover and React elements for a scene, and a scene animates a piece by recomputing its parameters every frame. See [Illustration pieces and covers](#illustration-pieces-and-covers).
-- **A catalogue of scenes.** Each scene animates something a published article already says, in 16:9 (article) and 4:5 (LinkedIn), in Portuguese and English from one text table. The first is the [circuit-breaker state machine](docs/spikes/2026-10-22-motion-pilot/README.md).
+- **A cast and emotes.** Seven mascots that are the technical objects themselves (Dev, AI agent, Architect, DevOps, Data, Requester, Message) and eight reaction symbols with a fixed meaning, so a video can tell its story without words. See [The cast and the emotes](#the-cast-and-the-emotes).
+- **A catalogue of scenes.** Each scene animates something a published article already says. The first two are in 16:9 (article) and 4:5 (LinkedIn), in Portuguese and English from one text table; new scenes are one language-neutral 16:9 video ([ADR 0005](docs/adr/0005-neutral-videos-and-the-cast.md)). The first is the [circuit-breaker state machine](docs/spikes/2026-10-22-motion-pilot/README.md).
 
 The style follows the illustration covers of the [Spotify Engineering blog](https://engineering.atspotify.com/): flat shapes, a dark ink outline, a hard shadow with no blur, saturated colours on a calm page.
 
@@ -135,13 +136,14 @@ The components take every colour and size from the tokens, and what is visible a
 
 ### Maps and diagrams
 
-Thirteen pieces draw a metro map and its page diagrams, for [stackledger](https://github.com/brunosouzas/stackledger) and any other map in this style: `lineBadge`, `stationMarker` (stop, interchange as a capsule, deprecated), `pipe`, `countBadge`, `nodeBlock`, `pillNode`, `hexNode` (normal, focus, placeholder), `messageArrow` (curved, straight or through two `controls` points, with a head and an optional label; `kind` `reply`, `failure` or `failFast` dashes it and paints it as ADR 0003 says), `ledgerMark` (stackledger's mark; `surface: "dark"` lines it with a light rim), `renewalRing` (orange bands round a station), `suggestedHalo` (a dashed muted circle), `licenceMark` (a 10-unit disc, green when held, white to buy) and `zone` (the outline the caller gives, widened by a round 32-unit stroke at the surface's zone opacity, with an optional title). They paint what the caller lays out: positions, hulls, text measurement and truncation stay with the map engine.
+Thirteen pieces draw a metro map and its page diagrams, for [stackledger](https://github.com/brunosouzas/stackledger) and any other map in this style: `lineBadge`, `stationMarker` (stop, interchange as a capsule, deprecated), `pipe`, `countBadge`, `nodeBlock`, `pillNode`, `hexNode` (normal, focus, placeholder), `messageArrow` (curved, straight or through two `controls` points, with a head and an optional label; `kind` `reply`, `failure` or `failFast` dashes it and paints it as ADR 0003 says; `heads: "start"` or `"both"` puts heads at `from`, `dashed` overrides the kind's dash), `ledgerMark` (stackledger's mark; `surface: "dark"` lines it with a light rim), `renewalRing` (orange bands round a station), `suggestedHalo` (a dashed muted circle), `licenceMark` (a 10-unit disc, green when held, white to buy) and `zone` (the outline the caller gives, widened by a round 32-unit stroke at the surface's zone opacity, with an optional title). They paint what the caller lays out: positions, hulls, text measurement and truncation stay with the map engine.
 
 - A `placeholder` node may have a `subtitle` (drawn like a normal node's, all muted), and `lineBadge` may have no `text` (the pill alone, 30 wide by default).
 - The licence's disc is small, so it has its own room rule: `size` at least three outlines (9 at ink scale 1).
 
 - `surface: "light" | "dark"` picks the background they sit on (`surface.*` tokens); every map and diagram piece takes it except `pipe`; `ledgerMark` takes only `surface`. On dark the hard shadow takes `surface.dark.shadow` and the outline gets a light rim ([ADR 0003](docs/adr/0003-visual-language-and-colour-meaning.md), amendment of AB#157).
 - `inkScale` (0.25 to 8) thickens the outline, rim and shadow without changing the geometry, on `lineBadge`, `stationMarker`, `countBadge` and the three nodes; the map uses 1, the page diagrams 1.6. A shape's height (a marker's diameter) must be at least four outlines; a placeholder node, which draws no ink, is exempt.
+- `countBadge` takes `textSize` (6 to 48, default 11): without `height`, the height, width and baseline grow with it.
 - A line's colour comes from the map's data, so `pipe.fill`, `lineBadge.fill` and `zone.fill` also accept `#RRGGBB`. Every other colour is a token path, and a cover spec rejects any hex.
 - `map.bendRadius` (32) is the radius of a bundle's centre line at a 45° or 90° bend; no piece reads it, the map engine draws the arcs (`pipe.d` takes `A`).
 - The `map.*` tokens hold the measures (outline 3, shadow 3.5, line 12, casing 6, badge 20, node 46, ring 3, halo 1.5, licence 10, zone padding 32, bend radius 32…), `surface.*.zoneOpacity` the zone's opacity (0.12, dark 0.22), and `site.*` the page palette, fonts and type scale of brunosouzas.com in light and dark.
@@ -158,11 +160,47 @@ const badge = lineBadge({ x: 250, y: 40, text: "SH", fill: "#7B3FE4", surface: "
 Ten pieces draw what the blog's body diagrams need beyond the map pieces: `diagramBox` (a box or pill with a fill and centred lines), `decisionNode` (diamond), `storeNode` (cylinder), `queueNode` (box with two rails), `exchangeNode` (hexagon), `taggedContainer` (a frame with its name on a tab), `lifeline` (dashed, or sparse dots once nothing calls it), `phaseBand` (a pill across a sequence in its state's colour), `altFrame` (alt/else frame with a tag and condition per part) and `edgeLabel` (words next to an arrow, optionally on a backdrop). They take `surface` and, the stickers, `inkScale`, like the map pieces, and paint what the caller lays out.
 
 - The shapes take one to three centred lines (`text`), an optional `subtitle` and `textSize`. Without `fill` the face is the surface's panel; with a fill, every word is ink.
-- Backticks mark code: `` "adopts a `correlationId`" `` draws `correlationId` in the monospace stack, as a `tspan`. An odd number of backticks is drawn as is.
+- Backticks mark code: `` "adopts a `correlationId`" `` draws `correlationId` in the monospace stack, as a `tspan`. An odd number of backticks is drawn as is. The cover `pill` follows the same rule (`` "`main`" ``).
+- `milestonePin` takes `size`, the head's radius (6 to 48, default 18); the head, its outline and the label scale with it.
 - Widths the piece estimates (`tagWidth`, `conditionWidth`, a label's `width`) can be passed by a caller that measures its text.
 - A body diagram is 800 wide. Lay it out in 560 units and show it 800 wide: the pieces then come out at the sizes of the published diagrams (text about 18, outline about 4); only the hard shadow is shallower (5 instead of 8). The cover command does this for you with `"format": "diagram"` (below).
 - `stateStart({ cx, cy, r, surface })` draws the filled start dot of a state machine (7.7 units, 11 at 800), in the surface's text colour, with no outline and no shadow.
 
+### The cast and the emotes
+
+`mascot({ who, x, y, face, action, scale, look, headTilt, prop })` draws one character standing with the centre of its ground line at `(x, y)`. Each one carries its identity in three layers, so no video has to introduce it: a body shape, a mark always visible, and a prop when its hands are free.
+
+| `who` | Body | Mark | Prop | Colour |
+|---|---|---|---|---|
+| `dev` | modern all-in-one computer, face and code on the screen | `</>` on the chin | | `cast.dev.*` |
+| `agent` | retro lamp all-in-one: dome, chrome neck, the screen is the head | AI spark | | white, glowing face (`cast.glow`) |
+| `architect` | drafting set square with its hole and a pencil | ruler ticks | diagram board | `cast.architect.*` |
+| `devops` | gear | ∞ | wrench | `cast.devops.*` (magenta, never the blocked orange) |
+| `data` | cylinder with a lid | two bands | magnifier | `cast.data.*` |
+| `request` | speech bubble | the request line | | `color.caller` |
+| `message` | envelope (0.7 of the others) | flap and seal | | white |
+
+- `face`: `normal`, `blink`, `happy`, `wink`, `surprised`, `worried`, `thinking`, `focused`. One drawing for everyone; the agent's face glows on its dark screen.
+- `action`: `none` (the default: an expression has no hands or feet), `rest`, `wave`, `hold`, `reach`, `up`, `shrug`, `type`. Arms and legs start at the body's sides; hands are mittens.
+- `look` (-1 to 1) moves the gaze, `headTilt` (-30 to 30) turns the agent's head on its neck, `prop: false` hides the prop. Every part is a group named by `data-part` (`body`, `face`, `eyes`, `brows`, `mouth`, `arm-left`, `arm-right`, `legs`, `prop`, `mark`, …), so a scene can animate it.
+
+`emote({ kind, x, y, scale, burst })` draws a reaction beside a head, never over the face. Each kind keeps one meaning in every video, like the colours:
+
+| `kind` | Shape | Meaning |
+|---|---|---|
+| `idea` | bulb | an idea |
+| `doubt` | ? | doubt, not understood |
+| `problem` | ! in a red triangle | a problem appears |
+| `worked` | green check | it worked |
+| `refused` | red cross | refused |
+| `pressure` | sweat drops | under pressure |
+| `liked` | heart | liked |
+| `waiting` | Z Z Z | waiting |
+
+In a scene, an emote pops in on the frame the face changes (`emotePop` in `src/brand/cast-motion.ts`, with `leave`, `blinking`, `breathe`, `squashAfter` and `hop`), one at a time, and the body acts through `pose`. A mascot's colour is its identity and never changes with state. The approved motion test is the Studio composition `cast-motion-test` (folder `cast`): `npx remotion render src/index.ts cast-motion-test`. It is a proof of the cast, not an article scene, so `npm run stills` and `npm run render` do not list it.
+
+The cast draws the same on any background; a dark-surface variant is planned (AB#187).
+
 ### A cover
 
 A cover is a JSON spec kept with its article, outside this repository: drafts are private, and only the pieces are public. `npm run cover -- <spec.json> --out <file.svg>` validates it, reports every problem with its JSON path, and writes an 800x420 SVG; the same spec always gives the same bytes. With `"format": "banner"` the same command writes a site banner instead (see below).
@@ -236,6 +274,7 @@ Project-wide decisions are recorded as ADRs in [`docs/adr/`](docs/adr/README.md)
 - **One token source.** Colours, type, outline, shadow and motion timings live in one file; the site, the animations and the SVG scripts read generated exports instead of keeping their own copies. [ADR 0002](docs/adr/0002-one-token-source.md)
 - **One visual language, fixed colour meanings.** Green is always healthy, orange always blocked, red always the failure path, so a reader learns the code once. Rotated text is allowed since the 2026-10-23 amendment. [ADR 0003](docs/adr/0003-visual-language-and-colour-meaning.md)
 - **Scenes illustrate published articles.** Every string on screen comes from the article, so an animation never says more than the reviewed text. [ADR 0004](docs/adr/0004-scenes-illustrate-published-articles.md)
+- **Neutral videos, told by a fixed cast.** One video for both languages, no words on screen, a caption only when the motion cannot explain itself, and every gesture tied to an article line. [ADR 0005](docs/adr/0005-neutral-videos-and-the-cast.md)
 
 ## How this project is built
 

package/dist/src/pieces/cast.d.ts

@@ -0,0 +1,32 @@
+import { type SvgNode } from "./node.ts";
+export declare const MASCOTS: readonly ["dev", "agent", "architect", "devops", "data", "request", "message"];
+export declare const MASCOT_FACES: readonly ["normal", "blink", "happy", "wink", "surprised", "worried", "thinking", "focused"];
+export declare const MASCOT_ACTIONS: readonly ["none", "rest", "wave", "hold", "reach", "up", "shrug", "type"];
+export declare const EMOTE_KINDS: readonly ["idea", "doubt", "problem", "worked", "refused", "pressure", "liked", "waiting"];
+export type MascotName = (typeof MASCOTS)[number];
+export type MascotFace = (typeof MASCOT_FACES)[number];
+export type MascotAction = (typeof MASCOT_ACTIONS)[number];
+export type EmoteKind = (typeof EMOTE_KINDS)[number];
+export declare const face: (cx: number, cy: number, f: MascotFace, col: string, mouthFill: string) => SvgNode;
+export type MascotParams = {
+    who: MascotName;
+    x: number;
+    y: number;
+    face?: MascotFace;
+    action?: MascotAction;
+    scale?: number;
+    look?: number;
+    headTilt?: number;
+    prop?: boolean;
+};
+export type EmoteParams = {
+    kind: EmoteKind;
+    x: number;
+    y: number;
+    scale?: number;
+    burst?: boolean;
+};
+/** One character standing with the centre of its ground line at (x, y). */
+export declare const mascot: import("./piece.ts").Piece<MascotParams>;
+/** One reaction symbol with a fixed meaning, centred on (x, y), beside a head. */
+export declare const emote: import("./piece.ts").Piece<EmoteParams>;

package/dist/src/pieces/cast.js

@@ -0,0 +1,280 @@
+// The cast (spec illustration-pieces, change cast-and-emotes, card 152):
+// `mascot`, seven characters with a shared face, actions and named parts, and
+// `emote`, eight reaction symbols with a fixed meaning (ADR 0005).
+//
+// Why here: covers, diagrams and scenes draw the same characters from one
+// source; a scene animates them by recomputing parameters per frame and
+// wrapping the piece in `pose`.
+//
+// The geometry is the approved spike's, ported unchanged
+// (~/.hermes/spikes/design-system/cast-and-emotes/cast.mts). The frozen fixture
+// test/fixtures/cast-0.5.0.json pins every call's output, so a refactor here
+// must keep every hash.
+import { drawn, el, g } from "./node.js";
+import { colour, pos } from "./params.js";
+import { definePiece } from "./piece.js";
+const c = (path) => colour(path);
+export const MASCOTS = ["dev", "agent", "architect", "devops", "data", "request", "message"];
+export const MASCOT_FACES = ["normal", "blink", "happy", "wink", "surprised", "worried", "thinking", "focused"];
+export const MASCOT_ACTIONS = ["none", "rest", "wave", "hold", "reach", "up", "shrug", "type"];
+export const EMOTE_KINDS = ["idea", "doubt", "problem", "worked", "refused", "pressure", "liked", "waiting"];
+const ink = () => c("color.ink");
+const O = () => ({ stroke: ink(), "stroke-width": 4, "stroke-linejoin": "round" });
+const shade = (d, dx = 8) => el("path", { d, fill: ink(), transform: `translate(${dx} ${dx})` });
+const solid = (d, fill, dx = 8) => [shade(d, dx), el("path", { d, fill, ...O() })];
+const shine = (d, col) => el("path", { d, fill: "none", stroke: col, "stroke-width": 9, "stroke-linecap": "round" });
+const rr = (x, y, w, h, r) => `M${x + r},${y} H${x + w - r} Q${x + w},${y} ${x + w},${y + r} V${y + h - r} Q${x + w},${y + h} ${x + w - r},${y + h} H${x + r} Q${x},${y + h} ${x},${y + h - r} V${y + r} Q${x},${y} ${x + r},${y} Z`;
+// ---------------------------------------------------------------- face (macs.ts)
+export const face = (cx, cy, f, col, mouthFill) => {
+    const k = 1, dx = 24 * k;
+    const eye = (x, right) => {
+        if (f === "blink")
+            return el("path", { d: `M${x - 9 * k},${cy} H${x + 9 * k}`, stroke: col, "stroke-width": 5 * k, "stroke-linecap": "round" });
+        if (f === "happy" || (f === "wink" && right))
+            return el("path", { d: `M${x - 10 * k},${cy + 3 * k} Q${x},${cy - 10 * k} ${x + 10 * k},${cy + 3 * k}`, fill: "none", stroke: col, "stroke-width": 5 * k, "stroke-linecap": "round" });
+        if (f === "focused")
+            return el("path", { d: right ? `M${x + 10 * k},${cy - 6 * k} L${x - 8 * k},${cy} L${x + 10 * k},${cy + 6 * k}` : `M${x - 10 * k},${cy - 6 * k} L${x + 8 * k},${cy} L${x - 10 * k},${cy + 6 * k}`, fill: "none", stroke: col, "stroke-width": 5 * k, "stroke-linecap": "round", "stroke-linejoin": "round" });
+        const s = f === "surprised" ? 1.35 : 1, o = f === "thinking" ? 5 * k : 0;
+        return g({}, el("ellipse", { cx: x + o, cy: cy - o, rx: 7 * k * s, ry: 10 * k * s, fill: col }), el("circle", { cx: x + o + 2.5 * k, cy: cy - o - 4 * k, r: 2.6 * k, fill: c("color.white") }));
+    };
+    const by = cy - 22 * k, brow = (x, a, b) => el("path", { d: `M${x - 9 * k},${by + a * k} L${x + 9 * k},${by + b * k}`, stroke: col, "stroke-width": 4.5 * k, "stroke-linecap": "round" });
+    const brows = f === "worried" ? [brow(cx - dx, 4, -3), brow(cx + dx, -3, 4)]
+        : f === "surprised" ? [brow(cx - dx, -6, -8), brow(cx + dx, -8, -6)]
+            : f === "thinking" ? [brow(cx + dx, 0, -7)] : [];
+    const my = cy + 26 * k, ln = (d, fill = "none") => el("path", { d, fill, stroke: col, "stroke-width": 5 * k, "stroke-linecap": "round", "stroke-linejoin": "round" });
+    const smile = ln(`M${cx - 12 * k},${my - 2 * k} Q${cx},${my + 11 * k} ${cx + 12 * k},${my - 2 * k}`);
+    const mouth = {
+        blink: smile,
+        normal: smile,
+        happy: ln(`M${cx - 15 * k},${my - 4 * k} Q${cx},${my + 16 * k} ${cx + 15 * k},${my - 4 * k} Z`, mouthFill),
+        wink: ln(`M${cx - 12 * k},${my - 2 * k} Q${cx + 2 * k},${my + 12 * k} ${cx + 14 * k},${my - 6 * k}`),
+        surprised: el("ellipse", { cx, cy: my + 4 * k, rx: 7 * k, ry: 9 * k, fill: mouthFill, stroke: col, "stroke-width": 4 * k }),
+        worried: ln(`M${cx - 12 * k},${my + 5 * k} Q${cx},${my - 6 * k} ${cx + 12 * k},${my + 5 * k}`),
+        thinking: ln(`M${cx - 7 * k},${my + 2 * k} L${cx + 10 * k},${my - 2 * k}`),
+        focused: ln(`M${cx - 8 * k},${my} L${cx + 8 * k},${my}`),
+    }[f];
+    return g({ "data-part": "face" }, g({ "data-part": "eyes" }, eye(cx - dx, false), eye(cx + dx, true)), brows.length ? g({ "data-part": "brows" }, ...brows) : null, g({ "data-part": "mouth" }, mouth));
+};
+// Arm targets as offsets from the shoulders (left, right). "computer" = macs.ts, "object" = mascots4.ts.
+const COMPUTER = {
+    armWidth: 15, legWidth: 15, bend: 8,
+    offsets: { rest: [[-20, 40], [20, 40]], wave: [[-20, 40], [30, -86]], hold: [[30, 50], [-30, 50]], reach: [[-20, 40], [70, -4]], up: [[-30, -90], [30, -90]], shrug: [[-44, -26], [44, -26]], type: [[26, 58], [-26, 58]] },
+};
+const OBJECT = {
+    armWidth: 16, legWidth: 16, bend: 8,
+    offsets: { rest: [[-22, 34], [22, 34]], wave: [[-22, 34], [34, -92]], hold: [[0, 0], [0, 0]], reach: [[-22, 34], [70, -4]], up: [[-34, -96], [34, -96]], shrug: [[-46, -30], [46, -30]], type: [[26, 58], [-26, 58]] },
+};
+const arm = (from, to, side, w) => [
+    el("path", { d: `M${from[0]},${from[1]} Q${(from[0] + to[0]) / 2 + side * 14},${Math.max(from[1], to[1]) + 8} ${to[0]},${to[1]}`, fill: "none", stroke: ink(), "stroke-width": w, "stroke-linecap": "round" }),
+    el("ellipse", { cx: to[0], cy: to[1], rx: 15, ry: 12, fill: ink(), transform: `rotate(${side * 20} ${to[0]} ${to[1]})` }),
+];
+// ---------------------------------------------------------------- props (mascots4.ts)
+const boardProp = (x, y) => [
+    shade(rr(x, y, 104, 78, 10), 6), el("path", { d: rr(x, y, 104, 78, 10), fill: c("color.white"), ...O() }),
+    el("path", { d: `M${x + 30},${y + 28} H${x + 52} V${y + 52} H${x + 74}`, fill: "none", stroke: ink(), "stroke-width": 3 }),
+    el("rect", { x: x + 12, y: y + 18, width: 22, height: 20, rx: 4, fill: c("color.caller"), stroke: ink(), "stroke-width": 3 }),
+    el("rect", { x: x + 70, y: y + 42, width: 22, height: 20, rx: 4, fill: c("color.healthy"), stroke: ink(), "stroke-width": 3 }),
+    el("rect", { x: x + 42, y: y + 8, width: 20, height: 18, rx: 4, fill: c("color.transitional"), stroke: ink(), "stroke-width": 3 }),
+];
+const wrenchProp = (x, y) => {
+    const d = `M${x},${y} L${x + 50},${y - 50} M${x + 50},${y - 50}`;
+    return [
+        el("path", { d, stroke: ink(), "stroke-width": 18, "stroke-linecap": "round" }),
+        el("path", { d, stroke: c("cast.metal"), "stroke-width": 10, "stroke-linecap": "round" }),
+        el("path", { d: `M${x + 40},${y - 74} A24,24 0 1 0 ${x + 76},${y - 40} L${x + 62},${y - 46} L${x + 56},${y - 60} Z`, fill: c("cast.metal"), ...O() }),
+    ];
+};
+const magnifierProp = (x, y) => [
+    el("path", { d: `M${x},${y} L${x + 24},${y - 24}`, stroke: ink(), "stroke-width": 16, "stroke-linecap": "round" }),
+    el("circle", { cx: x + 44, cy: y - 44, r: 30, fill: c("cast.data.lens"), stroke: ink(), "stroke-width": 9 }),
+    el("circle", { cx: x + 44, cy: y - 44, r: 30, fill: "none", stroke: c("color.caller"), "stroke-width": 4 }),
+    el("path", { d: `M${x + 30},${y - 56} Q${x + 36},${y - 66} ${x + 48},${y - 66}`, fill: "none", stroke: c("color.white"), "stroke-width": 5, "stroke-linecap": "round" }),
+];
+const spark = (x, y) => el("path", { d: `M${x},${y - 14} L${x + 4},${y - 4} L${x + 14},${y} L${x + 4},${y + 4} L${x},${y + 14} L${x - 4},${y + 4} L${x - 14},${y} L${x - 4},${y - 4} Z`, fill: c("color.transitional"), ...O(), "stroke-width": 3 });
+const CAST = () => ({
+    // DEV: modern all-in-one. Screen frame = body, code on the screen, face on the screen, </> on the chin, stand.
+    dev: {
+        family: COMPUTER, anchor: [110, 230], ground: 80, shoulders: [[22, 118], [198, 118]], hips: [[86, 200], [134, 200]], foot: 226,
+        faceAt: [110, 88], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => [
+            g({ "data-part": "stand" }, ...solid("M88,184 H132 L140,212 H80 Z", c("cast.metal"), 6), ...solid(rr(62, 208, 96, 12, 6), c("cast.metal"), 5)),
+            g({ "data-part": "body" }, ...solid(rr(4, 24, 212, 168, 18), c("cast.dev.fill")), el("path", { d: "M8,152 H212 V174 Q212,188 198,188 H22 Q8,188 8,174 Z", fill: c("cast.dev.chin"), stroke: "none" }), el("path", { d: "M4,152 H216", stroke: ink(), "stroke-width": 4 }), el("path", { d: rr(18, 36, 184, 108, 10), fill: c("cast.dev.screen"), stroke: ink(), "stroke-width": 3.5 }), g({ "data-part": "screen-code", stroke: "none" }, el("rect", { x: 30, y: 48, width: 34, height: 7, rx: 3.5, fill: c("color.healthy") }), el("rect", { x: 36, y: 61, width: 22, height: 7, rx: 3.5, fill: c("cast.dev.fill") }), el("rect", { x: 156, y: 48, width: 34, height: 7, rx: 3.5, fill: c("color.healthy") }), el("rect", { x: 162, y: 61, width: 22, height: 7, rx: 3.5, fill: c("cast.dev.fill") }))),
+            g({ "data-part": "mark" }, el("path", { d: "M98,163 L90,170 L98,177 M122,163 L130,170 L122,177 M114,160 L106,180", fill: "none", stroke: c("color.white"), "stroke-width": 4.5, "stroke-linecap": "round", "stroke-linejoin": "round" })),
+        ],
+    },
+    // AI AGENT: retro lamp all-in-one. Dome = body, chrome neck, the screen is the head (tilts on the neck).
+    agent: {
+        family: COMPUTER, anchor: [110, 250], ground: 82, shoulders: [[44, 196], [176, 196]], hips: [[84, 236], [136, 236]], foot: 248,
+        faceAt: [110, 58], faceColour: c("cast.glow"), mouthFill: c("cast.glow"), faceInHead: true,
+        parts: (tilt) => {
+            const top = [110 + tilt * 1.4, 110];
+            const neck = `M110,176 Q${108 + tilt},150 ${top[0]},${top[1]}`;
+            return [
+                g({ "data-part": "neck" }, el("path", { d: neck, fill: "none", stroke: ink(), "stroke-width": 16, "stroke-linecap": "round" }), el("path", { d: neck, fill: "none", stroke: c("cast.agent.neck"), "stroke-width": 8, "stroke-linecap": "round" })),
+                g({ "data-part": "body" }, ...solid("M30,240 Q30,166 110,164 Q190,166 190,240 Z", c("color.white")), el("path", { d: "M44,226 H176", stroke: c("cast.metal"), "stroke-width": 4, "stroke-dasharray": "3 6", "stroke-linecap": "round" }), el("path", { d: "M58,196 Q80,180 104,178", fill: "none", stroke: c("cast.agent.shine"), "stroke-width": 8, "stroke-linecap": "round" })),
+                g({ "data-part": "mark" }, spark(110, 206)),
+            ];
+        },
+    },
+    // ARCHITECT: drafting set square with its hole, ruler ticks (mark), pencil; board as prop.
+    architect: {
+        family: OBJECT, anchor: [105, 216], ground: 76, shoulders: [[46, 152], [174, 152]], hips: [[78, 190], [146, 190]], foot: 212, hold: [64, 168],
+        faceAt: [110, 132], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => [
+            g({ "data-part": "pencil", transform: "rotate(28 128 40)" }, el("path", { d: "M120,6 H136 V60 L128,74 L120,60 Z", fill: c("color.transitional"), ...O(), "stroke-width": 3.5 }), el("path", { d: "M120,6 H136 V16 H120 Z", fill: c("color.backend"), ...O(), "stroke-width": 3.5 })),
+            g({ "data-part": "body" }, ...solid("M99,30 Q110,13 121,30 L198,158 Q210,184 177,193 H35 Q6,187 21,160 Z", c("cast.architect.fill")), el("path", { d: "M110,58 L130,94 H90 Z", fill: c("color.panel"), stroke: ink(), "stroke-width": 3.5, "stroke-linejoin": "round" }), shine("M70,110 Q78,92 88,80", c("cast.architect.shine"))),
+            g({ "data-part": "mark", stroke: ink(), "stroke-width": 3, "stroke-linecap": "round" }, ...Array.from({ length: 9 }, (_, i) => { const x = 42 + i * 16; const h = i % 2 ? 9 : 15; return el("path", { d: `M${x},193 V${193 - h}` }); })),
+        ],
+        prop: () => boardProp(118, 152),
+    },
+    // DEVOPS: gear with the infinity loop (mark); wrench as prop.
+    devops: {
+        family: OBJECT, anchor: [105, 216], ground: 76, shoulders: [[34, 138], [184, 138]], hips: [[68, 176], [146, 176]], foot: 212, hold: [72, 160],
+        faceAt: [110, 100], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => {
+            const loop = "M110,160 C98,146 76,146 76,160 C76,174 98,174 110,160 C122,146 144,146 144,160 C144,174 122,174 110,160 Z";
+            return [
+                g({ "data-part": "body" }, ...solid("M86,22H128L137,42L161,36L183,58L175,82L196,94V128L174,141L182,163L158,187L136,178L124,197H87L77,180L54,186L28,163L37,138L16,125V93L39,81L31,57L53,35L76,42Z", c("cast.devops.fill")), shine("M60,60 Q80,46 104,46", c("cast.devops.shine"))),
+                g({ "data-part": "mark" }, el("path", { d: loop, fill: "none", stroke: c("color.white"), "stroke-width": 11, "stroke-linejoin": "round" }), el("path", { d: loop, fill: "none", stroke: ink(), "stroke-width": 4, "stroke-linejoin": "round" })),
+            ];
+        },
+        prop: () => wrenchProp(168, 178),
+    },
+    // DATA: cylinder with lid and two bands (mark); magnifier as prop.
+    data: {
+        family: OBJECT, anchor: [105, 216], ground: 76, shoulders: [[38, 140], [172, 140]], hips: [[68, 196], [142, 196]], foot: 212, hold: [70, 170],
+        faceAt: [105, 104], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => [
+            g({ "data-part": "body" }, ...solid("M35,60 V174 Q35,205 105,205 Q175,205 175,174 V60 Z", c("cast.data.fill"))),
+            g({ "data-part": "mark", fill: "none", stroke: ink(), "stroke-width": 4 }, el("path", { d: "M35,128 Q105,158 175,128" }), el("path", { d: "M35,166 Q105,196 175,166" })),
+            g({ "data-part": "lid" }, el("ellipse", { cx: 105, cy: 61, rx: 70, ry: 25, fill: c("cast.data.lid"), ...O() }), shine("M50,84 V112", c("cast.data.shine"))),
+        ],
+        prop: () => magnifierProp(164, 186),
+    },
+    // REQUESTER: speech bubble in caller blue, the request line (mark).
+    request: {
+        family: OBJECT, anchor: [105, 216], ground: 76, shoulders: [[30, 120], [180, 120]], hips: [[78, 176], [134, 176]], foot: 212, hold: [70, 150],
+        faceAt: [105, 82], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => [
+            g({ "data-part": "body" }, ...solid("M54,30 H156 Q186,30 186,60 V130 Q186,160 156,160 H96 L66,190 L72,160 H54 Q24,160 24,130 V60 Q24,30 54,30 Z", c("color.caller")), shine("M44,62 Q56,46 78,46", c("cast.request.shine"))),
+            g({ "data-part": "mark" }, el("rect", { x: 62, y: 134, width: 86, height: 12, rx: 6, fill: c("color.white"), stroke: ink(), "stroke-width": 3 })),
+        ],
+    },
+    // MESSAGE: envelope (0.7 of the others), seal (mark).
+    message: {
+        family: OBJECT, anchor: [105, 216], scale: 0.7, ground: 76, shoulders: [[40, 140], [170, 140]], hips: [[78, 190], [132, 190]], foot: 212, hold: [70, 170],
+        faceAt: [105, 136], faceColour: ink(), mouthFill: c("cast.mouth"),
+        parts: () => [
+            g({ "data-part": "body" }, ...solid(rr(32, 88, 146, 106, 16), c("color.white"))),
+            g({ "data-part": "mark" }, el("path", { d: "M36,94 L105,140 L174,94", fill: "none", stroke: ink(), "stroke-width": 4, "stroke-linejoin": "round" }), el("circle", { cx: 105, cy: 140, r: 9, fill: c("color.transitional"), stroke: ink(), "stroke-width": 3 })),
+        ],
+    },
+});
+const drawMascot = (p) => {
+    const ch = CAST()[p.who];
+    const f = p.face ?? "normal", act = p.action ?? "none", look = p.look ?? 0, tilt = p.headTilt ?? 0;
+    const k = (p.scale ?? 1) * (ch.scale ?? 1);
+    const fam = ch.family;
+    const [L, R] = ch.shoulders;
+    let arms = [];
+    let legs = null;
+    const front = act === "hold" || act === "type";
+    if (act !== "none") {
+        const [ol, or] = fam.offsets[act];
+        let targetL = [L[0] + ol[0], L[1] + ol[1]], targetR = [R[0] + or[0], R[1] + or[1]];
+        // mascots4: "hold" puts both mittens at the hold point, mirrored round x 105.
+        if (act === "hold" && ch.hold) {
+            targetL = ch.hold;
+            targetR = [210 - ch.hold[0], ch.hold[1]];
+        }
+        arms = [g({ "data-part": "arm-left" }, ...arm(L, targetL, -1, fam.armWidth)), g({ "data-part": "arm-right" }, ...arm(R, targetR, 1, fam.armWidth))];
+        legs = g({ "data-part": "legs" }, ...ch.hips.flatMap(([hx, hy], i) => {
+            const s = i ? 1 : -1;
+            return fam === COMPUTER
+                ? [el("path", { d: `M${hx},${hy} L${hx + s * 4},${ch.foot - 6}`, stroke: ink(), "stroke-width": fam.legWidth, "stroke-linecap": "round" }), el("ellipse", { cx: hx + s * 11, cy: ch.foot, rx: 19, ry: 11, fill: ink() })]
+                : [el("path", { d: `M${hx},${hy} L${hx + s * 6},${ch.foot - 6}`, stroke: ink(), "stroke-width": fam.legWidth, "stroke-linecap": "round" }), el("ellipse", { cx: hx + s * 13, cy: ch.foot, rx: 19, ry: 11, fill: ink() })];
+        }));
+    }
+    let faceWrapped = face(ch.faceAt[0] + (ch.faceInHead ? tilt * 1.4 : 0), ch.faceAt[1], f, ch.faceColour, ch.mouthFill);
+    if (look !== 0)
+        faceWrapped = { ...faceWrapped, attrs: { ...faceWrapped.attrs, transform: `translate(${look * 6} 0)` } };
+    const showProp = (p.prop ?? true) && ch.prop && (act === "rest" || act === "hold");
+    const [ax, ay] = ch.anchor;
+    let parts = ch.parts(tilt);
+    if (ch.faceInHead) {
+        const top = [110 + tilt * 1.4, 110];
+        parts = [...parts, g({ "data-part": "head", transform: `rotate(${tilt} ${top[0]} ${top[1]})` }, ...solid(rr(top[0] - 96, 0, 192, 132, 22), c("color.white")), el("path", { d: rr(top[0] - 80, 14, 160, 104, 12), fill: c("illustration.codePanel"), stroke: ink(), "stroke-width": 4 }), faceWrapped)];
+    }
+    const root = g({ "data-mascot": p.who, transform: `translate(${p.x} ${p.y}) scale(${k}) translate(${-ax} ${-ay})`, stroke: "none" }, g({ "data-part": "ground" }, el("ellipse", { cx: ax, cy: ay, rx: ch.ground, ry: 9, fill: c("cast.ground") })), ...(front ? [] : arms), legs, ...parts, ch.faceInHead ? null : faceWrapped, showProp ? g({ "data-part": "prop" }, ...ch.prop()) : null, ...(front ? arms : []));
+    return drawn([root]);
+};
+// ---------------------------------------------------------------- emotes (emotes.ts)
+const rays = (cx, cy, r1, r2, n, from = -150, to = -30) => Array.from({ length: n }, (_, i) => {
+    const a = ((from + (i * (to - from)) / (n - 1)) * Math.PI) / 180;
+    const r = (v) => Math.round(v * 100) / 100;
+    return el("path", { d: `M${r(cx + r1 * Math.cos(a))},${r(cy + r1 * Math.sin(a))} L${r(cx + r2 * Math.cos(a))},${r(cy + r2 * Math.sin(a))}`, stroke: ink(), "stroke-width": 6, "stroke-linecap": "round" });
+});
+const EO = () => ({ stroke: ink(), "stroke-width": 5, "stroke-linejoin": "round", "stroke-linecap": "round" });
+const disc = (cx, cy, r, fill) => [el("circle", { cx: cx + 6, cy: cy + 6, r, fill: ink() }), el("circle", { cx, cy, r, fill, ...EO() })];
+const zed = (x, y, s) => {
+    // A Z of height s with its top-left at (x, y - s): ink casing, caller fill.
+    const w = s * 0.72, d = `M${x},${y - s} H${x + w} L${x},${y} H${x + w}`;
+    return [el("path", { d, fill: "none", stroke: ink(), "stroke-width": s * 0.34, "stroke-linecap": "round", "stroke-linejoin": "round" }),
+        el("path", { d, fill: "none", stroke: c("color.caller"), "stroke-width": s * 0.16, "stroke-linecap": "round", "stroke-linejoin": "round" })];
+};
+const drawEmote = (p) => {
+    const { kind, x: cx, y: cy } = p, burst = p.burst ?? true, s = p.scale ?? 1;
+    const parts = [];
+    switch (kind) {
+        case "idea": {
+            if (burst)
+                parts.push(el("circle", { cx, cy: cy - 6, r: 62, fill: c("color.transitional"), opacity: 0.35 }), ...rays(cx, cy - 6, 50, 72, 7, -180, 0));
+            const bulb = `M${cx - 30},${cy - 10} A34,34 0 1 1 ${cx + 30},${cy - 10} Q${cx + 22},${cy + 6} ${cx + 18},${cy + 22} H${cx - 18} Q${cx - 22},${cy + 6} ${cx - 30},${cy - 10} Z`;
+            parts.push(el("path", { d: bulb, fill: ink(), transform: "translate(6 6)" }), el("path", { d: bulb, fill: c("color.transitional"), ...EO() }), el("path", { d: `M${cx - 16},${cy - 22} Q${cx - 12},${cy - 32} ${cx - 2},${cy - 34}`, fill: "none", stroke: c("color.white"), "stroke-width": 6, "stroke-linecap": "round" }), el("path", { d: `M${cx - 8},${cy + 22} V${cy} L${cx},${cy + 8} L${cx + 8},${cy} V${cy + 22}`, fill: "none", stroke: ink(), "stroke-width": 4, "stroke-linejoin": "round" }), el("rect", { x: cx - 18, y: cy + 22, width: 36, height: 12, rx: 3, fill: c("cast.metal"), ...EO(), "stroke-width": 4 }), el("rect", { x: cx - 14, y: cy + 34, width: 28, height: 10, rx: 5, fill: c("cast.metal"), ...EO(), "stroke-width": 4 }));
+            break;
+        }
+        case "doubt":
+            parts.push(...disc(cx, cy, 40, c("color.white")), el("path", { d: `M${cx - 14},${cy - 12} Q${cx - 14},${cy - 28} ${cx},${cy - 28} Q${cx + 16},${cy - 28} ${cx + 16},${cy - 13} Q${cx + 16},${cy - 2} ${cx + 2},${cy + 4} V${cy + 10}`, fill: "none", stroke: ink(), "stroke-width": 9, "stroke-linecap": "round", "stroke-linejoin": "round" }), el("circle", { cx: cx + 2, cy: cy + 24, r: 6, fill: ink() }));
+            break;
+        case "problem":
+            if (burst)
+                parts.push(...rays(cx, cy, 48, 70, 5));
+            parts.push(el("path", { d: `M${cx},${cy - 44} L${cx + 46},${cy + 34} H${cx - 46} Z`, fill: ink(), transform: "translate(6 6)" }), el("path", { d: `M${cx},${cy - 44} L${cx + 46},${cy + 34} H${cx - 46} Z`, fill: c("color.failure"), ...EO() }), el("path", { d: `M${cx},${cy - 18} V${cy + 8}`, stroke: ink(), "stroke-width": 9, "stroke-linecap": "round" }), el("circle", { cx, cy: cy + 22, r: 5.5, fill: ink() }));
+            break;
+        case "pressure":
+            for (const [dx, dy, k] of [[0, 0, 1], [30, 22, 0.6]])
+                parts.push(el("path", { d: `M${cx + dx},${cy + dy - 34 * k} Q${cx + dx + 24 * k},${cy + dy} ${cx + dx},${cy + dy + 12 * k} Q${cx + dx - 24 * k},${cy + dy} ${cx + dx},${cy + dy - 34 * k} Z`, fill: c("cast.glow"), ...EO(), "stroke-width": 4 }), el("path", { d: `M${cx + dx - 6 * k},${cy + dy - 2 * k} Q${cx + dx - 8 * k},${cy + dy + 6 * k} ${cx + dx - 2 * k},${cy + dy + 8 * k}`, fill: "none", stroke: c("color.white"), "stroke-width": 3, "stroke-linecap": "round" }));
+            break;
+        case "liked":
+            parts.push(el("path", { d: `M${cx},${cy + 30} C${cx - 50},${cy} ${cx - 34},${cy - 40} ${cx},${cy - 16} C${cx + 34},${cy - 40} ${cx + 50},${cy} ${cx},${cy + 30} Z`, fill: c("color.backend"), ...EO() }));
+            break;
+        case "worked":
+            if (burst)
+                parts.push(...rays(cx, cy, 48, 68, 5));
+            parts.push(...disc(cx, cy, 38, c("color.healthy")), el("path", { d: `M${cx - 16},${cy} L${cx - 4},${cy + 12} L${cx + 18},${cy - 12}`, fill: "none", stroke: ink(), "stroke-width": 8, "stroke-linecap": "round", "stroke-linejoin": "round" }));
+            break;
+        case "refused":
+            parts.push(...disc(cx, cy, 38, c("color.failure")), el("path", { d: `M${cx - 13},${cy - 13} L${cx + 13},${cy + 13} M${cx + 13},${cy - 13} L${cx - 13},${cy + 13}`, stroke: ink(), "stroke-width": 8, "stroke-linecap": "round" }));
+            break;
+        case "waiting":
+            parts.push(...zed(cx - 12, cy + 12, 26), ...zed(cx + 20, cy - 20, 20), ...zed(cx + 44, cy - 46, 14));
+            break;
+    }
+    const attrs = s === 1 ? { "data-emote": kind, stroke: "none" } : { "data-emote": kind, stroke: "none", transform: `translate(${cx} ${cy}) scale(${s}) translate(${-cx} ${-cy})` };
+    return drawn([g(attrs, ...parts)]);
+};
+const unit = { kind: "number", min: 0, exclusiveMin: true, max: 10 };
+/** One character standing with the centre of its ground line at (x, y). */
+export const mascot = definePiece("mascot", {
+    who: { kind: "enum", required: true, values: MASCOTS },
+    x: pos(),
+    y: pos(),
+    face: { kind: "enum", values: MASCOT_FACES },
+    action: { kind: "enum", values: MASCOT_ACTIONS },
+    scale: unit,
+    look: { kind: "number", min: -1, max: 1 },
+    headTilt: { kind: "number", min: -30, max: 30 },
+    prop: { kind: "boolean" },
+}, drawMascot, ({ who, headTilt }) => (headTilt !== undefined && headTilt !== 0 && who !== "agent" ? [{ path: "headTilt", message: "applies only to the agent" }] : []));
+/** One reaction symbol with a fixed meaning, centred on (x, y), beside a head. */
+export const emote = definePiece("emote", { kind: { kind: "enum", required: true, values: EMOTE_KINDS }, x: pos(), y: pos(), scale: unit, burst: { kind: "boolean" } }, drawEmote);

package/dist/src/pieces/diagram.js

@@ -7,7 +7,7 @@
 // between parameters are checked in the order of design §3 and the first one is
 // thrown as a RangeError naming the parameter.
 import { tokens } from "../../tokens/generated/tokens.js";
-import { inkOf, inkSchema, limits, roomFor, sticker, surfaceParam } from "./ink.js";
+import { inkOf, inkSchema, limits, roomFor, spans, sticker, surfaceParam } from "./ink.js";
 import { drawn, el, r2 } from "./node.js";
 import { col, colour, label, MAX_SIZE, pos, size } from "./params.js";
 import { definePiece } from "./piece.js";
@@ -20,14 +20,6 @@ const textSize = { kind: "number", min: 6, max: 48 };
 // ---------- words ----------
 /** Characters of a word for a width estimate: backticks do not count. */
 const characters = (value) => Array.from(value.replace(/`/g, "")).length;
-/** Backticks mark code (design §4): with an even number of them, each part between backticks becomes a tspan in
- * the monospace stack; empty parts are dropped. With an odd number, the string is drawn as is. */
-const spans = (value) => {
-    const parts = value.split("`");
-    if (parts.length % 2 === 0)
-        return [value];
-    return parts.flatMap((part, i) => (part === "" ? [] : i % 2 === 1 ? [el("tspan", { "font-family": tokens.font.mono }, part)] : [part]));
-};
 // Every text sets its own anchor, size and weight, so a surrounding group (a cover's label style) does not leak in.
 const words = (x, y, value, attrs) => el("text", { x: r2(x), y: r2(y), "font-family": font, ...attrs }, ...spans(value));
 /** No fill: the surface's panel with its text; a fill: that token with ink words (ADR 0003). */

package/dist/src/pieces/index.d.ts

@@ -7,3 +7,4 @@ export * from "./library.ts";
 export { EIP_ICONS, EIP_ICON_NAMES, EIP_ICON_HEIGHT, EIP_ICON_WIDTH, type EipIcon } from "./eip-icons.ts";
 export { FORMATS, LANGUAGE, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, diagramRings, validateCoverSpec, type CoverFormat, type CoverOptions, type CoverPiece, type CoverRings, type CoverSpec, type CustomNode } from "./cover.ts";
 export { tokens, type Tokens } from "../../tokens/generated/tokens.ts";
+export { EMOTE_KINDS, MASCOTS, MASCOT_ACTIONS, MASCOT_FACES, type EmoteKind, type EmoteParams, type MascotAction, type MascotFace, type MascotName, type MascotParams } from "./cast.ts";

package/dist/src/pieces/index.js

@@ -12,3 +12,4 @@ export * from "./library.js";
 export { EIP_ICONS, EIP_ICON_NAMES, EIP_ICON_HEIGHT, EIP_ICON_WIDTH } from "./eip-icons.js";
 export { FORMATS, LANGUAGE, SAFE_ID, backgroundNames, bannerRingCount, comparePaths, coverTree, diagramRings, validateCoverSpec } from "./cover.js";
 export { tokens } from "../../tokens/generated/tokens.js";
+export { EMOTE_KINDS, MASCOTS, MASCOT_ACTIONS, MASCOT_FACES } from "./cast.js";

package/dist/src/pieces/ink.d.ts

@@ -45,4 +45,9 @@ export declare const atLeast: (name: string, value: number, least: number, what:
 export type Shape = (dx: number, dy: number, attrs: Attrs) => SvgNode;
 /** The ink sticker (metro-and-diagram-pieces design §3): shadow copy, rim on dark, then the face. */
 export declare const sticker: (shape: Shape, face: string, inkParams: Ink) => SvgNode[];
+/** Backticks mark code (body-diagram-pieces design §4; the pill since card 190): with an even number of them, each part between backticks becomes a tspan in
+ * the monospace stack; empty parts are dropped. With an odd number, the string is drawn as is. */
+export declare const spans: (value: string) => (SvgNode | string)[];
+/** A pill's text length for its default width: backticks of code runs do not count; otherwise `length` as in 0.5.0. */
+export declare const codeLength: (value: string) => number;
 export declare const words: (x: number, y: number, value: string, attrs: Attrs) => SvgNode;

package/dist/src/pieces/ink.js

@@ -34,5 +34,15 @@ export const sticker = (shape, face, inkParams) => {
         shape(0, 0, { fill: face, stroke: ink, "stroke-width": r2(outline), "stroke-linejoin": "round" }),
     ];
 };
+/** Backticks mark code (body-diagram-pieces design §4; the pill since card 190): with an even number of them, each part between backticks becomes a tspan in
+ * the monospace stack; empty parts are dropped. With an odd number, the string is drawn as is. */
+export const spans = (value) => {
+    const parts = value.split("`");
+    if (parts.length % 2 === 0)
+        return [value];
+    return parts.flatMap((part, i) => (part === "" ? [] : i % 2 === 1 ? [el("tspan", { "font-family": tokens.font.mono }, part)] : [part]));
+};
+/** A pill's text length for its default width: backticks of code runs do not count; otherwise `length` as in 0.5.0. */
+export const codeLength = (value) => (value.split("`").length % 2 === 1 && value.includes("`") ? value.replace(/`/g, "") : value).length;
 // Every text sets its own anchor, size and weight, so a surrounding group (a cover's label style) does not leak in.
 export const words = (x, y, value, attrs) => el("text", { x: r2(x), y: r2(y), "font-family": font, ...attrs }, value);

package/dist/src/pieces/library.d.ts

@@ -1,3 +1,5 @@
+import { emote, mascot } from "./cast.ts";
+export { emote, mascot };
 export * from "./metro.ts";
 export * from "./diagram.ts";
 export * from "./ui-icons.ts";
@@ -10,7 +12,7 @@ export type PillParams = {
     fill?: string;
     width?: number;
 };
-/** Pill label centred on (x, y), usually overlapping the top edge of what it names. */
+/** Pill label centred on (x, y), usually overlapping the top edge of what it names. Backticks mark code (card 190). */
 export declare const pill: import("./piece.ts").Piece<PillParams>;
 export declare const RING_COUNT = 14;
 /** Most rings one call draws: enough for a banner's farthest corner from any centre a cover spec accepts (548). */
@@ -138,8 +140,10 @@ export type MilestonePinParams = {
     text: string;
     fill?: string;
     stem?: number;
+    size?: number;
 };
-/** A pin standing on (x, y): a stem and a round head with a short label. */
+/** A pin standing on (x, y): a stem and a round head with a short label. `size` is the head's radius (18) and
+ * scales the head, its outline and the label together (card 190). */
 export declare const milestonePin: import("./piece.ts").Piece<MilestonePinParams>;
 export type PriceTagParams = {
     x: number;
@@ -326,6 +330,8 @@ export declare const PIECES: {
     readonly uiIcon: import("./piece.ts").Piece<import("./ui-icons.ts").UiIconParams>;
     readonly linkIcon: import("./piece.ts").Piece<import("./link-icons.ts").LinkIconParams>;
     readonly stateStart: import("./piece.ts").Piece<import("./diagram.ts").StateStartParams>;
+    readonly mascot: import("./piece.ts").Piece<import("./cast.ts").MascotParams>;
+    readonly emote: import("./piece.ts").Piece<import("./cast.ts").EmoteParams>;
 };
 export type PieceName = keyof typeof PIECES;
 export declare const PIECE_NAMES: PieceName[];

package/dist/src/pieces/library.js

@@ -15,17 +15,20 @@ import { METRO_PIECES } from "./metro.js";
 import { DIAGRAM_PIECES, stateStart } from "./diagram.js";
 import { uiIcon } from "./ui-icons.js";
 import { linkIcon } from "./link-icons.js";
+import { emote, mascot } from "./cast.js";
+import { codeLength, spans } from "./ink.js";
+export { emote, mascot };
 export * from "./metro.js";
 export * from "./diagram.js";
 export * from "./ui-icons.js";
 export * from "./link-icons.js";
 const ink = tokens.color.ink;
 const mono = tokens.font.mono;
-/** Pill label centred on (x, y), usually overlapping the top edge of what it names. */
+/** Pill label centred on (x, y), usually overlapping the top edge of what it names. Backticks mark code (card 190). */
 export const pill = definePiece("pill", { x: pos(), y: pos(), text: label(), fill: col(), width: size() }, ({ x, y, text, fill = "color.white", width }) => {
     const h = tokens.cover.pillHeight;
-    const w = width ?? Math.max(68, Math.round(text.length * 10.5 + 34));
-    return drawn([el("rect", { x: x - w / 2, y: y - h / 2, width: w, height: h, rx: h / 2, fill: colour(fill, "fill") })], [el("text", { x, y: y + 7 }, text)]);
+    const w = width ?? Math.max(68, Math.round(codeLength(text) * 10.5 + 34));
+    return drawn([el("rect", { x: x - w / 2, y: y - h / 2, width: w, height: h, rx: h / 2, fill: colour(fill, "fill") })], [el("text", { x, y: y + 7 }, ...spans(text))]);
 });
 // ---------- background ----------
 export const RING_COUNT = 14;
@@ -192,8 +195,15 @@ export const road = definePiece("road", { d: { kind: "string", required: true, n
     el("path", { d, fill: "none", stroke: tokens.illustration.road, "stroke-width": 40, "stroke-linecap": "round" }),
     el("path", { d, fill: "none", stroke: tokens.color.white, "stroke-width": tokens.outline.block, "stroke-dasharray": "14 12" }),
 ]));
-/** A pin standing on (x, y): a stem and a round head with a short label. */
-export const milestonePin = definePiece("milestonePin", { x: pos(), y: pos(), text: label(), fill: col(), stem: size() }, ({ x, y, text, fill = "color.healthy", stem = 44 }) => drawn([el("line", { x1: x, y1: y, x2: x, y2: y - stem }), el("circle", { cx: x, cy: y - stem - 14, r: 18, fill: colour(fill, "fill"), "stroke-width": tokens.outline.small })], [el("text", { x, y: y - stem - 7, "font-size": 18, "font-weight": tokens.font.weightHeavy }, text)]));
+const PIN_SIZE = 18;
+/** A pin standing on (x, y): a stem and a round head with a short label. `size` is the head's radius (18) and
+ * scales the head, its outline and the label together (card 190). */
+export const milestonePin = definePiece("milestonePin", { x: pos(), y: pos(), text: label(), fill: col(), stem: size(), size: { kind: "number", min: 6, max: 48 } }, ({ x, y, text, fill = "color.healthy", stem = 44, size: r }) => {
+    // Without `size`, the 0.5.0 expressions exactly (no rounding), so every 0.5.0 call keeps its bytes.
+    const k = (r ?? PIN_SIZE) / PIN_SIZE;
+    const at = r === undefined ? (v) => v : r2;
+    return drawn([el("line", { x1: x, y1: y, x2: x, y2: y - stem }), el("circle", { cx: x, cy: at(y - stem - 14 * k), r: r ?? PIN_SIZE, fill: colour(fill, "fill"), "stroke-width": at(tokens.outline.small * k) })], [el("text", { x, y: at(y - stem - 7 * k), "font-size": r ?? PIN_SIZE, "font-weight": tokens.font.weightHeavy }, text)]);
+});
 /** Price or version tag pointing left from its tip (x, y), with a hole and an optional string. */
 export const priceTag = definePiece("priceTag", { x: pos(), y: pos(), text: label(), width: size(), fill: col(), stringFrom: { kind: "point" } }, ({ x, y, text, width: w = 128, fill = "color.white", stringFrom }) => {
     const h = 48;
@@ -385,5 +395,7 @@ export const PIECES = {
     linkIcon,
     ...DIAGRAM_PIECES,
     stateStart,
+    mascot,
+    emote,
 };
 export const PIECE_NAMES = Object.keys(PIECES);

package/dist/src/pieces/metro.d.ts

@@ -34,6 +34,7 @@ export type CountBadgeParams = Ink & {
     text: string;
     width?: number;
     height?: number;
+    textSize?: number;
 };
 /** A count (rules of a skill): a circle when as wide as high, a pill otherwise, in the surface's panel colour. */
 export declare const countBadge: import("./piece.ts").Piece<CountBadgeParams>;
@@ -56,12 +57,15 @@ export declare const pillNode: import("./piece.ts").Piece<NodeParams>;
 /** A diagram hexagon (an agent). */
 export declare const hexNode: import("./piece.ts").Piece<NodeParams>;
 export type ArrowKind = "message" | "reply" | "failure" | "failFast";
+export type ArrowHeads = "end" | "start" | "both";
 export type MessageArrowParams = {
     from: Point;
     to: Point;
     curve?: "bezier" | "straight";
     controls?: [Point, Point];
     head?: boolean;
+    heads?: ArrowHeads;
+    dashed?: boolean;
     label?: string;
     width?: number;
     kind?: ArrowKind;

package/dist/src/pieces/metro.js

@@ -70,20 +70,30 @@ export const pipe = definePiece("pipe", { d: PIPE_PATH, fill: dataColour(), widt
         el("path", { ...line, stroke: paint(fill), "stroke-width": width }),
     ]);
 });
-const countWidth = ({ width, text, height = M.countHeight }) => {
+// `textSize` scales the default height, the per-character width and the baseline with it (card 190);
+// without it, k is 1 and every expression is the 0.5.0 one.
+const countScale = ({ textSize }) => (textSize ?? M.countTextSize) / M.countTextSize;
+const countHeight = (params) => params.height ?? (params.textSize === undefined ? M.countHeight : r2(M.countHeight * countScale(params)));
+const countWidth = (params) => {
+    const { width, text } = params;
+    const height = countHeight(params);
+    const k = countScale(params);
     const characters = Array.from(text).length;
-    return width ?? (characters === 1 ? height : Math.max(height, 6.4 * characters + 8));
+    return width ?? (characters === 1 ? height : Math.max(height, k === 1 ? 6.4 * characters + 8 : r2(k * (6.4 * characters + 8))));
 };
 /** A count (rules of a skill): a circle when as wide as high, a pill otherwise, in the surface's panel colour. */
-export const countBadge = definePiece("countBadge", { cx: pos(), cy: pos(), text: label(), width: size(), height: size(), ...inkSchema }, (params) => {
-    const { cx, cy, text, height = M.countHeight } = params;
+export const countBadge = definePiece("countBadge", { cx: pos(), cy: pos(), text: label(), width: size(), height: size(), textSize: { kind: "number", min: 6, max: 48 }, ...inkSchema }, (params) => {
+    const { cx, cy, text, textSize = M.countTextSize } = params;
+    const height = countHeight(params);
     const width = countWidth(params);
     const { s } = inkOf(params);
     const shape = width === height ? (dx, dy, attrs) => el("circle", { cx: r2(cx + dx), cy: r2(cy + dy), r: r2(height / 2), ...attrs }) : pill(cx - width / 2, cy - height / 2, width, height);
-    return drawn(sticker(shape, s.panel, params), [words(cx, cy + 4, text, { fill: s.text, "font-size": M.countTextSize, "font-weight": bold, "text-anchor": "middle" })]);
+    return drawn(sticker(shape, s.panel, params), [words(cx, cy + 4 * countScale(params), text, { fill: s.text, "font-size": textSize, "font-weight": bold, "text-anchor": "middle" })]);
 }, (params) => {
-    const height = params.height ?? M.countHeight;
-    return limits(atLeast("width", countWidth(params), height, "the height"), roomFor("height", height, params));
+    const height = countHeight(params);
+    // A height derived from textSize is reported at textSize, the parameter the caller passed (card 190).
+    const name = params.height === undefined && params.textSize !== undefined ? "textSize" : "height";
+    return limits(atLeast("width", countWidth(params), height, "the height"), roomFor(name, height, params));
 });
 const nodeSchema = {
     x: pos(),
@@ -147,11 +157,13 @@ export const messageArrow = definePiece("messageArrow", {
     curve: { kind: "enum", values: ["bezier", "straight"] },
     controls: { kind: "array", minItems: 2, maxItems: 2, of: point() },
     head: { kind: "boolean" },
+    heads: { kind: "enum", values: ["end", "start", "both"] },
+    dashed: { kind: "boolean" },
     label: label(false),
     width: { kind: "number", min: 1, max: 12 },
     kind: { kind: "enum", values: ["message", "reply", "failure", "failFast"] },
     surface: surfaceParam,
-}, ({ from, to, curve = "bezier", controls, head = true, label: text, width = M.edgeWidth, kind = "message", surface = "light" }) => {
+}, ({ from, to, curve = "bezier", controls, head = true, heads = "end", dashed, label: text, width = M.edgeWidth, kind = "message", surface = "light" }) => {
     const s = tokens.surface[surface];
     const paint_ = kind === "failure" ? tokens.color.failure : kind === "failFast" ? tokens.color.failFast : s.text;
     const length = 5 * width;
@@ -166,21 +178,35 @@ export const messageArrow = definePiece("messageArrow", {
     };
     const tail = controls && [controls[1], controls[0], from].find((q) => q[0] !== to[0] || q[1] !== to[1]);
     const direction = tail !== undefined ? towards(tail) : bent ? [Math.sign(dx), 0] : [dx / distance, (to[1] - from[1]) / distance];
-    const end = head ? [to[0] - direction[0] * length, to[1] - direction[1] * length] : to;
+    const atEnd = head && heads !== "start";
+    const atStart = head && heads !== "end";
+    const end = atEnd ? [to[0] - direction[0] * length, to[1] - direction[1] * length] : to;
+    // A head at `from` points back at it, from the first of c1, c2, to that differs from `from` (card 190).
+    const away = (q) => {
+        const l = Math.hypot(from[0] - q[0], from[1] - q[1]);
+        return [(from[0] - q[0]) / l, (from[1] - q[1]) / l];
+    };
+    const lead = controls && [controls[0], controls[1], to].find((q) => q[0] !== from[0] || q[1] !== from[1]);
+    const back = lead !== undefined ? away(lead) : bent ? [-Math.sign(dx), 0] : [-direction[0], -direction[1]];
+    const start = atStart ? [from[0] - back[0] * length, from[1] - back[1] * length] : from;
     const mx = (from[0] + to[0]) / 2;
     const at = (p) => `${r2(p[0])},${r2(p[1])}`;
     const d = controls
-        ? `M${at(from)} C${at(controls[0])} ${at(controls[1])} ${at(end)}`
+        ? `M${at(start)} C${at(controls[0])} ${at(controls[1])} ${at(end)}`
         : bent
-            ? `M${at(from)} C${r2(mx)},${r2(from[1])} ${r2(mx)},${r2(to[1])} ${at(end)}`
-            : `M${at(from)} L${at(end)}`;
-    const dash = kind === "message" ? {} : { "stroke-dasharray": `${r2(2.4 * width)} ${r2(3.2 * width)}` };
+            ? `M${at(start)} C${r2(mx)},${r2(from[1])} ${r2(mx)},${r2(to[1])} ${at(end)}`
+            : `M${at(start)} L${at(end)}`;
+    const dash = !(dashed ?? kind !== "message") ? {} : { "stroke-dasharray": `${r2(2.4 * width)} ${r2(3.2 * width)}` };
     const body = [el("path", { d, fill: "none", stroke: paint_, "stroke-width": r2(width), "stroke-linecap": "round", ...dash })];
-    if (head) {
-        const normal = [-direction[1] * 2 * width, direction[0] * 2 * width];
-        const points = [to, [end[0] + normal[0], end[1] + normal[1]], [end[0] - normal[0], end[1] - normal[1]]];
+    const arrowhead = (tip, base, along) => {
+        const normal = [-along[1] * 2 * width, along[0] * 2 * width];
+        const points = [tip, [base[0] + normal[0], base[1] + normal[1]], [base[0] - normal[0], base[1] - normal[1]]];
         body.push(el("polygon", { points: points.map(at).join(" "), fill: paint_, stroke: paint_, "stroke-width": 1, "stroke-linejoin": "round" }));
-    }
+    };
+    if (atEnd)
+        arrowhead(to, end, direction);
+    if (atStart)
+        arrowhead(from, start, back);
     const words_ = [];
     if (text !== undefined) {
         const middle = [mx, (from[1] + to[1]) / 2];
@@ -189,9 +215,10 @@ export const messageArrow = definePiece("messageArrow", {
         words_.push(words(middle[0], middle[1] + 4, text, { fill: s.text, "font-size": 11, "font-weight": 400, "text-anchor": "middle" }));
     }
     return drawn(body, words_);
-}, ({ from, to, head = true, width = M.edgeWidth, controls, curve }) => {
+}, ({ from, to, head = true, heads, width = M.edgeWidth, controls, curve }) => {
     const distance = Math.hypot(to[0] - from[0], to[1] - from[1]);
-    return limits(distance === 0 && { path: "to", message: "must differ from from" }, distance > 0 && head && distance < 10 * width && { path: "to", message: `is too close to from for the head: needs at least ${r2(10 * width)}, found ${r2(distance)}` }, controls !== undefined && curve !== undefined && { path: "controls", message: "cannot be combined with curve" });
+    const need = (heads === "both" ? 20 : 10) * width;
+    return limits(head === false && heads !== undefined && { path: "heads", message: "cannot be combined with head: false" }, distance === 0 && { path: "to", message: "must differ from from" }, distance > 0 && head && distance < need && { path: "to", message: `is too close to from for the ${heads === "both" ? "heads" : "head"}: needs at least ${r2(need)}, found ${r2(distance)}` }, controls !== undefined && curve !== undefined && { path: "controls", message: "cannot be combined with curve" });
 });
 /** stackledger's mark (favicon, header): an ink square with a bent line and two stations, 32 units scaled to `size`.
  * On a surface with a rim (dark), a light rim of 2 × rimWidth lines the square inside its 32 box (card 167). */

package/dist/tokens/generated/tokens.d.ts

@@ -11,6 +11,43 @@ export declare const tokens: {
         readonly startRadius: 11;
         readonly width: 800;
     };
+    readonly cast: {
+        readonly agent: {
+            readonly neck: "#E3E8F5";
+            readonly shine: "#E6ECFF";
+        };
+        readonly architect: {
+            readonly fill: "#22B5A4";
+            readonly shine: "#9CF0E4";
+        };
+        readonly data: {
+            readonly fill: "#8C6CF0";
+            readonly lens: "#EAF1FF";
+            readonly lid: "#C2B1FF";
+            readonly shine: "#B39CFF";
+        };
+        readonly dev: {
+            readonly chin: "#8FA6FF";
+            readonly fill: "#5B7CFA";
+            readonly screen: "#DCE6FF";
+        };
+        readonly devops: {
+            readonly fill: "#D76AA5";
+            readonly shine: "#F3B8D6";
+        };
+        readonly emotePop: {
+            readonly damping: 9;
+            readonly mass: 0.7;
+            readonly stiffness: 170;
+        };
+        readonly glow: "#7FD1FF";
+        readonly ground: "#D3DBF5";
+        readonly metal: "#C9D2E8";
+        readonly mouth: "#B94A3E";
+        readonly request: {
+            readonly shine: "#D6E2FF";
+        };
+    };
     readonly color: {
         readonly backend: "#FF6B6B";
         readonly blocked: "#FF8A3D";

package/dist/tokens/generated/tokens.js

@@ -12,6 +12,43 @@ export const tokens = {
         "startRadius": 11,
         "width": 800
     },
+    "cast": {
+        "agent": {
+            "neck": "#E3E8F5",
+            "shine": "#E6ECFF"
+        },
+        "architect": {
+            "fill": "#22B5A4",
+            "shine": "#9CF0E4"
+        },
+        "data": {
+            "fill": "#8C6CF0",
+            "lens": "#EAF1FF",
+            "lid": "#C2B1FF",
+            "shine": "#B39CFF"
+        },
+        "dev": {
+            "chin": "#8FA6FF",
+            "fill": "#5B7CFA",
+            "screen": "#DCE6FF"
+        },
+        "devops": {
+            "fill": "#D76AA5",
+            "shine": "#F3B8D6"
+        },
+        "emotePop": {
+            "damping": 9,
+            "mass": 0.7,
+            "stiffness": 170
+        },
+        "glow": "#7FD1FF",
+        "ground": "#D3DBF5",
+        "metal": "#C9D2E8",
+        "mouth": "#B94A3E",
+        "request": {
+            "shine": "#D6E2FF"
+        }
+    },
     "color": {
         "backend": "#FF6B6B",
         "blocked": "#FF8A3D",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Design tokens and illustration pieces of brunosouzas.com: tokens as CSS, JSON and TypeScript, pieces that draw SVG (and React), and a cover command.",
   "license": "Apache-2.0",
   "repository": {

package/tokens/generated/tokens.css

@@ -8,6 +8,27 @@
   --ds-body-diagram-ring-radius: 70px;
   --ds-body-diagram-start-radius: 11px;
   --ds-body-diagram-width: 800px;
+  --ds-cast-agent-neck: #E3E8F5;
+  --ds-cast-agent-shine: #E6ECFF;
+  --ds-cast-architect-fill: #22B5A4;
+  --ds-cast-architect-shine: #9CF0E4;
+  --ds-cast-data-fill: #8C6CF0;
+  --ds-cast-data-lens: #EAF1FF;
+  --ds-cast-data-lid: #C2B1FF;
+  --ds-cast-data-shine: #B39CFF;
+  --ds-cast-dev-chin: #8FA6FF;
+  --ds-cast-dev-fill: #5B7CFA;
+  --ds-cast-dev-screen: #DCE6FF;
+  --ds-cast-devops-fill: #D76AA5;
+  --ds-cast-devops-shine: #F3B8D6;
+  --ds-cast-emote-pop-damping: 9;
+  --ds-cast-emote-pop-mass: 0.7;
+  --ds-cast-emote-pop-stiffness: 170;
+  --ds-cast-glow: #7FD1FF;
+  --ds-cast-ground: #D3DBF5;
+  --ds-cast-metal: #C9D2E8;
+  --ds-cast-mouth: #B94A3E;
+  --ds-cast-request-shine: #D6E2FF;
   --ds-color-backend: #FF6B6B;
   --ds-color-blocked: #FF8A3D;
   --ds-color-caller: #8FB2FF;

package/tokens/generated/tokens.json

@@ -11,6 +11,43 @@
     "startRadius": 11,
     "width": 800
   },
+  "cast": {
+    "agent": {
+      "neck": "#E3E8F5",
+      "shine": "#E6ECFF"
+    },
+    "architect": {
+      "fill": "#22B5A4",
+      "shine": "#9CF0E4"
+    },
+    "data": {
+      "fill": "#8C6CF0",
+      "lens": "#EAF1FF",
+      "lid": "#C2B1FF",
+      "shine": "#B39CFF"
+    },
+    "dev": {
+      "chin": "#8FA6FF",
+      "fill": "#5B7CFA",
+      "screen": "#DCE6FF"
+    },
+    "devops": {
+      "fill": "#D76AA5",
+      "shine": "#F3B8D6"
+    },
+    "emotePop": {
+      "damping": 9,
+      "mass": 0.7,
+      "stiffness": 170
+    },
+    "glow": "#7FD1FF",
+    "ground": "#D3DBF5",
+    "metal": "#C9D2E8",
+    "mouth": "#B94A3E",
+    "request": {
+      "shine": "#D6E2FF"
+    }
+  },
   "color": {
     "backend": "#FF6B6B",
     "blocked": "#FF8A3D",

package/tokens/generated/tokens.ts

@@ -13,6 +13,43 @@ export const tokens = {
     "startRadius": 11,
     "width": 800
   },
+  "cast": {
+    "agent": {
+      "neck": "#E3E8F5",
+      "shine": "#E6ECFF"
+    },
+    "architect": {
+      "fill": "#22B5A4",
+      "shine": "#9CF0E4"
+    },
+    "data": {
+      "fill": "#8C6CF0",
+      "lens": "#EAF1FF",
+      "lid": "#C2B1FF",
+      "shine": "#B39CFF"
+    },
+    "dev": {
+      "chin": "#8FA6FF",
+      "fill": "#5B7CFA",
+      "screen": "#DCE6FF"
+    },
+    "devops": {
+      "fill": "#D76AA5",
+      "shine": "#F3B8D6"
+    },
+    "emotePop": {
+      "damping": 9,
+      "mass": 0.7,
+      "stiffness": 170
+    },
+    "glow": "#7FD1FF",
+    "ground": "#D3DBF5",
+    "metal": "#C9D2E8",
+    "mouth": "#B94A3E",
+    "request": {
+      "shine": "#D6E2FF"
+    }
+  },
   "color": {
     "backend": "#FF6B6B",
     "blocked": "#FF8A3D",