The code behind the companion.

<script setup lang="ts">
import { jevvieColors } from '#core/domain/palette'
import { MOODS, SHAPES, TRICKS, type JevvieView, type Mood, type Shape, type Trick, type Wear } from '@cw/jevvie/character'

const WEARS: readonly Wear[] = ['none', 'clip', 'pencil', 'pin', 'flag', 'antennas']
const NAMES: Partial<Record<Shape, string>> = { bar: 'Bar (the _)', chamfer: 'Chamfered bar', capsule: 'Rounded bar', sticky: 'Sticky note' }
const title = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
const options = <T extends string>(list: readonly T[], name: (v: T) => string = title) => list.map((value) => ({ value, label: name(value) }))

const route = useRoute()
const router = useRouter()
const shape = ref<Shape>('bar')
const mood = ref<Mood>('happy')
const wear = ref<Wear>('none')
const valid = <T extends string>(q: unknown, list: readonly T[]) => (typeof q === 'string' && (list as readonly string[]).includes(q) ? (q as T) : undefined)
// follows the address: a prerendered page gets its query only after hydration
watch(() => route.query, (q) => {
  shape.value = valid(q.body, SHAPES) ?? shape.value
  mood.value = valid(q.mood, MOODS) ?? mood.value
  wear.value = valid(q.wear, WEARS) ?? wear.value
}, { immediate: true })
watch([shape, mood, wear], ([body, m, w]) => {
  void router.replace({ query: { ...route.query, body, mood: m, wear: w === 'none' ? undefined : w } })
})

const canvas = useTemplateRef<HTMLCanvasElement>('canvas')
const width = ref(64)
let view: JevvieView | undefined
const reduced = useReducedMotion()
async function mount() {
  view?.dispose()
  const { mountCharacter } = await import('@cw/jevvie/character')
  if (!canvas.value) return
  view = await mountCharacter(canvas.value, { colors: jevvieColors, shape: shape.value, wear: wear.value, reduced })
  width.value = canvas.value.width
  view.mood(mood.value)
}
onMounted(mount)
watch([shape, wear], mount)
watch(mood, (m) => view?.mood(m))
onBeforeUnmount(() => view?.dispose())

function trick(t: Trick) { view?.trick(t) }
function any<T>(list: readonly T[]): T { return list[Math.floor(Math.random() * list.length)]! }
function shuffle() {
  shape.value = any(SHAPES); mood.value = any(MOODS); wear.value = Math.random() < 0.3 ? any(WEARS) : 'none'
}

useSiteTool(() => ({
  name: 'jevvie_body',
  description: 'Put Jevvie in the studio in another body',
  arg: { name: 'body', description: 'Which body', values: options(SHAPES, String) },
  doing: (label) => `turning into a ${label}`,
  run: (value) => { shape.value = value as Shape },
}))
useSiteTool(() => ({
  name: 'jevvie_mood',
  description: 'Set how Jevvie in the studio feels',
  arg: { name: 'mood', description: 'Which mood', values: options(MOODS, String) },
  doing: (label) => `feeling ${label}`,
  run: (value) => { mood.value = value as Mood },
}))
useSiteTool(() => ({
  name: 'jevvie_trick',
  description: 'Make Jevvie in the studio do a trick',
  arg: { name: 'trick', description: 'Which trick', values: options(TRICKS, String) },
  doing: (label) => `doing a ${label}`,
  run: (value) => trick(value as Trick),
  readOnly: true,
}))

const { copy, copied } = useClipboard({ copiedDuring: 1500 })
const copyLink = () => copy(location.href)
const saving = ref(false)
async function save() {
  const src = canvas.value
  if (!src || saving.value) return
  saving.value = true
  const { data, width: w, height: h } = src.getContext('2d')!.getImageData(0, 0, src.width, src.height)
  let [x0, y0, x1, y1] = [w, h, 0, 0]
  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) if (data[(y * w + x) * 4 + 3]! > 8) { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y) }
  const SIZE = 512, LINE = 8, bw = x1 - x0 + 1, bh = y1 - y0 + 1
  const f = Math.max(1, Math.floor((SIZE - 2 * (16 + LINE)) / Math.max(bw, bh)))
  const layer = (fill?: string) => {
    const c = Object.assign(document.createElement('canvas'), { width: bw * f, height: bh * f }), ctx = c.getContext('2d')!
    ctx.imageSmoothingEnabled = false
    ctx.drawImage(src, x0, y0, bw, bh, 0, 0, bw * f, bh * f)
    if (fill) { ctx.globalCompositeOperation = 'source-in'; ctx.fillStyle = fill; ctx.fillRect(0, 0, c.width, c.height) }
    return c
  }
  const out = Object.assign(document.createElement('canvas'), { width: SIZE, height: SIZE }), ctx = out.getContext('2d')!
  const [left, top] = [(SIZE - bw * f) / 2, (SIZE - bh * f) / 2].map(Math.round) as [number, number]
  const white = layer('#fff')
  for (let dy = -LINE; dy <= LINE; dy++) for (let dx = -LINE; dx <= LINE; dx++) if (dx * dx + dy * dy <= LINE * LINE) ctx.drawImage(white, left + dx, top + dy)
  ctx.drawImage(layer(), left, top)
  const blob = await new Promise<Blob | null>((r) => out.toBlob(r, 'image/png'))
  saving.value = false
  if (!blob) return
  const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: `jevvie-${shape.value}-${mood.value}.png` })
  a.click()
  URL.revokeObjectURL(a.href)
}
</script>

<template>
  <Win title="CW/_ · STUDIO" as="section" label="Jevvie’s studio" class="studio">
    <template #meta>{{ title(shape) }} · {{ title(mood) }}</template>
    <div class="studio__grid">
      <div class="studio__view">
        <canvas ref="canvas" class="studio__canvas" :style="{ '--w': `${width}px` }" role="img" :aria-label="`Jevvie as ${shape}, ${mood}`" />
      </div>
      <div class="studio__controls mono-label">
        <div class="studio__row">
          <span>Body</span>
          <SelectBtn v-model="shape" :options="options(SHAPES, (s) => NAMES[s] ?? title(s))" label="Body" />
        </div>
        <div class="studio__row">
          <span>Wear</span>
          <SelectBtn v-model="wear" :options="options(WEARS)" label="Wear" />
        </div>
        <div class="studio__row studio__row--top">
          <span id="studio-mood">Mood</span>
          <div class="studio__moods" role="group" aria-labelledby="studio-mood">
            <button v-for="m in MOODS" :key="m" type="button" class="bare read-1 hit" :aria-pressed="mood === m" @click="mood = m">{{ m }}</button>
          </div>
        </div>
        <div class="studio__row">
          <span>Trick</span>
          <span class="btn-group" role="group" aria-label="Trick">
            <Btn v-for="t in TRICKS" :key="t" variant="ghost" size="sm" @click="trick(t)">{{ t }}</Btn>
          </span>
        </div>
        <div class="studio__actions">
          <Btn variant="amber" size="md" :disabled="saving" @click="save">Save sticker</Btn>
          <Btn variant="ghost" size="md" @click="shuffle">Shuffle ▚</Btn>
          <Btn variant="ghost" size="md" @click="copyLink">{{ copied ? 'Copied' : 'Copy link' }}</Btn>
        </div>
        <p class="studio__note">A 512 × 512 PNG, cut out and outlined, for a WhatsApp or Telegram sticker pack.</p>
      </div>
    </div>
  </Win>
</template>