@dotcraft/avatar 0.6.3 → 0.6.4

package/src/palette.ts

@@ -0,0 +1,52 @@
+export interface PaletteEntry {
+  key: string
+  bodyD: string
+  bodyM: string
+  bodyL: string
+  markD: string
+  markL: string
+  shadow: string
+  accent: string
+}
+
+/** Complete paint vocabulary used by the Composer mascot. */
+export interface MascotPaintPalette extends PaletteEntry {
+  /** Middle face-mark stop; profile palettes intentionally reuse `markL`. */
+  markM: string
+}
+
+/** Canonical DotCraft mascot paint when no Agent Profile is selected. */
+export const DEFAULT_MASCOT_PALETTE: MascotPaintPalette = {
+  key: 'default',
+  bodyD: '#2458f7',
+  bodyM: '#5f82f7',
+  bodyL: '#8fa5ff',
+  markD: '#2257f5',
+  markM: '#577df7',
+  markL: '#8ca2ff',
+  shadow: '#0b3d62',
+  accent: '#5f82f7'
+}
+
+/** 12 role palettes. The first five define the built-in Agent Profile roles. */
+export const PALETTE: PaletteEntry[] = [
+  { key: 'blue', bodyD: '#2563eb', bodyM: '#4f7cf6', bodyL: '#8198f5', markD: '#2563eb', markL: '#6f8df5', shadow: '#07307c', accent: '#4f7cf6' },
+  { key: 'indigo', bodyD: '#4f46e5', bodyM: '#6366f1', bodyL: '#8b8ff8', markD: '#3730a3', markL: '#818cf8', shadow: '#1e1b4b', accent: '#6366f1' },
+  { key: 'violet', bodyD: '#6d28d9', bodyM: '#8b5cf6', bodyL: '#a78bfa', markD: '#5b21b6', markL: '#a78bfa', shadow: '#4c1d95', accent: '#8b5cf6' },
+  { key: 'fuchsia', bodyD: '#a21caf', bodyM: '#d946ef', bodyL: '#e9a8f5', markD: '#86198f', markL: '#e879f9', shadow: '#581c87', accent: '#d946ef' },
+  { key: 'pink', bodyD: '#be185d', bodyM: '#ec4899', bodyL: '#f9a8d4', markD: '#9d174d', markL: '#f472b6', shadow: '#831843', accent: '#ec4899' },
+  { key: 'rose', bodyD: '#be123c', bodyM: '#f43f5e', bodyL: '#fda4af', markD: '#9f1239', markL: '#fb7185', shadow: '#881337', accent: '#f43f5e' },
+  { key: 'orange', bodyD: '#c2410c', bodyM: '#f97316', bodyL: '#fdba74', markD: '#9a3412', markL: '#fb923c', shadow: '#7c2d12', accent: '#f97316' },
+  { key: 'amber', bodyD: '#d97706', bodyM: '#eab308', bodyL: '#fbbf24', markD: '#92400e', markL: '#f59e0b', shadow: '#78350f', accent: '#f59e0b' },
+  { key: 'lime', bodyD: '#4d7c0f', bodyM: '#84cc16', bodyL: '#bef264', markD: '#3f6212', markL: '#a3e635', shadow: '#365314', accent: '#84cc16' },
+  { key: 'green', bodyD: '#15803d', bodyM: '#22c55e', bodyL: '#4ade80', markD: '#166534', markL: '#4ade80', shadow: '#14532d', accent: '#22c55e' },
+  { key: 'teal', bodyD: '#0f766e', bodyM: '#14b8a6', bodyL: '#5eead4', markD: '#115e59', markL: '#2dd4bf', shadow: '#134e4a', accent: '#14b8a6' },
+  { key: 'sky', bodyD: '#0284c7', bodyM: '#0ea5e9', bodyL: '#38bdf8', markD: '#0369a1', markL: '#22d3ee', shadow: '#075985', accent: '#0ea5e9' }
+]
+
+
+export function paletteOf(spec: { palette: number }): PaletteEntry { return PALETTE[spec.palette] ?? DEFAULT_MASCOT_PALETTE }
+export function mascotPaletteOf(spec?: { palette: number }): MascotPaintPalette {
+ if (!spec || spec.palette === -1) return DEFAULT_MASCOT_PALETTE
+ const paint = paletteOf(spec); return { ...paint, markM: paint.markL }
+}

package/src/react.ts

@@ -0,0 +1,6 @@
+export { Avatar, AppearanceAvatar, type AvatarProps, type AppearanceAvatarProps } from './Avatar.js'
+export { DecorationSwatch, PrimaryDecoration, SecondaryDecoration } 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/src/rig.css

@@ -0,0 +1,265 @@
+/* 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. */
+.dca-part-eyes,
+.dca-part-glow,
+.dca-part-light,
+.dca-part-face {
+  transform-box: fill-box;
+}
+
+/* The incoming face waits out a ~70ms blank beat so two faces never blend into a
+   double exposure. */
+.dca-part-face {
+  opacity: 0;
+  transition: opacity 110ms ease;
+}
+
+.dca-part-robot[data-expression='neutral'] .dca-part-face-neutral,
+.dca-part-robot[data-expression='happy'] .dca-part-face-happy,
+.dca-part-robot[data-expression='operator'] .dca-part-face-operator,
+.dca-part-robot[data-expression='sleep'] .dca-part-face-sleep {
+  opacity: 1;
+  transition: opacity 150ms ease 70ms;
+}
+
+.dca-part-eyes {
+  transform-origin: center;
+}
+
+.dca-part-glow {
+  opacity: 0;
+  transform-origin: center;
+}
+
+.dca-part-light {
+  transform-origin: center;
+}
+
+/* The default 140ms transition-delay sequences "prop first, arm after" on retract, so
+   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 {
+  transform-box: view-box;
+  transform-origin: 233px 514px;
+  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 140ms;
+}
+
+.dca-part-arm-r-w,
+.dca-part-arm-r-b {
+  transform-box: view-box;
+  transform-origin: 791px 514px;
+  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 140ms;
+}
+
+/* Every keyframe keeps the same function list (translate + rotate + scaleY) so the
+   interpolation stays smooth. translate dy=88 lands the hinge at ≈602 viewBox, the
+   height of the resting arm nub, so the hand lifts from where the arm already is. */
+@keyframes dca-action-wave-arm {
+  0% {
+    transform: translate(0, 0) rotate(0) scaleY(1);
+  }
+  16% {
+    transform: translate(-48px, 88px) rotate(-122deg) scaleY(0.8);
+  }
+  32% {
+    transform: translate(-48px, 88px) rotate(-92deg) scaleY(0.8);
+  }
+  48% {
+    transform: translate(-48px, 88px) rotate(-122deg) scaleY(0.8);
+  }
+  64% {
+    transform: translate(-48px, 88px) rotate(-92deg) scaleY(0.8);
+  }
+  80% {
+    transform: translate(-48px, 88px) rotate(-114deg) scaleY(0.8);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0) scaleY(1);
+  }
+}
+
+@keyframes dca-action-wave-lean {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  80% {
+    transform: rotate(3deg);
+  }
+}
+
+.dca-action-wave .dca-part-arm-r-w,
+.dca-action-wave .dca-part-arm-r-b {
+  animation: dca-action-wave-arm 1.6s ease-in-out both;
+}
+
+.dca-action-wave .dca-action-jelly {
+  animation: dca-action-wave-lean 1.6s ease-in-out both;
+}
+
+/* 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. */
+.dca-part-prop-laptop {
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.dca-action-prop-laptop .dca-part-prop-laptop {
+  opacity: 1;
+  transition: opacity 240ms ease 1200ms;
+}
+
+.dca-action-prop-laptop .dca-part-arm-l-w,
+.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;
+}
+
+.dca-action-prop-laptop .dca-part-arm-r-w,
+.dca-action-prop-laptop .dca-part-arm-r-b {
+  transform: translate(-18px, 0);
+  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 1200ms;
+}
+
+@keyframes dca-action-laptop-scroll {
+  0%,
+  58% {
+    transform: translateY(0);
+  }
+  66%,
+  100% {
+    transform: translateY(-36px);
+  }
+}
+
+.dca-action-prop-laptop .dca-part-laptop-lines {
+  animation: dca-action-laptop-scroll 2200ms ease-in-out 1640ms infinite;
+}
+
+@keyframes dca-action-laptop-caret {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.dca-action-prop-laptop .dca-part-laptop-caret {
+  animation: dca-action-laptop-caret 800ms steps(1, end) infinite;
+}
+
+/* The sign fades in only after the arm settles (320ms spring plus a beat), and on
+   retract it hides first while the arm waits out its 140ms transition-delay, so the
+   prop is never left floating without a hand. */
+.dca-action-hold-sign .dca-part-arm-r-w,
+.dca-action-hold-sign .dca-part-arm-r-b {
+  transform: translate(-48px, 88px) rotate(-128deg) scaleY(0.8);
+  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;
+}
+
+.dca-action-hold-sign .dca-part-prop-sign {
+  opacity: 1;
+  transition: opacity 180ms ease 340ms;
+}
+
+/* Click greeting while the sign is held: only the angle moves, and it starts and ends
+   exactly at the held pose so the hand-off to .dca-action-hold-sign is seamless.
+   The compound selector outranks the lone .dca-action-wave arm rule. */
+@keyframes dca-action-sign-wave-arm {
+  0% {
+    transform: translate(-48px, 88px) rotate(-128deg) scaleY(0.8);
+  }
+  18% {
+    transform: translate(-48px, 88px) rotate(-143deg) scaleY(0.8);
+  }
+  42% {
+    transform: translate(-48px, 88px) rotate(-113deg) scaleY(0.8);
+  }
+  66% {
+    transform: translate(-48px, 88px) rotate(-143deg) scaleY(0.8);
+  }
+  86% {
+    transform: translate(-48px, 88px) rotate(-120deg) scaleY(0.8);
+  }
+  100% {
+    transform: translate(-48px, 88px) rotate(-128deg) scaleY(0.8);
+  }
+}
+
+/* Pure rotation about the hand's pivot: the shoulder hinge (791,514) shifted by the
+   held translate (-48,88), i.e. C = (743,602), by exactly the arm's angular deviation
+   from -128° at each step. Same centre and delta keeps the board gripped. */
+@keyframes dca-action-sign-wave-prop {
+  0% {
+    transform: rotate(0deg);
+  }
+  18% {
+    transform: rotate(-15deg);
+  }
+  42% {
+    transform: rotate(15deg);
+  }
+  66% {
+    transform: rotate(-15deg);
+  }
+  86% {
+    transform: rotate(8deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.dca-action-hold-sign.dca-action-wave .dca-part-arm-r-w,
+.dca-action-hold-sign.dca-action-wave .dca-part-arm-r-b {
+  animation: dca-action-sign-wave-arm 1.6s ease-in-out;
+}
+
+.dca-action-hold-sign.dca-action-wave .dca-part-prop-sign {
+  transform-box: view-box;
+  transform-origin: 743px 602px;
+  animation: dca-action-sign-wave-prop 1.6s ease-in-out;
+}
+
+/* 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 {
+  transform: translate(48px, 88px) rotate(135deg) scaleY(0.82);
+  transition-delay: 0ms;
+}
+
+.dca-action-celebrate .dca-part-arm-r-w,
+.dca-action-celebrate .dca-part-arm-r-b {
+  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/src/styles.css

@@ -0,0 +1,13 @@
+@import './rig.css';
+@import './avatar.css';
+@import './accessories.css';
+
+@import "./composer/styles/foundation.css";
+@import "./composer/styles/overdrive.css";
+@import "./composer/styles/idle.css";
+@import "./composer/styles/focus.css";
+@import "./composer/styles/expressions.css";
+@import "./composer/styles/feedback.css";
+@import "./composer/styles/props.css";
+
+@import "./composer/styles/energy.css";

package/src/useEventReplay.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef, type RefObject } from 'react'
+
+const eventAnimations = new Set(['dca-celebrate', 'dca-nod', 'dca-action-wave-arm', 'dca-action-wave-lean'])
+export function useEventReplay(ref: RefObject<Element | null>, sequence: number, enabled: boolean, paused: boolean) {
+  const previous = useRef(sequence)
+  useEffect(() => {
+    if (!enabled || paused || previous.current === sequence) return
+    previous.current = sequence
+    ref.current?.getAnimations?.({ subtree: true }).forEach(animation => {
+      if (eventAnimations.has((animation as CSSAnimation).animationName)) animation.currentTime = 0
+    })
+  }, [ref, sequence, enabled, paused])
+}

package/src/useGesture.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef, type RefObject } from 'react'
+import type { AvatarGesture } from './characters.js'
+
+const durations = { blink: 520, 'look-left': 1100, 'look-right': 1100, 'antenna-bob': 720 }
+function curve(points: readonly (readonly [number, number])[], progress: number) {
+  const next = points.findIndex(([at]) => at >= progress)
+  if (next <= 0) return points[Math.max(0, next)][1]
+  const [from, a] = points[next - 1], [to, b] = points[next]
+  const t = (progress - from) / (to - from)
+  return a + (b - a) * t * t * (3 - 2 * t)
+}
+export function useGesture(ref: RefObject<Element | null>, gesture: AvatarGesture | undefined, sequence: number,
+  enabled: boolean, paused: boolean, onComplete?: (sequence: number) => void) {
+  const clock = useRef(0)
+  const complete = useRef(onComplete)
+  const delivered = useRef(false)
+  complete.current = onComplete
+  function paint(elapsed: number) {
+    const root = ref.current
+    if (!root) return
+    const duration = gesture ? durations[gesture] : 1
+    const t = Math.min(1, elapsed / duration)
+    const active = enabled && !!gesture && t < 1
+    const eye = active && gesture === 'blink' && elapsed < 180 ? curve([[0,1],[.35,.08],[.62,.08],[1,1]], elapsed / 180) : 1
+    root.querySelectorAll<SVGElement>('.dca-part-eyes').forEach(e => { e.style.transform = `scaleY(${eye})` })
+    root.querySelectorAll<SVGElement>('.dca-part-caret').forEach(e => { e.style.opacity = active && gesture === 'blink' && Math.floor(elapsed / 130) % 2 ? '0' : '' })
+    const hold = t > .22 && t < .78 ? 1 : t >= .78 ? Math.sin(Math.PI / 2 * (1 - t) / .22) : Math.sin(Math.PI / 2 * t / .22)
+    const x = active && gesture?.startsWith('look-') ? (gesture === 'look-left' ? -34 : 34) * hold : 0
+    root.querySelector('.dca-face-motion')?.setAttribute('transform', `translate(${x} 0)`)
+    const bob = active && gesture === 'antenna-bob' ? curve([[0,0],[.3,-52],[.55,12],[.75,-16],[1,0]],t) : 0
+    root.querySelectorAll<SVGElement>('.dca-part-antenna-w,.dca-part-glow,.dca-part-light').forEach(e => { e.style.transform = `translateY(${bob}px)` })
+  }
+  useEffect(() => { clock.current = 0; delivered.current = false; paint(0) }, [gesture, sequence, enabled])
+  useEffect(() => {
+    if (!gesture || delivered.current) return
+    const finish = () => { delivered.current = true; complete.current?.(sequence) }
+    if (!enabled) { paint(durations[gesture]); finish(); return }
+    if (paused) return
+    let last: number | undefined
+    let frame = 0
+    const tick = (now: number) => {
+      clock.current += last === undefined ? 0 : now - last
+      last = now
+      paint(clock.current)
+      if (clock.current < durations[gesture]) frame = requestAnimationFrame(tick)
+      else finish()
+    }
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [gesture, sequence, enabled, paused])
+}