boberto

  on('ui.render', { component: 'Pane', requestId: PANEL }, async ($, e) => {
    const what = await drawn($)
    const isPinned = (await read($, preview)) !== null
    const status = what.kind === 'gesture' ? (GESTURE_STATUS[what.id] ?? what.id) : STATUS[what.name]

    if (e.surface !== 'desktop') {
      const { Text } = $.ui.resolve(e)
      return <Text dimColor>Boberto is {status} (drawn in the desktop app).</Text>
    }

    const attire = await read($, outfit)
    const o = optionsOf()
    let svg: string
    let alt: string
    if (what.kind === 'gesture' && hasGesture(what.id, attire, 'full')) {
      svg = (await gestureSvg(what.id, attire, 'full'))?.svg ?? liveSvg('idle', attire, 'full')
      alt = `Boberto is ${status}`
    } else {
      const name = what.kind === 'live' ? what.name : 'idle'
      svg = liveSvg(name, attire, 'full')
      alt = LABELS[name]
    }

    const { Box, Button, Input, Select, Svg, Text } = $.ui.resolve(e)
    const isOpen = await read($, isWardrobeOpen)
    const tab = await read($, wardrobeTab)
    const editing = await read($, colorEditing)
    const problem = await read($, colorError)
    const columns = e.props.bodyColumns
    const hasBars = columns >= BARS_FROM_COLUMNS
    // Handlers read live state when they run; nothing here is written while drawing.
    const toggleWardrobe = () => void update($, isWardrobeOpen, value => !value)
    const choose = (target: BobertoColorTarget) => (value: string) => void pickColor($, target, value)
    const custom = { value: CUSTOM, label: 'Custom RGB…' }
    const hatColorPreset = attire.hatHex !== undefined && o.hatColors.some(c => c.id === attire.hatHex)
    /** Whether a part shows its RGB card: a custom color, or Custom picked over a matching preset. */
    const isCustom = (target: BobertoColorTarget) =>
      editing === target ||
      (target === 'hat' ? attire.hatHex !== undefined && !hatColorPreset : attire[HEX_FIELD[target]] !== undefined)
    const presetValue = (target: BobertoColorTarget, preset: string) => (isCustom(target) ? CUSTOM : preset)

    const label = labelSvg('Wardrobe')
    const header = (
      <Box key="wardrobe-head" flexDirection="row" alignItems="center" gap={1} width="100%">
        <Svg source={label.source} alt="Wardrobe" height={14} width={label.width} />
        <Box flexGrow={1} flexShrink={1} minWidth={0}>
          <Text dimColor wrap="truncate-end">
            {summarize(attire)}
          </Text>
        </Box>
        <Button key="wardrobe" label={isOpen ? 'Done ▴' : 'Customize ▾'} variant="secondary" onPress={toggleWardrobe} />
      </Box>
    )

    if (!isOpen) {
      return (
        <Box flexDirection="column" alignItems="center" paddingY={1} gap={1}>
          <Svg source={svg} alt={alt} height={PANEL_HEIGHT} width={Math.round(PANEL_HEIGHT * aspectOf(svg))} />
          <Text dimColor>
            {status}
            {isPinned ? ' · preview' : ''}
          </Text>
          <Box flexDirection="column" width="100%" paddingX={1}>
            {header}
          </Box>
        </Box>
      )
    }

    // One channel row: the letter, its bar (when there is room), the value field, and ∓16 steps.
    const channelRow = (c: keyof Rgb, value: number) => (
      <Box key={`row-${c}`} flexDirection="row" gap={1} alignItems="center">
        <Box width={2}>
          <Text color={CHANNEL_LETTER_COLORS[c]} bold>
            {c.toUpperCase()}
          </Text>
        </Box>
        {hasBars ? (
          <Svg
            source={channelBarSvg(c, value)}
            alt={`${c.toUpperCase()} ${value} of 255`}
            width={CHANNEL_BAR.width}
            height={CHANNEL_BAR.height}
          />
        ) : null}
        <Box width={12}>
          <Input
            key={c}
            value={String(value)}
            placeholder="0–255"
            submitLabel="set"
            onSubmit={text =>
              void editColor(
                $,
                cur => {
                  const n = parseByte(text)
                  return n === null ? null : withChannel(cur, c, n)
                },
                BAD_CHANNEL,
              )
            }
          />
        </Box>
        <Button
          key={`${c}-minus`}
          label={`−${STEP}`}
          variant="secondary"
          dimColor
          onPress={() => void editColor($, cur => withChannel(cur, c, hexToRgb(cur)[c] - STEP), BAD_CHANNEL)}
        />
        <Button
          key={`${c}-plus`}
          label={`+${STEP}`}
          variant="secondary"
          dimColor
          onPress={() => void editColor($, cur => withChannel(cur, c, hexToRgb(cur)[c] + STEP), BAD_CHANNEL)}
        />
      </Box>
    )

    // The open tab's RGB card: swatch, hex field, three channel rows, and the last note.
    const colorCard = (target: BobertoColorTarget) => {
      const hex = currentHex(attire, target)
      const rgb = hexToRgb(hex)
      return (
        <Box
          key="color-card"
          flexDirection="column"
          gap={1}
          paddingX={1}
          paddingY={1}
          borderStyle="round"
          borderColor="#2a2833"
          backgroundColor="#141319"
        >
          <Svg
            source={swatchCardSvg(hex, TARGET_NAMES[target])}
            alt={`${TARGET_NAMES[target]} color ${hex}`}
            width={SWATCH_CARD.width}
            height={SWATCH_CARD.height}
          />
          <Input
            key="hex"
            label="Hex"
            value={hex}
            placeholder="#rrggbb, #rgb or r,g,b"
            submitLabel="set"
            onSubmit={value => void editColor($, () => parseColor(value), BAD_COLOR)}
          />
          {channelRow('r', rgb.r)}
          {channelRow('g', rgb.g)}
          {channelRow('b', rgb.b)}
          {problem === null ? null : <Text color="#f87171">{problem}</Text>}
        </Box>
      )
    }

    // The open tab's controls: its preset Select(s), then its RGB card when its color is custom.
    const tabControls = (target: BobertoColorTarget) => {
      switch (target) {