@dotcraft/avatar 0.6.3 → 0.6.5

package/src/composer/constants.ts

@@ -0,0 +1,89 @@
+export const MASCOT_SIZE = 58
+export const MASCOT_SCALE = 0.75
+export const MASCOT_HIDDEN_RATIO = 0.06
+export const MASCOT_RAISE = 3
+export const MASCOT_SLEEP_AFTER_MS = 90_000
+export const MASCOT_WAVE_DURATION_MS = 1_600
+export const MASCOT_ACTIVE_IDLE_MIN_MS = 35_000
+export const MASCOT_ACTIVE_IDLE_JITTER_MS = 30_000
+export const MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS = 500
+
+export type MascotActiveIdleMotion = 'hop' | 'rocket' | 'hover'
+export type MascotActiveIdlePhase = 'outbound' | 'away' | 'inbound'
+export type MascotIdleDirection = 'left' | 'right'
+export const MASCOT_ACTIVE_IDLE_MOTIONS: readonly MascotActiveIdleMotion[] = ['hop', 'rocket', 'hover']
+
+export interface MascotActiveIdleState {
+  motion: MascotActiveIdleMotion
+  phase: MascotActiveIdlePhase
+}
+
+export interface MascotActiveIdle extends MascotActiveIdleState {
+  /** Where the trip heads; the inbound leg travels the other way. */
+  direction: MascotIdleDirection
+  travel: MascotIdleDirection
+}
+
+export interface MascotActiveIdlePlan {
+  direction?: MascotIdleDirection
+  motions?: readonly MascotActiveIdleMotion[]
+}
+
+export interface MascotProfileTransition {
+  fromAccent: string
+  toAccent: string
+}
+
+export const MASCOT_PROFILE_TRANSITION_SWAP_MS = 620
+export const MASCOT_PROFILE_TRANSITION_DURATION_MS = 1240
+
+export const MASCOT_ACTIVE_IDLE_TRAVEL_MS: Record<MascotActiveIdleMotion, number> = {
+  hop: 2400,
+  rocket: 1800,
+  hover: 1800
+}
+
+export const MASCOT_ACTIVE_IDLE_HOLD_MS: Record<MascotActiveIdleMotion, number> = {
+  hop: 1400,
+  rocket: 1400,
+  hover: 2800
+}
+
+export function pickMascotActiveIdle(
+  random: number,
+  previous: MascotActiveIdleMotion | null,
+  allowed: readonly MascotActiveIdleMotion[] = MASCOT_ACTIVE_IDLE_MOTIONS
+): MascotActiveIdleMotion {
+  const preferred: MascotActiveIdleMotion = random < 0.65 ? 'hop' : random < 0.9 ? 'rocket' : 'hover'
+  const selected = allowed.includes(preferred)
+    ? preferred
+    : MASCOT_ACTIVE_IDLE_MOTIONS.find((motion) => allowed.includes(motion)) ?? preferred
+  if (selected !== previous || allowed.length < 2) return selected
+  const alternate: MascotActiveIdleMotion = selected === 'hop' ? 'rocket' : selected === 'rocket' ? 'hop' : 'rocket'
+  return allowed.includes(alternate) ? alternate : allowed.find((motion) => motion !== selected) ?? selected
+}
+
+export const MASCOT_SPARKLES = Array.from({ length: 7 }, (_, i) => {
+  const angle = ((-150 + i * 40) * Math.PI) / 180
+  const radius = 26 + (i % 3) * 9
+  return {
+    dx: `${(Math.cos(angle) * radius).toFixed(1)}px`,
+    dy: `${(Math.sin(angle) * radius - 8).toFixed(1)}px`,
+    delay: `${i * 40}ms`
+  }
+})
+
+export function prefersReducedMotion(): boolean {
+  const configuredPreference =
+    typeof document !== 'undefined' ? document.documentElement.dataset.reduceMotion : undefined
+  if (configuredPreference === 'on') return true
+  if (configuredPreference === 'off') return false
+
+  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-reduced-motion: reduce)')?.matches ?? false
+    : false
+}
+
+export function mascotNameKey(name?: string): string {
+  return name?.trim().normalize('NFC') ?? ''
+}

package/src/composer/mascotHandoff.ts

@@ -0,0 +1,19 @@
+interface MascotHandoffRecord {
+  top: number
+  time: number
+}
+
+let record: MascotHandoffRecord | null = null
+
+export function recordMascotHandoff(el: HTMLElement): void {
+  record = { top: el.getBoundingClientRect().top, time: performance.now() }
+}
+
+export function consumeMascotHandoff(el: HTMLElement): number | null {
+  if (!record) return null
+  const { top, time } = record
+  record = null
+  if (performance.now() - time > 400) return null
+  const dy = top - el.getBoundingClientRect().top
+  return Math.abs(dy) < 8 ? null : dy
+}

package/src/composer/styles/energy.css

@@ -0,0 +1,99 @@
+[data-mascot-effort] .dca-robot :is(.dca-paint-body, .dca-paint-mark) stop {
+  transition: stop-color 360ms ease;
+}
+
+[data-mascot-effort='medium'] .dca-robot .dca-paint-body stop:nth-child(1) {
+  animation: composer-mascot-energy-medium-dark 6s ease-in-out infinite;
+}
+
+[data-mascot-effort='medium'] .dca-robot .dca-paint-body stop:nth-child(2) {
+  animation: composer-mascot-energy-medium-mid 6s ease-in-out infinite;
+}
+
+[data-mascot-effort='medium'] .dca-robot .dca-paint-body stop:nth-child(3) {
+  animation: composer-mascot-energy-medium-light 6s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot .dca-paint-body stop:nth-child(1) {
+  animation: composer-mascot-energy-high-dark 3.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot .dca-paint-body stop:nth-child(2) {
+  animation: composer-mascot-energy-high-mid 3.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot .dca-paint-body stop:nth-child(3) {
+  animation: composer-mascot-energy-high-light 3.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot .dca-paint-mark stop:nth-child(1) {
+  animation: composer-mascot-energy-high-mark-dark 3.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot .dca-paint-mark stop:nth-child(2),
+[data-mascot-effort='high'] .dca-robot .dca-paint-mark stop:nth-child(3) {
+  animation: composer-mascot-energy-high-mark-light 3.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='high'] .dca-robot {
+  filter: drop-shadow(0 0 5px color-mix(in srgb,
+    oklch(from var(--mascot-energy-accent)
+      clamp(0.28, calc(l - 0.0112), 0.96)
+      clamp(0, calc(c * 1.116), 0.3)
+      calc(h - 3.09)) 28%, transparent));
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-body stop:nth-child(1) {
+  animation: composer-mascot-energy-extra-dark 2.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-body stop:nth-child(2) {
+  animation: composer-mascot-energy-extra-mid 2.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-body stop:nth-child(3) {
+  animation: composer-mascot-energy-extra-light 2.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-mark stop:nth-child(1) {
+  animation: composer-mascot-energy-extra-mark-dark 2.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-mark stop:nth-child(2),
+[data-mascot-effort='extraHigh'] .dca-robot .dca-paint-mark stop:nth-child(3) {
+  animation: composer-mascot-energy-extra-mark-light 2.8s ease-in-out infinite;
+}
+
+[data-mascot-effort='extraHigh'] .dca-robot {
+  filter: drop-shadow(0 0 7px color-mix(in srgb,
+    oklch(from var(--mascot-energy-accent)
+      clamp(0.28, calc(l - 0.0456), 0.96)
+      clamp(0, calc(c * 1.231), 0.3)
+      calc(h + 27.55)) 36%, transparent));
+}
+
+[data-mascot-context='max'] .dca-robot {
+  animation: composer-mascot-max-overdrive-edge 3.8s ease-in-out infinite;
+  will-change: filter;
+}
+
+[data-mascot-context='max'] .dca-robot .dca-paint-body stop:nth-child(1) {
+  animation: composer-mascot-max-coat-dark 3.8s ease-in-out infinite;
+}
+
+[data-mascot-context='max'] .dca-robot .dca-paint-body stop:nth-child(2) {
+  animation: composer-mascot-max-coat-mid 3.8s ease-in-out infinite;
+}
+
+[data-mascot-context='max'] .dca-robot .dca-paint-body stop:nth-child(3) {
+  animation: composer-mascot-max-coat-light 3.8s ease-in-out infinite;
+}
+
+[data-mascot-context='max'] .dca-robot .dca-paint-mark stop:nth-child(1) {
+  animation: composer-mascot-max-coat-mark-dark 3.8s ease-in-out infinite;
+}
+
+[data-mascot-context='max'] .dca-robot .dca-paint-mark stop:nth-child(2),
+[data-mascot-context='max'] .dca-robot .dca-paint-mark stop:nth-child(3) {
+  animation: composer-mascot-max-coat-mark-light 3.8s ease-in-out infinite;
+}

package/src/composer/styles/expressions.css

@@ -0,0 +1,20 @@
+@keyframes composer-mascot-nod {
+  0%, 100% { transform: translateY(0); }
+  40% { transform: translateY(2.5px) scale(1.015, 0.985); }
+}
+
+.composer-mascot-nod {
+  animation: composer-mascot-nod 140ms ease-out;
+  transform-origin: bottom center;
+}
+
+@keyframes composer-mascot-think-sway {
+  0%, 100% { transform: rotate(-2.2deg); }
+  50% { transform: rotate(2.2deg); }
+}
+
+.composer-mascot-think {
+  animation: composer-mascot-think-sway 2.6s ease-in-out infinite;
+  transform-origin: bottom center;
+  will-change: transform;
+}

package/src/composer/styles/feedback.css

@@ -0,0 +1,188 @@
+@keyframes composer-mascot-cheer {
+  0% {
+    transform: translateY(0) scale(1, 1);
+  }
+  12% {
+    transform: translateY(2px) scale(1.08, 0.9);
+  }
+  30% {
+    transform: translateY(-13px) scale(0.96, 1.06);
+  }
+  46% {
+    transform: translateY(0) scale(1.05, 0.94);
+  }
+  60% {
+    transform: translateY(-8px) scale(0.98, 1.03);
+  }
+  74% {
+    transform: translateY(0) scale(1.02, 0.98);
+  }
+  100% {
+    transform: translateY(0) scale(1, 1);
+  }
+}
+
+.composer-mascot-cheer {
+  animation: composer-mascot-cheer 1s ease-out;
+  transform-origin: bottom center;
+}
+
+.composer-mascot-sparkles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.composer-mascot-sparkles i {
+  position: absolute;
+  left: 50%;
+  top: 6%;
+  width: 7px;
+  height: 7px;
+  background: var(--dca-theme-success);
+  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
+  animation: composer-mascot-sparkle 900ms ease-out forwards;
+}
+
+@keyframes composer-mascot-sparkle {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) scale(0.4) rotate(0);
+  }
+  18% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--dx), var(--dy)) scale(1) rotate(160deg);
+  }
+}
+
+@keyframes composer-mascot-shake {
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+  18% {
+    transform: translateX(-5px) rotate(-2.4deg);
+  }
+  38% {
+    transform: translateX(5px) rotate(2.4deg);
+  }
+  58% {
+    transform: translateX(-4px) rotate(-1.8deg);
+  }
+  78% {
+    transform: translateX(3px) rotate(1.2deg);
+  }
+}
+
+.composer-mascot-shake {
+  animation: composer-mascot-shake 520ms ease-in-out;
+  transform-origin: bottom center;
+}
+
+@keyframes composer-mascot-eager-hop {
+  0%,
+  100% {
+    transform: translateY(0) scale(1, 1);
+  }
+  50% {
+    transform: translateY(-4px) scale(0.99, 1.02);
+  }
+}
+
+.composer-mascot-eager {
+  animation: composer-mascot-eager-hop 460ms ease-in-out infinite;
+  transform-origin: bottom center;
+}
+
+@keyframes composer-mascot-sleep-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05, 1.06);
+  }
+}
+
+.composer-mascot-sleep-breathe {
+  animation: composer-mascot-sleep-breathe 5.6s ease-in-out infinite;
+  transform-origin: bottom center;
+}
+
+.composer-mascot-zzz {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.composer-mascot-zzz span {
+  position: absolute;
+  right: -2px;
+  top: 2px;
+  font-family: Georgia, serif;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--dca-theme-dimmed);
+  opacity: 0;
+  animation: composer-mascot-zzz 2.8s ease-out infinite;
+}
+
+.composer-mascot-zzz span:nth-child(2) {
+  animation-delay: 0.9s;
+  right: 2px;
+}
+
+.composer-mascot-zzz span:nth-child(3) {
+  animation-delay: 1.8s;
+  right: 6px;
+}
+
+@keyframes composer-mascot-zzz {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) scale(0.7);
+  }
+  25% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(13px, -26px) scale(1.15);
+  }
+}
+
+@keyframes composer-mascot-startle {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  30% {
+    transform: translateY(-7px) scale(1.1, 0.96);
+  }
+  60% {
+    transform: translateY(0) scale(0.97, 1.03);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+.composer-mascot-startle {
+  animation: composer-mascot-startle 320ms ease-out;
+  transform-origin: bottom center;
+}
+
+@keyframes composer-mascot-push-lift {
+  0% { transform: translateY(0) scale(1); }
+  38% { transform: translateY(-7px) scale(0.98, 1.035); }
+  72% { transform: translateY(1px) scale(1.025, 0.975); }
+  88% { transform: translateY(-1px) scale(0.995, 1.01); }
+  100% { transform: translateY(0) scale(1); }
+}
+
+.composer-mascot-push-lift {
+  animation: composer-mascot-push-lift 360ms cubic-bezier(0.22, 0.72, 0.24, 1);
+  transform-origin: bottom center;
+}

package/src/composer/styles/focus.css

@@ -0,0 +1,72 @@
+@keyframes composer-mascot-launch {
+  0% {
+    transform: translateY(0) scale(1, 1);
+  }
+  14% {
+    transform: translateY(3px) scale(1.14, 0.8);
+  }
+  38% {
+    transform: translateY(-20px) scale(0.9, 1.14);
+  }
+  58% {
+    transform: translateY(0) scale(1.1, 0.88);
+  }
+  74% {
+    transform: translateY(-6px) scale(0.98, 1.04);
+  }
+  88% {
+    transform: translateY(0) scale(1.02, 0.98);
+  }
+  100% {
+    transform: translateY(0) scale(1, 1);
+  }
+}
+
+.composer-mascot-launch {
+  animation: composer-mascot-launch 820ms cubic-bezier(0.3, 0.9, 0.4, 1);
+  transform-origin: bottom center;
+}
+
+@keyframes composer-mascot-jelly {
+  0% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(1.16, 0.84);
+  }
+  45% {
+    transform: scale(0.9, 1.1);
+  }
+  62% {
+    transform: scale(1.06, 0.94);
+  }
+  78% {
+    transform: scale(0.98, 1.02);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.composer-mascot-jelly {
+  transform-origin: bottom center;
+}
+
+.composer-mascot-jelly:hover {
+  animation: composer-mascot-jelly 600ms ease-out;
+}
+
+@keyframes composer-mascot-bubble-in {
+  0% {
+    opacity: 0;
+    transform: translateY(6px) scale(0.94);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.composer-mascot-bubble {
+  animation: composer-mascot-bubble-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}