@dotcraft/avatar 0.6.3

package/dist/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/dist/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/dist/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(--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(--text-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/dist/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);
+}

package/dist/composer/styles/foundation.css

@@ -0,0 +1,287 @@
+@keyframes composer-mascot-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.035);
+  }
+}
+
+.composer-mascot-breathe {
+  animation: composer-mascot-breathe 4s ease-in-out infinite;
+  transform-origin: bottom center;
+  will-change: transform;
+}
+
+.composer-mascot-motion {
+  position: relative;
+}
+
+.composer-mascot-motion > div:first-child {
+  position: relative;
+  z-index: 2;
+}
+
+.composer-mascot-fast-echo {
+  display: grid;
+  line-height: 0;
+  transform-origin: bottom center;
+}
+
+.composer-mascot-character-stage {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  overflow: visible;
+}
+
+
+[data-mascot-speed='fast'] .composer-mascot-motion {
+  --mascot-fast-shift-base: oklch(from var(--mascot-energy-accent)
+    clamp(0.5, calc(l + 0.22), 0.96) clamp(0.06, calc(c * 0.88), 0.27) calc(h + 92));
+  --mascot-fast-echo-left: color-mix(in oklab, var(--mascot-energy-accent) 68%, var(--text-primary));
+  --mascot-fast-echo-right: color-mix(in oklab, var(--mascot-fast-shift-base) 78%, var(--text-primary));
+}
+
+[data-mascot-speed='fast'] .composer-mascot-fast-echo {
+  animation: composer-mascot-fast-soft-echo 5.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  will-change: filter;
+}
+
+@keyframes composer-mascot-fast-soft-echo {
+  0%, 100% {
+    filter:
+      drop-shadow(-2.1px 0 0.18px rgb(from var(--mascot-fast-echo-left) r g b / 0.58))
+      drop-shadow(-4px 0 0.25px rgb(from var(--mascot-fast-echo-left) r g b / 0.22))
+      drop-shadow(1.3px 0 0.2px rgb(from var(--mascot-fast-echo-right) r g b / 0.28))
+      drop-shadow(2.7px 0 0.25px rgb(from var(--mascot-fast-echo-right) r g b / 0.1));
+  }
+  50% {
+    filter:
+      drop-shadow(-1.3px 0 0.2px rgb(from var(--mascot-fast-echo-left) r g b / 0.28))
+      drop-shadow(-2.7px 0 0.25px rgb(from var(--mascot-fast-echo-left) r g b / 0.1))
+      drop-shadow(2.1px 0 0.18px rgb(from var(--mascot-fast-echo-right) r g b / 0.58))
+      drop-shadow(4px 0 0.25px rgb(from var(--mascot-fast-echo-right) r g b / 0.22));
+  }
+}
+
+html[data-theme="light"] [data-mascot-speed='fast'] .composer-mascot-motion {
+  --mascot-fast-light-edge-base: oklch(from var(--mascot-energy-accent)
+    clamp(0.38, calc(l + 0.12), 0.94) clamp(0.05, calc(c * 0.92), 0.28) calc(h + 8));
+  --mascot-fast-light-echo-left: color-mix(in oklab, var(--mascot-fast-light-edge-base) 58%, var(--bg-primary));
+  --mascot-fast-light-echo-right: color-mix(in oklab, var(--mascot-fast-shift-base) 54%, var(--bg-primary));
+}
+
+html[data-theme="light"] [data-mascot-speed='fast'] .composer-mascot-fast-echo {
+  animation-name: composer-mascot-fast-soft-echo-light;
+}
+
+@keyframes composer-mascot-fast-soft-echo-light {
+  0%, 100% {
+    filter:
+      drop-shadow(-1.55px 0 1.25px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.3))
+      drop-shadow(-3px 0 2.8px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.09))
+      drop-shadow(1.1px 0 1.35px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.16))
+      drop-shadow(2.5px 0 2.8px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.05));
+  }
+  50% {
+    filter:
+      drop-shadow(-1.1px 0 1.35px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.16))
+      drop-shadow(-2.5px 0 2.8px rgb(from var(--mascot-fast-light-echo-left) r g b / 0.05))
+      drop-shadow(1.55px 0 1.25px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.3))
+      drop-shadow(3px 0 2.8px rgb(from var(--mascot-fast-light-echo-right) r g b / 0.09));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-dark {
+  0%, 38%, 100% { stop-color: var(--mascot-body-dark); }
+  14% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0573), 0.96)
+      clamp(0, calc(c * 0.909), 0.3)
+      calc(h - 0.1));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-mid {
+  0%, 24%, 70%, 100% { stop-color: var(--mascot-body-mid); }
+  46% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.0796), 0.96)
+      clamp(0, calc(c * 0.814), 0.3)
+      calc(h - 0.56));
+  }
+}
+
+@keyframes composer-mascot-energy-medium-light {
+  0%, 50%, 94%, 100% { stop-color: var(--mascot-body-light); }
+  72% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.1052), 0.96)
+      clamp(0, calc(c * 0.569), 0.3)
+      calc(h + 1.57));
+  }
+}
+
+@keyframes composer-mascot-energy-high-dark {
+  0%, 32%, 100% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l - 0.0373), 0.96)
+      clamp(0, calc(c * 0.987), 0.3)
+      calc(h - 0.32));
+  }
+  12% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0829), 0.96)
+      clamp(0, calc(c * 0.846), 0.3)
+      calc(h - 2.77));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mid {
+  0%, 22%, 60%, 100% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l - 0.0386), 0.96)
+      clamp(0, calc(c * 1.211), 0.3)
+      calc(h - 3.62));
+  }
+  40% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.1298), 0.96)
+      clamp(0, calc(c * 0.662), 0.3)
+      calc(h - 9.24));
+  }
+}
+
+@keyframes composer-mascot-energy-high-light {
+  0%, 48%, 86%, 100% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l - 0.0112), 0.96)
+      clamp(0, calc(c * 1.047), 0.3)
+      calc(h - 9.36));
+  }
+  66% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.1713), 0.96)
+      clamp(0, calc(c * 0.314), 0.3)
+      calc(h - 9.37));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mark-dark {
+  0%, 44%, 100% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0017), 0.96)
+      clamp(0, calc(c * 0.995), 0.3)
+      calc(h - 0.12));
+  }
+  22% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.1236), 0.96)
+      clamp(0, calc(c * 0.758), 0.3)
+      calc(h - 3.57));
+  }
+}
+
+@keyframes composer-mascot-energy-high-mark-light {
+  0%, 42%, 86%, 100% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.05), 0.96)
+      clamp(0, calc(c * 0.913), 0.3)
+      calc(h - 1.66));
+  }
+  64% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.2226), 0.96)
+      clamp(0, calc(c * 0.409), 0.3)
+      calc(h - 12.45));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-dark {
+  0%, 36%, 100% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l - 0.0021), 0.96)
+      clamp(0, calc(c * 0.983), 0.3)
+      calc(h + 2.19));
+  }
+  16% {
+    stop-color: oklch(from var(--mascot-body-dark)
+      clamp(0.28, calc(l + 0.0559), 0.96)
+      clamp(0, calc(c * 1.002), 0.3)
+      calc(h + 40.24));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mid {
+  0%, 24%, 64%, 100% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l - 0.0159), 0.96)
+      clamp(0, calc(c * 1.133), 0.3)
+      calc(h + 1.9));
+  }
+  44% {
+    stop-color: oklch(from var(--mascot-body-mid)
+      clamp(0.28, calc(l + 0.0032), 0.96)
+      clamp(0, calc(c * 1.303), 0.3)
+      calc(h + 41.78));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-light {
+  0%, 50%, 90%, 100% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.0239), 0.96)
+      clamp(0, calc(c * 0.896), 0.3)
+      calc(h - 2.67));
+  }
+  70% {
+    stop-color: oklch(from var(--mascot-body-light)
+      clamp(0.28, calc(l + 0.0668), 0.96)
+      clamp(0, calc(c * 1.057), 0.3)
+      calc(h + 42.19));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mark-dark {
+  0%, 46%, 100% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0159), 0.96)
+      clamp(0, calc(c * 0.965), 0.3)
+      calc(h + 1.45));
+  }
+  24% {
+    stop-color: oklch(from var(--mascot-mark-dark)
+      clamp(0.28, calc(l + 0.0437), 0.96)
+      clamp(0, calc(c * 0.993), 0.3)
+      calc(h + 36.73));
+  }
+}
+
+@keyframes composer-mascot-energy-extra-mark-light {
+  0%, 46%, 90%, 100% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.0697), 0.96)
+      clamp(0, calc(c * 0.851), 0.3)
+      calc(h + 0.49));
+  }
+  68% {
+    stop-color: oklch(from var(--mascot-mark-energy)
+      clamp(0.28, calc(l + 0.1058), 0.96)
+      clamp(0, calc(c * 0.995), 0.3)
+      calc(h + 45.19));
+  }
+}
+
+.composer-mascot-contact-shadow {
+  position: absolute;
+  right: 68px;
+  top: 1px;
+  width: 72px;
+  height: 24px;
+  transform: translateX(50%);
+  border-radius: 50%;
+  filter: blur(2px);
+  pointer-events: none;
+}