@dotcraft/avatar 0.7.1 → 0.7.3

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/rig.css

@@ -1,6 +1,5 @@
-/* The robot's arm/antenna/face pieces carry stable dca-part-* classes (see
-   MascotRig.tsx). Each arm's white and blue pieces are separate elements moving in
-   lockstep, so transform-box: view-box resolves one shared origin for both. */
+/* Arm outlines, material clips and held props move in lockstep.
+   transform-box: view-box resolves the same pivot for each layer. */
 .dca-part-eyes,
 .dca-part-glow,
 .dca-part-light,
@@ -40,6 +39,7 @@
    a prop is never left floating. Every rule that ENTERS a posed arm state overrides
    the delay back to 0 so raises stay immediate. */
 .dca-part-arm-l-w,
+.dca-part-arm-l-b,
 .dca-part-arm-l {
   transform-box: view-box;
   transform-origin: 233px 514px;
@@ -103,9 +103,7 @@
 /* Props are always-mounted `dca-part-prop-*` groups inside MascotRobot at opacity 0,
    revealed by these composer root classes. */
 
-/* Mini terminal: the 1200ms transition delay keeps quick turns from flashing it. The
-   arms only tuck inward by pure translate — a rotation would trigger the solid-colour
-   swap and break the gradient's continuity with the torso. */
+/* The 1200ms delay keeps quick turns from flashing the mini terminal. */
 .dca-part-prop-laptop {
   opacity: 0;
   transition: opacity 200ms ease;
@@ -117,6 +115,7 @@
 }
 
 .dca-action-prop-laptop .dca-part-arm-l-w,
+.dca-action-prop-laptop .dca-part-arm-l-b,
 .dca-action-prop-laptop .dca-part-arm-l {
   transform: translate(18px, 0);
   transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 1200ms;
@@ -166,10 +165,6 @@
   transition-delay: 0ms;
 }
 
-.dca-action-hold-sign .dca-part-arm-r-b {
-  fill: var(--dca-part-raised-arm-right, #7a96fb);
-}
-
 .dca-part-prop-sign {
   opacity: 0;
   transition: opacity 140ms ease;
@@ -242,6 +237,7 @@
 /* The cheer reuses the wave's slide-then-rotate hinge grammar, so the outline wraps
    the band and the colour stays seam-continuous. */
 .dca-action-celebrate .dca-part-arm-l-w,
+.dca-action-celebrate .dca-part-arm-l-b,
 .dca-action-celebrate .dca-part-arm-l {
   transform: translate(48px, 88px) rotate(135deg) scaleY(0.82);
   transition-delay: 0ms;
@@ -252,14 +248,3 @@
   transform: translate(-48px, 88px) rotate(-135deg) scaleY(0.82);
   transition-delay: 0ms;
 }
-
-/* Raised arms swap the body gradient for a solid hinge colour, so a rotated arm has
-   no gradient to diverge from the torso's field. White halo capsules stay white. */
-.dca-action-wave .dca-part-arm-r-b,
-.dca-action-celebrate .dca-part-arm-r-b {
-  fill: var(--dca-part-raised-arm-right, #7a96fb);
-}
-
-.dca-action-celebrate .dca-part-arm-l-b {
-  fill: var(--dca-part-raised-arm-left, #3161f7);
-}

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.1",
+  "version": "0.7.3",
   "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>
 }