@dotcraft/avatar 0.7.0 → 0.7.2

package/dist/items.js

@@ -0,0 +1,52 @@
+export const slots = ['head', 'face', 'hand', 'back', 'skin'];
+export const rarities = ['common', 'uncommon', 'rare', 'epic', 'legendary'];
+export const seriesIds = ['everyday', 'dev', 'tech', 'fantasy', 'nature', 'snack', 'critters'];
+export const zones = ['top', 'brow', 'rim', 'screen', 'hand', 'back', 'body'];
+const hat = (id, rarity, series = 'everyday') => ({ id, slot: 'head', rarity, series, zones: ['top', 'brow'] });
+const object = (id, rarity, series) => ({ id, slot: 'head', rarity, series, zones: ['top'] });
+const brow = (id, rarity, series) => ({ id, slot: 'face', rarity, series, zones: ['brow'] });
+const faceplate = (id, rarity, series) => ({ id, slot: 'face', rarity, series, zones: ['screen'] });
+const hand = (id, rarity, series) => ({ id, slot: 'hand', rarity, series, zones: ['hand'] });
+const back = (id, rarity, series) => ({ id, slot: 'back', rarity, series, zones: ['back'] });
+const skin = (id, rarity, series) => ({ id, slot: 'skin', rarity, series, zones: ['body'] });
+// Registry order is presentation order only; sampling is weighted by rarity, then uniform.
+export const items = [
+    hat('baseball-cap', 'common'), hat('bucket-hat', 'common'), hat('beret', 'uncommon'), hat('beanie', 'common'),
+    hat('top-hat', 'rare'), hat('wizard-hat', 'rare', 'fantasy'), hat('chef-hat', 'uncommon', 'snack'), hat('party-hat', 'uncommon'),
+    hat('crown', 'epic', 'fantasy'), hat('hard-hat', 'common'), hat('nightcap', 'uncommon'), hat('straw-hat', 'common'),
+    object('poop', 'uncommon', 'everyday'), object('banana', 'common', 'snack'), object('fried-egg', 'common', 'snack'),
+    object('rubber-duck', 'uncommon', 'critters'), object('paper-boat', 'common', 'everyday'), object('traffic-cone', 'common', 'everyday'),
+    object('sprout', 'common', 'nature'), object('donut', 'uncommon', 'snack'), object('ringed-planet', 'legendary', 'tech'),
+    object('cat-ears', 'common', 'critters'), hat('cowboy-hat', 'common'), object('mushroom', 'common', 'nature'),
+    object('shark-fin', 'uncommon', 'critters'), hat('propeller-cap', 'uncommon'), hat('graduation-cap', 'uncommon', 'dev'),
+    object('ice-cream', 'uncommon', 'snack'), object('flower-crown', 'rare', 'nature'), hat('pirate-hat', 'rare', 'fantasy'),
+    object('lightning', 'epic', 'tech'), object('crystal-cluster', 'epic', 'fantasy'), object('ufo', 'legendary', 'tech'),
+    brow('shades', 'common', 'everyday'), brow('forehead-goggles', 'uncommon', 'tech'),
+    faceplate('mecha-faceplate', 'rare', 'tech'), faceplate('pixel-screen', 'rare', 'dev'),
+    faceplate('gold-faceplate', 'epic', 'tech'), faceplate('neon-visor', 'legendary', 'tech'),
+    hand('task-board', 'common', 'dev'), hand('wrench', 'common', 'dev'), hand('coffee-mug', 'common', 'dev'),
+    hand('paintbrush', 'common', 'everyday'), hand('boba-tea', 'common', 'snack'),
+    hand('shield', 'uncommon', 'dev'), hand('magnifier', 'uncommon', 'dev'), hand('gamepad', 'uncommon', 'dev'), hand('flag', 'uncommon', 'everyday'),
+    hand('control-panel', 'rare', 'tech'), hand('lantern', 'rare', 'fantasy'),
+    hand('magic-wand', 'epic', 'fantasy'), hand('staff', 'epic', 'fantasy'), hand('energy-blade', 'legendary', 'tech'),
+    back('cape', 'common', 'fantasy'), back('crescent-moon', 'common', 'nature'),
+    back('jetpack', 'uncommon', 'tech'), back('star-trail', 'uncommon', 'fantasy'), back('balloons', 'uncommon', 'everyday'),
+    back('bat-wings', 'rare', 'critters'), back('butterfly-wings', 'rare', 'critters'),
+    back('halo', 'epic', 'fantasy'), back('angel-wings', 'epic', 'fantasy'), back('sun-rays', 'epic', 'nature'),
+    back('orbit-ring', 'legendary', 'tech'), back('dragon-wings', 'legendary', 'fantasy'),
+    skin('stripes', 'common', 'everyday'),
+    skin('chrome', 'epic', 'tech'), skin('gold', 'epic', 'fantasy'), skin('lava', 'epic', 'nature'),
+    skin('holographic', 'legendary', 'tech'), skin('galaxy', 'legendary', 'fantasy'),
+];
+const byId = new Map(items.map(item => [item.id, item]));
+export function itemOf(id) { return byId.get(id); }
+export function isItemId(id) { return byId.has(id); }
+export function itemsOf(slot) {
+    return items.filter((item) => item.slot === slot);
+}
+export function slotIds(slot) { return itemsOf(slot).map(item => item.id); }
+export function conflicts(a, b) {
+    const right = itemOf(b).zones;
+    return itemOf(a).zones.some(zone => right.includes(zone));
+}
+//# sourceMappingURL=items.js.map

package/dist/items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.js","sourceRoot":"","sources":["../src/items.ts"],"names":[],"mappings":"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"}

package/dist/paintMaterials.d.ts

@@ -0,0 +1,31 @@
+import type { SkinId } from './items.js';
+export interface PaintMaterial {
+    shadow: string;
+    accent: string;
+}
+export declare const paintMaterials: {
+    readonly chrome: {
+        readonly shadow: "#1f2733";
+        readonly accent: "#c3ccd8";
+    };
+    readonly holographic: {
+        readonly shadow: "#5b3a8c";
+        readonly accent: "#c98aff";
+    };
+    readonly gold: {
+        readonly shadow: "#5a3a10";
+        readonly accent: "#f6d365";
+    };
+    readonly lava: {
+        readonly shadow: "#3a0a05";
+        readonly accent: "#ff6a2a";
+    };
+    readonly galaxy: {
+        readonly shadow: "#0b0620";
+        readonly accent: "#7c3aed";
+    };
+};
+export type PaintSkinId = keyof typeof paintMaterials;
+export declare function isPaintSkin(id: SkinId | 'none'): id is PaintSkinId;
+export declare function paintMaterialOf(id: SkinId | 'none'): PaintMaterial | undefined;
+//# sourceMappingURL=paintMaterials.d.ts.map

package/dist/paintMaterials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paintMaterials.d.ts","sourceRoot":"","sources":["../src/paintMaterials.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAExC,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAMgC,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,cAAc,CAAA;AACrD,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,EAAE,IAAI,WAAW,CAAgC;AACnG,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAA4D"}

package/dist/paintMaterials.js

@@ -0,0 +1,10 @@
+export const paintMaterials = {
+    chrome: { shadow: '#1f2733', accent: '#c3ccd8' },
+    holographic: { shadow: '#5b3a8c', accent: '#c98aff' },
+    gold: { shadow: '#5a3a10', accent: '#f6d365' },
+    lava: { shadow: '#3a0a05', accent: '#ff6a2a' },
+    galaxy: { shadow: '#0b0620', accent: '#7c3aed' },
+};
+export function isPaintSkin(id) { return id in paintMaterials; }
+export function paintMaterialOf(id) { return isPaintSkin(id) ? paintMaterials[id] : undefined; }
+//# sourceMappingURL=paintMaterials.js.map

package/dist/paintMaterials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paintMaterials.js","sourceRoot":"","sources":["../src/paintMaterials.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAChD,WAAW,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IACrD,IAAI,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IAC9C,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;CACS,CAAA;AAG3D,MAAM,UAAU,WAAW,CAAC,EAAmB,IAAuB,OAAO,EAAE,IAAI,cAAc,CAAA,CAAC,CAAC;AACnG,MAAM,UAAU,eAAe,CAAC,EAAmB,IAA+B,OAAO,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA,CAAC,CAAC"}

package/dist/palette.d.ts

@@ -1,3 +1,4 @@
+import type { SkinId } from './items.js';
 export interface PaletteEntry {
     key: string;
     bodyD: string;
@@ -22,5 +23,6 @@ export declare function paletteOf(spec: {
 }): PaletteEntry;
 export declare function mascotPaletteOf(spec?: {
     palette: number;
+    skin?: SkinId | 'none';
 }): MascotPaintPalette;
 //# sourceMappingURL=palette.d.ts.map

package/dist/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,6DAA6D;AAC7D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,yEAAyE;AACzE,eAAO,MAAM,sBAAsB,EAAE,kBAUpC,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,YAAY,EAajC,CAAA;AAGD,wBAAgB,SAAS,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAA2D;AAC7H,wBAAgB,eAAe,CAAC,IAAI,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,kBAAkB,CAG9E"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,6DAA6D;AAC7D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,yEAAyE;AACzE,eAAO,MAAM,sBAAsB,EAAE,kBAUpC,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,YAAY,EAajC,CAAA;AAGD,wBAAgB,SAAS,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAA2D;AAC7H,wBAAgB,eAAe,CAAC,IAAI,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,kBAAkB,CAItG"}

package/dist/palette.js

@@ -1,3 +1,4 @@
+import { paintMaterialOf } from './paintMaterials.js';
 /** Canonical DotCraft mascot paint when no Agent Profile is selected. */
 export const DEFAULT_MASCOT_PALETTE = {
     key: 'default',
@@ -27,9 +28,8 @@ export const PALETTE = [
 ];
 export function paletteOf(spec) { return PALETTE[spec.palette] ?? DEFAULT_MASCOT_PALETTE; }
 export function mascotPaletteOf(spec) {
-    if (!spec || spec.palette === -1)
-        return DEFAULT_MASCOT_PALETTE;
-    const paint = paletteOf(spec);
-    return { ...paint, markM: paint.markL };
+    const material = paintMaterialOf(spec?.skin ?? 'none');
+    const paint = !spec || spec.palette === -1 ? DEFAULT_MASCOT_PALETTE : { ...paletteOf(spec), markM: paletteOf(spec).markL };
+    return material ? { ...paint, ...material } : paint;
 }
 //# sourceMappingURL=palette.js.map

package/dist/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"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"}

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-export { Avatar, AppearanceAvatar, type AvatarProps, type AppearanceAvatarProps } from './Avatar.js';
-export { DecorationSwatch, PrimaryDecoration, SecondaryDecoration } from './Decorations.js';
+export { Avatar, AppearanceAvatar, sizeTier, type AvatarProps, type AppearanceAvatarProps, type SizeTier } from './Avatar.js';
+export { DecorationSwatch, SlotDecoration, HeadDecoration } from './Decorations.js';
 export { ComposerMascot } from './composer/ComposerMascot.js';
 export type { ComposerMascotProps, ComposerMascotContext, MascotExpression, MascotLight } from './composer/types.js';
 export { ComposerMascotShadow } from './composer/ComposerMascotShadow.js';

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACpG,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACpH,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AACnF,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,KAAK,sBAAsB,EAAE,KAAK,uBAAuB,EAAE,MAAM,mCAAmC,CAAA;AACnK,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,qBAAqB,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACpH,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AACnF,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,KAAK,sBAAsB,EAAE,KAAK,uBAAuB,EAAE,MAAM,mCAAmC,CAAA;AACnK,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/react.js

@@ -1,5 +1,5 @@
-export { Avatar, AppearanceAvatar } from './Avatar.js';
-export { DecorationSwatch, PrimaryDecoration, SecondaryDecoration } from './Decorations.js';
+export { Avatar, AppearanceAvatar, sizeTier } from './Avatar.js';
+export { DecorationSwatch, SlotDecoration, HeadDecoration } from './Decorations.js';
 export { ComposerMascot } from './composer/ComposerMascot.js';
 export { ComposerMascotShadow } from './composer/ComposerMascotShadow.js';
 export { useComposerAvatarBehavior } from './composer/useComposerAvatarBehavior.js';

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAgD,MAAM,aAAa,CAAA;AACpG,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3F,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AACnF,OAAO,EAAE,mBAAmB,EAA8F,MAAM,mCAAmC,CAAA;AACnK,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAA+D,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AACnF,OAAO,EAAE,mBAAmB,EAA8F,MAAM,mCAAmC,CAAA;AACnK,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/styles.css

@@ -1,6 +1,7 @@
 @import './rig.css';
 @import './avatar.css';
 @import './accessories.css';
+@import './effects.css';
 
 @import "./composer/styles/foundation.css";
 @import "./composer/styles/overdrive.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcraft/avatar",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Name-derived DotCraft avatars and React SVG animation components",
   "type": "module",
   "main": "./dist/index.js",

package/src/AnimatedDecoration.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react'
-import type { PrimaryId } from './appearanceModel.js'
+import type { HeadId } from './items.js'
 import type { AvatarPose } from './characters.js'
-import { PrimaryDecoration } from './Decorations.js'
+import { HeadDecoration } from './Decorations.js'
 import { advanceDecoration, decorationMotionProfiles, frameTransform, requestDecorationEvent, restFrame, type DecorationClock, type DecorationFrame } from './decorationMotion.js'
 
 export function AnimatedDecoration({ id, pose, sequence, enabled, paused }: {
-  id: Exclude<PrimaryId, 'none'>; pose: AvatarPose; sequence: number; enabled: boolean; paused: boolean
+  id: HeadId; pose: AvatarPose; sequence: number; enabled: boolean; paused: boolean
 }) {
   const art = useRef<SVGGElement>(null)
   const shadow = useRef<SVGEllipseElement>(null)
@@ -38,6 +38,6 @@ export function AnimatedDecoration({ id, pose, sequence, enabled, paused }: {
   }, [id, pose, sequence, enabled, paused])
   return <g data-decoration-motion={profile.kind}>
     {profile.shadow > 0 && <ellipse ref={shadow} cx={profile.x} cy="404" rx={profile.shadow} ry="7" fill="#243344" opacity=".12" />}
-    <g ref={art} transform={frameTransform(profile, restFrame)}><PrimaryDecoration id={id} /></g>
+    <g ref={art} transform={frameTransform(profile, restFrame)}><HeadDecoration id={id} /></g>
   </g>
 }

package/src/AppearanceRig.tsx

@@ -1,14 +1,15 @@
 import type { ReactNode } from 'react'
 import type { AvatarPose, AvatarExpression } from './characters.js'
 import type { Appearance } from './appearanceModel.js'
-import { MascotRig, type MascotExpression } from './MascotRig.js'
-export function AppearanceRig({ appearance, pose, expression: override, top, accessory, held }: {
-  appearance: Appearance; pose: AvatarPose; expression?: AvatarExpression; top?: ReactNode; accessory?: ReactNode; held?: ReactNode
+import { MascotRig, type BodyPaint, type Faceplate, type MascotExpression } from './MascotRig.js'
+export function AppearanceRig({ appearance, pose, expression: override, top, accessory, faceplate, held, back, front, surface, paint }: {
+  appearance: Appearance; pose: AvatarPose; expression?: AvatarExpression
+  top?: ReactNode; accessory?: ReactNode; faceplate?: Faceplate; held?: ReactNode; back?: ReactNode; front?: ReactNode; surface?: ReactNode; paint?: BodyPaint
 }) {
   const derived: MascotExpression = pose === 'sleep' ? 'sleep' : ['done', 'greeting', 'acknowledge'].includes(pose) ? 'happy'
     : ['working', 'waiting', 'blocked'].includes(pose) ? 'operator' : 'neutral'
   const expression = override === 'base' ? 'neutral' : override ?? derived
-  return <MascotRig size={1024} expression={expression} top={top} accessory={accessory} held={held}
+  return <MascotRig size={1024} expression={expression} top={top} accessory={accessory} faceplate={faceplate} held={held} back={back} front={front} surface={surface} paint={paint}
     baseFace={appearance.baseFace}
     light={pose === 'blocked' ? 'error' : pose === 'done' ? 'success' : 'default'}
     avatar={appearance.palette === -1 ? undefined : { palette: appearance.palette }} />

package/src/Avatar.tsx

@@ -1,14 +1,18 @@
 import { useEffect, useRef, useState, type CSSProperties } from 'react'
 import { AppearanceRig } from './AppearanceRig.js'
 import type { AvatarPose, MotionMode, AvatarExpression, AvatarGesture } from './characters.js'
-import { deriveAppearance, isHeld, type Appearance } from './appearanceModel.js'
-
-import { SecondaryDecoration } from './Decorations.js'
+import { deriveAppearance, type Appearance } from './appearanceModel.js'
 import { AnimatedDecoration } from './AnimatedDecoration.js'
+import { FaceDecoration, faceplateOf } from './FaceDecorations.js'
+import { HandDecoration } from './HandDecorations.js'
+import { BackDecoration, BackFrontDecoration, hasFrontPart } from './BackDecorations.js'
+import { SkinOverlay, SkinPaintSurface, skinPaint } from './SkinDecorations.js'
 import { useMotionEnvironment, useOnscreen, useTransitionPause } from './environment.js'
 import { useGesture } from './useGesture.js'
 import { useEventReplay } from './useEventReplay.js'
 
+export type SizeTier = 'compact' | 'standard' | 'full'
+export function sizeTier(size: number): SizeTier { return size <= 20 ? 'compact' : size < 44 ? 'standard' : 'full' }
 
 export interface AppearanceAvatarProps {
   appearance: Appearance
@@ -26,17 +30,18 @@ export interface AppearanceAvatarProps {
 }
 export function AppearanceAvatar({ appearance, state = 'idle', size = 44, motion = 'off', paused = false, label, eventSequence = 0, className, expression, gesture, gestureSequence = 0, onGestureComplete }: AppearanceAvatarProps) {
   const ref = useRef<HTMLSpanElement>(null)
-  const visible = useOnscreen(ref, motion !== 'off' && size > 20)
-  const environment = useMotionEnvironment(motion, size > 20)
+  const tier = sizeTier(size)
+  const compact = tier === 'compact'
+  const visible = useOnscreen(ref, motion !== 'off' && !compact)
+  const environment = useMotionEnvironment(motion, !compact)
   useTransitionPause(ref, paused || !visible)
   const [displayed, setDisplayed] = useState(state)
   const [displayedSequence, setDisplayedSequence] = useState(eventSequence)
   const [exiting, setExiting] = useState(false)
   const identity = JSON.stringify(appearance)
   const previousIdentity = useRef(identity)
-  const compact = size <= 20
   const animated = environment && !compact
-  const held = !compact && isHeld(appearance.secondary)
+  const held = !compact && appearance.hand !== 'none'
   const [shownExpression, setShownExpression] = useState(expression)
   useEffect(() => { if (!animated || (!paused && visible)) setShownExpression(expression) }, [expression, animated, paused, visible])
   useGesture(ref, gesture, gestureSequence, animated, paused || !visible, onGestureComplete)
@@ -58,6 +63,7 @@ export function AppearanceAvatar({ appearance, state = 'idle', size = 44, motion
   }, [state, displayed, animated, paused, visible, identity, eventSequence, displayedSequence])
 
   const pose = animated ? displayed : state
+  const effects = compact ? 'off' : tier === 'full' && animated ? 'live' : 'static'
   const classes = [
     'dca-rig',
     !compact && pose === 'waiting' ? 'dca-action-hold-sign' : '',
@@ -65,17 +71,25 @@ export function AppearanceAvatar({ appearance, state = 'idle', size = 44, motion
     !compact && pose === 'done' ? 'dca-action-celebrate' : '',
     !compact && pose === 'greeting' && !exiting ? 'dca-action-wave' : '',
   ].filter(Boolean).join(' ')
+  const paint = appearance.skin === 'none' ? undefined : skinPaint(appearance.skin)
+  const overlay = compact || appearance.skin === 'none' ? undefined
+    : paint ? <SkinPaintSurface id={appearance.skin} /> : <SkinOverlay id={appearance.skin} />
+  const faceplate = faceplateOf(appearance.face)
+  const back = appearance.back !== 'none' ? <g className="dca-part-back" data-back={appearance.back}><BackDecoration id={appearance.back} /></g> : undefined
+  const front = appearance.back !== 'none' && hasFrontPart(appearance.back) ? <g className="dca-part-front"><BackFrontDecoration id={appearance.back} /></g> : undefined
   return <span ref={ref} className={`dca-robot${className ? ` ${className}` : ''}`} style={{ width: size, height: size, '--dca-loop': '2.6s' } as CSSProperties}
     data-pose={pose} data-mode={motion} data-motion={animated ? 'on' : 'off'} data-paused={paused || !visible} data-exiting={exiting} data-compact={compact}
-    data-primary={appearance.primary} data-secondary={appearance.secondary} data-base-face={appearance.baseFace}
+    data-size-tier={tier} data-effects={effects}
+    data-head={appearance.head} data-face={appearance.face} data-hand={appearance.hand} data-back={appearance.back} data-skin={appearance.skin} data-base-face={appearance.baseFace}
     data-gesture={animated ? gesture : undefined} data-held-state={held ? (pose === 'working' || pose === 'waiting' ? 'stowed' : 'holding') : undefined}>
     <svg className="dca-canvas" width={size} height={size} viewBox="0 0 1024 1024" fill="none" role={label ? 'img' : undefined} aria-hidden={label ? undefined : true}
       aria-label={label}>
       <g className="dca-body-motion"><g className={classes}>
         <AppearanceRig appearance={appearance} pose={pose} expression={animated ? shownExpression : expression}
-          top={appearance.primary === 'none' ? undefined : <AnimatedDecoration id={appearance.primary} pose={state} sequence={eventSequence} enabled={animated} paused={paused || !visible} />}
-          held={!compact && held ? <g data-accessory={appearance.secondary} className="dca-part-held"><SecondaryDecoration id={appearance.secondary} /></g> : undefined}
-          accessory={!compact && !held ? <g data-accessory={appearance.secondary}><SecondaryDecoration id={appearance.secondary} /></g> : undefined} />
+          top={appearance.head === 'none' ? undefined : <AnimatedDecoration id={appearance.head} pose={state} sequence={eventSequence} enabled={animated} paused={paused || !visible} />}
+          held={held && appearance.hand !== 'none' ? <g data-accessory={appearance.hand} className="dca-part-held"><HandDecoration id={appearance.hand} /></g> : undefined}
+          accessory={!compact && appearance.face !== 'none' && !faceplate ? <g data-accessory={appearance.face}><FaceDecoration id={appearance.face} /></g> : undefined}
+          faceplate={faceplate} back={back} front={front} surface={overlay} paint={paint} />
       </g></g>
     </svg>
   </span>

package/src/BackDecorations.tsx

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+import type { BackId } from './items.js'
+import { Glow } from './DecorationShapes.js'
+
+function Wing({ outer, inner, fill, lining, outline = '#fff', flap = 'dca-fx-flap', children }: { outer: string; inner?: string; fill: string; lining?: string; outline?: string; flap?: string; children?: ReactNode }) {
+  return <g className={flap} style={{ transformOrigin: '272px 560px' }}>
+    <path d={outer} fill={fill} stroke={outline} strokeWidth="18" strokeLinejoin="round" paintOrder="stroke fill" />
+    {inner && <path d={inner} fill={lining} />}
+    {children}
+  </g>
+}
+function Wings(props: Parameters<typeof Wing>[0]) {
+  return <><Wing {...props} /><g transform="matrix(-1 0 0 1 1024 0)"><Wing {...props} /></g></>
+}
+const batWing = {
+  outer: 'M272 520C200 470 120 400 60 340c30 80 10 130-20 160 70 20 90 60 60 100 70 10 100 50 90 100h82Z',
+  inner: 'M262 540c-60-40-120-96-166-146 20 60 6 100-16 128 56 16 76 50 56 84 56 10 82 44 74 88h52Z',
+}
+const butterflyWing = {
+  outer: 'M272 540C190 380 60 340 20 420c-14 56 50 96 110 120-80 12-120 70-80 130 56 56 160 26 232-40Z',
+  inner: 'M262 560c-70-120-170-150-196-90-8 40 44 70 96 90-60 14-90 60-60 100 46 40 130 14 180-44Z',
+}
+const angelWing = {
+  outer: 'M272 520C180 440 80 420 40 470c20 50 70 70 120 80-60 20-90 60-70 100 50 20 110 0 160-40-30 40-30 80 0 100 40-10 80-60 100-120Z',
+  inner: 'M262 540C190 480 110 462 78 492c16 36 56 52 96 60-46 16-70 46-56 76 40 14 90-4 130-36-20 30-16 58 8 70 30-10 58-46 72-92Z',
+}
+const dragonWing = {
+  outer: 'M272 500C160 380 60 300 20 340c0 60 60 100 100 130-60 30-100 90-80 150 60 10 130-20 190-70-40 60-40 120 0 150 60-20 100-90 110-160Z',
+  inner: 'M262 530C170 430 90 370 60 396c4 44 50 76 84 100-50 24-84 74-70 122 50 4 110-24 160-66-30 48-30 96 0 122 44-18 78-76 86-134Z',
+}
+
+function SunRays() {
+  const rays = Array.from({ length: 12 }, (_, index) => {
+    const a = (index * 30 * Math.PI) / 180, w = (9 * Math.PI) / 180
+    const p = (r: number, t: number) => `${(512 + r * Math.cos(t)).toFixed(0)} ${(640 + r * Math.sin(t)).toFixed(0)}`
+    return <path key={index} d={`M${p(300, a - w)} L${p(560, a)} L${p(300, a + w)}Z`} fill={index % 2 ? '#ffcf11' : '#f6b500'} stroke="#fff" strokeWidth="14" strokeLinejoin="round" paintOrder="stroke fill" />
+  })
+  return <g className="dca-fx-rotate" style={{ transformOrigin: '512px 640px' }}>{rays}</g>
+}
+const balloon = (cx: number, cy: number, fill: string, delay?: string) => <g className="dca-fx-hover" style={{ transformOrigin: `${cx}px ${cy}px`, animationDelay: delay }}>
+  <path d={`M${cx} ${cy + 52}L${cx - 8} ${cy + 66}h16Z`} fill={fill} />
+  <ellipse cx={cx} cy={cy} rx="46" ry="54" fill={fill} stroke="#fff" strokeWidth="14" paintOrder="stroke fill" />
+  <ellipse cx={cx - 14} cy={cy - 18} rx="10" ry="16" fill="#fff" opacity=".6" />
+</g>
+
+const orbit = { transform: 'translate(512 760) rotate(-12)', rx: 450, ry: 104 }
+const orbitBodies: { key: string; delay?: string; art: ReactNode }[] = [
+  { key: 'a', art: <><ellipse rx="64" ry="18" fill="none" stroke="#fff" strokeWidth="22" transform="rotate(-18)" /><ellipse rx="64" ry="18" fill="none" stroke="#ffe08a" strokeWidth="9" transform="rotate(-18)" /><circle r="44" fill="#fff" /><circle r="34" fill="#f6b500" /><path d="M-64 0a64 18 0 0 0 128 0" fill="none" stroke="#ffe08a" strokeWidth="9" transform="rotate(-18)" /></> },
+  { key: 'b', delay: '-2.67s', art: <><circle r="34" fill="#fff" /><circle r="25" fill="#c9d2ff" /></> },
+  { key: 'c', delay: '-5.33s', art: <><circle r="26" fill="#fff" /><circle r="17" fill="#ff9ad9" /></> },
+]
+function OrbitBodies({ side }: { side: 'front' | 'back' }) {
+  return <>{orbitBodies.map(body => <g key={body.key} className={`dca-fx dca-fx-orbit dca-fx-orbit-${side} dca-fx-orbit-${body.key}`} style={body.delay ? { animationDelay: body.delay } : undefined}>{body.art}</g>)}</>
+}
+function OrbitArc({ side }: { side: 'front' | 'back' }) {
+  const sweep = side === 'back' ? 1 : 0
+  const outer = `M${-orbit.rx} 0A${orbit.rx} ${orbit.ry} 0 0 ${sweep} ${orbit.rx} 0`
+  return <>
+    <path d={outer} fill="none" stroke="#fff" strokeWidth="46" />
+    <path d={outer} fill="none" stroke="#b9c4ff" strokeWidth="30" />
+  </>
+}
+
+const halo = { cx: 512, cy: 229, r: 168 }
+
+export function BackDecoration({ id }: { id: BackId }) {
+  switch (id) {
+    case 'cape': return <g className="dca-fx-sway" style={{ transformOrigin: '512px 452px' }}>
+      <path d="M262 452C190 600 130 780 104 930c80-26 160-26 240 0 56-20 112-30 168-30s112 10 168 30c80-26 160-26 240 0-26-150-86-330-158-478Z" fill="#b23a48" stroke="#fff" strokeWidth="18" strokeLinejoin="round" paintOrder="stroke fill" />
+      <path d="M296 470C236 600 190 760 176 896c56-16 108-22 168-16 56-14 112-22 168-22s112 8 168 22c60-6 112 0 168 16-14-136-60-296-120-426Z" fill="#d65a68" />
+    </g>
+    case 'jetpack': return <>
+      <g className="dca-fx dca-fx-flame" style={{ transformOrigin: '159px 800px' }}>
+        <path d="M159 892c-26-30-34-56-26-90h52c8 34 0 60-26 90Z" fill="#ffb347" />
+        <path d="M159 866c-12-18-16-34-10-52h20c6 18 2 34-10 52Z" fill="#ffe08a" />
+      </g>
+      <g className="dca-fx dca-fx-flame" style={{ transformOrigin: '865px 800px', animationDelay: '.35s' }}>
+        <path d="M865 892c-26-30-34-56-26-90h52c8 34 0 60-26 90Z" fill="#ffb347" />
+        <path d="M865 866c-12-18-16-34-10-52h20c6 18 2 34-10 52Z" fill="#ffe08a" />
+      </g>
+      <rect x="118" y="486" width="82" height="290" rx="40" fill="#8b95a5" stroke="#fff" strokeWidth="18" paintOrder="stroke fill" />
+      <rect x="824" y="486" width="82" height="290" rx="40" fill="#8b95a5" stroke="#fff" strokeWidth="18" paintOrder="stroke fill" />
+      <rect x="126" y="486" width="66" height="44" rx="20" fill="#e8654f" />
+      <rect x="832" y="486" width="66" height="44" rx="20" fill="#e8654f" />
+      <path d="M134 776h50l10 30h-70Z" fill="#3c4658" stroke="#fff" strokeWidth="12" strokeLinejoin="round" paintOrder="stroke fill" />
+      <path d="M840 776h50l10 30h-70Z" fill="#3c4658" stroke="#fff" strokeWidth="12" strokeLinejoin="round" paintOrder="stroke fill" />
+    </>
+    case 'bat-wings': return <Wings {...batWing} fill="#5b3a8c" lining="#3d2563" />
+    case 'butterfly-wings': return <Wings {...butterflyWing} fill="#f2a0b4" lining="#fff3c4" />
+    case 'angel-wings': return <>
+      <Glow blur={22} className="dca-fx-pulse"><path d={angelWing.outer} fill="#fff7dc" opacity=".6" /><path d={angelWing.outer} fill="#fff7dc" opacity=".6" transform="matrix(-1 0 0 1 1024 0)" /></Glow>
+      <Wings {...angelWing} fill="#fff" lining="#dfe4ff" outline="#b9c4ff" flap="dca-fx-flap-slow" />
+    </>
+    case 'dragon-wings': return <Wings {...dragonWing} fill="#b23a48" lining="#7f2634">
+      <g className="dca-fx dca-fx-pulse" fill="#ffb347"><circle cx="30" cy="350" r="14" /><circle cx="48" cy="618" r="12" /><circle cx="236" cy="704" r="12" /></g>
+    </Wings>
+    case 'crescent-moon': return <>
+      <path d="M330 130a190 190 0 1 0 176 254a150 150 0 0 1-176-254Z" fill="#f6d365" stroke="#fff" strokeWidth="18" strokeLinejoin="round" paintOrder="stroke fill" />
+      <path className="dca-fx dca-fx-sparkle-solo" d="M720 150l12 30 30 12-30 12-12 30-12-30-30-12 30-12Z" fill="#fff3c4" stroke="#fff" strokeWidth="10" strokeLinejoin="round" paintOrder="stroke fill" />
+    </>
+    case 'star-trail': return <g className="dca-fx-sparkle" fill="#f6b500" stroke="#fff" strokeWidth="14" strokeLinejoin="round" paintOrder="stroke fill">
+      <path d="M130 330l20 48 48 20-48 20-20 48-20-48-48-20 48-20Z" />
+      <path d="M900 250l16 38 38 16-38 16-16 38-16-38-38-16 38-16Z" style={{ animationDelay: '.6s' }} />
+      <path d="M920 690l12 30 30 12-30 12-12 30-12-30-30-12 30-12Z" style={{ animationDelay: '1.1s' }} />
+    </g>
+    case 'balloons': return <>
+      <path d="M150 384 262 560M206 306 262 560M112 484 262 560" stroke="#fff" strokeWidth="16" strokeLinecap="round" /><path d="M150 384 262 560M206 306 262 560M112 484 262 560" stroke="#8b95a5" strokeWidth="6" strokeLinecap="round" />
+      {balloon(150, 330, '#e8654f')}{balloon(206, 250, '#f6b500', '.5s')}{balloon(112, 430, '#4f7cf6', '1s')}
+    </>
+    case 'sun-rays': return <SunRays />
+    case 'halo': return <>
+      <Glow blur={24} className="dca-fx-pulse"><circle cx={halo.cx} cy={halo.cy} r={halo.r} fill="none" stroke="#ffe08a" strokeWidth="74" opacity=".65" /></Glow>
+      <circle cx={halo.cx} cy={halo.cy} r={halo.r} fill="none" stroke="#fff" strokeWidth="54" />
+      <circle cx={halo.cx} cy={halo.cy} r={halo.r} fill="none" stroke="#f6b500" strokeWidth="34" />
+    </>
+    case 'orbit-ring': return <g transform={orbit.transform}>
+      <Glow blur={22} className="dca-fx-pulse"><ellipse rx={orbit.rx} ry={orbit.ry} fill="none" stroke="#b9c4ff" strokeWidth="60" opacity=".55" /></Glow>
+      <OrbitArc side="back" />
+      <OrbitBodies side="back" />
+    </g>
+    default: return null
+  }
+}
+
+export function BackFrontDecoration({ id }: { id: BackId }) {
+  switch (id) {
+    case 'orbit-ring': return <g data-back-front={id} transform={orbit.transform}>
+      <OrbitArc side="front" />
+      <OrbitBodies side="front" />
+    </g>
+    default: return null
+  }
+}
+export function hasFrontPart(id: BackId): boolean { return id === 'orbit-ring' }

package/src/DecorationShapes.tsx

@@ -1,8 +1,16 @@
-import type { ReactNode } from 'react'
+import { useId, type ReactNode } from 'react'
 
-export function Silhouette({ d, fill, children }: { d: string; fill: string; children?: ReactNode }) {
-  return <><path d={d} fill={fill} stroke="#fff" strokeWidth="18" strokeLinejoin="round" paintOrder="stroke fill" />{children}</>
+export function Silhouette({ d, fill, stroke = 18, children }: { d: string; fill: string; stroke?: number; children?: ReactNode }) {
+  return <><path d={d} fill={fill} stroke="#fff" strokeWidth={stroke} strokeLinejoin="round" paintOrder="stroke fill" />{children}</>
 }
 export function Detail({ children }: { children: ReactNode }) {
   return <g className="dca-decoration-detail">{children}</g>
 }
+export function Glow({ children, blur = 18, className = '' }: { children: ReactNode; blur?: number; className?: string }) {
+  const id = `dca-fx-blur-${useId().replace(/:/g, '')}`
+  return <>
+    <defs><filter id={id} x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation={blur} /></filter></defs>
+    <g className={`dca-fx dca-fx-glow ${className}`.trim()} filter={`url(#${id})`}>{children}</g>
+  </>
+}
+export function useClipId() { return `dca-clip-${useId().replace(/:/g, '')}` }

package/src/Decorations.tsx

@@ -1,31 +1,56 @@
-import type { PrimaryId, SecondaryId, DecorationId } from './appearanceModel.js'
-import { isHeld } from './appearanceModel.js'
-import { HeldDecoration } from './HeldDecorations.js'
+import { useId } from 'react'
+import type { ItemId, HeadId, SkinId } from './items.js'
+import { itemOf } from './items.js'
 import { HatDecoration } from './HatDecorations.js'
 import { ObjectDecoration } from './ObjectDecorations.js'
+import { FaceDecoration, FaceplateEyes, FaceplatePlate, isFaceplate } from './FaceDecorations.js'
+import { HandDecoration } from './HandDecorations.js'
+import { BackDecoration, BackFrontDecoration } from './BackDecorations.js'
+import { SkinOverlay, SkinPaintSurface, skinPaint } from './SkinDecorations.js'
 import { decorationOf } from './decorationCatalog.js'
 
-export function SecondaryDecoration({ id }: { id: SecondaryId }) {
-  if (isHeld(id)) return <HeldDecoration id={id} />
-  switch (id) {
-    case 'forehead-goggles': return <g strokeLinejoin="round">
-      <path d="M374 419h109v46H374Zm167 0h109v46H541Z" fill="#a2c5d1" stroke="#8b7568" strokeWidth="14" />
-      <path d="M483 442q29 20 58 0" stroke="#8b7568" strokeWidth="11" fill="none" />
-      <path d="m389 429 18 21m149-21 18 21" stroke="#e0eff1" strokeWidth="8" />
-    </g>
-    default: return null
-  }
-}
-export function PrimaryDecoration({ id }: { id: PrimaryId }) {
+export function HeadDecoration({ id }: { id: HeadId }) {
   return <g data-decoration={id}><HatDecoration id={id} /><ObjectDecoration id={id} /></g>
 }
-export function DecoratedTop({ id }: { id: Exclude<PrimaryId, 'none'> }) {
-  return <PrimaryDecoration id={id} />
+
+function SkinSpecimen({ id }: { id: SkinId }) {
+  const uid = useId().replace(/:/g, '')
+  const paint = skinPaint(id)
+  return <g data-skin={id}>
+    <defs>
+      {paint?.render(`dca-swatch-paint-${uid}`)}
+      <clipPath id={`dca-swatch-clip-${uid}`}><rect x="243" y="408" width="538" height="426" rx="113" /></clipPath>
+    </defs>
+    <rect x="243" y="408" width="538" height="426" rx="113" fill={paint ? `url(#dca-swatch-paint-${uid})` : '#4f7cf6'} stroke="#fff" strokeWidth="18" paintOrder="stroke fill" />
+    <g clipPath={`url(#dca-swatch-clip-${uid})`}>{paint ? <SkinPaintSurface id={id} /> : <SkinOverlay id={id} />}</g>
+  </g>
+}
+
+export function SlotDecoration({ id }: { id: ItemId }) {
+  const item = itemOf(id)
+  switch (item.slot) {
+    case 'head': return <HeadDecoration id={item.id} />
+    case 'face': return isFaceplate(item.id)
+      ? <g data-accessory={item.id}><rect x="295" y="464" width="434" height="315" rx="78" fill="#fff" /><FaceplatePlate id={item.id} /><FaceplateEyes id={item.id} /></g>
+      : <g data-accessory={item.id}><FaceDecoration id={item.id} /></g>
+    case 'hand': return <g data-accessory={item.id}><HandDecoration id={item.id} /></g>
+    case 'back': return <g data-back={item.id}><BackDecoration id={item.id} /><BackFrontDecoration id={item.id} /></g>
+    case 'skin': return <SkinSpecimen id={item.id} />
+  }
+}
+
+const swatchViewBox: Record<ReturnType<typeof itemOf>['slot'], string> = {
+  head: '265 105 494 360',
+  face: '300 280 424 324',
+  hand: '40 330 400 400',
+  back: '20 120 984 800',
+  skin: '203 368 618 506',
 }
-export function DecorationSwatch({ id, size = 112 }: { id: DecorationId; size?: number }) {
-  const secondary = decorationOf(id).category === 'Accessories'
-  const forehead = id === 'forehead-goggles'
-  return <svg width={size} height={size} viewBox={secondary ? forehead ? '300 280 424 324' : '65 435 315 360' : '265 105 494 360'} fill="none" role="img" aria-label={`${decorationOf(id).name} specimen`}>
-    {secondary ? <SecondaryDecoration id={id as SecondaryId} /> : <PrimaryDecoration id={id as PrimaryId} />}
+export function DecorationSwatch({ id, size = 112 }: { id: ItemId; size?: number }) {
+  const item = itemOf(id)
+  const viewBox = item.slot === 'face' && isFaceplate(item.id) ? '255 404 514 436' : swatchViewBox[item.slot]
+  return <svg width={size} height={size} viewBox={viewBox} fill="none" role="img" aria-label={`${decorationOf(id).name} specimen`}
+    className="dca-swatch dca-part-robot" data-expression="neutral" data-slot={item.slot} data-effects="static">
+    <SlotDecoration id={id} />
   </svg>
 }